@fusion.dev/helix 0.217.0 → 0.219.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 (102) hide show
  1. package/api.json +1 -1
  2. package/custom-elements.json +1 -1
  3. package/dist/breadcrumbs/breadcrumb/breadcrumb.css.js +1 -1
  4. package/dist/canvas/root/canvas-root.d.ts +1 -0
  5. package/dist/canvas/root/canvas-root.js +1 -0
  6. package/dist/chat/composer/chat-composer.css.js +1 -1
  7. package/dist/chat/composer/chat-composer.d.ts +102 -5
  8. package/dist/chat/composer/chat-composer.js +134 -0
  9. package/dist/chat/message/chat-message.css.js +1 -1
  10. package/dist/chat/message/chat-message.d.ts +1 -0
  11. package/dist/checkbox/root/checkbox-root.css.js +1 -1
  12. package/dist/color-input/root/color-input-root.d.ts +1 -3
  13. package/dist/combobox/root/combobox-root.d.ts +1 -2
  14. package/dist/command/root/command-root.css.js +1 -1
  15. package/dist/command/root/command-root.d.ts +16 -1
  16. package/dist/command/root/command-root.js +16 -0
  17. package/dist/date-input/root/date-input-root.d.ts +1 -2
  18. package/dist/device-screen/root/device-screen-root.d.ts +1 -0
  19. package/dist/device-screen/root/device-screen-root.js +1 -0
  20. package/dist/dialog/root/dialog-root.css.js +1 -1
  21. package/dist/dialog/root/dialog-root.d.ts +14 -2
  22. package/dist/dialog/root/dialog-root.js +3 -0
  23. package/dist/drawer/root/drawer-root.css.js +1 -1
  24. package/dist/drawer/root/drawer-root.d.ts +1 -2
  25. package/dist/element-events.generated.js +1 -0
  26. package/dist/graph/root/graph-root.d.ts +1 -0
  27. package/dist/graph/root/graph-root.js +1 -0
  28. package/dist/index.d.ts +1 -0
  29. package/dist/index.js +1 -0
  30. package/dist/kbd/root/kbd-root.css.js +1 -1
  31. package/dist/log/group/log-group.css.js +1 -1
  32. package/dist/log/line/log-line.css.js +1 -1
  33. package/dist/log/root/log-root.css.js +1 -1
  34. package/dist/log/root/log-root.d.ts +5 -1
  35. package/dist/map/root/map-root.css.js +1 -1
  36. package/dist/map/root/map-root.d.ts +1 -0
  37. package/dist/map/root/map-root.js +1 -0
  38. package/dist/megamenu/root/megamenu-root.css.js +1 -1
  39. package/dist/megamenu/root/megamenu-root.d.ts +2 -2
  40. package/dist/menu/item/menu-item.css.js +1 -1
  41. package/dist/menu/root/menu-root.css.js +1 -1
  42. package/dist/menu/root/menu-root.d.ts +19 -1
  43. package/dist/menu/root/menu-root.js +4 -0
  44. package/dist/menu/section/menu-section.css.js +1 -1
  45. package/dist/meter/index.d.ts +1 -0
  46. package/dist/meter/index.js +1 -0
  47. package/dist/meter/root/meter-root.css.js +1 -1
  48. package/dist/meter/segment/meter-segment.css.d.ts +1 -0
  49. package/dist/meter/segment/meter-segment.css.js +2 -0
  50. package/dist/meter/segment/meter-segment.d.ts +39 -0
  51. package/dist/meter/segment/meter-segment.js +11 -0
  52. package/dist/popover/root/popover-root.css.js +1 -1
  53. package/dist/popover/root/popover-root.d.ts +20 -2
  54. package/dist/popover/root/popover-root.js +3 -0
  55. package/dist/radio/root/radio-root.css.js +1 -1
  56. package/dist/scroll-area/root/scroll-area-root.css.js +1 -1
  57. package/dist/scroll-area/root/scroll-area-root.d.ts +14 -2
  58. package/dist/scroll-area/root/scroll-area-root.js +29 -0
  59. package/dist/select/root/select-root.d.ts +1 -2
  60. package/dist/shared/floating/entrance.css.js +1 -1
  61. package/dist/skip-link/root/skip-link-root.d.ts +1 -2
  62. package/dist/spatial-bar-chart/root/spatial-bar-chart-root.css.js +1 -1
  63. package/dist/spatial-bar-chart/root/spatial-bar-chart-root.d.ts +9 -1
  64. package/dist/strands/renderer.d.ts +2 -0
  65. package/dist/strands/renderer.js +1 -0
  66. package/dist/strands/root/strands-root.css.js +1 -1
  67. package/dist/strands/root/strands-root.d.ts +14 -0
  68. package/dist/strands/root/strands-root.js +5 -0
  69. package/dist/strands/shader.d.ts +7 -1
  70. package/dist/strands/shader.js +11 -3
  71. package/dist/switch/root/switch-root.css.js +1 -1
  72. package/dist/tabs/root/tabs-root.css.js +1 -1
  73. package/dist/tabs/root/tabs-root.d.ts +36 -0
  74. package/dist/tabs/root/tabs-root.js +7 -0
  75. package/dist/tabs/tab/tab.css.js +1 -1
  76. package/dist/tabs/tab/tab.d.ts +2 -0
  77. package/dist/terminal/root/terminal-root.d.ts +1 -0
  78. package/dist/terminal/root/terminal-root.js +1 -0
  79. package/dist/time-input/root/time-input-root.d.ts +1 -2
  80. package/dist/toast/item/toast-item.d.ts +1 -2
  81. package/dist/tooltip/root/tooltip-root.css.js +1 -1
  82. package/dist/tour/root/tour-root.css.js +1 -1
  83. package/dist/tour/stop/tour-stop.d.ts +1 -2
  84. package/dist/tree/item/tree-item.css.js +1 -1
  85. package/dist/tree/root/tree-root.css.js +1 -1
  86. package/dist/tree/root/tree-root.d.ts +5 -1
  87. package/dist/voice-level/draw.d.ts +108 -0
  88. package/dist/voice-level/draw.js +53 -0
  89. package/dist/voice-level/index.d.ts +2 -0
  90. package/dist/voice-level/index.js +1 -0
  91. package/dist/voice-level/root/voice-level-root.css.d.ts +1 -0
  92. package/dist/voice-level/root/voice-level-root.css.js +2 -0
  93. package/dist/voice-level/root/voice-level-root.d.ts +186 -0
  94. package/dist/voice-level/root/voice-level-root.js +324 -0
  95. package/examples.json +1 -1
  96. package/lint.json +1 -1
  97. package/package.json +6 -6
  98. package/skills/helix/SKILL.md +2 -2
  99. package/types/jsx.d.ts +2145 -89
  100. package/types/svelte.d.ts +2 -0
  101. package/types/vue.d.ts +515 -26
  102. package/types/words.d.ts +15 -0
