@scalewing/react 1.40.0 → 1.42.0

package/dist/components/NavCount.d.ts

@@ -1,3 +1,6 @@
+/** The pill's colours: `danger` for work waiting, `accent` for news. */
+export declare const navCountTones: readonly ["danger", "accent"];
+export type NavCountTone = (typeof navCountTones)[number];
 export type NavCountProps = {
     /**
      * How many things wait behind the destination, such as tasks to do: a
@@ -11,11 +14,21 @@ export type NavCountProps = {
      * pill then hidden from assistive technology.
      */
     countLabel?: string;
+    /**
+     * The pill's colour. `danger` (the default) is work waiting there, such
+     * as tasks to do; `accent` is news, such as what was added since the
+     * person last looked, where nothing is overdue. Give an accent count a
+     * `countLabel` ("3 new"), so its words, not its colour, say it is news.
+     * Place either tone on a neutral or ghost destination: a filled one of
+     * the same colour would hide it.
+     */
+    tone?: NavCountTone;
 };
 /**
  * A count after a Nav destination's words, placed inside its link or
  * Button: `<a href="/tasks">Tasks<NavCount count={8} /></a>`. It is the
  * pill SectionNav's item count draws, and it is part of the destination's
- * accessible name, as there.
+ * accessible name, as there. `tone="accent"` draws it in the accent colour,
+ * for news rather than work.
  */
-export declare function NavCount({ count, countLabel }: NavCountProps): import("react").JSX.Element | null;
+export declare function NavCount({ count, countLabel, tone, }: NavCountProps): import("react").JSX.Element | null;

package/dist/components/NavCount.js

