@fusion.dev/helix-headless 0.164.0 → 0.166.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/custom-elements.json +837 -64
  2. package/dist/callout/root/callout-root.d.ts +8 -2
  3. package/dist/callout/root/callout-root.js +14 -1
  4. package/dist/code-block/root/code-block-root.d.ts +63 -0
  5. package/dist/code-block/root/code-block-root.js +117 -6
  6. package/dist/date-input/root/date-input-root.d.ts +3 -3
  7. package/dist/date-input/root/date-input-root.js +8 -5
  8. package/dist/element-events.generated.js +15 -2
  9. package/dist/filter-input/menu/filter-menu.d.ts +1 -0
  10. package/dist/filter-input/menu/filter-menu.js +1 -1
  11. package/dist/format-date/root/format-date-root.d.ts +3 -1
  12. package/dist/format-date/root/format-date-root.js +4 -1
  13. package/dist/lightbox/item/lightbox-item.js +3 -1
  14. package/dist/lightbox/root/lightbox-root.d.ts +28 -0
  15. package/dist/lightbox/root/lightbox-root.js +21 -2
  16. package/dist/listbox/root/listbox-root.js +2 -5
  17. package/dist/menu/item/menu-item.d.ts +20 -0
  18. package/dist/menu/item/menu-item.js +53 -20
  19. package/dist/menu/root/menu-root.d.ts +84 -1
  20. package/dist/menu/root/menu-root.js +187 -44
  21. package/dist/number-input/root/number-input-root.d.ts +32 -9
  22. package/dist/number-input/root/number-input-root.js +53 -9
  23. package/dist/object-inspector/root/object-inspector-root.d.ts +5 -0
  24. package/dist/object-inspector/root/object-inspector-root.js +5 -0
  25. package/dist/option/root/index.d.ts +1 -0
  26. package/dist/option/root/index.js +1 -0
  27. package/dist/steps/root/steps-root.d.ts +7 -0
  28. package/dist/steps/root/steps-root.js +7 -0
  29. package/dist/tag/root/index.d.ts +1 -0
  30. package/dist/tag/root/index.js +1 -0
  31. package/dist/time-input/root/time-input-root.d.ts +4 -3
  32. package/dist/time-input/root/time-input-root.js +5 -4
  33. package/dist/time-picker/root/time-picker-root.d.ts +1 -1
  34. package/dist/time-picker/root/time-picker-root.js +5 -2
  35. package/dist/video/root/video-root.d.ts +2 -0
  36. package/dist/video/root/video-root.js +4 -2
  37. package/dist/video-playlist/menu/video-playlist-menu.d.ts +1 -0
  38. package/dist/video-playlist/menu/video-playlist-menu.js +1 -1
  39. package/dist/video-playlist/root/video-playlist-root.js +15 -1
  40. package/lint.json +1 -1
  41. package/package.json +5 -5
  42. package/types/jsx.d.ts +310 -44
  43. package/types/vue.d.ts +68 -11
  44. package/types/words.d.ts +18 -0
package/types/jsx.d.ts CHANGED
@@ -6075,9 +6075,18 @@ export type HelixHeadlessCodeBlockElementEvent<E = Event> = TypedEvent<
6075
6075
  HelixHeadlessCodeBlock,
6076
6076
  E
6077
6077
  >;
6078
+ /** `helix-before-change` event type */
6079
+ export type HelixHeadlessCodeBlockHelixBeforeChangeElementEvent =
6080
+ HelixHeadlessCodeBlockElementEvent<HelixBeforeChangeEvent>;
6078
6081
  /** `helix-before-toggle` event type */
6079
6082
  export type HelixHeadlessCodeBlockHelixBeforeToggleElementEvent =
6080
6083
  HelixHeadlessCodeBlockElementEvent<HelixBeforeToggleEvent>;
6084
+ /** `helix-copy` event type */
6085
+ export type HelixHeadlessCodeBlockHelixCopyElementEvent =
6086
+ HelixHeadlessCodeBlockElementEvent<HelixCopyEvent>;
6087
+ /** `helix-copy-error` event type */
6088
+ export type HelixHeadlessCodeBlockHelixCopyErrorElementEvent =
6089
+ HelixHeadlessCodeBlockElementEvent<HelixCopyErrorEvent>;
6081
6090
  /** `helix-toggle` event type */
6082
6091
  export type HelixHeadlessCodeBlockHelixToggleElementEvent =
6083
6092
  HelixHeadlessCodeBlockElementEvent<HelixToggleEvent>;
@@ -6149,6 +6158,15 @@ block lays out. Not for a diff, whose files each scroll on their own. */
6149
6158
  "expand-label"?: (HelixHeadlessCodeBlock["expandLabel"]) | undefined;
6150
6159
  /** The expand button's words while the cap hides lines. */
6151
6160
  expandLabel?: (HelixHeadlessCodeBlock["expandLabel"]) | undefined;
6161
+ /** The name of the file shown, where the block holds several Code Blocks:
6162
+ the `label` of one, or its `language` without one.
6163
+
6164
+ Unset, or a name no file has, shows the first. */
6165
+ file?: (HelixHeadlessCodeBlock["file"]) | undefined;
6166
+ /** The name of the file tabs, read by screen readers. */
6167
+ "files-label"?: (HelixHeadlessCodeBlock["filesLabel"]) | undefined;
6168
+ /** The name of the file tabs, read by screen readers. */
6169
+ filesLabel?: (HelixHeadlessCodeBlock["filesLabel"]) | undefined;
6152
6170
  /** The words of a button that hides a run of unchanged lines it showed, in a
6153
6171
  diff with `context-lines`. `{count}` is how many, and each language
6154
6172
  writes the forms it has. */
@@ -6283,10 +6301,22 @@ the script still has it. Not called on a server, which has no code to
6283
6301
  read, nor for a diff. */
6284
6302
  highlight?: (HelixHeadlessCodeBlock["highlight"]) | undefined;
6285
6303
 
6304
+ /** A file tab showed its file, whose name `file` now holds. */
6305
+ onchange?: ((e: HelixHeadlessCodeBlockElementEvent) => void) | undefined;
6306
+ /** 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. */
6307
+ "onhelix-before-change"?: ((
6308
+ e: HelixHeadlessCodeBlockHelixBeforeChangeElementEvent,
6309
+ ) => void) | undefined;
6286
6310
  /** The wrap button was pressed, with the `wrap` it asks for in `detail.checked`. Cancelable: cancel it to keep the lines as they are. */
6287
6311
  "onhelix-before-toggle"?: ((
6288
6312
  e: HelixHeadlessCodeBlockHelixBeforeToggleElementEvent,
6289
6313
  ) => void) | undefined;
6314
+ /** The copy button put the code on the clipboard, with the text in `detail.value`. */
6315
+ "onhelix-copy"?: ((e: HelixHeadlessCodeBlockHelixCopyElementEvent) => void) | undefined;
6316
+ /** A press on the copy button put nothing on the clipboard: the browser did not allow the write, or there was no code. */
6317
+ "onhelix-copy-error"?: ((
6318
+ e: HelixHeadlessCodeBlockHelixCopyErrorElementEvent,
6319
+ ) => void) | undefined;
6290
6320
  /** Fired after the wrap button changed `wrap`, with the new value in `detail.checked`. */
6291
6321
  "onhelix-toggle"?: ((e: HelixHeadlessCodeBlockHelixToggleElementEvent) => void) | undefined;
6292
6322
  };
@@ -6358,6 +6388,15 @@ block lays out. Not for a diff, whose files each scroll on their own. */
6358
6388
  "attr:expand-label"?: (HelixHeadlessCodeBlock["expandLabel"]) | undefined;
6359
6389
  /** The expand button's words while the cap hides lines. */
6360
6390
  "prop:expandLabel"?: (HelixHeadlessCodeBlock["expandLabel"]) | undefined;
