@scalewing/react 1.26.0 → 1.28.0

package/dist/components/Notice.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, forwardRef, } from 'react';
+import { cx } from '../class-names.js';
+import { noticeTones, noticeVariants, } from '../css/css-notice.js';
+export { noticeTones, noticeVariants };
+const noticeRoles = ['status', 'alert', 'none'];
+function defaultRole(tone, variant) {
+    if (variant === 'band')
+        return 'none';
+    return tone === 'danger' ? 'alert' : 'status';
+}
+/**
+ * The message's parts, without the empty ones (`false`, `null`,
+ * `undefined`, `''`) a condition leaves; fragments flatten.
+ */
+function messageParts(children) {
+    return Children.toArray(children).filter((part) => part !== '');
+}
+/** A sentence, even one with values interpolated, may share the title's row. */
+function isText(parts) {
+    return parts.every((part) => typeof part === 'string' || typeof part === 'number');
+}
+function assertNoticeProps(tone, title, role, variant, hasMessage) {
+    if (!noticeVariants.includes(variant))
+        throw new RangeError(`Unknown Notice variant: ${String(variant)}`);
+    if (!noticeTones.includes(tone))
+        throw new RangeError(`Unknown Notice tone: ${String(tone)}`);
+    if (title !== undefined && (typeof title !== 'string' || !title.trim()))
+        throw new RangeError('Notice title must not be empty');
+    if (role !== undefined && !noticeRoles.includes(role))
+        throw new RangeError(`Unknown Notice role: ${String(role)}`);
+    if (title === undefined && !hasMessage)
+        throw new RangeError('Notice needs a title or a message');
+}
+/**
+ * A tinted note in the page's flow: information, a good outcome, a caution
+ * or a refusal, with an optional bold lead, glyph and one action. It stays
+ * until the consumer removes it. `variant="band"` is the same note as a
+ * full-width strip of page chrome. Pass `tabIndex={-1}` and a ref to move
+ * focus to it.
+ */
+export const Notice = forwardRef(function Notice({ action, children, className, icon, role, title, tone, variant = 'default', ...rest }, ref) {
+    const parts = messageParts(children);
+    const hasMessage = parts.length > 0;
+    assertNoticeProps(tone, title, role, variant, hasMessage);
+    const announced = role ?? defaultRole(tone, variant);
+    return (_jsxs("div", { ...rest, ref: ref, className: cx('sw-notice', `sw-notice-${tone}`, variant === 'band' && 'sw-notice-band', className), role: announced === 'none' ? undefined : announced, children: [icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-notice-icon", children: icon })) : null, _jsxs("div", { className: cx('sw-notice-content', hasMessage && !isText(parts) && 'sw-notice-stacked'), children: [title ? _jsx("strong", { className: "sw-notice-title", children: title }) : null, hasMessage ? _jsx("div", { className: "sw-notice-body", children: children }) : null] }), action ? _jsx("div", { className: "sw-notice-action", children: action }) : null] }));
+});

package/dist/components/Progress.d.ts

@@ -1,4 +1,6 @@
-export type ProgressTone = 'accent' | 'success' | 'danger';
+import { type ProgressTone, progressTones } from '../css/css-progress.js';
+export { progressTones };
+export type { ProgressTone };
 export type ProgressProps = {
     label: string;
     value: number;

package/dist/components/Progress.js

@@ -1,6 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from 'react';
+import { progressTones } from '../css/css-progress.js';
+export { progressTones };
 export function Progress({ label, value, max, tone = 'accent', showCount = true, }) {
     if (!label.trim())
         throw new RangeError('label must not be empty');
@@ -8,6 +10,8 @@ export function Progress({ label, value, max, tone = 'accent', showCount = true,
         throw new RangeError('max must be a positive finite number');
     if (!Number.isFinite(value) || value < 0 || value > max)
         throw new RangeError('value must be finite and within 0..max');
+    if (!progressTones.includes(tone))
+        throw new RangeError(`Unknown Progress tone: ${String(tone)}`);
     const labelId = useId();
     return (_jsxs("div", { className: `sw-progress sw-progress-${tone}`, children: [_jsxs("div", { className: "sw-progress-heading", children: [_jsx("span", { className: "sw-progress-label", id: labelId, children: label }), showCount ? (_jsxs("span", { "aria-hidden": "true", className: "sw-progress-count", children: [value, " / ", max] })) : null] }), _jsx("progress", { "aria-labelledby": labelId, className: "sw-progress-bar", max: max, value: value })] }));
 }

package/dist/components/Stepper.d.ts

@@ -0,0 +1,44 @@
+/** `fixed` sizes the count for a few digits; `full` fills its container, such as a table cell. */
+export type StepperWidth = 'fixed' | 'full';
+export type StepperProps = {
+    /** Names the count. Keep it visible unless headers around it say it (`labelVisuallyHidden`). */
+    label: string;
+    labelVisuallyHidden?: boolean;
+    /** The count, or `null` for an empty box (none). */
+    value: number | null;
+    /** A whole count, or `null` when the box is emptied. Typed counts are reported as typed, even outside the bounds. */
+    onChange: (value: number | null) => void;
+    /** The lowest count − reaches; defaults to 0. */
+    min?: number;
+    /** The highest count + reaches; no upper bound when left out. */
+    max?: number;
+    /** How much one press, or one arrow key, moves the count; defaults to 1. */
+    step?: number;
+    /** The − button's name, such as "One less". */
+    decrementLabel: string;
+    /** The + button's name, such as "One more". */
+    incrementLabel: string;
+    /**
+     * A message under the control, as `Field`'s: a polite live region linked by
+     * `aria-describedby`, with `aria-invalid` and the danger border. An empty
+     * string is no error.
+     */
+    error?: string;
+    /** `Field`'s changed look (the accent border and tint) for a count someone changed, or a suggestion. `error` wins. */
+    changed?: boolean;
+    disabled?: boolean;
+    /** Readable and focusable, never changed: the buttons are hidden and keep their room. */
+    readOnly?: boolean;
+    /** Says the count in words for assistive technology (`aria-valuetext`), such as "12 straps". */
+    valueText?: string;
+    /** Shown in an empty box, such as "0". */
+    placeholder?: string;
+    name?: string;
+    width?: StepperWidth;
+};
+/**
+ * A whole-number count between − and + buttons that can also be typed: one
+ * 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 declare const Stepper: import("react").ForwardRefExoticComponent<StepperProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/Stepper.js

@@ -0,0 +1,77 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useState, } from 'react';
+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';
+/** Keeps focus where it was (the count, or nowhere) when a button is pressed. */
+function keepFocus(event) {
+    event.preventDefault();
+}
+/**
+ * A whole-number count between − and + buttons that can also be typed: one
+ * 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) {
+    const bounds = { min, max, step };
+    assertStepperBounds(bounds);
+    if (value !== null && !Number.isSafeInteger(value))
+        throw new RangeError('Stepper value must be a whole number or null');
+    const inputId = useId();
+    const labelId = useId();
+    const errorId = useId();
+    const [draft, setDraft] = useState(null);
+    const allowsNegative = min < 0;
+    const moves = stepperMoves(value, bounds, disabled || readOnly);
+    // The typed text stays while it means the count the consumer holds, so
+    // "007" or a lone minus survives a render; otherwise the count's text.
+    const draftEntry = draft === null ? null : readStepperEntry(draft, allowsNegative);
+    const draftShowsValue = draftEntry !== null &&
+        (draftEntry.kind === 'empty'
+            ? value === null
+            : draftEntry.kind === 'count' && draftEntry.value === value);
+    const text = draft !== null && draftShowsValue ? draft : stepperText(value);
+    function move(next) {
+        if (next === null)
+            return;
+        setDraft(null);
+        onChange(next);
+    }
+    function onType(event) {
+        const next = event.target.value;
+        const entry = readStepperEntry(next, allowsNegative);
+        // A refused keystroke changes nothing: the controlled box keeps its text.
+        if (entry.kind === 'refused')
+            return;
+        setDraft(next);
+        const count = entry.kind === 'count' ? entry.value : null;
+        if (count !== value)
+            onChange(count);
+    }
+    /** ArrowUp and ArrowDown step; Home and End go to min and a finite max. */
+    function keyTarget(key) {
+        if (key === 'ArrowUp')
+            return moves.up;
+        if (key === 'ArrowDown')
+            return moves.down;
+        if (key === 'Home')
+            return moves.down === null ? null : min;
+        if (key === 'End' && Number.isFinite(max))
+            return moves.up === null ? null : max;
+        return undefined;
+    }
+    function onKeyDown(event) {
+        const target = keyTarget(event.key);
+        if (target === undefined)
+            return;
+        event.preventDefault();
+        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, 
+                        // 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/Steps.d.ts

@@ -0,0 +1,18 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type StepHeadingLevel, type StepsLabels } from './steps/step-status.js';
+export { Step, type StepProps } from './steps/Step.js';
+export type { StepHeadingLevel, StepsLabels, StepStatus, } from './steps/step-status.js';
+export type StepsProps = Omit<HTMLAttributes<HTMLOListElement>, 'children'> & {
+    /** The `Step`s, in order; each is numbered by its place. */
+    children: ReactNode;
+    /** Each step title's heading level; defaults to 2. */
+    headingLevel?: StepHeadingLevel;
+    /** The status words assistive technology hears after a folded step's title. English by default. */
+    labels?: Partial<StepsLabels>;
+};
+/**
+ * A one-page vertical stepper: a form's steps in order, the current one
+ * open, the done ones folded to a line with their summary and Edit, the
+ * ones ahead greyed, a line joining each marker to the next.
+ */
+export declare function Steps({ children, className, headingLevel, labels, ...rest }: StepsProps): import("react").JSX.Element;

package/dist/components/Steps.js

@@ -0,0 +1,34 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, Fragment, isValidElement, useRef, } from 'react';
+import { cx } from '../class-names.js';
+import { defaultStepsLabels, stepHeadingLevels, } from './steps/step-status.js';
+import { StepPlaceContext } from './steps/steps-context.js';
+export { Step } from './steps/Step.js';
+function assertSteps(labels, level) {
+    if (Object.values(labels).some((word) => typeof word !== 'string' || !word.trim()))
+        throw new RangeError('Steps labels must not be empty');
+    if (!stepHeadingLevels.includes(level))
+        throw new RangeError('Steps headingLevel must be 2, 3 or 4');
+}
+/**
+ * A one-page vertical stepper: a form's steps in order, the current one
+ * open, the done ones folded to a line with their summary and Edit, the
+ * ones ahead greyed, a line joining each marker to the next.
+ */
+export function Steps({ children, className, headingLevel = 2, labels, ...rest }) {
+    const words = { ...defaultStepsLabels, ...labels };
+    assertSteps(words, headingLevel);
+    const steps = Children.toArray(children).filter(isValidElement);
+    // A Fragment would share one number among its steps: pass them directly.
+    if (steps.some((step) => step.type === Fragment))
+        throw new RangeError('Steps children must be Steps, not a Fragment');
+    // The first step to open in a commit claims focus (see Step).
+    const focusClaimRef = useRef(false);
+    return (_jsx("ol", { className: cx('sw-steps', className), ...rest, children: steps.map((step, index) => (_jsx(StepPlaceContext.Provider, { value: {
+                number: index + 1,
+                headingLevel,
+                labels: words,
+                focusClaimRef,
+            }, children: step }, step.key))) }));
+}

package/dist/components/Toast.d.ts

@@ -1,8 +1,10 @@
 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'> & {
+import { toastPlacements, type ToastPlacement } from '../css/css-toast-card.js';
+import { type ToastAction } from './toast/ToastContent.js';
+export { toastPlacements, toastTones };
+export type { ToastAction, ToastPlacement, ToastTone };
+export type ToastProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'popover' | 'title'> & {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     /**
@@ -19,6 +21,20 @@ export type ToastProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'popo
     tone?: ToastTone;
     /** A consumer glyph before the message, hidden from assistive technology. */
     icon?: ReactNode;
+    /** A bold first line; the children become the muted detail under it. */
+    title?: string;
+    /**
+     * One press at the end of the toast, such as "Open". It runs `onPress`,
+     * then closes the toast. The toast takes the pointer while it has one.
+     */
+    action?: ToastAction;
+    /** A thin line under the message that runs down with the time left. */
+    showRemaining?: boolean;
+    /**
+     * `bottom` (default) centers it near the bottom edge; `top-end` puts it
+     * in the top corner at the end of the line, as a card.
+     */
+    placement?: ToastPlacement;
     children: ReactNode;
 };
-export declare function Toast({ anchor, children, className, onOpenChange, open, target, timeoutMs, tone, icon, ...rest }: ToastProps): import("react").JSX.Element;
+export declare function Toast({ action, anchor, children, className, icon, onBlur, onFocus, onOpenChange, onPointerEnter, onPointerLeave, open, placement, showRemaining, style, target, timeoutMs, title, tone, ...rest }: ToastProps): import("react").JSX.Element;

package/dist/components/Toast.js

@@ -1,11 +1,15 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useLayoutEffect, useEffect, useRef, } from 'react';
+import { useCallback, useLayoutEffect, useRef, } from 'react';
 import { cx } from '../class-names.js';
 import { toastTones } from '../css/css-toast.js';
+import { toastPlacements } from '../css/css-toast-card.js';
 import { spacingClassNames } from '../spacing-classes.js';
 import { applyTravelVars, clearTravelVars, travelTranslate, } from '../toast-travel.js';
-export { toastTones };
+import { assertToastContent, ToastContent, } from './toast/ToastContent.js';
+import { useToastHold } from './toast/use-toast-hold.js';
+import { useToastTimer } from './toast/use-toast-timer.js';
+export { toastPlacements, toastTones };
 const DEFAULT_TIMEOUT_MS = 800;
 /** A warning or an error must be read, not glimpsed. */
 const URGENT_TIMEOUT_MS = 6000;
@@ -17,10 +21,28 @@ function defaultTimeout(tone) {
 function travels(anchor, target) {
     return Boolean(anchor && target);
 }
-export function Toast({ anchor = null, children, className, onOpenChange, open, target = null, timeoutMs, tone = 'neutral', icon, ...rest }) {
+function reducedMotion() {
+    return (typeof window !== 'undefined' &&
+        typeof window.matchMedia === 'function' &&
+        window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+}
+export function Toast({ action, anchor = null, children, className, icon, onBlur, onFocus, onOpenChange, onPointerEnter, onPointerLeave, open, placement = 'bottom', showRemaining = false, style, target = null, timeoutMs, title, tone = 'neutral', ...rest }) {
+    assertToastContent(title, action);
+    if (!toastPlacements.includes(placement))
+        throw new RangeError(`Unknown Toast placement: ${String(placement)}`);
     const nodeRef = useRef(null);
     const dismissAfter = timeoutMs ?? defaultTimeout(tone);
     const moving = travels(anchor, target);
+    const interactive = !moving && (Boolean(action) || showRemaining);
+    const { handlers, paused, returnFocus } = useToastHold({
+        enabled: interactive,
+        onBlur,
+        onFocus,
+        onPointerEnter,
+        onPointerLeave,
+        open,
+    });
+    const close = useCallback(() => onOpenChange(false), [onOpenChange]);
     useLayoutEffect(() => {
         const node = nodeRef.current;
         if (!node || typeof node.showPopover !== 'function') {
@@ -28,6 +50,7 @@ export function Toast({ anchor = null, children, className, onOpenChange, open,
         }
         if (!open) {
             if (node.matches(':popover-open')) {
+                returnFocus(node);
                 node.hidePopover();
             }
             clearTravelVars(node);
@@ -44,28 +67,28 @@ export function Toast({ anchor = null, children, className, onOpenChange, open,
         if (!node.matches(':popover-open')) {
             node.showPopover();
         }
-    }, [anchor, moving, open, target]);
-    useEffect(() => {
-        if (!open) {
-            return;
-        }
-        const reducedMotion = typeof window.matchMedia === 'function' &&
-            window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-        if (moving && !reducedMotion) {
-            return;
-        }
-        const timer = window.setTimeout(() => {
-            onOpenChange(false);
-        }, dismissAfter);
-        return () => {
-            window.clearTimeout(timer);
-        };
-    }, [dismissAfter, moving, open, onOpenChange]);
+    }, [anchor, moving, open, returnFocus, target]);
+    // A travelling toast closes when its animation ends, unless motion is
+    // reduced; every other toast closes on the timer, held while paused.
+    useToastTimer({
+        duration: dismissAfter,
+        onExpire: close,
+        paused,
+        running: open && (!moving || reducedMotion()),
+    });
     function onAnimationEnd(event) {
         if (event.target !== event.currentTarget || !moving) {
             return;
         }
         onOpenChange(false);
     }
-    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) }));
+    return (_jsxs("div", { ...rest, ref: nodeRef, className: cx('sw-toast', tone !== 'neutral' && `sw-toast-${tone}`, !moving && placement !== 'bottom' && `sw-toast-${placement}`, interactive && 'sw-toast-interactive', paused && 'sw-toast-paused', moving && 'sw-toast-travel', ...spacingClassNames({ padding: 3 }), className), onAnimationEnd: onAnimationEnd, ...handlers, popover: "manual", role: tone === 'danger' ? 'alert' : 'status', style: showRemaining
+            ? {
+                ...style,
+                '--sw-toast-duration': `${dismissAfter}ms`,
+            }
+            : style, children: [_jsx(ToastContent, { action: action, icon: icon, onAction: () => {
+                    action?.onPress();
+                    close();
+                }, title: title, children: children }), showRemaining && open && !moving ? (_jsx("span", { "aria-hidden": "true", className: "sw-toast-remaining" })) : null] }));
 }

package/dist/components/action-bar/ActionBarSummary.d.ts

@@ -0,0 +1,22 @@
+export declare const actionBarSummaryTones: readonly ["default", "danger", "success"];
+/** The value's color: the text color, or danger (short) or success (matched). */
+export type ActionBarSummaryTone = (typeof actionBarSummaryTones)[number];
+/** A labelled figure for the bar, such as "Counted $33,790.00 short $4,000.00". */
+export type ActionBarSummary = {
+    /** What the figure is, such as "Counted". */
+    label: string;
+    /** The figure, formatted by the consumer, such as "$33,790.00". */
+    value: string;
+    /** A short line after the figure, such as "short $4,000.00". */
+    detail?: string;
+    /** Colors the value only; the words say why. Defaults to `default`. */
+    tone?: ActionBarSummaryTone;
+};
+export declare function assertActionBarSummary(summary: ActionBarSummary): void;
+/**
+ * The bar's figure: its label, the value in the heading variant at tabular
+ * figures, and its detail, on one baseline, wrapping as one phrase.
+ */
+export declare function ActionBarSummaryLine({ summary, }: {
+    summary: ActionBarSummary;
+}): import("react").JSX.Element;

package/dist/components/action-bar/ActionBarSummary.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../../class-names.js';
+export const actionBarSummaryTones = ['default', 'danger', 'success'];
+function isBlank(text) {
+    return typeof text !== 'string' || !text.trim();
+}
+export function assertActionBarSummary(summary) {
+    if (isBlank(summary.label) || isBlank(summary.value))
+        throw new RangeError('ActionBar summary needs a label and a value');
+    if (summary.detail !== undefined && isBlank(summary.detail))
+        throw new RangeError('ActionBar summary detail must not be empty');
+    if (summary.tone !== undefined &&
+        !actionBarSummaryTones.includes(summary.tone))
+        throw new RangeError(`Unknown ActionBar summary tone: ${String(summary.tone)}`);
+}
+/**
+ * The bar's figure: its label, the value in the heading variant at tabular
+ * figures, and its detail, on one baseline, wrapping as one phrase.
+ */
+export function ActionBarSummaryLine({ summary, }) {
+    const tone = summary.tone ?? 'default';
+    return (_jsxs("span", { className: cx('sw-action-bar-summary', tone !== 'default' && `sw-action-bar-summary-${tone}`), children: [_jsx("span", { className: "sw-action-bar-summary-label", children: summary.label }), ' ', _jsx("span", { className: "sw-action-bar-summary-value sw-text-heading sw-tabular", children: summary.value }), summary.detail ? (_jsxs(_Fragment, { children: [' ', _jsx("span", { className: "sw-action-bar-summary-detail", children: summary.detail })] })) : null] }));
+}

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

@@ -0,0 +1,7 @@
+import { type DenominationGridColumn } from './types.js';
+/** A column's name as its header reads: the label, then its caption ("$1 × 100"). */
+export declare function columnName(column: DenominationGridColumn): string;
+/** A column's label and, after it, its muted caption ("$1 × 100"). */
+export declare function ColumnHeadText({ column }: {
+    column: DenominationGridColumn;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,13 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** A column's name as its header reads: the label, then its caption ("$1 × 100"). */
+export function columnName(column) {
+    return column.caption === undefined
+        ? column.label
+        : `${column.label} ${column.caption}`;
+}
+/** A column's label and, after it, its muted caption ("$1 × 100"). */
+export function ColumnHeadText({ column }) {
+    if (column.caption === undefined)
+        return _jsx(_Fragment, { children: column.label });
+    return (_jsxs(_Fragment, { children: [column.label, ' ', _jsx("span", { className: "sw-denomination-head-caption", children: column.caption })] }));
+}

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

@@ -1,4 +1,7 @@
 import { type DenominationGridProps } from './types.js';
-type StripProps = Required<Pick<DenominationGridProps, 'label' | 'columns' | 'rows' | 'zeroLabel'>> & Pick<DenominationGridProps, 'totalLabel' | 'labelWidth'>;
-export declare function DenominationStrip({ label, columns, rows, zeroLabel, totalLabel, labelWidth, }: StripProps): import("react").JSX.Element;
+type StripProps = Required<Pick<DenominationGridProps, 'label' | 'columns' | 'rows' | 'zeroLabel'>> & Pick<DenominationGridProps, 'totalLabel' | 'labelWidth'> & {
+    /** The row labels' appearance class, if any. */
+    className?: string;
+};
+export declare function DenominationStrip({ className, label, columns, rows, zeroLabel, totalLabel, labelWidth, }: StripProps): import("react").JSX.Element;
 export {};

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

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../../class-names.js';
 import { denominationLabelWidthClass } from '../../css/css-denomination-aligned.js';
-import { denominationCellToneClassNames } from '../../css/css-denomination-cell-tones.js';
-import { denominationCellView } from '../../denomination-cells.js';
 import { ScrollRegion } from '../ScrollRegion.js';
-import { RowLabelLine } from './RowLabelLine.js';
+import { ColumnHeadText } from './ColumnHeadText.js';
+import { StripRow } from './StripRow.js';
 /**
  * The total column's header: the consumer's name for the column, shown over
  * the totals from md up in the column heads' style, and visually hidden
@@ -17,7 +16,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({ label, columns, rows, zeroLabel, totalLabel, labelWidth, }) {
+export function DenominationStrip({ className, 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.
@@ -27,8 +26,5 @@ export function DenominationStrip({ label, columns, rows, zeroLabel, totalLabel,
             '--sw-denomination-columns': columns.length,
             '--sw-denomination-total': hasTotals ? 1 : 0,
         };
-    return (_jsx(ScrollRegion, { "aria-label": label, className: cx('sw-denomination-scroll', aligned && 'sw-denomination-scroll-aligned'), children: _jsxs("table", { className: cx('sw-denomination-grid sw-denomination-strip', labelWidth && 'sw-denomination-strip-aligned', labelWidth && denominationLabelWidthClass(labelWidth)), style: aligned, children: [_jsx("caption", { className: "sw-sr-only", children: label }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("td", { className: "sw-denomination-corner" }), columns.map((column) => (_jsx("th", { className: "sw-denomination-head", scope: "col", children: column.label }, column.key))), hasTotals ? _jsx(TotalHead, { totalLabel: totalLabel }) : null] }) }), _jsx("tbody", { children: rows.map((row) => (_jsxs("tr", { className: cx('sw-denomination-row', `sw-denomination-row-${row.tone ?? 'neutral'}`, row.signed && 'sw-denomination-row-signed'), children: [_jsx("th", { className: "sw-denomination-label", scope: "row", children: _jsxs("span", { className: "sw-denomination-label-body", children: [_jsx(RowLabelLine, { row: row }), row.total !== undefined ? (_jsx("span", { "aria-hidden": "true", className: "sw-denomination-total-inline", children: row.total })) : null] }) }), columns.map((column, index) => {
-                                const view = denominationCellView(row.cells[index] ?? null, row.signed ?? false, zeroLabel);
-                                return (_jsx("td", { className: cx('sw-denomination-cell', `sw-denomination-cell-${view.state}`, ...denominationCellToneClassNames(row.cellTones?.[index])), children: view.text }, column.key));
-                            }), hasTotals ? (_jsx("td", { className: "sw-denomination-total", children: _jsx("span", { className: "sw-denomination-total-value", children: row.total ?? '' }) })) : null] }, row.id))) })] }) }));
+    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))) })] }) }));
 }

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

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

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

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../../class-names.js';
 import { denominationCellToneClassNames } from '../../css/css-denomination-cell-tones.js';
 import { denominationCellView } from '../../denomination-cells.js';
+import { ColumnHeadText } from './ColumnHeadText.js';
 import { RowLabelLine } from './RowLabelLine.js';
 /**
  * A lone row is named by the grid's own label, so its label line shows only
@@ -20,8 +21,8 @@ function showsRowLabel(rowCount, row) {
 function namesRow(rowCount, row, gridLabel) {
     return showsRowLabel(rowCount, row) || row.label !== gridLabel;
 }
-export function DenominationTiles({ label, columns, rows, rowRole, subtotal, zeroLabel, }) {
-    return (_jsx("div", { "aria-label": label, className: "sw-denomination-grid sw-denomination-tiles", role: "group", children: rows.map((row) => {
+export function DenominationTiles({ className, label, columns, rows, rowRole, subtotal, zeroLabel, }) {
+    return (_jsx("div", { "aria-label": label, className: cx('sw-denomination-grid sw-denomination-tiles', className), role: "group", children: rows.map((row) => {
             const labelled = showsRowLabel(rows.length, row);
             const named = namesRow(rows.length, row, label);
             // A named section is a region; role="group" keeps the name without
@@ -32,7 +33,7 @@ export function DenominationTiles({ label, columns, rows, rowRole, subtotal, zer
                             const amount = subtotal && cell !== null && cell !== 0
                                 ? subtotal(cell, column)
                                 : null;
-                            return (_jsxs("li", { className: cx('sw-denomination-tile', ...denominationCellToneClassNames(row.cellTones?.[index])), 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));
+                            return (_jsxs("li", { className: cx('sw-denomination-tile', ...denominationCellToneClassNames(row.cellTones?.[index])), children: [_jsx("span", { className: "sw-denomination-head", children: _jsx(ColumnHeadText, { column: column }) }), _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/EntryCell.d.ts

@@ -0,0 +1,15 @@
+import { type DenominationGridColumn, type DenominationGridEntry, type DenominationGridRow } from './types.js';
+type EntryCellProps = {
+    row: DenominationGridRow;
+    entry: DenominationGridEntry;
+    column: DenominationGridColumn;
+    index: number;
+};
+/**
+ * One editable count of a strip row: a full-width `Stepper` named by the
+ * row and the column as its header reads ("Counted $1 × 100"), its cap and
+ * message from the entry, and the cell's tone on its border (an accent one
+ * is the Stepper's changed look).
+ */
+export declare function EntryCell({ row, entry, column, index }: EntryCellProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../../class-names.js';
+import { denominationCellToneClassNames } from '../../css/css-denomination-cell-tones.js';
+import { Stepper } from '../Stepper.js';
+import { columnName } from './ColumnHeadText.js';
+/**
+ * One editable count of a strip row: a full-width `Stepper` named by the
+ * row and the column as its header reads ("Counted $1 × 100"), its cap and
+ * message from the entry, and the cell's tone on its border (an accent one
+ * is the Stepper's changed look).
+ */
+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" }) }));
+}

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

@@ -1,8 +1,9 @@
 import { type DenominationGridRow } from './types.js';
 /**
  * A row label's glyph and words, kept on one line: when the words wrap,
- * they wrap beside the glyph, never under it (Teisoro DRW-28). Both the
- * strip and the tiles layouts draw a row label with it.
+ * they wrap beside the glyph, never under it (Teisoro DRW-28). A caption is
+ * a muted line under the words, beside the same glyph. Both the strip and
+ * the tiles layouts draw a row label with it.
  */
 export declare function RowLabelLine({ row }: {
     row: DenominationGridRow;

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

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * A row label's glyph and words, kept on one line: when the words wrap,
- * they wrap beside the glyph, never under it (Teisoro DRW-28). Both the
- * strip and the tiles layouts draw a row label with it.
+ * they wrap beside the glyph, never under it (Teisoro DRW-28). A caption is
+ * a muted line under the words, beside the same glyph. Both the strip and
+ * the tiles layouts draw a row label with it.
  */
 export function RowLabelLine({ row }) {
-    return (_jsxs("span", { className: "sw-denomination-label-line", 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 })] }));
+    const text = _jsx("span", { className: "sw-denomination-label-text", children: row.label });
+    return (_jsxs("span", { className: "sw-denomination-label-line", children: [row.icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-denomination-icon", children: row.icon })) : null, row.caption === undefined ? (text) : (_jsxs("span", { className: "sw-denomination-label-words", children: [text, _jsx("span", { className: "sw-denomination-label-caption", children: row.caption })] }))] }));
 }