@fusion.dev/helix-headless 0.150.0 → 0.151.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.
Files changed (40) hide show
  1. package/custom-elements.json +741 -66
  2. package/dist/area-chart/root/area-chart-root.d.ts +36 -0
  3. package/dist/area-chart/root/area-chart-root.js +17 -2
  4. package/dist/bar-chart/root/bar-chart-root.d.ts +28 -4
  5. package/dist/bar-chart/root/bar-chart-root.js +17 -4
  6. package/dist/callout/root/callout-root.d.ts +20 -0
  7. package/dist/callout/root/callout-root.js +19 -4
  8. package/dist/chat/composer/chat-composer.d.ts +30 -0
  9. package/dist/chat/composer/chat-composer.js +47 -2
  10. package/dist/chat/root/chat-root.d.ts +10 -0
  11. package/dist/chat/root/chat-root.js +14 -0
  12. package/dist/data-table/root/data-table-root.d.ts +34 -2
  13. package/dist/data-table/root/data-table-root.js +63 -2
  14. package/dist/divider/root/divider-root.d.ts +8 -6
  15. package/dist/divider/root/divider-root.js +10 -2
  16. package/dist/element-events.generated.js +4 -0
  17. package/dist/kbd/root/kbd-root.d.ts +7 -1
  18. package/dist/kbd/root/kbd-root.js +8 -4
  19. package/dist/line-chart/root/line-chart-root.d.ts +36 -0
  20. package/dist/line-chart/root/line-chart-root.js +15 -2
  21. package/dist/scatter-chart/root/scatter-chart-root.d.ts +18 -0
  22. package/dist/scatter-chart/root/scatter-chart-root.js +38 -15
  23. package/dist/table/column/table-column.js +3 -2
  24. package/dist/table/grid-controller.d.ts +14 -2
  25. package/dist/table/grid-controller.js +27 -1
  26. package/dist/table/root/table-root.d.ts +30 -4
  27. package/dist/table/root/table-root.js +45 -7
  28. package/dist/table/row/table-row.d.ts +12 -2
  29. package/dist/table/row/table-row.js +8 -2
  30. package/dist/video/root/video-root.d.ts +6 -0
  31. package/dist/video/root/video-root.js +5 -1
  32. package/dist/video-playlist/root/video-playlist-root.d.ts +4 -0
  33. package/dist/video-playlist/root/video-playlist-root.js +4 -1
  34. package/dist/virtual-list/root/virtual-list-root.d.ts +23 -1
  35. package/dist/virtual-list/root/virtual-list-root.js +21 -2
  36. package/lint.json +1 -1
  37. package/package.json +5 -5
  38. package/types/jsx.d.ts +648 -98
  39. package/types/vue.d.ts +195 -43
  40. package/types/words.d.ts +4 -2
