@fusion.dev/helix-headless 0.147.0 → 0.149.0

package/dist/listbox/root/listbox-root.js

@@ -4,59 +4,15 @@ 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, countLabel, customElement, DelayController, DisabledCascadeController, endInSight, HelixFilterEvent, HelixFormElement, HelixLoadMoreEvent, hostAria, MixinCollection, MixinControllerValue, MixinField, rangeAdd, reportValues, requestChange, scrollItemIntoView, selectsAll, Typeahead, 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';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
-import { HelixHeadlessOptionGroup } from '../../option/group/option-group.js';
 import { HelixHeadlessOption } from '../../option/root/option-root.js';
-const MOVES = new Set(['ArrowDown', 'ArrowUp', 'End', 'Home', 'PageDown', 'PageUp']);
 const FIELD_MOVES = new Set(['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp']);
+const MOVES = new Set([...FIELD_MOVES, 'End', 'Home']);
 const PAGE = 10;
-const matched = new Map();
-const HIGHLIGHT = 'helix-filter-match';
-const paintable = () => typeof CSS !== 'undefined' && 'highlights' in CSS && typeof Highlight !== 'undefined';
-const paintMatches = () => {
-    if (!paintable()) {
-        return;
-    }
-    const all = [...matched.values()].flat();
-    if (all.length === 0) {
-        CSS.highlights.delete(HIGHLIGHT);
-        return;
-    }
-    CSS.highlights.set(HIGHLIGHT, new Highlight(...all));
-};
-const rangeFor = (root, needle) => {
-    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
-    const nodes = [];
-    let whole = '';
-    for (let node = walker.nextNode(); node !== null; node = walker.nextNode()) {
-        nodes.push(node);
-        whole += node.nodeValue ?? '';
-    }
-    const at = whole.toLowerCase().indexOf(needle);
-    if (at < 0) {
-        return [];
-    }
-    const range = document.createRange();
-    let seen = 0;
-    let started = false;
-    for (const node of nodes) {
-        const length = node.nodeValue?.length ?? 0;
-        if (!started && at < seen + length) {
-            range.setStart(node, at - seen);
-            started = true;
-        }
-        if (started && at + needle.length <= seen + length) {
-            range.setEnd(node, at + needle.length - seen);
-            return [range];
-        }
-        seen += length;
-    }
-    return [];
-};
 let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(MixinControllerValue(MixinField(HelixFormElement))) {
     constructor() {
         super(...arguments);
@@ -70,13 +26,22 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         this.filterable = false;
         this.filterDelay = 0;
         this.filterLabel = 'Filter';
+        this.items = undefined;
+        this.data = new OptionWindowController(this, {
+            current: () => this.currentValue,
+            items: () => this.items,
+        });
         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;
@@ -85,6 +50,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         this.cascade = new DisabledCascadeController(this, {
             items: () => this.options,
         });
+        this.chosenAgain = undefined;
         this.handleSelection = (event) => {
             if (event.detail.href !== undefined) {
                 return;
@@ -93,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);
@@ -102,11 +78,17 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
                 return;
             }
             const typing = this.forwarded || event.composedPath()[0] === this.partNamed('search-field');
+            if (this.multiple && event.key === ' ' && event.shiftKey && !typing) {
+                event.preventDefault();
+                this.extend(this.activeValue);
+                return;
+            }
             if (event.key === 'Enter' || (event.key === ' ' && !typing && !this.typeahead.typing())) {
                 const link = shown.find((option) => option.value === this.activeValue && Boolean(option.href));
                 if (link !== undefined) {
                     event.preventDefault();
                     if (event.key === 'Enter') {
+                        ;
                         link.select(event);
                     }
                 }
@@ -121,10 +103,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
             }
             if (this.multiple && !typing && selectsAll(event)) {
                 event.preventDefault();
-                const reachable = shown.map((option) => option.value);
-                const all = reachable.every((value) => this.values.includes(value));
-                const kept = this.values.filter((value) => !reachable.includes(value));
-                this.requestValue((all ? kept : [...kept, ...reachable]).join(','));
+                this.requestValue(toggleEvery(this.values, shown.map((option) => option.value)).join(','));
                 return;
             }
             if (!typing && typesCharacter(event)) {
@@ -140,7 +119,9 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
                 event.shiftKey &&
                 (event.ctrlKey || event.metaKey) &&
                 (event.key === 'Home' || event.key === 'End');
-            if (!fieldRange && !(typing ? FIELD_MOVES : MOVES).has(event.key)) {
+            const grid = this.layout === 'grid' && !this.data.records;
+            const along = grid && !typing ? inlineStep(this, event.key) : 0;
+            if (!fieldRange && !along && !(typing ? FIELD_MOVES : MOVES).has(event.key)) {
                 return;
             }
             event.preventDefault();
@@ -149,7 +130,13 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
             const at = shown.findIndex((option) => option.value === from);
             const last = shown.length - 1;
             let next = at;
-            if (event.key === 'ArrowDown') {
+            if (along) {
+                next = Math.min(Math.max(at + along, 0), last);
+            }
+            else if (grid && at >= 0 && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+                next = columnStep(shown.map((option) => option.getBoundingClientRect().left), at, event.key === 'ArrowDown' ? 1 : -1);
+            }
+            else if (event.key === 'ArrowDown') {
                 next = at < 0 ? 0 : (at + 1) % shown.length;
             }
             else if (event.key === 'ArrowUp') {
@@ -197,7 +184,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         this.askedAt = -1;
         this.handleScroll = (event) => {
             const items = event.currentTarget;
-            const count = this.options.length;
+            const count = this.entries.length;
             if (this.loading ||
                 !endInSight({
                     askedAt: this.askedAt,
@@ -232,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;
     }
@@ -241,43 +229,54 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         this.requestUpdate('filter', previous);
     }
     get selectedIndex() {
-        return this.options.findIndex((option) => option.selected);
+        return this.entries.findIndex((option) => option.selected);
     }
     set selectedIndex(at) {
-        const option = this.options[at];
+        const option = this.entries[at];
         this.value = option?.value ?? '';
     }
     highlight(where) {
         const shown = this.shown.filter((option) => !option.disabled);
         this.typeahead.reset();
         this.parked = where === 'none';
-        if (where === 'none') {
-            this.activeValue = '';
-        }
-        else if (where === 'first') {
-            this.activeValue = shown[0]?.value ?? '';
-        }
-        else if (where === 'last') {
-            this.activeValue = shown.at(-1)?.value ?? '';
-        }
-        else {
-            const chosen = shown.find((option) => this.values.includes(option.value));
-            this.activeValue = (chosen ?? shown[0])?.value ?? '';
-        }
+        const chosen = where === 'selected' ? shown.find((option) => this.values.includes(option.value)) : undefined;
+        this.activeValue =
+            where === 'none'
+                ? ''
+                : ((where === 'last' ? shown.at(-1) : (chosen ?? shown[0]))?.value ?? '');
         if (this.childrenKnown) {
             this.place();
         }
     }
     tell(changed) {
-        if (!changed.has('filter') || !this.hasUpdated) {
+        if (!this.hasUpdated) {
+            return;
+        }
+        if (!changed.has('filter')) {
+            this.tellActive(changed);
             return;
         }
         const count = this.shown.length;
-        if (this.filter.trim() === '' || count === 0) {
-            this.announced = '';
+        this.announced =
+            this.filter.trim() && count
+                ? this.resultLabel
+                    ? countLabel(count, this.resultLabel, this.resultsLabel, wordsLocale(this))
+                    : formatWords(this, 'resultsLabel', { count })
+                : '';
+    }
+    tellActive(changed) {
+        if (!changed.has('activeValue') ||
+            !this.filterable ||
+            !onApple() ||
+            this.renderRoot.activeElement?.getAttribute('part') !== 'search-field') {
             return;
         }
-        this.announced = countLabel(count, this.resultLabel, this.resultsLabel, this.lang);
+        const active = this.entries.find((option) => option.value === this.activeValue);
+        if (active) {
+            this.announced = active.selected
+                ? formatWords(this, 'selectedLabel', { name: active.text })
+                : active.text;
+        }
     }
     typeaheadTo(key) {
         const shown = this.shown.filter((option) => !option.disabled);
@@ -315,16 +314,25 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         return found;
     }
     get groups() {
-        return this.among((node) => node instanceof HelixHeadlessOptionGroup, this.children);
+        return this.among((node) => node.localName.endsWith('-option-group'), this.children);
+    }
+    get entries() {
+        return this.data.records ?? this.options;
+    }
+    get elements() {
+        return this.data.records ? this.data.drawn : this.options;
     }
     get shown() {
-        return this.options.filter((option) => !option.hidden);
+        return this.entries.filter((option) => !option.hidden);
     }
     get values() {
         return this.value === '' ? [] : this.value.split(',');
     }
     choose(value) {
         const chosen = this.values;
+        if (!chosen.includes(value)) {
+            this.anchor = value;
+        }
         const next = this.multiple
             ? chosen.includes(value)
                 ? chosen.filter((each) => each !== value)
@@ -332,23 +340,35 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
             : [value];
         const joined = next.join(',');
         if (joined === this.value) {
+            this.chosenAgain?.();
             return;
         }
         this.requestValue(joined);
     }
+    extend(to) {
+        const reach = this.shown.filter((option) => !option.disabled).map((option) => option.value);
+        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(','));
+        }
+    }
     arrive(value) {
         this.parked = false;
         this.activeValue = value;
-        const link = this.options.some((option) => option.value === value && Boolean(option.href));
+        const link = this.entries.some((option) => option.value === value && Boolean(option.href));
         if (!this.multiple && !this.manual && !this.forwarded && !link) {
             this.choose(value);
         }
     }
     pageSize() {
         const items = this.partNamed('items');
-        const row = this.shown[0]?.getBoundingClientRect().height ?? 0;
+        const row = this.elements.find((option) => !option.hidden)?.getBoundingClientRect().height ?? 0;
         const height = items?.clientHeight ?? 0;
-        return row > 0 && height > 0 ? Math.max(1, Math.floor(height / row) - 1) : PAGE;
+        return row > 0 && height > 0 ? pageRows(height, row) : PAGE;
     }
     navigate(event) {
         this.forwarded = true;
@@ -360,29 +380,21 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         }
     }
     reveal() {
-        const items = this.partNamed('items');
-        const chosen = this.options.find((option) => option.selected && !option.hidden);
-        if (!items || !chosen) {
+        if (this.data.records) {
+            this.data.center(this.values[0] ?? '');
             return;
         }
-        for (let pass = 0; pass < 2; pass += 1) {
-            const box = items.getBoundingClientRect();
-            const row = chosen.getBoundingClientRect();
-            if (box.height === 0 || row.height === 0) {
-                return;
-            }
-            const off = row.top + row.height / 2 - (box.top + box.height / 2);
-            if (Math.abs(off) < 1) {
-                return;
-            }
-            items.scrollTop += off;
+        const items = this.partNamed('items');
+        const chosen = this.options.find((option) => option.selected && !option.hidden);
+        if (items && chosen) {
+            centerInView(items, chosen);
         }
     }
     place() {
         this.forgetRemoved();
         const needle = this.filter.trim().toLowerCase();
         const chosen = new Set(this.values);
-        for (const option of this.options) {
+        for (const option of this.entries) {
             option.hidden = needle !== '' && !option.text.toLowerCase().includes(needle);
             option.selected = chosen.has(option.value);
         }
@@ -398,20 +410,10 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         if (rescue && !shown.some((option) => option.value === this.activeValue)) {
             this.activeValue = shown.find((option) => !option.disabled)?.value ?? '';
         }
-        for (const option of this.options) {
+        for (const option of this.entries) {
             option.active = option.value === this.activeValue;
         }
-        if (needle === '' || !paintable()) {
-            matched.delete(this);
-        }
-        else {
-            matched.set(this, shown.flatMap((option) => rangeFor(option, needle)));
-        }
-        paintMatches();
-        const anyShown = shown.length > 0;
-        if (anyShown !== this.hasMatches) {
-            this.hasMatches = anyShown;
-        }
+        this.hasMatches = shown.length > 0;
         this.counted = true;
     }
     get owned() {
@@ -422,15 +424,19 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         if (this.owned) {
             return;
         }
-        const present = new Set(this.options.map((option) => option.value));
+        const present = new Set(this.entries.map((option) => option.value));
         const gone = this.values.filter((value) => this.seen.has(value) && !present.has(value));
         this.seen = present;
         if (gone.length > 0) {
             this.value = this.values.filter((value) => !gone.includes(value)).join(',');
         }
     }
-    followActive() {
-        const active = this.shown.find((option) => option.value === this.activeValue);
+    followActive(changed) {
+        if (this.data.records &&
+            !this.data.follow(changed.has('activeValue') || changed.has('filter'))) {
+            return;
+        }
+        const active = this.elements.find((option) => !option.hidden && option.value === this.activeValue);
         if (active) {
             const items = this.partNamed('items');
             scrollItemIntoView(active, { padding: 4, ...(items ? { scroller: items } : {}) });
@@ -443,19 +449,20 @@ 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);
-        matched.delete(this);
-        paintMatches();
+        this.removeEventListener('click', this.handleClick, true);
+        markMatches(this, [], '');
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -476,7 +483,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         }
         this.toggleState('empty', !this.showsOptions);
         this.toggleState('loading', this.loading);
-        this.toggleState('error', this.loadError !== '');
+        this.toggleState('error', this.failed);
         this.toggleState('no-results', this.noResults);
     }
     seedDeclared() {
@@ -498,14 +505,15 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         if (!list || !('ariaActiveDescendantElement' in list)) {
             return;
         }
-        const active = this.options.find((option) => option.value === this.currentValue);
+        const active = this.elements.find((option) => option.value === this.currentValue);
         list.ariaActiveDescendantElement = active ?? null;
     }
     updated(changed) {
         super.updated(changed);
-        this.followActive();
+        this.followActive(changed);
         this.sync();
         this.linkActive();
+        markMatches(this, this.elements.filter((option) => !option.hidden), this.filter.trim());
     }
     takeFilter(control) {
         this.filtering.cancel();
@@ -547,12 +555,12 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
     get showsOptions() {
         return this.counted && !this.loading
             ? this.filter === ''
-                ? this.options.length > 0
+                ? this.entries.length > 0
                 : this.hasMatches
             : true;
     }
     renderStatus(hasContent) {
-        if (this.loadError !== '') {
+        if (this.failed) {
             return html `<p part="error"><slot name="error">${this.loadError}</slot></p>`;
         }
         if (!this.loading && hasContent) {
@@ -571,17 +579,17 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         return (this.counted &&
             !this.loading &&
             this.filter !== '' &&
-            this.options.length > 0 &&
+            this.entries.length > 0 &&
             !this.hasMatches);
     }
+    get failed() {
+        return Boolean(this.loadError);
+    }
     renderLive(hasContent) {
-        if (this.loadError !== '') {
-            return html `<span part="live" role="status">${this.loadError}</span>`;
-        }
-        if (this.noResults && this.noResultsText !== undefined) {
-            return html `<span part="live" role="status">${this.noResultsText}</span>`;
-        }
-        return super.renderLive(hasContent);
+        const words = this.loadError || (this.noResults ? this.noResultsText : undefined);
+        return words === undefined
+            ? super.renderLive(hasContent)
+            : html `<span part="live" role="status">${words}</span>`;
     }
     render() {
         const shown = this.showsOptions;
@@ -594,7 +602,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
               <input
                 part="search-field"
                 type="text"
-                autocomplete=${this.autocomplete || nothing}
+                autocomplete="off"
                 spellcheck="false"
                 .value=${this.filter}
                 placeholder=${this.filterLabel}
@@ -617,14 +625,22 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         aria-labelledby=${this.labeled ? this.labelId : nothing}
         aria-multiselectable=${this.multiple ? 'true' : nothing}
         aria-required=${this.required ? 'true' : nothing}
-        ${''}
         tabindex=${this.filterable ? nothing : this.isDisabled ? -1 : 0}
         @scroll=${this.handleScroll}
       >
-        <slot @slotchange=${() => this.place()}></slot>
+        ${this.data.render() ?? html `<slot @slotchange=${() => this.requestUpdate()}></slot>`}
         ${this.renderStatus(shown)}
       </div>
-      ${this.renderLive(shown)}${this.renderHint()}${this.renderFeedback()}`;
+      ${this.renderLive(shown)}${this.renderHint()}${this.renderFeedback()}${this.autocomplete === 'off'
+            ? nothing
+            : drawAutofill({
+                autocomplete: this.autocomplete,
+                disabled: this.isDisabled,
+                multiple: this.multiple,
+                onFill: (value) => this.requestValue(value),
+                options: this.childrenKnown ? this.entries : [],
+                value: this.value,
+            })}`;
     }
 };
 __decorate([
@@ -634,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([
@@ -646,8 +663,15 @@ __decorate([
     property({ attribute: 'filter-delay', type: Number })
 ], HelixHeadlessListbox.prototype, "filterDelay", void 0);
 __decorate([
+    words,
     property({ attribute: 'filter-label' })
 ], HelixHeadlessListbox.prototype, "filterLabel", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessListbox.prototype, "items", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessListbox.prototype, "layout", void 0);
 __decorate([
     property({ attribute: 'load-error' })
 ], HelixHeadlessListbox.prototype, "loadError", void 0);
@@ -660,21 +684,27 @@ __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([
-    state()
-], HelixHeadlessListbox.prototype, "activeValue", void 0);
+    words,
+    property({ attribute: 'selected-label' })
+], HelixHeadlessListbox.prototype, "selectedLabel", void 0);
 __decorate([
-    state()
-], HelixHeadlessListbox.prototype, "hasMatches", void 0);
+    words,
+    property({ attribute: 'value-missing-message' })
+], HelixHeadlessListbox.prototype, "valueMissingMessage", void 0);
 __decorate([
     state()
-], HelixHeadlessListbox.prototype, "counted", void 0);
+], HelixHeadlessListbox.prototype, "activeValue", void 0);
 HelixHeadlessListbox = __decorate([
     customElement('helix-headless-listbox')
 ], HelixHeadlessListbox);

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