@scalewing/react 1.30.0 → 1.32.0

package/dist/components/Stepper.js

@@ -5,6 +5,7 @@ import { cx } from '../class-names.js';
 import { assertStepperBounds, readStepperEntry, stepperMoves, stepperText, } from '../stepper-count.js';
 import { FieldErrorRegion } from './FieldErrorRegion.js';
 import { FieldLabelText } from './FieldLabelText.js';
+export const stepperLimitAppearances = ['faded', 'plain'];
 /** Keeps focus where it was (the count, or nowhere) when a button is pressed. */
 function keepFocus(event) {
     event.preventDefault();
@@ -14,9 +15,11 @@ function keepFocus(event) {
  * tab stop (the count, a spin button that ArrowUp and ArrowDown step), with
  * the buttons as pointer targets beside it. − stops at `min`, + at `max`.
  */
-export const Stepper = forwardRef(function Stepper({ label, labelVisuallyHidden = false, value, onChange, min = 0, max = Number.POSITIVE_INFINITY, step = 1, decrementLabel, incrementLabel, error, changed = false, disabled = false, readOnly = false, valueText, placeholder, name, width = 'fixed', }, ref) {
+export const Stepper = forwardRef(function Stepper({ label, labelVisuallyHidden = false, value, onChange, min = 0, max = Number.POSITIVE_INFINITY, step = 1, decrementLabel, incrementLabel, error, changed = false, disabled = false, readOnly = false, valueText, placeholder, name, width = 'fixed', limitAppearance = 'faded', }, ref) {
     const bounds = { min, max, step };
     assertStepperBounds(bounds);
+    if (!stepperLimitAppearances.includes(limitAppearance))
+        throw new RangeError(`Unknown Stepper limitAppearance: ${String(limitAppearance)}`);
     if (value !== null && !Number.isSafeInteger(value))
         throw new RangeError('Stepper value must be a whole number or null');
     const inputId = useId();
@@ -70,7 +73,10 @@ export const Stepper = forwardRef(function Stepper({ label, labelVisuallyHidden
         move(target);
     }
     const invalid = Boolean(error);
-    return (_jsxs("div", { className: cx('sw-stepper', width === 'full' && 'sw-stepper-full', invalid && 'sw-stepper-invalid', changed && !invalid && 'sw-stepper-changed', readOnly && 'sw-stepper-readonly'), children: [_jsx("label", { className: labelVisuallyHidden ? 'sw-sr-only' : undefined, htmlFor: inputId, id: labelId, children: _jsx(FieldLabelText, { label: label }) }), _jsxs("div", { "aria-labelledby": labelId, className: "sw-stepper-track", role: "group", children: [_jsx("button", { "aria-controls": inputId, "aria-label": decrementLabel, className: "sw-stepper-button", disabled: moves.down === null, onClick: () => move(moves.down), onMouseDown: keepFocus, tabIndex: -1, type: "button", children: _jsx("span", { "aria-hidden": "true", children: '−' }) }), _jsx("input", { ref: ref, "aria-describedby": invalid ? errorId : undefined, "aria-invalid": invalid || undefined, "aria-valuemax": Number.isFinite(max) ? max : undefined, "aria-valuemin": min, "aria-valuenow": value ?? undefined, "aria-valuetext": valueText, autoComplete: "off", className: "sw-stepper-input", disabled: disabled, id: inputId, 
+    return (_jsxs("div", { className: cx('sw-stepper', width === 'full' && 'sw-stepper-full', invalid && 'sw-stepper-invalid', changed && !invalid && 'sw-stepper-changed', readOnly && 'sw-stepper-readonly', limitAppearance === 'plain' &&
+            !disabled &&
+            !readOnly &&
+            'sw-stepper-limit-plain'), children: [_jsx("label", { className: labelVisuallyHidden ? 'sw-sr-only' : undefined, htmlFor: inputId, id: labelId, children: _jsx(FieldLabelText, { label: label }) }), _jsxs("div", { "aria-labelledby": labelId, className: "sw-stepper-track", role: "group", children: [_jsx("button", { "aria-controls": inputId, "aria-label": decrementLabel, className: "sw-stepper-button", disabled: moves.down === null, onClick: () => move(moves.down), onMouseDown: keepFocus, tabIndex: -1, type: "button", children: _jsx("span", { "aria-hidden": "true", children: '−' }) }), _jsx("input", { ref: ref, "aria-describedby": invalid ? errorId : undefined, "aria-invalid": invalid || undefined, "aria-valuemax": Number.isFinite(max) ? max : undefined, "aria-valuemin": min, "aria-valuenow": value ?? undefined, "aria-valuetext": valueText, autoComplete: "off", className: "sw-stepper-input", disabled: disabled, id: inputId, 
                         // iOS's numeric pad has no minus key, so a range below zero takes
                         // the text keyboard.
                         inputMode: allowsNegative ? 'text' : 'numeric', name: name, onBlur: () => setDraft(null), onChange: onType, onKeyDown: onKeyDown, placeholder: placeholder, readOnly: readOnly, role: "spinbutton", type: "text", value: text }), _jsx("button", { "aria-controls": inputId, "aria-label": incrementLabel, className: "sw-stepper-button", disabled: moves.up === null, onClick: () => move(moves.up), onMouseDown: keepFocus, tabIndex: -1, type: "button", children: _jsx("span", { "aria-hidden": "true", children: "+" }) })] }), _jsx(FieldErrorRegion, { className: "sw-field-error", id: errorId, message: error })] }));

package/dist/components/combobox/ComboboxPopup.d.ts

@@ -0,0 +1,25 @@
+import { type RefObject } from 'react';
+import { type ComboboxEntry } from './entries.js';
+import { type ComboboxGroup } from './types.js';
+type ComboboxPopupProps = {
+    listId: string;
+    listLabel: string;
+    groups: readonly ComboboxGroup[];
+    entries: readonly ComboboxEntry[];
+    activeId: string | undefined;
+    emptyText: string;
+    note?: string;
+    noteId: string;
+    inputRef: RefObject<HTMLInputElement | null>;
+    onActivate: (entry: ComboboxEntry) => void;
+    onChoose: (entry: ComboboxEntry) => void;
+    onDismiss: () => void;
+};
+/**
+ * The open list beside the input, on the popover layer and at least as
+ * wide as the input: a heading per group, each option's label, badge and
+ * description, then the action; the empty text when nothing matches, and
+ * the note under it all.
+ */
+export declare function ComboboxPopup({ activeId, emptyText, entries, groups, inputRef, listId, listLabel, note, noteId, onActivate, onChoose, onDismiss, }: ComboboxPopupProps): import("react").JSX.Element;
+export {};

package/dist/components/combobox/ComboboxPopup.js

@@ -0,0 +1,68 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useLayoutEffect, useRef, } from 'react';
+import { cx } from '../../class-names.js';
+import { Badge } from '../Badge.js';
+import { useAnchoredPopover } from '../use-anchored-popover.js';
+function keepInputFocus(event) {
+    // A press in the list never takes focus from the input.
+    event.preventDefault();
+}
+function EntryBadge({ badge }) {
+    if (!badge)
+        return null;
+    return (_jsx(Badge, { size: "sm", tone: badge.tone ?? 'neutral', children: badge.label }));
+}
+/**
+ * The open list beside the input, on the popover layer and at least as
+ * wide as the input: a heading per group, each option's label, badge and
+ * description, then the action; the empty text when nothing matches, and
+ * the note under it all.
+ */
+export function ComboboxPopup({ activeId, emptyText, entries, groups, inputRef, listId, listLabel, note, noteId, onActivate, onChoose, onDismiss, }) {
+    const popupRef = useRef(null);
+    useAnchoredPopover(popupRef, inputRef, inputRef, onDismiss, {
+        align: 'start',
+        flipInline: true,
+    });
+    // At least as wide as the input, and kept so when the input resizes.
+    useLayoutEffect(() => {
+        const popup = popupRef.current;
+        const input = inputRef.current;
+        if (!popup || !input)
+            return;
+        const fit = () => {
+            popup.style.minWidth = `${input.offsetWidth}px`;
+        };
+        fit();
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const observer = new ResizeObserver(fit);
+        observer.observe(input);
+        return () => observer.disconnect();
+    }, [inputRef]);
+    useLayoutEffect(() => {
+        if (activeId)
+            document.getElementById(activeId)?.scrollIntoView?.({ block: 'nearest' });
+    }, [activeId]);
+    const options = entries.filter((entry) => entry.kind === 'option');
+    const action = entries.find((entry) => entry.kind === 'action');
+    function renderEntry(entry) {
+        const disabled = entry.kind === 'option' && entry.option.disabled;
+        return (_jsx("div", { "aria-disabled": disabled || undefined, "aria-selected": entry.id === activeId, className: cx('sw-combobox-option', entry.kind === 'action' && 'sw-combobox-action'), id: entry.id, onClick: () => onChoose(entry), onMouseDown: keepInputFocus, 
+            // The pointer moves the active option, as the arrow keys do.
+            onMouseMove: () => {
+                if (entry.id !== activeId)
+                    onActivate(entry);
+            }, role: "option", children: entry.kind === 'option' ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "sw-combobox-label", children: entry.option.label }), _jsx(EntryBadge, { badge: entry.option.badge }), entry.option.description ? (_jsx("span", { className: "sw-combobox-description", children: entry.option.description })) : null] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "sw-combobox-label", children: entry.action.label }), _jsx(EntryBadge, { badge: entry.action.badge })] })) }, entry.id));
+    }
+    return (_jsxs("div", { className: "sw-combobox-popup", onMouseDown: keepInputFocus, ref: popupRef, children: [entries.length > 0 ? (_jsxs("div", { "aria-label": listLabel, className: "sw-combobox-list", id: listId, role: "listbox", children: [groups.map((group, groupIndex) => {
+                        const groupEntries = options.filter((entry) => entry.kind === 'option' && entry.groupIndex === groupIndex);
+                        if (groupEntries.length === 0)
+                            return null;
+                        if (!group.label)
+                            return (_jsx(Fragment, { children: groupEntries.map(renderEntry) }, `${listId}-group-${groupIndex}`));
+                        const headingId = `${listId}-group-${groupIndex}`;
+                        return (_jsxs("div", { "aria-labelledby": headingId, role: "group", children: [_jsx("div", { className: "sw-combobox-heading", id: headingId, role: "presentation", children: group.label }), groupEntries.map(renderEntry)] }, headingId));
+                    }), action ? renderEntry(action) : null] })) : null, options.length === 0 ? (_jsx("div", { "aria-hidden": "true", className: "sw-combobox-empty", children: emptyText })) : null, note ? (_jsx("div", { className: "sw-combobox-note", id: noteId, children: note })) : null] }));
+}

package/dist/components/combobox/entries.d.ts

@@ -0,0 +1,18 @@
+import { type ComboboxAction, type ComboboxGroup, type ComboboxOption } from './types.js';
+/** One row the arrow keys move over: an option in a group, or the action. */
+export type ComboboxEntry = {
+    kind: 'option';
+    key: string;
+    id: string;
+    index: number;
+    option: ComboboxOption;
+    groupIndex: number;
+} | {
+    kind: 'action';
+    key: string;
+    id: string;
+    index: number;
+    action: ComboboxAction;
+};
+/** The list's rows in order, each with a stable key and a DOM id under `listId`. */
+export declare function comboboxEntries(listId: string, groups: readonly ComboboxGroup[], action: ComboboxAction | undefined): ComboboxEntry[];

package/dist/components/combobox/entries.js

@@ -0,0 +1,34 @@
+/*
+ * Each row's key and DOM id come from its value, not its place, so an
+ * option keeps its id (and stays the active one) when the consumer's
+ * results change under it, and a new option never inherits an old id.
+ */
+const encoder = new TextEncoder();
+/** The value as hex, so any value makes a unique, valid id part. */
+function idPart(value) {
+    return Array.from(encoder.encode(value), (byte) => byte.toString(16).padStart(2, '0')).join('');
+}
+/** The list's rows in order, each with a stable key and a DOM id under `listId`. */
+export function comboboxEntries(listId, groups, action) {
+    const entries = [];
+    groups.forEach((group, groupIndex) => {
+        for (const option of group.options)
+            entries.push({
+                kind: 'option',
+                key: `option:${option.value}`,
+                id: `${listId}-option-${idPart(option.value)}`,
+                index: entries.length,
+                option,
+                groupIndex,
+            });
+    });
+    if (action)
+        entries.push({
+            kind: 'action',
+            key: 'action',
+            id: `${listId}-action`,
+            index: entries.length,
+            action,
+        });
+    return entries;
+}

package/dist/components/combobox/types.d.ts

@@ -0,0 +1,71 @@
+import { type BadgeTone } from '../../css/css-data.js';
+import { type RequiredMark } from '../FieldLabelText.js';
+/** A short tag after an option's label, such as "Warning" or "Blocked". */
+export type ComboboxBadge = {
+    label: string;
+    tone?: BadgeTone;
+};
+/** One suggestion in a Combobox. */
+export type ComboboxOption = {
+    value: string;
+    label: string;
+    /** A muted line of detail after the label, such as "3 items · updated Sep 28". */
+    description?: string;
+    badge?: ComboboxBadge;
+    /** Shown, read as unavailable, and never chosen, such as an archived item. */
+    disabled?: boolean;
+};
+/** A run of suggestions under a heading, such as "All items". */
+export type ComboboxGroup = {
+    /** The group's heading; a group without one has no heading. */
+    label?: string;
+    options: readonly ComboboxOption[];
+};
+/** A command at the end of the list, such as "+ New entry “acme”". */
+export type ComboboxAction = {
+    label: string;
+    onPress: () => void;
+    badge?: ComboboxBadge;
+};
+export declare const comboboxSizes: readonly ["md", "xs"];
+export type ComboboxSize = (typeof comboboxSizes)[number];
+export type ComboboxProps = {
+    /** The input's name, drawn above it unless `labelVisuallyHidden`. */
+    label: string;
+    labelVisuallyHidden?: boolean;
+    /** The text in the input; the consumer filters `groups` from it. */
+    inputValue: string;
+    onInputChange: (value: string) => void;
+    groups: readonly ComboboxGroup[];
+    /** Called with the chosen option's value; the consumer sets `inputValue`. */
+    onSelect: (value: string) => void;
+    action?: ComboboxAction;
+    /**
+     * Shown in the list, and announced, when no group has an option, such as
+     * "Nothing matches".
+     */
+    emptyText: string;
+    /**
+     * The words announced for the number of options while the list is open,
+     * such as `(n) => \`${n} items\``; without it only the empty text is
+     * announced.
+     */
+    countText?: (count: number) => string;
+    /** The list's name when it differs from the input's, such as "Results". */
+    listLabel?: string;
+    /** A muted line under the suggestions, such as how to find more. */
+    note?: string;
+    placeholder?: string;
+    description?: string;
+    error?: string;
+    required?: boolean;
+    /**
+     * `hidden` leaves out the label's " *" while the input stays required
+     * (and announced so); `visible` (default) draws it.
+     * When hidden, say in visible text which fields must be filled; a
+     * placeholder alone is not enough.
+     */
+    requiredMark?: RequiredMark;
+    disabled?: boolean;
+    size?: ComboboxSize;
+};

package/dist/components/combobox/types.js

@@ -0,0 +1 @@
+export const comboboxSizes = ['md', 'xs'];

package/dist/components/combobox/validate.d.ts

@@ -0,0 +1,3 @@
+import { type ComboboxProps } from './types.js';
+/** Fails closed on blank words, duplicate values and unknown sizes. */
+export declare function assertCombobox(props: ComboboxProps): void;

package/dist/components/combobox/validate.js

@@ -0,0 +1,44 @@
+import { badgeTones } from '../../css/css-data.js';
+import { comboboxSizes, } from './types.js';
+function blank(text) {
+    return typeof text !== 'string' || !text.trim();
+}
+function assertBadge(badge) {
+    if (badge === undefined)
+        return;
+    if (blank(badge.label))
+        throw new RangeError('A Combobox badge needs a nonempty label');
+    if (badge.tone !== undefined && !badgeTones.includes(badge.tone))
+        throw new RangeError(`Unknown Combobox badge tone: ${String(badge.tone)}`);
+}
+/** Fails closed on blank words, duplicate values and unknown sizes. */
+export function assertCombobox(props) {
+    if (blank(props.label))
+        throw new RangeError('Combobox needs a nonempty label');
+    if (blank(props.emptyText))
+        throw new RangeError('Combobox needs a nonempty emptyText');
+    if (props.listLabel !== undefined && blank(props.listLabel))
+        throw new RangeError('A Combobox listLabel must not be blank');
+    if (props.size !== undefined && !comboboxSizes.includes(props.size))
+        throw new RangeError(`Unknown Combobox size: ${String(props.size)}`);
+    const values = new Set();
+    for (const group of props.groups) {
+        if (group.label !== undefined && blank(group.label))
+            throw new RangeError('A Combobox group label must not be blank');
+        for (const option of group.options) {
+            if (blank(option.value) || blank(option.label))
+                throw new RangeError('Combobox options need nonempty values and labels');
+            if (values.has(option.value))
+                throw new RangeError(`Duplicate Combobox option: ${option.value}`);
+            values.add(option.value);
+            assertBadge(option.badge);
+        }
+    }
+    if (props.action) {
+        if (blank(props.action.label))
+            throw new RangeError('A Combobox action needs a nonempty label');
+        if (typeof props.action.onPress !== 'function')
+            throw new TypeError('A Combobox action needs onPress');
+        assertBadge(props.action.badge);
+    }
+}

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

@@ -1,7 +1,9 @@
 import { type DenominationGridProps } from './types.js';
 type StripProps = Required<Pick<DenominationGridProps, 'label' | 'columns' | 'rows' | 'zeroLabel'>> & Pick<DenominationGridProps, 'totalLabel' | 'labelWidth'> & {
-    /** The row labels' appearance class, if any. */
+    /** The grid's appearance classes (labels, totals, cell tones), if any. */
     className?: string;
+    /** The `table` frame: a hairline around the region and a heading-row fill. */
+    framed: boolean;
 };
-export declare function DenominationStrip({ className, label, columns, rows, zeroLabel, totalLabel, labelWidth, }: StripProps): import("react").JSX.Element;
+export declare function DenominationStrip({ className, framed, label, columns, rows, zeroLabel, totalLabel, labelWidth, }: StripProps): import("react").JSX.Element;
 export {};

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

@@ -1,6 +1,7 @@
 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 { denominationFramedClass, denominationScrollFramedClass, } from '../../css/css-denomination-appearance.js';
 import { ScrollRegion } from '../ScrollRegion.js';
 import { ColumnHeadText } from './ColumnHeadText.js';
 import { StripRow } from './StripRow.js';
@@ -16,7 +17,7 @@ function TotalHead({ totalLabel }) {
         return _jsx("td", { className: "sw-denomination-corner sw-denomination-total-head" });
     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({ className, label, columns, rows, zeroLabel, totalLabel, labelWidth, }) {
+export function DenominationStrip({ className, framed, label, columns, rows, zeroLabel, totalLabel, labelWidth, }) {
     const hasTotals = rows.some((row) => row.total !== undefined);
     // An aligned strip sizes its columns from the region's width; it needs
     // the column count and whether a total column takes a share.
@@ -26,5 +27,5 @@ export function DenominationStrip({ className, label, columns, rows, zeroLabel,
             '--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', rows.some((row) => row.entry) && 'sw-denomination-strip-entry', labelWidth && denominationLabelWidthClass(labelWidth), className), 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: _jsx(ColumnHeadText, { column: column }) }, column.key))), hasTotals ? _jsx(TotalHead, { totalLabel: totalLabel }) : null] }) }), _jsx("tbody", { children: rows.map((row) => (_jsx(StripRow, { columns: columns, hasTotals: hasTotals, row: row, zeroLabel: zeroLabel }, row.id))) })] }) }));
