@fusion.dev/helix-headless 0.169.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 (41) hide show
  1. package/custom-elements.json +663 -95
  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/data-table/root/data-table-root.d.ts +40 -5
  15. package/dist/data-table/root/data-table-root.js +35 -7
  16. package/dist/filter-input/chip/filter-chip.d.ts +13 -3
  17. package/dist/filter-input/chip/filter-chip.js +5 -0
  18. package/dist/filter-input/menu/filter-menu.js +0 -1
  19. package/dist/filter-input/root/filter-input-root.d.ts +71 -4
  20. package/dist/filter-input/root/filter-input-root.js +87 -2
  21. package/dist/format-date/root/format-date-root.d.ts +3 -1
  22. package/dist/input/root/input-root.d.ts +6 -0
  23. package/dist/input/root/input-root.js +13 -0
  24. package/dist/listbox/root/listbox-root.d.ts +6 -0
  25. package/dist/listbox/root/listbox-root.js +6 -1
  26. package/dist/number-input/root/number-input-root.d.ts +16 -6
  27. package/dist/number-input/root/number-input-root.js +15 -4
  28. package/dist/select/root/select-root.js +2 -0
  29. package/dist/steps/root/steps-root.d.ts +32 -8
  30. package/dist/steps/root/steps-root.js +70 -9
  31. package/dist/steps/step/step.d.ts +9 -1
  32. package/dist/steps/step/step.js +5 -0
  33. package/dist/video-playlist/root/video-playlist-root.d.ts +19 -1
  34. package/dist/video-playlist/root/video-playlist-root.js +14 -3
  35. package/dist/virtual-list/root/virtual-list-root.d.ts +8 -0
  36. package/dist/virtual-list/root/virtual-list-root.js +7 -2
  37. package/lint.json +1 -1
  38. package/package.json +5 -5
  39. package/types/jsx.d.ts +510 -126
  40. package/types/vue.d.ts +109 -26
  41. 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
