@scalewing/react 1.25.0 → 1.27.0

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
@@ -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)), 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.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
@@ -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 })] }))] }));
 }

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

@@ -0,0 +1,13 @@
+import { type DenominationGridColumn, type DenominationGridRow } from './types.js';
+type StripRowProps = {
+    row: DenominationGridRow;
+    columns: readonly DenominationGridColumn[];
+    zeroLabel: string;
+    hasTotals: boolean;
+};
+/**
+ * One strip row: its pinned label (with the phone total under it), a count
+ * per column, read-only or entered, and its total.
+ */
+export declare function StripRow({ row, columns, zeroLabel, hasTotals, }: StripRowProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,19 @@
+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 { EntryCell } from './EntryCell.js';
+import { RowLabelLine } from './RowLabelLine.js';
+/** One count, read-only: the zero label, a signed delta, and the cell's tone. */
+function CountCell({ row, index, zeroLabel, }) {
+    const view = denominationCellView(row.cells[index] ?? null, row.signed ?? false, zeroLabel);
+    return (_jsx("td", { className: cx('sw-denomination-cell', `sw-denomination-cell-${view.state}`, ...denominationCellToneClassNames(row.cellTones?.[index])), children: view.text }));
+}
+/**
+ * One strip row: its pinned label (with the phone total under it), a count
+ * per column, read-only or entered, and its total.
+ */
+export function StripRow({ row, columns, zeroLabel, hasTotals, }) {
+    const { entry } = row;
+    return (_jsxs("tr", { "aria-disabled": row.disabled || undefined, className: cx('sw-denomination-row', `sw-denomination-row-${row.tone ?? 'neutral'}`, row.signed && 'sw-denomination-row-signed', row.emphasis === 'quiet' && 'sw-denomination-row-quiet', row.disabled && 'sw-denomination-row-disabled'), 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) => entry ? (_jsx(EntryCell, { column: column, entry: entry, index: index, row: row }, column.key)) : (_jsx(CountCell, { index: index, row: row, zeroLabel: zeroLabel }, column.key))), hasTotals ? (_jsx("td", { className: "sw-denomination-total", children: _jsx("span", { className: "sw-denomination-total-value", children: row.total ?? '' }) })) : null] }));
+}

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

