@fusion.dev/helix-headless 0.148.0 → 0.149.1

package/dist/listbox/reorder/listbox-reorder.d.ts

@@ -0,0 +1,83 @@
+import type { CSSResult, ReactiveController } from 'lit';
+import type { HelixHeadlessListbox } from '../root/listbox-root.js';
+/**
+ * Moves the options of a `reorderable` listbox, by pointer and by keyboard,
+ * and says each move in the list's live region.
+ *
+ * **Its own entry**, `@fusion.dev/helix-headless/listbox/reorder`, so a list
+ * that never moves options carries none of this. Importing the entry gives
+ * every listbox one, and `reorderable` turns it on.
+ *
+ * - **Alt with Up or Down** moves the highlighted option a place at once, and
+ *   Alt with Home or End to either end, as the APG's rearrangeable listbox
+ *   does. The highlight stays on the option.
+ * - **A pointer** drags a whole option, with no grip: a press that travels is
+ *   a drag, and one that does not is still a press that chooses it. The list
+ *   scrolls near an edge.
+ * - **The page moves the options.** A drop sends `helix-before-reorder` and
+ *   then `helix-reorder` with every value in the new order. An option in a
+ *   group moves within its group, and a list of `items` moves its records.
+ *
+ * It marks the option being dragged with `:state(dragging)` and the one the
+ * drop indicator is beside with `:state(drop-before)` or `:state(drop-after)`.
+ * While a pointer drags an option, a copy of it follows the pointer as the
+ * list's `drag-preview` part. The styled tier's entry draws those through two
+ * sheets it hands in, which this adopts while the list reorders: one into
+ * each option, and one into the list.
+ */
+export declare class ListboxReorderController implements ReactiveController {
+    private readonly host;
+    /** The sheet each option adopts while the list reorders, from the styled tier. */
+    sheet: CSSResult | undefined;
+    /**
+     * The sheet the list adopts while it reorders, from the styled tier, which
+     * draws the `drag-preview` part.
+     */
+    listSheet: CSSResult | undefined;
+    /** The options marked last, so a mark that moves is taken off where it was. */
+    private marked;
+    private readonly reorder;
+    constructor(host: HelixHeadlessListbox, sheet?: CSSResult, listSheet?: CSSResult);
+    /**
+     * Marks where each option stands once the list has drawn: after the update,
+     * because a list of `items` draws its options in its own last step, and
+     * reuses each element for another record as it scrolls.
+     */
+    hostUpdated(): void;
+    /**
+     * Draws the list's `drag-preview` part at the end of its shadow root while
+     * it reorders, and takes it away after. The list's own template has none to
+     * draw, and the controller fills this one while a pointer drags an option.
+     */
+    private drawPreview;
+    /** The options the list draws now: its elements, or the records it drew of `items`. */
+    private get drawn();
+    /** The option an event passed through. */
+    private optionOf;
+    /** The drawn option that stands for a value. */
+    private optionFor;
+    /**
+     * The values an option moves among: every record of `items`, or the options
+     * beside it, which in a list of groups are the options of its group.
+     */
+    private keysAround;
+    /** Puts each option's state in a move on it, and the styled tier's sheets. */
+    private mark;
+}
+/**
+ * Gives every listbox of a class a `ListboxReorderController`, and the class
+ * the words it says, as properties that read and write their attributes:
+ * `movedLabel`, `canceledLabel`, `droppedLabel`, and `pickedUpLabel`.
+ *
+ * The entries call it for their own tier's class: the headless entry for
+ * `HelixHeadlessListbox`, and the styled one for `HelixListbox`, with the
+ * sheet that draws a move on an option and the sheet that draws the list's
+ * `drag-preview` part. A class that has registered keeps the list of what
+ * it was given when it did, so each is given its own.
+ *
+ * **Lists already on the page are given one too.** A page that imports the
+ * list and then this entry has its lists upgraded, and built, before this
+ * runs, so the ones in the document and its open shadow roots are found and
+ * given theirs, and every list built after gets one as it is built.
+ */
+export declare const reorderListbox: (element: typeof HelixHeadlessListbox, sheet?: CSSResult, listSheet?: CSSResult) => void;

package/dist/listbox/reorder/listbox-reorder.js

