@fusion.dev/helix-headless 0.165.0 → 0.166.0

package/types/jsx.d.ts

@@ -6075,9 +6075,18 @@ export type HelixHeadlessCodeBlockElementEvent<E = Event> = TypedEvent<
   HelixHeadlessCodeBlock,
   E
 >;
+/** `helix-before-change` event type */
+export type HelixHeadlessCodeBlockHelixBeforeChangeElementEvent =
+  HelixHeadlessCodeBlockElementEvent<HelixBeforeChangeEvent>;
 /** `helix-before-toggle` event type */
 export type HelixHeadlessCodeBlockHelixBeforeToggleElementEvent =
   HelixHeadlessCodeBlockElementEvent<HelixBeforeToggleEvent>;
+/** `helix-copy` event type */
+export type HelixHeadlessCodeBlockHelixCopyElementEvent =
+  HelixHeadlessCodeBlockElementEvent<HelixCopyEvent>;
+/** `helix-copy-error` event type */
+export type HelixHeadlessCodeBlockHelixCopyErrorElementEvent =
+  HelixHeadlessCodeBlockElementEvent<HelixCopyErrorEvent>;
 /** `helix-toggle` event type */
 export type HelixHeadlessCodeBlockHelixToggleElementEvent =
   HelixHeadlessCodeBlockElementEvent<HelixToggleEvent>;
@@ -6149,6 +6158,15 @@ block lays out. Not for a diff, whose files each scroll on their own. */
   "expand-label"?: (HelixHeadlessCodeBlock["expandLabel"]) | undefined;
   /** The expand button's words while the cap hides lines. */
   expandLabel?: (HelixHeadlessCodeBlock["expandLabel"]) | undefined;
+  /** The name of the file shown, where the block holds several Code Blocks:
+the `label` of one, or its `language` without one.
+
+Unset, or a name no file has, shows the first. */
+  file?: (HelixHeadlessCodeBlock["file"]) | undefined;
+  /** The name of the file tabs, read by screen readers. */
+  "files-label"?: (HelixHeadlessCodeBlock["filesLabel"]) | undefined;
+  /** The name of the file tabs, read by screen readers. */
+  filesLabel?: (HelixHeadlessCodeBlock["filesLabel"]) | undefined;
   /** The words of a button that hides a run of unchanged lines it showed, in a
 diff with `context-lines`. `{count}` is how many, and each language
 writes the forms it has. */
@@ -6283,10 +6301,22 @@ the script still has it. Not called on a server, which has no code to
 read, nor for a diff. */
   highlight?: (HelixHeadlessCodeBlock["highlight"]) | undefined;
 
+  /** A file tab showed its file, whose name `file` now holds. */
+  onchange?: ((e: HelixHeadlessCodeBlockElementEvent) => void) | undefined;
+  /** A file tab is about to show its file, with the file's name in `detail.value`. Cancelable: cancel it to keep the file shown. */
+  "onhelix-before-change"?: ((
+    e: HelixHeadlessCodeBlockHelixBeforeChangeElementEvent,
+  ) => void) | undefined;
   /** The wrap button was pressed, with the `wrap` it asks for in `detail.checked`. Cancelable: cancel it to keep the lines as they are. */
   "onhelix-before-toggle"?: ((
     e: HelixHeadlessCodeBlockHelixBeforeToggleElementEvent,
   ) => void) | undefined;
+  /** The copy button put the code on the clipboard, with the text in `detail.value`. */
+  "onhelix-copy"?: ((e: HelixHeadlessCodeBlockHelixCopyElementEvent) => void) | undefined;
+  /** A press on the copy button put nothing on the clipboard: the browser did not allow the write, or there was no code. */
+  "onhelix-copy-error"?: ((
+    e: HelixHeadlessCodeBlockHelixCopyErrorElementEvent,
+  ) => void) | undefined;
   /** Fired after the wrap button changed `wrap`, with the new value in `detail.checked`. */
   "onhelix-toggle"?: ((e: HelixHeadlessCodeBlockHelixToggleElementEvent) => void) | undefined;
 };
@@ -6358,6 +6388,15 @@ block lays out. Not for a diff, whose files each scroll on their own. */
   "attr:expand-label"?: (HelixHeadlessCodeBlock["expandLabel"]) | undefined;
   /** The expand button's words while the cap hides lines. */
   "prop:expandLabel"?: (HelixHeadlessCodeBlock["expandLabel"]) | undefined;
+  /** The name of the file shown, where the block holds several Code Blocks:
+the `label` of one, or its `language` without one.
+
+Unset, or a name no file has, shows the first. */
+  "prop:file"?: (HelixHeadlessCodeBlock["file"]) | undefined;
+  /** The name of the file tabs, read by screen readers. */
+  "attr:files-label"?: (HelixHeadlessCodeBlock["filesLabel"]) | undefined;
+  /** The name of the file tabs, read by screen readers. */
+  "prop:filesLabel"?: (HelixHeadlessCodeBlock["filesLabel"]) | undefined;
   /** The words of a button that hides a run of unchanged lines it showed, in a
 diff with `context-lines`. `{count}` is how many, and each language
 writes the forms it has. */
@@ -6491,10 +6530,22 @@ in the slot, so the copy button copies it as written and a reader without
 the script still has it. Not called on a server, which has no code to
 read, nor for a diff. */
   "prop:highlight"?: (HelixHeadlessCodeBlock["highlight"]) | undefined;
