@fusion.dev/helix-headless 0.148.0 → 0.149.1

package/dist/graph/root/graph-root.js

@@ -4,17 +4,20 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, fillTemplate, formatNumbers, HelixElement, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, MixinControllerActive, MixinViewport, scrollItemIntoView, scrollRoom, Typeahead, VirtualizeController, } from '@fusion.dev/helix-core';
+import { auditName, customElement, formatWords, HelixElement, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, MixinControllerActive, MixinViewport, scrollItemIntoView, scrollRoom, Typeahead, VirtualizeController, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { list, magnifyingGlass } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
-import { adjacencyOf, entriesOf, groupsOf, nameOf, sortedOf, within, withoutGroups, } from './graph-model.js';
+import { adjacencyOf, cursorAfter, entriesOf, groupsOf, nameOf, sortedOf, within, withoutGroups, } from './graph-model.js';
 let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinControllerActive(HelixElement)) {
     constructor() {
         super(...arguments);
-        this.countLabel = '{count} notes';
+        this.activateHintLabel = 'Press the graph to use it';
+        this.controlsLabel = 'Graph controls';
+        this.countLabel = '{count, plural, one {# note} other {# notes}}';
+        this.fallbackLabel = 'Graph';
         this.hiddenGroups = [];
         this.label = '';
         this.legend = false;
@@ -23,11 +26,20 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
         this.linkedFromLabel = 'Linked from {note}';
         this.links = [];
         this.linksToLabel = 'Links to {note}';
+        this.movedDownLabel = 'Moved down';
+        this.movedLeftLabel = 'Moved left';
+        this.movedRightLabel = 'Moved right';
+        this.movedUpLabel = 'Moved up';
         this.nodes = [];
         this.noPanel = false;
         this.notesLabel = 'Notes';
         this.searchLabel = 'Find a note';
         this.selectedLabel = 'Selected';
+        this.twoFingerHintLabel = 'Use two fingers to move the graph';
+        this.usingLabel = 'Using the graph. Press Escape to scroll the page again.';
+        this.wheelHintLabel = 'Use {key} and scroll to zoom the graph';
+        this.zoomedInLabel = 'Zoomed in';
+        this.zoomedOutLabel = 'Zoomed out';
         this.query = '';
         this.cursor = 0;
         this.panelOpen = false;
@@ -37,6 +49,7 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
         this.groups = [];
         this.whole = false;
         this.said = '';
+        this.countAsked = false;
         this.virtualize = new VirtualizeController(this, {
             container: () => this.partNamed('list'),
             count: () => this.entries.length,
@@ -99,6 +112,7 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
             this.query = event.target.value;
         };
     }
+    static { this.words = 'helix-graph'; }
     get shown() {
         return this.kept;
     }
@@ -121,6 +135,28 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
     signal(from, to, options = {}) {
         this.dispatchEvent(new HelixGraphSignalEvent({ from, to, tone: options.tone }));
     }
+    moved() {
+        const asked = this.asked;
+        this.asked = undefined;
+        const words = {
+            down: this.movedDownLabel,
+            in: this.zoomedInLabel,
+            left: this.movedLeftLabel,
+            out: this.zoomedOutLabel,
+            right: this.movedRightLabel,
+            up: this.movedUpLabel,
+        };
+        if (asked !== undefined) {
+            this.say(words[asked] ?? '');
+        }
+    }
+    say(words) {
+        this.said = words !== '' && words === this.said ? `${words}\u00a0` : words;
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        auditName(this, () => null, 'Give it a `label` that says what the notes are, such as "Research notes".', () => this.label !== '');
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
         this.toggleState('fullscreen', this.filled);
@@ -132,7 +168,7 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
             this.adjacency = adjacencyOf(this.links);
         }
         if (changed.has('nodes')) {
-            this.sorted = sortedOf(this.nodes, this.closest?.('[lang]')?.getAttribute('lang') ?? '');
+            this.sorted = sortedOf(this.nodes, wordsLocale(this));
         }
         if (changed.has('nodes')) {
             this.groups = groupsOf(this.nodes);
@@ -146,12 +182,26 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
             this.toggleState('local', local !== undefined);
         }
         if (['nodes', 'links', 'active', 'depth', 'hiddenGroups', 'query'].some((name) => changed.has(name))) {
+            const was = this.entries[this.cursor]?.node.id;
             this.entries = entriesOf(this.sorted, this.adjacency, this.active, this.query, this.kept);
             this.toggleState('empty', this.entries.length === 0);
-            this.cursor = 0;
             const list = this.partNamed('list');
-            if (list) {
-                list.scrollTop = 0;
+            if (['active', 'depth', 'hiddenGroups', 'query'].some((name) => changed.has(name)) ||
+                !this.hasUpdated) {
+                this.cursor = 0;
+                if (list) {
+                    list.scrollTop = 0;
+                }
+            }
+            else {
+                this.cursor = cursorAfter(this.entries, was, this.cursor);
+                if (list && this.shadowRoot?.activeElement === list) {
+                    void this.updateComplete.then(() => this.revealCursor());
+                }
+            }
+            if ((changed.has('query') && changed.get('query') !== undefined) || this.countAsked) {
+                this.countAsked = false;
+                this.say(this.countText());
             }
         }
     }
@@ -164,36 +214,23 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
         else if (changed.has('active') || changed.has('depth') || changed.has('hiddenGroups')) {
             this.dispatchEvent(new HelixGraphPartChangeEvent({ kind: 'focus' }));
         }
-        if (changed.has('query') && changed.get('query') !== undefined) {
-            this.said = this.countText();
-        }
     }
     panEvent(detail) {
+        this.asked = this.sideOf(detail.to);
         return new HelixGraphPanEvent(detail);
     }
     zoomEvent(detail) {
+        this.asked = detail.by > 0 ? 'in' : detail.by < 0 ? 'out' : undefined;
         return new HelixGraphZoomEvent(detail);
     }
     get restingControls() {
         return 'zoom fullscreen';
     }
-    get restingControlsLabel() {
-        return 'Graph controls';
-    }
     gesturesChanged() {
         this.dispatchEvent(new HelixGraphPartChangeEvent({ kind: 'gestures' }));
     }
-    get restingGestureLabels() {
-        return {
-            activate: 'Press the graph to use it',
-            twoFinger: 'Use two fingers to move the graph',
-            using: 'Using the graph. Press Escape to scroll the page again.',
-            wheel: 'Use {key} and scroll to zoom the graph',
-        };
-    }
     countText() {
-        const lang = this.closest?.('[lang]')?.getAttribute('lang') ?? '';
-        return fillTemplate(this.countLabel, { count: formatNumbers(lang)(this.entries.length) });
+        return formatWords(this, 'countLabel', { count: this.entries.length });
     }
     relationText(entry) {
         const selected = this.nodes.find((node) => node.id === this.active);
@@ -202,11 +239,11 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
             case 'selected':
                 return this.selectedLabel;
             case 'to':
-                return fillTemplate(this.linkedFromLabel, { note });
+                return formatWords(this, 'linkedFromLabel', { note });
             case 'from':
-                return fillTemplate(this.linksToLabel, { note });
+                return formatWords(this, 'linksToLabel', { note });
             case 'both':
-                return fillTemplate(this.linkedBothLabel, { note });
+                return formatWords(this, 'linkedBothLabel', { note });
             default:
                 return '';
         }
@@ -217,6 +254,7 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
             : [...this.hiddenGroups, name];
         if (this.dispatchEvent(new HelixGraphFilterEvent({ hidden }))) {
             this.hiddenGroups = hidden;
+            this.countAsked = true;
         }
     }
     renderLegend() {
@@ -370,7 +408,7 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
         return html `<div
       part="region"
       role="group"
-      aria-label=${this.label || this.getAttribute?.('aria-label') || 'Graph'}
+      aria-label=${this.label || this.getAttribute?.('aria-label') || this.fallbackLabel}
       tabindex="0"
       @focusin=${this.idle.stir}
       @keydown=${this.handleKeydown}
@@ -433,11 +471,24 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
     }
 };
 __decorate([
+    words,
+    property({ attribute: 'activate-hint-label' })
+], HelixHeadlessGraph.prototype, "activateHintLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'controls-label' })
+], HelixHeadlessGraph.prototype, "controlsLabel", void 0);
+__decorate([
+    words,
     property({ attribute: 'count-label' })
 ], HelixHeadlessGraph.prototype, "countLabel", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessGraph.prototype, "depth", void 0);
+__decorate([
+    words,
+    property({ attribute: 'fallback-label' })
+], HelixHeadlessGraph.prototype, "fallbackLabel", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessGraph.prototype, "hiddenGroups", void 0);
@@ -448,20 +499,40 @@ __decorate([
     property({ type: Boolean })
 ], HelixHeadlessGraph.prototype, "legend", void 0);
 __decorate([
+    words,
     property({ attribute: 'legend-label' })
 ], HelixHeadlessGraph.prototype, "legendLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'linked-both-label' })
 ], HelixHeadlessGraph.prototype, "linkedBothLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'linked-from-label' })
 ], HelixHeadlessGraph.prototype, "linkedFromLabel", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessGraph.prototype, "links", void 0);
 __decorate([
+    words,
     property({ attribute: 'links-to-label' })
 ], HelixHeadlessGraph.prototype, "linksToLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'moved-down-label' })
+], HelixHeadlessGraph.prototype, "movedDownLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'moved-left-label' })
+], HelixHeadlessGraph.prototype, "movedLeftLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'moved-right-label' })
+], HelixHeadlessGraph.prototype, "movedRightLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'moved-up-label' })
+], HelixHeadlessGraph.prototype, "movedUpLabel", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessGraph.prototype, "nodes", void 0);
@@ -469,14 +540,37 @@ __decorate([
     property({ attribute: 'no-panel', reflect: true, type: Boolean })
 ], HelixHeadlessGraph.prototype, "noPanel", void 0);
 __decorate([
+    words,
     property({ attribute: 'notes-label' })
 ], HelixHeadlessGraph.prototype, "notesLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'search-label' })
 ], HelixHeadlessGraph.prototype, "searchLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'selected-label' })
 ], HelixHeadlessGraph.prototype, "selectedLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'two-finger-hint-label' })
+], HelixHeadlessGraph.prototype, "twoFingerHintLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'using-label' })
+], HelixHeadlessGraph.prototype, "usingLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'wheel-hint-label' })
+], HelixHeadlessGraph.prototype, "wheelHintLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'zoomed-in-label' })
+], HelixHeadlessGraph.prototype, "zoomedInLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'zoomed-out-label' })
+], HelixHeadlessGraph.prototype, "zoomedOutLabel", void 0);
 __decorate([
     state()
 ], HelixHeadlessGraph.prototype, "query", void 0);
@@ -486,6 +580,9 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessGraph.prototype, "panelOpen", void 0);
+__decorate([
+    state()
+], HelixHeadlessGraph.prototype, "said", void 0);
 HelixHeadlessGraph = __decorate([
     customElement('helix-headless-graph')
 ], HelixHeadlessGraph);

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

@@ -110,7 +110,13 @@ declare const HelixHeadlessHeatmap_base: typeof HelixElement & (new (...args: an
  */
 export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
     /**
-     * The word the `overview` puts before the busiest reading.
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-heatmap': { emptyText: 'Keine Werte' } })`.
+     */
+    static words: string;
+    /**
+     * The name the `overview` gives the busiest reading, `{busiestLabel}` in
+     * `overview-label`.
      */
     busiestLabel: string;
     /**
@@ -145,6 +151,13 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      * container that cannot get narrow.
      */
     minCell: number;
+    /**
+     * The `overview`'s sentence. `{busiestLabel}` and `{totalLabel}` are
+     * `busiest-label` and `total-label`, `{busiest}` the busiest reading's name
+     * and its reading as the table writes it, and `{total}` the total of the
+     * readings drawn, written in the locale.
+     */
+    overviewLabel: string;
     /**
      * How many rows the strip has.
      *
@@ -162,8 +175,10 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      */
     selectedLabel: string;
     /**
-     * What the `selection` part says after the selection changes, with `{count}` for
-     * how many cells are selected.
+     * What the `selection` part says after the selection changes. `{count}` is
+     * how many cells are selected, written in the locale, and a language that
+     * needs plural forms writes them: `{count, plural, one {# wybrany} few
+     * {# wybrane} many {# wybranych} other {# wybranego}}`.
      */
     selectionLabel: string;
     /**
@@ -172,6 +187,11 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      * Absent selects nothing, and a press or Space does what it did.
      */
     selectionMode?: 'multiple' | 'single';
+    /**
+     * The strip's name where the chart has none: no `aria-label`, `label`, or
+     * table caption.
+     */
+    stripLabel: string;
     /**
      * Lower bounds for the tone buckets, in the order the tones are given.
      *
@@ -195,7 +215,8 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      */
     tones: string;
     /**
-     * The word the `overview` puts before the total of the readings drawn.
+     * The name the `overview` gives the total of the readings drawn,
+     * `{totalLabel}` in `overview-label`.
      */
     totalLabel: string;
     /**

package/dist/heatmap/root/heatmap-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, byRow, CHART_PLOT, commaList, customElement, drawTooltip, fillTemplate, formatNumbers, HelixElement, HelixResizeEvent, MixinChartSource, markRegion, pressedValue, rangeAdd, requestValue, StatusController, searchableById, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
+import { AriaForwardController, byRow, CHART_PLOT, commaList, customElement, drawTooltip, formatWords, HelixElement, HelixResizeEvent, MixinChartSource, markRegion, pressedValue, rangeAdd, requestValue, StatusController, searchableById, words, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import '../../tooltip/index.js';
@@ -16,9 +16,11 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         this.emptyText = 'No readings';
         this.gap = 2;
         this.minCell = 8;
+        this.overviewLabel = '{busiestLabel}: {busiest}; {totalLabel} {total}.';
         this.rows = 1;
         this.selectedLabel = 'selected';
-        this.selectionLabel = '{count} selected';
+        this.selectionLabel = '{count, plural, one {# selected} other {# selected}}';
+        this.stripLabel = 'Heatmap';
         this.thresholds = '';
         this.tones = '';
         this.totalLabel = 'Total';
@@ -73,6 +75,7 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
             }
         };
     }
+    static { this.words = 'helix-heatmap'; }
     get visible() {
         return Math.min(this.points.length, this.room);
     }
@@ -87,7 +90,7 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         }
         requestValue(this, next, (value) => {
             this.value = value;
-            this.status.say(fillTemplate(this.selectionLabel, { count: commaList(value).length }));
+            this.status.say(formatWords(this, 'selectionLabel', { count: commaList(value).length }));
         });
     }
     press(index) {
@@ -208,7 +211,7 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         const chosen = new Set(this.selectionMode ? commaList(this.value) : []);
         return html `<div
         aria-describedby=${readable ? 'helix-chart-summary' : nothing}
-        aria-label=${this.named || 'Heatmap'}
+        aria-label=${this.named || this.stripLabel}
         part="strip"
         id=${CHART_PLOT}
         role=${readable ? 'application' : 'img'}
@@ -254,9 +257,13 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         const { busiest, total } = overviewOf(cells);
         const row = rows[offset + busiest];
         const text = row?.cells[column]?.text ?? '';
-        const most = row ? `${this.busiestLabel}: ${row.label}${text === '' ? '' : `, ${text}`}` : '';
-        const sum = `${this.totalLabel} ${formatNumbers(this.locale)(total)}`;
-        return html `<p id="helix-chart-summary" part="overview">${most ? `${most}; ${sum}` : sum}.</p>`;
+        const said = formatWords(this, 'overviewLabel', {
+            busiest: text === '' ? (row?.label ?? '') : `${row?.label ?? ''}, ${text}`,
+            busiestLabel: this.busiestLabel,
+            total,
+            totalLabel: this.totalLabel,
+        });
+        return html `<p id="helix-chart-summary" part="overview">${said}</p>`;
     }
     renderTooltip() {
         const at = this.pointer.at;
@@ -293,9 +300,11 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
     }
 };
 __decorate([
+    words,
     property({ attribute: 'busiest-label' })
 ], HelixHeadlessHeatmap.prototype, "busiestLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'empty-text' })
 ], HelixHeadlessHeatmap.prototype, "emptyText", void 0);
 __decorate([
@@ -304,18 +313,28 @@ __decorate([
 __decorate([
     property({ attribute: 'min-cell', type: Number })
 ], HelixHeadlessHeatmap.prototype, "minCell", void 0);
+__decorate([
+    words,
+    property({ attribute: 'overview-label' })
+], HelixHeadlessHeatmap.prototype, "overviewLabel", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessHeatmap.prototype, "rows", void 0);
 __decorate([
+    words,
     property({ attribute: 'selected-label' })
 ], HelixHeadlessHeatmap.prototype, "selectedLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'selection-label' })
 ], HelixHeadlessHeatmap.prototype, "selectionLabel", void 0);
 __decorate([
     property({ attribute: 'selection-mode' })
 ], HelixHeadlessHeatmap.prototype, "selectionMode", void 0);
+__decorate([
+    words,
+    property({ attribute: 'strip-label' })
+], HelixHeadlessHeatmap.prototype, "stripLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessHeatmap.prototype, "thresholds", void 0);
@@ -323,6 +342,7 @@ __decorate([
     property()
 ], HelixHeadlessHeatmap.prototype, "tones", void 0);
 __decorate([
+    words,
     property({ attribute: 'total-label' })
 ], HelixHeadlessHeatmap.prototype, "totalLabel", void 0);
 __decorate([

package/dist/icon-button/root/icon-button-root.d.ts

@@ -30,6 +30,11 @@ import { HelixHeadlessButton } from '../../button/root/button-root.js';
  * @csspart button - The inner button.
  */
 export declare class HelixHeadlessIconButton extends HelixHeadlessButton {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-icon-button': { pendingLabel: 'Wird geladen' } })`.
+     */
+    static words: string;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/icon-button/root/icon-button-root.js

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessButton } from '../../button/root/button-root.js';
 let HelixHeadlessIconButton = class HelixHeadlessIconButton extends HelixHeadlessButton {
+    static { this.words = 'helix-icon-button'; }
 };
 HelixHeadlessIconButton = __decorate([
     customElement('helix-headless-icon-button')

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

@@ -69,6 +69,11 @@ declare const HelixHeadlessInput_base: (new (...args: any[]) => import("@fusion.
  * @cssstate invalid - The control has an error to show, from the browser's validation, `validate`, or your `feedback`.
  */
 export declare class HelixHeadlessInput extends HelixHeadlessInput_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-input': { clearLabel: 'Leeren' } })`.
+     */
+    static words: string;
     protected readonly aria: AriaForwardController;
     /** Typed or dragged, so every edit is announced. See `announcesInput`. */
     protected readonly announcesInput = true;

package/dist/input/root/input-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, applyOwnRule, customElement, drawIcon, HelixClearEvent, HelixFormElement, holdCaret, MixinControllerValue, MixinField, restoreValue, submitImplicitly, } from '@fusion.dev/helix-core';
+import { AriaForwardController, applyOwnRule, customElement, drawIcon, HelixClearEvent, HelixFormElement, holdCaret, MixinControllerValue, MixinField, restoreValue, submitImplicitly, words, } from '@fusion.dev/helix-core';
 import { eye, eyeSlash, x } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -59,6 +59,7 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
         this.step = '';
         this.type = 'text';
     }
+    static { this.words = 'helix-input'; }
     get effectiveType() {
         return this.revealed && this.type === 'password' ? 'text' : this.type;
     }
@@ -234,6 +235,7 @@ __decorate([
     property({ type: Boolean })
 ], HelixHeadlessInput.prototype, "clearable", void 0);
 __decorate([
+    words,
     property({ attribute: 'clear-label' })
 ], HelixHeadlessInput.prototype, "clearLabel", void 0);
 __decorate([
@@ -270,6 +272,7 @@ __decorate([
     state()
 ], HelixHeadlessInput.prototype, "revealed", void 0);
 __decorate([
+    words,
     property({ attribute: 'reveal-label' })
 ], HelixHeadlessInput.prototype, "revealLabel", void 0);
 __decorate([

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

@@ -97,6 +97,11 @@ declare const HelixHeadlessLightbox_base: (new (...args: any[]) => import("@fusi
  * @cssstate zoomed - While the shown item is zoomed past its own size.
  */
 export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-lightbox': { nextLabel: 'Weiter' } })`.
+     */
+    static words: string;
     /**
      * Draws the viewer's own previous, next and close controls over the picture,
      * and zoom-out and zoom-in controls where `max-zoom` allows zooming.
@@ -120,6 +125,8 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
      * interface.
      */
     dismissLabel: string;
+    /** The viewer's name where `label` is empty. */
+    fallbackLabel: string;
     /**
      * How long the user can be idle before the header and footer hide, in
      * milliseconds.
@@ -152,7 +159,7 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
     previousLabel: string;
     /**
      * The name of an item with no `label` of its own, with `{index}` and
-     * `{count}` filled in.
+     * `{count}` filled in, written in the locale.
      */
     slideLabel: string;
     /**
@@ -163,7 +170,7 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
     slideRoleLabel: string;
     /**
      * The status text that says which item is shown, with `{index}`, `{count}`
-     * and the item's `{label}` filled in.
+     * and the item's `{label}` filled in, the numbers written in the locale.
      *
      * Announced rather than only drawn, because the picture changing under a
      * reader who cannot see it is otherwise silent. A consumer who has their own
@@ -179,8 +186,11 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
      */
     zoomOutLabel: string;
     /**
-     * What the live region says once a reader has stopped zooming, with the
-     * scale as a whole `{percent}` filled in. Empty it to say nothing.
+     * What the live region says once a reader has stopped zooming. `{scale,
+     * number, percent}` writes the scale as a percentage the way the locale
+     * writes one, such as `150%`, or `150 %` in French. `{percent}` is the same
+     * scale as a whole number, for a sentence that places the sign itself. Empty
+     * it to say nothing.
      */
     zoomStatusLabel: string;
     /** Whether the reader has been still long enough to hide the chrome. */