@fusion.dev/helix-headless 0.178.0 → 0.180.0

package/types/vue.d.ts

@@ -107,6 +107,7 @@ import type {
   HelixHeadlessNumberInput,
   HelixHeadlessObjectInspector,
   HelixHeadlessOptionGroup,
+  isOption,
   optionsAmong,
   HelixHeadlessOption,
   HelixHeadlessOptionSeparator,
@@ -5480,6 +5481,12 @@ for the page's language, then the English. */
 so a form in another language speaks it. Unset is the sentence registered
 for the page's language, then the English. */
   rangeLengthMessage?: (HelixHeadlessDateInput["rangeLengthMessage"]) | undefined;
+  /** The message shown when a range ends before it starts. `{start}` is
+replaced with the start, written the way the field writes dates. */
+  "range-order-message"?: (HelixHeadlessDateInput["rangeOrderMessage"]) | undefined;
+  /** The message shown when a range ends before it starts. `{start}` is
+replaced with the start, written the way the field writes dates. */
+  rangeOrderMessage?: (HelixHeadlessDateInput["rangeOrderMessage"]) | undefined;
   /** The message shown when a date is after `max`. `{max}` is replaced with
 `max`, written the way the field writes dates. */
   "range-overflow-message"?: (HelixHeadlessDateInput["rangeOverflowMessage"]) | undefined;
@@ -5991,6 +5998,12 @@ it. */
   "previous-years-label"?: (HelixHeadlessDatePicker["previousYearsLabel"]) | undefined;
   /** Accessible name for the control that moves back a page, in the years. */
   previousYearsLabel?: (HelixHeadlessDatePicker["previousYearsLabel"]) | undefined;
+  /** The validation message for a range that ends before it starts. `{start}`
+is replaced with the start, written as a date in `locale`. */
+  "range-order-message"?: (HelixHeadlessDatePicker["rangeOrderMessage"]) | undefined;
+  /** The validation message for a range that ends before it starts. `{start}`
+is replaced with the start, written as a date in `locale`. */
+  rangeOrderMessage?: (HelixHeadlessDatePicker["rangeOrderMessage"]) | undefined;
   /** The validation message for a date after `max`. `{max}` is replaced with
 `max`, written as a date in `locale`. */
   "range-overflow-message"?: (HelixHeadlessDatePicker["rangeOverflowMessage"]) | undefined;
@@ -8007,6 +8020,12 @@ export type HelixHeadlessHeatmapElementEvent<E = Event> = TypedEvent<
 /** `helix-before-change` event type */
 export type HelixHeadlessHeatmapHelixBeforeChangeElementEvent =
   HelixHeadlessHeatmapElementEvent<HelixBeforeChangeEvent>;
+/** `helix-reading-change` event type */
+export type HelixHeadlessHeatmapHelixReadingChangeElementEvent =
+  HelixHeadlessHeatmapElementEvent<HelixReadingChangeEvent>;
+/** `helix-reading-press` event type */
+export type HelixHeadlessHeatmapHelixReadingPressElementEvent =
+  HelixHeadlessHeatmapElementEvent<HelixReadingPressEvent>;
 /** `helix-resize` event type */
 export type HelixHeadlessHeatmapHelixResizeElementEvent =
   HelixHeadlessHeatmapElementEvent<HelixResizeEvent>;
@@ -8018,16 +8037,6 @@ export type HelixHeadlessHeatmapVueProps = {
   /** The name the `overview` gives the busiest reading, `{busiestLabel}` in
 `overview-label`. */
   busiestLabel?: (HelixHeadlessHeatmap["busiestLabel"]) | undefined;
-  /** Shown when the table has no readings in it.
-
-Never shown while the table cannot be read at all, which is a server render
-and the hydrating one after it: see `sourceKnown`. */
-  "empty-text"?: (HelixHeadlessHeatmap["emptyText"]) | undefined;
-  /** Shown when the table has no readings in it.
-
-Never shown while the table cannot be read at all, which is a server render
-and the hydrating one after it: see `sourceKnown`. */
-  emptyText?: (HelixHeadlessHeatmap["emptyText"]) | undefined;
   /** Space between cells, in CSS pixels. It is a number for the same reason
 `min-cell` is. */
   gap?: (HelixHeadlessHeatmap["gap"]) | undefined;
@@ -8085,13 +8094,9 @@ calendar heatmap does: a week is a column, so the strip reads along the
 line in weeks, from the right on a right-to-left page, and top to bottom in
 days. */
   rows?: (HelixHeadlessHeatmap["rows"]) | undefined;
-  /** What the readout adds for a selected cell, under `selection-mode`, after
-where the cell stands: "Day 1: 0 (1 of 14, selected)". Empty adds
-nothing. */
+  /** What the readout added for a selected cell, under `selection-mode`. */
   "selected-label"?: (HelixHeadlessHeatmap["selectedLabel"]) | undefined;
-  /** What the readout adds for a selected cell, under `selection-mode`, after
-where the cell stands: "Day 1: 0 (1 of 14, selected)". Empty adds
-nothing. */
+  /** What the readout added for a selected cell, under `selection-mode`. */
   selectedLabel?: (HelixHeadlessHeatmap["selectedLabel"]) | undefined;
   /** What the `selection` part says after the selection changes. `{count}` is
 how many cells are selected, written in the locale, and a language that
@@ -8148,6 +8153,25 @@ header's words where it carries none.
 Set it to start with cells selected. Written by a press or a key under
 `selection-mode`. */
   value?: (HelixHeadlessHeatmap["value"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  "empty-text"?: (HelixHeadlessHeatmap["emptyText"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  emptyText?: (HelixHeadlessHeatmap["emptyText"]) | undefined;
+  /** Whether the readings are still on their way. The chart shows
+`loading-text` in place of an empty drawing until it has readings.
+
+Reflected, so a stylesheet can treat the chart while it waits. A chart
+that already has readings keeps drawing them, so a refresh does not
+blank it. */
+  loading?: (HelixHeadlessHeatmap["loading"]) | undefined;
+  /** The words shown in place of the drawing while `loading` is set and
+there are no readings yet, and the fallback of the `loading` slot. */
+  "loading-text"?: (HelixHeadlessHeatmap["loadingText"]) | undefined;
+  /** The words shown in place of the drawing while `loading` is set and
+there are no readings yet, and the fallback of the `loading` slot. */
+  loadingText?: (HelixHeadlessHeatmap["loadingText"]) | undefined;
   /** The id of the table to read.
 
 Names a table in the same tree, so a chart inside another component's
@@ -8214,6 +8238,10 @@ export type HelixHeadlessHeatmapVueEvents = {
   change: HelixHeadlessHeatmapElementEvent;
   /** Fired before a press or a key changes which cells are selected, with the `value` it would leave. Cancelable. */
   "helix-before-change": HelixHeadlessHeatmapHelixBeforeChangeElementEvent;
+  /** The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it. */
+  "helix-reading-change": HelixHeadlessHeatmapHelixReadingChangeElementEvent;
+  /** A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`. */
+  "helix-reading-press": HelixHeadlessHeatmapHelixReadingPressElementEvent;
   /** Fired when the number of cells drawn changes, with the new number. */
   "helix-resize": HelixHeadlessHeatmapHelixResizeElementEvent;
 };
@@ -9914,7 +9942,8 @@ React Aria virtualizes a `ListBox` with its `Virtualizer`; this is core's
 
 **The list needs a height to scroll in**: the styled tier's
 `--listbox-max-block-size`, or a `max-block-size` on `::part(items)` in the
-headless tier. Import the Option family as well, whose elements are drawn.
+headless tier. The options drawn are this tier's Option, which the page
+imports, as it imports the options it writes.
 A server sends the list empty, and the options are drawn once it hydrates. */
   items?: (HelixHeadlessListbox["items"]) | undefined;
   /** Which option is chosen, as an index, or `-1` where none is.
@@ -11421,6 +11450,20 @@ empty string would give. */
   "default-read"?: (HelixHeadlessNotification["defaultRead"]) | undefined;
   /** Whether the notification starts as read, used until `read` is set. */
   defaultRead?: (HelixHeadlessNotification["defaultRead"]) | undefined;
+  /** The dismiss control's name, read by screen readers, with `{label}` for the
+row's own words.
+
+One sentence with the words in it, so a translation puts them where its
+language does: `registerWords('de', { 'helix-notification': { dismissLabel:
+'{label} schließen' } })`. */
+  "dismiss-label"?: (HelixHeadlessNotification["dismissLabel"]) | undefined;
+  /** The dismiss control's name, read by screen readers, with `{label}` for the
+row's own words.
+
+One sentence with the words in it, so a translation puts them where its
+language does: `registerWords('de', { 'helix-notification': { dismissLabel:
+'{label} schließen' } })`. */
+  dismissLabel?: (HelixHeadlessNotification["dismissLabel"]) | undefined;
   /** Locale for the timestamp.
 
 Empty is the runtime's own. */
@@ -11451,28 +11494,6 @@ its place. Translate it with the rest of your interface. */
   unreadLabel?: (HelixHeadlessNotification["unreadLabel"]) | undefined;
   /** Whether the element shows a control that dismisses it. */
   dismissible?: (HelixHeadlessNotification["dismissible"]) | undefined;
-  /** The dismiss control's label, read by screen readers.
-
-`attribute` is spelled out because Lit lowercases a property name to
-derive one rather than dash-casing it, so this would otherwise be
-reachable only as `dismisslabel`, which nobody would guess and no linter
-would catch.
-
-A word property: register it for a locale under the host's key. A family
-that names the control otherwise, such as Tag's `Remove {label}`,
-declares its own English with `@words` above the override. */
-  "dismiss-label"?: (HelixHeadlessNotification["dismissLabel"]) | undefined;
-  /** The dismiss control's label, read by screen readers.
-
-`attribute` is spelled out because Lit lowercases a property name to
-derive one rather than dash-casing it, so this would otherwise be
-reachable only as `dismisslabel`, which nobody would guess and no linter
-would catch.
-
-A word property: register it for a locale under the host's key. A family
-that names the control otherwise, such as Tag's `Remove {label}`,
-declares its own English with `@words` above the override. */
-  dismissLabel?: (HelixHeadlessNotification["dismissLabel"]) | undefined;
 };
 
 export type HelixHeadlessNotificationVueEvents = {
@@ -19363,7 +19384,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'. 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.  **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,
@@ -19417,13 +19438,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessColorPickerVueProps,
     HelixHeadlessColorPickerVueEvents
   >;
-  /** The list is a 'Listbox', which handles filtering, the empty state, the highlight, 'aria-activedescendant', and scrolling an option into view. This element handles the field, the panel, and the communication between them.  The typed text and the value are separate. The text is a filter: it narrows the list and is then discarded. The value is the option you choose, and the field then shows that option's text. The filter clears on close, so a reopened combobox starts from the whole list.  Focus stays in the text field. The arrow keys move through the list with the listbox's public 'navigate' method. As typing narrows the list, a screen reader hears how many options are left, such as "3 results". Emptying the field and leaving it clears a single choice.  **Keyboard.**  | Key | What it does | |---|---| | Down, Up | On a closed field, opens the list on the chosen option, or the first or the last. In the open list, moves the highlight, round from the last option to the first. | | Alt with Down, Alt with Up | Opens the list without moving the highlight, and closes it, choosing nothing. | | Page Down, Page Up | In the open list, moves the highlight by as many options as the list shows at once. | | Enter | Chooses the highlighted option. With nothing left in the list, creates what was typed with 'creatable', or takes it with 'allows-custom-value'. On a closed field, submits the form. | | Escape | Closes the list and puts the chosen words back. On a closed field, a second Escape clears a single choice. | | Tab | Closes the list and moves on. | | Backspace | With 'multiple', on an empty field, removes the last tag. | | Left | With 'multiple', with the caret at the start of the text, moves to the last tag's remove button. Right on a right-to-left page. | | Left, Right on a tag | Move between the tags, and past the last back to the text. | | Delete, Backspace on a tag | Removes the tag. | | Space, Home, End, letters | Edit the text. |  **ARIA.** The input is the 'combobox', named by the label, with 'aria-expanded', 'aria-controls' naming the list, 'aria-autocomplete' ('both' with 'suggest', 'list' otherwise) and 'aria-activedescendant' on the highlighted option. The list is the listbox 'Listbox' describes.  On Apple devices, where VoiceOver does not read the option the field points to, the field says it in a live region as the highlight moves, says how many options there are as the list opens, and says a choice once it is made, as React Aria's combobox does there.  Set 'autocomplete' to let a browser's autofill choose an option.  With 'multiple', each chosen option is a tag in the field with its own remove control. The text is the field's one tab stop, and the arrow keys reach the tags from it. The panel stays open and the filter clears after each choice, so the next choice starts from the whole list.  With 'creatable', the combobox offers a create row and fires 'helix-create'. It does not add the option. The options are your light DOM, and your framework would re-render over an element the combobox inserted, so add the option in your event handler. */
+  /** The list is a 'Listbox', which handles filtering, the empty state, the highlight, 'aria-activedescendant', and scrolling an option into view. This element handles the field, the panel, and the communication between them.  The typed text and the value are separate. The text is a filter: it narrows the list and is then discarded. The value is the option you choose, and the field then shows that option's text. The filter clears on close, so a reopened combobox starts from the whole list.  Focus stays in the text field. The arrow keys move through the list with the listbox's public 'navigate' method. As typing narrows the list, a screen reader hears how many options are left, such as "3 results". Emptying the field and leaving it clears a single choice.  **Keyboard.**  | Key | What it does | |---|---| | Down, Up | On a closed field, opens the list on the chosen option, or the first or the last. In the open list, moves the highlight, round from the last option to the first. | | Alt with Down, Alt with Up | Opens the list without moving the highlight, and closes it, choosing nothing. | | Page Down, Page Up | In the open list, moves the highlight by as many options as the list shows at once. | | Enter | Chooses the highlighted option. With nothing left in the list, creates what was typed with 'creatable', or takes it with 'allows-custom-value'. On a closed field, submits the form. | | Escape | Closes the list and puts the chosen words back. On a closed field, a second Escape clears a single choice. | | Tab | Closes the list and moves on. | | Backspace | With 'multiple', on an empty field, removes the last tag. | | Left | With 'multiple', with the caret at the start of the text, moves to the last tag's remove button. Right on a right-to-left page. | | Left, Right on a tag | Move between the tags, and past the last back to the text. | | Delete, Backspace on a tag | Removes the tag. | | Space, Home, End, letters | Edit the text. |  **ARIA.** The input is the 'combobox', named by the label, with 'aria-expanded', 'aria-controls' naming the list, 'aria-autocomplete' ('both' with 'suggest', 'list' otherwise) and 'aria-activedescendant' on the highlighted option. The list is the listbox 'Listbox' describes.  On Apple devices, where VoiceOver does not read the option the field points to, the field says it in a live region as the highlight moves, says how many options there are as the list opens, and says a choice once it is made, as React Aria's combobox does there.  Set 'autocomplete' to let a browser's autofill choose an option.  With 'multiple', each chosen option is a tag in the field with its own remove control. The text is the field's one tab stop, and the arrow keys reach the tags from it. The panel stays open and the filter clears after each choice, so the next choice starts from the whole list.  With 'creatable', the combobox offers a create row and fires 'helix-create'. It does not add the option. The options are your light DOM, and your framework would re-render over an element the combobox inserted, so add the option in your event handler.  **The options are an import of their own.** An option is the Option family's, which the combobox does not register, so a page that writes one imports it beside the combobox:  '''js import '@fusion.dev/helix/combobox' import '@fusion.dev/helix/option' '''  In development, a combobox holding an option nobody registered says so once the page has loaded, with the line to add. */
   "helix-headless-combobox": DefineCustomElement<
     HelixHeadlessCombobox,
     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 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. */
   "helix-headless-command": DefineCustomElement<
     HelixHeadlessCommand,
     HelixHeadlessCommandVueProps,
@@ -19435,19 +19456,19 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessCopyButtonVueProps,
     HelixHeadlessCopyButtonVueEvents
   >;
-  /** Declare the columns as 'TableColumn' children and pass the rows as an array. The schema stays readable in the HTML, and the rows can be windowed, which ten thousand row elements cannot be.  '''html <helix-headless-data-table .rows=${rows} sort="name:asc" page-size="20">   <helix-headless-table-column field="name" sortable>Name</helix-headless-table-column>   <helix-headless-table-column field="size" text-align="end" sortable .cell=${bytes}>Size</helix-headless-table-column> </helix-headless-data-table> '''  For a short table written out by hand, use 'Table', which takes rows as markup.  Sort and filter apply to the whole set, including the rows on other pages.  **Write the first page as rows, so the served HTML carries the values.** The table reads each cell from its column, and a server does not pass the column children to this element, so on its own it serves the headings and no values. Write the first page under the columns as 'TableRow' and 'TableCell' elements, in the table's sort and page size and formatted as its columns draw them. The table shows your rows until 'rows' holds a row, then draws its own in their place and leaves yours in the page, unshown. A development build warns when the two differ. In React, map the first page of the same array in the same server component.  'selectable' adds a column of checkboxes, keyed on 'row-key':  - A row is selected by its key, so the selection survives a sort, a filter,   and a page change. - 'selected' holds the chosen keys, comma separated, the same shape 'Listbox'   uses for a multiple choice. As with 'sort', writing it applies the   selection, and 'default-selected' holds what the markup declared. - The checkbox in the heading selects every row in the result, across pages,   and shows a dash while only some are chosen. - Shift with a press on a checkbox selects every row between it and the row   last chosen. - 'selection-behavior="replace"' makes a press or a move select the row   alone, as a file list does. Control or Command with a press adds or takes   out one row, and Shift with a press selects every row from the one last   chosen.  To act on a single row, such as opening it, put a link or a button in a cell.  **Keyboard.** The grid is one tab stop, and the arrow keys move between its cells, the headings included.  | Key | What it does | |---|---| | Right, Left | Moves one cell along the row. Left moves on, on a right-to-left page. | | Down, Up | Moves one row, the heading row and the 'load-more' row included. | | Home, End | Moves to the first or the last cell of the row. | | Control with Home or End | Moves to the first or the last cell of the grid. | | Page Down, Page Up | Moves by the rows that fit in view. | | Enter, F2 | Moves into the cell's controls. Escape moves back to the cell, and Tab moves between the controls of one cell. | | Enter, Space on a sortable heading | Sorts by the column. | | Enter, Space on the 'load-more' row | Sends 'helix-load-more'. | | Space on a row | Selects the row, in a 'selectable' table. Under 'selection-behavior="replace"', selects it alone, and Control or Command with Space adds or takes out the row. | | Down, Up, Page Down, Page Up under 'selection-behavior="replace"' | Selects the row it moves to alone. Control or Command with the key moves without selecting. | | Shift with Down or Up | Selects the rows it moves across, in a 'selectable' table. | | Shift with Space | Selects every row from the one last chosen, in a 'selectable' table. | | Control or Command with A | Selects every row, in a 'selectable' table. | | Right on a row header in a tree grid | Opens a closed row, and moves one cell along an open one. | | Left on a row header in a tree grid | Closes an open row, and moves to the parent of a closed one. | | A letter or a word | Moves to the next row whose row header starts with what you typed. |  'selected' and 'expanded' hold their keys in the order of the rows, as do 'helix-select', 'helix-selected' and 'helix-expand'.  Each row is named by its row header, the column marked 'row-header', or the first column with a 'field' where none is. A screen reader says it as a reader moves between rows.  **Rows that hold rows.** 'child-field' names the field that holds a row's child rows, and the grid becomes a tree grid. The row header column draws a mark that a press opens and closes a row by, and 'expanded' holds the keys of the open rows, which 'row-key' names. Right on a closed row's header opens it, Left on an open one closes it, and Left on a child moves to its parent. A sort orders the rows under each parent, and a search shows the rows that lead to each match, open.  'load-more' adds a row after the last one with a button that sends 'helix-load-more'. A 'windowed' table also sends it by itself once a reader scrolls within one screen of the end, once for each number of rows. Add the next rows to 'rows', and set 'loading' while they are on their way.  When a fetch fails, set 'error-text', such as "The files did not load", and put a button that tries again in the 'error' slot. The line shows after the rows in place of the empty and loading lines, the live region says it, and the table takes the 'error' state. Clear it once you try again.  The controls inside the cells leave the tab order, so Tab moves past the whole grid. A windowed table keeps the row holding focus drawn while the rest scroll away.  People can resize and reorder the columns. 'resizable' on a column puts a separator on its edge. 'reorderable' on the table puts a grip on each heading that has a 'field', moved by dragging or with the arrow keys. The new order is written to 'order' as a list of fields. Your markup is not rewritten: the table assigns the headings to its header in that order.  **'reorderable-rows' lets people move rows.** A column of grips leads each row, named by 'move-row-label'. Drag a grip to move its row, and the table scrolls near an edge. Or press Space or Enter on a grip, or click it, to pick up its row, move it with Down and Up, Home and End, and press Space or Enter again to drop it. A click on another row drops it there, and Escape puts it back. The table says each step in its 'live' region. A drop sends 'helix-before-reorder', which you can refuse, and then 'helix-reorder' with 'kind' set to 'row', whose 'keys' hold every key of 'rows' in the new order. **You move the rows**: set 'rows' to the new order, and the table draws it. Set 'row-key', so a row is known by its key once it has moved. The grips do nothing while a 'sort' is set, since the sort decides the order, and a tree grid draws none.  'csv()' returns the result as text: every row that passes the filter, in the order and the columns on screen. Saving the file is up to you.  'DataTable' has no 'columns' attribute. Each 'TableColumn' is part of the schema, so you size a column with its own 'width'. 'Table' has 'columns' because its cells are markup you write and it can have no columns at all. Written on 'DataTable', 'columns' has no effect, so watch for it when you move a table from 'Table' to 'DataTable'. */
+  /** Declare the columns as 'TableColumn' children and pass the rows as an array. The schema stays readable in the HTML, and the rows can be windowed, which ten thousand row elements cannot be.  '''html <helix-headless-data-table .rows=${rows} sort="name:asc" page-size="20">   <helix-headless-table-column field="name" sortable>Name</helix-headless-table-column>   <helix-headless-table-column field="size" text-align="end" sortable .cell=${bytes}>Size</helix-headless-table-column> </helix-headless-data-table> '''  For a short table written out by hand, use 'Table', which takes rows as markup.  Sort and filter apply to the whole set, including the rows on other pages.  **Write the first page as rows, so the served HTML carries the values.** The table reads each cell from its column, and a server does not pass the column children to this element, so on its own it serves the headings and no values. Write the first page under the columns as 'TableRow' and 'TableCell' elements, in the table's sort and page size and formatted as its columns draw them. The table shows your rows until 'rows' holds a row, then draws its own in their place and leaves yours in the page, unshown. A development build warns when the two differ. In React, map the first page of the same array in the same server component.  'selectable' adds a column of checkboxes, keyed on 'row-key':  - A row is selected by its key, so the selection survives a sort, a filter,   and a page change. - 'selected' holds the chosen keys, comma separated, the same shape 'Listbox'   uses for a multiple choice. As with 'sort', writing it applies the   selection, and 'default-selected' holds what the markup declared. - The checkbox in the heading selects every row in the result, across pages,   and shows a dash while only some are chosen. - Shift with a press on a checkbox selects every row between it and the row   last chosen. - 'selection-behavior="replace"' makes a press or a move select the row   alone, as a file list does. Control or Command with a press adds or takes   out one row, and Shift with a press selects every row from the one last   chosen.  To act on a single row, such as opening it, put a link or a button in a cell.  **Keyboard.** The grid is one tab stop, and the arrow keys move between its cells, the headings included.  | Key | What it does | |---|---| | Right, Left | Moves one cell along the row. Left moves on, on a right-to-left page. | | Down, Up | Moves one row, the heading row and the 'load-more' row included. | | Home, End | Moves to the first or the last cell of the row. | | Control with Home or End | Moves to the first or the last cell of the grid. | | Page Down, Page Up | Moves by the rows that fit in view. | | Enter, F2 | Moves into the cell's controls. Escape moves back to the cell, and Tab moves between the controls of one cell. | | Enter, Space on a sortable heading | Sorts by the column. | | Enter, Space on the 'load-more' row | Sends 'helix-load-more'. | | Space on a row | Selects the row, in a 'selectable' table. Under 'selection-behavior="replace"', selects it alone, and Control or Command with Space adds or takes out the row. | | Down, Up, Page Down, Page Up under 'selection-behavior="replace"' | Selects the row it moves to alone. Control or Command with the key moves without selecting. | | Shift with Down or Up | Selects the rows it moves across, in a 'selectable' table. | | Shift with Space | Selects every row from the one last chosen, in a 'selectable' table. | | Control or Command with A | Selects every row, in a 'selectable' table. | | Right on a row header in a tree grid | Opens a closed row, and moves one cell along an open one. | | Left on a row header in a tree grid | Closes an open row, and moves to the parent of a closed one. | | A letter or a word | Moves to the next row whose row header starts with what you typed. |  'selected' and 'expanded' hold their keys in the order of the rows, as do 'helix-select', 'helix-selected' and 'helix-expand'.  Each row is named by its row header, the column marked 'row-header', or the first column with a 'field' where none is. A screen reader says it as a reader moves between rows.  **Rows that hold rows.** 'child-field' names the field that holds a row's child rows, and the grid becomes a tree grid. The row header column draws a mark that a press opens and closes a row by, and 'expanded' holds the keys of the open rows, which 'row-key' names. Right on a closed row's header opens it, Left on an open one closes it, and Left on a child moves to its parent. A sort orders the rows under each parent, and a search shows the rows that lead to each match, open.  'load-more' adds a row after the last one with a button that sends 'helix-load-more'. A 'windowed' table also sends it by itself once a reader scrolls within one screen of the end, once for each number of rows. Add the next rows to 'rows', and set 'loading' while they are on their way.  When a fetch fails, set 'error-text', such as "The files did not load", and put a button that tries again in the 'error' slot. The line shows after the rows in place of the empty and loading lines, the live region says it, and the table takes the 'error' state. Clear it once you try again.  The controls inside the cells leave the tab order, so Tab moves past the whole grid. A windowed table keeps the row holding focus drawn while the rest scroll away.  People can resize and reorder the columns. 'resizable' on a column puts a separator on its edge. 'reorderable' on the table puts a grip on each heading that has a 'field', moved by dragging or with the arrow keys. The new order is written to 'order' as a list of fields. Your markup is not rewritten: the table assigns the headings to its header in that order.  **'reorderable-rows' lets people move rows.** A column of grips leads each row, named by 'move-row-label'. Drag a grip to move its row, and the table scrolls near an edge. Or press Space or Enter on a grip, or click it, to pick up its row, move it with Down and Up, Home and End, and press Space or Enter again to drop it. A click on another row drops it there, and Escape puts it back. The table says each step in its 'live' region. A drop sends 'helix-before-reorder', which you can refuse, and then 'helix-reorder' with 'kind' set to 'row', whose 'keys' hold every key of 'rows' in the new order. **You move the rows**: set 'rows' to the new order, and the table draws it. Set 'row-key', so a row is known by its key once it has moved. The grips do nothing while a 'sort' is set, since the sort decides the order, and a tree grid draws none.  'csv()' returns the result as text: every row that passes the filter, in the order and the columns on screen. Saving the file is up to you.  'DataTable' has no 'columns' attribute. Each 'TableColumn' is part of the schema, so you size a column with its own 'width'. 'Table' has 'columns' because its cells are markup you write and it can have no columns at all. Written on 'DataTable', 'columns' has no effect, so watch for it when you move a table from 'Table' to 'DataTable'.  **The columns are an import of their own.** A column is the Table family's 'TableColumn', which the data table does not register, so a page that writes one imports the Table entry beside the data table:  '''js import '@fusion.dev/helix/data-table' import '@fusion.dev/helix/table' '''  In development, a data table holding a column nobody registered says so once the page has loaded, with the line to add. */
   "helix-headless-data-table": DefineCustomElement<
     HelixHeadlessDataTable,
     HelixHeadlessDataTableVueProps,
     HelixHeadlessDataTableVueEvents
   >;
-  /** The calendar is 'DatePicker', which handles months, ranges, disabled days, the first day of the week, and the grid's keyboard behavior. The date input adds the field, the overlay, and the connection between them.  You can type a date as well as pick one. The native '<input type="date">' gives a picker and locale formatting but allows almost no styling, so the field is a text field. Typing sends 'input' on each keystroke and 'change' when you leave the field, as a text field does. A date picked from the calendar sends both. The field reads ISO, '2026-08-04', and a date written in the order, the digits, and the month names of 'locale', '8/4/2026' or 'Aug 4, 2026' in 'en-US' and '4.8.2026' in 'de-DE', which becomes the value as you leave the field.  The trigger and ArrowDown open the calendar with focus on the selected day, Tab moves between the calendar's controls without leaving it, and Escape closes it and returns focus to the field. A press into the field opens the calendar too. Tab into the field opens nothing, and Tab out of the field closes the calendar. The text field is a 'combobox' with 'aria-haspopup="dialog"', 'aria-expanded', and 'aria-controls', as in the APG date picker combobox, since Down opens the calendar from it.  With 'segmented', the field is a row of segments in place of the text: a month, a day and a year in the order the locale writes them, each set with digits or the arrow keys. Alt+Down opens the calendar from a segment. A 'range' is two rows with a dash between them, the start and the end, as React Aria's DateRangePicker draws them, and 'multiple' keeps the text.  Text that is not a date gives the form an empty value, as a native date field does, and 'value' keeps the text so it can be corrected.  **Keyboard.** The field is one tab stop, or each segment is with 'segmented', and the trigger is one more.  | Key | What it does | |---|---| | Down | In the text field, opens the calendar with focus on the chosen day. | | Alt with Down | Opens the calendar, from the text field or a segment. | | Enter | In the text field, takes the typed date and submits the form, as a native field does. | | Escape | Closes the calendar and puts focus back in the field. | | Tab | In the open calendar, moves between its controls. Out of the field, closes it. | | Up, Down on a segment | Steps the segment by one, round from its last value to its first. | | Page Up, Page Down on a segment | Steps by a page: a week of days, two months, or five years. | | Home, End on a segment | Goes to the segment's first or last value. | | Digits on a segment | Fill it, and move to the next once it can take no more. | | Backspace, Delete on a segment | Take off its last digit, or move to the segment before where it is empty. | | Left, Right on a segment | Move to the previous or the next segment, along the line of text. |  In the calendar, the keys are 'DatePicker''s: the arrows move by a day or a week, Page Up and Page Down by a month, with Shift by a year, and Home and End to the start and the end of the week. */
+  /** The calendar is 'DatePicker', which handles months, ranges, disabled days, the first day of the week, and the grid's keyboard behavior. The date input adds the field, the overlay, and the connection between them.  You can type a date as well as pick one. The native '<input type="date">' gives a picker and locale formatting but allows almost no styling, so the field is a text field. Typing sends 'input' on each keystroke and 'change' when you leave the field, as a text field does. A date picked from the calendar sends both. The field reads ISO, '2026-08-04', and a date written in the order, the digits, and the month names of 'locale', '8/4/2026' or 'Aug 4, 2026' in 'en-US' and '4.8.2026' in 'de-DE', which becomes the value as you leave the field.  The trigger and ArrowDown open the calendar with focus on the selected day, Tab moves between the calendar's controls without leaving it, and Escape closes it and returns focus to the field. A press into the field opens the calendar too. Tab into the field opens nothing, and Tab out of the field closes the calendar. The text field is a 'combobox' with 'aria-haspopup="dialog"', 'aria-expanded', and 'aria-controls', as in the APG date picker combobox, since Down opens the calendar from it.  With 'segmented', the field is a row of segments in place of the text: a month, a day and a year in the order the locale writes them, each set with digits or the arrow keys. Alt+Down opens the calendar from a segment. A 'range' is two rows with a dash between them, the start and the end, as React Aria's DateRangePicker draws them, and 'multiple' keeps the text. A range whose end is before its start reports 'rangeUnderflow', as Date Picker does, with 'range-order-message'.  Text that is not a date gives the form an empty value, as a native date field does, and 'value' keeps the text so it can be corrected.  **Keyboard.** The field is one tab stop, or each segment is with 'segmented', and the trigger is one more.  | Key | What it does | |---|---| | Down | In the text field, opens the calendar with focus on the chosen day. | | Alt with Down | Opens the calendar, from the text field or a segment. | | Enter | In the text field, takes the typed date and submits the form, as a native field does. | | Escape | Closes the calendar and puts focus back in the field. | | Tab | In the open calendar, moves between its controls. Out of the field, closes it. | | Up, Down on a segment | Steps the segment by one, round from its last value to its first. | | Page Up, Page Down on a segment | Steps by a page: a week of days, two months, or five years. | | Home, End on a segment | Goes to the segment's first or last value. | | Digits on a segment | Fill it, and move to the next once it can take no more. | | Backspace, Delete on a segment | Take off its last digit, or move to the segment before where it is empty. | | Left, Right on a segment | Move to the previous or the next segment, along the line of text. |  In the calendar, the keys are 'DatePicker''s: the arrows move by a day or a week, Page Up and Page Down by a month, with Shift by a year, and Home and End to the start and the end of the week. */
   "helix-headless-date-input": DefineCustomElement<
     HelixHeadlessDateInput,
     HelixHeadlessDateInputVueProps,
     HelixHeadlessDateInputVueEvents
   >;
-  /** A grid of days that follows the APG date grid pattern:  - The grid is one tab stop. Only the focused cell is in the tab sequence. - Arrow keys move by day and by week. - 'PageUp' and 'PageDown' move by month. - 'Home' and 'End' move to the start and end of the week.  **Dates are 'YYYY-MM-DD' strings, and every calculation is in UTC**, because a local-time 'Date' shifts across a time zone or daylight-saving boundary.  **The months are the ones 'calendar' counts**: the Gregorian months for the locale's own calendar where its months are the Gregorian months, as 'th-TH' writes 2569 for 2026, and 'gregory' where they are not, as for 'fa-IR' with no 'calendar'. Name a calendar with months of its own, such as 'persian', and every view counts its days, months, and years from 'Intl'.  'month' sets which month the grid shows, separately from 'value', so paging selects nothing and you can control the view. When unset, it follows the first selected date, then the current month.  'mode' sets how many dates are held. Unset holds one, 'range' holds two and marks the dates between them, and 'multiple' toggles each date. All three read and write the same comma-separated 'value'. With a 'mode', the grid carries 'aria-multiselectable'. While a range holds one end, the grid draws the range to the day under the pointer or the focus, marking those cells 'data-range-preview'.  The chosen date, range, or count of dates is the grid's description, in a region screen readers announce when it changes, as React Aria's calendars do. 'selection-label' words it.  'max-view' makes the heading a button that steps back to the months of the year, and with 'year' to a page of years, as Zag's date picker does. The arrows, Home, End and the page keys move there, Enter or a press chooses, and Escape goes back to the days.  'isDateUnavailable' and 'dayContent' are properties for a script: a rule that bars dates, and what each day shows in place of its number.  The month heading is a live region, so a screen reader hears the new month when Previous or Next is pressed. Neither moves past 'min' or 'max', and the keys stop at them too. A value outside the bounds, on a barred day, or off 'step' reports 'rangeUnderflow', 'rangeOverflow', 'badInput' or 'stepMismatch', so a form does not submit it. */
+  /** A grid of days that follows the APG date grid pattern:  - The grid is one tab stop. Only the focused cell is in the tab sequence. - Arrow keys move by day and by week. - 'PageUp' and 'PageDown' move by month. - 'Home' and 'End' move to the start and end of the week.  **Dates are 'YYYY-MM-DD' strings, and every calculation is in UTC**, because a local-time 'Date' shifts across a time zone or daylight-saving boundary.  **The months are the ones 'calendar' counts**: the Gregorian months for the locale's own calendar where its months are the Gregorian months, as 'th-TH' writes 2569 for 2026, and 'gregory' where they are not, as for 'fa-IR' with no 'calendar'. Name a calendar with months of its own, such as 'persian', and every view counts its days, months, and years from 'Intl'.  'month' sets which month the grid shows, separately from 'value', so paging selects nothing and you can control the view. When unset, it follows the first selected date, then the current month.  'mode' sets how many dates are held. Unset holds one, 'range' holds two and marks the dates between them, and 'multiple' toggles each date. All three read and write the same comma-separated 'value'. With a 'mode', the grid carries 'aria-multiselectable'. While a range holds one end, the grid draws the range to the day under the pointer or the focus, marking those cells 'data-range-preview'.  The chosen date, range, or count of dates is the grid's description, in a region screen readers announce when it changes, as React Aria's calendars do. 'selection-label' words it.  'max-view' makes the heading a button that steps back to the months of the year, and with 'year' to a page of years, as Zag's date picker does. The arrows, Home, End and the page keys move there, Enter or a press chooses, and Escape goes back to the days.  'isDateUnavailable' and 'dayContent' are properties for a script: a rule that bars dates, and what each day shows in place of its number.  The month heading is a live region, so a screen reader hears the new month when Previous or Next is pressed. Neither moves past 'min' or 'max', and the keys stop at them too. A value outside the bounds, on a barred day, or off 'step' reports 'rangeUnderflow', 'rangeOverflow', 'badInput' or 'stepMismatch', so a form does not submit it. A range set from a script whose end is before its start reports 'rangeUnderflow' as well. */
   "helix-headless-date-picker": DefineCustomElement<
     HelixHeadlessDatePicker,
     HelixHeadlessDatePickerVueProps,
@@ -19537,7 +19558,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessFilterOperatorVueProps,
     HelixHeadlessFilterOperatorVueEvents
   >;
-  /** Tokens are your own elements, slotted in. A filter can be a facet with a prefix, a saved query, or a range, and these belong to your model, so the element does not render tokens from a list of strings. Removing a token is a request the element fires, and you apply it. Combobox works the other way: its tokens show a selection it owns, drawn from the options it was given.  'value' is the typed text. Every keystroke fires 'input' with the text on the element, so a table can narrow as the user types. Backspace in an empty field fires 'helix-dismiss' on the last token, the same event its remove control fires, so one handler covers the pointer and the keyboard.  **What a form receives.** The text under 'name', and then one more entry under 'name' for each token, in the order the tokens stand:  | Token | Entry | |---|---| | Any element with a 'value' attribute | The value as written: 'saved:mine' | | 'FilterChip' with 'name' and values | 'status:open,pending' | | The same, with 'operator="none"' (what a typed '-status:' makes) | '-status:open,pending' | | The same, with any other 'operator' except 'any' | 'created[after]:2024' | | A token with neither | Nothing |  The values are the chip's text outside its 'field' and 'operator' slots, with the spaces around each comma removed. A server splits an entry at its first colon, reads a leading '-' as the negation, and reads a word in brackets before the colon as the comparison.  **Keyboard.** Focus stays in the text, which is the field's one tab stop. The text names the highlighted suggestion as its 'aria-activedescendant', and the arrow keys reach the tokens.  | Key | What it does | |---|---| | Enter | Presses the highlighted suggestion. With none highlighted, reads the typed filters into chips, or submits the form when there are none. | | Down, Up | Moves the highlight through the suggestions, wrapping, and opens the panel. | | Home, End | Highlights the first or the last suggestion while the panel is open. | | Escape | Closes the panel and stops there, so a dialog around the field stays open. With the panel closed, empties the text. In an empty field, does nothing, so the page hears it. | | Backspace | In an empty field, asks the last token to go. | | Left | With the caret at the start of the text, moves to the last token's remove button. Right on a right-to-left page. | | Left, Right on a token | Move between the tokens, and past the last back to the text. | | Delete, Backspace on a token | Asks the token to go. |  **Typed filters.** The field parses only the fields you declare. Write 'FilterField' elements, usually inside the 'FilterMenu' slotted into 'start', so the picker and the text share one set. On Enter, the field reads the text against them, and a paste is read the same way as soon as it lands. 'disposition:refunded,settled' and '-disposition:refunded' fire 'helix-facet' exactly as ticking those values in the picker would, and the parsed text is removed. Everything else stays, so 'refund tuesday disposition:settled' is a filter and a search at once. Helix defines the punctuation and you define every word. 'grammar.ts' has the full rule, so read it before you rely on it. A field with no 'FilterField' in it parses nothing.  A field whose values cannot be listed, such as 'assignee:ada', goes directly inside this element, outside the menu. It is not assigned to a slot, so nothing draws it and the menu has no page for it, and the grammar still reads it.  **The picker has an entry of its own.** 'FilterMenu' draws its pages with 'Menu', which a field without a picker does not need, so this family's entry leaves it out. A page that writes a 'FilterMenu' imports both entries:  '''js import '@fusion.dev/helix/filter-input' import '@fusion.dev/helix/filter-input/menu' '''  A picker written without the second is reported once the page has loaded, with the entry to add.  **Suggestions.** Slot options into 'suggestions' and the field shows them, moves through them with the arrow keys, and presses one on Enter. The option fires its own 'helix-select', and you decide what choosing it means. Keys before a colon and values after it use the same panel with different contents. 'filter-suggestions' narrows the panel to the options whose words hold the term at the caret, after its colon, ignoring case and accents, and hides the rest. 'readFilterText' is exported so you can narrow it yourself against partly typed text. While the panel is open, a reader hears how many suggestions it offers. The panel opens when it has options and closes when it has none, and a choice does not close it, so after picking a key you see its values next. Use 'selectionStart' and 'setSelectionRange' to write a completion back and put the caret after it, or the next parse reads the wrong term.  **Suggestions from a source.** Set 'source' to a function, and the field asks it for suggestions as the text changes and draws them as options in the panel. It is given the term at the caret, the field the term is a value of, the whole text, and an 'AbortSignal', and returns the suggestions or a promise of them. 'filter-delay' waits for typing to rest before asking, and a later keystroke aborts a request still out. While a promise is pending, the panel shows 'loading-text' and a screen reader hears it, then the count. Choosing a suggestion writes its value over the term at the caret, and a finished 'field:value' is read into a chip as Enter would. Cancel its 'helix-select' to write it yourself.  '''js filter.source = async ({ field, term, signal }) => {   const response = await fetch('/values?field=${field}&q=${term}', { signal })   return response.json() } '''  **State.** Three things have three different owners:  - 'value' is the text. The user types, the element applies it, and 'input'   reports it. Setting 'value' seeds or corrects the text, and the next   keystroke overwrites it, even in React. To control the value, cancel   'helix-before-change' and write the value you want, as with every field in   this library. 'default-value' seeds the field. - 'open' is the suggestions panel. Cancel 'helix-before-open' or   'helix-before-close' to control it, and use 'default-open' to seed it. - Tokens are your elements in a slot and hold no state. A token goes when you   remove it from your markup after 'helix-dismiss'. A 'FilterChip' naming a   declared field works differently, because the picker holds what is ticked   and removing the chip alone would leave its value ticked in the hidden   menu. Its dismissal is treated as the field being filtered by nothing, so   it fires 'helix-facet' like every other change, and the chip goes when the   filter goes. Set 'chips' and the field adds, updates, and removes those   chips itself, from every 'helix-facet' you do not cancel. */
+  /** Tokens are your own elements, slotted in. A filter can be a facet with a prefix, a saved query, or a range, and these belong to your model, so the element does not render tokens from a list of strings. Removing a token is a request the element fires, and you apply it. Combobox works the other way: its tokens show a selection it owns, drawn from the options it was given.  'value' is the typed text. Every keystroke fires 'input' with the text on the element, so a table can narrow as the user types. Backspace in an empty field fires 'helix-dismiss' on the last token, the same event its remove control fires, so one handler covers the pointer and the keyboard.  **What a form receives.** The text under 'name', and then one more entry under 'name' for each token, in the order the tokens stand:  | Token | Entry | |---|---| | Any element with a 'value' attribute | The value as written: 'saved:mine' | | 'FilterChip' with 'name' and values | 'status:open,pending' | | The same, with 'operator="none"' (what a typed '-status:' makes) | '-status:open,pending' | | The same, with any other 'operator' except 'any' | 'created[after]:2024' | | A token with neither | Nothing |  The values are the chip's text outside its 'field' and 'operator' slots, with the spaces around each comma removed. A server splits an entry at its first colon, reads a leading '-' as the negation, and reads a word in brackets before the colon as the comparison.  **Keyboard.** Focus stays in the text, which is the field's one tab stop. The text names the highlighted suggestion as its 'aria-activedescendant', and the arrow keys reach the tokens.  | Key | What it does | |---|---| | Enter | Presses the highlighted suggestion. With none highlighted, reads the typed filters into chips, or submits the form when there are none. | | Down, Up | Moves the highlight through the suggestions, wrapping, and opens the panel. | | Home, End | Highlights the first or the last suggestion while the panel is open. | | Escape | Closes the panel and stops there, so a dialog around the field stays open. With the panel closed, empties the text. In an empty field, does nothing, so the page hears it. | | Backspace | In an empty field, asks the last token to go. | | Left | With the caret at the start of the text, moves to the last token's remove button. Right on a right-to-left page. | | Left, Right on a token | Move between the tokens, and past the last back to the text. | | Delete, Backspace on a token | Asks the token to go. |  **Typed filters.** The field parses only the fields you declare. Write 'FilterField' elements, usually inside the 'FilterMenu' slotted into 'start', so the picker and the text share one set. On Enter, the field reads the text against them, and a paste is read the same way as soon as it lands. 'disposition:refunded,settled' and '-disposition:refunded' fire 'helix-facet' exactly as ticking those values in the picker would, and the parsed text is removed. Everything else stays, so 'refund tuesday disposition:settled' is a filter and a search at once. Helix defines the punctuation and you define every word. 'grammar.ts' has the full rule, so read it before you rely on it. A field with no 'FilterField' in it parses nothing.  A field whose values cannot be listed, such as 'assignee:ada', goes directly inside this element, outside the menu. It is not assigned to a slot, so nothing draws it and the menu has no page for it, and the grammar still reads it.  **The picker has an entry of its own.** 'FilterMenu' draws its pages with 'Menu', which a field without a picker does not need, so this family's entry leaves it out. A page that writes a 'FilterMenu' imports both entries:  '''js import '@fusion.dev/helix/filter-input' import '@fusion.dev/helix/filter-input/menu' '''  A picker written without the second is reported once the page has loaded, with the entry to add.  **Suggestions.** Slot options into 'suggestions' and the field shows them, moves through them with the arrow keys, and presses one on Enter. The option fires its own 'helix-select', and you decide what choosing it means. Keys before a colon and values after it use the same panel with different contents. 'filter-suggestions' narrows the panel to the options whose words hold the term at the caret, after its colon, ignoring case and accents, and hides the rest. 'readFilterText' is exported so you can narrow it yourself against partly typed text. While the panel is open, a reader hears how many suggestions it offers. The panel opens when it has options and closes when it has none, and a choice does not close it, so after picking a key you see its values next. Use 'selectionStart' and 'setSelectionRange' to write a completion back and put the caret after it, or the next parse reads the wrong term.  **Suggestions from a source.** Set 'source' to a function, and the field asks it for suggestions as the text changes and draws them as options in the panel. It is given the term at the caret, the field the term is a value of, the whole text, and an 'AbortSignal', and returns the suggestions or a promise of them. 'filter-delay' waits for typing to rest before asking, and a later keystroke aborts a request still out. While a promise is pending, the panel shows 'loading-text' and a screen reader hears it, then the count. Choosing a suggestion writes its value over the term at the caret, and a finished 'field:value' is read into a chip as Enter would. Cancel its 'helix-select' to write it yourself.  '''js filter.source = async ({ field, term, signal }) => {   const response = await fetch('/values?field=${field}&q=${term}', { signal })   return response.json() } '''  **State.** Three things have three different owners:  - 'value' is the text. The user types, the element applies it, and 'input'   reports it. Setting 'value' seeds or corrects the text, and the next   keystroke overwrites it, even in React. To control the value, cancel   'helix-before-change' and write the value you want, as with every field in   this library. 'default-value' seeds the field. - 'open' is the suggestions panel. Cancel 'helix-before-open' or   'helix-before-close' to control it, and use 'default-open' to seed it. - Tokens are your elements in a slot and hold no state. A token goes when you   remove it from your markup after 'helix-dismiss'. A 'FilterChip' naming a   declared field works differently, because the picker holds what is ticked   and removing the chip alone would leave its value ticked in the hidden   menu. Its dismissal is treated as the field being filtered by nothing, so   it fires 'helix-facet' like every other change, and the chip goes when the   filter goes. Set 'chips' and the field adds, updates, and removes those   chips itself, from every 'helix-facet' you do not cancel.  **The suggestions you write are an import of their own.** A suggestion is an option, the Option family's, which the field does not register, so a page that slots one imports it beside the field:  '''js import '@fusion.dev/helix/filter-input' import '@fusion.dev/helix/option' '''  In development, a field holding an option nobody registered says so once the page has loaded, with the line to add. The options 'source' gives are drawn as this Option too, and need the same import. */
   "helix-headless-filter-input": DefineCustomElement<
     HelixHeadlessFilterInput,
     HelixHeadlessFilterInputVueProps,
@@ -19555,7 +19576,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessGraphVueProps,
     HelixHeadlessGraphVueEvents
   >;
-  /** A grid of cells, each colored by a tone. 'rows="1"' makes a status strip, and 'rows="7"' makes a contribution graph. GitHub's contribution graph uses five discrete levels, which a set of tones covers.  Color in a heatmap is per cell. In every other Helix chart, color is per series, so ninety differently colored cells would need ninety series.  **The data is a real '<table>' named by 'for'**, as in every Helix chart, and the table is the accessible representation. Hide it with 'data-hidden-visually', and screen readers still read it.  A cell takes its tone from its own 'data-tone', or from 'thresholds' and 'tones' applied to its value. 'data-tone' wins, so when you already know a day was degraded, you can set the tone directly.  **The headless tier does not resolve tone names.** A tone named 'success' writes '--heatmap-tone: var(--heatmap-tone-success)', and the styled tier or your own stylesheet defines that property. The headless tier does not use 'var(--helix-color-*)'.  **The strip is read by key.** It takes focus once it has cells. The up and down arrows move a cell, the left and right arrows move a column, which is a week with 'rows="7"', and Home and End go to the first and the last. The tooltip follows, the 'live' part says the cell's row in words, and Escape puts the tooltip away. PageUp and PageDown move a month, to the same day, where each row's header carries its date as a '<time datetime>', and four columns otherwise, which is four weeks with 'rows="7"'.  **The strip describes itself.** The 'overview' part says the busiest reading and the total of the readings drawn, "Busiest: 11 Jun, 12; Total 84", and the strip is described by it, as every chart is by its summary. Hide it visually. The 'summary' slot is still yours, for words of your own.  **'selection-mode' lets a reader select cells**: 'single' one at a time and 'multiple' any number. Space, Enter or a press selects the cell the keys or the pointer rest on, or lets it go, and under 'multiple' Shift with an arrow, Home, End, PageUp or PageDown takes in every cell from the last one pressed to where the key went. 'value' holds the selected days, separated by commas: each by its row's '<time datetime>', such as '2026-06-11', or by its row's name where the row carries no date. A change asks with 'helix-before-change' and tells with 'change', and the 'selection' part says how many are selected, in 'selection-label'.  **Keyboard.** The strip is one tab stop once it has cells.  | Key | What it does | |---|---| | Tab | Moves focus to the strip and shows the first cell. | | Down, Up | Moves to the next or the previous cell. | | Right, Left | Moves a column on or back, a week with 'rows="7"'. On a right-to-left page, Left moves on. | | Home, End | Moves to the first or the last cell. | | Page Down, Page Up | Moves a month on or back where the rows carry dates, and four columns otherwise. | | Enter, Space | Selects the cell, or lets it go, under 'selection-mode'. | | Shift with an arrow, Home, End, Page Up or Page Down | Selects every cell from the last one pressed to where the key went, under 'selection-mode="multiple"'. | | Escape | Puts the cell's tooltip away. | */
+  /** A grid of cells, each colored by a tone. 'rows="1"' makes a status strip, and 'rows="7"' makes a contribution graph. GitHub's contribution graph uses five discrete levels, which a set of tones covers.  Color in a heatmap is per cell. In every other Helix chart, color is per series, so ninety differently colored cells would need ninety series.  **The data is a real '<table>' named by 'for'**, as in every Helix chart, and the table is the accessible representation. Hide it with 'data-hidden-visually', and screen readers still read it.  A cell takes its tone from its own 'data-tone', or from 'thresholds' and 'tones' applied to its value. 'data-tone' wins, so when you already know a day was degraded, you can set the tone directly.  **The headless tier does not resolve tone names.** A tone named 'success' writes '--heatmap-tone: var(--heatmap-tone-success)', and the styled tier or your own stylesheet defines that property. The headless tier does not use 'var(--helix-color-*)'.  **The strip is read by key.** It takes focus once it has cells. The up and down arrows move a cell, the left and right arrows move a column, which is a week with 'rows="7"', and Home and End go to the first and the last. The tooltip follows, the 'live' part says the cell's row in words, and Escape puts the tooltip away. PageUp and PageDown move a month, to the same day, where each row's header carries its date as a '<time datetime>', and four columns otherwise, which is four weeks with 'rows="7"'.  **The strip describes itself.** The 'overview' part says the busiest reading and the total of the readings drawn, "Busiest: 11 Jun, 12; Total 84", and the strip is described by it, as every chart is by its summary. Hide it visually. The 'summary' slot is still yours, for words of your own.  **'selection-mode' lets a reader select cells**: 'single' one at a time and 'multiple' any number. Space, Enter or a press selects the cell the keys or the pointer rest on, or lets it go, and under 'multiple' Shift with an arrow, Home, End, PageUp or PageDown takes in every cell from the last one pressed to where the key went. 'value' holds the selected days, separated by commas: each by its row's '<time datetime>', such as '2026-06-11', or by its row's name where the row carries no date. A change asks with 'helix-before-change' and tells with 'change', and the 'selection' part says how many are selected, in 'selection-label'.  **Under 'selection-mode' the strip is a grid**, so the selection is state a reader is told rather than words alone: each column of the strip is a 'row', a week with 'rows="7"', and each cell a 'gridcell' named by its row in the table and carrying 'aria-selected'. The strip says 'aria-multiselectable' under 'multiple' and points at the cell the keys rest on with 'aria-activedescendant', so a screen reader reads that cell, and the 'live' part stays quiet. Without 'selection-mode' nothing is selectable, and the strip is an application with the readout, as every chart's plot is.  **Readings are sent as every chart sends them.** 'helix-reading-change' says each move of the reading, by pointer, tap or key, and 'helix-reading-press' a reading clicked, tapped, or pressed with Enter or Space, each with the row of the table in 'index'.  **Nothing to draw.** A table with no readings shows 'empty-text', "No readings", under the strip, and 'loading' shows 'loading-text' there until readings arrive. The 'empty' and 'loading' slots take markup in place of either, as on every chart.  **Keyboard.** The strip is one tab stop once it has cells.  | Key | What it does | |---|---| | Tab | Moves focus to the strip and shows the first cell. | | Down, Up | Moves to the next or the previous cell. | | Right, Left | Moves a column on or back, a week with 'rows="7"'. On a right-to-left page, Left moves on. | | Home, End | Moves to the first or the last cell. | | Page Down, Page Up | Moves a month on or back where the rows carry dates, and four columns otherwise. | | Enter, Space | Presses the cell, which sends 'helix-reading-press', and selects it or lets it go under 'selection-mode'. | | Shift with an arrow, Home, End, Page Up or Page Down | Selects every cell from the last one pressed to where the key went, under 'selection-mode="multiple"'. | | Escape | Puts the cell's tooltip away. | */
   "helix-headless-heatmap": DefineCustomElement<
     HelixHeadlessHeatmap,
     HelixHeadlessHeatmapVueProps,
@@ -19627,7 +19648,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessListVueProps,
     HelixHeadlessListVueEvents
   >;
-  /** The listbox is the control, and options are its items. A Select is a listbox with a trigger in front of it, a Combobox is a listbox with a text input, and a command palette is a listbox in a dialog. They differ only in what opens the list and what filters it.  With 'multiple' set, 'value' is a comma-separated string, like 'Checkbox.Group''s, because 'MixinControllerValue' holds a string. The form receives one entry per selected option, as a native '<select multiple>' sends it, so your server does not split on commas. An option's value may hold a comma: a run of the string that is an option's value is read as that one value, and the form sends it as one entry.  Selected and active are separate. The selected option is the value. The active option is where the keyboard is: the arrow keys move it, and 'aria-activedescendant' points to it while focus stays on the list.  **Keyboard.** The list is one tab stop, or its filter field is where there is one. In a single-choice list the highlight is the choice unless 'manual' is set; then Enter, Space or a click chooses.  | Key | What it does | |---|---| | Down, Up | Moves the highlight to the next or the previous option, round from the last to the first. With 'layout="grid"', to the option below or above, stopping at the edge. | | Right, Left | With 'layout="grid"', moves to the next or the previous option, mirrored right to left. In a filter field, moves the caret. | | Home, End | Moves to the first or the last option. In a filter field, moves the caret. | | Page Down, Page Up | Moves by as many options as the list shows at once. | | A letter or a word | Moves to the next option whose words start with what you typed. In a filter field, types it. | | Enter | Chooses the highlighted option, or follows it where it is a link. | | Space | Chooses the highlighted option, or with 'multiple' toggles it. In a filter field, types a space. | | Shift with Down or Up | With 'multiple', adds the option the highlight moves to. In a filter field, moves the highlight and leaves the value. | | Shift with Space | With 'multiple', adds every option from the one last chosen to the highlighted one. In a filter field, types a space. | | Shift with Home or End | With 'multiple', adds every option from the highlight to that end. In a filter field, hold Control as well. | | Control or Command with A | With 'multiple', chooses every option, or none where all are chosen. In a filter field, selects the text. | | Escape | In a filter field, clears the filter. | | Alt with Up or Down | In a 'reorderable' list, moves the highlighted option a place. Alt with Home or End moves it to either end. |  **ARIA.** The 'items' part is the 'listbox', named by the label and described by the hint and the message, with 'aria-multiselectable' under 'multiple', 'aria-required', 'aria-invalid', and 'aria-busy' while loading. Each option is an 'option' with 'aria-selected'. The list, or its filter field, points 'aria-activedescendant' at the highlighted option; the field is 'aria-autocomplete="list"' and controls the list.  An option with 'href' is a link: Enter or a press follows it and selects nothing, and moving onto it with the arrows does not follow it.  As a filter narrows the list, a screen reader hears how many options are left, such as "3 results", from 'result-label' and 'results-label'. A filter that leaves none says 'empty-text'.  **Moving options** is a separate import, '@fusion.dev/helix/listbox/reorder', so a list that never moves options carries none of its code. With it imported, 'reorderable' lets a reader move options:  - Alt with Up or Down moves the highlighted option a place, and Alt with   Home or End moves it to either end, as the APG's rearrangeable listbox   does. The highlight stays on it. - A pointer drags an option, with a drop indicator, and the list scrolls near   an edge. A press that does not travel still chooses the option. - A drop sends 'helix-before-reorder', which you can refuse, and then   'helix-reorder', whose 'keys' hold every value in the new order. **You   move the options**, or set 'items' in the new order: the list moves no   element of yours. - The list says each move in its 'live' region. The words are the   'moved-label', 'canceled-label', 'dropped-label', and 'picked-up-label'   attributes, which the import reads. - An option in a group moves within its group. Options do not move while a   filter narrows the list, under 'layout="grid"', or while the list is   disabled. */
+  /** The listbox is the control, and options are its items. A Select is a listbox with a trigger in front of it, a Combobox is a listbox with a text input, and a command palette is a listbox in a dialog. They differ only in what opens the list and what filters it.  With 'multiple' set, 'value' is a comma-separated string, like 'Checkbox.Group''s, because 'MixinControllerValue' holds a string. The form receives one entry per selected option, as a native '<select multiple>' sends it, so your server does not split on commas. An option's value may hold a comma: a run of the string that is an option's value is read as that one value, and the form sends it as one entry.  Selected and active are separate. The selected option is the value. The active option is where the keyboard is: the arrow keys move it, and 'aria-activedescendant' points to it while focus stays on the list.  **Keyboard.** The list is one tab stop, or its filter field is where there is one. In a single-choice list the highlight is the choice unless 'manual' is set; then Enter, Space or a click chooses.  | Key | What it does | |---|---| | Down, Up | Moves the highlight to the next or the previous option, round from the last to the first. With 'layout="grid"', to the option below or above, stopping at the edge. | | Right, Left | With 'layout="grid"', moves to the next or the previous option, mirrored right to left. In a filter field, moves the caret. | | Home, End | Moves to the first or the last option. In a filter field, moves the caret. | | Page Down, Page Up | Moves by as many options as the list shows at once. | | A letter or a word | Moves to the next option whose words start with what you typed. In a filter field, types it. | | Enter | Chooses the highlighted option, or follows it where it is a link. | | Space | Chooses the highlighted option, or with 'multiple' toggles it. In a filter field, types a space. | | Shift with Down or Up | With 'multiple', adds the option the highlight moves to. In a filter field, moves the highlight and leaves the value. | | Shift with Space | With 'multiple', adds every option from the one last chosen to the highlighted one. In a filter field, types a space. | | Shift with Home or End | With 'multiple', adds every option from the highlight to that end. In a filter field, hold Control as well. | | Control or Command with A | With 'multiple', chooses every option, or none where all are chosen. In a filter field, selects the text. | | Escape | In a filter field, clears the filter. | | Alt with Up or Down | In a 'reorderable' list, moves the highlighted option a place. Alt with Home or End moves it to either end. |  **ARIA.** The 'items' part is the 'listbox', named by the label and described by the hint and the message, with 'aria-multiselectable' under 'multiple', 'aria-required', 'aria-invalid', and 'aria-busy' while loading. Each option is an 'option' with 'aria-selected'. The list, or its filter field, points 'aria-activedescendant' at the highlighted option; the field is 'aria-autocomplete="list"' and controls the list.  An option with 'href' is a link: Enter or a press follows it and selects nothing, and moving onto it with the arrows does not follow it.  As a filter narrows the list, a screen reader hears how many options are left, such as "3 results", from 'result-label' and 'results-label'. A filter that leaves none says 'empty-text'.  **Moving options** is a separate import, '@fusion.dev/helix/listbox/reorder', so a list that never moves options carries none of its code. With it imported, 'reorderable' lets a reader move options:  - Alt with Up or Down moves the highlighted option a place, and Alt with   Home or End moves it to either end, as the APG's rearrangeable listbox   does. The highlight stays on it. - A pointer drags an option, with a drop indicator, and the list scrolls near   an edge. A press that does not travel still chooses the option. - A drop sends 'helix-before-reorder', which you can refuse, and then   'helix-reorder', whose 'keys' hold every value in the new order. **You   move the options**, or set 'items' in the new order: the list moves no   element of yours. - The list says each move in its 'live' region. The words are the   'moved-label', 'canceled-label', 'dropped-label', and 'picked-up-label'   attributes, which the import reads. - An option in a group moves within its group. Options do not move while a   filter narrows the list, under 'layout="grid"', or while the list is   disabled.  **The options are an import of their own.** An option you write is the Option family's, which the list does not register, so a page that writes one imports it beside the list:  '''js import '@fusion.dev/helix/listbox' import '@fusion.dev/helix/option' '''  In development, a list holding an option nobody registered says so once the page has loaded, with the line to add. The options 'items' draws are this Option too, and need the same import. */
   "helix-headless-listbox": DefineCustomElement<
     HelixHeadlessListbox,
     HelixHeadlessListboxVueProps,
@@ -19861,7 +19882,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessRatingVueProps,
     HelixHeadlessRatingVueEvents
   >;
-  /** A scatter chart shows how two measures relate. The table's first numeric column is measured across, every other numeric column is measured up, and each row is one point. A table of countries with an income column and a life expectancy column draws one point for each country. Each additional numeric column is another series, in its own color.  Both axes are labeled, because both positions are values. The ticks sit at round numbers, and the range extends to them.  'trend' draws each series' line of best fit, by least squares, across the plot in the series' color.  **'size-by' names a third measure, drawn as each point's size**, as a bubble chart does: 'size-by="Population"' takes that column out of the series and gives each point an area in proportion to its row's number there. The tooltip and the table still say the number.  The summary gives each series' correlation coefficient and its number of points. The table has every number, and the drawing is hidden from screen readers.  **The plot is read by key.** It takes focus, named by 'label' or the caption. The left and right arrows move from point to point, left to right across the plot, Home and End go to the first and the last, and the up and down arrows move among the series of a row. The tooltip sits on that point, the 'live' part says the row in words, and Escape puts the tooltip away.  Each point is a '<span>' placed by percentage over the drawing, as 'LineChart' places its end points, so points stay round when the drawing stretches.  The plot runs left to right in every text direction, as a number line does. The plot, its axes, and the axis names sit in a 'plane' part with 'dir="ltr"'. The axis names carry 'dir="auto"', so a name in Arabic or Hebrew reads in its own direction. The summary and the tooltip bubble follow the page's direction.  **A tap shows the reading under it**, and keeps it until a tap lands elsewhere. 'helix-reading-change' says each move of the reading, by pointer, tap or key, and 'helix-reading-press' says a reading was clicked, tapped, or pressed with Enter or Space, for a page that opens what a reading stands for.  **'data' takes the readings as data** where the page has no table to point 'for' at, in a table's shape: the column headings, then one row per reading with its label first. A table is still the better source where the page can show one, since it reads before any script runs.  **A chart with nothing to draw says so.** A table with no readings shows 'empty-text', "No readings", in the plot, and 'loading' shows 'loading-text' there until readings arrive. The 'empty' and 'loading' slots take markup in their place, such as a link to add the first reading.  **Keyboard.** The plot is one tab stop.  | Key | What it does | |---|---| | Tab | Moves focus to the plot and shows the first reading. | | Right, Left | Moves to the next or the previous point, left to right across the plot. On a right-to-left page, Left moves to the next. | | Down, Up | Moves among the series of the point. With one series, moves to the next or the previous point. | | Home, End | Moves to the first or the last point. | | Page Down, Page Up | Moves a tenth of the points on or back. | | Enter, Space | Presses the point shown, which sends 'helix-reading-press'. | | Escape | Puts the point and its tooltip away. | */
+  /** A scatter chart shows how two measures relate. The table's first numeric column is measured across, every other numeric column is measured up, and each row is one point. A table of countries with an income column and a life expectancy column draws one point for each country. Each additional numeric column is another series, in its own color.  Both axes are labeled, because both positions are values. The ticks sit at round numbers, and the range extends to them.  'trend' draws each series' line of best fit, by least squares, across the plot in the series' color.  **'size-by' names a third measure, drawn as each point's size**, as a bubble chart does: 'size-by="Population"' takes that column out of the series and gives each point an area in proportion to its row's number there. The tooltip and the table still say the number.  The summary gives each series' correlation coefficient and its number of points. The table has every number, and the drawing is hidden from screen readers.  **The plot is read by key.** It takes focus, named by 'label' or the caption. The left and right arrows move from point to point, left to right across the plot, Home and End go to the first and the last, and the up and down arrows move among the series of a row. The tooltip sits on that point, the 'live' part says the row in words, and Escape puts the tooltip away.  Each point is a '<span>' placed by percentage over the drawing, as 'LineChart' places its end points, so points stay round when the drawing stretches.  The plot runs left to right in every text direction, as a number line does. The plot, its axes, and the axis names sit in a 'plane' part with 'dir="ltr"', and the arrow keys follow the drawing: Right moves to the next point on a right-to-left page too. The axis names carry 'dir="auto"', so a name in Arabic or Hebrew reads in its own direction. The summary and the tooltip bubble follow the page's direction.  **A tap shows the reading under it**, and keeps it until a tap lands elsewhere. 'helix-reading-change' says each move of the reading, by pointer, tap or key, and 'helix-reading-press' says a reading was clicked, tapped, or pressed with Enter or Space, for a page that opens what a reading stands for.  **'data' takes the readings as data** where the page has no table to point 'for' at, in a table's shape: the column headings, then one row per reading with its label first. A table is still the better source where the page can show one, since it reads before any script runs.  **A chart with nothing to draw says so.** A table with no readings shows 'empty-text', "No readings", in the plot, and 'loading' shows 'loading-text' there until readings arrive. The 'empty' and 'loading' slots take markup in their place, such as a link to add the first reading.  **Keyboard.** The plot is one tab stop.  | Key | What it does | |---|---| | Tab | Moves focus to the plot and shows the first reading. | | Right, Left | Moves to the next or the previous point, left to right across the plot, on a right-to-left page too. | | Down, Up | Moves among the series of the point. With one series, moves to the next or the previous point. | | Home, End | Moves to the first or the last point. | | Page Down, Page Up | Moves a tenth of the points on or back. | | Enter, Space | Presses the point shown, which sends 'helix-reading-press'. | | Escape | Puts the point and its tooltip away. | */
   "helix-headless-scatter-chart": DefineCustomElement<
     HelixHeadlessScatterChart,
     HelixHeadlessScatterChartVueProps,
@@ -19873,7 +19894,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessScrollAreaVueProps,
     HelixHeadlessScrollAreaVueEvents
   >;
-  /** A trigger that opens a 'Listbox'. The list is the same element you can use on its own, with the same keyboard behavior, filtering, and multi-select rules. Select adds a trigger that shows what is chosen, a floating surface, and a place for focus to return to when the list closes.  Your options stay in your light DOM and are slotted through into the listbox, so the listbox looks through slots to find them. Write them as 'Option', group them in 'Option.Group', and divide them with 'Option.Separator'. Importing Select registers all three in the same tier. For a list too long to draw whole, set 'items' instead: the list draws only the options in sight, as Listbox's 'items' does, and the trigger, its keys and the form read the whole set.  'Select' owns the value, passes it down to the listbox, and takes changes back, so the value lives in one place. With 'multiple', the value is the chosen values joined with commas, and the form receives one entry for each. An option's value may hold a comma, and it is read as one value.  Set 'valueContent' to draw the trigger's content from the chosen options, and several chosen options are written as a list in the reader's language.  **Keyboard.** On the closed trigger:  | Key | What it does | |---|---| | Down, Enter, Space | Opens the list on the chosen option, or the first. | | Up | Opens the list on the chosen option, or the last. | | Home, End | Opens the list on the first or the last option. | | Left, Right | Chooses the option before or after the chosen one without opening, as React Aria's Select does. On a right-to-left page Left chooses the one after. | | A letter or a word | Chooses the option whose words start with what you typed, as a native '<select>' does. With 'multiple', opens the list on it. |  In the open list, which is a 'Listbox':  | Key | What it does | |---|---| | Down, Up, Home, End, Page Down, Page Up | Moves the highlight. | | A letter or a word | Moves the highlight to the next option whose words start with what you typed. | | Enter, Space | Chooses the highlighted option and closes the list. With 'multiple', toggles it and leaves the list open. | | Escape | Closes the list and puts focus back on the trigger. | | Tab | Closes the list and moves on. |  A choice made on the closed trigger is said aloud on Apple devices, where VoiceOver does not read the trigger's new name.  **ARIA.** The trigger is a 'button' with 'aria-haspopup="listbox"' and 'aria-expanded', named by the label and then the chosen words, as a native '<select>' is. The list is the listbox 'Listbox' describes, named by the label, or by 'list-label' where there is none.  Set 'autocomplete' to let a browser's autofill choose, as a native '<select>' with the same attribute would. */
+  /** A trigger that opens a 'Listbox'. The list is the same element you can use on its own, with the same keyboard behavior, filtering, and multi-select rules. Select adds a trigger that shows what is chosen, a floating surface, and a place for focus to return to when the list closes.  Your options stay in your light DOM and are slotted through into the listbox, so the listbox looks through slots to find them. Write them as 'Option', group them in 'Option.Group', and divide them with 'Option.Separator'. Importing Select registers all three in the same tier. For a list too long to draw whole, set 'items' instead: the list draws only the options in sight, as Listbox's 'items' does, and the trigger, its keys and the form read the whole set.  'Select' owns the value, passes it down to the listbox, and takes changes back, so the value lives in one place. With 'multiple', the value is the chosen values joined with commas, and the form receives one entry for each. An option's value may hold a comma, and it is read as one value.  Set 'valueContent' to draw the trigger's content from the chosen options, and several chosen options are written as a list in the reader's language.  **Keyboard.** On the closed trigger:  | Key | What it does | |---|---| | Down, Enter, Space | Opens the list on the chosen option, or the first. | | Up | Opens the list on the chosen option, or the last. | | Home, End | Opens the list on the first or the last option. | | Left, Right | Chooses the option before or after the chosen one without opening, as React Aria's Select does. On a right-to-left page Left chooses the one after. | | A letter or a word | Chooses the option whose words start with what you typed, as a native '<select>' does. With 'multiple', opens the list on it. |  In the open list, which is a 'Listbox':  | Key | What it does | |---|---| | Down, Up, Home, End, Page Down, Page Up | Moves the highlight. | | A letter or a word | Moves the highlight to the next option whose words start with what you typed. | | Enter, Space | Chooses the highlighted option and closes the list. With 'multiple', toggles it and leaves the list open. | | Escape | Closes the list and puts focus back on the trigger. | | Tab | Closes the list and moves on. |  A choice made on the closed trigger is said aloud on Apple devices, where VoiceOver does not read the trigger's new name.  **ARIA.** The trigger is a 'button' with 'aria-haspopup="listbox"' and 'aria-expanded', named by the label and then the chosen words, as a native '<select>' is. The list is the listbox 'Listbox' describes, named by the label, or by 'list-label' where there is none.  Set 'autocomplete' to let a browser's autofill choose, as a native '<select>' with the same attribute would.  **The options are an import of their own.** An option is the Option family's, which the select does not register, so a page that writes one imports it beside the select:  '''js import '@fusion.dev/helix/select' import '@fusion.dev/helix/option' '''  In development, a select holding an option nobody registered says so once the page has loaded, with the line to add. */
   "helix-headless-select": DefineCustomElement<
     HelixHeadlessSelect,
     HelixHeadlessSelectVueProps,

package/types/words.d.ts

@@ -1213,6 +1213,13 @@ declare module '@fusion.dev/helix-core' {
        * English: `A range is two dates.`
        */
       rangeLengthMessage: Message
+      /**
+       * The message shown when a range ends before it starts. `{start}` is
+       * replaced with the start, written the way the field writes dates.
+       *
+       * English: `Choose an end on or after {start}.`
+       */
+      rangeOrderMessage: Message
       /**
        * The message shown when a date is after `max`. `{max}` is replaced with
        * `max`, written the way the field writes dates.
@@ -1347,6 +1354,13 @@ declare module '@fusion.dev/helix-core' {
        * English: `Earlier years`
        */
       previousYearsLabel: Message
+      /**
+       * The validation message for a range that ends before it starts. `{start}`
+       * is replaced with the start, written as a date in `locale`.
+       *
+       * English: `Choose an end on or after {start}.`
+       */
+      rangeOrderMessage: Message
       /**
        * The validation message for a date after `max`. `{max}` is replaced with
        * `max`, written as a date in `locale`.
@@ -1815,11 +1829,19 @@ declare module '@fusion.dev/helix-core' {
        */
       busiestLabel: Message
       /**
-       * Shown when the table has no readings in it.
+       * The words shown in place of the drawing when the table has no readings,
+       * and the fallback of the `empty` slot.
        *
        * English: `No readings`
        */
       emptyText: Message
+      /**
+       * The words shown in place of the drawing while `loading` is set and
+       * there are no readings yet, and the fallback of the `loading` slot.
+       *
+       * English: `Loading readings`
+       */
+      loadingText: Message
       /**
        * The `overview`'s sentence. `{busiestLabel}` and `{totalLabel}` are
        * `busiest-label` and `total-label`, `{busiest}` the busiest reading's name
@@ -1838,9 +1860,7 @@ declare module '@fusion.dev/helix-core' {
        */
       positionLabel: Message
       /**
-       * What the readout adds for a selected cell, under `selection-mode`, after
-       * where the cell stands: "Day 1: 0 (1 of 14, selected)". Empty adds
-       * nothing.
+       * What the readout added for a selected cell, under `selection-mode`.
        *
        * English: `selected`
        */
@@ -2458,9 +2478,10 @@ declare module '@fusion.dev/helix-core' {
     }
     'helix-notification': {
       /**
-       * The dismiss control's label, read by screen readers.
+       * The dismiss control's name, read by screen readers, with `{label}` for the
+       * row's own words.
        *
-       * English: `Dismiss`
+       * English: `Dismiss {label}`
        */
       dismissLabel: Message
       /**