@scalewing/react 1.26.0 → 1.27.0

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

@@ -31,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';
@@ -44,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,
@@ -164,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[];

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

@@ -0,0 +1,78 @@
+import { typographyVariants } from '@scalewing/tokens';
+const caption = typographyVariants.caption;
+/** An enabled entry count, unless its Stepper shows an error (whose danger border wins). */
+const tonedEntryInput = '[data-theme] .sw-denomination-cell-toned .sw-stepper:not(.sw-stepper-invalid) input.sw-stepper-input:not(:disabled)';
+/*
+ * Count entry and the labels around it. An entry cell holds a full-width
+ * Stepper; its count keeps spacing step 8 (room for three digits), so a narrow strip scrolls
+ * in its region instead of crushing the counts. A cell tone draws the
+ * count's border in the tone, a hairline thicker through an inset shadow so
+ * nothing moves. A caption is a muted caption-size line: under a row label,
+ * or after a column label. A quiet row sits on the subtle fill, its pinned
+ * label too. A disabled row fades its label, counts and total (its entry is
+ * disabled by its Stepper); a pinned label fades its contents, not its
+ * fill, so counts never show through it.
+ */
+export function cssDenominationEntryClasses() {
+    return `.sw-denomination-strip td.sw-denomination-entry {
+  padding: var(--sw-space-1);
+}
+
+.sw-denomination-entry .sw-stepper-full .sw-stepper-track {
+  grid-template-columns: var(--sw-space-6) minmax(var(--sw-space-8), 1fr) var(--sw-space-6);
+}
+
+/* A strip with entry rows centres its heads and read-only counts over the steppers. */
+.sw-denomination-strip-entry .sw-denomination-head:not(.sw-denomination-total-head),
+.sw-denomination-strip-entry .sw-denomination-cell {
+  text-align: center;
+}
+
+${tonedEntryInput} {
+  border-color: var(--sw-denomination-cell-tone);
+  box-shadow: inset 0 0 0 1px var(--sw-denomination-cell-tone);
+}
+
+.sw-denomination-label-words {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.sw-denomination-label-caption,
+.sw-denomination-head-caption {
+  color: var(--sw-color-muted);
+  font-size: ${caption.fontSize}px;
+  font-weight: ${caption.fontWeight};
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+}
+
+.sw-denomination-row-quiet,
+.sw-denomination-strip .sw-denomination-row-quiet .sw-denomination-label {
+  background: var(--sw-color-subtle);
+}
+
+.sw-denomination-strip .sw-denomination-row-disabled .sw-denomination-label-body,
+.sw-denomination-strip .sw-denomination-row-disabled .sw-denomination-cell,
+.sw-denomination-strip .sw-denomination-row-disabled .sw-denomination-total {
+  opacity: var(--sw-disabled-opacity);
+}
+
+@media (forced-colors: active) {
+  ${tonedEntryInput} { border-color: Highlight; box-shadow: inset 0 0 0 1px Highlight; }
+  .sw-denomination-label-caption,
+  .sw-denomination-head-caption { color: CanvasText; }
+}`;
+}
+export function denominationEntryClassCatalog() {
+    return [
+        'sw-denomination-entry',
+        'sw-denomination-strip-entry',
+        'sw-denomination-label-words',
+        'sw-denomination-label-caption',
+        'sw-denomination-head-caption',
+        'sw-denomination-row-quiet',
+        'sw-denomination-row-disabled',
+    ];
+}

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

@@ -2,6 +2,7 @@ import { typographyVariants } from '@scalewing/tokens';
 import { breakpointQuery } from './breakpoints.js';
 import { badgeTones } from './css-data.js';
 import { cssDenominationAlignedClasses, denominationAlignedClassCatalog, } from './css-denomination-aligned.js';
+import { cssDenominationEntryClasses, denominationEntryClassCatalog, } from './css-denomination-entry.js';
 import { cssDenominationCellToneClasses, denominationCellToneClassCatalog, } from './css-denomination-cell-tones.js';
 import { pinnedStartShadeRules, scrollRegionRules, } from './css-scroll-region.js';
 import { visuallyHiddenDeclarations } from './css-utilities.js';
@@ -249,6 +250,8 @@ ${pinnedStartShadeRules('.sw-denomination-scroll', [
 
 ${cssDenominationCellToneClasses()}
 
+${cssDenominationEntryClasses()}
+
 ${cssDenominationAlignedClasses()}
 
 @media (forced-colors: active) {
@@ -290,6 +293,7 @@ export function denominationGridClassCatalog() {
         'sw-denomination-tile',
         'sw-denomination-subtotal',
         ...denominationCellToneClassCatalog(),
+        ...denominationEntryClassCatalog(),
         ...denominationAlignedClassCatalog(),
     ];
 }

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

@@ -0,0 +1,10 @@
+/**
+ * The web Stepper: a label over a track of − count +. The count is a few
+ * digits wide by default, the track at its own width even under a wider label
+ * or message (`5ch` plus its padding, so its width never follows
+ * its value), or fills its container with `sw-stepper-full`. The buttons are
+ * spacing step 6 wide on the subtle fill and every part is the `md` control
+ * height.
+ */
+export declare function cssStepperClasses(): string;
+export declare function stepperClassCatalog(): string[];