@fusion.dev/helix 0.165.0 → 0.166.0

package/types/jsx.d.ts

@@ -7680,9 +7680,18 @@ export type HelixCodeBlockElementEvent<E = Event> = TypedEvent<
   HelixCodeBlock,
   E
 >;
+/** `helix-before-change` event type */
+export type HelixCodeBlockHelixBeforeChangeElementEvent =
+  HelixCodeBlockElementEvent<HelixBeforeChangeEvent>;
 /** `helix-before-toggle` event type */
 export type HelixCodeBlockHelixBeforeToggleElementEvent =
   HelixCodeBlockElementEvent<HelixBeforeToggleEvent>;
+/** `helix-copy` event type */
+export type HelixCodeBlockHelixCopyElementEvent =
+  HelixCodeBlockElementEvent<HelixCopyEvent>;
+/** `helix-copy-error` event type */
+export type HelixCodeBlockHelixCopyErrorElementEvent =
+  HelixCodeBlockElementEvent<HelixCopyErrorEvent>;
 /** `helix-toggle` event type */
 export type HelixCodeBlockHelixToggleElementEvent =
   HelixCodeBlockElementEvent<HelixToggleEvent>;
@@ -7754,6 +7763,15 @@ block lays out. Not for a diff, whose files each scroll on their own. */
   "expand-label"?: (HelixCodeBlock["expandLabel"]) | undefined;
   /** The expand button's words while the cap hides lines. */
   expandLabel?: (HelixCodeBlock["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?: (HelixCodeBlock["file"]) | undefined;
+  /** The name of the file tabs, read by screen readers. */
+  "files-label"?: (HelixCodeBlock["filesLabel"]) | undefined;
+  /** The name of the file tabs, read by screen readers. */
+  filesLabel?: (HelixCodeBlock["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. */
@@ -7888,10 +7906,20 @@ the script still has it. Not called on a server, which has no code to
 read, nor for a diff. */
   highlight?: (HelixCodeBlock["highlight"]) | undefined;
 
+  /** A file tab showed its file, whose name `file` now holds. */
+  onchange?: ((e: HelixCodeBlockElementEvent) => 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: HelixCodeBlockHelixBeforeChangeElementEvent,
+  ) => 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: HelixCodeBlockHelixBeforeToggleElementEvent,
   ) => void) | undefined;
+  /** The copy button put the code on the clipboard, with the text in `detail.value`. */
+  "onhelix-copy"?: ((e: HelixCodeBlockHelixCopyElementEvent) => 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: HelixCodeBlockHelixCopyErrorElementEvent) => void) | undefined;
   /** Fired after the wrap button changed `wrap`, with the new value in `detail.checked`. */
   "onhelix-toggle"?: ((e: HelixCodeBlockHelixToggleElementEvent) => void) | undefined;
 };
