@scalewing/react 1.35.1 → 1.37.0

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

@@ -1,9 +1,11 @@
-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 { 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';
+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.
@@ -14,9 +16,16 @@ function CountCell({ row, index, zeroLabel, }) {
 }
 /**
  * One strip row: its pinned label (with the phone total under it), a count
- * per column, read-only or entered, and its total.
+ * per column, read-only or entered, and its total. With a `valueRow`, the
+ * value line follows it and takes the total; each entry count is described
+ * by the value under it.
  */
-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] }));
+export function StripRow({ row, columns, zeroLabel, hasTotals, idPrefix, rowIndex, }) {
+    const { entry, valueRow } = row;
+    // With a value line, the total is on it, not on the counts.
+    const total = valueRow ? undefined : row.total;
+    const describedBy = (index) => hasValue(valueRow?.cells[index])
+        ? valueCellId(idPrefix, rowIndex, index)
+        : undefined;
+    return (_jsxs(_Fragment, { children: [_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 }), _jsx(StripTotalInline, { total: total })] }) }), columns.map((column, index) => entry ? (_jsx(EntryCell, { column: column, describedBy: describedBy(index), entry: entry, index: index, row: row }, column.key)) : (_jsx(CountCell, { index: index, row: row, zeroLabel: zeroLabel }, column.key))), hasTotals ? _jsx(StripTotalCell, { total: total }) : null] }), valueRow ? (_jsx(StripValueRow, { columns: columns, hasTotals: hasTotals, idPrefix: idPrefix, row: row, rowIndex: rowIndex, valueRow: valueRow })) : null] }));
 }

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

@@ -0,0 +1,11 @@
+/**
+ * A strip row's total cell: the consumer's total, or empty. Below md it is
+ * visually hidden, and `StripTotalInline` shows it under the row's name.
+ */
+export declare function StripTotalCell({ total }: {
+    total: string | undefined;
+}): import("react").JSX.Element;
+/** The total under a row's name on a phone; the cell reads it to everyone. */
+export declare function StripTotalInline({ total }: {
+    total: string | undefined;
+}): import("react").JSX.Element | null;

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A strip row's total cell: the consumer's total, or empty. Below md it is
+ * visually hidden, and `StripTotalInline` shows it under the row's name.
+ */
+export function StripTotalCell({ total }) {
+    return (_jsx("td", { className: "sw-denomination-total", children: _jsx("span", { className: "sw-denomination-total-value", children: total ?? '' }) }));
+}
+/** The total under a row's name on a phone; the cell reads it to everyone. */
+export function StripTotalInline({ total }) {
+    return total !== undefined ? (_jsx("span", { "aria-hidden": "true", className: "sw-denomination-total-inline", children: total })) : null;
+}

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

