@fusion.dev/helix 0.160.0 → 0.161.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 +2416 -247
- package/dist/chat/message/chat-message.css.js +1 -1
- package/dist/chat/root/chat-root.css.js +6 -1
- package/dist/code-block/root/code-block-root.css.js +10 -3
- package/dist/code-block/root/code-block-root.d.ts +4 -10
- package/dist/code-block/root/code-block-root.js +0 -8
- package/dist/element-events.generated.js +4 -0
- package/dist/table/root/table-root.css.js +2 -1
- package/dist/table/row/table-row.css.js +8 -2
- package/dist/table/row/table-row.d.ts +2 -0
- package/dist/timeline/item/timeline-item.css.js +5 -1
- package/dist/video-playlist/root/video-playlist-root.css.js +1 -1
- package/dist/video-playlist/root/video-playlist-root.d.ts +2 -0
- package/dist/virtual-list/root/virtual-list-root.css.js +1 -1
- package/dist/virtual-list/root/virtual-list-root.d.ts +1 -0
- package/lint.json +1 -1
- package/package.json +6 -6
- package/types/jsx.d.ts +710 -66
- package/types/vue.d.ts +233 -12
- package/types/words.d.ts +79 -0
package/types/jsx.d.ts
CHANGED
|
@@ -4528,6 +4528,10 @@ what the controls drive rather than the mechanism. */
|
|
|
4528
4528
|
/** The name of the group of controls, read by screen readers, which names
|
|
4529
4529
|
what the controls drive rather than the mechanism. */
|
|
4530
4530
|
controlsLabel?: (HelixCanvas["controlsLabel"]) | undefined;
|
|
4531
|
+
/** What screen readers hear after a copy, with `{count}` for the cards copied. */
|
|
4532
|
+
"copied-label"?: (HelixCanvas["copiedLabel"]) | undefined;
|
|
4533
|
+
/** What screen readers hear after a copy, with `{count}` for the cards copied. */
|
|
4534
|
+
copiedLabel?: (HelixCanvas["copiedLabel"]) | undefined;
|
|
4531
4535
|
/** The board's name where `label` is empty. */
|
|
4532
4536
|
"fallback-label"?: (HelixCanvas["fallbackLabel"]) | undefined;
|
|
4533
4537
|
/** The board's name where `label` is empty. */
|
|
@@ -4615,6 +4619,10 @@ walk the cards. */
|
|
|
4615
4619
|
/** The text announced when a connection's end is picked up, with `{from}` and
|
|
4616
4620
|
`{to}`. */
|
|
4617
4621
|
reconnectingLabel?: (HelixCanvas["reconnectingLabel"]) | undefined;
|
|
4622
|
+
/** What screen readers hear after a move or a resize is made again. */
|
|
4623
|
+
"redone-label"?: (HelixCanvas["redoneLabel"]) | undefined;
|
|
4624
|
+
/** What screen readers hear after a move or a resize is made again. */
|
|
4625
|
+
redoneLabel?: (HelixCanvas["redoneLabel"]) | undefined;
|
|
4618
4626
|
/** What screen readers hear after a key resizes a card, with `{name}` for the
|
|
4619
4627
|
card and `{width}` and `{height}` for its new size, in the document's
|
|
4620
4628
|
units. */
|
|
@@ -4717,6 +4725,10 @@ told the same. A tone left out is not read. */
|
|
|
4717
4725
|
"two-finger-hint-label"?: (HelixCanvas["twoFingerHintLabel"]) | undefined;
|
|
4718
4726
|
/** The hint shown when one finger swipes over the board with `gestures="cooperative"`. */
|
|
4719
4727
|
twoFingerHintLabel?: (HelixCanvas["twoFingerHintLabel"]) | undefined;
|
|
4728
|
+
/** What screen readers hear after a move or a resize is undone. */
|
|
4729
|
+
"undone-label"?: (HelixCanvas["undoneLabel"]) | undefined;
|
|
4730
|
+
/** What screen readers hear after a move or a resize is undone. */
|
|
4731
|
+
undoneLabel?: (HelixCanvas["undoneLabel"]) | undefined;
|
|
4720
4732
|
/** The line shown while the board, with `gestures="activate"`, has the gestures. */
|
|
4721
4733
|
"using-label"?: (HelixCanvas["usingLabel"]) | undefined;
|
|
4722
4734
|
/** The line shown while the board, with `gestures="activate"`, has the gestures. */
|
|
@@ -4972,6 +4984,10 @@ what the controls drive rather than the mechanism. */
|
|
|
4972
4984
|
/** The name of the group of controls, read by screen readers, which names
|
|
4973
4985
|
what the controls drive rather than the mechanism. */
|
|
4974
4986
|
"prop:controlsLabel"?: (HelixCanvas["controlsLabel"]) | undefined;
|
|
4987
|
+
/** What screen readers hear after a copy, with `{count}` for the cards copied. */
|
|
4988
|
+
"attr:copied-label"?: (HelixCanvas["copiedLabel"]) | undefined;
|
|
4989
|
+
/** What screen readers hear after a copy, with `{count}` for the cards copied. */
|
|
4990
|
+
"prop:copiedLabel"?: (HelixCanvas["copiedLabel"]) | undefined;
|
|
4975
4991
|
/** The board's name where `label` is empty. */
|
|
4976
4992
|
"attr:fallback-label"?: (HelixCanvas["fallbackLabel"]) | undefined;
|
|
4977
4993
|
/** The board's name where `label` is empty. */
|
|
@@ -5059,6 +5075,10 @@ walk the cards. */
|
|
|
5059
5075
|
/** The text announced when a connection's end is picked up, with `{from}` and
|
|
5060
5076
|
`{to}`. */
|
|
5061
5077
|
"prop:reconnectingLabel"?: (HelixCanvas["reconnectingLabel"]) | undefined;
|
|
5078
|
+
/** What screen readers hear after a move or a resize is made again. */
|
|
5079
|
+
"attr:redone-label"?: (HelixCanvas["redoneLabel"]) | undefined;
|
|
5080
|
+
/** What screen readers hear after a move or a resize is made again. */
|
|
5081
|
+
"prop:redoneLabel"?: (HelixCanvas["redoneLabel"]) | undefined;
|
|
5062
5082
|
/** What screen readers hear after a key resizes a card, with `{name}` for the
|
|
5063
5083
|
card and `{width}` and `{height}` for its new size, in the document's
|
|
5064
5084
|
units. */
|
|
@@ -5161,6 +5181,10 @@ told the same. A tone left out is not read. */
|
|
|
5161
5181
|
"attr:two-finger-hint-label"?: (HelixCanvas["twoFingerHintLabel"]) | undefined;
|
|
5162
5182
|
/** The hint shown when one finger swipes over the board with `gestures="cooperative"`. */
|
|
5163
5183
|
"prop:twoFingerHintLabel"?: (HelixCanvas["twoFingerHintLabel"]) | undefined;
|
|
5184
|
+
/** What screen readers hear after a move or a resize is undone. */
|
|
5185
|
+
"attr:undone-label"?: (HelixCanvas["undoneLabel"]) | undefined;
|
|
5186
|
+
/** What screen readers hear after a move or a resize is undone. */
|
|
5187
|
+
"prop:undoneLabel"?: (HelixCanvas["undoneLabel"]) | undefined;
|
|
5164
5188
|
/** The line shown while the board, with `gestures="activate"`, has the gestures. */
|
|
5165
5189
|
"attr:using-label"?: (HelixCanvas["usingLabel"]) | undefined;
|
|
5166
5190
|
/** The line shown while the board, with `gestures="activate"`, has the gestures. */
|
|
@@ -6790,6 +6814,10 @@ is the way back, and that is a part inside the shadow tree where a
|
|
|
6790
6814
|
stylesheet can already reach it. Measured rather than assumed: `label,
|
|
6791
6815
|
pinned` after upgrade against `label` from the server. */
|
|
6792
6816
|
pinned?: (HelixChat["pinned"]) | undefined;
|
|
6817
|
+
/** The words on the button that returns to the newest turn, where `resume` is empty. */
|
|
6818
|
+
"resume-label"?: (HelixChat["resumeLabel"]) | undefined;
|
|
6819
|
+
/** The words on the button that returns to the newest turn, where `resume` is empty. */
|
|
6820
|
+
resumeLabel?: (HelixChat["resumeLabel"]) | undefined;
|
|
6793
6821
|
/** How near the bottom still counts as being at it, in pixels.
|
|
6794
6822
|
|
|
6795
6823
|
A hook rather than a constant, because the right number depends on how tall
|
|
@@ -6950,6 +6978,10 @@ is the way back, and that is a part inside the shadow tree where a
|
|
|
6950
6978
|
stylesheet can already reach it. Measured rather than assumed: `label,
|
|
6951
6979
|
pinned` after upgrade against `label` from the server. */
|
|
6952
6980
|
"prop:pinned"?: (HelixChat["pinned"]) | undefined;
|
|
6981
|
+
/** The words on the button that returns to the newest turn, where `resume` is empty. */
|
|
6982
|
+
"attr:resume-label"?: (HelixChat["resumeLabel"]) | undefined;
|
|
6983
|
+
/** The words on the button that returns to the newest turn, where `resume` is empty. */
|
|
6984
|
+
"prop:resumeLabel"?: (HelixChat["resumeLabel"]) | undefined;
|
|
6953
6985
|
/** How near the bottom still counts as being at it, in pixels.
|
|
6954
6986
|
|
|
6955
6987
|
A hook rather than a constant, because the right number depends on how tall
|
|
@@ -7616,14 +7648,19 @@ Here rather than on each control. */
|
|
|
7616
7648
|
textContent?: (string | number) | undefined;
|
|
7617
7649
|
};
|
|
7618
7650
|
|
|
7619
|
-
|
|
7620
|
-
|
|
7651
|
+
/** `HelixCodeBlock` component event */
|
|
7652
|
+
export type HelixCodeBlockElementEvent<E = Event> = TypedEvent<
|
|
7653
|
+
HelixCodeBlock,
|
|
7654
|
+
E
|
|
7655
|
+
>;
|
|
7656
|
+
/** `helix-before-toggle` event type */
|
|
7657
|
+
export type HelixCodeBlockHelixBeforeToggleElementEvent =
|
|
7658
|
+
HelixCodeBlockElementEvent<HelixBeforeToggleEvent>;
|
|
7659
|
+
/** `helix-toggle` event type */
|
|
7660
|
+
export type HelixCodeBlockHelixToggleElementEvent =
|
|
7661
|
+
HelixCodeBlockElementEvent<HelixToggleEvent>;
|
|
7621
7662
|
|
|
7622
|
-
|
|
7623
|
-
significant in code and a wrapped line reads as two. For prose-like code, such as a long command or
|
|
7624
|
-
a log line, a wrap reads better than a scroll. Line numbers keep the lines
|
|
7625
|
-
unwrapped, since a wrapped line would take one number and several rows. */
|
|
7626
|
-
wrap?: (HelixCodeBlock["wrap"]) | undefined;
|
|
7663
|
+
export type HelixCodeBlockProps = {
|
|
7627
7664
|
/** The name of a block that scrolls, which is a tab stop while it does.
|
|
7628
7665
|
|
|
7629
7666
|
Where the block has a name, the scroller says it too, such as "Code,
|
|
@@ -7709,6 +7746,14 @@ copy, which takes the code alone. Reflected, because the stylesheet lays
|
|
|
7709
7746
|
the gutter out beside the code. A diff numbers its lines from its hunks
|
|
7710
7747
|
whether or not this is set. */
|
|
7711
7748
|
lineNumbers?: (HelixCodeBlock["lineNumbers"]) | undefined;
|
|
7749
|
+
/** The lines to mark, as numbers and ranges counted from 1, such as `2, 4-6`.
|
|
7750
|
+
Each run is drawn as a band behind its lines. Not for a diff, which marks
|
|
7751
|
+
its own changes. */
|
|
7752
|
+
"mark-lines"?: (HelixCodeBlock["markLines"]) | undefined;
|
|
7753
|
+
/** The lines to mark, as numbers and ranges counted from 1, such as `2, 4-6`.
|
|
7754
|
+
Each run is drawn as a band behind its lines. Not for a diff, which marks
|
|
7755
|
+
its own changes. */
|
|
7756
|
+
markLines?: (HelixCodeBlock["markLines"]) | undefined;
|
|
7712
7757
|
/** Whether to leave the copy button off.
|
|
7713
7758
|
|
|
7714
7759
|
Negative, which is not a style choice. A boolean attribute is true whenever
|
|
@@ -7755,6 +7800,22 @@ Absent is unified, each removal above its replacement, which fits any
|
|
|
7755
7800
|
width. `split` sets the old version beside the new one. Optional rather
|
|
7756
7801
|
than defaulted, so the host carries no attribute the consumer did not write. */
|
|
7757
7802
|
variant?: (HelixCodeBlock["variant"]) | undefined;
|
|
7803
|
+
/** Whether long lines wrap. Without it they scroll.
|
|
7804
|
+
|
|
7805
|
+
Off by default, so long lines scroll, because a line break can be
|
|
7806
|
+
significant in code and a wrapped line reads as two. For prose-like code,
|
|
7807
|
+
such as a long command or a log line, a wrap reads better than a scroll.
|
|
7808
|
+
With `line-numbers`, each number stands beside the line it numbers
|
|
7809
|
+
however many rows that line takes. Reflected, because the stylesheet
|
|
7810
|
+
wraps the lines. */
|
|
7811
|
+
wrap?: (HelixCodeBlock["wrap"]) | undefined;
|
|
7812
|
+
/** The wrap button's name, which it keeps whether it is pressed or not. */
|
|
7813
|
+
"wrap-label"?: (HelixCodeBlock["wrapLabel"]) | undefined;
|
|
7814
|
+
/** The wrap button's name, which it keeps whether it is pressed or not. */
|
|
7815
|
+
wrapLabel?: (HelixCodeBlock["wrapLabel"]) | undefined;
|
|
7816
|
+
/** Whether the header has a button that wraps the lines and unwraps them. The
|
|
7817
|
+
block draws a header for it even with no name. */
|
|
7818
|
+
wrappable?: (HelixCodeBlock["wrappable"]) | undefined;
|
|
7758
7819
|
/** Turns the code into highlighted markup, which the block draws in place of
|
|
7759
7820
|
the plain text.
|
|
7760
7821
|
|
|
@@ -7777,16 +7838,16 @@ in the slot, so the copy button copies it as written and a reader without
|
|
|
7777
7838
|
the script still has it. Not called on a server, which has no code to
|
|
7778
7839
|
read, nor for a diff. */
|
|
7779
7840
|
highlight?: (HelixCodeBlock["highlight"]) | undefined;
|
|
7841
|
+
|
|
7842
|
+
/** The wrap button was pressed, with the `wrap` it asks for in `detail.checked`. Cancelable: cancel it to keep the lines as they are. */
|
|
7843
|
+
"onhelix-before-toggle"?: ((
|
|
7844
|
+
e: HelixCodeBlockHelixBeforeToggleElementEvent,
|
|
7845
|
+
) => void) | undefined;
|
|
7846
|
+
/** Fired after the wrap button changed `wrap`, with the new value in `detail.checked`. */
|
|
7847
|
+
"onhelix-toggle"?: ((e: HelixCodeBlockHelixToggleElementEvent) => void) | undefined;
|
|
7780
7848
|
};
|
|
7781
7849
|
|
|
7782
7850
|
export type HelixCodeBlockSolidJsProps = {
|
|
7783
|
-
/** Whether long lines wrap.
|
|
7784
|
-
|
|
7785
|
-
Off by default, so long lines scroll, because a line break can be
|
|
7786
|
-
significant in code and a wrapped line reads as two. For prose-like code, such as a long command or
|
|
7787
|
-
a log line, a wrap reads better than a scroll. Line numbers keep the lines
|
|
7788
|
-
unwrapped, since a wrapped line would take one number and several rows. */
|
|
7789
|
-
"prop:wrap"?: (HelixCodeBlock["wrap"]) | undefined;
|
|
7790
7851
|
/** The name of a block that scrolls, which is a tab stop while it does.
|
|
7791
7852
|
|
|
7792
7853
|
Where the block has a name, the scroller says it too, such as "Code,
|
|
@@ -7872,6 +7933,14 @@ copy, which takes the code alone. Reflected, because the stylesheet lays
|
|
|
7872
7933
|
the gutter out beside the code. A diff numbers its lines from its hunks
|
|
7873
7934
|
whether or not this is set. */
|
|
7874
7935
|
"prop:lineNumbers"?: (HelixCodeBlock["lineNumbers"]) | undefined;
|
|
7936
|
+
/** The lines to mark, as numbers and ranges counted from 1, such as `2, 4-6`.
|
|
7937
|
+
Each run is drawn as a band behind its lines. Not for a diff, which marks
|
|
7938
|
+
its own changes. */
|
|
7939
|
+
"attr:mark-lines"?: (HelixCodeBlock["markLines"]) | undefined;
|
|
7940
|
+
/** The lines to mark, as numbers and ranges counted from 1, such as `2, 4-6`.
|
|
7941
|
+
Each run is drawn as a band behind its lines. Not for a diff, which marks
|
|
7942
|
+
its own changes. */
|
|
7943
|
+
"prop:markLines"?: (HelixCodeBlock["markLines"]) | undefined;
|
|
7875
7944
|
/** Whether to leave the copy button off.
|
|
7876
7945
|
|
|
7877
7946
|
Negative, which is not a style choice. A boolean attribute is true whenever
|
|
@@ -7918,6 +7987,22 @@ Absent is unified, each removal above its replacement, which fits any
|
|
|
7918
7987
|
width. `split` sets the old version beside the new one. Optional rather
|
|
7919
7988
|
than defaulted, so the host carries no attribute the consumer did not write. */
|
|
7920
7989
|
"prop:variant"?: (HelixCodeBlock["variant"]) | undefined;
|
|
7990
|
+
/** Whether long lines wrap. Without it they scroll.
|
|
7991
|
+
|
|
7992
|
+
Off by default, so long lines scroll, because a line break can be
|
|
7993
|
+
significant in code and a wrapped line reads as two. For prose-like code,
|
|
7994
|
+
such as a long command or a log line, a wrap reads better than a scroll.
|
|
7995
|
+
With `line-numbers`, each number stands beside the line it numbers
|
|
7996
|
+
however many rows that line takes. Reflected, because the stylesheet
|
|
7997
|
+
wraps the lines. */
|
|
7998
|
+
"prop:wrap"?: (HelixCodeBlock["wrap"]) | undefined;
|
|
7999
|
+
/** The wrap button's name, which it keeps whether it is pressed or not. */
|
|
8000
|
+
"attr:wrap-label"?: (HelixCodeBlock["wrapLabel"]) | undefined;
|
|
8001
|
+
/** The wrap button's name, which it keeps whether it is pressed or not. */
|
|
8002
|
+
"prop:wrapLabel"?: (HelixCodeBlock["wrapLabel"]) | undefined;
|
|
8003
|
+
/** Whether the header has a button that wraps the lines and unwraps them. The
|
|
8004
|
+
block draws a header for it even with no name. */
|
|
8005
|
+
"prop:wrappable"?: (HelixCodeBlock["wrappable"]) | undefined;
|
|
7921
8006
|
/** Turns the code into highlighted markup, which the block draws in place of
|
|
7922
8007
|
the plain text.
|
|
7923
8008
|
|
|
@@ -7940,6 +8025,12 @@ in the slot, so the copy button copies it as written and a reader without
|
|
|
7940
8025
|
the script still has it. Not called on a server, which has no code to
|
|
7941
8026
|
read, nor for a diff. */
|
|
7942
8027
|
"prop:highlight"?: (HelixCodeBlock["highlight"]) | undefined;
|
|
8028
|
+
/** The wrap button was pressed, with the `wrap` it asks for in `detail.checked`. Cancelable: cancel it to keep the lines as they are. */
|
|
8029
|
+
"on:helix-before-toggle"?: ((
|
|
8030
|
+
e: HelixCodeBlockHelixBeforeToggleElementEvent,
|
|
8031
|
+
) => void) | undefined;
|
|
8032
|
+
/** Fired after the wrap button changed `wrap`, with the new value in `detail.checked`. */
|
|
8033
|
+
"on:helix-toggle"?: ((e: HelixCodeBlockHelixToggleElementEvent) => void) | undefined;
|
|
7943
8034
|
|
|
7944
8035
|
/** Set the innerHTML of the element */
|
|
7945
8036
|
innerHTML?: (string) | undefined;
|
|
@@ -31682,6 +31773,22 @@ consumer's to set. */
|
|
|
31682
31773
|
"corner-label"?: (HelixSplitter["cornerLabel"]) | undefined;
|
|
31683
31774
|
/** The name of the handle where two dividers cross, read by screen readers. */
|
|
31684
31775
|
cornerLabel?: (HelixSplitter["cornerLabel"]) | undefined;
|
|
31776
|
+
/** What the handle where two dividers cross says it is set to, both dividers
|
|
31777
|
+
at once: `{across}` is where the divider that runs down stands, and
|
|
31778
|
+
`{down}` where the one that runs across stands, each a percentage.
|
|
31779
|
+
|
|
31780
|
+
**Both, because the handle moves both**, and a number names one: the
|
|
31781
|
+
handle's `aria-valuenow` is the divider its `aria-orientation` names, and
|
|
31782
|
+
these words are the whole of where it is. */
|
|
31783
|
+
"corner-value-label"?: (HelixSplitter["cornerValueLabel"]) | undefined;
|
|
31784
|
+
/** What the handle where two dividers cross says it is set to, both dividers
|
|
31785
|
+
at once: `{across}` is where the divider that runs down stands, and
|
|
31786
|
+
`{down}` where the one that runs across stands, each a percentage.
|
|
31787
|
+
|
|
31788
|
+
**Both, because the handle moves both**, and a number names one: the
|
|
31789
|
+
handle's `aria-valuenow` is the divider its `aria-orientation` names, and
|
|
31790
|
+
these words are the whole of where it is. */
|
|
31791
|
+
cornerValueLabel?: (HelixSplitter["cornerValueLabel"]) | undefined;
|
|
31685
31792
|
/** Which pane starts shut, when `collapsed` is not set. */
|
|
31686
31793
|
"default-collapsed"?: (HelixSplitter["defaultCollapsed"]) | undefined;
|
|
31687
31794
|
/** Which pane starts shut, when `collapsed` is not set. */
|
|
@@ -31838,6 +31945,22 @@ consumer's to set. */
|
|
|
31838
31945
|
"attr:corner-label"?: (HelixSplitter["cornerLabel"]) | undefined;
|
|
31839
31946
|
/** The name of the handle where two dividers cross, read by screen readers. */
|
|
31840
31947
|
"prop:cornerLabel"?: (HelixSplitter["cornerLabel"]) | undefined;
|
|
31948
|
+
/** What the handle where two dividers cross says it is set to, both dividers
|
|
31949
|
+
at once: `{across}` is where the divider that runs down stands, and
|
|
31950
|
+
`{down}` where the one that runs across stands, each a percentage.
|
|
31951
|
+
|
|
31952
|
+
**Both, because the handle moves both**, and a number names one: the
|
|
31953
|
+
handle's `aria-valuenow` is the divider its `aria-orientation` names, and
|
|
31954
|
+
these words are the whole of where it is. */
|
|
31955
|
+
"attr:corner-value-label"?: (HelixSplitter["cornerValueLabel"]) | undefined;
|
|
31956
|
+
/** What the handle where two dividers cross says it is set to, both dividers
|
|
31957
|
+
at once: `{across}` is where the divider that runs down stands, and
|
|
31958
|
+
`{down}` where the one that runs across stands, each a percentage.
|
|
31959
|
+
|
|
31960
|
+
**Both, because the handle moves both**, and a number names one: the
|
|
31961
|
+
handle's `aria-valuenow` is the divider its `aria-orientation` names, and
|
|
31962
|
+
these words are the whole of where it is. */
|
|
31963
|
+
"prop:cornerValueLabel"?: (HelixSplitter["cornerValueLabel"]) | undefined;
|
|
31841
31964
|
/** Which pane starts shut, when `collapsed` is not set. */
|
|
31842
31965
|
"attr:default-collapsed"?: (HelixSplitter["defaultCollapsed"]) | undefined;
|
|
31843
31966
|
/** Which pane starts shut, when `collapsed` is not set. */
|
|
@@ -33057,6 +33180,12 @@ export type HelixTableElementEvent<E = Event> = TypedEvent<HelixTable, E>;
|
|
|
33057
33180
|
/** `helix-before-reorder` event type */
|
|
33058
33181
|
export type HelixTableHelixBeforeReorderElementEvent =
|
|
33059
33182
|
HelixTableElementEvent<HelixBeforeReorderEvent>;
|
|
33183
|
+
/** `helix-before-toggle` event type */
|
|
33184
|
+
export type HelixTableHelixBeforeToggleElementEvent =
|
|
33185
|
+
HelixTableElementEvent<HelixBeforeToggleEvent>;
|
|
33186
|
+
/** `helix-load-more` event type */
|
|
33187
|
+
export type HelixTableHelixLoadMoreElementEvent =
|
|
33188
|
+
HelixTableElementEvent<HelixLoadMoreEvent>;
|
|
33060
33189
|
/** `helix-reorder` event type */
|
|
33061
33190
|
export type HelixTableHelixReorderElementEvent =
|
|
33062
33191
|
HelixTableElementEvent<HelixReorderEvent>;
|
|
@@ -33072,6 +33201,9 @@ export type HelixTableHelixSortElementEvent =
|
|
|
33072
33201
|
/** `helix-sorted` event type */
|
|
33073
33202
|
export type HelixTableHelixSortedElementEvent =
|
|
33074
33203
|
HelixTableElementEvent<HelixSortedEvent>;
|
|
33204
|
+
/** `helix-toggle` event type */
|
|
33205
|
+
export type HelixTableHelixToggleElementEvent =
|
|
33206
|
+
HelixTableElementEvent<HelixToggleEvent>;
|
|
33075
33207
|
|
|
33076
33208
|
export type HelixTableProps = {
|
|
33077
33209
|
/** The text shown and announced when there are no rows and none are loading. */
|
|
@@ -33127,6 +33259,12 @@ and a list here would be a second way to say what that says. This table's
|
|
|
33127
33259
|
cells are markup, and a table written as rows of cells with no column
|
|
33128
33260
|
declared in it has nowhere else to be sized from. */
|
|
33129
33261
|
columns?: (HelixTable["columns"]) | undefined;
|
|
33262
|
+
/** The keys of the rows whose rows are shown at the start, separated by
|
|
33263
|
+
commas. Used until `expanded` is set. */
|
|
33264
|
+
"default-expanded"?: (HelixTable["defaultExpanded"]) | undefined;
|
|
33265
|
+
/** The keys of the rows whose rows are shown at the start, separated by
|
|
33266
|
+
commas. Used until `expanded` is set. */
|
|
33267
|
+
defaultExpanded?: (HelixTable["defaultExpanded"]) | undefined;
|
|
33130
33268
|
/** The keys selected at the start, separated by commas. Used until `selected`
|
|
33131
33269
|
is set. */
|
|
33132
33270
|
"default-selected"?: (HelixTable["defaultSelected"]) | undefined;
|
|
@@ -33161,6 +33299,18 @@ While it is set, a line after the rows shows it, or your own content in the
|
|
|
33161
33299
|
`error` slot, in place of the empty and loading lines, and the live region
|
|
33162
33300
|
says it. */
|
|
33163
33301
|
errorText?: (HelixTable["errorText"]) | undefined;
|
|
33302
|
+
/** The name of the heading over the disclosure buttons. */
|
|
33303
|
+
"expand-column-label"?: (HelixTable["expandColumnLabel"]) | undefined;
|
|
33304
|
+
/** The name of the heading over the disclosure buttons. */
|
|
33305
|
+
expandColumnLabel?: (HelixTable["expandColumnLabel"]) | undefined;
|
|
33306
|
+
/** The keys of the rows whose rows are shown, separated by commas, in a table
|
|
33307
|
+
whose rows nest. A press on a row's disclosure button asks first, and
|
|
33308
|
+
`default-expanded` seeds what this element then owns. */
|
|
33309
|
+
expanded?: (HelixTable["expanded"]) | undefined;
|
|
33310
|
+
/** The name of a row's disclosure button. `{row}` is the words of the row's first cell. */
|
|
33311
|
+
"expand-row-label"?: (HelixTable["expandRowLabel"]) | undefined;
|
|
33312
|
+
/** The name of a row's disclosure button. `{row}` is the words of the row's first cell. */
|
|
33313
|
+
expandRowLabel?: (HelixTable["expandRowLabel"]) | undefined;
|
|
33164
33314
|
/** The table's name where neither `label` nor an `aria-label` or
|
|
33165
33315
|
`aria-labelledby` on the host gives it one. */
|
|
33166
33316
|
"fallback-label"?: (HelixTable["fallbackLabel"]) | undefined;
|
|
@@ -33180,6 +33330,12 @@ cells, which is the one way a cell of your markup can take focus. */
|
|
|
33180
33330
|
An `aria-label` or `aria-labelledby` on the host names the table too, and
|
|
33181
33331
|
wins over this. */
|
|
33182
33332
|
label?: (HelixTable["label"]) | undefined;
|
|
33333
|
+
/** Sends `helix-load-more` once the end of the table comes within a screen
|
|
33334
|
+
of view, so you can add the next rows as a reader nears them. */
|
|
33335
|
+
"load-more"?: (HelixTable["loadMore"]) | undefined;
|
|
33336
|
+
/** Sends `helix-load-more` once the end of the table comes within a screen
|
|
33337
|
+
of view, so you can add the next rows as a reader nears them. */
|
|
33338
|
+
loadMore?: (HelixTable["loadMore"]) | undefined;
|
|
33183
33339
|
/** What screen readers hear each time a key moves a held row, in a
|
|
33184
33340
|
`reorderable` table. `{name}` is the row's words, `{position}` the place it
|
|
33185
33341
|
would go, counting from 1, and `{count}` the number of rows. */
|
|
@@ -33214,6 +33370,12 @@ table moves no row itself: you move your rows on `helix-reorder`. */
|
|
|
33214
33370
|
"select-all-label"?: (HelixTable["selectAllLabel"]) | undefined;
|
|
33215
33371
|
/** The name of the checkbox in the heading that selects every row. */
|
|
33216
33372
|
selectAllLabel?: (HelixTable["selectAllLabel"]) | undefined;
|
|
33373
|
+
/** The name of the heading over the checkboxes under
|
|
33374
|
+
`selection-mode="single"`, where it holds no checkbox of its own. */
|
|
33375
|
+
"select-column-label"?: (HelixTable["selectColumnLabel"]) | undefined;
|
|
33376
|
+
/** The name of the heading over the checkboxes under
|
|
33377
|
+
`selection-mode="single"`, where it holds no checkbox of its own. */
|
|
33378
|
+
selectColumnLabel?: (HelixTable["selectColumnLabel"]) | undefined;
|
|
33217
33379
|
/** The keys of the selected rows, separated by commas.
|
|
33218
33380
|
|
|
33219
33381
|
A reader's press fires `helix-select` first, and refusing it leaves the
|
|
@@ -33230,6 +33392,20 @@ rows are chosen, written in the locale, and a language that needs plural
|
|
|
33230
33392
|
forms writes them: `{count, plural, one {# wybrany} few {# wybrane} many
|
|
33231
33393
|
{# wybranych} other {# wybranego}}`. */
|
|
33232
33394
|
selectedLabel?: (HelixTable["selectedLabel"]) | undefined;
|
|
33395
|
+
/** What a press on a row, or in a `grid` table a key that moves to one, does
|
|
33396
|
+
to the rows already selected: `toggle`, the default, leaves them to the
|
|
33397
|
+
checkboxes, and `replace` selects the row alone. */
|
|
33398
|
+
"selection-behavior"?: (HelixTable["selectionBehavior"]) | undefined;
|
|
33399
|
+
/** What a press on a row, or in a `grid` table a key that moves to one, does
|
|
33400
|
+
to the rows already selected: `toggle`, the default, leaves them to the
|
|
33401
|
+
checkboxes, and `replace` selects the row alone. */
|
|
33402
|
+
selectionBehavior?: (HelixTable["selectionBehavior"]) | undefined;
|
|
33403
|
+
/** How many rows a `selectable` table selects: `multiple`, the default, or
|
|
33404
|
+
`single`, one at a time. */
|
|
33405
|
+
"selection-mode"?: (HelixTable["selectionMode"]) | undefined;
|
|
33406
|
+
/** How many rows a `selectable` table selects: `multiple`, the default, or
|
|
33407
|
+
`single`, one at a time. */
|
|
33408
|
+
selectionMode?: (HelixTable["selectionMode"]) | undefined;
|
|
33233
33409
|
/** The name of a row's checkbox. `{row}` is replaced with the words of the
|
|
33234
33410
|
row's first cell. */
|
|
33235
33411
|
"select-row-label"?: (HelixTable["selectRowLabel"]) | undefined;
|
|
@@ -33263,6 +33439,12 @@ order has its whole sentence. `{order}` is the deprecated
|
|
|
33263
33439
|
"onhelix-before-reorder"?: ((
|
|
33264
33440
|
e: HelixTableHelixBeforeReorderElementEvent,
|
|
33265
33441
|
) => void) | undefined;
|
|
33442
|
+
/** 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. */
|
|
33443
|
+
"onhelix-before-toggle"?: ((
|
|
33444
|
+
e: HelixTableHelixBeforeToggleElementEvent,
|
|
33445
|
+
) => void) | undefined;
|
|
33446
|
+
/** 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. */
|
|
33447
|
+
"onhelix-load-more"?: ((e: HelixTableHelixLoadMoreElementEvent) => void) | undefined;
|
|
33266
33448
|
/** 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. */
|
|
33267
33449
|
"onhelix-reorder"?: ((e: HelixTableHelixReorderElementEvent) => void) | undefined;
|
|
33268
33450
|
/** The selection is about to change. The event carries every selected key, separated by commas. Cancelable: cancel it to keep the current selection. */
|
|
@@ -33273,6 +33455,8 @@ order has its whole sentence. `{order}` is the deprecated
|
|
|
33273
33455
|
"onhelix-sort"?: ((e: HelixTableHelixSortElementEvent) => void) | undefined;
|
|
33274
33456
|
/** Fired after the sort order changes, with the new order. */
|
|
33275
33457
|
"onhelix-sorted"?: ((e: HelixTableHelixSortedElementEvent) => void) | undefined;
|
|
33458
|
+
/** Fired from a row once the rows under it are shown or hidden, with whether it is open in `detail.checked`. */
|
|
33459
|
+
"onhelix-toggle"?: ((e: HelixTableHelixToggleElementEvent) => void) | undefined;
|
|
33276
33460
|
};
|
|
33277
33461
|
|
|
33278
33462
|
export type HelixTableSolidJsProps = {
|
|
@@ -33329,6 +33513,12 @@ and a list here would be a second way to say what that says. This table's
|
|
|
33329
33513
|
cells are markup, and a table written as rows of cells with no column
|
|
33330
33514
|
declared in it has nowhere else to be sized from. */
|
|
33331
33515
|
"prop:columns"?: (HelixTable["columns"]) | undefined;
|
|
33516
|
+
/** The keys of the rows whose rows are shown at the start, separated by
|
|
33517
|
+
commas. Used until `expanded` is set. */
|
|
33518
|
+
"attr:default-expanded"?: (HelixTable["defaultExpanded"]) | undefined;
|
|
33519
|
+
/** The keys of the rows whose rows are shown at the start, separated by
|
|
33520
|
+
commas. Used until `expanded` is set. */
|
|
33521
|
+
"prop:defaultExpanded"?: (HelixTable["defaultExpanded"]) | undefined;
|
|
33332
33522
|
/** The keys selected at the start, separated by commas. Used until `selected`
|
|
33333
33523
|
is set. */
|
|
33334
33524
|
"attr:default-selected"?: (HelixTable["defaultSelected"]) | undefined;
|
|
@@ -33363,6 +33553,18 @@ While it is set, a line after the rows shows it, or your own content in the
|
|
|
33363
33553
|
`error` slot, in place of the empty and loading lines, and the live region
|
|
33364
33554
|
says it. */
|
|
33365
33555
|
"prop:errorText"?: (HelixTable["errorText"]) | undefined;
|
|
33556
|
+
/** The name of the heading over the disclosure buttons. */
|
|
33557
|
+
"attr:expand-column-label"?: (HelixTable["expandColumnLabel"]) | undefined;
|
|
33558
|
+
/** The name of the heading over the disclosure buttons. */
|
|
33559
|
+
"prop:expandColumnLabel"?: (HelixTable["expandColumnLabel"]) | undefined;
|
|
33560
|
+
/** The keys of the rows whose rows are shown, separated by commas, in a table
|
|
33561
|
+
whose rows nest. A press on a row's disclosure button asks first, and
|
|
33562
|
+
`default-expanded` seeds what this element then owns. */
|
|
33563
|
+
"prop:expanded"?: (HelixTable["expanded"]) | undefined;
|
|
33564
|
+
/** The name of a row's disclosure button. `{row}` is the words of the row's first cell. */
|
|
33565
|
+
"attr:expand-row-label"?: (HelixTable["expandRowLabel"]) | undefined;
|
|
33566
|
+
/** The name of a row's disclosure button. `{row}` is the words of the row's first cell. */
|
|
33567
|
+
"prop:expandRowLabel"?: (HelixTable["expandRowLabel"]) | undefined;
|
|
33366
33568
|
/** The table's name where neither `label` nor an `aria-label` or
|
|
33367
33569
|
`aria-labelledby` on the host gives it one. */
|
|
33368
33570
|
"attr:fallback-label"?: (HelixTable["fallbackLabel"]) | undefined;
|
|
@@ -33382,6 +33584,12 @@ cells, which is the one way a cell of your markup can take focus. */
|
|
|
33382
33584
|
An `aria-label` or `aria-labelledby` on the host names the table too, and
|
|
33383
33585
|
wins over this. */
|
|
33384
33586
|
"prop:label"?: (HelixTable["label"]) | undefined;
|
|
33587
|
+
/** Sends `helix-load-more` once the end of the table comes within a screen
|
|
33588
|
+
of view, so you can add the next rows as a reader nears them. */
|
|
33589
|
+
"bool:load-more"?: (HelixTable["loadMore"]) | undefined;
|
|
33590
|
+
/** Sends `helix-load-more` once the end of the table comes within a screen
|
|
33591
|
+
of view, so you can add the next rows as a reader nears them. */
|
|
33592
|
+
"prop:loadMore"?: (HelixTable["loadMore"]) | undefined;
|
|
33385
33593
|
/** What screen readers hear each time a key moves a held row, in a
|
|
33386
33594
|
`reorderable` table. `{name}` is the row's words, `{position}` the place it
|
|
33387
33595
|
would go, counting from 1, and `{count}` the number of rows. */
|
|
@@ -33416,6 +33624,12 @@ table moves no row itself: you move your rows on `helix-reorder`. */
|
|
|
33416
33624
|
"attr:select-all-label"?: (HelixTable["selectAllLabel"]) | undefined;
|
|
33417
33625
|
/** The name of the checkbox in the heading that selects every row. */
|
|
33418
33626
|
"prop:selectAllLabel"?: (HelixTable["selectAllLabel"]) | undefined;
|
|
33627
|
+
/** The name of the heading over the checkboxes under
|
|
33628
|
+
`selection-mode="single"`, where it holds no checkbox of its own. */
|
|
33629
|
+
"attr:select-column-label"?: (HelixTable["selectColumnLabel"]) | undefined;
|
|
33630
|
+
/** The name of the heading over the checkboxes under
|
|
33631
|
+
`selection-mode="single"`, where it holds no checkbox of its own. */
|
|
33632
|
+
"prop:selectColumnLabel"?: (HelixTable["selectColumnLabel"]) | undefined;
|
|
33419
33633
|
/** The keys of the selected rows, separated by commas.
|
|
33420
33634
|
|
|
33421
33635
|
A reader's press fires `helix-select` first, and refusing it leaves the
|
|
@@ -33432,6 +33646,20 @@ rows are chosen, written in the locale, and a language that needs plural
|
|
|
33432
33646
|
forms writes them: `{count, plural, one {# wybrany} few {# wybrane} many
|
|
33433
33647
|
{# wybranych} other {# wybranego}}`. */
|
|
33434
33648
|
"prop:selectedLabel"?: (HelixTable["selectedLabel"]) | undefined;
|
|
33649
|
+
/** What a press on a row, or in a `grid` table a key that moves to one, does
|
|
33650
|
+
to the rows already selected: `toggle`, the default, leaves them to the
|
|
33651
|
+
checkboxes, and `replace` selects the row alone. */
|
|
33652
|
+
"attr:selection-behavior"?: (HelixTable["selectionBehavior"]) | undefined;
|
|
33653
|
+
/** What a press on a row, or in a `grid` table a key that moves to one, does
|
|
33654
|
+
to the rows already selected: `toggle`, the default, leaves them to the
|
|
33655
|
+
checkboxes, and `replace` selects the row alone. */
|
|
33656
|
+
"prop:selectionBehavior"?: (HelixTable["selectionBehavior"]) | undefined;
|
|
33657
|
+
/** How many rows a `selectable` table selects: `multiple`, the default, or
|
|
33658
|
+
`single`, one at a time. */
|
|
33659
|
+
"attr:selection-mode"?: (HelixTable["selectionMode"]) | undefined;
|
|
33660
|
+
/** How many rows a `selectable` table selects: `multiple`, the default, or
|
|
33661
|
+
`single`, one at a time. */
|
|
33662
|
+
"prop:selectionMode"?: (HelixTable["selectionMode"]) | undefined;
|
|
33435
33663
|
/** The name of a row's checkbox. `{row}` is replaced with the words of the
|
|
33436
33664
|
row's first cell. */
|
|
33437
33665
|
"attr:select-row-label"?: (HelixTable["selectRowLabel"]) | undefined;
|
|
@@ -33464,6 +33692,12 @@ order has its whole sentence. `{order}` is the deprecated
|
|
|
33464
33692
|
"on:helix-before-reorder"?: ((
|
|
33465
33693
|
e: HelixTableHelixBeforeReorderElementEvent,
|
|
33466
33694
|
) => void) | undefined;
|
|
33695
|
+
/** 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. */
|
|
33696
|
+
"on:helix-before-toggle"?: ((
|
|
33697
|
+
e: HelixTableHelixBeforeToggleElementEvent,
|
|
33698
|
+
) => void) | undefined;
|
|
33699
|
+
/** 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. */
|
|
33700
|
+
"on:helix-load-more"?: ((e: HelixTableHelixLoadMoreElementEvent) => void) | undefined;
|
|
33467
33701
|
/** 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. */
|
|
33468
33702
|
"on:helix-reorder"?: ((e: HelixTableHelixReorderElementEvent) => void) | undefined;
|
|
33469
33703
|
/** The selection is about to change. The event carries every selected key, separated by commas. Cancelable: cancel it to keep the current selection. */
|
|
@@ -33474,6 +33708,8 @@ order has its whole sentence. `{order}` is the deprecated
|
|
|
33474
33708
|
"on:helix-sort"?: ((e: HelixTableHelixSortElementEvent) => void) | undefined;
|
|
33475
33709
|
/** Fired after the sort order changes, with the new order. */
|
|
33476
33710
|
"on:helix-sorted"?: ((e: HelixTableHelixSortedElementEvent) => void) | undefined;
|
|
33711
|
+
/** Fired from a row once the rows under it are shown or hidden, with whether it is open in `detail.checked`. */
|
|
33712
|
+
"on:helix-toggle"?: ((e: HelixTableHelixToggleElementEvent) => void) | undefined;
|
|
33477
33713
|
|
|
33478
33714
|
/** Set the innerHTML of the element */
|
|
33479
33715
|
innerHTML?: (string) | undefined;
|
|
@@ -33492,6 +33728,10 @@ reached. */
|
|
|
33492
33728
|
/** The URL a press on the row follows, which makes the whole row a link.
|
|
33493
33729
|
Empty, the default, leaves presses to the row's cells. */
|
|
33494
33730
|
href?: (HelixTableRow["href"]) | undefined;
|
|
33731
|
+
/** The key of the row this one sits under, in a table whose rows nest: that
|
|
33732
|
+
row's `value`, or its place among the rows where it has none. Empty, the
|
|
33733
|
+
default, is a row at the top. */
|
|
33734
|
+
parent?: (HelixTableRow["parent"]) | undefined;
|
|
33495
33735
|
/** The `rel` of the row's link. You set it yourself, as on an anchor. */
|
|
33496
33736
|
rel?: (HelixTableRow["rel"]) | undefined;
|
|
33497
33737
|
/** Where the row's link opens, such as `_blank`. */
|
|
@@ -33512,6 +33752,10 @@ reached. */
|
|
|
33512
33752
|
/** The URL a press on the row follows, which makes the whole row a link.
|
|
33513
33753
|
Empty, the default, leaves presses to the row's cells. */
|
|
33514
33754
|
"prop:href"?: (HelixTableRow["href"]) | undefined;
|
|
33755
|
+
/** The key of the row this one sits under, in a table whose rows nest: that
|
|
33756
|
+
row's `value`, or its place among the rows where it has none. Empty, the
|
|
33757
|
+
default, is a row at the top. */
|
|
33758
|
+
"prop:parent"?: (HelixTableRow["parent"]) | undefined;
|
|
33515
33759
|
/** The `rel` of the row's link. You set it yourself, as on an anchor. */
|
|
33516
33760
|
"prop:rel"?: (HelixTableRow["rel"]) | undefined;
|
|
33517
33761
|
/** Where the row's link opens, such as `_blank`. */
|
|
@@ -36281,13 +36525,35 @@ Whatever `<time>` accepts, which is a date, a time, both, a duration or a
|
|
|
36281
36525
|
week. Unset, the label is written as it was given and nothing claims to
|
|
36282
36526
|
know what instant it names. */
|
|
36283
36527
|
datetime?: (HelixTimelineItem["datetime"]) | undefined;
|
|
36528
|
+
/** Marks an event that has not happened yet, such as one that is scheduled.
|
|
36529
|
+
The mark is the open circle, and a screen reader hears `pending-label`. */
|
|
36530
|
+
pending?: (HelixTimelineItem["pending"]) | undefined;
|
|
36531
|
+
/** What a screen reader hears for an entry that is `pending`. */
|
|
36532
|
+
"pending-label"?: (HelixTimelineItem["pendingLabel"]) | undefined;
|
|
36533
|
+
/** What a screen reader hears for an entry that is `pending`. */
|
|
36534
|
+
pendingLabel?: (HelixTimelineItem["pendingLabel"]) | undefined;
|
|
36284
36535
|
/** Writes the time as how long ago it was, or how long until it, from
|
|
36285
36536
|
`datetime`, where the `time` slot is empty: `long` ("3 hours ago"),
|
|
36286
36537
|
`short` ("3 hr. ago") or `narrow` ("3h ago"). Set with no value, it is
|
|
36287
36538
|
`long`. The words move on as they go stale. */
|
|
36288
36539
|
relative?: (HelixTimelineItem["relative"]) | undefined;
|
|
36289
|
-
/** The kind of event. It sets the color of the mark and
|
|
36540
|
+
/** The kind of event. It sets the color of the mark, and a screen reader
|
|
36541
|
+
hears it as the word `tone-labels` gives it. */
|
|
36290
36542
|
tone?: (HelixTimelineItem["tone"]) | undefined;
|
|
36543
|
+
/** What a screen reader is told this entry's tone is, such as "Failed".
|
|
36544
|
+
Absent is the tone's word in `tone-labels`. */
|
|
36545
|
+
"tone-label"?: (HelixTimelineItem["toneLabel"]) | undefined;
|
|
36546
|
+
/** What a screen reader is told this entry's tone is, such as "Failed".
|
|
36547
|
+
Absent is the tone's word in `tone-labels`. */
|
|
36548
|
+
toneLabel?: (HelixTimelineItem["toneLabel"]) | undefined;
|
|
36549
|
+
/** What a screen reader is told each tone is, by the tone's name, written as
|
|
36550
|
+
JSON in the attribute: `tone-labels='{"danger":"Failed"}'`. A tone with no
|
|
36551
|
+
word is not read, which is `neutral` and `primary` in English. */
|
|
36552
|
+
"tone-labels"?: (HelixTimelineItem["toneLabels"]) | undefined;
|
|
36553
|
+
/** What a screen reader is told each tone is, by the tone's name, written as
|
|
36554
|
+
JSON in the attribute: `tone-labels='{"danger":"Failed"}'`. A tone with no
|
|
36555
|
+
word is not read, which is `neutral` and `primary` in English. */
|
|
36556
|
+
toneLabels?: (HelixTimelineItem["toneLabels"]) | undefined;
|
|
36291
36557
|
};
|
|
36292
36558
|
|
|
36293
36559
|
export type HelixTimelineItemSolidJsProps = {
|
|
@@ -36298,13 +36564,35 @@ Whatever `<time>` accepts, which is a date, a time, both, a duration or a
|
|
|
36298
36564
|
week. Unset, the label is written as it was given and nothing claims to
|
|
36299
36565
|
know what instant it names. */
|
|
36300
36566
|
"prop:datetime"?: (HelixTimelineItem["datetime"]) | undefined;
|
|
36567
|
+
/** Marks an event that has not happened yet, such as one that is scheduled.
|
|
36568
|
+
The mark is the open circle, and a screen reader hears `pending-label`. */
|
|
36569
|
+
"prop:pending"?: (HelixTimelineItem["pending"]) | undefined;
|
|
36570
|
+
/** What a screen reader hears for an entry that is `pending`. */
|
|
36571
|
+
"attr:pending-label"?: (HelixTimelineItem["pendingLabel"]) | undefined;
|
|
36572
|
+
/** What a screen reader hears for an entry that is `pending`. */
|
|
36573
|
+
"prop:pendingLabel"?: (HelixTimelineItem["pendingLabel"]) | undefined;
|
|
36301
36574
|
/** Writes the time as how long ago it was, or how long until it, from
|
|
36302
36575
|
`datetime`, where the `time` slot is empty: `long` ("3 hours ago"),
|
|
36303
36576
|
`short` ("3 hr. ago") or `narrow` ("3h ago"). Set with no value, it is
|
|
36304
36577
|
`long`. The words move on as they go stale. */
|
|
36305
36578
|
"prop:relative"?: (HelixTimelineItem["relative"]) | undefined;
|
|
36306
|
-
/** The kind of event. It sets the color of the mark and
|
|
36579
|
+
/** The kind of event. It sets the color of the mark, and a screen reader
|
|
36580
|
+
hears it as the word `tone-labels` gives it. */
|
|
36307
36581
|
"prop:tone"?: (HelixTimelineItem["tone"]) | undefined;
|
|
36582
|
+
/** What a screen reader is told this entry's tone is, such as "Failed".
|
|
36583
|
+
Absent is the tone's word in `tone-labels`. */
|
|
36584
|
+
"attr:tone-label"?: (HelixTimelineItem["toneLabel"]) | undefined;
|
|
36585
|
+
/** What a screen reader is told this entry's tone is, such as "Failed".
|
|
36586
|
+
Absent is the tone's word in `tone-labels`. */
|
|
36587
|
+
"prop:toneLabel"?: (HelixTimelineItem["toneLabel"]) | undefined;
|
|
36588
|
+
/** What a screen reader is told each tone is, by the tone's name, written as
|
|
36589
|
+
JSON in the attribute: `tone-labels='{"danger":"Failed"}'`. A tone with no
|
|
36590
|
+
word is not read, which is `neutral` and `primary` in English. */
|
|
36591
|
+
"attr:tone-labels"?: (HelixTimelineItem["toneLabels"]) | undefined;
|
|
36592
|
+
/** What a screen reader is told each tone is, by the tone's name, written as
|
|
36593
|
+
JSON in the attribute: `tone-labels='{"danger":"Failed"}'`. A tone with no
|
|
36594
|
+
word is not read, which is `neutral` and `primary` in English. */
|
|
36595
|
+
"prop:toneLabels"?: (HelixTimelineItem["toneLabels"]) | undefined;
|
|
36308
36596
|
|
|
36309
36597
|
/** Set the innerHTML of the element */
|
|
36310
36598
|
innerHTML?: (string) | undefined;
|
|
@@ -38692,6 +38980,13 @@ Written by the playlist rather than by the entry, the way an option's
|
|
|
38692
38980
|
selection is: an entry that made itself current would be a second answer to
|
|
38693
38981
|
which one is playing. */
|
|
38694
38982
|
current?: (HelixVideoPlaylistItem["current"]) | undefined;
|
|
38983
|
+
/** Whether the entry holds the playlist's tab stop. Unset, every entry is in
|
|
38984
|
+
the tab order, which is what a server renders.
|
|
38985
|
+
|
|
38986
|
+
**Written by the playlist, with no attribute, and it reaches the button.**
|
|
38987
|
+
The playlist gives the stop to the entry a reader last focused, or to the
|
|
38988
|
+
current one, and the arrow keys reach the rest. */
|
|
38989
|
+
focusable?: (HelixVideoPlaylistItem["focusable"]) | undefined;
|
|
38695
38990
|
|
|
38696
38991
|
/** The entry was chosen. Cancelable: cancel it to keep the current entry. */
|
|
38697
38992
|
"onhelix-select"?: ((e: HelixVideoPlaylistItemHelixSelectElementEvent) => void) | undefined;
|
|
@@ -38718,6 +39013,13 @@ Written by the playlist rather than by the entry, the way an option's
|
|
|
38718
39013
|
selection is: an entry that made itself current would be a second answer to
|
|
38719
39014
|
which one is playing. */
|
|
38720
39015
|
"prop:current"?: (HelixVideoPlaylistItem["current"]) | undefined;
|
|
39016
|
+
/** Whether the entry holds the playlist's tab stop. Unset, every entry is in
|
|
39017
|
+
the tab order, which is what a server renders.
|
|
39018
|
+
|
|
39019
|
+
**Written by the playlist, with no attribute, and it reaches the button.**
|
|
39020
|
+
The playlist gives the stop to the entry a reader last focused, or to the
|
|
39021
|
+
current one, and the arrow keys reach the rest. */
|
|
39022
|
+
"prop:focusable"?: (HelixVideoPlaylistItem["focusable"]) | undefined;
|
|
38721
39023
|
/** The entry was chosen. Cancelable: cancel it to keep the current entry. */
|
|
38722
39024
|
"on:helix-select"?: ((
|
|
38723
39025
|
e: HelixVideoPlaylistItemHelixSelectElementEvent,
|
|
@@ -38809,8 +39111,20 @@ Ignored once `active` is written. */
|
|
|
38809
39111
|
|
|
38810
39112
|
Ignored once `active` is written. */
|
|
38811
39113
|
defaultActive?: (HelixVideoPlaylist["defaultActive"]) | undefined;
|
|
39114
|
+
/** What the playlist says while it has no entries. The `empty` slot replaces it. */
|
|
39115
|
+
"empty-label"?: (HelixVideoPlaylist["emptyLabel"]) | undefined;
|
|
39116
|
+
/** What the playlist says while it has no entries. The `empty` slot replaces it. */
|
|
39117
|
+
emptyLabel?: (HelixVideoPlaylist["emptyLabel"]) | undefined;
|
|
38812
39118
|
/** The list's name, read by screen readers. */
|
|
38813
39119
|
label?: (HelixVideoPlaylist["label"]) | undefined;
|
|
39120
|
+
/** Stays on an entry when its clip ends, where the playlist would otherwise
|
|
39121
|
+
play the next one. The player's controls, a press, and `next()` still
|
|
39122
|
+
move. `repeat="one"` still plays the entry again. */
|
|
39123
|
+
"no-advance"?: (HelixVideoPlaylist["noAdvance"]) | undefined;
|
|
39124
|
+
/** Stays on an entry when its clip ends, where the playlist would otherwise
|
|
39125
|
+
play the next one. The player's controls, a press, and `next()` still
|
|
39126
|
+
move. `repeat="one"` still plays the entry again. */
|
|
39127
|
+
noAdvance?: (HelixVideoPlaylist["noAdvance"]) | undefined;
|
|
38814
39128
|
/** What the live region says when the playlist moves to another entry.
|
|
38815
39129
|
`{title}` is the entry's name.
|
|
38816
39130
|
|
|
@@ -38840,7 +39154,7 @@ arrives or leaves, so previous goes back through what has played. */
|
|
|
38840
39154
|
|
|
38841
39155
|
/** 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. */
|
|
38842
39156
|
"onhelix-activate"?: ((e: HelixVideoPlaylistHelixActivateElementEvent) => void) | undefined;
|
|
38843
|
-
/** The current entry is about to change. Cancelable: cancel it to keep the current entry. */
|
|
39157
|
+
/** 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. */
|
|
38844
39158
|
"onhelix-before-activate"?: ((
|
|
38845
39159
|
e: HelixVideoPlaylistHelixBeforeActivateElementEvent,
|
|
38846
39160
|
) => void) | undefined;
|
|
@@ -38866,8 +39180,20 @@ Ignored once `active` is written. */
|
|
|
38866
39180
|
|
|
38867
39181
|
Ignored once `active` is written. */
|
|
38868
39182
|
"prop:defaultActive"?: (HelixVideoPlaylist["defaultActive"]) | undefined;
|
|
39183
|
+
/** What the playlist says while it has no entries. The `empty` slot replaces it. */
|
|
39184
|
+
"attr:empty-label"?: (HelixVideoPlaylist["emptyLabel"]) | undefined;
|
|
39185
|
+
/** What the playlist says while it has no entries. The `empty` slot replaces it. */
|
|
39186
|
+
"prop:emptyLabel"?: (HelixVideoPlaylist["emptyLabel"]) | undefined;
|
|
38869
39187
|
/** The list's name, read by screen readers. */
|
|
38870
39188
|
"prop:label"?: (HelixVideoPlaylist["label"]) | undefined;
|
|
39189
|
+
/** Stays on an entry when its clip ends, where the playlist would otherwise
|
|
39190
|
+
play the next one. The player's controls, a press, and `next()` still
|
|
39191
|
+
move. `repeat="one"` still plays the entry again. */
|
|
39192
|
+
"bool:no-advance"?: (HelixVideoPlaylist["noAdvance"]) | undefined;
|
|
39193
|
+
/** Stays on an entry when its clip ends, where the playlist would otherwise
|
|
39194
|
+
play the next one. The player's controls, a press, and `next()` still
|
|
39195
|
+
move. `repeat="one"` still plays the entry again. */
|
|
39196
|
+
"prop:noAdvance"?: (HelixVideoPlaylist["noAdvance"]) | undefined;
|
|
38871
39197
|
/** What the live region says when the playlist moves to another entry.
|
|
38872
39198
|
`{title}` is the entry's name.
|
|
38873
39199
|
|
|
@@ -38898,7 +39224,7 @@ arrives or leaves, so previous goes back through what has played. */
|
|
|
38898
39224
|
"on:helix-activate"?: ((
|
|
38899
39225
|
e: HelixVideoPlaylistHelixActivateElementEvent,
|
|
38900
39226
|
) => void) | undefined;
|
|
38901
|
-
/** The current entry is about to change. Cancelable: cancel it to keep the current entry. */
|
|
39227
|
+
/** 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. */
|
|
38902
39228
|
"on:helix-before-activate"?: ((
|
|
38903
39229
|
e: HelixVideoPlaylistHelixBeforeActivateElementEvent,
|
|
38904
39230
|
) => void) | undefined;
|
|
@@ -39938,6 +40264,12 @@ export type HelixVirtualListProps = {
|
|
|
39938
40264
|
items out as a grid of that many equal columns, windowed a line at a
|
|
39939
40265
|
time, with Left and Right moving along a line. */
|
|
39940
40266
|
columns?: (HelixVirtualList["columns"]) | undefined;
|
|
40267
|
+
/** The keys of the items a reader cannot choose or move to, separated by
|
|
40268
|
+
commas, as `value` writes keys. Their rows carry `aria-disabled`. */
|
|
40269
|
+
"disabled-keys"?: (HelixVirtualList["disabledKeys"]) | undefined;
|
|
40270
|
+
/** The keys of the items a reader cannot choose or move to, separated by
|
|
40271
|
+
commas, as `value` writes keys. Their rows carry `aria-disabled`. */
|
|
40272
|
+
disabledKeys?: (HelixVirtualList["disabledKeys"]) | undefined;
|
|
39941
40273
|
/** The text of the row shown when there are no items and none are loading,
|
|
39942
40274
|
where the `empty` slot is empty. Empty, the default, shows no row. */
|
|
39943
40275
|
"empty-label"?: (HelixVirtualList["emptyLabel"]) | undefined;
|
|
@@ -39952,6 +40284,11 @@ right whenever the rows really are one height and is the cheaper of the two. */
|
|
|
39952
40284
|
/** The id of the script element that holds the items as JSON. `items` wins
|
|
39953
40285
|
where both are set. */
|
|
39954
40286
|
for?: (HelixVirtualList["for"]) | undefined;
|
|
40287
|
+
/** The space between two rows, and between two columns in a grid, in
|
|
40288
|
+
pixels. The list counts it in each row's place, so a gap does not walk
|
|
40289
|
+
the rows away from the scroll position the way a margin on each row
|
|
40290
|
+
would. */
|
|
40291
|
+
gap?: (HelixVirtualList["gap"]) | undefined;
|
|
39955
40292
|
/** The field of each item that is its key in `value`, as a key or a path of
|
|
39956
40293
|
keys. Empty reads a string or a number item as its own key, and any
|
|
39957
40294
|
other item by its place in the set. */
|
|
@@ -39987,6 +40324,22 @@ disagree with itself; measuring is what a set of genuinely different
|
|
|
39987
40324
|
heights needs and costs a read of each row as it renders. A list of
|
|
39988
40325
|
one-line rows should leave this alone. */
|
|
39989
40326
|
measured?: (HelixVirtualList["measured"]) | undefined;
|
|
40327
|
+
/** The narrowest a column of a grid may be, in pixels. Set, the list lays
|
|
40328
|
+
out as many columns as fit the box at that width, at least one, and
|
|
40329
|
+
follows the box as it resizes, which `columns` then does not decide. */
|
|
40330
|
+
"min-column-width"?: (HelixVirtualList["minColumnWidth"] | `${number}`) | undefined;
|
|
40331
|
+
/** The narrowest a column of a grid may be, in pixels. Set, the list lays
|
|
40332
|
+
out as many columns as fit the box at that width, at least one, and
|
|
40333
|
+
follows the box as it resizes, which `columns` then does not decide. */
|
|
40334
|
+
minColumnWidth?: (HelixVirtualList["minColumnWidth"]) | undefined;
|
|
40335
|
+
/** What a press does to the items already chosen: `toggle` adds or takes out
|
|
40336
|
+
the item, and `replace` selects it alone and lets the arrow keys carry the
|
|
40337
|
+
selection, with Control or Command adding or taking out one item. */
|
|
40338
|
+
"selection-behavior"?: (HelixVirtualList["selectionBehavior"]) | undefined;
|
|
40339
|
+
/** What a press does to the items already chosen: `toggle` adds or takes out
|
|
40340
|
+
the item, and `replace` selects it alone and lets the arrow keys carry the
|
|
40341
|
+
selection, with Control or Command adding or taking out one item. */
|
|
40342
|
+
selectionBehavior?: (HelixVirtualList["selectionBehavior"]) | undefined;
|
|
39990
40343
|
/** Makes the list a list box a reader chooses from: `single` selects one
|
|
39991
40344
|
item, and `multiple` any number. Unset is a list a reader reads. */
|
|
39992
40345
|
"selection-mode"?: (HelixVirtualList["selectionMode"]) | undefined;
|
|
@@ -40041,6 +40394,12 @@ export type HelixVirtualListSolidJsProps = {
|
|
|
40041
40394
|
items out as a grid of that many equal columns, windowed a line at a
|
|
40042
40395
|
time, with Left and Right moving along a line. */
|
|
40043
40396
|
"prop:columns"?: (HelixVirtualList["columns"]) | undefined;
|
|
40397
|
+
/** The keys of the items a reader cannot choose or move to, separated by
|
|
40398
|
+
commas, as `value` writes keys. Their rows carry `aria-disabled`. */
|
|
40399
|
+
"attr:disabled-keys"?: (HelixVirtualList["disabledKeys"]) | undefined;
|
|
40400
|
+
/** The keys of the items a reader cannot choose or move to, separated by
|
|
40401
|
+
commas, as `value` writes keys. Their rows carry `aria-disabled`. */
|
|
40402
|
+
"prop:disabledKeys"?: (HelixVirtualList["disabledKeys"]) | undefined;
|
|
40044
40403
|
/** The text of the row shown when there are no items and none are loading,
|
|
40045
40404
|
where the `empty` slot is empty. Empty, the default, shows no row. */
|
|
40046
40405
|
"attr:empty-label"?: (HelixVirtualList["emptyLabel"]) | undefined;
|
|
@@ -40055,6 +40414,11 @@ right whenever the rows really are one height and is the cheaper of the two. */
|
|
|
40055
40414
|
/** The id of the script element that holds the items as JSON. `items` wins
|
|
40056
40415
|
where both are set. */
|
|
40057
40416
|
"prop:for"?: (HelixVirtualList["for"]) | undefined;
|
|
40417
|
+
/** The space between two rows, and between two columns in a grid, in
|
|
40418
|
+
pixels. The list counts it in each row's place, so a gap does not walk
|
|
40419
|
+
the rows away from the scroll position the way a margin on each row
|
|
40420
|
+
would. */
|
|
40421
|
+
"prop:gap"?: (HelixVirtualList["gap"]) | undefined;
|
|
40058
40422
|
/** The field of each item that is its key in `value`, as a key or a path of
|
|
40059
40423
|
keys. Empty reads a string or a number item as its own key, and any
|
|
40060
40424
|
other item by its place in the set. */
|
|
@@ -40090,6 +40454,22 @@ disagree with itself; measuring is what a set of genuinely different
|
|
|
40090
40454
|
heights needs and costs a read of each row as it renders. A list of
|
|
40091
40455
|
one-line rows should leave this alone. */
|
|
40092
40456
|
"prop:measured"?: (HelixVirtualList["measured"]) | undefined;
|
|
40457
|
+
/** The narrowest a column of a grid may be, in pixels. Set, the list lays
|
|
40458
|
+
out as many columns as fit the box at that width, at least one, and
|
|
40459
|
+
follows the box as it resizes, which `columns` then does not decide. */
|
|
40460
|
+
"attr:min-column-width"?: (HelixVirtualList["minColumnWidth"] | `${number}`) | undefined;
|
|
40461
|
+
/** The narrowest a column of a grid may be, in pixels. Set, the list lays
|
|
40462
|
+
out as many columns as fit the box at that width, at least one, and
|
|
40463
|
+
follows the box as it resizes, which `columns` then does not decide. */
|
|
40464
|
+
"prop:minColumnWidth"?: (HelixVirtualList["minColumnWidth"]) | undefined;
|
|
40465
|
+
/** What a press does to the items already chosen: `toggle` adds or takes out
|
|
40466
|
+
the item, and `replace` selects it alone and lets the arrow keys carry the
|
|
40467
|
+
selection, with Control or Command adding or taking out one item. */
|
|
40468
|
+
"attr:selection-behavior"?: (HelixVirtualList["selectionBehavior"]) | undefined;
|
|
40469
|
+
/** What a press does to the items already chosen: `toggle` adds or takes out
|
|
40470
|
+
the item, and `replace` selects it alone and lets the arrow keys carry the
|
|
40471
|
+
selection, with Control or Command adding or taking out one item. */
|
|
40472
|
+
"prop:selectionBehavior"?: (HelixVirtualList["selectionBehavior"]) | undefined;
|
|
40093
40473
|
/** Makes the list a list box a reader chooses from: `single` selects one
|
|
40094
40474
|
item, and `multiple` any number. Unset is a list a reader reads. */
|
|
40095
40475
|
"attr:selection-mode"?: (HelixVirtualList["selectionMode"]) | undefined;
|
|
@@ -43289,6 +43669,7 @@ export type CustomElements = {
|
|
|
43289
43669
|
* this, so a reader hears the ends first and what the line says after.
|
|
43290
43670
|
* - `controls-label`/`controlsLabel`: The name of the group of controls, read by screen readers, which names
|
|
43291
43671
|
* what the controls drive rather than the mechanism.
|
|
43672
|
+
* - `copied-label`/`copiedLabel`: What screen readers hear after a copy, with `{count}` for the cards copied.
|
|
43292
43673
|
* - `fallback-label`/`fallbackLabel`: The board's name where `label` is empty.
|
|
43293
43674
|
* - `label`: The accessible name for the board. Required.
|
|
43294
43675
|
*
|
|
@@ -43334,6 +43715,7 @@ export type CustomElements = {
|
|
|
43334
43715
|
* walk the cards.
|
|
43335
43716
|
* - `reconnecting-label`/`reconnectingLabel`: The text announced when a connection's end is picked up, with `{from}` and
|
|
43336
43717
|
* `{to}`.
|
|
43718
|
+
* - `redone-label`/`redoneLabel`: What screen readers hear after a move or a resize is made again.
|
|
43337
43719
|
* - `resized-label`/`resizedLabel`: What screen readers hear after a key resizes a card, with `{name}` for the
|
|
43338
43720
|
* card and `{width}` and `{height}` for its new size, in the document's
|
|
43339
43721
|
* units.
|
|
@@ -43391,6 +43773,7 @@ export type CustomElements = {
|
|
|
43391
43773
|
* see the board is told by the color; this is how a reader who cannot is
|
|
43392
43774
|
* told the same. A tone left out is not read.
|
|
43393
43775
|
* - `two-finger-hint-label`/`twoFingerHintLabel`: The hint shown when one finger swipes over the board with `gestures="cooperative"`.
|
|
43776
|
+
* - `undone-label`/`undoneLabel`: What screen readers hear after a move or a resize is undone.
|
|
43394
43777
|
* - `using-label`/`usingLabel`: The line shown while the board, with `gestures="activate"`, has the gestures.
|
|
43395
43778
|
* - `wheel-hint-label`/`wheelHintLabel`: The hint shown when the wheel scrolls past the board with
|
|
43396
43779
|
* `gestures="cooperative"`. `{key}` is ⌘ on a Mac and Ctrl elsewhere.
|
|
@@ -43472,6 +43855,11 @@ export type CustomElements = {
|
|
|
43472
43855
|
*
|
|
43473
43856
|
* What a reader landing on a card off the edge of the view gets, and what a
|
|
43474
43857
|
* page's own search or outline can call to take a reader to one.
|
|
43858
|
+
* - `undo() => boolean`: Puts the cards of the last move or resize back where they stood, asking
|
|
43859
|
+
* with `helix-before-move` first. Returns whether anything moved: false
|
|
43860
|
+
* with nothing to undo, or when the request was refused.
|
|
43861
|
+
* - `redo() => boolean`: Makes the last move or resize `undo` took back again, asking with
|
|
43862
|
+
* `helix-before-move` first. Returns whether anything moved.
|
|
43475
43863
|
* - `toJsonCanvas() => CanvasDocument`: The board as a JSON Canvas document, for saving it.
|
|
43476
43864
|
*
|
|
43477
43865
|
* What each card holds is the consumer's DOM, so a card comes back as a card
|
|
@@ -44457,6 +44845,7 @@ export type CustomElements = {
|
|
|
44457
44845
|
* is the way back, and that is a part inside the shadow tree where a
|
|
44458
44846
|
* stylesheet can already reach it. Measured rather than assumed: `label,
|
|
44459
44847
|
* pinned` after upgrade against `label` from the server.
|
|
44848
|
+
* - `resume-label`/`resumeLabel`: The words on the button that returns to the newest turn, where `resume` is empty.
|
|
44460
44849
|
* - `threshold`: How near the bottom still counts as being at it, in pixels.
|
|
44461
44850
|
*
|
|
44462
44851
|
* A hook rather than a constant, because the right number depends on how tall
|
|
@@ -44585,6 +44974,8 @@ export type CustomElements = {
|
|
|
44585
44974
|
* - `message-state`: The state text of a turn from `turns`, when there is one to show.
|
|
44586
44975
|
* - `message-time`: The time of a turn from `turns`.
|
|
44587
44976
|
* - `resume`: The control shown while the user is scrolled away from the bottom.
|
|
44977
|
+
* - `resume-button`: The button the `resume` region shows when nothing is slotted into it.
|
|
44978
|
+
* - `resume-mark`: The arrow on the default `resume-button`.
|
|
44588
44979
|
* - `status`: The status region, outside the log.
|
|
44589
44980
|
* - `turn`: The wrapper around the message drawn for one turn from `turns`.
|
|
44590
44981
|
* - `typing`: The words that say who is typing, in the status band, while `typing` names someone.
|
|
@@ -45111,18 +45502,13 @@ export type CustomElements = {
|
|
|
45111
45502
|
*
|
|
45112
45503
|
* Long lines scroll by default. Set `wrap` to wrap them instead, for prose-like
|
|
45113
45504
|
* code such as a long command, and set `--code-block-max-block-size` to cap the
|
|
45114
|
-
* height of a long file, which then scrolls.
|
|
45505
|
+
* height of a long file, which then scrolls. A line `mark-lines` names takes a
|
|
45506
|
+
* band in the primary color, with an edge at its start.
|
|
45115
45507
|
*
|
|
45116
45508
|
* ## Attributes & Properties
|
|
45117
45509
|
*
|
|
45118
45510
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
45119
45511
|
*
|
|
45120
|
-
* - `wrap`: Whether long lines wrap.
|
|
45121
|
-
*
|
|
45122
|
-
* Off by default, so long lines scroll, because a line break can be
|
|
45123
|
-
* significant in code and a wrapped line reads as two. For prose-like code, such as a long command or
|
|
45124
|
-
* a log line, a wrap reads better than a scroll. Line numbers keep the lines
|
|
45125
|
-
* unwrapped, since a wrapped line would take one number and several rows.
|
|
45126
45512
|
* - `code-label`/`codeLabel`: The name of a block that scrolls, which is a tab stop while it does.
|
|
45127
45513
|
*
|
|
45128
45514
|
* Where the block has a name, the scroller says it too, such as "Code,
|
|
@@ -45166,6 +45552,9 @@ export type CustomElements = {
|
|
|
45166
45552
|
* copy, which takes the code alone. Reflected, because the stylesheet lays
|
|
45167
45553
|
* the gutter out beside the code. A diff numbers its lines from its hunks
|
|
45168
45554
|
* whether or not this is set.
|
|
45555
|
+
* - `mark-lines`/`markLines`: The lines to mark, as numbers and ranges counted from 1, such as `2, 4-6`.
|
|
45556
|
+
* Each run is drawn as a band behind its lines. Not for a diff, which marks
|
|
45557
|
+
* its own changes.
|
|
45169
45558
|
* - `no-copy`/`noCopy`: Whether to leave the copy button off.
|
|
45170
45559
|
*
|
|
45171
45560
|
* Negative, which is not a style choice. A boolean attribute is true whenever
|
|
@@ -45190,6 +45579,17 @@ export type CustomElements = {
|
|
|
45190
45579
|
* Absent is unified, each removal above its replacement, which fits any
|
|
45191
45580
|
* width. `split` sets the old version beside the new one. Optional rather
|
|
45192
45581
|
* than defaulted, so the host carries no attribute the consumer did not write.
|
|
45582
|
+
* - `wrap`: Whether long lines wrap. Without it they scroll.
|
|
45583
|
+
*
|
|
45584
|
+
* Off by default, so long lines scroll, because a line break can be
|
|
45585
|
+
* significant in code and a wrapped line reads as two. For prose-like code,
|
|
45586
|
+
* such as a long command or a log line, a wrap reads better than a scroll.
|
|
45587
|
+
* With `line-numbers`, each number stands beside the line it numbers
|
|
45588
|
+
* however many rows that line takes. Reflected, because the stylesheet
|
|
45589
|
+
* wraps the lines.
|
|
45590
|
+
* - `wrap-label`/`wrapLabel`: The wrap button's name, which it keeps whether it is pressed or not.
|
|
45591
|
+
* - `wrappable`: Whether the header has a button that wraps the lines and unwraps them. The
|
|
45592
|
+
* block draws a header for it even with no name.
|
|
45193
45593
|
* - `highlight`: Turns the code into highlighted markup, which the block draws in place of
|
|
45194
45594
|
* the plain text.
|
|
45195
45595
|
*
|
|
@@ -45232,11 +45632,21 @@ export type CustomElements = {
|
|
|
45232
45632
|
* browser harness's awaits it alone: a browser always runs the frame, and a
|
|
45233
45633
|
* timer beside it was a bet on how long one takes, which a busy run lost. (property only) (readonly)
|
|
45234
45634
|
*
|
|
45635
|
+
* ## Events
|
|
45636
|
+
*
|
|
45637
|
+
* Events that will be emitted by the component.
|
|
45638
|
+
*
|
|
45639
|
+
* - `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.
|
|
45640
|
+
* - `helix-toggle`: Fired after the wrap button changed `wrap`, with the new value in `detail.checked`.
|
|
45641
|
+
*
|
|
45235
45642
|
* ## Slots
|
|
45236
45643
|
*
|
|
45237
45644
|
* Areas where markup can be added to the component.
|
|
45238
45645
|
*
|
|
45239
45646
|
* - `(default)`: The code.
|
|
45647
|
+
* - `actions`: Controls for the block, in the header before the copy button.
|
|
45648
|
+
* - `copied-icon`: The copy button's icon after a copy. Defaults to a check mark.
|
|
45649
|
+
* - `copy-icon`: The copy button's icon before a copy. Defaults to a clipboard.
|
|
45240
45650
|
*
|
|
45241
45651
|
* ## CSS Custom Properties
|
|
45242
45652
|
*
|
|
@@ -45254,14 +45664,21 @@ export type CustomElements = {
|
|
|
45254
45664
|
* - `--code-block-header-background-color`: The background behind the name. The default is `surface-raised`.
|
|
45255
45665
|
* - `--code-block-label-color`: The color of the name in the header.
|
|
45256
45666
|
* - `--code-block-line-height`: The line height of the code and its line numbers, as a number or a length.
|
|
45667
|
+
* - `--code-block-mark-color`: The band behind the lines `mark-lines` names. The primary color at a wash by default.
|
|
45668
|
+
* - `--code-block-mark-edge-color`: The edge at the start of a band behind marked lines. The primary color by default.
|
|
45257
45669
|
* - `--code-block-max-block-size`: The tallest the code grows before it scrolls, or until `expandable`'s button shows every line. The default is no limit.
|
|
45258
45670
|
* - `--code-block-radius`: The corner radius of the header's top and the block's bottom, which form one shape.
|
|
45259
45671
|
* - `--code-block-removed-color`: The color a diff's removed lines are tinted in and their `-` is drawn in. The danger color by default.
|
|
45672
|
+
* - `--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.
|
|
45673
|
+
* - `--code-block-mark-inline-size`: Written by the block on each `mark`: how wide the code is, scrolled part included. Do not set it.
|
|
45674
|
+
* - `--code-block-mark-size`: Written by the block on each `mark`: how tall its run of lines is. Do not set it.
|
|
45675
|
+
* - `--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.
|
|
45260
45676
|
*
|
|
45261
45677
|
* ## CSS Parts
|
|
45262
45678
|
*
|
|
45263
45679
|
* Custom selectors for styling elements within the component.
|
|
45264
45680
|
*
|
|
45681
|
+
* - `actions`: The box in the header that holds the `actions` slot, drawn while something is slotted there.
|
|
45265
45682
|
* - `added`: In a diff, a line only the new version has, an `<ins>`.
|
|
45266
45683
|
* - `block`: The scrolling `<pre>`.
|
|
45267
45684
|
* - `code`: The `<code>` inside it.
|
|
@@ -45290,13 +45707,15 @@ export type CustomElements = {
|
|
|
45290
45707
|
* - `header`: The bar that holds the name and the copy button, shown when there is a name.
|
|
45291
45708
|
* - `hunk`: In a diff, a `@@` line saying where the lines under it are.
|
|
45292
45709
|
* - `label`: The block's name: its `label`, or its `language` where it has no label.
|
|
45710
|
+
* - `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.
|
|
45293
45711
|
* - `marker`: In a diff, the `+`, `-`, or space that starts a line.
|
|
45294
45712
|
* - `new`: In a split diff, the new version's `<pre>`.
|
|
45295
|
-
* - `number`: In a diff, a line number.
|
|
45713
|
+
* - `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`.
|
|
45296
45714
|
* - `old`: In a split diff, the old version's `<pre>`.
|
|
45297
45715
|
* - `removed`: In a diff, a line only the old version has, a `<del>`.
|
|
45298
45716
|
* - `split`: In a split diff, the two versions side by side.
|
|
45299
45717
|
* - `text`: In a diff, a line's code.
|
|
45718
|
+
* - `wrap-toggle`: The button in the header that wraps the lines and unwraps them, drawn when `wrappable` is set.
|
|
45300
45719
|
*
|
|
45301
45720
|
* ## CSS States
|
|
45302
45721
|
*
|
|
@@ -51138,14 +51557,15 @@ export type CustomElements = {
|
|
|
51138
51557
|
* - `pan(to: ViewportWay) => void`: Pans the view one step in a direction.
|
|
51139
51558
|
* - `zoom(by: number) => void`: Zooms the view one step: `1` zooms in and `-1` zooms out.
|
|
51140
51559
|
* - `toggleFullscreen() => void`: Turns fullscreen on or off.
|
|
51141
|
-
* - `requestActive(next: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
51560
|
+
* - `requestActive(next: string, cause?: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
51142
51561
|
*
|
|
51143
51562
|
* Announces before it acts, so `preventDefault()` on the `helix-before-activate` is
|
|
51144
51563
|
* a refusal and nothing moves. Unlike a native control, nothing has moved
|
|
51145
51564
|
* by the time this runs, so refusing is simply not writing: there is
|
|
51146
51565
|
* nothing to put back. Nobody refusing means the set updates itself,
|
|
51147
51566
|
* whether or not a consumer declared `active`, a declared property being a
|
|
51148
|
-
* seed and a correction.
|
|
51567
|
+
* seed and a correction. `cause` says why, where the family names its
|
|
51568
|
+
* causes, and reaches the event as `detail.cause`.
|
|
51149
51569
|
* - `drawn(whole = true) => void`: Says the graph has been drawn whole, or with `false`, that it no longer
|
|
51150
51570
|
* is. Called by `connectGraph` once its layout has settled; a page drawing
|
|
51151
51571
|
* its own graph calls it when that graph is finished. The first call after
|
|
@@ -53114,14 +53534,15 @@ export type CustomElements = {
|
|
|
53114
53534
|
*
|
|
53115
53535
|
* Methods that can be called to access component functionality.
|
|
53116
53536
|
*
|
|
53117
|
-
* - `requestActive(next: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
53537
|
+
* - `requestActive(next: string, cause?: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
53118
53538
|
*
|
|
53119
53539
|
* Announces before it acts, so `preventDefault()` on the `helix-before-activate` is
|
|
53120
53540
|
* a refusal and nothing moves. Unlike a native control, nothing has moved
|
|
53121
53541
|
* by the time this runs, so refusing is simply not writing: there is
|
|
53122
53542
|
* nothing to put back. Nobody refusing means the set updates itself,
|
|
53123
53543
|
* whether or not a consumer declared `active`, a declared property being a
|
|
53124
|
-
* seed and a correction.
|
|
53544
|
+
* seed and a correction. `cause` says why, where the family names its
|
|
53545
|
+
* causes, and reaches the event as `detail.cause`.
|
|
53125
53546
|
* - `requestOpen(next: boolean) => boolean`: Requests that the element open or close, and returns whether the change
|
|
53126
53547
|
* was applied.
|
|
53127
53548
|
*
|
|
@@ -62530,6 +62951,13 @@ export type CustomElements = {
|
|
|
62530
62951
|
* only whoever put it there knows that, which is the same reason `min` is a
|
|
62531
62952
|
* consumer's to set.
|
|
62532
62953
|
* - `corner-label`/`cornerLabel`: The name of the handle where two dividers cross, read by screen readers.
|
|
62954
|
+
* - `corner-value-label`/`cornerValueLabel`: What the handle where two dividers cross says it is set to, both dividers
|
|
62955
|
+
* at once: `{across}` is where the divider that runs down stands, and
|
|
62956
|
+
* `{down}` where the one that runs across stands, each a percentage.
|
|
62957
|
+
*
|
|
62958
|
+
* **Both, because the handle moves both**, and a number names one: the
|
|
62959
|
+
* handle's `aria-valuenow` is the divider its `aria-orientation` names, and
|
|
62960
|
+
* these words are the whole of where it is.
|
|
62533
62961
|
* - `default-collapsed`/`defaultCollapsed`: Which pane starts shut, when `collapsed` is not set.
|
|
62534
62962
|
* - `default-position`/`defaultPosition`: Where the divider starts, when `position` is not set.
|
|
62535
62963
|
* - `label`: The divider's name, read by screen readers.
|
|
@@ -62982,14 +63410,15 @@ export type CustomElements = {
|
|
|
62982
63410
|
*
|
|
62983
63411
|
* Methods that can be called to access component functionality.
|
|
62984
63412
|
*
|
|
62985
|
-
* - `requestActive(next: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
63413
|
+
* - `requestActive(next: string, cause?: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
62986
63414
|
*
|
|
62987
63415
|
* Announces before it acts, so `preventDefault()` on the `helix-before-activate` is
|
|
62988
63416
|
* a refusal and nothing moves. Unlike a native control, nothing has moved
|
|
62989
63417
|
* by the time this runs, so refusing is simply not writing: there is
|
|
62990
63418
|
* nothing to put back. Nobody refusing means the set updates itself,
|
|
62991
63419
|
* whether or not a consumer declared `active`, a declared property being a
|
|
62992
|
-
* seed and a correction.
|
|
63420
|
+
* seed and a correction. `cause` says why, where the family names its
|
|
63421
|
+
* causes, and reaches the event as `detail.cause`.
|
|
62993
63422
|
* - `next() => boolean`: Moves to the next stage that can be gone to, as Ark UI's `goToNextStep`
|
|
62994
63423
|
* does. Returns whether it moved: not past the last stage, not into a stage
|
|
62995
63424
|
* `linear` holds out of reach, and not where a listener refused.
|
|
@@ -63683,6 +64112,8 @@ export type CustomElements = {
|
|
|
63683
64112
|
* and a list here would be a second way to say what that says. This table's
|
|
63684
64113
|
* cells are markup, and a table written as rows of cells with no column
|
|
63685
64114
|
* declared in it has nowhere else to be sized from.
|
|
64115
|
+
* - `default-expanded`/`defaultExpanded`: The keys of the rows whose rows are shown at the start, separated by
|
|
64116
|
+
* commas. Used until `expanded` is set.
|
|
63686
64117
|
* - `default-selected`/`defaultSelected`: The keys selected at the start, separated by commas. Used until `selected`
|
|
63687
64118
|
* is set.
|
|
63688
64119
|
* - `default-sort`/`defaultSort`: The starting sort order, used until `sort` is set.
|
|
@@ -63695,6 +64126,11 @@ export type CustomElements = {
|
|
|
63695
64126
|
* While it is set, a line after the rows shows it, or your own content in the
|
|
63696
64127
|
* `error` slot, in place of the empty and loading lines, and the live region
|
|
63697
64128
|
* says it.
|
|
64129
|
+
* - `expand-column-label`/`expandColumnLabel`: The name of the heading over the disclosure buttons.
|
|
64130
|
+
* - `expanded`: The keys of the rows whose rows are shown, separated by commas, in a table
|
|
64131
|
+
* whose rows nest. A press on a row's disclosure button asks first, and
|
|
64132
|
+
* `default-expanded` seeds what this element then owns.
|
|
64133
|
+
* - `expand-row-label`/`expandRowLabel`: The name of a row's disclosure button. `{row}` is the words of the row's first cell.
|
|
63698
64134
|
* - `fallback-label`/`fallbackLabel`: The table's name where neither `label` nor an `aria-label` or
|
|
63699
64135
|
* `aria-labelledby` on the host gives it one.
|
|
63700
64136
|
* - `grid`: Makes the table a grid: one tab stop, and the arrow keys, Home, End and the
|
|
@@ -63708,6 +64144,8 @@ export type CustomElements = {
|
|
|
63708
64144
|
*
|
|
63709
64145
|
* An `aria-label` or `aria-labelledby` on the host names the table too, and
|
|
63710
64146
|
* wins over this.
|
|
64147
|
+
* - `load-more`/`loadMore`: Sends `helix-load-more` once the end of the table comes within a screen
|
|
64148
|
+
* of view, so you can add the next rows as a reader nears them.
|
|
63711
64149
|
* - `moved-label`/`movedLabel`: What screen readers hear each time a key moves a held row, in a
|
|
63712
64150
|
* `reorderable` table. `{name}` is the row's words, `{position}` the place it
|
|
63713
64151
|
* would go, counting from 1, and `{count}` the number of rows.
|
|
@@ -63721,6 +64159,8 @@ export type CustomElements = {
|
|
|
63721
64159
|
* - `selectable`: Adds a column of checkboxes for selecting rows. Each row is known by its
|
|
63722
64160
|
* `value`, and by its place among the rows as written where it has none.
|
|
63723
64161
|
* - `select-all-label`/`selectAllLabel`: The name of the checkbox in the heading that selects every row.
|
|
64162
|
+
* - `select-column-label`/`selectColumnLabel`: The name of the heading over the checkboxes under
|
|
64163
|
+
* `selection-mode="single"`, where it holds no checkbox of its own.
|
|
63724
64164
|
* - `selected`: The keys of the selected rows, separated by commas.
|
|
63725
64165
|
*
|
|
63726
64166
|
* A reader's press fires `helix-select` first, and refusing it leaves the
|
|
@@ -63730,6 +64170,11 @@ export type CustomElements = {
|
|
|
63730
64170
|
* rows are chosen, written in the locale, and a language that needs plural
|
|
63731
64171
|
* forms writes them: `{count, plural, one {# wybrany} few {# wybrane} many
|
|
63732
64172
|
* {# wybranych} other {# wybranego}}`.
|
|
64173
|
+
* - `selection-behavior`/`selectionBehavior`: What a press on a row, or in a `grid` table a key that moves to one, does
|
|
64174
|
+
* to the rows already selected: `toggle`, the default, leaves them to the
|
|
64175
|
+
* checkboxes, and `replace` selects the row alone.
|
|
64176
|
+
* - `selection-mode`/`selectionMode`: How many rows a `selectable` table selects: `multiple`, the default, or
|
|
64177
|
+
* `single`, one at a time.
|
|
63733
64178
|
* - `select-row-label`/`selectRowLabel`: The name of a row's checkbox. `{row}` is replaced with the words of the
|
|
63734
64179
|
* row's first cell.
|
|
63735
64180
|
* - `sort`: The sort order, as `field:direction`, where `field` is a sortable column's
|
|
@@ -63771,11 +64216,14 @@ export type CustomElements = {
|
|
|
63771
64216
|
* Events that will be emitted by the component.
|
|
63772
64217
|
*
|
|
63773
64218
|
* - `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.
|
|
64219
|
+
* - `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.
|
|
64220
|
+
* - `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.
|
|
63774
64221
|
* - `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.
|
|
63775
64222
|
* - `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.
|
|
63776
64223
|
* - `helix-selected`: Fired after the selection changes, with every selected key, separated by commas.
|
|
63777
64224
|
* - `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.
|
|
63778
64225
|
* - `helix-sorted`: Fired after the sort order changes, with the new order.
|
|
64226
|
+
* - `helix-toggle`: Fired from a row once the rows under it are shown or hidden, with whether it is open in `detail.checked`.
|
|
63779
64227
|
*
|
|
63780
64228
|
* ## Slots
|
|
63781
64229
|
*
|
|
@@ -63832,6 +64280,7 @@ export type CustomElements = {
|
|
|
63832
64280
|
* - `checkbox-mark-indeterminate`: Added to `checkbox-mark` while only some rows are selected.
|
|
63833
64281
|
* - `empty`: The text shown when there are no rows.
|
|
63834
64282
|
* - `error`: The line shown after the rows while `error-text` is set, in place of the empty and loading text.
|
|
64283
|
+
* - `expand-head`: The heading over the disclosure buttons, in a table whose rows nest.
|
|
63835
64284
|
* - `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.
|
|
63836
64285
|
* - `grid-start`: An empty box before the rows, in a `grid` table. Shift with Tab focuses it on its way out of the table.
|
|
63837
64286
|
* - `grip-head`: The heading over the row grips, in a `reorderable` table.
|
|
@@ -63867,6 +64316,9 @@ export type CustomElements = {
|
|
|
63867
64316
|
* reached.
|
|
63868
64317
|
* - `href`: The URL a press on the row follows, which makes the whole row a link.
|
|
63869
64318
|
* Empty, the default, leaves presses to the row's cells.
|
|
64319
|
+
* - `parent`: The key of the row this one sits under, in a table whose rows nest: that
|
|
64320
|
+
* row's `value`, or its place among the rows where it has none. Empty, the
|
|
64321
|
+
* default, is a row at the top.
|
|
63870
64322
|
* - `rel`: The `rel` of the row's link. You set it yourself, as on an anchor.
|
|
63871
64323
|
* - `target`: Where the row's link opens, such as `_blank`.
|
|
63872
64324
|
* - `value`: The key the table's `selected` lists this row by. Left empty, the row is
|
|
@@ -63905,10 +64357,13 @@ export type CustomElements = {
|
|
|
63905
64357
|
* - `--table-dragging-opacity`: The opacity of a row being moved, in a `reorderable` table.
|
|
63906
64358
|
* - `--table-drop-indicator-color`: The color of the line where a moved row would land.
|
|
63907
64359
|
* - `--table-drop-indicator-size`: The thickness of the line where a moved row would land.
|
|
64360
|
+
* - `--table-expand-color`: The color of a row's disclosure button, in a table whose rows nest.
|
|
63908
64361
|
* - `--table-grip-color`: The color of a row's grip, in a `reorderable` table.
|
|
63909
64362
|
* - `--table-grip-disabled-opacity`: The opacity of a row's grip while a sort decides the order.
|
|
64363
|
+
* - `--table-indent`: How far each step of depth sets a nested row's disclosure cell in.
|
|
63910
64364
|
* - `--table-row-disabled-opacity`: The opacity of the cells of a `disabled` row.
|
|
63911
64365
|
* - `--table-row-hover-background-color`: The wash across the cells of a row with `href` under the pointer.
|
|
64366
|
+
* - `--table-row-level`: Written by the row on its `expand` cell: how deep the row sits, from 1. Do not set it.
|
|
63912
64367
|
*
|
|
63913
64368
|
* ## CSS Parts
|
|
63914
64369
|
*
|
|
@@ -63925,6 +64380,9 @@ export type CustomElements = {
|
|
|
63925
64380
|
* - `checkbox-mark-checked`: Added to `checkbox-mark` while its box is checked.
|
|
63926
64381
|
* - `checkbox-mark-dash`: Added to `checkbox-mark` while it draws the dash, which it keeps until its box is checked.
|
|
63927
64382
|
* - `checkbox-mark-indeterminate`: Added to `checkbox-mark` while only some rows are selected.
|
|
64383
|
+
* - `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.
|
|
64384
|
+
* - `expand-button`: The button that shows and hides the rows under this one.
|
|
64385
|
+
* - `expand-mark`: The caret on the disclosure button, which points along the line, turned down by the styled tier while the row is open.
|
|
63928
64386
|
* - `grip`: The cell that holds the row's grip, in a `reorderable` table.
|
|
63929
64387
|
* - `grip-button`: The button that moves the row.
|
|
63930
64388
|
* - `grip-mark`: The icon on the grip.
|
|
@@ -63938,6 +64396,7 @@ export type CustomElements = {
|
|
|
63938
64396
|
* - `dragging`: The row is being moved, in a `reorderable` table.
|
|
63939
64397
|
* - `drop-after`: The row being moved goes after this one when it is dropped.
|
|
63940
64398
|
* - `drop-before`: The row being moved goes before this one when it is dropped.
|
|
64399
|
+
* - `expanded`: While the rows under this one are shown.
|
|
63941
64400
|
* - `link`: While the row has `href` and is not `disabled`, so a press on it follows the link.
|
|
63942
64401
|
* - `selected`: While the row is selected, in a `selectable` table.
|
|
63943
64402
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
@@ -64134,14 +64593,15 @@ export type CustomElements = {
|
|
|
64134
64593
|
*
|
|
64135
64594
|
* Methods that can be called to access component functionality.
|
|
64136
64595
|
*
|
|
64137
|
-
* - `requestActive(next: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
64596
|
+
* - `requestActive(next: string, cause?: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
64138
64597
|
*
|
|
64139
64598
|
* Announces before it acts, so `preventDefault()` on the `helix-before-activate` is
|
|
64140
64599
|
* a refusal and nothing moves. Unlike a native control, nothing has moved
|
|
64141
64600
|
* by the time this runs, so refusing is simply not writing: there is
|
|
64142
64601
|
* nothing to put back. Nobody refusing means the set updates itself,
|
|
64143
64602
|
* whether or not a consumer declared `active`, a declared property being a
|
|
64144
|
-
* seed and a correction.
|
|
64603
|
+
* seed and a correction. `cause` says why, where the family names its
|
|
64604
|
+
* causes, and reaches the event as `detail.cause`.
|
|
64145
64605
|
*
|
|
64146
64606
|
* ## CSS Custom Properties
|
|
64147
64607
|
*
|
|
@@ -65850,11 +66310,20 @@ export type CustomElements = {
|
|
|
65850
66310
|
* Whatever `<time>` accepts, which is a date, a time, both, a duration or a
|
|
65851
66311
|
* week. Unset, the label is written as it was given and nothing claims to
|
|
65852
66312
|
* know what instant it names.
|
|
66313
|
+
* - `pending`: Marks an event that has not happened yet, such as one that is scheduled.
|
|
66314
|
+
* The mark is the open circle, and a screen reader hears `pending-label`.
|
|
66315
|
+
* - `pending-label`/`pendingLabel`: What a screen reader hears for an entry that is `pending`.
|
|
65853
66316
|
* - `relative`: Writes the time as how long ago it was, or how long until it, from
|
|
65854
66317
|
* `datetime`, where the `time` slot is empty: `long` ("3 hours ago"),
|
|
65855
66318
|
* `short` ("3 hr. ago") or `narrow` ("3h ago"). Set with no value, it is
|
|
65856
66319
|
* `long`. The words move on as they go stale.
|
|
65857
|
-
* - `tone`: The kind of event. It sets the color of the mark and
|
|
66320
|
+
* - `tone`: The kind of event. It sets the color of the mark, and a screen reader
|
|
66321
|
+
* hears it as the word `tone-labels` gives it.
|
|
66322
|
+
* - `tone-label`/`toneLabel`: What a screen reader is told this entry's tone is, such as "Failed".
|
|
66323
|
+
* Absent is the tone's word in `tone-labels`.
|
|
66324
|
+
* - `tone-labels`/`toneLabels`: What a screen reader is told each tone is, by the tone's name, written as
|
|
66325
|
+
* JSON in the attribute: `tone-labels='{"danger":"Failed"}'`. A tone with no
|
|
66326
|
+
* word is not read, which is `neutral` and `primary` in English.
|
|
65858
66327
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
65859
66328
|
*
|
|
65860
66329
|
* **Named `whenSettled` because `settled` is taken four times over**, by
|
|
@@ -65881,7 +66350,7 @@ export type CustomElements = {
|
|
|
65881
66350
|
* Areas where markup can be added to the component.
|
|
65882
66351
|
*
|
|
65883
66352
|
* - `(default)`: What happened.
|
|
65884
|
-
* - `marker`: The mark on the line. Defaults to a dot, which is the slot's fallback content.
|
|
66353
|
+
* - `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.
|
|
65885
66354
|
* - `time`: When it happened, written the way you want it shown.
|
|
65886
66355
|
*
|
|
65887
66356
|
* ## CSS Custom Properties
|
|
@@ -65902,7 +66371,7 @@ export type CustomElements = {
|
|
|
65902
66371
|
*
|
|
65903
66372
|
* - `content`: What happened, and the time above it.
|
|
65904
66373
|
* - `dot`: The dot drawn when no marker is slotted.
|
|
65905
|
-
* - `marker`: The mark on the line.
|
|
66374
|
+
* - `marker`: The mark on the line. An image named by the tone's word, and by `pending-label`, where either applies.
|
|
65906
66375
|
* - `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.
|
|
65907
66376
|
* - `time`: When it happened.
|
|
65908
66377
|
*
|
|
@@ -67617,14 +68086,15 @@ export type CustomElements = {
|
|
|
67617
68086
|
*
|
|
67618
68087
|
* Methods that can be called to access component functionality.
|
|
67619
68088
|
*
|
|
67620
|
-
* - `requestActive(next: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
68089
|
+
* - `requestActive(next: string, cause?: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
67621
68090
|
*
|
|
67622
68091
|
* Announces before it acts, so `preventDefault()` on the `helix-before-activate` is
|
|
67623
68092
|
* a refusal and nothing moves. Unlike a native control, nothing has moved
|
|
67624
68093
|
* by the time this runs, so refusing is simply not writing: there is
|
|
67625
68094
|
* nothing to put back. Nobody refusing means the set updates itself,
|
|
67626
68095
|
* whether or not a consumer declared `active`, a declared property being a
|
|
67627
|
-
* seed and a correction.
|
|
68096
|
+
* seed and a correction. `cause` says why, where the family names its
|
|
68097
|
+
* causes, and reaches the event as `detail.cause`.
|
|
67628
68098
|
*
|
|
67629
68099
|
* ## CSS Custom Properties
|
|
67630
68100
|
*
|
|
@@ -67814,6 +68284,12 @@ export type CustomElements = {
|
|
|
67814
68284
|
* Written by the playlist rather than by the entry, the way an option's
|
|
67815
68285
|
* selection is: an entry that made itself current would be a second answer to
|
|
67816
68286
|
* which one is playing. (property only)
|
|
68287
|
+
* - `focusable`: Whether the entry holds the playlist's tab stop. Unset, every entry is in
|
|
68288
|
+
* the tab order, which is what a server renders.
|
|
68289
|
+
*
|
|
68290
|
+
* **Written by the playlist, with no attribute, and it reaches the button.**
|
|
68291
|
+
* The playlist gives the stop to the entry a reader last focused, or to the
|
|
68292
|
+
* current one, and the arrow keys reach the rest. (property only)
|
|
67817
68293
|
* - `text`: The entry's name: its own text, without the content in its named slots.
|
|
67818
68294
|
*
|
|
67819
68295
|
* `textContent` takes the whole subtree: a row with a duration in `meta`
|
|
@@ -67855,6 +68331,7 @@ export type CustomElements = {
|
|
|
67855
68331
|
* Areas where markup can be added to the component.
|
|
67856
68332
|
*
|
|
67857
68333
|
* - `(default)`: The entry's name.
|
|
68334
|
+
* - `indicator`: A mark shown on the entry that is playing, such as an equalizer icon. Rendered only while the entry is current.
|
|
67858
68335
|
* - `media`: A thumbnail. Defaults to an image of `poster`.
|
|
67859
68336
|
* - `meta`: Content after the name, such as a duration or a date.
|
|
67860
68337
|
*
|
|
@@ -67889,6 +68366,7 @@ export type CustomElements = {
|
|
|
67889
68366
|
* Custom selectors for styling elements within the component.
|
|
67890
68367
|
*
|
|
67891
68368
|
* - `container`: The list item that holds the button.
|
|
68369
|
+
* - `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.
|
|
67892
68370
|
* - `item`: The row, which is a button.
|
|
67893
68371
|
* - `item-current`: Added to `item` for the entry that is playing.
|
|
67894
68372
|
* - `label`: The name and the content after it.
|
|
@@ -68029,7 +68507,11 @@ export type CustomElements = {
|
|
|
68029
68507
|
* - `default-active`/`defaultActive`: The `value` of the item declared current in markup.
|
|
68030
68508
|
*
|
|
68031
68509
|
* Ignored once `active` is written.
|
|
68510
|
+
* - `empty-label`/`emptyLabel`: What the playlist says while it has no entries. The `empty` slot replaces it.
|
|
68032
68511
|
* - `label`: The list's name, read by screen readers.
|
|
68512
|
+
* - `no-advance`/`noAdvance`: Stays on an entry when its clip ends, where the playlist would otherwise
|
|
68513
|
+
* play the next one. The player's controls, a press, and `next()` still
|
|
68514
|
+
* move. `repeat="one"` still plays the entry again.
|
|
68033
68515
|
* - `playing-label`/`playingLabel`: What the live region says when the playlist moves to another entry.
|
|
68034
68516
|
* `{title}` is the entry's name.
|
|
68035
68517
|
*
|
|
@@ -68078,7 +68560,7 @@ export type CustomElements = {
|
|
|
68078
68560
|
* Events that will be emitted by the component.
|
|
68079
68561
|
*
|
|
68080
68562
|
* - `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.
|
|
68081
|
-
* - `helix-before-activate`: The current entry is about to change. Cancelable: cancel it to keep the current entry.
|
|
68563
|
+
* - `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.
|
|
68082
68564
|
* - `helix-end`: The last entry finished playing, and the playlist stopped there. Not sent while `repeat` is set.
|
|
68083
68565
|
*
|
|
68084
68566
|
* ## Slots
|
|
@@ -68086,20 +68568,22 @@ export type CustomElements = {
|
|
|
68086
68568
|
* Areas where markup can be added to the component.
|
|
68087
68569
|
*
|
|
68088
68570
|
* - `(default)`: The entries.
|
|
68571
|
+
* - `empty`: Shown while the playlist has no entries. Defaults to `empty-label`.
|
|
68089
68572
|
* - `player`: The player that plays the entries.
|
|
68090
68573
|
*
|
|
68091
68574
|
* ## Methods
|
|
68092
68575
|
*
|
|
68093
68576
|
* Methods that can be called to access component functionality.
|
|
68094
68577
|
*
|
|
68095
|
-
* - `requestActive(next: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
68578
|
+
* - `requestActive(next: string, cause?: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
68096
68579
|
*
|
|
68097
68580
|
* Announces before it acts, so `preventDefault()` on the `helix-before-activate` is
|
|
68098
68581
|
* a refusal and nothing moves. Unlike a native control, nothing has moved
|
|
68099
68582
|
* by the time this runs, so refusing is simply not writing: there is
|
|
68100
68583
|
* nothing to put back. Nobody refusing means the set updates itself,
|
|
68101
68584
|
* whether or not a consumer declared `active`, a declared property being a
|
|
68102
|
-
* seed and a correction.
|
|
68585
|
+
* seed and a correction. `cause` says why, where the family names its
|
|
68586
|
+
* causes, and reaches the event as `detail.cause`.
|
|
68103
68587
|
* - `next() => void`: Moves to the next entry and plays it, as the player's next control does.
|
|
68104
68588
|
* Follows `shuffle`, goes round under `repeat="all"`, and stays on the last
|
|
68105
68589
|
* entry otherwise.
|
|
@@ -68110,6 +68594,8 @@ export type CustomElements = {
|
|
|
68110
68594
|
*
|
|
68111
68595
|
* CSS variables available for styling the component.
|
|
68112
68596
|
*
|
|
68597
|
+
* - `--video-playlist-empty-color`: The color of the words shown while there are no entries.
|
|
68598
|
+
* - `--video-playlist-empty-padding`: The space around the words shown while there are no entries.
|
|
68113
68599
|
* - `--video-playlist-gap`: The space between the player and the list.
|
|
68114
68600
|
* - `--video-playlist-items-gap`: The space between the entries.
|
|
68115
68601
|
* - `--video-playlist-layout`: The grid columns for the player and the list.
|
|
@@ -68119,6 +68605,7 @@ export type CustomElements = {
|
|
|
68119
68605
|
*
|
|
68120
68606
|
* Custom selectors for styling elements within the component.
|
|
68121
68607
|
*
|
|
68608
|
+
* - `empty`: The box that holds the `empty` slot, drawn while there are no entries.
|
|
68122
68609
|
* - `items`: The list of entries.
|
|
68123
68610
|
* - `live`: A live region that says which entry plays after the playlist moves.
|
|
68124
68611
|
* - `player`: The region that holds the player.
|
|
@@ -68587,6 +69074,8 @@ export type CustomElements = {
|
|
|
68587
69074
|
* - `columns`: How many items a line holds. One, the default, is a list; more lays the
|
|
68588
69075
|
* items out as a grid of that many equal columns, windowed a line at a
|
|
68589
69076
|
* time, with Left and Right moving along a line.
|
|
69077
|
+
* - `disabled-keys`/`disabledKeys`: The keys of the items a reader cannot choose or move to, separated by
|
|
69078
|
+
* commas, as `value` writes keys. Their rows carry `aria-disabled`.
|
|
68590
69079
|
* - `empty-label`/`emptyLabel`: The text of the row shown when there are no items and none are loading,
|
|
68591
69080
|
* where the `empty` slot is empty. Empty, the default, shows no row.
|
|
68592
69081
|
* - `estimate`: The height of one row, in pixels, used to find the row at a scroll offset.
|
|
@@ -68595,6 +69084,10 @@ export type CustomElements = {
|
|
|
68595
69084
|
* right whenever the rows really are one height and is the cheaper of the two.
|
|
68596
69085
|
* - `for`: The id of the script element that holds the items as JSON. `items` wins
|
|
68597
69086
|
* where both are set.
|
|
69087
|
+
* - `gap`: The space between two rows, and between two columns in a grid, in
|
|
69088
|
+
* pixels. The list counts it in each row's place, so a gap does not walk
|
|
69089
|
+
* the rows away from the scroll position the way a margin on each row
|
|
69090
|
+
* would.
|
|
68598
69091
|
* - `key-field`/`keyField`: The field of each item that is its key in `value`, as a key or a path of
|
|
68599
69092
|
* keys. Empty reads a string or a number item as its own key, and any
|
|
68600
69093
|
* other item by its place in the set.
|
|
@@ -68619,6 +69112,12 @@ export type CustomElements = {
|
|
|
68619
69112
|
* disagree with itself; measuring is what a set of genuinely different
|
|
68620
69113
|
* heights needs and costs a read of each row as it renders. A list of
|
|
68621
69114
|
* one-line rows should leave this alone.
|
|
69115
|
+
* - `min-column-width`/`minColumnWidth`: The narrowest a column of a grid may be, in pixels. Set, the list lays
|
|
69116
|
+
* out as many columns as fit the box at that width, at least one, and
|
|
69117
|
+
* follows the box as it resizes, which `columns` then does not decide.
|
|
69118
|
+
* - `selection-behavior`/`selectionBehavior`: What a press does to the items already chosen: `toggle` adds or takes out
|
|
69119
|
+
* the item, and `replace` selects it alone and lets the arrow keys carry the
|
|
69120
|
+
* selection, with Control or Command adding or taking out one item.
|
|
68622
69121
|
* - `selection-mode`/`selectionMode`: Makes the list a list box a reader chooses from: `single` selects one
|
|
68623
69122
|
* item, and `multiple` any number. Unset is a list a reader reads.
|
|
68624
69123
|
* - `text-field`/`textField`: The field of each item that typing matches, as a key or a path of keys
|
|
@@ -68696,6 +69195,7 @@ export type CustomElements = {
|
|
|
68696
69195
|
* CSS variables available for styling the component.
|
|
68697
69196
|
*
|
|
68698
69197
|
* - `--virtual-list-block-size`: How tall the scrolling box is.
|
|
69198
|
+
* - `--virtual-list-disabled-opacity`: How faint a row `disabled-keys` names is drawn.
|
|
68699
69199
|
* - `--virtual-list-empty-color`: The color of the text in the row shown when there are no items.
|
|
68700
69200
|
* - `--virtual-list-empty-padding`: The space around the text in the row shown when there are no items.
|
|
68701
69201
|
* - `--virtual-list-loading-color`: The color of the text in the row drawn while `loading` is set.
|
|
@@ -71930,6 +72430,7 @@ export type CustomElementsSolidJs = {
|
|
|
71930
72430
|
* this, so a reader hears the ends first and what the line says after.
|
|
71931
72431
|
* - `controls-label`/`controlsLabel`: The name of the group of controls, read by screen readers, which names
|
|
71932
72432
|
* what the controls drive rather than the mechanism.
|
|
72433
|
+
* - `copied-label`/`copiedLabel`: What screen readers hear after a copy, with `{count}` for the cards copied.
|
|
71933
72434
|
* - `fallback-label`/`fallbackLabel`: The board's name where `label` is empty.
|
|
71934
72435
|
* - `label`: The accessible name for the board. Required.
|
|
71935
72436
|
*
|
|
@@ -71975,6 +72476,7 @@ export type CustomElementsSolidJs = {
|
|
|
71975
72476
|
* walk the cards.
|
|
71976
72477
|
* - `reconnecting-label`/`reconnectingLabel`: The text announced when a connection's end is picked up, with `{from}` and
|
|
71977
72478
|
* `{to}`.
|
|
72479
|
+
* - `redone-label`/`redoneLabel`: What screen readers hear after a move or a resize is made again.
|
|
71978
72480
|
* - `resized-label`/`resizedLabel`: What screen readers hear after a key resizes a card, with `{name}` for the
|
|
71979
72481
|
* card and `{width}` and `{height}` for its new size, in the document's
|
|
71980
72482
|
* units.
|
|
@@ -72032,6 +72534,7 @@ export type CustomElementsSolidJs = {
|
|
|
72032
72534
|
* see the board is told by the color; this is how a reader who cannot is
|
|
72033
72535
|
* told the same. A tone left out is not read.
|
|
72034
72536
|
* - `two-finger-hint-label`/`twoFingerHintLabel`: The hint shown when one finger swipes over the board with `gestures="cooperative"`.
|
|
72537
|
+
* - `undone-label`/`undoneLabel`: What screen readers hear after a move or a resize is undone.
|
|
72035
72538
|
* - `using-label`/`usingLabel`: The line shown while the board, with `gestures="activate"`, has the gestures.
|
|
72036
72539
|
* - `wheel-hint-label`/`wheelHintLabel`: The hint shown when the wheel scrolls past the board with
|
|
72037
72540
|
* `gestures="cooperative"`. `{key}` is ⌘ on a Mac and Ctrl elsewhere.
|
|
@@ -72113,6 +72616,11 @@ export type CustomElementsSolidJs = {
|
|
|
72113
72616
|
*
|
|
72114
72617
|
* What a reader landing on a card off the edge of the view gets, and what a
|
|
72115
72618
|
* page's own search or outline can call to take a reader to one.
|
|
72619
|
+
* - `undo() => boolean`: Puts the cards of the last move or resize back where they stood, asking
|
|
72620
|
+
* with `helix-before-move` first. Returns whether anything moved: false
|
|
72621
|
+
* with nothing to undo, or when the request was refused.
|
|
72622
|
+
* - `redo() => boolean`: Makes the last move or resize `undo` took back again, asking with
|
|
72623
|
+
* `helix-before-move` first. Returns whether anything moved.
|
|
72116
72624
|
* - `toJsonCanvas() => CanvasDocument`: The board as a JSON Canvas document, for saving it.
|
|
72117
72625
|
*
|
|
72118
72626
|
* What each card holds is the consumer's DOM, so a card comes back as a card
|
|
@@ -73112,6 +73620,7 @@ export type CustomElementsSolidJs = {
|
|
|
73112
73620
|
* is the way back, and that is a part inside the shadow tree where a
|
|
73113
73621
|
* stylesheet can already reach it. Measured rather than assumed: `label,
|
|
73114
73622
|
* pinned` after upgrade against `label` from the server.
|
|
73623
|
+
* - `resume-label`/`resumeLabel`: The words on the button that returns to the newest turn, where `resume` is empty.
|
|
73115
73624
|
* - `threshold`: How near the bottom still counts as being at it, in pixels.
|
|
73116
73625
|
*
|
|
73117
73626
|
* A hook rather than a constant, because the right number depends on how tall
|
|
@@ -73240,6 +73749,8 @@ export type CustomElementsSolidJs = {
|
|
|
73240
73749
|
* - `message-state`: The state text of a turn from `turns`, when there is one to show.
|
|
73241
73750
|
* - `message-time`: The time of a turn from `turns`.
|
|
73242
73751
|
* - `resume`: The control shown while the user is scrolled away from the bottom.
|
|
73752
|
+
* - `resume-button`: The button the `resume` region shows when nothing is slotted into it.
|
|
73753
|
+
* - `resume-mark`: The arrow on the default `resume-button`.
|
|
73243
73754
|
* - `status`: The status region, outside the log.
|
|
73244
73755
|
* - `turn`: The wrapper around the message drawn for one turn from `turns`.
|
|
73245
73756
|
* - `typing`: The words that say who is typing, in the status band, while `typing` names someone.
|
|
@@ -73774,18 +74285,13 @@ export type CustomElementsSolidJs = {
|
|
|
73774
74285
|
*
|
|
73775
74286
|
* Long lines scroll by default. Set `wrap` to wrap them instead, for prose-like
|
|
73776
74287
|
* code such as a long command, and set `--code-block-max-block-size` to cap the
|
|
73777
|
-
* height of a long file, which then scrolls.
|
|
74288
|
+
* height of a long file, which then scrolls. A line `mark-lines` names takes a
|
|
74289
|
+
* band in the primary color, with an edge at its start.
|
|
73778
74290
|
*
|
|
73779
74291
|
* ## Attributes & Properties
|
|
73780
74292
|
*
|
|
73781
74293
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
73782
74294
|
*
|
|
73783
|
-
* - `wrap`: Whether long lines wrap.
|
|
73784
|
-
*
|
|
73785
|
-
* Off by default, so long lines scroll, because a line break can be
|
|
73786
|
-
* significant in code and a wrapped line reads as two. For prose-like code, such as a long command or
|
|
73787
|
-
* a log line, a wrap reads better than a scroll. Line numbers keep the lines
|
|
73788
|
-
* unwrapped, since a wrapped line would take one number and several rows.
|
|
73789
74295
|
* - `code-label`/`codeLabel`: The name of a block that scrolls, which is a tab stop while it does.
|
|
73790
74296
|
*
|
|
73791
74297
|
* Where the block has a name, the scroller says it too, such as "Code,
|
|
@@ -73829,6 +74335,9 @@ export type CustomElementsSolidJs = {
|
|
|
73829
74335
|
* copy, which takes the code alone. Reflected, because the stylesheet lays
|
|
73830
74336
|
* the gutter out beside the code. A diff numbers its lines from its hunks
|
|
73831
74337
|
* whether or not this is set.
|
|
74338
|
+
* - `mark-lines`/`markLines`: The lines to mark, as numbers and ranges counted from 1, such as `2, 4-6`.
|
|
74339
|
+
* Each run is drawn as a band behind its lines. Not for a diff, which marks
|
|
74340
|
+
* its own changes.
|
|
73832
74341
|
* - `no-copy`/`noCopy`: Whether to leave the copy button off.
|
|
73833
74342
|
*
|
|
73834
74343
|
* Negative, which is not a style choice. A boolean attribute is true whenever
|
|
@@ -73853,6 +74362,17 @@ export type CustomElementsSolidJs = {
|
|
|
73853
74362
|
* Absent is unified, each removal above its replacement, which fits any
|
|
73854
74363
|
* width. `split` sets the old version beside the new one. Optional rather
|
|
73855
74364
|
* than defaulted, so the host carries no attribute the consumer did not write.
|
|
74365
|
+
* - `wrap`: Whether long lines wrap. Without it they scroll.
|
|
74366
|
+
*
|
|
74367
|
+
* Off by default, so long lines scroll, because a line break can be
|
|
74368
|
+
* significant in code and a wrapped line reads as two. For prose-like code,
|
|
74369
|
+
* such as a long command or a log line, a wrap reads better than a scroll.
|
|
74370
|
+
* With `line-numbers`, each number stands beside the line it numbers
|
|
74371
|
+
* however many rows that line takes. Reflected, because the stylesheet
|
|
74372
|
+
* wraps the lines.
|
|
74373
|
+
* - `wrap-label`/`wrapLabel`: The wrap button's name, which it keeps whether it is pressed or not.
|
|
74374
|
+
* - `wrappable`: Whether the header has a button that wraps the lines and unwraps them. The
|
|
74375
|
+
* block draws a header for it even with no name.
|
|
73856
74376
|
* - `highlight`: Turns the code into highlighted markup, which the block draws in place of
|
|
73857
74377
|
* the plain text.
|
|
73858
74378
|
*
|
|
@@ -73895,11 +74415,21 @@ export type CustomElementsSolidJs = {
|
|
|
73895
74415
|
* browser harness's awaits it alone: a browser always runs the frame, and a
|
|
73896
74416
|
* timer beside it was a bet on how long one takes, which a busy run lost. (property only) (readonly)
|
|
73897
74417
|
*
|
|
74418
|
+
* ## Events
|
|
74419
|
+
*
|
|
74420
|
+
* Events that will be emitted by the component.
|
|
74421
|
+
*
|
|
74422
|
+
* - `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.
|
|
74423
|
+
* - `helix-toggle`: Fired after the wrap button changed `wrap`, with the new value in `detail.checked`.
|
|
74424
|
+
*
|
|
73898
74425
|
* ## Slots
|
|
73899
74426
|
*
|
|
73900
74427
|
* Areas where markup can be added to the component.
|
|
73901
74428
|
*
|
|
73902
74429
|
* - `(default)`: The code.
|
|
74430
|
+
* - `actions`: Controls for the block, in the header before the copy button.
|
|
74431
|
+
* - `copied-icon`: The copy button's icon after a copy. Defaults to a check mark.
|
|
74432
|
+
* - `copy-icon`: The copy button's icon before a copy. Defaults to a clipboard.
|
|
73903
74433
|
*
|
|
73904
74434
|
* ## CSS Custom Properties
|
|
73905
74435
|
*
|
|
@@ -73917,14 +74447,21 @@ export type CustomElementsSolidJs = {
|
|
|
73917
74447
|
* - `--code-block-header-background-color`: The background behind the name. The default is `surface-raised`.
|
|
73918
74448
|
* - `--code-block-label-color`: The color of the name in the header.
|
|
73919
74449
|
* - `--code-block-line-height`: The line height of the code and its line numbers, as a number or a length.
|
|
74450
|
+
* - `--code-block-mark-color`: The band behind the lines `mark-lines` names. The primary color at a wash by default.
|
|
74451
|
+
* - `--code-block-mark-edge-color`: The edge at the start of a band behind marked lines. The primary color by default.
|
|
73920
74452
|
* - `--code-block-max-block-size`: The tallest the code grows before it scrolls, or until `expandable`'s button shows every line. The default is no limit.
|
|
73921
74453
|
* - `--code-block-radius`: The corner radius of the header's top and the block's bottom, which form one shape.
|
|
73922
74454
|
* - `--code-block-removed-color`: The color a diff's removed lines are tinted in and their `-` is drawn in. The danger color by default.
|
|
74455
|
+
* - `--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.
|
|
74456
|
+
* - `--code-block-mark-inline-size`: Written by the block on each `mark`: how wide the code is, scrolled part included. Do not set it.
|
|
74457
|
+
* - `--code-block-mark-size`: Written by the block on each `mark`: how tall its run of lines is. Do not set it.
|
|
74458
|
+
* - `--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.
|
|
73923
74459
|
*
|
|
73924
74460
|
* ## CSS Parts
|
|
73925
74461
|
*
|
|
73926
74462
|
* Custom selectors for styling elements within the component.
|
|
73927
74463
|
*
|
|
74464
|
+
* - `actions`: The box in the header that holds the `actions` slot, drawn while something is slotted there.
|
|
73928
74465
|
* - `added`: In a diff, a line only the new version has, an `<ins>`.
|
|
73929
74466
|
* - `block`: The scrolling `<pre>`.
|
|
73930
74467
|
* - `code`: The `<code>` inside it.
|
|
@@ -73953,13 +74490,15 @@ export type CustomElementsSolidJs = {
|
|
|
73953
74490
|
* - `header`: The bar that holds the name and the copy button, shown when there is a name.
|
|
73954
74491
|
* - `hunk`: In a diff, a `@@` line saying where the lines under it are.
|
|
73955
74492
|
* - `label`: The block's name: its `label`, or its `language` where it has no label.
|
|
74493
|
+
* - `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.
|
|
73956
74494
|
* - `marker`: In a diff, the `+`, `-`, or space that starts a line.
|
|
73957
74495
|
* - `new`: In a split diff, the new version's `<pre>`.
|
|
73958
|
-
* - `number`: In a diff, a line number.
|
|
74496
|
+
* - `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`.
|
|
73959
74497
|
* - `old`: In a split diff, the old version's `<pre>`.
|
|
73960
74498
|
* - `removed`: In a diff, a line only the old version has, a `<del>`.
|
|
73961
74499
|
* - `split`: In a split diff, the two versions side by side.
|
|
73962
74500
|
* - `text`: In a diff, a line's code.
|
|
74501
|
+
* - `wrap-toggle`: The button in the header that wraps the lines and unwraps them, drawn when `wrappable` is set.
|
|
73963
74502
|
*
|
|
73964
74503
|
* ## CSS States
|
|
73965
74504
|
*
|
|
@@ -79880,14 +80419,15 @@ export type CustomElementsSolidJs = {
|
|
|
79880
80419
|
* - `pan(to: ViewportWay) => void`: Pans the view one step in a direction.
|
|
79881
80420
|
* - `zoom(by: number) => void`: Zooms the view one step: `1` zooms in and `-1` zooms out.
|
|
79882
80421
|
* - `toggleFullscreen() => void`: Turns fullscreen on or off.
|
|
79883
|
-
* - `requestActive(next: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
80422
|
+
* - `requestActive(next: string, cause?: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
79884
80423
|
*
|
|
79885
80424
|
* Announces before it acts, so `preventDefault()` on the `helix-before-activate` is
|
|
79886
80425
|
* a refusal and nothing moves. Unlike a native control, nothing has moved
|
|
79887
80426
|
* by the time this runs, so refusing is simply not writing: there is
|
|
79888
80427
|
* nothing to put back. Nobody refusing means the set updates itself,
|
|
79889
80428
|
* whether or not a consumer declared `active`, a declared property being a
|
|
79890
|
-
* seed and a correction.
|
|
80429
|
+
* seed and a correction. `cause` says why, where the family names its
|
|
80430
|
+
* causes, and reaches the event as `detail.cause`.
|
|
79891
80431
|
* - `drawn(whole = true) => void`: Says the graph has been drawn whole, or with `false`, that it no longer
|
|
79892
80432
|
* is. Called by `connectGraph` once its layout has settled; a page drawing
|
|
79893
80433
|
* its own graph calls it when that graph is finished. The first call after
|
|
@@ -81889,14 +82429,15 @@ export type CustomElementsSolidJs = {
|
|
|
81889
82429
|
*
|
|
81890
82430
|
* Methods that can be called to access component functionality.
|
|
81891
82431
|
*
|
|
81892
|
-
* - `requestActive(next: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
82432
|
+
* - `requestActive(next: string, cause?: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
81893
82433
|
*
|
|
81894
82434
|
* Announces before it acts, so `preventDefault()` on the `helix-before-activate` is
|
|
81895
82435
|
* a refusal and nothing moves. Unlike a native control, nothing has moved
|
|
81896
82436
|
* by the time this runs, so refusing is simply not writing: there is
|
|
81897
82437
|
* nothing to put back. Nobody refusing means the set updates itself,
|
|
81898
82438
|
* whether or not a consumer declared `active`, a declared property being a
|
|
81899
|
-
* seed and a correction.
|
|
82439
|
+
* seed and a correction. `cause` says why, where the family names its
|
|
82440
|
+
* causes, and reaches the event as `detail.cause`.
|
|
81900
82441
|
* - `requestOpen(next: boolean) => boolean`: Requests that the element open or close, and returns whether the change
|
|
81901
82442
|
* was applied.
|
|
81902
82443
|
*
|
|
@@ -91487,6 +92028,13 @@ export type CustomElementsSolidJs = {
|
|
|
91487
92028
|
* only whoever put it there knows that, which is the same reason `min` is a
|
|
91488
92029
|
* consumer's to set.
|
|
91489
92030
|
* - `corner-label`/`cornerLabel`: The name of the handle where two dividers cross, read by screen readers.
|
|
92031
|
+
* - `corner-value-label`/`cornerValueLabel`: What the handle where two dividers cross says it is set to, both dividers
|
|
92032
|
+
* at once: `{across}` is where the divider that runs down stands, and
|
|
92033
|
+
* `{down}` where the one that runs across stands, each a percentage.
|
|
92034
|
+
*
|
|
92035
|
+
* **Both, because the handle moves both**, and a number names one: the
|
|
92036
|
+
* handle's `aria-valuenow` is the divider its `aria-orientation` names, and
|
|
92037
|
+
* these words are the whole of where it is.
|
|
91490
92038
|
* - `default-collapsed`/`defaultCollapsed`: Which pane starts shut, when `collapsed` is not set.
|
|
91491
92039
|
* - `default-position`/`defaultPosition`: Where the divider starts, when `position` is not set.
|
|
91492
92040
|
* - `label`: The divider's name, read by screen readers.
|
|
@@ -91947,14 +92495,15 @@ export type CustomElementsSolidJs = {
|
|
|
91947
92495
|
*
|
|
91948
92496
|
* Methods that can be called to access component functionality.
|
|
91949
92497
|
*
|
|
91950
|
-
* - `requestActive(next: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
92498
|
+
* - `requestActive(next: string, cause?: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
91951
92499
|
*
|
|
91952
92500
|
* Announces before it acts, so `preventDefault()` on the `helix-before-activate` is
|
|
91953
92501
|
* a refusal and nothing moves. Unlike a native control, nothing has moved
|
|
91954
92502
|
* by the time this runs, so refusing is simply not writing: there is
|
|
91955
92503
|
* nothing to put back. Nobody refusing means the set updates itself,
|
|
91956
92504
|
* whether or not a consumer declared `active`, a declared property being a
|
|
91957
|
-
* seed and a correction.
|
|
92505
|
+
* seed and a correction. `cause` says why, where the family names its
|
|
92506
|
+
* causes, and reaches the event as `detail.cause`.
|
|
91958
92507
|
* - `next() => boolean`: Moves to the next stage that can be gone to, as Ark UI's `goToNextStep`
|
|
91959
92508
|
* does. Returns whether it moved: not past the last stage, not into a stage
|
|
91960
92509
|
* `linear` holds out of reach, and not where a listener refused.
|
|
@@ -92664,6 +93213,8 @@ export type CustomElementsSolidJs = {
|
|
|
92664
93213
|
* and a list here would be a second way to say what that says. This table's
|
|
92665
93214
|
* cells are markup, and a table written as rows of cells with no column
|
|
92666
93215
|
* declared in it has nowhere else to be sized from.
|
|
93216
|
+
* - `default-expanded`/`defaultExpanded`: The keys of the rows whose rows are shown at the start, separated by
|
|
93217
|
+
* commas. Used until `expanded` is set.
|
|
92667
93218
|
* - `default-selected`/`defaultSelected`: The keys selected at the start, separated by commas. Used until `selected`
|
|
92668
93219
|
* is set.
|
|
92669
93220
|
* - `default-sort`/`defaultSort`: The starting sort order, used until `sort` is set.
|
|
@@ -92676,6 +93227,11 @@ export type CustomElementsSolidJs = {
|
|
|
92676
93227
|
* While it is set, a line after the rows shows it, or your own content in the
|
|
92677
93228
|
* `error` slot, in place of the empty and loading lines, and the live region
|
|
92678
93229
|
* says it.
|
|
93230
|
+
* - `expand-column-label`/`expandColumnLabel`: The name of the heading over the disclosure buttons.
|
|
93231
|
+
* - `expanded`: The keys of the rows whose rows are shown, separated by commas, in a table
|
|
93232
|
+
* whose rows nest. A press on a row's disclosure button asks first, and
|
|
93233
|
+
* `default-expanded` seeds what this element then owns.
|
|
93234
|
+
* - `expand-row-label`/`expandRowLabel`: The name of a row's disclosure button. `{row}` is the words of the row's first cell.
|
|
92679
93235
|
* - `fallback-label`/`fallbackLabel`: The table's name where neither `label` nor an `aria-label` or
|
|
92680
93236
|
* `aria-labelledby` on the host gives it one.
|
|
92681
93237
|
* - `grid`: Makes the table a grid: one tab stop, and the arrow keys, Home, End and the
|
|
@@ -92689,6 +93245,8 @@ export type CustomElementsSolidJs = {
|
|
|
92689
93245
|
*
|
|
92690
93246
|
* An `aria-label` or `aria-labelledby` on the host names the table too, and
|
|
92691
93247
|
* wins over this.
|
|
93248
|
+
* - `load-more`/`loadMore`: Sends `helix-load-more` once the end of the table comes within a screen
|
|
93249
|
+
* of view, so you can add the next rows as a reader nears them.
|
|
92692
93250
|
* - `moved-label`/`movedLabel`: What screen readers hear each time a key moves a held row, in a
|
|
92693
93251
|
* `reorderable` table. `{name}` is the row's words, `{position}` the place it
|
|
92694
93252
|
* would go, counting from 1, and `{count}` the number of rows.
|
|
@@ -92702,6 +93260,8 @@ export type CustomElementsSolidJs = {
|
|
|
92702
93260
|
* - `selectable`: Adds a column of checkboxes for selecting rows. Each row is known by its
|
|
92703
93261
|
* `value`, and by its place among the rows as written where it has none.
|
|
92704
93262
|
* - `select-all-label`/`selectAllLabel`: The name of the checkbox in the heading that selects every row.
|
|
93263
|
+
* - `select-column-label`/`selectColumnLabel`: The name of the heading over the checkboxes under
|
|
93264
|
+
* `selection-mode="single"`, where it holds no checkbox of its own.
|
|
92705
93265
|
* - `selected`: The keys of the selected rows, separated by commas.
|
|
92706
93266
|
*
|
|
92707
93267
|
* A reader's press fires `helix-select` first, and refusing it leaves the
|
|
@@ -92711,6 +93271,11 @@ export type CustomElementsSolidJs = {
|
|
|
92711
93271
|
* rows are chosen, written in the locale, and a language that needs plural
|
|
92712
93272
|
* forms writes them: `{count, plural, one {# wybrany} few {# wybrane} many
|
|
92713
93273
|
* {# wybranych} other {# wybranego}}`.
|
|
93274
|
+
* - `selection-behavior`/`selectionBehavior`: What a press on a row, or in a `grid` table a key that moves to one, does
|
|
93275
|
+
* to the rows already selected: `toggle`, the default, leaves them to the
|
|
93276
|
+
* checkboxes, and `replace` selects the row alone.
|
|
93277
|
+
* - `selection-mode`/`selectionMode`: How many rows a `selectable` table selects: `multiple`, the default, or
|
|
93278
|
+
* `single`, one at a time.
|
|
92714
93279
|
* - `select-row-label`/`selectRowLabel`: The name of a row's checkbox. `{row}` is replaced with the words of the
|
|
92715
93280
|
* row's first cell.
|
|
92716
93281
|
* - `sort`: The sort order, as `field:direction`, where `field` is a sortable column's
|
|
@@ -92752,11 +93317,14 @@ export type CustomElementsSolidJs = {
|
|
|
92752
93317
|
* Events that will be emitted by the component.
|
|
92753
93318
|
*
|
|
92754
93319
|
* - `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.
|
|
93320
|
+
* - `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.
|
|
93321
|
+
* - `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.
|
|
92755
93322
|
* - `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.
|
|
92756
93323
|
* - `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.
|
|
92757
93324
|
* - `helix-selected`: Fired after the selection changes, with every selected key, separated by commas.
|
|
92758
93325
|
* - `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.
|
|
92759
93326
|
* - `helix-sorted`: Fired after the sort order changes, with the new order.
|
|
93327
|
+
* - `helix-toggle`: Fired from a row once the rows under it are shown or hidden, with whether it is open in `detail.checked`.
|
|
92760
93328
|
*
|
|
92761
93329
|
* ## Slots
|
|
92762
93330
|
*
|
|
@@ -92813,6 +93381,7 @@ export type CustomElementsSolidJs = {
|
|
|
92813
93381
|
* - `checkbox-mark-indeterminate`: Added to `checkbox-mark` while only some rows are selected.
|
|
92814
93382
|
* - `empty`: The text shown when there are no rows.
|
|
92815
93383
|
* - `error`: The line shown after the rows while `error-text` is set, in place of the empty and loading text.
|
|
93384
|
+
* - `expand-head`: The heading over the disclosure buttons, in a table whose rows nest.
|
|
92816
93385
|
* - `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.
|
|
92817
93386
|
* - `grid-start`: An empty box before the rows, in a `grid` table. Shift with Tab focuses it on its way out of the table.
|
|
92818
93387
|
* - `grip-head`: The heading over the row grips, in a `reorderable` table.
|
|
@@ -92853,6 +93422,9 @@ export type CustomElementsSolidJs = {
|
|
|
92853
93422
|
* reached.
|
|
92854
93423
|
* - `href`: The URL a press on the row follows, which makes the whole row a link.
|
|
92855
93424
|
* Empty, the default, leaves presses to the row's cells.
|
|
93425
|
+
* - `parent`: The key of the row this one sits under, in a table whose rows nest: that
|
|
93426
|
+
* row's `value`, or its place among the rows where it has none. Empty, the
|
|
93427
|
+
* default, is a row at the top.
|
|
92856
93428
|
* - `rel`: The `rel` of the row's link. You set it yourself, as on an anchor.
|
|
92857
93429
|
* - `target`: Where the row's link opens, such as `_blank`.
|
|
92858
93430
|
* - `value`: The key the table's `selected` lists this row by. Left empty, the row is
|
|
@@ -92891,10 +93463,13 @@ export type CustomElementsSolidJs = {
|
|
|
92891
93463
|
* - `--table-dragging-opacity`: The opacity of a row being moved, in a `reorderable` table.
|
|
92892
93464
|
* - `--table-drop-indicator-color`: The color of the line where a moved row would land.
|
|
92893
93465
|
* - `--table-drop-indicator-size`: The thickness of the line where a moved row would land.
|
|
93466
|
+
* - `--table-expand-color`: The color of a row's disclosure button, in a table whose rows nest.
|
|
92894
93467
|
* - `--table-grip-color`: The color of a row's grip, in a `reorderable` table.
|
|
92895
93468
|
* - `--table-grip-disabled-opacity`: The opacity of a row's grip while a sort decides the order.
|
|
93469
|
+
* - `--table-indent`: How far each step of depth sets a nested row's disclosure cell in.
|
|
92896
93470
|
* - `--table-row-disabled-opacity`: The opacity of the cells of a `disabled` row.
|
|
92897
93471
|
* - `--table-row-hover-background-color`: The wash across the cells of a row with `href` under the pointer.
|
|
93472
|
+
* - `--table-row-level`: Written by the row on its `expand` cell: how deep the row sits, from 1. Do not set it.
|
|
92898
93473
|
*
|
|
92899
93474
|
* ## CSS Parts
|
|
92900
93475
|
*
|
|
@@ -92911,6 +93486,9 @@ export type CustomElementsSolidJs = {
|
|
|
92911
93486
|
* - `checkbox-mark-checked`: Added to `checkbox-mark` while its box is checked.
|
|
92912
93487
|
* - `checkbox-mark-dash`: Added to `checkbox-mark` while it draws the dash, which it keeps until its box is checked.
|
|
92913
93488
|
* - `checkbox-mark-indeterminate`: Added to `checkbox-mark` while only some rows are selected.
|
|
93489
|
+
* - `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.
|
|
93490
|
+
* - `expand-button`: The button that shows and hides the rows under this one.
|
|
93491
|
+
* - `expand-mark`: The caret on the disclosure button, which points along the line, turned down by the styled tier while the row is open.
|
|
92914
93492
|
* - `grip`: The cell that holds the row's grip, in a `reorderable` table.
|
|
92915
93493
|
* - `grip-button`: The button that moves the row.
|
|
92916
93494
|
* - `grip-mark`: The icon on the grip.
|
|
@@ -92924,6 +93502,7 @@ export type CustomElementsSolidJs = {
|
|
|
92924
93502
|
* - `dragging`: The row is being moved, in a `reorderable` table.
|
|
92925
93503
|
* - `drop-after`: The row being moved goes after this one when it is dropped.
|
|
92926
93504
|
* - `drop-before`: The row being moved goes before this one when it is dropped.
|
|
93505
|
+
* - `expanded`: While the rows under this one are shown.
|
|
92927
93506
|
* - `link`: While the row has `href` and is not `disabled`, so a press on it follows the link.
|
|
92928
93507
|
* - `selected`: While the row is selected, in a `selectable` table.
|
|
92929
93508
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
@@ -93126,14 +93705,15 @@ export type CustomElementsSolidJs = {
|
|
|
93126
93705
|
*
|
|
93127
93706
|
* Methods that can be called to access component functionality.
|
|
93128
93707
|
*
|
|
93129
|
-
* - `requestActive(next: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
93708
|
+
* - `requestActive(next: string, cause?: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
93130
93709
|
*
|
|
93131
93710
|
* Announces before it acts, so `preventDefault()` on the `helix-before-activate` is
|
|
93132
93711
|
* a refusal and nothing moves. Unlike a native control, nothing has moved
|
|
93133
93712
|
* by the time this runs, so refusing is simply not writing: there is
|
|
93134
93713
|
* nothing to put back. Nobody refusing means the set updates itself,
|
|
93135
93714
|
* whether or not a consumer declared `active`, a declared property being a
|
|
93136
|
-
* seed and a correction.
|
|
93715
|
+
* seed and a correction. `cause` says why, where the family names its
|
|
93716
|
+
* causes, and reaches the event as `detail.cause`.
|
|
93137
93717
|
*
|
|
93138
93718
|
* ## CSS Custom Properties
|
|
93139
93719
|
*
|
|
@@ -94865,11 +95445,20 @@ export type CustomElementsSolidJs = {
|
|
|
94865
95445
|
* Whatever `<time>` accepts, which is a date, a time, both, a duration or a
|
|
94866
95446
|
* week. Unset, the label is written as it was given and nothing claims to
|
|
94867
95447
|
* know what instant it names.
|
|
95448
|
+
* - `pending`: Marks an event that has not happened yet, such as one that is scheduled.
|
|
95449
|
+
* The mark is the open circle, and a screen reader hears `pending-label`.
|
|
95450
|
+
* - `pending-label`/`pendingLabel`: What a screen reader hears for an entry that is `pending`.
|
|
94868
95451
|
* - `relative`: Writes the time as how long ago it was, or how long until it, from
|
|
94869
95452
|
* `datetime`, where the `time` slot is empty: `long` ("3 hours ago"),
|
|
94870
95453
|
* `short` ("3 hr. ago") or `narrow` ("3h ago"). Set with no value, it is
|
|
94871
95454
|
* `long`. The words move on as they go stale.
|
|
94872
|
-
* - `tone`: The kind of event. It sets the color of the mark and
|
|
95455
|
+
* - `tone`: The kind of event. It sets the color of the mark, and a screen reader
|
|
95456
|
+
* hears it as the word `tone-labels` gives it.
|
|
95457
|
+
* - `tone-label`/`toneLabel`: What a screen reader is told this entry's tone is, such as "Failed".
|
|
95458
|
+
* Absent is the tone's word in `tone-labels`.
|
|
95459
|
+
* - `tone-labels`/`toneLabels`: What a screen reader is told each tone is, by the tone's name, written as
|
|
95460
|
+
* JSON in the attribute: `tone-labels='{"danger":"Failed"}'`. A tone with no
|
|
95461
|
+
* word is not read, which is `neutral` and `primary` in English.
|
|
94873
95462
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
94874
95463
|
*
|
|
94875
95464
|
* **Named `whenSettled` because `settled` is taken four times over**, by
|
|
@@ -94896,7 +95485,7 @@ export type CustomElementsSolidJs = {
|
|
|
94896
95485
|
* Areas where markup can be added to the component.
|
|
94897
95486
|
*
|
|
94898
95487
|
* - `(default)`: What happened.
|
|
94899
|
-
* - `marker`: The mark on the line. Defaults to a dot, which is the slot's fallback content.
|
|
95488
|
+
* - `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.
|
|
94900
95489
|
* - `time`: When it happened, written the way you want it shown.
|
|
94901
95490
|
*
|
|
94902
95491
|
* ## CSS Custom Properties
|
|
@@ -94917,7 +95506,7 @@ export type CustomElementsSolidJs = {
|
|
|
94917
95506
|
*
|
|
94918
95507
|
* - `content`: What happened, and the time above it.
|
|
94919
95508
|
* - `dot`: The dot drawn when no marker is slotted.
|
|
94920
|
-
* - `marker`: The mark on the line.
|
|
95509
|
+
* - `marker`: The mark on the line. An image named by the tone's word, and by `pending-label`, where either applies.
|
|
94921
95510
|
* - `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.
|
|
94922
95511
|
* - `time`: When it happened.
|
|
94923
95512
|
*
|
|
@@ -96666,14 +97255,15 @@ export type CustomElementsSolidJs = {
|
|
|
96666
97255
|
*
|
|
96667
97256
|
* Methods that can be called to access component functionality.
|
|
96668
97257
|
*
|
|
96669
|
-
* - `requestActive(next: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
97258
|
+
* - `requestActive(next: string, cause?: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
96670
97259
|
*
|
|
96671
97260
|
* Announces before it acts, so `preventDefault()` on the `helix-before-activate` is
|
|
96672
97261
|
* a refusal and nothing moves. Unlike a native control, nothing has moved
|
|
96673
97262
|
* by the time this runs, so refusing is simply not writing: there is
|
|
96674
97263
|
* nothing to put back. Nobody refusing means the set updates itself,
|
|
96675
97264
|
* whether or not a consumer declared `active`, a declared property being a
|
|
96676
|
-
* seed and a correction.
|
|
97265
|
+
* seed and a correction. `cause` says why, where the family names its
|
|
97266
|
+
* causes, and reaches the event as `detail.cause`.
|
|
96677
97267
|
*
|
|
96678
97268
|
* ## CSS Custom Properties
|
|
96679
97269
|
*
|
|
@@ -96870,6 +97460,12 @@ export type CustomElementsSolidJs = {
|
|
|
96870
97460
|
* Written by the playlist rather than by the entry, the way an option's
|
|
96871
97461
|
* selection is: an entry that made itself current would be a second answer to
|
|
96872
97462
|
* which one is playing. (property only)
|
|
97463
|
+
* - `focusable`: Whether the entry holds the playlist's tab stop. Unset, every entry is in
|
|
97464
|
+
* the tab order, which is what a server renders.
|
|
97465
|
+
*
|
|
97466
|
+
* **Written by the playlist, with no attribute, and it reaches the button.**
|
|
97467
|
+
* The playlist gives the stop to the entry a reader last focused, or to the
|
|
97468
|
+
* current one, and the arrow keys reach the rest. (property only)
|
|
96873
97469
|
* - `text`: The entry's name: its own text, without the content in its named slots.
|
|
96874
97470
|
*
|
|
96875
97471
|
* `textContent` takes the whole subtree: a row with a duration in `meta`
|
|
@@ -96911,6 +97507,7 @@ export type CustomElementsSolidJs = {
|
|
|
96911
97507
|
* Areas where markup can be added to the component.
|
|
96912
97508
|
*
|
|
96913
97509
|
* - `(default)`: The entry's name.
|
|
97510
|
+
* - `indicator`: A mark shown on the entry that is playing, such as an equalizer icon. Rendered only while the entry is current.
|
|
96914
97511
|
* - `media`: A thumbnail. Defaults to an image of `poster`.
|
|
96915
97512
|
* - `meta`: Content after the name, such as a duration or a date.
|
|
96916
97513
|
*
|
|
@@ -96945,6 +97542,7 @@ export type CustomElementsSolidJs = {
|
|
|
96945
97542
|
* Custom selectors for styling elements within the component.
|
|
96946
97543
|
*
|
|
96947
97544
|
* - `container`: The list item that holds the button.
|
|
97545
|
+
* - `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.
|
|
96948
97546
|
* - `item`: The row, which is a button.
|
|
96949
97547
|
* - `item-current`: Added to `item` for the entry that is playing.
|
|
96950
97548
|
* - `label`: The name and the content after it.
|
|
@@ -97091,7 +97689,11 @@ export type CustomElementsSolidJs = {
|
|
|
97091
97689
|
* - `default-active`/`defaultActive`: The `value` of the item declared current in markup.
|
|
97092
97690
|
*
|
|
97093
97691
|
* Ignored once `active` is written.
|
|
97692
|
+
* - `empty-label`/`emptyLabel`: What the playlist says while it has no entries. The `empty` slot replaces it.
|
|
97094
97693
|
* - `label`: The list's name, read by screen readers.
|
|
97694
|
+
* - `no-advance`/`noAdvance`: Stays on an entry when its clip ends, where the playlist would otherwise
|
|
97695
|
+
* play the next one. The player's controls, a press, and `next()` still
|
|
97696
|
+
* move. `repeat="one"` still plays the entry again.
|
|
97095
97697
|
* - `playing-label`/`playingLabel`: What the live region says when the playlist moves to another entry.
|
|
97096
97698
|
* `{title}` is the entry's name.
|
|
97097
97699
|
*
|
|
@@ -97140,7 +97742,7 @@ export type CustomElementsSolidJs = {
|
|
|
97140
97742
|
* Events that will be emitted by the component.
|
|
97141
97743
|
*
|
|
97142
97744
|
* - `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.
|
|
97143
|
-
* - `helix-before-activate`: The current entry is about to change. Cancelable: cancel it to keep the current entry.
|
|
97745
|
+
* - `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.
|
|
97144
97746
|
* - `helix-end`: The last entry finished playing, and the playlist stopped there. Not sent while `repeat` is set.
|
|
97145
97747
|
*
|
|
97146
97748
|
* ## Slots
|
|
@@ -97148,20 +97750,22 @@ export type CustomElementsSolidJs = {
|
|
|
97148
97750
|
* Areas where markup can be added to the component.
|
|
97149
97751
|
*
|
|
97150
97752
|
* - `(default)`: The entries.
|
|
97753
|
+
* - `empty`: Shown while the playlist has no entries. Defaults to `empty-label`.
|
|
97151
97754
|
* - `player`: The player that plays the entries.
|
|
97152
97755
|
*
|
|
97153
97756
|
* ## Methods
|
|
97154
97757
|
*
|
|
97155
97758
|
* Methods that can be called to access component functionality.
|
|
97156
97759
|
*
|
|
97157
|
-
* - `requestActive(next: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
97760
|
+
* - `requestActive(next: string, cause?: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
97158
97761
|
*
|
|
97159
97762
|
* Announces before it acts, so `preventDefault()` on the `helix-before-activate` is
|
|
97160
97763
|
* a refusal and nothing moves. Unlike a native control, nothing has moved
|
|
97161
97764
|
* by the time this runs, so refusing is simply not writing: there is
|
|
97162
97765
|
* nothing to put back. Nobody refusing means the set updates itself,
|
|
97163
97766
|
* whether or not a consumer declared `active`, a declared property being a
|
|
97164
|
-
* seed and a correction.
|
|
97767
|
+
* seed and a correction. `cause` says why, where the family names its
|
|
97768
|
+
* causes, and reaches the event as `detail.cause`.
|
|
97165
97769
|
* - `next() => void`: Moves to the next entry and plays it, as the player's next control does.
|
|
97166
97770
|
* Follows `shuffle`, goes round under `repeat="all"`, and stays on the last
|
|
97167
97771
|
* entry otherwise.
|
|
@@ -97172,6 +97776,8 @@ export type CustomElementsSolidJs = {
|
|
|
97172
97776
|
*
|
|
97173
97777
|
* CSS variables available for styling the component.
|
|
97174
97778
|
*
|
|
97779
|
+
* - `--video-playlist-empty-color`: The color of the words shown while there are no entries.
|
|
97780
|
+
* - `--video-playlist-empty-padding`: The space around the words shown while there are no entries.
|
|
97175
97781
|
* - `--video-playlist-gap`: The space between the player and the list.
|
|
97176
97782
|
* - `--video-playlist-items-gap`: The space between the entries.
|
|
97177
97783
|
* - `--video-playlist-layout`: The grid columns for the player and the list.
|
|
@@ -97181,6 +97787,7 @@ export type CustomElementsSolidJs = {
|
|
|
97181
97787
|
*
|
|
97182
97788
|
* Custom selectors for styling elements within the component.
|
|
97183
97789
|
*
|
|
97790
|
+
* - `empty`: The box that holds the `empty` slot, drawn while there are no entries.
|
|
97184
97791
|
* - `items`: The list of entries.
|
|
97185
97792
|
* - `live`: A live region that says which entry plays after the playlist moves.
|
|
97186
97793
|
* - `player`: The region that holds the player.
|
|
@@ -97657,6 +98264,8 @@ export type CustomElementsSolidJs = {
|
|
|
97657
98264
|
* - `columns`: How many items a line holds. One, the default, is a list; more lays the
|
|
97658
98265
|
* items out as a grid of that many equal columns, windowed a line at a
|
|
97659
98266
|
* time, with Left and Right moving along a line.
|
|
98267
|
+
* - `disabled-keys`/`disabledKeys`: The keys of the items a reader cannot choose or move to, separated by
|
|
98268
|
+
* commas, as `value` writes keys. Their rows carry `aria-disabled`.
|
|
97660
98269
|
* - `empty-label`/`emptyLabel`: The text of the row shown when there are no items and none are loading,
|
|
97661
98270
|
* where the `empty` slot is empty. Empty, the default, shows no row.
|
|
97662
98271
|
* - `estimate`: The height of one row, in pixels, used to find the row at a scroll offset.
|
|
@@ -97665,6 +98274,10 @@ export type CustomElementsSolidJs = {
|
|
|
97665
98274
|
* right whenever the rows really are one height and is the cheaper of the two.
|
|
97666
98275
|
* - `for`: The id of the script element that holds the items as JSON. `items` wins
|
|
97667
98276
|
* where both are set.
|
|
98277
|
+
* - `gap`: The space between two rows, and between two columns in a grid, in
|
|
98278
|
+
* pixels. The list counts it in each row's place, so a gap does not walk
|
|
98279
|
+
* the rows away from the scroll position the way a margin on each row
|
|
98280
|
+
* would.
|
|
97668
98281
|
* - `key-field`/`keyField`: The field of each item that is its key in `value`, as a key or a path of
|
|
97669
98282
|
* keys. Empty reads a string or a number item as its own key, and any
|
|
97670
98283
|
* other item by its place in the set.
|
|
@@ -97689,6 +98302,12 @@ export type CustomElementsSolidJs = {
|
|
|
97689
98302
|
* disagree with itself; measuring is what a set of genuinely different
|
|
97690
98303
|
* heights needs and costs a read of each row as it renders. A list of
|
|
97691
98304
|
* one-line rows should leave this alone.
|
|
98305
|
+
* - `min-column-width`/`minColumnWidth`: The narrowest a column of a grid may be, in pixels. Set, the list lays
|
|
98306
|
+
* out as many columns as fit the box at that width, at least one, and
|
|
98307
|
+
* follows the box as it resizes, which `columns` then does not decide.
|
|
98308
|
+
* - `selection-behavior`/`selectionBehavior`: What a press does to the items already chosen: `toggle` adds or takes out
|
|
98309
|
+
* the item, and `replace` selects it alone and lets the arrow keys carry the
|
|
98310
|
+
* selection, with Control or Command adding or taking out one item.
|
|
97692
98311
|
* - `selection-mode`/`selectionMode`: Makes the list a list box a reader chooses from: `single` selects one
|
|
97693
98312
|
* item, and `multiple` any number. Unset is a list a reader reads.
|
|
97694
98313
|
* - `text-field`/`textField`: The field of each item that typing matches, as a key or a path of keys
|
|
@@ -97766,6 +98385,7 @@ export type CustomElementsSolidJs = {
|
|
|
97766
98385
|
* CSS variables available for styling the component.
|
|
97767
98386
|
*
|
|
97768
98387
|
* - `--virtual-list-block-size`: How tall the scrolling box is.
|
|
98388
|
+
* - `--virtual-list-disabled-opacity`: How faint a row `disabled-keys` names is drawn.
|
|
97769
98389
|
* - `--virtual-list-empty-color`: The color of the text in the row shown when there are no items.
|
|
97770
98390
|
* - `--virtual-list-empty-padding`: The space around the text in the row shown when there are no items.
|
|
97771
98391
|
* - `--virtual-list-loading-color`: The color of the text in the row drawn while `loading` is set.
|
|
@@ -98237,12 +98857,24 @@ export type CustomCssProperties = {
|
|
|
98237
98857
|
"--code-block-label-color"?: (string) | undefined;
|
|
98238
98858
|
/** The line height of the code and its line numbers, as a number or a length. */
|
|
98239
98859
|
"--code-block-line-height"?: (string) | undefined;
|
|
98860
|
+
/** The band behind the lines `mark-lines` names. The primary color at a wash by default. */
|
|
98861
|
+
"--code-block-mark-color"?: (string) | undefined;
|
|
98862
|
+
/** The edge at the start of a band behind marked lines. The primary color by default. */
|
|
98863
|
+
"--code-block-mark-edge-color"?: (string) | undefined;
|
|
98240
98864
|
/** The tallest the code grows before it scrolls, or until `expandable`'s button shows every line. The default is no limit. */
|
|
98241
98865
|
"--code-block-max-block-size"?: (string) | undefined;
|
|
98242
98866
|
/** The corner radius of the header's top and the block's bottom, which form one shape. */
|
|
98243
98867
|
"--code-block-radius"?: (string) | undefined;
|
|
98244
98868
|
/** The color a diff's removed lines are tinted in and their `-` is drawn in. The danger color by default. */
|
|
98245
98869
|
"--code-block-removed-color"?: (string) | undefined;
|
|
98870
|
+
/** 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. */
|
|
98871
|
+
"--code-block-line-size"?: (string) | undefined;
|
|
98872
|
+
/** Written by the block on each `mark`: how wide the code is, scrolled part included. Do not set it. */
|
|
98873
|
+
"--code-block-mark-inline-size"?: (string) | undefined;
|
|
98874
|
+
/** Written by the block on each `mark`: how tall its run of lines is. Do not set it. */
|
|
98875
|
+
"--code-block-mark-size"?: (string) | undefined;
|
|
98876
|
+
/** Written by the block on each `mark`: how far down the code its run of lines starts. Do not set it. */
|
|
98877
|
+
"--code-block-mark-start"?: (string) | undefined;
|
|
98246
98878
|
/** Fill behind the fragment. Defaults to the foreground color at 6%, which looks the same on a light page and a dark one. */
|
|
98247
98879
|
"--code-background-color"?: (string) | undefined;
|
|
98248
98880
|
/** The fragment's typeface. Defaults to the mono face. */
|
|
@@ -99833,14 +100465,20 @@ export type CustomCssProperties = {
|
|
|
99833
100465
|
"--table-drop-indicator-color"?: (string) | undefined;
|
|
99834
100466
|
/** The thickness of the line where a moved row would land. */
|
|
99835
100467
|
"--table-drop-indicator-size"?: (string) | undefined;
|
|
100468
|
+
/** The color of a row's disclosure button, in a table whose rows nest. */
|
|
100469
|
+
"--table-expand-color"?: (string) | undefined;
|
|
99836
100470
|
/** The color of a row's grip, in a `reorderable` table. */
|
|
99837
100471
|
"--table-grip-color"?: (string) | undefined;
|
|
99838
100472
|
/** The opacity of a row's grip while a sort decides the order. */
|
|
99839
100473
|
"--table-grip-disabled-opacity"?: (string) | undefined;
|
|
100474
|
+
/** How far each step of depth sets a nested row's disclosure cell in. */
|
|
100475
|
+
"--table-indent"?: (string) | undefined;
|
|
99840
100476
|
/** The opacity of the cells of a `disabled` row. */
|
|
99841
100477
|
"--table-row-disabled-opacity"?: (string) | undefined;
|
|
99842
100478
|
/** The wash across the cells of a row with `href` under the pointer. */
|
|
99843
100479
|
"--table-row-hover-background-color"?: (string) | undefined;
|
|
100480
|
+
/** Written by the row on its `expand` cell: how deep the row sits, from 1. Do not set it. */
|
|
100481
|
+
"--table-row-level"?: (string) | undefined;
|
|
99844
100482
|
/** The space between the tab row and the panel's content. */
|
|
99845
100483
|
"--tabs-panel-padding-block-start"?: (string) | undefined;
|
|
99846
100484
|
/** The space between tabs. */
|
|
@@ -100199,6 +100837,10 @@ export type CustomCssProperties = {
|
|
|
100199
100837
|
"--video-playlist-menu-poster"?: (string) | undefined;
|
|
100200
100838
|
/** The size of the trigger's icon. */
|
|
100201
100839
|
"--video-playlist-menu-size"?: (string) | undefined;
|
|
100840
|
+
/** The color of the words shown while there are no entries. */
|
|
100841
|
+
"--video-playlist-empty-color"?: (string) | undefined;
|
|
100842
|
+
/** The space around the words shown while there are no entries. */
|
|
100843
|
+
"--video-playlist-empty-padding"?: (string) | undefined;
|
|
100202
100844
|
/** The space between the player and the list. */
|
|
100203
100845
|
"--video-playlist-gap"?: (string) | undefined;
|
|
100204
100846
|
/** The space between the entries. */
|
|
@@ -100229,6 +100871,8 @@ export type CustomCssProperties = {
|
|
|
100229
100871
|
"--video-progress"?: (string) | undefined;
|
|
100230
100872
|
/** How tall the scrolling box is. */
|
|
100231
100873
|
"--virtual-list-block-size"?: (string) | undefined;
|
|
100874
|
+
/** How faint a row `disabled-keys` names is drawn. */
|
|
100875
|
+
"--virtual-list-disabled-opacity"?: (string) | undefined;
|
|
100232
100876
|
/** The color of the text in the row shown when there are no items. */
|
|
100233
100877
|
"--virtual-list-empty-color"?: (string) | undefined;
|
|
100234
100878
|
/** The space around the text in the row shown when there are no items. */
|