@fusion.dev/helix-headless 0.148.0 → 0.149.0

package/dist/canvas/describe.js

@@ -0,0 +1,9 @@
+const formatters = new Map();
+export const descriptionOf = (locale, words) => {
+    let found = formatters.get(locale);
+    if (!found) {
+        found = new Intl.ListFormat(locale || undefined, { style: 'narrow', type: 'conjunction' });
+        formatters.set(locale, found);
+    }
+    return found.format(words.filter((one) => Boolean(one)));
+};

package/dist/canvas/neighbor.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Where focus goes when a stop on a board leaves: the arithmetic, kept apart
+ * from the board that moves focus there.
+ *
+ * Shared by the two ways a stop leaves, Delete and the page taking it away,
+ * so a reader lands in the same place either way.
+ */
+/**
+ * The first stop after `at` in `walk` that `kept` keeps, or, with none after
+ * it, the nearest one before it. Undefined where none is kept.
+ *
+ * @param walk Every stop's key, in the order the arrow keys walk them.
+ * @param at Where the stop that left was, as an index into `walk`, or `-1`
+ *   for nowhere, which takes the first stop kept.
+ * @param kept Whether a stop is still there.
+ */
+export declare const neighborOf: (walk: readonly string[], at: number, kept: (key: string) => boolean) => string | undefined;

package/dist/canvas/neighbor.js

@@ -0,0 +1 @@
+export const neighborOf = (walk, at, kept) => walk.slice(at + 1).find(kept) ?? walk.slice(0, Math.max(at, 0)).reverse().find(kept);

package/dist/canvas/node/canvas-node.js