@@ -7963,6 +7991,15 @@ block lays out. Not for a diff, whose files each scroll on their own. */
   "attr:expand-label"?: (HelixCodeBlock["expandLabel"]) | undefined;
   /** The expand button's words while the cap hides lines. */
   "prop:expandLabel"?: (HelixCodeBlock["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"?: (HelixCodeBlock["file"]) | undefined;
+  /** The name of the file tabs, read by screen readers. */
+  "attr:files-label"?: (HelixCodeBlock["filesLabel"]) | undefined;
+  /** The name of the file tabs, read by screen readers. */
+  "prop:filesLabel"?: (HelixCodeBlock["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. */
@@ -8096,10 +8133,20 @@ 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"?: (HelixCodeBlock["highlight"]) | undefined;
+  /** A file tab showed its file, whose name `file` now holds. */
+  "on:change"?: ((e: HelixCodeBlockElementEvent) => 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: HelixCodeBlockHelixBeforeChangeElementEvent,
+  ) => 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: HelixCodeBlockHelixBeforeToggleElementEvent,
   ) => void) | undefined;
+  /** The copy button put the code on the clipboard, with the text in `detail.value`. */
+  "on:helix-copy"?: ((e: HelixCodeBlockHelixCopyElementEvent) => 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: HelixCodeBlockHelixCopyErrorElementEvent) => void) | undefined;
   /** Fired after the wrap button changed `wrap`, with the new value in `detail.checked`. */
   "on:helix-toggle"?: ((e: HelixCodeBlockHelixToggleElementEvent) => void) | undefined;
 
@@ -23563,6 +23610,9 @@ export type HelixMenuHelixBeforeCloseElementEvent =
 /** `helix-before-open` event type */
 export type HelixMenuHelixBeforeOpenElementEvent =
   HelixMenuElementEvent<HelixBeforeOpenEvent>;
+/** `helix-filter` event type */
+export type HelixMenuHelixFilterElementEvent =
+  HelixMenuElementEvent<HelixFilterEvent>;
 /** `helix-select` event type */
 export type HelixMenuHelixSelectElementEvent =
   HelixMenuElementEvent<HelixSelectEvent>;
@@ -23618,6 +23668,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?: (HelixMenu["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?: (HelixMenu["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?: (HelixMenu["filterable"]) | undefined;
+  /** The filter field's name and placeholder. */
+  "filter-label"?: (HelixMenu["filterLabel"]) | undefined;
+  /** The filter field's name and placeholder. */
+  filterLabel?: (HelixMenu["filterLabel"]) | undefined;
   /** Accessible name for the surface.
 
 Empty by default, which names the surface by its trigger, so a menu opened
@@ -23630,6 +23692,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?: (HelixMenu["longPressLabel"]) | undefined;
+  /** The text shown when the filter keeps no rows. */
+  "no-results-text"?: (HelixMenu["noResultsText"]) | undefined;
+  /** The text shown when the filter keeps no rows. */
+  noResultsText?: (HelixMenu["noResultsText"]) | undefined;
   /** Space between the trigger and the surface, in pixels. */
   offset?: (HelixMenu["offset"]) | undefined;
   /** What opens the menu from its trigger. `long-press` leaves a press to the
@@ -23647,6 +23713,13 @@ It moves if that side does not fit. */
   /** How a submenu opens. `drill` shows it in place of the page showing, with
 a way back. `flyout` opens it in a panel of its own beside its row. */
   submenus?: (HelixMenu["submenus"]) | 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?: (HelixMenu["filterMatch"]) | undefined;
 
   /** The menu opened or closed. The event carries `newState` and `oldState`. */
   ontoggle?: ((e: HelixMenuToggleElementEvent) => void) | undefined;
@@ -23654,6 +23727,8 @@ a way back. `flyout` opens it in a panel of its own beside its row. */
   "onhelix-before-close"?: ((e: HelixMenuHelixBeforeCloseElementEvent) => void) | undefined;
   /** The menu is about to open. Cancelable: cancel it to keep it closed. */
   "onhelix-before-open"?: ((e: HelixMenuHelixBeforeOpenElementEvent) => 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: HelixMenuHelixFilterElementEvent) => void) | undefined;
   /** An item was chosen. Cancelable: cancel it to keep the menu open. */
   "onhelix-select"?: ((e: HelixMenuHelixSelectElementEvent) => void) | undefined;
 };
@@ -23709,6 +23784,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"?: (HelixMenu["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"?: (HelixMenu["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"?: (HelixMenu["filterable"]) | undefined;
+  /** The filter field's name and placeholder. */
+  "attr:filter-label"?: (HelixMenu["filterLabel"]) | undefined;
+  /** The filter field's name and placeholder. */
+  "prop:filterLabel"?: (HelixMenu["filterLabel"]) | undefined;
   /** Accessible name for the surface.
 
 Empty by default, which names the surface by its trigger, so a menu opened
@@ -23721,6 +23808,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"?: (HelixMenu["longPressLabel"]) | undefined;
+  /** The text shown when the filter keeps no rows. */
+  "attr:no-results-text"?: (HelixMenu["noResultsText"]) | undefined;
+  /** The text shown when the filter keeps no rows. */
+  "prop:noResultsText"?: (HelixMenu["noResultsText"]) | undefined;
   /** Space between the trigger and the surface, in pixels. */
   "prop:offset"?: (HelixMenu["offset"]) | undefined;
   /** What opens the menu from its trigger. `long-press` leaves a press to the
@@ -23738,12 +23829,21 @@ It moves if that side does not fit. */
   /** How a submenu opens. `drill` shows it in place of the page showing, with
 a way back. `flyout` opens it in a panel of its own beside its row. */
   "prop:submenus"?: (HelixMenu["submenus"]) | 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"?: (HelixMenu["filterMatch"]) | undefined;
   /** The menu opened or closed. The event carries `newState` and `oldState`. */
   "on:toggle"?: ((e: HelixMenuToggleElementEvent) => void) | undefined;
   /** The menu is about to close. Cancelable: cancel it to keep it open. */
   "on:helix-before-close"?: ((e: HelixMenuHelixBeforeCloseElementEvent) => void) | undefined;
   /** The menu is about to open. Cancelable: cancel it to keep it closed. */
   "on:helix-before-open"?: ((e: HelixMenuHelixBeforeOpenElementEvent) => 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: HelixMenuHelixFilterElementEvent) => void) | undefined;
   /** An item was chosen. Cancelable: cancel it to keep the menu open. */
   "on:helix-select"?: ((e: HelixMenuHelixSelectElementEvent) => void) | undefined;
 
