@scalewing/react 1.11.0 → 1.12.0

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,8 +1,15 @@
 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;
+}
 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) => {
+    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: [showsRowLabel(rows.length, row) ? (_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

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;

package/dist/components/use-anchored-popover.js

@@ -13,11 +13,12 @@ function layoutViewport() {
         height: root.clientHeight || window.innerHeight,
     };
 }
-function placePopover(node, anchor, { flipInline = false }) {
+function placePopover(node, anchor, { align = 'start', flipInline = false }) {
     const position = anchoredPosition(anchor.getBoundingClientRect(), { width: node.offsetWidth, height: node.offsetHeight }, layoutViewport(), {
         gap: spacingScale[1],
         inset: spacingScale[2],
         rtl: getComputedStyle(anchor).direction === 'rtl',
+        align,
         flipInline,
     });
     node.style.left = `${position.left}px`;
@@ -31,7 +32,7 @@ function placePopover(node, anchor, { flipInline = false }) {
  * outside it and outside `ignoreRef` (the button that toggles it).
  * Browsers without the popover API get the same fixed placement.
  */
-export function useAnchoredPopover(popoverRef, anchorRef, ignoreRef, onDismiss, { flipInline = false } = {}) {
+export function useAnchoredPopover(popoverRef, anchorRef, ignoreRef, onDismiss, { align = 'start', flipInline = false } = {}) {
     const dismissRef = useRef(onDismiss);
     useLayoutEffect(() => {
         dismissRef.current = onDismiss;
@@ -49,7 +50,7 @@ export function useAnchoredPopover(popoverRef, anchorRef, ignoreRef, onDismiss,
             if (!node.matches(':popover-open'))
                 node.showPopover();
         }
-        placePopover(node, anchor, { flipInline });
+        placePopover(node, anchor, { align, flipInline });
         function onPointerDown(event) {
             const target = event.target;
             if (!(target instanceof Node))
@@ -60,7 +61,7 @@ export function useAnchoredPopover(popoverRef, anchorRef, ignoreRef, onDismiss,
         }
         function onMove() {
             if (node && anchor)
-                placePopover(node, anchor, { flipInline });
+                placePopover(node, anchor, { align, flipInline });
         }
         // A popover or anchor that changes size while open (new commands, a
         // month with another row of weeks, a relabelled trigger) moves too.
@@ -79,5 +80,5 @@ export function useAnchoredPopover(popoverRef, anchorRef, ignoreRef, onDismiss,
             if (supportsPopover && node.matches(':popover-open'))
                 node.hidePopover();
         };
-    }, [anchorRef, flipInline, ignoreRef, popoverRef]);
+    }, [align, anchorRef, flipInline, ignoreRef, popoverRef]);
 }

package/dist/css/chevron.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The stroked chevron Accordion and Select share: two muted sides of a
+ * `space-2` square, turned by each surface to point where it needs.
+ */
+export declare const chevronStroke = "border-bottom: 2px solid var(--sw-color-muted);\n  border-right: 2px solid var(--sw-color-muted);\n  box-sizing: border-box;\n  height: var(--sw-space-2);\n  width: var(--sw-space-2);";

package/dist/css/chevron.js

@@ -0,0 +1,9 @@
+/**
+ * The stroked chevron Accordion and Select share: two muted sides of a
+ * `space-2` square, turned by each surface to point where it needs.
+ */
+export const chevronStroke = `border-bottom: 2px solid var(--sw-color-muted);
+  border-right: 2px solid var(--sw-color-muted);
+  box-sizing: border-box;
+  height: var(--sw-space-2);
+  width: var(--sw-space-2);`;

package/dist/css/css-accordion.js

@@ -1,17 +1,14 @@
+import { chevronStroke } from './chevron.js';
 function markerRules() {
     return `/* A token chevron replaces the user-agent triangle: it points to the inline end when closed and down when open. */
 .sw-accordion-summary::-webkit-details-marker { display: none; }
 
 .sw-accordion-marker {
-  border-bottom: 2px solid var(--sw-color-muted);
-  border-right: 2px solid var(--sw-color-muted);
-  box-sizing: border-box;
+  ${chevronStroke}
   flex: none;
-  height: var(--sw-space-2);
   margin-inline-end: var(--sw-space-1);
   transform: rotate(-45deg);
   transition: transform var(--sw-motion-default) var(--sw-motion-easing);
-  width: var(--sw-space-2);
 }
 
 .sw-accordion-marker:dir(rtl) { transform: rotate(135deg); }

package/dist/css/css-button.d.ts

@@ -3,6 +3,7 @@ export declare function buttonClassNames(options: {
     size: ButtonSize;
     variant: ButtonVariant;
 }): string[];
+export declare const pressedRingWidth = 4;
 export declare function cssButtonClasses(): string;
 export declare const buttonGroupJustifies: readonly ["start", "end", "between"];
 export declare function buttonClassCatalog(): string[];

package/dist/css/css-button.js

@@ -17,6 +17,24 @@ function variantRules() {
         `.sw-button-danger { background: var(--sw-color-danger); border-color: transparent; color: var(--sw-color-onDanger); }`,
     ].join('\n');
 }
+/*
+ * A toggle button's pressed state is an accent ring drawn outside the fill,
+ * past a 2 px gap in the page background: the ring meets the background on
+ * both sides, so it keeps the accent's contrast on the canvas (4.5:1 or more
+ * in every palette, above WCAG 1.4.11's 3:1) whatever the variant's fill.
+ * A focused pressed button moves its focus outline out past the ring, so the
+ * two stay apart. The unpressed button keeps its full label contrast: no
+ * opacity. Forced colors, which drop box shadows, fill the pressed button
+ * with the system highlight, as a checked FilterChips chip or Checkbox is.
+ */
+export const pressedRingWidth = 4;
+function pressedRules() {
+    return `.sw-button[aria-pressed='true'] { box-shadow: 0 0 0 2px var(--sw-color-background), 0 0 0 ${pressedRingWidth}px var(--sw-color-accent); }
+.sw-button[aria-pressed='true']:focus-visible { outline-offset: calc(var(--sw-focus-ring-offset) + ${pressedRingWidth}px); }
+@media (forced-colors: active) {
+  .sw-button[aria-pressed='true'] { background: Highlight; border-color: Highlight; color: HighlightText; }
+}`;
+}
 function sizeRules() {
     return buttonSizes
         .map((size) => {
@@ -54,11 +72,8 @@ export function cssButtonClasses() {
   opacity: var(--sw-disabled-opacity);
 }
 
-.sw-button[aria-pressed='false'] {
-  opacity: var(--sw-quiet-opacity);
-}
-
 ${variantRules()}
+${pressedRules()}
 ${sizeRules()}
 ${groupRules()}`;
 }

package/dist/css/css-checkbox.js

@@ -100,6 +100,7 @@ export function cssCheckboxClasses() {
 
 .sw-checkbox-description { color: var(--sw-color-muted); }
 .sw-checkbox-error { color: var(--sw-color-danger); }
+.sw-checkbox-error:empty { position: absolute; }
 
 @media (prefers-reduced-transparency: reduce) {
   .sw-checkbox-mark { background: var(--sw-color-surface); }

package/dist/css/css-data.js

@@ -1,4 +1,4 @@
-import { trackInset, typographyVariants } from '@scalewing/tokens';
+import { buttonVariants, trackInset, typographyVariants, } from '@scalewing/tokens';
 import { scrollRegionRules } from './css-scroll-region.js';
 import { zIndex } from './stacking.js';
 export const badgeTones = [
@@ -15,6 +15,21 @@ const body = typographyVariants.body;
 export function badgeClassNames(tone, size = 'md') {
     return ['sw-badge', `sw-badge-${tone}`, `sw-badge-${size}`];
 }
+/*
+ * A badge inside a filled button would otherwise draw its tone on the
+ * button's fill (a warning badge on the accent is about 1.1:1), so it takes
+ * the surface and sets its words in the text color, which is 4.5:1 on the
+ * surface in every palette; its tone stays on its border (3:1 or more), as
+ * some palettes' tones are under 4.5:1 as text on the surface. A ghost
+ * button has no fill.
+ */
+function badgeOnFilledButtonRules() {
+    const filled = buttonVariants
+        .filter((variant) => variant !== 'ghost')
+        .map((variant) => `.sw-button-${variant}`)
+        .join(', ');
+    return `:is(${filled}) .sw-badge { background: var(--sw-color-surface); color: var(--sw-color-text); }`;
+}
 export function cssDataClasses() {
     return `.sw-badge {
   align-items: center;
@@ -68,6 +83,8 @@ export function cssDataClasses() {
   color: var(--sw-color-warning);
 }
 
+${badgeOnFilledButtonRules()}
+
 .sw-segmented {
   background: var(--sw-glass-fill);
   border: 1px solid var(--sw-glass-border);

package/dist/css/css-date-field.js

@@ -123,7 +123,8 @@ ${input}:disabled,
 }
 
 .sw-date-field-description { color: var(--sw-color-muted); }
-.sw-date-field-error { color: var(--sw-color-danger); }`;
+.sw-date-field-error { color: var(--sw-color-danger); }
+.sw-date-field-error:empty { position: absolute; }`;
 }
 function calendarRules() {
     return `.sw-date-field-calendar {

package/dist/css/css-denomination-grid.js

@@ -2,6 +2,7 @@ import { typographyVariants } from '@scalewing/tokens';
 import { breakpointQuery } from './breakpoints.js';
 import { badgeTones } from './css-data.js';
 import { scrollRegionRules } from './css-scroll-region.js';
+import { visuallyHiddenDeclarations } from './css-utilities.js';
 import { zIndex } from './stacking.js';
 const caption = typographyVariants.caption;
 const data = typographyVariants.data;
@@ -209,8 +210,15 @@ ${scrollRegionRules('.sw-denomination-scroll')}
   text-align: center;
 }
 
+/*
+ * Below md the aria-hidden copy under each row label is what shows; the
+ * total cell stays in the table, visually hidden, so a screen reader still
+ * reads each total in its row and under its column header.
+ */
 @media ${breakpointQuery('below', 'md')} {
-  .sw-denomination-strip .sw-denomination-total { display: none; }
+  .sw-denomination-strip .sw-denomination-total,
+  .sw-denomination-strip .sw-denomination-total-head { padding: 0; position: relative; }
+  .sw-denomination-total-value { ${visuallyHiddenDeclarations} }
   .sw-denomination-total-inline { display: block; }
   .sw-denomination-label-body { flex-direction: column; align-items: flex-start; gap: var(--sw-space-1); }
   .sw-denomination-strip th,
@@ -249,6 +257,8 @@ export function denominationGridClassCatalog() {
         'sw-denomination-cell-negative',
         'sw-denomination-total',
         'sw-denomination-total-inline',
+        'sw-denomination-total-head',
+        'sw-denomination-total-value',
         'sw-denomination-tiles',
         'sw-denomination-tile-list',
         'sw-denomination-tile',

package/dist/css/css-field.js

@@ -66,6 +66,9 @@ export function cssFieldClasses() {
 .sw-field-description { color: var(--sw-color-muted); }
 .sw-field-error { color: var(--sw-color-danger); }
 
+/* An error region is always rendered as a live region; empty, it leaves the layout (and its gap) but stays in the accessibility tree. */
+.sw-field-error:empty { position: absolute; }
+
 [data-theme] .sw-field-invalid :is(input, select, textarea) {
   border-color: var(--sw-color-danger);
 }