@fusion.dev/helix-headless 0.147.0 → 0.149.0

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

@@ -1,4 +1,4 @@
-import { type GraphSignalDetail, HelixElement, type ViewportGestureLabels, type ViewportPanDetail, type ViewportZoomDetail } from '@fusion.dev/helix-core';
+import { type GraphSignalDetail, HelixElement, type ViewportPanDetail, type ViewportZoomDetail } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import { type GraphLink, type GraphNode } from './graph-model.js';
 declare const HelixHeadlessGraph_base: (new (...args: any[]) => import("@fusion.dev/helix-core").ViewportElement) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerActiveInterface) & typeof HelixElement;
@@ -41,17 +41,24 @@ declare const HelixHeadlessGraph_base: (new (...args: any[]) => import("@fusion.
  * @slot - The renderer's box, which the drawing is made in.
  * @slot filter-icon - The icon in the search field. Defaults to a magnifying glass.
  * @slot footer - Content below the graph.
+ * @slot fullscreen-icon - Replaces the glyph inside the fullscreen button.
  * @slot header - Content above the graph.
+ * @slot pan-down-icon - Replaces the glyph inside the pan down button.
+ * @slot pan-end-icon - Replaces the glyph inside the button that pans toward the end of a line of text.
+ * @slot pan-start-icon - Replaces the glyph inside the button that pans toward the start of a line of text.
+ * @slot pan-up-icon - Replaces the glyph inside the pan up button.
+ * @slot zoom-in-icon - Replaces the glyph inside the zoom-in button.
+ * @slot zoom-out-icon - Replaces the glyph inside the zoom-out button.
  *
  * @event {HelixActivateEvent} helix-activate - A note was selected, in the list or in the drawing. The detail's `value` is its `id`.
  * @event {HelixBeforeActivateEvent} helix-before-activate - A note is about to be selected. Cancelable: cancel it to keep the selection in your own state.
  * @event {HelixGraphFilterEvent} helix-graph-filter - A group in the legend was pressed, to show or hide its notes. The detail's `hidden` is every group that would be hidden. Cancelable: cancel it to keep the groups as they were, or to set `hiddenGroups` yourself.
  * @event {HelixGraphLayoutEvent} helix-graph-layout - A layout settled, with where it put each note, sent by `laidOut()`. Keep the positions and pass them back as each note's `x` and `y`, and `z` where a renderer draws in three dimensions.
- * @event {HelixGraphPanEvent} helix-graph-pan - A pan button or arrow key was pressed. `connectGraph` moves the drawing.
+ * @event {HelixGraphPanEvent} helix-graph-pan - A pan button or arrow key was pressed. `connectGraph` moves the drawing, then calls `moved()`.
  * @event {HelixGraphPartChangeEvent} helix-graph-part-change - The notes, the links, the selection, the depth or the gestures changed. Used by `connectGraph`; pages do not need to listen for it.
  * @event {HelixGraphReadyEvent} helix-graph-ready - The graph has been drawn whole, laid out and settled. Sent each time `drawn()` says it is drawn after it was not.
  * @event {HelixGraphSignalEvent} helix-graph-signal - Something passed between two notes, sent by `signal()`. Used by `connectGraph`; pages do not need to listen for it.
- * @event {HelixGraphZoomEvent} helix-graph-zoom - A zoom button or key was pressed. `connectGraph` zooms the drawing.
+ * @event {HelixGraphZoomEvent} helix-graph-zoom - A zoom button or key was pressed. `connectGraph` zooms the drawing, then calls `moved()`.
  *
  * @csspart after - The room the notes after those drawn would take, so the list scrolls its whole length.
  * @csspart before - The room the notes before those drawn would take.
@@ -70,7 +77,7 @@ declare const HelixHeadlessGraph_base: (new (...args: any[]) => import("@fusion.
  * @csspart legend-item-hidden - A group in the legend whose notes are hidden.
  * @csspart legend-swatch - The mark in a group's color, before its name.
  * @csspart list - The list of notes, which draws only the rows in view.
- * @csspart live - What screen readers hear when a search changes how many notes there are.
+ * @csspart live - What screen readers hear: how many notes there are when a search or the legend changes it, and which way the drawing went after a key or a control moved it.
  * @csspart note - One note in the list.
  * @csspart note-cursor - The note the keyboard is on in the list.
  * @csspart note-linked - A note linked to or from the selected one.
@@ -91,20 +98,48 @@ declare const HelixHeadlessGraph_base: (new (...args: any[]) => import("@fusion.
  * @csspart zoom-in - The zoom in button.
  * @csspart zoom-out - The zoom out button.
  *
+ * @cssstate empty - The list holds no notes: the graph has none, or a search or the groups hid them all.
  * @cssstate fullscreen - The graph fills the screen.
  * @cssstate idle - The user has been still long enough for the header and footer to fade.
+ * @cssstate local - The drawing shows the selected note's local graph, with `depth`.
+ * @cssstate panel-open - A graph with `no-panel` has the search and the list open over the drawing.
  * @cssstate ready - The graph has been drawn whole, after `helix-graph-ready`.
+ * @cssstate searching - The search field holds words, and the list holds only the notes they find.
+ * @cssstate selected - A note is selected, in the list or in the drawing.
  * @cssstate sharing - The page keeps the plain wheel and one finger, with `gestures="cooperative"` or while a graph with `gestures="activate"` waits to be pressed.
  * @cssstate using - A graph with `gestures="activate"` has been pressed and has the gestures.
  */
 export declare class HelixHeadlessGraph extends HelixHeadlessGraph_base {
-    /** What the list says of a note's count, with `{count}`. */
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-graph': { searchLabel: 'Notiz suchen' } })`.
+     */
+    static words: string;
+    /**
+     * The hint shown when the graph, waiting to be pressed with
+     * `gestures="activate"`, is scrolled or swiped over.
+     */
+    activateHintLabel: string;
+    /**
+     * The name of the group of controls, read by screen readers, which names
+     * what the controls drive rather than the mechanism.
+     */
+    controlsLabel: string;
+    /**
+     * What the list says of how many notes it holds. `{count}` is the count,
+     * written in the locale, and each language writes the forms it has.
+     */
     countLabel: string;
     /**
      * How many links from the selected note to show, for its local graph. Unset
      * shows every note. The list holds what the drawing shows.
      */
     depth?: number;
+    /**
+     * The graph's name where `label` is empty and the host has no
+     * `aria-label`.
+     */
+    fallbackLabel: string;
     /** The groups turned off in the legend, by name, whose notes neither the drawing nor the list shows. A property, never an attribute. */
     hiddenGroups: readonly string[];
     /**
@@ -127,6 +162,14 @@ export declare class HelixHeadlessGraph extends HelixHeadlessGraph_base {
     links: readonly GraphLink[];
     /** How a note that links to the selected one is described, with `{note}`. */
     linksToLabel: string;
+    /** What screen readers hear once the drawing has moved down, after `moved()`. */
+    movedDownLabel: string;
+    /** What screen readers hear once the drawing has moved left, after `moved()`. */
+    movedLeftLabel: string;
+    /** What screen readers hear once the drawing has moved right, after `moved()`. */
+    movedRightLabel: string;
+    /** What screen readers hear once the drawing has moved up, after `moved()`. */
+    movedUpLabel: string;
     /** The notes. A property, never an attribute. */
     nodes: readonly GraphNode[];
     /**
@@ -141,6 +184,19 @@ export declare class HelixHeadlessGraph extends HelixHeadlessGraph_base {
     searchLabel: string;
     /** How the selected note is described in the list. */
     selectedLabel: string;
+    /** The hint shown when one finger swipes over the graph with `gestures="cooperative"`. */
+    twoFingerHintLabel: string;
+    /** The line shown while the graph, with `gestures="activate"`, has the gestures. */
+    usingLabel: string;
+    /**
+     * The hint shown when the wheel scrolls past the graph with
+     * `gestures="cooperative"`. `{key}` is ⌘ on a Mac and Ctrl elsewhere.
+     */
+    wheelHintLabel: string;
+    /** What screen readers hear once the drawing has zoomed in, after `moved()`. */
+    zoomedInLabel: string;
+    /** What screen readers hear once the drawing has zoomed out, after `moved()`. */
+    zoomedOutLabel: string;
     /** What the search field holds. */
     private query;
     /** The row the keyboard is on, as an index into the list. */
@@ -163,8 +219,15 @@ export declare class HelixHeadlessGraph extends HelixHeadlessGraph_base {
     private groups;
     /** Whether the graph has been drawn whole, which `drawn()` says. */
     private whole;
-    /** How many notes there were when the count was last said. */
+    /** What the live region says now. */
     private said;
+    /**
+     * Which way a reader last asked the drawing to go, by a key or a control,
+     * until `moved()` says it went: a side, `in` or `out`.
+     */
+    private asked;
+    /** Whether the next change of the list's rows is one a reader asked for by the legend, whose count is then said. */
+    private countAsked;
     private readonly virtualize;
     /**
      * @internal The notes the drawing shows, which `connectGraph` reads: those
@@ -205,16 +268,34 @@ export declare class HelixHeadlessGraph extends HelixHeadlessGraph_base {
     signal(from: string, to: string, options?: {
         tone?: GraphSignalDetail['tone'];
     }): void;
+    /**
+     * Says the drawing moved the way a reader asked, by a key or a control:
+     * the live region says "Moved right" or "Zoomed in" in the frame's words.
+     * Called by `connectGraph` once the renderer has moved; a page answering
+     * `helix-graph-pan` and `helix-graph-zoom` itself calls it once its view
+     * has moved.
+     *
+     * **Said once the drawing has moved, and only then.** The frame asks and
+     * the renderer moves, so a frame with nothing to answer it says nothing: a
+     * move said that never happened is worse than silence.
+     */
+    moved(): void;
+    /**
+     * Puts words in the live region. **The same words twice differ by a space
+     * no reader hears**, since a region whose text does not change is not read
+     * again, and a second "Moved left" is news as much as the first.
+     */
+    private say;
+    protected firstUpdated(changed: PropertyValues): void;
     protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
+    /** The pan request, and the side it goes to, which `moved()` then says. */
     protected panEvent(detail: ViewportPanDetail): Event;
+    /** The zoom request, and which way it goes, which `moved()` then says. */
     protected zoomEvent(detail: ViewportZoomDetail): Event;
     protected get restingControls(): string;
-    protected get restingControlsLabel(): string;
     /** Which gestures the renderer takes, which `connectGraph` hears from here. */
     protected gesturesChanged(): void;
-    /** What the graph says about its gestures where the page does not say it. */
-    protected get restingGestureLabels(): ViewportGestureLabels;
     /** How many notes the list holds, in the page's numbers. */
     private countText;
     /** How a row stands to the selected note, in words, or nothing where it does not. */
@@ -255,14 +336,20 @@ export declare class HelixHeadlessGraph extends HelixHeadlessGraph_base {
      * drawing: a reader moving through the list was moving the graph under it.
      */
     private readonly handleListKeydown;
-    /** What has been typed toward a note's name, and when the last letter came. */
-    private typed;
+    /** What has been typed toward a note's name. */
+    private readonly typed;
     /**
-     * Moves to the next note whose name starts with what was typed, as a
-     * listbox does. Letters within half a second of each other run together,
-     * and a repeated letter steps through the names that start with it.
+     * Moves to the next note whose name starts with what was typed, through
+     * core's `Typeahead`, as a listbox does: letters within half a second run
+     * together, and a repeated letter steps through the names that start with it.
      */
     private typeahead;
+    /**
+     * How many rows Page Down and Page Up move: the rows that fit in the list's
+     * box, or in the window where the list does not scroll, less one, so the
+     * row at one edge lands at the other.
+     */
+    private pageRows;
     /**
      * The search field's keys, which belong to the field and never pan the
      * graph. Escape empties a search that has words in it, and passes through

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

@@ -4,18 +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, 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';
-const PAGE = 10;
+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;
@@ -24,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;
@@ -38,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,
@@ -53,8 +65,8 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
                 ArrowUp: this.cursor - 1,
                 End: this.entries.length - 1,
                 Home: 0,
-                PageDown: this.cursor + PAGE,
-                PageUp: this.cursor - PAGE,
+                PageDown: this.cursor + this.pageRows(),
+                PageUp: this.cursor - this.pageRows(),
             };
             if (event.key in moves) {
                 event.preventDefault();
@@ -74,7 +86,7 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
                 this.typeahead(event.key);
             }
         };
-        this.typed = { at: 0, text: '' };
+        this.typed = new Typeahead();
         this.handleSearchKeydown = (event) => {
             if (event.key === 'ArrowDown') {
                 event.preventDefault();
@@ -100,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;
     }
@@ -122,15 +135,40 @@ 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);
         this.toggleState('idle', this.resting);
+        this.toggleState('panel-open', this.noPanel && this.panelOpen);
+        this.toggleState('searching', this.query.trim() !== '');
+        this.toggleState('selected', this.active !== '');
         if (changed.has('links')) {
             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);
@@ -141,13 +179,29 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
                 ? within(this.adjacency, this.active, Math.max(0, this.depth))
                 : undefined;
             this.kept = withoutGroups(this.nodes, local, this.hiddenGroups);
+            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.cursor = 0;
+            this.toggleState('empty', this.entries.length === 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());
             }
         }
     }
@@ -160,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);
@@ -198,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 '';
         }
@@ -213,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() {
@@ -272,23 +314,16 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
         return this.entries.length > 0 && (cursor < first || cursor >= last) ? cursor : undefined;
     }
     typeahead(letter) {
-        const now = Date.now();
-        const text = now - this.typed.at < 500 ? this.typed.text + letter : letter;
-        this.typed = { at: now, text };
-        const wanted = text.toLocaleLowerCase();
-        const repeated = [...wanted].every((one) => one === wanted[0]);
-        const prefix = repeated ? (wanted[0] ?? '') : wanted;
-        const entries = this.entries;
-        const start = repeated ? this.cursor + 1 : this.cursor;
-        for (let step = 0; step < entries.length; step += 1) {
-            const at = (start + step) % entries.length;
-            const entry = entries[at];
-            if (entry && nameOf(entry.node).toLocaleLowerCase().startsWith(prefix)) {
-                this.moveTo(at);
-                return;
-            }
+        const at = this.typed.match(letter, this.entries.map((entry) => nameOf(entry.node)), this.cursor);
+        if (at >= 0) {
+            this.moveTo(at);
         }
     }
+    pageRows() {
+        const room = scrollRoom(this.partNamed('list'));
+        const tall = this.virtualize.sizeOf(this.cursor) || 32;
+        return Math.max(1, Math.floor(room / tall) - 1);
+    }
     togglePanel(open = !this.panelOpen) {
         const inside = this.panelOpen && this.partNamed('panel')?.contains(this.shadowRoot?.activeElement ?? null);
         this.panelOpen = open;
@@ -373,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}
@@ -436,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);
@@ -451,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);
@@ -472,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);
@@ -489,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.
      *
@@ -156,8 +169,16 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      */
     rows: number;
     /**
-     * What the `selection` part says after the selection changes, with `{count}` for
-     * how many cells are selected.
+     * What the readout adds for a selected cell, under `selection-mode`, after
+     * where the cell stands: "Day 1: 0 (1 of 14, selected)". Empty adds
+     * nothing.
+     */
+    selectedLabel: string;
+    /**
+     * 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;
     /**
@@ -166,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.
      *
@@ -189,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;
     /**
@@ -409,6 +436,12 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      * pitch is `cell + gap` and both are measured.
      */
     protected renderTooltip(): TemplateResult | typeof nothing;
+    /**
+     * The readout's cursor: the pointer, with the selected word after where a
+     * selected cell stands, so a reader moving through the strip hears which
+     * cells are in the selection and not only how many.
+     */
+    private reading;
     /**
      * Which drawn cell the pointer is over, or -1.
      *