@fusion.dev/helix-headless 0.155.0 → 0.157.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 +2695 -137
- package/dist/canvas/node/canvas-node.js +1 -1
- package/dist/canvas/root/canvas-root.d.ts +17 -2
- package/dist/canvas/root/canvas-root.js +23 -6
- package/dist/chat/composer/chat-composer.js +1 -1
- package/dist/chat/root/chat-root.d.ts +14 -1
- package/dist/chat/root/chat-root.js +14 -4
- package/dist/combobox/root/combobox-root.d.ts +10 -0
- package/dist/combobox/root/combobox-root.js +18 -3
- package/dist/command/root/command-root.d.ts +116 -1
- package/dist/command/root/command-root.js +124 -15
- package/dist/data-table/root/data-table-root.d.ts +25 -0
- package/dist/data-table/root/data-table-root.js +13 -3
- package/dist/date-input/root/date-input-root.d.ts +32 -1
- package/dist/date-input/root/date-input-root.js +7 -1
- package/dist/drilldown/item/drilldown-item.d.ts +49 -1
- package/dist/drilldown/item/drilldown-item.js +77 -17
- package/dist/drilldown/root/drilldown-root.d.ts +45 -5
- package/dist/drilldown/root/drilldown-root.js +51 -5
- package/dist/element-events.generated.js +2 -1
- package/dist/filter-input/menu/filter-menu.d.ts +1 -0
- package/dist/filter-input/menu/filter-menu.js +4 -4
- package/dist/graph/root/graph-root.d.ts +13 -0
- package/dist/graph/root/graph-root.js +16 -0
- package/dist/list/root/list-root.d.ts +74 -1
- package/dist/list/root/list-root.js +92 -4
- package/dist/list/selection.js +3 -3
- package/dist/map/root/map-root.d.ts +6 -0
- package/dist/map/root/map-root.js +8 -1
- package/dist/megamenu/root/megamenu-root.d.ts +50 -13
- package/dist/megamenu/root/megamenu-root.js +44 -6
- package/dist/menu/item/menu-item.d.ts +24 -1
- package/dist/menu/item/menu-item.js +42 -2
- package/dist/menu/root/menu-root.d.ts +120 -9
- package/dist/menu/root/menu-root.js +329 -26
- package/dist/notifications/root/notifications-root.d.ts +20 -0
- package/dist/notifications/root/notifications-root.js +32 -1
- package/dist/number-input/root/number-input-root.d.ts +63 -6
- package/dist/number-input/root/number-input-root.js +96 -11
- package/dist/object-inspector/root/object-inspector-root.d.ts +36 -1
- package/dist/object-inspector/root/object-inspector-root.js +26 -2
- package/dist/option/root/option-root.d.ts +32 -0
- package/dist/option/root/option-root.js +44 -5
- package/dist/outline/root/outline-root.d.ts +6 -2
- package/dist/outline/root/outline-root.js +7 -3
- package/dist/table/root/table-root.d.ts +20 -0
- package/dist/table/root/table-root.js +13 -3
- package/dist/time-input/root/time-input-root.d.ts +32 -1
- package/dist/time-input/root/time-input-root.js +9 -2
- package/dist/time-picker/root/time-picker-root.d.ts +63 -1
- package/dist/time-picker/root/time-picker-root.js +58 -7
- package/dist/timeline/item/timeline-item.d.ts +25 -0
- package/dist/timeline/item/timeline-item.js +27 -2
- package/dist/toast/item/toast-item.d.ts +26 -0
- package/dist/toast/item/toast-item.js +55 -3
- package/dist/toast/root/toast-root.d.ts +32 -0
- package/dist/toast/root/toast-root.js +47 -2
- package/dist/video/root/keys.d.ts +6 -2
- package/dist/video/root/keys.js +18 -1
- package/dist/video/root/video-root.d.ts +61 -1
- package/dist/video/root/video-root.js +79 -11
- package/dist/video-playlist/item/video-playlist-item.d.ts +15 -1
- package/dist/video-playlist/item/video-playlist-item.js +7 -0
- package/dist/video-playlist/menu/video-playlist-menu.d.ts +1 -0
- package/dist/video-playlist/menu/video-playlist-menu.js +1 -1
- package/dist/video-playlist/root/video-playlist-root.d.ts +43 -4
- package/dist/video-playlist/root/video-playlist-root.js +69 -2
- package/dist/virtual-list/root/virtual-list-root.d.ts +8 -0
- package/dist/virtual-list/root/virtual-list-root.js +3 -0
- package/lint.json +1 -1
- package/package.json +5 -5
- package/types/jsx.d.ts +3346 -266
- package/types/vue.d.ts +910 -66
- package/types/words.d.ts +124 -0
package/types/vue.d.ts
CHANGED
|
@@ -1869,13 +1869,22 @@ units. */
|
|
|
1869
1869
|
card and `{width}` and `{height}` for its new size, in the document's
|
|
1870
1870
|
units. */
|
|
1871
1871
|
resizedLabel?: (HelixHeadlessCanvas["resizedLabel"]) | undefined;
|
|
1872
|
+
/** What a screen reader calls the board in place of its role, after its
|
|
1873
|
+
name: "Release plan, canvas". Said only where the board has a name of its
|
|
1874
|
+
own, since the fallback name is the same word. Empty leaves the role. */
|
|
1875
|
+
"role-label"?: (HelixHeadlessCanvas["roleLabel"]) | undefined;
|
|
1876
|
+
/** What a screen reader calls the board in place of its role, after its
|
|
1877
|
+
name: "Release plan, canvas". Said only where the board has a name of its
|
|
1878
|
+
own, since the fallback name is the same word. Empty leaves the role. */
|
|
1879
|
+
roleLabel?: (HelixHeadlessCanvas["roleLabel"]) | undefined;
|
|
1872
1880
|
/** The names of the selected cards and connections, comma separated. Empty
|
|
1873
1881
|
when nothing is selected.
|
|
1874
1882
|
|
|
1875
1883
|
**Comma separated, the way `Listbox` writes a multiple value**, so a page
|
|
1876
1884
|
reads one selection the same way wherever it comes from. A click, or a key
|
|
1877
|
-
that lands on one, selects it alone;
|
|
1878
|
-
|
|
1885
|
+
that lands on one, selects it alone; Command or Control with an arrow key
|
|
1886
|
+
moves without selecting; Shift, Command or Control with a click adds or
|
|
1887
|
+
takes one away, and so does Space; Command or Control with A
|
|
1879
1888
|
selects everything; Shift and a drag across the empty board selects the
|
|
1880
1889
|
cards the box touches. A click on the empty board, or Escape, selects
|
|
1881
1890
|
nothing. Dragging, Shift with an arrow, and Delete act on the whole
|
|
@@ -2637,6 +2646,16 @@ export type HelixHeadlessChatHelixSendElementEvent =
|
|
|
2637
2646
|
HelixHeadlessChatElementEvent<HelixSendEvent>;
|
|
2638
2647
|
|
|
2639
2648
|
export type HelixHeadlessChatVueProps = {
|
|
2649
|
+
/** What a screen reader hears when a turn arrives. `{author}` is who wrote
|
|
2650
|
+
it, as its name says it, and `{text}` its words. A turn with no author a
|
|
2651
|
+
reader can be told, a turn by `them` with no `author-label`, says its
|
|
2652
|
+
words alone. */
|
|
2653
|
+
"arrival-label"?: (HelixHeadlessChat["arrivalLabel"]) | undefined;
|
|
2654
|
+
/** What a screen reader hears when a turn arrives. `{author}` is who wrote
|
|
2655
|
+
it, as its name says it, and `{text}` its words. A turn with no author a
|
|
2656
|
+
reader can be told, a turn by `them` with no `author-label`, says its
|
|
2657
|
+
words alone. */
|
|
2658
|
+
arrivalLabel?: (HelixHeadlessChat["arrivalLabel"]) | undefined;
|
|
2640
2659
|
/** Declarations for the turns from `turns` by each author, keyed by `author`,
|
|
2641
2660
|
as JSON in the attribute: `{"ada": "--chat-message-background-color: …"}`.
|
|
2642
2661
|
|
|
@@ -2820,8 +2839,36 @@ locale. */
|
|
|
2820
2839
|
Absent, or empty, is this sentence, or the words registered for the page's
|
|
2821
2840
|
locale. */
|
|
2822
2841
|
valueMissingMessage?: (HelixHeadlessCheckboxGroup["valueMissingMessage"]) | undefined;
|
|
2823
|
-
/**
|
|
2824
|
-
|
|
2842
|
+
/** The name a screen reader says for the field where it shows no label, as
|
|
2843
|
+
the platform's `aria-label`. It is drawn as a label and clipped, so it
|
|
2844
|
+
names the control inside, and a new one renders at once.
|
|
2845
|
+
|
|
2846
|
+
**An `aria-label` is read when the field renders, and nothing else would
|
|
2847
|
+
render it again.** It is the platform's attribute and no property of this
|
|
2848
|
+
element's, so writing a new one scheduled no update and the label kept
|
|
2849
|
+
the old words. Data Table meets this on every column move: each row's
|
|
2850
|
+
checkbox is named by the first column, so reordering renames every one.
|
|
2851
|
+
|
|
2852
|
+
A reactive property on the attribute, which is the one way Lit observes
|
|
2853
|
+
one. Overriding `observedAttributes` in a mixin compiled `this` to the
|
|
2854
|
+
mixin's own class, so every field observed only this mixin's attributes
|
|
2855
|
+
and dropped its own. Not reflected: the attribute is the consumer's. */
|
|
2856
|
+
"aria-label"?: (HelixHeadlessCheckboxGroup["namedBy"]) | undefined;
|
|
2857
|
+
/** The name a screen reader says for the field where it shows no label, as
|
|
2858
|
+
the platform's `aria-label`. It is drawn as a label and clipped, so it
|
|
2859
|
+
names the control inside, and a new one renders at once.
|
|
2860
|
+
|
|
2861
|
+
**An `aria-label` is read when the field renders, and nothing else would
|
|
2862
|
+
render it again.** It is the platform's attribute and no property of this
|
|
2863
|
+
element's, so writing a new one scheduled no update and the label kept
|
|
2864
|
+
the old words. Data Table meets this on every column move: each row's
|
|
2865
|
+
checkbox is named by the first column, so reordering renames every one.
|
|
2866
|
+
|
|
2867
|
+
A reactive property on the attribute, which is the one way Lit observes
|
|
2868
|
+
one. Overriding `observedAttributes` in a mixin compiled `this` to the
|
|
2869
|
+
mixin's own class, so every field observed only this mixin's attributes
|
|
2870
|
+
and dropped its own. Not reflected: the attribute is the consumer's. */
|
|
2871
|
+
namedBy?: (HelixHeadlessCheckboxGroup["namedBy"]) | undefined;
|
|
2825
2872
|
/** The validation message shown under the control. It replaces the
|
|
2826
2873
|
browser's message. */
|
|
2827
2874
|
feedback?: (HelixHeadlessCheckboxGroup["feedback"]) | undefined;
|
|
@@ -2941,8 +2988,36 @@ was, and the control says `aria-readonly`. A script can still set
|
|
|
2941
2988
|
The attribute is `readonly`, which is the platform's spelling for the
|
|
2942
2989
|
text fields. */
|
|
2943
2990
|
readOnly?: (HelixHeadlessCheckbox["readOnly"]) | undefined;
|
|
2944
|
-
/**
|
|
2945
|
-
|
|
2991
|
+
/** The name a screen reader says for the field where it shows no label, as
|
|
2992
|
+
the platform's `aria-label`. It is drawn as a label and clipped, so it
|
|
2993
|
+
names the control inside, and a new one renders at once.
|
|
2994
|
+
|
|
2995
|
+
**An `aria-label` is read when the field renders, and nothing else would
|
|
2996
|
+
render it again.** It is the platform's attribute and no property of this
|
|
2997
|
+
element's, so writing a new one scheduled no update and the label kept
|
|
2998
|
+
the old words. Data Table meets this on every column move: each row's
|
|
2999
|
+
checkbox is named by the first column, so reordering renames every one.
|
|
3000
|
+
|
|
3001
|
+
A reactive property on the attribute, which is the one way Lit observes
|
|
3002
|
+
one. Overriding `observedAttributes` in a mixin compiled `this` to the
|
|
3003
|
+
mixin's own class, so every field observed only this mixin's attributes
|
|
3004
|
+
and dropped its own. Not reflected: the attribute is the consumer's. */
|
|
3005
|
+
"aria-label"?: (HelixHeadlessCheckbox["namedBy"]) | undefined;
|
|
3006
|
+
/** The name a screen reader says for the field where it shows no label, as
|
|
3007
|
+
the platform's `aria-label`. It is drawn as a label and clipped, so it
|
|
3008
|
+
names the control inside, and a new one renders at once.
|
|
3009
|
+
|
|
3010
|
+
**An `aria-label` is read when the field renders, and nothing else would
|
|
3011
|
+
render it again.** It is the platform's attribute and no property of this
|
|
3012
|
+
element's, so writing a new one scheduled no update and the label kept
|
|
3013
|
+
the old words. Data Table meets this on every column move: each row's
|
|
3014
|
+
checkbox is named by the first column, so reordering renames every one.
|
|
3015
|
+
|
|
3016
|
+
A reactive property on the attribute, which is the one way Lit observes
|
|
3017
|
+
one. Overriding `observedAttributes` in a mixin compiled `this` to the
|
|
3018
|
+
mixin's own class, so every field observed only this mixin's attributes
|
|
3019
|
+
and dropped its own. Not reflected: the attribute is the consumer's. */
|
|
3020
|
+
namedBy?: (HelixHeadlessCheckbox["namedBy"]) | undefined;
|
|
2946
3021
|
/** The validation message shown under the control. It replaces the
|
|
2947
3022
|
browser's message. */
|
|
2948
3023
|
feedback?: (HelixHeadlessCheckbox["feedback"]) | undefined;
|
|
@@ -3308,8 +3383,36 @@ asking it meant. Writing always applies; `<helix-input value="x">` is the
|
|
|
3308
3383
|
same statement in markup, and `default-value` is how markup seeds a value
|
|
3309
3384
|
a reset should return to. */
|
|
3310
3385
|
value?: (HelixHeadlessColorInput["value"]) | undefined;
|
|
3311
|
-
/**
|
|
3312
|
-
|
|
3386
|
+
/** The name a screen reader says for the field where it shows no label, as
|
|
3387
|
+
the platform's `aria-label`. It is drawn as a label and clipped, so it
|
|
3388
|
+
names the control inside, and a new one renders at once.
|
|
3389
|
+
|
|
3390
|
+
**An `aria-label` is read when the field renders, and nothing else would
|
|
3391
|
+
render it again.** It is the platform's attribute and no property of this
|
|
3392
|
+
element's, so writing a new one scheduled no update and the label kept
|
|
3393
|
+
the old words. Data Table meets this on every column move: each row's
|
|
3394
|
+
checkbox is named by the first column, so reordering renames every one.
|
|
3395
|
+
|
|
3396
|
+
A reactive property on the attribute, which is the one way Lit observes
|
|
3397
|
+
one. Overriding `observedAttributes` in a mixin compiled `this` to the
|
|
3398
|
+
mixin's own class, so every field observed only this mixin's attributes
|
|
3399
|
+
and dropped its own. Not reflected: the attribute is the consumer's. */
|
|
3400
|
+
"aria-label"?: (HelixHeadlessColorInput["namedBy"]) | undefined;
|
|
3401
|
+
/** The name a screen reader says for the field where it shows no label, as
|
|
3402
|
+
the platform's `aria-label`. It is drawn as a label and clipped, so it
|
|
3403
|
+
names the control inside, and a new one renders at once.
|
|
3404
|
+
|
|
3405
|
+
**An `aria-label` is read when the field renders, and nothing else would
|
|
3406
|
+
render it again.** It is the platform's attribute and no property of this
|
|
3407
|
+
element's, so writing a new one scheduled no update and the label kept
|
|
3408
|
+
the old words. Data Table meets this on every column move: each row's
|
|
3409
|
+
checkbox is named by the first column, so reordering renames every one.
|
|
3410
|
+
|
|
3411
|
+
A reactive property on the attribute, which is the one way Lit observes
|
|
3412
|
+
one. Overriding `observedAttributes` in a mixin compiled `this` to the
|
|
3413
|
+
mixin's own class, so every field observed only this mixin's attributes
|
|
3414
|
+
and dropped its own. Not reflected: the attribute is the consumer's. */
|
|
3415
|
+
namedBy?: (HelixHeadlessColorInput["namedBy"]) | undefined;
|
|
3313
3416
|
/** The validation message shown under the control. It replaces the
|
|
3314
3417
|
browser's message. */
|
|
3315
3418
|
feedback?: (HelixHeadlessColorInput["feedback"]) | undefined;
|
|
@@ -3877,6 +3980,22 @@ delay sends one request for a word instead of one per letter. The arrow
|
|
|
3877
3980
|
keys, Enter and Escape narrow at once on what was typed. `0` narrows on
|
|
3878
3981
|
every keystroke. See Listbox's `filter-delay`. */
|
|
3879
3982
|
filterDelay?: (HelixHeadlessCombobox["filterDelay"]) | undefined;
|
|
3983
|
+
/** What the form receives for each chosen option: `key`, its `value`, or
|
|
3984
|
+
`text`, its words, as React Aria's ComboBox `formValue` offers.
|
|
3985
|
+
|
|
3986
|
+
`text` is for a server that wants what the reader saw, such as a city's
|
|
3987
|
+
name. A value no option carries, typed with `allows-custom-value` or made
|
|
3988
|
+
with `creatable`, is sent as it is either way. Absent is `key`, and the
|
|
3989
|
+
host carries no attribute for it. */
|
|
3990
|
+
"form-value"?: (HelixHeadlessCombobox["formValue"]) | undefined;
|
|
3991
|
+
/** What the form receives for each chosen option: `key`, its `value`, or
|
|
3992
|
+
`text`, its words, as React Aria's ComboBox `formValue` offers.
|
|
3993
|
+
|
|
3994
|
+
`text` is for a server that wants what the reader saw, such as a city's
|
|
3995
|
+
name. A value no option carries, typed with `allows-custom-value` or made
|
|
3996
|
+
with `creatable`, is sent as it is either way. Absent is `key`, and the
|
|
3997
|
+
host carries no attribute for it. */
|
|
3998
|
+
formValue?: (HelixHeadlessCombobox["formValue"]) | undefined;
|
|
3880
3999
|
/** The list's name, read by screen readers. The list has no visible name. */
|
|
3881
4000
|
"list-label"?: (HelixHeadlessCombobox["listLabel"]) | undefined;
|
|
3882
4001
|
/** The list's name, read by screen readers. The list has no visible name. */
|
|
@@ -4053,8 +4172,36 @@ asking it meant. Writing always applies; `<helix-input value="x">` is the
|
|
|
4053
4172
|
same statement in markup, and `default-value` is how markup seeds a value
|
|
4054
4173
|
a reset should return to. */
|
|
4055
4174
|
value?: (HelixHeadlessCombobox["value"]) | undefined;
|
|
4056
|
-
/**
|
|
4057
|
-
|
|
4175
|
+
/** The name a screen reader says for the field where it shows no label, as
|
|
4176
|
+
the platform's `aria-label`. It is drawn as a label and clipped, so it
|
|
4177
|
+
names the control inside, and a new one renders at once.
|
|
4178
|
+
|
|
4179
|
+
**An `aria-label` is read when the field renders, and nothing else would
|
|
4180
|
+
render it again.** It is the platform's attribute and no property of this
|
|
4181
|
+
element's, so writing a new one scheduled no update and the label kept
|
|
4182
|
+
the old words. Data Table meets this on every column move: each row's
|
|
4183
|
+
checkbox is named by the first column, so reordering renames every one.
|
|
4184
|
+
|
|
4185
|
+
A reactive property on the attribute, which is the one way Lit observes
|
|
4186
|
+
one. Overriding `observedAttributes` in a mixin compiled `this` to the
|
|
4187
|
+
mixin's own class, so every field observed only this mixin's attributes
|
|
4188
|
+
and dropped its own. Not reflected: the attribute is the consumer's. */
|
|
4189
|
+
"aria-label"?: (HelixHeadlessCombobox["namedBy"]) | undefined;
|
|
4190
|
+
/** The name a screen reader says for the field where it shows no label, as
|
|
4191
|
+
the platform's `aria-label`. It is drawn as a label and clipped, so it
|
|
4192
|
+
names the control inside, and a new one renders at once.
|
|
4193
|
+
|
|
4194
|
+
**An `aria-label` is read when the field renders, and nothing else would
|
|
4195
|
+
render it again.** It is the platform's attribute and no property of this
|
|
4196
|
+
element's, so writing a new one scheduled no update and the label kept
|
|
4197
|
+
the old words. Data Table meets this on every column move: each row's
|
|
4198
|
+
checkbox is named by the first column, so reordering renames every one.
|
|
4199
|
+
|
|
4200
|
+
A reactive property on the attribute, which is the one way Lit observes
|
|
4201
|
+
one. Overriding `observedAttributes` in a mixin compiled `this` to the
|
|
4202
|
+
mixin's own class, so every field observed only this mixin's attributes
|
|
4203
|
+
and dropped its own. Not reflected: the attribute is the consumer's. */
|
|
4204
|
+
namedBy?: (HelixHeadlessCombobox["namedBy"]) | undefined;
|
|
4058
4205
|
/** The validation message shown under the control. It replaces the
|
|
4059
4206
|
browser's message. */
|
|
4060
4207
|
feedback?: (HelixHeadlessCombobox["feedback"]) | undefined;
|
|
@@ -4166,6 +4313,13 @@ Empty turns it off, for a consumer who opens the palette from a button or
|
|
|
4166
4313
|
from their own shortcut handler. There is no list of defaults to fight
|
|
4167
4314
|
with: one key, said once. */
|
|
4168
4315
|
hotkey?: (HelixHeadlessCommand["hotkey"]) | undefined;
|
|
4316
|
+
/** Draws the palette in the page, where it stands, with no dialog: a search
|
|
4317
|
+
over a list of commands, as React Aria's Autocomplete is drawn.
|
|
4318
|
+
|
|
4319
|
+
The list is always shown, and `hotkey` puts focus in its filter field.
|
|
4320
|
+
Choosing a command says `helix-select` and leaves the list where it is,
|
|
4321
|
+
and `open`, `toggle` and the dialog's parts do nothing. */
|
|
4322
|
+
inline?: (HelixHeadlessCommand["inline"]) | undefined;
|
|
4169
4323
|
/** Accessible name for the overlay, which has no visible heading. */
|
|
4170
4324
|
label?: (HelixHeadlessCommand["label"]) | undefined;
|
|
4171
4325
|
/** What the list says when its commands could not be loaded, such as after a
|
|
@@ -4193,6 +4347,15 @@ some. Absent, `empty-text` shows. See Listbox's `no-results-text`. */
|
|
|
4193
4347
|
/** The text shown when typing hides every one of the commands, where there are
|
|
4194
4348
|
some. Absent, `empty-text` shows. See Listbox's `no-results-text`. */
|
|
4195
4349
|
noResultsText?: (HelixHeadlessCommand["noResultsText"]) | undefined;
|
|
4350
|
+
/** The page of commands shown, by name: empty for the commands you write
|
|
4351
|
+
with no `slot`, or a name for the commands slotted as `page:` and the
|
|
4352
|
+
name, such as `slot="page:theme"`.
|
|
4353
|
+
|
|
4354
|
+
An option with `opens` set to a name goes to that page when it is chosen,
|
|
4355
|
+
in place of running, and Backspace in an empty filter goes back to the
|
|
4356
|
+
page before. Closing the palette goes back to the first page. Set it to
|
|
4357
|
+
open the palette on a page of your choosing. */
|
|
4358
|
+
page?: (HelixHeadlessCommand["page"]) | undefined;
|
|
4196
4359
|
/** The text shown in the filter field before anything is typed. */
|
|
4197
4360
|
placeholder?: (HelixHeadlessCommand["placeholder"]) | undefined;
|
|
4198
4361
|
/** What a screen reader hears when typing leaves one command, where
|
|
@@ -4228,6 +4391,15 @@ hydration, or diffed by a framework, it comes back holding whatever the
|
|
|
4228
4391
|
last reader did rather than what the author wrote. `:state(open)` carries
|
|
4229
4392
|
the resolved state for stylesheets, which is what the mirror is for. */
|
|
4230
4393
|
open?: (HelixHeadlessCommand["open"]) | undefined;
|
|
4394
|
+
/** The commands as data, for a palette too long to draw whole: each a value,
|
|
4395
|
+
which is also its words, or a record with a `value`, a `label` and
|
|
4396
|
+
`disabled`. Handed to the list, which draws only the commands in sight and
|
|
4397
|
+
reads no children while it is set. See Listbox's `items`.
|
|
4398
|
+
|
|
4399
|
+
Choosing one says `helix-select` with its value, as a child option does.
|
|
4400
|
+
A command that is a link, or that has an `alternate`, is an option you
|
|
4401
|
+
write as a child. */
|
|
4402
|
+
items?: (HelixHeadlessCommand["items"]) | undefined;
|
|
4231
4403
|
};
|
|
4232
4404
|
|
|
4233
4405
|
export type HelixHeadlessCommandVueEvents = {
|
|
@@ -4481,6 +4653,22 @@ is set. */
|
|
|
4481
4653
|
"dropped-label"?: (HelixHeadlessDataTable["droppedLabel"]) | undefined;
|
|
4482
4654
|
/** What screen readers hear when a row is dropped, with `reorderable-rows`. */
|
|
4483
4655
|
droppedLabel?: (HelixHeadlessDataTable["droppedLabel"]) | undefined;
|
|
4656
|
+
/** The text shown and announced when the rows could not load, such as "The
|
|
4657
|
+
files did not load". Set it when a fetch fails, and clear it once you try
|
|
4658
|
+
again. Empty, the default, shows nothing.
|
|
4659
|
+
|
|
4660
|
+
While it is set, a line after the rows shows it, or your own content in the
|
|
4661
|
+
`error` slot, in place of the empty and loading lines, and the live region
|
|
4662
|
+
says it. */
|
|
4663
|
+
"error-text"?: (HelixHeadlessDataTable["errorText"]) | undefined;
|
|
4664
|
+
/** The text shown and announced when the rows could not load, such as "The
|
|
4665
|
+
files did not load". Set it when a fetch fails, and clear it once you try
|
|
4666
|
+
again. Empty, the default, shows nothing.
|
|
4667
|
+
|
|
4668
|
+
While it is set, a line after the rows shows it, or your own content in the
|
|
4669
|
+
`error` slot, in place of the empty and loading lines, and the live region
|
|
4670
|
+
says it. */
|
|
4671
|
+
errorText?: (HelixHeadlessDataTable["errorText"]) | undefined;
|
|
4484
4672
|
/** The estimated height of a row before it is drawn, in pixels.
|
|
4485
4673
|
|
|
4486
4674
|
Only read while `windowed`, and a starting guess rather than a claim: a
|
|
@@ -5171,8 +5359,36 @@ asking it meant. Writing always applies; `<helix-input value="x">` is the
|
|
|
5171
5359
|
same statement in markup, and `default-value` is how markup seeds a value
|
|
5172
5360
|
a reset should return to. */
|
|
5173
5361
|
value?: (HelixHeadlessDateInput["value"]) | undefined;
|
|
5174
|
-
/**
|
|
5175
|
-
|
|
5362
|
+
/** The name a screen reader says for the field where it shows no label, as
|
|
5363
|
+
the platform's `aria-label`. It is drawn as a label and clipped, so it
|
|
5364
|
+
names the control inside, and a new one renders at once.
|
|
5365
|
+
|
|
5366
|
+
**An `aria-label` is read when the field renders, and nothing else would
|
|
5367
|
+
render it again.** It is the platform's attribute and no property of this
|
|
5368
|
+
element's, so writing a new one scheduled no update and the label kept
|
|
5369
|
+
the old words. Data Table meets this on every column move: each row's
|
|
5370
|
+
checkbox is named by the first column, so reordering renames every one.
|
|
5371
|
+
|
|
5372
|
+
A reactive property on the attribute, which is the one way Lit observes
|
|
5373
|
+
one. Overriding `observedAttributes` in a mixin compiled `this` to the
|
|
5374
|
+
mixin's own class, so every field observed only this mixin's attributes
|
|
5375
|
+
and dropped its own. Not reflected: the attribute is the consumer's. */
|
|
5376
|
+
"aria-label"?: (HelixHeadlessDateInput["namedBy"]) | undefined;
|
|
5377
|
+
/** The name a screen reader says for the field where it shows no label, as
|
|
5378
|
+
the platform's `aria-label`. It is drawn as a label and clipped, so it
|
|
5379
|
+
names the control inside, and a new one renders at once.
|
|
5380
|
+
|
|
5381
|
+
**An `aria-label` is read when the field renders, and nothing else would
|
|
5382
|
+
render it again.** It is the platform's attribute and no property of this
|
|
5383
|
+
element's, so writing a new one scheduled no update and the label kept
|
|
5384
|
+
the old words. Data Table meets this on every column move: each row's
|
|
5385
|
+
checkbox is named by the first column, so reordering renames every one.
|
|
5386
|
+
|
|
5387
|
+
A reactive property on the attribute, which is the one way Lit observes
|
|
5388
|
+
one. Overriding `observedAttributes` in a mixin compiled `this` to the
|
|
5389
|
+
mixin's own class, so every field observed only this mixin's attributes
|
|
5390
|
+
and dropped its own. Not reflected: the attribute is the consumer's. */
|
|
5391
|
+
namedBy?: (HelixHeadlessDateInput["namedBy"]) | undefined;
|
|
5176
5392
|
/** The validation message shown under the control. It replaces the
|
|
5177
5393
|
browser's message. */
|
|
5178
5394
|
feedback?: (HelixHeadlessDateInput["feedback"]) | undefined;
|
|
@@ -6086,6 +6302,16 @@ export type HelixHeadlessDrilldownItemHelixSelectElementEvent =
|
|
|
6086
6302
|
export type HelixHeadlessDrilldownItemVueProps = {
|
|
6087
6303
|
/** Whether the row can be reached at all. */
|
|
6088
6304
|
disabled?: (HelixHeadlessDrilldownItem["disabled"]) | undefined;
|
|
6305
|
+
/** Whether the link downloads the file when the row is chosen. Only
|
|
6306
|
+
meaningful beside an `href`, and only for a file served from this origin. */
|
|
6307
|
+
download?: (HelixHeadlessDrilldownItem["download"]) | undefined;
|
|
6308
|
+
/** The URL the row links to. Setting it renders the row as a link, unless the
|
|
6309
|
+
row opens a page or is disabled. */
|
|
6310
|
+
href?: (HelixHeadlessDrilldownItem["href"]) | undefined;
|
|
6311
|
+
/** The link's `rel`. Set it whenever you set `target="_blank"`. */
|
|
6312
|
+
rel?: (HelixHeadlessDrilldownItem["rel"]) | undefined;
|
|
6313
|
+
/** Where the link opens, for rows that should open outside the current page. */
|
|
6314
|
+
target?: (HelixHeadlessDrilldownItem["target"]) | undefined;
|
|
6089
6315
|
/** Identifies the row to your event listeners. */
|
|
6090
6316
|
value?: (HelixHeadlessDrilldownItem["value"]) | undefined;
|
|
6091
6317
|
/** Whether this row holds the region's tab stop. Set by the drill-down.
|
|
@@ -6112,6 +6338,9 @@ export type HelixHeadlessDrilldownElementEvent<E = Event> = TypedEvent<
|
|
|
6112
6338
|
HelixHeadlessDrilldown,
|
|
6113
6339
|
E
|
|
6114
6340
|
>;
|
|
6341
|
+
/** `helix-navigate` event type */
|
|
6342
|
+
export type HelixHeadlessDrilldownHelixNavigateElementEvent =
|
|
6343
|
+
HelixHeadlessDrilldownElementEvent<HelixNavigateEvent>;
|
|
6115
6344
|
/** `helix-select` event type */
|
|
6116
6345
|
export type HelixHeadlessDrilldownHelixSelectElementEvent =
|
|
6117
6346
|
HelixHeadlessDrilldownElementEvent<HelixSelectEvent>;
|
|
@@ -6127,6 +6356,14 @@ and wins over this. */
|
|
|
6127
6356
|
"back-label"?: (HelixHeadlessDrilldown["backLabel"]) | undefined;
|
|
6128
6357
|
/** The text of the back button. */
|
|
6129
6358
|
backLabel?: (HelixHeadlessDrilldown["backLabel"]) | undefined;
|
|
6359
|
+
/** Whether the drilldown is a site's navigation: a `navigation` landmark
|
|
6360
|
+
named by `label`, whose pages are lists of links. Without it, each page is
|
|
6361
|
+
a `menu`. */
|
|
6362
|
+
navigation?: (HelixHeadlessDrilldown["navigation"]) | undefined;
|
|
6363
|
+
/** The page showing, as the `value` of the row that opens it. Empty is the
|
|
6364
|
+
top page. Setting it shows that page, and a value no row with a page has
|
|
6365
|
+
shows the top page. */
|
|
6366
|
+
page?: (HelixHeadlessDrilldown["page"]) | undefined;
|
|
6130
6367
|
/** The text shown and announced when there are no rows and none are loading. */
|
|
6131
6368
|
"empty-text"?: (HelixHeadlessDrilldown["emptyText"]) | undefined;
|
|
6132
6369
|
/** The text shown and announced when there are no rows and none are loading. */
|
|
@@ -6144,6 +6381,8 @@ say that without the component knowing what a row looks like. */
|
|
|
6144
6381
|
};
|
|
6145
6382
|
|
|
6146
6383
|
export type HelixHeadlessDrilldownVueEvents = {
|
|
6384
|
+
/** Fired before a reader moves into a page or back out of one. `detail.value` is the `value` of the row whose page is about to show, empty for the top page. Cancelable: cancel it to stay on the page showing. */
|
|
6385
|
+
"helix-navigate": HelixHeadlessDrilldownHelixNavigateElementEvent;
|
|
6147
6386
|
/** Fired when a row with no page is chosen. Cancelable: canceling it stops the change and leaves the decision to you. */
|
|
6148
6387
|
"helix-select": HelixHeadlessDrilldownHelixSelectElementEvent;
|
|
6149
6388
|
};
|
|
@@ -6265,8 +6504,36 @@ removes rather than as "Remove" said once per file. A label with no
|
|
|
6265
6504
|
"trigger-label"?: (HelixHeadlessFileInput["triggerLabel"]) | undefined;
|
|
6266
6505
|
/** The trigger's text when nothing is slotted into it. */
|
|
6267
6506
|
triggerLabel?: (HelixHeadlessFileInput["triggerLabel"]) | undefined;
|
|
6268
|
-
/**
|
|
6269
|
-
|
|
6507
|
+
/** The name a screen reader says for the field where it shows no label, as
|
|
6508
|
+
the platform's `aria-label`. It is drawn as a label and clipped, so it
|
|
6509
|
+
names the control inside, and a new one renders at once.
|
|
6510
|
+
|
|
6511
|
+
**An `aria-label` is read when the field renders, and nothing else would
|
|
6512
|
+
render it again.** It is the platform's attribute and no property of this
|
|
6513
|
+
element's, so writing a new one scheduled no update and the label kept
|
|
6514
|
+
the old words. Data Table meets this on every column move: each row's
|
|
6515
|
+
checkbox is named by the first column, so reordering renames every one.
|
|
6516
|
+
|
|
6517
|
+
A reactive property on the attribute, which is the one way Lit observes
|
|
6518
|
+
one. Overriding `observedAttributes` in a mixin compiled `this` to the
|
|
6519
|
+
mixin's own class, so every field observed only this mixin's attributes
|
|
6520
|
+
and dropped its own. Not reflected: the attribute is the consumer's. */
|
|
6521
|
+
"aria-label"?: (HelixHeadlessFileInput["namedBy"]) | undefined;
|
|
6522
|
+
/** The name a screen reader says for the field where it shows no label, as
|
|
6523
|
+
the platform's `aria-label`. It is drawn as a label and clipped, so it
|
|
6524
|
+
names the control inside, and a new one renders at once.
|
|
6525
|
+
|
|
6526
|
+
**An `aria-label` is read when the field renders, and nothing else would
|
|
6527
|
+
render it again.** It is the platform's attribute and no property of this
|
|
6528
|
+
element's, so writing a new one scheduled no update and the label kept
|
|
6529
|
+
the old words. Data Table meets this on every column move: each row's
|
|
6530
|
+
checkbox is named by the first column, so reordering renames every one.
|
|
6531
|
+
|
|
6532
|
+
A reactive property on the attribute, which is the one way Lit observes
|
|
6533
|
+
one. Overriding `observedAttributes` in a mixin compiled `this` to the
|
|
6534
|
+
mixin's own class, so every field observed only this mixin's attributes
|
|
6535
|
+
and dropped its own. Not reflected: the attribute is the consumer's. */
|
|
6536
|
+
namedBy?: (HelixHeadlessFileInput["namedBy"]) | undefined;
|
|
6270
6537
|
/** The validation message shown under the control. It replaces the
|
|
6271
6538
|
browser's message. */
|
|
6272
6539
|
feedback?: (HelixHeadlessFileInput["feedback"]) | undefined;
|
|
@@ -6641,8 +6908,36 @@ asking it meant. Writing always applies; `<helix-input value="x">` is the
|
|
|
6641
6908
|
same statement in markup, and `default-value` is how markup seeds a value
|
|
6642
6909
|
a reset should return to. */
|
|
6643
6910
|
value?: (HelixHeadlessFilterInput["value"]) | undefined;
|
|
6644
|
-
/**
|
|
6645
|
-
|
|
6911
|
+
/** The name a screen reader says for the field where it shows no label, as
|
|
6912
|
+
the platform's `aria-label`. It is drawn as a label and clipped, so it
|
|
6913
|
+
names the control inside, and a new one renders at once.
|
|
6914
|
+
|
|
6915
|
+
**An `aria-label` is read when the field renders, and nothing else would
|
|
6916
|
+
render it again.** It is the platform's attribute and no property of this
|
|
6917
|
+
element's, so writing a new one scheduled no update and the label kept
|
|
6918
|
+
the old words. Data Table meets this on every column move: each row's
|
|
6919
|
+
checkbox is named by the first column, so reordering renames every one.
|
|
6920
|
+
|
|
6921
|
+
A reactive property on the attribute, which is the one way Lit observes
|
|
6922
|
+
one. Overriding `observedAttributes` in a mixin compiled `this` to the
|
|
6923
|
+
mixin's own class, so every field observed only this mixin's attributes
|
|
6924
|
+
and dropped its own. Not reflected: the attribute is the consumer's. */
|
|
6925
|
+
"aria-label"?: (HelixHeadlessFilterInput["namedBy"]) | undefined;
|
|
6926
|
+
/** The name a screen reader says for the field where it shows no label, as
|
|
6927
|
+
the platform's `aria-label`. It is drawn as a label and clipped, so it
|
|
6928
|
+
names the control inside, and a new one renders at once.
|
|
6929
|
+
|
|
6930
|
+
**An `aria-label` is read when the field renders, and nothing else would
|
|
6931
|
+
render it again.** It is the platform's attribute and no property of this
|
|
6932
|
+
element's, so writing a new one scheduled no update and the label kept
|
|
6933
|
+
the old words. Data Table meets this on every column move: each row's
|
|
6934
|
+
checkbox is named by the first column, so reordering renames every one.
|
|
6935
|
+
|
|
6936
|
+
A reactive property on the attribute, which is the one way Lit observes
|
|
6937
|
+
one. Overriding `observedAttributes` in a mixin compiled `this` to the
|
|
6938
|
+
mixin's own class, so every field observed only this mixin's attributes
|
|
6939
|
+
and dropped its own. Not reflected: the attribute is the consumer's. */
|
|
6940
|
+
namedBy?: (HelixHeadlessFilterInput["namedBy"]) | undefined;
|
|
6646
6941
|
/** The validation message shown under the control. It replaces the
|
|
6647
6942
|
browser's message. */
|
|
6648
6943
|
feedback?: (HelixHeadlessFilterInput["feedback"]) | undefined;
|
|
@@ -6903,6 +7198,12 @@ written in the locale, and each language writes the forms it has. */
|
|
|
6903
7198
|
/** How many links from the selected note to show, for its local graph. Unset
|
|
6904
7199
|
shows every note. The list holds what the drawing shows. */
|
|
6905
7200
|
depth?: (HelixHeadlessGraph["depth"]) | undefined;
|
|
7201
|
+
/** What the panel shows when the list holds no notes: the graph has none, or
|
|
7202
|
+
a search or the legend hid them all. A slotted `empty` replaces it. */
|
|
7203
|
+
"empty-label"?: (HelixHeadlessGraph["emptyLabel"]) | undefined;
|
|
7204
|
+
/** What the panel shows when the list holds no notes: the graph has none, or
|
|
7205
|
+
a search or the legend hid them all. A slotted `empty` replaces it. */
|
|
7206
|
+
emptyLabel?: (HelixHeadlessGraph["emptyLabel"]) | undefined;
|
|
6906
7207
|
/** The graph's name where `label` is empty and the host has no
|
|
6907
7208
|
`aria-label`. */
|
|
6908
7209
|
"fallback-label"?: (HelixHeadlessGraph["fallbackLabel"]) | undefined;
|
|
@@ -6959,6 +7260,14 @@ such as at the top of a page, where the drawing takes the whole frame. */
|
|
|
6959
7260
|
"notes-label"?: (HelixHeadlessGraph["notesLabel"]) | undefined;
|
|
6960
7261
|
/** The list's name, read by screen readers, and the name of the button that opens it with `no-panel`. */
|
|
6961
7262
|
notesLabel?: (HelixHeadlessGraph["notesLabel"]) | undefined;
|
|
7263
|
+
/** What a screen reader calls the graph in place of its role, after its
|
|
7264
|
+
name: "Research notes, graph". Said only where the graph has a name of its
|
|
7265
|
+
own, since the fallback name is the same word. Empty leaves the role. */
|
|
7266
|
+
"role-label"?: (HelixHeadlessGraph["roleLabel"]) | undefined;
|
|
7267
|
+
/** What a screen reader calls the graph in place of its role, after its
|
|
7268
|
+
name: "Research notes, graph". Said only where the graph has a name of its
|
|
7269
|
+
own, since the fallback name is the same word. Empty leaves the role. */
|
|
7270
|
+
roleLabel?: (HelixHeadlessGraph["roleLabel"]) | undefined;
|
|
6962
7271
|
/** The search field's name. */
|
|
6963
7272
|
"search-label"?: (HelixHeadlessGraph["searchLabel"]) | undefined;
|
|
6964
7273
|
/** The search field's name. */
|
|
@@ -7878,8 +8187,36 @@ asking it meant. Writing always applies; `<helix-input value="x">` is the
|
|
|
7878
8187
|
same statement in markup, and `default-value` is how markup seeds a value
|
|
7879
8188
|
a reset should return to. */
|
|
7880
8189
|
value?: (HelixHeadlessInput["value"]) | undefined;
|
|
7881
|
-
/**
|
|
7882
|
-
|
|
8190
|
+
/** The name a screen reader says for the field where it shows no label, as
|
|
8191
|
+
the platform's `aria-label`. It is drawn as a label and clipped, so it
|
|
8192
|
+
names the control inside, and a new one renders at once.
|
|
8193
|
+
|
|
8194
|
+
**An `aria-label` is read when the field renders, and nothing else would
|
|
8195
|
+
render it again.** It is the platform's attribute and no property of this
|
|
8196
|
+
element's, so writing a new one scheduled no update and the label kept
|
|
8197
|
+
the old words. Data Table meets this on every column move: each row's
|
|
8198
|
+
checkbox is named by the first column, so reordering renames every one.
|
|
8199
|
+
|
|
8200
|
+
A reactive property on the attribute, which is the one way Lit observes
|
|
8201
|
+
one. Overriding `observedAttributes` in a mixin compiled `this` to the
|
|
8202
|
+
mixin's own class, so every field observed only this mixin's attributes
|
|
8203
|
+
and dropped its own. Not reflected: the attribute is the consumer's. */
|
|
8204
|
+
"aria-label"?: (HelixHeadlessInput["namedBy"]) | undefined;
|
|
8205
|
+
/** The name a screen reader says for the field where it shows no label, as
|
|
8206
|
+
the platform's `aria-label`. It is drawn as a label and clipped, so it
|
|
8207
|
+
names the control inside, and a new one renders at once.
|
|
8208
|
+
|
|
8209
|
+
**An `aria-label` is read when the field renders, and nothing else would
|
|
8210
|
+
render it again.** It is the platform's attribute and no property of this
|
|
8211
|
+
element's, so writing a new one scheduled no update and the label kept
|
|
8212
|
+
the old words. Data Table meets this on every column move: each row's
|
|
8213
|
+
checkbox is named by the first column, so reordering renames every one.
|
|
8214
|
+
|
|
8215
|
+
A reactive property on the attribute, which is the one way Lit observes
|
|
8216
|
+
one. Overriding `observedAttributes` in a mixin compiled `this` to the
|
|
8217
|
+
mixin's own class, so every field observed only this mixin's attributes
|
|
8218
|
+
and dropped its own. Not reflected: the attribute is the consumer's. */
|
|
8219
|
+
namedBy?: (HelixHeadlessInput["namedBy"]) | undefined;
|
|
7883
8220
|
/** The validation message shown under the control. It replaces the
|
|
7884
8221
|
browser's message. */
|
|
7885
8222
|
feedback?: (HelixHeadlessInput["feedback"]) | undefined;
|
|
@@ -8614,6 +8951,9 @@ export type HelixHeadlessListHelixBeforeChangeElementEvent =
|
|
|
8614
8951
|
/** `helix-before-reorder` event type */
|
|
8615
8952
|
export type HelixHeadlessListHelixBeforeReorderElementEvent =
|
|
8616
8953
|
HelixHeadlessListElementEvent<HelixBeforeReorderEvent>;
|
|
8954
|
+
/** `helix-load-more` event type */
|
|
8955
|
+
export type HelixHeadlessListHelixLoadMoreElementEvent =
|
|
8956
|
+
HelixHeadlessListElementEvent<HelixLoadMoreEvent>;
|
|
8617
8957
|
/** `helix-reorder` event type */
|
|
8618
8958
|
export type HelixHeadlessListHelixReorderElementEvent =
|
|
8619
8959
|
HelixHeadlessListElementEvent<HelixReorderEvent>;
|
|
@@ -8629,6 +8969,12 @@ refused, in a `reorderable` list. */
|
|
|
8629
8969
|
"dropped-label"?: (HelixHeadlessList["droppedLabel"]) | undefined;
|
|
8630
8970
|
/** What screen readers hear when a row is dropped, in a `reorderable` list. */
|
|
8631
8971
|
droppedLabel?: (HelixHeadlessList["droppedLabel"]) | undefined;
|
|
8972
|
+
/** The text of the row shown while the list has no rows, where the `empty`
|
|
8973
|
+
slot is empty. Empty, the default, shows no row. */
|
|
8974
|
+
"empty-label"?: (HelixHeadlessList["emptyLabel"]) | undefined;
|
|
8975
|
+
/** The text of the row shown while the list has no rows, where the `empty`
|
|
8976
|
+
slot is empty. Empty, the default, shows no row. */
|
|
8977
|
+
emptyLabel?: (HelixHeadlessList["emptyLabel"]) | undefined;
|
|
8632
8978
|
/** The kind of list, which follows from the content.
|
|
8633
8979
|
|
|
8634
8980
|
On the headless tier because it is meaning rather than decoration, the same
|
|
@@ -8652,6 +8998,19 @@ has to survive with the stylesheet turned off.
|
|
|
8652
8998
|
kind?: (HelixHeadlessList["kind"]) | undefined;
|
|
8653
8999
|
/** The list's name, read by screen readers. */
|
|
8654
9000
|
label?: (HelixHeadlessList["label"]) | undefined;
|
|
9001
|
+
/** Marks the list as busy fetching more rows, and draws a row after the last
|
|
9002
|
+
that says so. The list asks for no more while it is set. */
|
|
9003
|
+
loading?: (HelixHeadlessList["loading"]) | undefined;
|
|
9004
|
+
/** The text of the row drawn while `loading` is set, where the `loading` slot is empty. */
|
|
9005
|
+
"loading-label"?: (HelixHeadlessList["loadingLabel"]) | undefined;
|
|
9006
|
+
/** The text of the row drawn while `loading` is set, where the `loading` slot is empty. */
|
|
9007
|
+
loadingLabel?: (HelixHeadlessList["loadingLabel"]) | undefined;
|
|
9008
|
+
/** Sends `helix-load-more` once the end of the list comes within a screen of
|
|
9009
|
+
view, so you can add the next rows as a reader nears them. */
|
|
9010
|
+
"load-more"?: (HelixHeadlessList["loadMore"]) | undefined;
|
|
9011
|
+
/** Sends `helix-load-more` once the end of the list comes within a screen of
|
|
9012
|
+
view, so you can add the next rows as a reader nears them. */
|
|
9013
|
+
loadMore?: (HelixHeadlessList["loadMore"]) | undefined;
|
|
8655
9014
|
/** What screen readers hear each time an arrow key moves a held row, in a
|
|
8656
9015
|
`reorderable` list. `{name}` is the row's words, `{position}` the place it
|
|
8657
9016
|
would go, counting from 1, and `{count}` the number of rows. */
|
|
@@ -8707,7 +9066,7 @@ consumer would have written on an `<ol>`.
|
|
|
8707
9066
|
`type` is only `list-style-type`. `start` and `reversed` move the count
|
|
8708
9067
|
itself. */
|
|
8709
9068
|
type?: (HelixHeadlessList["type"]) | undefined;
|
|
8710
|
-
/** The selected rows' values, separated by commas, in a list that selects.
|
|
9069
|
+
/** The selected rows' values, separated by commas with no spaces, such as `a,c`, in a list that selects.
|
|
8711
9070
|
|
|
8712
9071
|
Set it to start with rows selected. A row's value is its `value`, or its
|
|
8713
9072
|
words where it has none. */
|
|
@@ -8723,6 +9082,8 @@ export type HelixHeadlessListVueEvents = {
|
|
|
8723
9082
|
"helix-before-change": HelixHeadlessListHelixBeforeChangeElementEvent;
|
|
8724
9083
|
/** Fired when a row is dropped at a new place, in a `reorderable` list, with every row's value in the new order. Cancelable: cancel it to keep the row where it is. */
|
|
8725
9084
|
"helix-before-reorder": HelixHeadlessListHelixBeforeReorderElementEvent;
|
|
9085
|
+
/** Fired, in a list with `load-more`, when the end of the list comes within a screen of view, once for each number of rows. */
|
|
9086
|
+
"helix-load-more": HelixHeadlessListHelixLoadMoreElementEvent;
|
|
8726
9087
|
/** Fired after `helix-before-reorder` when nobody canceled it. Move your rows to the order in `keys`. Cancelable: cancel it to say the move did not happen. */
|
|
8727
9088
|
"helix-reorder": HelixHeadlessListHelixReorderElementEvent;
|
|
8728
9089
|
};
|
|
@@ -8921,8 +9282,36 @@ asking it meant. Writing always applies; `<helix-input value="x">` is the
|
|
|
8921
9282
|
same statement in markup, and `default-value` is how markup seeds a value
|
|
8922
9283
|
a reset should return to. */
|
|
8923
9284
|
value?: (HelixHeadlessListbox["value"]) | undefined;
|
|
8924
|
-
/**
|
|
8925
|
-
|
|
9285
|
+
/** The name a screen reader says for the field where it shows no label, as
|
|
9286
|
+
the platform's `aria-label`. It is drawn as a label and clipped, so it
|
|
9287
|
+
names the control inside, and a new one renders at once.
|
|
9288
|
+
|
|
9289
|
+
**An `aria-label` is read when the field renders, and nothing else would
|
|
9290
|
+
render it again.** It is the platform's attribute and no property of this
|
|
9291
|
+
element's, so writing a new one scheduled no update and the label kept
|
|
9292
|
+
the old words. Data Table meets this on every column move: each row's
|
|
9293
|
+
checkbox is named by the first column, so reordering renames every one.
|
|
9294
|
+
|
|
9295
|
+
A reactive property on the attribute, which is the one way Lit observes
|
|
9296
|
+
one. Overriding `observedAttributes` in a mixin compiled `this` to the
|
|
9297
|
+
mixin's own class, so every field observed only this mixin's attributes
|
|
9298
|
+
and dropped its own. Not reflected: the attribute is the consumer's. */
|
|
9299
|
+
"aria-label"?: (HelixHeadlessListbox["namedBy"]) | undefined;
|
|
9300
|
+
/** The name a screen reader says for the field where it shows no label, as
|
|
9301
|
+
the platform's `aria-label`. It is drawn as a label and clipped, so it
|
|
9302
|
+
names the control inside, and a new one renders at once.
|
|
9303
|
+
|
|
9304
|
+
**An `aria-label` is read when the field renders, and nothing else would
|
|
9305
|
+
render it again.** It is the platform's attribute and no property of this
|
|
9306
|
+
element's, so writing a new one scheduled no update and the label kept
|
|
9307
|
+
the old words. Data Table meets this on every column move: each row's
|
|
9308
|
+
checkbox is named by the first column, so reordering renames every one.
|
|
9309
|
+
|
|
9310
|
+
A reactive property on the attribute, which is the one way Lit observes
|
|
9311
|
+
one. Overriding `observedAttributes` in a mixin compiled `this` to the
|
|
9312
|
+
mixin's own class, so every field observed only this mixin's attributes
|
|
9313
|
+
and dropped its own. Not reflected: the attribute is the consumer's. */
|
|
9314
|
+
namedBy?: (HelixHeadlessListbox["namedBy"]) | undefined;
|
|
8926
9315
|
/** The validation message shown under the control. It replaces the
|
|
8927
9316
|
browser's message. */
|
|
8928
9317
|
feedback?: (HelixHeadlessListbox["feedback"]) | undefined;
|
|
@@ -9456,6 +9845,14 @@ the standard, themed map. The layers menu chooses it. */
|
|
|
9456
9845
|
`connectMap` keeps it current, and the 3D button is pressed while it is
|
|
9457
9846
|
above `0`. */
|
|
9458
9847
|
pitch?: (HelixHeadlessMap["pitch"]) | undefined;
|
|
9848
|
+
/** What a screen reader calls the map in place of its role, after its
|
|
9849
|
+
name: "Edinburgh, map". Said only where the map has a name of its
|
|
9850
|
+
own, since the fallback name is the same word. Empty leaves the role. */
|
|
9851
|
+
"role-label"?: (HelixHeadlessMap["roleLabel"]) | undefined;
|
|
9852
|
+
/** What a screen reader calls the map in place of its role, after its
|
|
9853
|
+
name: "Edinburgh, map". Said only where the map has a name of its
|
|
9854
|
+
own, since the fallback name is the same word. Empty leaves the role. */
|
|
9855
|
+
roleLabel?: (HelixHeadlessMap["roleLabel"]) | undefined;
|
|
9459
9856
|
/** The rotate left button's label. */
|
|
9460
9857
|
"rotate-left-label"?: (HelixHeadlessMap["rotateLeftLabel"]) | undefined;
|
|
9461
9858
|
/** The rotate left button's label. */
|
|
@@ -9820,8 +10217,24 @@ narrow exception the server specs describe covers a mirror that can only
|
|
|
9820
10217
|
become true long after hydration, and a viewport measured before the first
|
|
9821
10218
|
paint is the opposite case. See `MixinControllerOpen` on `open`. */
|
|
9822
10219
|
bandBelow?: (HelixHeadlessMegamenu["bandBelow"]) | undefined;
|
|
10220
|
+
/** How long a pointer leaving the trigger and the panel waits before the panel
|
|
10221
|
+
closes, in milliseconds. The pointer needs the time to cross from the
|
|
10222
|
+
trigger to the panel. */
|
|
10223
|
+
"close-delay"?: (HelixHeadlessMegamenu["closeDelay"] | `${number}`) | undefined;
|
|
10224
|
+
/** How long a pointer leaving the trigger and the panel waits before the panel
|
|
10225
|
+
closes, in milliseconds. The pointer needs the time to cross from the
|
|
10226
|
+
trigger to the panel. */
|
|
10227
|
+
closeDelay?: (HelixHeadlessMegamenu["closeDelay"]) | undefined;
|
|
9823
10228
|
/** The section's name, used for the default trigger and the panel. */
|
|
9824
10229
|
label?: (HelixHeadlessMegamenu["label"]) | undefined;
|
|
10230
|
+
/** How long a pointer rests on the trigger before the panel opens, in
|
|
10231
|
+
milliseconds, under `open-on="hover"`. A pointer crossing the bar on its
|
|
10232
|
+
way somewhere else opens nothing. */
|
|
10233
|
+
"open-delay"?: (HelixHeadlessMegamenu["openDelay"] | `${number}`) | undefined;
|
|
10234
|
+
/** How long a pointer rests on the trigger before the panel opens, in
|
|
10235
|
+
milliseconds, under `open-on="hover"`. A pointer crossing the bar on its
|
|
10236
|
+
way somewhere else opens nothing. */
|
|
10237
|
+
openDelay?: (HelixHeadlessMegamenu["openDelay"]) | undefined;
|
|
9825
10238
|
/** Whether hovering over the trigger opens the panel (`hover`), or only a press
|
|
9826
10239
|
does (`click`).
|
|
9827
10240
|
|
|
@@ -9838,6 +10251,10 @@ the trigger, and it is the default because that is what a navigation bar
|
|
|
9838
10251
|
does. `click` is for a trigger that does something else as well, or a panel
|
|
9839
10252
|
heavy enough that opening it on the way past is rude. */
|
|
9840
10253
|
openOn?: (HelixHeadlessMegamenu["openOn"]) | undefined;
|
|
10254
|
+
/** The side of the trigger a card panel opens on, when there is room. It
|
|
10255
|
+
moves if that side does not fit. A band ignores it, since a band spans the
|
|
10256
|
+
page under its bar. */
|
|
10257
|
+
placement?: (HelixHeadlessMegamenu["placement"]) | undefined;
|
|
9841
10258
|
/** Whether the panel is a card under the trigger or a band across the page.
|
|
9842
10259
|
|
|
9843
10260
|
The resting one is the card, hanging off the trigger and as wide as it
|
|
@@ -10005,12 +10422,29 @@ Empty by default, which names the surface by its trigger, so a menu opened
|
|
|
10005
10422
|
from "Actions" is announced as "Actions". An `aria-label` or
|
|
10006
10423
|
`aria-labelledby` on the host names it too, and wins over both. */
|
|
10007
10424
|
label?: (HelixHeadlessMenu["label"]) | undefined;
|
|
10425
|
+
/** The description a trigger gives under `open-on="long-press"`, saying how
|
|
10426
|
+
to open the menu. Translate it with the rest of your interface. */
|
|
10427
|
+
"long-press-label"?: (HelixHeadlessMenu["longPressLabel"]) | undefined;
|
|
10428
|
+
/** The description a trigger gives under `open-on="long-press"`, saying how
|
|
10429
|
+
to open the menu. Translate it with the rest of your interface. */
|
|
10430
|
+
longPressLabel?: (HelixHeadlessMenu["longPressLabel"]) | undefined;
|
|
10008
10431
|
/** Space between the trigger and the surface, in pixels. */
|
|
10009
10432
|
offset?: (HelixHeadlessMenu["offset"]) | undefined;
|
|
10433
|
+
/** What opens the menu from its trigger. `long-press` leaves a press to the
|
|
10434
|
+
trigger's own action and opens the menu on a press held for half a second,
|
|
10435
|
+
or on Alt+Down or Alt+Up. */
|
|
10436
|
+
"open-on"?: (HelixHeadlessMenu["openOn"]) | undefined;
|
|
10437
|
+
/** What opens the menu from its trigger. `long-press` leaves a press to the
|
|
10438
|
+
trigger's own action and opens the menu on a press held for half a second,
|
|
10439
|
+
or on Alt+Down or Alt+Up. */
|
|
10440
|
+
openOn?: (HelixHeadlessMenu["openOn"]) | undefined;
|
|
10010
10441
|
/** The side the menu opens on, when there is room.
|
|
10011
10442
|
|
|
10012
10443
|
It moves if that side does not fit. */
|
|
10013
10444
|
placement?: (HelixHeadlessMenu["placement"]) | undefined;
|
|
10445
|
+
/** How a submenu opens. `drill` shows it in place of the page showing, with
|
|
10446
|
+
a way back. `flyout` opens it in a panel of its own beside its row. */
|
|
10447
|
+
submenus?: (HelixHeadlessMenu["submenus"]) | undefined;
|
|
10014
10448
|
/** The text shown and announced when there are no rows and none are loading. */
|
|
10015
10449
|
"empty-text"?: (HelixHeadlessMenu["emptyText"]) | undefined;
|
|
10016
10450
|
/** The text shown and announced when there are no rows and none are loading. */
|
|
@@ -10418,6 +10852,12 @@ export type HelixHeadlessNotificationsHelixReadElementEvent =
|
|
|
10418
10852
|
HelixHeadlessNotificationsElementEvent<HelixReadEvent>;
|
|
10419
10853
|
|
|
10420
10854
|
export type HelixHeadlessNotificationsVueProps = {
|
|
10855
|
+
/** What the feed says when unread notifications arrive, with `{count}` the
|
|
10856
|
+
number of them. Empty it to say nothing. */
|
|
10857
|
+
"arrived-label"?: (HelixHeadlessNotifications["arrivedLabel"]) | undefined;
|
|
10858
|
+
/** What the feed says when unread notifications arrive, with `{count}` the
|
|
10859
|
+
number of them. Empty it to say nothing. */
|
|
10860
|
+
arrivedLabel?: (HelixHeadlessNotifications["arrivedLabel"]) | undefined;
|
|
10421
10861
|
/** The region's name where `label` is empty. */
|
|
10422
10862
|
"fallback-label"?: (HelixHeadlessNotifications["fallbackLabel"]) | undefined;
|
|
10423
10863
|
/** The region's name where `label` is empty. */
|
|
@@ -10593,6 +11033,20 @@ filled in, written in the locale. */
|
|
|
10593
11033
|
readonly?: (HelixHeadlessNumberInput["readOnly"]) | undefined;
|
|
10594
11034
|
/** Prevents editing. The value is still submitted with the form. */
|
|
10595
11035
|
readOnly?: (HelixHeadlessNumberInput["readOnly"]) | undefined;
|
|
11036
|
+
/** The words screen readers announce for the field's role, set as its
|
|
11037
|
+
`aria-roledescription`. Translate it with the rest of your text, or empty
|
|
11038
|
+
it to leave the role as `spinbutton`.
|
|
11039
|
+
|
|
11040
|
+
Never written on iOS and iPadOS, where a role description stops VoiceOver
|
|
11041
|
+
saying that the field is required. */
|
|
11042
|
+
"role-label"?: (HelixHeadlessNumberInput["roleLabel"]) | undefined;
|
|
11043
|
+
/** The words screen readers announce for the field's role, set as its
|
|
11044
|
+
`aria-roledescription`. Translate it with the rest of your text, or empty
|
|
11045
|
+
it to leave the role as `spinbutton`.
|
|
11046
|
+
|
|
11047
|
+
Never written on iOS and iPadOS, where a role description stops VoiceOver
|
|
11048
|
+
saying that the field is required. */
|
|
11049
|
+
roleLabel?: (HelixHeadlessNumberInput["roleLabel"]) | undefined;
|
|
10596
11050
|
/** Makes the label a grip that changes the value when it is dragged.
|
|
10597
11051
|
|
|
10598
11052
|
The label is what is dragged, so this adds no chrome at all. Still opt-in,
|
|
@@ -10652,8 +11106,36 @@ asking it meant. Writing always applies; `<helix-input value="x">` is the
|
|
|
10652
11106
|
same statement in markup, and `default-value` is how markup seeds a value
|
|
10653
11107
|
a reset should return to. */
|
|
10654
11108
|
value?: (HelixHeadlessNumberInput["value"]) | undefined;
|
|
10655
|
-
/**
|
|
10656
|
-
|
|
11109
|
+
/** The name a screen reader says for the field where it shows no label, as
|
|
11110
|
+
the platform's `aria-label`. It is drawn as a label and clipped, so it
|
|
11111
|
+
names the control inside, and a new one renders at once.
|
|
11112
|
+
|
|
11113
|
+
**An `aria-label` is read when the field renders, and nothing else would
|
|
11114
|
+
render it again.** It is the platform's attribute and no property of this
|
|
11115
|
+
element's, so writing a new one scheduled no update and the label kept
|
|
11116
|
+
the old words. Data Table meets this on every column move: each row's
|
|
11117
|
+
checkbox is named by the first column, so reordering renames every one.
|
|
11118
|
+
|
|
11119
|
+
A reactive property on the attribute, which is the one way Lit observes
|
|
11120
|
+
one. Overriding `observedAttributes` in a mixin compiled `this` to the
|
|
11121
|
+
mixin's own class, so every field observed only this mixin's attributes
|
|
11122
|
+
and dropped its own. Not reflected: the attribute is the consumer's. */
|
|
11123
|
+
"aria-label"?: (HelixHeadlessNumberInput["namedBy"]) | undefined;
|
|
11124
|
+
/** The name a screen reader says for the field where it shows no label, as
|
|
11125
|
+
the platform's `aria-label`. It is drawn as a label and clipped, so it
|
|
11126
|
+
names the control inside, and a new one renders at once.
|
|
11127
|
+
|
|
11128
|
+
**An `aria-label` is read when the field renders, and nothing else would
|
|
11129
|
+
render it again.** It is the platform's attribute and no property of this
|
|
11130
|
+
element's, so writing a new one scheduled no update and the label kept
|
|
11131
|
+
the old words. Data Table meets this on every column move: each row's
|
|
11132
|
+
checkbox is named by the first column, so reordering renames every one.
|
|
11133
|
+
|
|
11134
|
+
A reactive property on the attribute, which is the one way Lit observes
|
|
11135
|
+
one. Overriding `observedAttributes` in a mixin compiled `this` to the
|
|
11136
|
+
mixin's own class, so every field observed only this mixin's attributes
|
|
11137
|
+
and dropped its own. Not reflected: the attribute is the consumer's. */
|
|
11138
|
+
namedBy?: (HelixHeadlessNumberInput["namedBy"]) | undefined;
|
|
10657
11139
|
/** The validation message shown under the control. It replaces the
|
|
10658
11140
|
browser's message. */
|
|
10659
11141
|
feedback?: (HelixHeadlessNumberInput["feedback"]) | undefined;
|
|
@@ -10899,6 +11381,14 @@ needs a height, which is a stylesheet rule reading this attribute. */
|
|
|
10899
11381
|
Writing opens exactly these and closes every other, keeping the active row
|
|
10900
11382
|
where it stays visible. A property, never an attribute. */
|
|
10901
11383
|
expanded?: (HelixHeadlessObjectInspector["expanded"]) | undefined;
|
|
11384
|
+
/** Draws an entry's value your way, given the value and its entry. Set it as
|
|
11385
|
+
a property.
|
|
11386
|
+
|
|
11387
|
+
It returns what Lit renders: a template from `html`, a string, or a DOM
|
|
11388
|
+
node. `undefined` draws the value as the inspector does, so a function can
|
|
11389
|
+
draw some entries and leave the rest, such as only the strings under
|
|
11390
|
+
`/links`. */
|
|
11391
|
+
renderValue?: (HelixHeadlessObjectInspector["renderValue"]) | undefined;
|
|
10902
11392
|
/** The value to show, when your code already holds it as an object.
|
|
10903
11393
|
|
|
10904
11394
|
Takes precedence over `for`. Anything JSON can say is drawn; anything else
|
|
@@ -11037,6 +11527,15 @@ simply the accessible name.
|
|
|
11037
11527
|
`<option label>` does: written the platform's way, a select listed a row of
|
|
11038
11528
|
nothing for every choice. */
|
|
11039
11529
|
label?: (HelixHeadlessOption["label"]) | undefined;
|
|
11530
|
+
/** The page of commands this option opens, by name, where choosing it would
|
|
11531
|
+
otherwise run it.
|
|
11532
|
+
|
|
11533
|
+
Declared here and acted on by whatever owns the list, as `alternate` is.
|
|
11534
|
+
`Command` is the only owner that reads it: choosing the option shows the
|
|
11535
|
+
commands slotted as `page:` and the name, such as `slot="page:theme"`,
|
|
11536
|
+
and Backspace in an empty filter goes back. Empty is an option that opens
|
|
11537
|
+
nothing, which is nearly every option. */
|
|
11538
|
+
opens?: (HelixHeadlessOption["opens"]) | undefined;
|
|
11040
11539
|
/** The link's `rel`. Set it whenever you set `target="_blank"`. */
|
|
11041
11540
|
rel?: (HelixHeadlessOption["rel"]) | undefined;
|
|
11042
11541
|
/** Whether this choice is currently chosen.
|
|
@@ -11516,8 +12015,36 @@ asking it meant. Writing always applies; `<helix-input value="x">` is the
|
|
|
11516
12015
|
same statement in markup, and `default-value` is how markup seeds a value
|
|
11517
12016
|
a reset should return to. */
|
|
11518
12017
|
value?: (HelixHeadlessPinInput["value"]) | undefined;
|
|
11519
|
-
/**
|
|
11520
|
-
|
|
12018
|
+
/** The name a screen reader says for the field where it shows no label, as
|
|
12019
|
+
the platform's `aria-label`. It is drawn as a label and clipped, so it
|
|
12020
|
+
names the control inside, and a new one renders at once.
|
|
12021
|
+
|
|
12022
|
+
**An `aria-label` is read when the field renders, and nothing else would
|
|
12023
|
+
render it again.** It is the platform's attribute and no property of this
|
|
12024
|
+
element's, so writing a new one scheduled no update and the label kept
|
|
12025
|
+
the old words. Data Table meets this on every column move: each row's
|
|
12026
|
+
checkbox is named by the first column, so reordering renames every one.
|
|
12027
|
+
|
|
12028
|
+
A reactive property on the attribute, which is the one way Lit observes
|
|
12029
|
+
one. Overriding `observedAttributes` in a mixin compiled `this` to the
|
|
12030
|
+
mixin's own class, so every field observed only this mixin's attributes
|
|
12031
|
+
and dropped its own. Not reflected: the attribute is the consumer's. */
|
|
12032
|
+
"aria-label"?: (HelixHeadlessPinInput["namedBy"]) | undefined;
|
|
12033
|
+
/** The name a screen reader says for the field where it shows no label, as
|
|
12034
|
+
the platform's `aria-label`. It is drawn as a label and clipped, so it
|
|
12035
|
+
names the control inside, and a new one renders at once.
|
|
12036
|
+
|
|
12037
|
+
**An `aria-label` is read when the field renders, and nothing else would
|
|
12038
|
+
render it again.** It is the platform's attribute and no property of this
|
|
12039
|
+
element's, so writing a new one scheduled no update and the label kept
|
|
12040
|
+
the old words. Data Table meets this on every column move: each row's
|
|
12041
|
+
checkbox is named by the first column, so reordering renames every one.
|
|
12042
|
+
|
|
12043
|
+
A reactive property on the attribute, which is the one way Lit observes
|
|
12044
|
+
one. Overriding `observedAttributes` in a mixin compiled `this` to the
|
|
12045
|
+
mixin's own class, so every field observed only this mixin's attributes
|
|
12046
|
+
and dropped its own. Not reflected: the attribute is the consumer's. */
|
|
12047
|
+
namedBy?: (HelixHeadlessPinInput["namedBy"]) | undefined;
|
|
11521
12048
|
/** The validation message shown under the control. It replaces the
|
|
11522
12049
|
browser's message. */
|
|
11523
12050
|
feedback?: (HelixHeadlessPinInput["feedback"]) | undefined;
|
|
@@ -11937,8 +12464,36 @@ asking it meant. Writing always applies; `<helix-input value="x">` is the
|
|
|
11937
12464
|
same statement in markup, and `default-value` is how markup seeds a value
|
|
11938
12465
|
a reset should return to. */
|
|
11939
12466
|
value?: (HelixHeadlessRadioGroup["value"]) | undefined;
|
|
11940
|
-
/**
|
|
11941
|
-
|
|
12467
|
+
/** The name a screen reader says for the field where it shows no label, as
|
|
12468
|
+
the platform's `aria-label`. It is drawn as a label and clipped, so it
|
|
12469
|
+
names the control inside, and a new one renders at once.
|
|
12470
|
+
|
|
12471
|
+
**An `aria-label` is read when the field renders, and nothing else would
|
|
12472
|
+
render it again.** It is the platform's attribute and no property of this
|
|
12473
|
+
element's, so writing a new one scheduled no update and the label kept
|
|
12474
|
+
the old words. Data Table meets this on every column move: each row's
|
|
12475
|
+
checkbox is named by the first column, so reordering renames every one.
|
|
12476
|
+
|
|
12477
|
+
A reactive property on the attribute, which is the one way Lit observes
|
|
12478
|
+
one. Overriding `observedAttributes` in a mixin compiled `this` to the
|
|
12479
|
+
mixin's own class, so every field observed only this mixin's attributes
|
|
12480
|
+
and dropped its own. Not reflected: the attribute is the consumer's. */
|
|
12481
|
+
"aria-label"?: (HelixHeadlessRadioGroup["namedBy"]) | undefined;
|
|
12482
|
+
/** The name a screen reader says for the field where it shows no label, as
|
|
12483
|
+
the platform's `aria-label`. It is drawn as a label and clipped, so it
|
|
12484
|
+
names the control inside, and a new one renders at once.
|
|
12485
|
+
|
|
12486
|
+
**An `aria-label` is read when the field renders, and nothing else would
|
|
12487
|
+
render it again.** It is the platform's attribute and no property of this
|
|
12488
|
+
element's, so writing a new one scheduled no update and the label kept
|
|
12489
|
+
the old words. Data Table meets this on every column move: each row's
|
|
12490
|
+
checkbox is named by the first column, so reordering renames every one.
|
|
12491
|
+
|
|
12492
|
+
A reactive property on the attribute, which is the one way Lit observes
|
|
12493
|
+
one. Overriding `observedAttributes` in a mixin compiled `this` to the
|
|
12494
|
+
mixin's own class, so every field observed only this mixin's attributes
|
|
12495
|
+
and dropped its own. Not reflected: the attribute is the consumer's. */
|
|
12496
|
+
namedBy?: (HelixHeadlessRadioGroup["namedBy"]) | undefined;
|
|
11942
12497
|
/** The validation message shown under the control. It replaces the
|
|
11943
12498
|
browser's message. */
|
|
11944
12499
|
feedback?: (HelixHeadlessRadioGroup["feedback"]) | undefined;
|
|
@@ -12219,8 +12774,36 @@ asking it meant. Writing always applies; `<helix-input value="x">` is the
|
|
|
12219
12774
|
same statement in markup, and `default-value` is how markup seeds a value
|
|
12220
12775
|
a reset should return to. */
|
|
12221
12776
|
value?: (HelixHeadlessRating["value"]) | undefined;
|
|
12222
|
-
/**
|
|
12223
|
-
|
|
12777
|
+
/** The name a screen reader says for the field where it shows no label, as
|
|
12778
|
+
the platform's `aria-label`. It is drawn as a label and clipped, so it
|
|
12779
|
+
names the control inside, and a new one renders at once.
|
|
12780
|
+
|
|
12781
|
+
**An `aria-label` is read when the field renders, and nothing else would
|
|
12782
|
+
render it again.** It is the platform's attribute and no property of this
|
|
12783
|
+
element's, so writing a new one scheduled no update and the label kept
|
|
12784
|
+
the old words. Data Table meets this on every column move: each row's
|
|
12785
|
+
checkbox is named by the first column, so reordering renames every one.
|
|
12786
|
+
|
|
12787
|
+
A reactive property on the attribute, which is the one way Lit observes
|
|
12788
|
+
one. Overriding `observedAttributes` in a mixin compiled `this` to the
|
|
12789
|
+
mixin's own class, so every field observed only this mixin's attributes
|
|
12790
|
+
and dropped its own. Not reflected: the attribute is the consumer's. */
|
|
12791
|
+
"aria-label"?: (HelixHeadlessRating["namedBy"]) | undefined;
|
|
12792
|
+
/** The name a screen reader says for the field where it shows no label, as
|
|
12793
|
+
the platform's `aria-label`. It is drawn as a label and clipped, so it
|
|
12794
|
+
names the control inside, and a new one renders at once.
|
|
12795
|
+
|
|
12796
|
+
**An `aria-label` is read when the field renders, and nothing else would
|
|
12797
|
+
render it again.** It is the platform's attribute and no property of this
|
|
12798
|
+
element's, so writing a new one scheduled no update and the label kept
|
|
12799
|
+
the old words. Data Table meets this on every column move: each row's
|
|
12800
|
+
checkbox is named by the first column, so reordering renames every one.
|
|
12801
|
+
|
|
12802
|
+
A reactive property on the attribute, which is the one way Lit observes
|
|
12803
|
+
one. Overriding `observedAttributes` in a mixin compiled `this` to the
|
|
12804
|
+
mixin's own class, so every field observed only this mixin's attributes
|
|
12805
|
+
and dropped its own. Not reflected: the attribute is the consumer's. */
|
|
12806
|
+
namedBy?: (HelixHeadlessRating["namedBy"]) | undefined;
|
|
12224
12807
|
/** The validation message shown under the control. It replaces the
|
|
12225
12808
|
browser's message. */
|
|
12226
12809
|
feedback?: (HelixHeadlessRating["feedback"]) | undefined;
|
|
@@ -12603,8 +13186,36 @@ asking it meant. Writing always applies; `<helix-input value="x">` is the
|
|
|
12603
13186
|
same statement in markup, and `default-value` is how markup seeds a value
|
|
12604
13187
|
a reset should return to. */
|
|
12605
13188
|
value?: (HelixHeadlessSelect["value"]) | undefined;
|
|
12606
|
-
/**
|
|
12607
|
-
|
|
13189
|
+
/** The name a screen reader says for the field where it shows no label, as
|
|
13190
|
+
the platform's `aria-label`. It is drawn as a label and clipped, so it
|
|
13191
|
+
names the control inside, and a new one renders at once.
|
|
13192
|
+
|
|
13193
|
+
**An `aria-label` is read when the field renders, and nothing else would
|
|
13194
|
+
render it again.** It is the platform's attribute and no property of this
|
|
13195
|
+
element's, so writing a new one scheduled no update and the label kept
|
|
13196
|
+
the old words. Data Table meets this on every column move: each row's
|
|
13197
|
+
checkbox is named by the first column, so reordering renames every one.
|
|
13198
|
+
|
|
13199
|
+
A reactive property on the attribute, which is the one way Lit observes
|
|
13200
|
+
one. Overriding `observedAttributes` in a mixin compiled `this` to the
|
|
13201
|
+
mixin's own class, so every field observed only this mixin's attributes
|
|
13202
|
+
and dropped its own. Not reflected: the attribute is the consumer's. */
|
|
13203
|
+
"aria-label"?: (HelixHeadlessSelect["namedBy"]) | undefined;
|
|
13204
|
+
/** The name a screen reader says for the field where it shows no label, as
|
|
13205
|
+
the platform's `aria-label`. It is drawn as a label and clipped, so it
|
|
13206
|
+
names the control inside, and a new one renders at once.
|
|
13207
|
+
|
|
13208
|
+
**An `aria-label` is read when the field renders, and nothing else would
|
|
13209
|
+
render it again.** It is the platform's attribute and no property of this
|
|
13210
|
+
element's, so writing a new one scheduled no update and the label kept
|
|
13211
|
+
the old words. Data Table meets this on every column move: each row's
|
|
13212
|
+
checkbox is named by the first column, so reordering renames every one.
|
|
13213
|
+
|
|
13214
|
+
A reactive property on the attribute, which is the one way Lit observes
|
|
13215
|
+
one. Overriding `observedAttributes` in a mixin compiled `this` to the
|
|
13216
|
+
mixin's own class, so every field observed only this mixin's attributes
|
|
13217
|
+
and dropped its own. Not reflected: the attribute is the consumer's. */
|
|
13218
|
+
namedBy?: (HelixHeadlessSelect["namedBy"]) | undefined;
|
|
12608
13219
|
/** The validation message shown under the control. It replaces the
|
|
12609
13220
|
browser's message. */
|
|
12610
13221
|
feedback?: (HelixHeadlessSelect["feedback"]) | undefined;
|
|
@@ -12893,8 +13504,36 @@ asking it meant. Writing always applies; `<helix-input value="x">` is the
|
|
|
12893
13504
|
same statement in markup, and `default-value` is how markup seeds a value
|
|
12894
13505
|
a reset should return to. */
|
|
12895
13506
|
value?: (HelixHeadlessSlider["value"]) | undefined;
|
|
12896
|
-
/**
|
|
12897
|
-
|
|
13507
|
+
/** The name a screen reader says for the field where it shows no label, as
|
|
13508
|
+
the platform's `aria-label`. It is drawn as a label and clipped, so it
|
|
13509
|
+
names the control inside, and a new one renders at once.
|
|
13510
|
+
|
|
13511
|
+
**An `aria-label` is read when the field renders, and nothing else would
|
|
13512
|
+
render it again.** It is the platform's attribute and no property of this
|
|
13513
|
+
element's, so writing a new one scheduled no update and the label kept
|
|
13514
|
+
the old words. Data Table meets this on every column move: each row's
|
|
13515
|
+
checkbox is named by the first column, so reordering renames every one.
|
|
13516
|
+
|
|
13517
|
+
A reactive property on the attribute, which is the one way Lit observes
|
|
13518
|
+
one. Overriding `observedAttributes` in a mixin compiled `this` to the
|
|
13519
|
+
mixin's own class, so every field observed only this mixin's attributes
|
|
13520
|
+
and dropped its own. Not reflected: the attribute is the consumer's. */
|
|
13521
|
+
"aria-label"?: (HelixHeadlessSlider["namedBy"]) | undefined;
|
|
13522
|
+
/** The name a screen reader says for the field where it shows no label, as
|
|
13523
|
+
the platform's `aria-label`. It is drawn as a label and clipped, so it
|
|
13524
|
+
names the control inside, and a new one renders at once.
|
|
13525
|
+
|
|
13526
|
+
**An `aria-label` is read when the field renders, and nothing else would
|
|
13527
|
+
render it again.** It is the platform's attribute and no property of this
|
|
13528
|
+
element's, so writing a new one scheduled no update and the label kept
|
|
13529
|
+
the old words. Data Table meets this on every column move: each row's
|
|
13530
|
+
checkbox is named by the first column, so reordering renames every one.
|
|
13531
|
+
|
|
13532
|
+
A reactive property on the attribute, which is the one way Lit observes
|
|
13533
|
+
one. Overriding `observedAttributes` in a mixin compiled `this` to the
|
|
13534
|
+
mixin's own class, so every field observed only this mixin's attributes
|
|
13535
|
+
and dropped its own. Not reflected: the attribute is the consumer's. */
|
|
13536
|
+
namedBy?: (HelixHeadlessSlider["namedBy"]) | undefined;
|
|
12898
13537
|
/** The validation message shown under the control. It replaces the
|
|
12899
13538
|
browser's message. */
|
|
12900
13539
|
feedback?: (HelixHeadlessSlider["feedback"]) | undefined;
|
|
@@ -13648,8 +14287,36 @@ was, and the control says `aria-readonly`. A script can still set
|
|
|
13648
14287
|
The attribute is `readonly`, which is the platform's spelling for the
|
|
13649
14288
|
text fields. */
|
|
13650
14289
|
readOnly?: (HelixHeadlessSwitch["readOnly"]) | undefined;
|
|
13651
|
-
/**
|
|
13652
|
-
|
|
14290
|
+
/** The name a screen reader says for the field where it shows no label, as
|
|
14291
|
+
the platform's `aria-label`. It is drawn as a label and clipped, so it
|
|
14292
|
+
names the control inside, and a new one renders at once.
|
|
14293
|
+
|
|
14294
|
+
**An `aria-label` is read when the field renders, and nothing else would
|
|
14295
|
+
render it again.** It is the platform's attribute and no property of this
|
|
14296
|
+
element's, so writing a new one scheduled no update and the label kept
|
|
14297
|
+
the old words. Data Table meets this on every column move: each row's
|
|
14298
|
+
checkbox is named by the first column, so reordering renames every one.
|
|
14299
|
+
|
|
14300
|
+
A reactive property on the attribute, which is the one way Lit observes
|
|
14301
|
+
one. Overriding `observedAttributes` in a mixin compiled `this` to the
|
|
14302
|
+
mixin's own class, so every field observed only this mixin's attributes
|
|
14303
|
+
and dropped its own. Not reflected: the attribute is the consumer's. */
|
|
14304
|
+
"aria-label"?: (HelixHeadlessSwitch["namedBy"]) | undefined;
|
|
14305
|
+
/** The name a screen reader says for the field where it shows no label, as
|
|
14306
|
+
the platform's `aria-label`. It is drawn as a label and clipped, so it
|
|
14307
|
+
names the control inside, and a new one renders at once.
|
|
14308
|
+
|
|
14309
|
+
**An `aria-label` is read when the field renders, and nothing else would
|
|
14310
|
+
render it again.** It is the platform's attribute and no property of this
|
|
14311
|
+
element's, so writing a new one scheduled no update and the label kept
|
|
14312
|
+
the old words. Data Table meets this on every column move: each row's
|
|
14313
|
+
checkbox is named by the first column, so reordering renames every one.
|
|
14314
|
+
|
|
14315
|
+
A reactive property on the attribute, which is the one way Lit observes
|
|
14316
|
+
one. Overriding `observedAttributes` in a mixin compiled `this` to the
|
|
14317
|
+
mixin's own class, so every field observed only this mixin's attributes
|
|
14318
|
+
and dropped its own. Not reflected: the attribute is the consumer's. */
|
|
14319
|
+
namedBy?: (HelixHeadlessSwitch["namedBy"]) | undefined;
|
|
13653
14320
|
/** The validation message shown under the control. It replaces the
|
|
13654
14321
|
browser's message. */
|
|
13655
14322
|
feedback?: (HelixHeadlessSwitch["feedback"]) | undefined;
|
|
@@ -13990,6 +14657,22 @@ is set. */
|
|
|
13990
14657
|
"dropped-label"?: (HelixHeadlessTable["droppedLabel"]) | undefined;
|
|
13991
14658
|
/** What screen readers hear when a held row is dropped, in a `reorderable` table. */
|
|
13992
14659
|
droppedLabel?: (HelixHeadlessTable["droppedLabel"]) | undefined;
|
|
14660
|
+
/** The text shown and announced when the rows could not load. Set it when a
|
|
14661
|
+
fetch fails, and clear it once you try again. Empty, the default, shows
|
|
14662
|
+
nothing.
|
|
14663
|
+
|
|
14664
|
+
While it is set, a line after the rows shows it, or your own content in the
|
|
14665
|
+
`error` slot, in place of the empty and loading lines, and the live region
|
|
14666
|
+
says it. */
|
|
14667
|
+
"error-text"?: (HelixHeadlessTable["errorText"]) | undefined;
|
|
14668
|
+
/** The text shown and announced when the rows could not load. Set it when a
|
|
14669
|
+
fetch fails, and clear it once you try again. Empty, the default, shows
|
|
14670
|
+
nothing.
|
|
14671
|
+
|
|
14672
|
+
While it is set, a line after the rows shows it, or your own content in the
|
|
14673
|
+
`error` slot, in place of the empty and loading lines, and the live region
|
|
14674
|
+
says it. */
|
|
14675
|
+
errorText?: (HelixHeadlessTable["errorText"]) | undefined;
|
|
13993
14676
|
/** The table's name where neither `label` nor an `aria-label` or
|
|
13994
14677
|
`aria-labelledby` on the host gives it one. */
|
|
13995
14678
|
"fallback-label"?: (HelixHeadlessTable["fallbackLabel"]) | undefined;
|
|
@@ -14539,8 +15222,36 @@ asking it meant. Writing always applies; `<helix-input value="x">` is the
|
|
|
14539
15222
|
same statement in markup, and `default-value` is how markup seeds a value
|
|
14540
15223
|
a reset should return to. */
|
|
14541
15224
|
value?: (HelixHeadlessTextarea["value"]) | undefined;
|
|
14542
|
-
/**
|
|
14543
|
-
|
|
15225
|
+
/** The name a screen reader says for the field where it shows no label, as
|
|
15226
|
+
the platform's `aria-label`. It is drawn as a label and clipped, so it
|
|
15227
|
+
names the control inside, and a new one renders at once.
|
|
15228
|
+
|
|
15229
|
+
**An `aria-label` is read when the field renders, and nothing else would
|
|
15230
|
+
render it again.** It is the platform's attribute and no property of this
|
|
15231
|
+
element's, so writing a new one scheduled no update and the label kept
|
|
15232
|
+
the old words. Data Table meets this on every column move: each row's
|
|
15233
|
+
checkbox is named by the first column, so reordering renames every one.
|
|
15234
|
+
|
|
15235
|
+
A reactive property on the attribute, which is the one way Lit observes
|
|
15236
|
+
one. Overriding `observedAttributes` in a mixin compiled `this` to the
|
|
15237
|
+
mixin's own class, so every field observed only this mixin's attributes
|
|
15238
|
+
and dropped its own. Not reflected: the attribute is the consumer's. */
|
|
15239
|
+
"aria-label"?: (HelixHeadlessTextarea["namedBy"]) | undefined;
|
|
15240
|
+
/** The name a screen reader says for the field where it shows no label, as
|
|
15241
|
+
the platform's `aria-label`. It is drawn as a label and clipped, so it
|
|
15242
|
+
names the control inside, and a new one renders at once.
|
|
15243
|
+
|
|
15244
|
+
**An `aria-label` is read when the field renders, and nothing else would
|
|
15245
|
+
render it again.** It is the platform's attribute and no property of this
|
|
15246
|
+
element's, so writing a new one scheduled no update and the label kept
|
|
15247
|
+
the old words. Data Table meets this on every column move: each row's
|
|
15248
|
+
checkbox is named by the first column, so reordering renames every one.
|
|
15249
|
+
|
|
15250
|
+
A reactive property on the attribute, which is the one way Lit observes
|
|
15251
|
+
one. Overriding `observedAttributes` in a mixin compiled `this` to the
|
|
15252
|
+
mixin's own class, so every field observed only this mixin's attributes
|
|
15253
|
+
and dropped its own. Not reflected: the attribute is the consumer's. */
|
|
15254
|
+
namedBy?: (HelixHeadlessTextarea["namedBy"]) | undefined;
|
|
14544
15255
|
/** The validation message shown under the control. It replaces the
|
|
14545
15256
|
browser's message. */
|
|
14546
15257
|
feedback?: (HelixHeadlessTextarea["feedback"]) | undefined;
|
|
@@ -14898,8 +15609,36 @@ asking it meant. Writing always applies; `<helix-input value="x">` is the
|
|
|
14898
15609
|
same statement in markup, and `default-value` is how markup seeds a value
|
|
14899
15610
|
a reset should return to. */
|
|
14900
15611
|
value?: (HelixHeadlessTimeInput["value"]) | undefined;
|
|
14901
|
-
/**
|
|
14902
|
-
|
|
15612
|
+
/** The name a screen reader says for the field where it shows no label, as
|
|
15613
|
+
the platform's `aria-label`. It is drawn as a label and clipped, so it
|
|
15614
|
+
names the control inside, and a new one renders at once.
|
|
15615
|
+
|
|
15616
|
+
**An `aria-label` is read when the field renders, and nothing else would
|
|
15617
|
+
render it again.** It is the platform's attribute and no property of this
|
|
15618
|
+
element's, so writing a new one scheduled no update and the label kept
|
|
15619
|
+
the old words. Data Table meets this on every column move: each row's
|
|
15620
|
+
checkbox is named by the first column, so reordering renames every one.
|
|
15621
|
+
|
|
15622
|
+
A reactive property on the attribute, which is the one way Lit observes
|
|
15623
|
+
one. Overriding `observedAttributes` in a mixin compiled `this` to the
|
|
15624
|
+
mixin's own class, so every field observed only this mixin's attributes
|
|
15625
|
+
and dropped its own. Not reflected: the attribute is the consumer's. */
|
|
15626
|
+
"aria-label"?: (HelixHeadlessTimeInput["namedBy"]) | undefined;
|
|
15627
|
+
/** The name a screen reader says for the field where it shows no label, as
|
|
15628
|
+
the platform's `aria-label`. It is drawn as a label and clipped, so it
|
|
15629
|
+
names the control inside, and a new one renders at once.
|
|
15630
|
+
|
|
15631
|
+
**An `aria-label` is read when the field renders, and nothing else would
|
|
15632
|
+
render it again.** It is the platform's attribute and no property of this
|
|
15633
|
+
element's, so writing a new one scheduled no update and the label kept
|
|
15634
|
+
the old words. Data Table meets this on every column move: each row's
|
|
15635
|
+
checkbox is named by the first column, so reordering renames every one.
|
|
15636
|
+
|
|
15637
|
+
A reactive property on the attribute, which is the one way Lit observes
|
|
15638
|
+
one. Overriding `observedAttributes` in a mixin compiled `this` to the
|
|
15639
|
+
mixin's own class, so every field observed only this mixin's attributes
|
|
15640
|
+
and dropped its own. Not reflected: the attribute is the consumer's. */
|
|
15641
|
+
namedBy?: (HelixHeadlessTimeInput["namedBy"]) | undefined;
|
|
14903
15642
|
/** The validation message shown under the control. It replaces the
|
|
14904
15643
|
browser's message. */
|
|
14905
15644
|
feedback?: (HelixHeadlessTimeInput["feedback"]) | undefined;
|
|
@@ -15036,6 +15775,19 @@ A time not on the step is simply never offered, so it is not an error to
|
|
|
15036
15775
|
name one, and naming every time in the list is how the empty state is
|
|
15037
15776
|
reached honestly rather than by handing over an empty range. */
|
|
15038
15777
|
disableTimes?: (HelixHeadlessTimePicker["disableTimes"]) | undefined;
|
|
15778
|
+
/** What the list says when no time falls between `min` and `max`.
|
|
15779
|
+
|
|
15780
|
+
The fallback of the `empty` slot. */
|
|
15781
|
+
"empty-text"?: (HelixHeadlessTimePicker["emptyText"]) | undefined;
|
|
15782
|
+
/** What the list says when no time falls between `min` and `max`.
|
|
15783
|
+
|
|
15784
|
+
The fallback of the `empty` slot. */
|
|
15785
|
+
emptyText?: (HelixHeadlessTimePicker["emptyText"]) | undefined;
|
|
15786
|
+
/** Help under the times, such as the hours a shop is open, read by screen
|
|
15787
|
+
readers as the list's description. A message in `feedback` replaces it.
|
|
15788
|
+
|
|
15789
|
+
The fallback of the `hint` slot. */
|
|
15790
|
+
hint?: (HelixHeadlessTimePicker["hint"]) | undefined;
|
|
15039
15791
|
/** The clock the times are written on: `h12` for twelve hours with a
|
|
15040
15792
|
meridiem, `h23` for twenty-four.
|
|
15041
15793
|
|
|
@@ -15062,7 +15814,8 @@ English, "Stunde" in German. */
|
|
|
15062
15814
|
hourLabel?: (HelixHeadlessTimePicker["hourLabel"]) | undefined;
|
|
15063
15815
|
/** Accessible name for the list, which has no visible one of its own.
|
|
15064
15816
|
|
|
15065
|
-
An `aria-label` or `aria-labelledby` on the host names the list instead
|
|
15817
|
+
An `aria-label` or `aria-labelledby` on the host names the list instead,
|
|
15818
|
+
and so does a label slotted into `label`, which is also drawn above it. */
|
|
15066
15819
|
label?: (HelixHeadlessTimePicker["label"]) | undefined;
|
|
15067
15820
|
/** Language tag the times and the wheels' names are written in.
|
|
15068
15821
|
|
|
@@ -15316,6 +16069,11 @@ Whatever `<time>` accepts, which is a date, a time, both, a duration or a
|
|
|
15316
16069
|
week. Unset, the label is written as it was given and nothing claims to
|
|
15317
16070
|
know what instant it names. */
|
|
15318
16071
|
datetime?: (HelixHeadlessTimelineItem["datetime"]) | undefined;
|
|
16072
|
+
/** Writes the time as how long ago it was, or how long until it, from
|
|
16073
|
+
`datetime`, where the `time` slot is empty: `long` ("3 hours ago"),
|
|
16074
|
+
`short` ("3 hr. ago") or `narrow` ("3h ago"). Set with no value, it is
|
|
16075
|
+
`long`. The words move on as they go stale. */
|
|
16076
|
+
relative?: (HelixHeadlessTimelineItem["relative"]) | undefined;
|
|
15319
16077
|
/** The kind of event. It sets the color of the mark and nothing else. */
|
|
15320
16078
|
tone?: (HelixHeadlessTimelineItem["tone"]) | undefined;
|
|
15321
16079
|
};
|
|
@@ -15385,6 +16143,10 @@ A word property: register it for a locale under the host's key. A family
|
|
|
15385
16143
|
that names the control otherwise, such as Tag's `Remove {label}`,
|
|
15386
16144
|
declares its own English with `@words` above the override. */
|
|
15387
16145
|
dismissLabel?: (HelixHeadlessToastItem["dismissLabel"]) | undefined;
|
|
16146
|
+
/** Whether the region holds the message back, because more messages are
|
|
16147
|
+
showing than its `max-visible`. The region sets it. A waiting message is
|
|
16148
|
+
hidden, its timer has not started, and it is said once it shows. */
|
|
16149
|
+
waiting?: (HelixHeadlessToastItem["waiting"]) | undefined;
|
|
15388
16150
|
};
|
|
15389
16151
|
|
|
15390
16152
|
export type HelixHeadlessToastItemVueEvents = {
|
|
@@ -15410,6 +16172,14 @@ Empty turns it off. */
|
|
|
15410
16172
|
/** Accessible name for the region, with `{hotkey}` filled in. Translate it with
|
|
15411
16173
|
the rest of your interface. */
|
|
15412
16174
|
label?: (HelixHeadlessToast["label"]) | undefined;
|
|
16175
|
+
/** How many messages show at once. The messages after that many wait, hidden
|
|
16176
|
+
and with their timers stopped, until a message before them goes. Unset,
|
|
16177
|
+
every message shows. */
|
|
16178
|
+
"max-visible"?: (HelixHeadlessToast["maxVisible"] | `${number}`) | undefined;
|
|
16179
|
+
/** How many messages show at once. The messages after that many wait, hidden
|
|
16180
|
+
and with their timers stopped, until a message before them goes. Unset,
|
|
16181
|
+
every message shows. */
|
|
16182
|
+
maxVisible?: (HelixHeadlessToast["maxVisible"]) | undefined;
|
|
15413
16183
|
/** Which corner or edge the stack sits at.
|
|
15414
16184
|
|
|
15415
16185
|
Named here rather than on each message, because where a page puts its
|
|
@@ -15515,8 +16285,36 @@ asking it meant. Writing always applies; `<helix-input value="x">` is the
|
|
|
15515
16285
|
same statement in markup, and `default-value` is how markup seeds a value
|
|
15516
16286
|
a reset should return to. */
|
|
15517
16287
|
value?: (HelixHeadlessToggleGroup["value"]) | undefined;
|
|
15518
|
-
/**
|
|
15519
|
-
|
|
16288
|
+
/** The name a screen reader says for the field where it shows no label, as
|
|
16289
|
+
the platform's `aria-label`. It is drawn as a label and clipped, so it
|
|
16290
|
+
names the control inside, and a new one renders at once.
|
|
16291
|
+
|
|
16292
|
+
**An `aria-label` is read when the field renders, and nothing else would
|
|
16293
|
+
render it again.** It is the platform's attribute and no property of this
|
|
16294
|
+
element's, so writing a new one scheduled no update and the label kept
|
|
16295
|
+
the old words. Data Table meets this on every column move: each row's
|
|
16296
|
+
checkbox is named by the first column, so reordering renames every one.
|
|
16297
|
+
|
|
16298
|
+
A reactive property on the attribute, which is the one way Lit observes
|
|
16299
|
+
one. Overriding `observedAttributes` in a mixin compiled `this` to the
|
|
16300
|
+
mixin's own class, so every field observed only this mixin's attributes
|
|
16301
|
+
and dropped its own. Not reflected: the attribute is the consumer's. */
|
|
16302
|
+
"aria-label"?: (HelixHeadlessToggleGroup["namedBy"]) | undefined;
|
|
16303
|
+
/** The name a screen reader says for the field where it shows no label, as
|
|
16304
|
+
the platform's `aria-label`. It is drawn as a label and clipped, so it
|
|
16305
|
+
names the control inside, and a new one renders at once.
|
|
16306
|
+
|
|
16307
|
+
**An `aria-label` is read when the field renders, and nothing else would
|
|
16308
|
+
render it again.** It is the platform's attribute and no property of this
|
|
16309
|
+
element's, so writing a new one scheduled no update and the label kept
|
|
16310
|
+
the old words. Data Table meets this on every column move: each row's
|
|
16311
|
+
checkbox is named by the first column, so reordering renames every one.
|
|
16312
|
+
|
|
16313
|
+
A reactive property on the attribute, which is the one way Lit observes
|
|
16314
|
+
one. Overriding `observedAttributes` in a mixin compiled `this` to the
|
|
16315
|
+
mixin's own class, so every field observed only this mixin's attributes
|
|
16316
|
+
and dropped its own. Not reflected: the attribute is the consumer's. */
|
|
16317
|
+
namedBy?: (HelixHeadlessToggleGroup["namedBy"]) | undefined;
|
|
15520
16318
|
/** The validation message shown under the control. It replaces the
|
|
15521
16319
|
browser's message. */
|
|
15522
16320
|
feedback?: (HelixHeadlessToggleGroup["feedback"]) | undefined;
|
|
@@ -16475,6 +17273,20 @@ export type HelixHeadlessVideoPlaylistHelixEndElementEvent =
|
|
|
16475
17273
|
export type HelixHeadlessVideoPlaylistVueProps = {
|
|
16476
17274
|
/** The list's name, read by screen readers. */
|
|
16477
17275
|
label?: (HelixHeadlessVideoPlaylist["label"]) | undefined;
|
|
17276
|
+
/** What the live region says when the playlist moves to another entry.
|
|
17277
|
+
`{title}` is the entry's name.
|
|
17278
|
+
|
|
17279
|
+
**A move a reader did not make is said.** At the end of a clip the
|
|
17280
|
+
playlist starts the next one, and the only other trace of that is the
|
|
17281
|
+
`aria-current` on a button the reader is not on. */
|
|
17282
|
+
"playing-label"?: (HelixHeadlessVideoPlaylist["playingLabel"]) | undefined;
|
|
17283
|
+
/** What the live region says when the playlist moves to another entry.
|
|
17284
|
+
`{title}` is the entry's name.
|
|
17285
|
+
|
|
17286
|
+
**A move a reader did not make is said.** At the end of a clip the
|
|
17287
|
+
playlist starts the next one, and the only other trace of that is the
|
|
17288
|
+
`aria-current` on a button the reader is not on. */
|
|
17289
|
+
playingLabel?: (HelixHeadlessVideoPlaylist["playingLabel"]) | undefined;
|
|
16478
17290
|
/** What happens when an entry ends with no next one to go to. `one` plays the
|
|
16479
17291
|
same entry again, and `all` goes from the last entry back to the first.
|
|
16480
17292
|
Absent, the playlist stops on the last entry and sends `helix-end`.
|
|
@@ -16536,6 +17348,10 @@ permitted is the browser's policy, and what follows a refused autoplay is a
|
|
|
16536
17348
|
paused player showing its start control, which is the correct thing to be
|
|
16537
17349
|
looking at. */
|
|
16538
17350
|
autoplay?: (HelixHeadlessVideo["autoplay"]) | undefined;
|
|
17351
|
+
/** What the live region says when `c` turns captions off. */
|
|
17352
|
+
"captions-hidden-label"?: (HelixHeadlessVideo["captionsHiddenLabel"]) | undefined;
|
|
17353
|
+
/** What the live region says when `c` turns captions off. */
|
|
17354
|
+
captionsHiddenLabel?: (HelixHeadlessVideo["captionsHiddenLabel"]) | undefined;
|
|
16539
17355
|
/** The name of the captions control when the video has one track. The control
|
|
16540
17356
|
turns that track on and off.
|
|
16541
17357
|
|
|
@@ -16556,6 +17372,10 @@ tracks. */
|
|
|
16556
17372
|
/** The name of the row that turns captions off, when the video has several
|
|
16557
17373
|
tracks. */
|
|
16558
17374
|
captionsOffLabel?: (HelixHeadlessVideo["captionsOffLabel"]) | undefined;
|
|
17375
|
+
/** What the live region says when `c` turns captions on. */
|
|
17376
|
+
"captions-shown-label"?: (HelixHeadlessVideo["captionsShownLabel"]) | undefined;
|
|
17377
|
+
/** What the live region says when `c` turns captions on. */
|
|
17378
|
+
captionsShownLabel?: (HelixHeadlessVideo["captionsShownLabel"]) | undefined;
|
|
16559
17379
|
/** Whether the browser draws its native controls. When set, this element draws
|
|
16560
17380
|
no controls of its own.
|
|
16561
17381
|
|
|
@@ -16732,6 +17552,10 @@ writes the current entry's name here. */
|
|
|
16732
17552
|
"more-label"?: (HelixHeadlessVideo["moreLabel"]) | undefined;
|
|
16733
17553
|
/** What the button that opens `overflow-controls` is called. */
|
|
16734
17554
|
moreLabel?: (HelixHeadlessVideo["moreLabel"]) | undefined;
|
|
17555
|
+
/** What the live region says when a key mutes the video. */
|
|
17556
|
+
"muted-label"?: (HelixHeadlessVideo["mutedLabel"]) | undefined;
|
|
17557
|
+
/** What the live region says when a key mutes the video. */
|
|
17558
|
+
mutedLabel?: (HelixHeadlessVideo["mutedLabel"]) | undefined;
|
|
16735
17559
|
/** The name of the mute control. The control shows as pressed while the video
|
|
16736
17560
|
is muted. */
|
|
16737
17561
|
"mute-label"?: (HelixHeadlessVideo["muteLabel"]) | undefined;
|
|
@@ -16774,6 +17598,10 @@ So the consumer says where the fold is, which they can, having already
|
|
|
16774
17598
|
named the controls in order. A name in both lists is drawn once, on the
|
|
16775
17599
|
bar: two of the same control is worse than either placement. */
|
|
16776
17600
|
overflowControls?: (HelixHeadlessVideo["overflowControls"]) | undefined;
|
|
17601
|
+
/** What the live region says when a key pauses the video. */
|
|
17602
|
+
"paused-label"?: (HelixHeadlessVideo["pausedLabel"]) | undefined;
|
|
17603
|
+
/** What the live region says when a key pauses the video. */
|
|
17604
|
+
pausedLabel?: (HelixHeadlessVideo["pausedLabel"]) | undefined;
|
|
16777
17605
|
/** The name of the play control while pressing it would pause the video. */
|
|
16778
17606
|
"pause-label"?: (HelixHeadlessVideo["pauseLabel"]) | undefined;
|
|
16779
17607
|
/** The name of the play control while pressing it would pause the video. */
|
|
@@ -16796,6 +17624,10 @@ this is what a screen reader calls it on arriving. */
|
|
|
16796
17624
|
/** The name of the player when `label` is not set. The player is a group, and
|
|
16797
17625
|
this is what a screen reader calls it on arriving. */
|
|
16798
17626
|
playerLabel?: (HelixHeadlessVideo["playerLabel"]) | undefined;
|
|
17627
|
+
/** What the live region says when a key plays the video. */
|
|
17628
|
+
"playing-label"?: (HelixHeadlessVideo["playingLabel"]) | undefined;
|
|
17629
|
+
/** What the live region says when a key plays the video. */
|
|
17630
|
+
playingLabel?: (HelixHeadlessVideo["playingLabel"]) | undefined;
|
|
16799
17631
|
/** The name of the play control while pressing it would start the video. */
|
|
16800
17632
|
"play-label"?: (HelixHeadlessVideo["playLabel"]) | undefined;
|
|
16801
17633
|
/** The name of the play control while pressing it would start the video. */
|
|
@@ -16894,6 +17726,16 @@ negation. */
|
|
|
16894
17726
|
/** How the scrubber reads out where the video is, with `{position}` and
|
|
16895
17727
|
`{duration}` filled in. */
|
|
16896
17728
|
timeLabel?: (HelixHeadlessVideo["timeLabel"]) | undefined;
|
|
17729
|
+
/** What the live region says when a key unmutes the video. */
|
|
17730
|
+
"unmuted-label"?: (HelixHeadlessVideo["unmutedLabel"]) | undefined;
|
|
17731
|
+
/** What the live region says when a key unmutes the video. */
|
|
17732
|
+
unmutedLabel?: (HelixHeadlessVideo["unmutedLabel"]) | undefined;
|
|
17733
|
+
/** What the live region says when a key changes the volume. `{percent}` is the
|
|
17734
|
+
volume from 0 to 100, written in the locale. */
|
|
17735
|
+
"volume-changed-label"?: (HelixHeadlessVideo["volumeChangedLabel"]) | undefined;
|
|
17736
|
+
/** What the live region says when a key changes the volume. `{percent}` is the
|
|
17737
|
+
volume from 0 to 100, written in the locale. */
|
|
17738
|
+
volumeChangedLabel?: (HelixHeadlessVideo["volumeChangedLabel"]) | undefined;
|
|
16897
17739
|
/** What the volume slider is called. */
|
|
16898
17740
|
"volume-label"?: (HelixHeadlessVideo["volumeLabel"]) | undefined;
|
|
16899
17741
|
/** What the volume slider is called. */
|
|
@@ -17095,6 +17937,8 @@ export type CustomCssProperties = {
|
|
|
17095
17937
|
"--chart-bar-wash"?: (string) | undefined;
|
|
17096
17938
|
/** Written on the control inside each toggle button of a group with `selection-mode`: `1` while it is pressed and `0` while it is not. Read it in a `::part(button)` rule to draw the pressed look. */
|
|
17097
17939
|
"--button-group-pressed"?: (string) | undefined;
|
|
17940
|
+
/** The board's zoom, which the board writes: 1 at the document's own size, 0.5 at half. The cards inherit it, so a card's stylesheet can draw less when the board is far out, such as a border that stays one pixel wide at `calc(1px / var(--canvas-zoom))`. */
|
|
17941
|
+
"--canvas-zoom"?: (string) | undefined;
|
|
17098
17942
|
/** Space between slides. Your stylesheet sets it, and the component uses it to measure the run. */
|
|
17099
17943
|
"--carousel-gap"?: (string) | undefined;
|
|
17100
17944
|
/** The size of one pane. Your stylesheet sets it, and the component uses it to measure the run. */
|
|
@@ -17369,7 +18213,7 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
17369
18213
|
HelixHeadlessCanvasNodeVueProps,
|
|
17370
18214
|
HelixHeadlessCanvasNodeVueEvents
|
|
17371
18215
|
>;
|
|
17372
|
-
/** A board of cards and connectors, drawn by Helix. On a canvas every position is data that someone placed, so drawing is arithmetic over rectangles with no layout to compute. 'Map' takes a slotted map, because another renderer draws its tiles. The format is [JSON Canvas](https://jsoncanvas.org), an open format. Each node has an 'x', 'y', 'width', 'height', and a type. Each edge names the two nodes it joins and the sides it leaves and arrives on. A card belongs to a group when it sits inside the group's bounds. The cards are text in the DOM, so a screen reader can read them. The family adds a reading order and states each card's connections as text. 'order' sets the reading order: - 'spatial' bands the cards into rows. - 'edges' follows the arrows, starting from the cards that nothing points to. **Cards move by default.** The board writes the new 'x' and 'y' onto the card, the way an input writes its own value, and dispatches two events: - 'helix-before-move' for every step. Cancel it to hold the positions in your own state and apply them yourself. - 'helix-move' once the move is finished. A resize dispatches the same pair with a size. Set 'readonly' on the board to keep every card in place, such as on a published board. Set 'readonly' on one card or connection to keep only that one in place. Set 'snap' to a length in the document's units, such as '32', and a card that is moved or resized lands on a multiple of it. Carrying a card, a corner, a connection, or the selection box near the edge of the board moves the board under it, so a card can be taken to a place off screen in one drag. A connection let go within 20 pixels of a card arrives at it. A double click on the empty board zooms in about that point, and Shift with a double click zooms out. Keyboard behavior: - One card holds the board's tab stop. - The arrow keys move through the cards in reading order. The card you land on scrolls into view, and its connections are announced with it. - Shift with an arrow key moves the card: by 16 units, or to the next multiple of 'snap' where it is set. Alt with an arrow key resizes it from its bottom right corner the same way. - The connections leaving a card are stops of their own, straight after it. Enter on one moves to the card it arrives at. - What a key changes that a reader cannot see is said: where a card moved to, its new size, how many cards are selected, and the zoom. A selected card or connection says so when a reader arrives on it. Every drag also works with clicks, as WCAG 2.5.7 requires for a pointer that cannot hold a button down. Click a selected card's move handle, a corner, a card's connection point, or the end of a selected connection to pick it up. It follows the pointer with no button held, and the next click puts it down where a drag would have. On touch, the next tap sets where it lands. Escape, or a press outside the board, puts it back. So a finger connects two cards with three taps: the card, one of its points, and the card to connect to. Connecting and removing dispatch requests, and your code applies them: - Drawing from a card's handle to another card, or pressing C on one card and Enter on another, dispatches 'helix-connect'. - Delete on a card or a connection dispatches 'helix-remove'. The event names every connection that removing the card would leave without an end. Once your page removes what Delete asked for, focus moves to the next stop, to the one before where it was the last, and to the board where none is left. A focused card your page removes for its own reasons hands focus on the same way, unless the reader has already moved focus somewhere else. The board applies a move itself, because the card already exists. A connection is a new element, and React discards an element the board adds to its markup on the next render, so you write the connection. Cards and connections are 'helix-canvas-node' and 'helix-canvas-edge' elements, so they are in the served markup whichever renderer wrote them. The library fetches nothing, and an array passed to an element is missing from the first paint of a server-rendered React page. 'fromJsonCanvas' turns a JSON Canvas document into their props, and 'toJsonCanvas()' writes a board back out. */
|
|
18216
|
+
/** A board of cards and connectors, drawn by Helix. On a canvas every position is data that someone placed, so drawing is arithmetic over rectangles with no layout to compute. 'Map' takes a slotted map, because another renderer draws its tiles. The format is [JSON Canvas](https://jsoncanvas.org), an open format. Each node has an 'x', 'y', 'width', 'height', and a type. Each edge names the two nodes it joins and the sides it leaves and arrives on. A card belongs to a group when it sits inside the group's bounds. The cards are text in the DOM, so a screen reader can read them. The family adds a reading order and states each card's connections as text. 'order' sets the reading order: - 'spatial' bands the cards into rows. - 'edges' follows the arrows, starting from the cards that nothing points to. **Cards move by default.** The board writes the new 'x' and 'y' onto the card, the way an input writes its own value, and dispatches two events: - 'helix-before-move' for every step. Cancel it to hold the positions in your own state and apply them yourself. - 'helix-move' once the move is finished. A resize dispatches the same pair with a size. Set 'readonly' on the board to keep every card in place, such as on a published board. Set 'readonly' on one card or connection to keep only that one in place. Set 'snap' to a length in the document's units, such as '32', and a card that is moved or resized lands on a multiple of it. Carrying a card, a corner, a connection, or the selection box near the edge of the board moves the board under it, so a card can be taken to a place off screen in one drag. A connection let go within 20 pixels of a card arrives at it. A double click on the empty board zooms in about that point, and Shift with a double click zooms out. Keyboard behavior: - One card holds the board's tab stop. - The arrow keys move through the cards in reading order. The card you land on scrolls into view, and its connections are announced with it. - The card you land on is selected. Control or Command with an arrow key, Home, or End moves without changing the selection, and Space adds the card to the selection or takes it out, so you can select cards that are not next to each other. - Shift with an arrow key moves the card: by 16 units, or to the next multiple of 'snap' where it is set. Alt with an arrow key resizes it from its bottom right corner the same way. - The connections leaving a card are stops of their own, straight after it. Enter on one moves to the card it arrives at. - What a key changes that a reader cannot see is said: where a card moved to, its new size, how many cards are selected, and the zoom. A selected card or connection says so when a reader arrives on it. Every drag also works with clicks, as WCAG 2.5.7 requires for a pointer that cannot hold a button down. Click a selected card's move handle, a corner, a card's connection point, or the end of a selected connection to pick it up. It follows the pointer with no button held, and the next click puts it down where a drag would have. On touch, the next tap sets where it lands. Escape, or a press outside the board, puts it back. So a finger connects two cards with three taps: the card, one of its points, and the card to connect to. Connecting and removing dispatch requests, and your code applies them: - Drawing from a card's handle to another card, or pressing C on one card and Enter on another, dispatches 'helix-connect'. - Delete on a card or a connection dispatches 'helix-remove'. The event names every connection that removing the card would leave without an end. Once your page removes what Delete asked for, focus moves to the next stop, to the one before where it was the last, and to the board where none is left. A focused card your page removes for its own reasons hands focus on the same way, unless the reader has already moved focus somewhere else. The board applies a move itself, because the card already exists. A connection is a new element, and React discards an element the board adds to its markup on the next render, so you write the connection. Cards and connections are 'helix-canvas-node' and 'helix-canvas-edge' elements, so they are in the served markup whichever renderer wrote them. The library fetches nothing, and an array passed to an element is missing from the first paint of a server-rendered React page. 'fromJsonCanvas' turns a JSON Canvas document into their props, and 'toJsonCanvas()' writes a board back out. */
|
|
17373
18217
|
"helix-headless-canvas": DefineCustomElement<
|
|
17374
18218
|
HelixHeadlessCanvas,
|
|
17375
18219
|
HelixHeadlessCanvasVueProps,
|
|
@@ -17399,7 +18243,7 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
17399
18243
|
HelixHeadlessChatMessageVueProps,
|
|
17400
18244
|
HelixHeadlessChatMessageVueEvents
|
|
17401
18245
|
>;
|
|
17402
|
-
/** Chat has no positioning, no backdrop, and no trigger, so you can put it in any container, such as a page, a sidebar, a modal, or a floating panel. The transcript stays pinned to the bottom, including while a streamed answer grows, until the user scrolls more than 'threshold' away from it. With 'history' set to 'more', reaching the top fires 'helix-history'. Set 'loading' while you fetch, then prepend the older turns. The turn the user was reading stays in place on screen. The log is 'aria-live="off"'. A separate status region announces each new turn once, when it has finished arriving. It skips the user's own turns unless they failed to send, turns loaded as history, and the turns already there when the transcript opened. Pass the turns as children or as 'turns' data. Do not use both. Children render from the server and suit most conversations. 'turns' draws a long transcript one window at a time, so the log needs a block size of its own. **A conversation is built from three elements.** The chat holds the transcript, a 'Chat.Message' stands for each turn, and a 'Chat.Composer' sits in the 'composer' slot. When the user sends, 'helix-send' reaches the chat: add their turn with 'author="me"' and 'state="sending"', then set 'state' to 'sent' or 'failed' when your server answers. Add the reply as a turn with 'state="streaming"', write its text as it arrives, and set 'state' to 'sent' when it is complete. While the user types, the composer sends 'helix-typing', which you can pass on to the other side. When the other side types, set 'typing' to their name: the status band draws three dots and "Ada is typing" ('typing-label'), which a screen reader hears, and clearing it takes them away. Anything slotted into 'status' is drawn first. A screen reader names each turn by its author and its time, such as "You, 2 minutes ago". Set 'me-label' and 'message-label' to say it in your language, and give each turn by 'them' an 'author-label'. A turn with neither an author label nor a time is named by 'turn-label', "Message". A turn from 'turns' is drawn in the chat's shadow root, so style it through the forwarded 'message-*' parts. A turn by 'me' also gets each part with '-mine' added, and the turn's state adds 'message-meta-failed', 'message-content-sending', and 'message-content-streaming'. To style each participant differently, give 'author-styles' the declarations for each author, such as '{"ada": "--chat-message-background-color: …"}': the message drawn for each of their turns takes them as its 'style', so the message's custom properties change for that author alone. Turns passed as children are styled by their 'author', such as 'helix-chat-message[author="ada"]'. */
|
|
18246
|
+
/** Chat has no positioning, no backdrop, and no trigger, so you can put it in any container, such as a page, a sidebar, a modal, or a floating panel. The transcript stays pinned to the bottom, including while a streamed answer grows, until the user scrolls more than 'threshold' away from it. With 'history' set to 'more', reaching the top fires 'helix-history'. Set 'loading' while you fetch, then prepend the older turns. The turn the user was reading stays in place on screen. The log is 'aria-live="off"'. A separate status region announces each new turn once, when it has finished arriving. It skips the user's own turns unless they failed to send, turns loaded as history, and the turns already there when the transcript opened. A turn is said with its author first, such as "Ada: It ships today" ('arrival-label'), where its author can be named. Pass the turns as children or as 'turns' data. Do not use both. Children render from the server and suit most conversations. 'turns' draws a long transcript one window at a time, so the log needs a block size of its own. **A conversation is built from three elements.** The chat holds the transcript, a 'Chat.Message' stands for each turn, and a 'Chat.Composer' sits in the 'composer' slot. When the user sends, 'helix-send' reaches the chat: add their turn with 'author="me"' and 'state="sending"', then set 'state' to 'sent' or 'failed' when your server answers. Add the reply as a turn with 'state="streaming"', write its text as it arrives, and set 'state' to 'sent' when it is complete. While the user types, the composer sends 'helix-typing', which you can pass on to the other side. When the other side types, set 'typing' to their name: the status band draws three dots and "Ada is typing" ('typing-label'), which a screen reader hears, and clearing it takes them away. Anything slotted into 'status' is drawn first. A screen reader names each turn by its author and its time, such as "You, 2 minutes ago". Set 'me-label' and 'message-label' to say it in your language, and give each turn by 'them' an 'author-label'. A turn with neither an author label nor a time is named by 'turn-label', "Message". A turn from 'turns' is drawn in the chat's shadow root, so style it through the forwarded 'message-*' parts. A turn by 'me' also gets each part with '-mine' added, and the turn's state adds 'message-meta-failed', 'message-content-sending', and 'message-content-streaming'. To style each participant differently, give 'author-styles' the declarations for each author, such as '{"ada": "--chat-message-background-color: …"}': the message drawn for each of their turns takes them as its 'style', so the message's custom properties change for that author alone. Turns passed as children are styled by their 'author', such as 'helix-chat-message[author="ada"]'. */
|
|
17403
18247
|
"helix-headless-chat": DefineCustomElement<
|
|
17404
18248
|
HelixHeadlessChat,
|
|
17405
18249
|
HelixHeadlessChatVueProps,
|
|
@@ -17447,7 +18291,7 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
17447
18291
|
HelixHeadlessComboboxVueProps,
|
|
17448
18292
|
HelixHeadlessComboboxVueEvents
|
|
17449
18293
|
>;
|
|
17450
|
-
/** The list is a 'Listbox', which handles filtering, the empty state, the match highlight, 'aria-activedescendant', scrolling an option into view, and moving between options with the keyboard. The palette adds a dialog and a hotkey that opens it. The palette keeps no value. It is not a form control and submits nothing. Choosing an option dispatches 'helix-select' once. To remember the last command, store it yourself. An option with 'href' is a link to a page, which the browser follows once the palette has closed. The hotkey listener is on the document, so the hotkey works from anywhere on the page, including inside another control's text field, whether or not the palette is open. 'mod' means Command on a Mac and Control elsewhere, so you write one binding. The filter is cleared when the palette closes, so each opening starts from the full list. Combobox and Select do the same. As typing narrows the list, a screen reader hears how many commands are left, such as "3 commands". */
|
|
18294
|
+
/** The list is a 'Listbox', which handles filtering, the empty state, the match highlight, 'aria-activedescendant', scrolling an option into view, and moving between options with the keyboard. The palette adds a dialog and a hotkey that opens it. The palette keeps no value. It is not a form control and submits nothing. Choosing an option dispatches 'helix-select' once. To remember the last command, store it yourself. An option with 'href' is a link to a page, which the browser follows once the palette has closed. The hotkey listener is on the document, so the hotkey works from anywhere on the page, including inside another control's text field, whether or not the palette is open. 'mod' means Command on a Mac and Control elsewhere, so you write one binding. With 'inline', the palette is drawn in the page with no dialog, as a search over a list that is always shown. **Pages.** A command can open a page of commands of its own, as a palette offers "Change theme" and then the themes. Give the option 'opens' with a name, and slot the page's commands as 'page:' and that name: '''html <helix-command> <helix-option value="theme" opens="theme">Change theme</helix-option> <helix-option value="dark" slot="page:theme">Dark</helix-option> <helix-option value="light" slot="page:theme">Light</helix-option> </helix-command> ''' Choosing the opener says 'helix-select' with its value, and canceling it keeps the page that is shown. The list then shows the page, named by the opener's words, and Backspace in an empty filter goes back. 'page' says which page is shown. The filter is cleared when the palette closes, so each opening starts from the full list. Combobox and Select do the same. As typing narrows the list, a screen reader hears how many commands are left, such as "3 commands". **Keyboard.** Focus goes to the filter field as the palette opens, and the highlight moves through the commands while you type. | Key | What it does | |---|---| | '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. | | Down, Up | Moves the highlight to the next or the previous command, round from the last to the first. | | Page Down, Page Up | Moves the highlight by as many commands as the list shows at once. | | Home, End, Left, Right | Move the caret in the filter field. | | 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. | | Command or Control with Enter | Takes the highlighted command's 'alternate' destination, where it has one. | | Backspace | In an empty filter on a page, goes back to the page before. | | Escape | Clears the filter. With the filter empty, closes the palette and puts focus back where it was. | | Tab | Stays in the palette, which is modal. With 'inline', moves on through the page. | **ARIA.** The palette is a modal 'dialog' named by 'label', or with 'inline' no dialog at all. Inside it the filter field is a 'combobox' with 'aria-activedescendant' on the highlighted command, and the commands are a 'listbox' of 'option's. How many commands typing left, the empty text and the loading text are said in a polite live region. */
|
|
17451
18295
|
"helix-headless-command": DefineCustomElement<
|
|
17452
18296
|
HelixHeadlessCommand,
|
|
17453
18297
|
HelixHeadlessCommandVueProps,
|
|
@@ -17459,13 +18303,13 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
17459
18303
|
HelixHeadlessCopyButtonVueProps,
|
|
17460
18304
|
HelixHeadlessCopyButtonVueEvents
|
|
17461
18305
|
>;
|
|
17462
|
-
/** Declare the columns as 'TableColumn' children and pass the rows as an array. The schema stays readable in the HTML, and the rows can be windowed, which ten thousand row elements cannot be. '''html <helix-headless-data-table .rows=${rows} sort="name:asc" page-size="20"> <helix-headless-table-column field="name" sortable>Name</helix-headless-table-column> <helix-headless-table-column field="size" text-align="end" sortable .cell=${bytes}>Size</helix-headless-table-column> </helix-headless-data-table> ''' For a short table written out by hand, use 'Table', which takes rows as markup. Sort and filter apply to the whole set, including the rows on other pages. **The cell values do not server-render.** The headings and the row elements do. Reading a cell needs the columns, and Lit SSR does not pass the column children to this element, so a crawler sees an empty table of the right shape. Use 'Table' when the served HTML has to carry the values. 'selectable' adds a column of checkboxes, keyed on 'row-key': - A row is selected by its key, so the selection survives a sort, a filter, and a page change. - 'selected' holds the chosen keys, comma separated, the same shape 'Listbox' uses for a multiple choice. As with 'sort', writing it applies the selection, and 'default-selected' holds what the markup declared. - The checkbox in the heading selects every row in the result, across pages, and shows a dash while only some are chosen. - Shift with a press on a checkbox selects every row between it and the row last chosen. - 'selection-behavior="replace"' makes a press or a move select the row alone, as a file list does. Control or Command with a press adds or takes out one row, and Shift with a press selects every row from the one last chosen. To act on a single row, such as opening it, put a link or a button in a cell. **Keyboard.** The grid is one tab stop, and the arrow keys move between its cells, the headings included. | Key | What it does | |---|---| | Right, Left | Moves one cell along the row. Left moves on, on a right-to-left page. | | Down, Up | Moves one row, the heading row and the 'load-more' row included. | | Home, End | Moves to the first or the last cell of the row. | | Control with Home or End | Moves to the first or the last cell of the grid. | | Page Down, Page Up | Moves by the rows that fit in view. | | Enter, F2 | Moves into the cell's controls. Escape moves back to the cell, and Tab moves between the controls of one cell. | | Enter, Space on a sortable heading | Sorts by the column. | | Enter, Space on the 'load-more' row | Sends 'helix-load-more'. | | Space on a row | Selects the row, in a 'selectable' table. Under 'selection-behavior="replace"', selects it alone, and Control or Command with Space adds or takes out the row. | | Down, Up, Page Down, Page Up under 'selection-behavior="replace"' | Selects the row it moves to alone. Control or Command with the key moves without selecting. | | Shift with Down or Up | Selects the rows it moves across, in a 'selectable' table. | | Shift with Space | Selects every row from the one last chosen, in a 'selectable' table. | | Control or Command with A | Selects every row, in a 'selectable' table. | | Right on a row header in a tree grid | Opens a closed row, and moves one cell along an open one. | | Left on a row header in a tree grid | Closes an open row, and moves to the parent of a closed one. | | A letter or a word | Moves to the next row whose row header starts with what you typed. | 'selected' and 'expanded' hold their keys in the order of the rows, as do 'helix-select', 'helix-selected' and 'helix-expand'. Each row is named by its row header, the column marked 'row-header', or the first column with a 'field' where none is. A screen reader says it as a reader moves between rows. **Rows that hold rows.** 'child-field' names the field that holds a row's child rows, and the grid becomes a tree grid. The row header column draws a mark that a press opens and closes a row by, and 'expanded' holds the keys of the open rows, which 'row-key' names. Right on a closed row's header opens it, Left on an open one closes it, and Left on a child moves to its parent. A sort orders the rows under each parent, and a search shows the rows that lead to each match, open. 'load-more' adds a row after the last one with a button that sends 'helix-load-more'. A 'windowed' table also sends it by itself once a reader scrolls within one screen of the end, once for each number of rows. Add the next rows to 'rows', and set 'loading' while they are on their way. The controls inside the cells leave the tab order, so Tab moves past the whole grid. A windowed table keeps the row holding focus drawn while the rest scroll away. People can resize and reorder the columns. 'resizable' on a column puts a separator on its edge. 'reorderable' on the table puts a grip on each heading that has a 'field', moved by dragging or with the arrow keys. The new order is written to 'order' as a list of fields. Your markup is not rewritten: the table assigns the headings to its header in that order. **'reorderable-rows' lets people move rows.** A column of grips leads each row, named by 'move-row-label'. Drag a grip to move its row, and the table scrolls near an edge. Or press Space or Enter on a grip, or click it, to pick up its row, move it with Down and Up, Home and End, and press Space or Enter again to drop it. A click on another row drops it there, and Escape puts it back. The table says each step in its 'live' region. A drop sends 'helix-before-reorder', which you can refuse, and then 'helix-reorder' with 'kind' set to 'row', whose 'keys' hold every key of 'rows' in the new order. **You move the rows**: set 'rows' to the new order, and the table draws it. Set 'row-key', so a row is known by its key once it has moved. The grips do nothing while a 'sort' is set, since the sort decides the order, and a tree grid draws none. 'csv()' returns the result as text: every row that passes the filter, in the order and the columns on screen. Saving the file is up to you. 'DataTable' has no 'columns' attribute. Each 'TableColumn' is part of the schema, so you size a column with its own 'width'. 'Table' has 'columns' because its cells are markup you write and it can have no columns at all. Written on 'DataTable', 'columns' has no effect, so watch for it when you move a table from 'Table' to 'DataTable'. */
|
|
18306
|
+
/** Declare the columns as 'TableColumn' children and pass the rows as an array. The schema stays readable in the HTML, and the rows can be windowed, which ten thousand row elements cannot be. '''html <helix-headless-data-table .rows=${rows} sort="name:asc" page-size="20"> <helix-headless-table-column field="name" sortable>Name</helix-headless-table-column> <helix-headless-table-column field="size" text-align="end" sortable .cell=${bytes}>Size</helix-headless-table-column> </helix-headless-data-table> ''' For a short table written out by hand, use 'Table', which takes rows as markup. Sort and filter apply to the whole set, including the rows on other pages. **The cell values do not server-render.** The headings and the row elements do. Reading a cell needs the columns, and Lit SSR does not pass the column children to this element, so a crawler sees an empty table of the right shape. Use 'Table' when the served HTML has to carry the values. 'selectable' adds a column of checkboxes, keyed on 'row-key': - A row is selected by its key, so the selection survives a sort, a filter, and a page change. - 'selected' holds the chosen keys, comma separated, the same shape 'Listbox' uses for a multiple choice. As with 'sort', writing it applies the selection, and 'default-selected' holds what the markup declared. - The checkbox in the heading selects every row in the result, across pages, and shows a dash while only some are chosen. - Shift with a press on a checkbox selects every row between it and the row last chosen. - 'selection-behavior="replace"' makes a press or a move select the row alone, as a file list does. Control or Command with a press adds or takes out one row, and Shift with a press selects every row from the one last chosen. To act on a single row, such as opening it, put a link or a button in a cell. **Keyboard.** The grid is one tab stop, and the arrow keys move between its cells, the headings included. | Key | What it does | |---|---| | Right, Left | Moves one cell along the row. Left moves on, on a right-to-left page. | | Down, Up | Moves one row, the heading row and the 'load-more' row included. | | Home, End | Moves to the first or the last cell of the row. | | Control with Home or End | Moves to the first or the last cell of the grid. | | Page Down, Page Up | Moves by the rows that fit in view. | | Enter, F2 | Moves into the cell's controls. Escape moves back to the cell, and Tab moves between the controls of one cell. | | Enter, Space on a sortable heading | Sorts by the column. | | Enter, Space on the 'load-more' row | Sends 'helix-load-more'. | | Space on a row | Selects the row, in a 'selectable' table. Under 'selection-behavior="replace"', selects it alone, and Control or Command with Space adds or takes out the row. | | Down, Up, Page Down, Page Up under 'selection-behavior="replace"' | Selects the row it moves to alone. Control or Command with the key moves without selecting. | | Shift with Down or Up | Selects the rows it moves across, in a 'selectable' table. | | Shift with Space | Selects every row from the one last chosen, in a 'selectable' table. | | Control or Command with A | Selects every row, in a 'selectable' table. | | Right on a row header in a tree grid | Opens a closed row, and moves one cell along an open one. | | Left on a row header in a tree grid | Closes an open row, and moves to the parent of a closed one. | | A letter or a word | Moves to the next row whose row header starts with what you typed. | 'selected' and 'expanded' hold their keys in the order of the rows, as do 'helix-select', 'helix-selected' and 'helix-expand'. Each row is named by its row header, the column marked 'row-header', or the first column with a 'field' where none is. A screen reader says it as a reader moves between rows. **Rows that hold rows.** 'child-field' names the field that holds a row's child rows, and the grid becomes a tree grid. The row header column draws a mark that a press opens and closes a row by, and 'expanded' holds the keys of the open rows, which 'row-key' names. Right on a closed row's header opens it, Left on an open one closes it, and Left on a child moves to its parent. A sort orders the rows under each parent, and a search shows the rows that lead to each match, open. 'load-more' adds a row after the last one with a button that sends 'helix-load-more'. A 'windowed' table also sends it by itself once a reader scrolls within one screen of the end, once for each number of rows. Add the next rows to 'rows', and set 'loading' while they are on their way. When a fetch fails, set 'error-text', such as "The files did not load", and put a button that tries again in the 'error' slot. The line shows after the rows in place of the empty and loading lines, the live region says it, and the table takes the 'error' state. Clear it once you try again. The controls inside the cells leave the tab order, so Tab moves past the whole grid. A windowed table keeps the row holding focus drawn while the rest scroll away. People can resize and reorder the columns. 'resizable' on a column puts a separator on its edge. 'reorderable' on the table puts a grip on each heading that has a 'field', moved by dragging or with the arrow keys. The new order is written to 'order' as a list of fields. Your markup is not rewritten: the table assigns the headings to its header in that order. **'reorderable-rows' lets people move rows.** A column of grips leads each row, named by 'move-row-label'. Drag a grip to move its row, and the table scrolls near an edge. Or press Space or Enter on a grip, or click it, to pick up its row, move it with Down and Up, Home and End, and press Space or Enter again to drop it. A click on another row drops it there, and Escape puts it back. The table says each step in its 'live' region. A drop sends 'helix-before-reorder', which you can refuse, and then 'helix-reorder' with 'kind' set to 'row', whose 'keys' hold every key of 'rows' in the new order. **You move the rows**: set 'rows' to the new order, and the table draws it. Set 'row-key', so a row is known by its key once it has moved. The grips do nothing while a 'sort' is set, since the sort decides the order, and a tree grid draws none. 'csv()' returns the result as text: every row that passes the filter, in the order and the columns on screen. Saving the file is up to you. 'DataTable' has no 'columns' attribute. Each 'TableColumn' is part of the schema, so you size a column with its own 'width'. 'Table' has 'columns' because its cells are markup you write and it can have no columns at all. Written on 'DataTable', 'columns' has no effect, so watch for it when you move a table from 'Table' to 'DataTable'. */
|
|
17463
18307
|
"helix-headless-data-table": DefineCustomElement<
|
|
17464
18308
|
HelixHeadlessDataTable,
|
|
17465
18309
|
HelixHeadlessDataTableVueProps,
|
|
17466
18310
|
HelixHeadlessDataTableVueEvents
|
|
17467
18311
|
>;
|
|
17468
|
-
/** The calendar is 'DatePicker', which handles months, ranges, disabled days, the first day of the week, and the grid's keyboard behavior. The date input adds the field, the overlay, and the connection between them. You can type a date as well as pick one. The native '<input type="date">' gives a picker and locale formatting but allows almost no styling, so the field is a text field. Typing sends 'input' on each keystroke and 'change' when you leave the field, as a text field does. A date picked from the calendar sends both. The trigger and ArrowDown open the calendar with focus on the selected day, Tab moves between the calendar's controls without leaving it, and Escape closes it and returns focus to the field. A press into the field opens the calendar too. Tab into the field opens nothing, and Tab out of the field closes the calendar. With 'segmented', the field is a row of segments in place of the text: a month, a day and a year in the order the locale writes them, each set with digits or the arrow keys. Alt+Down opens the calendar from a segment. */
|
|
18312
|
+
/** The calendar is 'DatePicker', which handles months, ranges, disabled days, the first day of the week, and the grid's keyboard behavior. The date input adds the field, the overlay, and the connection between them. You can type a date as well as pick one. The native '<input type="date">' gives a picker and locale formatting but allows almost no styling, so the field is a text field. Typing sends 'input' on each keystroke and 'change' when you leave the field, as a text field does. A date picked from the calendar sends both. The trigger and ArrowDown open the calendar with focus on the selected day, Tab moves between the calendar's controls without leaving it, and Escape closes it and returns focus to the field. A press into the field opens the calendar too. Tab into the field opens nothing, and Tab out of the field closes the calendar. With 'segmented', the field is a row of segments in place of the text: a month, a day and a year in the order the locale writes them, each set with digits or the arrow keys. Alt+Down opens the calendar from a segment. Text that is not a date gives the form an empty value, as a native date field does, and 'value' keeps the text so it can be corrected. **Keyboard.** The field is one tab stop, or each segment is with 'segmented', and the trigger is one more. | Key | What it does | |---|---| | Down | In the text field, opens the calendar with focus on the chosen day. | | Alt with Down | Opens the calendar, from the text field or a segment. | | Enter | In the text field, takes the typed date and submits the form, as a native field does. | | Escape | Closes the calendar and puts focus back in the field. | | Tab | In the open calendar, moves between its controls. Out of the field, closes it. | | Up, Down on a segment | Steps the segment by one, round from its last value to its first. | | Page Up, Page Down on a segment | Steps by a page: a week of days, two months, or five years. | | Home, End on a segment | Goes to the segment's first or last value. | | Digits on a segment | Fill it, and move to the next once it can take no more. | | Backspace, Delete on a segment | Empty the segment. | | Left, Right on a segment | Move to the previous or the next segment, along the line of text. | In the calendar, the keys are 'DatePicker''s: the arrows move by a day or a week, Page Up and Page Down by a month, with Shift by a year, and Home and End to the start and the end of the week. */
|
|
17469
18313
|
"helix-headless-date-input": DefineCustomElement<
|
|
17470
18314
|
HelixHeadlessDateInput,
|
|
17471
18315
|
HelixHeadlessDateInputVueProps,
|
|
@@ -17513,13 +18357,13 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
17513
18357
|
HelixHeadlessDrawerVueProps,
|
|
17514
18358
|
HelixHeadlessDrawerVueEvents
|
|
17515
18359
|
>;
|
|
17516
|
-
/** A row that opens a page contains that page: the page's rows are this row's own children, assigned to the 'page' slot. There are no ids to wire, and moving a row moves its page with it. What the item renders depends on the stack: - On the page that is showing, it renders its row. - When its own page is showing, it renders only that page's rows. Its row belongs to the page above. - When a page further down its own is showing, it renders its page's slot alone, so the rows below reach the page. - Otherwise it renders nothing. The rows stay in the light DOM untouched, so there is no state to keep. Choosing a row dispatches an event, and the stack decides whether that drills in or runs a command. A row that opens a page shows a caret after its text and sets 'aria-haspopup', the same way 'Menu' marks a row with a submenu. The server render leaves both out, because the server cannot see the children. The row is named by its label alone. Words in 'description', a line under the label, and in 'end' describe it instead, through 'aria-describedby', as 'Menu.Item' does: a reader hears "Theme", then "Dark". */
|
|
18360
|
+
/** A row that opens a page contains that page: the page's rows are this row's own children, assigned to the 'page' slot. There are no ids to wire, and moving a row moves its page with it. What the item renders depends on the stack: - On the page that is showing, it renders its row. - When its own page is showing, it renders only that page's rows. Its row belongs to the page above. - When a page further down its own is showing, it renders its page's slot alone, so the rows below reach the page. - Otherwise it renders nothing. The rows stay in the light DOM untouched, so there is no state to keep. Choosing a row dispatches an event, and the stack decides whether that drills in or runs a command. A row that opens a page shows a caret after its text and sets 'aria-haspopup', the same way 'Menu' marks a row with a submenu. The server render leaves both out, because the server cannot see the children. **A row with an 'href' is a link.** The row itself renders as an '<a>' carrying 'menuitem', as 'Menu.Item' does, so a middle click, a modified click and the status bar keep working. Enter follows it, and Space does too. Choosing it fires 'helix-select' first: cancel the event and the link is not followed, so a router can take the navigation. A row that opens a page, or a disabled row, renders no link. A development build warns when a row has no words to be named by, such as a row holding only an icon with no label. The row is named by its label alone. Words in 'description', a line under the label, and in 'end' describe it instead, through 'aria-describedby', as 'Menu.Item' does: a reader hears "Theme", then "Dark". */
|
|
17517
18361
|
"helix-headless-drilldown-item": DefineCustomElement<
|
|
17518
18362
|
HelixHeadlessDrilldownItem,
|
|
17519
18363
|
HelixHeadlessDrilldownItemVueProps,
|
|
17520
18364
|
HelixHeadlessDrilldownItemVueEvents
|
|
17521
18365
|
>;
|
|
17522
|
-
/** One panel whose content changes as you move between pages. Use it where there is no room for a second column, such as on a phone, or on a touch screen with no hover to open one. It is a region that stays where you put it, such as inside a drawer, a sidebar, or a settings panel. A 'Menu' opens from a trigger and closes when you are done. 'Menu' can drill into pages too, through the same controller. Rows are places to go and commands to run. Nothing here is form-associated and nothing is submitted. To choose a value, use a 'Listbox'. A row that opens a page contains that page, so the stack holds one reference and reads the rest from the DOM. The behavior lives in 'DrilldownController', which 'Menu' shares. After each move the host carries 'data-direction', 'forward' into a page or 'back' out of one, and records ':state(forward)' or ':state(back)', so a stylesheet can slide the new page in from the side the reader is going. Both are written again on every move, so an animation keyed on them runs for each page, two moves the same way included. The styled tier slides the page and swaps it at once under 'prefers-reduced-motion'.
|
|
18366
|
+
/** One panel whose content changes as you move between pages. Use it where there is no room for a second column, such as on a phone, or on a touch screen with no hover to open one. It is a region that stays where you put it, such as inside a drawer, a sidebar, or a settings panel. A 'Menu' opens from a trigger and closes when you are done. 'Menu' can drill into pages too, through the same controller. Rows are places to go and commands to run. Nothing here is form-associated and nothing is submitted. To choose a value, use a 'Listbox'. A row that opens a page contains that page, so the stack holds one reference and reads the rest from the DOM. The behavior lives in 'DrilldownController', which 'Menu' shares. **'page' is the page showing**, as the 'value' of the row that opens it, and empty on the top page. Set it to show a page, such as one a link to a settings screen names. A reader's move updates it, and 'helix-navigate' comes first, so you can refuse the move or take it yourself. After each move the host carries 'data-direction', 'forward' into a page or 'back' out of one, and records ':state(forward)' or ':state(back)', so a stylesheet can slide the new page in from the side the reader is going. Both are written again on every move, so an animation keyed on them runs for each page, two moves the same way included. The styled tier slides the page and swaps it at once under 'prefers-reduced-motion'. **Keyboard.** The drilldown is one tab stop, on the row last focused. | Key | What it does | |---|---| | Down Arrow, Up Arrow | Moves to the next or the previous row. | | Home, End | Moves to the first or the last row. | | A letter | Moves to the next row whose name starts with it. | | Enter, Space | Chooses the row: opens its page, follows its link, or sends 'helix-select'. | | Right Arrow | Opens the row's page. Left Arrow on a right-to-left page. | | Left Arrow, Escape | Goes back one page, with focus on the row that opened it. Right Arrow on a right-to-left page. | The rows of the page showing are a 'menu', named by 'label' on the top page and by the page's title below it. **'navigation' makes it a site's navigation.** The host is a 'navigation' landmark named by 'label', each page is a list, and each row is a list item holding a link or a button, as the APG's disclosure navigation is built, so a reader meets places to go in place of a menu of commands. The keys stay the same. The back button and the title sit above the menu. Disabled rows stay reachable with the arrow keys, and typing a letter moves to the next row whose name starts with it. */
|
|
17523
18367
|
"helix-headless-drilldown": DefineCustomElement<
|
|
17524
18368
|
HelixHeadlessDrilldown,
|
|
17525
18369
|
HelixHeadlessDrilldownVueProps,
|
|
@@ -17645,7 +18489,7 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
17645
18489
|
HelixHeadlessListItemVueProps,
|
|
17646
18490
|
HelixHeadlessListItemVueEvents
|
|
17647
18491
|
>;
|
|
17648
|
-
/** Sets 'role="list"' on the host, so a screen reader counts the rows and announces each one's position, such as "1 of 7". **'selection-mode' makes the list interactive**, in the way of a grid list: a grid of rows that is one tab stop. 'single' selects one row at a time and 'multiple' any number, and 'value' holds the selected rows' values, separated by commas. A change asks with 'helix-before-change' and tells with 'change'. 'none' selects nothing, so a press acts on the row. A 'disabled' row is passed over. Each row is named by its label and described by its description, so the words of the controls in 'end' are not read as part of its name. 'selection-behavior' says what a press does to the rows already selected. 'toggle', the default, adds or takes out the row. 'replace' selects the row alone, as a file list does, and the arrow keys carry the selection with them. Control or Command with a press then adds or takes out one row. | Key | What it does | |---|---| | Down, Up | Moves to the next or the previous row. Under 'replace', selects it. | | Home, End | Moves to the first or the last row. Under 'replace', selects it. | | Page Down, Page Up | Moves a box's height of rows, so the row at one edge lands at the other. Under 'replace', selects the row it lands on. | | A letter or a word | Moves to the next row whose words start with what you typed. | | Left, Right | Moves between the row and the controls in its 'end' slot. | | Space | Selects the row, or lets it go. | | Shift with Down, Up, Home, End, Page Down, Page Up or Space | Selects every row from the last one pressed, in 'multiple'. | | Control or Command with Down, Up, Home, End, Page Down or Page Up | Moves without selecting, under 'replace'. | | Control or Command with A | Selects every row, in 'multiple'. | | Escape | Lets go of every selected row, asking first, and keeps the key from the dialog or menu around the list. With nothing selected, the key goes on to them. | | Enter | Acts on the row: follows its link, or sends 'helix-action' from it. | A press with Shift selects every row from the last one pressed, and a press with Control or Command adds or takes out one row under 'replace'. **Leave 'selection-mode' unset for a list a reader reads**, and set it for one a reader chooses from or acts on. The rows of an interactive list are grid rows, which hold controls as a list box option cannot. Give a control in 'end' 'tabindex="-1"' to leave it to the arrow keys and out of the tab order. **'reorderable' lets you move rows.** Each row gets a grip after its 'end' slot, named by 'move-label'. Drag a grip to move its row, and the list scrolls near an edge. Or press a grip with Space, Enter, or a click to pick up its row, move it with the arrow keys, and press the grip again to drop it. A click on another row drops it there, and Escape puts it back. The list says each step in its 'live' region. A drop sends 'helix-before-reorder', which you can refuse, and then 'helix-reorder', whose 'keys' hold every row's value in the new order. **You move the rows**: the list moves no element of yours, so your framework keeps the order it rendered. | Key, on a held row's grip | What it does | |---|---| | Down, Up | Moves the row one place. | | Home, End | Moves the row to the top or the bottom. | | Space, Enter | Drops the row. | | Escape | Puts the row back where it was. | 'start' and 'reversed' number an ordered list as '<ol>' does. The list writes where the numbers start and which way they run as '--list-first' and '--list-step' on its slot, which the styled tier counts from. Reversed with no 'start' counts down from the number of rows, which a server cannot know, so served markup counts from one until the list runs. */
|
|
18492
|
+
/** Sets 'role="list"' on the host, so a screen reader counts the rows and announces each one's position, such as "1 of 7". **'selection-mode' makes the list interactive**, in the way of a grid list: a grid of rows that is one tab stop. 'single' selects one row at a time and 'multiple' any number, and 'value' holds the selected rows' values, separated by commas. A change asks with 'helix-before-change' and tells with 'change'. 'none' selects nothing, so a press acts on the row. A 'disabled' row is passed over. Each row is named by its label and described by its description, so the words of the controls in 'end' are not read as part of its name. 'selection-behavior' says what a press does to the rows already selected. 'toggle', the default, adds or takes out the row. 'replace' selects the row alone, as a file list does, and the arrow keys carry the selection with them. Control or Command with a press then adds or takes out one row. | Key | What it does | |---|---| | Down, Up | Moves to the next or the previous row. Under 'replace', selects it. | | Home, End | Moves to the first or the last row. Under 'replace', selects it. | | Page Down, Page Up | Moves a box's height of rows, so the row at one edge lands at the other. Under 'replace', selects the row it lands on. | | A letter or a word | Moves to the next row whose words start with what you typed. | | Left, Right | Moves between the row and the controls in its 'end' slot. | | Space | Selects the row, or lets it go. | | Shift with Down, Up, Home, End, Page Down, Page Up or Space | Selects every row from the last one pressed, in 'multiple'. | | Control or Command with Down, Up, Home, End, Page Down or Page Up | Moves without selecting, under 'replace'. | | Control or Command with A | Selects every row, in 'multiple'. | | Escape | Lets go of every selected row, asking first, and keeps the key from the dialog or menu around the list. With nothing selected, the key goes on to them. | | Enter | Acts on the row: follows its link, or sends 'helix-action' from it. | A press with Shift selects every row from the last one pressed, and a press with Control or Command adds or takes out one row under 'replace'. **Leave 'selection-mode' unset for a list a reader reads**, and set it for one a reader chooses from or acts on. The rows of an interactive list are grid rows, which hold controls as a list box option cannot. Give a control in 'end' 'tabindex="-1"' to leave it to the arrow keys and out of the tab order. **'reorderable' lets you move rows.** Each row gets a grip after its 'end' slot, named by 'move-label'. Drag a grip to move its row, and the list scrolls near an edge. Or press a grip with Space, Enter, or a click to pick up its row, move it with the arrow keys, and press the grip again to drop it. A click on another row drops it there, and Escape puts it back. The list says each step in its 'live' region. A drop sends 'helix-before-reorder', which you can refuse, and then 'helix-reorder', whose 'keys' hold every row's value in the new order. **You move the rows**: the list moves no element of yours, so your framework keeps the order it rendered. | Key, on a held row's grip | What it does | |---|---| | Down, Up | Moves the row one place. | | Home, End | Moves the row to the top or the bottom. | | Space, Enter | Drops the row. | | Escape | Puts the row back where it was. | 'start' and 'reversed' number an ordered list as '<ol>' does. The list writes where the numbers start and which way they run as '--list-first' and '--list-step' on its slot, which the styled tier counts from. Reversed with no 'start' counts down from the number of rows, which a server cannot know, so served markup counts from one until the list runs. **An empty list.** Set 'empty-label', or put your own content in the 'empty' slot, for a row shown while the list has no rows and none are loading, such as "No files yet" and a link to add one. Without either, an empty list shows nothing. The list takes the 'empty' state while it has no rows, whatever it shows. **Loading more.** 'load-more' sends 'helix-load-more' once the end of the list comes within a screen of view, in the box that scrolls it or the page, once for each number of rows: add rows and it can send it again. While you fetch, set 'loading': the list is busy, and a row after the last says "Loading more" ('loading-label', or your own content in the 'loading' slot). The list asks for nothing while 'loading' is set. An interactive list with no name is reported once in a development build, since a screen reader announces it as a grid and nothing more. Name it with 'label' or 'aria-label'. */
|
|
17649
18493
|
"helix-headless-list": DefineCustomElement<
|
|
17650
18494
|
HelixHeadlessList,
|
|
17651
18495
|
HelixHeadlessListVueProps,
|
|
@@ -17729,19 +18573,19 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
17729
18573
|
HelixHeadlessMapTerrainVueProps,
|
|
17730
18574
|
HelixHeadlessMapTerrainVueEvents
|
|
17731
18575
|
>;
|
|
17732
|
-
/** A disclosure: a button that shows and hides a region of your own links. It does not use 'role="menu"' or 'menuitem', which are for application commands. Those roles take over the arrow keys, announce "menu" to someone looking for navigation, and put every link inside a role that is not a link. As a disclosure, middle clicks, modified clicks, and the status bar keep working. Use 'Menu' for a row of commands. It renders no links. A router renders its own anchors and cannot render them inside this shadow root, so the panel is a slot for the lists and headings you write. It opens on hover by default, and a press always opens it too. 'open-on' sets which. Hover is the default because in a navigation bar people expect to move along the row and see each section. When one panel opens in place of another, each says which way the reader moved, as Radix's 'data-motion' does. Moving toward the end of the bar, the one opening is ':state(from-end)' and the one closing is ':state(to-start)'; moving back, they are ':state(from-start)' and ':state(to-end)'. A stylesheet slides them on that. Start and end follow the reading direction, so on a right-to-left page the end is on the left. A panel that opens or closes on its own carries none of the four. A press on another megamenu's trigger hands over the same way as hovering it. While a panel is open its surface carries its own size, as '--megamenu-surface-inline-size' and '--megamenu-surface-block-size', and a panel that took over from another also carries that one's size, as '--megamenu-from-inline-size' and '--megamenu-from-block-size'. Radix's navigation menu publishes the same pair from its shared viewport, so a stylesheet can grow or shrink one panel into the next. The panel's default slot is the 'columns' part and draws no box, so a sheet can give the columns one of their own. While a panel is open, an 'indicator' slot is rendered beside its trigger, as Radix's indicator marks the open one: slot a mark of your own, such as a bar or an arrow pointing at the panel, and it shows only while the panel is open. The styled tier rests it on the trigger's bottom edge. Left and Right Arrow move between the triggers of the megamenus beside this one, and Home and End go to the first and the last, as Radix's navigation menu does. In a 'Navigation', which holds them in a slot, the arrows are the navigation's, and move between its destinations under its 'arrows'. Down Arrow on the trigger of an open panel moves focus to the panel's first link, Escape closes the panel and returns focus to its trigger, and Tab moves through the panel's links and closes it on the way out. The trigger says 'aria-expanded', and the panel is a group named by 'label'. */
|
|
18576
|
+
/** A disclosure: a button that shows and hides a region of your own links. It does not use 'role="menu"' or 'menuitem', which are for application commands. Those roles take over the arrow keys, announce "menu" to someone looking for navigation, and put every link inside a role that is not a link. As a disclosure, middle clicks, modified clicks, and the status bar keep working. Use 'Menu' for a row of commands. It renders no links. A router renders its own anchors and cannot render them inside this shadow root, so the panel is a slot for the lists and headings you write. It opens on hover by default, and a press always opens it too. 'open-on' sets which. Hover is the default because in a navigation bar people expect to move along the row and see each section. A pointer resting on the trigger opens the panel after 'open-delay', and leaving closes it after 'close-delay'. Moving from one open panel's trigger to another's opens the next at once, as Radix's 'skipDelayDuration' does. When one panel opens in place of another, each says which way the reader moved, as Radix's 'data-motion' does. Moving toward the end of the bar, the one opening is ':state(from-end)' and the one closing is ':state(to-start)'; moving back, they are ':state(from-start)' and ':state(to-end)'. A stylesheet slides them on that. Start and end follow the reading direction, so on a right-to-left page the end is on the left. A panel that opens or closes on its own carries none of the four. A press on another megamenu's trigger hands over the same way as hovering it. While a panel is open its surface carries its own size, as '--megamenu-surface-inline-size' and '--megamenu-surface-block-size', and a panel that took over from another also carries that one's size, as '--megamenu-from-inline-size' and '--megamenu-from-block-size'. Radix's navigation menu publishes the same pair from its shared viewport, so a stylesheet can grow or shrink one panel into the next. While a link in the panel carries 'aria-current="page"', the host has ':state(current)', so the trigger of the section holding the page you are on can say so, as Radix's navigation menu marks its active link. The panel's default slot is the 'columns' part and draws no box, so a sheet can give the columns one of their own. While a panel is open, an 'indicator' slot is rendered beside its trigger, as Radix's indicator marks the open one: slot a mark of your own, such as a bar or an arrow pointing at the panel, and it shows only while the panel is open. The styled tier rests it on the trigger's bottom edge. Left and Right Arrow move between the triggers of the megamenus beside this one, and Home and End go to the first and the last, as Radix's navigation menu does. In a 'Navigation', which holds them in a slot, the arrows are the navigation's, and move between its destinations under its 'arrows'. Down Arrow on the trigger of an open panel moves focus to the panel's first link, Escape closes the panel and returns focus to its trigger, and Tab moves through the panel's links and closes it on the way out. The trigger says 'aria-expanded', and the panel is a group named by 'label'. A Helix trigger, such as 'helix-button', is told whether the panel is open inside its own shadow root. On a plain element, such as a '<button>', the megamenu writes 'aria-expanded', from a frame after its own first render, so a server's markup is never changed while a framework hydrates it. It never writes it where you wrote 'aria-expanded' yourself. */
|
|
17733
18577
|
"helix-headless-megamenu": DefineCustomElement<
|
|
17734
18578
|
HelixHeadlessMegamenu,
|
|
17735
18579
|
HelixHeadlessMegamenuVueProps,
|
|
17736
18580
|
HelixHeadlessMegamenuVueEvents
|
|
17737
18581
|
>;
|
|
17738
|
-
/** One element covers three kinds of row, and what you give it decides which: - Content in the 'submenu' slot makes the row open a submenu page. - 'checked' makes the row a choice. - With neither, the row is a command. The role follows the kind. A row with 'checked' is 'menuitemcheckbox' with 'aria-checked', and 'exclusive' makes it 'menuitemradio', for a set where only one can be on. A row that opens a page keeps 'menuitem' and sets 'aria-haspopup'. Choosing a choice row checks or unchecks it before 'helix-select' is sent, so a listener reads the new 'checked'. An 'exclusive' row turns on and turns off the 'exclusive' rows next to it. Cancel 'helix-before-toggle' to keep a row as it is and set 'checked' yourself. The menu sets whether the row's page is showing as a property, never as an attribute. An attribute written onto your element after it upgrades causes a hydration mismatch. 'shortcut' shows a row's keyboard shortcut after its label, drawn by 'Kbd' in the platform's glyphs, and gives the row 'aria-keyshortcuts'. It binds nothing: the shortcut is the page's to bind. Other trailing words, such as a count, go in the 'end' slot. The row is named by its label alone. Words in 'description', a line under the label, and in 'end' describe it instead, through 'aria-describedby', as React Aria's menu item does with its description: a reader hears "Copy", then "Copies the selection". The check mark and the caret are the fallbacks of the 'check' and 'chevron' slots, so a mark of your own replaces either by being slotted. Neither is read as part of the row's name. */
|
|
18582
|
+
/** One element covers three kinds of row, and what you give it decides which: - Content in the 'submenu' slot makes the row open a submenu page. - 'checked' makes the row a choice. - With neither, the row is a command. The role follows the kind. A row with 'checked' is 'menuitemcheckbox' with 'aria-checked', and 'exclusive' makes it 'menuitemradio', for a set where only one can be on. A row that opens a page keeps 'menuitem' and sets 'aria-haspopup'. Choosing a choice row checks or unchecks it before 'helix-select' is sent, so a listener reads the new 'checked'. An 'exclusive' row turns on and turns off the 'exclusive' rows next to it. Cancel 'helix-before-toggle' to keep a row as it is and set 'checked' yourself. The menu sets whether the row's page is showing as a property, never as an attribute. An attribute written onto your element after it upgrades causes a hydration mismatch. 'shortcut' shows a row's keyboard shortcut after its label, drawn by 'Kbd' in the platform's glyphs, and gives the row 'aria-keyshortcuts'. It binds nothing: the shortcut is the page's to bind. Other trailing words, such as a count, go in the 'end' slot. The row is named by its label alone. Words in 'description', a line under the label, and in 'end' describe it instead, through 'aria-describedby', as React Aria's menu item does with its description: a reader hears "Copy", then "Copies the selection". A development build warns when a row has no words to be named by, such as a row holding only an icon with no label. The check mark and the caret are the fallbacks of the 'check' and 'chevron' slots, so a mark of your own replaces either by being slotted. Neither is read as part of the row's name. */
|
|
17739
18583
|
"helix-headless-menu-item": DefineCustomElement<
|
|
17740
18584
|
HelixHeadlessMenuItem,
|
|
17741
18585
|
HelixHeadlessMenuItemVueProps,
|
|
17742
18586
|
HelixHeadlessMenuItemVueEvents
|
|
17743
18587
|
>;
|
|
17744
|
-
/** The trigger is slotted and stays your own element, as with the tooltip. The menu renders its surface in the top layer with the popover API, so an ancestor with 'overflow: hidden' does not clip it and it needs no 'z-index'. Slot a 'helix-button' or 'helix-icon-button' as the trigger, and the menu tells it that it opens a menu and whether the menu is open
|
|
18588
|
+
/** The trigger is slotted and stays your own element, as with the tooltip. The menu renders its surface in the top layer with the popover API, so an ancestor with 'overflow: hidden' does not clip it and it needs no 'z-index'. Slot a 'helix-button' or 'helix-icon-button' as the trigger, and the menu tells it that it opens a menu and whether the menu is open, inside its own shadow root. On a plain element, such as a '<button>', the menu writes 'aria-haspopup="menu"' and 'aria-expanded', from a frame after its own first render, so a server's markup is never changed while a framework hydrates it. It never writes 'aria-expanded' where you wrote it yourself. Submenus drill down by default. A submenu replaces the panel's content, and a back row returns to the previous page. One panel stays inside a narrow window, and works on touch screens, which have no hover. **'submenus="flyout"' opens each submenu in a panel of its own beside its row**, as React Aria's 'SubmenuTrigger' and Radix's 'Sub' do. Resting the pointer on the row opens it, and a pointer crossing toward the open panel over the rows between keeps it open, as Radix's grace area does. Right Arrow opens a row's submenu on its first row, and Left Arrow or Escape closes it and returns focus to the row, the two arrows swapping on a right-to-left page. The row says 'aria-expanded', and the panel is a 'menu' named by the row. The root holds which page is open, because only one page shows at a time. It sets this on items as a property, never as an attribute. An attribute written onto your element after it upgrades causes a hydration mismatch. Group rows under a heading with 'Menu.Section', which is a 'group' named by its heading. Between runs of rows, a '<helix-divider>' is a separator a screen reader announces. Keys: Enter, Space or Down Arrow on the trigger opens the menu on its first row, and Up Arrow on its last. In the menu, Up and Down Arrow move between rows, Home and End go to the first and the last, a typed letter moves to the next row whose name starts with it, Enter and Space choose, Right Arrow opens a row's submenu and Left Arrow goes back, the two swapping on a right-to-left page, and Escape closes the menu and returns focus to the trigger. Tab closes it and moves on. While it is open, the surface carries the trigger's width as '--floating-anchor-inline-size' and the room left below it as '--floating-available-block-size', as Radix's dropdown menu publishes its trigger's width, for a menu as wide as its trigger: 'helix-menu::part(surface) { min-inline-size: var(--floating-anchor-inline-size) }'. With 'context', the trigger is an area and the menu is its context menu: a right-click, a long press, Shift+F10 or the menu key over the area opens it at the pointer, or at the area's corner from the keyboard, as Radix's context menu does. A press on the area does not open it, and closing it returns focus to where it was. A touch or a pen held still on the area opens it too, on every browser, since iOS sends no 'contextmenu' for one. **A trigger with its own action.** With 'open-on="long-press"', a press on the trigger is the trigger's own, and a press held for half a second opens the menu, as React Aria's 'trigger="longPress"' does. Alt+Down or Alt+Up opens it from the keyboard, and the trigger is described by 'long-press-label', which says so. */
|
|
17745
18589
|
"helix-headless-menu": DefineCustomElement<
|
|
17746
18590
|
HelixHeadlessMenu,
|
|
17747
18591
|
HelixHeadlessMenuVueProps,
|
|
@@ -17777,19 +18621,19 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
17777
18621
|
HelixHeadlessNotificationVueProps,
|
|
17778
18622
|
HelixHeadlessNotificationVueEvents
|
|
17779
18623
|
>;
|
|
17780
|
-
/** Notifications are slotted children. Each one is your own markup, with an avatar, a link, or a button in it. Feeds usually hold tens of items, so writing them out lets an item hold anything. The list does not virtualize. Windowing needs the list to own the data, and here you own it, so N notifications are N elements. For a feed of thousands, use a data table with a custom cell. Read state is reported to you. Marking read goes from the root to the item and from the item to you, so a canceled 'helix-read' changes nothing, and if you own 'read', nothing changes until you set it. 'unread' is derived from the items and written to an attribute, so a stylesheet and a badge can both use it without counting. **The feed is one 'Tab' stop for its rows.** Each row takes focus itself and is read by its label. 'ArrowDown' and 'ArrowUp' move to the next and the previous row, 'Home' and 'End' to the first and the last, and 'PageDown' and 'PageUp' move a row on or back from anywhere inside one, as in the APG feed pattern. The controls inside a row stay in the 'Tab' order. Set 'total' when the feed holds one page of a longer list, and each row says its place in the whole of it. **Keyboard.** | Key | What it does | |---|---| | Down, Up | On a row, moves to the next or the previous row. | | Home, End | On a row, moves to the first or the last row. | | Page Down, Page Up | From anywhere in a row, moves to the next or the previous row. | | Control+End | From anywhere in the feed, moves to the first control after it on the page. | | Control+Home | From anywhere in the feed, moves to the nearest control before it on the page. | | Tab | Moves through the controls in a row, and on out of the feed. | **'load-more' adds a button after the list** that sends 'helix-load-more', for a feed that holds one page of a longer list. Append the next page, set 'loading' while it is on its way, and take 'load-more' off once there is nothing more. While the feed is loading the button stays, so focus stays on it, and it is 'aria-disabled' and sends nothing. **'load-error' says a page could not be fetched**, such as "Could not load notifications": it shows under the rows there are, in the 'error' part, in place of the empty and loading lines, and a screen reader hears it. Clear it when you ask again. */
|
|
18624
|
+
/** Notifications are slotted children. Each one is your own markup, with an avatar, a link, or a button in it. Feeds usually hold tens of items, so writing them out lets an item hold anything. The list does not virtualize. Windowing needs the list to own the data, and here you own it, so N notifications are N elements. For a feed of thousands, use a data table with a custom cell. Read state is reported to you. Marking read goes from the root to the item and from the item to you, so a canceled 'helix-read' changes nothing, and if you own 'read', nothing changes until you set it. 'unread' is derived from the items and written to an attribute, so a stylesheet and a badge can both use it without counting. **The feed is one 'Tab' stop for its rows.** Each row takes focus itself and is read by its label. 'ArrowDown' and 'ArrowUp' move to the next and the previous row, 'Home' and 'End' to the first and the last, and 'PageDown' and 'PageUp' move a row on or back from anywhere inside one, as in the APG feed pattern. The controls inside a row stay in the 'Tab' order. Set 'total' when the feed holds one page of a longer list, and each row says its place in the whole of it. **Keyboard.** | Key | What it does | |---|---| | Down, Up | On a row, moves to the next or the previous row. | | Home, End | On a row, moves to the first or the last row. | | Page Down, Page Up | From anywhere in a row, moves to the next or the previous row. | | Control+End | From anywhere in the feed, moves to the first control after it on the page. | | Control+Home | From anywhere in the feed, moves to the nearest control before it on the page. | | Tab | Moves through the controls in a row, and on out of the feed. | **A notification that arrives says so.** Unread rows added above the rows there were are counted in the live region, "1 new notification", in 'arrived-label'. Rows that arrive while 'loading' is set say nothing, so set it while a page is on its way. **'load-more' adds a button after the list** that sends 'helix-load-more', for a feed that holds one page of a longer list. Append the next page, set 'loading' while it is on its way, and take 'load-more' off once there is nothing more. While the feed is loading the button stays, so focus stays on it, and it is 'aria-disabled' and sends nothing. **'load-error' says a page could not be fetched**, such as "Could not load notifications": it shows under the rows there are, in the 'error' part, in place of the empty and loading lines, and a screen reader hears it. Clear it when you ask again. */
|
|
17781
18625
|
"helix-headless-notifications": DefineCustomElement<
|
|
17782
18626
|
HelixHeadlessNotifications,
|
|
17783
18627
|
HelixHeadlessNotificationsVueProps,
|
|
17784
18628
|
HelixHeadlessNotificationsVueEvents
|
|
17785
18629
|
>;
|
|
17786
|
-
/** A separate family from 'Input''s 'type="number"'. It renders two buttons, binds four keys 'Input' does not, and handles clamping and stepping. The field is 'type="text"' with 'inputmode="decimal"'. Tested in a real browser, 'type="number"' fails in three ways: - Typing '12e' gives a '.value' of '""', so the element cannot see what you typed. A 'type="text"' field keeps '"12e"'. - The mouse wheel over a focused field changes the value, for example from 5 to 4, when you only meant to scroll the page. - 'selectionStart' is 'null', so the caret cannot be managed. 'inputmode="decimal"' keeps the numeric keypad on phones. 'format-options' shows the number with 'Intl.NumberFormat' in 'locale', as a currency, a percent or a unit, while the field is not being edited. Focus shows the number itself, and a typed '$1,200' or '25%' is read back with the same options. The value stays the plain number: '1200', or '0.25' for 25%. The locale's group separators are read in every field, so '1,234' is a number in 'en-US'. On iOS and iPadOS the field is a plain text field, with no 'role="spinbutton"', which VoiceOver reads as a slider you cannot type in, and no role description, so VoiceOver says the field is required. React Aria's NumberField does the same. Validity follows the platform's rules: 'min', 'max', and 'step' are checked and reported through the host's own 'setValidity', under the platform's flag names. Stepping is separate from typing, so a number is not corrected while you type it. **Keyboard.** The field is one tab stop, and the stepper buttons are not in the tab order. | Key | What it does | |---|---| | Up, Down | Steps the value up or down by 'step'. | | Page Up, Page Down | Steps by 'large-step' steps, ten by default. | | Home, End | Goes to 'min' or 'max', where there is one. Without one, moves the caret. | | Enter | Commits the typed number and submits the form, as a native field does. | The field has 'role="spinbutton"' with 'aria-valuenow', 'aria-valuemin', 'aria-valuemax', and the formatted text in 'aria-valuetext'. */
|
|
18630
|
+
/** A separate family from 'Input''s 'type="number"'. It renders two buttons, binds four keys 'Input' does not, and handles clamping and stepping. The field is 'type="text"' with 'inputmode="decimal"'. Tested in a real browser, 'type="number"' fails in three ways: - Typing '12e' gives a '.value' of '""', so the element cannot see what you typed. A 'type="text"' field keeps '"12e"'. - The mouse wheel over a focused field changes the value, for example from 5 to 4, when you only meant to scroll the page. - 'selectionStart' is 'null', so the caret cannot be managed. 'inputmode="decimal"' keeps the numeric keypad on phones. 'format-options' shows the number with 'Intl.NumberFormat' in 'locale', as a currency, a percent or a unit, while the field is not being edited. Focus shows the number itself, and a typed '$1,200' or '25%' is read back with the same options. The value stays the plain number: '1200', or '0.25' for 25%. The locale's group separators are read in every field, so '1,234' is a number in 'en-US'. The field and its two buttons sit in a 'role="group"', and the field carries 'role-label', "number field" in English, as its 'aria-roledescription', as React Aria's NumberField does. On iOS and iPadOS the field is a plain text field, with no 'role="spinbutton"', which VoiceOver reads as a slider you cannot type in, and no role description, so VoiceOver says the field is required. React Aria's NumberField does the same. Validity follows the platform's rules: 'min', 'max', and 'step' are checked and reported through the host's own 'setValidity', under the platform's flag names. Stepping is separate from typing, so a number is not corrected while you type it. While you type, the form holds the number the text reads as, so a field showing '$2,500.50' gives the form 2500.5, and text that is not a number gives it nothing, as a native number field does. Holding a stepper button down steps once, then again after 400 milliseconds, then every 60 milliseconds until you let go, as React Aria's NumberField does. **Keyboard.** The field is one tab stop, and the stepper buttons are not in the tab order. | Key | What it does | |---|---| | Up, Down | Steps the value up or down by 'step'. | | Page Up, Page Down | Steps by 'large-step' steps, ten by default. | | Home, End | Goes to 'min' or 'max', where there is one. Without one, moves the caret. | | Enter | Commits the typed number and submits the form, as a native field does. | The field has 'role="spinbutton"' with 'aria-valuenow', 'aria-valuemin', 'aria-valuemax', and the formatted text in 'aria-valuetext'. */
|
|
17787
18631
|
"helix-headless-number-input": DefineCustomElement<
|
|
17788
18632
|
HelixHeadlessNumberInput,
|
|
17789
18633
|
HelixHeadlessNumberInputVueProps,
|
|
17790
18634
|
HelixHeadlessNumberInputVueEvents
|
|
17791
18635
|
>;
|
|
17792
|
-
/** Object Inspector shows a structured value, such as an API response, a config, or a raw record, as a read-only tree with each entry's type visible. Pass the object to 'value', or name a '<script type="application/json">' by id with 'for', the same source 'VirtualList' and the charts read. JSON text works with server rendering and with React hydration, which skips object properties. 'value' wins when both are set. **Keyboard.** The tree is one tab stop, and focus moves from row to row. | Key | What it does | |---|---| | Down, Up | Moves to the next or the previous row. | | Right | Opens a closed branch, or moves into an open one. Left on a right-to-left page. | | Left | Closes an open branch, or moves to the parent. Right on a right-to-left page. | | Home, End | Moves to the first or the last row. | | Page Down, Page Up | Moves a box's height of rows, so the row at one edge lands at the other. | | Enter, Space | Opens or closes a branch. | | '*' | Opens every branch beside the active row. | | A letter or a word | Moves to the next row whose key starts with what you typed. | | Command+C, Control+C | Copies the active row, where no text is selected. | The tree is a 'treegrid', as React Aria's Tree is: each entry is a 'row' with one cell, and carries its real level, position, and set size, including in a windowed tree. Nothing in it is chosen, so no row carries 'aria-selected', and a focused row is not announced as selected. A reader opening or closing a branch sends 'helix-before-open' or 'helix-before-close', which you can cancel, and then 'toggle' with 'newState' and 'oldState', as '<details>' does. The branch is the active row, and 'expanded' holds every open branch. '*' asks once for all the branches it opens. A script writing 'expanded' or 'active' sends nothing. 'active' is the active row's path, written the way a JSON Pointer writes it: the empty string for the root and '/meta/tags/0' for an entry under it. Moving to another row sends 'helix-before-activate', which you can cancel, and then 'helix-activate', both with the path. Writing 'active' moves there and opens the branches around it, and sends nothing. 'expanded' holds the open branches by path, and writing it opens those and closes the rest. A row that closes around the active one hands it to the nearest open branch. 'filter' narrows the tree to the entries whose key or value holds the text, ignoring case, and the branches that lead to them, which it opens. A matched branch keeps everything under it. Each matched row carries 'row-match', and a screen reader hears how many entries matched from 'results-label'. 'filterable' adds a field that sets it: typing sends 'helix-filter', which you can cancel, and then 'helix-filtered', and Down moves from the field to the tree. A new 'value' keeps the branches a reader opened or closed, and the active row, where the new value still has them. A branch the old value did not have opens to 'default-depth'. The copy button copies the active row, a branch as JSON and a string as its text. So do Command+C and Control+C while the tree has focus and no text is selected. The button sits beside the tree, because assistive technology cannot reliably reach a button inside a tree item. 'windowed' draws only the rows in view, for values with thousands of entries. The box needs a height for windowing to work. The styled tier sets one, and in the headless tier you set it yourself. */
|
|
18636
|
+
/** Object Inspector shows a structured value, such as an API response, a config, or a raw record, as a read-only tree with each entry's type visible. Pass the object to 'value', or name a '<script type="application/json">' by id with 'for', the same source 'VirtualList' and the charts read. JSON text works with server rendering and with React hydration, which skips object properties. 'value' wins when both are set. **Keyboard.** The tree is one tab stop, and focus moves from row to row. | Key | What it does | |---|---| | Down, Up | Moves to the next or the previous row. | | Right | Opens a closed branch, or moves into an open one. Left on a right-to-left page. | | Left | Closes an open branch, or moves to the parent. Right on a right-to-left page. | | Home, End | Moves to the first or the last row. | | Page Down, Page Up | Moves a box's height of rows, so the row at one edge lands at the other. | | Enter, Space | Opens or closes a branch. | | '*' | Opens every branch beside the active row. | | A letter or a word | Moves to the next row whose key starts with what you typed. | | Command+C, Control+C | Copies the active row, where no text is selected. | The tree is a 'treegrid', as React Aria's Tree is: each entry is a 'row' with one cell, and carries its real level, position, and set size, including in a windowed tree. Nothing in it is chosen, so no row carries 'aria-selected', and a focused row is not announced as selected. A reader opening or closing a branch sends 'helix-before-open' or 'helix-before-close', which you can cancel, and then 'toggle' with 'newState' and 'oldState', as '<details>' does. The branch is the active row, and 'expanded' holds every open branch. '*' asks once for all the branches it opens. A script writing 'expanded' or 'active' sends nothing. 'active' is the active row's path, written the way a JSON Pointer writes it: the empty string for the root and '/meta/tags/0' for an entry under it. Moving to another row sends 'helix-before-activate', which you can cancel, and then 'helix-activate', both with the path. Writing 'active' moves there and opens the branches around it, and sends nothing. 'expanded' holds the open branches by path, and writing it opens those and closes the rest. A row that closes around the active one hands it to the nearest open branch. 'filter' narrows the tree to the entries whose key or value holds the text, ignoring case, and the branches that lead to them, which it opens. A matched branch keeps everything under it. Each matched row carries 'row-match', and a screen reader hears how many entries matched from 'results-label'. 'filterable' adds a field that sets it: typing sends 'helix-filter', which you can cancel, and then 'helix-filtered', and Down moves from the field to the tree. A new 'value' keeps the branches a reader opened or closed, and the active row, where the new value still has them. A branch the old value did not have opens to 'default-depth'. The copy button copies the active row, a branch as JSON and a string as its text. So do Command+C and Control+C while the tree has focus and no text is selected. The button sits beside the tree, because assistive technology cannot reliably reach a button inside a tree item. **Your own drawing of a value.** 'renderValue' is a function from a value and its entry, its path, key, depth and type, to what Lit renders, such as a link for a URL or a swatch for a color. Return 'undefined' to draw the value as the inspector does. What you draw sits in the 'value' part, after the key. Filtering and copying still read the value itself. 'windowed' draws only the rows in view, for values with thousands of entries. The box needs a height for windowing to work. The styled tier sets one, and in the headless tier you set it yourself. */
|
|
17793
18637
|
"helix-headless-object-inspector": DefineCustomElement<
|
|
17794
18638
|
HelixHeadlessObjectInspector,
|
|
17795
18639
|
HelixHeadlessObjectInspectorVueProps,
|
|
@@ -17801,7 +18645,7 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
17801
18645
|
HelixHeadlessOptionGroupVueProps,
|
|
17802
18646
|
HelixHeadlessOptionGroupVueEvents
|
|
17803
18647
|
>;
|
|
17804
|
-
/** Options are their own family, separate from Select, because an option belongs to a listbox and several controls contain one. 'role="option"' requires an owning 'role="listbox"'. A Select is a listbox with a trigger, a Combobox is a listbox with a text input, and a command palette is a listbox in a dialog. 'Radio' is a part of its group, because a radio has only one kind of owner. Selection works the way it does for a radio. Choosing an option dispatches an event, the listbox decides whether the choice stands, and the listbox sets 'selected'. Filtering belongs to the owner, which hides an option with 'hidden'. What counts as a match differs between a select and a command palette. An option with 'href' is a link: choosing it follows the link and selects nothing, as an entry in a command palette that goes to a page does. */
|
|
18648
|
+
/** Options are their own family, separate from Select, because an option belongs to a listbox and several controls contain one. 'role="option"' requires an owning 'role="listbox"'. A Select is a listbox with a trigger, a Combobox is a listbox with a text input, and a command palette is a listbox in a dialog. 'Radio' is a part of its group, because a radio has only one kind of owner. Selection works the way it does for a radio. Choosing an option dispatches an event, the listbox decides whether the choice stands, and the listbox sets 'selected'. Filtering belongs to the owner, which hides an option with 'hidden'. What counts as a match differs between a select and a command palette. An option with 'href' is a link: choosing it follows the link and selects nothing, as an entry in a command palette that goes to a page does. The option's name is its label alone, as React Aria's 'slot="label"' makes it: what is in 'start' and 'end', an avatar's initials or a shortcut, is drawn and not read as part of the name. The description is read as the option's description. A name you give with 'aria-label' or 'aria-labelledby' wins over both. */
|
|
17805
18649
|
"helix-headless-option": DefineCustomElement<
|
|
17806
18650
|
HelixHeadlessOption,
|
|
17807
18651
|
HelixHeadlessOptionVueProps,
|
|
@@ -17993,7 +18837,7 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
17993
18837
|
HelixHeadlessTableColumnVueProps,
|
|
17994
18838
|
HelixHeadlessTableColumnVueEvents
|
|
17995
18839
|
>;
|
|
17996
|
-
/** Lays out the rows on a CSS grid, so every column lines up across rows and each row stays a real element that can be styled, hidden, or made interactive. A '<table>' layout aligns columns but limits almost everything else. A grid of elements has no table structure for assistive technology, so the roles are set explicitly: 'table', 'row', 'cell', 'columnheader', and 'rowheader' for a 'header' cell in a row of values. Rows are 'display: contents', so their cells become items of the one grid. **Sorting.** A column with 'sortable' and a 'field' draws its heading as a button that sorts the rows by the text of its cells, numbers by their value. Your markup is not reordered: the table draws the rows in the sorted order. 1. Each press cycles the column through ascending, descending, and the order the rows were written in, which keeps a server's own ranking reachable. 2. 'helix-sort' asks first, with 'field:direction', or empty for the written order. Refuse it to keep the order, or to sort the rows yourself and set 'sort'. 3. 'helix-sorted' follows once the order stands, and 'sort' holds it. 4. The heading carries 'aria-sort', and a screen reader hears 'sorted-label' ("Sorted by Name, ascending") or 'unsorted-label' from a polite region. Tab reaches each sort button, and Enter or Space presses it. The 'heading' slot names the table: slot a heading or a line of text into it, and the table is named by its words. An 'aria-label' or 'aria-labelledby' on the host wins over it. **Selecting.** 'selectable' adds a column of checkboxes. 1. Each row is known by its 'value', or by its place among the rows where it has none, and 'selected' holds the chosen keys, comma separated, the same shape 'DataTable' uses. 'default-selected' is where it starts. 2. A row's checkbox is named by 'select-row-label' ("Select {row}") with the words of the row's first cell. The checkbox in the heading selects every row, and shows a dash while only some are chosen. 3. 'helix-select' asks first, with every key the change would leave. Refuse it to keep the selection. 'helix-selected' follows once it stands. 4. A chosen row takes ':state(selected)', and a screen reader hears 'selected-label' ("2 selected") from a polite region. Tab reaches each checkbox, and Space ticks it. To act on one row, put a link or a button in a cell, or give the row an 'href'. **Moving rows.** 'reorderable' adds a column of grips before the checkboxes, under a heading named by 'row-grips-label'. 1. Each row is known by its 'value', or by its place among the rows where it has none, as for selecting. Give rows a 'value' when they move, so a key stays with its row. 2. A grip is a button named by 'move-row-label' ("Move {row}") with the words of the row's first cell. Drag it to move its row, and the page scrolls near an edge. Or press it with Space, Enter, or a click to pick the row up, move it with Up, Down, Home, and End, and press it again to drop it. A click on another row drops it there, and Escape puts it back. 3. 'helix-before-reorder' asks first, and 'helix-reorder' follows with 'keys', every row's key in the new order. **You move the rows**: the table moves no element of yours, and focus goes back to the moved row's grip once you have. 4. Each step is said in the table's live region, in words you can change: 'picked-up-label', 'moved-label', 'dropped-label', and 'canceled-label'. The grips do nothing while a sort is set. **A grid.** 'grid' makes the table one tab stop that the arrow keys move through cell by cell, the headings included, as React Aria's table is. The table is then a 'grid' and each value a 'gridcell', and the table gives every cell a 'tabindex' so focus can rest on it: set 'grid' only where the cells may carry one. | Key | What it does | |---|---| | Right, Left | Moves one cell along the row. Left moves on, on a right-to-left page. | | Down, Up | Moves one row, the headings included. | | Home, End | Moves to the first or the last cell of the row. | | Control with Home or End | Moves to the first or the last cell of the table. | | Page Down, Page Up | Moves by the rows that fit in view. | | Enter, F2 | Moves into the cell's links and controls. Escape or F2 moves back to the cell, and Tab moves between the controls of one cell. | | Enter on a cell of a row with 'href' | Follows the row's link. | | Enter, Space on a sortable heading | Sorts by the column. | | Space on a row, Enter or Space on its checkbox cell | Selects the row, in a 'selectable' table. | | Enter or Space on a grip cell | Picks the row up, or drops it, in a 'reorderable' table. Up, Down, Home, and End move a row picked up, and Escape puts it back. | | Shift with Down or Up | Selects the rows it moves across, in a 'selectable' table. | | Shift with Space | Selects every row from the one last chosen, in a 'selectable' table. | | Control or Command with A | Selects every row, in a 'selectable' table. | | A letter or a word | Moves to the next row whose first cell starts with what you typed. | | Tab | Leaves the table. | The CSS custom properties listed for this component are written by it and read by the stylesheet that draws it. Do not set them. Each holds a number the component computes and CSS cannot, so the stylesheet can draw the table without measuring anything. */
|
|
18840
|
+
/** Lays out the rows on a CSS grid, so every column lines up across rows and each row stays a real element that can be styled, hidden, or made interactive. A '<table>' layout aligns columns but limits almost everything else. A grid of elements has no table structure for assistive technology, so the roles are set explicitly: 'table', 'row', 'cell', 'columnheader', and 'rowheader' for a 'header' cell in a row of values. Rows are 'display: contents', so their cells become items of the one grid. **Sorting.** A column with 'sortable' and a 'field' draws its heading as a button that sorts the rows by the text of its cells, numbers by their value. Your markup is not reordered: the table draws the rows in the sorted order. 1. Each press cycles the column through ascending, descending, and the order the rows were written in, which keeps a server's own ranking reachable. 2. 'helix-sort' asks first, with 'field:direction', or empty for the written order. Refuse it to keep the order, or to sort the rows yourself and set 'sort'. 3. 'helix-sorted' follows once the order stands, and 'sort' holds it. 4. The heading carries 'aria-sort', and a screen reader hears 'sorted-label' ("Sorted by Name, ascending") or 'unsorted-label' from a polite region. Tab reaches each sort button, and Enter or Space presses it. The 'heading' slot names the table: slot a heading or a line of text into it, and the table is named by its words. An 'aria-label' or 'aria-labelledby' on the host wins over it. **Selecting.** 'selectable' adds a column of checkboxes. 1. Each row is known by its 'value', or by its place among the rows where it has none, and 'selected' holds the chosen keys, comma separated, the same shape 'DataTable' uses. 'default-selected' is where it starts. 2. A row's checkbox is named by 'select-row-label' ("Select {row}") with the words of the row's first cell. The checkbox in the heading selects every row, and shows a dash while only some are chosen. 3. 'helix-select' asks first, with every key the change would leave. Refuse it to keep the selection. 'helix-selected' follows once it stands. 4. A chosen row takes ':state(selected)', and a screen reader hears 'selected-label' ("2 selected") from a polite region. Tab reaches each checkbox, and Space ticks it. To act on one row, put a link or a button in a cell, or give the row an 'href'. **Moving rows.** 'reorderable' adds a column of grips before the checkboxes, under a heading named by 'row-grips-label'. 1. Each row is known by its 'value', or by its place among the rows where it has none, as for selecting. Give rows a 'value' when they move, so a key stays with its row. 2. A grip is a button named by 'move-row-label' ("Move {row}") with the words of the row's first cell. Drag it to move its row, and the page scrolls near an edge. Or press it with Space, Enter, or a click to pick the row up, move it with Up, Down, Home, and End, and press it again to drop it. A click on another row drops it there, and Escape puts it back. 3. 'helix-before-reorder' asks first, and 'helix-reorder' follows with 'keys', every row's key in the new order. **You move the rows**: the table moves no element of yours, and focus goes back to the moved row's grip once you have. 4. Each step is said in the table's live region, in words you can change: 'picked-up-label', 'moved-label', 'dropped-label', and 'canceled-label'. The grips do nothing while a sort is set. **A grid.** 'grid' makes the table one tab stop that the arrow keys move through cell by cell, the headings included, as React Aria's table is. The table is then a 'grid' and each value a 'gridcell', and the table gives every cell a 'tabindex' so focus can rest on it: set 'grid' only where the cells may carry one. | Key | What it does | |---|---| | Right, Left | Moves one cell along the row. Left moves on, on a right-to-left page. | | Down, Up | Moves one row, the headings included. | | Home, End | Moves to the first or the last cell of the row. | | Control with Home or End | Moves to the first or the last cell of the table. | | Page Down, Page Up | Moves by the rows that fit in view. | | Enter, F2 | Moves into the cell's links and controls. Escape or F2 moves back to the cell, and Tab moves between the controls of one cell. | | Enter on a cell of a row with 'href' | Follows the row's link. | | Enter, Space on a sortable heading | Sorts by the column. | | Space on a row, Enter or Space on its checkbox cell | Selects the row, in a 'selectable' table. | | Enter or Space on a grip cell | Picks the row up, or drops it, in a 'reorderable' table. Up, Down, Home, and End move a row picked up, and Escape puts it back. | | Shift with Down or Up | Selects the rows it moves across, in a 'selectable' table. | | Shift with Space | Selects every row from the one last chosen, in a 'selectable' table. | | Control or Command with A | Selects every row, in a 'selectable' table. | | A letter or a word | Moves to the next row whose first cell starts with what you typed. | | Tab | Leaves the table. | When the rows did not load, set 'error-text', such as "The orders did not load", and put a button that tries again in the 'error' slot. The line shows after the rows in place of the empty and loading lines, the live region says it, and the table takes the 'error' state. Clear it once you try again. The CSS custom properties listed for this component are written by it and read by the stylesheet that draws it. Do not set them. Each holds a number the component computes and CSS cannot, so the stylesheet can draw the table without measuring anything. */
|
|
17997
18841
|
"helix-headless-table": DefineCustomElement<
|
|
17998
18842
|
HelixHeadlessTable,
|
|
17999
18843
|
HelixHeadlessTableVueProps,
|
|
@@ -18041,13 +18885,13 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
18041
18885
|
HelixHeadlessTextareaVueProps,
|
|
18042
18886
|
HelixHeadlessTextareaVueEvents
|
|
18043
18887
|
>;
|
|
18044
|
-
/** The list is a 'TimePicker', which you can also use on its own, for example in a settings pane. This element adds the field, the overlay, and the form association, the same arrangement Date Input has with 'DatePicker' and Color Input has with 'ColorPicker'. You can type a time or pick one. The list offers times at a step, and the field lets you enter any time, such as '09:07'. The value is always 'HH:mm' on a 24-hour clock, or 'HH:mm:ss' with 'seconds', because that is what the form submits, what 'min' and 'max' compare against, and what sorts correctly as a string. While idle, the field shows the time in the user's locale format. Once the caret is in the field, it shows the value itself, because a formatted time such as '2:30 PM' cannot be typed back and 'Intl' has no parser for it. Typing sends 'input' on each keystroke and 'change' when you leave the field. The trigger and ArrowDown open the list, and so does a press into the field; Tab into the field opens nothing. In the list, the arrow keys, typed digits and PageUp and PageDown move through the times, and Enter, Space or a click chooses one and closes the panel. With 'variant="wheels"' each wheel moves the time as you turn it, the panel stays open, and Enter or Escape closes it. With 'segmented', the field is a row of segments in place of the text: an hour, a minute, and AM or PM where the clock has them, each set with digits or the arrow keys. Alt+Down opens the list from a segment. */
|
|
18888
|
+
/** The list is a 'TimePicker', which you can also use on its own, for example in a settings pane. This element adds the field, the overlay, and the form association, the same arrangement Date Input has with 'DatePicker' and Color Input has with 'ColorPicker'. You can type a time or pick one. The list offers times at a step, and the field lets you enter any time, such as '09:07'. The value is always 'HH:mm' on a 24-hour clock, or 'HH:mm:ss' with 'seconds', because that is what the form submits, what 'min' and 'max' compare against, and what sorts correctly as a string. While idle, the field shows the time in the user's locale format. Once the caret is in the field, it shows the value itself, because a formatted time such as '2:30 PM' cannot be typed back and 'Intl' has no parser for it. Typing sends 'input' on each keystroke and 'change' when you leave the field. The trigger and ArrowDown open the list, and so does a press into the field; Tab into the field opens nothing. In the list, the arrow keys, typed digits and PageUp and PageDown move through the times, and Enter, Space or a click chooses one and closes the panel. With 'variant="wheels"' each wheel moves the time as you turn it, the panel stays open, and Enter or Escape closes it. With 'segmented', the field is a row of segments in place of the text: an hour, a minute, and AM or PM where the clock has them, each set with digits or the arrow keys. Alt+Down opens the list from a segment. Text that is not a time gives the form an empty value, as a native time field does, and 'value' keeps the text so it can be corrected. **Keyboard.** The field is one tab stop, or each segment is with 'segmented', and the trigger is one more. | Key | What it does | |---|---| | Down | In the text field, opens the list on the chosen time. | | Alt with Down | Opens the list, from the text field or a segment. | | Enter | In the text field, takes the typed time and submits the form, as a native field does. In the list, chooses the highlighted time. | | Escape | Closes the list and puts focus back in the field. | | Up, Down on a segment | Steps the segment by one, round from its last value to its first. | | Page Up, Page Down on a segment | Steps by a page: two hours, or fifteen minutes or seconds. | | Home, End on a segment | Goes to the segment's first or last value. | | Digits on a segment | Fill it, and move to the next once it can take no more. | | A letter on the half of the day | Picks the half whose name starts with it, such as A for AM. | | Backspace, Delete on a segment | Empty the segment. | | Left, Right on a segment | Move to the previous or the next segment, along the line of text. | In the list, the keys are 'TimePicker''s. */
|
|
18045
18889
|
"helix-headless-time-input": DefineCustomElement<
|
|
18046
18890
|
HelixHeadlessTimeInput,
|
|
18047
18891
|
HelixHeadlessTimeInputVueProps,
|
|
18048
18892
|
HelixHeadlessTimeInputVueEvents
|
|
18049
18893
|
>;
|
|
18050
|
-
/** Shows the times at each 'step' as a 'Listbox', which provides the keyboard behavior, typeahead, scrolling into view, and announcements for a set of options. 'variant="wheels"' shows a column each for the hour, the minute, and the meridiem, and one for the second with 'seconds'. Left and Right move between the wheels, and Tab does too. 'hour-cycle' writes every time on a twelve or a twenty-four hour clock whatever the locale, and 'seconds' holds times to the second. The step keeps the list usable. At the default of 15 minutes a day is 96 rows, which people can scroll or type into. At 1 minute it is 1,440. Use the list for the times your product offers, and Time Input for any time, the same way Date Input separates typing a date from picking one on the calendar. The value is always 'HH:mm' on a 24-hour clock, or 'HH:mm:ss' with 'seconds'. A form submits that shape, 'min' and 'max' compare against it, and it sorts as a string. Each row's text follows the person's own conventions, from 'Intl'. The chosen row is marked in the served markup. The listbox gets the answer as '.value', and Lit SSR serializes no property binding, so without more the 96 served rows would carry no mark until the listbox upgrades and runs 'place'. Each option also gets 'selected', an attribute binding that does serialize, and 'place' then writes the same answer from the same value. This is the same 'selected' you write on 'Option' elsewhere in Helix, and Date Picker marks its choice in markup for the same reason. The list and the wheels both do this, because each wheel is also a listbox. */
|
|
18894
|
+
/** Shows the times at each 'step' as a 'Listbox', which provides the keyboard behavior, typeahead, scrolling into view, and announcements for a set of options. 'variant="wheels"' shows a column each for the hour, the minute, and the meridiem, and one for the second with 'seconds'. Left and Right move between the wheels, and Tab does too. 'hour-cycle' writes every time on a twelve or a twenty-four hour clock whatever the locale, and 'seconds' holds times to the second. The step keeps the list usable. At the default of 15 minutes a day is 96 rows, which people can scroll or type into. At 1 minute it is 1,440. Use the list for the times your product offers, and Time Input for any time, the same way Date Input separates typing a date from picking one on the calendar. The value is always 'HH:mm' on a 24-hour clock, or 'HH:mm:ss' with 'seconds'. A form submits that shape, 'min' and 'max' compare against it, and it sorts as a string. Each row's text follows the person's own conventions, from 'Intl'. The chosen row is marked in the served markup. The listbox gets the answer as '.value', and Lit SSR serializes no property binding, so without more the 96 served rows would carry no mark until the listbox upgrades and runs 'place'. Each option also gets 'selected', an attribute binding that does serialize, and 'place' then writes the same answer from the same value. This is the same 'selected' you write on 'Option' elsewhere in Helix, and Date Picker marks its choice in markup for the same reason. The list and the wheels both do this, because each wheel is also a listbox. **Keyboard.** The list is one tab stop, and each wheel is one. | Key | What it does | |---|---| | Down, Up | Moves to the next or the previous time, or in a wheel to the next or the previous hour, minute, second, or half of the day. | | Home, End | Moves to the first or the last time, or the first or the last in a wheel. | | Page Down, Page Up | Moves by as many times as the list shows at once. | | Digits | Moves to the next time that starts with what you typed, such as '9' for 9:00. | | Enter, Space | Chooses the highlighted time. Moving chooses too, except under 'manual' or with a 'mode'. With a 'mode', Space adds or removes the time. | | Right, Left | In the wheels, moves to the next or the previous wheel, mirrored right to left. | | Tab | Moves to the next wheel, then out of the picker. | **ARIA.** The list is a 'listbox' named by 'label', a slotted label, the host's 'aria-label' or its 'aria-labelledby'. A development build warns where all four are empty. The list is described by the hint, or by the message in 'feedback' in its place, and carries 'aria-multiselectable' with a 'mode' and 'aria-invalid' while 'feedback' says what is wrong. The wheels are a 'group' with that name, holding one 'listbox' per wheel, named "Hour", "Minute", "Second" and "AM/PM" in the page's language, and each described the same way. */
|
|
18051
18895
|
"helix-headless-time-picker": DefineCustomElement<
|
|
18052
18896
|
HelixHeadlessTimePicker,
|
|
18053
18897
|
HelixHeadlessTimePickerVueProps,
|
|
@@ -18059,7 +18903,7 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
18059
18903
|
HelixHeadlessTimelineGroupVueProps,
|
|
18060
18904
|
HelixHeadlessTimelineGroupVueEvents
|
|
18061
18905
|
>;
|
|
18062
|
-
/** Given 'datetime', the label you write is wrapped in a '<time>' element, so a machine-readable value such as "2026-08-19" travels with a label such as "yesterday". Without 'datetime', the label is a '<span>'. Each entry draws the connector line that arrives at it and hides it when it is the first entry, using ':host(:first-child)'. This needs no index, no counting parent, and no script. 'Steps' and 'Breadcrumbs' work the same way. 'tone' sets the kind of event and is the only thing that colors the mark. It uses the same values as 'Announcement'. */
|
|
18906
|
+
/** Given 'datetime', the label you write is wrapped in a '<time>' element, so a machine-readable value such as "2026-08-19" travels with a label such as "yesterday". Without 'datetime', the label is a '<span>'. **'relative' writes the time for you** as how long ago it was, such as "3 hours ago", from 'datetime', where the 'time' slot is empty. The words move on as they go stale, "3 hours ago" becoming "4 hours ago", with one wakeup shared by every reading on the page, as 'FormatDate' keeps its own. They are in the language of the page, or of the nearest 'lang'. Each entry draws the connector line that arrives at it and hides it when it is the first entry, using ':host(:first-child)'. This needs no index, no counting parent, and no script. 'Steps' and 'Breadcrumbs' work the same way. 'tone' sets the kind of event and is the only thing that colors the mark. It uses the same values as 'Announcement'. */
|
|
18063
18907
|
"helix-headless-timeline-item": DefineCustomElement<
|
|
18064
18908
|
HelixHeadlessTimelineItem,
|
|
18065
18909
|
HelixHeadlessTimelineItemVueProps,
|
|
@@ -18071,13 +18915,13 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
18071
18915
|
HelixHeadlessTimelineVueProps,
|
|
18072
18916
|
HelixHeadlessTimelineVueEvents
|
|
18073
18917
|
>;
|
|
18074
|
-
/** Each message is an element because it has a timeout, a tone, a dismiss control, and a lifetime that pauses. **Each item runs its own timer.** A timer held by the region would restart with each new message, and the last of three messages would stay for nine seconds. It pauses while the pointer or focus is on the message, and while the page is hidden, so a message is not spent in a background tab. **Each message is an 'alertdialog' named by its words**, which is how a reader who moves into the stack hears which message they are on. Give it a 'heading' and a 'description', and the heading names it and the description describes it, for a message with a title and a line of detail. The region says each message once as it arrives, a 'danger' one assertively, so a message is never a live region of its own. A touch or a pen swipes a message toward the end of the line, and past halfway, or quickly, dismisses it through the same 'helix-dismiss' as its control. While it moves, the distance is on the 'item' part as '--toast-swipe-x'. **Messages are inverted by default.** The item flips 'color-scheme', so a new message stands out from the page without using a color that carries meaning. */
|
|
18918
|
+
/** Each message is an element because it has a timeout, a tone, a dismiss control, and a lifetime that pauses. **Each item runs its own timer.** A timer held by the region would restart with each new message, and the last of three messages would stay for nine seconds. It pauses while the pointer or focus is on the message, and while the page is hidden, so a message is not spent in a background tab. **Each message is an 'alertdialog' named by its words**, which is how a reader who moves into the stack hears which message they are on. Give it a 'heading' and a 'description', and the heading names it and the description describes it, for a message with a title and a line of detail. The region says each message once as it arrives, a 'danger' one assertively, so a message is never a live region of its own. A touch or a pen swipes a message toward the end of the line, and past halfway, or quickly, dismisses it through the same 'helix-dismiss' as its control. While it moves, the distance is on the 'item' part as '--toast-swipe-x'. **Escape dismisses the message holding focus**, through the same 'helix-dismiss', and focus moves to the next message. **Messages are inverted by default.** The item flips 'color-scheme', so a new message stands out from the page without using a color that carries meaning. */
|
|
18075
18919
|
"helix-headless-toast-item": DefineCustomElement<
|
|
18076
18920
|
HelixHeadlessToastItem,
|
|
18077
18921
|
HelixHeadlessToastItemVueProps,
|
|
18078
18922
|
HelixHeadlessToastItemVueEvents
|
|
18079
18923
|
>;
|
|
18080
|
-
/** The region and its items are one family because a live region must be in the document before a message is added to it. Assistive technology often does not announce a region that arrives already holding its message. 'Radio.Group' is part of its family for the same reason. **The region is a landmark named by 'label', and it says each message once as it arrives**: a 'danger' message assertively, and every other one politely. It says the word for the tone, the heading, the description and the text, and not the actions, through two live regions of its own, the 'live' parts, which it empties again a moment later. The stack itself is not a live region, so a message is never said twice, and changing the words of a message already showing says nothing. Each message is an 'alertdialog' named by its words, so a reader who moves into the stack hears which message they are on. **'hotkey' takes focus to the stack and back**, F8 unless you set it, and 'label' says which key: '{hotkey}' in it is filled in, so the default name is "Notifications (F8)". Pressed while focus is in the stack, it gives focus back to where it was. **The region never creates or removes items.** You render items and remove them. An item requests closing with a cancelable 'helix-dismiss' event. A dismissed item hides itself and stays in the DOM, so your framework's state and the DOM stay in sync. It hides on its own unless you set 'open', which makes the state yours. **'add()' shows a message from script**, for a page with no framework state to render them from: it appends a message of the region's own tier and removes it once it has been dismissed and has finished leaving. Messages you render yourself stay yours, and the region never removes them. A touch or a pen swipes a message away toward the end of the line. **The stack is in the top layer.** The 'region' part is a 'popover="manual"' shown while a message is showing, and shown again above a modal dialog that opened after it. Position the 'region' part, which is the box in the top layer. While a modal 'Dialog', 'Drawer' or 'Lightbox' is open, the browser makes everything outside it inert, the stack included, so a message stays visible and its actions cannot be pressed. Where the browser has 'ariaNotify', a message that arrives then is announced through it. For a message with an action, render a second region inside the dialog. When a message with focus inside it is dismissed, focus moves to the next message, then the one before it, then back to where it was before it entered the stack. */
|
|
18924
|
+
/** The region and its items are one family because a live region must be in the document before a message is added to it. Assistive technology often does not announce a region that arrives already holding its message. 'Radio.Group' is part of its family for the same reason. **The region is a landmark named by 'label', and it says each message once as it arrives**: a 'danger' message assertively, and every other one politely. It says the word for the tone, the heading, the description and the text, and not the actions, through two live regions of its own, the 'live' parts, which it empties again a moment later. The stack itself is not a live region, so a message is never said twice, and changing the words of a message already showing says nothing. Each message is an 'alertdialog' named by its words, so a reader who moves into the stack hears which message they are on. **'hotkey' takes focus to the stack and back**, F8 unless you set it, and 'label' says which key: '{hotkey}' in it is filled in, so the default name is "Notifications (F8)". Pressed while focus is in the stack, it gives focus back to where it was. **The region never creates or removes items.** You render items and remove them. An item requests closing with a cancelable 'helix-dismiss' event. A dismissed item hides itself and stays in the DOM, so your framework's state and the DOM stay in sync. It hides on its own unless you set 'open', which makes the state yours. **'add()' shows a message from script**, for a page with no framework state to render them from: it appends a message of the region's own tier and removes it once it has been dismissed and has finished leaving. Messages you render yourself stay yours, and the region never removes them. A touch or a pen swipes a message away toward the end of the line. **The stack is in the top layer.** The 'region' part is a 'popover="manual"' shown while a message is showing, and shown again above a modal dialog that opened after it. Position the 'region' part, which is the box in the top layer. While a modal 'Dialog', 'Drawer' or 'Lightbox' is open, the browser makes everything outside it inert, the stack included, so a message stays visible and its actions cannot be pressed. Where the browser has 'ariaNotify', a message that arrives then is announced through it. For a message with an action, render a second region inside the dialog. When a message with focus inside it is dismissed, focus moves to the next message, then the one before it, then back to where it was before it entered the stack. **'max-visible' limits how many messages show at once**, as Zag's 'max' does. The messages after that many, in document order, wait: each is hidden, its timer has not started, and the region says it once it shows, when a message before it goes. A waiting message has ':state(waiting)'. **Keyboard.** | Key | What it does | |---|---| | F8, or your 'hotkey' | Moves focus to the first control in the stack, and back to where it was when pressed in the stack. | | Tab, Shift+Tab | Moves between the controls of the messages. | | Escape | Dismisses the message holding focus. Focus moves to the next message, then the one before it, then back to where it was. | */
|
|
18081
18925
|
"helix-headless-toast": DefineCustomElement<
|
|
18082
18926
|
HelixHeadlessToast,
|
|
18083
18927
|
HelixHeadlessToastVueProps,
|
|
@@ -18149,19 +18993,19 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
18149
18993
|
HelixHeadlessVideoPlaylistMenuVueProps,
|
|
18150
18994
|
HelixHeadlessVideoPlaylistMenuVueEvents
|
|
18151
18995
|
>;
|
|
18152
|
-
/** **You slot the player**, so it keeps your appearance, extra controls, captions, and poster treatment. 'Sandbox' takes its preview and 'Menu' its trigger the same way. **Entries are markup.** React skips properties it would set imperatively during hydration, so an array property on a custom element is missing on the first paint of a server-rendered page. 'using-the-elements.mdx' has the measurement. Markup also makes each entry a real button with its name inside. **The playlist does not play media.** It sets 'src' on the player and tracks which entry is current. The current entry moves when: - an entry is pressed, - the player dispatches 'helix-next' or 'helix-previous', or - the player reaches the end. On 'ended' the playlist advances and the next clip starts playing, because the user already pressed play once. 'repeat' decides what happens at the end: 'one' plays the same entry again, and 'all' goes from the last entry back to the first. Without it, the playlist stops on the last entry and sends 'helix-end'. 'shuffle' plays the entries in a random order, starting from the one that is current, and 'previous' retraces that order. **The player is named by the current entry**, and the device's own media controls show the entry as the title. A player you gave a 'label' keeps your name, and only the title follows the entry. **Keyboard.** Each entry is a button in the tab order, and Enter or Space plays it. The current entry carries 'aria-current'. While focus is on the player, the player's own keys work, and 'Video' lists them.
|
|
18996
|
+
/** **You slot the player**, so it keeps your appearance, extra controls, captions, and poster treatment. 'Sandbox' takes its preview and 'Menu' its trigger the same way. **Entries are markup.** React skips properties it would set imperatively during hydration, so an array property on a custom element is missing on the first paint of a server-rendered page. 'using-the-elements.mdx' has the measurement. Markup also makes each entry a real button with its name inside. **The playlist does not play media.** It sets 'src' on the player and tracks which entry is current. The current entry moves when: - an entry is pressed, - the player dispatches 'helix-next' or 'helix-previous', or - the player reaches the end. On 'ended' the playlist advances and the next clip starts playing, because the user already pressed play once. 'repeat' decides what happens at the end: 'one' plays the same entry again, and 'all' goes from the last entry back to the first. Without it, the playlist stops on the last entry and sends 'helix-end'. 'shuffle' plays the entries in a random order, starting from the one that is current, and 'previous' retraces that order. **The player is named by the current entry**, and the device's own media controls show the entry as the title. A player you gave a 'label' keeps your name, and only the title follows the entry. **Keyboard.** Each entry is a button in the tab order, and Enter or Space plays it. The arrow keys move focus to the entry before or after, and Home and End to the first and the last, passing over disabled entries. The current entry carries 'aria-current'. While focus is on the player, the player's own keys work, and 'Video' lists them, and Shift with N or P plays the next or the previous entry. The player's previous and next controls move through the entries in the same order the playlist does. **What a screen reader hears.** A list named by 'label', with a button for each entry. When the playlist moves to another entry, by a press, by the player's controls, or at the end of a clip, a live region says 'playing-label', "Now playing" and the entry's name. */
|
|
18153
18997
|
"helix-headless-video-playlist": DefineCustomElement<
|
|
18154
18998
|
HelixHeadlessVideoPlaylist,
|
|
18155
18999
|
HelixHeadlessVideoPlaylistVueProps,
|
|
18156
19000
|
HelixHeadlessVideoPlaylistVueEvents
|
|
18157
19001
|
>;
|
|
18158
|
-
/** The picture is a native '<video>', so decoding, buffering, captions, Picture in Picture, AirPlay, and codecs come from the platform. The component replaces the control bar, because the native bar cannot be styled. The scrubber and the volume are '<input type="range">' elements, so arrow keys, Home and End, touch targets, and screen reader announcements work as they do natively. When you set 'controls', the browser's control bar is used, the Helix bar is not drawn, and the keys below are not bound, so a key press does not seek twice. **Keyboard.** The keys match other players, and they are bound on the element only, so they work while focus is on the player. | Key | What it does | |---|---| | Space, 'k' | Plays or pauses. Space on a button presses the button. | | Right, Left | Moves 5 seconds forward or back. | | Shift with Right or Left | Moves 10 seconds forward or back. | | 'l', 'j' | Moves 10 seconds forward or back, as the skip buttons do. | | Up, Down | Raises or lowers the volume by a tenth. | | 'm' | Mutes or unmutes. | | 'f' | Enters or leaves fullscreen. | | Tab | Moves through the controls on the bar. | On the scrubber and the volume slider, the arrow keys, Page Up, Page Down, Home, and End move the slider, as on any range input. '<source>' and '<track>' children are copied into the video. A media element selects resources from its own child nodes, and a slot is one node, so slotted sources would give the video no text tracks, no current source, and a 'readyState' of zero, and it would not play. They are copied so your light DOM stays intact, and are copied again whenever the slot changes. The player sends every media event of its inner video under the same name, without bubbling, as a '<video>' sends it. Listen on the player as you would on a video: 'timeupdate', 'volumechange', 'loadedmetadata', 'error', and the rest. */
|
|
19002
|
+
/** The picture is a native '<video>', so decoding, buffering, captions, Picture in Picture, AirPlay, and codecs come from the platform. The component replaces the control bar, because the native bar cannot be styled. The scrubber and the volume are '<input type="range">' elements, so arrow keys, Home and End, touch targets, and screen reader announcements work as they do natively. When you set 'controls', the browser's control bar is used, the Helix bar is not drawn, and the keys below are not bound, so a key press does not seek twice. **Keyboard.** The keys match other players, and they are bound on the element only, so they work while focus is on the player. | Key | What it does | |---|---| | Space, 'k' | Plays or pauses. Space on a button presses the button. | | Right, Left | Moves 5 seconds forward or back. | | Shift with Right or Left | Moves 10 seconds forward or back. | | 'l', 'j' | Moves 10 seconds forward or back, as the skip buttons do. | | Up, Down | Raises or lowers the volume by a tenth. | | 'm' | Mutes or unmutes. | | 'f' | Enters or leaves fullscreen. | | 'c' | Turns captions on or off. | | Home, End | Goes to the start or the end. | | '0' to '9' | Goes to that tenth of the video: '5' is the middle. | | Tab | Moves through the controls on the bar. | A key with Control, Command, or Alt held is left to the browser. The player lists its keys in 'aria-keyshortcuts', and a live region says what a key changed that is not on the focused control: playing or paused, muted, the volume, captions on or off, and where the video is after a seek. On the scrubber and the volume slider, the arrow keys, Page Up, Page Down, Home, and End move the slider, as on any range input. '<source>' and '<track>' children are copied into the video. A media element selects resources from its own child nodes, and a slot is one node, so slotted sources would give the video no text tracks, no current source, and a 'readyState' of zero, and it would not play. They are copied so your light DOM stays intact, and are copied again whenever the slot changes. The player sends every media event of its inner video under the same name, without bubbling, as a '<video>' sends it. Listen on the player as you would on a video: 'timeupdate', 'volumechange', 'loadedmetadata', 'error', and the rest. */
|
|
18159
19003
|
"helix-headless-video": DefineCustomElement<
|
|
18160
19004
|
HelixHeadlessVideo,
|
|
18161
19005
|
HelixHeadlessVideoVueProps,
|
|
18162
19006
|
HelixHeadlessVideoVueEvents
|
|
18163
19007
|
>;
|
|
18164
|
-
/** The items arrive as data, in one of two ways: - 'items' takes an array. A framework sets it as a property, and React hydration keeps it. - 'for' names a '<script type="application/json">' that holds an array, which a server sends as markup. Each item is drawn into a row in one of two ways: - 'renderItem' is a function from an item and its index to the row's content: a Lit template, a string, or a DOM node. - A '<template>' child defines one row. 'data-field="name"' fills an element with the item's 'name' as text, and 'data-field-href="url"' writes the item's 'url' into 'href', the same for any attribute. A field may be a path of keys, such as 'author.name'. Rows are your markup in the light DOM, so your stylesheet styles them. **A grid.** 'columns' lays the items out that many to a line, as a grid of equal columns, and windows the set a line at a time, as React Aria's grid layout does. Each item draws one element, a cell of the grid, and 'estimate' is the height of a line. Space the items with padding inside each one, which the list measures with the line. **Keyboard.** The list is one tab stop. | Key | What it does | |---|---| | Down, Up | Moves to the next or the previous item, or in a grid to the item in the same column on the next or the previous line. | | Right, Left | In a grid, moves to the next or the previous item along the line, the other way round on a right-to-left page. | | Home, End | Moves to the first or the last item. | | Page Down, Page Up | Moves by the number of items, or of lines in a grid, on screen. | | A letter or a word | Moves to the next item whose text starts with what you typed. | | Tab | Moves into the focused row's own links and buttons, then out of the list. | An item that is not drawn is scrolled into view and focused, so a keyboard reaches the whole set. When the row holding the tab stop scrolls away, the stop moves to the first row on screen. Typing matches each item's 'text-field', which is the first 'data-field' of the row template by default, or the item itself when it is a string or a number. Each row says its place in the whole set with 'aria-posinset' and 'aria-setsize', so a screen reader says "4,000 of 10,000". The row holding focus stays drawn when it scrolls out. **Selecting.** 'selection-mode' makes the list a list box a reader chooses from: 'single' selects one item and 'multiple' any number. Space or a press selects an item, Shift with Space, an arrow, Home, End or a press takes in the items from the last one chosen, and Control or Command with A selects them all, in 'multiple'. 'value' holds the chosen items' keys, separated by commas, in the order of the set: 'key-field' names each item's key, and a string or a number item is its own key. A change asks with 'helix-before-change' and tells with 'change'. Each row is an 'option' marked 'aria-selected', so a row's own links and buttons are not reached there: keep those to a list without 'selection-mode'. **Loading more.** 'helix-range-change' fires as the items on screen change, and 'range' holds them. 'helix-load-more' fires once a reader is within one screen of the end, once for each length of the set: add to 'items' and it can fire again. While you fetch, set 'loading': the list is busy, and a row after the last item says "Loading more" ('loading-label', or your own content in the 'loading' slot). 'scrollToIndex' takes a reader to an item. **An empty list.** Set 'empty-label', or put your own content in the 'empty' slot, for a row shown when there are no items and none are loading, such as "No messages yet" and a link to write one. Without either, an empty list shows nothing, since a list whose items have not arrived yet has not said it has none. **Row height.** Rows are placed by 'estimate' until they are drawn. Then the list reads the drawn rows' height once and places every row by it, so a wrong estimate still reaches the last item. Set 'measured' for rows of different heights. Once the list draws rows of different heights, such as rows that wrap on a narrow screen, it places each row by its own height whether 'measured' is set or not. The list follows its source. A new 'items' array, an edit to the script's text, or a script replaced under the same id draws the new rows. A row that stays in view keeps its element as the list scrolls. The viewport scrolls on this tier. It carries 'data-scroller', and 'core' ships '[data-scroller] { overflow: auto }' into every shadow root, so 'scrollTop' works with no stylesheet. You still need to set a block size. */
|
|
19008
|
+
/** The items arrive as data, in one of two ways: - 'items' takes an array. A framework sets it as a property, and React hydration keeps it. - 'for' names a '<script type="application/json">' that holds an array, which a server sends as markup. Each item is drawn into a row in one of two ways: - 'renderItem' is a function from an item and its index to the row's content: a Lit template, a string, or a DOM node. - A '<template>' child defines one row. 'data-field="name"' fills an element with the item's 'name' as text, and 'data-field-href="url"' writes the item's 'url' into 'href', the same for any attribute. A field may be a path of keys, such as 'author.name'. Rows are your markup in the light DOM, so your stylesheet styles them. **A grid.** 'columns' lays the items out that many to a line, as a grid of equal columns, and windows the set a line at a time, as React Aria's grid layout does. Each item draws one element, a cell of the grid, and 'estimate' is the height of a line. Space the items with padding inside each one, which the list measures with the line. **Keyboard.** The list is one tab stop. | Key | What it does | |---|---| | Down, Up | Moves to the next or the previous item, or in a grid to the item in the same column on the next or the previous line. | | Right, Left | In a grid, moves to the next or the previous item along the line, the other way round on a right-to-left page. | | Home, End | Moves to the first or the last item. | | Page Down, Page Up | Moves by the number of items, or of lines in a grid, on screen. | | A letter or a word | Moves to the next item whose text starts with what you typed. | | Tab | Moves into the focused row's own links and buttons, then out of the list. | An item that is not drawn is scrolled into view and focused, so a keyboard reaches the whole set. When the row holding the tab stop scrolls away, the stop moves to the first row on screen. Typing matches each item's 'text-field', which is the first 'data-field' of the row template by default, or the item itself when it is a string or a number. Each row says its place in the whole set with 'aria-posinset' and 'aria-setsize', so a screen reader says "4,000 of 10,000". The row holding focus stays drawn when it scrolls out. **Selecting.** 'selection-mode' makes the list a list box a reader chooses from: 'single' selects one item and 'multiple' any number. Space or a press selects an item, Shift with Space, an arrow, Home, End or a press takes in the items from the last one chosen, and Control or Command with A selects them all, in 'multiple'. 'value' holds the chosen items' keys, separated by commas, in the order of the set: 'key-field' names each item's key, and a string or a number item is its own key. A change asks with 'helix-before-change' and tells with 'change'. Each row is an 'option' marked 'aria-selected', so a row's own links and buttons are not reached there: keep those to a list without 'selection-mode'. **Loading more.** 'helix-range-change' fires as the items on screen change, and 'range' holds them. 'helix-load-more' fires once a reader is within one screen of the end, once for each length of the set: add to 'items' and it can fire again. While you fetch, set 'loading': the list is busy, and a row after the last item says "Loading more" ('loading-label', or your own content in the 'loading' slot). 'scrollToIndex' takes a reader to an item. **An empty list.** Set 'empty-label', or put your own content in the 'empty' slot, for a row shown when there are no items and none are loading, such as "No messages yet" and a link to write one. Without either, an empty list shows nothing, since a list whose items have not arrived yet has not said it has none. The list takes the 'empty' state while it has read its items and holds none, and the 'loading' state while 'loading' is set, so your stylesheet can change the box around it for either. A list with no name is reported once in a development build. Name it with 'label' or 'aria-label'. **Row height.** Rows are placed by 'estimate' until they are drawn. Then the list reads the drawn rows' height once and places every row by it, so a wrong estimate still reaches the last item. Set 'measured' for rows of different heights. Once the list draws rows of different heights, such as rows that wrap on a narrow screen, it places each row by its own height whether 'measured' is set or not. The list follows its source. A new 'items' array, an edit to the script's text, or a script replaced under the same id draws the new rows. A row that stays in view keeps its element as the list scrolls. The viewport scrolls on this tier. It carries 'data-scroller', and 'core' ships '[data-scroller] { overflow: auto }' into every shadow root, so 'scrollTop' works with no stylesheet. You still need to set a block size. */
|
|
18165
19009
|
"helix-headless-virtual-list": DefineCustomElement<
|
|
18166
19010
|
HelixHeadlessVirtualList,
|
|
18167
19011
|
HelixHeadlessVirtualListVueProps,
|