+    return (_jsx(ScrollRegion, { "aria-label": label, className: cx('sw-denomination-scroll', aligned && 'sw-denomination-scroll-aligned', framed && denominationScrollFramedClass), children: _jsxs("table", { className: cx('sw-denomination-grid sw-denomination-strip', labelWidth && 'sw-denomination-strip-aligned', rows.some((row) => row.entry) && 'sw-denomination-strip-entry', labelWidth && denominationLabelWidthClass(labelWidth), framed && denominationFramedClass, className), 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: _jsx(ColumnHeadText, { column: column }) }, column.key))), hasTotals ? _jsx(TotalHead, { totalLabel: totalLabel }) : null] }) }), _jsx("tbody", { children: rows.map((row) => (_jsx(StripRow, { columns: columns, hasTotals: hasTotals, row: row, zeroLabel: zeroLabel }, row.id))) })] }) }));
 }

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

@@ -1,6 +1,6 @@
 import { type DenominationGridProps } from './types.js';
 type TilesProps = Required<Pick<DenominationGridProps, 'label' | 'columns' | 'rows' | 'zeroLabel' | 'rowRole'>> & Pick<DenominationGridProps, 'subtotal'> & {
-    /** The row labels' appearance class, if any. */
+    /** The grid's appearance classes (labels, totals), if any. */
     className?: string;
 };
 export declare function DenominationTiles({ className, label, columns, rows, rowRole, subtotal, zeroLabel, }: TilesProps): import("react").JSX.Element;

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

