@fusion.dev/helix-headless 0.164.0 → 0.166.0

package/types/vue.d.ts

@@ -201,14 +201,14 @@ import type {
   HelixHistoryEvent,
   HelixPinEvent,
   HelixBeforeToggleEvent,
-  HelixToggleEvent,
   HelixCopyEvent,
+  HelixCopyErrorEvent,
+  HelixToggleEvent,
   HelixSampleEndEvent,
   HelixSampleStartEvent,
   HelixCreateEvent,
   HelixFilterEvent,
   HelixLoadMoreEvent,
-  HelixCopyErrorEvent,
   HelixBeforeReorderEvent,
   HelixExpandEvent,
   HelixFilteredEvent,
@@ -3152,9 +3152,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>;
@@ -3226,6 +3235,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. */
@@ -3362,8 +3380,16 @@ read, nor for a diff. */
 };
 
 export type HelixHeadlessCodeBlockVueEvents = {
+  /** A file tab showed its file, whose name `file` now holds. */
+  change: HelixHeadlessCodeBlockElementEvent;
+  /** 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-change": HelixHeadlessCodeBlockHelixBeforeChangeElementEvent;
   /** 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-before-toggle": HelixHeadlessCodeBlockHelixBeforeToggleElementEvent;
+  /** The copy button put the code on the clipboard, with the text in `detail.value`. */
+  "helix-copy": HelixHeadlessCodeBlockHelixCopyElementEvent;
+  /** A press on the copy button put nothing on the clipboard: the browser did not allow the write, or there was no code. */
+  "helix-copy-error": HelixHeadlessCodeBlockHelixCopyErrorElementEvent;
   /** Fired after the wrap button changed `wrap`, with the new value in `detail.checked`. */
   "helix-toggle": HelixHeadlessCodeBlockHelixToggleElementEvent;
 };
@@ -7349,7 +7375,9 @@ place of the date: `long` ("3 hours ago"), `short` ("3 hr. ago") or
 `narrow` ("3h ago").
 
 The reading refreshes as it goes stale, as `elapsed` does, and the whole
-date is its title. `elapsed` wins where both are set. */
+date is its title. `elapsed` wins where both are set. Written with no
+value, as `elapsed` is, or with a style `Intl` does not know, it reads
+`long`. */
   relative?: (HelixHeadlessFormatDate["relative"]) | undefined;
   /** How the second is written, where a time of day is shown. */
   second?: (HelixHeadlessFormatDate["second"]) | undefined;