6391
+ /** The name of the file shown, where the block holds several Code Blocks:
6392
+ the `label` of one, or its `language` without one.
6393
+
6394
+ Unset, or a name no file has, shows the first. */
6395
+ "prop:file"?: (HelixHeadlessCodeBlock["file"]) | undefined;
6396
+ /** The name of the file tabs, read by screen readers. */
6397
+ "attr:files-label"?: (HelixHeadlessCodeBlock["filesLabel"]) | undefined;
6398
+ /** The name of the file tabs, read by screen readers. */
6399
+ "prop:filesLabel"?: (HelixHeadlessCodeBlock["filesLabel"]) | undefined;
6361
6400
  /** The words of a button that hides a run of unchanged lines it showed, in a
6362
6401
  diff with `context-lines`. `{count}` is how many, and each language
6363
6402
  writes the forms it has. */
@@ -6491,10 +6530,22 @@ in the slot, so the copy button copies it as written and a reader without
6491
6530
  the script still has it. Not called on a server, which has no code to
6492
6531
  read, nor for a diff. */
6493
6532
  "prop:highlight"?: (HelixHeadlessCodeBlock["highlight"]) | undefined;
6533
+ /** A file tab showed its file, whose name `file` now holds. */
6534
+ "on:change"?: ((e: HelixHeadlessCodeBlockElementEvent) => void) | undefined;
6535
+ /** 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. */
6536
+ "on:helix-before-change"?: ((
6537
+ e: HelixHeadlessCodeBlockHelixBeforeChangeElementEvent,
6538
+ ) => void) | undefined;
6494
6539
  /** The wrap button was pressed, with the `wrap` it asks for in `detail.checked`. Cancelable: cancel it to keep the lines as they are. */
6495
6540
  "on:helix-before-toggle"?: ((
6496
6541
  e: HelixHeadlessCodeBlockHelixBeforeToggleElementEvent,
6497
6542
  ) => void) | undefined;
6543
+ /** The copy button put the code on the clipboard, with the text in `detail.value`. */
6544
+ "on:helix-copy"?: ((e: HelixHeadlessCodeBlockHelixCopyElementEvent) => void) | undefined;
6545
+ /** A press on the copy button put nothing on the clipboard: the browser did not allow the write, or there was no code. */
6546
+ "on:helix-copy-error"?: ((
6547
+ e: HelixHeadlessCodeBlockHelixCopyErrorElementEvent,
6548
+ ) => void) | undefined;
6498
6549
  /** Fired after the wrap button changed `wrap`, with the new value in `detail.checked`. */
