@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.
- package/custom-elements.json +663 -95
- package/dist/chat/composer/chat-composer.d.ts +2 -1
- package/dist/chat/composer/chat-composer.js +7 -1
- package/dist/chat/root/chat-root.d.ts +36 -6
- package/dist/chat/root/chat-root.js +53 -5
- package/dist/code-block/root/code-block-root.d.ts +20 -2
- package/dist/code-block/root/code-block-root.js +29 -8
- package/dist/color-picker/root/color-picker-root.d.ts +50 -7
- package/dist/color-picker/root/color-picker-root.js +62 -1
- package/dist/combobox/root/combobox-root.d.ts +16 -6
- package/dist/combobox/root/combobox-root.js +9 -2
- package/dist/command/root/command-root.d.ts +16 -1
- package/dist/command/root/command-root.js +8 -0
- package/dist/data-table/root/data-table-root.d.ts +40 -5
- package/dist/data-table/root/data-table-root.js +35 -7
- package/dist/filter-input/chip/filter-chip.d.ts +13 -3
- package/dist/filter-input/chip/filter-chip.js +5 -0
- package/dist/filter-input/menu/filter-menu.js +0 -1
- package/dist/filter-input/root/filter-input-root.d.ts +71 -4
- package/dist/filter-input/root/filter-input-root.js +87 -2
- package/dist/format-date/root/format-date-root.d.ts +3 -1
- package/dist/input/root/input-root.d.ts +6 -0
- package/dist/input/root/input-root.js +13 -0
- package/dist/listbox/root/listbox-root.d.ts +6 -0
- package/dist/listbox/root/listbox-root.js +6 -1
- package/dist/number-input/root/number-input-root.d.ts +16 -6
- package/dist/number-input/root/number-input-root.js +15 -4
- package/dist/select/root/select-root.js +2 -0
- package/dist/steps/root/steps-root.d.ts +32 -8
- package/dist/steps/root/steps-root.js +70 -9
- package/dist/steps/step/step.d.ts +9 -1
- package/dist/steps/step/step.js +5 -0
- package/dist/video-playlist/root/video-playlist-root.d.ts +19 -1
- package/dist/video-playlist/root/video-playlist-root.js +14 -3
- package/dist/virtual-list/root/virtual-list-root.d.ts +8 -0
- package/dist/virtual-list/root/virtual-list-root.js +7 -2
- package/lint.json +1 -1
- package/package.json +5 -5
- package/types/jsx.d.ts +510 -126
- package/types/vue.d.ts +109 -26
- 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
|
|
7408
|
-
|
|
7409
|
-
|
|
7410
|
-
|
|
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
|
|
7788
|
-
|
|
7789
|
-
|
|
7790
|
-
|
|
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`
|
|
8067
|
-
toggles rather than replaces, and the arrows move without
|
|
8068
|
-
this adds is the tags, and keeping the panel open between
|
|
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
|
-
|
|
8071
|
-
|
|
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`
|
|
8432
|
-
toggles rather than replaces, and the arrows move without
|
|
8433
|
-
this adds is the tags, and keeping the panel open between
|
|
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
|
-
|
|
8436
|
-
|
|
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
|
|
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
|
|
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
|
-
*
|
|
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
|
|
40481
|
-
*
|
|
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.
|
|
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
|
|
42091
|
-
*
|
|
42092
|
-
*
|
|
42093
|
-
*
|
|
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
|
|
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`
|
|
42459
|
-
* toggles rather than replaces, and the arrows move without
|
|
42460
|
-
* this adds is the tags, and keeping the panel open between
|
|
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
|
-
*
|
|
42463
|
-
*
|
|
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
|
|
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
|
-
* **
|
|
43249
|
-
*
|
|
43250
|
-
* children to this element, so
|
|
43251
|
-
*
|
|
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`,
|
|
46325
|
-
* field asks to remove the last chip, the
|
|
46326
|
-
* and the chips, and Delete or Backspace on
|
|
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
|
|
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(
|
|
53714
|
-
*
|
|
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
|
|
58941
|
-
*
|
|
58942
|
-
* Up and Down a column, Home and End to the first and the last.
|
|
58943
|
-
*
|
|
58944
|
-
*
|
|
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
|
|
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
|
-
*
|
|
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
|
|
69482
|
-
*
|
|
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.
|
|
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
|
|
71106
|
-
*
|
|
71107
|
-
*
|
|
71108
|
-
*
|
|
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
|
|
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`
|
|
71475
|
-
* toggles rather than replaces, and the arrows move without
|
|
71476
|
-
* this adds is the tags, and keeping the panel open between
|
|
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
|
-
*
|
|
71479
|
-
*
|
|
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
|
|
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
|
-
* **
|
|
72272
|
-
*
|
|
72273
|
-
* children to this element, so
|
|
72274
|
-
*
|
|
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`,
|
|
75377
|
-
* field asks to remove the last chip, the
|
|
75378
|
-
* and the chips, and Delete or Backspace on
|
|
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
|
|
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(
|
|
82853
|
-
*
|
|
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
|
|
88146
|
-
*
|
|
88147
|
-
* Up and Down a column, Home and End to the first and the last.
|
|
88148
|
-
*
|
|
88149
|
-
*
|
|
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
|
|
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
|