@fusion.dev/helix-headless 0.170.0 → 0.171.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +610 -93
- 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/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 +490 -116
- package/types/vue.d.ts +108 -25
- 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
|
|
@@ -46326,9 +46521,10 @@ export type CustomElements = {
|
|
|
46326
46521
|
* press. `requestChange` documents the pattern.
|
|
46327
46522
|
*
|
|
46328
46523
|
* **Keyboard.** The remove button is a tab stop of its own, and Enter or Space
|
|
46329
|
-
* on it asks to remove the filter. In a `FilterInput`,
|
|
46330
|
-
* field asks to remove the last chip, the
|
|
46331
|
-
* 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.
|
|
46332
46528
|
*
|
|
46333
46529
|
* The remove button is named `dismiss-label` followed by the chip's words,
|
|
46334
46530
|
* such as "Remove filter Status is not open", so a row of chips says which
|
|
@@ -46384,6 +46580,12 @@ export type CustomElements = {
|
|
|
46384
46580
|
* reads. The moment somebody picks a different comparison it appears, which
|
|
46385
46581
|
* makes an unusual filter look unusual.
|
|
46386
46582
|
* - `dismissible`: Whether the element shows a control that dismisses it.
|
|
46583
|
+
* - `dismissTabStop`: Whether the remove button is a tab stop of its own.
|
|
46584
|
+
*
|
|
46585
|
+
* `FilterInput` writes `false` on the chips in its `tags` slot: the field's
|
|
46586
|
+
* text is its one tab stop, and the arrow keys move from the text to the
|
|
46587
|
+
* chips, as in a `multiple` Combobox. No attribute: it is coordination
|
|
46588
|
+
* between elements, as `Tag.dismissTabStop` is. (property only)
|
|
46387
46589
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
46388
46590
|
*
|
|
46389
46591
|
* **Named `whenSettled` because `settled` is taken four times over**, by
|
|
@@ -46851,8 +47053,9 @@ export type CustomElements = {
|
|
|
46851
47053
|
* first colon, reads a leading `-` as the negation, and reads a word in
|
|
46852
47054
|
* brackets before the colon as the comparison.
|
|
46853
47055
|
*
|
|
46854
|
-
* **Keyboard.** Focus stays in the text
|
|
46855
|
-
* suggestion as its `aria-activedescendant
|
|
47056
|
+
* **Keyboard.** Focus stays in the text, which is the field's one tab stop. The
|
|
47057
|
+
* text names the highlighted suggestion as its `aria-activedescendant`, and the
|
|
47058
|
+
* arrow keys reach the tokens.
|
|
46856
47059
|
*
|
|
46857
47060
|
* | Key | What it does |
|
|
46858
47061
|
* |---|---|
|
|
@@ -46910,12 +47113,24 @@ export type CustomElements = {
|
|
|
46910
47113
|
* and removing the chip alone would leave its value ticked in the hidden
|
|
46911
47114
|
* menu. Its dismissal is treated as the field being filtered by nothing, so
|
|
46912
47115
|
* it fires `helix-facet` like every other change, and the chip goes when the
|
|
46913
|
-
* filter goes.
|
|
47116
|
+
* filter goes. Set `chips` and the field adds, updates, and removes those
|
|
47117
|
+
* chips itself, from every `helix-facet` you do not cancel.
|
|
46914
47118
|
*
|
|
46915
47119
|
* ## Attributes & Properties
|
|
46916
47120
|
*
|
|
46917
47121
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
46918
47122
|
*
|
|
47123
|
+
* - `chips`: Whether the field keeps a `FilterChip` for each filter in its `tags` slot,
|
|
47124
|
+
* from the `helix-facet` events it hears.
|
|
47125
|
+
*
|
|
47126
|
+
* Off, you build the chips, which is what you do when your own model holds
|
|
47127
|
+
* the filters. On, a filter typed, picked, or changed adds or updates the
|
|
47128
|
+
* chip for its field, one with no values takes it away (unless its
|
|
47129
|
+
* comparison takes none, such as "is empty"), and removing the chip clears
|
|
47130
|
+
* the filter. A `helix-facet` you cancel changes no chip.
|
|
47131
|
+
*
|
|
47132
|
+
* The chips are elements the field adds to its own children, so leave this
|
|
47133
|
+
* off where a framework renders those children and would remove them.
|
|
46919
47134
|
* - `clearable`: Shows a button that empties the field.
|
|
46920
47135
|
*
|
|
46921
47136
|
* The text only. The tokens are the consumer's markup and this element is not
|
|
@@ -46927,6 +47142,18 @@ export type CustomElements = {
|
|
|
46927
47142
|
* - `filter-suggestions`/`filterSuggestions`: Whether the panel narrows itself to the suggestions that hold the term
|
|
46928
47143
|
* being typed, as React Aria's Autocomplete filters. Off, the panel shows
|
|
46929
47144
|
* what you slot and you narrow it.
|
|
47145
|
+
* - `loading`: Whether the suggestions are still loading, such as while a request for the
|
|
47146
|
+
* values of a typed key is out.
|
|
47147
|
+
*
|
|
47148
|
+
* The panel opens on `loading-text`, or the `loading` slot, while the field
|
|
47149
|
+
* has focus, and a screen reader hears it. Slot the options and clear this
|
|
47150
|
+
* when they arrive.
|
|
47151
|
+
* - `loading-text`/`loadingText`: Text the panel shows while the suggestions load.
|
|
47152
|
+
* - `no-results-text`/`noResultsText`: Text the panel shows when `filter-suggestions` hides every suggestion, such
|
|
47153
|
+
* as "No matching filters".
|
|
47154
|
+
*
|
|
47155
|
+
* Empty, or no `no-results` slot, and the panel closes instead, as it does
|
|
47156
|
+
* when it has nothing to offer.
|
|
46930
47157
|
* - `placeholder`: The text shown while the field is empty.
|
|
46931
47158
|
*
|
|
46932
47159
|
* Not a label: it goes when typing starts.
|
|
@@ -47088,6 +47315,8 @@ export type CustomElements = {
|
|
|
47088
47315
|
* - `feedback`: The message that says what is wrong, for content richer than a string. It shows while there is a message.
|
|
47089
47316
|
* - `hint`: Help under the control, for content richer than the `hint` text.
|
|
47090
47317
|
* - `label`: The label, for content richer than the `label` text.
|
|
47318
|
+
* - `loading`: What the panel shows while `loading` is set, for content richer than `loading-text`.
|
|
47319
|
+
* - `no-results`: What the panel shows when `filter-suggestions` hides every suggestion, for content richer than `no-results-text`.
|
|
47091
47320
|
* - `start`: Content before the text, such as a search icon.
|
|
47092
47321
|
* - `suggestions`: Suggestions for what to type next, as `Option`s and `Option.Group`s.
|
|
47093
47322
|
* - `tags`: The active filters, as `FilterChip`s or `Tag`s.
|
|
@@ -47171,12 +47400,14 @@ export type CustomElements = {
|
|
|
47171
47400
|
*
|
|
47172
47401
|
* - `clear`: The button that empties the field.
|
|
47173
47402
|
* - `control`: The input itself.
|
|
47403
|
+
* - `empty`: Shown in the panel when `filter-suggestions` hides every suggestion.
|
|
47174
47404
|
* - `feedback`: The error message under the field.
|
|
47175
47405
|
* - `field`: The box that holds everything.
|
|
47176
47406
|
* - `hint`: The help text under the field, shown while there is no error.
|
|
47177
47407
|
* - `label`: The label above the field.
|
|
47178
47408
|
* - `lead`: The box before the text that holds the `start` slot.
|
|
47179
47409
|
* - `live`: The live region that says how many suggestions the open panel offers. It is rendered from the first time the panel opens with suggestions.
|
|
47410
|
+
* - `loading`: Shown in the panel while the suggestions load.
|
|
47180
47411
|
* - `rest`: The count of tokens that did not fit. It is a `<button>` with `expandable` and a `<span>` without it.
|
|
47181
47412
|
* - `surface`: The floating panel the suggestions sit in.
|
|
47182
47413
|
* - `tags`: The row the tokens sit in.
|
|
@@ -47186,6 +47417,8 @@ export type CustomElements = {
|
|
|
47186
47417
|
* These can be used to apply styling when a component is in a given state.
|
|
47187
47418
|
*
|
|
47188
47419
|
* - `invalid`: The field has an error to show, from the browser's validation or from your `feedback`.
|
|
47420
|
+
* - `loading`: While `loading` is set.
|
|
47421
|
+
* - `no-results`: `filter-suggestions` hid every suggestion, and `no-results-text` or the `no-results` slot says so.
|
|
47189
47422
|
* - `open`: The suggestions are open.
|
|
47190
47423
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
47191
47424
|
*/
|
|
@@ -47207,7 +47440,9 @@ export type CustomElements = {
|
|
|
47207
47440
|
* **`relative` shows the same reading in words**, such as "3 hours ago" at
|
|
47208
47441
|
* `long`, "3 hr. ago" at `short` and "3h ago" at `narrow`, the styles
|
|
47209
47442
|
* `sl-relative-time` offers. `numeric="always"` says "1 day ago" where the
|
|
47210
|
-
* default says "yesterday".
|
|
47443
|
+
* default says "yesterday". Both readings round the count, as
|
|
47444
|
+
* `sl-relative-time` does: 100 seconds ago is "2 minutes ago", and 59.6
|
|
47445
|
+
* minutes is "1 hour".
|
|
47211
47446
|
*
|
|
47212
47447
|
* **`date-style` and `time-style` take each locale's own pattern**, such as
|
|
47213
47448
|
* "Tuesday, August 4, 2026" at `full`, and stand in for the separate fields,
|
|
@@ -48855,6 +49090,9 @@ export type CustomElements = {
|
|
|
48855
49090
|
*
|
|
48856
49091
|
* Methods that can be called to access component functionality.
|
|
48857
49092
|
*
|
|
49093
|
+
* - `setRangeText(replacement: string, start?: number, end?: number, selectMode?: SelectionMode) => void`: Replaces a range of the text, as the native method does: the selection
|
|
49094
|
+
* where `start` and `end` are left out, and `selectMode` says what is
|
|
49095
|
+
* selected after. It sends no event, as the native method sends none.
|
|
48858
49096
|
* - `setSelectionRange(start: number, end: number, direction?: SelectionDirection) => void`: Selects the range from `start` to `end` in one call, which setting
|
|
48859
49097
|
* `selectionStart` and `selectionEnd` one at a time cannot always do.
|
|
48860
49098
|
*
|
|
@@ -53525,7 +53763,9 @@ export type CustomElements = {
|
|
|
53525
53763
|
* speaks it: `feedback` replaces the message under the field and does not
|
|
53526
53764
|
* reach the bubble. Unset is the sentence registered for the page's
|
|
53527
53765
|
* language, then the English.
|
|
53528
|
-
* - `decrement-label`/`decrementLabel`: The name of the step down button, read by screen readers.
|
|
53766
|
+
* - `decrement-label`/`decrementLabel`: The name of the step down button, read by screen readers. The field's
|
|
53767
|
+
* label follows it, so a reader hears "Decrease Quantity", as React Aria
|
|
53768
|
+
* names its steppers.
|
|
53529
53769
|
* - `format-options`/`formatOptions`: `Intl.NumberFormat` options the number is shown with while the field is
|
|
53530
53770
|
* not being edited: a currency, a percent, a unit, or a number of decimals.
|
|
53531
53771
|
* Written as JSON in the attribute.
|
|
@@ -53533,7 +53773,9 @@ export type CustomElements = {
|
|
|
53533
53773
|
* ```html
|
|
53534
53774
|
* <helix-number-input format-options='{"style":"currency","currency":"EUR"}'></helix-number-input>
|
|
53535
53775
|
* ```
|
|
53536
|
-
* - `increment-label`/`incrementLabel`: The name of the step up button, read by screen readers.
|
|
53776
|
+
* - `increment-label`/`incrementLabel`: The name of the step up button, read by screen readers. The field's
|
|
53777
|
+
* label follows it, so a reader hears "Increase Quantity", as React Aria
|
|
53778
|
+
* names its steppers.
|
|
53537
53779
|
* - `large-step`/`largeStep`: How many steps `PageUp` and `PageDown` move.
|
|
53538
53780
|
*
|
|
53539
53781
|
* Ten steps, which is the convention every spinner on the platform follows,
|
|
@@ -53715,8 +53957,10 @@ export type CustomElements = {
|
|
|
53715
53957
|
*
|
|
53716
53958
|
* Methods that can be called to access component functionality.
|
|
53717
53959
|
*
|
|
53718
|
-
* - `stepUp(
|
|
53719
|
-
*
|
|
53960
|
+
* - `stepUp(count: number | boolean = 1) => void`: Steps the value up by `step`, `count` times, as the native method and
|
|
53961
|
+
* `Input.stepUp` do. `true` takes `largeStep` steps, as `PageUp` does.
|
|
53962
|
+
* - `stepDown(count: number | boolean = 1) => void`: Steps the value down by `step`, `count` times. `true` takes `largeStep`
|
|
53963
|
+
* steps, as `PageDown` does.
|
|
53720
53964
|
*
|
|
53721
53965
|
* The same path a press of the down arrow takes, so a consumer driving this
|
|
53722
53966
|
* from their own control gets the clamping and the announcement rather than
|
|
@@ -58910,12 +59154,21 @@ export type CustomElements = {
|
|
|
58910
59154
|
* sequence is correct in the server's markup, where the root cannot count its
|
|
58911
59155
|
* slotted children.
|
|
58912
59156
|
*
|
|
59157
|
+
* `active` names a step by its `value`. A step with no `value` is named by its
|
|
59158
|
+
* place, counted from 1, so a sequence written without values moves as one
|
|
59159
|
+
* written with them, and `helix-activate` says `1`, `2` and so on. Give every
|
|
59160
|
+
* step a value or none, because a value of `2` and the second place are one
|
|
59161
|
+
* name.
|
|
59162
|
+
*
|
|
58913
59163
|
* `linear` keeps a reader from passing a stage they have not finished, as Ark
|
|
58914
59164
|
* UI's linear steps do: a stage ahead is out of reach, and its button disabled,
|
|
58915
59165
|
* until every stage before it is `complete` or `optional`. Going back is always
|
|
58916
59166
|
* allowed. `next()` and `previous()` move one stage either way, under the
|
|
58917
59167
|
* same rules, for your own buttons. `reset()` goes back to the first stage and
|
|
58918
|
-
* clears every stage's `complete`, as Ark UI's `resetStep` does.
|
|
59168
|
+
* clears every stage's `complete`, as Ark UI's `resetStep` does. A button
|
|
59169
|
+
* anywhere on the page calls them with no script, as Ark UI's previous and
|
|
59170
|
+
* next triggers do: give it `commandfor` with the sequence's `id`, and
|
|
59171
|
+
* `command="--previous"`, `"--next"` or `"--reset"`.
|
|
58919
59172
|
*
|
|
58920
59173
|
* `completion="passed"` marks a stage `complete` once a reader moves past it,
|
|
58921
59174
|
* as Ark UI counts a stage before the current one as completed. Going back
|
|
@@ -58942,18 +59195,21 @@ export type CustomElements = {
|
|
|
58942
59195
|
* button is described by its `complete-label`.
|
|
58943
59196
|
*
|
|
58944
59197
|
* **Keyboard.** Each stage's name is a button and its own tab stop, and Enter
|
|
58945
|
-
* or Space goes to the stage. Set `arrows` and the
|
|
58946
|
-
*
|
|
58947
|
-
* Up and Down a column, Home and End to the first and the last.
|
|
58948
|
-
*
|
|
58949
|
-
*
|
|
59198
|
+
* or Space goes to the stage. Set `arrows` and the names are one tab stop, the
|
|
59199
|
+
* current stage's, and the arrow keys move focus between them: Left and Right
|
|
59200
|
+
* along a row, Up and Down a column, Home and End to the first and the last.
|
|
59201
|
+
* The stop follows focus, so Tab leaves the sequence and Shift+Tab comes back
|
|
59202
|
+
* to the name the reader left. The arrows pass over a disabled stage and one a
|
|
59203
|
+
* linear sequence holds out of reach, and they move focus without going to the
|
|
59204
|
+
* stage.
|
|
58950
59205
|
*
|
|
58951
59206
|
* ## Attributes & Properties
|
|
58952
59207
|
*
|
|
58953
59208
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
58954
59209
|
*
|
|
58955
59210
|
* - `arrows`: Whether the arrow keys move focus between the stages' names, along the
|
|
58956
|
-
* way the steps run. Off by default, so the
|
|
59211
|
+
* way the steps run, and the names are one tab stop. Off by default, so the
|
|
59212
|
+
* arrows keep scrolling the page.
|
|
58957
59213
|
* - `completion`: What marks a stage `complete`.
|
|
58958
59214
|
*
|
|
58959
59215
|
* Absent, you do: each step's `complete` is yours, because a reader who
|
|
@@ -59124,7 +59380,9 @@ export type CustomElements = {
|
|
|
59124
59380
|
* - `disabled`: Whether the stage is disabled, so the user cannot go to it.
|
|
59125
59381
|
* - `optional`: Whether a reader may pass the stage without finishing it, in a sequence
|
|
59126
59382
|
* with `linear`. Ark UI's skippable step.
|
|
59127
|
-
* - `value`: The value the step sends in `helix-select
|
|
59383
|
+
* - `value`: The value the step sends in `helix-select`, and what names the step in its
|
|
59384
|
+
* sequence's `active`. Without one, the sequence names the step by its place,
|
|
59385
|
+
* counted from 1.
|
|
59128
59386
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
59129
59387
|
*
|
|
59130
59388
|
* **Named `whenSettled` because `settled` is taken four times over**, by
|
|
@@ -64515,6 +64773,12 @@ export type CustomElements = {
|
|
|
64515
64773
|
* captions, and poster treatment. `Sandbox` takes its preview and `Menu` its
|
|
64516
64774
|
* trigger the same way.
|
|
64517
64775
|
*
|
|
64776
|
+
* **The player is a `Video` or a plain `<video>`.** Either takes `src` and
|
|
64777
|
+
* `poster` from the entry, is named by it, plays on, and answers Shift with N
|
|
64778
|
+
* or P while focused. A plain `<video>` has no previous and next controls
|
|
64779
|
+
* that send `helix-previous` or `helix-next`, so its moves are the entries,
|
|
64780
|
+
* the menu, and your own buttons calling `previous()` and `next()`.
|
|
64781
|
+
*
|
|
64518
64782
|
* **Entries are markup.** React skips properties it would set imperatively
|
|
64519
64783
|
* during hydration, so an array property on a custom element is missing on the
|
|
64520
64784
|
* first paint of a server-rendered page. `using-the-elements.mdx` has the
|
|
@@ -64547,7 +64811,8 @@ export type CustomElements = {
|
|
|
64547
64811
|
*
|
|
64548
64812
|
* **The player is named by the current entry**, and the device's own media
|
|
64549
64813
|
* controls show the entry as the title. A player you gave a `label` keeps
|
|
64550
|
-
* your name, and only the title follows the entry.
|
|
64814
|
+
* your name, and only the title follows the entry. A plain `<video>` is
|
|
64815
|
+
* named through `aria-label`, unless you wrote one.
|
|
64551
64816
|
*
|
|
64552
64817
|
* **Keyboard.** The entries take one stop in the tab order: the entry you
|
|
64553
64818
|
* last focused, or the current entry before you have focused one. Enter or
|
|
@@ -65238,6 +65503,11 @@ export type CustomElements = {
|
|
|
65238
65503
|
* commas. Their rows carry `aria-disabled`, the keys and typing pass over
|
|
65239
65504
|
* them, and a press, Space, or Control with A does not select them.
|
|
65240
65505
|
*
|
|
65506
|
+
* **Rows a stylesheet can tell apart.** A chosen row carries `data-selected`,
|
|
65507
|
+
* a disabled one `data-disabled`, as React Aria's rows do, and the row the
|
|
65508
|
+
* keys are on, which holds the tab stop, `data-active`, whether or not the
|
|
65509
|
+
* list has focus.
|
|
65510
|
+
*
|
|
65241
65511
|
* **Loading more.** `helix-range-change` fires as the items on screen change,
|
|
65242
65512
|
* and `range` holds them. `helix-load-more` fires once a reader is within one
|
|
65243
65513
|
* screen of the end, once for each length of the set: add to `items` and it can
|
|
@@ -69172,7 +69442,8 @@ export type CustomElementsSolidJs = {
|
|
|
69172
69442
|
* field taking more. A draft that fails them does not send, and the composer
|
|
69173
69443
|
* takes `:state(invalid)` and `aria-invalid` once the reader has tried to send
|
|
69174
69444
|
* it, the form was submitted, or the reader edited the field and left it.
|
|
69175
|
-
*
|
|
69445
|
+
* Sending an empty required composer counts as trying. Tabbing past an empty
|
|
69446
|
+
* composer marks nothing.
|
|
69176
69447
|
*
|
|
69177
69448
|
* **`typing` says whether the user is writing**, and `helix-typing` is sent
|
|
69178
69449
|
* each time it changes: when they start, and when they send or stop for
|
|
@@ -69483,8 +69754,10 @@ export type CustomElementsSolidJs = {
|
|
|
69483
69754
|
* there when the transcript opened. A turn is said with its author first, such
|
|
69484
69755
|
* as "Ada: It ships today" (`arrival-label`), where its author can be named.
|
|
69485
69756
|
*
|
|
69486
|
-
* Pass the turns as children or as `turns` data. Do not use both
|
|
69487
|
-
*
|
|
69757
|
+
* Pass the turns as children or as `turns` data. Do not use both: a chat given
|
|
69758
|
+
* both draws every turn from `turns` and then the children, and says so once
|
|
69759
|
+
* in the console. Children render from the server and suit most
|
|
69760
|
+
* conversations. `turns` draws a long
|
|
69488
69761
|
* transcript one window at a time, so the log needs a block size of its own.
|
|
69489
69762
|
*
|
|
69490
69763
|
* **A conversation is built from three elements.** The chat holds the
|
|
@@ -69500,7 +69773,10 @@ export type CustomElementsSolidJs = {
|
|
|
69500
69773
|
* it takes them away. Anything slotted into `status` is drawn first.
|
|
69501
69774
|
*
|
|
69502
69775
|
* **Keyboard.** The transcript moves between turns the way a feed does. Each
|
|
69503
|
-
* turn says its place, such as "3 of 40", windowed or not.
|
|
69776
|
+
* turn says its place, such as "3 of 40", windowed or not. The transcript is
|
|
69777
|
+
* a tab stop while it holds a turn, and the turn a reader moved to is one
|
|
69778
|
+
* too. Moving to an older turn unpins a transcript that scrolls and scrolls
|
|
69779
|
+
* the turn into view, and moving to the newest pins it again.
|
|
69504
69780
|
*
|
|
69505
69781
|
* | Key | What it does |
|
|
69506
69782
|
* |---|---|
|
|
@@ -69711,6 +69987,10 @@ export type CustomElementsSolidJs = {
|
|
|
69711
69987
|
*
|
|
69712
69988
|
* These can be used to apply styling when a component is in a given state.
|
|
69713
69989
|
*
|
|
69990
|
+
* - `empty`: The conversation has no turns.
|
|
69991
|
+
* - `loading`: Older turns are loading: `history` is `loading`.
|
|
69992
|
+
* - `pinned`: The transcript follows its newest turn.
|
|
69993
|
+
* - `typing`: `typing` names someone on the other side.
|
|
69714
69994
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
69715
69995
|
*/
|
|
69716
69996
|
"helix-headless-chat": Partial<
|
|
@@ -70222,7 +70502,11 @@ export type CustomElementsSolidJs = {
|
|
|
70222
70502
|
* from the accessibility tree and left out of a copy. Set `mark-lines` to
|
|
70223
70503
|
* mark lines a reader should look at, such as `2, 4-6`: the block draws a
|
|
70224
70504
|
* band behind each run, placed where the lines are laid out, so it follows a
|
|
70225
|
-
* highlighter's markup and lines that wrap.
|
|
70505
|
+
* highlighter's markup and lines that wrap. `added-lines` and
|
|
70506
|
+
* `removed-lines` mark lines the same way as inserted and deleted, as
|
|
70507
|
+
* Expressive Code's `ins` and `del` do, in code that is not a diff. The bands
|
|
70508
|
+
* are drawn and hidden from screen readers, so say in the text around the
|
|
70509
|
+
* block what a marked line means. Set `wrap` to wrap long lines
|
|
70226
70510
|
* rather than scroll them; a gutter then numbers each line where it starts.
|
|
70227
70511
|
* Set `wrappable` for a button in the header that turns `wrap` on and off,
|
|
70228
70512
|
* pressed while the lines wrap.
|
|
@@ -70291,6 +70575,8 @@ export type CustomElementsSolidJs = {
|
|
|
70291
70575
|
*
|
|
70292
70576
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
70293
70577
|
*
|
|
70578
|
+
* - `added-lines`/`addedLines`: The lines to mark as inserted, as numbers and ranges counted from 1, such
|
|
70579
|
+
* as `3-4`. Drawn as `mark-lines` is, in the added color. Not for a diff.
|
|
70294
70580
|
* - `code-label`/`codeLabel`: The name of a block that scrolls, which is a tab stop while it does.
|
|
70295
70581
|
*
|
|
70296
70582
|
* Where the block has a name, the scroller says it too, such as "Code,
|
|
@@ -70367,6 +70653,8 @@ export type CustomElementsSolidJs = {
|
|
|
70367
70653
|
* `no-copy=""` on hosts that never asked for one, and the rule about a
|
|
70368
70654
|
* reflected property taking no default is satisfied by the default being
|
|
70369
70655
|
* `false`.
|
|
70656
|
+
* - `removed-lines`/`removedLines`: The lines to mark as deleted, as numbers and ranges counted from 1. Drawn
|
|
70657
|
+
* as `mark-lines` is, in the removed color. Not for a diff.
|
|
70370
70658
|
* - `show-unchanged-label`/`showUnchangedLabel`: The words of a button that shows a folded run of unchanged lines, in a
|
|
70371
70659
|
* diff with `context-lines`. `{count}` is how many.
|
|
70372
70660
|
* - `variant`: How a diff's two versions are arranged. It has no effect without `diff`.
|
|
@@ -70446,6 +70734,8 @@ export type CustomElementsSolidJs = {
|
|
|
70446
70734
|
* - `actions`: Controls for the block, in the header before the copy button.
|
|
70447
70735
|
* - `copied-icon`: The copy button's icon after a copy. Defaults to a check mark.
|
|
70448
70736
|
* - `copy-icon`: The copy button's icon before a copy. Defaults to a clipboard.
|
|
70737
|
+
* - `expand-icon`: An icon on the button that shows every line of a capped block, before its words.
|
|
70738
|
+
* - `label`: The block's name in the header, such as a file icon beside the file name. Replaces `label` and `language` there, and draws the header.
|
|
70449
70739
|
*
|
|
70450
70740
|
* ## CSS Custom Properties
|
|
70451
70741
|
*
|
|
@@ -70493,7 +70783,9 @@ export type CustomElementsSolidJs = {
|
|
|
70493
70783
|
* - `header`: The bar that holds the name and the copy button, shown when there is a name.
|
|
70494
70784
|
* - `hunk`: In a diff, a `@@` line saying where the lines under it are.
|
|
70495
70785
|
* - `label`: The block's name: its `label`, or its `language` where it has no label.
|
|
70496
|
-
* - `mark`: The band behind a run of lines `mark-lines` names. The block writes where the run is laid out into `--code-block-mark-start`, `--code-block-mark-size`, and `--code-block-mark-inline-size` on it. Hidden from the accessibility tree.
|
|
70786
|
+
* - `mark`: The band behind a run of lines `mark-lines`, `added-lines` or `removed-lines` names. The block writes where the run is laid out into `--code-block-mark-start`, `--code-block-mark-size`, and `--code-block-mark-inline-size` on it. Hidden from the accessibility tree.
|
|
70787
|
+
* - `mark-added`: The band behind a run of lines `added-lines` names. Applied with `mark`.
|
|
70788
|
+
* - `mark-removed`: The band behind a run of lines `removed-lines` names. Applied with `mark`.
|
|
70497
70789
|
* - `marker`: In a diff, the `+`, `-`, or space that starts a line.
|
|
70498
70790
|
* - `new`: In a split diff, the new version's `<pre>`.
|
|
70499
70791
|
* - `number`: In a diff, a line number. In a `wrap` block with `line-numbers`, one line's number in the gutter, which the block makes as tall as the line it numbers through `--code-block-line-size`.
|
|
@@ -71107,10 +71399,11 @@ export type CustomElementsSolidJs = {
|
|
|
71107
71399
|
* the anchor the browser points its bubble at.
|
|
71108
71400
|
*
|
|
71109
71401
|
* **Text that is not a color is bad input**, so a form does not submit
|
|
71110
|
-
* `#00` from a half-typed value. The picker
|
|
71111
|
-
*
|
|
71112
|
-
*
|
|
71113
|
-
*
|
|
71402
|
+
* `#00` from a half-typed value. The picker marks it, and says
|
|
71403
|
+
* `badInputMessage` under itself, once the reader leaves the value field or
|
|
71404
|
+
* presses Enter, and a missing color once the reader has committed one or a
|
|
71405
|
+
* form has refused the picker. Color Input shows its own message against the
|
|
71406
|
+
* field the reader typed into.
|
|
71114
71407
|
* - `saturation-label`/`saturationLabel`: What the square's horizontal ramp is called.
|
|
71115
71408
|
* - `square-text`/`squareText`: What a screen reader hears for the square's place, the color's two
|
|
71116
71409
|
* numbers and its name, on whichever of its two inputs it is on.
|
|
@@ -71229,14 +71522,10 @@ export type CustomElementsSolidJs = {
|
|
|
71229
71522
|
*
|
|
71230
71523
|
* Methods that can be called to access component functionality.
|
|
71231
71524
|
*
|
|
71525
|
+
* - `formResetCallback() => void`: A reset ends any typing and takes back text that was not a color, so the
|
|
71526
|
+
* field shows the color the reset put back.
|
|
71232
71527
|
* - `requestValue(next: string) => boolean`: Blocks every change while `readOnly` is set.
|
|
71233
71528
|
* - `focus(options?: FocusOptions) => void`: Moves focus to the square.
|
|
71234
|
-
* - `formResetCallback() => void`: Returns the control to its `defaultValue`, or to its `value` attribute
|
|
71235
|
-
* where there is no `default-value`.
|
|
71236
|
-
*
|
|
71237
|
-
* Both halves are dropped, the consumer's and the control's, because a
|
|
71238
|
-
* reset means the form is as it was served. Clearing only the internal one
|
|
71239
|
-
* would leave a control that had been written to stuck at that value.
|
|
71240
71529
|
* - `formStateRestoreCallback(state: string | File | FormData | null) => void`: Restores the value when the browser brings a form back.
|
|
71241
71530
|
*
|
|
71242
71531
|
* Falling back to what the markup declared rather than to empty, because
|
|
@@ -71317,7 +71606,7 @@ export type CustomElementsSolidJs = {
|
|
|
71317
71606
|
* - `eyedropper-live`: The live region of the button inside `eyedropper`, which says its pending label.
|
|
71318
71607
|
* - `eyedropper-spinner`: The ring the eyedropper button turns while it is pending.
|
|
71319
71608
|
* - `eyedropper-text`: The words on the button inside `eyedropper`, trimmed to their capitals and baseline.
|
|
71320
|
-
* - `feedback`: The message under the picker
|
|
71609
|
+
* - `feedback`: The message under the picker: `feedback`, or what is wrong with the answer once the picker is marked invalid.
|
|
71321
71610
|
* - `field`: One channel's number field with its label, in `channel-fields`.
|
|
71322
71611
|
* - `field-input`: The number input in a channel's field.
|
|
71323
71612
|
* - `field-label`: The name above a channel's number input.
|
|
@@ -71476,12 +71765,13 @@ export type CustomElementsSolidJs = {
|
|
|
71476
71765
|
* language.
|
|
71477
71766
|
* - `multiple`: Whether more than one option can be chosen.
|
|
71478
71767
|
*
|
|
71479
|
-
* The list already does the work: `value`
|
|
71480
|
-
* toggles rather than replaces, and the arrows move without
|
|
71481
|
-
* 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.
|
|
71482
71772
|
*
|
|
71483
|
-
*
|
|
71484
|
-
*
|
|
71773
|
+
* An option's value may hold a comma, and it is read as one value, as
|
|
71774
|
+
* `Select` and `Listbox` read it. So may an answer the reader created.
|
|
71485
71775
|
*
|
|
71486
71776
|
* **The list is told, and the field is not.** `aria-multiselectable` belongs
|
|
71487
71777
|
* to `listbox`, `grid`, `tree` and `tablist`, and `combobox` dropped it in
|
|
@@ -71825,7 +72115,8 @@ export type CustomElementsSolidJs = {
|
|
|
71825
72115
|
* | `hotkey`, Command or Control with K by default | Opens the palette from anywhere on the page, or closes it. With `inline`, puts focus in its filter field. |
|
|
71826
72116
|
* | Down, Up | Moves the highlight to the next or the previous command, round from the last to the first. |
|
|
71827
72117
|
* | Page Down, Page Up | Moves the highlight by as many commands as the list shows at once. |
|
|
71828
|
-
* | Home, End
|
|
72118
|
+
* | Home, End | Move the caret in the filter field. With `home-end="list"`, move the highlight to the first or the last command. |
|
|
72119
|
+
* | Left, Right | Move the caret in the filter field. |
|
|
71829
72120
|
* | Enter | Runs the highlighted command, or follows it where it is a link, and closes the palette. On a command with `opens`, shows its page. |
|
|
71830
72121
|
* | Command or Control with Enter | Takes the highlighted command's `alternate` destination, where it has one. |
|
|
71831
72122
|
* | Backspace | In an empty filter on a page, goes back to the page before. |
|
|
@@ -71847,6 +72138,11 @@ export type CustomElementsSolidJs = {
|
|
|
71847
72138
|
* - `filter-delay`/`filterDelay`: How long typing rests before the commands are filtered, in milliseconds,
|
|
71848
72139
|
* so a palette filtered on a server sends one `helix-filter` for a word.
|
|
71849
72140
|
* `0` filters on every keystroke. See Listbox's `filter-delay`.
|
|
72141
|
+
* - `home-end`/`homeEnd`: Where Home and End go from the filter field.
|
|
72142
|
+
*
|
|
72143
|
+
* Absent, they move the caret, as APG's combobox has them. `list` moves the
|
|
72144
|
+
* highlight to the first or the last command, as React Aria's Autocomplete
|
|
72145
|
+
* does, and Shift with either still selects the text.
|
|
71850
72146
|
* - `hotkey`: The key that opens the palette, written as `mod+k`, `shift+p`, or `k`,
|
|
71851
72147
|
* in Kbd's chord spelling: `mod` is Command or Control, `ctrl`, `cmd`,
|
|
71852
72148
|
* `alt` and `shift` the keys they name.
|
|
@@ -71861,6 +72157,9 @@ export type CustomElementsSolidJs = {
|
|
|
71861
72157
|
* Choosing a command says `helix-select` and leaves the list where it is,
|
|
71862
72158
|
* and `open`, `toggle` and the dialog's parts do nothing.
|
|
71863
72159
|
* - `label`: Accessible name for the overlay, which has no visible heading.
|
|
72160
|
+
* - `layout`: How the commands are laid out, as Listbox's `layout`: `grid` draws them in
|
|
72161
|
+
* rows and columns, for a palette of icons or emoji, and the arrow keys
|
|
72162
|
+
* follow the rows and the columns. Absent is one command under another.
|
|
71864
72163
|
* - `load-error`/`loadError`: What the list says when its commands could not be loaded, such as after a
|
|
71865
72164
|
* request to a server fails. Empty, null or no attribute is no error, so
|
|
71866
72165
|
* removing the attribute clears it. Passed to the list, which shows it
|
|
@@ -75383,9 +75682,10 @@ export type CustomElementsSolidJs = {
|
|
|
75383
75682
|
* press. `requestChange` documents the pattern.
|
|
75384
75683
|
*
|
|
75385
75684
|
* **Keyboard.** The remove button is a tab stop of its own, and Enter or Space
|
|
75386
|
-
* on it asks to remove the filter. In a `FilterInput`,
|
|
75387
|
-
* field asks to remove the last chip, the
|
|
75388
|
-
* 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.
|
|
75389
75689
|
*
|
|
75390
75690
|
* The remove button is named `dismiss-label` followed by the chip's words,
|
|
75391
75691
|
* such as "Remove filter Status is not open", so a row of chips says which
|
|
@@ -75441,6 +75741,12 @@ export type CustomElementsSolidJs = {
|
|
|
75441
75741
|
* reads. The moment somebody picks a different comparison it appears, which
|
|
75442
75742
|
* makes an unusual filter look unusual.
|
|
75443
75743
|
* - `dismissible`: Whether the element shows a control that dismisses it.
|
|
75744
|
+
* - `dismissTabStop`: Whether the remove button is a tab stop of its own.
|
|
75745
|
+
*
|
|
75746
|
+
* `FilterInput` writes `false` on the chips in its `tags` slot: the field's
|
|
75747
|
+
* text is its one tab stop, and the arrow keys move from the text to the
|
|
75748
|
+
* chips, as in a `multiple` Combobox. No attribute: it is coordination
|
|
75749
|
+
* between elements, as `Tag.dismissTabStop` is. (property only)
|
|
75444
75750
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
75445
75751
|
*
|
|
75446
75752
|
* **Named `whenSettled` because `settled` is taken four times over**, by
|
|
@@ -75912,8 +76218,9 @@ export type CustomElementsSolidJs = {
|
|
|
75912
76218
|
* first colon, reads a leading `-` as the negation, and reads a word in
|
|
75913
76219
|
* brackets before the colon as the comparison.
|
|
75914
76220
|
*
|
|
75915
|
-
* **Keyboard.** Focus stays in the text
|
|
75916
|
-
* suggestion as its `aria-activedescendant
|
|
76221
|
+
* **Keyboard.** Focus stays in the text, which is the field's one tab stop. The
|
|
76222
|
+
* text names the highlighted suggestion as its `aria-activedescendant`, and the
|
|
76223
|
+
* arrow keys reach the tokens.
|
|
75917
76224
|
*
|
|
75918
76225
|
* | Key | What it does |
|
|
75919
76226
|
* |---|---|
|
|
@@ -75971,12 +76278,24 @@ export type CustomElementsSolidJs = {
|
|
|
75971
76278
|
* and removing the chip alone would leave its value ticked in the hidden
|
|
75972
76279
|
* menu. Its dismissal is treated as the field being filtered by nothing, so
|
|
75973
76280
|
* it fires `helix-facet` like every other change, and the chip goes when the
|
|
75974
|
-
* filter goes.
|
|
76281
|
+
* filter goes. Set `chips` and the field adds, updates, and removes those
|
|
76282
|
+
* chips itself, from every `helix-facet` you do not cancel.
|
|
75975
76283
|
*
|
|
75976
76284
|
* ## Attributes & Properties
|
|
75977
76285
|
*
|
|
75978
76286
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
75979
76287
|
*
|
|
76288
|
+
* - `chips`: Whether the field keeps a `FilterChip` for each filter in its `tags` slot,
|
|
76289
|
+
* from the `helix-facet` events it hears.
|
|
76290
|
+
*
|
|
76291
|
+
* Off, you build the chips, which is what you do when your own model holds
|
|
76292
|
+
* the filters. On, a filter typed, picked, or changed adds or updates the
|
|
76293
|
+
* chip for its field, one with no values takes it away (unless its
|
|
76294
|
+
* comparison takes none, such as "is empty"), and removing the chip clears
|
|
76295
|
+
* the filter. A `helix-facet` you cancel changes no chip.
|
|
76296
|
+
*
|
|
76297
|
+
* The chips are elements the field adds to its own children, so leave this
|
|
76298
|
+
* off where a framework renders those children and would remove them.
|
|
75980
76299
|
* - `clearable`: Shows a button that empties the field.
|
|
75981
76300
|
*
|
|
75982
76301
|
* The text only. The tokens are the consumer's markup and this element is not
|
|
@@ -75988,6 +76307,18 @@ export type CustomElementsSolidJs = {
|
|
|
75988
76307
|
* - `filter-suggestions`/`filterSuggestions`: Whether the panel narrows itself to the suggestions that hold the term
|
|
75989
76308
|
* being typed, as React Aria's Autocomplete filters. Off, the panel shows
|
|
75990
76309
|
* what you slot and you narrow it.
|
|
76310
|
+
* - `loading`: Whether the suggestions are still loading, such as while a request for the
|
|
76311
|
+
* values of a typed key is out.
|
|
76312
|
+
*
|
|
76313
|
+
* The panel opens on `loading-text`, or the `loading` slot, while the field
|
|
76314
|
+
* has focus, and a screen reader hears it. Slot the options and clear this
|
|
76315
|
+
* when they arrive.
|
|
76316
|
+
* - `loading-text`/`loadingText`: Text the panel shows while the suggestions load.
|
|
76317
|
+
* - `no-results-text`/`noResultsText`: Text the panel shows when `filter-suggestions` hides every suggestion, such
|
|
76318
|
+
* as "No matching filters".
|
|
76319
|
+
*
|
|
76320
|
+
* Empty, or no `no-results` slot, and the panel closes instead, as it does
|
|
76321
|
+
* when it has nothing to offer.
|
|
75991
76322
|
* - `placeholder`: The text shown while the field is empty.
|
|
75992
76323
|
*
|
|
75993
76324
|
* Not a label: it goes when typing starts.
|
|
@@ -76149,6 +76480,8 @@ export type CustomElementsSolidJs = {
|
|
|
76149
76480
|
* - `feedback`: The message that says what is wrong, for content richer than a string. It shows while there is a message.
|
|
76150
76481
|
* - `hint`: Help under the control, for content richer than the `hint` text.
|
|
76151
76482
|
* - `label`: The label, for content richer than the `label` text.
|
|
76483
|
+
* - `loading`: What the panel shows while `loading` is set, for content richer than `loading-text`.
|
|
76484
|
+
* - `no-results`: What the panel shows when `filter-suggestions` hides every suggestion, for content richer than `no-results-text`.
|
|
76152
76485
|
* - `start`: Content before the text, such as a search icon.
|
|
76153
76486
|
* - `suggestions`: Suggestions for what to type next, as `Option`s and `Option.Group`s.
|
|
76154
76487
|
* - `tags`: The active filters, as `FilterChip`s or `Tag`s.
|
|
@@ -76232,12 +76565,14 @@ export type CustomElementsSolidJs = {
|
|
|
76232
76565
|
*
|
|
76233
76566
|
* - `clear`: The button that empties the field.
|
|
76234
76567
|
* - `control`: The input itself.
|
|
76568
|
+
* - `empty`: Shown in the panel when `filter-suggestions` hides every suggestion.
|
|
76235
76569
|
* - `feedback`: The error message under the field.
|
|
76236
76570
|
* - `field`: The box that holds everything.
|
|
76237
76571
|
* - `hint`: The help text under the field, shown while there is no error.
|
|
76238
76572
|
* - `label`: The label above the field.
|
|
76239
76573
|
* - `lead`: The box before the text that holds the `start` slot.
|
|
76240
76574
|
* - `live`: The live region that says how many suggestions the open panel offers. It is rendered from the first time the panel opens with suggestions.
|
|
76575
|
+
* - `loading`: Shown in the panel while the suggestions load.
|
|
76241
76576
|
* - `rest`: The count of tokens that did not fit. It is a `<button>` with `expandable` and a `<span>` without it.
|
|
76242
76577
|
* - `surface`: The floating panel the suggestions sit in.
|
|
76243
76578
|
* - `tags`: The row the tokens sit in.
|
|
@@ -76247,6 +76582,8 @@ export type CustomElementsSolidJs = {
|
|
|
76247
76582
|
* These can be used to apply styling when a component is in a given state.
|
|
76248
76583
|
*
|
|
76249
76584
|
* - `invalid`: The field has an error to show, from the browser's validation or from your `feedback`.
|
|
76585
|
+
* - `loading`: While `loading` is set.
|
|
76586
|
+
* - `no-results`: `filter-suggestions` hid every suggestion, and `no-results-text` or the `no-results` slot says so.
|
|
76250
76587
|
* - `open`: The suggestions are open.
|
|
76251
76588
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
76252
76589
|
*/
|
|
@@ -76269,7 +76606,9 @@ export type CustomElementsSolidJs = {
|
|
|
76269
76606
|
* **`relative` shows the same reading in words**, such as "3 hours ago" at
|
|
76270
76607
|
* `long`, "3 hr. ago" at `short` and "3h ago" at `narrow`, the styles
|
|
76271
76608
|
* `sl-relative-time` offers. `numeric="always"` says "1 day ago" where the
|
|
76272
|
-
* default says "yesterday".
|
|
76609
|
+
* default says "yesterday". Both readings round the count, as
|
|
76610
|
+
* `sl-relative-time` does: 100 seconds ago is "2 minutes ago", and 59.6
|
|
76611
|
+
* minutes is "1 hour".
|
|
76273
76612
|
*
|
|
76274
76613
|
* **`date-style` and `time-style` take each locale's own pattern**, such as
|
|
76275
76614
|
* "Tuesday, August 4, 2026" at `full`, and stand in for the separate fields,
|
|
@@ -77931,6 +78270,9 @@ export type CustomElementsSolidJs = {
|
|
|
77931
78270
|
*
|
|
77932
78271
|
* Methods that can be called to access component functionality.
|
|
77933
78272
|
*
|
|
78273
|
+
* - `setRangeText(replacement: string, start?: number, end?: number, selectMode?: SelectionMode) => void`: Replaces a range of the text, as the native method does: the selection
|
|
78274
|
+
* where `start` and `end` are left out, and `selectMode` says what is
|
|
78275
|
+
* selected after. It sends no event, as the native method sends none.
|
|
77934
78276
|
* - `setSelectionRange(start: number, end: number, direction?: SelectionDirection) => void`: Selects the range from `start` to `end` in one call, which setting
|
|
77935
78277
|
* `selectionStart` and `selectionEnd` one at a time cannot always do.
|
|
77936
78278
|
*
|
|
@@ -82669,7 +83011,9 @@ export type CustomElementsSolidJs = {
|
|
|
82669
83011
|
* speaks it: `feedback` replaces the message under the field and does not
|
|
82670
83012
|
* reach the bubble. Unset is the sentence registered for the page's
|
|
82671
83013
|
* language, then the English.
|
|
82672
|
-
* - `decrement-label`/`decrementLabel`: The name of the step down button, read by screen readers.
|
|
83014
|
+
* - `decrement-label`/`decrementLabel`: The name of the step down button, read by screen readers. The field's
|
|
83015
|
+
* label follows it, so a reader hears "Decrease Quantity", as React Aria
|
|
83016
|
+
* names its steppers.
|
|
82673
83017
|
* - `format-options`/`formatOptions`: `Intl.NumberFormat` options the number is shown with while the field is
|
|
82674
83018
|
* not being edited: a currency, a percent, a unit, or a number of decimals.
|
|
82675
83019
|
* Written as JSON in the attribute.
|
|
@@ -82677,7 +83021,9 @@ export type CustomElementsSolidJs = {
|
|
|
82677
83021
|
* ```html
|
|
82678
83022
|
* <helix-number-input format-options='{"style":"currency","currency":"EUR"}'></helix-number-input>
|
|
82679
83023
|
* ```
|
|
82680
|
-
* - `increment-label`/`incrementLabel`: The name of the step up button, read by screen readers.
|
|
83024
|
+
* - `increment-label`/`incrementLabel`: The name of the step up button, read by screen readers. The field's
|
|
83025
|
+
* label follows it, so a reader hears "Increase Quantity", as React Aria
|
|
83026
|
+
* names its steppers.
|
|
82681
83027
|
* - `large-step`/`largeStep`: How many steps `PageUp` and `PageDown` move.
|
|
82682
83028
|
*
|
|
82683
83029
|
* Ten steps, which is the convention every spinner on the platform follows,
|
|
@@ -82859,8 +83205,10 @@ export type CustomElementsSolidJs = {
|
|
|
82859
83205
|
*
|
|
82860
83206
|
* Methods that can be called to access component functionality.
|
|
82861
83207
|
*
|
|
82862
|
-
* - `stepUp(
|
|
82863
|
-
*
|
|
83208
|
+
* - `stepUp(count: number | boolean = 1) => void`: Steps the value up by `step`, `count` times, as the native method and
|
|
83209
|
+
* `Input.stepUp` do. `true` takes `largeStep` steps, as `PageUp` does.
|
|
83210
|
+
* - `stepDown(count: number | boolean = 1) => void`: Steps the value down by `step`, `count` times. `true` takes `largeStep`
|
|
83211
|
+
* steps, as `PageDown` does.
|
|
82864
83212
|
*
|
|
82865
83213
|
* The same path a press of the down arrow takes, so a consumer driving this
|
|
82866
83214
|
* from their own control gets the clamping and the announcement rather than
|
|
@@ -88120,12 +88468,21 @@ export type CustomElementsSolidJs = {
|
|
|
88120
88468
|
* sequence is correct in the server's markup, where the root cannot count its
|
|
88121
88469
|
* slotted children.
|
|
88122
88470
|
*
|
|
88471
|
+
* `active` names a step by its `value`. A step with no `value` is named by its
|
|
88472
|
+
* place, counted from 1, so a sequence written without values moves as one
|
|
88473
|
+
* written with them, and `helix-activate` says `1`, `2` and so on. Give every
|
|
88474
|
+
* step a value or none, because a value of `2` and the second place are one
|
|
88475
|
+
* name.
|
|
88476
|
+
*
|
|
88123
88477
|
* `linear` keeps a reader from passing a stage they have not finished, as Ark
|
|
88124
88478
|
* UI's linear steps do: a stage ahead is out of reach, and its button disabled,
|
|
88125
88479
|
* until every stage before it is `complete` or `optional`. Going back is always
|
|
88126
88480
|
* allowed. `next()` and `previous()` move one stage either way, under the
|
|
88127
88481
|
* same rules, for your own buttons. `reset()` goes back to the first stage and
|
|
88128
|
-
* clears every stage's `complete`, as Ark UI's `resetStep` does.
|
|
88482
|
+
* clears every stage's `complete`, as Ark UI's `resetStep` does. A button
|
|
88483
|
+
* anywhere on the page calls them with no script, as Ark UI's previous and
|
|
88484
|
+
* next triggers do: give it `commandfor` with the sequence's `id`, and
|
|
88485
|
+
* `command="--previous"`, `"--next"` or `"--reset"`.
|
|
88129
88486
|
*
|
|
88130
88487
|
* `completion="passed"` marks a stage `complete` once a reader moves past it,
|
|
88131
88488
|
* as Ark UI counts a stage before the current one as completed. Going back
|
|
@@ -88152,18 +88509,21 @@ export type CustomElementsSolidJs = {
|
|
|
88152
88509
|
* button is described by its `complete-label`.
|
|
88153
88510
|
*
|
|
88154
88511
|
* **Keyboard.** Each stage's name is a button and its own tab stop, and Enter
|
|
88155
|
-
* or Space goes to the stage. Set `arrows` and the
|
|
88156
|
-
*
|
|
88157
|
-
* Up and Down a column, Home and End to the first and the last.
|
|
88158
|
-
*
|
|
88159
|
-
*
|
|
88512
|
+
* or Space goes to the stage. Set `arrows` and the names are one tab stop, the
|
|
88513
|
+
* current stage's, and the arrow keys move focus between them: Left and Right
|
|
88514
|
+
* along a row, Up and Down a column, Home and End to the first and the last.
|
|
88515
|
+
* The stop follows focus, so Tab leaves the sequence and Shift+Tab comes back
|
|
88516
|
+
* to the name the reader left. The arrows pass over a disabled stage and one a
|
|
88517
|
+
* linear sequence holds out of reach, and they move focus without going to the
|
|
88518
|
+
* stage.
|
|
88160
88519
|
*
|
|
88161
88520
|
* ## Attributes & Properties
|
|
88162
88521
|
*
|
|
88163
88522
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
88164
88523
|
*
|
|
88165
88524
|
* - `arrows`: Whether the arrow keys move focus between the stages' names, along the
|
|
88166
|
-
* way the steps run. Off by default, so the
|
|
88525
|
+
* way the steps run, and the names are one tab stop. Off by default, so the
|
|
88526
|
+
* arrows keep scrolling the page.
|
|
88167
88527
|
* - `completion`: What marks a stage `complete`.
|
|
88168
88528
|
*
|
|
88169
88529
|
* Absent, you do: each step's `complete` is yours, because a reader who
|
|
@@ -88337,7 +88697,9 @@ export type CustomElementsSolidJs = {
|
|
|
88337
88697
|
* - `disabled`: Whether the stage is disabled, so the user cannot go to it.
|
|
88338
88698
|
* - `optional`: Whether a reader may pass the stage without finishing it, in a sequence
|
|
88339
88699
|
* with `linear`. Ark UI's skippable step.
|
|
88340
|
-
* - `value`: The value the step sends in `helix-select
|
|
88700
|
+
* - `value`: The value the step sends in `helix-select`, and what names the step in its
|
|
88701
|
+
* sequence's `active`. Without one, the sequence names the step by its place,
|
|
88702
|
+
* counted from 1.
|
|
88341
88703
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
88342
88704
|
*
|
|
88343
88705
|
* **Named `whenSettled` because `settled` is taken four times over**, by
|
|
@@ -93804,6 +94166,12 @@ export type CustomElementsSolidJs = {
|
|
|
93804
94166
|
* captions, and poster treatment. `Sandbox` takes its preview and `Menu` its
|
|
93805
94167
|
* trigger the same way.
|
|
93806
94168
|
*
|
|
94169
|
+
* **The player is a `Video` or a plain `<video>`.** Either takes `src` and
|
|
94170
|
+
* `poster` from the entry, is named by it, plays on, and answers Shift with N
|
|
94171
|
+
* or P while focused. A plain `<video>` has no previous and next controls
|
|
94172
|
+
* that send `helix-previous` or `helix-next`, so its moves are the entries,
|
|
94173
|
+
* the menu, and your own buttons calling `previous()` and `next()`.
|
|
94174
|
+
*
|
|
93807
94175
|
* **Entries are markup.** React skips properties it would set imperatively
|
|
93808
94176
|
* during hydration, so an array property on a custom element is missing on the
|
|
93809
94177
|
* first paint of a server-rendered page. `using-the-elements.mdx` has the
|
|
@@ -93836,7 +94204,8 @@ export type CustomElementsSolidJs = {
|
|
|
93836
94204
|
*
|
|
93837
94205
|
* **The player is named by the current entry**, and the device's own media
|
|
93838
94206
|
* controls show the entry as the title. A player you gave a `label` keeps
|
|
93839
|
-
* your name, and only the title follows the entry.
|
|
94207
|
+
* your name, and only the title follows the entry. A plain `<video>` is
|
|
94208
|
+
* named through `aria-label`, unless you wrote one.
|
|
93840
94209
|
*
|
|
93841
94210
|
* **Keyboard.** The entries take one stop in the tab order: the entry you
|
|
93842
94211
|
* last focused, or the current entry before you have focused one. Enter or
|
|
@@ -94531,6 +94900,11 @@ export type CustomElementsSolidJs = {
|
|
|
94531
94900
|
* commas. Their rows carry `aria-disabled`, the keys and typing pass over
|
|
94532
94901
|
* them, and a press, Space, or Control with A does not select them.
|
|
94533
94902
|
*
|
|
94903
|
+
* **Rows a stylesheet can tell apart.** A chosen row carries `data-selected`,
|
|
94904
|
+
* a disabled one `data-disabled`, as React Aria's rows do, and the row the
|
|
94905
|
+
* keys are on, which holds the tab stop, `data-active`, whether or not the
|
|
94906
|
+
* list has focus.
|
|
94907
|
+
*
|
|
94534
94908
|
* **Loading more.** `helix-range-change` fires as the items on screen change,
|
|
94535
94909
|
* and `range` holds them. `helix-load-more` fires once a reader is within one
|
|
94536
94910
|
* screen of the end, once for each length of the set: add to `items` and it can
|