@@ -0,0 +1,151 @@
+import { ReorderController } from '@fusion.dev/helix-core';
+const WORDS = {
+    canceledLabel: ['canceled-label', 'Canceled'],
+    droppedLabel: ['dropped-label', 'Dropped'],
+    movedLabel: ['moved-label', '{name} moved to position {position} of {count}'],
+    pickedUpLabel: ['picked-up-label', 'Picked up {name}'],
+};
+const MOVES = ['dragging', 'drop-after', 'drop-before'];
+const keyOfItem = (item) => String(typeof item === 'object' ? item.value : item);
+export class ListboxReorderController {
+    constructor(host, sheet, listSheet) {
+        this.marked = new Set();
+        this.host = host;
+        this.sheet = sheet;
+        this.listSheet = listSheet;
+        host.addController(this);
+        this.reorder = new ReorderController(host, {
+            axis: 'block',
+            box: (key) => this.optionFor(key)?.getBoundingClientRect(),
+            current: () => {
+                const active = this.drawn.find((option) => option.active);
+                return active && !active.disabled ? active.value : undefined;
+            },
+            enabled: () => host.reorderable && host.filter === '' && host.layout !== 'grid' && !host.isDisabled,
+            grip: (event) => {
+                const option = this.optionOf(event);
+                return option && !option.disabled ? { element: option, key: option.value } : undefined;
+            },
+            holds: false,
+            keys: (key) => this.keysAround(key),
+            name: (key) => this.optionFor(key)?.text || key,
+            preview: (key) => this.optionFor(key),
+            scroller: () => host.renderRoot?.querySelector('[part="items"]') ?? null,
+        });
+    }
+    hostUpdated() {
+        queueMicrotask(() => this.mark());
+    }
+    drawPreview(on) {
+        const root = this.host.renderRoot;
+        const drawn = root?.querySelector('[part="drag-preview"]');
+        if (on && root && !drawn) {
+            const preview = document.createElement('div');
+            for (const [name, value] of [
+                ['part', 'drag-preview'],
+                ['popover', 'manual'],
+                ['aria-hidden', 'true'],
+                ['inert', ''],
+            ]) {
+                preview.setAttribute(name, value);
+            }
+            root.append(preview);
+        }
+        else if (!on) {
+            drawn?.remove();
+        }
+    }
+    get drawn() {
+        const host = this.host;
+        return (host.items
+            ? [...(host.renderRoot?.querySelector('[data-rows]')?.children ?? [])]
+            : host.options);
+    }
+    optionOf(event) {
+        const drawn = this.drawn;
+        return event.composedPath().find((node) => drawn.includes(node));
+    }
+    optionFor(key) {
+        return this.drawn.find((option) => option.value === key);
+    }
+    keysAround(key) {
+        const { items, options } = this.host;
+        if (items) {
+            return items.map(keyOfItem);
+        }
+        const parent = options.find((option) => option.value === key)?.parentElement;
+        return options.filter((option) => option.parentElement === parent).map((one) => one.value);
+    }
+    mark() {
+        const on = this.host.reorderable;
+        adopt(this.host, this.listSheet, on);
+        this.drawPreview(on);
+        const drawn = this.drawn;
+        const marked = new Set();
+        for (const option of drawn) {
+            const move = on ? this.reorder.moveOf(option.value) : undefined;
+            if (move || this.marked.has(option)) {
+                for (const state of MOVES) {
+                    option.toggleState(state, state === move);
+                }
+            }
+            if (move) {
+                marked.add(option);
+            }
+            adopt(option, this.sheet, on);
+        }
+        for (const option of this.marked) {
+            if (!drawn.includes(option)) {
+                for (const state of MOVES) {
+                    option.toggleState(state, false);
+                }
+            }
+        }
+        this.marked = marked;
+    }
+}
+const adopt = (element, given, on) => {
+    const root = element.shadowRoot;
+    const sheet = given?.styleSheet;
+    if (!root || !sheet || root.adoptedStyleSheets.includes(sheet) === on) {
+        return;
+    }
+    root.adoptedStyleSheets = on
+        ? [...root.adoptedStyleSheets, sheet]
+        : root.adoptedStyleSheets.filter((one) => one !== sheet);
+};
+const given = new WeakMap();
+const attach = (list, sheet, listSheet) => {
+    const controller = given.get(list) ?? new ListboxReorderController(list);
+    given.set(list, controller);
+    controller.sheet ??= sheet;
+    controller.listSheet ??= listSheet;
+};
+const onPage = (of, root = document) => [...root.querySelectorAll('*')].flatMap((node) => [
+    ...(node instanceof of ? [node] : []),
+    ...(node.shadowRoot ? onPage(of, node.shadowRoot) : []),
+]);
+export const reorderListbox = (element, sheet, listSheet) => {
+    element.addInitializer((host) => attach(host, sheet, listSheet));
+    if (typeof document !== 'undefined') {
+        for (const list of onPage(element)) {
+            attach(list, sheet, listSheet);
+            list.requestUpdate();
+        }
+    }
+    const proto = element.prototype;
+    for (const [name, [attribute, fallback]] of Object.entries(WORDS)) {
+        if (name in proto) {
+            continue;
+        }
+        Object.defineProperty(proto, name, {
+            configurable: true,
+            get() {
+                return this.getAttribute(attribute) ?? fallback;
+            },
+            set(next) {
+                this.setAttribute(attribute, next);
+            },
+        });
+    }
+};

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