@@ -0,0 +1,25 @@
+import { type DenominationGridColumn, type DenominationGridRow, type DenominationGridValueRow } from './types.js';
+/**
+ * The id of a value cell, which the count above it is described by: the
+ * grid's prefix and the cell's place, never consumer text, so it is always
+ * one valid token of an id list.
+ */
+export declare function valueCellId(idPrefix: string, rowIndex: number, columnIndex: number): string;
+/** Whether a value cell shows something: not `null` and not blank. */
+export declare function hasValue(cell: string | null | undefined): cell is string;
+type StripValueRowProps = {
+    row: DenominationGridRow;
+    valueRow: DenominationGridValueRow;
+    columns: readonly DenominationGridColumn[];
+    hasTotals: boolean;
+    /** A per-grid prefix that keeps the value cells' ids unique on the page. */
+    idPrefix: string;
+    rowIndex: number;
+};
+/**
+ * The value line under a strip row: its name in the label column (with the
+ * row's total under it on a phone), a centred value per column, and the
+ * row's total. It keeps the row's tone, so a toned total stays toned.
+ */
+export declare function StripValueRow({ row, valueRow, columns, hasTotals, idPrefix, rowIndex, }: StripValueRowProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../../class-names.js';
+import { StripTotalCell, StripTotalInline } from './StripTotal.js';
+import { denominationValueRowClass } from '../../css/css-denomination-value-row.js';
+/**
+ * The id of a value cell, which the count above it is described by: the
+ * grid's prefix and the cell's place, never consumer text, so it is always
+ * one valid token of an id list.
+ */
+export function valueCellId(idPrefix, rowIndex, columnIndex) {
+    return `${idPrefix}value-${rowIndex}-${columnIndex}`;
+}
+/** Whether a value cell shows something: not `null` and not blank. */
+export function hasValue(cell) {
+    return typeof cell === 'string' && cell.trim() !== '';
+}
+/**
+ * The value line under a strip row: its name in the label column (with the
+ * row's total under it on a phone), a centred value per column, and the
+ * row's total. It keeps the row's tone, so a toned total stays toned.
+ */
+export function StripValueRow({ row, valueRow, columns, hasTotals, idPrefix, rowIndex, }) {
+    return (_jsxs("tr", { "aria-disabled": row.disabled || undefined, className: cx('sw-denomination-row', denominationValueRowClass, `sw-denomination-row-${row.tone ?? 'neutral'}`, row.disabled && 'sw-denomination-row-disabled'), children: [_jsx("th", { "aria-label": `${row.label} ${valueRow.label}`, className: "sw-denomination-label", scope: "row", children: _jsxs("span", { className: "sw-denomination-label-body", children: [_jsx("span", { className: "sw-denomination-label-line", children: _jsx("span", { className: "sw-denomination-label-text", children: valueRow.label }) }), _jsx(StripTotalInline, { total: row.total })] }) }), columns.map((column, index) => {
+                const cell = valueRow.cells[index];
+                return (_jsx("td", { className: "sw-denomination-value", id: valueCellId(idPrefix, rowIndex, index), children: hasValue(cell) ? cell : '' }, column.key));
+            }), hasTotals ? _jsx(StripTotalCell, { total: row.total }) : null] }));
+}

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

@@ -45,6 +45,20 @@ export type DenominationGridEntry = {
      */
     limitAppearance?: StepperLimitAppearance;
 };
+/**
+ * A line under a strip row that gives each column's value, such as the
+ * money its count adds up to: its own table row on the subtle fill, named
+ * in the label column, one consumer-formatted value per column centred
+ * under its count (`null` or `''` leaves a cell blank, such as for a zero
+ * count), and the row's `total` in the total column. The grid does no
+ * arithmetic and no currency formatting.
+ */
+export type DenominationGridValueRow = {
+    /** The line's name in the label column, such as "Value". */
+    label: string;
+    /** One formatted value, or `null` for none, per column. */
+    cells: readonly (string | null)[];
+};
 export type DenominationGridRow = {
     id: string;
     label: string;
@@ -80,6 +94,11 @@ export type DenominationGridRow = {
      * `entry.errors` wins.
      */
     entry?: DenominationGridEntry;
+    /**
+     * A value line under this row (the `strip` layout only); the row's
+     * `total` moves to it, and each entry count is described by its value.
+     */
+    valueRow?: DenominationGridValueRow;
 };
 export type DenominationGridProps = {
     label: string;

package/dist/components/denomination-grid/validate-value-row.d.ts

@@ -0,0 +1,6 @@
+import { type DenominationGridColumn, type DenominationGridLayout, type DenominationGridRow } from './types.js';
+/**
+ * Value rows: the strip layout only, a name that is not blank, and one
+ * formatted value or null per column.
+ */
+export declare function assertDenominationValueRows(layout: DenominationGridLayout, columns: readonly DenominationGridColumn[], rows: readonly DenominationGridRow[]): void;

package/dist/components/denomination-grid/validate-value-row.js

@@ -0,0 +1,30 @@
+/**
+ * Value rows: the strip layout only, a name that is not blank, and one
+ * formatted value or null per column.
+ */
+export function assertDenominationValueRows(layout, columns, rows) {
+    const valueRows = rows.flatMap((row) => row.valueRow == null ? [] : [row.valueRow]);
+    if (valueRows.length === 0)
+        return;
+    if (layout !== 'strip')
+        throw new RangeError('value rows need the strip layout');
+    for (const valueRow of valueRows) {
+        if (typeof valueRow !== 'object')
+            throw new RangeError('a value row is an object of label and cells');
+        if (typeof valueRow.label !== 'string' || !valueRow.label.trim())
+            throw new RangeError('a value row needs a label');
+        if (!fitsColumns(valueRow.cells, columns.length))
+            throw new RangeError('a value row needs one string or null per column');
+    }
+}
+function fitsColumns(cells, columnCount) {
+    if (!Array.isArray(cells) || cells.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) {
+        const cell = cells[index];
+        if (cell !== null && typeof cell !== 'string')
+            return false;
+    }
+    return true;
+}

package/dist/components/field/SearchFrame.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tabStop } from '../../tab-stop.js';
 /*
  * A press on the frame's chrome (the glyph or the padding) focuses the
  * input, as on an adorned field; a press on the input keeps the browser's
@@ -28,5 +29,5 @@ export function SearchFrame({ children, clearLabel, leading, onClear, showClear,
                         ?.querySelector('input')
                         ?.focus();
                     onClear();
-                }, type: "button", children: _jsx("span", { "aria-hidden": "true", className: "sw-field-search-cross" }) })) : null] }));
+                }, tabIndex: tabStop, type: "button", children: _jsx("span", { "aria-hidden": "true", className: "sw-field-search-cross" }) })) : null] }));
 }

package/dist/components/radio-group/RadioGroupOptionLabel.d.ts

@@ -27,6 +27,8 @@ type RadioGroupOptionLabelProps = {
     name: string;
     checked: boolean;
     required: boolean;
+    /** Whether this radio is its group's explicit Tab stop (`radioTabStopValue`). */
+    isTabStop: boolean;
     onSelect: () => void;
 };
 /**
@@ -35,5 +37,5 @@ type RadioGroupOptionLabelProps = {
  * share a wrapping body, and the radio is named by the label text alone and
  * described by the description.
  */
-export declare function RadioGroupOptionLabel({ option, name, checked, required, onSelect, }: RadioGroupOptionLabelProps): import("react").JSX.Element;
+export declare function RadioGroupOptionLabel({ option, name, checked, required, isTabStop, onSelect, }: RadioGroupOptionLabelProps): import("react").JSX.Element;
 export {};

package/dist/components/radio-group/RadioGroupOptionLabel.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from 'react';
+import { tabStop } from '../../tab-stop.js';
 /** Whether React renders something for a description: not nothing, a boolean or ''. */
 function hasDescription(description) {
     return (description !== undefined &&
@@ -13,7 +14,7 @@ function hasDescription(description) {
  * share a wrapping body, and the radio is named by the label text alone and
  * described by the description.
  */
-export function RadioGroupOptionLabel({ option, name, checked, required, onSelect, }) {
+export function RadioGroupOptionLabel({ option, name, checked, required, isTabStop, onSelect, }) {
     const id = useId();
     const textId = `${id}-text`;
     const descriptionId = `${id}-description`;
@@ -22,5 +23,5 @@ export function RadioGroupOptionLabel({ option, name, checked, required, onSelec
     return (_jsxs("label", { className: "sw-radio-group-option", children: [_jsxs("span", { className: "sw-radio-group-control", children: [_jsx("input", { "aria-describedby": described ? descriptionId : undefined, "aria-labelledby": described ? textId : undefined, checked: checked, className: "sw-radio-group-input", disabled: option.disabled, name: name, onChange: (event) => {
                             if (event.currentTarget.checked)
                                 onSelect();
-                        }, required: required, type: "radio", value: option.value }), _jsx("span", { "aria-hidden": "true", className: "sw-radio-group-mark" })] }), option.icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-radio-group-icon", children: option.icon })) : null, described ? (_jsxs("span", { className: "sw-radio-group-body", children: [text, _jsx("span", { className: "sw-radio-group-option-description", id: descriptionId, children: option.description })] })) : (text)] }));
+                        }, required: required, tabIndex: isTabStop ? tabStop : undefined, type: "radio", value: option.value }), _jsx("span", { "aria-hidden": "true", className: "sw-radio-group-mark" })] }), option.icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-radio-group-icon", children: option.icon })) : null, described ? (_jsxs("span", { className: "sw-radio-group-body", children: [text, _jsx("span", { className: "sw-radio-group-option-description", id: descriptionId, children: option.description })] })) : (text)] }));
 }

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

@@ -13,12 +13,14 @@ export type StepProps = {
     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. */
+    /** The step's fields, shown while it is current or in error, or always in an open list. */
     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).
+ * step's summary and Edit; an upcoming or skipped step's title alone). In
+ * an open list every step shows its fields, inside a region named by its
+ * title.
  */
 export declare function Step(props: StepProps): import("react").JSX.Element;

package/dist/components/steps/Step.js

@@ -21,12 +21,15 @@ function assertStep(props, level) {
  * 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).
+ * after the flush). In an open list nothing folds or opens, so focus stays
+ * where the person put it.
  */
-function useFocusWhenOpened(status, heading, focusClaimRef) {
+function useFocusWhenOpened(status, heading, focusClaimRef, open) {
     const previous = useRef(undefined);
     useEffect(() => {
-        if (stepTakesFocus(previous.current, status) && !focusClaimRef.current) {
+        if (!open &&
+            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,
@@ -36,12 +39,14 @@ function useFocusWhenOpened(status, heading, focusClaimRef) {
             });
         }
         previous.current = status;
-    }, [status, heading, focusClaimRef]);
+    }, [status, heading, focusClaimRef, open]);
 }
 /**
  * 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).
+ * step's summary and Edit; an upcoming or skipped step's title alone). In
+ * an open list every step shows its fields, inside a region named by its
+ * title.
  */
 export function Step(props) {
     const place = useContext(StepPlaceContext);
@@ -53,10 +58,13 @@ export function Step(props) {
     const heading = useRef(null);
     const titleId = useId();
     const editId = useId();
-    useFocusWhenOpened(status, heading, place.focusClaimRef);
+    useFocusWhenOpened(status, heading, place.focusClaimRef, place.open);
     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] }));
