@fusion.dev/helix 0.151.0 → 0.153.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 +1672 -64
- package/dist/app-header/root/app-header-root.css.js +6 -1
- package/dist/area-chart/root/area-chart-root.js +2 -1
- package/dist/bar-chart/root/bar-chart-root.js +2 -1
- package/dist/blockquote/root/blockquote-root.css.js +2 -1
- package/dist/blockquote/root/blockquote-root.d.ts +27 -0
- package/dist/blockquote/root/blockquote-root.js +7 -0
- package/dist/line-chart/root/line-chart-root.js +8 -1
- package/dist/navigation/root/navigation-root.css.js +1 -1
- package/dist/orb/root/orb-root.d.ts +6 -0
- package/dist/progress/root/progress-root.css.js +12 -3
- package/dist/progress/root/progress-root.d.ts +4 -0
- package/dist/scatter-chart/root/scatter-chart-root.js +2 -1
- package/dist/shared/chart/status.css.d.ts +1 -0
- package/dist/shared/chart/status.css.js +3 -0
- package/dist/steps/step/step.css.js +1 -1
- package/dist/steps/step/step.d.ts +10 -0
- package/lint.json +1 -1
- package/package.json +6 -6
- package/types/jsx.d.ts +1192 -14
- package/types/vue.d.ts +308 -6
- package/types/words.d.ts +14 -4
package/types/jsx.d.ts
CHANGED
|
@@ -1109,6 +1109,22 @@ the wordmark and the actions happen to measure.
|
|
|
1109
1109
|
takes a search field or a breadcrumb trail as readily as a `Navigation`, so
|
|
1110
1110
|
the property carries the part's name, `content`. */
|
|
1111
1111
|
contentAlign?: (HelixAppHeader["contentAlign"]) | undefined;
|
|
1112
|
+
/** The width of the bar, in pixels, below which the middle region folds behind
|
|
1113
|
+
a toggle. Unset, it never folds. */
|
|
1114
|
+
"fold-below"?: (HelixAppHeader["foldBelow"] | `${number}`) | undefined;
|
|
1115
|
+
/** The width of the bar, in pixels, below which the middle region folds behind
|
|
1116
|
+
a toggle. Unset, it never folds. */
|
|
1117
|
+
foldBelow?: (HelixAppHeader["foldBelow"]) | undefined;
|
|
1118
|
+
/** Hides the bar as the page scrolls down past it, and shows it again as the
|
|
1119
|
+
page scrolls up. */
|
|
1120
|
+
"hide-on-scroll"?: (HelixAppHeader["hideOnScroll"]) | undefined;
|
|
1121
|
+
/** Hides the bar as the page scrolls down past it, and shows it again as the
|
|
1122
|
+
page scrolls up. */
|
|
1123
|
+
hideOnScroll?: (HelixAppHeader["hideOnScroll"]) | undefined;
|
|
1124
|
+
/** The name of the toggle that opens a folded middle region. */
|
|
1125
|
+
"menu-label"?: (HelixAppHeader["menuLabel"]) | undefined;
|
|
1126
|
+
/** The name of the toggle that opens a folded middle region. */
|
|
1127
|
+
menuLabel?: (HelixAppHeader["menuLabel"]) | undefined;
|
|
1112
1128
|
/** The id of the element whose scrolling lifts the bar, for an app shell that
|
|
1113
1129
|
scrolls a container instead of the window. Unset is the window. */
|
|
1114
1130
|
scroller?: (HelixAppHeader["scroller"]) | undefined;
|
|
@@ -1198,6 +1214,22 @@ the wordmark and the actions happen to measure.
|
|
|
1198
1214
|
takes a search field or a breadcrumb trail as readily as a `Navigation`, so
|
|
1199
1215
|
the property carries the part's name, `content`. */
|
|
1200
1216
|
"prop:contentAlign"?: (HelixAppHeader["contentAlign"]) | undefined;
|
|
1217
|
+
/** The width of the bar, in pixels, below which the middle region folds behind
|
|
1218
|
+
a toggle. Unset, it never folds. */
|
|
1219
|
+
"attr:fold-below"?: (HelixAppHeader["foldBelow"] | `${number}`) | undefined;
|
|
1220
|
+
/** The width of the bar, in pixels, below which the middle region folds behind
|
|
1221
|
+
a toggle. Unset, it never folds. */
|
|
1222
|
+
"prop:foldBelow"?: (HelixAppHeader["foldBelow"]) | undefined;
|
|
1223
|
+
/** Hides the bar as the page scrolls down past it, and shows it again as the
|
|
1224
|
+
page scrolls up. */
|
|
1225
|
+
"bool:hide-on-scroll"?: (HelixAppHeader["hideOnScroll"]) | undefined;
|
|
1226
|
+
/** Hides the bar as the page scrolls down past it, and shows it again as the
|
|
1227
|
+
page scrolls up. */
|
|
1228
|
+
"prop:hideOnScroll"?: (HelixAppHeader["hideOnScroll"]) | undefined;
|
|
1229
|
+
/** The name of the toggle that opens a folded middle region. */
|
|
1230
|
+
"attr:menu-label"?: (HelixAppHeader["menuLabel"]) | undefined;
|
|
1231
|
+
/** The name of the toggle that opens a folded middle region. */
|
|
1232
|
+
"prop:menuLabel"?: (HelixAppHeader["menuLabel"]) | undefined;
|
|
1201
1233
|
/** The id of the element whose scrolling lifts the bar, for an app shell that
|
|
1202
1234
|
scrolls a container instead of the window. Unset is the window. */
|
|
1203
1235
|
"prop:scroller"?: (HelixAppHeader["scroller"]) | undefined;
|
|
@@ -1223,6 +1255,25 @@ export type HelixAreaChartHelixReadingPressElementEvent =
|
|
|
1223
1255
|
HelixAreaChartElementEvent<HelixReadingPressEvent>;
|
|
1224
1256
|
|
|
1225
1257
|
export type HelixAreaChartProps = {
|
|
1258
|
+
/** The words shown in place of the drawing when the table has no readings,
|
|
1259
|
+
and the fallback of the `empty` slot. */
|
|
1260
|
+
"empty-text"?: (HelixAreaChart["emptyText"]) | undefined;
|
|
1261
|
+
/** The words shown in place of the drawing when the table has no readings,
|
|
1262
|
+
and the fallback of the `empty` slot. */
|
|
1263
|
+
emptyText?: (HelixAreaChart["emptyText"]) | undefined;
|
|
1264
|
+
/** Whether the readings are still on their way. The chart shows
|
|
1265
|
+
`loading-text` in place of an empty drawing until it has readings.
|
|
1266
|
+
|
|
1267
|
+
Reflected, so a stylesheet can treat the chart while it waits. A chart
|
|
1268
|
+
that already has readings keeps drawing them, so a refresh does not
|
|
1269
|
+
blank it. */
|
|
1270
|
+
loading?: (HelixAreaChart["loading"]) | undefined;
|
|
1271
|
+
/** The words shown in place of the drawing while `loading` is set and
|
|
1272
|
+
there are no readings yet, and the fallback of the `loading` slot. */
|
|
1273
|
+
"loading-text"?: (HelixAreaChart["loadingText"]) | undefined;
|
|
1274
|
+
/** The words shown in place of the drawing while `loading` is set and
|
|
1275
|
+
there are no readings yet, and the fallback of the `loading` slot. */
|
|
1276
|
+
loadingText?: (HelixAreaChart["loadingText"]) | undefined;
|
|
1226
1277
|
/** The id of the table to read.
|
|
1227
1278
|
|
|
1228
1279
|
Names a table in the same tree, so a chart inside another component's
|
|
@@ -1320,6 +1371,29 @@ them, and the tooltip and the table hold every reading. */
|
|
|
1320
1371
|
Absent draws none: bands read as a composition need no numbers beside
|
|
1321
1372
|
them, and the tooltip and the table hold every reading. */
|
|
1322
1373
|
valueAxis?: (HelixAreaChart["valueAxis"]) | undefined;
|
|
1374
|
+
/** The readings as data, in the shape of a table, where the page has no
|
|
1375
|
+
table to point `for` at. `for` wins where both are set.
|
|
1376
|
+
|
|
1377
|
+
```js
|
|
1378
|
+
chart.data = {
|
|
1379
|
+
caption: 'Sessions by channel',
|
|
1380
|
+
columns: ['Month', 'Direct', 'Referral'],
|
|
1381
|
+
rows: [['Jan', 10, 4], ['Feb', 20, 8]],
|
|
1382
|
+
}
|
|
1383
|
+
```
|
|
1384
|
+
|
|
1385
|
+
The first column holds each row's label and every column after it a
|
|
1386
|
+
series, as in a table. A cell is a number, words, `null` for a blank,
|
|
1387
|
+
or `{ value, text }` for a number shown as words, such as `$128k`. A
|
|
1388
|
+
number is shown in `locale`.
|
|
1389
|
+
|
|
1390
|
+
**A table is still the better source where the page can show one**:
|
|
1391
|
+
it reads with no script and before hydration, and a reader can sort and
|
|
1392
|
+
copy it. Data is drawn on the client only, so a server serves the
|
|
1393
|
+
frame, and the summary, the keys and the readout are then the whole of
|
|
1394
|
+
what a screen reader is given. Set a new object to redraw: the chart
|
|
1395
|
+
does not look inside the one it has. */
|
|
1396
|
+
data?: (HelixAreaChart["data"]) | undefined;
|
|
1323
1397
|
|
|
1324
1398
|
/** The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it. */
|
|
1325
1399
|
"onhelix-reading-change"?: ((
|
|
@@ -1332,6 +1406,25 @@ them, and the tooltip and the table hold every reading. */
|
|
|
1332
1406
|
};
|
|
1333
1407
|
|
|
1334
1408
|
export type HelixAreaChartSolidJsProps = {
|
|
1409
|
+
/** The words shown in place of the drawing when the table has no readings,
|
|
1410
|
+
and the fallback of the `empty` slot. */
|
|
1411
|
+
"attr:empty-text"?: (HelixAreaChart["emptyText"]) | undefined;
|
|
1412
|
+
/** The words shown in place of the drawing when the table has no readings,
|
|
1413
|
+
and the fallback of the `empty` slot. */
|
|
1414
|
+
"prop:emptyText"?: (HelixAreaChart["emptyText"]) | undefined;
|
|
1415
|
+
/** Whether the readings are still on their way. The chart shows
|
|
1416
|
+
`loading-text` in place of an empty drawing until it has readings.
|
|
1417
|
+
|
|
1418
|
+
Reflected, so a stylesheet can treat the chart while it waits. A chart
|
|
1419
|
+
that already has readings keeps drawing them, so a refresh does not
|
|
1420
|
+
blank it. */
|
|
1421
|
+
"prop:loading"?: (HelixAreaChart["loading"]) | undefined;
|
|
1422
|
+
/** The words shown in place of the drawing while `loading` is set and
|
|
1423
|
+
there are no readings yet, and the fallback of the `loading` slot. */
|
|
1424
|
+
"attr:loading-text"?: (HelixAreaChart["loadingText"]) | undefined;
|
|
1425
|
+
/** The words shown in place of the drawing while `loading` is set and
|
|
1426
|
+
there are no readings yet, and the fallback of the `loading` slot. */
|
|
1427
|
+
"prop:loadingText"?: (HelixAreaChart["loadingText"]) | undefined;
|
|
1335
1428
|
/** The id of the table to read.
|
|
1336
1429
|
|
|
1337
1430
|
Names a table in the same tree, so a chart inside another component's
|
|
@@ -1429,6 +1522,29 @@ them, and the tooltip and the table hold every reading. */
|
|
|
1429
1522
|
Absent draws none: bands read as a composition need no numbers beside
|
|
1430
1523
|
them, and the tooltip and the table hold every reading. */
|
|
1431
1524
|
"prop:valueAxis"?: (HelixAreaChart["valueAxis"]) | undefined;
|
|
1525
|
+
/** The readings as data, in the shape of a table, where the page has no
|
|
1526
|
+
table to point `for` at. `for` wins where both are set.
|
|
1527
|
+
|
|
1528
|
+
```js
|
|
1529
|
+
chart.data = {
|
|
1530
|
+
caption: 'Sessions by channel',
|
|
1531
|
+
columns: ['Month', 'Direct', 'Referral'],
|
|
1532
|
+
rows: [['Jan', 10, 4], ['Feb', 20, 8]],
|
|
1533
|
+
}
|
|
1534
|
+
```
|
|
1535
|
+
|
|
1536
|
+
The first column holds each row's label and every column after it a
|
|
1537
|
+
series, as in a table. A cell is a number, words, `null` for a blank,
|
|
1538
|
+
or `{ value, text }` for a number shown as words, such as `$128k`. A
|
|
1539
|
+
number is shown in `locale`.
|
|
1540
|
+
|
|
1541
|
+
**A table is still the better source where the page can show one**:
|
|
1542
|
+
it reads with no script and before hydration, and a reader can sort and
|
|
1543
|
+
copy it. Data is drawn on the client only, so a server serves the
|
|
1544
|
+
frame, and the summary, the keys and the readout are then the whole of
|
|
1545
|
+
what a screen reader is given. Set a new object to redraw: the chart
|
|
1546
|
+
does not look inside the one it has. */
|
|
1547
|
+
"prop:data"?: (HelixAreaChart["data"]) | undefined;
|
|
1432
1548
|
/** The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it. */
|
|
1433
1549
|
"on:helix-reading-change"?: ((
|
|
1434
1550
|
e: HelixAreaChartHelixReadingChangeElementEvent,
|
|
@@ -2186,6 +2302,25 @@ every component in the library and mean something on one. `wash` because
|
|
|
2186
2302
|
that is what the tier below already calls it, in `--chart-bar-wash` and in
|
|
2187
2303
|
the `bar-wash-start` and `bar-wash-end` stops. */
|
|
2188
2304
|
wash?: (HelixBarChart["wash"]) | undefined;
|
|
2305
|
+
/** The words shown in place of the drawing when the table has no readings,
|
|
2306
|
+
and the fallback of the `empty` slot. */
|
|
2307
|
+
"empty-text"?: (HelixBarChart["emptyText"]) | undefined;
|
|
2308
|
+
/** The words shown in place of the drawing when the table has no readings,
|
|
2309
|
+
and the fallback of the `empty` slot. */
|
|
2310
|
+
emptyText?: (HelixBarChart["emptyText"]) | undefined;
|
|
2311
|
+
/** Whether the readings are still on their way. The chart shows
|
|
2312
|
+
`loading-text` in place of an empty drawing until it has readings.
|
|
2313
|
+
|
|
2314
|
+
Reflected, so a stylesheet can treat the chart while it waits. A chart
|
|
2315
|
+
that already has readings keeps drawing them, so a refresh does not
|
|
2316
|
+
blank it. */
|
|
2317
|
+
loading?: (HelixBarChart["loading"]) | undefined;
|
|
2318
|
+
/** The words shown in place of the drawing while `loading` is set and
|
|
2319
|
+
there are no readings yet, and the fallback of the `loading` slot. */
|
|
2320
|
+
"loading-text"?: (HelixBarChart["loadingText"]) | undefined;
|
|
2321
|
+
/** The words shown in place of the drawing while `loading` is set and
|
|
2322
|
+
there are no readings yet, and the fallback of the `loading` slot. */
|
|
2323
|
+
loadingText?: (HelixBarChart["loadingText"]) | undefined;
|
|
2189
2324
|
/** The id of the table to read.
|
|
2190
2325
|
|
|
2191
2326
|
Names a table in the same tree, so a chart inside another component's
|
|
@@ -2345,6 +2480,29 @@ bottom of bars under `orientation="horizontal"`.
|
|
|
2345
2480
|
Absent draws none with one scale, since bars compared with each other need
|
|
2346
2481
|
no numbers. With `secondary` both scales are drawn whatever this says. */
|
|
2347
2482
|
valueAxis?: (HelixBarChart["valueAxis"]) | undefined;
|
|
2483
|
+
/** The readings as data, in the shape of a table, where the page has no
|
|
2484
|
+
table to point `for` at. `for` wins where both are set.
|
|
2485
|
+
|
|
2486
|
+
```js
|
|
2487
|
+
chart.data = {
|
|
2488
|
+
caption: 'Sessions by channel',
|
|
2489
|
+
columns: ['Month', 'Direct', 'Referral'],
|
|
2490
|
+
rows: [['Jan', 10, 4], ['Feb', 20, 8]],
|
|
2491
|
+
}
|
|
2492
|
+
```
|
|
2493
|
+
|
|
2494
|
+
The first column holds each row's label and every column after it a
|
|
2495
|
+
series, as in a table. A cell is a number, words, `null` for a blank,
|
|
2496
|
+
or `{ value, text }` for a number shown as words, such as `$128k`. A
|
|
2497
|
+
number is shown in `locale`.
|
|
2498
|
+
|
|
2499
|
+
**A table is still the better source where the page can show one**:
|
|
2500
|
+
it reads with no script and before hydration, and a reader can sort and
|
|
2501
|
+
copy it. Data is drawn on the client only, so a server serves the
|
|
2502
|
+
frame, and the summary, the keys and the readout are then the whole of
|
|
2503
|
+
what a screen reader is given. Set a new object to redraw: the chart
|
|
2504
|
+
does not look inside the one it has. */
|
|
2505
|
+
data?: (HelixBarChart["data"]) | undefined;
|
|
2348
2506
|
|
|
2349
2507
|
/** The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it. */
|
|
2350
2508
|
"onhelix-reading-change"?: ((
|
|
@@ -2462,6 +2620,25 @@ every component in the library and mean something on one. `wash` because
|
|
|
2462
2620
|
that is what the tier below already calls it, in `--chart-bar-wash` and in
|
|
2463
2621
|
the `bar-wash-start` and `bar-wash-end` stops. */
|
|
2464
2622
|
"prop:wash"?: (HelixBarChart["wash"]) | undefined;
|
|
2623
|
+
/** The words shown in place of the drawing when the table has no readings,
|
|
2624
|
+
and the fallback of the `empty` slot. */
|
|
2625
|
+
"attr:empty-text"?: (HelixBarChart["emptyText"]) | undefined;
|
|
2626
|
+
/** The words shown in place of the drawing when the table has no readings,
|
|
2627
|
+
and the fallback of the `empty` slot. */
|
|
2628
|
+
"prop:emptyText"?: (HelixBarChart["emptyText"]) | undefined;
|
|
2629
|
+
/** Whether the readings are still on their way. The chart shows
|
|
2630
|
+
`loading-text` in place of an empty drawing until it has readings.
|
|
2631
|
+
|
|
2632
|
+
Reflected, so a stylesheet can treat the chart while it waits. A chart
|
|
2633
|
+
that already has readings keeps drawing them, so a refresh does not
|
|
2634
|
+
blank it. */
|
|
2635
|
+
"prop:loading"?: (HelixBarChart["loading"]) | undefined;
|
|
2636
|
+
/** The words shown in place of the drawing while `loading` is set and
|
|
2637
|
+
there are no readings yet, and the fallback of the `loading` slot. */
|
|
2638
|
+
"attr:loading-text"?: (HelixBarChart["loadingText"]) | undefined;
|
|
2639
|
+
/** The words shown in place of the drawing while `loading` is set and
|
|
2640
|
+
there are no readings yet, and the fallback of the `loading` slot. */
|
|
2641
|
+
"prop:loadingText"?: (HelixBarChart["loadingText"]) | undefined;
|
|
2465
2642
|
/** The id of the table to read.
|
|
2466
2643
|
|
|
2467
2644
|
Names a table in the same tree, so a chart inside another component's
|
|
@@ -2621,6 +2798,29 @@ bottom of bars under `orientation="horizontal"`.
|
|
|
2621
2798
|
Absent draws none with one scale, since bars compared with each other need
|
|
2622
2799
|
no numbers. With `secondary` both scales are drawn whatever this says. */
|
|
2623
2800
|
"prop:valueAxis"?: (HelixBarChart["valueAxis"]) | undefined;
|
|
2801
|
+
/** The readings as data, in the shape of a table, where the page has no
|
|
2802
|
+
table to point `for` at. `for` wins where both are set.
|
|
2803
|
+
|
|
2804
|
+
```js
|
|
2805
|
+
chart.data = {
|
|
2806
|
+
caption: 'Sessions by channel',
|
|
2807
|
+
columns: ['Month', 'Direct', 'Referral'],
|
|
2808
|
+
rows: [['Jan', 10, 4], ['Feb', 20, 8]],
|
|
2809
|
+
}
|
|
2810
|
+
```
|
|
2811
|
+
|
|
2812
|
+
The first column holds each row's label and every column after it a
|
|
2813
|
+
series, as in a table. A cell is a number, words, `null` for a blank,
|
|
2814
|
+
or `{ value, text }` for a number shown as words, such as `$128k`. A
|
|
2815
|
+
number is shown in `locale`.
|
|
2816
|
+
|
|
2817
|
+
**A table is still the better source where the page can show one**:
|
|
2818
|
+
it reads with no script and before hydration, and a reader can sort and
|
|
2819
|
+
copy it. Data is drawn on the client only, so a server serves the
|
|
2820
|
+
frame, and the summary, the keys and the readout are then the whole of
|
|
2821
|
+
what a screen reader is given. Set a new object to redraw: the chart
|
|
2822
|
+
does not look inside the one it has. */
|
|
2823
|
+
"prop:data"?: (HelixBarChart["data"]) | undefined;
|
|
2624
2824
|
/** The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it. */
|
|
2625
2825
|
"on:helix-reading-change"?: ((
|
|
2626
2826
|
e: HelixBarChartHelixReadingChangeElementEvent,
|
|
@@ -2637,6 +2837,42 @@ no numbers. With `secondary` both scales are drawn whatever this says. */
|
|
|
2637
2837
|
};
|
|
2638
2838
|
|
|
2639
2839
|
export type HelixBlockquoteProps = {
|
|
2840
|
+
/** How the passage and its attribution align, set as `text-align`.
|
|
2841
|
+
|
|
2842
|
+
`center` for a pull quote in the middle of a column and `end` for one
|
|
2843
|
+
against its far edge. Under either, the mark `marks` draws stands over
|
|
2844
|
+
the first line. Absent aligns as the prose around it does.
|
|
2845
|
+
|
|
2846
|
+
Named for the CSS property it sets, as `Text.textAlign` is: `align` alone
|
|
2847
|
+
is a legacy HTML attribute the browser maps to `text-align` by itself,
|
|
2848
|
+
and it has no `start` or `end`. */
|
|
2849
|
+
"text-align"?: (HelixBlockquote["textAlign"]) | undefined;
|
|
2850
|
+
/** How the passage and its attribution align, set as `text-align`.
|
|
2851
|
+
|
|
2852
|
+
`center` for a pull quote in the middle of a column and `end` for one
|
|
2853
|
+
against its far edge. Under either, the mark `marks` draws stands over
|
|
2854
|
+
the first line. Absent aligns as the prose around it does.
|
|
2855
|
+
|
|
2856
|
+
Named for the CSS property it sets, as `Text.textAlign` is: `align` alone
|
|
2857
|
+
is a legacy HTML attribute the browser maps to `text-align` by itself,
|
|
2858
|
+
and it has no `start` or `end`. */
|
|
2859
|
+
textAlign?: (HelixBlockquote["textAlign"]) | undefined;
|
|
2860
|
+
/** How the passage's lines break, set as `text-wrap`.
|
|
2861
|
+
|
|
2862
|
+
`balance` evens out the length of every line, which suits a pull quote of
|
|
2863
|
+
a few lines in display type. `pretty` avoids a last line of one short
|
|
2864
|
+
word, for a longer passage. Absent, the lines break as the browser breaks
|
|
2865
|
+
them. The same name and values `Text` takes, but `nowrap`, a passage being
|
|
2866
|
+
more than one line. */
|
|
2867
|
+
"text-wrap"?: (HelixBlockquote["textWrap"]) | undefined;
|
|
2868
|
+
/** How the passage's lines break, set as `text-wrap`.
|
|
2869
|
+
|
|
2870
|
+
`balance` evens out the length of every line, which suits a pull quote of
|
|
2871
|
+
a few lines in display type. `pretty` avoids a last line of one short
|
|
2872
|
+
word, for a longer passage. Absent, the lines break as the browser breaks
|
|
2873
|
+
them. The same name and values `Text` takes, but `nowrap`, a passage being
|
|
2874
|
+
more than one line. */
|
|
2875
|
+
textWrap?: (HelixBlockquote["textWrap"]) | undefined;
|
|
2640
2876
|
/** Who said it, and where, as words, such as "Maria Lopez, operations
|
|
2641
2877
|
manager". The `attribution` slot replaces them, for markup such as a link.
|
|
2642
2878
|
|
|
@@ -2653,6 +2889,42 @@ element's language. Leave the marks out of the text. */
|
|
|
2653
2889
|
};
|
|
2654
2890
|
|
|
2655
2891
|
export type HelixBlockquoteSolidJsProps = {
|
|
2892
|
+
/** How the passage and its attribution align, set as `text-align`.
|
|
2893
|
+
|
|
2894
|
+
`center` for a pull quote in the middle of a column and `end` for one
|
|
2895
|
+
against its far edge. Under either, the mark `marks` draws stands over
|
|
2896
|
+
the first line. Absent aligns as the prose around it does.
|
|
2897
|
+
|
|
2898
|
+
Named for the CSS property it sets, as `Text.textAlign` is: `align` alone
|
|
2899
|
+
is a legacy HTML attribute the browser maps to `text-align` by itself,
|
|
2900
|
+
and it has no `start` or `end`. */
|
|
2901
|
+
"attr:text-align"?: (HelixBlockquote["textAlign"]) | undefined;
|
|
2902
|
+
/** How the passage and its attribution align, set as `text-align`.
|
|
2903
|
+
|
|
2904
|
+
`center` for a pull quote in the middle of a column and `end` for one
|
|
2905
|
+
against its far edge. Under either, the mark `marks` draws stands over
|
|
2906
|
+
the first line. Absent aligns as the prose around it does.
|
|
2907
|
+
|
|
2908
|
+
Named for the CSS property it sets, as `Text.textAlign` is: `align` alone
|
|
2909
|
+
is a legacy HTML attribute the browser maps to `text-align` by itself,
|
|
2910
|
+
and it has no `start` or `end`. */
|
|
2911
|
+
"prop:textAlign"?: (HelixBlockquote["textAlign"]) | undefined;
|
|
2912
|
+
/** How the passage's lines break, set as `text-wrap`.
|
|
2913
|
+
|
|
2914
|
+
`balance` evens out the length of every line, which suits a pull quote of
|
|
2915
|
+
a few lines in display type. `pretty` avoids a last line of one short
|
|
2916
|
+
word, for a longer passage. Absent, the lines break as the browser breaks
|
|
2917
|
+
them. The same name and values `Text` takes, but `nowrap`, a passage being
|
|
2918
|
+
more than one line. */
|
|
2919
|
+
"attr:text-wrap"?: (HelixBlockquote["textWrap"]) | undefined;
|
|
2920
|
+
/** How the passage's lines break, set as `text-wrap`.
|
|
2921
|
+
|
|
2922
|
+
`balance` evens out the length of every line, which suits a pull quote of
|
|
2923
|
+
a few lines in display type. `pretty` avoids a last line of one short
|
|
2924
|
+
word, for a longer passage. Absent, the lines break as the browser breaks
|
|
2925
|
+
them. The same name and values `Text` takes, but `nowrap`, a passage being
|
|
2926
|
+
more than one line. */
|
|
2927
|
+
"prop:textWrap"?: (HelixBlockquote["textWrap"]) | undefined;
|
|
2656
2928
|
/** Who said it, and where, as words, such as "Maria Lopez, operations
|
|
2657
2929
|
manager". The `attribution` slot replaces them, for markup such as a link.
|
|
2658
2930
|
|
|
@@ -12442,8 +12714,14 @@ first, `handleCancel` prevents it, and `requestOpen` decides. So
|
|
|
12442
12714
|
`closedby="any"` gains light dismiss without giving up the refusal, which is
|
|
12443
12715
|
the property this component exists to keep.
|
|
12444
12716
|
|
|
12717
|
+
The press on the backdrop that this element handles itself follows it too:
|
|
12718
|
+
`closerequest` and `none` leave the dialog open on that press, as the
|
|
12719
|
+
platform does, and `none` also keeps it open on Escape in a browser without
|
|
12720
|
+
`closedby`.
|
|
12721
|
+
|
|
12445
12722
|
Absent by default, which is the platform's `auto` and this library's rule
|
|
12446
|
-
that a resting value is an attribute's absence.
|
|
12723
|
+
that a resting value is an attribute's absence. Absent, a press on the
|
|
12724
|
+
backdrop closes the dialog. */
|
|
12447
12725
|
closedby?: (HelixDialog["closedBy"]) | undefined;
|
|
12448
12726
|
/** Which close requests the browser handles on its own.
|
|
12449
12727
|
|
|
@@ -12453,8 +12731,14 @@ first, `handleCancel` prevents it, and `requestOpen` decides. So
|
|
|
12453
12731
|
`closedby="any"` gains light dismiss without giving up the refusal, which is
|
|
12454
12732
|
the property this component exists to keep.
|
|
12455
12733
|
|
|
12734
|
+
The press on the backdrop that this element handles itself follows it too:
|
|
12735
|
+
`closerequest` and `none` leave the dialog open on that press, as the
|
|
12736
|
+
platform does, and `none` also keeps it open on Escape in a browser without
|
|
12737
|
+
`closedby`.
|
|
12738
|
+
|
|
12456
12739
|
Absent by default, which is the platform's `auto` and this library's rule
|
|
12457
|
-
that a resting value is an attribute's absence.
|
|
12740
|
+
that a resting value is an attribute's absence. Absent, a press on the
|
|
12741
|
+
backdrop closes the dialog. */
|
|
12458
12742
|
closedBy?: (HelixDialog["closedBy"]) | undefined;
|
|
12459
12743
|
/** Draws a control that closes the dialog, in the corner where the title is.
|
|
12460
12744
|
|
|
@@ -12602,8 +12886,14 @@ first, `handleCancel` prevents it, and `requestOpen` decides. So
|
|
|
12602
12886
|
`closedby="any"` gains light dismiss without giving up the refusal, which is
|
|
12603
12887
|
the property this component exists to keep.
|
|
12604
12888
|
|
|
12889
|
+
The press on the backdrop that this element handles itself follows it too:
|
|
12890
|
+
`closerequest` and `none` leave the dialog open on that press, as the
|
|
12891
|
+
platform does, and `none` also keeps it open on Escape in a browser without
|
|
12892
|
+
`closedby`.
|
|
12893
|
+
|
|
12605
12894
|
Absent by default, which is the platform's `auto` and this library's rule
|
|
12606
|
-
that a resting value is an attribute's absence.
|
|
12895
|
+
that a resting value is an attribute's absence. Absent, a press on the
|
|
12896
|
+
backdrop closes the dialog. */
|
|
12607
12897
|
"attr:closedby"?: (HelixDialog["closedBy"]) | undefined;
|
|
12608
12898
|
/** Which close requests the browser handles on its own.
|
|
12609
12899
|
|
|
@@ -12613,8 +12903,14 @@ first, `handleCancel` prevents it, and `requestOpen` decides. So
|
|
|
12613
12903
|
`closedby="any"` gains light dismiss without giving up the refusal, which is
|
|
12614
12904
|
the property this component exists to keep.
|
|
12615
12905
|
|
|
12906
|
+
The press on the backdrop that this element handles itself follows it too:
|
|
12907
|
+
`closerequest` and `none` leave the dialog open on that press, as the
|
|
12908
|
+
platform does, and `none` also keeps it open on Escape in a browser without
|
|
12909
|
+
`closedby`.
|
|
12910
|
+
|
|
12616
12911
|
Absent by default, which is the platform's `auto` and this library's rule
|
|
12617
|
-
that a resting value is an attribute's absence.
|
|
12912
|
+
that a resting value is an attribute's absence. Absent, a press on the
|
|
12913
|
+
backdrop closes the dialog. */
|
|
12618
12914
|
"prop:closedBy"?: (HelixDialog["closedBy"]) | undefined;
|
|
12619
12915
|
/** Draws a control that closes the dialog, in the corner where the title is.
|
|
12620
12916
|
|
|
@@ -12879,6 +13175,29 @@ rotation that puts the first slice at nine o'clock, the aspect ratio of a
|
|
|
12879
13175
|
box that is no longer square, and where the middle sits once the bottom of
|
|
12880
13176
|
the circle is not drawn. */
|
|
12881
13177
|
sweep?: (HelixDonutChart["sweep"]) | undefined;
|
|
13178
|
+
/** The readings as data, in the shape of a table, where the page has no
|
|
13179
|
+
table to point `for` at. `for` wins where both are set.
|
|
13180
|
+
|
|
13181
|
+
```js
|
|
13182
|
+
chart.data = {
|
|
13183
|
+
caption: 'Sessions by channel',
|
|
13184
|
+
columns: ['Month', 'Direct', 'Referral'],
|
|
13185
|
+
rows: [['Jan', 10, 4], ['Feb', 20, 8]],
|
|
13186
|
+
}
|
|
13187
|
+
```
|
|
13188
|
+
|
|
13189
|
+
The first column holds each row's label and every column after it a
|
|
13190
|
+
series, as in a table. A cell is a number, words, `null` for a blank,
|
|
13191
|
+
or `{ value, text }` for a number shown as words, such as `$128k`. A
|
|
13192
|
+
number is shown in `locale`.
|
|
13193
|
+
|
|
13194
|
+
**A table is still the better source where the page can show one**:
|
|
13195
|
+
it reads with no script and before hydration, and a reader can sort and
|
|
13196
|
+
copy it. Data is drawn on the client only, so a server serves the
|
|
13197
|
+
frame, and the summary, the keys and the readout are then the whole of
|
|
13198
|
+
what a screen reader is given. Set a new object to redraw: the chart
|
|
13199
|
+
does not look inside the one it has. */
|
|
13200
|
+
data?: (HelixDonutChart["data"]) | undefined;
|
|
12882
13201
|
};
|
|
12883
13202
|
|
|
12884
13203
|
export type HelixDonutChartSolidJsProps = {
|
|
@@ -13023,6 +13342,29 @@ rotation that puts the first slice at nine o'clock, the aspect ratio of a
|
|
|
13023
13342
|
box that is no longer square, and where the middle sits once the bottom of
|
|
13024
13343
|
the circle is not drawn. */
|
|
13025
13344
|
"prop:sweep"?: (HelixDonutChart["sweep"]) | undefined;
|
|
13345
|
+
/** The readings as data, in the shape of a table, where the page has no
|
|
13346
|
+
table to point `for` at. `for` wins where both are set.
|
|
13347
|
+
|
|
13348
|
+
```js
|
|
13349
|
+
chart.data = {
|
|
13350
|
+
caption: 'Sessions by channel',
|
|
13351
|
+
columns: ['Month', 'Direct', 'Referral'],
|
|
13352
|
+
rows: [['Jan', 10, 4], ['Feb', 20, 8]],
|
|
13353
|
+
}
|
|
13354
|
+
```
|
|
13355
|
+
|
|
13356
|
+
The first column holds each row's label and every column after it a
|
|
13357
|
+
series, as in a table. A cell is a number, words, `null` for a blank,
|
|
13358
|
+
or `{ value, text }` for a number shown as words, such as `$128k`. A
|
|
13359
|
+
number is shown in `locale`.
|
|
13360
|
+
|
|
13361
|
+
**A table is still the better source where the page can show one**:
|
|
13362
|
+
it reads with no script and before hydration, and a reader can sort and
|
|
13363
|
+
copy it. Data is drawn on the client only, so a server serves the
|
|
13364
|
+
frame, and the summary, the keys and the readout are then the whole of
|
|
13365
|
+
what a screen reader is given. Set a new object to redraw: the chart
|
|
13366
|
+
does not look inside the one it has. */
|
|
13367
|
+
"prop:data"?: (HelixDonutChart["data"]) | undefined;
|
|
13026
13368
|
|
|
13027
13369
|
/** Set the innerHTML of the element */
|
|
13028
13370
|
innerHTML?: (string) | undefined;
|
|
@@ -13130,6 +13472,12 @@ lost its focus trap because a consumer forgot a word would be worse than an
|
|
|
13130
13472
|
attribute on the host, and nothing selects on it: the scrim is rendered or
|
|
13131
13473
|
not, rather than shown or hidden by CSS. */
|
|
13132
13474
|
modal?: (HelixDrawer["modal"]) | undefined;
|
|
13475
|
+
/** Stops Escape, a press outside, and a swipe from closing the drawer, for a
|
|
13476
|
+
drawer that has to be answered.
|
|
13477
|
+
|
|
13478
|
+
The close control and `close()` still close it, as on `Dialog`: a panel
|
|
13479
|
+
with no way out at all is a trap. */
|
|
13480
|
+
persistent?: (HelixDrawer["persistent"]) | undefined;
|
|
13133
13481
|
/** Which edge the drawer comes from.
|
|
13134
13482
|
|
|
13135
13483
|
Unset is `end`, and it stays unset rather than being written down: a
|
|
@@ -13269,6 +13617,12 @@ lost its focus trap because a consumer forgot a word would be worse than an
|
|
|
13269
13617
|
attribute on the host, and nothing selects on it: the scrim is rendered or
|
|
13270
13618
|
not, rather than shown or hidden by CSS. */
|
|
13271
13619
|
"prop:modal"?: (HelixDrawer["modal"]) | undefined;
|
|
13620
|
+
/** Stops Escape, a press outside, and a swipe from closing the drawer, for a
|
|
13621
|
+
drawer that has to be answered.
|
|
13622
|
+
|
|
13623
|
+
The close control and `close()` still close it, as on `Dialog`: a panel
|
|
13624
|
+
with no way out at all is a trap. */
|
|
13625
|
+
"prop:persistent"?: (HelixDrawer["persistent"]) | undefined;
|
|
13272
13626
|
/** Which edge the drawer comes from.
|
|
13273
13627
|
|
|
13274
13628
|
Unset is `end`, and it stays unset rather than being written down: a
|
|
@@ -16006,6 +16360,29 @@ no order in it. */
|
|
|
16006
16360
|
Set it to start with cells selected. Written by a press or a key under
|
|
16007
16361
|
`selection-mode`. */
|
|
16008
16362
|
value?: (HelixHeatmap["value"]) | undefined;
|
|
16363
|
+
/** The readings as data, in the shape of a table, where the page has no
|
|
16364
|
+
table to point `for` at. `for` wins where both are set.
|
|
16365
|
+
|
|
16366
|
+
```js
|
|
16367
|
+
chart.data = {
|
|
16368
|
+
caption: 'Sessions by channel',
|
|
16369
|
+
columns: ['Month', 'Direct', 'Referral'],
|
|
16370
|
+
rows: [['Jan', 10, 4], ['Feb', 20, 8]],
|
|
16371
|
+
}
|
|
16372
|
+
```
|
|
16373
|
+
|
|
16374
|
+
The first column holds each row's label and every column after it a
|
|
16375
|
+
series, as in a table. A cell is a number, words, `null` for a blank,
|
|
16376
|
+
or `{ value, text }` for a number shown as words, such as `$128k`. A
|
|
16377
|
+
number is shown in `locale`.
|
|
16378
|
+
|
|
16379
|
+
**A table is still the better source where the page can show one**:
|
|
16380
|
+
it reads with no script and before hydration, and a reader can sort and
|
|
16381
|
+
copy it. Data is drawn on the client only, so a server serves the
|
|
16382
|
+
frame, and the summary, the keys and the readout are then the whole of
|
|
16383
|
+
what a screen reader is given. Set a new object to redraw: the chart
|
|
16384
|
+
does not look inside the one it has. */
|
|
16385
|
+
data?: (HelixHeatmap["data"]) | undefined;
|
|
16009
16386
|
|
|
16010
16387
|
/** Fired once a press or a key has changed which cells are selected. */
|
|
16011
16388
|
onchange?: ((e: HelixHeatmapElementEvent) => void) | undefined;
|
|
@@ -16189,6 +16566,29 @@ no order in it. */
|
|
|
16189
16566
|
Set it to start with cells selected. Written by a press or a key under
|
|
16190
16567
|
`selection-mode`. */
|
|
16191
16568
|
"prop:value"?: (HelixHeatmap["value"]) | undefined;
|
|
16569
|
+
/** The readings as data, in the shape of a table, where the page has no
|
|
16570
|
+
table to point `for` at. `for` wins where both are set.
|
|
16571
|
+
|
|
16572
|
+
```js
|
|
16573
|
+
chart.data = {
|
|
16574
|
+
caption: 'Sessions by channel',
|
|
16575
|
+
columns: ['Month', 'Direct', 'Referral'],
|
|
16576
|
+
rows: [['Jan', 10, 4], ['Feb', 20, 8]],
|
|
16577
|
+
}
|
|
16578
|
+
```
|
|
16579
|
+
|
|
16580
|
+
The first column holds each row's label and every column after it a
|
|
16581
|
+
series, as in a table. A cell is a number, words, `null` for a blank,
|
|
16582
|
+
or `{ value, text }` for a number shown as words, such as `$128k`. A
|
|
16583
|
+
number is shown in `locale`.
|
|
16584
|
+
|
|
16585
|
+
**A table is still the better source where the page can show one**:
|
|
16586
|
+
it reads with no script and before hydration, and a reader can sort and
|
|
16587
|
+
copy it. Data is drawn on the client only, so a server serves the
|
|
16588
|
+
frame, and the summary, the keys and the readout are then the whole of
|
|
16589
|
+
what a screen reader is given. Set a new object to redraw: the chart
|
|
16590
|
+
does not look inside the one it has. */
|
|
16591
|
+
"prop:data"?: (HelixHeatmap["data"]) | undefined;
|
|
16192
16592
|
/** Fired once a press or a key has changed which cells are selected. */
|
|
16193
16593
|
"on:change"?: ((e: HelixHeatmapElementEvent) => void) | undefined;
|
|
16194
16594
|
/** Fired before a press or a key changes which cells are selected, with the `value` it would leave. Cancelable. */
|
|
@@ -18284,6 +18684,25 @@ chart and a card mean the same thing by the word.
|
|
|
18284
18684
|
material choice, it is an absent series, and a chart says that by not
|
|
18285
18685
|
having the datum rather than by painting it invisibly. */
|
|
18286
18686
|
material?: (HelixLineChart["material"]) | undefined;
|
|
18687
|
+
/** The words shown in place of the drawing when the table has no readings,
|
|
18688
|
+
and the fallback of the `empty` slot. */
|
|
18689
|
+
"empty-text"?: (HelixLineChart["emptyText"]) | undefined;
|
|
18690
|
+
/** The words shown in place of the drawing when the table has no readings,
|
|
18691
|
+
and the fallback of the `empty` slot. */
|
|
18692
|
+
emptyText?: (HelixLineChart["emptyText"]) | undefined;
|
|
18693
|
+
/** Whether the readings are still on their way. The chart shows
|
|
18694
|
+
`loading-text` in place of an empty drawing until it has readings.
|
|
18695
|
+
|
|
18696
|
+
Reflected, so a stylesheet can treat the chart while it waits. A chart
|
|
18697
|
+
that already has readings keeps drawing them, so a refresh does not
|
|
18698
|
+
blank it. */
|
|
18699
|
+
loading?: (HelixLineChart["loading"]) | undefined;
|
|
18700
|
+
/** The words shown in place of the drawing while `loading` is set and
|
|
18701
|
+
there are no readings yet, and the fallback of the `loading` slot. */
|
|
18702
|
+
"loading-text"?: (HelixLineChart["loadingText"]) | undefined;
|
|
18703
|
+
/** The words shown in place of the drawing while `loading` is set and
|
|
18704
|
+
there are no readings yet, and the fallback of the `loading` slot. */
|
|
18705
|
+
loadingText?: (HelixLineChart["loadingText"]) | undefined;
|
|
18287
18706
|
/** The id of the table to read.
|
|
18288
18707
|
|
|
18289
18708
|
Names a table in the same tree, so a chart inside another component's
|
|
@@ -18441,6 +18860,29 @@ Set it where the distance from nothing is the point rather than the shape,
|
|
|
18441
18860
|
and accept that a series which never approaches zero becomes a flat rule
|
|
18442
18861
|
near the top of the box. */
|
|
18443
18862
|
zero?: (HelixLineChart["zero"]) | undefined;
|
|
18863
|
+
/** The readings as data, in the shape of a table, where the page has no
|
|
18864
|
+
table to point `for` at. `for` wins where both are set.
|
|
18865
|
+
|
|
18866
|
+
```js
|
|
18867
|
+
chart.data = {
|
|
18868
|
+
caption: 'Sessions by channel',
|
|
18869
|
+
columns: ['Month', 'Direct', 'Referral'],
|
|
18870
|
+
rows: [['Jan', 10, 4], ['Feb', 20, 8]],
|
|
18871
|
+
}
|
|
18872
|
+
```
|
|
18873
|
+
|
|
18874
|
+
The first column holds each row's label and every column after it a
|
|
18875
|
+
series, as in a table. A cell is a number, words, `null` for a blank,
|
|
18876
|
+
or `{ value, text }` for a number shown as words, such as `$128k`. A
|
|
18877
|
+
number is shown in `locale`.
|
|
18878
|
+
|
|
18879
|
+
**A table is still the better source where the page can show one**:
|
|
18880
|
+
it reads with no script and before hydration, and a reader can sort and
|
|
18881
|
+
copy it. Data is drawn on the client only, so a server serves the
|
|
18882
|
+
frame, and the summary, the keys and the readout are then the whole of
|
|
18883
|
+
what a screen reader is given. Set a new object to redraw: the chart
|
|
18884
|
+
does not look inside the one it has. */
|
|
18885
|
+
data?: (HelixLineChart["data"]) | undefined;
|
|
18444
18886
|
|
|
18445
18887
|
/** The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it. */
|
|
18446
18888
|
"onhelix-reading-change"?: ((
|
|
@@ -18493,6 +18935,25 @@ chart and a card mean the same thing by the word.
|
|
|
18493
18935
|
material choice, it is an absent series, and a chart says that by not
|
|
18494
18936
|
having the datum rather than by painting it invisibly. */
|
|
18495
18937
|
"prop:material"?: (HelixLineChart["material"]) | undefined;
|
|
18938
|
+
/** The words shown in place of the drawing when the table has no readings,
|
|
18939
|
+
and the fallback of the `empty` slot. */
|
|
18940
|
+
"attr:empty-text"?: (HelixLineChart["emptyText"]) | undefined;
|
|
18941
|
+
/** The words shown in place of the drawing when the table has no readings,
|
|
18942
|
+
and the fallback of the `empty` slot. */
|
|
18943
|
+
"prop:emptyText"?: (HelixLineChart["emptyText"]) | undefined;
|
|
18944
|
+
/** Whether the readings are still on their way. The chart shows
|
|
18945
|
+
`loading-text` in place of an empty drawing until it has readings.
|
|
18946
|
+
|
|
18947
|
+
Reflected, so a stylesheet can treat the chart while it waits. A chart
|
|
18948
|
+
that already has readings keeps drawing them, so a refresh does not
|
|
18949
|
+
blank it. */
|
|
18950
|
+
"prop:loading"?: (HelixLineChart["loading"]) | undefined;
|
|
18951
|
+
/** The words shown in place of the drawing while `loading` is set and
|
|
18952
|
+
there are no readings yet, and the fallback of the `loading` slot. */
|
|
18953
|
+
"attr:loading-text"?: (HelixLineChart["loadingText"]) | undefined;
|
|
18954
|
+
/** The words shown in place of the drawing while `loading` is set and
|
|
18955
|
+
there are no readings yet, and the fallback of the `loading` slot. */
|
|
18956
|
+
"prop:loadingText"?: (HelixLineChart["loadingText"]) | undefined;
|
|
18496
18957
|
/** The id of the table to read.
|
|
18497
18958
|
|
|
18498
18959
|
Names a table in the same tree, so a chart inside another component's
|
|
@@ -18650,6 +19111,29 @@ Set it where the distance from nothing is the point rather than the shape,
|
|
|
18650
19111
|
and accept that a series which never approaches zero becomes a flat rule
|
|
18651
19112
|
near the top of the box. */
|
|
18652
19113
|
"prop:zero"?: (HelixLineChart["zero"]) | undefined;
|
|
19114
|
+
/** The readings as data, in the shape of a table, where the page has no
|
|
19115
|
+
table to point `for` at. `for` wins where both are set.
|
|
19116
|
+
|
|
19117
|
+
```js
|
|
19118
|
+
chart.data = {
|
|
19119
|
+
caption: 'Sessions by channel',
|
|
19120
|
+
columns: ['Month', 'Direct', 'Referral'],
|
|
19121
|
+
rows: [['Jan', 10, 4], ['Feb', 20, 8]],
|
|
19122
|
+
}
|
|
19123
|
+
```
|
|
19124
|
+
|
|
19125
|
+
The first column holds each row's label and every column after it a
|
|
19126
|
+
series, as in a table. A cell is a number, words, `null` for a blank,
|
|
19127
|
+
or `{ value, text }` for a number shown as words, such as `$128k`. A
|
|
19128
|
+
number is shown in `locale`.
|
|
19129
|
+
|
|
19130
|
+
**A table is still the better source where the page can show one**:
|
|
19131
|
+
it reads with no script and before hydration, and a reader can sort and
|
|
19132
|
+
copy it. Data is drawn on the client only, so a server serves the
|
|
19133
|
+
frame, and the summary, the keys and the readout are then the whole of
|
|
19134
|
+
what a screen reader is given. Set a new object to redraw: the chart
|
|
19135
|
+
does not look inside the one it has. */
|
|
19136
|
+
"prop:data"?: (HelixLineChart["data"]) | undefined;
|
|
18653
19137
|
/** The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it. */
|
|
18654
19138
|
"on:helix-reading-change"?: ((
|
|
18655
19139
|
e: HelixLineChartHelixReadingChangeElementEvent,
|
|
@@ -23843,7 +24327,13 @@ the state's word.
|
|
|
23843
24327
|
|
|
23844
24328
|
Off by default, because the name and the busy state already change with
|
|
23845
24329
|
the state, and an orb beside a stream of messages would otherwise talk
|
|
23846
|
-
over them. Set it on an orb that is the only sign of progress on the page.
|
|
24330
|
+
over them. Set it on an orb that is the only sign of progress on the page.
|
|
24331
|
+
|
|
24332
|
+
**Without it, finishing is silent.** `done` turns the orb into an image
|
|
24333
|
+
named "Done" that is no longer busy, which a screen reader reports when it
|
|
24334
|
+
next reaches the orb and does not say as it happens. A page whose own
|
|
24335
|
+
result arrives in a live region, such as a chat reply, already says the
|
|
24336
|
+
work is done; one that shows nothing else sets `announce`. */
|
|
23847
24337
|
announce?: (HelixOrb["announce"]) | undefined;
|
|
23848
24338
|
/** The name read by screen readers. Defaults to the name of the state, such
|
|
23849
24339
|
as "Thinking".
|
|
@@ -23903,7 +24393,13 @@ the state's word.
|
|
|
23903
24393
|
|
|
23904
24394
|
Off by default, because the name and the busy state already change with
|
|
23905
24395
|
the state, and an orb beside a stream of messages would otherwise talk
|
|
23906
|
-
over them. Set it on an orb that is the only sign of progress on the page.
|
|
24396
|
+
over them. Set it on an orb that is the only sign of progress on the page.
|
|
24397
|
+
|
|
24398
|
+
**Without it, finishing is silent.** `done` turns the orb into an image
|
|
24399
|
+
named "Done" that is no longer busy, which a screen reader reports when it
|
|
24400
|
+
next reaches the orb and does not say as it happens. A page whose own
|
|
24401
|
+
result arrives in a live region, such as a chat reply, already says the
|
|
24402
|
+
work is done; one that shows nothing else sets `announce`. */
|
|
23907
24403
|
"prop:announce"?: (HelixOrb["announce"]) | undefined;
|
|
23908
24404
|
/** The name read by screen readers. Defaults to the name of the state, such
|
|
23909
24405
|
as "Thinking".
|
|
@@ -25077,7 +25573,8 @@ decimals. Written as JSON in the attribute.
|
|
|
25077
25573
|
|
|
25078
25574
|
A `percent` style writes the share of the range, and any other the value
|
|
25079
25575
|
itself, so the example says "18 GB". Absent is a whole percentage. The
|
|
25080
|
-
words are announced
|
|
25576
|
+
words are announced whether or not `show-value` shows them. `value-text`
|
|
25577
|
+
still wins. */
|
|
25081
25578
|
"format-options"?: (HelixProgress["formatOptions"]) | undefined;
|
|
25082
25579
|
/** `Intl.NumberFormat` options the reading is written with, as React Aria's
|
|
25083
25580
|
Meter and ProgressBar take them: a unit, a currency, or a number of
|
|
@@ -25089,7 +25586,8 @@ decimals. Written as JSON in the attribute.
|
|
|
25089
25586
|
|
|
25090
25587
|
A `percent` style writes the share of the range, and any other the value
|
|
25091
25588
|
itself, so the example says "18 GB". Absent is a whole percentage. The
|
|
25092
|
-
words are announced
|
|
25589
|
+
words are announced whether or not `show-value` shows them. `value-text`
|
|
25590
|
+
still wins. */
|
|
25093
25591
|
formatOptions?: (HelixProgress["formatOptions"]) | undefined;
|
|
25094
25592
|
/** Whether the length of the task is unknown. The bar then shows activity
|
|
25095
25593
|
without a value.
|
|
@@ -25221,7 +25719,8 @@ decimals. Written as JSON in the attribute.
|
|
|
25221
25719
|
|
|
25222
25720
|
A `percent` style writes the share of the range, and any other the value
|
|
25223
25721
|
itself, so the example says "18 GB". Absent is a whole percentage. The
|
|
25224
|
-
words are announced
|
|
25722
|
+
words are announced whether or not `show-value` shows them. `value-text`
|
|
25723
|
+
still wins. */
|
|
25225
25724
|
"attr:format-options"?: (HelixProgress["formatOptions"]) | undefined;
|
|
25226
25725
|
/** `Intl.NumberFormat` options the reading is written with, as React Aria's
|
|
25227
25726
|
Meter and ProgressBar take them: a unit, a currency, or a number of
|
|
@@ -25233,7 +25732,8 @@ decimals. Written as JSON in the attribute.
|
|
|
25233
25732
|
|
|
25234
25733
|
A `percent` style writes the share of the range, and any other the value
|
|
25235
25734
|
itself, so the example says "18 GB". Absent is a whole percentage. The
|
|
25236
|
-
words are announced
|
|
25735
|
+
words are announced whether or not `show-value` shows them. `value-text`
|
|
25736
|
+
still wins. */
|
|
25237
25737
|
"prop:formatOptions"?: (HelixProgress["formatOptions"]) | undefined;
|
|
25238
25738
|
/** Whether the length of the task is unknown. The bar then shows activity
|
|
25239
25739
|
without a value.
|
|
@@ -27209,6 +27709,25 @@ export type HelixScatterChartHelixReadingPressElementEvent =
|
|
|
27209
27709
|
HelixScatterChartElementEvent<HelixReadingPressEvent>;
|
|
27210
27710
|
|
|
27211
27711
|
export type HelixScatterChartProps = {
|
|
27712
|
+
/** The words shown in place of the drawing when the table has no readings,
|
|
27713
|
+
and the fallback of the `empty` slot. */
|
|
27714
|
+
"empty-text"?: (HelixScatterChart["emptyText"]) | undefined;
|
|
27715
|
+
/** The words shown in place of the drawing when the table has no readings,
|
|
27716
|
+
and the fallback of the `empty` slot. */
|
|
27717
|
+
emptyText?: (HelixScatterChart["emptyText"]) | undefined;
|
|
27718
|
+
/** Whether the readings are still on their way. The chart shows
|
|
27719
|
+
`loading-text` in place of an empty drawing until it has readings.
|
|
27720
|
+
|
|
27721
|
+
Reflected, so a stylesheet can treat the chart while it waits. A chart
|
|
27722
|
+
that already has readings keeps drawing them, so a refresh does not
|
|
27723
|
+
blank it. */
|
|
27724
|
+
loading?: (HelixScatterChart["loading"]) | undefined;
|
|
27725
|
+
/** The words shown in place of the drawing while `loading` is set and
|
|
27726
|
+
there are no readings yet, and the fallback of the `loading` slot. */
|
|
27727
|
+
"loading-text"?: (HelixScatterChart["loadingText"]) | undefined;
|
|
27728
|
+
/** The words shown in place of the drawing while `loading` is set and
|
|
27729
|
+
there are no readings yet, and the fallback of the `loading` slot. */
|
|
27730
|
+
loadingText?: (HelixScatterChart["loadingText"]) | undefined;
|
|
27212
27731
|
/** The id of the table to read.
|
|
27213
27732
|
|
|
27214
27733
|
Names a table in the same tree, so a chart inside another component's
|
|
@@ -27304,6 +27823,29 @@ Absent draws none. A series with fewer than two points, or with every
|
|
|
27304
27823
|
point at one measure across, has no line to draw. The summary already
|
|
27305
27824
|
gives each series' correlation, which says how near the points are to it. */
|
|
27306
27825
|
trend?: (HelixScatterChart["trend"]) | undefined;
|
|
27826
|
+
/** The readings as data, in the shape of a table, where the page has no
|
|
27827
|
+
table to point `for` at. `for` wins where both are set.
|
|
27828
|
+
|
|
27829
|
+
```js
|
|
27830
|
+
chart.data = {
|
|
27831
|
+
caption: 'Sessions by channel',
|
|
27832
|
+
columns: ['Month', 'Direct', 'Referral'],
|
|
27833
|
+
rows: [['Jan', 10, 4], ['Feb', 20, 8]],
|
|
27834
|
+
}
|
|
27835
|
+
```
|
|
27836
|
+
|
|
27837
|
+
The first column holds each row's label and every column after it a
|
|
27838
|
+
series, as in a table. A cell is a number, words, `null` for a blank,
|
|
27839
|
+
or `{ value, text }` for a number shown as words, such as `$128k`. A
|
|
27840
|
+
number is shown in `locale`.
|
|
27841
|
+
|
|
27842
|
+
**A table is still the better source where the page can show one**:
|
|
27843
|
+
it reads with no script and before hydration, and a reader can sort and
|
|
27844
|
+
copy it. Data is drawn on the client only, so a server serves the
|
|
27845
|
+
frame, and the summary, the keys and the readout are then the whole of
|
|
27846
|
+
what a screen reader is given. Set a new object to redraw: the chart
|
|
27847
|
+
does not look inside the one it has. */
|
|
27848
|
+
data?: (HelixScatterChart["data"]) | undefined;
|
|
27307
27849
|
|
|
27308
27850
|
/** The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it. */
|
|
27309
27851
|
"onhelix-reading-change"?: ((
|
|
@@ -27316,6 +27858,25 @@ gives each series' correlation, which says how near the points are to it. */
|
|
|
27316
27858
|
};
|
|
27317
27859
|
|
|
27318
27860
|
export type HelixScatterChartSolidJsProps = {
|
|
27861
|
+
/** The words shown in place of the drawing when the table has no readings,
|
|
27862
|
+
and the fallback of the `empty` slot. */
|
|
27863
|
+
"attr:empty-text"?: (HelixScatterChart["emptyText"]) | undefined;
|
|
27864
|
+
/** The words shown in place of the drawing when the table has no readings,
|
|
27865
|
+
and the fallback of the `empty` slot. */
|
|
27866
|
+
"prop:emptyText"?: (HelixScatterChart["emptyText"]) | undefined;
|
|
27867
|
+
/** Whether the readings are still on their way. The chart shows
|
|
27868
|
+
`loading-text` in place of an empty drawing until it has readings.
|
|
27869
|
+
|
|
27870
|
+
Reflected, so a stylesheet can treat the chart while it waits. A chart
|
|
27871
|
+
that already has readings keeps drawing them, so a refresh does not
|
|
27872
|
+
blank it. */
|
|
27873
|
+
"prop:loading"?: (HelixScatterChart["loading"]) | undefined;
|
|
27874
|
+
/** The words shown in place of the drawing while `loading` is set and
|
|
27875
|
+
there are no readings yet, and the fallback of the `loading` slot. */
|
|
27876
|
+
"attr:loading-text"?: (HelixScatterChart["loadingText"]) | undefined;
|
|
27877
|
+
/** The words shown in place of the drawing while `loading` is set and
|
|
27878
|
+
there are no readings yet, and the fallback of the `loading` slot. */
|
|
27879
|
+
"prop:loadingText"?: (HelixScatterChart["loadingText"]) | undefined;
|
|
27319
27880
|
/** The id of the table to read.
|
|
27320
27881
|
|
|
27321
27882
|
Names a table in the same tree, so a chart inside another component's
|
|
@@ -27411,6 +27972,29 @@ Absent draws none. A series with fewer than two points, or with every
|
|
|
27411
27972
|
point at one measure across, has no line to draw. The summary already
|
|
27412
27973
|
gives each series' correlation, which says how near the points are to it. */
|
|
27413
27974
|
"prop:trend"?: (HelixScatterChart["trend"]) | undefined;
|
|
27975
|
+
/** The readings as data, in the shape of a table, where the page has no
|
|
27976
|
+
table to point `for` at. `for` wins where both are set.
|
|
27977
|
+
|
|
27978
|
+
```js
|
|
27979
|
+
chart.data = {
|
|
27980
|
+
caption: 'Sessions by channel',
|
|
27981
|
+
columns: ['Month', 'Direct', 'Referral'],
|
|
27982
|
+
rows: [['Jan', 10, 4], ['Feb', 20, 8]],
|
|
27983
|
+
}
|
|
27984
|
+
```
|
|
27985
|
+
|
|
27986
|
+
The first column holds each row's label and every column after it a
|
|
27987
|
+
series, as in a table. A cell is a number, words, `null` for a blank,
|
|
27988
|
+
or `{ value, text }` for a number shown as words, such as `$128k`. A
|
|
27989
|
+
number is shown in `locale`.
|
|
27990
|
+
|
|
27991
|
+
**A table is still the better source where the page can show one**:
|
|
27992
|
+
it reads with no script and before hydration, and a reader can sort and
|
|
27993
|
+
copy it. Data is drawn on the client only, so a server serves the
|
|
27994
|
+
frame, and the summary, the keys and the readout are then the whole of
|
|
27995
|
+
what a screen reader is given. Set a new object to redraw: the chart
|
|
27996
|
+
does not look inside the one it has. */
|
|
27997
|
+
"prop:data"?: (HelixScatterChart["data"]) | undefined;
|
|
27414
27998
|
/** The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it. */
|
|
27415
27999
|
"on:helix-reading-change"?: ((
|
|
27416
28000
|
e: HelixScatterChartHelixReadingChangeElementEvent,
|
|
@@ -29246,6 +29830,9 @@ Reading gives where it is; writing declares it the consumer's, and
|
|
|
29246
29830
|
`default-position` seeds one this element owns. The same accessor pair
|
|
29247
29831
|
`Pagination.page` and the calendar's `month` carry. */
|
|
29248
29832
|
position?: (HelixSplitter["position"]) | undefined;
|
|
29833
|
+
/** The pane that keeps its size when the splitter's own size changes. The
|
|
29834
|
+
other pane takes all of the change. Unset, both keep their share. */
|
|
29835
|
+
primary?: (HelixSplitter["primary"]) | undefined;
|
|
29249
29836
|
/** Where a dragged divider snaps, comma separated, as Web Awesome's split
|
|
29250
29837
|
panel does: a bare number is a percentage and a length such as `240px` is
|
|
29251
29838
|
measured along the splitter, so `snap="25, 50, 75"` or `snap="240px, 50"`.
|
|
@@ -29399,6 +29986,9 @@ Reading gives where it is; writing declares it the consumer's, and
|
|
|
29399
29986
|
`default-position` seeds one this element owns. The same accessor pair
|
|
29400
29987
|
`Pagination.page` and the calendar's `month` carry. */
|
|
29401
29988
|
"prop:position"?: (HelixSplitter["position"]) | undefined;
|
|
29989
|
+
/** The pane that keeps its size when the splitter's own size changes. The
|
|
29990
|
+
other pane takes all of the change. Unset, both keep their share. */
|
|
29991
|
+
"prop:primary"?: (HelixSplitter["primary"]) | undefined;
|
|
29402
29992
|
/** Where a dragged divider snaps, comma separated, as Web Awesome's split
|
|
29403
29993
|
panel does: a bare number is a percentage and a length such as `240px` is
|
|
29404
29994
|
measured along the splitter, so `snap="25, 50, 75"` or `snap="240px, 50"`.
|
|
@@ -37387,6 +37977,11 @@ export type CustomElements = {
|
|
|
37387
37977
|
* **Named for the region and not for what is usually in it.** The middle slot
|
|
37388
37978
|
* takes a search field or a breadcrumb trail as readily as a `Navigation`, so
|
|
37389
37979
|
* the property carries the part's name, `content`.
|
|
37980
|
+
* - `fold-below`/`foldBelow`: The width of the bar, in pixels, below which the middle region folds behind
|
|
37981
|
+
* a toggle. Unset, it never folds.
|
|
37982
|
+
* - `hide-on-scroll`/`hideOnScroll`: Hides the bar as the page scrolls down past it, and shows it again as the
|
|
37983
|
+
* page scrolls up.
|
|
37984
|
+
* - `menu-label`/`menuLabel`: The name of the toggle that opens a folded middle region.
|
|
37390
37985
|
* - `scroller`: The id of the element whose scrolling lifts the bar, for an app shell that
|
|
37391
37986
|
* scrolls a container instead of the window. Unset is the window.
|
|
37392
37987
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
@@ -37423,6 +38018,7 @@ export type CustomElements = {
|
|
|
37423
38018
|
* - `(default)`: The middle region, usually a `Navigation`.
|
|
37424
38019
|
* - `end`: Trailing content, usually a call to action.
|
|
37425
38020
|
* - `start`: Leading content, usually a wordmark.
|
|
38021
|
+
* - `menu-icon`: Replaces the glyph inside the toggle that opens a folded middle region.
|
|
37426
38022
|
*
|
|
37427
38023
|
* ## CSS Custom Properties
|
|
37428
38024
|
*
|
|
@@ -37443,11 +38039,16 @@ export type CustomElements = {
|
|
|
37443
38039
|
* - `end`: The trailing region.
|
|
37444
38040
|
* - `row`: The centered row inside the banner.
|
|
37445
38041
|
* - `start`: The leading region.
|
|
38042
|
+
* - `toggle`: The control that opens and closes the folded middle region, drawn while the bar is narrower than `fold-below`.
|
|
38043
|
+
* - `toggle-mark`: The glyph on the toggle, where none is slotted.
|
|
37446
38044
|
*
|
|
37447
38045
|
* ## CSS States
|
|
37448
38046
|
*
|
|
37449
38047
|
* These can be used to apply styling when a component is in a given state.
|
|
37450
38048
|
*
|
|
38049
|
+
* - `folded`: While the bar is narrower than `fold-below`, and the middle region is behind the toggle.
|
|
38050
|
+
* - `hidden`: While `hide-on-scroll` has the bar out of the way, after a scroll down.
|
|
38051
|
+
* - `open`: While the folded middle region is open.
|
|
37451
38052
|
* - `scrolled`: While the page is scrolled down from the top, which is when the bar lifts off it.
|
|
37452
38053
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
37453
38054
|
*/
|
|
@@ -37480,6 +38081,16 @@ export type CustomElements = {
|
|
|
37480
38081
|
*
|
|
37481
38082
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
37482
38083
|
*
|
|
38084
|
+
* - `empty-text`/`emptyText`: The words shown in place of the drawing when the table has no readings,
|
|
38085
|
+
* and the fallback of the `empty` slot.
|
|
38086
|
+
* - `loading`: Whether the readings are still on their way. The chart shows
|
|
38087
|
+
* `loading-text` in place of an empty drawing until it has readings.
|
|
38088
|
+
*
|
|
38089
|
+
* Reflected, so a stylesheet can treat the chart while it waits. A chart
|
|
38090
|
+
* that already has readings keeps drawing them, so a refresh does not
|
|
38091
|
+
* blank it.
|
|
38092
|
+
* - `loading-text`/`loadingText`: The words shown in place of the drawing while `loading` is set and
|
|
38093
|
+
* there are no readings yet, and the fallback of the `loading` slot.
|
|
37483
38094
|
* - `for`: The id of the table to read.
|
|
37484
38095
|
*
|
|
37485
38096
|
* Names a table in the same tree, so a chart inside another component's
|
|
@@ -37552,6 +38163,28 @@ export type CustomElements = {
|
|
|
37552
38163
|
* cannot be cast onto across unrelated classes, so it would be invisible to
|
|
37553
38164
|
* every chart that needs it. Reading where a pointer is resting is a fair
|
|
37554
38165
|
* thing to ask a chart anyway. (property only) (readonly)
|
|
38166
|
+
* - `data`: The readings as data, in the shape of a table, where the page has no
|
|
38167
|
+
* table to point `for` at. `for` wins where both are set.
|
|
38168
|
+
*
|
|
38169
|
+
* ```js
|
|
38170
|
+
* chart.data = {
|
|
38171
|
+
* caption: 'Sessions by channel',
|
|
38172
|
+
* columns: ['Month', 'Direct', 'Referral'],
|
|
38173
|
+
* rows: [['Jan', 10, 4], ['Feb', 20, 8]],
|
|
38174
|
+
* }
|
|
38175
|
+
* ```
|
|
38176
|
+
*
|
|
38177
|
+
* The first column holds each row's label and every column after it a
|
|
38178
|
+
* series, as in a table. A cell is a number, words, `null` for a blank,
|
|
38179
|
+
* or `{ value, text }` for a number shown as words, such as `$128k`. A
|
|
38180
|
+
* number is shown in `locale`.
|
|
38181
|
+
*
|
|
38182
|
+
* **A table is still the better source where the page can show one**:
|
|
38183
|
+
* it reads with no script and before hydration, and a reader can sort and
|
|
38184
|
+
* copy it. Data is drawn on the client only, so a server serves the
|
|
38185
|
+
* frame, and the summary, the keys and the readout are then the whole of
|
|
38186
|
+
* what a screen reader is given. Set a new object to redraw: the chart
|
|
38187
|
+
* does not look inside the one it has. (property only)
|
|
37555
38188
|
* - `series`: The table's columns, one series each. Empty when there is no table.
|
|
37556
38189
|
*
|
|
37557
38190
|
* Held by the controller between edits, so a render reading this five
|
|
@@ -37568,6 +38201,9 @@ export type CustomElements = {
|
|
|
37568
38201
|
* names an element, and the chart is a generic around its plot: written
|
|
37569
38202
|
* on the host, the name reached nobody. The plot takes it, as Heatmap's
|
|
37570
38203
|
* strip always did. (property only) (readonly)
|
|
38204
|
+
* - `readingsKnown`: Whether the readings have been looked for: false on the server and
|
|
38205
|
+
* while hydrating, where no table is resolved and no data is read. A
|
|
38206
|
+
* chart says it has no readings only once this is true. (property only) (readonly)
|
|
37571
38207
|
* - `sourceRows`: Every row of the table, with each cell's text and number.
|
|
37572
38208
|
*
|
|
37573
38209
|
* This is where a tooltip's content comes from, and it is deliberately not
|
|
@@ -37614,6 +38250,13 @@ export type CustomElements = {
|
|
|
37614
38250
|
* - `helix-reading-change`: The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it.
|
|
37615
38251
|
* - `helix-reading-press`: A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`.
|
|
37616
38252
|
*
|
|
38253
|
+
* ## Slots
|
|
38254
|
+
*
|
|
38255
|
+
* Areas where markup can be added to the component.
|
|
38256
|
+
*
|
|
38257
|
+
* - `empty`: Content shown in place of the drawing when the table has no readings, such as a link to add the first. Falls back to `empty-text`.
|
|
38258
|
+
* - `loading`: Content shown in place of the drawing while `loading` is set and there are no readings yet. Falls back to `loading-text`.
|
|
38259
|
+
*
|
|
37617
38260
|
* ## Methods
|
|
37618
38261
|
*
|
|
37619
38262
|
* Methods that can be called to access component functionality.
|
|
@@ -37670,12 +38313,14 @@ export type CustomElements = {
|
|
|
37670
38313
|
* - `area`: One part's band.
|
|
37671
38314
|
* - `axis`: The numbers of the scale beside the plot, under `value-axis`.
|
|
37672
38315
|
* - `baseline`: The rule at zero, which is the floor of the drawing.
|
|
38316
|
+
* - `empty`: The words in place of the drawing 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.
|
|
37673
38317
|
* - `gridline`: One rule across the plot, under `gridlines`.
|
|
37674
38318
|
* - `guide`: A rule down the reading a pointer is resting on.
|
|
37675
38319
|
* - `label`: One reading's name.
|
|
37676
38320
|
* - `labels`: The row of reading names.
|
|
37677
38321
|
* - `line`: The top edge of one part's band.
|
|
37678
38322
|
* - `live`: The readout: a polite live region that says the reading the keys moved to. Hide it visually.
|
|
38323
|
+
* - `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`.
|
|
37679
38324
|
* - `mark`: The invisible point the tooltip is anchored to.
|
|
37680
38325
|
* - `plot`: The drawing, which takes focus to be read by key.
|
|
37681
38326
|
* - `summary`: The total and each part's share at the latest reading, written as a sentence for screen readers.
|
|
@@ -38364,6 +39009,16 @@ export type CustomElements = {
|
|
|
38364
39009
|
* every component in the library and mean something on one. `wash` because
|
|
38365
39010
|
* that is what the tier below already calls it, in `--chart-bar-wash` and in
|
|
38366
39011
|
* the `bar-wash-start` and `bar-wash-end` stops.
|
|
39012
|
+
* - `empty-text`/`emptyText`: The words shown in place of the drawing when the table has no readings,
|
|
39013
|
+
* and the fallback of the `empty` slot.
|
|
39014
|
+
* - `loading`: Whether the readings are still on their way. The chart shows
|
|
39015
|
+
* `loading-text` in place of an empty drawing until it has readings.
|
|
39016
|
+
*
|
|
39017
|
+
* Reflected, so a stylesheet can treat the chart while it waits. A chart
|
|
39018
|
+
* that already has readings keeps drawing them, so a refresh does not
|
|
39019
|
+
* blank it.
|
|
39020
|
+
* - `loading-text`/`loadingText`: The words shown in place of the drawing while `loading` is set and
|
|
39021
|
+
* there are no readings yet, and the fallback of the `loading` slot.
|
|
38367
39022
|
* - `for`: The id of the table to read.
|
|
38368
39023
|
*
|
|
38369
39024
|
* Names a table in the same tree, so a chart inside another component's
|
|
@@ -38495,6 +39150,28 @@ export type CustomElements = {
|
|
|
38495
39150
|
* cannot be cast onto across unrelated classes, so it would be invisible to
|
|
38496
39151
|
* every chart that needs it. Reading where a pointer is resting is a fair
|
|
38497
39152
|
* thing to ask a chart anyway. (property only) (readonly)
|
|
39153
|
+
* - `data`: The readings as data, in the shape of a table, where the page has no
|
|
39154
|
+
* table to point `for` at. `for` wins where both are set.
|
|
39155
|
+
*
|
|
39156
|
+
* ```js
|
|
39157
|
+
* chart.data = {
|
|
39158
|
+
* caption: 'Sessions by channel',
|
|
39159
|
+
* columns: ['Month', 'Direct', 'Referral'],
|
|
39160
|
+
* rows: [['Jan', 10, 4], ['Feb', 20, 8]],
|
|
39161
|
+
* }
|
|
39162
|
+
* ```
|
|
39163
|
+
*
|
|
39164
|
+
* The first column holds each row's label and every column after it a
|
|
39165
|
+
* series, as in a table. A cell is a number, words, `null` for a blank,
|
|
39166
|
+
* or `{ value, text }` for a number shown as words, such as `$128k`. A
|
|
39167
|
+
* number is shown in `locale`.
|
|
39168
|
+
*
|
|
39169
|
+
* **A table is still the better source where the page can show one**:
|
|
39170
|
+
* it reads with no script and before hydration, and a reader can sort and
|
|
39171
|
+
* copy it. Data is drawn on the client only, so a server serves the
|
|
39172
|
+
* frame, and the summary, the keys and the readout are then the whole of
|
|
39173
|
+
* what a screen reader is given. Set a new object to redraw: the chart
|
|
39174
|
+
* does not look inside the one it has. (property only)
|
|
38498
39175
|
* - `series`: The table's columns, one series each. Empty when there is no table.
|
|
38499
39176
|
*
|
|
38500
39177
|
* Held by the controller between edits, so a render reading this five
|
|
@@ -38511,6 +39188,9 @@ export type CustomElements = {
|
|
|
38511
39188
|
* names an element, and the chart is a generic around its plot: written
|
|
38512
39189
|
* on the host, the name reached nobody. The plot takes it, as Heatmap's
|
|
38513
39190
|
* strip always did. (property only) (readonly)
|
|
39191
|
+
* - `readingsKnown`: Whether the readings have been looked for: false on the server and
|
|
39192
|
+
* while hydrating, where no table is resolved and no data is read. A
|
|
39193
|
+
* chart says it has no readings only once this is true. (property only) (readonly)
|
|
38514
39194
|
* - `sourceRows`: Every row of the table, with each cell's text and number.
|
|
38515
39195
|
*
|
|
38516
39196
|
* This is where a tooltip's content comes from, and it is deliberately not
|
|
@@ -38557,6 +39237,13 @@ export type CustomElements = {
|
|
|
38557
39237
|
* - `helix-reading-change`: The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it.
|
|
38558
39238
|
* - `helix-reading-press`: A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`.
|
|
38559
39239
|
*
|
|
39240
|
+
* ## Slots
|
|
39241
|
+
*
|
|
39242
|
+
* Areas where markup can be added to the component.
|
|
39243
|
+
*
|
|
39244
|
+
* - `empty`: Content shown in place of the drawing when the table has no readings, such as a link to add the first. Falls back to `empty-text`.
|
|
39245
|
+
* - `loading`: Content shown in place of the drawing while `loading` is set and there are no readings yet. Falls back to `loading-text`.
|
|
39246
|
+
*
|
|
38560
39247
|
* ## Methods
|
|
38561
39248
|
*
|
|
38562
39249
|
* Methods that can be called to access component functionality.
|
|
@@ -38620,6 +39307,7 @@ export type CustomElements = {
|
|
|
38620
39307
|
* - `bar-wash-end`: The far stop of a bar's gradient, where one is used.
|
|
38621
39308
|
* - `bar-wash-start`: The stop of a bar's gradient at its base.
|
|
38622
39309
|
* - `baseline`: The line the columns stand on.
|
|
39310
|
+
* - `empty`: The words in place of the drawing 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.
|
|
38623
39311
|
* - `gridline`: One gridline across the plot, drawn when `gridlines` is set.
|
|
38624
39312
|
* - `group`: One category's columns, together.
|
|
38625
39313
|
* - `group-active`: The group the tooltip describes. Set together with `group`.
|
|
@@ -38627,6 +39315,7 @@ export type CustomElements = {
|
|
|
38627
39315
|
* - `labels`: The row of category names.
|
|
38628
39316
|
* - `line`: A series drawn as a line, named in `lines`.
|
|
38629
39317
|
* - `live`: The readout: a polite live region that says the reading the keys moved to. Hide it visually.
|
|
39318
|
+
* - `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`.
|
|
38630
39319
|
* - `mark`: The invisible point the tooltip is anchored to.
|
|
38631
39320
|
* - `plot`: The drawing, which takes focus to be read by key.
|
|
38632
39321
|
* - `summary`: The chart's name and each series' highest reading, written as a sentence for screen readers. Hide it visually.
|
|
@@ -38665,10 +39354,31 @@ export type CustomElements = {
|
|
|
38665
39354
|
* set the passage apart. `marks` draws one large opening mark over the passage,
|
|
38666
39355
|
* as a pull quote sets it, in the element's language.
|
|
38667
39356
|
*
|
|
39357
|
+
* `text-align` sets the passage and its attribution in the middle of the
|
|
39358
|
+
* column or against its far edge, as a pull quote often stands. There, the
|
|
39359
|
+
* mark `marks` draws stands over the passage rather than beside it.
|
|
39360
|
+
* `text-wrap="balance"` evens out a short passage's lines.
|
|
39361
|
+
*
|
|
38668
39362
|
* ## Attributes & Properties
|
|
38669
39363
|
*
|
|
38670
39364
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
38671
39365
|
*
|
|
39366
|
+
* - `text-align`/`textAlign`: How the passage and its attribution align, set as `text-align`.
|
|
39367
|
+
*
|
|
39368
|
+
* `center` for a pull quote in the middle of a column and `end` for one
|
|
39369
|
+
* against its far edge. Under either, the mark `marks` draws stands over
|
|
39370
|
+
* the first line. Absent aligns as the prose around it does.
|
|
39371
|
+
*
|
|
39372
|
+
* Named for the CSS property it sets, as `Text.textAlign` is: `align` alone
|
|
39373
|
+
* is a legacy HTML attribute the browser maps to `text-align` by itself,
|
|
39374
|
+
* and it has no `start` or `end`.
|
|
39375
|
+
* - `text-wrap`/`textWrap`: How the passage's lines break, set as `text-wrap`.
|
|
39376
|
+
*
|
|
39377
|
+
* `balance` evens out the length of every line, which suits a pull quote of
|
|
39378
|
+
* a few lines in display type. `pretty` avoids a last line of one short
|
|
39379
|
+
* word, for a longer passage. Absent, the lines break as the browser breaks
|
|
39380
|
+
* them. The same name and values `Text` takes, but `nowrap`, a passage being
|
|
39381
|
+
* more than one line.
|
|
38672
39382
|
* - `attribution`: Who said it, and where, as words, such as "Maria Lopez, operations
|
|
38673
39383
|
* manager". The `attribution` slot replaces them, for markup such as a link.
|
|
38674
39384
|
*
|
|
@@ -44881,8 +45591,14 @@ export type CustomElements = {
|
|
|
44881
45591
|
* `closedby="any"` gains light dismiss without giving up the refusal, which is
|
|
44882
45592
|
* the property this component exists to keep.
|
|
44883
45593
|
*
|
|
45594
|
+
* The press on the backdrop that this element handles itself follows it too:
|
|
45595
|
+
* `closerequest` and `none` leave the dialog open on that press, as the
|
|
45596
|
+
* platform does, and `none` also keeps it open on Escape in a browser without
|
|
45597
|
+
* `closedby`.
|
|
45598
|
+
*
|
|
44884
45599
|
* Absent by default, which is the platform's `auto` and this library's rule
|
|
44885
|
-
* that a resting value is an attribute's absence.
|
|
45600
|
+
* that a resting value is an attribute's absence. Absent, a press on the
|
|
45601
|
+
* backdrop closes the dialog.
|
|
44886
45602
|
* - `dismissible`: Draws a control that closes the dialog, in the corner where the title is.
|
|
44887
45603
|
*
|
|
44888
45604
|
* Pressing it is `close()`, so it sends `helix-before-close` like every other
|
|
@@ -45249,6 +45965,28 @@ export type CustomElements = {
|
|
|
45249
45965
|
* cannot be cast onto across unrelated classes, so it would be invisible to
|
|
45250
45966
|
* every chart that needs it. Reading where a pointer is resting is a fair
|
|
45251
45967
|
* thing to ask a chart anyway. (property only) (readonly)
|
|
45968
|
+
* - `data`: The readings as data, in the shape of a table, where the page has no
|
|
45969
|
+
* table to point `for` at. `for` wins where both are set.
|
|
45970
|
+
*
|
|
45971
|
+
* ```js
|
|
45972
|
+
* chart.data = {
|
|
45973
|
+
* caption: 'Sessions by channel',
|
|
45974
|
+
* columns: ['Month', 'Direct', 'Referral'],
|
|
45975
|
+
* rows: [['Jan', 10, 4], ['Feb', 20, 8]],
|
|
45976
|
+
* }
|
|
45977
|
+
* ```
|
|
45978
|
+
*
|
|
45979
|
+
* The first column holds each row's label and every column after it a
|
|
45980
|
+
* series, as in a table. A cell is a number, words, `null` for a blank,
|
|
45981
|
+
* or `{ value, text }` for a number shown as words, such as `$128k`. A
|
|
45982
|
+
* number is shown in `locale`.
|
|
45983
|
+
*
|
|
45984
|
+
* **A table is still the better source where the page can show one**:
|
|
45985
|
+
* it reads with no script and before hydration, and a reader can sort and
|
|
45986
|
+
* copy it. Data is drawn on the client only, so a server serves the
|
|
45987
|
+
* frame, and the summary, the keys and the readout are then the whole of
|
|
45988
|
+
* what a screen reader is given. Set a new object to redraw: the chart
|
|
45989
|
+
* does not look inside the one it has. (property only)
|
|
45252
45990
|
* - `series`: The table's columns, one series each. Empty when there is no table.
|
|
45253
45991
|
*
|
|
45254
45992
|
* Held by the controller between edits, so a render reading this five
|
|
@@ -45265,6 +46003,9 @@ export type CustomElements = {
|
|
|
45265
46003
|
* names an element, and the chart is a generic around its plot: written
|
|
45266
46004
|
* on the host, the name reached nobody. The plot takes it, as Heatmap's
|
|
45267
46005
|
* strip always did. (property only) (readonly)
|
|
46006
|
+
* - `readingsKnown`: Whether the readings have been looked for: false on the server and
|
|
46007
|
+
* while hydrating, where no table is resolved and no data is read. A
|
|
46008
|
+
* chart says it has no readings only once this is true. (property only) (readonly)
|
|
45268
46009
|
* - `sourceRows`: Every row of the table, with each cell's text and number.
|
|
45269
46010
|
*
|
|
45270
46011
|
* This is where a tooltip's content comes from, and it is deliberately not
|
|
@@ -45469,6 +46210,11 @@ export type CustomElements = {
|
|
|
45469
46210
|
* lost its focus trap because a consumer forgot a word would be worse than an
|
|
45470
46211
|
* attribute on the host, and nothing selects on it: the scrim is rendered or
|
|
45471
46212
|
* not, rather than shown or hidden by CSS.
|
|
46213
|
+
* - `persistent`: Stops Escape, a press outside, and a swipe from closing the drawer, for a
|
|
46214
|
+
* drawer that has to be answered.
|
|
46215
|
+
*
|
|
46216
|
+
* The close control and `close()` still close it, as on `Dialog`: a panel
|
|
46217
|
+
* with no way out at all is a trap.
|
|
45472
46218
|
* - `placement`: Which edge the drawer comes from.
|
|
45473
46219
|
*
|
|
45474
46220
|
* Unset is `end`, and it stays unset rather than being written down: a
|
|
@@ -47727,6 +48473,28 @@ export type CustomElements = {
|
|
|
47727
48473
|
* cannot be cast onto across unrelated classes, so it would be invisible to
|
|
47728
48474
|
* every chart that needs it. Reading where a pointer is resting is a fair
|
|
47729
48475
|
* thing to ask a chart anyway. (property only) (readonly)
|
|
48476
|
+
* - `data`: The readings as data, in the shape of a table, where the page has no
|
|
48477
|
+
* table to point `for` at. `for` wins where both are set.
|
|
48478
|
+
*
|
|
48479
|
+
* ```js
|
|
48480
|
+
* chart.data = {
|
|
48481
|
+
* caption: 'Sessions by channel',
|
|
48482
|
+
* columns: ['Month', 'Direct', 'Referral'],
|
|
48483
|
+
* rows: [['Jan', 10, 4], ['Feb', 20, 8]],
|
|
48484
|
+
* }
|
|
48485
|
+
* ```
|
|
48486
|
+
*
|
|
48487
|
+
* The first column holds each row's label and every column after it a
|
|
48488
|
+
* series, as in a table. A cell is a number, words, `null` for a blank,
|
|
48489
|
+
* or `{ value, text }` for a number shown as words, such as `$128k`. A
|
|
48490
|
+
* number is shown in `locale`.
|
|
48491
|
+
*
|
|
48492
|
+
* **A table is still the better source where the page can show one**:
|
|
48493
|
+
* it reads with no script and before hydration, and a reader can sort and
|
|
48494
|
+
* copy it. Data is drawn on the client only, so a server serves the
|
|
48495
|
+
* frame, and the summary, the keys and the readout are then the whole of
|
|
48496
|
+
* what a screen reader is given. Set a new object to redraw: the chart
|
|
48497
|
+
* does not look inside the one it has. (property only)
|
|
47730
48498
|
* - `series`: The table's columns, one series each. Empty when there is no table.
|
|
47731
48499
|
*
|
|
47732
48500
|
* Held by the controller between edits, so a render reading this five
|
|
@@ -47743,6 +48511,9 @@ export type CustomElements = {
|
|
|
47743
48511
|
* names an element, and the chart is a generic around its plot: written
|
|
47744
48512
|
* on the host, the name reached nobody. The plot takes it, as Heatmap's
|
|
47745
48513
|
* strip always did. (property only) (readonly)
|
|
48514
|
+
* - `readingsKnown`: Whether the readings have been looked for: false on the server and
|
|
48515
|
+
* while hydrating, where no table is resolved and no data is read. A
|
|
48516
|
+
* chart says it has no readings only once this is true. (property only) (readonly)
|
|
47746
48517
|
* - `sourceRows`: Every row of the table, with each cell's text and number.
|
|
47747
48518
|
*
|
|
47748
48519
|
* This is where a tooltip's content comes from, and it is deliberately not
|
|
@@ -49430,6 +50201,16 @@ export type CustomElements = {
|
|
|
49430
50201
|
* **`transparent` is where this one stops.** A mark with no ink is not a
|
|
49431
50202
|
* material choice, it is an absent series, and a chart says that by not
|
|
49432
50203
|
* having the datum rather than by painting it invisibly.
|
|
50204
|
+
* - `empty-text`/`emptyText`: The words shown in place of the drawing when the table has no readings,
|
|
50205
|
+
* and the fallback of the `empty` slot.
|
|
50206
|
+
* - `loading`: Whether the readings are still on their way. The chart shows
|
|
50207
|
+
* `loading-text` in place of an empty drawing until it has readings.
|
|
50208
|
+
*
|
|
50209
|
+
* Reflected, so a stylesheet can treat the chart while it waits. A chart
|
|
50210
|
+
* that already has readings keeps drawing them, so a refresh does not
|
|
50211
|
+
* blank it.
|
|
50212
|
+
* - `loading-text`/`loadingText`: The words shown in place of the drawing while `loading` is set and
|
|
50213
|
+
* there are no readings yet, and the fallback of the `loading` slot.
|
|
49433
50214
|
* - `for`: The id of the table to read.
|
|
49434
50215
|
*
|
|
49435
50216
|
* Names a table in the same tree, so a chart inside another component's
|
|
@@ -49566,6 +50347,28 @@ export type CustomElements = {
|
|
|
49566
50347
|
* cannot be cast onto across unrelated classes, so it would be invisible to
|
|
49567
50348
|
* every chart that needs it. Reading where a pointer is resting is a fair
|
|
49568
50349
|
* thing to ask a chart anyway. (property only) (readonly)
|
|
50350
|
+
* - `data`: The readings as data, in the shape of a table, where the page has no
|
|
50351
|
+
* table to point `for` at. `for` wins where both are set.
|
|
50352
|
+
*
|
|
50353
|
+
* ```js
|
|
50354
|
+
* chart.data = {
|
|
50355
|
+
* caption: 'Sessions by channel',
|
|
50356
|
+
* columns: ['Month', 'Direct', 'Referral'],
|
|
50357
|
+
* rows: [['Jan', 10, 4], ['Feb', 20, 8]],
|
|
50358
|
+
* }
|
|
50359
|
+
* ```
|
|
50360
|
+
*
|
|
50361
|
+
* The first column holds each row's label and every column after it a
|
|
50362
|
+
* series, as in a table. A cell is a number, words, `null` for a blank,
|
|
50363
|
+
* or `{ value, text }` for a number shown as words, such as `$128k`. A
|
|
50364
|
+
* number is shown in `locale`.
|
|
50365
|
+
*
|
|
50366
|
+
* **A table is still the better source where the page can show one**:
|
|
50367
|
+
* it reads with no script and before hydration, and a reader can sort and
|
|
50368
|
+
* copy it. Data is drawn on the client only, so a server serves the
|
|
50369
|
+
* frame, and the summary, the keys and the readout are then the whole of
|
|
50370
|
+
* what a screen reader is given. Set a new object to redraw: the chart
|
|
50371
|
+
* does not look inside the one it has. (property only)
|
|
49569
50372
|
* - `series`: The table's columns, one series each. Empty when there is no table.
|
|
49570
50373
|
*
|
|
49571
50374
|
* Held by the controller between edits, so a render reading this five
|
|
@@ -49582,6 +50385,9 @@ export type CustomElements = {
|
|
|
49582
50385
|
* names an element, and the chart is a generic around its plot: written
|
|
49583
50386
|
* on the host, the name reached nobody. The plot takes it, as Heatmap's
|
|
49584
50387
|
* strip always did. (property only) (readonly)
|
|
50388
|
+
* - `readingsKnown`: Whether the readings have been looked for: false on the server and
|
|
50389
|
+
* while hydrating, where no table is resolved and no data is read. A
|
|
50390
|
+
* chart says it has no readings only once this is true. (property only) (readonly)
|
|
49585
50391
|
* - `sourceRows`: Every row of the table, with each cell's text and number.
|
|
49586
50392
|
*
|
|
49587
50393
|
* This is where a tooltip's content comes from, and it is deliberately not
|
|
@@ -49628,6 +50434,13 @@ export type CustomElements = {
|
|
|
49628
50434
|
* - `helix-reading-change`: The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it.
|
|
49629
50435
|
* - `helix-reading-press`: A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`.
|
|
49630
50436
|
*
|
|
50437
|
+
* ## Slots
|
|
50438
|
+
*
|
|
50439
|
+
* Areas where markup can be added to the component.
|
|
50440
|
+
*
|
|
50441
|
+
* - `empty`: Content shown in place of the drawing when the table has no readings, such as a link to add the first. Falls back to `empty-text`.
|
|
50442
|
+
* - `loading`: Content shown in place of the drawing while `loading` is set and there are no readings yet. Falls back to `loading-text`.
|
|
50443
|
+
*
|
|
49631
50444
|
* ## Methods
|
|
49632
50445
|
*
|
|
49633
50446
|
* Methods that can be called to access component functionality.
|
|
@@ -49692,6 +50505,7 @@ export type CustomElements = {
|
|
|
49692
50505
|
* - `axis`: The numbers of the scale beside the plot, under `value-axis`.
|
|
49693
50506
|
* - `band`: The band around the reading under the pointer.
|
|
49694
50507
|
* - `baseline`: The rule at zero, where zero is inside the range.
|
|
50508
|
+
* - `empty`: The words in place of the drawing 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.
|
|
49695
50509
|
* - `gridline`: One rule across the plot, under `gridlines`.
|
|
49696
50510
|
* - `guide`: A rule down the reading a pointer is resting on.
|
|
49697
50511
|
* - `label`: One reading's name.
|
|
@@ -49699,6 +50513,7 @@ export type CustomElements = {
|
|
|
49699
50513
|
* - `line`: The line for one series.
|
|
49700
50514
|
* - `line-dashed`: A `line` whose series `dashed` names. Set alongside `line`.
|
|
49701
50515
|
* - `live`: The readout: a polite live region that says the reading the keys moved to. Hide it visually.
|
|
50516
|
+
* - `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`.
|
|
49702
50517
|
* - `mark`: The invisible point the tooltip is anchored to.
|
|
49703
50518
|
* - `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`.
|
|
49704
50519
|
* - `marker-lone`: A `marker` on a reading with a blank on either side, which no line reaches. Set alongside `marker`.
|
|
@@ -53765,6 +54580,12 @@ export type CustomElements = {
|
|
|
53765
54580
|
* Off by default, because the name and the busy state already change with
|
|
53766
54581
|
* the state, and an orb beside a stream of messages would otherwise talk
|
|
53767
54582
|
* over them. Set it on an orb that is the only sign of progress on the page.
|
|
54583
|
+
*
|
|
54584
|
+
* **Without it, finishing is silent.** `done` turns the orb into an image
|
|
54585
|
+
* named "Done" that is no longer busy, which a screen reader reports when it
|
|
54586
|
+
* next reaches the orb and does not say as it happens. A page whose own
|
|
54587
|
+
* result arrives in a live region, such as a chat reply, already says the
|
|
54588
|
+
* work is done; one that shows nothing else sets `announce`.
|
|
53768
54589
|
* - `label`: The name read by screen readers. Defaults to the name of the state, such
|
|
53769
54590
|
* as "Thinking".
|
|
53770
54591
|
*
|
|
@@ -54885,7 +55706,8 @@ export type CustomElements = {
|
|
|
54885
55706
|
*
|
|
54886
55707
|
* A `percent` style writes the share of the range, and any other the value
|
|
54887
55708
|
* itself, so the example says "18 GB". Absent is a whole percentage. The
|
|
54888
|
-
* words are announced
|
|
55709
|
+
* words are announced whether or not `show-value` shows them. `value-text`
|
|
55710
|
+
* still wins.
|
|
54889
55711
|
* - `indeterminate`: Whether the length of the task is unknown. The bar then shows activity
|
|
54890
55712
|
* without a value.
|
|
54891
55713
|
*
|
|
@@ -54974,6 +55796,7 @@ export type CustomElements = {
|
|
|
54974
55796
|
*
|
|
54975
55797
|
* Areas where markup can be added to the component.
|
|
54976
55798
|
*
|
|
55799
|
+
* - `(default)`: Words drawn on the bar, or in the middle of a ring, such as the reading. The bar grows to their height, and over the fill they take the fill's own ink.
|
|
54977
55800
|
* - `label`: A visible label, above a bar and under a ring. Its words name it in place of `label`.
|
|
54978
55801
|
*
|
|
54979
55802
|
* ## CSS Custom Properties
|
|
@@ -54981,6 +55804,9 @@ export type CustomElements = {
|
|
|
54981
55804
|
* CSS variables available for styling the component.
|
|
54982
55805
|
*
|
|
54983
55806
|
* - `--progress-color`: Fill of the part that is done.
|
|
55807
|
+
* - `--progress-content-color`: The color of the words of the default slot where they are over the track, and in a ring.
|
|
55808
|
+
* - `--progress-content-fill-color`: The color of the words of the default slot where they are over the fill.
|
|
55809
|
+
* - `--progress-content-size`: The type size of the words of the default slot.
|
|
54984
55810
|
* - `--progress-label-color`: Color of a slotted label.
|
|
54985
55811
|
* - `--progress-label-gap`: Space between a slotted label and the bar.
|
|
54986
55812
|
* - `--progress-label-size`: Type size of a slotted label.
|
|
@@ -54999,6 +55825,7 @@ export type CustomElements = {
|
|
|
54999
55825
|
*
|
|
55000
55826
|
* Custom selectors for styling elements within the component.
|
|
55001
55827
|
*
|
|
55828
|
+
* - `content`: The box holding the words of the default slot, over the track or in the middle of the ring. Carries `--progress-fraction`.
|
|
55002
55829
|
* - `groove`: The unfilled circle under the ring's filled arc.
|
|
55003
55830
|
* - `indicator`: The filled part that shows the work done.
|
|
55004
55831
|
* - `live`: A polite region that says `complete-label` when the work is done, rendered from that moment. Hide it visually.
|
|
@@ -55010,6 +55837,7 @@ export type CustomElements = {
|
|
|
55010
55837
|
* These can be used to apply styling when a component is in a given state.
|
|
55011
55838
|
*
|
|
55012
55839
|
* - `complete`: The value is at `max` and the bar is not indeterminate.
|
|
55840
|
+
* - `content`: Words are set in the default slot.
|
|
55013
55841
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
55014
55842
|
*/
|
|
55015
55843
|
"helix-progress": Partial<
|
|
@@ -56591,6 +57419,16 @@ export type CustomElements = {
|
|
|
56591
57419
|
*
|
|
56592
57420
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
56593
57421
|
*
|
|
57422
|
+
* - `empty-text`/`emptyText`: The words shown in place of the drawing when the table has no readings,
|
|
57423
|
+
* and the fallback of the `empty` slot.
|
|
57424
|
+
* - `loading`: Whether the readings are still on their way. The chart shows
|
|
57425
|
+
* `loading-text` in place of an empty drawing until it has readings.
|
|
57426
|
+
*
|
|
57427
|
+
* Reflected, so a stylesheet can treat the chart while it waits. A chart
|
|
57428
|
+
* that already has readings keeps drawing them, so a refresh does not
|
|
57429
|
+
* blank it.
|
|
57430
|
+
* - `loading-text`/`loadingText`: The words shown in place of the drawing while `loading` is set and
|
|
57431
|
+
* there are no readings yet, and the fallback of the `loading` slot.
|
|
56594
57432
|
* - `for`: The id of the table to read.
|
|
56595
57433
|
*
|
|
56596
57434
|
* Names a table in the same tree, so a chart inside another component's
|
|
@@ -56652,6 +57490,28 @@ export type CustomElements = {
|
|
|
56652
57490
|
* cannot be cast onto across unrelated classes, so it would be invisible to
|
|
56653
57491
|
* every chart that needs it. Reading where a pointer is resting is a fair
|
|
56654
57492
|
* thing to ask a chart anyway. (property only) (readonly)
|
|
57493
|
+
* - `data`: The readings as data, in the shape of a table, where the page has no
|
|
57494
|
+
* table to point `for` at. `for` wins where both are set.
|
|
57495
|
+
*
|
|
57496
|
+
* ```js
|
|
57497
|
+
* chart.data = {
|
|
57498
|
+
* caption: 'Sessions by channel',
|
|
57499
|
+
* columns: ['Month', 'Direct', 'Referral'],
|
|
57500
|
+
* rows: [['Jan', 10, 4], ['Feb', 20, 8]],
|
|
57501
|
+
* }
|
|
57502
|
+
* ```
|
|
57503
|
+
*
|
|
57504
|
+
* The first column holds each row's label and every column after it a
|
|
57505
|
+
* series, as in a table. A cell is a number, words, `null` for a blank,
|
|
57506
|
+
* or `{ value, text }` for a number shown as words, such as `$128k`. A
|
|
57507
|
+
* number is shown in `locale`.
|
|
57508
|
+
*
|
|
57509
|
+
* **A table is still the better source where the page can show one**:
|
|
57510
|
+
* it reads with no script and before hydration, and a reader can sort and
|
|
57511
|
+
* copy it. Data is drawn on the client only, so a server serves the
|
|
57512
|
+
* frame, and the summary, the keys and the readout are then the whole of
|
|
57513
|
+
* what a screen reader is given. Set a new object to redraw: the chart
|
|
57514
|
+
* does not look inside the one it has. (property only)
|
|
56655
57515
|
* - `series`: The table's columns, one series each. Empty when there is no table.
|
|
56656
57516
|
*
|
|
56657
57517
|
* Held by the controller between edits, so a render reading this five
|
|
@@ -56668,6 +57528,9 @@ export type CustomElements = {
|
|
|
56668
57528
|
* names an element, and the chart is a generic around its plot: written
|
|
56669
57529
|
* on the host, the name reached nobody. The plot takes it, as Heatmap's
|
|
56670
57530
|
* strip always did. (property only) (readonly)
|
|
57531
|
+
* - `readingsKnown`: Whether the readings have been looked for: false on the server and
|
|
57532
|
+
* while hydrating, where no table is resolved and no data is read. A
|
|
57533
|
+
* chart says it has no readings only once this is true. (property only) (readonly)
|
|
56671
57534
|
* - `sourceRows`: Every row of the table, with each cell's text and number.
|
|
56672
57535
|
*
|
|
56673
57536
|
* This is where a tooltip's content comes from, and it is deliberately not
|
|
@@ -56714,6 +57577,13 @@ export type CustomElements = {
|
|
|
56714
57577
|
* - `helix-reading-change`: The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it.
|
|
56715
57578
|
* - `helix-reading-press`: A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`.
|
|
56716
57579
|
*
|
|
57580
|
+
* ## Slots
|
|
57581
|
+
*
|
|
57582
|
+
* Areas where markup can be added to the component.
|
|
57583
|
+
*
|
|
57584
|
+
* - `empty`: Content shown in place of the drawing when the table has no readings, such as a link to add the first. Falls back to `empty-text`.
|
|
57585
|
+
* - `loading`: Content shown in place of the drawing while `loading` is set and there are no readings yet. Falls back to `loading-text`.
|
|
57586
|
+
*
|
|
56717
57587
|
* ## Methods
|
|
56718
57588
|
*
|
|
56719
57589
|
* Methods that can be called to access component functionality.
|
|
@@ -56772,8 +57642,10 @@ export type CustomElements = {
|
|
|
56772
57642
|
*
|
|
56773
57643
|
* Custom selectors for styling elements within the component.
|
|
56774
57644
|
*
|
|
57645
|
+
* - `empty`: The words in place of the drawing 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.
|
|
56775
57646
|
* - `gridline`: One line across the plot, drawn when `gridlines` is set.
|
|
56776
57647
|
* - `live`: The readout: a polite live region that says the row the keys moved to. Hide it visually.
|
|
57648
|
+
* - `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`.
|
|
56777
57649
|
* - `mark`: The invisible point the tooltip is anchored to.
|
|
56778
57650
|
* - `plane`: The grid that holds the plot, both axes, and their names. It runs left to right on every page.
|
|
56779
57651
|
* - `plot`: The drawing, which takes focus to be read by key.
|
|
@@ -58397,6 +59269,8 @@ export type CustomElements = {
|
|
|
58397
59269
|
* Reading gives where it is; writing declares it the consumer's, and
|
|
58398
59270
|
* `default-position` seeds one this element owns. The same accessor pair
|
|
58399
59271
|
* `Pagination.page` and the calendar's `month` carry.
|
|
59272
|
+
* - `primary`: The pane that keeps its size when the splitter's own size changes. The
|
|
59273
|
+
* other pane takes all of the change. Unset, both keep their share.
|
|
58400
59274
|
* - `snap`: Where a dragged divider snaps, comma separated, as Web Awesome's split
|
|
58401
59275
|
* panel does: a bare number is a percentage and a length such as `240px` is
|
|
58402
59276
|
* measured along the splitter, so `snap="25, 50, 75"` or `snap="240px, 50"`.
|
|
@@ -58799,7 +59673,14 @@ export type CustomElements = {
|
|
|
58799
59673
|
"helix-steps": Partial<HelixStepsProps & BaseProps<HelixSteps> & BaseEvents<HelixSteps>>;
|
|
58800
59674
|
|
|
58801
59675
|
/**
|
|
59676
|
+
* A step draws its mark, its name as a `helix-button`, and the line that joins
|
|
59677
|
+
* it to the steps either side. The mark is a tick on a finished step, a dot
|
|
59678
|
+
* on the current one, and an empty ring on one nobody has reached. Where the
|
|
59679
|
+
* list sets `variant="numeric"`, it is the step's number.
|
|
58802
59680
|
*
|
|
59681
|
+
* Down a column, the current step opens to show what is in its `content` slot,
|
|
59682
|
+
* and the others collapse it. A collapsed stage's content is hidden, so Tab and
|
|
59683
|
+
* a screen reader pass over it as well.
|
|
58803
59684
|
*
|
|
58804
59685
|
* ## Attributes & Properties
|
|
58805
59686
|
*
|
|
@@ -64754,6 +65635,11 @@ export type CustomElementsSolidJs = {
|
|
|
64754
65635
|
* **Named for the region and not for what is usually in it.** The middle slot
|
|
64755
65636
|
* takes a search field or a breadcrumb trail as readily as a `Navigation`, so
|
|
64756
65637
|
* the property carries the part's name, `content`.
|
|
65638
|
+
* - `fold-below`/`foldBelow`: The width of the bar, in pixels, below which the middle region folds behind
|
|
65639
|
+
* a toggle. Unset, it never folds.
|
|
65640
|
+
* - `hide-on-scroll`/`hideOnScroll`: Hides the bar as the page scrolls down past it, and shows it again as the
|
|
65641
|
+
* page scrolls up.
|
|
65642
|
+
* - `menu-label`/`menuLabel`: The name of the toggle that opens a folded middle region.
|
|
64757
65643
|
* - `scroller`: The id of the element whose scrolling lifts the bar, for an app shell that
|
|
64758
65644
|
* scrolls a container instead of the window. Unset is the window.
|
|
64759
65645
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
@@ -64790,6 +65676,7 @@ export type CustomElementsSolidJs = {
|
|
|
64790
65676
|
* - `(default)`: The middle region, usually a `Navigation`.
|
|
64791
65677
|
* - `end`: Trailing content, usually a call to action.
|
|
64792
65678
|
* - `start`: Leading content, usually a wordmark.
|
|
65679
|
+
* - `menu-icon`: Replaces the glyph inside the toggle that opens a folded middle region.
|
|
64793
65680
|
*
|
|
64794
65681
|
* ## CSS Custom Properties
|
|
64795
65682
|
*
|
|
@@ -64810,11 +65697,16 @@ export type CustomElementsSolidJs = {
|
|
|
64810
65697
|
* - `end`: The trailing region.
|
|
64811
65698
|
* - `row`: The centered row inside the banner.
|
|
64812
65699
|
* - `start`: The leading region.
|
|
65700
|
+
* - `toggle`: The control that opens and closes the folded middle region, drawn while the bar is narrower than `fold-below`.
|
|
65701
|
+
* - `toggle-mark`: The glyph on the toggle, where none is slotted.
|
|
64813
65702
|
*
|
|
64814
65703
|
* ## CSS States
|
|
64815
65704
|
*
|
|
64816
65705
|
* These can be used to apply styling when a component is in a given state.
|
|
64817
65706
|
*
|
|
65707
|
+
* - `folded`: While the bar is narrower than `fold-below`, and the middle region is behind the toggle.
|
|
65708
|
+
* - `hidden`: While `hide-on-scroll` has the bar out of the way, after a scroll down.
|
|
65709
|
+
* - `open`: While the folded middle region is open.
|
|
64818
65710
|
* - `scrolled`: While the page is scrolled down from the top, which is when the bar lifts off it.
|
|
64819
65711
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
64820
65712
|
*/
|
|
@@ -64850,6 +65742,16 @@ export type CustomElementsSolidJs = {
|
|
|
64850
65742
|
*
|
|
64851
65743
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
64852
65744
|
*
|
|
65745
|
+
* - `empty-text`/`emptyText`: The words shown in place of the drawing when the table has no readings,
|
|
65746
|
+
* and the fallback of the `empty` slot.
|
|
65747
|
+
* - `loading`: Whether the readings are still on their way. The chart shows
|
|
65748
|
+
* `loading-text` in place of an empty drawing until it has readings.
|
|
65749
|
+
*
|
|
65750
|
+
* Reflected, so a stylesheet can treat the chart while it waits. A chart
|
|
65751
|
+
* that already has readings keeps drawing them, so a refresh does not
|
|
65752
|
+
* blank it.
|
|
65753
|
+
* - `loading-text`/`loadingText`: The words shown in place of the drawing while `loading` is set and
|
|
65754
|
+
* there are no readings yet, and the fallback of the `loading` slot.
|
|
64853
65755
|
* - `for`: The id of the table to read.
|
|
64854
65756
|
*
|
|
64855
65757
|
* Names a table in the same tree, so a chart inside another component's
|
|
@@ -64922,6 +65824,28 @@ export type CustomElementsSolidJs = {
|
|
|
64922
65824
|
* cannot be cast onto across unrelated classes, so it would be invisible to
|
|
64923
65825
|
* every chart that needs it. Reading where a pointer is resting is a fair
|
|
64924
65826
|
* thing to ask a chart anyway. (property only) (readonly)
|
|
65827
|
+
* - `data`: The readings as data, in the shape of a table, where the page has no
|
|
65828
|
+
* table to point `for` at. `for` wins where both are set.
|
|
65829
|
+
*
|
|
65830
|
+
* ```js
|
|
65831
|
+
* chart.data = {
|
|
65832
|
+
* caption: 'Sessions by channel',
|
|
65833
|
+
* columns: ['Month', 'Direct', 'Referral'],
|
|
65834
|
+
* rows: [['Jan', 10, 4], ['Feb', 20, 8]],
|
|
65835
|
+
* }
|
|
65836
|
+
* ```
|
|
65837
|
+
*
|
|
65838
|
+
* The first column holds each row's label and every column after it a
|
|
65839
|
+
* series, as in a table. A cell is a number, words, `null` for a blank,
|
|
65840
|
+
* or `{ value, text }` for a number shown as words, such as `$128k`. A
|
|
65841
|
+
* number is shown in `locale`.
|
|
65842
|
+
*
|
|
65843
|
+
* **A table is still the better source where the page can show one**:
|
|
65844
|
+
* it reads with no script and before hydration, and a reader can sort and
|
|
65845
|
+
* copy it. Data is drawn on the client only, so a server serves the
|
|
65846
|
+
* frame, and the summary, the keys and the readout are then the whole of
|
|
65847
|
+
* what a screen reader is given. Set a new object to redraw: the chart
|
|
65848
|
+
* does not look inside the one it has. (property only)
|
|
64925
65849
|
* - `series`: The table's columns, one series each. Empty when there is no table.
|
|
64926
65850
|
*
|
|
64927
65851
|
* Held by the controller between edits, so a render reading this five
|
|
@@ -64938,6 +65862,9 @@ export type CustomElementsSolidJs = {
|
|
|
64938
65862
|
* names an element, and the chart is a generic around its plot: written
|
|
64939
65863
|
* on the host, the name reached nobody. The plot takes it, as Heatmap's
|
|
64940
65864
|
* strip always did. (property only) (readonly)
|
|
65865
|
+
* - `readingsKnown`: Whether the readings have been looked for: false on the server and
|
|
65866
|
+
* while hydrating, where no table is resolved and no data is read. A
|
|
65867
|
+
* chart says it has no readings only once this is true. (property only) (readonly)
|
|
64941
65868
|
* - `sourceRows`: Every row of the table, with each cell's text and number.
|
|
64942
65869
|
*
|
|
64943
65870
|
* This is where a tooltip's content comes from, and it is deliberately not
|
|
@@ -64984,6 +65911,13 @@ export type CustomElementsSolidJs = {
|
|
|
64984
65911
|
* - `helix-reading-change`: The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it.
|
|
64985
65912
|
* - `helix-reading-press`: A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`.
|
|
64986
65913
|
*
|
|
65914
|
+
* ## Slots
|
|
65915
|
+
*
|
|
65916
|
+
* Areas where markup can be added to the component.
|
|
65917
|
+
*
|
|
65918
|
+
* - `empty`: Content shown in place of the drawing when the table has no readings, such as a link to add the first. Falls back to `empty-text`.
|
|
65919
|
+
* - `loading`: Content shown in place of the drawing while `loading` is set and there are no readings yet. Falls back to `loading-text`.
|
|
65920
|
+
*
|
|
64987
65921
|
* ## Methods
|
|
64988
65922
|
*
|
|
64989
65923
|
* Methods that can be called to access component functionality.
|
|
@@ -65040,12 +65974,14 @@ export type CustomElementsSolidJs = {
|
|
|
65040
65974
|
* - `area`: One part's band.
|
|
65041
65975
|
* - `axis`: The numbers of the scale beside the plot, under `value-axis`.
|
|
65042
65976
|
* - `baseline`: The rule at zero, which is the floor of the drawing.
|
|
65977
|
+
* - `empty`: The words in place of the drawing 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.
|
|
65043
65978
|
* - `gridline`: One rule across the plot, under `gridlines`.
|
|
65044
65979
|
* - `guide`: A rule down the reading a pointer is resting on.
|
|
65045
65980
|
* - `label`: One reading's name.
|
|
65046
65981
|
* - `labels`: The row of reading names.
|
|
65047
65982
|
* - `line`: The top edge of one part's band.
|
|
65048
65983
|
* - `live`: The readout: a polite live region that says the reading the keys moved to. Hide it visually.
|
|
65984
|
+
* - `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`.
|
|
65049
65985
|
* - `mark`: The invisible point the tooltip is anchored to.
|
|
65050
65986
|
* - `plot`: The drawing, which takes focus to be read by key.
|
|
65051
65987
|
* - `summary`: The total and each part's share at the latest reading, written as a sentence for screen readers.
|
|
@@ -65750,6 +66686,16 @@ export type CustomElementsSolidJs = {
|
|
|
65750
66686
|
* every component in the library and mean something on one. `wash` because
|
|
65751
66687
|
* that is what the tier below already calls it, in `--chart-bar-wash` and in
|
|
65752
66688
|
* the `bar-wash-start` and `bar-wash-end` stops.
|
|
66689
|
+
* - `empty-text`/`emptyText`: The words shown in place of the drawing when the table has no readings,
|
|
66690
|
+
* and the fallback of the `empty` slot.
|
|
66691
|
+
* - `loading`: Whether the readings are still on their way. The chart shows
|
|
66692
|
+
* `loading-text` in place of an empty drawing until it has readings.
|
|
66693
|
+
*
|
|
66694
|
+
* Reflected, so a stylesheet can treat the chart while it waits. A chart
|
|
66695
|
+
* that already has readings keeps drawing them, so a refresh does not
|
|
66696
|
+
* blank it.
|
|
66697
|
+
* - `loading-text`/`loadingText`: The words shown in place of the drawing while `loading` is set and
|
|
66698
|
+
* there are no readings yet, and the fallback of the `loading` slot.
|
|
65753
66699
|
* - `for`: The id of the table to read.
|
|
65754
66700
|
*
|
|
65755
66701
|
* Names a table in the same tree, so a chart inside another component's
|
|
@@ -65881,6 +66827,28 @@ export type CustomElementsSolidJs = {
|
|
|
65881
66827
|
* cannot be cast onto across unrelated classes, so it would be invisible to
|
|
65882
66828
|
* every chart that needs it. Reading where a pointer is resting is a fair
|
|
65883
66829
|
* thing to ask a chart anyway. (property only) (readonly)
|
|
66830
|
+
* - `data`: The readings as data, in the shape of a table, where the page has no
|
|
66831
|
+
* table to point `for` at. `for` wins where both are set.
|
|
66832
|
+
*
|
|
66833
|
+
* ```js
|
|
66834
|
+
* chart.data = {
|
|
66835
|
+
* caption: 'Sessions by channel',
|
|
66836
|
+
* columns: ['Month', 'Direct', 'Referral'],
|
|
66837
|
+
* rows: [['Jan', 10, 4], ['Feb', 20, 8]],
|
|
66838
|
+
* }
|
|
66839
|
+
* ```
|
|
66840
|
+
*
|
|
66841
|
+
* The first column holds each row's label and every column after it a
|
|
66842
|
+
* series, as in a table. A cell is a number, words, `null` for a blank,
|
|
66843
|
+
* or `{ value, text }` for a number shown as words, such as `$128k`. A
|
|
66844
|
+
* number is shown in `locale`.
|
|
66845
|
+
*
|
|
66846
|
+
* **A table is still the better source where the page can show one**:
|
|
66847
|
+
* it reads with no script and before hydration, and a reader can sort and
|
|
66848
|
+
* copy it. Data is drawn on the client only, so a server serves the
|
|
66849
|
+
* frame, and the summary, the keys and the readout are then the whole of
|
|
66850
|
+
* what a screen reader is given. Set a new object to redraw: the chart
|
|
66851
|
+
* does not look inside the one it has. (property only)
|
|
65884
66852
|
* - `series`: The table's columns, one series each. Empty when there is no table.
|
|
65885
66853
|
*
|
|
65886
66854
|
* Held by the controller between edits, so a render reading this five
|
|
@@ -65897,6 +66865,9 @@ export type CustomElementsSolidJs = {
|
|
|
65897
66865
|
* names an element, and the chart is a generic around its plot: written
|
|
65898
66866
|
* on the host, the name reached nobody. The plot takes it, as Heatmap's
|
|
65899
66867
|
* strip always did. (property only) (readonly)
|
|
66868
|
+
* - `readingsKnown`: Whether the readings have been looked for: false on the server and
|
|
66869
|
+
* while hydrating, where no table is resolved and no data is read. A
|
|
66870
|
+
* chart says it has no readings only once this is true. (property only) (readonly)
|
|
65900
66871
|
* - `sourceRows`: Every row of the table, with each cell's text and number.
|
|
65901
66872
|
*
|
|
65902
66873
|
* This is where a tooltip's content comes from, and it is deliberately not
|
|
@@ -65943,6 +66914,13 @@ export type CustomElementsSolidJs = {
|
|
|
65943
66914
|
* - `helix-reading-change`: The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it.
|
|
65944
66915
|
* - `helix-reading-press`: A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`.
|
|
65945
66916
|
*
|
|
66917
|
+
* ## Slots
|
|
66918
|
+
*
|
|
66919
|
+
* Areas where markup can be added to the component.
|
|
66920
|
+
*
|
|
66921
|
+
* - `empty`: Content shown in place of the drawing when the table has no readings, such as a link to add the first. Falls back to `empty-text`.
|
|
66922
|
+
* - `loading`: Content shown in place of the drawing while `loading` is set and there are no readings yet. Falls back to `loading-text`.
|
|
66923
|
+
*
|
|
65946
66924
|
* ## Methods
|
|
65947
66925
|
*
|
|
65948
66926
|
* Methods that can be called to access component functionality.
|
|
@@ -66006,6 +66984,7 @@ export type CustomElementsSolidJs = {
|
|
|
66006
66984
|
* - `bar-wash-end`: The far stop of a bar's gradient, where one is used.
|
|
66007
66985
|
* - `bar-wash-start`: The stop of a bar's gradient at its base.
|
|
66008
66986
|
* - `baseline`: The line the columns stand on.
|
|
66987
|
+
* - `empty`: The words in place of the drawing 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.
|
|
66009
66988
|
* - `gridline`: One gridline across the plot, drawn when `gridlines` is set.
|
|
66010
66989
|
* - `group`: One category's columns, together.
|
|
66011
66990
|
* - `group-active`: The group the tooltip describes. Set together with `group`.
|
|
@@ -66013,6 +66992,7 @@ export type CustomElementsSolidJs = {
|
|
|
66013
66992
|
* - `labels`: The row of category names.
|
|
66014
66993
|
* - `line`: A series drawn as a line, named in `lines`.
|
|
66015
66994
|
* - `live`: The readout: a polite live region that says the reading the keys moved to. Hide it visually.
|
|
66995
|
+
* - `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`.
|
|
66016
66996
|
* - `mark`: The invisible point the tooltip is anchored to.
|
|
66017
66997
|
* - `plot`: The drawing, which takes focus to be read by key.
|
|
66018
66998
|
* - `summary`: The chart's name and each series' highest reading, written as a sentence for screen readers. Hide it visually.
|
|
@@ -66054,10 +67034,31 @@ export type CustomElementsSolidJs = {
|
|
|
66054
67034
|
* set the passage apart. `marks` draws one large opening mark over the passage,
|
|
66055
67035
|
* as a pull quote sets it, in the element's language.
|
|
66056
67036
|
*
|
|
67037
|
+
* `text-align` sets the passage and its attribution in the middle of the
|
|
67038
|
+
* column or against its far edge, as a pull quote often stands. There, the
|
|
67039
|
+
* mark `marks` draws stands over the passage rather than beside it.
|
|
67040
|
+
* `text-wrap="balance"` evens out a short passage's lines.
|
|
67041
|
+
*
|
|
66057
67042
|
* ## Attributes & Properties
|
|
66058
67043
|
*
|
|
66059
67044
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
66060
67045
|
*
|
|
67046
|
+
* - `text-align`/`textAlign`: How the passage and its attribution align, set as `text-align`.
|
|
67047
|
+
*
|
|
67048
|
+
* `center` for a pull quote in the middle of a column and `end` for one
|
|
67049
|
+
* against its far edge. Under either, the mark `marks` draws stands over
|
|
67050
|
+
* the first line. Absent aligns as the prose around it does.
|
|
67051
|
+
*
|
|
67052
|
+
* Named for the CSS property it sets, as `Text.textAlign` is: `align` alone
|
|
67053
|
+
* is a legacy HTML attribute the browser maps to `text-align` by itself,
|
|
67054
|
+
* and it has no `start` or `end`.
|
|
67055
|
+
* - `text-wrap`/`textWrap`: How the passage's lines break, set as `text-wrap`.
|
|
67056
|
+
*
|
|
67057
|
+
* `balance` evens out the length of every line, which suits a pull quote of
|
|
67058
|
+
* a few lines in display type. `pretty` avoids a last line of one short
|
|
67059
|
+
* word, for a longer passage. Absent, the lines break as the browser breaks
|
|
67060
|
+
* them. The same name and values `Text` takes, but `nowrap`, a passage being
|
|
67061
|
+
* more than one line.
|
|
66061
67062
|
* - `attribution`: Who said it, and where, as words, such as "Maria Lopez, operations
|
|
66062
67063
|
* manager". The `attribution` slot replaces them, for markup such as a link.
|
|
66063
67064
|
*
|
|
@@ -72349,8 +73350,14 @@ export type CustomElementsSolidJs = {
|
|
|
72349
73350
|
* `closedby="any"` gains light dismiss without giving up the refusal, which is
|
|
72350
73351
|
* the property this component exists to keep.
|
|
72351
73352
|
*
|
|
73353
|
+
* The press on the backdrop that this element handles itself follows it too:
|
|
73354
|
+
* `closerequest` and `none` leave the dialog open on that press, as the
|
|
73355
|
+
* platform does, and `none` also keeps it open on Escape in a browser without
|
|
73356
|
+
* `closedby`.
|
|
73357
|
+
*
|
|
72352
73358
|
* Absent by default, which is the platform's `auto` and this library's rule
|
|
72353
|
-
* that a resting value is an attribute's absence.
|
|
73359
|
+
* that a resting value is an attribute's absence. Absent, a press on the
|
|
73360
|
+
* backdrop closes the dialog.
|
|
72354
73361
|
* - `dismissible`: Draws a control that closes the dialog, in the corner where the title is.
|
|
72355
73362
|
*
|
|
72356
73363
|
* Pressing it is `close()`, so it sends `helix-before-close` like every other
|
|
@@ -72723,6 +73730,28 @@ export type CustomElementsSolidJs = {
|
|
|
72723
73730
|
* cannot be cast onto across unrelated classes, so it would be invisible to
|
|
72724
73731
|
* every chart that needs it. Reading where a pointer is resting is a fair
|
|
72725
73732
|
* thing to ask a chart anyway. (property only) (readonly)
|
|
73733
|
+
* - `data`: The readings as data, in the shape of a table, where the page has no
|
|
73734
|
+
* table to point `for` at. `for` wins where both are set.
|
|
73735
|
+
*
|
|
73736
|
+
* ```js
|
|
73737
|
+
* chart.data = {
|
|
73738
|
+
* caption: 'Sessions by channel',
|
|
73739
|
+
* columns: ['Month', 'Direct', 'Referral'],
|
|
73740
|
+
* rows: [['Jan', 10, 4], ['Feb', 20, 8]],
|
|
73741
|
+
* }
|
|
73742
|
+
* ```
|
|
73743
|
+
*
|
|
73744
|
+
* The first column holds each row's label and every column after it a
|
|
73745
|
+
* series, as in a table. A cell is a number, words, `null` for a blank,
|
|
73746
|
+
* or `{ value, text }` for a number shown as words, such as `$128k`. A
|
|
73747
|
+
* number is shown in `locale`.
|
|
73748
|
+
*
|
|
73749
|
+
* **A table is still the better source where the page can show one**:
|
|
73750
|
+
* it reads with no script and before hydration, and a reader can sort and
|
|
73751
|
+
* copy it. Data is drawn on the client only, so a server serves the
|
|
73752
|
+
* frame, and the summary, the keys and the readout are then the whole of
|
|
73753
|
+
* what a screen reader is given. Set a new object to redraw: the chart
|
|
73754
|
+
* does not look inside the one it has. (property only)
|
|
72726
73755
|
* - `series`: The table's columns, one series each. Empty when there is no table.
|
|
72727
73756
|
*
|
|
72728
73757
|
* Held by the controller between edits, so a render reading this five
|
|
@@ -72739,6 +73768,9 @@ export type CustomElementsSolidJs = {
|
|
|
72739
73768
|
* names an element, and the chart is a generic around its plot: written
|
|
72740
73769
|
* on the host, the name reached nobody. The plot takes it, as Heatmap's
|
|
72741
73770
|
* strip always did. (property only) (readonly)
|
|
73771
|
+
* - `readingsKnown`: Whether the readings have been looked for: false on the server and
|
|
73772
|
+
* while hydrating, where no table is resolved and no data is read. A
|
|
73773
|
+
* chart says it has no readings only once this is true. (property only) (readonly)
|
|
72742
73774
|
* - `sourceRows`: Every row of the table, with each cell's text and number.
|
|
72743
73775
|
*
|
|
72744
73776
|
* This is where a tooltip's content comes from, and it is deliberately not
|
|
@@ -72946,6 +73978,11 @@ export type CustomElementsSolidJs = {
|
|
|
72946
73978
|
* lost its focus trap because a consumer forgot a word would be worse than an
|
|
72947
73979
|
* attribute on the host, and nothing selects on it: the scrim is rendered or
|
|
72948
73980
|
* not, rather than shown or hidden by CSS.
|
|
73981
|
+
* - `persistent`: Stops Escape, a press outside, and a swipe from closing the drawer, for a
|
|
73982
|
+
* drawer that has to be answered.
|
|
73983
|
+
*
|
|
73984
|
+
* The close control and `close()` still close it, as on `Dialog`: a panel
|
|
73985
|
+
* with no way out at all is a trap.
|
|
72949
73986
|
* - `placement`: Which edge the drawer comes from.
|
|
72950
73987
|
*
|
|
72951
73988
|
* Unset is `end`, and it stays unset rather than being written down: a
|
|
@@ -75248,6 +76285,28 @@ export type CustomElementsSolidJs = {
|
|
|
75248
76285
|
* cannot be cast onto across unrelated classes, so it would be invisible to
|
|
75249
76286
|
* every chart that needs it. Reading where a pointer is resting is a fair
|
|
75250
76287
|
* thing to ask a chart anyway. (property only) (readonly)
|
|
76288
|
+
* - `data`: The readings as data, in the shape of a table, where the page has no
|
|
76289
|
+
* table to point `for` at. `for` wins where both are set.
|
|
76290
|
+
*
|
|
76291
|
+
* ```js
|
|
76292
|
+
* chart.data = {
|
|
76293
|
+
* caption: 'Sessions by channel',
|
|
76294
|
+
* columns: ['Month', 'Direct', 'Referral'],
|
|
76295
|
+
* rows: [['Jan', 10, 4], ['Feb', 20, 8]],
|
|
76296
|
+
* }
|
|
76297
|
+
* ```
|
|
76298
|
+
*
|
|
76299
|
+
* The first column holds each row's label and every column after it a
|
|
76300
|
+
* series, as in a table. A cell is a number, words, `null` for a blank,
|
|
76301
|
+
* or `{ value, text }` for a number shown as words, such as `$128k`. A
|
|
76302
|
+
* number is shown in `locale`.
|
|
76303
|
+
*
|
|
76304
|
+
* **A table is still the better source where the page can show one**:
|
|
76305
|
+
* it reads with no script and before hydration, and a reader can sort and
|
|
76306
|
+
* copy it. Data is drawn on the client only, so a server serves the
|
|
76307
|
+
* frame, and the summary, the keys and the readout are then the whole of
|
|
76308
|
+
* what a screen reader is given. Set a new object to redraw: the chart
|
|
76309
|
+
* does not look inside the one it has. (property only)
|
|
75251
76310
|
* - `series`: The table's columns, one series each. Empty when there is no table.
|
|
75252
76311
|
*
|
|
75253
76312
|
* Held by the controller between edits, so a render reading this five
|
|
@@ -75264,6 +76323,9 @@ export type CustomElementsSolidJs = {
|
|
|
75264
76323
|
* names an element, and the chart is a generic around its plot: written
|
|
75265
76324
|
* on the host, the name reached nobody. The plot takes it, as Heatmap's
|
|
75266
76325
|
* strip always did. (property only) (readonly)
|
|
76326
|
+
* - `readingsKnown`: Whether the readings have been looked for: false on the server and
|
|
76327
|
+
* while hydrating, where no table is resolved and no data is read. A
|
|
76328
|
+
* chart says it has no readings only once this is true. (property only) (readonly)
|
|
75267
76329
|
* - `sourceRows`: Every row of the table, with each cell's text and number.
|
|
75268
76330
|
*
|
|
75269
76331
|
* This is where a tooltip's content comes from, and it is deliberately not
|
|
@@ -76980,6 +78042,16 @@ export type CustomElementsSolidJs = {
|
|
|
76980
78042
|
* **`transparent` is where this one stops.** A mark with no ink is not a
|
|
76981
78043
|
* material choice, it is an absent series, and a chart says that by not
|
|
76982
78044
|
* having the datum rather than by painting it invisibly.
|
|
78045
|
+
* - `empty-text`/`emptyText`: The words shown in place of the drawing when the table has no readings,
|
|
78046
|
+
* and the fallback of the `empty` slot.
|
|
78047
|
+
* - `loading`: Whether the readings are still on their way. The chart shows
|
|
78048
|
+
* `loading-text` in place of an empty drawing until it has readings.
|
|
78049
|
+
*
|
|
78050
|
+
* Reflected, so a stylesheet can treat the chart while it waits. A chart
|
|
78051
|
+
* that already has readings keeps drawing them, so a refresh does not
|
|
78052
|
+
* blank it.
|
|
78053
|
+
* - `loading-text`/`loadingText`: The words shown in place of the drawing while `loading` is set and
|
|
78054
|
+
* there are no readings yet, and the fallback of the `loading` slot.
|
|
76983
78055
|
* - `for`: The id of the table to read.
|
|
76984
78056
|
*
|
|
76985
78057
|
* Names a table in the same tree, so a chart inside another component's
|
|
@@ -77116,6 +78188,28 @@ export type CustomElementsSolidJs = {
|
|
|
77116
78188
|
* cannot be cast onto across unrelated classes, so it would be invisible to
|
|
77117
78189
|
* every chart that needs it. Reading where a pointer is resting is a fair
|
|
77118
78190
|
* thing to ask a chart anyway. (property only) (readonly)
|
|
78191
|
+
* - `data`: The readings as data, in the shape of a table, where the page has no
|
|
78192
|
+
* table to point `for` at. `for` wins where both are set.
|
|
78193
|
+
*
|
|
78194
|
+
* ```js
|
|
78195
|
+
* chart.data = {
|
|
78196
|
+
* caption: 'Sessions by channel',
|
|
78197
|
+
* columns: ['Month', 'Direct', 'Referral'],
|
|
78198
|
+
* rows: [['Jan', 10, 4], ['Feb', 20, 8]],
|
|
78199
|
+
* }
|
|
78200
|
+
* ```
|
|
78201
|
+
*
|
|
78202
|
+
* The first column holds each row's label and every column after it a
|
|
78203
|
+
* series, as in a table. A cell is a number, words, `null` for a blank,
|
|
78204
|
+
* or `{ value, text }` for a number shown as words, such as `$128k`. A
|
|
78205
|
+
* number is shown in `locale`.
|
|
78206
|
+
*
|
|
78207
|
+
* **A table is still the better source where the page can show one**:
|
|
78208
|
+
* it reads with no script and before hydration, and a reader can sort and
|
|
78209
|
+
* copy it. Data is drawn on the client only, so a server serves the
|
|
78210
|
+
* frame, and the summary, the keys and the readout are then the whole of
|
|
78211
|
+
* what a screen reader is given. Set a new object to redraw: the chart
|
|
78212
|
+
* does not look inside the one it has. (property only)
|
|
77119
78213
|
* - `series`: The table's columns, one series each. Empty when there is no table.
|
|
77120
78214
|
*
|
|
77121
78215
|
* Held by the controller between edits, so a render reading this five
|
|
@@ -77132,6 +78226,9 @@ export type CustomElementsSolidJs = {
|
|
|
77132
78226
|
* names an element, and the chart is a generic around its plot: written
|
|
77133
78227
|
* on the host, the name reached nobody. The plot takes it, as Heatmap's
|
|
77134
78228
|
* strip always did. (property only) (readonly)
|
|
78229
|
+
* - `readingsKnown`: Whether the readings have been looked for: false on the server and
|
|
78230
|
+
* while hydrating, where no table is resolved and no data is read. A
|
|
78231
|
+
* chart says it has no readings only once this is true. (property only) (readonly)
|
|
77135
78232
|
* - `sourceRows`: Every row of the table, with each cell's text and number.
|
|
77136
78233
|
*
|
|
77137
78234
|
* This is where a tooltip's content comes from, and it is deliberately not
|
|
@@ -77178,6 +78275,13 @@ export type CustomElementsSolidJs = {
|
|
|
77178
78275
|
* - `helix-reading-change`: The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it.
|
|
77179
78276
|
* - `helix-reading-press`: A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`.
|
|
77180
78277
|
*
|
|
78278
|
+
* ## Slots
|
|
78279
|
+
*
|
|
78280
|
+
* Areas where markup can be added to the component.
|
|
78281
|
+
*
|
|
78282
|
+
* - `empty`: Content shown in place of the drawing when the table has no readings, such as a link to add the first. Falls back to `empty-text`.
|
|
78283
|
+
* - `loading`: Content shown in place of the drawing while `loading` is set and there are no readings yet. Falls back to `loading-text`.
|
|
78284
|
+
*
|
|
77181
78285
|
* ## Methods
|
|
77182
78286
|
*
|
|
77183
78287
|
* Methods that can be called to access component functionality.
|
|
@@ -77242,6 +78346,7 @@ export type CustomElementsSolidJs = {
|
|
|
77242
78346
|
* - `axis`: The numbers of the scale beside the plot, under `value-axis`.
|
|
77243
78347
|
* - `band`: The band around the reading under the pointer.
|
|
77244
78348
|
* - `baseline`: The rule at zero, where zero is inside the range.
|
|
78349
|
+
* - `empty`: The words in place of the drawing 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.
|
|
77245
78350
|
* - `gridline`: One rule across the plot, under `gridlines`.
|
|
77246
78351
|
* - `guide`: A rule down the reading a pointer is resting on.
|
|
77247
78352
|
* - `label`: One reading's name.
|
|
@@ -77249,6 +78354,7 @@ export type CustomElementsSolidJs = {
|
|
|
77249
78354
|
* - `line`: The line for one series.
|
|
77250
78355
|
* - `line-dashed`: A `line` whose series `dashed` names. Set alongside `line`.
|
|
77251
78356
|
* - `live`: The readout: a polite live region that says the reading the keys moved to. Hide it visually.
|
|
78357
|
+
* - `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`.
|
|
77252
78358
|
* - `mark`: The invisible point the tooltip is anchored to.
|
|
77253
78359
|
* - `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`.
|
|
77254
78360
|
* - `marker-lone`: A `marker` on a reading with a blank on either side, which no line reaches. Set alongside `marker`.
|
|
@@ -81404,6 +82510,12 @@ export type CustomElementsSolidJs = {
|
|
|
81404
82510
|
* Off by default, because the name and the busy state already change with
|
|
81405
82511
|
* the state, and an orb beside a stream of messages would otherwise talk
|
|
81406
82512
|
* over them. Set it on an orb that is the only sign of progress on the page.
|
|
82513
|
+
*
|
|
82514
|
+
* **Without it, finishing is silent.** `done` turns the orb into an image
|
|
82515
|
+
* named "Done" that is no longer busy, which a screen reader reports when it
|
|
82516
|
+
* next reaches the orb and does not say as it happens. A page whose own
|
|
82517
|
+
* result arrives in a live region, such as a chat reply, already says the
|
|
82518
|
+
* work is done; one that shows nothing else sets `announce`.
|
|
81407
82519
|
* - `label`: The name read by screen readers. Defaults to the name of the state, such
|
|
81408
82520
|
* as "Thinking".
|
|
81409
82521
|
*
|
|
@@ -82544,7 +83656,8 @@ export type CustomElementsSolidJs = {
|
|
|
82544
83656
|
*
|
|
82545
83657
|
* A `percent` style writes the share of the range, and any other the value
|
|
82546
83658
|
* itself, so the example says "18 GB". Absent is a whole percentage. The
|
|
82547
|
-
* words are announced
|
|
83659
|
+
* words are announced whether or not `show-value` shows them. `value-text`
|
|
83660
|
+
* still wins.
|
|
82548
83661
|
* - `indeterminate`: Whether the length of the task is unknown. The bar then shows activity
|
|
82549
83662
|
* without a value.
|
|
82550
83663
|
*
|
|
@@ -82633,6 +83746,7 @@ export type CustomElementsSolidJs = {
|
|
|
82633
83746
|
*
|
|
82634
83747
|
* Areas where markup can be added to the component.
|
|
82635
83748
|
*
|
|
83749
|
+
* - `(default)`: Words drawn on the bar, or in the middle of a ring, such as the reading. The bar grows to their height, and over the fill they take the fill's own ink.
|
|
82636
83750
|
* - `label`: A visible label, above a bar and under a ring. Its words name it in place of `label`.
|
|
82637
83751
|
*
|
|
82638
83752
|
* ## CSS Custom Properties
|
|
@@ -82640,6 +83754,9 @@ export type CustomElementsSolidJs = {
|
|
|
82640
83754
|
* CSS variables available for styling the component.
|
|
82641
83755
|
*
|
|
82642
83756
|
* - `--progress-color`: Fill of the part that is done.
|
|
83757
|
+
* - `--progress-content-color`: The color of the words of the default slot where they are over the track, and in a ring.
|
|
83758
|
+
* - `--progress-content-fill-color`: The color of the words of the default slot where they are over the fill.
|
|
83759
|
+
* - `--progress-content-size`: The type size of the words of the default slot.
|
|
82643
83760
|
* - `--progress-label-color`: Color of a slotted label.
|
|
82644
83761
|
* - `--progress-label-gap`: Space between a slotted label and the bar.
|
|
82645
83762
|
* - `--progress-label-size`: Type size of a slotted label.
|
|
@@ -82658,6 +83775,7 @@ export type CustomElementsSolidJs = {
|
|
|
82658
83775
|
*
|
|
82659
83776
|
* Custom selectors for styling elements within the component.
|
|
82660
83777
|
*
|
|
83778
|
+
* - `content`: The box holding the words of the default slot, over the track or in the middle of the ring. Carries `--progress-fraction`.
|
|
82661
83779
|
* - `groove`: The unfilled circle under the ring's filled arc.
|
|
82662
83780
|
* - `indicator`: The filled part that shows the work done.
|
|
82663
83781
|
* - `live`: A polite region that says `complete-label` when the work is done, rendered from that moment. Hide it visually.
|
|
@@ -82669,6 +83787,7 @@ export type CustomElementsSolidJs = {
|
|
|
82669
83787
|
* These can be used to apply styling when a component is in a given state.
|
|
82670
83788
|
*
|
|
82671
83789
|
* - `complete`: The value is at `max` and the bar is not indeterminate.
|
|
83790
|
+
* - `content`: Words are set in the default slot.
|
|
82672
83791
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
82673
83792
|
*/
|
|
82674
83793
|
"helix-progress": Partial<
|
|
@@ -84290,6 +85409,16 @@ export type CustomElementsSolidJs = {
|
|
|
84290
85409
|
*
|
|
84291
85410
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
84292
85411
|
*
|
|
85412
|
+
* - `empty-text`/`emptyText`: The words shown in place of the drawing when the table has no readings,
|
|
85413
|
+
* and the fallback of the `empty` slot.
|
|
85414
|
+
* - `loading`: Whether the readings are still on their way. The chart shows
|
|
85415
|
+
* `loading-text` in place of an empty drawing until it has readings.
|
|
85416
|
+
*
|
|
85417
|
+
* Reflected, so a stylesheet can treat the chart while it waits. A chart
|
|
85418
|
+
* that already has readings keeps drawing them, so a refresh does not
|
|
85419
|
+
* blank it.
|
|
85420
|
+
* - `loading-text`/`loadingText`: The words shown in place of the drawing while `loading` is set and
|
|
85421
|
+
* there are no readings yet, and the fallback of the `loading` slot.
|
|
84293
85422
|
* - `for`: The id of the table to read.
|
|
84294
85423
|
*
|
|
84295
85424
|
* Names a table in the same tree, so a chart inside another component's
|
|
@@ -84351,6 +85480,28 @@ export type CustomElementsSolidJs = {
|
|
|
84351
85480
|
* cannot be cast onto across unrelated classes, so it would be invisible to
|
|
84352
85481
|
* every chart that needs it. Reading where a pointer is resting is a fair
|
|
84353
85482
|
* thing to ask a chart anyway. (property only) (readonly)
|
|
85483
|
+
* - `data`: The readings as data, in the shape of a table, where the page has no
|
|
85484
|
+
* table to point `for` at. `for` wins where both are set.
|
|
85485
|
+
*
|
|
85486
|
+
* ```js
|
|
85487
|
+
* chart.data = {
|
|
85488
|
+
* caption: 'Sessions by channel',
|
|
85489
|
+
* columns: ['Month', 'Direct', 'Referral'],
|
|
85490
|
+
* rows: [['Jan', 10, 4], ['Feb', 20, 8]],
|
|
85491
|
+
* }
|
|
85492
|
+
* ```
|
|
85493
|
+
*
|
|
85494
|
+
* The first column holds each row's label and every column after it a
|
|
85495
|
+
* series, as in a table. A cell is a number, words, `null` for a blank,
|
|
85496
|
+
* or `{ value, text }` for a number shown as words, such as `$128k`. A
|
|
85497
|
+
* number is shown in `locale`.
|
|
85498
|
+
*
|
|
85499
|
+
* **A table is still the better source where the page can show one**:
|
|
85500
|
+
* it reads with no script and before hydration, and a reader can sort and
|
|
85501
|
+
* copy it. Data is drawn on the client only, so a server serves the
|
|
85502
|
+
* frame, and the summary, the keys and the readout are then the whole of
|
|
85503
|
+
* what a screen reader is given. Set a new object to redraw: the chart
|
|
85504
|
+
* does not look inside the one it has. (property only)
|
|
84354
85505
|
* - `series`: The table's columns, one series each. Empty when there is no table.
|
|
84355
85506
|
*
|
|
84356
85507
|
* Held by the controller between edits, so a render reading this five
|
|
@@ -84367,6 +85518,9 @@ export type CustomElementsSolidJs = {
|
|
|
84367
85518
|
* names an element, and the chart is a generic around its plot: written
|
|
84368
85519
|
* on the host, the name reached nobody. The plot takes it, as Heatmap's
|
|
84369
85520
|
* strip always did. (property only) (readonly)
|
|
85521
|
+
* - `readingsKnown`: Whether the readings have been looked for: false on the server and
|
|
85522
|
+
* while hydrating, where no table is resolved and no data is read. A
|
|
85523
|
+
* chart says it has no readings only once this is true. (property only) (readonly)
|
|
84370
85524
|
* - `sourceRows`: Every row of the table, with each cell's text and number.
|
|
84371
85525
|
*
|
|
84372
85526
|
* This is where a tooltip's content comes from, and it is deliberately not
|
|
@@ -84413,6 +85567,13 @@ export type CustomElementsSolidJs = {
|
|
|
84413
85567
|
* - `helix-reading-change`: The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it.
|
|
84414
85568
|
* - `helix-reading-press`: A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`.
|
|
84415
85569
|
*
|
|
85570
|
+
* ## Slots
|
|
85571
|
+
*
|
|
85572
|
+
* Areas where markup can be added to the component.
|
|
85573
|
+
*
|
|
85574
|
+
* - `empty`: Content shown in place of the drawing when the table has no readings, such as a link to add the first. Falls back to `empty-text`.
|
|
85575
|
+
* - `loading`: Content shown in place of the drawing while `loading` is set and there are no readings yet. Falls back to `loading-text`.
|
|
85576
|
+
*
|
|
84416
85577
|
* ## Methods
|
|
84417
85578
|
*
|
|
84418
85579
|
* Methods that can be called to access component functionality.
|
|
@@ -84471,8 +85632,10 @@ export type CustomElementsSolidJs = {
|
|
|
84471
85632
|
*
|
|
84472
85633
|
* Custom selectors for styling elements within the component.
|
|
84473
85634
|
*
|
|
85635
|
+
* - `empty`: The words in place of the drawing 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.
|
|
84474
85636
|
* - `gridline`: One line across the plot, drawn when `gridlines` is set.
|
|
84475
85637
|
* - `live`: The readout: a polite live region that says the row the keys moved to. Hide it visually.
|
|
85638
|
+
* - `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`.
|
|
84476
85639
|
* - `mark`: The invisible point the tooltip is anchored to.
|
|
84477
85640
|
* - `plane`: The grid that holds the plot, both axes, and their names. It runs left to right on every page.
|
|
84478
85641
|
* - `plot`: The drawing, which takes focus to be read by key.
|
|
@@ -86126,6 +87289,8 @@ export type CustomElementsSolidJs = {
|
|
|
86126
87289
|
* Reading gives where it is; writing declares it the consumer's, and
|
|
86127
87290
|
* `default-position` seeds one this element owns. The same accessor pair
|
|
86128
87291
|
* `Pagination.page` and the calendar's `month` carry.
|
|
87292
|
+
* - `primary`: The pane that keeps its size when the splitter's own size changes. The
|
|
87293
|
+
* other pane takes all of the change. Unset, both keep their share.
|
|
86129
87294
|
* - `snap`: Where a dragged divider snaps, comma separated, as Web Awesome's split
|
|
86130
87295
|
* panel does: a bare number is a percentage and a length such as `240px` is
|
|
86131
87296
|
* measured along the splitter, so `snap="25, 50, 75"` or `snap="240px, 50"`.
|
|
@@ -86541,7 +87706,14 @@ export type CustomElementsSolidJs = {
|
|
|
86541
87706
|
>;
|
|
86542
87707
|
|
|
86543
87708
|
/**
|
|
87709
|
+
* A step draws its mark, its name as a `helix-button`, and the line that joins
|
|
87710
|
+
* it to the steps either side. The mark is a tick on a finished step, a dot
|
|
87711
|
+
* on the current one, and an empty ring on one nobody has reached. Where the
|
|
87712
|
+
* list sets `variant="numeric"`, it is the step's number.
|
|
86544
87713
|
*
|
|
87714
|
+
* Down a column, the current step opens to show what is in its `content` slot,
|
|
87715
|
+
* and the others collapse it. A collapsed stage's content is hidden, so Tab and
|
|
87716
|
+
* a screen reader pass over it as well.
|
|
86545
87717
|
*
|
|
86546
87718
|
* ## Attributes & Properties
|
|
86547
87719
|
*
|
|
@@ -93682,6 +94854,12 @@ export type CustomCssProperties = {
|
|
|
93682
94854
|
"--popover-shadow"?: (string) | undefined;
|
|
93683
94855
|
/** Fill of the part that is done. */
|
|
93684
94856
|
"--progress-color"?: (string) | undefined;
|
|
94857
|
+
/** The color of the words of the default slot where they are over the track, and in a ring. */
|
|
94858
|
+
"--progress-content-color"?: (string) | undefined;
|
|
94859
|
+
/** The color of the words of the default slot where they are over the fill. */
|
|
94860
|
+
"--progress-content-fill-color"?: (string) | undefined;
|
|
94861
|
+
/** The type size of the words of the default slot. */
|
|
94862
|
+
"--progress-content-size"?: (string) | undefined;
|
|
93685
94863
|
/** Color of a slotted label. */
|
|
93686
94864
|
"--progress-label-color"?: (string) | undefined;
|
|
93687
94865
|
/** Space between a slotted label and the bar. */
|