@scalewing/react 1.44.0 → 1.45.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @scalewing/react
 
+## 1.45.0
+
+### Minor Changes
+
+- 4170f23: `Article` `contentLang`: the language of the title and the body (a BCP 47 tag such as `es`) when it is not the page's, set as `lang` on the title's heading and the body's box only, never the eyebrow, meta line, actions or cover, which are the app's words (WCAG 3.1.2). The article's name is unchanged. A blank `contentLang` throws a `RangeError`. No new classes, tokens or dependencies. Request: `docs/requests/teisoro-article-content-lang.md`.
+- fada31f: `ListRow` `titleLang`: the title's language (a BCP 47 tag such as `es`) when it is not the page's, set as `lang` on the title's box only (its words and the wordless unread dot), never the detail, value, tag or unread words (WCAG 3.1.2). A pressable row's name and description are unchanged; it works with `truncate`. A blank `titleLang` throws a `RangeError`. No new classes, tokens or dependencies. Request: `docs/requests/teisoro-list-row-title-lang.md`.
+- 8ed264e: `Step` `titleDetail`: muted words after an open step's title, on its line, such as "Optional" or "Wetlands done · Woodlands empty", at the label size and body weight in the muted colour, a space-2 after the title on its baseline or on their own line under it where they do not fit. Drawn while the step is open (current, error, or any step of `Steps open`), outside the heading, so the heading and the region keep the title's name; an open list's region is described by the words. A blank `titleDetail` throws a `RangeError`. New classes `sw-steps-title-line` and `sw-steps-title-detail`. No new tokens, no new dependency. Request: `docs/requests/teisoro-step-title-detail.md`.
+
+### Patch Changes
+
+- 54907b3: `Steps`: a folded step's heading reads "The site, Done", not "The site , Done" (checked against Chromium's accessibility tree; the name is one text box, so there are no two boxes to space apart). Its name is now one visually hidden line (the title, a comma and the status word) and the drawn title is `aria-hidden` on its own box; the step's region and its Edit button are still named by the drawn title, and nothing drawn changes. A current step, and a skipped step showing its reason, are unchanged. The heading's text content now holds the title twice (drawn, then in the spoken line), so a test reading a folded heading's `textContent` or finding its title with a pattern (`getByText(/The site/)`) finds both: query headings by role and name (`getByRole('heading', { name: 'The site, Done' })`). Copying a folded heading, or finding its title in the page, meets the words twice too. No new classes, tokens or dependencies. Request: `docs/requests/teisoro-steps-status-words.md`.
+
 ## 1.44.0
 
 ### Minor Changes

package/README.md

