@scalewing/react 1.44.0 → 1.46.0

package/dist/components/Select.js

@@ -5,16 +5,19 @@ import { cx } from '../class-names.js';
 import { selectedSelectIndex } from '../select-list.js';
 import { FieldErrorRegion } from './FieldErrorRegion.js';
 import { assertRequiredMark, FieldLabelText, } from './FieldLabelText.js';
+import { assertSelectNaming, } from './select/select-naming.js';
 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);
+export function Select({ action, label, labelVisuallyHidden, 'aria-labelledby': labelledBy, onChange, options, size = 'md', value, placeholder, required = false, requiredMark, error, width = 'content', }) {
+    assertSelectNaming({ label, labelVisuallyHidden, labelledBy, requiredMark });
+    assertRequiredMark(requiredMark ?? 'visible');
     if (placeholder !== undefined && !placeholder.trim())
         throw new RangeError('placeholder must not be empty');
-    const labelId = useId();
+    const ownLabelId = useId();
+    const labelId = labelledBy ?? ownLabelId;
     const triggerId = useId();
     const listId = useId();
     const optionIdPrefix = useId();
@@ -24,7 +27,7 @@ export function Select({ action, label, labelVisuallyHidden = false, onChange, o
     const showsPlaceholder = placeholder !== undefined &&
         !options.some((option) => option.value === value);
     const { commit, highlight, onTriggerKeyDown, open, openList, setHighlight, setOpen, } = useSelectList({ action, onChange, options, rootRef, value });
-    return (_jsx("div", { ref: rootRef, className: cx('sw-select', size === 'xs' && 'sw-select-xs', width === 'full' && 'sw-select-full', error && 'sw-select-invalid'), children: _jsxs(Stack, { gap: labelVisuallyHidden ? 0 : 1, children: [_jsx("label", { htmlFor: triggerId, id: labelId, children: _jsx(FieldLabelText, { label: label, required: required, requiredMark: requiredMark, size: size, visuallyHidden: labelVisuallyHidden }) }), _jsxs("div", { className: "sw-select-control", children: [_jsx("button", { "aria-activedescendant": open ? `${optionIdPrefix}-${highlight}` : undefined, "aria-controls": open ? listId : undefined, "aria-describedby": error ? errorId : undefined, "aria-expanded": open, "aria-haspopup": "listbox", "aria-invalid": error ? true : undefined, "aria-labelledby": labelId, "aria-required": required || undefined, className: "sw-select-trigger", id: triggerId, onBlur: (event) => {
+    return (_jsx("div", { ref: rootRef, className: cx('sw-select', size === 'xs' && 'sw-select-xs', width === 'full' && 'sw-select-full', error && 'sw-select-invalid'), children: _jsxs(Stack, { gap: label === undefined || labelVisuallyHidden ? 0 : 1, children: [label === undefined ? null : (_jsx("label", { htmlFor: triggerId, id: labelId, children: _jsx(FieldLabelText, { label: label, required: required, requiredMark: requiredMark ?? 'visible', size: size, visuallyHidden: labelVisuallyHidden ?? false }) })), _jsxs("div", { className: "sw-select-control", children: [_jsx("button", { "aria-activedescendant": open ? `${optionIdPrefix}-${highlight}` : undefined, "aria-controls": open ? listId : undefined, "aria-describedby": error ? errorId : undefined, "aria-expanded": open, "aria-haspopup": "listbox", "aria-invalid": error ? true : undefined, "aria-labelledby": labelId, "aria-required": required || undefined, className: "sw-select-trigger", id: triggerId, onBlur: (event) => {
                                 const next = event.relatedTarget;
                                 if (next instanceof Node && rootRef.current?.contains(next)) {
                                     return;

package/dist/components/file-field/ChosenFile.d.ts

@@ -0,0 +1,45 @@
+import { type ReactNode, type Ref } from 'react';
+import type { FileFieldValue } from '../FileField.js';
+/** The ids a chosen file's parts take, from the field's. */
+export type ChosenFileIds = {
+    label: string;
+    button: string;
+    name: string;
+    detail: string;
+    remove: string;
+};
+/** The change button's naming and description, as the field wires them. */
+export type ChosenFileNaming = {
+    'aria-labelledby': string;
+    'aria-describedby': string | undefined;
+    id: string;
+};
+/** Remove beside a chosen file: its words and what it does. */
+export type ChosenFileRemove = {
+    label: string;
+    onRemove: () => void;
+};
+type ChosenFileProps = {
+    value: FileFieldValue;
+    icon: ReactNode;
+    ids: ChosenFileIds;
+    naming: ChosenFileNaming;
+    changeLabel: string;
+    remove: ChosenFileRemove | null;
+    disabled: boolean;
+    onChange: () => void;
+    buttonRef: Ref<HTMLButtonElement>;
+};
+/**
+ * The chosen file in the full field: its mark, its name over its detail,
+ * then the change button (and Remove after it) at the row's end.
+ */
+export declare function ChosenFileRow({ value, icon, ids, naming, changeLabel, remove, disabled, onChange, buttonRef, }: ChosenFileProps): import("react").JSX.Element;
+/**
+ * The chosen file in a compact field: one row at a text field's height.
+ * The mark and the name (cut to one line) are the change button, named by
+ * the field's label and the change words, described by the name and the
+ * detail (which is not drawn); Remove, quiet, ends the row.
+ */
+export declare function ChosenFileCompact({ value, icon, ids, naming, changeLabel, remove, disabled, onChange, buttonRef, }: ChosenFileProps): import("react").JSX.Element;
+export {};

package/dist/components/file-field/ChosenFile.js

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { tabStop } from '../../tab-stop.js';
+import { Button } from '../Button.js';
+/** Whether the consumer passed a mark to draw (not empty JSX). */
+function hasMark(icon) {
+    return (icon !== undefined &&
+        icon !== null &&
+        icon !== '' &&
+        typeof icon !== 'boolean');
+}
+/** Before a chosen file's name: its photo's thumbnail, else the consumer's mark. */
+function ChosenMark({ icon, preview }) {
+    if (preview !== undefined)
+        return _jsx("img", { alt: "", className: "sw-file-field-preview", src: preview });
+    if (!hasMark(icon))
+        return null;
+    return (_jsx("span", { "aria-hidden": "true", className: "sw-file-field-icon", children: icon }));
+}
+/**
+ * Remove: a quiet button named by its words and the field's label
+ * ("Remove Cover photo"), so two fields' Removes are told apart. Disabled,
+ * the neutral one greys as the change button does; the ghost one, which
+ * has no fill, fades as the compact row's pick button does.
+ */
+function RemoveButton({ ids, remove, disabled, variant, }) {
+    return (_jsx(Button
+    // Named by its own words, then the label: the self-reference is
+    // deliberate and needs the id below on the button itself.
+    , { "aria-labelledby": `${ids.remove} ${ids.label}`, className: "sw-file-field-remove", disabled: disabled, disabledAppearance: variant === 'neutral' ? 'neutral' : 'faded', id: ids.remove, onPress: remove.onRemove, size: variant === 'ghost' ? 'sm' : 'md', variant: variant, children: remove.label }));
+}
+/**
+ * The chosen file in the full field: its mark, its name over its detail,
+ * then the change button (and Remove after it) at the row's end.
+ */
+export function ChosenFileRow({ value, icon, ids, naming, changeLabel, remove, disabled, onChange, buttonRef, }) {
+    const change = (_jsx(Button, { ...naming, disabled: disabled, disabledAppearance: "neutral", onPress: onChange, ref: buttonRef, variant: "neutral", children: changeLabel }));
+    return (_jsxs(_Fragment, { children: [_jsx(ChosenMark, { icon: icon, preview: value.preview }), _jsxs("span", { className: "sw-file-field-file", children: [_jsx("span", { className: "sw-file-field-name", id: ids.name, children: value.name }), value.detail ? (_jsx("span", { className: "sw-file-field-detail", id: ids.detail, children: value.detail })) : null] }), remove === null ? (change) : (_jsxs("span", { className: "sw-file-field-actions", children: [change, _jsx(RemoveButton, { disabled: disabled, ids: ids, remove: remove, variant: "neutral" })] }))] }));
+}
+/**
+ * The chosen file in a compact field: one row at a text field's height.
+ * The mark and the name (cut to one line) are the change button, named by
+ * the field's label and the change words, described by the name and the
+ * detail (which is not drawn); Remove, quiet, ends the row.
+ */
+export function ChosenFileCompact({ value, icon, ids, naming, changeLabel, remove, disabled, onChange, buttonRef, }) {
+    return (_jsxs(_Fragment, { children: [_jsxs("button", { ...naming, className: "sw-file-field-pick", disabled: disabled, onClick: onChange, ref: buttonRef, tabIndex: tabStop, type: "button", children: [_jsx(ChosenMark, { icon: icon, preview: value.preview }), _jsx("span", { className: "sw-file-field-name", id: ids.name, children: value.name }), value.detail ? (_jsx("span", { className: "sw-sr-only", id: ids.detail, children: value.detail })) : null, _jsx("span", { className: "sw-sr-only", id: `${ids.button}-words`, children: changeLabel })] }), remove === null ? null : (_jsx(RemoveButton, { disabled: disabled, ids: ids, remove: remove, variant: "ghost" }))] }));
+}

package/dist/components/file-field/file-field-checks.d.ts

@@ -1,8 +1,9 @@
 import type { FileFieldValue } from '../FileField.js';
 /**
  * Fails closed on a FileField it cannot name or show: an empty label,
- * choose or change words, a blank drop hint, or a chosen file with no name,
- * a blank detail or a blank preview address.
+ * choose or change words, a blank drop hint, `onRemove` without its
+ * words (or words without it), blank Remove words, or a chosen file with
+ * no name, a blank detail or a blank preview address.
  */
 export declare function assertFileField(props: {
     label: string;
@@ -10,4 +11,6 @@ export declare function assertFileField(props: {
     changeLabel: string;
     dropLabel: string | undefined;
     value: FileFieldValue | null;
+    onRemove: (() => void) | undefined;
+    removeLabel: string | undefined;
 }): void;

package/dist/components/file-field/file-field-checks.js

@@ -3,8 +3,9 @@ function isBlank(text) {
 }
 /**
  * Fails closed on a FileField it cannot name or show: an empty label,
- * choose or change words, a blank drop hint, or a chosen file with no name,
- * a blank detail or a blank preview address.
+ * choose or change words, a blank drop hint, `onRemove` without its
+ * words (or words without it), blank Remove words, or a chosen file with
+ * no name, a blank detail or a blank preview address.
  */
 export function assertFileField(props) {
     for (const key of ['label', 'chooseLabel', 'changeLabel'])
@@ -12,6 +13,10 @@ export function assertFileField(props) {
             throw new RangeError(`FileField ${key} must be non-empty text`);
     if (props.dropLabel !== undefined && isBlank(props.dropLabel))
         throw new RangeError('FileField dropLabel must be non-empty text');
+    if ((props.onRemove === undefined) !== (props.removeLabel === undefined))
+        throw new RangeError('FileField onRemove and removeLabel go together');
+    if (props.removeLabel !== undefined && isBlank(props.removeLabel))
+        throw new RangeError('FileField removeLabel must be non-empty text');
     if (props.value === null)
         return;
     if (isBlank(props.value.name))

package/dist/components/list/ListRowContent.d.ts

@@ -5,6 +5,8 @@ export type ListRowContentProps = {
     /** Prefixes the ids that name and describe a pressable row. */
     id: string;
     title: string;
+    /** The title's language when it is not the page's; on its words only. */
+    titleLang?: string;
     detail?: string;
     value?: string;
     valueDetail?: string;
@@ -25,5 +27,7 @@ export type ListRowContentProps = {
  * (with the unread dot and its hidden words) over its detail, the value
  * over its detail, the tag, then the chevron or check. A truncated row
  * sets its title's words in their own box, so the "…" never hides the dot.
+ * `titleLang` goes on the title's box, which holds its words and the
+ * wordless dot only; the unread words after it stay in the page's language.
  */
-export declare function ListRowContent({ id, title, detail, value, valueDetail, valueTone, valueBadge, leading, tone, titleAppearance, accessory, unreadLabel, tag, truncate, }: ListRowContentProps): import("react").JSX.Element;
+export declare function ListRowContent({ id, title, titleLang, detail, value, valueDetail, valueTone, valueBadge, leading, tone, titleAppearance, accessory, unreadLabel, tag, truncate, }: ListRowContentProps): import("react").JSX.Element;

package/dist/components/list/ListRowContent.js

@@ -8,7 +8,9 @@ import { hasSlot } from '../slot.js';
  * (with the unread dot and its hidden words) over its detail, the value
  * over its detail, the tag, then the chevron or check. A truncated row
  * sets its title's words in their own box, so the "…" never hides the dot.
+ * `titleLang` goes on the title's box, which holds its words and the
+ * wordless dot only; the unread words after it stay in the page's language.
  */
-export function ListRowContent({ id, title, detail, value, valueDetail, valueTone, valueBadge, leading, tone, titleAppearance, accessory, unreadLabel, tag, truncate, }) {
-    return (_jsxs(_Fragment, { children: [!hasSlot(leading) ? null : (_jsx("span", { "aria-hidden": "true", className: "sw-list-row-leading", children: leading })), _jsxs("span", { className: "sw-list-row-label", children: [_jsxs("span", { className: cx('sw-list-row-title', titleAppearance === 'plain' && 'sw-list-row-title-plain', tone === 'danger' && 'sw-list-row-title-danger'), id: `${id}-title`, children: [truncate ? (_jsx("span", { className: "sw-list-row-title-text", title: title, children: title })) : (title), unreadLabel === undefined ? null : (_jsx("span", { "aria-hidden": "true", className: "sw-list-row-unread" }))] }), unreadLabel === undefined ? null : (_jsx("span", { className: "sw-sr-only", id: `${id}-unread`, children: unreadLabel })), detail ? (_jsx("span", { className: "sw-list-row-detail", id: `${id}-detail`, title: truncate ? detail : undefined, children: detail })) : null] }), value === undefined ? null : (_jsxs("span", { className: "sw-list-row-end", children: [_jsx("span", { className: cx('sw-list-row-value', valueTone && `sw-list-row-value-${valueTone}`), id: `${id}-value`, children: valueBadge ? _jsx(Badge, { tone: valueBadge, children: value }) : value }), valueDetail ? (_jsx("span", { className: "sw-list-row-value-detail", id: `${id}-value-detail`, children: valueDetail })) : null] })), !hasSlot(tag) ? null : (_jsx("span", { className: "sw-list-row-tag", id: `${id}-tag`, children: tag })), _jsx(ListRowAccessoryMark, { kind: accessory })] }));
+export function ListRowContent({ id, title, titleLang, detail, value, valueDetail, valueTone, valueBadge, leading, tone, titleAppearance, accessory, unreadLabel, tag, truncate, }) {
+    return (_jsxs(_Fragment, { children: [!hasSlot(leading) ? null : (_jsx("span", { "aria-hidden": "true", className: "sw-list-row-leading", children: leading })), _jsxs("span", { className: "sw-list-row-label", children: [_jsxs("span", { className: cx('sw-list-row-title', titleAppearance === 'plain' && 'sw-list-row-title-plain', tone === 'danger' && 'sw-list-row-title-danger'), id: `${id}-title`, lang: titleLang, children: [truncate ? (_jsx("span", { className: "sw-list-row-title-text", title: title, children: title })) : (title), unreadLabel === undefined ? null : (_jsx("span", { "aria-hidden": "true", className: "sw-list-row-unread" }))] }), unreadLabel === undefined ? null : (_jsx("span", { className: "sw-sr-only", id: `${id}-unread`, children: unreadLabel })), detail ? (_jsx("span", { className: "sw-list-row-detail", id: `${id}-detail`, title: truncate ? detail : undefined, children: detail })) : null] }), value === undefined ? null : (_jsxs("span", { className: "sw-list-row-end", children: [_jsx("span", { className: cx('sw-list-row-value', valueTone && `sw-list-row-value-${valueTone}`), id: `${id}-value`, children: valueBadge ? _jsx(Badge, { tone: valueBadge, children: value }) : value }), valueDetail ? (_jsx("span", { className: "sw-list-row-value-detail", id: `${id}-value-detail`, children: valueDetail })) : null] })), !hasSlot(tag) ? null : (_jsx("span", { className: "sw-list-row-tag", id: `${id}-tag`, children: tag })), _jsx(ListRowAccessoryMark, { kind: accessory })] }));
 }

package/dist/components/select/select-naming.d.ts

@@ -0,0 +1,34 @@
+/**
+ * How a Select is named: by its own `label` (drawn, or visually hidden),
+ * or by words the page already draws, through `aria-labelledby`.
+ */
+export type SelectNaming = {
+    /** The select's own label, drawn above it as Field's. */
+    label: string;
+    /** Keeps the label for assistive technology only, for toolbar chrome. */
+    labelVisuallyHidden?: boolean;
+    'aria-labelledby'?: undefined;
+} | {
+    /**
+     * The id of words the page draws for this choice, such as a heading
+     * or a label beside it: the select draws no label of its own, so
+     * the name is drawn, and read, once.
+     */
+    'aria-labelledby': string;
+    label?: undefined;
+    labelVisuallyHidden?: undefined;
+    /** No mark: the page draws the words, and any mark, itself. */
+    requiredMark?: undefined;
+};
+/**
+ * Fails closed on a Select with no name, or with both: a blank `label`
+ * without `aria-labelledby`, a blank `aria-labelledby`, the two together
+ * (one would silently hide the other), or `requiredMark` with
+ * `aria-labelledby` (there is no label to mark).
+ */
+export declare function assertSelectNaming(naming: {
+    label: unknown;
+    labelVisuallyHidden: unknown;
+    labelledBy: unknown;
+    requiredMark: unknown;
+}): void;

package/dist/components/select/select-naming.js

@@ -0,0 +1,22 @@
+function isBlank(text) {
+    return typeof text !== 'string' || text.trim() === '';
+}
+/**
+ * Fails closed on a Select with no name, or with both: a blank `label`
+ * without `aria-labelledby`, a blank `aria-labelledby`, the two together
+ * (one would silently hide the other), or `requiredMark` with
+ * `aria-labelledby` (there is no label to mark).
+ */
+export function assertSelectNaming(naming) {
+    if (naming.labelledBy === undefined) {
+        if (isBlank(naming.label))
+            throw new RangeError('Select needs a label or aria-labelledby');
+        return;
+    }
+    if (isBlank(naming.labelledBy))
+        throw new RangeError('Select aria-labelledby must be a non-empty id');
+    if (naming.label !== undefined || naming.labelVisuallyHidden !== undefined)
+        throw new RangeError('Select takes label (and labelVisuallyHidden) or aria-labelledby, not both');
+    if (naming.requiredMark !== undefined)
+        throw new RangeError('Select requiredMark needs label: with aria-labelledby the page draws the mark');
+}

package/dist/components/steps/Step.d.ts

@@ -11,6 +11,14 @@ export type StepProps = {
     editLabel?: string;
     /** Muted words after a skipped step's title, such as "not needed". */
     skippedReason?: string;
+    /**
+     * Muted words after an open step's title, on its line, such as
+     * "Optional" or "Wetlands done · Woodlands empty". Drawn while the step
+     * is open (current or error, or any step of an open list) and outside
+     * the heading, so the heading and the region keep the title's name; an
+     * open list's region is described by them.
+     */
+    titleDetail?: 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, or always in an open list. */
@@ -21,6 +29,7 @@ export type StepProps = {
  * 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). In
  * an open list every step shows its fields, inside a region named by its
- * title.
+ * title. An open step's `titleDetail` is muted words beside its title,
+ * outside the heading.
  */
 export declare function Step(props: StepProps): import("react").JSX.Element;

package/dist/components/steps/Step.js

@@ -1,22 +1,13 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Children, useContext, useEffect, useId, useRef, } from 'react';
 import { cx } from '../../class-names.js';
 import { Button } from '../Button.js';
-import { isOpenStep, stepHeadingLevels, stepStatuses, stepStatusWord, stepTakesFocus, } from './step-status.js';
+import { isOpenStep, stepStatusWord, stepTakesFocus, } from './step-status.js';
+import { assertStep } from './assert-step.js';
 import { StepPlaceContext } from './steps-context.js';
-function assertStep(props, level) {
-    if (!props.title.trim())
-        throw new RangeError('Step title must not be empty');
-    if (!stepStatuses.includes(props.status))
-        throw new RangeError(`Unknown Step status: ${String(props.status)}`);
-    if (!stepHeadingLevels.includes(level))
-        throw new RangeError('Step headingLevel must be 2, 3 or 4');
-    if (props.onEdit && !props.editLabel?.trim())
-        throw new RangeError('Step onEdit needs an editLabel');
-    if (props.skippedReason !== undefined && !props.skippedReason.trim())
-        throw new RangeError('Step skippedReason must not be empty');
-}
+import { StepTitleLine } from './StepTitleLine.js';
+import { StepTitleWords } from './StepTitleWords.js';
 /**
  * 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
@@ -46,7 +37,8 @@ function useFocusWhenOpened(status, heading, focusClaimRef, open) {
  * 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). In
  * an open list every step shows its fields, inside a region named by its
- * title.
+ * title. An open step's `titleDetail` is muted words beside its title,
+ * outside the heading.
  */
 export function Step(props) {
     const place = useContext(StepPlaceContext);
@@ -54,17 +46,21 @@ export function Step(props) {
         throw new RangeError('Step must be a child of Steps');
     const level = props.headingLevel ?? place.headingLevel;
     assertStep(props, level);
-    const { status, title, summary, onEdit, editLabel, skippedReason, children } = props;
+    const { status, title, summary, onEdit, editLabel, skippedReason, titleDetail, children, } = props;
     const heading = useRef(null);
     const titleId = useId();
     const editId = useId();
+    const detailId = useId();
     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';
-    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 shownOpen = place.open || isOpenStep(status);
+    const detail = shownOpen ? titleDetail : undefined;
+    const headingElement = (_jsx(Heading, { ref: heading, className: "sw-steps-title", tabIndex: -1, children: word === null ? (_jsx(StepTitleWords, { reason: reason, title: title, titleId: titleId, word: null })) : (_jsx(StepTitleWords, { title: title, titleId: titleId, word: word })) }));
+    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 }), _jsx(StepTitleLine, { detail: detail, detailId: detailId, hasDetail: titleDetail !== undefined, children: headingElement }), 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 = shownOpen && 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) }));
+    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-describedby": detail ? detailId : undefined, "aria-labelledby": titleId, className: "sw-steps-region", children: content })) : (content) }));
 }

package/dist/components/steps/StepTitleLine.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+export type StepTitleLineProps = {
+    /** The step's heading. */
+    children: ReactNode;
+    /** Whether the step has `titleDetail` at all, open or folded. */
+    hasDetail: boolean;
+    /** The muted words to draw now (an open step's), or none. */
+    detail?: string;
+    /** Their id, which an open list's region is described by. */
+    detailId: string;
+};
+/**
+ * A step's heading and, after it on a line that wraps, its muted
+ * `titleDetail` words, outside the heading. The line is there whenever the
+ * step has words, drawn or not, so the heading keeps its element (and its
+ * focus) as the step opens and folds; a step without words has the bare
+ * heading, as before.
+ */
+export declare function StepTitleLine({ children, hasDetail, detail, detailId, }: StepTitleLineProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;

package/dist/components/steps/StepTitleLine.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A step's heading and, after it on a line that wraps, its muted
+ * `titleDetail` words, outside the heading. The line is there whenever the
+ * step has words, drawn or not, so the heading keeps its element (and its
+ * focus) as the step opens and folds; a step without words has the bare
+ * heading, as before.
+ */
+export function StepTitleLine({ children, hasDetail, detail, detailId, }) {
+    if (!hasDetail)
+        return children;
+    return (_jsxs("div", { className: "sw-steps-title-line", children: [children, detail ? (_jsx("span", { className: "sw-steps-title-detail", id: detailId, children: detail })) : null] }));
+}

package/dist/components/steps/StepTitleWords.d.ts

@@ -0,0 +1,27 @@
+export type StepTitleWordsProps = {
+    /** The id the step's region and its Edit button are named by. */
+    titleId: string;
+    title: string;
+} & ({
+    /** The status word read after the title. */
+    word: string;
+    reason?: never;
+} | {
+    word: null;
+    /** A skipped step's muted reason after its title. */
+    reason?: string;
+});
+/**
+ * The words inside a step's heading. Without a status word they are the
+ * title (and a skipped step's reason, which never comes with a word) as
+ * drawn. With one, the drawn title is hidden from assistive technology and
+ * one visually hidden line holds the whole spoken name ("The site, Done"):
+ * a hidden box is laid out as a block, so a browser computing the name
+ * puts a space before it ("The site , Done") when the title and the word
+ * sit in separate boxes.
+ *
+ * `aria-hidden` goes on the title's own box, never a wrapper: the region
+ * and the Edit button name themselves by its id, and Chrome reads a
+ * referenced box inside a hidden wrapper into the heading's name too.
+ */
+export declare function StepTitleWords(props: StepTitleWordsProps): import("react").JSX.Element;

package/dist/components/steps/StepTitleWords.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The words inside a step's heading. Without a status word they are the
+ * title (and a skipped step's reason, which never comes with a word) as
+ * drawn. With one, the drawn title is hidden from assistive technology and
+ * one visually hidden line holds the whole spoken name ("The site, Done"):
+ * a hidden box is laid out as a block, so a browser computing the name
+ * puts a space before it ("The site , Done") when the title and the word
+ * sit in separate boxes.
+ *
+ * `aria-hidden` goes on the title's own box, never a wrapper: the region
+ * and the Edit button name themselves by its id, and Chrome reads a
+ * referenced box inside a hidden wrapper into the heading's name too.
+ */
+export function StepTitleWords(props) {
+    const { titleId, title } = props;
+    if (props.word !== null)
+        return (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", id: titleId, children: title }), _jsx("span", { className: "sw-sr-only", children: `${title}, ${props.word}` })] }));
+    const { reason } = props;
+    return (_jsxs(_Fragment, { children: [_jsx("span", { id: titleId, children: title }), reason ? (_jsxs(_Fragment, { children: [' ', _jsx("span", { className: "sw-steps-reason", children: reason })] })) : null] }));
+}

package/dist/components/steps/assert-step.d.ts

@@ -0,0 +1,7 @@
+import type { StepProps } from './Step.js';
+import { type StepHeadingLevel } from './step-status.js';
+/**
+ * Fails closed on a step it cannot draw: a blank title, reason or title
+ * detail, an unknown status or heading level, or an Edit with no words.
+ */
+export declare function assertStep(props: StepProps, level: StepHeadingLevel): void;

package/dist/components/steps/assert-step.js

@@ -0,0 +1,19 @@
+import { stepHeadingLevels, stepStatuses, } from './step-status.js';
+/**
+ * Fails closed on a step it cannot draw: a blank title, reason or title
+ * detail, an unknown status or heading level, or an Edit with no words.
+ */
+export function assertStep(props, level) {
+    if (!props.title.trim())
+        throw new RangeError('Step title must not be empty');
+    if (!stepStatuses.includes(props.status))
+        throw new RangeError(`Unknown Step status: ${String(props.status)}`);
+    if (!stepHeadingLevels.includes(level))
+        throw new RangeError('Step headingLevel must be 2, 3 or 4');
+    if (props.onEdit && !props.editLabel?.trim())
+        throw new RangeError('Step onEdit needs an editLabel');
+    if (props.skippedReason !== undefined && !props.skippedReason.trim())
+        throw new RangeError('Step skippedReason must not be empty');
+    if (props.titleDetail !== undefined && !props.titleDetail.trim())
+        throw new RangeError('Step titleDetail must not be empty');
+}

package/dist/css/css-button-width.d.ts

@@ -0,0 +1,11 @@
+/**
+ * How wide a Button is: `content` (the default) is as wide as its words;
+ * `full` fills the container's inline size, and in an Inline row takes
+ * the space its siblings leave, such as an Edit beside a ••• menu.
+ */
+export declare const buttonWidths: readonly ["content", "full"];
+export type ButtonWidth = (typeof buttonWidths)[number];
+/** The class a width adds; `content` adds none (`cx` drops `undefined`). */
+export declare function buttonWidthClass(width: ButtonWidth): string | undefined;
+export declare function cssButtonWidthClasses(): string;
+export declare function buttonWidthClassCatalog(): string[];

package/dist/css/css-button-width.js

@@ -0,0 +1,36 @@
+/**
+ * How wide a Button is: `content` (the default) is as wide as its words;
+ * `full` fills the container's inline size, and in an Inline row takes
+ * the space its siblings leave, such as an Edit beside a ••• menu.
+ */
+export const buttonWidths = ['content', 'full'];
+const full = 'sw-button-full';
+/** The class a width adds; `content` adds none (`cx` drops `undefined`). */
+export function buttonWidthClass(width) {
+    return width === 'full' ? full : undefined;
+}
+/*
+ * A full button fills a Stack, a Grid cell or any column. As a direct
+ * child of an Inline row it shares the row with its siblings, which keep
+ * their own width (a ••• or a second button), as a full Select does; in a
+ * wrapping row it grows from its words' width instead, so it moves to a
+ * line of its own rather than shrinking past them. Its words stay centred.
+ */
+export function cssButtonWidthClasses() {
+    return `.${full} {
+  width: 100%;
+}
+
+.sw-inline > .${full} {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.sw-inline.sw-wrap > .${full} {
+  flex: 1 1 auto;
+  width: auto;
+}`;
+}
+export function buttonWidthClassCatalog() {
+    return [full];
+}

package/dist/css/css-button.js

@@ -1,6 +1,7 @@
 import { buttonSizes, buttonVariants, controlScale, typographyVariants, } from '@scalewing/tokens';
 import { breakpointQuery } from './breakpoints.js';
 import { buttonGroupAttachedClassCatalog, cssButtonGroupAttachedClasses, } from './css-button-group-attached.js';
+import { buttonWidthClassCatalog, cssButtonWidthClasses, } from './css-button-width.js';
 import { quietFill } from './quiet-fill.js';
 const label = typographyVariants.label;
 /**
@@ -135,6 +136,7 @@ ${disabledNeutralRules()}
 ${pressedRules()}
 ${ariaDisabledForcedRules()}
 ${sizeRules()}
+${cssButtonWidthClasses()}
 ${groupRules()}
 
 ${cssButtonGroupAttachedClasses()}`;
@@ -162,6 +164,7 @@ export function buttonClassCatalog() {
         ...webButtonVariants.map((variant) => `sw-button-${variant}`),
         'sw-button-disabled-neutral',
         ...buttonSizes.map((size) => `sw-button-${size}`),
+        ...buttonWidthClassCatalog(),
         'sw-button-group',
         ...buttonGroupJustifies.map((name) => `sw-button-group-${name}`),
         ...buttonGroupAttachedClassCatalog(),

package/dist/css/css-file-field-compact.d.ts

@@ -0,0 +1,2 @@
+export declare function cssFileFieldCompactClasses(): string;
+export declare function fileFieldCompactClassCatalog(): string[];