@@ -12,6 +12,29 @@ export type DenominationGridRowRole = 'region' | 'group';
 export type DenominationGridColumn = {
     key: string;
     label: string;
+    /** A muted note after the label, such as "× 100" for a strap of $1 bills. */
+    caption?: string;
+};
+/** How a row sits among the others: `quiet` sets it on the subtle fill, for a row to compare against. */
+export type DenominationGridRowEmphasis = 'default' | 'quiet';
+/**
+ * Makes a strip row's counts editable: one `Stepper` per column, holding the
+ * row's `cells` (`null` is an empty box), named by the row label and the
+ * column's label and caption ("Counted $1 × 100"). The minimum is 0. The
+ * grid does no arithmetic: recompute the row's `total` in `onChange`.
+ */
+export type DenominationGridEntry = {
+    onChange: (columnKey: string, value: number | null) => void;
+    /** The − buttons' name, such as "One less". */
+    decrementLabel: string;
+    /** The + buttons' name, such as "One more". */
+    incrementLabel: string;
+    /** A cap per column (`null` for none), such as the bills the drawer holds. */
+    max?: readonly (number | null)[];
+    /** A message per column (`null` for none), shown under that count. */
+    errors?: readonly (string | null)[];
+    /** What an empty box shows, such as "0". */
+    placeholder?: string;
 };
 export type DenominationGridRow = {
     id: string;
@@ -25,9 +48,29 @@ export type DenominationGridRow = {
      * A tone per count, one entry per column (null for none), for a single
      * count that needs attention, such as a bill the vault is short of. The
      * count is set in the tone and, in the tiles layout, its tile's border
-     * too, in place. The tone never says why alone: put that in words.
+     * too, in place; an entry count's border takes it. The tone never says
+     * why alone: put that in words.
      */
     cellTones?: readonly (DenominationGridTone | null)[];
+    /** A muted line under the label, such as "from the customer". */
+    caption?: string;
+    /** The `strip` layout only. */
+    emphasis?: DenominationGridRowEmphasis;
+    /**
+     * A row that does not apply now (the `strip` layout only): its entry is
+     * disabled, its label, counts and total fade, and the row is
+     * `aria-disabled`.
+     */
+    disabled?: boolean;
+    /**
+     * Count entry for this row (the `strip` layout only). Its counts are zero
+     * or more, it is not `signed`, and its label is its own among the entry
+     * rows, as each column's label and caption are, so every count has its
+     * own name. A cell tone draws the count's border in that tone (an
+     * `accent` one is the `Stepper`'s changed look); a message in
+     * `entry.errors` wins.
+     */
+    entry?: DenominationGridEntry;
 };
 export type DenominationGridProps = {
     label: string;

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

@@ -0,0 +1,15 @@
+import { type DenominationGridColumn, type DenominationGridLayout, type DenominationGridRow } from './types.js';
+/**
+ * The parts of a row and column that only label or set a row apart: a
+ * caption is never blank, an emphasis is a known one, `disabled` is a
+ * boolean, and a quiet or disabled row is a strip row (tiles have no row
+ * fill to set apart).
+ */
+export declare function assertDenominationExtras(layout: DenominationGridLayout, columns: readonly DenominationGridColumn[], rows: readonly DenominationGridRow[]): void;
+/**
+ * Entry rows: the strip layout only, named buttons, counts of zero or more,
+ * no signed deltas, one cap and one message (or null) per column with caps
+ * that are whole counts of zero or more, and one name per count: every
+ * entry row label and every column name (label and caption) is its own.
+ */
+export declare function assertDenominationEntries(layout: DenominationGridLayout, columns: readonly DenominationGridColumn[], rows: readonly DenominationGridRow[]): void;

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

@@ -0,0 +1,78 @@
+import { columnName } from './ColumnHeadText.js';
+const emphases = ['default', 'quiet'];
+/**
+ * The parts of a row and column that only label or set a row apart: a
+ * caption is never blank, an emphasis is a known one, `disabled` is a
+ * boolean, and a quiet or disabled row is a strip row (tiles have no row
+ * fill to set apart).
+ */
+export function assertDenominationExtras(layout, columns, rows) {
+    if (columns.some((column) => isBlank(column.caption)))
+        throw new RangeError('a column caption must not be empty');
+    if (rows.some((row) => isBlank(row.caption)))
+        throw new RangeError('a row caption must not be empty');
+    if (rows.some((row) => row.emphasis !== undefined && !emphases.includes(row.emphasis)))
+        throw new RangeError("emphasis must be 'default' or 'quiet'");
+    if (rows.some((row) => row.disabled !== undefined && typeof row.disabled !== 'boolean'))
+        throw new RangeError('disabled must be a boolean');
+    if (layout !== 'strip' &&
+        rows.some((row) => row.emphasis === 'quiet' || row.disabled))
+        throw new RangeError('quiet and disabled rows need the strip layout');
+}
+/**
+ * Entry rows: the strip layout only, named buttons, counts of zero or more,
+ * no signed deltas, one cap and one message (or null) per column with caps
+ * that are whole counts of zero or more, and one name per count: every
+ * entry row label and every column name (label and caption) is its own.
+ */
+export function assertDenominationEntries(layout, columns, rows) {
+    const entryRows = rows.filter((row) => row.entry);
+    if (entryRows.length === 0)
+        return;
+    if (layout !== 'strip')
+        throw new RangeError('entry rows need the strip layout');
+    if (!allDistinct(entryRows.map((row) => row.label)))
+        throw new RangeError('entry rows need distinct labels');
+    if (!allDistinct(columns.map(columnName)))
+        throw new RangeError('entry rows need columns with distinct labels and captions');
+    for (const row of entryRows) {
+        if (row.signed)
+            throw new RangeError('an entry row cannot be signed');
+        if (row.cells.some((cell) => cell !== null && cell < 0))
+            throw new RangeError('an entry row counts zero or more');
+        assertEntry(row.entry, columns.length);
+    }
+}
+function assertEntry(entry, columnCount) {
+    if (typeof entry.onChange !== 'function')
+        throw new RangeError('entry needs an onChange');
+    if (!entry.decrementLabel.trim() || !entry.incrementLabel.trim())
+        throw new RangeError('entry needs decrementLabel and incrementLabel');
+    if (!fitsColumns(entry.max, columnCount, isCap))
+        throw new RangeError('entry.max needs one whole count of zero or more, or null, per column');
+    if (!fitsColumns(entry.errors, columnCount, isMessage))
+        throw new RangeError('entry.errors needs one message or null per column');
+}
+function allDistinct(names) {
+    return new Set(names).size === names.length;
+}
+function isBlank(text) {
+    return text !== undefined && !text.trim();
+}
+function isCap(cap) {
+    return cap === null || (Number.isSafeInteger(cap) && cap >= 0);
+}
+function isMessage(message) {
+    return message === null || typeof message === 'string';
+}
+function fitsColumns(values, columnCount, fits) {
+    if (values === undefined)
+        return true;
+    if (!Array.isArray(values) || values.length !== columnCount)
+        return false;
+    // An index loop, not every(): every() skips the holes of a sparse array.
+    for (let index = 0; index < columnCount; index += 1)
+        if (!fits(values[index]))
+            return false;
+    return true;
+}

package/dist/components/steps/Step.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode } from 'react';
+import { type StepHeadingLevel, type StepStatus } from './step-status.js';
+export type StepProps = {
+    status: StepStatus;
+    title: string;
+    /** One line beside a done step's title, such as "Cash · $480.00"; truncated. */
+    summary?: ReactNode;
+    /** Reopens a done step; needs `editLabel`. */
+    onEdit?: () => void;
+    /** The Edit button's words; its name adds the step's title ("Edit The sale"). */
+    editLabel?: string;
+    /** Muted words after a skipped step's title, such as "not needed". */
+    skippedReason?: string;
+    /** Overrides the list's heading level for this step's title. */
+    headingLevel?: StepHeadingLevel;
+    /** The step's fields, shown while it is current or in error. */
+    children?: ReactNode;
+};
+/**
+ * One step of a `Steps` list: a numbered marker, the title as a heading,
+ * and, by status, its fields (current, error) or one folded line (a done
+ * step's summary and Edit; an upcoming or skipped step's title alone).
+ */
+export declare function Step(props: StepProps): import("react").JSX.Element;

package/dist/components/steps/Step.js

@@ -0,0 +1,62 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, useContext, useEffect, useId, useRef, } from 'react';
+import { cx } from '../../class-names.js';
+import { Button } from '../Button.js';
+import { isOpenStep, stepHeadingLevels, stepStatuses, stepStatusWord, stepTakesFocus, } from './step-status.js';
+import { StepPlaceContext } from './steps-context.js';
+function assertStep(props, level) {
+    if (!props.title.trim())
+        throw new RangeError('Step title must not be empty');
+    if (!stepStatuses.includes(props.status))
+        throw new RangeError(`Unknown Step status: ${String(props.status)}`);
+    if (!stepHeadingLevels.includes(level))
+        throw new RangeError('Step headingLevel must be 2, 3 or 4');
+    if (props.onEdit && !props.editLabel?.trim())
+        throw new RangeError('Step onEdit needs an editLabel');
+    if (props.skippedReason !== undefined && !props.skippedReason.trim())
+        throw new RangeError('Step skippedReason must not be empty');
+}
+/**
+ * Moves focus to the heading when the step becomes current from a folded
+ * state, unless an earlier step of the list already took it in this commit
+ * (effects run in list order, so the first one wins; the claim is released
+ * after the flush).
+ */
+function useFocusWhenOpened(status, heading, focusClaimRef) {
+    const previous = useRef(undefined);
+    useEffect(() => {
+        if (stepTakesFocus(previous.current, status) && !focusClaimRef.current) {
+            focusClaimRef.current = true;
+            heading.current?.focus();
+            // One commit's effects run in one flush: release the claim after it,
+            // whichever component re-rendered.
+            queueMicrotask(() => {
+                focusClaimRef.current = false;
+            });
+        }
+        previous.current = status;
+    }, [status, heading, focusClaimRef]);
+}
+/**
+ * One step of a `Steps` list: a numbered marker, the title as a heading,
+ * and, by status, its fields (current, error) or one folded line (a done
+ * step's summary and Edit; an upcoming or skipped step's title alone).
+ */
+export function Step(props) {
+    const place = useContext(StepPlaceContext);
+    if (!place)
+        throw new RangeError('Step must be a child of Steps');
+    const level = props.headingLevel ?? place.headingLevel;
+    assertStep(props, level);
+    const { status, title, summary, onEdit, editLabel, skippedReason, children } = props;
+    const heading = useRef(null);
+    const titleId = useId();
+    const editId = useId();
+    useFocusWhenOpened(status, heading, place.focusClaimRef);
+    const Heading = `h${level}`;
+    const reason = status === 'skipped' ? skippedReason : undefined;
+    const word = stepStatusWord(status, place.labels, reason !== undefined);
+    const done = status === 'done';
+    return (_jsxs("li", { "aria-current": status === 'current' ? 'step' : undefined, className: cx('sw-steps-item', `sw-steps-item-${status}`), children: [_jsxs("div", { className: "sw-steps-header", children: [_jsx("span", { "aria-hidden": "true", className: "sw-steps-marker", children: status === 'error' ? '!' : done ? null : place.number }), _jsxs(Heading, { ref: heading, className: "sw-steps-title", tabIndex: -1, children: [_jsx("span", { id: titleId, children: title }), reason ? (_jsxs(_Fragment, { children: [' ', _jsx("span", { className: "sw-steps-reason", children: reason })] })) : null, word ? _jsxs("span", { className: "sw-sr-only", children: [", ", word] }) : null] }), done && summary ? (_jsx("span", { className: "sw-steps-summary", children: summary })) : null, done && onEdit ? (_jsx(Button, { "aria-labelledby": `${editId} ${titleId}`, className: "sw-steps-edit", id: editId, onPress: onEdit, size: "sm", variant: "ghost", children: editLabel })) : null] }), isOpenStep(status) && Children.toArray(children).length > 0 ? (_jsx("div", { className: "sw-steps-body", children: children })) : null] }));
+}

