@scalewing/react 1.11.0 → 1.13.0

package/dist/components/SegmentedControl.js

@@ -1,7 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from 'react';
 import { cx } from '../class-names.js';
-export const SegmentedControl = forwardRef(function SegmentedControl({ disabled = false, items, onChange, value, variant = 'compact', ...labelProps }, ref) {
+import { FieldErrorRegion } from './FieldErrorRegion.js';
+export const SegmentedControl = forwardRef(function SegmentedControl({ disabled = false, error, items, onChange, required = false, value, variant = 'compact', ...labelProps }, ref) {
+    const errorId = useId();
     function onKeyDown(event) {
         if (disabled || (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft')) {
             return;
@@ -17,12 +20,14 @@ export const SegmentedControl = forwardRef(function SegmentedControl({ disabled
             onChange?.(next.id);
         }
     }
-    return (_jsx("div", { ref: ref, "aria-disabled": disabled || undefined, className: cx('sw-segmented', variant === 'filled' && 'sw-segmented-filled', disabled && 'sw-segmented-disabled'), onKeyDown: onKeyDown, role: "radiogroup", ...labelProps, children: items.map((item) => {
-            const selected = item.id === value;
-            return (_jsx("button", { "aria-checked": selected, className: cx('sw-segmented-item', selected && 'sw-segmented-item-selected'), disabled: disabled, onClick: () => {
-                    if (!selected) {
-                        onChange?.(item.id);
-                    }
-                }, role: "radio", type: "button", children: item.label }, item.id));
-        }) }));
+    // The wrapper is always rendered, so an error that appears later swaps
+    // text into a live region that already exists and the group keeps focus.
+    return (_jsxs("div", { className: cx('sw-segmented-field', variant === 'filled' && 'sw-segmented-field-filled'), children: [_jsx("div", { ref: ref, "aria-describedby": error ? errorId : undefined, "aria-disabled": disabled || undefined, "aria-invalid": error ? true : undefined, "aria-required": required || undefined, className: cx('sw-segmented', variant === 'filled' && 'sw-segmented-filled', disabled && 'sw-segmented-disabled'), onKeyDown: onKeyDown, role: "radiogroup", ...labelProps, children: items.map((item) => {
+                    const selected = item.id === value;
+                    return (_jsx("button", { "aria-checked": selected, className: cx('sw-segmented-item', selected && 'sw-segmented-item-selected'), disabled: disabled, onClick: () => {
+                            if (!selected) {
+                                onChange?.(item.id);
+                            }
+                        }, role: "radio", type: "button", children: item.label }, item.id));
+                }) }), _jsx(FieldErrorRegion, { className: "sw-field-error", id: errorId, message: error })] }));
 });

package/dist/components/Select.d.ts

@@ -13,5 +13,14 @@ export type SelectProps = {
     options: readonly SelectOption[];
     size?: FieldSize;
     value: string;
+    /**
+     * Shown in the closed trigger, muted, while `value` matches no option
+     * (such as ''). It is not an option and never becomes the value.
+     */
+    placeholder?: string;
+    /** Marks the label as Field does and sets `aria-required`. */
+    required?: boolean;
+    /** A validation message under the control, wired as Field's error is. */
+    error?: string;
 };
-export declare function Select({ action, label, labelVisuallyHidden, onChange, options, size, value, }: SelectProps): import("react").JSX.Element;
+export declare function Select({ action, label, labelVisuallyHidden, onChange, options, size, value, placeholder, required, error, }: SelectProps): import("react").JSX.Element;

package/dist/components/Select.js

@@ -1,89 +1,28 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useRef, useState, } from 'react';
+import { useId, useRef } from 'react';
 import { cx } from '../class-names.js';
-import { selectIndexForKey, selectedSelectIndex, } from '../select-list.js';
+import { selectedSelectIndex } from '../select-list.js';
+import { FieldErrorRegion } from './FieldErrorRegion.js';
+import { FieldLabelText } from './FieldLabelText.js';
+import { SelectListbox } from './select/SelectListbox.js';
+import { SelectValue } from './select/SelectValue.js';
+import { useSelectList } from './select/use-select-list.js';
 import { Stack } from './Stack.js';
-import { Text } from './Text.js';
-function SelectListOption({ action = false, active, children, id, onCommit, onHighlight, selected, }) {
-    return (_jsx("div", { "aria-selected": selected, className: cx('sw-select-option', action && 'sw-select-action'), "data-active": active ? 'true' : undefined, id: id, onClick: onCommit, onPointerDown: (event) => {
-            event.preventDefault();
-        }, onPointerMove: onHighlight, role: "option", children: children }));
-}
-export function Select({ action, label, labelVisuallyHidden = false, onChange, options, size = 'md', value, }) {
+export function Select({ action, label, labelVisuallyHidden = false, onChange, options, size = 'md', value, placeholder, required = false, error, }) {
+    if (placeholder !== undefined && !placeholder.trim())
+        throw new RangeError('placeholder must not be empty');
     const labelId = useId();
     const triggerId = useId();
     const listId = useId();
     const optionIdPrefix = useId();
+    const errorId = useId();
     const rootRef = useRef(null);
-    const [open, setOpen] = useState(false);
-    const [highlight, setHighlight] = useState(0);
-    const selectedIndex = selectedSelectIndex(options, value);
-    const selected = options[selectedIndex];
-    const actionIndex = options.length;
-    const itemCount = action ? actionIndex + 1 : actionIndex;
-    useEffect(() => {
-        if (!open) {
-            return;
-        }
-        function onPointerDown(event) {
-            if (!rootRef.current?.contains(event.target)) {
-                setOpen(false);
-            }
-        }
-        document.addEventListener('pointerdown', onPointerDown);
-        return () => {
-            document.removeEventListener('pointerdown', onPointerDown);
-        };
-    }, [open]);
-    function openList() {
-        if (itemCount === 0) {
-            return;
-        }
-        setHighlight(selectedIndex);
-        setOpen(true);
-    }
-    function commit(index) {
-        if (action && index === actionIndex) {
-            action.onPress();
-            setOpen(false);
-            return;
-        }
-        const option = options[index];
-        if (option && option.value !== value) {
-            onChange(option.value);
-        }
-        setOpen(false);
-    }
-    function onTriggerKeyDown(event) {
-        if (event.key === 'Escape' && open) {
-            event.preventDefault();
-            event.stopPropagation();
-            setOpen(false);
-            return;
-        }
-        if (!open) {
-            if (event.key === 'ArrowDown' ||
-                event.key === 'ArrowUp' ||
-                event.key === 'Enter' ||
-                event.key === ' ') {
-                event.preventDefault();
-                openList();
-            }
-            return;
-        }
-        if (event.key === 'Enter' || event.key === ' ') {
-            event.preventDefault();
-            commit(highlight);
-            return;
-        }
-        const next = selectIndexForKey(event.key, highlight, itemCount);
-        if (next !== null) {
-            event.preventDefault();
-            setHighlight(next);
-        }
-    }
-    return (_jsx("div", { ref: rootRef, className: cx('sw-select', size === 'xs' && 'sw-select-xs'), children: _jsxs(Stack, { gap: labelVisuallyHidden ? 0 : 1, children: [_jsx(Text, { as: "label", className: labelVisuallyHidden ? 'sw-sr-only' : undefined, htmlFor: triggerId, id: labelId, variant: size === 'xs' ? 'caption' : 'label', children: label }), _jsxs("div", { className: "sw-select-control", children: [_jsx("button", { "aria-activedescendant": open ? `${optionIdPrefix}-${highlight}` : undefined, "aria-controls": open ? listId : undefined, "aria-expanded": open, "aria-haspopup": "listbox", "aria-labelledby": labelId, className: "sw-select-trigger", id: triggerId, onBlur: (event) => {
+    const selected = options[selectedSelectIndex(options, value)];
+    const showsPlaceholder = placeholder !== undefined &&
+        !options.some((option) => option.value === value);
+    const { commit, highlight, onTriggerKeyDown, open, openList, setHighlight, setOpen, } = useSelectList({ action, onChange, options, rootRef, value });
+    return (_jsx("div", { ref: rootRef, className: cx('sw-select', size === 'xs' && 'sw-select-xs', error && 'sw-select-invalid'), children: _jsxs(Stack, { gap: labelVisuallyHidden ? 0 : 1, children: [_jsx("label", { htmlFor: triggerId, id: labelId, children: _jsx(FieldLabelText, { label: label, required: required, size: size, visuallyHidden: labelVisuallyHidden }) }), _jsxs("div", { className: "sw-select-control", children: [_jsx("button", { "aria-activedescendant": open ? `${optionIdPrefix}-${highlight}` : undefined, "aria-controls": open ? listId : undefined, "aria-describedby": error ? errorId : undefined, "aria-expanded": open, "aria-haspopup": "listbox", "aria-invalid": error ? true : undefined, "aria-labelledby": labelId, "aria-required": required || undefined, className: "sw-select-trigger", id: triggerId, onBlur: (event) => {
                                 const next = event.relatedTarget;
                                 if (next instanceof Node && rootRef.current?.contains(next)) {
                                     return;
@@ -95,13 +34,5 @@ export function Select({ action, label, labelVisuallyHidden = false, onChange, o
                                     return;
                                 }
                                 openList();
-                            }, onKeyDown: onTriggerKeyDown, role: "combobox", type: "button", children: selected?.label ?? '' }), open ? (_jsxs("div", { "aria-labelledby": labelId, className: "sw-select-list", id: listId, role: "listbox", children: [options.map((option, index) => (_jsx(SelectListOption, { active: index === highlight, id: `${optionIdPrefix}-${index}`, onCommit: () => {
-                                        commit(index);
-                                    }, onHighlight: () => {
-                                        setHighlight(index);
-                                    }, selected: option.value === value, children: option.label }, option.value))), action ? (_jsx(SelectListOption, { action: true, active: highlight === actionIndex, id: `${optionIdPrefix}-${actionIndex}`, onCommit: () => {
-                                        commit(actionIndex);
-                                    }, onHighlight: () => {
-                                        setHighlight(actionIndex);
-                                    }, selected: false, children: action.label })) : null] })) : null] })] }) }));
+                            }, onKeyDown: onTriggerKeyDown, role: "combobox", type: "button", children: _jsx(SelectValue, { options: options, placeholder: placeholder, text: showsPlaceholder ? placeholder : (selected?.label ?? ''), textIsPlaceholder: showsPlaceholder }) }), open ? (_jsx(SelectListbox, { actionLabel: action?.label, highlight: highlight, id: listId, labelId: labelId, onCommit: commit, onHighlight: setHighlight, optionIdPrefix: optionIdPrefix, options: options, value: value })) : null] }), _jsx(FieldErrorRegion, { className: "sw-field-error", id: errorId, message: error })] }) }));
 }

package/dist/components/Toast.d.ts

@@ -1,10 +1,24 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
+import { toastTones, type ToastTone } from '../css/css-toast.js';
+export { toastTones };
+export type { ToastTone };
 export type ToastProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'popover'> & {
     open: boolean;
     onOpenChange: (open: boolean) => void;
+    /**
+     * How long the toast stays open, in ms. Defaults to 800 for a neutral or
+     * success toast and 6000 for a warning or danger one, which must be read.
+     */
     timeoutMs?: number;
     anchor?: Element | null;
     target?: Element | null;
+    /**
+     * `success`, `warning` and `danger` tint the border and `icon`; `danger`
+     * is announced as an alert, the others as a status. Default `neutral`.
+     */
+    tone?: ToastTone;
+    /** A consumer glyph before the message, hidden from assistive technology. */
+    icon?: ReactNode;
     children: ReactNode;
 };
-export declare function Toast({ anchor, children, className, onOpenChange, open, target, timeoutMs, ...rest }: ToastProps): import("react").JSX.Element;
+export declare function Toast({ anchor, children, className, onOpenChange, open, target, timeoutMs, tone, icon, ...rest }: ToastProps): import("react").JSX.Element;

package/dist/components/Toast.js

@@ -1,15 +1,25 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLayoutEffect, useEffect, useRef, } from 'react';
 import { cx } from '../class-names.js';
+import { toastTones } from '../css/css-toast.js';
 import { spacingClassNames } from '../spacing-classes.js';
 import { applyTravelVars, clearTravelVars, travelTranslate, } from '../toast-travel.js';
+export { toastTones };
 const DEFAULT_TIMEOUT_MS = 800;
+/** A warning or an error must be read, not glimpsed. */
+const URGENT_TIMEOUT_MS = 6000;
+function defaultTimeout(tone) {
+    return tone === 'warning' || tone === 'danger'
+        ? URGENT_TIMEOUT_MS
+        : DEFAULT_TIMEOUT_MS;
+}
 function travels(anchor, target) {
     return Boolean(anchor && target);
 }
-export function Toast({ anchor = null, children, className, onOpenChange, open, target = null, timeoutMs = DEFAULT_TIMEOUT_MS, ...rest }) {
+export function Toast({ anchor = null, children, className, onOpenChange, open, target = null, timeoutMs, tone = 'neutral', icon, ...rest }) {
     const nodeRef = useRef(null);
+    const dismissAfter = timeoutMs ?? defaultTimeout(tone);
     const moving = travels(anchor, target);
     useLayoutEffect(() => {
         const node = nodeRef.current;
@@ -46,16 +56,16 @@ export function Toast({ anchor = null, children, className, onOpenChange, open,
         }
         const timer = window.setTimeout(() => {
             onOpenChange(false);
-        }, timeoutMs);
+        }, dismissAfter);
         return () => {
             window.clearTimeout(timer);
         };
-    }, [moving, open, onOpenChange, timeoutMs]);
+    }, [dismissAfter, moving, open, onOpenChange]);
     function onAnimationEnd(event) {
         if (event.target !== event.currentTarget || !moving) {
             return;
         }
         onOpenChange(false);
     }
-    return (_jsx("div", { ...rest, ref: nodeRef, className: cx('sw-toast', moving && 'sw-toast-travel', ...spacingClassNames({ padding: 3 }), className), onAnimationEnd: onAnimationEnd, popover: "manual", role: "status", children: children }));
+    return (_jsx("div", { ...rest, ref: nodeRef, className: cx('sw-toast', tone !== 'neutral' && `sw-toast-${tone}`, moving && 'sw-toast-travel', ...spacingClassNames({ padding: 3 }), className), onAnimationEnd: onAnimationEnd, popover: "manual", role: tone === 'danger' ? 'alert' : 'status', children: icon ? (_jsxs("div", { className: "sw-toast-row", children: [_jsx("span", { "aria-hidden": "true", className: "sw-toast-icon", children: icon }), _jsx("div", { className: "sw-toast-body", children: children })] })) : (children) }));
 }

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

@@ -1,7 +1,9 @@
 import { type KeyboardEvent, type RefObject } from 'react';
+import { type InlineAlign } from '../../anchored-position.js';
 import type { ActionMenuItem } from '../ActionMenu.js';
 type ActionMenuListProps = {
     id: string;
+    align: InlineAlign;
     label: string;
     items: readonly ActionMenuItem[];
     focusIndex: number;
@@ -13,9 +15,9 @@ type ActionMenuListProps = {
 };
 /**
  * The open menu: on the popover layer beside the trigger (a gap below or
- * above it, inset from the viewport edges, and lined up with the trigger's
- * end when it would not fit from its start), with the focused command
- * holding DOM focus.
+ * above it, inset from the viewport edges, lined up with the trigger's start
+ * 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, label, items, focusIndex, triggerRef, onDismiss, onFocusIndex, onKeyDown, onSelect, }: ActionMenuListProps): import("react").JSX.Element;
+export declare function ActionMenuList({ id, align, label, items, focusIndex, triggerRef, onDismiss, onFocusIndex, onKeyDown, onSelect, }: ActionMenuListProps): import("react").JSX.Element;
 export {};

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

@@ -5,13 +5,14 @@ import { cx } from '../../class-names.js';
 import { useAnchoredPopover } from '../use-anchored-popover.js';
 /**
  * The open menu: on the popover layer beside the trigger (a gap below or
- * above it, inset from the viewport edges, and lined up with the trigger's
- * end when it would not fit from its start), with the focused command
- * holding DOM focus.
+ * above it, inset from the viewport edges, lined up with the trigger's start
+ * 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, label, items, focusIndex, triggerRef, onDismiss, onFocusIndex, onKeyDown, onSelect, }) {
+export function ActionMenuList({ id, align, label, items, focusIndex, triggerRef, onDismiss, onFocusIndex, onKeyDown, onSelect, }) {
     const menuRef = useRef(null);
     useAnchoredPopover(menuRef, triggerRef, triggerRef, onDismiss, {
+        align,
         flipInline: true,
     });
     useLayoutEffect(() => {

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'>>;
-export declare function DenominationStrip({ label, columns, rows, zeroLabel, }: StripProps): import("react").JSX.Element;
+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;
 export {};

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

@@ -2,10 +2,20 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../../class-names.js';
 import { denominationCellView } from '../../denomination-cells.js';
 import { ScrollRegion } from '../ScrollRegion.js';
-export function DenominationStrip({ label, columns, rows, zeroLabel, }) {
+/**
+ * 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.
+ */
+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 }) }));
+}
+export function DenominationStrip({ label, columns, rows, zeroLabel, totalLabel, }) {
     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("td", { className: "sw-denomination-corner" }) : 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: [row.icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-denomination-icon", children: row.icon })) : null, _jsx("span", { className: "sw-denomination-label-text", children: row.label }), row.total !== undefined ? (_jsx("span", { "aria-hidden": "true", className: "sw-denomination-total-inline", children: row.total })) : null] }) }), columns.map((column, index) => {
+    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: [row.icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-denomination-icon", children: row.icon })) : null, _jsx("span", { className: "sw-denomination-label-text", children: row.label }), 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: `sw-denomination-cell sw-denomination-cell-${view.state}`, children: view.text }, column.key));
-                            }), hasTotals ? (_jsx("td", { className: "sw-denomination-total", children: row.total ?? '' })) : null] }, row.id))) })] }) }));
+                            }), 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/DenominationTiles.js