@@ -78,7 +78,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. `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`.
+`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): its name is one visually hidden line, the title, a comma and the word ("The site, Done"), and the drawn title is `aria-hidden`, because a browser lays a hidden box out as a block and would put a space before the comma ("The site , Done"). The step's region and its Edit button are still named by the drawn title. A current step, and a skipped step showing its reason, draw and read their words as they are. The heading's text content now holds the title twice (drawn, then in the spoken line), so a test reading a folded heading's `textContent` or finding its title with a pattern (`getByText(/The site/)`) finds both: query headings by role and name (`getByRole('heading', { name: 'The site, Done' })`). Copying a folded heading, or finding its title in the page, meets the words twice too. The comma after the title is Scalewing's, as before; the word is yours. 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. `titleDetail` (opt-in) is muted words after an open step's title, on its line, such as "Optional" on a step a person may skip, or "Wetlands done · Woodlands empty" on a step with a part per habitat: the label size at the body's weight in the muted colour, a space-2 after the title on its baseline, or on a line of their own under the title where they do not fit beside it (a long title on a phone), never past the panel (a long word breaks). They are drawn while the step is open (current or error, or every step of an open list, with fields or without) and stay as the step turns done in an open list; a folded step draws its summary or reason instead. They sit outside the heading, so the heading's name stays the title (and its status word) and a heading list reads the titles alone; an open list's region keeps the title as its name and is described by the words, read as a person enters it, and in a stepped list they follow the heading in reading order. Write your own separators inside the words; Scalewing draws only the gap after the title. The words share a skipped step's reason's muted colour, not its size: a reason is part of the title, these are a note beside it. Give a step its `titleDetail` from its first render: setting or clearing it later moves the heading into or out of the title line, which remounts it (and drops its focus if it has it). A blank `titleDetail` throws a `RangeError`. 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">
@@ -750,6 +750,8 @@ The consumer needs no PDF.js dependency of its own. With another bundler, build
 
 `Article` is a page that reads like a post, on a card (`variant`, as `Card`'s) no wider than the reading width (`--sw-reading-max`, 46rem): an optional `cover` photo (`{ src, alt }`, `alt` required, `''` when it only decorates) (or `null`) edge to edge across the top at 3:1 (2:1 below `md`) with the card's top corners; then, a space-6 from the top and bottom and a space-8 from the sides (space-5 all round below `md`), the `eyebrow` (muted caption type at the label's weight) with your `actions` at its row's end (such as a language switch; under the eyebrow, at its start, when the row is too narrow), the `title` in heading type (`titleAs`: `h1` by default, on the article's own page; `h2` or `h3` under other headings), the muted `meta` line (such as "Manager 1 · Oct 16 · 4 min read"), a hairline, and the body (`children`, your own content, such as paragraphs or Markdown your app draws). It is an `article` landmark named by its title, and its ref is that element; the eyebrow and meta are `div`s, so any content fits. The card sits at the start of a wider column. Empty parts draw nothing. A blank `title`, an unknown `titleAs` or `variant`, or a `cover` with a blank `src` or no `alt` throws a `RangeError`.
 
+`contentLang` (opt-in) is the language of the title and the body, a BCP 47 tag such as `es`, when it is not the page's, such as a guide shown in Spanish on an English screen because it exists only in Spanish or the reader chose Español (WCAG 3.1.2, Language of Parts). It sets `lang` on the title's heading and on the body's box only; the eyebrow, the meta line, the actions and the cover's `alt` stay in the page's language, since they are the app's words (write the cover's `alt` in the page's language, or mark it yourself). The article's name is unchanged. Pass `lang` on the `Article` instead when every word in it, the app's included, is in that language. A blank `contentLang` throws a `RangeError`.
+
 ```tsx
 <Article
   cover={{ src: cover.url, alt: cover.alt }}
@@ -844,6 +846,8 @@ A row can also carry three trailing parts. `unread` marks it new for the person,
 
 `truncate` (opt-in) keeps a row's title and its detail line to one line each, cut with "…" where they do not fit, for a long list read at a glance such as a shelf of documents. The title's words sit in their own box, so the unread dot follows the cut words and is never hidden; the whole words stay in the row's name and description and in a `title` tooltip on the words and the detail. The value, its detail, the tag and the action keep their words whole. A tooltip needs a pointer, so on a touch screen or from the keyboard the cut words are whole only in what the row opens and in what assistive technology reads; keep `truncate` for rows that open their whole content, or whose words a person does not need in full to choose.
 
