@fusion.dev/helix-headless 0.147.0 → 0.149.0

package/dist/number-input/root/number-input-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, appleTouch, valueAsNumber as asNumber, customElement, fillTemplate, formatNumber, numberAsValue as fromNumber, HelixFormElement, holdCaret, MixinControllerValue, MixinField, parseNumber, restoreValue, submitImplicitly, } from '@fusion.dev/helix-core';
+import { AriaForwardController, appleTouch, valueAsNumber as asNumber, customElement, formatNumber, formatWords, numberAsValue as fromNumber, HelixFormElement, holdCaret, MixinControllerValue, MixinField, parseNumber, restoreValue, submitImplicitly, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { minus, plus } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -20,12 +20,16 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         });
         this.announcesInput = true;
         this.autocomplete = '';
+        this.badInputMessage = 'Please enter a number.';
         this.decrementLabel = 'Decrease';
         this.incrementLabel = 'Increase';
         this.locale = '';
         this.placeholder = '';
+        this.rangeOverflowMessage = 'Value must be {max} or less.';
+        this.rangeUnderflowMessage = 'Value must be {min} or more.';
         this.readOnly = false;
         this.scrub = false;
+        this.stepMismatchMessage = 'Please enter a valid value. The two nearest valid values are {below} and {above}.';
         this.valueText = '';
         this.wheel = false;
         this.editing = false;
@@ -143,6 +147,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
             }
         };
     }
