@fusion.dev/helix-headless 0.215.3 → 0.217.0

package/dist/donut-chart/root/donut-chart-root.js

@@ -85,7 +85,7 @@ let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSt
         if (shares.length === 0 && (this.readingsKnown || this.loading)) {
             return this.renderEmpty();
         }
-        return html `${this.renderPlot(shares)}${shares.length === 0 ? nothing : this.renderSummary(shares)}${this.renderTable()}`;
+        return html `${this.renderPlot(shares)}${shares.length === 0 ? nothing : this.renderSummary(shares)}${this.renderSonify()}${this.renderTable()}`;
     }
     renderSummary(shares) {
         const rows = this.sourceRows;

package/dist/element-events.generated.js

@@ -34,7 +34,13 @@ registerElementEvents({
     ],
     'helix-headless-carousel': ['helix-activate', 'helix-select'],
     'helix-headless-chat': ['helix-before-pin', 'helix-history', 'helix-pin', 'helix-send'],
-    'helix-headless-chat-composer': ['helix-send', 'helix-typing', 'input'],
+    'helix-headless-chat-composer': [
+        'helix-before-listen',
+        'helix-listen',
+        'helix-send',
+        'helix-typing',
+        'input',
+    ],
     'helix-headless-chat-message': ['helix-send'],
     'helix-headless-checkbox': ['change', 'helix-before-toggle', 'input'],
     'helix-headless-checkbox-group': ['change', 'helix-before-change', 'input'],
@@ -46,6 +52,15 @@ registerElementEvents({
         'helix-copy-error',
         'helix-toggle',
     ],
+    'helix-headless-code-editor': ['change', 'helix-before-change', 'input'],
+    'helix-headless-code-input': [
+        'change',
+        'helix-before-change',
+        'helix-before-listen',
+        'helix-clear',
+        'helix-listen',
+        'input',
+    ],
     'helix-headless-color-input': [
         'change',
         'helix-before-change',
@@ -128,9 +143,11 @@ registerElementEvents({
         'change',
         'helix-before-change',
         'helix-before-close',
+        'helix-before-listen',
         'helix-before-open',
         'helix-dismiss',
         'helix-facet',
+        'helix-listen',
         'helix-select',
         'input',
         'toggle',
@@ -157,7 +174,14 @@ registerElementEvents({
     'helix-headless-icon': ['error', 'load'],
     'helix-headless-icon-button': ['helix-press'],
     'helix-headless-image': ['error', 'load'],
-    'helix-headless-input': ['change', 'helix-before-change', 'helix-clear', 'input'],
+    'helix-headless-input': [
+        'change',
+        'helix-before-change',
+        'helix-before-listen',
+        'helix-clear',
+        'helix-listen',
+        'input',
+    ],
     'helix-headless-kbd': ['helix-shortcut'],
     'helix-headless-legend': ['change', 'helix-before-change'],
     'helix-headless-lightbox': [
@@ -181,8 +205,10 @@ registerElementEvents({
     'helix-headless-listbox': [
         'change',
         'helix-before-change',
+        'helix-before-listen',
         'helix-before-reorder',
         'helix-filter',
+        'helix-listen',
         'helix-load-more',
         'helix-reorder',
         'input',
@@ -358,7 +384,14 @@ registerElementEvents({
         'helix-terminal-restart',
         'helix-terminal-title',
     ],
-    'helix-headless-textarea': ['change', 'helix-before-change', 'helix-clear', 'input'],
+    'helix-headless-textarea': [
+        'change',
+        'helix-before-change',
+        'helix-before-listen',
+        'helix-clear',
+        'helix-listen',
+        'input',
+    ],
     'helix-headless-time-input': [
         'change',
         'helix-before-change',

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

@@ -2,7 +2,7 @@ import { AriaForwardController, HelixFormElement, PopoverController } from '@fus
 import { type PropertyValues, type TemplateResult } from 'lit';
 import { HelixHeadlessFilterField } from '../field/filter-field.js';
 import { type FilterSource } from '../suggest.js';
-declare const HelixHeadlessFilterInput_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinTokensInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
+declare const HelixHeadlessFilterInput_base: (new (...args: any[]) => import("@fusion.dev/helix-core").VoiceElement) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinTokensInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
  * @summary A text field for filters, with the active filters shown in it as tokens.
  *
@@ -161,9 +161,11 @@ declare const HelixHeadlessFilterInput_base: (new (...args: any[]) => import("@f
  * @event {Event} change - Fired from the input when the user finishes editing the text.
  * @event {HelixBeforeChangeEvent} helix-before-change - Fired as the text changes. Cancelable: call `preventDefault()` to keep the current text.
  * @event {HelixBeforeCloseEvent} helix-before-close - Fired before the suggestions close. Cancelable: call `preventDefault()` to keep them open.
+ * @event {HelixBeforeListenEvent} helix-before-listen - The dictation button was pressed. Cancelable: cancel it to keep the field from listening.
  * @event {HelixBeforeOpenEvent} helix-before-open - Fired before the suggestions open. Cancelable: call `preventDefault()` to keep them closed.
  * @event {HelixDismissEvent} helix-dismiss - Fired when the user removes a token with its remove button or with Backspace in an empty field. A `FilterChip` that names a declared field sends `helix-facet` instead. Cancelable: call `preventDefault()` to keep the token.
  * @event {HelixFacetEvent} helix-facet - Fired when a filter changes, whether it was typed, picked, or removed. Cancelable: call `preventDefault()` to leave the text and the chip as they were.
+ * @event {HelixListenEvent} helix-listen - Dictation settled on a phrase and put it in the field, after the field's own `input`.
  * @event {HelixSelectEvent} helix-select - Fired by an option in `suggestions` when it is chosen, and bubbles out of the field. Cancelable: call `preventDefault()` to stop other listeners acting on it. The field takes no action on an option you slotted, and you decide what it does. A suggestion from `source` is written over the term at the caret unless you cancel it.
  * @event {Event} input - Fired when the text changes.
  * @event {ToggleEvent} toggle - Fired when the suggestions panel opens or closes, with `newState` and `oldState`.
@@ -181,13 +183,18 @@ declare const HelixHeadlessFilterInput_base: (new (...args: any[]) => import("@f
  * @csspart rest - The count of tokens that did not fit. It is a `<button>` with `expandable` and a `<span>` without it.
  * @csspart surface - The floating panel the suggestions sit in.
  * @csspart tags - The row the tokens sit in.
+ * @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 invalid - The field has an error to show, from the browser's validation or from 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.
  * @cssstate loading - While `loading` is set, or a request to `source` is out.
  * @cssstate no-results - `filter-suggestions` hid every suggestion, and `no-results-text` or the `no-results` slot says so.
  * @cssstate open - The suggestions are open.
  */
 export declare class HelixHeadlessFilterInput extends HelixHeadlessFilterInput_base {
+    protected static markRules: string[];
     /**
      * The key this family's words are registered under, its styled tag:
      * `registerWords('de', { 'helix-filter-input': { clearLabel: 'Leeren' } })`.
@@ -658,6 +665,7 @@ export declare class HelixHeadlessFilterInput extends HelixHeadlessFilterInput_b
     focus(options?: FocusOptions): void;
     /** The cross on the clear button, behind a seam a tier can move. */
     protected renderClearIcon(): TemplateResult;
+    protected voiceField(): HTMLInputElement | null;
     protected render(): TemplateResult;
 }
 declare global {

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

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { AriaForwardController, auditChildren, countLabel, customElement, DelayController, drawIcon, drawStatus, formatWords, HelixFacetEvent, HelixFormElement, holdCaret, howToRegister, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, PopoverController, reportRuntime, restoreValue, StatusController, scrollItemIntoView, timeConverter, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { AriaForwardController, auditChildren, countLabel, customElement, DelayController, drawIcon, drawStatus, formatWords, HelixFacetEvent, HelixFormElement, holdCaret, howToRegister, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, MixinVoice, PopoverController, reportRuntime, restoreValue, SPOKEN_RULE, StatusController, scrollItemIntoView, timeConverter, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { x } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -10,7 +10,7 @@ const picks = (element) => typeof element.apply === 'function' &&
     Array.isArray(element.fields);
 const asksToGo = (node) => typeof node?.dismiss === 'function';
 const isOption = (node) => 'active' in node && 'value' in node;
-let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinControllerOpen(MixinTokens(MixinControllerValue(MixinField(HelixFormElement)))) {
+let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinVoice(MixinControllerOpen(MixinTokens(MixinControllerValue(MixinField(HelixFormElement))))) {
     constructor() {
         super(...arguments);
         this.aria = new AriaForwardController(this, {
@@ -249,6 +249,7 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
             }
         };
     }
+    static { this.markRules = [SPOKEN_RULE]; }
     static { this.words = 'helix-filter-input'; }
     narrow() {
         const term = this.filterSuggestions
@@ -645,6 +646,9 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
     renderClearIcon() {
         return html `<slot name="clear-icon">${drawIcon(x)}</slot>`;
     }
+    voiceField() {
+        return this.partNamed('control');
+    }
     render() {
         return html `${this.renderLabel()}
     <div part="field" @focusin=${this.handleFocusIn} @focusout=${this.handleFocusOut}>
@@ -681,7 +685,7 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
             >
               ${this.renderClearIcon()}
             </button>`
-            : nothing}
+            : nothing}${this.renderVoice()}
     </div>
     <!-- **Always rendered, and hidden rather than absent**, for the reason the
          token row is: a slot that is not in the tree assigns nothing, so a panel

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

@@ -124,6 +124,7 @@ declare const HelixHeadlessHeatmap_base: typeof HelixElement & (new (...args: an
  * @csspart plot - The same element as `strip`, under the name every chart gives the drawing that takes focus.
  * @csspart row - A column of cells, which a grid reads as a row, under `selection-mode`. It draws no box.
  * @csspart selection - A polite region that says how many cells are selected after a change, rendered from the first change. Hide it visually.
+ * @csspart sonify - The button that plays the chart as sound, under `sonify`.
  * @csspart start - The leading slot's box.
  * @csspart strip - The grid of cells, 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 summary - The middle slot's box.

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

@@ -302,7 +302,7 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartStatus(M
         <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()}`;
     }
     renderRows(cells) {
         const size = this.rowCount === 1 ? cells.length : this.rowCount;

package/dist/index.d.ts

@@ -29,6 +29,8 @@ export * from './checkbox/index.js';
 export * from './checkbox-group/index.js';
 export * from './code/index.js';
 export * from './code-block/index.js';
+export * from './code-editor/index.js';
+export * from './code-input/index.js';
 export * from './color-input/index.js';
 export * from './color-picker/index.js';
 export * from './combobox/index.js';
@@ -64,6 +66,7 @@ export * from './listbox/index.js';
 export * from './loader/index.js';
 export * from './log/index.js';
 export * from './map/index.js';
+export * from './markdown/index.js';
 export * from './megamenu/index.js';
 export * from './menu/filter/index.js';
 export * from './menu/index.js';
@@ -86,6 +89,7 @@ export * from './rating/index.js';
 export * from './scatter-chart/index.js';
 export * from './scroll-area/index.js';
 export * from './select/index.js';
+export * from './shortcut-overlay/index.js';
 export * from './skeleton/index.js';
 export * from './skip-link/index.js';
 export * from './slider/index.js';

package/dist/index.js

@@ -20,6 +20,8 @@ export * from './checkbox/index.js';
 export * from './checkbox-group/index.js';
 export * from './code/index.js';
 export * from './code-block/index.js';
+export * from './code-editor/index.js';
+export * from './code-input/index.js';
 export * from './color-input/index.js';
 export * from './color-picker/index.js';
 export * from './combobox/index.js';
@@ -55,6 +57,7 @@ export * from './listbox/index.js';
 export * from './loader/index.js';
 export * from './log/index.js';
 export * from './map/index.js';
+export * from './markdown/index.js';
 export * from './megamenu/index.js';
 export * from './menu/filter/index.js';
 export * from './menu/index.js';
@@ -77,6 +80,7 @@ export * from './rating/index.js';
 export * from './scatter-chart/index.js';
 export * from './scroll-area/index.js';
 export * from './select/index.js';
+export * from './shortcut-overlay/index.js';
 export * from './skeleton/index.js';
 export * from './skip-link/index.js';
 export * from './slider/index.js';

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

@@ -1,8 +1,8 @@
-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';
 /** What the control accepts, which is text of one kind or another. */
 export type InputType = 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url';
-declare const HelixHeadlessInput_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
+declare const HelixHeadlessInput_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 field for a single line of text.
  *
@@ -53,7 +53,9 @@ declare const HelixHeadlessInput_base: (new (...args: any[]) => import("@fusion.
  *
  * @event {Event} change - Sent when the user finishes changing the value. Relayed from the native input.
  * @event {HelixBeforeChangeEvent} helix-before-change - The text is about to change. Cancelable: cancel it to keep the current text.
+ * @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 as the value changes.
  *
  * @csspart clear - The button that empties the field.
@@ -64,11 +66,18 @@ declare const HelixHeadlessInput_base: (new (...args: any[]) => import("@fusion.
  * @csspart label - The label above the field.
  * @csspart reveal - The button that shows and hides a password.
  * @csspart reveal-pressed - The reveal button while the password is shown, added beside `reveal`.
+ * @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 HelixHeadlessInput extends HelixHeadlessInput_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-input': { clearLabel: 'Leeren' } })`.
@@ -184,6 +193,8 @@ export declare class HelixHeadlessInput extends HelixHeadlessInput_base {
      * the button is doing.
      */
     private get effectiveType();
+    /** The type asked for, so a revealed password is still never dictated. */
+    protected get voiceType(): string;
     /** Whether there is a clear button on screen right now. */
     private get showsClear();
     /** Focus is delegated to the input, so the host is never the focus target. */
@@ -323,6 +334,7 @@ export declare class HelixHeadlessInput extends HelixHeadlessInput_base {
      * the password is hidden, and crossed out while it shows.
      */
     protected renderRevealIcon(): TemplateResult;
+    protected voiceField(): HTMLInputElement | HTMLTextAreaElement | null;
     protected render(): TemplateResult;
 }
 declare global {

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

@@ -1,11 +1,12 @@
 import { __decorate } from "tslib";
-import { AriaForwardController, applyOwnRule, customElement, drawIcon, HelixClearEvent, HelixFormElement, holdCaret, MixinControllerValue, MixinField, numberConverter, restoreValue, submitImplicitly, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, applyOwnRule, customElement, drawIcon, HelixClearEvent, HelixFormElement, holdCaret, ListedController, MixinControllerValue, MixinField, MixinVoice, numberConverter, restoreValue, SPOKEN_RULE, submitImplicitly, words, } from '@fusion.dev/helix-core';
 import { eye, eyeSlash, x } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
-let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(MixinField(HelixFormElement)) {
+let HelixHeadlessInput = class HelixHeadlessInput 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'),
         });
@@ -54,10 +55,14 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
         this.step = '';
         this.type = 'text';
     }
+    static { this.markRules = [SPOKEN_RULE]; }
     static { this.words = 'helix-input'; }
     get effectiveType() {
         return this.revealed && this.type === 'password' ? 'text' : this.type;
     }
+    get voiceType() {
+        return this.type;
+    }
     get showsClear() {
         return this.clearable && this.value !== '' && !this.isDisabled && !this.readOnly;
     }
@@ -169,6 +174,9 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
             ? html `<slot name="conceal-icon">${drawIcon(eyeSlash)}</slot>`
             : html `<slot name="reveal-icon">${drawIcon(eye)}</slot>`;
     }
+    voiceField() {
+        return this.partNamed('control');
+    }
     render() {
         return html `${this.renderLabel()}
     <div part="field">
@@ -224,7 +232,7 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
             >
               ${this.renderRevealIcon()}
             </button>`
-            : nothing}
+            : nothing}${this.renderVoice()}
     </div>
     ${this.renderHint()}${this.renderFeedback()}`;
     }

package/dist/kbd/root/kbd-root.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { ariaChord, chordParts, customElement, elementById, HelixElement, HelixShortcutEvent, keyNames, matchesChord, onApple, printableChord, SPOKEN_RULE, wordsConverter, } from '@fusion.dev/helix-core';
+import { ariaChord, chordParts, controlName, customElement, elementById, HelixElement, HelixShortcutEvent, keyNames, matchesChord, onApple, printableChord, registerShortcut, SPOKEN_RULE, wordsConverter, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { claimShortcut, releaseShortcut } from '../shortcut.js';
@@ -73,12 +73,19 @@ let HelixHeadlessKbd = class HelixHeadlessKbd extends HelixElement {
         this.undescribe();
         if (control && chord !== '') {
             claimShortcut(control, chord);
-            this.described = { chord, control };
+            const unregister = registerShortcut({
+                keys: () => this.keys,
+                label: () => controlName(control),
+                owner: this,
+                target: control,
+            });
+            this.described = { chord, control, unregister };
         }
     }
     undescribe() {
         if (this.described) {
             releaseShortcut(this.described.control, this.described.chord);
+            this.described.unregister();
             this.described = undefined;
         }
     }

package/dist/line-chart/root/line-chart-root.d.ts

@@ -97,6 +97,7 @@ declare const HelixHeadlessLineChart_base: typeof HelixElement & (new (...args:
  * @csspart marker-lone - The `marker` path of one series' readings with a blank on either side, which no line reaches and which are marked without `markers`. Set alongside `marker`.
  * @csspart marker-ring - The same marks again under each series' `marker` paths, to stroke a little wider in the page's color, so a mark reads over the line it sits on.
  * @csspart plot - The drawing, which takes focus to be read by key. With nothing to draw, a group named as the chart is, holding the `empty` or `loading` part.
+ * @csspart sonify - The button that plays the chart as sound, under `sonify`.
  * @csspart summary - The chart's name and each series' latest reading, written as a sentence for screen readers. Hide it visually.
  * @csspart svg - The drawing surface the lines and areas sit on.
  * @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.

package/dist/line-chart/root/line-chart-root.js

@@ -127,7 +127,7 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartStat
         }
         const domain = this.range(series);
         const { x, y } = this.scalesOf(domain, readings.length);
-        return html `${this.valueAxis ? this.renderAxis(y, domain) : nothing}${this.renderPlot(series, x, y, domain)} ${this.renderLabels(readings)}${this.renderSummary(series)}${this.renderTable()}`;
+        return html `${this.valueAxis ? this.renderAxis(y, domain) : nothing}${this.renderPlot(series, x, y, domain)} ${this.renderLabels(readings)}${this.renderSummary(series)}${this.renderSonify()}${this.renderTable()}`;
     }
     renderAxis(y, domain) {
         return drawValueAxis(domain, (value) => (y(value) / PLOT_HEIGHT) * 100, formatNumbers(wordsLocale(this)), (widest) => `--line-chart-axis: ${widest}ch`);

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

@@ -1,7 +1,7 @@
 import { AriaForwardController, type DataOptionItem, DisabledCascadeController, HelixFormElement, UpgradeController } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import type { HelixHeadlessOption } from '../../option/root/option-root.js';
-declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusion.dev/helix-core").CollectionElement) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
+declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusion.dev/helix-core").VoiceElement) & (new (...args: any[]) => import("@fusion.dev/helix-core").CollectionElement) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
  * @summary A list of options, from which you choose one or several.
  *
@@ -107,8 +107,10 @@ declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusio
  *
  * @event {Event} change - Fired after the value changes.
  * @event {HelixBeforeChangeEvent} helix-before-change - Fired when the value is about to change, and cancelable.
+ * @event {HelixBeforeListenEvent} helix-before-listen - The dictation button was pressed. Cancelable: cancel it to keep the field from listening.
  * @event {HelixBeforeReorderEvent} helix-before-reorder - Fired when an option is dropped at a new place, in a `reorderable` list with `@fusion.dev/helix/listbox/reorder` imported, with every value in the new order. Cancelable: cancel it to keep the option where it is.
  * @event {HelixFilterEvent} helix-filter - Fired before the list is filtered, and cancelable.
+ * @event {HelixListenEvent} helix-listen - Dictation settled on a phrase and put it in the search field, after the field's own `input`.
  * @event {HelixLoadMoreEvent} helix-load-more - Fired once the list is scrolled within a screen of its end, once for each number of options, and not while `loading` is set. Add the next page of options and set `loading` while you fetch it.
  * @event {HelixReorderEvent} helix-reorder - Fired after `helix-before-reorder` when nobody canceled it. Move your options, or your `items`, to the order in `keys`. Cancelable: cancel it to say the move did not happen.
  * @event {Event} input - Fired after the value changes.
@@ -125,10 +127,14 @@ declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusio
  * @csspart loading - The text shown while the options load.
  * @csspart search - The region that holds the filter field.
  * @csspart search-field - The filter field.
+ * @csspart voice - The dictation button, under `voice` on a `filterable` list, in the search field.
+ * @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 empty - The list has no options to show: none were given, or the filter hid every one.
  * @cssstate error - While `load-error` is set.
  * @cssstate invalid - The control has an error to show, from the browser's validation or from 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.
  * @cssstate loading - While `loading` is set.
  * @cssstate no-results - A filter hid every option of a list that has some.
  */
@@ -734,6 +740,7 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
     private get failed();
     /** The error, or what a filter that hid everything says, before the shared words. */
     protected renderLive(hasContent: boolean): TemplateResult;
+    protected voiceField(): HTMLInputElement | null;
     protected render(): TemplateResult;
 }
 declare global {

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

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { AriaForwardController, auditChildren, centerInView, chosenValues, columnStep, countLabel, customElement, DelayController, DisabledCascadeController, drawAutofill, endInSight, filterKeeps, formatWords, HelixFilterEvent, HelixFormElement, HelixLoadMoreEvent, hostAria, inlineStep, MixinCollection, MixinControllerValue, MixinField, markMatches, OptionWindowController, onApple, pageRows, rangeAdd, reportValues, requestChange, scrollItemIntoView, selectsAll, Typeahead, timeConverter, toggleEvery, typesCharacter, UpgradeController, VIRTUAL_RULE, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { AriaForwardController, auditChildren, centerInView, chosenValues, columnStep, countLabel, customElement, DelayController, DisabledCascadeController, drawAutofill, endInSight, filterKeeps, formatWords, HelixFilterEvent, HelixFormElement, HelixLoadMoreEvent, hostAria, inlineStep, MixinCollection, MixinControllerValue, MixinField, MixinVoice, markMatches, OptionWindowController, onApple, pageRows, rangeAdd, reportValues, requestChange, SPOKEN_RULE, scrollItemIntoView, selectsAll, Typeahead, timeConverter, toggleEvery, typesCharacter, UpgradeController, VIRTUAL_RULE, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { magnifyingGlass } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -8,7 +8,7 @@ import { isOption } from '../../option/among.js';
 const FIELD_MOVES = new Set(['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp']);
 const MOVES = new Set([...FIELD_MOVES, 'End', 'Home']);
 const PAGE = 10;
-let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(MixinControllerValue(MixinField(HelixFormElement))) {
+let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinVoice(MixinCollection(MixinControllerValue(MixinField(HelixFormElement)))) {
     constructor() {
         super(...arguments);
         this.aria = new AriaForwardController(this, {
@@ -222,7 +222,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
             this.navigate(event);
         };
     }
-    static { this.markRules = [VIRTUAL_RULE]; }
+    static { this.markRules = [VIRTUAL_RULE, SPOKEN_RULE]; }
     static { this.words = 'helix-listbox'; }
     get filter() {
         return this.filterState ?? this.defaultFilter;
@@ -617,6 +617,9 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
             ? super.renderLive(hasContent)
             : html `<span part="live" role="status">${words}</span>`;
     }
+    voiceField() {
+        return this.filterable ? this.partNamed('search-field') : null;
+    }
     render() {
         const shown = this.showsOptions;
         return html `${this.renderGroupLabel()}
@@ -638,7 +641,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
                 ?disabled=${this.isDisabled}
                 @input=${this.handleFilter}
                 @keydown=${this.handleFilterKeydown}
-              />
+              />${this.renderVoice()}
             </div>`
             : ''}
       <div

package/dist/markdown/blocks.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Markdown's blocks, read line by line from text that may still be arriving.
+ *
+ * **Written for a stream, so it decides nothing it may have to take back.** A
+ * block that a later line closed is final, and a reader of the result can keep
+ * what it drew for it. Two CommonMark constructs change a block after the
+ * fact, and neither is read: a setext heading (`Title` over `===`), which turns
+ * a paragraph into a heading when its second line arrives, and an indented code
+ * block, which a list's continuation lines are easily mistaken for. `---` under
+ * a paragraph is a rule, and four spaces of indent are text. Reference links
+ * are not read either, since a definition at the end would relink a paragraph
+ * drawn long before it.
+ *
+ * Raw HTML is text. A model's reply is not trusted markup.
+ */
+/** How a table column aligns its cells. */
+export type MarkdownAlign = 'center' | 'end' | 'start' | undefined;
+/** The five kinds of GitHub alert. */
+export type MarkdownAlertKind = 'caution' | 'important' | 'note' | 'tip' | 'warning';
+/** One item of a list, and whether it is a task and done. */
+export interface MarkdownItem {
+    /** Present for a task item: `true` where it is checked. */
+    checked?: boolean;
+    children: MarkdownBlock[];
+}
+/** A block of a Markdown document. */
+export type MarkdownBlock = {
+    kind: 'code';
+    info: string;
+    open: boolean;
+    text: string;
+} | {
+    kind: 'heading';
+    level: number;
+    text: string;
+} | {
+    items: MarkdownItem[];
+    kind: 'list';
+    ordered: boolean;
+    start: number;
+} | {
+    kind: 'paragraph';
+    text: string;
+} | {
+    alert?: MarkdownAlertKind;
+    children: MarkdownBlock[];
+    kind: 'quote';
+} | {
+    kind: 'rule';
+} | {
+    align: MarkdownAlign[];
+    head: string[];
+    kind: 'table';
+    rows: string[][];
+};
+/** The blocks of some lines, and the line each top-level block starts on. */
+export interface MarkdownBlocks {
+    blocks: MarkdownBlock[];
+    starts: number[];
+}
+/** The columns of a line's leading whitespace, a tab reaching the next stop of four. */
+export declare const indentOf: (line: string) => number;
+/** A table row's cells: split at pipes a backslash does not escape, the outer pipes dropped. */
+export declare const cellsOf: (line: string) => string[];
+/** Every block of some lines, in order, and the line each starts on. */
+export declare const parseBlocks: (lines: string[]) => MarkdownBlocks;