+`titleLang` (opt-in) is the title's language, a BCP 47 tag such as `es`, when it is not the page's, such as a document's Spanish title in a list on an English page (WCAG 3.1.2, Language of Parts). It sets `lang` on the title's box, which holds the title's words and the wordless unread dot, so a screen reader speaks the title in that language and the browser hyphenates and shapes it as such; the detail, the value and its detail, the tag, the unread words and the action stay in the page's language (give a tag its own `lang` inside it if it needs one). A pressable row's name and description are unchanged: the title is still read first. It works with `truncate` (the words box sits inside the marked title) and on every kind of row. A blank `titleLang` throws a `RangeError`.
+
 ```tsx
 <ListRow
   leading={

package/dist/components/Article.d.ts

@@ -26,6 +26,14 @@ export type ArticleProps = Omit<HTMLAttributes<HTMLElement>, 'children' | 'title
     actions?: ReactNode;
     /** The card look, as `Card`'s. */
     variant?: CardVariant;
+    /**
+     * The language of the title and the body (a BCP 47 tag such as `es`)
+     * when it is not the page's, such as a document shown in Spanish on an
+     * English screen (WCAG 3.1.2): `lang` on the title's heading and the
+     * body only, never the eyebrow, meta line, actions or cover, which are
+     * the app's own words.
+     */
+    contentLang?: string;
     /** The article's body, under a hairline. */
     children?: ReactNode;
 };
@@ -34,8 +42,9 @@ export type ArticleProps = Omit<HTMLAttributes<HTMLElement>, 'children' | 'title
  * cover photo edge to edge across the top, then the eyebrow (with the
  * consumer's actions at its row's end), the title in heading type, the
  * muted meta line, a hairline, and the body. The article is named by its
- * title (an `aria-labelledby` you pass replaces that). The ref is the
- * `article` element.
+ * title (an `aria-labelledby` you pass replaces that). `contentLang` marks
+ * the title and the body as another language than the page's. The ref is
+ * the `article` element.
  */
 export declare const Article: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>, "title" | "children"> & {
     /** The article's title, in heading type. */
@@ -55,6 +64,14 @@ export declare const Article: import("react").ForwardRefExoticComponent<Omit<HTM
     actions?: ReactNode;
     /** The card look, as `Card`'s. */
     variant?: CardVariant;
+    /**
+     * The language of the title and the body (a BCP 47 tag such as `es`)
+     * when it is not the page's, such as a document shown in Spanish on an
+     * English screen (WCAG 3.1.2): `lang` on the title's heading and the
+     * body only, never the eyebrow, meta line, actions or cover, which are
+     * the app's own words.
+     */
+    contentLang?: string;
     /** The article's body, under a hairline. */
     children?: ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/dist/components/Article.js

@@ -11,9 +11,12 @@ function hasContent(node) {
         typeof node !== 'boolean' &&
         node !== '');
 }
-function assertArticle({ title, titleAs, cover, variant }) {
+function assertArticle({ title, titleAs, cover, variant, contentLang, }) {
     if (typeof title !== 'string' || title.trim() === '')
         throw new RangeError('Article title must be non-empty text');
+    if (contentLang !== undefined &&
+        (typeof contentLang !== 'string' || contentLang.trim() === ''))
+        throw new RangeError('Article contentLang must be a non-empty language tag');
     if (titleAs !== undefined && !articleTitleElements.includes(titleAs))
         throw new RangeError(`Unknown Article titleAs: ${String(titleAs)}`);
     if (variant !== undefined && !cardVariants.includes(variant))
@@ -30,13 +33,14 @@ function assertArticle({ title, titleAs, cover, variant }) {
  * cover photo edge to edge across the top, then the eyebrow (with the
  * consumer's actions at its row's end), the title in heading type, the
  * muted meta line, a hairline, and the body. The article is named by its
- * title (an `aria-labelledby` you pass replaces that). The ref is the
- * `article` element.
+ * title (an `aria-labelledby` you pass replaces that). `contentLang` marks
+ * the title and the body as another language than the page's. The ref is
+ * the `article` element.
  */
 export const Article = forwardRef(function Article(props, ref) {
     assertArticle(props);
-    const { title, titleAs = 'h1', eyebrow, meta, cover, actions, variant = 'glass', children, className, ...rest } = props;
+    const { title, titleAs = 'h1', eyebrow, meta, cover, actions, variant = 'glass', contentLang, children, className, ...rest } = props;
     const titleId = useId();
     const top = hasContent(eyebrow) || hasContent(actions);
-    return (_jsxs("article", { "aria-labelledby": titleId, className: cx('sw-card', `sw-card-${variant}`, 'sw-article', className), ref: ref, ...rest, children: [cover ? (_jsx("img", { alt: cover.alt, className: "sw-article-cover", src: cover.src })) : null, _jsxs("div", { className: "sw-article-body", children: [_jsxs("header", { className: "sw-article-header", children: [top ? (_jsxs("div", { className: "sw-article-top", children: [hasContent(eyebrow) ? (_jsx("div", { className: "sw-article-eyebrow", children: eyebrow })) : null, hasContent(actions) ? (_jsx("div", { className: "sw-article-actions", children: actions })) : null] })) : null, _jsx(Text, { as: titleAs, className: "sw-article-title", id: titleId, variant: "heading", children: title }), hasContent(meta) ? (_jsx("div", { className: "sw-article-meta", children: meta })) : null] }), _jsx(Separator, { decorative: true }), hasContent(children) ? (_jsx("div", { className: "sw-article-content", children: children })) : null] })] }));
+    return (_jsxs("article", { "aria-labelledby": titleId, className: cx('sw-card', `sw-card-${variant}`, 'sw-article', className), ref: ref, ...rest, children: [cover ? (_jsx("img", { alt: cover.alt, className: "sw-article-cover", src: cover.src })) : null, _jsxs("div", { className: "sw-article-body", children: [_jsxs("header", { className: "sw-article-header", children: [top ? (_jsxs("div", { className: "sw-article-top", children: [hasContent(eyebrow) ? (_jsx("div", { className: "sw-article-eyebrow", children: eyebrow })) : null, hasContent(actions) ? (_jsx("div", { className: "sw-article-actions", children: actions })) : null] })) : null, _jsx(Text, { as: titleAs, className: "sw-article-title", id: titleId, lang: contentLang, variant: "heading", children: title }), hasContent(meta) ? (_jsx("div", { className: "sw-article-meta", children: meta })) : null] }), _jsx(Separator, { decorative: true }), hasContent(children) ? (_jsx("div", { className: "sw-article-content", lang: contentLang, children: children })) : null] })] }));
 });

package/dist/components/ListRow.d.ts

@@ -3,6 +3,13 @@ import { type BadgeTone } from '../css/css-data.js';
 import { type ListRowTitleAppearance, type ListRowTone, type ListRowValueTone } from '../list-options.js';
 export type ListRowProps = {
     title: string;
+    /**
+     * The title's language (a BCP 47 tag such as `es`) when it is not the
+     * page's, such as a document's Spanish title on an English screen (WCAG
+     * 3.1.2): `lang` on the title's box only (its words and the wordless
+     * unread dot), never the detail, value, tag or unread words.
+     */
+    titleLang?: string;
     /** A muted line under the title. */
     detail?: string;
     /** A figure or word at the row's end, such as "+$1.48". */
@@ -83,7 +90,8 @@ export type ListRowProps = {
  * One row of a `ListGroup`: it opens something (`onPress` or `href`, with
  * a chevron, the whole row pressing), picks one option in place
  * (`selected`), or only states something (neither). `unread` marks it new,
- * `tag` adds a status before its end, `action` a control beside it, and
- * `truncate` keeps its title and detail to one line each.
+ * `tag` adds a status before its end, `action` a control beside it,
+ * `truncate` keeps its title and detail to one line each, and `titleLang`
+ * marks a title in another language than the page's.
  */
-export declare function ListRow({ title, detail, value, valueDetail, valueTone, valueBadge, leading, onPress, href, selected, disabled, tone, titleAppearance, accessory, unread, unreadLabel, tag, action, truncate, 'aria-label': ariaLabel, }: ListRowProps): import("react").JSX.Element;
+export declare function ListRow({ title, titleLang, detail, value, valueDetail, valueTone, valueBadge, leading, onPress, href, selected, disabled, tone, titleAppearance, accessory, unread, unreadLabel, tag, action, truncate, 'aria-label': ariaLabel, }: ListRowProps): import("react").JSX.Element;

package/dist/components/ListRow.js

@@ -12,13 +12,15 @@ import { rowNaming } from './list/row-naming.js';
  * One row of a `ListGroup`: it opens something (`onPress` or `href`, with
  * a chevron, the whole row pressing), picks one option in place
  * (`selected`), or only states something (neither). `unread` marks it new,
- * `tag` adds a status before its end, `action` a control beside it, and
- * `truncate` keeps its title and detail to one line each.
+ * `tag` adds a status before its end, `action` a control beside it,
+ * `truncate` keeps its title and detail to one line each, and `titleLang`
+ * marks a title in another language than the page's.
  */
-export function ListRow({ title, detail, value, valueDetail, valueTone, valueBadge, leading, onPress, href, selected, disabled = false, tone = 'default', titleAppearance = 'strong', accessory = 'chevron', unread = false, unreadLabel, tag, action, truncate = false, 'aria-label': ariaLabel, }) {
+export function ListRow({ title, titleLang, detail, value, valueDetail, valueTone, valueBadge, leading, onPress, href, selected, disabled = false, tone = 'default', titleAppearance = 'strong', accessory = 'chevron', unread = false, unreadLabel, tag, action, truncate = false, 'aria-label': ariaLabel, }) {
     const pressable = onPress !== undefined || href !== undefined;
     assertListRow({
         title,
+        titleLang,
         tone,
         titleAppearance,
         valueTone,
@@ -33,7 +35,7 @@ export function ListRow({ title, detail, value, valueDetail, valueTone, valueBad
     });
     const id = useId();
     const kind = listRowAccessory({ pressable, selected, accessory });
-    const content = (_jsx(ListRowContent, { accessory: kind, detail: detail, id: id, leading: leading, tag: tag, title: title, titleAppearance: titleAppearance, tone: tone, truncate: truncate, unreadLabel: unread ? unreadLabel : undefined, value: value, valueBadge: valueBadge, valueDetail: valueDetail, valueTone: valueTone }));
+    const content = (_jsx(ListRowContent, { accessory: kind, detail: detail, id: id, leading: leading, tag: tag, title: title, titleAppearance: titleAppearance, titleLang: titleLang, tone: tone, truncate: truncate, unreadLabel: unread ? unreadLabel : undefined, value: value, valueBadge: valueBadge, valueDetail: valueDetail, valueTone: valueTone }));
     const className = cx('sw-list-row', pressable && 'sw-list-row-pressable', disabled && 'sw-list-row-disabled', truncate && 'sw-list-row-truncate');
     const naming = rowNaming(id, {
         'aria-label': ariaLabel,

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/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-steps-title-detail.d.ts

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

package/dist/css/css-steps-title-detail.js

@@ -0,0 +1,36 @@
+import { typographyVariants } from '@scalewing/tokens';
+const body = typographyVariants.body;
+const label = typographyVariants.label;
+/*
+ * An open step's muted words after its title ("Optional", "Wetlands done ·
+ * Woodlands empty"): the title and the words share one line that wraps, the
+ * words on the title's baseline a space-2 after it, or on a line of their
+ * own under the title when they do not fit beside it. The line gives way
+ * to a done step's summary and Edit in an open list, as the title does.
+ * The words are the label size at the body's weight in the muted colour,
+ * a skipped step's reason's colour beside its title; a long word breaks
+ * rather than pass the panel.
+ */
+export function cssStepsTitleDetailClasses() {
+    return `.sw-steps-title-line {
+  align-items: baseline;
+  column-gap: var(--sw-space-2);
+  display: flex;
+  flex: 0 1 auto;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+
+.sw-steps-title-detail {
+  color: var(--sw-color-muted);
+  font-size: ${label.fontSize}px;
+  font-weight: ${body.fontWeight};
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}`;
+}
+export function stepsTitleDetailClassCatalog() {
+    return ['sw-steps-title-line', 'sw-steps-title-detail'];
+}

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

@@ -1,7 +1,7 @@
 /**
  * The one-page vertical stepper: an ordered list of glass panels a small
- * 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
+ * gap apart. Each has a header line (marker, title, an open step's muted
+ * words beside it, 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. In an
  * open list (`sw-steps-open`) every step is open: each panel takes the open

package/dist/css/css-steps.js

@@ -1,5 +1,6 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { checkStrokeIn } from './chevron.js';
+import { cssStepsTitleDetailClasses, stepsTitleDetailClassCatalog, } from './css-steps-title-detail.js';
 const body = typographyVariants.body;
 const caption = typographyVariants.caption;
 const label = typographyVariants.label;
@@ -69,8 +70,8 @@ function forcedColorRules() {
 }
 /**
  * The one-page vertical stepper: an ordered list of glass panels a small
- * 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
+ * gap apart. Each has a header line (marker, title, an open step's muted
+ * words beside it, 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. In an
  * open list (`sw-steps-open`) every step is open: each panel takes the open
@@ -190,6 +191,8 @@ export function cssStepsClasses() {
   min-width: 0;
 }
 
+${cssStepsTitleDetailClasses()}
+
 ${markerRules()}
 
 ${connectorRules()}
@@ -214,5 +217,6 @@ export function stepsClassCatalog() {
         'sw-steps-edit',
         'sw-steps-body',
         'sw-steps-region',
+        ...stepsTitleDetailClassCatalog(),
     ];
 }

package/dist/list-options.d.ts

@@ -41,6 +41,7 @@ export declare function assertListGroup({ label, labelledBy, variant, maxHeight,
 export declare function listMaxHeightStyle(maxHeight: ListGroupMaxHeight): CSSProperties;
 export type ListRowInput = {
     title: string;
+    titleLang: string | undefined;
     tone: unknown;
     titleAppearance: unknown;
     valueTone: unknown;
@@ -54,12 +55,12 @@ export type ListRowInput = {
     unreadLabel: string | undefined;
 };
 /**
- * Fails closed on a ListRow it cannot draw: an empty title or value, an
- * unknown tone, title appearance, value tone, badge tone or accessory, a
- * `valueDetail`, `valueTone` or `valueBadge` with no value, a value both
- * toned and a badge, `selected` on a row that is not a button or link
- * (its check would be a state nothing can read), or an unread row with no
- * words for its dot (a colour alone says nothing).
+ * Fails closed on a ListRow it cannot draw: an empty title, titleLang or
+ * value, an unknown tone, title appearance, value tone, badge tone or
+ * accessory, a `valueDetail`, `valueTone` or `valueBadge` with no value, a
+ * value both toned and a badge, `selected` on a row that is not a button or
+ * link (its check would be a state nothing can read), or an unread row with
+ * no words for its dot (a colour alone says nothing).
  */
 export declare function assertListRow(input: ListRowInput): void;
 /**

package/dist/list-options.js

@@ -38,16 +38,18 @@ export function listMaxHeightStyle(maxHeight) {
     return { '--sw-list-max-rows': maxHeight.rows };
 }
 /**
- * Fails closed on a ListRow it cannot draw: an empty title or value, an
- * unknown tone, title appearance, value tone, badge tone or accessory, a
- * `valueDetail`, `valueTone` or `valueBadge` with no value, a value both
- * toned and a badge, `selected` on a row that is not a button or link
- * (its check would be a state nothing can read), or an unread row with no
- * words for its dot (a colour alone says nothing).
+ * Fails closed on a ListRow it cannot draw: an empty title, titleLang or
+ * value, an unknown tone, title appearance, value tone, badge tone or
+ * accessory, a `valueDetail`, `valueTone` or `valueBadge` with no value, a
+ * value both toned and a badge, `selected` on a row that is not a button or
+ * link (its check would be a state nothing can read), or an unread row with
+ * no words for its dot (a colour alone says nothing).
  */
 export function assertListRow(input) {
     if (isBlank(input.title))
         throw new RangeError('ListRow title must be non-empty text');
+    if (input.titleLang !== undefined && isBlank(input.titleLang))
+        throw new RangeError('ListRow titleLang must be a non-empty language tag');
     if (!isOneOf(listRowTones, input.tone))
         throw new RangeError(`Unknown ListRow tone: ${String(input.tone)}`);
     if (!isOneOf(listRowTitleAppearances, input.titleAppearance))

package/dist/styles.css

@@ -7303,6 +7303,25 @@ body {
   min-width: 0;
 }
 
+.sw-steps-title-line {
+  align-items: baseline;
+  column-gap: var(--sw-space-2);
+  display: flex;
+  flex: 0 1 auto;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+
+.sw-steps-title-detail {
+  color: var(--sw-color-muted);
+  font-size: 15px;
+  font-weight: 400;
+  letter-spacing: -0.2px;
+  line-height: 20px;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
 .sw-steps-item-upcoming .sw-steps-marker,
 .sw-steps-item-skipped .sw-steps-marker {
   box-shadow: inset 0 0 0 2px var(--sw-color-border);

package/package.json

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