@@ -4,9 +4,10 @@ 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, PlacementController } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, PlacementController, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { descriptionOf } from '../describe.js';
 const DRAWN = [
     'group',
     'height',
@@ -82,7 +83,7 @@ let HelixHeadlessCanvasNode = class HelixHeadlessCanvasNode extends HelixElement
     >
       <slot id="content"></slot>
       <slot name="description"></slot>
-      <span id="about" hidden>${[this.status, this.meaning, this.links].filter(Boolean).join(', ')}</span>
+      <span id="about" hidden>${descriptionOf(wordsLocale(this), [this.status, this.meaning, this.links])}</span>
     </div>
     ${this.connectable
             ? html `<span part="handle handle-top" aria-hidden="true" data-side="top"></span>

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

@@ -1,4 +1,4 @@
-import { type CanvasView, HelixElement, type ViewportGestureLabels, type ViewportPanDetail, type ViewportWay, type ViewportZoomDetail } from '@fusion.dev/helix-core';
+import { type CanvasView, HelixElement, type ViewportPanDetail, type ViewportWay, type ViewportZoomDetail } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import { type CanvasDocument, type CanvasTone } from './canvas-document.js';
 export type { CanvasDocument, CanvasEdge, CanvasEdgeProps, CanvasEnd, CanvasNode, CanvasNodeProps, CanvasPath, CanvasSide, CanvasTone, } from './canvas-document.js';
@@ -69,6 +69,11 @@ declare const HelixHeadlessCanvas_base: (new (...args: any[]) => import("@fusion
  * - Delete on a card or a connection dispatches `helix-remove`. The event names
  *   every connection that removing the card would leave without an end.
  *
+ * Once your page removes what Delete asked for, focus moves to the next stop,
+ * to the one before where it was the last, and to the board where none is
+ * left. A focused card your page removes for its own reasons hands focus on
+ * the same way, unless the reader has already moved focus somewhere else.
+ *
  * The board applies a move itself, because the card already exists. A
  * connection is a new element, and React discards an element the board adds to
  * its markup on the next render, so you write the connection.
@@ -149,10 +154,20 @@ declare const HelixHeadlessCanvas_base: (new (...args: any[]) => import("@fusion
  * @cssstate using - A board with `gestures="activate"` has been pressed and has the gestures.
  */
 export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-canvas': { stoppedLabel: 'Verbinden beendet.' } })`.
+     */
+    static words: string;
     /** The connection whose target had focus as an update began, and that target. */
     private focusedEdge;
     /** Each card is assigned to its own slot, in the order the arrows walk them. */
     static shadowRootOptions: ShadowRootInit;
+    /**
+     * The hint shown when the board, waiting to be pressed with
+     * `gestures="activate"`, is scrolled or swiped over.
+     */
+    activateHintLabel: string;
     /** The text read with a card to say where its connections come from, with `{cards}`. */
     comesFromLabel: string;
     /** The text announced when a connection is requested, with `{from}` and `{to}`. */
@@ -172,6 +187,13 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
      * this, so a reader hears the ends first and what the line says after.
      */
     connectionLabel: string;
+    /**
+     * The name of the group of controls, read by screen readers, which names
+     * what the controls drive rather than the mechanism.
+     */
+    controlsLabel: string;
+    /** The board's name where `label` is empty. */
+    fallbackLabel: string;
     /**
      * The accessible name for the board. Required.
      *
@@ -192,6 +214,11 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
      * Third", rather than with a comma this component chose.
      */
     leadsToLabel: string;
+    /**
+     * The text read with a card that has connections both ways. `{leadsTo}` is
+     * `leads-to-label` and `{comesFrom}` is `comes-from-label`, each filled in.
+     */
+    linkedLabel: string;
     /**
      * What screen readers hear after a key moves a card, with `{name}` for the
      * card and `{x}` and `{y}` for where it now is, in the document's units.
@@ -276,7 +303,8 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
     selectedLabel: string;
     /**
      * What screen readers hear after the selection grows or shrinks, with
-     * `{count}` for how many cards and connections are selected: by Space, a
+     * `{count}` for how many cards and connections are selected, written in the
+     * locale, where a language that needs plural forms writes them: by Space, a
      * click with Shift, Command or Control, Command or Control with A, a box
      * drawn across the board, or Escape.
      *
@@ -312,9 +340,18 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
      * told the same. A tone left out is not read.
      */
     toneLabels: Partial<Record<CanvasTone, string>>;
+    /** The hint shown when one finger swipes over the board with `gestures="cooperative"`. */
+    twoFingerHintLabel: string;
+    /** The line shown while the board, with `gestures="activate"`, has the gestures. */
+    usingLabel: string;
+    /**
+     * The hint shown when the wheel scrolls past the board with
+     * `gestures="cooperative"`. `{key}` is ⌘ on a Mac and Ctrl elsewhere.
+     */
+    wheelHintLabel: string;
     /**
      * What screen readers hear after a zoom button or key, with `{zoom}` for the
-     * zoom as a percentage, written the way the page's language writes one.
+     * zoom as a percentage, written the way the element's locale writes one.
      */
     zoomedLabel: string;
     /** The card or connection that holds the board's one tab stop, by its key. */
@@ -336,8 +373,6 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
      * once, so a second "2 selected" differs by a space no reader says.
      */
     private say;
-    /** Numbers as the page's language writes them. */
-    private get numbers();
     /**
      * Where focus goes once something a reader removed has gone.
      *
@@ -347,6 +382,17 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
      * or, for a page that declines, off one that stays.
      */
     private refocus;
+    /**
+     * The card focus is on, while it is.
+     *
+     * **Kept so a card the page takes away hands focus on**, as Delete does: a
+     * filter, an undo or another person's edit removed the card a reader was on,
+     * and the browser dropped focus to the page's body, putting the reader back
+     * at its top with nothing said. Map does the same for its markers.
+     */
+    private focusedCard;
+    /** The stops in the order the arrows walked them on the last update. */
+    private walked;
     /**
      * Where the plane's corner was on the last render, in the document's units.
      *
@@ -463,9 +509,6 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
     /** The events this family names for itself, the surface being shared. */
     protected panEvent(detail: ViewportPanDetail): Event;
     protected zoomEvent(detail: ViewportZoomDetail): Event;
-    protected get restingControlsLabel(): string;
-    /** What the board says about its gestures where the page does not say it. */
-    protected get restingGestureLabels(): ViewportGestureLabels;
     /**
      * Zoom and fullscreen, without the pad.
      *
@@ -859,6 +902,20 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
      * own, ended by its release.
      */
     private readonly handleFocusOut;
+    /**
+     * Forgets the card focus left, unless the page took it away.
+     *
+     * Focus leaving for nothing is a press on the page or the card removed, and
+     * which one is known once the removal has finished: a card still on the
+     * board was left, and one gone is owed a place for focus to land.
+     */
+    private forget;
+    /**
+     * Gives focus on from a card the page took away with focus in it: to the
+     * next stop, the one before where it was the last, and the board where none
+     * is left. Not where the reader has gone somewhere else already.
+     */
+    private handOn;
     /** Brings a card into view, where it is not already whole in it. */
     private reveal;
     /**

package/dist/canvas/root/canvas-root.js

@@ -4,11 +4,13 @@ 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 { assignSlots, capturePointer, customElement, fillTemplate, formatNumbers, HelixBeforeMoveEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixConnectEvent, HelixElement, HelixMoveEvent, HelixReconnectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixSelectEvent, hostAria, inlineStep, isRtl, MixinViewport, wordsConverter, } from '@fusion.dev/helix-core';
+import { assignSlots, capturePointer, customElement, formatPercent, formatWords, HelixBeforeMoveEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixConnectEvent, HelixElement, HelixMoveEvent, HelixReconnectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixSelectEvent, hostAria, inlineStep, isRtl, MixinViewport, words, wordsConverter, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { descriptionOf } from '../describe.js';
 import { HelixHeadlessCanvasEdge } from '../edge/canvas-edge.js';
 import { EdgePan } from '../edge-pan.js';
+import { neighborOf } from '../neighbor.js';
 import { HelixHeadlessCanvasNode } from '../node/canvas-node.js';
 import { snapBox, snapTo, stepTo } from '../snap.js';
 import { colorOf, connector, distanceTo, ends, extent, inside, port, reading, sideNear, } from './canvas-document.js';
@@ -40,13 +42,17 @@ const size = (value) => (value > 0 ? `${value}px` : undefined);
 let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixElement) {
     constructor() {
         super(...arguments);
+        this.activateHintLabel = 'Press the board to use it';
         this.comesFromLabel = 'from {cards}';
         this.connectedLabel = 'Asked to connect {from} to {to}.';
         this.connectingLabel = 'Connecting from {from}. Move to another card and press Enter, or Escape to stop.';
         this.connectionLabel = 'From {from} to {to}';
+        this.controlsLabel = 'Board controls';
+        this.fallbackLabel = 'Canvas';
         this.label = '';
         this.labelEditorLabel = 'Label for {name}';
         this.leadsToLabel = 'leads to {cards}';
+        this.linkedLabel = '{leadsTo}; {comesFrom}';
         this.movedLabel = '{name} moved to {x}, {y}';
         this.readOnly = false;
         this.reconnectingLabel = 'Moving the end of the connection from {from} to {to}. Move to a card and press Enter, or Escape to stop.';
@@ -56,8 +62,12 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         this.selectionLabel = '{count} selected';
         this.stoppedLabel = 'Stopped connecting.';
         this.toneLabels = {};
+        this.twoFingerHintLabel = 'Use two fingers to move the board';
+        this.usingLabel = 'Using the board. Press Escape to scroll the page again.';
+        this.wheelHintLabel = 'Use {key} and scroll to zoom the board';
         this.zoomedLabel = 'Zoom {zoom}';
         this.said = '';
+        this.walked = [];
         this.at = { x: 0, y: 0, zoom: 1 };
         this.direct = false;
         this.touched = false;
@@ -468,10 +478,10 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
                 };
                 if (this.requestMove(detail)) {
                     this.dispatchEvent(new HelixMoveEvent(detail));
-                    this.say(fillTemplate(this.movedLabel, {
+                    this.say(formatWords(this, 'movedLabel', {
                         name: this.nameOf(card.name),
-                        x: this.numbers(card.x),
-                        y: this.numbers(card.y),
+                        x: card.x,
+                        y: card.y,
                     }));
                 }
                 void this.updateComplete.then(() => this.reveal(card.name));
@@ -488,10 +498,10 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
                 const detail = { nodes: [{ name: card.name, ...box }] };
                 if (this.requestMove(detail)) {
                     this.dispatchEvent(new HelixMoveEvent(detail));
-                    this.say(fillTemplate(this.resizedLabel, {
-                        height: this.numbers(box.height),
+                    this.say(formatWords(this, 'resizedLabel', {
+                        height: box.height,
                         name: this.nameOf(card.name),
-                        width: this.numbers(box.width),
+                        width: box.width,
                     }));
                 }
                 return;
@@ -591,6 +601,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
                 return;
             }
             this.refocus = undefined;
+            this.focusedCard = card;
             this.stop = edge ?? card?.name;
             if (!this.pointing && this.stop !== undefined && !this.picked.includes(this.stop)) {
                 this.choose(this.stop);
@@ -606,6 +617,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         };
         this.handleFocusOut = (event) => {
             const next = event.relatedTarget;
+            this.forget(this.cardOf(event), next);
             const linking = this.linking;
             if (!linking ||
                 linking.pointer !== undefined ||
@@ -669,6 +681,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             this.requestUpdate();
         };
     }
+    static { this.words = 'helix-canvas'; }
     static { this.shadowRootOptions = {
         ...HelixElement.shadowRootOptions,
         slotAssignment: 'manual',
@@ -676,9 +689,6 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
     say(words) {
         this.said = words !== '' && words === this.said ? `${words}\u00a0` : words;
     }
-    get numbers() {
-        return formatNumbers(this.closest('[lang]')?.getAttribute('lang') ?? '');
-    }
     get box() {
         const viewport = this.renderRoot?.querySelector('[part="viewport"]');
         return {
@@ -784,17 +794,6 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
     zoomEvent(detail) {
         return new HelixCanvasZoomEvent(detail);
     }
-    get restingControlsLabel() {
-        return 'Board controls';
-    }
-    get restingGestureLabels() {
-        return {
-            activate: 'Press the board to use it',
-            twoFinger: 'Use two fingers to move the board',
-            using: 'Using the board. Press Escape to scroll the page again.',
-            wheel: 'Use {key} and scroll to zoom the board',
-        };
-    }
     get restingControls() {
         return 'zoom fullscreen';
     }
@@ -817,10 +816,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         this.direct = false;
         this.touched = true;
         this.zoomAbout(by > 0 ? 1.25 : 1 / 1.25, { x: this.box.width / 2, y: this.box.height / 2 });
-        const lang = this.closest('[lang]')?.getAttribute('lang') || undefined;
-        this.say(fillTemplate(this.zoomedLabel, {
-            zoom: new Intl.NumberFormat(lang, { maximumFractionDigits: 0, style: 'percent' }).format(this.at.zoom),
-        }));
+        this.say(formatWords(this, 'zoomedLabel', { zoom: formatPercent(this.at.zoom, wordsLocale(this)) }));
         super.zoom(by);
     }
     show(name) {
@@ -905,7 +901,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
     }
     startLinking(from) {
         this.linking = { from };
-        this.said = fillTemplate(this.connectingLabel, { from: this.nameOf(from) });
+        this.said = formatWords(this, 'connectingLabel', { from: this.nameOf(from) });
     }
     arrival(name) {
         const card = this.cardNamed(name);
@@ -926,7 +922,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             this.said = linking ? this.stoppedLabel : '';
             return;
         }
-        this.said = fillTemplate(this.connectedLabel, {
+        this.said = formatWords(this, 'connectedLabel', {
             from: this.nameOf(linking.from),
             to: this.nameOf(arriving),
         });
@@ -956,7 +952,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         };
         this.said = pointer
             ? ''
-            : fillTemplate(this.reconnectingLabel, {
+            : formatWords(this, 'reconnectingLabel', {
                 from: this.nameOf(edge.fromNode),
                 to: this.nameOf(edge.toNode),
             });
@@ -1006,7 +1002,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             this.rekey(linking.edge, this.keyOfElement(element));
         }
         if (linking.pointer === undefined) {
-            this.said = fillTemplate(this.connectedLabel, {
+            this.said = formatWords(this, 'connectedLabel', {
                 from: this.nameOf(detail.from),
                 to: this.nameOf(detail.to),
             });
@@ -1042,12 +1038,8 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         };
         const gone = new Set([...asked, ...leaving.map((edge) => this.keyOf(edge))]);
         const at = Math.min(...asked.map((one) => walk.findIndex((stop) => stop.key === one)));
-        const next = walk.slice(at + 1).find((one) => !gone.has(one.key)) ??
-            walk
-                .slice(0, Math.max(at, 0))
-                .reverse()
-                .find((one) => !gone.has(one.key));
-        this.refocus = { gone: [...gone], next: next?.key };
+        const next = neighborOf(walk.map((one) => one.key), at, (key) => !gone.has(key));
+        this.refocus = { gone: [...gone], next };
         this.dispatchEvent(new HelixRemoveEvent(detail));
     }
     clicked(key, event) {
@@ -1184,7 +1176,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         if (this.dispatchEvent(new HelixSelectEvent({ value }))) {
             this.selected = value;
             if (said) {
-                this.say(fillTemplate(this.selectionLabel, { count: this.numbers(list.length) }));
+                this.say(formatWords(this, 'selectionLabel', { count: list.length }));
             }
         }
     }
@@ -1306,6 +1298,39 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         document.removeEventListener('keydown', this.handleHeldKey, true);
         document.removeEventListener('pointerdown', this.handleHeldOutside, true);
     }
+    forget(card, to) {
+        if (!card || card !== this.focusedCard) {
+            return;
+        }
+        if (to) {
+            this.focusedCard = undefined;
+            return;
+        }
+        queueMicrotask(() => {
+            if (card.isConnected && this.focusedCard === card) {
+                this.focusedCard = undefined;
+            }
+        });
+    }
+    handOn() {
+        const gone = this.focusedCard;
+        if (!gone || this.cards.includes(gone)) {
+            return;
+        }
+        this.focusedCard = undefined;
+        const active = this.ownerDocument.activeElement;
+        if (active !== null && active !== this.ownerDocument.body) {
+            return;
+        }
+        const keys = new Set(this.walk.map((one) => one.key));
+        const next = neighborOf(this.walked.map((one) => one.key), this.walked.findIndex((one) => one.key === gone.name), (key) => keys.has(key));
+        if (next === undefined) {
+            this.partNamed('region')?.focus();
+        }
+        else {
+            this.focusStop(next);
+        }
+    }
     reveal(id) {
         const node = this.byId.get(id);
         const origin = this.origin;
@@ -1390,7 +1415,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             const drawn = edge ? this.geometryOf(edge, origin) : undefined;
             if (drawn) {
                 at = drawn.mid;
-                named = fillTemplate(this.connectionLabel, {
+                named = formatWords(this, 'connectionLabel', {
                     from: this.textOf(drawn.from),
                     to: this.textOf(drawn.to),
                 });
@@ -1408,7 +1433,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         }
         return html `<input
       part="label-editor"
-      aria-label=${fillTemplate(this.labelEditorLabel, { name: named })}
+      aria-label=${formatWords(this, 'labelEditorLabel', { name: named })}
       data-target=${editing.target}
       style=${`--_canvas-editor-x: ${at.x}px; --_canvas-editor-y: ${at.y}px`}
       type="text"
@@ -1495,19 +1520,17 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             leads.set(edge.fromNode, [...(leads.get(edge.fromNode) ?? []), named(edge.toNode)]);
             from.set(edge.toNode, [...(from.get(edge.toNode) ?? []), named(edge.fromNode)]);
         }
-        const lang = this.closest('[lang]')?.getAttribute('lang') || undefined;
-        const list = new Intl.ListFormat(lang, { type: 'conjunction' });
+        const list = new Intl.ListFormat(wordsLocale(this), { type: 'conjunction' });
         return new Map(this.nodes.map((one) => {
             const out = leads.get(one.id) ?? [];
             const into = from.get(one.id) ?? [];
+            const leadsTo = out.length > 0 ? formatWords(this, 'leadsToLabel', { cards: list.format(out) }) : '';
+            const comesFrom = into.length > 0 ? formatWords(this, 'comesFromLabel', { cards: list.format(into) }) : '';
             return [
                 one.id,
-                [
-                    out.length > 0 ? fillTemplate(this.leadsToLabel, { cards: list.format(out) }) : '',
-                    into.length > 0 ? fillTemplate(this.comesFromLabel, { cards: list.format(into) }) : '',
-                ]
-                    .filter(Boolean)
-                    .join('; '),
+                leadsTo && comesFrom
+                    ? formatWords(this, 'linkedLabel', { comesFrom, leadsTo })
+                    : leadsTo || comesFrom,
             ];
         }));
     }
@@ -1666,6 +1689,8 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
                 this.focusStop(refocus.next !== undefined && keys.has(refocus.next) ? refocus.next : this.walk[0]?.key);
             }
         }
+        this.handOn();
+        this.walked = this.walk;
         this.watchBox();
         if (!this.touched) {
             this.fitInto(true);
@@ -1911,8 +1936,8 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         const ends = heads(edge);
         return svg `<path
         part="edge-target"
-        aria-description=${[pickedKeys.has(key) ? this.selectedLabel : undefined, element?.tone ? this.toneLabels[element.tone] : undefined, edge.label].filter(Boolean).join(', ') || nothing}
-        aria-label=${fillTemplate(this.connectionLabel, { from: this.textOf(from), to: this.textOf(to) })}
+        aria-description=${descriptionOf(wordsLocale(this), [pickedKeys.has(key) ? this.selectedLabel : '', element?.tone ? this.toneLabels[element.tone] : '', edge.label]) || nothing}
+        aria-label=${formatWords(this, 'connectionLabel', { from: this.textOf(from), to: this.textOf(to) })}
         d=${drawn.d}
         data-edge=${key}
         fill="none"
@@ -2025,7 +2050,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         return html `<div
       part="region"
       role="group"
-      aria-label=${this.label || 'Canvas'}
+      aria-label=${this.label || this.fallbackLabel}
       aria-keyshortcuts="ArrowUp ArrowDown ArrowLeft ArrowRight Plus Minus"
       tabindex="0"
       @focusin=${this.idle.stir}
@@ -2087,27 +2112,50 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
     }
 };
 __decorate([
+    words,
+    property({ attribute: 'activate-hint-label' })
+], HelixHeadlessCanvas.prototype, "activateHintLabel", void 0);
+__decorate([
+    words,
     property({ attribute: 'comes-from-label' })
 ], HelixHeadlessCanvas.prototype, "comesFromLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'connected-label' })
 ], HelixHeadlessCanvas.prototype, "connectedLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'connecting-label' })
 ], HelixHeadlessCanvas.prototype, "connectingLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'connection-label' })
 ], HelixHeadlessCanvas.prototype, "connectionLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'controls-label' })
+], HelixHeadlessCanvas.prototype, "controlsLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'fallback-label' })
+], HelixHeadlessCanvas.prototype, "fallbackLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessCanvas.prototype, "label", void 0);
 __decorate([
+    words,
     property({ attribute: 'label-editor-label' })
 ], HelixHeadlessCanvas.prototype, "labelEditorLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'leads-to-label' })
 ], HelixHeadlessCanvas.prototype, "leadsToLabel", void 0);
 __decorate([
+    words,
+    property({ attribute: 'linked-label' })
+], HelixHeadlessCanvas.prototype, "linkedLabel", void 0);
+__decorate([
+    words,
     property({ attribute: 'moved-label' })
 ], HelixHeadlessCanvas.prototype, "movedLabel", void 0);
 __decorate([
@@ -2120,18 +2168,22 @@ __decorate([
     property({ attribute: 'readonly', reflect: true, type: Boolean })
 ], HelixHeadlessCanvas.prototype, "readOnly", void 0);
 __decorate([
+    words,
     property({ attribute: 'reconnecting-label' })
 ], HelixHeadlessCanvas.prototype, "reconnectingLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'resized-label' })
 ], HelixHeadlessCanvas.prototype, "resizedLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessCanvas.prototype, "selected", void 0);
 __decorate([
+    words,
     property({ attribute: 'selected-label' })
 ], HelixHeadlessCanvas.prototype, "selectedLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'selection-label' })
 ], HelixHeadlessCanvas.prototype, "selectionLabel", void 0);
 __decorate([
@@ -2141,12 +2193,26 @@ __decorate([
     state()
 ], HelixHeadlessCanvas.prototype, "editing", void 0);
 __decorate([
+    words,
     property({ attribute: 'stopped-label' })
 ], HelixHeadlessCanvas.prototype, "stoppedLabel", void 0);
 __decorate([
     property({ attribute: 'tone-labels', converter: wordsConverter })
 ], HelixHeadlessCanvas.prototype, "toneLabels", void 0);
 __decorate([
+    words,
+    property({ attribute: 'two-finger-hint-label' })
+], HelixHeadlessCanvas.prototype, "twoFingerHintLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'using-label' })
+], HelixHeadlessCanvas.prototype, "usingLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'wheel-hint-label' })
+], HelixHeadlessCanvas.prototype, "wheelHintLabel", void 0);
+__decorate([
+    words,
     property({ attribute: 'zoomed-label' })
 ], HelixHeadlessCanvas.prototype, "zoomedLabel", void 0);
 __decorate([

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

@@ -94,6 +94,11 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @cssstate dragging - While a mouse drags the track, under `mouse-drag`.
  */
 export declare class HelixHeadlessCarousel extends HelixElement {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-carousel': { nextLabel: 'Nächste Folie' } })`.
+     */
+    static words: string;
     /**
      * Manual, so each slide can be wrapped without its markup being touched.
      *