@@ -38,6 +38,7 @@ declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusio
  * | Shift with Home or End | With `multiple`, adds every option from the highlight to that end. In a filter field, hold Control as well. |
  * | Control or Command with A | With `multiple`, chooses every option, or none where all are chosen. In a filter field, selects the text. |
  * | Escape | In a filter field, clears the filter. |
+ * | Alt with Up or Down | In a `reorderable` list, moves the highlighted option a place. Alt with Home or End moves it to either end. |
  *
  * **ARIA.** The `items` part is the `listbox`, named by the label and
  * described by the hint and the message, with `aria-multiselectable` under
@@ -53,6 +54,26 @@ declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusio
  * left, such as "3 results", from `result-label` and `results-label`. A filter
  * that leaves none says `empty-text`.
  *
+ * **Moving options** is a separate import, `@fusion.dev/helix/listbox/reorder`,
+ * so a list that never moves options carries none of its code. With it
+ * imported, `reorderable` lets a reader move options:
+ *
+ * - Alt with Up or Down moves the highlighted option a place, and Alt with
+ *   Home or End moves it to either end, as the APG's rearrangeable listbox
+ *   does. The highlight stays on it.
+ * - A pointer drags an option, with a drop indicator, and the list scrolls near
+ *   an edge. A press that does not travel still chooses the option.
+ * - A drop sends `helix-before-reorder`, which you can refuse, and then
+ *   `helix-reorder`, whose `keys` hold every value in the new order. **You
+ *   move the options**, or set `items` in the new order: the list moves no
+ *   element of yours.
+ * - The list says each move in its `live` region. The words are the
+ *   `moved-label`, `canceled-label`, `dropped-label`, and `picked-up-label`
+ *   attributes, which the import reads.
+ * - An option in a group moves within its group. Options do not move while a
+ *   filter narrows the list, under `layout="grid"`, or while the list is
+ *   disabled.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
@@ -71,8 +92,10 @@ declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusio
  *
  * @event {Event} change - Fired after the value changes.
  * @event {HelixBeforeChangeEvent} helix-before-change - Fired when the value is about to change, and cancelable.
+ * @event {HelixBeforeReorderEvent} helix-before-reorder - Fired when an option is dropped at a new place, in a `reorderable` list with `@fusion.dev/helix/listbox/reorder` imported, with every value in the new order. Cancelable: cancel it to keep the option where it is.
  * @event {HelixFilterEvent} helix-filter - Fired before the list is filtered, and cancelable.
  * @event {HelixLoadMoreEvent} helix-load-more - Fired once the list is scrolled within a screen of its end, once for each number of options, and not while `loading` is set. Add the next page of options and set `loading` while you fetch it.
+ * @event {HelixReorderEvent} helix-reorder - Fired after `helix-before-reorder` when nobody canceled it. Move your options, or your `items`, to the order in `keys`. Cancelable: cancel it to say the move did not happen.
  * @event {Event} input - Fired after the value changes.
  *
  * @csspart empty - The text shown when the list has no options to show, or the filter hides every one. `:state(no-results)` is set for the second.
@@ -83,7 +106,7 @@ declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusio
  * @csspart hint - Help under the list.
  * @csspart items - The list of options.
  * @csspart label - The label above the list.
- * @csspart live - A copy of the empty and loading text, and how many options a filter left, in a region that screen readers announce when it changes. Visually hidden in the styled tier.
+ * @csspart live - A copy of the empty and loading text, how many options a filter left, and each move in a `reorderable` list, in a region that screen readers announce when it changes. Visually hidden in the styled tier.
  * @csspart loading - The text shown while the options load.
  * @csspart search - The region that holds the filter field.
  * @csspart search-field - The filter field.
