@scalewing/react 1.35.1 → 1.36.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @scalewing/react
 
+## 1.36.0
+
+### Minor Changes
+
+- bc5d37c: A `Button` with `aria-disabled="true"` now looks disabled (`docs/requests/teisoro-button-aria-disabled.md`, Teisoro F-011 task 2210): the faded look, or with `disabledAppearance="neutral"` the neutral grey, and `GrayText` in forced colors, while it stays focusable and its `onPress` still runs, for a submit that, pressed while off, takes the person to what is missing. No new prop, token, class or dependency.
+- 3d431f7: `Steps` `open` shows every step's fields at once (`docs/requests/teisoro-steps-open.md`, Teisoro F-011 task 2210): each step is a region named by its title, its marker still following its status (a number to fill, a check when done, "!" in error, a grey ring when greyed), every title at the open size, no step `aria-current` and no focus moved when a status changes. Off by default; a list without `open` is unchanged. New generated classes `sw-steps-open` and `sw-steps-region`. No new tokens, no new dependency.
+
+### Patch Changes
+
+- 743a7a0: Every press control and link now renders an explicit `tabindex="0"` (Teisoro F-011 task 2205), so Safari users reach it with Tab: Safari's default leaves a `<button>`, a link, a checkbox and a radio out of the Tab order unless it carries a `tabindex`, so Tab from a field went past them to the address bar. Covered: `Button` (with `CalendarButton` and `InfoTip`), `Box as="a"` with an `href`, `SectionNav` links, the `Select`, `MultiSelect` and `ActionMenu` triggers, `SegmentedControl` items, `DateField`'s calendar button and month steps, a search `Field`'s clear button, `Table` sort and `TableCell onPress` buttons, `Checkbox` (and `MultiSelect`'s rows), `Switch`, and the checked (else first enabled) radio of a `RadioGroup` or `FilterChips`. A consumer's `tabIndex` wins; a `Stepper`'s − and + and roving items keep their `-1`. No new prop, class or token, no new dependency.
+
 ## 1.35.1
 
 ### Patch Changes

package/README.md

@@ -57,7 +57,7 @@ Import the CSS once at the application entry. Do not copy it into your source tr
 
 `AppHeader` is the page's top chrome, sticky by default (`sticky={false}` leaves it in flow). Its default `appearance="glass"` is a rounded frosted card. `appearance="bar"` (`AppHeaderAppearance`, `appHeaderAppearances`) is a full-width band of the solid surface with the border hairline under it: no blur, no rounding, no side or top border, the same under Reduce Transparency, and the hairline kept in forced colors. Set it against the page's edges (no side gutter round it) and put the gutter inside it. An unknown `appearance` throws a `RangeError`.
 
-`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. They also take `lg` (64rem), for content that fits only from a laptop up, such as a row of labelled destinations that a tablet shows as glyphs (name each glyph-only control, for example with `Tooltip relationship="label"`); the layout props keep `md`. `breakpointQuery('below', 'lg')` returns the query a hide class uses (`not all and (min-width: 64rem)`), for an app whose script must follow the same width. An unknown breakpoint throws a `RangeError`. 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. `Box as="a" link="quiet"` (opt-in; `link="accent"`, the default, is the canvas link) is a title that opens something, such as a table row's title: it keeps the surrounding text's colour at weight 600 (`sw-link-quiet`) and is underlined on hover and keyboard focus. Its weight is the non-colour cue WCAG 1.4.1 asks for (axe's `link-in-text-block` passes it on colour, the same colour and background as its text, or on its weight; the weight is what keeps it visibly a link), so use it in text lighter than 600. In text already at 600 the quiet look has no cue: an accent link there needs at least 3:1 contrast against the text. `link` on a box that is not `as="a"` throws a `TypeError`, an unknown value a `RangeError`. `Field` associates a native `<input>` or `<select>` with a label and token gap; native text controls inherit the generated document canvas. `Steps` is a one-page vertical stepper: an `ol` of `Step` panels in order, numbered by their place, a line joining each marker to the next (in the success color below a done step). A `Step` takes `status` (`'upcoming' | 'current' | 'done' | 'error' | 'skipped'`) and `title` (a heading at the list's `headingLevel`, 2 by default, or the step's own). The current step is open with its `children` and has `aria-current="step"`; an error step stays open with a "!" marker. A done step folds to one line: a check, the title, its `summary` (truncated) and, with `onEdit` and `editLabel`, a ghost small `Button` at the end named by its label and the title ("Edit The site"). A step ahead is greyed with its number in a ring; a skipped step is greyed with its `skippedReason` after the title (pass your own separator, such as "· not needed"). A folded step's heading ends in its status word for assistive technology (visually hidden; English by default, `labels` on `Steps` takes your words). When a step becomes current from a folded state (upcoming, done or skipped), focus moves to its heading, a programmatic focus target; if several do in one update, the first in the list takes it. A first render, a move between current and error, and a step that turns to error leave focus alone: after a refused submit, move focus to the first invalid field yourself, as with `Field`. An error step has no `aria-current`; its heading's status word says it needs attention. Scalewing holds no order rules: the consumer sets each step's status. Pass the `Step`s as direct children (a Fragment around several would share one number). A `Step` outside `Steps`, a Fragment child, a blank title or reason, an unknown status or heading level, `onEdit` without `editLabel`, or a blank status word throws a `RangeError`.
+`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. They also take `lg` (64rem), for content that fits only from a laptop up, such as a row of labelled destinations that a tablet shows as glyphs (name each glyph-only control, for example with `Tooltip relationship="label"`); the layout props keep `md`. `breakpointQuery('below', 'lg')` returns the query a hide class uses (`not all and (min-width: 64rem)`), for an app whose script must follow the same width. An unknown breakpoint throws a `RangeError`. 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. `Box as="a" link="quiet"` (opt-in; `link="accent"`, the default, is the canvas link) is a title that opens something, such as a table row's title: it keeps the surrounding text's colour at weight 600 (`sw-link-quiet`) and is underlined on hover and keyboard focus. Its weight is the non-colour cue WCAG 1.4.1 asks for (axe's `link-in-text-block` passes it on colour, the same colour and background as its text, or on its weight; the weight is what keeps it visibly a link), so use it in text lighter than 600. In text already at 600 the quiet look has no cue: an accent link there needs at least 3:1 contrast against the text. `link` on a box that is not `as="a"` throws a `TypeError`, an unknown value a `RangeError`. `Field` associates a native `<input>` or `<select>` with a label and token gap; native text controls inherit the generated document canvas. `Steps` is a one-page vertical stepper: an `ol` of `Step` panels in order, numbered by their place, a line joining each marker to the next (in the success color below a done step). A `Step` takes `status` (`'upcoming' | 'current' | 'done' | 'error' | 'skipped'`) and `title` (a heading at the list's `headingLevel`, 2 by default, or the step's own). The current step is open with its `children` and has `aria-current="step"`; an error step stays open with a "!" marker. A done step folds to one line: a check, the title, its `summary` (truncated) and, with `onEdit` and `editLabel`, a ghost small `Button` at the end named by its label and the title ("Edit The site"). A step ahead is greyed with its number in a ring; a skipped step is greyed with its `skippedReason` after the title (pass your own separator, such as "· not needed"). A folded step's heading ends in its status word for assistive technology (visually hidden; English by default, `labels` on `Steps` takes your words). When a step becomes current from a folded state (upcoming, done or skipped), focus moves to its heading, a programmatic focus target; if several do in one update, the first in the list takes it. A first render, a move between current and error, and a step that turns to error leave focus alone: after a refused submit, move focus to the first invalid field yourself, as with `Field`. An error step has no `aria-current`; its heading's status word says it needs attention. Scalewing holds no order rules: the consumer sets each step's status. `Steps open` (off by default) keeps every step open at once, for a form whose sections are all filled on one page: each step shows its `children` whatever its status, inside a `section` named by its title (a region, class `sw-steps-region`), every title at the open size; the marker still follows the status (a number to fill, a check when done, "!" in error, a grey ring and muted title when greyed, such as after a blocking step), no step is `aria-current`, and no step takes focus when its status changes. Pass the `Step`s as direct children (a Fragment around several would share one number). A `Step` outside `Steps`, a Fragment child, a blank title or reason, an unknown status or heading level, `onEdit` without `editLabel`, or a blank status word throws a `RangeError`.
 
 ```tsx
 <Steps aria-label="Heron survey">
@@ -89,6 +89,8 @@ Import the CSS once at the application entry. Do not copy it into your source tr
 </Field>
 ```
 
+Every press control and link takes an explicit `tabindex="0"`: `Button` (and the controls built on it, `CalendarButton` and `InfoTip`), `Box as="a"` with an `href`, `SectionNav` links, the `Select`, `MultiSelect` and `ActionMenu` triggers, `SegmentedControl` items (every item, as outside Safari: its arrow keys change the value, not the focus, so it is not a roving group), `DateField`'s calendar button and month steps, a search `Field`'s clear button, a `Table`'s sort and `TableCell onPress` buttons, `Checkbox`, `Switch`, and the checked radio of a `RadioGroup` or `FilterChips` (the first enabled one while none is; the others keep no `tabindex`, so each browser's arrow-key group rule stands). Safari's default (its "Press Tab to highlight each item" setting off) leaves a button, a link, a checkbox and a radio out of the Tab order unless it carries one, so a Safari user would Tab past them; the explicit `0` gives them the order every other browser already does. A `tabIndex` you pass wins, and controls that are deliberately no tab stop keep their `-1`: a `Stepper`'s − and +, and a roving item (a `Tabs` tab, a menu item, a calendar day) other than the current one. A `<summary>` is already in Safari's order and takes none.
+
 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