+  /** A file tab showed its file, whose name `file` now holds. */
+  "on:change"?: ((e: HelixHeadlessCodeBlockElementEvent) => void) | undefined;
+  /** A file tab is about to show its file, with the file's name in `detail.value`. Cancelable: cancel it to keep the file shown. */
+  "on:helix-before-change"?: ((
+    e: HelixHeadlessCodeBlockHelixBeforeChangeElementEvent,
+  ) => void) | undefined;
   /** The wrap button was pressed, with the `wrap` it asks for in `detail.checked`. Cancelable: cancel it to keep the lines as they are. */
   "on:helix-before-toggle"?: ((
     e: HelixHeadlessCodeBlockHelixBeforeToggleElementEvent,
   ) => void) | undefined;
+  /** The copy button put the code on the clipboard, with the text in `detail.value`. */
+  "on:helix-copy"?: ((e: HelixHeadlessCodeBlockHelixCopyElementEvent) => void) | undefined;
+  /** A press on the copy button put nothing on the clipboard: the browser did not allow the write, or there was no code. */
+  "on:helix-copy-error"?: ((
+    e: HelixHeadlessCodeBlockHelixCopyErrorElementEvent,
+  ) => void) | undefined;
   /** Fired after the wrap button changed `wrap`, with the new value in `detail.checked`. */
   "on:helix-toggle"?: ((
     e: HelixHeadlessCodeBlockHelixToggleElementEvent,
@@ -20863,6 +20914,9 @@ export type HelixHeadlessMenuHelixBeforeCloseElementEvent =
 /** `helix-before-open` event type */
 export type HelixHeadlessMenuHelixBeforeOpenElementEvent =
   HelixHeadlessMenuElementEvent<HelixBeforeOpenEvent>;
+/** `helix-filter` event type */
+export type HelixHeadlessMenuHelixFilterElementEvent =
+  HelixHeadlessMenuElementEvent<HelixFilterEvent>;
 /** `helix-select` event type */
 export type HelixHeadlessMenuHelixSelectElementEvent =
   HelixHeadlessMenuElementEvent<HelixSelectEvent>;
@@ -20890,6 +20944,18 @@ Ark UI's `closeOnSelect` does. A row's own `close-on-select` wins over this. */
   /** Whether the menu is the trigger's context menu: it opens where the reader
 asks for one, with a right-click, a long press, Shift+F10 or the menu key. */
   context?: (HelixHeadlessMenu["context"]) | undefined;
+  /** The text the rows are filtered by, which the filter field holds.
+
+Cleared as the menu closes and as a submenu opens or closes, so each page
+starts with every row showing. */
+  filter?: (HelixHeadlessMenu["filter"]) | undefined;
+  /** Whether the menu shows a field above its rows that narrows them as the
+reader types, with focus staying in the field. */
+  filterable?: (HelixHeadlessMenu["filterable"]) | undefined;
+  /** The filter field's name and placeholder. */
+  "filter-label"?: (HelixHeadlessMenu["filterLabel"]) | undefined;
+  /** The filter field's name and placeholder. */
+  filterLabel?: (HelixHeadlessMenu["filterLabel"]) | undefined;
   /** Accessible name for the surface.
 
 Empty by default, which names the surface by its trigger, so a menu opened
@@ -20902,6 +20968,10 @@ to open the menu. Translate it with the rest of your interface. */
   /** The description a trigger gives under `open-on="long-press"`, saying how
 to open the menu. Translate it with the rest of your interface. */
   longPressLabel?: (HelixHeadlessMenu["longPressLabel"]) | undefined;
+  /** The text shown when the filter keeps no rows. */
+  "no-results-text"?: (HelixHeadlessMenu["noResultsText"]) | undefined;
+  /** The text shown when the filter keeps no rows. */
+  noResultsText?: (HelixHeadlessMenu["noResultsText"]) | undefined;
   /** Space between the trigger and the surface, in pixels. */
   offset?: (HelixHeadlessMenu["offset"]) | undefined;
   /** What opens the menu from its trigger. `long-press` leaves a press to the
@@ -20950,6 +21020,13 @@ hydration, or diffed by a framework, it comes back holding whatever the
 last reader did rather than what the author wrote. `:state(open)` carries
 the resolved state for stylesheets, which is what the mirror is for. */
   open?: (HelixHeadlessMenu["open"]) | undefined;
+  /** Whether a row is kept by the filter: a function given the row's words and
+the filter, trimmed, that returns `true` to keep it showing, as React
+Aria's `Autocomplete` takes `filter`. See Listbox's `filterMatch`.
+
+Absent, a row is kept where its words hold the filter, in any case. A
+property only, there being no way to write a function in markup. */
+  filterMatch?: (HelixHeadlessMenu["filterMatch"]) | undefined;
 
   /** The menu is about to close. Cancelable: cancel it to keep it open. */
   "onhelix-before-close"?: ((
@@ -20959,6 +21036,8 @@ the resolved state for stylesheets, which is what the mirror is for. */
   "onhelix-before-open"?: ((
     e: HelixHeadlessMenuHelixBeforeOpenElementEvent,
   ) => void) | undefined;
+  /** The text in the filter field changed, with the new text in `detail.value`. Cancelable: cancel it to keep every row showing and narrow the rows yourself. */
+  "onhelix-filter"?: ((e: HelixHeadlessMenuHelixFilterElementEvent) => void) | undefined;
   /** An item was chosen. Cancelable: cancel it to keep the menu open. */
   "onhelix-select"?: ((e: HelixHeadlessMenuHelixSelectElementEvent) => void) | undefined;
   /** The menu opened or closed. The event carries `newState` and `oldState`. */
@@ -20985,6 +21064,18 @@ Ark UI's `closeOnSelect` does. A row's own `close-on-select` wins over this. */
   /** Whether the menu is the trigger's context menu: it opens where the reader
 asks for one, with a right-click, a long press, Shift+F10 or the menu key. */
   "prop:context"?: (HelixHeadlessMenu["context"]) | undefined;
+  /** The text the rows are filtered by, which the filter field holds.
+
+Cleared as the menu closes and as a submenu opens or closes, so each page
+starts with every row showing. */
+  "prop:filter"?: (HelixHeadlessMenu["filter"]) | undefined;
+  /** Whether the menu shows a field above its rows that narrows them as the
+reader types, with focus staying in the field. */
+  "prop:filterable"?: (HelixHeadlessMenu["filterable"]) | undefined;
+  /** The filter field's name and placeholder. */
+  "attr:filter-label"?: (HelixHeadlessMenu["filterLabel"]) | undefined;
+  /** The filter field's name and placeholder. */
+  "prop:filterLabel"?: (HelixHeadlessMenu["filterLabel"]) | undefined;
   /** Accessible name for the surface.
 
 Empty by default, which names the surface by its trigger, so a menu opened
@@ -20997,6 +21088,10 @@ to open the menu. Translate it with the rest of your interface. */
   /** The description a trigger gives under `open-on="long-press"`, saying how
 to open the menu. Translate it with the rest of your interface. */
   "prop:longPressLabel"?: (HelixHeadlessMenu["longPressLabel"]) | undefined;
+  /** The text shown when the filter keeps no rows. */
+  "attr:no-results-text"?: (HelixHeadlessMenu["noResultsText"]) | undefined;
+  /** The text shown when the filter keeps no rows. */
+  "prop:noResultsText"?: (HelixHeadlessMenu["noResultsText"]) | undefined;
   /** Space between the trigger and the surface, in pixels. */
   "prop:offset"?: (HelixHeadlessMenu["offset"]) | undefined;
   /** What opens the menu from its trigger. `long-press` leaves a press to the
@@ -21045,6 +21140,13 @@ hydration, or diffed by a framework, it comes back holding whatever the
 last reader did rather than what the author wrote. `:state(open)` carries
 the resolved state for stylesheets, which is what the mirror is for. */
   "prop:open"?: (HelixHeadlessMenu["open"]) | undefined;
+  /** Whether a row is kept by the filter: a function given the row's words and
+the filter, trimmed, that returns `true` to keep it showing, as React
+Aria's `Autocomplete` takes `filter`. See Listbox's `filterMatch`.
+
+Absent, a row is kept where its words hold the filter, in any case. A
+property only, there being no way to write a function in markup. */
+  "prop:filterMatch"?: (HelixHeadlessMenu["filterMatch"]) | undefined;
   /** The menu is about to close. Cancelable: cancel it to keep it open. */
   "on:helix-before-close"?: ((
     e: HelixHeadlessMenuHelixBeforeCloseElementEvent,
@@ -21053,6 +21155,8 @@ the resolved state for stylesheets, which is what the mirror is for. */
   "on:helix-before-open"?: ((
     e: HelixHeadlessMenuHelixBeforeOpenElementEvent,
   ) => void) | undefined;
+  /** The text in the filter field changed, with the new text in `detail.value`. Cancelable: cancel it to keep every row showing and narrow the rows yourself. */
+  "on:helix-filter"?: ((e: HelixHeadlessMenuHelixFilterElementEvent) => void) | undefined;
   /** An item was chosen. Cancelable: cancel it to keep the menu open. */
   "on:helix-select"?: ((e: HelixHeadlessMenuHelixSelectElementEvent) => void) | undefined;
   /** The menu opened or closed. The event carries `newState` and `oldState`. */
@@ -40920,6 +41024,18 @@ export type CustomElements = {
    * keeps hydration clean, and draws the diff once it can read the content. Diff
    * mode is experimental. The rest of the family is stable.
    *
+   * **Several blocks are files**, one shown at a time under a row of tabs, as
+   * Sandbox shows its source panes. Put Code Blocks in the default slot of a
+   * Code Block, and each is a file named on its tab by its `label` or, without
+   * one, its `language`. `file` holds the name of the file shown. The tabs are a
+   * tab list: the arrow keys move to a tab and show its file, the two swapping
+   * on a right-to-left page, and Home and End go to the first and the last.
+   * Choosing one sends `helix-before-change` with the file's name, which you can
+   * cancel, and `change` once `file` holds it. The files not shown carry
+   * `hidden`, and the one shown draws no name of its own, its tab naming it. One
+   * block draws no tabs. A server cannot see the blocks inside, so the client
+   * draws the tabs once it upgrades.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -40953,6 +41069,11 @@ export type CustomElements = {
    * the button is drawn only while the cap hides something, measured as the
    * block lays out. Not for a diff, whose files each scroll on their own.
    * - `expand-label`/`expandLabel`: The expand button's words while the cap hides lines.
+   * - `file`: The name of the file shown, where the block holds several Code Blocks:
+   * the `label` of one, or its `language` without one.
+   *
+   * Unset, or a name no file has, shows the first.
+   * - `files-label`/`filesLabel`: The name of the file tabs, read by screen readers.
    * - `hide-unchanged-label`/`hideUnchangedLabel`: The words of a button that hides a run of unchanged lines it showed, in a
    * diff with `context-lines`. `{count}` is how many, and each language
    * writes the forms it has.
@@ -41059,7 +41180,11 @@ export type CustomElements = {
    *
    * Events that will be emitted by the component.
    *
+   * - `change`: A file tab showed its file, whose name `file` now holds.
+   * - `helix-before-change`: A file tab is about to show its file, with the file's name in `detail.value`. Cancelable: cancel it to keep the file shown.
    * - `helix-before-toggle`: The wrap button was pressed, with the `wrap` it asks for in `detail.checked`. Cancelable: cancel it to keep the lines as they are.
+   * - `helix-copy`: The copy button put the code on the clipboard, with the text in `detail.value`.
+   * - `helix-copy-error`: A press on the copy button put nothing on the clipboard: the browser did not allow the write, or there was no code.
    * - `helix-toggle`: Fired after the wrap button changed `wrap`, with the new value in `detail.checked`.
    *
    * ## Slots
@@ -41108,6 +41233,8 @@ export type CustomElements = {
    * - `copy-tooltip-top`: The tooltip while it is above the copy button. Applied with `copy-tooltip`.
    * - `expand`: The button under a capped block that shows every line, and fewer again. Drawn when `expandable` is set and the cap hides something.
    * - `file`: In a diff, one file's header and block.
+   * - `file-tab`: One file tab, `aria-selected` while its file is shown.
+   * - `files`: The file tabs over the blocks a block holds, where there are several.
    * - `filler`: In a split diff, the empty row opposite a line the other side does not have.
    * - `fold`: In a diff with `context-lines`, the button that shows a folded run of unchanged lines, and hides it again, saying which with `aria-expanded`.
    * - `frame`: The code, and the copy button beside it where there is no header.
@@ -41130,6 +41257,7 @@ export type CustomElements = {
    * These can be used to apply styling when a component is in a given state.
    *
    * - `expanded`: The expand button has shown every line of a capped block.
+   * - `tabbed`: The block is one of several files under another block's tabs, which name it, so it draws no name of its own.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
   "helix-headless-code-block": Partial<
@@ -46339,6 +46467,7 @@ export type CustomElements = {
    * - `menu-header`: The bar above a field's page, with the back button and the field's name.
    * - `menu-live`: The inner menu's `live` part: the region that screen readers announce the empty and loading messages from.
    * - `menu-loading`: Shown while the fields are loading.
+   * - `menu-search-field`: The inner menu's filter field, drawn with `filterable`.
    * - `menu-surface`: The floating panel the menu is drawn on.
    * - `menu-title`: The name of the field whose page is showing.
    *
@@ -51779,6 +51908,12 @@ export type CustomElements = {
    * slots, so a mark of your own replaces either by being slotted. Neither is
    * read as part of the row's name.
    *
+   * In a menu with `filterable`, focus stays in the menu's filter field and the
+   * row the arrow keys reach is highlighted: the field names it with
+   * `aria-activedescendant`, the row carries its role on its host so the field
+   * can point at it, and `:state(highlighted)` says which row it is. A row with
+   * an `href` then follows its link without an anchor, as `Option` does.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -51931,6 +52066,7 @@ export type CustomElements = {
    * These can be used to apply styling when a component is in a given state.
    *
    * - `checked`: The row is checked.
+   * - `highlighted`: In a menu with `filterable`, the arrow keys or the pointer reached the row while focus stays in the filter field.
    * - `submenu-mark`: Under `submenus="flyout"`, a row in this row's submenu can be ticked or opens a submenu, so the submenu keeps its trailing column.
    * - `submenu-start`: Under `submenus="flyout"`, a row in this row's submenu has content before its label, so the submenu keeps its leading column.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
@@ -52000,6 +52136,21 @@ export type CustomElements = {
    * opens it from the keyboard, and the trigger is described by
    * `long-press-label`, which says so.
    *
+   * **A filter field.** With `filterable`, the menu opens with focus in a field
+   * above its rows, and typing narrows the rows of the page the keys move in,
+   * as React Aria's `Autocomplete` around a `Menu` does. A row is kept where its
+   * words hold the filter, in any case, or where `filterMatch` says so. Each
+   * page starts unfiltered, and the filter is cleared as the menu closes. Where
+   * typing keeps no row, the menu shows `no-results-text`. Focus stays in the
+   * field: Up and Down Arrow move the highlight through the rows that are left,
+   * Enter chooses the highlighted row, Right Arrow opens its submenu, Left Arrow
+   * on a submenu goes back, and Escape clears the filter and then closes the
+   * menu. Home, End and the other keys move the caret and type. The field names
+   * the highlighted row with `aria-activedescendant`, and the rows are a `menu`
+   * after the field. Cancel `helix-filter` to keep every row
+   * showing and narrow the rows yourself, such as by replacing them with rows
+   * from a server.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -52012,6 +52163,13 @@ export type CustomElements = {
    * Ark UI's `closeOnSelect` does. A row's own `close-on-select` wins over this.
    * - `context`: Whether the menu is the trigger's context menu: it opens where the reader
    * asks for one, with a right-click, a long press, Shift+F10 or the menu key.
+   * - `filter`: The text the rows are filtered by, which the filter field holds.
+   *
+   * Cleared as the menu closes and as a submenu opens or closes, so each page
+   * starts with every row showing.
+   * - `filterable`: Whether the menu shows a field above its rows that narrows them as the
+   * reader types, with focus staying in the field.
+   * - `filter-label`/`filterLabel`: The filter field's name and placeholder.
    * - `label`: Accessible name for the surface.
    *
    * Empty by default, which names the surface by its trigger, so a menu opened
@@ -52019,6 +52177,7 @@ export type CustomElements = {
    * `aria-labelledby` on the host names it too, and wins over both.
    * - `long-press-label`/`longPressLabel`: The description a trigger gives under `open-on="long-press"`, saying how
    * to open the menu. Translate it with the rest of your interface.
+   * - `no-results-text`/`noResultsText`: The text shown when the filter keeps no rows.
    * - `offset`: Space between the trigger and the surface, in pixels.
    * - `open-on`/`openOn`: What opens the menu from its trigger. `long-press` leaves a press to the
    * trigger's own action and opens the menu on a press held for half a second,
@@ -52048,6 +52207,12 @@ export type CustomElements = {
    * hydration, or diffed by a framework, it comes back holding whatever the
    * last reader did rather than what the author wrote. `:state(open)` carries
    * the resolved state for stylesheets, which is what the mirror is for.
+   * - `filterMatch`: Whether a row is kept by the filter: a function given the row's words and
+   * the filter, trimmed, that returns `true` to keep it showing, as React
+   * Aria's `Autocomplete` takes `filter`. See Listbox's `filterMatch`.
+   *
+   * Absent, a row is kept where its words hold the filter, in any case. A
+   * property only, there being no way to write a function in markup. (property only)
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -52075,6 +52240,7 @@ export type CustomElements = {
    *
    * - `helix-before-close`: The menu is about to close. Cancelable: cancel it to keep it open.
    * - `helix-before-open`: The menu is about to open. Cancelable: cancel it to keep it closed.
+   * - `helix-filter`: The text in the filter field changed, with the new text in `detail.value`. Cancelable: cancel it to keep every row showing and narrow the rows yourself.
    * - `helix-select`: An item was chosen. Cancelable: cancel it to keep the menu open.
    * - `toggle`: The menu opened or closed. The event carries `newState` and `oldState`.
    *
@@ -52083,6 +52249,7 @@ export type CustomElements = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: The items.
+   * - `no-results`: What the menu shows when the filter keeps no rows, for content richer than `no-results-text`.
    * - `trigger`: The control that opens the menu, or with `context` the area a context menu opens over.
    *
    * ## Methods
@@ -52118,7 +52285,8 @@ export type CustomElements = {
    * - `header`: The bar above a submenu, holding the way back and its name.
    * - `live`: A live region that repeats the empty and loading text, so screen readers announce it when it changes. Visually hidden in the styled tier.
    * - `loading`: The text shown while the items are loading.
-   * - `surface`: The floating panel the menu is drawn on.
+   * - `search-field`: With `filterable`, the field that narrows the rows.
+   * - `surface`: The floating panel the menu is drawn on. It is the `menu` itself, and with `filterable` it holds the filter field and then the `menu`.
    * - `title`: The name of the submenu that is showing.
    *
    * ## CSS States
@@ -53570,6 +53738,13 @@ export type CustomElements = {
    *
    * - `empty`: Shown in the tree while it has no entries to show. Defaults to `empty-label`, or `no-matches-label` while a filter matched none.
    *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `focus(options?: FocusOptions) => void`: Moves focus to the row the keys move from, or to the tree while that row
+   * is scrolled out of the window, as Tab reaches them.
+   *
    * ## CSS Custom Properties
    *
    * CSS variables available for styling the component.
@@ -58600,6 +58775,10 @@ export type CustomElements = {
    *
    * Methods that can be called to access component functionality.
    *
+   * - `requestActive(next: string, cause?: string) => boolean`: Requests a new current stage, and returns whether it moved.
+   *
+   * Where only a step's `current` says where the reader is, `active` is first
+   * written with that step, so `helix-activate` names it as `previous`.
    * - `next() => boolean`: Moves to the next stage that can be gone to, as Ark UI's `goToNextStep`
    * does. Returns whether it moved: not past the last stage, not into a stage
    * `linear` holds out of reach, and not where a listener refused.
@@ -58608,15 +58787,6 @@ export type CustomElements = {
    * and the invalid mark from every stage, as Ark UI's `resetStep` does.
    * Returns whether it moved: a listener can refuse the move with
    * `helix-before-activate`, and the stages then keep their marks.
-   * - `requestActive(next: string, cause?: string) => boolean`: Requests a new current item, and returns whether the change was applied.
-   *
-   * Announces before it acts, so `preventDefault()` on the `helix-before-activate` is
-   * a refusal and nothing moves. Unlike a native control, nothing has moved
-   * by the time this runs, so refusing is simply not writing: there is
-   * nothing to put back. Nobody refusing means the set updates itself,
-   * whether or not a consumer declared `active`, a declared property being a
-   * seed and a correction. `cause` says why, where the family names its
-   * causes, and reaches the event as `detail.cause`.
    *
    * ## CSS Custom Properties
    *
@@ -64011,6 +64181,7 @@ export type CustomElements = {
    * - `menu-header`: The bar above a submenu, holding the back button and the submenu's name.
    * - `menu-live`: The inner menu's `live` part, the region screen readers announce its empty and loading messages from.
    * - `menu-loading`: Shown while the items are loading.
+   * - `menu-search-field`: The inner menu's filter field, drawn with `filterable`.
    * - `menu-surface`: The floating panel the menu is drawn on.
    * - `menu-title`: The name of the submenu that is shown.
    * - `poster`: An entry's poster image, if it has one.
@@ -64602,6 +64773,7 @@ export type CustomElements = {
    * - `captions-menu-header`: The bar above a submenu, holding the way back and its name.
    * - `captions-menu-live`: The inner menu's `live` part, a live region that repeats the empty and loading text for screen readers.
    * - `captions-menu-loading`: The text shown while the items are loading.
+   * - `captions-menu-search-field`: The inner menu's filter field, drawn with `filterable`.
    * - `captions-menu-surface`: The floating panel the menu is drawn on.
    * - `captions-menu-title`: The name of the submenu that is showing.
    * - `controls`: The control bar along the bottom.
@@ -64633,6 +64805,7 @@ export type CustomElements = {
    * - `overflow-header`: The bar above a submenu, holding the way back and its name.
    * - `overflow-live`: The inner menu's `live` part, a live region that repeats the empty and loading text for screen readers.
    * - `overflow-loading`: The text shown while the items are loading.
+   * - `overflow-search-field`: The inner menu's filter field, drawn with `filterable`.
    * - `overflow-surface`: The floating panel the menu is drawn on.
    * - `overflow-title`: The name of the submenu that is showing.
    * - `pip`: The picture-in-picture button, when `extra-controls` includes it and the browser supports it.
@@ -69728,6 +69901,18 @@ export type CustomElementsSolidJs = {
    * keeps hydration clean, and draws the diff once it can read the content. Diff
    * mode is experimental. The rest of the family is stable.
    *
+   * **Several blocks are files**, one shown at a time under a row of tabs, as
+   * Sandbox shows its source panes. Put Code Blocks in the default slot of a
+   * Code Block, and each is a file named on its tab by its `label` or, without
+   * one, its `language`. `file` holds the name of the file shown. The tabs are a
+   * tab list: the arrow keys move to a tab and show its file, the two swapping
+   * on a right-to-left page, and Home and End go to the first and the last.
+   * Choosing one sends `helix-before-change` with the file's name, which you can
+   * cancel, and `change` once `file` holds it. The files not shown carry
+   * `hidden`, and the one shown draws no name of its own, its tab naming it. One
+   * block draws no tabs. A server cannot see the blocks inside, so the client
+   * draws the tabs once it upgrades.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -69761,6 +69946,11 @@ export type CustomElementsSolidJs = {
    * the button is drawn only while the cap hides something, measured as the
    * block lays out. Not for a diff, whose files each scroll on their own.
    * - `expand-label`/`expandLabel`: The expand button's words while the cap hides lines.
+   * - `file`: The name of the file shown, where the block holds several Code Blocks:
+   * the `label` of one, or its `language` without one.
+   *
+   * Unset, or a name no file has, shows the first.
+   * - `files-label`/`filesLabel`: The name of the file tabs, read by screen readers.
    * - `hide-unchanged-label`/`hideUnchangedLabel`: The words of a button that hides a run of unchanged lines it showed, in a
    * diff with `context-lines`. `{count}` is how many, and each language
    * writes the forms it has.
@@ -69867,7 +70057,11 @@ export type CustomElementsSolidJs = {
    *
    * Events that will be emitted by the component.
    *
+   * - `change`: A file tab showed its file, whose name `file` now holds.
+   * - `helix-before-change`: A file tab is about to show its file, with the file's name in `detail.value`. Cancelable: cancel it to keep the file shown.
    * - `helix-before-toggle`: The wrap button was pressed, with the `wrap` it asks for in `detail.checked`. Cancelable: cancel it to keep the lines as they are.
+   * - `helix-copy`: The copy button put the code on the clipboard, with the text in `detail.value`.
+   * - `helix-copy-error`: A press on the copy button put nothing on the clipboard: the browser did not allow the write, or there was no code.
    * - `helix-toggle`: Fired after the wrap button changed `wrap`, with the new value in `detail.checked`.
    *
    * ## Slots
@@ -69916,6 +70110,8 @@ export type CustomElementsSolidJs = {
    * - `copy-tooltip-top`: The tooltip while it is above the copy button. Applied with `copy-tooltip`.
    * - `expand`: The button under a capped block that shows every line, and fewer again. Drawn when `expandable` is set and the cap hides something.
    * - `file`: In a diff, one file's header and block.
+   * - `file-tab`: One file tab, `aria-selected` while its file is shown.
+   * - `files`: The file tabs over the blocks a block holds, where there are several.
    * - `filler`: In a split diff, the empty row opposite a line the other side does not have.
    * - `fold`: In a diff with `context-lines`, the button that shows a folded run of unchanged lines, and hides it again, saying which with `aria-expanded`.
    * - `frame`: The code, and the copy button beside it where there is no header.
@@ -69938,6 +70134,7 @@ export type CustomElementsSolidJs = {
    * These can be used to apply styling when a component is in a given state.
    *
    * - `expanded`: The expand button has shown every line of a capped block.
+   * - `tabbed`: The block is one of several files under another block's tabs, which name it, so it draws no name of its own.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
   "helix-headless-code-block": Partial<
@@ -75193,6 +75390,7 @@ export type CustomElementsSolidJs = {
    * - `menu-header`: The bar above a field's page, with the back button and the field's name.
    * - `menu-live`: The inner menu's `live` part: the region that screen readers announce the empty and loading messages from.
    * - `menu-loading`: Shown while the fields are loading.
+   * - `menu-search-field`: The inner menu's filter field, drawn with `filterable`.
    * - `menu-surface`: The floating panel the menu is drawn on.
    * - `menu-title`: The name of the field whose page is showing.
    *
@@ -80704,6 +80902,12 @@ export type CustomElementsSolidJs = {
    * slots, so a mark of your own replaces either by being slotted. Neither is
    * read as part of the row's name.
    *
+   * In a menu with `filterable`, focus stays in the menu's filter field and the
+   * row the arrow keys reach is highlighted: the field names it with
+   * `aria-activedescendant`, the row carries its role on its host so the field
+   * can point at it, and `:state(highlighted)` says which row it is. A row with
+   * an `href` then follows its link without an anchor, as `Option` does.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -80856,6 +81060,7 @@ export type CustomElementsSolidJs = {
    * These can be used to apply styling when a component is in a given state.
    *
    * - `checked`: The row is checked.
+   * - `highlighted`: In a menu with `filterable`, the arrow keys or the pointer reached the row while focus stays in the filter field.
    * - `submenu-mark`: Under `submenus="flyout"`, a row in this row's submenu can be ticked or opens a submenu, so the submenu keeps its trailing column.
    * - `submenu-start`: Under `submenus="flyout"`, a row in this row's submenu has content before its label, so the submenu keeps its leading column.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
@@ -80928,6 +81133,21 @@ export type CustomElementsSolidJs = {
    * opens it from the keyboard, and the trigger is described by
    * `long-press-label`, which says so.
    *
+   * **A filter field.** With `filterable`, the menu opens with focus in a field
+   * above its rows, and typing narrows the rows of the page the keys move in,
+   * as React Aria's `Autocomplete` around a `Menu` does. A row is kept where its
+   * words hold the filter, in any case, or where `filterMatch` says so. Each
+   * page starts unfiltered, and the filter is cleared as the menu closes. Where
+   * typing keeps no row, the menu shows `no-results-text`. Focus stays in the
+   * field: Up and Down Arrow move the highlight through the rows that are left,
+   * Enter chooses the highlighted row, Right Arrow opens its submenu, Left Arrow
+   * on a submenu goes back, and Escape clears the filter and then closes the
+   * menu. Home, End and the other keys move the caret and type. The field names
+   * the highlighted row with `aria-activedescendant`, and the rows are a `menu`
+   * after the field. Cancel `helix-filter` to keep every row
+   * showing and narrow the rows yourself, such as by replacing them with rows
+   * from a server.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -80940,6 +81160,13 @@ export type CustomElementsSolidJs = {
    * Ark UI's `closeOnSelect` does. A row's own `close-on-select` wins over this.
    * - `context`: Whether the menu is the trigger's context menu: it opens where the reader
    * asks for one, with a right-click, a long press, Shift+F10 or the menu key.
+   * - `filter`: The text the rows are filtered by, which the filter field holds.
+   *
+   * Cleared as the menu closes and as a submenu opens or closes, so each page
+   * starts with every row showing.
+   * - `filterable`: Whether the menu shows a field above its rows that narrows them as the
+   * reader types, with focus staying in the field.
+   * - `filter-label`/`filterLabel`: The filter field's name and placeholder.
    * - `label`: Accessible name for the surface.
    *
    * Empty by default, which names the surface by its trigger, so a menu opened
@@ -80947,6 +81174,7 @@ export type CustomElementsSolidJs = {
    * `aria-labelledby` on the host names it too, and wins over both.
    * - `long-press-label`/`longPressLabel`: The description a trigger gives under `open-on="long-press"`, saying how
    * to open the menu. Translate it with the rest of your interface.
+   * - `no-results-text`/`noResultsText`: The text shown when the filter keeps no rows.
    * - `offset`: Space between the trigger and the surface, in pixels.
    * - `open-on`/`openOn`: What opens the menu from its trigger. `long-press` leaves a press to the
    * trigger's own action and opens the menu on a press held for half a second,
@@ -80976,6 +81204,12 @@ export type CustomElementsSolidJs = {
    * hydration, or diffed by a framework, it comes back holding whatever the
    * last reader did rather than what the author wrote. `:state(open)` carries
    * the resolved state for stylesheets, which is what the mirror is for.
+   * - `filterMatch`: Whether a row is kept by the filter: a function given the row's words and
+   * the filter, trimmed, that returns `true` to keep it showing, as React
+   * Aria's `Autocomplete` takes `filter`. See Listbox's `filterMatch`.
+   *
+   * Absent, a row is kept where its words hold the filter, in any case. A
+   * property only, there being no way to write a function in markup. (property only)
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -81003,6 +81237,7 @@ export type CustomElementsSolidJs = {
    *
    * - `helix-before-close`: The menu is about to close. Cancelable: cancel it to keep it open.
    * - `helix-before-open`: The menu is about to open. Cancelable: cancel it to keep it closed.
+   * - `helix-filter`: The text in the filter field changed, with the new text in `detail.value`. Cancelable: cancel it to keep every row showing and narrow the rows yourself.
    * - `helix-select`: An item was chosen. Cancelable: cancel it to keep the menu open.
    * - `toggle`: The menu opened or closed. The event carries `newState` and `oldState`.
    *
@@ -81011,6 +81246,7 @@ export type CustomElementsSolidJs = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: The items.
+   * - `no-results`: What the menu shows when the filter keeps no rows, for content richer than `no-results-text`.
    * - `trigger`: The control that opens the menu, or with `context` the area a context menu opens over.
    *
    * ## Methods
@@ -81046,7 +81282,8 @@ export type CustomElementsSolidJs = {
    * - `header`: The bar above a submenu, holding the way back and its name.
    * - `live`: A live region that repeats the empty and loading text, so screen readers announce it when it changes. Visually hidden in the styled tier.
    * - `loading`: The text shown while the items are loading.
-   * - `surface`: The floating panel the menu is drawn on.
+   * - `search-field`: With `filterable`, the field that narrows the rows.
+   * - `surface`: The floating panel the menu is drawn on. It is the `menu` itself, and with `filterable` it holds the filter field and then the `menu`.
    * - `title`: The name of the submenu that is showing.
    *
    * ## CSS States
@@ -82510,6 +82747,13 @@ export type CustomElementsSolidJs = {
    *
    * - `empty`: Shown in the tree while it has no entries to show. Defaults to `empty-label`, or `no-matches-label` while a filter matched none.
    *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `focus(options?: FocusOptions) => void`: Moves focus to the row the keys move from, or to the tree while that row
+   * is scrolled out of the window, as Tab reaches them.
+   *
    * ## CSS Custom Properties
    *
    * CSS variables available for styling the component.
@@ -87605,6 +87849,10 @@ export type CustomElementsSolidJs = {
    *
    * Methods that can be called to access component functionality.
    *
+   * - `requestActive(next: string, cause?: string) => boolean`: Requests a new current stage, and returns whether it moved.
+   *
+   * Where only a step's `current` says where the reader is, `active` is first
+   * written with that step, so `helix-activate` names it as `previous`.
    * - `next() => boolean`: Moves to the next stage that can be gone to, as Ark UI's `goToNextStep`
    * does. Returns whether it moved: not past the last stage, not into a stage
    * `linear` holds out of reach, and not where a listener refused.
@@ -87613,15 +87861,6 @@ export type CustomElementsSolidJs = {
    * and the invalid mark from every stage, as Ark UI's `resetStep` does.
    * Returns whether it moved: a listener can refuse the move with
    * `helix-before-activate`, and the stages then keep their marks.
-   * - `requestActive(next: string, cause?: string) => boolean`: Requests a new current item, and returns whether the change was applied.
-   *
-   * Announces before it acts, so `preventDefault()` on the `helix-before-activate` is
-   * a refusal and nothing moves. Unlike a native control, nothing has moved
-   * by the time this runs, so refusing is simply not writing: there is
-   * nothing to put back. Nobody refusing means the set updates itself,
-   * whether or not a consumer declared `active`, a declared property being a
-   * seed and a correction. `cause` says why, where the family names its
-   * causes, and reaches the event as `detail.cause`.
    *
    * ## CSS Custom Properties
    *
@@ -93094,6 +93333,7 @@ export type CustomElementsSolidJs = {
    * - `menu-header`: The bar above a submenu, holding the back button and the submenu's name.
    * - `menu-live`: The inner menu's `live` part, the region screen readers announce its empty and loading messages from.
    * - `menu-loading`: Shown while the items are loading.
+   * - `menu-search-field`: The inner menu's filter field, drawn with `filterable`.
    * - `menu-surface`: The floating panel the menu is drawn on.
    * - `menu-title`: The name of the submenu that is shown.
    * - `poster`: An entry's poster image, if it has one.
@@ -93687,6 +93927,7 @@ export type CustomElementsSolidJs = {
    * - `captions-menu-header`: The bar above a submenu, holding the way back and its name.
    * - `captions-menu-live`: The inner menu's `live` part, a live region that repeats the empty and loading text for screen readers.
    * - `captions-menu-loading`: The text shown while the items are loading.
+   * - `captions-menu-search-field`: The inner menu's filter field, drawn with `filterable`.
    * - `captions-menu-surface`: The floating panel the menu is drawn on.
    * - `captions-menu-title`: The name of the submenu that is showing.
    * - `controls`: The control bar along the bottom.
@@ -93718,6 +93959,7 @@ export type CustomElementsSolidJs = {
    * - `overflow-header`: The bar above a submenu, holding the way back and its name.
    * - `overflow-live`: The inner menu's `live` part, a live region that repeats the empty and loading text for screen readers.
    * - `overflow-loading`: The text shown while the items are loading.
+   * - `overflow-search-field`: The inner menu's filter field, drawn with `filterable`.
    * - `overflow-surface`: The floating panel the menu is drawn on.
    * - `overflow-title`: The name of the submenu that is showing.
    * - `pip`: The picture-in-picture button, when `extra-controls` includes it and the browser supports it.