+    const header = (_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] }));
+    const shown = (place.open || isOpenStep(status)) && Children.toArray(children).length > 0;
+    const content = (_jsxs(_Fragment, { children: [header, shown ? _jsx("div", { className: "sw-steps-body", children: children }) : null] }));
+    return (_jsx("li", { "aria-current": !place.open && status === 'current' ? 'step' : undefined, className: cx('sw-steps-item', `sw-steps-item-${status}`), children: place.open ? (_jsx("section", { "aria-labelledby": titleId, className: "sw-steps-region", children: content })) : (content) }));
 }

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

@@ -2,15 +2,17 @@ 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).
+ * status words, 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), and whether every step is open.
  */
 export type StepPlace = {
     number: number;
     headingLevel: StepHeadingLevel;
     labels: StepsLabels;
     focusClaimRef: RefObject<boolean>;
+    /** Every step of the list is open (`Steps open`). */
+    open: 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/table/TableCell.js

@@ -3,6 +3,7 @@ import { forwardRef, } from 'react';
 import { cx } from '../../class-names.js';
 import { assertTableCellTone, } from '../../css/css-table-ledger.js';
 import { assertTableColumnWidth, tableColumnWidthClass, } from './table-layout.js';
+import { tabStop } from '../../tab-stop.js';
 const tableSorts = ['ascending', 'descending', 'none'];
 /** A cell's press is a function, and never on a sortable header. */
 function assertPress(onPress, sort) {
@@ -35,5 +36,5 @@ export const TableCell = forwardRef(function TableCell({ align = 'start', as = '
         : align === 'end'
             ? 'sw-table-end'
             : undefined;
-    return (_jsx(Component, { ref: ref, "aria-sort": sort === undefined || sort === 'none' ? undefined : sort, className: cx(alignmentClass, truncate && 'sw-table-clip', tone && `sw-table-tone-${tone}`, width && tableColumnWidthClass(width), className), ...rest, children: sort !== undefined && onSort ? (_jsxs("button", { className: "sw-table-sort", onClick: onSort, type: "button", children: [children, _jsx("span", { "aria-hidden": "true", className: cx('sw-table-sort-glyph', `sw-table-sort-${sort}`) })] })) : onPress ? (_jsx("button", { className: "sw-table-action", onClick: onPress, type: "button", children: children })) : (children) }));
+    return (_jsx(Component, { ref: ref, "aria-sort": sort === undefined || sort === 'none' ? undefined : sort, className: cx(alignmentClass, truncate && 'sw-table-clip', tone && `sw-table-tone-${tone}`, width && tableColumnWidthClass(width), className), ...rest, children: sort !== undefined && onSort ? (_jsxs("button", { className: "sw-table-sort", onClick: onSort, tabIndex: tabStop, type: "button", children: [children, _jsx("span", { "aria-hidden": "true", className: cx('sw-table-sort-glyph', `sw-table-sort-${sort}`) })] })) : onPress ? (_jsx("button", { className: "sw-table-action", onClick: onPress, tabIndex: tabStop, type: "button", children: children })) : (children) }));
 });

package/dist/css/css-button.js

@@ -35,11 +35,11 @@ function variantRules() {
  * A neutral disabled button: the quiet fill with its words in the muted
  * color at 48 %, about #AEAEAE on the grey (a disabled control needs no
  * contrast, and the faded words say it cannot be pressed), at full
- * opacity so no accent shows through.
- * Forced colors draw it as any disabled button.
+ * opacity so no accent shows through. The same for one that is only
+ * \`aria-disabled\`. Forced colors draw it as any disabled button.
  */
 function disabledNeutralRules() {
-    return `.sw-button-disabled-neutral:disabled:not(.sw-button-ghost) {
+    return `.sw-button-disabled-neutral:is(:disabled, [aria-disabled='true']):not(.sw-button-ghost) {
   background: ${quietFill};
   border-color: transparent;
   color: color-mix(in srgb, var(--sw-color-muted) 48%, transparent);
@@ -73,6 +73,14 @@ function pressedRules() {
   .sw-button[aria-pressed='true']::after { border: ${pressedRingWidth - pressedRingGap}px solid Highlight; border-radius: inherit; content: ''; inset: calc(-1px - ${pressedRingWidth}px); pointer-events: none; position: absolute; }
 }`;
 }
+/* The system greys a disabled button in forced colors, not one that is
+   only aria-disabled: grey it the same, over the neutral look's words. */
+function ariaDisabledForcedRules() {
+    return `@media (forced-colors: active) {
+  .sw-button[aria-disabled='true'],
+  .sw-button-disabled-neutral[aria-disabled='true']:not(.sw-button-ghost) { border-color: GrayText; color: GrayText; }
+}`;
+}
 function sizeRules() {
     return buttonSizes
         .map((size) => {
@@ -114,14 +122,18 @@ export function cssButtonClasses() {
   outline-offset: var(--sw-focus-ring-offset);
 }
 
-.sw-button:disabled {
+/* A button that is off but still pressed and focused (\`aria-disabled\`,
+   for a submit that, pressed while off, shows what to fix) looks as a
+   disabled one; forced colors grey it too, after the pressed rules. */
+.sw-button:disabled,
+.sw-button[aria-disabled='true'] {
   cursor: not-allowed;
   opacity: var(--sw-disabled-opacity);
 }
-
 ${variantRules()}
 ${disabledNeutralRules()}
 ${pressedRules()}
+${ariaDisabledForcedRules()}
 ${sizeRules()}
 ${groupRules()}
 

package/dist/css/css-denomination-grid.js

@@ -5,6 +5,7 @@ import { cssDenominationAppearanceClasses, denominationAppearanceClassCatalog, }
 import { cssDenominationLabelClasses, denominationLabelClassCatalog, } from './css-denomination-label.js';
 import { cssDenominationAlignedClasses, denominationAlignedClassCatalog, } from './css-denomination-aligned.js';
 import { cssDenominationEntryClasses, denominationEntryClassCatalog, } from './css-denomination-entry.js';
+import { cssDenominationValueRowClasses, denominationValueRowClassCatalog, } from './css-denomination-value-row.js';
 import { cssDenominationCellToneClasses, denominationCellToneClassCatalog, } from './css-denomination-cell-tones.js';
 import { pinnedStartShadeRules, scrollRegionRules, } from './css-scroll-region.js';
 import { visuallyHiddenDeclarations } from './css-utilities.js';
@@ -260,6 +261,8 @@ ${cssDenominationLabelClasses()}
 
 ${cssDenominationAppearanceClasses()}
 
+${cssDenominationValueRowClasses()}
+
 @media (forced-colors: active) {
   .sw-denomination-label { border-inline-start-color: CanvasText; color: CanvasText; }
   .sw-denomination-strip .sw-denomination-label::before { background: CanvasText; forced-color-adjust: none; }
@@ -303,5 +306,6 @@ export function denominationGridClassCatalog() {
         ...denominationAlignedClassCatalog(),
         ...denominationLabelClassCatalog(),
         ...denominationAppearanceClassCatalog(),
+        ...denominationValueRowClassCatalog(),
     ];
 }

package/dist/css/css-denomination-value-row.d.ts

@@ -0,0 +1,3 @@
+export declare const denominationValueRowClass = "sw-denomination-value-row";
+export declare function cssDenominationValueRowClasses(): string;
+export declare function denominationValueRowClassCatalog(): string[];

package/dist/css/css-denomination-value-row.js

@@ -0,0 +1,54 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { breakpointQuery } from './breakpoints.js';
+const data = typographyVariants.data;
+const label = typographyVariants.label;
+export const denominationValueRowClass = 'sw-denomination-value-row';
+const valueRow = `.sw-denomination-strip .${denominationValueRowClass}`;
+/*
+ * A value line under a strip row: the subtle fill across the row (its
+ * pinned label too), each value at label size in data weight and tabular
+ * figures (the framed counts' size), centred
+ * under its count in the text colour, never wrapped, padded a space-2 step
+ * down (space-1 below md): shorter than framed counts above it. A disabled
+ * row's line fades its values with the row. Emitted after
+ * the frame's rules and one class more specific, so it wins at every width.
+ */
+export function cssDenominationValueRowClasses() {
+    return `${valueRow},
+${valueRow} .sw-denomination-label {
+  background: var(--sw-color-subtle);
+}
+
+${valueRow} :is(th, td) {
+  padding-block: var(--sw-space-2);
+}
+
+${valueRow} .sw-denomination-value {
+  color: var(--sw-color-text);
+  font-size: ${label.fontSize}px;
+  font-variant-numeric: tabular-nums;
+  font-weight: ${data.fontWeight};
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+  text-align: center;
+  white-space: nowrap;
+}
+
+${valueRow}.sw-denomination-row-disabled .sw-denomination-value {
+  opacity: var(--sw-disabled-opacity);
+}
+
+@media ${breakpointQuery('below', 'md')} {
+  ${valueRow} :is(th, td) { padding-block: var(--sw-space-1); }
+  ${valueRow} .sw-denomination-total { padding: 0; }
+}
+
+@media (forced-colors: active) {
+  ${valueRow},
+  ${valueRow} .sw-denomination-label { background: Canvas; }
+  ${valueRow} .sw-denomination-value { color: CanvasText; }
+}`;
+}
+export function denominationValueRowClassCatalog() {
+    return [denominationValueRowClass, 'sw-denomination-value'];
+}

package/dist/css/css-steps.d.ts

@@ -3,7 +3,9 @@
  * gap apart. Each has a header line (marker, title, and on a done step its
  * summary and Edit) and, while open (current or error), a body indented to
  * the title. An open step's title is the title variant; a folded one's is
- * body size at label weight, muted ahead of the form or skipped.
+ * body size at label weight, muted ahead of the form or skipped. In an
+ * open list (`sw-steps-open`) every step is open: each panel takes the open
+ * padding and title, its header and body in one region.
  */
 export declare function cssStepsClasses(): string;
 export declare function stepsClassCatalog(): string[];

package/dist/css/css-steps.js

@@ -72,7 +72,9 @@ function forcedColorRules() {
  * gap apart. Each has a header line (marker, title, and on a done step its
  * summary and Edit) and, while open (current or error), a body indented to
  * the title. An open step's title is the title variant; a folded one's is
- * body size at label weight, muted ahead of the form or skipped.
+ * body size at label weight, muted ahead of the form or skipped. In an
+ * open list (`sw-steps-open`) every step is open: each panel takes the open
+ * padding and title, its header and body in one region.
  */
 export function cssStepsClasses() {
     return `.sw-steps {
@@ -99,10 +101,20 @@ export function cssStepsClasses() {
 }
 
 .sw-steps-item-current,
-.sw-steps-item-error {
+.sw-steps-item-error,
+.sw-steps-open > .sw-steps-item {
   --sw-steps-padding: var(--sw-space-4);
 }
 
+/* An open list's step is a region holding its header and body, spaced as
+   the item spaces them in a stepped list. */
+.sw-steps-region {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-4);
+  min-width: 0;
+}
+
 /* The marker sits at the top of the header, so the connector always starts
    under it; each line of the header is centred on the marker's height. */
 .sw-steps-header {
@@ -141,7 +153,8 @@ export function cssStepsClasses() {
 }
 
 .sw-steps-item-current .sw-steps-title,
-.sw-steps-item-error .sw-steps-title {
+.sw-steps-item-error .sw-steps-title,
+.sw-steps-open > .sw-steps-item .sw-steps-title {
   font-size: ${title.fontSize}px;
   letter-spacing: ${title.letterSpacing}px;
   line-height: ${title.lineHeight}px;
@@ -186,6 +199,7 @@ ${forcedColorRules()}`;
 export function stepsClassCatalog() {
     return [
         'sw-steps',
+        'sw-steps-open',
         'sw-steps-item',
         'sw-steps-item-upcoming',
         'sw-steps-item-current',
@@ -199,5 +213,6 @@ export function stepsClassCatalog() {
         'sw-steps-summary',
         'sw-steps-edit',
         'sw-steps-body',
+        'sw-steps-region',
     ];
 }

package/dist/index.d.ts

@@ -58,6 +58,6 @@ export type { GridColumns, GridProps } from './components/Grid.js';
 export type { GridColumnSpan } from './css/css-grid-span.js';
 export type { ColumnSpanProps } from './column-span-classes.js';
 export { DenominationGrid, denominationCellToneAppearances, denominationGridFrames, denominationLabelAppearances, denominationTotalEmphases, } from './components/DenominationGrid.js';
-export type { DenominationCellToneAppearance, DenominationGridColumn, DenominationGridEntry, DenominationGridFrame, DenominationGridLayout, DenominationGridProps, DenominationGridRow, DenominationGridRowEmphasis, DenominationGridRowRole, DenominationGridTone, DenominationLabelAppearance, DenominationLabelWidth, DenominationTotalEmphasis, } from './components/DenominationGrid.js';
+export type { DenominationCellToneAppearance, DenominationGridColumn, DenominationGridEntry, DenominationGridFrame, DenominationGridLayout, DenominationGridProps, DenominationGridRow, DenominationGridRowEmphasis, DenominationGridRowRole, DenominationGridTone, DenominationGridValueRow, DenominationLabelAppearance, DenominationLabelWidth, DenominationTotalEmphasis, } from './components/DenominationGrid.js';
 export { FilterChips } from './components/FilterChips.js';
 export type { FilterChipOption, FilterChipsProps, } from './components/FilterChips.js';