@fusion.dev/helix-headless 0.170.0 → 0.171.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 (39) hide show
  1. package/custom-elements.json +610 -93
  2. package/dist/chat/composer/chat-composer.d.ts +2 -1
  3. package/dist/chat/composer/chat-composer.js +7 -1
  4. package/dist/chat/root/chat-root.d.ts +36 -6
  5. package/dist/chat/root/chat-root.js +53 -5
  6. package/dist/code-block/root/code-block-root.d.ts +20 -2
  7. package/dist/code-block/root/code-block-root.js +29 -8
  8. package/dist/color-picker/root/color-picker-root.d.ts +50 -7
  9. package/dist/color-picker/root/color-picker-root.js +62 -1
  10. package/dist/combobox/root/combobox-root.d.ts +16 -6
  11. package/dist/combobox/root/combobox-root.js +9 -2
  12. package/dist/command/root/command-root.d.ts +16 -1
  13. package/dist/command/root/command-root.js +8 -0
  14. package/dist/filter-input/chip/filter-chip.d.ts +13 -3
  15. package/dist/filter-input/chip/filter-chip.js +5 -0
  16. package/dist/filter-input/menu/filter-menu.js +0 -1
  17. package/dist/filter-input/root/filter-input-root.d.ts +71 -4
  18. package/dist/filter-input/root/filter-input-root.js +87 -2
  19. package/dist/format-date/root/format-date-root.d.ts +3 -1
  20. package/dist/input/root/input-root.d.ts +6 -0
  21. package/dist/input/root/input-root.js +13 -0
  22. package/dist/listbox/root/listbox-root.d.ts +6 -0
  23. package/dist/listbox/root/listbox-root.js +6 -1
  24. package/dist/number-input/root/number-input-root.d.ts +16 -6
  25. package/dist/number-input/root/number-input-root.js +15 -4
  26. package/dist/select/root/select-root.js +2 -0
  27. package/dist/steps/root/steps-root.d.ts +32 -8
  28. package/dist/steps/root/steps-root.js +70 -9
  29. package/dist/steps/step/step.d.ts +9 -1
  30. package/dist/steps/step/step.js +5 -0
  31. package/dist/video-playlist/root/video-playlist-root.d.ts +19 -1
  32. package/dist/video-playlist/root/video-playlist-root.js +14 -3
  33. package/dist/virtual-list/root/virtual-list-root.d.ts +8 -0
  34. package/dist/virtual-list/root/virtual-list-root.js +7 -2
  35. package/lint.json +1 -1
  36. package/package.json +5 -5
  37. package/types/jsx.d.ts +490 -116
  38. package/types/vue.d.ts +108 -25
  39. package/types/words.d.ts +12 -2
package/types/jsx.d.ts CHANGED
@@ -6148,6 +6148,12 @@ export type HelixHeadlessCodeBlockHelixToggleElementEvent =
6148
6148
  HelixHeadlessCodeBlockElementEvent<HelixToggleEvent>;
6149
6149
 
6150
6150
  export type HelixHeadlessCodeBlockProps = {
6151
+ /** The lines to mark as inserted, as numbers and ranges counted from 1, such
6152
+ as `3-4`. Drawn as `mark-lines` is, in the added color. Not for a diff. */
6153
+ "added-lines"?: (HelixHeadlessCodeBlock["addedLines"]) | undefined;
6154
+ /** The lines to mark as inserted, as numbers and ranges counted from 1, such
6155
+ as `3-4`. Drawn as `mark-lines` is, in the added color. Not for a diff. */
6156
+ addedLines?: (HelixHeadlessCodeBlock["addedLines"]) | undefined;
6151
6157
  /** The name of a block that scrolls, which is a tab stop while it does.
6152
6158
 
6153
6159
  Where the block has a name, the scroller says it too, such as "Code,
@@ -6306,6 +6312,12 @@ A false boolean reflects as the attribute's absence, so this costs no
6306
6312
  reflected property taking no default is satisfied by the default being
6307
6313
  `false`. */
6308
6314
  noCopy?: (HelixHeadlessCodeBlock["noCopy"]) | undefined;
6315
+ /** The lines to mark as deleted, as numbers and ranges counted from 1. Drawn
6316
+ as `mark-lines` is, in the removed color. Not for a diff. */
6317
+ "removed-lines"?: (HelixHeadlessCodeBlock["removedLines"]) | undefined;
6318
+ /** The lines to mark as deleted, as numbers and ranges counted from 1. Drawn
6319
+ as `mark-lines` is, in the removed color. Not for a diff. */
6320
+ removedLines?: (HelixHeadlessCodeBlock["removedLines"]) | undefined;
6309
6321
  /** The words of a button that shows a folded run of unchanged lines, in a
6310
6322
  diff with `context-lines`. `{count}` is how many. */
6311
6323
  "show-unchanged-label"?: (HelixHeadlessCodeBlock["showUnchangedLabel"]) | undefined;
@@ -6378,6 +6390,12 @@ read, nor for a diff. */
6378
6390
  };
6379
6391
 
