@scalewing/react 1.39.0 → 1.41.0

package/dist/components/date-range/RangeMonths.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from 'react';
+import { monthTitle } from '../../calendar-labels.js';
+import { firstOfMonth, lastOfMonth, monthsBetween, sameDayIn, shiftMonth, } from '../../calendar-month.js';
+import { firstShownMonth, shownMonths, } from '../../date-range-view.js';
+import { clampDateOnly } from '../../date-only.js';
+import { CalendarGrid } from '../calendar/CalendarGrid.js';
+import { MonthStep } from '../calendar/MonthStep.js';
+import { useGridFocus } from '../calendar/use-grid-focus.js';
+/** `focusDate` moved into the shown months, after a month step. */
+function keepInView(focusDate, first, count) {
+    const months = shownMonths(first, count);
+    const last = months[months.length - 1] ?? first;
+    if (focusDate < firstOfMonth(first))
+        return sameDayIn(first, focusDate);
+    if (focusDate > lastOfMonth(last))
+        return sameDayIn(last, focusDate);
+    return focusDate;
+}
+/**
+ * One month, or two side by side, of the range being picked: each a
+ * labelled grid with one roving day across them, the previous step before
+ * the first month and the next step after the last. It opens on the
+ * range's end, and the months follow the focus day.
+ */
+export function RangeMonths({ count, draft, onPress, latest, min, max, locale, today, weekStartsOn, labels, focusOnMount, }) {
+    const id = useId();
+    const containerRef = useRef(null);
+    const [rawFocusDate, setFocusDate] = useState(draft.range.end);
+    // Clamped on every render, so new bounds while open move it inside.
+    const focusDate = clampDateOnly(rawFocusDate, min, max);
+    const [first, setFirst] = useState(() => firstShownMonth(focusDate, count, undefined, min));
+    const shown = firstShownMonth(focusDate, count, first, min);
+    if (monthsBetween(first, shown) !== 0)
+        setFirst(shown);
+    const { requestFocus, focusHandlers } = useGridFocus(containerRef, focusDate, focusOnMount);
+    function stepBy(delta) {
+        const nextFirst = shiftMonth(shown, delta);
+        setFirst(nextFirst);
+        setFocusDate(clampDateOnly(keepInView(focusDate, nextFirst, count), min, max));
+    }
+    const months = shownMonths(shown, count);
+    return (_jsxs("div", { className: "sw-date-range-months", ref: containerRef, ...focusHandlers, children: [_jsx("div", { "aria-live": "polite", className: "sw-sr-only", children: months.map((month) => (_jsx("div", { children: monthTitle(month, locale) }, `${month.year}-${month.month}`))) }), months.map((month, index) => {
+                const titleId = `${id}-${index}`;
+                return (_jsxs("div", { className: "sw-date-range-month", children: [_jsxs("div", { className: "sw-date-range-month-header", children: [index === 0 ? (_jsx(MonthStep, { delta: -1, label: labels.previousMonth, max: max, min: min, month: month, onMonthChange: () => stepBy(-1) })) : null, _jsx("div", { className: "sw-date-range-month-title", id: titleId, children: monthTitle(month, locale) }), index === months.length - 1 ? (_jsx(MonthStep, { delta: 1, label: labels.nextMonth, max: max, min: min, month: month, onMonthChange: () => stepBy(1) })) : null] }), _jsx(CalendarGrid, { blankOutside: true, focusDate: focusDate, latest: latest, locale: locale, max: max, min: min, month: month, onFocusDate: setFocusDate, onMoveFocus: (next) => {
+                                requestFocus();
+                                setFocusDate(next);
+                            }, onSelect: onPress, selected: draft.range, titleId: titleId, today: today, weekStartsOn: weekStartsOn })] }, titleId));
+            })] }));
+}

package/dist/components/date-range/RangePresets.d.ts