@@ -10683,6 +10711,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>;
@@ -10710,6 +10741,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
@@ -10722,6 +10765,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
@@ -10770,6 +10817,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;
 };
 
 export type HelixHeadlessMenuVueEvents = {
@@ -10777,6 +10831,8 @@ export type HelixHeadlessMenuVueEvents = {
   "helix-before-close": HelixHeadlessMenuHelixBeforeCloseElementEvent;
   /** The menu is about to open. Cancelable: cancel it to keep it closed. */
   "helix-before-open": HelixHeadlessMenuHelixBeforeOpenElementEvent;
+  /** 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-filter": HelixHeadlessMenuHelixFilterElementEvent;
   /** An item was chosen. Cancelable: cancel it to keep the menu open. */
   "helix-select": HelixHeadlessMenuHelixSelectElementEvent;
   /** The menu opened or closed. The event carries `newState` and `oldState`. */
@@ -11354,10 +11410,11 @@ one they already know. */
 invalid, as it is in a native number field.
 
 Unset, a step moves by one, or by one percent under a percent format, and
-a typed number is rounded to the smallest amount `format-options` shows
-rather than to whole steps, as React Aria's NumberField does: a field
-showing dollars keeps the cents typed into it. Without `format-options`
-the grid is whole numbers, as in a native number field. */
+a typed number is rounded to the smallest amount the format shows, as
+React Aria's NumberField does: a field showing dollars keeps the cents
+typed into it, and one with no `format-options` keeps three decimal
+places. `any` puts the number on no grid, as it does in a native number
+field: a step moves by one, and any number in range is valid. */
   step?: (HelixHeadlessNumberInput["step"]) | undefined;
   /** The message the browser shows when the number is off the step grid, with
 `{below}` and `{above}` filled in with the nearest valid values, written in
@@ -18853,7 +18910,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessCheckboxVueProps,
     HelixHeadlessCheckboxVueEvents
   >;
-  /** Renders a '<pre><code>' pair: 'pre' keeps the whitespace, and 'code' marks it as code. Long lines scroll inside the block and do not wrap, because a line break can be significant in code.  A copy button is on by default. Set 'no-copy' to remove it. The button copies the slotted text, so there is no second copy of the code to keep in sync.  For a fragment of code inside a sentence, use 'Code'.  Set 'line-numbers' to number the lines in a gutter beside the code, hidden from the accessibility tree and left out of a copy. Set 'mark-lines' to mark lines a reader should look at, such as '2, 4-6': the block draws a band behind each run, placed where the lines are laid out, so it follows a highlighter's markup and lines that wrap. Set 'wrap' to wrap long lines rather than scroll them; a gutter then numbers each line where it starts. Set 'wrappable' for a button in the header that turns 'wrap' on and off, pressed while the lines wrap.  The header holds the name, the 'actions' slot, and the copy button. Slot a control into 'actions', such as a button that sets 'wrap' or one that opens the code in an editor, and the block draws a header for it even with no name. 'copy-icon' and 'copied-icon' replace the copy button's two icons. Set 'highlight' to a function that turns the code into highlighted markup, such as one wrapping Shiki or Prism, and the block draws what it returns; it is handed the block's 'language', so one function serves every block. The code stays in the slot, so the copy button and the page's own text are the code as written.  Set 'expandable' on a block whose height is capped, such as by '--code-block-max-block-size', and a button under it shows every line and then fewer again, as a docs site's long example does. The button is drawn only while the cap hides something, says whether the block is expanded with 'aria-expanded', names the block it opens with 'aria-controls', and the block carries ':state(expanded)' while it is.  Set 'diff' to show a change. Put a unified diff, the output of 'git diff' or 'diff -u', in the same slot, and the block draws the lines it added and removed. The block never computes a diff itself. Line numbers come from the hunk headers and are hidden from the accessibility tree. Changed lines are '<ins>' and '<del>' with the '+' and '-' kept as text, so the change does not depend on color. Where a removed line is paired with the added line that replaced it, the words each does not share with the other are the 'changed' part, so the eye goes to what changed within the line. Each file in the patch is its own block under its own name, and its copy button copies the new version of the file. 'variant="split"' shows the old version beside the new, each removal opposite its replacement. 'context-lines' folds each long run of unchanged lines, keeping that many beside each change, behind a button that shows them and hides them again, as a code host draws a diff written with more context than a reader needs.  **A block that scrolls is a tab stop.** While its lines run past its width or its cap, the scroller is a region named for the block, such as "Code, app.ts", that Tab reaches, so a keyboard scrolls it with the arrow keys in every browser. Chromium and Firefox make a scrolling box focusable on their own, and Safari does not. A block that fits is no stop at all.  **The code the block draws is marked untranslated**, 'translate="no"' on its '<pre>', so a page translator leaves highlighted lines and a diff as written. Code in the slot takes its translation mode from the element, which writes nothing onto itself, so set 'translate="no"' on the element to keep a translator off plain code too.  On the server, the slot renders as ordinary code, so a diff first appears as the patch text in a '<pre>'. The client makes the same first render, which keeps hydration clean, and draws the diff once it can read the content. Diff mode is experimental. The rest of the family is stable. */
+  /** Renders a '<pre><code>' pair: 'pre' keeps the whitespace, and 'code' marks it as code. Long lines scroll inside the block and do not wrap, because a line break can be significant in code.  A copy button is on by default. Set 'no-copy' to remove it. The button copies the slotted text, so there is no second copy of the code to keep in sync.  For a fragment of code inside a sentence, use 'Code'.  Set 'line-numbers' to number the lines in a gutter beside the code, hidden from the accessibility tree and left out of a copy. Set 'mark-lines' to mark lines a reader should look at, such as '2, 4-6': the block draws a band behind each run, placed where the lines are laid out, so it follows a highlighter's markup and lines that wrap. Set 'wrap' to wrap long lines rather than scroll them; a gutter then numbers each line where it starts. Set 'wrappable' for a button in the header that turns 'wrap' on and off, pressed while the lines wrap.  The header holds the name, the 'actions' slot, and the copy button. Slot a control into 'actions', such as a button that sets 'wrap' or one that opens the code in an editor, and the block draws a header for it even with no name. 'copy-icon' and 'copied-icon' replace the copy button's two icons. Set 'highlight' to a function that turns the code into highlighted markup, such as one wrapping Shiki or Prism, and the block draws what it returns; it is handed the block's 'language', so one function serves every block. The code stays in the slot, so the copy button and the page's own text are the code as written.  Set 'expandable' on a block whose height is capped, such as by '--code-block-max-block-size', and a button under it shows every line and then fewer again, as a docs site's long example does. The button is drawn only while the cap hides something, says whether the block is expanded with 'aria-expanded', names the block it opens with 'aria-controls', and the block carries ':state(expanded)' while it is.  Set 'diff' to show a change. Put a unified diff, the output of 'git diff' or 'diff -u', in the same slot, and the block draws the lines it added and removed. The block never computes a diff itself. Line numbers come from the hunk headers and are hidden from the accessibility tree. Changed lines are '<ins>' and '<del>' with the '+' and '-' kept as text, so the change does not depend on color. Where a removed line is paired with the added line that replaced it, the words each does not share with the other are the 'changed' part, so the eye goes to what changed within the line. Each file in the patch is its own block under its own name, and its copy button copies the new version of the file. 'variant="split"' shows the old version beside the new, each removal opposite its replacement. 'context-lines' folds each long run of unchanged lines, keeping that many beside each change, behind a button that shows them and hides them again, as a code host draws a diff written with more context than a reader needs.  **A block that scrolls is a tab stop.** While its lines run past its width or its cap, the scroller is a region named for the block, such as "Code, app.ts", that Tab reaches, so a keyboard scrolls it with the arrow keys in every browser. Chromium and Firefox make a scrolling box focusable on their own, and Safari does not. A block that fits is no stop at all.  **The code the block draws is marked untranslated**, 'translate="no"' on its '<pre>', so a page translator leaves highlighted lines and a diff as written. Code in the slot takes its translation mode from the element, which writes nothing onto itself, so set 'translate="no"' on the element to keep a translator off plain code too.  On the server, the slot renders as ordinary code, so a diff first appears as the patch text in a '<pre>'. The client makes the same first render, which 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. */
   "helix-headless-code-block": DefineCustomElement<
     HelixHeadlessCodeBlock,
     HelixHeadlessCodeBlockVueProps,
@@ -19171,13 +19228,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessMegamenuVueProps,
     HelixHeadlessMegamenuVueEvents
   >;
-  /** One element covers three kinds of row, and what you give it decides which: - Content in the 'submenu' slot makes the row open a submenu page. - 'checked' makes the row a choice. - With neither, the row is a command.  The role follows the kind. A row with 'checkable' or 'checked' is 'menuitemcheckbox' with 'aria-checked', and an 'exclusive' row is 'menuitemradio', for a set where only one can be on. A row that opens a page keeps 'menuitem' and sets 'aria-haspopup'.  Choosing a choice row checks or unchecks it before 'helix-select' is sent, so a listener reads the new 'checked'. An 'exclusive' row turns on and turns off the 'exclusive' rows next to it. Cancel 'helix-before-toggle' to keep a row as it is and set 'checked' yourself.  Space on a choice row changes it and leaves the menu open, so a reader can set several in a row, as the APG's menu does. Enter and a press change it and close the menu. 'close-on-select="false"' on the row keeps the menu open after any choice of it, and 'close-on-select' on the row closes it after a Space as well.  The menu sets whether the row's page is showing as a property, never as an attribute. An attribute written onto your element after it upgrades causes a hydration mismatch.  'shortcut' shows a row's keyboard shortcut after its label, drawn by 'Kbd' in the platform's glyphs, and gives the row 'aria-keyshortcuts'. It binds nothing: the shortcut is the page's to bind. Other trailing words, such as a count, go in the 'end' slot.  The row is named by its label alone. Words in 'description', a line under the label, and in 'end' describe it instead, through 'aria-describedby', as React Aria's menu item does with its description: a reader hears "Copy", then "Copies the selection".  A development build warns when a row has no words to be named by, such as a row holding only an icon with no label.  The check mark and the caret are the fallbacks of the 'check' and 'chevron' slots, so a mark of your own replaces either by being slotted. Neither is read as part of the row's name. */
+  /** One element covers three kinds of row, and what you give it decides which: - Content in the 'submenu' slot makes the row open a submenu page. - 'checked' makes the row a choice. - With neither, the row is a command.  The role follows the kind. A row with 'checkable' or 'checked' is 'menuitemcheckbox' with 'aria-checked', and an 'exclusive' row is 'menuitemradio', for a set where only one can be on. A row that opens a page keeps 'menuitem' and sets 'aria-haspopup'.  Choosing a choice row checks or unchecks it before 'helix-select' is sent, so a listener reads the new 'checked'. An 'exclusive' row turns on and turns off the 'exclusive' rows next to it. Cancel 'helix-before-toggle' to keep a row as it is and set 'checked' yourself.  Space on a choice row changes it and leaves the menu open, so a reader can set several in a row, as the APG's menu does. Enter and a press change it and close the menu. 'close-on-select="false"' on the row keeps the menu open after any choice of it, and 'close-on-select' on the row closes it after a Space as well.  The menu sets whether the row's page is showing as a property, never as an attribute. An attribute written onto your element after it upgrades causes a hydration mismatch.  'shortcut' shows a row's keyboard shortcut after its label, drawn by 'Kbd' in the platform's glyphs, and gives the row 'aria-keyshortcuts'. It binds nothing: the shortcut is the page's to bind. Other trailing words, such as a count, go in the 'end' slot.  The row is named by its label alone. Words in 'description', a line under the label, and in 'end' describe it instead, through 'aria-describedby', as React Aria's menu item does with its description: a reader hears "Copy", then "Copies the selection".  A development build warns when a row has no words to be named by, such as a row holding only an icon with no label.  The check mark and the caret are the fallbacks of the 'check' and 'chevron' 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. */
   "helix-headless-menu-item": DefineCustomElement<
     HelixHeadlessMenuItem,
     HelixHeadlessMenuItemVueProps,
     HelixHeadlessMenuItemVueEvents
   >;
-  /** The trigger is slotted and stays your own element, as with the tooltip. The menu renders its surface in the top layer with the popover API, so an ancestor with 'overflow: hidden' does not clip it and it needs no 'z-index'.  Slot a 'helix-button' or 'helix-icon-button' as the trigger, and the menu tells it that it opens a menu and whether the menu is open, inside its own shadow root. On a plain element, such as a '<button>', the menu writes 'aria-haspopup="menu"' and 'aria-expanded', from a frame after its own first render, so a server's markup is never changed while a framework hydrates it. It never writes 'aria-expanded' where you wrote it yourself.  Submenus drill down by default. A submenu replaces the panel's content, and a back row returns to the previous page. One panel stays inside a narrow window, and works on touch screens, which have no hover.  **'submenus="flyout"' opens each submenu in a panel of its own beside its row**, as React Aria's 'SubmenuTrigger' and Radix's 'Sub' do. Resting the pointer on the row opens it, and a pointer crossing toward the open panel over the rows between keeps it open, as Radix's grace area does. Right Arrow opens a row's submenu on its first row, and Left Arrow or Escape closes it and returns focus to the row, the two arrows swapping on a right-to-left page. The row says 'aria-expanded', and the panel is a 'menu' named by the row.  The root holds which page is open, because only one page shows at a time. It sets this on items as a property, never as an attribute. An attribute written onto your element after it upgrades causes a hydration mismatch.  Group rows under a heading with 'Menu.Section', which is a 'group' named by its heading. Between runs of rows, a '<helix-divider>' is a separator a screen reader announces.  Keys: Enter, Space or Down Arrow on the trigger opens the menu on its first row, and Up Arrow on its last. In the menu, Up and Down Arrow move between rows, Home and End go to the first and the last, a typed letter moves to the next row whose name starts with it, Enter and Space choose (Space on a choice row changes it and leaves the menu open), Right Arrow opens a row's submenu and Left Arrow goes back, the two swapping on a right-to-left page. Left Arrow on the top page does nothing. Escape closes the menu and returns focus to the trigger. Tab closes it and moves on.  While it is open, the surface carries the trigger's width as '--floating-anchor-inline-size' and the room left below it as '--floating-available-block-size', as Radix's dropdown menu publishes its trigger's width, for a menu as wide as its trigger: 'helix-menu::part(surface) { min-inline-size: var(--floating-anchor-inline-size) }'.  With 'context', the trigger is an area and the menu is its context menu: a right-click, a long press, Shift+F10 or the menu key over the area opens it at the pointer, or at the area's corner from the keyboard, as Radix's context menu does. A press on the area does not open it, and closing it returns focus to where it was. A touch or a pen held still on the area opens it too, on every browser, since iOS sends no 'contextmenu' for one.  **A trigger with its own action.** With 'open-on="long-press"', a press on the trigger is the trigger's own, and a press held for half a second opens the menu, as React Aria's 'trigger="longPress"' does. Alt+Down or Alt+Up opens it from the keyboard, and the trigger is described by 'long-press-label', which says so. */
+  /** The trigger is slotted and stays your own element, as with the tooltip. The menu renders its surface in the top layer with the popover API, so an ancestor with 'overflow: hidden' does not clip it and it needs no 'z-index'.  Slot a 'helix-button' or 'helix-icon-button' as the trigger, and the menu tells it that it opens a menu and whether the menu is open, inside its own shadow root. On a plain element, such as a '<button>', the menu writes 'aria-haspopup="menu"' and 'aria-expanded', from a frame after its own first render, so a server's markup is never changed while a framework hydrates it. It never writes 'aria-expanded' where you wrote it yourself.  Submenus drill down by default. A submenu replaces the panel's content, and a back row returns to the previous page. One panel stays inside a narrow window, and works on touch screens, which have no hover.  **'submenus="flyout"' opens each submenu in a panel of its own beside its row**, as React Aria's 'SubmenuTrigger' and Radix's 'Sub' do. Resting the pointer on the row opens it, and a pointer crossing toward the open panel over the rows between keeps it open, as Radix's grace area does. Right Arrow opens a row's submenu on its first row, and Left Arrow or Escape closes it and returns focus to the row, the two arrows swapping on a right-to-left page. The row says 'aria-expanded', and the panel is a 'menu' named by the row.  The root holds which page is open, because only one page shows at a time. It sets this on items as a property, never as an attribute. An attribute written onto your element after it upgrades causes a hydration mismatch.  Group rows under a heading with 'Menu.Section', which is a 'group' named by its heading. Between runs of rows, a '<helix-divider>' is a separator a screen reader announces.  Keys: Enter, Space or Down Arrow on the trigger opens the menu on its first row, and Up Arrow on its last. In the menu, Up and Down Arrow move between rows, Home and End go to the first and the last, a typed letter moves to the next row whose name starts with it, Enter and Space choose (Space on a choice row changes it and leaves the menu open), Right Arrow opens a row's submenu and Left Arrow goes back, the two swapping on a right-to-left page. Left Arrow on the top page does nothing. Escape closes the menu and returns focus to the trigger. Tab closes it and moves on.  While it is open, the surface carries the trigger's width as '--floating-anchor-inline-size' and the room left below it as '--floating-available-block-size', as Radix's dropdown menu publishes its trigger's width, for a menu as wide as its trigger: 'helix-menu::part(surface) { min-inline-size: var(--floating-anchor-inline-size) }'.  With 'context', the trigger is an area and the menu is its context menu: a right-click, a long press, Shift+F10 or the menu key over the area opens it at the pointer, or at the area's corner from the keyboard, as Radix's context menu does. A press on the area does not open it, and closing it returns focus to where it was. A touch or a pen held still on the area opens it too, on every browser, since iOS sends no 'contextmenu' for one.  **A trigger with its own action.** With 'open-on="long-press"', a press on the trigger is the trigger's own, and a press held for half a second opens the menu, as React Aria's 'trigger="longPress"' does. Alt+Down or Alt+Up opens it from the keyboard, and the trigger is described by 'long-press-label', which says so.  **A filter field.** 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. */
   "helix-headless-menu": DefineCustomElement<
     HelixHeadlessMenu,
     HelixHeadlessMenuVueProps,
@@ -19219,7 +19276,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessNotificationsVueProps,
     HelixHeadlessNotificationsVueEvents
   >;
-  /** A separate family from 'Input''s 'type="number"'. It renders two buttons, binds four keys 'Input' does not, and handles clamping and stepping.  The field is 'type="text"' with 'inputmode="decimal"'. Tested in a real browser, 'type="number"' fails in three ways: - Typing '12e' gives a '.value' of '""', so the element cannot see what you   typed. A 'type="text"' field keeps '"12e"'. - The mouse wheel over a focused field changes the value, for example from 5   to 4, when you only meant to scroll the page. - 'selectionStart' is 'null', so the caret cannot be managed.  'inputmode="decimal"' keeps the numeric keypad on phones.  'format-options' shows the number with 'Intl.NumberFormat' in 'locale', as a currency, a percent or a unit, while the field is not being edited. Focus shows the number itself, and a typed '$1,200' or '25%' is read back with the same options. The value stays the plain number: '1200', or '0.25' for 25%. The locale's group separators are read in every field, so '1,234' is a number in 'en-US'.  The field and its two buttons sit in a 'role="group"' named by the label, and the field carries 'role-label', "number field" in English, as its 'aria-roledescription', as React Aria's NumberField does. On iOS and iPadOS the field is a plain text field, with no 'role="spinbutton"', which VoiceOver reads as a slider you cannot type in, and no role description, so VoiceOver says the field is required. React Aria's NumberField does the same.  Validity follows the platform's rules: 'min', 'max', and 'step' are checked and reported through the host's own 'setValidity', under the platform's flag names.  Stepping is separate from typing, so a number is not corrected while you type it. While you type, the form holds the number the text reads as, so a field showing '$2,500.50' gives the form 2500.5, and text that is not a number gives it nothing, as a native number field does.  Holding a stepper button down steps once, then again after 400 milliseconds, then every 60 milliseconds until you let go, as React Aria's NumberField does.  **Keyboard.** The field is one tab stop, and the stepper buttons are not in the tab order.  | Key | What it does | |---|---| | Up, Down | Steps the value up or down by 'step'. | | Page Up, Page Down | Steps by 'large-step' steps, ten by default. | | Home, End | Goes to 'min' or 'max', where there is one. Without one, moves the caret. | | Enter | Commits the typed number and submits the form, as a native field does. |  The field has 'role="spinbutton"' with 'aria-valuenow', 'aria-valuemin', 'aria-valuemax', and the formatted text in 'aria-valuetext'. */
+  /** A separate family from 'Input''s 'type="number"'. It renders two buttons, binds four keys 'Input' does not, and handles clamping and stepping.  The field is 'type="text"' with an 'inputmode' for a number. Tested in a real browser, 'type="number"' fails in three ways: - Typing '12e' gives a '.value' of '""', so the element cannot see what you   typed. A 'type="text"' field keeps '"12e"'. - The mouse wheel over a focused field changes the value, for example from 5   to 4, when you only meant to scroll the page. - 'selectionStart' is 'null', so the caret cannot be managed.  'inputmode' keeps a numeric keypad on phones, chosen as React Aria's NumberField chooses it: a keypad with a minus key where the number can be negative, and one with a decimal separator where the format shows a fraction. An iPhone has no keypad with a minus key, so a field that can be negative takes the full keyboard there.  'format-options' shows the number with 'Intl.NumberFormat' in 'locale', as a currency, a percent or a unit, while the field is not being edited. Focus shows the number itself, and a typed '$1,200' or '25%' is read back with the same options. The value stays the plain number: '1200', or '0.25' for 25%. The locale's group separators are read in every field, so '1,234' is a number in 'en-US'.  The field and its two buttons sit in a 'role="group"' named by the label, and the field carries 'role-label', "number field" in English, as its 'aria-roledescription', as React Aria's NumberField does. On iOS and iPadOS the field is a plain text field, with no 'role="spinbutton"', which VoiceOver reads as a slider you cannot type in, and no role description, so VoiceOver says the field is required. React Aria's NumberField does the same.  Validity follows the platform's rules: 'min', 'max', and 'step' are checked and reported through the host's own 'setValidity', under the platform's flag names.  Stepping is separate from typing, so a number is not corrected while you type it. While you type, the form holds the number the text reads as, so a field showing '$2,500.50' gives the form 2500.5, and text that is not a number gives it nothing, as a native number field does.  Holding a stepper button down steps once, then again after 400 milliseconds, then every 60 milliseconds until you let go, as React Aria's NumberField does.  **Keyboard.** The field is one tab stop, and the stepper buttons are not in the tab order.  | Key | What it does | |---|---| | Up, Down | Steps the value up or down by 'step'. | | Page Up, Page Down | Steps by 'large-step' steps, ten by default. | | Home, End | Goes to 'min' or 'max', where there is one. Without one, moves the caret. | | Enter | Commits the typed number and submits the form, as a native field does. |  The field has 'role="spinbutton"' with 'aria-valuenow', 'aria-valuemin', 'aria-valuemax', and the formatted text in 'aria-valuetext'. */
   "helix-headless-number-input": DefineCustomElement<
     HelixHeadlessNumberInput,
     HelixHeadlessNumberInputVueProps,

package/types/words.d.ts

@@ -623,6 +623,12 @@ declare module '@fusion.dev/helix-core' {
        * English: `Show all lines`
        */
       expandLabel: Message
+      /**
+       * The name of the file tabs, read by screen readers.
+       *
+       * English: `Files`
+       */
+      filesLabel: Message
       /**
        * 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
@@ -2312,6 +2318,12 @@ declare module '@fusion.dev/helix-core' {
        * English: `Nothing to show`
        */
       emptyText: Message
+      /**
+       * The filter field's name and placeholder.
+       *
+       * English: `Filter`
+       */
+      filterLabel: Message
       /**
        * The text shown and announced while the rows load.
        *
@@ -2325,6 +2337,12 @@ declare module '@fusion.dev/helix-core' {
        * English: `Long press or press Alt+Down to show the menu`
        */
       longPressLabel: Message
+      /**
+       * The text shown when the filter keeps no rows.
+       *
+       * English: `No matches`
+       */
+      noResultsText: Message
     }
     'helix-meter': {
       /**