@scalewing/react 1.21.0 → 1.22.0

package/dist/components/Table.js

@@ -1,10 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, } from 'react';
+import { forwardRef } from 'react';
 import { cx } from '../class-names.js';
 import { ScrollRegion } from './ScrollRegion.js';
+import { assertTableLayout, assertTableVerticalAlign, } from './table/table-layout.js';
+export { TableCell, } from './table/TableCell.js';
 /** A wide table scrolls inside its own `ScrollRegion`, named after the table. */
-export const Table = forwardRef(function Table({ children, className, density = 'comfortable', stickyHeader = true, ...rest }, ref) {
-    return (_jsx(ScrollRegion, { "aria-label": rest['aria-label'], "aria-labelledby": rest['aria-labelledby'], className: "sw-table-wrap", children: _jsx("table", { ref: ref, className: cx('sw-table', density === 'compact' && 'sw-table-compact', stickyHeader && 'sw-table-sticky', className), ...rest, children: children }) }));
+export const Table = forwardRef(function Table({ children, className, density = 'comfortable', layout = 'auto', stickyHeader = true, verticalAlign = 'middle', ...rest }, ref) {
+    assertTableLayout(layout);
+    assertTableVerticalAlign(verticalAlign);
+    return (_jsx(ScrollRegion, { "aria-label": rest['aria-label'], "aria-labelledby": rest['aria-labelledby'], className: "sw-table-wrap", children: _jsx("table", { ref: ref, className: cx('sw-table', density === 'compact' && 'sw-table-compact', layout === 'fixed' && 'sw-table-fixed', stickyHeader && 'sw-table-sticky', verticalAlign === 'top' && 'sw-table-top', className), ...rest, children: children }) }));
 });
 export const TableHeader = forwardRef(function TableHeader({ className, ...rest }, ref) {
     return _jsx("thead", { ref: ref, className: className, ...rest });
@@ -15,12 +19,3 @@ export const TableBody = forwardRef(function TableBody({ className, ...rest }, r
 export const TableRow = forwardRef(function TableRow({ className, selected = false, ...rest }, ref) {
     return (_jsx("tr", { ref: ref, "aria-selected": selected || undefined, className: cx(selected && 'sw-table-row-selected', className), ...rest }));
 });
-export const TableCell = forwardRef(function TableCell({ align = 'start', as = 'td', className, numeric = false, truncate = false, ...rest }, ref) {
-    const Component = as;
-    const alignmentClass = numeric
-        ? 'sw-table-numeric'
-        : align === 'end'
-            ? 'sw-table-end'
-            : undefined;
-    return (_jsx(Component, { ref: ref, className: cx(alignmentClass, truncate && 'sw-table-clip', className), ...rest }));
-});

package/dist/components/Tabs.d.ts

@@ -41,7 +41,9 @@ export declare function tabPanelId(tabsId: string, id: string): string;
 /**
  * A tab strip with `tablist` semantics for the sections of one page. Arrow
  * keys, Home and End move the focus and select at once; the strip scrolls
- * sideways when it overflows. Pair each item with a `TabPanel`. `sticky`
+ * sideways when it overflows, and an edge with labels past it draws a shade
+ * (`sw-scroll-more-start`, `sw-scroll-more-end`), as a wide `Table` does.
+ * Pair each item with a `TabPanel`. `sticky`
  * keeps it at the top of the viewport over a long panel.
  */
 export declare function Tabs({ id, items, onChange, sticky, value, ...labelProps }: TabsProps): import("react").JSX.Element;

package/dist/components/Tabs.js

@@ -1,6 +1,8 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef, } from 'react';
 import { cx } from '../class-names.js';
+import { useScrollOverflow } from './use-scroll-overflow.js';
 export function tabId(tabsId, id) {
     return `${tabsId}-tab-${id}`;
 }
@@ -10,11 +12,15 @@ export function tabPanelId(tabsId, id) {
 /**
  * A tab strip with `tablist` semantics for the sections of one page. Arrow
  * keys, Home and End move the focus and select at once; the strip scrolls
- * sideways when it overflows. Pair each item with a `TabPanel`. `sticky`
+ * sideways when it overflows, and an edge with labels past it draws a shade
+ * (`sw-scroll-more-start`, `sw-scroll-more-end`), as a wide `Table` does.
+ * Pair each item with a `TabPanel`. `sticky`
  * keeps it at the top of the viewport over a long panel.
  */
 export function Tabs({ id, items, onChange, sticky = false, value, ...labelProps }) {
     const tabs = useRef(new Map());
+    const strip = useRef(null);
+    const overflow = useScrollOverflow(strip);
     function select(next) {
         if (!next || next.id === value) {
             return;
@@ -43,7 +49,7 @@ export function Tabs({ id, items, onChange, sticky = false, value, ...labelProps
         event.preventDefault();
         select(target);
     }
-    return (_jsx("div", { className: cx('sw-tabs', sticky && 'sw-tabs-sticky'), onKeyDown: onKeyDown, role: "tablist", ...labelProps, children: items.map((item) => {
+    return (_jsx("div", { className: cx('sw-tabs', sticky && 'sw-tabs-sticky', overflow.start && 'sw-scroll-more-start', overflow.end && 'sw-scroll-more-end'), onKeyDown: onKeyDown, ref: strip, role: "tablist", ...labelProps, children: items.map((item) => {
             const selected = item.id === value;
             return (_jsx("button", { "aria-controls": tabPanelId(id, item.id), "aria-selected": selected, className: cx('sw-tab', selected && 'sw-tab-selected'), id: tabId(id, item.id), onClick: () => select(item), ref: (node) => {
                     if (node) {

package/dist/components/Tooltip.js

@@ -1,6 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cloneElement, useEffect, useId, useRef, useState, } from 'react';
+import { focusIsVisible, tapActs } from './tooltip/tooltip-open.js';
+import { useTooltipPlacement } from './tooltip/use-tooltip-placement.js';
 import { tooltipTriggerAria, } from './tooltip-trigger-aria.js';
 export function Tooltip({ content, disabled = false, relationship = 'description', trigger, }) {
     if (!content.trim())
@@ -11,6 +13,8 @@ export function Tooltip({ content, disabled = false, relationship = 'description
     const shown = open && !disabled;
     const id = useId();
     const wrapperRef = useRef(null);
+    const tooltipRef = useRef(null);
+    useTooltipPlacement(shown, tooltipRef, wrapperRef);
     const triggerAria = tooltipTriggerAria(trigger.props, disabled ? undefined : id, relationship);
     useEffect(() => {
         if (!open)
@@ -26,7 +30,13 @@ export function Tooltip({ content, disabled = false, relationship = 'description
     return (_jsxs("span", { className: "sw-tooltip-anchor", onBlurCapture: (event) => {
             if (!event.currentTarget.contains(event.relatedTarget))
                 setOpen(false);
-        }, onFocusCapture: () => setOpen(true), onKeyDownCapture: (event) => {
+        }, onFocusCapture: (event) => {
+            // A click or a tap focuses the trigger too; only a visible focus
+            // (the keyboard) opens the tooltip, so a clicked control does not
+            // keep its help shown until the focus moves.
+            if (focusIsVisible(event.target))
+                setOpen(true);
+        }, onKeyDownCapture: (event) => {
             // Escape hides a visible tooltip and nothing else, so a surrounding
             // Dialog does not also close. A hidden tooltip leaves Escape alone.
             if (event.key !== 'Escape' || !shown)
@@ -40,7 +50,13 @@ export function Tooltip({ content, disabled = false, relationship = 'description
             if (event.pointerType === 'mouse' || event.pointerType === 'pen')
                 setOpen(false);
         }, onPointerDownCapture: (event) => {
-            if (event.pointerType === 'touch')
+            if (event.pointerType !== 'touch')
+                return;
+            // A tap on a control does what the control does; only a trigger
+            // that does nothing else on a tap toggles its help.
+            if (tapActs(event.target, event.currentTarget))
+                setOpen(false);
+            else
                 setOpen((current) => !current);
-        }, ref: wrapperRef, children: [cloneElement(trigger, triggerAria), disabled ? null : (_jsx("span", { className: "sw-tooltip", hidden: !shown, id: id, role: "tooltip", children: content }))] }));
+        }, ref: wrapperRef, children: [cloneElement(trigger, triggerAria), disabled ? null : (_jsx("span", { className: "sw-tooltip", hidden: !shown, id: id, ref: tooltipRef, role: "tooltip", children: content }))] }));
 }

package/dist/components/action-menu/ActionMenuList.d.ts

@@ -1,9 +1,10 @@
-import { type KeyboardEvent, type RefObject } from 'react';
+import { type KeyboardEvent, type ReactNode, type RefObject } from 'react';
 import { type InlineAlign } from '../../anchored-position.js';
 import type { ActionMenuItem } from '../ActionMenu.js';
 type ActionMenuListProps = {
     id: string;
     align: InlineAlign;
+    header?: ReactNode;
     label: string;
     items: readonly ActionMenuItem[];
     focusIndex: number;
@@ -19,5 +20,5 @@ type ActionMenuListProps = {
  * or, with `align="end"`, its end, and with the other edge when that one
  * would not fit), with the focused command holding DOM focus.
  */
-export declare function ActionMenuList({ id, align, label, items, focusIndex, triggerRef, onDismiss, onFocusIndex, onKeyDown, onSelect, }: ActionMenuListProps): import("react").JSX.Element;
+export declare function ActionMenuList({ id, align, header, label, items, focusIndex, triggerRef, onDismiss, onFocusIndex, onKeyDown, onSelect, }: ActionMenuListProps): import("react").JSX.Element;
 export {};

package/dist/components/action-menu/ActionMenuList.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useLayoutEffect, useRef, } from 'react';
+import { useId, useLayoutEffect, useRef, } from 'react';
 import { cx } from '../../class-names.js';
 import { useAnchoredPopover } from '../use-anchored-popover.js';
 /**
@@ -9,7 +9,7 @@ import { useAnchoredPopover } from '../use-anchored-popover.js';
  * or, with `align="end"`, its end, and with the other edge when that one
  * would not fit), with the focused command holding DOM focus.
  */
-export function ActionMenuList({ id, align, label, items, focusIndex, triggerRef, onDismiss, onFocusIndex, onKeyDown, onSelect, }) {
+export function ActionMenuList({ id, align, header, label, items, focusIndex, triggerRef, onDismiss, onFocusIndex, onKeyDown, onSelect, }) {
     const menuRef = useRef(null);
     useAnchoredPopover(menuRef, triggerRef, triggerRef, onDismiss, {
         align,
@@ -19,10 +19,22 @@ export function ActionMenuList({ id, align, label, items, focusIndex, triggerRef
         const commands = menuRef.current?.querySelectorAll('[role="menuitem"]');
         commands?.[focusIndex]?.focus();
     }, [focusIndex]);
-    return (_jsx("div", { "aria-label": label, className: "sw-action-menu-list", id: id, onKeyDown: onKeyDown, ref: menuRef, role: "menu", children: items.map((item, index) => (_jsxs("button", { className: cx('sw-action-menu-item', item.destructive && 'sw-action-menu-item-danger'), disabled: item.disabled, onClick: () => onSelect(item), onFocus: () => onFocusIndex(index), onKeyDown: (event) => {
+    const headerId = useId();
+    // An empty header (nothing, false or '') is no header, so the menu is never
+    // described by an empty element.
+    const hasHeader = header !== undefined &&
+        header !== null &&
+        header !== false &&
+        header !== '';
+    const menu = (_jsx("div", { "aria-describedby": hasHeader ? headerId : undefined, "aria-label": label, className: hasHeader ? 'sw-action-menu-items' : 'sw-action-menu-list', id: hasHeader ? undefined : id, onKeyDown: onKeyDown, ref: hasHeader ? undefined : menuRef, role: "menu", children: items.map((item, index) => (_jsxs("button", { className: cx('sw-action-menu-item', item.destructive && 'sw-action-menu-item-danger'), disabled: item.disabled, onClick: () => onSelect(item), onFocus: () => onFocusIndex(index), onKeyDown: (event) => {
                 if (event.key === 'Enter' || event.key === ' ') {
                     event.preventDefault();
                     onSelect(item);
                 }
-            }, role: "menuitem", tabIndex: index === focusIndex ? 0 : -1, type: "button", children: [item.icon ? _jsx("span", { "aria-hidden": "true", children: item.icon }) : null, _jsx("span", { children: item.label })] }, item.id))) }));
+            }, role: "menuitem", tabIndex: index === focusIndex ? 0 : -1, type: "button", children: [item.icon ? _jsx("span", { "aria-hidden": "true", children: item.icon }) : null, _jsx("span", { lang: item.lang, children: item.label })] }, item.id))) }));
+    if (!hasHeader)
+        return menu;
+    // The header is not a menu item: it sits above the menu in the same
+    // popover, outside the arrow-key order, and describes the menu.
+    return (_jsxs("div", { className: "sw-action-menu-list", id: id, ref: menuRef, children: [_jsx("div", { className: "sw-action-menu-header", id: headerId, children: header }), menu] }));
 }

package/dist/components/date-field/CalendarDialog.d.ts

@@ -1,6 +1,7 @@
 import { type RefObject } from 'react';
 import { type WeekStart } from '../../calendar-month.js';
 import { type DateFieldLabels } from '../../date-field-labels.js';
+import { type DateOnlyRange } from '../../date-only.js';
 export type CalendarDialogProps = {
     anchorRef: RefObject<HTMLElement | null>;
     buttonRef: RefObject<HTMLElement | null>;
@@ -13,6 +14,8 @@ export type CalendarDialogProps = {
     /** `true` returns focus to the calendar button. */
     onClose: (restoreFocus: boolean) => void;
     onSelect: (value: string) => void;
+    /** Days to tint as a span; the selection stays `value`. */
+    range?: DateOnlyRange;
     required: boolean;
     today: string;
     value: string;
@@ -23,4 +26,4 @@ export type CalendarDialogProps = {
  * following the WAI-ARIA date picker dialog pattern. It opens on the
  * selected day, or today, kept inside `[min, max]`.
  */
-export declare function CalendarDialog({ anchorRef, buttonRef, id, labelId, labels, locale, max, min, onClose, onSelect, required, today, value, weekStartsOn, }: CalendarDialogProps): import("react").JSX.Element;
+export declare function CalendarDialog({ anchorRef, buttonRef, id, labelId, labels, locale, max, min, onClose, onSelect, range, required, today, value, weekStartsOn, }: CalendarDialogProps): import("react").JSX.Element;

package/dist/components/date-field/CalendarDialog.js

@@ -43,7 +43,7 @@ function sameDayIn(month, focused) {
  * following the WAI-ARIA date picker dialog pattern. It opens on the
  * selected day, or today, kept inside `[min, max]`.
  */
-export function CalendarDialog({ anchorRef, buttonRef, id, labelId, labels, locale, max, min, onClose, onSelect, required, today, value, weekStartsOn, }) {
+export function CalendarDialog({ anchorRef, buttonRef, id, labelId, labels, locale, max, min, onClose, onSelect, range, required, today, value, weekStartsOn, }) {
     const titleId = useId();
     const dialogRef = useRef(null);
     const [rawFocusDate, setFocusDate] = useState(value || today);
@@ -89,5 +89,5 @@ export function CalendarDialog({ anchorRef, buttonRef, id, labelId, labels, loca
         }, onKeyDown: onKeyDown, ref: dialogRef, role: "dialog", children: [_jsx(CalendarHeader, { labels: labels, locale: locale, max: max, min: min, month: month, onMonthChange: (next) => setFocusDate(sameDayIn(next, focusDate)), titleId: titleId, todayYear: monthOf(today).year }), _jsx(CalendarGrid, { focusDate: focusDate, locale: locale, max: max, min: min, month: month, onFocusDate: setFocusDate, onMoveFocus: (next) => {
                     focusGrid.current = true;
                     setFocusDate(next);
-                }, onSelect: onSelect, selected: value, titleId: titleId, today: today, weekStartsOn: weekStartsOn }), _jsxs("div", { className: "sw-date-field-footer", children: [required ? null : (_jsx(Button, { disabled: value === '', onPress: () => onSelect(''), size: "sm", variant: "ghost", children: labels.clear })), _jsx(Button, { disabled: todayUnavailable, onPress: () => onSelect(today), size: "sm", variant: "ghost", children: labels.today })] })] }));
+                }, onSelect: onSelect, range: range, selected: value, titleId: titleId, today: today, weekStartsOn: weekStartsOn }), _jsxs("div", { className: "sw-date-field-footer", children: [required ? null : (_jsx(Button, { disabled: value === '', onPress: () => onSelect(''), size: "sm", variant: "ghost", children: labels.clear })), _jsx(Button, { disabled: todayUnavailable, onPress: () => onSelect(today), size: "sm", variant: "ghost", children: labels.today })] })] }));
 }

package/dist/components/date-field/CalendarGrid.d.ts

@@ -1,4 +1,5 @@
 import { type CalendarMonth, type WeekStart } from '../../calendar-month.js';
+import { type DateOnlyRange } from '../../date-only.js';
 export type CalendarGridProps = {
     focusDate: string;
     locale: string;
@@ -10,6 +11,8 @@ export type CalendarGridProps = {
     /** A grid key chose a day: focus it. */
     onMoveFocus: (value: string) => void;
     onSelect: (value: string) => void;
+    /** Days to tint as a span, such as the period a page shows. */
+    range?: DateOnlyRange;
     selected: string;
     titleId: string;
     today: string;
@@ -20,4 +23,4 @@ export type CalendarGridProps = {
  * `[min, max]` stay focusable for orientation but are `aria-disabled`;
  * padding past the four-digit years is blank and inert.
  */
-export declare function CalendarGrid({ focusDate, locale, max, min, month, onFocusDate, onMoveFocus, onSelect, selected, titleId, today, weekStartsOn, }: CalendarGridProps): import("react").JSX.Element;
+export declare function CalendarGrid({ focusDate, locale, max, min, month, onFocusDate, onMoveFocus, onSelect, range, selected, titleId, today, weekStartsOn, }: CalendarGridProps): import("react").JSX.Element;

package/dist/components/date-field/CalendarGrid.js

@@ -3,13 +3,21 @@ import { cx } from '../../class-names.js';
 import { calendarKeyTarget } from '../../calendar-keys.js';
 import { formatDateLabel, weekdayLabels } from '../../calendar-labels.js';
 import { monthGrid, } from '../../calendar-month.js';
-import { isOutsideDateRange } from '../../date-only.js';
+import { dayInRange, isOutsideDateRange, } from '../../date-only.js';
+/** A day's range classes: in the span, and its start or end. */
+function rangeClassNames(place) {
+    return [
+        place !== null && 'sw-date-field-day-in-range',
+        (place === 'start' || place === 'only') && 'sw-date-field-day-range-start',
+        (place === 'end' || place === 'only') && 'sw-date-field-day-range-end',
+    ];
+}
 /**
  * The month as a WAI-ARIA grid with one roving tab stop. Days outside
  * `[min, max]` stay focusable for orientation but are `aria-disabled`;
  * padding past the four-digit years is blank and inert.
  */
-export function CalendarGrid({ focusDate, locale, max, min, month, onFocusDate, onMoveFocus, onSelect, selected, titleId, today, weekStartsOn, }) {
+export function CalendarGrid({ focusDate, locale, max, min, month, onFocusDate, onMoveFocus, onSelect, range, selected, titleId, today, weekStartsOn, }) {
     function choose(value) {
         if (!isOutsideDateRange(value, min, max))
             onSelect(value);
@@ -27,7 +35,7 @@ export function CalendarGrid({ focusDate, locale, max, min, month, onFocusDate,
         event.preventDefault();
         onMoveFocus(target);
     }
-    return (_jsxs("table", { "aria-labelledby": titleId, className: "sw-date-field-grid", onKeyDown: onKeyDown, role: "grid", children: [_jsx("thead", { children: _jsx("tr", { children: weekdayLabels(locale, weekStartsOn).map((weekday) => (_jsx("th", { abbr: weekday.long, scope: "col", children: weekday.short }, weekday.long))) }) }), _jsx("tbody", { children: monthGrid(month, weekStartsOn).map((row, rowIndex) => (_jsx("tr", { children: row.map((cell, column) => cell === null ? (_jsx("td", { "aria-disabled": "true", className: "sw-date-field-day sw-date-field-day-outside", role: "gridcell" }, `blank-${column}`)) : (_jsx("td", { "aria-current": cell.value === today ? 'date' : undefined, "aria-disabled": isOutsideDateRange(cell.value, min, max) || undefined, "aria-label": formatDateLabel(cell.value, locale), "aria-selected": cell.value === selected, className: cx('sw-date-field-day', !cell.inMonth && 'sw-date-field-day-outside'), "data-date": cell.value, onClick: () => choose(cell.value), onFocus: () => {
+    return (_jsxs("table", { "aria-labelledby": titleId, className: "sw-date-field-grid", onKeyDown: onKeyDown, role: "grid", children: [_jsx("thead", { children: _jsx("tr", { children: weekdayLabels(locale, weekStartsOn).map((weekday) => (_jsx("th", { abbr: weekday.long, scope: "col", children: weekday.short }, weekday.long))) }) }), _jsx("tbody", { children: monthGrid(month, weekStartsOn).map((row, rowIndex) => (_jsx("tr", { children: row.map((cell, column) => cell === null ? (_jsx("td", { "aria-disabled": "true", className: "sw-date-field-day sw-date-field-day-outside", role: "gridcell" }, `blank-${column}`)) : (_jsx("td", { "aria-current": cell.value === today ? 'date' : undefined, "aria-disabled": isOutsideDateRange(cell.value, min, max) || undefined, "aria-label": formatDateLabel(cell.value, locale), "aria-selected": cell.value === selected, className: cx('sw-date-field-day', !cell.inMonth && 'sw-date-field-day-outside', ...rangeClassNames(dayInRange(cell.value, range))), "data-date": cell.value, onClick: () => choose(cell.value), onFocus: () => {
                             // A press on a neighboring month's day selects it; moving
                             // the grid first would pull the day out from under it.
                             if (cell.inMonth && cell.value !== focusDate)

package/dist/components/denomination-grid/DenominationStrip.d.ts

@@ -1,4 +1,4 @@
 import { type DenominationGridProps } from './types.js';
-type StripProps = Required<Pick<DenominationGridProps, 'label' | 'columns' | 'rows' | 'zeroLabel'>> & Pick<DenominationGridProps, 'totalLabel'>;
-export declare function DenominationStrip({ label, columns, rows, zeroLabel, totalLabel, }: StripProps): import("react").JSX.Element;
+type StripProps = Required<Pick<DenominationGridProps, 'label' | 'columns' | 'rows' | 'zeroLabel'>> & Pick<DenominationGridProps, 'totalLabel' | 'labelWidth'>;
+export declare function DenominationStrip({ label, columns, rows, zeroLabel, totalLabel, labelWidth, }: StripProps): import("react").JSX.Element;
 export {};

package/dist/components/denomination-grid/DenominationStrip.js

@@ -1,22 +1,33 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../../class-names.js';
+import { denominationLabelWidthClass } from '../../css/css-denomination-aligned.js';
 import { denominationCellToneClassNames } from '../../css/css-denomination-cell-tones.js';
 import { denominationCellView } from '../../denomination-cells.js';
 import { ScrollRegion } from '../ScrollRegion.js';
 import { RowLabelLine } from './RowLabelLine.js';
 /**
- * The total column's header: a visually hidden `th` when the consumer names
- * the column, otherwise the empty corner it has always been. Both carry
- * `sw-denomination-total-head`, so below md the column takes no width.
+ * The total column's header: the consumer's name for the column, shown over
+ * the totals from md up in the column heads' style, and visually hidden
+ * below md, where each total sits under its row's label and the column
+ * takes no width. Without a name it is the empty corner it has always been.
+ * Both carry `sw-denomination-total-head`.
  */
 function TotalHead({ totalLabel }) {
     if (totalLabel === undefined)
         return _jsx("td", { className: "sw-denomination-corner sw-denomination-total-head" });
-    return (_jsx("th", { className: "sw-denomination-total-head", scope: "col", children: _jsx("span", { className: "sw-sr-only", children: totalLabel }) }));
+    return (_jsx("th", { className: "sw-denomination-head sw-denomination-total-head", scope: "col", children: _jsx("span", { className: "sw-denomination-total-label", children: totalLabel }) }));
 }
-export function DenominationStrip({ label, columns, rows, zeroLabel, totalLabel, }) {
+export function DenominationStrip({ label, columns, rows, zeroLabel, totalLabel, labelWidth, }) {
     const hasTotals = rows.some((row) => row.total !== undefined);
-    return (_jsx(ScrollRegion, { "aria-label": label, className: "sw-denomination-scroll", children: _jsxs("table", { className: "sw-denomination-grid sw-denomination-strip", children: [_jsx("caption", { className: "sw-sr-only", children: label }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("td", { className: "sw-denomination-corner" }), columns.map((column) => (_jsx("th", { className: "sw-denomination-head", scope: "col", children: column.label }, column.key))), hasTotals ? _jsx(TotalHead, { totalLabel: totalLabel }) : null] }) }), _jsx("tbody", { children: rows.map((row) => (_jsxs("tr", { className: cx('sw-denomination-row', `sw-denomination-row-${row.tone ?? 'neutral'}`, row.signed && 'sw-denomination-row-signed'), children: [_jsx("th", { className: "sw-denomination-label", scope: "row", children: _jsxs("span", { className: "sw-denomination-label-body", children: [_jsx(RowLabelLine, { row: row }), row.total !== undefined ? (_jsx("span", { "aria-hidden": "true", className: "sw-denomination-total-inline", children: row.total })) : null] }) }), columns.map((column, index) => {
+    // An aligned strip sizes its columns from the region's width; it needs
+    // the column count and whether a total column takes a share.
+    const aligned = labelWidth === undefined
+        ? undefined
+        : {
+            '--sw-denomination-columns': columns.length,
+            '--sw-denomination-total': hasTotals ? 1 : 0,
+        };
+    return (_jsx(ScrollRegion, { "aria-label": label, className: cx('sw-denomination-scroll', aligned && 'sw-denomination-scroll-aligned'), children: _jsxs("table", { className: cx('sw-denomination-grid sw-denomination-strip', labelWidth && 'sw-denomination-strip-aligned', labelWidth && denominationLabelWidthClass(labelWidth)), style: aligned, children: [_jsx("caption", { className: "sw-sr-only", children: label }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("td", { className: "sw-denomination-corner" }), columns.map((column) => (_jsx("th", { className: "sw-denomination-head", scope: "col", children: column.label }, column.key))), hasTotals ? _jsx(TotalHead, { totalLabel: totalLabel }) : null] }) }), _jsx("tbody", { children: rows.map((row) => (_jsxs("tr", { className: cx('sw-denomination-row', `sw-denomination-row-${row.tone ?? 'neutral'}`, row.signed && 'sw-denomination-row-signed'), children: [_jsx("th", { className: "sw-denomination-label", scope: "row", children: _jsxs("span", { className: "sw-denomination-label-body", children: [_jsx(RowLabelLine, { row: row }), row.total !== undefined ? (_jsx("span", { "aria-hidden": "true", className: "sw-denomination-total-inline", children: row.total })) : null] }) }), columns.map((column, index) => {
                                 const view = denominationCellView(row.cells[index] ?? null, row.signed ?? false, zeroLabel);
                                 return (_jsx("td", { className: cx('sw-denomination-cell', `sw-denomination-cell-${view.state}`, ...denominationCellToneClassNames(row.cellTones?.[index])), children: view.text }, column.key));
                             }), hasTotals ? (_jsx("td", { className: "sw-denomination-total", children: _jsx("span", { className: "sw-denomination-total-value", children: row.total ?? '' }) })) : null] }, row.id))) })] }) }));

package/dist/components/denomination-grid/types.d.ts

@@ -1,5 +1,7 @@
 import { type ReactNode } from 'react';
 import { type BadgeTone } from '../../css/css-data.js';
+import { type DenominationLabelWidth } from '../../css/css-denomination-aligned.js';
+export type { DenominationLabelWidth };
 export type DenominationGridTone = BadgeTone;
 export type DenominationGridLayout = 'strip' | 'tiles';
 /**
@@ -35,8 +37,9 @@ export type DenominationGridProps = {
     subtotal?: (count: number, column: DenominationGridColumn) => string;
     zeroLabel?: string;
     /**
-     * Names the strip's total column for assistive technology (a visually
-     * hidden column header), such as "Total". Only the strip has that column.
+     * Names the strip's total column, such as "Total": a column header over
+     * the totals from md up, visually hidden below md, where each total sits
+     * under its row's label. Only the strip has that column.
      */
     totalLabel?: string;
     /**
@@ -46,4 +49,14 @@ export type DenominationGridProps = {
      * landmark list. Only the tiles layout has row containers.
      */
     rowRole?: DenominationGridRowRole;
+    /**
+     * Lines the strip's columns up with every other strip of the same columns
+     * in a container of the same width, such as the cards of a feed: the row
+     * labels take this width (`xs` to `xl`, 4 to 16 rem, the `Table` column
+     * sizes; pick the narrowest that holds the longest label's longest word)
+     * and the count columns share the rest equally, whatever the counts are.
+     * Without it each strip sizes its columns by its own content. Only the
+     * strip has a label column.
+     */
+    labelWidth?: DenominationLabelWidth;
 };

package/dist/components/table/TableCell.d.ts

@@ -0,0 +1,42 @@
+import { type TdHTMLAttributes, type ThHTMLAttributes } from 'react';
+import { type TableColumnWidth } from './table-layout.js';
+export type { TableColumnWidth };
+type TableCellAlign = 'start' | 'end';
+/**
+ * A sortable column's state: sorted `ascending` or `descending`, or `none`
+ * (sortable, not the column the table is sorted by).
+ */
+export type TableSort = 'ascending' | 'descending' | 'none';
+type TableHeaderSort = {
+    /**
+     * Makes a header cell (`as="th"`) a sort control: its children become a
+     * button in the header's own text style, with a sort glyph after them (an
+     * up chevron when `ascending`, a down chevron when `descending`, a muted
+     * pair when `none`), and the cell carries `aria-sort` while it is the
+     * sorted column. Pass it with `onSort`, on `th` cells only.
+     */
+    sort?: TableSort;
+    /** Called when the header's sort button is pressed; the consumer sorts. */
+    onSort?: () => void;
+};
+export type TableCellProps = ((Omit<TdHTMLAttributes<HTMLTableCellElement>, 'width'> & {
+    as?: 'td';
+    sort?: never;
+    onSort?: never;
+}) | (Omit<ThHTMLAttributes<HTMLTableCellElement>, 'width'> & {
+    as: 'th';
+} & TableHeaderSort)) & {
+    align?: TableCellAlign;
+    numeric?: boolean;
+    truncate?: boolean;
+    /**
+     * The column's width, on its header cell: `xs` to `xl` are widths in rem
+     * (4, 6, 8, 12 and 16), which a `fixed` table keeps whatever the rows
+     * hold. `min` gives an `auto` table's column the least room its content
+     * allows and keeps this cell's text on one line, so set it on every cell
+     * of that column; a `fixed` table, which never measures content, treats
+     * it as no width.
+     */
+    width?: TableColumnWidth;
+};
+export declare const TableCell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;

package/dist/components/table/TableCell.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, } from 'react';
+import { cx } from '../../class-names.js';
+import { assertTableColumnWidth, tableColumnWidthClass, } from './table-layout.js';
+const tableSorts = ['ascending', 'descending', 'none'];
+/** `sort` and `onSort` come together, on a header cell, with a known value. */
+function assertSort(as, sort, onSort) {
+    if (sort === undefined && onSort === undefined)
+        return;
+    if (as !== 'th')
+        throw new TypeError('TableCell sort is for a header cell (as="th")');
+    if (sort === undefined || typeof onSort !== 'function')
+        throw new TypeError('TableCell sort and onSort are passed together');
+    if (!tableSorts.includes(sort))
+        throw new RangeError(`Unknown TableCell sort: ${String(sort)}`);
+}
+export const TableCell = forwardRef(function TableCell({ align = 'start', as = 'td', children, className, numeric = false, onSort, sort, truncate = false, width, ...rest }, ref) {
+    assertSort(as, sort, onSort);
+    assertTableColumnWidth(width);
+    const Component = as;
+    const alignmentClass = numeric
+        ? 'sw-table-numeric'
+        : align === 'end'
+            ? 'sw-table-end'
+            : undefined;
+    return (_jsx(Component, { ref: ref, "aria-sort": sort === undefined || sort === 'none' ? undefined : sort, className: cx(alignmentClass, truncate && 'sw-table-clip', width && tableColumnWidthClass(width), className), ...rest, children: sort !== undefined && onSort ? (_jsxs("button", { className: "sw-table-sort", onClick: onSort, type: "button", children: [children, _jsx("span", { "aria-hidden": "true", className: cx('sw-table-sort-glyph', `sw-table-sort-${sort}`) })] })) : (children) }));
+});

package/dist/components/table/table-layout.d.ts

@@ -0,0 +1,10 @@
+import { type TableColumnWidth } from '../../css/css-table-layout.js';
+export { tableColumnWidthClass } from '../../css/css-table-layout.js';
+export type { TableColumnWidth };
+/** How a table sizes its columns: by content, or from the header row only. */
+export type TableLayout = 'auto' | 'fixed';
+/** Where a cell's content sits in a row taller than it. */
+export type TableVerticalAlign = 'middle' | 'top';
+export declare function assertTableLayout(layout: TableLayout): void;
+export declare function assertTableVerticalAlign(align: TableVerticalAlign): void;
+export declare function assertTableColumnWidth(width: TableColumnWidth | undefined): void;

package/dist/components/table/table-layout.js

@@ -0,0 +1,14 @@
+import { tableColumnWidths, } from '../../css/css-table-layout.js';
+export { tableColumnWidthClass } from '../../css/css-table-layout.js';
+export function assertTableLayout(layout) {
+    if (layout !== 'auto' && layout !== 'fixed')
+        throw new RangeError(`Unknown Table layout: ${String(layout)}`);
+}
+export function assertTableVerticalAlign(align) {
+    if (align !== 'middle' && align !== 'top')
+        throw new RangeError(`Unknown Table verticalAlign: ${String(align)}`);
+}
+export function assertTableColumnWidth(width) {
+    if (width !== undefined && !tableColumnWidths.includes(width))
+        throw new RangeError(`Unknown TableCell width: ${String(width)}`);
+}

package/dist/components/tooltip/tooltip-open.d.ts

@@ -0,0 +1,8 @@
+/** Whether a tap at `target` lands on a control inside the tooltip's anchor. */
+export declare function tapActs(target: EventTarget | null, anchor: Element): boolean;
+/**
+ * Whether the focus that just landed on `target` is visible: from the
+ * keyboard or a script, not a click or a tap, which hover and the tap's own
+ * rule already cover. A browser without `:focus-visible` counts it visible.
+ */
+export declare function focusIsVisible(target: EventTarget | null): boolean;

package/dist/components/tooltip/tooltip-open.js

@@ -0,0 +1,60 @@
+/**
+ * A trigger that acts when pressed: a link, a button, a form control or an
+ * element with a widget role. A tap on it does what it does and does not
+ * also open the tooltip, which would stay over the result (or, after a
+ * link, over the next page).
+ */
+const actingRoles = [
+    'button',
+    'checkbox',
+    'combobox',
+    'link',
+    'menuitem',
+    'menuitemcheckbox',
+    'menuitemradio',
+    'option',
+    'radio',
+    'searchbox',
+    'slider',
+    'spinbutton',
+    'switch',
+    'tab',
+    'textbox',
+    'treeitem',
+];
+const actingTrigger = [
+    'a[href]',
+    'area[href]',
+    'audio[controls]',
+    'button',
+    'input',
+    'label',
+    'select',
+    'summary',
+    'textarea',
+    'video[controls]',
+    '[contenteditable]:not([contenteditable="false"])',
+    ...actingRoles.map((role) => `[role="${role}"]`),
+].join(', ');
+/** Whether a tap at `target` lands on a control inside the tooltip's anchor. */
+export function tapActs(target, anchor) {
+    if (!(target instanceof Element))
+        return false;
+    const control = target.closest(actingTrigger);
+    return control !== null && anchor.contains(control);
+}
+/**
+ * Whether the focus that just landed on `target` is visible: from the
+ * keyboard or a script, not a click or a tap, which hover and the tap's own
+ * rule already cover. A browser without `:focus-visible` counts it visible.
+ */
+export function focusIsVisible(target) {
+    if (!(target instanceof Element))
+        return true;
+    try {
+        return target.matches(':focus-visible');
+    }
+    catch {
+        return true;
+    }
+}

package/dist/components/tooltip/use-tooltip-placement.d.ts

@@ -0,0 +1,11 @@
+import { type RefObject } from 'react';
+/**
+ * While `shown`, puts the tooltip on the top layer as a manual popover and
+ * keeps it beside its anchor and inside the viewport: under the anchor (over
+ * it when there is no room below), lined up with its start or, where that
+ * would leave the screen, its end, a `space-2` inset from every edge. It
+ * follows scrolling, resizing, and a change in either element's size. While
+ * hidden the tooltip stays in the page (it may name its trigger) and is not
+ * a popover. Without the popover API it keeps the same fixed placement.
+ */
+export declare function useTooltipPlacement(shown: boolean, tooltipRef: RefObject<HTMLElement | null>, anchorRef: RefObject<HTMLElement | null>): void;

package/dist/components/tooltip/use-tooltip-placement.js

@@ -0,0 +1,46 @@
+'use client';
+import { useLayoutEffect } from 'react';
+import { placePopover } from '../use-anchored-popover.js';
+/**
+ * While `shown`, puts the tooltip on the top layer as a manual popover and
+ * keeps it beside its anchor and inside the viewport: under the anchor (over
+ * it when there is no room below), lined up with its start or, where that
+ * would leave the screen, its end, a `space-2` inset from every edge. It
+ * follows scrolling, resizing, and a change in either element's size. While
+ * hidden the tooltip stays in the page (it may name its trigger) and is not
+ * a popover. Without the popover API it keeps the same fixed placement.
+ */
+export function useTooltipPlacement(shown, tooltipRef, anchorRef) {
+    useLayoutEffect(() => {
+        const node = tooltipRef.current;
+        const anchor = anchorRef.current;
+        if (!shown || !node || !anchor)
+            return;
+        const supportsPopover = typeof node.showPopover === 'function';
+        if (supportsPopover) {
+            node.setAttribute('popover', 'manual');
+            if (!node.matches(':popover-open'))
+                node.showPopover();
+        }
+        const place = () => {
+            if (node && anchor)
+                placePopover(node, anchor, { flipInline: true });
+        };
+        place();
+        const resizes = typeof ResizeObserver === 'function' ? new ResizeObserver(place) : null;
+        resizes?.observe(node);
+        resizes?.observe(anchor);
+        window.addEventListener('resize', place);
+        window.addEventListener('scroll', place, true);
+        return () => {
+            resizes?.disconnect();
+            window.removeEventListener('resize', place);
+            window.removeEventListener('scroll', place, true);
+            if (supportsPopover) {
+                if (node.matches(':popover-open'))
+                    node.hidePopover();
+                node.removeAttribute('popover');
+            }
+        };
+    }, [anchorRef, shown, tooltipRef]);
+}

package/dist/components/use-anchored-popover.d.ts

@@ -6,6 +6,8 @@ export type AnchoredPopoverPlacement = {
     /** Line up with the anchor's other edge when the preferred one overflows. */
     flipInline?: boolean;
 };
+/** Places a fixed (or top-layer) `node` beside `anchor`, inside the viewport. */
+export declare function placePopover(node: HTMLElement, anchor: HTMLElement, { align, flipInline }: AnchoredPopoverPlacement): void;
 /**
  * Shows a mounted element on the top layer as a manual popover, keeps it
  * beside `anchorRef` through scroll, window resize, and a change in its own