@scalewing/react 1.15.0 → 1.17.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @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
+
+- b64a805: `Field` takes `invalid` (`docs/requests/teisoro-field-validation.md`, 2026-09-30 follow-up, Teisoro F-007-S05 task 1375, DRW-18). `invalid?: boolean` marks the native control invalid, `aria-invalid="true"` and the same danger border as `error` (on a `prefix`/`suffix` frame too, `Mark` in forced colors), without a message of its own, for fields whose one error is shown elsewhere, such as under a group of count fields; the consumer points the control's `aria-describedby` at that message, and it is kept. The field's polite region stays empty and its `description` stays. `error` implies it. Passing `invalid`, even `invalid={false}` but not `invalid={undefined}` (so a wrapper forwarding an optional prop is safe), requires one native control child from the first render (a `TypeError` otherwise), so a form that marks a composed child learns it while its fields are valid, not on its first failed submit. `error` is unchanged: it requires the native control only while it holds a message, so `error={undefined}` beside a composed child still renders. Without it nothing changes. No new dependencies.
+- 68beae9: A programmatic focus target takes the accent focus ring (`docs/requests/teisoro-focus-target.md`, Teisoro F-007-S05 task 1375, NSF-34, ENT-29, DRW-30). The generated document canvas gains `:where([data-theme] [tabindex='-1']:focus-visible)` with the same ring as links and native controls (`--sw-focus-ring-width` solid `--sw-color-accent`, `--sw-focus-ring-offset` out), so a notice or card a script focuses after a save, such as a `Box tabIndex={-1} radius="lg"` round a `Card`, no longer shows the browser's outline. The ring shows only when focus is visible, as the browser's does, and the rule has zero specificity, so a component's own ring always wins. No new prop or class and no new dependencies.
+
+### Patch Changes
+
+- 849ce60: `Button` sets a glyph one token gap from its label (`docs/requests/teisoro-button.md`, 2026-09-30 follow-up, Teisoro F-007-S05 task 1375). `.sw-button` gains `gap: var(--sw-space-2)`, so a glyph and a label passed as the button's own children sit 8 px apart at every size instead of touching. An icon-only button, a visually hidden name (`CalendarButton`) and a label already wrapped in one element with its own gap (`<Inline as="span" gap={2}>`) are unchanged: each is a single flex item, so there is never a second gap, and the wrapper can be dropped. A phrase split across elements (`Save <strong>draft</strong> now`) already drew its parts touching, because each is a flex item whose edge spaces collapse; they are now 8 px apart. Put such a phrase in one element, where its word spaces are kept. No API change and no new dependencies.
+- 9a84726: `DenominationGrid` keeps a row's icon beside its label (`docs/requests/teisoro-denomination-grid.md`, 2026-09-30 follow-up, Teisoro F-007-S05 task 1375, DRW-28). A row's icon and words now sit in `.sw-denomination-label-line`, a flex row that does not wrap, in both layouts, so a long label wraps its words beside the icon instead of dropping them under it. Below `md` the strip no longer puts the icon on its own line over the label: the line stays a row (its gap narrows to spacing step 1 in the strip only; a tiles row keeps step 2), and the phone total keeps its own line under it. New generated class `sw-denomination-label-line`; no API change and no new dependencies.
+- b7beef1: `Toast` keeps the page gutter on a phone (`docs/requests/teisoro-toast.md`, 2026-09-30 follow-up, Teisoro F-007-S05 task 1375, DRW-29). `.sw-toast` is capped at `calc(100% - var(--sw-space-4) - var(--sw-space-4))` of the top layer and wraps a long word (`overflow-wrap: break-word`), so a message wider than the screen wraps inside a 16 px gutter on each side instead of running to the edges. A toast is still as wide as its message up to that cap and centred, so a short toast is unchanged. No API change and no new dependencies.
+
 ## 1.15.0
 
 ### Minor Changes

package/README.md

@@ -50,7 +50,23 @@ Import the CSS once at the application entry. Do not copy it into your source tr
 
 `Box hideBelow="md"` hides a region under 48rem and `hideFrom="md"` hides it at 48rem and wider, so a product can swap a wide layout for a narrow one without its own stylesheet. Hidden regions leave the accessibility tree; do not use this to protect data. `Box as="a"` is a layout link. Use `Button` for press actions. `Field` associates a native `<input>` or `<select>` with a label and token gap; native text controls inherit the generated document canvas. `Select` is a labeled listbox menu when the open list must match the canvas.
 