6499
6550
  "on:helix-toggle"?: ((
6500
6551
  e: HelixHeadlessCodeBlockHelixToggleElementEvent,
@@ -14258,7 +14309,9 @@ place of the date: `long` ("3 hours ago"), `short` ("3 hr. ago") or
14258
14309
  `narrow` ("3h ago").
14259
14310
 
14260
14311
  The reading refreshes as it goes stale, as `elapsed` does, and the whole
14261
- date is its title. `elapsed` wins where both are set. */
14312
+ date is its title. `elapsed` wins where both are set. Written with no
14313
+ value, as `elapsed` is, or with a style `Intl` does not know, it reads
14314
+ `long`. */
14262
14315
  relative?: (HelixHeadlessFormatDate["relative"]) | undefined;
14263
14316
  /** How the second is written, where a time of day is shown. */
14264
14317
  second?: (HelixHeadlessFormatDate["second"]) | undefined;
@@ -14400,7 +14453,9 @@ place of the date: `long` ("3 hours ago"), `short` ("3 hr. ago") or
14400
14453
  `narrow` ("3h ago").
14401
14454
 
14402
14455
  The reading refreshes as it goes stale, as `elapsed` does, and the whole
14403
- date is its title. `elapsed` wins where both are set. */
14456
+ date is its title. `elapsed` wins where both are set. Written with no
14457
+ value, as `elapsed` is, or with a style `Intl` does not know, it reads
14458
+ `long`. */
14404
14459
  "prop:relative"?: (HelixHeadlessFormatDate["relative"]) | undefined;
14405
14460
  /** How the second is written, where a time of day is shown. */
14406
14461
  "prop:second"?: (HelixHeadlessFormatDate["second"]) | undefined;
@@ -20859,6 +20914,9 @@ export type HelixHeadlessMenuHelixBeforeCloseElementEvent =
20859
20914
  /** `helix-before-open` event type */
20860
20915
  export type HelixHeadlessMenuHelixBeforeOpenElementEvent =
20861
20916
  HelixHeadlessMenuElementEvent<HelixBeforeOpenEvent>;
20917
+ /** `helix-filter` event type */
20918
+ export type HelixHeadlessMenuHelixFilterElementEvent =
20919
+ HelixHeadlessMenuElementEvent<HelixFilterEvent>;
20862
20920
  /** `helix-select` event type */
20863
20921
  export type HelixHeadlessMenuHelixSelectElementEvent =
20864
20922
  HelixHeadlessMenuElementEvent<HelixSelectEvent>;
@@ -20886,6 +20944,18 @@ Ark UI's `closeOnSelect` does. A row's own `close-on-select` wins over this. */
20886
20944
  /** Whether the menu is the trigger's context menu: it opens where the reader
20887
20945
  asks for one, with a right-click, a long press, Shift+F10 or the menu key. */
20888
20946
  context?: (HelixHeadlessMenu["context"]) | undefined;
20947
+ /** The text the rows are filtered by, which the filter field holds.
20948
+
20949
+ Cleared as the menu closes and as a submenu opens or closes, so each page
20950
+ starts with every row showing. */
20951
+ filter?: (HelixHeadlessMenu["filter"]) | undefined;
20952
+ /** Whether the menu shows a field above its rows that narrows them as the
20953
+ reader types, with focus staying in the field. */
20954
+ filterable?: (HelixHeadlessMenu["filterable"]) | undefined;
20955
+ /** The filter field's name and placeholder. */
20956
+ "filter-label"?: (HelixHeadlessMenu["filterLabel"]) | undefined;
20957
+ /** The filter field's name and placeholder. */
20958
+ filterLabel?: (HelixHeadlessMenu["filterLabel"]) | undefined;
20889
20959
  /** Accessible name for the surface.
20890
20960
 
20891
20961
  Empty by default, which names the surface by its trigger, so a menu opened
@@ -20898,6 +20968,10 @@ to open the menu. Translate it with the rest of your interface. */
20898
20968
  /** The description a trigger gives under `open-on="long-press"`, saying how
20899
20969
  to open the menu. Translate it with the rest of your interface. */
20900
20970
  longPressLabel?: (HelixHeadlessMenu["longPressLabel"]) | undefined;
20971
+ /** The text shown when the filter keeps no rows. */
20972
+ "no-results-text"?: (HelixHeadlessMenu["noResultsText"]) | undefined;
20973
+ /** The text shown when the filter keeps no rows. */
20974
+ noResultsText?: (HelixHeadlessMenu["noResultsText"]) | undefined;
20901
20975
  /** Space between the trigger and the surface, in pixels. */
20902
20976
  offset?: (HelixHeadlessMenu["offset"]) | undefined;
20903
20977
  /** What opens the menu from its trigger. `long-press` leaves a press to the
@@ -20946,6 +21020,13 @@ hydration, or diffed by a framework, it comes back holding whatever the
20946
21020
  last reader did rather than what the author wrote. `:state(open)` carries
20947
21021
  the resolved state for stylesheets, which is what the mirror is for. */
20948
21022
  open?: (HelixHeadlessMenu["open"]) | undefined;
21023
+ /** Whether a row is kept by the filter: a function given the row's words and
21024
+ the filter, trimmed, that returns `true` to keep it showing, as React
21025
+ Aria's `Autocomplete` takes `filter`. See Listbox's `filterMatch`.
21026
+
21027
+ Absent, a row is kept where its words hold the filter, in any case. A
21028
+ property only, there being no way to write a function in markup. */
21029
+ filterMatch?: (HelixHeadlessMenu["filterMatch"]) | undefined;
20949
21030
 
20950
21031
  /** The menu is about to close. Cancelable: cancel it to keep it open. */
20951
21032
  "onhelix-before-close"?: ((
@@ -20955,6 +21036,8 @@ the resolved state for stylesheets, which is what the mirror is for. */
20955
21036
  "onhelix-before-open"?: ((
20956
21037
  e: HelixHeadlessMenuHelixBeforeOpenElementEvent,
20957
21038
  ) => void) | undefined;
21039
+ /** 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. */
21040
+ "onhelix-filter"?: ((e: HelixHeadlessMenuHelixFilterElementEvent) => void) | undefined;
20958
21041
  /** An item was chosen. Cancelable: cancel it to keep the menu open. */
20959
21042
  "onhelix-select"?: ((e: HelixHeadlessMenuHelixSelectElementEvent) => void) | undefined;
20960
21043
  /** The menu opened or closed. The event carries `newState` and `oldState`. */
@@ -20981,6 +21064,18 @@ Ark UI's `closeOnSelect` does. A row's own `close-on-select` wins over this. */
20981
21064
  /** Whether the menu is the trigger's context menu: it opens where the reader
20982
21065
  asks for one, with a right-click, a long press, Shift+F10 or the menu key. */
20983
21066
  "prop:context"?: (HelixHeadlessMenu["context"]) | undefined;
21067
+ /** The text the rows are filtered by, which the filter field holds.
21068
+
21069
+ Cleared as the menu closes and as a submenu opens or closes, so each page
21070
+ starts with every row showing. */
21071
+ "prop:filter"?: (HelixHeadlessMenu["filter"]) | undefined;
21072
+ /** Whether the menu shows a field above its rows that narrows them as the
21073
+ reader types, with focus staying in the field. */
21074
+ "prop:filterable"?: (HelixHeadlessMenu["filterable"]) | undefined;
21075
+ /** The filter field's name and placeholder. */
21076
+ "attr:filter-label"?: (HelixHeadlessMenu["filterLabel"]) | undefined;
21077
+ /** The filter field's name and placeholder. */
21078
+ "prop:filterLabel"?: (HelixHeadlessMenu["filterLabel"]) | undefined;
20984
21079
  /** Accessible name for the surface.
20985
21080
 
20986
21081
  Empty by default, which names the surface by its trigger, so a menu opened
@@ -20993,6 +21088,10 @@ to open the menu. Translate it with the rest of your interface. */
20993
21088
  /** The description a trigger gives under `open-on="long-press"`, saying how
20994
21089
  to open the menu. Translate it with the rest of your interface. */
20995
21090
  "prop:longPressLabel"?: (HelixHeadlessMenu["longPressLabel"]) | undefined;
21091
+ /** The text shown when the filter keeps no rows. */
21092
+ "attr:no-results-text"?: (HelixHeadlessMenu["noResultsText"]) | undefined;
21093
+ /** The text shown when the filter keeps no rows. */
21094
+ "prop:noResultsText"?: (HelixHeadlessMenu["noResultsText"]) | undefined;
20996
21095
  /** Space between the trigger and the surface, in pixels. */
20997
21096
  "prop:offset"?: (HelixHeadlessMenu["offset"]) | undefined;
20998
21097
  /** What opens the menu from its trigger. `long-press` leaves a press to the
@@ -21041,6 +21140,13 @@ hydration, or diffed by a framework, it comes back holding whatever the
21041
21140
  last reader did rather than what the author wrote. `:state(open)` carries
21042
21141
  the resolved state for stylesheets, which is what the mirror is for. */
21043
21142
  "prop:open"?: (HelixHeadlessMenu["open"]) | undefined;
21143
+ /** Whether a row is kept by the filter: a function given the row's words and
21144
+ the filter, trimmed, that returns `true` to keep it showing, as React
21145
+ Aria's `Autocomplete` takes `filter`. See Listbox's `filterMatch`.
21146
+
21147
+ Absent, a row is kept where its words hold the filter, in any case. A
21148
+ property only, there being no way to write a function in markup. */
21149
+ "prop:filterMatch"?: (HelixHeadlessMenu["filterMatch"]) | undefined;
21044
21150
  /** The menu is about to close. Cancelable: cancel it to keep it open. */
21045
21151
  "on:helix-before-close"?: ((
21046
21152
  e: HelixHeadlessMenuHelixBeforeCloseElementEvent,
@@ -21049,6 +21155,8 @@ the resolved state for stylesheets, which is what the mirror is for. */
21049
21155
  "on:helix-before-open"?: ((
21050
21156
  e: HelixHeadlessMenuHelixBeforeOpenElementEvent,
21051
21157
  ) => void) | undefined;
21158
+ /** 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. */
21159
+ "on:helix-filter"?: ((e: HelixHeadlessMenuHelixFilterElementEvent) => void) | undefined;
21052
21160
  /** An item was chosen. Cancelable: cancel it to keep the menu open. */
21053
21161
  "on:helix-select"?: ((e: HelixHeadlessMenuHelixSelectElementEvent) => void) | undefined;
21054
21162
  /** The menu opened or closed. The event carries `newState` and `oldState`. */
@@ -22042,10 +22150,11 @@ one they already know. */
22042
22150
  invalid, as it is in a native number field.
22043
22151
 
22044
22152
  Unset, a step moves by one, or by one percent under a percent format, and
22045
- a typed number is rounded to the smallest amount `format-options` shows
22046
- rather than to whole steps, as React Aria's NumberField does: a field
22047
- showing dollars keeps the cents typed into it. Without `format-options`
22048
- the grid is whole numbers, as in a native number field. */
22153
+ a typed number is rounded to the smallest amount the format shows, as
22154
+ React Aria's NumberField does: a field showing dollars keeps the cents
22155
+ typed into it, and one with no `format-options` keeps three decimal
22156
+ places. `any` puts the number on no grid, as it does in a native number
22157
+ field: a step moves by one, and any number in range is valid. */
22049
22158
  step?: (HelixHeadlessNumberInput["step"]) | undefined;
22050
22159
  /** The message the browser shows when the number is off the step grid, with
22051
22160
  `{below}` and `{above}` filled in with the nearest valid values, written in
@@ -22320,10 +22429,11 @@ one they already know. */
22320
22429
  invalid, as it is in a native number field.
22321
22430
 
22322
22431
  Unset, a step moves by one, or by one percent under a percent format, and
22323
- a typed number is rounded to the smallest amount `format-options` shows
22324
- rather than to whole steps, as React Aria's NumberField does: a field
22325
- showing dollars keeps the cents typed into it. Without `format-options`
22326
- the grid is whole numbers, as in a native number field. */
22432
+ a typed number is rounded to the smallest amount the format shows, as
22433
+ React Aria's NumberField does: a field showing dollars keeps the cents
22434
+ typed into it, and one with no `format-options` keeps three decimal
22435
+ places. `any` puts the number on no grid, as it does in a native number
22436
+ field: a step moves by one, and any number in range is valid. */
22327
22437
  "prop:step"?: (HelixHeadlessNumberInput["step"]) | undefined;
22328
22438
  /** The message the browser shows when the number is off the step grid, with
22329
22439
  `{below}` and `{above}` filled in with the nearest valid values, written in
@@ -40914,6 +41024,18 @@ export type CustomElements = {
40914
41024
  * keeps hydration clean, and draws the diff once it can read the content. Diff
40915
41025
  * mode is experimental. The rest of the family is stable.
40916
41026
  *
41027
+ * **Several blocks are files**, one shown at a time under a row of tabs, as
41028
+ * Sandbox shows its source panes. Put Code Blocks in the default slot of a
41029
+ * Code Block, and each is a file named on its tab by its `label` or, without
41030
+ * one, its `language`. `file` holds the name of the file shown. The tabs are a
41031
+ * tab list: the arrow keys move to a tab and show its file, the two swapping
41032
+ * on a right-to-left page, and Home and End go to the first and the last.
41033
+ * Choosing one sends `helix-before-change` with the file's name, which you can
41034
+ * cancel, and `change` once `file` holds it. The files not shown carry
41035
+ * `hidden`, and the one shown draws no name of its own, its tab naming it. One
41036
+ * block draws no tabs. A server cannot see the blocks inside, so the client
41037
+ * draws the tabs once it upgrades.
41038
+ *
40917
41039
  * ## Attributes & Properties
40918
41040
  *
40919
41041
  * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -40947,6 +41069,11 @@ export type CustomElements = {
40947
41069
  * the button is drawn only while the cap hides something, measured as the
40948
41070
  * block lays out. Not for a diff, whose files each scroll on their own.
40949
41071
  * - `expand-label`/`expandLabel`: The expand button's words while the cap hides lines.
41072
+ * - `file`: The name of the file shown, where the block holds several Code Blocks:
41073
+ * the `label` of one, or its `language` without one.
41074
+ *
41075
+ * Unset, or a name no file has, shows the first.
41076
+ * - `files-label`/`filesLabel`: The name of the file tabs, read by screen readers.
40950
41077
  * - `hide-unchanged-label`/`hideUnchangedLabel`: The words of a button that hides a run of unchanged lines it showed, in a
40951
41078
  * diff with `context-lines`. `{count}` is how many, and each language
40952
41079
  * writes the forms it has.
@@ -41053,7 +41180,11 @@ export type CustomElements = {
41053
41180
  *
41054
41181
  * Events that will be emitted by the component.
41055
41182
  *
41183
+ * - `change`: A file tab showed its file, whose name `file` now holds.
41184
+ * - `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.
41056
41185
  * - `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.
41186
+ * - `helix-copy`: The copy button put the code on the clipboard, with the text in `detail.value`.
41187
+ * - `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.
41057
41188
  * - `helix-toggle`: Fired after the wrap button changed `wrap`, with the new value in `detail.checked`.
41058
41189
  *
41059
41190
  * ## Slots
@@ -41102,6 +41233,8 @@ export type CustomElements = {
41102
41233
  * - `copy-tooltip-top`: The tooltip while it is above the copy button. Applied with `copy-tooltip`.
41103
41234
  * - `expand`: The button under a capped block that shows every line, and fewer again. Drawn when `expandable` is set and the cap hides something.
41104
41235
  * - `file`: In a diff, one file's header and block.
41236
+ * - `file-tab`: One file tab, `aria-selected` while its file is shown.
41237
+ * - `files`: The file tabs over the blocks a block holds, where there are several.
41105
41238
  * - `filler`: In a split diff, the empty row opposite a line the other side does not have.
41106
41239
  * - `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`.
41107
41240
  * - `frame`: The code, and the copy button beside it where there is no header.
@@ -41124,6 +41257,7 @@ export type CustomElements = {
41124
41257
  * These can be used to apply styling when a component is in a given state.
41125
41258
  *
41126
41259
  * - `expanded`: The expand button has shown every line of a capped block.
41260
+ * - `tabbed`: The block is one of several files under another block's tabs, which name it, so it draws no name of its own.
41127
41261
  * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
41128
41262
  */
41129
41263
  "helix-headless-code-block": Partial<
@@ -46333,6 +46467,7 @@ export type CustomElements = {
46333
46467
  * - `menu-header`: The bar above a field's page, with the back button and the field's name.
46334
46468
  * - `menu-live`: The inner menu's `live` part: the region that screen readers announce the empty and loading messages from.
46335
46469
  * - `menu-loading`: Shown while the fields are loading.
46470
+ * - `menu-search-field`: The inner menu's filter field, drawn with `filterable`.
46336
46471
  * - `menu-surface`: The floating panel the menu is drawn on.
46337
46472
  * - `menu-title`: The name of the field whose page is showing.
46338
46473
  *
@@ -46941,7 +47076,9 @@ export type CustomElements = {
46941
47076
  * `narrow` ("3h ago").
46942
47077
  *
46943
47078
  * The reading refreshes as it goes stale, as `elapsed` does, and the whole
46944
- * date is its title. `elapsed` wins where both are set.
47079
+ * date is its title. `elapsed` wins where both are set. Written with no
47080
+ * value, as `elapsed` is, or with a style `Intl` does not know, it reads
47081
+ * `long`.
46945
47082
  * - `second`: How the second is written, where a time of day is shown.
46946
47083
  * - `time-style`/`timeStyle`: The locale's own pattern for the time of day: `full`, `long`, `medium`, or
46947
47084
  * `short`. Set, it stands in for `hour`, `minute`, `second` and
@@ -51771,6 +51908,12 @@ export type CustomElements = {
51771
51908
  * slots, so a mark of your own replaces either by being slotted. Neither is
51772
51909
  * read as part of the row's name.
51773
51910
  *
51911
+ * In a menu with `filterable`, focus stays in the menu's filter field and the
51912
+ * row the arrow keys reach is highlighted: the field names it with
51913
+ * `aria-activedescendant`, the row carries its role on its host so the field
51914
+ * can point at it, and `:state(highlighted)` says which row it is. A row with
51915
+ * an `href` then follows its link without an anchor, as `Option` does.
51916
+ *
51774
51917
  * ## Attributes & Properties
51775
51918
  *
51776
51919
  * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -51923,6 +52066,7 @@ export type CustomElements = {
51923
52066
  * These can be used to apply styling when a component is in a given state.
51924
52067
  *
51925
52068
  * - `checked`: The row is checked.
52069
+ * - `highlighted`: In a menu with `filterable`, the arrow keys or the pointer reached the row while focus stays in the filter field.
51926
52070
  * - `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.
51927
52071
  * - `submenu-start`: Under `submenus="flyout"`, a row in this row's submenu has content before its label, so the submenu keeps its leading column.
51928
52072
  * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
@@ -51992,6 +52136,21 @@ export type CustomElements = {
51992
52136
  * opens it from the keyboard, and the trigger is described by
51993
52137
  * `long-press-label`, which says so.
51994
52138
  *
52139
+ * **A filter field.** With `filterable`, the menu opens with focus in a field
52140
+ * above its rows, and typing narrows the rows of the page the keys move in,
52141
+ * as React Aria's `Autocomplete` around a `Menu` does. A row is kept where its
52142
+ * words hold the filter, in any case, or where `filterMatch` says so. Each
52143
+ * page starts unfiltered, and the filter is cleared as the menu closes. Where
52144
+ * typing keeps no row, the menu shows `no-results-text`. Focus stays in the
52145
+ * field: Up and Down Arrow move the highlight through the rows that are left,
52146
+ * Enter chooses the highlighted row, Right Arrow opens its submenu, Left Arrow
52147
+ * on a submenu goes back, and Escape clears the filter and then closes the
52148
+ * menu. Home, End and the other keys move the caret and type. The field names
52149
+ * the highlighted row with `aria-activedescendant`, and the rows are a `menu`
52150
+ * after the field. Cancel `helix-filter` to keep every row
52151
+ * showing and narrow the rows yourself, such as by replacing them with rows
52152
+ * from a server.
52153
+ *
51995
52154
  * ## Attributes & Properties
51996
52155
  *
51997
52156
  * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -52004,6 +52163,13 @@ export type CustomElements = {
52004
52163
  * Ark UI's `closeOnSelect` does. A row's own `close-on-select` wins over this.
52005
52164
  * - `context`: Whether the menu is the trigger's context menu: it opens where the reader
52006
52165
  * asks for one, with a right-click, a long press, Shift+F10 or the menu key.
52166
+ * - `filter`: The text the rows are filtered by, which the filter field holds.
52167
+ *
52168
+ * Cleared as the menu closes and as a submenu opens or closes, so each page
52169
+ * starts with every row showing.
52170
+ * - `filterable`: Whether the menu shows a field above its rows that narrows them as the
52171
+ * reader types, with focus staying in the field.
52172
+ * - `filter-label`/`filterLabel`: The filter field's name and placeholder.
52007
52173
  * - `label`: Accessible name for the surface.
52008
52174
  *
52009
52175
  * Empty by default, which names the surface by its trigger, so a menu opened
@@ -52011,6 +52177,7 @@ export type CustomElements = {
52011
52177
  * `aria-labelledby` on the host names it too, and wins over both.
52012
52178
  * - `long-press-label`/`longPressLabel`: The description a trigger gives under `open-on="long-press"`, saying how
52013
52179
  * to open the menu. Translate it with the rest of your interface.
52180
+ * - `no-results-text`/`noResultsText`: The text shown when the filter keeps no rows.
52014
52181
  * - `offset`: Space between the trigger and the surface, in pixels.
52015
52182
  * - `open-on`/`openOn`: What opens the menu from its trigger. `long-press` leaves a press to the
52016
52183
  * trigger's own action and opens the menu on a press held for half a second,
@@ -52040,6 +52207,12 @@ export type CustomElements = {
52040
52207
  * hydration, or diffed by a framework, it comes back holding whatever the
52041
52208
  * last reader did rather than what the author wrote. `:state(open)` carries
52042
52209
  * the resolved state for stylesheets, which is what the mirror is for.
52210
+ * - `filterMatch`: Whether a row is kept by the filter: a function given the row's words and
52211
+ * the filter, trimmed, that returns `true` to keep it showing, as React
52212
+ * Aria's `Autocomplete` takes `filter`. See Listbox's `filterMatch`.
52213
+ *
52214
+ * Absent, a row is kept where its words hold the filter, in any case. A
52215
+ * property only, there being no way to write a function in markup. (property only)
52043
52216
  * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
52044
52217
  *
52045
52218
  * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -52067,6 +52240,7 @@ export type CustomElements = {
52067
52240
  *
52068
52241
  * - `helix-before-close`: The menu is about to close. Cancelable: cancel it to keep it open.
52069
52242
  * - `helix-before-open`: The menu is about to open. Cancelable: cancel it to keep it closed.
52243
+ * - `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.
52070
52244
  * - `helix-select`: An item was chosen. Cancelable: cancel it to keep the menu open.
52071
52245
  * - `toggle`: The menu opened or closed. The event carries `newState` and `oldState`.
52072
52246
  *
@@ -52075,6 +52249,7 @@ export type CustomElements = {
52075
52249
  * Areas where markup can be added to the component.
52076
52250
  *
52077
52251
  * - `(default)`: The items.
52252
+ * - `no-results`: What the menu shows when the filter keeps no rows, for content richer than `no-results-text`.
52078
52253
  * - `trigger`: The control that opens the menu, or with `context` the area a context menu opens over.
52079
52254
  *
52080
52255
  * ## Methods
@@ -52110,7 +52285,8 @@ export type CustomElements = {
52110
52285
  * - `header`: The bar above a submenu, holding the way back and its name.
52111
52286
  * - `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.
52112
52287
  * - `loading`: The text shown while the items are loading.
52113
- * - `surface`: The floating panel the menu is drawn on.
52288
+ * - `search-field`: With `filterable`, the field that narrows the rows.
52289
+ * - `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`.
52114
52290
  * - `title`: The name of the submenu that is showing.
52115
52291
  *
52116
52292
  * ## CSS States
@@ -53007,7 +53183,7 @@ export type CustomElements = {
53007
53183
  * A separate family from `Input`'s `type="number"`. It renders two buttons,
53008
53184
  * binds four keys `Input` does not, and handles clamping and stepping.
53009
53185
  *
53010
- * The field is `type="text"` with `inputmode="decimal"`. Tested in a real
53186
+ * The field is `type="text"` with an `inputmode` for a number. Tested in a real
53011
53187
  * browser, `type="number"` fails in three ways:
53012
53188
  * - Typing `12e` gives a `.value` of `""`, so the element cannot see what you
53013
53189
  * typed. A `type="text"` field keeps `"12e"`.
@@ -53015,7 +53191,11 @@ export type CustomElements = {
53015
53191
  * to 4, when you only meant to scroll the page.
53016
53192
  * - `selectionStart` is `null`, so the caret cannot be managed.
53017
53193
  *
53018
- * `inputmode="decimal"` keeps the numeric keypad on phones.
53194
+ * `inputmode` keeps a numeric keypad on phones, chosen as React Aria's
53195
+ * NumberField chooses it: a keypad with a minus key where the number can be
53196
+ * negative, and one with a decimal separator where the format shows a
53197
+ * fraction. An iPhone has no keypad with a minus key, so a field that can be
53198
+ * negative takes the full keyboard there.
53019
53199
  *
53020
53200
  * `format-options` shows the number with `Intl.NumberFormat` in `locale`, as a
53021
53201
  * currency, a percent or a unit, while the field is not being edited. Focus
@@ -53126,10 +53306,11 @@ export type CustomElements = {
53126
53306
  * invalid, as it is in a native number field.
53127
53307
  *
53128
53308
  * Unset, a step moves by one, or by one percent under a percent format, and
53129
- * a typed number is rounded to the smallest amount `format-options` shows
53130
- * rather than to whole steps, as React Aria's NumberField does: a field
53131
- * showing dollars keeps the cents typed into it. Without `format-options`
53132
- * the grid is whole numbers, as in a native number field.
53309
+ * a typed number is rounded to the smallest amount the format shows, as
53310
+ * React Aria's NumberField does: a field showing dollars keeps the cents
53311
+ * typed into it, and one with no `format-options` keeps three decimal
53312
+ * places. `any` puts the number on no grid, as it does in a native number
53313
+ * field: a step moves by one, and any number in range is valid.
53133
53314
  * - `step-mismatch-message`/`stepMismatchMessage`: The message the browser shows when the number is off the step grid, with
53134
53315
  * `{below}` and `{above}` filled in with the nearest valid values, written in
53135
53316
  * the locale.
@@ -53351,6 +53532,8 @@ export type CustomElements = {
53351
53532
  *
53352
53533
  * These can be used to apply styling when a component is in a given state.
53353
53534
  *
53535
+ * - `at-max`: The number is at `max`, so it cannot step up, as React Aria's NumberField says with `canIncrement`.
53536
+ * - `at-min`: The number is at `min`, so it cannot step down.
53354
53537
  * - `invalid`: The control has an error to show, from the browser's validation or from your `feedback`.
53355
53538
  * - `scrubbing`: The label is being dragged to change the value, under `scrub`, as Zag's scrubber says while it is held.
53356
53539
  * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
@@ -53555,6 +53738,13 @@ export type CustomElements = {
53555
53738
  *
53556
53739
  * - `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.
53557
53740
  *
53741
+ * ## Methods
53742
+ *
53743
+ * Methods that can be called to access component functionality.
53744
+ *
53745
+ * - `focus(options?: FocusOptions) => void`: Moves focus to the row the keys move from, or to the tree while that row
53746
+ * is scrolled out of the window, as Tab reaches them.
53747
+ *
53558
53748
  * ## CSS Custom Properties
53559
53749
  *
53560
53750
  * CSS variables available for styling the component.
@@ -58585,6 +58775,10 @@ export type CustomElements = {
58585
58775
  *
58586
58776
  * Methods that can be called to access component functionality.
58587
58777
  *
58778
+ * - `requestActive(next: string, cause?: string) => boolean`: Requests a new current stage, and returns whether it moved.
58779
+ *
58780
+ * Where only a step's `current` says where the reader is, `active` is first
58781
+ * written with that step, so `helix-activate` names it as `previous`.
58588
58782
  * - `next() => boolean`: Moves to the next stage that can be gone to, as Ark UI's `goToNextStep`
58589
58783
  * does. Returns whether it moved: not past the last stage, not into a stage
58590
58784
  * `linear` holds out of reach, and not where a listener refused.
@@ -58593,15 +58787,6 @@ export type CustomElements = {
58593
58787
  * and the invalid mark from every stage, as Ark UI's `resetStep` does.
58594
58788
  * Returns whether it moved: a listener can refuse the move with
58595
58789
  * `helix-before-activate`, and the stages then keep their marks.
58596
- * - `requestActive(next: string, cause?: string) => boolean`: Requests a new current item, and returns whether the change was applied.
58597
- *
58598
- * Announces before it acts, so `preventDefault()` on the `helix-before-activate` is
58599
- * a refusal and nothing moves. Unlike a native control, nothing has moved
58600
- * by the time this runs, so refusing is simply not writing: there is
58601
- * nothing to put back. Nobody refusing means the set updates itself,
58602
- * whether or not a consumer declared `active`, a declared property being a
58603
- * seed and a correction. `cause` says why, where the family names its
58604
- * causes, and reaches the event as `detail.cause`.
58605
58790
  *
58606
58791
  * ## CSS Custom Properties
58607
58792
  *
@@ -63996,6 +64181,7 @@ export type CustomElements = {
63996
64181
  * - `menu-header`: The bar above a submenu, holding the back button and the submenu's name.
63997
64182
  * - `menu-live`: The inner menu's `live` part, the region screen readers announce its empty and loading messages from.
63998
64183
  * - `menu-loading`: Shown while the items are loading.
64184
+ * - `menu-search-field`: The inner menu's filter field, drawn with `filterable`.
63999
64185
  * - `menu-surface`: The floating panel the menu is drawn on.
64000
64186
  * - `menu-title`: The name of the submenu that is shown.
64001
64187
  * - `poster`: An entry's poster image, if it has one.
@@ -64587,6 +64773,7 @@ export type CustomElements = {
64587
64773
  * - `captions-menu-header`: The bar above a submenu, holding the way back and its name.
64588
64774
  * - `captions-menu-live`: The inner menu's `live` part, a live region that repeats the empty and loading text for screen readers.
64589
64775
  * - `captions-menu-loading`: The text shown while the items are loading.
64776
+ * - `captions-menu-search-field`: The inner menu's filter field, drawn with `filterable`.
64590
64777
  * - `captions-menu-surface`: The floating panel the menu is drawn on.
64591
64778
  * - `captions-menu-title`: The name of the submenu that is showing.
64592
64779
  * - `controls`: The control bar along the bottom.
@@ -64618,6 +64805,7 @@ export type CustomElements = {
64618
64805
  * - `overflow-header`: The bar above a submenu, holding the way back and its name.
64619
64806
  * - `overflow-live`: The inner menu's `live` part, a live region that repeats the empty and loading text for screen readers.
64620
64807
  * - `overflow-loading`: The text shown while the items are loading.
64808
+ * - `overflow-search-field`: The inner menu's filter field, drawn with `filterable`.
64621
64809
  * - `overflow-surface`: The floating panel the menu is drawn on.
64622
64810
  * - `overflow-title`: The name of the submenu that is showing.
64623
64811
  * - `pip`: The picture-in-picture button, when `extra-controls` includes it and the browser supports it.
@@ -69713,6 +69901,18 @@ export type CustomElementsSolidJs = {
69713
69901
  * keeps hydration clean, and draws the diff once it can read the content. Diff
69714
69902
  * mode is experimental. The rest of the family is stable.
69715
69903
  *
69904
+ * **Several blocks are files**, one shown at a time under a row of tabs, as
69905
+ * Sandbox shows its source panes. Put Code Blocks in the default slot of a
69906
+ * Code Block, and each is a file named on its tab by its `label` or, without
69907
+ * one, its `language`. `file` holds the name of the file shown. The tabs are a
69908
+ * tab list: the arrow keys move to a tab and show its file, the two swapping
69909
+ * on a right-to-left page, and Home and End go to the first and the last.
69910
+ * Choosing one sends `helix-before-change` with the file's name, which you can
69911
+ * cancel, and `change` once `file` holds it. The files not shown carry
69912
+ * `hidden`, and the one shown draws no name of its own, its tab naming it. One
69913
+ * block draws no tabs. A server cannot see the blocks inside, so the client
69914
+ * draws the tabs once it upgrades.
69915
+ *
69716
69916
  * ## Attributes & Properties
69717
69917
  *
69718
69918
  * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -69746,6 +69946,11 @@ export type CustomElementsSolidJs = {
69746
69946
  * the button is drawn only while the cap hides something, measured as the
69747
69947
  * block lays out. Not for a diff, whose files each scroll on their own.
69748
69948
  * - `expand-label`/`expandLabel`: The expand button's words while the cap hides lines.
69949
+ * - `file`: The name of the file shown, where the block holds several Code Blocks:
69950
+ * the `label` of one, or its `language` without one.
69951
+ *
69952
+ * Unset, or a name no file has, shows the first.
69953
+ * - `files-label`/`filesLabel`: The name of the file tabs, read by screen readers.
69749
69954
  * - `hide-unchanged-label`/`hideUnchangedLabel`: The words of a button that hides a run of unchanged lines it showed, in a
69750
69955
  * diff with `context-lines`. `{count}` is how many, and each language
69751
69956
  * writes the forms it has.
@@ -69852,7 +70057,11 @@ export type CustomElementsSolidJs = {
69852
70057
  *
69853
70058
  * Events that will be emitted by the component.
69854
70059
  *
70060
+ * - `change`: A file tab showed its file, whose name `file` now holds.
70061
+ * - `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.
69855
70062
  * - `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.
70063
+ * - `helix-copy`: The copy button put the code on the clipboard, with the text in `detail.value`.
70064
+ * - `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.
69856
70065
  * - `helix-toggle`: Fired after the wrap button changed `wrap`, with the new value in `detail.checked`.
69857
70066
  *
69858
70067
  * ## Slots
@@ -69901,6 +70110,8 @@ export type CustomElementsSolidJs = {
69901
70110
  * - `copy-tooltip-top`: The tooltip while it is above the copy button. Applied with `copy-tooltip`.
69902
70111
  * - `expand`: The button under a capped block that shows every line, and fewer again. Drawn when `expandable` is set and the cap hides something.
69903
70112
  * - `file`: In a diff, one file's header and block.
70113
+ * - `file-tab`: One file tab, `aria-selected` while its file is shown.
70114
+ * - `files`: The file tabs over the blocks a block holds, where there are several.
69904
70115
  * - `filler`: In a split diff, the empty row opposite a line the other side does not have.
69905
70116
  * - `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`.
69906
70117
  * - `frame`: The code, and the copy button beside it where there is no header.
@@ -69923,6 +70134,7 @@ export type CustomElementsSolidJs = {
69923
70134
  * These can be used to apply styling when a component is in a given state.
69924
70135
  *
69925
70136
  * - `expanded`: The expand button has shown every line of a capped block.
70137
+ * - `tabbed`: The block is one of several files under another block's tabs, which name it, so it draws no name of its own.
69926
70138
  * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
69927
70139
  */
69928
70140
  "helix-headless-code-block": Partial<
@@ -75178,6 +75390,7 @@ export type CustomElementsSolidJs = {
75178
75390
  * - `menu-header`: The bar above a field's page, with the back button and the field's name.
75179
75391
  * - `menu-live`: The inner menu's `live` part: the region that screen readers announce the empty and loading messages from.
75180
75392
  * - `menu-loading`: Shown while the fields are loading.
75393
+ * - `menu-search-field`: The inner menu's filter field, drawn with `filterable`.
75181
75394
  * - `menu-surface`: The floating panel the menu is drawn on.
75182
75395
  * - `menu-title`: The name of the field whose page is showing.
75183
75396
  *
@@ -75789,7 +76002,9 @@ export type CustomElementsSolidJs = {
75789
76002
  * `narrow` ("3h ago").
75790
76003
  *
75791
76004
  * The reading refreshes as it goes stale, as `elapsed` does, and the whole
75792
- * date is its title. `elapsed` wins where both are set.
76005
+ * date is its title. `elapsed` wins where both are set. Written with no
76006
+ * value, as `elapsed` is, or with a style `Intl` does not know, it reads
76007
+ * `long`.
75793
76008
  * - `second`: How the second is written, where a time of day is shown.
75794
76009
  * - `time-style`/`timeStyle`: The locale's own pattern for the time of day: `full`, `long`, `medium`, or
75795
76010
  * `short`. Set, it stands in for `hour`, `minute`, `second` and
@@ -80687,6 +80902,12 @@ export type CustomElementsSolidJs = {
80687
80902
  * slots, so a mark of your own replaces either by being slotted. Neither is
80688
80903
  * read as part of the row's name.
80689
80904
  *
80905
+ * In a menu with `filterable`, focus stays in the menu's filter field and the
80906
+ * row the arrow keys reach is highlighted: the field names it with
80907
+ * `aria-activedescendant`, the row carries its role on its host so the field
80908
+ * can point at it, and `:state(highlighted)` says which row it is. A row with
80909
+ * an `href` then follows its link without an anchor, as `Option` does.
80910
+ *
80690
80911
  * ## Attributes & Properties
80691
80912
  *
80692
80913
  * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -80839,6 +81060,7 @@ export type CustomElementsSolidJs = {
80839
81060
  * These can be used to apply styling when a component is in a given state.
80840
81061
  *
80841
81062
  * - `checked`: The row is checked.
81063
+ * - `highlighted`: In a menu with `filterable`, the arrow keys or the pointer reached the row while focus stays in the filter field.
80842
81064
  * - `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.
80843
81065
  * - `submenu-start`: Under `submenus="flyout"`, a row in this row's submenu has content before its label, so the submenu keeps its leading column.
80844
81066
  * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
@@ -80911,6 +81133,21 @@ export type CustomElementsSolidJs = {
80911
81133
  * opens it from the keyboard, and the trigger is described by
80912
81134
  * `long-press-label`, which says so.
80913
81135
  *
81136
+ * **A filter field.** With `filterable`, the menu opens with focus in a field
81137
+ * above its rows, and typing narrows the rows of the page the keys move in,
81138
+ * as React Aria's `Autocomplete` around a `Menu` does. A row is kept where its
81139
+ * words hold the filter, in any case, or where `filterMatch` says so. Each
81140
+ * page starts unfiltered, and the filter is cleared as the menu closes. Where
81141
+ * typing keeps no row, the menu shows `no-results-text`. Focus stays in the
81142
+ * field: Up and Down Arrow move the highlight through the rows that are left,
81143
+ * Enter chooses the highlighted row, Right Arrow opens its submenu, Left Arrow
81144
+ * on a submenu goes back, and Escape clears the filter and then closes the
81145
+ * menu. Home, End and the other keys move the caret and type. The field names
81146
+ * the highlighted row with `aria-activedescendant`, and the rows are a `menu`
81147
+ * after the field. Cancel `helix-filter` to keep every row
81148
+ * showing and narrow the rows yourself, such as by replacing them with rows
81149
+ * from a server.
81150
+ *
80914
81151
  * ## Attributes & Properties
80915
81152
  *
80916
81153
  * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -80923,6 +81160,13 @@ export type CustomElementsSolidJs = {
80923
81160
  * Ark UI's `closeOnSelect` does. A row's own `close-on-select` wins over this.
80924
81161
  * - `context`: Whether the menu is the trigger's context menu: it opens where the reader
80925
81162
  * asks for one, with a right-click, a long press, Shift+F10 or the menu key.
81163
+ * - `filter`: The text the rows are filtered by, which the filter field holds.
81164
+ *
81165
+ * Cleared as the menu closes and as a submenu opens or closes, so each page
81166
+ * starts with every row showing.
81167
+ * - `filterable`: Whether the menu shows a field above its rows that narrows them as the
81168
+ * reader types, with focus staying in the field.
81169
+ * - `filter-label`/`filterLabel`: The filter field's name and placeholder.
80926
81170
  * - `label`: Accessible name for the surface.
80927
81171
  *
80928
81172
  * Empty by default, which names the surface by its trigger, so a menu opened
@@ -80930,6 +81174,7 @@ export type CustomElementsSolidJs = {
80930
81174
  * `aria-labelledby` on the host names it too, and wins over both.
80931
81175
  * - `long-press-label`/`longPressLabel`: The description a trigger gives under `open-on="long-press"`, saying how
80932
81176
  * to open the menu. Translate it with the rest of your interface.
81177
+ * - `no-results-text`/`noResultsText`: The text shown when the filter keeps no rows.
80933
81178
  * - `offset`: Space between the trigger and the surface, in pixels.
80934
81179
  * - `open-on`/`openOn`: What opens the menu from its trigger. `long-press` leaves a press to the
80935
81180
  * trigger's own action and opens the menu on a press held for half a second,
@@ -80959,6 +81204,12 @@ export type CustomElementsSolidJs = {
80959
81204
  * hydration, or diffed by a framework, it comes back holding whatever the
80960
81205
  * last reader did rather than what the author wrote. `:state(open)` carries
80961
81206
  * the resolved state for stylesheets, which is what the mirror is for.
81207
+ * - `filterMatch`: Whether a row is kept by the filter: a function given the row's words and
81208
+ * the filter, trimmed, that returns `true` to keep it showing, as React
81209
+ * Aria's `Autocomplete` takes `filter`. See Listbox's `filterMatch`.
81210
+ *
81211
+ * Absent, a row is kept where its words hold the filter, in any case. A
81212
+ * property only, there being no way to write a function in markup. (property only)
80962
81213
  * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
80963
81214
  *
80964
81215
  * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -80986,6 +81237,7 @@ export type CustomElementsSolidJs = {
80986
81237
  *
80987
81238
  * - `helix-before-close`: The menu is about to close. Cancelable: cancel it to keep it open.
80988
81239
  * - `helix-before-open`: The menu is about to open. Cancelable: cancel it to keep it closed.
81240
+ * - `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.
80989
81241
  * - `helix-select`: An item was chosen. Cancelable: cancel it to keep the menu open.
80990
81242
  * - `toggle`: The menu opened or closed. The event carries `newState` and `oldState`.
80991
81243
  *
@@ -80994,6 +81246,7 @@ export type CustomElementsSolidJs = {
80994
81246
  * Areas where markup can be added to the component.
80995
81247
  *
80996
81248
  * - `(default)`: The items.
81249
+ * - `no-results`: What the menu shows when the filter keeps no rows, for content richer than `no-results-text`.
80997
81250
  * - `trigger`: The control that opens the menu, or with `context` the area a context menu opens over.
80998
81251
  *
80999
81252
  * ## Methods
@@ -81029,7 +81282,8 @@ export type CustomElementsSolidJs = {
81029
81282
  * - `header`: The bar above a submenu, holding the way back and its name.
81030
81283
  * - `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.
81031
81284
  * - `loading`: The text shown while the items are loading.
81032
- * - `surface`: The floating panel the menu is drawn on.
81285
+ * - `search-field`: With `filterable`, the field that narrows the rows.
81286
+ * - `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`.
81033
81287
  * - `title`: The name of the submenu that is showing.
81034
81288
  *
81035
81289
  * ## CSS States
@@ -81937,7 +82191,7 @@ export type CustomElementsSolidJs = {
81937
82191
  * A separate family from `Input`'s `type="number"`. It renders two buttons,
81938
82192
  * binds four keys `Input` does not, and handles clamping and stepping.
81939
82193
  *
81940
- * The field is `type="text"` with `inputmode="decimal"`. Tested in a real
82194
+ * The field is `type="text"` with an `inputmode` for a number. Tested in a real
81941
82195
  * browser, `type="number"` fails in three ways:
81942
82196
  * - Typing `12e` gives a `.value` of `""`, so the element cannot see what you
81943
82197
  * typed. A `type="text"` field keeps `"12e"`.
@@ -81945,7 +82199,11 @@ export type CustomElementsSolidJs = {
81945
82199
  * to 4, when you only meant to scroll the page.
81946
82200
  * - `selectionStart` is `null`, so the caret cannot be managed.
81947
82201
  *
81948
- * `inputmode="decimal"` keeps the numeric keypad on phones.
82202
+ * `inputmode` keeps a numeric keypad on phones, chosen as React Aria's
82203
+ * NumberField chooses it: a keypad with a minus key where the number can be
82204
+ * negative, and one with a decimal separator where the format shows a
82205
+ * fraction. An iPhone has no keypad with a minus key, so a field that can be
82206
+ * negative takes the full keyboard there.
81949
82207
  *
81950
82208
  * `format-options` shows the number with `Intl.NumberFormat` in `locale`, as a
81951
82209
  * currency, a percent or a unit, while the field is not being edited. Focus
@@ -82056,10 +82314,11 @@ export type CustomElementsSolidJs = {
82056
82314
  * invalid, as it is in a native number field.
82057
82315
  *
82058
82316
  * Unset, a step moves by one, or by one percent under a percent format, and
82059
- * a typed number is rounded to the smallest amount `format-options` shows
82060
- * rather than to whole steps, as React Aria's NumberField does: a field
82061
- * showing dollars keeps the cents typed into it. Without `format-options`
82062
- * the grid is whole numbers, as in a native number field.
82317
+ * a typed number is rounded to the smallest amount the format shows, as
82318
+ * React Aria's NumberField does: a field showing dollars keeps the cents
82319
+ * typed into it, and one with no `format-options` keeps three decimal
82320
+ * places. `any` puts the number on no grid, as it does in a native number
82321
+ * field: a step moves by one, and any number in range is valid.
82063
82322
  * - `step-mismatch-message`/`stepMismatchMessage`: The message the browser shows when the number is off the step grid, with
82064
82323
  * `{below}` and `{above}` filled in with the nearest valid values, written in
82065
82324
  * the locale.
@@ -82281,6 +82540,8 @@ export type CustomElementsSolidJs = {
82281
82540
  *
82282
82541
  * These can be used to apply styling when a component is in a given state.
82283
82542
  *
82543
+ * - `at-max`: The number is at `max`, so it cannot step up, as React Aria's NumberField says with `canIncrement`.
82544
+ * - `at-min`: The number is at `min`, so it cannot step down.
82284
82545
  * - `invalid`: The control has an error to show, from the browser's validation or from your `feedback`.
82285
82546
  * - `scrubbing`: The label is being dragged to change the value, under `scrub`, as Zag's scrubber says while it is held.
82286
82547
  * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
@@ -82486,6 +82747,13 @@ export type CustomElementsSolidJs = {
82486
82747
  *
82487
82748
  * - `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.
82488
82749
  *
82750
+ * ## Methods
82751
+ *
82752
+ * Methods that can be called to access component functionality.
82753
+ *
82754
+ * - `focus(options?: FocusOptions) => void`: Moves focus to the row the keys move from, or to the tree while that row
82755
+ * is scrolled out of the window, as Tab reaches them.
82756
+ *
82489
82757
  * ## CSS Custom Properties
82490
82758
  *
82491
82759
  * CSS variables available for styling the component.
@@ -87581,6 +87849,10 @@ export type CustomElementsSolidJs = {
87581
87849
  *
87582
87850
  * Methods that can be called to access component functionality.
87583
87851
  *
87852
+ * - `requestActive(next: string, cause?: string) => boolean`: Requests a new current stage, and returns whether it moved.
87853
+ *
87854
+ * Where only a step's `current` says where the reader is, `active` is first
87855
+ * written with that step, so `helix-activate` names it as `previous`.
87584
87856
  * - `next() => boolean`: Moves to the next stage that can be gone to, as Ark UI's `goToNextStep`
87585
87857
  * does. Returns whether it moved: not past the last stage, not into a stage
87586
87858
  * `linear` holds out of reach, and not where a listener refused.
@@ -87589,15 +87861,6 @@ export type CustomElementsSolidJs = {
87589
87861
  * and the invalid mark from every stage, as Ark UI's `resetStep` does.
87590
87862
  * Returns whether it moved: a listener can refuse the move with
87591
87863
  * `helix-before-activate`, and the stages then keep their marks.
87592
- * - `requestActive(next: string, cause?: string) => boolean`: Requests a new current item, and returns whether the change was applied.
87593
- *
87594
- * Announces before it acts, so `preventDefault()` on the `helix-before-activate` is
87595
- * a refusal and nothing moves. Unlike a native control, nothing has moved
87596
- * by the time this runs, so refusing is simply not writing: there is
87597
- * nothing to put back. Nobody refusing means the set updates itself,
87598
- * whether or not a consumer declared `active`, a declared property being a
87599
- * seed and a correction. `cause` says why, where the family names its
87600
- * causes, and reaches the event as `detail.cause`.
87601
87864
  *
87602
87865
  * ## CSS Custom Properties
87603
87866
  *
@@ -93070,6 +93333,7 @@ export type CustomElementsSolidJs = {
93070
93333
  * - `menu-header`: The bar above a submenu, holding the back button and the submenu's name.
93071
93334
  * - `menu-live`: The inner menu's `live` part, the region screen readers announce its empty and loading messages from.
93072
93335
  * - `menu-loading`: Shown while the items are loading.
93336
+ * - `menu-search-field`: The inner menu's filter field, drawn with `filterable`.
93073
93337
  * - `menu-surface`: The floating panel the menu is drawn on.
93074
93338
  * - `menu-title`: The name of the submenu that is shown.
93075
93339
  * - `poster`: An entry's poster image, if it has one.
@@ -93663,6 +93927,7 @@ export type CustomElementsSolidJs = {
93663
93927
  * - `captions-menu-header`: The bar above a submenu, holding the way back and its name.
93664
93928
  * - `captions-menu-live`: The inner menu's `live` part, a live region that repeats the empty and loading text for screen readers.
93665
93929
  * - `captions-menu-loading`: The text shown while the items are loading.
93930
+ * - `captions-menu-search-field`: The inner menu's filter field, drawn with `filterable`.
93666
93931
  * - `captions-menu-surface`: The floating panel the menu is drawn on.
93667
93932
  * - `captions-menu-title`: The name of the submenu that is showing.
93668
93933
  * - `controls`: The control bar along the bottom.
@@ -93694,6 +93959,7 @@ export type CustomElementsSolidJs = {
93694
93959
  * - `overflow-header`: The bar above a submenu, holding the way back and its name.
93695
93960
  * - `overflow-live`: The inner menu's `live` part, a live region that repeats the empty and loading text for screen readers.
93696
93961
  * - `overflow-loading`: The text shown while the items are loading.
93962
+ * - `overflow-search-field`: The inner menu's filter field, drawn with `filterable`.
93697
93963
  * - `overflow-surface`: The floating panel the menu is drawn on.
93698
93964
  * - `overflow-title`: The name of the submenu that is showing.
93699
93965
  * - `pip`: The picture-in-picture button, when `extra-controls` includes it and the browser supports it.