@scalewing/react 1.16.0 → 1.17.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @scalewing/react
 
+## 1.17.0
+
+### Minor Changes
+
+- 7bb0397: `DenominationGrid` row `cellTones` (`docs/requests/teisoro-denomination-grid.md`, 2026-10-02 follow-up, Teisoro F-007 task 1550, MOV-10): `cellTones?: readonly (DenominationGridTone | null)[]`, one entry per column, tones a single count in place. The count is set in the tone (over a signed row's color and a zero's quiet opacity), and in the tiles layout the tile's border takes the tone too, without moving or resizing the tile. `neutral` or `null` leaves a count as it is; a row's `tone` is unchanged. The wrong length or an unknown tone throws a `RangeError`. New generated classes `sw-denomination-cell-toned` and `sw-denomination-cell-tone-{accent,success,danger,warning}`. No new dependencies.
+- 051e0ec: `DenominationGrid` `rowRole` (`docs/requests/teisoro-denomination-grid.md`, 2026-10-02 follow-up, Teisoro F-007 task 1550, CHG-4): `rowRole?: 'region' | 'group'`, default `'region'`. At `'group'` each named tiles row keeps its `aria-label` but is a `group`, not a landmark region, so a page with many grids does not list a region per row. The default keeps today's regions; the strip ignores the prop; an unknown value throws a `RangeError`. New exported type `DenominationGridRowRole`. No new dependencies.
+- b810ce3: `Dialog` `titleLevel` (`docs/requests/teisoro-dialog-title-level.md`, Teisoro F-007 task 1550, CHG-13): `titleLevel?: 2 | 3`, default `3`, sets the heading level of the dialog's title. `titleLevel={2}` renders it as an `h2` in the same title style, so a dialog's own section labels can be `h3` headings that read as its parts rather than its peers. The default keeps the `h3` every existing dialog has. New exported type `DialogTitleLevel`. No new dependencies.
+- 0a49a53: A wide `Table` (and `DenominationGrid` strip) shows that it scrolls (`docs/requests/teisoro-table.md`, 2026-10-02 follow-up, Teisoro F-007 task 1550, VLT-1 and HIS-3). While its content is scrolled out past an inline edge, the scroll region adds `sw-scroll-more-start` and/or `sw-scroll-more-end` and that edge draws a soft inset shade (the text color at 28%, spacing steps 6 and 5), mirrored right to left, under the content so nothing moves. A table that fits is unchanged: no class, no shadow. The region measures on mount, on scroll and on resize; before mount and on the server it reports no overflow. In forced colors the system scrollbar is the cue. New generated classes `sw-scroll-more-start` and `sw-scroll-more-end`; no prop changes and no new dependencies.
+
+### Patch Changes
+
+- 1648c50: `DenominationGrid` writes a negative count with the typographic minus "−" (U+2212), not a hyphen-minus (`docs/requests/teisoro-denomination-grid.md`, 2026-10-02 follow-up, Teisoro F-007 task 1550, AUD-18). It applies to every negative count, in signed and unsigned rows and in both layouts, so a count matches the sign of the consumer's formatted money. The cell's text is the only change: a test that matched `-1` in a cell now matches `−1`. No API change and no new dependencies.
+
 ## 1.16.0
 
 ### Minor Changes

package/README.md

@@ -155,7 +155,7 @@ A `Button` that toggles something passes `aria-pressed`. The pressed button gets
 
 `ActionMenu` opens independent commands from a labelled button. Provide localized command labels and callbacks; use `disabled` for unavailable commands and `destructive` for a dangerous command's presentation. Escape and choosing a command both return focus to the trigger (before the command runs, so a `Dialog` it opens hands focus back to the trigger on close), and outside interaction dismisses the menu. The open menu sits on the popover layer a `space-1` gap below its trigger (above it when it only fits there), at least `space-2` from every viewport edge (a classic scrollbar is not part of the viewport), and aligned to the trigger's inline start (its right edge in right-to-left), or to its other edge when the trigger ends a row and the menu would not fit from its start. `align="end"` (default `"start"`) lines the menu up with the trigger's inline end even where the start would fit, for a trigger that ends a card or a list row, so the menu stays over that card instead of hanging past it; it takes the start when the end would leave the screen. The menu is as wide as its longest command up to the viewport less both insets, and a longer command wraps. The menu follows its trigger through scroll, window resize, and a change in the menu's or the trigger's size. The menu is in the DOM only while it is open. The trigger and its commands use the compact xs control height for a fine pointer; on a coarse pointer the trigger is at least 44 × 44 px (the md control height, as on `CalendarButton`) and every command is at least 44 px tall.
 
-`Dialog` is a modal `<dialog>` controlled by `open`. Escape, a backdrop press, a platform close request, and a `<form method="dialog">` submit (or a submitter with `formmethod="dialog"`) are each prevented and call `onClose`; none of them closes the dialog itself. A consumer `onKeyDown`, `onCancel`, `onSubmit` or `onPointerDown` that prevents the event vetoes that request. Escape in a search field that holds text clears the field first, and a descendant's own `cancel` (a dismissed file picker) is not a close request. Set `open` to false to close it, or keep it true (for example while a form is saving) and it stays shown. `onClose` is not called when `open` turns false, and it is required: a dialog that must not be dismissed passes a callback that keeps `open` true.
+`Dialog` is a modal `<dialog>` controlled by `open`. Escape, a backdrop press, a platform close request, and a `<form method="dialog">` submit (or a submitter with `formmethod="dialog"`) are each prevented and call `onClose`; none of them closes the dialog itself. A consumer `onKeyDown`, `onCancel`, `onSubmit` or `onPointerDown` that prevents the event vetoes that request. Escape in a search field that holds text clears the field first, and a descendant's own `cancel` (a dismissed file picker) is not a close request. Set `open` to false to close it, or keep it true (for example while a form is saving) and it stays shown. `onClose` is not called when `open` turns false, and it is required: a dialog that must not be dismissed passes a callback that keeps `open` true. The `title` is an `h3` in the title style by default; `titleLevel={2}` renders it as an `h2` in the same style, for a dialog whose own section labels are `h3` headings, so they read as parts of the dialog and not as its peers. The default stays `3` so existing dialogs keep their outline; any value other than `2` renders an `h3`.
 
 `Toast` is an auto-dismiss confirmation on the popover layer, controlled by `open` and `onOpenChange`; it does not trap focus and closes after `timeoutMs` (default 800, or 6000 for a `warning` or `danger` toast, which must be read). `anchor` and `target` send it from a press to a destination. `tone` (`neutral` by default, `success`, `warning`, `danger`) tints its border and an optional consumer `icon` (a Lucide glyph, hidden from assistive technology); the message keeps the text color, so its words carry the meaning. A `danger` toast is announced as `role="alert"`, the others as `role="status"`, so do not wrap the message in another live region. A toast still dismisses itself: an error the person must act on belongs in the page. A toast is as wide as its message, up to the page's gutter (spacing step 4) on each side, so on a phone a long message wraps inside the gutter instead of running to the screen's edges.
 
