@fusion.dev/helix-headless 0.160.0 → 0.162.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 +1729 -50
- package/dist/canvas/root/canvas-root.d.ts +59 -2
- package/dist/canvas/root/canvas-root.js +123 -8
- package/dist/chat/message/chat-message.d.ts +8 -0
- package/dist/chat/message/chat-message.js +11 -0
- package/dist/chat/root/chat-root.d.ts +47 -1
- package/dist/chat/root/chat-root.js +130 -4
- package/dist/code-block/lines.d.ts +12 -0
- package/dist/code-block/lines.js +41 -0
- package/dist/code-block/root/code-block-root.d.ts +88 -5
- package/dist/code-block/root/code-block-root.js +154 -10
- package/dist/element-events.generated.js +4 -0
- package/dist/splitter/root/splitter-root.d.ts +15 -0
- package/dist/splitter/root/splitter-root.js +16 -2
- package/dist/table/grid-controller.d.ts +7 -1
- package/dist/table/grid-controller.js +9 -1
- package/dist/table/root/table-root.d.ts +122 -0
- package/dist/table/root/table-root.js +293 -17
- package/dist/table/row/table-row.d.ts +41 -0
- package/dist/table/row/table-row.js +56 -2
- package/dist/timeline/item/timeline-item.d.ts +47 -10
- package/dist/timeline/item/timeline-item.js +36 -4
- package/dist/video-playlist/item/video-playlist-item.d.ts +11 -0
- package/dist/video-playlist/item/video-playlist-item.js +5 -0
- package/dist/video-playlist/menu/video-playlist-menu.d.ts +6 -0
- package/dist/video-playlist/menu/video-playlist-menu.js +11 -0
- package/dist/video-playlist/root/video-playlist-root.d.ts +59 -5
- package/dist/video-playlist/root/video-playlist-root.js +82 -10
- package/dist/virtual-list/fill.d.ts +6 -1
- package/dist/virtual-list/fill.js +1 -1
- package/dist/virtual-list/keys.d.ts +8 -0
- package/dist/virtual-list/keys.js +20 -0
- package/dist/virtual-list/root/virtual-list-root.d.ts +98 -13
- package/dist/virtual-list/root/virtual-list-root.js +195 -20
- package/lint.json +1 -1
- package/package.json +5 -5
- package/types/jsx.d.ts +936 -68
- package/types/vue.d.ts +226 -12
- package/types/words.d.ts +79 -0
package/types/jsx.d.ts
CHANGED
|
@@ -3405,6 +3405,10 @@ what the controls drive rather than the mechanism. */
|
|
|
3405
3405
|
/** The name of the group of controls, read by screen readers, which names
|
|
3406
3406
|
what the controls drive rather than the mechanism. */
|
|
3407
3407
|
controlsLabel?: (HelixHeadlessCanvas["controlsLabel"]) | undefined;
|
|
3408
|
+
/** What screen readers hear after a copy, with `{count}` for the cards copied. */
|
|
3409
|
+
"copied-label"?: (HelixHeadlessCanvas["copiedLabel"]) | undefined;
|
|
3410
|
+
/** What screen readers hear after a copy, with `{count}` for the cards copied. */
|
|
3411
|
+
copiedLabel?: (HelixHeadlessCanvas["copiedLabel"]) | undefined;
|
|
3408
3412
|
/** The board's name where `label` is empty. */
|
|
3409
3413
|
"fallback-label"?: (HelixHeadlessCanvas["fallbackLabel"]) | undefined;
|
|
3410
3414
|
/** The board's name where `label` is empty. */
|
|
@@ -3492,6 +3496,10 @@ walk the cards. */
|
|
|
3492
3496
|
/** The text announced when a connection's end is picked up, with `{from}` and
|
|
3493
3497
|
`{to}`. */
|
|
3494
3498
|
reconnectingLabel?: (HelixHeadlessCanvas["reconnectingLabel"]) | undefined;
|
|
3499
|
+
/** What screen readers hear after a move or a resize is made again. */
|
|
3500
|
+
"redone-label"?: (HelixHeadlessCanvas["redoneLabel"]) | undefined;
|
|
3501
|
+
/** What screen readers hear after a move or a resize is made again. */
|
|
3502
|
+
redoneLabel?: (HelixHeadlessCanvas["redoneLabel"]) | undefined;
|
|
3495
3503
|
/** What screen readers hear after a key resizes a card, with `{name}` for the
|
|
3496
3504
|
card and `{width}` and `{height}` for its new size, in the document's
|
|
3497
3505
|
units. */
|
|
@@ -3594,6 +3602,10 @@ told the same. A tone left out is not read. */
|
|
|
3594
3602
|
"two-finger-hint-label"?: (HelixHeadlessCanvas["twoFingerHintLabel"]) | undefined;
|
|
3595
3603
|
/** The hint shown when one finger swipes over the board with `gestures="cooperative"`. */
|
|
3596
3604
|
twoFingerHintLabel?: (HelixHeadlessCanvas["twoFingerHintLabel"]) | undefined;
|
|
3605
|
+
/** What screen readers hear after a move or a resize is undone. */
|
|
3606
|
+
"undone-label"?: (HelixHeadlessCanvas["undoneLabel"]) | undefined;
|
|
3607
|
+
/** What screen readers hear after a move or a resize is undone. */
|
|
3608
|
+
undoneLabel?: (HelixHeadlessCanvas["undoneLabel"]) | undefined;
|
|
3597
3609
|
/** The line shown while the board, with `gestures="activate"`, has the gestures. */
|
|
3598
3610
|
"using-label"?: (HelixHeadlessCanvas["usingLabel"]) | undefined;
|
|
3599
3611
|
/** The line shown while the board, with `gestures="activate"`, has the gestures. */
|
|
@@ -3841,6 +3853,10 @@ what the controls drive rather than the mechanism. */
|
|
|
3841
3853
|
/** The name of the group of controls, read by screen readers, which names
|
|
3842
3854
|
what the controls drive rather than the mechanism. */
|
|
3843
3855
|
"prop:controlsLabel"?: (HelixHeadlessCanvas["controlsLabel"]) | undefined;
|
|
3856
|
+
/** What screen readers hear after a copy, with `{count}` for the cards copied. */
|
|
3857
|
+
"attr:copied-label"?: (HelixHeadlessCanvas["copiedLabel"]) | undefined;
|
|
3858
|
+
/** What screen readers hear after a copy, with `{count}` for the cards copied. */
|
|
3859
|
+
"prop:copiedLabel"?: (HelixHeadlessCanvas["copiedLabel"]) | undefined;
|
|
3844
3860
|
/** The board's name where `label` is empty. */
|
|
3845
3861
|
"attr:fallback-label"?: (HelixHeadlessCanvas["fallbackLabel"]) | undefined;
|
|
3846
3862
|
/** The board's name where `label` is empty. */
|
|
@@ -3928,6 +3944,10 @@ walk the cards. */
|
|
|
3928
3944
|
/** The text announced when a connection's end is picked up, with `{from}` and
|
|
3929
3945
|
`{to}`. */
|
|
3930
3946
|
"prop:reconnectingLabel"?: (HelixHeadlessCanvas["reconnectingLabel"]) | undefined;
|
|
3947
|
+
/** What screen readers hear after a move or a resize is made again. */
|
|
3948
|
+
"attr:redone-label"?: (HelixHeadlessCanvas["redoneLabel"]) | undefined;
|
|
3949
|
+
/** What screen readers hear after a move or a resize is made again. */
|
|
3950
|
+
"prop:redoneLabel"?: (HelixHeadlessCanvas["redoneLabel"]) | undefined;
|
|
3931
3951
|
/** What screen readers hear after a key resizes a card, with `{name}` for the
|
|
3932
3952
|
card and `{width}` and `{height}` for its new size, in the document's
|
|
3933
3953
|
units. */
|
|
@@ -4030,6 +4050,10 @@ told the same. A tone left out is not read. */
|
|
|
4030
4050
|
"attr:two-finger-hint-label"?: (HelixHeadlessCanvas["twoFingerHintLabel"]) | undefined;
|
|
4031
4051
|
/** The hint shown when one finger swipes over the board with `gestures="cooperative"`. */
|
|
4032
4052
|
"prop:twoFingerHintLabel"?: (HelixHeadlessCanvas["twoFingerHintLabel"]) | undefined;
|
|
4053
|
+
/** What screen readers hear after a move or a resize is undone. */
|
|
4054
|
+
"attr:undone-label"?: (HelixHeadlessCanvas["undoneLabel"]) | undefined;
|
|
4055
|
+
/** What screen readers hear after a move or a resize is undone. */
|
|
4056
|
+
"prop:undoneLabel"?: (HelixHeadlessCanvas["undoneLabel"]) | undefined;
|
|
4033
4057
|
/** The line shown while the board, with `gestures="activate"`, has the gestures. */
|
|
4034
4058
|
"attr:using-label"?: (HelixHeadlessCanvas["usingLabel"]) | undefined;
|
|
4035
4059
|
/** The line shown while the board, with `gestures="activate"`, has the gestures. */
|
|
@@ -5281,6 +5305,10 @@ is the way back, and that is a part inside the shadow tree where a
|
|
|
5281
5305
|
stylesheet can already reach it. Measured rather than assumed: `label,
|
|
5282
5306
|
pinned` after upgrade against `label` from the server. */
|
|
5283
5307
|
pinned?: (HelixHeadlessChat["pinned"]) | undefined;
|
|
5308
|
+
/** The words on the button that returns to the newest turn, where `resume` is empty. */
|
|
5309
|
+
"resume-label"?: (HelixHeadlessChat["resumeLabel"]) | undefined;
|
|
5310
|
+
/** The words on the button that returns to the newest turn, where `resume` is empty. */
|
|
5311
|
+
resumeLabel?: (HelixHeadlessChat["resumeLabel"]) | undefined;
|
|
5284
5312
|
/** How near the bottom still counts as being at it, in pixels.
|
|
5285
5313
|
|
|
5286
5314
|
A hook rather than a constant, because the right number depends on how tall
|
|
@@ -5443,6 +5471,10 @@ is the way back, and that is a part inside the shadow tree where a
|
|
|
5443
5471
|
stylesheet can already reach it. Measured rather than assumed: `label,
|
|
5444
5472
|
pinned` after upgrade against `label` from the server. */
|
|
5445
5473
|
"prop:pinned"?: (HelixHeadlessChat["pinned"]) | undefined;
|
|
5474
|
+
/** The words on the button that returns to the newest turn, where `resume` is empty. */
|
|
5475
|
+
"attr:resume-label"?: (HelixHeadlessChat["resumeLabel"]) | undefined;
|
|
5476
|
+
/** The words on the button that returns to the newest turn, where `resume` is empty. */
|
|
5477
|
+
"prop:resumeLabel"?: (HelixHeadlessChat["resumeLabel"]) | undefined;
|
|
5446
5478
|
/** How near the bottom still counts as being at it, in pixels.
|
|
5447
5479
|
|
|
5448
5480
|
A hook rather than a constant, because the right number depends on how tall
|
|
@@ -6014,6 +6046,18 @@ Here rather than on each control. */
|
|
|
6014
6046
|
textContent?: (string | number) | undefined;
|
|
6015
6047
|
};
|
|
6016
6048
|
|
|
6049
|
+
/** `HelixHeadlessCodeBlock` component event */
|
|
6050
|
+
export type HelixHeadlessCodeBlockElementEvent<E = Event> = TypedEvent<
|
|
6051
|
+
HelixHeadlessCodeBlock,
|
|
6052
|
+
E
|
|
6053
|
+
>;
|
|
6054
|
+
/** `helix-before-toggle` event type */
|
|
6055
|
+
export type HelixHeadlessCodeBlockHelixBeforeToggleElementEvent =
|
|
6056
|
+
HelixHeadlessCodeBlockElementEvent<HelixBeforeToggleEvent>;
|
|
6057
|
+
/** `helix-toggle` event type */
|
|
6058
|
+
export type HelixHeadlessCodeBlockHelixToggleElementEvent =
|
|
6059
|
+
HelixHeadlessCodeBlockElementEvent<HelixToggleEvent>;
|
|
6060
|
+
|
|
6017
6061
|
export type HelixHeadlessCodeBlockProps = {
|
|
6018
6062
|
/** The name of a block that scrolls, which is a tab stop while it does.
|
|
6019
6063
|
|
|
@@ -6100,6 +6144,14 @@ copy, which takes the code alone. Reflected, because the stylesheet lays
|
|
|
6100
6144
|
the gutter out beside the code. A diff numbers its lines from its hunks
|
|
6101
6145
|
whether or not this is set. */
|
|
6102
6146
|
lineNumbers?: (HelixHeadlessCodeBlock["lineNumbers"]) | undefined;
|
|
6147
|
+
/** The lines to mark, as numbers and ranges counted from 1, such as `2, 4-6`.
|
|
6148
|
+
Each run is drawn as a band behind its lines. Not for a diff, which marks
|
|
6149
|
+
its own changes. */
|
|
6150
|
+
"mark-lines"?: (HelixHeadlessCodeBlock["markLines"]) | undefined;
|
|
6151
|
+
/** The lines to mark, as numbers and ranges counted from 1, such as `2, 4-6`.
|
|
6152
|
+
Each run is drawn as a band behind its lines. Not for a diff, which marks
|
|
6153
|
+
its own changes. */
|
|
6154
|
+
markLines?: (HelixHeadlessCodeBlock["markLines"]) | undefined;
|
|
6103
6155
|
/** Whether to leave the copy button off.
|
|
6104
6156
|
|
|
6105
6157
|
Negative, which is not a style choice. A boolean attribute is true whenever
|
|
@@ -6146,6 +6198,22 @@ Absent is unified, each removal above its replacement, which fits any
|
|
|
6146
6198
|
width. `split` sets the old version beside the new one. Optional rather
|
|
6147
6199
|
than defaulted, so the host carries no attribute the consumer did not write. */
|
|
6148
6200
|
variant?: (HelixHeadlessCodeBlock["variant"]) | undefined;
|
|
6201
|
+
/** Whether long lines wrap. Without it they scroll.
|
|
6202
|
+
|
|
6203
|
+
Off by default, so long lines scroll, because a line break can be
|
|
6204
|
+
significant in code and a wrapped line reads as two. For prose-like code,
|
|
6205
|
+
such as a long command or a log line, a wrap reads better than a scroll.
|
|
6206
|
+
With `line-numbers`, each number stands beside the line it numbers
|
|
6207
|
+
however many rows that line takes. Reflected, because the stylesheet
|
|
6208
|
+
wraps the lines. */
|
|
6209
|
+
wrap?: (HelixHeadlessCodeBlock["wrap"]) | undefined;
|
|
6210
|
+
/** The wrap button's name, which it keeps whether it is pressed or not. */
|
|
6211
|
+
"wrap-label"?: (HelixHeadlessCodeBlock["wrapLabel"]) | undefined;
|
|
6212
|
+
/** The wrap button's name, which it keeps whether it is pressed or not. */
|
|
6213
|
+
wrapLabel?: (HelixHeadlessCodeBlock["wrapLabel"]) | undefined;
|
|
6214
|
+
/** Whether the header has a button that wraps the lines and unwraps them. The
|
|
6215
|
+
block draws a header for it even with no name. */
|
|
6216
|
+
wrappable?: (HelixHeadlessCodeBlock["wrappable"]) | undefined;
|
|
6149
6217
|
/** Turns the code into highlighted markup, which the block draws in place of
|
|
6150
6218
|
the plain text.
|
|
6151
6219
|
|
|
@@ -6168,6 +6236,13 @@ in the slot, so the copy button copies it as written and a reader without
|
|
|
6168
6236
|
the script still has it. Not called on a server, which has no code to
|
|
6169
6237
|
read, nor for a diff. */
|
|
6170
6238
|
highlight?: (HelixHeadlessCodeBlock["highlight"]) | undefined;
|
|
6239
|
+
|
|
6240
|
+
/** The wrap button was pressed, with the `wrap` it asks for in `detail.checked`. Cancelable: cancel it to keep the lines as they are. */
|
|
6241
|
+
"onhelix-before-toggle"?: ((
|
|
6242
|
+
e: HelixHeadlessCodeBlockHelixBeforeToggleElementEvent,
|
|
6243
|
+
) => void) | undefined;
|
|
6244
|
+
/** Fired after the wrap button changed `wrap`, with the new value in `detail.checked`. */
|
|
6245
|
+
"onhelix-toggle"?: ((e: HelixHeadlessCodeBlockHelixToggleElementEvent) => void) | undefined;
|
|
6171
6246
|
};
|
|
6172
6247
|
|
|
6173
6248
|
export type HelixHeadlessCodeBlockSolidJsProps = {
|
|
@@ -6256,6 +6331,14 @@ copy, which takes the code alone. Reflected, because the stylesheet lays
|
|
|
6256
6331
|
the gutter out beside the code. A diff numbers its lines from its hunks
|
|
6257
6332
|
whether or not this is set. */
|
|
6258
6333
|
"prop:lineNumbers"?: (HelixHeadlessCodeBlock["lineNumbers"]) | undefined;
|
|
6334
|
+
/** The lines to mark, as numbers and ranges counted from 1, such as `2, 4-6`.
|
|
6335
|
+
Each run is drawn as a band behind its lines. Not for a diff, which marks
|
|
6336
|
+
its own changes. */
|
|
6337
|
+
"attr:mark-lines"?: (HelixHeadlessCodeBlock["markLines"]) | undefined;
|
|
6338
|
+
/** The lines to mark, as numbers and ranges counted from 1, such as `2, 4-6`.
|
|
6339
|
+
Each run is drawn as a band behind its lines. Not for a diff, which marks
|
|
6340
|
+
its own changes. */
|
|
6341
|
+
"prop:markLines"?: (HelixHeadlessCodeBlock["markLines"]) | undefined;
|
|
6259
6342
|
/** Whether to leave the copy button off.
|
|
6260
6343
|
|
|
6261
6344
|
Negative, which is not a style choice. A boolean attribute is true whenever
|
|
@@ -6302,6 +6385,22 @@ Absent is unified, each removal above its replacement, which fits any
|
|
|
6302
6385
|
width. `split` sets the old version beside the new one. Optional rather
|
|
6303
6386
|
than defaulted, so the host carries no attribute the consumer did not write. */
|
|
6304
6387
|
"prop:variant"?: (HelixHeadlessCodeBlock["variant"]) | undefined;
|
|
6388
|
+
/** Whether long lines wrap. Without it they scroll.
|
|
6389
|
+
|
|
6390
|
+
Off by default, so long lines scroll, because a line break can be
|
|
6391
|
+
significant in code and a wrapped line reads as two. For prose-like code,
|
|
6392
|
+
such as a long command or a log line, a wrap reads better than a scroll.
|
|
6393
|
+
With `line-numbers`, each number stands beside the line it numbers
|
|
6394
|
+
however many rows that line takes. Reflected, because the stylesheet
|
|
6395
|
+
wraps the lines. */
|
|
6396
|
+
"prop:wrap"?: (HelixHeadlessCodeBlock["wrap"]) | undefined;
|
|
6397
|
+
/** The wrap button's name, which it keeps whether it is pressed or not. */
|
|
6398
|
+
"attr:wrap-label"?: (HelixHeadlessCodeBlock["wrapLabel"]) | undefined;
|
|
6399
|
+
/** The wrap button's name, which it keeps whether it is pressed or not. */
|
|
6400
|
+
"prop:wrapLabel"?: (HelixHeadlessCodeBlock["wrapLabel"]) | undefined;
|
|
6401
|
+
/** Whether the header has a button that wraps the lines and unwraps them. The
|
|
6402
|
+
block draws a header for it even with no name. */
|
|
6403
|
+
"prop:wrappable"?: (HelixHeadlessCodeBlock["wrappable"]) | undefined;
|
|
6305
6404
|
/** Turns the code into highlighted markup, which the block draws in place of
|
|
6306
6405
|
the plain text.
|
|
6307
6406
|
|
|
@@ -6324,6 +6423,14 @@ in the slot, so the copy button copies it as written and a reader without
|
|
|
6324
6423
|
the script still has it. Not called on a server, which has no code to
|
|
6325
6424
|
read, nor for a diff. */
|
|
6326
6425
|
"prop:highlight"?: (HelixHeadlessCodeBlock["highlight"]) | undefined;
|
|
6426
|
+
/** The wrap button was pressed, with the `wrap` it asks for in `detail.checked`. Cancelable: cancel it to keep the lines as they are. */
|
|
6427
|
+
"on:helix-before-toggle"?: ((
|
|
6428
|
+
e: HelixHeadlessCodeBlockHelixBeforeToggleElementEvent,
|
|
6429
|
+
) => void) | undefined;
|
|
6430
|
+
/** Fired after the wrap button changed `wrap`, with the new value in `detail.checked`. */
|
|
6431
|
+
"on:helix-toggle"?: ((
|
|
6432
|
+
e: HelixHeadlessCodeBlockHelixToggleElementEvent,
|
|
6433
|
+
) => void) | undefined;
|
|
6327
6434
|
|
|
6328
6435
|
/** Set the innerHTML of the element */
|
|
6329
6436
|
innerHTML?: (string) | undefined;
|
|
@@ -27545,6 +27652,22 @@ consumer's to set. */
|
|
|
27545
27652
|
"corner-label"?: (HelixHeadlessSplitter["cornerLabel"]) | undefined;
|
|
27546
27653
|
/** The name of the handle where two dividers cross, read by screen readers. */
|
|
27547
27654
|
cornerLabel?: (HelixHeadlessSplitter["cornerLabel"]) | undefined;
|
|
27655
|
+
/** What the handle where two dividers cross says it is set to, both dividers
|
|
27656
|
+
at once: `{across}` is where the divider that runs down stands, and
|
|
27657
|
+
`{down}` where the one that runs across stands, each a percentage.
|
|
27658
|
+
|
|
27659
|
+
**Both, because the handle moves both**, and a number names one: the
|
|
27660
|
+
handle's `aria-valuenow` is the divider its `aria-orientation` names, and
|
|
27661
|
+
these words are the whole of where it is. */
|
|
27662
|
+
"corner-value-label"?: (HelixHeadlessSplitter["cornerValueLabel"]) | undefined;
|
|
27663
|
+
/** What the handle where two dividers cross says it is set to, both dividers
|
|
27664
|
+
at once: `{across}` is where the divider that runs down stands, and
|
|
27665
|
+
`{down}` where the one that runs across stands, each a percentage.
|
|
27666
|
+
|
|
27667
|
+
**Both, because the handle moves both**, and a number names one: the
|
|
27668
|
+
handle's `aria-valuenow` is the divider its `aria-orientation` names, and
|
|
27669
|
+
these words are the whole of where it is. */
|
|
27670
|
+
cornerValueLabel?: (HelixHeadlessSplitter["cornerValueLabel"]) | undefined;
|
|
27548
27671
|
/** Which pane starts shut, when `collapsed` is not set. */
|
|
27549
27672
|
"default-collapsed"?: (HelixHeadlessSplitter["defaultCollapsed"]) | undefined;
|
|
27550
27673
|
/** Which pane starts shut, when `collapsed` is not set. */
|
|
@@ -27689,6 +27812,22 @@ consumer's to set. */
|
|
|
27689
27812
|
"attr:corner-label"?: (HelixHeadlessSplitter["cornerLabel"]) | undefined;
|
|
27690
27813
|
/** The name of the handle where two dividers cross, read by screen readers. */
|
|
27691
27814
|
"prop:cornerLabel"?: (HelixHeadlessSplitter["cornerLabel"]) | undefined;
|
|
27815
|
+
/** What the handle where two dividers cross says it is set to, both dividers
|
|
27816
|
+
at once: `{across}` is where the divider that runs down stands, and
|
|
27817
|
+
`{down}` where the one that runs across stands, each a percentage.
|
|
27818
|
+
|
|
27819
|
+
**Both, because the handle moves both**, and a number names one: the
|
|
27820
|
+
handle's `aria-valuenow` is the divider its `aria-orientation` names, and
|
|
27821
|
+
these words are the whole of where it is. */
|
|
27822
|
+
"attr:corner-value-label"?: (HelixHeadlessSplitter["cornerValueLabel"]) | undefined;
|
|
27823
|
+
/** What the handle where two dividers cross says it is set to, both dividers
|
|
27824
|
+
at once: `{across}` is where the divider that runs down stands, and
|
|
27825
|
+
`{down}` where the one that runs across stands, each a percentage.
|
|
27826
|
+
|
|
27827
|
+
**Both, because the handle moves both**, and a number names one: the
|
|
27828
|
+
handle's `aria-valuenow` is the divider its `aria-orientation` names, and
|
|
27829
|
+
these words are the whole of where it is. */
|
|
27830
|
+
"prop:cornerValueLabel"?: (HelixHeadlessSplitter["cornerValueLabel"]) | undefined;
|
|
27692
27831
|
/** Which pane starts shut, when `collapsed` is not set. */
|
|
27693
27832
|
"attr:default-collapsed"?: (HelixHeadlessSplitter["defaultCollapsed"]) | undefined;
|
|
27694
27833
|
/** Which pane starts shut, when `collapsed` is not set. */
|
|
@@ -28884,6 +29023,12 @@ export type HelixHeadlessTableElementEvent<E = Event> = TypedEvent<
|
|
|
28884
29023
|
/** `helix-before-reorder` event type */
|
|
28885
29024
|
export type HelixHeadlessTableHelixBeforeReorderElementEvent =
|
|
28886
29025
|
HelixHeadlessTableElementEvent<HelixBeforeReorderEvent>;
|
|
29026
|
+
/** `helix-before-toggle` event type */
|
|
29027
|
+
export type HelixHeadlessTableHelixBeforeToggleElementEvent =
|
|
29028
|
+
HelixHeadlessTableElementEvent<HelixBeforeToggleEvent>;
|
|
29029
|
+
/** `helix-load-more` event type */
|
|
29030
|
+
export type HelixHeadlessTableHelixLoadMoreElementEvent =
|
|
29031
|
+
HelixHeadlessTableElementEvent<HelixLoadMoreEvent>;
|
|
28887
29032
|
/** `helix-reorder` event type */
|
|
28888
29033
|
export type HelixHeadlessTableHelixReorderElementEvent =
|
|
28889
29034
|
HelixHeadlessTableElementEvent<HelixReorderEvent>;
|
|
@@ -28899,6 +29044,9 @@ export type HelixHeadlessTableHelixSortElementEvent =
|
|
|
28899
29044
|
/** `helix-sorted` event type */
|
|
28900
29045
|
export type HelixHeadlessTableHelixSortedElementEvent =
|
|
28901
29046
|
HelixHeadlessTableElementEvent<HelixSortedEvent>;
|
|
29047
|
+
/** `helix-toggle` event type */
|
|
29048
|
+
export type HelixHeadlessTableHelixToggleElementEvent =
|
|
29049
|
+
HelixHeadlessTableElementEvent<HelixToggleEvent>;
|
|
28902
29050
|
|
|
28903
29051
|
export type HelixHeadlessTableProps = {
|
|
28904
29052
|
/** The word for an ascending sort, in a `sorted-label` that writes `{order}`. */
|
|
@@ -28940,6 +29088,12 @@ and a list here would be a second way to say what that says. This table's
|
|
|
28940
29088
|
cells are markup, and a table written as rows of cells with no column
|
|
28941
29089
|
declared in it has nowhere else to be sized from. */
|
|
28942
29090
|
columns?: (HelixHeadlessTable["columns"]) | undefined;
|
|
29091
|
+
/** The keys of the rows whose rows are shown at the start, separated by
|
|
29092
|
+
commas. Used until `expanded` is set. */
|
|
29093
|
+
"default-expanded"?: (HelixHeadlessTable["defaultExpanded"]) | undefined;
|
|
29094
|
+
/** The keys of the rows whose rows are shown at the start, separated by
|
|
29095
|
+
commas. Used until `expanded` is set. */
|
|
29096
|
+
defaultExpanded?: (HelixHeadlessTable["defaultExpanded"]) | undefined;
|
|
28943
29097
|
/** The keys selected at the start, separated by commas. Used until `selected`
|
|
28944
29098
|
is set. */
|
|
28945
29099
|
"default-selected"?: (HelixHeadlessTable["defaultSelected"]) | undefined;
|
|
@@ -28974,6 +29128,18 @@ While it is set, a line after the rows shows it, or your own content in the
|
|
|
28974
29128
|
`error` slot, in place of the empty and loading lines, and the live region
|
|
28975
29129
|
says it. */
|
|
28976
29130
|
errorText?: (HelixHeadlessTable["errorText"]) | undefined;
|
|
29131
|
+
/** The name of the heading over the disclosure buttons. */
|
|
29132
|
+
"expand-column-label"?: (HelixHeadlessTable["expandColumnLabel"]) | undefined;
|
|
29133
|
+
/** The name of the heading over the disclosure buttons. */
|
|
29134
|
+
expandColumnLabel?: (HelixHeadlessTable["expandColumnLabel"]) | undefined;
|
|
29135
|
+
/** The keys of the rows whose rows are shown, separated by commas, in a table
|
|
29136
|
+
whose rows nest. A press on a row's disclosure button asks first, and
|
|
29137
|
+
`default-expanded` seeds what this element then owns. */
|
|
29138
|
+
expanded?: (HelixHeadlessTable["expanded"]) | undefined;
|
|
29139
|
+
/** The name of a row's disclosure button. `{row}` is the words of the row's first cell. */
|
|
29140
|
+
"expand-row-label"?: (HelixHeadlessTable["expandRowLabel"]) | undefined;
|
|
29141
|
+
/** The name of a row's disclosure button. `{row}` is the words of the row's first cell. */
|
|
29142
|
+
expandRowLabel?: (HelixHeadlessTable["expandRowLabel"]) | undefined;
|
|
28977
29143
|
/** The table's name where neither `label` nor an `aria-label` or
|
|
28978
29144
|
`aria-labelledby` on the host gives it one. */
|
|
28979
29145
|
"fallback-label"?: (HelixHeadlessTable["fallbackLabel"]) | undefined;
|
|
@@ -28993,6 +29159,12 @@ cells, which is the one way a cell of your markup can take focus. */
|
|
|
28993
29159
|
An `aria-label` or `aria-labelledby` on the host names the table too, and
|
|
28994
29160
|
wins over this. */
|
|
28995
29161
|
label?: (HelixHeadlessTable["label"]) | undefined;
|
|
29162
|
+
/** Sends `helix-load-more` once the end of the table comes within a screen
|
|
29163
|
+
of view, so you can add the next rows as a reader nears them. */
|
|
29164
|
+
"load-more"?: (HelixHeadlessTable["loadMore"]) | undefined;
|
|
29165
|
+
/** Sends `helix-load-more` once the end of the table comes within a screen
|
|
29166
|
+
of view, so you can add the next rows as a reader nears them. */
|
|
29167
|
+
loadMore?: (HelixHeadlessTable["loadMore"]) | undefined;
|
|
28996
29168
|
/** What screen readers hear each time a key moves a held row, in a
|
|
28997
29169
|
`reorderable` table. `{name}` is the row's words, `{position}` the place it
|
|
28998
29170
|
would go, counting from 1, and `{count}` the number of rows. */
|
|
@@ -29027,6 +29199,12 @@ table moves no row itself: you move your rows on `helix-reorder`. */
|
|
|
29027
29199
|
"select-all-label"?: (HelixHeadlessTable["selectAllLabel"]) | undefined;
|
|
29028
29200
|
/** The name of the checkbox in the heading that selects every row. */
|
|
29029
29201
|
selectAllLabel?: (HelixHeadlessTable["selectAllLabel"]) | undefined;
|
|
29202
|
+
/** The name of the heading over the checkboxes under
|
|
29203
|
+
`selection-mode="single"`, where it holds no checkbox of its own. */
|
|
29204
|
+
"select-column-label"?: (HelixHeadlessTable["selectColumnLabel"]) | undefined;
|
|
29205
|
+
/** The name of the heading over the checkboxes under
|
|
29206
|
+
`selection-mode="single"`, where it holds no checkbox of its own. */
|
|
29207
|
+
selectColumnLabel?: (HelixHeadlessTable["selectColumnLabel"]) | undefined;
|
|
29030
29208
|
/** The keys of the selected rows, separated by commas.
|
|
29031
29209
|
|
|
29032
29210
|
A reader's press fires `helix-select` first, and refusing it leaves the
|
|
@@ -29043,6 +29221,20 @@ rows are chosen, written in the locale, and a language that needs plural
|
|
|
29043
29221
|
forms writes them: `{count, plural, one {# wybrany} few {# wybrane} many
|
|
29044
29222
|
{# wybranych} other {# wybranego}}`. */
|
|
29045
29223
|
selectedLabel?: (HelixHeadlessTable["selectedLabel"]) | undefined;
|
|
29224
|
+
/** What a press on a row, or in a `grid` table a key that moves to one, does
|
|
29225
|
+
to the rows already selected: `toggle`, the default, leaves them to the
|
|
29226
|
+
checkboxes, and `replace` selects the row alone. */
|
|
29227
|
+
"selection-behavior"?: (HelixHeadlessTable["selectionBehavior"]) | undefined;
|
|
29228
|
+
/** What a press on a row, or in a `grid` table a key that moves to one, does
|
|
29229
|
+
to the rows already selected: `toggle`, the default, leaves them to the
|
|
29230
|
+
checkboxes, and `replace` selects the row alone. */
|
|
29231
|
+
selectionBehavior?: (HelixHeadlessTable["selectionBehavior"]) | undefined;
|
|
29232
|
+
/** How many rows a `selectable` table selects: `multiple`, the default, or
|
|
29233
|
+
`single`, one at a time. */
|
|
29234
|
+
"selection-mode"?: (HelixHeadlessTable["selectionMode"]) | undefined;
|
|
29235
|
+
/** How many rows a `selectable` table selects: `multiple`, the default, or
|
|
29236
|
+
`single`, one at a time. */
|
|
29237
|
+
selectionMode?: (HelixHeadlessTable["selectionMode"]) | undefined;
|
|
29046
29238
|
/** The name of a row's checkbox. `{row}` is replaced with the words of the
|
|
29047
29239
|
row's first cell. */
|
|
29048
29240
|
"select-row-label"?: (HelixHeadlessTable["selectRowLabel"]) | undefined;
|
|
@@ -29090,6 +29282,14 @@ say that without the component knowing what a row looks like. */
|
|
|
29090
29282
|
"onhelix-before-reorder"?: ((
|
|
29091
29283
|
e: HelixHeadlessTableHelixBeforeReorderElementEvent,
|
|
29092
29284
|
) => void) | undefined;
|
|
29285
|
+
/** Fired from a row when its disclosure button is pressed, with whether it would be open in `detail.checked`. Cancelable: cancel it to keep the row as it is. */
|
|
29286
|
+
"onhelix-before-toggle"?: ((
|
|
29287
|
+
e: HelixHeadlessTableHelixBeforeToggleElementEvent,
|
|
29288
|
+
) => void) | undefined;
|
|
29289
|
+
/** Fired, in a table with `load-more`, when the end of the table comes within a screen of view, once for each number of rows. */
|
|
29290
|
+
"onhelix-load-more"?: ((
|
|
29291
|
+
e: HelixHeadlessTableHelixLoadMoreElementEvent,
|
|
29292
|
+
) => void) | undefined;
|
|
29093
29293
|
/** 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. */
|
|
29094
29294
|
"onhelix-reorder"?: ((e: HelixHeadlessTableHelixReorderElementEvent) => void) | undefined;
|
|
29095
29295
|
/** The selection is about to change. The event carries every selected key, separated by commas. Cancelable: cancel it to keep the current selection. */
|
|
@@ -29100,6 +29300,8 @@ say that without the component knowing what a row looks like. */
|
|
|
29100
29300
|
"onhelix-sort"?: ((e: HelixHeadlessTableHelixSortElementEvent) => void) | undefined;
|
|
29101
29301
|
/** Fired after the sort order changes, with the new order. */
|
|
29102
29302
|
"onhelix-sorted"?: ((e: HelixHeadlessTableHelixSortedElementEvent) => void) | undefined;
|
|
29303
|
+
/** Fired from a row once the rows under it are shown or hidden, with whether it is open in `detail.checked`. */
|
|
29304
|
+
"onhelix-toggle"?: ((e: HelixHeadlessTableHelixToggleElementEvent) => void) | undefined;
|
|
29103
29305
|
};
|
|
29104
29306
|
|
|
29105
29307
|
export type HelixHeadlessTableSolidJsProps = {
|
|
@@ -29142,6 +29344,12 @@ and a list here would be a second way to say what that says. This table's
|
|
|
29142
29344
|
cells are markup, and a table written as rows of cells with no column
|
|
29143
29345
|
declared in it has nowhere else to be sized from. */
|
|
29144
29346
|
"prop:columns"?: (HelixHeadlessTable["columns"]) | undefined;
|
|
29347
|
+
/** The keys of the rows whose rows are shown at the start, separated by
|
|
29348
|
+
commas. Used until `expanded` is set. */
|
|
29349
|
+
"attr:default-expanded"?: (HelixHeadlessTable["defaultExpanded"]) | undefined;
|
|
29350
|
+
/** The keys of the rows whose rows are shown at the start, separated by
|
|
29351
|
+
commas. Used until `expanded` is set. */
|
|
29352
|
+
"prop:defaultExpanded"?: (HelixHeadlessTable["defaultExpanded"]) | undefined;
|
|
29145
29353
|
/** The keys selected at the start, separated by commas. Used until `selected`
|
|
29146
29354
|
is set. */
|
|
29147
29355
|
"attr:default-selected"?: (HelixHeadlessTable["defaultSelected"]) | undefined;
|
|
@@ -29176,6 +29384,18 @@ While it is set, a line after the rows shows it, or your own content in the
|
|
|
29176
29384
|
`error` slot, in place of the empty and loading lines, and the live region
|
|
29177
29385
|
says it. */
|
|
29178
29386
|
"prop:errorText"?: (HelixHeadlessTable["errorText"]) | undefined;
|
|
29387
|
+
/** The name of the heading over the disclosure buttons. */
|
|
29388
|
+
"attr:expand-column-label"?: (HelixHeadlessTable["expandColumnLabel"]) | undefined;
|
|
29389
|
+
/** The name of the heading over the disclosure buttons. */
|
|
29390
|
+
"prop:expandColumnLabel"?: (HelixHeadlessTable["expandColumnLabel"]) | undefined;
|
|
29391
|
+
/** The keys of the rows whose rows are shown, separated by commas, in a table
|
|
29392
|
+
whose rows nest. A press on a row's disclosure button asks first, and
|
|
29393
|
+
`default-expanded` seeds what this element then owns. */
|
|
29394
|
+
"prop:expanded"?: (HelixHeadlessTable["expanded"]) | undefined;
|
|
29395
|
+
/** The name of a row's disclosure button. `{row}` is the words of the row's first cell. */
|
|
29396
|
+
"attr:expand-row-label"?: (HelixHeadlessTable["expandRowLabel"]) | undefined;
|
|
29397
|
+
/** The name of a row's disclosure button. `{row}` is the words of the row's first cell. */
|
|
29398
|
+
"prop:expandRowLabel"?: (HelixHeadlessTable["expandRowLabel"]) | undefined;
|
|
29179
29399
|
/** The table's name where neither `label` nor an `aria-label` or
|
|
29180
29400
|
`aria-labelledby` on the host gives it one. */
|
|
29181
29401
|
"attr:fallback-label"?: (HelixHeadlessTable["fallbackLabel"]) | undefined;
|
|
@@ -29195,6 +29415,12 @@ cells, which is the one way a cell of your markup can take focus. */
|
|
|
29195
29415
|
An `aria-label` or `aria-labelledby` on the host names the table too, and
|
|
29196
29416
|
wins over this. */
|
|
29197
29417
|
"prop:label"?: (HelixHeadlessTable["label"]) | undefined;
|
|
29418
|
+
/** Sends `helix-load-more` once the end of the table comes within a screen
|
|
29419
|
+
of view, so you can add the next rows as a reader nears them. */
|
|
29420
|
+
"bool:load-more"?: (HelixHeadlessTable["loadMore"]) | undefined;
|
|
29421
|
+
/** Sends `helix-load-more` once the end of the table comes within a screen
|
|
29422
|
+
of view, so you can add the next rows as a reader nears them. */
|
|
29423
|
+
"prop:loadMore"?: (HelixHeadlessTable["loadMore"]) | undefined;
|
|
29198
29424
|
/** What screen readers hear each time a key moves a held row, in a
|
|
29199
29425
|
`reorderable` table. `{name}` is the row's words, `{position}` the place it
|
|
29200
29426
|
would go, counting from 1, and `{count}` the number of rows. */
|
|
@@ -29229,6 +29455,12 @@ table moves no row itself: you move your rows on `helix-reorder`. */
|
|
|
29229
29455
|
"attr:select-all-label"?: (HelixHeadlessTable["selectAllLabel"]) | undefined;
|
|
29230
29456
|
/** The name of the checkbox in the heading that selects every row. */
|
|
29231
29457
|
"prop:selectAllLabel"?: (HelixHeadlessTable["selectAllLabel"]) | undefined;
|
|
29458
|
+
/** The name of the heading over the checkboxes under
|
|
29459
|
+
`selection-mode="single"`, where it holds no checkbox of its own. */
|
|
29460
|
+
"attr:select-column-label"?: (HelixHeadlessTable["selectColumnLabel"]) | undefined;
|
|
29461
|
+
/** The name of the heading over the checkboxes under
|
|
29462
|
+
`selection-mode="single"`, where it holds no checkbox of its own. */
|
|
29463
|
+
"prop:selectColumnLabel"?: (HelixHeadlessTable["selectColumnLabel"]) | undefined;
|
|
29232
29464
|
/** The keys of the selected rows, separated by commas.
|
|
29233
29465
|
|
|
29234
29466
|
A reader's press fires `helix-select` first, and refusing it leaves the
|
|
@@ -29245,6 +29477,20 @@ rows are chosen, written in the locale, and a language that needs plural
|
|
|
29245
29477
|
forms writes them: `{count, plural, one {# wybrany} few {# wybrane} many
|
|
29246
29478
|
{# wybranych} other {# wybranego}}`. */
|
|
29247
29479
|
"prop:selectedLabel"?: (HelixHeadlessTable["selectedLabel"]) | undefined;
|
|
29480
|
+
/** What a press on a row, or in a `grid` table a key that moves to one, does
|
|
29481
|
+
to the rows already selected: `toggle`, the default, leaves them to the
|
|
29482
|
+
checkboxes, and `replace` selects the row alone. */
|
|
29483
|
+
"attr:selection-behavior"?: (HelixHeadlessTable["selectionBehavior"]) | undefined;
|
|
29484
|
+
/** What a press on a row, or in a `grid` table a key that moves to one, does
|
|
29485
|
+
to the rows already selected: `toggle`, the default, leaves them to the
|
|
29486
|
+
checkboxes, and `replace` selects the row alone. */
|
|
29487
|
+
"prop:selectionBehavior"?: (HelixHeadlessTable["selectionBehavior"]) | undefined;
|
|
29488
|
+
/** How many rows a `selectable` table selects: `multiple`, the default, or
|
|
29489
|
+
`single`, one at a time. */
|
|
29490
|
+
"attr:selection-mode"?: (HelixHeadlessTable["selectionMode"]) | undefined;
|
|
29491
|
+
/** How many rows a `selectable` table selects: `multiple`, the default, or
|
|
29492
|
+
`single`, one at a time. */
|
|
29493
|
+
"prop:selectionMode"?: (HelixHeadlessTable["selectionMode"]) | undefined;
|
|
29248
29494
|
/** The name of a row's checkbox. `{row}` is replaced with the words of the
|
|
29249
29495
|
row's first cell. */
|
|
29250
29496
|
"attr:select-row-label"?: (HelixHeadlessTable["selectRowLabel"]) | undefined;
|
|
@@ -29291,6 +29537,14 @@ say that without the component knowing what a row looks like. */
|
|
|
29291
29537
|
"on:helix-before-reorder"?: ((
|
|
29292
29538
|
e: HelixHeadlessTableHelixBeforeReorderElementEvent,
|
|
29293
29539
|
) => void) | undefined;
|
|
29540
|
+
/** Fired from a row when its disclosure button is pressed, with whether it would be open in `detail.checked`. Cancelable: cancel it to keep the row as it is. */
|
|
29541
|
+
"on:helix-before-toggle"?: ((
|
|
29542
|
+
e: HelixHeadlessTableHelixBeforeToggleElementEvent,
|
|
29543
|
+
) => void) | undefined;
|
|
29544
|
+
/** Fired, in a table with `load-more`, when the end of the table comes within a screen of view, once for each number of rows. */
|
|
29545
|
+
"on:helix-load-more"?: ((
|
|
29546
|
+
e: HelixHeadlessTableHelixLoadMoreElementEvent,
|
|
29547
|
+
) => void) | undefined;
|
|
29294
29548
|
/** 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. */
|
|
29295
29549
|
"on:helix-reorder"?: ((e: HelixHeadlessTableHelixReorderElementEvent) => void) | undefined;
|
|
29296
29550
|
/** The selection is about to change. The event carries every selected key, separated by commas. Cancelable: cancel it to keep the current selection. */
|
|
@@ -29303,6 +29557,8 @@ say that without the component knowing what a row looks like. */
|
|
|
29303
29557
|
"on:helix-sort"?: ((e: HelixHeadlessTableHelixSortElementEvent) => void) | undefined;
|
|
29304
29558
|
/** Fired after the sort order changes, with the new order. */
|
|
29305
29559
|
"on:helix-sorted"?: ((e: HelixHeadlessTableHelixSortedElementEvent) => void) | undefined;
|
|
29560
|
+
/** Fired from a row once the rows under it are shown or hidden, with whether it is open in `detail.checked`. */
|
|
29561
|
+
"on:helix-toggle"?: ((e: HelixHeadlessTableHelixToggleElementEvent) => void) | undefined;
|
|
29306
29562
|
|
|
29307
29563
|
/** Set the innerHTML of the element */
|
|
29308
29564
|
innerHTML?: (string) | undefined;
|
|
@@ -29321,6 +29577,10 @@ reached. */
|
|
|
29321
29577
|
/** The URL a press on the row follows, which makes the whole row a link.
|
|
29322
29578
|
Empty, the default, leaves presses to the row's cells. */
|
|
29323
29579
|
href?: (HelixHeadlessTableRow["href"]) | undefined;
|
|
29580
|
+
/** The key of the row this one sits under, in a table whose rows nest: that
|
|
29581
|
+
row's `value`, or its place among the rows where it has none. Empty, the
|
|
29582
|
+
default, is a row at the top. */
|
|
29583
|
+
parent?: (HelixHeadlessTableRow["parent"]) | undefined;
|
|
29324
29584
|
/** The `rel` of the row's link. You set it yourself, as on an anchor. */
|
|
29325
29585
|
rel?: (HelixHeadlessTableRow["rel"]) | undefined;
|
|
29326
29586
|
/** Where the row's link opens, such as `_blank`. */
|
|
@@ -29341,6 +29601,10 @@ reached. */
|
|
|
29341
29601
|
/** The URL a press on the row follows, which makes the whole row a link.
|
|
29342
29602
|
Empty, the default, leaves presses to the row's cells. */
|
|
29343
29603
|
"prop:href"?: (HelixHeadlessTableRow["href"]) | undefined;
|
|
29604
|
+
/** The key of the row this one sits under, in a table whose rows nest: that
|
|
29605
|
+
row's `value`, or its place among the rows where it has none. Empty, the
|
|
29606
|
+
default, is a row at the top. */
|
|
29607
|
+
"prop:parent"?: (HelixHeadlessTableRow["parent"]) | undefined;
|
|
29344
29608
|
/** The `rel` of the row's link. You set it yourself, as on an anchor. */
|
|
29345
29609
|
"prop:rel"?: (HelixHeadlessTableRow["rel"]) | undefined;
|
|
29346
29610
|
/** Where the row's link opens, such as `_blank`. */
|
|
@@ -31865,13 +32129,35 @@ Whatever `<time>` accepts, which is a date, a time, both, a duration or a
|
|
|
31865
32129
|
week. Unset, the label is written as it was given and nothing claims to
|
|
31866
32130
|
know what instant it names. */
|
|
31867
32131
|
datetime?: (HelixHeadlessTimelineItem["datetime"]) | undefined;
|
|
32132
|
+
/** Marks an event that has not happened yet, such as one that is scheduled.
|
|
32133
|
+
The mark is the open circle, and a screen reader hears `pending-label`. */
|
|
32134
|
+
pending?: (HelixHeadlessTimelineItem["pending"]) | undefined;
|
|
32135
|
+
/** What a screen reader hears for an entry that is `pending`. */
|
|
32136
|
+
"pending-label"?: (HelixHeadlessTimelineItem["pendingLabel"]) | undefined;
|
|
32137
|
+
/** What a screen reader hears for an entry that is `pending`. */
|
|
32138
|
+
pendingLabel?: (HelixHeadlessTimelineItem["pendingLabel"]) | undefined;
|
|
31868
32139
|
/** Writes the time as how long ago it was, or how long until it, from
|
|
31869
32140
|
`datetime`, where the `time` slot is empty: `long` ("3 hours ago"),
|
|
31870
32141
|
`short` ("3 hr. ago") or `narrow` ("3h ago"). Set with no value, it is
|
|
31871
32142
|
`long`. The words move on as they go stale. */
|
|
31872
32143
|
relative?: (HelixHeadlessTimelineItem["relative"]) | undefined;
|
|
31873
|
-
/** The kind of event. It sets the color of the mark and
|
|
32144
|
+
/** The kind of event. It sets the color of the mark, and a screen reader
|
|
32145
|
+
hears it as the word `tone-labels` gives it. */
|
|
31874
32146
|
tone?: (HelixHeadlessTimelineItem["tone"]) | undefined;
|
|
32147
|
+
/** What a screen reader is told this entry's tone is, such as "Failed".
|
|
32148
|
+
Absent is the tone's word in `tone-labels`. */
|
|
32149
|
+
"tone-label"?: (HelixHeadlessTimelineItem["toneLabel"]) | undefined;
|
|
32150
|
+
/** What a screen reader is told this entry's tone is, such as "Failed".
|
|
32151
|
+
Absent is the tone's word in `tone-labels`. */
|
|
32152
|
+
toneLabel?: (HelixHeadlessTimelineItem["toneLabel"]) | undefined;
|
|
32153
|
+
/** What a screen reader is told each tone is, by the tone's name, written as
|
|
32154
|
+
JSON in the attribute: `tone-labels='{"danger":"Failed"}'`. A tone with no
|
|
32155
|
+
word is not read, which is `neutral` and `primary` in English. */
|
|
32156
|
+
"tone-labels"?: (HelixHeadlessTimelineItem["toneLabels"]) | undefined;
|
|
32157
|
+
/** What a screen reader is told each tone is, by the tone's name, written as
|
|
32158
|
+
JSON in the attribute: `tone-labels='{"danger":"Failed"}'`. A tone with no
|
|
32159
|
+
word is not read, which is `neutral` and `primary` in English. */
|
|
32160
|
+
toneLabels?: (HelixHeadlessTimelineItem["toneLabels"]) | undefined;
|
|
31875
32161
|
};
|
|
31876
32162
|
|
|
31877
32163
|
export type HelixHeadlessTimelineItemSolidJsProps = {
|
|
@@ -31882,13 +32168,35 @@ Whatever `<time>` accepts, which is a date, a time, both, a duration or a
|
|
|
31882
32168
|
week. Unset, the label is written as it was given and nothing claims to
|
|
31883
32169
|
know what instant it names. */
|
|
31884
32170
|
"prop:datetime"?: (HelixHeadlessTimelineItem["datetime"]) | undefined;
|
|
32171
|
+
/** Marks an event that has not happened yet, such as one that is scheduled.
|
|
32172
|
+
The mark is the open circle, and a screen reader hears `pending-label`. */
|
|
32173
|
+
"prop:pending"?: (HelixHeadlessTimelineItem["pending"]) | undefined;
|
|
32174
|
+
/** What a screen reader hears for an entry that is `pending`. */
|
|
32175
|
+
"attr:pending-label"?: (HelixHeadlessTimelineItem["pendingLabel"]) | undefined;
|
|
32176
|
+
/** What a screen reader hears for an entry that is `pending`. */
|
|
32177
|
+
"prop:pendingLabel"?: (HelixHeadlessTimelineItem["pendingLabel"]) | undefined;
|
|
31885
32178
|
/** Writes the time as how long ago it was, or how long until it, from
|
|
31886
32179
|
`datetime`, where the `time` slot is empty: `long` ("3 hours ago"),
|
|
31887
32180
|
`short` ("3 hr. ago") or `narrow` ("3h ago"). Set with no value, it is
|
|
31888
32181
|
`long`. The words move on as they go stale. */
|
|
31889
32182
|
"prop:relative"?: (HelixHeadlessTimelineItem["relative"]) | undefined;
|
|
31890
|
-
/** The kind of event. It sets the color of the mark and
|
|
32183
|
+
/** The kind of event. It sets the color of the mark, and a screen reader
|
|
32184
|
+
hears it as the word `tone-labels` gives it. */
|
|
31891
32185
|
"prop:tone"?: (HelixHeadlessTimelineItem["tone"]) | undefined;
|
|
32186
|
+
/** What a screen reader is told this entry's tone is, such as "Failed".
|
|
32187
|
+
Absent is the tone's word in `tone-labels`. */
|
|
32188
|
+
"attr:tone-label"?: (HelixHeadlessTimelineItem["toneLabel"]) | undefined;
|
|
32189
|
+
/** What a screen reader is told this entry's tone is, such as "Failed".
|
|
32190
|
+
Absent is the tone's word in `tone-labels`. */
|
|
32191
|
+
"prop:toneLabel"?: (HelixHeadlessTimelineItem["toneLabel"]) | undefined;
|
|
32192
|
+
/** What a screen reader is told each tone is, by the tone's name, written as
|
|
32193
|
+
JSON in the attribute: `tone-labels='{"danger":"Failed"}'`. A tone with no
|
|
32194
|
+
word is not read, which is `neutral` and `primary` in English. */
|
|
32195
|
+
"attr:tone-labels"?: (HelixHeadlessTimelineItem["toneLabels"]) | undefined;
|
|
32196
|
+
/** What a screen reader is told each tone is, by the tone's name, written as
|
|
32197
|
+
JSON in the attribute: `tone-labels='{"danger":"Failed"}'`. A tone with no
|
|
32198
|
+
word is not read, which is `neutral` and `primary` in English. */
|
|
32199
|
+
"prop:toneLabels"?: (HelixHeadlessTimelineItem["toneLabels"]) | undefined;
|
|
31892
32200
|
|
|
31893
32201
|
/** Set the innerHTML of the element */
|
|
31894
32202
|
innerHTML?: (string) | undefined;
|
|
@@ -34130,6 +34438,13 @@ Written by the playlist rather than by the entry, the way an option's
|
|
|
34130
34438
|
selection is: an entry that made itself current would be a second answer to
|
|
34131
34439
|
which one is playing. */
|
|
34132
34440
|
current?: (HelixHeadlessVideoPlaylistItem["current"]) | undefined;
|
|
34441
|
+
/** Whether the entry holds the playlist's tab stop. Unset, every entry is in
|
|
34442
|
+
the tab order, which is what a server renders.
|
|
34443
|
+
|
|
34444
|
+
**Written by the playlist, with no attribute, and it reaches the button.**
|
|
34445
|
+
The playlist gives the stop to the entry a reader last focused, or to the
|
|
34446
|
+
current one, and the arrow keys reach the rest. */
|
|
34447
|
+
focusable?: (HelixHeadlessVideoPlaylistItem["focusable"]) | undefined;
|
|
34133
34448
|
|
|
34134
34449
|
/** The entry was chosen. Cancelable: cancel it to keep the current entry. */
|
|
34135
34450
|
"onhelix-select"?: ((
|
|
@@ -34158,6 +34473,13 @@ Written by the playlist rather than by the entry, the way an option's
|
|
|
34158
34473
|
selection is: an entry that made itself current would be a second answer to
|
|
34159
34474
|
which one is playing. */
|
|
34160
34475
|
"prop:current"?: (HelixHeadlessVideoPlaylistItem["current"]) | undefined;
|
|
34476
|
+
/** Whether the entry holds the playlist's tab stop. Unset, every entry is in
|
|
34477
|
+
the tab order, which is what a server renders.
|
|
34478
|
+
|
|
34479
|
+
**Written by the playlist, with no attribute, and it reaches the button.**
|
|
34480
|
+
The playlist gives the stop to the entry a reader last focused, or to the
|
|
34481
|
+
current one, and the arrow keys reach the rest. */
|
|
34482
|
+
"prop:focusable"?: (HelixHeadlessVideoPlaylistItem["focusable"]) | undefined;
|
|
34161
34483
|
/** The entry was chosen. Cancelable: cancel it to keep the current entry. */
|
|
34162
34484
|
"on:helix-select"?: ((
|
|
34163
34485
|
e: HelixHeadlessVideoPlaylistItemHelixSelectElementEvent,
|
|
@@ -34234,8 +34556,20 @@ export type HelixHeadlessVideoPlaylistHelixEndElementEvent =
|
|
|
34234
34556
|
HelixHeadlessVideoPlaylistElementEvent<HelixEndEvent>;
|
|
34235
34557
|
|
|
34236
34558
|
export type HelixHeadlessVideoPlaylistProps = {
|
|
34559
|
+
/** What the playlist says while it has no entries. The `empty` slot replaces it. */
|
|
34560
|
+
"empty-label"?: (HelixHeadlessVideoPlaylist["emptyLabel"]) | undefined;
|
|
34561
|
+
/** What the playlist says while it has no entries. The `empty` slot replaces it. */
|
|
34562
|
+
emptyLabel?: (HelixHeadlessVideoPlaylist["emptyLabel"]) | undefined;
|
|
34237
34563
|
/** The list's name, read by screen readers. */
|
|
34238
34564
|
label?: (HelixHeadlessVideoPlaylist["label"]) | undefined;
|
|
34565
|
+
/** Stays on an entry when its clip ends, where the playlist would otherwise
|
|
34566
|
+
play the next one. The player's controls, a press, and `next()` still
|
|
34567
|
+
move. `repeat="one"` still plays the entry again. */
|
|
34568
|
+
"no-advance"?: (HelixHeadlessVideoPlaylist["noAdvance"]) | undefined;
|
|
34569
|
+
/** Stays on an entry when its clip ends, where the playlist would otherwise
|
|
34570
|
+
play the next one. The player's controls, a press, and `next()` still
|
|
34571
|
+
move. `repeat="one"` still plays the entry again. */
|
|
34572
|
+
noAdvance?: (HelixHeadlessVideoPlaylist["noAdvance"]) | undefined;
|
|
34239
34573
|
/** What the live region says when the playlist moves to another entry.
|
|
34240
34574
|
`{title}` is the entry's name.
|
|
34241
34575
|
|
|
@@ -34284,7 +34618,7 @@ Ignored once `active` is written. */
|
|
|
34284
34618
|
"onhelix-activate"?: ((
|
|
34285
34619
|
e: HelixHeadlessVideoPlaylistHelixActivateElementEvent,
|
|
34286
34620
|
) => void) | undefined;
|
|
34287
|
-
/** The current entry is about to change. Cancelable: cancel it to keep the current entry. */
|
|
34621
|
+
/** The current entry is about to change, and `detail.cause` says why: `press`, `next`, `previous`, `ended`, or `removed`. Cancelable: cancel it to keep the current entry. */
|
|
34288
34622
|
"onhelix-before-activate"?: ((
|
|
34289
34623
|
e: HelixHeadlessVideoPlaylistHelixBeforeActivateElementEvent,
|
|
34290
34624
|
) => void) | undefined;
|
|
@@ -34293,8 +34627,20 @@ Ignored once `active` is written. */
|
|
|
34293
34627
|
};
|
|
34294
34628
|
|
|
34295
34629
|
export type HelixHeadlessVideoPlaylistSolidJsProps = {
|
|
34630
|
+
/** What the playlist says while it has no entries. The `empty` slot replaces it. */
|
|
34631
|
+
"attr:empty-label"?: (HelixHeadlessVideoPlaylist["emptyLabel"]) | undefined;
|
|
34632
|
+
/** What the playlist says while it has no entries. The `empty` slot replaces it. */
|
|
34633
|
+
"prop:emptyLabel"?: (HelixHeadlessVideoPlaylist["emptyLabel"]) | undefined;
|
|
34296
34634
|
/** The list's name, read by screen readers. */
|
|
34297
34635
|
"prop:label"?: (HelixHeadlessVideoPlaylist["label"]) | undefined;
|
|
34636
|
+
/** Stays on an entry when its clip ends, where the playlist would otherwise
|
|
34637
|
+
play the next one. The player's controls, a press, and `next()` still
|
|
34638
|
+
move. `repeat="one"` still plays the entry again. */
|
|
34639
|
+
"bool:no-advance"?: (HelixHeadlessVideoPlaylist["noAdvance"]) | undefined;
|
|
34640
|
+
/** Stays on an entry when its clip ends, where the playlist would otherwise
|
|
34641
|
+
play the next one. The player's controls, a press, and `next()` still
|
|
34642
|
+
move. `repeat="one"` still plays the entry again. */
|
|
34643
|
+
"prop:noAdvance"?: (HelixHeadlessVideoPlaylist["noAdvance"]) | undefined;
|
|
34298
34644
|
/** What the live region says when the playlist moves to another entry.
|
|
34299
34645
|
`{title}` is the entry's name.
|
|
34300
34646
|
|
|
@@ -34342,7 +34688,7 @@ Ignored once `active` is written. */
|
|
|
34342
34688
|
"on:helix-activate"?: ((
|
|
34343
34689
|
e: HelixHeadlessVideoPlaylistHelixActivateElementEvent,
|
|
34344
34690
|
) => void) | undefined;
|
|
34345
|
-
/** The current entry is about to change. Cancelable: cancel it to keep the current entry. */
|
|
34691
|
+
/** The current entry is about to change, and `detail.cause` says why: `press`, `next`, `previous`, `ended`, or `removed`. Cancelable: cancel it to keep the current entry. */
|
|
34346
34692
|
"on:helix-before-activate"?: ((
|
|
34347
34693
|
e: HelixHeadlessVideoPlaylistHelixBeforeActivateElementEvent,
|
|
34348
34694
|
) => void) | undefined;
|
|
@@ -35327,6 +35673,12 @@ export type HelixHeadlessVirtualListProps = {
|
|
|
35327
35673
|
items out as a grid of that many equal columns, windowed a line at a
|
|
35328
35674
|
time, with Left and Right moving along a line. */
|
|
35329
35675
|
columns?: (HelixHeadlessVirtualList["columns"]) | undefined;
|
|
35676
|
+
/** The keys of the items a reader cannot choose or move to, separated by
|
|
35677
|
+
commas, as `value` writes keys. Their rows carry `aria-disabled`. */
|
|
35678
|
+
"disabled-keys"?: (HelixHeadlessVirtualList["disabledKeys"]) | undefined;
|
|
35679
|
+
/** The keys of the items a reader cannot choose or move to, separated by
|
|
35680
|
+
commas, as `value` writes keys. Their rows carry `aria-disabled`. */
|
|
35681
|
+
disabledKeys?: (HelixHeadlessVirtualList["disabledKeys"]) | undefined;
|
|
35330
35682
|
/** The text of the row shown when there are no items and none are loading,
|
|
35331
35683
|
where the `empty` slot is empty. Empty, the default, shows no row. */
|
|
35332
35684
|
"empty-label"?: (HelixHeadlessVirtualList["emptyLabel"]) | undefined;
|
|
@@ -35341,6 +35693,11 @@ right whenever the rows really are one height and is the cheaper of the two. */
|
|
|
35341
35693
|
/** The id of the script element that holds the items as JSON. `items` wins
|
|
35342
35694
|
where both are set. */
|
|
35343
35695
|
for?: (HelixHeadlessVirtualList["for"]) | undefined;
|
|
35696
|
+
/** The space between two rows, and between two columns in a grid, in
|
|
35697
|
+
pixels. The list counts it in each row's place, so a gap does not walk
|
|
35698
|
+
the rows away from the scroll position the way a margin on each row
|
|
35699
|
+
would. */
|
|
35700
|
+
gap?: (HelixHeadlessVirtualList["gap"]) | undefined;
|
|
35344
35701
|
/** The field of each item that is its key in `value`, as a key or a path of
|
|
35345
35702
|
keys. Empty reads a string or a number item as its own key, and any
|
|
35346
35703
|
other item by its place in the set. */
|
|
@@ -35376,6 +35733,22 @@ disagree with itself; measuring is what a set of genuinely different
|
|
|
35376
35733
|
heights needs and costs a read of each row as it renders. A list of
|
|
35377
35734
|
one-line rows should leave this alone. */
|
|
35378
35735
|
measured?: (HelixHeadlessVirtualList["measured"]) | undefined;
|
|
35736
|
+
/** The narrowest a column of a grid may be, in pixels. Set, the list lays
|
|
35737
|
+
out as many columns as fit the box at that width, at least one, and
|
|
35738
|
+
follows the box as it resizes, which `columns` then does not decide. */
|
|
35739
|
+
"min-column-width"?: (HelixHeadlessVirtualList["minColumnWidth"] | `${number}`) | undefined;
|
|
35740
|
+
/** The narrowest a column of a grid may be, in pixels. Set, the list lays
|
|
35741
|
+
out as many columns as fit the box at that width, at least one, and
|
|
35742
|
+
follows the box as it resizes, which `columns` then does not decide. */
|
|
35743
|
+
minColumnWidth?: (HelixHeadlessVirtualList["minColumnWidth"]) | undefined;
|
|
35744
|
+
/** What a press does to the items already chosen: `toggle` adds or takes out
|
|
35745
|
+
the item, and `replace` selects it alone and lets the arrow keys carry the
|
|
35746
|
+
selection, with Control or Command adding or taking out one item. */
|
|
35747
|
+
"selection-behavior"?: (HelixHeadlessVirtualList["selectionBehavior"]) | undefined;
|
|
35748
|
+
/** What a press does to the items already chosen: `toggle` adds or takes out
|
|
35749
|
+
the item, and `replace` selects it alone and lets the arrow keys carry the
|
|
35750
|
+
selection, with Control or Command adding or taking out one item. */
|
|
35751
|
+
selectionBehavior?: (HelixHeadlessVirtualList["selectionBehavior"]) | undefined;
|
|
35379
35752
|
/** Makes the list a list box a reader chooses from: `single` selects one
|
|
35380
35753
|
item, and `multiple` any number. Unset is a list a reader reads. */
|
|
35381
35754
|
"selection-mode"?: (HelixHeadlessVirtualList["selectionMode"]) | undefined;
|
|
@@ -35432,6 +35805,12 @@ export type HelixHeadlessVirtualListSolidJsProps = {
|
|
|
35432
35805
|
items out as a grid of that many equal columns, windowed a line at a
|
|
35433
35806
|
time, with Left and Right moving along a line. */
|
|
35434
35807
|
"prop:columns"?: (HelixHeadlessVirtualList["columns"]) | undefined;
|
|
35808
|
+
/** The keys of the items a reader cannot choose or move to, separated by
|
|
35809
|
+
commas, as `value` writes keys. Their rows carry `aria-disabled`. */
|
|
35810
|
+
"attr:disabled-keys"?: (HelixHeadlessVirtualList["disabledKeys"]) | undefined;
|
|
35811
|
+
/** The keys of the items a reader cannot choose or move to, separated by
|
|
35812
|
+
commas, as `value` writes keys. Their rows carry `aria-disabled`. */
|
|
35813
|
+
"prop:disabledKeys"?: (HelixHeadlessVirtualList["disabledKeys"]) | undefined;
|
|
35435
35814
|
/** The text of the row shown when there are no items and none are loading,
|
|
35436
35815
|
where the `empty` slot is empty. Empty, the default, shows no row. */
|
|
35437
35816
|
"attr:empty-label"?: (HelixHeadlessVirtualList["emptyLabel"]) | undefined;
|
|
@@ -35446,6 +35825,11 @@ right whenever the rows really are one height and is the cheaper of the two. */
|
|
|
35446
35825
|
/** The id of the script element that holds the items as JSON. `items` wins
|
|
35447
35826
|
where both are set. */
|
|
35448
35827
|
"prop:for"?: (HelixHeadlessVirtualList["for"]) | undefined;
|
|
35828
|
+
/** The space between two rows, and between two columns in a grid, in
|
|
35829
|
+
pixels. The list counts it in each row's place, so a gap does not walk
|
|
35830
|
+
the rows away from the scroll position the way a margin on each row
|
|
35831
|
+
would. */
|
|
35832
|
+
"prop:gap"?: (HelixHeadlessVirtualList["gap"]) | undefined;
|
|
35449
35833
|
/** The field of each item that is its key in `value`, as a key or a path of
|
|
35450
35834
|
keys. Empty reads a string or a number item as its own key, and any
|
|
35451
35835
|
other item by its place in the set. */
|
|
@@ -35481,6 +35865,22 @@ disagree with itself; measuring is what a set of genuinely different
|
|
|
35481
35865
|
heights needs and costs a read of each row as it renders. A list of
|
|
35482
35866
|
one-line rows should leave this alone. */
|
|
35483
35867
|
"prop:measured"?: (HelixHeadlessVirtualList["measured"]) | undefined;
|
|
35868
|
+
/** The narrowest a column of a grid may be, in pixels. Set, the list lays
|
|
35869
|
+
out as many columns as fit the box at that width, at least one, and
|
|
35870
|
+
follows the box as it resizes, which `columns` then does not decide. */
|
|
35871
|
+
"attr:min-column-width"?: (HelixHeadlessVirtualList["minColumnWidth"] | `${number}`) | undefined;
|
|
35872
|
+
/** The narrowest a column of a grid may be, in pixels. Set, the list lays
|
|
35873
|
+
out as many columns as fit the box at that width, at least one, and
|
|
35874
|
+
follows the box as it resizes, which `columns` then does not decide. */
|
|
35875
|
+
"prop:minColumnWidth"?: (HelixHeadlessVirtualList["minColumnWidth"]) | undefined;
|
|
35876
|
+
/** What a press does to the items already chosen: `toggle` adds or takes out
|
|
35877
|
+
the item, and `replace` selects it alone and lets the arrow keys carry the
|
|
35878
|
+
selection, with Control or Command adding or taking out one item. */
|
|
35879
|
+
"attr:selection-behavior"?: (HelixHeadlessVirtualList["selectionBehavior"]) | undefined;
|
|
35880
|
+
/** What a press does to the items already chosen: `toggle` adds or takes out
|
|
35881
|
+
the item, and `replace` selects it alone and lets the arrow keys carry the
|
|
35882
|
+
selection, with Control or Command adding or taking out one item. */
|
|
35883
|
+
"prop:selectionBehavior"?: (HelixHeadlessVirtualList["selectionBehavior"]) | undefined;
|
|
35484
35884
|
/** Makes the list a list box a reader chooses from: `single` selects one
|
|
35485
35885
|
item, and `multiple` any number. Unset is a list a reader reads. */
|
|
35486
35886
|
"attr:selection-mode"?: (HelixHeadlessVirtualList["selectionMode"]) | undefined;
|
|
@@ -38317,6 +38717,16 @@ export type CustomElements = {
|
|
|
38317
38717
|
* - What a key changes that a reader cannot see is said: where a card moved
|
|
38318
38718
|
* to, its new size, how many cards are selected, and the zoom. A selected
|
|
38319
38719
|
* card or connection says so when a reader arrives on it.
|
|
38720
|
+
* - Control or Command with C copies the selected cards, and the connections
|
|
38721
|
+
* between them, as a JSON Canvas document in text, which another board or
|
|
38722
|
+
* an app that reads the format takes. A paste is your page's: listen for
|
|
38723
|
+
* `paste` on the board, read the text with `fromJsonCanvas`, and add the
|
|
38724
|
+
* cards it holds.
|
|
38725
|
+
* - Control or Command with Z undoes the last move or resize the board made,
|
|
38726
|
+
* and with Shift, or Control with Y, makes it again. `undo()` and `redo()`
|
|
38727
|
+
* do the same from a script. Each asks with `helix-before-move` and tells
|
|
38728
|
+
* with `helix-move`, as a move does, so a board that holds its positions in
|
|
38729
|
+
* your state is undone through your state.
|
|
38320
38730
|
*
|
|
38321
38731
|
* Every drag also works with clicks, as WCAG 2.5.7 requires for a pointer that
|
|
38322
38732
|
* cannot hold a button down. Click a selected card's move handle, a corner, a
|
|
@@ -38367,6 +38777,7 @@ export type CustomElements = {
|
|
|
38367
38777
|
* this, so a reader hears the ends first and what the line says after.
|
|
38368
38778
|
* - `controls-label`/`controlsLabel`: The name of the group of controls, read by screen readers, which names
|
|
38369
38779
|
* what the controls drive rather than the mechanism.
|
|
38780
|
+
* - `copied-label`/`copiedLabel`: What screen readers hear after a copy, with `{count}` for the cards copied.
|
|
38370
38781
|
* - `fallback-label`/`fallbackLabel`: The board's name where `label` is empty.
|
|
38371
38782
|
* - `label`: The accessible name for the board. Required.
|
|
38372
38783
|
*
|
|
@@ -38412,6 +38823,7 @@ export type CustomElements = {
|
|
|
38412
38823
|
* walk the cards.
|
|
38413
38824
|
* - `reconnecting-label`/`reconnectingLabel`: The text announced when a connection's end is picked up, with `{from}` and
|
|
38414
38825
|
* `{to}`.
|
|
38826
|
+
* - `redone-label`/`redoneLabel`: What screen readers hear after a move or a resize is made again.
|
|
38415
38827
|
* - `resized-label`/`resizedLabel`: What screen readers hear after a key resizes a card, with `{name}` for the
|
|
38416
38828
|
* card and `{width}` and `{height}` for its new size, in the document's
|
|
38417
38829
|
* units.
|
|
@@ -38469,6 +38881,7 @@ export type CustomElements = {
|
|
|
38469
38881
|
* see the board is told by the color; this is how a reader who cannot is
|
|
38470
38882
|
* told the same. A tone left out is not read.
|
|
38471
38883
|
* - `two-finger-hint-label`/`twoFingerHintLabel`: The hint shown when one finger swipes over the board with `gestures="cooperative"`.
|
|
38884
|
+
* - `undone-label`/`undoneLabel`: What screen readers hear after a move or a resize is undone.
|
|
38472
38885
|
* - `using-label`/`usingLabel`: The line shown while the board, with `gestures="activate"`, has the gestures.
|
|
38473
38886
|
* - `wheel-hint-label`/`wheelHintLabel`: The hint shown when the wheel scrolls past the board with
|
|
38474
38887
|
* `gestures="cooperative"`. `{key}` is ⌘ on a Mac and Ctrl elsewhere.
|
|
@@ -38641,6 +39054,11 @@ export type CustomElements = {
|
|
|
38641
39054
|
*
|
|
38642
39055
|
* What a reader landing on a card off the edge of the view gets, and what a
|
|
38643
39056
|
* page's own search or outline can call to take a reader to one.
|
|
39057
|
+
* - `undo() => boolean`: Puts the cards of the last move or resize back where they stood, asking
|
|
39058
|
+
* with `helix-before-move` first. Returns whether anything moved: false
|
|
39059
|
+
* with nothing to undo, or when the request was refused.
|
|
39060
|
+
* - `redo() => boolean`: Makes the last move or resize `undo` took back again, asking with
|
|
39061
|
+
* `helix-before-move` first. Returns whether anything moved.
|
|
38644
39062
|
* - `toJsonCanvas() => CanvasDocument`: The board as a JSON Canvas document, for saving it.
|
|
38645
39063
|
*
|
|
38646
39064
|
* What each card holds is the consumer's DOM, so a card comes back as a card
|
|
@@ -39471,6 +39889,19 @@ export type CustomElements = {
|
|
|
39471
39889
|
* "Ada is typing" (`typing-label`), which a screen reader hears, and clearing
|
|
39472
39890
|
* it takes them away. Anything slotted into `status` is drawn first.
|
|
39473
39891
|
*
|
|
39892
|
+
* **Keyboard.** The transcript moves between turns the way a feed does. Each
|
|
39893
|
+
* turn says its place, such as "3 of 40", windowed or not.
|
|
39894
|
+
*
|
|
39895
|
+
* | Key | What it does |
|
|
39896
|
+
* |---|---|
|
|
39897
|
+
* | Page Down, Page Up | On a turn or inside one, moves focus to the next or the previous turn. On the transcript itself, moves focus to the turn at the top of the view. |
|
|
39898
|
+
* | Control with End | Moves focus to the composer. |
|
|
39899
|
+
* | Control with Home | Moves focus to the first control above the transcript, or to the transcript. |
|
|
39900
|
+
*
|
|
39901
|
+
* While you are scrolled away from the newest turn, the `resume` region shows
|
|
39902
|
+
* a button that takes you back, named by `resume-label`, "Jump to latest".
|
|
39903
|
+
* Slot your own control into `resume` to replace it.
|
|
39904
|
+
*
|
|
39474
39905
|
* A screen reader names each turn by its author and its time, such as "You, 2
|
|
39475
39906
|
* minutes ago". Set `me-label` and `message-label` to say it in your language,
|
|
39476
39907
|
* and give each turn by `them` an `author-label`. A turn with neither an author
|
|
@@ -39541,6 +39972,7 @@ export type CustomElements = {
|
|
|
39541
39972
|
* is the way back, and that is a part inside the shadow tree where a
|
|
39542
39973
|
* stylesheet can already reach it. Measured rather than assumed: `label,
|
|
39543
39974
|
* pinned` after upgrade against `label` from the server.
|
|
39975
|
+
* - `resume-label`/`resumeLabel`: The words on the button that returns to the newest turn, where `resume` is empty.
|
|
39544
39976
|
* - `threshold`: How near the bottom still counts as being at it, in pixels.
|
|
39545
39977
|
*
|
|
39546
39978
|
* A hook rather than a constant, because the right number depends on how tall
|
|
@@ -39610,7 +40042,7 @@ export type CustomElements = {
|
|
|
39610
40042
|
* - `actions`: Controls for the whole conversation, beside the header.
|
|
39611
40043
|
* - `composer`: The composer, below the transcript.
|
|
39612
40044
|
* - `header`: Content above the transcript that names the conversation.
|
|
39613
|
-
* - `resume`: The control that returns to the bottom, shown while the user has scrolled away.
|
|
40045
|
+
* - `resume`: The control that returns to the bottom, shown while the user has scrolled away. Defaults to a button named by `resume-label`.
|
|
39614
40046
|
* - `status`: Status beside the composer, such as someone typing or a lost connection.
|
|
39615
40047
|
*
|
|
39616
40048
|
* ## Methods
|
|
@@ -39659,6 +40091,8 @@ export type CustomElements = {
|
|
|
39659
40091
|
* - `message-state`: The state text of a turn from `turns`, when there is one to show.
|
|
39660
40092
|
* - `message-time`: The time of a turn from `turns`.
|
|
39661
40093
|
* - `resume`: The control shown while the user is scrolled away from the bottom.
|
|
40094
|
+
* - `resume-button`: The button the `resume` region shows when nothing is slotted into it.
|
|
40095
|
+
* - `resume-mark`: The arrow on the default `resume-button`.
|
|
39662
40096
|
* - `status`: The status region, outside the log.
|
|
39663
40097
|
* - `turn`: The wrapper around the message drawn for one turn from `turns`.
|
|
39664
40098
|
* - `typing`: The words that say who is typing, in the status band, while `typing` names someone.
|
|
@@ -40168,7 +40602,18 @@ export type CustomElements = {
|
|
|
40168
40602
|
* For a fragment of code inside a sentence, use `Code`.
|
|
40169
40603
|
*
|
|
40170
40604
|
* Set `line-numbers` to number the lines in a gutter beside the code, hidden
|
|
40171
|
-
* from the accessibility tree and left out of a copy. Set `
|
|
40605
|
+
* from the accessibility tree and left out of a copy. Set `mark-lines` to
|
|
40606
|
+
* mark lines a reader should look at, such as `2, 4-6`: the block draws a
|
|
40607
|
+
* band behind each run, placed where the lines are laid out, so it follows a
|
|
40608
|
+
* highlighter's markup and lines that wrap. Set `wrap` to wrap long lines
|
|
40609
|
+
* rather than scroll them; a gutter then numbers each line where it starts.
|
|
40610
|
+
* Set `wrappable` for a button in the header that turns `wrap` on and off,
|
|
40611
|
+
* pressed while the lines wrap.
|
|
40612
|
+
*
|
|
40613
|
+
* The header holds the name, the `actions` slot, and the copy button. Slot a
|
|
40614
|
+
* control into `actions`, such as a button that sets `wrap` or one that opens
|
|
40615
|
+
* the code in an editor, and the block draws a header for it even with no
|
|
40616
|
+
* name. `copy-icon` and `copied-icon` replace the copy button's two icons. Set `highlight` to a
|
|
40172
40617
|
* function that turns the code into highlighted markup, such as one wrapping
|
|
40173
40618
|
* Shiki or Prism, and the block draws what it returns; it is handed the
|
|
40174
40619
|
* block's `language`, so one function serves every block. The code stays in
|
|
@@ -40255,6 +40700,9 @@ export type CustomElements = {
|
|
|
40255
40700
|
* copy, which takes the code alone. Reflected, because the stylesheet lays
|
|
40256
40701
|
* the gutter out beside the code. A diff numbers its lines from its hunks
|
|
40257
40702
|
* whether or not this is set.
|
|
40703
|
+
* - `mark-lines`/`markLines`: The lines to mark, as numbers and ranges counted from 1, such as `2, 4-6`.
|
|
40704
|
+
* Each run is drawn as a band behind its lines. Not for a diff, which marks
|
|
40705
|
+
* its own changes.
|
|
40258
40706
|
* - `no-copy`/`noCopy`: Whether to leave the copy button off.
|
|
40259
40707
|
*
|
|
40260
40708
|
* Negative, which is not a style choice. A boolean attribute is true whenever
|
|
@@ -40279,6 +40727,17 @@ export type CustomElements = {
|
|
|
40279
40727
|
* Absent is unified, each removal above its replacement, which fits any
|
|
40280
40728
|
* width. `split` sets the old version beside the new one. Optional rather
|
|
40281
40729
|
* than defaulted, so the host carries no attribute the consumer did not write.
|
|
40730
|
+
* - `wrap`: Whether long lines wrap. Without it they scroll.
|
|
40731
|
+
*
|
|
40732
|
+
* Off by default, so long lines scroll, because a line break can be
|
|
40733
|
+
* significant in code and a wrapped line reads as two. For prose-like code,
|
|
40734
|
+
* such as a long command or a log line, a wrap reads better than a scroll.
|
|
40735
|
+
* With `line-numbers`, each number stands beside the line it numbers
|
|
40736
|
+
* however many rows that line takes. Reflected, because the stylesheet
|
|
40737
|
+
* wraps the lines.
|
|
40738
|
+
* - `wrap-label`/`wrapLabel`: The wrap button's name, which it keeps whether it is pressed or not.
|
|
40739
|
+
* - `wrappable`: Whether the header has a button that wraps the lines and unwraps them. The
|
|
40740
|
+
* block draws a header for it even with no name.
|
|
40282
40741
|
* - `highlight`: Turns the code into highlighted markup, which the block draws in place of
|
|
40283
40742
|
* the plain text.
|
|
40284
40743
|
*
|
|
@@ -40321,16 +40780,36 @@ export type CustomElements = {
|
|
|
40321
40780
|
* browser harness's awaits it alone: a browser always runs the frame, and a
|
|
40322
40781
|
* timer beside it was a bet on how long one takes, which a busy run lost. (property only) (readonly)
|
|
40323
40782
|
*
|
|
40783
|
+
* ## Events
|
|
40784
|
+
*
|
|
40785
|
+
* Events that will be emitted by the component.
|
|
40786
|
+
*
|
|
40787
|
+
* - `helix-before-toggle`: The wrap button was pressed, with the `wrap` it asks for in `detail.checked`. Cancelable: cancel it to keep the lines as they are.
|
|
40788
|
+
* - `helix-toggle`: Fired after the wrap button changed `wrap`, with the new value in `detail.checked`.
|
|
40789
|
+
*
|
|
40324
40790
|
* ## Slots
|
|
40325
40791
|
*
|
|
40326
40792
|
* Areas where markup can be added to the component.
|
|
40327
40793
|
*
|
|
40328
40794
|
* - `(default)`: The code.
|
|
40795
|
+
* - `actions`: Controls for the block, in the header before the copy button.
|
|
40796
|
+
* - `copied-icon`: The copy button's icon after a copy. Defaults to a check mark.
|
|
40797
|
+
* - `copy-icon`: The copy button's icon before a copy. Defaults to a clipboard.
|
|
40798
|
+
*
|
|
40799
|
+
* ## CSS Custom Properties
|
|
40800
|
+
*
|
|
40801
|
+
* CSS variables available for styling the component.
|
|
40802
|
+
*
|
|
40803
|
+
* - `--code-block-line-size`: Written by the block on each `number` in a `wrap` block with `line-numbers`: how tall the line it numbers is laid out. Do not set it.
|
|
40804
|
+
* - `--code-block-mark-inline-size`: Written by the block on each `mark`: how wide the code is, scrolled part included. Do not set it.
|
|
40805
|
+
* - `--code-block-mark-size`: Written by the block on each `mark`: how tall its run of lines is. Do not set it.
|
|
40806
|
+
* - `--code-block-mark-start`: Written by the block on each `mark`: how far down the code its run of lines starts. Do not set it.
|
|
40329
40807
|
*
|
|
40330
40808
|
* ## CSS Parts
|
|
40331
40809
|
*
|
|
40332
40810
|
* Custom selectors for styling elements within the component.
|
|
40333
40811
|
*
|
|
40812
|
+
* - `actions`: The box in the header that holds the `actions` slot, drawn while something is slotted there.
|
|
40334
40813
|
* - `added`: In a diff, a line only the new version has, an `<ins>`.
|
|
40335
40814
|
* - `block`: The scrolling `<pre>`.
|
|
40336
40815
|
* - `code`: The `<code>` inside it.
|
|
@@ -40359,13 +40838,15 @@ export type CustomElements = {
|
|
|
40359
40838
|
* - `header`: The bar that holds the name and the copy button, shown when there is a name.
|
|
40360
40839
|
* - `hunk`: In a diff, a `@@` line saying where the lines under it are.
|
|
40361
40840
|
* - `label`: The block's name: its `label`, or its `language` where it has no label.
|
|
40841
|
+
* - `mark`: The band behind a run of lines `mark-lines` names. The block writes where the run is laid out into `--code-block-mark-start`, `--code-block-mark-size`, and `--code-block-mark-inline-size` on it. Hidden from the accessibility tree.
|
|
40362
40842
|
* - `marker`: In a diff, the `+`, `-`, or space that starts a line.
|
|
40363
40843
|
* - `new`: In a split diff, the new version's `<pre>`.
|
|
40364
|
-
* - `number`: In a diff, a line number.
|
|
40844
|
+
* - `number`: In a diff, a line number. In a `wrap` block with `line-numbers`, one line's number in the gutter, which the block makes as tall as the line it numbers through `--code-block-line-size`.
|
|
40365
40845
|
* - `old`: In a split diff, the old version's `<pre>`.
|
|
40366
40846
|
* - `removed`: In a diff, a line only the old version has, a `<del>`.
|
|
40367
40847
|
* - `split`: In a split diff, the two versions side by side.
|
|
40368
40848
|
* - `text`: In a diff, a line's code.
|
|
40849
|
+
* - `wrap-toggle`: The button in the header that wraps the lines and unwraps them, drawn when `wrappable` is set.
|
|
40369
40850
|
*
|
|
40370
40851
|
* ## CSS States
|
|
40371
40852
|
*
|
|
@@ -46495,14 +46976,15 @@ export type CustomElements = {
|
|
|
46495
46976
|
* - `pan(to: ViewportWay) => void`: Pans the view one step in a direction.
|
|
46496
46977
|
* - `zoom(by: number) => void`: Zooms the view one step: `1` zooms in and `-1` zooms out.
|
|
46497
46978
|
* - `toggleFullscreen() => void`: Turns fullscreen on or off.
|
|
46498
|
-
* - `requestActive(next: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
46979
|
+
* - `requestActive(next: string, cause?: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
46499
46980
|
*
|
|
46500
46981
|
* Announces before it acts, so `preventDefault()` on the `helix-before-activate` is
|
|
46501
46982
|
* a refusal and nothing moves. Unlike a native control, nothing has moved
|
|
46502
46983
|
* by the time this runs, so refusing is simply not writing: there is
|
|
46503
46984
|
* nothing to put back. Nobody refusing means the set updates itself,
|
|
46504
46985
|
* whether or not a consumer declared `active`, a declared property being a
|
|
46505
|
-
* seed and a correction.
|
|
46986
|
+
* seed and a correction. `cause` says why, where the family names its
|
|
46987
|
+
* causes, and reaches the event as `detail.cause`.
|
|
46506
46988
|
*
|
|
46507
46989
|
* ## CSS Parts
|
|
46508
46990
|
*
|
|
@@ -48338,14 +48820,15 @@ export type CustomElements = {
|
|
|
48338
48820
|
* - `previous() => void`: Shows the previous item. Before the first item, it shows the last when
|
|
48339
48821
|
* `loop` is set.
|
|
48340
48822
|
* - `toggleFullscreen() => void`: Makes the viewer fill the screen, or exits fullscreen.
|
|
48341
|
-
* - `requestActive(next: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
48823
|
+
* - `requestActive(next: string, cause?: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
48342
48824
|
*
|
|
48343
48825
|
* Announces before it acts, so `preventDefault()` on the `helix-before-activate` is
|
|
48344
48826
|
* a refusal and nothing moves. Unlike a native control, nothing has moved
|
|
48345
48827
|
* by the time this runs, so refusing is simply not writing: there is
|
|
48346
48828
|
* nothing to put back. Nobody refusing means the set updates itself,
|
|
48347
48829
|
* whether or not a consumer declared `active`, a declared property being a
|
|
48348
|
-
* seed and a correction.
|
|
48830
|
+
* seed and a correction. `cause` says why, where the family names its
|
|
48831
|
+
* causes, and reaches the event as `detail.cause`.
|
|
48349
48832
|
* - `requestOpen(next: boolean) => boolean`: Requests that the element open or close, and returns whether the change
|
|
48350
48833
|
* was applied.
|
|
48351
48834
|
*
|
|
@@ -57310,6 +57793,13 @@ export type CustomElements = {
|
|
|
57310
57793
|
* only whoever put it there knows that, which is the same reason `min` is a
|
|
57311
57794
|
* consumer's to set.
|
|
57312
57795
|
* - `corner-label`/`cornerLabel`: The name of the handle where two dividers cross, read by screen readers.
|
|
57796
|
+
* - `corner-value-label`/`cornerValueLabel`: What the handle where two dividers cross says it is set to, both dividers
|
|
57797
|
+
* at once: `{across}` is where the divider that runs down stands, and
|
|
57798
|
+
* `{down}` where the one that runs across stands, each a percentage.
|
|
57799
|
+
*
|
|
57800
|
+
* **Both, because the handle moves both**, and a number names one: the
|
|
57801
|
+
* handle's `aria-valuenow` is the divider its `aria-orientation` names, and
|
|
57802
|
+
* these words are the whole of where it is.
|
|
57313
57803
|
* - `default-collapsed`/`defaultCollapsed`: Which pane starts shut, when `collapsed` is not set.
|
|
57314
57804
|
* - `default-position`/`defaultPosition`: Where the divider starts, when `position` is not set.
|
|
57315
57805
|
* - `label`: The divider's name, read by screen readers.
|
|
@@ -57796,14 +58286,15 @@ export type CustomElements = {
|
|
|
57796
58286
|
* and the invalid mark from every stage, as Ark UI's `resetStep` does.
|
|
57797
58287
|
* Returns whether it moved: a listener can refuse the move with
|
|
57798
58288
|
* `helix-before-activate`, and the stages then keep their marks.
|
|
57799
|
-
* - `requestActive(next: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
58289
|
+
* - `requestActive(next: string, cause?: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
57800
58290
|
*
|
|
57801
58291
|
* Announces before it acts, so `preventDefault()` on the `helix-before-activate` is
|
|
57802
58292
|
* a refusal and nothing moves. Unlike a native control, nothing has moved
|
|
57803
58293
|
* by the time this runs, so refusing is simply not writing: there is
|
|
57804
58294
|
* nothing to put back. Nobody refusing means the set updates itself,
|
|
57805
58295
|
* whether or not a consumer declared `active`, a declared property being a
|
|
57806
|
-
* seed and a correction.
|
|
58296
|
+
* seed and a correction. `cause` says why, where the family names its
|
|
58297
|
+
* causes, and reaches the event as `detail.cause`.
|
|
57807
58298
|
*
|
|
57808
58299
|
* ## CSS Custom Properties
|
|
57809
58300
|
*
|
|
@@ -58534,6 +59025,27 @@ export type CustomElements = {
|
|
|
58534
59025
|
* Tab reaches each checkbox, and Space ticks it. To act on one row, put a
|
|
58535
59026
|
* link or a button in a cell, or give the row an `href`.
|
|
58536
59027
|
*
|
|
59028
|
+
* `selection-mode="single"` selects one row at a time: ticking a row lets go
|
|
59029
|
+
* of the one before, the heading holds no checkbox, and Shift and Control with
|
|
59030
|
+
* A take in nothing more. `selection-behavior="replace"` makes a press on a
|
|
59031
|
+
* row, anywhere but its own controls, select it alone, as a file list does,
|
|
59032
|
+
* and in a `grid` table the arrow keys carry the selection with them. Control
|
|
59033
|
+
* or Command with a press adds or takes out the row, and with an arrow moves
|
|
59034
|
+
* without selecting. Shift with a press takes in the rows from the one last
|
|
59035
|
+
* chosen.
|
|
59036
|
+
*
|
|
59037
|
+
* **Nesting rows.** A row with `parent` sits under the row of that key, as
|
|
59038
|
+
* a file sits in a folder. The table then draws a column of disclosure
|
|
59039
|
+
* buttons, under a heading named by `expand-column-label`: a row with rows
|
|
59040
|
+
* under it has a button named by `expand-row-label` ("Expand {row}") that
|
|
59041
|
+
* says with `aria-expanded` whether it is open, and the rows under a shut row
|
|
59042
|
+
* are not drawn. `expanded` holds the open rows' keys, comma separated, and
|
|
59043
|
+
* `default-expanded` is where it starts. A press asks with
|
|
59044
|
+
* `helix-before-toggle` and tells with `helix-toggle`, both from the row, so
|
|
59045
|
+
* you can refuse it or load the rows on the way. A sort orders the rows
|
|
59046
|
+
* under each row among themselves, and in a `grid` table the table is a
|
|
59047
|
+
* `treegrid` whose rows say their depth.
|
|
59048
|
+
*
|
|
58537
59049
|
* **Moving rows.** `reorderable` adds a column of grips before the checkboxes,
|
|
58538
59050
|
* under a heading named by `row-grips-label`.
|
|
58539
59051
|
*
|
|
@@ -58570,13 +59082,20 @@ export type CustomElements = {
|
|
|
58570
59082
|
* | Enter on a cell of a row with `href` | Follows the row's link. |
|
|
58571
59083
|
* | Enter, Space on a sortable heading | Sorts by the column. |
|
|
58572
59084
|
* | Space on a row, Enter or Space on its checkbox cell | Selects the row, in a `selectable` table. |
|
|
59085
|
+
* | Enter or Space on a disclosure cell | Shows or hides the rows under the row, in a table whose rows nest. |
|
|
58573
59086
|
* | 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. |
|
|
59087
|
+
* | 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. |
|
|
58574
59088
|
* | Shift with Down or Up | Selects the rows it moves across, in a `selectable` table. |
|
|
58575
59089
|
* | Shift with Space | Selects every row from the one last chosen, in a `selectable` table. |
|
|
58576
59090
|
* | Control or Command with A | Selects every row, in a `selectable` table. |
|
|
58577
59091
|
* | A letter or a word | Moves to the next row whose first cell starts with what you typed. |
|
|
58578
59092
|
* | Tab | Leaves the table. |
|
|
58579
59093
|
*
|
|
59094
|
+
* **Loading more.** `load-more` sends `helix-load-more` once the end of the
|
|
59095
|
+
* table comes within a screen of view, in the box that scrolls it or the
|
|
59096
|
+
* page, once for each number of rows: add rows and it can send it again. Set
|
|
59097
|
+
* `loading` while you fetch, and the table asks for nothing until it clears.
|
|
59098
|
+
*
|
|
58580
59099
|
* When the rows did not load, set `error-text`, such as "The orders did not
|
|
58581
59100
|
* load", and put a button that tries again in the `error` slot. The line shows
|
|
58582
59101
|
* after the rows in place of the empty and loading lines, the live region says
|
|
@@ -58622,6 +59141,8 @@ export type CustomElements = {
|
|
|
58622
59141
|
* and a list here would be a second way to say what that says. This table's
|
|
58623
59142
|
* cells are markup, and a table written as rows of cells with no column
|
|
58624
59143
|
* declared in it has nowhere else to be sized from.
|
|
59144
|
+
* - `default-expanded`/`defaultExpanded`: The keys of the rows whose rows are shown at the start, separated by
|
|
59145
|
+
* commas. Used until `expanded` is set.
|
|
58625
59146
|
* - `default-selected`/`defaultSelected`: The keys selected at the start, separated by commas. Used until `selected`
|
|
58626
59147
|
* is set.
|
|
58627
59148
|
* - `default-sort`/`defaultSort`: The starting sort order, used until `sort` is set.
|
|
@@ -58634,6 +59155,11 @@ export type CustomElements = {
|
|
|
58634
59155
|
* While it is set, a line after the rows shows it, or your own content in the
|
|
58635
59156
|
* `error` slot, in place of the empty and loading lines, and the live region
|
|
58636
59157
|
* says it.
|
|
59158
|
+
* - `expand-column-label`/`expandColumnLabel`: The name of the heading over the disclosure buttons.
|
|
59159
|
+
* - `expanded`: The keys of the rows whose rows are shown, separated by commas, in a table
|
|
59160
|
+
* whose rows nest. A press on a row's disclosure button asks first, and
|
|
59161
|
+
* `default-expanded` seeds what this element then owns.
|
|
59162
|
+
* - `expand-row-label`/`expandRowLabel`: The name of a row's disclosure button. `{row}` is the words of the row's first cell.
|
|
58637
59163
|
* - `fallback-label`/`fallbackLabel`: The table's name where neither `label` nor an `aria-label` or
|
|
58638
59164
|
* `aria-labelledby` on the host gives it one.
|
|
58639
59165
|
* - `grid`: Makes the table a grid: one tab stop, and the arrow keys, Home, End and the
|
|
@@ -58647,6 +59173,8 @@ export type CustomElements = {
|
|
|
58647
59173
|
*
|
|
58648
59174
|
* An `aria-label` or `aria-labelledby` on the host names the table too, and
|
|
58649
59175
|
* wins over this.
|
|
59176
|
+
* - `load-more`/`loadMore`: Sends `helix-load-more` once the end of the table comes within a screen
|
|
59177
|
+
* of view, so you can add the next rows as a reader nears them.
|
|
58650
59178
|
* - `moved-label`/`movedLabel`: What screen readers hear each time a key moves a held row, in a
|
|
58651
59179
|
* `reorderable` table. `{name}` is the row's words, `{position}` the place it
|
|
58652
59180
|
* would go, counting from 1, and `{count}` the number of rows.
|
|
@@ -58660,6 +59188,8 @@ export type CustomElements = {
|
|
|
58660
59188
|
* - `selectable`: Adds a column of checkboxes for selecting rows. Each row is known by its
|
|
58661
59189
|
* `value`, and by its place among the rows as written where it has none.
|
|
58662
59190
|
* - `select-all-label`/`selectAllLabel`: The name of the checkbox in the heading that selects every row.
|
|
59191
|
+
* - `select-column-label`/`selectColumnLabel`: The name of the heading over the checkboxes under
|
|
59192
|
+
* `selection-mode="single"`, where it holds no checkbox of its own.
|
|
58663
59193
|
* - `selected`: The keys of the selected rows, separated by commas.
|
|
58664
59194
|
*
|
|
58665
59195
|
* A reader's press fires `helix-select` first, and refusing it leaves the
|
|
@@ -58669,6 +59199,11 @@ export type CustomElements = {
|
|
|
58669
59199
|
* rows are chosen, written in the locale, and a language that needs plural
|
|
58670
59200
|
* forms writes them: `{count, plural, one {# wybrany} few {# wybrane} many
|
|
58671
59201
|
* {# wybranych} other {# wybranego}}`.
|
|
59202
|
+
* - `selection-behavior`/`selectionBehavior`: What a press on a row, or in a `grid` table a key that moves to one, does
|
|
59203
|
+
* to the rows already selected: `toggle`, the default, leaves them to the
|
|
59204
|
+
* checkboxes, and `replace` selects the row alone.
|
|
59205
|
+
* - `selection-mode`/`selectionMode`: How many rows a `selectable` table selects: `multiple`, the default, or
|
|
59206
|
+
* `single`, one at a time.
|
|
58672
59207
|
* - `select-row-label`/`selectRowLabel`: The name of a row's checkbox. `{row}` is replaced with the words of the
|
|
58673
59208
|
* row's first cell.
|
|
58674
59209
|
* - `sort`: The sort order, as `field:direction`, where `field` is a sortable column's
|
|
@@ -58717,11 +59252,14 @@ export type CustomElements = {
|
|
|
58717
59252
|
* Events that will be emitted by the component.
|
|
58718
59253
|
*
|
|
58719
59254
|
* - `helix-before-reorder`: Fired when a row is dropped at a new place, in a `reorderable` table, with every row's key in the new order. Cancelable: cancel it to keep the row where it is.
|
|
59255
|
+
* - `helix-before-toggle`: Fired from a row when its disclosure button is pressed, with whether it would be open in `detail.checked`. Cancelable: cancel it to keep the row as it is.
|
|
59256
|
+
* - `helix-load-more`: Fired, in a table with `load-more`, when the end of the table comes within a screen of view, once for each number of rows.
|
|
58720
59257
|
* - `helix-reorder`: 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.
|
|
58721
59258
|
* - `helix-select`: The selection is about to change. The event carries every selected key, separated by commas. Cancelable: cancel it to keep the current selection.
|
|
58722
59259
|
* - `helix-selected`: Fired after the selection changes, with every selected key, separated by commas.
|
|
58723
59260
|
* - `helix-sort`: A different sort order was requested, as `field:direction`, or empty for the order the rows were written in. Cancelable: cancel it to keep the current order.
|
|
58724
59261
|
* - `helix-sorted`: Fired after the sort order changes, with the new order.
|
|
59262
|
+
* - `helix-toggle`: Fired from a row once the rows under it are shown or hidden, with whether it is open in `detail.checked`.
|
|
58725
59263
|
*
|
|
58726
59264
|
* ## Slots
|
|
58727
59265
|
*
|
|
@@ -58765,6 +59303,7 @@ export type CustomElements = {
|
|
|
58765
59303
|
* - `drag-preview`: A copy of the row a pointer drags by its grip, which follows the pointer in the top layer until the row is let go, in a `reorderable` table. Hidden from assistive technology.
|
|
58766
59304
|
* - `empty`: The text shown when there are no rows.
|
|
58767
59305
|
* - `error`: The line shown after the rows while `error-text` is set, in place of the empty and loading text.
|
|
59306
|
+
* - `expand-head`: The heading over the disclosure buttons, in a table whose rows nest.
|
|
58768
59307
|
* - `grid-end`: An empty box after the rows, in a `grid` table. Tab focuses it on its way out of the table, so the key leaves from the end.
|
|
58769
59308
|
* - `grid-start`: An empty box before the rows, in a `grid` table. Shift with Tab focuses it on its way out of the table.
|
|
58770
59309
|
* - `grip-head`: The heading over the row grips, in a `reorderable` table.
|
|
@@ -58802,6 +59341,12 @@ export type CustomElements = {
|
|
|
58802
59341
|
* the drop indicator is, with the `dragging`, `drop-before`, and `drop-after`
|
|
58803
59342
|
* states.
|
|
58804
59343
|
*
|
|
59344
|
+
* **`parent` nests the row under another**, by that row's key. The table
|
|
59345
|
+
* then draws a column of disclosure buttons: a row with rows under it has one,
|
|
59346
|
+
* named by the table's `expand-row-label` and saying whether it is open with
|
|
59347
|
+
* `aria-expanded`, and its rows are drawn only while it is open. The cell is
|
|
59348
|
+
* indented by the row's depth through `--table-row-level`.
|
|
59349
|
+
*
|
|
58805
59350
|
* **`href` makes the whole row a link**, as a row action does in React Aria's
|
|
58806
59351
|
* table: a press anywhere on the row follows it, except on a link or a control
|
|
58807
59352
|
* of the row's own, and Control, Command or Shift open it the way they open a
|
|
@@ -58822,6 +59367,9 @@ export type CustomElements = {
|
|
|
58822
59367
|
* reached.
|
|
58823
59368
|
* - `href`: The URL a press on the row follows, which makes the whole row a link.
|
|
58824
59369
|
* Empty, the default, leaves presses to the row's cells.
|
|
59370
|
+
* - `parent`: The key of the row this one sits under, in a table whose rows nest: that
|
|
59371
|
+
* row's `value`, or its place among the rows where it has none. Empty, the
|
|
59372
|
+
* default, is a row at the top.
|
|
58825
59373
|
* - `rel`: The `rel` of the row's link. You set it yourself, as on an anchor.
|
|
58826
59374
|
* - `target`: Where the row's link opens, such as `_blank`.
|
|
58827
59375
|
* - `value`: The key the table's `selected` lists this row by. Left empty, the row is
|
|
@@ -58853,6 +59401,12 @@ export type CustomElements = {
|
|
|
58853
59401
|
*
|
|
58854
59402
|
* - `(default)`: The row's cells.
|
|
58855
59403
|
*
|
|
59404
|
+
* ## CSS Custom Properties
|
|
59405
|
+
*
|
|
59406
|
+
* CSS variables available for styling the component.
|
|
59407
|
+
*
|
|
59408
|
+
* - `--table-row-level`: Written by the row on its `expand` cell: how deep the row sits, from 1. Do not set it.
|
|
59409
|
+
*
|
|
58856
59410
|
* ## CSS Parts
|
|
58857
59411
|
*
|
|
58858
59412
|
* Custom selectors for styling elements within the component.
|
|
@@ -58868,6 +59422,9 @@ export type CustomElements = {
|
|
|
58868
59422
|
* - `checkbox-mark-checked`: Added to `checkbox-mark` while its box is checked.
|
|
58869
59423
|
* - `checkbox-mark-dash`: Added to `checkbox-mark` while it draws the dash, which it keeps until its box is checked.
|
|
58870
59424
|
* - `checkbox-mark-indeterminate`: Added to `checkbox-mark` while only some rows are selected.
|
|
59425
|
+
* - `expand`: The cell that holds the row's disclosure button, in a table whose rows nest. It carries `--table-row-level`, the row's depth from 1.
|
|
59426
|
+
* - `expand-button`: The button that shows and hides the rows under this one.
|
|
59427
|
+
* - `expand-mark`: The caret on the disclosure button, which points along the line, turned down by the styled tier while the row is open.
|
|
58871
59428
|
* - `grip`: The cell that holds the row's grip, in a `reorderable` table.
|
|
58872
59429
|
* - `grip-button`: The button that moves the row.
|
|
58873
59430
|
* - `grip-mark`: The icon on the grip.
|
|
@@ -58881,6 +59438,7 @@ export type CustomElements = {
|
|
|
58881
59438
|
* - `dragging`: The row is being moved, in a `reorderable` table.
|
|
58882
59439
|
* - `drop-after`: The row being moved goes after this one when it is dropped.
|
|
58883
59440
|
* - `drop-before`: The row being moved goes before this one when it is dropped.
|
|
59441
|
+
* - `expanded`: While the rows under this one are shown.
|
|
58884
59442
|
* - `link`: While the row has `href` and is not `disabled`, so a press on it follows the link.
|
|
58885
59443
|
* - `selected`: While the row is selected, in a `selectable` table.
|
|
58886
59444
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
@@ -59133,14 +59691,15 @@ export type CustomElements = {
|
|
|
59133
59691
|
*
|
|
59134
59692
|
* Methods that can be called to access component functionality.
|
|
59135
59693
|
*
|
|
59136
|
-
* - `requestActive(next: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
59694
|
+
* - `requestActive(next: string, cause?: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
59137
59695
|
*
|
|
59138
59696
|
* Announces before it acts, so `preventDefault()` on the `helix-before-activate` is
|
|
59139
59697
|
* a refusal and nothing moves. Unlike a native control, nothing has moved
|
|
59140
59698
|
* by the time this runs, so refusing is simply not writing: there is
|
|
59141
59699
|
* nothing to put back. Nobody refusing means the set updates itself,
|
|
59142
59700
|
* whether or not a consumer declared `active`, a declared property being a
|
|
59143
|
-
* seed and a correction.
|
|
59701
|
+
* seed and a correction. `cause` says why, where the family names its
|
|
59702
|
+
* causes, and reaches the event as `detail.cause`.
|
|
59144
59703
|
*
|
|
59145
59704
|
* ## CSS Parts
|
|
59146
59705
|
*
|
|
@@ -60763,7 +61322,14 @@ export type CustomElements = {
|
|
|
60763
61322
|
* counting parent, and no script. `Steps` and `Breadcrumbs` work the same way.
|
|
60764
61323
|
*
|
|
60765
61324
|
* `tone` sets the kind of event and is the only thing that colors the mark. It
|
|
60766
|
-
* uses the same values as `Announcement`.
|
|
61325
|
+
* uses the same values as `Announcement`. **A screen reader hears the tone as
|
|
61326
|
+
* a word**, from `tone-labels`: the mark is an image named "Error",
|
|
61327
|
+
* "Information", "Success" or "Warning", so the color is not the only place
|
|
61328
|
+
* the meaning is. `neutral` and `primary` say nothing unless you name them.
|
|
61329
|
+
*
|
|
61330
|
+
* **`pending` marks an event that has not happened yet**, such as one that is
|
|
61331
|
+
* scheduled. The mark is the open circle, and a screen reader hears
|
|
61332
|
+
* `pending-label`, "Scheduled", with the tone's word.
|
|
60767
61333
|
*
|
|
60768
61334
|
* ## Attributes & Properties
|
|
60769
61335
|
*
|
|
@@ -60775,11 +61341,20 @@ export type CustomElements = {
|
|
|
60775
61341
|
* Whatever `<time>` accepts, which is a date, a time, both, a duration or a
|
|
60776
61342
|
* week. Unset, the label is written as it was given and nothing claims to
|
|
60777
61343
|
* know what instant it names.
|
|
61344
|
+
* - `pending`: Marks an event that has not happened yet, such as one that is scheduled.
|
|
61345
|
+
* The mark is the open circle, and a screen reader hears `pending-label`.
|
|
61346
|
+
* - `pending-label`/`pendingLabel`: What a screen reader hears for an entry that is `pending`.
|
|
60778
61347
|
* - `relative`: Writes the time as how long ago it was, or how long until it, from
|
|
60779
61348
|
* `datetime`, where the `time` slot is empty: `long` ("3 hours ago"),
|
|
60780
61349
|
* `short` ("3 hr. ago") or `narrow` ("3h ago"). Set with no value, it is
|
|
60781
61350
|
* `long`. The words move on as they go stale.
|
|
60782
|
-
* - `tone`: The kind of event. It sets the color of the mark and
|
|
61351
|
+
* - `tone`: The kind of event. It sets the color of the mark, and a screen reader
|
|
61352
|
+
* hears it as the word `tone-labels` gives it.
|
|
61353
|
+
* - `tone-label`/`toneLabel`: What a screen reader is told this entry's tone is, such as "Failed".
|
|
61354
|
+
* Absent is the tone's word in `tone-labels`.
|
|
61355
|
+
* - `tone-labels`/`toneLabels`: What a screen reader is told each tone is, by the tone's name, written as
|
|
61356
|
+
* JSON in the attribute: `tone-labels='{"danger":"Failed"}'`. A tone with no
|
|
61357
|
+
* word is not read, which is `neutral` and `primary` in English.
|
|
60783
61358
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
60784
61359
|
*
|
|
60785
61360
|
* **Named `whenSettled` because `settled` is taken four times over**, by
|
|
@@ -60806,7 +61381,7 @@ export type CustomElements = {
|
|
|
60806
61381
|
* Areas where markup can be added to the component.
|
|
60807
61382
|
*
|
|
60808
61383
|
* - `(default)`: What happened.
|
|
60809
|
-
* - `marker`: The mark on the line. Defaults to a dot, which is the slot's fallback content.
|
|
61384
|
+
* - `marker`: The mark on the line. Defaults to a dot, which is the slot's fallback content. A mark you slot is read as the tone's word, where the entry has one.
|
|
60810
61385
|
* - `time`: When it happened, written the way you want it shown.
|
|
60811
61386
|
*
|
|
60812
61387
|
* ## CSS Parts
|
|
@@ -60815,7 +61390,7 @@ export type CustomElements = {
|
|
|
60815
61390
|
*
|
|
60816
61391
|
* - `content`: What happened, and the time above it.
|
|
60817
61392
|
* - `dot`: The dot drawn when no marker is slotted.
|
|
60818
|
-
* - `marker`: The mark on the line.
|
|
61393
|
+
* - `marker`: The mark on the line. An image named by the tone's word, and by `pending-label`, where either applies.
|
|
60819
61394
|
* - `rail`: The column that holds the mark and the line. Draw the two halves of the line with `::part(rail)::before` and `::part(rail)::after` in your stylesheet. This tier ships no CSS and renders no extra box for the line.
|
|
60820
61395
|
* - `time`: When it happened.
|
|
60821
61396
|
*
|
|
@@ -62750,14 +63325,15 @@ export type CustomElements = {
|
|
|
62750
63325
|
*
|
|
62751
63326
|
* Methods that can be called to access component functionality.
|
|
62752
63327
|
*
|
|
62753
|
-
* - `requestActive(next: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
63328
|
+
* - `requestActive(next: string, cause?: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
62754
63329
|
*
|
|
62755
63330
|
* Announces before it acts, so `preventDefault()` on the `helix-before-activate` is
|
|
62756
63331
|
* a refusal and nothing moves. Unlike a native control, nothing has moved
|
|
62757
63332
|
* by the time this runs, so refusing is simply not writing: there is
|
|
62758
63333
|
* nothing to put back. Nobody refusing means the set updates itself,
|
|
62759
63334
|
* whether or not a consumer declared `active`, a declared property being a
|
|
62760
|
-
* seed and a correction.
|
|
63335
|
+
* seed and a correction. `cause` says why, where the family names its
|
|
63336
|
+
* causes, and reaches the event as `detail.cause`.
|
|
62761
63337
|
*
|
|
62762
63338
|
* ## CSS Parts
|
|
62763
63339
|
*
|
|
@@ -62951,6 +63527,12 @@ export type CustomElements = {
|
|
|
62951
63527
|
* Written by the playlist rather than by the entry, the way an option's
|
|
62952
63528
|
* selection is: an entry that made itself current would be a second answer to
|
|
62953
63529
|
* which one is playing. (property only)
|
|
63530
|
+
* - `focusable`: Whether the entry holds the playlist's tab stop. Unset, every entry is in
|
|
63531
|
+
* the tab order, which is what a server renders.
|
|
63532
|
+
*
|
|
63533
|
+
* **Written by the playlist, with no attribute, and it reaches the button.**
|
|
63534
|
+
* The playlist gives the stop to the entry a reader last focused, or to the
|
|
63535
|
+
* current one, and the arrow keys reach the rest. (property only)
|
|
62954
63536
|
* - `text`: The entry's name: its own text, without the content in its named slots.
|
|
62955
63537
|
*
|
|
62956
63538
|
* `textContent` takes the whole subtree: a row with a duration in `meta`
|
|
@@ -62992,6 +63574,7 @@ export type CustomElements = {
|
|
|
62992
63574
|
* Areas where markup can be added to the component.
|
|
62993
63575
|
*
|
|
62994
63576
|
* - `(default)`: The entry's name.
|
|
63577
|
+
* - `indicator`: A mark shown on the entry that is playing, such as an equalizer icon. Rendered only while the entry is current.
|
|
62995
63578
|
* - `media`: A thumbnail. Defaults to an image of `poster`.
|
|
62996
63579
|
* - `meta`: Content after the name, such as a duration or a date.
|
|
62997
63580
|
*
|
|
@@ -63007,6 +63590,7 @@ export type CustomElements = {
|
|
|
63007
63590
|
* Custom selectors for styling elements within the component.
|
|
63008
63591
|
*
|
|
63009
63592
|
* - `container`: The list item that holds the button.
|
|
63593
|
+
* - `indicator`: The `indicator` slot, at the end of the row, rendered only while the entry is playing. It draws no box until you give it one.
|
|
63010
63594
|
* - `item`: The row, which is a button.
|
|
63011
63595
|
* - `item-current`: Added to `item` for the entry that is playing.
|
|
63012
63596
|
* - `label`: The name and the content after it.
|
|
@@ -63134,19 +63718,31 @@ export type CustomElements = {
|
|
|
63134
63718
|
* - the player reaches the end.
|
|
63135
63719
|
*
|
|
63136
63720
|
* On `ended` the playlist advances and the next clip starts playing, because
|
|
63137
|
-
* the user already pressed play once. `
|
|
63721
|
+
* the user already pressed play once. `no-advance` turns that off, and the
|
|
63722
|
+
* playlist stays on the entry that ended. `repeat` decides what happens at the
|
|
63138
63723
|
* end: `one` plays the same entry again, and `all` goes from the last entry
|
|
63139
63724
|
* back to the first. Without it, the playlist stops on the last entry and
|
|
63140
63725
|
* sends `helix-end`. `shuffle` plays the entries in a random order, starting
|
|
63141
63726
|
* from the one that is current, and `previous` retraces that order.
|
|
63142
63727
|
*
|
|
63728
|
+
* **`helix-before-activate` says why the playlist is moving**, in
|
|
63729
|
+
* `detail.cause`: `press` for an entry or a menu choice, `next` and
|
|
63730
|
+
* `previous` for the player's controls and the methods, `ended` at the end of
|
|
63731
|
+
* a clip, and `removed` when the current entry leaves the playlist. Cancel an
|
|
63732
|
+
* `ended` move to show your own "Up next" countdown, then call `next()`.
|
|
63733
|
+
*
|
|
63734
|
+
* **Removing the current entry moves the playlist on**, to the entry after it,
|
|
63735
|
+
* or to the one before it when it was the last. A clip that was playing keeps
|
|
63736
|
+
* playing in the entry that takes its place.
|
|
63737
|
+
*
|
|
63143
63738
|
* **The player is named by the current entry**, and the device's own media
|
|
63144
63739
|
* controls show the entry as the title. A player you gave a `label` keeps
|
|
63145
63740
|
* your name, and only the title follows the entry.
|
|
63146
63741
|
*
|
|
63147
|
-
* **Keyboard.**
|
|
63148
|
-
*
|
|
63149
|
-
*
|
|
63742
|
+
* **Keyboard.** The entries take one stop in the tab order: the entry you
|
|
63743
|
+
* last focused, or the current entry before you have focused one. Enter or
|
|
63744
|
+
* Space plays it. The arrow keys move focus to the entry before or after, and
|
|
63745
|
+
* Home and End to the first and the last, passing over disabled entries. The
|
|
63150
63746
|
* current entry carries `aria-current`. While focus is on the player, the
|
|
63151
63747
|
* player's own keys work, and `Video` lists them, and Shift with N or P plays
|
|
63152
63748
|
* the next or the previous entry. The player's previous and next controls
|
|
@@ -63161,7 +63757,11 @@ export type CustomElements = {
|
|
|
63161
63757
|
*
|
|
63162
63758
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
63163
63759
|
*
|
|
63760
|
+
* - `empty-label`/`emptyLabel`: What the playlist says while it has no entries. The `empty` slot replaces it.
|
|
63164
63761
|
* - `label`: The list's name, read by screen readers.
|
|
63762
|
+
* - `no-advance`/`noAdvance`: Stays on an entry when its clip ends, where the playlist would otherwise
|
|
63763
|
+
* play the next one. The player's controls, a press, and `next()` still
|
|
63764
|
+
* move. `repeat="one"` still plays the entry again.
|
|
63165
63765
|
* - `playing-label`/`playingLabel`: What the live region says when the playlist moves to another entry.
|
|
63166
63766
|
* `{title}` is the entry's name.
|
|
63167
63767
|
*
|
|
@@ -63221,7 +63821,7 @@ export type CustomElements = {
|
|
|
63221
63821
|
* Events that will be emitted by the component.
|
|
63222
63822
|
*
|
|
63223
63823
|
* - `helix-activate`: The current entry changed. The playlist already holds the new entry when this is sent, and `detail.previous` is the entry it left. `currentEntry` is the entry itself, with its `src`, `poster` and name.
|
|
63224
|
-
* - `helix-before-activate`: The current entry is about to change. Cancelable: cancel it to keep the current entry.
|
|
63824
|
+
* - `helix-before-activate`: The current entry is about to change, and `detail.cause` says why: `press`, `next`, `previous`, `ended`, or `removed`. Cancelable: cancel it to keep the current entry.
|
|
63225
63825
|
* - `helix-end`: The last entry finished playing, and the playlist stopped there. Not sent while `repeat` is set.
|
|
63226
63826
|
*
|
|
63227
63827
|
* ## Slots
|
|
@@ -63229,6 +63829,7 @@ export type CustomElements = {
|
|
|
63229
63829
|
* Areas where markup can be added to the component.
|
|
63230
63830
|
*
|
|
63231
63831
|
* - `(default)`: The entries.
|
|
63832
|
+
* - `empty`: Shown while the playlist has no entries. Defaults to `empty-label`.
|
|
63232
63833
|
* - `player`: The player that plays the entries.
|
|
63233
63834
|
*
|
|
63234
63835
|
* ## Methods
|
|
@@ -63240,19 +63841,21 @@ export type CustomElements = {
|
|
|
63240
63841
|
* entry otherwise.
|
|
63241
63842
|
* - `previous() => void`: Moves to the previous entry and plays it, as the player's previous control
|
|
63242
63843
|
* does. Under `shuffle` it goes back through the order that played.
|
|
63243
|
-
* - `requestActive(next: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
63844
|
+
* - `requestActive(next: string, cause?: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
63244
63845
|
*
|
|
63245
63846
|
* Announces before it acts, so `preventDefault()` on the `helix-before-activate` is
|
|
63246
63847
|
* a refusal and nothing moves. Unlike a native control, nothing has moved
|
|
63247
63848
|
* by the time this runs, so refusing is simply not writing: there is
|
|
63248
63849
|
* nothing to put back. Nobody refusing means the set updates itself,
|
|
63249
63850
|
* whether or not a consumer declared `active`, a declared property being a
|
|
63250
|
-
* seed and a correction.
|
|
63851
|
+
* seed and a correction. `cause` says why, where the family names its
|
|
63852
|
+
* causes, and reaches the event as `detail.cause`.
|
|
63251
63853
|
*
|
|
63252
63854
|
* ## CSS Parts
|
|
63253
63855
|
*
|
|
63254
63856
|
* Custom selectors for styling elements within the component.
|
|
63255
63857
|
*
|
|
63858
|
+
* - `empty`: The box that holds the `empty` slot, drawn while there are no entries.
|
|
63256
63859
|
* - `items`: The list of entries.
|
|
63257
63860
|
* - `live`: A live region that says which entry plays after the playlist moves.
|
|
63258
63861
|
* - `player`: The region that holds the player.
|
|
@@ -63731,8 +64334,10 @@ export type CustomElements = {
|
|
|
63731
64334
|
* **A grid.** `columns` lays the items out that many to a line, as a grid of
|
|
63732
64335
|
* equal columns, and windows the set a line at a time, as React Aria's grid
|
|
63733
64336
|
* layout does. Each item draws one element, a cell of the grid, and
|
|
63734
|
-
* `estimate` is the height of a line.
|
|
63735
|
-
*
|
|
64337
|
+
* `estimate` is the height of a line. `min-column-width` lays out as many
|
|
64338
|
+
* columns as fit the box instead, as React Aria's grid layout does with its
|
|
64339
|
+
* smallest item size, and follows the box as it resizes. `gap` spaces the rows, and the columns
|
|
64340
|
+
* of a grid, by a number of pixels the list counts in each row's place.
|
|
63736
64341
|
*
|
|
63737
64342
|
* **Keyboard.** The list is one tab stop.
|
|
63738
64343
|
*
|
|
@@ -63743,6 +64348,7 @@ export type CustomElements = {
|
|
|
63743
64348
|
* | Home, End | Moves to the first or the last item. |
|
|
63744
64349
|
* | Page Down, Page Up | Moves by the number of items, or of lines in a grid, on screen. |
|
|
63745
64350
|
* | A letter or a word | Moves to the next item whose text starts with what you typed. |
|
|
64351
|
+
* | Escape | Lets go of every chosen item, in a list with `selection-mode`. |
|
|
63746
64352
|
* | Tab | Moves into the focused row's own links and buttons, then out of the list. |
|
|
63747
64353
|
*
|
|
63748
64354
|
* An item that is not drawn is scrolled into view and focused, so a keyboard
|
|
@@ -63759,12 +64365,23 @@ export type CustomElements = {
|
|
|
63759
64365
|
* from: `single` selects one item and `multiple` any number. Space or a press
|
|
63760
64366
|
* selects an item, Shift with Space, an arrow, Home, End or a press takes in
|
|
63761
64367
|
* the items from the last one chosen, and Control or Command with A selects
|
|
63762
|
-
* them all, in `multiple`.
|
|
63763
|
-
*
|
|
63764
|
-
*
|
|
63765
|
-
* `
|
|
63766
|
-
*
|
|
63767
|
-
*
|
|
64368
|
+
* them all, in `multiple`. Escape lets go of every chosen item, and keeps the
|
|
64369
|
+
* key from the dialog or menu around the list while there was something to
|
|
64370
|
+
* let go of. `value` holds the chosen items' keys, separated by commas, in
|
|
64371
|
+
* the order of the set: `key-field` names each item's key, and a string or a
|
|
64372
|
+
* number item is its own key. A change asks with `helix-before-change` and
|
|
64373
|
+
* tells with `change`. Each row is an `option` marked `aria-selected`, so a
|
|
64374
|
+
* row's own links and buttons are not reached there: keep those to a list
|
|
64375
|
+
* without `selection-mode`.
|
|
64376
|
+
*
|
|
64377
|
+
* `selection-behavior="replace"` selects the item pressed alone, as a file
|
|
64378
|
+
* list does, and the arrow keys carry the selection with them. Control or
|
|
64379
|
+
* Command with a press or with Space adds or takes out one item, and with an
|
|
64380
|
+
* arrow moves without selecting.
|
|
64381
|
+
*
|
|
64382
|
+
* **Disabled items.** `disabled-keys` names items by their keys, separated by
|
|
64383
|
+
* commas. Their rows carry `aria-disabled`, the keys and typing pass over
|
|
64384
|
+
* them, and a press, Space, or Control with A does not select them.
|
|
63768
64385
|
*
|
|
63769
64386
|
* **Loading more.** `helix-range-change` fires as the items on screen change,
|
|
63770
64387
|
* and `range` holds them. `helix-load-more` fires once a reader is within one
|
|
@@ -63806,6 +64423,8 @@ export type CustomElements = {
|
|
|
63806
64423
|
* - `columns`: How many items a line holds. One, the default, is a list; more lays the
|
|
63807
64424
|
* items out as a grid of that many equal columns, windowed a line at a
|
|
63808
64425
|
* time, with Left and Right moving along a line.
|
|
64426
|
+
* - `disabled-keys`/`disabledKeys`: The keys of the items a reader cannot choose or move to, separated by
|
|
64427
|
+
* commas, as `value` writes keys. Their rows carry `aria-disabled`.
|
|
63809
64428
|
* - `empty-label`/`emptyLabel`: The text of the row shown when there are no items and none are loading,
|
|
63810
64429
|
* where the `empty` slot is empty. Empty, the default, shows no row.
|
|
63811
64430
|
* - `estimate`: The height of one row, in pixels, used to find the row at a scroll offset.
|
|
@@ -63814,6 +64433,10 @@ export type CustomElements = {
|
|
|
63814
64433
|
* right whenever the rows really are one height and is the cheaper of the two.
|
|
63815
64434
|
* - `for`: The id of the script element that holds the items as JSON. `items` wins
|
|
63816
64435
|
* where both are set.
|
|
64436
|
+
* - `gap`: The space between two rows, and between two columns in a grid, in
|
|
64437
|
+
* pixels. The list counts it in each row's place, so a gap does not walk
|
|
64438
|
+
* the rows away from the scroll position the way a margin on each row
|
|
64439
|
+
* would.
|
|
63817
64440
|
* - `key-field`/`keyField`: The field of each item that is its key in `value`, as a key or a path of
|
|
63818
64441
|
* keys. Empty reads a string or a number item as its own key, and any
|
|
63819
64442
|
* other item by its place in the set.
|
|
@@ -63838,6 +64461,12 @@ export type CustomElements = {
|
|
|
63838
64461
|
* disagree with itself; measuring is what a set of genuinely different
|
|
63839
64462
|
* heights needs and costs a read of each row as it renders. A list of
|
|
63840
64463
|
* one-line rows should leave this alone.
|
|
64464
|
+
* - `min-column-width`/`minColumnWidth`: The narrowest a column of a grid may be, in pixels. Set, the list lays
|
|
64465
|
+
* out as many columns as fit the box at that width, at least one, and
|
|
64466
|
+
* follows the box as it resizes, which `columns` then does not decide.
|
|
64467
|
+
* - `selection-behavior`/`selectionBehavior`: What a press does to the items already chosen: `toggle` adds or takes out
|
|
64468
|
+
* the item, and `replace` selects it alone and lets the arrow keys carry the
|
|
64469
|
+
* selection, with Control or Command adding or taking out one item.
|
|
63841
64470
|
* - `selection-mode`/`selectionMode`: Makes the list a list box a reader chooses from: `single` selects one
|
|
63842
64471
|
* item, and `multiple` any number. Unset is a list a reader reads.
|
|
63843
64472
|
* - `text-field`/`textField`: The field of each item that typing matches, as a key or a path of keys
|
|
@@ -66749,6 +67378,16 @@ export type CustomElementsSolidJs = {
|
|
|
66749
67378
|
* - What a key changes that a reader cannot see is said: where a card moved
|
|
66750
67379
|
* to, its new size, how many cards are selected, and the zoom. A selected
|
|
66751
67380
|
* card or connection says so when a reader arrives on it.
|
|
67381
|
+
* - Control or Command with C copies the selected cards, and the connections
|
|
67382
|
+
* between them, as a JSON Canvas document in text, which another board or
|
|
67383
|
+
* an app that reads the format takes. A paste is your page's: listen for
|
|
67384
|
+
* `paste` on the board, read the text with `fromJsonCanvas`, and add the
|
|
67385
|
+
* cards it holds.
|
|
67386
|
+
* - Control or Command with Z undoes the last move or resize the board made,
|
|
67387
|
+
* and with Shift, or Control with Y, makes it again. `undo()` and `redo()`
|
|
67388
|
+
* do the same from a script. Each asks with `helix-before-move` and tells
|
|
67389
|
+
* with `helix-move`, as a move does, so a board that holds its positions in
|
|
67390
|
+
* your state is undone through your state.
|
|
66752
67391
|
*
|
|
66753
67392
|
* Every drag also works with clicks, as WCAG 2.5.7 requires for a pointer that
|
|
66754
67393
|
* cannot hold a button down. Click a selected card's move handle, a corner, a
|
|
@@ -66799,6 +67438,7 @@ export type CustomElementsSolidJs = {
|
|
|
66799
67438
|
* this, so a reader hears the ends first and what the line says after.
|
|
66800
67439
|
* - `controls-label`/`controlsLabel`: The name of the group of controls, read by screen readers, which names
|
|
66801
67440
|
* what the controls drive rather than the mechanism.
|
|
67441
|
+
* - `copied-label`/`copiedLabel`: What screen readers hear after a copy, with `{count}` for the cards copied.
|
|
66802
67442
|
* - `fallback-label`/`fallbackLabel`: The board's name where `label` is empty.
|
|
66803
67443
|
* - `label`: The accessible name for the board. Required.
|
|
66804
67444
|
*
|
|
@@ -66844,6 +67484,7 @@ export type CustomElementsSolidJs = {
|
|
|
66844
67484
|
* walk the cards.
|
|
66845
67485
|
* - `reconnecting-label`/`reconnectingLabel`: The text announced when a connection's end is picked up, with `{from}` and
|
|
66846
67486
|
* `{to}`.
|
|
67487
|
+
* - `redone-label`/`redoneLabel`: What screen readers hear after a move or a resize is made again.
|
|
66847
67488
|
* - `resized-label`/`resizedLabel`: What screen readers hear after a key resizes a card, with `{name}` for the
|
|
66848
67489
|
* card and `{width}` and `{height}` for its new size, in the document's
|
|
66849
67490
|
* units.
|
|
@@ -66901,6 +67542,7 @@ export type CustomElementsSolidJs = {
|
|
|
66901
67542
|
* see the board is told by the color; this is how a reader who cannot is
|
|
66902
67543
|
* told the same. A tone left out is not read.
|
|
66903
67544
|
* - `two-finger-hint-label`/`twoFingerHintLabel`: The hint shown when one finger swipes over the board with `gestures="cooperative"`.
|
|
67545
|
+
* - `undone-label`/`undoneLabel`: What screen readers hear after a move or a resize is undone.
|
|
66904
67546
|
* - `using-label`/`usingLabel`: The line shown while the board, with `gestures="activate"`, has the gestures.
|
|
66905
67547
|
* - `wheel-hint-label`/`wheelHintLabel`: The hint shown when the wheel scrolls past the board with
|
|
66906
67548
|
* `gestures="cooperative"`. `{key}` is ⌘ on a Mac and Ctrl elsewhere.
|
|
@@ -67073,6 +67715,11 @@ export type CustomElementsSolidJs = {
|
|
|
67073
67715
|
*
|
|
67074
67716
|
* What a reader landing on a card off the edge of the view gets, and what a
|
|
67075
67717
|
* page's own search or outline can call to take a reader to one.
|
|
67718
|
+
* - `undo() => boolean`: Puts the cards of the last move or resize back where they stood, asking
|
|
67719
|
+
* with `helix-before-move` first. Returns whether anything moved: false
|
|
67720
|
+
* with nothing to undo, or when the request was refused.
|
|
67721
|
+
* - `redo() => boolean`: Makes the last move or resize `undo` took back again, asking with
|
|
67722
|
+
* `helix-before-move` first. Returns whether anything moved.
|
|
67076
67723
|
* - `toJsonCanvas() => CanvasDocument`: The board as a JSON Canvas document, for saving it.
|
|
67077
67724
|
*
|
|
67078
67725
|
* What each card holds is the consumer's DOM, so a card comes back as a card
|
|
@@ -67914,6 +68561,19 @@ export type CustomElementsSolidJs = {
|
|
|
67914
68561
|
* "Ada is typing" (`typing-label`), which a screen reader hears, and clearing
|
|
67915
68562
|
* it takes them away. Anything slotted into `status` is drawn first.
|
|
67916
68563
|
*
|
|
68564
|
+
* **Keyboard.** The transcript moves between turns the way a feed does. Each
|
|
68565
|
+
* turn says its place, such as "3 of 40", windowed or not.
|
|
68566
|
+
*
|
|
68567
|
+
* | Key | What it does |
|
|
68568
|
+
* |---|---|
|
|
68569
|
+
* | Page Down, Page Up | On a turn or inside one, moves focus to the next or the previous turn. On the transcript itself, moves focus to the turn at the top of the view. |
|
|
68570
|
+
* | Control with End | Moves focus to the composer. |
|
|
68571
|
+
* | Control with Home | Moves focus to the first control above the transcript, or to the transcript. |
|
|
68572
|
+
*
|
|
68573
|
+
* While you are scrolled away from the newest turn, the `resume` region shows
|
|
68574
|
+
* a button that takes you back, named by `resume-label`, "Jump to latest".
|
|
68575
|
+
* Slot your own control into `resume` to replace it.
|
|
68576
|
+
*
|
|
67917
68577
|
* A screen reader names each turn by its author and its time, such as "You, 2
|
|
67918
68578
|
* minutes ago". Set `me-label` and `message-label` to say it in your language,
|
|
67919
68579
|
* and give each turn by `them` an `author-label`. A turn with neither an author
|
|
@@ -67984,6 +68644,7 @@ export type CustomElementsSolidJs = {
|
|
|
67984
68644
|
* is the way back, and that is a part inside the shadow tree where a
|
|
67985
68645
|
* stylesheet can already reach it. Measured rather than assumed: `label,
|
|
67986
68646
|
* pinned` after upgrade against `label` from the server.
|
|
68647
|
+
* - `resume-label`/`resumeLabel`: The words on the button that returns to the newest turn, where `resume` is empty.
|
|
67987
68648
|
* - `threshold`: How near the bottom still counts as being at it, in pixels.
|
|
67988
68649
|
*
|
|
67989
68650
|
* A hook rather than a constant, because the right number depends on how tall
|
|
@@ -68053,7 +68714,7 @@ export type CustomElementsSolidJs = {
|
|
|
68053
68714
|
* - `actions`: Controls for the whole conversation, beside the header.
|
|
68054
68715
|
* - `composer`: The composer, below the transcript.
|
|
68055
68716
|
* - `header`: Content above the transcript that names the conversation.
|
|
68056
|
-
* - `resume`: The control that returns to the bottom, shown while the user has scrolled away.
|
|
68717
|
+
* - `resume`: The control that returns to the bottom, shown while the user has scrolled away. Defaults to a button named by `resume-label`.
|
|
68057
68718
|
* - `status`: Status beside the composer, such as someone typing or a lost connection.
|
|
68058
68719
|
*
|
|
68059
68720
|
* ## Methods
|
|
@@ -68102,6 +68763,8 @@ export type CustomElementsSolidJs = {
|
|
|
68102
68763
|
* - `message-state`: The state text of a turn from `turns`, when there is one to show.
|
|
68103
68764
|
* - `message-time`: The time of a turn from `turns`.
|
|
68104
68765
|
* - `resume`: The control shown while the user is scrolled away from the bottom.
|
|
68766
|
+
* - `resume-button`: The button the `resume` region shows when nothing is slotted into it.
|
|
68767
|
+
* - `resume-mark`: The arrow on the default `resume-button`.
|
|
68105
68768
|
* - `status`: The status region, outside the log.
|
|
68106
68769
|
* - `turn`: The wrapper around the message drawn for one turn from `turns`.
|
|
68107
68770
|
* - `typing`: The words that say who is typing, in the status band, while `typing` names someone.
|
|
@@ -68618,7 +69281,18 @@ export type CustomElementsSolidJs = {
|
|
|
68618
69281
|
* For a fragment of code inside a sentence, use `Code`.
|
|
68619
69282
|
*
|
|
68620
69283
|
* Set `line-numbers` to number the lines in a gutter beside the code, hidden
|
|
68621
|
-
* from the accessibility tree and left out of a copy. Set `
|
|
69284
|
+
* from the accessibility tree and left out of a copy. Set `mark-lines` to
|
|
69285
|
+
* mark lines a reader should look at, such as `2, 4-6`: the block draws a
|
|
69286
|
+
* band behind each run, placed where the lines are laid out, so it follows a
|
|
69287
|
+
* highlighter's markup and lines that wrap. Set `wrap` to wrap long lines
|
|
69288
|
+
* rather than scroll them; a gutter then numbers each line where it starts.
|
|
69289
|
+
* Set `wrappable` for a button in the header that turns `wrap` on and off,
|
|
69290
|
+
* pressed while the lines wrap.
|
|
69291
|
+
*
|
|
69292
|
+
* The header holds the name, the `actions` slot, and the copy button. Slot a
|
|
69293
|
+
* control into `actions`, such as a button that sets `wrap` or one that opens
|
|
69294
|
+
* the code in an editor, and the block draws a header for it even with no
|
|
69295
|
+
* name. `copy-icon` and `copied-icon` replace the copy button's two icons. Set `highlight` to a
|
|
68622
69296
|
* function that turns the code into highlighted markup, such as one wrapping
|
|
68623
69297
|
* Shiki or Prism, and the block draws what it returns; it is handed the
|
|
68624
69298
|
* block's `language`, so one function serves every block. The code stays in
|
|
@@ -68705,6 +69379,9 @@ export type CustomElementsSolidJs = {
|
|
|
68705
69379
|
* copy, which takes the code alone. Reflected, because the stylesheet lays
|
|
68706
69380
|
* the gutter out beside the code. A diff numbers its lines from its hunks
|
|
68707
69381
|
* whether or not this is set.
|
|
69382
|
+
* - `mark-lines`/`markLines`: The lines to mark, as numbers and ranges counted from 1, such as `2, 4-6`.
|
|
69383
|
+
* Each run is drawn as a band behind its lines. Not for a diff, which marks
|
|
69384
|
+
* its own changes.
|
|
68708
69385
|
* - `no-copy`/`noCopy`: Whether to leave the copy button off.
|
|
68709
69386
|
*
|
|
68710
69387
|
* Negative, which is not a style choice. A boolean attribute is true whenever
|
|
@@ -68729,6 +69406,17 @@ export type CustomElementsSolidJs = {
|
|
|
68729
69406
|
* Absent is unified, each removal above its replacement, which fits any
|
|
68730
69407
|
* width. `split` sets the old version beside the new one. Optional rather
|
|
68731
69408
|
* than defaulted, so the host carries no attribute the consumer did not write.
|
|
69409
|
+
* - `wrap`: Whether long lines wrap. Without it they scroll.
|
|
69410
|
+
*
|
|
69411
|
+
* Off by default, so long lines scroll, because a line break can be
|
|
69412
|
+
* significant in code and a wrapped line reads as two. For prose-like code,
|
|
69413
|
+
* such as a long command or a log line, a wrap reads better than a scroll.
|
|
69414
|
+
* With `line-numbers`, each number stands beside the line it numbers
|
|
69415
|
+
* however many rows that line takes. Reflected, because the stylesheet
|
|
69416
|
+
* wraps the lines.
|
|
69417
|
+
* - `wrap-label`/`wrapLabel`: The wrap button's name, which it keeps whether it is pressed or not.
|
|
69418
|
+
* - `wrappable`: Whether the header has a button that wraps the lines and unwraps them. The
|
|
69419
|
+
* block draws a header for it even with no name.
|
|
68732
69420
|
* - `highlight`: Turns the code into highlighted markup, which the block draws in place of
|
|
68733
69421
|
* the plain text.
|
|
68734
69422
|
*
|
|
@@ -68771,16 +69459,36 @@ export type CustomElementsSolidJs = {
|
|
|
68771
69459
|
* browser harness's awaits it alone: a browser always runs the frame, and a
|
|
68772
69460
|
* timer beside it was a bet on how long one takes, which a busy run lost. (property only) (readonly)
|
|
68773
69461
|
*
|
|
69462
|
+
* ## Events
|
|
69463
|
+
*
|
|
69464
|
+
* Events that will be emitted by the component.
|
|
69465
|
+
*
|
|
69466
|
+
* - `helix-before-toggle`: The wrap button was pressed, with the `wrap` it asks for in `detail.checked`. Cancelable: cancel it to keep the lines as they are.
|
|
69467
|
+
* - `helix-toggle`: Fired after the wrap button changed `wrap`, with the new value in `detail.checked`.
|
|
69468
|
+
*
|
|
68774
69469
|
* ## Slots
|
|
68775
69470
|
*
|
|
68776
69471
|
* Areas where markup can be added to the component.
|
|
68777
69472
|
*
|
|
68778
69473
|
* - `(default)`: The code.
|
|
69474
|
+
* - `actions`: Controls for the block, in the header before the copy button.
|
|
69475
|
+
* - `copied-icon`: The copy button's icon after a copy. Defaults to a check mark.
|
|
69476
|
+
* - `copy-icon`: The copy button's icon before a copy. Defaults to a clipboard.
|
|
69477
|
+
*
|
|
69478
|
+
* ## CSS Custom Properties
|
|
69479
|
+
*
|
|
69480
|
+
* CSS variables available for styling the component.
|
|
69481
|
+
*
|
|
69482
|
+
* - `--code-block-line-size`: Written by the block on each `number` in a `wrap` block with `line-numbers`: how tall the line it numbers is laid out. Do not set it.
|
|
69483
|
+
* - `--code-block-mark-inline-size`: Written by the block on each `mark`: how wide the code is, scrolled part included. Do not set it.
|
|
69484
|
+
* - `--code-block-mark-size`: Written by the block on each `mark`: how tall its run of lines is. Do not set it.
|
|
69485
|
+
* - `--code-block-mark-start`: Written by the block on each `mark`: how far down the code its run of lines starts. Do not set it.
|
|
68779
69486
|
*
|
|
68780
69487
|
* ## CSS Parts
|
|
68781
69488
|
*
|
|
68782
69489
|
* Custom selectors for styling elements within the component.
|
|
68783
69490
|
*
|
|
69491
|
+
* - `actions`: The box in the header that holds the `actions` slot, drawn while something is slotted there.
|
|
68784
69492
|
* - `added`: In a diff, a line only the new version has, an `<ins>`.
|
|
68785
69493
|
* - `block`: The scrolling `<pre>`.
|
|
68786
69494
|
* - `code`: The `<code>` inside it.
|
|
@@ -68809,13 +69517,15 @@ export type CustomElementsSolidJs = {
|
|
|
68809
69517
|
* - `header`: The bar that holds the name and the copy button, shown when there is a name.
|
|
68810
69518
|
* - `hunk`: In a diff, a `@@` line saying where the lines under it are.
|
|
68811
69519
|
* - `label`: The block's name: its `label`, or its `language` where it has no label.
|
|
69520
|
+
* - `mark`: The band behind a run of lines `mark-lines` names. The block writes where the run is laid out into `--code-block-mark-start`, `--code-block-mark-size`, and `--code-block-mark-inline-size` on it. Hidden from the accessibility tree.
|
|
68812
69521
|
* - `marker`: In a diff, the `+`, `-`, or space that starts a line.
|
|
68813
69522
|
* - `new`: In a split diff, the new version's `<pre>`.
|
|
68814
|
-
* - `number`: In a diff, a line number.
|
|
69523
|
+
* - `number`: In a diff, a line number. In a `wrap` block with `line-numbers`, one line's number in the gutter, which the block makes as tall as the line it numbers through `--code-block-line-size`.
|
|
68815
69524
|
* - `old`: In a split diff, the old version's `<pre>`.
|
|
68816
69525
|
* - `removed`: In a diff, a line only the old version has, a `<del>`.
|
|
68817
69526
|
* - `split`: In a split diff, the two versions side by side.
|
|
68818
69527
|
* - `text`: In a diff, a line's code.
|
|
69528
|
+
* - `wrap-toggle`: The button in the header that wraps the lines and unwraps them, drawn when `wrappable` is set.
|
|
68819
69529
|
*
|
|
68820
69530
|
* ## CSS States
|
|
68821
69531
|
*
|
|
@@ -74995,14 +75705,15 @@ export type CustomElementsSolidJs = {
|
|
|
74995
75705
|
* - `pan(to: ViewportWay) => void`: Pans the view one step in a direction.
|
|
74996
75706
|
* - `zoom(by: number) => void`: Zooms the view one step: `1` zooms in and `-1` zooms out.
|
|
74997
75707
|
* - `toggleFullscreen() => void`: Turns fullscreen on or off.
|
|
74998
|
-
* - `requestActive(next: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
75708
|
+
* - `requestActive(next: string, cause?: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
74999
75709
|
*
|
|
75000
75710
|
* Announces before it acts, so `preventDefault()` on the `helix-before-activate` is
|
|
75001
75711
|
* a refusal and nothing moves. Unlike a native control, nothing has moved
|
|
75002
75712
|
* by the time this runs, so refusing is simply not writing: there is
|
|
75003
75713
|
* nothing to put back. Nobody refusing means the set updates itself,
|
|
75004
75714
|
* whether or not a consumer declared `active`, a declared property being a
|
|
75005
|
-
* seed and a correction.
|
|
75715
|
+
* seed and a correction. `cause` says why, where the family names its
|
|
75716
|
+
* causes, and reaches the event as `detail.cause`.
|
|
75006
75717
|
*
|
|
75007
75718
|
* ## CSS Parts
|
|
75008
75719
|
*
|
|
@@ -76861,14 +77572,15 @@ export type CustomElementsSolidJs = {
|
|
|
76861
77572
|
* - `previous() => void`: Shows the previous item. Before the first item, it shows the last when
|
|
76862
77573
|
* `loop` is set.
|
|
76863
77574
|
* - `toggleFullscreen() => void`: Makes the viewer fill the screen, or exits fullscreen.
|
|
76864
|
-
* - `requestActive(next: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
77575
|
+
* - `requestActive(next: string, cause?: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
76865
77576
|
*
|
|
76866
77577
|
* Announces before it acts, so `preventDefault()` on the `helix-before-activate` is
|
|
76867
77578
|
* a refusal and nothing moves. Unlike a native control, nothing has moved
|
|
76868
77579
|
* by the time this runs, so refusing is simply not writing: there is
|
|
76869
77580
|
* nothing to put back. Nobody refusing means the set updates itself,
|
|
76870
77581
|
* whether or not a consumer declared `active`, a declared property being a
|
|
76871
|
-
* seed and a correction.
|
|
77582
|
+
* seed and a correction. `cause` says why, where the family names its
|
|
77583
|
+
* causes, and reaches the event as `detail.cause`.
|
|
76872
77584
|
* - `requestOpen(next: boolean) => boolean`: Requests that the element open or close, and returns whether the change
|
|
76873
77585
|
* was applied.
|
|
76874
77586
|
*
|
|
@@ -85948,6 +86660,13 @@ export type CustomElementsSolidJs = {
|
|
|
85948
86660
|
* only whoever put it there knows that, which is the same reason `min` is a
|
|
85949
86661
|
* consumer's to set.
|
|
85950
86662
|
* - `corner-label`/`cornerLabel`: The name of the handle where two dividers cross, read by screen readers.
|
|
86663
|
+
* - `corner-value-label`/`cornerValueLabel`: What the handle where two dividers cross says it is set to, both dividers
|
|
86664
|
+
* at once: `{across}` is where the divider that runs down stands, and
|
|
86665
|
+
* `{down}` where the one that runs across stands, each a percentage.
|
|
86666
|
+
*
|
|
86667
|
+
* **Both, because the handle moves both**, and a number names one: the
|
|
86668
|
+
* handle's `aria-valuenow` is the divider its `aria-orientation` names, and
|
|
86669
|
+
* these words are the whole of where it is.
|
|
85951
86670
|
* - `default-collapsed`/`defaultCollapsed`: Which pane starts shut, when `collapsed` is not set.
|
|
85952
86671
|
* - `default-position`/`defaultPosition`: Where the divider starts, when `position` is not set.
|
|
85953
86672
|
* - `label`: The divider's name, read by screen readers.
|
|
@@ -86443,14 +87162,15 @@ export type CustomElementsSolidJs = {
|
|
|
86443
87162
|
* and the invalid mark from every stage, as Ark UI's `resetStep` does.
|
|
86444
87163
|
* Returns whether it moved: a listener can refuse the move with
|
|
86445
87164
|
* `helix-before-activate`, and the stages then keep their marks.
|
|
86446
|
-
* - `requestActive(next: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
87165
|
+
* - `requestActive(next: string, cause?: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
86447
87166
|
*
|
|
86448
87167
|
* Announces before it acts, so `preventDefault()` on the `helix-before-activate` is
|
|
86449
87168
|
* a refusal and nothing moves. Unlike a native control, nothing has moved
|
|
86450
87169
|
* by the time this runs, so refusing is simply not writing: there is
|
|
86451
87170
|
* nothing to put back. Nobody refusing means the set updates itself,
|
|
86452
87171
|
* whether or not a consumer declared `active`, a declared property being a
|
|
86453
|
-
* seed and a correction.
|
|
87172
|
+
* seed and a correction. `cause` says why, where the family names its
|
|
87173
|
+
* causes, and reaches the event as `detail.cause`.
|
|
86454
87174
|
*
|
|
86455
87175
|
* ## CSS Custom Properties
|
|
86456
87176
|
*
|
|
@@ -87194,6 +87914,27 @@ export type CustomElementsSolidJs = {
|
|
|
87194
87914
|
* Tab reaches each checkbox, and Space ticks it. To act on one row, put a
|
|
87195
87915
|
* link or a button in a cell, or give the row an `href`.
|
|
87196
87916
|
*
|
|
87917
|
+
* `selection-mode="single"` selects one row at a time: ticking a row lets go
|
|
87918
|
+
* of the one before, the heading holds no checkbox, and Shift and Control with
|
|
87919
|
+
* A take in nothing more. `selection-behavior="replace"` makes a press on a
|
|
87920
|
+
* row, anywhere but its own controls, select it alone, as a file list does,
|
|
87921
|
+
* and in a `grid` table the arrow keys carry the selection with them. Control
|
|
87922
|
+
* or Command with a press adds or takes out the row, and with an arrow moves
|
|
87923
|
+
* without selecting. Shift with a press takes in the rows from the one last
|
|
87924
|
+
* chosen.
|
|
87925
|
+
*
|
|
87926
|
+
* **Nesting rows.** A row with `parent` sits under the row of that key, as
|
|
87927
|
+
* a file sits in a folder. The table then draws a column of disclosure
|
|
87928
|
+
* buttons, under a heading named by `expand-column-label`: a row with rows
|
|
87929
|
+
* under it has a button named by `expand-row-label` ("Expand {row}") that
|
|
87930
|
+
* says with `aria-expanded` whether it is open, and the rows under a shut row
|
|
87931
|
+
* are not drawn. `expanded` holds the open rows' keys, comma separated, and
|
|
87932
|
+
* `default-expanded` is where it starts. A press asks with
|
|
87933
|
+
* `helix-before-toggle` and tells with `helix-toggle`, both from the row, so
|
|
87934
|
+
* you can refuse it or load the rows on the way. A sort orders the rows
|
|
87935
|
+
* under each row among themselves, and in a `grid` table the table is a
|
|
87936
|
+
* `treegrid` whose rows say their depth.
|
|
87937
|
+
*
|
|
87197
87938
|
* **Moving rows.** `reorderable` adds a column of grips before the checkboxes,
|
|
87198
87939
|
* under a heading named by `row-grips-label`.
|
|
87199
87940
|
*
|
|
@@ -87230,13 +87971,20 @@ export type CustomElementsSolidJs = {
|
|
|
87230
87971
|
* | Enter on a cell of a row with `href` | Follows the row's link. |
|
|
87231
87972
|
* | Enter, Space on a sortable heading | Sorts by the column. |
|
|
87232
87973
|
* | Space on a row, Enter or Space on its checkbox cell | Selects the row, in a `selectable` table. |
|
|
87974
|
+
* | Enter or Space on a disclosure cell | Shows or hides the rows under the row, in a table whose rows nest. |
|
|
87233
87975
|
* | 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. |
|
|
87976
|
+
* | 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. |
|
|
87234
87977
|
* | Shift with Down or Up | Selects the rows it moves across, in a `selectable` table. |
|
|
87235
87978
|
* | Shift with Space | Selects every row from the one last chosen, in a `selectable` table. |
|
|
87236
87979
|
* | Control or Command with A | Selects every row, in a `selectable` table. |
|
|
87237
87980
|
* | A letter or a word | Moves to the next row whose first cell starts with what you typed. |
|
|
87238
87981
|
* | Tab | Leaves the table. |
|
|
87239
87982
|
*
|
|
87983
|
+
* **Loading more.** `load-more` sends `helix-load-more` once the end of the
|
|
87984
|
+
* table comes within a screen of view, in the box that scrolls it or the
|
|
87985
|
+
* page, once for each number of rows: add rows and it can send it again. Set
|
|
87986
|
+
* `loading` while you fetch, and the table asks for nothing until it clears.
|
|
87987
|
+
*
|
|
87240
87988
|
* When the rows did not load, set `error-text`, such as "The orders did not
|
|
87241
87989
|
* load", and put a button that tries again in the `error` slot. The line shows
|
|
87242
87990
|
* after the rows in place of the empty and loading lines, the live region says
|
|
@@ -87282,6 +88030,8 @@ export type CustomElementsSolidJs = {
|
|
|
87282
88030
|
* and a list here would be a second way to say what that says. This table's
|
|
87283
88031
|
* cells are markup, and a table written as rows of cells with no column
|
|
87284
88032
|
* declared in it has nowhere else to be sized from.
|
|
88033
|
+
* - `default-expanded`/`defaultExpanded`: The keys of the rows whose rows are shown at the start, separated by
|
|
88034
|
+
* commas. Used until `expanded` is set.
|
|
87285
88035
|
* - `default-selected`/`defaultSelected`: The keys selected at the start, separated by commas. Used until `selected`
|
|
87286
88036
|
* is set.
|
|
87287
88037
|
* - `default-sort`/`defaultSort`: The starting sort order, used until `sort` is set.
|
|
@@ -87294,6 +88044,11 @@ export type CustomElementsSolidJs = {
|
|
|
87294
88044
|
* While it is set, a line after the rows shows it, or your own content in the
|
|
87295
88045
|
* `error` slot, in place of the empty and loading lines, and the live region
|
|
87296
88046
|
* says it.
|
|
88047
|
+
* - `expand-column-label`/`expandColumnLabel`: The name of the heading over the disclosure buttons.
|
|
88048
|
+
* - `expanded`: The keys of the rows whose rows are shown, separated by commas, in a table
|
|
88049
|
+
* whose rows nest. A press on a row's disclosure button asks first, and
|
|
88050
|
+
* `default-expanded` seeds what this element then owns.
|
|
88051
|
+
* - `expand-row-label`/`expandRowLabel`: The name of a row's disclosure button. `{row}` is the words of the row's first cell.
|
|
87297
88052
|
* - `fallback-label`/`fallbackLabel`: The table's name where neither `label` nor an `aria-label` or
|
|
87298
88053
|
* `aria-labelledby` on the host gives it one.
|
|
87299
88054
|
* - `grid`: Makes the table a grid: one tab stop, and the arrow keys, Home, End and the
|
|
@@ -87307,6 +88062,8 @@ export type CustomElementsSolidJs = {
|
|
|
87307
88062
|
*
|
|
87308
88063
|
* An `aria-label` or `aria-labelledby` on the host names the table too, and
|
|
87309
88064
|
* wins over this.
|
|
88065
|
+
* - `load-more`/`loadMore`: Sends `helix-load-more` once the end of the table comes within a screen
|
|
88066
|
+
* of view, so you can add the next rows as a reader nears them.
|
|
87310
88067
|
* - `moved-label`/`movedLabel`: What screen readers hear each time a key moves a held row, in a
|
|
87311
88068
|
* `reorderable` table. `{name}` is the row's words, `{position}` the place it
|
|
87312
88069
|
* would go, counting from 1, and `{count}` the number of rows.
|
|
@@ -87320,6 +88077,8 @@ export type CustomElementsSolidJs = {
|
|
|
87320
88077
|
* - `selectable`: Adds a column of checkboxes for selecting rows. Each row is known by its
|
|
87321
88078
|
* `value`, and by its place among the rows as written where it has none.
|
|
87322
88079
|
* - `select-all-label`/`selectAllLabel`: The name of the checkbox in the heading that selects every row.
|
|
88080
|
+
* - `select-column-label`/`selectColumnLabel`: The name of the heading over the checkboxes under
|
|
88081
|
+
* `selection-mode="single"`, where it holds no checkbox of its own.
|
|
87323
88082
|
* - `selected`: The keys of the selected rows, separated by commas.
|
|
87324
88083
|
*
|
|
87325
88084
|
* A reader's press fires `helix-select` first, and refusing it leaves the
|
|
@@ -87329,6 +88088,11 @@ export type CustomElementsSolidJs = {
|
|
|
87329
88088
|
* rows are chosen, written in the locale, and a language that needs plural
|
|
87330
88089
|
* forms writes them: `{count, plural, one {# wybrany} few {# wybrane} many
|
|
87331
88090
|
* {# wybranych} other {# wybranego}}`.
|
|
88091
|
+
* - `selection-behavior`/`selectionBehavior`: What a press on a row, or in a `grid` table a key that moves to one, does
|
|
88092
|
+
* to the rows already selected: `toggle`, the default, leaves them to the
|
|
88093
|
+
* checkboxes, and `replace` selects the row alone.
|
|
88094
|
+
* - `selection-mode`/`selectionMode`: How many rows a `selectable` table selects: `multiple`, the default, or
|
|
88095
|
+
* `single`, one at a time.
|
|
87332
88096
|
* - `select-row-label`/`selectRowLabel`: The name of a row's checkbox. `{row}` is replaced with the words of the
|
|
87333
88097
|
* row's first cell.
|
|
87334
88098
|
* - `sort`: The sort order, as `field:direction`, where `field` is a sortable column's
|
|
@@ -87377,11 +88141,14 @@ export type CustomElementsSolidJs = {
|
|
|
87377
88141
|
* Events that will be emitted by the component.
|
|
87378
88142
|
*
|
|
87379
88143
|
* - `helix-before-reorder`: Fired when a row is dropped at a new place, in a `reorderable` table, with every row's key in the new order. Cancelable: cancel it to keep the row where it is.
|
|
88144
|
+
* - `helix-before-toggle`: Fired from a row when its disclosure button is pressed, with whether it would be open in `detail.checked`. Cancelable: cancel it to keep the row as it is.
|
|
88145
|
+
* - `helix-load-more`: Fired, in a table with `load-more`, when the end of the table comes within a screen of view, once for each number of rows.
|
|
87380
88146
|
* - `helix-reorder`: 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.
|
|
87381
88147
|
* - `helix-select`: The selection is about to change. The event carries every selected key, separated by commas. Cancelable: cancel it to keep the current selection.
|
|
87382
88148
|
* - `helix-selected`: Fired after the selection changes, with every selected key, separated by commas.
|
|
87383
88149
|
* - `helix-sort`: A different sort order was requested, as `field:direction`, or empty for the order the rows were written in. Cancelable: cancel it to keep the current order.
|
|
87384
88150
|
* - `helix-sorted`: Fired after the sort order changes, with the new order.
|
|
88151
|
+
* - `helix-toggle`: Fired from a row once the rows under it are shown or hidden, with whether it is open in `detail.checked`.
|
|
87385
88152
|
*
|
|
87386
88153
|
* ## Slots
|
|
87387
88154
|
*
|
|
@@ -87425,6 +88192,7 @@ export type CustomElementsSolidJs = {
|
|
|
87425
88192
|
* - `drag-preview`: A copy of the row a pointer drags by its grip, which follows the pointer in the top layer until the row is let go, in a `reorderable` table. Hidden from assistive technology.
|
|
87426
88193
|
* - `empty`: The text shown when there are no rows.
|
|
87427
88194
|
* - `error`: The line shown after the rows while `error-text` is set, in place of the empty and loading text.
|
|
88195
|
+
* - `expand-head`: The heading over the disclosure buttons, in a table whose rows nest.
|
|
87428
88196
|
* - `grid-end`: An empty box after the rows, in a `grid` table. Tab focuses it on its way out of the table, so the key leaves from the end.
|
|
87429
88197
|
* - `grid-start`: An empty box before the rows, in a `grid` table. Shift with Tab focuses it on its way out of the table.
|
|
87430
88198
|
* - `grip-head`: The heading over the row grips, in a `reorderable` table.
|
|
@@ -87465,6 +88233,12 @@ export type CustomElementsSolidJs = {
|
|
|
87465
88233
|
* the drop indicator is, with the `dragging`, `drop-before`, and `drop-after`
|
|
87466
88234
|
* states.
|
|
87467
88235
|
*
|
|
88236
|
+
* **`parent` nests the row under another**, by that row's key. The table
|
|
88237
|
+
* then draws a column of disclosure buttons: a row with rows under it has one,
|
|
88238
|
+
* named by the table's `expand-row-label` and saying whether it is open with
|
|
88239
|
+
* `aria-expanded`, and its rows are drawn only while it is open. The cell is
|
|
88240
|
+
* indented by the row's depth through `--table-row-level`.
|
|
88241
|
+
*
|
|
87468
88242
|
* **`href` makes the whole row a link**, as a row action does in React Aria's
|
|
87469
88243
|
* table: a press anywhere on the row follows it, except on a link or a control
|
|
87470
88244
|
* of the row's own, and Control, Command or Shift open it the way they open a
|
|
@@ -87485,6 +88259,9 @@ export type CustomElementsSolidJs = {
|
|
|
87485
88259
|
* reached.
|
|
87486
88260
|
* - `href`: The URL a press on the row follows, which makes the whole row a link.
|
|
87487
88261
|
* Empty, the default, leaves presses to the row's cells.
|
|
88262
|
+
* - `parent`: The key of the row this one sits under, in a table whose rows nest: that
|
|
88263
|
+
* row's `value`, or its place among the rows where it has none. Empty, the
|
|
88264
|
+
* default, is a row at the top.
|
|
87488
88265
|
* - `rel`: The `rel` of the row's link. You set it yourself, as on an anchor.
|
|
87489
88266
|
* - `target`: Where the row's link opens, such as `_blank`.
|
|
87490
88267
|
* - `value`: The key the table's `selected` lists this row by. Left empty, the row is
|
|
@@ -87516,6 +88293,12 @@ export type CustomElementsSolidJs = {
|
|
|
87516
88293
|
*
|
|
87517
88294
|
* - `(default)`: The row's cells.
|
|
87518
88295
|
*
|
|
88296
|
+
* ## CSS Custom Properties
|
|
88297
|
+
*
|
|
88298
|
+
* CSS variables available for styling the component.
|
|
88299
|
+
*
|
|
88300
|
+
* - `--table-row-level`: Written by the row on its `expand` cell: how deep the row sits, from 1. Do not set it.
|
|
88301
|
+
*
|
|
87519
88302
|
* ## CSS Parts
|
|
87520
88303
|
*
|
|
87521
88304
|
* Custom selectors for styling elements within the component.
|
|
@@ -87531,6 +88314,9 @@ export type CustomElementsSolidJs = {
|
|
|
87531
88314
|
* - `checkbox-mark-checked`: Added to `checkbox-mark` while its box is checked.
|
|
87532
88315
|
* - `checkbox-mark-dash`: Added to `checkbox-mark` while it draws the dash, which it keeps until its box is checked.
|
|
87533
88316
|
* - `checkbox-mark-indeterminate`: Added to `checkbox-mark` while only some rows are selected.
|
|
88317
|
+
* - `expand`: The cell that holds the row's disclosure button, in a table whose rows nest. It carries `--table-row-level`, the row's depth from 1.
|
|
88318
|
+
* - `expand-button`: The button that shows and hides the rows under this one.
|
|
88319
|
+
* - `expand-mark`: The caret on the disclosure button, which points along the line, turned down by the styled tier while the row is open.
|
|
87534
88320
|
* - `grip`: The cell that holds the row's grip, in a `reorderable` table.
|
|
87535
88321
|
* - `grip-button`: The button that moves the row.
|
|
87536
88322
|
* - `grip-mark`: The icon on the grip.
|
|
@@ -87544,6 +88330,7 @@ export type CustomElementsSolidJs = {
|
|
|
87544
88330
|
* - `dragging`: The row is being moved, in a `reorderable` table.
|
|
87545
88331
|
* - `drop-after`: The row being moved goes after this one when it is dropped.
|
|
87546
88332
|
* - `drop-before`: The row being moved goes before this one when it is dropped.
|
|
88333
|
+
* - `expanded`: While the rows under this one are shown.
|
|
87547
88334
|
* - `link`: While the row has `href` and is not `disabled`, so a press on it follows the link.
|
|
87548
88335
|
* - `selected`: While the row is selected, in a `selectable` table.
|
|
87549
88336
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
@@ -87802,14 +88589,15 @@ export type CustomElementsSolidJs = {
|
|
|
87802
88589
|
*
|
|
87803
88590
|
* Methods that can be called to access component functionality.
|
|
87804
88591
|
*
|
|
87805
|
-
* - `requestActive(next: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
88592
|
+
* - `requestActive(next: string, cause?: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
87806
88593
|
*
|
|
87807
88594
|
* Announces before it acts, so `preventDefault()` on the `helix-before-activate` is
|
|
87808
88595
|
* a refusal and nothing moves. Unlike a native control, nothing has moved
|
|
87809
88596
|
* by the time this runs, so refusing is simply not writing: there is
|
|
87810
88597
|
* nothing to put back. Nobody refusing means the set updates itself,
|
|
87811
88598
|
* whether or not a consumer declared `active`, a declared property being a
|
|
87812
|
-
* seed and a correction.
|
|
88599
|
+
* seed and a correction. `cause` says why, where the family names its
|
|
88600
|
+
* causes, and reaches the event as `detail.cause`.
|
|
87813
88601
|
*
|
|
87814
88602
|
* ## CSS Parts
|
|
87815
88603
|
*
|
|
@@ -89452,7 +90240,14 @@ export type CustomElementsSolidJs = {
|
|
|
89452
90240
|
* counting parent, and no script. `Steps` and `Breadcrumbs` work the same way.
|
|
89453
90241
|
*
|
|
89454
90242
|
* `tone` sets the kind of event and is the only thing that colors the mark. It
|
|
89455
|
-
* uses the same values as `Announcement`.
|
|
90243
|
+
* uses the same values as `Announcement`. **A screen reader hears the tone as
|
|
90244
|
+
* a word**, from `tone-labels`: the mark is an image named "Error",
|
|
90245
|
+
* "Information", "Success" or "Warning", so the color is not the only place
|
|
90246
|
+
* the meaning is. `neutral` and `primary` say nothing unless you name them.
|
|
90247
|
+
*
|
|
90248
|
+
* **`pending` marks an event that has not happened yet**, such as one that is
|
|
90249
|
+
* scheduled. The mark is the open circle, and a screen reader hears
|
|
90250
|
+
* `pending-label`, "Scheduled", with the tone's word.
|
|
89456
90251
|
*
|
|
89457
90252
|
* ## Attributes & Properties
|
|
89458
90253
|
*
|
|
@@ -89464,11 +90259,20 @@ export type CustomElementsSolidJs = {
|
|
|
89464
90259
|
* Whatever `<time>` accepts, which is a date, a time, both, a duration or a
|
|
89465
90260
|
* week. Unset, the label is written as it was given and nothing claims to
|
|
89466
90261
|
* know what instant it names.
|
|
90262
|
+
* - `pending`: Marks an event that has not happened yet, such as one that is scheduled.
|
|
90263
|
+
* The mark is the open circle, and a screen reader hears `pending-label`.
|
|
90264
|
+
* - `pending-label`/`pendingLabel`: What a screen reader hears for an entry that is `pending`.
|
|
89467
90265
|
* - `relative`: Writes the time as how long ago it was, or how long until it, from
|
|
89468
90266
|
* `datetime`, where the `time` slot is empty: `long` ("3 hours ago"),
|
|
89469
90267
|
* `short` ("3 hr. ago") or `narrow` ("3h ago"). Set with no value, it is
|
|
89470
90268
|
* `long`. The words move on as they go stale.
|
|
89471
|
-
* - `tone`: The kind of event. It sets the color of the mark and
|
|
90269
|
+
* - `tone`: The kind of event. It sets the color of the mark, and a screen reader
|
|
90270
|
+
* hears it as the word `tone-labels` gives it.
|
|
90271
|
+
* - `tone-label`/`toneLabel`: What a screen reader is told this entry's tone is, such as "Failed".
|
|
90272
|
+
* Absent is the tone's word in `tone-labels`.
|
|
90273
|
+
* - `tone-labels`/`toneLabels`: What a screen reader is told each tone is, by the tone's name, written as
|
|
90274
|
+
* JSON in the attribute: `tone-labels='{"danger":"Failed"}'`. A tone with no
|
|
90275
|
+
* word is not read, which is `neutral` and `primary` in English.
|
|
89472
90276
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
89473
90277
|
*
|
|
89474
90278
|
* **Named `whenSettled` because `settled` is taken four times over**, by
|
|
@@ -89495,7 +90299,7 @@ export type CustomElementsSolidJs = {
|
|
|
89495
90299
|
* Areas where markup can be added to the component.
|
|
89496
90300
|
*
|
|
89497
90301
|
* - `(default)`: What happened.
|
|
89498
|
-
* - `marker`: The mark on the line. Defaults to a dot, which is the slot's fallback content.
|
|
90302
|
+
* - `marker`: The mark on the line. Defaults to a dot, which is the slot's fallback content. A mark you slot is read as the tone's word, where the entry has one.
|
|
89499
90303
|
* - `time`: When it happened, written the way you want it shown.
|
|
89500
90304
|
*
|
|
89501
90305
|
* ## CSS Parts
|
|
@@ -89504,7 +90308,7 @@ export type CustomElementsSolidJs = {
|
|
|
89504
90308
|
*
|
|
89505
90309
|
* - `content`: What happened, and the time above it.
|
|
89506
90310
|
* - `dot`: The dot drawn when no marker is slotted.
|
|
89507
|
-
* - `marker`: The mark on the line.
|
|
90311
|
+
* - `marker`: The mark on the line. An image named by the tone's word, and by `pending-label`, where either applies.
|
|
89508
90312
|
* - `rail`: The column that holds the mark and the line. Draw the two halves of the line with `::part(rail)::before` and `::part(rail)::after` in your stylesheet. This tier ships no CSS and renders no extra box for the line.
|
|
89509
90313
|
* - `time`: When it happened.
|
|
89510
90314
|
*
|
|
@@ -91468,14 +92272,15 @@ export type CustomElementsSolidJs = {
|
|
|
91468
92272
|
*
|
|
91469
92273
|
* Methods that can be called to access component functionality.
|
|
91470
92274
|
*
|
|
91471
|
-
* - `requestActive(next: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
92275
|
+
* - `requestActive(next: string, cause?: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
91472
92276
|
*
|
|
91473
92277
|
* Announces before it acts, so `preventDefault()` on the `helix-before-activate` is
|
|
91474
92278
|
* a refusal and nothing moves. Unlike a native control, nothing has moved
|
|
91475
92279
|
* by the time this runs, so refusing is simply not writing: there is
|
|
91476
92280
|
* nothing to put back. Nobody refusing means the set updates itself,
|
|
91477
92281
|
* whether or not a consumer declared `active`, a declared property being a
|
|
91478
|
-
* seed and a correction.
|
|
92282
|
+
* seed and a correction. `cause` says why, where the family names its
|
|
92283
|
+
* causes, and reaches the event as `detail.cause`.
|
|
91479
92284
|
*
|
|
91480
92285
|
* ## CSS Parts
|
|
91481
92286
|
*
|
|
@@ -91675,6 +92480,12 @@ export type CustomElementsSolidJs = {
|
|
|
91675
92480
|
* Written by the playlist rather than by the entry, the way an option's
|
|
91676
92481
|
* selection is: an entry that made itself current would be a second answer to
|
|
91677
92482
|
* which one is playing. (property only)
|
|
92483
|
+
* - `focusable`: Whether the entry holds the playlist's tab stop. Unset, every entry is in
|
|
92484
|
+
* the tab order, which is what a server renders.
|
|
92485
|
+
*
|
|
92486
|
+
* **Written by the playlist, with no attribute, and it reaches the button.**
|
|
92487
|
+
* The playlist gives the stop to the entry a reader last focused, or to the
|
|
92488
|
+
* current one, and the arrow keys reach the rest. (property only)
|
|
91678
92489
|
* - `text`: The entry's name: its own text, without the content in its named slots.
|
|
91679
92490
|
*
|
|
91680
92491
|
* `textContent` takes the whole subtree: a row with a duration in `meta`
|
|
@@ -91716,6 +92527,7 @@ export type CustomElementsSolidJs = {
|
|
|
91716
92527
|
* Areas where markup can be added to the component.
|
|
91717
92528
|
*
|
|
91718
92529
|
* - `(default)`: The entry's name.
|
|
92530
|
+
* - `indicator`: A mark shown on the entry that is playing, such as an equalizer icon. Rendered only while the entry is current.
|
|
91719
92531
|
* - `media`: A thumbnail. Defaults to an image of `poster`.
|
|
91720
92532
|
* - `meta`: Content after the name, such as a duration or a date.
|
|
91721
92533
|
*
|
|
@@ -91731,6 +92543,7 @@ export type CustomElementsSolidJs = {
|
|
|
91731
92543
|
* Custom selectors for styling elements within the component.
|
|
91732
92544
|
*
|
|
91733
92545
|
* - `container`: The list item that holds the button.
|
|
92546
|
+
* - `indicator`: The `indicator` slot, at the end of the row, rendered only while the entry is playing. It draws no box until you give it one.
|
|
91734
92547
|
* - `item`: The row, which is a button.
|
|
91735
92548
|
* - `item-current`: Added to `item` for the entry that is playing.
|
|
91736
92549
|
* - `label`: The name and the content after it.
|
|
@@ -91860,19 +92673,31 @@ export type CustomElementsSolidJs = {
|
|
|
91860
92673
|
* - the player reaches the end.
|
|
91861
92674
|
*
|
|
91862
92675
|
* On `ended` the playlist advances and the next clip starts playing, because
|
|
91863
|
-
* the user already pressed play once. `
|
|
92676
|
+
* the user already pressed play once. `no-advance` turns that off, and the
|
|
92677
|
+
* playlist stays on the entry that ended. `repeat` decides what happens at the
|
|
91864
92678
|
* end: `one` plays the same entry again, and `all` goes from the last entry
|
|
91865
92679
|
* back to the first. Without it, the playlist stops on the last entry and
|
|
91866
92680
|
* sends `helix-end`. `shuffle` plays the entries in a random order, starting
|
|
91867
92681
|
* from the one that is current, and `previous` retraces that order.
|
|
91868
92682
|
*
|
|
92683
|
+
* **`helix-before-activate` says why the playlist is moving**, in
|
|
92684
|
+
* `detail.cause`: `press` for an entry or a menu choice, `next` and
|
|
92685
|
+
* `previous` for the player's controls and the methods, `ended` at the end of
|
|
92686
|
+
* a clip, and `removed` when the current entry leaves the playlist. Cancel an
|
|
92687
|
+
* `ended` move to show your own "Up next" countdown, then call `next()`.
|
|
92688
|
+
*
|
|
92689
|
+
* **Removing the current entry moves the playlist on**, to the entry after it,
|
|
92690
|
+
* or to the one before it when it was the last. A clip that was playing keeps
|
|
92691
|
+
* playing in the entry that takes its place.
|
|
92692
|
+
*
|
|
91869
92693
|
* **The player is named by the current entry**, and the device's own media
|
|
91870
92694
|
* controls show the entry as the title. A player you gave a `label` keeps
|
|
91871
92695
|
* your name, and only the title follows the entry.
|
|
91872
92696
|
*
|
|
91873
|
-
* **Keyboard.**
|
|
91874
|
-
*
|
|
91875
|
-
*
|
|
92697
|
+
* **Keyboard.** The entries take one stop in the tab order: the entry you
|
|
92698
|
+
* last focused, or the current entry before you have focused one. Enter or
|
|
92699
|
+
* Space plays it. The arrow keys move focus to the entry before or after, and
|
|
92700
|
+
* Home and End to the first and the last, passing over disabled entries. The
|
|
91876
92701
|
* current entry carries `aria-current`. While focus is on the player, the
|
|
91877
92702
|
* player's own keys work, and `Video` lists them, and Shift with N or P plays
|
|
91878
92703
|
* the next or the previous entry. The player's previous and next controls
|
|
@@ -91887,7 +92712,11 @@ export type CustomElementsSolidJs = {
|
|
|
91887
92712
|
*
|
|
91888
92713
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
91889
92714
|
*
|
|
92715
|
+
* - `empty-label`/`emptyLabel`: What the playlist says while it has no entries. The `empty` slot replaces it.
|
|
91890
92716
|
* - `label`: The list's name, read by screen readers.
|
|
92717
|
+
* - `no-advance`/`noAdvance`: Stays on an entry when its clip ends, where the playlist would otherwise
|
|
92718
|
+
* play the next one. The player's controls, a press, and `next()` still
|
|
92719
|
+
* move. `repeat="one"` still plays the entry again.
|
|
91891
92720
|
* - `playing-label`/`playingLabel`: What the live region says when the playlist moves to another entry.
|
|
91892
92721
|
* `{title}` is the entry's name.
|
|
91893
92722
|
*
|
|
@@ -91947,7 +92776,7 @@ export type CustomElementsSolidJs = {
|
|
|
91947
92776
|
* Events that will be emitted by the component.
|
|
91948
92777
|
*
|
|
91949
92778
|
* - `helix-activate`: The current entry changed. The playlist already holds the new entry when this is sent, and `detail.previous` is the entry it left. `currentEntry` is the entry itself, with its `src`, `poster` and name.
|
|
91950
|
-
* - `helix-before-activate`: The current entry is about to change. Cancelable: cancel it to keep the current entry.
|
|
92779
|
+
* - `helix-before-activate`: The current entry is about to change, and `detail.cause` says why: `press`, `next`, `previous`, `ended`, or `removed`. Cancelable: cancel it to keep the current entry.
|
|
91951
92780
|
* - `helix-end`: The last entry finished playing, and the playlist stopped there. Not sent while `repeat` is set.
|
|
91952
92781
|
*
|
|
91953
92782
|
* ## Slots
|
|
@@ -91955,6 +92784,7 @@ export type CustomElementsSolidJs = {
|
|
|
91955
92784
|
* Areas where markup can be added to the component.
|
|
91956
92785
|
*
|
|
91957
92786
|
* - `(default)`: The entries.
|
|
92787
|
+
* - `empty`: Shown while the playlist has no entries. Defaults to `empty-label`.
|
|
91958
92788
|
* - `player`: The player that plays the entries.
|
|
91959
92789
|
*
|
|
91960
92790
|
* ## Methods
|
|
@@ -91966,19 +92796,21 @@ export type CustomElementsSolidJs = {
|
|
|
91966
92796
|
* entry otherwise.
|
|
91967
92797
|
* - `previous() => void`: Moves to the previous entry and plays it, as the player's previous control
|
|
91968
92798
|
* does. Under `shuffle` it goes back through the order that played.
|
|
91969
|
-
* - `requestActive(next: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
92799
|
+
* - `requestActive(next: string, cause?: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
91970
92800
|
*
|
|
91971
92801
|
* Announces before it acts, so `preventDefault()` on the `helix-before-activate` is
|
|
91972
92802
|
* a refusal and nothing moves. Unlike a native control, nothing has moved
|
|
91973
92803
|
* by the time this runs, so refusing is simply not writing: there is
|
|
91974
92804
|
* nothing to put back. Nobody refusing means the set updates itself,
|
|
91975
92805
|
* whether or not a consumer declared `active`, a declared property being a
|
|
91976
|
-
* seed and a correction.
|
|
92806
|
+
* seed and a correction. `cause` says why, where the family names its
|
|
92807
|
+
* causes, and reaches the event as `detail.cause`.
|
|
91977
92808
|
*
|
|
91978
92809
|
* ## CSS Parts
|
|
91979
92810
|
*
|
|
91980
92811
|
* Custom selectors for styling elements within the component.
|
|
91981
92812
|
*
|
|
92813
|
+
* - `empty`: The box that holds the `empty` slot, drawn while there are no entries.
|
|
91982
92814
|
* - `items`: The list of entries.
|
|
91983
92815
|
* - `live`: A live region that says which entry plays after the playlist moves.
|
|
91984
92816
|
* - `player`: The region that holds the player.
|
|
@@ -92461,8 +93293,10 @@ export type CustomElementsSolidJs = {
|
|
|
92461
93293
|
* **A grid.** `columns` lays the items out that many to a line, as a grid of
|
|
92462
93294
|
* equal columns, and windows the set a line at a time, as React Aria's grid
|
|
92463
93295
|
* layout does. Each item draws one element, a cell of the grid, and
|
|
92464
|
-
* `estimate` is the height of a line.
|
|
92465
|
-
*
|
|
93296
|
+
* `estimate` is the height of a line. `min-column-width` lays out as many
|
|
93297
|
+
* columns as fit the box instead, as React Aria's grid layout does with its
|
|
93298
|
+
* smallest item size, and follows the box as it resizes. `gap` spaces the rows, and the columns
|
|
93299
|
+
* of a grid, by a number of pixels the list counts in each row's place.
|
|
92466
93300
|
*
|
|
92467
93301
|
* **Keyboard.** The list is one tab stop.
|
|
92468
93302
|
*
|
|
@@ -92473,6 +93307,7 @@ export type CustomElementsSolidJs = {
|
|
|
92473
93307
|
* | Home, End | Moves to the first or the last item. |
|
|
92474
93308
|
* | Page Down, Page Up | Moves by the number of items, or of lines in a grid, on screen. |
|
|
92475
93309
|
* | A letter or a word | Moves to the next item whose text starts with what you typed. |
|
|
93310
|
+
* | Escape | Lets go of every chosen item, in a list with `selection-mode`. |
|
|
92476
93311
|
* | Tab | Moves into the focused row's own links and buttons, then out of the list. |
|
|
92477
93312
|
*
|
|
92478
93313
|
* An item that is not drawn is scrolled into view and focused, so a keyboard
|
|
@@ -92489,12 +93324,23 @@ export type CustomElementsSolidJs = {
|
|
|
92489
93324
|
* from: `single` selects one item and `multiple` any number. Space or a press
|
|
92490
93325
|
* selects an item, Shift with Space, an arrow, Home, End or a press takes in
|
|
92491
93326
|
* the items from the last one chosen, and Control or Command with A selects
|
|
92492
|
-
* them all, in `multiple`.
|
|
92493
|
-
*
|
|
92494
|
-
*
|
|
92495
|
-
* `
|
|
92496
|
-
*
|
|
92497
|
-
*
|
|
93327
|
+
* them all, in `multiple`. Escape lets go of every chosen item, and keeps the
|
|
93328
|
+
* key from the dialog or menu around the list while there was something to
|
|
93329
|
+
* let go of. `value` holds the chosen items' keys, separated by commas, in
|
|
93330
|
+
* the order of the set: `key-field` names each item's key, and a string or a
|
|
93331
|
+
* number item is its own key. A change asks with `helix-before-change` and
|
|
93332
|
+
* tells with `change`. Each row is an `option` marked `aria-selected`, so a
|
|
93333
|
+
* row's own links and buttons are not reached there: keep those to a list
|
|
93334
|
+
* without `selection-mode`.
|
|
93335
|
+
*
|
|
93336
|
+
* `selection-behavior="replace"` selects the item pressed alone, as a file
|
|
93337
|
+
* list does, and the arrow keys carry the selection with them. Control or
|
|
93338
|
+
* Command with a press or with Space adds or takes out one item, and with an
|
|
93339
|
+
* arrow moves without selecting.
|
|
93340
|
+
*
|
|
93341
|
+
* **Disabled items.** `disabled-keys` names items by their keys, separated by
|
|
93342
|
+
* commas. Their rows carry `aria-disabled`, the keys and typing pass over
|
|
93343
|
+
* them, and a press, Space, or Control with A does not select them.
|
|
92498
93344
|
*
|
|
92499
93345
|
* **Loading more.** `helix-range-change` fires as the items on screen change,
|
|
92500
93346
|
* and `range` holds them. `helix-load-more` fires once a reader is within one
|
|
@@ -92536,6 +93382,8 @@ export type CustomElementsSolidJs = {
|
|
|
92536
93382
|
* - `columns`: How many items a line holds. One, the default, is a list; more lays the
|
|
92537
93383
|
* items out as a grid of that many equal columns, windowed a line at a
|
|
92538
93384
|
* time, with Left and Right moving along a line.
|
|
93385
|
+
* - `disabled-keys`/`disabledKeys`: The keys of the items a reader cannot choose or move to, separated by
|
|
93386
|
+
* commas, as `value` writes keys. Their rows carry `aria-disabled`.
|
|
92539
93387
|
* - `empty-label`/`emptyLabel`: The text of the row shown when there are no items and none are loading,
|
|
92540
93388
|
* where the `empty` slot is empty. Empty, the default, shows no row.
|
|
92541
93389
|
* - `estimate`: The height of one row, in pixels, used to find the row at a scroll offset.
|
|
@@ -92544,6 +93392,10 @@ export type CustomElementsSolidJs = {
|
|
|
92544
93392
|
* right whenever the rows really are one height and is the cheaper of the two.
|
|
92545
93393
|
* - `for`: The id of the script element that holds the items as JSON. `items` wins
|
|
92546
93394
|
* where both are set.
|
|
93395
|
+
* - `gap`: The space between two rows, and between two columns in a grid, in
|
|
93396
|
+
* pixels. The list counts it in each row's place, so a gap does not walk
|
|
93397
|
+
* the rows away from the scroll position the way a margin on each row
|
|
93398
|
+
* would.
|
|
92547
93399
|
* - `key-field`/`keyField`: The field of each item that is its key in `value`, as a key or a path of
|
|
92548
93400
|
* keys. Empty reads a string or a number item as its own key, and any
|
|
92549
93401
|
* other item by its place in the set.
|
|
@@ -92568,6 +93420,12 @@ export type CustomElementsSolidJs = {
|
|
|
92568
93420
|
* disagree with itself; measuring is what a set of genuinely different
|
|
92569
93421
|
* heights needs and costs a read of each row as it renders. A list of
|
|
92570
93422
|
* one-line rows should leave this alone.
|
|
93423
|
+
* - `min-column-width`/`minColumnWidth`: The narrowest a column of a grid may be, in pixels. Set, the list lays
|
|
93424
|
+
* out as many columns as fit the box at that width, at least one, and
|
|
93425
|
+
* follows the box as it resizes, which `columns` then does not decide.
|
|
93426
|
+
* - `selection-behavior`/`selectionBehavior`: What a press does to the items already chosen: `toggle` adds or takes out
|
|
93427
|
+
* the item, and `replace` selects it alone and lets the arrow keys carry the
|
|
93428
|
+
* selection, with Control or Command adding or taking out one item.
|
|
92571
93429
|
* - `selection-mode`/`selectionMode`: Makes the list a list box a reader chooses from: `single` selects one
|
|
92572
93430
|
* item, and `multiple` any number. Unset is a list a reader reads.
|
|
92573
93431
|
* - `text-field`/`textField`: The field of each item that typing matches, as a key or a path of keys
|
|
@@ -92691,6 +93549,14 @@ export type CustomCssProperties = {
|
|
|
92691
93549
|
"--carousel-run-end"?: (string) | undefined;
|
|
92692
93550
|
/** The narrowest a slide may be. `per-view="auto"` uses it to fit slides into the track. It must be a length, because the stylesheet divides by it. When unset, it is the whole track, which shows one slide across. */
|
|
92693
93551
|
"--carousel-slide-min"?: (string) | undefined;
|
|
93552
|
+
/** Written by the block on each `number` in a `wrap` block with `line-numbers`: how tall the line it numbers is laid out. Do not set it. */
|
|
93553
|
+
"--code-block-line-size"?: (string) | undefined;
|
|
93554
|
+
/** Written by the block on each `mark`: how wide the code is, scrolled part included. Do not set it. */
|
|
93555
|
+
"--code-block-mark-inline-size"?: (string) | undefined;
|
|
93556
|
+
/** Written by the block on each `mark`: how tall its run of lines is. Do not set it. */
|
|
93557
|
+
"--code-block-mark-size"?: (string) | undefined;
|
|
93558
|
+
/** Written by the block on each `mark`: how far down the code its run of lines starts. Do not set it. */
|
|
93559
|
+
"--code-block-mark-start"?: (string) | undefined;
|
|
92694
93560
|
/** The chosen color, painted over the checkerboard that shows transparency. */
|
|
92695
93561
|
"--color-input-swatch"?: (string) | undefined;
|
|
92696
93562
|
/** The chosen brightness, 0 to 100, as a percentage. */
|
|
@@ -92827,6 +93693,8 @@ export type CustomCssProperties = {
|
|
|
92827
93693
|
"--table-cell-align"?: (string) | undefined;
|
|
92828
93694
|
/** The column track list the table works out from its columns. The component writes it inline on the element that reads it, so setting it has no effect. Set `columns` to change the tracks. */
|
|
92829
93695
|
"--table-template"?: (string) | undefined;
|
|
93696
|
+
/** Written by the row on its `expand` cell: how deep the row sits, from 1. Do not set it. */
|
|
93697
|
+
"--table-row-level"?: (string) | undefined;
|
|
92830
93698
|
/** How long this message stays, in milliseconds, for a progress hint. */
|
|
92831
93699
|
"--toast-duration"?: (string) | undefined;
|
|
92832
93700
|
/** How far a swipe has moved the message across, in pixels, toward the right. */
|