@scalewing/react 1.36.0 → 1.37.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @scalewing/react
 
+## 1.37.0
+
+### Minor Changes
+
+- a9e2447: `DenominationGrid` row `valueRow` (opt-in, strip layout): a line right under a row that gives each column's value, such as the money its count adds up to. It is its own table row on the subtle fill, named in the label column (`label`), each consumer-formatted value centred under its count in tabular figures (`null` or `''` blank), with the row's `total` moved onto it; each typed count is described by the value under it, which is no tab stop. `Stepper` gains `aria-describedby` (ids read before its error). The grid still does no arithmetic or currency formatting. New classes `sw-denomination-value-row` and `sw-denomination-value`; no new tokens, no new dependency. Request: `docs/requests/teisoro-denomination-value-row.md`.
+
 ## 1.36.0
 
 ### Minor Changes

package/README.md

@@ -113,7 +113,7 @@ A disabled native text control (`<input>`, `<select>` or `<textarea>` on the can
 </Field>
 ```
 
-`Stepper` is a whole-number count changed with − and + or typed. The count is a native text input with `role="spinbutton"` and `inputmode="numeric"`, named by `label` (visible above it, or `labelVisuallyHidden` where table headers say it) and the one tab stop: ArrowUp and ArrowDown step it by `step` (default 1), Home goes to `min` and End to a finite `max` (a range below zero takes `inputmode="text"`, since a phone's numeric pad has no minus key). The − and + buttons are pointer targets outside the tab order, named by `decrementLabel` and `incrementLabel` (your copy), and a press on one leaves focus where it was; the count and both buttons sit in a `group` named by the label. − is disabled at `min` (default 0) and + at `max` (no upper bound when left out). `value` is a count or `null` for an empty box, which the buttons treat as `min` and `placeholder` can fill. Typed text is refused unless it is digits (with a leading minus when `min` is below zero), so `onChange` only receives a whole number or `null`; a typed count is reported as typed even outside the bounds, so say why in `error` (a polite message, `aria-invalid` and the danger border, as `Field`'s), and the buttons then move it back inside them. `changed` takes `Field`'s changed look; `readOnly` keeps the count focusable and hides the buttons in their own room; `disabled` stops all three. `limitAppearance="plain"` (default `"faded"`) keeps − at `min` and + at `max` in their usual look instead of faded, for a count sheet where a faded − reads as broken; they are still disabled, a disabled or read-only Stepper is unchanged, forced colors still grey them, and an unknown value throws a `RangeError`. The count is a few digits wide and keeps that width (`width="fixed"`), or fills its container (`width="full"`, for a table cell). Bounds that are not whole numbers, `min` above `max`, or a `step` that is not above zero throw a `RangeError`.
+`Stepper` is a whole-number count changed with − and + or typed. The count is a native text input with `role="spinbutton"` and `inputmode="numeric"`, named by `label` (visible above it, or `labelVisuallyHidden` where table headers say it) and the one tab stop: ArrowUp and ArrowDown step it by `step` (default 1), Home goes to `min` and End to a finite `max` (a range below zero takes `inputmode="text"`, since a phone's numeric pad has no minus key). The − and + buttons are pointer targets outside the tab order, named by `decrementLabel` and `incrementLabel` (your copy), and a press on one leaves focus where it was; the count and both buttons sit in a `group` named by the label. − is disabled at `min` (default 0) and + at `max` (no upper bound when left out). `value` is a count or `null` for an empty box, which the buttons treat as `min` and `placeholder` can fill. Typed text is refused unless it is digits (with a leading minus when `min` is below zero), so `onChange` only receives a whole number or `null`; a typed count is reported as typed even outside the bounds, so say why in `error` (a polite message, `aria-invalid` and the danger border, as `Field`'s), and the buttons then move it back inside them. `aria-describedby` takes ids of elements that describe the count, such as the value it adds up to, read before an `error`'s message. `changed` takes `Field`'s changed look; `readOnly` keeps the count focusable and hides the buttons in their own room; `disabled` stops all three. `limitAppearance="plain"` (default `"faded"`) keeps − at `min` and + at `max` in their usual look instead of faded, for a count sheet where a faded − reads as broken; they are still disabled, a disabled or read-only Stepper is unchanged, forced colors still grey them, and an unknown value throws a `RangeError`. The count is a few digits wide and keeps that width (`width="fixed"`), or fills its container (`width="full"`, for a table cell). Bounds that are not whole numbers, `min` above `max`, or a `step` that is not above zero throw a `RangeError`.
 
 ```tsx
 <Stepper
@@ -564,7 +564,7 @@ Values outside the catalog throw a `RangeError`. There is no per-breakpoint span
 </Grid>
 ```
 
-`DenominationGrid` shows integer counts per unit across a fixed set of columns. The `strip` layout is a captioned table: each row has a toned label with an icon slot, muted zero cells, optional signed deltas toned by sign, and an optional consumer-formatted `total` that shows under the label on a phone. Pass `totalLabel` (for example "Total") to name the total column: it renders a `th scope="col"` shown over the totals from `md` up and visually hidden below it, and without it the corner stays an empty cell as before (either way the column takes no width on a phone). `labelWidth` (`xs` to `xl`, the `Table` column sizes) lines a strip's columns up with every other strip of the same columns in a container of the same width, such as the cards of a feed: the row labels take that width and the count columns share the rest of the region equally, so no content moves a column. `labelAppearance="plain"` (default `"tone"`) sets every row label in the text color at label weight with no tone stripe, in both layouts, for a grid whose rows need no color to tell apart; a row's `tone` still colors its total, and an unknown value throws. Three more grid-level options match a framed count sheet, each off by default: `frame="table"` (default `"none"`) draws a strip as a framed table, its scroll region a surface inside a border hairline at the `sm` radius, the heading row on the subtle fill, a rule between columns, the counts at label size centred under their heads and the cells padded a space-3 step across (the tiles layout has no frame and ignores it); `totalEmphasis="strong"` (default `"default"`) sets the row totals in bold label type, a neutral row's in the text color and a toned row's in its tone, under the label on a phone too; and `cellToneAppearance="pill"` (default `"text"`) sets a `cellTones` count of a strip's read-only row on a rounded tint of its tone in the tone's ink (the `Notice` fill and words, 4.5:1 on the tint except where a palette's own `danger` is already under 4.5:1, harvest and mocha dark), outlined in forced colors; entry counts and tiles keep their tone border. With `zeroLabel=""` a toned zero or empty count shows nothing in either appearance, so tone only counts that are there. An unknown value of any of them throws a `RangeError`. `zeroLabel` (default `"—"`) is what a zero or empty read-only count shows; an empty string leaves those counts blank, so only the counts that are there stand out (it suits the strip, where the column header names each blank cell, better than tiles, where a blank tile is only its column's name), and a `zeroLabel` that is not a string throws. On a phone the total cell stays in the table, visually hidden, so a screen reader still reads each total in its row; the copy under the label is `aria-hidden`. A strip wider than its container scrolls sideways inside its own keyboard-focusable region, named after `label`, with the row labels pinned at the start and the same edge shade as `Table` while counts are scrolled out of view (the start shade is cast from the pinned labels' edge, since they cover the region's own); the page never scrolls sideways. The `tiles` layout stacks the column label, the count, and an optional `subtotal` string per column. Each tiles row shows its label line (icon, label and `total`) when the grid has several rows, or when a lone row has an icon or a `total`; a lone plain row is named by the grid's `label` alone. Every row is a region named by its `label`, except a lone plain row whose `label` is the grid's own: it has no name of its own, so assistive technology hears the grid's group once rather than a region repeating it. `rowRole="group"` (default `"region"`) keeps every named row's name but makes it a `group` instead of a landmark region, for a page with many grids (one per order card, say) whose rows would otherwise fill the landmark list; the strip ignores it, since its rows are table rows, and an unknown `rowRole` throws a `RangeError` in either layout. A row's icon and its label words stay on one line in both layouts (`sw-denomination-label-line`): a long label wraps its words beside the icon, never under it, and on a phone the strip's total goes on its own line under them. A row's `cellTones` (one Badge tone or `null` per column) tones a single count in place: the count is set in the tone over its signed or zero look, and in the tiles layout its tile's border takes the tone too, so a short bill turns red without leaving its row; `neutral` or `null` leaves a count as it is, a row's `tone` still colors only its label, and a `cellTones` that is not one known tone or `null` per column throws. The tone never says why on its own; put that in words beside the grid. Every negative count, signed or not and in either layout, is written with the typographic minus ("−1"), never a hyphen. The primitive does no arithmetic and no currency formatting; tones reuse the Badge vocabulary. Invalid columns, rows, or cells throw.
+`DenominationGrid` shows integer counts per unit across a fixed set of columns. The `strip` layout is a captioned table: each row has a toned label with an icon slot, muted zero cells, optional signed deltas toned by sign, and an optional consumer-formatted `total` that shows under the label on a phone. Pass `totalLabel` (for example "Total") to name the total column: it renders a `th scope="col"` shown over the totals from `md` up and visually hidden below it, and without it the corner stays an empty cell as before (either way the column takes no width on a phone). `labelWidth` (`xs` to `xl`, the `Table` column sizes) lines a strip's columns up with every other strip of the same columns in a container of the same width, such as the cards of a feed: the row labels take that width and the count columns share the rest of the region equally, so no content moves a column. `labelAppearance="plain"` (default `"tone"`) sets every row label in the text color at label weight with no tone stripe, in both layouts, for a grid whose rows need no color to tell apart; a row's `tone` still colors its total, and an unknown value throws. Three more grid-level options match a framed count sheet, each off by default: `frame="table"` (default `"none"`) draws a strip as a framed table, its scroll region a surface inside a border hairline at the `sm` radius, the heading row on the subtle fill, a rule between columns, the counts at label size centred under their heads and the cells padded a space-3 step across (the tiles layout has no frame and ignores it); `totalEmphasis="strong"` (default `"default"`) sets the row totals in bold label type, a neutral row's in the text color and a toned row's in its tone, under the label on a phone too; and `cellToneAppearance="pill"` (default `"text"`) sets a `cellTones` count of a strip's read-only row on a rounded tint of its tone in the tone's ink (the `Notice` fill and words, 4.5:1 on the tint except where a palette's own `danger` is already under 4.5:1, harvest and mocha dark), outlined in forced colors; entry counts and tiles keep their tone border. A strip row's `valueRow` (`{ label, cells }`, opt-in) adds a line right under it that gives each column's value, such as the money its count adds up to: its own table row on the subtle fill, `label` (such as "Value") in the label column (named with the row's label, "Counted Value", for table navigation), each of `cells` (one consumer-formatted string or `null` per column; `null` or `''` leaves it blank) centred under its count at label size in tabular figures, and the row's `total` moved onto it (bold with `totalEmphasis="strong"`, under the line's name on a phone); the counts' own total cell stays empty. It keeps the row's tone and `disabled` (a disabled line fades its values). Each entry count with a value is described by it (`aria-describedby`, before an error), and the value is no tab stop. The grid still does no arithmetic. A `valueRow` in the tiles layout, a blank label, or cells that are not one string or `null` per column throw a `RangeError`. With `zeroLabel=""` a toned zero or empty count shows nothing in either appearance, so tone only counts that are there. An unknown value of any of them throws a `RangeError`. `zeroLabel` (default `"—"`) is what a zero or empty read-only count shows; an empty string leaves those counts blank, so only the counts that are there stand out (it suits the strip, where the column header names each blank cell, better than tiles, where a blank tile is only its column's name), and a `zeroLabel` that is not a string throws. On a phone the total cell stays in the table, visually hidden, so a screen reader still reads each total in its row; the copy under the label is `aria-hidden`. A strip wider than its container scrolls sideways inside its own keyboard-focusable region, named after `label`, with the row labels pinned at the start and the same edge shade as `Table` while counts are scrolled out of view (the start shade is cast from the pinned labels' edge, since they cover the region's own); the page never scrolls sideways. The `tiles` layout stacks the column label, the count, and an optional `subtotal` string per column. Each tiles row shows its label line (icon, label and `total`) when the grid has several rows, or when a lone row has an icon or a `total`; a lone plain row is named by the grid's `label` alone. Every row is a region named by its `label`, except a lone plain row whose `label` is the grid's own: it has no name of its own, so assistive technology hears the grid's group once rather than a region repeating it. `rowRole="group"` (default `"region"`) keeps every named row's name but makes it a `group` instead of a landmark region, for a page with many grids (one per order card, say) whose rows would otherwise fill the landmark list; the strip ignores it, since its rows are table rows, and an unknown `rowRole` throws a `RangeError` in either layout. A row's icon and its label words stay on one line in both layouts (`sw-denomination-label-line`): a long label wraps its words beside the icon, never under it, and on a phone the strip's total goes on its own line under them. A row's `cellTones` (one Badge tone or `null` per column) tones a single count in place: the count is set in the tone over its signed or zero look, and in the tiles layout its tile's border takes the tone too, so a short bill turns red without leaving its row; `neutral` or `null` leaves a count as it is, a row's `tone` still colors only its label, and a `cellTones` that is not one known tone or `null` per column throws. The tone never says why on its own; put that in words beside the grid. Every negative count, signed or not and in either layout, is written with the typographic minus ("−1"), never a hyphen. The primitive does no arithmetic and no currency formatting; tones reuse the Badge vocabulary. Invalid columns, rows, or cells throw.
 
 A strip row with `entry` makes its counts editable: each column holds a `Stepper` (`width="full"`, its label hidden and named by the row label and the column's label and caption as its header reads, such as "Received $20" or "Counted $1 × 100") whose count is the row's `cells` entry (`null` is an empty box). `entry.onChange(columnKey, value)` reports a change; `entry.decrementLabel` and `entry.incrementLabel` name the buttons; `entry.max` caps each column (`null` for none), `entry.errors` puts a message under a column's count (`null` for none), and `entry.placeholder` fills an empty box. `entry.limitAppearance` is the Steppers' `limitAppearance`: `"plain"` keeps − at 0 (and + at a cap) unfaded. The minimum is 0. The grid still does no arithmetic, so recompute the row's `total` in `onChange`. A strip with an entry row centres its heads and read-only counts over the steppers, and each count keeps spacing step 8 of room, so a narrow strip scrolls in its region instead of crushing it. A `cellTones` tone on an entry count draws its border in the tone (danger for a difference); an `accent` tone, for a suggestion or a change, is the `Stepper`'s `changed` look (border and tint); a message in `entry.errors` wins. A row `caption` is a muted line under its label ("from the customer"), and a column `caption` a muted note after its label ("× 100"). Captions show in both layouts. In the strip, `emphasis="quiet"` sets a row on the subtle fill, for a row to compare against, and `disabled` fades a row that does not apply, disables its entry and marks it `aria-disabled`. Entry rows, quiet rows and disabled rows need the `strip` layout. An entry row's counts are zero or more and it is not `signed`; its label is its own among the entry rows, as each column's label and caption are, so every count has its own name. Breaking any of these, a cap or message list that is not one per column, a cap that is not a whole count of zero or more, blank button names or captions, an unknown `emphasis`, or a `disabled` that is not a boolean throws a `RangeError`.
 

package/dist/components/DenominationGrid.d.ts

@@ -2,7 +2,7 @@ import { denominationGridFrames, denominationTotalEmphases } from '../css/css-de
 import { denominationCellToneAppearances } from '../css/css-denomination-cell-tones.js';
 import { denominationLabelAppearances } from '../css/css-denomination-label.js';
 import { type DenominationGridProps } from './denomination-grid/types.js';
-export type { DenominationCellToneAppearance, DenominationGridColumn, DenominationGridEntry, DenominationGridFrame, DenominationGridLayout, DenominationGridProps, DenominationGridRow, DenominationGridRowEmphasis, DenominationGridRowRole, DenominationGridTone, DenominationLabelWidth, DenominationTotalEmphasis, } from './denomination-grid/types.js';
+export type { DenominationCellToneAppearance, DenominationGridColumn, DenominationGridEntry, DenominationGridFrame, DenominationGridLayout, DenominationGridProps, DenominationGridRow, DenominationGridRowEmphasis, DenominationGridRowRole, DenominationGridTone, DenominationGridValueRow, DenominationLabelWidth, DenominationTotalEmphasis, } from './denomination-grid/types.js';
 export type { DenominationLabelAppearance } from '../css/css-denomination-label.js';
 export { denominationCellToneAppearances, denominationGridFrames, denominationLabelAppearances, denominationTotalEmphases, };
 export declare function DenominationGrid({ label, columns, rows, layout, subtotal, zeroLabel, totalLabel, rowRole, labelWidth, labelAppearance, frame, totalEmphasis, cellToneAppearance, }: DenominationGridProps): import("react").JSX.Element;

package/dist/components/DenominationGrid.js

@@ -7,6 +7,7 @@ import { denominationLabelAppearances, denominationLabelsPlainClass, } from '../
 import { DenominationStrip } from './denomination-grid/DenominationStrip.js';
 import { DenominationTiles } from './denomination-grid/DenominationTiles.js';
 import { assertDenominationGrid } from './denomination-grid/validate.js';
+import { assertDenominationValueRows } from './denomination-grid/validate-value-row.js';
 import { assertDenominationEntries, assertDenominationExtras, } from './denomination-grid/validate-entry.js';
 export { denominationCellToneAppearances, denominationGridFrames, denominationLabelAppearances, denominationTotalEmphases, };
 /** Fails closed on a value outside a closed set, naming the prop. */
@@ -18,6 +19,7 @@ export function DenominationGrid({ label, columns, rows, layout = 'strip', subto
     assertDenominationGrid(label, columns, rows);
     assertDenominationExtras(layout, columns, rows);
     assertDenominationEntries(layout, columns, rows);
+    assertDenominationValueRows(layout, columns, rows);
     if (typeof zeroLabel !== 'string')
         throw new RangeError('zeroLabel must be a string');
     if (totalLabel !== undefined && !totalLabel.trim())

package/dist/components/Stepper.d.ts

@@ -38,6 +38,11 @@ export type StepperProps = {
     readOnly?: boolean;
     /** Says the count in words for assistive technology (`aria-valuetext`), such as "12 straps". */
     valueText?: string;
+    /**
+     * Ids of elements that describe the count, such as the value it adds up
+     * to; read before an `error`'s message.
+     */
+    'aria-describedby'?: string;
     /** Shown in an empty box, such as "0". */
     placeholder?: string;
     name?: string;

package/dist/components/Stepper.js

@@ -15,7 +15,7 @@ function keepFocus(event) {
  * tab stop (the count, a spin button that ArrowUp and ArrowDown step), with
  * the buttons as pointer targets beside it. − stops at `min`, + at `max`.
  */
-export const Stepper = forwardRef(function Stepper({ label, labelVisuallyHidden = false, value, onChange, min = 0, max = Number.POSITIVE_INFINITY, step = 1, decrementLabel, incrementLabel, error, changed = false, disabled = false, readOnly = false, valueText, placeholder, name, width = 'fixed', limitAppearance = 'faded', }, ref) {
+export const Stepper = forwardRef(function Stepper({ label, labelVisuallyHidden = false, value, onChange, min = 0, max = Number.POSITIVE_INFINITY, step = 1, decrementLabel, incrementLabel, error, changed = false, disabled = false, readOnly = false, valueText, 'aria-describedby': describedBy, placeholder, name, width = 'fixed', limitAppearance = 'faded', }, ref) {
     const bounds = { min, max, step };
     assertStepperBounds(bounds);
     if (!stepperLimitAppearances.includes(limitAppearance))
@@ -76,7 +76,9 @@ export const Stepper = forwardRef(function Stepper({ label, labelVisuallyHidden
     return (_jsxs("div", { className: cx('sw-stepper', width === 'full' && 'sw-stepper-full', invalid && 'sw-stepper-invalid', changed && !invalid && 'sw-stepper-changed', readOnly && 'sw-stepper-readonly', limitAppearance === 'plain' &&
             !disabled &&
             !readOnly &&
-            'sw-stepper-limit-plain'), children: [_jsx("label", { className: labelVisuallyHidden ? 'sw-sr-only' : undefined, htmlFor: inputId, id: labelId, children: _jsx(FieldLabelText, { label: label }) }), _jsxs("div", { "aria-labelledby": labelId, className: "sw-stepper-track", role: "group", children: [_jsx("button", { "aria-controls": inputId, "aria-label": decrementLabel, className: "sw-stepper-button", disabled: moves.down === null, onClick: () => move(moves.down), onMouseDown: keepFocus, tabIndex: -1, type: "button", children: _jsx("span", { "aria-hidden": "true", children: '−' }) }), _jsx("input", { ref: ref, "aria-describedby": invalid ? errorId : undefined, "aria-invalid": invalid || undefined, "aria-valuemax": Number.isFinite(max) ? max : undefined, "aria-valuemin": min, "aria-valuenow": value ?? undefined, "aria-valuetext": valueText, autoComplete: "off", className: "sw-stepper-input", disabled: disabled, id: inputId, 
+            'sw-stepper-limit-plain'), children: [_jsx("label", { className: labelVisuallyHidden ? 'sw-sr-only' : undefined, htmlFor: inputId, id: labelId, children: _jsx(FieldLabelText, { label: label }) }), _jsxs("div", { "aria-labelledby": labelId, className: "sw-stepper-track", role: "group", children: [_jsx("button", { "aria-controls": inputId, "aria-label": decrementLabel, className: "sw-stepper-button", disabled: moves.down === null, onClick: () => move(moves.down), onMouseDown: keepFocus, tabIndex: -1, type: "button", children: _jsx("span", { "aria-hidden": "true", children: '−' }) }), _jsx("input", { ref: ref, "aria-describedby": [describedBy?.trim() || null, invalid ? errorId : null]
+                            .filter((id) => id !== null)
+                            .join(' ') || undefined, "aria-invalid": invalid || undefined, "aria-valuemax": Number.isFinite(max) ? max : undefined, "aria-valuemin": min, "aria-valuenow": value ?? undefined, "aria-valuetext": valueText, autoComplete: "off", className: "sw-stepper-input", disabled: disabled, id: inputId, 
                         // iOS's numeric pad has no minus key, so a range below zero takes
                         // the text keyboard.
                         inputMode: allowsNegative ? 'text' : 'numeric', name: name, onBlur: () => setDraft(null), onChange: onType, onKeyDown: onKeyDown, placeholder: placeholder, readOnly: readOnly, role: "spinbutton", type: "text", value: text }), _jsx("button", { "aria-controls": inputId, "aria-label": incrementLabel, className: "sw-stepper-button", disabled: moves.up === null, onClick: () => move(moves.up), onMouseDown: keepFocus, tabIndex: -1, type: "button", children: _jsx("span", { "aria-hidden": "true", children: "+" }) })] }), _jsx(FieldErrorRegion, { className: "sw-field-error", id: errorId, message: error })] }));

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
 import { cx } from '../../class-names.js';
 import { denominationLabelWidthClass } from '../../css/css-denomination-aligned.js';
 import { denominationFramedClass, denominationScrollFramedClass, } from '../../css/css-denomination-appearance.js';
@@ -18,6 +19,7 @@ function TotalHead({ totalLabel }) {
     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, }) {
+    const idPrefix = useId();
     const hasTotals = rows.some((row) => row.total !== undefined);
     // An aligned strip sizes its columns from the region's width; it needs
     // the column count and whether a total column takes a share.
@@ -27,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) => (_jsx(StripRow, { columns: columns, hasTotals: hasTotals, row: row, 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, 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

@@ -4,6 +4,8 @@ type EntryCellProps = {
     entry: DenominationGridEntry;
     column: DenominationGridColumn;
     index: number;
+    /** The value cell under this count, which describes it, if any. */
+    describedBy?: string;
 };
 /**
  * One editable count of a strip row: a full-width `Stepper` named by the
@@ -11,5 +13,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 }: EntryCellProps): import("react").JSX.Element;
+export declare function EntryCell({ row, entry, column, index, describedBy, }: 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 }) {
+export function EntryCell({ row, entry, column, index, describedBy, }) {
     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, 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)), 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.d.ts

@@ -4,10 +4,16 @@ type StripRowProps = {
     columns: readonly DenominationGridColumn[];
     zeroLabel: string;
     hasTotals: boolean;
+    /** A per-grid prefix that keeps the value cells' ids unique on the page. */
+    idPrefix: string;
+    /** The row's place in the grid, for its value cells' ids. */
+    rowIndex: number;
 };
 /**
  * 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 declare function StripRow({ row, columns, zeroLabel, hasTotals, }: StripRowProps): import("react").JSX.Element;
+export declare function StripRow({ row, columns, zeroLabel, hasTotals, idPrefix, rowIndex, }: StripRowProps): import("react").JSX.Element;
 export {};

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/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/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';

package/dist/styles.css

@@ -4907,6 +4907,41 @@ body {
   color: var(--sw-color-text);
 }
 
+.sw-denomination-strip .sw-denomination-value-row,
+.sw-denomination-strip .sw-denomination-value-row .sw-denomination-label {
+  background: var(--sw-color-subtle);
+}
+
+.sw-denomination-strip .sw-denomination-value-row :is(th, td) {
+  padding-block: var(--sw-space-2);
+}
+
+.sw-denomination-strip .sw-denomination-value-row .sw-denomination-value {
+  color: var(--sw-color-text);
+  font-size: 15px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 500;
+  letter-spacing: -0.2px;
+  line-height: 20px;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.sw-denomination-strip .sw-denomination-value-row.sw-denomination-row-disabled .sw-denomination-value {
+  opacity: var(--sw-disabled-opacity);
+}
+
+@media not all and (min-width: 48rem) {
+  .sw-denomination-strip .sw-denomination-value-row :is(th, td) { padding-block: var(--sw-space-1); }
+  .sw-denomination-strip .sw-denomination-value-row .sw-denomination-total { padding: 0; }
+}
+
+@media (forced-colors: active) {
+  .sw-denomination-strip .sw-denomination-value-row,
+  .sw-denomination-strip .sw-denomination-value-row .sw-denomination-label { background: Canvas; }
+  .sw-denomination-strip .sw-denomination-value-row .sw-denomination-value { color: CanvasText; }
+}
+
 @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; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalewing/react",
-  "version": "1.36.0",
+  "version": "1.37.0",
   "description": "Scalewing DOM components and package-owned CSS utilities.",
   "type": "module",
   "license": "MIT",