@fusion.dev/helix-headless 0.176.0 → 0.177.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +610 -696
- package/dist/area-chart/root/area-chart-root.d.ts +18 -1
- package/dist/area-chart/root/area-chart-root.js +2 -2
- package/dist/avatar/root/avatar-root.d.ts +1 -1
- package/dist/avatar/root/avatar-root.js +1 -1
- package/dist/bar-chart/root/bar-chart-root.d.ts +19 -1
- package/dist/bar-chart/root/bar-chart-root.js +2 -2
- package/dist/canvas/node/canvas-node.js +1 -1
- package/dist/canvas/root/canvas-root.d.ts +5 -1
- package/dist/canvas/root/canvas-root.js +9 -1
- package/dist/donut-chart/root/donut-chart-root.d.ts +37 -2
- package/dist/donut-chart/root/donut-chart-root.js +22 -8
- package/dist/element-events.generated.js +2 -0
- package/dist/graph/root/graph-root.d.ts +28 -3
- package/dist/graph/root/graph-root.js +38 -3
- package/dist/heatmap/root/heatmap-root.d.ts +28 -5
- package/dist/heatmap/root/heatmap-root.js +7 -2
- package/dist/line-chart/root/line-chart-root.d.ts +18 -1
- package/dist/line-chart/root/line-chart-root.js +2 -2
- package/dist/loader/root/loader-root.d.ts +15 -0
- package/dist/loader/root/loader-root.js +28 -6
- package/dist/rating/root/rating-root.d.ts +2 -1
- package/dist/rating/root/rating-root.js +8 -2
- package/dist/scatter-chart/root/scatter-chart-root.d.ts +29 -6
- package/dist/scatter-chart/root/scatter-chart-root.js +18 -3
- package/dist/select/root/select-root.d.ts +4 -1
- package/dist/select/root/select-root.js +1 -0
- package/dist/sparkline/root/sparkline-root.d.ts +29 -4
- package/dist/sparkline/root/sparkline-root.js +8 -1
- package/dist/tag/group/tag-group.d.ts +4 -3
- package/dist/tag/group/tag-group.js +6 -5
- package/dist/tag/root/tag-root.js +2 -1
- package/dist/tree/item/tree-item.d.ts +4 -4
- package/dist/tree/item/tree-item.js +5 -1
- package/lint.json +1 -1
- package/package.json +5 -5
- package/types/jsx.d.ts +532 -364
- package/types/vue.d.ts +86 -19
- package/types/words.d.ts +22 -0
package/types/jsx.d.ts
CHANGED
|
@@ -12420,6 +12420,18 @@ Unset is horizontal, or across the toolbar the divider sits in. */
|
|
|
12420
12420
|
textContent?: (string | number) | undefined;
|
|
12421
12421
|
};
|
|
12422
12422
|
|
|
12423
|
+
/** `HelixHeadlessDonutChart` component event */
|
|
12424
|
+
export type HelixHeadlessDonutChartElementEvent<E = Event> = TypedEvent<
|
|
12425
|
+
HelixHeadlessDonutChart,
|
|
12426
|
+
E
|
|
12427
|
+
>;
|
|
12428
|
+
/** `helix-reading-change` event type */
|
|
12429
|
+
export type HelixHeadlessDonutChartHelixReadingChangeElementEvent =
|
|
12430
|
+
HelixHeadlessDonutChartElementEvent<HelixReadingChangeEvent>;
|
|
12431
|
+
/** `helix-reading-press` event type */
|
|
12432
|
+
export type HelixHeadlessDonutChartHelixReadingPressElementEvent =
|
|
12433
|
+
HelixHeadlessDonutChartElementEvent<HelixReadingPressEvent>;
|
|
12434
|
+
|
|
12423
12435
|
export type HelixHeadlessDonutChartProps = {
|
|
12424
12436
|
/** The size of the hole in the middle of the ring.
|
|
12425
12437
|
|
|
@@ -12485,6 +12497,25 @@ rotation that puts the first slice at nine o'clock, the aspect ratio of a
|
|
|
12485
12497
|
box that is no longer square, and where the middle sits once the bottom of
|
|
12486
12498
|
the circle is not drawn. */
|
|
12487
12499
|
sweep?: (HelixHeadlessDonutChart["sweep"]) | undefined;
|
|
12500
|
+
/** The words shown in place of the drawing when the table has no readings,
|
|
12501
|
+
and the fallback of the `empty` slot. */
|
|
12502
|
+
"empty-text"?: (HelixHeadlessDonutChart["emptyText"]) | undefined;
|
|
12503
|
+
/** The words shown in place of the drawing when the table has no readings,
|
|
12504
|
+
and the fallback of the `empty` slot. */
|
|
12505
|
+
emptyText?: (HelixHeadlessDonutChart["emptyText"]) | undefined;
|
|
12506
|
+
/** Whether the readings are still on their way. The chart shows
|
|
12507
|
+
`loading-text` in place of an empty drawing until it has readings.
|
|
12508
|
+
|
|
12509
|
+
Reflected, so a stylesheet can treat the chart while it waits. A chart
|
|
12510
|
+
that already has readings keeps drawing them, so a refresh does not
|
|
12511
|
+
blank it. */
|
|
12512
|
+
loading?: (HelixHeadlessDonutChart["loading"]) | undefined;
|
|
12513
|
+
/** The words shown in place of the drawing while `loading` is set and
|
|
12514
|
+
there are no readings yet, and the fallback of the `loading` slot. */
|
|
12515
|
+
"loading-text"?: (HelixHeadlessDonutChart["loadingText"]) | undefined;
|
|
12516
|
+
/** The words shown in place of the drawing while `loading` is set and
|
|
12517
|
+
there are no readings yet, and the fallback of the `loading` slot. */
|
|
12518
|
+
loadingText?: (HelixHeadlessDonutChart["loadingText"]) | undefined;
|
|
12488
12519
|
/** The id of the table to read.
|
|
12489
12520
|
|
|
12490
12521
|
Names a table in the same tree, so a chart inside another component's
|
|
@@ -12544,6 +12575,15 @@ frame, and the summary, the keys and the readout are then the whole of
|
|
|
12544
12575
|
what a screen reader is given. Set a new object to redraw: the chart
|
|
12545
12576
|
does not look inside the one it has. */
|
|
12546
12577
|
data?: (HelixHeadlessDonutChart["data"]) | undefined;
|
|
12578
|
+
|
|
12579
|
+
/** The slice shown moved, or was put away: `index` is the slice's row, or `-1` for none, with its `label` and the `pointerType` that moved it. */
|
|
12580
|
+
"onhelix-reading-change"?: ((
|
|
12581
|
+
e: HelixHeadlessDonutChartHelixReadingChangeElementEvent,
|
|
12582
|
+
) => void) | undefined;
|
|
12583
|
+
/** A slice was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`. */
|
|
12584
|
+
"onhelix-reading-press"?: ((
|
|
12585
|
+
e: HelixHeadlessDonutChartHelixReadingPressElementEvent,
|
|
12586
|
+
) => void) | undefined;
|
|
12547
12587
|
};
|
|
12548
12588
|
|
|
12549
12589
|
export type HelixHeadlessDonutChartSolidJsProps = {
|
|
@@ -12611,6 +12651,25 @@ rotation that puts the first slice at nine o'clock, the aspect ratio of a
|
|
|
12611
12651
|
box that is no longer square, and where the middle sits once the bottom of
|
|
12612
12652
|
the circle is not drawn. */
|
|
12613
12653
|
"prop:sweep"?: (HelixHeadlessDonutChart["sweep"]) | undefined;
|
|
12654
|
+
/** The words shown in place of the drawing when the table has no readings,
|
|
12655
|
+
and the fallback of the `empty` slot. */
|
|
12656
|
+
"attr:empty-text"?: (HelixHeadlessDonutChart["emptyText"]) | undefined;
|
|
12657
|
+
/** The words shown in place of the drawing when the table has no readings,
|
|
12658
|
+
and the fallback of the `empty` slot. */
|
|
12659
|
+
"prop:emptyText"?: (HelixHeadlessDonutChart["emptyText"]) | undefined;
|
|
12660
|
+
/** Whether the readings are still on their way. The chart shows
|
|
12661
|
+
`loading-text` in place of an empty drawing until it has readings.
|
|
12662
|
+
|
|
12663
|
+
Reflected, so a stylesheet can treat the chart while it waits. A chart
|
|
12664
|
+
that already has readings keeps drawing them, so a refresh does not
|
|
12665
|
+
blank it. */
|
|
12666
|
+
"prop:loading"?: (HelixHeadlessDonutChart["loading"]) | undefined;
|
|
12667
|
+
/** The words shown in place of the drawing while `loading` is set and
|
|
12668
|
+
there are no readings yet, and the fallback of the `loading` slot. */
|
|
12669
|
+
"attr:loading-text"?: (HelixHeadlessDonutChart["loadingText"]) | undefined;
|
|
12670
|
+
/** The words shown in place of the drawing while `loading` is set and
|
|
12671
|
+
there are no readings yet, and the fallback of the `loading` slot. */
|
|
12672
|
+
"prop:loadingText"?: (HelixHeadlessDonutChart["loadingText"]) | undefined;
|
|
12614
12673
|
/** The id of the table to read.
|
|
12615
12674
|
|
|
12616
12675
|
Names a table in the same tree, so a chart inside another component's
|
|
@@ -12670,6 +12729,14 @@ frame, and the summary, the keys and the readout are then the whole of
|
|
|
12670
12729
|
what a screen reader is given. Set a new object to redraw: the chart
|
|
12671
12730
|
does not look inside the one it has. */
|
|
12672
12731
|
"prop:data"?: (HelixHeadlessDonutChart["data"]) | undefined;
|
|
12732
|
+
/** The slice shown moved, or was put away: `index` is the slice's row, or `-1` for none, with its `label` and the `pointerType` that moved it. */
|
|
12733
|
+
"on:helix-reading-change"?: ((
|
|
12734
|
+
e: HelixHeadlessDonutChartHelixReadingChangeElementEvent,
|
|
12735
|
+
) => void) | undefined;
|
|
12736
|
+
/** A slice was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`. */
|
|
12737
|
+
"on:helix-reading-press"?: ((
|
|
12738
|
+
e: HelixHeadlessDonutChartHelixReadingPressElementEvent,
|
|
12739
|
+
) => void) | undefined;
|
|
12673
12740
|
|
|
12674
12741
|
/** Set the innerHTML of the element */
|
|
12675
12742
|
innerHTML?: (string) | undefined;
|
|
@@ -14906,6 +14973,14 @@ own, since the fallback name is the same word. Empty leaves the role. */
|
|
|
14906
14973
|
"selected-label"?: (HelixHeadlessGraph["selectedLabel"]) | undefined;
|
|
14907
14974
|
/** How the selected note is described in the list. */
|
|
14908
14975
|
selectedLabel?: (HelixHeadlessGraph["selectedLabel"]) | undefined;
|
|
14976
|
+
/** What screen readers hear after a reader selects a note, in the list or in
|
|
14977
|
+
the drawing, with `{note}` for its name and `{count}` for how many notes
|
|
14978
|
+
the list then holds, written with `count-label`. */
|
|
14979
|
+
"selection-label"?: (HelixHeadlessGraph["selectionLabel"]) | undefined;
|
|
14980
|
+
/** What screen readers hear after a reader selects a note, in the list or in
|
|
14981
|
+
the drawing, with `{note}` for its name and `{count}` for how many notes
|
|
14982
|
+
the list then holds, written with `count-label`. */
|
|
14983
|
+
selectionLabel?: (HelixHeadlessGraph["selectionLabel"]) | undefined;
|
|
14909
14984
|
/** The hint shown when one finger swipes over the graph with `gestures="cooperative"`. */
|
|
14910
14985
|
"two-finger-hint-label"?: (HelixHeadlessGraph["twoFingerHintLabel"]) | undefined;
|
|
14911
14986
|
/** The hint shown when one finger swipes over the graph with `gestures="cooperative"`. */
|
|
@@ -15237,6 +15312,14 @@ own, since the fallback name is the same word. Empty leaves the role. */
|
|
|
15237
15312
|
"attr:selected-label"?: (HelixHeadlessGraph["selectedLabel"]) | undefined;
|
|
15238
15313
|
/** How the selected note is described in the list. */
|
|
15239
15314
|
"prop:selectedLabel"?: (HelixHeadlessGraph["selectedLabel"]) | undefined;
|
|
15315
|
+
/** What screen readers hear after a reader selects a note, in the list or in
|
|
15316
|
+
the drawing, with `{note}` for its name and `{count}` for how many notes
|
|
15317
|
+
the list then holds, written with `count-label`. */
|
|
15318
|
+
"attr:selection-label"?: (HelixHeadlessGraph["selectionLabel"]) | undefined;
|
|
15319
|
+
/** What screen readers hear after a reader selects a note, in the list or in
|
|
15320
|
+
the drawing, with `{note}` for its name and `{count}` for how many notes
|
|
15321
|
+
the list then holds, written with `count-label`. */
|
|
15322
|
+
"prop:selectionLabel"?: (HelixHeadlessGraph["selectionLabel"]) | undefined;
|
|
15240
15323
|
/** The hint shown when one finger swipes over the graph with `gestures="cooperative"`. */
|
|
15241
15324
|
"attr:two-finger-hint-label"?: (HelixHeadlessGraph["twoFingerHintLabel"]) | undefined;
|
|
15242
15325
|
/** The hint shown when one finger swipes over the graph with `gestures="cooperative"`. */
|
|
@@ -15609,8 +15692,9 @@ no order in it. */
|
|
|
15609
15692
|
/** The name the `overview` gives the total of the readings drawn,
|
|
15610
15693
|
`{totalLabel}` in `overview-label`. */
|
|
15611
15694
|
totalLabel?: (HelixHeadlessHeatmap["totalLabel"]) | undefined;
|
|
15612
|
-
/** The selected cells, by
|
|
15613
|
-
`2026-06-11`,
|
|
15695
|
+
/** The selected cells, separated by commas: each by the date its row's
|
|
15696
|
+
header carries in a `<time datetime>`, such as `2026-06-11`, or by the
|
|
15697
|
+
header's words where it carries none.
|
|
15614
15698
|
|
|
15615
15699
|
Set it to start with cells selected. Written by a press or a key under
|
|
15616
15700
|
`selection-mode`. */
|
|
@@ -15815,8 +15899,9 @@ no order in it. */
|
|
|
15815
15899
|
/** The name the `overview` gives the total of the readings drawn,
|
|
15816
15900
|
`{totalLabel}` in `overview-label`. */
|
|
15817
15901
|
"prop:totalLabel"?: (HelixHeadlessHeatmap["totalLabel"]) | undefined;
|
|
15818
|
-
/** The selected cells, by
|
|
15819
|
-
`2026-06-11`,
|
|
15902
|
+
/** The selected cells, separated by commas: each by the date its row's
|
|
15903
|
+
header carries in a `<time datetime>`, such as `2026-06-11`, or by the
|
|
15904
|
+
header's words where it carries none.
|
|
15820
15905
|
|
|
15821
15906
|
Set it to start with cells selected. Written by a press or a key under
|
|
15822
15907
|
`selection-mode`. */
|
|
@@ -19288,6 +19373,10 @@ loader is on the page.
|
|
|
19288
19373
|
Names an element in the same tree. In React it arrives as a property, the
|
|
19289
19374
|
way `Tooltip.for` does. */
|
|
19290
19375
|
for?: (HelixHeadlessLoader["for"]) | undefined;
|
|
19376
|
+
/** Whether no work is in progress. The loader draws nothing of its own, has
|
|
19377
|
+
no role, and marks no region busy, and what is in the `content` slot
|
|
19378
|
+
shows. Clearing it starts `delay` again. */
|
|
19379
|
+
idle?: (HelixHeadlessLoader["idle"]) | undefined;
|
|
19291
19380
|
/** The loader's name, announced by screen readers while the work is in
|
|
19292
19381
|
progress. */
|
|
19293
19382
|
label?: (HelixHeadlessLoader["label"]) | undefined;
|
|
@@ -19306,6 +19395,10 @@ loader is on the page.
|
|
|
19306
19395
|
Names an element in the same tree. In React it arrives as a property, the
|
|
19307
19396
|
way `Tooltip.for` does. */
|
|
19308
19397
|
"prop:for"?: (HelixHeadlessLoader["for"]) | undefined;
|
|
19398
|
+
/** Whether no work is in progress. The loader draws nothing of its own, has
|
|
19399
|
+
no role, and marks no region busy, and what is in the `content` slot
|
|
19400
|
+
shows. Clearing it starts `delay` again. */
|
|
19401
|
+
"prop:idle"?: (HelixHeadlessLoader["idle"]) | undefined;
|
|
19309
19402
|
/** The loader's name, announced by screen readers while the work is in
|
|
19310
19403
|
progress. */
|
|
19311
19404
|
"prop:label"?: (HelixHeadlessLoader["label"]) | undefined;
|
|
@@ -27790,6 +27883,18 @@ cannot be written in an attribute. */
|
|
|
27790
27883
|
textContent?: (string | number) | undefined;
|
|
27791
27884
|
};
|
|
27792
27885
|
|
|
27886
|
+
/** `HelixHeadlessSparkline` component event */
|
|
27887
|
+
export type HelixHeadlessSparklineElementEvent<E = Event> = TypedEvent<
|
|
27888
|
+
HelixHeadlessSparkline,
|
|
27889
|
+
E
|
|
27890
|
+
>;
|
|
27891
|
+
/** `helix-reading-change` event type */
|
|
27892
|
+
export type HelixHeadlessSparklineHelixReadingChangeElementEvent =
|
|
27893
|
+
HelixHeadlessSparklineElementEvent<HelixReadingChangeEvent>;
|
|
27894
|
+
/** `helix-reading-press` event type */
|
|
27895
|
+
export type HelixHeadlessSparklineHelixReadingPressElementEvent =
|
|
27896
|
+
HelixHeadlessSparklineElementEvent<HelixReadingPressEvent>;
|
|
27897
|
+
|
|
27793
27898
|
export type HelixHeadlessSparklineProps = {
|
|
27794
27899
|
/** How the line is drawn from one reading to the next.
|
|
27795
27900
|
|
|
@@ -27915,6 +28020,15 @@ with `values={[1240, 1318]}`. The attribute is the form to prefer, because
|
|
|
27915
28020
|
a string is what survives React's hydration where an array property does
|
|
27916
28021
|
not. */
|
|
27917
28022
|
values?: (HelixHeadlessSparkline["values"]) | undefined;
|
|
28023
|
+
|
|
28024
|
+
/** The reading shown moved, or was put away: `index` is the reading, or `-1` for none, with its row's `label` from a table and the `pointerType` that moved it. */
|
|
28025
|
+
"onhelix-reading-change"?: ((
|
|
28026
|
+
e: HelixHeadlessSparklineHelixReadingChangeElementEvent,
|
|
28027
|
+
) => void) | undefined;
|
|
28028
|
+
/** A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`. */
|
|
28029
|
+
"onhelix-reading-press"?: ((
|
|
28030
|
+
e: HelixHeadlessSparklineHelixReadingPressElementEvent,
|
|
28031
|
+
) => void) | undefined;
|
|
27918
28032
|
};
|
|
27919
28033
|
|
|
27920
28034
|
export type HelixHeadlessSparklineSolidJsProps = {
|
|
@@ -28042,6 +28156,14 @@ with `values={[1240, 1318]}`. The attribute is the form to prefer, because
|
|
|
28042
28156
|
a string is what survives React's hydration where an array property does
|
|
28043
28157
|
not. */
|
|
28044
28158
|
"prop:values"?: (HelixHeadlessSparkline["values"]) | undefined;
|
|
28159
|
+
/** The reading shown moved, or was put away: `index` is the reading, or `-1` for none, with its row's `label` from a table and the `pointerType` that moved it. */
|
|
28160
|
+
"on:helix-reading-change"?: ((
|
|
28161
|
+
e: HelixHeadlessSparklineHelixReadingChangeElementEvent,
|
|
28162
|
+
) => void) | undefined;
|
|
28163
|
+
/** A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`. */
|
|
28164
|
+
"on:helix-reading-press"?: ((
|
|
28165
|
+
e: HelixHeadlessSparklineHelixReadingPressElementEvent,
|
|
28166
|
+
) => void) | undefined;
|
|
28045
28167
|
|
|
28046
28168
|
/** Set the innerHTML of the element */
|
|
28047
28169
|
innerHTML?: (string) | undefined;
|
|
@@ -30757,8 +30879,9 @@ Absent selects nothing, and the tags carry no selected state at all. */
|
|
|
30757
30879
|
|
|
30758
30880
|
Absent selects nothing, and the tags carry no selected state at all. */
|
|
30759
30881
|
selectionMode?: (HelixHeadlessTagGroup["selectionMode"]) | undefined;
|
|
30760
|
-
/** The selected tags' values, separated by commas
|
|
30761
|
-
space.
|
|
30882
|
+
/** The selected tags' values, separated by commas with no space, as Toggle
|
|
30883
|
+
Group and Table write theirs, since a value may hold a space. A value
|
|
30884
|
+
written with a space after each comma is read the same way.
|
|
30762
30885
|
|
|
30763
30886
|
Set it to start with tags selected. A tag's value is its `value`, or its
|
|
30764
30887
|
words where it has none. */
|
|
@@ -30816,8 +30939,9 @@ Absent selects nothing, and the tags carry no selected state at all. */
|
|
|
30816
30939
|
|
|
30817
30940
|
Absent selects nothing, and the tags carry no selected state at all. */
|
|
30818
30941
|
"prop:selectionMode"?: (HelixHeadlessTagGroup["selectionMode"]) | undefined;
|
|
30819
|
-
/** The selected tags' values, separated by commas
|
|
30820
|
-
space.
|
|
30942
|
+
/** The selected tags' values, separated by commas with no space, as Toggle
|
|
30943
|
+
Group and Table write theirs, since a value may hold a space. A value
|
|
30944
|
+
written with a space after each comma is read the same way.
|
|
30821
30945
|
|
|
30822
30946
|
Set it to start with tags selected. A tag's value is its `value`, or its
|
|
30823
30947
|
words where it has none. */
|
|
@@ -37608,6 +37732,18 @@ export type CustomElements = {
|
|
|
37608
37732
|
* there until readings arrive. The `empty` and `loading` slots take markup in
|
|
37609
37733
|
* their place, such as a link to add the first reading.
|
|
37610
37734
|
*
|
|
37735
|
+
* **Keyboard.** The plot is one tab stop.
|
|
37736
|
+
*
|
|
37737
|
+
* | Key | What it does |
|
|
37738
|
+
* |---|---|
|
|
37739
|
+
* | Tab | Moves focus to the plot and shows the first reading. |
|
|
37740
|
+
* | Right, Left | Moves to the next or the previous reading. On a right-to-left page, Left moves to the next. |
|
|
37741
|
+
* | Down, Up | Moves among the series of the reading. With one series, moves to the next or the previous reading. |
|
|
37742
|
+
* | Home, End | Moves to the first or the last reading. |
|
|
37743
|
+
* | Page Down, Page Up | Moves a tenth of the readings on or back. |
|
|
37744
|
+
* | Enter, Space | Presses the reading shown, which sends `helix-reading-press`. |
|
|
37745
|
+
* | Escape | Puts the reading and its tooltip away. |
|
|
37746
|
+
*
|
|
37611
37747
|
* ## Attributes & Properties
|
|
37612
37748
|
*
|
|
37613
37749
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
@@ -37688,12 +37824,6 @@ export type CustomElements = {
|
|
|
37688
37824
|
* Set it to the words of the page's language, such as `{position} von
|
|
37689
37825
|
* {count}`, or to nothing to say no position. A slice or a series a
|
|
37690
37826
|
* legend hid is not counted.
|
|
37691
|
-
* - `pointer`: Finds the reading nearest the pointer, so the tooltip can sit on it.
|
|
37692
|
-
*
|
|
37693
|
-
* Public for the same reason `series` and `named` are: a protected member
|
|
37694
|
-
* cannot be cast onto across unrelated classes, so it would be invisible to
|
|
37695
|
-
* every chart that needs it. Reading where a pointer is resting is a fair
|
|
37696
|
-
* thing to ask a chart anyway. (property only) (readonly)
|
|
37697
37827
|
* - `data`: The readings as data, in the shape of a table, where the page has no
|
|
37698
37828
|
* table to point `for` at. `for` wins where both are set.
|
|
37699
37829
|
*
|
|
@@ -37732,21 +37862,6 @@ export type CustomElements = {
|
|
|
37732
37862
|
* names an element, and the chart is a generic around its plot: written
|
|
37733
37863
|
* on the host, the name reached nobody. The plot takes it, as Heatmap's
|
|
37734
37864
|
* strip always did. (property only) (readonly)
|
|
37735
|
-
* - `readingsKnown`: Whether the readings have been looked for: false on the server and
|
|
37736
|
-
* while hydrating, where no table is resolved and no data is read. A
|
|
37737
|
-
* chart says it has no readings only once this is true. (property only) (readonly)
|
|
37738
|
-
* - `sourceRows`: Every row of the table, with each cell's text and number.
|
|
37739
|
-
*
|
|
37740
|
-
* This is where a tooltip's content comes from, and it is deliberately not
|
|
37741
|
-
* `series`. A chart draws numbers; a reader resting a pointer on one wants
|
|
37742
|
-
* what the table says, which is `$128k` and not `128000`, and often wants
|
|
37743
|
-
* the column beside it that nothing plotted at all.
|
|
37744
|
-
*
|
|
37745
|
-
* **Not `rows`.** It is the source table's rows, and `rows` on a chart is a
|
|
37746
|
-
* name a chart wants for itself: `helix-heatmap` takes `rows="7"` to mean a
|
|
37747
|
-
* calendar week, and declaring that against a base class whose `rows` is a
|
|
37748
|
-
* `Row[]` getter is a type error at best. Name the member for what it holds
|
|
37749
|
-
* rather than for the shortest word available. (property only) (readonly)
|
|
37750
37865
|
* - `plottedColumns`: The positions of the cells in a row that hold numbers, in table order.
|
|
37751
37866
|
*
|
|
37752
37867
|
* The same test `readSeries` applies when it drops a column of notes: a
|
|
@@ -37792,8 +37907,6 @@ export type CustomElements = {
|
|
|
37792
37907
|
*
|
|
37793
37908
|
* Methods that can be called to access component functionality.
|
|
37794
37909
|
*
|
|
37795
|
-
* - `attributeChangedCallback(name: string, old: string | null, value: string | null) => void`: Called by the browser when an observed attribute changes. A new
|
|
37796
|
-
* `aria-label` asks for an update, because it names the plot.
|
|
37797
37910
|
* - `seriesOf(cell: number) => number | undefined`: The palette slot for the cell at this position in a row.
|
|
37798
37911
|
*
|
|
37799
37912
|
* **A cell's place in its row is not its series' depth, and the tooltip
|
|
@@ -37846,9 +37959,10 @@ export type CustomElements = {
|
|
|
37846
37959
|
* - `live`: The readout: a polite live region that says the reading the keys moved to. Hide it visually.
|
|
37847
37960
|
* - `loading`: The words in place of the drawing while `loading` is set and there are no readings: the `loading` slot, falling back to `loading-text`.
|
|
37848
37961
|
* - `mark`: The invisible point the tooltip is anchored to.
|
|
37849
|
-
* - `plot`: The drawing, which takes focus to be read by key.
|
|
37962
|
+
* - `plot`: The drawing, which takes focus to be read by key. With nothing to draw, a group named as the chart is, holding the `empty` or `loading` part.
|
|
37850
37963
|
* - `summary`: The total and each part's share at the latest reading, written as a sentence for screen readers.
|
|
37851
37964
|
* - `svg`: The drawing surface the bands sit on.
|
|
37965
|
+
* - `table`: The readings as a table, for a screen reader, rendered only where they were drawn from `data`. Hide it visually.
|
|
37852
37966
|
* - `tick`: One number on the axis, placed with `inset-block-start` at its level.
|
|
37853
37967
|
* - `tooltip`: The bubble, forwarded from `Tooltip`.
|
|
37854
37968
|
* - `tooltip-anchor`: The `Tooltip` element itself.
|
|
@@ -37871,6 +37985,9 @@ export type CustomElements = {
|
|
|
37871
37985
|
*
|
|
37872
37986
|
* These can be used to apply styling when a component is in a given state.
|
|
37873
37987
|
*
|
|
37988
|
+
* - `active`: While a reading is shown, under the pointer or the keys, with its tooltip open.
|
|
37989
|
+
* - `empty`: While the `empty` part stands in the plot.
|
|
37990
|
+
* - `loading`: While the `loading` part stands in the plot.
|
|
37874
37991
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
37875
37992
|
*/
|
|
37876
37993
|
"helix-headless-area-chart": Partial<
|
|
@@ -38065,7 +38182,7 @@ export type CustomElements = {
|
|
|
38065
38182
|
*
|
|
38066
38183
|
* Areas where markup can be added to the component.
|
|
38067
38184
|
*
|
|
38068
|
-
* - `(default)`: Shown when there is no usable image, in place of the initials.
|
|
38185
|
+
* - `(default)`: Shown when there is no usable image, in place of the initials. Hidden from assistive technology when the avatar has a `name`, which the host announces.
|
|
38069
38186
|
*
|
|
38070
38187
|
* ## CSS Parts
|
|
38071
38188
|
*
|
|
@@ -38251,6 +38368,19 @@ export type CustomElements = {
|
|
|
38251
38368
|
* there until readings arrive. The `empty` and `loading` slots take markup in
|
|
38252
38369
|
* their place, such as a link to add the first reading.
|
|
38253
38370
|
*
|
|
38371
|
+
* **Keyboard.** The plot is one tab stop.
|
|
38372
|
+
*
|
|
38373
|
+
* | Key | What it does |
|
|
38374
|
+
* |---|---|
|
|
38375
|
+
* | Tab | Moves focus to the plot and shows the first reading. |
|
|
38376
|
+
* | Right, Left | Moves to the next or the previous reading. On a right-to-left page, Left moves to the next. |
|
|
38377
|
+
* | Down, Up | Moves among the series of the reading. With one series, moves to the next or the previous reading. |
|
|
38378
|
+
* | Down, Up under `orientation="horizontal"` | Moves to the next or the previous reading, and Right and Left move among the series. |
|
|
38379
|
+
* | Home, End | Moves to the first or the last reading. |
|
|
38380
|
+
* | Page Down, Page Up | Moves a tenth of the readings on or back. |
|
|
38381
|
+
* | Enter, Space | Presses the reading shown, which sends `helix-reading-press`. |
|
|
38382
|
+
* | Escape | Puts the reading and its tooltip away. |
|
|
38383
|
+
*
|
|
38254
38384
|
* ## Attributes & Properties
|
|
38255
38385
|
*
|
|
38256
38386
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
@@ -38390,12 +38520,6 @@ export type CustomElements = {
|
|
|
38390
38520
|
* Set it to the words of the page's language, such as `{position} von
|
|
38391
38521
|
* {count}`, or to nothing to say no position. A slice or a series a
|
|
38392
38522
|
* legend hid is not counted.
|
|
38393
|
-
* - `pointer`: Finds the reading nearest the pointer, so the tooltip can sit on it.
|
|
38394
|
-
*
|
|
38395
|
-
* Public for the same reason `series` and `named` are: a protected member
|
|
38396
|
-
* cannot be cast onto across unrelated classes, so it would be invisible to
|
|
38397
|
-
* every chart that needs it. Reading where a pointer is resting is a fair
|
|
38398
|
-
* thing to ask a chart anyway. (property only) (readonly)
|
|
38399
38523
|
* - `data`: The readings as data, in the shape of a table, where the page has no
|
|
38400
38524
|
* table to point `for` at. `for` wins where both are set.
|
|
38401
38525
|
*
|
|
@@ -38434,21 +38558,6 @@ export type CustomElements = {
|
|
|
38434
38558
|
* names an element, and the chart is a generic around its plot: written
|
|
38435
38559
|
* on the host, the name reached nobody. The plot takes it, as Heatmap's
|
|
38436
38560
|
* strip always did. (property only) (readonly)
|
|
38437
|
-
* - `readingsKnown`: Whether the readings have been looked for: false on the server and
|
|
38438
|
-
* while hydrating, where no table is resolved and no data is read. A
|
|
38439
|
-
* chart says it has no readings only once this is true. (property only) (readonly)
|
|
38440
|
-
* - `sourceRows`: Every row of the table, with each cell's text and number.
|
|
38441
|
-
*
|
|
38442
|
-
* This is where a tooltip's content comes from, and it is deliberately not
|
|
38443
|
-
* `series`. A chart draws numbers; a reader resting a pointer on one wants
|
|
38444
|
-
* what the table says, which is `$128k` and not `128000`, and often wants
|
|
38445
|
-
* the column beside it that nothing plotted at all.
|
|
38446
|
-
*
|
|
38447
|
-
* **Not `rows`.** It is the source table's rows, and `rows` on a chart is a
|
|
38448
|
-
* name a chart wants for itself: `helix-heatmap` takes `rows="7"` to mean a
|
|
38449
|
-
* calendar week, and declaring that against a base class whose `rows` is a
|
|
38450
|
-
* `Row[]` getter is a type error at best. Name the member for what it holds
|
|
38451
|
-
* rather than for the shortest word available. (property only) (readonly)
|
|
38452
38561
|
* - `plottedColumns`: The positions of the cells in a row that hold numbers, in table order.
|
|
38453
38562
|
*
|
|
38454
38563
|
* The same test `readSeries` applies when it drops a column of notes: a
|
|
@@ -38494,8 +38603,6 @@ export type CustomElements = {
|
|
|
38494
38603
|
*
|
|
38495
38604
|
* Methods that can be called to access component functionality.
|
|
38496
38605
|
*
|
|
38497
|
-
* - `attributeChangedCallback(name: string, old: string | null, value: string | null) => void`: Called by the browser when an observed attribute changes. A new
|
|
38498
|
-
* `aria-label` asks for an update, because it names the plot.
|
|
38499
38606
|
* - `seriesOf(cell: number) => number | undefined`: The palette slot for the cell at this position in a row.
|
|
38500
38607
|
*
|
|
38501
38608
|
* **A cell's place in its row is not its series' depth, and the tooltip
|
|
@@ -38554,9 +38661,10 @@ export type CustomElements = {
|
|
|
38554
38661
|
* - `live`: The readout: a polite live region that says the reading the keys moved to. Hide it visually.
|
|
38555
38662
|
* - `loading`: The words in place of the drawing while `loading` is set and there are no readings: the `loading` slot, falling back to `loading-text`.
|
|
38556
38663
|
* - `mark`: The invisible point the tooltip is anchored to.
|
|
38557
|
-
* - `plot`: The drawing, which takes focus to be read by key.
|
|
38664
|
+
* - `plot`: The drawing, which takes focus to be read by key. With nothing to draw, a group named as the chart is, holding the `empty` or `loading` part.
|
|
38558
38665
|
* - `summary`: The chart's name and each series' highest reading, written as a sentence for screen readers. Hide it visually.
|
|
38559
38666
|
* - `svg`: The drawing surface the bars and lines sit on.
|
|
38667
|
+
* - `table`: The readings as a table, for a screen reader, rendered only where they were drawn from `data`. Hide it visually.
|
|
38560
38668
|
* - `tick`: One number on an axis.
|
|
38561
38669
|
* - `tooltip`: The tooltip bubble, forwarded from `Tooltip`.
|
|
38562
38670
|
* - `tooltip-anchor`: The `Tooltip` element itself.
|
|
@@ -38579,6 +38687,9 @@ export type CustomElements = {
|
|
|
38579
38687
|
*
|
|
38580
38688
|
* These can be used to apply styling when a component is in a given state.
|
|
38581
38689
|
*
|
|
38690
|
+
* - `active`: While a reading is shown, under the pointer or the keys, with its tooltip open.
|
|
38691
|
+
* - `empty`: While the `empty` part stands in the plot.
|
|
38692
|
+
* - `loading`: While the `loading` part stands in the plot.
|
|
38582
38693
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
38583
38694
|
*/
|
|
38584
38695
|
"helix-headless-bar-chart": Partial<
|
|
@@ -39738,7 +39849,11 @@ export type CustomElements = {
|
|
|
39738
39849
|
* double click zooms out.
|
|
39739
39850
|
*
|
|
39740
39851
|
* Keyboard behavior:
|
|
39741
|
-
* - One card holds the board's tab stop
|
|
39852
|
+
* - One card holds the board's tab stop, and the board itself leaves the tab
|
|
39853
|
+
* order while a card can hold it. Escape on a card goes back out to the
|
|
39854
|
+
* board, where the arrow keys pan it.
|
|
39855
|
+
* - Plus and minus zoom the board, on the board and on a card or a
|
|
39856
|
+
* connection.
|
|
39742
39857
|
* - The arrow keys move through the cards in reading order. The card you land
|
|
39743
39858
|
* on scrolls into view, and its connections are announced with it.
|
|
39744
39859
|
* - The card you land on is selected. Control or Command with an arrow key,
|
|
@@ -45683,6 +45798,27 @@ export type CustomElements = {
|
|
|
45683
45798
|
* follows, the `live` part says the slice in words, and Escape puts the
|
|
45684
45799
|
* tooltip away.
|
|
45685
45800
|
*
|
|
45801
|
+
* **A tap shows the slice under it**, and keeps it until a tap lands
|
|
45802
|
+
* elsewhere. `helix-reading-change` says each move of the slice shown, by
|
|
45803
|
+
* pointer, tap or key, and `helix-reading-press` says a slice was clicked,
|
|
45804
|
+
* tapped, or pressed with Enter or Space, for a page that opens what a slice
|
|
45805
|
+
* stands for. `index` is the slice's row in the table.
|
|
45806
|
+
*
|
|
45807
|
+
* **A chart with nothing to draw says so.** A table with no readings shows
|
|
45808
|
+
* `empty-text`, "No readings", in the plot, and `loading` shows `loading-text`
|
|
45809
|
+
* there until readings arrive. The `empty` and `loading` slots take markup in
|
|
45810
|
+
* their place.
|
|
45811
|
+
*
|
|
45812
|
+
* **Keyboard.** The plot is one tab stop.
|
|
45813
|
+
*
|
|
45814
|
+
* | Key | What it does |
|
|
45815
|
+
* |---|---|
|
|
45816
|
+
* | Tab | Moves focus to the plot and shows the first slice. |
|
|
45817
|
+
* | Any arrow | Right and Down move to the next slice, Left and Up to the previous. On a right-to-left page, Left moves to the next. |
|
|
45818
|
+
* | Home, End | Moves to the first or the last slice. |
|
|
45819
|
+
* | Enter, Space | Presses the slice shown, which sends `helix-reading-press`. |
|
|
45820
|
+
* | Escape | Puts the slice and its tooltip away. |
|
|
45821
|
+
*
|
|
45686
45822
|
* ## Attributes & Properties
|
|
45687
45823
|
*
|
|
45688
45824
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
@@ -45740,6 +45876,16 @@ export type CustomElements = {
|
|
|
45740
45876
|
* rotation that puts the first slice at nine o'clock, the aspect ratio of a
|
|
45741
45877
|
* box that is no longer square, and where the middle sits once the bottom of
|
|
45742
45878
|
* the circle is not drawn.
|
|
45879
|
+
* - `empty-text`/`emptyText`: The words shown in place of the drawing when the table has no readings,
|
|
45880
|
+
* and the fallback of the `empty` slot.
|
|
45881
|
+
* - `loading`: Whether the readings are still on their way. The chart shows
|
|
45882
|
+
* `loading-text` in place of an empty drawing until it has readings.
|
|
45883
|
+
*
|
|
45884
|
+
* Reflected, so a stylesheet can treat the chart while it waits. A chart
|
|
45885
|
+
* that already has readings keeps drawing them, so a refresh does not
|
|
45886
|
+
* blank it.
|
|
45887
|
+
* - `loading-text`/`loadingText`: The words shown in place of the drawing while `loading` is set and
|
|
45888
|
+
* there are no readings yet, and the fallback of the `loading` slot.
|
|
45743
45889
|
* - `for`: The id of the table to read.
|
|
45744
45890
|
*
|
|
45745
45891
|
* Names a table in the same tree, so a chart inside another component's
|
|
@@ -45768,12 +45914,6 @@ export type CustomElements = {
|
|
|
45768
45914
|
*
|
|
45769
45915
|
* The mixin counts the table's rows, and a row with no amount draws no
|
|
45770
45916
|
* slice, so a key stepping by rows would land on a slice that is not there. (property only) (readonly)
|
|
45771
|
-
* - `pointer`: Finds the reading nearest the pointer, so the tooltip can sit on it.
|
|
45772
|
-
*
|
|
45773
|
-
* Public for the same reason `series` and `named` are: a protected member
|
|
45774
|
-
* cannot be cast onto across unrelated classes, so it would be invisible to
|
|
45775
|
-
* every chart that needs it. Reading where a pointer is resting is a fair
|
|
45776
|
-
* thing to ask a chart anyway. (property only) (readonly)
|
|
45777
45917
|
* - `data`: The readings as data, in the shape of a table, where the page has no
|
|
45778
45918
|
* table to point `for` at. `for` wins where both are set.
|
|
45779
45919
|
*
|
|
@@ -45812,21 +45952,6 @@ export type CustomElements = {
|
|
|
45812
45952
|
* names an element, and the chart is a generic around its plot: written
|
|
45813
45953
|
* on the host, the name reached nobody. The plot takes it, as Heatmap's
|
|
45814
45954
|
* strip always did. (property only) (readonly)
|
|
45815
|
-
* - `readingsKnown`: Whether the readings have been looked for: false on the server and
|
|
45816
|
-
* while hydrating, where no table is resolved and no data is read. A
|
|
45817
|
-
* chart says it has no readings only once this is true. (property only) (readonly)
|
|
45818
|
-
* - `sourceRows`: Every row of the table, with each cell's text and number.
|
|
45819
|
-
*
|
|
45820
|
-
* This is where a tooltip's content comes from, and it is deliberately not
|
|
45821
|
-
* `series`. A chart draws numbers; a reader resting a pointer on one wants
|
|
45822
|
-
* what the table says, which is `$128k` and not `128000`, and often wants
|
|
45823
|
-
* the column beside it that nothing plotted at all.
|
|
45824
|
-
*
|
|
45825
|
-
* **Not `rows`.** It is the source table's rows, and `rows` on a chart is a
|
|
45826
|
-
* name a chart wants for itself: `helix-heatmap` takes `rows="7"` to mean a
|
|
45827
|
-
* calendar week, and declaring that against a base class whose `rows` is a
|
|
45828
|
-
* `Row[]` getter is a type error at best. Name the member for what it holds
|
|
45829
|
-
* rather than for the shortest word available. (property only) (readonly)
|
|
45830
45955
|
* - `plottedColumns`: The positions of the cells in a row that hold numbers, in table order.
|
|
45831
45956
|
*
|
|
45832
45957
|
* The same test `readSeries` applies when it drops a column of notes: a
|
|
@@ -45853,11 +45978,20 @@ export type CustomElements = {
|
|
|
45853
45978
|
* browser harness's awaits it alone: a browser always runs the frame, and a
|
|
45854
45979
|
* timer beside it was a bet on how long one takes, which a busy run lost. (property only) (readonly)
|
|
45855
45980
|
*
|
|
45981
|
+
* ## Events
|
|
45982
|
+
*
|
|
45983
|
+
* Events that will be emitted by the component.
|
|
45984
|
+
*
|
|
45985
|
+
* - `helix-reading-change`: The slice shown moved, or was put away: `index` is the slice's row, or `-1` for none, with its `label` and the `pointerType` that moved it.
|
|
45986
|
+
* - `helix-reading-press`: A slice was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`.
|
|
45987
|
+
*
|
|
45856
45988
|
* ## Slots
|
|
45857
45989
|
*
|
|
45858
45990
|
* Areas where markup can be added to the component.
|
|
45859
45991
|
*
|
|
45860
45992
|
* - `(default)`: Content in the middle of the ring, usually a total. It is read by screen readers, while the ring itself is hidden from them.
|
|
45993
|
+
* - `empty`: Content shown in place of the ring when the table has no readings. Falls back to `empty-text`.
|
|
45994
|
+
* - `loading`: Content shown in place of the ring while `loading` is set and there are no readings yet. Falls back to `loading-text`.
|
|
45861
45995
|
*
|
|
45862
45996
|
* ## Methods
|
|
45863
45997
|
*
|
|
@@ -45868,8 +46002,6 @@ export type CustomElements = {
|
|
|
45868
46002
|
* no series the keys could move to.
|
|
45869
46003
|
* - `showsReading(at: number) => boolean`: Whether the slice at this place is drawn, which a slice a legend hid is
|
|
45870
46004
|
* not. The keys pass over it, as the ring closes over it.
|
|
45871
|
-
* - `attributeChangedCallback(name: string, old: string | null, value: string | null) => void`: Called by the browser when an observed attribute changes. A new
|
|
45872
|
-
* `aria-label` asks for an update, because it names the plot.
|
|
45873
46005
|
* - `showsSeries(name: string) => boolean`: Whether the series of this name is drawn, which it is unless a legend
|
|
45874
46006
|
* reading the same table hid it.
|
|
45875
46007
|
*
|
|
@@ -45898,14 +46030,17 @@ export type CustomElements = {
|
|
|
45898
46030
|
* Custom selectors for styling elements within the component.
|
|
45899
46031
|
*
|
|
45900
46032
|
* - `center`: The middle of the ring, holding whatever is slotted.
|
|
46033
|
+
* - `empty`: The words in place of the ring when the table has no readings: the `empty` slot, falling back to `empty-text`. Not drawn while the table cannot be read yet, on the server and during hydration.
|
|
45901
46034
|
* - `live`: The readout: a polite live region that says the slice the keys moved to. Hide it visually.
|
|
46035
|
+
* - `loading`: The words in place of the ring while `loading` is set and there are no readings: the `loading` slot, falling back to `loading-text`.
|
|
45902
46036
|
* - `mark`: The invisible point the tooltip is anchored to.
|
|
45903
|
-
* - `plot`: The drawing, which takes focus to be read by key.
|
|
46037
|
+
* - `plot`: The drawing, which takes focus to be read by key. With nothing to draw, a group named as the chart is, holding the `empty` or `loading` part.
|
|
45904
46038
|
* - `segment`: One slice.
|
|
45905
46039
|
* - `segment-active`: The slice under the pointer. Set alongside `segment`.
|
|
45906
46040
|
* - `segment-edge`: One slice as a closed shape, used to draw its outline.
|
|
45907
46041
|
* - `slice-label`: One slice's share, written on the slice under `slice-labels`. Placed with `left` and `top`, or `inset-inline-start` and `top` on a half ring, and carries its series color as `--chart-series`.
|
|
45908
46042
|
* - `summary`: The chart's name and each slice's share, written as a sentence for screen readers. Hide it visually.
|
|
46043
|
+
* - `table`: The readings as a table, for a screen reader, rendered only where they were drawn from `data`. Hide it visually.
|
|
45909
46044
|
* - `tooltip`: The bubble, forwarded from `Tooltip`.
|
|
45910
46045
|
* - `tooltip-anchor`: The `Tooltip` element itself.
|
|
45911
46046
|
* - `tooltip-arrow`: The bubble's point, forwarded from `Tooltip`.
|
|
@@ -45928,6 +46063,9 @@ export type CustomElements = {
|
|
|
45928
46063
|
*
|
|
45929
46064
|
* These can be used to apply styling when a component is in a given state.
|
|
45930
46065
|
*
|
|
46066
|
+
* - `active`: While a slice is shown, under the pointer or the keys, with its tooltip open.
|
|
46067
|
+
* - `empty`: While the `empty` part stands in place of the ring.
|
|
46068
|
+
* - `loading`: While the `loading` part stands in place of the ring.
|
|
45931
46069
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
45932
46070
|
*/
|
|
45933
46071
|
"helix-headless-donut-chart": Partial<
|
|
@@ -48029,7 +48167,9 @@ export type CustomElements = {
|
|
|
48029
48167
|
*
|
|
48030
48168
|
* Set `legend` to name the groups over the drawing, each a button that shows
|
|
48031
48169
|
* or hides its notes. `hiddenGroups` holds the groups turned off, and the
|
|
48032
|
-
* list holds only what the drawing shows.
|
|
48170
|
+
* list holds only what the drawing shows. The legend is a toolbar and one tab
|
|
48171
|
+
* stop: the arrow keys, Home, End and a group's first letters move between
|
|
48172
|
+
* its buttons, and Space or Enter presses one.
|
|
48033
48173
|
*
|
|
48034
48174
|
* `nodes` and `links` are properties, never markup: a graph of ten thousand
|
|
48035
48175
|
* notes as ten thousand elements would cost what the renderer exists to save.
|
|
@@ -48079,6 +48219,9 @@ export type CustomElements = {
|
|
|
48079
48219
|
* own, since the fallback name is the same word. Empty leaves the role.
|
|
48080
48220
|
* - `search-label`/`searchLabel`: The search field's name.
|
|
48081
48221
|
* - `selected-label`/`selectedLabel`: How the selected note is described in the list.
|
|
48222
|
+
* - `selection-label`/`selectionLabel`: What screen readers hear after a reader selects a note, in the list or in
|
|
48223
|
+
* the drawing, with `{note}` for its name and `{count}` for how many notes
|
|
48224
|
+
* the list then holds, written with `count-label`.
|
|
48082
48225
|
* - `two-finger-hint-label`/`twoFingerHintLabel`: The hint shown when one finger swipes over the graph with `gestures="cooperative"`.
|
|
48083
48226
|
* - `using-label`/`usingLabel`: The line shown while the graph, with `gestures="activate"`, has the gestures.
|
|
48084
48227
|
* - `wheel-hint-label`/`wheelHintLabel`: The hint shown when the wheel scrolls past the graph with
|
|
@@ -48267,18 +48410,10 @@ export type CustomElements = {
|
|
|
48267
48410
|
* **Said once the drawing has moved, and only then.** The frame asks and
|
|
48268
48411
|
* the renderer moves, so a frame with nothing to answer it says nothing: a
|
|
48269
48412
|
* move said that never happened is worse than silence.
|
|
48413
|
+
* - `requestActive(next: string, cause?: string) => boolean`: Asks for a note to be selected, and remembers the ask, so the selection is said once it lands.
|
|
48270
48414
|
* - `pan(to: ViewportWay) => void`: Pans the view one step in a direction.
|
|
48271
48415
|
* - `zoom(by: number) => void`: Zooms the view one step: `1` zooms in and `-1` zooms out.
|
|
48272
48416
|
* - `toggleFullscreen() => void`: Turns fullscreen on or off.
|
|
48273
|
-
* - `requestActive(next: string, cause?: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
48274
|
-
*
|
|
48275
|
-
* Announces before it acts, so `preventDefault()` on the `helix-before-activate` is
|
|
48276
|
-
* a refusal and nothing moves. Unlike a native control, nothing has moved
|
|
48277
|
-
* by the time this runs, so refusing is simply not writing: there is
|
|
48278
|
-
* nothing to put back. Nobody refusing means the set updates itself,
|
|
48279
|
-
* whether or not a consumer declared `active`, a declared property being a
|
|
48280
|
-
* seed and a correction. `cause` says why, where the family names its
|
|
48281
|
-
* causes, and reaches the event as `detail.cause`.
|
|
48282
48417
|
*
|
|
48283
48418
|
* ## CSS Parts
|
|
48284
48419
|
*
|
|
@@ -48297,7 +48432,7 @@ export type CustomElements = {
|
|
|
48297
48432
|
* - `gesture-hint`: Words over the graph for a moment when it lets a gesture pass to the page, such as how to zoom it.
|
|
48298
48433
|
* - `gesture-status`: The line shown while a graph with `gestures="activate"` has the gestures.
|
|
48299
48434
|
* - `header`: The strip above the graph.
|
|
48300
|
-
* - `legend`: The groups over the drawing, with `legend
|
|
48435
|
+
* - `legend`: The groups over the drawing, with `legend`: a toolbar of buttons, each showing or hiding its notes, which is one tab stop.
|
|
48301
48436
|
* - `legend-item`: One group in the legend, pressed while its notes are shown. Carries `data-tone` where every note in the group has the same tone, which colors the notes over the group's own color.
|
|
48302
48437
|
* - `legend-item-hidden`: A group in the legend whose notes are hidden.
|
|
48303
48438
|
* - `legend-swatch`: The mark in a group's color, before its name.
|
|
@@ -48383,11 +48518,25 @@ export type CustomElements = {
|
|
|
48383
48518
|
* `multiple` any number. Space, Enter or a press selects the cell the keys or
|
|
48384
48519
|
* the pointer rest on, or lets it go, and under `multiple` Shift with an arrow,
|
|
48385
48520
|
* Home, End, PageUp or PageDown takes in every cell from the last one pressed
|
|
48386
|
-
* to where the key went. `value` holds the selected days, by
|
|
48387
|
-
*
|
|
48521
|
+
* to where the key went. `value` holds the selected days, separated by
|
|
48522
|
+
* commas: each by its row's `<time datetime>`, such as `2026-06-11`, or by
|
|
48523
|
+
* its row's name where the row carries no date. A change asks with
|
|
48388
48524
|
* `helix-before-change` and tells with `change`, and the `selection` part says
|
|
48389
48525
|
* how many are selected, in `selection-label`.
|
|
48390
48526
|
*
|
|
48527
|
+
* **Keyboard.** The strip is one tab stop once it has cells.
|
|
48528
|
+
*
|
|
48529
|
+
* | Key | What it does |
|
|
48530
|
+
* |---|---|
|
|
48531
|
+
* | Tab | Moves focus to the strip and shows the first cell. |
|
|
48532
|
+
* | Down, Up | Moves to the next or the previous cell. |
|
|
48533
|
+
* | Right, Left | Moves a column on or back, a week with `rows="7"`. On a right-to-left page, Left moves on. |
|
|
48534
|
+
* | Home, End | Moves to the first or the last cell. |
|
|
48535
|
+
* | Page Down, Page Up | Moves a month on or back where the rows carry dates, and four columns otherwise. |
|
|
48536
|
+
* | Enter, Space | Selects the cell, or lets it go, under `selection-mode`. |
|
|
48537
|
+
* | Shift with an arrow, Home, End, Page Up or Page Down | Selects every cell from the last one pressed to where the key went, under `selection-mode="multiple"`. |
|
|
48538
|
+
* | Escape | Puts the cell's tooltip away. |
|
|
48539
|
+
*
|
|
48391
48540
|
* ## Attributes & Properties
|
|
48392
48541
|
*
|
|
48393
48542
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
@@ -48458,8 +48607,9 @@ export type CustomElements = {
|
|
|
48458
48607
|
* no order in it.
|
|
48459
48608
|
* - `total-label`/`totalLabel`: The name the `overview` gives the total of the readings drawn,
|
|
48460
48609
|
* `{totalLabel}` in `overview-label`.
|
|
48461
|
-
* - `value`: The selected cells, by
|
|
48462
|
-
* `2026-06-11`,
|
|
48610
|
+
* - `value`: The selected cells, separated by commas: each by the date its row's
|
|
48611
|
+
* header carries in a `<time datetime>`, such as `2026-06-11`, or by the
|
|
48612
|
+
* header's words where it carries none.
|
|
48463
48613
|
*
|
|
48464
48614
|
* Set it to start with cells selected. Written by a press or a key under
|
|
48465
48615
|
* `selection-mode`.
|
|
@@ -48505,12 +48655,6 @@ export type CustomElements = {
|
|
|
48505
48655
|
*
|
|
48506
48656
|
* The mixin counts the table's rows, and a strip too narrow for all of them
|
|
48507
48657
|
* draws the newest, so a key stepping by rows would walk off the drawing. (property only) (readonly)
|
|
48508
|
-
* - `pointer`: Finds the reading nearest the pointer, so the tooltip can sit on it.
|
|
48509
|
-
*
|
|
48510
|
-
* Public for the same reason `series` and `named` are: a protected member
|
|
48511
|
-
* cannot be cast onto across unrelated classes, so it would be invisible to
|
|
48512
|
-
* every chart that needs it. Reading where a pointer is resting is a fair
|
|
48513
|
-
* thing to ask a chart anyway. (property only) (readonly)
|
|
48514
48658
|
* - `data`: The readings as data, in the shape of a table, where the page has no
|
|
48515
48659
|
* table to point `for` at. `for` wins where both are set.
|
|
48516
48660
|
*
|
|
@@ -48549,21 +48693,6 @@ export type CustomElements = {
|
|
|
48549
48693
|
* names an element, and the chart is a generic around its plot: written
|
|
48550
48694
|
* on the host, the name reached nobody. The plot takes it, as Heatmap's
|
|
48551
48695
|
* strip always did. (property only) (readonly)
|
|
48552
|
-
* - `readingsKnown`: Whether the readings have been looked for: false on the server and
|
|
48553
|
-
* while hydrating, where no table is resolved and no data is read. A
|
|
48554
|
-
* chart says it has no readings only once this is true. (property only) (readonly)
|
|
48555
|
-
* - `sourceRows`: Every row of the table, with each cell's text and number.
|
|
48556
|
-
*
|
|
48557
|
-
* This is where a tooltip's content comes from, and it is deliberately not
|
|
48558
|
-
* `series`. A chart draws numbers; a reader resting a pointer on one wants
|
|
48559
|
-
* what the table says, which is `$128k` and not `128000`, and often wants
|
|
48560
|
-
* the column beside it that nothing plotted at all.
|
|
48561
|
-
*
|
|
48562
|
-
* **Not `rows`.** It is the source table's rows, and `rows` on a chart is a
|
|
48563
|
-
* name a chart wants for itself: `helix-heatmap` takes `rows="7"` to mean a
|
|
48564
|
-
* calendar week, and declaring that against a base class whose `rows` is a
|
|
48565
|
-
* `Row[]` getter is a type error at best. Name the member for what it holds
|
|
48566
|
-
* rather than for the shortest word available. (property only) (readonly)
|
|
48567
48696
|
* - `plottedColumns`: The positions of the cells in a row that hold numbers, in table order.
|
|
48568
48697
|
*
|
|
48569
48698
|
* The same test `readSeries` applies when it drops a column of notes: a
|
|
@@ -48613,8 +48742,6 @@ export type CustomElements = {
|
|
|
48613
48742
|
* - `pageFrom(at: number, forward: boolean) => number | undefined`: Where PageUp or PageDown goes from the drawn cell at `at`: the same day a
|
|
48614
48743
|
* month on or back, by the dates the rows' headers carry. Undefined where
|
|
48615
48744
|
* they carry none, and the keys move four columns.
|
|
48616
|
-
* - `attributeChangedCallback(name: string, old: string | null, value: string | null) => void`: Called by the browser when an observed attribute changes. A new
|
|
48617
|
-
* `aria-label` asks for an update, because it names the plot.
|
|
48618
48745
|
* - `seriesOf(cell: number) => number | undefined`: The palette slot for the cell at this position in a row.
|
|
48619
48746
|
*
|
|
48620
48747
|
* **A cell's place in its row is not its series' depth, and the tooltip
|
|
@@ -48681,6 +48808,7 @@ export type CustomElements = {
|
|
|
48681
48808
|
* - `start`: The leading slot's box.
|
|
48682
48809
|
* - `strip`: The grid of cells, which takes focus to be read by key. It is named by the host's `aria-labelledby` or `aria-label`, then by `label`, then by the caption of the table.
|
|
48683
48810
|
* - `summary`: The middle slot's box.
|
|
48811
|
+
* - `table`: The readings as a table, for a screen reader, rendered only where they were drawn from `data`. Hide it visually.
|
|
48684
48812
|
* - `tooltip`: The bubble, forwarded from `Tooltip`.
|
|
48685
48813
|
* - `tooltip-anchor`: The `Tooltip` element itself.
|
|
48686
48814
|
* - `tooltip-arrow`: The bubble's point, forwarded from `Tooltip`.
|
|
@@ -48702,6 +48830,8 @@ export type CustomElements = {
|
|
|
48702
48830
|
*
|
|
48703
48831
|
* These can be used to apply styling when a component is in a given state.
|
|
48704
48832
|
*
|
|
48833
|
+
* - `active`: While a cell is shown, under the pointer or the keys, with its tooltip open.
|
|
48834
|
+
* - `empty`: While the `empty` part stands in place of the cells.
|
|
48705
48835
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
48706
48836
|
*/
|
|
48707
48837
|
"helix-headless-heatmap": Partial<
|
|
@@ -50233,6 +50363,18 @@ export type CustomElements = {
|
|
|
50233
50363
|
* there until readings arrive. The `empty` and `loading` slots take markup in
|
|
50234
50364
|
* their place, such as a link to add the first reading.
|
|
50235
50365
|
*
|
|
50366
|
+
* **Keyboard.** The plot is one tab stop.
|
|
50367
|
+
*
|
|
50368
|
+
* | Key | What it does |
|
|
50369
|
+
* |---|---|
|
|
50370
|
+
* | Tab | Moves focus to the plot and shows the first reading. |
|
|
50371
|
+
* | Right, Left | Moves to the next or the previous reading. On a right-to-left page, Left moves to the next. |
|
|
50372
|
+
* | Down, Up | Moves among the series of the reading. With one series, moves to the next or the previous reading. |
|
|
50373
|
+
* | Home, End | Moves to the first or the last reading. |
|
|
50374
|
+
* | Page Down, Page Up | Moves a tenth of the readings on or back. |
|
|
50375
|
+
* | Enter, Space | Presses the reading shown, which sends `helix-reading-press`. |
|
|
50376
|
+
* | Escape | Puts the reading and its tooltip away. |
|
|
50377
|
+
*
|
|
50236
50378
|
* ## Attributes & Properties
|
|
50237
50379
|
*
|
|
50238
50380
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
@@ -50377,12 +50519,6 @@ export type CustomElements = {
|
|
|
50377
50519
|
* Set it to the words of the page's language, such as `{position} von
|
|
50378
50520
|
* {count}`, or to nothing to say no position. A slice or a series a
|
|
50379
50521
|
* legend hid is not counted.
|
|
50380
|
-
* - `pointer`: Finds the reading nearest the pointer, so the tooltip can sit on it.
|
|
50381
|
-
*
|
|
50382
|
-
* Public for the same reason `series` and `named` are: a protected member
|
|
50383
|
-
* cannot be cast onto across unrelated classes, so it would be invisible to
|
|
50384
|
-
* every chart that needs it. Reading where a pointer is resting is a fair
|
|
50385
|
-
* thing to ask a chart anyway. (property only) (readonly)
|
|
50386
50522
|
* - `data`: The readings as data, in the shape of a table, where the page has no
|
|
50387
50523
|
* table to point `for` at. `for` wins where both are set.
|
|
50388
50524
|
*
|
|
@@ -50421,21 +50557,6 @@ export type CustomElements = {
|
|
|
50421
50557
|
* names an element, and the chart is a generic around its plot: written
|
|
50422
50558
|
* on the host, the name reached nobody. The plot takes it, as Heatmap's
|
|
50423
50559
|
* strip always did. (property only) (readonly)
|
|
50424
|
-
* - `readingsKnown`: Whether the readings have been looked for: false on the server and
|
|
50425
|
-
* while hydrating, where no table is resolved and no data is read. A
|
|
50426
|
-
* chart says it has no readings only once this is true. (property only) (readonly)
|
|
50427
|
-
* - `sourceRows`: Every row of the table, with each cell's text and number.
|
|
50428
|
-
*
|
|
50429
|
-
* This is where a tooltip's content comes from, and it is deliberately not
|
|
50430
|
-
* `series`. A chart draws numbers; a reader resting a pointer on one wants
|
|
50431
|
-
* what the table says, which is `$128k` and not `128000`, and often wants
|
|
50432
|
-
* the column beside it that nothing plotted at all.
|
|
50433
|
-
*
|
|
50434
|
-
* **Not `rows`.** It is the source table's rows, and `rows` on a chart is a
|
|
50435
|
-
* name a chart wants for itself: `helix-heatmap` takes `rows="7"` to mean a
|
|
50436
|
-
* calendar week, and declaring that against a base class whose `rows` is a
|
|
50437
|
-
* `Row[]` getter is a type error at best. Name the member for what it holds
|
|
50438
|
-
* rather than for the shortest word available. (property only) (readonly)
|
|
50439
50560
|
* - `plottedColumns`: The positions of the cells in a row that hold numbers, in table order.
|
|
50440
50561
|
*
|
|
50441
50562
|
* The same test `readSeries` applies when it drops a column of notes: a
|
|
@@ -50481,8 +50602,6 @@ export type CustomElements = {
|
|
|
50481
50602
|
*
|
|
50482
50603
|
* Methods that can be called to access component functionality.
|
|
50483
50604
|
*
|
|
50484
|
-
* - `attributeChangedCallback(name: string, old: string | null, value: string | null) => void`: Called by the browser when an observed attribute changes. A new
|
|
50485
|
-
* `aria-label` asks for an update, because it names the plot.
|
|
50486
50605
|
* - `seriesOf(cell: number) => number | undefined`: The palette slot for the cell at this position in a row.
|
|
50487
50606
|
*
|
|
50488
50607
|
* **A cell's place in its row is not its series' depth, and the tooltip
|
|
@@ -50541,9 +50660,10 @@ export type CustomElements = {
|
|
|
50541
50660
|
* - `mark`: The invisible point the tooltip is anchored to.
|
|
50542
50661
|
* - `marker`: The mark on one reading, under `markers`, and on a reading with a blank on either side. Placed with `inset-inline-start` and `inset-block-start`, and carries its series color as `--chart-series`.
|
|
50543
50662
|
* - `marker-lone`: A `marker` on a reading with a blank on either side, which no line reaches. Set alongside `marker`.
|
|
50544
|
-
* - `plot`: The drawing, which takes focus to be read by key.
|
|
50663
|
+
* - `plot`: The drawing, which takes focus to be read by key. With nothing to draw, a group named as the chart is, holding the `empty` or `loading` part.
|
|
50545
50664
|
* - `summary`: The chart's name and each series' latest reading, written as a sentence for screen readers. Hide it visually.
|
|
50546
50665
|
* - `svg`: The drawing surface the lines and areas sit on.
|
|
50666
|
+
* - `table`: The readings as a table, for a screen reader, rendered only where they were drawn from `data`. Hide it visually.
|
|
50547
50667
|
* - `terminus`: The mark on one series' last reading.
|
|
50548
50668
|
* - `tick`: One number on the axis, placed with `inset-block-start` at its level.
|
|
50549
50669
|
* - `tooltip`: The bubble, forwarded from `Tooltip`.
|
|
@@ -50567,6 +50687,9 @@ export type CustomElements = {
|
|
|
50567
50687
|
*
|
|
50568
50688
|
* These can be used to apply styling when a component is in a given state.
|
|
50569
50689
|
*
|
|
50690
|
+
* - `active`: While a reading is shown, under the pointer or the keys, with its tooltip open.
|
|
50691
|
+
* - `empty`: While the `empty` part stands in the plot.
|
|
50692
|
+
* - `loading`: While the `loading` part stands in the plot.
|
|
50570
50693
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
50571
50694
|
*/
|
|
50572
50695
|
"helix-headless-line-chart": Partial<
|
|
@@ -51427,6 +51550,13 @@ export type CustomElements = {
|
|
|
51427
51550
|
* hidden, and silent, for that many milliseconds, and appears only if the work
|
|
51428
51551
|
* is still going. While it waits it carries `:state(waiting)`.
|
|
51429
51552
|
*
|
|
51553
|
+
* **The loader can stand in for what it wraps.** Put the content in the
|
|
51554
|
+
* `content` slot, such as a button or a card, and set `idle` while no work is
|
|
51555
|
+
* in progress. While the work runs, the content keeps its size and is hidden
|
|
51556
|
+
* and inert, and the ring draws over it. While `idle` is set, the loader draws
|
|
51557
|
+
* nothing of its own, has no role, and marks no region busy, so only the
|
|
51558
|
+
* content shows. Clearing `idle` starts `delay` again.
|
|
51559
|
+
*
|
|
51430
51560
|
* ## Attributes & Properties
|
|
51431
51561
|
*
|
|
51432
51562
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
@@ -51441,6 +51571,9 @@ export type CustomElements = {
|
|
|
51441
51571
|
*
|
|
51442
51572
|
* Names an element in the same tree. In React it arrives as a property, the
|
|
51443
51573
|
* way `Tooltip.for` does.
|
|
51574
|
+
* - `idle`: Whether no work is in progress. The loader draws nothing of its own, has
|
|
51575
|
+
* no role, and marks no region busy, and what is in the `content` slot
|
|
51576
|
+
* shows. Clearing it starts `delay` again.
|
|
51444
51577
|
* - `label`: The loader's name, announced by screen readers while the work is in
|
|
51445
51578
|
* progress.
|
|
51446
51579
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
@@ -51469,11 +51602,13 @@ export type CustomElements = {
|
|
|
51469
51602
|
* Areas where markup can be added to the component.
|
|
51470
51603
|
*
|
|
51471
51604
|
* - `(default)`: An icon or logo that stays still at the center. Empty by default.
|
|
51605
|
+
* - `content`: What the loader stands in for while the work runs, such as a button. It keeps its size, hidden and inert, until `idle` is set.
|
|
51472
51606
|
*
|
|
51473
51607
|
* ## CSS Parts
|
|
51474
51608
|
*
|
|
51475
51609
|
* Custom selectors for styling elements within the component.
|
|
51476
51610
|
*
|
|
51611
|
+
* - `content`: The box that holds the `content` slot. Hidden while the work runs, and shown while `idle` is set.
|
|
51477
51612
|
* - `indicator`: The arc that turns.
|
|
51478
51613
|
* - `mark`: The region that holds the slotted content at the center.
|
|
51479
51614
|
* - `svg`: The rotating circle pair.
|
|
@@ -57051,7 +57186,8 @@ export type CustomElements = {
|
|
|
57051
57186
|
*
|
|
57052
57187
|
* Left and Right swap on a right-to-left page. The marks are a `radiogroup`
|
|
57053
57188
|
* named by `label`, and each score is a `radio` named by `option-label`, such
|
|
57054
|
-
* as "3 out of 5". A read-only rating is one `img` named by its
|
|
57189
|
+
* as "3 out of 5". A read-only rating is one `img` named by its label and
|
|
57190
|
+
* then its score, such as "Quality 3 out of 5".
|
|
57055
57191
|
*
|
|
57056
57192
|
* ## Attributes & Properties
|
|
57057
57193
|
*
|
|
@@ -57359,10 +57495,10 @@ export type CustomElements = {
|
|
|
57359
57495
|
* readers.
|
|
57360
57496
|
*
|
|
57361
57497
|
* **The plot is read by key.** It takes focus, named by `label` or the caption.
|
|
57362
|
-
* The left and right arrows move from
|
|
57363
|
-
* and End go to the first and the last, and the up and down
|
|
57364
|
-
* the series of a row. The tooltip sits on that point, the
|
|
57365
|
-
* row in words, and Escape puts the tooltip away.
|
|
57498
|
+
* The left and right arrows move from point to point, left to right across
|
|
57499
|
+
* the plot, Home and End go to the first and the last, and the up and down
|
|
57500
|
+
* arrows move among the series of a row. The tooltip sits on that point, the
|
|
57501
|
+
* `live` part says the row in words, and Escape puts the tooltip away.
|
|
57366
57502
|
*
|
|
57367
57503
|
* Each point is a `<span>` placed by percentage over the drawing, as
|
|
57368
57504
|
* `LineChart` places its end points, so points stay round when the drawing
|
|
@@ -57389,6 +57525,18 @@ export type CustomElements = {
|
|
|
57389
57525
|
* there until readings arrive. The `empty` and `loading` slots take markup in
|
|
57390
57526
|
* their place, such as a link to add the first reading.
|
|
57391
57527
|
*
|
|
57528
|
+
* **Keyboard.** The plot is one tab stop.
|
|
57529
|
+
*
|
|
57530
|
+
* | Key | What it does |
|
|
57531
|
+
* |---|---|
|
|
57532
|
+
* | Tab | Moves focus to the plot and shows the first reading. |
|
|
57533
|
+
* | Right, Left | Moves to the next or the previous point, left to right across the plot. On a right-to-left page, Left moves to the next. |
|
|
57534
|
+
* | Down, Up | Moves among the series of the point. With one series, moves to the next or the previous point. |
|
|
57535
|
+
* | Home, End | Moves to the first or the last point. |
|
|
57536
|
+
* | Page Down, Page Up | Moves a tenth of the points on or back. |
|
|
57537
|
+
* | Enter, Space | Presses the point shown, which sends `helix-reading-press`. |
|
|
57538
|
+
* | Escape | Puts the point and its tooltip away. |
|
|
57539
|
+
*
|
|
57392
57540
|
* ## Attributes & Properties
|
|
57393
57541
|
*
|
|
57394
57542
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
@@ -57458,12 +57606,6 @@ export type CustomElements = {
|
|
|
57458
57606
|
* Set it to the words of the page's language, such as `{position} von
|
|
57459
57607
|
* {count}`, or to nothing to say no position. A slice or a series a
|
|
57460
57608
|
* legend hid is not counted.
|
|
57461
|
-
* - `pointer`: Finds the reading nearest the pointer, so the tooltip can sit on it.
|
|
57462
|
-
*
|
|
57463
|
-
* Public for the same reason `series` and `named` are: a protected member
|
|
57464
|
-
* cannot be cast onto across unrelated classes, so it would be invisible to
|
|
57465
|
-
* every chart that needs it. Reading where a pointer is resting is a fair
|
|
57466
|
-
* thing to ask a chart anyway. (property only) (readonly)
|
|
57467
57609
|
* - `data`: The readings as data, in the shape of a table, where the page has no
|
|
57468
57610
|
* table to point `for` at. `for` wins where both are set.
|
|
57469
57611
|
*
|
|
@@ -57502,21 +57644,6 @@ export type CustomElements = {
|
|
|
57502
57644
|
* names an element, and the chart is a generic around its plot: written
|
|
57503
57645
|
* on the host, the name reached nobody. The plot takes it, as Heatmap's
|
|
57504
57646
|
* strip always did. (property only) (readonly)
|
|
57505
|
-
* - `readingsKnown`: Whether the readings have been looked for: false on the server and
|
|
57506
|
-
* while hydrating, where no table is resolved and no data is read. A
|
|
57507
|
-
* chart says it has no readings only once this is true. (property only) (readonly)
|
|
57508
|
-
* - `sourceRows`: Every row of the table, with each cell's text and number.
|
|
57509
|
-
*
|
|
57510
|
-
* This is where a tooltip's content comes from, and it is deliberately not
|
|
57511
|
-
* `series`. A chart draws numbers; a reader resting a pointer on one wants
|
|
57512
|
-
* what the table says, which is `$128k` and not `128000`, and often wants
|
|
57513
|
-
* the column beside it that nothing plotted at all.
|
|
57514
|
-
*
|
|
57515
|
-
* **Not `rows`.** It is the source table's rows, and `rows` on a chart is a
|
|
57516
|
-
* name a chart wants for itself: `helix-heatmap` takes `rows="7"` to mean a
|
|
57517
|
-
* calendar week, and declaring that against a base class whose `rows` is a
|
|
57518
|
-
* `Row[]` getter is a type error at best. Name the member for what it holds
|
|
57519
|
-
* rather than for the shortest word available. (property only) (readonly)
|
|
57520
57647
|
* - `plottedColumns`: The positions of the cells in a row that hold numbers, in table order.
|
|
57521
57648
|
*
|
|
57522
57649
|
* The same test `readSeries` applies when it drops a column of notes: a
|
|
@@ -57575,8 +57702,6 @@ export type CustomElements = {
|
|
|
57575
57702
|
* The across gets no dot at all rather than a shifted one. It is an axis and
|
|
57576
57703
|
* not a series: it has a scale under the plot with its name at the end of it,
|
|
57577
57704
|
* which is where a reader is told what it is.
|
|
57578
|
-
* - `attributeChangedCallback(name: string, old: string | null, value: string | null) => void`: Called by the browser when an observed attribute changes. A new
|
|
57579
|
-
* `aria-label` asks for an update, because it names the plot.
|
|
57580
57705
|
* - `showsSeries(name: string) => boolean`: Whether the series of this name is drawn, which it is unless a legend
|
|
57581
57706
|
* reading the same table hid it.
|
|
57582
57707
|
*
|
|
@@ -57613,11 +57738,12 @@ export type CustomElements = {
|
|
|
57613
57738
|
* - `loading`: The words in place of the drawing while `loading` is set and there are no readings: the `loading` slot, falling back to `loading-text`.
|
|
57614
57739
|
* - `mark`: The invisible point the tooltip is anchored to.
|
|
57615
57740
|
* - `plane`: The grid that holds the plot, both axes, and their names. It runs left to right on every page.
|
|
57616
|
-
* - `plot`: The drawing, which takes focus to be read by key.
|
|
57741
|
+
* - `plot`: The drawing, which takes focus to be read by key. With nothing to draw, a group named as the chart is, holding the `empty` or `loading` part.
|
|
57617
57742
|
* - `point`: One row, as a point.
|
|
57618
57743
|
* - `point-active`: A point in the row under the pointer. Set alongside `point`.
|
|
57619
57744
|
* - `summary`: The text that says how strongly the measures relate, for people who cannot see the points.
|
|
57620
57745
|
* - `svg`: The drawing surface the gridlines and the trend lines sit on.
|
|
57746
|
+
* - `table`: The readings as a table, for a screen reader, rendered only where they were drawn from `data`. Hide it visually.
|
|
57621
57747
|
* - `tooltip`: The bubble, forwarded from `Tooltip`.
|
|
57622
57748
|
* - `tooltip-anchor`: The `Tooltip` element itself.
|
|
57623
57749
|
* - `tooltip-arrow`: The bubble's point, forwarded from `Tooltip`.
|
|
@@ -57637,7 +57763,7 @@ export type CustomElements = {
|
|
|
57637
57763
|
* - `trend`: One series' line of best fit, under `trend`. Carries its series color as `--chart-series`.
|
|
57638
57764
|
* - `x-axis`: The values along the horizontal axis, under the plot.
|
|
57639
57765
|
* - `x-name`: The name of the horizontal measure.
|
|
57640
|
-
* - `x-tick`: One labeled value on the horizontal axis. Each axis has its own tick part, because `::part()` cannot tell which axis a tick is on.
|
|
57766
|
+
* - `x-tick`: One labeled value on the horizontal axis. Each axis has its own tick part, because `::part()` cannot tell which axis a tick is on. The one at the far edge carries `data-edge="end"`.
|
|
57641
57767
|
* - `y-axis`: The values along the vertical axis, beside the plot.
|
|
57642
57768
|
* - `y-name`: The name of the vertical measure.
|
|
57643
57769
|
* - `y-tick`: One labeled value on the vertical axis.
|
|
@@ -57646,6 +57772,9 @@ export type CustomElements = {
|
|
|
57646
57772
|
*
|
|
57647
57773
|
* These can be used to apply styling when a component is in a given state.
|
|
57648
57774
|
*
|
|
57775
|
+
* - `active`: While a reading is shown, under the pointer or the keys, with its tooltip open.
|
|
57776
|
+
* - `empty`: While the `empty` part stands in the plot.
|
|
57777
|
+
* - `loading`: While the `loading` part stands in the plot.
|
|
57649
57778
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
57650
57779
|
*/
|
|
57651
57780
|
"helix-headless-scatter-chart": Partial<
|
|
@@ -57807,7 +57936,9 @@ export type CustomElements = {
|
|
|
57807
57936
|
* place for focus to return to when the list closes.
|
|
57808
57937
|
*
|
|
57809
57938
|
* Your options stay in your light DOM and are slotted through into the listbox,
|
|
57810
|
-
* so the listbox looks through slots to find them.
|
|
57939
|
+
* so the listbox looks through slots to find them. Write them as `Option`,
|
|
57940
|
+
* group them in `Option.Group`, and divide them with `Option.Separator`.
|
|
57941
|
+
* Importing Select registers all three in the same tier. For a list too long to draw
|
|
57811
57942
|
* whole, set `items` instead: the list draws only the options in sight, as
|
|
57812
57943
|
* Listbox's `items` does, and the trigger, its keys and the form read the
|
|
57813
57944
|
* whole set.
|
|
@@ -58700,6 +58831,10 @@ export type CustomElements = {
|
|
|
58700
58831
|
* the lowest, in `overview-label`: "From 12 to 20, highest 30, lowest 8". An
|
|
58701
58832
|
* `aria-label` on the element names it as `label` does.
|
|
58702
58833
|
*
|
|
58834
|
+
* `helix-reading-change` says each move of the reading, by pointer, tap or
|
|
58835
|
+
* key, and `helix-reading-press` says a reading was clicked, tapped, or pressed
|
|
58836
|
+
* with Enter or Space, as on every chart.
|
|
58837
|
+
*
|
|
58703
58838
|
* A pointer resting on the drawing shows the reading under it: the `cursor`
|
|
58704
58839
|
* part marks it and the `readout` part writes it. `marks` adds a mark on the
|
|
58705
58840
|
* highest and the lowest reading, and `range` draws a band between two values,
|
|
@@ -58714,6 +58849,17 @@ export type CustomElements = {
|
|
|
58714
58849
|
* the component computes and CSS cannot, so a stylesheet can draw the sparkline
|
|
58715
58850
|
* without measuring anything.
|
|
58716
58851
|
*
|
|
58852
|
+
* **Keyboard.** A sparkline with a `label` is one tab stop.
|
|
58853
|
+
*
|
|
58854
|
+
* | Key | What it does |
|
|
58855
|
+
* |---|---|
|
|
58856
|
+
* | Tab | Moves focus to the drawing and shows the first reading, where there is a `label`. |
|
|
58857
|
+
* | Any arrow | Right and Down move to the next reading, Left and Up to the previous. On a right-to-left page, Left moves to the next. |
|
|
58858
|
+
* | Home, End | Moves to the first or the last reading. |
|
|
58859
|
+
* | Page Down, Page Up | Moves a tenth of the readings on or back. |
|
|
58860
|
+
* | Enter, Space | Presses the reading shown, which sends `helix-reading-press`. |
|
|
58861
|
+
* | Escape | Puts the reading and its tooltip away. |
|
|
58862
|
+
*
|
|
58717
58863
|
* ## Attributes & Properties
|
|
58718
58864
|
*
|
|
58719
58865
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
@@ -58818,8 +58964,6 @@ export type CustomElements = {
|
|
|
58818
58964
|
* with `values={[1240, 1318]}`. The attribute is the form to prefer, because
|
|
58819
58965
|
* a string is what survives React's hydration where an array property does
|
|
58820
58966
|
* not.
|
|
58821
|
-
* - `pointer`: Finds the reading a pointer or a key rests on, as it does for every
|
|
58822
|
-
* chart, so a sparkline is read the way they are. (property only) (readonly)
|
|
58823
58967
|
* - `named`: The drawing's name: an `aria-label` written on the sparkline, then `label`. (property only) (readonly)
|
|
58824
58968
|
* - `readings`: How many readings there are, which the pointer and the keys walk. (property only) (readonly)
|
|
58825
58969
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
@@ -58843,11 +58987,12 @@ export type CustomElements = {
|
|
|
58843
58987
|
* browser harness's awaits it alone: a browser always runs the frame, and a
|
|
58844
58988
|
* timer beside it was a bet on how long one takes, which a busy run lost. (property only) (readonly)
|
|
58845
58989
|
*
|
|
58846
|
-
* ##
|
|
58990
|
+
* ## Events
|
|
58847
58991
|
*
|
|
58848
|
-
*
|
|
58992
|
+
* Events that will be emitted by the component.
|
|
58849
58993
|
*
|
|
58850
|
-
* - `
|
|
58994
|
+
* - `helix-reading-change`: The reading shown moved, or was put away: `index` is the reading, or `-1` for none, with its row's `label` from a table and the `pointerType` that moved it.
|
|
58995
|
+
* - `helix-reading-press`: A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`.
|
|
58851
58996
|
*
|
|
58852
58997
|
* ## CSS Custom Properties
|
|
58853
58998
|
*
|
|
@@ -61440,8 +61585,9 @@ export type CustomElements = {
|
|
|
61440
61585
|
* - `selection-mode`/`selectionMode`: How many tags a reader can select: `single`, `multiple`, or none.
|
|
61441
61586
|
*
|
|
61442
61587
|
* Absent selects nothing, and the tags carry no selected state at all.
|
|
61443
|
-
* - `value`: The selected tags' values, separated by commas
|
|
61444
|
-
* space.
|
|
61588
|
+
* - `value`: The selected tags' values, separated by commas with no space, as Toggle
|
|
61589
|
+
* Group and Table write theirs, since a value may hold a space. A value
|
|
61590
|
+
* written with a space after each comma is read the same way.
|
|
61445
61591
|
*
|
|
61446
61592
|
* Set it to start with tags selected. A tag's value is its `value`, or its
|
|
61447
61593
|
* words where it has none.
|
|
@@ -64562,9 +64708,9 @@ export type CustomElements = {
|
|
|
64562
64708
|
* Each item is an element because it holds state: whether it is open, selected,
|
|
64563
64709
|
* and focused.
|
|
64564
64710
|
*
|
|
64565
|
-
* An item is a branch when
|
|
64566
|
-
*
|
|
64567
|
-
* appears on hydration.
|
|
64711
|
+
* An item is a branch when an item is slotted into `children`, with
|
|
64712
|
+
* `slot="children"` on each nested item. This is detected on the client, so
|
|
64713
|
+
* server-rendered markup shows a leaf and the twisty appears on hydration.
|
|
64568
64714
|
*
|
|
64569
64715
|
* **`href` makes the whole row a link**, rendered as an `<a>`. Enter, middle
|
|
64570
64716
|
* click, and the status bar then work anywhere on the row.
|
|
@@ -64686,7 +64832,7 @@ export type CustomElements = {
|
|
|
64686
64832
|
*
|
|
64687
64833
|
* Areas where markup can be added to the component.
|
|
64688
64834
|
*
|
|
64689
|
-
* - `(default)`: The item's label.
|
|
64835
|
+
* - `(default)`: The item's label. A nested item does not go here: give it `slot="children"`. In a development build, an item nested here is reported.
|
|
64690
64836
|
* - `chevron`: Replaces the expand and collapse mark of a branch, such as with your own icon.
|
|
64691
64837
|
* - `children`: Nested items, which make this a branch.
|
|
64692
64838
|
* - `end`: Content after the label, at the far side of the row, such as a count or a state.
|
|
@@ -66958,6 +67104,18 @@ export type CustomElementsSolidJs = {
|
|
|
66958
67104
|
* there until readings arrive. The `empty` and `loading` slots take markup in
|
|
66959
67105
|
* their place, such as a link to add the first reading.
|
|
66960
67106
|
*
|
|
67107
|
+
* **Keyboard.** The plot is one tab stop.
|
|
67108
|
+
*
|
|
67109
|
+
* | Key | What it does |
|
|
67110
|
+
* |---|---|
|
|
67111
|
+
* | Tab | Moves focus to the plot and shows the first reading. |
|
|
67112
|
+
* | Right, Left | Moves to the next or the previous reading. On a right-to-left page, Left moves to the next. |
|
|
67113
|
+
* | Down, Up | Moves among the series of the reading. With one series, moves to the next or the previous reading. |
|
|
67114
|
+
* | Home, End | Moves to the first or the last reading. |
|
|
67115
|
+
* | Page Down, Page Up | Moves a tenth of the readings on or back. |
|
|
67116
|
+
* | Enter, Space | Presses the reading shown, which sends `helix-reading-press`. |
|
|
67117
|
+
* | Escape | Puts the reading and its tooltip away. |
|
|
67118
|
+
*
|
|
66961
67119
|
* ## Attributes & Properties
|
|
66962
67120
|
*
|
|
66963
67121
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
@@ -67038,12 +67196,6 @@ export type CustomElementsSolidJs = {
|
|
|
67038
67196
|
* Set it to the words of the page's language, such as `{position} von
|
|
67039
67197
|
* {count}`, or to nothing to say no position. A slice or a series a
|
|
67040
67198
|
* legend hid is not counted.
|
|
67041
|
-
* - `pointer`: Finds the reading nearest the pointer, so the tooltip can sit on it.
|
|
67042
|
-
*
|
|
67043
|
-
* Public for the same reason `series` and `named` are: a protected member
|
|
67044
|
-
* cannot be cast onto across unrelated classes, so it would be invisible to
|
|
67045
|
-
* every chart that needs it. Reading where a pointer is resting is a fair
|
|
67046
|
-
* thing to ask a chart anyway. (property only) (readonly)
|
|
67047
67199
|
* - `data`: The readings as data, in the shape of a table, where the page has no
|
|
67048
67200
|
* table to point `for` at. `for` wins where both are set.
|
|
67049
67201
|
*
|
|
@@ -67082,21 +67234,6 @@ export type CustomElementsSolidJs = {
|
|
|
67082
67234
|
* names an element, and the chart is a generic around its plot: written
|
|
67083
67235
|
* on the host, the name reached nobody. The plot takes it, as Heatmap's
|
|
67084
67236
|
* strip always did. (property only) (readonly)
|
|
67085
|
-
* - `readingsKnown`: Whether the readings have been looked for: false on the server and
|
|
67086
|
-
* while hydrating, where no table is resolved and no data is read. A
|
|
67087
|
-
* chart says it has no readings only once this is true. (property only) (readonly)
|
|
67088
|
-
* - `sourceRows`: Every row of the table, with each cell's text and number.
|
|
67089
|
-
*
|
|
67090
|
-
* This is where a tooltip's content comes from, and it is deliberately not
|
|
67091
|
-
* `series`. A chart draws numbers; a reader resting a pointer on one wants
|
|
67092
|
-
* what the table says, which is `$128k` and not `128000`, and often wants
|
|
67093
|
-
* the column beside it that nothing plotted at all.
|
|
67094
|
-
*
|
|
67095
|
-
* **Not `rows`.** It is the source table's rows, and `rows` on a chart is a
|
|
67096
|
-
* name a chart wants for itself: `helix-heatmap` takes `rows="7"` to mean a
|
|
67097
|
-
* calendar week, and declaring that against a base class whose `rows` is a
|
|
67098
|
-
* `Row[]` getter is a type error at best. Name the member for what it holds
|
|
67099
|
-
* rather than for the shortest word available. (property only) (readonly)
|
|
67100
67237
|
* - `plottedColumns`: The positions of the cells in a row that hold numbers, in table order.
|
|
67101
67238
|
*
|
|
67102
67239
|
* The same test `readSeries` applies when it drops a column of notes: a
|
|
@@ -67142,8 +67279,6 @@ export type CustomElementsSolidJs = {
|
|
|
67142
67279
|
*
|
|
67143
67280
|
* Methods that can be called to access component functionality.
|
|
67144
67281
|
*
|
|
67145
|
-
* - `attributeChangedCallback(name: string, old: string | null, value: string | null) => void`: Called by the browser when an observed attribute changes. A new
|
|
67146
|
-
* `aria-label` asks for an update, because it names the plot.
|
|
67147
67282
|
* - `seriesOf(cell: number) => number | undefined`: The palette slot for the cell at this position in a row.
|
|
67148
67283
|
*
|
|
67149
67284
|
* **A cell's place in its row is not its series' depth, and the tooltip
|
|
@@ -67196,9 +67331,10 @@ export type CustomElementsSolidJs = {
|
|
|
67196
67331
|
* - `live`: The readout: a polite live region that says the reading the keys moved to. Hide it visually.
|
|
67197
67332
|
* - `loading`: The words in place of the drawing while `loading` is set and there are no readings: the `loading` slot, falling back to `loading-text`.
|
|
67198
67333
|
* - `mark`: The invisible point the tooltip is anchored to.
|
|
67199
|
-
* - `plot`: The drawing, which takes focus to be read by key.
|
|
67334
|
+
* - `plot`: The drawing, which takes focus to be read by key. With nothing to draw, a group named as the chart is, holding the `empty` or `loading` part.
|
|
67200
67335
|
* - `summary`: The total and each part's share at the latest reading, written as a sentence for screen readers.
|
|
67201
67336
|
* - `svg`: The drawing surface the bands sit on.
|
|
67337
|
+
* - `table`: The readings as a table, for a screen reader, rendered only where they were drawn from `data`. Hide it visually.
|
|
67202
67338
|
* - `tick`: One number on the axis, placed with `inset-block-start` at its level.
|
|
67203
67339
|
* - `tooltip`: The bubble, forwarded from `Tooltip`.
|
|
67204
67340
|
* - `tooltip-anchor`: The `Tooltip` element itself.
|
|
@@ -67221,6 +67357,9 @@ export type CustomElementsSolidJs = {
|
|
|
67221
67357
|
*
|
|
67222
67358
|
* These can be used to apply styling when a component is in a given state.
|
|
67223
67359
|
*
|
|
67360
|
+
* - `active`: While a reading is shown, under the pointer or the keys, with its tooltip open.
|
|
67361
|
+
* - `empty`: While the `empty` part stands in the plot.
|
|
67362
|
+
* - `loading`: While the `loading` part stands in the plot.
|
|
67224
67363
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
67225
67364
|
*/
|
|
67226
67365
|
"helix-headless-area-chart": Partial<
|
|
@@ -67419,7 +67558,7 @@ export type CustomElementsSolidJs = {
|
|
|
67419
67558
|
*
|
|
67420
67559
|
* Areas where markup can be added to the component.
|
|
67421
67560
|
*
|
|
67422
|
-
* - `(default)`: Shown when there is no usable image, in place of the initials.
|
|
67561
|
+
* - `(default)`: Shown when there is no usable image, in place of the initials. Hidden from assistive technology when the avatar has a `name`, which the host announces.
|
|
67423
67562
|
*
|
|
67424
67563
|
* ## CSS Parts
|
|
67425
67564
|
*
|
|
@@ -67611,6 +67750,19 @@ export type CustomElementsSolidJs = {
|
|
|
67611
67750
|
* there until readings arrive. The `empty` and `loading` slots take markup in
|
|
67612
67751
|
* their place, such as a link to add the first reading.
|
|
67613
67752
|
*
|
|
67753
|
+
* **Keyboard.** The plot is one tab stop.
|
|
67754
|
+
*
|
|
67755
|
+
* | Key | What it does |
|
|
67756
|
+
* |---|---|
|
|
67757
|
+
* | Tab | Moves focus to the plot and shows the first reading. |
|
|
67758
|
+
* | Right, Left | Moves to the next or the previous reading. On a right-to-left page, Left moves to the next. |
|
|
67759
|
+
* | Down, Up | Moves among the series of the reading. With one series, moves to the next or the previous reading. |
|
|
67760
|
+
* | Down, Up under `orientation="horizontal"` | Moves to the next or the previous reading, and Right and Left move among the series. |
|
|
67761
|
+
* | Home, End | Moves to the first or the last reading. |
|
|
67762
|
+
* | Page Down, Page Up | Moves a tenth of the readings on or back. |
|
|
67763
|
+
* | Enter, Space | Presses the reading shown, which sends `helix-reading-press`. |
|
|
67764
|
+
* | Escape | Puts the reading and its tooltip away. |
|
|
67765
|
+
*
|
|
67614
67766
|
* ## Attributes & Properties
|
|
67615
67767
|
*
|
|
67616
67768
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
@@ -67750,12 +67902,6 @@ export type CustomElementsSolidJs = {
|
|
|
67750
67902
|
* Set it to the words of the page's language, such as `{position} von
|
|
67751
67903
|
* {count}`, or to nothing to say no position. A slice or a series a
|
|
67752
67904
|
* legend hid is not counted.
|
|
67753
|
-
* - `pointer`: Finds the reading nearest the pointer, so the tooltip can sit on it.
|
|
67754
|
-
*
|
|
67755
|
-
* Public for the same reason `series` and `named` are: a protected member
|
|
67756
|
-
* cannot be cast onto across unrelated classes, so it would be invisible to
|
|
67757
|
-
* every chart that needs it. Reading where a pointer is resting is a fair
|
|
67758
|
-
* thing to ask a chart anyway. (property only) (readonly)
|
|
67759
67905
|
* - `data`: The readings as data, in the shape of a table, where the page has no
|
|
67760
67906
|
* table to point `for` at. `for` wins where both are set.
|
|
67761
67907
|
*
|
|
@@ -67794,21 +67940,6 @@ export type CustomElementsSolidJs = {
|
|
|
67794
67940
|
* names an element, and the chart is a generic around its plot: written
|
|
67795
67941
|
* on the host, the name reached nobody. The plot takes it, as Heatmap's
|
|
67796
67942
|
* strip always did. (property only) (readonly)
|
|
67797
|
-
* - `readingsKnown`: Whether the readings have been looked for: false on the server and
|
|
67798
|
-
* while hydrating, where no table is resolved and no data is read. A
|
|
67799
|
-
* chart says it has no readings only once this is true. (property only) (readonly)
|
|
67800
|
-
* - `sourceRows`: Every row of the table, with each cell's text and number.
|
|
67801
|
-
*
|
|
67802
|
-
* This is where a tooltip's content comes from, and it is deliberately not
|
|
67803
|
-
* `series`. A chart draws numbers; a reader resting a pointer on one wants
|
|
67804
|
-
* what the table says, which is `$128k` and not `128000`, and often wants
|
|
67805
|
-
* the column beside it that nothing plotted at all.
|
|
67806
|
-
*
|
|
67807
|
-
* **Not `rows`.** It is the source table's rows, and `rows` on a chart is a
|
|
67808
|
-
* name a chart wants for itself: `helix-heatmap` takes `rows="7"` to mean a
|
|
67809
|
-
* calendar week, and declaring that against a base class whose `rows` is a
|
|
67810
|
-
* `Row[]` getter is a type error at best. Name the member for what it holds
|
|
67811
|
-
* rather than for the shortest word available. (property only) (readonly)
|
|
67812
67943
|
* - `plottedColumns`: The positions of the cells in a row that hold numbers, in table order.
|
|
67813
67944
|
*
|
|
67814
67945
|
* The same test `readSeries` applies when it drops a column of notes: a
|
|
@@ -67854,8 +67985,6 @@ export type CustomElementsSolidJs = {
|
|
|
67854
67985
|
*
|
|
67855
67986
|
* Methods that can be called to access component functionality.
|
|
67856
67987
|
*
|
|
67857
|
-
* - `attributeChangedCallback(name: string, old: string | null, value: string | null) => void`: Called by the browser when an observed attribute changes. A new
|
|
67858
|
-
* `aria-label` asks for an update, because it names the plot.
|
|
67859
67988
|
* - `seriesOf(cell: number) => number | undefined`: The palette slot for the cell at this position in a row.
|
|
67860
67989
|
*
|
|
67861
67990
|
* **A cell's place in its row is not its series' depth, and the tooltip
|
|
@@ -67914,9 +68043,10 @@ export type CustomElementsSolidJs = {
|
|
|
67914
68043
|
* - `live`: The readout: a polite live region that says the reading the keys moved to. Hide it visually.
|
|
67915
68044
|
* - `loading`: The words in place of the drawing while `loading` is set and there are no readings: the `loading` slot, falling back to `loading-text`.
|
|
67916
68045
|
* - `mark`: The invisible point the tooltip is anchored to.
|
|
67917
|
-
* - `plot`: The drawing, which takes focus to be read by key.
|
|
68046
|
+
* - `plot`: The drawing, which takes focus to be read by key. With nothing to draw, a group named as the chart is, holding the `empty` or `loading` part.
|
|
67918
68047
|
* - `summary`: The chart's name and each series' highest reading, written as a sentence for screen readers. Hide it visually.
|
|
67919
68048
|
* - `svg`: The drawing surface the bars and lines sit on.
|
|
68049
|
+
* - `table`: The readings as a table, for a screen reader, rendered only where they were drawn from `data`. Hide it visually.
|
|
67920
68050
|
* - `tick`: One number on an axis.
|
|
67921
68051
|
* - `tooltip`: The tooltip bubble, forwarded from `Tooltip`.
|
|
67922
68052
|
* - `tooltip-anchor`: The `Tooltip` element itself.
|
|
@@ -67939,6 +68069,9 @@ export type CustomElementsSolidJs = {
|
|
|
67939
68069
|
*
|
|
67940
68070
|
* These can be used to apply styling when a component is in a given state.
|
|
67941
68071
|
*
|
|
68072
|
+
* - `active`: While a reading is shown, under the pointer or the keys, with its tooltip open.
|
|
68073
|
+
* - `empty`: While the `empty` part stands in the plot.
|
|
68074
|
+
* - `loading`: While the `loading` part stands in the plot.
|
|
67942
68075
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
67943
68076
|
*/
|
|
67944
68077
|
"helix-headless-bar-chart": Partial<
|
|
@@ -69113,7 +69246,11 @@ export type CustomElementsSolidJs = {
|
|
|
69113
69246
|
* double click zooms out.
|
|
69114
69247
|
*
|
|
69115
69248
|
* Keyboard behavior:
|
|
69116
|
-
* - One card holds the board's tab stop
|
|
69249
|
+
* - One card holds the board's tab stop, and the board itself leaves the tab
|
|
69250
|
+
* order while a card can hold it. Escape on a card goes back out to the
|
|
69251
|
+
* board, where the arrow keys pan it.
|
|
69252
|
+
* - Plus and minus zoom the board, on the board and on a card or a
|
|
69253
|
+
* connection.
|
|
69117
69254
|
* - The arrow keys move through the cards in reading order. The card you land
|
|
69118
69255
|
* on scrolls into view, and its connections are announced with it.
|
|
69119
69256
|
* - The card you land on is selected. Control or Command with an arrow key,
|
|
@@ -75106,6 +75243,27 @@ export type CustomElementsSolidJs = {
|
|
|
75106
75243
|
* follows, the `live` part says the slice in words, and Escape puts the
|
|
75107
75244
|
* tooltip away.
|
|
75108
75245
|
*
|
|
75246
|
+
* **A tap shows the slice under it**, and keeps it until a tap lands
|
|
75247
|
+
* elsewhere. `helix-reading-change` says each move of the slice shown, by
|
|
75248
|
+
* pointer, tap or key, and `helix-reading-press` says a slice was clicked,
|
|
75249
|
+
* tapped, or pressed with Enter or Space, for a page that opens what a slice
|
|
75250
|
+
* stands for. `index` is the slice's row in the table.
|
|
75251
|
+
*
|
|
75252
|
+
* **A chart with nothing to draw says so.** A table with no readings shows
|
|
75253
|
+
* `empty-text`, "No readings", in the plot, and `loading` shows `loading-text`
|
|
75254
|
+
* there until readings arrive. The `empty` and `loading` slots take markup in
|
|
75255
|
+
* their place.
|
|
75256
|
+
*
|
|
75257
|
+
* **Keyboard.** The plot is one tab stop.
|
|
75258
|
+
*
|
|
75259
|
+
* | Key | What it does |
|
|
75260
|
+
* |---|---|
|
|
75261
|
+
* | Tab | Moves focus to the plot and shows the first slice. |
|
|
75262
|
+
* | Any arrow | Right and Down move to the next slice, Left and Up to the previous. On a right-to-left page, Left moves to the next. |
|
|
75263
|
+
* | Home, End | Moves to the first or the last slice. |
|
|
75264
|
+
* | Enter, Space | Presses the slice shown, which sends `helix-reading-press`. |
|
|
75265
|
+
* | Escape | Puts the slice and its tooltip away. |
|
|
75266
|
+
*
|
|
75109
75267
|
* ## Attributes & Properties
|
|
75110
75268
|
*
|
|
75111
75269
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
@@ -75163,6 +75321,16 @@ export type CustomElementsSolidJs = {
|
|
|
75163
75321
|
* rotation that puts the first slice at nine o'clock, the aspect ratio of a
|
|
75164
75322
|
* box that is no longer square, and where the middle sits once the bottom of
|
|
75165
75323
|
* the circle is not drawn.
|
|
75324
|
+
* - `empty-text`/`emptyText`: The words shown in place of the drawing when the table has no readings,
|
|
75325
|
+
* and the fallback of the `empty` slot.
|
|
75326
|
+
* - `loading`: Whether the readings are still on their way. The chart shows
|
|
75327
|
+
* `loading-text` in place of an empty drawing until it has readings.
|
|
75328
|
+
*
|
|
75329
|
+
* Reflected, so a stylesheet can treat the chart while it waits. A chart
|
|
75330
|
+
* that already has readings keeps drawing them, so a refresh does not
|
|
75331
|
+
* blank it.
|
|
75332
|
+
* - `loading-text`/`loadingText`: The words shown in place of the drawing while `loading` is set and
|
|
75333
|
+
* there are no readings yet, and the fallback of the `loading` slot.
|
|
75166
75334
|
* - `for`: The id of the table to read.
|
|
75167
75335
|
*
|
|
75168
75336
|
* Names a table in the same tree, so a chart inside another component's
|
|
@@ -75191,12 +75359,6 @@ export type CustomElementsSolidJs = {
|
|
|
75191
75359
|
*
|
|
75192
75360
|
* The mixin counts the table's rows, and a row with no amount draws no
|
|
75193
75361
|
* slice, so a key stepping by rows would land on a slice that is not there. (property only) (readonly)
|
|
75194
|
-
* - `pointer`: Finds the reading nearest the pointer, so the tooltip can sit on it.
|
|
75195
|
-
*
|
|
75196
|
-
* Public for the same reason `series` and `named` are: a protected member
|
|
75197
|
-
* cannot be cast onto across unrelated classes, so it would be invisible to
|
|
75198
|
-
* every chart that needs it. Reading where a pointer is resting is a fair
|
|
75199
|
-
* thing to ask a chart anyway. (property only) (readonly)
|
|
75200
75362
|
* - `data`: The readings as data, in the shape of a table, where the page has no
|
|
75201
75363
|
* table to point `for` at. `for` wins where both are set.
|
|
75202
75364
|
*
|
|
@@ -75235,21 +75397,6 @@ export type CustomElementsSolidJs = {
|
|
|
75235
75397
|
* names an element, and the chart is a generic around its plot: written
|
|
75236
75398
|
* on the host, the name reached nobody. The plot takes it, as Heatmap's
|
|
75237
75399
|
* strip always did. (property only) (readonly)
|
|
75238
|
-
* - `readingsKnown`: Whether the readings have been looked for: false on the server and
|
|
75239
|
-
* while hydrating, where no table is resolved and no data is read. A
|
|
75240
|
-
* chart says it has no readings only once this is true. (property only) (readonly)
|
|
75241
|
-
* - `sourceRows`: Every row of the table, with each cell's text and number.
|
|
75242
|
-
*
|
|
75243
|
-
* This is where a tooltip's content comes from, and it is deliberately not
|
|
75244
|
-
* `series`. A chart draws numbers; a reader resting a pointer on one wants
|
|
75245
|
-
* what the table says, which is `$128k` and not `128000`, and often wants
|
|
75246
|
-
* the column beside it that nothing plotted at all.
|
|
75247
|
-
*
|
|
75248
|
-
* **Not `rows`.** It is the source table's rows, and `rows` on a chart is a
|
|
75249
|
-
* name a chart wants for itself: `helix-heatmap` takes `rows="7"` to mean a
|
|
75250
|
-
* calendar week, and declaring that against a base class whose `rows` is a
|
|
75251
|
-
* `Row[]` getter is a type error at best. Name the member for what it holds
|
|
75252
|
-
* rather than for the shortest word available. (property only) (readonly)
|
|
75253
75400
|
* - `plottedColumns`: The positions of the cells in a row that hold numbers, in table order.
|
|
75254
75401
|
*
|
|
75255
75402
|
* The same test `readSeries` applies when it drops a column of notes: a
|
|
@@ -75276,11 +75423,20 @@ export type CustomElementsSolidJs = {
|
|
|
75276
75423
|
* browser harness's awaits it alone: a browser always runs the frame, and a
|
|
75277
75424
|
* timer beside it was a bet on how long one takes, which a busy run lost. (property only) (readonly)
|
|
75278
75425
|
*
|
|
75426
|
+
* ## Events
|
|
75427
|
+
*
|
|
75428
|
+
* Events that will be emitted by the component.
|
|
75429
|
+
*
|
|
75430
|
+
* - `helix-reading-change`: The slice shown moved, or was put away: `index` is the slice's row, or `-1` for none, with its `label` and the `pointerType` that moved it.
|
|
75431
|
+
* - `helix-reading-press`: A slice was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`.
|
|
75432
|
+
*
|
|
75279
75433
|
* ## Slots
|
|
75280
75434
|
*
|
|
75281
75435
|
* Areas where markup can be added to the component.
|
|
75282
75436
|
*
|
|
75283
75437
|
* - `(default)`: Content in the middle of the ring, usually a total. It is read by screen readers, while the ring itself is hidden from them.
|
|
75438
|
+
* - `empty`: Content shown in place of the ring when the table has no readings. Falls back to `empty-text`.
|
|
75439
|
+
* - `loading`: Content shown in place of the ring while `loading` is set and there are no readings yet. Falls back to `loading-text`.
|
|
75284
75440
|
*
|
|
75285
75441
|
* ## Methods
|
|
75286
75442
|
*
|
|
@@ -75291,8 +75447,6 @@ export type CustomElementsSolidJs = {
|
|
|
75291
75447
|
* no series the keys could move to.
|
|
75292
75448
|
* - `showsReading(at: number) => boolean`: Whether the slice at this place is drawn, which a slice a legend hid is
|
|
75293
75449
|
* not. The keys pass over it, as the ring closes over it.
|
|
75294
|
-
* - `attributeChangedCallback(name: string, old: string | null, value: string | null) => void`: Called by the browser when an observed attribute changes. A new
|
|
75295
|
-
* `aria-label` asks for an update, because it names the plot.
|
|
75296
75450
|
* - `showsSeries(name: string) => boolean`: Whether the series of this name is drawn, which it is unless a legend
|
|
75297
75451
|
* reading the same table hid it.
|
|
75298
75452
|
*
|
|
@@ -75321,14 +75475,17 @@ export type CustomElementsSolidJs = {
|
|
|
75321
75475
|
* Custom selectors for styling elements within the component.
|
|
75322
75476
|
*
|
|
75323
75477
|
* - `center`: The middle of the ring, holding whatever is slotted.
|
|
75478
|
+
* - `empty`: The words in place of the ring when the table has no readings: the `empty` slot, falling back to `empty-text`. Not drawn while the table cannot be read yet, on the server and during hydration.
|
|
75324
75479
|
* - `live`: The readout: a polite live region that says the slice the keys moved to. Hide it visually.
|
|
75480
|
+
* - `loading`: The words in place of the ring while `loading` is set and there are no readings: the `loading` slot, falling back to `loading-text`.
|
|
75325
75481
|
* - `mark`: The invisible point the tooltip is anchored to.
|
|
75326
|
-
* - `plot`: The drawing, which takes focus to be read by key.
|
|
75482
|
+
* - `plot`: The drawing, which takes focus to be read by key. With nothing to draw, a group named as the chart is, holding the `empty` or `loading` part.
|
|
75327
75483
|
* - `segment`: One slice.
|
|
75328
75484
|
* - `segment-active`: The slice under the pointer. Set alongside `segment`.
|
|
75329
75485
|
* - `segment-edge`: One slice as a closed shape, used to draw its outline.
|
|
75330
75486
|
* - `slice-label`: One slice's share, written on the slice under `slice-labels`. Placed with `left` and `top`, or `inset-inline-start` and `top` on a half ring, and carries its series color as `--chart-series`.
|
|
75331
75487
|
* - `summary`: The chart's name and each slice's share, written as a sentence for screen readers. Hide it visually.
|
|
75488
|
+
* - `table`: The readings as a table, for a screen reader, rendered only where they were drawn from `data`. Hide it visually.
|
|
75332
75489
|
* - `tooltip`: The bubble, forwarded from `Tooltip`.
|
|
75333
75490
|
* - `tooltip-anchor`: The `Tooltip` element itself.
|
|
75334
75491
|
* - `tooltip-arrow`: The bubble's point, forwarded from `Tooltip`.
|
|
@@ -75351,6 +75508,9 @@ export type CustomElementsSolidJs = {
|
|
|
75351
75508
|
*
|
|
75352
75509
|
* These can be used to apply styling when a component is in a given state.
|
|
75353
75510
|
*
|
|
75511
|
+
* - `active`: While a slice is shown, under the pointer or the keys, with its tooltip open.
|
|
75512
|
+
* - `empty`: While the `empty` part stands in place of the ring.
|
|
75513
|
+
* - `loading`: While the `loading` part stands in place of the ring.
|
|
75354
75514
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
75355
75515
|
*/
|
|
75356
75516
|
"helix-headless-donut-chart": Partial<
|
|
@@ -77472,7 +77632,9 @@ export type CustomElementsSolidJs = {
|
|
|
77472
77632
|
*
|
|
77473
77633
|
* Set `legend` to name the groups over the drawing, each a button that shows
|
|
77474
77634
|
* or hides its notes. `hiddenGroups` holds the groups turned off, and the
|
|
77475
|
-
* list holds only what the drawing shows.
|
|
77635
|
+
* list holds only what the drawing shows. The legend is a toolbar and one tab
|
|
77636
|
+
* stop: the arrow keys, Home, End and a group's first letters move between
|
|
77637
|
+
* its buttons, and Space or Enter presses one.
|
|
77476
77638
|
*
|
|
77477
77639
|
* `nodes` and `links` are properties, never markup: a graph of ten thousand
|
|
77478
77640
|
* notes as ten thousand elements would cost what the renderer exists to save.
|
|
@@ -77522,6 +77684,9 @@ export type CustomElementsSolidJs = {
|
|
|
77522
77684
|
* own, since the fallback name is the same word. Empty leaves the role.
|
|
77523
77685
|
* - `search-label`/`searchLabel`: The search field's name.
|
|
77524
77686
|
* - `selected-label`/`selectedLabel`: How the selected note is described in the list.
|
|
77687
|
+
* - `selection-label`/`selectionLabel`: What screen readers hear after a reader selects a note, in the list or in
|
|
77688
|
+
* the drawing, with `{note}` for its name and `{count}` for how many notes
|
|
77689
|
+
* the list then holds, written with `count-label`.
|
|
77525
77690
|
* - `two-finger-hint-label`/`twoFingerHintLabel`: The hint shown when one finger swipes over the graph with `gestures="cooperative"`.
|
|
77526
77691
|
* - `using-label`/`usingLabel`: The line shown while the graph, with `gestures="activate"`, has the gestures.
|
|
77527
77692
|
* - `wheel-hint-label`/`wheelHintLabel`: The hint shown when the wheel scrolls past the graph with
|
|
@@ -77710,18 +77875,10 @@ export type CustomElementsSolidJs = {
|
|
|
77710
77875
|
* **Said once the drawing has moved, and only then.** The frame asks and
|
|
77711
77876
|
* the renderer moves, so a frame with nothing to answer it says nothing: a
|
|
77712
77877
|
* move said that never happened is worse than silence.
|
|
77878
|
+
* - `requestActive(next: string, cause?: string) => boolean`: Asks for a note to be selected, and remembers the ask, so the selection is said once it lands.
|
|
77713
77879
|
* - `pan(to: ViewportWay) => void`: Pans the view one step in a direction.
|
|
77714
77880
|
* - `zoom(by: number) => void`: Zooms the view one step: `1` zooms in and `-1` zooms out.
|
|
77715
77881
|
* - `toggleFullscreen() => void`: Turns fullscreen on or off.
|
|
77716
|
-
* - `requestActive(next: string, cause?: string) => boolean`: Requests a new current item, and returns whether the change was applied.
|
|
77717
|
-
*
|
|
77718
|
-
* Announces before it acts, so `preventDefault()` on the `helix-before-activate` is
|
|
77719
|
-
* a refusal and nothing moves. Unlike a native control, nothing has moved
|
|
77720
|
-
* by the time this runs, so refusing is simply not writing: there is
|
|
77721
|
-
* nothing to put back. Nobody refusing means the set updates itself,
|
|
77722
|
-
* whether or not a consumer declared `active`, a declared property being a
|
|
77723
|
-
* seed and a correction. `cause` says why, where the family names its
|
|
77724
|
-
* causes, and reaches the event as `detail.cause`.
|
|
77725
77882
|
*
|
|
77726
77883
|
* ## CSS Parts
|
|
77727
77884
|
*
|
|
@@ -77740,7 +77897,7 @@ export type CustomElementsSolidJs = {
|
|
|
77740
77897
|
* - `gesture-hint`: Words over the graph for a moment when it lets a gesture pass to the page, such as how to zoom it.
|
|
77741
77898
|
* - `gesture-status`: The line shown while a graph with `gestures="activate"` has the gestures.
|
|
77742
77899
|
* - `header`: The strip above the graph.
|
|
77743
|
-
* - `legend`: The groups over the drawing, with `legend
|
|
77900
|
+
* - `legend`: The groups over the drawing, with `legend`: a toolbar of buttons, each showing or hiding its notes, which is one tab stop.
|
|
77744
77901
|
* - `legend-item`: One group in the legend, pressed while its notes are shown. Carries `data-tone` where every note in the group has the same tone, which colors the notes over the group's own color.
|
|
77745
77902
|
* - `legend-item-hidden`: A group in the legend whose notes are hidden.
|
|
77746
77903
|
* - `legend-swatch`: The mark in a group's color, before its name.
|
|
@@ -77829,11 +77986,25 @@ export type CustomElementsSolidJs = {
|
|
|
77829
77986
|
* `multiple` any number. Space, Enter or a press selects the cell the keys or
|
|
77830
77987
|
* the pointer rest on, or lets it go, and under `multiple` Shift with an arrow,
|
|
77831
77988
|
* Home, End, PageUp or PageDown takes in every cell from the last one pressed
|
|
77832
|
-
* to where the key went. `value` holds the selected days, by
|
|
77833
|
-
*
|
|
77989
|
+
* to where the key went. `value` holds the selected days, separated by
|
|
77990
|
+
* commas: each by its row's `<time datetime>`, such as `2026-06-11`, or by
|
|
77991
|
+
* its row's name where the row carries no date. A change asks with
|
|
77834
77992
|
* `helix-before-change` and tells with `change`, and the `selection` part says
|
|
77835
77993
|
* how many are selected, in `selection-label`.
|
|
77836
77994
|
*
|
|
77995
|
+
* **Keyboard.** The strip is one tab stop once it has cells.
|
|
77996
|
+
*
|
|
77997
|
+
* | Key | What it does |
|
|
77998
|
+
* |---|---|
|
|
77999
|
+
* | Tab | Moves focus to the strip and shows the first cell. |
|
|
78000
|
+
* | Down, Up | Moves to the next or the previous cell. |
|
|
78001
|
+
* | Right, Left | Moves a column on or back, a week with `rows="7"`. On a right-to-left page, Left moves on. |
|
|
78002
|
+
* | Home, End | Moves to the first or the last cell. |
|
|
78003
|
+
* | Page Down, Page Up | Moves a month on or back where the rows carry dates, and four columns otherwise. |
|
|
78004
|
+
* | Enter, Space | Selects the cell, or lets it go, under `selection-mode`. |
|
|
78005
|
+
* | Shift with an arrow, Home, End, Page Up or Page Down | Selects every cell from the last one pressed to where the key went, under `selection-mode="multiple"`. |
|
|
78006
|
+
* | Escape | Puts the cell's tooltip away. |
|
|
78007
|
+
*
|
|
77837
78008
|
* ## Attributes & Properties
|
|
77838
78009
|
*
|
|
77839
78010
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
@@ -77904,8 +78075,9 @@ export type CustomElementsSolidJs = {
|
|
|
77904
78075
|
* no order in it.
|
|
77905
78076
|
* - `total-label`/`totalLabel`: The name the `overview` gives the total of the readings drawn,
|
|
77906
78077
|
* `{totalLabel}` in `overview-label`.
|
|
77907
|
-
* - `value`: The selected cells, by
|
|
77908
|
-
* `2026-06-11`,
|
|
78078
|
+
* - `value`: The selected cells, separated by commas: each by the date its row's
|
|
78079
|
+
* header carries in a `<time datetime>`, such as `2026-06-11`, or by the
|
|
78080
|
+
* header's words where it carries none.
|
|
77909
78081
|
*
|
|
77910
78082
|
* Set it to start with cells selected. Written by a press or a key under
|
|
77911
78083
|
* `selection-mode`.
|
|
@@ -77951,12 +78123,6 @@ export type CustomElementsSolidJs = {
|
|
|
77951
78123
|
*
|
|
77952
78124
|
* The mixin counts the table's rows, and a strip too narrow for all of them
|
|
77953
78125
|
* draws the newest, so a key stepping by rows would walk off the drawing. (property only) (readonly)
|
|
77954
|
-
* - `pointer`: Finds the reading nearest the pointer, so the tooltip can sit on it.
|
|
77955
|
-
*
|
|
77956
|
-
* Public for the same reason `series` and `named` are: a protected member
|
|
77957
|
-
* cannot be cast onto across unrelated classes, so it would be invisible to
|
|
77958
|
-
* every chart that needs it. Reading where a pointer is resting is a fair
|
|
77959
|
-
* thing to ask a chart anyway. (property only) (readonly)
|
|
77960
78126
|
* - `data`: The readings as data, in the shape of a table, where the page has no
|
|
77961
78127
|
* table to point `for` at. `for` wins where both are set.
|
|
77962
78128
|
*
|
|
@@ -77995,21 +78161,6 @@ export type CustomElementsSolidJs = {
|
|
|
77995
78161
|
* names an element, and the chart is a generic around its plot: written
|
|
77996
78162
|
* on the host, the name reached nobody. The plot takes it, as Heatmap's
|
|
77997
78163
|
* strip always did. (property only) (readonly)
|
|
77998
|
-
* - `readingsKnown`: Whether the readings have been looked for: false on the server and
|
|
77999
|
-
* while hydrating, where no table is resolved and no data is read. A
|
|
78000
|
-
* chart says it has no readings only once this is true. (property only) (readonly)
|
|
78001
|
-
* - `sourceRows`: Every row of the table, with each cell's text and number.
|
|
78002
|
-
*
|
|
78003
|
-
* This is where a tooltip's content comes from, and it is deliberately not
|
|
78004
|
-
* `series`. A chart draws numbers; a reader resting a pointer on one wants
|
|
78005
|
-
* what the table says, which is `$128k` and not `128000`, and often wants
|
|
78006
|
-
* the column beside it that nothing plotted at all.
|
|
78007
|
-
*
|
|
78008
|
-
* **Not `rows`.** It is the source table's rows, and `rows` on a chart is a
|
|
78009
|
-
* name a chart wants for itself: `helix-heatmap` takes `rows="7"` to mean a
|
|
78010
|
-
* calendar week, and declaring that against a base class whose `rows` is a
|
|
78011
|
-
* `Row[]` getter is a type error at best. Name the member for what it holds
|
|
78012
|
-
* rather than for the shortest word available. (property only) (readonly)
|
|
78013
78164
|
* - `plottedColumns`: The positions of the cells in a row that hold numbers, in table order.
|
|
78014
78165
|
*
|
|
78015
78166
|
* The same test `readSeries` applies when it drops a column of notes: a
|
|
@@ -78059,8 +78210,6 @@ export type CustomElementsSolidJs = {
|
|
|
78059
78210
|
* - `pageFrom(at: number, forward: boolean) => number | undefined`: Where PageUp or PageDown goes from the drawn cell at `at`: the same day a
|
|
78060
78211
|
* month on or back, by the dates the rows' headers carry. Undefined where
|
|
78061
78212
|
* they carry none, and the keys move four columns.
|
|
78062
|
-
* - `attributeChangedCallback(name: string, old: string | null, value: string | null) => void`: Called by the browser when an observed attribute changes. A new
|
|
78063
|
-
* `aria-label` asks for an update, because it names the plot.
|
|
78064
78213
|
* - `seriesOf(cell: number) => number | undefined`: The palette slot for the cell at this position in a row.
|
|
78065
78214
|
*
|
|
78066
78215
|
* **A cell's place in its row is not its series' depth, and the tooltip
|
|
@@ -78127,6 +78276,7 @@ export type CustomElementsSolidJs = {
|
|
|
78127
78276
|
* - `start`: The leading slot's box.
|
|
78128
78277
|
* - `strip`: The grid of cells, which takes focus to be read by key. It is named by the host's `aria-labelledby` or `aria-label`, then by `label`, then by the caption of the table.
|
|
78129
78278
|
* - `summary`: The middle slot's box.
|
|
78279
|
+
* - `table`: The readings as a table, for a screen reader, rendered only where they were drawn from `data`. Hide it visually.
|
|
78130
78280
|
* - `tooltip`: The bubble, forwarded from `Tooltip`.
|
|
78131
78281
|
* - `tooltip-anchor`: The `Tooltip` element itself.
|
|
78132
78282
|
* - `tooltip-arrow`: The bubble's point, forwarded from `Tooltip`.
|
|
@@ -78148,6 +78298,8 @@ export type CustomElementsSolidJs = {
|
|
|
78148
78298
|
*
|
|
78149
78299
|
* These can be used to apply styling when a component is in a given state.
|
|
78150
78300
|
*
|
|
78301
|
+
* - `active`: While a cell is shown, under the pointer or the keys, with its tooltip open.
|
|
78302
|
+
* - `empty`: While the `empty` part stands in place of the cells.
|
|
78151
78303
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
78152
78304
|
*/
|
|
78153
78305
|
"helix-headless-heatmap": Partial<
|
|
@@ -79702,6 +79854,18 @@ export type CustomElementsSolidJs = {
|
|
|
79702
79854
|
* there until readings arrive. The `empty` and `loading` slots take markup in
|
|
79703
79855
|
* their place, such as a link to add the first reading.
|
|
79704
79856
|
*
|
|
79857
|
+
* **Keyboard.** The plot is one tab stop.
|
|
79858
|
+
*
|
|
79859
|
+
* | Key | What it does |
|
|
79860
|
+
* |---|---|
|
|
79861
|
+
* | Tab | Moves focus to the plot and shows the first reading. |
|
|
79862
|
+
* | Right, Left | Moves to the next or the previous reading. On a right-to-left page, Left moves to the next. |
|
|
79863
|
+
* | Down, Up | Moves among the series of the reading. With one series, moves to the next or the previous reading. |
|
|
79864
|
+
* | Home, End | Moves to the first or the last reading. |
|
|
79865
|
+
* | Page Down, Page Up | Moves a tenth of the readings on or back. |
|
|
79866
|
+
* | Enter, Space | Presses the reading shown, which sends `helix-reading-press`. |
|
|
79867
|
+
* | Escape | Puts the reading and its tooltip away. |
|
|
79868
|
+
*
|
|
79705
79869
|
* ## Attributes & Properties
|
|
79706
79870
|
*
|
|
79707
79871
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
@@ -79846,12 +80010,6 @@ export type CustomElementsSolidJs = {
|
|
|
79846
80010
|
* Set it to the words of the page's language, such as `{position} von
|
|
79847
80011
|
* {count}`, or to nothing to say no position. A slice or a series a
|
|
79848
80012
|
* legend hid is not counted.
|
|
79849
|
-
* - `pointer`: Finds the reading nearest the pointer, so the tooltip can sit on it.
|
|
79850
|
-
*
|
|
79851
|
-
* Public for the same reason `series` and `named` are: a protected member
|
|
79852
|
-
* cannot be cast onto across unrelated classes, so it would be invisible to
|
|
79853
|
-
* every chart that needs it. Reading where a pointer is resting is a fair
|
|
79854
|
-
* thing to ask a chart anyway. (property only) (readonly)
|
|
79855
80013
|
* - `data`: The readings as data, in the shape of a table, where the page has no
|
|
79856
80014
|
* table to point `for` at. `for` wins where both are set.
|
|
79857
80015
|
*
|
|
@@ -79890,21 +80048,6 @@ export type CustomElementsSolidJs = {
|
|
|
79890
80048
|
* names an element, and the chart is a generic around its plot: written
|
|
79891
80049
|
* on the host, the name reached nobody. The plot takes it, as Heatmap's
|
|
79892
80050
|
* strip always did. (property only) (readonly)
|
|
79893
|
-
* - `readingsKnown`: Whether the readings have been looked for: false on the server and
|
|
79894
|
-
* while hydrating, where no table is resolved and no data is read. A
|
|
79895
|
-
* chart says it has no readings only once this is true. (property only) (readonly)
|
|
79896
|
-
* - `sourceRows`: Every row of the table, with each cell's text and number.
|
|
79897
|
-
*
|
|
79898
|
-
* This is where a tooltip's content comes from, and it is deliberately not
|
|
79899
|
-
* `series`. A chart draws numbers; a reader resting a pointer on one wants
|
|
79900
|
-
* what the table says, which is `$128k` and not `128000`, and often wants
|
|
79901
|
-
* the column beside it that nothing plotted at all.
|
|
79902
|
-
*
|
|
79903
|
-
* **Not `rows`.** It is the source table's rows, and `rows` on a chart is a
|
|
79904
|
-
* name a chart wants for itself: `helix-heatmap` takes `rows="7"` to mean a
|
|
79905
|
-
* calendar week, and declaring that against a base class whose `rows` is a
|
|
79906
|
-
* `Row[]` getter is a type error at best. Name the member for what it holds
|
|
79907
|
-
* rather than for the shortest word available. (property only) (readonly)
|
|
79908
80051
|
* - `plottedColumns`: The positions of the cells in a row that hold numbers, in table order.
|
|
79909
80052
|
*
|
|
79910
80053
|
* The same test `readSeries` applies when it drops a column of notes: a
|
|
@@ -79950,8 +80093,6 @@ export type CustomElementsSolidJs = {
|
|
|
79950
80093
|
*
|
|
79951
80094
|
* Methods that can be called to access component functionality.
|
|
79952
80095
|
*
|
|
79953
|
-
* - `attributeChangedCallback(name: string, old: string | null, value: string | null) => void`: Called by the browser when an observed attribute changes. A new
|
|
79954
|
-
* `aria-label` asks for an update, because it names the plot.
|
|
79955
80096
|
* - `seriesOf(cell: number) => number | undefined`: The palette slot for the cell at this position in a row.
|
|
79956
80097
|
*
|
|
79957
80098
|
* **A cell's place in its row is not its series' depth, and the tooltip
|
|
@@ -80010,9 +80151,10 @@ export type CustomElementsSolidJs = {
|
|
|
80010
80151
|
* - `mark`: The invisible point the tooltip is anchored to.
|
|
80011
80152
|
* - `marker`: The mark on one reading, under `markers`, and on a reading with a blank on either side. Placed with `inset-inline-start` and `inset-block-start`, and carries its series color as `--chart-series`.
|
|
80012
80153
|
* - `marker-lone`: A `marker` on a reading with a blank on either side, which no line reaches. Set alongside `marker`.
|
|
80013
|
-
* - `plot`: The drawing, which takes focus to be read by key.
|
|
80154
|
+
* - `plot`: The drawing, which takes focus to be read by key. With nothing to draw, a group named as the chart is, holding the `empty` or `loading` part.
|
|
80014
80155
|
* - `summary`: The chart's name and each series' latest reading, written as a sentence for screen readers. Hide it visually.
|
|
80015
80156
|
* - `svg`: The drawing surface the lines and areas sit on.
|
|
80157
|
+
* - `table`: The readings as a table, for a screen reader, rendered only where they were drawn from `data`. Hide it visually.
|
|
80016
80158
|
* - `terminus`: The mark on one series' last reading.
|
|
80017
80159
|
* - `tick`: One number on the axis, placed with `inset-block-start` at its level.
|
|
80018
80160
|
* - `tooltip`: The bubble, forwarded from `Tooltip`.
|
|
@@ -80036,6 +80178,9 @@ export type CustomElementsSolidJs = {
|
|
|
80036
80178
|
*
|
|
80037
80179
|
* These can be used to apply styling when a component is in a given state.
|
|
80038
80180
|
*
|
|
80181
|
+
* - `active`: While a reading is shown, under the pointer or the keys, with its tooltip open.
|
|
80182
|
+
* - `empty`: While the `empty` part stands in the plot.
|
|
80183
|
+
* - `loading`: While the `loading` part stands in the plot.
|
|
80039
80184
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
80040
80185
|
*/
|
|
80041
80186
|
"helix-headless-line-chart": Partial<
|
|
@@ -80908,6 +81053,13 @@ export type CustomElementsSolidJs = {
|
|
|
80908
81053
|
* hidden, and silent, for that many milliseconds, and appears only if the work
|
|
80909
81054
|
* is still going. While it waits it carries `:state(waiting)`.
|
|
80910
81055
|
*
|
|
81056
|
+
* **The loader can stand in for what it wraps.** Put the content in the
|
|
81057
|
+
* `content` slot, such as a button or a card, and set `idle` while no work is
|
|
81058
|
+
* in progress. While the work runs, the content keeps its size and is hidden
|
|
81059
|
+
* and inert, and the ring draws over it. While `idle` is set, the loader draws
|
|
81060
|
+
* nothing of its own, has no role, and marks no region busy, so only the
|
|
81061
|
+
* content shows. Clearing `idle` starts `delay` again.
|
|
81062
|
+
*
|
|
80911
81063
|
* ## Attributes & Properties
|
|
80912
81064
|
*
|
|
80913
81065
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
@@ -80922,6 +81074,9 @@ export type CustomElementsSolidJs = {
|
|
|
80922
81074
|
*
|
|
80923
81075
|
* Names an element in the same tree. In React it arrives as a property, the
|
|
80924
81076
|
* way `Tooltip.for` does.
|
|
81077
|
+
* - `idle`: Whether no work is in progress. The loader draws nothing of its own, has
|
|
81078
|
+
* no role, and marks no region busy, and what is in the `content` slot
|
|
81079
|
+
* shows. Clearing it starts `delay` again.
|
|
80925
81080
|
* - `label`: The loader's name, announced by screen readers while the work is in
|
|
80926
81081
|
* progress.
|
|
80927
81082
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
@@ -80950,11 +81105,13 @@ export type CustomElementsSolidJs = {
|
|
|
80950
81105
|
* Areas where markup can be added to the component.
|
|
80951
81106
|
*
|
|
80952
81107
|
* - `(default)`: An icon or logo that stays still at the center. Empty by default.
|
|
81108
|
+
* - `content`: What the loader stands in for while the work runs, such as a button. It keeps its size, hidden and inert, until `idle` is set.
|
|
80953
81109
|
*
|
|
80954
81110
|
* ## CSS Parts
|
|
80955
81111
|
*
|
|
80956
81112
|
* Custom selectors for styling elements within the component.
|
|
80957
81113
|
*
|
|
81114
|
+
* - `content`: The box that holds the `content` slot. Hidden while the work runs, and shown while `idle` is set.
|
|
80958
81115
|
* - `indicator`: The arc that turns.
|
|
80959
81116
|
* - `mark`: The region that holds the slotted content at the center.
|
|
80960
81117
|
* - `svg`: The rotating circle pair.
|
|
@@ -86607,7 +86764,8 @@ export type CustomElementsSolidJs = {
|
|
|
86607
86764
|
*
|
|
86608
86765
|
* Left and Right swap on a right-to-left page. The marks are a `radiogroup`
|
|
86609
86766
|
* named by `label`, and each score is a `radio` named by `option-label`, such
|
|
86610
|
-
* as "3 out of 5". A read-only rating is one `img` named by its
|
|
86767
|
+
* as "3 out of 5". A read-only rating is one `img` named by its label and
|
|
86768
|
+
* then its score, such as "Quality 3 out of 5".
|
|
86611
86769
|
*
|
|
86612
86770
|
* ## Attributes & Properties
|
|
86613
86771
|
*
|
|
@@ -86918,10 +87076,10 @@ export type CustomElementsSolidJs = {
|
|
|
86918
87076
|
* readers.
|
|
86919
87077
|
*
|
|
86920
87078
|
* **The plot is read by key.** It takes focus, named by `label` or the caption.
|
|
86921
|
-
* The left and right arrows move from
|
|
86922
|
-
* and End go to the first and the last, and the up and down
|
|
86923
|
-
* the series of a row. The tooltip sits on that point, the
|
|
86924
|
-
* row in words, and Escape puts the tooltip away.
|
|
87079
|
+
* The left and right arrows move from point to point, left to right across
|
|
87080
|
+
* the plot, Home and End go to the first and the last, and the up and down
|
|
87081
|
+
* arrows move among the series of a row. The tooltip sits on that point, the
|
|
87082
|
+
* `live` part says the row in words, and Escape puts the tooltip away.
|
|
86925
87083
|
*
|
|
86926
87084
|
* Each point is a `<span>` placed by percentage over the drawing, as
|
|
86927
87085
|
* `LineChart` places its end points, so points stay round when the drawing
|
|
@@ -86948,6 +87106,18 @@ export type CustomElementsSolidJs = {
|
|
|
86948
87106
|
* there until readings arrive. The `empty` and `loading` slots take markup in
|
|
86949
87107
|
* their place, such as a link to add the first reading.
|
|
86950
87108
|
*
|
|
87109
|
+
* **Keyboard.** The plot is one tab stop.
|
|
87110
|
+
*
|
|
87111
|
+
* | Key | What it does |
|
|
87112
|
+
* |---|---|
|
|
87113
|
+
* | Tab | Moves focus to the plot and shows the first reading. |
|
|
87114
|
+
* | Right, Left | Moves to the next or the previous point, left to right across the plot. On a right-to-left page, Left moves to the next. |
|
|
87115
|
+
* | Down, Up | Moves among the series of the point. With one series, moves to the next or the previous point. |
|
|
87116
|
+
* | Home, End | Moves to the first or the last point. |
|
|
87117
|
+
* | Page Down, Page Up | Moves a tenth of the points on or back. |
|
|
87118
|
+
* | Enter, Space | Presses the point shown, which sends `helix-reading-press`. |
|
|
87119
|
+
* | Escape | Puts the point and its tooltip away. |
|
|
87120
|
+
*
|
|
86951
87121
|
* ## Attributes & Properties
|
|
86952
87122
|
*
|
|
86953
87123
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
@@ -87017,12 +87187,6 @@ export type CustomElementsSolidJs = {
|
|
|
87017
87187
|
* Set it to the words of the page's language, such as `{position} von
|
|
87018
87188
|
* {count}`, or to nothing to say no position. A slice or a series a
|
|
87019
87189
|
* legend hid is not counted.
|
|
87020
|
-
* - `pointer`: Finds the reading nearest the pointer, so the tooltip can sit on it.
|
|
87021
|
-
*
|
|
87022
|
-
* Public for the same reason `series` and `named` are: a protected member
|
|
87023
|
-
* cannot be cast onto across unrelated classes, so it would be invisible to
|
|
87024
|
-
* every chart that needs it. Reading where a pointer is resting is a fair
|
|
87025
|
-
* thing to ask a chart anyway. (property only) (readonly)
|
|
87026
87190
|
* - `data`: The readings as data, in the shape of a table, where the page has no
|
|
87027
87191
|
* table to point `for` at. `for` wins where both are set.
|
|
87028
87192
|
*
|
|
@@ -87061,21 +87225,6 @@ export type CustomElementsSolidJs = {
|
|
|
87061
87225
|
* names an element, and the chart is a generic around its plot: written
|
|
87062
87226
|
* on the host, the name reached nobody. The plot takes it, as Heatmap's
|
|
87063
87227
|
* strip always did. (property only) (readonly)
|
|
87064
|
-
* - `readingsKnown`: Whether the readings have been looked for: false on the server and
|
|
87065
|
-
* while hydrating, where no table is resolved and no data is read. A
|
|
87066
|
-
* chart says it has no readings only once this is true. (property only) (readonly)
|
|
87067
|
-
* - `sourceRows`: Every row of the table, with each cell's text and number.
|
|
87068
|
-
*
|
|
87069
|
-
* This is where a tooltip's content comes from, and it is deliberately not
|
|
87070
|
-
* `series`. A chart draws numbers; a reader resting a pointer on one wants
|
|
87071
|
-
* what the table says, which is `$128k` and not `128000`, and often wants
|
|
87072
|
-
* the column beside it that nothing plotted at all.
|
|
87073
|
-
*
|
|
87074
|
-
* **Not `rows`.** It is the source table's rows, and `rows` on a chart is a
|
|
87075
|
-
* name a chart wants for itself: `helix-heatmap` takes `rows="7"` to mean a
|
|
87076
|
-
* calendar week, and declaring that against a base class whose `rows` is a
|
|
87077
|
-
* `Row[]` getter is a type error at best. Name the member for what it holds
|
|
87078
|
-
* rather than for the shortest word available. (property only) (readonly)
|
|
87079
87228
|
* - `plottedColumns`: The positions of the cells in a row that hold numbers, in table order.
|
|
87080
87229
|
*
|
|
87081
87230
|
* The same test `readSeries` applies when it drops a column of notes: a
|
|
@@ -87134,8 +87283,6 @@ export type CustomElementsSolidJs = {
|
|
|
87134
87283
|
* The across gets no dot at all rather than a shifted one. It is an axis and
|
|
87135
87284
|
* not a series: it has a scale under the plot with its name at the end of it,
|
|
87136
87285
|
* which is where a reader is told what it is.
|
|
87137
|
-
* - `attributeChangedCallback(name: string, old: string | null, value: string | null) => void`: Called by the browser when an observed attribute changes. A new
|
|
87138
|
-
* `aria-label` asks for an update, because it names the plot.
|
|
87139
87286
|
* - `showsSeries(name: string) => boolean`: Whether the series of this name is drawn, which it is unless a legend
|
|
87140
87287
|
* reading the same table hid it.
|
|
87141
87288
|
*
|
|
@@ -87172,11 +87319,12 @@ export type CustomElementsSolidJs = {
|
|
|
87172
87319
|
* - `loading`: The words in place of the drawing while `loading` is set and there are no readings: the `loading` slot, falling back to `loading-text`.
|
|
87173
87320
|
* - `mark`: The invisible point the tooltip is anchored to.
|
|
87174
87321
|
* - `plane`: The grid that holds the plot, both axes, and their names. It runs left to right on every page.
|
|
87175
|
-
* - `plot`: The drawing, which takes focus to be read by key.
|
|
87322
|
+
* - `plot`: The drawing, which takes focus to be read by key. With nothing to draw, a group named as the chart is, holding the `empty` or `loading` part.
|
|
87176
87323
|
* - `point`: One row, as a point.
|
|
87177
87324
|
* - `point-active`: A point in the row under the pointer. Set alongside `point`.
|
|
87178
87325
|
* - `summary`: The text that says how strongly the measures relate, for people who cannot see the points.
|
|
87179
87326
|
* - `svg`: The drawing surface the gridlines and the trend lines sit on.
|
|
87327
|
+
* - `table`: The readings as a table, for a screen reader, rendered only where they were drawn from `data`. Hide it visually.
|
|
87180
87328
|
* - `tooltip`: The bubble, forwarded from `Tooltip`.
|
|
87181
87329
|
* - `tooltip-anchor`: The `Tooltip` element itself.
|
|
87182
87330
|
* - `tooltip-arrow`: The bubble's point, forwarded from `Tooltip`.
|
|
@@ -87196,7 +87344,7 @@ export type CustomElementsSolidJs = {
|
|
|
87196
87344
|
* - `trend`: One series' line of best fit, under `trend`. Carries its series color as `--chart-series`.
|
|
87197
87345
|
* - `x-axis`: The values along the horizontal axis, under the plot.
|
|
87198
87346
|
* - `x-name`: The name of the horizontal measure.
|
|
87199
|
-
* - `x-tick`: One labeled value on the horizontal axis. Each axis has its own tick part, because `::part()` cannot tell which axis a tick is on.
|
|
87347
|
+
* - `x-tick`: One labeled value on the horizontal axis. Each axis has its own tick part, because `::part()` cannot tell which axis a tick is on. The one at the far edge carries `data-edge="end"`.
|
|
87200
87348
|
* - `y-axis`: The values along the vertical axis, beside the plot.
|
|
87201
87349
|
* - `y-name`: The name of the vertical measure.
|
|
87202
87350
|
* - `y-tick`: One labeled value on the vertical axis.
|
|
@@ -87205,6 +87353,9 @@ export type CustomElementsSolidJs = {
|
|
|
87205
87353
|
*
|
|
87206
87354
|
* These can be used to apply styling when a component is in a given state.
|
|
87207
87355
|
*
|
|
87356
|
+
* - `active`: While a reading is shown, under the pointer or the keys, with its tooltip open.
|
|
87357
|
+
* - `empty`: While the `empty` part stands in the plot.
|
|
87358
|
+
* - `loading`: While the `loading` part stands in the plot.
|
|
87208
87359
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
87209
87360
|
*/
|
|
87210
87361
|
"helix-headless-scatter-chart": Partial<
|
|
@@ -87368,7 +87519,9 @@ export type CustomElementsSolidJs = {
|
|
|
87368
87519
|
* place for focus to return to when the list closes.
|
|
87369
87520
|
*
|
|
87370
87521
|
* Your options stay in your light DOM and are slotted through into the listbox,
|
|
87371
|
-
* so the listbox looks through slots to find them.
|
|
87522
|
+
* so the listbox looks through slots to find them. Write them as `Option`,
|
|
87523
|
+
* group them in `Option.Group`, and divide them with `Option.Separator`.
|
|
87524
|
+
* Importing Select registers all three in the same tier. For a list too long to draw
|
|
87372
87525
|
* whole, set `items` instead: the list draws only the options in sight, as
|
|
87373
87526
|
* Listbox's `items` does, and the trigger, its keys and the form read the
|
|
87374
87527
|
* whole set.
|
|
@@ -88273,6 +88426,10 @@ export type CustomElementsSolidJs = {
|
|
|
88273
88426
|
* the lowest, in `overview-label`: "From 12 to 20, highest 30, lowest 8". An
|
|
88274
88427
|
* `aria-label` on the element names it as `label` does.
|
|
88275
88428
|
*
|
|
88429
|
+
* `helix-reading-change` says each move of the reading, by pointer, tap or
|
|
88430
|
+
* key, and `helix-reading-press` says a reading was clicked, tapped, or pressed
|
|
88431
|
+
* with Enter or Space, as on every chart.
|
|
88432
|
+
*
|
|
88276
88433
|
* A pointer resting on the drawing shows the reading under it: the `cursor`
|
|
88277
88434
|
* part marks it and the `readout` part writes it. `marks` adds a mark on the
|
|
88278
88435
|
* highest and the lowest reading, and `range` draws a band between two values,
|
|
@@ -88287,6 +88444,17 @@ export type CustomElementsSolidJs = {
|
|
|
88287
88444
|
* the component computes and CSS cannot, so a stylesheet can draw the sparkline
|
|
88288
88445
|
* without measuring anything.
|
|
88289
88446
|
*
|
|
88447
|
+
* **Keyboard.** A sparkline with a `label` is one tab stop.
|
|
88448
|
+
*
|
|
88449
|
+
* | Key | What it does |
|
|
88450
|
+
* |---|---|
|
|
88451
|
+
* | Tab | Moves focus to the drawing and shows the first reading, where there is a `label`. |
|
|
88452
|
+
* | Any arrow | Right and Down move to the next reading, Left and Up to the previous. On a right-to-left page, Left moves to the next. |
|
|
88453
|
+
* | Home, End | Moves to the first or the last reading. |
|
|
88454
|
+
* | Page Down, Page Up | Moves a tenth of the readings on or back. |
|
|
88455
|
+
* | Enter, Space | Presses the reading shown, which sends `helix-reading-press`. |
|
|
88456
|
+
* | Escape | Puts the reading and its tooltip away. |
|
|
88457
|
+
*
|
|
88290
88458
|
* ## Attributes & Properties
|
|
88291
88459
|
*
|
|
88292
88460
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
@@ -88391,8 +88559,6 @@ export type CustomElementsSolidJs = {
|
|
|
88391
88559
|
* with `values={[1240, 1318]}`. The attribute is the form to prefer, because
|
|
88392
88560
|
* a string is what survives React's hydration where an array property does
|
|
88393
88561
|
* not.
|
|
88394
|
-
* - `pointer`: Finds the reading a pointer or a key rests on, as it does for every
|
|
88395
|
-
* chart, so a sparkline is read the way they are. (property only) (readonly)
|
|
88396
88562
|
* - `named`: The drawing's name: an `aria-label` written on the sparkline, then `label`. (property only) (readonly)
|
|
88397
88563
|
* - `readings`: How many readings there are, which the pointer and the keys walk. (property only) (readonly)
|
|
88398
88564
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
@@ -88416,11 +88582,12 @@ export type CustomElementsSolidJs = {
|
|
|
88416
88582
|
* browser harness's awaits it alone: a browser always runs the frame, and a
|
|
88417
88583
|
* timer beside it was a bet on how long one takes, which a busy run lost. (property only) (readonly)
|
|
88418
88584
|
*
|
|
88419
|
-
* ##
|
|
88585
|
+
* ## Events
|
|
88420
88586
|
*
|
|
88421
|
-
*
|
|
88587
|
+
* Events that will be emitted by the component.
|
|
88422
88588
|
*
|
|
88423
|
-
* - `
|
|
88589
|
+
* - `helix-reading-change`: The reading shown moved, or was put away: `index` is the reading, or `-1` for none, with its row's `label` from a table and the `pointerType` that moved it.
|
|
88590
|
+
* - `helix-reading-press`: A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`.
|
|
88424
88591
|
*
|
|
88425
88592
|
* ## CSS Custom Properties
|
|
88426
88593
|
*
|
|
@@ -91058,8 +91225,9 @@ export type CustomElementsSolidJs = {
|
|
|
91058
91225
|
* - `selection-mode`/`selectionMode`: How many tags a reader can select: `single`, `multiple`, or none.
|
|
91059
91226
|
*
|
|
91060
91227
|
* Absent selects nothing, and the tags carry no selected state at all.
|
|
91061
|
-
* - `value`: The selected tags' values, separated by commas
|
|
91062
|
-
* space.
|
|
91228
|
+
* - `value`: The selected tags' values, separated by commas with no space, as Toggle
|
|
91229
|
+
* Group and Table write theirs, since a value may hold a space. A value
|
|
91230
|
+
* written with a space after each comma is read the same way.
|
|
91063
91231
|
*
|
|
91064
91232
|
* Set it to start with tags selected. A tag's value is its `value`, or its
|
|
91065
91233
|
* words where it has none.
|
|
@@ -94220,9 +94388,9 @@ export type CustomElementsSolidJs = {
|
|
|
94220
94388
|
* Each item is an element because it holds state: whether it is open, selected,
|
|
94221
94389
|
* and focused.
|
|
94222
94390
|
*
|
|
94223
|
-
* An item is a branch when
|
|
94224
|
-
*
|
|
94225
|
-
* appears on hydration.
|
|
94391
|
+
* An item is a branch when an item is slotted into `children`, with
|
|
94392
|
+
* `slot="children"` on each nested item. This is detected on the client, so
|
|
94393
|
+
* server-rendered markup shows a leaf and the twisty appears on hydration.
|
|
94226
94394
|
*
|
|
94227
94395
|
* **`href` makes the whole row a link**, rendered as an `<a>`. Enter, middle
|
|
94228
94396
|
* click, and the status bar then work anywhere on the row.
|
|
@@ -94344,7 +94512,7 @@ export type CustomElementsSolidJs = {
|
|
|
94344
94512
|
*
|
|
94345
94513
|
* Areas where markup can be added to the component.
|
|
94346
94514
|
*
|
|
94347
|
-
* - `(default)`: The item's label.
|
|
94515
|
+
* - `(default)`: The item's label. A nested item does not go here: give it `slot="children"`. In a development build, an item nested here is reported.
|
|
94348
94516
|
* - `chevron`: Replaces the expand and collapse mark of a branch, such as with your own icon.
|
|
94349
94517
|
* - `children`: Nested items, which make this a branch.
|
|
94350
94518
|
* - `end`: Content after the label, at the far side of the row, such as a count or a state.
|