@@ -12,5 +12,5 @@ import { columnName } from './ColumnHeadText.js';
 export function EntryCell({ row, entry, column, index }) {
     const max = entry.max?.[index] ?? undefined;
     const tone = row.cellTones?.[index];
-    return (_jsx("td", { className: cx('sw-denomination-entry', ...denominationCellToneClassNames(tone)), children: _jsx(Stepper, { changed: tone === 'accent', decrementLabel: entry.decrementLabel, disabled: row.disabled, error: entry.errors?.[index] ?? undefined, incrementLabel: entry.incrementLabel, label: `${row.label} ${columnName(column)}`, labelVisuallyHidden: true, max: max, onChange: (value) => entry.onChange(column.key, value), placeholder: entry.placeholder, value: row.cells[index] ?? null, width: "full" }) }));
+    return (_jsx("td", { className: cx('sw-denomination-entry', ...denominationCellToneClassNames(tone)), children: _jsx(Stepper, { changed: tone === 'accent', decrementLabel: entry.decrementLabel, disabled: row.disabled, error: entry.errors?.[index] ?? undefined, incrementLabel: entry.incrementLabel, label: `${row.label} ${columnName(column)}`, labelVisuallyHidden: true, limitAppearance: entry.limitAppearance, max: max, onChange: (value) => entry.onChange(column.key, value), placeholder: entry.placeholder, value: row.cells[index] ?? null, width: "full" }) }));
 }

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