@@ -95,6 +118,11 @@ declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusio
  * @cssstate no-results - A filter hid every option of a list that has some.
  */
 export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-listbox': { filterLabel: 'Filtern' } })`.
+     */
+    static words: string;
     protected readonly aria: AriaForwardController;
     /**
      * What a browser's autofill may choose, as a platform token such as
@@ -211,6 +239,9 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
     manual: boolean;
     /**
      * Whether more than one option can be chosen.
+     *
+     * A press then toggles the option pressed, and Shift with a press adds every
+     * option from the one last chosen to it, as React Aria's list does.
      */
     multiple: boolean;
     /**
@@ -221,17 +252,27 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      */
     noResultsText?: string;
     /**
-     * What a screen reader hears when a filter leaves one option. `{count}` is
-     * the count.
+     * Lets a reader move options, once `@fusion.dev/helix/listbox/reorder` (or
+     * `@fusion.dev/helix-headless/listbox/reorder`) is imported: Alt with an
+     * arrow moves the highlighted option, and a pointer drags one. The list
+     * moves no option itself: you move your options, or your `items`, on
+     * `helix-reorder`. Without that import it does nothing, so a list that never
+     * moves options carries none of the code.
      */
-    resultLabel: string;
+    reorderable: boolean;
     /**
-     * What a screen reader hears when a filter leaves any other number of
-     * options. `{count}` is the count.
+     * What a screen reader hears when a filter leaves one option, where
+     * `results-label` should not say it. `{count}` is the count.
      *
-     * **Two sentences, chosen by `Intl.PluralRules`**, which is Data Table's
-     * pair: a language with more forms than two picks the one for its `one` and
-     * writes the rest here.
+     * @deprecated Write every form in `results-label`, as `{count, plural, one
+     * {# result} other {# results}}`. Removed in the next major version.
+     */
+    resultLabel?: string;
+    /**
+     * What a screen reader hears when a filter narrows the list. `{count}` is
+     * how many options are left, written in the locale, and each language
+     * writes the forms it has: `{count, plural, one {# wynik} few {# wyniki}
+     * many {# wyników} other {# wyniku}}`.
      */
     resultsLabel: string;
     /**
@@ -239,6 +280,12 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * filter field, on Apple devices. `{name}` is the option's words.
      */
     selectedLabel: string;
+    /**
+     * The message reported when the field is required and no option is chosen.
+     * Absent, or empty, is this sentence, or the words registered for the page's
+     * locale.
+     */
+    valueMissingMessage: string;
     /**
      * Which option the keyboard is on, which is not what is chosen.
      */
@@ -248,8 +295,16 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * it back on the first match.
      */
     private parked;
-    /** The option last chosen, which Shift with Space extends from. */
+    /**
+     * The option last chosen, which Shift with Space or with a press extends
+     * from.
+     */
     private anchor;
+    /**
+     * Whether Shift was held for the press being handled, read off the click on
+     * its way down to the option, which is where React Aria extends a range.
+     */
+    private shifted;
     /** The letters typed at the list, which move the highlight to a match. */
     private readonly typeahead;
     /**
@@ -404,7 +459,8 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
     private readonly handleSelection;
     /**
      * Adds every option a reader can reach from the one last chosen to `to`,
-     * APG's Shift with Space. With none chosen yet, it adds `to` alone.
+     * APG's Shift with Space and React Aria's Shift with a press. With none
+     * chosen yet, it adds `to` alone and the next range starts there.
      */
     private extend;
     /**
@@ -421,6 +477,7 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * a combobox or a command palette chose the highlighted option and closed the
      * panel, so a query of two words could not be typed.
      */