6380
6392
  export type HelixHeadlessCodeBlockSolidJsProps = {
6393
+ /** The lines to mark as inserted, as numbers and ranges counted from 1, such
6394
+ as `3-4`. Drawn as `mark-lines` is, in the added color. Not for a diff. */
6395
+ "attr:added-lines"?: (HelixHeadlessCodeBlock["addedLines"]) | undefined;
6396
+ /** The lines to mark as inserted, as numbers and ranges counted from 1, such
6397
+ as `3-4`. Drawn as `mark-lines` is, in the added color. Not for a diff. */
6398
+ "prop:addedLines"?: (HelixHeadlessCodeBlock["addedLines"]) | undefined;
6381
6399
  /** The name of a block that scrolls, which is a tab stop while it does.
6382
6400
 
6383
6401
  Where the block has a name, the scroller says it too, such as "Code,
@@ -6536,6 +6554,12 @@ A false boolean reflects as the attribute's absence, so this costs no
6536
6554
  reflected property taking no default is satisfied by the default being
6537
6555
  `false`. */
6538
6556
  "prop:noCopy"?: (HelixHeadlessCodeBlock["noCopy"]) | undefined;
6557
+ /** The lines to mark as deleted, as numbers and ranges counted from 1. Drawn
6558
+ as `mark-lines` is, in the removed color. Not for a diff. */
6559
+ "attr:removed-lines"?: (HelixHeadlessCodeBlock["removedLines"]) | undefined;
6560
+ /** The lines to mark as deleted, as numbers and ranges counted from 1. Drawn
6561
+ as `mark-lines` is, in the removed color. Not for a diff. */
6562
+ "prop:removedLines"?: (HelixHeadlessCodeBlock["removedLines"]) | undefined;
6539
6563
  /** The words of a button that shows a folded run of unchanged lines, in a
6540
6564
  diff with `context-lines`. `{count}` is how many. */
6541
6565
  "attr:show-unchanged-label"?: (HelixHeadlessCodeBlock["showUnchangedLabel"]) | undefined;
@@ -7404,10 +7428,11 @@ would give one control two of each. What is left is the validity call and
7404
7428
  the anchor the browser points its bubble at.
7405
7429
 
7406
7430
  **Text that is not a color is bad input**, so a form does not submit
7407
- `#00` from a half-typed value. The picker draws no message of its own, so
7408
- reporting it as each keystroke arrives shows nothing until the form asks;
7409
- Color Input shows its own message against the field the reader typed
7410
- into. */
7431
+ `#00` from a half-typed value. The picker marks it, and says
7432
+ `badInputMessage` under itself, once the reader leaves the value field or
7433
+ presses Enter, and a missing color once the reader has committed one or a
7434
+ form has refused the picker. Color Input shows its own message against the
7435
+ field the reader typed into. */
7411
7436
  required?: (HelixHeadlessColorPicker["required"]) | undefined;
7412
7437
  /** What the square's horizontal ramp is called. */
7413
7438
  "saturation-label"?: (HelixHeadlessColorPicker["saturationLabel"]) | undefined;
@@ -7784,10 +7809,11 @@ would give one control two of each. What is left is the validity call and
7784
7809
  the anchor the browser points its bubble at.
7785
7810
 
7786
7811
  **Text that is not a color is bad input**, so a form does not submit
7787
- `#00` from a half-typed value. The picker draws no message of its own, so
7788
- reporting it as each keystroke arrives shows nothing until the form asks;
7789
- Color Input shows its own message against the field the reader typed
7790
- into. */
7812
+ `#00` from a half-typed value. The picker marks it, and says
7813
+ `badInputMessage` under itself, once the reader leaves the value field or
7814
+ presses Enter, and a missing color once the reader has committed one or a
7815
+ form has refused the picker. Color Input shows its own message against the
7816
+ field the reader typed into. */
7791
7817
  "prop:required"?: (HelixHeadlessColorPicker["required"]) | undefined;
7792
7818
  /** What the square's horizontal ramp is called. */
7793
7819
  "attr:saturation-label"?: (HelixHeadlessColorPicker["saturationLabel"]) | undefined;
@@ -8063,12 +8089,13 @@ language. */
8063
8089
  locale?: (HelixHeadlessCombobox["locale"]) | undefined;
8064
8090
  /** Whether more than one option can be chosen.
8065
8091
 
8066
- The list already does the work: `value` comes apart on commas, a press
8067
- toggles rather than replaces, and the arrows move without choosing. What
8068
- this adds is the tags, and keeping the panel open between picks.
8092
+ The list already does the work: `value` is the chosen values joined with
8093
+ commas, a press toggles rather than replaces, and the arrows move without
8094
+ choosing. What this adds is the tags, and keeping the panel open between
8095
+ picks.
8069
8096
 
8070
- A comma is therefore not available inside an option's value, which is the
8071
- listbox's contract and not this element's to change.
8097
+ An option's value may hold a comma, and it is read as one value, as
8098
+ `Select` and `Listbox` read it. So may an answer the reader created.
8072
8099
 
8073
8100
  **The list is told, and the field is not.** `aria-multiselectable` belongs
8074
8101
  to `listbox`, `grid`, `tree` and `tablist`, and `combobox` dropped it in
@@ -8428,12 +8455,13 @@ language. */
8428
8455
  "prop:locale"?: (HelixHeadlessCombobox["locale"]) | undefined;
8429
8456
  /** Whether more than one option can be chosen.
8430
8457
 
8431
- The list already does the work: `value` comes apart on commas, a press
8432
- toggles rather than replaces, and the arrows move without choosing. What
8433
- this adds is the tags, and keeping the panel open between picks.
8458
+ The list already does the work: `value` is the chosen values joined with
8459
+ commas, a press toggles rather than replaces, and the arrows move without
8460
+ choosing. What this adds is the tags, and keeping the panel open between
8461
+ picks.
8434
8462
 
8435
- A comma is therefore not available inside an option's value, which is the
8436
- listbox's contract and not this element's to change.
8463
+ An option's value may hold a comma, and it is read as one value, as
8464
+ `Select` and `Listbox` read it. So may an answer the reader created.
8437
8465
 
8438
8466
  **The list is told, and the field is not.** `aria-multiselectable` belongs
8439
8467
  to `listbox`, `grid`, `tree` and `tablist`, and `combobox` dropped it in
@@ -8718,6 +8746,18 @@ so a palette filtered on a server sends one `helix-filter` for a word.
8718
8746
  so a palette filtered on a server sends one `helix-filter` for a word.
8719
8747
  `0` filters on every keystroke. See Listbox's `filter-delay`. */
8720
8748
  filterDelay?: (HelixHeadlessCommand["filterDelay"]) | undefined;
8749
+ /** Where Home and End go from the filter field.
8750
+
8751
+ Absent, they move the caret, as APG's combobox has them. `list` moves the
8752
+ highlight to the first or the last command, as React Aria's Autocomplete
8753
+ does, and Shift with either still selects the text. */
8754
+ "home-end"?: (HelixHeadlessCommand["homeEnd"]) | undefined;
8755
+ /** Where Home and End go from the filter field.
8756
+
8757
+ Absent, they move the caret, as APG's combobox has them. `list` moves the
8758
+ highlight to the first or the last command, as React Aria's Autocomplete
8759
+ does, and Shift with either still selects the text. */
8760
+ homeEnd?: (HelixHeadlessCommand["homeEnd"]) | undefined;
8721
8761
  /** The key that opens the palette, written as `mod+k`, `shift+p`, or `k`,
8722
8762
  in Kbd's chord spelling: `mod` is Command or Control, `ctrl`, `cmd`,
8723
8763
  `alt` and `shift` the keys they name.
@@ -8735,6 +8775,10 @@ and `open`, `toggle` and the dialog's parts do nothing. */
8735
8775
  inline?: (HelixHeadlessCommand["inline"]) | undefined;
8736
8776
  /** Accessible name for the overlay, which has no visible heading. */
8737
8777
  label?: (HelixHeadlessCommand["label"]) | undefined;
8778
+ /** How the commands are laid out, as Listbox's `layout`: `grid` draws them in
8779
+ rows and columns, for a palette of icons or emoji, and the arrow keys
8780
+ follow the rows and the columns. Absent is one command under another. */
8781
+ layout?: (HelixHeadlessCommand["layout"]) | undefined;
8738
8782
  /** What the list says when its commands could not be loaded, such as after a
8739
8783
  request to a server fails. Empty, null or no attribute is no error, so
8740
8784
  removing the attribute clears it. Passed to the list, which shows it
@@ -8854,6 +8898,18 @@ so a palette filtered on a server sends one `helix-filter` for a word.
8854
8898
  so a palette filtered on a server sends one `helix-filter` for a word.
8855
8899
  `0` filters on every keystroke. See Listbox's `filter-delay`. */
8856
8900
  "prop:filterDelay"?: (HelixHeadlessCommand["filterDelay"]) | undefined;
8901
+ /** Where Home and End go from the filter field.
8902
+
8903
+ Absent, they move the caret, as APG's combobox has them. `list` moves the
8904
+ highlight to the first or the last command, as React Aria's Autocomplete
8905
+ does, and Shift with either still selects the text. */
8906
+ "attr:home-end"?: (HelixHeadlessCommand["homeEnd"]) | undefined;
8907
+ /** Where Home and End go from the filter field.
8908
+
8909
+ Absent, they move the caret, as APG's combobox has them. `list` moves the
8910
+ highlight to the first or the last command, as React Aria's Autocomplete
8911
+ does, and Shift with either still selects the text. */
8912
+ "prop:homeEnd"?: (HelixHeadlessCommand["homeEnd"]) | undefined;
8857
8913
  /** The key that opens the palette, written as `mod+k`, `shift+p`, or `k`,
8858
8914
  in Kbd's chord spelling: `mod` is Command or Control, `ctrl`, `cmd`,
8859
8915
  `alt` and `shift` the keys they name.
@@ -8871,6 +8927,10 @@ and `open`, `toggle` and the dialog's parts do nothing. */
8871
8927
  "prop:inline"?: (HelixHeadlessCommand["inline"]) | undefined;
8872
8928
  /** Accessible name for the overlay, which has no visible heading. */
8873
8929
  "prop:label"?: (HelixHeadlessCommand["label"]) | undefined;
8930
+ /** How the commands are laid out, as Listbox's `layout`: `grid` draws them in
8931
+ rows and columns, for a palette of icons or emoji, and the arrow keys
8932
+ follow the rows and the columns. Absent is one command under another. */
8933
+ "prop:layout"?: (HelixHeadlessCommand["layout"]) | undefined;
8874
8934
  /** What the list says when its commands could not be loaded, such as after a
8875
8935
  request to a server fails. Empty, null or no attribute is no error, so
8876
8936
  removing the attribute clears it. Passed to the list, which shows it
@@ -13542,6 +13602,13 @@ makes an unusual filter look unusual. */
13542
13602
  operatorLabel?: (HelixHeadlessFilterChip["operatorLabel"]) | undefined;
13543
13603
  /** Whether the element shows a control that dismisses it. */
13544
13604
  dismissible?: (HelixHeadlessFilterChip["dismissible"]) | undefined;
13605
+ /** Whether the remove button is a tab stop of its own.
13606
+
13607
+ `FilterInput` writes `false` on the chips in its `tags` slot: the field's
13608
+ text is its one tab stop, and the arrow keys move from the text to the
13609
+ chips, as in a `multiple` Combobox. No attribute: it is coordination
13610
+ between elements, as `Tag.dismissTabStop` is. */
13611
+ dismissTabStop?: (HelixHeadlessFilterChip["dismissTabStop"]) | undefined;
13545
13612
 
13546
13613
  /** Fired when the user asks to remove the filter. Cancelable: call `preventDefault()` to keep the chip. */
13547
13614
  "onhelix-dismiss"?: ((
@@ -13612,6 +13679,13 @@ makes an unusual filter look unusual. */
13612
13679
  "prop:operatorLabel"?: (HelixHeadlessFilterChip["operatorLabel"]) | undefined;
13613
13680
  /** Whether the element shows a control that dismisses it. */
13614
13681
  "prop:dismissible"?: (HelixHeadlessFilterChip["dismissible"]) | undefined;
13682
+ /** Whether the remove button is a tab stop of its own.
13683
+
13684
+ `FilterInput` writes `false` on the chips in its `tags` slot: the field's
13685
+ text is its one tab stop, and the arrow keys move from the text to the
13686
+ chips, as in a `multiple` Combobox. No attribute: it is coordination
13687
+ between elements, as `Tag.dismissTabStop` is. */
13688
+ "prop:dismissTabStop"?: (HelixHeadlessFilterChip["dismissTabStop"]) | undefined;
13615
13689
  /** Fired when the user asks to remove the filter. Cancelable: call `preventDefault()` to keep the chip. */
13616
13690
  "on:helix-dismiss"?: ((
13617
13691
  e: HelixHeadlessFilterChipHelixDismissElementEvent,
@@ -13822,6 +13896,18 @@ export type HelixHeadlessFilterInputToggleElementEvent =
13822
13896
  HelixHeadlessFilterInputElementEvent<ToggleEvent>;
13823
13897
 
13824
13898
  export type HelixHeadlessFilterInputProps = {
13899
+ /** Whether the field keeps a `FilterChip` for each filter in its `tags` slot,
13900
+ from the `helix-facet` events it hears.
13901
+
13902
+ Off, you build the chips, which is what you do when your own model holds
13903
+ the filters. On, a filter typed, picked, or changed adds or updates the
13904
+ chip for its field, one with no values takes it away (unless its
13905
+ comparison takes none, such as "is empty"), and removing the chip clears
13906
+ the filter. A `helix-facet` you cancel changes no chip.
13907
+
13908
+ The chips are elements the field adds to its own children, so leave this
13909
+ off where a framework renders those children and would remove them. */
13910
+ chips?: (HelixHeadlessFilterInput["chips"]) | undefined;
13825
13911
  /** Shows a button that empties the field.
13826
13912
 
13827
13913
  The text only. The tokens are the consumer's markup and this element is not
@@ -13843,6 +13929,29 @@ what you slot and you narrow it. */
13843
13929
  being typed, as React Aria's Autocomplete filters. Off, the panel shows
13844
13930
  what you slot and you narrow it. */
13845
13931
  filterSuggestions?: (HelixHeadlessFilterInput["filterSuggestions"]) | undefined;
13932
+ /** Whether the suggestions are still loading, such as while a request for the
13933
+ values of a typed key is out.
13934
+
13935
+ The panel opens on `loading-text`, or the `loading` slot, while the field
13936
+ has focus, and a screen reader hears it. Slot the options and clear this
13937
+ when they arrive. */
13938
+ loading?: (HelixHeadlessFilterInput["loading"]) | undefined;
13939
+ /** Text the panel shows while the suggestions load. */
13940
+ "loading-text"?: (HelixHeadlessFilterInput["loadingText"]) | undefined;
13941
+ /** Text the panel shows while the suggestions load. */
13942
+ loadingText?: (HelixHeadlessFilterInput["loadingText"]) | undefined;
13943
+ /** Text the panel shows when `filter-suggestions` hides every suggestion, such
13944
+ as "No matching filters".
13945
+
13946
+ Empty, or no `no-results` slot, and the panel closes instead, as it does
13947
+ when it has nothing to offer. */
13948
+ "no-results-text"?: (HelixHeadlessFilterInput["noResultsText"]) | undefined;
13949
+ /** Text the panel shows when `filter-suggestions` hides every suggestion, such
13950
+ as "No matching filters".
13951
+
13952
+ Empty, or no `no-results` slot, and the panel closes instead, as it does
13953
+ when it has nothing to offer. */
13954
+ noResultsText?: (HelixHeadlessFilterInput["noResultsText"]) | undefined;
13846
13955
  /** The text shown while the field is empty.
13847
13956
 
13848
13957
  Not a label: it goes when typing starts. */
@@ -14037,6 +14146,18 @@ Here rather than on each control. */
14037
14146
  };
14038
14147
 
14039
14148
  export type HelixHeadlessFilterInputSolidJsProps = {
14149
+ /** Whether the field keeps a `FilterChip` for each filter in its `tags` slot,
14150
+ from the `helix-facet` events it hears.
14151
+
14152
+ Off, you build the chips, which is what you do when your own model holds
14153
+ the filters. On, a filter typed, picked, or changed adds or updates the
14154
+ chip for its field, one with no values takes it away (unless its
14155
+ comparison takes none, such as "is empty"), and removing the chip clears
14156
+ the filter. A `helix-facet` you cancel changes no chip.
14157
+
14158
+ The chips are elements the field adds to its own children, so leave this
14159
+ off where a framework renders those children and would remove them. */
14160
+ "prop:chips"?: (HelixHeadlessFilterInput["chips"]) | undefined;
14040
14161
  /** Shows a button that empties the field.
14041
14162
 
14042
14163
  The text only. The tokens are the consumer's markup and this element is not
@@ -14058,6 +14179,29 @@ what you slot and you narrow it. */
14058
14179
  being typed, as React Aria's Autocomplete filters. Off, the panel shows
14059
14180
  what you slot and you narrow it. */
14060
14181
  "prop:filterSuggestions"?: (HelixHeadlessFilterInput["filterSuggestions"]) | undefined;
14182
+ /** Whether the suggestions are still loading, such as while a request for the
14183
+ values of a typed key is out.
14184
+
14185
+ The panel opens on `loading-text`, or the `loading` slot, while the field
14186
+ has focus, and a screen reader hears it. Slot the options and clear this
14187
+ when they arrive. */
14188
+ "prop:loading"?: (HelixHeadlessFilterInput["loading"]) | undefined;
14189
+ /** Text the panel shows while the suggestions load. */
14190
+ "attr:loading-text"?: (HelixHeadlessFilterInput["loadingText"]) | undefined;
14191
+ /** Text the panel shows while the suggestions load. */
14192
+ "prop:loadingText"?: (HelixHeadlessFilterInput["loadingText"]) | undefined;
14193
+ /** Text the panel shows when `filter-suggestions` hides every suggestion, such
14194
+ as "No matching filters".
14195
+
14196
+ Empty, or no `no-results` slot, and the panel closes instead, as it does
14197
+ when it has nothing to offer. */
14198
+ "attr:no-results-text"?: (HelixHeadlessFilterInput["noResultsText"]) | undefined;
14199
+ /** Text the panel shows when `filter-suggestions` hides every suggestion, such
14200
+ as "No matching filters".
14201
+
14202
+ Empty, or no `no-results` slot, and the panel closes instead, as it does
14203
+ when it has nothing to offer. */
14204
+ "prop:noResultsText"?: (HelixHeadlessFilterInput["noResultsText"]) | undefined;
14061
14205
  /** The text shown while the field is empty.
14062
14206
 
14063
14207
  Not a label: it goes when typing starts. */
@@ -22150,9 +22294,13 @@ speaks it: `feedback` replaces the message under the field and does not
22150
22294
  reach the bubble. Unset is the sentence registered for the page's
22151
22295
  language, then the English. */
22152
22296
  badInputMessage?: (HelixHeadlessNumberInput["badInputMessage"]) | undefined;
22153
- /** The name of the step down button, read by screen readers. */
22297
+ /** The name of the step down button, read by screen readers. The field's
22298
+ label follows it, so a reader hears "Decrease Quantity", as React Aria
22299
+ names its steppers. */
22154
22300
  "decrement-label"?: (HelixHeadlessNumberInput["decrementLabel"]) | undefined;
22155
- /** The name of the step down button, read by screen readers. */
22301
+ /** The name of the step down button, read by screen readers. The field's
22302
+ label follows it, so a reader hears "Decrease Quantity", as React Aria
22303
+ names its steppers. */
22156
22304
  decrementLabel?: (HelixHeadlessNumberInput["decrementLabel"]) | undefined;
22157
22305
  /** `Intl.NumberFormat` options the number is shown with while the field is
22158
22306
  not being edited: a currency, a percent, a unit, or a number of decimals.
@@ -22170,9 +22318,13 @@ Written as JSON in the attribute.
22170
22318
  <helix-number-input format-options='{"style":"currency","currency":"EUR"}'></helix-number-input>
22171
22319
  ``` */
22172
22320
  formatOptions?: (HelixHeadlessNumberInput["formatOptions"]) | undefined;
22173
- /** The name of the step up button, read by screen readers. */
22321
+ /** The name of the step up button, read by screen readers. The field's
22322
+ label follows it, so a reader hears "Increase Quantity", as React Aria
22323
+ names its steppers. */
22174
22324
  "increment-label"?: (HelixHeadlessNumberInput["incrementLabel"]) | undefined;
22175
- /** The name of the step up button, read by screen readers. */
22325
+ /** The name of the step up button, read by screen readers. The field's
22326
+ label follows it, so a reader hears "Increase Quantity", as React Aria
22327
+ names its steppers. */
22176
22328
  incrementLabel?: (HelixHeadlessNumberInput["incrementLabel"]) | undefined;
22177
22329
  /** How many steps `PageUp` and `PageDown` move.
22178
22330
 
@@ -22429,9 +22581,13 @@ speaks it: `feedback` replaces the message under the field and does not
22429
22581
  reach the bubble. Unset is the sentence registered for the page's
22430
22582
  language, then the English. */
22431
22583
  "prop:badInputMessage"?: (HelixHeadlessNumberInput["badInputMessage"]) | undefined;
22432
- /** The name of the step down button, read by screen readers. */
22584
+ /** The name of the step down button, read by screen readers. The field's
22585
+ label follows it, so a reader hears "Decrease Quantity", as React Aria
22586
+ names its steppers. */
22433
22587
  "attr:decrement-label"?: (HelixHeadlessNumberInput["decrementLabel"]) | undefined;
22434
- /** The name of the step down button, read by screen readers. */
22588
+ /** The name of the step down button, read by screen readers. The field's
22589
+ label follows it, so a reader hears "Decrease Quantity", as React Aria
22590
+ names its steppers. */
22435
22591
  "prop:decrementLabel"?: (HelixHeadlessNumberInput["decrementLabel"]) | undefined;
22436
22592
  /** `Intl.NumberFormat` options the number is shown with while the field is
22437
22593
  not being edited: a currency, a percent, a unit, or a number of decimals.
@@ -22449,9 +22605,13 @@ Written as JSON in the attribute.
22449
22605
  <helix-number-input format-options='{"style":"currency","currency":"EUR"}'></helix-number-input>
22450
22606
  ``` */
22451
22607
  "prop:formatOptions"?: (HelixHeadlessNumberInput["formatOptions"]) | undefined;
22452
- /** The name of the step up button, read by screen readers. */
22608
+ /** The name of the step up button, read by screen readers. The field's
22609
+ label follows it, so a reader hears "Increase Quantity", as React Aria
22610
+ names its steppers. */
22453
22611
  "attr:increment-label"?: (HelixHeadlessNumberInput["incrementLabel"]) | undefined;
22454
- /** The name of the step up button, read by screen readers. */
22612
+ /** The name of the step up button, read by screen readers. The field's
22613
+ label follows it, so a reader hears "Increase Quantity", as React Aria
22614
+ names its steppers. */
22455
22615
  "prop:incrementLabel"?: (HelixHeadlessNumberInput["incrementLabel"]) | undefined;
22456
22616
  /** How many steps `PageUp` and `PageDown` move.
22457
22617
 
@@ -28426,7 +28586,8 @@ export type HelixHeadlessStepsHelixSelectElementEvent =
28426
28586
 
28427
28587
  export type HelixHeadlessStepsProps = {
28428
28588
  /** Whether the arrow keys move focus between the stages' names, along the
28429
- way the steps run. Off by default, so the arrows keep scrolling the page. */
28589
+ way the steps run, and the names are one tab stop. Off by default, so the
28590
+ arrows keep scrolling the page. */
28430
28591
  arrows?: (HelixHeadlessSteps["arrows"]) | undefined;
28431
28592
  /** What marks a stage `complete`.
28432
28593
 
@@ -28510,7 +28671,8 @@ there. Not asked of an `optional` stage, nor for a move back. */
28510
28671
 
28511
28672
  export type HelixHeadlessStepsSolidJsProps = {
28512
28673
  /** Whether the arrow keys move focus between the stages' names, along the
28513
- way the steps run. Off by default, so the arrows keep scrolling the page. */
28674
+ way the steps run, and the names are one tab stop. Off by default, so the
28675
+ arrows keep scrolling the page. */
28514
28676
  "prop:arrows"?: (HelixHeadlessSteps["arrows"]) | undefined;
28515
28677
  /** What marks a stage `complete`.
28516
28678
 
@@ -28633,7 +28795,9 @@ with the page. */
28633
28795
  /** Whether a reader may pass the stage without finishing it, in a sequence
28634
28796
  with `linear`. Ark UI's skippable step. */
28635
28797
  optional?: (HelixHeadlessStep["optional"]) | undefined;
28636
- /** The value the step sends in `helix-select`. */
28798
+ /** The value the step sends in `helix-select`, and what names the step in its
28799
+ sequence's `active`. Without one, the sequence names the step by its place,
28800
+ counted from 1. */
28637
28801
  value?: (HelixHeadlessStep["value"]) | undefined;
28638
28802
 
28639
28803
  /** Fired when the step is pressed. Cancelable: cancel it to keep the current step. */
@@ -28666,7 +28830,9 @@ with the page. */
28666
28830
  /** Whether a reader may pass the stage without finishing it, in a sequence
28667
28831
  with `linear`. Ark UI's skippable step. */
28668
28832
  "prop:optional"?: (HelixHeadlessStep["optional"]) | undefined;
28669
- /** The value the step sends in `helix-select`. */
28833
+ /** The value the step sends in `helix-select`, and what names the step in its
28834
+ sequence's `active`. Without one, the sequence names the step by its place,
28835
+ counted from 1. */
28670
28836
  "prop:value"?: (HelixHeadlessStep["value"]) | undefined;
28671
28837
  /** Fired when the step is pressed. Cancelable: cancel it to keep the current step. */
28672
28838
  "on:helix-select"?: ((e: HelixHeadlessStepHelixSelectElementEvent) => void) | undefined;
@@ -40168,7 +40334,8 @@ export type CustomElements = {
40168
40334
  * field taking more. A draft that fails them does not send, and the composer
40169
40335
  * takes `:state(invalid)` and `aria-invalid` once the reader has tried to send
40170
40336
  * it, the form was submitted, or the reader edited the field and left it.
40171
- * Tabbing past an empty composer marks nothing.
40337
+ * Sending an empty required composer counts as trying. Tabbing past an empty
40338
+ * composer marks nothing.
40172
40339
  *
40173
40340
  * **`typing` says whether the user is writing**, and `helix-typing` is sent
40174
40341
  * each time it changes: when they start, and when they send or stop for
@@ -40477,8 +40644,10 @@ export type CustomElements = {
40477
40644
  * there when the transcript opened. A turn is said with its author first, such
40478
40645
  * as "Ada: It ships today" (`arrival-label`), where its author can be named.
40479
40646
  *
40480
- * Pass the turns as children or as `turns` data. Do not use both. Children
40481
- * render from the server and suit most conversations. `turns` draws a long
40647
+ * Pass the turns as children or as `turns` data. Do not use both: a chat given
40648
+ * both draws every turn from `turns` and then the children, and says so once
40649
+ * in the console. Children render from the server and suit most
40650
+ * conversations. `turns` draws a long
40482
40651
  * transcript one window at a time, so the log needs a block size of its own.
40483
40652
  *
40484
40653
  * **A conversation is built from three elements.** The chat holds the
@@ -40494,7 +40663,10 @@ export type CustomElements = {
40494
40663
  * it takes them away. Anything slotted into `status` is drawn first.
40495
40664
  *
40496
40665
  * **Keyboard.** The transcript moves between turns the way a feed does. Each
40497
- * turn says its place, such as "3 of 40", windowed or not.
40666
+ * turn says its place, such as "3 of 40", windowed or not. The transcript is
40667
+ * a tab stop while it holds a turn, and the turn a reader moved to is one
40668
+ * too. Moving to an older turn unpins a transcript that scrolls and scrolls
40669
+ * the turn into view, and moving to the newest pins it again.
40498
40670
  *
40499
40671
  * | Key | What it does |
40500
40672
  * |---|---|
@@ -40705,6 +40877,10 @@ export type CustomElements = {
40705
40877
  *
40706
40878
  * These can be used to apply styling when a component is in a given state.
40707
40879
  *
40880
+ * - `empty`: The conversation has no turns.
40881
+ * - `loading`: Older turns are loading: `history` is `loading`.
40882
+ * - `pinned`: The transcript follows its newest turn.
40883
+ * - `typing`: `typing` names someone on the other side.
40708
40884
  * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
40709
40885
  */
40710
40886
  "helix-headless-chat": Partial<
@@ -41209,7 +41385,11 @@ export type CustomElements = {
41209
41385
  * from the accessibility tree and left out of a copy. Set `mark-lines` to
41210
41386
  * mark lines a reader should look at, such as `2, 4-6`: the block draws a
41211
41387
  * band behind each run, placed where the lines are laid out, so it follows a
41212
- * highlighter's markup and lines that wrap. Set `wrap` to wrap long lines
41388
+ * highlighter's markup and lines that wrap. `added-lines` and
41389
+ * `removed-lines` mark lines the same way as inserted and deleted, as
41390
+ * Expressive Code's `ins` and `del` do, in code that is not a diff. The bands
41391
+ * are drawn and hidden from screen readers, so say in the text around the
41392
+ * block what a marked line means. Set `wrap` to wrap long lines
41213
41393
  * rather than scroll them; a gutter then numbers each line where it starts.
41214
41394
  * Set `wrappable` for a button in the header that turns `wrap` on and off,
41215
41395
  * pressed while the lines wrap.
@@ -41278,6 +41458,8 @@ export type CustomElements = {
41278
41458
  *
41279
41459
  * Component attributes and properties that can be applied to the element or by using JavaScript.
41280
41460
  *
41461
+ * - `added-lines`/`addedLines`: The lines to mark as inserted, as numbers and ranges counted from 1, such
41462
+ * as `3-4`. Drawn as `mark-lines` is, in the added color. Not for a diff.
41281
41463
  * - `code-label`/`codeLabel`: The name of a block that scrolls, which is a tab stop while it does.
41282
41464
  *
41283
41465
  * Where the block has a name, the scroller says it too, such as "Code,
@@ -41354,6 +41536,8 @@ export type CustomElements = {
41354
41536
  * `no-copy=""` on hosts that never asked for one, and the rule about a
41355
41537
  * reflected property taking no default is satisfied by the default being
41356
41538
  * `false`.
41539
+ * - `removed-lines`/`removedLines`: The lines to mark as deleted, as numbers and ranges counted from 1. Drawn
41540
+ * as `mark-lines` is, in the removed color. Not for a diff.
41357
41541
  * - `show-unchanged-label`/`showUnchangedLabel`: The words of a button that shows a folded run of unchanged lines, in a
41358
41542
  * diff with `context-lines`. `{count}` is how many.
41359
41543
  * - `variant`: How a diff's two versions are arranged. It has no effect without `diff`.
@@ -41433,6 +41617,8 @@ export type CustomElements = {
41433
41617
  * - `actions`: Controls for the block, in the header before the copy button.
41434
41618
  * - `copied-icon`: The copy button's icon after a copy. Defaults to a check mark.
41435
41619
  * - `copy-icon`: The copy button's icon before a copy. Defaults to a clipboard.
41620
+ * - `expand-icon`: An icon on the button that shows every line of a capped block, before its words.
41621
+ * - `label`: The block's name in the header, such as a file icon beside the file name. Replaces `label` and `language` there, and draws the header.
41436
41622
  *
41437
41623
  * ## CSS Custom Properties
41438
41624
  *
@@ -41480,7 +41666,9 @@ export type CustomElements = {
41480
41666
  * - `header`: The bar that holds the name and the copy button, shown when there is a name.
41481
41667
  * - `hunk`: In a diff, a `@@` line saying where the lines under it are.
41482
41668
  * - `label`: The block's name: its `label`, or its `language` where it has no label.
41483
- * - `mark`: The band behind a run of lines `mark-lines` names. The block writes where the run is laid out into `--code-block-mark-start`, `--code-block-mark-size`, and `--code-block-mark-inline-size` on it. Hidden from the accessibility tree.
41669
+ * - `mark`: The band behind a run of lines `mark-lines`, `added-lines` or `removed-lines` names. The block writes where the run is laid out into `--code-block-mark-start`, `--code-block-mark-size`, and `--code-block-mark-inline-size` on it. Hidden from the accessibility tree.
41670
+ * - `mark-added`: The band behind a run of lines `added-lines` names. Applied with `mark`.
41671
+ * - `mark-removed`: The band behind a run of lines `removed-lines` names. Applied with `mark`.
41484
41672
  * - `marker`: In a diff, the `+`, `-`, or space that starts a line.
41485
41673
  * - `new`: In a split diff, the new version's `<pre>`.
41486
41674
  * - `number`: In a diff, a line number. In a `wrap` block with `line-numbers`, one line's number in the gutter, which the block makes as tall as the line it numbers through `--code-block-line-size`.
@@ -42087,10 +42275,11 @@ export type CustomElements = {
42087
42275
  * the anchor the browser points its bubble at.
42088
42276
  *
42089
42277
  * **Text that is not a color is bad input**, so a form does not submit
42090
- * `#00` from a half-typed value. The picker draws no message of its own, so
42091
- * reporting it as each keystroke arrives shows nothing until the form asks;
42092
- * Color Input shows its own message against the field the reader typed
42093
- * into.
42278
+ * `#00` from a half-typed value. The picker marks it, and says
42279
+ * `badInputMessage` under itself, once the reader leaves the value field or
42280
+ * presses Enter, and a missing color once the reader has committed one or a
42281
+ * form has refused the picker. Color Input shows its own message against the
42282
+ * field the reader typed into.
42094
42283
  * - `saturation-label`/`saturationLabel`: What the square's horizontal ramp is called.
42095
42284
  * - `square-text`/`squareText`: What a screen reader hears for the square's place, the color's two
42096
42285
  * numbers and its name, on whichever of its two inputs it is on.
@@ -42209,14 +42398,10 @@ export type CustomElements = {
42209
42398
  *
42210
42399
  * Methods that can be called to access component functionality.
42211
42400
  *
42401
+ * - `formResetCallback() => void`: A reset ends any typing and takes back text that was not a color, so the
42402
+ * field shows the color the reset put back.
42212
42403
  * - `requestValue(next: string) => boolean`: Blocks every change while `readOnly` is set.
42213
42404
  * - `focus(options?: FocusOptions) => void`: Moves focus to the square.
42214
- * - `formResetCallback() => void`: Returns the control to its `defaultValue`, or to its `value` attribute
42215
- * where there is no `default-value`.
42216
- *
42217
- * Both halves are dropped, the consumer's and the control's, because a
42218
- * reset means the form is as it was served. Clearing only the internal one
42219
- * would leave a control that had been written to stuck at that value.
42220
42405
  * - `formStateRestoreCallback(state: string | File | FormData | null) => void`: Restores the value when the browser brings a form back.
42221
42406
  *
42222
42407
  * Falling back to what the markup declared rather than to empty, because
@@ -42297,7 +42482,7 @@ export type CustomElements = {
42297
42482
  * - `eyedropper-live`: The live region of the button inside `eyedropper`, which says its pending label.
42298
42483
  * - `eyedropper-spinner`: The ring the eyedropper button turns while it is pending.
42299
42484
  * - `eyedropper-text`: The words on the button inside `eyedropper`, trimmed to their capitals and baseline.
42300
- * - `feedback`: The message under the picker, while `feedback` is set.
42485
+ * - `feedback`: The message under the picker: `feedback`, or what is wrong with the answer once the picker is marked invalid.
42301
42486
  * - `field`: One channel's number field with its label, in `channel-fields`.
42302
42487
  * - `field-input`: The number input in a channel's field.
42303
42488
  * - `field-label`: The name above a channel's number input.
@@ -42455,12 +42640,13 @@ export type CustomElements = {
42455
42640
  * language.
42456
42641
  * - `multiple`: Whether more than one option can be chosen.
42457
42642
  *
42458
- * The list already does the work: `value` comes apart on commas, a press
42459
- * toggles rather than replaces, and the arrows move without choosing. What
42460
- * this adds is the tags, and keeping the panel open between picks.
42643
+ * The list already does the work: `value` is the chosen values joined with
42644
+ * commas, a press toggles rather than replaces, and the arrows move without
42645
+ * choosing. What this adds is the tags, and keeping the panel open between
42646
+ * picks.
42461
42647
  *
42462
- * A comma is therefore not available inside an option's value, which is the
42463
- * listbox's contract and not this element's to change.
42648
+ * An option's value may hold a comma, and it is read as one value, as
42649
+ * `Select` and `Listbox` read it. So may an answer the reader created.
42464
42650
  *
42465
42651
  * **The list is told, and the field is not.** `aria-multiselectable` belongs
42466
42652
  * to `listbox`, `grid`, `tree` and `tablist`, and `combobox` dropped it in
@@ -42801,7 +42987,8 @@ export type CustomElements = {
42801
42987
  * | `hotkey`, Command or Control with K by default | Opens the palette from anywhere on the page, or closes it. With `inline`, puts focus in its filter field. |
42802
42988
  * | Down, Up | Moves the highlight to the next or the previous command, round from the last to the first. |
42803
42989
  * | Page Down, Page Up | Moves the highlight by as many commands as the list shows at once. |
42804
- * | Home, End, Left, Right | Move the caret in the filter field. |
42990
+ * | Home, End | Move the caret in the filter field. With `home-end="list"`, move the highlight to the first or the last command. |
42991
+ * | Left, Right | Move the caret in the filter field. |
42805
42992
  * | Enter | Runs the highlighted command, or follows it where it is a link, and closes the palette. On a command with `opens`, shows its page. |
42806
42993
  * | Command or Control with Enter | Takes the highlighted command's `alternate` destination, where it has one. |
42807
42994
  * | Backspace | In an empty filter on a page, goes back to the page before. |
@@ -42823,6 +43010,11 @@ export type CustomElements = {
42823
43010
  * - `filter-delay`/`filterDelay`: How long typing rests before the commands are filtered, in milliseconds,
42824
43011
  * so a palette filtered on a server sends one `helix-filter` for a word.
42825
43012
  * `0` filters on every keystroke. See Listbox's `filter-delay`.
43013
+ * - `home-end`/`homeEnd`: Where Home and End go from the filter field.
43014
+ *
43015
+ * Absent, they move the caret, as APG's combobox has them. `list` moves the
43016
+ * highlight to the first or the last command, as React Aria's Autocomplete
43017
+ * does, and Shift with either still selects the text.
42826
43018
  * - `hotkey`: The key that opens the palette, written as `mod+k`, `shift+p`, or `k`,
42827
43019
  * in Kbd's chord spelling: `mod` is Command or Control, `ctrl`, `cmd`,
42828
43020
  * `alt` and `shift` the keys they name.
@@ -42837,6 +43029,9 @@ export type CustomElements = {
42837
43029
  * Choosing a command says `helix-select` and leaves the list where it is,
42838
43030
  * and `open`, `toggle` and the dialog's parts do nothing.
42839
43031
  * - `label`: Accessible name for the overlay, which has no visible heading.
43032
+ * - `layout`: How the commands are laid out, as Listbox's `layout`: `grid` draws them in
43033
+ * rows and columns, for a palette of icons or emoji, and the arrow keys
43034
+ * follow the rows and the columns. Absent is one command under another.
42840
43035
  * - `load-error`/`loadError`: What the list says when its commands could not be loaded, such as after a
42841
43036
  * request to a server fails. Empty, null or no attribute is no error, so
42842
43037
  * removing the attribute clears it. Passed to the list, which shows it
@@ -46326,9 +46521,10 @@ export type CustomElements = {
46326
46521
  * press. `requestChange` documents the pattern.
46327
46522
  *
46328
46523
  * **Keyboard.** The remove button is a tab stop of its own, and Enter or Space
46329
- * on it asks to remove the filter. In a `FilterInput`, Backspace in the empty
46330
- * field asks to remove the last chip, the arrow keys move between the field
46331
- * and the chips, and Delete or Backspace on a chip asks to remove it.
46524
+ * on it asks to remove the filter. In a `FilterInput`, the field's text is the
46525
+ * one tab stop: Backspace in the empty field asks to remove the last chip, the
46526
+ * arrow keys move between the field and the chips, and Delete or Backspace on
46527
+ * a chip asks to remove it.
46332
46528
  *
46333
46529
  * The remove button is named `dismiss-label` followed by the chip's words,
46334
46530
  * such as "Remove filter Status is not open", so a row of chips says which
@@ -46384,6 +46580,12 @@ export type CustomElements = {
46384
46580
  * reads. The moment somebody picks a different comparison it appears, which
46385
46581
  * makes an unusual filter look unusual.
46386
46582
  * - `dismissible`: Whether the element shows a control that dismisses it.
46583
+ * - `dismissTabStop`: Whether the remove button is a tab stop of its own.
46584
+ *
46585
+ * `FilterInput` writes `false` on the chips in its `tags` slot: the field's
46586
+ * text is its one tab stop, and the arrow keys move from the text to the
46587
+ * chips, as in a `multiple` Combobox. No attribute: it is coordination
46588
+ * between elements, as `Tag.dismissTabStop` is. (property only)
46387
46589
  * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
46388
46590
  *
46389
46591
  * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -46851,8 +47053,9 @@ export type CustomElements = {
46851
47053
  * first colon, reads a leading `-` as the negation, and reads a word in
46852
47054
  * brackets before the colon as the comparison.
46853
47055
  *
46854
- * **Keyboard.** Focus stays in the text. The text names the highlighted
46855
- * suggestion as its `aria-activedescendant`.
47056
+ * **Keyboard.** Focus stays in the text, which is the field's one tab stop. The
47057
+ * text names the highlighted suggestion as its `aria-activedescendant`, and the
47058
+ * arrow keys reach the tokens.
46856
47059
  *
46857
47060
  * | Key | What it does |
46858
47061
  * |---|---|
@@ -46910,12 +47113,24 @@ export type CustomElements = {
46910
47113
  * and removing the chip alone would leave its value ticked in the hidden
46911
47114
  * menu. Its dismissal is treated as the field being filtered by nothing, so
46912
47115
  * it fires `helix-facet` like every other change, and the chip goes when the
46913
- * filter goes.
47116
+ * filter goes. Set `chips` and the field adds, updates, and removes those
47117
+ * chips itself, from every `helix-facet` you do not cancel.
46914
47118
  *
46915
47119
  * ## Attributes & Properties
46916
47120
  *
46917
47121
  * Component attributes and properties that can be applied to the element or by using JavaScript.
46918
47122
  *
47123
+ * - `chips`: Whether the field keeps a `FilterChip` for each filter in its `tags` slot,
47124
+ * from the `helix-facet` events it hears.
47125
+ *
47126
+ * Off, you build the chips, which is what you do when your own model holds
47127
+ * the filters. On, a filter typed, picked, or changed adds or updates the
47128
+ * chip for its field, one with no values takes it away (unless its
47129
+ * comparison takes none, such as "is empty"), and removing the chip clears
47130
+ * the filter. A `helix-facet` you cancel changes no chip.
47131
+ *
47132
+ * The chips are elements the field adds to its own children, so leave this
47133
+ * off where a framework renders those children and would remove them.
46919
47134
  * - `clearable`: Shows a button that empties the field.
46920
47135
  *
46921
47136
  * The text only. The tokens are the consumer's markup and this element is not
@@ -46927,6 +47142,18 @@ export type CustomElements = {
46927
47142
  * - `filter-suggestions`/`filterSuggestions`: Whether the panel narrows itself to the suggestions that hold the term
46928
47143
  * being typed, as React Aria's Autocomplete filters. Off, the panel shows
46929
47144
  * what you slot and you narrow it.
47145
+ * - `loading`: Whether the suggestions are still loading, such as while a request for the
47146
+ * values of a typed key is out.
47147
+ *
47148
+ * The panel opens on `loading-text`, or the `loading` slot, while the field
47149
+ * has focus, and a screen reader hears it. Slot the options and clear this
47150
+ * when they arrive.
47151
+ * - `loading-text`/`loadingText`: Text the panel shows while the suggestions load.
47152
+ * - `no-results-text`/`noResultsText`: Text the panel shows when `filter-suggestions` hides every suggestion, such
47153
+ * as "No matching filters".
47154
+ *
47155
+ * Empty, or no `no-results` slot, and the panel closes instead, as it does
47156
+ * when it has nothing to offer.
46930
47157
  * - `placeholder`: The text shown while the field is empty.
46931
47158
  *
46932
47159
  * Not a label: it goes when typing starts.
@@ -47088,6 +47315,8 @@ export type CustomElements = {
47088
47315
  * - `feedback`: The message that says what is wrong, for content richer than a string. It shows while there is a message.
47089
47316
  * - `hint`: Help under the control, for content richer than the `hint` text.
47090
47317
  * - `label`: The label, for content richer than the `label` text.
47318
+ * - `loading`: What the panel shows while `loading` is set, for content richer than `loading-text`.
47319
+ * - `no-results`: What the panel shows when `filter-suggestions` hides every suggestion, for content richer than `no-results-text`.
47091
47320
  * - `start`: Content before the text, such as a search icon.
47092
47321
  * - `suggestions`: Suggestions for what to type next, as `Option`s and `Option.Group`s.
47093
47322
  * - `tags`: The active filters, as `FilterChip`s or `Tag`s.
@@ -47171,12 +47400,14 @@ export type CustomElements = {
47171
47400
  *
47172
47401
  * - `clear`: The button that empties the field.
47173
47402
  * - `control`: The input itself.
47403
+ * - `empty`: Shown in the panel when `filter-suggestions` hides every suggestion.
47174
47404
  * - `feedback`: The error message under the field.
47175
47405
  * - `field`: The box that holds everything.
47176
47406
  * - `hint`: The help text under the field, shown while there is no error.
47177
47407
  * - `label`: The label above the field.
47178
47408
  * - `lead`: The box before the text that holds the `start` slot.
47179
47409
  * - `live`: The live region that says how many suggestions the open panel offers. It is rendered from the first time the panel opens with suggestions.
47410
+ * - `loading`: Shown in the panel while the suggestions load.
47180
47411
  * - `rest`: The count of tokens that did not fit. It is a `<button>` with `expandable` and a `<span>` without it.
47181
47412
  * - `surface`: The floating panel the suggestions sit in.
47182
47413
  * - `tags`: The row the tokens sit in.
@@ -47186,6 +47417,8 @@ export type CustomElements = {
47186
47417
  * These can be used to apply styling when a component is in a given state.
47187
47418
  *
47188
47419
  * - `invalid`: The field has an error to show, from the browser's validation or from your `feedback`.
47420
+ * - `loading`: While `loading` is set.
47421
+ * - `no-results`: `filter-suggestions` hid every suggestion, and `no-results-text` or the `no-results` slot says so.
47189
47422
  * - `open`: The suggestions are open.
47190
47423
  * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
47191
47424
  */
@@ -47207,7 +47440,9 @@ export type CustomElements = {
47207
47440
  * **`relative` shows the same reading in words**, such as "3 hours ago" at
47208
47441
  * `long`, "3 hr. ago" at `short` and "3h ago" at `narrow`, the styles
47209
47442
  * `sl-relative-time` offers. `numeric="always"` says "1 day ago" where the
47210
- * default says "yesterday".
47443
+ * default says "yesterday". Both readings round the count, as
47444
+ * `sl-relative-time` does: 100 seconds ago is "2 minutes ago", and 59.6
47445
+ * minutes is "1 hour".
47211
47446
  *
47212
47447
  * **`date-style` and `time-style` take each locale's own pattern**, such as
47213
47448
  * "Tuesday, August 4, 2026" at `full`, and stand in for the separate fields,
@@ -48855,6 +49090,9 @@ export type CustomElements = {
48855
49090
  *
48856
49091
  * Methods that can be called to access component functionality.
48857
49092
  *
49093
+ * - `setRangeText(replacement: string, start?: number, end?: number, selectMode?: SelectionMode) => void`: Replaces a range of the text, as the native method does: the selection
49094
+ * where `start` and `end` are left out, and `selectMode` says what is
49095
+ * selected after. It sends no event, as the native method sends none.
48858
49096
  * - `setSelectionRange(start: number, end: number, direction?: SelectionDirection) => void`: Selects the range from `start` to `end` in one call, which setting
48859
49097
  * `selectionStart` and `selectionEnd` one at a time cannot always do.
48860
49098
  *
@@ -53525,7 +53763,9 @@ export type CustomElements = {
53525
53763
  * speaks it: `feedback` replaces the message under the field and does not
53526
53764
  * reach the bubble. Unset is the sentence registered for the page's
53527
53765
  * language, then the English.
53528
- * - `decrement-label`/`decrementLabel`: The name of the step down button, read by screen readers.
53766
+ * - `decrement-label`/`decrementLabel`: The name of the step down button, read by screen readers. The field's
53767
+ * label follows it, so a reader hears "Decrease Quantity", as React Aria
53768
+ * names its steppers.
53529
53769
  * - `format-options`/`formatOptions`: `Intl.NumberFormat` options the number is shown with while the field is
53530
53770
  * not being edited: a currency, a percent, a unit, or a number of decimals.
53531
53771
  * Written as JSON in the attribute.
@@ -53533,7 +53773,9 @@ export type CustomElements = {
53533
53773
  * ```html
53534
53774
  * <helix-number-input format-options='{"style":"currency","currency":"EUR"}'></helix-number-input>
53535
53775
  * ```
53536
- * - `increment-label`/`incrementLabel`: The name of the step up button, read by screen readers.
53776
+ * - `increment-label`/`incrementLabel`: The name of the step up button, read by screen readers. The field's
53777
+ * label follows it, so a reader hears "Increase Quantity", as React Aria
53778
+ * names its steppers.
53537
53779
  * - `large-step`/`largeStep`: How many steps `PageUp` and `PageDown` move.
53538
53780
  *
53539
53781
  * Ten steps, which is the convention every spinner on the platform follows,
@@ -53715,8 +53957,10 @@ export type CustomElements = {
53715
53957
  *
53716
53958
  * Methods that can be called to access component functionality.
53717
53959
  *
53718
- * - `stepUp(large = false) => void`: Steps the value up, by `largeStep` steps when `large` is set.
53719
- * - `stepDown(large = false) => void`: Steps the value down, by `largeStep` steps when `large` is set.
53960
+ * - `stepUp(count: number | boolean = 1) => void`: Steps the value up by `step`, `count` times, as the native method and
53961
+ * `Input.stepUp` do. `true` takes `largeStep` steps, as `PageUp` does.
53962
+ * - `stepDown(count: number | boolean = 1) => void`: Steps the value down by `step`, `count` times. `true` takes `largeStep`
53963
+ * steps, as `PageDown` does.
53720
53964
  *
53721
53965
  * The same path a press of the down arrow takes, so a consumer driving this
53722
53966
  * from their own control gets the clamping and the announcement rather than
@@ -58910,12 +59154,21 @@ export type CustomElements = {
58910
59154
  * sequence is correct in the server's markup, where the root cannot count its
58911
59155
  * slotted children.
58912
59156
  *
59157
+ * `active` names a step by its `value`. A step with no `value` is named by its
59158
+ * place, counted from 1, so a sequence written without values moves as one
59159
+ * written with them, and `helix-activate` says `1`, `2` and so on. Give every
59160
+ * step a value or none, because a value of `2` and the second place are one
59161
+ * name.
59162
+ *
58913
59163
  * `linear` keeps a reader from passing a stage they have not finished, as Ark
58914
59164
  * UI's linear steps do: a stage ahead is out of reach, and its button disabled,
58915
59165
  * until every stage before it is `complete` or `optional`. Going back is always
58916
59166
  * allowed. `next()` and `previous()` move one stage either way, under the
58917
59167
  * same rules, for your own buttons. `reset()` goes back to the first stage and
58918
- * clears every stage's `complete`, as Ark UI's `resetStep` does.
59168
+ * clears every stage's `complete`, as Ark UI's `resetStep` does. A button
59169
+ * anywhere on the page calls them with no script, as Ark UI's previous and
59170
+ * next triggers do: give it `commandfor` with the sequence's `id`, and
59171
+ * `command="--previous"`, `"--next"` or `"--reset"`.
58919
59172
  *
58920
59173
  * `completion="passed"` marks a stage `complete` once a reader moves past it,
58921
59174
  * as Ark UI counts a stage before the current one as completed. Going back
@@ -58942,18 +59195,21 @@ export type CustomElements = {
58942
59195
  * button is described by its `complete-label`.
58943
59196
  *
58944
59197
  * **Keyboard.** Each stage's name is a button and its own tab stop, and Enter
58945
- * or Space goes to the stage. Set `arrows` and the arrow keys move focus
58946
- * between the names as well, as Ark UI's steps do: Left and Right along a row,
58947
- * Up and Down a column, Home and End to the first and the last. The arrows
58948
- * pass over a disabled stage and one a linear sequence holds out of reach,
58949
- * and they move focus without going to the stage.
59198
+ * or Space goes to the stage. Set `arrows` and the names are one tab stop, the
59199
+ * current stage's, and the arrow keys move focus between them: Left and Right
59200
+ * along a row, Up and Down a column, Home and End to the first and the last.
59201
+ * The stop follows focus, so Tab leaves the sequence and Shift+Tab comes back
59202
+ * to the name the reader left. The arrows pass over a disabled stage and one a
59203
+ * linear sequence holds out of reach, and they move focus without going to the
59204
+ * stage.
58950
59205
  *
58951
59206
  * ## Attributes & Properties
58952
59207
  *
58953
59208
  * Component attributes and properties that can be applied to the element or by using JavaScript.
58954
59209
  *
58955
59210
  * - `arrows`: Whether the arrow keys move focus between the stages' names, along the
58956
- * way the steps run. Off by default, so the arrows keep scrolling the page.
59211
+ * way the steps run, and the names are one tab stop. Off by default, so the
59212
+ * arrows keep scrolling the page.
58957
59213
  * - `completion`: What marks a stage `complete`.
58958
59214
  *
58959
59215
  * Absent, you do: each step's `complete` is yours, because a reader who
@@ -59124,7 +59380,9 @@ export type CustomElements = {
59124
59380
  * - `disabled`: Whether the stage is disabled, so the user cannot go to it.
59125
59381
  * - `optional`: Whether a reader may pass the stage without finishing it, in a sequence
59126
59382
  * with `linear`. Ark UI's skippable step.
59127
- * - `value`: The value the step sends in `helix-select`.
59383
+ * - `value`: The value the step sends in `helix-select`, and what names the step in its
59384
+ * sequence's `active`. Without one, the sequence names the step by its place,
59385
+ * counted from 1.
59128
59386
  * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
59129
59387
  *
59130
59388
  * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -64515,6 +64773,12 @@ export type CustomElements = {
64515
64773
  * captions, and poster treatment. `Sandbox` takes its preview and `Menu` its
64516
64774
  * trigger the same way.
64517
64775
  *
64776
+ * **The player is a `Video` or a plain `<video>`.** Either takes `src` and
64777
+ * `poster` from the entry, is named by it, plays on, and answers Shift with N
64778
+ * or P while focused. A plain `<video>` has no previous and next controls
64779
+ * that send `helix-previous` or `helix-next`, so its moves are the entries,
64780
+ * the menu, and your own buttons calling `previous()` and `next()`.
64781
+ *
64518
64782
  * **Entries are markup.** React skips properties it would set imperatively
64519
64783
  * during hydration, so an array property on a custom element is missing on the
64520
64784
  * first paint of a server-rendered page. `using-the-elements.mdx` has the
@@ -64547,7 +64811,8 @@ export type CustomElements = {
64547
64811
  *
64548
64812
  * **The player is named by the current entry**, and the device's own media
64549
64813
  * controls show the entry as the title. A player you gave a `label` keeps
64550
- * your name, and only the title follows the entry.
64814
+ * your name, and only the title follows the entry. A plain `<video>` is
64815
+ * named through `aria-label`, unless you wrote one.
64551
64816
  *
64552
64817
  * **Keyboard.** The entries take one stop in the tab order: the entry you
64553
64818
  * last focused, or the current entry before you have focused one. Enter or
@@ -65238,6 +65503,11 @@ export type CustomElements = {
65238
65503
  * commas. Their rows carry `aria-disabled`, the keys and typing pass over
65239
65504
  * them, and a press, Space, or Control with A does not select them.
65240
65505
  *
65506
+ * **Rows a stylesheet can tell apart.** A chosen row carries `data-selected`,
65507
+ * a disabled one `data-disabled`, as React Aria's rows do, and the row the
65508
+ * keys are on, which holds the tab stop, `data-active`, whether or not the
65509
+ * list has focus.
65510
+ *
65241
65511
  * **Loading more.** `helix-range-change` fires as the items on screen change,
65242
65512
  * and `range` holds them. `helix-load-more` fires once a reader is within one
65243
65513
  * screen of the end, once for each length of the set: add to `items` and it can
@@ -69172,7 +69442,8 @@ export type CustomElementsSolidJs = {
69172
69442
  * field taking more. A draft that fails them does not send, and the composer
69173
69443
  * takes `:state(invalid)` and `aria-invalid` once the reader has tried to send
69174
69444
  * it, the form was submitted, or the reader edited the field and left it.
69175
- * Tabbing past an empty composer marks nothing.
69445
+ * Sending an empty required composer counts as trying. Tabbing past an empty
69446
+ * composer marks nothing.
69176
69447
  *
69177
69448
  * **`typing` says whether the user is writing**, and `helix-typing` is sent
69178
69449
  * each time it changes: when they start, and when they send or stop for
@@ -69483,8 +69754,10 @@ export type CustomElementsSolidJs = {
69483
69754
  * there when the transcript opened. A turn is said with its author first, such
69484
69755
  * as "Ada: It ships today" (`arrival-label`), where its author can be named.
69485
69756
  *
69486
- * Pass the turns as children or as `turns` data. Do not use both. Children
69487
- * render from the server and suit most conversations. `turns` draws a long
69757
+ * Pass the turns as children or as `turns` data. Do not use both: a chat given
69758
+ * both draws every turn from `turns` and then the children, and says so once
69759
+ * in the console. Children render from the server and suit most
69760
+ * conversations. `turns` draws a long
69488
69761
  * transcript one window at a time, so the log needs a block size of its own.
69489
69762
  *
69490
69763
  * **A conversation is built from three elements.** The chat holds the
@@ -69500,7 +69773,10 @@ export type CustomElementsSolidJs = {
69500
69773
  * it takes them away. Anything slotted into `status` is drawn first.
69501
69774
  *
69502
69775
  * **Keyboard.** The transcript moves between turns the way a feed does. Each
69503
- * turn says its place, such as "3 of 40", windowed or not.
69776
+ * turn says its place, such as "3 of 40", windowed or not. The transcript is
69777
+ * a tab stop while it holds a turn, and the turn a reader moved to is one
69778
+ * too. Moving to an older turn unpins a transcript that scrolls and scrolls
69779
+ * the turn into view, and moving to the newest pins it again.
69504
69780
  *
69505
69781
  * | Key | What it does |
69506
69782
  * |---|---|
@@ -69711,6 +69987,10 @@ export type CustomElementsSolidJs = {
69711
69987
  *
69712
69988
  * These can be used to apply styling when a component is in a given state.
69713
69989
  *
69990
+ * - `empty`: The conversation has no turns.
69991
+ * - `loading`: Older turns are loading: `history` is `loading`.
69992
+ * - `pinned`: The transcript follows its newest turn.
69993
+ * - `typing`: `typing` names someone on the other side.
69714
69994
  * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
69715
69995
  */
69716
69996
  "helix-headless-chat": Partial<
@@ -70222,7 +70502,11 @@ export type CustomElementsSolidJs = {
70222
70502
  * from the accessibility tree and left out of a copy. Set `mark-lines` to
70223
70503
  * mark lines a reader should look at, such as `2, 4-6`: the block draws a
70224
70504
  * band behind each run, placed where the lines are laid out, so it follows a
70225
- * highlighter's markup and lines that wrap. Set `wrap` to wrap long lines
70505
+ * highlighter's markup and lines that wrap. `added-lines` and
70506
+ * `removed-lines` mark lines the same way as inserted and deleted, as
70507
+ * Expressive Code's `ins` and `del` do, in code that is not a diff. The bands
70508
+ * are drawn and hidden from screen readers, so say in the text around the
70509
+ * block what a marked line means. Set `wrap` to wrap long lines
70226
70510
  * rather than scroll them; a gutter then numbers each line where it starts.
70227
70511
  * Set `wrappable` for a button in the header that turns `wrap` on and off,
70228
70512
  * pressed while the lines wrap.
@@ -70291,6 +70575,8 @@ export type CustomElementsSolidJs = {
70291
70575
  *
70292
70576
  * Component attributes and properties that can be applied to the element or by using JavaScript.
70293
70577
  *
70578
+ * - `added-lines`/`addedLines`: The lines to mark as inserted, as numbers and ranges counted from 1, such
70579
+ * as `3-4`. Drawn as `mark-lines` is, in the added color. Not for a diff.
70294
70580
  * - `code-label`/`codeLabel`: The name of a block that scrolls, which is a tab stop while it does.
70295
70581
  *
70296
70582
  * Where the block has a name, the scroller says it too, such as "Code,
@@ -70367,6 +70653,8 @@ export type CustomElementsSolidJs = {
70367
70653
  * `no-copy=""` on hosts that never asked for one, and the rule about a
70368
70654
  * reflected property taking no default is satisfied by the default being
70369
70655
  * `false`.
70656
+ * - `removed-lines`/`removedLines`: The lines to mark as deleted, as numbers and ranges counted from 1. Drawn
70657
+ * as `mark-lines` is, in the removed color. Not for a diff.
70370
70658
  * - `show-unchanged-label`/`showUnchangedLabel`: The words of a button that shows a folded run of unchanged lines, in a
70371
70659
  * diff with `context-lines`. `{count}` is how many.
70372
70660
  * - `variant`: How a diff's two versions are arranged. It has no effect without `diff`.
@@ -70446,6 +70734,8 @@ export type CustomElementsSolidJs = {
70446
70734
  * - `actions`: Controls for the block, in the header before the copy button.
70447
70735
  * - `copied-icon`: The copy button's icon after a copy. Defaults to a check mark.
70448
70736
  * - `copy-icon`: The copy button's icon before a copy. Defaults to a clipboard.
70737
+ * - `expand-icon`: An icon on the button that shows every line of a capped block, before its words.
70738
+ * - `label`: The block's name in the header, such as a file icon beside the file name. Replaces `label` and `language` there, and draws the header.
70449
70739
  *
70450
70740
  * ## CSS Custom Properties
70451
70741
  *
@@ -70493,7 +70783,9 @@ export type CustomElementsSolidJs = {
70493
70783
  * - `header`: The bar that holds the name and the copy button, shown when there is a name.
70494
70784
  * - `hunk`: In a diff, a `@@` line saying where the lines under it are.
70495
70785
  * - `label`: The block's name: its `label`, or its `language` where it has no label.
70496
- * - `mark`: The band behind a run of lines `mark-lines` names. The block writes where the run is laid out into `--code-block-mark-start`, `--code-block-mark-size`, and `--code-block-mark-inline-size` on it. Hidden from the accessibility tree.
70786
+ * - `mark`: The band behind a run of lines `mark-lines`, `added-lines` or `removed-lines` names. The block writes where the run is laid out into `--code-block-mark-start`, `--code-block-mark-size`, and `--code-block-mark-inline-size` on it. Hidden from the accessibility tree.
70787
+ * - `mark-added`: The band behind a run of lines `added-lines` names. Applied with `mark`.
70788
+ * - `mark-removed`: The band behind a run of lines `removed-lines` names. Applied with `mark`.
70497
70789
  * - `marker`: In a diff, the `+`, `-`, or space that starts a line.
70498
70790
  * - `new`: In a split diff, the new version's `<pre>`.
70499
70791
  * - `number`: In a diff, a line number. In a `wrap` block with `line-numbers`, one line's number in the gutter, which the block makes as tall as the line it numbers through `--code-block-line-size`.
@@ -71107,10 +71399,11 @@ export type CustomElementsSolidJs = {
71107
71399
  * the anchor the browser points its bubble at.
71108
71400
  *
71109
71401
  * **Text that is not a color is bad input**, so a form does not submit
71110
- * `#00` from a half-typed value. The picker draws no message of its own, so
71111
- * reporting it as each keystroke arrives shows nothing until the form asks;
71112
- * Color Input shows its own message against the field the reader typed
71113
- * into.
71402
+ * `#00` from a half-typed value. The picker marks it, and says
71403
+ * `badInputMessage` under itself, once the reader leaves the value field or
71404
+ * presses Enter, and a missing color once the reader has committed one or a
71405
+ * form has refused the picker. Color Input shows its own message against the
71406
+ * field the reader typed into.
71114
71407
  * - `saturation-label`/`saturationLabel`: What the square's horizontal ramp is called.
71115
71408
  * - `square-text`/`squareText`: What a screen reader hears for the square's place, the color's two
71116
71409
  * numbers and its name, on whichever of its two inputs it is on.
@@ -71229,14 +71522,10 @@ export type CustomElementsSolidJs = {
71229
71522
  *
71230
71523
  * Methods that can be called to access component functionality.
71231
71524
  *
71525
+ * - `formResetCallback() => void`: A reset ends any typing and takes back text that was not a color, so the
71526
+ * field shows the color the reset put back.
71232
71527
  * - `requestValue(next: string) => boolean`: Blocks every change while `readOnly` is set.
71233
71528
  * - `focus(options?: FocusOptions) => void`: Moves focus to the square.
71234
- * - `formResetCallback() => void`: Returns the control to its `defaultValue`, or to its `value` attribute
71235
- * where there is no `default-value`.
71236
- *
71237
- * Both halves are dropped, the consumer's and the control's, because a
71238
- * reset means the form is as it was served. Clearing only the internal one
71239
- * would leave a control that had been written to stuck at that value.
71240
71529
  * - `formStateRestoreCallback(state: string | File | FormData | null) => void`: Restores the value when the browser brings a form back.
71241
71530
  *
71242
71531
  * Falling back to what the markup declared rather than to empty, because
@@ -71317,7 +71606,7 @@ export type CustomElementsSolidJs = {
71317
71606
  * - `eyedropper-live`: The live region of the button inside `eyedropper`, which says its pending label.
71318
71607
  * - `eyedropper-spinner`: The ring the eyedropper button turns while it is pending.
71319
71608
  * - `eyedropper-text`: The words on the button inside `eyedropper`, trimmed to their capitals and baseline.
71320
- * - `feedback`: The message under the picker, while `feedback` is set.
71609
+ * - `feedback`: The message under the picker: `feedback`, or what is wrong with the answer once the picker is marked invalid.
71321
71610
  * - `field`: One channel's number field with its label, in `channel-fields`.
71322
71611
  * - `field-input`: The number input in a channel's field.
71323
71612
  * - `field-label`: The name above a channel's number input.
@@ -71476,12 +71765,13 @@ export type CustomElementsSolidJs = {
71476
71765
  * language.
71477
71766
  * - `multiple`: Whether more than one option can be chosen.
71478
71767
  *
71479
- * The list already does the work: `value` comes apart on commas, a press
71480
- * toggles rather than replaces, and the arrows move without choosing. What
71481
- * this adds is the tags, and keeping the panel open between picks.
71768
+ * The list already does the work: `value` is the chosen values joined with
71769
+ * commas, a press toggles rather than replaces, and the arrows move without
71770
+ * choosing. What this adds is the tags, and keeping the panel open between
71771
+ * picks.
71482
71772
  *
71483
- * A comma is therefore not available inside an option's value, which is the
71484
- * listbox's contract and not this element's to change.
71773
+ * An option's value may hold a comma, and it is read as one value, as
71774
+ * `Select` and `Listbox` read it. So may an answer the reader created.
71485
71775
  *
71486
71776
  * **The list is told, and the field is not.** `aria-multiselectable` belongs
71487
71777
  * to `listbox`, `grid`, `tree` and `tablist`, and `combobox` dropped it in
@@ -71825,7 +72115,8 @@ export type CustomElementsSolidJs = {
71825
72115
  * | `hotkey`, Command or Control with K by default | Opens the palette from anywhere on the page, or closes it. With `inline`, puts focus in its filter field. |
71826
72116
  * | Down, Up | Moves the highlight to the next or the previous command, round from the last to the first. |
71827
72117
  * | Page Down, Page Up | Moves the highlight by as many commands as the list shows at once. |
71828
- * | Home, End, Left, Right | Move the caret in the filter field. |
72118
+ * | Home, End | Move the caret in the filter field. With `home-end="list"`, move the highlight to the first or the last command. |
72119
+ * | Left, Right | Move the caret in the filter field. |
71829
72120
  * | Enter | Runs the highlighted command, or follows it where it is a link, and closes the palette. On a command with `opens`, shows its page. |
71830
72121
  * | Command or Control with Enter | Takes the highlighted command's `alternate` destination, where it has one. |
71831
72122
  * | Backspace | In an empty filter on a page, goes back to the page before. |
@@ -71847,6 +72138,11 @@ export type CustomElementsSolidJs = {
71847
72138
  * - `filter-delay`/`filterDelay`: How long typing rests before the commands are filtered, in milliseconds,
71848
72139
  * so a palette filtered on a server sends one `helix-filter` for a word.
71849
72140
  * `0` filters on every keystroke. See Listbox's `filter-delay`.
72141
+ * - `home-end`/`homeEnd`: Where Home and End go from the filter field.
72142
+ *
72143
+ * Absent, they move the caret, as APG's combobox has them. `list` moves the
72144
+ * highlight to the first or the last command, as React Aria's Autocomplete
72145
+ * does, and Shift with either still selects the text.
71850
72146
  * - `hotkey`: The key that opens the palette, written as `mod+k`, `shift+p`, or `k`,
71851
72147
  * in Kbd's chord spelling: `mod` is Command or Control, `ctrl`, `cmd`,
71852
72148
  * `alt` and `shift` the keys they name.
@@ -71861,6 +72157,9 @@ export type CustomElementsSolidJs = {
71861
72157
  * Choosing a command says `helix-select` and leaves the list where it is,
71862
72158
  * and `open`, `toggle` and the dialog's parts do nothing.
71863
72159
  * - `label`: Accessible name for the overlay, which has no visible heading.
72160
+ * - `layout`: How the commands are laid out, as Listbox's `layout`: `grid` draws them in
72161
+ * rows and columns, for a palette of icons or emoji, and the arrow keys
72162
+ * follow the rows and the columns. Absent is one command under another.
71864
72163
  * - `load-error`/`loadError`: What the list says when its commands could not be loaded, such as after a
71865
72164
  * request to a server fails. Empty, null or no attribute is no error, so
71866
72165
  * removing the attribute clears it. Passed to the list, which shows it
@@ -75383,9 +75682,10 @@ export type CustomElementsSolidJs = {
75383
75682
  * press. `requestChange` documents the pattern.
75384
75683
  *
75385
75684
  * **Keyboard.** The remove button is a tab stop of its own, and Enter or Space
75386
- * on it asks to remove the filter. In a `FilterInput`, Backspace in the empty
75387
- * field asks to remove the last chip, the arrow keys move between the field
75388
- * and the chips, and Delete or Backspace on a chip asks to remove it.
75685
+ * on it asks to remove the filter. In a `FilterInput`, the field's text is the
75686
+ * one tab stop: Backspace in the empty field asks to remove the last chip, the
75687
+ * arrow keys move between the field and the chips, and Delete or Backspace on
75688
+ * a chip asks to remove it.
75389
75689
  *
75390
75690
  * The remove button is named `dismiss-label` followed by the chip's words,
75391
75691
  * such as "Remove filter Status is not open", so a row of chips says which
@@ -75441,6 +75741,12 @@ export type CustomElementsSolidJs = {
75441
75741
  * reads. The moment somebody picks a different comparison it appears, which
75442
75742
  * makes an unusual filter look unusual.
75443
75743
  * - `dismissible`: Whether the element shows a control that dismisses it.
75744
+ * - `dismissTabStop`: Whether the remove button is a tab stop of its own.
75745
+ *
75746
+ * `FilterInput` writes `false` on the chips in its `tags` slot: the field's
75747
+ * text is its one tab stop, and the arrow keys move from the text to the
75748
+ * chips, as in a `multiple` Combobox. No attribute: it is coordination
75749
+ * between elements, as `Tag.dismissTabStop` is. (property only)
75444
75750
  * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
75445
75751
  *
75446
75752
  * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -75912,8 +76218,9 @@ export type CustomElementsSolidJs = {
75912
76218
  * first colon, reads a leading `-` as the negation, and reads a word in
75913
76219
  * brackets before the colon as the comparison.
75914
76220
  *
75915
- * **Keyboard.** Focus stays in the text. The text names the highlighted
75916
- * suggestion as its `aria-activedescendant`.
76221
+ * **Keyboard.** Focus stays in the text, which is the field's one tab stop. The
76222
+ * text names the highlighted suggestion as its `aria-activedescendant`, and the
76223
+ * arrow keys reach the tokens.
75917
76224
  *
75918
76225
  * | Key | What it does |
75919
76226
  * |---|---|
@@ -75971,12 +76278,24 @@ export type CustomElementsSolidJs = {
75971
76278
  * and removing the chip alone would leave its value ticked in the hidden
75972
76279
  * menu. Its dismissal is treated as the field being filtered by nothing, so
75973
76280
  * it fires `helix-facet` like every other change, and the chip goes when the
75974
- * filter goes.
76281
+ * filter goes. Set `chips` and the field adds, updates, and removes those
76282
+ * chips itself, from every `helix-facet` you do not cancel.
75975
76283
  *
75976
76284
  * ## Attributes & Properties
75977
76285
  *
75978
76286
  * Component attributes and properties that can be applied to the element or by using JavaScript.
75979
76287
  *
76288
+ * - `chips`: Whether the field keeps a `FilterChip` for each filter in its `tags` slot,
76289
+ * from the `helix-facet` events it hears.
76290
+ *
76291
+ * Off, you build the chips, which is what you do when your own model holds
76292
+ * the filters. On, a filter typed, picked, or changed adds or updates the
76293
+ * chip for its field, one with no values takes it away (unless its
76294
+ * comparison takes none, such as "is empty"), and removing the chip clears
76295
+ * the filter. A `helix-facet` you cancel changes no chip.
76296
+ *
76297
+ * The chips are elements the field adds to its own children, so leave this
76298
+ * off where a framework renders those children and would remove them.
75980
76299
  * - `clearable`: Shows a button that empties the field.
75981
76300
  *
75982
76301
  * The text only. The tokens are the consumer's markup and this element is not
@@ -75988,6 +76307,18 @@ export type CustomElementsSolidJs = {
75988
76307
  * - `filter-suggestions`/`filterSuggestions`: Whether the panel narrows itself to the suggestions that hold the term
75989
76308
  * being typed, as React Aria's Autocomplete filters. Off, the panel shows
75990
76309
  * what you slot and you narrow it.
76310
+ * - `loading`: Whether the suggestions are still loading, such as while a request for the
76311
+ * values of a typed key is out.
76312
+ *
76313
+ * The panel opens on `loading-text`, or the `loading` slot, while the field
76314
+ * has focus, and a screen reader hears it. Slot the options and clear this
76315
+ * when they arrive.
76316
+ * - `loading-text`/`loadingText`: Text the panel shows while the suggestions load.
76317
+ * - `no-results-text`/`noResultsText`: Text the panel shows when `filter-suggestions` hides every suggestion, such
76318
+ * as "No matching filters".
76319
+ *
76320
+ * Empty, or no `no-results` slot, and the panel closes instead, as it does
76321
+ * when it has nothing to offer.
75991
76322
  * - `placeholder`: The text shown while the field is empty.
75992
76323
  *
75993
76324
  * Not a label: it goes when typing starts.
@@ -76149,6 +76480,8 @@ export type CustomElementsSolidJs = {
76149
76480
  * - `feedback`: The message that says what is wrong, for content richer than a string. It shows while there is a message.
76150
76481
  * - `hint`: Help under the control, for content richer than the `hint` text.
76151
76482
  * - `label`: The label, for content richer than the `label` text.
76483
+ * - `loading`: What the panel shows while `loading` is set, for content richer than `loading-text`.
76484
+ * - `no-results`: What the panel shows when `filter-suggestions` hides every suggestion, for content richer than `no-results-text`.
76152
76485
  * - `start`: Content before the text, such as a search icon.
76153
76486
  * - `suggestions`: Suggestions for what to type next, as `Option`s and `Option.Group`s.
76154
76487
  * - `tags`: The active filters, as `FilterChip`s or `Tag`s.
@@ -76232,12 +76565,14 @@ export type CustomElementsSolidJs = {
76232
76565
  *
76233
76566
  * - `clear`: The button that empties the field.
76234
76567
  * - `control`: The input itself.
76568
+ * - `empty`: Shown in the panel when `filter-suggestions` hides every suggestion.
76235
76569
  * - `feedback`: The error message under the field.
76236
76570
  * - `field`: The box that holds everything.
76237
76571
  * - `hint`: The help text under the field, shown while there is no error.
76238
76572
  * - `label`: The label above the field.
76239
76573
  * - `lead`: The box before the text that holds the `start` slot.
76240
76574
  * - `live`: The live region that says how many suggestions the open panel offers. It is rendered from the first time the panel opens with suggestions.
76575
+ * - `loading`: Shown in the panel while the suggestions load.
76241
76576
  * - `rest`: The count of tokens that did not fit. It is a `<button>` with `expandable` and a `<span>` without it.
76242
76577
  * - `surface`: The floating panel the suggestions sit in.
76243
76578
  * - `tags`: The row the tokens sit in.
@@ -76247,6 +76582,8 @@ export type CustomElementsSolidJs = {
76247
76582
  * These can be used to apply styling when a component is in a given state.
76248
76583
  *
76249
76584
  * - `invalid`: The field has an error to show, from the browser's validation or from your `feedback`.
76585
+ * - `loading`: While `loading` is set.
76586
+ * - `no-results`: `filter-suggestions` hid every suggestion, and `no-results-text` or the `no-results` slot says so.
76250
76587
  * - `open`: The suggestions are open.
76251
76588
  * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
76252
76589
  */
@@ -76269,7 +76606,9 @@ export type CustomElementsSolidJs = {
76269
76606
  * **`relative` shows the same reading in words**, such as "3 hours ago" at
76270
76607
  * `long`, "3 hr. ago" at `short` and "3h ago" at `narrow`, the styles
76271
76608
  * `sl-relative-time` offers. `numeric="always"` says "1 day ago" where the
76272
- * default says "yesterday".
76609
+ * default says "yesterday". Both readings round the count, as
76610
+ * `sl-relative-time` does: 100 seconds ago is "2 minutes ago", and 59.6
76611
+ * minutes is "1 hour".
76273
76612
  *
76274
76613
  * **`date-style` and `time-style` take each locale's own pattern**, such as
76275
76614
  * "Tuesday, August 4, 2026" at `full`, and stand in for the separate fields,
@@ -77931,6 +78270,9 @@ export type CustomElementsSolidJs = {
77931
78270
  *
77932
78271
  * Methods that can be called to access component functionality.
77933
78272
  *
78273
+ * - `setRangeText(replacement: string, start?: number, end?: number, selectMode?: SelectionMode) => void`: Replaces a range of the text, as the native method does: the selection
78274
+ * where `start` and `end` are left out, and `selectMode` says what is
78275
+ * selected after. It sends no event, as the native method sends none.
77934
78276
  * - `setSelectionRange(start: number, end: number, direction?: SelectionDirection) => void`: Selects the range from `start` to `end` in one call, which setting
77935
78277
  * `selectionStart` and `selectionEnd` one at a time cannot always do.
77936
78278
  *
@@ -82669,7 +83011,9 @@ export type CustomElementsSolidJs = {
82669
83011
  * speaks it: `feedback` replaces the message under the field and does not
82670
83012
  * reach the bubble. Unset is the sentence registered for the page's
82671
83013
  * language, then the English.
82672
- * - `decrement-label`/`decrementLabel`: The name of the step down button, read by screen readers.
83014
+ * - `decrement-label`/`decrementLabel`: The name of the step down button, read by screen readers. The field's
83015
+ * label follows it, so a reader hears "Decrease Quantity", as React Aria
83016
+ * names its steppers.
82673
83017
  * - `format-options`/`formatOptions`: `Intl.NumberFormat` options the number is shown with while the field is
82674
83018
  * not being edited: a currency, a percent, a unit, or a number of decimals.
82675
83019
  * Written as JSON in the attribute.
@@ -82677,7 +83021,9 @@ export type CustomElementsSolidJs = {
82677
83021
  * ```html
82678
83022
  * <helix-number-input format-options='{"style":"currency","currency":"EUR"}'></helix-number-input>
82679
83023
  * ```
82680
- * - `increment-label`/`incrementLabel`: The name of the step up button, read by screen readers.
83024
+ * - `increment-label`/`incrementLabel`: The name of the step up button, read by screen readers. The field's
83025
+ * label follows it, so a reader hears "Increase Quantity", as React Aria
83026
+ * names its steppers.
82681
83027
  * - `large-step`/`largeStep`: How many steps `PageUp` and `PageDown` move.
82682
83028
  *
82683
83029
  * Ten steps, which is the convention every spinner on the platform follows,
@@ -82859,8 +83205,10 @@ export type CustomElementsSolidJs = {
82859
83205
  *
82860
83206
  * Methods that can be called to access component functionality.
82861
83207
  *
82862
- * - `stepUp(large = false) => void`: Steps the value up, by `largeStep` steps when `large` is set.
82863
- * - `stepDown(large = false) => void`: Steps the value down, by `largeStep` steps when `large` is set.
83208
+ * - `stepUp(count: number | boolean = 1) => void`: Steps the value up by `step`, `count` times, as the native method and
83209
+ * `Input.stepUp` do. `true` takes `largeStep` steps, as `PageUp` does.
83210
+ * - `stepDown(count: number | boolean = 1) => void`: Steps the value down by `step`, `count` times. `true` takes `largeStep`
83211
+ * steps, as `PageDown` does.
82864
83212
  *
82865
83213
  * The same path a press of the down arrow takes, so a consumer driving this
82866
83214
  * from their own control gets the clamping and the announcement rather than
@@ -88120,12 +88468,21 @@ export type CustomElementsSolidJs = {
88120
88468
  * sequence is correct in the server's markup, where the root cannot count its
88121
88469
  * slotted children.
88122
88470
  *
88471
+ * `active` names a step by its `value`. A step with no `value` is named by its
88472
+ * place, counted from 1, so a sequence written without values moves as one
88473
+ * written with them, and `helix-activate` says `1`, `2` and so on. Give every
88474
+ * step a value or none, because a value of `2` and the second place are one
88475
+ * name.
88476
+ *
88123
88477
  * `linear` keeps a reader from passing a stage they have not finished, as Ark
88124
88478
  * UI's linear steps do: a stage ahead is out of reach, and its button disabled,
88125
88479
  * until every stage before it is `complete` or `optional`. Going back is always
88126
88480
  * allowed. `next()` and `previous()` move one stage either way, under the
88127
88481
  * same rules, for your own buttons. `reset()` goes back to the first stage and
88128
- * clears every stage's `complete`, as Ark UI's `resetStep` does.
88482
+ * clears every stage's `complete`, as Ark UI's `resetStep` does. A button
88483
+ * anywhere on the page calls them with no script, as Ark UI's previous and
88484
+ * next triggers do: give it `commandfor` with the sequence's `id`, and
88485
+ * `command="--previous"`, `"--next"` or `"--reset"`.
88129
88486
  *
88130
88487
  * `completion="passed"` marks a stage `complete` once a reader moves past it,
88131
88488
  * as Ark UI counts a stage before the current one as completed. Going back
@@ -88152,18 +88509,21 @@ export type CustomElementsSolidJs = {
88152
88509
  * button is described by its `complete-label`.
88153
88510
  *
88154
88511
  * **Keyboard.** Each stage's name is a button and its own tab stop, and Enter
88155
- * or Space goes to the stage. Set `arrows` and the arrow keys move focus
88156
- * between the names as well, as Ark UI's steps do: Left and Right along a row,
88157
- * Up and Down a column, Home and End to the first and the last. The arrows
88158
- * pass over a disabled stage and one a linear sequence holds out of reach,
88159
- * and they move focus without going to the stage.
88512
+ * or Space goes to the stage. Set `arrows` and the names are one tab stop, the
88513
+ * current stage's, and the arrow keys move focus between them: Left and Right
88514
+ * along a row, Up and Down a column, Home and End to the first and the last.
88515
+ * The stop follows focus, so Tab leaves the sequence and Shift+Tab comes back
88516
+ * to the name the reader left. The arrows pass over a disabled stage and one a
88517
+ * linear sequence holds out of reach, and they move focus without going to the
88518
+ * stage.
88160
88519
  *
88161
88520
  * ## Attributes & Properties
88162
88521
  *
88163
88522
  * Component attributes and properties that can be applied to the element or by using JavaScript.
88164
88523
  *
88165
88524
  * - `arrows`: Whether the arrow keys move focus between the stages' names, along the
88166
- * way the steps run. Off by default, so the arrows keep scrolling the page.
88525
+ * way the steps run, and the names are one tab stop. Off by default, so the
88526
+ * arrows keep scrolling the page.
88167
88527
  * - `completion`: What marks a stage `complete`.
88168
88528
  *
88169
88529
  * Absent, you do: each step's `complete` is yours, because a reader who
@@ -88337,7 +88697,9 @@ export type CustomElementsSolidJs = {
88337
88697
  * - `disabled`: Whether the stage is disabled, so the user cannot go to it.
88338
88698
  * - `optional`: Whether a reader may pass the stage without finishing it, in a sequence
88339
88699
  * with `linear`. Ark UI's skippable step.
88340
- * - `value`: The value the step sends in `helix-select`.
88700
+ * - `value`: The value the step sends in `helix-select`, and what names the step in its
88701
+ * sequence's `active`. Without one, the sequence names the step by its place,
88702
+ * counted from 1.
88341
88703
  * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
88342
88704
  *
88343
88705
  * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -93804,6 +94166,12 @@ export type CustomElementsSolidJs = {
93804
94166
  * captions, and poster treatment. `Sandbox` takes its preview and `Menu` its
93805
94167
  * trigger the same way.
93806
94168
  *
94169
+ * **The player is a `Video` or a plain `<video>`.** Either takes `src` and
94170
+ * `poster` from the entry, is named by it, plays on, and answers Shift with N
94171
+ * or P while focused. A plain `<video>` has no previous and next controls
94172
+ * that send `helix-previous` or `helix-next`, so its moves are the entries,
94173
+ * the menu, and your own buttons calling `previous()` and `next()`.
94174
+ *
93807
94175
  * **Entries are markup.** React skips properties it would set imperatively
93808
94176
  * during hydration, so an array property on a custom element is missing on the
93809
94177
  * first paint of a server-rendered page. `using-the-elements.mdx` has the
@@ -93836,7 +94204,8 @@ export type CustomElementsSolidJs = {
93836
94204
  *
93837
94205
  * **The player is named by the current entry**, and the device's own media
93838
94206
  * controls show the entry as the title. A player you gave a `label` keeps
93839
- * your name, and only the title follows the entry.
94207
+ * your name, and only the title follows the entry. A plain `<video>` is
94208
+ * named through `aria-label`, unless you wrote one.
93840
94209
  *
93841
94210
  * **Keyboard.** The entries take one stop in the tab order: the entry you
93842
94211
  * last focused, or the current entry before you have focused one. Enter or
@@ -94531,6 +94900,11 @@ export type CustomElementsSolidJs = {
94531
94900
  * commas. Their rows carry `aria-disabled`, the keys and typing pass over
94532
94901
  * them, and a press, Space, or Control with A does not select them.
94533
94902
  *
94903
+ * **Rows a stylesheet can tell apart.** A chosen row carries `data-selected`,
94904
+ * a disabled one `data-disabled`, as React Aria's rows do, and the row the
94905
+ * keys are on, which holds the tab stop, `data-active`, whether or not the
94906
+ * list has focus.
94907
+ *
94534
94908
  * **Loading more.** `helix-range-change` fires as the items on screen change,
94535
94909
  * and `range` holds them. `helix-load-more` fires once a reader is within one
94536
94910
  * screen of the end, once for each length of the set: add to `items` and it can