@fusion.dev/helix-headless 0.215.3 → 0.216.0

package/dist/shortcut-overlay/root/shortcut-overlay-root.js

@@ -0,0 +1,275 @@
+import { __decorate } from "tslib";
+import { chordParts, customElement, HelixElement, keyClaimed, keyNames, listControls, listShortcuts, matchesChord, onApple, timeConverter, words, } from '@fusion.dev/helix-core';
+import { css, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { html } from 'lit/static-html.js';
+import '../../dialog/index.js';
+const HELD = {
+    alt: () => 'Alt',
+    ctrl: () => 'Control',
+    mod: (apple) => (apple ? 'Meta' : 'Control'),
+    shift: () => 'Shift',
+};
+const printed = (keys, apple) => {
+    const names = keyNames(chordParts(keys), apple);
+    return names.keys.join(names.separator);
+};
+let HelixHeadlessShortcutOverlay = class HelixHeadlessShortcutOverlay extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.delay = 600;
+        this.emptyLabel = 'No shortcuts on this screen.';
+        this.hold = 'mod';
+        this.label = 'Keyboard shortcuts';
+        this.sheetKeys = '?';
+        this.badges = [];
+        this.sheetOpen = false;
+        this.rows = [];
+        this.cancel = () => {
+            this.hide();
+        };
+        this.handleKeydown = (event) => {
+            const apple = onApple();
+            if (event.key === HELD[this.hold](apple)) {
+                if (!event.repeat && this.timer === undefined && !this.showing) {
+                    this.timer = setTimeout(() => {
+                        this.timer = undefined;
+                        this.show();
+                    }, this.delay);
+                }
+                return;
+            }
+            this.hide();
+            if (this.sheetKeys !== '' && !keyClaimed(event) && matchesChord(event, this.sheetKeys, apple)) {
+                event.preventDefault();
+                this.showSheet();
+            }
+        };
+        this.handleKeyup = (event) => {
+            if (event.key === HELD[this.hold](onApple())) {
+                this.hide();
+            }
+        };
+    }
+    static { this.styles = css `
+    :host {
+      display: contents;
+    }
+
+    [part='badges'] {
+      background: none;
+      border: 0;
+      inset: 0;
+      margin: 0;
+      overflow: visible;
+      padding: 0;
+      pointer-events: none;
+    }
+
+    [part='badge'] {
+      left: 0;
+      position: fixed;
+      top: 0;
+      white-space: nowrap;
+    }
+
+    [part='badge'][data-compact] [part='badge-name'] {
+      display: none;
+    }
+  `; }
+    static { this.words = 'helix-shortcut-overlay'; }
+    get showing() {
+        return this.badges.length > 0;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('keydown', this.handleKeydown, true);
+        document.addEventListener('keyup', this.handleKeyup, true);
+        document.addEventListener('pointerdown', this.cancel, true);
+        document.addEventListener('scroll', this.cancel, true);
+        window.addEventListener('blur', this.cancel);
+        window.addEventListener('resize', this.cancel);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('keydown', this.handleKeydown, true);
+        document.removeEventListener('keyup', this.handleKeyup, true);
+        document.removeEventListener('pointerdown', this.cancel, true);
+        document.removeEventListener('scroll', this.cancel, true);
+        window.removeEventListener('blur', this.cancel);
+        window.removeEventListener('resize', this.cancel);
+        this.cancel();
+    }
+    show() {
+        const apple = onApple();
+        const width = window.innerWidth;
+        const height = window.innerHeight;
+        const badges = [];
+        for (const control of listControls()) {
+            const box = control.element.getBoundingClientRect();
+            const [keys] = control.keys;
+            if (!keys || box.bottom < 0 || box.top > height || box.right < 0 || box.left > width) {
+                continue;
+            }
+            badges.push({
+                keys: printed(keys, apple),
+                left: box.left + box.width / 2,
+                name: control.name,
+                top: box.bottom,
+            });
+        }
+        this.badges = badges;
+        this.toggleState('showing', badges.length > 0);
+    }
+    hide() {
+        clearTimeout(this.timer);
+        this.timer = undefined;
+        if (this.badges.length > 0) {
+            this.badges = [];
+            this.toggleState('showing', false);
+        }
+    }
+    showSheet() {
+        this.hide();
+        this.rows = this.sheetRows();
+        this.sheetOpen = true;
+    }
+    hideSheet() {
+        this.sheetOpen = false;
+    }
+    sheetRows() {
+        const apple = onApple();
+        const controls = listControls().filter((control) => control.keys.length > 0);
+        const owned = new Set(controls.map((control) => control.element));
+        const rows = controls.flatMap((control) => control.keys.map((keys) => ({ keys: printed(keys, apple), name: control.name })));
+        for (const shortcut of listShortcuts()) {
+            if (shortcut.target && owned.has(shortcut.target)) {
+                continue;
+            }
+            rows.push({ keys: printed(shortcut.keys, apple), name: shortcut.label });
+        }
+        const seen = new Set();
+        return rows.filter((row) => {
+            const key = `${row.keys}\u0000${row.name}`;
+            if (seen.has(key)) {
+                return false;
+            }
+            seen.add(key);
+            return true;
+        });
+    }
+    updated(changed) {
+        super.updated(changed);
+        const layer = this.partNamed('badges');
+        if (changed.has('badges') &&
+            layer?.showPopover &&
+            this.badges.length > 0 &&
+            !layer.matches(':popover-open')) {
+            layer.showPopover();
+        }
+        if (changed.has('badges')) {
+            this.arrange();
+        }
+        if (changed.has('badges') &&
+            this.badges.length > 0 &&
+            globalThis.document?.fonts?.status === 'loading') {
+            void document.fonts.ready.then(() => {
+                if (this.badges.length > 0) {
+                    this.show();
+                }
+            });
+        }
+    }
+    arrange() {
+        const placed = [];
+        const margin = 4;
+        const width = window.innerWidth;
+        const height = window.innerHeight;
+        const drawn = [...(this.renderRoot.querySelectorAll('[part~="badge"]') ?? [])];
+        drawn.forEach((element, index) => {
+            const badge = this.badges[index];
+            if (!badge) {
+                return;
+            }
+            const box = (compact, top) => {
+                element.toggleAttribute('data-compact', compact);
+                const { height: tall, width: wide } = element.getBoundingClientRect();
+                const left = Math.round(Math.min(Math.max(badge.left - wide / 2, margin), width - wide - margin));
+                const at = Math.round(Math.min(Math.max(top, margin), height - tall - margin));
+                return { bottom: at + tall, left, right: left + wide, top: at };
+            };
+            const hits = (one) => placed.filter((other) => one.left < other.right &&
+                one.right > other.left &&
+                one.top < other.bottom &&
+                one.bottom > other.top);
+            const under = badge.top + margin;
+            let place = box(false, under);
+            if (hits(place).length > 0) {
+                place = box(true, under);
+            }
+            for (let tries = 0; tries < 4 && hits(place).length > 0; tries += 1) {
+                const below = Math.max(...hits(place).map((other) => other.bottom));
+                place = box(true, below + 2);
+            }
+            element.style.left = `${place.left}px`;
+            element.style.top = `${place.top}px`;
+            placed.push(place);
+        });
+    }
+    render() {
+        const dialog = this.tag('dialog');
+        return html `${this.badges.length > 0
+            ? html `<div part="badges" popover="manual" aria-hidden="true">
+            ${this.badges.map((badge) => html `<span part="badge"
+                  ><kbd part="badge-keys">${badge.keys}</kbd> <span part="badge-name">${badge.name}</span></span
+                >`)}
+          </div>`
+            : nothing}<${dialog}
+      part="sheet"
+      exportparts="body: sheet-body, dismiss: sheet-dismiss, dismiss-mark: sheet-dismiss-mark,
+        footer: sheet-footer, header: sheet-header, surface: sheet-surface"
+      label=${this.label}
+      .open=${this.sheetOpen}
+      @close=${() => {
+            this.sheetOpen = false;
+        }}
+    >
+      <h2 slot="header">${this.label}</h2>
+      ${this.rows.length === 0
+            ? html `<p part="empty">${this.emptyLabel}</p>`
+            : html `<dl part="list">
+              ${this.rows.map((row) => html `<div part="row"><dt part="name">${row.name}</dt><dd part="keys"><kbd>${row.keys}</kbd></dd></div>`)}
+            </dl>`}
+    </${dialog}>`;
+    }
+};
+__decorate([
+    property({ converter: timeConverter('delay', 600) })
+], HelixHeadlessShortcutOverlay.prototype, "delay", void 0);
+__decorate([
+    words,
+    property({ attribute: 'empty-label' })
+], HelixHeadlessShortcutOverlay.prototype, "emptyLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessShortcutOverlay.prototype, "hold", void 0);
+__decorate([
+    words,
+    property()
+], HelixHeadlessShortcutOverlay.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'sheet-keys' })
+], HelixHeadlessShortcutOverlay.prototype, "sheetKeys", void 0);
+__decorate([
+    state()
+], HelixHeadlessShortcutOverlay.prototype, "badges", void 0);
+__decorate([
+    state()
+], HelixHeadlessShortcutOverlay.prototype, "sheetOpen", void 0);
+__decorate([
+    state()
+], HelixHeadlessShortcutOverlay.prototype, "rows", void 0);
+HelixHeadlessShortcutOverlay = __decorate([
+    customElement('helix-headless-shortcut-overlay')
+], HelixHeadlessShortcutOverlay);
+export { HelixHeadlessShortcutOverlay };

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

