@fusion.dev/helix-headless 0.148.0 → 0.149.0

package/dist/select/root/select-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, afterLinkFollowed, customElement, drawAutofill, drawStatus, HelixFormElement, hostAria, hostWords, isRtl, MixinControllerOpen, MixinControllerValue, MixinField, onApple, PopoverController, reportValues, StatusController, typesCharacter, } from '@fusion.dev/helix-core';
+import { AriaForwardController, afterLinkFollowed, customElement, drawAutofill, drawStatus, HelixFormElement, hostAria, hostWords, isRtl, MixinControllerOpen, MixinControllerValue, MixinField, onApple, PopoverController, reportValues, StatusController, typesCharacter, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { caretDown } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -34,6 +34,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         this.multiple = false;
         this.placeholder = 'Choose';
         this.position = 'floating';
+        this.valueMissingMessage = 'Choose one to continue.';
         this.panel = new PopoverController(this, {
             anchor: () => this.partNamed('trigger'),
             boundary: () => [
@@ -150,6 +151,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
             }
         };
     }
+    static { this.words = 'helix-select'; }
     get selectedIndex() {
         return this.listbox?.selectedIndex ?? -1;
     }
@@ -165,7 +167,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
     get display() {
         const words = this.chosenOptions.map((option) => option.text);
         if (words.length > 0) {
-            return new Intl.ListFormat(this.lang || undefined, { style: 'short', type: 'unit' }).format(words);
+            return new Intl.ListFormat(wordsLocale(this), { style: 'short', type: 'unit' }).format(words);
         }
         return this.value !== '' && !this.childrenKnown ? nothing : this.placeholder;
     }
@@ -248,7 +250,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         else {
             this.internals.setFormValue(this.value === '' ? null : this.value);
         }
-        this.reportRequired(this.value === '', 'Choose one to continue.', 'trigger');
+        this.reportRequired(this.value === '', this.valueMissingMessage, 'trigger');
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -364,6 +366,7 @@ __decorate([
     property()
 ], HelixHeadlessSelect.prototype, "autocomplete", void 0);
 __decorate([
+    words,
     property({ attribute: 'empty-text' })
 ], HelixHeadlessSelect.prototype, "emptyText", void 0);
 __decorate([
@@ -373,18 +376,21 @@ __decorate([
     property({ attribute: false })
 ], HelixHeadlessSelect.prototype, "focusable", void 0);
 __decorate([
+    words,
     property({ attribute: 'list-label' })
 ], HelixHeadlessSelect.prototype, "listLabel", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessSelect.prototype, "loading", void 0);
 __decorate([
+    words,
     property({ attribute: 'loading-text' })
 ], HelixHeadlessSelect.prototype, "loadingText", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessSelect.prototype, "multiple", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessSelect.prototype, "placeholder", void 0);
 __decorate([
@@ -393,6 +399,10 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessSelect.prototype, "valueContent", void 0);
+__decorate([
+    words,
+    property({ attribute: 'value-missing-message' })
+], HelixHeadlessSelect.prototype, "valueMissingMessage", void 0);
 HelixHeadlessSelect = __decorate([
     customElement('helix-headless-select')
 ], HelixHeadlessSelect);

package/dist/skip-link/root/skip-link-root.d.ts

@@ -35,6 +35,11 @@ import { type TemplateResult } from 'lit';
  * @csspart link - The anchor. It takes the focus.
  */
 export declare class HelixHeadlessSkipLink extends HelixElement {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-skip-link': { label: 'Zum Inhalt springen' } })`.
+     */
+    static words: string;
     /** Focus goes to the anchor inside, so the host is never the focus target. */
     static shadowRootOptions: ShadowRootInit;
     /**

package/dist/skip-link/root/skip-link-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, elementById, HelixElement, plainClick, reportRuntime, } from '@fusion.dev/helix-core';
+import { customElement, elementById, HelixElement, plainClick, reportRuntime, words, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessSkipLink = class HelixHeadlessSkipLink extends HelixElement {
@@ -32,6 +32,7 @@ let HelixHeadlessSkipLink = class HelixHeadlessSkipLink extends HelixElement {
         };
         this.missed = '';
     }
+    static { this.words = 'helix-skip-link'; }
     static { this.shadowRootOptions = {
         ...HelixElement.shadowRootOptions,
         delegatesFocus: true,
@@ -62,6 +63,7 @@ __decorate([
     property()
 ], HelixHeadlessSkipLink.prototype, "href", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessSkipLink.prototype, "label", void 0);
 HelixHeadlessSkipLink = __decorate([

package/dist/slider/root/slider-root.d.ts

@@ -89,6 +89,11 @@ declare const HelixHeadlessSlider_base: (new (...args: any[]) => import("@fusion
  * @cssstate invalid - The slider has an error to show, from the browser's validation or from your `feedback`.
  */
 export declare class HelixHeadlessSlider extends HelixHeadlessSlider_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-slider': { rangeText: '{start} bis {end}' } })`.
+     */
+    static words: string;
     protected readonly aria: AriaForwardController;
     /** Typed or dragged, so every edit is announced. See `announcesInput`. */
     protected readonly announcesInput = true;
@@ -109,8 +114,8 @@ export declare class HelixHeadlessSlider extends HelixHeadlessSlider_base {
      */
     formatter?: (value: number) => string;
     /**
-     * The locale `format-options` writes the value in, such as `de-DE`. Empty is
-     * the reader's own.
+     * The locale the value and the words are written in, such as `de-DE`. Empty
+     * reads the nearest `lang`, then the browser's language.
      */
     locale: string;
     /**

package/dist/slider/root/slider-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, customElement, fillTemplate, formatNumber, HelixFormElement, MixinControllerValue, MixinField, restoreValue, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, formatNumber, formatWords, HelixFormElement, MixinControllerValue, MixinField, restoreValue, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue(MixinField(HelixFormElement)) {
@@ -51,10 +51,11 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         };
         this.valueText = '';
     }
+    static { this.words = 'helix-slider'; }
     get reserve() {
         const widest = Math.max(this.said(this.min).length, this.said(this.max).length);
         return this.range
-            ? widest * 2 + fillTemplate(this.rangeText, { end: '', start: '' }).length
+            ? widest * 2 + formatWords(this, 'rangeText', { end: '', start: '' }).length
             : widest;
     }
     get precision() {
@@ -170,11 +171,13 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         if (this.formatter) {
             return this.formatter(number);
         }
-        return this.formatOptions ? formatNumber(number, this.locale, this.formatOptions) : String(at);
+        return this.formatOptions
+            ? formatNumber(number, wordsLocale(this), this.formatOptions)
+            : String(at);
     }
     spoken(at) {
         if (this.valueText) {
-            return fillTemplate(this.valueText, { value: this.said(at) });
+            return formatWords(this, 'valueText', { value: this.said(at) });
         }
         return this.formats ? this.said(at) : nothing;
     }
@@ -273,7 +276,7 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
               aria-hidden="true"
               style=${`--_slider-output-reserve: ${this.reserve}ch`}
               >${this.range
-                ? fillTemplate(this.rangeText, { end: this.said(end), start: this.said(start) })
+                ? formatWords(this, 'rangeText', { end: this.said(end), start: this.said(start) })
                 : this.said(this.value)}</output
             >`
             : nothing}
@@ -300,12 +303,14 @@ __decorate([
     property({ type: Number })
 ], HelixHeadlessSlider.prototype, "max", void 0);
 __decorate([
+    words,
     property({ attribute: 'maximum-label' })
 ], HelixHeadlessSlider.prototype, "maximumLabel", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessSlider.prototype, "min", void 0);
 __decorate([
+    words,
     property({ attribute: 'minimum-label' })
 ], HelixHeadlessSlider.prototype, "minimumLabel", void 0);
 __decorate([
@@ -321,6 +326,7 @@ __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessSlider.prototype, "range", void 0);
 __decorate([
+    words,
     property({ attribute: 'range-text' })
 ], HelixHeadlessSlider.prototype, "rangeText", void 0);
 __decorate([

package/dist/sparkline/readings.d.ts

@@ -27,10 +27,20 @@ export interface Run {
  * first. Empty where there are no runs.
  */
 export declare const areaPath: (runs: readonly Run[], floor: number) => string;
+/** The readings an overview names, each as the readout writes it. */
+export interface Overview {
+    /** The first reading. */
+    first: string;
+    /** The highest reading. */
+    high: string;
+    /** The last reading. */
+    last: string;
+    /** The lowest reading. */
+    low: string;
+}
 /**
- * What the readings come to, in `template`: `{first}` and `{last}` for the
- * first and the last reading, `{high}` and `{low}` for the highest and the
- * lowest, each written by `write`. Empty where there are fewer than two
- * readings, which make no trend.
+ * What the readings come to, as `say` puts it: the first and the last
+ * reading, and the highest and the lowest, each written by `write`. Empty
+ * where there are fewer than two readings, which make no trend.
  */
-export declare const overviewWords: (template: string, slots: readonly (number | undefined)[], write: (at: number) => string) => string;
+export declare const overviewWords: (say: (overview: Overview) => string, slots: readonly (number | undefined)[], write: (at: number) => string) => string;

package/dist/sparkline/readings.js

@@ -1,4 +1,4 @@
-import { extremesOf, fillTemplate } from '@fusion.dev/helix-core';
+import { extremesOf } from '@fusion.dev/helix-core';
 export const readingWords = (label, text, position) => {
     const named = label === '' ? text : text === '' ? label : `${label}: ${text}`;
     return position === '' ? named : `${named} (${position})`;
@@ -19,7 +19,7 @@ export const areaPath = (runs, floor) => runs
     return `${one.path}L${last[0]},${floor}L${first[0]},${floor}Z`;
 })
     .join('');
-export const overviewWords = (template, slots, write) => {
+export const overviewWords = (say, slots, write) => {
     const placed = slots.flatMap((value, at) => (value === undefined ? [] : [at]));
     const first = placed[0];
     const last = placed.at(-1);
@@ -27,7 +27,7 @@ export const overviewWords = (template, slots, write) => {
     if (placed.length < 2 || first === undefined || last === undefined) {
         return '';
     }
-    return fillTemplate(template, {
+    return say({
         first: write(first),
         high: write(high),
         last: write(last),

package/dist/sparkline/root/sparkline-root.d.ts

@@ -64,6 +64,11 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * @cssproperty --chart-terminus-y - Where the last point sits vertically, as a percentage.
  */
 export declare class HelixHeadlessSparkline extends HelixElement {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-sparkline': { positionLabel: '{position} von {count}' } })`.
+     */
+    static words: string;
     /**
      * How the line is drawn from one reading to the next.
      *
@@ -114,11 +119,11 @@ export declare class HelixHeadlessSparkline extends HelixElement {
      */
     label: string;
     /**
-     * The locale the readout's numbers and positions are written in, such as
-     * `de` for `1.240`.
+     * The locale the words, the readout's numbers and positions are in, such
+     * as `de` for `1.240`.
      *
-     * Absent uses the runtime's own. A table's cells are shown as the table
-     * writes them, whatever this says.
+     * Absent reads the nearest `lang`, then the runtime's own. A table's cells
+     * are shown as the table writes them, whatever this says.
      */
     locale: string;
     /**

package/dist/sparkline/root/sparkline-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { CHART_PLOT, ChartPointerController, customElement, extent, extremesOf, formatNumbers, HelixElement, linear, linePath, PLOT_WIDTH, SourceController, unbroken, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
+import { CHART_PLOT, ChartPointerController, customElement, extent, extremesOf, formatNumbers, formatWords, HelixElement, linear, linePath, PLOT_WIDTH, SourceController, unbroken, words, wordsLocale, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import { areaPath, overviewWords, readingWords, slotsOf } from '../readings.js';
@@ -23,6 +23,7 @@ let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
         this.source = new SourceController(this);
         this.pointer = new ChartPointerController(this);
     }
+    static { this.words = 'helix-sparkline'; }
     static get observedAttributes() {
         return [...super.observedAttributes, 'aria-label'];
     }
@@ -67,7 +68,10 @@ let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
         const rows = this.source.rows;
         const row = rows[at];
         if (!row) {
-            return { label: '', text: value === undefined ? '' : formatNumbers(this.locale)(value) };
+            return {
+                label: '',
+                text: value === undefined ? '' : formatNumbers(wordsLocale(this))(value),
+            };
         }
         const column = row.cells.findIndex((_, index) => rows.some((one) => one.cells[index]?.value !== undefined));
         return { label: row.label, text: row.cells[column]?.text ?? '' };
@@ -115,7 +119,7 @@ let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
         const name = this.named;
         const named = name !== '';
         const overview = named
-            ? overviewWords(this.overviewLabel, slots, (index) => this.reading(index, slots[index]).text)
+            ? overviewWords((values) => formatWords(this, 'overviewLabel', { ...values }), slots, (index) => this.reading(index, slots[index]).text)
             : '';
         return html `<svg
         aria-describedby=${overview === '' ? nothing : 'sparkline-overview'}
@@ -218,12 +222,14 @@ __decorate([
     property()
 ], HelixHeadlessSparkline.prototype, "marks", void 0);
 __decorate([
+    words,
     property({ attribute: 'overview-label' })
 ], HelixHeadlessSparkline.prototype, "overviewLabel", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessSparkline.prototype, "plot", void 0);
 __decorate([
+    words,
     property({ attribute: 'position-label' })
 ], HelixHeadlessSparkline.prototype, "positionLabel", void 0);
 __decorate([

package/dist/speed-dial/root/speed-dial-root.d.ts

@@ -70,6 +70,11 @@ declare const HelixHeadlessSpeedDial_base: (new (...args: any[]) => import("@fus
  * @cssstate open - While the actions are out.
  */
 export declare class HelixHeadlessSpeedDial extends HelixHeadlessSpeedDial_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-speed-dial': { label: 'Aktionen' } })`.
+     */
+    static words: string;
     /**
      * Accessible name for the trigger and the set of actions it opens.
      */

package/dist/speed-dial/root/speed-dial-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { anchorElement, customElement, drawIcon, focusTarget, HelixElement, KeyboardNavigationController, linkDescription, MixinControllerOpen, PopoverController, slottedWords, tellDisclosure, typeaheadByWords, unlinkDescription, } from '@fusion.dev/helix-core';
+import { anchorElement, customElement, drawIcon, focusTarget, HelixElement, KeyboardNavigationController, linkDescription, MixinControllerOpen, PopoverController, slottedWords, tellDisclosure, typeaheadByWords, unlinkDescription, words, } from '@fusion.dev/helix-core';
 import { plus } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -116,6 +116,7 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
             }
         };
     }
+    static { this.words = 'helix-speed-dial'; }
     get trigger() {
         return anchorElement(this.renderRoot?.querySelector('slot[name="trigger"]'), this.partNamed('trigger') ?? this);
     }
@@ -240,9 +241,11 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
     }
 };
 __decorate([
+    words,
     property()
 ], HelixHeadlessSpeedDial.prototype, "label", void 0);
 __decorate([
+    words,
     property({ attribute: 'long-press-label' })
 ], HelixHeadlessSpeedDial.prototype, "longPressLabel", void 0);
 __decorate([

package/dist/splitter/root/splitter-root.d.ts

@@ -15,7 +15,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * The divider has `role="separator"` and `aria-valuenow`, with
  * `aria-valuetext` saying the start pane's share as a percentage in the
- * reader's locale, and `aria-controls` names the start pane. Drag it with a pointer or move it with the arrow keys,
+ * nearest `lang`, or in the reader's locale where no `lang` is set, and `aria-controls` names the start pane. Drag it with a pointer or move it with the arrow keys,
  * press `Home` or `End` to move it to its bounds, and press `Enter` to collapse
  * the start pane and open it again. A drag in progress is tracked as a state, so both dividers a
  * corner moves stay lit for as long as they move.
@@ -59,6 +59,11 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @cssstate vertical - While the panes are one above the other, whether `orientation` says so or `auto` turned them.
  */
 export declare class HelixHeadlessSplitter extends HelixElement {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-splitter': { label: 'Bereiche anpassen' } })`.
+     */
+    static words: string;
     /**
      * Which pane is shut, if either.
      *

package/dist/splitter/root/splitter-root.js

@@ -5,13 +5,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessSplitter_1;
-import { AriaForwardController, capturePointer, closestInstance, commaList, customElement, formatPercent, HelixBeforeCollapseEvent, HelixBeforeResizeEvent, HelixCollapseEvent, HelixElement, HelixResizedEvent, inlineStep, isRtl, requestChange, } from '@fusion.dev/helix-core';
+import { AriaForwardController, capturePointer, closestInstance, commaList, customElement, formatPercent, HelixBeforeCollapseEvent, HelixBeforeResizeEvent, HelixCollapseEvent, HelixElement, HelixResizedEvent, inlineStep, isRtl, requestChange, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { snapTo } from '../snap.js';
 const STACK_BELOW = 512;
 const channel = new WeakMap();
-let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitter extends HelixElement {
+let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
+    static { HelixHeadlessSplitter_1 = this; }
+    static { this.words = 'helix-splitter'; }
     get collapsed() {
         const held = this.collapsedState;
         if (held === undefined) {
@@ -504,7 +506,7 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
             ? this.collapsedLabel
             : this.hydrating
                 ? nothing
-                : formatPercent(Math.round(position) / 100)}
+                : formatPercent(Math.round(position) / 100, wordsLocale(this))}
         ?data-dragging=${this.dragging}
         ?data-flush=${this.flush}
         @dblclick=${this.handleDoubleClick}
@@ -528,7 +530,7 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
           aria-valuemax="100"
           aria-valuemin="0"
           aria-valuenow=${Math.round(crossing.at)}
-          aria-valuetext=${formatPercent(Math.round(crossing.at) / 100)}
+          aria-valuetext=${formatPercent(Math.round(crossing.at) / 100, wordsLocale(this))}
           data-cross=${index}
           style="--splitter-corner-at: ${crossing.at}%; --splitter-position: ${position}%"
           @dblclick=${this.handleCornerDoubleClick}
@@ -544,12 +546,14 @@ __decorate([
     property()
 ], HelixHeadlessSplitter.prototype, "collapsed", null);
 __decorate([
+    words,
     property({ attribute: 'collapsed-label' })
 ], HelixHeadlessSplitter.prototype, "collapsedLabel", void 0);
 __decorate([
     property({ attribute: 'collapsed-size', type: Number })
 ], HelixHeadlessSplitter.prototype, "collapsedSize", void 0);
 __decorate([
+    words,
     property({ attribute: 'corner-label' })
 ], HelixHeadlessSplitter.prototype, "cornerLabel", void 0);
 __decorate([
@@ -559,6 +563,7 @@ __decorate([
     property({ attribute: 'default-position', type: Number })
 ], HelixHeadlessSplitter.prototype, "defaultPosition", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessSplitter.prototype, "label", void 0);
 __decorate([

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

@@ -58,6 +58,11 @@ declare const HelixHeadlessSteps_base: (new (...args: any[]) => import("@fusion.
  * @cssstate complete - Every stage is complete.
  */
 export declare class HelixHeadlessSteps extends HelixHeadlessSteps_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-steps': { progressLabel: '{share, number, percent} erledigt' } })`.
+     */
+    static words: string;
     /**
      * The sequence's name, read by screen readers.
      *
@@ -85,8 +90,10 @@ export declare class HelixHeadlessSteps extends HelixHeadlessSteps_base {
      */
     orientation?: 'vertical';
     /**
-     * What the `progress` part says to a screen reader, with `{percent}` filled
-     * in with `progress`.
+     * What the `progress` part says to a screen reader. `{share, number,
+     * percent}` writes `progress` as a percentage the way the locale writes one,
+     * such as `40%`, or `40 %` in French. `{percent}` is `progress` as a whole
+     * number, for a sentence that places the sign itself.
      */
     progressLabel: string;
     /**

package/dist/steps/root/steps-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, fillTemplate, HelixElement, hostAria, MixinControllerActive, whenHydrated, } from '@fusion.dev/helix-core';
+import { customElement, formatWords, HelixElement, hostAria, MixinControllerActive, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { canReach, progressOf } from '../reach.js';
@@ -13,7 +13,7 @@ let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(
         super(...arguments);
         this.label = 'Steps';
         this.linear = false;
-        this.progressLabel = '{percent}% complete';
+        this.progressLabel = '{share, number, percent} complete';
         this.handleSelection = (event) => {
             if (event.defaultPrevented || !this.steps.includes(event.target)) {
                 return;
@@ -29,6 +29,7 @@ let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(
             this.lock();
         };
     }
+    static { this.words = 'helix-steps'; }
     get progress() {
         return progressOf(this.steps);
     }
@@ -141,13 +142,14 @@ let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(
         aria-valuemin="0"
         aria-valuemax="100"
         aria-valuenow=${progress}
-        aria-valuetext=${fillTemplate(this.progressLabel, { percent: String(progress) })}
+        aria-valuetext=${formatWords(this, 'progressLabel', { percent: progress, share: progress / 100 })}
         style="--steps-progress: ${progress}%"
         hidden
       ></div>`;
     }
 };
 __decorate([
+    words,
     property()
 ], HelixHeadlessSteps.prototype, "label", void 0);
 __decorate([
@@ -157,6 +159,7 @@ __decorate([
     property({ reflect: true })
 ], HelixHeadlessSteps.prototype, "orientation", void 0);
 __decorate([
+    words,
     property({ attribute: 'progress-label' })
 ], HelixHeadlessSteps.prototype, "progressLabel", void 0);
 __decorate([

package/dist/steps/step/step.d.ts

@@ -55,10 +55,22 @@ import '../../button/index.js';
  * @cssstate invalid - The sequence's `validate` last answered that this stage is not valid.
  */
 export declare class HelixHeadlessStep extends HelixElement {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-step': { completeLabel: 'Erledigt' } })`.
+     */
+    static words: string;
     /**
      * Whether this stage is finished.
      */
     complete: boolean;
+    /**
+     * What a screen reader hears when the stage is finished while the page is
+     * open. `{name}` is the stage's name and `{complete}` is `complete-label`, so
+     * a language can write the whole sentence in its own order. A stage with no
+     * name says `complete-label` alone.
+     */
+    completedLabel: string;
     /**
      * The words that tell a screen reader the stage is finished. Translate it
      * with the page.

package/dist/steps/step/step.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, drawStatus, HelixElement, HelixSelectEvent, hostAria, StatusController, slottedWords, } from '@fusion.dev/helix-core';
+import { customElement, drawStatus, formatWords, HelixElement, HelixSelectEvent, hostAria, StatusController, slottedWords, words, } from '@fusion.dev/helix-core';
 import { check, circle, record } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -15,6 +15,7 @@ let HelixHeadlessStep = class HelixHeadlessStep extends HelixElement {
     constructor() {
         super(...arguments);
         this.complete = false;
+        this.completedLabel = '{name}, {complete}';
         this.completeLabel = 'Complete';
         this.current = false;
         this.disabled = false;
@@ -24,6 +25,7 @@ let HelixHeadlessStep = class HelixHeadlessStep extends HelixElement {
         this.value = '';
         this.status = new StatusController(this);
     }
+    static { this.words = 'helix-step'; }
     select() {
         if (this.disabled || this.locked) {
             return;
@@ -47,7 +49,9 @@ let HelixHeadlessStep = class HelixHeadlessStep extends HelixElement {
         super.updated(changed);
         if (changed.get('complete') === false && this.complete) {
             const name = slottedWords(this, ['']);
-            this.status.say(name === '' ? this.completeLabel : `${name}, ${this.completeLabel}`);
+            this.status.say(name === ''
+                ? this.completeLabel
+                : formatWords(this, 'completedLabel', { complete: this.completeLabel, name }));
         }
     }
     renderLabel() {
@@ -78,6 +82,11 @@ __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessStep.prototype, "complete", void 0);
 __decorate([
+    words,
+    property({ attribute: 'completed-label' })
+], HelixHeadlessStep.prototype, "completedLabel", void 0);
+__decorate([
+    words,
     property({ attribute: 'complete-label' })
 ], HelixHeadlessStep.prototype, "completeLabel", void 0);
 __decorate([

package/dist/switch/root/switch-root.d.ts

@@ -58,6 +58,11 @@ declare const HelixHeadlessSwitch_base: (new (...args: any[]) => import("@fusion
  * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
  */
 export declare class HelixHeadlessSwitch extends HelixHeadlessSwitch_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-switch': { valueMissingMessage: '...' } })`.
+     */
+    static words: string;
     protected readonly aria: AriaForwardController;
     /** A click on the element itself, `click()` or a page's `<label for>`, toggles it. */
     protected readonly clicks: HostClickController;
@@ -65,6 +70,12 @@ export declare class HelixHeadlessSwitch extends HelixHeadlessSwitch_base {
      * Value submitted when the switch is on.
      */
     value: string;
+    /**
+     * The message reported when the field is required and the switch is off.
+     * Absent, or empty, is this sentence, or the words registered for the page's
+     * locale.
+     */
+    valueMissingMessage: string;
     private readonly handleChange;
     /** Reports what the form would submit, and the verdict on it. */
     private sync;