-`Field` supports optional `description`, `error`, and `required` on one native input, select, or textarea child. It preserves an existing `aria-describedby` and appends a stable ID for the hint, or for the error, which replaces the hint on screen while it is supplied. `error` sets `aria-invalid` and token-owned invalid styling. The error sits in a polite live region (`aria-live="polite"`) that is always rendered, empty while there is no error, so an error that appears while the person types, or after a submit, is announced once, politely, when its text is swapped in; it is never `role="alert"`, so a submit that finds several errors does not fire several assertive alerts at once. Empty, the region takes no room in the layout. The consumer owns validation and localized messages, and after a refused submit it moves focus to the first invalid control (or to one form-level summary). `Checkbox`, `RadioGroup` and `DateField` expose their `error` the same way.
+`Field` supports optional `description`, `error`, and `required` on one native input, select, or textarea child. It preserves an existing `aria-describedby` and appends a stable ID for the hint, or for the error, which replaces the hint on screen while it is supplied. `error` sets `aria-invalid` and token-owned invalid styling. The error sits in a polite live region (`aria-live="polite"`) that is always rendered, empty while there is no error, so an error that appears while the person types, or after a submit, is announced once, politely, when its text is swapped in; it is never `role="alert"`, so a submit that finds several errors does not fire several assertive alerts at once. Empty, the region takes no room in the layout. The consumer owns validation and localized messages, and after a refused submit it moves focus to the first invalid control (or to one form-level summary). `Checkbox`, `RadioGroup` and `DateField` expose their `error` the same way. `invalid` marks the control invalid the same way (`aria-invalid` and the danger border, `Mark` in forced colors) without a message of its own, for fields whose one error is shown elsewhere, such as a count that adds up to nothing under a group of count fields: point each control's `aria-describedby` at that message so it is read with the field. The field's own polite region stays empty and its `description` stays on screen; `error` implies `invalid`. Passing `invalid`, even `invalid={false}` but not `invalid={undefined}`, needs one native control child and throws a `TypeError` on the first render otherwise, so a form learns it while the fields are valid, not on its first failed submit. `error` keeps its rule: it needs the native control only while it holds a message. `invalid` is `Field`'s only: `DateField`, `Select` and the other controls with `error` do not have it yet.
+
+```tsx
+<Field invalid={countIsZero} label="$1 bills">
+  <input aria-describedby={countIsZero ? countErrorId : undefined} />
+</Field>
+```
+
+An element a script focuses, such as a notice or a card announced after a save, takes the same accent focus ring as the canvas's links and native controls, 2 px past its edge (`--sw-focus-ring-width` and `--sw-focus-ring-offset`), instead of the browser's outline. Give it `tabIndex={-1}`, so it takes focus from a script but is no tab stop, and put the focus on the whole card rather than its text, so the ring goes round it clear of the words; a `Box` round the card with the card's `radius` makes the ring follow its corners. As with the browser's own outline, the ring shows only when focus is visible (`:focus-visible`): after a keyboard press, not after a mouse press. The rule has zero specificity, so a component's own ring always wins.
+
+```tsx
+<Box ref={notice} tabIndex={-1} radius="lg" role="status">
+  <Card padding={4} variant="outlined">
+    <Text as="p">Survey saved.</Text>
+  </Card>
+</Box>
+```
 
 A disabled native text control (`<input>`, `<select>` or `<textarea>` on the canvas, a `Field` frame with a `prefix` or `suffix`, or a `DateField` entry) takes the quiet subtle fill, a dashed border and a not-allowed cursor. Its value stays in the text color at full strength, so a locked value is still readable; forced colors keep the dashed border in the system's disabled color. A typed input's placeholder, enabled or disabled, is drawn in the muted color, which keeps 4.5:1 on the field in every palette.
 