@@ -1,4 +1,4 @@
-import { AriaForwardController, HelixFormElement } from '@fusion.dev/helix-core';
+import { AriaForwardController, HelixFormElement, ListedController } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessSlider_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
@@ -106,6 +106,8 @@ declare const HelixHeadlessSlider_base: (new (...args: any[]) => import("@fusion
  * @cssstate invalid - The slider has an error to show, from the browser's validation or from your `feedback`.
  */
 export declare class HelixHeadlessSlider extends HelixHeadlessSlider_base {
+    /** On the page's list of controls, where a command palette and a shortcut overlay find it. */
+    protected readonly listed: ListedController;
     /**
      * The key this family's words are registered under, its styled tag:
      * `registerWords('de', { 'helix-slider': { rangeText: '{start} bis {end}' } })`.

package/dist/slider/root/slider-root.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { AriaForwardController, customElement, formatNumber, formatWords, HelixFormElement, isRtl, MixinControllerValue, MixinField, numberConverter, reportValues, restoreValue, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, formatNumber, formatWords, HelixFormElement, isRtl, ListedController, MixinControllerValue, MixinField, numberConverter, reportValues, restoreValue, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 const SLIDER_KEYS = new Set([
@@ -15,6 +15,7 @@ const SLIDER_KEYS = new Set([
 let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue(MixinField(HelixFormElement)) {
     constructor() {
         super(...arguments);
+        this.listed = new ListedController(this, 'focus', () => this.internals?.ariaKeyShortcuts);
         this.aria = new AriaForwardController(this, {
             target: () => this.partNamed('control'),
         });

package/dist/spatial-bar-chart/root/spatial-bar-chart-root.d.ts

@@ -86,6 +86,7 @@ declare const HelixHeadlessSpatialBarChart_base: typeof HelixElement & (new (...
  * @csspart plot - The box the drawing fills, which takes focus to be read by key. It is named by the host's `aria-labelledby` or `aria-label`, then by `label`, then by the caption of the table.
  * @csspart ring - The outline around the bar the pointer or the keys rest on, painted after it, so the bars in front of it cover it.
  * @csspart ring-behind - The same outline, faint and dashed, drawn over every bar, so the part of the bar the pointer or the keys rest on that others hide still shows.
+ * @csspart sonify - The button that plays the chart as sound, under `sonify`.
  * @csspart summary - The number of bars, series, and categories, and the range of values, written as a sentence for screen readers, which describes the plot. Hide it visually.
  * @csspart table - The readings as a table, for a screen reader, rendered only where they were drawn from `data`, a page of them at a time past a few hundred. Hide it visually.
  * @csspart table-pages - Which readings a page of the `table` holds, and the buttons that show the previous and the next page, rendered only while it holds a page. Hide it visually.

package/dist/spatial-bar-chart/root/spatial-bar-chart-root.js

@@ -154,7 +154,7 @@ let HelixHeadlessSpatialBarChart = class HelixHeadlessSpatialBarChart extends Mi
         ${readable ? this.renderLive(field, at) : nothing}
         ${this.renderTooltip(cell?.value === undefined ? undefined : cell.row)}
       </div>
-      ${readable ? this.renderSummary(field) : this.renderStatus()}${this.renderTable()}`;
+      ${readable ? this.renderSummary(field) : this.renderStatus()}${this.renderSonify()}${this.renderTable()}`;
     }
     renderFallback(field, at) {
         const view = boxView(field.axes, this.camera, [], this.noBox);

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

@@ -107,6 +107,7 @@ type DrawnCorners = {
  * @csspart left-face - The side of a prism facing the light more: from the isometric view, the side toward the next row, drawn at its lower left. Left out where the view shows no side.
  * @csspart right-face - The side of a prism facing the light less: from the isometric view, the side toward the next column, drawn at its lower right. Left out where the view shows one side or none.
  * @csspart row - A column of the strip, which a grid reads as a row, under `selection-mode`. It holds the column's grid cells, which draw nothing: the prisms are painted apart, in the order the view needs.
+ * @csspart sonify - The button that plays the chart as sound, under `sonify`.
  * @csspart strip - The box the drawing fills, which takes focus to be read by key. It is named by the host's `aria-labelledby` or `aria-label`, then by `label`, then by the caption of the table.
  * @csspart top-face - The top of a prism, which carries the reading's tone.
  *

package/dist/spatial-heatmap/root/spatial-heatmap-root.js

@@ -216,7 +216,7 @@ let HelixHeadlessSpatialHeatmap = class HelixHeadlessSpatialHeatmap extends Heli
         <span part="end"><slot name="end"></slot></span>
       </div>${readable ? this.renderOverview(cells) : nothing}${this.status.spoken
             ? html `<span part="selection" role="status">${this.status.said}</span>`
-            : nothing}${this.renderTable()}`;
+            : nothing}${this.renderSonify()}${this.renderTable()}`;
     }
     renderPrism(prism, active, picked, grid, tone) {
         return svg `<g

package/dist/spatial-ribbon-chart/root/spatial-ribbon-chart-root.d.ts

@@ -83,6 +83,7 @@ declare const HelixHeadlessSpatialRibbonChart_base: typeof HelixElement & (new (
  * @csspart plot - The box the drawing fills, which takes focus to be read by key. It is named by the host's `aria-labelledby` or `aria-label`, then by `label`, then by the caption of the table.
  * @csspart ribbon - One ribbon, its faces in its series' color.
  * @csspart ring - The ring around the reading the pointer or the keys rest on, drawn over the ribbons.
+ * @csspart sonify - The button that plays the chart as sound, under `sonify`.
  * @csspart summary - The number of readings, series, and places, and the range of values, written as a sentence for screen readers, which describes the plot. Hide it visually.
  * @csspart table - The readings as a table, for a screen reader, rendered only where they were drawn from `data`, a page of them at a time past a few hundred. Hide it visually.
  * @csspart table-pages - Which readings a page of the `table` holds, and the buttons that show the previous and the next page, rendered only while it holds a page. Hide it visually.

package/dist/spatial-ribbon-chart/root/spatial-ribbon-chart-root.js

@@ -150,7 +150,7 @@ let HelixHeadlessSpatialRibbonChart = class HelixHeadlessSpatialRibbonChart exte
         ${readable ? this.renderLive(field, at) : nothing}
         ${this.renderTooltip(cell?.value === undefined ? undefined : cell.row)}
       </div>
-      ${readable ? this.renderSummary(field) : this.renderStatus()}${this.renderTable()}`;
+      ${readable ? this.renderSummary(field) : this.renderStatus()}${this.renderSonify()}${this.renderTable()}`;
     }
     renderFallback(field, at) {
         const view = boxView(field.axes, this.camera, [], this.noBox);

package/dist/spatial-scatter-chart/root/spatial-scatter-chart-root.d.ts

@@ -81,6 +81,7 @@ declare const HelixHeadlessSpatialScatterChart_base: typeof HelixElement & (new
  * @csspart point - One point of the chart's own drawing.
  * @csspart point-active - The point the pointer or the keys rest on, in the chart's own drawing. Set alongside `point`.
  * @csspart ring - The ring around the point the pointer or the keys rest on, drawn over every point.
+ * @csspart sonify - The button that plays the chart as sound, under `sonify`.
  * @csspart summary - The three measures and the number of points, written as a sentence for screen readers, which describes the plot. Hide it visually.
  * @csspart table - The readings as a table, for a screen reader, rendered only where they were drawn from `data`, a page of them at a time past a few hundred. Hide it visually.
  * @csspart table-pages - Which readings a page of the `table` holds, and the buttons that show the previous and the next page, rendered only while it holds a page. Hide it visually.

package/dist/spatial-scatter-chart/root/spatial-scatter-chart-root.js

@@ -152,7 +152,7 @@ let HelixHeadlessSpatialScatterChart = class HelixHeadlessSpatialScatterChart ex
         ${this.renderLive(points, at)}
         ${this.renderTooltip(points[at]?.row)}
       </div>
-      ${readable ? this.renderSummary(field) : this.renderStatus()}${this.renderTable()}`;
+      ${readable ? this.renderSummary(field) : this.renderStatus()}${this.renderSonify()}${this.renderTable()}`;
     }
     renderFallback(field, at) {
         const view = boxView(field.axes, this.camera, [], this.noBox);

package/dist/spatial-surface-chart/root/spatial-surface-chart-root.d.ts

@@ -82,6 +82,7 @@ declare const HelixHeadlessSpatialSurfaceChart_base: typeof HelixElement & (new
  * @csspart mark - The invisible point the tooltip is anchored to, where the renderer draws the reading.
  * @csspart plot - The box the drawing fills, which takes focus to be read by key. It is named by the host's `aria-labelledby` or `aria-label`, then by `label`, then by the caption of the table.
  * @csspart ring - The ring around the reading the pointer or the keys rest on, drawn over the surface.
+ * @csspart sonify - The button that plays the chart as sound, under `sonify`.
  * @csspart summary - The measures, the number of readings, and the range of heights, written as a sentence for screen readers, which describes the plot. Hide it visually.
  * @csspart table - The readings as a table, for a screen reader, rendered only where they were drawn from `data`, a page of them at a time past a few hundred. Hide it visually.
  * @csspart table-pages - Which readings a page of the `table` holds, and the buttons that show the previous and the next page, rendered only while it holds a page. Hide it visually.

package/dist/spatial-surface-chart/root/spatial-surface-chart-root.js

@@ -159,7 +159,7 @@ let HelixHeadlessSpatialSurfaceChart = class HelixHeadlessSpatialSurfaceChart ex
         ${readable ? this.renderLive(field, at) : nothing}
         ${this.renderTooltip(field.cells[at]?.row)}
       </div>
-      ${readable ? this.renderSummary(field) : this.renderStatus()}${this.renderTable()}`;
+      ${readable ? this.renderSummary(field) : this.renderStatus()}${this.renderSonify()}${this.renderTable()}`;
     }
     renderFallback(field, at) {
         const view = boxView(field.axes, this.camera, [], this.noBox);

package/dist/spatial-treemap/root/spatial-treemap-root.d.ts

@@ -86,6 +86,7 @@ declare const HelixHeadlessSpatialTreemap_base: typeof HelixElement & (new (...a
  * @csspart plot - The box the drawing fills, which takes focus to be read by key. It is named by the host's `aria-labelledby` or `aria-label`, then by `label`, then by the caption of the table.
  * @csspart ring - The outline around the block the pointer or the keys rest on, painted after it, so the blocks in front of it cover it.
  * @csspart ring-behind - The same outline, faint and dashed, drawn over every block, so the part of the block the pointer or the keys rest on that others hide still shows.
+ * @csspart sonify - The button that plays the chart as sound, under `sonify`.
  * @csspart summary - The number of items and groups and the range of their sizes, written as a sentence for screen readers, which describes the plot. Hide it visually.
  * @csspart table - The readings as a table, for a screen reader, rendered only where they were drawn from `data`, a page of them at a time past a few hundred. Hide it visually.
  * @csspart table-pages - Which readings a page of the `table` holds, and the buttons that show the previous and the next page, rendered only while it holds a page. Hide it visually.

package/dist/spatial-treemap/root/spatial-treemap-root.js

@@ -152,7 +152,7 @@ let HelixHeadlessSpatialTreemap = class HelixHeadlessSpatialTreemap extends Mixi
         ${readable ? this.renderLive(field, at) : nothing}
         ${this.renderTooltip(field.blocks[at]?.row)}
       </div>
-      ${readable ? this.renderSummary(field) : this.renderStatus()}${this.renderTable()}`;
+      ${readable ? this.renderSummary(field) : this.renderStatus()}${this.renderSonify()}${this.renderTable()}`;
     }
     renderFallback(field, at) {
         const view = boxView(field.axes, this.camera, [], this.noBox);

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

@@ -1,4 +1,4 @@
-import { AriaForwardController, HelixFormElement, HostClickController } from '@fusion.dev/helix-core';
+import { AriaForwardController, HelixFormElement, HostClickController, ListedController } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessSwitch_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerCheckedInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
@@ -58,6 +58,8 @@ declare const HelixHeadlessSwitch_base: (new (...args: any[]) => import("@fusion
  * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
  */
 export declare class HelixHeadlessSwitch extends HelixHeadlessSwitch_base {
+    /** On the page's list of controls, where a command palette and a shortcut overlay find it. */
+    protected readonly listed: ListedController;
     /**
      * The key this family's words are registered under, its styled tag:
      * `registerWords('de', { 'helix-switch': { valueMissingMessage: '...' } })`.

package/dist/switch/root/switch-root.js

@@ -1,10 +1,11 @@
 import { __decorate } from "tslib";
-import { AriaForwardController, customElement, HelixFormElement, HostClickController, MixinControllerChecked, MixinField, markRegion, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, HelixFormElement, HostClickController, ListedController, MixinControllerChecked, MixinField, markRegion, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessSwitch = class HelixHeadlessSwitch extends MixinControllerChecked(MixinField(HelixFormElement)) {
     constructor() {
         super(...arguments);
+        this.listed = new ListedController(this, 'press', () => this.internals?.ariaKeyShortcuts);
         this.aria = new AriaForwardController(this, {
             label: true,
             target: () => this.partNamed('control'),

package/dist/tabs/tab/tab.d.ts

@@ -1,4 +1,4 @@
-import { HelixElement } from '@fusion.dev/helix-core';
+import { HelixElement, ListedController } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessTab_base: (new (...args: any[]) => import("@fusion.dev/helix-core").DismissibleElement) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinSelectableItemInterface) & typeof HelixElement;
 /**
@@ -41,6 +41,8 @@ declare const HelixHeadlessTab_base: (new (...args: any[]) => import("@fusion.de
  * @interactive button
  */
 export declare class HelixHeadlessTab extends HelixHeadlessTab_base {
+    /** On the page's list of controls, where a command palette and a shortcut overlay find it. */
+    protected readonly listed: ListedController;
     /**
      * The key this family's words are registered under, its styled tag:
      * `registerWords('de', { 'helix-tab': { dismissLabel: 'Schließen' } })`.

package/dist/tabs/tab/tab.js

@@ -1,11 +1,12 @@
 import { __decorate } from "tslib";
-import { customElement, glyphPath, HelixElement, MixinDismissible, MixinSelectableItem, plainClick, reflectElements, words, } from '@fusion.dev/helix-core';
+import { customElement, glyphPath, HelixElement, ListedController, MixinDismissible, MixinSelectableItem, plainClick, reflectElements, words, } from '@fusion.dev/helix-core';
 import { x } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessTab = class HelixHeadlessTab extends MixinDismissible(MixinSelectableItem(HelixElement)) {
     constructor() {
         super(...arguments);
+        this.listed = new ListedController(this, 'press', () => this.internals?.ariaKeyShortcuts);
         this.itemPart = 'tab';
         this.controls = undefined;
         this.dismissLabel = 'Close';

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

@@ -1,6 +1,6 @@
-import { AriaForwardController, HelixFormElement, type OwnRule } from '@fusion.dev/helix-core';
+import { AriaForwardController, HelixFormElement, ListedController, type OwnRule } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
-declare const HelixHeadlessTextarea_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
+declare const HelixHeadlessTextarea_base: (new (...args: any[]) => import("@fusion.dev/helix-core").VoiceElement) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
  * @summary A multi-line text field.
  *
@@ -46,7 +46,9 @@ declare const HelixHeadlessTextarea_base: (new (...args: any[]) => import("@fusi
  *
  * @event {Event} change - Sent from the textarea when the user finishes an edit.
  * @event {HelixBeforeChangeEvent} helix-before-change - Fired as the text changes, and cancelable.
+ * @event {HelixBeforeListenEvent} helix-before-listen - The dictation button was pressed. Cancelable: cancel it to keep the field from listening.
  * @event {HelixClearEvent} helix-clear - Fired after the clear button has emptied the field, after `input` and `change`.
+ * @event {HelixListenEvent} helix-listen - Dictation settled on a phrase and put it in the value, after the field's own `input`.
  * @event {Event} input - Fired after the value changes.
  *
  * @csspart clear - The button that empties the field, under `clearable`.
@@ -55,11 +57,18 @@ declare const HelixHeadlessTextarea_base: (new (...args: any[]) => import("@fusi
  * @csspart field - The box that holds the textarea.
  * @csspart hint - Help under the field, while nothing is wrong.
  * @csspart label - The label above the field.
+ * @csspart voice - The dictation button, under `voice`.
+ * @csspart voice-listening - The dictation button while it listens. Set alongside `voice`.
+ * @csspart voice-status - What a screen reader hears as dictation starts and stops, drawn for no one else.
  *
  * @cssstate blank - The field holds no text.
  * @cssstate invalid - The control has an error to show, from the browser's validation, `validate`, or your `feedback`.
+ * @cssstate listening - While the field listens for dictation. The element sets `--dictation-level` on itself meanwhile, from 0 to 1, for a meter.
  */
 export declare class HelixHeadlessTextarea extends HelixHeadlessTextarea_base {
+    protected static markRules: string[];
+    /** On the page's list of controls, where a command palette and a shortcut overlay find it. */
+    protected readonly listed: ListedController;
     /**
      * The key this family's words are registered under, its styled tag:
      * `registerWords('de', { 'helix-textarea': { clearLabel: 'Leeren' } })`.
@@ -140,7 +149,8 @@ export declare class HelixHeadlessTextarea extends HelixHeadlessTextarea_base {
     readOnly: boolean;
     /** Focus is delegated to the control, so the host is never the target. */
     static shadowRootOptions: ShadowRootInit;
-    private get control();
+    /** The textarea, for a family built on this one to read. */
+    protected get control(): HTMLTextAreaElement | null;
     /**
      * Every keystroke, cancelable, and put back where it is refused.
      *
@@ -162,7 +172,7 @@ export declare class HelixHeadlessTextarea extends HelixHeadlessTextarea_base {
      * Reset to `auto` first, because `scrollHeight` of an element already sized to
      * its content is that size, so without the reset the box can only ever grow.
      */
-    private grow;
+    protected grow(): void;
     /**
      * Re-measures when the box changes rather than only when a property does.
      *
@@ -269,6 +279,12 @@ export declare class HelixHeadlessTextarea extends HelixHeadlessTextarea_base {
     wrap: 'hard' | 'off' | 'soft';
     /** The cross on the clear button, behind a seam a tier can move. */
     protected renderClearIcon(): TemplateResult;
+    /**
+     * The `<textarea>` itself, behind a seam a family built on this one wraps:
+     * Code Input draws its highlighted text under it.
+     */
+    protected renderControl(): TemplateResult;
+    protected voiceField(): HTMLInputElement | HTMLTextAreaElement | null;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/textarea/root/textarea-root.js

@@ -1,12 +1,13 @@
 import { __decorate } from "tslib";
-import { AriaForwardController, applyOwnRule, customElement, drawIcon, HelixClearEvent, HelixFormElement, holdCaret, isRtl, MixinControllerValue, MixinField, numberConverter, restoreValue, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, applyOwnRule, customElement, drawIcon, HelixClearEvent, HelixFormElement, holdCaret, isRtl, ListedController, MixinControllerValue, MixinField, MixinVoice, numberConverter, restoreValue, SPOKEN_RULE, words, } from '@fusion.dev/helix-core';
 import { x } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { grownHeight, lineMetrics } from '../grow.js';
-let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerValue(MixinField(HelixFormElement)) {
+let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinVoice(MixinControllerValue(MixinField(HelixFormElement))) {
     constructor() {
         super(...arguments);
+        this.listed = new ListedController(this, 'focus', () => this.internals?.ariaKeyShortcuts);
         this.aria = new AriaForwardController(this, {
             target: () => this.partNamed('control'),
         });
@@ -44,6 +45,7 @@ let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerV
         this.rows = 3;
         this.wrap = 'soft';
     }
+    static { this.markRules = [SPOKEN_RULE]; }
     static { this.words = 'helix-textarea'; }
     static { this.shadowRootOptions = {
         ...HelixFormElement.shadowRootOptions,
@@ -186,30 +188,36 @@ let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerV
     renderClearIcon() {
         return html `<slot name="clear-icon">${drawIcon(x)}</slot>`;
     }
+    renderControl() {
+        return html `<textarea
+      part="control"
+      id=${this.controlId}
+      .value=${this.value}
+      rows=${this.rows}
+      cols=${this.cols ?? nothing}
+      wrap=${this.wrap}
+      name=${this.name || nothing}
+      placeholder=${this.placeholder || nothing}
+      autocomplete=${this.autocomplete || nothing}
+      minlength=${this.minLength ?? nothing}
+      maxlength=${this.maxLength ?? nothing}
+      aria-describedby=${this.describedBy ?? nothing}
+      aria-invalid=${this.invalidity ?? nothing}
+      ?disabled=${this.isDisabled}
+      ?readonly=${this.readOnly}
+      ?required=${this.required}
+      @input=${this.handleInput}
+      @change=${this.handleChange}
+    ></textarea>`;
+    }
+    voiceField() {
+        return this.partNamed('control');
+    }
     render() {
         return html `${this.renderLabel()}
     <div part="field">
       <slot name="start"></slot>
-      <textarea
-        part="control"
-        id=${this.controlId}
-        .value=${this.value}
-        rows=${this.rows}
-        cols=${this.cols ?? nothing}
-        wrap=${this.wrap}
-        name=${this.name || nothing}
-        placeholder=${this.placeholder || nothing}
-        autocomplete=${this.autocomplete || nothing}
-        minlength=${this.minLength ?? nothing}
-        maxlength=${this.maxLength ?? nothing}
-        aria-describedby=${this.describedBy ?? nothing}
-        aria-invalid=${this.invalidity ?? nothing}
-        ?disabled=${this.isDisabled}
-        ?readonly=${this.readOnly}
-        ?required=${this.required}
-        @input=${this.handleInput}
-        @change=${this.handleChange}
-      ></textarea>
+      ${this.renderControl()}
       <slot name="end"></slot>
       ${this.clearable && this.value !== '' && !this.isDisabled && !this.readOnly
             ? html `<button
@@ -220,7 +228,7 @@ let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerV
             >
               ${this.renderClearIcon()}
             </button>`
-            : nothing}
+            : nothing}${this.renderVoice()}
     </div>
     ${this.renderHint()}${this.renderFeedback()}`;
     }