@@ -1,13 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../../class-names.js';
 import { denominationCellView } from '../../denomination-cells.js';
+/**
+ * A lone row is named by the grid's own label, so its label line shows only
+ * when it adds something: an icon or a total. Several rows always show it.
+ */
+function showsRowLabel(rowCount, row) {
+    return rowCount > 1 || Boolean(row.icon) || row.total !== undefined;
+}
+/**
+ * A row is a region named by its label, except a lone row without its label
+ * line whose label repeats the grid's: that region would only say the
+ * group's name a second time (Teisoro SDAY-31). A lone row with its own
+ * words keeps them, since nothing else on screen says them.
+ */
+function namesRow(rowCount, row, gridLabel) {
+    return showsRowLabel(rowCount, row) || row.label !== gridLabel;
+}
 export function DenominationTiles({ label, columns, rows, subtotal, zeroLabel, }) {
-    return (_jsx("div", { "aria-label": label, className: "sw-denomination-grid sw-denomination-tiles", role: "group", children: rows.map((row) => (_jsxs("section", { "aria-label": row.label, className: cx('sw-denomination-row', `sw-denomination-row-${row.tone ?? 'neutral'}`), children: [rows.length > 1 || row.icon ? (_jsxs("span", { className: "sw-denomination-label", children: [row.icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-denomination-icon", children: row.icon })) : null, _jsx("span", { className: "sw-denomination-label-text", children: row.label }), row.total !== undefined ? (_jsx("span", { className: "sw-denomination-total", children: row.total })) : null] })) : null, _jsx("ul", { className: "sw-denomination-tile-list", children: columns.map((column, index) => {
-                        const cell = row.cells[index] ?? null;
-                        const view = denominationCellView(cell, row.signed ?? false, zeroLabel);
-                        const amount = subtotal && cell !== null && cell !== 0
-                            ? subtotal(cell, column)
-                            : null;
-                        return (_jsxs("li", { className: "sw-denomination-tile", children: [_jsx("span", { className: "sw-denomination-head", children: column.label }), _jsx("span", { className: `sw-denomination-cell sw-denomination-cell-${view.state}`, children: view.text }), subtotal ? (_jsx("span", { className: "sw-denomination-subtotal", children: amount ?? zeroLabel })) : null] }, column.key));
-                    }) })] }, row.id))) }));
+    return (_jsx("div", { "aria-label": label, className: "sw-denomination-grid sw-denomination-tiles", role: "group", children: rows.map((row) => {
+            const labelled = showsRowLabel(rows.length, row);
+            return (_jsxs("section", { "aria-label": namesRow(rows.length, row, label) ? row.label : undefined, className: cx('sw-denomination-row', `sw-denomination-row-${row.tone ?? 'neutral'}`), children: [labelled ? (_jsxs("span", { className: "sw-denomination-label", children: [row.icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-denomination-icon", children: row.icon })) : null, _jsx("span", { className: "sw-denomination-label-text", children: row.label }), row.total !== undefined ? (_jsx("span", { className: "sw-denomination-total", children: row.total })) : null] })) : null, _jsx("ul", { className: "sw-denomination-tile-list", children: columns.map((column, index) => {
+                            const cell = row.cells[index] ?? null;
+                            const view = denominationCellView(cell, row.signed ?? false, zeroLabel);
+                            const amount = subtotal && cell !== null && cell !== 0
+                                ? subtotal(cell, column)
+                                : null;
+                            return (_jsxs("li", { className: "sw-denomination-tile", children: [_jsx("span", { className: "sw-denomination-head", children: column.label }), _jsx("span", { className: `sw-denomination-cell sw-denomination-cell-${view.state}`, children: view.text }), subtotal ? (_jsx("span", { className: "sw-denomination-subtotal", children: amount ?? zeroLabel })) : null] }, column.key));
+                        }) })] }, row.id));
+        }) }));
 }

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