@@ -29201,6 +29301,16 @@ gives. */
   "panel-size"?: (HelixSandbox["panelSize"] | `${number}`) | undefined;
   /** Height of the panel, in pixels. */
   panelSize?: (HelixSandbox["panelSize"]) | undefined;
+  /** How long typing rests before the preview runs the new source, in
+milliseconds, as Sandpack's `recompileDelay` does. The preview reloads its
+frame on each run, so a word typed runs it once. `0` runs it on every
+edit. */
+  "preview-delay"?: (HelixSandbox["previewDelay"] | `${number}`) | undefined;
+  /** How long typing rests before the preview runs the new source, in
+milliseconds, as Sandpack's `recompileDelay` does. The preview reloads its
+frame on each run, so a word typed runs it once. `0` runs it on every
+edit. */
+  previewDelay?: (HelixSandbox["previewDelay"]) | undefined;
   /** The name of the divider between the panes, read by screen readers.
 `{pane}` is the lead pane, `source` or `preview`, whose share the
 divider's value is, so each is a whole sentence: "Resize source pane" or
@@ -29351,6 +29461,16 @@ gives. */
   "attr:panel-size"?: (HelixSandbox["panelSize"] | `${number}`) | undefined;
   /** Height of the panel, in pixels. */
   "prop:panelSize"?: (HelixSandbox["panelSize"]) | undefined;
+  /** How long typing rests before the preview runs the new source, in
+milliseconds, as Sandpack's `recompileDelay` does. The preview reloads its
+frame on each run, so a word typed runs it once. `0` runs it on every
+edit. */
+  "attr:preview-delay"?: (HelixSandbox["previewDelay"] | `${number}`) | undefined;
+  /** How long typing rests before the preview runs the new source, in
+milliseconds, as Sandpack's `recompileDelay` does. The preview reloads its
+frame on each run, so a word typed runs it once. `0` runs it on every
+edit. */
+  "prop:previewDelay"?: (HelixSandbox["previewDelay"]) | undefined;
   /** The name of the divider between the panes, read by screen readers.
 `{pane}` is the lead pane, `source` or `preview`, whose share the
 divider's value is, so each is a whole sentence: "Resize source pane" or
@@ -29421,6 +29541,14 @@ export type HelixSandboxSourceProps = {
   "field-label"?: (HelixSandboxSource["fieldLabel"]) | undefined;
   /** The editable region's name, read by screen readers. */
   fieldLabel?: (HelixSandboxSource["fieldLabel"]) | undefined;
+  /** The editable region's name where the pane has a `label`, so each file's
+field says which file it holds. `{field}` is `field-label` and `{name}`
+the pane's `label`. */
+  "field-name-label"?: (HelixSandboxSource["fieldNameLabel"]) | undefined;
+  /** The editable region's name where the pane has a `label`, so each file's
+field says which file it holds. `{field}` is `field-label` and `{name}`
+the pane's `label`. */
+  fieldNameLabel?: (HelixSandboxSource["fieldNameLabel"]) | undefined;
   /** The field's description, read by screen readers while Tab indents. */
   "keys-description"?: (HelixSandboxSource["keysDescription"]) | undefined;
   /** The field's description, read by screen readers while Tab indents. */