@@ -43245,10 +43440,15 @@ export type CustomElements = {
43245
43440
  *
43246
43441
  * Sort and filter apply to the whole set, including the rows on other pages.
43247
43442
  *
43248
- * **The cell values do not server-render.** The headings and the row elements
43249
- * do. Reading a cell needs the columns, and Lit SSR does not pass the column
43250
- * children to this element, so a crawler sees an empty table of the right
43251
- * shape. Use `Table` when the served HTML has to carry the values.
43443
+ * **Write the first page as rows, so the served HTML carries the values.** The
43444
+ * table reads each cell from its column, and a server does not pass the column
43445
+ * children to this element, so on its own it serves the headings and no values.
43446
+ * Write the first page under the columns as `TableRow` and `TableCell`
43447
+ * elements, in the table's sort and page size and formatted as its columns draw
43448
+ * them. The table shows your rows until `rows` holds a row, then draws its own
43449
+ * in their place and leaves yours in the page, unshown. A development build
43450
+ * warns when the two differ. In React, map the first page of the same array in
43451
+ * the same server component.
43252
43452
  *
43253
43453
  * `selectable` adds a column of checkboxes, keyed on `row-key`:
43254
43454
  *
@@ -43598,7 +43798,7 @@ export type CustomElements = {
43598
43798
  *
43599
43799
  * Areas where markup can be added to the component.
43600
43800
  *
43601
- * - `(default)`: The columns, as `TableColumn` elements.
43801
+ * - `(default)`: The columns, as `TableColumn` elements, and the first page served as `TableRow` elements, which show until `rows` holds a row.
43602
43802
  * - `empty`: Content shown when there are no rows to show and none are loading, such as a picture and a link. Falls back to `empty-text`, which the live region still says.
43603
43803
  * - `error`: Content shown while `error-text` is set, such as a button that tries again. Falls back to `error-text`, which the live region still says.
43604
43804
  * - `footer`: Content below the grid. It replaces the built-in pagination.
@@ -46321,9 +46521,10 @@ export type CustomElements = {
46321
46521
  * press. `requestChange` documents the pattern.
46322
46522
  *
46323
46523
  * **Keyboard.** The remove button is a tab stop of its own, and Enter or Space
46324
- * on it asks to remove the filter. In a `FilterInput`, Backspace in the empty
46325
- * field asks to remove the last chip, the arrow keys move between the field
46326
- * 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.
46327
46528
  *
46328
46529
  * The remove button is named `dismiss-label` followed by the chip's words,
46329
46530
  * such as "Remove filter Status is not open", so a row of chips says which
@@ -46379,6 +46580,12 @@ export type CustomElements = {
46379
46580
  * reads. The moment somebody picks a different comparison it appears, which
46380
46581
  * makes an unusual filter look unusual.
46381
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)
46382
46589
  * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
46383
46590
  *
46384
46591
  * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -46846,8 +47053,9 @@ export type CustomElements = {
46846
47053
  * first colon, reads a leading `-` as the negation, and reads a word in
46847
47054
  * brackets before the colon as the comparison.
46848
47055
  *
46849
- * **Keyboard.** Focus stays in the text. The text names the highlighted
46850
- * 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.
46851
47059
  *
46852
47060
  * | Key | What it does |
46853
47061
  * |---|---|
@@ -46905,12 +47113,24 @@ export type CustomElements = {
46905
47113
  * and removing the chip alone would leave its value ticked in the hidden
46906
47114
  * menu. Its dismissal is treated as the field being filtered by nothing, so
46907
47115
  * it fires `helix-facet` like every other change, and the chip goes when the
46908
- * 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.
46909
47118
  *
46910
47119
  * ## Attributes & Properties
46911
47120
  *
46912
47121
  * Component attributes and properties that can be applied to the element or by using JavaScript.
46913
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.
46914
47134
  * - `clearable`: Shows a button that empties the field.
46915
47135
  *
46916
47136
  * The text only. The tokens are the consumer's markup and this element is not
@@ -46922,6 +47142,18 @@ export type CustomElements = {
46922
47142
  * - `filter-suggestions`/`filterSuggestions`: Whether the panel narrows itself to the suggestions that hold the term
46923
47143
  * being typed, as React Aria's Autocomplete filters. Off, the panel shows
46924
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.
46925
47157
  * - `placeholder`: The text shown while the field is empty.
46926
47158
  *
46927
47159
  * Not a label: it goes when typing starts.
@@ -47083,6 +47315,8 @@ export type CustomElements = {
47083
47315
  * - `feedback`: The message that says what is wrong, for content richer than a string. It shows while there is a message.
47084
47316
  * - `hint`: Help under the control, for content richer than the `hint` text.
47085
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`.
47086
47320
  * - `start`: Content before the text, such as a search icon.
47087
47321
  * - `suggestions`: Suggestions for what to type next, as `Option`s and `Option.Group`s.
47088
47322
  * - `tags`: The active filters, as `FilterChip`s or `Tag`s.
@@ -47166,12 +47400,14 @@ export type CustomElements = {
47166
47400
  *
47167
47401
  * - `clear`: The button that empties the field.
47168
47402
  * - `control`: The input itself.
47403
+ * - `empty`: Shown in the panel when `filter-suggestions` hides every suggestion.
47169
47404
  * - `feedback`: The error message under the field.
47170
47405
  * - `field`: The box that holds everything.
47171
47406
  * - `hint`: The help text under the field, shown while there is no error.
47172
47407
  * - `label`: The label above the field.
47173
47408
  * - `lead`: The box before the text that holds the `start` slot.
47174
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.
47175
47411
  * - `rest`: The count of tokens that did not fit. It is a `<button>` with `expandable` and a `<span>` without it.
47176
47412
  * - `surface`: The floating panel the suggestions sit in.
47177
47413
  * - `tags`: The row the tokens sit in.
@@ -47181,6 +47417,8 @@ export type CustomElements = {
47181
47417
  * These can be used to apply styling when a component is in a given state.
47182
47418
  *
47183
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.
47184
47422
  * - `open`: The suggestions are open.
47185
47423
  * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
47186
47424
  */
@@ -47202,7 +47440,9 @@ export type CustomElements = {
47202
47440
  * **`relative` shows the same reading in words**, such as "3 hours ago" at
47203
47441
  * `long`, "3 hr. ago" at `short` and "3h ago" at `narrow`, the styles
47204
47442
  * `sl-relative-time` offers. `numeric="always"` says "1 day ago" where the
47205
- * 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".
47206
47446
  *
47207
47447
  * **`date-style` and `time-style` take each locale's own pattern**, such as
47208
47448
  * "Tuesday, August 4, 2026" at `full`, and stand in for the separate fields,
@@ -48850,6 +49090,9 @@ export type CustomElements = {
48850
49090
  *
48851
49091
  * Methods that can be called to access component functionality.
48852
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.
48853
49096
  * - `setSelectionRange(start: number, end: number, direction?: SelectionDirection) => void`: Selects the range from `start` to `end` in one call, which setting
48854
49097
  * `selectionStart` and `selectionEnd` one at a time cannot always do.
48855
49098
  *
@@ -53520,7 +53763,9 @@ export type CustomElements = {
53520
53763
  * speaks it: `feedback` replaces the message under the field and does not
53521
53764
  * reach the bubble. Unset is the sentence registered for the page's
53522
53765
  * language, then the English.
53523
- * - `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.
53524
53769
  * - `format-options`/`formatOptions`: `Intl.NumberFormat` options the number is shown with while the field is
53525
53770
  * not being edited: a currency, a percent, a unit, or a number of decimals.
53526
53771
  * Written as JSON in the attribute.
@@ -53528,7 +53773,9 @@ export type CustomElements = {
53528
53773
  * ```html
53529
53774
  * <helix-number-input format-options='{"style":"currency","currency":"EUR"}'></helix-number-input>
53530
53775
  * ```
53531
- * - `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.
53532
53779
  * - `large-step`/`largeStep`: How many steps `PageUp` and `PageDown` move.
53533
53780
  *
53534
53781
  * Ten steps, which is the convention every spinner on the platform follows,
@@ -53710,8 +53957,10 @@ export type CustomElements = {
53710
53957
  *
53711
53958
  * Methods that can be called to access component functionality.
53712
53959
  *
53713
- * - `stepUp(large = false) => void`: Steps the value up, by `largeStep` steps when `large` is set.
53714
- * - `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.
53715
53964
  *
53716
53965
  * The same path a press of the down arrow takes, so a consumer driving this
53717
53966
  * from their own control gets the clamping and the announcement rather than
@@ -58905,12 +59154,21 @@ export type CustomElements = {
58905
59154
  * sequence is correct in the server's markup, where the root cannot count its
58906
59155
  * slotted children.
58907
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
+ *
58908
59163
  * `linear` keeps a reader from passing a stage they have not finished, as Ark
58909
59164
  * UI's linear steps do: a stage ahead is out of reach, and its button disabled,
58910
59165
  * until every stage before it is `complete` or `optional`. Going back is always
58911
59166
  * allowed. `next()` and `previous()` move one stage either way, under the
58912
59167
  * same rules, for your own buttons. `reset()` goes back to the first stage and
58913
- * 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"`.
58914
59172
  *
58915
59173
  * `completion="passed"` marks a stage `complete` once a reader moves past it,
58916
59174
  * as Ark UI counts a stage before the current one as completed. Going back
@@ -58937,18 +59195,21 @@ export type CustomElements = {
58937
59195
  * button is described by its `complete-label`.
58938
59196
  *
58939
59197
  * **Keyboard.** Each stage's name is a button and its own tab stop, and Enter
58940
- * or Space goes to the stage. Set `arrows` and the arrow keys move focus
58941
- * between the names as well, as Ark UI's steps do: Left and Right along a row,
58942
- * Up and Down a column, Home and End to the first and the last. The arrows
58943
- * pass over a disabled stage and one a linear sequence holds out of reach,
58944
- * 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.
58945
59205
  *
58946
59206
  * ## Attributes & Properties
58947
59207
  *
58948
59208
  * Component attributes and properties that can be applied to the element or by using JavaScript.
58949
59209
  *
58950
59210
  * - `arrows`: Whether the arrow keys move focus between the stages' names, along the
58951
- * 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.
58952
59213
  * - `completion`: What marks a stage `complete`.
58953
59214
  *
58954
59215
  * Absent, you do: each step's `complete` is yours, because a reader who
@@ -59119,7 +59380,9 @@ export type CustomElements = {
59119
59380
  * - `disabled`: Whether the stage is disabled, so the user cannot go to it.
59120
59381
  * - `optional`: Whether a reader may pass the stage without finishing it, in a sequence
59121
59382
  * with `linear`. Ark UI's skippable step.
59122
- * - `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.
59123
59386
  * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
59124
59387
  *
59125
59388
  * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -64510,6 +64773,12 @@ export type CustomElements = {
64510
64773
  * captions, and poster treatment. `Sandbox` takes its preview and `Menu` its
64511
64774
  * trigger the same way.
64512
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
+ *
64513
64782
  * **Entries are markup.** React skips properties it would set imperatively
64514
64783
  * during hydration, so an array property on a custom element is missing on the
64515
64784
  * first paint of a server-rendered page. `using-the-elements.mdx` has the
@@ -64542,7 +64811,8 @@ export type CustomElements = {
64542
64811
  *
64543
64812
  * **The player is named by the current entry**, and the device's own media
64544
64813
  * controls show the entry as the title. A player you gave a `label` keeps
64545
- * 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.
64546
64816
  *
64547
64817
  * **Keyboard.** The entries take one stop in the tab order: the entry you
64548
64818
  * last focused, or the current entry before you have focused one. Enter or
@@ -65233,6 +65503,11 @@ export type CustomElements = {
65233
65503
  * commas. Their rows carry `aria-disabled`, the keys and typing pass over
65234
65504
  * them, and a press, Space, or Control with A does not select them.
65235
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
+ *
65236
65511
  * **Loading more.** `helix-range-change` fires as the items on screen change,
65237
65512
  * and `range` holds them. `helix-load-more` fires once a reader is within one
65238
65513
  * screen of the end, once for each length of the set: add to `items` and it can
@@ -69167,7 +69442,8 @@ export type CustomElementsSolidJs = {
69167
69442
  * field taking more. A draft that fails them does not send, and the composer
69168
69443
  * takes `:state(invalid)` and `aria-invalid` once the reader has tried to send
69169
69444
  * it, the form was submitted, or the reader edited the field and left it.
69170
- * Tabbing past an empty composer marks nothing.
69445
+ * Sending an empty required composer counts as trying. Tabbing past an empty
69446
+ * composer marks nothing.
69171
69447
  *
69172
69448
  * **`typing` says whether the user is writing**, and `helix-typing` is sent
69173
69449
  * each time it changes: when they start, and when they send or stop for
@@ -69478,8 +69754,10 @@ export type CustomElementsSolidJs = {
69478
69754
  * there when the transcript opened. A turn is said with its author first, such
69479
69755
  * as "Ada: It ships today" (`arrival-label`), where its author can be named.
69480
69756
  *
69481
- * Pass the turns as children or as `turns` data. Do not use both. Children
69482
- * 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
69483
69761
  * transcript one window at a time, so the log needs a block size of its own.
69484
69762
  *
69485
69763
  * **A conversation is built from three elements.** The chat holds the
@@ -69495,7 +69773,10 @@ export type CustomElementsSolidJs = {
69495
69773
  * it takes them away. Anything slotted into `status` is drawn first.
69496
69774
  *
69497
69775
  * **Keyboard.** The transcript moves between turns the way a feed does. Each
69498
- * 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.
69499
69780
  *
69500
69781
  * | Key | What it does |
69501
69782
  * |---|---|
@@ -69706,6 +69987,10 @@ export type CustomElementsSolidJs = {
69706
69987
  *
69707
69988
  * These can be used to apply styling when a component is in a given state.
69708
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.
69709
69994
  * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
69710
69995
  */
69711
69996
  "helix-headless-chat": Partial<
@@ -70217,7 +70502,11 @@ export type CustomElementsSolidJs = {
70217
70502
  * from the accessibility tree and left out of a copy. Set `mark-lines` to
70218
70503
  * mark lines a reader should look at, such as `2, 4-6`: the block draws a
70219
70504
  * band behind each run, placed where the lines are laid out, so it follows a
70220
- * 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
70221
70510
  * rather than scroll them; a gutter then numbers each line where it starts.
70222
70511
  * Set `wrappable` for a button in the header that turns `wrap` on and off,
70223
70512
  * pressed while the lines wrap.
@@ -70286,6 +70575,8 @@ export type CustomElementsSolidJs = {
70286
70575
  *
70287
70576
  * Component attributes and properties that can be applied to the element or by using JavaScript.
70288
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.
70289
70580
  * - `code-label`/`codeLabel`: The name of a block that scrolls, which is a tab stop while it does.
70290
70581
  *
70291
70582
  * Where the block has a name, the scroller says it too, such as "Code,
@@ -70362,6 +70653,8 @@ export type CustomElementsSolidJs = {
70362
70653
  * `no-copy=""` on hosts that never asked for one, and the rule about a
70363
70654
  * reflected property taking no default is satisfied by the default being
70364
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.
70365
70658
  * - `show-unchanged-label`/`showUnchangedLabel`: The words of a button that shows a folded run of unchanged lines, in a
70366
70659
  * diff with `context-lines`. `{count}` is how many.
70367
70660
  * - `variant`: How a diff's two versions are arranged. It has no effect without `diff`.
@@ -70441,6 +70734,8 @@ export type CustomElementsSolidJs = {
70441
70734
  * - `actions`: Controls for the block, in the header before the copy button.
70442
70735
  * - `copied-icon`: The copy button's icon after a copy. Defaults to a check mark.
70443
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.
70444
70739
  *
70445
70740
  * ## CSS Custom Properties
70446
70741
  *
@@ -70488,7 +70783,9 @@ export type CustomElementsSolidJs = {
70488
70783
  * - `header`: The bar that holds the name and the copy button, shown when there is a name.
70489
70784
  * - `hunk`: In a diff, a `@@` line saying where the lines under it are.
70490
70785
  * - `label`: The block's name: its `label`, or its `language` where it has no label.
70491
- * - `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`.
70492
70789
  * - `marker`: In a diff, the `+`, `-`, or space that starts a line.
70493
70790
  * - `new`: In a split diff, the new version's `<pre>`.
70494
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`.
@@ -71102,10 +71399,11 @@ export type CustomElementsSolidJs = {
71102
71399
  * the anchor the browser points its bubble at.
71103
71400
  *
71104
71401
  * **Text that is not a color is bad input**, so a form does not submit
71105
- * `#00` from a half-typed value. The picker draws no message of its own, so
71106
- * reporting it as each keystroke arrives shows nothing until the form asks;
71107
- * Color Input shows its own message against the field the reader typed
71108
- * 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.
71109
71407
  * - `saturation-label`/`saturationLabel`: What the square's horizontal ramp is called.
71110
71408
  * - `square-text`/`squareText`: What a screen reader hears for the square's place, the color's two
71111
71409
  * numbers and its name, on whichever of its two inputs it is on.
@@ -71224,14 +71522,10 @@ export type CustomElementsSolidJs = {
71224
71522
  *
71225
71523
  * Methods that can be called to access component functionality.
71226
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.
71227
71527
  * - `requestValue(next: string) => boolean`: Blocks every change while `readOnly` is set.
71228
71528
  * - `focus(options?: FocusOptions) => void`: Moves focus to the square.
71229
- * - `formResetCallback() => void`: Returns the control to its `defaultValue`, or to its `value` attribute
71230
- * where there is no `default-value`.
71231
- *
71232
- * Both halves are dropped, the consumer's and the control's, because a
71233
- * reset means the form is as it was served. Clearing only the internal one
71234
- * would leave a control that had been written to stuck at that value.
71235
71529
  * - `formStateRestoreCallback(state: string | File | FormData | null) => void`: Restores the value when the browser brings a form back.
71236
71530
  *
71237
71531
  * Falling back to what the markup declared rather than to empty, because
@@ -71312,7 +71606,7 @@ export type CustomElementsSolidJs = {
71312
71606
  * - `eyedropper-live`: The live region of the button inside `eyedropper`, which says its pending label.
71313
71607
  * - `eyedropper-spinner`: The ring the eyedropper button turns while it is pending.
71314
71608
  * - `eyedropper-text`: The words on the button inside `eyedropper`, trimmed to their capitals and baseline.
71315
- * - `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.
71316
71610
  * - `field`: One channel's number field with its label, in `channel-fields`.
71317
71611
  * - `field-input`: The number input in a channel's field.
71318
71612
  * - `field-label`: The name above a channel's number input.
@@ -71471,12 +71765,13 @@ export type CustomElementsSolidJs = {
71471
71765
  * language.
71472
71766
  * - `multiple`: Whether more than one option can be chosen.
71473
71767
  *
71474
- * The list already does the work: `value` comes apart on commas, a press
71475
- * toggles rather than replaces, and the arrows move without choosing. What
71476
- * 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.
71477
71772
  *
71478
- * A comma is therefore not available inside an option's value, which is the
71479
- * 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.
71480
71775
  *
71481
71776
  * **The list is told, and the field is not.** `aria-multiselectable` belongs
71482
71777
  * to `listbox`, `grid`, `tree` and `tablist`, and `combobox` dropped it in
@@ -71820,7 +72115,8 @@ export type CustomElementsSolidJs = {
71820
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. |
71821
72116
  * | Down, Up | Moves the highlight to the next or the previous command, round from the last to the first. |
71822
72117
  * | Page Down, Page Up | Moves the highlight by as many commands as the list shows at once. |
71823
- * | 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. |
71824
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. |
71825
72121
  * | Command or Control with Enter | Takes the highlighted command's `alternate` destination, where it has one. |
71826
72122
  * | Backspace | In an empty filter on a page, goes back to the page before. |
@@ -71842,6 +72138,11 @@ export type CustomElementsSolidJs = {
71842
72138
  * - `filter-delay`/`filterDelay`: How long typing rests before the commands are filtered, in milliseconds,
71843
72139
  * so a palette filtered on a server sends one `helix-filter` for a word.
71844
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.
71845
72146
  * - `hotkey`: The key that opens the palette, written as `mod+k`, `shift+p`, or `k`,
71846
72147
  * in Kbd's chord spelling: `mod` is Command or Control, `ctrl`, `cmd`,
71847
72148
  * `alt` and `shift` the keys they name.
@@ -71856,6 +72157,9 @@ export type CustomElementsSolidJs = {
71856
72157
  * Choosing a command says `helix-select` and leaves the list where it is,
71857
72158
  * and `open`, `toggle` and the dialog's parts do nothing.
71858
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.
71859
72163
  * - `load-error`/`loadError`: What the list says when its commands could not be loaded, such as after a
71860
72164
  * request to a server fails. Empty, null or no attribute is no error, so
71861
72165
  * removing the attribute clears it. Passed to the list, which shows it
@@ -72268,10 +72572,15 @@ export type CustomElementsSolidJs = {
72268
72572
  *
72269
72573
  * Sort and filter apply to the whole set, including the rows on other pages.
72270
72574
  *
72271
- * **The cell values do not server-render.** The headings and the row elements
72272
- * do. Reading a cell needs the columns, and Lit SSR does not pass the column
72273
- * children to this element, so a crawler sees an empty table of the right
72274
- * shape. Use `Table` when the served HTML has to carry the values.
72575
+ * **Write the first page as rows, so the served HTML carries the values.** The
72576
+ * table reads each cell from its column, and a server does not pass the column
72577
+ * children to this element, so on its own it serves the headings and no values.
72578
+ * Write the first page under the columns as `TableRow` and `TableCell`
72579
+ * elements, in the table's sort and page size and formatted as its columns draw
72580
+ * them. The table shows your rows until `rows` holds a row, then draws its own
72581
+ * in their place and leaves yours in the page, unshown. A development build
72582
+ * warns when the two differ. In React, map the first page of the same array in
72583
+ * the same server component.
72275
72584
  *
72276
72585
  * `selectable` adds a column of checkboxes, keyed on `row-key`:
72277
72586
  *
@@ -72621,7 +72930,7 @@ export type CustomElementsSolidJs = {
72621
72930
  *
72622
72931
  * Areas where markup can be added to the component.
72623
72932
  *
72624
- * - `(default)`: The columns, as `TableColumn` elements.
72933
+ * - `(default)`: The columns, as `TableColumn` elements, and the first page served as `TableRow` elements, which show until `rows` holds a row.
72625
72934
  * - `empty`: Content shown when there are no rows to show and none are loading, such as a picture and a link. Falls back to `empty-text`, which the live region still says.
72626
72935
  * - `error`: Content shown while `error-text` is set, such as a button that tries again. Falls back to `error-text`, which the live region still says.
72627
72936
  * - `footer`: Content below the grid. It replaces the built-in pagination.
@@ -75373,9 +75682,10 @@ export type CustomElementsSolidJs = {
75373
75682
  * press. `requestChange` documents the pattern.
75374
75683
  *
75375
75684
  * **Keyboard.** The remove button is a tab stop of its own, and Enter or Space
75376
- * on it asks to remove the filter. In a `FilterInput`, Backspace in the empty
75377
- * field asks to remove the last chip, the arrow keys move between the field
75378
- * 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.
75379
75689
  *
75380
75690
  * The remove button is named `dismiss-label` followed by the chip's words,
75381
75691
  * such as "Remove filter Status is not open", so a row of chips says which
@@ -75431,6 +75741,12 @@ export type CustomElementsSolidJs = {
75431
75741
  * reads. The moment somebody picks a different comparison it appears, which
75432
75742
  * makes an unusual filter look unusual.
75433
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)
75434
75750
  * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
75435
75751
  *
75436
75752
  * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -75902,8 +76218,9 @@ export type CustomElementsSolidJs = {
75902
76218
  * first colon, reads a leading `-` as the negation, and reads a word in
75903
76219
  * brackets before the colon as the comparison.
75904
76220
  *
75905
- * **Keyboard.** Focus stays in the text. The text names the highlighted
75906
- * 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.
75907
76224
  *
75908
76225
  * | Key | What it does |
75909
76226
  * |---|---|
@@ -75961,12 +76278,24 @@ export type CustomElementsSolidJs = {
75961
76278
  * and removing the chip alone would leave its value ticked in the hidden
75962
76279
  * menu. Its dismissal is treated as the field being filtered by nothing, so
75963
76280
  * it fires `helix-facet` like every other change, and the chip goes when the
75964
- * 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.
75965
76283
  *
75966
76284
  * ## Attributes & Properties
75967
76285
  *
75968
76286
  * Component attributes and properties that can be applied to the element or by using JavaScript.
75969
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.
75970
76299
  * - `clearable`: Shows a button that empties the field.
75971
76300
  *
75972
76301
  * The text only. The tokens are the consumer's markup and this element is not
@@ -75978,6 +76307,18 @@ export type CustomElementsSolidJs = {
75978
76307
  * - `filter-suggestions`/`filterSuggestions`: Whether the panel narrows itself to the suggestions that hold the term
75979
76308
  * being typed, as React Aria's Autocomplete filters. Off, the panel shows
75980
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.
75981
76322
  * - `placeholder`: The text shown while the field is empty.
75982
76323
  *
75983
76324
  * Not a label: it goes when typing starts.
@@ -76139,6 +76480,8 @@ export type CustomElementsSolidJs = {
76139
76480
  * - `feedback`: The message that says what is wrong, for content richer than a string. It shows while there is a message.
76140
76481
  * - `hint`: Help under the control, for content richer than the `hint` text.
76141
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`.
76142
76485
  * - `start`: Content before the text, such as a search icon.
76143
76486
  * - `suggestions`: Suggestions for what to type next, as `Option`s and `Option.Group`s.
76144
76487
  * - `tags`: The active filters, as `FilterChip`s or `Tag`s.
@@ -76222,12 +76565,14 @@ export type CustomElementsSolidJs = {
76222
76565
  *
76223
76566
  * - `clear`: The button that empties the field.
76224
76567
  * - `control`: The input itself.
76568
+ * - `empty`: Shown in the panel when `filter-suggestions` hides every suggestion.
76225
76569
  * - `feedback`: The error message under the field.
76226
76570
  * - `field`: The box that holds everything.
76227
76571
  * - `hint`: The help text under the field, shown while there is no error.
76228
76572
  * - `label`: The label above the field.
76229
76573
  * - `lead`: The box before the text that holds the `start` slot.
76230
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.
76231
76576
  * - `rest`: The count of tokens that did not fit. It is a `<button>` with `expandable` and a `<span>` without it.
76232
76577
  * - `surface`: The floating panel the suggestions sit in.
76233
76578
  * - `tags`: The row the tokens sit in.
@@ -76237,6 +76582,8 @@ export type CustomElementsSolidJs = {
76237
76582
  * These can be used to apply styling when a component is in a given state.
76238
76583
  *
76239
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.
76240
76587
  * - `open`: The suggestions are open.
76241
76588
  * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
76242
76589
  */
@@ -76259,7 +76606,9 @@ export type CustomElementsSolidJs = {
76259
76606
  * **`relative` shows the same reading in words**, such as "3 hours ago" at
76260
76607
  * `long`, "3 hr. ago" at `short` and "3h ago" at `narrow`, the styles
76261
76608
  * `sl-relative-time` offers. `numeric="always"` says "1 day ago" where the
76262
- * 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".
76263
76612
  *
76264
76613
  * **`date-style` and `time-style` take each locale's own pattern**, such as
76265
76614
  * "Tuesday, August 4, 2026" at `full`, and stand in for the separate fields,
@@ -77921,6 +78270,9 @@ export type CustomElementsSolidJs = {
77921
78270
  *
77922
78271
  * Methods that can be called to access component functionality.
77923
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.
77924
78276
  * - `setSelectionRange(start: number, end: number, direction?: SelectionDirection) => void`: Selects the range from `start` to `end` in one call, which setting
77925
78277
  * `selectionStart` and `selectionEnd` one at a time cannot always do.
77926
78278
  *
@@ -82659,7 +83011,9 @@ export type CustomElementsSolidJs = {
82659
83011
  * speaks it: `feedback` replaces the message under the field and does not
82660
83012
  * reach the bubble. Unset is the sentence registered for the page's
82661
83013
  * language, then the English.
82662
- * - `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.
82663
83017
  * - `format-options`/`formatOptions`: `Intl.NumberFormat` options the number is shown with while the field is
82664
83018
  * not being edited: a currency, a percent, a unit, or a number of decimals.
82665
83019
  * Written as JSON in the attribute.
@@ -82667,7 +83021,9 @@ export type CustomElementsSolidJs = {
82667
83021
  * ```html
82668
83022
  * <helix-number-input format-options='{"style":"currency","currency":"EUR"}'></helix-number-input>
82669
83023
  * ```
82670
- * - `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.
82671
83027
  * - `large-step`/`largeStep`: How many steps `PageUp` and `PageDown` move.
82672
83028
  *
82673
83029
  * Ten steps, which is the convention every spinner on the platform follows,
@@ -82849,8 +83205,10 @@ export type CustomElementsSolidJs = {
82849
83205
  *
82850
83206
  * Methods that can be called to access component functionality.
82851
83207
  *
82852
- * - `stepUp(large = false) => void`: Steps the value up, by `largeStep` steps when `large` is set.
82853
- * - `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.
82854
83212
  *
82855
83213
  * The same path a press of the down arrow takes, so a consumer driving this
82856
83214
  * from their own control gets the clamping and the announcement rather than
@@ -88110,12 +88468,21 @@ export type CustomElementsSolidJs = {
88110
88468
  * sequence is correct in the server's markup, where the root cannot count its
88111
88469
  * slotted children.
88112
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
+ *
88113
88477
  * `linear` keeps a reader from passing a stage they have not finished, as Ark
88114
88478
  * UI's linear steps do: a stage ahead is out of reach, and its button disabled,
88115
88479
  * until every stage before it is `complete` or `optional`. Going back is always
88116
88480
  * allowed. `next()` and `previous()` move one stage either way, under the
88117
88481
  * same rules, for your own buttons. `reset()` goes back to the first stage and
88118
- * 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"`.
88119
88486
  *
88120
88487
  * `completion="passed"` marks a stage `complete` once a reader moves past it,
88121
88488
  * as Ark UI counts a stage before the current one as completed. Going back
@@ -88142,18 +88509,21 @@ export type CustomElementsSolidJs = {
88142
88509
  * button is described by its `complete-label`.
88143
88510
  *
88144
88511
  * **Keyboard.** Each stage's name is a button and its own tab stop, and Enter
88145
- * or Space goes to the stage. Set `arrows` and the arrow keys move focus
88146
- * between the names as well, as Ark UI's steps do: Left and Right along a row,
88147
- * Up and Down a column, Home and End to the first and the last. The arrows
88148
- * pass over a disabled stage and one a linear sequence holds out of reach,
88149
- * 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.
88150
88519
  *
88151
88520
  * ## Attributes & Properties
88152
88521
  *
88153
88522
  * Component attributes and properties that can be applied to the element or by using JavaScript.
88154
88523
  *
88155
88524
  * - `arrows`: Whether the arrow keys move focus between the stages' names, along the
88156
- * 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.
88157
88527
  * - `completion`: What marks a stage `complete`.
88158
88528
  *
88159
88529
  * Absent, you do: each step's `complete` is yours, because a reader who
@@ -88327,7 +88697,9 @@ export type CustomElementsSolidJs = {
88327
88697
  * - `disabled`: Whether the stage is disabled, so the user cannot go to it.
88328
88698
  * - `optional`: Whether a reader may pass the stage without finishing it, in a sequence
88329
88699
  * with `linear`. Ark UI's skippable step.
88330
- * - `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.
88331
88703
  * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
88332
88704
  *
88333
88705
  * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -93794,6 +94166,12 @@ export type CustomElementsSolidJs = {
93794
94166
  * captions, and poster treatment. `Sandbox` takes its preview and `Menu` its
93795
94167
  * trigger the same way.
93796
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
+ *
93797
94175
  * **Entries are markup.** React skips properties it would set imperatively
93798
94176
  * during hydration, so an array property on a custom element is missing on the
93799
94177
  * first paint of a server-rendered page. `using-the-elements.mdx` has the
@@ -93826,7 +94204,8 @@ export type CustomElementsSolidJs = {
93826
94204
  *
93827
94205
  * **The player is named by the current entry**, and the device's own media
93828
94206
  * controls show the entry as the title. A player you gave a `label` keeps
93829
- * 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.
93830
94209
  *
93831
94210
  * **Keyboard.** The entries take one stop in the tab order: the entry you
93832
94211
  * last focused, or the current entry before you have focused one. Enter or
@@ -94521,6 +94900,11 @@ export type CustomElementsSolidJs = {
94521
94900
  * commas. Their rows carry `aria-disabled`, the keys and typing pass over
94522
94901
  * them, and a press, Space, or Control with A does not select them.
94523
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
+ *
94524
94908
  * **Loading more.** `helix-range-change` fires as the items on screen change,
94525
94909
  * and `range` holds them. `helix-load-more` fires once a reader is within one
94526
94910
  * screen of the end, once for each length of the set: add to `items` and it can