@@ -124,15 +140,24 @@ A disabled native text control (`<input>`, `<select>` or `<textarea>` on the can
 </Stack>
 ```
 
+A `Button`'s own children are laid out in a row one token gap apart (spacing step 2, 8 px), so a glyph passed beside the label never touches it. Pass the glyph and the label as direct children. An icon-only button has one child and is unchanged, and a visually hidden name (`sw-sr-only`) is out of the flow, so it adds no gap. A label already wrapped in one element with its own gap, such as `<Inline as="span" gap={2}>`, is a single child and gets no second gap; it can drop the wrapper. A phrase split across elements, such as `Save <strong>draft</strong> now`, is several flex items: the spaces at their edges collapse, so its parts touched before and are a gap apart now. Put such a phrase in one element (`<span>Save <strong>draft</strong> now</span>`), where its word spaces are kept.
+
+```tsx
+<Button onPress={logSighting}>
+  <Plus aria-hidden />
+  Log sighting
+</Button>
+```
+
 A `Button` that toggles something passes `aria-pressed`. The pressed button gets a 2 px accent ring outside its fill, past a 2 px gap in `--sw-color-background`, so the ring meets only the page and keeps the accent's contrast on the canvas (4.5:1 or more in every palette, at least the 3:1 a state indicator needs) whatever its `variant` or fill. A focused pressed button moves its focus outline out past the ring. In forced colors, which drop shadows, the pressed button keeps the forced button colors, so its label and any glyph or badge inside it stay readable, and draws the same ring and its own border in the system highlight (`Highlight`); nothing opts out of forced colors. An unpressed button is drawn at full strength, so its label keeps its contrast. To make the choice stand out further, give the pressed button `primary` and the others `secondary`.
 
 `Badge` is a non-interactive chicklet with a `tone` (`neutral`, `accent`, `success`, `danger`, `warning`) and a `size` (`md`, or `sm` for a table cell). A badge inside a filled `Button` (every variant but `ghost`) sits on `--sw-color-surface` with its words in the text color and its tone on its border, so it reads at 4.5:1 in every palette whatever the button's fill.
 
 `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.
+`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.
 
 `Switch` is a controlled on/off input. It keeps native checkbox keyboard behavior and exposes switch semantics. Provide the current `checked` value and update it in `onCheckedChange`.
 
@@ -193,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.
 
@@ -237,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. 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/Field.d.ts

@@ -9,10 +9,19 @@ export type FieldProps = {
     size?: FieldSize;
     description?: string;
     error?: string;
+    /**
+     * Marks the control invalid (`aria-invalid` and the danger border) without
+     * a message of its own, for a field whose error is shown elsewhere, such
+     * as one message under a group of fields. Point the control's
+     * `aria-describedby` at that message. `error` implies it. Passing
+     * `invalid`, even `false` but not `undefined`, requires one native control
+     * child from the first render.
+     */
+    invalid?: boolean;
     required?: boolean;
     /** Short text inside the control frame before the value, such as a currency sign. Not part of the value. */
     prefix?: string;
     /** Short text inside the control frame after the value, such as a unit. Not part of the value. */
     suffix?: string;
 };
-export declare function Field({ children, gap, label, labelVisuallyHidden, size, description, error, required, prefix, suffix, }: FieldProps): import("react").JSX.Element;
+export declare function Field(props: FieldProps): import("react").JSX.Element;

package/dist/components/Field.js

@@ -5,7 +5,19 @@ import { adornedControlAria, FieldAdornment, } from './FieldAdornment.js';
 import { FieldErrorRegion } from './FieldErrorRegion.js';
 import { FieldLabelText } from './FieldLabelText.js';
 import { Stack } from './Stack.js';
-export function Field({ children, gap = 1, label, labelVisuallyHidden = false, size = 'md', description, error, required = false, prefix, suffix, }) {
+/**
+ * `invalid` was passed, even as `false`, but not as `undefined` (a wrapper
+ * forwarding an optional prop passes nothing): such a field needs one native
+ * control from its first render, so a form learns it on the happy path
+ * instead of on its first failed submit. `error` keeps its older rule (it
+ * requires the control only while it holds a message), so a composed
+ * child beside `error={undefined}` still renders.
+ */
+function passesInvalid(props) {
+    return props.invalid !== undefined;
+}
+export function Field(props) {
+    const { children, gap = 1, label, labelVisuallyHidden = false, size = 'md', description, error, invalid = false, required = false, prefix, suffix, } = props;
     const controlId = useId();
     const descriptionId = useId();
     const errorId = useId();
@@ -13,12 +25,13 @@ export function Field({ children, gap = 1, label, labelVisuallyHidden = false, s
     const prefixId = useId();
     const suffixId = useId();
     const message = error || description;
+    const marksInvalid = Boolean(error) || invalid;
     const adorned = Boolean(prefix || suffix);
-    const needsControl = Boolean(message || required || adorned);
+    const needsControl = Boolean(message || marksInvalid || passesInvalid(props) || required || adorned);
     const className = [
         'sw-field',
         size === 'xs' && 'sw-field-xs',
-        error && 'sw-field-invalid',
+        marksInvalid && 'sw-field-invalid',
     ]
         .filter(Boolean)
         .join(' ');
@@ -46,7 +59,7 @@ export function Field({ children, gap = 1, label, labelVisuallyHidden = false, s
     const control = cloneElement(children, {
         id: children.props.id || controlId,
         'aria-describedby': describedBy || undefined,
-        'aria-invalid': error ? true : children.props['aria-invalid'],
+        'aria-invalid': marksInvalid ? true : children.props['aria-invalid'],
         'aria-labelledby': adornment.labelledBy,
         required: required || children.props.required,
     });

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,7 +1,9 @@
 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';
 /**
  * The total column's header: a visually hidden `th` when the consumer names
  * the column, otherwise the empty corner it has always been. Both carry
@@ -14,8 +16,8 @@ function TotalHead({ totalLabel }) {
 }
 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: [row.icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-denomination-icon", children: row.icon })) : null, _jsx("span", { className: "sw-denomination-label-text", children: row.label }), row.total !== undefined ? (_jsx("span", { "aria-hidden": "true", className: "sw-denomination-total-inline", children: row.total })) : null] }) }), columns.map((column, index) => {
+    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,6 +1,8 @@
 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';
 /**
  * A lone row is named by the grid's own label, so its label line shows only
  * when it adds something: an icon or a total. Several rows always show it.
@@ -9,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: [row.icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-denomination-icon", children: row.icon })) : null, _jsx("span", { className: "sw-denomination-label-text", children: row.label }), 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/RowLabelLine.d.ts

@@ -0,0 +1,9 @@
+import { type DenominationGridRow } from './types.js';
+/**
+ * A row label's glyph and words, kept on one line: when the words wrap,
+ * they wrap beside the glyph, never under it (Teisoro DRW-28). Both the
+ * strip and the tiles layouts draw a row label with it.
+ */
+export declare function RowLabelLine({ row }: {
+    row: DenominationGridRow;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A row label's glyph and words, kept on one line: when the words wrap,
+ * they wrap beside the glyph, never under it (Teisoro DRW-28). Both the
+ * strip and the tiles layouts draw a row label with it.
+ */
+export function RowLabelLine({ row }) {
+    return (_jsxs("span", { className: "sw-denomination-label-line", children: [row.icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-denomination-icon", children: row.icon })) : null, _jsx("span", { className: "sw-denomination-label-text", children: row.label })] }));
+}

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-button.d.ts

@@ -5,6 +5,7 @@ export declare function buttonClassNames(options: {
 }): string[];
 export declare const pressedRingGap = 2;
 export declare const pressedRingWidth = 4;
+export declare const buttonContentGap = "var(--sw-space-2)";
 export declare function cssButtonClasses(): string;
 export declare const buttonGroupJustifies: readonly ["start", "end", "between"];
 export declare function buttonClassCatalog(): string[];

package/dist/css/css-button.js

@@ -52,6 +52,14 @@ function sizeRules() {
     })
         .join('\n');
 }
+/*
+ * The button's own children are its flex items, so a glyph and its label
+ * sit one token gap apart. An icon-only button has one item, and a consumer
+ * that wraps its glyph and label in one element (an Inline span) has one
+ * item too, so neither gets a second gap. A visually hidden name is
+ * absolutely positioned, out of the flex flow, so it adds none either.
+ */
+export const buttonContentGap = 'var(--sw-space-2)';
 export function cssButtonClasses() {
     return `.sw-button {
   appearance: none;
@@ -65,6 +73,7 @@ export function cssButtonClasses() {
   font-family: var(--sw-font-sans);
   font-size: ${label.fontSize}px;
   font-weight: ${label.fontWeight};
+  gap: ${buttonContentGap};
   justify-content: center;
   letter-spacing: ${label.letterSpacing}px;
   line-height: ${label.lineHeight}px;

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%;
@@ -72,6 +78,17 @@ ${scrollRegionRules('.sw-denomination-scroll')}
   gap: var(--sw-space-2);
 }
 
+/*
+ * A row label's glyph and words are one line: the line does not wrap, so its
+ * narrowest width is the glyph, the gap and the longest word, and a long
+ * label wraps its words beside the glyph instead of dropping them under it.
+ */
+.sw-denomination-label-line {
+  align-items: center;
+  display: flex;
+  gap: var(--sw-space-2);
+}
+
 /*
  * The row labels and the header corner above them stay in view while a wide
  * strip scrolls under them, so each column head stays over its counts.
@@ -221,12 +238,15 @@ ${scrollRegionRules('.sw-denomination-scroll')}
   .sw-denomination-total-value { ${visuallyHiddenDeclarations} }
   .sw-denomination-total-inline { display: block; }
   .sw-denomination-label-body { flex-direction: column; align-items: flex-start; gap: var(--sw-space-1); }
+  .sw-denomination-strip .sw-denomination-label-line { gap: var(--sw-space-1); }
   .sw-denomination-strip th,
   .sw-denomination-strip td { padding: var(--sw-space-1); }
   .sw-denomination-strip .sw-denomination-label { padding-inline-start: calc(var(--sw-space-1) * 2); }
   .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; }
@@ -249,6 +269,7 @@ export function denominationGridClassCatalog() {
         'sw-denomination-row-signed',
         'sw-denomination-label',
         'sw-denomination-label-body',
+        'sw-denomination-label-line',
         'sw-denomination-label-text',
         'sw-denomination-icon',
         'sw-denomination-cell',
@@ -263,5 +284,6 @@ export function denominationGridClassCatalog() {
         'sw-denomination-tile-list',
         'sw-denomination-tile',
         'sw-denomination-subtotal',
+        ...denominationCellToneClassCatalog(),
     ];
 }

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

@@ -2,4 +2,6 @@
 export declare const controlSurface = "background-color: var(--sw-glass-fill);\n  border: 1px solid var(--sw-color-border);\n  border-radius: var(--sw-radius-sm);\n  color: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  padding-inline: var(--sw-control-md-padding-inline);";
 export declare const disabledControlSurface = "background-color: var(--sw-color-subtle);\n  border-style: dashed;\n  cursor: not-allowed;\n  opacity: 1;\n  -webkit-text-fill-color: currentColor;";
 export declare const disabledControlForcedColors = "border-color: GrayText;\n  color: GrayText;\n  -webkit-text-fill-color: GrayText;";
+/** A script-only focus target in the canvas, at zero specificity. */
+export declare const focusTargetSelector = ":where([data-theme] [tabindex='-1']:focus-visible)";
 export declare function cssDocumentCanvas(): string;

package/dist/css/css-document.js

@@ -34,6 +34,8 @@ export const disabledControlSurface = `background-color: var(--sw-color-subtle);
 export const disabledControlForcedColors = `border-color: GrayText;
   color: GrayText;
   -webkit-text-fill-color: GrayText;`;
+/** A script-only focus target in the canvas, at zero specificity. */
+export const focusTargetSelector = ":where([data-theme] [tabindex='-1']:focus-visible)";
 export function cssDocumentCanvas() {
     return `html,
 body {
@@ -79,6 +81,20 @@ body {
   outline-offset: var(--sw-focus-ring-offset);
 }
 
+/*
+ * A programmatic focus target (tabindex="-1": a notice, a card or a heading
+ * that a script focuses after a save) takes the accent ring past the ring
+ * offset, as links and native controls do, instead of the browser's outline.
+ * It shows when the browser would show its own (:focus-visible), so a target
+ * focused after a mouse press stays quiet. :where() keeps the rule at zero
+ * specificity: it still beats the user-agent outline, and every component's
+ * own ring (a roving tabindex="-1" item's included) wins over it.
+ */
+${focusTargetSelector} {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
 [data-theme] :is(${typedInputs}) {
   ${controlSurface}
   box-sizing: border-box;

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/css-toast.d.ts

@@ -1,4 +1,5 @@
 export declare const toastTones: readonly ["neutral", "success", "warning", "danger"];
 export type ToastTone = (typeof toastTones)[number];
+export declare const toastMaxWidth = "calc(100% - var(--sw-space-4) - var(--sw-space-4))";
 export declare function cssToastClasses(): string;
 export declare function toastClassCatalog(): string[];

package/dist/css/css-toast.js

@@ -9,6 +9,13 @@ function toneRules() {
         .map((tone) => `.sw-toast-${tone} { --sw-toast-tone: var(--sw-color-${tone}); border-color: var(--sw-toast-tone); }`)
         .join('\n');
 }
+/*
+ * The toast keeps the page's side gutter (spacing step 4 on each side): a
+ * long message wraps inside it instead of running to the screen's edges.
+ * 100% of the top layer's containing block leaves out a classic scrollbar;
+ * 100vw would not.
+ */
+export const toastMaxWidth = 'calc(100% - var(--sw-space-4) - var(--sw-space-4))';
 export function cssToastClasses() {
     return `.sw-toast {
   background: var(--sw-glass-fill);
@@ -23,7 +30,9 @@ export function cssToastClasses() {
   bottom: var(--sw-space-6);
   left: 50%;
   margin: 0;
+  max-width: ${toastMaxWidth};
   overflow: visible;
+  overflow-wrap: break-word;
   pointer-events: none;
   position: fixed;
   translate: -50% 0;

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

@@ -610,6 +610,20 @@ body {
   outline-offset: var(--sw-focus-ring-offset);
 }
 
+/*
+ * A programmatic focus target (tabindex="-1": a notice, a card or a heading
+ * that a script focuses after a save) takes the accent ring past the ring
+ * offset, as links and native controls do, instead of the browser's outline.
+ * It shows when the browser would show its own (:focus-visible), so a target
+ * focused after a mouse press stays quiet. :where() keeps the rule at zero
+ * specificity: it still beats the user-agent outline, and every component's
+ * own ring (a roving tabindex="-1" item's included) wins over it.
+ */
+:where([data-theme] [tabindex='-1']:focus-visible) {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
 [data-theme] :is(input[type='text'], input[type='email'], input[type='number'], input[type='search'], input[type='url'], input[type='password'], input:not([type]), textarea) {
   background-color: var(--sw-glass-fill);
   border: 1px solid var(--sw-color-border);
@@ -858,6 +872,7 @@ body {
   font-family: var(--sw-font-sans);
   font-size: 15px;
   font-weight: 600;
+  gap: var(--sw-space-2);
   justify-content: center;
   letter-spacing: -0.2px;
   line-height: 20px;
@@ -1348,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%;
@@ -2839,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%;
@@ -2886,6 +2934,17 @@ body {
   gap: var(--sw-space-2);
 }
 
+/*
+ * A row label's glyph and words are one line: the line does not wrap, so its
+ * narrowest width is the glyph, the gap and the longest word, and a long
+ * label wraps its words beside the glyph instead of dropping them under it.
+ */
+.sw-denomination-label-line {
+  align-items: center;
+  display: flex;
+  gap: var(--sw-space-2);
+}
+
 /*
  * The row labels and the header corner above them stay in view while a wide
  * strip scrolls under them, so each column head stays over its counts.
@@ -3035,12 +3094,34 @@ body {
   .sw-denomination-total-value { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
   .sw-denomination-total-inline { display: block; }
   .sw-denomination-label-body { flex-direction: column; align-items: flex-start; gap: var(--sw-space-1); }
+  .sw-denomination-strip .sw-denomination-label-line { gap: var(--sw-space-1); }
   .sw-denomination-strip th,
   .sw-denomination-strip td { padding: var(--sw-space-1); }
   .sw-denomination-strip .sw-denomination-label { padding-inline-start: calc(var(--sw-space-1) * 2); }
   .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; }
@@ -3221,7 +3302,9 @@ body {
   bottom: var(--sw-space-6);
   left: 50%;
   margin: 0;
+  max-width: calc(100% - var(--sw-space-4) - var(--sw-space-4));
   overflow: visible;
+  overflow-wrap: break-word;
   pointer-events: none;
   position: fixed;
   translate: -50% 0;

package/package.json

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