@scalewing/react 1.14.0 → 1.16.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @scalewing/react
 
+## 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
+
+- c0a1c95: `RadioGroup` options take a `description` (`docs/requests/teisoro-radio-group.md`, 2026-09-29 follow-up, Teisoro F-007-S05 task 1365). `RadioGroupOption.description?: ReactNode` is secondary text for that option: a muted caption at the row's inline end while it fits beside the label, and a second line under the label text when it does not or below `md` (new generated classes `sw-radio-group-body` and `sw-radio-group-option-description`). It is the radio's accessible description (`aria-describedby`), the radio's name stays its `label` text (`aria-labelledby` on the label text), and a press on it chooses the option. It may hold phrasing content such as a `Badge`, nothing interactive; a taller description grows the row downward and the label stays on the radio's line. `undefined`, `null`, booleans and `''` are no description; `0` and a component that renders nothing are one. An option with a description fills the group's width. Without `description` nothing changes. No new dependencies.
+
 ## 1.14.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,6 +140,15 @@ 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.
@@ -132,7 +157,7 @@ A `Button` that toggles something passes `aria-pressed`. The pressed button gets
 
 `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.
 
-`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`.
 
@@ -152,6 +177,30 @@ A `Button` that toggles something passes `aria-pressed`. The pressed button gets
 />
 ```
 