@@ -22,4 +22,9 @@ export type DenominationGridProps = {
     layout?: DenominationGridLayout;
     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.
+     */
+    totalLabel?: string;
 };

package/dist/components/select/SelectListbox.d.ts

@@ -0,0 +1,20 @@
+import { type SelectOption } from '../../select-list.js';
+type SelectListboxProps = {
+    /** The trailing command's label, after the options; never the value. */
+    actionLabel?: string;
+    highlight: number;
+    id: string;
+    labelId: string;
+    optionIdPrefix: string;
+    options: readonly SelectOption[];
+    value: string;
+    onCommit: (index: number) => void;
+    onHighlight: (index: number) => void;
+};
+/**
+ * The open list: one option per value, then the optional action as the last
+ * item (index `options.length`). The trigger keeps DOM focus and points at
+ * the highlighted item with `aria-activedescendant`.
+ */
+export declare function SelectListbox({ actionLabel, highlight, id, labelId, optionIdPrefix, options, value, onCommit, onHighlight, }: SelectListboxProps): import("react").JSX.Element;
+export {};

package/dist/components/select/SelectListbox.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../../class-names.js';
+function SelectListOption({ action = false, active, children, id, onCommit, onHighlight, selected, }) {
+    return (_jsx("div", { "aria-selected": selected, className: cx('sw-select-option', action && 'sw-select-action'), "data-active": active ? 'true' : undefined, id: id, onClick: onCommit, onPointerDown: (event) => {
+            event.preventDefault();
+        }, onPointerMove: onHighlight, role: "option", children: children }));
+}
+/**
+ * The open list: one option per value, then the optional action as the last
+ * item (index `options.length`). The trigger keeps DOM focus and points at
+ * the highlighted item with `aria-activedescendant`.
+ */
+export function SelectListbox({ actionLabel, highlight, id, labelId, optionIdPrefix, options, value, onCommit, onHighlight, }) {
+    const actionIndex = options.length;
+    return (_jsxs("div", { "aria-labelledby": labelId, className: "sw-select-list", id: id, role: "listbox", children: [options.map((option, index) => (_jsx(SelectListOption, { active: index === highlight, id: `${optionIdPrefix}-${index}`, onCommit: () => onCommit(index), onHighlight: () => onHighlight(index), selected: option.value === value, children: option.label }, option.value))), actionLabel === undefined ? null : (_jsx(SelectListOption, { action: true, active: highlight === actionIndex, id: `${optionIdPrefix}-${actionIndex}`, onCommit: () => onCommit(actionIndex), onHighlight: () => onHighlight(actionIndex), selected: false, children: actionLabel }))] }));
+}