@@ -1,23 +1,33 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-/** Fails closed on a count that is not a whole number or an empty label. */
-function assertNavCount({ count, countLabel }) {
+import { cx } from '../class-names.js';
+import { isOneOf } from '../is-one-of.js';
+/** The pill's colours: `danger` for work waiting, `accent` for news. */
+export const navCountTones = ['danger', 'accent'];
+/**
+ * Fails closed on a count that is not a whole number, an empty label or an
+ * unknown tone.
+ */
+function assertNavCount({ count, countLabel, tone }) {
     if (!Number.isInteger(count) || count < 0)
         throw new RangeError(`NavCount count must be a whole number from 0: ${String(count)}`);
     if (countLabel !== undefined &&
         (typeof countLabel !== 'string' || !countLabel.trim()))
         throw new RangeError('NavCount countLabel must be non-empty text');
+    if (tone !== undefined && !isOneOf(navCountTones, tone))
+        throw new RangeError(`Unknown NavCount tone: ${String(tone)}`);
 }
 /**
  * A count after a Nav destination's words, placed inside its link or
  * Button: `<a href="/tasks">Tasks<NavCount count={8} /></a>`. It is the
  * pill SectionNav's item count draws, and it is part of the destination's
- * accessible name, as there.
+ * accessible name, as there. `tone="accent"` draws it in the accent colour,
+ * for news rather than work.
  */
-export function NavCount({ count, countLabel }) {
-    assertNavCount({ count, countLabel });
+export function NavCount({ count, countLabel, tone = 'danger', }) {
+    assertNavCount({ count, countLabel, tone });
     if (count === 0)
         return null;
     // The space is its own text node, so every browser and the name's
     // computation keep it between the words and the count.
-    return (_jsxs(_Fragment, { children: [' ', countLabel ? _jsx("span", { className: "sw-sr-only", children: countLabel }) : null, _jsx("span", { "aria-hidden": countLabel ? true : undefined, className: "sw-nav-count", children: count })] }));
+    return (_jsxs(_Fragment, { children: [' ', countLabel ? _jsx("span", { className: "sw-sr-only", children: countLabel }) : null, _jsx("span", { "aria-hidden": countLabel ? true : undefined, className: cx('sw-nav-count', tone === 'accent' && 'sw-nav-count-accent'), children: count })] }));
 }

package/dist/components/SegmentedControl.d.ts

@@ -1,5 +1,8 @@
 import { type ReactNode } from 'react';
 import { type AccessibleName } from '../accessible-name.js';
+import { type Breakpoint } from '../css/breakpoints.js';
+import { type SegmentedSize, segmentedSizes } from '../css/css-segmented-sizing.js';
+export { segmentedSizes, type SegmentedSize };
 export type SegmentedItem = {
     id: string;
     label: ReactNode;
@@ -46,6 +49,19 @@ export type SegmentedControlProps = AccessibleName & SegmentedChange & {
     error?: string;
     /** Sets `aria-required` on the group; the visible mark belongs to the element that labels it. */
     required?: boolean;
+    /**
+     * Below this breakpoint the control fills its column and its segments
+     * share the width equally, whatever the variant, such as a period
+     * switch across a phone. From it up it keeps its own width.
+     */
+    fullWidthBelow?: Breakpoint;
+    /**
+     * `sm` pads every segment a step less and keeps each label on one line
+     * (ending in an ellipsis past its share; its name keeps the whole
+     * label), so three or four segments with counts fit a phone's card.
+     * Keep the labels short enough to fit: the hidden part cannot be read.
+     * `md` (the default) is the variant's own padding.
+     */
+    size?: SegmentedSize;
 };
 export declare const SegmentedControl: import("react").ForwardRefExoticComponent<SegmentedControlProps & import("react").RefAttributes<HTMLDivElement>>;
-export {};

package/dist/components/SegmentedControl.js

@@ -2,11 +2,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useId } from 'react';
 import { cx } from '../class-names.js';
+import { breakpoints } from '../css/breakpoints.js';
 import { segmentedRaisedClass } from '../css/css-segmented-raised.js';
+import { segmentedFullWidthClass, segmentedSizes, segmentedSmClass, } from '../css/css-segmented-sizing.js';
 import { FieldErrorRegion } from './FieldErrorRegion.js';
 import { tabStop } from '../tab-stop.js';
-export const SegmentedControl = forwardRef(function SegmentedControl({ disabled = false, error, items, onChange, required = false, value, variant = 'compact', ...labelProps }, ref) {
+export { segmentedSizes };
+export const SegmentedControl = forwardRef(function SegmentedControl({ disabled = false, error, fullWidthBelow, items, onChange, required = false, size = 'md', value, variant = 'compact', ...labelProps }, ref) {
     const errorId = useId();
+    if (fullWidthBelow !== undefined &&
+        !breakpoints.includes(fullWidthBelow))
+        throw new RangeError(`Unknown SegmentedControl fullWidthBelow: ${String(fullWidthBelow)}`);
+    if (!segmentedSizes.includes(size))
+        throw new RangeError(`Unknown SegmentedControl size: ${String(size)}`);
     const withIcons = items.some((item) => item.icon);
     function onKeyDown(event) {
         if (disabled || (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft')) {
@@ -25,7 +33,7 @@ export const SegmentedControl = forwardRef(function SegmentedControl({ disabled
     }
     // The wrapper is always rendered, so an error that appears later swaps
     // text into a live region that already exists and the group keeps focus.
-    return (_jsxs("div", { className: cx('sw-segmented-field', variant === 'filled' && 'sw-segmented-field-filled'), children: [_jsx("div", { ref: ref, "aria-describedby": error ? errorId : undefined, "aria-disabled": disabled || undefined, "aria-invalid": error ? true : undefined, "aria-required": required || undefined, className: cx('sw-segmented', variant === 'filled' && 'sw-segmented-filled', variant === 'raised' && segmentedRaisedClass, withIcons && 'sw-segmented-with-icons', disabled && 'sw-segmented-disabled'), onKeyDown: onKeyDown, role: "radiogroup", ...labelProps, children: items.map((item) => {
+    return (_jsxs("div", { className: cx('sw-segmented-field', variant === 'filled' && 'sw-segmented-field-filled', fullWidthBelow && segmentedFullWidthClass(fullWidthBelow)), children: [_jsx("div", { ref: ref, "aria-describedby": error ? errorId : undefined, "aria-disabled": disabled || undefined, "aria-invalid": error ? true : undefined, "aria-required": required || undefined, className: cx('sw-segmented', variant === 'filled' && 'sw-segmented-filled', variant === 'raised' && segmentedRaisedClass, withIcons && 'sw-segmented-with-icons', disabled && 'sw-segmented-disabled', size === 'sm' && segmentedSmClass), onKeyDown: onKeyDown, role: "radiogroup", ...labelProps, children: items.map((item) => {
                     const selected = item.id === value;
                     return (_jsxs("button", { "aria-checked": selected, className: cx('sw-segmented-item', selected && 'sw-segmented-item-selected'), disabled: disabled, onClick: () => {
                             if (!selected) {
@@ -34,6 +42,6 @@ export const SegmentedControl = forwardRef(function SegmentedControl({ disabled
                         }, role: "radio", 
                         // Every item stays a tab stop, as each already was outside
                         // Safari: the arrow keys change the value, not the focus.
-                        tabIndex: tabStop, type: "button", children: [item.icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-segmented-item-icon", children: item.icon })) : null, item.label] }, item.id));
+                        tabIndex: tabStop, type: "button", children: [item.icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-segmented-item-icon", children: item.icon })) : null, size === 'sm' ? (_jsx("span", { className: "sw-segmented-item-label", children: item.label })) : (item.label)] }, item.id));
                 }) }), _jsx(FieldErrorRegion, { className: "sw-field-error", id: errorId, message: error })] }));
 });

package/dist/components/Switch.d.ts

@@ -1,8 +1,23 @@
+import { type SwitchCheckedTone, switchCheckedTones, type SwitchLayout, switchLayouts } from '../css/css-switch.js';
+export { switchCheckedTones, switchLayouts, type SwitchCheckedTone, type SwitchLayout, };
 export type SwitchProps = {
     label: string;
     checked: boolean;
     onCheckedChange: (checked: boolean) => void;
     disabled?: boolean;
     description?: string;
+    /**
+     * `leading` (the default) puts the control before its label;
+     * `trailing` puts the label and description first and the control at
+     * the row's end, the row as wide as its column, as a settings list
+     * draws it.
+     */
+    layout?: SwitchLayout;
+    /**
+     * The track's colour while on: `accent` (the default) or `success`, for
+     * a switch whose on state is the healthy one, such as a feature turned
+     * on. The thumb's place says the state either way.
+     */
+    checkedTone?: SwitchCheckedTone;
 };
-export declare function Switch({ label, checked, onCheckedChange, disabled, description, }: SwitchProps): import("react").JSX.Element;
+export declare function Switch({ label, checked, onCheckedChange, disabled, description, layout, checkedTone, }: SwitchProps): import("react").JSX.Element;

package/dist/components/Switch.js

@@ -1,12 +1,23 @@
 'use client';
-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 { useId } from 'react';
+import { cx } from '../class-names.js';
+import { switchCheckedTones, switchLayouts, } from '../css/css-switch.js';
 import { tabStop } from '../tab-stop.js';
-export function Switch({ label, checked, onCheckedChange, disabled = false, description, }) {
+export { switchCheckedTones, switchLayouts, };
+function assertOneOf(values, value, prop) {
+    if (!values.includes(value))
+        throw new RangeError(`Unknown Switch ${prop}: ${String(value)}`);
+}
+export function Switch({ label, checked, onCheckedChange, disabled = false, description, layout = 'leading', checkedTone = 'accent', }) {
+    assertOneOf(switchLayouts, layout, 'layout');
+    assertOneOf(switchCheckedTones, checkedTone, 'checkedTone');
     const labelId = useId();
     const descriptionId = useId();
-    return (_jsxs("label", { className: "sw-switch", children: [_jsxs("span", { className: "sw-switch-control", children: [_jsx("input", { "aria-checked": checked, "aria-describedby": description ? descriptionId : undefined, "aria-labelledby": labelId, checked: checked, className: "sw-switch-input", disabled: disabled, onChange: (event) => {
-                            if (!disabled)
-                                onCheckedChange(event.currentTarget.checked);
-                        }, role: "switch", tabIndex: tabStop, type: "checkbox" }), _jsx("span", { "aria-hidden": "true", className: "sw-switch-track", children: _jsx("span", { className: "sw-switch-thumb" }) })] }), _jsxs("span", { className: "sw-switch-copy", children: [_jsx("span", { className: "sw-switch-label", id: labelId, children: label }), description ? (_jsx("span", { className: "sw-switch-description", id: descriptionId, children: description })) : null] })] }));
+    const control = (_jsxs("span", { className: "sw-switch-control", children: [_jsx("input", { "aria-checked": checked, "aria-describedby": description ? descriptionId : undefined, "aria-labelledby": labelId, checked: checked, className: "sw-switch-input", disabled: disabled, onChange: (event) => {
+                    if (!disabled)
+                        onCheckedChange(event.currentTarget.checked);
+                }, role: "switch", tabIndex: tabStop, type: "checkbox" }), _jsx("span", { "aria-hidden": "true", className: "sw-switch-track", children: _jsx("span", { className: "sw-switch-thumb" }) })] }));
+    const copy = (_jsxs("span", { className: "sw-switch-copy", children: [_jsx("span", { className: "sw-switch-label", id: labelId, children: label }), description ? (_jsx("span", { className: "sw-switch-description", id: descriptionId, children: description })) : null] }));
+    return (_jsx("label", { className: cx('sw-switch', layout === 'trailing' && 'sw-switch-trailing', checkedTone === 'success' && 'sw-switch-success'), children: layout === 'trailing' ? (_jsxs(_Fragment, { children: [copy, control] })) : (_jsxs(_Fragment, { children: [control, copy] })) }));
 }

package/dist/components/action-bar/ActionBarSummary.d.ts

@@ -5,18 +5,26 @@ export type ActionBarSummaryTone = (typeof actionBarSummaryTones)[number];
 export type ActionBarSummary = {
     /** What the figure is, such as "Counted". */
     label: string;
-    /** The figure, formatted by the consumer, such as "$33,790.00". */
+    /**
+     * The figure, formatted by the consumer, such as "$33,790.00". An empty
+     * string (or only spaces) means there is no figure yet, such as before
+     * anything is counted: the summary line is left out and the live region
+     * stays, so the first figure is announced when it arrives.
+     */
     value: string;
     /** A short line after the figure, such as "short $4,000.00". */
     detail?: string;
     /** Colors the value only; the words say why. Defaults to `default`. */
     tone?: ActionBarSummaryTone;
 };
+/** Whether the summary has a figure to show; an empty value has none yet. */
+export declare function hasActionBarSummaryFigure(summary: ActionBarSummary): boolean;
 export declare function assertActionBarSummary(summary: ActionBarSummary): void;
 /**
  * The bar's figure: its label, the value in the heading variant at tabular
  * figures, and its detail, on one baseline, wrapping as one phrase.
+ * Nothing while the value is empty.
  */
 export declare function ActionBarSummaryLine({ summary, }: {
     summary: ActionBarSummary;
-}): import("react").JSX.Element;
+}): import("react").JSX.Element | null;

package/dist/components/action-bar/ActionBarSummary.js

@@ -4,9 +4,15 @@ export const actionBarSummaryTones = ['default', 'danger', 'success'];
 function isBlank(text) {
     return typeof text !== 'string' || !text.trim();
 }
+/** Whether the summary has a figure to show; an empty value has none yet. */
+export function hasActionBarSummaryFigure(summary) {
+    return !isBlank(summary.value);
+}
 export function assertActionBarSummary(summary) {
-    if (isBlank(summary.label) || isBlank(summary.value))
-        throw new RangeError('ActionBar summary needs a label and a value');
+    if (isBlank(summary.label))
+        throw new RangeError('ActionBar summary needs a label');
+    if (typeof summary.value !== 'string')
+        throw new RangeError('ActionBar summary value must be a string');
     if (summary.detail !== undefined && isBlank(summary.detail))
         throw new RangeError('ActionBar summary detail must not be empty');
     if (summary.tone !== undefined &&
@@ -16,8 +22,11 @@ export function assertActionBarSummary(summary) {
 /**
  * The bar's figure: its label, the value in the heading variant at tabular
  * figures, and its detail, on one baseline, wrapping as one phrase.
+ * Nothing while the value is empty.
  */
 export function ActionBarSummaryLine({ summary, }) {
+    if (!hasActionBarSummaryFigure(summary))
+        return null;
     const tone = summary.tone ?? 'default';
     return (_jsxs("span", { className: cx('sw-action-bar-summary', tone !== 'default' && `sw-action-bar-summary-${tone}`), children: [_jsx("span", { className: "sw-action-bar-summary-label", children: summary.label }), ' ', _jsx("span", { className: "sw-action-bar-summary-value sw-text-heading sw-tabular", children: summary.value }), summary.detail ? (_jsxs(_Fragment, { children: [' ', _jsx("span", { className: "sw-action-bar-summary-detail", children: summary.detail })] })) : null] }));
 }

package/dist/components/chart/use-chart-width.js

@@ -1,6 +1,6 @@
 'use client';
-import { useLayoutEffect, useState } from 'react';
 import { chartFallbackWidth } from '../../chart-metrics.js';
+import { useElementWidth } from '../use-element-width.js';
 /**
  * Follows the width a chart is given, so its drawing is laid out in its
  * own pixels: on mount, before the first paint, and whenever its box
@@ -8,27 +8,5 @@ import { chartFallbackWidth } from '../../chart-metrics.js';
  * no ResizeObserver measures on window resizes instead.
  */
 export function useChartWidth(ref) {
-    const [width, setWidth] = useState(chartFallbackWidth);
-    // Before paint, so a phone never shows the wide layout first.
-    useLayoutEffect(() => {
-        const box = ref.current;
-        if (!box)
-            return;
-        function measure() {
-            if (!box)
-                return;
-            const next = Math.round(box.getBoundingClientRect().width);
-            if (next > 0)
-                setWidth(next);
-        }
-        measure();
-        if (typeof ResizeObserver === 'undefined') {
-            window.addEventListener('resize', measure);
-            return () => window.removeEventListener('resize', measure);
-        }
-        const observer = new ResizeObserver(measure);
-        observer.observe(box);
-        return () => observer.disconnect();
-    }, [ref]);
-    return width;
+    return useElementWidth(ref, chartFallbackWidth);
 }

package/dist/components/date-field/CalendarEntryButton.d.ts

@@ -0,0 +1,24 @@
+import { type Ref } from 'react';
+import { type CalendarPopup } from './use-calendar-popup.js';
+export type CalendarEntryButtonProps = {
+    id: string;
+    /** The field's label element, which names the button with its words. */
+    labelId: string;
+    describedBy: string | undefined;
+    value: string;
+    locale: string;
+    /** What an empty field shows, such as "Choose a day". */
+    emptyText: string;
+    disabled: boolean;
+    invalid: boolean;
+    buttonRef: Ref<HTMLButtonElement>;
+    trigger: CalendarPopup['trigger'];
+    onPress: () => void;
+};
+/**
+ * DateField's calendar entry: a neutral Button showing the calendar glyph
+ * and the chosen day, or the words that ask for one, that opens the
+ * calendar. It is named by the field's label and its own words ("Hire date
+ * Choose a day", "Hire date Oct 6, 2026") and described as the field is.
+ */
+export declare function CalendarEntryButton({ id, labelId, describedBy, value, locale, emptyText, disabled, invalid, buttonRef, trigger, onPress, }: CalendarEntryButtonProps): import("react").JSX.Element;

package/dist/components/date-field/CalendarEntryButton.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { formatDateMedium } from '../../calendar-labels.js';
+import { cx } from '../../class-names.js';
+import { Button } from '../Button.js';
+import { DateFieldGlyph } from './DateFieldGlyph.js';
+/**
+ * DateField's calendar entry: a neutral Button showing the calendar glyph
+ * and the chosen day, or the words that ask for one, that opens the
+ * calendar. It is named by the field's label and its own words ("Hire date
+ * Choose a day", "Hire date Oct 6, 2026") and described as the field is.
+ */
+export function CalendarEntryButton({ id, labelId, describedBy, value, locale, emptyText, disabled, invalid, buttonRef, trigger, onPress, }) {
+    const textId = useId();
+    return (_jsxs(Button, { ...trigger, "aria-describedby": describedBy, "aria-labelledby": `${labelId} ${textId}`, className: cx('sw-date-field-calendar-entry', invalid && 'sw-date-field-calendar-entry-invalid'), disabled: disabled, id: id, onPress: onPress, ref: buttonRef, variant: "neutral", children: [_jsx(DateFieldGlyph, { name: "calendar" }), _jsx("span", { className: "sw-date-field-calendar-entry-text", id: textId, children: value ? formatDateMedium(value, locale) : emptyText })] }));
+}

package/dist/components/date-field/TypedEntry.d.ts

@@ -0,0 +1,26 @@
+import { type Ref } from 'react';
+import { type CalendarPopup } from './use-calendar-popup.js';
+import { type DateEntry } from './use-date-entry.js';
+export type TypedEntryProps = {
+    id: string;
+    /** The field's label element, which describes the calendar button. */
+    labelId: string;
+    describedBy: string | undefined;
+    entry: DateEntry;
+    placeholder: string;
+    /** The calendar button's name, `labels.chooseDate`. */
+    toggleName: string;
+    disabled: boolean;
+    required: boolean;
+    invalid: boolean;
+    controlRef: Ref<HTMLDivElement>;
+    inputRef: Ref<HTMLInputElement>;
+    buttonRef: Ref<HTMLButtonElement>;
+    trigger: CalendarPopup['trigger'];
+    onToggle: () => void;
+};
+/**
+ * DateField's typed entry: the text input in the locale's order, checked
+ * on blur and Enter, and the calendar button inside its end.
+ */
+export declare function TypedEntry({ id, labelId, describedBy, entry, placeholder, toggleName, disabled, required, invalid, controlRef, inputRef, buttonRef, trigger, onToggle, }: TypedEntryProps): import("react").JSX.Element;

package/dist/components/date-field/TypedEntry.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tabStop } from '../../tab-stop.js';
+import { DateFieldGlyph } from './DateFieldGlyph.js';
+/**
+ * DateField's typed entry: the text input in the locale's order, checked
+ * on blur and Enter, and the calendar button inside its end.
+ */
+export function TypedEntry({ id, labelId, describedBy, entry, placeholder, toggleName, disabled, required, invalid, controlRef, inputRef, buttonRef, trigger, onToggle, }) {
+    return (_jsxs("div", { className: "sw-date-field-control", ref: controlRef, children: [_jsx("input", { "aria-describedby": describedBy, "aria-invalid": invalid, autoComplete: "off", className: "sw-date-field-input", disabled: disabled, id: id, onBlur: entry.check, onChange: (event) => entry.change(event.currentTarget.value), onKeyDown: (event) => {
+                    if (event.key === 'Enter')
+                        entry.check();
+                }, placeholder: placeholder, ref: inputRef, required: required, spellCheck: false, type: "text", value: entry.text }), _jsxs("button", { ...trigger, "aria-describedby": labelId, className: "sw-date-field-button", disabled: disabled, onClick: onToggle, ref: buttonRef, tabIndex: tabStop, type: "button", children: [_jsx("span", { className: "sw-sr-only", children: toggleName }), _jsx(DateFieldGlyph, { name: "calendar" })] })] }));
+}

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

@@ -0,0 +1,16 @@
+import { type DenominationGridRow } from './types.js';
+type CountCellProps = {
+    row: DenominationGridRow;
+    index: number;
+    zeroLabel: string;
+    /** More classes for the cell, such as the transposed layout's row look. */
+    className?: string;
+};
+/**
+ * One count, read-only: the zero label, a signed delta, and the cell's tone.
+ * A signed row's positive count is success; a negative count is danger
+ * unless its row's `negativeAppearance` is `plain`. The value has its own
+ * box, which the `pill` tone appearance fills.
+ */
+export declare function CountCell({ row, index, zeroLabel, className, }: CountCellProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../../class-names.js';
+import { denominationCellToneClassNames } from '../../css/css-denomination-cell-tones.js';
+import { denominationCellView } from '../../denomination-cells.js';
+/**
+ * One count, read-only: the zero label, a signed delta, and the cell's tone.
+ * A signed row's positive count is success; a negative count is danger
+ * unless its row's `negativeAppearance` is `plain`. The value has its own
+ * box, which the `pill` tone appearance fills.
+ */
+export function CountCell({ row, index, zeroLabel, className, }) {
+    const view = denominationCellView(row.cells[index] ?? null, row.signed ?? false, zeroLabel);
+    return (_jsx("td", { className: cx('sw-denomination-cell', `sw-denomination-cell-${view.state}`, row.signed && 'sw-denomination-cell-signed', row.negativeAppearance === 'plain' && 'sw-denomination-cell-plain', ...denominationCellToneClassNames(row.cellTones?.[index]), className), children: _jsx("span", { className: "sw-denomination-cell-value", children: view.text }) }));
+}

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

@@ -1,9 +1,12 @@
+import { type CSSProperties } from 'react';
 import { type DenominationGridProps } from './types.js';
 type StripProps = Required<Pick<DenominationGridProps, 'label' | 'columns' | 'rows' | 'zeroLabel'>> & Pick<DenominationGridProps, 'totalLabel' | 'labelWidth'> & {
     /** The grid's appearance classes (labels, totals, cell tones), if any. */
     className?: string;
     /** The `table` frame: a hairline around the region and a heading-row fill. */
     framed: boolean;
+    /** The entry counts' room (`countDigits`), if set. */
+    countStyle?: CSSProperties;
 };
-export declare function DenominationStrip({ className, framed, label, columns, rows, zeroLabel, totalLabel, labelWidth, }: StripProps): import("react").JSX.Element;
+export declare function DenominationStrip({ className, countStyle, framed, label, columns, rows, zeroLabel, totalLabel, labelWidth, }: StripProps): import("react").JSX.Element;
 export {};

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

@@ -18,7 +18,7 @@ function TotalHead({ totalLabel }) {
         return _jsx("td", { className: "sw-denomination-corner sw-denomination-total-head" });
     return (_jsx("th", { className: "sw-denomination-head sw-denomination-total-head", scope: "col", children: _jsx("span", { className: "sw-denomination-total-label", children: totalLabel }) }));
 }
-export function DenominationStrip({ className, framed, label, columns, rows, zeroLabel, totalLabel, labelWidth, }) {
+export function DenominationStrip({ className, countStyle, framed, label, columns, rows, zeroLabel, totalLabel, labelWidth, }) {
     const idPrefix = useId();
     const hasTotals = rows.some((row) => row.total !== undefined);
     // An aligned strip sizes its columns from the region's width; it needs
@@ -29,5 +29,5 @@ export function DenominationStrip({ className, framed, label, columns, rows, zer
             '--sw-denomination-columns': columns.length,
             '--sw-denomination-total': hasTotals ? 1 : 0,
         };
-    return (_jsx(ScrollRegion, { "aria-label": label, className: cx('sw-denomination-scroll', aligned && 'sw-denomination-scroll-aligned', framed && denominationScrollFramedClass), children: _jsxs("table", { className: cx('sw-denomination-grid sw-denomination-strip', labelWidth && 'sw-denomination-strip-aligned', rows.some((row) => row.entry) && 'sw-denomination-strip-entry', labelWidth && denominationLabelWidthClass(labelWidth), framed && denominationFramedClass, className), style: aligned, children: [_jsx("caption", { className: "sw-sr-only", children: label }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("td", { className: "sw-denomination-corner" }), columns.map((column) => (_jsx("th", { className: "sw-denomination-head", scope: "col", children: _jsx(ColumnHeadText, { column: column }) }, column.key))), hasTotals ? _jsx(TotalHead, { totalLabel: totalLabel }) : null] }) }), _jsx("tbody", { children: rows.map((row, rowIndex) => (_jsx(StripRow, { columns: columns, hasTotals: hasTotals, idPrefix: idPrefix, row: row, rowIndex: rowIndex, zeroLabel: zeroLabel }, row.id))) })] }) }));
+    return (_jsx(ScrollRegion, { "aria-label": label, className: cx('sw-denomination-scroll', aligned && 'sw-denomination-scroll-aligned', framed && denominationScrollFramedClass), children: _jsxs("table", { className: cx('sw-denomination-grid sw-denomination-strip', labelWidth && 'sw-denomination-strip-aligned', rows.some((row) => row.entry) && 'sw-denomination-strip-entry', labelWidth && denominationLabelWidthClass(labelWidth), framed && denominationFramedClass, className), style: aligned || countStyle ? { ...aligned, ...countStyle } : undefined, children: [_jsx("caption", { className: "sw-sr-only", children: label }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("td", { className: "sw-denomination-corner" }), columns.map((column) => (_jsx("th", { className: "sw-denomination-head", scope: "col", children: _jsx(ColumnHeadText, { column: column }) }, column.key))), hasTotals ? _jsx(TotalHead, { totalLabel: totalLabel }) : null] }) }), _jsx("tbody", { children: rows.map((row, rowIndex) => (_jsx(StripRow, { columns: columns, hasTotals: hasTotals, idPrefix: idPrefix, row: row, rowIndex: rowIndex, zeroLabel: zeroLabel }, row.id))) })] }) }));
 }

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

@@ -6,6 +6,8 @@ type EntryCellProps = {
     index: number;
     /** The value cell under this count, which describes it, if any. */
     describedBy?: string;
+    /** More classes for the cell, such as the transposed layout's row look. */
+    className?: string;
 };
 /**
  * One editable count of a strip row: a full-width `Stepper` named by the
@@ -13,5 +15,5 @@ type EntryCellProps = {
  * message from the entry, and the cell's tone on its border (an accent one
  * is the Stepper's changed look).
  */
-export declare function EntryCell({ row, entry, column, index, describedBy, }: EntryCellProps): import("react").JSX.Element;
+export declare function EntryCell({ row, entry, column, index, describedBy, className, }: EntryCellProps): import("react").JSX.Element;
 export {};

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

@@ -9,8 +9,8 @@ import { columnName } from './ColumnHeadText.js';
  * message from the entry, and the cell's tone on its border (an accent one
  * is the Stepper's changed look).
  */
-export function EntryCell({ row, entry, column, index, describedBy, }) {
+export function EntryCell({ row, entry, column, index, describedBy, className, }) {
     const max = entry.max?.[index] ?? undefined;
     const tone = row.cellTones?.[index];
-    return (_jsx("td", { className: cx('sw-denomination-entry', ...denominationCellToneClassNames(tone)), children: _jsx(Stepper, { "aria-describedby": describedBy, changed: tone === 'accent', decrementLabel: entry.decrementLabel, disabled: row.disabled, error: entry.errors?.[index] ?? undefined, incrementLabel: entry.incrementLabel, label: `${row.label} ${columnName(column)}`, labelVisuallyHidden: true, limitAppearance: entry.limitAppearance, max: max, onChange: (value) => entry.onChange(column.key, value), placeholder: entry.placeholder, value: row.cells[index] ?? null, width: "full" }) }));
+    return (_jsx("td", { className: cx('sw-denomination-entry', ...denominationCellToneClassNames(tone), className), children: _jsx(Stepper, { "aria-describedby": describedBy, changed: tone === 'accent', decrementLabel: entry.decrementLabel, disabled: row.disabled, error: entry.errors?.[index] ?? undefined, incrementLabel: entry.incrementLabel, label: `${row.label} ${columnName(column)}`, labelVisuallyHidden: true, limitAppearance: entry.limitAppearance, max: max, onChange: (value) => entry.onChange(column.key, value), placeholder: entry.placeholder, value: row.cells[index] ?? null, width: "full" }) }));
 }

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

@@ -1,19 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { cx } from '../../class-names.js';
-import { denominationCellToneClassNames } from '../../css/css-denomination-cell-tones.js';
-import { denominationCellView } from '../../denomination-cells.js';
+import { CountCell } from './CountCell.js';
 import { EntryCell } from './EntryCell.js';
 import { RowLabelLine } from './RowLabelLine.js';
 import { StripTotalCell, StripTotalInline } from './StripTotal.js';
 import { hasValue, StripValueRow, valueCellId } from './StripValueRow.js';
-/**
- * One count, read-only: the zero label, a signed delta, and the cell's tone.
- * The value has its own box, which the `pill` tone appearance fills.
- */
-function CountCell({ row, index, zeroLabel, }) {
-    const view = denominationCellView(row.cells[index] ?? null, row.signed ?? false, zeroLabel);
-    return (_jsx("td", { className: cx('sw-denomination-cell', `sw-denomination-cell-${view.state}`, ...denominationCellToneClassNames(row.cellTones?.[index])), children: _jsx("span", { className: "sw-denomination-cell-value", children: view.text }) }));
-}
 /**
  * One strip row: its pinned label (with the phone total under it), a count
  * per column, read-only or entered, and its total. With a `valueRow`, the

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

@@ -0,0 +1,17 @@
+import { type CSSProperties } from 'react';
+import { type DenominationGridProps } from './types.js';
+type TransposedProps = Required<Pick<DenominationGridProps, 'label' | 'columns' | 'rows' | 'zeroLabel'>> & Pick<DenominationGridProps, 'totalLabel'> & {
+    /** The grid's appearance classes (cell tones), if any. */
+    className?: string;
+    /** The entry counts' room, as the strip's. */
+    style?: CSSProperties;
+};
+/**
+ * A strip drawn for a phone: a row per denomination (its label and
+ * caption), a column per grid row (its counts, read-only or entered, then
+ * its value line's values), and the totals in a last row named by
+ * `totalLabel`. Names, entry, tones and the zero label are the strip's;
+ * the denomination column stays in view while the columns scroll under it.
+ */
+export declare function TransposedStrip({ className, style, label, columns, rows, zeroLabel, totalLabel, }: TransposedProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,43 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useId } from 'react';
+import { cx } from '../../class-names.js';
+import { ScrollRegion } from '../ScrollRegion.js';
+import { ColumnHeadText } from './ColumnHeadText.js';
+import { CountCell } from './CountCell.js';
+import { EntryCell } from './EntryCell.js';
+import { RowLabelLine } from './RowLabelLine.js';
+import { hasValue, valueCellId } from './StripValueRow.js';
+/** The look a grid row lends each of its cells in a column. */
+function columnClass(row) {
+    return (cx(row.emphasis === 'quiet' && 'sw-denomination-transposed-quiet', row.disabled && 'sw-denomination-transposed-disabled') || undefined);
+}
+/**
+ * A grid row's heads: its label (glyph, words, caption), then its value
+ * line's. A disabled row says so on its heads (a column header may be
+ * `aria-disabled`), as the strip's row does, since a column has no element
+ * of its own.
+ */
+function RowHeads({ row }) {
+    return (_jsxs(_Fragment, { children: [_jsx("th", { "aria-disabled": row.disabled || undefined, className: cx('sw-denomination-head sw-denomination-transposed-head', columnClass(row)), scope: "col", children: _jsx(RowLabelLine, { row: row }) }), row.valueRow ? (_jsx("th", { "aria-disabled": row.disabled || undefined, "aria-label": `${row.label} ${row.valueRow.label}`, className: cx('sw-denomination-head sw-denomination-transposed-head', columnClass(row)), scope: "col", children: row.valueRow.label })) : null] }));
+}
+/** A grid row's total: under its value line when it has one, else under its counts. */
+function RowTotal({ row }) {
+    const total = (_jsx("td", { className: cx('sw-denomination-transposed-total', `sw-denomination-row-${row.tone ?? 'neutral'}`, columnClass(row)), children: row.total ?? '' }));
+    return row.valueRow ? (_jsxs(_Fragment, { children: [_jsx("td", { className: columnClass(row) }), total] })) : (total);
+}
+/**
+ * A strip drawn for a phone: a row per denomination (its label and
+ * caption), a column per grid row (its counts, read-only or entered, then
+ * its value line's values), and the totals in a last row named by
+ * `totalLabel`. Names, entry, tones and the zero label are the strip's;
+ * the denomination column stays in view while the columns scroll under it.
+ */
+export function TransposedStrip({ className, style, label, columns, rows, zeroLabel, totalLabel, }) {
+    const idPrefix = useId();
+    const hasTotals = rows.some((row) => row.total !== undefined);
+    return (_jsx(ScrollRegion, { "aria-label": label, className: "sw-denomination-scroll sw-denomination-scroll-transposed", children: _jsxs("table", { className: cx('sw-denomination-grid sw-denomination-transposed', rows.some((row) => row.entry) && 'sw-denomination-transposed-entry', className), style: style, children: [_jsx("caption", { className: "sw-sr-only", children: label }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("td", { className: "sw-denomination-corner" }), rows.map((row) => (_jsx(RowHeads, { row: row }, row.id)))] }) }), _jsx("tbody", { children: columns.map((column, index) => (_jsxs("tr", { className: "sw-denomination-row", children: [_jsx("th", { className: "sw-denomination-transposed-label", scope: "row", children: _jsx(ColumnHeadText, { column: column }) }), rows.map((row, rowIndex) => {
+                                const value = row.valueRow?.cells[index];
+                                const valueId = valueCellId(idPrefix, rowIndex, index);
+                                return (_jsxs(Fragment, { children: [row.entry ? (_jsx(EntryCell, { className: columnClass(row), column: column, describedBy: hasValue(value) ? valueId : undefined, entry: row.entry, index: index, row: row })) : (_jsx(CountCell, { className: columnClass(row), index: index, row: row, zeroLabel: zeroLabel })), row.valueRow ? (_jsx("td", { className: cx('sw-denomination-transposed-value', columnClass(row)), id: valueId, children: hasValue(value) ? value : '' })) : null] }, row.id));
+                            })] }, column.key))) }), hasTotals ? (_jsx("tfoot", { children: _jsxs("tr", { className: "sw-denomination-row", children: [totalLabel === undefined ? (_jsx("td", { className: "sw-denomination-corner" })) : (_jsx("th", { className: "sw-denomination-transposed-label", scope: "row", children: totalLabel })), rows.map((row) => (_jsx(RowTotal, { row: row }, row.id)))] }) })) : null] }) }));
+}

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

@@ -8,6 +8,15 @@ import { type StepperLimitAppearance } from '../Stepper.js';
 export type { DenominationCellToneAppearance, DenominationGridFrame, DenominationLabelWidth, DenominationTotalEmphasis, };
 export type DenominationGridTone = BadgeTone;
 export type DenominationGridLayout = 'strip' | 'tiles';
+/** How a negative count reads: in the danger colour, or plain text. */
+export declare const denominationNegativeAppearances: readonly ["danger", "plain"];
+export type DenominationGridNegativeAppearance = (typeof denominationNegativeAppearances)[number];
+/**
+ * The widths below which a strip is drawn transposed: the denominations as
+ * rows, the grid's rows as columns.
+ */
+export declare const denominationTransposeBreakpoints: readonly ["md", "lg"];
+export type DenominationTransposeBreakpoint = (typeof denominationTransposeBreakpoints)[number];
 /**
  * What a named tiles row is to assistive technology: a `region` (a landmark,
  * the default) or a `group` (named, but not in the landmark list).
@@ -77,6 +86,13 @@ export type DenominationGridRow = {
     cellTones?: readonly (DenominationGridTone | null)[];
     /** A muted line under the label, such as "from the customer". */
     caption?: string;
+    /**
+     * How a negative count reads: `danger` (the default) in the danger
+     * colour; `plain` in the text colour, with its minus sign, for counts
+     * that go out by design, such as bills paid out (cash out is never an
+     * error, so never red).
+     */
+    negativeAppearance?: DenominationGridNegativeAppearance;
     /** The `strip` layout only. */
     emphasis?: DenominationGridRowEmphasis;
     /**
@@ -164,4 +180,19 @@ export type DenominationGridProps = {
      * changed count in accent. Entry counts and tiles keep their tone border.
      */
     cellToneAppearance?: DenominationCellToneAppearance;
+    /**
+     * Below this breakpoint (`md` or `lg`) the strip is drawn transposed,
+     * for a phone: one row per denomination (its label and caption) and one
+     * column per grid row (its label over its counts, entry steppers or
+     * value line), the totals in a last row. Its names, entry, cell tones
+     * and zero label are the strip's. The `strip` layout only.
+     */
+    transposeBelow?: DenominationTransposeBreakpoint;
+    /**
+     * The digits an entry count holds without clipping, from 3 (the
+     * default room) to 6: a column of steppers keeps that many digits'
+     * width before the strip scrolls, such as 4 for a count in the
+     * thousands in a grid of seven columns. Entry rows only.
+     */
+    countDigits?: number;
 };