@fusion.dev/helix-headless 0.215.3 → 0.216.0

package/types/vue.d.ts

@@ -6,6 +6,7 @@ import type {
   HelixBeforeChangeEvent,
   HelixBeforeCloseEvent,
   HelixBeforeCollapseEvent,
+  HelixBeforeListenEvent,
   HelixBeforeMoveEvent,
   HelixBeforeOpenEvent,
   HelixBeforePasteEvent,
@@ -74,6 +75,8 @@ import type {
   HelixHeadlessCheckboxGroup,
   HelixHeadlessCode,
   HelixHeadlessCodeBlock,
+  HelixHeadlessCodeEditor,
+  HelixHeadlessCodeInput,
   HelixHeadlessColorInput,
   HelixHeadlessColorPicker,
   HelixHeadlessCombobox,
@@ -128,6 +131,7 @@ import type {
   HelixHeadlessMapRaster,
   HelixHeadlessMapRoute,
   HelixHeadlessMapTerrain,
+  HelixHeadlessMarkdown,
   HelixHeadlessMegamenu,
   HelixHeadlessMenu,
   HelixHeadlessMenuItem,
@@ -158,6 +162,7 @@ import type {
   HelixHeadlessScatterChart,
   HelixHeadlessScrollArea,
   HelixHeadlessSelect,
+  HelixHeadlessShortcutOverlay,
   HelixHeadlessSkeleton,
   HelixHeadlessSkipLink,
   HelixHeadlessSlider,
@@ -210,6 +215,7 @@ import type {
   HelixHeadlessVideoPlaylistMenu,
   HelixHeadlessVirtualList,
   HelixHistoryEvent,
+  HelixListenEvent,
   HelixLoadEvent,
   HelixLoadMoreEvent,
   HelixMapClusterEvent,
@@ -794,6 +800,31 @@ beside its buttons and as each page arrives. `{first}`, `{last}` and
 beside its buttons and as each page arrives. `{first}`, `{last}` and
 `{count}` are replaced with the numbers, written in `locale`. */
   readingsLabel?: (HelixHeadlessAreaChart["readingsLabel"]) | undefined;
+  /** Draws a Listen button that plays the chart as sound: each series in
+turn, its readings from left to right and from the left ear to the
+right, the value as pitch over two octaves, a soft tick at each
+gridline, and one timbre a series. With it, each reading the arrow keys
+step to plays its tone beside what the readout says, and L plays the
+whole chart while it has focus. Escape stops it. Nothing plays without a
+press, and the sound is made only then. */
+  sonify?: (HelixHeadlessAreaChart["sonify"]) | undefined;
+  /** How long each series takes to play, in milliseconds or as `3s`. */
+  "sonify-duration"?: (HelixHeadlessAreaChart["sonifyDuration"] | `${number}`) | undefined;
+  /** How long each series takes to play, in milliseconds or as `3s`. */
+  sonifyDuration?: (HelixHeadlessAreaChart["sonifyDuration"]) | undefined;
+  /** The Listen button's words. */
+  "sonify-label"?: (HelixHeadlessAreaChart["sonifyLabel"]) | undefined;
+  /** The Listen button's words. */
+  sonifyLabel?: (HelixHeadlessAreaChart["sonifyLabel"]) | undefined;
+  /** The Listen button's words while the chart plays. */
+  "sonify-stop-label"?: (HelixHeadlessAreaChart["sonifyStopLabel"]) | undefined;
+  /** The Listen button's words while the chart plays. */
+  sonifyStopLabel?: (HelixHeadlessAreaChart["sonifyStopLabel"]) | undefined;
+  /** `visible` draws the chart's text summary under it, as one line.
+`hidden`, or absent, says the summary to a screen reader and draws it
+for no one else. Reflected, because the stylesheet draws it by the
+attribute, and a page that sets the property, as React does, writes none. */
+  summary?: (HelixHeadlessAreaChart["summary"]) | undefined;
   /** The readings as data, in the shape of a table, where the page has no
 table to point `for` at. `for` wins where both are set.
 
@@ -1200,6 +1231,31 @@ beside its buttons and as each page arrives. `{first}`, `{last}` and
 beside its buttons and as each page arrives. `{first}`, `{last}` and
 `{count}` are replaced with the numbers, written in `locale`. */
   readingsLabel?: (HelixHeadlessBarChart["readingsLabel"]) | undefined;
+  /** Draws a Listen button that plays the chart as sound: each series in
+turn, its readings from left to right and from the left ear to the
+right, the value as pitch over two octaves, a soft tick at each
+gridline, and one timbre a series. With it, each reading the arrow keys
+step to plays its tone beside what the readout says, and L plays the
+whole chart while it has focus. Escape stops it. Nothing plays without a
+press, and the sound is made only then. */
+  sonify?: (HelixHeadlessBarChart["sonify"]) | undefined;
+  /** How long each series takes to play, in milliseconds or as `3s`. */
+  "sonify-duration"?: (HelixHeadlessBarChart["sonifyDuration"] | `${number}`) | undefined;
+  /** How long each series takes to play, in milliseconds or as `3s`. */
+  sonifyDuration?: (HelixHeadlessBarChart["sonifyDuration"]) | undefined;
+  /** The Listen button's words. */
+  "sonify-label"?: (HelixHeadlessBarChart["sonifyLabel"]) | undefined;
+  /** The Listen button's words. */
+  sonifyLabel?: (HelixHeadlessBarChart["sonifyLabel"]) | undefined;
+  /** The Listen button's words while the chart plays. */
+  "sonify-stop-label"?: (HelixHeadlessBarChart["sonifyStopLabel"]) | undefined;
+  /** The Listen button's words while the chart plays. */
+  sonifyStopLabel?: (HelixHeadlessBarChart["sonifyStopLabel"]) | undefined;
+  /** `visible` draws the chart's text summary under it, as one line.
+`hidden`, or absent, says the summary to a screen reader and draws it
+for no one else. Reflected, because the stylesheet draws it by the
+attribute, and a page that sets the property, as React does, writes none. */
+  summary?: (HelixHeadlessBarChart["summary"]) | undefined;
   /** The readings as data, in the shape of a table, where the page has no
 table to point `for` at. `for` wins where both are set.
 
@@ -2648,6 +2704,12 @@ export type HelixHeadlessChatComposerElementEvent<E = Event> = TypedEvent<
   HelixHeadlessChatComposer,
   E
 >;
+/** `helix-before-listen` event type */
+export type HelixHeadlessChatComposerHelixBeforeListenElementEvent =
+  HelixHeadlessChatComposerElementEvent<HelixBeforeListenEvent>;
+/** `helix-listen` event type */
+export type HelixHeadlessChatComposerHelixListenElementEvent =
+  HelixHeadlessChatComposerElementEvent<HelixListenEvent>;
 /** `helix-send` event type */
 export type HelixHeadlessChatComposerHelixSendElementEvent =
   HelixHeadlessChatComposerElementEvent<HelixSendEvent>;
@@ -2710,6 +2772,27 @@ milliseconds. The attribute also takes a CSS time, such as `3s`. */
 It follows typing, so reading it gives the draft. Set it to seed a draft or
 to replace the one in the field, and set it to `''` to clear it. */
   value?: (HelixHeadlessChatComposer["value"]) | undefined;
+  /** What a screen reader hears as listening starts. */
+  "listening-label"?: (HelixHeadlessChatComposer["listeningLabel"]) | undefined;
+  /** What a screen reader hears as listening starts. */
+  listeningLabel?: (HelixHeadlessChatComposer["listeningLabel"]) | undefined;
+  /** What a screen reader hears as listening stops. */
+  "stopped-listening-label"?: (HelixHeadlessChatComposer["stoppedListeningLabel"]) | undefined;
+  /** What a screen reader hears as listening stops. */
+  stoppedListeningLabel?: (HelixHeadlessChatComposer["stoppedListeningLabel"]) | undefined;
+  /** Draws a button that listens for dictation and types what it hears at
+the caret. Nothing listens until the button is pressed, and the
+microphone is let go as listening stops. An input of type `password`,
+`email` or `number` draws no button. */
+  voice?: (HelixHeadlessChatComposer["voice"]) | undefined;
+  /** The dictation button's name while it is not listening. */
+  "voice-label"?: (HelixHeadlessChatComposer["voiceLabel"]) | undefined;
+  /** The dictation button's name while it is not listening. */
+  voiceLabel?: (HelixHeadlessChatComposer["voiceLabel"]) | undefined;
+  /** The dictation button's name while it listens. */
+  "voice-stop-label"?: (HelixHeadlessChatComposer["voiceStopLabel"]) | undefined;
+  /** The dictation button's name while it listens. */
+  voiceStopLabel?: (HelixHeadlessChatComposer["voiceStopLabel"]) | undefined;
   /** Whether the control is disabled and cannot be used.
 
 Reflected, because the styled tier selects on it, and mirrored to
@@ -2736,9 +2819,16 @@ imperatively later, and nothing is hydrating by then.
 
 Here rather than on each control. */
   name?: (HelixHeadlessChatComposer["name"]) | undefined;
+  /** The engine this field listens through, in place of the one
+`registerSpeechEngine` gave the page, or the browser's own. */
+  speechEngine?: (HelixHeadlessChatComposer["speechEngine"]) | undefined;
 };
 
 export type HelixHeadlessChatComposerVueEvents = {
+  /** The dictation button was pressed. Cancelable: cancel it to keep the composer from listening. */
+  "helix-before-listen": HelixHeadlessChatComposerHelixBeforeListenElementEvent;
+  /** Dictation settled on a phrase and put it in the draft, after the draft's own `input`. */
+  "helix-listen": HelixHeadlessChatComposerHelixListenElementEvent;
   /** Fired when the user sends their turn, and cancelable. */
   "helix-send": HelixHeadlessChatComposerHelixSendElementEvent;
   /** The user started or stopped writing, with `typing` saying which, as the composer's `typing` does. */
@@ -3486,6 +3576,469 @@ export type HelixHeadlessCodeBlockVueEvents = {
   "helix-toggle": HelixHeadlessCodeBlockHelixToggleElementEvent;
 };
 
+/** `HelixHeadlessCodeEditor` component event */
+export type HelixHeadlessCodeEditorElementEvent<E = Event> = TypedEvent<
+  HelixHeadlessCodeEditor,
+  E
+>;
+/** `helix-before-change` event type */
+export type HelixHeadlessCodeEditorHelixBeforeChangeElementEvent =
+  HelixHeadlessCodeEditorElementEvent<HelixBeforeChangeEvent>;
+
+export type HelixHeadlessCodeEditorVueProps = {
+  /** The name of the header's toolbar, read by screen readers. */
+  "controls-label"?: (HelixHeadlessCodeEditor["controlsLabel"]) | undefined;
+  /** The name of the header's toolbar, read by screen readers. */
+  controlsLabel?: (HelixHeadlessCodeEditor["controlsLabel"]) | undefined;
+  /** How one problem in the list reads. `{line}` is its line and `{message}` what it says. */
+  "diagnostic-label"?: (HelixHeadlessCodeEditor["diagnosticLabel"]) | undefined;
+  /** How one problem in the list reads. `{line}` is its line and `{message}` what it says. */
+  diagnosticLabel?: (HelixHeadlessCodeEditor["diagnosticLabel"]) | undefined;
+  /** The list of problems' name. */
+  "diagnostics-label"?: (HelixHeadlessCodeEditor["diagnosticsLabel"]) | undefined;
+  /** The list of problems' name. */
+  diagnosticsLabel?: (HelixHeadlessCodeEditor["diagnosticsLabel"]) | undefined;
+  /** The name of the find bar's Close button. */
+  "find-close-label"?: (HelixHeadlessCodeEditor["findCloseLabel"]) | undefined;
+  /** The name of the find bar's Close button. */
+  findCloseLabel?: (HelixHeadlessCodeEditor["findCloseLabel"]) | undefined;
+  /** The name of the find bar's toolbar, read by screen readers. */
+  "find-controls-label"?: (HelixHeadlessCodeEditor["findControlsLabel"]) | undefined;
+  /** The name of the find bar's toolbar, read by screen readers. */
+  findControlsLabel?: (HelixHeadlessCodeEditor["findControlsLabel"]) | undefined;
+  /** What the find bar says when its regular expression cannot be read. */
+  "find-invalid-label"?: (HelixHeadlessCodeEditor["findInvalidLabel"]) | undefined;
+  /** What the find bar says when its regular expression cannot be read. */
+  findInvalidLabel?: (HelixHeadlessCodeEditor["findInvalidLabel"]) | undefined;
+  /** The name of the Find button and the find bar's field. */
+  "find-label"?: (HelixHeadlessCodeEditor["findLabel"]) | undefined;
+  /** The name of the Find button and the find bar's field. */
+  findLabel?: (HelixHeadlessCodeEditor["findLabel"]) | undefined;
+  /** The name of the option that finds only the same case. */
+  "find-match-case-label"?: (HelixHeadlessCodeEditor["findMatchCaseLabel"]) | undefined;
+  /** The name of the option that finds only the same case. */
+  findMatchCaseLabel?: (HelixHeadlessCodeEditor["findMatchCaseLabel"]) | undefined;
+  /** The name of the button that selects the next match. */
+  "find-next-label"?: (HelixHeadlessCodeEditor["findNextLabel"]) | undefined;
+  /** The name of the button that selects the next match. */
+  findNextLabel?: (HelixHeadlessCodeEditor["findNextLabel"]) | undefined;
+  /** The name of the button that selects the previous match. */
+  "find-previous-label"?: (HelixHeadlessCodeEditor["findPreviousLabel"]) | undefined;
+  /** The name of the button that selects the previous match. */
+  findPreviousLabel?: (HelixHeadlessCodeEditor["findPreviousLabel"]) | undefined;
+  /** The name of the option that reads the search as a regular expression. */
+  "find-regex-label"?: (HelixHeadlessCodeEditor["findRegexLabel"]) | undefined;
+  /** The name of the option that reads the search as a regular expression. */
+  findRegexLabel?: (HelixHeadlessCodeEditor["findRegexLabel"]) | undefined;
+  /** The name of the button that shows the replace field under the find field. */
+  "find-replace-label"?: (HelixHeadlessCodeEditor["findReplaceLabel"]) | undefined;
+  /** The name of the button that shows the replace field under the find field. */
+  findReplaceLabel?: (HelixHeadlessCodeEditor["findReplaceLabel"]) | undefined;
+  /** The name of the option that finds only whole words. */
+  "find-whole-word-label"?: (HelixHeadlessCodeEditor["findWholeWordLabel"]) | undefined;
+  /** The name of the option that finds only whole words. */
+  findWholeWordLabel?: (HelixHeadlessCodeEditor["findWholeWordLabel"]) | undefined;
+  /** The language to highlight, such as `ts`, `css`, `md` or `rust`. Empty is plain text. */
+  language?: (HelixHeadlessCodeEditor["language"]) | undefined;
+  /** Draws each line's number beside it, in an engine. */
+  "line-numbers"?: (HelixHeadlessCodeEditor["lineNumbers"]) | undefined;
+  /** Draws each line's number beside it, in an engine. */
+  lineNumbers?: (HelixHeadlessCodeEditor["lineNumbers"]) | undefined;
+  /** What the find bar says of its matches. `{index}` is the selected match,
+counting from 1, and `{count}` how many there are. */
+  "matches-label"?: (HelixHeadlessCodeEditor["matchesLabel"]) | undefined;
+  /** What the find bar says of its matches. `{index}` is the selected match,
+counting from 1, and `{count}` how many there are. */
+  matchesLabel?: (HelixHeadlessCodeEditor["matchesLabel"]) | undefined;
+  /** Shown while the editor is empty. */
+  placeholder?: (HelixHeadlessCodeEditor["placeholder"]) | undefined;
+  /** Where the caret is, in the status line. `{line}` and `{column}` count from 1. */
+  "position-label"?: (HelixHeadlessCodeEditor["positionLabel"]) | undefined;
+  /** Where the caret is, in the status line. `{line}` and `{column}` count from 1. */
+  positionLabel?: (HelixHeadlessCodeEditor["positionLabel"]) | undefined;
+  /** How many problems there are, in the status line. `{count}` is the number. */
+  "problems-label"?: (HelixHeadlessCodeEditor["problemsLabel"]) | undefined;
+  /** How many problems there are, in the status line. `{count}` is the number. */
+  problemsLabel?: (HelixHeadlessCodeEditor["problemsLabel"]) | undefined;
+  /** Lets the reader select and copy, and not change, the text. */
+  readonly?: (HelixHeadlessCodeEditor["readOnly"]) | undefined;
+  /** Lets the reader select and copy, and not change, the text. */
+  readOnly?: (HelixHeadlessCodeEditor["readOnly"]) | undefined;
+  /** The name of the button that replaces every match. */
+  "replace-all-label"?: (HelixHeadlessCodeEditor["replaceAllLabel"]) | undefined;
+  /** The name of the button that replaces every match. */
+  replaceAllLabel?: (HelixHeadlessCodeEditor["replaceAllLabel"]) | undefined;
+  /** The name of the button that replaces the selected match. */
+  "replace-label"?: (HelixHeadlessCodeEditor["replaceLabel"]) | undefined;
+  /** The name of the button that replaces the selected match. */
+  replaceLabel?: (HelixHeadlessCodeEditor["replaceLabel"]) | undefined;
+  /** The name of the field the replacement is typed in. */
+  "replace-with-label"?: (HelixHeadlessCodeEditor["replaceWithLabel"]) | undefined;
+  /** The name of the field the replacement is typed in. */
+  replaceWithLabel?: (HelixHeadlessCodeEditor["replaceWithLabel"]) | undefined;
+  /** How many lines tall the plain field is before it scrolls, without an engine. */
+  rows?: (HelixHeadlessCodeEditor["rows"]) | undefined;
+  /** Wraps long lines to the editor's width, in place of scrolling sideways. */
+  wrap?: (HelixHeadlessCodeEditor["wrap"]) | undefined;
+  /** The value the control starts with. A form reset returns it to this value,
+and to the `value` attribute where this one is not written, as a native
+control resets to the `value` it declares. */
+  "default-value"?: (HelixHeadlessCodeEditor["defaultValue"]) | undefined;
+  /** The value the control starts with. A form reset returns it to this value,
+and to the `value` attribute where this one is not written, as a native
+control resets to the `value` it declares. */
+  defaultValue?: (HelixHeadlessCodeEditor["defaultValue"]) | undefined;
+  /** The control's current value, which its form submits.
+
+One property, not two, so `input.value` answers the question anyone
+asking it meant. Writing always applies; `<helix-input value="x">` is the
+same statement in markup, and `default-value` is how markup seeds a value
+a reset should return to. */
+  value?: (HelixHeadlessCodeEditor["value"]) | undefined;
+  /** The name a screen reader says for the field where it shows no label, as
+the platform's `aria-label`. It is drawn as a label and clipped, so it
+names the control inside, and a new one renders at once.
+
+**An `aria-label` is read when the field renders, and nothing else would
+render it again.** It is the platform's attribute and no property of this
+element's, so writing a new one scheduled no update and the label kept
+the old words. Data Table meets this on every column move: each row's
+checkbox is named by the first column, so reordering renames every one.
+
+A reactive property on the attribute, which is the one way Lit observes
+one. Overriding `observedAttributes` in a mixin compiled `this` to the
+mixin's own class, so every field observed only this mixin's attributes
+and dropped its own. Not reflected: the attribute is the consumer's. */
+  "aria-label"?: (string) | undefined;
+  /** The validation message shown under the control. It replaces the
+browser's message. */
+  feedback?: (HelixHeadlessCodeEditor["feedback"]) | undefined;
+  /** Help text shown under the control. A validation message replaces it. */
+  hint?: (HelixHeadlessCodeEditor["hint"]) | undefined;
+  /** The field's label, which is also its accessible name. Content in the
+`label` slot replaces it. */
+  label?: (HelixHeadlessCodeEditor["label"]) | undefined;
+  /** Whether the field needs a value before the form can submit. */
+  required?: (HelixHeadlessCodeEditor["required"]) | undefined;
+  /** The message shown when the field is required and empty.
+
+**Absent, or empty, is the control's own sentence**, "Choose one to
+continue." on a set and the browser's own on a text field, which the
+browser writes in the reader's language. A family with a sentence of its
+own declares it as this property's English, a word property a page
+registers for its locale under the family's key. Every other word a control speaks is a property,
+and this one was the English a form in another language still spoke in
+the bubble it raises on submit: `feedback` replaces the message under
+the field and does not reach that one. */
+  "value-missing-message"?: (HelixHeadlessCodeEditor["valueMissingMessage"]) | undefined;
+  /** The message shown when the field is required and empty.
+
+**Absent, or empty, is the control's own sentence**, "Choose one to
+continue." on a set and the browser's own on a text field, which the
+browser writes in the reader's language. A family with a sentence of its
+own declares it as this property's English, a word property a page
+registers for its locale under the family's key. Every other word a control speaks is a property,
+and this one was the English a form in another language still spoke in
+the bubble it raises on submit: `feedback` replaces the message under
+the field and does not reach that one. */
+  valueMissingMessage?: (HelixHeadlessCodeEditor["valueMissingMessage"]) | undefined;
+  /** Whether the control is disabled and cannot be used.
+
+Reflected, because the styled tier selects on it, and mirrored to
+`aria-disabled` rather than removing the element from the accessibility
+tree, so a screen reader can still announce that the control exists.
+
+The mirror itself is in `willUpdate` below, here rather than in each
+control, because here is where `disabled` is. */
+  disabled?: (HelixHeadlessCodeEditor["disabled"]) | undefined;
+  /** The name the control's value is submitted under.
+
+**Reflected, and it is the exception to "reflect only what CSS selects
+on".** The platform builds a form's entry list from the `name` *content
+attribute*, not from the property, so a control named through the property
+submitted under no name at all and was silently dropped. Measured: two
+inputs in one form, one named by attribute and one by property, and the
+form carried a single entry.
+
+Safe for a React consumer, which is what the rule is protecting: React
+renders a custom element's props as attributes on the server, so the name
+is already in the markup being hydrated and reflecting it writes what is
+there. It is only a change to the markup when a consumer assigns it
+imperatively later, and nothing is hydrating by then.
+
+Here rather than on each control. */
+  name?: (HelixHeadlessCodeEditor["name"]) | undefined;
+  /** The problems in the text, each underlined and listed under the editor. */
+  diagnostics?: (HelixHeadlessCodeEditor["diagnostics"]) | undefined;
+  /** What draws the editor, such as `codeMirrorEngine()` from
+`@fusion.dev/helix-editor`. Absent, the editor is a plain text field. */
+  engine?: (HelixHeadlessCodeEditor["engine"]) | undefined;
+};
+
+export type HelixHeadlessCodeEditorVueEvents = {
+  /** The reader finished an edit and focus left the code, in the engine or the plain field. */
+  change: HelixHeadlessCodeEditorElementEvent;
+  /** The text is about to change. Cancelable: cancel it to keep the current text. */
+  "helix-before-change": HelixHeadlessCodeEditorHelixBeforeChangeElementEvent;
+  /** Fired after the text changes. */
+  input: HelixHeadlessCodeEditorElementEvent;
+};
+
+/** `HelixHeadlessCodeInput` component event */
+export type HelixHeadlessCodeInputElementEvent<E = Event> = TypedEvent<
+  HelixHeadlessCodeInput,
+  E
+>;
+/** `helix-before-change` event type */
+export type HelixHeadlessCodeInputHelixBeforeChangeElementEvent =
+  HelixHeadlessCodeInputElementEvent<HelixBeforeChangeEvent>;
+/** `helix-before-listen` event type */
+export type HelixHeadlessCodeInputHelixBeforeListenElementEvent =
+  HelixHeadlessCodeInputElementEvent<HelixBeforeListenEvent>;
+/** `helix-clear` event type */
+export type HelixHeadlessCodeInputHelixClearElementEvent =
+  HelixHeadlessCodeInputElementEvent<HelixClearEvent>;
+/** `helix-listen` event type */
+export type HelixHeadlessCodeInputHelixListenElementEvent =
+  HelixHeadlessCodeInputElementEvent<HelixListenEvent>;
+
+export type HelixHeadlessCodeInputVueProps = {
+  /** The grammar to highlight, such as `json`, `css`, `ts`, `html` or `sh`. Empty is plain text. */
+  language?: (HelixHeadlessCodeInput["language"]) | undefined;
+  /** How long lines are drawn: `off` keeps each line its length and scrolls
+sideways, as code reads, and `soft` wraps at the field's edge. */
+  wrap?: (HelixHeadlessCodeInput["wrap"]) | undefined;
+  /** What a screen reader hears as listening starts. */
+  "listening-label"?: (HelixHeadlessCodeInput["listeningLabel"]) | undefined;
+  /** What a screen reader hears as listening starts. */
+  listeningLabel?: (HelixHeadlessCodeInput["listeningLabel"]) | undefined;
+  /** What a screen reader hears as listening stops. */
+  "stopped-listening-label"?: (HelixHeadlessCodeInput["stoppedListeningLabel"]) | undefined;
+  /** What a screen reader hears as listening stops. */
+  stoppedListeningLabel?: (HelixHeadlessCodeInput["stoppedListeningLabel"]) | undefined;
+  /** Draws a button that listens for dictation and types what it hears at
+the caret. Nothing listens until the button is pressed, and the
+microphone is let go as listening stops. An input of type `password`,
+`email` or `number` draws no button. */
+  voice?: (HelixHeadlessCodeInput["voice"]) | undefined;
+  /** The dictation button's name while it is not listening. */
+  "voice-label"?: (HelixHeadlessCodeInput["voiceLabel"]) | undefined;
+  /** The dictation button's name while it is not listening. */
+  voiceLabel?: (HelixHeadlessCodeInput["voiceLabel"]) | undefined;
+  /** The dictation button's name while it listens. */
+  "voice-stop-label"?: (HelixHeadlessCodeInput["voiceStopLabel"]) | undefined;
+  /** The dictation button's name while it listens. */
+  voiceStopLabel?: (HelixHeadlessCodeInput["voiceStopLabel"]) | undefined;
+  /** The value the control starts with. A form reset returns it to this value,
+and to the `value` attribute where this one is not written, as a native
+control resets to the `value` it declares. */
+  "default-value"?: (HelixHeadlessCodeInput["defaultValue"]) | undefined;
+  /** The value the control starts with. A form reset returns it to this value,
+and to the `value` attribute where this one is not written, as a native
+control resets to the `value` it declares. */
+  defaultValue?: (HelixHeadlessCodeInput["defaultValue"]) | undefined;
+  /** The control's current value, which its form submits.
+
+One property, not two, so `input.value` answers the question anyone
+asking it meant. Writing always applies; `<helix-input value="x">` is the
+same statement in markup, and `default-value` is how markup seeds a value
+a reset should return to. */
+  value?: (HelixHeadlessCodeInput["value"]) | undefined;
+  /** The name a screen reader says for the field where it shows no label, as
+the platform's `aria-label`. It is drawn as a label and clipped, so it
+names the control inside, and a new one renders at once.
+
+**An `aria-label` is read when the field renders, and nothing else would
+render it again.** It is the platform's attribute and no property of this
+element's, so writing a new one scheduled no update and the label kept
+the old words. Data Table meets this on every column move: each row's
+checkbox is named by the first column, so reordering renames every one.
+
+A reactive property on the attribute, which is the one way Lit observes
+one. Overriding `observedAttributes` in a mixin compiled `this` to the
+mixin's own class, so every field observed only this mixin's attributes
+and dropped its own. Not reflected: the attribute is the consumer's. */
+  "aria-label"?: (string) | undefined;
+  /** The validation message shown under the control. It replaces the
+browser's message. */
+  feedback?: (HelixHeadlessCodeInput["feedback"]) | undefined;
+  /** Help text shown under the control. A validation message replaces it. */
+  hint?: (HelixHeadlessCodeInput["hint"]) | undefined;
+  /** The field's label, which is also its accessible name. Content in the
+`label` slot replaces it. */
+  label?: (HelixHeadlessCodeInput["label"]) | undefined;
+  /** Whether the field needs a value before the form can submit. */
+  required?: (HelixHeadlessCodeInput["required"]) | undefined;
+  /** The message shown when the field is required and empty.
+
+**Absent, or empty, is the control's own sentence**, "Choose one to
+continue." on a set and the browser's own on a text field, which the
+browser writes in the reader's language. A family with a sentence of its
+own declares it as this property's English, a word property a page
+registers for its locale under the family's key. Every other word a control speaks is a property,
+and this one was the English a form in another language still spoke in
+the bubble it raises on submit: `feedback` replaces the message under
+the field and does not reach that one. */
+  "value-missing-message"?: (HelixHeadlessCodeInput["valueMissingMessage"]) | undefined;
+  /** The message shown when the field is required and empty.
+
+**Absent, or empty, is the control's own sentence**, "Choose one to
+continue." on a set and the browser's own on a text field, which the
+browser writes in the reader's language. A family with a sentence of its
+own declares it as this property's English, a word property a page
+registers for its locale under the family's key. Every other word a control speaks is a property,
+and this one was the English a form in another language still spoke in
+the bubble it raises on submit: `feedback` replaces the message under
+the field and does not reach that one. */
+  valueMissingMessage?: (HelixHeadlessCodeInput["valueMissingMessage"]) | undefined;
+  /** What the browser can autofill in the field, as a standard `autocomplete`
+token.
+
+Empty leaves the attribute off, which is the browser's default. Set it to
+a token like `email` or `bday` to ask for autofill, or to `off` to refuse. */
+  autocomplete?: (HelixHeadlessCodeInput["autocomplete"]) | undefined;
+  /** Grows the box to fit its content, so it does not scroll. */
+  "auto-grow"?: (HelixHeadlessCodeInput["autoGrow"]) | undefined;
+  /** Grows the box to fit its content, so it does not scroll. */
+  autoGrow?: (HelixHeadlessCodeInput["autoGrow"]) | undefined;
+  /** Draws a button that empties the field while it holds text. */
+  clearable?: (HelixHeadlessCodeInput["clearable"]) | undefined;
+  /** The accessible name of the clear button, which shows only an icon. */
+  "clear-label"?: (HelixHeadlessCodeInput["clearLabel"]) | undefined;
+  /** The accessible name of the clear button, which shows only an icon. */
+  clearLabel?: (HelixHeadlessCodeInput["clearLabel"]) | undefined;
+  /** How many characters wide the box is, when the layout does not set its
+width.
+
+Optional and absent by default, which is the reflected-property rule: a
+`<textarea>` left alone is 20 columns wide and a styled one is whatever its
+box says, so writing a number here is a departure rather than the resting
+state. `wrap="hard"` needs it, the two being the pair that decides where
+the browser inserts the line breaks it submits. */
+  cols?: (HelixHeadlessCodeInput["cols"]) | undefined;
+  /** The name of a second form entry that submits the direction of the text.
+
+**Submitted through `setFormValue`, because the inner control's own
+`dirname` cannot reach the form.** This host is form-associated and reports
+its value itself, so the `<textarea>` inside the shadow root participates in
+no form at all and forwarding the attribute would have looked right and
+submitted nothing. `ElementInternals` takes a `FormData`, which is how one
+element sends two entries, and that is what this does. */
+  dirname?: (HelixHeadlessCodeInput["dirName"]) | undefined;
+  /** The name of a second form entry that submits the direction of the text.
+
+**Submitted through `setFormValue`, because the inner control's own
+`dirname` cannot reach the form.** This host is form-associated and reports
+its value itself, so the `<textarea>` inside the shadow root participates in
+no form at all and forwarding the attribute would have looked right and
+submitted nothing. `ElementInternals` takes a `FormData`, which is how one
+element sends two entries, and that is what this does. */
+  dirName?: (HelixHeadlessCodeInput["dirName"]) | undefined;
+  /** The most characters the value can have. */
+  maxlength?: (HelixHeadlessCodeInput["maxLength"] | `${number}`) | undefined;
+  /** The most characters the value can have. */
+  maxLength?: (HelixHeadlessCodeInput["maxLength"]) | undefined;
+  /** How many lines an `auto-grow` field grows to before it scrolls. Absent,
+it grows with all of its text. */
+  "max-rows"?: (HelixHeadlessCodeInput["maxRows"] | `${number}`) | undefined;
+  /** How many lines an `auto-grow` field grows to before it scrolls. Absent,
+it grows with all of its text. */
+  maxRows?: (HelixHeadlessCodeInput["maxRows"]) | undefined;
+  /** The fewest characters the value can have.
+
+Forwarded to the real `<textarea>` rather than checked here, which is what
+makes the message the browser's and therefore the reader's own language.
+No `pattern`: the platform does not give a textarea one, and inventing it
+would be this library guessing where the point is to stop guessing. */
+  minlength?: (HelixHeadlessCodeInput["minLength"] | `${number}`) | undefined;
+  /** The fewest characters the value can have.
+
+Forwarded to the real `<textarea>` rather than checked here, which is what
+makes the message the browser's and therefore the reader's own language.
+No `pattern`: the platform does not give a textarea one, and inventing it
+would be this library guessing where the point is to stop guessing. */
+  minLength?: (HelixHeadlessCodeInput["minLength"]) | undefined;
+  /** Text shown while the field is empty.
+
+Not a label: it goes when typing starts. */
+  placeholder?: (HelixHeadlessCodeInput["placeholder"]) | undefined;
+  /** Blocks typing in the field. The value is still submitted with the form. */
+  readonly?: (HelixHeadlessCodeInput["readOnly"]) | undefined;
+  /** Blocks typing in the field. The value is still submitted with the form. */
+  readOnly?: (HelixHeadlessCodeInput["readOnly"]) | undefined;
+  /** How many lines the box is before anything is typed. */
+  rows?: (HelixHeadlessCodeInput["rows"]) | undefined;
+  /** Whether the control is disabled and cannot be used.
+
+Reflected, because the styled tier selects on it, and mirrored to
+`aria-disabled` rather than removing the element from the accessibility
+tree, so a screen reader can still announce that the control exists.
+
+The mirror itself is in `willUpdate` below, here rather than in each
+control, because here is where `disabled` is. */
+  disabled?: (HelixHeadlessCodeInput["disabled"]) | undefined;
+  /** The name the control's value is submitted under.
+
+**Reflected, and it is the exception to "reflect only what CSS selects
+on".** The platform builds a form's entry list from the `name` *content
+attribute*, not from the property, so a control named through the property
+submitted under no name at all and was silently dropped. Measured: two
+inputs in one form, one named by attribute and one by property, and the
+form carried a single entry.
+
+Safe for a React consumer, which is what the rule is protecting: React
+renders a custom element's props as attributes on the server, so the name
+is already in the markup being hydrated and reflecting it writes what is
+there. It is only a change to the markup when a consumer assigns it
+imperatively later, and nothing is hydrating by then.
+
+Here rather than on each control. */
+  name?: (HelixHeadlessCodeInput["name"]) | undefined;
+  /** Turns the code into highlighted markup for its `language`, for this field
+alone. Absent, the field draws with the highlighter `registerHighlighter`
+gave the page, and plain where there is none. The markup is drawn as
+given, so it escapes the code, as every highlighter does. */
+  highlight?: (HelixHeadlessCodeInput["highlight"]) | undefined;
+  /** The engine this field listens through, in place of the one
+`registerSpeechEngine` gave the page, or the browser's own. */
+  speechEngine?: (HelixHeadlessCodeInput["speechEngine"]) | undefined;
+  /** The direction of the selection, as a native textarea reports it.
+
+**The whole reason this renders a real `<textarea>` is the caret**, and the
+control is inside this shadow root, so `querySelector` does not find it and
+a consumer has no other way to ask where the selection is, let alone move
+it. A field that cannot be scripted at the caret cannot do an
+insert-at-cursor toolbar, which is the first thing anybody builds on a
+textarea.
+
+Written through to the control, and answering zero before there is one,
+which is where an empty field's caret would be anyway. */
+  selectionDirection?: (HelixHeadlessCodeInput["selectionDirection"]) | undefined;
+  /** Where the selection ends, as an offset into the value. */
+  selectionEnd?: (HelixHeadlessCodeInput["selectionEnd"]) | undefined;
+  /** Where the selection starts, as an offset into the value. */
+  selectionStart?: (HelixHeadlessCodeInput["selectionStart"]) | undefined;
+  /** Your own rule for the value, run on every change once the browser finds
+nothing wrong. Return a message, or a list of them, to mark the field
+invalid, and `true`, `null`, or nothing to accept the value. */
+  validate?: (HelixHeadlessCodeInput["validate"]) | undefined;
+};
+
+export type HelixHeadlessCodeInputVueEvents = {
+  /** Sent from the textarea when the user finishes an edit. */
+  change: HelixHeadlessCodeInputElementEvent;
+  /** Fired as the text changes, and cancelable. */
+  "helix-before-change": HelixHeadlessCodeInputHelixBeforeChangeElementEvent;
+  /** The dictation button was pressed. Cancelable: cancel it to keep the field from listening. */
+  "helix-before-listen": HelixHeadlessCodeInputHelixBeforeListenElementEvent;
+  /** Fired after the clear button has emptied the field, after `input` and `change`. */
+  "helix-clear": HelixHeadlessCodeInputHelixClearElementEvent;
+  /** Dictation settled on a phrase and put it in the value, after the field's own `input`. */
+  "helix-listen": HelixHeadlessCodeInputHelixListenElementEvent;
+  /** Fired after the value changes. */
+  input: HelixHeadlessCodeInputElementEvent;
+};
+
 export type HelixHeadlessCodeVueProps = {};
 
 export type HelixHeadlessCodeVueEvents = {};
@@ -4530,6 +5083,19 @@ export type HelixHeadlessCommandToggleElementEvent =
   HelixHeadlessCommandElementEvent<ToggleEvent>;
 
 export type HelixHeadlessCommandVueProps = {
+  /** Lists the controls on screen below the palette's own commands, once the
+reader types: every labeled Helix button, field, tab, switch and the
+rest, by its name, with its shortcut. Choosing one closes the palette and
+presses the control, or moves focus into a field.
+
+A control that is disabled, inert, hidden or under `unlisted` is left out,
+and so is anything inside the palette. Off by default, so a palette used
+as a search box lists only what it holds. */
+  controls?: (HelixHeadlessCommand["controls"]) | undefined;
+  /** The heading over the controls on screen. */
+  "controls-label"?: (HelixHeadlessCommand["controlsLabel"]) | undefined;
+  /** The heading over the controls on screen. */
+  controlsLabel?: (HelixHeadlessCommand["controlsLabel"]) | undefined;
   /** The text shown when the filter matches no commands. */
   "empty-text"?: (HelixHeadlessCommand["emptyText"]) | undefined;
   /** The text shown when the filter matches no commands. */
@@ -4564,6 +5130,12 @@ Empty turns it off, for a consumer who opens the palette from a button or
 from their own shortcut handler. There is no list of defaults to fight
 with: one key, said once. */
   hotkey?: (HelixHeadlessCommand["hotkey"]) | undefined;
+  /** What the hotkey does, as a list of the page's shortcuts says it, with
+`{label}` for the palette's `label`. */
+  "hotkey-label"?: (HelixHeadlessCommand["hotkeyLabel"]) | undefined;
+  /** What the hotkey does, as a list of the page's shortcuts says it, with
+`{label}` for the palette's `label`. */
+  hotkeyLabel?: (HelixHeadlessCommand["hotkeyLabel"]) | undefined;
   /** Draws the palette in the page, where it stands, with no dialog: a search
 over a list of commands, as React Aria's Autocomplete is drawn.
 
@@ -4629,6 +5201,9 @@ how many are left, written in the locale, and each language writes the
 forms it has: `{count, plural, one {# polecenie} few {# polecenia} many
 {# poleceń} other {# polecenia}}`. */
   resultsLabel?: (HelixHeadlessCommand["resultsLabel"]) | undefined;
+  /** Draws a dictation button in the search field, which listens through the
+page's speech engine and types what it hears, as a field's `voice` does. */
+  voice?: (HelixHeadlessCommand["voice"]) | undefined;
   /** Whether the element starts open. Ignored once `open` is written. */
   "default-open"?: (HelixHeadlessCommand["defaultOpen"]) | undefined;
   /** Whether the element starts open. Ignored once `open` is written. */
@@ -6741,6 +7316,31 @@ beside its buttons and as each page arrives. `{first}`, `{last}` and
 beside its buttons and as each page arrives. `{first}`, `{last}` and
 `{count}` are replaced with the numbers, written in `locale`. */
   readingsLabel?: (HelixHeadlessDonutChart["readingsLabel"]) | undefined;
+  /** Draws a Listen button that plays the chart as sound: each series in
+turn, its readings from left to right and from the left ear to the
+right, the value as pitch over two octaves, a soft tick at each
+gridline, and one timbre a series. With it, each reading the arrow keys
+step to plays its tone beside what the readout says, and L plays the
+whole chart while it has focus. Escape stops it. Nothing plays without a
+press, and the sound is made only then. */
+  sonify?: (HelixHeadlessDonutChart["sonify"]) | undefined;
+  /** How long each series takes to play, in milliseconds or as `3s`. */
+  "sonify-duration"?: (HelixHeadlessDonutChart["sonifyDuration"] | `${number}`) | undefined;
+  /** How long each series takes to play, in milliseconds or as `3s`. */
+  sonifyDuration?: (HelixHeadlessDonutChart["sonifyDuration"]) | undefined;
+  /** The Listen button's words. */
+  "sonify-label"?: (HelixHeadlessDonutChart["sonifyLabel"]) | undefined;
+  /** The Listen button's words. */
+  sonifyLabel?: (HelixHeadlessDonutChart["sonifyLabel"]) | undefined;
+  /** The Listen button's words while the chart plays. */
+  "sonify-stop-label"?: (HelixHeadlessDonutChart["sonifyStopLabel"]) | undefined;
+  /** The Listen button's words while the chart plays. */
+  sonifyStopLabel?: (HelixHeadlessDonutChart["sonifyStopLabel"]) | undefined;
+  /** `visible` draws the chart's text summary under it, as one line.
+`hidden`, or absent, says the summary to a screen reader and draws it
+for no one else. Reflected, because the stylesheet draws it by the
+attribute, and a page that sets the property, as React does, writes none. */
+  summary?: (HelixHeadlessDonutChart["summary"]) | undefined;
   /** The readings as data, in the shape of a table, where the page has no
 table to point `for` at. `for` wins where both are set.
 
@@ -7417,6 +8017,9 @@ export type HelixHeadlessFilterInputHelixBeforeChangeElementEvent =
 /** `helix-before-close` event type */
 export type HelixHeadlessFilterInputHelixBeforeCloseElementEvent =
   HelixHeadlessFilterInputElementEvent<HelixBeforeCloseEvent>;
+/** `helix-before-listen` event type */
+export type HelixHeadlessFilterInputHelixBeforeListenElementEvent =
+  HelixHeadlessFilterInputElementEvent<HelixBeforeListenEvent>;
 /** `helix-before-open` event type */
 export type HelixHeadlessFilterInputHelixBeforeOpenElementEvent =
   HelixHeadlessFilterInputElementEvent<HelixBeforeOpenEvent>;
@@ -7426,6 +8029,9 @@ export type HelixHeadlessFilterInputHelixDismissElementEvent =
 /** `helix-facet` event type */
 export type HelixHeadlessFilterInputHelixFacetElementEvent =
   HelixHeadlessFilterInputElementEvent<HelixFacetEvent>;
+/** `helix-listen` event type */
+export type HelixHeadlessFilterInputHelixListenElementEvent =
+  HelixHeadlessFilterInputElementEvent<HelixListenEvent>;
 /** `helix-select` event type */
 export type HelixHeadlessFilterInputHelixSelectElementEvent =
   HelixHeadlessFilterInputElementEvent<HelixSelectEvent>;
@@ -7520,6 +8126,27 @@ how many, written in the locale, and each language writes the forms it
 has: `{count, plural, one {# sugestia} few {# sugestie} many {# sugestii}
 other {# sugestii}}`. */
   suggestionsLabel?: (HelixHeadlessFilterInput["suggestionsLabel"]) | undefined;
+  /** What a screen reader hears as listening starts. */
+  "listening-label"?: (HelixHeadlessFilterInput["listeningLabel"]) | undefined;
+  /** What a screen reader hears as listening starts. */
+  listeningLabel?: (HelixHeadlessFilterInput["listeningLabel"]) | undefined;
+  /** What a screen reader hears as listening stops. */
+  "stopped-listening-label"?: (HelixHeadlessFilterInput["stoppedListeningLabel"]) | undefined;
+  /** What a screen reader hears as listening stops. */
+  stoppedListeningLabel?: (HelixHeadlessFilterInput["stoppedListeningLabel"]) | undefined;
+  /** Draws a button that listens for dictation and types what it hears at
+the caret. Nothing listens until the button is pressed, and the
+microphone is let go as listening stops. An input of type `password`,
+`email` or `number` draws no button. */
+  voice?: (HelixHeadlessFilterInput["voice"]) | undefined;
+  /** The dictation button's name while it is not listening. */
+  "voice-label"?: (HelixHeadlessFilterInput["voiceLabel"]) | undefined;
+  /** The dictation button's name while it is not listening. */
+  voiceLabel?: (HelixHeadlessFilterInput["voiceLabel"]) | undefined;
+  /** The dictation button's name while it listens. */
+  "voice-stop-label"?: (HelixHeadlessFilterInput["voiceStopLabel"]) | undefined;
+  /** The dictation button's name while it listens. */
+  voiceStopLabel?: (HelixHeadlessFilterInput["voiceStopLabel"]) | undefined;
   /** Whether the element starts open. Ignored once `open` is written. */
   "default-open"?: (HelixHeadlessFilterInput["defaultOpen"]) | undefined;
   /** Whether the element starts open. Ignored once `open` is written. */
@@ -7654,6 +8281,9 @@ returns the suggestions or a promise of them. Each is a string, or a
 the panel, beside any you slot. A property only, there being no way to
 write a function in markup. See the class description. */
   source?: (HelixHeadlessFilterInput["source"]) | undefined;
+  /** The engine this field listens through, in place of the one
+`registerSpeechEngine` gave the page, or the browser's own. */
+  speechEngine?: (HelixHeadlessFilterInput["speechEngine"]) | undefined;
 };
 
 export type HelixHeadlessFilterInputVueEvents = {
@@ -7663,12 +8293,16 @@ export type HelixHeadlessFilterInputVueEvents = {
   "helix-before-change": HelixHeadlessFilterInputHelixBeforeChangeElementEvent;
   /** Fired before the suggestions close. Cancelable: call `preventDefault()` to keep them open. */
   "helix-before-close": HelixHeadlessFilterInputHelixBeforeCloseElementEvent;
+  /** The dictation button was pressed. Cancelable: cancel it to keep the field from listening. */
+  "helix-before-listen": HelixHeadlessFilterInputHelixBeforeListenElementEvent;
   /** Fired before the suggestions open. Cancelable: call `preventDefault()` to keep them closed. */
   "helix-before-open": HelixHeadlessFilterInputHelixBeforeOpenElementEvent;
   /** 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. */
   "helix-dismiss": HelixHeadlessFilterInputHelixDismissElementEvent;
   /** 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. */
   "helix-facet": HelixHeadlessFilterInputHelixFacetElementEvent;
+  /** Dictation settled on a phrase and put it in the field, after the field's own `input`. */
+  "helix-listen": HelixHeadlessFilterInputHelixListenElementEvent;
   /** 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. */
   "helix-select": HelixHeadlessFilterInputHelixSelectElementEvent;
   /** Fired when the text changes. */
@@ -8440,6 +9074,31 @@ beside its buttons and as each page arrives. `{first}`, `{last}` and
 beside its buttons and as each page arrives. `{first}`, `{last}` and
 `{count}` are replaced with the numbers, written in `locale`. */
   readingsLabel?: (HelixHeadlessHeatmap["readingsLabel"]) | undefined;
+  /** Draws a Listen button that plays the chart as sound: each series in
+turn, its readings from left to right and from the left ear to the
+right, the value as pitch over two octaves, a soft tick at each
+gridline, and one timbre a series. With it, each reading the arrow keys
+step to plays its tone beside what the readout says, and L plays the
+whole chart while it has focus. Escape stops it. Nothing plays without a
+press, and the sound is made only then. */
+  sonify?: (HelixHeadlessHeatmap["sonify"]) | undefined;
+  /** How long each series takes to play, in milliseconds or as `3s`. */
+  "sonify-duration"?: (HelixHeadlessHeatmap["sonifyDuration"] | `${number}`) | undefined;
+  /** How long each series takes to play, in milliseconds or as `3s`. */
+  sonifyDuration?: (HelixHeadlessHeatmap["sonifyDuration"]) | undefined;
+  /** The Listen button's words. */
+  "sonify-label"?: (HelixHeadlessHeatmap["sonifyLabel"]) | undefined;
+  /** The Listen button's words. */
+  sonifyLabel?: (HelixHeadlessHeatmap["sonifyLabel"]) | undefined;
+  /** The Listen button's words while the chart plays. */
+  "sonify-stop-label"?: (HelixHeadlessHeatmap["sonifyStopLabel"]) | undefined;
+  /** The Listen button's words while the chart plays. */
+  sonifyStopLabel?: (HelixHeadlessHeatmap["sonifyStopLabel"]) | undefined;
+  /** `visible` draws the chart's text summary under it, as one line.
+`hidden`, or absent, says the summary to a screen reader and draws it
+for no one else. Reflected, because the stylesheet draws it by the
+attribute, and a page that sets the property, as React does, writes none. */
+  summary?: (HelixHeadlessHeatmap["summary"]) | undefined;
   /** The readings as data, in the shape of a table, where the page has no
 table to point `for` at. `for` wins where both are set.
 
@@ -8843,9 +9502,15 @@ export type HelixHeadlessInputElementEvent<E = Event> = TypedEvent<
 /** `helix-before-change` event type */
 export type HelixHeadlessInputHelixBeforeChangeElementEvent =
   HelixHeadlessInputElementEvent<HelixBeforeChangeEvent>;
+/** `helix-before-listen` event type */
+export type HelixHeadlessInputHelixBeforeListenElementEvent =
+  HelixHeadlessInputElementEvent<HelixBeforeListenEvent>;
 /** `helix-clear` event type */
 export type HelixHeadlessInputHelixClearElementEvent =
   HelixHeadlessInputElementEvent<HelixClearEvent>;
+/** `helix-listen` event type */
+export type HelixHeadlessInputHelixListenElementEvent =
+  HelixHeadlessInputElementEvent<HelixListenEvent>;
 
 export type HelixHeadlessInputVueProps = {
   /** Whether a phone capitalizes as the reader types: `off`, `sentences`,
@@ -8958,6 +9623,27 @@ Nothing reads it from the attribute either. The real `<input>` inside takes
 it as a property binding, which is what makes the keyboard and the
 validation follow. */
   type?: (HelixHeadlessInput["type"]) | undefined;
+  /** What a screen reader hears as listening starts. */
+  "listening-label"?: (HelixHeadlessInput["listeningLabel"]) | undefined;
+  /** What a screen reader hears as listening starts. */
+  listeningLabel?: (HelixHeadlessInput["listeningLabel"]) | undefined;
+  /** What a screen reader hears as listening stops. */
+  "stopped-listening-label"?: (HelixHeadlessInput["stoppedListeningLabel"]) | undefined;
+  /** What a screen reader hears as listening stops. */
+  stoppedListeningLabel?: (HelixHeadlessInput["stoppedListeningLabel"]) | undefined;
+  /** Draws a button that listens for dictation and types what it hears at
+the caret. Nothing listens until the button is pressed, and the
+microphone is let go as listening stops. An input of type `password`,
+`email` or `number` draws no button. */
+  voice?: (HelixHeadlessInput["voice"]) | undefined;
+  /** The dictation button's name while it is not listening. */
+  "voice-label"?: (HelixHeadlessInput["voiceLabel"]) | undefined;
+  /** The dictation button's name while it is not listening. */
+  voiceLabel?: (HelixHeadlessInput["voiceLabel"]) | undefined;
+  /** The dictation button's name while it listens. */
+  "voice-stop-label"?: (HelixHeadlessInput["voiceStopLabel"]) | undefined;
+  /** The dictation button's name while it listens. */
+  voiceStopLabel?: (HelixHeadlessInput["voiceStopLabel"]) | undefined;
   /** The value the control starts with. A form reset returns it to this value,
 and to the `value` attribute where this one is not written, as a native
 control resets to the `value` it declares. */
@@ -9066,6 +9752,9 @@ be anyway. */
 nothing wrong. Return a message, or a list of them, to mark the field
 invalid, and `true`, `null`, or nothing to accept the value. */
   validate?: (HelixHeadlessInput["validate"]) | undefined;
+  /** The engine this field listens through, in place of the one
+`registerSpeechEngine` gave the page, or the browser's own. */
+  speechEngine?: (HelixHeadlessInput["speechEngine"]) | undefined;
 };
 
 export type HelixHeadlessInputVueEvents = {
@@ -9073,8 +9762,12 @@ export type HelixHeadlessInputVueEvents = {
   change: HelixHeadlessInputElementEvent;
   /** The text is about to change. Cancelable: cancel it to keep the current text. */
   "helix-before-change": HelixHeadlessInputHelixBeforeChangeElementEvent;
+  /** The dictation button was pressed. Cancelable: cancel it to keep the field from listening. */
+  "helix-before-listen": HelixHeadlessInputHelixBeforeListenElementEvent;
   /** Fired after the clear button has emptied the field, after `input` and `change`. */
   "helix-clear": HelixHeadlessInputHelixClearElementEvent;
+  /** Dictation settled on a phrase and put it in the value, after the field's own `input`. */
+  "helix-listen": HelixHeadlessInputHelixListenElementEvent;
   /** Fired as the value changes. */
   input: HelixHeadlessInputElementEvent;
 };
@@ -9637,6 +10330,31 @@ beside its buttons and as each page arrives. `{first}`, `{last}` and
 beside its buttons and as each page arrives. `{first}`, `{last}` and
 `{count}` are replaced with the numbers, written in `locale`. */
   readingsLabel?: (HelixHeadlessLineChart["readingsLabel"]) | undefined;
+  /** Draws a Listen button that plays the chart as sound: each series in
+turn, its readings from left to right and from the left ear to the
+right, the value as pitch over two octaves, a soft tick at each
+gridline, and one timbre a series. With it, each reading the arrow keys
+step to plays its tone beside what the readout says, and L plays the
+whole chart while it has focus. Escape stops it. Nothing plays without a
+press, and the sound is made only then. */
+  sonify?: (HelixHeadlessLineChart["sonify"]) | undefined;
+  /** How long each series takes to play, in milliseconds or as `3s`. */
+  "sonify-duration"?: (HelixHeadlessLineChart["sonifyDuration"] | `${number}`) | undefined;
+  /** How long each series takes to play, in milliseconds or as `3s`. */
+  sonifyDuration?: (HelixHeadlessLineChart["sonifyDuration"]) | undefined;
+  /** The Listen button's words. */
+  "sonify-label"?: (HelixHeadlessLineChart["sonifyLabel"]) | undefined;
+  /** The Listen button's words. */
+  sonifyLabel?: (HelixHeadlessLineChart["sonifyLabel"]) | undefined;
+  /** The Listen button's words while the chart plays. */
+  "sonify-stop-label"?: (HelixHeadlessLineChart["sonifyStopLabel"]) | undefined;
+  /** The Listen button's words while the chart plays. */
+  sonifyStopLabel?: (HelixHeadlessLineChart["sonifyStopLabel"]) | undefined;
+  /** `visible` draws the chart's text summary under it, as one line.
+`hidden`, or absent, says the summary to a screen reader and draws it
+for no one else. Reflected, because the stylesheet draws it by the
+attribute, and a page that sets the property, as React does, writes none. */
+  summary?: (HelixHeadlessLineChart["summary"]) | undefined;
   /** The readings as data, in the shape of a table, where the page has no
 table to point `for` at. `for` wins where both are set.
 
@@ -9911,12 +10629,18 @@ export type HelixHeadlessListboxElementEvent<E = Event> = TypedEvent<
 /** `helix-before-change` event type */
 export type HelixHeadlessListboxHelixBeforeChangeElementEvent =
   HelixHeadlessListboxElementEvent<HelixBeforeChangeEvent>;
+/** `helix-before-listen` event type */
+export type HelixHeadlessListboxHelixBeforeListenElementEvent =
+  HelixHeadlessListboxElementEvent<HelixBeforeListenEvent>;
 /** `helix-before-reorder` event type */
 export type HelixHeadlessListboxHelixBeforeReorderElementEvent =
   HelixHeadlessListboxElementEvent<HelixBeforeReorderEvent>;
 /** `helix-filter` event type */
 export type HelixHeadlessListboxHelixFilterElementEvent =
   HelixHeadlessListboxElementEvent<HelixFilterEvent>;
+/** `helix-listen` event type */
+export type HelixHeadlessListboxHelixListenElementEvent =
+  HelixHeadlessListboxElementEvent<HelixListenEvent>;
 /** `helix-load-more` event type */
 export type HelixHeadlessListboxHelixLoadMoreElementEvent =
   HelixHeadlessListboxElementEvent<HelixLoadMoreEvent>;
@@ -10074,6 +10798,27 @@ locale. */
 Absent, or empty, is this sentence, or the words registered for the page's
 locale. */
   valueMissingMessage?: (HelixHeadlessListbox["valueMissingMessage"]) | undefined;
+  /** What a screen reader hears as listening starts. */
+  "listening-label"?: (HelixHeadlessListbox["listeningLabel"]) | undefined;
+  /** What a screen reader hears as listening starts. */
+  listeningLabel?: (HelixHeadlessListbox["listeningLabel"]) | undefined;
+  /** What a screen reader hears as listening stops. */
+  "stopped-listening-label"?: (HelixHeadlessListbox["stoppedListeningLabel"]) | undefined;
+  /** What a screen reader hears as listening stops. */
+  stoppedListeningLabel?: (HelixHeadlessListbox["stoppedListeningLabel"]) | undefined;
+  /** Draws a button that listens for dictation and types what it hears at
+the caret. Nothing listens until the button is pressed, and the
+microphone is let go as listening stops. An input of type `password`,
+`email` or `number` draws no button. */
+  voice?: (HelixHeadlessListbox["voice"]) | undefined;
+  /** The dictation button's name while it is not listening. */
+  "voice-label"?: (HelixHeadlessListbox["voiceLabel"]) | undefined;
+  /** The dictation button's name while it is not listening. */
+  voiceLabel?: (HelixHeadlessListbox["voiceLabel"]) | undefined;
+  /** The dictation button's name while it listens. */
+  "voice-stop-label"?: (HelixHeadlessListbox["voiceStopLabel"]) | undefined;
+  /** The dictation button's name while it listens. */
+  voiceStopLabel?: (HelixHeadlessListbox["voiceStopLabel"]) | undefined;
   /** Whether the rows are still loading.
 
 Reflected, because a stylesheet needs it: the rows that are already there
@@ -10187,6 +10932,9 @@ With `multiple` it is the first chosen one, which is also what the platform
 answers: a single index cannot describe a set, and `value` is the property
 that can. */
   selectedIndex?: (HelixHeadlessListbox["selectedIndex"]) | undefined;
+  /** The engine this field listens through, in place of the one
+`registerSpeechEngine` gave the page, or the browser's own. */
+  speechEngine?: (HelixHeadlessListbox["speechEngine"]) | undefined;
 };
 
 export type HelixHeadlessListboxVueEvents = {
@@ -10194,10 +10942,14 @@ export type HelixHeadlessListboxVueEvents = {
   change: HelixHeadlessListboxElementEvent;
   /** Fired when the value is about to change, and cancelable. */
   "helix-before-change": HelixHeadlessListboxHelixBeforeChangeElementEvent;
+  /** The dictation button was pressed. Cancelable: cancel it to keep the field from listening. */
+  "helix-before-listen": HelixHeadlessListboxHelixBeforeListenElementEvent;
   /** 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. */
   "helix-before-reorder": HelixHeadlessListboxHelixBeforeReorderElementEvent;
   /** Fired before the list is filtered, and cancelable. */
   "helix-filter": HelixHeadlessListboxHelixFilterElementEvent;
+  /** Dictation settled on a phrase and put it in the search field, after the field's own `input`. */
+  "helix-listen": HelixHeadlessListboxHelixListenElementEvent;
   /** 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. */
   "helix-load-more": HelixHeadlessListboxHelixLoadMoreElementEvent;
   /** 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. */
@@ -11247,6 +11999,39 @@ export type HelixHeadlessMapTerrainVueEvents = {
   "helix-map-part-change": HelixHeadlessMapTerrainHelixMapPartChangeElementEvent;
 };
 
+export type HelixHeadlessMarkdownVueProps = {
+  /** The heading of a `> [!CAUTION]` alert. */
+  "caution-heading"?: (HelixHeadlessMarkdown["cautionHeading"]) | undefined;
+  /** The heading of a `> [!CAUTION]` alert. */
+  cautionHeading?: (HelixHeadlessMarkdown["cautionHeading"]) | undefined;
+  /** The heading of a `> [!IMPORTANT]` alert. */
+  "important-heading"?: (HelixHeadlessMarkdown["importantHeading"]) | undefined;
+  /** The heading of a `> [!IMPORTANT]` alert. */
+  importantHeading?: (HelixHeadlessMarkdown["importantHeading"]) | undefined;
+  /** The heading of a `> [!NOTE]` alert. */
+  "note-heading"?: (HelixHeadlessMarkdown["noteHeading"]) | undefined;
+  /** The heading of a `> [!NOTE]` alert. */
+  noteHeading?: (HelixHeadlessMarkdown["noteHeading"]) | undefined;
+  /** Whether more text is coming. While it is set, the end of `text` is read
+as a block still arriving, and the element is busy to assistive
+technology. Clear it when the reply ends, and the last block is read as
+finished. */
+  streaming?: (HelixHeadlessMarkdown["streaming"]) | undefined;
+  /** The Markdown. Set it to the whole reply so far each time more arrives: a
+text that starts with the one before is drawn by its new end alone. */
+  text?: (HelixHeadlessMarkdown["text"]) | undefined;
+  /** The heading of a `> [!TIP]` alert. */
+  "tip-heading"?: (HelixHeadlessMarkdown["tipHeading"]) | undefined;
+  /** The heading of a `> [!TIP]` alert. */
+  tipHeading?: (HelixHeadlessMarkdown["tipHeading"]) | undefined;
+  /** The heading of a `> [!WARNING]` alert. */
+  "warning-heading"?: (HelixHeadlessMarkdown["warningHeading"]) | undefined;
+  /** The heading of a `> [!WARNING]` alert. */
+  warningHeading?: (HelixHeadlessMarkdown["warningHeading"]) | undefined;
+};
+
+export type HelixHeadlessMarkdownVueEvents = {};
+
 /** `HelixHeadlessMegamenu` component event */
 export type HelixHeadlessMegamenuElementEvent<E = Event> = TypedEvent<
   HelixHeadlessMegamenu,
@@ -11557,6 +12342,12 @@ which import is missing. */
   "filter-label"?: (HelixHeadlessMenu["filterLabel"]) | undefined;
   /** The filter field's name and placeholder. */
   filterLabel?: (HelixHeadlessMenu["filterLabel"]) | undefined;
+  /** With `context`, the id of an area outside the menu whose context menu
+this is, for one menu that serves a region the page draws elsewhere, such
+as a table. A right-click, a long press, Shift+F10 or the menu key there
+opens it, as on the `trigger` slot's area. Names an element in the same
+tree, the way `Tooltip.for` does. */
+  for?: (HelixHeadlessMenu["for"]) | undefined;
   /** Accessible name for the surface.
 
 Empty by default, which names the surface by its trigger, so a menu opened
@@ -11598,6 +12389,10 @@ the forms it has, as Listbox's `results-label` does. */
   /** How a submenu opens. `drill` shows it in place of the page showing, with
 a way back. `flyout` opens it in a panel of its own beside its row. */
   submenus?: (HelixHeadlessMenu["submenus"]) | undefined;
+  /** With `context`, a selector for the things in the area a menu is about,
+such as `tr` for a table's rows. A request over one opens the menu with it
+as `contextTarget`, and a request over none of them is left to the page. */
+  targets?: (HelixHeadlessMenu["targets"]) | undefined;
   /** The text shown and announced when there are no rows and none are loading. */
   "empty-text"?: (HelixHeadlessMenu["emptyText"]) | undefined;
   /** The text shown and announced when there are no rows and none are loading. */
@@ -11636,6 +12431,11 @@ Aria's `Autocomplete` takes `filter`. See Listbox's `filterMatch`.
 Absent, a row is kept where its words hold the filter, in any case. A
 property only, there being no way to write a function in markup. */
   filterMatch?: (HelixHeadlessMenu["filterMatch"]) | undefined;
+  /** The thing the open context menu is about: the element of `targets` the
+reader asked over, the area where there are no `targets`, or what
+`showAt` was given. Set before `helix-before-open`, so a listener can
+change the rows for it, and kept until the menu next opens. */
+  contextTarget?: (HelixHeadlessMenu["contextTarget"]) | undefined;
   /** The values of the choice rows that are checked, anywhere in the menu, in
 document order.
 
@@ -14204,6 +15004,31 @@ beside its buttons and as each page arrives. `{first}`, `{last}` and
 beside its buttons and as each page arrives. `{first}`, `{last}` and
 `{count}` are replaced with the numbers, written in `locale`. */
   readingsLabel?: (HelixHeadlessScatterChart["readingsLabel"]) | undefined;
+  /** Draws a Listen button that plays the chart as sound: each series in
+turn, its readings from left to right and from the left ear to the
+right, the value as pitch over two octaves, a soft tick at each
+gridline, and one timbre a series. With it, each reading the arrow keys
+step to plays its tone beside what the readout says, and L plays the
+whole chart while it has focus. Escape stops it. Nothing plays without a
+press, and the sound is made only then. */
+  sonify?: (HelixHeadlessScatterChart["sonify"]) | undefined;
+  /** How long each series takes to play, in milliseconds or as `3s`. */
+  "sonify-duration"?: (HelixHeadlessScatterChart["sonifyDuration"] | `${number}`) | undefined;
+  /** How long each series takes to play, in milliseconds or as `3s`. */
+  sonifyDuration?: (HelixHeadlessScatterChart["sonifyDuration"]) | undefined;
+  /** The Listen button's words. */
+  "sonify-label"?: (HelixHeadlessScatterChart["sonifyLabel"]) | undefined;
+  /** The Listen button's words. */
+  sonifyLabel?: (HelixHeadlessScatterChart["sonifyLabel"]) | undefined;
+  /** The Listen button's words while the chart plays. */
+  "sonify-stop-label"?: (HelixHeadlessScatterChart["sonifyStopLabel"]) | undefined;
+  /** The Listen button's words while the chart plays. */
+  sonifyStopLabel?: (HelixHeadlessScatterChart["sonifyStopLabel"]) | undefined;
+  /** `visible` draws the chart's text summary under it, as one line.
+`hidden`, or absent, says the summary to a screen reader and draws it
+for no one else. Reflected, because the stylesheet draws it by the
+attribute, and a page that sets the property, as React does, writes none. */
+  summary?: (HelixHeadlessScatterChart["summary"]) | undefined;
   /** The readings as data, in the shape of a table, where the page has no
 table to point `for` at. `for` wins where both are set.
 
@@ -14512,6 +15337,30 @@ export type HelixHeadlessSelectVueEvents = {
   toggle: HelixHeadlessSelectToggleElementEvent;
 };
 
+export type HelixHeadlessShortcutOverlayVueProps = {
+  /** How long the key is held before the badges show, in milliseconds or as `0.6s`. */
+  delay?: (HelixHeadlessShortcutOverlay["delay"]) | undefined;
+  /** What the sheet says when the page has no shortcuts. */
+  "empty-label"?: (HelixHeadlessShortcutOverlay["emptyLabel"]) | undefined;
+  /** What the sheet says when the page has no shortcuts. */
+  emptyLabel?: (HelixHeadlessShortcutOverlay["emptyLabel"]) | undefined;
+  /** The key a reader holds: `mod` (Command on an Apple keyboard, Control
+elsewhere), `alt`, `ctrl`, or `shift`. */
+  hold?: (HelixHeadlessShortcutOverlay["hold"]) | undefined;
+  /** The sheet's name and heading. */
+  label?: (HelixHeadlessShortcutOverlay["label"]) | undefined;
+  /** The chord that opens the sheet, `?` by default, which a press in a text
+field never answers. Empty leaves the key to the page, which wants it
+where the page already answers `?` itself. */
+  "sheet-keys"?: (HelixHeadlessShortcutOverlay["sheetKeys"]) | undefined;
+  /** The chord that opens the sheet, `?` by default, which a press in a text
+field never answers. Empty leaves the key to the page, which wants it
+where the page already answers `?` itself. */
+  sheetKeys?: (HelixHeadlessShortcutOverlay["sheetKeys"]) | undefined;
+};
+
+export type HelixHeadlessShortcutOverlayVueEvents = {};
+
 export type HelixHeadlessSkeletonVueProps = {
   /** What is loading, read out as the placeholder's name, such as "Loading
 profile".
@@ -15075,6 +15924,31 @@ beside its buttons and as each page arrives. `{first}`, `{last}` and
 beside its buttons and as each page arrives. `{first}`, `{last}` and
 `{count}` are replaced with the numbers, written in `locale`. */
   readingsLabel?: (HelixHeadlessSpatialBarChart["readingsLabel"]) | undefined;
+  /** Draws a Listen button that plays the chart as sound: each series in
+turn, its readings from left to right and from the left ear to the
+right, the value as pitch over two octaves, a soft tick at each
+gridline, and one timbre a series. With it, each reading the arrow keys
+step to plays its tone beside what the readout says, and L plays the
+whole chart while it has focus. Escape stops it. Nothing plays without a
+press, and the sound is made only then. */
+  sonify?: (HelixHeadlessSpatialBarChart["sonify"]) | undefined;
+  /** How long each series takes to play, in milliseconds or as `3s`. */
+  "sonify-duration"?: (HelixHeadlessSpatialBarChart["sonifyDuration"] | `${number}`) | undefined;
+  /** How long each series takes to play, in milliseconds or as `3s`. */
+  sonifyDuration?: (HelixHeadlessSpatialBarChart["sonifyDuration"]) | undefined;
+  /** The Listen button's words. */
+  "sonify-label"?: (HelixHeadlessSpatialBarChart["sonifyLabel"]) | undefined;
+  /** The Listen button's words. */
+  sonifyLabel?: (HelixHeadlessSpatialBarChart["sonifyLabel"]) | undefined;
+  /** The Listen button's words while the chart plays. */
+  "sonify-stop-label"?: (HelixHeadlessSpatialBarChart["sonifyStopLabel"]) | undefined;
+  /** The Listen button's words while the chart plays. */
+  sonifyStopLabel?: (HelixHeadlessSpatialBarChart["sonifyStopLabel"]) | undefined;
+  /** `visible` draws the chart's text summary under it, as one line.
+`hidden`, or absent, says the summary to a screen reader and draws it
+for no one else. Reflected, because the stylesheet draws it by the
+attribute, and a page that sets the property, as React does, writes none. */
+  summary?: (HelixHeadlessSpatialBarChart["summary"]) | undefined;
   /** The readings as data, in the shape of a table, where the page has no
 table to point `for` at. `for` wins where both are set.
 
@@ -15218,6 +16092,31 @@ beside its buttons and as each page arrives. `{first}`, `{last}` and
 beside its buttons and as each page arrives. `{first}`, `{last}` and
 `{count}` are replaced with the numbers, written in `locale`. */
   readingsLabel?: (HelixHeadlessSpatialHeatmap["readingsLabel"]) | undefined;
+  /** Draws a Listen button that plays the chart as sound: each series in
+turn, its readings from left to right and from the left ear to the
+right, the value as pitch over two octaves, a soft tick at each
+gridline, and one timbre a series. With it, each reading the arrow keys
+step to plays its tone beside what the readout says, and L plays the
+whole chart while it has focus. Escape stops it. Nothing plays without a
+press, and the sound is made only then. */
+  sonify?: (HelixHeadlessSpatialHeatmap["sonify"]) | undefined;
+  /** How long each series takes to play, in milliseconds or as `3s`. */
+  "sonify-duration"?: (HelixHeadlessSpatialHeatmap["sonifyDuration"] | `${number}`) | undefined;
+  /** How long each series takes to play, in milliseconds or as `3s`. */
+  sonifyDuration?: (HelixHeadlessSpatialHeatmap["sonifyDuration"]) | undefined;
+  /** The Listen button's words. */
+  "sonify-label"?: (HelixHeadlessSpatialHeatmap["sonifyLabel"]) | undefined;
+  /** The Listen button's words. */
+  sonifyLabel?: (HelixHeadlessSpatialHeatmap["sonifyLabel"]) | undefined;
+  /** The Listen button's words while the chart plays. */
+  "sonify-stop-label"?: (HelixHeadlessSpatialHeatmap["sonifyStopLabel"]) | undefined;
+  /** The Listen button's words while the chart plays. */
+  sonifyStopLabel?: (HelixHeadlessSpatialHeatmap["sonifyStopLabel"]) | undefined;
+  /** `visible` draws the chart's text summary under it, as one line.
+`hidden`, or absent, says the summary to a screen reader and draws it
+for no one else. Reflected, because the stylesheet draws it by the
+attribute, and a page that sets the property, as React does, writes none. */
+  summary?: (HelixHeadlessSpatialHeatmap["summary"]) | undefined;
   /** The name the `overview` gives the busiest reading, `{busiestLabel}` in
 `overview-label`. */
   "busiest-label"?: (HelixHeadlessSpatialHeatmap["busiestLabel"]) | undefined;
@@ -15514,6 +16413,31 @@ beside its buttons and as each page arrives. `{first}`, `{last}` and
 beside its buttons and as each page arrives. `{first}`, `{last}` and
 `{count}` are replaced with the numbers, written in `locale`. */
   readingsLabel?: (HelixHeadlessSpatialRibbonChart["readingsLabel"]) | undefined;
+  /** Draws a Listen button that plays the chart as sound: each series in
+turn, its readings from left to right and from the left ear to the
+right, the value as pitch over two octaves, a soft tick at each
+gridline, and one timbre a series. With it, each reading the arrow keys
+step to plays its tone beside what the readout says, and L plays the
+whole chart while it has focus. Escape stops it. Nothing plays without a
+press, and the sound is made only then. */
+  sonify?: (HelixHeadlessSpatialRibbonChart["sonify"]) | undefined;
+  /** How long each series takes to play, in milliseconds or as `3s`. */
+  "sonify-duration"?: (HelixHeadlessSpatialRibbonChart["sonifyDuration"] | `${number}`) | undefined;
+  /** How long each series takes to play, in milliseconds or as `3s`. */
+  sonifyDuration?: (HelixHeadlessSpatialRibbonChart["sonifyDuration"]) | undefined;
+  /** The Listen button's words. */
+  "sonify-label"?: (HelixHeadlessSpatialRibbonChart["sonifyLabel"]) | undefined;
+  /** The Listen button's words. */
+  sonifyLabel?: (HelixHeadlessSpatialRibbonChart["sonifyLabel"]) | undefined;
+  /** The Listen button's words while the chart plays. */
+  "sonify-stop-label"?: (HelixHeadlessSpatialRibbonChart["sonifyStopLabel"]) | undefined;
+  /** The Listen button's words while the chart plays. */
+  sonifyStopLabel?: (HelixHeadlessSpatialRibbonChart["sonifyStopLabel"]) | undefined;
+  /** `visible` draws the chart's text summary under it, as one line.
+`hidden`, or absent, says the summary to a screen reader and draws it
+for no one else. Reflected, because the stylesheet draws it by the
+attribute, and a page that sets the property, as React does, writes none. */
+  summary?: (HelixHeadlessSpatialRibbonChart["summary"]) | undefined;
   /** The readings as data, in the shape of a table, where the page has no
 table to point `for` at. `for` wins where both are set.
 
@@ -15676,6 +16600,31 @@ beside its buttons and as each page arrives. `{first}`, `{last}` and
 beside its buttons and as each page arrives. `{first}`, `{last}` and
 `{count}` are replaced with the numbers, written in `locale`. */
   readingsLabel?: (HelixHeadlessSpatialScatterChart["readingsLabel"]) | undefined;
+  /** Draws a Listen button that plays the chart as sound: each series in
+turn, its readings from left to right and from the left ear to the
+right, the value as pitch over two octaves, a soft tick at each
+gridline, and one timbre a series. With it, each reading the arrow keys
+step to plays its tone beside what the readout says, and L plays the
+whole chart while it has focus. Escape stops it. Nothing plays without a
+press, and the sound is made only then. */
+  sonify?: (HelixHeadlessSpatialScatterChart["sonify"]) | undefined;
+  /** How long each series takes to play, in milliseconds or as `3s`. */
+  "sonify-duration"?: (HelixHeadlessSpatialScatterChart["sonifyDuration"] | `${number}`) | undefined;
+  /** How long each series takes to play, in milliseconds or as `3s`. */
+  sonifyDuration?: (HelixHeadlessSpatialScatterChart["sonifyDuration"]) | undefined;
+  /** The Listen button's words. */
+  "sonify-label"?: (HelixHeadlessSpatialScatterChart["sonifyLabel"]) | undefined;
+  /** The Listen button's words. */
+  sonifyLabel?: (HelixHeadlessSpatialScatterChart["sonifyLabel"]) | undefined;
+  /** The Listen button's words while the chart plays. */
+  "sonify-stop-label"?: (HelixHeadlessSpatialScatterChart["sonifyStopLabel"]) | undefined;
+  /** The Listen button's words while the chart plays. */
+  sonifyStopLabel?: (HelixHeadlessSpatialScatterChart["sonifyStopLabel"]) | undefined;
+  /** `visible` draws the chart's text summary under it, as one line.
+`hidden`, or absent, says the summary to a screen reader and draws it
+for no one else. Reflected, because the stylesheet draws it by the
+attribute, and a page that sets the property, as React does, writes none. */
+  summary?: (HelixHeadlessSpatialScatterChart["summary"]) | undefined;
   /** The readings as data, in the shape of a table, where the page has no
 table to point `for` at. `for` wins where both are set.
 
@@ -15842,6 +16791,31 @@ beside its buttons and as each page arrives. `{first}`, `{last}` and
 beside its buttons and as each page arrives. `{first}`, `{last}` and
 `{count}` are replaced with the numbers, written in `locale`. */
   readingsLabel?: (HelixHeadlessSpatialSurfaceChart["readingsLabel"]) | undefined;
+  /** Draws a Listen button that plays the chart as sound: each series in
+turn, its readings from left to right and from the left ear to the
+right, the value as pitch over two octaves, a soft tick at each
+gridline, and one timbre a series. With it, each reading the arrow keys
+step to plays its tone beside what the readout says, and L plays the
+whole chart while it has focus. Escape stops it. Nothing plays without a
+press, and the sound is made only then. */
+  sonify?: (HelixHeadlessSpatialSurfaceChart["sonify"]) | undefined;
+  /** How long each series takes to play, in milliseconds or as `3s`. */
+  "sonify-duration"?: (HelixHeadlessSpatialSurfaceChart["sonifyDuration"] | `${number}`) | undefined;
+  /** How long each series takes to play, in milliseconds or as `3s`. */
+  sonifyDuration?: (HelixHeadlessSpatialSurfaceChart["sonifyDuration"]) | undefined;
+  /** The Listen button's words. */
+  "sonify-label"?: (HelixHeadlessSpatialSurfaceChart["sonifyLabel"]) | undefined;
+  /** The Listen button's words. */
+  sonifyLabel?: (HelixHeadlessSpatialSurfaceChart["sonifyLabel"]) | undefined;
+  /** The Listen button's words while the chart plays. */
+  "sonify-stop-label"?: (HelixHeadlessSpatialSurfaceChart["sonifyStopLabel"]) | undefined;
+  /** The Listen button's words while the chart plays. */
+  sonifyStopLabel?: (HelixHeadlessSpatialSurfaceChart["sonifyStopLabel"]) | undefined;
+  /** `visible` draws the chart's text summary under it, as one line.
+`hidden`, or absent, says the summary to a screen reader and draws it
+for no one else. Reflected, because the stylesheet draws it by the
+attribute, and a page that sets the property, as React does, writes none. */
+  summary?: (HelixHeadlessSpatialSurfaceChart["summary"]) | undefined;
   /** The readings as data, in the shape of a table, where the page has no
 table to point `for` at. `for` wins where both are set.
 
@@ -16000,6 +16974,31 @@ beside its buttons and as each page arrives. `{first}`, `{last}` and
 beside its buttons and as each page arrives. `{first}`, `{last}` and
 `{count}` are replaced with the numbers, written in `locale`. */
   readingsLabel?: (HelixHeadlessSpatialTreemap["readingsLabel"]) | undefined;
+  /** Draws a Listen button that plays the chart as sound: each series in
+turn, its readings from left to right and from the left ear to the
+right, the value as pitch over two octaves, a soft tick at each
+gridline, and one timbre a series. With it, each reading the arrow keys
+step to plays its tone beside what the readout says, and L plays the
+whole chart while it has focus. Escape stops it. Nothing plays without a
+press, and the sound is made only then. */
+  sonify?: (HelixHeadlessSpatialTreemap["sonify"]) | undefined;
+  /** How long each series takes to play, in milliseconds or as `3s`. */
+  "sonify-duration"?: (HelixHeadlessSpatialTreemap["sonifyDuration"] | `${number}`) | undefined;
+  /** How long each series takes to play, in milliseconds or as `3s`. */
+  sonifyDuration?: (HelixHeadlessSpatialTreemap["sonifyDuration"]) | undefined;
+  /** The Listen button's words. */
+  "sonify-label"?: (HelixHeadlessSpatialTreemap["sonifyLabel"]) | undefined;
+  /** The Listen button's words. */
+  sonifyLabel?: (HelixHeadlessSpatialTreemap["sonifyLabel"]) | undefined;
+  /** The Listen button's words while the chart plays. */
+  "sonify-stop-label"?: (HelixHeadlessSpatialTreemap["sonifyStopLabel"]) | undefined;
+  /** The Listen button's words while the chart plays. */
+  sonifyStopLabel?: (HelixHeadlessSpatialTreemap["sonifyStopLabel"]) | undefined;
+  /** `visible` draws the chart's text summary under it, as one line.
+`hidden`, or absent, says the summary to a screen reader and draws it
+for no one else. Reflected, because the stylesheet draws it by the
+attribute, and a page that sets the property, as React does, writes none. */
+  summary?: (HelixHeadlessSpatialTreemap["summary"]) | undefined;
   /** The readings as data, in the shape of a table, where the page has no
 table to point `for` at. `for` wins where both are set.
 
@@ -17721,9 +18720,15 @@ export type HelixHeadlessTextareaElementEvent<E = Event> = TypedEvent<
 /** `helix-before-change` event type */
 export type HelixHeadlessTextareaHelixBeforeChangeElementEvent =
   HelixHeadlessTextareaElementEvent<HelixBeforeChangeEvent>;
+/** `helix-before-listen` event type */
+export type HelixHeadlessTextareaHelixBeforeListenElementEvent =
+  HelixHeadlessTextareaElementEvent<HelixBeforeListenEvent>;
 /** `helix-clear` event type */
 export type HelixHeadlessTextareaHelixClearElementEvent =
   HelixHeadlessTextareaElementEvent<HelixClearEvent>;
+/** `helix-listen` event type */
+export type HelixHeadlessTextareaHelixListenElementEvent =
+  HelixHeadlessTextareaElementEvent<HelixListenEvent>;
 
 export type HelixHeadlessTextareaVueProps = {
   /** What the browser can autofill in the field, as a standard `autocomplete`
@@ -17806,6 +18811,27 @@ Not a label: it goes when typing starts. */
   /** How the browser wraps the text, and whether the breaks are submitted with
 it. */
   wrap?: (HelixHeadlessTextarea["wrap"]) | undefined;
+  /** What a screen reader hears as listening starts. */
+  "listening-label"?: (HelixHeadlessTextarea["listeningLabel"]) | undefined;
+  /** What a screen reader hears as listening starts. */
+  listeningLabel?: (HelixHeadlessTextarea["listeningLabel"]) | undefined;
+  /** What a screen reader hears as listening stops. */
+  "stopped-listening-label"?: (HelixHeadlessTextarea["stoppedListeningLabel"]) | undefined;
+  /** What a screen reader hears as listening stops. */
+  stoppedListeningLabel?: (HelixHeadlessTextarea["stoppedListeningLabel"]) | undefined;
+  /** Draws a button that listens for dictation and types what it hears at
+the caret. Nothing listens until the button is pressed, and the
+microphone is let go as listening stops. An input of type `password`,
+`email` or `number` draws no button. */
+  voice?: (HelixHeadlessTextarea["voice"]) | undefined;
+  /** The dictation button's name while it is not listening. */
+  "voice-label"?: (HelixHeadlessTextarea["voiceLabel"]) | undefined;
+  /** The dictation button's name while it is not listening. */
+  voiceLabel?: (HelixHeadlessTextarea["voiceLabel"]) | undefined;
+  /** The dictation button's name while it listens. */
+  "voice-stop-label"?: (HelixHeadlessTextarea["voiceStopLabel"]) | undefined;
+  /** The dictation button's name while it listens. */
+  voiceStopLabel?: (HelixHeadlessTextarea["voiceStopLabel"]) | undefined;
   /** The value the control starts with. A form reset returns it to this value,
 and to the `value` attribute where this one is not written, as a native
 control resets to the `value` it declares. */
@@ -17914,6 +18940,9 @@ which is where an empty field's caret would be anyway. */
 nothing wrong. Return a message, or a list of them, to mark the field
 invalid, and `true`, `null`, or nothing to accept the value. */
   validate?: (HelixHeadlessTextarea["validate"]) | undefined;
+  /** The engine this field listens through, in place of the one
+`registerSpeechEngine` gave the page, or the browser's own. */
+  speechEngine?: (HelixHeadlessTextarea["speechEngine"]) | undefined;
 };
 
 export type HelixHeadlessTextareaVueEvents = {
@@ -17921,8 +18950,12 @@ export type HelixHeadlessTextareaVueEvents = {
   change: HelixHeadlessTextareaElementEvent;
   /** Fired as the text changes, and cancelable. */
   "helix-before-change": HelixHeadlessTextareaHelixBeforeChangeElementEvent;
+  /** The dictation button was pressed. Cancelable: cancel it to keep the field from listening. */
+  "helix-before-listen": HelixHeadlessTextareaHelixBeforeListenElementEvent;
   /** Fired after the clear button has emptied the field, after `input` and `change`. */
   "helix-clear": HelixHeadlessTextareaHelixClearElementEvent;
+  /** Dictation settled on a phrase and put it in the value, after the field's own `input`. */
+  "helix-listen": HelixHeadlessTextareaHelixListenElementEvent;
   /** Fired after the value changes. */
   input: HelixHeadlessTextareaElementEvent;
 };
@@ -18869,6 +19902,10 @@ keys joined by `+`, the last one the key, as `Announcement`'s `hotkey`
 reads them: `mod` is Command on Apple devices and Control elsewhere.
 Empty turns it off. */
   hotkey?: (HelixHeadlessToast["hotkey"]) | undefined;
+  /** What the hotkey does, as a list of the page's shortcuts says it. */
+  "hotkey-label"?: (HelixHeadlessToast["hotkeyLabel"]) | undefined;
+  /** What the hotkey does, as a list of the page's shortcuts says it. */
+  hotkeyLabel?: (HelixHeadlessToast["hotkeyLabel"]) | undefined;
   /** Accessible name for the region, with `{hotkey}` filled in. Translate it with
 the rest of your interface. */
   label?: (HelixHeadlessToast["label"]) | undefined;
@@ -18911,6 +19948,26 @@ the end of the line, or `start`, `top` or `bottom`. Unset is `end`. */
   /** The edge a touch or a pen swipes a message toward to dismiss it: `end`,
 the end of the line, or `start`, `top` or `bottom`. Unset is `end`. */
   swipeDirection?: (HelixHeadlessToast["swipeDirection"]) | undefined;
+  /** What a message `undoable()` made says after its own words, with `{keys}`
+for the chord that undoes it, spoken as words. */
+  "undo-hint"?: (HelixHeadlessToast["undoHint"]) | undefined;
+  /** What a message `undoable()` made says after its own words, with `{keys}`
+for the chord that undoes it, spoken as words. */
+  undoHint?: (HelixHeadlessToast["undoHint"]) | undefined;
+  /** The keys that undo the newest message `undoable()` made, as `hotkey`
+reads them. Empty turns them off, for an app whose own undo holds them,
+and leaves the Undo button. A key the app already handled, by calling
+`preventDefault()`, is left to it. */
+  "undo-keys"?: (HelixHeadlessToast["undoKeys"]) | undefined;
+  /** The keys that undo the newest message `undoable()` made, as `hotkey`
+reads them. Empty turns them off, for an app whose own undo holds them,
+and leaves the Undo button. A key the app already handled, by calling
+`preventDefault()`, is left to it. */
+  undoKeys?: (HelixHeadlessToast["undoKeys"]) | undefined;
+  /** The words on the Undo button of a message `undoable()` made. */
+  "undo-label"?: (HelixHeadlessToast["undoLabel"]) | undefined;
+  /** The words on the Undo button of a message `undoable()` made. */
+  undoLabel?: (HelixHeadlessToast["undoLabel"]) | undefined;
 };
 
 export type HelixHeadlessToastVueEvents = {
@@ -21236,7 +22293,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessCarouselVueProps,
     HelixHeadlessCarouselVueEvents
   >;
-  /** The composer is a separate element so you can replace it. If you need attachments, slash commands, or a model picker, replace the composer and keep the transcript.  By default, Enter sends and Shift+Enter starts a new line, the convention in messaging apps. Document editors mostly use the opposite, so 'submit-on' takes 'enter' or 'button'. Use 'button' for a long-form composer.  The composer clears only when no listener cancels the send, so the text is kept when you cancel a send that failed.  **In a form, the draft is the composer's value**, submitted under 'name', and an empty draft submits an empty entry, as a native textarea does. A form reset puts back the 'value' the markup declared, and a '<fieldset disabled>' turns the composer off. Sending is still 'helix-send', and it does not submit the form.  **'required', 'minlength' and 'maxlength' are checked by the browser**, as on a '<textarea>', and the message is the browser's. 'maxlength' stops the field taking more. A draft that fails them does not send, and the composer takes ':state(invalid)' and 'aria-invalid' once the reader has tried to send it, the form was submitted, or the reader edited the field and left it. Sending an empty required composer counts as trying. Tabbing past an empty composer marks nothing.  **'feedback' is a message of your own about the draft**, such as one your server sent back. While it is set, the composer is invalid at once, does not send or submit, shows the message under the field, and a screen reader hears it as it appears. Clear it to let the draft go.  **'typing' says whether the user is writing**, and 'helix-typing' is sent each time it changes: when they start, and when they send or stop for 'typing-timeout' milliseconds. Pass it on to show "is typing" to the other side. */
+  /** The composer is a separate element so you can replace it. If you need attachments, slash commands, or a model picker, replace the composer and keep the transcript.  By default, Enter sends and Shift+Enter starts a new line, the convention in messaging apps. Document editors mostly use the opposite, so 'submit-on' takes 'enter' or 'button'. Use 'button' for a long-form composer.  The composer clears only when no listener cancels the send, so the text is kept when you cancel a send that failed.  **Set 'voice' for dictation.** A microphone button before send listens through the page's speech engine, the browser's own unless 'registerSpeechEngine' gave the page another, and types what it hears at the caret as the reader speaks, each guess replaced by the next. Press it again, press Escape, or send, and it stops. Where the browser has no engine, as in Firefox, no button is drawn.  **In a form, the draft is the composer's value**, submitted under 'name', and an empty draft submits an empty entry, as a native textarea does. A form reset puts back the 'value' the markup declared, and a '<fieldset disabled>' turns the composer off. Sending is still 'helix-send', and it does not submit the form.  **'required', 'minlength' and 'maxlength' are checked by the browser**, as on a '<textarea>', and the message is the browser's. 'maxlength' stops the field taking more. A draft that fails them does not send, and the composer takes ':state(invalid)' and 'aria-invalid' once the reader has tried to send it, the form was submitted, or the reader edited the field and left it. Sending an empty required composer counts as trying. Tabbing past an empty composer marks nothing.  **'feedback' is a message of your own about the draft**, such as one your server sent back. While it is set, the composer is invalid at once, does not send or submit, shows the message under the field, and a screen reader hears it as it appears. Clear it to let the draft go.  **'typing' says whether the user is writing**, and 'helix-typing' is sent each time it changes: when they start, and when they send or stop for 'typing-timeout' milliseconds. Pass it on to show "is typing" to the other side. */
   "helix-headless-chat-composer": DefineCustomElement<
     HelixHeadlessChatComposer,
     HelixHeadlessChatComposerVueProps,
@@ -21272,6 +22329,18 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessCodeBlockVueProps,
     HelixHeadlessCodeBlockVueEvents
   >;
+  /** A pane for working on a file: a header with its name, its language and the page's own actions, the code, the problems in it, and a status line that says where the caret is. On its own the code is a '<textarea>' in the code face. Connect an engine and it draws the code instead: 'connectEditor' from '@fusion.dev/helix-editor' connects CodeMirror, with highlighting in your theme's syntax colors, line numbers, folding, bracket matching and history. The value, the form, validation and the events stay the editor's, so a page reads and writes it the same either way.  For a few lines in a form, such as a setting in JSON, use 'Code Input', which needs no engine.  - 'language' picks the highlighting, such as 'ts', 'css', 'html', 'md',   'json', 'python', 'rust' or 'sh', and the header names it. - 'diagnostics' marks problems, from a linter or a language server: each is   underlined in the text, its line number is drawn in its tone, and it is   listed under the code, where pressing it moves the caret to it. - The find bar finds, with the case, whole words or a regular expression,   and replaces once its first button shows the replace field, in the   engine or in the plain field alike. - Every change goes through 'requestValue', so a listener refusing   'helix-before-change' refuses the keystroke, in the engine too.  **Keyboard.** Command+F, or Control+F elsewhere, opens the find bar, Enter and Shift+Enter move between matches, and Escape closes it. In an engine, Tab indents and Escape then Tab leaves the editor, so the editor is never a trap for a reader without a pointer. */
+  "helix-headless-code-editor": DefineCustomElement<
+    HelixHeadlessCodeEditor,
+    HelixHeadlessCodeEditorVueProps,
+    HelixHeadlessCodeEditorVueEvents
+  >;
+  /** A 'Textarea' for code: the same field in a form, with the same label, hint, validation, 'voice' and selection methods, drawing its text in the highlighter's colors. The reader types in a real '<textarea>', so the caret, selection, undo, spellcheck being off and autofill being off are the platform's, and the field works before any script loads.  - 'language' picks the grammar, such as 'json', 'css', 'ts', 'html' or 'sh'. - The field grows with its text from 'rows' lines to 'max-rows', and   scrolls past them. - Lines keep their length and the field scrolls sideways, unless 'wrap' is   'soft'.  **The colors are the page's choice.** Helix ships no grammar, so a page that wants color registers a highlighter once, the one Code Block uses: 'import '@fusion.dev/helix-sandbox/code-block'' registers Helix's own, or 'registerHighlighter' takes Shiki or Prism. Without one the code is drawn plain, and 'highlight' sets one for a single field.  For a whole file, with line numbers, folding, search and problems listed by line, use 'Code Editor'. Code Input is for a few dozen lines in a form: a setting in JSON, a style rule, a query, a template.  **Keyboard.** Tab indents the line, or every line the selection touches, and Shift+Tab takes the indent away. Enter starts the next line at the same indent. Escape then Tab leaves the field, so it is never a trap for a reader without a pointer. */
+  "helix-headless-code-input": DefineCustomElement<
+    HelixHeadlessCodeInput,
+    HelixHeadlessCodeInputVueProps,
+    HelixHeadlessCodeInputVueEvents
+  >;
   /** Renders a real '<code>' element, which marks the text as code for translation tools and document search. A styled span carries no such meaning, and a screen reader announces nothing about it.  **Set 'translate="no"' on the element to keep a page translator off the code.** A translator that rewrites prose would also rewrite an identifier. The slotted text takes its translation mode from the element, its parent in the page, and the element writes nothing onto itself, so the attribute is yours to set. The '<code>' inside carries 'translate="no"' for anything the element draws itself.  'Code' is inline only and never scrolls. For a block of code with its own box, its own overflow, and copying, use 'CodeBlock', which is a separate family. */
   "helix-headless-code": DefineCustomElement<
     HelixHeadlessCode,
@@ -21296,7 +22365,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessComboboxVueProps,
     HelixHeadlessComboboxVueEvents
   >;
-  /** The list is a 'Listbox', which handles filtering, the empty state, the match highlight, 'aria-activedescendant', scrolling an option into view, and moving between options with the keyboard. The palette adds a dialog and a hotkey that opens it.  The palette keeps no value. It is not a form control and submits nothing. Choosing an option dispatches 'helix-select' once. To remember the last command, store it yourself. An option with 'href' is a link to a page, which the browser follows once the palette has closed.  The hotkey listener is on the document, so the hotkey works from anywhere on the page, including inside another control's text field, whether or not the palette is open. 'mod' means Command on a Mac and Control elsewhere, so you write one binding.  With 'inline', the palette is drawn in the page with no dialog, as a search over a list that is always shown.  **Pages.** A command can open a page of commands of its own, as a palette offers "Change theme" and then the themes. Give the option 'opens' with a name, and slot the page's commands as 'page:' and that name:  '''html <helix-command>   <helix-option value="theme" opens="theme">Change theme</helix-option>   <helix-option value="dark" slot="page:theme">Dark</helix-option>   <helix-option value="light" slot="page:theme">Light</helix-option> </helix-command> '''  Choosing the opener says 'helix-select' with its value, and canceling it keeps the page that is shown. The list then shows the page, named by the opener's words, and a screen reader hears those words. Backspace in an empty filter goes back, and a screen reader hears the name of the page it goes back to. 'page' says which page is shown.  The filter is cleared when the palette closes, so each opening starts from the full list. Combobox and Select do the same. As typing narrows the list, a screen reader hears how many commands are left, such as "3 commands".  **Keyboard.** Focus goes to the filter field as the palette opens, with no command highlighted, as in React Aria's Autocomplete, so Enter runs nothing until you type or press Down. Typing highlights the first command left, and the highlight moves through the commands while you type.  | Key | What it does | |---|---| | 'hotkey', Command or Control with K by default | Opens the palette from anywhere on the page, or closes it. With 'inline', puts focus in its filter field. | | Down, Up | Moves the highlight to the next or the previous command, round from the last to the first. | | Page Down, Page Up | Moves the highlight by as many commands as the list shows at once. | | Home, End | Move the caret in the filter field. With 'home-end="list"', move the highlight to the first or the last command. | | Left, Right | Move the caret in the filter field. | | Enter | Runs the highlighted command, or follows it where it is a link, and closes the palette. On a command with 'opens', shows its page. | | Command or Control with Enter | Takes the highlighted command's 'alternate' destination, where it has one. | | Backspace | In an empty filter on a page, goes back to the page before. | | Escape | Clears the filter. With the filter empty, closes the palette and puts focus back where it was. | | Tab | Stays in the palette, which is modal. With 'inline', moves on through the page. |  **ARIA.** The palette is a modal 'dialog' named by 'label', or with 'inline' no dialog at all. Inside it the filter field is a text field with 'aria-autocomplete="list"', 'aria-controls' on the list, and 'aria-activedescendant' on the highlighted command, as the field of React Aria's 'Autocomplete' is. The commands are a 'listbox' of 'option's. How many commands typing left, the empty text and the loading text are said in a polite live region.  **The commands are an import of their own.** A command is an option, the Option family's, which the palette does not register, so a page that writes one imports it beside the palette:  '''js import '@fusion.dev/helix/command' import '@fusion.dev/helix/option' '''  In development, a palette holding an option nobody registered says so once the page has loaded, with the line to add. */
+  /** The list is a 'Listbox', which handles filtering, the empty state, the match highlight, 'aria-activedescendant', scrolling an option into view, and moving between options with the keyboard. The palette adds a dialog and a hotkey that opens it.  The palette keeps no value. It is not a form control and submits nothing. Choosing an option dispatches 'helix-select' once. To remember the last command, store it yourself. An option with 'href' is a link to a page, which the browser follows once the palette has closed.  The hotkey listener is on the document, so the hotkey works from anywhere on the page, including inside another control's text field, whether or not the palette is open. 'mod' means Command on a Mac and Control elsewhere, so you write one binding.  With 'inline', the palette is drawn in the page with no dialog, as a search over a list that is always shown.  **Pages.** A command can open a page of commands of its own, as a palette offers "Change theme" and then the themes. Give the option 'opens' with a name, and slot the page's commands as 'page:' and that name:  '''html <helix-command>   <helix-option value="theme" opens="theme">Change theme</helix-option>   <helix-option value="dark" slot="page:theme">Dark</helix-option>   <helix-option value="light" slot="page:theme">Light</helix-option> </helix-command> '''  Choosing the opener says 'helix-select' with its value, and canceling it keeps the page that is shown. The list then shows the page, named by the opener's words, and a screen reader hears those words. Backspace in an empty filter goes back, and a screen reader hears the name of the page it goes back to. 'page' says which page is shown.  The filter is cleared when the palette closes, so each opening starts from the full list. Combobox and Select do the same. As typing narrows the list, a screen reader hears how many commands are left, such as "3 commands".  **Keyboard.** Focus goes to the filter field as the palette opens, with no command highlighted, as in React Aria's Autocomplete, so Enter runs nothing until you type or press Down. Typing highlights the first command left, and the highlight moves through the commands while you type.  | Key | What it does | |---|---| | 'hotkey', Command or Control with K by default | Opens the palette from anywhere on the page, or closes it. With 'inline', puts focus in its filter field. | | Down, Up | Moves the highlight to the next or the previous command, round from the last to the first. | | Page Down, Page Up | Moves the highlight by as many commands as the list shows at once. | | Home, End | Move the caret in the filter field. With 'home-end="list"', move the highlight to the first or the last command. | | Left, Right | Move the caret in the filter field. | | Enter | Runs the highlighted command, or follows it where it is a link, and closes the palette. On a command with 'opens', shows its page. | | Command or Control with Enter | Takes the highlighted command's 'alternate' destination, where it has one. | | Backspace | In an empty filter on a page, goes back to the page before. | | Escape | Clears the filter. With the filter empty, closes the palette and puts focus back where it was. | | Tab | Stays in the palette, which is modal. With 'inline', moves on through the page. |  **ARIA.** The palette is a modal 'dialog' named by 'label', or with 'inline' no dialog at all. Inside it the filter field is a text field with 'aria-autocomplete="list"', 'aria-controls' on the list, and 'aria-activedescendant' on the highlighted command, as the field of React Aria's 'Autocomplete' is. The commands are a 'listbox' of 'option's. How many commands typing left, the empty text and the loading text are said in a polite live region.  **The palette registers Option**, since it draws the controls on screen as options itself with 'controls', so a page that writes commands imports the palette alone. A tier of your own registers its own option, and in development a palette holding one nobody registered says so.  **Set 'controls' to find anything on screen.** Every labeled Helix control puts itself on the page's list while it is connected, and the palette lists the ones a reader can reach under its own commands once they type, with each one's shortcut. Choosing one closes the palette and presses it, or moves focus into a field. 'unlisted' on a control, or on a region around it, leaves it out. */
   "helix-headless-command": DefineCustomElement<
     HelixHeadlessCommand,
     HelixHeadlessCommandVueProps,
@@ -21602,6 +22671,12 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessMapTerrainVueProps,
     HelixHeadlessMapTerrainVueEvents
   >;
+  /** Set 'text' to the Markdown, or to everything a reply has said so far, with 'streaming' while more is coming. Each time 'text' grows, only what changed is drawn: a block that has ended is never drawn again, a word arriving is added to the line it ends, and a code block, a list, or a table fills in where it stands. Text you can already read does not move.  - A fence becomes a 'Code Block', with its language as its 'label' and its   'language', so a highlighter given to 'registerHighlighter' colors it as it   grows. - An alert, '> [!NOTE]' through '> [!CAUTION]', becomes a 'Callout' in the   tone 'rehypeHelix' gives it. - A table's columns are sized once from its header row, so the rows that   follow never widen or narrow them. - A list item's first paragraph is drawn the same whether the list is tight   or loose, so a blank line arriving between items moves nothing.  While 'streaming', the end of the text is read as still arriving. A '**' whose closing pair has not come yet draws bold at once, a code span draws as code, and a link draws as a link before its address arrives. A marker that the next character decides, such as a '#' at the start of a line, waits for that character.  **The document is drawn in the element's own children**, so the page's 'data-prose' styles reach it, a reader can select and find its text, and a server can send it. Put 'data-prose' on the element or on a container. On a server, render 'markdownToHtml(text)' inside the element: where what it was sent is exactly what it would draw, it keeps it and draws nothing again.  What it reads is CommonMark with GitHub's tables, task lists, strikethrough, autolinks, and alerts. A line of '===' or '---' under a paragraph is not a heading, four spaces of indent are not a code block, and reference links are not read, because each of those changes text above it after it was drawn. HTML is drawn as text. An image is drawn as a link to the picture, which loads nothing until a reader follows it. A link's address is kept only where it is relative or on 'http', 'https', 'mailto', or 'tel'. */
+  "helix-headless-markdown": DefineCustomElement<
+    HelixHeadlessMarkdown,
+    HelixHeadlessMarkdownVueProps,
+    HelixHeadlessMarkdownVueEvents
+  >;
   /** A disclosure: a button that shows and hides a region of your own links. It does not use 'role="menu"' or 'menuitem', which are for application commands. Those roles take over the arrow keys, announce "menu" to someone looking for navigation, and put every link inside a role that is not a link. As a disclosure, middle clicks, modified clicks, and the status bar keep working. Use 'Menu' for a row of commands.  It renders no links. A router renders its own anchors and cannot render them inside this shadow root, so the panel is a slot for the lists and headings you write.  It opens on hover by default, and a press always opens it too. 'open-on' sets which. Hover is the default because in a navigation bar people expect to move along the row and see each section. A pointer resting on the trigger opens the panel after 'open-delay', and leaving closes it after 'close-delay'. Moving from one open panel's trigger to another's opens the next at once, as Radix's 'skipDelayDuration' does.  When one panel opens in place of another, each says which way the reader moved, as Radix's 'data-motion' does. Moving toward the end of the bar, the one opening is ':state(from-end)' and the one closing is ':state(to-start)'; moving back, they are ':state(from-start)' and ':state(to-end)'. A stylesheet slides them on that. Start and end follow the reading direction, so on a right-to-left page the end is on the left. A panel that opens or closes on its own carries none of the four. A press on another megamenu's trigger hands over the same way as hovering it.  While a panel is open its surface carries its own size, as '--megamenu-surface-inline-size' and '--megamenu-surface-block-size', and a panel that took over from another also carries that one's size, as '--megamenu-from-inline-size' and '--megamenu-from-block-size'. Radix's navigation menu publishes the same pair from its shared viewport, so a stylesheet can grow or shrink one panel into the next.  While a link in the panel carries 'aria-current="page"', the host has ':state(current)', so the trigger of the section holding the page you are on can say so, as Radix's navigation menu marks its active link.  The panel's default slot is the 'columns' part and draws no box, so a sheet can give the columns one of their own. While a panel is open, an 'indicator' slot is rendered beside its trigger, as Radix's indicator marks the open one: slot a mark of your own, such as a bar or an arrow pointing at the panel, and it shows only while the panel is open. The styled tier rests it on the trigger's bottom edge.  Left and Right Arrow move between the triggers of the megamenus beside this one, and Home and End go to the first and the last, as Radix's navigation menu does. In a 'Navigation', which holds them in a slot, the arrows are the navigation's, and move between its destinations under its 'arrows'. Down Arrow on the trigger of an open panel moves focus to the panel's first link, Escape closes the panel and returns focus to its trigger, and Tab moves through the panel's links and closes it on the way out. The trigger says 'aria-expanded', and the panel is a group named by 'label'.  A Helix trigger, such as 'helix-button', is told whether the panel is open inside its own shadow root. On a plain element, such as a '<button>', the megamenu writes 'aria-expanded', from a frame after its own first render, so a server's markup is never changed while a framework hydrates it. It never writes it where you wrote 'aria-expanded' yourself. */
   "helix-headless-megamenu": DefineCustomElement<
     HelixHeadlessMegamenu,
@@ -21614,7 +22689,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessMenuItemVueProps,
     HelixHeadlessMenuItemVueEvents
   >;
-  /** The trigger is slotted and stays your own element, as with the tooltip. The menu renders its surface in the top layer with the popover API, so an ancestor with 'overflow: hidden' does not clip it and it needs no 'z-index'.  Slot a 'helix-button' or 'helix-icon-button' as the trigger, and the menu tells it that it opens a menu and whether the menu is open, inside its own shadow root. On a plain element, such as a '<button>', the menu writes 'aria-haspopup="menu"' and 'aria-expanded', from a frame after its own first render, so a server's markup is never changed while a framework hydrates it. It never writes 'aria-expanded' where you wrote it yourself.  Submenus drill down by default. A submenu replaces the panel's content, and a back row returns to the previous page. One panel stays inside a narrow window, and works on touch screens, which have no hover. Focus follows a mouse resting on a row in either mode, and a drilled page is a 'menu' named by the row that opened it.  **'submenus="flyout"' opens each submenu in a panel of its own beside its row**, as React Aria's 'SubmenuTrigger' and Radix's 'Sub' do. Resting the pointer on the row opens it, and a pointer crossing toward the open panel over the rows between keeps it open, as Radix's grace area does. Right Arrow opens a row's submenu on its first row, and Left Arrow or Escape closes it and returns focus to the row, the two arrows swapping on a right-to-left page. The row says 'aria-expanded', and the panel is a 'menu' named by the row.  The root holds which page is open, because only one page shows at a time. It sets this on items as a property, never as an attribute. An attribute written onto your element after it upgrades causes a hydration mismatch.  Group rows under a heading with 'Menu.Section', which is a 'group' named by its heading. Between runs of rows, a '<helix-divider>' is a separator a screen reader announces.  Keys: Enter, Space or Down Arrow on the trigger opens the menu on its first row, and Up Arrow on its last. In the menu, Up and Down Arrow move between rows, Home and End go to the first and the last, a typed letter moves to the next row whose name starts with it, Enter and Space choose (Space on a choice row changes it and leaves the menu open), Right Arrow opens a row's submenu and Left Arrow goes back, the two swapping on a right-to-left page. Left Arrow on the top page does nothing. Escape closes the menu and returns focus to the trigger. Tab closes it and moves on.  While it is open, the surface carries the trigger's width as '--floating-anchor-inline-size' and the room left below it as '--floating-available-block-size', as Radix's dropdown menu publishes its trigger's width, for a menu as wide as its trigger: 'helix-menu::part(surface) { min-inline-size: var(--floating-anchor-inline-size) }'.  **The choices in one place.** 'checkedValues' holds the values of the rows that are checked, anywhere in the menu, and setting it checks exactly those rows, as React Aria's 'selectedKeys' does. 'change' is sent on the menu when a reader's choice changes it.  With 'context', the trigger is an area and the menu is its context menu: a right-click, a long press, Shift+F10 or the menu key over the area opens it at the pointer, or at the area's corner from the keyboard, as Radix's context menu does. A press on the area does not open it, and closing it returns focus to where it was. A touch or a pen held still on the area opens it too, on every browser, since iOS sends no 'contextmenu' for one.  **A trigger with its own action.** With 'open-on="long-press"', a press on the trigger is the trigger's own, and a press held for half a second opens the menu, as React Aria's 'trigger="longPress"' does. Alt+Down or Alt+Up opens it from the keyboard, and the trigger is described by 'long-press-label', which says so.  **A filter field** is a separate import, '@fusion.dev/helix/menu/filter', so a menu that never filters carries none of its code:  '''js import '@fusion.dev/helix/menu' import '@fusion.dev/helix/menu/filter' '''  With it imported and 'filterable' set, the menu opens with focus in a field above its rows, and typing narrows the rows of the page the keys move in, as React Aria's 'Autocomplete' around a 'Menu' does. A row is kept where its words hold the filter, in any case, or where 'filterMatch' says so. Each page starts unfiltered, and the filter is cleared as the menu closes. Where typing keeps no row, the menu shows 'no-results-text'. Focus stays in the field: Up and Down Arrow move the highlight through the rows that are left, Enter chooses the highlighted row, Right Arrow opens its submenu, Left Arrow on a submenu goes back, and Escape clears the filter and then closes the menu. A screen reader hears how many rows the filter keeps ('results-label'). Home, End and the other keys move the caret and type. The field names the highlighted row with 'aria-activedescendant', and the rows are a 'menu' after the field. Cancel 'helix-filter' to keep every row showing and narrow the rows yourself, such as by replacing them with rows from a server. */
+  /** The trigger is slotted and stays your own element, as with the tooltip. The menu renders its surface in the top layer with the popover API, so an ancestor with 'overflow: hidden' does not clip it and it needs no 'z-index'.  Slot a 'helix-button' or 'helix-icon-button' as the trigger, and the menu tells it that it opens a menu and whether the menu is open, inside its own shadow root. On a plain element, such as a '<button>', the menu writes 'aria-haspopup="menu"' and 'aria-expanded', from a frame after its own first render, so a server's markup is never changed while a framework hydrates it. It never writes 'aria-expanded' where you wrote it yourself.  Submenus drill down by default. A submenu replaces the panel's content, and a back row returns to the previous page. One panel stays inside a narrow window, and works on touch screens, which have no hover. Focus follows a mouse resting on a row in either mode, and a drilled page is a 'menu' named by the row that opened it.  **'submenus="flyout"' opens each submenu in a panel of its own beside its row**, as React Aria's 'SubmenuTrigger' and Radix's 'Sub' do. Resting the pointer on the row opens it, and a pointer crossing toward the open panel over the rows between keeps it open, as Radix's grace area does. Right Arrow opens a row's submenu on its first row, and Left Arrow or Escape closes it and returns focus to the row, the two arrows swapping on a right-to-left page. The row says 'aria-expanded', and the panel is a 'menu' named by the row.  The root holds which page is open, because only one page shows at a time. It sets this on items as a property, never as an attribute. An attribute written onto your element after it upgrades causes a hydration mismatch.  Group rows under a heading with 'Menu.Section', which is a 'group' named by its heading. Between runs of rows, a '<helix-divider>' is a separator a screen reader announces.  Keys: Enter, Space or Down Arrow on the trigger opens the menu on its first row, and Up Arrow on its last. In the menu, Up and Down Arrow move between rows, Home and End go to the first and the last, a typed letter moves to the next row whose name starts with it, Enter and Space choose (Space on a choice row changes it and leaves the menu open), Right Arrow opens a row's submenu and Left Arrow goes back, the two swapping on a right-to-left page. Left Arrow on the top page does nothing. Escape closes the menu and returns focus to the trigger. Tab closes it and moves on.  While it is open, the surface carries the trigger's width as '--floating-anchor-inline-size' and the room left below it as '--floating-available-block-size', as Radix's dropdown menu publishes its trigger's width, for a menu as wide as its trigger: 'helix-menu::part(surface) { min-inline-size: var(--floating-anchor-inline-size) }'.  **The choices in one place.** 'checkedValues' holds the values of the rows that are checked, anywhere in the menu, and setting it checks exactly those rows, as React Aria's 'selectedKeys' does. 'change' is sent on the menu when a reader's choice changes it.  With 'context', the trigger is an area and the menu is its context menu: a right-click, a long press, Shift+F10 or the menu key over the area opens it at the pointer, or at the area's corner from the keyboard, as Radix's context menu does. A press on the area does not open it, and closing it returns focus to where it was. A touch or a pen held still on the area opens it too, on every browser, since iOS sends no 'contextmenu' for one.  **One menu for many things.** 'for' names an area outside the menu, such as a table, and 'targets' says which things in it the menu is about, such as 'tr'. A request over one of them opens the menu with it as 'contextTarget', which a 'helix-before-open' listener reads to change the rows for it; a request over none of them is left to the page. 'showAt()' opens the menu at a point, for an area that finds what was pressed itself, such as a canvas. Shift with a right-click leaves the browser's own menu to the reader.  **A trigger with its own action.** With 'open-on="long-press"', a press on the trigger is the trigger's own, and a press held for half a second opens the menu, as React Aria's 'trigger="longPress"' does. Alt+Down or Alt+Up opens it from the keyboard, and the trigger is described by 'long-press-label', which says so.  **A filter field** is a separate import, '@fusion.dev/helix/menu/filter', so a menu that never filters carries none of its code:  '''js import '@fusion.dev/helix/menu' import '@fusion.dev/helix/menu/filter' '''  With it imported and 'filterable' set, the menu opens with focus in a field above its rows, and typing narrows the rows of the page the keys move in, as React Aria's 'Autocomplete' around a 'Menu' does. A row is kept where its words hold the filter, in any case, or where 'filterMatch' says so. Each page starts unfiltered, and the filter is cleared as the menu closes. Where typing keeps no row, the menu shows 'no-results-text'. Focus stays in the field: Up and Down Arrow move the highlight through the rows that are left, Enter chooses the highlighted row, Right Arrow opens its submenu, Left Arrow on a submenu goes back, and Escape clears the filter and then closes the menu. A screen reader hears how many rows the filter keeps ('results-label'). Home, End and the other keys move the caret and type. The field names the highlighted row with 'aria-activedescendant', and the rows are a 'menu' after the field. Cancel 'helix-filter' to keep every row showing and narrow the rows yourself, such as by replacing them with rows from a server. */
   "helix-headless-menu": DefineCustomElement<
     HelixHeadlessMenu,
     HelixHeadlessMenuVueProps,
@@ -21782,6 +22857,12 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessSelectVueProps,
     HelixHeadlessSelectVueEvents
   >;
+  /** Place one in the app. Hold the platform's modifier, Command on an Apple keyboard and Control elsewhere, for 'delay' and a badge appears beside each control on screen that has a shortcut, with its keys and its name. Release the key and the badges go. Pressing any other key during the hold cancels it, so a reader pressing ⌘K never sees them.  What a badge says comes from what the controls already carry: the 'aria-keyshortcuts' a Kbd's 'for' writes onto its control, a Menu Item's 'shortcut', and the hotkeys Command and Toast register. A control's name is its label. A shortcut with no control on screen, such as a palette's ⌘K, is listed in the sheet.  Press '?' outside a text field, or call 'showSheet()', to open the sheet: a dialog listing every shortcut on the page by name, which is how a keyboard or screen reader user gets the same list. Set 'sheet-keys' to another chord, or to nothing to leave '?' to the page.  Many apps, GitHub and Gmail among them, already give '?' to their own help, so a page that answers '?' itself opens both on one press. Such a page sets 'sheet-keys' to another chord, or to nothing and calls 'showSheet()' from its own handler.  The badges are a picture of what the controls already expose, so they are hidden from assistive technology. */
+  "helix-headless-shortcut-overlay": DefineCustomElement<
+    HelixHeadlessShortcutOverlay,
+    HelixHeadlessShortcutOverlayVueProps,
+    HelixHeadlessShortcutOverlayVueEvents
+  >;
   /** A skeleton is hidden from screen readers unless it has a 'label'. An empty placeholder has nothing to say, and a page of them would be a page of unnamed shapes. Tell a screen reader that a region is loading on the region itself: set 'aria-busy="true"' on it while it loads, and put a 'Loader' or a status message in it. Set 'label' on one skeleton to have it read out by name, such as "Loading profile", when a reader reaches it. The role and the name are set through 'ElementInternals', which writes no attributes.  There is no 'shape' property. Whether a placeholder is a line, a block, or a circle is presentation, which belongs to the styled tier.  **Put the real content inside and set 'loading', and the skeleton takes its size.** While 'loading' is set the content is inert, the host is 'aria-busy', and the styled tier hides the content and paints the placeholder over its box, so nothing moves when the content arrives. Take 'loading' off and the content is shown as it is. An empty skeleton is a placeholder of its own size, as before. */
   "helix-headless-skeleton": DefineCustomElement<
     HelixHeadlessSkeleton,
@@ -21998,7 +23079,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessToastItemVueProps,
     HelixHeadlessToastItemVueEvents
   >;
-  /** The region and its items are one family because a live region must be in the document before a message is added to it. Assistive technology often does not announce a region that arrives already holding its message. 'Radio.Group' is part of its family for the same reason.  **The region is a landmark named by 'label', and it says each message once as it arrives**: a 'danger' message assertively, and every other one politely. It says the word for the tone, the heading, the description and the text, and not the actions, through two live regions of its own, the 'live' parts, which it empties again a moment later. The stack itself is not a live region, so a message is never said twice, and changing the words of a message already showing says nothing. Each message is an 'alertdialog' named by its words, so a reader who moves into the stack hears which message they are on.  **'hotkey' takes focus to the stack and back**, F8 unless you set it, and 'label' says which key: '{hotkey}' in it is filled in, so the default name is "Notifications (F8)". Pressed while focus is in the stack, it gives focus back to where it was.  **The region never creates or removes items.** You render items and remove them. An item requests closing with a cancelable 'helix-dismiss' event. A dismissed item hides itself and stays in the DOM, so your framework's state and the DOM stay in sync. It hides on its own unless you set 'open', which makes the state yours.  **'add()' shows a message from script**, for a page with no framework state to render them from: it appends a message of the region's own tier and removes it once it has been dismissed and has finished leaving. Messages you render yourself stay yours, and the region never removes them. A touch or a pen swipes a message away toward the end of the line, or toward the edge 'swipe-direction' names.  **Every message's timer waits while a pointer or focus is in the stack**, as React Aria's and Radix's regions do, so a reader moving from one message to the next does not lose the one behind them.  **The stack is in the top layer.** The 'region' part is a 'popover="manual"' shown while a message is showing, and shown again above a modal dialog that opened after it. Position the 'region' part, which is the box in the top layer. While a modal 'Dialog', 'Drawer' or 'Lightbox' is open, the browser makes everything outside it inert, the stack included, so a message stays visible and its actions cannot be pressed. Where the browser has 'ariaNotify', a message that arrives then is announced through it. For a message with an action, render a second region inside the dialog.  When a message with focus inside it is dismissed, focus moves to the next message, then the one before it, then back to where it was before it entered the stack.  **'max-visible' limits how many messages show at once**, as Zag's 'max' does. The messages after that many, in document order, wait: each is hidden, its timer has not started, and the region says it once it shows, when a message before it goes. A waiting message has ':state(waiting)'.  **Keyboard.**  | Key | What it does | |---|---| | F8, or your 'hotkey' | Moves focus to the first control in the stack, and back to where it was when pressed in the stack. | | Tab, Shift+Tab | Moves between the controls of the messages. | | Escape | Dismisses the message holding focus. Focus moves to the next message, then the one before it, then back to where it was. | */
+  /** The region and its items are one family because a live region must be in the document before a message is added to it. Assistive technology often does not announce a region that arrives already holding its message. 'Radio.Group' is part of its family for the same reason.  **The region is a landmark named by 'label', and it says each message once as it arrives**: a 'danger' message assertively, and every other one politely. It says the word for the tone, the heading, the description and the text, and not the actions, through two live regions of its own, the 'live' parts, which it empties again a moment later. The stack itself is not a live region, so a message is never said twice, and changing the words of a message already showing says nothing. Each message is an 'alertdialog' named by its words, so a reader who moves into the stack hears which message they are on.  **'hotkey' takes focus to the stack and back**, F8 unless you set it, and 'label' says which key: '{hotkey}' in it is filled in, so the default name is "Notifications (F8)". Pressed while focus is in the stack, it gives focus back to where it was.  **The region never creates or removes items.** You render items and remove them. An item requests closing with a cancelable 'helix-dismiss' event. A dismissed item hides itself and stays in the DOM, so your framework's state and the DOM stay in sync. It hides on its own unless you set 'open', which makes the state yours.  **'add()' shows a message from script**, for a page with no framework state to render them from: it appends a message of the region's own tier and removes it once it has been dismissed and has finished leaving. Messages you render yourself stay yours, and the region never removes them. A touch or a pen swipes a message away toward the end of the line, or toward the edge 'swipe-direction' names.  **'undoable()' offers to take an action back**, which replaces a confirmation dialog for an action that can be undone: do the action, then call it. The message holds an Undo button and shows for 8 seconds, Command+Z (Control+Z elsewhere) undoes it while it shows, and a screen reader hears which keys do. Keep a confirmation for an action that cannot be taken back or that reaches someone else, such as sending or paying.  **Every message's timer waits while a pointer or focus is in the stack**, as React Aria's and Radix's regions do, so a reader moving from one message to the next does not lose the one behind them.  **The stack is in the top layer.** The 'region' part is a 'popover="manual"' shown while a message is showing, and shown again above a modal dialog that opened after it. Position the 'region' part, which is the box in the top layer. While a modal 'Dialog', 'Drawer' or 'Lightbox' is open, the browser makes everything outside it inert, the stack included, so a message stays visible and its actions cannot be pressed. Where the browser has 'ariaNotify', a message that arrives then is announced through it. For a message with an action, render a second region inside the dialog.  When a message with focus inside it is dismissed, focus moves to the next message, then the one before it, then back to where it was before it entered the stack.  **'max-visible' limits how many messages show at once**, as Zag's 'max' does. The messages after that many, in document order, wait: each is hidden, its timer has not started, and the region says it once it shows, when a message before it goes. A waiting message has ':state(waiting)'.  **Keyboard.**  | Key | What it does | |---|---| | Command+Z, or Control+Z elsewhere, or your 'undo-keys' | Undoes the newest message 'undoable()' made, while it shows, while focus is not in a text field, and where the app has not handled the key. | | F8, or your 'hotkey' | Moves focus to the first control in the stack, and back to where it was when pressed in the stack. | | Tab, Shift+Tab | Moves between the controls of the messages. | | Escape | Dismisses the message holding focus. Focus moves to the next message, then the one before it, then back to where it was. | */
   "helix-headless-toast": DefineCustomElement<
     HelixHeadlessToast,
     HelixHeadlessToastVueProps,