@@ -4,10 +4,13 @@ import { denominationCellToneClassNames } from '../../css/css-denomination-cell-
 import { denominationCellView } from '../../denomination-cells.js';
 import { EntryCell } from './EntryCell.js';
 import { RowLabelLine } from './RowLabelLine.js';
-/** One count, read-only: the zero label, a signed delta, and the cell's tone. */
+/**
+ * One count, read-only: the zero label, a signed delta, and the cell's tone.
+ * The value has its own box, which the `pill` tone appearance fills.
+ */
 function CountCell({ row, index, zeroLabel, }) {
     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 }));
+    return (_jsx("td", { className: cx('sw-denomination-cell', `sw-denomination-cell-${view.state}`, ...denominationCellToneClassNames(row.cellTones?.[index])), children: _jsx("span", { className: "sw-denomination-cell-value", children: view.text }) }));
 }
 /**
  * One strip row: its pinned label (with the phone total under it), a count

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

@@ -1,8 +1,11 @@
 import { type ReactNode } from 'react';
 import { type BadgeTone } from '../../css/css-data.js';
+import { type DenominationGridFrame, type DenominationTotalEmphasis } from '../../css/css-denomination-appearance.js';
+import { type DenominationCellToneAppearance } from '../../css/css-denomination-cell-tones.js';
 import { type DenominationLabelAppearance } from '../../css/css-denomination-label.js';
 import { type DenominationLabelWidth } from '../../css/css-denomination-aligned.js';
-export type { DenominationLabelWidth };
+import { type StepperLimitAppearance } from '../Stepper.js';
+export type { DenominationCellToneAppearance, DenominationGridFrame, DenominationLabelWidth, DenominationTotalEmphasis, };
 export type DenominationGridTone = BadgeTone;
 export type DenominationGridLayout = 'strip' | 'tiles';
 /**
@@ -36,6 +39,11 @@ export type DenominationGridEntry = {
     errors?: readonly (string | null)[];
     /** What an empty box shows, such as "0". */
     placeholder?: string;
