@fusion.dev/helix-headless 0.148.0 → 0.149.0

package/dist/date-picker/root/date-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 { addDays, addMonths, valueAsDate as asDate, barredBy, customElement, fillTemplate, dateAsValue as fromDate, HelixFormElement, HelixNavigateEvent, hostAria, inlineStep, commaList as list, localeOf, localToday, MixinControllerValue, MixinPickerFeedback, monthOf, monthOut, periodCells, periodKey, reportValues, requestChange, sameMonth, weekStartOf, YEARS_SHOWN, yearOut, yearPageOf, } from '@fusion.dev/helix-core';
+import { addDays, addMonths, valueAsDate as asDate, barredBy, calendarLocale, customElement, formatWords, dateAsValue as fromDate, HelixFormElement, HelixNavigateEvent, handedLocale, hostAria, inlineStep, commaList as list, localToday, MixinControllerValue, MixinPickerFeedback, monthOf, monthOut, periodCells, periodKey, reportValues, requestChange, sameMonth, weekStartOf, words, wordsLocale, YEARS_SHOWN, yearOut, yearPageOf, } from '@fusion.dev/helix-core';
 import { caretLeft, caretRight } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -25,6 +25,7 @@ const firstOf = (year, month) => addMonths(asDate('2000-01-01'), (year - 2000) *
 let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerFeedback(MixinControllerValue(HelixFormElement)) {
     constructor() {
         super(...arguments);
+        this.badInputMessage = '{mode, select, single {Enter a date as YYYY-MM-DD.} other {Enter dates as YYYY-MM-DD, separated by commas.}}';
         this.defaultMonth = '';
         this.disableDates = '';
         this.disableDays = '';
@@ -41,6 +42,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         this.previousLabel = 'Previous month';
         this.previousYearLabel = 'Previous year';
         this.previousYearsLabel = 'Earlier years';
+        this.rangeOverflowMessage = 'Choose a date on or before {max}.';
         this.focused = '';
         this.choosing = false;
         this.handleKeydown = (event) => {
@@ -98,14 +100,19 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
                 this.zoom('year');
             }
         };
+        this.rangeUnderflowMessage = 'Choose a date on or after {min}.';
         this.readOnly = false;
         this.required = false;
         this.step = 1;
+        this.stepMismatchMessage = 'Choose one of the dates the calendar offers.';
+        this.unavailableMessage = 'Choose a date that is available.';
+        this.valueMissingMessage = 'Choose a date.';
         this.view = 'day';
         this.yearViewLabel = '{heading}. Choose a year';
     }
+    static { this.words = 'helix-date-picker'; }
     get language() {
-        return localeOf(this, this.locale);
+        return wordsLocale(this);
     }
     get month() {
         return this.monthState ?? (this.defaultMonth || fromDate(this.derivedMonth).slice(0, 7));
@@ -122,8 +129,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         if (this.firstDayOfWeek !== undefined && Number.isFinite(this.firstDayOfWeek)) {
             return ((Math.floor(this.firstDayOfWeek) % 7) + 7) % 7;
         }
-        const language = this.language;
-        return language === '' ? 0 : weekStartOf(language);
+        return handedLocale(this) === '' ? 0 : weekStartOf(this.language);
     }
     get range() {
         const dates = this.selected;
@@ -363,17 +369,13 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         if (this.min !== '' && iso < this.min) {
             return [
                 'rangeUnderflow',
-                fillTemplate(this.rangeUnderflowMessage || 'Choose a date on or after {min}.', {
-                    min: this.spoken(this.min),
-                }),
+                formatWords(this, 'rangeUnderflowMessage', { min: this.spoken(this.min) }),
             ];
         }
         if (this.max !== '' && iso > this.max) {
             return [
                 'rangeOverflow',
-                fillTemplate(this.rangeOverflowMessage || 'Choose a date on or before {max}.', {
-                    max: this.spoken(this.max),
-                }),
+                formatWords(this, 'rangeOverflowMessage', { max: this.spoken(this.max) }),
             ];
         }
         const date = asDate(iso);
@@ -382,21 +384,18 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
             return undefined;
         }
         return why === 'listed'
-            ? ['badInput', this.unavailableMessage || 'Choose a date that is available.']
-            : ['stepMismatch', this.stepMismatchMessage || 'Choose one of the dates the calendar offers.'];
+            ? ['badInput', this.unavailableMessage]
+            : ['stepMismatch', this.stepMismatchMessage];
     }
     reportRequired() {
         const anchor = this.partNamed('grid') ?? undefined;
         if (this.required && this.value === '') {
-            this.internals.setValidity({ valueMissing: true }, this.valueMissingMessage || 'Choose a date.', anchor);
+            this.internals.setValidity({ valueMissing: true }, this.valueMissingMessage, anchor);
             return;
         }
         const held = this.selected;
         if (held.length > 0 && held.some((one) => asDate(one) === null)) {
-            this.internals.setValidity({ badInput: true }, this.badInputMessage ||
-                (this.mode === undefined
-                    ? 'Enter a date as YYYY-MM-DD.'
-                    : 'Enter dates as YYYY-MM-DD, separated by commas.'), anchor);
+            this.internals.setValidity({ badInput: true }, formatWords(this, 'badInputMessage', { mode: this.mode ?? 'single' }), anchor);
             return;
         }
         for (const one of held) {
@@ -414,7 +413,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
             this.focused = '';
         }
         this.choosing = false;
-        const outside = this.label === 'Date Picker' ? [...(this.internals.labels ?? [])] : [];
+        const outside = this.hasAttribute('label') ? [] : [...(this.internals.labels ?? [])];
         hostAria(this.internals, {
             label: this.label,
             labelledBy: outside,
@@ -438,19 +437,20 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         return Math.max(1, Math.floor(this.months) || 1);
     }
     get formats() {
-        const language = this.language;
+        const language = calendarLocale(this.language, this.calendar);
         if (this.cachedFormats?.locale === language) {
             return this.cachedFormats;
         }
-        const locale = language || undefined;
+        const utc = (options) => new Intl.DateTimeFormat(language || undefined, { ...options, timeZone: 'UTC' });
         const built = {
-            full: new Intl.DateTimeFormat(locale, { dateStyle: 'full', timeZone: 'UTC' }),
-            heading: new Intl.DateTimeFormat(locale, { month: 'long', timeZone: 'UTC', year: 'numeric' }),
+            full: utc({ dateStyle: 'full' }),
+            heading: utc({ month: 'long', year: 'numeric' }),
             locale: language,
-            long: new Intl.DateTimeFormat(locale, { dateStyle: 'long', timeZone: 'UTC' }),
-            monthName: new Intl.DateTimeFormat(locale, { month: 'short', timeZone: 'UTC' }),
-            weekday: new Intl.DateTimeFormat(locale, { timeZone: 'UTC', weekday: 'short' }),
-            year: new Intl.DateTimeFormat(locale, { timeZone: 'UTC', year: 'numeric' }),
+            long: utc({ dateStyle: 'long' }),
+            monthName: utc({ month: 'short' }),
+            monthYear: utc({ month: 'short', year: 'numeric' }),
+            weekday: utc({ weekday: 'short' }),
+            year: utc({ year: 'numeric' }),
         };
         this.cachedFormats = built;
         return built;
@@ -470,7 +470,8 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
     </slot>`;
     }
     renderMonth(month, index) {
-        const { full, heading, weekday } = this.formats;
+        const { full, heading: named, weekday } = this.formats;
+        const heading = named.format(month);
         const weeks = this.weeksOf(month);
         const anchor = fromDate(this.anchor);
         const today = localToday();
@@ -492,7 +493,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
             : nothing}
         ${''}
         <span part="heading" aria-live="polite"
-          >${this.renderHeadingText(heading.format(month), this.monthViewLabel)}</span
+          >${this.renderHeadingText(heading, 'monthViewLabel')}</span
         >
         ${last
             ? html `<button
@@ -509,7 +510,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
       <div
         part="grid"
         role="grid"
-        aria-label=${heading.format(month)}
+        aria-label=${heading}
         aria-readonly=${this.readOnly ? 'true' : nothing}
         data-unset=${this.value === '' ? '' : nothing}
       >
@@ -561,13 +562,13 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         return html `<button
       part="heading-button"
       type="button"
-      aria-label=${fillTemplate(label, { heading: text })}
+      aria-label=${formatWords(this, label, { heading: text })}
       ?disabled=${this.isDisabled}
       @click=${this.handleHeading}
     >${text}</button>`;
     }
     renderPeriods() {
-        const { monthName, year: yearName } = this.formats;
+        const { monthName, monthYear, year: yearName } = this.formats;
         const years = this.view === 'year';
         const page = years ? yearPageOf(this.periodYear) : this.periodYear;
         const heading = years
@@ -588,7 +589,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         role="gridcell"
         aria-current=${current ? 'date' : nothing}
         aria-disabled=${out ? 'true' : nothing}
-        aria-label=${years ? words : `${words} ${yearName.format(first)}`}
+        aria-label=${years ? words : monthYear.format(first)}
         aria-selected=${chosen ? 'true' : nothing}
         tabindex=${at === stop && !this.isDisabled ? '0' : '-1'}
         @click=${() => this.choosePeriod(at)}
@@ -608,7 +609,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
           ${this.renderPreviousMark()}
         </button>
         <span part="heading" aria-live="polite"
-          >${this.renderHeadingText(heading, this.yearViewLabel)}</span
+          >${this.renderHeadingText(heading, 'yearViewLabel')}</span
         >
         <button
           part="next"
@@ -650,8 +651,12 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
     }
 };
 __decorate([
+    words,
     property({ attribute: 'bad-input-message' })
 ], HelixHeadlessDatePicker.prototype, "badInputMessage", void 0);
+__decorate([
+    property()
+], HelixHeadlessDatePicker.prototype, "calendar", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessDatePicker.prototype, "dayContent", void 0);
@@ -671,6 +676,7 @@ __decorate([
     property({ attribute: false })
 ], HelixHeadlessDatePicker.prototype, "isDateUnavailable", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessDatePicker.prototype, "label", void 0);
 __decorate([
@@ -695,27 +701,35 @@ __decorate([
     property({ type: Number })
 ], HelixHeadlessDatePicker.prototype, "months", void 0);
 __decorate([
+    words,
     property({ attribute: 'month-view-label' })
 ], HelixHeadlessDatePicker.prototype, "monthViewLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'next-label' })
 ], HelixHeadlessDatePicker.prototype, "nextLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'next-year-label' })
 ], HelixHeadlessDatePicker.prototype, "nextYearLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'next-years-label' })
 ], HelixHeadlessDatePicker.prototype, "nextYearsLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'previous-label' })
 ], HelixHeadlessDatePicker.prototype, "previousLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'previous-year-label' })
 ], HelixHeadlessDatePicker.prototype, "previousYearLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'previous-years-label' })
 ], HelixHeadlessDatePicker.prototype, "previousYearsLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'range-overflow-message' })
 ], HelixHeadlessDatePicker.prototype, "rangeOverflowMessage", void 0);
 __decorate([
@@ -728,6 +742,7 @@ __decorate([
     state()
 ], HelixHeadlessDatePicker.prototype, "periodFocus", void 0);
 __decorate([
+    words,
     property({ attribute: 'range-underflow-message' })
 ], HelixHeadlessDatePicker.prototype, "rangeUnderflowMessage", void 0);
 __decorate([
@@ -740,18 +755,22 @@ __decorate([
     property({ type: Number })
 ], HelixHeadlessDatePicker.prototype, "step", void 0);
 __decorate([
+    words,
     property({ attribute: 'step-mismatch-message' })
 ], HelixHeadlessDatePicker.prototype, "stepMismatchMessage", void 0);
 __decorate([
+    words,
     property({ attribute: 'unavailable-message' })
 ], HelixHeadlessDatePicker.prototype, "unavailableMessage", void 0);
 __decorate([
+    words,
     property({ attribute: 'value-missing-message' })
 ], HelixHeadlessDatePicker.prototype, "valueMissingMessage", void 0);
 __decorate([
     property()
 ], HelixHeadlessDatePicker.prototype, "view", void 0);
 __decorate([
+    words,
     property({ attribute: 'year-view-label' })
 ], HelixHeadlessDatePicker.prototype, "yearViewLabel", void 0);
 HelixHeadlessDatePicker = __decorate([

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

@@ -24,7 +24,8 @@ declare const HelixHeadlessDialog_base: (new (...args: any[]) => import("@fusion
  * says it is open, which would leave it impossible to reopen.
  *
  * The dialog's name is `label` when you set it. Otherwise it is the heading in
- * the `header` slot, or the elements an `aria-labelledby` on the host names.
+ * the `header` slot, or the elements an `aria-labelledby` on the host names,
+ * and `fallback-label` where nothing names it.
  * While it is open, the page behind it does not scroll.
  *
  * The dialog is described by the words at the start of its body: the elements
@@ -67,6 +68,11 @@ declare const HelixHeadlessDialog_base: (new (...args: any[]) => import("@fusion
  * @cssstate open - While the dialog is open.
  */
 export declare class HelixHeadlessDialog extends HelixHeadlessDialog_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-dialog': { dismissLabel: 'Schließen' } })`.
+     */
+    static words: string;
     /**
      * Makes the dialog an alert dialog, for a message that interrupts to ask for
      * an answer, such as a confirmation before something is deleted.
@@ -104,6 +110,11 @@ export declare class HelixHeadlessDialog extends HelixHeadlessDialog_base {
      * interface.
      */
     dismissLabel: string;
+    /**
+     * The dialog's name where nothing names it: no `label`, no heading in the
+     * `header` slot, and no `aria-labelledby` on the host.
+     */
+    fallbackLabel: string;
     /**
      * Accessible name for the dialog. When it is empty, the heading in the
      * `header` slot names the dialog.

package/dist/dialog/root/dialog-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, auditName, CommandController, customElement, drawDismiss, drawDismissGlyph, FocusScopeController, HelixElement, headingsIn, hostAria, lockScroll, MixinControllerOpen, OpenPhaseController, reflectElements, unlockScroll, } from '@fusion.dev/helix-core';
+import { AriaForwardController, auditName, CommandController, customElement, drawDismiss, drawDismissGlyph, FocusScopeController, HelixElement, headingsIn, hostAria, lockScroll, MixinControllerOpen, OpenPhaseController, reflectElements, unlockScroll, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { wordsIn } from '../description.js';
@@ -14,6 +14,7 @@ let HelixHeadlessDialog = class HelixHeadlessDialog extends MixinControllerOpen(
         this.alert = false;
         this.dismissible = false;
         this.dismissLabel = 'Close';
+        this.fallbackLabel = 'Dialog';
         this.label = '';
         this.phases = new OpenPhaseController(this, {
             mark: {
@@ -90,6 +91,7 @@ let HelixHeadlessDialog = class HelixHeadlessDialog extends MixinControllerOpen(
             this.requestOpen(false);
         };
     }
+    static { this.words = 'helix-dialog'; }
     get returnValue() {
         return this.dialog?.returnValue ?? this.returned;
     }
@@ -124,8 +126,8 @@ let HelixHeadlessDialog = class HelixHeadlessDialog extends MixinControllerOpen(
     }
     describeByBody() {
         const slot = this.renderRoot.querySelector('slot:not([name])');
-        const words = this.hasAttribute('aria-describedby') ? [] : wordsIn(slot);
-        this.describedByBody = reflectElements(this.dialog, 'ariaDescribedByElements', words, this.describedByBody);
+        const said = this.hasAttribute('aria-describedby') ? [] : wordsIn(slot);
+        this.describedByBody = reflectElements(this.dialog, 'ariaDescribedByElements', said, this.describedByBody);
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -204,7 +206,7 @@ let HelixHeadlessDialog = class HelixHeadlessDialog extends MixinControllerOpen(
       part="dialog"
       role=${this.alert ? 'alertdialog' : nothing}
       closedby=${this.closedBy ?? nothing}
-      aria-label=${this.label || 'Dialog'}
+      aria-label=${this.label || this.fallbackLabel}
       @cancel=${this.handleCancel}
       @click=${this.handleBackdrop}
       @close=${this.handleClose}
@@ -233,8 +235,13 @@ __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessDialog.prototype, "dismissible", void 0);
 __decorate([
+    words,
     property({ attribute: 'dismiss-label' })
 ], HelixHeadlessDialog.prototype, "dismissLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'fallback-label' })
+], HelixHeadlessDialog.prototype, "fallbackLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessDialog.prototype, "label", void 0);

package/dist/donut-chart/root/donut-chart-root.d.ts

@@ -72,6 +72,11 @@ declare const HelixHeadlessDonutChart_base: typeof HelixElement & (new (...args:
  * @cssproperty --donut-chart-stroke - How thick the ring is drawn, derived from `hole`.
  */
 export declare class HelixHeadlessDonutChart extends HelixHeadlessDonutChart_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-donut-chart': { positionLabel: '{position} von {count}' } })`.
+     */
+    static words: string;
     /**
      * The pointer is not mapped across this one.
      *

package/dist/donut-chart/root/donut-chart-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 { CHART_PLOT, customElement, drawTooltip, HelixElement, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, } from '@fusion.dev/helix-core';
+import { CHART_PLOT, customElement, drawTooltip, HelixElement, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import '../../tooltip/index.js';
@@ -35,6 +35,7 @@ let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSo
         super(...arguments);
         this.sliceLabels = false;
     }
+    static { this.words = 'helix-donut-chart'; }
     connectedCallback() {
         super.connectedCallback();
         this.pointer.axis = 'none';
@@ -84,11 +85,13 @@ let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSo
     }
     renderSummary(shares) {
         const rows = this.sourceRows;
+        const locale = wordsLocale(this);
         const parts = shares
             .filter((share) => this.showsSeries(rows[share.row]?.label ?? ''))
-            .map((share) => `${rows[share.row]?.label ?? ''} ${percentIn(this.locale).format(share.fraction)}`);
+            .map((share) => `${rows[share.row]?.label ?? ''} ${percentIn(locale).format(share.fraction)}`);
         const named = this.named ? `${this.named}: ` : '';
-        return html `<p id="helix-chart-summary" part="summary">${named}${parts.join(', ')}.</p>`;
+        const listed = new Intl.ListFormat(locale, { style: 'short', type: 'unit' }).format(parts);
+        return html `<p id="helix-chart-summary" part="summary">${named}${listed}.</p>`;
     }
     renderPlot(shares) {
         return html `<div
@@ -134,7 +137,7 @@ let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSo
             top: half ? CENTER - EDGE : 0,
             width: PLOT_WIDTH,
         };
-        const format = percentIn(this.locale);
+        const format = percentIn(wordsLocale(this));
         return html `${shares.map((share, index) => {
             const place = sliceLabelAt(share, ring);
             if (!place) {
@@ -221,7 +224,7 @@ let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSo
         const cells = [...row.cells];
         cells[column] = {
             ...cell,
-            text: `${cell.text} (${percentIn(this.locale).format(share.fraction)})`,
+            text: `${cell.text} (${percentIn(wordsLocale(this)).format(share.fraction)})`,
         };
         return rows.map((one, index) => (index === share.row ? { ...row, cells } : one));
     }

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

@@ -39,7 +39,8 @@ declare const HelixHeadlessDrawer_base: (new (...args: any[]) => import("@fusion
  * `dismiss-label`, as `Dialog` draws one.
  *
  * The panel's name is `label` when you set it. Otherwise it is the heading in
- * the `header` slot, or the elements an `aria-labelledby` on the host names.
+ * the `header` slot, or the elements an `aria-labelledby` on the host names,
+ * and `fallback-label` where nothing names it.
  *
  * Content stays mounted when the drawer is closed, so it is in the server
  * markup and can animate. A closed `<dialog>` is already out of the tab order
@@ -87,6 +88,11 @@ declare const HelixHeadlessDrawer_base: (new (...args: any[]) => import("@fusion
  * @cssstate snapped - While the panel rests at a snap point that shows less than the whole panel.
  */
 export declare class HelixHeadlessDrawer extends HelixHeadlessDrawer_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-drawer': { dismissLabel: 'Schließen' } })`.
+     */
+    static words: string;
     protected readonly commands: CommandController;
     /**
      * Which close requests the browser handles on its own.
@@ -113,6 +119,11 @@ export declare class HelixHeadlessDrawer extends HelixHeadlessDrawer_base {
      * interface.
      */
     dismissLabel: string;
+    /**
+     * The panel's name where nothing names it: no `label`, no heading in the
+     * `header` slot, and no `aria-labelledby` on the host.
+     */
+    fallbackLabel: string;
     /**
      * Accessible name for the panel. When it is empty, the heading in the
      * `header` slot names the panel.

package/dist/drawer/root/drawer-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, CommandController, customElement, drawDismiss, drawDismissGlyph, edgeOffset, FocusScopeController, HelixElement, headingsIn, isRtl, lockScroll, MixinControllerOpen, nearest, OpenPhaseController, onUnlessFalse, parseSnapPoints, reflectElements, SwipeController, settleSwipe, snapTravel, swipeAxis, swipeEdge, towardEdge, unlockScroll, } from '@fusion.dev/helix-core';
+import { AriaForwardController, CommandController, customElement, drawDismiss, drawDismissGlyph, edgeOffset, FocusScopeController, HelixElement, headingsIn, isRtl, lockScroll, MixinControllerOpen, nearest, OpenPhaseController, onUnlessFalse, parseSnapPoints, reflectElements, SwipeController, settleSwipe, snapTravel, swipeAxis, swipeEdge, towardEdge, unlockScroll, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { beyondWindow } from '../reveal.js';
@@ -21,6 +21,7 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
         });
         this.dismissible = false;
         this.dismissLabel = 'Close';
+        this.fallbackLabel = 'Drawer';
         this.label = '';
         this.aria = new AriaForwardController(this, { target: () => this.panel });
         this.modal = true;
@@ -100,6 +101,7 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
         };
         this.namedByHeader = false;
     }
+    static { this.words = 'helix-drawer'; }
     get returnValue() {
         return this.panel?.returnValue ?? this.returned;
     }
@@ -236,7 +238,7 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
         return html `<dialog
       part="panel"
       closedby=${closedBy ?? nothing}
-      aria-label=${this.label || 'Drawer'}
+      aria-label=${this.label || this.fallbackLabel}
       @cancel=${this.handleCancel}
       @click=${this.handleBackdrop}
       @close=${this.handleClose}
@@ -267,8 +269,13 @@ __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessDrawer.prototype, "dismissible", void 0);
 __decorate([
+    words,
     property({ attribute: 'dismiss-label' })
 ], HelixHeadlessDrawer.prototype, "dismissLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'fallback-label' })
+], HelixHeadlessDrawer.prototype, "fallbackLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessDrawer.prototype, "label", void 0);

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

@@ -62,6 +62,11 @@ declare const HelixHeadlessDrilldown_base: (new (...args: any[]) => import("@fus
  * @cssstate forward - The last move went into a page.
  */
 export declare class HelixHeadlessDrilldown extends HelixHeadlessDrilldown_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-drilldown': { backLabel: 'Zurück' } })`.
+     */
+    static words: string;
     /**
      * The name of the top page's menu, read by screen readers. A page below it is
      * named by its title.

package/dist/drilldown/root/drilldown-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, DrilldownController, HelixElement, inlineStep, KeyboardNavigationController, keyClaimed, MixinCollection, slottedWords, typeaheadByWords, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, DrilldownController, HelixElement, inlineStep, KeyboardNavigationController, keyClaimed, MixinCollection, slottedWords, typeaheadByWords, words, } from '@fusion.dev/helix-core';
 import { caretLeft } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -85,6 +85,7 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
             }
         };
     }
+    static { this.words = 'helix-drilldown'; }
     get items() {
         return this.drilldown.rows;
     }
@@ -198,9 +199,11 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
     }
 };
 __decorate([
+    words,
     property()
 ], HelixHeadlessDrilldown.prototype, "label", void 0);
 __decorate([
+    words,
     property({ attribute: 'back-label' })
 ], HelixHeadlessDrilldown.prototype, "backLabel", void 0);
 __decorate([

package/dist/element-events.generated.js

@@ -66,6 +66,7 @@ registerElementEvents({
     'helix-headless-copy-button': ['helix-copy', 'helix-copy-error', 'helix-press'],
     'helix-headless-data-table': [
         'helix-activate',
+        'helix-before-reorder',
         'helix-expand',
         'helix-filter',
         'helix-filtered',
@@ -131,13 +132,21 @@ registerElementEvents({
         'helix-before-open',
         'toggle',
     ],
-    'helix-headless-list': ['change', 'helix-action', 'helix-before-change'],
+    'helix-headless-list': [
+        'change',
+        'helix-action',
+        'helix-before-change',
+        'helix-before-reorder',
+        'helix-reorder',
+    ],
     'helix-headless-list-item': ['helix-action'],
     'helix-headless-listbox': [
         'change',
         'helix-before-change',
+        'helix-before-reorder',
         'helix-filter',
         'helix-load-more',
+        'helix-reorder',
         'input',
     ],
     'helix-headless-map': [
@@ -229,7 +238,14 @@ registerElementEvents({
     'helix-headless-steps': ['helix-activate', 'helix-before-activate', 'helix-select'],
     'helix-headless-switch': ['change', 'helix-before-toggle', 'input'],
     'helix-headless-tab': ['helix-select'],
-    'helix-headless-table': ['helix-select', 'helix-selected', 'helix-sort', 'helix-sorted'],
+    'helix-headless-table': [
+        'helix-before-reorder',
+        'helix-reorder',
+        'helix-select',
+        'helix-selected',
+        'helix-sort',
+        'helix-sorted',
+    ],
     'helix-headless-table-column': ['helix-before-resize', 'helix-resized'],
     'helix-headless-tabs': ['helix-activate', 'helix-before-activate', 'helix-select'],
     'helix-headless-tag': ['helix-dismiss'],
@@ -260,7 +276,13 @@ registerElementEvents({
         'toggle',
     ],
     'helix-headless-tour-stop': ['helix-tour-ask'],
-    'helix-headless-tree': ['helix-activate', 'helix-before-activate', 'helix-select'],
+    'helix-headless-tree': [
+        'helix-activate',
+        'helix-before-activate',
+        'helix-before-reorder',
+        'helix-reorder',
+        'helix-select',
+    ],
     'helix-headless-tree-item': [
         'helix-before-close',
         'helix-before-open',