package/dist/components/steps/step-status.d.ts

@@ -0,0 +1,26 @@
+/** Where a step stands in its form. */
+export declare const stepStatuses: readonly ["upcoming", "current", "done", "error", "skipped"];
+export type StepStatus = (typeof stepStatuses)[number];
+/** A step title's heading level. */
+export type StepHeadingLevel = 2 | 3 | 4;
+export declare const stepHeadingLevels: readonly StepHeadingLevel[];
+/** The words assistive technology hears after a folded step's title. */
+export type StepsLabels = {
+    done: string;
+    error: string;
+    skipped: string;
+    upcoming: string;
+};
+export declare const defaultStepsLabels: StepsLabels;
+/** A current or error step shows its fields; the others fold to one line. */
+export declare function isOpenStep(status: StepStatus): boolean;
+/**
+ * Whether a step that was `previous` and is now `next` should take focus: it
+ * became current from a folded state (upcoming, done, skipped). A first
+ * render (`previous` undefined), a move between current and error, and a
+ * step that turns to error keep focus where it is: after a refused submit
+ * the consumer focuses the first invalid field, as `Field` asks.
+ */
+export declare function stepTakesFocus(previous: StepStatus | undefined, next: StepStatus): boolean;
+/** The status word read after a step's title, or none (current, or a skipped step that shows its reason). */
+export declare function stepStatusWord(status: StepStatus, labels: StepsLabels, hasReason: boolean): string | null;