+An option's optional `description` (a `ReactNode`) is secondary text for that option alone, such as its history. It is a muted caption after the label, at the row's inline end, while the two fit on one line; when they do not, and always below the `md` breakpoint, it wraps to a second line that starts under the label text, not under the radio. The label keeps the first line. An option with a description fills the group's width. The description is the radio's accessible description (`aria-describedby` on that option's input), while its name stays the `label` text, and a press on it chooses the option as the label does. A disabled option fades its description with the rest of the option. It may hold phrasing content such as a small `Badge`, but nothing interactive, because it sits inside the option's `<label>`. A description taller than the label, such as a default-size `Badge`, grows the row downward; the label stays on the radio's line. `undefined`, `null`, `false`, `true` and `''` are no description. Any other node is one, including `0` and a component that renders nothing, so pass `undefined` when there is nothing to say. The group's own `description` still describes the whole group.
+
+```tsx
+<RadioGroup
+  legend="Sighting source"
+  onChange={setSource}
+  options={[
+    {
+      value: 'observer',
+      label: 'Field observer',
+      icon: <User />,
+      description: <Badge size="sm">Most recent</Badge>,
+    },
+    {
+      value: 'camera',
+      label: 'Camera trap',
+      icon: <Camera />,
+      description: '2 sightings · last Sep 13, 2026',
+    },
+  ]}
+  value={source}
+/>
+```
+
 `SegmentedControl` is one exclusive choice shown as a track of segments (`role="radiogroup"`), named by `aria-label` or `aria-labelledby`, with a controlled `value` and `onChange`; `variant="filled"` gives every segment the same width and fills the selection with the accent, and `disabled` keeps the choice visible but inert. `error` puts a message under the track (`sw-field-error`), links it to the group by `aria-describedby` and sets `aria-invalid` and a danger outline on the group (`Mark` in forced colors); as `Field`'s it is announced politely from a live region that is always there, never as an alert, and an empty string is no error. `required` sets `aria-required` on the group; since the control has no label of its own, the element that labels it shows the mark. The track sits in a `.sw-segmented-field` wrapper that holds the message and takes the track's place in the layout, so a `ref` still reaches the `radiogroup`. `error` is for a control in a `Stack` or block layout, where the track keeps its width and the message wraps under it. While it shows a message the field is at least 24ch wide, capped at its container, so a short compact track does not squeeze the message into a column. In an `Inline` the field therefore grows and the rest of the row moves, while the track keeps its labels' width.
 
 ```tsx
@@ -213,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; 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.
 
 `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/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/RadioGroup.d.ts

@@ -1,15 +1,5 @@
-import { type ReactNode } from 'react';
-export type RadioGroupOption = {
-    value: string;
-    label: string;
-    disabled?: boolean;
-    /**
-     * A decorative glyph between the radio and the label, such as a person or
-     * a building for the kind of check. It is `aria-hidden` and drawn in the
-     * text color: the option's accessible name stays its `label` text.
-     */
-    icon?: ReactNode;
-};
+import { type RadioGroupOption } from './radio-group/RadioGroupOptionLabel.js';
+export type { RadioGroupOption };
 export type RadioGroupProps = {
     legend: string;
     value: string;

package/dist/components/RadioGroup.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from 'react';
 import { FieldErrorRegion } from './FieldErrorRegion.js';
+import { RadioGroupOptionLabel, } from './radio-group/RadioGroupOptionLabel.js';
 export function RadioGroup({ legend, value, onChange, options, required = false, disabled = false, description, error, }) {
     const name = useId();
     const descriptionId = useId();
@@ -19,10 +20,8 @@ export function RadioGroup({ legend, value, onChange, options, required = false,
         throw new RangeError('options must have unique values');
     if (value !== '' && !values.includes(value))
         throw new RangeError('value must match an option or be empty');
-    return (_jsxs("fieldset", { "aria-describedby": describedBy || undefined, "aria-invalid": Boolean(error), className: "sw-radio-group", disabled: disabled, children: [_jsx("legend", { className: "sw-radio-group-legend", children: legend }), description ? (_jsx("span", { className: "sw-radio-group-description", id: descriptionId, children: description })) : null, _jsx("span", { className: "sw-radio-group-options", children: options.map((option) => (_jsxs("label", { className: "sw-radio-group-option", children: [_jsxs("span", { className: "sw-radio-group-control", children: [_jsx("input", { checked: value === option.value, className: "sw-radio-group-input", disabled: option.disabled, name: name, onChange: (event) => {
-                                        if (!disabled &&
-                                            !option.disabled &&
-                                            event.currentTarget.checked)
-                                            onChange(option.value);
-                                    }, required: required, type: "radio", value: option.value }), _jsx("span", { "aria-hidden": "true", className: "sw-radio-group-mark" })] }), option.icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-radio-group-icon", children: option.icon })) : null, _jsx("span", { className: "sw-radio-group-text", children: option.label })] }, option.value))) }), _jsx(FieldErrorRegion, { className: "sw-radio-group-error", id: errorId, message: error })] }));
+    return (_jsxs("fieldset", { "aria-describedby": describedBy || undefined, "aria-invalid": Boolean(error), className: "sw-radio-group", disabled: disabled, children: [_jsx("legend", { className: "sw-radio-group-legend", children: legend }), description ? (_jsx("span", { className: "sw-radio-group-description", id: descriptionId, children: description })) : null, _jsx("span", { className: "sw-radio-group-options", children: options.map((option) => (_jsx(RadioGroupOptionLabel, { checked: value === option.value, name: name, onSelect: () => {
+                        if (!disabled && !option.disabled)
+                            onChange(option.value);
+                    }, option: option, required: required }, option.value))) }), _jsx(FieldErrorRegion, { className: "sw-radio-group-error", id: errorId, message: error })] }));
 }

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

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../../class-names.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,7 +15,7 @@ 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));
                             }), 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.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../../class-names.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.
@@ -20,7 +21,7 @@ function namesRow(rowCount, row, gridLabel) {
 export function DenominationTiles({ label, columns, rows, 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) => {
+            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 cell = row.cells[index] ?? null;
                             const view = denominationCellView(cell, row.signed ?? false, zeroLabel);
                             const amount = subtotal && cell !== null && cell !== 0

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/radio-group/RadioGroupOptionLabel.d.ts

@@ -0,0 +1,39 @@
+import { type ReactNode } from 'react';
+export type RadioGroupOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    /**
+     * A decorative glyph between the radio and the label, such as a person or
+     * a building for the kind of check. It is `aria-hidden` and drawn in the
+     * text color: the option's accessible name stays its `label` text.
+     */
+    icon?: ReactNode;
+    /**
+     * Secondary text for this option, such as its history: a muted caption at
+     * the row's inline end, or on a second line under the label when the row
+     * is narrower than md or the two do not fit. It is the radio's accessible
+     * description (`aria-describedby`), never part of its name, and a press on
+     * it chooses the option. It may hold phrasing content such as a `Badge`,
+     * but nothing interactive: it sits inside the option's `<label>`.
+     * `undefined`, `null`, `false`, `true` and `''` are no description; any
+     * other node, `0` or a component that renders nothing included, is one,
+     * so pass `undefined` when there is nothing to say.
+     */
+    description?: ReactNode;
+};
+type RadioGroupOptionLabelProps = {
+    option: RadioGroupOption;
+    name: string;
+    checked: boolean;
+    required: boolean;
+    onSelect: () => void;
+};
+/**
+ * One option of a RadioGroup: the native radio and its mark, the optional
+ * glyph, and the label. With a description, the label and the description
+ * share a wrapping body, and the radio is named by the label text alone and
+ * described by the description.
+ */
+export declare function RadioGroupOptionLabel({ option, name, checked, required, onSelect, }: RadioGroupOptionLabelProps): import("react").JSX.Element;
+export {};

package/dist/components/radio-group/RadioGroupOptionLabel.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+/** Whether React renders something for a description: not nothing, a boolean or ''. */
+function hasDescription(description) {
+    return (description !== undefined &&
+        description !== null &&
+        typeof description !== 'boolean' &&
+        description !== '');
+}
+/**
+ * One option of a RadioGroup: the native radio and its mark, the optional
+ * glyph, and the label. With a description, the label and the description
+ * share a wrapping body, and the radio is named by the label text alone and
+ * described by the description.
+ */
+export function RadioGroupOptionLabel({ option, name, checked, required, onSelect, }) {
+    const id = useId();
+    const textId = `${id}-text`;
+    const descriptionId = `${id}-description`;
+    const described = hasDescription(option.description);
+    const text = (_jsx("span", { className: "sw-radio-group-text", id: described ? textId : undefined, children: option.label }));
+    return (_jsxs("label", { className: "sw-radio-group-option", children: [_jsxs("span", { className: "sw-radio-group-control", children: [_jsx("input", { "aria-describedby": described ? descriptionId : undefined, "aria-labelledby": described ? textId : undefined, checked: checked, className: "sw-radio-group-input", disabled: option.disabled, name: name, onChange: (event) => {
+                            if (event.currentTarget.checked)
+                                onSelect();
+                        }, required: required, type: "radio", value: option.value }), _jsx("span", { "aria-hidden": "true", className: "sw-radio-group-mark" })] }), option.icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-radio-group-icon", children: option.icon })) : null, described ? (_jsxs("span", { className: "sw-radio-group-body", children: [text, _jsx("span", { className: "sw-radio-group-option-description", id: descriptionId, children: option.description })] })) : (text)] }));
+}

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-grid.js

@@ -72,6 +72,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,6 +232,7 @@ ${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); }
@@ -249,6 +261,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',

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-radio-group.js

@@ -1,4 +1,5 @@
 import { typographyVariants } from '@scalewing/tokens';
+import { breakpointQuery } from './breakpoints.js';
 const label = typographyVariants.label;
 const caption = typographyVariants.caption;
 export function cssRadioGroupClasses() {
@@ -118,6 +119,8 @@ export function cssRadioGroupClasses() {
   min-width: 0;
 }
 
+${optionDescriptionRules()}
+
 .sw-radio-group-description,
 .sw-radio-group-error {
   font-family: var(--sw-font-sans);
@@ -141,6 +144,57 @@ export function cssRadioGroupClasses() {
   .sw-radio-group[aria-invalid='true'] .sw-radio-group-mark { border-color: CanvasText; }
 }`;
 }
+/**
+ * An option with a description fills the group's width. Its label and
+ * description share a wrapping body: the label grows, so the description sits
+ * at the row's inline end while both fit, and wraps to its own line, starting
+ * under the label text, when they do not. The label keeps the row first.
+ * Below md the description always takes its own line. The radio and glyph
+ * sit on the label's line, which starts where a one-line option centers it.
+ * Items align to the line's start, not a shared baseline, so a description
+ * taller than the label (a default-size Badge) grows the row downward and
+ * never pushes the label off the radio's line; a caption line is centred
+ * on the label's line box.
+ */
+function optionDescriptionRules() {
+    return `.sw-radio-group-option:has(> .sw-radio-group-body) {
+  align-items: flex-start;
+  box-sizing: border-box;
+  padding-block-start: calc((var(--sw-control-md-min-height) - var(--sw-space-5)) / 2);
+  width: 100%;
+}
+
+.sw-radio-group-option:has(> .sw-radio-group-body) > .sw-radio-group-icon {
+  min-height: var(--sw-space-5);
+}
+
+.sw-radio-group-body {
+  align-items: flex-start;
+  column-gap: var(--sw-space-3);
+  display: flex;
+  flex: 1 1 0;
+  flex-wrap: wrap;
+  min-width: 0;
+  padding-block-start: calc((var(--sw-space-5) - ${label.lineHeight}px) / 2);
+}
+
+.sw-radio-group-body > .sw-radio-group-text { flex: 1 1 auto; }
+
+.sw-radio-group-option-description {
+  color: var(--sw-color-muted);
+  flex: 0 1 auto;
+  font-family: var(--sw-font-sans);
+  font-size: ${caption.fontSize}px;
+  font-weight: ${caption.fontWeight};
+  line-height: ${caption.lineHeight}px;
+  margin-block-start: calc((${label.lineHeight}px - ${caption.lineHeight}px) / 2);
+  min-width: 0;
+}
+
+@media ${breakpointQuery('below', 'md')} {
+  .sw-radio-group-option-description { flex-basis: 100%; }
+}`;
+}
 export function radioGroupClassCatalog() {
     return [
         'sw-radio-group',
@@ -152,6 +206,8 @@ export function radioGroupClassCatalog() {
         'sw-radio-group-mark',
         'sw-radio-group-icon',
         'sw-radio-group-text',
+        'sw-radio-group-body',
+        'sw-radio-group-option-description',
         'sw-radio-group-description',
         'sw-radio-group-error',
     ];

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/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;
@@ -1125,6 +1140,44 @@ body {
   min-width: 0;
 }
 
+.sw-radio-group-option:has(> .sw-radio-group-body) {
+  align-items: flex-start;
+  box-sizing: border-box;
+  padding-block-start: calc((var(--sw-control-md-min-height) - var(--sw-space-5)) / 2);
+  width: 100%;
+}
+
+.sw-radio-group-option:has(> .sw-radio-group-body) > .sw-radio-group-icon {
+  min-height: var(--sw-space-5);
+}
+
+.sw-radio-group-body {
+  align-items: flex-start;
+  column-gap: var(--sw-space-3);
+  display: flex;
+  flex: 1 1 0;
+  flex-wrap: wrap;
+  min-width: 0;
+  padding-block-start: calc((var(--sw-space-5) - 20px) / 2);
+}
+
+.sw-radio-group-body > .sw-radio-group-text { flex: 1 1 auto; }
+
+.sw-radio-group-option-description {
+  color: var(--sw-color-muted);
+  flex: 0 1 auto;
+  font-family: var(--sw-font-sans);
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 18px;
+  margin-block-start: calc((20px - 18px) / 2);
+  min-width: 0;
+}
+
+@media not all and (min-width: 48rem) {
+  .sw-radio-group-option-description { flex-basis: 100%; }
+}
+
 .sw-radio-group-description,
 .sw-radio-group-error {
   font-family: var(--sw-font-sans);
@@ -2848,6 +2901,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.
@@ -2997,6 +3061,7 @@ 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); }
@@ -3183,7 +3248,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.14.0",
+  "version": "1.16.0",
   "description": "Scalewing DOM components and package-owned CSS utilities.",
   "type": "module",
   "license": "MIT",