package/types/vue.d.ts CHANGED
@@ -175,6 +175,8 @@ import type {
175
175
  ToggleEvent,
176
176
  HelixDismissEvent,
177
177
  HelixScrolledEvent,
178
+ HelixReadingChangeEvent,
179
+ HelixReadingPressEvent,
178
180
  HelixBeforeChangeEvent,
179
181
  HelixPressEvent,
180
182
  HelixBeforeMoveEvent,
@@ -571,6 +573,18 @@ export type HelixHeadlessAppHeaderVueEvents = {
571
573
  "helix-scrolled": HelixHeadlessAppHeaderHelixScrolledElementEvent;
572
574
  };
573
575
 
576
+ /** `HelixHeadlessAreaChart` component event */
577
+ export type HelixHeadlessAreaChartElementEvent<E = Event> = TypedEvent<
578
+ HelixHeadlessAreaChart,
579
+ E
580
+ >;
581
+ /** `helix-reading-change` event type */
582
+ export type HelixHeadlessAreaChartHelixReadingChangeElementEvent =
583
+ HelixHeadlessAreaChartElementEvent<HelixReadingChangeEvent>;
584
+ /** `helix-reading-press` event type */
585
+ export type HelixHeadlessAreaChartHelixReadingPressElementEvent =
586
+ HelixHeadlessAreaChartElementEvent<HelixReadingPressEvent>;
587
+
574
588
  export type HelixHeadlessAreaChartVueProps = {
575
589
  /** How a band's edge gets from one reading to the next.
576
590
 
@@ -621,6 +635,18 @@ locale, and `{shares}` each part's share, listed as the locale lists. */
621
635
  "total-label"?: (HelixHeadlessAreaChart["totalLabel"]) | undefined;
622
636
  /** The name for the sum of the parts, shown in the tooltip and the summary. */
623
637
  totalLabel?: (HelixHeadlessAreaChart["totalLabel"]) | undefined;
638
+ /** Draws the scale's numbers beside the plot, the `axis` part, at the levels
639
+ `gridlines` rules: amounts, or percentages under `share`.
640
+
641
+ Absent draws none: bands read as a composition need no numbers beside
642
+ them, and the tooltip and the table hold every reading. */
643
+ "value-axis"?: (HelixHeadlessAreaChart["valueAxis"]) | undefined;
644
+ /** Draws the scale's numbers beside the plot, the `axis` part, at the levels
645
+ `gridlines` rules: amounts, or percentages under `share`.
646
+
647
+ Absent draws none: bands read as a composition need no numbers beside
648
+ them, and the tooltip and the table hold every reading. */
649
+ valueAxis?: (HelixHeadlessAreaChart["valueAxis"]) | undefined;
624
650
  /** The id of the table to read.
625
651
 
626
652
  Names a table in the same tree, so a chart inside another component's
@@ -659,7 +685,12 @@ legend hid is not counted. */
659
685
  positionLabel?: (HelixHeadlessAreaChart["positionLabel"]) | undefined;
660
686
  };
661
687
 
662
- export type HelixHeadlessAreaChartVueEvents = {};
688
+ export type HelixHeadlessAreaChartVueEvents = {
689
+ /** 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. */
690
+ "helix-reading-change": HelixHeadlessAreaChartHelixReadingChangeElementEvent;
691
+ /** A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`. */
692
+ "helix-reading-press": HelixHeadlessAreaChartHelixReadingPressElementEvent;
693
+ };
663
694
 
664
695
  export type HelixHeadlessAvatarGroupVueProps = {
665
696
  /** Accessible name for the set, such as "Reviewers". */
@@ -818,6 +849,18 @@ is showing a count must not lose the count for being handed one. */
818
849
 
819
850
  export type HelixHeadlessBadgeVueEvents = {};
820
851
 
852
+ /** `HelixHeadlessBarChart` component event */
853
+ export type HelixHeadlessBarChartElementEvent<E = Event> = TypedEvent<
854
+ HelixHeadlessBarChart,
855
+ E
856
+ >;
857
+ /** `helix-reading-change` event type */
858
+ export type HelixHeadlessBarChartHelixReadingChangeElementEvent =
859
+ HelixHeadlessBarChartElementEvent<HelixReadingChangeEvent>;
860
+ /** `helix-reading-press` event type */
861
+ export type HelixHeadlessBarChartHelixReadingPressElementEvent =
862
+ HelixHeadlessBarChartElementEvent<HelixReadingPressEvent>;
863
+
821
864
  export type HelixHeadlessBarChartVueProps = {
822
865
  /** Which gridlines are drawn across the plot, if any.
823
866
 
@@ -928,6 +971,20 @@ the reading as the table writes it. */
928
971
  `{readings}` each series' highest reading: the series, the category and
929
972
  the reading as the table writes it. */
930
973
  summaryLabel?: (HelixHeadlessBarChart["summaryLabel"]) | undefined;
974
+ /** Draws the numbers of the scale the bars are measured on, the `axis` part,
975
+ at the levels `gridlines` rules: down the side of columns, and along the
976
+ bottom of bars under `orientation="horizontal"`.
977
+
978
+ Absent draws none with one scale, since bars compared with each other need
979
+ no numbers. With `secondary` both scales are drawn whatever this says. */
980
+ "value-axis"?: (HelixHeadlessBarChart["valueAxis"]) | undefined;
981
+ /** Draws the numbers of the scale the bars are measured on, the `axis` part,
982
+ at the levels `gridlines` rules: down the side of columns, and along the
983
+ bottom of bars under `orientation="horizontal"`.
984
+
985
+ Absent draws none with one scale, since bars compared with each other need
986
+ no numbers. With `secondary` both scales are drawn whatever this says. */
987
+ valueAxis?: (HelixHeadlessBarChart["valueAxis"]) | undefined;
931
988
  /** The id of the table to read.
932
989
 
933
990
  Names a table in the same tree, so a chart inside another component's
@@ -966,7 +1023,12 @@ legend hid is not counted. */
966
1023
  positionLabel?: (HelixHeadlessBarChart["positionLabel"]) | undefined;
967
1024
  };
968
1025
 
969
- export type HelixHeadlessBarChartVueEvents = {};
1026
+ export type HelixHeadlessBarChartVueEvents = {
1027
+ /** 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. */
1028
+ "helix-reading-change": HelixHeadlessBarChartHelixReadingChangeElementEvent;
1029
+ /** A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`. */
1030
+ "helix-reading-press": HelixHeadlessBarChartHelixReadingPressElementEvent;
1031
+ };
970
1032
 
971
1033
  export type HelixHeadlessBlockquoteVueProps = {
972
1034
  /** Who said it, and where, as words, such as "Maria Lopez, operations
@@ -1311,6 +1373,22 @@ export type HelixHeadlessCalloutHelixDismissElementEvent =
1311
1373
  HelixHeadlessCalloutElementEvent<HelixDismissEvent>;
1312
1374
 
1313
1375
  export type HelixHeadlessCalloutVueProps = {
1376
+ /** The dismiss button's name, read by screen readers, with `{label}` for
1377
+ what the callout is called: its heading, or the tone's name where it has
1378
+ none.
1379
+
1380
+ "Dismiss Scheduled maintenance" says which of several callouts the button
1381
+ takes away, where every button was "Dismiss". A label without `{label}` is
1382
+ read as written. */
1383
+ "dismiss-label"?: (HelixHeadlessCallout["dismissLabel"]) | undefined;
1384
+ /** The dismiss button's name, read by screen readers, with `{label}` for
1385
+ what the callout is called: its heading, or the tone's name where it has
1386
+ none.
1387
+
1388
+ "Dismiss Scheduled maintenance" says which of several callouts the button
1389
+ takes away, where every button was "Dismiss". A label without `{label}` is
1390
+ read as written. */
1391
+ dismissLabel?: (HelixHeadlessCallout["dismissLabel"]) | undefined;
1314
1392
  /** What kind of attention the passage needs.
1315
1393
 
1316
1394
  `tone` is the axis for what a thing means, and this is a subset of it: a
@@ -1344,28 +1422,6 @@ out keeps its English, and `tone-label` wins over both.
1344
1422
  toneLabels?: (HelixHeadlessCallout["toneLabels"]) | undefined;
1345
1423
  /** Whether the element shows a control that dismisses it. */
1346
1424
  dismissible?: (HelixHeadlessCallout["dismissible"]) | undefined;
1347
- /** The dismiss control's label, read by screen readers.
1348
-
1349
- `attribute` is spelled out because Lit lowercases a property name to
1350
- derive one rather than dash-casing it, so this would otherwise be
1351
- reachable only as `dismisslabel`, which nobody would guess and no linter
1352
- would catch.
1353
-
1354
- A word property: register it for a locale under the host's key. A family
1355
- that names the control otherwise, such as Tag's `Remove {label}`,
1356
- declares its own English with `@words` above the override. */
1357
- "dismiss-label"?: (HelixHeadlessCallout["dismissLabel"]) | undefined;
1358
- /** The dismiss control's label, read by screen readers.
1359
-
1360
- `attribute` is spelled out because Lit lowercases a property name to
1361
- derive one rather than dash-casing it, so this would otherwise be
1362
- reachable only as `dismisslabel`, which nobody would guess and no linter
1363
- would catch.
1364
-
1365
- A word property: register it for a locale under the host's key. A family
1366
- that names the control otherwise, such as Tag's `Remove {label}`,
1367
- declares its own English with `@words` above the override. */
1368
- dismissLabel?: (HelixHeadlessCallout["dismissLabel"]) | undefined;
1369
1425
  };
1370
1426
 
1371
1427
  export type HelixHeadlessCalloutVueEvents = {
@@ -2304,8 +2360,21 @@ export type HelixHeadlessChatComposerHelixTypingElementEvent =
2304
2360
  export type HelixHeadlessChatComposerVueProps = {
2305
2361
  /** The field's name, read by screen readers. */
2306
2362
  label?: (HelixHeadlessChatComposer["label"]) | undefined;
2363
+ /** The most characters a draft can have. The field stops taking more. */
2364
+ maxlength?: (HelixHeadlessChatComposer["maxLength"] | `${number}`) | undefined;
2365
+ /** The most characters a draft can have. The field stops taking more. */
2366
+ maxLength?: (HelixHeadlessChatComposer["maxLength"]) | undefined;
2367
+ /** The fewest characters a draft can have, once the reader has written in
2368
+ the field, as on a `<textarea>`. */
2369
+ minlength?: (HelixHeadlessChatComposer["minLength"] | `${number}`) | undefined;
2370
+ /** The fewest characters a draft can have, once the reader has written in
2371
+ the field, as on a `<textarea>`. */
2372
+ minLength?: (HelixHeadlessChatComposer["minLength"]) | undefined;
2307
2373
  /** Placeholder text shown in an empty field. */
2308
2374
  placeholder?: (HelixHeadlessChatComposer["placeholder"]) | undefined;
2375
+ /** Whether the form needs a draft to submit. An empty draft never sends,
2376
+ required or not. */
2377
+ required?: (HelixHeadlessChatComposer["required"]) | undefined;
2309
2378
  /** How many rows the field opens at.
2310
2379
 
2311
2380
  It grows from there. */
@@ -4481,6 +4550,20 @@ rows are chosen, written in the locale, and a language that needs plural
4481
4550
  forms writes them: `{count, plural, one {# wybrany} few {# wybrane} many
4482
4551
  {# wybranych} other {# wybranego}}`. */
4483
4552
  selectedLabel?: (HelixHeadlessDataTable["selectedLabel"]) | undefined;
4553
+ /** What a key or a press on a row does to the rows already selected, in a
4554
+ `selectable` table. `toggle`, the default, keeps them: Space adds or takes
4555
+ out the row. `replace` selects the row alone, as a file list does: Down and
4556
+ Up carry the selection with them, and a press on a row selects it. Control
4557
+ or Command with a press or Space adds or takes out one row, and with a move
4558
+ goes without selecting. The checkboxes add or take out one row either way. */
4559
+ "selection-behavior"?: (HelixHeadlessDataTable["selectionBehavior"]) | undefined;
4560
+ /** What a key or a press on a row does to the rows already selected, in a
4561
+ `selectable` table. `toggle`, the default, keeps them: Space adds or takes
4562
+ out the row. `replace` selects the row alone, as a file list does: Down and
4563
+ Up carry the selection with them, and a press on a row selects it. Control
4564
+ or Command with a press or Space adds or takes out one row, and with a move
4565
+ goes without selecting. The checkboxes add or take out one row either way. */
4566
+ selectionBehavior?: (HelixHeadlessDataTable["selectionBehavior"]) | undefined;
4484
4567
  /** The name of a row's checkbox. `{row}` is replaced with the row's value in
4485
4568
  the first column that has a field, or with its key. */
4486
4569
  "select-row-label"?: (HelixHeadlessDataTable["selectRowLabel"]) | undefined;
@@ -5519,11 +5602,7 @@ export type HelixHeadlessDialogVueEvents = {
5519
5602
 
5520
5603
  export type HelixHeadlessDividerVueProps = {
5521
5604
  /** Whether screen readers announce the line as a separator, which they now do
5522
- by default.
5523
-
5524
- It dates from when the line was decorative by default. It is still read,
5525
- and it wins over `decorative`, so a divider written with it stays a
5526
- separator. */
5605
+ by default. */
5527
5606
  announced?: (HelixHeadlessDivider["announced"]) | undefined;
5528
5607
  /** Takes the line out of the accessibility tree, for a rule that separates
5529
5608
  nothing: one under a heading, or between the facts of a byline.
@@ -8000,6 +8079,18 @@ export type HelixHeadlessLightboxVueEvents = {
8000
8079
  toggle: HelixHeadlessLightboxToggleElementEvent;
8001
8080
  };
8002
8081
 
8082
+ /** `HelixHeadlessLineChart` component event */
8083
+ export type HelixHeadlessLineChartElementEvent<E = Event> = TypedEvent<
8084
+ HelixHeadlessLineChart,
8085
+ E
8086
+ >;
8087
+ /** `helix-reading-change` event type */
8088
+ export type HelixHeadlessLineChartHelixReadingChangeElementEvent =
8089
+ HelixHeadlessLineChartElementEvent<HelixReadingChangeEvent>;
8090
+ /** `helix-reading-press` event type */
8091
+ export type HelixHeadlessLineChartHelixReadingPressElementEvent =
8092
+ HelixHeadlessLineChartElementEvent<HelixReadingPressEvent>;
8093
+
8003
8094
  export type HelixHeadlessLineChartVueProps = {
8004
8095
  /** Draws a wash under each line, down to the floor of the plot. The washes
8005
8096
  overlap and do not add up, so for parts that make a total, use
@@ -8101,6 +8192,20 @@ masked with one disc per series and every stroke stops at its own ring's
8101
8192
  inner edge. `mask-composite: intersect` is what makes N holes out of N
8102
8193
  layers; a single `mask-image` would only ever cut the last one. */
8103
8194
  terminus?: (HelixHeadlessLineChart["terminus"]) | undefined;
8195
+ /** Draws the scale's numbers beside the plot, the `axis` part, at the levels
8196
+ `gridlines` rules, so a reading can be measured off the drawing as well
8197
+ as read from the tooltip.
8198
+
8199
+ Absent draws none: a line read for its shape needs no numbers beside it,
8200
+ and the tooltip and the table hold every reading. */
8201
+ "value-axis"?: (HelixHeadlessLineChart["valueAxis"]) | undefined;
8202
+ /** Draws the scale's numbers beside the plot, the `axis` part, at the levels
8203
+ `gridlines` rules, so a reading can be measured off the drawing as well
8204
+ as read from the tooltip.
8205
+
8206
+ Absent draws none: a line read for its shape needs no numbers beside it,
8207
+ and the tooltip and the table hold every reading. */
8208
+ valueAxis?: (HelixHeadlessLineChart["valueAxis"]) | undefined;
8104
8209
  /** Whether the range always includes zero.
8105
8210
 
8106
8211
  Absent measures from the data's own extent, which is what a line is for.
@@ -8146,7 +8251,12 @@ legend hid is not counted. */
8146
8251
  positionLabel?: (HelixHeadlessLineChart["positionLabel"]) | undefined;
8147
8252
  };
8148
8253
 
8149
- export type HelixHeadlessLineChartVueEvents = {};
8254
+ export type HelixHeadlessLineChartVueEvents = {
8255
+ /** 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. */
8256
+ "helix-reading-change": HelixHeadlessLineChartHelixReadingChangeElementEvent;
8257
+ /** A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`. */
8258
+ "helix-reading-press": HelixHeadlessLineChartHelixReadingPressElementEvent;
8259
+ };
8150
8260
 
8151
8261
  /** `HelixHeadlessListItem` component event */
8152
8262
  export type HelixHeadlessListItemElementEvent<E = Event> = TypedEvent<
@@ -11872,6 +11982,18 @@ export type HelixHeadlessRatingVueEvents = {
11872
11982
  input: HelixHeadlessRatingElementEvent;
11873
11983
  };
11874
11984
 
11985
+ /** `HelixHeadlessScatterChart` component event */
11986
+ export type HelixHeadlessScatterChartElementEvent<E = Event> = TypedEvent<
11987
+ HelixHeadlessScatterChart,
11988
+ E
11989
+ >;
11990
+ /** `helix-reading-change` event type */
11991
+ export type HelixHeadlessScatterChartHelixReadingChangeElementEvent =
11992
+ HelixHeadlessScatterChartElementEvent<HelixReadingChangeEvent>;
11993
+ /** `helix-reading-press` event type */
11994
+ export type HelixHeadlessScatterChartHelixReadingPressElementEvent =
11995
+ HelixHeadlessScatterChartElementEvent<HelixReadingPressEvent>;
11996
+
11875
11997
  export type HelixHeadlessScatterChartVueProps = {
11876
11998
  /** The word for the strength of the relation, `{correlationLabel}` in
11877
11999
  `series-label`. */
@@ -11970,7 +12092,12 @@ legend hid is not counted. */
11970
12092
  positionLabel?: (HelixHeadlessScatterChart["positionLabel"]) | undefined;
11971
12093
  };
11972
12094
 
11973
- export type HelixHeadlessScatterChartVueEvents = {};
12095
+ export type HelixHeadlessScatterChartVueEvents = {
12096
+ /** 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. */
12097
+ "helix-reading-change": HelixHeadlessScatterChartHelixReadingChangeElementEvent;
12098
+ /** A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`. */
12099
+ "helix-reading-press": HelixHeadlessScatterChartHelixReadingPressElementEvent;
12100
+ };
11974
12101
 
11975
12102
  /** `HelixHeadlessScrollArea` component event */
11976
12103
  export type HelixHeadlessScrollAreaElementEvent<E = Event> = TypedEvent<
@@ -13565,6 +13692,13 @@ export type HelixHeadlessTableVueEvents = {
13565
13692
  };
13566
13693
 
13567
13694
  export type HelixHeadlessTableRowVueProps = {
13695
+ /** Takes the row out of the table's selection and out of its link: the row's
13696
+ checkbox is disabled, Space, Shift ranges, and the checkbox in the heading
13697
+ pass over it, and a press does not follow `href`. A row already selected
13698
+ stays selected. A screen reader hears it as unavailable, and in a `grid`
13699
+ table the arrow keys still reach it, as a disabled cell in a grid is
13700
+ reached. */
13701
+ disabled?: (HelixHeadlessTableRow["disabled"]) | undefined;
13568
13702
  /** The URL a press on the row follows, which makes the whole row a link.
13569
13703
  Empty, the default, leaves presses to the row's cells. */
13570
13704
  href?: (HelixHeadlessTableRow["href"]) | undefined;
@@ -16104,6 +16238,14 @@ regardless, because a reader who stopped it is deciding what to do next. */
16104
16238
  loadingLabel?: (HelixHeadlessVideo["loadingLabel"]) | undefined;
16105
16239
  /** Whether the video starts again at the end. */
16106
16240
  loop?: (HelixHeadlessVideo["loop"]) | undefined;
16241
+ /** The title the device's own media controls show while the video plays,
16242
+ such as on a lock screen. Empty, the default, shows `label`. A playlist
16243
+ writes the current entry's name here. */
16244
+ "media-title"?: (HelixHeadlessVideo["mediaTitle"]) | undefined;
16245
+ /** The title the device's own media controls show while the video plays,
16246
+ such as on a lock screen. Empty, the default, shows `label`. A playlist
16247
+ writes the current entry's name here. */
16248
+ mediaTitle?: (HelixHeadlessVideo["mediaTitle"]) | undefined;
16107
16249
  /** What the button that opens `overflow-controls` is called. */
16108
16250
  "more-label"?: (HelixHeadlessVideo["moreLabel"]) | undefined;
16109
16251
  /** What the button that opens `overflow-controls` is called. */
@@ -16362,6 +16504,12 @@ export type HelixHeadlessVirtualListVueProps = {
16362
16504
  items out as a grid of that many equal columns, windowed a line at a
16363
16505
  time, with Left and Right moving along a line. */
16364
16506
  columns?: (HelixHeadlessVirtualList["columns"]) | undefined;
16507
+ /** The text of the row shown when there are no items and none are loading,
16508
+ where the `empty` slot is empty. Empty, the default, shows no row. */
16509
+ "empty-label"?: (HelixHeadlessVirtualList["emptyLabel"]) | undefined;
16510
+ /** The text of the row shown when there are no items and none are loading,
16511
+ where the `empty` slot is empty. Empty, the default, shows no row. */
16512
+ emptyLabel?: (HelixHeadlessVirtualList["emptyLabel"]) | undefined;
16365
16513
  /** The height of one row, in pixels, used to find the row at a scroll offset.
16366
16514
 
16367
16515
  An estimate rather than a measurement while `measured` is off, which is
@@ -16455,6 +16603,8 @@ export type HelixHeadlessVirtualListVueEvents = {
16455
16603
  export type CustomCssProperties = {
16456
16604
  /** The height of the content, in pixels, written on the `content` part while the section is open. */
16457
16605
  "--accordion-content-height"?: (string) | undefined;
16606
+ /** The width of the axis, in `ch`, set from the widest number on it. Written by the component on the axis. */
16607
+ "--area-chart-axis"?: (string) | undefined;
16458
16608
  /** The width of an axis, in `ch`, set from the widest number on it. The chart sets it on the axis itself, and only when the categories run along the bottom. In a horizontal chart the axis is a row, one line high. */
16459
16609
  "--bar-chart-axis"?: (string) | undefined;
16460
16610
  /** The color of the secondary axis, when one series is on it. The chart sets it from that series' `--chart-series-*` property, so the axis is drawn in whatever color that property resolves to. */
@@ -16535,6 +16685,8 @@ export type CustomCssProperties = {
16535
16685
  "--chart-terminus-x"?: (string) | undefined;
16536
16686
  /** Where a series' last reading sits vertically, as a percentage. Written by the component. */
16537
16687
  "--chart-terminus-y"?: (string) | undefined;
16688
+ /** The width of the axis, in `ch`, set from the widest number on it. Written by the component on the axis. */
16689
+ "--line-chart-axis"?: (string) | undefined;
16538
16690
  /** The number of the first row, written where `start` or `reversed` moves it. */
16539
16691
  "--list-first"?: (string) | undefined;
16540
16692
  /** What each row adds to the number before it: `1`, or `-1` where `reversed`. */
@@ -16657,7 +16809,7 @@ export interface WcToolkitVueGlobalComponents {
16657
16809
  HelixHeadlessAppHeaderVueProps,
16658
16810
  HelixHeadlessAppHeaderVueEvents
16659
16811
  >;
16660
- /** Shows how a total is made up. Each numeric column of the table is a part, the parts add up to the total at each reading, and the top edge is that total. The thickness of a band is that part's amount. Use 'LineChart' with 'area' to show how each series moved: it fills each series from the floor separately, so the fills overlap. Use this chart to show the composition: it stacks the series. **The value axis always starts at zero**, as in 'BarChart', because a band's thickness is its value. For the same reason there is no streamgraph mode, which moves the baseline. To show how the composition changed, set 'share'. Band edges are straight between readings by default. A smoothed curve through one sum can dip below the curve through the sum beneath it, which draws a part as less than zero. Other curves: - 'curve="smooth"': for a stack read as an overall shape. - 'curve="step"': holds each reading and jumps at the midpoint, so stacked edges stay in order, as with 'straight'. Use it for a quantity that changes at a moment, such as a headcount or a price. 'share' draws each reading as 100 percent, so the top edge is flat and the bands show each part's share. Use it to see which part grew. The default shows whether the total grew. 'overlap' draws every band from zero, one in front of another, so each part's own amount is its height: the first column is in front. Use it to compare the parts with each other; the scale then fits the largest part rather than the total. The drawing is hidden from screen readers. The text summary gives the latest reading's total and each part's share of it, and the table beside the chart has every number. **The plot is read by key.** It takes focus, named by 'label' or the caption. The left and right arrows move from reading to reading, Home and End go to the first and the last, and the up and down arrows move among the series of a reading. The tooltip follows, the 'live' part says the reading in words, and Escape puts the tooltip away. Every numeric column is a part, so leave a total column out of the table the chart reads, or it is counted twice. A negative reading is drawn as zero. */
16812
+ /** Shows how a total is made up. Each numeric column of the table is a part, the parts add up to the total at each reading, and the top edge is that total. The thickness of a band is that part's amount. Use 'LineChart' with 'area' to show how each series moved: it fills each series from the floor separately, so the fills overlap. Use this chart to show the composition: it stacks the series. **The value axis always starts at zero**, as in 'BarChart', because a band's thickness is its value. For the same reason there is no streamgraph mode, which moves the baseline. To show how the composition changed, set 'share'. Band edges are straight between readings by default. A smoothed curve through one sum can dip below the curve through the sum beneath it, which draws a part as less than zero. Other curves: - 'curve="smooth"': for a stack read as an overall shape. - 'curve="step"': holds each reading and jumps at the midpoint, so stacked edges stay in order, as with 'straight'. Use it for a quantity that changes at a moment, such as a headcount or a price. 'share' draws each reading as 100 percent, so the top edge is flat and the bands show each part's share. Use it to see which part grew. The default shows whether the total grew. 'overlap' draws every band from zero, one in front of another, so each part's own amount is its height: the first column is in front. Use it to compare the parts with each other; the scale then fits the largest part rather than the total. 'value-axis' draws the scale's numbers beside the plot, at the levels 'gridlines' rules: amounts in 'locale', or percentages under 'share'. The drawing is hidden from screen readers. The text summary gives the latest reading's total and each part's share of it, and the table beside the chart has every number. **The plot is read by key.** It takes focus, named by 'label' or the caption. The left and right arrows move from reading to reading, Home and End go to the first and the last, and the up and down arrows move among the series of a reading. The tooltip follows, the 'live' part says the reading in words, and Escape puts the tooltip away. Every numeric column is a part, so leave a total column out of the table the chart reads, or it is counted twice. A negative reading is drawn as zero. **A tap shows the reading under it**, and keeps it until a tap lands elsewhere. 'helix-reading-change' says each move of the reading, by pointer, tap or key, and 'helix-reading-press' says a reading was clicked, tapped, or pressed with Enter or Space, for a page that opens what a reading stands for. */
16661
16813
  "helix-headless-area-chart": DefineCustomElement<
16662
16814
  HelixHeadlessAreaChart,
16663
16815
  HelixHeadlessAreaChartVueProps,
@@ -16681,7 +16833,7 @@ export interface WcToolkitVueGlobalComponents {
16681
16833
  HelixHeadlessBadgeVueProps,
16682
16834
  HelixHeadlessBadgeVueEvents
16683
16835
  >;
16684
- /** Every bar is measured from zero, and no property changes the baseline, because a bar's length is its value. To show the differences between values, use a line chart. The labels are HTML beside the drawing. An '<svg>' that fills its box scales the text inside it: the same 'font-size' renders at 10px in a narrow chart and 43px in a wide one, and SVG has no setting that keeps text at one size the way 'vector-effect' does for strokes. The table is the accessible representation, and the drawing is hidden from screen readers, so they get the numbers themselves. The 'summary' part names the chart, from 'label' or the table's caption, and gives each series' highest reading. **The plot is read by key.** It takes focus, named by 'label' or the caption. The arrows along the categories move from one to the next, which is left and right for columns and up and down for 'orientation="horizontal"'. Home and End go to the first and the last, and the other pair of arrows moves among the series of a category. The tooltip follows, the 'live' part says the reading in words, and Escape puts the tooltip away. The component writes the custom properties below with numbers it computes, and the stylesheet that draws the chart reads them. Do not set them yourself. */
16836
+ /** Every bar is measured from zero, and no property changes the baseline, because a bar's length is its value. To show the differences between values, use a line chart. The labels are HTML beside the drawing. An '<svg>' that fills its box scales the text inside it: the same 'font-size' renders at 10px in a narrow chart and 43px in a wide one, and SVG has no setting that keeps text at one size the way 'vector-effect' does for strokes. The table is the accessible representation, and the drawing is hidden from screen readers, so they get the numbers themselves. The 'summary' part names the chart, from 'label' or the table's caption, and gives each series' highest reading. **The plot is read by key.** It takes focus, named by 'label' or the caption. The arrows along the categories move from one to the next, which is left and right for columns and up and down for 'orientation="horizontal"'. Home and End go to the first and the last, and the other pair of arrows moves among the series of a category. The tooltip follows, the 'live' part says the reading in words, and Escape puts the tooltip away. The component writes the custom properties below with numbers it computes, and the stylesheet that draws the chart reads them. Do not set them yourself. **A tap shows the reading under it**, and keeps it until a tap lands elsewhere. 'helix-reading-change' says each move of the reading, by pointer, tap or key, and 'helix-reading-press' says a reading was clicked, tapped, or pressed with Enter or Space, for a page that opens what a reading stands for. */
16685
16837
  "helix-headless-bar-chart": DefineCustomElement<
16686
16838
  HelixHeadlessBarChart,
16687
16839
  HelixHeadlessBarChartVueProps,
@@ -16753,7 +16905,7 @@ export interface WcToolkitVueGlobalComponents {
16753
16905
  HelixHeadlessCarouselVueProps,
16754
16906
  HelixHeadlessCarouselVueEvents
16755
16907
  >;
16756
- /** The composer is a separate element so you can replace it. If you need attachments, slash commands, or a model picker, replace the composer and keep the transcript. By default, Enter sends and Shift+Enter starts a new line, the convention in messaging apps. Document editors mostly use the opposite, so 'submit-on' takes 'enter' or 'button'. Use 'button' for a long-form composer. The composer clears only when no listener cancels the send, so the text is kept when you cancel a send that failed. **In a form, the draft is the composer's value**, submitted under 'name'. A form reset puts back the 'value' the markup declared, and a '<fieldset disabled>' turns the composer off. Sending is still 'helix-send', and it does not submit the form. **'typing' says whether the user is writing**, and 'helix-typing' is sent each time it changes: when they start, and when they send or stop for 'typing-timeout' milliseconds. Pass it on to show "is typing" to the other side. */
16908
+ /** The composer is a separate element so you can replace it. If you need attachments, slash commands, or a model picker, replace the composer and keep the transcript. By default, Enter sends and Shift+Enter starts a new line, the convention in messaging apps. Document editors mostly use the opposite, so 'submit-on' takes 'enter' or 'button'. Use 'button' for a long-form composer. The composer clears only when no listener cancels the send, so the text is kept when you cancel a send that failed. **In a form, the draft is the composer's value**, submitted under 'name'. A form reset puts back the 'value' the markup declared, and a '<fieldset disabled>' turns the composer off. Sending is still 'helix-send', and it does not submit the form. **'required', 'minlength' and 'maxlength' are checked by the browser**, as on a '<textarea>', and the message is the browser's. 'maxlength' stops the field taking more. A draft that fails them does not send, and the composer takes ':state(invalid)' and 'aria-invalid' once the reader has tried to send it, the form was submitted, or the reader edited the field and left it. Tabbing past an empty composer marks nothing. **'typing' says whether the user is writing**, and 'helix-typing' is sent each time it changes: when they start, and when they send or stop for 'typing-timeout' milliseconds. Pass it on to show "is typing" to the other side. */
16757
16909
  "helix-headless-chat-composer": DefineCustomElement<
16758
16910
  HelixHeadlessChatComposer,
16759
16911
  HelixHeadlessChatComposerVueProps,
@@ -16825,7 +16977,7 @@ export interface WcToolkitVueGlobalComponents {
16825
16977
  HelixHeadlessCopyButtonVueProps,
16826
16978
  HelixHeadlessCopyButtonVueEvents
16827
16979
  >;
16828
- /** Declare the columns as 'TableColumn' children and pass the rows as an array. The schema stays readable in the HTML, and the rows can be windowed, which ten thousand row elements cannot be. '''html <helix-headless-data-table .rows=${rows} sort="name:asc" page-size="20"> <helix-headless-table-column field="name" sortable>Name</helix-headless-table-column> <helix-headless-table-column field="size" text-align="end" sortable .cell=${bytes}>Size</helix-headless-table-column> </helix-headless-data-table> ''' For a short table written out by hand, use 'Table', which takes rows as markup. Sort and filter apply to the whole set, including the rows on other pages. **The cell values do not server-render.** The headings and the row elements do. Reading a cell needs the columns, and Lit SSR does not pass the column children to this element, so a crawler sees an empty table of the right shape. Use 'Table' when the served HTML has to carry the values. 'selectable' adds a column of checkboxes, keyed on 'row-key': - A row is selected by its key, so the selection survives a sort, a filter, and a page change. - 'selected' holds the chosen keys, comma separated, the same shape 'Listbox' uses for a multiple choice. As with 'sort', writing it applies the selection, and 'default-selected' holds what the markup declared. - The checkbox in the heading selects every row in the result, across pages, and shows a dash while only some are chosen. - Shift with a press on a checkbox selects every row between it and the row last chosen. To act on a single row, such as opening it, put a link or a button in a cell. **Keyboard.** The grid is one tab stop, and the arrow keys move between its cells, the headings included. | Key | What it does | |---|---| | Right, Left | Moves one cell along the row. Left moves on, on a right-to-left page. | | Down, Up | Moves one row, the heading row and the 'load-more' row included. | | Home, End | Moves to the first or the last cell of the row. | | Control with Home or End | Moves to the first or the last cell of the grid. | | Page Down, Page Up | Moves by the rows that fit in view. | | Enter, F2 | Moves into the cell's controls. Escape moves back to the cell, and Tab moves between the controls of one cell. | | Enter, Space on a sortable heading | Sorts by the column. | | Enter, Space on the 'load-more' row | Sends 'helix-load-more'. | | Space on a row | Selects the row, in a 'selectable' table. | | Shift with Down or Up | Selects the rows it moves across, in a 'selectable' table. | | Shift with Space | Selects every row from the one last chosen, in a 'selectable' table. | | Control or Command with A | Selects every row, in a 'selectable' table. | | Right on a row header in a tree grid | Opens a closed row, and moves one cell along an open one. | | Left on a row header in a tree grid | Closes an open row, and moves to the parent of a closed one. | | A letter or a word | Moves to the next row whose row header starts with what you typed. | 'selected' and 'expanded' hold their keys in the order of the rows, as do 'helix-select', 'helix-selected' and 'helix-expand'. Each row is named by its row header, the column marked 'row-header', or the first column with a 'field' where none is. A screen reader says it as a reader moves between rows. **Rows that hold rows.** 'child-field' names the field that holds a row's child rows, and the grid becomes a tree grid. The row header column draws a mark that a press opens and closes a row by, and 'expanded' holds the keys of the open rows, which 'row-key' names. Right on a closed row's header opens it, Left on an open one closes it, and Left on a child moves to its parent. A sort orders the rows under each parent, and a search shows the rows that lead to each match, open. 'load-more' adds a row after the last one with a button that sends 'helix-load-more'. A 'windowed' table also sends it by itself once a reader scrolls within one screen of the end, once for each number of rows. Add the next rows to 'rows', and set 'loading' while they are on their way. The controls inside the cells leave the tab order, so Tab moves past the whole grid. A windowed table keeps the row holding focus drawn while the rest scroll away. People can resize and reorder the columns. 'resizable' on a column puts a separator on its edge. 'reorderable' on the table puts a grip on each heading that has a 'field', moved by dragging or with the arrow keys. The new order is written to 'order' as a list of fields. Your markup is not rewritten: the table assigns the headings to its header in that order. **'reorderable-rows' lets people move rows.** A column of grips leads each row, named by 'move-row-label'. Drag a grip to move its row, and the table scrolls near an edge. Or press Space or Enter on a grip, or click it, to pick up its row, move it with Down and Up, Home and End, and press Space or Enter again to drop it. A click on another row drops it there, and Escape puts it back. The table says each step in its 'live' region. A drop sends 'helix-before-reorder', which you can refuse, and then 'helix-reorder' with 'kind' set to 'row', whose 'keys' hold every key of 'rows' in the new order. **You move the rows**: set 'rows' to the new order, and the table draws it. Set 'row-key', so a row is known by its key once it has moved. The grips do nothing while a 'sort' is set, since the sort decides the order, and a tree grid draws none. 'csv()' returns the result as text: every row that passes the filter, in the order and the columns on screen. Saving the file is up to you. 'DataTable' has no 'columns' attribute. Each 'TableColumn' is part of the schema, so you size a column with its own 'width'. 'Table' has 'columns' because its cells are markup you write and it can have no columns at all. Written on 'DataTable', 'columns' has no effect, so watch for it when you move a table from 'Table' to 'DataTable'. */
16980
+ /** Declare the columns as 'TableColumn' children and pass the rows as an array. The schema stays readable in the HTML, and the rows can be windowed, which ten thousand row elements cannot be. '''html <helix-headless-data-table .rows=${rows} sort="name:asc" page-size="20"> <helix-headless-table-column field="name" sortable>Name</helix-headless-table-column> <helix-headless-table-column field="size" text-align="end" sortable .cell=${bytes}>Size</helix-headless-table-column> </helix-headless-data-table> ''' For a short table written out by hand, use 'Table', which takes rows as markup. Sort and filter apply to the whole set, including the rows on other pages. **The cell values do not server-render.** The headings and the row elements do. Reading a cell needs the columns, and Lit SSR does not pass the column children to this element, so a crawler sees an empty table of the right shape. Use 'Table' when the served HTML has to carry the values. 'selectable' adds a column of checkboxes, keyed on 'row-key': - A row is selected by its key, so the selection survives a sort, a filter, and a page change. - 'selected' holds the chosen keys, comma separated, the same shape 'Listbox' uses for a multiple choice. As with 'sort', writing it applies the selection, and 'default-selected' holds what the markup declared. - The checkbox in the heading selects every row in the result, across pages, and shows a dash while only some are chosen. - Shift with a press on a checkbox selects every row between it and the row last chosen. - 'selection-behavior="replace"' makes a press or a move select the row alone, as a file list does. Control or Command with a press adds or takes out one row, and Shift with a press selects every row from the one last chosen. To act on a single row, such as opening it, put a link or a button in a cell. **Keyboard.** The grid is one tab stop, and the arrow keys move between its cells, the headings included. | Key | What it does | |---|---| | Right, Left | Moves one cell along the row. Left moves on, on a right-to-left page. | | Down, Up | Moves one row, the heading row and the 'load-more' row included. | | Home, End | Moves to the first or the last cell of the row. | | Control with Home or End | Moves to the first or the last cell of the grid. | | Page Down, Page Up | Moves by the rows that fit in view. | | Enter, F2 | Moves into the cell's controls. Escape moves back to the cell, and Tab moves between the controls of one cell. | | Enter, Space on a sortable heading | Sorts by the column. | | Enter, Space on the 'load-more' row | Sends 'helix-load-more'. | | Space on a row | Selects the row, in a 'selectable' table. Under 'selection-behavior="replace"', selects it alone, and Control or Command with Space adds or takes out the row. | | Down, Up, Page Down, Page Up under 'selection-behavior="replace"' | Selects the row it moves to alone. Control or Command with the key moves without selecting. | | Shift with Down or Up | Selects the rows it moves across, in a 'selectable' table. | | Shift with Space | Selects every row from the one last chosen, in a 'selectable' table. | | Control or Command with A | Selects every row, in a 'selectable' table. | | Right on a row header in a tree grid | Opens a closed row, and moves one cell along an open one. | | Left on a row header in a tree grid | Closes an open row, and moves to the parent of a closed one. | | A letter or a word | Moves to the next row whose row header starts with what you typed. | 'selected' and 'expanded' hold their keys in the order of the rows, as do 'helix-select', 'helix-selected' and 'helix-expand'. Each row is named by its row header, the column marked 'row-header', or the first column with a 'field' where none is. A screen reader says it as a reader moves between rows. **Rows that hold rows.** 'child-field' names the field that holds a row's child rows, and the grid becomes a tree grid. The row header column draws a mark that a press opens and closes a row by, and 'expanded' holds the keys of the open rows, which 'row-key' names. Right on a closed row's header opens it, Left on an open one closes it, and Left on a child moves to its parent. A sort orders the rows under each parent, and a search shows the rows that lead to each match, open. 'load-more' adds a row after the last one with a button that sends 'helix-load-more'. A 'windowed' table also sends it by itself once a reader scrolls within one screen of the end, once for each number of rows. Add the next rows to 'rows', and set 'loading' while they are on their way. The controls inside the cells leave the tab order, so Tab moves past the whole grid. A windowed table keeps the row holding focus drawn while the rest scroll away. People can resize and reorder the columns. 'resizable' on a column puts a separator on its edge. 'reorderable' on the table puts a grip on each heading that has a 'field', moved by dragging or with the arrow keys. The new order is written to 'order' as a list of fields. Your markup is not rewritten: the table assigns the headings to its header in that order. **'reorderable-rows' lets people move rows.** A column of grips leads each row, named by 'move-row-label'. Drag a grip to move its row, and the table scrolls near an edge. Or press Space or Enter on a grip, or click it, to pick up its row, move it with Down and Up, Home and End, and press Space or Enter again to drop it. A click on another row drops it there, and Escape puts it back. The table says each step in its 'live' region. A drop sends 'helix-before-reorder', which you can refuse, and then 'helix-reorder' with 'kind' set to 'row', whose 'keys' hold every key of 'rows' in the new order. **You move the rows**: set 'rows' to the new order, and the table draws it. Set 'row-key', so a row is known by its key once it has moved. The grips do nothing while a 'sort' is set, since the sort decides the order, and a tree grid draws none. 'csv()' returns the result as text: every row that passes the filter, in the order and the columns on screen. Saving the file is up to you. 'DataTable' has no 'columns' attribute. Each 'TableColumn' is part of the schema, so you size a column with its own 'width'. 'Table' has 'columns' because its cells are markup you write and it can have no columns at all. Written on 'DataTable', 'columns' has no effect, so watch for it when you move a table from 'Table' to 'DataTable'. */
16829
16981
  "helix-headless-data-table": DefineCustomElement<
16830
16982
  HelixHeadlessDataTable,
16831
16983
  HelixHeadlessDataTableVueProps,
@@ -16861,7 +17013,7 @@ export interface WcToolkitVueGlobalComponents {
16861
17013
  HelixHeadlessDialogVueProps,
16862
17014
  HelixHeadlessDialogVueEvents
16863
17015
  >;
16864
- /** The separator role is on the rule inside the shadow root. A role does not need to cross the shadow boundary the way an IDREF does, so it can sit on the rendered element. The semantics are then in the server-rendered markup, with no attribute written by script after the element connects. **The line is a separator**, as '<hr>' is, and as Radix Separator, React Aria Separator, and Web Awesome's divider are. It is named by any content set into it, so a screen reader says "Or, separator" where you wrote "Or" on the line. Set 'decorative' on a rule that separates nothing, such as one under a heading or between the facts of a byline, and it leaves the accessibility tree. Use 'orientation="vertical"' between items on one line. A vertical divider stretches to fit its flex parent and sets no height of its own. **Inside a toolbar it runs across the toolbar** without being told: vertical in a horizontal toolbar and horizontal in a vertical one, with 'aria-orientation' to match, as React Aria's separator does inside a toolbar. Inside means a child of Toolbar or of the page's own 'role="toolbar"'. An 'orientation' you write still wins. A server cannot see the toolbar, so the turn arrives with hydration, inside the shadow root. */
17016
+ /** The separator role is on the rule inside the shadow root. A role does not need to cross the shadow boundary the way an IDREF does, so it can sit on the rendered element. The semantics are then in the server-rendered markup, with no attribute written by script after the element connects. **The line is a separator**, as '<hr>' is, and as Radix Separator, React Aria Separator, and Web Awesome's divider are. It is named by any content set into it, so a screen reader says "Or, separator" where you wrote "Or" on the line, and the words are read once, as that name. Set words into a separator and no controls, which are hidden with them. Set 'decorative' on a rule that separates nothing, such as one under a heading or between the facts of a byline, and it leaves the accessibility tree. Use 'orientation="vertical"' between items on one line. A vertical divider stretches to fit its flex parent and sets no height of its own. **Inside a toolbar it runs across the toolbar** without being told: vertical in a horizontal toolbar and horizontal in a vertical one, with 'aria-orientation' to match, as React Aria's separator does inside a toolbar. Inside means a child of Toolbar or of the page's own 'role="toolbar"'. An 'orientation' you write still wins. A server cannot see the toolbar, so the turn arrives with hydration, inside the shadow root. */
16865
17017
  "helix-headless-divider": DefineCustomElement<
16866
17018
  HelixHeadlessDivider,
16867
17019
  HelixHeadlessDividerVueProps,
@@ -16975,7 +17127,7 @@ export interface WcToolkitVueGlobalComponents {
16975
17127
  HelixHeadlessInputVueProps,
16976
17128
  HelixHeadlessInputVueEvents
16977
17129
  >;
16978
- /** Renders a '<kbd>' element. Each element holds one key, except when you use 'keys'. For a sequence or a chord, write one element per key and put the separator between them as text, such as "then" or "plus". 'keys' renders the right glyphs for the platform. Given 'mod', it renders '⌘K' on Apple devices and 'Ctrl+K' everywhere else. A '⌘K' typed into a template is wrong for anyone on Windows. The element binds the shortcut only when 'within' is set. By default it draws the key and listens for nothing. **'for' names the control the shortcut works**, and the key writes its chord onto that control's 'aria-keyshortcuts', in the platform's words ('Meta+K' on an Apple keyboard, 'Control+K' elsewhere), so a screen reader announces the shortcut with the control. A chord the page wrote there itself is left alone, and the key takes back only what it added. 'caps' draws a chord as a key per key: each is a 'key' part and the '+' between two a 'separator' part, so a sheet can draw a cap for each. 'key-labels' renames any key, on every platform, such as 'key-labels='{"mod":"Command"}''. On an Apple keyboard a word joins the next key with a hyphen, as in 'Command-K'. **'activate' makes the shortcut work the control 'for' names**, with no script: 'activate="focus"' moves focus to it, as '/' does to a search field, and 'activate="click"' presses it. It acts once 'helix-shortcut' has gone out and no listener canceled it, and only where 'within' listens. */
17130
+ /** Renders a '<kbd>' element. Each element holds one key, except when you use 'keys'. For a sequence or a chord, write one element per key and put the separator between them as text, such as "then" or "plus". 'keys' renders the right glyphs for the platform. Given 'mod', it renders '⌘K' on Apple devices and 'Ctrl+K' everywhere else. A '⌘K' typed into a template is wrong for anyone on Windows. The element binds the shortcut only when 'within' is set. By default it draws the key and listens for nothing. **'for' names the control the shortcut works**, and the key writes its chord onto that control's 'aria-keyshortcuts', in the platform's words ('Meta+K' on an Apple keyboard, 'Control+K' elsewhere), so a screen reader announces the shortcut with the control. A chord the page wrote there itself is left alone, and the key takes back only what it added. A chord is drawn with the platform's modifiers first, in its order, so one 'keys' value is right everywhere: 'mod+shift+p' is '⇧⌘P' on an Apple keyboard and 'Ctrl+Shift+P' elsewhere. Where it is drawn in glyphs, it is read in words, such as 'Shift Command P'. 'caps' draws a chord as a key per key: each is a 'key' part and the '+' between two a 'separator' part, so a sheet can draw a cap for each. 'key-labels' renames any key, on every platform, such as 'key-labels='{"mod":"Command"}''. On an Apple keyboard a word joins the next key with a hyphen, as in 'Command-K'. **'activate' makes the shortcut work the control 'for' names**, with no script: 'activate="focus"' moves focus to it, as '/' does to a search field, and 'activate="click"' presses it. It acts once 'helix-shortcut' has gone out and no listener canceled it, and only where 'within' listens. */
16979
17131
  "helix-headless-kbd": DefineCustomElement<
16980
17132
  HelixHeadlessKbd,
16981
17133
  HelixHeadlessKbdVueProps,
@@ -16999,7 +17151,7 @@ export interface WcToolkitVueGlobalComponents {
16999
17151
  HelixHeadlessLightboxVueProps,
17000
17152
  HelixHeadlessLightboxVueEvents
17001
17153
  >;
17002
- /** A line chart shows the shape of each series: where the readings went. The scale covers the range of the data. Including zero in the range of a series that moves between 980 and 1020 would flatten the line into a rule across the top of the box. 'BarChart' always starts at zero, because a bar's length is its value. Set 'zero' when the distance from zero is the point. Every series shares one scale, as in the bar chart. 'dashed' names the series drawn as a dashed line, such as a forecast or a target beside the readings: 'dashed="Forecast"'. Each takes a 'line-dashed' part beside 'line'. 'area' fills each series down to the floor on its own, so the fills overlap. For a total made of parts, use 'Area Chart', which stacks the series so the top edge is the total and each band is a share. The labels are HTML beside the drawing, as in 'BarChart'. Text inside an '<svg>' that fills its box scales with the box, so the same 'font-size' can render at 10px in a narrow chart and 43px in a wide one. The table is the accessible representation, and the drawing is hidden from screen readers, who get the numbers. The 'summary' part names the chart, from 'label' or the table's caption, and gives each series' latest reading. **The plot is read by key.** It takes focus, named by 'label' or the caption. The left and right arrows move from reading to reading, Home and End go to the first and the last, and the up and down arrows move among the series of a reading. The tooltip follows, the 'live' part says the reading in words, and Escape puts the tooltip away. */
17154
+ /** A line chart shows the shape of each series: where the readings went. The scale covers the range of the data. Including zero in the range of a series that moves between 980 and 1020 would flatten the line into a rule across the top of the box. 'BarChart' always starts at zero, because a bar's length is its value. Set 'zero' when the distance from zero is the point. Every series shares one scale, as in the bar chart. 'dashed' names the series drawn as a dashed line, such as a forecast or a target beside the readings: 'dashed="Forecast"'. Each takes a 'line-dashed' part beside 'line'. 'area' fills each series down to the floor on its own, so the fills overlap. For a total made of parts, use 'Area Chart', which stacks the series so the top edge is the total and each band is a share. The labels are HTML beside the drawing, as in 'BarChart'. Text inside an '<svg>' that fills its box scales with the box, so the same 'font-size' can render at 10px in a narrow chart and 43px in a wide one. 'value-axis' draws the scale's numbers beside the plot, at the levels 'gridlines' rules, written in 'locale'. The table is the accessible representation, and the drawing is hidden from screen readers, who get the numbers. The 'summary' part names the chart, from 'label' or the table's caption, and gives each series' latest reading. **The plot is read by key.** It takes focus, named by 'label' or the caption. The left and right arrows move from reading to reading, Home and End go to the first and the last, and the up and down arrows move among the series of a reading. The tooltip follows, the 'live' part says the reading in words, and Escape puts the tooltip away. **A tap shows the reading under it**, and keeps it until a tap lands elsewhere. 'helix-reading-change' says each move of the reading, by pointer, tap or key, and 'helix-reading-press' says a reading was clicked, tapped, or pressed with Enter or Space, for a page that opens what a reading stands for. */
17003
17155
  "helix-headless-line-chart": DefineCustomElement<
17004
17156
  HelixHeadlessLineChart,
17005
17157
  HelixHeadlessLineChartVueProps,
@@ -17251,7 +17403,7 @@ export interface WcToolkitVueGlobalComponents {
17251
17403
  HelixHeadlessRatingVueProps,
17252
17404
  HelixHeadlessRatingVueEvents
17253
17405
  >;
17254
- /** A scatter chart shows how two measures relate. The table's first numeric column is measured across, every other numeric column is measured up, and each row is one point. A table of countries with an income column and a life expectancy column draws one point for each country. Each additional numeric column is another series, in its own color. Both axes are labeled, because both positions are values. The ticks sit at round numbers, and the range extends to them. 'trend' draws each series' line of best fit, by least squares, across the plot in the series' color. **'size-by' names a third measure, drawn as each point's size**, as a bubble chart does: 'size-by="Population"' takes that column out of the series and gives each point an area in proportion to its row's number there. The tooltip and the table still say the number. The summary gives each series' correlation coefficient and its number of points. The table has every number, and the drawing is hidden from screen readers. **The plot is read by key.** It takes focus, named by 'label' or the caption. The left and right arrows move from row to row in the table's order, Home and End go to the first and the last, and the up and down arrows move among the series of a row. The tooltip sits on that point, the 'live' part says the row in words, and Escape puts the tooltip away. Each point is a '<span>' placed by percentage over the drawing, as 'LineChart' places its end points, so points stay round when the drawing stretches. The plot runs left to right in every text direction, as a number line does. The plot, its axes, and the axis names sit in a 'plane' part with 'dir="ltr"'. The axis names carry 'dir="auto"', so a name in Arabic or Hebrew reads in its own direction. The summary and the tooltip bubble follow the page's direction. */
17406
+ /** A scatter chart shows how two measures relate. The table's first numeric column is measured across, every other numeric column is measured up, and each row is one point. A table of countries with an income column and a life expectancy column draws one point for each country. Each additional numeric column is another series, in its own color. Both axes are labeled, because both positions are values. The ticks sit at round numbers, and the range extends to them. 'trend' draws each series' line of best fit, by least squares, across the plot in the series' color. **'size-by' names a third measure, drawn as each point's size**, as a bubble chart does: 'size-by="Population"' takes that column out of the series and gives each point an area in proportion to its row's number there. The tooltip and the table still say the number. The summary gives each series' correlation coefficient and its number of points. The table has every number, and the drawing is hidden from screen readers. **The plot is read by key.** It takes focus, named by 'label' or the caption. The left and right arrows move from row to row in the table's order, Home and End go to the first and the last, and the up and down arrows move among the series of a row. The tooltip sits on that point, the 'live' part says the row in words, and Escape puts the tooltip away. Each point is a '<span>' placed by percentage over the drawing, as 'LineChart' places its end points, so points stay round when the drawing stretches. The plot runs left to right in every text direction, as a number line does. The plot, its axes, and the axis names sit in a 'plane' part with 'dir="ltr"'. The axis names carry 'dir="auto"', so a name in Arabic or Hebrew reads in its own direction. The summary and the tooltip bubble follow the page's direction. **A tap shows the reading under it**, and keeps it until a tap lands elsewhere. 'helix-reading-change' says each move of the reading, by pointer, tap or key, and 'helix-reading-press' says a reading was clicked, tapped, or pressed with Enter or Space, for a page that opens what a reading stands for. */
17255
17407
  "helix-headless-scatter-chart": DefineCustomElement<
17256
17408
  HelixHeadlessScatterChart,
17257
17409
  HelixHeadlessScatterChartVueProps,
@@ -17359,13 +17511,13 @@ export interface WcToolkitVueGlobalComponents {
17359
17511
  HelixHeadlessTableColumnVueProps,
17360
17512
  HelixHeadlessTableColumnVueEvents
17361
17513
  >;
17362
- /** Lays out the rows on a CSS grid, so every column lines up across rows and each row stays a real element that can be styled, hidden, or made interactive. A '<table>' layout aligns columns but limits almost everything else. A grid of elements has no table structure for assistive technology, so the roles are set explicitly: 'table', 'row', 'cell', 'columnheader', and 'rowheader' for a 'header' cell in a row of values. Rows are 'display: contents', so their cells become items of the one grid. **Sorting.** A column with 'sortable' and a 'field' draws its heading as a button that sorts the rows by the text of its cells, numbers by their value. Your markup is not reordered: the table draws the rows in the sorted order. 1. Each press cycles the column through ascending, descending, and the order the rows were written in, which keeps a server's own ranking reachable. 2. 'helix-sort' asks first, with 'field:direction', or empty for the written order. Refuse it to keep the order, or to sort the rows yourself and set 'sort'. 3. 'helix-sorted' follows once the order stands, and 'sort' holds it. 4. The heading carries 'aria-sort', and a screen reader hears 'sorted-label' ("Sorted by Name, ascending") or 'unsorted-label' from a polite region. Tab reaches each sort button, and Enter or Space presses it. The 'heading' slot names the table: slot a heading or a line of text into it, and the table is named by its words. An 'aria-label' or 'aria-labelledby' on the host wins over it. **Selecting.** 'selectable' adds a column of checkboxes. 1. Each row is known by its 'value', or by its place among the rows where it has none, and 'selected' holds the chosen keys, comma separated, the same shape 'DataTable' uses. 'default-selected' is where it starts. 2. A row's checkbox is named by 'select-row-label' ("Select {row}") with the words of the row's first cell. The checkbox in the heading selects every row, and shows a dash while only some are chosen. 3. 'helix-select' asks first, with every key the change would leave. Refuse it to keep the selection. 'helix-selected' follows once it stands. 4. A chosen row takes ':state(selected)', and a screen reader hears 'selected-label' ("2 selected") from a polite region. Tab reaches each checkbox, and Space ticks it. To act on one row, put a link or a button in a cell, or give the row an 'href'. **Moving rows.** 'reorderable' adds a column of grips before the checkboxes, under a heading named by 'row-grips-label'. 1. Each row is known by its 'value', or by its place among the rows where it has none, as for selecting. Give rows a 'value' when they move, so a key stays with its row. 2. A grip is a button named by 'move-row-label' ("Move {row}") with the words of the row's first cell. Drag it to move its row, and the page scrolls near an edge. Or press it with Space, Enter, or a click to pick the row up, move it with Up, Down, Home, and End, and press it again to drop it. A click on another row drops it there, and Escape puts it back. 3. 'helix-before-reorder' asks first, and 'helix-reorder' follows with 'keys', every row's key in the new order. **You move the rows**: the table moves no element of yours, and focus goes back to the moved row's grip once you have. 4. Each step is said in the table's live region, in words you can change: 'picked-up-label', 'moved-label', 'dropped-label', and 'canceled-label'. The grips do nothing while a sort is set. **A grid.** 'grid' makes the table one tab stop that the arrow keys move through cell by cell, the headings included, as React Aria's table is. The table is then a 'grid' and each value a 'gridcell', and the table gives every cell a 'tabindex' so focus can rest on it: set 'grid' only where the cells may carry one. For typeahead and range selection, use 'DataTable'. | Key | What it does | |---|---| | Right, Left | Moves one cell along the row. Left moves on, on a right-to-left page. | | Down, Up | Moves one row, the headings included. | | Home, End | Moves to the first or the last cell of the row. | | Control with Home or End | Moves to the first or the last cell of the table. | | Page Down, Page Up | Moves by the rows that fit in view. | | Enter, F2 | Moves into the cell's links and controls. Escape or F2 moves back to the cell, and Tab moves between the controls of one cell. | | Enter on a cell of a row with 'href' | Follows the row's link. | | Enter, Space on a sortable heading | Sorts by the column. | | Space on a row, Enter or Space on its checkbox cell | Selects the row, in a 'selectable' table. | | Enter or Space on a grip cell | Picks the row up, or drops it, in a 'reorderable' table. Up, Down, Home, and End move a row picked up, and Escape puts it back. | | Control or Command with A | Selects every row, in a 'selectable' table. | | Tab | Leaves the table. | The CSS custom properties listed for this component are written by it and read by the stylesheet that draws it. Do not set them. Each holds a number the component computes and CSS cannot, so the stylesheet can draw the table without measuring anything. */
17514
+ /** Lays out the rows on a CSS grid, so every column lines up across rows and each row stays a real element that can be styled, hidden, or made interactive. A '<table>' layout aligns columns but limits almost everything else. A grid of elements has no table structure for assistive technology, so the roles are set explicitly: 'table', 'row', 'cell', 'columnheader', and 'rowheader' for a 'header' cell in a row of values. Rows are 'display: contents', so their cells become items of the one grid. **Sorting.** A column with 'sortable' and a 'field' draws its heading as a button that sorts the rows by the text of its cells, numbers by their value. Your markup is not reordered: the table draws the rows in the sorted order. 1. Each press cycles the column through ascending, descending, and the order the rows were written in, which keeps a server's own ranking reachable. 2. 'helix-sort' asks first, with 'field:direction', or empty for the written order. Refuse it to keep the order, or to sort the rows yourself and set 'sort'. 3. 'helix-sorted' follows once the order stands, and 'sort' holds it. 4. The heading carries 'aria-sort', and a screen reader hears 'sorted-label' ("Sorted by Name, ascending") or 'unsorted-label' from a polite region. Tab reaches each sort button, and Enter or Space presses it. The 'heading' slot names the table: slot a heading or a line of text into it, and the table is named by its words. An 'aria-label' or 'aria-labelledby' on the host wins over it. **Selecting.** 'selectable' adds a column of checkboxes. 1. Each row is known by its 'value', or by its place among the rows where it has none, and 'selected' holds the chosen keys, comma separated, the same shape 'DataTable' uses. 'default-selected' is where it starts. 2. A row's checkbox is named by 'select-row-label' ("Select {row}") with the words of the row's first cell. The checkbox in the heading selects every row, and shows a dash while only some are chosen. 3. 'helix-select' asks first, with every key the change would leave. Refuse it to keep the selection. 'helix-selected' follows once it stands. 4. A chosen row takes ':state(selected)', and a screen reader hears 'selected-label' ("2 selected") from a polite region. Tab reaches each checkbox, and Space ticks it. To act on one row, put a link or a button in a cell, or give the row an 'href'. **Moving rows.** 'reorderable' adds a column of grips before the checkboxes, under a heading named by 'row-grips-label'. 1. Each row is known by its 'value', or by its place among the rows where it has none, as for selecting. Give rows a 'value' when they move, so a key stays with its row. 2. A grip is a button named by 'move-row-label' ("Move {row}") with the words of the row's first cell. Drag it to move its row, and the page scrolls near an edge. Or press it with Space, Enter, or a click to pick the row up, move it with Up, Down, Home, and End, and press it again to drop it. A click on another row drops it there, and Escape puts it back. 3. 'helix-before-reorder' asks first, and 'helix-reorder' follows with 'keys', every row's key in the new order. **You move the rows**: the table moves no element of yours, and focus goes back to the moved row's grip once you have. 4. Each step is said in the table's live region, in words you can change: 'picked-up-label', 'moved-label', 'dropped-label', and 'canceled-label'. The grips do nothing while a sort is set. **A grid.** 'grid' makes the table one tab stop that the arrow keys move through cell by cell, the headings included, as React Aria's table is. The table is then a 'grid' and each value a 'gridcell', and the table gives every cell a 'tabindex' so focus can rest on it: set 'grid' only where the cells may carry one. | Key | What it does | |---|---| | Right, Left | Moves one cell along the row. Left moves on, on a right-to-left page. | | Down, Up | Moves one row, the headings included. | | Home, End | Moves to the first or the last cell of the row. | | Control with Home or End | Moves to the first or the last cell of the table. | | Page Down, Page Up | Moves by the rows that fit in view. | | Enter, F2 | Moves into the cell's links and controls. Escape or F2 moves back to the cell, and Tab moves between the controls of one cell. | | Enter on a cell of a row with 'href' | Follows the row's link. | | Enter, Space on a sortable heading | Sorts by the column. | | Space on a row, Enter or Space on its checkbox cell | Selects the row, in a 'selectable' table. | | Enter or Space on a grip cell | Picks the row up, or drops it, in a 'reorderable' table. Up, Down, Home, and End move a row picked up, and Escape puts it back. | | Shift with Down or Up | Selects the rows it moves across, in a 'selectable' table. | | Shift with Space | Selects every row from the one last chosen, in a 'selectable' table. | | Control or Command with A | Selects every row, in a 'selectable' table. | | A letter or a word | Moves to the next row whose first cell starts with what you typed. | | Tab | Leaves the table. | The CSS custom properties listed for this component are written by it and read by the stylesheet that draws it. Do not set them. Each holds a number the component computes and CSS cannot, so the stylesheet can draw the table without measuring anything. */
17363
17515
  "helix-headless-table": DefineCustomElement<
17364
17516
  HelixHeadlessTable,
17365
17517
  HelixHeadlessTableVueProps,
17366
17518
  HelixHeadlessTableVueEvents
17367
17519
  >;
17368
- /** The row renders its cells straight through and lays out none of them, so a stylesheet can place them in the table's grid and every column lines up across rows. The row still exists as an element, so you can style it, hide it, or make it interactive. In a 'selectable' table the row draws a checkbox cell before its own cells, and 'value' is the key the table's 'selected' lists it by. In a 'reorderable' table the row draws a grip cell before those, holding a button named by the table's 'move-row-label', and 'value' is the key 'helix-reorder' lists it by. The table says which row is moving and where the drop indicator is, with the 'dragging', 'drop-before', and 'drop-after' states. **'href' makes the whole row a link**, as a row action does in React Aria's table: a press anywhere on the row follows it, except on a link or a control of the row's own, and Control, Command or Shift open it the way they open a link. A drag that selects text follows nothing. A row in a table is not a stop of its own, so put the same link in a cell, usually the row header, which is what the keyboard and a screen reader reach. In a 'grid' table, Enter on any cell of the row follows it as well. */
17520
+ /** The row renders its cells straight through and lays out none of them, so a stylesheet can place them in the table's grid and every column lines up across rows. The row still exists as an element, so you can style it, hide it, or make it interactive. In a 'selectable' table the row draws a checkbox cell before its own cells, and 'value' is the key the table's 'selected' lists it by. 'disabled' keeps the row out of the selection and out of its link. In a 'reorderable' table the row draws a grip cell before those, holding a button named by the table's 'move-row-label', and 'value' is the key 'helix-reorder' lists it by. The table says which row is moving and where the drop indicator is, with the 'dragging', 'drop-before', and 'drop-after' states. **'href' makes the whole row a link**, as a row action does in React Aria's table: a press anywhere on the row follows it, except on a link or a control of the row's own, and Control, Command or Shift open it the way they open a link. A drag that selects text follows nothing. A row in a table is not a stop of its own, so put the same link in a cell, usually the row header, which is what the keyboard and a screen reader reach. In a 'grid' table, Enter on any cell of the row follows it as well. */
17369
17521
  "helix-headless-table-row": DefineCustomElement<
17370
17522
  HelixHeadlessTableRow,
17371
17523
  HelixHeadlessTableRowVueProps,
@@ -17515,7 +17667,7 @@ export interface WcToolkitVueGlobalComponents {
17515
17667
  HelixHeadlessVideoPlaylistMenuVueProps,
17516
17668
  HelixHeadlessVideoPlaylistMenuVueEvents
17517
17669
  >;
17518
- /** **You slot the player**, so it keeps your appearance, extra controls, captions, and poster treatment. 'Sandbox' takes its preview and 'Menu' its trigger the same way. **Entries are markup.** React skips properties it would set imperatively during hydration, so an array property on a custom element is missing on the first paint of a server-rendered page. 'using-the-elements.mdx' has the measurement. Markup also makes each entry a real button with its name inside. **The playlist does not play media.** It sets 'src' on the player and tracks which entry is current. The current entry moves when: - an entry is pressed, - the player dispatches 'helix-next' or 'helix-previous', or - the player reaches the end. On 'ended' the playlist advances and the next clip starts playing, because the user already pressed play once. 'repeat' decides what happens at the end: 'one' plays the same entry again, and 'all' goes from the last entry back to the first. Without it, the playlist stops on the last entry and sends 'helix-end'. 'shuffle' plays the entries in a random order, starting from the one that is current, and 'previous' retraces that order. **Keyboard.** Each entry is a button in the tab order, and Enter or Space plays it. The current entry carries 'aria-current'. While focus is on the player, the player's own keys work, and 'Video' lists them. Its previous and next controls move through the entries in the same order the playlist does. */
17670
+ /** **You slot the player**, so it keeps your appearance, extra controls, captions, and poster treatment. 'Sandbox' takes its preview and 'Menu' its trigger the same way. **Entries are markup.** React skips properties it would set imperatively during hydration, so an array property on a custom element is missing on the first paint of a server-rendered page. 'using-the-elements.mdx' has the measurement. Markup also makes each entry a real button with its name inside. **The playlist does not play media.** It sets 'src' on the player and tracks which entry is current. The current entry moves when: - an entry is pressed, - the player dispatches 'helix-next' or 'helix-previous', or - the player reaches the end. On 'ended' the playlist advances and the next clip starts playing, because the user already pressed play once. 'repeat' decides what happens at the end: 'one' plays the same entry again, and 'all' goes from the last entry back to the first. Without it, the playlist stops on the last entry and sends 'helix-end'. 'shuffle' plays the entries in a random order, starting from the one that is current, and 'previous' retraces that order. **The player is named by the current entry**, and the device's own media controls show the entry as the title. A player you gave a 'label' keeps your name, and only the title follows the entry. **Keyboard.** Each entry is a button in the tab order, and Enter or Space plays it. The current entry carries 'aria-current'. While focus is on the player, the player's own keys work, and 'Video' lists them. Its previous and next controls move through the entries in the same order the playlist does. */
17519
17671
  "helix-headless-video-playlist": DefineCustomElement<
17520
17672
  HelixHeadlessVideoPlaylist,
17521
17673
  HelixHeadlessVideoPlaylistVueProps,
@@ -17527,7 +17679,7 @@ export interface WcToolkitVueGlobalComponents {
17527
17679
  HelixHeadlessVideoVueProps,
17528
17680
  HelixHeadlessVideoVueEvents
17529
17681
  >;
17530
- /** The items arrive as data, in one of two ways: - 'items' takes an array. A framework sets it as a property, and React hydration keeps it. - 'for' names a '<script type="application/json">' that holds an array, which a server sends as markup. Each item is drawn into a row in one of two ways: - 'renderItem' is a function from an item and its index to the row's content: a Lit template, a string, or a DOM node. - A '<template>' child defines one row. 'data-field="name"' fills an element with the item's 'name' as text, and 'data-field-href="url"' writes the item's 'url' into 'href', the same for any attribute. A field may be a path of keys, such as 'author.name'. Rows are your markup in the light DOM, so your stylesheet styles them. **A grid.** 'columns' lays the items out that many to a line, as a grid of equal columns, and windows the set a line at a time, as React Aria's grid layout does. Each item draws one element, a cell of the grid, and 'estimate' is the height of a line. Space the items with padding inside each one, which the list measures with the line. **Keyboard.** The list is one tab stop. | Key | What it does | |---|---| | Down, Up | Moves to the next or the previous item, or in a grid to the item in the same column on the next or the previous line. | | Right, Left | In a grid, moves to the next or the previous item along the line, the other way round on a right-to-left page. | | Home, End | Moves to the first or the last item. | | Page Down, Page Up | Moves by the number of items, or of lines in a grid, on screen. | | A letter or a word | Moves to the next item whose text starts with what you typed. | | Tab | Moves into the focused row's own links and buttons, then out of the list. | An item that is not drawn is scrolled into view and focused, so a keyboard reaches the whole set. When the row holding the tab stop scrolls away, the stop moves to the first row on screen. Typing matches each item's 'text-field', which is the first 'data-field' of the row template by default, or the item itself when it is a string or a number. Each row says its place in the whole set with 'aria-posinset' and 'aria-setsize', so a screen reader says "4,000 of 10,000". The row holding focus stays drawn when it scrolls out. **Selecting.** 'selection-mode' makes the list a list box a reader chooses from: 'single' selects one item and 'multiple' any number. Space or a press selects an item, Shift with Space, an arrow, Home, End or a press takes in the items from the last one chosen, and Control or Command with A selects them all, in 'multiple'. 'value' holds the chosen items' keys, separated by commas, in the order of the set: 'key-field' names each item's key, and a string or a number item is its own key. A change asks with 'helix-before-change' and tells with 'change'. Each row is an 'option' marked 'aria-selected', so a row's own links and buttons are not reached there: keep those to a list without 'selection-mode'. **Loading more.** 'helix-range-change' fires as the items on screen change, and 'range' holds them. 'helix-load-more' fires once a reader is within one screen of the end, once for each length of the set: add to 'items' and it can fire again. While you fetch, set 'loading': the list is busy, and a row after the last item says "Loading more" ('loading-label', or your own content in the 'loading' slot). 'scrollToIndex' takes a reader to an item. **Row height.** Rows are placed by 'estimate' until they are drawn. Then the list reads the drawn rows' height once and places every row by it, so a wrong estimate still reaches the last item. Set 'measured' for rows of different heights. Once the list draws rows of different heights, such as rows that wrap on a narrow screen, it places each row by its own height whether 'measured' is set or not. The list follows its source. A new 'items' array, an edit to the script's text, or a script replaced under the same id draws the new rows. A row that stays in view keeps its element as the list scrolls. The viewport scrolls on this tier. It carries 'data-scroller', and 'core' ships '[data-scroller] { overflow: auto }' into every shadow root, so 'scrollTop' works with no stylesheet. You still need to set a block size. */
17682
+ /** The items arrive as data, in one of two ways: - 'items' takes an array. A framework sets it as a property, and React hydration keeps it. - 'for' names a '<script type="application/json">' that holds an array, which a server sends as markup. Each item is drawn into a row in one of two ways: - 'renderItem' is a function from an item and its index to the row's content: a Lit template, a string, or a DOM node. - A '<template>' child defines one row. 'data-field="name"' fills an element with the item's 'name' as text, and 'data-field-href="url"' writes the item's 'url' into 'href', the same for any attribute. A field may be a path of keys, such as 'author.name'. Rows are your markup in the light DOM, so your stylesheet styles them. **A grid.** 'columns' lays the items out that many to a line, as a grid of equal columns, and windows the set a line at a time, as React Aria's grid layout does. Each item draws one element, a cell of the grid, and 'estimate' is the height of a line. Space the items with padding inside each one, which the list measures with the line. **Keyboard.** The list is one tab stop. | Key | What it does | |---|---| | Down, Up | Moves to the next or the previous item, or in a grid to the item in the same column on the next or the previous line. | | Right, Left | In a grid, moves to the next or the previous item along the line, the other way round on a right-to-left page. | | Home, End | Moves to the first or the last item. | | Page Down, Page Up | Moves by the number of items, or of lines in a grid, on screen. | | A letter or a word | Moves to the next item whose text starts with what you typed. | | Tab | Moves into the focused row's own links and buttons, then out of the list. | An item that is not drawn is scrolled into view and focused, so a keyboard reaches the whole set. When the row holding the tab stop scrolls away, the stop moves to the first row on screen. Typing matches each item's 'text-field', which is the first 'data-field' of the row template by default, or the item itself when it is a string or a number. Each row says its place in the whole set with 'aria-posinset' and 'aria-setsize', so a screen reader says "4,000 of 10,000". The row holding focus stays drawn when it scrolls out. **Selecting.** 'selection-mode' makes the list a list box a reader chooses from: 'single' selects one item and 'multiple' any number. Space or a press selects an item, Shift with Space, an arrow, Home, End or a press takes in the items from the last one chosen, and Control or Command with A selects them all, in 'multiple'. 'value' holds the chosen items' keys, separated by commas, in the order of the set: 'key-field' names each item's key, and a string or a number item is its own key. A change asks with 'helix-before-change' and tells with 'change'. Each row is an 'option' marked 'aria-selected', so a row's own links and buttons are not reached there: keep those to a list without 'selection-mode'. **Loading more.** 'helix-range-change' fires as the items on screen change, and 'range' holds them. 'helix-load-more' fires once a reader is within one screen of the end, once for each length of the set: add to 'items' and it can fire again. While you fetch, set 'loading': the list is busy, and a row after the last item says "Loading more" ('loading-label', or your own content in the 'loading' slot). 'scrollToIndex' takes a reader to an item. **An empty list.** Set 'empty-label', or put your own content in the 'empty' slot, for a row shown when there are no items and none are loading, such as "No messages yet" and a link to write one. Without either, an empty list shows nothing, since a list whose items have not arrived yet has not said it has none. **Row height.** Rows are placed by 'estimate' until they are drawn. Then the list reads the drawn rows' height once and places every row by it, so a wrong estimate still reaches the last item. Set 'measured' for rows of different heights. Once the list draws rows of different heights, such as rows that wrap on a narrow screen, it places each row by its own height whether 'measured' is set or not. The list follows its source. A new 'items' array, an edit to the script's text, or a script replaced under the same id draws the new rows. A row that stays in view keeps its element as the list scrolls. The viewport scrolls on this tier. It carries 'data-scroller', and 'core' ships '[data-scroller] { overflow: auto }' into every shadow root, so 'scrollTop' works with no stylesheet. You still need to set a block size. */
17531
17683
  "helix-headless-virtual-list": DefineCustomElement<
17532
17684
  HelixHeadlessVirtualList,
17533
17685
  HelixHeadlessVirtualListVueProps,
package/types/words.d.ts CHANGED
@@ -111,9 +111,11 @@ declare module '@fusion.dev/helix-core' {
111
111
  }
112
112
  'helix-callout': {
113
113
  /**
114
- * The dismiss control's label, read by screen readers.
114
+ * The dismiss button's name, read by screen readers, with `{label}` for
115
+ * what the callout is called: its heading, or the tone's name where it has
116
+ * none.
115
117
  *
116
- * English: `Dismiss`
118
+ * English: `Dismiss {label}`
117
119
  */
118
120
  dismissLabel: Message
119
121
  /**