package/dist/components/steps/step-status.js

@@ -0,0 +1,37 @@
+/** Where a step stands in its form. */
+export const stepStatuses = [
+    'upcoming',
+    'current',
+    'done',
+    'error',
+    'skipped',
+];
+export const stepHeadingLevels = [2, 3, 4];
+export const defaultStepsLabels = {
+    done: 'Done',
+    error: 'Needs attention',
+    skipped: 'Not needed',
+    upcoming: 'Not started',
+};
+/** A current or error step shows its fields; the others fold to one line. */
+export function isOpenStep(status) {
+    return status === 'current' || status === 'error';
+}
+/**
+ * Whether a step that was `previous` and is now `next` should take focus: it
+ * became current from a folded state (upcoming, done, skipped). A first
+ * render (`previous` undefined), a move between current and error, and a
+ * step that turns to error keep focus where it is: after a refused submit
+ * the consumer focuses the first invalid field, as `Field` asks.
+ */
+export function stepTakesFocus(previous, next) {
+    return previous !== undefined && !isOpenStep(previous) && next === 'current';
+}
+/** The status word read after a step's title, or none (current, or a skipped step that shows its reason). */
+export function stepStatusWord(status, labels, hasReason) {
+    if (status === 'current')
+        return null;
+    if (status === 'skipped' && hasReason)
+        return null;
+    return labels[status];
+}