@@ -29469,6 +29597,14 @@ export type HelixSandboxSourceSolidJsProps = {
   "attr:field-label"?: (HelixSandboxSource["fieldLabel"]) | undefined;
   /** The editable region's name, read by screen readers. */
   "prop:fieldLabel"?: (HelixSandboxSource["fieldLabel"]) | undefined;
+  /** The editable region's name where the pane has a `label`, so each file's
+field says which file it holds. `{field}` is `field-label` and `{name}`
+the pane's `label`. */
+  "attr:field-name-label"?: (HelixSandboxSource["fieldNameLabel"]) | undefined;
+  /** The editable region's name where the pane has a `label`, so each file's
+field says which file it holds. `{field}` is `field-label` and `{name}`
+the pane's `label`. */
+  "prop:fieldNameLabel"?: (HelixSandboxSource["fieldNameLabel"]) | undefined;
   /** The field's description, read by screen readers while Tab indents. */
   "attr:keys-description"?: (HelixSandboxSource["keysDescription"]) | undefined;
   /** The field's description, read by screen readers while Tab indents. */
@@ -45967,6 +46103,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.
@@ -46073,7 +46214,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
@@ -46139,6 +46284,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.
@@ -46161,6 +46308,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-code-block": Partial<
@@ -51106,6 +51254,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.
    *
@@ -56665,6 +56814,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.
@@ -56712,6 +56862,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
@@ -56719,6 +56876,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,
@@ -56728,6 +56886,12 @@ export type CustomElements = {
    * It moves if that side does not fit.
    * - `submenus`: How a submenu opens. `drill` shows it in place of the page showing, with
    * a way back. `flyout` opens it in a panel of its own beside its row.
+   * - `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
@@ -56756,6 +56920,7 @@ export type CustomElements = {
    * - `toggle`: The menu opened or closed. The event carries `newState` and `oldState`.
    * - `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.
    *
    * ## Slots
@@ -56763,6 +56928,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
@@ -56804,7 +56970,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
@@ -58172,6 +58339,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.
@@ -61039,6 +61213,9 @@ export type CustomElements = {
    * preview do not reference each other, so you can replace either one or use it
    * alone.
    *
+   * The preview runs an edit once typing has rested for `preview-delay`, 300
+   * milliseconds by default, so a word typed reloads it once. A pane's text when the sandbox starts reaches it at once.
+   *
    * The event carries the pane's `name`, so one sandbox can hold several panes.
    * `html` sets the preview's markup, `css` sets its stylesheet, and `js` sets
    * a script that runs as a module after the markup. The sandbox ignores a pane
@@ -61063,6 +61240,16 @@ export type CustomElements = {
    * like `helix-sandbox-source`, and the sandbox reads its `value` to seed the
    * preview. Dispatch `helix-caret` from it too for the status bar's position.
    *
+   * Sandbox is styled only and has behavior, as `Aura` is. Its behavior is the
+   * hand-off from a source pane to a preview frame, which works with any pane
+   * that sends `helix-before-edit`, and what it draws is the layout around them:
+   * dividers, file tabs, and a panel. A page that wants another look slots its
+   * own panes and keeps the hand-off, so there is nothing for a headless version
+   * to hold.
+   *
+   * A development build warns about a source pane with no `label` and no `name`,
+   * whose file tab would have no words.
+   *
    * On a focused divider, the arrow keys move it, and `Home` and `End` move it
    * to its ends. `Enter` on the panes divider shuts the lead pane, and pressed
    * again it opens the pane where it was. `Enter` on the panel divider shuts the
@@ -61128,6 +61315,10 @@ export type CustomElements = {
    * gives.
    * - `panel-label`/`panelLabel`: The name of the panel's divider, read by screen readers.
    * - `panel-size`/`panelSize`: Height of the panel, in pixels.
+   * - `preview-delay`/`previewDelay`: How long typing rests before the preview runs the new source, in
+   * milliseconds, as Sandpack's `recompileDelay` does. The preview reloads its
+   * frame on each run, so a word typed runs it once. `0` runs it on every
+   * edit.
    * - `separator-label`/`separatorLabel`: The name of the divider between the panes, read by screen readers.
    * `{pane}` is the lead pane, `source` or `preview`, whose share the
    * divider's value is, so each is a whole sentence: "Resize source pane" or
@@ -61238,6 +61429,9 @@ export type CustomElements = {
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
    * - `field-label`/`fieldLabel`: The editable region's name, read by screen readers.
+   * - `field-name-label`/`fieldNameLabel`: The editable region's name where the pane has a `label`, so each file's
+   * field says which file it holds. `{field}` is `field-label` and `{name}`
+   * the pane's `label`.
    * - `keys-description`/`keysDescription`: The field's description, read by screen readers while Tab indents.
    * - `label`: The pane's file name, such as `index.html`, on its tab where a sandbox
    * holds several panes. Empty puts the pane's `name` on the tab.
@@ -69182,6 +69376,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.
@@ -69717,6 +69912,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.
@@ -69748,6 +69944,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.
@@ -75064,6 +75261,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.
@@ -75170,7 +75372,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
@@ -75236,6 +75442,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.
@@ -75258,6 +75466,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-code-block": Partial<
@@ -80268,6 +80477,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.
    *
@@ -85926,6 +86136,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.
@@ -85976,6 +86187,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
@@ -85983,6 +86201,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,
@@ -85992,6 +86211,12 @@ export type CustomElementsSolidJs = {
    * It moves if that side does not fit.
    * - `submenus`: How a submenu opens. `drill` shows it in place of the page showing, with
    * a way back. `flyout` opens it in a panel of its own beside its row.
+   * - `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
@@ -86020,6 +86245,7 @@ export type CustomElementsSolidJs = {
    * - `toggle`: The menu opened or closed. The event carries `newState` and `oldState`.
    * - `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.
    *
    * ## Slots
@@ -86027,6 +86253,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
@@ -86068,7 +86295,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
@@ -87461,6 +87689,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.
@@ -90385,6 +90620,9 @@ export type CustomElementsSolidJs = {
    * preview do not reference each other, so you can replace either one or use it
    * alone.
    *
+   * The preview runs an edit once typing has rested for `preview-delay`, 300
+   * milliseconds by default, so a word typed reloads it once. A pane's text when the sandbox starts reaches it at once.
+   *
    * The event carries the pane's `name`, so one sandbox can hold several panes.
    * `html` sets the preview's markup, `css` sets its stylesheet, and `js` sets
    * a script that runs as a module after the markup. The sandbox ignores a pane
@@ -90409,6 +90647,16 @@ export type CustomElementsSolidJs = {
    * like `helix-sandbox-source`, and the sandbox reads its `value` to seed the
    * preview. Dispatch `helix-caret` from it too for the status bar's position.
    *
+   * Sandbox is styled only and has behavior, as `Aura` is. Its behavior is the
+   * hand-off from a source pane to a preview frame, which works with any pane
+   * that sends `helix-before-edit`, and what it draws is the layout around them:
+   * dividers, file tabs, and a panel. A page that wants another look slots its
+   * own panes and keeps the hand-off, so there is nothing for a headless version
+   * to hold.
+   *
+   * A development build warns about a source pane with no `label` and no `name`,
+   * whose file tab would have no words.
+   *
    * On a focused divider, the arrow keys move it, and `Home` and `End` move it
    * to its ends. `Enter` on the panes divider shuts the lead pane, and pressed
    * again it opens the pane where it was. `Enter` on the panel divider shuts the
@@ -90474,6 +90722,10 @@ export type CustomElementsSolidJs = {
    * gives.
    * - `panel-label`/`panelLabel`: The name of the panel's divider, read by screen readers.
    * - `panel-size`/`panelSize`: Height of the panel, in pixels.
+   * - `preview-delay`/`previewDelay`: How long typing rests before the preview runs the new source, in
+   * milliseconds, as Sandpack's `recompileDelay` does. The preview reloads its
+   * frame on each run, so a word typed runs it once. `0` runs it on every
+   * edit.
    * - `separator-label`/`separatorLabel`: The name of the divider between the panes, read by screen readers.
    * `{pane}` is the lead pane, `source` or `preview`, whose share the
    * divider's value is, so each is a whole sentence: "Resize source pane" or
@@ -90587,6 +90839,9 @@ export type CustomElementsSolidJs = {
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
    * - `field-label`/`fieldLabel`: The editable region's name, read by screen readers.
+   * - `field-name-label`/`fieldNameLabel`: The editable region's name where the pane has a `label`, so each file's
+   * field says which file it holds. `{field}` is `field-label` and `{name}`
+   * the pane's `label`.
    * - `keys-description`/`keysDescription`: The field's description, read by screen readers while Tab indents.
    * - `label`: The pane's file name, such as `index.html`, on its tab where a sandbox
    * holds several panes. Empty puts the pane's `name` on the tab.
@@ -98681,6 +98936,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.
@@ -99222,6 +99478,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.
@@ -99253,6 +99510,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.