+    /**
+     * The Steppers' `limitAppearance`: `plain` keeps − at 0 (and + at a cap)
+     * in its usual look instead of faded; it is still disabled.
+     */
+    limitAppearance?: StepperLimitAppearance;
 };
 export type DenominationGridRow = {
     id: string;
@@ -79,6 +87,11 @@ export type DenominationGridProps = {
     rows: readonly DenominationGridRow[];
     layout?: DenominationGridLayout;
     subtotal?: (count: number, column: DenominationGridColumn) => string;
+    /**
+     * What a zero or empty read-only count shows, `—` by default. An empty
+     * string leaves those counts blank, so only the counts that are there
+     * stand out (the column header still names each cell).
+     */
     zeroLabel?: string;
     /**
      * Names the strip's total column, such as "Total": a column header over
@@ -111,4 +124,25 @@ export type DenominationGridProps = {
      * total.
      */
     labelAppearance?: DenominationLabelAppearance;
+    /**
+     * `table` frames the strip: its surface inside a hairline with rounded
+     * corners, the heading row on the subtle fill, a rule between columns,
+     * and the counts at label size, centred under their heads. `none` (the
+     * default) leaves open rows on the page's surface. Only the strip has a
+     * frame.
+     */
+    frame?: DenominationGridFrame;
+    /**
+     * `strong` sets the row totals in bold label type, a neutral row's in the
+     * text color and a toned row's in its tone; `default` keeps them in data
+     * type in the row's tone (a neutral row's muted).
+     */
+    totalEmphasis?: DenominationTotalEmphasis;
+    /**
+     * How a `cellTones` tone shows on a strip's read-only count: `text` (the
+     * default) sets the count in the tone; `pill` sets it on a rounded tint of
+     * the tone in the tone's ink, such as a difference in danger or a
+     * changed count in accent. Entry counts and tiles keep their tone border.
+     */
+    cellToneAppearance?: DenominationCellToneAppearance;
 };

package/dist/components/dialog/DialogTitle.d.ts

@@ -11,12 +11,14 @@ type DialogTitleProps = {
     /** The close button's accessible name; without it there is no button. */
     closeLabel?: string;
     onClose: () => void;
+    /** A banded dialog's title is always a row, which draws the band. */
+    banded: boolean;
 };
 /**
  * The dialog's title, which names it through `aria-labelledby`. Alone it is
  * the heading, as it always was. With an icon, a description or a
- * `closeLabel` it is a row: the icon, the title over its description, and
- * an icon-only ghost close button at the end.
+ * `closeLabel`, or in a banded dialog, it is a row: the icon, the title over
+ * its description, and an icon-only ghost close button at the end.
  */
-export declare function DialogTitle({ closeLabel, description, descriptionId, icon, id, level, onClose, title, }: DialogTitleProps): import("react").JSX.Element;
+export declare function DialogTitle({ banded, closeLabel, description, descriptionId, icon, id, level, onClose, title, }: DialogTitleProps): import("react").JSX.Element;
 export {};

package/dist/components/dialog/DialogTitle.js

@@ -5,12 +5,12 @@ import { Text } from '../Text.js';
 /**
  * The dialog's title, which names it through `aria-labelledby`. Alone it is
  * the heading, as it always was. With an icon, a description or a
- * `closeLabel` it is a row: the icon, the title over its description, and
- * an icon-only ghost close button at the end.
+ * `closeLabel`, or in a banded dialog, it is a row: the icon, the title over
+ * its description, and an icon-only ghost close button at the end.
  */
-export function DialogTitle({ closeLabel, description, descriptionId, icon, id, level, onClose, title, }) {
+export function DialogTitle({ banded, closeLabel, description, descriptionId, icon, id, level, onClose, title, }) {
     const heading = (_jsx(Text, { as: level === 2 ? 'h2' : 'h3', id: id, variant: "title", children: title }));
-    if (!closeLabel && !icon && !description)
+    if (!banded && !closeLabel && !icon && !description)
         return heading;
     return (_jsxs("div", { className: cx('sw-dialog-header', Boolean(icon || description) && 'sw-dialog-header-framed'), children: [icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-dialog-icon", children: icon })) : null, description ? (_jsxs("div", { className: "sw-dialog-titles", children: [heading, _jsx(Text, { as: "p", className: "sw-dialog-description", color: "muted", id: descriptionId, variant: "caption", children: description })] })) : (heading), closeLabel ? (_jsxs(Button, { className: "sw-dialog-close", onPress: onClose, size: "sm", variant: "ghost", children: [_jsx("span", { className: "sw-sr-only", children: closeLabel }), _jsx("span", { "aria-hidden": "true", className: "sw-dialog-close-glyph" })] })) : null] }));
 }

package/dist/components/field/SearchFrame.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+type SearchFrameProps = {
+    children: ReactNode;
+    leading?: ReactNode;
+    clearLabel: string;
+    /** Shown while the input holds text and is enabled. */
+    showClear: boolean;
+    onClear: () => void;
+};
+/**
+ * The search field's frame: the consumer's glyph at the start (hidden from
+ * assistive technology), the input, and a clear button at the end while
+ * there is text. Clearing calls `onClear` and puts focus back in the input.
+ */
+export declare function SearchFrame({ children, clearLabel, leading, onClear, showClear, }: SearchFrameProps): import("react").JSX.Element;
+export {};

package/dist/components/field/SearchFrame.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * A press on the frame's chrome (the glyph or the padding) focuses the
+ * input, as on an adorned field; a press on the input keeps the browser's
+ * own caret placement, and the clear button runs its own action.
+ */
+function focusSearchInput(event) {
+    const input = event.currentTarget.querySelector('input');
+    const target = event.target;
+    if (!input || input.disabled || target === input)
+        return;
+    event.preventDefault();
+    // The clear button keeps focus in the input: no blur, and its click
+    // still runs.
+    if (target.closest('.sw-field-search-clear'))
+        return;
+    input.focus();
+}
+/**
+ * The search field's frame: the consumer's glyph at the start (hidden from
+ * assistive technology), the input, and a clear button at the end while
+ * there is text. Clearing calls `onClear` and puts focus back in the input.
+ */
+export function SearchFrame({ children, clearLabel, leading, onClear, showClear, }) {
+    return (_jsxs("span", { className: "sw-field-adorned sw-field-search", onMouseDown: focusSearchInput, children: [leading != null && leading !== false ? (_jsx("span", { "aria-hidden": "true", className: "sw-field-search-leading", children: leading })) : null, children, showClear ? (_jsx("button", { "aria-label": clearLabel, className: "sw-field-search-clear", onClick: (event) => {
+                    // Focus first, so a consumer that moves focus in onClear wins.
+                    event.currentTarget.parentElement
+                        ?.querySelector('input')
+                        ?.focus();
+                    onClear();
+                }, type: "button", children: _jsx("span", { "aria-hidden": "true", className: "sw-field-search-cross" }) })) : null] }));
+}

package/dist/css/css-action-menu-trigger.d.ts

@@ -0,0 +1,11 @@
+export declare const actionMenuTriggerAppearances: readonly ["framed", "text"];
+/**
+ * How an ActionMenu's trigger looks: `framed` (the default) is a small
+ * outlined control; `text` is its words in the text color with a chevron
+ * after them and no fill or outline until hovered or open, such as a
+ * person's name that opens their account menu in a header.
+ */
+export type ActionMenuTriggerAppearance = (typeof actionMenuTriggerAppearances)[number];
+export declare const actionMenuTriggerTextClass = "sw-action-menu-trigger-text";
+export declare function cssActionMenuTriggerClasses(): string;
+export declare function actionMenuTriggerClassCatalog(): string[];

package/dist/css/css-action-menu-trigger.js

@@ -0,0 +1,66 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { chevronStroke } from './chevron.js';
+import { quietFill } from './quiet-fill.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
+const label = typographyVariants.label;
+export const actionMenuTriggerAppearances = ['framed', 'text'];
+export const actionMenuTriggerTextClass = 'sw-action-menu-trigger-text';
+const text = `.sw-action-menu-trigger.${actionMenuTriggerTextClass}`;
+/*
+ * A text trigger: no fill and a transparent border (kept, so forced colors
+ * can draw one), its words in label type at medium weight in the text
+ * color, the sm control height (the 44 px target on a coarse pointer), and
+ * the shared muted chevron pointing down after them, a space-2 gap apart.
+ * The quiet fill shows while the menu is open, so the open state is seen
+ * as well as announced, and on hover where the pointer can hover (a tap
+ * leaves no fill behind). Two classes, so it outranks the framed
+ * trigger's rules; the coarse-pointer target is restated after. Forced
+ * colors draw the kept border in the system's border color, the chevron
+ * in CanvasText as every chevron, and the open trigger's border in
+ * Highlight.
+ */
+export function cssActionMenuTriggerClasses() {
+    return `${text} {
+  align-items: center;
+  background: transparent;
+  border-color: transparent;
+  display: inline-flex;
+  font-family: var(--sw-font-sans);
+  font-size: ${label.fontSize}px;
+  font-weight: 500;
+  gap: var(--sw-space-2);
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+  min-height: var(--sw-control-sm-min-height);
+  padding-inline: var(--sw-space-3) var(--sw-space-2);
+}
+
+${text}::after {
+  ${chevronStroke}
+  content: '';
+  flex: none;
+  transform: translateY(-25%) rotate(45deg);
+}
+
+${text}[aria-expanded='true'] {
+  background: ${quietFill};
+}
+
+@media (hover: hover) {
+  ${text}:hover:not(:disabled) {
+    background: ${quietFill};
+  }
+}
+
+@media ${coarsePointerQuery} {
+  ${text} { min-height: ${touchTarget}; }
+}
+
+@media (forced-colors: active) {
+  ${text}::after { border-color: CanvasText; }
+  ${text}[aria-expanded='true'] { border-color: Highlight; }
+}`;
+}
+export function actionMenuTriggerClassCatalog() {
+    return [actionMenuTriggerTextClass];
+}