package/dist/components/steps/steps-context.d.ts

@@ -0,0 +1,16 @@
+import { type RefObject } from 'react';
+import { type StepHeadingLevel, type StepsLabels } from './step-status.js';
+/**
+ * What a `Step` learns from its `Steps`: its number, its heading level, the
+ * status words, and the list's focus claim for this commit (the first step
+ * to open in a commit takes focus and releases the claim after that
+ * commit's effects).
+ */
+export type StepPlace = {
+    number: number;
+    headingLevel: StepHeadingLevel;
+    labels: StepsLabels;
+    focusClaimRef: RefObject<boolean>;
+};
+/** Null outside `Steps`: a `Step` must be one of a list's steps. */
+export declare const StepPlaceContext: import("react").Context<StepPlace | null>;

package/dist/components/steps/steps-context.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+/** Null outside `Steps`: a `Step` must be one of a list's steps. */
+export const StepPlaceContext = createContext(null);

package/dist/css/css-action-bar-summary.d.ts

@@ -0,0 +1,2 @@
+export declare function cssActionBarSummaryClasses(): string;
+export declare function actionBarSummaryClassCatalog(): string[];

package/dist/css/css-action-bar-summary.js

@@ -0,0 +1,48 @@
+import { typographyVariants } from '@scalewing/tokens';
+const label = typographyVariants.label;
+/*
+ * The bar's figure: label, value and detail on one baseline, a small gap
+ * apart, wrapping as one phrase. The value takes the heading variant and
+ * tabular figures from the text classes it carries (so it steps down below
+ * md with every heading); the label and detail are muted label-size words
+ * at regular weight. A tone colors the value only. Forced colors keep the
+ * system text color.
+ */
+export function cssActionBarSummaryClasses() {
+    return `.sw-action-bar-summary {
+  align-items: baseline;
+  column-gap: var(--sw-space-2);
+  display: inline-flex;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+
+.sw-action-bar-summary-label,
+.sw-action-bar-summary-detail {
+  color: var(--sw-color-muted);
+  font-size: ${label.fontSize}px;
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+}
+
+.sw-action-bar-summary-value {
+  color: var(--sw-color-text);
+}
+
+.sw-action-bar-summary-danger .sw-action-bar-summary-value { color: var(--sw-color-danger); }
+.sw-action-bar-summary-success .sw-action-bar-summary-value { color: var(--sw-color-success); }
+
+@media (forced-colors: active) {
+  .sw-action-bar-summary-value { color: CanvasText; }
+}`;
+}
+export function actionBarSummaryClassCatalog() {
+    return [
+        'sw-action-bar-summary',
+        'sw-action-bar-summary-label',
+        'sw-action-bar-summary-value',
+        'sw-action-bar-summary-detail',
+        'sw-action-bar-summary-danger',
+        'sw-action-bar-summary-success',
+    ];
+}

