@scalewing/react 1.20.0 → 1.22.0

package/dist/components/Table.d.ts

@@ -1,13 +1,50 @@
-import { type HTMLAttributes, type TdHTMLAttributes, type ThHTMLAttributes } from 'react';
+import { type HTMLAttributes } from 'react';
+import { type TableLayout, type TableVerticalAlign } from './table/table-layout.js';
+export { TableCell, type TableCellProps, type TableColumnWidth, type TableSort, } from './table/TableCell.js';
+export type { TableLayout, TableVerticalAlign };
 export type TableDensity = 'comfortable' | 'compact';
 export type TableProps = HTMLAttributes<HTMLTableElement> & {
     density?: TableDensity;
     stickyHeader?: boolean;
+    /**
+     * `auto` (default) sizes each column by its content. `fixed` sizes the
+     * columns from the header row's `width`s alone (`table-layout: fixed`),
+     * so no column moves when the rows change, such as when a filter hides
+     * one. Columns without a width share what is left equally; when every
+     * column has one, spare width is shared in proportion to them. When the
+     * widths add up to more than the container, the table scrolls in its
+     * region and a column without a width gets no room at all, so on a table
+     * that can be narrower than its widths give every column one.
+     */
+    layout?: TableLayout;
+    /**
+     * Where a cell's content sits in a row taller than it: `middle` (default)
+     * or `top`, for rows where one cell runs to several lines and the others
+     * should start on its first line.
+     */
+    verticalAlign?: TableVerticalAlign;
 };
 /** A wide table scrolls inside its own `ScrollRegion`, named after the table. */
 export declare const Table: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableElement> & {
     density?: TableDensity;
     stickyHeader?: boolean;
+    /**
+     * `auto` (default) sizes each column by its content. `fixed` sizes the
+     * columns from the header row's `width`s alone (`table-layout: fixed`),
+     * so no column moves when the rows change, such as when a filter hides
+     * one. Columns without a width share what is left equally; when every
+     * column has one, spare width is shared in proportion to them. When the
+     * widths add up to more than the container, the table scrolls in its
+     * region and a column without a width gets no room at all, so on a table
+     * that can be narrower than its widths give every column one.
+     */
+    layout?: TableLayout;
+    /**
+     * Where a cell's content sits in a row taller than it: `middle` (default)
+     * or `top`, for rows where one cell runs to several lines and the others
+     * should start on its first line.
+     */
+    verticalAlign?: TableVerticalAlign;
 } & import("react").RefAttributes<HTMLTableElement>>;
 export type TableHeaderProps = HTMLAttributes<HTMLTableSectionElement>;
 export declare const TableHeader: import("react").ForwardRefExoticComponent<TableHeaderProps & import("react").RefAttributes<HTMLTableSectionElement>>;
@@ -19,15 +56,3 @@ export type TableRowProps = HTMLAttributes<HTMLTableRowElement> & {
 export declare const TableRow: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableRowElement> & {
     selected?: boolean;
 } & import("react").RefAttributes<HTMLTableRowElement>>;
-type TableCellAlign = 'start' | 'end';
-export type TableCellProps = ((TdHTMLAttributes<HTMLTableCellElement> & {
-    as?: 'td';
-}) | (ThHTMLAttributes<HTMLTableCellElement> & {
-    as: 'th';
-})) & {
-    align?: TableCellAlign;
-    numeric?: boolean;
-    truncate?: boolean;
-};
-export declare const TableCell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;
-export {};

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/date-field/use-calendar-popup.d.ts

@@ -3,6 +3,11 @@ export type CalendarPopupOptions = {
     value: string;
     disabled: boolean;
     onChange: (value: string) => void;
+    /**
+     * The calendar's today (`YYYY-MM-DD`); the device's local date when left
+     * out. An empty or malformed date throws a RangeError.
+     */
+    today?: string;
     /** Runs before a chosen date closes the calendar, such as a text reset. */
     beforeSelect?: () => void;
 };
@@ -33,4 +38,4 @@ export type CalendarPopup = {
  * DateField and CalendarButton. Disabling closes it for good; choosing a
  * date closes it, returns focus to the button, and reports a changed date.
  */
-export declare function useCalendarPopup({ value, disabled, onChange, beforeSelect, }: CalendarPopupOptions): CalendarPopup;
+export declare function useCalendarPopup({ value, disabled, onChange, today, beforeSelect, }: CalendarPopupOptions): CalendarPopup;

package/dist/components/date-field/use-calendar-popup.js

@@ -1,11 +1,13 @@
 import { useId, useRef, useState } from 'react';
-import { todayDateOnly } from '../../date-only.js';
+import { assertDateOnly, todayDateOnly } from '../../date-only.js';
 /**
  * The open state of a calendar dialog toggled by one button, shared by
  * DateField and CalendarButton. Disabling closes it for good; choosing a
  * date closes it, returns focus to the button, and reports a changed date.
  */
-export function useCalendarPopup({ value, disabled, onChange, beforeSelect, }) {
+export function useCalendarPopup({ value, disabled, onChange, today, beforeSelect, }) {
+    if (today !== undefined)
+        assertDateOnly('today', today);
     const buttonRef = useRef(null);
     const [open, setOpen] = useState(false);
     // Disabling closes the calendar for good, not just while disabled.
@@ -37,7 +39,7 @@ export function useCalendarPopup({ value, disabled, onChange, beforeSelect, }) {
             id,
             onClose: close,
             onSelect: select,
-            today: todayDateOnly(),
+            today: today ?? todayDateOnly(),
         },
     };
 }

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;