@fusion.dev/helix-headless 0.147.0 → 0.149.0

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,23 +4,20 @@ 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, 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"])';
 const navigable = (item) => {
     const control = () => item.navigationControl ??
         (item.matches(FOCUSABLE) ? item : focusableElements(item)[0]);
-    return {
-        contains: (node) => {
+    return focusItemOf(item, {
+        focus: () => control()?.focus(),
+        owns: (node) => {
             const target = control();
             return target !== undefined && node !== null && (node === target || target.contains(node));
         },
-        disabled: false,
-        focusItem: () => control()?.focus(),
-        select: () => { },
-        selected: false,
-    };
+    });
 };
 let HelixHeadlessNavigation = class HelixHeadlessNavigation extends HelixElement {
     constructor() {
@@ -52,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() ?? []);
@@ -89,6 +87,7 @@ __decorate([
     property({ type: Boolean })
 ], HelixHeadlessNavigation.prototype, "arrows", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessNavigation.prototype, "label", void 0);
 __decorate([

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

@@ -1,4 +1,4 @@
-import { HelixElement } from '@fusion.dev/helix-core';
+import { ChildrenController, HelixElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import type { HelixHeadlessNotification } from '../notification/notification.js';
 declare const HelixHeadlessNotificationGroup_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & typeof HelixElement;
@@ -134,6 +134,13 @@ export declare class HelixHeadlessNotificationGroup extends HelixHeadlessNotific
      * is anything behind it. The one row is the evidence.
      */
     private assign;
+    /**
+     * Hears a row arrive after the render. The slot is assigned by hand, so a
+     * new row is in no slot and sends no `slotchange` to say it came. The feed
+     * the group is in is asked to update as well, since it counts the group's
+     * rows and does not watch inside the group.
+     */
+    protected readonly childWatch: ChildrenController;
     private readonly handleToggle;
     protected render(): TemplateResult;
 }

package/dist/notifications/group/notification-group.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, hostAria, MixinControllerOpen } from '@fusion.dev/helix-core';
+import { assignSlots, ChildrenController, customElement, HelixElement, hostAria, MixinControllerOpen, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 const TRIGGER_ID = 'trigger';
@@ -16,6 +16,10 @@ let HelixHeadlessNotificationGroup = class HelixHeadlessNotificationGroup extend
         this.collapsible = false;
         this.label = '';
         this.isNotificationGroup = true;
+        this.childWatch = new ChildrenController(this, () => {
+            this.requestUpdate();
+            this.parentElement?.requestUpdate?.();
+        });
         this.handleToggle = () => {
             this.toggleOpen();
         };
@@ -58,11 +62,13 @@ let HelixHeadlessNotificationGroup = class HelixHeadlessNotificationGroup extend
             }
             return;
         }
-        slot.assign(...showing);
-        const action = this.renderRoot?.querySelector?.('slot[name="actions"]');
-        action?.assign?.(...[...this.children].filter((child) => child.getAttribute('slot') === 'actions'));
-        const label = this.renderRoot?.querySelector?.('slot[name="label"]');
-        label?.assign?.(...[...this.children].filter((child) => child.getAttribute('slot') === 'label'));
+        assignSlots(this.renderRoot, this.children, (child) => {
+            const row = child;
+            if (showing.includes(row)) {
+                return '';
+            }
+            return items.includes(row) || !child.hasAttribute('slot') ? 'folded' : undefined;
+        });
     }
     render() {
         const counted = this.counted;

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

@@ -53,6 +53,16 @@ declare const HelixHeadlessNotification_base: (new (...args: any[]) => import("@
  * @csspart label - What happened, on the first line.
  * @csspart media - The leading slot's box.
  * @csspart time - When it happened, formatted for people to read.
+ * @csspart time-day - Format Date's `day`, forwarded for a time drawn as fields. An elapsed time draws none.
+ * @csspart time-day-period - Format Date's `day-period`, forwarded for a time drawn as fields. An elapsed time draws none.
+ * @csspart time-era - Format Date's `era`, forwarded for a time drawn as fields. An elapsed time draws none.
+ * @csspart time-hour - Format Date's `hour`, forwarded for a time drawn as fields. An elapsed time draws none.
+ * @csspart time-minute - Format Date's `minute`, forwarded for a time drawn as fields. An elapsed time draws none.
+ * @csspart time-month - Format Date's `month`, forwarded for a time drawn as fields. An elapsed time draws none.
+ * @csspart time-second - Format Date's `second`, forwarded for a time drawn as fields. An elapsed time draws none.
+ * @csspart time-time-zone-name - Format Date's `time-zone-name`, forwarded for a time drawn as fields. An elapsed time draws none.
+ * @csspart time-weekday - Format Date's `weekday`, forwarded for a time drawn as fields. An elapsed time draws none.
+ * @csspart time-year - Format Date's `year`, forwarded for a time drawn as fields. An elapsed time draws none.
  * @csspart trailing - The column holding the time and the controls.
  *
  * @cssstate actions - While the actions slot holds something, so the words above make room for it.
@@ -60,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.
      *
@@ -210,7 +225,8 @@ export declare class HelixHeadlessNotification extends HelixHeadlessNotification
      * already named for its role: the child publishes `time`, the role here is
      * `time`, and naming both would leave `::part(time)` matching two elements.
      * What a consumer wants to reach is the `<time>`, so that is what the name
-     * reaches.
+     * reaches. Format Date's field parts go on under `time-`, as every composed
+     * child's do, though an elapsed time draws no fields.
      */
     private renderTime;
     protected render(): TemplateResult;

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;
     }
@@ -103,7 +104,9 @@ let HelixHeadlessNotification = class HelixHeadlessNotification extends MixinDis
     renderTime() {
         const stamp = this.tag('format-date');
         return html `<${stamp}
-      exportparts="time"
+      exportparts="time, day: time-day, day-period: time-day-period, era: time-era, hour: time-hour,
+        minute: time-minute, month: time-month, second: time-second,
+        time-zone-name: time-time-zone-name, weekday: time-weekday, year: time-year"
       elapsed
       date=${this.at}
       locale=${this.locale}
@@ -175,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

@@ -1,4 +1,4 @@
-import { HelixElement } from '@fusion.dev/helix-core';
+import { ChildrenController, HelixElement } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import type { HelixHeadlessNotificationGroup } from '../group/notification-group.js';
 import type { HelixHeadlessNotification } from '../notification/notification.js';
@@ -35,6 +35,11 @@ declare const HelixHeadlessNotifications_base: (new (...args: any[]) => import("
  * nothing more. While the feed is loading the button stays, so focus stays on
  * it, and it is `aria-disabled` and sends nothing.
  *
+ * **`load-error` says a page could not be fetched**, such as "Could not load
+ * notifications": it shows under the rows there are, in the `error` part, in
+ * place of the empty and loading lines, and a screen reader hears it. Clear it
+ * when you ask again.
+ *
  * @since 0.1.0
  * @status stable
  * @category feedback
@@ -43,6 +48,7 @@ declare const HelixHeadlessNotifications_base: (new (...args: any[]) => import("
  *
  * @slot - The notifications.
  * @slot empty - Replaces the words of `empty-text` in the `empty` part, such as a picture and a line of your own. The live region still says `empty-text`.
+ * @slot error - Replaces the words of `load-error` in the `error` part, such as a line with a retry button. The live region still says `load-error`.
  * @slot footer - Below the list, for a link to everything.
  * @slot header - Above the list, for a title and the mark-all control.
  * @slot loading - Replaces the words of `loading-text` in the `loading` part, such as a loader. The live region still says `loading-text`.
@@ -52,15 +58,17 @@ declare const HelixHeadlessNotifications_base: (new (...args: any[]) => import("
  * @event {HelixReadEvent} helix-read - Fired by an item when it is marked read or unread, and by the feed when everything is marked read. Cancelable.
  *
  * @csspart empty - Shown when there is nothing in the feed.
+ * @csspart error - Shown while `load-error` is set, under any rows there are, in place of the empty and loading lines.
  * @csspart footer - The region below the list.
  * @csspart header - The region above the list.
  * @csspart list - The list itself.
- * @csspart live - A copy of the empty and loading messages, in a live region that screen readers announce when they change. Visually hidden in the styled tier.
+ * @csspart live - A copy of the empty, loading and error messages, in a live region that screen readers announce when they change. Visually hidden in the styled tier.
  * @csspart loading - Shown while the feed is loading.
  * @csspart mark-all - The control that marks everything read.
  * @csspart more - The button after the list that asks for more, while `load-more` is set. It is `aria-disabled` while the feed is loading.
  *
- * @cssstate empty - While the feed holds no notification and is not loading. Never on the server, which cannot count the rows.
+ * @cssstate empty - While the feed holds no notification and is not loading, and `load-error` is not set. Never on the server, which cannot count the rows.
+ * @cssstate error - While `load-error` is set.
  * @cssstate loading - While `loading` is set.
  * @cssstate media - While a notification in the list holds something in its media slot, so every row keeps that column.
  */
@@ -75,10 +83,27 @@ 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.
      */
     label: string;
+    /**
+     * What the feed says when a page of it could not be loaded, such as after a
+     * request to a server fails. Empty, null or no attribute is no error, so
+     * removing the attribute clears it.
+     *
+     * Set, it shows under the rows there are, in place of `empty-text` and
+     * `loading-text`, and a screen reader hears it. Clear it when you ask again.
+     */
+    loadError: string | null;
     /**
      * Whether to draw a button after the list that asks for the next page, by
      * sending `helix-load-more`. Take it off once there is nothing more.
@@ -186,6 +211,13 @@ export declare class HelixHeadlessNotifications extends HelixHeadlessNotificatio
     markEveryoneRead(): number;
     /** Items arrive from the light DOM, which changes no property here. */
     private readonly handleSlotChange;
+    /**
+     * Hears a row arrive after the render. The list slot is assigned by hand, so
+     * a new row is in no slot and sends no `slotchange`: without this it was
+     * drawn nowhere and an emptied feed kept saying it was empty. A row added to
+     * a group is the group's to hear, and the group asks the feed to count again.
+     */
+    protected readonly childWatch: ChildrenController;
     /**
      * An item's own read event, heard on the way past, so the count follows.
      *
@@ -225,10 +257,22 @@ export declare class HelixHeadlessNotifications extends HelixHeadlessNotificatio
     disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues): void;
     /**
-     * The empty or the loading line, each around a slot of the same name whose
-     * fallback is the words, so a page can put its own in.
+     * The error, the empty or the loading line, each around a slot of the same
+     * name whose fallback is the words, so a page can put its own in. The error
+     * shows under the rows there are, since a page that failed is news even to
+     * a feed that holds some.
      */
     protected renderStatus(hasContent: boolean): TemplateResult | typeof nothing;
+    /**
+     * The error before the shared words, which it wins over.
+     *
+     * **One region whose words change**, as the shared one is. The error was a
+     * second template, so setting it put a new region in the tree with its
+     * words already in it, which a reader may not hear.
+     */
+    protected renderLive(hasContent: boolean): TemplateResult;
+    /** Whether `load-error` holds words, which a removed attribute does not. */
+    private get failed();
     /**
      * Says whether anything in the feed has media, so every item can hold the
      * column open whether or not it has one of its own.

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

@@ -4,14 +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, 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;
         this.loadMoreLabel = 'Load more';
         this.markAll = false;
@@ -20,6 +22,7 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
             this.assign();
             this.requestUpdate();
         };
+        this.childWatch = new ChildrenController(this, this.handleSlotChange);
         this.handleRead = () => {
             queueMicrotask(() => this.requestUpdate());
         };
@@ -81,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;
     }
@@ -138,11 +142,8 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
             }
             return;
         }
-        list.assign(...this.rows);
-        for (const name of ['header', 'footer', 'empty', 'loading']) {
-            const slot = root?.querySelector?.(`slot[name="${name}"]`);
-            slot?.assign?.(...[...this.children].filter((child) => child.getAttribute('slot') === name));
-        }
+        const rows = this.rows;
+        assignSlots(root, this.children, (child) => rows.includes(child) ? 'items' : child.getAttribute('slot') === 'items' ? '' : undefined);
     }
     get reachable() {
         return this.items.filter((row) => !('assignedSlot' in row) || row.assignedSlot !== null);
@@ -177,11 +178,16 @@ 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);
-        this.toggleState('empty', !this.loading && this.childrenKnown && this.items.length === 0);
+        this.toggleState('empty', !this.loading && !failed && this.childrenKnown && this.items.length === 0);
     }
     renderStatus(hasContent) {
+        if (this.failed) {
+            return html `<p part="error"><slot name="error">${this.loadError}</slot></p>`;
+        }
         if (!this.loading && hasContent) {
             return nothing;
         }
@@ -189,6 +195,19 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
             ? html `<p part="loading"><slot name="loading">${this.loadingText}</slot></p>`
             : html `<p part="empty"><slot name="empty">${this.emptyText}</slot></p>`;
     }
+    renderLive(hasContent) {
+        const said = this.failed
+            ? this.loadError
+            : this.loading
+                ? this.loadingText
+                : hasContent
+                    ? this.announced
+                    : this.emptyText;
+        return html `<span part="live" role="status">${said}</span>`;
+    }
+    get failed() {
+        return Boolean(this.loadError);
+    }
     markMedia() {
         this.toggleState('media', this.items.some((item) => item.querySelector(':scope > [slot="media"]') !== null));
     }
@@ -245,19 +264,28 @@ 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);
+__decorate([
+    property({ attribute: 'load-error' })
+], HelixHeadlessNotifications.prototype, "loadError", void 0);
 __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;
     /**