package/dist/components/select/SelectValue.d.ts

@@ -0,0 +1,15 @@
+import { type SelectOption } from '../../select-list.js';
+/**
+ * The closed trigger's text: the current label, stacked in one grid cell
+ * over a hidden copy of every option's label, so the trigger is as wide as
+ * its longest option, as a native select is, and does not change width when
+ * the value changes, including to or from the placeholder. The copies are
+ * drawn from `data-label` by generated CSS, so they are neither text content
+ * nor in the accessibility tree.
+ */
+export declare function SelectValue({ options, placeholder, text, textIsPlaceholder, }: {
+    options: readonly SelectOption[];
+    placeholder?: string;
+    text: string;
+    textIsPlaceholder: boolean;
+}): import("react").JSX.Element;

package/dist/components/select/SelectValue.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../../class-names.js';
+/**
+ * The closed trigger's text: the current label, stacked in one grid cell
+ * over a hidden copy of every option's label, so the trigger is as wide as
+ * its longest option, as a native select is, and does not change width when
+ * the value changes, including to or from the placeholder. The copies are
+ * drawn from `data-label` by generated CSS, so they are neither text content
+ * nor in the accessibility tree.
+ */
+export function SelectValue({ options, placeholder, text, textIsPlaceholder, }) {
+    const labels = options.map((option) => option.label);
+    if (placeholder !== undefined)
+        labels.push(placeholder);
+    return (_jsxs("span", { className: "sw-select-value", children: [_jsx("span", { className: cx('sw-select-value-text', textIsPlaceholder && 'sw-select-placeholder'), children: text }), labels.map((sizerLabel, index) => (_jsx("span", { "aria-hidden": "true", className: "sw-select-value-sizer", "data-label": sizerLabel }, index)))] }));
+}

