@scalewing/react 1.42.0 → 1.45.0

package/dist/components/action-menu/assert-action-menu.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+import { type ActionMenuTriggerAppearance } from '../../css/css-action-menu-trigger.js';
+import { type ActionMenuItem } from '../ActionMenu.js';
+/**
+ * Fails closed on a menu it cannot draw: an item's blank detail or
+ * detailLang (or a detailLang with no detail), an unknown trigger
+ * appearance, or an icon trigger with no glyph.
+ */
+export declare function assertActionMenu({ items, trigger, triggerAppearance, }: {
+    items: readonly ActionMenuItem[];
+    trigger: ReactNode;
+    triggerAppearance: ActionMenuTriggerAppearance;
+}): void;

package/dist/components/action-menu/assert-action-menu.js

@@ -0,0 +1,21 @@
+import { actionMenuTriggerAppearances, } from '../../css/css-action-menu-trigger.js';
+import { hasSlot } from '../slot.js';
+/** Whether an icon trigger has a glyph to draw (blank words are none). */
+function hasGlyph(trigger) {
+    return (hasSlot(trigger) && !(typeof trigger === 'string' && trigger.trim() === ''));
+}
+/**
+ * Fails closed on a menu it cannot draw: an item's blank detail or
+ * detailLang (or a detailLang with no detail), an unknown trigger
+ * appearance, or an icon trigger with no glyph.
+ */
+export function assertActionMenu({ items, trigger, triggerAppearance, }) {
+    if (items.some((item) => (item.detail !== undefined && !item.detail.trim()) ||
+        (item.detailLang !== undefined &&
+            (!item.detailLang.trim() || item.detail === undefined))))
+        throw new RangeError('ActionMenu item detail and detailLang must not be blank; detailLang needs a detail');
+    if (!actionMenuTriggerAppearances.includes(triggerAppearance))
+        throw new RangeError(`Unknown ActionMenu triggerAppearance: ${String(triggerAppearance)}`);
+    if (triggerAppearance === 'icon' && !hasGlyph(trigger))
+        throw new RangeError('An icon ActionMenu trigger needs its glyph');
+}

package/dist/components/description-list-layout.d.ts

@@ -0,0 +1,10 @@
+/**
+ * How a DescriptionList lays out its rows: `columns` (the default), the
+ * terms in a start column and the details beside them, each term over its
+ * detail below `md`; `spread`, each row's term at its start and its detail
+ * at its end, side by side at every width.
+ */
+export declare const descriptionListLayouts: readonly ["columns", "spread"];
+export type DescriptionListLayout = (typeof descriptionListLayouts)[number];
+/** Fails closed on a layout the list cannot draw. */
+export declare function assertDescriptionListLayout(layout: unknown): void;

package/dist/components/description-list-layout.js

@@ -0,0 +1,13 @@
+import { isOneOf } from '../is-one-of.js';
+/**
+ * How a DescriptionList lays out its rows: `columns` (the default), the
+ * terms in a start column and the details beside them, each term over its
+ * detail below `md`; `spread`, each row's term at its start and its detail
+ * at its end, side by side at every width.
+ */
+export const descriptionListLayouts = ['columns', 'spread'];
+/** Fails closed on a layout the list cannot draw. */
+export function assertDescriptionListLayout(layout) {
+    if (!isOneOf(descriptionListLayouts, layout))
+        throw new RangeError(`Unknown DescriptionList layout: ${String(layout)}`);
+}

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

@@ -1,8 +1,8 @@
 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
