@fusion.dev/helix-headless 0.148.0 → 0.149.0

package/dist/map/route/map-route.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, HelixElement, HelixMapPartChangeEvent } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, HelixMapPartChangeEvent, words } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 export const pointsOf = (value) => (value ?? '')
@@ -24,6 +24,7 @@ let HelixHeadlessMapRoute = class HelixHeadlessMapRoute extends HelixElement {
         this.layerKind = 'route';
         this.label = 'Route';
     }
+    static { this.words = 'helix-map-route'; }
     updated(changed) {
         super.updated(changed);
         this.dispatchEvent(new HelixMapPartChangeEvent({ kind: 'layer' }));
@@ -39,6 +40,7 @@ __decorate([
     property()
 ], HelixHeadlessMapRoute.prototype, "group", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessMapRoute.prototype, "label", void 0);
 __decorate([

package/dist/map/terrain/map-terrain.d.ts

@@ -28,6 +28,11 @@ export type MapTerrainEncoding = 'mapbox' | 'terrarium';
  * @event {HelixMapPartChangeEvent} helix-map-part-change - The tiles, how the ground is raised, or the layer's name or colors changed. Used by `connectMap`; pages do not need to listen for it.
  */
 export declare class HelixHeadlessMapTerrain extends HelixElement {
+    /**
+     * The key this part's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-map-terrain': { label: 'Gelände' } })`.
+     */
+    static words: string;
     /** The elevation provider's credit, shown in the frame's footer. Links in it stay links. */
     attribution?: string;
     /** More about the terrain. Read after the label in the frame's list. */

package/dist/map/terrain/map-terrain.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, HelixElement, HelixMapPartChangeEvent } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, HelixMapPartChangeEvent, words } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessMapTerrain = class HelixHeadlessMapTerrain extends HelixElement {
@@ -17,6 +17,7 @@ let HelixHeadlessMapTerrain = class HelixHeadlessMapTerrain extends HelixElement
         this.label = 'Terrain';
         this.raised = false;
     }
+    static { this.words = 'helix-map-terrain'; }
     updated(changed) {
         super.updated(changed);
         this.dispatchEvent(new HelixMapPartChangeEvent({ kind: 'layer' }));
@@ -41,6 +42,7 @@ __decorate([
     property()
 ], HelixHeadlessMapTerrain.prototype, "group", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessMapTerrain.prototype, "label", void 0);
 __decorate([

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

@@ -80,6 +80,11 @@ declare const HelixHeadlessMenu_base: (new (...args: any[]) => import("@fusion.d
  * @cssstate start - A row on the current page has content in its leading column, so every row keeps that column.
  */
 export declare class HelixHeadlessMenu extends HelixHeadlessMenu_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-menu': { backLabel: 'Zurück' } })`.
+     */
+    static words: string;
     /**
      * The text of the row that returns from a submenu.
      */

package/dist/menu/root/menu-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, anchorElement, customElement, DrilldownController, deepActiveElement, deepContains, HelixElement, inlineStep, KeyboardNavigationController, MixinCollection, MixinControllerOpen, PopoverController, scrollItemIntoView, slottedWords, tellDisclosure, typeaheadBy, } from '@fusion.dev/helix-core';
+import { AriaForwardController, anchorElement, customElement, DrilldownController, deepActiveElement, deepContains, HelixElement, inlineStep, KeyboardNavigationController, MixinCollection, MixinControllerOpen, PopoverController, scrollItemIntoView, slottedWords, tellDisclosure, typeaheadBy, words, } from '@fusion.dev/helix-core';
 import { caretLeft } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -132,6 +132,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
             }
         };
     }
+    static { this.words = 'helix-menu'; }
     tellTrigger() {
         const slot = this.renderRoot?.querySelector('slot[name="trigger"]');
         tellDisclosure(slot?.assignedElements({ flatten: true })[0], this.open, 'menu');
@@ -302,6 +303,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
     }
 };
 __decorate([
+    words,
     property({ attribute: 'back-label' })
 ], HelixHeadlessMenu.prototype, "backLabel", void 0);
 __decorate([

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

@@ -59,6 +59,11 @@ export type MeterBand = 'fair' | 'good' | 'poor';
  * @cssstate under - The value is below `min`.
  */
 export declare class HelixHeadlessMeter extends HelixElement {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-meter': { label: 'Messwert' } })`.
+     */
+    static words: string;
     /**
      * Sets the band directly, for a rule that `low`, `high`, and `optimum` cannot
      * express.
@@ -93,7 +98,9 @@ export declare class HelixHeadlessMeter extends HelixElement {
      * The words each band is said with under `live`, by its name, written as
      * JSON in the attribute: `band-labels='{"poor":"Almost full"}'`.
      *
-     * A band left out keeps its default: "Good", "Fair" or "Poor".
+     * A band left out keeps its default: "Good", "Fair" or "Poor". Reading the
+     * property gives every band's words, yours over the registry's over the
+     * English.
      */
     bandLabels: Partial<Record<MeterBand, string>>;
     /**
@@ -134,9 +141,15 @@ export declare class HelixHeadlessMeter extends HelixElement {
      */
     live: boolean;
     /**
-     * The locale the percentage is written in, such as `fr` for `72 %`.
+     * What `live` says as the reading moves into another band. `{reading}` is
+     * the reading as it is shown, and `{band}` the band's words from
+     * `band-labels`.
+     */
+    liveLabel: string;
+    /**
+     * The locale the words and the percentage are in, such as `fr` for `72 %`.
      *
-     * Absent uses the runtime's own.
+     * Absent reads the nearest `lang`, then the runtime's own.
      */
     locale: string;
     /**

package/dist/meter/root/meter-root.js

@@ -4,16 +4,16 @@ 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, HelixBandEvent, HelixElement, hostAria, readingText, StatusController, slottedWords, wordsConverter, } from '@fusion.dev/helix-core';
+import { customElement, drawStatus, formatWords, HelixBandEvent, HelixElement, hostAria, readingText, StatusController, slottedWords, words, wordsConverter, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
-const BAND_WORDS = { fair: 'Fair', good: 'Good', poor: 'Poor' };
 let HelixHeadlessMeter = class HelixHeadlessMeter extends HelixElement {
     constructor() {
         super(...arguments);
-        this.bandLabels = {};
+        this.bandLabels = { fair: 'Fair', good: 'Good', poor: 'Poor' };
         this.label = 'Meter';
         this.live = false;
+        this.liveLabel = '{reading}, {band}';
         this.locale = '';
         this.max = 100;
         this.min = 0;
@@ -25,6 +25,7 @@ let HelixHeadlessMeter = class HelixHeadlessMeter extends HelixElement {
             this.requestUpdate();
         };
     }
+    static { this.words = 'helix-meter'; }
     get span() {
         const min = Number.isFinite(this.min) ? this.min : 0;
         const max = Number.isFinite(this.max) && this.max > min ? this.max : min + 1;
@@ -73,7 +74,7 @@ let HelixHeadlessMeter = class HelixHeadlessMeter extends HelixElement {
     }
     get text() {
         return (this.valueText ||
-            readingText(Number.isFinite(this.value) ? this.value : this.span.min, this.ratio, this.locale, this.formatOptions));
+            readingText(Number.isFinite(this.value) ? this.value : this.span.min, this.ratio, wordsLocale(this), this.formatOptions));
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -102,7 +103,7 @@ let HelixHeadlessMeter = class HelixHeadlessMeter extends HelixElement {
         }
         this.dispatchEvent(new HelixBandEvent({ band: band ?? '' }));
         if (band && this.live) {
-            this.status.say(`${this.text}, ${this.bandLabels[band] ?? BAND_WORDS[band]}`);
+            this.status.say(formatWords(this, 'liveLabel', { band: this.bandLabels[band] ?? '', reading: this.text }));
         }
     }
     renderRound() {
@@ -158,6 +159,7 @@ __decorate([
     property()
 ], HelixHeadlessMeter.prototype, "band", void 0);
 __decorate([
+    words,
     property({ attribute: 'band-labels', converter: wordsConverter })
 ], HelixHeadlessMeter.prototype, "bandLabels", void 0);
 __decorate([
@@ -167,11 +169,16 @@ __decorate([
     property({ type: Number })
 ], HelixHeadlessMeter.prototype, "high", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessMeter.prototype, "label", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessMeter.prototype, "live", void 0);
+__decorate([
+    words,
+    property({ attribute: 'live-label' })
+], HelixHeadlessMeter.prototype, "liveLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessMeter.prototype, "locale", void 0);

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

@@ -42,6 +42,11 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @csspart nav - The navigation landmark.
  */
 export declare class HelixHeadlessNavigation extends HelixElement {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-navigation': { label: 'Hauptmenü' } })`.
+     */
+    static words: string;
     private readonly indicator;
     /**
      * Whether the arrow keys move focus between the destinations.

package/dist/navigation/root/navigation-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, focusableElements, focusItemOf, HelixElement, IndicatorController, KeyboardNavigationController, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, focusableElements, focusItemOf, HelixElement, IndicatorController, KeyboardNavigationController, words, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 const FOCUSABLE = 'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])';
@@ -49,6 +49,7 @@ let HelixHeadlessNavigation = class HelixHeadlessNavigation extends HelixElement
             target: () => this.partNamed('nav'),
         });
     }
+    static { this.words = 'helix-navigation'; }
     get items() {
         const slot = this.renderRoot.querySelector('slot:not([name])');
         return (slot?.assignedElements() ?? []);
@@ -86,6 +87,7 @@ __decorate([
     property({ type: Boolean })
 ], HelixHeadlessNavigation.prototype, "arrows", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessNavigation.prototype, "label", void 0);
 __decorate([

package/dist/notifications/notification/notification.d.ts

@@ -70,6 +70,11 @@ declare const HelixHeadlessNotification_base: (new (...args: any[]) => import("@
  * @cssstate read - While it has been read.
  */
 export declare class HelixHeadlessNotification extends HelixHeadlessNotification_base {
+    /**
+     * The key this part's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-notification': { unreadLabel: 'Ungelesen' } })`.
+     */
+    static words: string;
     /**
      * When it happened, as anything `Date` parses.
      *

package/dist/notifications/notification/notification.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, deepActiveElement, deepContains, focusableElements, HelixElement, HelixReadEvent, hostAria, MixinDismissible, requestChange, slotFilled, } from '@fusion.dev/helix-core';
+import { customElement, deepActiveElement, deepContains, focusableElements, HelixElement, HelixReadEvent, hostAria, MixinDismissible, requestChange, slotFilled, words, } from '@fusion.dev/helix-core';
 import { x } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -35,6 +35,7 @@ let HelixHeadlessNotification = class HelixHeadlessNotification extends MixinDis
             }
         };
     }
+    static { this.words = 'helix-notification'; }
     get read() {
         return this.readState ?? this.defaultRead;
     }
@@ -177,6 +178,7 @@ __decorate([
     property({ attribute: false })
 ], HelixHeadlessNotification.prototype, "stop", void 0);
 __decorate([
+    words,
     property({ attribute: 'unread-label' })
 ], HelixHeadlessNotification.prototype, "unreadLabel", void 0);
 HelixHeadlessNotification = __decorate([

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

@@ -83,6 +83,14 @@ export declare class HelixHeadlessNotifications extends HelixHeadlessNotificatio
      * and does not patch up.
      */
     static shadowRootOptions: ShadowRootInit;
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-notifications': { markAllLabel: 'Alle als gelesen markieren' } })`.
+     * A notification's own words are under `helix-notification`.
+     */
+    static words: string;
+    /** The region's name where `label` is empty. */
+    fallbackLabel: string;
     /**
      * The feed's name, read by screen readers.
      */

package/dist/notifications/root/notifications-root.js

@@ -4,13 +4,14 @@ 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 { assignSlots, ChildrenController, customElement, deepContains, focusableElements, HelixElement, HelixLoadMoreEvent, HelixReadEvent, hostAria, MixinCollection, markRegion, rovingStop, whenHydrated, } from '@fusion.dev/helix-core';
+import { assignSlots, ChildrenController, customElement, deepContains, focusableElements, HelixElement, HelixLoadMoreEvent, HelixReadEvent, hostAria, MixinCollection, markRegion, rovingStop, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { feedStep } from '../feed-keys.js';
 let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinCollection(HelixElement) {
     constructor() {
         super(...arguments);
+        this.fallbackLabel = 'Notifications';
         this.label = '';
         this.loadError = '';
         this.loadMore = false;
@@ -83,6 +84,7 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
         ...HelixElement.shadowRootOptions,
         slotAssignment: 'manual',
     }; }
+    static { this.words = 'helix-notifications'; }
     get unread() {
         return this.items.filter((item) => !item.read).length;
     }
@@ -176,7 +178,7 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
     }
     willUpdate(changed) {
         super.willUpdate(changed);
-        hostAria(this.internals, { label: this.label || 'Notifications', role: 'region' });
+        hostAria(this.internals, { label: this.label || this.fallbackLabel, role: 'region' });
         const failed = this.failed;
         this.toggleState('error', failed);
         this.toggleState('loading', this.loading);
@@ -262,6 +264,10 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
       <div part="footer"><slot name="footer"></slot></div>`;
     }
 };
+__decorate([
+    words,
+    property({ attribute: 'fallback-label' })
+], HelixHeadlessNotifications.prototype, "fallbackLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessNotifications.prototype, "label", void 0);
@@ -272,12 +278,14 @@ __decorate([
     property({ attribute: 'load-more', type: Boolean })
 ], HelixHeadlessNotifications.prototype, "loadMore", void 0);
 __decorate([
+    words,
     property({ attribute: 'load-more-label' })
 ], HelixHeadlessNotifications.prototype, "loadMoreLabel", void 0);
 __decorate([
     property({ attribute: 'mark-all', type: Boolean })
 ], HelixHeadlessNotifications.prototype, "markAll", void 0);
 __decorate([
+    words,
     property({ attribute: 'mark-all-label' })
 ], HelixHeadlessNotifications.prototype, "markAllLabel", void 0);
 __decorate([

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

@@ -80,6 +80,11 @@ declare const HelixHeadlessNumberInput_base: (new (...args: any[]) => import("@f
  * @cssstate scrubbing - The label is being dragged to change the value, under `scrub`, as Zag's scrubber says while it is held.
  */
 export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-number-input': { incrementLabel: 'Erhöhen' } })`.
+     */
+    static words: string;
     protected readonly aria: AriaForwardController;
     /** Typed or dragged, so every edit is announced. See `announcesInput`. */
     protected readonly announcesInput = true;
@@ -99,9 +104,10 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
      * **Every sentence a control raises in the browser's bubble is a property**,
      * named for the validity flag it reports, so a form in another language
      * speaks it: `feedback` replaces the message under the field and does not
-     * reach the bubble. Absent is the control's own sentence, in English.
+     * reach the bubble. Unset is the sentence registered for the page's
+     * language, then the English.
      */
-    badInputMessage?: string;
+    badInputMessage: string;
     /**
      * The name of the step down button, read by screen readers.
      */
@@ -157,14 +163,14 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
     placeholder: string;
     /**
      * The message the browser shows when the number is above `max`, with `{max}`
-     * filled in.
+     * filled in, written in the locale.
      */
-    rangeOverflowMessage?: string;
+    rangeOverflowMessage: string;
     /**
      * The message the browser shows when the number is below `min`, with `{min}`
-     * filled in.
+     * filled in, written in the locale.
      */
-    rangeUnderflowMessage?: string;
+    rangeUnderflowMessage: string;
     /**
      * Prevents editing. The value is still submitted with the form.
      */
@@ -193,9 +199,10 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
     step?: number;
     /**
      * The message the browser shows when the number is off the step grid, with
-     * `{below}` and `{above}` filled in with the nearest valid values.
+     * `{below}` and `{above}` filled in with the nearest valid values, written in
+     * the locale.
      */
-    stepMismatchMessage?: string;
+    stepMismatchMessage: string;
     /**
      * What a screen reader says for the value, with `{value}` filled in, such as
      * `{value} kilograms`.
@@ -238,6 +245,12 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
      * otherwise the smallest amount the format shows, or whole numbers.
      */
     private get grid();
+    /**
+     * A number as a message writes it: in the locale the words are in, every
+     * digit kept and no grouping, which in English is the number as it was
+     * always written.
+     */
+    private written;
     /** Whether `value` is on the step grid, counted from `min`. */
     private onStep;
     /**

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([