@@ -219,6 +221,8 @@ A `Button`'s own children are laid out in a row one token gap apart (spacing ste
 
 On the web, `variant="neutral"` is a quiet grey fill (the muted color at 16 %, the fill of an open menu row) with its words in the text color and no border: an action beside the primary that should not draw the eye, such as a sheet's Cancel. It is web only (`webButtonVariants`; the shared `buttonVariants` in `@scalewing/tokens` and React Native do not have it). `disabledAppearance="neutral"` (default `"faded"`) draws a disabled button on that grey with its words in the muted color at 48 % (about #AEAEAE on the grey) and full opacity, whatever its variant, instead of fading its own fill (a disabled accent reads as a paler accent); a `ghost` button, which has no fill, still fades. The button is still a disabled `button`; forced colors draw it as any disabled button. An unknown `disabledAppearance` throws a `RangeError`.
 
+A `Button` with `aria-disabled="true"` (not `disabled`) looks disabled, faded or, with `disabledAppearance="neutral"`, on the neutral grey, with `GrayText` in forced colors, yet stays a focusable, pressable `button`: its `onPress` still runs, so a submit pressed while off can take the person to what is missing. Its look alone does not say what is missing: a press while off should show the message of the first thing to fix. Use `disabled` when a press should do nothing.
+
 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`.
 
 `ButtonGroup` is the action row of a form or dialog (`role="group"`, named by `aria-label`): one line from `md` up, aligned by `justify`, and full-width stacked buttons below it. `attached` makes it one joined control instead, such as Previous, Today and Next: its direct `Button` children sit side by side at one height with no gap, their borders overlapping into single dividers (a borderless variant draws its divider in its own text color at low strength), with square inner corners and `sm`-radius outer ones, mirrored right to left. It keeps its row on a phone and sizes to its buttons, so `justify` does not apply. The group is its own stacking context: a pressed toggle's ring and the focused button's usual outer ring paint over the neighbours. Give every button the same variant and size, such as `secondary`; a wrapper around a button (a tooltip's span) is not joined.

package/dist/components/ActionMenu.js

@@ -4,6 +4,7 @@ import { useId, useLayoutEffect, useRef, useState, } from 'react';
 import { cx } from '../class-names.js';
 import { actionMenuTriggerAppearances, actionMenuTriggerTextClass, } from '../css/css-action-menu-trigger.js';
 import { ActionMenuList } from './action-menu/ActionMenuList.js';
+import { tabStop } from '../tab-stop.js';
 export { actionMenuTriggerAppearances };
 function nextEnabled(items, current, direction) {
     if (items.length === 0)
@@ -93,5 +94,5 @@ export function ActionMenu({ label, items, header, trigger, disabled = false, al
         close(true);
         item.onSelect();
     }
-    return (_jsxs("div", { className: "sw-action-menu", children: [_jsx("button", { "aria-controls": open ? menuId : undefined, "aria-expanded": open, "aria-haspopup": "menu", "aria-label": label, className: cx('sw-action-menu-trigger', triggerAppearance === 'text' && actionMenuTriggerTextClass), disabled: !enabled, onClick: () => (open ? close(true) : openMenu()), onKeyDown: onTriggerKeyDown, ref: triggerRef, type: "button", children: triggerAppearance === 'text' ? (_jsx("span", { children: trigger ?? label })) : ((trigger ?? label)) }), open ? (_jsx(ActionMenuList, { align: align, focusIndex: focusIndex, header: header, id: menuId, items: items, label: label, onDismiss: () => close(), onFocusIndex: setFocusIndex, onKeyDown: onMenuKeyDown, onSelect: select, triggerRef: triggerRef })) : null] }));
+    return (_jsxs("div", { className: "sw-action-menu", children: [_jsx("button", { "aria-controls": open ? menuId : undefined, "aria-expanded": open, "aria-haspopup": "menu", "aria-label": label, className: cx('sw-action-menu-trigger', triggerAppearance === 'text' && actionMenuTriggerTextClass), disabled: !enabled, onClick: () => (open ? close(true) : openMenu()), onKeyDown: onTriggerKeyDown, ref: triggerRef, tabIndex: tabStop, type: "button", children: triggerAppearance === 'text' ? (_jsx("span", { children: trigger ?? label })) : ((trigger ?? label)) }), open ? (_jsx(ActionMenuList, { align: align, focusIndex: focusIndex, header: header, id: menuId, items: items, label: label, onDismiss: () => close(), onFocusIndex: setFocusIndex, onKeyDown: onMenuKeyDown, onSelect: select, triggerRef: triggerRef })) : null] }));
 }

package/dist/components/Box.js

@@ -5,10 +5,13 @@ import { boxBorderClass } from '../css/css-box-border.js';
 import { assertBoxLink, boxLinkClass, } from '../css/css-box-link.js';
 import { columnSpanClassNames, } from '../column-span-classes.js';
 import { spacingClassNames } from '../spacing-classes.js';
+import { tabStop } from '../tab-stop.js';
 import { visibilityClassNames, } from '../visibility-classes.js';
-export const Box = forwardRef(function Box({ as = 'div', background, border, className, columnSpan, hideBelow, hideFrom, link, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, radius, style, ...rest }, ref) {
+export const Box = forwardRef(function Box({ as = 'div', background, border, className, columnSpan, hideBelow, hideFrom, link, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, radius, style, tabIndex, ...rest }, ref) {
     assertBoxLink(link, as);
     const Component = as;
+    // A link with a destination is a tab stop in Safari too (see tabStop).
+    const linkTabStop = as === 'a' && rest.href !== undefined ? tabStop : undefined;
     return (_jsx(Component, { ref: ref, className: cx(...spacingClassNames({
             padding,
             paddingBottom,
@@ -23,5 +26,5 @@ export const Box = forwardRef(function Box({ as = 'div', background, border, cla
                 : undefined,
             borderRadius: radius ? `var(--sw-radius-${radius})` : undefined,
             ...style,
-        }, ...rest }));
+        }, tabIndex: tabIndex ?? linkTabStop, ...rest }));
 });

package/dist/components/Button.js

@@ -2,8 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { buttonClassNames, buttonDisabledAppearances, } from '../css/css-button.js';
 import { forwardRef } from 'react';
 import { cx } from '../class-names.js';
-export const Button = forwardRef(function Button({ children, className, disabled = false, disabledAppearance = 'faded', onPress, size = 'md', type = 'button', variant = 'primary', ...rest }, ref) {
+import { tabStop } from '../tab-stop.js';
+export const Button = forwardRef(function Button({ children, className, disabled = false, disabledAppearance = 'faded', onPress, size = 'md', tabIndex, type = 'button', variant = 'primary', ...rest }, ref) {
     if (!buttonDisabledAppearances.includes(disabledAppearance))
         throw new RangeError(`Unknown Button disabledAppearance: ${String(disabledAppearance)}`);
-    return (_jsx("button", { ref: ref, className: cx(...buttonClassNames({ size, variant, disabledAppearance }), className), disabled: disabled, type: type, ...rest, onClick: onPress, children: children }));
+    return (_jsx("button", { ref: ref, className: cx(...buttonClassNames({ size, variant, disabledAppearance }), className), disabled: disabled, tabIndex: tabIndex ?? tabStop, type: type, ...rest, onClick: onPress, children: children }));
 });

package/dist/components/DateField.js

@@ -13,6 +13,7 @@ import { DateFieldGlyph } from './date-field/DateFieldGlyph.js';
 import { useCalendarPopup } from './date-field/use-calendar-popup.js';
 import { useDateEntry } from './date-field/use-date-entry.js';
 import { useLangLocale } from './date-field/use-lang-locale.js';
+import { tabStop } from '../tab-stop.js';
 export function DateField({ label, value, onChange, min, max, today, disabled = false, required = false, requiredMark = 'visible', description, error, locale, weekStartsOn = 0, labels, }) {
     assertRequiredMark(requiredMark);
     assertDateBounds(value, min, max);
@@ -59,5 +60,5 @@ export function DateField({ label, value, onChange, min, max, today, disabled =
                             day: words.dayPlaceholder,
                             month: words.monthPlaceholder,
                             year: words.yearPlaceholder,
-                        }), ref: inputRef, required: required, spellCheck: false, type: "text", value: entry.text }), _jsxs("button", { ...trigger, "aria-describedby": labelId, className: "sw-date-field-button", disabled: disabled, onClick: toggle, ref: buttonRef, type: "button", children: [_jsx("span", { className: "sw-sr-only", children: words.chooseDate }), _jsx(DateFieldGlyph, { name: "calendar" })] })] }), description ? (_jsx("span", { className: "sw-date-field-description", id: descriptionId, children: description })) : null, _jsx(FieldErrorRegion, { className: "sw-date-field-error", id: entryErrorId, message: entry.invalid ? words.invalidEntry : undefined }), _jsx(FieldErrorRegion, { className: "sw-date-field-error", id: errorId, message: error }), shown ? (_jsx(CalendarDialog, { ...dialog, buttonRef: buttonRef, anchorRef: controlRef, labelId: labelId, labels: words, locale: resolvedLocale, max: max, min: min, required: required, value: value, weekStartsOn: weekStartsOn })) : null] }));
+                        }), ref: inputRef, required: required, spellCheck: false, type: "text", value: entry.text }), _jsxs("button", { ...trigger, "aria-describedby": labelId, className: "sw-date-field-button", disabled: disabled, onClick: toggle, ref: buttonRef, tabIndex: tabStop, type: "button", children: [_jsx("span", { className: "sw-sr-only", children: words.chooseDate }), _jsx(DateFieldGlyph, { name: "calendar" })] })] }), description ? (_jsx("span", { className: "sw-date-field-description", id: descriptionId, children: description })) : null, _jsx(FieldErrorRegion, { className: "sw-date-field-error", id: entryErrorId, message: entry.invalid ? words.invalidEntry : undefined }), _jsx(FieldErrorRegion, { className: "sw-date-field-error", id: errorId, message: error }), shown ? (_jsx(CalendarDialog, { ...dialog, buttonRef: buttonRef, anchorRef: controlRef, labelId: labelId, labels: words, locale: resolvedLocale, max: max, min: min, required: required, value: value, weekStartsOn: weekStartsOn })) : null] }));
 }

package/dist/components/FilterChips.js

@@ -4,6 +4,7 @@ import { useId } from 'react';
 import { cx } from '../class-names.js';
 import { FieldErrorRegion } from './FieldErrorRegion.js';
 import { assertRequiredMark, showsRequiredMark, } from './FieldLabelText.js';
+import { radioTabStopValue, tabStop } from '../tab-stop.js';
 function isCount(count) {
     return count === undefined || (Number.isInteger(count) && count >= 0);
 }
@@ -26,8 +27,9 @@ export function FilterChips({ label, value, onChange, options, required = false,
         throw new RangeError('value must match an option or be empty');
     if (options.some((option) => !isCount(option.count)))
         throw new RangeError('count must be a non-negative integer');
+    const entry = radioTabStopValue(options, value);
     return (_jsxs("fieldset", { "aria-describedby": describedBy || undefined, "aria-invalid": error ? true : undefined, className: "sw-filter-chips", children: [_jsxs("legend", { className: "sw-filter-chips-legend", children: [label, showsRequiredMark(required, requiredMark) ? (_jsxs("span", { "aria-hidden": "true", className: "sw-field-required", children: [' ', "*"] })) : null] }), _jsx("span", { className: "sw-filter-chips-options", children: options.map((option) => (_jsxs("label", { className: cx('sw-filter-chip', option.count === 0 && 'sw-filter-chip-quiet'), children: [_jsx("input", { checked: option.value === value, className: "sw-filter-chip-input", disabled: option.disabled, name: name, onChange: (event) => {
                                 if (event.currentTarget.checked && !option.disabled)
                                     onChange(option.value);
-                            }, required: required, type: "radio", value: option.value }), _jsxs("span", { className: "sw-filter-chip-face", children: [option.label, option.count === undefined ? null : (_jsxs(_Fragment, { children: [' ', _jsx("span", { className: "sw-filter-chip-count", children: option.count })] }))] })] }, option.value))) }), _jsx(FieldErrorRegion, { className: "sw-filter-chips-error", id: errorId, message: error })] }));
+                            }, required: required, tabIndex: option.value === entry ? tabStop : undefined, type: "radio", value: option.value }), _jsxs("span", { className: "sw-filter-chip-face", children: [option.label, option.count === undefined ? null : (_jsxs(_Fragment, { children: [' ', _jsx("span", { className: "sw-filter-chip-count", children: option.count })] }))] })] }, option.value))) }), _jsx(FieldErrorRegion, { className: "sw-filter-chips-error", id: errorId, message: error })] }));
 }

package/dist/components/MultiSelect.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useRef, useState } from 'react';
 import { MultiSelectPanel } from './multi-select/MultiSelectPanel.js';
 import { assertMultiSelect } from './multi-select/validate.js';
+import { tabStop } from '../tab-stop.js';
 /**
  * Several choices from a short list behind one trigger: "Show All entries ▾"
  * opens a panel with All, Clear and a checkbox per option. A disclosure (a
@@ -58,5 +59,5 @@ export function MultiSelect({ align = 'start', allLabel, clearLabel, disabled =
             close(true);
         }
     }
-    return (_jsxs("div", { className: "sw-multi-select", children: [_jsxs("button", { "aria-controls": shown ? panelId : undefined, "aria-expanded": shown, className: "sw-multi-select-trigger", disabled: disabled, onClick: () => (shown ? close(true) : setOpen(true)), onKeyDown: onTriggerKeyDown, ref: triggerRef, type: "button", children: [_jsx("span", { className: "sw-multi-select-label", children: label }), ' ', _jsx("span", { className: "sw-multi-select-summary", children: summary })] }), shown ? (_jsx(MultiSelectPanel, { align: align, allLabel: allLabel, checked: checked, clearLabel: clearLabel, id: panelId, label: label, onAll: () => report(new Set(options.map((option) => option.value))), onClear: () => report(new Set()), onClose: close, onToggle: onToggle, options: options, triggerRef: triggerRef })) : null] }));
+    return (_jsxs("div", { className: "sw-multi-select", children: [_jsxs("button", { "aria-controls": shown ? panelId : undefined, "aria-expanded": shown, className: "sw-multi-select-trigger", disabled: disabled, onClick: () => (shown ? close(true) : setOpen(true)), onKeyDown: onTriggerKeyDown, ref: triggerRef, tabIndex: tabStop, type: "button", children: [_jsx("span", { className: "sw-multi-select-label", children: label }), ' ', _jsx("span", { className: "sw-multi-select-summary", children: summary })] }), shown ? (_jsx(MultiSelectPanel, { align: align, allLabel: allLabel, checked: checked, clearLabel: clearLabel, id: panelId, label: label, onAll: () => report(new Set(options.map((option) => option.value))), onClear: () => report(new Set()), onClose: close, onToggle: onToggle, options: options, triggerRef: triggerRef })) : null] }));
 }

package/dist/components/RadioGroup.js

@@ -3,6 +3,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';
+import { radioTabStopValue } from '../tab-stop.js';
 export function RadioGroup({ legend, value, onChange, options, required = false, disabled = false, description, error, }) {
     const name = useId();
     const descriptionId = useId();
@@ -20,8 +21,9 @@ 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');
+    const entry = radioTabStopValue(options, value);
     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 })] }));
+                    }, option: option, required: required, isTabStop: option.value === entry }, option.value))) }), _jsx(FieldErrorRegion, { className: "sw-radio-group-error", id: errorId, message: error })] }));
 }

package/dist/components/SectionNav.js

@@ -3,6 +3,7 @@ import { cx } from '../class-names.js';
 import { breakpoints } from '../css/breakpoints.js';
 import { sectionNavVerticalClass } from '../css/css-section-nav.js';
 import { assertSectionNavAppearance, } from '../css/css-section-nav-filled.js';
+import { tabStop } from '../tab-stop.js';
 export { sectionNavAppearances } from '../css/css-section-nav-filled.js';
 function plainPress(event) {
     return (event.button === 0 &&
@@ -43,7 +44,7 @@ export function SectionNav({ appearance = 'underline', items, onNavigate, vertic
     assertItems(items);
     assertBreakpoint(verticalFrom);
     assertSectionNavAppearance(appearance);
-    return (_jsx("nav", { className: cx('sw-section-nav', verticalFrom && sectionNavVerticalClass(verticalFrom), appearance === 'filled' && 'sw-section-nav-filled'), ...label, children: _jsx("ul", { className: "sw-section-nav-list", children: items.map((item) => (_jsx("li", { children: _jsxs("a", { "aria-current": ariaCurrent(item.current), className: "sw-section-nav-link", href: item.href, 
+    return (_jsx("nav", { className: cx('sw-section-nav', verticalFrom && sectionNavVerticalClass(verticalFrom), appearance === 'filled' && 'sw-section-nav-filled'), ...label, children: _jsx("ul", { className: "sw-section-nav-list", children: items.map((item) => (_jsx("li", { children: _jsxs("a", { "aria-current": ariaCurrent(item.current), className: "sw-section-nav-link", href: item.href, tabIndex: tabStop, 
                     // Only a given onNavigate attaches a handler, so the links
                     // render from a server component without one.
                     onClick: onNavigate

package/dist/components/SegmentedControl.js

@@ -4,6 +4,7 @@ import { forwardRef, useId } from 'react';
 import { cx } from '../class-names.js';
 import { segmentedRaisedClass } from '../css/css-segmented-raised.js';
 import { FieldErrorRegion } from './FieldErrorRegion.js';
+import { tabStop } from '../tab-stop.js';
 export const SegmentedControl = forwardRef(function SegmentedControl({ disabled = false, error, items, onChange, required = false, value, variant = 'compact', ...labelProps }, ref) {
     const errorId = useId();
     const withIcons = items.some((item) => item.icon);
@@ -30,6 +31,9 @@ export const SegmentedControl = forwardRef(function SegmentedControl({ disabled
                             if (!selected) {
                                 onChange?.(item.id);
                             }
-                        }, role: "radio", type: "button", children: [item.icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-segmented-item-icon", children: item.icon })) : null, item.label] }, item.id));
+                        }, role: "radio", 
+                        // Every item stays a tab stop, as each already was outside
+                        // Safari: the arrow keys change the value, not the focus.
+                        tabIndex: tabStop, type: "button", children: [item.icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-segmented-item-icon", children: item.icon })) : null, item.label] }, item.id));
                 }) }), _jsx(FieldErrorRegion, { className: "sw-field-error", id: errorId, message: error })] }));
 });

package/dist/components/Select.js

@@ -9,6 +9,7 @@ import { SelectListbox } from './select/SelectListbox.js';
 import { SelectValue } from './select/SelectValue.js';
 import { useSelectList } from './select/use-select-list.js';
 import { Stack } from './Stack.js';
+import { tabStop } from '../tab-stop.js';
 export function Select({ action, label, labelVisuallyHidden = false, onChange, options, size = 'md', value, placeholder, required = false, requiredMark = 'visible', error, width = 'content', }) {
     assertRequiredMark(requiredMark);
     if (placeholder !== undefined && !placeholder.trim())
@@ -35,5 +36,5 @@ export function Select({ action, label, labelVisuallyHidden = false, onChange, o
                                     return;
                                 }
                                 openList();
-                            }, onKeyDown: onTriggerKeyDown, role: "combobox", type: "button", children: _jsx(SelectValue, { options: options, placeholder: placeholder, text: showsPlaceholder ? placeholder : (selected?.label ?? ''), textIsPlaceholder: showsPlaceholder }) }), open ? (_jsx(SelectListbox, { actionLabel: action?.label, highlight: highlight, id: listId, labelId: labelId, onCommit: commit, onHighlight: setHighlight, optionIdPrefix: optionIdPrefix, options: options, value: value })) : null] }), _jsx(FieldErrorRegion, { className: "sw-field-error", id: errorId, message: error })] }) }));
+                            }, onKeyDown: onTriggerKeyDown, role: "combobox", tabIndex: tabStop, type: "button", children: _jsx(SelectValue, { options: options, placeholder: placeholder, text: showsPlaceholder ? placeholder : (selected?.label ?? ''), textIsPlaceholder: showsPlaceholder }) }), open ? (_jsx(SelectListbox, { actionLabel: action?.label, highlight: highlight, id: listId, labelId: labelId, onCommit: commit, onHighlight: setHighlight, optionIdPrefix: optionIdPrefix, options: options, value: value })) : null] }), _jsx(FieldErrorRegion, { className: "sw-field-error", id: errorId, message: error })] }) }));
 }

package/dist/components/Steps.d.ts

@@ -9,10 +9,19 @@ export type StepsProps = Omit<HTMLAttributes<HTMLOListElement>, 'children'> & {
     headingLevel?: StepHeadingLevel;
     /** The status words assistive technology hears after a folded step's title. English by default. */
     labels?: Partial<StepsLabels>;
+    /**
+     * Every step open: each shows its `children` whatever its status, as a
+     * region named by its title, so a form's sections are all filled on one
+     * page. The markers still say where each stands. No step is
+     * `aria-current` and none takes focus when its status changes. A step's
+     * own `headingLevel` still overrides the list's.
+     */
+    open?: boolean;
 };
 /**
  * A one-page vertical stepper: a form's steps in order, the current one
  * open, the done ones folded to a line with their summary and Edit, the
- * ones ahead greyed, a line joining each marker to the next.
+ * ones ahead greyed, a line joining each marker to the next. With `open`,
+ * every step stays open and only its marker follows its status.
  */
-export declare function Steps({ children, className, headingLevel, labels, ...rest }: StepsProps): import("react").JSX.Element;
+export declare function Steps({ children, className, headingLevel, labels, open, ...rest }: StepsProps): import("react").JSX.Element;

package/dist/components/Steps.js

@@ -14,9 +14,10 @@ function assertSteps(labels, level) {
 /**
  * A one-page vertical stepper: a form's steps in order, the current one
  * open, the done ones folded to a line with their summary and Edit, the
- * ones ahead greyed, a line joining each marker to the next.
+ * ones ahead greyed, a line joining each marker to the next. With `open`,
+ * every step stays open and only its marker follows its status.
  */
-export function Steps({ children, className, headingLevel = 2, labels, ...rest }) {
+export function Steps({ children, className, headingLevel = 2, labels, open = false, ...rest }) {
     const words = { ...defaultStepsLabels, ...labels };
     assertSteps(words, headingLevel);
     const steps = Children.toArray(children).filter(isValidElement);
@@ -25,10 +26,11 @@ export function Steps({ children, className, headingLevel = 2, labels, ...rest }
         throw new RangeError('Steps children must be Steps, not a Fragment');
     // The first step to open in a commit claims focus (see Step).
     const focusClaimRef = useRef(false);
-    return (_jsx("ol", { className: cx('sw-steps', className), ...rest, children: steps.map((step, index) => (_jsx(StepPlaceContext.Provider, { value: {
+    return (_jsx("ol", { className: cx('sw-steps', open && 'sw-steps-open', className), ...rest, children: steps.map((step, index) => (_jsx(StepPlaceContext.Provider, { value: {
                 number: index + 1,
                 headingLevel,
                 labels: words,
                 focusClaimRef,
+                open,
             }, children: step }, step.key))) }));
 }

package/dist/components/Switch.js

@@ -1,11 +1,12 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from 'react';
+import { tabStop } from '../tab-stop.js';
 export function Switch({ label, checked, onCheckedChange, disabled = false, description, }) {
     const labelId = useId();
     const descriptionId = useId();
     return (_jsxs("label", { className: "sw-switch", children: [_jsxs("span", { className: "sw-switch-control", children: [_jsx("input", { "aria-checked": checked, "aria-describedby": description ? descriptionId : undefined, "aria-labelledby": labelId, checked: checked, className: "sw-switch-input", disabled: disabled, onChange: (event) => {
                             if (!disabled)
                                 onCheckedChange(event.currentTarget.checked);
-                        }, role: "switch", type: "checkbox" }), _jsx("span", { "aria-hidden": "true", className: "sw-switch-track", children: _jsx("span", { className: "sw-switch-thumb" }) })] }), _jsxs("span", { className: "sw-switch-copy", children: [_jsx("span", { className: "sw-switch-label", id: labelId, children: label }), description ? (_jsx("span", { className: "sw-switch-description", id: descriptionId, children: description })) : null] })] }));
+                        }, role: "switch", tabIndex: tabStop, type: "checkbox" }), _jsx("span", { "aria-hidden": "true", className: "sw-switch-track", children: _jsx("span", { className: "sw-switch-thumb" }) })] }), _jsxs("span", { className: "sw-switch-copy", children: [_jsx("span", { className: "sw-switch-label", id: labelId, children: label }), description ? (_jsx("span", { className: "sw-switch-description", id: descriptionId, children: description })) : null] })] }));
 }

package/dist/components/checkbox/CheckboxControl.d.ts

@@ -5,5 +5,5 @@ type CheckboxControlProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'classNa
  * generated rules style (`input + .sw-checkbox-mark`). Shared by Checkbox
  * and MultiSelect's rows so the two cannot drift apart.
  */
-export declare function CheckboxControl(props: CheckboxControlProps): import("react").JSX.Element;
+export declare function CheckboxControl({ tabIndex, ...props }: CheckboxControlProps): import("react").JSX.Element;
 export {};

package/dist/components/checkbox/CheckboxControl.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tabStop } from '../../tab-stop.js';
 /**
  * The native checkbox and its drawn mark, the one markup Checkbox's
  * generated rules style (`input + .sw-checkbox-mark`). Shared by Checkbox
  * and MultiSelect's rows so the two cannot drift apart.
  */
-export function CheckboxControl(props) {
-    return (_jsxs("span", { className: "sw-checkbox-control", children: [_jsx("input", { ...props, className: "sw-checkbox-input", type: "checkbox" }), _jsx("span", { "aria-hidden": "true", className: "sw-checkbox-mark" })] }));
+export function CheckboxControl({ tabIndex, ...props }) {
+    return (_jsxs("span", { className: "sw-checkbox-control", children: [_jsx("input", { tabIndex: tabIndex ?? tabStop, ...props, className: "sw-checkbox-input", type: "checkbox" }), _jsx("span", { "aria-hidden": "true", className: "sw-checkbox-mark" })] }));
 }

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

@@ -4,13 +4,14 @@ import { monthInRange, monthsInRange, shiftMonth, } from '../../calendar-month.j
 import { calendarYearRange, yearsIn } from '../../calendar-years.js';
 import { Select } from '../Select.js';
 import { DateFieldGlyph } from './DateFieldGlyph.js';
+import { tabStop } from '../../tab-stop.js';
 function MonthStep({ delta, label, max, min, month, onMonthChange, }) {
     const target = shiftMonth(month, delta);
     const unavailable = target.year < 1 || target.year > 9999 || !monthInRange(target, min, max);
     return (_jsx("button", { "aria-disabled": unavailable || undefined, "aria-label": label, className: "sw-date-field-step", onClick: () => {
             if (!unavailable)
                 onMonthChange(target);
-        }, type: "button", children: _jsx(DateFieldGlyph, { name: delta < 0 ? 'previous' : 'next' }) }));
+        }, tabIndex: tabStop, type: "button", children: _jsx(DateFieldGlyph, { name: delta < 0 ? 'previous' : 'next' }) }));
 }
 /**
  * Month stepping plus month and year selectors for jumping far, both cut to

package/dist/components/field/SearchFrame.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tabStop } from '../../tab-stop.js';
 /*
  * A press on the frame's chrome (the glyph or the padding) focuses the
  * input, as on an adorned field; a press on the input keeps the browser's
@@ -28,5 +29,5 @@ export function SearchFrame({ children, clearLabel, leading, onClear, showClear,
                         ?.querySelector('input')
                         ?.focus();
                     onClear();
-                }, type: "button", children: _jsx("span", { "aria-hidden": "true", className: "sw-field-search-cross" }) })) : null] }));
+                }, tabIndex: tabStop, type: "button", children: _jsx("span", { "aria-hidden": "true", className: "sw-field-search-cross" }) })) : null] }));
 }

package/dist/components/radio-group/RadioGroupOptionLabel.d.ts

@@ -27,6 +27,8 @@ type RadioGroupOptionLabelProps = {
     name: string;
     checked: boolean;
     required: boolean;
+    /** Whether this radio is its group's explicit Tab stop (`radioTabStopValue`). */
+    isTabStop: boolean;
     onSelect: () => void;
 };
 /**
@@ -35,5 +37,5 @@ type RadioGroupOptionLabelProps = {
  * 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 declare function RadioGroupOptionLabel({ option, name, checked, required, isTabStop, onSelect, }: RadioGroupOptionLabelProps): import("react").JSX.Element;
 export {};

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from 'react';
+import { tabStop } from '../../tab-stop.js';
 /** Whether React renders something for a description: not nothing, a boolean or ''. */
 function hasDescription(description) {
     return (description !== undefined &&
@@ -13,7 +14,7 @@ function hasDescription(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, }) {
+export function RadioGroupOptionLabel({ option, name, checked, required, isTabStop, onSelect, }) {
     const id = useId();
     const textId = `${id}-text`;
     const descriptionId = `${id}-description`;
@@ -22,5 +23,5 @@ export function RadioGroupOptionLabel({ option, name, checked, required, onSelec
     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)] }));
+                        }, required: required, tabIndex: isTabStop ? tabStop : undefined, 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/components/steps/Step.d.ts

@@ -13,12 +13,14 @@ export type StepProps = {
     skippedReason?: string;
     /** Overrides the list's heading level for this step's title. */
     headingLevel?: StepHeadingLevel;
-    /** The step's fields, shown while it is current or in error. */
+    /** The step's fields, shown while it is current or in error, or always in an open list. */
     children?: ReactNode;
 };
 /**
  * One step of a `Steps` list: a numbered marker, the title as a heading,
  * and, by status, its fields (current, error) or one folded line (a done
- * step's summary and Edit; an upcoming or skipped step's title alone).
+ * step's summary and Edit; an upcoming or skipped step's title alone). In
+ * an open list every step shows its fields, inside a region named by its
+ * title.
  */
 export declare function Step(props: StepProps): import("react").JSX.Element;

package/dist/components/steps/Step.js

@@ -21,12 +21,15 @@ function assertStep(props, level) {
  * Moves focus to the heading when the step becomes current from a folded
  * state, unless an earlier step of the list already took it in this commit
  * (effects run in list order, so the first one wins; the claim is released
- * after the flush).
+ * after the flush). In an open list nothing folds or opens, so focus stays
+ * where the person put it.
  */
-function useFocusWhenOpened(status, heading, focusClaimRef) {
+function useFocusWhenOpened(status, heading, focusClaimRef, open) {
     const previous = useRef(undefined);
     useEffect(() => {
-        if (stepTakesFocus(previous.current, status) && !focusClaimRef.current) {
+        if (!open &&
+            stepTakesFocus(previous.current, status) &&
+            !focusClaimRef.current) {
             focusClaimRef.current = true;
             heading.current?.focus();
             // One commit's effects run in one flush: release the claim after it,
@@ -36,12 +39,14 @@ function useFocusWhenOpened(status, heading, focusClaimRef) {
             });
         }
         previous.current = status;
-    }, [status, heading, focusClaimRef]);
+    }, [status, heading, focusClaimRef, open]);
 }
 /**
  * One step of a `Steps` list: a numbered marker, the title as a heading,
  * and, by status, its fields (current, error) or one folded line (a done
- * step's summary and Edit; an upcoming or skipped step's title alone).
+ * step's summary and Edit; an upcoming or skipped step's title alone). In
+ * an open list every step shows its fields, inside a region named by its
+ * title.
  */
 export function Step(props) {
     const place = useContext(StepPlaceContext);
@@ -53,10 +58,13 @@ export function Step(props) {
     const heading = useRef(null);
     const titleId = useId();
     const editId = useId();
-    useFocusWhenOpened(status, heading, place.focusClaimRef);
+    useFocusWhenOpened(status, heading, place.focusClaimRef, place.open);
     const Heading = `h${level}`;
     const reason = status === 'skipped' ? skippedReason : undefined;
     const word = stepStatusWord(status, place.labels, reason !== undefined);
     const done = status === 'done';
-    return (_jsxs("li", { "aria-current": status === 'current' ? 'step' : undefined, className: cx('sw-steps-item', `sw-steps-item-${status}`), children: [_jsxs("div", { className: "sw-steps-header", children: [_jsx("span", { "aria-hidden": "true", className: "sw-steps-marker", children: status === 'error' ? '!' : done ? null : place.number }), _jsxs(Heading, { ref: heading, className: "sw-steps-title", tabIndex: -1, children: [_jsx("span", { id: titleId, children: title }), reason ? (_jsxs(_Fragment, { children: [' ', _jsx("span", { className: "sw-steps-reason", children: reason })] })) : null, word ? _jsxs("span", { className: "sw-sr-only", children: [", ", word] }) : null] }), done && summary ? (_jsx("span", { className: "sw-steps-summary", children: summary })) : null, done && onEdit ? (_jsx(Button, { "aria-labelledby": `${editId} ${titleId}`, className: "sw-steps-edit", id: editId, onPress: onEdit, size: "sm", variant: "ghost", children: editLabel })) : null] }), isOpenStep(status) && Children.toArray(children).length > 0 ? (_jsx("div", { className: "sw-steps-body", children: children })) : null] }));
+    const header = (_jsxs("div", { className: "sw-steps-header", children: [_jsx("span", { "aria-hidden": "true", className: "sw-steps-marker", children: status === 'error' ? '!' : done ? null : place.number }), _jsxs(Heading, { ref: heading, className: "sw-steps-title", tabIndex: -1, children: [_jsx("span", { id: titleId, children: title }), reason ? (_jsxs(_Fragment, { children: [' ', _jsx("span", { className: "sw-steps-reason", children: reason })] })) : null, word ? _jsxs("span", { className: "sw-sr-only", children: [", ", word] }) : null] }), done && summary ? (_jsx("span", { className: "sw-steps-summary", children: summary })) : null, done && onEdit ? (_jsx(Button, { "aria-labelledby": `${editId} ${titleId}`, className: "sw-steps-edit", id: editId, onPress: onEdit, size: "sm", variant: "ghost", children: editLabel })) : null] }));
+    const shown = (place.open || isOpenStep(status)) && Children.toArray(children).length > 0;
+    const content = (_jsxs(_Fragment, { children: [header, shown ? _jsx("div", { className: "sw-steps-body", children: children }) : null] }));
+    return (_jsx("li", { "aria-current": !place.open && status === 'current' ? 'step' : undefined, className: cx('sw-steps-item', `sw-steps-item-${status}`), children: place.open ? (_jsx("section", { "aria-labelledby": titleId, className: "sw-steps-region", children: content })) : (content) }));
 }

package/dist/components/steps/steps-context.d.ts

@@ -2,15 +2,17 @@ import { type RefObject } from 'react';
 import { type StepHeadingLevel, type StepsLabels } from './step-status.js';
 /**
  * What a `Step` learns from its `Steps`: its number, its heading level, the
- * status words, and the list's focus claim for this commit (the first step
- * to open in a commit takes focus and releases the claim after that
- * commit's effects).
+ * status words, the list's focus claim for this commit (the first step to
+ * open in a commit takes focus and releases the claim after that commit's
+ * effects), and whether every step is open.
  */
 export type StepPlace = {
     number: number;
     headingLevel: StepHeadingLevel;
     labels: StepsLabels;
     focusClaimRef: RefObject<boolean>;
+    /** Every step of the list is open (`Steps open`). */
+    open: boolean;
 };
 /** Null outside `Steps`: a `Step` must be one of a list's steps. */
 export declare const StepPlaceContext: import("react").Context<StepPlace | null>;

package/dist/components/table/TableCell.js

@@ -3,6 +3,7 @@ import { forwardRef, } from 'react';
 import { cx } from '../../class-names.js';
 import { assertTableCellTone, } from '../../css/css-table-ledger.js';
 import { assertTableColumnWidth, tableColumnWidthClass, } from './table-layout.js';
+import { tabStop } from '../../tab-stop.js';
 const tableSorts = ['ascending', 'descending', 'none'];
 /** A cell's press is a function, and never on a sortable header. */
 function assertPress(onPress, sort) {
@@ -35,5 +36,5 @@ export const TableCell = forwardRef(function TableCell({ align = 'start', as = '
         : align === 'end'
             ? 'sw-table-end'
             : undefined;
-    return (_jsx(Component, { ref: ref, "aria-sort": sort === undefined || sort === 'none' ? undefined : sort, className: cx(alignmentClass, truncate && 'sw-table-clip', tone && `sw-table-tone-${tone}`, width && tableColumnWidthClass(width), className), ...rest, children: sort !== undefined && onSort ? (_jsxs("button", { className: "sw-table-sort", onClick: onSort, type: "button", children: [children, _jsx("span", { "aria-hidden": "true", className: cx('sw-table-sort-glyph', `sw-table-sort-${sort}`) })] })) : onPress ? (_jsx("button", { className: "sw-table-action", onClick: onPress, type: "button", children: children })) : (children) }));
+    return (_jsx(Component, { ref: ref, "aria-sort": sort === undefined || sort === 'none' ? undefined : sort, className: cx(alignmentClass, truncate && 'sw-table-clip', tone && `sw-table-tone-${tone}`, width && tableColumnWidthClass(width), className), ...rest, children: sort !== undefined && onSort ? (_jsxs("button", { className: "sw-table-sort", onClick: onSort, tabIndex: tabStop, type: "button", children: [children, _jsx("span", { "aria-hidden": "true", className: cx('sw-table-sort-glyph', `sw-table-sort-${sort}`) })] })) : onPress ? (_jsx("button", { className: "sw-table-action", onClick: onPress, tabIndex: tabStop, type: "button", children: children })) : (children) }));
 });

package/dist/css/css-button.js

@@ -35,11 +35,11 @@ function variantRules() {
  * A neutral disabled button: the quiet fill with its words in the muted
  * color at 48 %, about #AEAEAE on the grey (a disabled control needs no
  * contrast, and the faded words say it cannot be pressed), at full
- * opacity so no accent shows through.
- * Forced colors draw it as any disabled button.
+ * opacity so no accent shows through. The same for one that is only
+ * \`aria-disabled\`. Forced colors draw it as any disabled button.
  */
 function disabledNeutralRules() {
-    return `.sw-button-disabled-neutral:disabled:not(.sw-button-ghost) {
+    return `.sw-button-disabled-neutral:is(:disabled, [aria-disabled='true']):not(.sw-button-ghost) {
   background: ${quietFill};
   border-color: transparent;
   color: color-mix(in srgb, var(--sw-color-muted) 48%, transparent);
@@ -73,6 +73,14 @@ function pressedRules() {
   .sw-button[aria-pressed='true']::after { border: ${pressedRingWidth - pressedRingGap}px solid Highlight; border-radius: inherit; content: ''; inset: calc(-1px - ${pressedRingWidth}px); pointer-events: none; position: absolute; }
 }`;
 }