- * or a blank detail.
+ * choose or change words, a blank drop hint, or a chosen file with no name,
+ * a blank detail or a blank preview address.
  */
 export declare function assertFileField(props: {
     label: string;

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

@@ -3,8 +3,8 @@ 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
- * or a blank detail.
+ * choose or change words, a blank drop hint, 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'])
@@ -18,4 +18,6 @@ export function assertFileField(props) {
         throw new RangeError('FileField value name must be non-empty text');
     if (props.value.detail !== undefined && isBlank(props.value.detail))
         throw new RangeError('FileField value detail must be non-empty text');
+    if (props.value.preview !== undefined && isBlank(props.value.preview))
+        throw new RangeError('FileField value preview must be an image address');
 }

package/dist/components/filter-chips/FilterChip.js

@@ -13,7 +13,7 @@ function ChipCount({ count, appearance, }) {
 }
 /** One chip: a native radio or checkbox under its face. */
 export function FilterChip({ option, name, type, checked, required, tabStopHere, countAppearance, onCheckedChange, }) {
-    return (_jsxs("label", { className: cx('sw-filter-chip', option.count === 0 && 'sw-filter-chip-quiet'), children: [_jsx("input", { checked: checked, className: "sw-filter-chip-input", disabled: option.disabled, name: name, onChange: (event) => {
+    return (_jsxs("label", { className: cx('sw-filter-chip', option.count === 0 && 'sw-filter-chip-quiet', option.tone === 'warning' && 'sw-filter-chip-warning'), children: [_jsx("input", { checked: checked, className: "sw-filter-chip-input", disabled: option.disabled, name: name, onChange: (event) => {
                     if (!option.disabled)
                         onCheckedChange(event.currentTarget.checked);
                 }, required: required, tabIndex: tabStopHere ? tabStop : undefined, type: type, value: option.value }), _jsxs("span", { className: "sw-filter-chip-face", children: [option.label, option.count === undefined ? null : (_jsx(ChipCount, { appearance: countAppearance, count: option.count }))] })] }));

package/dist/components/filter-chips/options.d.ts

@@ -1,9 +1,19 @@
 import { type RequiredMark } from '../FieldLabelText.js';
+/**
+ * A chip's colour while it is not chosen: `neutral` (the default), the
+ * glass chip; `warning`, the warning tint with its words in the warning
+ * ink, for a choice that shows what needs a look ("Missing a
+ * translation"). Its words must say so; the tint only draws the eye. A
+ * chosen chip is the accent, whatever its tone.
+ */
+export declare const filterChipTones: readonly ["neutral", "warning"];
+export type FilterChipTone = (typeof filterChipTones)[number];
 export type FilterChipOption = {
     value: string;
     label: string;
     count?: number;
     disabled?: boolean;
+    tone?: FilterChipTone;
 };
 /**
  * How a chip's count is drawn: `figure` (the default), a muted tabular

package/dist/components/filter-chips/options.js

@@ -1,3 +1,11 @@
+/**
+ * A chip's colour while it is not chosen: `neutral` (the default), the
+ * glass chip; `warning`, the warning tint with its words in the warning
+ * ink, for a choice that shows what needs a look ("Missing a
+ * translation"). Its words must say so; the tint only draws the eye. A
+ * chosen chip is the accent, whatever its tone.
+ */
+export const filterChipTones = ['neutral', 'warning'];
 /**
  * How a chip's count is drawn: `figure` (the default), a muted tabular
  * figure after a space; `inline`, the label's own words and type, after a

package/dist/components/filter-chips/validate.d.ts

@@ -2,8 +2,8 @@ import { type FilterChipsProps } from './options.js';
 /**
  * Fails closed on chips it cannot draw: an empty label, no options, blank
  * or repeated values, a chosen value that is no option, a count that is
- * not a whole number from 0, an unknown count appearance or overflow, and
- * a multiple choice asked to be required or given a value that is not a
- * list.
+ * not a whole number from 0, an unknown chip tone, count appearance or
+ * overflow, and a multiple choice asked to be required or given a value
+ * that is not a list.
  */
 export declare function assertFilterChips(props: FilterChipsProps): void;

package/dist/components/filter-chips/validate.js

@@ -1,5 +1,5 @@
 import { assertRequiredMark } from '../FieldLabelText.js';
-import { filterChipCountAppearances, filterChipsOverflows, } from './options.js';
+import { filterChipCountAppearances, filterChipsOverflows, filterChipTones, } from './options.js';
 function isCount(count) {
     return count === undefined || (Number.isInteger(count) && count >= 0);
 }
@@ -11,9 +11,9 @@ function chosenValues(props) {
 /**
  * Fails closed on chips it cannot draw: an empty label, no options, blank
  * or repeated values, a chosen value that is no option, a count that is
- * not a whole number from 0, an unknown count appearance or overflow, and
- * a multiple choice asked to be required or given a value that is not a
- * list.
+ * not a whole number from 0, an unknown chip tone, count appearance or
+ * overflow, and a multiple choice asked to be required or given a value
+ * that is not a list.
  */
 export function assertFilterChips(props) {
     const { label, options } = props;
@@ -39,6 +39,10 @@ export function assertFilterChips(props) {
             : '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 unknownTone = options.find((option) => option.tone !== undefined &&
+        !filterChipTones.includes(option.tone));
+    if (unknownTone)
+        throw new RangeError(`Unknown FilterChips option tone: ${String(unknownTone.tone)}`);
     const countAppearance = props.countAppearance ?? 'figure';
     if (!filterChipCountAppearances.includes(countAppearance))
         throw new RangeError(`Unknown FilterChips countAppearance: ${String(countAppearance)}`);

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;
@@ -17,10 +19,15 @@ export type ListRowContentProps = {
     /** The unread words; the dot shows while they are given. */
     unreadLabel?: string;
     tag?: ReactNode;
+    /** One line each for the title and detail, cut with "…", the words in a tooltip. */
+    truncate: boolean;
 };
 /**
  * A list row's parts in reading order: the hidden leading mark, the title
  * (with the unread dot and its hidden words) over its detail, the value
- * over its detail, the tag, then the chevron or check.
+ * 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, }: 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

@@ -2,12 +2,15 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { cx } from '../../class-names.js';
 import { Badge } from '../Badge.js';
 import { ListRowAccessoryMark } from './ListRowAccessoryMark.js';
-import { hasSlot } from './row-slot.js';
+import { hasSlot } from '../slot.js';
 /**
  * A list row's parts in reading order: the hidden leading mark, the title
  * (with the unread dot and its hidden words) over its detail, the value
- * over its detail, the tag, then the chevron or check.
+ * 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, }) {
-    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: [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`, 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/list/ListRowItem.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useContext } from 'react';
 import { cx } from '../../class-names.js';
 import { ListRowContainer } from './list-row-container.js';
-import { hasSlot } from './row-slot.js';
+import { hasSlot } from '../slot.js';
 /**
  * A row's list item: an `li` in a ListGroup's list, a `div` elsewhere. A
  * row with an `action` holds that control after the row, a sibling of the

package/dist/components/list/row-naming.js

@@ -1,4 +1,4 @@
-import { hasSlot } from './row-slot.js';
+import { hasSlot } from '../slot.js';
 function ids(...parts) {
     const joined = parts.filter(Boolean).join(' ');
     return joined === '' ? undefined : joined;

package/dist/components/slot.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+/**
+ * Whether a component's slot (a row's `leading`, `tag` or `action`, a
+ * chips row's `end`) holds something to draw. React renders nothing for
+ * `undefined`, `null`, a boolean (the `false` of
+ * `canArchive && <ActionMenu …/>`) or an empty string, so those are an
+ * empty slot and add no box and no gap.
+ */
+export declare function hasSlot(node: ReactNode): boolean;

package/dist/components/slot.js

@@ -0,0 +1,13 @@
+/**
+ * Whether a component's slot (a row's `leading`, `tag` or `action`, a
+ * chips row's `end`) holds something to draw. React renders nothing for
+ * `undefined`, `null`, a boolean (the `false` of
+ * `canArchive && <ActionMenu …/>`) or an empty string, so those are an
+ * empty slot and add no box and no gap.
+ */
+export function hasSlot(node) {
+    return (node !== undefined &&
+        node !== null &&
+        node !== '' &&
+        typeof node !== 'boolean');
+}

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-action-menu-trigger.d.ts

@@ -1,11 +1,15 @@
-export declare const actionMenuTriggerAppearances: readonly ["framed", "text"];
+export declare const actionMenuTriggerAppearances: readonly ["framed", "text", "icon"];
 /**
  * How an ActionMenu's trigger looks: `framed` (the default) is a small
  * outlined control; `text` is its words in the text color with a chevron
  * after them and no fill or outline until hovered or open, such as a
- * person's name that opens their account menu in a header.
+ * person's name that opens their account menu in a header; `icon` is the
+ * consumer's glyph alone in a round quiet button, no chevron and no
+ * outline until hovered or open, such as a row's ••• menu.
  */
 export type ActionMenuTriggerAppearance = (typeof actionMenuTriggerAppearances)[number];
 export declare const actionMenuTriggerTextClass = "sw-action-menu-trigger-text";
+export declare const actionMenuTriggerIconClass = "sw-action-menu-trigger-icon";
 export declare function cssActionMenuTriggerClasses(): string;
+export declare function cssActionMenuTriggerIconClasses(): string;
 export declare function actionMenuTriggerClassCatalog(): string[];

package/dist/css/css-action-menu-trigger.js

@@ -3,9 +3,11 @@ import { chevronStroke } from './chevron.js';
 import { quietFill } from './quiet-fill.js';
 import { coarsePointerQuery, touchTarget } from './touch-target.js';
 const label = typographyVariants.label;
-export const actionMenuTriggerAppearances = ['framed', 'text'];
+export const actionMenuTriggerAppearances = ['framed', 'text', 'icon'];
 export const actionMenuTriggerTextClass = 'sw-action-menu-trigger-text';
+export const actionMenuTriggerIconClass = 'sw-action-menu-trigger-icon';
 const text = `.sw-action-menu-trigger.${actionMenuTriggerTextClass}`;
+const icon = `.sw-action-menu-trigger.${actionMenuTriggerIconClass}`;
 /*
  * A text trigger: no fill and a transparent border (kept, so forced colors
  * can draw one), its words in label type at medium weight in the text
@@ -61,6 +63,52 @@ ${text}[aria-expanded='true'] {
   ${text}[aria-expanded='true'] { border-color: Highlight; }
 }`;
 }
+/*
+ * An icon trigger: the consumer's glyph alone, centred in a round button
+ * as wide as it is tall (the sm control height, the 44 px target on a
+ * coarse pointer), in the muted colour, with no fill, no chevron and a
+ * transparent border (kept for forced colors). Like the text trigger it
+ * takes the quiet fill while open and under a hovering pointer. Its name
+ * is the menu's label, so the glyph says nothing on its own.
+ */
+export function cssActionMenuTriggerIconClasses() {
+    return `${icon} {
+  align-items: center;
+  background: transparent;
+  border-color: transparent;
+  border-radius: var(--sw-radius-pill);
+  color: var(--sw-color-muted);
+  display: inline-flex;
+  justify-content: center;
+  min-height: var(--sw-control-sm-min-height);
+  min-width: var(--sw-control-sm-min-height);
+  padding: 0;
+}
+
+${icon}[aria-expanded='true'] {
+  background: ${quietFill};
+  color: var(--sw-color-text);
+}
+
+@media (hover: hover) {
+  ${icon}:hover:not(:disabled) {
+    background: ${quietFill};
+    color: var(--sw-color-text);
+  }
+}
+
+@media ${coarsePointerQuery} {
+  ${icon} {
+    min-height: ${touchTarget};
+    min-width: ${touchTarget};
+  }
+}
+
+@media (forced-colors: active) {
+  ${icon} { color: ButtonText; }
+  ${icon}[aria-expanded='true'] { border-color: Highlight; }
+}`;
+}
 export function actionMenuTriggerClassCatalog() {
-    return [actionMenuTriggerTextClass];
+    return [actionMenuTriggerTextClass, actionMenuTriggerIconClass];
 }

package/dist/css/css-action-menu.js

@@ -1,6 +1,6 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { chevronStroke } from './chevron.js';
-import { actionMenuTriggerClassCatalog, cssActionMenuTriggerClasses, } from './css-action-menu-trigger.js';
+import { actionMenuTriggerClassCatalog, cssActionMenuTriggerClasses, cssActionMenuTriggerIconClasses, } from './css-action-menu-trigger.js';
 import { zIndex } from './stacking.js';
 import { coarsePointerQuery, touchTarget } from './touch-target.js';
 import { quietFill } from './quiet-fill.js';
@@ -166,7 +166,9 @@ export function cssActionMenuClasses() {
   }
 }
 
-${cssActionMenuTriggerClasses()}`;
+${cssActionMenuTriggerClasses()}
+
+${cssActionMenuTriggerIconClasses()}`;
 }
 export function actionMenuClassCatalog() {
     return [

package/dist/css/css-components.js

@@ -36,6 +36,7 @@ import { cssMultiSelectClasses } from './css-multi-select.js';
 import { cssSplitClasses } from './css-split.js';
 import { cssSwitchClasses } from './css-switch.js';
 import { cssTextClasses } from './css-text.js';
+import { cssFontMonoClasses } from './css-font-mono.js';
 import { cssSpinnerClasses } from './css-spinner.js';
 import { cssProgressClasses } from './css-progress.js';
 import { cssNoticeClasses } from './css-notice.js';
@@ -134,6 +135,8 @@ ${cssPopupHostRules()}
 
 ${cssTextClasses()}
 
+${cssFontMonoClasses()}
+
 ${cssButtonClasses()}
 
 ${cssCheckboxClasses()}

package/dist/css/css-description-list.d.ts

@@ -7,6 +7,7 @@
  * a term sits over its detail. A term and a detail are columns of lines:
  * each child is its own line with its own line height, so a caption term
  * starts level with a caption detail instead of on the list's taller line.
+ * `spread` puts each detail at its row's end, beside its term at every width.
  */
 export declare function cssDescriptionListClasses(): string;
 export declare function descriptionListClassCatalog(): string[];