@fusion.dev/helix-headless 0.148.0 → 0.149.0

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;

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, pageRows, requestChange, StatusController, scrollItemIntoView, scrollRoom, 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;
@@ -171,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 ?? '';
     }
@@ -239,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) {
@@ -394,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>`;
@@ -463,7 +457,7 @@ 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')}>`;
     }
@@ -523,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([
@@ -541,6 +537,7 @@ __decorate([
     property({ type: Boolean })
 ], HelixHeadlessObjectInspector.prototype, "filterable", void 0);
 __decorate([
+    words,
     property({ attribute: 'filter-label' })
 ], HelixHeadlessObjectInspector.prototype, "filterLabel", void 0);
 __decorate([
@@ -550,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([
@@ -568,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([

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

@@ -80,6 +80,11 @@ import '../../select/index.js';
  * @cssstate empty - While there are no sizes to offer.
  */
 export declare class HelixHeadlessPaginationSize extends HelixFormElement {
+    /**
+     * The key this part's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-pagination-size': { label: 'Pro Seite' } })`.
+     */
+    static words: string;
     /**
      * The size to start on when `value` is not set.
      */
@@ -89,9 +94,8 @@ export declare class HelixHeadlessPaginationSize extends HelixFormElement {
      */
     label: string;
     /**
-     * Locale for the numbers.
-     *
-     * Absent uses the runtime's own.
+     * The locale the words and the numbers are in, as a BCP 47 tag such as
+     * `de`. Empty reads the nearest `lang`, then the browser's language.
      */
     locale: string;
     /**

package/dist/pagination/size/pagination-size.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, formatNumbers, HelixBeforeChangeEvent, HelixFormElement, hostWords, requestChange, } from '@fusion.dev/helix-core';
+import { customElement, formatNumbers, HelixBeforeChangeEvent, HelixFormElement, hostWords, requestChange, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
@@ -47,6 +47,7 @@ let HelixHeadlessPaginationSize = class HelixHeadlessPaginationSize extends Heli
             event.stopPropagation();
         };
     }
+    static { this.words = 'helix-pagination-size'; }
     get value() {
         return this.valueState ?? this.defaultValue;
     }
@@ -56,7 +57,7 @@ let HelixHeadlessPaginationSize = class HelixHeadlessPaginationSize extends Heli
         this.requestUpdate('value', previous);
     }
     get numbers() {
-        return formatNumbers(this.locale);
+        return formatNumbers(wordsLocale(this));
     }
     get options() {
         return this.sizes
@@ -129,6 +130,7 @@ __decorate([
     property({ attribute: 'default-value', type: Number })
 ], HelixHeadlessPaginationSize.prototype, "defaultValue", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessPaginationSize.prototype, "label", void 0);
 __decorate([

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

@@ -21,9 +21,14 @@ import { type TemplateResult } from 'lit';
  * @documentation https://fusion.dev/helix/components/pagination
  */
 export declare class HelixHeadlessPaginationSummary extends HelixElement {
+    /**
+     * The key this part's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-pagination-summary': { format: '{from} bis {to} von {total}' } })`.
+     */
+    static words: string;
     /**
      * The text shown. `{from}`, `{to}`, and `{total}` are replaced with the first
-     * item, the last item, and the item count.
+     * item, the last item, and the item count, written in the locale.
      *
      * A template rather than a prefix and a suffix, because word order is not
      * universal: `format="{total} 件中 {from}-{to} 件"` is one attribute here and
@@ -39,9 +44,8 @@ export declare class HelixHeadlessPaginationSummary extends HelixElement {
      */
     format: string;
     /**
-     * Locale for the numbers.
-     *
-     * Absent uses the runtime's own.
+     * The locale the words and the numbers are in, as a BCP 47 tag such as
+     * `de`. Empty reads the nearest `lang`, then the browser's language.
      */
     locale: string;
     /**
@@ -56,8 +60,6 @@ export declare class HelixHeadlessPaginationSummary extends HelixElement {
      * How many items there are across every page.
      */
     total: number;
-    /** Held across every component asking for the same locale. */
-    private get numbers();
     protected render(): TemplateResult;
 }
 declare global {

package/dist/pagination/summary/pagination-summary.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, formatNumbers, HelixElement } from '@fusion.dev/helix-core';
+import { customElement, formatWords, HelixElement, words } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessPaginationSummary = class HelixHeadlessPaginationSummary extends HelixElement {
@@ -16,9 +16,7 @@ let HelixHeadlessPaginationSummary = class HelixHeadlessPaginationSummary extend
         this.pageSize = 0;
         this.total = 0;
     }
-    get numbers() {
-        return formatNumbers(this.locale);
-    }
+    static { this.words = 'helix-pagination-summary'; }
     render() {
         if (this.total <= 0 || this.pageSize <= 0) {
             return html ``;
@@ -28,14 +26,11 @@ let HelixHeadlessPaginationSummary = class HelixHeadlessPaginationSummary extend
         const page = Math.min(pages, Math.max(1, Math.floor(this.page) || 1));
         const from = (page - 1) * size + 1;
         const to = Math.min(this.total, from + size - 1);
-        return html `${fillTemplate(this.format, {
-            from: this.numbers(from),
-            to: this.numbers(to),
-            total: this.numbers(this.total),
-        })}`;
+        return html `${formatWords(this, 'format', { from, to, total: this.total })}`;
     }
 };
 __decorate([
+    words,
     property()
 ], HelixHeadlessPaginationSummary.prototype, "format", void 0);
 __decorate([

package/dist/pin-input/code.d.ts

@@ -1,4 +1,4 @@
-import { type PickerVerdict } from '@fusion.dev/helix-core';
+import type { PickerVerdict } from '@fusion.dev/helix-core';
 /** What a box accepts, which decides the keyboard a phone offers. */
 export type PinType = 'alphanumeric' | 'numeric' | 'text';
 /** How typed letters are cased: as typed, or turned upper or lower case. */
@@ -36,18 +36,18 @@ export declare const readTyped: (raw: string, caret: number, type: PinType, lett
  * holding two fill from box three.
  */
 export declare const overwriteCode: (code: string, at: number, text: string, count: number) => CodeEdit;
-/** The messages a code's verdict is written with, where the page set its own. */
+/** The messages a code's verdict is written with. */
 export interface CodeMessages {
     /** For a code with no characters in a required field. */
     missing?: string | undefined;
-    /** For a code with fewer characters than boxes; `{length}` is how many. */
-    short?: string | undefined;
+    /** For a code with fewer characters than boxes, written for how many there are. */
+    short: (length: number) => string;
 }
 /**
  * What is wrong with a code, as a picker field reports it: a required field
  * with nothing in it is missing, a code with fewer characters than boxes is
- * too short, and anything else is fine (`''`). The platform's own words where
- * the page set none.
+ * too short, and anything else is fine (`''`). The platform's own words for a
+ * missing code where the page set none.
  */
 export declare const codeVerdict: (code: string, count: number, required: boolean, messages: CodeMessages) => PickerVerdict;
 /**

package/dist/pin-input/code.js

@@ -1,4 +1,3 @@
-import { fillTemplate } from '@fusion.dev/helix-core';
 export const cleanCode = (text, type, letterCase = 'preserve') => {
     const trimmed = text.trim();
     const kept = type === 'numeric'
@@ -29,10 +28,7 @@ export const codeVerdict = (code, count, required, messages) => {
         return ['valueMissing', messages.missing || 'Please fill in this field.'];
     }
     if (code !== '' && code.length < count) {
-        return [
-            'tooShort',
-            fillTemplate(messages.short || 'Please enter all {length} characters.', { length: count }),
-        ];
+        return ['tooShort', messages.short(count)];
     }
     return '';
 };

package/dist/pin-input/root/pin-input-root.d.ts

@@ -84,6 +84,11 @@ declare const HelixHeadlessPinInput_base: (new (...args: any[]) => import("@fusi
  * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
  */
 export declare class HelixHeadlessPinInput extends HelixHeadlessPinInput_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-pin-input': { tooShortMessage: '{length, plural, one {Bitte # Zeichen eingeben.} other {Bitte alle # Zeichen eingeben.}}' } })`.
+     */
+    static words: string;
     protected readonly aria: AriaForwardController;
     /** Typed or pasted, so every edit is announced. See `announcesInput`. */
     protected readonly announcesInput = true;
@@ -144,10 +149,11 @@ export declare class HelixHeadlessPinInput extends HelixHeadlessPinInput_base {
      */
     readOnly: boolean;
     /**
-     * The message shown when the code is started and not finished, with
-     * `{length}` filled in. When it is unset, an English default is shown.
+     * The message shown when the code is started and not finished. `{length}`
+     * is how many characters the code has, written in the locale, and each
+     * language writes the forms it has.
      */
-    tooShortMessage?: string;
+    tooShortMessage: string;
     /**
      * The characters a box accepts, which also sets the keyboard a phone shows.
      *