@@ -218,7 +218,7 @@ An option's optional `description` (a `ReactNode`) is secondary text for that op
 />
 ```
 
-`Table` aligns data in rows inside its own keyboard-reachable scroll region, named after the table. `TableCell` takes `numeric` (tabular numerals, end aligned), `align` and `truncate`; `density="compact"` densifies cells. `TableRow selected` sets `aria-selected` and marks the row with a 4 px accent bar at its inline start (3:1 or more against the surface and the page), the right edge in a right-to-left table. The bar is drawn inside the first cell's padding and takes no layout space, so no column moves when a row is picked, and the row takes no fill, so text, muted and accent text keep their contrast; forced colors keep the bar in the system highlight.
+`Table` aligns data in rows inside its own keyboard-reachable scroll region, named after the table. While the table is wider than the region, each inline edge with columns scrolled out past it draws a soft inset shade (`sw-scroll-more-start`, `sw-scroll-more-end`, mirrored right to left), so a phone, whose scrollbars stay hidden, still shows that the table goes on; a table that fits draws none, and in forced colors the system scrollbar is the cue. `TableCell` takes `numeric` (tabular numerals, end aligned), `align` and `truncate`; `density="compact"` densifies cells. `TableRow selected` sets `aria-selected` and marks the row with a 4 px accent bar at its inline start (3:1 or more against the surface and the page), the right edge in a right-to-left table. The bar is drawn inside the first cell's padding and takes no layout space, so no column moves when a row is picked, and the row takes no fill, so text, muted and accent text keep their contrast; forced colors keep the bar in the system highlight.
 
 `Spinner` shows indeterminate loading in small, medium, or large sizes. Supply localized `label` for the one announced status in a loading region. Use `decorative` on additional indicators beside that status so screen readers do not hear the same message repeatedly. Reduced motion leaves a static accented ring.
 
@@ -262,7 +262,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 for a screen reader: it renders a visually hidden `th scope="col"`, and without it the corner stays an empty cell as before (either way the column takes no width on a phone). 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; 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. 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. 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 for a screen reader: it renders a visually hidden `th scope="col"`, and without it the corner stays an empty cell as before (either way the column takes no width on a phone). 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.
 
 `FilterChips` presents a long, wrapping single-choice filter set. Provide a localized group `label`, controlled `value`, `onChange`, and options with stable values and localized labels. An optional non-negative integer `count` renders as a tabular chicklet after the label and is part of the option's accessible name; a zero count quiets the chip until it is selected: it drops its glass fill and sets its label in the muted color (4.5:1 in every palette), without fading, since it can still be chosen. Native radios provide arrow and Space navigation; disabled options are skipped.
 

package/dist/components/DenominationGrid.d.ts

@@ -1,3 +1,3 @@
 import { type DenominationGridProps } from './denomination-grid/types.js';
-export type { DenominationGridColumn, DenominationGridLayout, DenominationGridProps, DenominationGridRow, DenominationGridTone, } from './denomination-grid/types.js';
-export declare function DenominationGrid({ label, columns, rows, layout, subtotal, zeroLabel, totalLabel, }: DenominationGridProps): import("react").JSX.Element;
+export type { DenominationGridColumn, DenominationGridLayout, DenominationGridProps, DenominationGridRow, DenominationGridRowRole, DenominationGridTone, } from './denomination-grid/types.js';
+export declare function DenominationGrid({ label, columns, rows, layout, subtotal, zeroLabel, totalLabel, rowRole, }: DenominationGridProps): import("react").JSX.Element;

package/dist/components/DenominationGrid.js

@@ -2,13 +2,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { DenominationStrip } from './denomination-grid/DenominationStrip.js';
 import { DenominationTiles } from './denomination-grid/DenominationTiles.js';
 import { assertDenominationGrid } from './denomination-grid/validate.js';
-export function DenominationGrid({ label, columns, rows, layout = 'strip', subtotal, zeroLabel = '—', totalLabel, }) {
+export function DenominationGrid({ label, columns, rows, layout = 'strip', subtotal, zeroLabel = '—', totalLabel, rowRole = 'region', }) {
     assertDenominationGrid(label, columns, rows);
     if (!zeroLabel)
         throw new RangeError('zeroLabel must not be empty');
     if (totalLabel !== undefined && !totalLabel.trim())
         throw new RangeError('totalLabel must not be empty');
+    if (rowRole !== 'region' && rowRole !== 'group')
+        throw new RangeError("rowRole must be 'region' or 'group'");
     if (layout === 'tiles')
-        return (_jsx(DenominationTiles, { columns: columns, label: label, rows: rows, subtotal: subtotal, zeroLabel: zeroLabel }));
+        return (_jsx(DenominationTiles, { columns: columns, label: label, rowRole: rowRole, rows: rows, subtotal: subtotal, zeroLabel: zeroLabel }));
     return (_jsx(DenominationStrip, { columns: columns, label: label, rows: rows, totalLabel: totalLabel, zeroLabel: zeroLabel }));
 }

package/dist/components/Dialog.d.ts

@@ -4,6 +4,11 @@ import { type DialogHTMLAttributes, type ReactNode } from 'react';
  * (56rem) holds a row of six fields or a data grid without folding it.
  */
 export type DialogSize = 'md' | 'lg';
+/**
+ * The heading level of the dialog's title. It changes only the element (and
+ * so the outline a screen reader reads), never the title's look.
+ */
+export type DialogTitleLevel = 2 | 3;
 export type DialogProps = Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onClose' | 'open' | 'title' | 'children'> & {
     /** Whether the dialog is shown. The element follows it and nothing else. */
     open: boolean;
@@ -19,6 +24,13 @@ export type DialogProps = Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onClose
     onClose: () => void;
     size?: DialogSize;
     title: string;
+    /**
+     * The title's heading level, 3 (an `h3`) by default. Pass 2 when the
+     * dialog's own sections are `h3` headings, so they read as parts of the
+     * dialog rather than as its peers. The title's style does not change.
+     * Any value other than 2 (from an untyped caller) renders an `h3`.
+     */
+    titleLevel?: DialogTitleLevel;
     children: ReactNode;
 };
-export declare function Dialog({ children, className, onCancel, onClose, onKeyDown, onPointerDown, onSubmit, open, size, title, ...rest }: DialogProps): import("react").JSX.Element;
+export declare function Dialog({ children, className, onCancel, onClose, onKeyDown, onPointerDown, onSubmit, open, size, title, titleLevel, ...rest }: DialogProps): import("react").JSX.Element;

package/dist/components/Dialog.js

@@ -6,7 +6,7 @@ import { spacingClassNames } from '../spacing-classes.js';
 import { useDialogCloseRequests } from './dialog-close-requests.js';
 import { Stack } from './Stack.js';
 import { Text } from './Text.js';
-export function Dialog({ children, className, onCancel, onClose, onKeyDown, onPointerDown, onSubmit, open, size = 'md', title, ...rest }) {
+export function Dialog({ children, className, onCancel, onClose, onKeyDown, onPointerDown, onSubmit, open, size = 'md', title, titleLevel = 3, ...rest }) {
     const titleId = useId();
     const { nodeRef, handlers } = useDialogCloseRequests({
         open,
@@ -16,5 +16,5 @@ export function Dialog({ children, className, onCancel, onClose, onKeyDown, onPo
         onPointerDown,
         onSubmit,
     });
-    return (_jsx("dialog", { ...rest, ref: nodeRef, "aria-labelledby": titleId, className: cx('sw-dialog', size === 'lg' && 'sw-dialog-lg', ...spacingClassNames({ padding: 5 }), className), ...handlers, children: _jsxs(Stack, { gap: 4, children: [_jsx(Text, { id: titleId, variant: "title", children: title }), children] }) }));
+    return (_jsx("dialog", { ...rest, ref: nodeRef, "aria-labelledby": titleId, className: cx('sw-dialog', size === 'lg' && 'sw-dialog-lg', ...spacingClassNames({ padding: 5 }), className), ...handlers, children: _jsxs(Stack, { gap: 4, children: [_jsx(Text, { as: titleLevel === 2 ? 'h2' : 'h3', id: titleId, variant: "title", children: title }), children] }) }));
 }

package/dist/components/ScrollRegion.d.ts

@@ -9,7 +9,10 @@ type ScrollRegionProps = {
  * Private wrapper that scrolls wide content inside its own box (see
  * `scrollRegionRules`). It is a keyboard stop named after its content, so a
  * wide table with no focusable cell can still be scrolled sideways from the
- * keyboard and is announced as one group.
+ * keyboard and is announced as one group. While content is scrolled out past
+ * an inline edge, that edge draws a shade (`sw-scroll-more-start`,
+ * `sw-scroll-more-end`), so a phone, whose scrollbars hide, still shows that
+ * the table goes on.
  */
 export declare function ScrollRegion({ children, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, }: ScrollRegionProps): import("react").JSX.Element;
 export {};

package/dist/components/ScrollRegion.js

@@ -1,10 +1,19 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { cx } from '../class-names.js';
+import { useScrollOverflow } from './use-scroll-overflow.js';
 /**
  * Private wrapper that scrolls wide content inside its own box (see
  * `scrollRegionRules`). It is a keyboard stop named after its content, so a
  * wide table with no focusable cell can still be scrolled sideways from the
- * keyboard and is announced as one group.
+ * keyboard and is announced as one group. While content is scrolled out past
+ * an inline edge, that edge draws a shade (`sw-scroll-more-start`,
+ * `sw-scroll-more-end`), so a phone, whose scrollbars hide, still shows that
+ * the table goes on.
  */
 export function ScrollRegion({ children, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, }) {
-    return (_jsx("div", { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className: className, role: "group", tabIndex: 0, children: children }));
+    const ref = useRef(null);
+    const overflow = useScrollOverflow(ref);
+    return (_jsx("div", { ref: ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className: cx(className, overflow.start && 'sw-scroll-more-start', overflow.end && 'sw-scroll-more-end'), role: "group", tabIndex: 0, children: children }));
 }

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

@@ -1,5 +1,6 @@
 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 { ScrollRegion } from '../ScrollRegion.js';
 import { RowLabelLine } from './RowLabelLine.js';
@@ -17,6 +18,6 @@ export function DenominationStrip({ label, columns, rows, zeroLabel, totalLabel,
     const hasTotals = rows.some((row) => row.total !== undefined);
     return (_jsx(ScrollRegion, { "aria-label": label, className: "sw-denomination-scroll", children: _jsxs("table", { className: "sw-denomination-grid sw-denomination-strip", children: [_jsx("caption", { className: "sw-sr-only", children: label }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("td", { className: "sw-denomination-corner" }), columns.map((column) => (_jsx("th", { className: "sw-denomination-head", scope: "col", children: column.label }, column.key))), hasTotals ? _jsx(TotalHead, { totalLabel: totalLabel }) : null] }) }), _jsx("tbody", { children: rows.map((row) => (_jsxs("tr", { className: cx('sw-denomination-row', `sw-denomination-row-${row.tone ?? 'neutral'}`, row.signed && 'sw-denomination-row-signed'), children: [_jsx("th", { className: "sw-denomination-label", scope: "row", children: _jsxs("span", { className: "sw-denomination-label-body", children: [_jsx(RowLabelLine, { row: row }), row.total !== undefined ? (_jsx("span", { "aria-hidden": "true", className: "sw-denomination-total-inline", children: row.total })) : null] }) }), columns.map((column, index) => {
                                 const view = denominationCellView(row.cells[index] ?? null, row.signed ?? false, zeroLabel);
-                                return (_jsx("td", { className: `sw-denomination-cell sw-denomination-cell-${view.state}`, children: view.text }, column.key));
+                                return (_jsx("td", { className: cx('sw-denomination-cell', `sw-denomination-cell-${view.state}`, ...denominationCellToneClassNames(row.cellTones?.[index])), children: view.text }, column.key));
                             }), hasTotals ? (_jsx("td", { className: "sw-denomination-total", children: _jsx("span", { className: "sw-denomination-total-value", children: row.total ?? '' }) })) : null] }, row.id))) })] }) }));
 }

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

@@ -1,4 +1,4 @@
 import { type DenominationGridProps } from './types.js';
-type TilesProps = Required<Pick<DenominationGridProps, 'label' | 'columns' | 'rows' | 'zeroLabel'>> & Pick<DenominationGridProps, 'subtotal'>;
-export declare function DenominationTiles({ label, columns, rows, subtotal, zeroLabel, }: TilesProps): import("react").JSX.Element;
+type TilesProps = Required<Pick<DenominationGridProps, 'label' | 'columns' | 'rows' | 'zeroLabel' | 'rowRole'>> & Pick<DenominationGridProps, 'subtotal'>;
+export declare function DenominationTiles({ label, columns, rows, rowRole, subtotal, zeroLabel, }: TilesProps): import("react").JSX.Element;
 export {};

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

@@ -1,5 +1,6 @@
 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 { RowLabelLine } from './RowLabelLine.js';
 /**
@@ -10,24 +11,28 @@ function showsRowLabel(rowCount, row) {
     return rowCount > 1 || Boolean(row.icon) || row.total !== undefined;
 }
 /**
- * A row is a region named by its label, except a lone row without its label
- * line whose label repeats the grid's: that region would only say the
- * group's name a second time (Teisoro SDAY-31). A lone row with its own
- * words keeps them, since nothing else on screen says them.
+ * A row is named by its label (a region, or a group at `rowRole="group"`),
+ * except a lone row without its label line whose label repeats the grid's:
+ * that name would only say the group's name a second time (Teisoro
+ * SDAY-31). A lone row with its own words keeps them, since nothing else on
+ * screen says them.
  */
 function namesRow(rowCount, row, gridLabel) {
     return showsRowLabel(rowCount, row) || row.label !== gridLabel;
 }
-export function DenominationTiles({ label, columns, rows, subtotal, zeroLabel, }) {
+export function DenominationTiles({ label, columns, rows, rowRole, subtotal, zeroLabel, }) {
     return (_jsx("div", { "aria-label": label, className: "sw-denomination-grid sw-denomination-tiles", role: "group", children: rows.map((row) => {
             const labelled = showsRowLabel(rows.length, row);
-            return (_jsxs("section", { "aria-label": namesRow(rows.length, row, label) ? row.label : undefined, className: cx('sw-denomination-row', `sw-denomination-row-${row.tone ?? 'neutral'}`), children: [labelled ? (_jsxs("span", { className: "sw-denomination-label", children: [_jsx(RowLabelLine, { row: row }), row.total !== undefined ? (_jsx("span", { className: "sw-denomination-total", children: row.total })) : null] })) : null, _jsx("ul", { className: "sw-denomination-tile-list", children: columns.map((column, index) => {
+            const named = namesRow(rows.length, row, label);
+            // A named section is a region; role="group" keeps the name without
+            // the landmark. An unnamed row stays a generic section either way.
+            return (_jsxs("section", { "aria-label": named ? row.label : undefined, className: cx('sw-denomination-row', `sw-denomination-row-${row.tone ?? 'neutral'}`), role: named && rowRole === 'group' ? 'group' : undefined, children: [labelled ? (_jsxs("span", { className: "sw-denomination-label", children: [_jsx(RowLabelLine, { row: row }), row.total !== undefined ? (_jsx("span", { className: "sw-denomination-total", children: row.total })) : null] })) : null, _jsx("ul", { className: "sw-denomination-tile-list", children: columns.map((column, index) => {
                             const cell = row.cells[index] ?? null;
                             const view = denominationCellView(cell, row.signed ?? false, zeroLabel);
                             const amount = subtotal && cell !== null && cell !== 0
                                 ? subtotal(cell, column)
                                 : null;
-                            return (_jsxs("li", { className: "sw-denomination-tile", children: [_jsx("span", { className: "sw-denomination-head", children: column.label }), _jsx("span", { className: `sw-denomination-cell sw-denomination-cell-${view.state}`, children: view.text }), subtotal ? (_jsx("span", { className: "sw-denomination-subtotal", children: amount ?? zeroLabel })) : null] }, column.key));
+                            return (_jsxs("li", { className: cx('sw-denomination-tile', ...denominationCellToneClassNames(row.cellTones?.[index])), children: [_jsx("span", { className: "sw-denomination-head", children: column.label }), _jsx("span", { className: `sw-denomination-cell sw-denomination-cell-${view.state}`, children: view.text }), subtotal ? (_jsx("span", { className: "sw-denomination-subtotal", children: amount ?? zeroLabel })) : null] }, column.key));
                         }) })] }, row.id));
         }) }));
 }

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

@@ -2,6 +2,11 @@ import { type ReactNode } from 'react';
 import { type BadgeTone } from '../../css/css-data.js';
 export type DenominationGridTone = BadgeTone;
 export type DenominationGridLayout = 'strip' | 'tiles';
+/**
+ * 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).
+ */
+export type DenominationGridRowRole = 'region' | 'group';
 export type DenominationGridColumn = {
     key: string;
     label: string;
@@ -14,6 +19,13 @@ export type DenominationGridRow = {
     tone?: DenominationGridTone;
     signed?: boolean;
     total?: string;
+    /**
+     * 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.
+     */
+    cellTones?: readonly (DenominationGridTone | null)[];
 };
 export type DenominationGridProps = {
     label: string;
@@ -27,4 +39,11 @@ export type DenominationGridProps = {
      * hidden column header), such as "Total". Only the strip has that column.
      */
     totalLabel?: string;
+    /**
+     * The role of each named row in the tiles layout: `region` (the default,
+     * a landmark named by the row's label) or `group` (the same name, not a
+     * landmark), for a page with many grids whose rows should not fill the
+     * landmark list. Only the tiles layout has row containers.
+     */
+    rowRole?: DenominationGridRowRole;
 };

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

@@ -1,3 +1,4 @@
+import { badgeTones } from '../../css/css-data.js';
 import { isDenominationCount } from '../../denomination-cells.js';
 export function assertDenominationGrid(label, columns, rows) {
     if (!label.trim())
@@ -15,4 +16,20 @@ export function assertDenominationGrid(label, columns, rows) {
         throw new RangeError('each row needs one cell per column');
     if (rows.some((row) => row.cells.some((cell) => !isDenominationCount(cell))))
         throw new RangeError('cells must be integers or null');
+    if (rows.some((row) => !hasValidCellTones(row, columns.length)))
+        throw new RangeError('cellTones needs one tone or null per column, from the Badge tones');
+}
+function hasValidCellTones(row, columnCount) {
+    const tones = row.cellTones;
+    if (tones === undefined)
+        return true;
+    if (!Array.isArray(tones) || tones.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 tone = tones[index];
+        if (tone !== null && !badgeTones.includes(tone))
+            return false;
+    }
+    return true;
 }

package/dist/components/use-scroll-overflow.d.ts

@@ -0,0 +1,9 @@
+import { type RefObject } from 'react';
+import { type ScrollOverflow } from '../scroll-overflow.js';
+/**
+ * Follows which inline edges of a scroll box have more content past them:
+ * on mount, on every scroll, and whenever the box or its content changes
+ * size. Before mount (and on the server) it reports no overflow, so the
+ * box renders as it always has until it is measured.
+ */
+export declare function useScrollOverflow(ref: RefObject<HTMLElement | null>): ScrollOverflow;

package/dist/components/use-scroll-overflow.js

@@ -0,0 +1,44 @@
+'use client';
+import { useEffect, useState } from 'react';
+import { noScrollOverflow, sameScrollOverflow, scrollOverflow, } from '../scroll-overflow.js';
+/**
+ * Follows which inline edges of a scroll box have more content past them:
+ * on mount, on every scroll, and whenever the box or its content changes
+ * size. Before mount (and on the server) it reports no overflow, so the
+ * box renders as it always has until it is measured.
+ */
+export function useScrollOverflow(ref) {
+    const [overflow, setOverflow] = useState(noScrollOverflow);
+    useEffect(() => {
+        const box = ref.current;
+        if (!box)
+            return;
+        function measure() {
+            if (!box)
+                return;
+            const next = scrollOverflow(box.scrollLeft, box.scrollWidth, box.clientWidth);
+            setOverflow((current) => sameScrollOverflow(current, next) ? current : next);
+        }
+        measure();
+        box.addEventListener('scroll', measure, { passive: true });
+        const resize = typeof ResizeObserver === 'undefined'
+            ? null
+            : new ResizeObserver(measure);
+        if (resize) {
+            resize.observe(box);
+            for (const child of Array.from(box.children))
+                resize.observe(child);
+        }
+        else {
+            window.addEventListener('resize', measure);
+        }
+        return () => {
+            box.removeEventListener('scroll', measure);
+            if (resize)
+                resize.disconnect();
+            else
+                window.removeEventListener('resize', measure);
+        };
+    }, [ref]);
+    return overflow;
+}

package/dist/css/css-denomination-cell-tones.d.ts

@@ -0,0 +1,9 @@
+import { type BadgeTone } from './css-data.js';
+/**
+ * The classes that tone one count: a marker that applies the shared rules and
+ * the tone that sets their color. A strip cell (`td`) and a tile (`li`) take
+ * the same pair; null or `neutral` leaves the cell untoned.
+ */
+export declare function denominationCellToneClassNames(tone: BadgeTone | null | undefined): string[];
+export declare function cssDenominationCellToneClasses(): string;
+export declare function denominationCellToneClassCatalog(): string[];

package/dist/css/css-denomination-cell-tones.js

@@ -0,0 +1,52 @@
+import { badgeTones } from './css-data.js';
+/**
+ * The tones a single count can take. `neutral` is the cell's own look, so it
+ * adds no class: a cell is toned only by a tone that says something.
+ */
+const cellTones = badgeTones.filter((tone) => tone !== 'neutral');
+/**
+ * The classes that tone one count: a marker that applies the shared rules and
+ * the tone that sets their color. A strip cell (`td`) and a tile (`li`) take
+ * the same pair; null or `neutral` leaves the cell untoned.
+ */
+export function denominationCellToneClassNames(tone) {
+    if (!tone || tone === 'neutral')
+        return [];
+    return ['sw-denomination-cell-toned', `sw-denomination-cell-tone-${tone}`];
+}
+/*
+ * A toned count is set in its tone, over a row's signed coloring and a
+ * zero's quiet opacity, and a toned tile draws its border in the tone, one
+ * hairline thicker with an inset shadow so no tile moves. The tone never
+ * carries meaning alone: the consumer's words say why a count is toned.
+ * Forced colors replace the tone with the system text color, and a toned
+ * zero keeps the zero's GrayText there, so it does not read as a count.
+ */
+export function cssDenominationCellToneClasses() {
+    const toneRules = cellTones
+        .map((tone) => `.sw-denomination-cell-tone-${tone} { --sw-denomination-cell-tone: var(--sw-color-${tone}); }`)
+        .join('\n');
+    return `${toneRules}
+
+.sw-denomination-grid .sw-denomination-cell.sw-denomination-cell-toned,
+.sw-denomination-grid .sw-denomination-cell-toned .sw-denomination-cell {
+  color: var(--sw-denomination-cell-tone);
+  opacity: 1;
+}
+
+.sw-denomination-tile.sw-denomination-cell-toned {
+  border-color: var(--sw-denomination-cell-tone);
+  box-shadow: inset 0 0 0 1px var(--sw-denomination-cell-tone);
+}
+
+@media (forced-colors: active) {
+  .sw-denomination-grid .sw-denomination-cell-zero.sw-denomination-cell-toned,
+  .sw-denomination-grid .sw-denomination-cell-toned .sw-denomination-cell-zero { color: GrayText; }
+}`;
+}
+export function denominationCellToneClassCatalog() {
+    return [
+        'sw-denomination-cell-toned',
+        ...cellTones.map((tone) => `sw-denomination-cell-tone-${tone}`),
+    ];
+}

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

@@ -1,7 +1,8 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { breakpointQuery } from './breakpoints.js';
 import { badgeTones } from './css-data.js';
-import { scrollRegionRules } from './css-scroll-region.js';
+import { cssDenominationCellToneClasses, denominationCellToneClassCatalog, } from './css-denomination-cell-tones.js';
+import { pinnedStartShadeRules, scrollRegionRules, } from './css-scroll-region.js';
 import { visuallyHiddenDeclarations } from './css-utilities.js';
 import { zIndex } from './stacking.js';
 const caption = typographyVariants.caption;
@@ -25,6 +26,11 @@ ${toneRules()}
 
 ${scrollRegionRules('.sw-denomination-scroll')}
 
+${pinnedStartShadeRules('.sw-denomination-scroll', [
+        '.sw-denomination-strip .sw-denomination-label',
+        '.sw-denomination-strip thead .sw-denomination-corner:first-child',
+    ])}
+
 .sw-denomination-strip {
   border-collapse: collapse;
   width: 100%;
@@ -239,6 +245,8 @@ ${scrollRegionRules('.sw-denomination-scroll')}
   .sw-denomination-tile-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 }
 
+${cssDenominationCellToneClasses()}
+
 @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; }
@@ -276,5 +284,6 @@ export function denominationGridClassCatalog() {
         'sw-denomination-tile-list',
         'sw-denomination-tile',
         'sw-denomination-subtotal',
+        ...denominationCellToneClassCatalog(),
     ];
 }

package/dist/css/css-scroll-region.d.ts

@@ -2,7 +2,21 @@
  * A scroll region is a full-width box that scrolls its own content when the
  * content is wider (or taller) than the box, so a wide table never widens the
  * page. It is a keyboard stop, so its focus ring is drawn inside its edge
- * where an ancestor's clipping cannot hide it. Table and the DenominationGrid
- * strip share it.
+ * where an ancestor's clipping cannot hide it. While its content is scrolled
+ * out past an inline edge, `ScrollRegion` adds `sw-scroll-more-start` or
+ * `sw-scroll-more-end`, and that edge draws a shade: the cue that the content
+ * goes on, which overlay scrollbars (phones, macOS) do not give. In forced
+ * colors the shade is not drawn and the system's scrollbar is the cue. Table
+ * and the DenominationGrid strip share it.
  */
 export declare function scrollRegionRules(selector: string): string;
+export declare function scrollRegionClassCatalog(): string[];
+/**
+ * A region whose start column is pinned (sticky, on an opaque fill) hides
+ * its own start shade under that column, so the column casts the shade
+ * instead: a gradient a spacing step wide just past its inline end, drawn by
+ * its `::after` (the pinned cell is positioned, so it holds the gradient).
+ * `pinned` lists the pinned cells' selectors inside the region. Forced colors
+ * draw no shade here either.
+ */
+export declare function pinnedStartShadeRules(region: string, pinned: readonly string[]): string;

package/dist/css/css-scroll-region.js

@@ -1,9 +1,40 @@
+/*
+ * The shade an edge draws while content is scrolled out past it: an inset
+ * shadow a spacing step wide in the text color at low strength, so it reads
+ * on every palette and in dark mode. It is the box's own shadow, painted
+ * under the content, so no cell moves. A box scrolled to its middle shades
+ * both edges. The rules name the shadows outright rather than through
+ * inherited variables, so a scroll region inside another never takes its
+ * ancestor's shade.
+ */
+const shadeColor = 'color-mix(in srgb, var(--sw-color-text) 28%, transparent)';
+function edgeShade(side) {
+    const offset = side === 'left' ? 'var(--sw-space-6)' : 'calc(-1 * var(--sw-space-6))';
+    return `inset ${offset} 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) ${shadeColor}`;
+}
+/** The start edge is the left in a left-to-right box and the right in RTL. */
+function edgeShadeRules(selector) {
+    const more = (edge) => `${selector}.sw-scroll-more-${edge}`;
+    const both = `${more('start')}.sw-scroll-more-end`;
+    return [
+        `${more('start')} { box-shadow: ${edgeShade('left')}; }`,
+        `${more('end')} { box-shadow: ${edgeShade('right')}; }`,
+        `${more('start')}:dir(rtl) { box-shadow: ${edgeShade('right')}; }`,
+        `${more('end')}:dir(rtl) { box-shadow: ${edgeShade('left')}; }`,
+        // Last: it ties the :dir(rtl) rules on specificity and must win them.
+        `${both} { box-shadow: ${edgeShade('left')}, ${edgeShade('right')}; }`,
+    ].join('\n');
+}
 /**
  * A scroll region is a full-width box that scrolls its own content when the
  * content is wider (or taller) than the box, so a wide table never widens the
  * page. It is a keyboard stop, so its focus ring is drawn inside its edge
- * where an ancestor's clipping cannot hide it. Table and the DenominationGrid
- * strip share it.
+ * where an ancestor's clipping cannot hide it. While its content is scrolled
+ * out past an inline edge, `ScrollRegion` adds `sw-scroll-more-start` or
+ * `sw-scroll-more-end`, and that edge draws a shade: the cue that the content
+ * goes on, which overlay scrollbars (phones, macOS) do not give. In forced
+ * colors the shade is not drawn and the system's scrollbar is the cue. Table
+ * and the DenominationGrid strip share it.
  */
 export function scrollRegionRules(selector) {
     return `${selector} {
@@ -14,5 +45,40 @@ export function scrollRegionRules(selector) {
 ${selector}:focus-visible {
   outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
   outline-offset: calc(-1 * var(--sw-focus-ring-width));
+}
+
+${edgeShadeRules(selector)}`;
+}
+export function scrollRegionClassCatalog() {
+    return ['sw-scroll-more-start', 'sw-scroll-more-end'];
+}
+/**
+ * A region whose start column is pinned (sticky, on an opaque fill) hides
+ * its own start shade under that column, so the column casts the shade
+ * instead: a gradient a spacing step wide just past its inline end, drawn by
+ * its `::after` (the pinned cell is positioned, so it holds the gradient).
+ * `pinned` lists the pinned cells' selectors inside the region. Forced colors
+ * draw no shade here either.
+ */
+export function pinnedStartShadeRules(region, pinned) {
+    const after = (direction) => pinned
+        .map((cell) => `${region}.sw-scroll-more-start${direction} ${cell}::after`)
+        .join(',\n');
+    return `${after('')} {
+  background: linear-gradient(to right, ${shadeColor}, transparent);
+  content: '';
+  inset-block: 0;
+  inset-inline-start: 100%;
+  pointer-events: none;
+  position: absolute;
+  width: var(--sw-space-5);
+}
+
+${after(':dir(rtl)')} {
+  background: linear-gradient(to left, ${shadeColor}, transparent);
+}
+
+@media (forced-colors: active) {
+  ${after('').replaceAll('\n', '\n  ')} { display: none; }
 }`;
 }

package/dist/css/stylesheet.js

@@ -18,6 +18,7 @@ import { filterChipsClassCatalog } from './css-filter-chips.js';
 import { gridClassCatalog } from './css-grid.js';
 import { gridSpanClassCatalog } from './css-grid-span.js';
 import { denominationGridClassCatalog } from './css-denomination-grid.js';
+import { scrollRegionClassCatalog } from './css-scroll-region.js';
 import { fieldClassCatalog } from './css-field.js';
 import { boxBorderClassCatalog } from './css-box-border.js';
 import { cssComponentClasses } from './css-components.js';
@@ -53,6 +54,7 @@ export function utilityClassCatalog() {
         ...dataClassCatalog(),
         ...segmentedClassCatalog(),
         ...tableClassCatalog(),
+        ...scrollRegionClassCatalog(),
         ...chartClassCatalog(),
         ...chromeClassCatalog(),
         ...dialogClassCatalog(),

package/dist/denomination-cells.d.ts

@@ -6,7 +6,9 @@ export type DenominationCellView = {
 /**
  * Classifies one count for display. A null or zero count renders the zero
  * label; a signed row prefixes positive counts with "+" so movement reads as
- * a delta. Formatting stays plain digits: the consumer owns locale grouping.
+ * a delta, and every negative count takes the typographic minus "−", the
+ * sign a consumer's formatted money uses, never a hyphen. Formatting stays
+ * plain digits: the consumer owns locale grouping.
  */
 export declare function denominationCellView(count: number | null, signed: boolean, zeroLabel: string): DenominationCellView;
 export declare function isDenominationCount(count: number | null): boolean;

package/dist/denomination-cells.js

@@ -1,13 +1,17 @@
+/** The typographic minus (U+2212), not the hyphen-minus a number prints. */
+const minusSign = '\u2212';
 /**
  * Classifies one count for display. A null or zero count renders the zero
  * label; a signed row prefixes positive counts with "+" so movement reads as
- * a delta. Formatting stays plain digits: the consumer owns locale grouping.
+ * a delta, and every negative count takes the typographic minus "−", the
+ * sign a consumer's formatted money uses, never a hyphen. Formatting stays
+ * plain digits: the consumer owns locale grouping.
  */
 export function denominationCellView(count, signed, zeroLabel) {
     if (count === null || count === 0)
         return { state: 'zero', text: zeroLabel };
     if (count < 0)
-        return { state: 'negative', text: String(count) };
+        return { state: 'negative', text: `${minusSign}${Math.abs(count)}` };
     return { state: 'positive', text: signed ? `+${count}` : String(count) };
 }
 export function isDenominationCount(count) {

package/dist/index.d.ts

@@ -17,7 +17,7 @@ export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, } from '
 export { Box, type BoxBorder, type BoxElement, type BoxProps, } from './components/Box.js';
 export { ButtonGroup, type ButtonGroupJustify, type ButtonGroupProps, } from './components/ButtonGroup.js';
 export { Card, type CardProps, type CardVariant } from './components/Card.js';
-export { Dialog, type DialogProps, type DialogSize, } from './components/Dialog.js';
+export { Dialog, type DialogProps, type DialogSize, type DialogTitleLevel, } from './components/Dialog.js';
 export { StatTile, type StatTileEmphasis, type StatTileProps, type StatTileTone, statTileTones, } from './components/StatTile.js';
 export { TabPanel, type TabItem, type TabPanelProps, Tabs, type TabsProps, tabId, tabPanelId, } from './components/Tabs.js';
 export { Toast, toastTones } from './components/Toast.js';
@@ -44,6 +44,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 } from './components/DenominationGrid.js';
-export type { DenominationGridColumn, DenominationGridLayout, DenominationGridProps, DenominationGridRow, DenominationGridTone, } from './components/DenominationGrid.js';
+export type { DenominationGridColumn, DenominationGridLayout, DenominationGridProps, DenominationGridRow, DenominationGridRowRole, DenominationGridTone, } from './components/DenominationGrid.js';
 export { FilterChips } from './components/FilterChips.js';
 export type { FilterChipOption, FilterChipsProps, } from './components/FilterChips.js';

package/dist/scroll-overflow.d.ts

@@ -0,0 +1,14 @@
+/** Which inline edges of a scroll box have content scrolled out past them. */
+export type ScrollOverflow = {
+    start: boolean;
+    end: boolean;
+};
+export declare const noScrollOverflow: ScrollOverflow;
+/**
+ * Reads a box's horizontal overflow from its scroll metrics. `scrollLeft` is
+ * 0 at the inline start and grows toward the end in a left-to-right box; in
+ * a right-to-left box it is 0 at the start and negative toward the end, so
+ * the distance travelled is its magnitude in both.
+ */
+export declare function scrollOverflow(scrollLeft: number, scrollWidth: number, clientWidth: number): ScrollOverflow;
+export declare function sameScrollOverflow(a: ScrollOverflow, b: ScrollOverflow): boolean;

package/dist/scroll-overflow.js

@@ -0,0 +1,26 @@
+export const noScrollOverflow = { start: false, end: false };
+/**
+ * Sub-pixel layout can leave a box a fraction of a pixel wider than its
+ * content, or a scroll position a fraction short of its end; within this
+ * many pixels an edge counts as reached.
+ */
+const edgeTolerance = 1;
+/**
+ * Reads a box's horizontal overflow from its scroll metrics. `scrollLeft` is
+ * 0 at the inline start and grows toward the end in a left-to-right box; in
+ * a right-to-left box it is 0 at the start and negative toward the end, so
+ * the distance travelled is its magnitude in both.
+ */
+export function scrollOverflow(scrollLeft, scrollWidth, clientWidth) {
+    const hidden = scrollWidth - clientWidth;
+    if (hidden <= edgeTolerance)
+        return noScrollOverflow;
+    const travelled = Math.abs(scrollLeft);
+    return {
+        start: travelled > edgeTolerance,
+        end: travelled < hidden - edgeTolerance,
+    };
+}
+export function sameScrollOverflow(a, b) {
+    return a.start === b.start && a.end === b.end;
+}

package/dist/styles.css

@@ -1363,6 +1363,12 @@ body {
   outline-offset: calc(-1 * var(--sw-focus-ring-width));
 }
 
+.sw-table-wrap.sw-scroll-more-start { box-shadow: inset var(--sw-space-6) 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) color-mix(in srgb, var(--sw-color-text) 28%, transparent); }
+.sw-table-wrap.sw-scroll-more-end { box-shadow: inset calc(-1 * var(--sw-space-6)) 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) color-mix(in srgb, var(--sw-color-text) 28%, transparent); }
+.sw-table-wrap.sw-scroll-more-start:dir(rtl) { box-shadow: inset calc(-1 * var(--sw-space-6)) 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) color-mix(in srgb, var(--sw-color-text) 28%, transparent); }
+.sw-table-wrap.sw-scroll-more-end:dir(rtl) { box-shadow: inset var(--sw-space-6) 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) color-mix(in srgb, var(--sw-color-text) 28%, transparent); }
+.sw-table-wrap.sw-scroll-more-start.sw-scroll-more-end { box-shadow: inset var(--sw-space-6) 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) color-mix(in srgb, var(--sw-color-text) 28%, transparent), inset calc(-1 * var(--sw-space-6)) 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) color-mix(in srgb, var(--sw-color-text) 28%, transparent); }
+
 .sw-table {
   border-collapse: collapse;
   width: 100%;
@@ -2854,6 +2860,33 @@ body {
   outline-offset: calc(-1 * var(--sw-focus-ring-width));
 }
 
+.sw-denomination-scroll.sw-scroll-more-start { box-shadow: inset var(--sw-space-6) 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) color-mix(in srgb, var(--sw-color-text) 28%, transparent); }
+.sw-denomination-scroll.sw-scroll-more-end { box-shadow: inset calc(-1 * var(--sw-space-6)) 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) color-mix(in srgb, var(--sw-color-text) 28%, transparent); }
+.sw-denomination-scroll.sw-scroll-more-start:dir(rtl) { box-shadow: inset calc(-1 * var(--sw-space-6)) 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) color-mix(in srgb, var(--sw-color-text) 28%, transparent); }
+.sw-denomination-scroll.sw-scroll-more-end:dir(rtl) { box-shadow: inset var(--sw-space-6) 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) color-mix(in srgb, var(--sw-color-text) 28%, transparent); }
+.sw-denomination-scroll.sw-scroll-more-start.sw-scroll-more-end { box-shadow: inset var(--sw-space-6) 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) color-mix(in srgb, var(--sw-color-text) 28%, transparent), inset calc(-1 * var(--sw-space-6)) 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) color-mix(in srgb, var(--sw-color-text) 28%, transparent); }
+
+.sw-denomination-scroll.sw-scroll-more-start .sw-denomination-strip .sw-denomination-label::after,
+.sw-denomination-scroll.sw-scroll-more-start .sw-denomination-strip thead .sw-denomination-corner:first-child::after {
+  background: linear-gradient(to right, color-mix(in srgb, var(--sw-color-text) 28%, transparent), transparent);
+  content: '';
+  inset-block: 0;
+  inset-inline-start: 100%;
+  pointer-events: none;
+  position: absolute;
+  width: var(--sw-space-5);
+}
+
+.sw-denomination-scroll.sw-scroll-more-start:dir(rtl) .sw-denomination-strip .sw-denomination-label::after,
+.sw-denomination-scroll.sw-scroll-more-start:dir(rtl) .sw-denomination-strip thead .sw-denomination-corner:first-child::after {
+  background: linear-gradient(to left, color-mix(in srgb, var(--sw-color-text) 28%, transparent), transparent);
+}
+
+@media (forced-colors: active) {
+  .sw-denomination-scroll.sw-scroll-more-start .sw-denomination-strip .sw-denomination-label::after,
+  .sw-denomination-scroll.sw-scroll-more-start .sw-denomination-strip thead .sw-denomination-corner:first-child::after { display: none; }
+}
+
 .sw-denomination-strip {
   border-collapse: collapse;
   width: 100%;
@@ -3068,6 +3101,27 @@ body {
   .sw-denomination-tile-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 }
 
+.sw-denomination-cell-tone-accent { --sw-denomination-cell-tone: var(--sw-color-accent); }
+.sw-denomination-cell-tone-success { --sw-denomination-cell-tone: var(--sw-color-success); }
+.sw-denomination-cell-tone-danger { --sw-denomination-cell-tone: var(--sw-color-danger); }
+.sw-denomination-cell-tone-warning { --sw-denomination-cell-tone: var(--sw-color-warning); }
+
+.sw-denomination-grid .sw-denomination-cell.sw-denomination-cell-toned,
+.sw-denomination-grid .sw-denomination-cell-toned .sw-denomination-cell {
+  color: var(--sw-denomination-cell-tone);
+  opacity: 1;
+}
+
+.sw-denomination-tile.sw-denomination-cell-toned {
+  border-color: var(--sw-denomination-cell-tone);
+  box-shadow: inset 0 0 0 1px var(--sw-denomination-cell-tone);
+}
+
+@media (forced-colors: active) {
+  .sw-denomination-grid .sw-denomination-cell-zero.sw-denomination-cell-toned,
+  .sw-denomination-grid .sw-denomination-cell-toned .sw-denomination-cell-zero { color: GrayText; }
+}
+
 @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.16.0",
+  "version": "1.17.0",
   "description": "Scalewing DOM components and package-owned CSS utilities.",
   "type": "module",
   "license": "MIT",