+    static { this.words = 'helix-number-input'; }
     get shown() {
         const parsed = this.numeric;
         if (this.editing || this.formatOptions === undefined || parsed === null) {
@@ -177,6 +182,12 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         this.grainOf = [this.locale, options, fresh];
         return fresh;
     }
+    written(number) {
+        return formatNumber(number, wordsLocale(this), {
+            maximumFractionDigits: 20,
+            useGrouping: false,
+        });
+    }
     onStep(value) {
         const step = this.grid;
         const anchor = this.min ?? 0;
@@ -259,25 +270,23 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
             this.internals.setValidity({ valueMissing: true }, this.valueMissingMessage || 'Please fill in this field.', control);
         }
         else if (this.value.trim() !== '' && parsed === null) {
-            this.internals.setValidity({ badInput: true }, this.badInputMessage || 'Please enter a number.', control);
+            this.internals.setValidity({ badInput: true }, this.badInputMessage, control);
         }
         else if (parsed !== null && this.min !== undefined && parsed < this.min) {
-            this.internals.setValidity({ rangeUnderflow: true }, fillTemplate(this.rangeUnderflowMessage || 'Value must be {min} or more.', {
-                min: this.min,
-            }), control);
+            this.internals.setValidity({ rangeUnderflow: true }, formatWords(this, 'rangeUnderflowMessage', { min: this.written(this.min) }), control);
         }
         else if (parsed !== null && this.max !== undefined && parsed > this.max) {
-            this.internals.setValidity({ rangeOverflow: true }, fillTemplate(this.rangeOverflowMessage || 'Value must be {max} or less.', {
-                max: this.max,
-            }), control);
+            this.internals.setValidity({ rangeOverflow: true }, formatWords(this, 'rangeOverflowMessage', { max: this.written(this.max) }), control);
         }
         else if (parsed !== null && !this.onStep(parsed)) {
             const step = this.grid;
             const anchor = this.min ?? 0;
             const below = this.clamp(anchor + Math.floor((parsed - anchor) / step) * step);
             const above = this.clamp(anchor + Math.ceil((parsed - anchor) / step) * step);
-            this.internals.setValidity({ stepMismatch: true }, fillTemplate(this.stepMismatchMessage ||
-                'Please enter a valid value. The two nearest valid values are {below} and {above}.', { above, below }), control);
+            this.internals.setValidity({ stepMismatch: true }, formatWords(this, 'stepMismatchMessage', {
+                above: this.written(above),
+                below: this.written(below),
+            }), control);
         }
         else {
             this.internals.setValidity({}, '', control);
@@ -347,7 +356,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
           aria-valuetext=${parsed === null
             ? nothing
             : this.valueText
-                ? fillTemplate(this.valueText, {
+                ? formatWords(this, 'valueText', {
                     value: this.formatOptions
                         ? formatNumber(parsed, this.locale, this.formatOptions)
                         : this.value,
@@ -393,15 +402,18 @@ __decorate([
     property()
 ], HelixHeadlessNumberInput.prototype, "autocomplete", void 0);
 __decorate([
+    words,
     property({ attribute: 'bad-input-message' })
 ], HelixHeadlessNumberInput.prototype, "badInputMessage", void 0);
 __decorate([
+    words,
     property({ attribute: 'decrement-label' })
 ], HelixHeadlessNumberInput.prototype, "decrementLabel", void 0);
 __decorate([
     property({ attribute: 'format-options', type: Object })
 ], HelixHeadlessNumberInput.prototype, "formatOptions", void 0);
 __decorate([
+    words,
     property({ attribute: 'increment-label' })
 ], HelixHeadlessNumberInput.prototype, "incrementLabel", void 0);
 __decorate([
@@ -420,9 +432,11 @@ __decorate([
     property()
 ], HelixHeadlessNumberInput.prototype, "placeholder", void 0);
 __decorate([
+    words,
     property({ attribute: 'range-overflow-message' })
 ], HelixHeadlessNumberInput.prototype, "rangeOverflowMessage", void 0);
 __decorate([
+    words,
     property({ attribute: 'range-underflow-message' })
 ], HelixHeadlessNumberInput.prototype, "rangeUnderflowMessage", void 0);
 __decorate([
@@ -435,6 +449,7 @@ __decorate([
     property({ type: Number })
 ], HelixHeadlessNumberInput.prototype, "step", void 0);
 __decorate([
+    words,
     property({ attribute: 'step-mismatch-message' })
 ], HelixHeadlessNumberInput.prototype, "stepMismatchMessage", void 0);
 __decorate([

package/dist/object-inspector/root/object-inspector-root.d.ts

@@ -51,8 +51,8 @@ import { type Row } from '../rows.js';
  * `filter` narrows the tree to the entries whose key or value holds the text,
  * ignoring case, and the branches that lead to them, which it opens. A matched
  * branch keeps everything under it. Each matched row carries `row-match`, and
- * a screen reader hears how many entries matched from `result-label` and
- * `results-label`. `filterable` adds a field that sets it: typing sends
+ * a screen reader hears how many entries matched from `results-label`.
+ * `filterable` adds a field that sets it: typing sends
  * `helix-filter`, which you can cancel, and then `helix-filtered`, and Down
  * moves from the field to the tree.
  *
@@ -123,6 +123,11 @@ import { type Row } from '../rows.js';
  * @cssproperty --object-inspector-level - How deep a row is, from 0 at the root, for indenting it.
  */
 export declare class HelixHeadlessObjectInspector extends HelixElement {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-object-inspector': { copyValueLabel: 'Wert kopieren' } })`.
+     */
+    static words: string;
     /**
      * The active row's path, such as `/meta/tags/0`, and the empty string for the
      * root.
@@ -178,13 +183,33 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
      * page's markup should not take the page down over a comma.
      */
     for: string;
-    /** How an array of one entry counts it. `{count}` is replaced with the count. */
-    itemLabel: string;
-    /** How an array of any other number of entries counts them. `{count}` is replaced with the count. */
+    /**
+     * How an array of one entry counts it, where `items-label` should not say
+     * it. `{count}` is the count.
+     *
+     * @deprecated Write every form in `items-label`, as `{count, plural, one
+     * {# item} other {# items}}`. Removed in the next major version.
+     */
+    itemLabel?: string;
+    /**
+     * How an array counts its entries. `{count}` is the count, written in the
+     * locale, and each language writes the forms it has: `{count, plural, one
+     * {# element} few {# elementy} many {# elementów} other {# elementu}}`.
+     */
     itemsLabel: string;
-    /** How an object of one key counts it. `{count}` is replaced with the count. */
-    keyLabel: string;
-    /** How an object of any other number of keys counts them. `{count}` is replaced with the count. */
+    /**
+     * How an object of one key counts it, where `keys-label` should not say it.
+     * `{count}` is the count.
+     *
+     * @deprecated Write every form in `keys-label`, as `{count, plural, one
+     * {# key} other {# keys}}`. Removed in the next major version.
+     */
+    keyLabel?: string;
+    /**
+     * How an object counts its keys. `{count}` is the count, written in the
+     * locale, and each language writes the forms it has: `{count, plural, one
+     * {# klucz} few {# klucze} many {# kluczy} other {# klucza}}`.
+     */
     keysLabel: string;
     /**
      * Accessible name for the tree, and the text of the header where there is one.
@@ -204,11 +229,19 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
      * reach a value.
      */
     noCopy: boolean;
-    /** What a screen reader hears when a filter matches one entry. `{count}` is the count. */
-    resultLabel: string;
     /**
-     * What a screen reader hears when a filter matches any other number of
-     * entries. `{count}` is the count. The two are chosen by `Intl.PluralRules`.
+     * What a screen reader hears when a filter matches one entry, where
+     * `results-label` should not say it. `{count}` is the count.
+     *
+     * @deprecated Write every form in `results-label`, as `{count, plural, one
+     * {# result} other {# results}}`. Removed in the next major version.
+     */
+    resultLabel?: string;
+    /**
+     * What a screen reader hears when a filter matches entries. `{count}` is
+     * how many, written in the locale, and each language writes the forms it
+     * has: `{count, plural, one {# wynik} few {# wyniki} many {# wyników}
+     * other {# wyniku}}`.
      */
     resultsLabel: string;
     /**
@@ -291,6 +324,12 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
     /** Opens the branches around each path, where the value has them. */
     private openAround;
     protected willUpdate(changed: PropertyValues): void;
+    /**
+     * A count in its plural message, `items-label`, `keys-label` or
+     * `results-label`, or in the deprecated sentence for one where a page still
+     * sets it.
+     */
+    private counted;
     /** Says how many entries the filter matched, and nothing for an empty one. */
     private tell;
     protected firstUpdated(changed: PropertyValues): void;
@@ -351,7 +390,7 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
      * box, or in the window where the box does not scroll, less one, so the row
      * at one edge lands at the other.
      */
-    private pageRows;
+    private pageStep;
     /** A press opens or closes the row it lands on, once that row is the active one. */
     private handleRowClick;
     /** Text typed in the filter field, asked for before the tree narrows to it. */
@@ -380,6 +419,10 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
     private renderRow;
     /** Whether a row of the tree holds focus. */
     private hasFocusedRow;
+    /** Where the row holding focus is among the visible rows, or nothing while none does. */
+    private focusedIndex;
+    /** Focus on the tree itself, its stop while the active row is not drawn, goes on to that row. */
+    private readonly handleTreeFocus;
     /**
      * A row that takes focus some other way than the keys, from a script or a
      * screen reader, becomes the active row, so focus and the keys agree.

package/dist/object-inspector/root/object-inspector-root.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessObjectInspector_1;
-import { AriaForwardController, CopyController, countLabel, customElement, drawStatus, elementById, fillTemplate, formatNumbers, HelixActivateEvent, HelixBeforeActivateEvent, HelixBeforeCloseEvent, HelixBeforeOpenEvent, HelixElement, HelixFilterEvent, HelixFilteredEvent, inlineStep, requestChange, StatusController, scrollItemIntoView, searchableById, Typeahead, treeArrow, VirtualizeController, } from '@fusion.dev/helix-core';
+import { AriaForwardController, CopyController, countLabel, customElement, drawStatus, elementById, formatWords, HelixActivateEvent, HelixBeforeActivateEvent, HelixBeforeCloseEvent, HelixBeforeOpenEvent, HelixElement, HelixFilterEvent, HelixFilteredEvent, inlineStep, pageRows, requestChange, StatusController, scrollItemIntoView, scrollRoom, searchableById, Typeahead, treeArrow, VirtualizeController, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { caretDown, caretRight } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -24,14 +24,11 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         this.filterable = false;
         this.filterLabel = 'Filter';
         this.for = '';
-        this.itemLabel = '{count} item';
-        this.itemsLabel = '{count} items';
-        this.keyLabel = '{count} key';
-        this.keysLabel = '{count} keys';
+        this.itemsLabel = '{count, plural, one {# item} other {# items}}';
+        this.keysLabel = '{count, plural, one {# key} other {# keys}}';
         this.label = '';
         this.noCopy = false;
-        this.resultLabel = '{count} result';
-        this.resultsLabel = '{count} results';
+        this.resultsLabel = '{count, plural, one {# result} other {# results}}';
         this.treeLabel = 'Value';
         this.value = undefined;
         this.windowed = false;
@@ -85,10 +82,10 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
                     this.move(rows.length - 1);
                     break;
                 case 'PageDown':
-                    this.move(this.cursor + this.pageRows());
+                    this.move(this.cursor + this.pageStep());
                     break;
                 case 'PageUp':
-                    this.move(this.cursor - this.pageRows());
+                    this.move(this.cursor - this.pageStep());
                     break;
                 case 'ArrowRight':
                 case 'ArrowLeft':
@@ -153,6 +150,11 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
                 this.requestUpdate();
             }
         };
+        this.handleTreeFocus = () => {
+            this.revealing = true;
+            this.focusing = true;
+            this.requestUpdate();
+        };
         this.handleFocusIn = (event) => {
             const index = Number(event.target.dataset?.index);
             if (Number.isInteger(index) && index !== this.cursor) {
@@ -166,6 +168,7 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         };
     }
     static { HelixHeadlessObjectInspector_1 = this; }
+    static { this.words = 'helix-object-inspector'; }
     get active() {
         return this.wanted ?? this.rows[this.cursor]?.path ?? '';
     }
@@ -234,9 +237,15 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
             this.tell();
         }
     }
+    counted(which, count) {
+        const one = this[`${which}Label`];
+        return one
+            ? countLabel(count, one, this[`${which}sLabel`], wordsLocale(this))
+            : formatWords(this, `${which}sLabel`, { count });
+    }
     tell() {
         if (this.found) {
-            this.status.say(countLabel(this.found.size, this.resultLabel, this.resultsLabel, this.lang));
+            this.status.say(this.counted('result', this.found.size));
         }
     }
     firstUpdated(changed) {
@@ -367,6 +376,7 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         }
         this.revealing = true;
         this.focusing = true;
+        this.requestUpdate();
         return true;
     }
     typeahead(letter) {
@@ -375,11 +385,8 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
             this.move(at);
         }
     }
-    pageRows() {
-        const tree = this.partNamed('tree');
-        const room = tree && tree.scrollHeight > tree.clientHeight + 1 ? tree.clientHeight : window.innerHeight;
-        const tall = this.virtualize.sizeOf(this.cursor) || HelixHeadlessObjectInspector_1.ESTIMATE;
-        return Math.max(1, Math.floor(room / tall) - 1);
+    pageStep() {
+        return pageRows(scrollRoom(this.partNamed('tree')), this.virtualize.sizeOf(this.cursor) || HelixHeadlessObjectInspector_1.ESTIMATE);
     }
     handleRowClick(index, row) {
         if (this.move(index) && row.branch) {
@@ -391,18 +398,8 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         if (row.branch) {
             const count = entries(value).length;
             const array = Array.isArray(value);
-            const one = new Intl.PluralRules(this.lang || undefined).select(count) === 'one';
-            const words = array
-                ? one
-                    ? this.itemLabel
-                    : this.itemsLabel
-                : one
-                    ? this.keyLabel
-                    : this.keysLabel;
             return html `<span part="summary">${array ? '[…]' : '{…}'}</span>
-        <span part="count" dir="auto"
-          >${fillTemplate(words, { count: formatNumbers(this.lang)(count) })}</span
-        >`;
+        <span part="count" dir="auto">${this.counted(array ? 'item' : 'key', count)}</span>`;
         }
         if (typeof value === 'string') {
             return html `<span part="string" dir="ltr">${JSON.stringify(value)}</span>`;
@@ -446,8 +443,11 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
     </div>`;
     }
     hasFocusedRow() {
+        return this.focusedIndex() !== undefined;
+    }
+    focusedIndex() {
         const focused = this.shadowRoot?.activeElement;
-        return focused?.getAttribute?.('role') === 'row';
+        return focused?.getAttribute?.('role') === 'row' ? Number(focused.dataset.index) : undefined;
     }
     renderCopyButton(row) {
         return staticHtml `<${this.tag('copy-button')}
@@ -457,15 +457,16 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         tooltip-arrow-left: copy-tooltip-arrow-left, tooltip-arrow-right: copy-tooltip-arrow-right,
         tooltip-arrow-top: copy-tooltip-arrow-top, tooltip-bottom: copy-tooltip-bottom,
         tooltip-left: copy-tooltip-left, tooltip-right: copy-tooltip-right, tooltip-top: copy-tooltip-top"
-      label=${row?.key === undefined ? this.copyValueLabel : fillTemplate(this.copyLabel, { name: row.key })}
+      label=${row?.key === undefined ? this.copyValueLabel : formatWords(this, 'copyLabel', { name: row.key })}
       .value=${this.copyable(row)}
     ></${this.tag('copy-button')}>`;
     }
     render() {
         const rows = this.rows;
         const { first, last } = this.windowed ? this.virtualize.window : { first: 0, last: rows.length };
-        const kept = this.windowed && (this.cursor < first || this.cursor >= last) && this.hasFocusedRow()
-            ? this.cursor
+        const focused = this.focusedIndex();
+        const kept = this.windowed && focused !== undefined && (focused < first || focused >= last)
+            ? focused
             : undefined;
         const { after, before } = this.windowed
             ? this.virtualize.spacers(kept)
@@ -475,6 +476,7 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         if (kept !== undefined && keptRow) {
             shown.splice(kept < first ? 0 : shown.length, 0, [keptRow, kept]);
         }
+        const stopless = rows.length > 0 && !shown.some(([, at]) => at === this.cursor);
         return html `${this.label ? html `<div part="header"><span part="label">${this.label}</span></div>` : nothing}${this.filterable
             ? html `<input
             part="search-field"
@@ -494,8 +496,10 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
           id="tree"
           role="treegrid"
           ?data-scroller=${this.windowed}
+          tabindex=${stopless ? '0' : nothing}
           aria-label=${this.label || this.treeLabel}
           @keydown=${this.handleKeydown}
+          @focus=${this.handleTreeFocus}
           @focusin=${this.handleFocusIn}
           @focusout=${this.handleFocusOut}
           @scroll=${() => this.virtualize.measure()}
@@ -513,9 +517,11 @@ __decorate([
     property()
 ], HelixHeadlessObjectInspector.prototype, "active", null);
 __decorate([
+    words,
     property({ attribute: 'copy-label' })
 ], HelixHeadlessObjectInspector.prototype, "copyLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'copy-value-label' })
 ], HelixHeadlessObjectInspector.prototype, "copyValueLabel", void 0);
 __decorate([
@@ -531,6 +537,7 @@ __decorate([
     property({ type: Boolean })
 ], HelixHeadlessObjectInspector.prototype, "filterable", void 0);
 __decorate([
+    words,
     property({ attribute: 'filter-label' })
 ], HelixHeadlessObjectInspector.prototype, "filterLabel", void 0);
 __decorate([
@@ -540,12 +547,14 @@ __decorate([
     property({ attribute: 'item-label' })
 ], HelixHeadlessObjectInspector.prototype, "itemLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'items-label' })
 ], HelixHeadlessObjectInspector.prototype, "itemsLabel", void 0);
 __decorate([
     property({ attribute: 'key-label' })
 ], HelixHeadlessObjectInspector.prototype, "keyLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'keys-label' })
 ], HelixHeadlessObjectInspector.prototype, "keysLabel", void 0);
 __decorate([
@@ -558,9 +567,11 @@ __decorate([
     property({ attribute: 'result-label' })
 ], HelixHeadlessObjectInspector.prototype, "resultLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'results-label' })
 ], HelixHeadlessObjectInspector.prototype, "resultsLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'tree-label' })
 ], HelixHeadlessObjectInspector.prototype, "treeLabel", void 0);
 __decorate([

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

@@ -56,6 +56,11 @@ import { type Branch } from '../levels.js';
  * @csspart nav - The navigation landmark.
  */
 export declare class HelixHeadlessOutline extends HelixElement {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-outline': { label: 'Auf dieser Seite' } })`.
+     */
+    static words: string;
     /**
      * Manual, so each link in a flat run can be put in a list item of its own.
      *

package/dist/outline/root/outline-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, HelixActivateEvent, HelixElement, IndicatorController, plainClick, reflectElements, scrollItemIntoView, scrollingAncestor, } from '@fusion.dev/helix-core';
+import { customElement, elementById, HelixActivateEvent, HelixElement, IndicatorController, plainClick, reflectElements, scrollItemIntoView, scrollingAncestor, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { levelOf, nest } from '../levels.js';
@@ -78,6 +78,7 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
             this.namedByHeading = reflectElements(this.partNamed('nav'), 'ariaLabelledByElements', slot?.assignedElements({ flatten: true }) ?? [], this.namedByHeading);
         };
     }
+    static { this.words = 'helix-outline'; }
     static { this.shadowRootOptions = {
         ...HelixElement.shadowRootOptions,
         slotAssignment: 'manual',
@@ -287,6 +288,7 @@ __decorate([
     property({ type: Boolean })
 ], HelixHeadlessOutline.prototype, "follow", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessOutline.prototype, "label", void 0);
 __decorate([

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

@@ -58,6 +58,11 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @cssstate empty - There is one page or none, so there is nothing to page through.
  */
 export declare class HelixHeadlessPagination extends HelixElement {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-pagination': { nextLabel: 'Nächste Seite' } })`.
+     */
+    static words: string;
     /**
      * How many pages to show at each end, whatever the current one is.
      */
@@ -119,7 +124,8 @@ export declare class HelixHeadlessPagination extends HelixElement {
      */
     lastLabel: string;
     /**
-     * Locale for the page numbers. Absent uses the runtime's own.
+     * The locale the words and the page numbers are in, as a BCP 47 tag such as
+     * `de`. Empty reads the nearest `lang`, then the browser's language.
      *
      * The same property the calendar takes, doing the same job one layer down:
      * the templates make the *words* the consumer's, and this makes the *numbers*

package/dist/pagination/root/pagination-root.js

@@ -4,13 +4,13 @@ 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, deepActiveElement, fillTemplate, formatNumbers, HelixActivateEvent, HelixElement, HelixNavigateEvent, hostAria, requestChange, } from '@fusion.dev/helix-core';
+import { customElement, deepActiveElement, fillTemplate, formatNumbers, formatWords, HelixActivateEvent, HelixElement, HelixNavigateEvent, hostAria, requestChange, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { caretDoubleLeft, caretDoubleRight, caretLeft, caretRight, } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
-const fill = (template, page, pages, format = String) => fillTemplate(template, { page: format(page), pages: format(pages) });
+const fill = (template, page, pages) => fillTemplate(template, { page: String(page), pages: String(pages) });
 let HelixHeadlessPagination = class HelixHeadlessPagination extends HelixElement {
     constructor() {
         super(...arguments);
@@ -47,6 +47,7 @@ let HelixHeadlessPagination = class HelixHeadlessPagination extends HelixElement
             }
         };
     }
+    static { this.words = 'helix-pagination'; }
     get page() {
         const asked = this.pageState ?? this.defaultPage;
         return Math.min(this.count, Math.max(1, Math.floor(asked) || 1));
@@ -57,7 +58,7 @@ let HelixHeadlessPagination = class HelixHeadlessPagination extends HelixElement
         this.requestUpdate('page', previous);
     }
     get numbers() {
-        return formatNumbers(this.locale);
+        return formatNumbers(wordsLocale(this));
     }
     get count() {
         if (this.pages > 0) {
@@ -162,13 +163,13 @@ let HelixHeadlessPagination = class HelixHeadlessPagination extends HelixElement
         }
         if (this.announced !== this.page) {
             this.announced = this.page;
-            this.announcement = fill(this.pageLabel, this.page, this.count, this.numbers);
+            this.announcement = formatWords(this, 'pageLabel', { page: this.page, pages: this.count });
         }
     }
     renderPage(page) {
         const current = page === this.current;
         const shown = this.numbers(page);
-        const name = fill(this.pageLabel, page, this.count, this.numbers);
+        const name = formatWords(this, 'pageLabel', { page, pages: this.count });
         return html `<li part="item">
       ${this.href
             ? html `<a
@@ -192,7 +193,7 @@ let HelixHeadlessPagination = class HelixHeadlessPagination extends HelixElement
     }
     renderGap(hidden) {
         const to = Math.round((hidden.from + hidden.to) / 2);
-        const name = fill(this.gapLabel, to, this.count, this.numbers);
+        const name = formatWords(this, 'gapLabel', { page: to, pages: this.count });
         return html `<li part="item">
       ${this.href
             ? html `<a
@@ -283,7 +284,7 @@ let HelixHeadlessPagination = class HelixHeadlessPagination extends HelixElement
         if (this.compact) {
             return html `${this.ends ? this.renderFirst() : nothing}${this.renderPrevious()}
         <span part="status"
-          >${fill(this.statusLabel, this.current, this.count, this.numbers)}</span
+          >${formatWords(this, 'statusLabel', { page: this.current, pages: this.count })}</span
         >
         ${this.renderNext()}${this.ends ? this.renderLast() : nothing}${this.renderLive()}`;
         }
@@ -314,30 +315,36 @@ __decorate([
     property({ type: Boolean })
 ], HelixHeadlessPagination.prototype, "ends", void 0);
 __decorate([
+    words,
     property({ attribute: 'first-label' })
 ], HelixHeadlessPagination.prototype, "firstLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'gap-label' })
 ], HelixHeadlessPagination.prototype, "gapLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessPagination.prototype, "href", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessPagination.prototype, "label", void 0);
 __decorate([
+    words,
     property({ attribute: 'last-label' })
 ], HelixHeadlessPagination.prototype, "lastLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessPagination.prototype, "locale", void 0);
 __decorate([
+    words,
     property({ attribute: 'next-label' })
 ], HelixHeadlessPagination.prototype, "nextLabel", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessPagination.prototype, "page", null);
 __decorate([
+    words,
     property({ attribute: 'page-label' })
 ], HelixHeadlessPagination.prototype, "pageLabel", void 0);
 __decorate([
@@ -347,12 +354,14 @@ __decorate([
     property({ attribute: 'page-size', type: Number })
 ], HelixHeadlessPagination.prototype, "pageSize", void 0);
 __decorate([
+    words,
     property({ attribute: 'previous-label' })
 ], HelixHeadlessPagination.prototype, "previousLabel", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessPagination.prototype, "siblings", void 0);
 __decorate([
+    words,
     property({ attribute: 'status-label' })
 ], HelixHeadlessPagination.prototype, "statusLabel", void 0);
 __decorate([