package/dist/css/css-action-bar.js

@@ -1,5 +1,6 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { breakpointQuery, breakpoints, } from './breakpoints.js';
+import { actionBarSummaryClassCatalog, cssActionBarSummaryClasses, } from './css-action-bar-summary.js';
 import { zIndex } from './stacking.js';
 const caption = typographyVariants.caption;
 /* The bar floats a step above the bottom edge and clears the home indicator. */
@@ -93,6 +94,8 @@ export function cssActionBarClasses() {
   .sw-action-bar-actions > * { flex: 1 1 auto; }
 }
 
+${cssActionBarSummaryClasses()}
+
 ${stickyRules()}`;
 }
 export function actionBarClassCatalog() {
@@ -101,6 +104,7 @@ export function actionBarClassCatalog() {
         'sw-action-bar-status',
         'sw-action-bar-actions',
         'sw-action-bar-sticky',
+        ...actionBarSummaryClassCatalog(),
         ...breakpoints.map((breakpoint) => actionBarStickyClass(breakpoint)),
     ];
 }

package/dist/css/css-components.js

@@ -23,6 +23,7 @@ import { cssTooltipClasses } from './css-tooltip.js';
 import { cssInfoTipClasses } from './css-info-tip.js';
 import { cssSeparatorClasses } from './css-separator.js';
 import { cssStatTileClasses } from './css-stat-tile.js';
+import { cssDescriptionListClasses } from './css-description-list.js';
 import { cssTabsClasses } from './css-tabs.js';
 import { cssResponsiveClasses } from './css-responsive.js';
 import { cssFilterChipsClasses } from './css-filter-chips.js';
@@ -30,6 +31,8 @@ import { cssGridClasses } from './css-grid.js';
 import { cssGridSpanClasses } from './css-grid-span.js';
 import { cssDenominationGridClasses } from './css-denomination-grid.js';
 import { cssFieldClasses } from './css-field.js';
+import { cssStepperClasses } from './css-stepper.js';
+import { cssStepsClasses } from './css-steps.js';
 import { cssToastClasses } from './css-toast.js';
 import { cssBoxBorderClasses } from './css-box-border.js';
 import { cssPopupHostRules } from './stacking.js';
@@ -43,6 +46,7 @@ function reducedTransparencyRules() {
   .sw-card-glass,
   .sw-app-header,
   .sw-action-bar,
+  .sw-steps-item,
   .sw-badge-neutral,
   .sw-segmented,
   .sw-table-sticky thead th,
@@ -151,6 +155,8 @@ ${cssSeparatorClasses()}
 
 ${cssStatTileClasses()}
 
+${cssDescriptionListClasses()}
+
 ${cssTabsClasses()}
 
 ${cssFilterChipsClasses()}
@@ -161,6 +167,10 @@ ${cssDenominationGridClasses()}
 
 ${cssFieldClasses()}
 
+${cssStepperClasses()}
+
+${cssStepsClasses()}
+
 ${cssSplitClasses()}
 
 ${cssToastClasses()}

package/dist/css/css-denomination-entry.d.ts

@@ -0,0 +1,2 @@
+export declare function cssDenominationEntryClasses(): string;
+export declare function denominationEntryClassCatalog(): string[];