package/types/vue.d.ts CHANGED
@@ -158,6 +158,7 @@ import type {
158
158
  HelixMenuItem,
159
159
  HelixMenuSection,
160
160
  HelixMeter,
161
+ HelixMeterSegment,
161
162
  HelixMotionToggle,
162
163
  HelixMoveEvent,
163
164
  HelixNavigateEvent,
@@ -242,6 +243,7 @@ import type {
242
243
  HelixStatGroup,
243
244
  HelixStep,
244
245
  HelixSteps,
246
+ HelixStopEvent,
245
247
  HelixStrands,
246
248
  HelixStrandsFallbackEvent,
247
249
  HelixStrandsStop,
@@ -289,6 +291,7 @@ import type {
289
291
  HelixVideoPlaylistItem,
290
292
  HelixVideoPlaylistMenu,
291
293
  HelixVirtualList,
294
+ HelixVoiceLevel,
292
295
  } from '@fusion.dev/helix';
293
296
  import type { HTMLAttributes, PublicProps, EmitFn, EmitsToProps } from "vue";
294
297
 
@@ -1817,6 +1820,19 @@ into one, counting the first and the last. Unset, it never folds. At least
1817
1820
  into one, counting the first and the last. Unset, it never folds. At least
1818
1821
  2, so the first crumb and the current page always show. */
1819
1822
  maxItems?: (HelixBreadcrumbs["maxItems"]) | undefined;
1823
+ /** The mark between one crumb and the next, for the whole trail. Unset is a
1824
+ chevron; `slash` is a slash, as a path or a repository and its branch is
1825
+ written.
1826
+
1827
+ **On the trail rather than on each crumb**, because the marks are one
1828
+ decision: a trail whose separators differ from crumb to crumb is a
1829
+ mistake, and a trail drawn from `items` has no crumb of yours to set it
1830
+ on. A crumb's own `separator` slot still replaces its mark, for the rare
1831
+ crumb that needs something else.
1832
+
1833
+ Optional and reflected, per the rule that a reflected property takes no
1834
+ default, so a stylesheet can select on it. */
1835
+ separator?: (HelixBreadcrumbs["separator"]) | undefined;
1820
1836
  /** The trail as data, drawn as crumbs before any you slot. The last item is the
1821
1837
  current page.
1822
1838
 
@@ -1989,6 +2005,36 @@ is the platform's `commandfor`. */
1989
2005
  commandfor?: (HelixButton["commandFor"]) | undefined;
1990
2006
  /** The id of the element the command is sent to. */
1991
2007
  commandFor?: (HelixButton["commandFor"]) | undefined;
2008
+ /** Whether a disabled button stays in the tab order, so a tooltip around it
2009
+ can say why it is disabled.
2010
+
2011
+ Set it on a button whose reason a Tooltip gives, such as a Save with no
2012
+ changes to save. While the button is disabled, it keeps focus and takes
2013
+ hover, and it refuses every press: a click, Enter and Space, and Enter in
2014
+ a field of its form. The click does not reach your listeners, and a submit
2015
+ button submits nothing. The inner control carries `aria-disabled` in place
2016
+ of the native `disabled`, so a screen reader still says it is unavailable.
2017
+ The styled button keeps the disabled look.
2018
+
2019
+ Leave it unset on a button with no reason to give. A plain disabled button
2020
+ leaves the tab order, as a native one does, and a keyboard reader skips a
2021
+ stop that does nothing. Set `pending` for the wait after a press. */
2022
+ "focusable-when-disabled"?: (HelixButton["focusableWhenDisabled"]) | undefined;
2023
+ /** Whether a disabled button stays in the tab order, so a tooltip around it
2024
+ can say why it is disabled.
2025
+
2026
+ Set it on a button whose reason a Tooltip gives, such as a Save with no
2027
+ changes to save. While the button is disabled, it keeps focus and takes
2028
+ hover, and it refuses every press: a click, Enter and Space, and Enter in
2029
+ a field of its form. The click does not reach your listeners, and a submit
2030
+ button submits nothing. The inner control carries `aria-disabled` in place
2031
+ of the native `disabled`, so a screen reader still says it is unavailable.
2032
+ The styled button keeps the disabled look.
2033
+
2034
+ Leave it unset on a button with no reason to give. A plain disabled button
2035
+ leaves the tab order, as a native one does, and a keyboard reader skips a
2036
+ stop that does nothing. Set `pending` for the wait after a press. */
2037
+ focusableWhenDisabled?: (HelixButton["focusableWhenDisabled"]) | undefined;
1992
2038
  /** Where this button's submission goes, overriding the form's own.
1993
2039
 
1994
2040
  **The five `form*` overrides ride on a native submit button that stands in
@@ -3498,11 +3544,27 @@ export type HelixChatComposerHelixListenElementEvent =
3498
3544
  /** `helix-send` event type */
3499
3545
  export type HelixChatComposerHelixSendElementEvent =
3500
3546
  HelixChatComposerElementEvent<HelixSendEvent>;
3547
+ /** `helix-stop` event type */
3548
+ export type HelixChatComposerHelixStopElementEvent =
3549
+ HelixChatComposerElementEvent<HelixStopEvent>;
3501
3550
  /** `helix-typing` event type */
3502
3551
  export type HelixChatComposerHelixTypingElementEvent =
3503
3552
  HelixChatComposerElementEvent<HelixTypingEvent>;
3504
3553
 
3505
3554
  export type HelixChatComposerVueProps = {
3555
+ /** Draws the composer's focus as a glow: a light that runs once around the
3556
+ edge as the composer takes focus, then a soft steady edge while it holds
3557
+ it, in place of the focus ring.
3558
+
3559
+ **On focus, and only then.** It says the composer is listening. A glow
3560
+ that ran while a reply was on its way would be a second indicator of what
3561
+ the conversation already shows, and one that ran all the time would be
3562
+ decoration that moves. With reduced motion asked for, the edge lights
3563
+ without the sweep.
3564
+
3565
+ The steady edge is the focus indicator, so the ring is not drawn as well.
3566
+ Its color is `--chat-composer-glow-color`, the primary color unless set. */
3567
+ glow?: (HelixChatComposer["glow"]) | undefined;
3506
3568
  /** What a screen reader hears as listening starts. */
3507
3569
  "listening-label"?: (HelixChatComposer["listeningLabel"]) | undefined;
3508
3570
  /** What a screen reader hears as listening starts. */
@@ -3524,6 +3586,18 @@ microphone is let go as listening stops. An input of type `password`,
3524
3586
  "voice-stop-label"?: (HelixChatComposer["voiceStopLabel"]) | undefined;
3525
3587
  /** The dictation button's name while it listens. */
3526
3588
  voiceStopLabel?: (HelixChatComposer["voiceStopLabel"]) | undefined;
3589
+ /** Whether the draft holds something besides its text, such as an attached
3590
+ file. The draft then counts as one though the field is empty, so the
3591
+ send button shows in place of the `idle` slot. */
3592
+ attached?: (HelixChatComposer["attached"]) | undefined;
3593
+ /** Whether a reply is on its way. While set, the send button is a stop
3594
+ button that sends `helix-stop`, and the draft does not send.
3595
+
3596
+ **The same button rather than one beside it**, because sending and
3597
+ stopping are never both possible: while a reply is on its way there is
3598
+ nothing to send to, and the place the reader's eye goes to act is the
3599
+ place that can act. The field stays open for the next turn. */
3600
+ busy?: (HelixChatComposer["busy"]) | undefined;
3527
3601
  /** A message about the draft, shown under the field. While set, the composer
3528
3602
  is invalid, does not send, and does not submit, as a field's `feedback`
3529
3603
  does, and the message is announced as it appears. */
@@ -3542,6 +3616,14 @@ the field, as on a `<textarea>`. */
3542
3616
  minLength?: (HelixChatComposer["minLength"]) | undefined;
3543
3617
  /** Placeholder text shown in an empty field. */
3544
3618
  placeholder?: (HelixChatComposer["placeholder"]) | undefined;
3619
+ /** Whether Enter sends while `busy`, for a page that queues the turn or
3620
+ hands it to the reply under way.
3621
+
3622
+ Off by default, because a page that does neither would drop the turn: it
3623
+ has nowhere to put a message while a reply is coming. The button stays
3624
+ the stop button either way, since stopping is still the one thing it
3625
+ should do while a reply is on its way. */
3626
+ queue?: (HelixChatComposer["queue"]) | undefined;
3545
3627
  /** Whether the form needs a draft to submit. An empty draft never sends,
3546
3628
  required or not. */
3547
3629
  required?: (HelixChatComposer["required"]) | undefined;
@@ -3549,10 +3631,34 @@ required or not. */
3549
3631
 
3550
3632
  It grows from there. */
3551
3633
  rows?: (HelixChatComposer["rows"]) | undefined;
3634
+ /** Whether the draft waits to be sent, such as while an attachment is still
3635
+ read. The send button is unavailable and Enter does not send, while the
3636
+ field stays open. The stop button shown while `busy` still stops. */
3637
+ "send-disabled"?: (HelixChatComposer["sendDisabled"]) | undefined;
3638
+ /** Whether the draft waits to be sent, such as while an attachment is still
3639
+ read. The send button is unavailable and Enter does not send, while the
3640
+ field stays open. The stop button shown while `busy` still stops. */
3641
+ sendDisabled?: (HelixChatComposer["sendDisabled"]) | undefined;
3552
3642
  /** Label for the send button. */
3553
3643
  "send-label"?: (HelixChatComposer["sendLabel"]) | undefined;
3554
3644
  /** Label for the send button. */
3555
3645
  sendLabel?: (HelixChatComposer["sendLabel"]) | undefined;
3646
+ /** Why the draft waits, such as "Reading photo.jpg", shown in a tooltip on
3647
+ the send button while `send-disabled` is set. The button then stays in
3648
+ the tab order and takes the pointer, with `aria-disabled` in place of
3649
+ `disabled`, so the reason can be reached by keyboard and by pointer, as
3650
+ Button's `focusable-when-disabled` does. A press still sends nothing. */
3651
+ "send-reason"?: (HelixChatComposer["sendReason"]) | undefined;
3652
+ /** Why the draft waits, such as "Reading photo.jpg", shown in a tooltip on
3653
+ the send button while `send-disabled` is set. The button then stays in
3654
+ the tab order and takes the pointer, with `aria-disabled` in place of
3655
+ `disabled`, so the reason can be reached by keyboard and by pointer, as
3656
+ Button's `focusable-when-disabled` does. A press still sends nothing. */
3657
+ sendReason?: (HelixChatComposer["sendReason"]) | undefined;
3658
+ /** Label for the stop button shown while `busy`. */
3659
+ "stop-label"?: (HelixChatComposer["stopLabel"]) | undefined;
3660
+ /** Label for the stop button shown while `busy`. */
3661
+ stopLabel?: (HelixChatComposer["stopLabel"]) | undefined;
3556
3662
  /** What sends the turn: `enter` for the Enter key, or `button` for the send
3557
3663
  button only.
3558
3664
 
@@ -3607,6 +3713,23 @@ Here rather than on each control. */
3607
3713
  /** The engine this field listens through, in place of the one
3608
3714
  `registerSpeechEngine` gave the page, or the browser's own. */
3609
3715
  speechEngine?: (HelixChatComposer["speechEngine"]) | undefined;
3716
+ /** Examples the empty field shows in turn, in place of `placeholder`, such
3717
+ as tasks a reader might ask for. Each shows for 6.5 seconds, and a longer
3718
+ one shows longer, up to 10 seconds.
3719
+
3720
+ **Each is the field's placeholder in its turn**, so a screen reader that
3721
+ reaches the field hears the one showing. The swap runs through
3722
+ `:state(example-leaving)`, as one example leaves, and
3723
+ `:state(example-entering)`, as the next arrives.
3724
+
3725
+ **They move only while nobody is about to write, and while the reader
3726
+ can see them.** An empty field without focus moves on. Focus or text
3727
+ holds the example showing, and an example already leaving finishes its
3728
+ turn. A composer scrolled out of view holds its example, and the example
3729
+ gets its full time again when the composer comes back. Where the reader
3730
+ asked for less motion, or the page paused its motion, the first example
3731
+ stays. */
3732
+ placeholders?: (HelixChatComposer["placeholders"]) | undefined;
3610
3733
  };
3611
3734
 
3612
3735
  export type HelixChatComposerVueEvents = {
@@ -3616,6 +3739,8 @@ export type HelixChatComposerVueEvents = {
3616
3739
  "helix-listen": HelixChatComposerHelixListenElementEvent;
3617
3740
  /** Fired when the user sends their turn, and cancelable. */
3618
3741
  "helix-send": HelixChatComposerHelixSendElementEvent;
3742
+ /** Fired when the user presses the stop button, shown in place of the send button while `busy` is set. */
3743
+ "helix-stop": HelixChatComposerHelixStopElementEvent;
3619
3744
  /** The user started or stopped writing, with `typing` saying which, as the composer's `typing` does. */
3620
3745
  "helix-typing": HelixChatComposerHelixTypingElementEvent;
3621
3746
  /** The user changed the text. Read it from `value`, for a typing indicator or a saved draft. Bubbles and is composed, as a native field's is. */
@@ -5954,6 +6079,17 @@ export type HelixCommandHelixSelectElementEvent =
5954
6079
  HelixCommandElementEvent<HelixSelectEvent>;
5955
6080
 
5956
6081
  export type HelixCommandVueProps = {
6082
+ /** The panel's surface: `frosted` or `glass`, as on `Dialog`, which the
6083
+ palette opens in and hands the value to.
6084
+
6085
+ Absent is the opaque overlay surface. `glass` is the page's translucent
6086
+ ground over the theme's blur, and `frosted` the same pair turned up, so a
6087
+ page whose panels are frosted has a palette that matches. Its strength is
6088
+ the theme's, as on `Popover`, `Menu` and `Drawer`.
6089
+
6090
+ **No `transparent`, deliberately.** A palette over arbitrary page content
6091
+ is only readable because it has a ground. */
6092
+ material?: (HelixCommand["material"]) | undefined;
5957
6093
  /** Whether the element starts open. Ignored once `open` is written. */
5958
6094
  "default-open"?: (HelixCommand["defaultOpen"]) | undefined;
5959
6095
  /** Whether the element starts open. Ignored once `open` is written. */
@@ -6224,6 +6360,36 @@ whatever its `type`. Declared here so its own page says what it holds. */
6224
6360
  value?: (HelixCopyButton["value"]) | undefined;
6225
6361
  /** */
6226
6362
  "aria-label"?: (string) | undefined;
6363
+ /** Whether a disabled button stays in the tab order, so a tooltip around it
6364
+ can say why it is disabled.
6365
+
6366
+ Set it on a button whose reason a Tooltip gives, such as a Save with no
6367
+ changes to save. While the button is disabled, it keeps focus and takes
6368
+ hover, and it refuses every press: a click, Enter and Space, and Enter in
6369
+ a field of its form. The click does not reach your listeners, and a submit
6370
+ button submits nothing. The inner control carries `aria-disabled` in place
6371
+ of the native `disabled`, so a screen reader still says it is unavailable.
6372
+ The styled button keeps the disabled look.
6373
+
6374
+ Leave it unset on a button with no reason to give. A plain disabled button
6375
+ leaves the tab order, as a native one does, and a keyboard reader skips a
6376
+ stop that does nothing. Set `pending` for the wait after a press. */
6377
+ "focusable-when-disabled"?: (HelixCopyButton["focusableWhenDisabled"]) | undefined;
6378
+ /** Whether a disabled button stays in the tab order, so a tooltip around it
6379
+ can say why it is disabled.
6380
+
6381
+ Set it on a button whose reason a Tooltip gives, such as a Save with no
6382
+ changes to save. While the button is disabled, it keeps focus and takes
6383
+ hover, and it refuses every press: a click, Enter and Space, and Enter in
6384
+ a field of its form. The click does not reach your listeners, and a submit
6385
+ button submits nothing. The inner control carries `aria-disabled` in place
6386
+ of the native `disabled`, so a screen reader still says it is unavailable.
6387
+ The styled button keeps the disabled look.
6388
+
6389
+ Leave it unset on a button with no reason to give. A plain disabled button
6390
+ leaves the tab order, as a native one does, and a keyboard reader skips a
6391
+ stop that does nothing. Set `pending` for the wait after a press. */
6392
+ focusableWhenDisabled?: (HelixCopyButton["focusableWhenDisabled"]) | undefined;
6227
6393
  /** Whether the action the button started is still running.
6228
6394
 
6229
6395
  A pending button keeps focus and stays in the tab order, and refuses every
@@ -7948,6 +8114,16 @@ export type HelixDialogHelixBeforeOpenElementEvent =
7948
8114
  HelixDialogElementEvent<HelixBeforeOpenEvent>;
7949
8115
 
7950
8116
  export type HelixDialogVueProps = {
8117
+ /** The panel's surface: `frosted` or `glass`.
8118
+
8119
+ Absent is the opaque overlay surface. `glass` is the page's translucent
8120
+ ground over the theme's blur, and `frosted` the same pair turned up, as
8121
+ on `Popover`, `Menu`, `Drawer` and `Tooltip`, so a page whose panels are
8122
+ frosted has dialogs that match.
8123
+
8124
+ **No `transparent`, deliberately.** A dialog over arbitrary page content
8125
+ is only readable because it has a ground. */
8126
+ material?: (HelixDialog["material"]) | undefined;
7951
8127
  /** How wide the panel is allowed to be.
7952
8128
 
7953
8129
  Steps rather than a number, because a dialog's width is a fact about what is
@@ -10470,6 +10646,36 @@ is the platform's `commandfor`. */
10470
10646
  commandfor?: (HelixIconButton["commandFor"]) | undefined;
10471
10647
  /** The id of the element the command is sent to. */
10472
10648
  commandFor?: (HelixIconButton["commandFor"]) | undefined;
10649
+ /** Whether a disabled button stays in the tab order, so a tooltip around it
10650
+ can say why it is disabled.
10651
+
10652
+ Set it on a button whose reason a Tooltip gives, such as a Save with no
10653
+ changes to save. While the button is disabled, it keeps focus and takes
10654
+ hover, and it refuses every press: a click, Enter and Space, and Enter in
10655
+ a field of its form. The click does not reach your listeners, and a submit
10656
+ button submits nothing. The inner control carries `aria-disabled` in place
10657
+ of the native `disabled`, so a screen reader still says it is unavailable.
10658
+ The styled button keeps the disabled look.
10659
+
10660
+ Leave it unset on a button with no reason to give. A plain disabled button
10661
+ leaves the tab order, as a native one does, and a keyboard reader skips a
10662
+ stop that does nothing. Set `pending` for the wait after a press. */
10663
+ "focusable-when-disabled"?: (HelixIconButton["focusableWhenDisabled"]) | undefined;
10664
+ /** Whether a disabled button stays in the tab order, so a tooltip around it
10665
+ can say why it is disabled.
10666
+
10667
+ Set it on a button whose reason a Tooltip gives, such as a Save with no
10668
+ changes to save. While the button is disabled, it keeps focus and takes
10669
+ hover, and it refuses every press: a click, Enter and Space, and Enter in
10670
+ a field of its form. The click does not reach your listeners, and a submit
10671
+ button submits nothing. The inner control carries `aria-disabled` in place
10672
+ of the native `disabled`, so a screen reader still says it is unavailable.
10673
+ The styled button keeps the disabled look.
10674
+
10675
+ Leave it unset on a button with no reason to give. A plain disabled button
10676
+ leaves the tab order, as a native one does, and a keyboard reader skips a
10677
+ stop that does nothing. Set `pending` for the wait after a press. */
10678
+ focusableWhenDisabled?: (HelixIconButton["focusableWhenDisabled"]) | undefined;
10473
10679
  /** Where this button's submission goes, overriding the form's own.
10474
10680
 
10475
10681
  **The five `form*` overrides ride on a native submit button that stands in
@@ -10932,6 +11138,10 @@ token.
10932
11138
  Empty leaves the attribute off, which is the browser's default. Set it to
10933
11139
  a token like `email` or `bday` to ask for autofill, or to `off` to refuse. */
10934
11140
  autocomplete?: (HelixInput["autocomplete"]) | undefined;
11141
+ /** Whether the browser corrects words as the reader types, as the platform's
11142
+ `autocorrect`. Turn it off, with `autocorrect="off"`, for text that is not
11143
+ prose, such as an address or a code, which corrections would change. */
11144
+ autocorrect?: (HelixInput["autocorrect"]) | undefined;
10935
11145
  /** Whether the field shows a button that empties it.
10936
11146
 
10937
11147
  Shown only while there is something to clear, because a control that does
@@ -12541,7 +12751,10 @@ export type HelixLogVueProps = {
12541
12751
  - `plain` has no edge, no fill, no inset and no height of its own: the
12542
12752
  lines start where the text around them does and the log grows with
12543
12753
  them. For a log inside something that already frames it, such as an
12544
- agent's work in a chat turn's `work` slot.
12754
+ agent's work in a chat turn's `work` slot. Each step is a row with its
12755
+ status mark on that edge and its caret after the heading. A step that
12756
+ holds steps draws a rule beside them, and a step that holds lines draws
12757
+ them on a quiet surface that scrolls after `--log-step-max-block-size`.
12545
12758
 
12546
12759
  Both are writable, so a page can say which it means rather than relying
12547
12760
  on the absence of an attribute. */
@@ -13796,6 +14009,20 @@ export type HelixMenuHelixSelectElementEvent =
13796
14009
  HelixMenuElementEvent<HelixSelectEvent>;
13797
14010
 
13798
14011
  export type HelixMenuVueProps = {
14012
+ /** The panel's surface: `frosted` or `glass`.
14013
+
14014
+ Absent is the opaque overlay surface. `glass` is the page's translucent
14015
+ ground over a blur, for a page whose surfaces are glass, so a panel opened
14016
+ over a glass window is not the one opaque slab on it. `frosted` is the same
14017
+ pair turned up, a ground that admits less and a heavier blur.
14018
+
14019
+ The strength is the theme's: `--helix-material-translucent`,
14020
+ `--helix-material-translucent-strong` and `--helix-material-backdrop` are
14021
+ what the policy moves. `Drawer` and `Tooltip` carry the same attribute.
14022
+
14023
+ **No `transparent`, deliberately.** A panel floating over arbitrary page
14024
+ content is only readable because it has a ground. */
14025
+ material?: (HelixMenu["material"]) | undefined;
13799
14026
  /** The text shown and announced when there are no rows and none are loading. */
13800
14027
  "empty-text"?: (HelixMenu["emptyText"]) | undefined;
13801
14028
  /** The text shown and announced when there are no rows and none are loading. */
@@ -14146,6 +14373,24 @@ export type HelixMeterVueEvents = {
14146
14373
  "helix-band": HelixMeterHelixBandElementEvent;
14147
14374
  };
14148
14375
 
14376
+ export type HelixMeterSegmentVueProps = {
14377
+ /** What the segment is, such as "Tools", which names the slice when a pointer
14378
+ rests on it.
14379
+
14380
+ Not announced: see the note on a meter's children above. */
14381
+ label?: (HelixMeterSegment["label"]) | undefined;
14382
+ /** What the segment means, as it does on a callout. Takes the tone's color in
14383
+ place of the next color in the series. */
14384
+ tone?: (HelixMeterSegment["tone"]) | undefined;
14385
+ /** How much of the meter's range the segment takes, in the units of the meter's
14386
+ `min` and `max`.
14387
+
14388
+ A value that is not a number, or is below zero, draws nothing. */
14389
+ value?: (HelixMeterSegment["value"]) | undefined;
14390
+ };
14391
+
14392
+ export type HelixMeterSegmentVueEvents = {};
14393
+
14149
14394
  /** `HelixMotionToggle` component event */
14150
14395
  export type HelixMotionToggleElementEvent<E = Event> = TypedEvent<
14151
14396
  HelixMotionToggle,
@@ -15728,6 +15973,20 @@ export type HelixPopoverHelixBeforeOpenElementEvent =
15728
15973
  HelixPopoverElementEvent<HelixBeforeOpenEvent>;
15729
15974
 
15730
15975
  export type HelixPopoverVueProps = {
15976
+ /** The panel's surface: `frosted` or `glass`.
15977
+
15978
+ Absent is the opaque overlay surface. `glass` is the page's translucent
15979
+ ground over a blur, for a page whose surfaces are glass, so a panel opened
15980
+ over a glass window is not the one opaque slab on it. `frosted` is the same
15981
+ pair turned up, a ground that admits less and a heavier blur.
15982
+
15983
+ The strength is the theme's: `--helix-material-translucent`,
15984
+ `--helix-material-translucent-strong` and `--helix-material-backdrop` are
15985
+ what the policy moves. `Drawer` and `Tooltip` carry the same attribute.
15986
+
15987
+ **No `transparent`, deliberately.** A panel floating over arbitrary page
15988
+ content is only readable because it has a ground. */
15989
+ material?: (HelixPopover["material"]) | undefined;
15731
15990
  /** How the panel is set apart from the content under it.
15732
15991
 
15733
15992
  One of the axis's four values, which is all this surface has meaning for: a
@@ -18185,6 +18444,13 @@ shows the bars behind it. Absent is the filled bar, per the rule that a
18185
18444
  reflected property takes no default, and `solid` writes it out. A
18186
18445
  renderer draws the bars the same way.
18187
18446
 
18447
+ **`muted` draws every bar in the neutral ink**, so the one bar whose cell
18448
+ names a tone, such as `data-tone="primary"`, is the bar in color, with a
18449
+ soft glow in its tone: one reading lit among the others, such as today
18450
+ among a week. Each top takes the most ink and each side less, as a
18451
+ colored bar's faces do. A renderer draws the neutral bars and the toned
18452
+ one, without the glow.
18453
+
18188
18454
  It composes with `material`: emphasis decides what is drawn, and material
18189
18455
  how much of it comes through. The outline on the bar the keys rest on
18190
18456
  keeps its own ink. */
@@ -18295,13 +18561,42 @@ press, and the sound is made only then. */
18295
18561
  for no one else. Reflected, because the stylesheet draws it by the
18296
18562
  attribute, and a page that sets the property, as React does, writes none. */
18297
18563
  summary?: (HelixSpatialBarChart["summary"]) | undefined;
18298
- /** Draws no box: no edges, grid, numbers, or names, so the readings stand
18299
- alone and fill the plot, as a picture on a product's own page does. The
18564
+ /** Grows the bars up from the floor the first time the chart comes into
18565
+ view with readings, each category a little after the one before it, so
18566
+ the drawing arrives the way a page's own picture does. The growth is
18567
+ fast at first, slows to rest, and never passes a bar's value.
18568
+
18569
+ Under `prefers-reduced-motion`, or where the page has paused its motion
18570
+ through `pauseMotion` or `Motion Toggle`, the bars stand at their height
18571
+ from the start. A later table draws the bars it already had at their
18572
+ height, and grows the bars it adds, each from the floor, so a reading that
18573
+ arrives while the chart is in view arrives the same way. */
18574
+ grow?: (HelixSpatialBarChart["grow"]) | undefined;
18575
+ /** Grows the bars again each time the chart comes back into view after it
18576
+ left it, as a pane does when it is opened again, where `grow` alone grows
18577
+ them the first time only. Only a chart that grows takes it.
18578
+
18579
+ While it is out of view the bars stand at the floor, so the first frame
18580
+ after it returns is the start of the growth and never a flash at full
18581
+ height. */
18582
+ "grow-again"?: (HelixSpatialBarChart["growAgain"]) | undefined;
18583
+ /** Grows the bars again each time the chart comes back into view after it
18584
+ left it, as a pane does when it is opened again, where `grow` alone grows
18585
+ them the first time only. Only a chart that grows takes it.
18586
+
18587
+ While it is out of view the bars stand at the floor, so the first frame
18588
+ after it returns is the start of the growth and never a flash at full
18589
+ height. */
18590
+ growAgain?: (HelixSpatialBarChart["growAgain"]) | undefined;
18591
+ /** Draws no box: no edges, grid, numbers, or names, and in a `row` no
18592
+ floor, so the readings stand alone and fill the plot, as a picture on a
18593
+ product's own page does. The
18300
18594
  table, the summary, the tooltip, and the keys still carry every value,
18301
18595
  and a renderer draws no box either. */
18302
18596
  "no-box"?: (HelixSpatialBarChart["noBox"]) | undefined;
18303
- /** Draws no box: no edges, grid, numbers, or names, so the readings stand
18304
- alone and fill the plot, as a picture on a product's own page does. The
18597
+ /** Draws no box: no edges, grid, numbers, or names, and in a `row` no
18598
+ floor, so the readings stand alone and fill the plot, as a picture on a
18599
+ product's own page does. The
18305
18600
  table, the summary, the tooltip, and the keys still carry every value,
18306
18601
  and a renderer draws no box either. */
18307
18602
  noBox?: (HelixSpatialBarChart["noBox"]) | undefined;
@@ -18315,6 +18610,15 @@ and a renderer draws no box either. */
18315
18610
  "plot-label"?: (HelixSpatialBarChart["plotLabel"]) | undefined;
18316
18611
  /** The plot's name where the chart has none: no `aria-label`, `label`, or table caption. */
18317
18612
  plotLabel?: (HelixSpatialBarChart["plotLabel"]) | undefined;
18613
+ /** Stacks a category's series into one column, each block standing on the
18614
+ ones before it, so the column is as tall as the category's total, as a
18615
+ flat `Bar Chart` stacks them.
18616
+
18617
+ Absent stands the series one behind another in depth. Stacked, every
18618
+ series stands in the front row, so none hides another, and the parts of
18619
+ one total read together. A negative reading hangs below zero on the
18620
+ negatives before it. The scale fits the stacks. */
18621
+ stacked?: (HelixSpatialBarChart["stacked"]) | undefined;
18318
18622
  /** The `summary` part's sentence. `{count}`, `{series}`, and `{categories}`
18319
18623
  are the number of bars, series, and categories, written in the locale,
18320
18624
  and `{low}` and `{high}` the lowest and the highest value. */
@@ -18323,6 +18627,38 @@ and `{low}` and `{high}` the lowest and the highest value. */
18323
18627
  are the number of bars, series, and categories, written in the locale,
18324
18628
  and `{low}` and `{high}` the lowest and the highest value. */
18325
18629
  summaryLabel?: (HelixSpatialBarChart["summaryLabel"]) | undefined;
18630
+ /** How the bars stand.
18631
+
18632
+ Unset, they stand on a grid of categories across and series in depth,
18633
+ in a box the camera looks at from a corner, so the grid recedes at an
18634
+ angle. `row` lays the categories in a straight line across the page and
18635
+ turns each bar to the camera, showing its top and two sides, for one row
18636
+ of readings in a small space such as a pane: turning the view turns each
18637
+ bar where it stands, and the row stays level. It is the chart's own
18638
+ drawing that lays the row: a renderer connected through
18639
+ `@fusion.dev/helix-plot` stands the bars on the grid.
18640
+
18641
+ `diagonal` is the same row climbing to the right as it recedes, each
18642
+ place a step further back than the one before, as a row of days on a
18643
+ product's page is drawn: the row rises one part in five across the page
18644
+ from any turn, and its floor and names climb with it. A row whose bars
18645
+ have a size climbs at most a quarter of the plot's height, so the bars
18646
+ of a long row keep theirs.
18647
+
18648
+ **A row draws its floor in place of a box**: each place as an outline a
18649
+ little wider than its bar, and each category's name under it, as many
18650
+ names as fit without touching. A name whose bar names a tone is written
18651
+ first, in that tone. `no-box` leaves the floor and the names out.
18652
+
18653
+ **A `column-gap` on the `fallback` part gives a row's bars one width**,
18654
+ which the styled tier sets from `--spatial-bar-chart-bar-size`: one bar
18655
+ stands as wide as each of twenty, the row is as long as its bars and
18656
+ centered, the tallest bar stands as high as the plot has room for and
18657
+ no taller than the row is long and a quarter again, so one bar stands
18658
+ as a block, and `fits` says how many bars the plot holds, so a page
18659
+ can give it the latest of a longer table. It is read when the plot's
18660
+ size changes. */
18661
+ variant?: (HelixSpatialBarChart["variant"]) | undefined;
18326
18662
  /** The readings as data, in the shape of a table, where the page has no
18327
18663
  table to point `for` at. `for` wins where both are set.
18328
18664
 
@@ -20063,6 +20399,14 @@ own. */
20063
20399
  /** How much the glow around the strands adds, as a multiplier. `0` draws the
20064
20400
  strands alone, crisp and dimmer, and `1` is the default glow. */
20065
20401
  bloom?: (HelixStrands["bloom"]) | undefined;
20402
+ /** Whether the light is drawn alone, without the ground under it, so what is
20403
+ behind the element shows through, such as a translucent pane or a window's
20404
+ glass. The ground still says which way the page runs: light added on a
20405
+ dark one, ink on a light one.
20406
+
20407
+ Reflected because the stylesheet selects on it: the band under the canvas
20408
+ shows only while the element falls back, and loses its ground too. */
20409
+ clear?: (HelixStrands["clear"]) | undefined;
20066
20410
  /** How far apart the brightest and dimmest strands are, from `0`, most of
20067
20411
  them alike, to `1`, a few burning bright over many faint ones. Clamped to
20068
20412
  that range. The ribbon as a whole keeps its strength. */
@@ -20831,6 +21175,33 @@ export type HelixTabsHelixSelectElementEvent =
20831
21175
  HelixTabsElementEvent<HelixSelectEvent>;
20832
21176
 
20833
21177
  export type HelixTabsVueProps = {
21178
+ /** When the close mark of each `dismissible` tab shows.
21179
+
21180
+ Unset, or `always`, every mark shows. `hover` shows a tab's mark while it
21181
+ is current, under the pointer, or holds focus, and keeps its room on every
21182
+ tab, so the labels do not move as the marks come and go. For a strip of
21183
+ many dismissible tabs, where a mark on each reads as a row of crosses. A
21184
+ keyboard closes a tab with Delete whether its mark shows or not. */
21185
+ "dismiss-marks"?: (HelixTabs["dismissMarks"]) | undefined;
21186
+ /** When the close mark of each `dismissible` tab shows.
21187
+
21188
+ Unset, or `always`, every mark shows. `hover` shows a tab's mark while it
21189
+ is current, under the pointer, or holds focus, and keeps its room on every
21190
+ tab, so the labels do not move as the marks come and go. For a strip of
21191
+ many dismissible tabs, where a mark on each reads as a row of crosses. A
21192
+ keyboard closes a tab with Delete whether its mark shows or not. */
21193
+ dismissMarks?: (HelixTabs["dismissMarks"]) | undefined;
21194
+ /** How loud the mark on the current tab is.
21195
+
21196
+ Unset is the mark `variant` draws at rest. `subtle` is a tint with no
21197
+ edge or shadow: the raised pill becomes a wash, the `segmented` track's
21198
+ pill does the same inside it, and the `underlined` bar takes the
21199
+ foreground's ink in place of the primary color. For tabs inside other
21200
+ chrome, where a raised mark reads as a control laid on top of it.
21201
+
21202
+ Independent of `variant`, since each of its marks has a quiet form: the two
21203
+ answer different questions, which is the test the axis registry applies. */
21204
+ emphasis?: (HelixTabs["emphasis"]) | undefined;
20834
21205
  /** The `value` of the current item.
20835
21206
 
20836
21207
  Not `option.active`, which is the option the keyboard is on: that is a
@@ -23468,6 +23839,10 @@ appeared in the server's markup for every tree anybody rendered, which is
23468
23839
  the same fault `href` and `target` had on `Button`. The resting arrangement
23469
23840
  is the absence of the attribute, and the stylesheet only asks about `end`.
23470
23841
 
23842
+ `label` sets the chevron against the end of a branch's name, where the name
23843
+ takes only its own width, and leaves the `end` slot at the row's far side.
23844
+ A leaf is unchanged, since it has no chevron.
23845
+
23471
23846
  It is worth owning rather than leaving to `::part(toggle)`, which a
23472
23847
  consumer could reach for: the naive version is `order` plus an auto margin,
23473
23848
  and the row's `end` slot already carries an auto margin of its own, so the
@@ -23490,6 +23865,10 @@ appeared in the server's markup for every tree anybody rendered, which is
23490
23865
  the same fault `href` and `target` had on `Button`. The resting arrangement
23491
23866
  is the absence of the attribute, and the stylesheet only asks about `end`.
23492
23867
 
23868
+ `label` sets the chevron against the end of a branch's name, where the name
23869
+ takes only its own width, and leaves the `end` slot at the row's far side.
23870
+ A leaf is unchanged, since it has no chevron.
23871
+
23493
23872
  It is worth owning rather than leaving to `::part(toggle)`, which a
23494
23873
  consumer could reach for: the naive version is `order` plus an auto margin,
23495
23874
  and the row's `end` slot already carries an auto margin of its own, so the
@@ -24650,6 +25029,48 @@ export type HelixVirtualListVueEvents = {
24650
25029
  "helix-reorder": HelixVirtualListHelixReorderElementEvent;
24651
25030
  };
24652
25031
 
25032
+ export type HelixVoiceLevelVueProps = {
25033
+ /** How loud each frequency band is, from `0` to `1`, lowest band first.
25034
+
25035
+ Each bar of the spectrum follows one band. Where there are more or fewer
25036
+ bands than bars, each bar reads between the two nearest bands. Empty draws
25037
+ every bar from `level`. Written as an attribute, the numbers are separated
25038
+ by spaces or commas: `bands="0.1 0.4 0.6 0.3"`. Assign an array to the
25039
+ property for readings that change many times a second. */
25040
+ bands?: (HelixVoiceLevel["bands"]) | undefined;
25041
+ /** The name where `label` is empty. Translate it with the rest of your
25042
+ interface. */
25043
+ "fallback-label"?: (HelixVoiceLevel["fallbackLabel"]) | undefined;
25044
+ /** The name where `label` is empty. Translate it with the rest of your
25045
+ interface. */
25046
+ fallbackLabel?: (HelixVoiceLevel["fallbackLabel"]) | undefined;
25047
+ /** The name read by screen readers, such as "Your voice". Defaults to
25048
+ `fallbackLabel`. */
25049
+ label?: (HelixVoiceLevel["label"]) | undefined;
25050
+ /** How loud the voice is, from `0` for silence to `1`.
25051
+
25052
+ It sets how far the waves swing, the length of the still bar under
25053
+ `prefers-reduced-motion`, and every bar of a spectrum that has no
25054
+ `bands`. A value outside the range is drawn at the nearer end. */
25055
+ level?: (HelixVoiceLevel["level"]) | undefined;
25056
+ /** Draws the readings as a still picture: each bar at its band and the waves
25057
+ at one fixed moment, swung as far as `level`.
25058
+
25059
+ For a level that holds, such as the loudness of a recorded clip or a
25060
+ picture of the drawing. No frame loop runs, and each new reading is drawn
25061
+ at once with no easing. Because nothing moves, the drawing is the same
25062
+ under `prefers-reduced-motion`. Clearing it starts the motion from the
25063
+ readings as they are. */
25064
+ still?: (HelixVoiceLevel["still"]) | undefined;
25065
+ /** The drawing: a row of bars, one for each band, or three moving waves.
25066
+
25067
+ Reflected because the stylesheet sizes each drawing differently. Absent
25068
+ is `spectrum`, the resting value, which selects nothing. */
25069
+ variant?: (HelixVoiceLevel["variant"]) | undefined;
25070
+ };
25071
+
25072
+ export type HelixVoiceLevelVueEvents = {};
25073
+
24653
25074
  export type CustomCssProperties = {
24654
25075
  /** The color of the open and close indicator. */
24655
25076
  "--accordion-item-chevron-color"?: (string) | undefined;
@@ -25019,6 +25440,8 @@ export type CustomCssProperties = {
25019
25440
  "--chat-composer-background-color"?: (string) | undefined;
25020
25441
  /** Width of the composer's edge, so your theme can remove it. */
25021
25442
  "--chat-composer-border-width"?: (string) | undefined;
25443
+ /** Color of the focus glow under `glow`. Defaults to the primary color. */
25444
+ "--chat-composer-glow-color"?: (string) | undefined;
25022
25445
  /** Maximum height the field grows to. */
25023
25446
  "--chat-composer-max-block-size"?: (string) | undefined;
25024
25447
  /** How loud the microphone is while the field listens for dictation, from 0 to 1, which the element sets; the ring around the dictation button grows with it. */
@@ -25167,7 +25590,7 @@ export type CustomCssProperties = {
25167
25590
  "--color-input-background-color"?: (string) | undefined;
25168
25591
  /** Color of the panel's edge. */
25169
25592
  "--color-input-border-color"?: (string) | undefined;
25170
- /** Width of the panel's edge. Defaults to `--helix-border-floating`, which is `0`, so the panel stands out by its shadow unless a theme sets a border. `--helix-border-floating`, which is `0`, so the panel is told apart by its lift unless a theme says otherwise. */
25593
+ /** Width of the panel's edge. Defaults to `--helix-border-floating`, a hairline, so the panel has an edge as well as its shadow over a dark page. Set it to `0` for the shadow alone. */
25171
25594
  "--color-input-border-width"?: (string) | undefined;
25172
25595
  /** Width of the panel, and so of the square. */
25173
25596
  "--color-input-panel-size"?: (string) | undefined;
@@ -25211,7 +25634,7 @@ export type CustomCssProperties = {
25211
25634
  "--combobox-background-color"?: (string) | undefined;
25212
25635
  /** Color of the panel's edge. */
25213
25636
  "--combobox-border-color"?: (string) | undefined;
25214
- /** Width of the panel's edge. Follows `--helix-border-floating`, which is `0` unless your theme sets it, so the panel's shadow sets it apart. */
25637
+ /** Width of the panel's edge. Follows `--helix-border-floating`, a hairline, so the panel has an edge as well as its shadow over a dark page. Set it to `0` for the shadow alone. */
25215
25638
  "--combobox-border-width"?: (string) | undefined;
25216
25639
  /** Smallest the text field shrinks to once tags share its line. */
25217
25640
  "--combobox-control-size"?: (string) | undefined;
@@ -25221,6 +25644,8 @@ export type CustomCssProperties = {
25221
25644
  "--combobox-shadow"?: (string) | undefined;
25222
25645
  /** How tall the list grows before it scrolls. */
25223
25646
  "--command-list-size"?: (string) | undefined;
25647
+ /** The corners of the palette's panel. Defaults to the dialog's. */
25648
+ "--command-radius"?: (string) | undefined;
25224
25649
  /** How wide the palette is. Defaults to `40rem`. */
25225
25650
  "--command-size"?: (string) | undefined;
25226
25651
  /** The icon's color at rest. A `tone` keeps its own. */
@@ -25341,7 +25766,7 @@ export type CustomCssProperties = {
25341
25766
  "--date-input-background-color"?: (string) | undefined;
25342
25767
  /** The color of the panel's border. */
25343
25768
  "--date-input-border-color"?: (string) | undefined;
25344
- /** The width of the panel's border. It follows `--helix-border-floating`, which is `0`, so the panel stands out by its shadow unless a theme sets a border. */
25769
+ /** The width of the panel's border. It follows `--helix-border-floating`, a hairline, so the panel has an edge as well as its shadow over a dark page. Set it to `0` for the shadow alone. */
25345
25770
  "--date-input-border-width"?: (string) | undefined;
25346
25771
  /** The fill behind the segment with focus, in `segmented`. It follows `--helix-color-primary-surface`. */
25347
25772
  "--date-input-segment-focus-background-color"?: (string) | undefined;
@@ -25423,11 +25848,13 @@ export type CustomCssProperties = {
25423
25848
  "--device-screen-touch-x"?: (string) | undefined;
25424
25849
  /** Where a ring is, down the screen, as a percentage. Written on each ring. */
25425
25850
  "--device-screen-touch-y"?: (string) | undefined;
25851
+ /** Filter applied behind a `frosted` or `glass` panel. Follows the theme's material policy. */
25852
+ "--dialog-backdrop"?: (string) | undefined;
25426
25853
  /** The panel's fill. Follows `--helix-color-surface-overlay`. */
25427
25854
  "--dialog-background-color"?: (string) | undefined;
25428
25855
  /** Color of the panel's edge. */
25429
25856
  "--dialog-border-color"?: (string) | undefined;
25430
- /** Width of the panel's edge. Follows `--helix-border-floating`, which is `0`, so the panel stands out by its shadow unless your theme sets a border. */
25857
+ /** Width of the panel's edge. Follows `--helix-border-floating`, a hairline, so the panel has an edge as well as its shadow over a dark page. Set it to `0` for the shadow alone. */
25431
25858
  "--dialog-border-width"?: (string) | undefined;
25432
25859
  /** Color of the words in the panel. Follows `--helix-color-foreground`. */
25433
25860
  "--dialog-color"?: (string) | undefined;
@@ -25489,7 +25916,7 @@ export type CustomCssProperties = {
25489
25916
  "--drawer-background-color"?: (string) | undefined;
25490
25917
  /** Color of the panel's edge. */
25491
25918
  "--drawer-border-color"?: (string) | undefined;
25492
- /** Width of the panel's edge. Follows `--helix-border-floating`, which is `0`, so the panel stands out by its shadow unless your theme sets a border. */
25919
+ /** Width of the panel's edge. Follows `--helix-border-floating`, a hairline, so the panel has an edge as well as its shadow over a dark page. Set it to `0` for the shadow alone. */
25493
25920
  "--drawer-border-width"?: (string) | undefined;
25494
25921
  /** Padding inside the panel. */
25495
25922
  "--drawer-padding"?: (string) | undefined;
@@ -25963,6 +26390,8 @@ export type CustomCssProperties = {
25963
26390
  "--log-scrollbar-thumb-color"?: (string) | undefined;
25964
26391
  /** The track of the scrollbar. Defaults to `--helix-scrollbar-track-color`. */
25965
26392
  "--log-scrollbar-track-color"?: (string) | undefined;
26393
+ /** How tall a step's lines may get in a `plain` log before they scroll. Defaults to 20rem. */
26394
+ "--log-step-max-block-size"?: (string) | undefined;
25966
26395
  /** The background a run takes where ANSI swaps the colors and named none. Defaults to the log's own background on the styled tier. */
25967
26396
  "--log-ansi-background"?: (string) | undefined;
25968
26397
  /** The ANSI color black, which codes `30` and `40` draw. */
@@ -26077,7 +26506,7 @@ export type CustomCssProperties = {
26077
26506
  "--megamenu-backdrop"?: (string) | undefined;
26078
26507
  /** The panel's fill. */
26079
26508
  "--megamenu-background-color"?: (string) | undefined;
26080
- /** The width of the panel's edge. Follows `--helix-border-floating`, which is `0` unless a theme changes it, so the panel stands out by its shadow. */
26509
+ /** The width of the panel's edge. Follows `--helix-border-floating`, a hairline, which is drawn in dark mode only. Set it to `0` for the shadow alone. */
26081
26510
  "--megamenu-border-width"?: (string) | undefined;
26082
26511
  /** The minimum width of a column before the grid wraps. */
26083
26512
  "--megamenu-column-size"?: (string) | undefined;
@@ -26129,11 +26558,13 @@ export type CustomCssProperties = {
26129
26558
  "--menu-item-hover-color"?: (string) | undefined;
26130
26559
  /** Width of the leading column, including the gap after it, for a row with more than a mark. The menu sets it for each page, and `0` removes the column. */
26131
26560
  "--menu-item-start"?: (string) | undefined;
26561
+ /** Filter applied behind a `frosted` or `glass` panel. Follows the theme's material policy. */
26562
+ "--menu-backdrop"?: (string) | undefined;
26132
26563
  /** Fill of the surface. */
26133
26564
  "--menu-background-color"?: (string) | undefined;
26134
26565
  /** Color of the panel's edge. */
26135
26566
  "--menu-border-color"?: (string) | undefined;
26136
- /** Width of the panel's edge. Defaults to `--helix-border-floating`, which is `0`, so the panel stands out by its shadow unless a theme sets a border. */
26567
+ /** Width of the panel's edge. Defaults to `--helix-border-floating`, a hairline, so the panel has an edge as well as its shadow over a dark page. Set it to `0` for the shadow alone. */
26137
26568
  "--menu-border-width"?: (string) | undefined;
26138
26569
  /** The tallest the menu grows before it scrolls. */
26139
26570
  "--menu-max-block-size"?: (string) | undefined;
@@ -26179,8 +26610,16 @@ export type CustomCssProperties = {
26179
26610
  "--meter-at"?: (string) | undefined;
26180
26611
  /** The value as a fraction of the range, 0 to 1. */
26181
26612
  "--meter-fraction"?: (string) | undefined;
26613
+ /** How much the range holds, `max` less `min`, which a segment divides its own value by to find its width. */
26614
+ "--meter-span"?: (string) | undefined;
26182
26615
  /** How much of the circle the arc covers, as a path length. */
26183
26616
  "--meter-sweep"?: (string) | undefined;
26617
+ /** The slice's color. Overrides the series and the tone. */
26618
+ "--meter-segment-color"?: (string) | undefined;
26619
+ /** The color of the hairline between neighbors. */
26620
+ "--meter-segment-gap-color"?: (string) | undefined;
26621
+ /** How much of the range the segment takes, in the meter's own units. */
26622
+ "--meter-segment-value"?: (string) | undefined;
26184
26623
  /** The button's fill. Defaults to the floating overlay surface. */
26185
26624
  "--motion-toggle-background-color"?: (string) | undefined;
26186
26625
  /** Height of the bar in a row. Each destination fills it. */
@@ -26403,9 +26842,13 @@ export type CustomCssProperties = {
26403
26842
  "--pin-input-separator-color"?: (string) | undefined;
26404
26843
  /** Size of the point drawn with `arrow`. Tooltip's point is the same size. */
26405
26844
  "--popover-arrow-size"?: (string) | undefined;
26845
+ /** Filter applied behind a `frosted` or `glass` panel. Follows the theme's material policy. */
26846
+ "--popover-backdrop"?: (string) | undefined;
26847
+ /** Fill of the surface. */
26848
+ "--popover-background-color"?: (string) | undefined;
26406
26849
  /** Color of the panel's edge. */
26407
26850
  "--popover-border-color"?: (string) | undefined;
26408
- /** 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. */
26851
+ /** Width of the panel's edge. Defaults to `--helix-border-floating`, a hairline, so the panel has an edge as well as its shadow over a dark page. Set it to `0` for the shadow alone. */
26409
26852
  "--popover-border-width"?: (string) | undefined;
26410
26853
  /** Width of the panel. */
26411
26854
  "--popover-inline-size"?: (string) | undefined;
@@ -26581,13 +27024,13 @@ export type CustomCssProperties = {
26581
27024
  "--chart-point-y"?: (string) | undefined;
26582
27025
  /** A tick's position along its axis, as a percentage. The component writes it. */
26583
27026
  "--chart-tick"?: (string) | undefined;
26584
- /** The depth of the fades at both edges. */
27027
+ /** The depth of the fade at each edge. */
26585
27028
  "--scroll-area-fade"?: (string) | undefined;
26586
27029
  /** The depth of the bottom fade, or `0` to remove it. */
26587
27030
  "--scroll-area-fade-block-end"?: (string) | undefined;
26588
27031
  /** The depth of the top fade, or `0` to remove it. */
26589
27032
  "--scroll-area-fade-block-start"?: (string) | undefined;
26590
- /** The color the fades blend into, which is the background behind the box. */
27033
+ /** The color to paint the fades in, as a gradient over the content at each edge. Unset, the fades are a mask. */
26591
27034
  "--scroll-area-fade-color"?: (string) | undefined;
26592
27035
  /** The depth of the fade at the inline end, or `0` to remove it. */
26593
27036
  "--scroll-area-fade-inline-end"?: (string) | undefined;
@@ -26605,13 +27048,17 @@ export type CustomCssProperties = {
26605
27048
  "--scroll-area-thumb-min-size"?: (string) | undefined;
26606
27049
  /** The color of the scrollbar's track. Defaults to `--helix-scrollbar-track-color`. */
26607
27050
  "--scroll-area-track-color"?: (string) | undefined;
27051
+ /** The room the browser's horizontal scrollbar takes at the block end of the viewport, in pixels. Written on the `viewport` part while that scrollbar takes room, and absent while it draws over the content. */
27052
+ "--scroll-area-gutter-block-end"?: (string) | undefined;
27053
+ /** The room the browser's vertical scrollbar takes at the inline end of the viewport, in pixels. Written on the `viewport` part while that scrollbar takes room, and absent while it draws over the content. */
27054
+ "--scroll-area-gutter-inline-end"?: (string) | undefined;
26608
27055
  /** 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. */
26609
27056
  "--scroll-area-scroll-fraction"?: (string) | undefined;
26610
27057
  /** 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. */
26611
27058
  "--scroll-area-thumb-fraction"?: (string) | undefined;
26612
27059
  /** Color of the panel's edge. */
26613
27060
  "--select-border-color"?: (string) | undefined;
26614
- /** 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. */
27061
+ /** Width of the panel's edge. Defaults to `--helix-border-floating`, a hairline, so the panel has an edge as well as its shadow over a dark page. Set it to `0` for the shadow alone. */
26615
27062
  "--select-border-width"?: (string) | undefined;
26616
27063
  /** Shadow under the panel. Defaults to `--helix-shadow-floating`, because the panel can sit over any content. */
26617
27064
  "--select-shadow"?: (string) | undefined;
@@ -26645,7 +27092,7 @@ export type CustomCssProperties = {
26645
27092
  "--skip-link-background-color"?: (string) | undefined;
26646
27093
  /** The border color of the link while it is shown. */
26647
27094
  "--skip-link-border-color"?: (string) | undefined;
26648
- /** 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. */
27095
+ /** The border width of the link while it is shown. Follows `--helix-border-floating`, a hairline. Set it to `0` for the shadow alone. */
26649
27096
  "--skip-link-border-width"?: (string) | undefined;
26650
27097
  /** The text color of the link while it is shown. */
26651
27098
  "--skip-link-color"?: (string) | undefined;
@@ -26731,10 +27178,26 @@ export type CustomCssProperties = {
26731
27178
  "--sparkline-readout-font-size"?: (string) | undefined;
26732
27179
  /** Thickness of the line, overriding `weight`. */
26733
27180
  "--sparkline-width"?: (string) | undefined;
27181
+ /** How wide each bar of a `row` or a `diagonal` stands on the page, whatever the number of bars: the row is as long as its bars make it, centered in the plot, and the tallest bar stands as high as the plot has room for, and no taller than the row is long and a quarter again, so one bar stands as a block. `fits` says how many bars the plot holds. Unset, the row fills the plot's width. */
27182
+ "--spatial-bar-chart-bar-size"?: (string) | undefined;
26734
27183
  /** How tall the plot is. By default, three quarters of its width and 22em at most. */
26735
27184
  "--spatial-bar-chart-block-size"?: (string) | undefined;
26736
- /** How far a bar's face turns from the light, from 0 for its top. The component writes it on each face, and the stylesheet that shades the face reads it. */
26737
- "--spatial-bar-chart-shade"?: (string) | undefined;
27185
+ /** */
27186
+ "--spatial-bar-chart-shade -How far a bar's face turns from the light, from 0 for its top. The component writes it on each face, and the stylesheet that shades the face reads it."?: (string) | undefined;
27187
+ /** The color of a bar whose cell says `data-tone="accent"`. */
27188
+ "--spatial-bar-chart-tone-accent"?: (string) | undefined;
27189
+ /** The color of a bar whose cell says `data-tone="danger"`. */
27190
+ "--spatial-bar-chart-tone-danger"?: (string) | undefined;
27191
+ /** The color of a bar whose cell says `data-tone="info"`. */
27192
+ "--spatial-bar-chart-tone-info"?: (string) | undefined;
27193
+ /** The color of a bar whose cell says `data-tone="muted"`. */
27194
+ "--spatial-bar-chart-tone-muted"?: (string) | undefined;
27195
+ /** The color of a bar whose cell says `data-tone="primary"`. A tone with no property of its own falls back to the bar's series color, and the same holds for a name you define. */
27196
+ "--spatial-bar-chart-tone-primary"?: (string) | undefined;
27197
+ /** The color of a bar whose cell says `data-tone="success"`. */
27198
+ "--spatial-bar-chart-tone-success"?: (string) | undefined;
27199
+ /** The color of a bar whose cell says `data-tone="warning"`. */
27200
+ "--spatial-bar-chart-tone-warning"?: (string) | undefined;
26738
27201
  /** The largest a cell grows, along its edge. The strip is never wider than its box, and draws smaller cells to fit. */
26739
27202
  "--spatial-heatmap-cell-size"?: (string) | undefined;
26740
27203
  /** How much less light the left face is than the top, as a step of OKLCH lightness from 0 to 1. 0.07 by default. */
@@ -26975,6 +27438,8 @@ export type CustomCssProperties = {
26975
27438
  "--tabs-tab-hover-background-color"?: (string) | undefined;
26976
27439
  /** The label color under the pointer. */
26977
27440
  "--tabs-tab-hover-color"?: (string) | undefined;
27441
+ /** The widest a tab grows. A longer label ends in an ellipsis, as a tag's does. Unset, a tab is as wide as its label. */
27442
+ "--tabs-tab-max-inline-size"?: (string) | undefined;
26978
27443
  /** The space either side of the label. */
26979
27444
  "--tabs-tab-padding-inline"?: (string) | undefined;
26980
27445
  /** The corners of a tab, which the hover wash takes. */
@@ -27085,7 +27550,7 @@ export type CustomCssProperties = {
27085
27550
  "--time-input-background-color"?: (string) | undefined;
27086
27551
  /** Color of the panel's edge. */
27087
27552
  "--time-input-border-color"?: (string) | undefined;
27088
- /** 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. */
27553
+ /** Width of the panel's edge. Defaults to `--helix-border-floating`, a hairline, so the panel has an edge as well as its shadow over a dark page. Set it to `0` for the shadow alone. */
27089
27554
  "--time-input-border-width"?: (string) | undefined;
27090
27555
  /** The fill behind the segment with focus, in `segmented`. It follows `--helix-color-primary-surface`. */
27091
27556
  "--time-input-segment-focus-background-color"?: (string) | undefined;
@@ -27145,7 +27610,7 @@ export type CustomCssProperties = {
27145
27610
  "--toast-background-color"?: (string) | undefined;
27146
27611
  /** Color of the panel's edge. */
27147
27612
  "--toast-border-color"?: (string) | undefined;
27148
- /** Width of the panel's edge. Follows `--helix-border-floating`, which is `0`, so the panel stands out by its shadow unless your theme sets a border. */
27613
+ /** Width of the panel's edge. Follows `--helix-border-floating`, a hairline, so the panel has an edge as well as its shadow over a dark page. Set it to `0` for the shadow alone. */
27149
27614
  "--toast-border-width"?: (string) | undefined;
27150
27615
  /** Color of the message's text. */
27151
27616
  "--toast-color"?: (string) | undefined;
@@ -27247,7 +27712,7 @@ export type CustomCssProperties = {
27247
27712
  "--tour-spotlight-y"?: (string) | undefined;
27248
27713
  /** The size of the arrow's box, before it is rotated. */
27249
27714
  "--tour-arrow-size"?: (string) | undefined;
27250
- /** The width of the panel's border. It follows `--helix-border-floating`, which is `0`, so the panel stands out by its shadow unless a theme sets a border. */
27715
+ /** The width of the panel's border. It follows `--helix-border-floating`, a hairline, so the panel has an edge as well as its shadow over a dark page. Set it to `0` for the shadow alone. */
27251
27716
  "--tour-border-width"?: (string) | undefined;
27252
27717
  /** The widest the panel can grow. */
27253
27718
  "--tour-bubble-size"?: (string) | undefined;
@@ -27441,6 +27906,18 @@ export type CustomCssProperties = {
27441
27906
  "--virtual-list-selected-background-color"?: (string) | undefined;
27442
27907
  /** The color of the text in a chosen row, in a list with `selection-mode`. Inherited by default. */
27443
27908
  "--virtual-list-selected-color"?: (string) | undefined;
27909
+ /** The color of the second wave. Defaults to the accent color. */
27910
+ "--voice-level-accent-color"?: (string) | undefined;
27911
+ /** How many bars the spectrum draws, from 3 to 96. Defaults to `24`. */
27912
+ "--voice-level-bars"?: (string) | undefined;
27913
+ /** The height. Defaults to the icon size for `spectrum` and the control size for `waves`. */
27914
+ "--voice-level-block-size"?: (string) | undefined;
27915
+ /** The color of the center bars and the main wave. Defaults to the primary color. */
27916
+ "--voice-level-color"?: (string) | undefined;
27917
+ /** The color of the bars at either end. Defaults to `--voice-level-color` at 55 percent. */
27918
+ "--voice-level-edge-color"?: (string) | undefined;
27919
+ /** The width. Defaults to four times the height for `spectrum` and three times for `waves`. */
27920
+ "--voice-level-inline-size"?: (string) | undefined;
27444
27921
  };
27445
27922
 
27446
27923
  // Vue SFC template type-checking (GlobalComponents) for non-Vue custom elements.
@@ -27573,7 +28050,7 @@ export interface WcToolkitVueGlobalComponents {
27573
28050
  HelixCarouselVueProps,
27574
28051
  HelixCarouselVueEvents
27575
28052
  >;
27576
- /** The composer is one row, and the field takes the remaining width. The field grows with its text up to a maximum height, through 'field-sizing: content'. Where that is not supported, the field keeps its rows and scrolls. The maximum height keeps the composer from covering the transcript. */
28053
+ /** The composer is one box. What the draft carries sits at its top, in a row that wraps, inset to the line the caret starts on. The field grows with its text up to a maximum height, through 'field-sizing: content'. Where that is not supported, the field keeps its rows and scrolls. The maximum height keeps the composer from covering the transcript. With two 'placeholders' or more, each example rolls into the next: the one showing rises a little as it fades and blurs, and the next rises into its place from below as it fades in, the two crossing so the field is never empty. A box that changes height for the next example changes as it lands. Where the browser has no CSS anchor positioning, the examples fade into each other in the field's own placeholder. */
27577
28054
  "helix-chat-composer": DefineCustomElement<
27578
28055
  HelixChatComposer,
27579
28056
  HelixChatComposerVueProps,
@@ -27999,6 +28476,12 @@ export interface WcToolkitVueGlobalComponents {
27999
28476
  HelixMeterVueProps,
28000
28477
  HelixMeterVueEvents
28001
28478
  >;
28479
+ /** Each segment takes the next color in the chart series, in the order written, so two of them are told apart without being given a color. A 'tone' is what a segment means, and takes the place of its turn. A hairline in the track's ground sits between neighbors, so the boundary is there for a reader who cannot tell two of the colors apart. Write the segments inside a meter, and the page imports the family beside it: '''js import '@fusion.dev/helix/meter' ''' */
28480
+ "helix-meter-segment": DefineCustomElement<
28481
+ HelixMeterSegment,
28482
+ HelixMeterSegmentVueProps,
28483
+ HelixMeterSegmentVueEvents
28484
+ >;
28002
28485
  /** A quiet square button, as the controls over a map are, with the pause icon while motion runs and the play icon while it is paused. Text slotted into it stands beside the icon. */
28003
28486
  "helix-motion-toggle": DefineCustomElement<
28004
28487
  HelixMotionToggle,
@@ -28179,7 +28662,7 @@ export interface WcToolkitVueGlobalComponents {
28179
28662
  HelixScatterChartVueProps,
28180
28663
  HelixScatterChartVueEvents
28181
28664
  >;
28182
- /** 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. */
28665
+ /** 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. **The content fades out toward each edge that has more past it.** The fade is a mask on the viewport, so the surface behind the scroll area shows through it: the page, a card, or a translucent pane. Set the depth with '--scroll-area-fade', or one edge's depth with its own property, and use '0' to keep an edge from fading. A scrollbar that takes room beside the content stays out of the mask. **Set '--scroll-area-fade-color' to paint the fades.** Each fade is then a gradient from that color over the content, and there is no mask. Use it for a scroll area on a solid ground, in the ground's color or one of your own. 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. */
28183
28666
  "helix-scroll-area": DefineCustomElement<
28184
28667
  HelixScrollArea,
28185
28668
  HelixScrollAreaVueProps,
@@ -28305,7 +28788,7 @@ export interface WcToolkitVueGlobalComponents {
28305
28788
  HelixStepVueProps,
28306
28789
  HelixStepVueEvents
28307
28790
  >;
28308
- /** Hundreds of thin strands are drawn as one ribbon, and the light they add together is bloomed, so where they converge the ribbon burns hot. The ribbon moves on its own all the time: it sways and breathes, its strands wave and roll over one another, and light runs along them. Its palette comes from the tokens. The strands are '--helix-color-primary', a few are '--helix-color-accent' for depth, and the page they light is '--helix-color-background'. On a light page the light becomes ink, because light added to near-white cannot be seen. **Four forms, set with 'variant'.** 'bend' turns bright strands through one tight point, with its arms opening to the right. 'ribbon', the default, is a broad, soft ribbon in long curves. 'sweep' enters at a top corner, the one 'at' is nearer, and crosses in one diagonal to the far side. 'waves' is sharp strands crossing the full width. **Quiet behind words.** 'quiet' names elements, such as a hero's words, that the light dims behind to a faint glow, so a bright ribbon can cross the page under them and they stay crisp. **In its own box, by default.** The element fills the box it is given, the way an image does, and 'at' places the bend's apex or the ribbon's axis across it. Content placed inside sits over the ribbon, in the 'content' part. **Down the whole page, with 'travel'.** The element fixes itself behind the page, on '--helix-layer-beneath', and lays one ribbon from the top of the page to the bottom, so scrolling travels along it. Put 'helix-strands-stop' elements inside to pin a form to a section: each names an element with 'for' and says which form the ribbon takes there. Between stops the ribbon fills the gap in its own 'variant', and between two waves less than a screen and a half apart it turns off screen so each wave reads alone. Set 'z-index' on the element to move it. The ribbon stops moving in these cases: - 'prefers-reduced-motion' is set. The element shows one still frame, and in 'travel' still follows the scroll. - The element is off screen or in a background tab. It shows a gradient from the same tokens in these cases, and matches ':state(fallback)' and sends 'helix-strands-fallback' with the reason: - The renderer draws on the CPU, such as a headless browser or a machine with no usable GPU. - There is no WebGL, or the browser took the drawing context back. Strands is styled only and has behavior, as 'Aura' does: its behavior is drawing to a canvas, so there is no structure for a headless version to hold. */
28791
+ /** Hundreds of thin strands are drawn as one ribbon, and the light they add together is bloomed, so where they converge the ribbon burns hot. The ribbon moves on its own all the time: it sways and breathes, its strands wave and roll over one another, and light runs along them. Its palette comes from the tokens. The strands are '--helix-color-primary', a few are '--helix-color-accent' for depth, and the page they light is '--helix-color-background'. On a light page the light becomes ink, because light added to near-white cannot be seen. **Four forms, set with 'variant'.** 'bend' turns bright strands through one tight point, with its arms opening to the right. 'ribbon', the default, is a broad, soft ribbon in long curves. 'sweep' enters at a top corner, the one 'at' is nearer, and crosses in one diagonal to the far side. 'waves' is sharp strands crossing the full width. **Clear, over glass.** Set 'clear' and the ribbon is drawn without its ground, so a translucent pane or a frosted window behind the element shows through, with the light over it. **Quiet behind words.** 'quiet' names elements, such as a hero's words, that the light dims behind to a faint glow, so a bright ribbon can cross the page under them and they stay crisp. **In its own box, by default.** The element fills the box it is given, the way an image does, and 'at' places the bend's apex or the ribbon's axis across it. Content placed inside sits over the ribbon, in the 'content' part. **Down the whole page, with 'travel'.** The element fixes itself behind the page, on '--helix-layer-beneath', and lays one ribbon from the top of the page to the bottom, so scrolling travels along it. Put 'helix-strands-stop' elements inside to pin a form to a section: each names an element with 'for' and says which form the ribbon takes there. Between stops the ribbon fills the gap in its own 'variant', and between two waves less than a screen and a half apart it turns off screen so each wave reads alone. Set 'z-index' on the element to move it. The ribbon stops moving in these cases: - 'prefers-reduced-motion' is set. The element shows one still frame, and in 'travel' still follows the scroll. - The element is off screen or in a background tab. It shows a gradient from the same tokens in these cases, and matches ':state(fallback)' and sends 'helix-strands-fallback' with the reason: - The renderer draws on the CPU, such as a headless browser or a machine with no usable GPU. - There is no WebGL, or the browser took the drawing context back. Strands is styled only and has behavior, as 'Aura' does: its behavior is drawing to a canvas, so there is no structure for a headless version to hold. */
28309
28792
  "helix-strands": DefineCustomElement<
28310
28793
  HelixStrands,
28311
28794
  HelixStrandsVueProps,
@@ -28353,7 +28836,7 @@ export interface WcToolkitVueGlobalComponents {
28353
28836
  HelixTabPanelVueProps,
28354
28837
  HelixTabPanelVueEvents
28355
28838
  >;
28356
- /** One mark moves between the tabs to show the current one. A moving mark is a single object that is easy to follow, and it shows where the selection came from. A fill that switches from tab to tab changes two things at once and looks like a flicker. 'Navigation' marks its destinations the same way. The mark depends on 'variant': - Unset, it is a raised pill on the selected tab, with nothing behind the row. - 'underlined' makes it a bar along the bottom of the strip, on a rule. - 'segmented' makes it the size of the tab's box, inside a sunken track. */
28839
+ /** One mark moves between the tabs to show the current one. A moving mark is a single object that is easy to follow, and it shows where the selection came from. A fill that switches from tab to tab changes two things at once and looks like a flicker. 'Navigation' marks its destinations the same way. The mark depends on 'variant': - Unset, it is a raised pill on the selected tab, with nothing behind the row. - 'underlined' makes it a bar along the bottom of the strip, on a rule. - 'segmented' makes it the size of the tab's box, inside a sunken track. 'emphasis="subtle"' makes the mark quieter, for tabs inside other chrome such as a pane's header: a tint with no edge or shadow, the same wash a subtle button takes. **Tabs with no panels are a strip.** Where what each tab stands for lives outside the set, such as a pane's pages or shells, leave the panels out: the tabs keep their keys and their selection, 'active' and 'helix-activate' say which is current, and the page shows the rest. Put a control that adds a tab, such as a plus, beside the set rather than in it, so the tab list holds tabs alone. With 'dismissible' tabs, 'dismiss-marks="hover"' keeps each close mark out of sight until the tab is current, under the pointer, or holds focus, as a browser's tabs do. */
28357
28840
  "helix-tabs": DefineCustomElement<
28358
28841
  HelixTabs,
28359
28842
  HelixTabsVueProps,
@@ -28521,6 +29004,12 @@ export interface WcToolkitVueGlobalComponents {
28521
29004
  HelixVirtualListVueProps,
28522
29005
  HelixVirtualListVueEvents
28523
29006
  >;
29007
+ /** Two drawings, chosen with 'variant': - 'spectrum': a row of thin rounded bars, one for each frequency band in 'bands', tallest in the middle. The middle half of the row takes the stronger color. A quiet bar rests as a dot. - 'waves': three sine lines with different speeds, phases, and weights, held to the center line at both ends. 'level' sets how far they swing, and a quiet level rests as a flat line. Set 'level' and 'bands' from your audio as often as you have readings, about 30 times a second. Each bar and wave eases toward its reading: up fast and down slower. A spectrum given no 'bands' draws every bar from 'level'. The drawing stops when it is off screen, in a background tab, or after the level has been zero for under a second, and starts again with the next reading. With 'prefers-reduced-motion', it draws one bar from the middle over a faint track, whose length is the level, and redraws it on each reading. With 'still', it draws either drawing as a still picture of its readings, whatever the motion preference. The level is an image named by 'label'. A meter's value would be announced on every change, and a level changes many times a second. Voice Level is styled only and has behavior, which the tier split does not otherwise allow. Its role and name are set on the host, and the rest is drawing to a canvas. */
29008
+ "helix-voice-level": DefineCustomElement<
29009
+ HelixVoiceLevel,
29010
+ HelixVoiceLevelVueProps,
29011
+ HelixVoiceLevelVueEvents
29012
+ >;
28524
29013
  }
28525
29014
 
28526
29015
  declare module "@vue/runtime-core" {