@fusion.dev/helix 0.144.0 → 0.145.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 (113) hide show
  1. package/custom-elements.json +9978 -916
  2. package/dist/accordion/item/accordion-item.css.js +14 -3
  3. package/dist/accordion/item/accordion-item.d.ts +2 -0
  4. package/dist/aura/palette.d.ts +38 -0
  5. package/dist/aura/palette.js +22 -0
  6. package/dist/aura/root/aura-root.css.js +24 -3
  7. package/dist/aura/root/aura-root.d.ts +42 -7
  8. package/dist/aura/root/aura-root.js +31 -25
  9. package/dist/breadcrumbs/breadcrumb/breadcrumb.css.js +7 -7
  10. package/dist/breadcrumbs/breadcrumb/breadcrumb.d.ts +5 -0
  11. package/dist/breadcrumbs/root/breadcrumbs-root.css.js +1 -1
  12. package/dist/breadcrumbs/root/breadcrumbs-root.d.ts +3 -0
  13. package/dist/breadcrumbs/root/breadcrumbs-root.js +2 -0
  14. package/dist/button-group/root/button-group-root.d.ts +3 -0
  15. package/dist/canvas/root/canvas-root.css.js +1 -0
  16. package/dist/carousel/root/carousel-root.css.js +17 -1
  17. package/dist/data-table/root/data-table-root.css.js +63 -0
  18. package/dist/data-table/root/data-table-root.d.ts +1 -0
  19. package/dist/description-list/item/description-list-item.css.js +11 -0
  20. package/dist/drilldown/item/drilldown-item.css.js +2 -1
  21. package/dist/drilldown/root/drilldown-root.css.js +2 -1
  22. package/dist/element-events.generated.js +58 -9
  23. package/dist/flex/root/flex-root.css.js +134 -9
  24. package/dist/flex/root/flex-root.d.ts +51 -5
  25. package/dist/flex/root/flex-root.js +17 -1
  26. package/dist/grid/root/grid-root.css.js +114 -11
  27. package/dist/grid/root/grid-root.d.ts +37 -0
  28. package/dist/grid/root/grid-root.js +13 -1
  29. package/dist/list/item/list-item.css.js +21 -1
  30. package/dist/list/item/list-item.d.ts +3 -0
  31. package/dist/list/root/list-root.css.js +13 -1
  32. package/dist/menu/index.d.ts +1 -0
  33. package/dist/menu/index.js +1 -0
  34. package/dist/menu/item/menu-item.css.js +15 -1
  35. package/dist/menu/item/menu-item.d.ts +3 -0
  36. package/dist/menu/item/menu-item.js +2 -0
  37. package/dist/menu/section/menu-section.css.d.ts +1 -0
  38. package/dist/menu/section/menu-section.css.js +14 -0
  39. package/dist/menu/section/menu-section.d.ts +24 -0
  40. package/dist/menu/section/menu-section.js +16 -0
  41. package/dist/navigation/root/navigation-root.css.js +3 -2
  42. package/dist/navigation/root/navigation-root.d.ts +6 -0
  43. package/dist/notifications/root/notifications-root.css.js +24 -1
  44. package/dist/notifications/root/notifications-root.d.ts +1 -0
  45. package/dist/object-inspector/root/object-inspector-root.css.js +36 -1
  46. package/dist/object-inspector/root/object-inspector-root.d.ts +4 -1
  47. package/dist/object-inspector/root/object-inspector-root.js +2 -1
  48. package/dist/orb/index.d.ts +1 -1
  49. package/dist/orb/index.js +1 -1
  50. package/dist/orb/root/orb-root.d.ts +31 -5
  51. package/dist/orb/root/orb-root.js +33 -4
  52. package/dist/outline/root/outline-root.css.js +10 -0
  53. package/dist/outline/root/outline-root.d.ts +7 -0
  54. package/dist/sandbox/frame.d.ts +63 -0
  55. package/dist/sandbox/frame.js +132 -0
  56. package/dist/sandbox/index.d.ts +1 -0
  57. package/dist/sandbox/index.js +1 -0
  58. package/dist/sandbox/levels.d.ts +10 -0
  59. package/dist/sandbox/levels.js +5 -0
  60. package/dist/sandbox/root/sandbox-root.d.ts +3 -0
  61. package/dist/sandbox/root/sandbox-root.js +13 -3
  62. package/dist/sandbox/source/sandbox-source.d.ts +1 -0
  63. package/dist/sandbox/source/sandbox-source.js +7 -3
  64. package/dist/sandbox/terminal/sandbox-terminal.css.js +39 -0
  65. package/dist/sandbox/terminal/sandbox-terminal.d.ts +42 -1
  66. package/dist/sandbox/terminal/sandbox-terminal.js +47 -3
  67. package/dist/scroll-area/root/scroll-area-root.css.js +83 -1
  68. package/dist/scroll-area/root/scroll-area-root.d.ts +6 -0
  69. package/dist/skip-link/root/skip-link-root.css.js +8 -8
  70. package/dist/skip-link/root/skip-link-root.d.ts +9 -0
  71. package/dist/speed-dial/item/speed-dial-item.css.js +11 -4
  72. package/dist/speed-dial/item/speed-dial-item.d.ts +4 -0
  73. package/dist/speed-dial/root/speed-dial-root.css.js +7 -3
  74. package/dist/speed-dial/root/speed-dial-root.d.ts +9 -0
  75. package/dist/speed-dial/root/speed-dial-root.js +4 -0
  76. package/dist/steps/step/step.js +2 -1
  77. package/dist/table/root/table-root.css.js +18 -0
  78. package/dist/table/root/table-root.d.ts +6 -0
  79. package/dist/table/root/table-root.js +2 -0
  80. package/dist/table/row/table-row.css.js +18 -0
  81. package/dist/table/row/table-row.d.ts +2 -0
  82. package/dist/table/row/table-row.js +2 -0
  83. package/dist/tabs/panel/tab-panel.css.js +5 -1
  84. package/dist/tabs/root/tabs-root.css.js +56 -1
  85. package/dist/tabs/tab/tab.css.js +5 -1
  86. package/dist/text/clamp.d.ts +8 -0
  87. package/dist/text/clamp.js +1 -0
  88. package/dist/text/root/text-root.css.js +85 -45
  89. package/dist/text/root/text-root.d.ts +48 -7
  90. package/dist/text/root/text-root.js +17 -11
  91. package/dist/timeline/group/timeline-group.css.d.ts +1 -0
  92. package/dist/timeline/group/timeline-group.css.js +32 -0
  93. package/dist/timeline/group/timeline-group.d.ts +25 -0
  94. package/dist/timeline/group/timeline-group.js +16 -0
  95. package/dist/timeline/index.d.ts +1 -0
  96. package/dist/timeline/index.js +1 -0
  97. package/dist/timeline/item/timeline-item.css.js +43 -16
  98. package/dist/timeline/root/timeline-root.css.js +56 -0
  99. package/dist/timeline/root/timeline-root.d.ts +26 -0
  100. package/dist/timeline/root/timeline-root.js +7 -0
  101. package/dist/toolbar/root/toolbar-root.css.js +3 -0
  102. package/dist/toolbar/root/toolbar-root.d.ts +3 -0
  103. package/dist/tree/item/tree-item.css.js +72 -0
  104. package/dist/tree/item/tree-item.d.ts +10 -0
  105. package/dist/video/root/video-root.css.js +6 -0
  106. package/dist/video/root/video-root.d.ts +3 -0
  107. package/dist/virtual-list/root/virtual-list-root.css.js +5 -0
  108. package/dist/virtual-list/root/virtual-list-root.d.ts +4 -3
  109. package/lint.json +1 -1
  110. package/package.json +6 -6
  111. package/types/jsx.d.ts +4033 -671
  112. package/types/svelte.d.ts +2 -0
  113. package/types/vue.d.ts +1078 -202