package/dist/components/select/use-select-list.d.ts

@@ -0,0 +1,26 @@
+import { type KeyboardEvent, type RefObject } from 'react';
+import { type SelectOption } from '../../select-list.js';
+import type { SelectAction } from '../Select.js';
+type SelectListOptions = {
+    action?: SelectAction;
+    onChange: (value: string) => void;
+    options: readonly SelectOption[];
+    rootRef: RefObject<HTMLElement | null>;
+    value: string;
+};
+/**
+ * The open state, highlighted item and keyboard model of a Select: the
+ * trigger keeps focus, arrows move the highlight over the options and the
+ * trailing action (index `options.length`), Enter or Space commits, Escape
+ * and a press outside the root close.
+ */
+export declare function useSelectList({ action, onChange, options, rootRef, value, }: SelectListOptions): {
+    commit: (index: number) => void;
+    highlight: number;
+    onTriggerKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void;
+    open: boolean;
+    openList: () => void;
+    setHighlight: import("react").Dispatch<import("react").SetStateAction<number>>;
+    setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};
+export {};

package/dist/components/select/use-select-list.js

@@ -0,0 +1,85 @@
+import { useEffect, useState } from 'react';
+import { selectIndexForKey, selectedSelectIndex, } from '../../select-list.js';
+/**
+ * The open state, highlighted item and keyboard model of a Select: the
+ * trigger keeps focus, arrows move the highlight over the options and the
+ * trailing action (index `options.length`), Enter or Space commits, Escape
+ * and a press outside the root close.
+ */
+export function useSelectList({ action, onChange, options, rootRef, value, }) {
+    const [open, setOpen] = useState(false);
+    const [highlight, setHighlight] = useState(0);
+    const selectedIndex = selectedSelectIndex(options, value);
+    const actionIndex = options.length;
+    const itemCount = action ? actionIndex + 1 : actionIndex;
+    useEffect(() => {
+        if (!open) {
+            return;
+        }
+        function onPointerDown(event) {
+            if (!rootRef.current?.contains(event.target)) {
+                setOpen(false);
+            }
+        }
+        document.addEventListener('pointerdown', onPointerDown);
+        return () => {
+            document.removeEventListener('pointerdown', onPointerDown);
+        };
+    }, [open, rootRef]);
+    function openList() {
+        if (itemCount === 0) {
+            return;
+        }
+        setHighlight(selectedIndex);
+        setOpen(true);
+    }
+    function commit(index) {
+        if (action && index === actionIndex) {
+            action.onPress();
+            setOpen(false);
+            return;
+        }
+        const option = options[index];
+        if (option && option.value !== value) {
+            onChange(option.value);
+        }
+        setOpen(false);
+    }
+    function onTriggerKeyDown(event) {
+        if (event.key === 'Escape' && open) {
+            event.preventDefault();
+            event.stopPropagation();
+            setOpen(false);
+            return;
+        }
+        if (!open) {
+            if (event.key === 'ArrowDown' ||
+                event.key === 'ArrowUp' ||
+                event.key === 'Enter' ||
+                event.key === ' ') {
+                event.preventDefault();
+                openList();
+            }
+            return;
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            commit(highlight);
+            return;
+        }
+        const next = selectIndexForKey(event.key, highlight, itemCount);
+        if (next !== null) {
+            event.preventDefault();
+            setHighlight(next);
+        }
+    }
+    return {
+        commit,
+        highlight,
+        onTriggerKeyDown,
+        open,
+        openList,
+        setHighlight,
+        setOpen,
+    };
+}

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

@@ -1,6 +1,9 @@
 import { type RefObject } from 'react';
+import { type InlineAlign } from '../anchored-position.js';
 export type AnchoredPopoverPlacement = {
-    /** Line up with the anchor's end when the start-aligned popover overflows. */
+    /** The anchor edge the popover prefers to line up with (default start). */
+    align?: InlineAlign;
+    /** Line up with the anchor's other edge when the preferred one overflows. */
     flipInline?: boolean;
 };
 /**
@@ -11,4 +14,4 @@ export type AnchoredPopoverPlacement = {
  * outside it and outside `ignoreRef` (the button that toggles it).
  * Browsers without the popover API get the same fixed placement.
  */
-export declare function useAnchoredPopover(popoverRef: RefObject<HTMLElement | null>, anchorRef: RefObject<HTMLElement | null>, ignoreRef: RefObject<HTMLElement | null>, onDismiss: () => void, { flipInline }?: AnchoredPopoverPlacement): void;
+export declare function useAnchoredPopover(popoverRef: RefObject<HTMLElement | null>, anchorRef: RefObject<HTMLElement | null>, ignoreRef: RefObject<HTMLElement | null>, onDismiss: () => void, { align, flipInline }?: AnchoredPopoverPlacement): void;