+/* The system greys a disabled button in forced colors, not one that is
+   only aria-disabled: grey it the same, over the neutral look's words. */
+function ariaDisabledForcedRules() {
+    return `@media (forced-colors: active) {
+  .sw-button[aria-disabled='true'],
+  .sw-button-disabled-neutral[aria-disabled='true']:not(.sw-button-ghost) { border-color: GrayText; color: GrayText; }
+}`;
+}
 function sizeRules() {
     return buttonSizes
         .map((size) => {
@@ -114,14 +122,18 @@ export function cssButtonClasses() {
   outline-offset: var(--sw-focus-ring-offset);
 }
 
-.sw-button:disabled {
+/* A button that is off but still pressed and focused (\`aria-disabled\`,
+   for a submit that, pressed while off, shows what to fix) looks as a
+   disabled one; forced colors grey it too, after the pressed rules. */
+.sw-button:disabled,
+.sw-button[aria-disabled='true'] {
   cursor: not-allowed;
   opacity: var(--sw-disabled-opacity);
 }
-
 ${variantRules()}
 ${disabledNeutralRules()}
 ${pressedRules()}
+${ariaDisabledForcedRules()}
 ${sizeRules()}
 ${groupRules()}
 

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

@@ -3,7 +3,9 @@
  * gap apart. Each has a header line (marker, title, and on a done step its
  * summary and Edit) and, while open (current or error), a body indented to
  * the title. An open step's title is the title variant; a folded one's is
- * body size at label weight, muted ahead of the form or skipped.
+ * body size at label weight, muted ahead of the form or skipped. In an
+ * open list (`sw-steps-open`) every step is open: each panel takes the open
+ * padding and title, its header and body in one region.
  */
 export declare function cssStepsClasses(): string;
 export declare function stepsClassCatalog(): string[];

package/dist/css/css-steps.js

@@ -72,7 +72,9 @@ function forcedColorRules() {
  * gap apart. Each has a header line (marker, title, and on a done step its
  * summary and Edit) and, while open (current or error), a body indented to
  * the title. An open step's title is the title variant; a folded one's is
- * body size at label weight, muted ahead of the form or skipped.
+ * body size at label weight, muted ahead of the form or skipped. In an
+ * open list (`sw-steps-open`) every step is open: each panel takes the open
+ * padding and title, its header and body in one region.
  */
 export function cssStepsClasses() {
     return `.sw-steps {
@@ -99,10 +101,20 @@ export function cssStepsClasses() {
 }
 
 .sw-steps-item-current,
-.sw-steps-item-error {
+.sw-steps-item-error,
+.sw-steps-open > .sw-steps-item {
   --sw-steps-padding: var(--sw-space-4);
 }
 
+/* An open list's step is a region holding its header and body, spaced as
+   the item spaces them in a stepped list. */
+.sw-steps-region {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-4);
+  min-width: 0;
+}
+
 /* The marker sits at the top of the header, so the connector always starts
    under it; each line of the header is centred on the marker's height. */
 .sw-steps-header {
@@ -141,7 +153,8 @@ export function cssStepsClasses() {
 }
 
 .sw-steps-item-current .sw-steps-title,
-.sw-steps-item-error .sw-steps-title {
+.sw-steps-item-error .sw-steps-title,
+.sw-steps-open > .sw-steps-item .sw-steps-title {
   font-size: ${title.fontSize}px;
   letter-spacing: ${title.letterSpacing}px;
   line-height: ${title.lineHeight}px;
@@ -186,6 +199,7 @@ ${forcedColorRules()}`;
 export function stepsClassCatalog() {
     return [
         'sw-steps',
+        'sw-steps-open',
         'sw-steps-item',
         'sw-steps-item-upcoming',
         'sw-steps-item-current',
@@ -199,5 +213,6 @@ export function stepsClassCatalog() {
         'sw-steps-summary',
         'sw-steps-edit',
         'sw-steps-body',
+        'sw-steps-region',
     ];
 }

package/dist/styles.css

@@ -914,18 +914,21 @@ body {
   outline-offset: var(--sw-focus-ring-offset);
 }
 
-.sw-button:disabled {
+/* A button that is off but still pressed and focused (`aria-disabled`,
+   for a submit that, pressed while off, shows what to fix) looks as a
+   disabled one; forced colors grey it too, after the pressed rules. */
+.sw-button:disabled,
+.sw-button[aria-disabled='true'] {
   cursor: not-allowed;
   opacity: var(--sw-disabled-opacity);
 }
-
 .sw-button-primary { background: var(--sw-color-accent); border-color: transparent; color: var(--sw-color-onAccent); }
 .sw-button-secondary { background: var(--sw-color-secondary); border-color: var(--sw-button-secondary-border); color: var(--sw-color-onSecondary); }
 .sw-button-tertiary { background: var(--sw-color-tertiary); border-color: transparent; color: var(--sw-color-onTertiary); }
 .sw-button-ghost { background: transparent; border-color: transparent; color: var(--sw-color-accent); }
 .sw-button-danger { background: var(--sw-color-danger); border-color: transparent; color: var(--sw-color-onDanger); }
 .sw-button-neutral { background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent); border-color: transparent; color: var(--sw-color-text); }
-.sw-button-disabled-neutral:disabled:not(.sw-button-ghost) {
+.sw-button-disabled-neutral:is(:disabled, [aria-disabled='true']):not(.sw-button-ghost) {
   background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
   border-color: transparent;
   color: color-mix(in srgb, var(--sw-color-muted) 48%, transparent);
@@ -937,6 +940,10 @@ body {
   .sw-button[aria-pressed='true'] { border-color: Highlight; position: relative; }
   .sw-button[aria-pressed='true']::after { border: 2px solid Highlight; border-radius: inherit; content: ''; inset: calc(-1px - 4px); pointer-events: none; position: absolute; }
 }
+@media (forced-colors: active) {
+  .sw-button[aria-disabled='true'],
+  .sw-button-disabled-neutral[aria-disabled='true']:not(.sw-button-ghost) { border-color: GrayText; color: GrayText; }
+}
 .sw-button-xs { min-height: 28px; padding-inline: 10px; }
 .sw-button-sm { min-height: 32px; padding-inline: 12px; }
 .sw-button-md { min-height: 44px; padding-inline: 16px; }
@@ -5259,10 +5266,20 @@ body {
 }
 
 .sw-steps-item-current,
-.sw-steps-item-error {
+.sw-steps-item-error,
+.sw-steps-open > .sw-steps-item {
   --sw-steps-padding: var(--sw-space-4);
 }
 
+/* An open list's step is a region holding its header and body, spaced as
+   the item spaces them in a stepped list. */
+.sw-steps-region {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-4);
+  min-width: 0;
+}
+
 /* The marker sits at the top of the header, so the connector always starts
    under it; each line of the header is centred on the marker's height. */
 .sw-steps-header {
@@ -5301,7 +5318,8 @@ body {
 }
 
 .sw-steps-item-current .sw-steps-title,
-.sw-steps-item-error .sw-steps-title {
+.sw-steps-item-error .sw-steps-title,
+.sw-steps-open > .sw-steps-item .sw-steps-title {
   font-size: 20px;
   letter-spacing: -0.3px;
   line-height: 28px;

package/dist/tab-stop.d.ts

@@ -0,0 +1,22 @@
+/**
+ * The `tabIndex` every Scalewing press control and link renders by default.
+ *
+ * Safari leaves a `<button>`, a link, a checkbox and a radio out of the Tab
+ * order unless the element carries an explicit `tabindex` (its "Press Tab to
+ * highlight each item" setting is off by default), so a keyboard user there
+ * Tabs past them to the address bar. An explicit `0` puts them in the same
+ * order every other browser already gives them. A control that is
+ * deliberately not a tab stop (a Stepper's − and +, a roving item) keeps its
+ * own `-1`, and a consumer's `tabIndex` always wins.
+ */
+export declare const tabStop = 0;
+/**
+ * Which radio of a group carries the explicit tab stop: the checked one, or
+ * the first enabled one while none is. Browsers move between a group's
+ * radios with the arrow keys and Tab only into the group, so the others keep
+ * no `tabindex` and each browser's own group rule stands.
+ */
+export declare function radioTabStopValue(options: readonly {
+    value: string;
+    disabled?: boolean;
+}[], value: string | undefined): string | undefined;

package/dist/tab-stop.js

@@ -0,0 +1,23 @@
+/**
+ * The `tabIndex` every Scalewing press control and link renders by default.
+ *
+ * Safari leaves a `<button>`, a link, a checkbox and a radio out of the Tab
+ * order unless the element carries an explicit `tabindex` (its "Press Tab to
+ * highlight each item" setting is off by default), so a keyboard user there
+ * Tabs past them to the address bar. An explicit `0` puts them in the same
+ * order every other browser already gives them. A control that is
+ * deliberately not a tab stop (a Stepper's − and +, a roving item) keeps its
+ * own `-1`, and a consumer's `tabIndex` always wins.
+ */
+export const tabStop = 0;
+/**
+ * Which radio of a group carries the explicit tab stop: the checked one, or
+ * the first enabled one while none is. Browsers move between a group's
+ * radios with the arrow keys and Tab only into the group, so the others keep
+ * no `tabindex` and each browser's own group rule stands.
+ */
+export function radioTabStopValue(options, value) {
+    const enabled = options.filter((option) => !option.disabled);
+    return (enabled.find((option) => option.value === value) ?? enabled[0])
+        ?.value;
+}

package/package.json

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