package/types/vue.d.ts CHANGED
@@ -82,6 +82,7 @@ import type {
82
82
  HelixMegamenu,
83
83
  HelixMenuItem,
84
84
  HelixMenu,
85
+ HelixMenuSection,
85
86
  HelixMeter,
86
87
  HelixNavigation,
87
88
  HelixNotificationGroup,
@@ -138,6 +139,7 @@ import type {
138
139
  HelixTextarea,
139
140
  HelixTimeInput,
140
141
  HelixTimePicker,
142
+ HelixTimelineGroup,
141
143
  HelixTimelineItem,
142
144
  HelixTimeline,
143
145
  HelixToastItem,
@@ -161,6 +163,7 @@ import type {
161
163
  HelixBeforeOpenEvent,
162
164
  HelixDismissEvent,
163
165
  HelixScrolledEvent,
166
+ HelixAuraFallbackEvent,
164
167
  HelixBeforeMoveEvent,
165
168
  HelixBeforeReconnectEvent,
166
169
  HelixBeforeRelabelEvent,
@@ -176,6 +179,7 @@ import type {
176
179
  HelixSelectEvent,
177
180
  HelixActivateEvent,
178
181
  HelixSendEvent,
182
+ HelixTypingEvent,
179
183
  HelixBeforePinEvent,
180
184
  HelixHistoryEvent,
181
185
  HelixPinEvent,
@@ -186,7 +190,10 @@ import type {
186
190
  HelixSampleStartEvent,
187
191
  HelixCreateEvent,
188
192
  HelixFilterEvent,
193
+ HelixCopyErrorEvent,
194
+ HelixExpandEvent,
189
195
  HelixFilteredEvent,
196
+ HelixLoadMoreEvent,
190
197
  HelixNavigateEvent,
191
198
  HelixReorderEvent,
192
199
  HelixReorderedEvent,
@@ -204,7 +211,9 @@ import type {
204
211
  HelixGraphSignalEvent,
205
212
  HelixGraphZoomEvent,
206
213
  HelixResizeEvent,
214
+ HelixClearEvent,
207
215
  HelixShortcutEvent,
216
+ HelixActionEvent,
208
217
  HelixMapPartChangeEvent,
209
218
  HelixMapClusterEvent,
210
219
  HelixMapPanEvent,
@@ -212,6 +221,7 @@ import type {
212
221
  HelixMapRotateEvent,
213
222
  HelixMapTiltEvent,
214
223
  HelixMapZoomEvent,
224
+ HelixToggleEvent,
215
225
  HelixReadEvent,
216
226
  HelixCompleteEvent,
217
227
  HelixConsoleEvent,
@@ -219,13 +229,19 @@ import type {
219
229
  HelixBeforePanelResizeEvent,
220
230
  HelixBeforeSplitEvent,
221
231
  HelixCaretEvent,
232
+ HelixEditEvent,
233
+ HelixPanelResizeEvent,
234
+ HelixSplitEvent,
222
235
  HelixBeforeCollapseEvent,
223
236
  HelixBeforeResizeEvent,
224
237
  HelixCollapseEvent,
225
238
  HelixResizedEvent,
226
239
  HelixTourAskEvent,
240
+ HelixLoadEvent,
241
+ HelixEndEvent,
227
242
  HelixNextEvent,
228
243
  HelixPreviousEvent,
244
+ HelixRangeChangeEvent,
229
245
  } from "@fusion.dev/helix";
230
246
  import type { HTMLAttributes, PublicProps, EmitFn, EmitsToProps } from "vue";
231
247
 
@@ -330,6 +346,22 @@ too. */
330
346
  Unset takes the accordion's `heading-level`, and 3 where that is unset
331
347
  too. */
332
348
  headingLevel?: (HelixAccordionItem["headingLevel"]) | undefined;
349
+ /** Whether find in page searches the section while it is closed, and opens it
350
+ on a match.
351
+
352
+ Off by default. A closed section is then `hidden="until-found"`, which
353
+ hides through `content-visibility`, so a stylesheet that animates the
354
+ section closed shows an empty box for the length of that animation. The
355
+ accordion's own `hidden-until-found` turns it on for every section. */
356
+ "hidden-until-found"?: (HelixAccordionItem["hiddenUntilFound"]) | undefined;
357
+ /** Whether find in page searches the section while it is closed, and opens it
358
+ on a match.
359
+
360
+ Off by default. A closed section is then `hidden="until-found"`, which
361
+ hides through `content-visibility`, so a stylesheet that animates the
362
+ section closed shows an empty box for the length of that animation. The
363
+ accordion's own `hidden-until-found` turns it on for every section. */
364
+ hiddenUntilFound?: (HelixAccordionItem["hiddenUntilFound"]) | undefined;
333
365
  /** A group name. Opening an item closes the other items with the same name,
334
366
  as `<details name>` does.
335
367
 
@@ -390,6 +422,14 @@ Unset is 3. An item's own `heading-level` wins over this. */
390
422
 
391
423
  Unset is 3. An item's own `heading-level` wins over this. */
392
424
  headingLevel?: (HelixAccordion["headingLevel"]) | undefined;
425
+ /** Whether find in page searches every closed section, and opens the one it
426
+ matches in. Each item's own `hidden-until-found` turns it on for that item
427
+ alone. */
428
+ "hidden-until-found"?: (HelixAccordion["hiddenUntilFound"]) | undefined;
429
+ /** Whether find in page searches every closed section, and opens the one it
430
+ matches in. Each item's own `hidden-until-found` turns it on for that item
431
+ alone. */
432
+ hiddenUntilFound?: (HelixAccordion["hiddenUntilFound"]) | undefined;
393
433
  /** How many sections may be open at once.
394
434
 
395
435
  Absent is `multiple`, so nothing closes unexpectedly and the default costs
@@ -449,6 +489,12 @@ derive one rather than dash-casing it, so this would otherwise be
449
489
  reachable only as `dismisslabel`, which nobody would guess and no linter
450
490
  would catch. */
451
491
  dismissLabel?: (HelixAnnouncement["dismissLabel"]) | undefined;
492
+ /** How long the announcement stays, in milliseconds, before it sends
493
+ `helix-dismiss`. When it is not set, it stays until it is dismissed.
494
+
495
+ Read once when the announcement is first rendered, as `Toast` reads its
496
+ own. The clock stops while the pointer or focus is on the announcement. */
497
+ duration?: (HelixAnnouncement["duration"]) | undefined;
452
498
  /** The band's color.
453
499
 
454
500
  Paint only: unlike `Callout`, no value here draws a mark, changes the label,
@@ -473,7 +519,7 @@ axes, which is the test the registry answers to. */
473
519
  };
474
520
 
475
521
  export type HelixAnnouncementVueEvents = {
476
- /** The dismiss button was pressed. The announcement does not remove itself, so remove it in response. Cancelable. */
522
+ /** The dismiss button was pressed, or `duration` ran out. The announcement does not remove itself, so remove it in response. Cancelable. */
477
523
  "helix-dismiss": HelixAnnouncementHelixDismissElementEvent;
478
524
  };
479
525
 
@@ -636,6 +682,12 @@ fills the height and the bands are shares of it. */
636
682
 
637
683
  export type HelixAreaChartVueEvents = {};
638
684
 
685
+ /** `HelixAura` component event */
686
+ export type HelixAuraElementEvent<E = Event> = TypedEvent<HelixAura, E>;
687
+ /** `helix-aura-fallback` event type */
688
+ export type HelixAuraHelixAuraFallbackElementEvent =
689
+ HelixAuraElementEvent<HelixAuraFallbackEvent>;
690
+
639
691
  export type HelixAuraVueProps = {
640
692
  /** How soft the falloff is, `0` tight and `1` diffuse. */
641
693
  bloom?: (HelixAura["bloom"]) | undefined;
@@ -745,7 +797,10 @@ states. */
745
797
  variant?: (HelixAura["variant"]) | undefined;
746
798
  };
747
799
 
748
- export type HelixAuraVueEvents = {};
800
+ export type HelixAuraVueEvents = {
801
+ /** Fired each time the aura stops drawing its shader and shows its gradient, with the reason. */
802
+ "helix-aura-fallback": HelixAuraHelixAuraFallbackElementEvent;
803
+ };
749
804
 
750
805
  export type HelixAvatarGroupVueProps = {
751
806
  /** Accessible name for the set, such as "Reviewers". */
@@ -1149,6 +1204,12 @@ export type HelixBreadcrumbsVueProps = {
1149
1204
  /** The landmark's name, read by screen readers. An `aria-label` on the host
1150
1205
  wins over it. */
1151
1206
  label?: (HelixBreadcrumbs["label"]) | undefined;
1207
+ /** The trail as data, drawn as crumbs before any you slot. The last item is the
1208
+ current page.
1209
+
1210
+ React Aria's `items`. A property only: a trail is built by script, and an
1211
+ attribute would put the whole path into the markup twice. */
1212
+ items?: (HelixBreadcrumbs["items"]) | undefined;
1152
1213
  };
1153
1214
 
1154
1215
  export type HelixBreadcrumbsVueEvents = {};
@@ -2402,6 +2463,18 @@ read out in English. */
2402
2463
  label?: (HelixCarousel["label"]) | undefined;
2403
2464
  /** Whether moving past either end wraps to the other. */
2404
2465
  loop?: (HelixCarousel["loop"]) | undefined;
2466
+ /** Whether a mouse can drag the track from slide to slide.
2467
+
2468
+ Off unless asked for, because a press on a slide is then the start of a
2469
+ drag, and text in a slide can no longer be selected with the mouse. A drag
2470
+ of a few pixels or less is still a press. */
2471
+ "mouse-drag"?: (HelixCarousel["mouseDrag"]) | undefined;
2472
+ /** Whether a mouse can drag the track from slide to slide.
2473
+
2474
+ Off unless asked for, because a press on a slide is then the start of a
2475
+ drag, and text in a slide can no longer be selected with the mouse. A drag
2476
+ of a few pixels or less is still a press. */
2477
+ mouseDrag?: (HelixCarousel["mouseDrag"]) | undefined;
2405
2478
  /** The name of the control that moves to the next slide. */
2406
2479
  "next-label"?: (HelixCarousel["nextLabel"]) | undefined;
2407
2480
  /** The name of the control that moves to the next slide. */
@@ -2543,6 +2616,14 @@ case is the absent attribute, and the styles read it that way. */
2543
2616
  "previous-label"?: (HelixCarousel["previousLabel"]) | undefined;
2544
2617
  /** The name of the control that moves to the previous slide. */
2545
2618
  previousLabel?: (HelixCarousel["previousLabel"]) | undefined;
2619
+ /** The word screen readers announce in place of the carousel's role, set as
2620
+ `aria-roledescription`. Translate it with the rest of your text, or empty
2621
+ it to leave the role as `group`. */
2622
+ "role-label"?: (HelixCarousel["roleLabel"]) | undefined;
2623
+ /** The word screen readers announce in place of the carousel's role, set as
2624
+ `aria-roledescription`. Translate it with the rest of your text, or empty
2625
+ it to leave the role as `group`. */
2626
+ roleLabel?: (HelixCarousel["roleLabel"]) | undefined;
2546
2627
  /** The name of each slide, with `{index}` and `{count}` filled in. */
2547
2628
  "slide-label"?: (HelixCarousel["slideLabel"]) | undefined;
2548
2629
  /** The name of each slide, with `{index}` and `{count}` filled in. */
@@ -2578,10 +2659,11 @@ export type HelixChatComposerElementEvent<E = Event> = TypedEvent<
2578
2659
  /** `helix-send` event type */
2579
2660
  export type HelixChatComposerHelixSendElementEvent =
2580
2661
  HelixChatComposerElementEvent<HelixSendEvent>;
2662
+ /** `helix-typing` event type */
2663
+ export type HelixChatComposerHelixTypingElementEvent =
2664
+ HelixChatComposerElementEvent<HelixTypingEvent>;
2581
2665
 
2582
2666
  export type HelixChatComposerVueProps = {
2583
- /** Whether the composer blocks input, such as while a turn is being sent. */
2584
- disabled?: (HelixChatComposer["disabled"]) | undefined;
2585
2667
  /** The field's name, read by screen readers. */
2586
2668
  label?: (HelixChatComposer["label"]) | undefined;
2587
2669
  /** Placeholder text shown in an empty field. */
@@ -2608,16 +2690,50 @@ button only.
2608
2690
  `button` is what a composer holding several paragraphs wants, where Enter
2609
2691
  has to mean a new line and nothing else. */
2610
2692
  submitOn?: (HelixChatComposer["submitOn"]) | undefined;
2693
+ /** How long after the last keystroke the user still counts as typing, in
2694
+ milliseconds. */
2695
+ "typing-timeout"?: (HelixChatComposer["typingTimeout"] | `${number}`) | undefined;
2696
+ /** How long after the last keystroke the user still counts as typing, in
2697
+ milliseconds. */
2698
+ typingTimeout?: (HelixChatComposer["typingTimeout"]) | undefined;
2611
2699
  /** The text the user has written.
2612
2700
 
2613
2701
  It follows typing, so reading it gives the draft. Set it to seed a draft or
2614
2702
  to replace the one in the field, and set it to `''` to clear it. */
2615
2703
  value?: (HelixChatComposer["value"]) | undefined;
2704
+ /** Whether the control is disabled and cannot be used.
2705
+
2706
+ Reflected, because the styled tier selects on it, and mirrored to
2707
+ `aria-disabled` rather than removing the element from the accessibility
2708
+ tree, so a screen reader can still announce that the control exists.
2709
+
2710
+ The mirror itself is in `willUpdate` below, here rather than in each
2711
+ control, because here is where `disabled` is. */
2712
+ disabled?: (HelixChatComposer["disabled"]) | undefined;
2713
+ /** The name the control's value is submitted under.
2714
+
2715
+ **Reflected, and it is the exception to "reflect only what CSS selects
2716
+ on".** The platform builds a form's entry list from the `name` *content
2717
+ attribute*, not from the property, so a control named through the property
2718
+ submitted under no name at all and was silently dropped. Measured: two
2719
+ inputs in one form, one named by attribute and one by property, and the
2720
+ form carried a single entry.
2721
+
2722
+ Safe for a React consumer, which is what the rule is protecting: React
2723
+ renders a custom element's props as attributes on the server, so the name
2724
+ is already in the markup being hydrated and reflecting it writes what is
2725
+ there. It is only a change to the markup when a consumer assigns it
2726
+ imperatively later, and nothing is hydrating by then.
2727
+
2728
+ Here rather than on each control. */
2729
+ name?: (HelixChatComposer["name"]) | undefined;
2616
2730
  };
2617
2731
 
2618
2732
  export type HelixChatComposerVueEvents = {
2619
2733
  /** Fired when the user sends their turn, and cancelable. */
2620
2734
  "helix-send": HelixChatComposerHelixSendElementEvent;
2735
+ /** The user started or stopped writing, with `typing` saying which, as the composer's `typing` does. */
2736
+ "helix-typing": HelixChatComposerHelixTypingElementEvent;
2621
2737
  /** The user changed the text. Read it from `value`, for a typing indicator or a saved draft. Sent on the composer and does not bubble. */
2622
2738
  input: HelixChatComposerElementEvent;
2623
2739
  };
@@ -2662,6 +2778,18 @@ participants is the ordinary case for anything worth building this for.
2662
2778
  `me` and `them` are the conventional values and the stylesheet knows them;
2663
2779
  anything else is a name the consumer styles. */
2664
2780
  author?: (HelixChatMessage["author"]) | undefined;
2781
+ /** The author's name, as a screen reader says it at the start of the turn,
2782
+ such as "Support" or "Ada Lovelace".
2783
+
2784
+ Empty reads "You" for `me`, the `author` itself where it is a name, and
2785
+ nothing for `them`. */
2786
+ "author-label"?: (HelixChatMessage["authorLabel"]) | undefined;
2787
+ /** The author's name, as a screen reader says it at the start of the turn,
2788
+ such as "Support" or "Ada Lovelace".
2789
+
2790
+ Empty reads "You" for `me`, the `author` itself where it is a name, and
2791
+ nothing for `them`. */
2792
+ authorLabel?: (HelixChatMessage["authorLabel"]) | undefined;
2665
2793
  /** Label for a message that did not send. */
2666
2794
  "failed-label"?: (HelixChatMessage["failedLabel"]) | undefined;
2667
2795
  /** Label for a message that did not send. */
@@ -2753,6 +2881,18 @@ only the consumer knows whether the server has anything older. */
2753
2881
  historyText?: (HelixChat["historyText"]) | undefined;
2754
2882
  /** The conversation's name, read by screen readers. */
2755
2883
  label?: (HelixChat["label"]) | undefined;
2884
+ /** The word a screen reader says for `me` when it names a turn. */
2885
+ "me-label"?: (HelixChat["meLabel"]) | undefined;
2886
+ /** The word a screen reader says for `me` when it names a turn. */
2887
+ meLabel?: (HelixChat["meLabel"]) | undefined;
2888
+ /** The name a screen reader gives a turn with both an author and a time.
2889
+ `{author}` is who wrote it and `{time}` is when, as the turn shows it. A
2890
+ turn with only one of the two is named by that one. */
2891
+ "message-label"?: (HelixChat["messageLabel"]) | undefined;
2892
+ /** The name a screen reader gives a turn with both an author and a time.
2893
+ `{author}` is who wrote it and `{time}` is when, as the turn shows it. A
2894
+ turn with only one of the two is named by that one. */
2895
+ messageLabel?: (HelixChat["messageLabel"]) | undefined;
2756
2896
  /** Whether the transcript follows new turns to the bottom.
2757
2897
 
2758
2898
  The reader's scrolling asks first: `helix-before-pin` is cancelable, so a
@@ -3056,9 +3196,17 @@ unwrapped, since a wrapped line would take one number and several rows. */
3056
3196
  "copied-label"?: (HelixCodeBlock["copiedLabel"]) | undefined;
3057
3197
  /** The copy button's name and tooltip text after a copy. */
3058
3198
  copiedLabel?: (HelixCodeBlock["copiedLabel"]) | undefined;
3059
- /** The copy button's name and tooltip text before a copy. */
3199
+ /** The copy button's name and tooltip text before a copy.
3200
+
3201
+ Where the block has a name, the button says it too, such as "Copy code,
3202
+ app.ts", so each copy button on a page with several blocks is told apart.
3203
+ In a diff, that is each file's own name. */
3060
3204
  "copy-label"?: (HelixCodeBlock["copyLabel"]) | undefined;
3061
- /** The copy button's name and tooltip text before a copy. */
3205
+ /** The copy button's name and tooltip text before a copy.
3206
+
3207
+ Where the block has a name, the button says it too, such as "Copy code,
3208
+ app.ts", so each copy button on a page with several blocks is told apart.
3209
+ In a diff, that is each file's own name. */
3062
3210
  copyLabel?: (HelixCodeBlock["copyLabel"]) | undefined;
3063
3211
  /** Whether the content is a unified diff, drawn as the lines it changed.
3064
3212
 
@@ -4072,6 +4220,9 @@ export type HelixCopyButtonElementEvent<E = Event> = TypedEvent<
4072
4220
  /** `helix-copy` event type */
4073
4221
  export type HelixCopyButtonHelixCopyElementEvent =
4074
4222
  HelixCopyButtonElementEvent<HelixCopyEvent>;
4223
+ /** `helix-copy-error` event type */
4224
+ export type HelixCopyButtonHelixCopyErrorElementEvent =
4225
+ HelixCopyButtonElementEvent<HelixCopyErrorEvent>;
4075
4226
 
4076
4227
  export type HelixCopyButtonVueProps = {
4077
4228
  /** How much fill the control is drawn with.
@@ -4131,72 +4282,6 @@ whatever its `type`. Declared here so its own page says what it holds. */
4131
4282
  value?: (HelixCopyButton["value"]) | undefined;
4132
4283
  /** */
4133
4284
  "aria-label"?: unknown;
4134
- /** What to send when the button is activated, and what to send it to.
4135
-
4136
- The platform's invoker attributes, forwarded onto the inner `<button>`
4137
- rather than left on the host: only a real button is recognized as an
4138
- invoker, so `commandfor` written on a custom element resolves nothing and
4139
- the trigger silently does nothing at all. A wrapper has to hand them down,
4140
- the same way `label` becomes `aria-label` in there.
4141
-
4142
- ```html
4143
- <helix-headless-button commandfor="confirm" command="--show">Delete…</helix-headless-button>
4144
- ```
4145
-
4146
- `commandFor` spells its attribute out, because Lit lowercases a property
4147
- name to derive one rather than dash-casing it, and what a consumer writes
4148
- is the platform's `commandfor`. */
4149
- command?: (HelixCopyButton["command"]) | undefined;
4150
- /** The id of the element the command is sent to. */
4151
- commandfor?: (HelixCopyButton["commandFor"]) | undefined;
4152
- /** The id of the element the command is sent to. */
4153
- commandFor?: (HelixCopyButton["commandFor"]) | undefined;
4154
- /** Where this button's submission goes, overriding the form's own.
4155
-
4156
- **The five `form*` overrides work by writing the form and putting it back**,
4157
- which is the only mechanism available and is closer to the platform than it
4158
- sounds. `requestSubmit(submitter)` is how a native submitter carries these,
4159
- and it refuses ours twice over: the inner `<button>` is `type="button"` so
4160
- it is not a submit button, and it sits in this shadow root so its form owner
4161
- is not the consumer's form. Both throw. So the submission is started with no
4162
- submitter and the overrides are applied to the form for the duration of it.
4163
-
4164
- The whole submit algorithm runs synchronously inside `requestSubmit()`, so
4165
- the window is one call and a `finally` closes it whether or not a listener
4166
- refused. What a `submit` handler observes during that window is the form a
4167
- native submitter would have given it, which is the point. */
4168
- formaction?: (HelixCopyButton["formAction"]) | undefined;
4169
- /** Where this button's submission goes, overriding the form's own.
4170
-
4171
- **The five `form*` overrides work by writing the form and putting it back**,
4172
- which is the only mechanism available and is closer to the platform than it
4173
- sounds. `requestSubmit(submitter)` is how a native submitter carries these,
4174
- and it refuses ours twice over: the inner `<button>` is `type="button"` so
4175
- it is not a submit button, and it sits in this shadow root so its form owner
4176
- is not the consumer's form. Both throw. So the submission is started with no
4177
- submitter and the overrides are applied to the form for the duration of it.
4178
-
4179
- The whole submit algorithm runs synchronously inside `requestSubmit()`, so
4180
- the window is one call and a `finally` closes it whether or not a listener
4181
- refused. What a `submit` handler observes during that window is the form a
4182
- native submitter would have given it, which is the point. */
4183
- formAction?: (HelixCopyButton["formAction"]) | undefined;
4184
- /** How the submission is encoded, overriding the form's own. */
4185
- formenctype?: (HelixCopyButton["formEnctype"]) | undefined;
4186
- /** How the submission is encoded, overriding the form's own. */
4187
- formEnctype?: (HelixCopyButton["formEnctype"]) | undefined;
4188
- /** Which HTTP method the submission uses, overriding the form's own. */
4189
- formmethod?: (HelixCopyButton["formMethod"]) | undefined;
4190
- /** Which HTTP method the submission uses, overriding the form's own. */
4191
- formMethod?: (HelixCopyButton["formMethod"]) | undefined;
4192
- /** Whether this submission skips the form's validation. */
4193
- formnovalidate?: (HelixCopyButton["formNoValidate"]) | undefined;
4194
- /** Whether this submission skips the form's validation. */
4195
- formNoValidate?: (HelixCopyButton["formNoValidate"]) | undefined;
4196
- /** Which browsing context the response lands in, overriding the form's own. */
4197
- formtarget?: (HelixCopyButton["formTarget"]) | undefined;
4198
- /** Which browsing context the response lands in, overriding the form's own. */
4199
- formTarget?: (HelixCopyButton["formTarget"]) | undefined;
4200
4285
  /** Whether the action the button started is still running.
4201
4286
 
4202
4287
  A pending button keeps focus and stays in the tab order, and refuses every
@@ -4213,8 +4298,6 @@ a press, so focus stays where the reader left it. */
4213
4298
  "pending-label"?: (HelixCopyButton["pendingLabel"]) | undefined;
4214
4299
  /** What a reader hears when the button becomes pending while it has focus. */
4215
4300
  pendingLabel?: (HelixCopyButton["pendingLabel"]) | undefined;
4216
- /** What activating the button does to its form. */
4217
- type?: (HelixCopyButton["type"]) | undefined;
4218
4301
  /** Whether the control is disabled and cannot be used.
4219
4302
 
4220
4303
  Reflected, because the styled tier selects on it, and mirrored to
@@ -4241,31 +4324,6 @@ imperatively later, and nothing is hydrating by then.
4241
4324
 
4242
4325
  Here rather than on each control. */
4243
4326
  name?: (HelixCopyButton["name"]) | undefined;
4244
- /** Whether this button is a disclosure trigger, and whether its panel is open.
4245
-
4246
- **Set by whatever owns the panel, and a property rather than an attribute
4247
- for the reason `Menu` already states about its items**: an attribute
4248
- written onto a consumer's element after it upgrades is a hydration mismatch
4249
- waiting to happen. Measured 28 Aug 2026 against React 19.2.8, server markup
4250
- hydrated with the definitions loaded either side of `hydrateRoot`:
4251
- `Megamenu` and `SpeedDial` wrote `aria-expanded` onto the slotted trigger
4252
- and React reported "some attributes of the server rendered HTML didn't
4253
- match the client properties. This won't be patched up" in both orders;
4254
- `Popover` and `Menu`, which write nothing, were clean in both.
4255
-
4256
- **A property crosses that gap because React never looks at one.** It diffs
4257
- the attributes it rendered, and this one is `attribute: false`, so the state
4258
- travels to the inner `<button>` and lands inside a shadow root React does
4259
- not own and cannot compare. The consumer's own element is left exactly as
4260
- they served it and the reader is still told what the control does.
4261
-
4262
- `undefined` renders nothing at all, so a button that is not a trigger
4263
- carries no `aria-expanded`: the resting state is the attribute's absence,
4264
- which is the rule every reflected property here follows.
4265
-
4266
- A consumer who wants to say this statically writes `aria-expanded` on the
4267
- host instead, which `AriaForwardController` carries to the same place. */
4268
- expanded?: (HelixCopyButton["expanded"]) | undefined;
4269
4327
  /** Whether the button holds its group's tab stop.
4270
4328
 
4271
4329
  A toolbar keeps one tab stop across its children, and the obvious way to do
@@ -4277,14 +4335,6 @@ and the stop lands on the inner control inside the shadow root.
4277
4335
  No attribute, because it is coordination between elements rather than
4278
4336
  anything a consumer sets. */
4279
4337
  focusable?: (HelixCopyButton["focusable"]) | undefined;
4280
- /** What kind of panel this button opens, where it opens one: `menu` for a
4281
- `Menu`.
4282
-
4283
- Set by the component that owns the panel, as a property for the reason
4284
- `expanded` gives above. It is what makes a reader say the button opens a
4285
- menu. Read from Chromium's tree, a Menu's trigger was a plain button that
4286
- reported collapsed and expanded and no popup. */
4287
- popup?: (HelixCopyButton["popup"]) | undefined;
4288
4338
  /** The element this button's command is sent to, resolved.
4289
4339
 
4290
4340
  The platform's own accessor, because the resolution is otherwise kept
@@ -4298,8 +4348,8 @@ invoker without an id in the same tree needs. */
4298
4348
  export type HelixCopyButtonVueEvents = {
4299
4349
  /** Fired after the clipboard write succeeds. */
4300
4350
  "helix-copy": HelixCopyButtonHelixCopyElementEvent;
4301
- /** Fired when a press put nothing on the clipboard: the browser refused the write, or there was nothing to copy. */
4302
- "helix-copy-error": HelixCopyButtonElementEvent;
4351
+ /** Fired when a press put nothing on the clipboard: the browser did not allow the write, or there was nothing to copy. */
4352
+ "helix-copy-error": HelixCopyButtonHelixCopyErrorElementEvent;
4303
4353
  };
4304
4354
 
4305
4355
  /** `HelixDataTable` component event */
@@ -4310,12 +4360,18 @@ export type HelixDataTableElementEvent<E = Event> = TypedEvent<
4310
4360
  /** `helix-activate` event type */
4311
4361
  export type HelixDataTableHelixActivateElementEvent =
4312
4362
  HelixDataTableElementEvent<HelixActivateEvent>;
4363
+ /** `helix-expand` event type */
4364
+ export type HelixDataTableHelixExpandElementEvent =
4365
+ HelixDataTableElementEvent<HelixExpandEvent>;
4313
4366
  /** `helix-filter` event type */
4314
4367
  export type HelixDataTableHelixFilterElementEvent =
4315
4368
  HelixDataTableElementEvent<HelixFilterEvent>;
4316
4369
  /** `helix-filtered` event type */
4317
4370
  export type HelixDataTableHelixFilteredElementEvent =
4318
4371
  HelixDataTableElementEvent<HelixFilteredEvent>;
4372
+ /** `helix-load-more` event type */
4373
+ export type HelixDataTableHelixLoadMoreElementEvent =
4374
+ HelixDataTableElementEvent<HelixLoadMoreEvent>;
4319
4375
  /** `helix-navigate` event type */
4320
4376
  export type HelixDataTableHelixNavigateElementEvent =
4321
4377
  HelixDataTableElementEvent<HelixNavigateEvent>;
@@ -4357,6 +4413,24 @@ say that without the component knowing what a row looks like. */
4357
4413
  "ascending-label"?: (HelixDataTable["ascendingLabel"]) | undefined;
4358
4414
  /** The word for an ascending sort, in `sorted-label`. */
4359
4415
  ascendingLabel?: (HelixDataTable["ascendingLabel"]) | undefined;
4416
+ /** The field that holds a row's child rows, as an array. Set it, and `row-key`,
4417
+ and the grid becomes a tree grid.
4418
+
4419
+ Reflected, because the styled tier indents a tree grid's row headers by
4420
+ it. No default, so a table that sets none writes nothing onto its host. */
4421
+ "child-field"?: (HelixDataTable["childField"]) | undefined;
4422
+ /** The field that holds a row's child rows, as an array. Set it, and `row-key`,
4423
+ and the grid becomes a tree grid.
4424
+
4425
+ Reflected, because the styled tier indents a tree grid's row headers by
4426
+ it. No default, so a table that sets none writes nothing onto its host. */
4427
+ childField?: (HelixDataTable["childField"]) | undefined;
4428
+ /** The keys of the rows open at the start, separated by commas. Used until
4429
+ `expanded` is set. */
4430
+ "default-expanded"?: (HelixDataTable["defaultExpanded"]) | undefined;
4431
+ /** The keys of the rows open at the start, separated by commas. Used until
4432
+ `expanded` is set. */
4433
+ defaultExpanded?: (HelixDataTable["defaultExpanded"]) | undefined;
4360
4434
  /** The starting search query, used until `filter` is set. */
4361
4435
  "default-filter"?: (HelixDataTable["defaultFilter"]) | undefined;
4362
4436
  /** The starting search query, used until `filter` is set. */
@@ -4395,6 +4469,9 @@ replaces this with what each row came to as it draws. It still has to be
4395
4469
  close, because it is what the scrollbar is built from before anything has
4396
4470
  been measured. */
4397
4471
  estimate?: (HelixDataTable["estimate"]) | undefined;
4472
+ /** The keys of the open rows in a tree grid, separated by commas, the shape of
4473
+ `selected`. A reader's press writes it and then sends `helix-expand`. */
4474
+ expanded?: (HelixDataTable["expanded"]) | undefined;
4398
4475
  /** The search query. A row is shown when the query matches any of its columns.
4399
4476
 
4400
4477
  One query rather than a predicate per column, which is what a reader means
@@ -4409,6 +4486,22 @@ replaced with the page it jumps to. */
4409
4486
  gapLabel?: (HelixDataTable["gapLabel"]) | undefined;
4410
4487
  /** The grid's name, read by screen readers. */
4411
4488
  label?: (HelixDataTable["label"]) | undefined;
4489
+ /** Draws a row after the last one with a button that asks for more rows.
4490
+
4491
+ The button sends `helix-load-more`, and a `windowed` table sends it by
4492
+ itself once a reader scrolls within one screen of the end. Turn it off
4493
+ when there are no more rows to load. */
4494
+ "load-more"?: (HelixDataTable["loadMore"]) | undefined;
4495
+ /** Draws a row after the last one with a button that asks for more rows.
4496
+
4497
+ The button sends `helix-load-more`, and a `windowed` table sends it by
4498
+ itself once a reader scrolls within one screen of the end. Turn it off
4499
+ when there are no more rows to load. */
4500
+ loadMore?: (HelixDataTable["loadMore"]) | undefined;
4501
+ /** The words on the button in the `more` row. */
4502
+ "load-more-label"?: (HelixDataTable["loadMoreLabel"]) | undefined;
4503
+ /** The words on the button in the `more` row. */
4504
+ loadMoreLabel?: (HelixDataTable["loadMoreLabel"]) | undefined;
4412
4505
  /** Where filtering, sorting, and paging happen. `client` does them in the
4413
4506
  table, and `server` leaves them to your code.
4414
4507
 
@@ -4602,10 +4695,14 @@ holds and reordering it under them is a mutation they did not ask for. */
4602
4695
  export type HelixDataTableVueEvents = {
4603
4696
  /** Fired after the page changes, with the new page as a string in `detail.value`. */
4604
4697
  "helix-activate": HelixDataTableHelixActivateElementEvent;
4698
+ /** Fired after a row opens or closes, with every open row's key, separated by commas, which `expanded` also holds. */
4699
+ "helix-expand": HelixDataTableHelixExpandElementEvent;
4605
4700
  /** The search query is about to change. Cancelable: cancel it to keep the current query. */
4606
4701
  "helix-filter": HelixDataTableHelixFilterElementEvent;
4607
4702
  /** Fired after the search query changes, with the new query. */
4608
4703
  "helix-filtered": HelixDataTableHelixFilteredElementEvent;
4704
+ /** Fired when a reader asks for more rows, by the `load-more` row's button or by scrolling a `windowed` table near its end. */
4705
+ "helix-load-more": HelixDataTableHelixLoadMoreElementEvent;
4609
4706
  /** Another page was requested. Cancelable: cancel it to stay on the current page. */
4610
4707
  "helix-navigate": HelixDataTableHelixNavigateElementEvent;
4611
4708
  /** The columns are about to move. The event carries every field in the new order. Cancelable: cancel it to keep the current order. */
@@ -5371,6 +5468,9 @@ labels line up, and lining up is a fact about all of them.
5371
5468
  a reflecting default writes an attribute onto markup the consumer rendered,
5372
5469
  and React reports that as a hydration mismatch. */
5373
5470
  direction?: (HelixDescriptionList["direction"]) | undefined;
5471
+ /** The list's name, read by screen readers, such as "Server details". It
5472
+ makes the list a named group. */
5473
+ label?: (HelixDescriptionList["label"]) | undefined;
5374
5474
  };
5375
5475
 
5376
5476
  export type HelixDescriptionListVueEvents = {};
@@ -5851,14 +5951,6 @@ elements, and writing `tabindex` onto a host the consumer rendered is a
5851
5951
  change a React consumer's hydration reports and does not patch up. The stop
5852
5952
  lands inside this shadow root instead. */
5853
5953
  focusable?: (HelixDrilldownItem["focusable"]) | undefined;
5854
- /** Whether the page showing is the one this row is on.
5855
-
5856
- Written by the stack. */
5857
- onPage?: (HelixDrilldownItem["onPage"]) | undefined;
5858
- /** Whether this row's own page is the one showing.
5859
-
5860
- Written by the stack. */
5861
- showingPage?: (HelixDrilldownItem["showingPage"]) | undefined;
5862
5954
  };
5863
5955
 
5864
5956
  export type HelixDrilldownItemVueEvents = {
@@ -6412,6 +6504,18 @@ export type HelixFilterInputVueEvents = {
6412
6504
  };
6413
6505
 
6414
6506
  export type HelixFlexVueProps = {
6507
+ /** How the lines of a wrapping row share the space across it, set as
6508
+ `align-content`.
6509
+
6510
+ Named for the CSS property it sets, the way `alignItems` is. It moves
6511
+ nothing in a row that does not wrap, which has one line. */
6512
+ "align-content"?: (HelixFlex["alignContent"]) | undefined;
6513
+ /** How the lines of a wrapping row share the space across it, set as
6514
+ `align-content`.
6515
+
6516
+ Named for the CSS property it sets, the way `alignItems` is. It moves
6517
+ nothing in a row that does not wrap, which has one line. */
6518
+ alignContent?: (HelixFlex["alignContent"]) | undefined;
6415
6519
  /** How items align across the direction, set as `align-items`.
6416
6520
 
6417
6521
  **Named for the CSS property it sets, because it is that property.** A flex
@@ -6446,7 +6550,17 @@ inside every field in it, through a hint no rule here declares and none can
6446
6550
  see, and the fix is a name the platform has no opinion about rather than a
6447
6551
  guard against the hint. */
6448
6552
  alignItems?: (HelixFlex["alignItems"]) | undefined;
6449
- /** Whether items run across or down. */
6553
+ /** Space between the items of a row, named on the space scale. Wins over
6554
+ `gap` across the row. */
6555
+ "column-gap"?: (HelixFlex["columnGap"]) | undefined;
6556
+ /** Space between the items of a row, named on the space scale. Wins over
6557
+ `gap` across the row. */
6558
+ columnGap?: (HelixFlex["columnGap"]) | undefined;
6559
+ /** Whether items run across or down, and from which end.
6560
+
6561
+ `row-reverse` and `column-reverse` change only where the items are drawn.
6562
+ Focus and a screen reader still follow the order of the markup, so use
6563
+ them for a visual order that reads the same either way. */
6450
6564
  direction?: (HelixFlex["direction"]) | undefined;
6451
6565
  /** Space between items, named on the space scale. */
6452
6566
  gap?: (HelixFlex["gap"]) | undefined;
@@ -6464,7 +6578,20 @@ Named for the property it sets, the way `alignItems` is. `between` and
6464
6578
  `around` drop the `space-` prefix and nothing else does, because those two
6465
6579
  are the only values whose CSS spelling is two words. */
6466
6580
  justifyContent?: (HelixFlex["justifyContent"]) | undefined;
6467
- /** Whether items wrap onto more lines. */
6581
+ /** A common layout pattern: `cluster`, `split`, `flank` or `flank-end`.
6582
+
6583
+ Each sets the wrapping, alignment and spread it needs, and an attribute
6584
+ you write as well wins over it. `flank` holds the first item at its own
6585
+ width and gives the last one the rest, and `flank-end` does the reverse. */
6586
+ layout?: (HelixFlex["layout"]) | undefined;
6587
+ /** Space between the lines of a wrapping row, or between the items of a
6588
+ column, named on the space scale. Wins over `gap` down the column. */
6589
+ "row-gap"?: (HelixFlex["rowGap"]) | undefined;
6590
+ /** Space between the lines of a wrapping row, or between the items of a
6591
+ column, named on the space scale. Wins over `gap` down the column. */
6592
+ rowGap?: (HelixFlex["rowGap"]) | undefined;
6593
+ /** Whether items wrap onto more lines. `wrap="reverse"` wraps them upward,
6594
+ each new line above the one before. */
6468
6595
  wrap?: (HelixFlex["wrap"]) | undefined;
6469
6596
  };
6470
6597
 
@@ -6893,6 +7020,28 @@ There is no `justifyContent` here for the same reason: the tracks are
6893
7020
  distribute. `columns`, `min` and `--grid-columns` are how a grid says how
6894
7021
  wide its tracks are. */
6895
7022
  alignItems?: (HelixGrid["alignItems"]) | undefined;
7023
+ /** How cells fill the grid when no child places itself, set as
7024
+ `grid-auto-flow`.
7025
+
7026
+ `column` fills each column before the next. `dense` and `column-dense`
7027
+ also move a later small cell back into an earlier gap. Moving them changes
7028
+ only where they are drawn, so focus and a screen reader still follow the
7029
+ markup. */
7030
+ "auto-flow"?: (HelixGrid["autoFlow"]) | undefined;
7031
+ /** How cells fill the grid when no child places itself, set as
7032
+ `grid-auto-flow`.
7033
+
7034
+ `column` fills each column before the next. `dense` and `column-dense`
7035
+ also move a later small cell back into an earlier gap. Moving them changes
7036
+ only where they are drawn, so focus and a screen reader still follow the
7037
+ markup. */
7038
+ autoFlow?: (HelixGrid["autoFlow"]) | undefined;
7039
+ /** The space between columns, as a step on the space scale. Wins over `gap`
7040
+ across the row. */
7041
+ "column-gap"?: (HelixGrid["columnGap"]) | undefined;
7042
+ /** The space between columns, as a step on the space scale. Wins over `gap`
7043
+ across the row. */
7044
+ columnGap?: (HelixGrid["columnGap"]) | undefined;
6896
7045
  /** A fixed number of equal columns.
6897
7046
 
6898
7047
  Two to six are plain CSS. Any other count is written into the shadow
@@ -6900,6 +7049,16 @@ root's rule, which the server renders too. */
6900
7049
  columns?: (HelixGrid["columns"]) | undefined;
6901
7050
  /** The space between cells, as a step on the space scale. */
6902
7051
  gap?: (HelixGrid["gap"]) | undefined;
7052
+ /** How each cell aligns within its column. Sets `justify-items`.
7053
+
7054
+ Named for the CSS property it sets, the way `alignItems` is. Absent, every
7055
+ cell stretches to the width of its column. */
7056
+ "justify-items"?: (HelixGrid["justifyItems"]) | undefined;
7057
+ /** How each cell aligns within its column. Sets `justify-items`.
7058
+
7059
+ Named for the CSS property it sets, the way `alignItems` is. Absent, every
7060
+ cell stretches to the width of its column. */
7061
+ justifyItems?: (HelixGrid["justifyItems"]) | undefined;
6903
7062
  /** The minimum column width. The grid fits as many columns as the width allows.
6904
7063
 
6905
7064
  A length, such as `12rem`, or `calc()`, `clamp()`, `min()`, `max()` and
@@ -6909,6 +7068,12 @@ lays out by `columns`.
6909
7068
  Takes precedence over `columns`: a grid that both fixes a count and reflows
6910
7069
  is two intentions in one element. */
6911
7070
  min?: (HelixGrid["min"]) | undefined;
7071
+ /** The space between rows, as a step on the space scale. Wins over `gap` down
7072
+ the column. */
7073
+ "row-gap"?: (HelixGrid["rowGap"]) | undefined;
7074
+ /** The space between rows, as a step on the space scale. Wins over `gap` down
7075
+ the column. */
7076
+ rowGap?: (HelixGrid["rowGap"]) | undefined;
6912
7077
  };
6913
7078
 
6914
7079
  export type HelixGridVueEvents = {};
@@ -7416,6 +7581,9 @@ export type HelixInputElementEvent<E = Event> = TypedEvent<HelixInput, E>;
7416
7581
  /** `helix-before-change` event type */
7417
7582
  export type HelixInputHelixBeforeChangeElementEvent =
7418
7583
  HelixInputElementEvent<HelixBeforeChangeEvent>;
7584
+ /** `helix-clear` event type */
7585
+ export type HelixInputHelixClearElementEvent =
7586
+ HelixInputElementEvent<HelixClearEvent>;
7419
7587
 
7420
7588
  export type HelixInputVueProps = {
7421
7589
  /** The value the control starts with. A form reset returns it to this value. */
@@ -7619,7 +7787,7 @@ export type HelixInputVueEvents = {
7619
7787
  /** The text is about to change. Cancelable: cancel it to keep the current text. */
7620
7788
  "helix-before-change": HelixInputHelixBeforeChangeElementEvent;
7621
7789
  /** Fired after the clear button has emptied the field, after `input` and `change`. */
7622
- "helix-clear": HelixInputElementEvent;
7790
+ "helix-clear": HelixInputHelixClearElementEvent;
7623
7791
  /** Fired as the value changes. */
7624
7792
  input: HelixInputElementEvent;
7625
7793
  };
@@ -8111,7 +8279,24 @@ near the top of the box. */
8111
8279
 
8112
8280
  export type HelixLineChartVueEvents = {};
8113
8281
 
8282
+ /** `HelixListItem` component event */
8283
+ export type HelixListItemElementEvent<E = Event> = TypedEvent<HelixListItem, E>;
8284
+ /** `helix-action` event type */
8285
+ export type HelixListItemHelixActionElementEvent =
8286
+ HelixListItemElementEvent<HelixActionEvent>;
8287
+
8114
8288
  export type HelixListItemVueProps = {
8289
+ /** Marks the row a reader is on: `page` for the page they are reading, `step`,
8290
+ `location`, `date` or `time` for those, and written bare for the current
8291
+ one of a set. It is `aria-current` on the row's link, or on the row where
8292
+ it has none.
8293
+
8294
+ Not reflected, as a state never is. `row-current` is the part a
8295
+ stylesheet draws it from. */
8296
+ current?: (HelixListItem["current"]) | undefined;
8297
+ /** Takes the row out of reach in a list with `selection-mode`: the arrow keys
8298
+ pass over it and it cannot be selected or acted on. */
8299
+ disabled?: (HelixListItem["disabled"]) | undefined;
8115
8300
  /** The URL the row links to. Leave it empty for a row that is not a link.
8116
8301
 
8117
8302
  Empty rather than optional, and unset by default: a list is not always a
@@ -8123,9 +8308,36 @@ to the current page on every row a consumer never asked to be one. */
8123
8308
  rel?: (HelixListItem["rel"]) | undefined;
8124
8309
  /** Where the link opens. Use it for a row that leaves the site. */
8125
8310
  target?: (HelixListItem["target"]) | undefined;
8311
+ /** What the row stands for in its list's `value`.
8312
+
8313
+ Absent is the row's own words. */
8314
+ value?: (HelixListItem["value"]) | undefined;
8315
+ /** Whether the row holds its list's tab stop.
8316
+
8317
+ Written by a list with `selection-mode` on every row it holds, and unset
8318
+ otherwise, which is how a row knows it is a row of a grid. No attribute:
8319
+ it is coordination between elements, as `Tag.focusable` is. */
8320
+ focusable?: (HelixListItem["focusable"]) | undefined;
8321
+ /** Whether the row is selected, in a list that selects.
8322
+
8323
+ Written by the list from its own `value`, and unset where nothing can be
8324
+ selected, which keeps `aria-selected` off a list that does not select. */
8325
+ selected?: (HelixListItem["selected"]) | undefined;
8126
8326
  };
8127
8327
 
8128
- export type HelixListItemVueEvents = {};
8328
+ export type HelixListItemVueEvents = {
8329
+ /** The reader pressed Enter on the row, or pressed the row in a list that selects nothing, in a list with `selection-mode`. Read the row from `target`. A row with `href` follows its link instead. */
8330
+ "helix-action": HelixListItemHelixActionElementEvent;
8331
+ };
8332
+
8333
+ /** `HelixList` component event */
8334
+ export type HelixListElementEvent<E = Event> = TypedEvent<HelixList, E>;
8335
+ /** `helix-action` event type */
8336
+ export type HelixListHelixActionElementEvent =
8337
+ HelixListElementEvent<HelixActionEvent>;
8338
+ /** `helix-before-change` event type */
8339
+ export type HelixListHelixBeforeChangeElementEvent =
8340
+ HelixListElementEvent<HelixBeforeChangeEvent>;
8129
8341
 
8130
8342
  export type HelixListVueProps = {
8131
8343
  /** Draws a line between rows. */
@@ -8168,6 +8380,20 @@ has to survive with the stylesheet turned off.
8168
8380
  kind?: (HelixList["kind"]) | undefined;
8169
8381
  /** The list's name, read by screen readers. */
8170
8382
  label?: (HelixList["label"]) | undefined;
8383
+ /** Numbers an ordered list downward, so the count falls row by row and ends at
8384
+ its last row, as `<ol reversed>` does. */
8385
+ reversed?: (HelixList["reversed"]) | undefined;
8386
+ /** Makes the list interactive: `single` selects one row, `multiple` any
8387
+ number, and `none` moves and acts without selecting. Unset is a list a
8388
+ reader reads, with no tab stop of its own. */
8389
+ "selection-mode"?: (HelixList["selectionMode"]) | undefined;
8390
+ /** Makes the list interactive: `single` selects one row, `multiple` any
8391
+ number, and `none` moves and acts without selecting. Unset is a list a
8392
+ reader reads, with no tab stop of its own. */
8393
+ selectionMode?: (HelixList["selectionMode"]) | undefined;
8394
+ /** The number of an ordered list's first row, as `<ol start>` is. Unset counts
8395
+ from one, or down from the number of rows where `reversed`. */
8396
+ start?: (HelixList["start"]) | undefined;
8171
8397
  /** The markers an ordered list draws. It takes the five values of `<ol type>`.
8172
8398
 
8173
8399
  Reflected, because this is one of the things a stylesheet selects on, each
@@ -8175,18 +8401,24 @@ value mapping to a `list-style-type`. The platform's spellings rather than
8175
8401
  the CSS ones, so `<helix-headless-list kind="ordered" type="i">` is what a
8176
8402
  consumer would have written on an `<ol>`.
8177
8403
 
8178
- **`start` and `reversed` are both absent and neither can be done here.**
8179
- This renders no `<ol>`: the rows are slotted and numbered by the CSS
8180
- `list-item` counter, and that counter is not author-resettable. Measured in
8181
- Chrome 148, `counter-reset: list-item 4` moves nothing on a `<div>`, on a
8182
- `<ul>`, or even on a real `<ol>`, while `<ol start="5">` does and a *named*
8183
- counter with explicit `::before` content does. So the markers would have to
8184
- be rebuilt out of generated content to gain a start, which is a different
8185
- component. `type` is only `list-style-type` and works. */
8404
+ `type` is only `list-style-type`. `start` and `reversed` move the count
8405
+ itself. */
8186
8406
  type?: (HelixList["type"]) | undefined;
8407
+ /** The selected rows' values, separated by commas, in a list that selects.
8408
+
8409
+ Set it to start with rows selected. A row's value is its `value`, or its
8410
+ words where it has none. */
8411
+ value?: (HelixList["value"]) | undefined;
8187
8412
  };
8188
8413
 
8189
- export type HelixListVueEvents = {};
8414
+ export type HelixListVueEvents = {
8415
+ /** Fired once a press has changed which rows are selected. */
8416
+ change: HelixListElementEvent;
8417
+ /** Sent from a row when the reader acts on it: Enter, or a press in a list that selects nothing. Read the row from `target`. A row with `href` follows its link instead. */
8418
+ "helix-action": HelixListHelixActionElementEvent;
8419
+ /** Fired before a press changes which rows are selected, with the `value` it would leave. Cancelable. */
8420
+ "helix-before-change": HelixListHelixBeforeChangeElementEvent;
8421
+ };
8190
8422
 
8191
8423
  /** `HelixListbox` component event */
8192
8424
  export type HelixListboxElementEvent<E = Event> = TypedEvent<HelixListbox, E>;
@@ -8772,6 +9004,9 @@ export type HelixMapHelixMapTiltElementEvent =
8772
9004
  /** `helix-map-zoom` event type */
8773
9005
  export type HelixMapHelixMapZoomElementEvent =
8774
9006
  HelixMapElementEvent<HelixMapZoomEvent>;
9007
+ /** `helix-toggle` event type */
9008
+ export type HelixMapHelixToggleElementEvent =
9009
+ HelixMapElementEvent<HelixToggleEvent>;
8775
9010
 
8776
9011
  export type HelixMapVueProps = {
8777
9012
  /** Where the map's credit is drawn. Unset, it is a strip under the map.
@@ -9097,6 +9332,8 @@ export type HelixMapVueEvents = {
9097
9332
  "helix-map-tilt": HelixMapHelixMapTiltElementEvent;
9098
9333
  /** A zoom button or key was pressed, with a direction. Zoom your map in response. */
9099
9334
  "helix-map-zoom": HelixMapHelixMapZoomElementEvent;
9335
+ /** A layer's tile in the layers menu showed or hid it. Sent from the layer once its `hidden` attribute holds the choice, with `checked` true when it is shown. */
9336
+ "helix-toggle": HelixMapHelixToggleElementEvent;
9100
9337
  };
9101
9338
 
9102
9339
  /** `HelixMapRoute` component event */
@@ -9361,37 +9598,24 @@ So the anchor *is* the row, carrying `menuitem` and the `tabindex` the menu
9361
9598
  roves, which is the same maneuver `Tree.Item` makes and the reason `href`
9362
9599
  changes the markup rather than only adding an attribute.
9363
9600
 
9364
- **`Option` cannot have this and the reason is worth knowing**, since a
9365
- command palette is the obvious place to want it. A listbox has to keep
9366
- focus somewhere else, in the text field for a combobox, so it says which
9367
- option is current with `aria-activedescendant`. That reference can only
9368
- point at the option's host, measured: assigning
9369
- `ariaActiveDescendantElement` an element inside a sibling shadow root reads
9370
- back `null`. So `role="option"` is pinned to the host, and an anchor under
9371
- it hits the naming failure above. A menu has no such constraint because
9372
- focus really moves to the row. */
9601
+ **`Option` takes an `href` too, and keeps its role a different way.** A
9602
+ listbox keeps focus somewhere else, in the text field for a combobox, and
9603
+ names the current option with `aria-activedescendant`, which can only point
9604
+ at the option's host. So an option stays `role="option"` on its host, draws
9605
+ no anchor, and follows its link through an anchor made for the moment. A
9606
+ menu has no such constraint, because focus really moves to the row. */
9373
9607
  href?: (HelixMenuItem["href"]) | undefined;
9374
9608
  /** The link's `rel`. Set it whenever you set `target="_blank"`. */
9375
9609
  rel?: (HelixMenuItem["rel"]) | undefined;
9610
+ /** The row's keyboard shortcut as a chord, such as `mod+s`, shown after the
9611
+ label in the platform's glyphs and given to the row as
9612
+ `aria-keyshortcuts`. `mod` is Command on an Apple keyboard and Control
9613
+ elsewhere. Showing a shortcut does not bind it. */
9614
+ shortcut?: (HelixMenuItem["shortcut"]) | undefined;
9376
9615
  /** Where the link opens, for rows that should open outside the current page. */
9377
9616
  target?: (HelixMenuItem["target"]) | undefined;
9378
9617
  /** The row's value, sent in `helix-select` when the row is chosen. */
9379
9618
  value?: (HelixMenuItem["value"]) | undefined;
9380
- /** Whether the row is on the menu page that is showing.
9381
-
9382
- Set by the menu, and a property rather than an attribute for that reason.
9383
- Public because the menu has to reach it, and not something a consumer
9384
- writes: which page is open is the menu's business. */
9385
- onPage?: (HelixMenuItem["onPage"]) | undefined;
9386
- /** Whether the page showing is this row's submenu, or one below it.
9387
-
9388
- Separate from `onPage`, and it has to be. A row that opened a page is not
9389
- itself on that page, so both are false for it, and rendering nothing on
9390
- that basis takes its `slot[name="submenu"]` with it: the rows inside have
9391
- nowhere to be assigned and are never laid out. Every row on the way down to
9392
- the open page has to keep its slot, not only the one directly above it.
9393
- Three levels deep, the topmost row holds the slot the middle one lives in. */
9394
- showingSubmenu?: (HelixMenuItem["showingSubmenu"]) | undefined;
9395
9619
  };
9396
9620
 
9397
9621
  export type HelixMenuItemVueEvents = {
@@ -9451,6 +9675,9 @@ the resolved state for stylesheets, which is what the mirror is for. */
9451
9675
  "back-label"?: (HelixMenu["backLabel"]) | undefined;
9452
9676
  /** The text of the row that returns from a submenu. */
9453
9677
  backLabel?: (HelixMenu["backLabel"]) | undefined;
9678
+ /** Whether the menu is the trigger's context menu: it opens where the reader
9679
+ asks for one, with a right-click, a long press, Shift+F10 or the menu key. */
9680
+ context?: (HelixMenu["context"]) | undefined;
9454
9681
  /** Accessible name for the surface.
9455
9682
 
9456
9683
  Empty by default, which names the surface by its trigger, so a menu opened
@@ -9476,6 +9703,14 @@ export type HelixMenuVueEvents = {
9476
9703
  "helix-select": HelixMenuHelixSelectElementEvent;
9477
9704
  };
9478
9705
 
9706
+ export type HelixMenuSectionVueProps = {
9707
+ /** The heading's words, when they are plain text. Content in the `heading`
9708
+ slot replaces it. */
9709
+ label?: (HelixMenuSection["label"]) | undefined;
9710
+ };
9711
+
9712
+ export type HelixMenuSectionVueEvents = {};
9713
+
9479
9714
  export type HelixMeterVueProps = {
9480
9715
  /** How strongly the reading is drawn. `subtle` draws it as a wash of its color.
9481
9716
 
@@ -9601,6 +9836,11 @@ fair summary of a task and a poor one of a quantity. */
9601
9836
  export type HelixMeterVueEvents = {};
9602
9837
 
9603
9838
  export type HelixNavigationVueProps = {
9839
+ /** Whether the arrow keys move focus between the destinations.
9840
+
9841
+ Off by default, so a page whose readers scroll with the arrow keys while
9842
+ a link has focus keeps doing so. */
9843
+ arrows?: (HelixNavigation["arrows"]) | undefined;
9604
9844
  /** The landmark's name, read by screen readers.
9605
9845
 
9606
9846
  An `aria-label` or `aria-labelledby` on the host names the landmark too,
@@ -9780,6 +10020,9 @@ export type HelixNotificationsElementEvent<E = Event> = TypedEvent<
9780
10020
  /** `helix-dismiss` event type */
9781
10021
  export type HelixNotificationsHelixDismissElementEvent =
9782
10022
  HelixNotificationsElementEvent<HelixDismissEvent>;
10023
+ /** `helix-load-more` event type */
10024
+ export type HelixNotificationsHelixLoadMoreElementEvent =
10025
+ HelixNotificationsElementEvent<HelixLoadMoreEvent>;
9783
10026
  /** `helix-read` event type */
9784
10027
  export type HelixNotificationsHelixReadElementEvent =
9785
10028
  HelixNotificationsElementEvent<HelixReadEvent>;
@@ -9801,6 +10044,16 @@ say that without the component knowing what a row looks like. */
9801
10044
  loadingText?: (HelixNotifications["loadingText"]) | undefined;
9802
10045
  /** The feed's name, read by screen readers. */
9803
10046
  label?: (HelixNotifications["label"]) | undefined;
10047
+ /** Whether to draw a button after the list that asks for the next page, by
10048
+ sending `helix-load-more`. Take it off once there is nothing more. */
10049
+ "load-more"?: (HelixNotifications["loadMore"]) | undefined;
10050
+ /** Whether to draw a button after the list that asks for the next page, by
10051
+ sending `helix-load-more`. Take it off once there is nothing more. */
10052
+ loadMore?: (HelixNotifications["loadMore"]) | undefined;
10053
+ /** The text of the `load-more` button. */
10054
+ "load-more-label"?: (HelixNotifications["loadMoreLabel"]) | undefined;
10055
+ /** The text of the `load-more` button. */
10056
+ loadMoreLabel?: (HelixNotifications["loadMoreLabel"]) | undefined;
9804
10057
  /** Whether to draw a control that marks everything read. */
9805
10058
  "mark-all"?: (HelixNotifications["markAll"]) | undefined;
9806
10059
  /** Whether to draw a control that marks everything read. */
@@ -9820,6 +10073,8 @@ that holds everything. */
9820
10073
  export type HelixNotificationsVueEvents = {
9821
10074
  /** Fired when the user dismisses a row. The row dispatches it, and you can listen for it on the feed. Cancelable: cancel it to keep the row. */
9822
10075
  "helix-dismiss": HelixNotificationsHelixDismissElementEvent;
10076
+ /** Fired when a reader presses the `load-more` button, asking for the next page of the feed. */
10077
+ "helix-load-more": HelixNotificationsHelixLoadMoreElementEvent;
9823
10078
  /** Fired by an item when it is marked read or unread, and by the feed when everything is marked read. Cancelable. */
9824
10079
  "helix-read": HelixNotificationsHelixReadElementEvent;
9825
10080
  };
@@ -10059,11 +10314,31 @@ export type HelixObjectInspectorElementEvent<E = Event> = TypedEvent<
10059
10314
  HelixObjectInspector,
10060
10315
  E
10061
10316
  >;
10317
+ /** `helix-activate` event type */
10318
+ export type HelixObjectInspectorHelixActivateElementEvent =
10319
+ HelixObjectInspectorElementEvent<HelixActivateEvent>;
10320
+ /** `helix-before-activate` event type */
10321
+ export type HelixObjectInspectorHelixBeforeActivateElementEvent =
10322
+ HelixObjectInspectorElementEvent<HelixBeforeActivateEvent>;
10062
10323
  /** `helix-copy` event type */
10063
10324
  export type HelixObjectInspectorHelixCopyElementEvent =
10064
10325
  HelixObjectInspectorElementEvent<HelixCopyEvent>;
10326
+ /** `helix-filter` event type */
10327
+ export type HelixObjectInspectorHelixFilterElementEvent =
10328
+ HelixObjectInspectorElementEvent<HelixFilterEvent>;
10329
+ /** `helix-filtered` event type */
10330
+ export type HelixObjectInspectorHelixFilteredElementEvent =
10331
+ HelixObjectInspectorElementEvent<HelixFilteredEvent>;
10065
10332
 
10066
10333
  export type HelixObjectInspectorVueProps = {
10334
+ /** The active row's path, such as `/meta/tags/0`, and the empty string for the
10335
+ root.
10336
+
10337
+ Reading gives the row the keys are on. Writing moves there, opening the
10338
+ branches around it, and sends no event, the way a script's write to any
10339
+ current value sends none. A path the value does not hold moves to the
10340
+ nearest branch above it that it does. */
10341
+ active?: (HelixObjectInspector["active"]) | undefined;
10067
10342
  /** The copy button's accessible name on a row with a key, with the key filled
10068
10343
  in as `{name}`.
10069
10344
 
@@ -10094,6 +10369,15 @@ reader sees the shape of the value before its contents. `0` starts with the
10094
10369
  root closed; a large number opens everything, which on a big value is the
10095
10370
  wall of text this exists to avoid. */
10096
10371
  defaultDepth?: (HelixObjectInspector["defaultDepth"]) | undefined;
10372
+ /** Text the tree is narrowed to: the entries whose key or value holds it,
10373
+ ignoring case, and the branches that lead to them. Empty shows everything. */
10374
+ filter?: (HelixObjectInspector["filter"]) | undefined;
10375
+ /** Whether to show a field that sets `filter`. */
10376
+ filterable?: (HelixObjectInspector["filterable"]) | undefined;
10377
+ /** The filter field's placeholder and accessible name. */
10378
+ "filter-label"?: (HelixObjectInspector["filterLabel"]) | undefined;
10379
+ /** The filter field's placeholder and accessible name. */
10380
+ filterLabel?: (HelixObjectInspector["filterLabel"]) | undefined;
10097
10381
  /** The id of a `<script type="application/json">` holding the value.
10098
10382
 
10099
10383
  Read once the document exists, and again whenever this changes. Text that
@@ -10142,6 +10426,16 @@ who set the property. This button is positioned out of the flow and takes no
10142
10426
  room, so nothing selects on it, and reflection exists so that a selector can
10143
10427
  reach a value. */
10144
10428
  noCopy?: (HelixObjectInspector["noCopy"]) | undefined;
10429
+ /** What a screen reader hears when a filter matches one entry. `{count}` is the count. */
10430
+ "result-label"?: (HelixObjectInspector["resultLabel"]) | undefined;
10431
+ /** What a screen reader hears when a filter matches one entry. `{count}` is the count. */
10432
+ resultLabel?: (HelixObjectInspector["resultLabel"]) | undefined;
10433
+ /** What a screen reader hears when a filter matches any other number of
10434
+ entries. `{count}` is the count. The two are chosen by `Intl.PluralRules`. */
10435
+ "results-label"?: (HelixObjectInspector["resultsLabel"]) | undefined;
10436
+ /** What a screen reader hears when a filter matches any other number of
10437
+ entries. `{count}` is the count. The two are chosen by `Intl.PluralRules`. */
10438
+ resultsLabel?: (HelixObjectInspector["resultsLabel"]) | undefined;
10145
10439
  /** The tree's accessible name when `label` is empty and the host names it
10146
10440
  with neither `aria-label` nor `aria-labelledby`. */
10147
10441
  "tree-label"?: (HelixObjectInspector["treeLabel"]) | undefined;
@@ -10153,6 +10447,11 @@ with neither `aria-label` nor `aria-labelledby`. */
10153
10447
  For a value of thousands of entries. Reflected, because the box it scrolls
10154
10448
  needs a height, which is a stylesheet rule reading this attribute. */
10155
10449
  windowed?: (HelixObjectInspector["windowed"]) | undefined;
10450
+ /** The open branches, by path, in no set order.
10451
+
10452
+ Writing opens exactly these and closes every other, keeping the active row
10453
+ where it stays visible. A property, never an attribute. */
10454
+ expanded?: (HelixObjectInspector["expanded"]) | undefined;
10156
10455
  /** The value to show, when your code already holds it as an object.
10157
10456
 
10158
10457
  Takes precedence over `for`. Anything JSON can say is drawn; anything else
@@ -10161,8 +10460,16 @@ is shown as its string. */
10161
10460
  };
10162
10461
 
10163
10462
  export type HelixObjectInspectorVueEvents = {
10463
+ /** The active row moved, by a key or a click. The detail's `value` is its path. */
10464
+ "helix-activate": HelixObjectInspectorHelixActivateElementEvent;
10465
+ /** The active row is about to move, with its new path. Cancelable: cancel it to keep the row where it is. */
10466
+ "helix-before-activate": HelixObjectInspectorHelixBeforeActivateElementEvent;
10164
10467
  /** A value was put on the clipboard, from the copy button or the keyboard. */
10165
10468
  "helix-copy": HelixObjectInspectorHelixCopyElementEvent;
10469
+ /** Text was typed in the filter field, with what it now holds. Cancelable: cancel it to keep the filter as it was. */
10470
+ "helix-filter": HelixObjectInspectorHelixFilterElementEvent;
10471
+ /** The filter field changed `filter`, which now holds the text. */
10472
+ "helix-filtered": HelixObjectInspectorHelixFilteredElementEvent;
10166
10473
  };
10167
10474
 
10168
10475
  export type HelixOptionGroupVueProps = {
@@ -10334,6 +10641,13 @@ export type HelixOptionVueEvents = {
10334
10641
  };
10335
10642
 
10336
10643
  export type HelixOrbVueProps = {
10644
+ /** Says each new state through a polite live region, such as "Working" and
10645
+ then "Done".
10646
+
10647
+ Off by default, because the name and the busy state already change with
10648
+ the state, and an orb beside a stream of messages would otherwise talk
10649
+ over them. Set it on an orb that is the only sign of progress on the page. */
10650
+ announce?: (HelixOrb["announce"]) | undefined;
10337
10651
  /** The name read by screen readers. Defaults to the name of the state, such
10338
10652
  as "Thinking".
10339
10653
 
@@ -10361,14 +10675,23 @@ The set of things an agent can be doing grows faster than this list, and a
10361
10675
  verb we have not made a shape for should cost a reader a less specific
10362
10676
  indicator, not an empty box where the indicator was.
10363
10677
 
10364
- Not reflected: no rule selects on it, because the state is drawn rather than
10365
- styled. A consumer writing the attribute can still select on their own
10366
- markup. */
10678
+ Not reflected, because a state set from script would then write an
10679
+ attribute onto the host after a server sent it without one. Each state is
10680
+ a custom state instead, such as `:state(working)`. */
10367
10681
  state?: (HelixOrb["state"]) | undefined;
10368
10682
  /** The word for each state, for a page in another language.
10369
10683
 
10370
- A state left out keeps its English word, and `label` wins over both. It is
10371
- a property with no attribute, keyed by state, such as `{ thinking: '…' }`. */
10684
+ A state left out keeps its English word, and `label` wins over both.
10685
+ Keyed by state, such as `{ thinking: '…' }`. As an attribute it is that
10686
+ object as JSON, such as `state-labels='{"done":"Terminé"}'`, so server
10687
+ markup and plain HTML can carry the words too. */
10688
+ "state-labels"?: (HelixOrb["stateLabels"]) | undefined;
10689
+ /** The word for each state, for a page in another language.
10690
+
10691
+ A state left out keeps its English word, and `label` wins over both.
10692
+ Keyed by state, such as `{ thinking: '…' }`. As an attribute it is that
10693
+ object as JSON, such as `state-labels='{"done":"Terminé"}'`, so server
10694
+ markup and plain HTML can carry the words too. */
10372
10695
  stateLabels?: (HelixOrb["stateLabels"]) | undefined;
10373
10696
  };
10374
10697
 
@@ -10401,7 +10724,8 @@ read at the click rather than cached, because a reader can change it while
10401
10724
  the page is open and this is the only motion in the component that
10402
10725
  JavaScript rather than CSS decides. */
10403
10726
  behavior?: (HelixOutline["behavior"]) | undefined;
10404
- /** The navigation's name, read by screen readers. */
10727
+ /** The navigation's name, read by screen readers. A heading in the `heading`
10728
+ slot names it in place of this. */
10405
10729
  label?: (HelixOutline["label"]) | undefined;
10406
10730
  /** How far below the top of the scroll container a heading counts as reached,
10407
10731
  in pixels. The scroll container is the window or the panel the sections
@@ -10611,6 +10935,32 @@ Reading gives the real one; writing declares it the consumer's, and
10611
10935
  `default-value` seeds one this element owns. Same accessor pair as
10612
10936
  `Pagination.page` and the calendar's `month`. */
10613
10937
  value?: (HelixPaginationSize["value"]) | undefined;
10938
+ /** Whether the control is disabled and cannot be used.
10939
+
10940
+ Reflected, because the styled tier selects on it, and mirrored to
10941
+ `aria-disabled` rather than removing the element from the accessibility
10942
+ tree, so a screen reader can still announce that the control exists.
10943
+
10944
+ The mirror itself is in `willUpdate` below, here rather than in each
10945
+ control, because here is where `disabled` is. */
10946
+ disabled?: (HelixPaginationSize["disabled"]) | undefined;
10947
+ /** The name the control's value is submitted under.
10948
+
10949
+ **Reflected, and it is the exception to "reflect only what CSS selects
10950
+ on".** The platform builds a form's entry list from the `name` *content
10951
+ attribute*, not from the property, so a control named through the property
10952
+ submitted under no name at all and was silently dropped. Measured: two
10953
+ inputs in one form, one named by attribute and one by property, and the
10954
+ form carried a single entry.
10955
+
10956
+ Safe for a React consumer, which is what the rule is protecting: React
10957
+ renders a custom element's props as attributes on the server, so the name
10958
+ is already in the markup being hydrated and reflecting it writes what is
10959
+ there. It is only a change to the markup when a consumer assigns it
10960
+ imperatively later, and nothing is hydrating by then.
10961
+
10962
+ Here rather than on each control. */
10963
+ name?: (HelixPaginationSize["name"]) | undefined;
10614
10964
  };
10615
10965
 
10616
10966
  export type HelixPaginationSizeVueEvents = {
@@ -11098,18 +11448,18 @@ only `horizontal` has to be named. */
11098
11448
  /** Whether a reader can see and focus the answer and cannot change it. A
11099
11449
  read-only group still submits its value.
11100
11450
 
11101
- React Aria's `isReadOnly`. A press on a radio is refused, and the arrow
11102
- keys, Home and End leave focus on the answer, so Tab still reaches it and
11103
- a reader hears it with the group's name. The group says `aria-readonly`.
11104
- A script can still set `value`. */
11451
+ React Aria's `isReadOnly`. A press on a radio is refused. The arrow keys,
11452
+ Home and End move focus between the radios and choose nothing, so a reader
11453
+ can hear every choice, and Tab still reaches the answer. The group says
11454
+ `aria-readonly`. A script can still set `value`. */
11105
11455
  readonly?: (HelixRadioGroup["readOnly"]) | undefined;
11106
11456
  /** Whether a reader can see and focus the answer and cannot change it. A
11107
11457
  read-only group still submits its value.
11108
11458
 
11109
- React Aria's `isReadOnly`. A press on a radio is refused, and the arrow
11110
- keys, Home and End leave focus on the answer, so Tab still reaches it and
11111
- a reader hears it with the group's name. The group says `aria-readonly`.
11112
- A script can still set `value`. */
11459
+ React Aria's `isReadOnly`. A press on a radio is refused. The arrow keys,
11460
+ Home and End move focus between the radios and choose nothing, so a reader
11461
+ can hear every choice, and Tab still reaches the answer. The group says
11462
+ `aria-readonly`. A script can still set `value`. */
11113
11463
  readOnly?: (HelixRadioGroup["readOnly"]) | undefined;
11114
11464
  /** Whether the control is disabled and cannot be used.
11115
11465
 
@@ -11303,6 +11653,9 @@ export type HelixRatingElementEvent<E = Event> = TypedEvent<HelixRating, E>;
11303
11653
  /** `helix-before-change` event type */
11304
11654
  export type HelixRatingHelixBeforeChangeElementEvent =
11305
11655
  HelixRatingElementEvent<HelixBeforeChangeEvent>;
11656
+ /** `helix-clear` event type */
11657
+ export type HelixRatingHelixClearElementEvent =
11658
+ HelixRatingElementEvent<HelixClearEvent>;
11306
11659
 
11307
11660
  export type HelixRatingVueProps = {
11308
11661
  /** The shape of each mark. `dots` draws plain circles.
@@ -11518,7 +11871,7 @@ export type HelixRatingVueEvents = {
11518
11871
  /** The score is about to change. Cancelable: cancel it to keep the current score. */
11519
11872
  "helix-before-change": HelixRatingHelixBeforeChangeElementEvent;
11520
11873
  /** The rating went back to unrated, under `clearable`. Sent after `input` and `change`. */
11521
- "helix-clear": HelixRatingElementEvent;
11874
+ "helix-clear": HelixRatingHelixClearElementEvent;
11522
11875
  /** The score changed. */
11523
11876
  input: HelixRatingElementEvent;
11524
11877
  };
@@ -11617,9 +11970,18 @@ export type HelixSandboxHelixCaretElementEvent =
11617
11970
  /** `helix-console` event type */
11618
11971
  export type HelixSandboxHelixConsoleElementEvent =
11619
11972
  HelixSandboxElementEvent<HelixConsoleEvent>;
11973
+ /** `helix-edit` event type */
11974
+ export type HelixSandboxHelixEditElementEvent =
11975
+ HelixSandboxElementEvent<HelixEditEvent>;
11976
+ /** `helix-panel-resize` event type */
11977
+ export type HelixSandboxHelixPanelResizeElementEvent =
11978
+ HelixSandboxElementEvent<HelixPanelResizeEvent>;
11620
11979
  /** `helix-resize` event type */
11621
11980
  export type HelixSandboxHelixResizeElementEvent =
11622
11981
  HelixSandboxElementEvent<HelixResizeEvent>;
11982
+ /** `helix-split` event type */
11983
+ export type HelixSandboxHelixSplitElementEvent =
11984
+ HelixSandboxElementEvent<HelixSplitEvent>;
11623
11985
 
11624
11986
  export type HelixSandboxVueProps = {
11625
11987
  /** The name of the corner handle that moves both dividers at once, read by
@@ -11743,8 +12105,14 @@ export type HelixSandboxVueEvents = {
11743
12105
  "helix-caret": HelixSandboxHelixCaretElementEvent;
11744
12106
  /** Fired once per console call in the preview frame. The preview pane dispatches it. */
11745
12107
  "helix-console": HelixSandboxHelixConsoleElementEvent;
12108
+ /** Fired after the source was edited, with the new source. The source pane dispatches it, and you can listen for it on the sandbox. */
12109
+ "helix-edit": HelixSandboxHelixEditElementEvent;
12110
+ /** Fired after the panel's divider settled at a new height, with the height in pixels. */
12111
+ "helix-panel-resize": HelixSandboxHelixPanelResizeElementEvent;
11746
12112
  /** Fired by the preview pane when the height of the frame's content changes, with the new height. */
11747
12113
  "helix-resize": HelixSandboxHelixResizeElementEvent;
12114
+ /** Fired after the panes' divider settled somewhere new, with the lead pane's share. */
12115
+ "helix-split": HelixSandboxHelixSplitElementEvent;
11748
12116
  };
11749
12117
 
11750
12118
  /** `HelixSandboxSource` component event */
@@ -11758,6 +12126,9 @@ export type HelixSandboxSourceHelixBeforeEditElementEvent =
11758
12126
  /** `helix-caret` event type */
11759
12127
  export type HelixSandboxSourceHelixCaretElementEvent =
11760
12128
  HelixSandboxSourceElementEvent<HelixCaretEvent>;
12129
+ /** `helix-edit` event type */
12130
+ export type HelixSandboxSourceHelixEditElementEvent =
12131
+ HelixSandboxSourceElementEvent<HelixEditEvent>;
11761
12132
 
11762
12133
  export type HelixSandboxSourceVueProps = {
11763
12134
  /** The editable region's name, read by screen readers. */
@@ -11788,6 +12159,8 @@ export type HelixSandboxSourceVueEvents = {
11788
12159
  "helix-before-edit": HelixSandboxSourceHelixBeforeEditElementEvent;
11789
12160
  /** Fired when the cursor moves. */
11790
12161
  "helix-caret": HelixSandboxSourceHelixCaretElementEvent;
12162
+ /** Fired after the source was edited, with the new source. */
12163
+ "helix-edit": HelixSandboxSourceHelixEditElementEvent;
11791
12164
  };
11792
12165
 
11793
12166
  export type HelixSandboxStatusBarVueProps = {
@@ -11806,12 +12179,39 @@ Absent shows no readout. */
11806
12179
  export type HelixSandboxStatusBarVueEvents = {};
11807
12180
 
11808
12181
  export type HelixSandboxTerminalVueProps = {
12182
+ /** The clear button's text, under `controls`. */
12183
+ "clear-label"?: (HelixSandboxTerminal["clearLabel"]) | undefined;
12184
+ /** The clear button's text, under `controls`. */
12185
+ clearLabel?: (HelixSandboxTerminal["clearLabel"]) | undefined;
12186
+ /** Shows a clear button and a level filter above the log.
12187
+
12188
+ Off by default, because a sandbox that puts the terminal in a panel often
12189
+ has a toolbar of its own for them. */
12190
+ controls?: (HelixSandboxTerminal["controls"]) | undefined;
11809
12191
  /** Text shown before anything has been written. */
11810
12192
  "empty-label"?: (HelixSandboxTerminal["emptyLabel"]) | undefined;
11811
12193
  /** Text shown before anything has been written. */
11812
12194
  emptyLabel?: (HelixSandboxTerminal["emptyLabel"]) | undefined;
11813
12195
  /** The log's name, read by screen readers. */
11814
12196
  label?: (HelixSandboxTerminal["label"]) | undefined;
12197
+ /** The quietest level shown: `info` hides plain logs, `warn` shows warnings
12198
+ and errors, and `error` shows errors only. Absent shows every line.
12199
+
12200
+ Lines it hides are kept, so lowering it shows them again. The filter under
12201
+ `controls` sets it. */
12202
+ level?: (HelixSandboxTerminal["level"]) | undefined;
12203
+ /** The level filter's name, read by screen readers, under `controls`. */
12204
+ "level-label"?: (HelixSandboxTerminal["levelLabel"]) | undefined;
12205
+ /** The level filter's name, read by screen readers, under `controls`. */
12206
+ levelLabel?: (HelixSandboxTerminal["levelLabel"]) | undefined;
12207
+ /** What each choice of the level filter reads, for a page in another
12208
+ language, keyed by level, such as `{ warn: '…' }`. A level left out keeps
12209
+ its English words. As an attribute it is that object as JSON. */
12210
+ "level-words"?: (HelixSandboxTerminal["levelWords"]) | undefined;
12211
+ /** What each choice of the level filter reads, for a page in another
12212
+ language, keyed by level, such as `{ warn: '…' }`. A level left out keeps
12213
+ its English words. As an attribute it is that object as JSON. */
12214
+ levelWords?: (HelixSandboxTerminal["levelWords"]) | undefined;
11815
12215
  };
11816
12216
 
11817
12217
  export type HelixSandboxTerminalVueEvents = {};
@@ -11860,14 +12260,44 @@ is read along. */
11860
12260
 
11861
12261
  export type HelixScatterChartVueEvents = {};
11862
12262
 
12263
+ /** `HelixScrollArea` component event */
12264
+ export type HelixScrollAreaElementEvent<E = Event> = TypedEvent<
12265
+ HelixScrollArea,
12266
+ E
12267
+ >;
12268
+
11863
12269
  export type HelixScrollAreaVueProps = {
12270
+ /** How long the scrollbars stay after the content stops moving, or the pointer
12271
+ leaves, in milliseconds. Read under `scrollbars="scroll"` and
12272
+ `scrollbars="hover"`. */
12273
+ "hide-delay"?: (HelixScrollArea["hideDelay"] | `${number}`) | undefined;
12274
+ /** How long the scrollbars stay after the content stops moving, or the pointer
12275
+ leaves, in milliseconds. Read under `scrollbars="scroll"` and
12276
+ `scrollbars="hover"`. */
12277
+ hideDelay?: (HelixScrollArea["hideDelay"]) | undefined;
11864
12278
  /** The region's name, read by screen readers.
11865
12279
 
11866
12280
  Without one there is no region: see the note on the class. */
11867
12281
  label?: (HelixScrollArea["label"]) | undefined;
12282
+ /** Draws scrollbars of the component's own in place of the browser's, and
12283
+ says when they show.
12284
+
12285
+ - `auto`: on each axis that has content past it.
12286
+ - `always`: on each axis that can scroll, whether or not it has anything to
12287
+ scroll, so the scrollbar is there before the content grows.
12288
+ - `scroll`: while the content is moving, and for `hide-delay` after.
12289
+ - `hover`: as `scroll`, and while the pointer is over the scroll area.
12290
+
12291
+ Absent keeps the browser's scrollbars. */
12292
+ scrollbars?: (HelixScrollArea["scrollbars"]) | undefined;
11868
12293
  };
11869
12294
 
11870
- export type HelixScrollAreaVueEvents = {};
12295
+ export type HelixScrollAreaVueEvents = {
12296
+ /** The content scrolled. Sent from the host, because the viewport's own does not leave the shadow root. Does not bubble. */
12297
+ scroll: HelixScrollAreaElementEvent;
12298
+ /** The content stopped scrolling. Sent from the host, as `scroll` is. Does not bubble. */
12299
+ scrollend: HelixScrollAreaElementEvent;
12300
+ };
11871
12301
 
11872
12302
  /** `HelixSelect` component event */
11873
12303
  export type HelixSelectElementEvent<E = Event> = TypedEvent<HelixSelect, E>;
@@ -12474,6 +12904,11 @@ export type HelixSpeedDialHelixSelectElementEvent =
12474
12904
  HelixSpeedDialElementEvent<HelixSelectEvent>;
12475
12905
 
12476
12906
  export type HelixSpeedDialVueProps = {
12907
+ /** When the actions' names show. Unset, always, beside each action. `hover`
12908
+ shows a name only while its action is under the pointer or has focus, as
12909
+ a tooltip does, for a dial whose icons speak for themselves. The names stay
12910
+ the actions' accessible names either way. */
12911
+ labels?: (HelixSpeedDial["labels"]) | undefined;
12477
12912
  /** Whether the element starts open. Ignored once `open` is written. */
12478
12913
  "default-open"?: (HelixSpeedDial["defaultOpen"]) | undefined;
12479
12914
  /** Whether the element starts open. Ignored once `open` is written. */
@@ -12654,6 +13089,15 @@ Reading gives where it is; writing declares it the consumer's, and
12654
13089
  `default-position` seeds one this element owns. The same accessor pair
12655
13090
  `Pagination.page` and the calendar's `month` carry. */
12656
13091
  position?: (HelixSplitter["position"]) | undefined;
13092
+ /** Where a dragged divider snaps, comma separated, as Web Awesome's split
13093
+ panel does: a bare number is a percentage and a length such as `240px` is
13094
+ measured along the splitter, so `snap="25, 50, 75"` or `snap="240px, 50"`.
13095
+ The arrow keys move by `step` and do not snap. */
13096
+ snap?: (HelixSplitter["snap"]) | undefined;
13097
+ /** How close a drag has to come to a snap point to land on it, in pixels. */
13098
+ "snap-threshold"?: (HelixSplitter["snapThreshold"] | `${number}`) | undefined;
13099
+ /** How close a drag has to come to a snap point to land on it, in pixels. */
13100
+ snapThreshold?: (HelixSplitter["snapThreshold"]) | undefined;
12657
13101
  /** How far one arrow key press moves the divider, as a percentage. */
12658
13102
  step?: (HelixSplitter["step"]) | undefined;
12659
13103
  };
@@ -12752,6 +13196,9 @@ Ignored once `active` is written. */
12752
13196
  A list of stages is a landmark a reader arrives at out of order, so it
12753
13197
  needs a name of its own rather than borrowing the heading above it. */
12754
13198
  label?: (HelixSteps["label"]) | undefined;
13199
+ /** Whether a reader has to finish each stage, or pass an `optional` one,
13200
+ before going on to the next. */
13201
+ linear?: (HelixSteps["linear"]) | undefined;
12755
13202
  /** Which way the steps run.
12756
13203
 
12757
13204
  Absent is a row, which is what a form header wants, with each name under
@@ -12795,10 +13242,19 @@ export type HelixStepHelixSelectElementEvent =
12795
13242
  export type HelixStepVueProps = {
12796
13243
  /** Whether this stage is finished. */
12797
13244
  complete?: (HelixStep["complete"]) | undefined;
13245
+ /** The words that tell a screen reader the stage is finished. Translate it
13246
+ with the page. */
13247
+ "complete-label"?: (HelixStep["completeLabel"]) | undefined;
13248
+ /** The words that tell a screen reader the stage is finished. Translate it
13249
+ with the page. */
13250
+ completeLabel?: (HelixStep["completeLabel"]) | undefined;
12798
13251
  /** Whether this is the current stage. */
12799
13252
  current?: (HelixStep["current"]) | undefined;
12800
13253
  /** Whether the stage is disabled, so the user cannot go to it. */
12801
13254
  disabled?: (HelixStep["disabled"]) | undefined;
13255
+ /** Whether a reader may pass the stage without finishing it, in a sequence
13256
+ with `linear`. Ark UI's skippable step. */
13257
+ optional?: (HelixStep["optional"]) | undefined;
12802
13258
  /** The value the step sends in `helix-select`. */
12803
13259
  value?: (HelixStep["value"]) | undefined;
12804
13260
  };
@@ -12935,6 +13391,9 @@ export type HelixTableColumnElementEvent<E = Event> = TypedEvent<
12935
13391
  /** `helix-before-resize` event type */
12936
13392
  export type HelixTableColumnHelixBeforeResizeElementEvent =
12937
13393
  HelixTableColumnElementEvent<HelixBeforeResizeEvent>;
13394
+ /** `helix-resized` event type */
13395
+ export type HelixTableColumnHelixResizedElementEvent =
13396
+ HelixTableColumnElementEvent<HelixResizedEvent>;
12938
13397
 
12939
13398
  export type HelixTableColumnVueProps = {
12940
13399
  /** The key this column reads out of a row.
@@ -12976,6 +13435,22 @@ replaced with the heading text. */
12976
13435
  /** The accessible name of the separator that resizes the column. `{name}` is
12977
13436
  replaced with the heading text. */
12978
13437
  resizeLabel?: (HelixTableColumn["resizeLabel"]) | undefined;
13438
+ /** Makes this column's cells the headers of their rows, in `DataTable`.
13439
+
13440
+ A screen reader moving along a row or down a column names the row by its
13441
+ row header, so the cell that identifies a row, a file's name say, is the
13442
+ one to mark. Where no column sets it, `DataTable` makes the first column
13443
+ with a `field` the row header. A `Table`'s cells are your markup, so there
13444
+ a cell is a row header through its own `header` attribute. */
13445
+ "row-header"?: (HelixTableColumn["rowHeader"]) | undefined;
13446
+ /** Makes this column's cells the headers of their rows, in `DataTable`.
13447
+
13448
+ A screen reader moving along a row or down a column names the row by its
13449
+ row header, so the cell that identifies a row, a file's name say, is the
13450
+ one to mark. Where no column sets it, `DataTable` makes the first column
13451
+ with a `field` the row header. A `Table`'s cells are your markup, so there
13452
+ a cell is a row header through its own `header` attribute. */
13453
+ rowHeader?: (HelixTableColumn["rowHeader"]) | undefined;
12979
13454
  /** Whether the table can be sorted by this column.
12980
13455
 
12981
13456
  Ignored without a `field`, and silently: a column with nothing to sort by
@@ -13103,13 +13578,24 @@ correct default: the raw value is what an API sorted by. */
13103
13578
  export type HelixTableColumnVueEvents = {
13104
13579
  /** The column is about to be resized, with the requested width. Cancelable: cancel it to keep the current width. */
13105
13580
  "helix-before-resize": HelixTableColumnHelixBeforeResizeElementEvent;
13581
+ /** Fired after the column is resized, with the new width. */
13582
+ "helix-resized": HelixTableColumnHelixResizedElementEvent;
13106
13583
  };
13107
13584
 
13108
13585
  /** `HelixTable` component event */
13109
13586
  export type HelixTableElementEvent<E = Event> = TypedEvent<HelixTable, E>;
13587
+ /** `helix-select` event type */
13588
+ export type HelixTableHelixSelectElementEvent =
13589
+ HelixTableElementEvent<HelixSelectEvent>;
13590
+ /** `helix-selected` event type */
13591
+ export type HelixTableHelixSelectedElementEvent =
13592
+ HelixTableElementEvent<HelixSelectedEvent>;
13110
13593
  /** `helix-sort` event type */
13111
13594
  export type HelixTableHelixSortElementEvent =
13112
13595
  HelixTableElementEvent<HelixSortEvent>;
13596
+ /** `helix-sorted` event type */
13597
+ export type HelixTableHelixSortedElementEvent =
13598
+ HelixTableElementEvent<HelixSortedEvent>;
13113
13599
 
13114
13600
  export type HelixTableVueProps = {
13115
13601
  /** The text shown and announced when there are no rows and none are loading. */
@@ -13159,6 +13645,12 @@ and a list here would be a second way to say what that says. This table's
13159
13645
  cells are markup, and a table written as rows of cells with no column
13160
13646
  declared in it has nowhere else to be sized from. */
13161
13647
  columns?: (HelixTable["columns"]) | undefined;
13648
+ /** The keys selected at the start, separated by commas. Used until `selected`
13649
+ is set. */
13650
+ "default-selected"?: (HelixTable["defaultSelected"]) | undefined;
13651
+ /** The keys selected at the start, separated by commas. Used until `selected`
13652
+ is set. */
13653
+ defaultSelected?: (HelixTable["defaultSelected"]) | undefined;
13162
13654
  /** The starting sort order, used until `sort` is set. */
13163
13655
  "default-sort"?: (HelixTable["defaultSort"]) | undefined;
13164
13656
  /** The starting sort order, used until `sort` is set. */
@@ -13172,6 +13664,31 @@ declared in it has nowhere else to be sized from. */
13172
13664
  An `aria-label` or `aria-labelledby` on the host names the table too, and
13173
13665
  wins over this. */
13174
13666
  label?: (HelixTable["label"]) | undefined;
13667
+ /** Adds a column of checkboxes for selecting rows. Each row is known by its
13668
+ `value`, and by its place among the rows as written where it has none. */
13669
+ selectable?: (HelixTable["selectable"]) | undefined;
13670
+ /** The name of the checkbox in the heading that selects every row. */
13671
+ "select-all-label"?: (HelixTable["selectAllLabel"]) | undefined;
13672
+ /** The name of the checkbox in the heading that selects every row. */
13673
+ selectAllLabel?: (HelixTable["selectAllLabel"]) | undefined;
13674
+ /** The keys of the selected rows, separated by commas.
13675
+
13676
+ A reader's press fires `helix-select` first, and refusing it leaves the
13677
+ selection as it was. `default-selected` seeds a selection this element
13678
+ then owns. */
13679
+ selected?: (HelixTable["selected"]) | undefined;
13680
+ /** What screen readers hear when the chosen rows change. `{count}` is how many
13681
+ rows are chosen. */
13682
+ "selected-label"?: (HelixTable["selectedLabel"]) | undefined;
13683
+ /** What screen readers hear when the chosen rows change. `{count}` is how many
13684
+ rows are chosen. */
13685
+ selectedLabel?: (HelixTable["selectedLabel"]) | undefined;
13686
+ /** The name of a row's checkbox. `{row}` is replaced with the words of the
13687
+ row's first cell. */
13688
+ "select-row-label"?: (HelixTable["selectRowLabel"]) | undefined;
13689
+ /** The name of a row's checkbox. `{row}` is replaced with the words of the
13690
+ row's first cell. */
13691
+ selectRowLabel?: (HelixTable["selectRowLabel"]) | undefined;
13175
13692
  /** The sort order, as `field:direction`, where `field` is a sortable column's
13176
13693
  `field`.
13177
13694
 
@@ -13193,11 +13710,21 @@ column's heading and `{order}` is `ascending-label` or `descending-label`. */
13193
13710
  };
13194
13711
 
13195
13712
  export type HelixTableVueEvents = {
13713
+ /** The selection is about to change. The event carries every selected key, separated by commas. Cancelable: cancel it to keep the current selection. */
13714
+ "helix-select": HelixTableHelixSelectElementEvent;
13715
+ /** Fired after the selection changes, with every selected key, separated by commas. */
13716
+ "helix-selected": HelixTableHelixSelectedElementEvent;
13196
13717
  /** A different sort order was requested, as `field:direction`, or empty for the order the rows were written in. Cancelable: cancel it to keep the current order. */
13197
13718
  "helix-sort": HelixTableHelixSortElementEvent;
13719
+ /** Fired after the sort order changes, with the new order. */
13720
+ "helix-sorted": HelixTableHelixSortedElementEvent;
13198
13721
  };
13199
13722
 
13200
- export type HelixTableRowVueProps = {};
13723
+ export type HelixTableRowVueProps = {
13724
+ /** The key the table's `selected` lists this row by. Left empty, the row is
13725
+ known by its place among the rows as written. */
13726
+ value?: (HelixTableRow["value"]) | undefined;
13727
+ };
13201
13728
 
13202
13729
  export type HelixTableRowVueEvents = {};
13203
13730
 
@@ -13213,10 +13740,9 @@ because it is coordination between elements rather than anything a consumer
13213
13740
  writes: the tab already says it.
13214
13741
 
13215
13742
  A string and not a reference: an IDREF resolves only in the tree it is
13216
- written in, and an element reference cannot reach a sibling shadow tree
13217
- either, so `aria-labelledby` to the tab's own id leaves the panel with no
13218
- accessible name. `aria-label` on a `tabpanel` is how the pattern names one
13219
- anyway. */
13743
+ written in, and the tab's control is inside the tab's shadow root, which no
13744
+ reference from the light DOM can reach. `aria-label` on a `tabpanel` is how
13745
+ the pattern names one anyway. */
13220
13746
  label?: (HelixTabPanel["label"]) | undefined;
13221
13747
  };
13222
13748
 
@@ -13264,6 +13790,11 @@ Automatic is the default because showing a panel is usually cheap. Set this
13264
13790
  where it is not, so a reader arrowing past four tabs does not load four
13265
13791
  panels on the way. */
13266
13792
  manual?: (HelixTabs["manual"]) | undefined;
13793
+ /** The direction the tabs run. `vertical` sets them in a column beside the
13794
+ panels and tells a screen reader the list is vertical.
13795
+
13796
+ Optional, so the resting row writes no attribute onto the host. */
13797
+ orientation?: (HelixTabs["orientation"]) | undefined;
13267
13798
  /** How the row of tabs is drawn.
13268
13799
 
13269
13800
  Unset is a raised pill on the selected tab with nothing behind the row,
@@ -13316,6 +13847,13 @@ declares in markup carries `defaultSelected` of its own to say so. */
13316
13847
  /** The item's value, which identifies it in its set and is what a form
13317
13848
  submits. */
13318
13849
  value?: (HelixTab["value"]) | undefined;
13850
+ /** The URL the tab links to. Setting it renders the tab as a link, for a set
13851
+ of tabs that are pages of a site. */
13852
+ href?: (HelixTab["href"]) | undefined;
13853
+ /** The link's `rel`, for a tab with an `href`. */
13854
+ rel?: (HelixTab["rel"]) | undefined;
13855
+ /** Where the link opens, such as `_blank`, for a tab with an `href`. */
13856
+ target?: (HelixTab["target"]) | undefined;
13319
13857
  };
13320
13858
 
13321
13859
  export type HelixTabVueEvents = {
@@ -13445,10 +13983,12 @@ export type HelixTextVueProps = {
13445
13983
 
13446
13984
  Decides the outline and the semantics.
13447
13985
 
13448
- **`label` gives the label ramp and labels no control.** The element is in
13449
- this one's shadow root, which neither `for` nor a wrapped control can
13450
- reach, so a page that writes either is warned. Name a Helix field with its
13451
- own `label`, and a native control with `<label data-text="label">`. */
13986
+ **`label` is deprecated and no longer listed.** The element is in this
13987
+ one's shadow root, which neither `for` nor a wrapped control can reach, so
13988
+ it labeled nothing. Written anyway, it still renders a `<label>` in the
13989
+ label ramp and warns. Use `variant="label"` for the look, a native
13990
+ `<label data-text="label">` to label a native control, and a Helix field's
13991
+ own `label`. */
13452
13992
  as?: (HelixText["as"]) | undefined;
13453
13993
  /** Makes the text quieter: `muted`, or the quieter `subtle`.
13454
13994
 
@@ -13465,6 +14005,40 @@ rather than a second one that could not be read.
13465
14005
 
13466
14006
  The resting case is the absent attribute, full strength. */
13467
14007
  emphasis?: (HelixText["emphasis"]) | undefined;
14008
+ /** The most lines to show. Text past the last one is cut off with an
14009
+ ellipsis.
14010
+
14011
+ Lays the text out as a block, because a line count needs a width to break
14012
+ against. The whole text stays in the page, so a screen reader and a search
14013
+ still read all of it. Set it as an attribute, such as `lines="1"` for a
14014
+ single line. */
14015
+ lines?: (HelixText["lines"]) | undefined;
14016
+ /** How the lines align, set as `text-align`.
14017
+
14018
+ Named for the CSS property it sets. `align` alone is a legacy HTML
14019
+ attribute the browser maps to `text-align` by itself on any element, and
14020
+ it has no `start` or `end`. */
14021
+ "text-align"?: (HelixText["textAlign"]) | undefined;
14022
+ /** How the lines align, set as `text-align`.
14023
+
14024
+ Named for the CSS property it sets. `align` alone is a legacy HTML
14025
+ attribute the browser maps to `text-align` by itself on any element, and
14026
+ it has no `start` or `end`. */
14027
+ textAlign?: (HelixText["textAlign"]) | undefined;
14028
+ /** How the lines break, set as `text-wrap`.
14029
+
14030
+ `balance` evens out the length of every line, for a heading of a few
14031
+ lines. `pretty` avoids a last line of one short word, for a paragraph.
14032
+ `nowrap` keeps the text on one line. Absent, the lines break as the
14033
+ browser breaks them. */
14034
+ "text-wrap"?: (HelixText["textWrap"]) | undefined;
14035
+ /** How the lines break, set as `text-wrap`.
14036
+
14037
+ `balance` evens out the length of every line, for a heading of a few
14038
+ lines. `pretty` avoids a last line of one short word, for a paragraph.
14039
+ `nowrap` keeps the text on one line. Absent, the lines break as the
14040
+ browser breaks them. */
14041
+ textWrap?: (HelixText["textWrap"]) | undefined;
13468
14042
  /** The meaning of the text, shown by its color, such as `danger` or `success`.
13469
14043
  It is set separately from `variant`.
13470
14044
 
@@ -14251,6 +14825,19 @@ export type HelixTimePickerVueEvents = {
14251
14825
  input: HelixTimePickerElementEvent;
14252
14826
  };
14253
14827
 
14828
+ export type HelixTimelineGroupVueProps = {
14829
+ /** The level of the group's heading, from 1 to 6. */
14830
+ "heading-level"?: (HelixTimelineGroup["headingLevel"] | `${number}`) | undefined;
14831
+ /** The level of the group's heading, from 1 to 6. */
14832
+ headingLevel?: (HelixTimelineGroup["headingLevel"]) | undefined;
14833
+ /** The heading, when it is plain text, such as "Today".
14834
+
14835
+ The fallback of the `heading` slot, so slotted content replaces it. */
14836
+ label?: (HelixTimelineGroup["label"]) | undefined;
14837
+ };
14838
+
14839
+ export type HelixTimelineGroupVueEvents = {};
14840
+
14254
14841
  export type HelixTimelineItemVueProps = {
14255
14842
  /** When it happened, in machine-readable form. Setting it wraps the time in a
14256
14843
  `<time>` element.
@@ -14266,6 +14853,15 @@ know what instant it names. */
14266
14853
  export type HelixTimelineItemVueEvents = {};
14267
14854
 
14268
14855
  export type HelixTimelineVueProps = {
14856
+ /** Where the entries sit beside the line: `opposite` puts the times on one
14857
+ side and what happened on the other, and `alternate` puts every other
14858
+ entry on the other side. Unset, the line runs down the start edge.
14859
+
14860
+ Down the page only: across the page it is set aside. */
14861
+ layout?: (HelixTimeline["layout"]) | undefined;
14862
+ /** Which way time runs: `horizontal` lays the entries across the page. Unset,
14863
+ they run down it. */
14864
+ orientation?: (HelixTimeline["orientation"]) | undefined;
14269
14865
  /** Accessible name for the timeline, for people who reach it out of context. */
14270
14866
  label?: (HelixTimeline["label"]) | undefined;
14271
14867
  };
@@ -14613,6 +15209,12 @@ and wins over this. */
14613
15209
  label?: (HelixToolbar["label"]) | undefined;
14614
15210
  /** The direction the arrow keys move focus in. */
14615
15211
  orientation?: (HelixToolbar["orientation"]) | undefined;
15212
+ /** Whether the arrow keys stop at the first and the last control. Unset, they
15213
+ wrap around from one end to the other. */
15214
+ "stop-at-ends"?: (HelixToolbar["stopAtEnds"]) | undefined;
15215
+ /** Whether the arrow keys stop at the first and the last control. Unset, they
15216
+ wrap around from one end to the other. */
15217
+ stopAtEnds?: (HelixToolbar["stopAtEnds"]) | undefined;
14616
15218
  };
14617
15219
 
14618
15220
  export type HelixToolbarVueEvents = {};
@@ -14958,6 +15560,9 @@ export type HelixTreeItemHelixBeforeCloseElementEvent =
14958
15560
  /** `helix-before-open` event type */
14959
15561
  export type HelixTreeItemHelixBeforeOpenElementEvent =
14960
15562
  HelixTreeItemElementEvent<HelixBeforeOpenEvent>;
15563
+ /** `helix-load` event type */
15564
+ export type HelixTreeItemHelixLoadElementEvent =
15565
+ HelixTreeItemElementEvent<HelixLoadEvent>;
14961
15566
 
14962
15567
  export type HelixTreeItemVueProps = {
14963
15568
  /** Whether the element starts open. Ignored once `open` is written. */
@@ -14977,12 +15582,20 @@ hydration, or diffed by a framework, it comes back holding whatever the
14977
15582
  last reader did rather than what the author wrote. `:state(open)` carries
14978
15583
  the resolved state for stylesheets, which is what the mirror is for. */
14979
15584
  open?: (HelixTreeItem["open"]) | undefined;
15585
+ /** Whether the item cannot be chosen, opened or followed. The arrow keys still
15586
+ reach it, so a reader knows it is there. */
15587
+ disabled?: (HelixTreeItem["disabled"]) | undefined;
14980
15588
  /** The URL this node links to. Setting it makes the row a link.
14981
15589
 
14982
15590
  Unset by default, and unreflected: a tree of choosable nodes is not a tree
14983
15591
  of links, and an empty `href` written onto every row would be a link to the
14984
15592
  current page on every item a consumer never asked to be one. */
14985
15593
  href?: (HelixTreeItem["href"]) | undefined;
15594
+ /** Whether the item is a branch whose children are loaded when it opens.
15595
+
15596
+ Opening it sends `helix-load`. Add the children to its `children` slot,
15597
+ and remove `lazy` once they are in, as Web Awesome's tree item does. */
15598
+ lazy?: (HelixTreeItem["lazy"]) | undefined;
14986
15599
  /** The link's `rel` value, which describes how the linked page relates to this
14987
15600
  one.
14988
15601
 
@@ -15037,6 +15650,8 @@ export type HelixTreeItemVueEvents = {
15037
15650
  "helix-before-close": HelixTreeItemHelixBeforeCloseElementEvent;
15038
15651
  /** Fired before a branch opens, and cancelable. */
15039
15652
  "helix-before-open": HelixTreeItemHelixBeforeOpenElementEvent;
15653
+ /** Fired when a `lazy` item opens, so you can load its children. */
15654
+ "helix-load": HelixTreeItemHelixLoadElementEvent;
15040
15655
  };
15041
15656
 
15042
15657
  /** `HelixTree` component event */
@@ -15167,6 +15782,19 @@ branch as a label; a headless consumer reads the attribute and the
15167
15782
  written here appears in the served markup of every tree anybody renders.
15168
15783
  The resting state is the absence of the attribute, which is `peer`. */
15169
15784
  nesting?: (HelixTree["nesting"]) | undefined;
15785
+ /** Whether a reader can check many items. Unset, one item is chosen at a
15786
+ time.
15787
+
15788
+ Optional, so a tree of one choice writes no attribute onto the host. */
15789
+ "selection-mode"?: (HelixTree["selectionMode"]) | undefined;
15790
+ /** Whether a reader can check many items. Unset, one item is chosen at a
15791
+ time.
15792
+
15793
+ Optional, so a tree of one choice writes no attribute onto the host. */
15794
+ selectionMode?: (HelixTree["selectionMode"]) | undefined;
15795
+ /** The checked values, as a list, under `selection-mode="multiple"`, and the
15796
+ chosen value alone otherwise. Writing it sets `active`. */
15797
+ values?: (HelixTree["values"]) | undefined;
15170
15798
  };
15171
15799
 
15172
15800
  export type HelixTreeVueEvents = {
@@ -15296,6 +15924,9 @@ export type HelixVideoPlaylistHelixActivateElementEvent =
15296
15924
  /** `helix-before-activate` event type */
15297
15925
  export type HelixVideoPlaylistHelixBeforeActivateElementEvent =
15298
15926
  HelixVideoPlaylistElementEvent<HelixBeforeActivateEvent>;
15927
+ /** `helix-end` event type */
15928
+ export type HelixVideoPlaylistHelixEndElementEvent =
15929
+ HelixVideoPlaylistElementEvent<HelixEndEvent>;
15299
15930
 
15300
15931
  export type HelixVideoPlaylistVueProps = {
15301
15932
  /** The `value` of the current item.
@@ -15317,6 +15948,18 @@ Ignored once `active` is written. */
15317
15948
  defaultActive?: (HelixVideoPlaylist["defaultActive"]) | undefined;
15318
15949
  /** The list's name, read by screen readers. */
15319
15950
  label?: (HelixVideoPlaylist["label"]) | undefined;
15951
+ /** What happens when an entry ends with no next one to go to. `one` plays the
15952
+ same entry again, and `all` goes from the last entry back to the first.
15953
+ Absent, the playlist stops on the last entry and sends `helix-end`.
15954
+
15955
+ `all` also lets the next and previous controls go round, so next on the
15956
+ last entry is the first. `one` changes only what an ending does: next and
15957
+ previous still move, being a reader asking for another entry. */
15958
+ repeat?: (HelixVideoPlaylist["repeat"]) | undefined;
15959
+ /** Whether the entries play in a random order. The order starts from the
15960
+ entry that is current, and holds until shuffle is turned off or an entry
15961
+ arrives or leaves, so previous goes back through what has played. */
15962
+ shuffle?: (HelixVideoPlaylist["shuffle"]) | undefined;
15320
15963
  };
15321
15964
 
15322
15965
  export type HelixVideoPlaylistVueEvents = {
@@ -15324,6 +15967,8 @@ export type HelixVideoPlaylistVueEvents = {
15324
15967
  "helix-activate": HelixVideoPlaylistHelixActivateElementEvent;
15325
15968
  /** The current entry is about to change. Cancelable: cancel it to keep the current entry. */
15326
15969
  "helix-before-activate": HelixVideoPlaylistHelixBeforeActivateElementEvent;
15970
+ /** The last entry finished playing, and the playlist stopped there. Not sent while `repeat` is set. */
15971
+ "helix-end": HelixVideoPlaylistHelixEndElementEvent;
15327
15972
  };
15328
15973
 
15329
15974
  /** `HelixVideo` component event */
@@ -15369,10 +16014,10 @@ only the departure has to be named. */
15369
16014
  /** Whether the video starts playing on its own. Browsers allow this only while
15370
16015
  it is muted.
15371
16016
 
15372
- Forwarded rather than acted on. Whether an unprompted play is permitted is
15373
- the browser's policy and not this element's, and `play()` already swallows
15374
- the refusal: what follows a refused autoplay is a paused player showing its
15375
- start control, which is the correct thing to be looking at. */
16017
+ Forwarded to the video, which decides. Whether an unprompted play is
16018
+ permitted is the browser's policy, and what follows a refused autoplay is a
16019
+ paused player showing its start control, which is the correct thing to be
16020
+ looking at. */
15376
16021
  autoplay?: (HelixVideo["autoplay"]) | undefined;
15377
16022
  /** The name of the captions control when the video has one track. The control
15378
16023
  turns that track on and off.
@@ -15606,6 +16251,12 @@ bar: two of the same control is worse than either placement. */
15606
16251
  "pip-label"?: (HelixVideo["pipLabel"]) | undefined;
15607
16252
  /** What the control that floats the video over other windows is called. */
15608
16253
  pipLabel?: (HelixVideo["pipLabel"]) | undefined;
16254
+ /** The name of the player when `label` is not set. The player is a group, and
16255
+ this is what a screen reader calls it on arriving. */
16256
+ "player-label"?: (HelixVideo["playerLabel"]) | undefined;
16257
+ /** The name of the player when `label` is not set. The player is a group, and
16258
+ this is what a screen reader calls it on arriving. */
16259
+ playerLabel?: (HelixVideo["playerLabel"]) | undefined;
15609
16260
  /** The name of the play control while pressing it would start the video. */
15610
16261
  "play-label"?: (HelixVideo["playLabel"]) | undefined;
15611
16262
  /** The name of the play control while pressing it would start the video. */
@@ -15655,6 +16306,14 @@ nothing in it says "press to watch".
15655
16306
  behind a hero, a grid of eight thumbnails, anything where the video is
15656
16307
  decoration rather than something to start.
15657
16308
 
16309
+ **It is for the pointer, and the bar's Play is for everyone else.** Both
16310
+ play the video, so a keyboard met two stops called "Play" one after the
16311
+ other and a screen reader read the same button twice. The large one is out
16312
+ of the tab order and hidden from assistive technology while the bar is
16313
+ drawn, which is whenever it is: it shows only while the video is not
16314
+ playing, and the bar does not fade then. A press on it leaves focus on the
16315
+ player, so the keys go on working once it has gone.
16316
+
15658
16317
  A value rather than a boolean, so the resting state is the attribute's
15659
16318
  absence: a boolean defaulting to on would have to be spelled as its own
15660
16319
  negation. */
@@ -15672,6 +16331,14 @@ nothing in it says "press to watch".
15672
16331
  behind a hero, a grid of eight thumbnails, anything where the video is
15673
16332
  decoration rather than something to start.
15674
16333
 
16334
+ **It is for the pointer, and the bar's Play is for everyone else.** Both
16335
+ play the video, so a keyboard met two stops called "Play" one after the
16336
+ other and a screen reader read the same button twice. The large one is out
16337
+ of the tab order and hidden from assistive technology while the bar is
16338
+ drawn, which is whenever it is: it shows only while the video is not
16339
+ playing, and the bar does not fade then. A press on it leaves focus on the
16340
+ player, so the keys go on working once it has gone.
16341
+
15675
16342
  A value rather than a boolean, so the resting state is the attribute's
15676
16343
  absence: a boolean defaulting to on would have to be spelled as its own
15677
16344
  negation. */
@@ -15706,17 +16373,69 @@ past the end is the one write the platform answers with an exception. */
15706
16373
  };
15707
16374
 
15708
16375
  export type HelixVideoVueEvents = {
15709
- /** The video reached its end. Relayed from the inner video, since the native event does not cross the shadow boundary. */
16376
+ /** The media stopped loading before it finished, without an error. */
16377
+ abort: HelixVideoElementEvent;
16378
+ /** Enough has loaded to start playing. */
16379
+ canplay: HelixVideoElementEvent;
16380
+ /** Enough has loaded to play to the end without stopping, at the current rate. */
16381
+ canplaythrough: HelixVideoElementEvent;
16382
+ /** The duration changed, which it does once the metadata is in. */
16383
+ durationchange: HelixVideoElementEvent;
16384
+ /** The media was reset, as when `src` changes. */
16385
+ emptied: HelixVideoElementEvent;
16386
+ /** The video reached its end. */
15710
16387
  ended: HelixVideoElementEvent;
16388
+ /** The source could not be loaded or played. The player shows `error-label` as well. */
16389
+ error: HelixVideoElementEvent;
15711
16390
  /** The next video was requested. Load it in response. */
15712
16391
  "helix-next": HelixVideoHelixNextElementEvent;
15713
16392
  /** The previous video was requested. Load it in response. */
15714
16393
  "helix-previous": HelixVideoHelixPreviousElementEvent;
15715
- /** Playback paused. Relayed from the inner video. */
16394
+ /** The frame at the current position has loaded. */
16395
+ loadeddata: HelixVideoElementEvent;
16396
+ /** The duration and the size of the video are known. */
16397
+ loadedmetadata: HelixVideoElementEvent;
16398
+ /** The video started looking for its media. */
16399
+ loadstart: HelixVideoElementEvent;
16400
+ /** Playback paused. */
15716
16401
  pause: HelixVideoElementEvent;
15717
- /** Playback started. Relayed from the inner video. */
16402
+ /** Playback was asked to start. */
15718
16403
  play: HelixVideoElementEvent;
15719
- };
16404
+ /** Playback started, or started again after waiting for data. */
16405
+ playing: HelixVideoElementEvent;
16406
+ /** More of the media has downloaded. */
16407
+ progress: HelixVideoElementEvent;
16408
+ /** The playback rate changed. Read `playbackRate`. */
16409
+ ratechange: HelixVideoElementEvent;
16410
+ /** The video's own width or height changed. Read `videoWidth` and `videoHeight`. */
16411
+ resize: HelixVideoElementEvent;
16412
+ /** A move to a new position finished. */
16413
+ seeked: HelixVideoElementEvent;
16414
+ /** A move to a new position started. */
16415
+ seeking: HelixVideoElementEvent;
16416
+ /** The browser is trying to load more data and none is arriving. */
16417
+ stalled: HelixVideoElementEvent;
16418
+ /** Loading paused on purpose, as when `preload` asks for no more. */
16419
+ suspend: HelixVideoElementEvent;
16420
+ /** The position changed. Read `currentTime`. */
16421
+ timeupdate: HelixVideoElementEvent;
16422
+ /** The volume or the mute changed. Read `volume` and `muted`. */
16423
+ volumechange: HelixVideoElementEvent;
16424
+ /** Playback stopped to wait for more data. */
16425
+ waiting: HelixVideoElementEvent;
16426
+ };
16427
+
16428
+ /** `HelixVirtualList` component event */
16429
+ export type HelixVirtualListElementEvent<E = Event> = TypedEvent<
16430
+ HelixVirtualList,
16431
+ E
16432
+ >;
16433
+ /** `helix-load-more` event type */
16434
+ export type HelixVirtualListHelixLoadMoreElementEvent =
16435
+ HelixVirtualListElementEvent<HelixLoadMoreEvent>;
16436
+ /** `helix-range-change` event type */
16437
+ export type HelixVirtualListHelixRangeChangeElementEvent =
16438
+ HelixVirtualListElementEvent<HelixRangeChangeEvent>;
15720
16439
 
15721
16440
  export type HelixVirtualListVueProps = {
15722
16441
  /** The height of one row, in pixels, used to find the row at a scroll offset.
@@ -15724,7 +16443,8 @@ export type HelixVirtualListVueProps = {
15724
16443
  An estimate rather than a measurement while `measured` is off, which is
15725
16444
  right whenever the rows really are one height and is the cheaper of the two. */
15726
16445
  estimate?: (HelixVirtualList["estimate"]) | undefined;
15727
- /** The id of the script element that holds the rows as JSON. */
16446
+ /** The id of the script element that holds the items as JSON. `items` wins
16447
+ where both are set. */
15728
16448
  for?: (HelixVirtualList["for"]) | undefined;
15729
16449
  /** The list's name, read by screen readers, because only some of its rows
15730
16450
  are rendered at a time.
@@ -15741,9 +16461,27 @@ disagree with itself; measuring is what a set of genuinely different
15741
16461
  heights needs and costs a read of each row as it renders. A list of
15742
16462
  one-line rows should leave this alone. */
15743
16463
  measured?: (HelixVirtualList["measured"]) | undefined;
16464
+ /** The items, as an array. Set it as a property.
16465
+
16466
+ Each item is drawn by `renderItem`, or into the row `<template>` by its
16467
+ fields. A new array draws the new rows, so replace the array to change it.
16468
+ Left unset, the list reads the script that `for` names. */
16469
+ items?: (HelixVirtualList["items"]) | undefined;
16470
+ /** Draws one item into its row, given the item and its index. Set it as a
16471
+ property.
16472
+
16473
+ It returns what Lit renders: a template from `html`, a string, or a DOM
16474
+ node. The list wraps each result in a `<div>` that carries the row's role
16475
+ and place in the set. Where it is unset, the row `<template>` is used. */
16476
+ renderItem?: (HelixVirtualList["renderItem"]) | undefined;
15744
16477
  };
15745
16478
 
15746
- export type HelixVirtualListVueEvents = {};
16479
+ export type HelixVirtualListVueEvents = {
16480
+ /** Fired when a reader comes within one screen of the last item, once for each length of the set. */
16481
+ "helix-load-more": HelixVirtualListHelixLoadMoreElementEvent;
16482
+ /** Fired when the items on screen change, with the new `first` and `last`, which `range` also holds. */
16483
+ "helix-range-change": HelixVirtualListHelixRangeChangeElementEvent;
16484
+ };
15747
16485
 
15748
16486
  export type CustomCssProperties = {
15749
16487
  /** The padding of the trigger and the content. */
@@ -15786,6 +16524,14 @@ export type CustomCssProperties = {
15786
16524
  "--area-chart-width"?: (string) | undefined;
15787
16525
  /** Thickness of a band's top edge. Area Chart, Line Chart, and Bar Chart's `lines` all read this one property. `--area-chart-width` overrides it here. */
15788
16526
  "--chart-stroke"?: (string) | undefined;
16527
+ /** The bright stop of the ramp. Defaults to `--helix-color-primary`. */
16528
+ "--aura-glow"?: (string) | undefined;
16529
+ /** The page the field fades into. Defaults to `--helix-color-background`. */
16530
+ "--aura-ground"?: (string) | undefined;
16531
+ /** The faint stop between the ground and the glow. Defaults to `--helix-color-primary-subtle`. */
16532
+ "--aura-haze"?: (string) | undefined;
16533
+ /** The hottest stop, at the center of a shape. Defaults to `--helix-color-primary-active` on a light page and `--helix-color-foreground` on a dark one. */
16534
+ "--aura-peak"?: (string) | undefined;
15789
16535
  /** How far each avatar sits over the one before it. */
15790
16536
  "--avatar-group-overlap"?: (string) | undefined;
15791
16537
  /** Color of the ring that separates one avatar from the next. */
@@ -15842,10 +16588,20 @@ export type CustomCssProperties = {
15842
16588
  "--breadcrumbs-control-padding-inline"?: (string) | undefined;
15843
16589
  /** How tall a control slotted into a crumb is. */
15844
16590
  "--breadcrumbs-control-size"?: (string) | undefined;
16591
+ /** Text color of the current page's crumb. */
16592
+ "--breadcrumbs-current-color"?: (string) | undefined;
16593
+ /** Weight of every crumb's text. */
16594
+ "--breadcrumbs-font-weight"?: (string) | undefined;
15845
16595
  /** Fill behind a step under the pointer. */
15846
16596
  "--breadcrumbs-hover-color"?: (string) | undefined;
16597
+ /** Text color of a crumb that is not the current page. A link you slot inherits it unless your own styles set a color. */
16598
+ "--breadcrumbs-link-color"?: (string) | undefined;
16599
+ /** Corner radius of the fill behind a step under the pointer. */
16600
+ "--breadcrumbs-radius"?: (string) | undefined;
15847
16601
  /** Color of the chevron. */
15848
16602
  "--breadcrumbs-separator-color"?: (string) | undefined;
16603
+ /** Size of the trail's text. */
16604
+ "--breadcrumbs-font-size"?: (string) | undefined;
15849
16605
  /** Space between items and separators. */
15850
16606
  "--breadcrumbs-gap"?: (string) | undefined;
15851
16607
  /** Space between the buttons, when `spaced`. */
@@ -16114,6 +16870,8 @@ export type CustomCssProperties = {
16114
16870
  "--data-table-heading-background-color"?: (string) | undefined;
16115
16871
  /** The text color of a heading. */
16116
16872
  "--data-table-heading-color"?: (string) | undefined;
16873
+ /** How far a tree grid's row header steps in for each level. It defaults to the width of the mark that opens a row. */
16874
+ "--data-table-indent"?: (string) | undefined;
16117
16875
  /** The space above and below a cell's content. */
16118
16876
  "--data-table-padding-block"?: (string) | undefined;
16119
16877
  /** The space on either side of a cell's content. */
@@ -16124,6 +16882,8 @@ export type CustomCssProperties = {
16124
16882
  "--data-table-text"?: (string) | undefined;
16125
16883
  /** The alignment of the cell's column: `start`, `center`, or `end`. Unset when the column sets none. The component writes it on each cell it draws, and the stylesheet reads it. `Table` sets `--table-cell-align` for the same purpose. */
16126
16884
  "--data-table-cell-align"?: (string) | undefined;
16885
+ /** How deep a row is in a tree grid, from 1. The component writes it on each row header cell, and the stylesheet indents by it. */
16886
+ "--data-table-level"?: (string) | undefined;
16127
16887
  /** The column track list, worked out from the columns. The component writes it inline on the element that reads it, so setting it has no effect. Set a column's `width` to change it. */
16128
16888
  "--data-table-template"?: (string) | undefined;
16129
16889
  /** The fill behind the field. */
@@ -16282,6 +17042,10 @@ export type CustomCssProperties = {
16282
17042
  "--filter-input-shadow"?: (string) | undefined;
16283
17043
  /** The height of the empty field. The field grows from this height. */
16284
17044
  "--filter-input-size"?: (string) | undefined;
17045
+ /** The narrowest the growing item of a `flank` layout gets before the two stack, as a share of the row. Defaults to `50%`. */
17046
+ "--flex-flank-min"?: (string) | undefined;
17047
+ /** The width of the fixed item of a `flank` layout. Defaults to its own width. */
17048
+ "--flex-flank-size"?: (string) | undefined;
16285
17049
  /** The color behind the drawing while it loads. */
16286
17050
  "--graph-background-color"?: (string) | undefined;
16287
17051
  /** The frame's height, as a length. */
@@ -16290,8 +17054,12 @@ export type CustomCssProperties = {
16290
17054
  "--graph-border-color"?: (string) | undefined;
16291
17055
  /** The list's width beside the drawing, or over it when opened with `no-panel`. */
16292
17056
  "--graph-panel-size"?: (string) | undefined;
17057
+ /** The named areas, as `grid-template-areas` takes them, such as `"rail main"`. A child takes its area with `grid-area`. */
17058
+ "--grid-areas"?: (string) | undefined;
16293
17059
  /** An explicit track list. It overrides `min` and `columns`. Use it for tracks of unequal widths, which neither attribute can set. */
16294
17060
  "--grid-columns"?: (string) | undefined;
17061
+ /** An explicit row track list, such as `auto minmax(0, 1fr) auto`. Rows are sized by their content when it is unset. */
17062
+ "--grid-rows"?: (string) | undefined;
16295
17063
  /** How tall a cell is. One row of tall, narrow cells looks like a status page. */
16296
17064
  "--heatmap-cell-height"?: (string) | undefined;
16297
17065
  /** How wide a cell is. The strip fits as many as the container allows. */
@@ -16404,12 +17172,18 @@ export type CustomCssProperties = {
16404
17172
  "--chart-terminus-x"?: (string) | undefined;
16405
17173
  /** Where a series' last reading sits vertically, as a percentage. Written by the component. */
16406
17174
  "--chart-terminus-y"?: (string) | undefined;
17175
+ /** The fill behind a row that is `current`. */
17176
+ "--list-item-current-background-color"?: (string) | undefined;
17177
+ /** The opacity of a `disabled` row. */
17178
+ "--list-item-disabled-opacity"?: (string) | undefined;
16407
17179
  /** The padding inside the row. */
16408
17180
  "--list-item-padding"?: (string) | undefined;
16409
17181
  /** What the rail cell shows. The list sets it. */
16410
17182
  "--list-item-rail-content"?: (string) | undefined;
16411
17183
  /** Whether the row has a rail. The list sets it. */
16412
17184
  "--list-item-rail-display"?: (string) | undefined;
17185
+ /** The fill behind a selected row, in a list that selects. */
17186
+ "--list-item-selected-background-color"?: (string) | undefined;
16413
17187
  /** The font weight of a term in a description list. */
16414
17188
  "--list-item-term-weight"?: (string) | undefined;
16415
17189
  /** The space between rows. */
@@ -16420,6 +17194,10 @@ export type CustomCssProperties = {
16420
17194
  "--list-rail-inline-size"?: (string) | undefined;
16421
17195
  /** The counter style of the rail's numbers. Takes any `list-style-type`. */
16422
17196
  "--list-rail-style"?: (string) | undefined;
17197
+ /** The number of the first row, written where `start` or `reversed` moves it. */
17198
+ "--list-first"?: (string) | undefined;
17199
+ /** What each row adds to the number before it: `1`, or `-1` where `reversed`. */
17200
+ "--list-step"?: (string) | undefined;
16423
17201
  /** The panel's fill. Set it to `transparent` when the list is already inside a panel. */
16424
17202
  "--listbox-background-color"?: (string) | undefined;
16425
17203
  /** The panel's border, as a shorthand. Set it to `none` when the list is already inside a panel. */
@@ -16500,6 +17278,8 @@ export type CustomCssProperties = {
16500
17278
  "--megamenu-size"?: (string) | undefined;
16501
17279
  /** Where the panel starts, measured from the bar above it. */
16502
17280
  "--megamenu-top"?: (string) | undefined;
17281
+ /** Color of the shortcut and the words in the `end` slot. */
17282
+ "--menu-item-detail-color"?: (string) | undefined;
16503
17283
  /** Width of the trailing column, including the gap before it, which holds a check mark or a submenu caret. */
16504
17284
  "--menu-item-end"?: (string) | undefined;
16505
17285
  /** Fill under the pointer. */
@@ -16518,6 +17298,8 @@ export type CustomCssProperties = {
16518
17298
  "--menu-min-inline-size"?: (string) | undefined;
16519
17299
  /** Shadow under the panel. Defaults to `--helix-shadow-floating`, so the panel keeps a shadow over any content below it. */
16520
17300
  "--menu-shadow"?: (string) | undefined;
17301
+ /** Color of the heading. */
17302
+ "--menu-section-heading-color"?: (string) | undefined;
16521
17303
  /** The fill color. Overrides the band's tone. */
16522
17304
  "--meter-color"?: (string) | undefined;
16523
17305
  /** The color of a slotted label. */
@@ -16544,10 +17326,20 @@ export type CustomCssProperties = {
16544
17326
  "--meter-fraction"?: (string) | undefined;
16545
17327
  /** How much of the circle the arc covers, as a path length. */
16546
17328
  "--meter-sweep"?: (string) | undefined;
17329
+ /** Height of the bar in a row. Each destination fills it. */
17330
+ "--navigation-block-size"?: (string) | undefined;
16547
17331
  /** Space between destinations. */
16548
17332
  "--navigation-gap"?: (string) | undefined;
16549
17333
  /** Fill of the marker on the current destination. */
16550
17334
  "--navigation-indicator-color"?: (string) | undefined;
17335
+ /** Corner radius of the marker. */
17336
+ "--navigation-indicator-radius"?: (string) | undefined;
17337
+ /** Shadow under the marker, for a marker that sits raised on the bar. */
17338
+ "--navigation-indicator-shadow"?: (string) | undefined;
17339
+ /** Text color of a destination that is not the current one. Read by the page's stylesheet, which styles the links you slot. */
17340
+ "--navigation-item-color"?: (string) | undefined;
17341
+ /** Text color of the current destination, the one marked `aria-current="page"`. */
17342
+ "--navigation-item-current-color"?: (string) | undefined;
16551
17343
  /** Text color in a read item. */
16552
17344
  "--notifications-color"?: (string) | undefined;
16553
17345
  /** Color of the dismiss control. It is `danger`, because dismissing an item removes it for good. */
@@ -16598,6 +17390,8 @@ export type CustomCssProperties = {
16598
17390
  "--object-inspector-border-color"?: (string) | undefined;
16599
17391
  /** The background of the bar that holds the label. */
16600
17392
  "--object-inspector-header-background-color"?: (string) | undefined;
17393
+ /** The background of an entry a filter matched. */
17394
+ "--object-inspector-match-background-color"?: (string) | undefined;
16601
17395
  /** The corner radius of the tree. */
16602
17396
  "--object-inspector-radius"?: (string) | undefined;
16603
17397
  /** How deep a row is, from 0 at the root, for indenting it. */
@@ -16772,10 +17566,20 @@ export type CustomCssProperties = {
16772
17566
  "--scroll-area-fade-inline-start"?: (string) | undefined;
16773
17567
  /** The scrollbar width, as a `scrollbar-width` keyword. */
16774
17568
  "--scroll-area-scrollbar"?: (string) | undefined;
17569
+ /** The thickness of each scrollbar drawn under `scrollbars`, and the size of the corner. */
17570
+ "--scroll-area-scrollbar-size"?: (string) | undefined;
16775
17571
  /** The color of the scrollbar's thumb. */
16776
17572
  "--scroll-area-thumb-color"?: (string) | undefined;
17573
+ /** The color of a thumb drawn under `scrollbars` while the pointer is over it. */
17574
+ "--scroll-area-thumb-hover-color"?: (string) | undefined;
17575
+ /** The shortest a thumb drawn under `scrollbars` gets, however long the content. */
17576
+ "--scroll-area-thumb-min-size"?: (string) | undefined;
16777
17577
  /** The color of the scrollbar's track. */
16778
17578
  "--scroll-area-track-color"?: (string) | undefined;
17579
+ /** How far along its axis the content is scrolled, from 0 at the start to 1 at the end. Written on each `scrollbar` part, so its thumb inherits it. Counted from the right on a right-to-left page. */
17580
+ "--scroll-area-scroll-fraction"?: (string) | undefined;
17581
+ /** The share of the track the thumb covers, from 0 to 1, which is how much of the content is in view. Written on each `scrollbar` part. */
17582
+ "--scroll-area-thumb-fraction"?: (string) | undefined;
16779
17583
  /** Color of the panel's edge. */
16780
17584
  "--select-border-color"?: (string) | undefined;
16781
17585
  /** Width of the panel's edge. Defaults to `--helix-border-floating`, which is `0`, so the panel stands out by its shadow unless your theme sets a width. */
@@ -16796,10 +17600,26 @@ export type CustomCssProperties = {
16796
17600
  "--skeleton-sheen-color"?: (string) | undefined;
16797
17601
  /** The diameter of the circle shape. */
16798
17602
  "--skeleton-size"?: (string) | undefined;
17603
+ /** The background of the link while it is shown. */
17604
+ "--skip-link-background-color"?: (string) | undefined;
16799
17605
  /** The border color of the link while it is shown. */
16800
17606
  "--skip-link-border-color"?: (string) | undefined;
16801
17607
  /** The border width of the link while it is shown. Follows `--helix-border-floating`, which is `0`, so the link is set apart by its shadow unless a theme sets a border. */
16802
17608
  "--skip-link-border-width"?: (string) | undefined;
17609
+ /** The text color of the link while it is shown. */
17610
+ "--skip-link-color"?: (string) | undefined;
17611
+ /** The size of the link's text. */
17612
+ "--skip-link-font-size"?: (string) | undefined;
17613
+ /** How far the shown link sits from the top of the viewport. */
17614
+ "--skip-link-inset-block"?: (string) | undefined;
17615
+ /** How far the shown link sits from the start edge of the viewport. */
17616
+ "--skip-link-inset-inline"?: (string) | undefined;
17617
+ /** The space above and below the link's text. */
17618
+ "--skip-link-padding-block"?: (string) | undefined;
17619
+ /** The space either side of the link's text. */
17620
+ "--skip-link-padding-inline"?: (string) | undefined;
17621
+ /** The corner radius of the link. */
17622
+ "--skip-link-radius"?: (string) | undefined;
16803
17623
  /** The shadow under the link while it is shown. Follows `--helix-shadow-floating`, because the link sits over the corner of the page. */
16804
17624
  "--skip-link-shadow"?: (string) | undefined;
16805
17625
  /** The color of the filled part of the track, behind the thumb. */
@@ -16846,10 +17666,22 @@ export type CustomCssProperties = {
16846
17666
  "--sparkline-inline-size"?: (string) | undefined;
16847
17667
  /** Thickness of the line, overriding `weight`. */
16848
17668
  "--sparkline-width"?: (string) | undefined;
17669
+ /** Fill of the round icon. */
17670
+ "--speed-dial-item-background-color"?: (string) | undefined;
17671
+ /** Color of the icon. */
17672
+ "--speed-dial-item-color"?: (string) | undefined;
16849
17673
  /** Edge length of the icon. */
16850
17674
  "--speed-dial-item-size"?: (string) | undefined;
17675
+ /** Fill of the chip holding the action's name. */
17676
+ "--speed-dial-label-background-color"?: (string) | undefined;
17677
+ /** Color of the action's name. */
17678
+ "--speed-dial-label-color"?: (string) | undefined;
16851
17679
  /** Space between the actions. */
16852
17680
  "--speed-dial-gap"?: (string) | undefined;
17681
+ /** The wait between one action arriving and the next. */
17682
+ "--speed-dial-stagger"?: (string) | undefined;
17683
+ /** How far each action moves as it arrives. */
17684
+ "--speed-dial-travel"?: (string) | undefined;
16853
17685
  /** Color of the line between the panes. */
16854
17686
  "--splitter-color"?: (string) | undefined;
16855
17687
  /** Width of the handle where two dividers cross. */
@@ -16912,6 +17744,12 @@ export type CustomCssProperties = {
16912
17744
  "--table-cell-align"?: (string) | undefined;
16913
17745
  /** Track list for the columns. It overrides the track list worked out from the columns. */
16914
17746
  "--table-columns"?: (string) | undefined;
17747
+ /** The color of the words in the `heading` slot. */
17748
+ "--table-title-color"?: (string) | undefined;
17749
+ /** The space between the `heading` slot and the grid. */
17750
+ "--table-title-gap"?: (string) | undefined;
17751
+ /** The font size of the words in the `heading` slot. */
17752
+ "--table-title-text"?: (string) | undefined;
16915
17753
  /** The column track list the table works out from its columns. The component writes it inline on the element that reads it, so setting it has no effect. Set `columns` to change the tracks. */
16916
17754
  "--table-template"?: (string) | undefined;
16917
17755
  /** The space between the tab row and the panel's content. */
@@ -16944,6 +17782,16 @@ export type CustomCssProperties = {
16944
17782
  "--tag-foreground-color"?: (string) | undefined;
16945
17783
  /** The corner radius of the tag. */
16946
17784
  "--tag-radius"?: (string) | undefined;
17785
+ /** The typeface. Overrides the ramp's. */
17786
+ "--text-font-family"?: (string) | undefined;
17787
+ /** The size. Overrides the ramp's. */
17788
+ "--text-font-size"?: (string) | undefined;
17789
+ /** The weight. Overrides the ramp's. */
17790
+ "--text-font-weight"?: (string) | undefined;
17791
+ /** The tracking. Overrides the ramp's. */
17792
+ "--text-letter-spacing"?: (string) | undefined;
17793
+ /** The leading. Overrides the ramp's. */
17794
+ "--text-line-height"?: (string) | undefined;
16947
17795
  /** Fill behind the text. */
16948
17796
  "--textarea-background-color"?: (string) | undefined;
16949
17797
  /** Edge of the field at rest. Hover, focus and an error still draw their own. */
@@ -16980,6 +17828,8 @@ export type CustomCssProperties = {
16980
17828
  "--time-picker-selected-color"?: (string) | undefined;
16981
17829
  /** How tall a wheel is. Five rows by default. */
16982
17830
  "--time-picker-wheel-block-size"?: (string) | undefined;
17831
+ /** The color of the heading. */
17832
+ "--timeline-group-heading-color"?: (string) | undefined;
16983
17833
  /** How round the mark is. Zero is a square, and half its size is a disc. */
16984
17834
  "--timeline-marker-radius"?: (string) | undefined;
16985
17835
  /** Edge length of the mark. */
@@ -17008,8 +17858,14 @@ export type CustomCssProperties = {
17008
17858
  "--toast-inset"?: (string) | undefined;
17009
17859
  /** The fill of the moving marker. */
17010
17860
  "--toggle-group-indicator-color"?: (string) | undefined;
17861
+ /** The fill behind the controls. Transparent unless set. */
17862
+ "--toolbar-background-color"?: (string) | undefined;
17011
17863
  /** The space between controls. */
17012
17864
  "--toolbar-gap"?: (string) | undefined;
17865
+ /** The space between the toolbar's edge and its controls. */
17866
+ "--toolbar-padding"?: (string) | undefined;
17867
+ /** The corner radius of the toolbar's fill. */
17868
+ "--toolbar-radius"?: (string) | undefined;
17013
17869
  /** The size of the arrow on the bubble's edge. */
17014
17870
  "--tooltip-arrow-size"?: (string) | undefined;
17015
17871
  /** The blur behind a `frosted` or `glass` bubble. */
@@ -17034,6 +17890,14 @@ export type CustomCssProperties = {
17034
17890
  "--tour-shadow"?: (string) | undefined;
17035
17891
  /** The color of the panel's surface. */
17036
17892
  "--tour-surface-color"?: (string) | undefined;
17893
+ /** Fill of the check mark's box. */
17894
+ "--tree-checkbox-background-color"?: (string) | undefined;
17895
+ /** Border of the check mark's box. */
17896
+ "--tree-checkbox-border-color"?: (string) | undefined;
17897
+ /** Color of the check, and of the bar of a partly checked branch. */
17898
+ "--tree-checkbox-mark-color"?: (string) | undefined;
17899
+ /** Size of the check mark's box. Follows the chevron's size. */
17900
+ "--tree-checkbox-size"?: (string) | undefined;
17037
17901
  /** Size of the chevron, and the gutter a leaf reserves. */
17038
17902
  "--tree-chevron-size"?: (string) | undefined;
17039
17903
  /** Space between rows. */
@@ -17134,7 +17998,7 @@ export interface WcToolkitVueGlobalComponents {
17134
17998
  HelixAreaChartVueProps,
17135
17999
  HelixAreaChartVueEvents
17136
18000
  >;
17137
- /** One fragment shader draws over a full-screen triangle, and its palette comes from the tokens. A background built on '--helix-color-primary' changes when your brand color changes. Every shape ramps through four token stops, and the token layer inverts each one: the page background, 'primary-subtle', 'primary', and a peak. The peak is the foreground on a dark page and 'primary-active' on a light one, because mixing a saturated hue toward near-black removes its chroma. The component reads which way the page runs from the background's luminance, because the mode is a private token. The geometry is three vertices derived from 'gl_VertexID'. There is no dependency, scene graph, attribute, buffer, or upload. The shader stops drawing in these cases: - The element is off screen or in a background tab. - 'prefers-reduced-motion' is set. The element shows one still frame. - The browser takes back the drawing context, on a GPU reset or past its limit of about sixteen contexts. The gradient shows until the context returns. On a renderer that draws on the CPU, such as a headless browser or a machine with no usable GPU, the element shows the gradient. There the shader costs about 450ms for the first frame of each element, against 2ms on a GPU. Aura is styled only and has behavior, which the tier split does not otherwise allow. Its behavior is drawing to a canvas, so there is no structure for you to restyle and nothing for a headless version to hold. */
18001
+ /** One fragment shader draws over a full-screen triangle, and its palette comes from the tokens. A background built on '--helix-color-primary' changes when your brand color changes. Every shape ramps through four token stops, and the token layer inverts each one: the page background, 'primary-subtle', 'primary', and a peak. The peak is the foreground on a dark page and 'primary-active' on a light one, because mixing a saturated hue toward near-black removes its chroma. The component reads which way the page runs from the background's luminance, because the mode is a private token. The geometry is three vertices derived from 'gl_VertexID'. There is no dependency, scene graph, attribute, buffer, or upload. The shader stops drawing in these cases: - The element is off screen or in a background tab. - 'prefers-reduced-motion' is set. The element shows one still frame. - The browser takes back the drawing context, on a GPU reset or past its limit of about sixteen contexts. The gradient shows until the context returns. On a renderer that draws on the CPU, such as a headless browser or a machine with no usable GPU, the element shows the gradient. There the shader costs about 450ms for the first frame of each element, against 2ms on a GPU. Aura is styled only and has behavior, which the tier split does not otherwise allow. Its behavior is drawing to a canvas, so there is no structure for you to restyle and nothing for a headless version to hold. **Content placed inside sits over the field**, in a 'content' part that covers the aura, so an interactive aura answers the pointer over the content too. Clicks still reach the content. Style '::part(content)' to place it, such as centering a hero's heading. **The colors are the theme's, and each has a hook**: '--aura-ground', '--aura-haze', '--aura-glow' and '--aura-peak', read by the shader and by the fallback gradient alike, from wherever on the page you set them. Where the gradient shows in place of the shader, the aura matches ':state(fallback)' and sends 'helix-aura-fallback' with the reason. */
17138
18002
  "helix-aura": DefineCustomElement<
17139
18003
  HelixAura,
17140
18004
  HelixAuraVueProps,
@@ -17182,7 +18046,7 @@ export interface WcToolkitVueGlobalComponents {
17182
18046
  HelixBreadcrumbsVueProps,
17183
18047
  HelixBreadcrumbsVueEvents
17184
18048
  >;
17185
- /** Joins the buttons into one shape: the outer corners keep their radius, the inner corners lose it, and adjacent borders collapse into one line. The joining rule is in the base layer, paired with 'data-button' like the button's own box, because the corner is on the control inside each button's shadow root, where this component's styles cannot reach. The same rule works for your own anchor styled as a button. */
18049
+ /** Joins the buttons into one shape: the outer corners keep their radius, the inner corners lose it, and adjacent borders collapse into one line. The joining rule is in the base layer, paired with 'data-button' like the button's own box, because the corner is on the control inside each button's shadow root, where this component's styles cannot reach. The same rule works for your own anchor styled as a button. The buttons take their height from the region, so set 'data-density' on the group to make every button in it smaller or larger together. */
17186
18050
  "helix-button-group": DefineCustomElement<
17187
18051
  HelixButtonGroup,
17188
18052
  HelixButtonGroupVueProps,
@@ -17410,7 +18274,7 @@ export interface WcToolkitVueGlobalComponents {
17410
18274
  HelixFilterInputVueProps,
17411
18275
  HelixFilterInputVueEvents
17412
18276
  >;
17413
- /** The host is the flex container and its only child is a slot, so '<helix-flex>' adds no box beyond the '<div>' it replaces. There is no separate Stack component. For a stack, set 'direction="column"'. 'gap' takes a space token name, so spacing stays on the scale. Flex is presentation only, so it has no headless tier. */
18277
+ /** The host is the flex container and its only child is a slot, so '<helix-flex>' adds no box beyond the '<div>' it replaces. There is no separate Stack component. For a stack, set 'direction="column"'. 'gap' takes a space token name, so spacing stays on the scale. 'row-gap' and 'column-gap' set one axis each and win over 'gap' on theirs. 'layout' sets up one of three common patterns, and any attribute you also write wins over the pattern's own value: - 'cluster': items in a wrapping row, centered on one line, such as tags. - 'split': the first item at the start and the rest pushed to the end, such as a title and its actions. Wraps when there is no room. - 'flank' and 'flank-end': a fixed item beside one that takes the rest, such as an icon and its text, or a field and its button. The item that takes the rest stays at least '--flex-flank-min' wide, and the pair stacks once it cannot. Flex is presentation only, so it has no headless tier. */
17414
18278
  "helix-flex": DefineCustomElement<
17415
18279
  HelixFlex,
17416
18280
  HelixFlexVueProps,
@@ -17428,7 +18292,7 @@ export interface WcToolkitVueGlobalComponents {
17428
18292
  HelixGraphVueProps,
17429
18293
  HelixGraphVueEvents
17430
18294
  >;
17431
- /** Set columns in one of two ways: - 'columns' sets a fixed count. - 'min' fits as many equal columns as there is room for at that width, so the layout responds with no breakpoints to maintain. If you set both, 'min' wins. The grid is presentation only, so there is no headless tier. */
18295
+ /** Set columns in one of two ways: - 'columns' sets a fixed count. - 'min' fits as many equal columns as there is room for at that width, so the layout responds with no breakpoints to maintain. If you set both, 'min' wins. The grid is presentation only, so there is no headless tier. 'row-gap' and 'column-gap' set one axis each and win over 'gap' on theirs. '--grid-rows' and '--grid-areas' set the rows and named areas, and a child takes its place with 'grid-area' in your own stylesheet. **A child can span columns with 'data-grid-span'.** 'data-grid-span="full"' runs from the first column to the last, such as a heading across a set of cards, and a number from '2' to '6' spans that many columns. */
17432
18296
  "helix-grid": DefineCustomElement<
17433
18297
  HelixGrid,
17434
18298
  HelixGridVueProps,
@@ -17602,6 +18466,12 @@ export interface WcToolkitVueGlobalComponents {
17602
18466
  HelixMenuVueProps,
17603
18467
  HelixMenuVueEvents
17604
18468
  >;
18469
+ /** The heading is set in the menu's small type, quieter than the rows, with the rows' own inset, so it reads as the name of what follows. */
18470
+ "helix-menu-section": DefineCustomElement<
18471
+ HelixMenuSection,
18472
+ HelixMenuSectionVueProps,
18473
+ HelixMenuSectionVueEvents
18474
+ >;
17605
18475
  /** Draws the same bar as 'Progress', at twice the height, with the library's standard corner radius in place of the pill shape. The extra height makes a meter easy to tell apart from a progress bar and keeps the tick at each threshold visible. At eight pixels the ticks are hairlines. At sixteen they are clear. The ticks cut the fill into segments, which is why the corners are square: a pill-shaped bar would have round outer ends and square inner ends. Once you set thresholds, the fill takes the success, warning, or danger tone of the band the reading falls in. A meter with no thresholds is neutral. A tick marks each threshold, so the reading can be placed against the bands without relying on color. A reading past either end squares the corner on that side, the convention for a quantity that continues past its frame. The bar stops at the end, and the text and the accessible value give the actual reading. */
17606
18476
  "helix-meter": DefineCustomElement<
17607
18477
  HelixMeter,
@@ -17638,7 +18508,7 @@ export interface WcToolkitVueGlobalComponents {
17638
18508
  HelixNumberInputVueProps,
17639
18509
  HelixNumberInputVueEvents
17640
18510
  >;
17641
- /** The styled tier draws the tree in the Code Block frame. Keys and each type of value take their colors from the syntax colors code blocks use. Each row is one line, and a long string ends in an ellipsis, so every row has the same height and a windowed tree does not measure rows one by one. */
18511
+ /** The styled tier draws the tree in the Code Block frame. Keys and each type of value take their colors from the syntax colors code blocks use. Each row is one line, and a long string ends in an ellipsis, so every row has the same height and a windowed tree does not measure rows one by one. A filter's matches take a tinted ground, and the filter field is a band of the same frame, under the label. */
17642
18512
  "helix-object-inspector": DefineCustomElement<
17643
18513
  HelixObjectInspector,
17644
18514
  HelixObjectInspectorVueProps,
@@ -17656,13 +18526,13 @@ export interface WcToolkitVueGlobalComponents {
17656
18526
  HelixOptionVueProps,
17657
18527
  HelixOptionVueEvents
17658
18528
  >;
17659
- /** A cloud of dots drawn to a canvas, with one shape per state: - 'connecting' and 'thinking': the same leaning sash, differing in how agitated it is. - 'waiting' and 'done': the same settled ball at different tempos. - 'fetching': a globe with a light moving around it. - 'listening': a closed sphere with a ripple crossing it. - 'working': a ring. Every state is the same banded grid with different parameters. Changing state interpolates the parameters, so every frame in between is a complete shape. A small change gets less time than a large one, such as a sash becoming a ring. The outline changes first, so the light starts orbiting only after the shape is round. The cloud does not rotate, and all movement happens inside it. The exception is the light, which travels because a ring of evenly spaced dots looks the same when rotated, so a turning state needs something fixed passing over it. Colors come from '--orb-color' and '--orb-ground'. Each dot's color is mixed toward the ground color by its depth, so depth holds when the theme changes. The animation stops when the orb is off screen or in a background tab. With 'prefers-reduced-motion', it draws one still frame. The orb is styled only and has behavior, which the tier split does not otherwise allow. Its role, name and busy state follow 'state', and the rest is drawing dots to a canvas, so there is no structure to restyle. For a drawing of your own, the headless 'Loader' holds the same busy progress bar and its name. */
18529
+ /** A cloud of dots drawn to a canvas, with one shape per state: - 'connecting' and 'thinking': the same leaning sash, differing in how agitated it is. - 'waiting' and 'done': the same settled ball at different tempos. - 'fetching': a globe with a light moving around it. - 'listening': a closed sphere with a ripple crossing it. - 'working': a ring. Every state is the same banded grid with different parameters. Changing state interpolates the parameters, so every frame in between is a complete shape. A small change gets less time than a large one, such as a sash becoming a ring. The outline changes first, so the light starts orbiting only after the shape is round. The cloud does not rotate, and all movement happens inside it. The exception is the light, which travels because a ring of evenly spaced dots looks the same when rotated, so a turning state needs something fixed passing over it. Colors come from '--orb-color' and '--orb-ground'. Each dot's color is mixed toward the ground color by its depth, so depth holds when the theme changes. The animation stops when the orb is off screen or in a background tab. With 'prefers-reduced-motion', it draws one still frame. The orb is styled only and has behavior, which the tier split does not otherwise allow. Its role, name and busy state follow 'state', and the rest is drawing dots to a canvas, so there is no structure to restyle. For a drawing of your own, the headless 'Loader' holds the same busy progress bar and its name. Each state is also a custom state, such as ':state(thinking)' or ':state(done)', so a page can style what sits around an orb by what it shows, whether the state was written as an attribute or set from script. */
17660
18530
  "helix-orb": DefineCustomElement<
17661
18531
  HelixOrb,
17662
18532
  HelixOrbVueProps,
17663
18533
  HelixOrbVueEvents
17664
18534
  >;
17665
- /** A rule runs down the leading edge, and the current section is highlighted along it. Set nesting with 'data-level' on each link, using the heading levels: '2' through '6' each add one step of '--outline-indent', and a link without 'data-level' is at the top level. The outline does not read heading levels from the document, because the headings are not always in the document. */
18535
+ /** A rule runs down the leading edge, and the current section is highlighted along it. Set nesting with 'data-level' on each link, using the heading levels: '2' through '6' each add one step of '--outline-indent', and a link without 'data-level' is at the top level. The outline does not read heading levels from the document, because the headings are not always in the document. Links in a nested '<ul>' take their indentation from your own stylesheet: the outline's styles reach the elements slotted into it and nothing inside them. Write the links flat with 'data-level' for the indentation drawn here, and screen readers still hear them as nested lists. A heading slotted into 'heading' is set above the links, lined up with them. */
17666
18536
  "helix-outline": DefineCustomElement<
17667
18537
  HelixOutline,
17668
18538
  HelixOutlineVueProps,
@@ -17758,7 +18628,7 @@ export interface WcToolkitVueGlobalComponents {
17758
18628
  HelixSandboxStatusBarVueProps,
17759
18629
  HelixSandboxStatusBarVueEvents
17760
18630
  >;
17761
- /** The sandbox receives 'helix-console' events from the preview and passes them to the terminal. The preview is a separate document, so messages cross 'postMessage' and arrive as text. **Repeats collapse.** Consecutive identical lines show as one line with a count, so an example with a render loop does not fill the panel with the same warning. Only consecutive repeats collapse, so the order of messages is kept. The panel has 'role="log"', the role for an append-only stream. Screen readers announce new output without reading the whole panel again. A line's level is read before it, except a plain 'log', so an error does not sound like any other line. */
18631
+ /** The sandbox receives 'helix-console' events from the preview and passes them to the terminal. The preview is a separate document, so messages cross 'postMessage' and arrive as text. **Repeats collapse.** Consecutive identical lines show as one line with a count, so an example with a render loop does not fill the panel with the same warning. Only consecutive repeats collapse, so the order of messages is kept. The panel has 'role="log"', the role for an append-only stream. Screen readers announce new output without reading the whole panel again. A line's level is read before it, except a plain 'log', so an error does not sound like any other line. **'controls' adds a clear button and a level filter** above the log. Both are also yours to drive without them: 'clear()' empties the log, and 'level' hides the quieter lines. */
17762
18632
  "helix-sandbox-terminal": DefineCustomElement<
17763
18633
  HelixSandboxTerminal,
17764
18634
  HelixSandboxTerminalVueProps,
@@ -17776,7 +18646,7 @@ export interface WcToolkitVueGlobalComponents {
17776
18646
  HelixScatterChartVueProps,
17777
18647
  HelixScatterChartVueEvents
17778
18648
  >;
17779
- /** Presentation only: fades on the edges the base class reports, and a scrollbar styled to match the design system. The base class measures which edges have content past them. */
18649
+ /** Presentation only: fades on the edges the base class reports, and a scrollbar styled to match the design system. The base class measures which edges have content past them. Under 'scrollbars', the browser's scrollbar is hidden and the component's own are drawn over the content at the edge, in the same colors. */
17780
18650
  "helix-scroll-area": DefineCustomElement<
17781
18651
  HelixScrollArea,
17782
18652
  HelixScrollAreaVueProps,
@@ -17913,7 +18783,7 @@ export interface WcToolkitVueGlobalComponents {
17913
18783
  HelixTagVueProps,
17914
18784
  HelixTagVueEvents
17915
18785
  >;
17916
- /** 'as' sets the element, which decides the document outline and what a screen reader announces. 'variant' sets the type ramp, which decides size, weight, leading, and tracking together. The two match by default, so usually you set only 'as', such as 'as="h2"'. Set 'variant' when the look and the element differ, such as a heading that looks smaller or a '<p>' styled as a caption. The pairing is resolved in CSS, so the element writes nothing to its host. 'as="h2"' picks up the heading ramp through a selector, and setting 'variant' overrides the pairing. Do not derive it in 'willUpdate', because that adds a host attribute the server markup does not have, which causes a hydration mismatch in React. Size, weight, and leading are not separate properties. Choose a named ramp with 'variant'. 'tone' and 'emphasis' are separate from 'variant', because color carries state. Combining them would need a variant for every pair, such as 'caption-danger' and 'label-muted'. */
18786
+ /** 'as' sets the element, which decides the document outline and what a screen reader announces. 'variant' sets the type ramp, which decides size, weight, leading, and tracking together. The two match by default, so usually you set only 'as', such as 'as="h2"'. Set 'variant' when the look and the element differ, such as a heading that looks smaller or a '<p>' styled as a caption. The pairing is resolved in CSS, so the element writes nothing to its host. 'as="h2"' picks up the heading ramp through a selector, and setting 'variant' overrides the pairing. Do not derive it in 'willUpdate', because that adds a host attribute the server markup does not have, which causes a hydration mismatch in React. Size, weight, and leading are not separate properties. Choose a named ramp with 'variant'. 'tone' and 'emphasis' are separate from 'variant', because color carries state. Combining them would need a variant for every pair, such as 'caption-danger' and 'label-muted'. 'lines' cuts the text off after that many lines and ends it with an ellipsis. 'text-wrap' balances or tidies the line breaks, and 'text-align' sets the alignment. Each '--text-*' property overrides one value of the ramp, for a text or for every text inside an element. **To label a control, write a native '<label data-text="label">'.** The base layer gives it the label ramp. A Helix field takes its own 'label'. */
17917
18787
  "helix-text": DefineCustomElement<
17918
18788
  HelixText,
17919
18789
  HelixTextVueProps,
@@ -17937,13 +18807,19 @@ export interface WcToolkitVueGlobalComponents {
17937
18807
  HelixTimePickerVueProps,
17938
18808
  HelixTimePickerVueEvents
17939
18809
  >;
18810
+ /** The heading sits at the start edge, over the entries, in the small heavy type of a section label, and the space under one group is the space between two entries. */
18811
+ "helix-timeline-group": DefineCustomElement<
18812
+ HelixTimelineGroup,
18813
+ HelixTimelineGroupVueProps,
18814
+ HelixTimelineGroupVueEvents
18815
+ >;
17940
18816
  /** Draws the rail down the side, the mark on it, and the line that arrives from the previous entry. */
17941
18817
  "helix-timeline-item": DefineCustomElement<
17942
18818
  HelixTimelineItem,
17943
18819
  HelixTimelineItemVueProps,
17944
18820
  HelixTimelineItemVueEvents
17945
18821
  >;
17946
- /** Sets the direction time runs in and the spacing between events. Each entry draws its own mark and line. */
18822
+ /** Sets the direction time runs in and the spacing between events. Each entry draws its own mark and line. 'layout' and 'orientation' move where the entries are drawn, and never the order they are read in, which is the order you write them in: - Unset, the line runs down the start edge, with each time over what happened. - 'layout="opposite"' runs the line down the middle, with each time on the start side and what happened on the end side. - 'layout="alternate"' runs the line down the middle, with the first entry on the end side, the second on the start side, and so on. - 'orientation="horizontal"' runs the line across the top, with the entries side by side in the order they are read, and the time over what happened under each mark. Use it for a few entries, since they share the width. */
17947
18823
  "helix-timeline": DefineCustomElement<
17948
18824
  HelixTimeline,
17949
18825
  HelixTimelineVueProps,
@@ -18033,13 +18909,13 @@ export interface WcToolkitVueGlobalComponents {
18033
18909
  HelixVideoPlaylistVueProps,
18034
18910
  HelixVideoPlaylistVueEvents
18035
18911
  >;
18036
- /** The player comes from the headless tier. This tier adds the control bar: where it sits, when it shows, and how the two ranges look. The bar sits over the picture, so the video keeps its own size and nothing below it moves. The bar hides once a playing video has gone 'idle-delay' without input. It shows again when the pointer moves, and whenever anything inside it has focus, so you can reach it with the keyboard. A paused video keeps its bar. */
18912
+ /** The player comes from the headless tier. This tier adds the control bar: where it sits, when it shows, and how the two ranges look. The bar sits over the picture, so the video keeps its own size and nothing below it moves. The bar hides once a playing video has gone 'idle-delay' without input. It shows again when the pointer moves, and whenever anything inside it has focus, so you can reach it with the keyboard. A paused video keeps its bar. An icon put in one of the '-icon' slots is drawn at the size of the glyph it replaces, and in the control's color. */
18037
18913
  "helix-video": DefineCustomElement<
18038
18914
  HelixVideo,
18039
18915
  HelixVideoVueProps,
18040
18916
  HelixVideoVueEvents
18041
18917
  >;
18042
- /** The styled tier styles only the scrolling box. Rows are your markup in the light DOM, so your stylesheet styles them the same as any other content, and this tier sets no rules for them. */
18918
+ /** The styled tier styles the scrolling box and draws the focus ring on the row holding focus. Rows are your markup in the light DOM, so your stylesheet styles them the same as any other content, and a rule of yours on a row wins over the ring. */
18043
18919
  "helix-virtual-list": DefineCustomElement<
18044
18920
  HelixVirtualList,
18045
18921
  HelixVirtualListVueProps,