@@ -0,0 +1,16 @@
+import { type DateRangePreset } from '../../date-range-input.js';
+export type RangePresetsProps = {
+    presets: readonly DateRangePreset[];
+    /** Names the group, such as "Quick ranges". */
+    label: string;
+    /** The preset whose range is the one shown, if any. */
+    pressedId: string | undefined;
+    onChoose: (preset: DateRangePreset) => void;
+    /** `list` beside the months; `row` above one month, scrolling sideways. */
+    layout: 'list' | 'row';
+};
+/**
+ * DateRangeButton's presets: a named group of buttons, the one matching
+ * the range shown `aria-pressed`. A press applies its range at once.
+ */
+export declare function RangePresets({ presets, label, pressedId, onChoose, layout, }: RangePresetsProps): import("react").JSX.Element;

package/dist/components/date-range/RangePresets.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../../class-names.js';
+import { tabStop } from '../../tab-stop.js';
+/**
+ * DateRangeButton's presets: a named group of buttons, the one matching
+ * the range shown `aria-pressed`. A press applies its range at once.
+ */
+export function RangePresets({ presets, label, pressedId, onChoose, layout, }) {
+    return (_jsx("div", { "aria-label": label, className: cx('sw-date-range-presets', layout === 'row' && 'sw-date-range-presets-row'), role: "group", children: presets.map((preset) => (_jsx("button", { "aria-pressed": preset.id === pressedId, className: "sw-date-range-preset", onClick: () => onChoose(preset), tabIndex: tabStop, type: "button", children: preset.label }, preset.id))) }));
+}

package/dist/components/date-range/RangeSummary.d.ts

@@ -0,0 +1,15 @@
+export type RangeSummaryProps = {
+    /** The range being picked, with its weekdays. */
+    line: string;
+    /** Its length, such as "7 days". */
+    count: string;
+    /** How to pick, after the length; left out where the page shows it elsewhere. */
+    hint?: string;
+    /** Keep the words for assistive technology only, where the page shows them elsewhere. */
+    visuallyHidden?: boolean;
+};
+/**
+ * The range being picked, in a polite live region so each press is heard:
+ * the range on its own line, then its length and the hint.
+ */
+export declare function RangeSummary({ line, count, hint, visuallyHidden, }: RangeSummaryProps): import("react").JSX.Element;

package/dist/components/date-range/RangeSummary.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * The range being picked, in a polite live region so each press is heard:
+ * the range on its own line, then its length and the hint.
+ */
+export function RangeSummary({ line, count, hint, visuallyHidden = false, }) {
+    const status = (_jsxs("div", { "aria-atomic": "true", className: "sw-date-range-status", role: "status", children: [_jsx("span", { className: "sw-date-range-line", children: line }), ' ', _jsx("span", { className: "sw-date-range-count", children: count })] }));
+    if (visuallyHidden)
+        return _jsx("div", { className: "sw-sr-only", children: status });
+    return (_jsxs("div", { className: "sw-date-range-summary", children: [status, hint === undefined ? null : (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: "sw-date-range-separator", children: ' · ' }), _jsx("span", { className: "sw-date-range-hint", children: hint })] }))] }));
+}

package/dist/components/date-range/range-panel-props.d.ts

@@ -0,0 +1,31 @@
+import { type RefObject } from 'react';
+import { type WeekStart } from '../../calendar-month.js';
+import { type RangeDraft } from '../../date-range-draft.js';
+import { type DateRangePreset } from '../../date-range-input.js';
+import { type DateRangeButtonLabels } from '../../date-range-labels.js';
+/** What both of DateRangeButton's presentations, popover and sheet, draw. */
+export type RangePanelProps = {
+    id: string;
+    /** Names the popover or titles the sheet. */
+    label: string;
+    labels: DateRangeButtonLabels;
+    draft: RangeDraft;
+    onPress: (day: string) => void;
+    presets: readonly DateRangePreset[];
+    pressedPresetId: string | undefined;
+    onChoosePreset: (preset: DateRangePreset) => void;
+    /** Applies the draft. */
+    onApply: () => void;
+    /** Keeps the value; `true` returns focus to the button. */
+    onCancel: (restoreFocus: boolean) => void;
+    latest: string | undefined;
+    min?: string;
+    max?: string;
+    locale: string;
+    today: string;
+    weekStartsOn: WeekStart;
+    buttonRef: RefObject<HTMLButtonElement | null>;
+    /** The draft's words: the range with weekdays, and its length. */
+    line: string;
+    count: string;
+};

package/dist/components/date-range/range-panel-props.js

@@ -0,0 +1 @@
+export {};

