@fusion.dev/helix-headless 0.148.0 → 0.149.0

package/dist/textarea/root/textarea-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, applyOwnRule, customElement, drawIcon, HelixClearEvent, HelixFormElement, holdCaret, isRtl, MixinControllerValue, MixinField, restoreValue, } from '@fusion.dev/helix-core';
+import { AriaForwardController, applyOwnRule, customElement, drawIcon, HelixClearEvent, HelixFormElement, holdCaret, isRtl, MixinControllerValue, MixinField, restoreValue, words, } from '@fusion.dev/helix-core';
 import { x } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -49,6 +49,7 @@ let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerV
         this.rows = 3;
         this.wrap = 'soft';
     }
+    static { this.words = 'helix-textarea'; }
     static { this.shadowRootOptions = {
         ...HelixFormElement.shadowRootOptions,
         delegatesFocus: true,
@@ -223,6 +224,7 @@ __decorate([
     property({ type: Boolean })
 ], HelixHeadlessTextarea.prototype, "clearable", void 0);
 __decorate([
+    words,
     property({ attribute: 'clear-label' })
 ], HelixHeadlessTextarea.prototype, "clearLabel", void 0);
 __decorate([

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

@@ -116,6 +116,11 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
  * @cssstate open - While the clock is open.
  */
 export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-time-input': { triggerLabel: 'Uhrzeit auswählen' } })`.
+     */
+    static words: string;
     protected readonly aria: AriaForwardController;
     /**
      * What the browser may autofill here, as one of the platform's own tokens.
@@ -147,7 +152,7 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
      * Shoelace and Web Awesome read it, then the runtime's own.
      */
     locale: string;
-    /** The locale the words are written in: `locale`, or the page's `lang`. */
+    /** The locale the words and times are written in: `locale`, or the page's `lang`. */
     private get language();
     /**
      * Latest time that can be chosen, as `HH:mm`.
@@ -174,20 +179,20 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
      * The message shown when a range holds more than two times.
      *
      * **Every sentence a control raises in the browser's bubble is a property**,
-     * so a form in another language speaks it. Absent is the control's own
-     * sentence, in English.
+     * so a form in another language speaks it. Unset is the sentence registered
+     * for the page's language, then the English.
      */
-    rangeLengthMessage?: string;
+    rangeLengthMessage: string;
     /**
      * The message shown when a time is after `max`, with `{max}` filled in as
      * the field displays it.
      */
-    rangeOverflowMessage?: string;
+    rangeOverflowMessage: string;
     /**
      * The message shown when a time is before `min`, with `{min}` filled in as
      * the field displays it.
      */
-    rangeUnderflowMessage?: string;
+    rangeUnderflowMessage: string;
     /**
      * The name of the button that removes one time, with `{name}` filled in.
      *
@@ -223,7 +228,7 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
     /**
      * The message shown when `disable-times` bars a time.
      */
-    unavailableMessage?: string;
+    unavailableMessage: string;
     /** Every time in the value, which may hold more than one. */
     private get held();
     /**
@@ -331,6 +336,8 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
      * consumer gets an inert unknown element and no mark whatsoever.
      */
     protected renderTrigger(): TemplateResult;
+    /** The line of text the times are typed into, where the field shows no segments. */
+    private renderControl;
     protected render(): TemplateResult;
     /**
      * The value as a `Date` on January 1, 1970 UTC, or `null` while there is no

package/dist/time-input/root/time-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, valueAsTime as asTime, clockLocale, customElement, fillTemplate, timeAsValue as fromTime, HelixFormElement, isClockValue, localeOf, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerEditing, MixinPickerField, MixinSegmentedField, MixinTokens, timeFault, writeClock, } from '@fusion.dev/helix-core';
+import { AriaForwardController, valueAsTime as asTime, clockLocale, customElement, formatWords, timeAsValue as fromTime, HelixFormElement, handedLocale, isClockValue, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerEditing, MixinPickerField, MixinSegmentedField, MixinTokens, timeFault, words, wordsLocale, writeClock, } from '@fusion.dev/helix-core';
 import { clock } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -25,11 +25,15 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
         this.max = '23:59';
         this.min = '00:00';
         this.placeholder = 'HH:mm';
+        this.rangeLengthMessage = 'A range is two times.';
+        this.rangeOverflowMessage = 'Choose a time at or before {max}.';
+        this.rangeUnderflowMessage = 'Choose a time at or after {min}.';
         this.removeLabel = 'Remove {name}';
         this.seconds = false;
         this.step = 15;
         this.timeStyle = 'local';
         this.triggerLabel = 'Choose a time';
+        this.unavailableMessage = 'Choose a time that is available.';
         this.draft = '';
         this.handleDraftKey = (event) => {
             if (this.mode !== 'multiple') {
@@ -88,8 +92,9 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
             }
         };
     }
+    static { this.words = 'helix-time-input'; }
     get language() {
-        return localeOf(this, this.locale);
+        return wordsLocale(this);
     }
     get held() {
         return this.value
@@ -157,7 +162,7 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
         if (faults.includes('rangeUnderflow')) {
             return [
                 'rangeUnderflow',
-                fillTemplate(this.rangeUnderflowMessage || 'Choose a time at or after {min}.', {
+                formatWords(this, 'rangeUnderflowMessage', {
                     min: writeClock(this.min, clockLocale(this.language, this.hourCycle), this.seconds),
                 }),
             ];
@@ -165,16 +170,16 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
         if (faults.includes('rangeOverflow')) {
             return [
                 'rangeOverflow',
-                fillTemplate(this.rangeOverflowMessage || 'Choose a time at or before {max}.', {
+                formatWords(this, 'rangeOverflowMessage', {
                     max: writeClock(this.max, clockLocale(this.language, this.hourCycle), this.seconds),
                 }),
             ];
         }
         if (faults.includes('unavailable')) {
-            return this.unavailableMessage || 'Choose a time that is available.';
+            return this.unavailableMessage;
         }
         if (this.mode === 'range' && held.length > 2) {
-            return this.rangeLengthMessage || 'A range is two times.';
+            return this.rangeLengthMessage;
         }
         return '';
     }
@@ -209,7 +214,7 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
       manual
       label=${this.label || 'Time'}
       hour-cycle=${this.hourCycle ?? nothing}
-      locale=${this.language || nothing}
+      locale=${handedLocale(this) || nothing}
       max=${this.max}
       min=${this.min}
       ?seconds=${this.seconds}
@@ -225,7 +230,7 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
                   part="time"
       exportparts="cell: time-cell, dismiss: time-dismiss, dismiss-mark: time-dismiss-mark, label: time-label, link: time-link, start: time-start"
                   dismissible
-                  dismiss-label=${fillTemplate(this.removeLabel, { name: this.written(at) })}
+                  dismiss-label=${formatWords(this, 'removeLabel', { name: this.written(at) })}
                   ?disabled=${this.isDisabled}
                   @helix-dismiss=${(event) => {
             event.stopPropagation();
@@ -239,36 +244,35 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
         ${unsafeSVG(clock.content)}
       </svg></slot>`;
     }
+    renderControl() {
+        return html `<input
+      part="control"
+      id=${this.controlId}
+      type="text"
+      .value=${this.display}
+      name=${this.name || nothing}
+      placeholder=${this.mode === 'multiple' && this.held.length > 0 ? nothing : this.placeholder || nothing}
+      autocomplete=${this.autocomplete || nothing}
+      aria-describedby=${this.describedBy ?? nothing}
+      aria-invalid=${this.invalidity ?? nothing}
+      ?disabled=${this.isDisabled}
+      ?readonly=${this.readOnly}
+      ?required=${this.required}
+      @blur=${this.handleBlur}
+      @change=${this.handleCommit}
+      @focus=${this.handleFocus}
+      @input=${this.handleInput}
+      @keydown=${this.handleDraftKey}
+      @keypress=${this.handleKeypress}
+    />`;
+    }
     render() {
         return html `${this.renderLabel()}
       <div part="field" @keydown=${this.handleKeydown}>
         ${this.mode === 'multiple'
             ? this.renderTokenRow(this.shownTimes.map((at) => this.renderTag(at)), this.restCount)
             : nothing}
-        ${this.segmentsShown
-            ? this.renderSegments()
-            : html `<input
-                part="control"
-                id=${this.controlId}
-                type="text"
-                .value=${this.display}
-                name=${this.name || nothing}
-                placeholder=${this.mode === 'multiple' && this.held.length > 0
-                ? nothing
-                : this.placeholder || nothing}
-                autocomplete=${this.autocomplete || nothing}
-                aria-describedby=${this.describedBy ?? nothing}
-                aria-invalid=${this.invalidity ?? nothing}
-                ?disabled=${this.isDisabled}
-                ?readonly=${this.readOnly}
-                ?required=${this.required}
-                @blur=${this.handleBlur}
-                @change=${this.handleCommit}
-                @focus=${this.handleFocus}
-                @input=${this.handleInput}
-                @keydown=${this.handleDraftKey}
-                @keypress=${this.handleKeypress}
-              />`}
+        ${this.segmentsShown ? this.renderSegments() : this.renderControl()}
         <button
           part="trigger"
           type="button"
@@ -335,18 +339,23 @@ __decorate([
     property({ reflect: true })
 ], HelixHeadlessTimeInput.prototype, "mode", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessTimeInput.prototype, "placeholder", void 0);
 __decorate([
+    words,
     property({ attribute: 'range-length-message' })
 ], HelixHeadlessTimeInput.prototype, "rangeLengthMessage", void 0);
 __decorate([
+    words,
     property({ attribute: 'range-overflow-message' })
 ], HelixHeadlessTimeInput.prototype, "rangeOverflowMessage", void 0);
 __decorate([
+    words,
     property({ attribute: 'range-underflow-message' })
 ], HelixHeadlessTimeInput.prototype, "rangeUnderflowMessage", void 0);
 __decorate([
+    words,
     property({ attribute: 'remove-label' })
 ], HelixHeadlessTimeInput.prototype, "removeLabel", void 0);
 __decorate([
@@ -359,9 +368,11 @@ __decorate([
     property({ attribute: 'time-style' })
 ], HelixHeadlessTimeInput.prototype, "timeStyle", void 0);
 __decorate([
+    words,
     property({ attribute: 'trigger-label' })
 ], HelixHeadlessTimeInput.prototype, "triggerLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'unavailable-message' })
 ], HelixHeadlessTimeInput.prototype, "unavailableMessage", void 0);
 __decorate([

package/dist/time-picker/root/time-picker-root.d.ts

@@ -86,14 +86,22 @@ declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fu
  * @cssstate invalid - While `invalid` is set or `feedback` says what is wrong.
  */
 export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-time-picker': { label: 'Uhrzeit' } })`.
+     */
+    static words: string;
     /**
      * The validation message for a value that is not a time.
      *
      * **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. Absent is the control's own sentence, in English.
+     * speaks it. Unset is the sentence registered for the page's language, then
+     * the English. `{shape}` is how a time is written, `HH:mm` or `HH:mm:ss`, and
+     * `{mode}` is `single`, `range` or `multiple`, so each can have its own
+     * sentence.
      */
-    badInputMessage?: string;
+    badInputMessage: string;
     /**
      * Times that cannot be chosen, as `HH:mm`, separated by commas or spaces.
      *
@@ -193,12 +201,12 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      * The validation message for a time after `max`. `{max}` is replaced with
      * `max`, written in `locale`.
      */
-    rangeOverflowMessage?: string;
+    rangeOverflowMessage: string;
     /**
      * The validation message for a time before `min`. `{min}` is replaced with
      * `min`, written in `locale`.
      */
-    rangeUnderflowMessage?: string;
+    rangeUnderflowMessage: string;
     /**
      * Every time on offer, as seconds since midnight.
      *
@@ -357,15 +365,15 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
     /**
      * The validation message for a time that `step` skips.
      */
-    stepMismatchMessage?: string;
+    stepMismatchMessage: string;
     /**
      * The validation message for a time that `disable-times` bars.
      */
-    unavailableMessage?: string;
+    unavailableMessage: string;
     /**
      * The validation message for a required time picker with no time chosen.
      */
-    valueMissingMessage?: string;
+    valueMissingMessage: string;
     /**
      * What is wrong with a time the picker can read, as a validity flag and a
      * message, or nothing.

package/dist/time-picker/root/time-picker-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 { clockLocale, commaList, customElement, dayPeriod, fillTemplate, HelixFormElement, hostWords, inlineStep, isTwelveHour, localeOf, MixinControllerValue, MixinPickerFeedback, nearestTime, offeredTimes, reportValues, secondsAsValue, timeBarred, timeFault, valueAsSeconds, wheelParts, wholeHour, writeClock, } from '@fusion.dev/helix-core';
+import { clockLocale, commaList, customElement, dayPeriod, formatWords, HelixFormElement, hostWords, inlineStep, isTwelveHour, MixinControllerValue, MixinPickerFeedback, nearestTime, offeredTimes, reportValues, secondsAsValue, timeBarred, timeFault, valueAsSeconds, wheelParts, wholeHour, words, wordsLocale, writeClock, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
@@ -14,12 +14,15 @@ import '../../option/index.js';
 let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerFeedback(MixinControllerValue(HelixFormElement)) {
     constructor() {
         super(...arguments);
+        this.badInputMessage = '{mode, select, single {Enter a time as {shape}.} other {Enter times as {shape}, separated by commas.}}';
         this.disableTimes = '';
         this.label = 'Time';
         this.locale = '';
         this.manual = false;
         this.max = '23:59';
         this.min = '00:00';
+        this.rangeOverflowMessage = 'Choose a time at or before {max}.';
+        this.rangeUnderflowMessage = 'Choose a time at or after {min}.';
         this.handleListInput = (event) => {
             event.stopPropagation();
         };
@@ -76,6 +79,9 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
         this.required = false;
         this.seconds = false;
         this.step = 15;
+        this.stepMismatchMessage = 'Choose one of the times on offer.';
+        this.unavailableMessage = 'Choose a time that is available.';
+        this.valueMissingMessage = 'Choose a time.';
         this.listRevealed = false;
         this.naming = undefined;
         this.handleColumnsKeydown = (event) => {
@@ -93,8 +99,9 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
             next.focus();
         };
     }
+    static { this.words = 'helix-time-picker'; }
     get language() {
-        return localeOf(this, this.locale);
+        return wordsLocale(this);
     }
     get times() {
         return offeredTimes(this.min, this.max, this.step, this.seconds);
@@ -183,21 +190,21 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
             case 'rangeUnderflow':
                 return [
                     'rangeUnderflow',
-                    fillTemplate(this.rangeUnderflowMessage || 'Choose a time at or after {min}.', {
+                    formatWords(this, 'rangeUnderflowMessage', {
                         min: writeClock(this.min, this.clock, this.seconds),
                     }),
                 ];
             case 'rangeOverflow':
                 return [
                     'rangeOverflow',
-                    fillTemplate(this.rangeOverflowMessage || 'Choose a time at or before {max}.', {
+                    formatWords(this, 'rangeOverflowMessage', {
                         max: writeClock(this.max, this.clock, this.seconds),
                     }),
                 ];
             case 'unavailable':
-                return ['badInput', this.unavailableMessage || 'Choose a time that is available.'];
+                return ['badInput', this.unavailableMessage];
             case 'stepMismatch':
-                return ['stepMismatch', this.stepMismatchMessage || 'Choose one of the times on offer.'];
+                return ['stepMismatch', this.stepMismatchMessage];
             default:
                 return undefined;
         }
@@ -205,16 +212,15 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
     reportRequired() {
         const anchor = this.partNamed('list') ?? undefined;
         if (this.required && this.value === '') {
-            this.internals.setValidity({ valueMissing: true }, this.valueMissingMessage || 'Choose a time.', anchor);
+            this.internals.setValidity({ valueMissing: true }, this.valueMissingMessage, anchor);
             return;
         }
         const held = this.held;
         if (held.length > 0 && held.some((one) => valueAsSeconds(one) === null)) {
-            const shape = this.seconds ? 'HH:mm:ss' : 'HH:mm';
-            this.internals.setValidity({ badInput: true }, this.badInputMessage ||
-                (this.mode === undefined
-                    ? `Enter a time as ${shape}.`
-                    : `Enter times as ${shape}, separated by commas.`), anchor);
+            this.internals.setValidity({ badInput: true }, formatWords(this, 'badInputMessage', {
+                mode: this.mode ?? 'single',
+                shape: this.seconds ? 'HH:mm:ss' : 'HH:mm',
+            }), anchor);
             return;
         }
         for (const one of held) {
@@ -385,6 +391,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
     }
 };
 __decorate([
+    words,
     property({ attribute: 'bad-input-message' })
 ], HelixHeadlessTimePicker.prototype, "badInputMessage", void 0);
 __decorate([
@@ -397,6 +404,7 @@ __decorate([
     property({ attribute: 'hour-label' })
 ], HelixHeadlessTimePicker.prototype, "hourLabel", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessTimePicker.prototype, "label", void 0);
 __decorate([
@@ -421,9 +429,11 @@ __decorate([
     property({ reflect: true })
 ], HelixHeadlessTimePicker.prototype, "mode", void 0);
 __decorate([
+    words,
     property({ attribute: 'range-overflow-message' })
 ], HelixHeadlessTimePicker.prototype, "rangeOverflowMessage", void 0);
 __decorate([
+    words,
     property({ attribute: 'range-underflow-message' })
 ], HelixHeadlessTimePicker.prototype, "rangeUnderflowMessage", void 0);
 __decorate([
@@ -442,12 +452,15 @@ __decorate([
     property({ type: Number })
 ], HelixHeadlessTimePicker.prototype, "step", void 0);
 __decorate([
+    words,
     property({ attribute: 'step-mismatch-message' })
 ], HelixHeadlessTimePicker.prototype, "stepMismatchMessage", void 0);
 __decorate([
+    words,
     property({ attribute: 'unavailable-message' })
 ], HelixHeadlessTimePicker.prototype, "unavailableMessage", void 0);
 __decorate([
+    words,
     property({ attribute: 'value-missing-message' })
 ], HelixHeadlessTimePicker.prototype, "valueMissingMessage", void 0);
 __decorate([

package/dist/toast/item/toast-item.d.ts

@@ -59,6 +59,13 @@ declare const HelixHeadlessToastItem_base: (new (...args: any[]) => import("@fus
  * @cssproperty --toast-swipe-x - How far a swipe has moved the message across, in pixels, toward the right.
  */
 export declare class HelixHeadlessToastItem extends HelixHeadlessToastItem_base {
+    /**
+     * The key this part's words are registered under, its styled tag. The close
+     * control's `dismiss-label` comes from a mixin other families share, and
+     * registers as `{ 'helix-toast-item': { dismissLabel: 'Schließen' } }` once
+     * that mixin declares it a word.
+     */
+    static words: string;
     /**
      * How long the message stays, in milliseconds. When it is not set, the
      * message stays until it is dismissed.

package/dist/toast/item/toast-item.js

@@ -59,6 +59,7 @@ let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissib
             });
         };
     }
+    static { this.words = 'helix-toast-item'; }
     get open() {
         return this.openState ?? true;
     }

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

@@ -63,9 +63,17 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @csspart region - The stack the messages are in. It is in the top layer while a message shows, and takes focus from `hotkey` where no message holds a control.
  */
 export declare class HelixHeadlessToast extends HelixElement {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-toast': { label: 'Benachrichtigungen ({hotkey})' } })`.
+     * A message's own words are under `helix-toast-item`.
+     */
+    static words: string;
     /**
      * The key that takes focus to the stack and back, such as `F8` or `Alt+T`:
-     * keys joined by `+`, the last one the key. Empty turns it off.
+     * keys joined by `+`, the last one the key, as `Announcement`'s `hotkey`
+     * reads them: `mod` is Command on Apple devices and Control elsewhere.
+     * Empty turns it off.
      */
     hotkey: string;
     /**

package/dist/toast/root/toast-root.js

@@ -4,10 +4,9 @@ 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 { animationsFinished, customElement, DelayController, deepActiveElement, deepContains, FocusScopeController, fillTemplate, focusableElements, HelixElement, hostAria, scrollHolders, } from '@fusion.dev/helix-core';
+import { animationsFinished, customElement, DelayController, deepActiveElement, deepContains, FocusScopeController, focusableElements, formatWords, HelixElement, hostAria, matchesChord, onApple, scrollHolders, words, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
-import { matchesHotkey, parseHotkey } from '../hotkey.js';
 import { joinSaid, messageWords } from '../words.js';
 let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
     constructor() {
@@ -27,7 +26,7 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
             surface: () => this.region,
         });
         this.handleHotkey = (event) => {
-            if (event.defaultPrevented || !matchesHotkey(event, parseHotkey(this.hotkey))) {
+            if (event.defaultPrevented || !matchesChord(event, this.hotkey, onApple())) {
                 return;
             }
             if (this.scope.holdsFocus) {
@@ -85,10 +84,11 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
             });
         };
     }
+    static { this.words = 'helix-toast'; }
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, {
-            label: fillTemplate(this.label, { hotkey: this.hotkey }),
+            label: formatWords(this, 'label', { hotkey: this.hotkey }),
             role: 'region',
         });
     }
@@ -272,6 +272,7 @@ __decorate([
     property()
 ], HelixHeadlessToast.prototype, "hotkey", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessToast.prototype, "label", void 0);
 __decorate([

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

@@ -76,6 +76,11 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @cssstate vertical - The controls run down a column, under `orientation="vertical"`.
  */
 export declare class HelixHeadlessToolbar extends HelixElement {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-toolbar': { label: 'Werkzeugleiste' } })`.
+     */
+    static words: string;
     /**
      * The toolbar's name, read by screen readers.
      *

package/dist/toolbar/root/toolbar-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 HelixHeadlessToolbar_1;
-import { AriaForwardController, closestInstance, customElement, HelixElement, inlineStep, keyClaimed, toolbarAround, } from '@fusion.dev/helix-core';
+import { AriaForwardController, closestInstance, customElement, HelixElement, inlineStep, keyClaimed, toolbarAround, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 const KEYS = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End']);
@@ -44,7 +44,7 @@ const stopOf = (node) => {
 };
 const flattens = (node) => ownsTabStop(node) &&
     node.selectionMode === 'multiple';
-let HelixHeadlessToolbar = HelixHeadlessToolbar_1 = class HelixHeadlessToolbar extends HelixElement {
+let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
     constructor() {
         super(...arguments);
         this.label = 'Toolbar';
@@ -141,6 +141,8 @@ let HelixHeadlessToolbar = HelixHeadlessToolbar_1 = class HelixHeadlessToolbar e
             }
         };
     }
+    static { HelixHeadlessToolbar_1 = this; }
+    static { this.words = 'helix-toolbar'; }
     get controls() {
         const controls = [];
         for (const child of this.children) {
@@ -281,6 +283,7 @@ let HelixHeadlessToolbar = HelixHeadlessToolbar_1 = class HelixHeadlessToolbar e
     }
 };
 __decorate([
+    words,
     property()
 ], HelixHeadlessToolbar.prototype, "label", void 0);
 __decorate([