@scalewing/react 1.40.0 → 1.41.0

package/dist/components/SegmentedControl.js

@@ -2,11 +2,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useId } from 'react';
 import { cx } from '../class-names.js';
+import { breakpoints } from '../css/breakpoints.js';
 import { segmentedRaisedClass } from '../css/css-segmented-raised.js';
+import { segmentedFullWidthClass, segmentedSizes, segmentedSmClass, } from '../css/css-segmented-sizing.js';
 import { FieldErrorRegion } from './FieldErrorRegion.js';
 import { tabStop } from '../tab-stop.js';
-export const SegmentedControl = forwardRef(function SegmentedControl({ disabled = false, error, items, onChange, required = false, value, variant = 'compact', ...labelProps }, ref) {
+export { segmentedSizes };
+export const SegmentedControl = forwardRef(function SegmentedControl({ disabled = false, error, fullWidthBelow, items, onChange, required = false, size = 'md', value, variant = 'compact', ...labelProps }, ref) {
     const errorId = useId();
+    if (fullWidthBelow !== undefined &&
+        !breakpoints.includes(fullWidthBelow))
+        throw new RangeError(`Unknown SegmentedControl fullWidthBelow: ${String(fullWidthBelow)}`);
+    if (!segmentedSizes.includes(size))
+        throw new RangeError(`Unknown SegmentedControl size: ${String(size)}`);
     const withIcons = items.some((item) => item.icon);
     function onKeyDown(event) {
         if (disabled || (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft')) {
@@ -25,7 +33,7 @@ export const SegmentedControl = forwardRef(function SegmentedControl({ disabled
     }
     // The wrapper is always rendered, so an error that appears later swaps
     // text into a live region that already exists and the group keeps focus.
-    return (_jsxs("div", { className: cx('sw-segmented-field', variant === 'filled' && 'sw-segmented-field-filled'), children: [_jsx("div", { ref: ref, "aria-describedby": error ? errorId : undefined, "aria-disabled": disabled || undefined, "aria-invalid": error ? true : undefined, "aria-required": required || undefined, className: cx('sw-segmented', variant === 'filled' && 'sw-segmented-filled', variant === 'raised' && segmentedRaisedClass, withIcons && 'sw-segmented-with-icons', disabled && 'sw-segmented-disabled'), onKeyDown: onKeyDown, role: "radiogroup", ...labelProps, children: items.map((item) => {
+    return (_jsxs("div", { className: cx('sw-segmented-field', variant === 'filled' && 'sw-segmented-field-filled', fullWidthBelow && segmentedFullWidthClass(fullWidthBelow)), children: [_jsx("div", { ref: ref, "aria-describedby": error ? errorId : undefined, "aria-disabled": disabled || undefined, "aria-invalid": error ? true : undefined, "aria-required": required || undefined, className: cx('sw-segmented', variant === 'filled' && 'sw-segmented-filled', variant === 'raised' && segmentedRaisedClass, withIcons && 'sw-segmented-with-icons', disabled && 'sw-segmented-disabled', size === 'sm' && segmentedSmClass), onKeyDown: onKeyDown, role: "radiogroup", ...labelProps, children: items.map((item) => {
                     const selected = item.id === value;
                     return (_jsxs("button", { "aria-checked": selected, className: cx('sw-segmented-item', selected && 'sw-segmented-item-selected'), disabled: disabled, onClick: () => {
                             if (!selected) {
@@ -34,6 +42,6 @@ export const SegmentedControl = forwardRef(function SegmentedControl({ disabled
                         }, role: "radio", 
                         // Every item stays a tab stop, as each already was outside
                         // Safari: the arrow keys change the value, not the focus.
-                        tabIndex: tabStop, type: "button", children: [item.icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-segmented-item-icon", children: item.icon })) : null, item.label] }, item.id));
+                        tabIndex: tabStop, type: "button", children: [item.icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-segmented-item-icon", children: item.icon })) : null, size === 'sm' ? (_jsx("span", { className: "sw-segmented-item-label", children: item.label })) : (item.label)] }, item.id));
                 }) }), _jsx(FieldErrorRegion, { className: "sw-field-error", id: errorId, message: error })] }));
 });

package/dist/components/Switch.d.ts

@@ -1,8 +1,23 @@
+import { type SwitchCheckedTone, switchCheckedTones, type SwitchLayout, switchLayouts } from '../css/css-switch.js';
+export { switchCheckedTones, switchLayouts, type SwitchCheckedTone, type SwitchLayout, };
 export type SwitchProps = {
     label: string;
     checked: boolean;
     onCheckedChange: (checked: boolean) => void;
     disabled?: boolean;
     description?: string;
+    /**
+     * `leading` (the default) puts the control before its label;
+     * `trailing` puts the label and description first and the control at
+     * the row's end, the row as wide as its column, as a settings list
+     * draws it.
+     */
+    layout?: SwitchLayout;
+    /**
+     * The track's colour while on: `accent` (the default) or `success`, for
+     * a switch whose on state is the healthy one, such as a feature turned
+     * on. The thumb's place says the state either way.
+     */
+    checkedTone?: SwitchCheckedTone;
 };
-export declare function Switch({ label, checked, onCheckedChange, disabled, description, }: SwitchProps): import("react").JSX.Element;
+export declare function Switch({ label, checked, onCheckedChange, disabled, description, layout, checkedTone, }: SwitchProps): import("react").JSX.Element;

package/dist/components/Switch.js

@@ -1,12 +1,23 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useId } from 'react';
+import { cx } from '../class-names.js';
+import { switchCheckedTones, switchLayouts, } from '../css/css-switch.js';
 import { tabStop } from '../tab-stop.js';
-export function Switch({ label, checked, onCheckedChange, disabled = false, description, }) {
+export { switchCheckedTones, switchLayouts, };
+function assertOneOf(values, value, prop) {
+    if (!values.includes(value))
+        throw new RangeError(`Unknown Switch ${prop}: ${String(value)}`);
+}
+export function Switch({ label, checked, onCheckedChange, disabled = false, description, layout = 'leading', checkedTone = 'accent', }) {
+    assertOneOf(switchLayouts, layout, 'layout');
+    assertOneOf(switchCheckedTones, checkedTone, 'checkedTone');
     const labelId = useId();
     const descriptionId = useId();
-    return (_jsxs("label", { className: "sw-switch", children: [_jsxs("span", { className: "sw-switch-control", children: [_jsx("input", { "aria-checked": checked, "aria-describedby": description ? descriptionId : undefined, "aria-labelledby": labelId, checked: checked, className: "sw-switch-input", disabled: disabled, onChange: (event) => {
-                            if (!disabled)
-                                onCheckedChange(event.currentTarget.checked);
-                        }, role: "switch", tabIndex: tabStop, type: "checkbox" }), _jsx("span", { "aria-hidden": "true", className: "sw-switch-track", children: _jsx("span", { className: "sw-switch-thumb" }) })] }), _jsxs("span", { className: "sw-switch-copy", children: [_jsx("span", { className: "sw-switch-label", id: labelId, children: label }), description ? (_jsx("span", { className: "sw-switch-description", id: descriptionId, children: description })) : null] })] }));
+    const control = (_jsxs("span", { className: "sw-switch-control", children: [_jsx("input", { "aria-checked": checked, "aria-describedby": description ? descriptionId : undefined, "aria-labelledby": labelId, checked: checked, className: "sw-switch-input", disabled: disabled, onChange: (event) => {
+                    if (!disabled)
+                        onCheckedChange(event.currentTarget.checked);
+                }, role: "switch", tabIndex: tabStop, type: "checkbox" }), _jsx("span", { "aria-hidden": "true", className: "sw-switch-track", children: _jsx("span", { className: "sw-switch-thumb" }) })] }));
+    const copy = (_jsxs("span", { className: "sw-switch-copy", children: [_jsx("span", { className: "sw-switch-label", id: labelId, children: label }), description ? (_jsx("span", { className: "sw-switch-description", id: descriptionId, children: description })) : null] }));
+    return (_jsx("label", { className: cx('sw-switch', layout === 'trailing' && 'sw-switch-trailing', checkedTone === 'success' && 'sw-switch-success'), children: layout === 'trailing' ? (_jsxs(_Fragment, { children: [copy, control] })) : (_jsxs(_Fragment, { children: [control, copy] })) }));
 }

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

@@ -5,18 +5,26 @@ export type ActionBarSummaryTone = (typeof actionBarSummaryTones)[number];
 export type ActionBarSummary = {
     /** What the figure is, such as "Counted". */
     label: string;
-    /** The figure, formatted by the consumer, such as "$33,790.00". */
+    /**
+     * The figure, formatted by the consumer, such as "$33,790.00". An empty
+     * string (or only spaces) means there is no figure yet, such as before
+     * anything is counted: the summary line is left out and the live region
+     * stays, so the first figure is announced when it arrives.
+     */
     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;
 };
+/** Whether the summary has a figure to show; an empty value has none yet. */
+export declare function hasActionBarSummaryFigure(summary: ActionBarSummary): boolean;
 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.
+ * Nothing while the value is empty.
  */
 export declare function ActionBarSummaryLine({ summary, }: {
     summary: ActionBarSummary;
-}): import("react").JSX.Element;
+}): import("react").JSX.Element | null;

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

@@ -4,9 +4,15 @@ export const actionBarSummaryTones = ['default', 'danger', 'success'];
 function isBlank(text) {
     return typeof text !== 'string' || !text.trim();
 }
+/** Whether the summary has a figure to show; an empty value has none yet. */
+export function hasActionBarSummaryFigure(summary) {
+    return !isBlank(summary.value);
+}
 export function assertActionBarSummary(summary) {
-    if (isBlank(summary.label) || isBlank(summary.value))
-        throw new RangeError('ActionBar summary needs a label and a value');
+    if (isBlank(summary.label))
+        throw new RangeError('ActionBar summary needs a label');
+    if (typeof summary.value !== 'string')
+        throw new RangeError('ActionBar summary value must be a string');
     if (summary.detail !== undefined && isBlank(summary.detail))
         throw new RangeError('ActionBar summary detail must not be empty');
     if (summary.tone !== undefined &&
@@ -16,8 +22,11 @@ export function assertActionBarSummary(summary) {
 /**
  * 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.
+ * Nothing while the value is empty.
  */
 export function ActionBarSummaryLine({ summary, }) {
+    if (!hasActionBarSummaryFigure(summary))
+        return null;
     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/date-field/CalendarEntryButton.d.ts

@@ -0,0 +1,24 @@
+import { type Ref } from 'react';
+import { type CalendarPopup } from './use-calendar-popup.js';
+export type CalendarEntryButtonProps = {
+    id: string;
+    /** The field's label element, which names the button with its words. */
+    labelId: string;
+    describedBy: string | undefined;
+    value: string;
+    locale: string;
+    /** What an empty field shows, such as "Choose a day". */
+    emptyText: string;
+    disabled: boolean;
+    invalid: boolean;
+    buttonRef: Ref<HTMLButtonElement>;
+    trigger: CalendarPopup['trigger'];
+    onPress: () => void;
+};
+/**
+ * DateField's calendar entry: a neutral Button showing the calendar glyph
+ * and the chosen day, or the words that ask for one, that opens the
+ * calendar. It is named by the field's label and its own words ("Hire date
+ * Choose a day", "Hire date Oct 6, 2026") and described as the field is.
+ */
+export declare function CalendarEntryButton({ id, labelId, describedBy, value, locale, emptyText, disabled, invalid, buttonRef, trigger, onPress, }: CalendarEntryButtonProps): import("react").JSX.Element;

package/dist/components/date-field/CalendarEntryButton.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { formatDateMedium } from '../../calendar-labels.js';
+import { cx } from '../../class-names.js';
+import { Button } from '../Button.js';
+import { DateFieldGlyph } from './DateFieldGlyph.js';
+/**
+ * DateField's calendar entry: a neutral Button showing the calendar glyph
+ * and the chosen day, or the words that ask for one, that opens the
+ * calendar. It is named by the field's label and its own words ("Hire date
+ * Choose a day", "Hire date Oct 6, 2026") and described as the field is.
+ */
+export function CalendarEntryButton({ id, labelId, describedBy, value, locale, emptyText, disabled, invalid, buttonRef, trigger, onPress, }) {
+    const textId = useId();
+    return (_jsxs(Button, { ...trigger, "aria-describedby": describedBy, "aria-labelledby": `${labelId} ${textId}`, className: cx('sw-date-field-calendar-entry', invalid && 'sw-date-field-calendar-entry-invalid'), disabled: disabled, id: id, onPress: onPress, ref: buttonRef, variant: "neutral", children: [_jsx(DateFieldGlyph, { name: "calendar" }), _jsx("span", { className: "sw-date-field-calendar-entry-text", id: textId, children: value ? formatDateMedium(value, locale) : emptyText })] }));
+}

package/dist/components/date-field/TypedEntry.d.ts

@@ -0,0 +1,26 @@
+import { type Ref } from 'react';
+import { type CalendarPopup } from './use-calendar-popup.js';
+import { type DateEntry } from './use-date-entry.js';
+export type TypedEntryProps = {
+    id: string;
+    /** The field's label element, which describes the calendar button. */
+    labelId: string;
+    describedBy: string | undefined;
+    entry: DateEntry;
+    placeholder: string;
+    /** The calendar button's name, `labels.chooseDate`. */
+    toggleName: string;
+    disabled: boolean;
+    required: boolean;
+    invalid: boolean;
+    controlRef: Ref<HTMLDivElement>;
+    inputRef: Ref<HTMLInputElement>;
+    buttonRef: Ref<HTMLButtonElement>;
+    trigger: CalendarPopup['trigger'];
+    onToggle: () => void;
+};
+/**
+ * DateField's typed entry: the text input in the locale's order, checked
+ * on blur and Enter, and the calendar button inside its end.
+ */
+export declare function TypedEntry({ id, labelId, describedBy, entry, placeholder, toggleName, disabled, required, invalid, controlRef, inputRef, buttonRef, trigger, onToggle, }: TypedEntryProps): import("react").JSX.Element;

package/dist/components/date-field/TypedEntry.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tabStop } from '../../tab-stop.js';
+import { DateFieldGlyph } from './DateFieldGlyph.js';
+/**
+ * DateField's typed entry: the text input in the locale's order, checked
+ * on blur and Enter, and the calendar button inside its end.
+ */
+export function TypedEntry({ id, labelId, describedBy, entry, placeholder, toggleName, disabled, required, invalid, controlRef, inputRef, buttonRef, trigger, onToggle, }) {
+    return (_jsxs("div", { className: "sw-date-field-control", ref: controlRef, children: [_jsx("input", { "aria-describedby": describedBy, "aria-invalid": invalid, autoComplete: "off", className: "sw-date-field-input", disabled: disabled, id: id, onBlur: entry.check, onChange: (event) => entry.change(event.currentTarget.value), onKeyDown: (event) => {
+                    if (event.key === 'Enter')
+                        entry.check();
+                }, placeholder: placeholder, ref: inputRef, required: required, spellCheck: false, type: "text", value: entry.text }), _jsxs("button", { ...trigger, "aria-describedby": labelId, className: "sw-date-field-button", disabled: disabled, onClick: onToggle, ref: buttonRef, tabIndex: tabStop, type: "button", children: [_jsx("span", { className: "sw-sr-only", children: toggleName }), _jsx(DateFieldGlyph, { name: "calendar" })] })] }));
+}

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

@@ -0,0 +1,16 @@
+import { type DenominationGridRow } from './types.js';
+type CountCellProps = {
+    row: DenominationGridRow;
+    index: number;
+    zeroLabel: string;
+    /** More classes for the cell, such as the transposed layout's row look. */
+    className?: string;
+};
+/**
+ * One count, read-only: the zero label, a signed delta, and the cell's tone.
+ * A signed row's positive count is success; a negative count is danger
+ * unless its row's `negativeAppearance` is `plain`. The value has its own
+ * box, which the `pill` tone appearance fills.
+ */
+export declare function CountCell({ row, index, zeroLabel, className, }: CountCellProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx } 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';
+/**
+ * One count, read-only: the zero label, a signed delta, and the cell's tone.
+ * A signed row's positive count is success; a negative count is danger
+ * unless its row's `negativeAppearance` is `plain`. The value has its own
+ * box, which the `pill` tone appearance fills.
+ */
+export function CountCell({ row, index, zeroLabel, className, }) {
+    const view = denominationCellView(row.cells[index] ?? null, row.signed ?? false, zeroLabel);
+    return (_jsx("td", { className: cx('sw-denomination-cell', `sw-denomination-cell-${view.state}`, row.signed && 'sw-denomination-cell-signed', row.negativeAppearance === 'plain' && 'sw-denomination-cell-plain', ...denominationCellToneClassNames(row.cellTones?.[index]), className), children: _jsx("span", { className: "sw-denomination-cell-value", children: view.text }) }));
+}

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

@@ -1,9 +1,12 @@
+import { type CSSProperties } from 'react';
 import { type DenominationGridProps } from './types.js';
 type StripProps = Required<Pick<DenominationGridProps, 'label' | 'columns' | 'rows' | 'zeroLabel'>> & Pick<DenominationGridProps, 'totalLabel' | 'labelWidth'> & {
     /** 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;
+    /** The entry counts' room (`countDigits`), if set. */
+    countStyle?: CSSProperties;
 };
-export declare function DenominationStrip({ className, framed, label, columns, rows, zeroLabel, totalLabel, labelWidth, }: StripProps): import("react").JSX.Element;
+export declare function DenominationStrip({ className, countStyle, framed, label, columns, rows, zeroLabel, totalLabel, labelWidth, }: StripProps): import("react").JSX.Element;
 export {};

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

@@ -18,7 +18,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, framed, label, columns, rows, zeroLabel, totalLabel, labelWidth, }) {
+export function DenominationStrip({ className, countStyle, framed, label, columns, rows, zeroLabel, totalLabel, labelWidth, }) {
     const idPrefix = useId();
     const hasTotals = rows.some((row) => row.total !== undefined);
     // An aligned strip sizes its columns from the region's width; it needs
@@ -29,5 +29,5 @@ export function DenominationStrip({ className, framed, label, columns, rows, zer
             '--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', 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, rowIndex) => (_jsx(StripRow, { columns: columns, hasTotals: hasTotals, idPrefix: idPrefix, row: row, rowIndex: rowIndex, 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 || countStyle ? { ...aligned, ...countStyle } : undefined, 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, rowIndex) => (_jsx(StripRow, { columns: columns, hasTotals: hasTotals, idPrefix: idPrefix, row: row, rowIndex: rowIndex, zeroLabel: zeroLabel }, row.id))) })] }) }));
 }

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

@@ -6,6 +6,8 @@ type EntryCellProps = {
     index: number;
     /** The value cell under this count, which describes it, if any. */
     describedBy?: string;
+    /** More classes for the cell, such as the transposed layout's row look. */
+    className?: string;
 };
 /**
  * One editable count of a strip row: a full-width `Stepper` named by the
@@ -13,5 +15,5 @@ type EntryCellProps = {
  * 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, describedBy, }: EntryCellProps): import("react").JSX.Element;
+export declare function EntryCell({ row, entry, column, index, describedBy, className, }: EntryCellProps): import("react").JSX.Element;
 export {};

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

@@ -9,8 +9,8 @@ import { columnName } from './ColumnHeadText.js';
  * 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, describedBy, }) {
+export function EntryCell({ row, entry, column, index, describedBy, className, }) {
     const max = entry.max?.[index] ?? undefined;
     const tone = row.cellTones?.[index];
-    return (_jsx("td", { className: cx('sw-denomination-entry', ...denominationCellToneClassNames(tone)), children: _jsx(Stepper, { "aria-describedby": describedBy, 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" }) }));
+    return (_jsx("td", { className: cx('sw-denomination-entry', ...denominationCellToneClassNames(tone), className), children: _jsx(Stepper, { "aria-describedby": describedBy, 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

@@ -1,19 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 { CountCell } from './CountCell.js';
 import { EntryCell } from './EntryCell.js';
 import { RowLabelLine } from './RowLabelLine.js';
 import { StripTotalCell, StripTotalInline } from './StripTotal.js';
 import { hasValue, StripValueRow, valueCellId } from './StripValueRow.js';
-/**
- * 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: _jsx("span", { className: "sw-denomination-cell-value", children: view.text }) }));
-}
 /**
  * One strip row: its pinned label (with the phone total under it), a count
  * per column, read-only or entered, and its total. With a `valueRow`, the

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

@@ -0,0 +1,17 @@
+import { type CSSProperties } from 'react';
+import { type DenominationGridProps } from './types.js';
+type TransposedProps = Required<Pick<DenominationGridProps, 'label' | 'columns' | 'rows' | 'zeroLabel'>> & Pick<DenominationGridProps, 'totalLabel'> & {
+    /** The grid's appearance classes (cell tones), if any. */
+    className?: string;
+    /** The entry counts' room, as the strip's. */
+    style?: CSSProperties;
+};
+/**
+ * A strip drawn for a phone: a row per denomination (its label and
+ * caption), a column per grid row (its counts, read-only or entered, then
+ * its value line's values), and the totals in a last row named by
+ * `totalLabel`. Names, entry, tones and the zero label are the strip's;
+ * the denomination column stays in view while the columns scroll under it.
+ */
+export declare function TransposedStrip({ className, style, label, columns, rows, zeroLabel, totalLabel, }: TransposedProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,43 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useId } from 'react';
+import { cx } from '../../class-names.js';
+import { ScrollRegion } from '../ScrollRegion.js';
+import { ColumnHeadText } from './ColumnHeadText.js';
+import { CountCell } from './CountCell.js';
+import { EntryCell } from './EntryCell.js';
+import { RowLabelLine } from './RowLabelLine.js';
+import { hasValue, valueCellId } from './StripValueRow.js';
+/** The look a grid row lends each of its cells in a column. */
+function columnClass(row) {
+    return (cx(row.emphasis === 'quiet' && 'sw-denomination-transposed-quiet', row.disabled && 'sw-denomination-transposed-disabled') || undefined);
+}
+/**
+ * A grid row's heads: its label (glyph, words, caption), then its value
+ * line's. A disabled row says so on its heads (a column header may be
+ * `aria-disabled`), as the strip's row does, since a column has no element
+ * of its own.
+ */
+function RowHeads({ row }) {
+    return (_jsxs(_Fragment, { children: [_jsx("th", { "aria-disabled": row.disabled || undefined, className: cx('sw-denomination-head sw-denomination-transposed-head', columnClass(row)), scope: "col", children: _jsx(RowLabelLine, { row: row }) }), row.valueRow ? (_jsx("th", { "aria-disabled": row.disabled || undefined, "aria-label": `${row.label} ${row.valueRow.label}`, className: cx('sw-denomination-head sw-denomination-transposed-head', columnClass(row)), scope: "col", children: row.valueRow.label })) : null] }));
+}
+/** A grid row's total: under its value line when it has one, else under its counts. */
+function RowTotal({ row }) {
+    const total = (_jsx("td", { className: cx('sw-denomination-transposed-total', `sw-denomination-row-${row.tone ?? 'neutral'}`, columnClass(row)), children: row.total ?? '' }));
+    return row.valueRow ? (_jsxs(_Fragment, { children: [_jsx("td", { className: columnClass(row) }), total] })) : (total);
+}
+/**
+ * A strip drawn for a phone: a row per denomination (its label and
+ * caption), a column per grid row (its counts, read-only or entered, then
+ * its value line's values), and the totals in a last row named by
+ * `totalLabel`. Names, entry, tones and the zero label are the strip's;
+ * the denomination column stays in view while the columns scroll under it.
+ */
+export function TransposedStrip({ className, style, label, columns, rows, zeroLabel, totalLabel, }) {
+    const idPrefix = useId();
+    const hasTotals = rows.some((row) => row.total !== undefined);
+    return (_jsx(ScrollRegion, { "aria-label": label, className: "sw-denomination-scroll sw-denomination-scroll-transposed", children: _jsxs("table", { className: cx('sw-denomination-grid sw-denomination-transposed', rows.some((row) => row.entry) && 'sw-denomination-transposed-entry', className), style: style, children: [_jsx("caption", { className: "sw-sr-only", children: label }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("td", { className: "sw-denomination-corner" }), rows.map((row) => (_jsx(RowHeads, { row: row }, row.id)))] }) }), _jsx("tbody", { children: columns.map((column, index) => (_jsxs("tr", { className: "sw-denomination-row", children: [_jsx("th", { className: "sw-denomination-transposed-label", scope: "row", children: _jsx(ColumnHeadText, { column: column }) }), rows.map((row, rowIndex) => {
+                                const value = row.valueRow?.cells[index];
+                                const valueId = valueCellId(idPrefix, rowIndex, index);
+                                return (_jsxs(Fragment, { children: [row.entry ? (_jsx(EntryCell, { className: columnClass(row), column: column, describedBy: hasValue(value) ? valueId : undefined, entry: row.entry, index: index, row: row })) : (_jsx(CountCell, { className: columnClass(row), index: index, row: row, zeroLabel: zeroLabel })), row.valueRow ? (_jsx("td", { className: cx('sw-denomination-transposed-value', columnClass(row)), id: valueId, children: hasValue(value) ? value : '' })) : null] }, row.id));
+                            })] }, column.key))) }), hasTotals ? (_jsx("tfoot", { children: _jsxs("tr", { className: "sw-denomination-row", children: [totalLabel === undefined ? (_jsx("td", { className: "sw-denomination-corner" })) : (_jsx("th", { className: "sw-denomination-transposed-label", scope: "row", children: totalLabel })), rows.map((row) => (_jsx(RowTotal, { row: row }, row.id)))] }) })) : null] }) }));
+}

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

@@ -8,6 +8,15 @@ import { type StepperLimitAppearance } from '../Stepper.js';
 export type { DenominationCellToneAppearance, DenominationGridFrame, DenominationLabelWidth, DenominationTotalEmphasis, };
 export type DenominationGridTone = BadgeTone;
 export type DenominationGridLayout = 'strip' | 'tiles';
+/** How a negative count reads: in the danger colour, or plain text. */
+export declare const denominationNegativeAppearances: readonly ["danger", "plain"];
+export type DenominationGridNegativeAppearance = (typeof denominationNegativeAppearances)[number];
+/**
+ * The widths below which a strip is drawn transposed: the denominations as
+ * rows, the grid's rows as columns.
+ */
+export declare const denominationTransposeBreakpoints: readonly ["md", "lg"];
+export type DenominationTransposeBreakpoint = (typeof denominationTransposeBreakpoints)[number];
 /**
  * What a named tiles row is to assistive technology: a `region` (a landmark,
  * the default) or a `group` (named, but not in the landmark list).
@@ -77,6 +86,13 @@ export type DenominationGridRow = {
     cellTones?: readonly (DenominationGridTone | null)[];
     /** A muted line under the label, such as "from the customer". */
     caption?: string;
+    /**
+     * How a negative count reads: `danger` (the default) in the danger
+     * colour; `plain` in the text colour, with its minus sign, for counts
+     * that go out by design, such as bills paid out (cash out is never an
+     * error, so never red).
+     */
+    negativeAppearance?: DenominationGridNegativeAppearance;
     /** The `strip` layout only. */
     emphasis?: DenominationGridRowEmphasis;
     /**
@@ -164,4 +180,19 @@ export type DenominationGridProps = {
      * changed count in accent. Entry counts and tiles keep their tone border.
      */
     cellToneAppearance?: DenominationCellToneAppearance;
+    /**
+     * Below this breakpoint (`md` or `lg`) the strip is drawn transposed,
+     * for a phone: one row per denomination (its label and caption) and one
+     * column per grid row (its label over its counts, entry steppers or
+     * value line), the totals in a last row. Its names, entry, cell tones
+     * and zero label are the strip's. The `strip` layout only.
+     */
+    transposeBelow?: DenominationTransposeBreakpoint;
+    /**
+     * The digits an entry count holds without clipping, from 3 (the
+     * default room) to 6: a column of steppers keeps that many digits'
+     * width before the strip scrolls, such as 4 for a count in the
+     * thousands in a grid of seven columns. Entry rows only.
+     */
+    countDigits?: number;
 };

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

@@ -1 +1,7 @@
-export {};
+/** How a negative count reads: in the danger colour, or plain text. */
+export const denominationNegativeAppearances = ['danger', 'plain'];
+/**
+ * The widths below which a strip is drawn transposed: the denominations as
+ * rows, the grid's rows as columns.
+ */
+export const denominationTransposeBreakpoints = ['md', 'lg'];

package/dist/components/denomination-grid/validate-options.d.ts

@@ -0,0 +1,7 @@
+import { type DenominationGridLayout, type DenominationGridRow } from './types.js';
+/**
+ * The grid's later options: a known negative appearance per row, a known
+ * transpose breakpoint on a strip only, and a whole count of digits (3 to
+ * 6) for a grid with entry rows.
+ */
+export declare function assertDenominationOptions(layout: DenominationGridLayout, rows: readonly DenominationGridRow[], transposeBelow: unknown, countDigits: unknown): void;

package/dist/components/denomination-grid/validate-options.js

@@ -0,0 +1,27 @@
+import { denominationNegativeAppearances, denominationTransposeBreakpoints, } from './types.js';
+/** The digits an entry count can be given room for. */
+const countDigitsRange = { min: 3, max: 6 };
+/**
+ * The grid's later options: a known negative appearance per row, a known
+ * transpose breakpoint on a strip only, and a whole count of digits (3 to
+ * 6) for a grid with entry rows.
+ */
+export function assertDenominationOptions(layout, rows, transposeBelow, countDigits) {
+    if (rows.some((row) => row.negativeAppearance !== undefined &&
+        !denominationNegativeAppearances.includes(row.negativeAppearance)))
+        throw new RangeError("negativeAppearance must be 'danger' or 'plain'");
+    if (transposeBelow !== undefined) {
+        if (!denominationTransposeBreakpoints.includes(transposeBelow))
+            throw new RangeError("transposeBelow must be 'md' or 'lg'");
+        if (layout !== 'strip')
+            throw new RangeError('transposeBelow needs the strip layout');
+    }
+    if (countDigits !== undefined) {
+        if (!Number.isInteger(countDigits) ||
+            countDigits < countDigitsRange.min ||
+            countDigits > countDigitsRange.max)
+            throw new RangeError('countDigits must be a whole number from 3 to 6');
+        if (!rows.some((row) => row.entry))
+            throw new RangeError('countDigits needs entry rows');
+    }
+}

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

@@ -2,13 +2,14 @@ import { type ReactNode } from 'react';
 import { type ActionBarSummary } from '../action-bar/ActionBarSummary.js';
 type DialogFooterProps = {
     summary?: ActionBarSummary;
+    status?: ReactNode;
     children?: ReactNode;
 };
 /**
- * The dialog's pinned footer: the summary figure (in a polite live region,
- * as in ActionBar) at the start, the actions at the end. Rendered only when
- * the dialog has a footer or a summary, and then always with its status
- * region, so a new figure is announced.
+ * The dialog's pinned footer: the summary figure and the status line (in
+ * one polite live region, as in ActionBar) at the start, the actions at the
+ * end. Rendered only when the dialog has a footer, a summary or a status,
+ * and then always with its live region, so a new figure is announced.
  */
-export declare function DialogFooter({ children, summary }: DialogFooterProps): import("react").JSX.Element;
+export declare function DialogFooter({ children, status, summary }: DialogFooterProps): import("react").JSX.Element;
 export {};

package/dist/components/dialog/DialogFooter.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ActionBarSummaryLine, } from '../action-bar/ActionBarSummary.js';
 /**
- * The dialog's pinned footer: the summary figure (in a polite live region,
- * as in ActionBar) at the start, the actions at the end. Rendered only when
- * the dialog has a footer or a summary, and then always with its status
- * region, so a new figure is announced.
+ * The dialog's pinned footer: the summary figure and the status line (in
+ * one polite live region, as in ActionBar) at the start, the actions at the
+ * end. Rendered only when the dialog has a footer, a summary or a status,
+ * and then always with its live region, so a new figure is announced.
  */
-export function DialogFooter({ children, summary }) {
-    return (_jsxs("div", { className: "sw-dialog-footer", children: [_jsx("div", { className: "sw-dialog-footer-status", role: "status", children: summary ? _jsx(ActionBarSummaryLine, { summary: summary }) : null }), children ? (_jsx("div", { className: "sw-dialog-footer-actions", children: children })) : null] }));
+export function DialogFooter({ children, status, summary }) {
+    return (_jsxs("div", { className: "sw-dialog-footer", children: [_jsxs("div", { className: "sw-dialog-footer-status", role: "status", children: [summary ? _jsx(ActionBarSummaryLine, { summary: summary }) : null, status !== undefined ? (_jsx("span", { className: "sw-dialog-footer-note", children: status })) : null] }), children ? (_jsx("div", { className: "sw-dialog-footer-actions", children: children })) : null] }));
 }

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

@@ -0,0 +1,24 @@
+import { type Breakpoint } from '../../css/breakpoints.js';
+import { type DialogAppearance } from '../../css/css-dialog-banded.js';
+import { type ThemeCanvas } from '../../css/css-canvas-grouped.js';
+import { type ActionBarSummary } from '../action-bar/ActionBarSummary.js';
+export declare const dialogSizes: readonly ["md", "lg", "xl"];
+/**
+ * `md` is the reading width (32rem) for a message or a short form; `lg`
+ * (56rem) holds a row of six fields or a data grid without folding it;
+ * `xl` (65rem) holds a grid of six count columns with its labels and total.
+ */
+export type DialogSize = (typeof dialogSizes)[number];
+/** `alertdialog` for a dialog that interrupts to warn, such as an idle sign-out. */
+export type DialogRole = 'dialog' | 'alertdialog';
+export type DialogChecks = {
+    size: DialogSize;
+    role: DialogRole | undefined;
+    description: string | undefined;
+    summary: ActionBarSummary | undefined;
+    appearance: DialogAppearance;
+    canvas: ThemeCanvas;
+    sheetBelow: Breakpoint | undefined;
+    sheetGrabber: boolean;
+};
+export declare function assertDialogProps({ appearance, canvas, description, role, sheetBelow, sheetGrabber, size, summary, }: DialogChecks): void;