+    private readonly handleClick;
     private readonly handleKeydown;
     /**
      * Puts the highlight on an option, and chooses it where moving is choosing.

package/dist/listbox/root/listbox-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, centerInView, columnStep, countLabel, customElement, DelayController, DisabledCascadeController, drawAutofill, endInSight, fillTemplate, HelixFilterEvent, HelixFormElement, HelixLoadMoreEvent, hostAria, inlineStep, MixinCollection, MixinControllerValue, MixinField, markMatches, OptionWindowController, onApple, pageRows, rangeAdd, reportValues, requestChange, scrollItemIntoView, selectsAll, Typeahead, toggleEvery, typesCharacter, } from '@fusion.dev/helix-core';
+import { AriaForwardController, centerInView, columnStep, countLabel, customElement, DelayController, DisabledCascadeController, drawAutofill, endInSight, formatWords, HelixFilterEvent, HelixFormElement, HelixLoadMoreEvent, hostAria, inlineStep, MixinCollection, MixinControllerValue, MixinField, markMatches, OptionWindowController, onApple, pageRows, rangeAdd, reportValues, requestChange, scrollItemIntoView, selectsAll, Typeahead, toggleEvery, typesCharacter, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { magnifyingGlass } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -34,12 +34,14 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         this.loadError = '';
         this.manual = false;
         this.multiple = false;
-        this.resultLabel = '{count} result';
-        this.resultsLabel = '{count} results';
+        this.reorderable = false;
+        this.resultsLabel = '{count, plural, one {# result} other {# results}}';
         this.selectedLabel = '{name}, selected';
+        this.valueMissingMessage = 'Choose one to continue.';
         this.activeValue = '';
         this.parked = false;
         this.anchor = '';
+        this.shifted = false;
         this.typeahead = new Typeahead();
         this.seen = new Set();
         this.forwarded = false;
@@ -57,8 +59,18 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
             if (event.defaultPrevented) {
                 return;
             }
-            this.activeValue = event.detail.value;
-            this.choose(event.detail.value);
+            const { value } = event.detail;
+            this.activeValue = value;
+            if (this.multiple && this.shifted) {
+                this.extend(value);
+            }
+            else {
+                this.choose(value);
+            }
+            this.shifted = false;
+        };
+        this.handleClick = (event) => {
+            this.shifted = event.shiftKey;
         };
         this.handleKeydown = (event) => {
             const shown = this.shown.filter((option) => !option.disabled);
@@ -207,6 +219,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
             this.navigate(event);
         };
     }
+    static { this.words = 'helix-listbox'; }
     get filter() {
         return this.filterState ?? this.defaultFilter;
     }
@@ -246,7 +259,9 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         const count = this.shown.length;
         this.announced =
             this.filter.trim() && count
-                ? countLabel(count, this.resultLabel, this.resultsLabel, this.lang)
+                ? this.resultLabel
+                    ? countLabel(count, this.resultLabel, this.resultsLabel, wordsLocale(this))
+                    : formatWords(this, 'resultsLabel', { count })
                 : '';
     }
     tellActive(changed) {
@@ -259,7 +274,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         const active = this.entries.find((option) => option.value === this.activeValue);
         if (active) {
             this.announced = active.selected
-                ? fillTemplate(this.selectedLabel, { name: active.text })
+                ? formatWords(this, 'selectedLabel', { name: active.text })
                 : active.text;
         }
     }
@@ -332,7 +347,11 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
     }
     extend(to) {
         const reach = this.shown.filter((option) => !option.disabled).map((option) => option.value);
-        const taken = rangeAdd(this.values, reach, reach.indexOf(this.anchor), reach.indexOf(to));
+        const from = reach.indexOf(this.anchor);
+        if (from < 0 && reach.includes(to)) {
+            this.anchor = to;
+        }
+        const taken = rangeAdd(this.values, reach, from, reach.indexOf(to));
         if (taken) {
             this.requestValue(taken.join(','));
         }
@@ -430,17 +449,19 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         else {
             this.internals.setFormValue(this.value === '' ? null : this.value);
         }
-        this.reportRequired(this.value === '', 'Choose one to continue.', 'items');
+        this.reportRequired(this.value === '', this.valueMissingMessage, 'items');
     }
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('helix-select', this.handleSelection);
         this.addEventListener('keydown', this.handleKeydown);
+        this.addEventListener('click', this.handleClick, true);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('helix-select', this.handleSelection);
         this.removeEventListener('keydown', this.handleKeydown);
+        this.removeEventListener('click', this.handleClick, true);
         markMatches(this, [], '');
     }
     willUpdate(changed) {
@@ -629,6 +650,7 @@ __decorate([
     property({ attribute: 'default-filter' })
 ], HelixHeadlessListbox.prototype, "defaultFilter", void 0);
 __decorate([
+    words,
     property({ attribute: 'empty-text' })
 ], HelixHeadlessListbox.prototype, "emptyText", void 0);
 __decorate([
@@ -641,6 +663,7 @@ __decorate([
     property({ attribute: 'filter-delay', type: Number })
 ], HelixHeadlessListbox.prototype, "filterDelay", void 0);
 __decorate([
+    words,
     property({ attribute: 'filter-label' })
 ], HelixHeadlessListbox.prototype, "filterLabel", void 0);
 __decorate([
@@ -661,15 +684,24 @@ __decorate([
 __decorate([
     property({ attribute: 'no-results-text' })
 ], HelixHeadlessListbox.prototype, "noResultsText", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessListbox.prototype, "reorderable", void 0);
 __decorate([
     property({ attribute: 'result-label' })
 ], HelixHeadlessListbox.prototype, "resultLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'results-label' })
 ], HelixHeadlessListbox.prototype, "resultsLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'selected-label' })
 ], HelixHeadlessListbox.prototype, "selectedLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'value-missing-message' })
+], HelixHeadlessListbox.prototype, "valueMissingMessage", void 0);
 __decorate([
     state()
 ], HelixHeadlessListbox.prototype, "activeValue", void 0);

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

@@ -45,6 +45,11 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @cssstate waiting - The loader is waiting out its `delay`, hidden and silent.
  */
 export declare class HelixHeadlessLoader extends HelixElement {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-loader': { label: 'Wird geladen' } })`.
+     */
+    static words: string;
     /**
      * How long the loader waits before it shows, in milliseconds, so work that
      * finishes quickly never flashes one.

package/dist/loader/root/loader-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, DelayController, elementById, HelixElement, hostAria, reportRuntime, } from '@fusion.dev/helix-core';
+import { customElement, DelayController, elementById, HelixElement, hostAria, reportRuntime, words, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { awaitRegion, claimBusy, releaseBusy } from '../busy.js';
@@ -18,6 +18,7 @@ let HelixHeadlessLoader = class HelixHeadlessLoader extends HelixElement {
         this.region = null;
         this.found = false;
     }
+    static { this.words = 'helix-loader'; }
     get waiting() {
         return this.delay > 0 && !this.due.elapsed;
     }
@@ -95,6 +96,7 @@ __decorate([
     property()
 ], HelixHeadlessLoader.prototype, "for", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessLoader.prototype, "label", void 0);
 HelixHeadlessLoader = __decorate([

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

@@ -23,6 +23,11 @@ import { type MapPoint } from '../route/map-route.js';
  * @event {HelixMapPartChangeEvent} helix-map-part-change - The area's points, name, or color changed. Used by `connectMap`; pages do not need to listen for it.
  */
 export declare class HelixHeadlessMapArea extends HelixElement {
+    /**
+     * The key this part's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-map-area': { label: 'Gebiet' } })`.
+     */
+    static words: string;
     /**
      * Words drawn on the map with the area, such as `A` for a search sector.
      * Unset, nothing is drawn. Keep it short: it is a caption on a map, and the

package/dist/map/area/map-area.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';
 import { pointsConverter } from '../route/map-route.js';
@@ -16,6 +16,7 @@ let HelixHeadlessMapArea = class HelixHeadlessMapArea extends HelixElement {
         this.layerKind = 'area';
         this.label = 'Area';
     }
+    static { this.words = 'helix-map-area'; }
     updated(changed) {
         super.updated(changed);
         this.dispatchEvent(new HelixMapPartChangeEvent({ kind: 'layer' }));
@@ -37,6 +38,7 @@ __decorate([
     property()
 ], HelixHeadlessMapArea.prototype, "group", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessMapArea.prototype, "label", void 0);
 __decorate([

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

@@ -20,6 +20,11 @@ import { nothing, type PropertyValues } from 'lit';
  * @event {HelixMapPartChangeEvent} helix-map-part-change - The layer's name or color changed. Used by `connectMap`; pages do not need to listen for it.
  */
 export declare class HelixHeadlessMapBuildings extends HelixElement {
+    /**
+     * The key this part's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-map-buildings': { label: '3D-Gebäude' } })`.
+     */
+    static words: string;
     /** More about the buildings. Read after the label in the frame's list. */
     description?: string;
     /**

package/dist/map/buildings/map-buildings.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 HelixHeadlessMapBuildings = class HelixHeadlessMapBuildings extends HelixElement {
@@ -14,6 +14,7 @@ let HelixHeadlessMapBuildings = class HelixHeadlessMapBuildings extends HelixEle
         this.layerKind = 'buildings';
         this.label = '3D buildings';
     }
+    static { this.words = 'helix-map-buildings'; }
     updated(changed) {
         super.updated(changed);
         this.dispatchEvent(new HelixMapPartChangeEvent({ kind: 'layer' }));
@@ -29,6 +30,7 @@ __decorate([
     property()
 ], HelixHeadlessMapBuildings.prototype, "group", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessMapBuildings.prototype, "label", void 0);
 HelixHeadlessMapBuildings = __decorate([