package/dist/components/date-range/use-range-popup.d.ts

@@ -0,0 +1,21 @@
+import { type RefObject } from 'react';
+import { type RangeDraft } from '../../date-range-draft.js';
+import { type DateOnlyRange } from '../../date-only.js';
+export type RangePopup = {
+    buttonRef: RefObject<HTMLButtonElement | null>;
+    id: string;
+    shown: boolean;
+    toggle: () => void;
+    draft: RangeDraft;
+    press: (day: string) => void;
+    /** Closes and gives `range` to `onChange` when it is a new range. */
+    apply: (range: DateOnlyRange) => void;
+    /** Closes and keeps the value; `true` returns focus to the button. */
+    cancel: (restoreFocus: boolean) => void;
+};
+/**
+ * DateRangeButton's open state and the range being picked. Opening starts
+ * from the value; a new value while open starts over from it. Disabling
+ * closes it for good.
+ */
+export declare function useRangePopup(value: DateOnlyRange, disabled: boolean, onChange: (value: DateOnlyRange) => void): RangePopup;

package/dist/components/date-range/use-range-popup.js

@@ -0,0 +1,53 @@
+import { useId, useLayoutEffect, useRef, useState, } from 'react';
+import { pressDay, sameRange, settledDraft, } from '../../date-range-draft.js';
+/**
+ * DateRangeButton's open state and the range being picked. Opening starts
+ * from the value; a new value while open starts over from it. Disabling
+ * closes it for good.
+ */
+export function useRangePopup(value, disabled, onChange) {
+    const buttonRef = useRef(null);
+    const id = useId();
+    const [open, setOpen] = useState(false);
+    const [draft, setDraft] = useState(() => settledDraft(value));
+    const [openedWith, setOpenedWith] = useState(value);
+    if (!sameRange(openedWith, value)) {
+        setOpenedWith(value);
+        setDraft(settledDraft(value));
+    }
+    if (disabled && open)
+        setOpen(false);
+    const shown = open && !disabled;
+    // Focus returns once the calendar is gone: while the sheet is still a
+    // modal dialog, the page behind it, the button included, is inert.
+    const restoreFocus = useRef(false);
+    useLayoutEffect(() => {
+        if (shown || !restoreFocus.current)
+            return;
+        restoreFocus.current = false;
+        buttonRef.current?.focus();
+    }, [shown]);
+    function cancel(restore) {
+        restoreFocus.current = restore;
+        setOpen(false);
+    }
+    return {
+        buttonRef,
+        id,
+        shown,
+        toggle: () => {
+            if (shown)
+                return cancel(true);
+            setDraft(settledDraft(value));
+            setOpen(true);
+        },
+        draft,
+        press: (day) => setDraft((current) => pressDay(current, day)),
+        apply: (range) => {
+            cancel(true);
+            if (!sameRange(range, value))
+                onChange(range);
+        },
+        cancel,
+    };
+}

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;

package/dist/components/dialog/validate.js

@@ -0,0 +1,23 @@
+import { dialogAppearances, } from '../../css/css-dialog-banded.js';
+import { themeCanvases, } from '../../css/css-canvas-grouped.js';
+import { assertActionBarSummary, } from '../action-bar/ActionBarSummary.js';
+export const dialogSizes = ['md', 'lg', 'xl'];
+const dialogRoles = ['dialog', 'alertdialog'];
+function oneOf(values, value, prop) {
+    if (!values.includes(value))
+        throw new RangeError(`Unknown Dialog ${prop}: ${String(value)}`);
+}
+export function assertDialogProps({ appearance, canvas, description, role, sheetBelow, sheetGrabber, size, summary, }) {
+    oneOf(dialogSizes, size, 'size');
+    oneOf(dialogAppearances, appearance, 'appearance');
+    oneOf(themeCanvases, canvas, 'canvas');
+    if (role !== undefined)
+        oneOf(dialogRoles, role, 'role');
+    if (description !== undefined &&
+        (typeof description !== 'string' || !description.trim()))
+        throw new RangeError('Dialog description must not be empty');
+    if (sheetGrabber && !sheetBelow)
+        throw new RangeError('Dialog sheetGrabber needs sheetBelow');
+    if (summary)
+        assertActionBarSummary(summary);
+}