@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/jsx.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
 
294
297
  /**
@@ -3498,6 +3501,19 @@ into one, counting the first and the last. Unset, it never folds. At least
3498
3501
  into one, counting the first and the last. Unset, it never folds. At least
3499
3502
  2, so the first crumb and the current page always show. */
3500
3503
  maxItems?: (HelixBreadcrumbs["maxItems"]) | undefined;
3504
+ /** The mark between one crumb and the next, for the whole trail. Unset is a
3505
+ chevron; `slash` is a slash, as a path or a repository and its branch is
3506
+ written.
3507
+
3508
+ **On the trail rather than on each crumb**, because the marks are one
3509
+ decision: a trail whose separators differ from crumb to crumb is a
3510
+ mistake, and a trail drawn from `items` has no crumb of yours to set it
3511
+ on. A crumb's own `separator` slot still replaces its mark, for the rare
3512
+ crumb that needs something else.
3513
+
3514
+ Optional and reflected, per the rule that a reflected property takes no
3515
+ default, so a stylesheet can select on it. */
3516
+ separator?: (HelixBreadcrumbs["separator"]) | undefined;
3501
3517
  /** The trail as data, drawn as crumbs before any you slot. The last item is the
3502
3518
  current page.
3503
3519
 
@@ -3539,6 +3555,19 @@ into one, counting the first and the last. Unset, it never folds. At least
3539
3555
  into one, counting the first and the last. Unset, it never folds. At least
3540
3556
  2, so the first crumb and the current page always show. */
3541
3557
  "prop:maxItems"?: (HelixBreadcrumbs["maxItems"]) | undefined;
3558
+ /** The mark between one crumb and the next, for the whole trail. Unset is a
3559
+ chevron; `slash` is a slash, as a path or a repository and its branch is
3560
+ written.
3561
+
3562
+ **On the trail rather than on each crumb**, because the marks are one
3563
+ decision: a trail whose separators differ from crumb to crumb is a
3564
+ mistake, and a trail drawn from `items` has no crumb of yours to set it
3565
+ on. A crumb's own `separator` slot still replaces its mark, for the rare
3566
+ crumb that needs something else.
3567
+
3568
+ Optional and reflected, per the rule that a reflected property takes no
3569
+ default, so a stylesheet can select on it. */
3570
+ "prop:separator"?: (HelixBreadcrumbs["separator"]) | undefined;
3542
3571
  /** The trail as data, drawn as crumbs before any you slot. The last item is the
3543
3572
  current page.
3544
3573
 
@@ -3797,6 +3826,36 @@ is the platform's `commandfor`. */
3797
3826
  commandfor?: (HelixButton["commandFor"]) | undefined;
3798
3827
  /** The id of the element the command is sent to. */
3799
3828
  commandFor?: (HelixButton["commandFor"]) | undefined;
3829
+ /** Whether a disabled button stays in the tab order, so a tooltip around it
3830
+ can say why it is disabled.
3831
+
3832
+ Set it on a button whose reason a Tooltip gives, such as a Save with no
3833
+ changes to save. While the button is disabled, it keeps focus and takes
3834
+ hover, and it refuses every press: a click, Enter and Space, and Enter in
3835
+ a field of its form. The click does not reach your listeners, and a submit
3836
+ button submits nothing. The inner control carries `aria-disabled` in place
3837
+ of the native `disabled`, so a screen reader still says it is unavailable.
3838
+ The styled button keeps the disabled look.
3839
+
3840
+ Leave it unset on a button with no reason to give. A plain disabled button
3841
+ leaves the tab order, as a native one does, and a keyboard reader skips a
3842
+ stop that does nothing. Set `pending` for the wait after a press. */
3843
+ "focusable-when-disabled"?: (HelixButton["focusableWhenDisabled"]) | undefined;
3844
+ /** Whether a disabled button stays in the tab order, so a tooltip around it
3845
+ can say why it is disabled.
3846
+
3847
+ Set it on a button whose reason a Tooltip gives, such as a Save with no
3848
+ changes to save. While the button is disabled, it keeps focus and takes
3849
+ hover, and it refuses every press: a click, Enter and Space, and Enter in
3850
+ a field of its form. The click does not reach your listeners, and a submit
3851
+ button submits nothing. The inner control carries `aria-disabled` in place
3852
+ of the native `disabled`, so a screen reader still says it is unavailable.
3853
+ The styled button keeps the disabled look.
3854
+
3855
+ Leave it unset on a button with no reason to give. A plain disabled button
3856
+ leaves the tab order, as a native one does, and a keyboard reader skips a
3857
+ stop that does nothing. Set `pending` for the wait after a press. */
3858
+ focusableWhenDisabled?: (HelixButton["focusableWhenDisabled"]) | undefined;
3800
3859
  /** Where this button's submission goes, overriding the form's own.
3801
3860
 
3802
3861
  **The five `form*` overrides ride on a native submit button that stands in
@@ -4025,6 +4084,36 @@ is the platform's `commandfor`. */
4025
4084
  "attr:commandfor"?: (HelixButton["commandFor"]) | undefined;
4026
4085
  /** The id of the element the command is sent to. */
4027
4086
  "prop:commandFor"?: (HelixButton["commandFor"]) | undefined;
4087
+ /** Whether a disabled button stays in the tab order, so a tooltip around it
4088
+ can say why it is disabled.
4089
+
4090
+ Set it on a button whose reason a Tooltip gives, such as a Save with no
4091
+ changes to save. While the button is disabled, it keeps focus and takes
4092
+ hover, and it refuses every press: a click, Enter and Space, and Enter in
4093
+ a field of its form. The click does not reach your listeners, and a submit
4094
+ button submits nothing. The inner control carries `aria-disabled` in place
4095
+ of the native `disabled`, so a screen reader still says it is unavailable.
4096
+ The styled button keeps the disabled look.
4097
+
4098
+ Leave it unset on a button with no reason to give. A plain disabled button
4099
+ leaves the tab order, as a native one does, and a keyboard reader skips a
4100
+ stop that does nothing. Set `pending` for the wait after a press. */
4101
+ "bool:focusable-when-disabled"?: (HelixButton["focusableWhenDisabled"]) | undefined;
4102
+ /** Whether a disabled button stays in the tab order, so a tooltip around it
4103
+ can say why it is disabled.
4104
+
4105
+ Set it on a button whose reason a Tooltip gives, such as a Save with no
4106
+ changes to save. While the button is disabled, it keeps focus and takes
4107
+ hover, and it refuses every press: a click, Enter and Space, and Enter in
4108
+ a field of its form. The click does not reach your listeners, and a submit
4109
+ button submits nothing. The inner control carries `aria-disabled` in place
4110
+ of the native `disabled`, so a screen reader still says it is unavailable.
4111
+ The styled button keeps the disabled look.
4112
+
4113
+ Leave it unset on a button with no reason to give. A plain disabled button
4114
+ leaves the tab order, as a native one does, and a keyboard reader skips a
4115
+ stop that does nothing. Set `pending` for the wait after a press. */
4116
+ "prop:focusableWhenDisabled"?: (HelixButton["focusableWhenDisabled"]) | undefined;
4028
4117
  /** Where this button's submission goes, overriding the form's own.
4029
4118
 
4030
4119
  **The five `form*` overrides ride on a native submit button that stands in
@@ -6819,11 +6908,27 @@ export type HelixChatComposerHelixListenElementEvent =
6819
6908
  /** `helix-send` event type */
6820
6909
  export type HelixChatComposerHelixSendElementEvent =
6821
6910
  HelixChatComposerElementEvent<HelixSendEvent>;
6911
+ /** `helix-stop` event type */
6912
+ export type HelixChatComposerHelixStopElementEvent =
6913
+ HelixChatComposerElementEvent<HelixStopEvent>;
6822
6914
  /** `helix-typing` event type */
6823
6915
  export type HelixChatComposerHelixTypingElementEvent =
6824
6916
  HelixChatComposerElementEvent<HelixTypingEvent>;
6825
6917
 
6826
6918
  export type HelixChatComposerProps = {
6919
+ /** Draws the composer's focus as a glow: a light that runs once around the
6920
+ edge as the composer takes focus, then a soft steady edge while it holds
6921
+ it, in place of the focus ring.
6922
+
6923
+ **On focus, and only then.** It says the composer is listening. A glow
6924
+ that ran while a reply was on its way would be a second indicator of what
6925
+ the conversation already shows, and one that ran all the time would be
6926
+ decoration that moves. With reduced motion asked for, the edge lights
6927
+ without the sweep.
6928
+
6929
+ The steady edge is the focus indicator, so the ring is not drawn as well.
6930
+ Its color is `--chat-composer-glow-color`, the primary color unless set. */
6931
+ glow?: (HelixChatComposer["glow"]) | undefined;
6827
6932
  /** What a screen reader hears as listening starts. */
6828
6933
  "listening-label"?: (HelixChatComposer["listeningLabel"]) | undefined;
6829
6934
  /** What a screen reader hears as listening starts. */
@@ -6845,6 +6950,18 @@ microphone is let go as listening stops. An input of type `password`,
6845
6950
  "voice-stop-label"?: (HelixChatComposer["voiceStopLabel"]) | undefined;
6846
6951
  /** The dictation button's name while it listens. */
6847
6952
  voiceStopLabel?: (HelixChatComposer["voiceStopLabel"]) | undefined;
6953
+ /** Whether the draft holds something besides its text, such as an attached
6954
+ file. The draft then counts as one though the field is empty, so the
6955
+ send button shows in place of the `idle` slot. */
6956
+ attached?: (HelixChatComposer["attached"]) | undefined;
6957
+ /** Whether a reply is on its way. While set, the send button is a stop
6958
+ button that sends `helix-stop`, and the draft does not send.
6959
+
6960
+ **The same button rather than one beside it**, because sending and
6961
+ stopping are never both possible: while a reply is on its way there is
6962
+ nothing to send to, and the place the reader's eye goes to act is the
6963
+ place that can act. The field stays open for the next turn. */
6964
+ busy?: (HelixChatComposer["busy"]) | undefined;
6848
6965
  /** A message about the draft, shown under the field. While set, the composer
6849
6966
  is invalid, does not send, and does not submit, as a field's `feedback`
6850
6967
  does, and the message is announced as it appears. */
@@ -6863,6 +6980,14 @@ the field, as on a `<textarea>`. */
6863
6980
  minLength?: (HelixChatComposer["minLength"]) | undefined;
6864
6981
  /** Placeholder text shown in an empty field. */
6865
6982
  placeholder?: (HelixChatComposer["placeholder"]) | undefined;
6983
+ /** Whether Enter sends while `busy`, for a page that queues the turn or
6984
+ hands it to the reply under way.
6985
+
6986
+ Off by default, because a page that does neither would drop the turn: it
6987
+ has nowhere to put a message while a reply is coming. The button stays
6988
+ the stop button either way, since stopping is still the one thing it
6989
+ should do while a reply is on its way. */
6990
+ queue?: (HelixChatComposer["queue"]) | undefined;
6866
6991
  /** Whether the form needs a draft to submit. An empty draft never sends,
6867
6992
  required or not. */
6868
6993
  required?: (HelixChatComposer["required"]) | undefined;
@@ -6870,10 +6995,34 @@ required or not. */
6870
6995
 
6871
6996
  It grows from there. */
6872
6997
  rows?: (HelixChatComposer["rows"]) | undefined;
6998
+ /** Whether the draft waits to be sent, such as while an attachment is still
6999
+ read. The send button is unavailable and Enter does not send, while the
7000
+ field stays open. The stop button shown while `busy` still stops. */
7001
+ "send-disabled"?: (HelixChatComposer["sendDisabled"]) | undefined;
7002
+ /** Whether the draft waits to be sent, such as while an attachment is still
7003
+ read. The send button is unavailable and Enter does not send, while the
7004
+ field stays open. The stop button shown while `busy` still stops. */
7005
+ sendDisabled?: (HelixChatComposer["sendDisabled"]) | undefined;
6873
7006
  /** Label for the send button. */
6874
7007
  "send-label"?: (HelixChatComposer["sendLabel"]) | undefined;
6875
7008
  /** Label for the send button. */
6876
7009
  sendLabel?: (HelixChatComposer["sendLabel"]) | undefined;
7010
+ /** Why the draft waits, such as "Reading photo.jpg", shown in a tooltip on
7011
+ the send button while `send-disabled` is set. The button then stays in
7012
+ the tab order and takes the pointer, with `aria-disabled` in place of
7013
+ `disabled`, so the reason can be reached by keyboard and by pointer, as
7014
+ Button's `focusable-when-disabled` does. A press still sends nothing. */
7015
+ "send-reason"?: (HelixChatComposer["sendReason"]) | undefined;
7016
+ /** Why the draft waits, such as "Reading photo.jpg", shown in a tooltip on
7017
+ the send button while `send-disabled` is set. The button then stays in
7018
+ the tab order and takes the pointer, with `aria-disabled` in place of
7019
+ `disabled`, so the reason can be reached by keyboard and by pointer, as
7020
+ Button's `focusable-when-disabled` does. A press still sends nothing. */
7021
+ sendReason?: (HelixChatComposer["sendReason"]) | undefined;
7022
+ /** Label for the stop button shown while `busy`. */
7023
+ "stop-label"?: (HelixChatComposer["stopLabel"]) | undefined;
7024
+ /** Label for the stop button shown while `busy`. */
7025
+ stopLabel?: (HelixChatComposer["stopLabel"]) | undefined;
6877
7026
  /** What sends the turn: `enter` for the Enter key, or `button` for the send
6878
7027
  button only.
6879
7028
 
@@ -6928,6 +7077,23 @@ Here rather than on each control. */
6928
7077
  /** The engine this field listens through, in place of the one
6929
7078
  `registerSpeechEngine` gave the page, or the browser's own. */
6930
7079
  speechEngine?: (HelixChatComposer["speechEngine"]) | undefined;
7080
+ /** Examples the empty field shows in turn, in place of `placeholder`, such
7081
+ as tasks a reader might ask for. Each shows for 6.5 seconds, and a longer
7082
+ one shows longer, up to 10 seconds.
7083
+
7084
+ **Each is the field's placeholder in its turn**, so a screen reader that
7085
+ reaches the field hears the one showing. The swap runs through
7086
+ `:state(example-leaving)`, as one example leaves, and
7087
+ `:state(example-entering)`, as the next arrives.
7088
+
7089
+ **They move only while nobody is about to write, and while the reader
7090
+ can see them.** An empty field without focus moves on. Focus or text
7091
+ holds the example showing, and an example already leaving finishes its
7092
+ turn. A composer scrolled out of view holds its example, and the example
7093
+ gets its full time again when the composer comes back. Where the reader
7094
+ asked for less motion, or the page paused its motion, the first example
7095
+ stays. */
7096
+ placeholders?: (HelixChatComposer["placeholders"]) | undefined;
6931
7097
 
6932
7098
  /** The dictation button was pressed. Cancelable: cancel it to keep the composer from listening. */
6933
7099
  "onhelix-before-listen"?: ((
@@ -6937,6 +7103,8 @@ Here rather than on each control. */
6937
7103
  "onhelix-listen"?: ((e: HelixChatComposerHelixListenElementEvent) => void) | undefined;
6938
7104
  /** Fired when the user sends their turn, and cancelable. */
6939
7105
  "onhelix-send"?: ((e: HelixChatComposerHelixSendElementEvent) => void) | undefined;
7106
+ /** Fired when the user presses the stop button, shown in place of the send button while `busy` is set. */
7107
+ "onhelix-stop"?: ((e: HelixChatComposerHelixStopElementEvent) => void) | undefined;
6940
7108
  /** The user started or stopped writing, with `typing` saying which, as the composer's `typing` does. */
6941
7109
  "onhelix-typing"?: ((e: HelixChatComposerHelixTypingElementEvent) => void) | undefined;
6942
7110
  /** 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. */
@@ -6944,6 +7112,19 @@ Here rather than on each control. */
6944
7112
  };
6945
7113
 
6946
7114
  export type HelixChatComposerSolidJsProps = {
7115
+ /** Draws the composer's focus as a glow: a light that runs once around the
7116
+ edge as the composer takes focus, then a soft steady edge while it holds
7117
+ it, in place of the focus ring.
7118
+
7119
+ **On focus, and only then.** It says the composer is listening. A glow
7120
+ that ran while a reply was on its way would be a second indicator of what
7121
+ the conversation already shows, and one that ran all the time would be
7122
+ decoration that moves. With reduced motion asked for, the edge lights
7123
+ without the sweep.
7124
+
7125
+ The steady edge is the focus indicator, so the ring is not drawn as well.
7126
+ Its color is `--chat-composer-glow-color`, the primary color unless set. */
7127
+ "prop:glow"?: (HelixChatComposer["glow"]) | undefined;
6947
7128
  /** What a screen reader hears as listening starts. */
6948
7129
  "attr:listening-label"?: (HelixChatComposer["listeningLabel"]) | undefined;
6949
7130
  /** What a screen reader hears as listening starts. */
@@ -6965,6 +7146,18 @@ microphone is let go as listening stops. An input of type `password`,
6965
7146
  "attr:voice-stop-label"?: (HelixChatComposer["voiceStopLabel"]) | undefined;
6966
7147
  /** The dictation button's name while it listens. */
6967
7148
  "prop:voiceStopLabel"?: (HelixChatComposer["voiceStopLabel"]) | undefined;
7149
+ /** Whether the draft holds something besides its text, such as an attached
7150
+ file. The draft then counts as one though the field is empty, so the
7151
+ send button shows in place of the `idle` slot. */
7152
+ "prop:attached"?: (HelixChatComposer["attached"]) | undefined;
7153
+ /** Whether a reply is on its way. While set, the send button is a stop
7154
+ button that sends `helix-stop`, and the draft does not send.
7155
+
7156
+ **The same button rather than one beside it**, because sending and
7157
+ stopping are never both possible: while a reply is on its way there is
7158
+ nothing to send to, and the place the reader's eye goes to act is the
7159
+ place that can act. The field stays open for the next turn. */
7160
+ "prop:busy"?: (HelixChatComposer["busy"]) | undefined;
6968
7161
  /** A message about the draft, shown under the field. While set, the composer
6969
7162
  is invalid, does not send, and does not submit, as a field's `feedback`
6970
7163
  does, and the message is announced as it appears. */
@@ -6983,6 +7176,14 @@ the field, as on a `<textarea>`. */
6983
7176
  "prop:minLength"?: (HelixChatComposer["minLength"]) | undefined;
6984
7177
  /** Placeholder text shown in an empty field. */
6985
7178
  "prop:placeholder"?: (HelixChatComposer["placeholder"]) | undefined;
7179
+ /** Whether Enter sends while `busy`, for a page that queues the turn or
7180
+ hands it to the reply under way.
7181
+
7182
+ Off by default, because a page that does neither would drop the turn: it
7183
+ has nowhere to put a message while a reply is coming. The button stays
7184
+ the stop button either way, since stopping is still the one thing it
7185
+ should do while a reply is on its way. */
7186
+ "prop:queue"?: (HelixChatComposer["queue"]) | undefined;
6986
7187
  /** Whether the form needs a draft to submit. An empty draft never sends,
6987
7188
  required or not. */
6988
7189
  "prop:required"?: (HelixChatComposer["required"]) | undefined;
@@ -6990,10 +7191,34 @@ required or not. */
6990
7191
 
6991
7192
  It grows from there. */
6992
7193
  "prop:rows"?: (HelixChatComposer["rows"]) | undefined;
7194
+ /** Whether the draft waits to be sent, such as while an attachment is still
7195
+ read. The send button is unavailable and Enter does not send, while the
7196
+ field stays open. The stop button shown while `busy` still stops. */
7197
+ "bool:send-disabled"?: (HelixChatComposer["sendDisabled"]) | undefined;
7198
+ /** Whether the draft waits to be sent, such as while an attachment is still
7199
+ read. The send button is unavailable and Enter does not send, while the
7200
+ field stays open. The stop button shown while `busy` still stops. */
7201
+ "prop:sendDisabled"?: (HelixChatComposer["sendDisabled"]) | undefined;
6993
7202
  /** Label for the send button. */
6994
7203
  "attr:send-label"?: (HelixChatComposer["sendLabel"]) | undefined;
6995
7204
  /** Label for the send button. */
6996
7205
  "prop:sendLabel"?: (HelixChatComposer["sendLabel"]) | undefined;
7206
+ /** Why the draft waits, such as "Reading photo.jpg", shown in a tooltip on
7207
+ the send button while `send-disabled` is set. The button then stays in
7208
+ the tab order and takes the pointer, with `aria-disabled` in place of
7209
+ `disabled`, so the reason can be reached by keyboard and by pointer, as
7210
+ Button's `focusable-when-disabled` does. A press still sends nothing. */
7211
+ "attr:send-reason"?: (HelixChatComposer["sendReason"]) | undefined;
7212
+ /** Why the draft waits, such as "Reading photo.jpg", shown in a tooltip on
7213
+ the send button while `send-disabled` is set. The button then stays in
7214
+ the tab order and takes the pointer, with `aria-disabled` in place of
7215
+ `disabled`, so the reason can be reached by keyboard and by pointer, as
7216
+ Button's `focusable-when-disabled` does. A press still sends nothing. */
7217
+ "prop:sendReason"?: (HelixChatComposer["sendReason"]) | undefined;
7218
+ /** Label for the stop button shown while `busy`. */
7219
+ "attr:stop-label"?: (HelixChatComposer["stopLabel"]) | undefined;
7220
+ /** Label for the stop button shown while `busy`. */
7221
+ "prop:stopLabel"?: (HelixChatComposer["stopLabel"]) | undefined;
6997
7222
  /** What sends the turn: `enter` for the Enter key, or `button` for the send
6998
7223
  button only.
6999
7224
 
@@ -7048,6 +7273,23 @@ Here rather than on each control. */
7048
7273
  /** The engine this field listens through, in place of the one
7049
7274
  `registerSpeechEngine` gave the page, or the browser's own. */
7050
7275
  "prop:speechEngine"?: (HelixChatComposer["speechEngine"]) | undefined;
7276
+ /** Examples the empty field shows in turn, in place of `placeholder`, such
7277
+ as tasks a reader might ask for. Each shows for 6.5 seconds, and a longer
7278
+ one shows longer, up to 10 seconds.
7279
+
7280
+ **Each is the field's placeholder in its turn**, so a screen reader that
7281
+ reaches the field hears the one showing. The swap runs through
7282
+ `:state(example-leaving)`, as one example leaves, and
7283
+ `:state(example-entering)`, as the next arrives.
7284
+
7285
+ **They move only while nobody is about to write, and while the reader
7286
+ can see them.** An empty field without focus moves on. Focus or text
7287
+ holds the example showing, and an example already leaving finishes its
7288
+ turn. A composer scrolled out of view holds its example, and the example
7289
+ gets its full time again when the composer comes back. Where the reader
7290
+ asked for less motion, or the page paused its motion, the first example
7291
+ stays. */
7292
+ "prop:placeholders"?: (HelixChatComposer["placeholders"]) | undefined;
7051
7293
  /** The dictation button was pressed. Cancelable: cancel it to keep the composer from listening. */
7052
7294
  "on:helix-before-listen"?: ((
7053
7295
  e: HelixChatComposerHelixBeforeListenElementEvent,
@@ -7056,6 +7298,8 @@ Here rather than on each control. */
7056
7298
  "on:helix-listen"?: ((e: HelixChatComposerHelixListenElementEvent) => void) | undefined;
7057
7299
  /** Fired when the user sends their turn, and cancelable. */
7058
7300
  "on:helix-send"?: ((e: HelixChatComposerHelixSendElementEvent) => void) | undefined;
7301
+ /** Fired when the user presses the stop button, shown in place of the send button while `busy` is set. */
7302
+ "on:helix-stop"?: ((e: HelixChatComposerHelixStopElementEvent) => void) | undefined;
7059
7303
  /** The user started or stopped writing, with `typing` saying which, as the composer's `typing` does. */
7060
7304
  "on:helix-typing"?: ((e: HelixChatComposerHelixTypingElementEvent) => void) | undefined;
7061
7305
  /** 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. */
@@ -11625,6 +11869,17 @@ export type HelixCommandHelixSelectElementEvent =
11625
11869
  HelixCommandElementEvent<HelixSelectEvent>;
11626
11870
 
11627
11871
  export type HelixCommandProps = {
11872
+ /** The panel's surface: `frosted` or `glass`, as on `Dialog`, which the
11873
+ palette opens in and hands the value to.
11874
+
11875
+ Absent is the opaque overlay surface. `glass` is the page's translucent
11876
+ ground over the theme's blur, and `frosted` the same pair turned up, so a
11877
+ page whose panels are frosted has a palette that matches. Its strength is
11878
+ the theme's, as on `Popover`, `Menu` and `Drawer`.
11879
+
11880
+ **No `transparent`, deliberately.** A palette over arbitrary page content
11881
+ is only readable because it has a ground. */
11882
+ material?: (HelixCommand["material"]) | undefined;
11628
11883
  /** Whether the element starts open. Ignored once `open` is written. */
11629
11884
  "default-open"?: (HelixCommand["defaultOpen"]) | undefined;
11630
11885
  /** Whether the element starts open. Ignored once `open` is written. */
@@ -11797,6 +12052,17 @@ write as a child. */
11797
12052
  };
11798
12053
 
11799
12054
  export type HelixCommandSolidJsProps = {
12055
+ /** The panel's surface: `frosted` or `glass`, as on `Dialog`, which the
12056
+ palette opens in and hands the value to.
12057
+
12058
+ Absent is the opaque overlay surface. `glass` is the page's translucent
12059
+ ground over the theme's blur, and `frosted` the same pair turned up, so a
12060
+ page whose panels are frosted has a palette that matches. Its strength is
12061
+ the theme's, as on `Popover`, `Menu` and `Drawer`.
12062
+
12063
+ **No `transparent`, deliberately.** A palette over arbitrary page content
12064
+ is only readable because it has a ground. */
12065
+ "prop:material"?: (HelixCommand["material"]) | undefined;
11800
12066
  /** Whether the element starts open. Ignored once `open` is written. */
11801
12067
  "bool:default-open"?: (HelixCommand["defaultOpen"]) | undefined;
11802
12068
  /** Whether the element starts open. Ignored once `open` is written. */
@@ -12071,6 +12337,36 @@ whatever its `type`. Declared here so its own page says what it holds. */
12071
12337
  value?: (HelixCopyButton["value"]) | undefined;
12072
12338
  /** */
12073
12339
  "aria-label"?: (string) | undefined;
12340
+ /** Whether a disabled button stays in the tab order, so a tooltip around it
12341
+ can say why it is disabled.
12342
+
12343
+ Set it on a button whose reason a Tooltip gives, such as a Save with no
12344
+ changes to save. While the button is disabled, it keeps focus and takes
12345
+ hover, and it refuses every press: a click, Enter and Space, and Enter in
12346
+ a field of its form. The click does not reach your listeners, and a submit
12347
+ button submits nothing. The inner control carries `aria-disabled` in place
12348
+ of the native `disabled`, so a screen reader still says it is unavailable.
12349
+ The styled button keeps the disabled look.
12350
+
12351
+ Leave it unset on a button with no reason to give. A plain disabled button
12352
+ leaves the tab order, as a native one does, and a keyboard reader skips a
12353
+ stop that does nothing. Set `pending` for the wait after a press. */
12354
+ "focusable-when-disabled"?: (HelixCopyButton["focusableWhenDisabled"]) | undefined;
12355
+ /** Whether a disabled button stays in the tab order, so a tooltip around it
12356
+ can say why it is disabled.
12357
+
12358
+ Set it on a button whose reason a Tooltip gives, such as a Save with no
12359
+ changes to save. While the button is disabled, it keeps focus and takes
12360
+ hover, and it refuses every press: a click, Enter and Space, and Enter in
12361
+ a field of its form. The click does not reach your listeners, and a submit
12362
+ button submits nothing. The inner control carries `aria-disabled` in place
12363
+ of the native `disabled`, so a screen reader still says it is unavailable.
12364
+ The styled button keeps the disabled look.
12365
+
12366
+ Leave it unset on a button with no reason to give. A plain disabled button
12367
+ leaves the tab order, as a native one does, and a keyboard reader skips a
12368
+ stop that does nothing. Set `pending` for the wait after a press. */
12369
+ focusableWhenDisabled?: (HelixCopyButton["focusableWhenDisabled"]) | undefined;
12074
12370
  /** Whether the action the button started is still running.
12075
12371
 
12076
12372
  A pending button keeps focus and stays in the tab order, and refuses every
@@ -12225,6 +12521,36 @@ whatever its `type`. Declared here so its own page says what it holds. */
12225
12521
  "prop:value"?: (HelixCopyButton["value"]) | undefined;
12226
12522
  /** */
12227
12523
  "attr:aria-label"?: (string) | undefined;
12524
+ /** Whether a disabled button stays in the tab order, so a tooltip around it
12525
+ can say why it is disabled.
12526
+
12527
+ Set it on a button whose reason a Tooltip gives, such as a Save with no
12528
+ changes to save. While the button is disabled, it keeps focus and takes
12529
+ hover, and it refuses every press: a click, Enter and Space, and Enter in
12530
+ a field of its form. The click does not reach your listeners, and a submit
12531
+ button submits nothing. The inner control carries `aria-disabled` in place
12532
+ of the native `disabled`, so a screen reader still says it is unavailable.
12533
+ The styled button keeps the disabled look.
12534
+
12535
+ Leave it unset on a button with no reason to give. A plain disabled button
12536
+ leaves the tab order, as a native one does, and a keyboard reader skips a
12537
+ stop that does nothing. Set `pending` for the wait after a press. */
12538
+ "bool:focusable-when-disabled"?: (HelixCopyButton["focusableWhenDisabled"]) | undefined;
12539
+ /** Whether a disabled button stays in the tab order, so a tooltip around it
12540
+ can say why it is disabled.
12541
+
12542
+ Set it on a button whose reason a Tooltip gives, such as a Save with no
12543
+ changes to save. While the button is disabled, it keeps focus and takes
12544
+ hover, and it refuses every press: a click, Enter and Space, and Enter in
12545
+ a field of its form. The click does not reach your listeners, and a submit
12546
+ button submits nothing. The inner control carries `aria-disabled` in place
12547
+ of the native `disabled`, so a screen reader still says it is unavailable.
12548
+ The styled button keeps the disabled look.
12549
+
12550
+ Leave it unset on a button with no reason to give. A plain disabled button
12551
+ leaves the tab order, as a native one does, and a keyboard reader skips a
12552
+ stop that does nothing. Set `pending` for the wait after a press. */
12553
+ "prop:focusableWhenDisabled"?: (HelixCopyButton["focusableWhenDisabled"]) | undefined;
12228
12554
  /** Whether the action the button started is still running.
12229
12555
 
12230
12556
  A pending button keeps focus and stays in the tab order, and refuses every
@@ -15538,6 +15864,16 @@ export type HelixDialogHelixBeforeOpenElementEvent =
15538
15864
  HelixDialogElementEvent<HelixBeforeOpenEvent>;
15539
15865
 
15540
15866
  export type HelixDialogProps = {
15867
+ /** The panel's surface: `frosted` or `glass`.
15868
+
15869
+ Absent is the opaque overlay surface. `glass` is the page's translucent
15870
+ ground over the theme's blur, and `frosted` the same pair turned up, as
15871
+ on `Popover`, `Menu`, `Drawer` and `Tooltip`, so a page whose panels are
15872
+ frosted has dialogs that match.
15873
+
15874
+ **No `transparent`, deliberately.** A dialog over arbitrary page content
15875
+ is only readable because it has a ground. */
15876
+ material?: (HelixDialog["material"]) | undefined;
15541
15877
  /** How wide the panel is allowed to be.
15542
15878
 
15543
15879
  Steps rather than a number, because a dialog's width is a fact about what is
@@ -15712,6 +16048,16 @@ survives to it and a consumer reading one back gets what they wrote. */
15712
16048
  };
15713
16049
 
15714
16050
  export type HelixDialogSolidJsProps = {
16051
+ /** The panel's surface: `frosted` or `glass`.
16052
+
16053
+ Absent is the opaque overlay surface. `glass` is the page's translucent
16054
+ ground over the theme's blur, and `frosted` the same pair turned up, as
16055
+ on `Popover`, `Menu`, `Drawer` and `Tooltip`, so a page whose panels are
16056
+ frosted has dialogs that match.
16057
+
16058
+ **No `transparent`, deliberately.** A dialog over arbitrary page content
16059
+ is only readable because it has a ground. */
16060
+ "prop:material"?: (HelixDialog["material"]) | undefined;
15715
16061
  /** How wide the panel is allowed to be.
15716
16062
 
15717
16063
  Steps rather than a number, because a dialog's width is a fact about what is
@@ -20404,6 +20750,36 @@ is the platform's `commandfor`. */
20404
20750
  commandfor?: (HelixIconButton["commandFor"]) | undefined;
20405
20751
  /** The id of the element the command is sent to. */
20406
20752
  commandFor?: (HelixIconButton["commandFor"]) | undefined;
20753
+ /** Whether a disabled button stays in the tab order, so a tooltip around it
20754
+ can say why it is disabled.
20755
+
20756
+ Set it on a button whose reason a Tooltip gives, such as a Save with no
20757
+ changes to save. While the button is disabled, it keeps focus and takes
20758
+ hover, and it refuses every press: a click, Enter and Space, and Enter in
20759
+ a field of its form. The click does not reach your listeners, and a submit
20760
+ button submits nothing. The inner control carries `aria-disabled` in place
20761
+ of the native `disabled`, so a screen reader still says it is unavailable.
20762
+ The styled button keeps the disabled look.
20763
+
20764
+ Leave it unset on a button with no reason to give. A plain disabled button
20765
+ leaves the tab order, as a native one does, and a keyboard reader skips a
20766
+ stop that does nothing. Set `pending` for the wait after a press. */
20767
+ "focusable-when-disabled"?: (HelixIconButton["focusableWhenDisabled"]) | undefined;
20768
+ /** Whether a disabled button stays in the tab order, so a tooltip around it
20769
+ can say why it is disabled.
20770
+
20771
+ Set it on a button whose reason a Tooltip gives, such as a Save with no
20772
+ changes to save. While the button is disabled, it keeps focus and takes
20773
+ hover, and it refuses every press: a click, Enter and Space, and Enter in
20774
+ a field of its form. The click does not reach your listeners, and a submit
20775
+ button submits nothing. The inner control carries `aria-disabled` in place
20776
+ of the native `disabled`, so a screen reader still says it is unavailable.
20777
+ The styled button keeps the disabled look.
20778
+
20779
+ Leave it unset on a button with no reason to give. A plain disabled button
20780
+ leaves the tab order, as a native one does, and a keyboard reader skips a
20781
+ stop that does nothing. Set `pending` for the wait after a press. */
20782
+ focusableWhenDisabled?: (HelixIconButton["focusableWhenDisabled"]) | undefined;
20407
20783
  /** Where this button's submission goes, overriding the form's own.
20408
20784
 
20409
20785
  **The five `form*` overrides ride on a native submit button that stands in
@@ -20640,6 +21016,36 @@ is the platform's `commandfor`. */
20640
21016
  "attr:commandfor"?: (HelixIconButton["commandFor"]) | undefined;
20641
21017
  /** The id of the element the command is sent to. */
20642
21018
  "prop:commandFor"?: (HelixIconButton["commandFor"]) | undefined;
21019
+ /** Whether a disabled button stays in the tab order, so a tooltip around it
21020
+ can say why it is disabled.
21021
+
21022
+ Set it on a button whose reason a Tooltip gives, such as a Save with no
21023
+ changes to save. While the button is disabled, it keeps focus and takes
21024
+ hover, and it refuses every press: a click, Enter and Space, and Enter in
21025
+ a field of its form. The click does not reach your listeners, and a submit
21026
+ button submits nothing. The inner control carries `aria-disabled` in place
21027
+ of the native `disabled`, so a screen reader still says it is unavailable.
21028
+ The styled button keeps the disabled look.
21029
+
21030
+ Leave it unset on a button with no reason to give. A plain disabled button
21031
+ leaves the tab order, as a native one does, and a keyboard reader skips a
21032
+ stop that does nothing. Set `pending` for the wait after a press. */
21033
+ "bool:focusable-when-disabled"?: (HelixIconButton["focusableWhenDisabled"]) | undefined;
21034
+ /** Whether a disabled button stays in the tab order, so a tooltip around it
21035
+ can say why it is disabled.
21036
+
21037
+ Set it on a button whose reason a Tooltip gives, such as a Save with no
21038
+ changes to save. While the button is disabled, it keeps focus and takes
21039
+ hover, and it refuses every press: a click, Enter and Space, and Enter in
21040
+ a field of its form. The click does not reach your listeners, and a submit
21041
+ button submits nothing. The inner control carries `aria-disabled` in place
21042
+ of the native `disabled`, so a screen reader still says it is unavailable.
21043
+ The styled button keeps the disabled look.
21044
+
21045
+ Leave it unset on a button with no reason to give. A plain disabled button
21046
+ leaves the tab order, as a native one does, and a keyboard reader skips a
21047
+ stop that does nothing. Set `pending` for the wait after a press. */
21048
+ "prop:focusableWhenDisabled"?: (HelixIconButton["focusableWhenDisabled"]) | undefined;
20643
21049
  /** Where this button's submission goes, overriding the form's own.
20644
21050
 
20645
21051
  **The five `form*` overrides ride on a native submit button that stands in
@@ -21290,6 +21696,10 @@ token.
21290
21696
  Empty leaves the attribute off, which is the browser's default. Set it to
21291
21697
  a token like `email` or `bday` to ask for autofill, or to `off` to refuse. */
21292
21698
  autocomplete?: (HelixInput["autocomplete"]) | undefined;
21699
+ /** Whether the browser corrects words as the reader types, as the platform's
21700
+ `autocorrect`. Turn it off, with `autocorrect="off"`, for text that is not
21701
+ prose, such as an address or a code, which corrections would change. */
21702
+ autocorrect?: (HelixInput["autocorrect"]) | undefined;
21293
21703
  /** Whether the field shows a button that empties it.
21294
21704
 
21295
21705
  Shown only while there is something to clear, because a control that does
@@ -21552,6 +21962,10 @@ token.
21552
21962
  Empty leaves the attribute off, which is the browser's default. Set it to
21553
21963
  a token like `email` or `bday` to ask for autofill, or to `off` to refuse. */
21554
21964
  "prop:autocomplete"?: (HelixInput["autocomplete"]) | undefined;
21965
+ /** Whether the browser corrects words as the reader types, as the platform's
21966
+ `autocorrect`. Turn it off, with `autocorrect="off"`, for text that is not
21967
+ prose, such as an address or a code, which corrections would change. */
21968
+ "prop:autocorrect"?: (HelixInput["autocorrect"]) | undefined;
21555
21969
  /** Whether the field shows a button that empties it.
21556
21970
 
21557
21971
  Shown only while there is something to clear, because a control that does
@@ -24531,7 +24945,10 @@ export type HelixLogProps = {
24531
24945
  - `plain` has no edge, no fill, no inset and no height of its own: the
24532
24946
  lines start where the text around them does and the log grows with
24533
24947
  them. For a log inside something that already frames it, such as an
24534
- agent's work in a chat turn's `work` slot.
24948
+ agent's work in a chat turn's `work` slot. Each step is a row with its
24949
+ status mark on that edge and its caret after the heading. A step that
24950
+ holds steps draws a rule beside them, and a step that holds lines draws
24951
+ them on a quiet surface that scrolls after `--log-step-max-block-size`.
24535
24952
 
24536
24953
  Both are writable, so a page can say which it means rather than relying
24537
24954
  on the absence of an attribute. */
@@ -24706,7 +25123,10 @@ export type HelixLogSolidJsProps = {
24706
25123
  - `plain` has no edge, no fill, no inset and no height of its own: the
24707
25124
  lines start where the text around them does and the log grows with
24708
25125
  them. For a log inside something that already frames it, such as an
24709
- agent's work in a chat turn's `work` slot.
25126
+ agent's work in a chat turn's `work` slot. Each step is a row with its
25127
+ status mark on that edge and its caret after the heading. A step that
25128
+ holds steps draws a rule beside them, and a step that holds lines draws
25129
+ them on a quiet surface that scrolls after `--log-step-max-block-size`.
24710
25130
 
24711
25131
  Both are writable, so a page can say which it means rather than relying
24712
25132
  on the absence of an attribute. */
@@ -26944,6 +27364,20 @@ export type HelixMenuHelixSelectElementEvent =
26944
27364
  HelixMenuElementEvent<HelixSelectEvent>;
26945
27365
 
26946
27366
  export type HelixMenuProps = {
27367
+ /** The panel's surface: `frosted` or `glass`.
27368
+
27369
+ Absent is the opaque overlay surface. `glass` is the page's translucent
27370
+ ground over a blur, for a page whose surfaces are glass, so a panel opened
27371
+ over a glass window is not the one opaque slab on it. `frosted` is the same
27372
+ pair turned up, a ground that admits less and a heavier blur.
27373
+
27374
+ The strength is the theme's: `--helix-material-translucent`,
27375
+ `--helix-material-translucent-strong` and `--helix-material-backdrop` are
27376
+ what the policy moves. `Drawer` and `Tooltip` carry the same attribute.
27377
+
27378
+ **No `transparent`, deliberately.** A panel floating over arbitrary page
27379
+ content is only readable because it has a ground. */
27380
+ material?: (HelixMenu["material"]) | undefined;
26947
27381
  /** The text shown and announced when there are no rows and none are loading. */
26948
27382
  "empty-text"?: (HelixMenu["emptyText"]) | undefined;
26949
27383
  /** The text shown and announced when there are no rows and none are loading. */
@@ -27097,6 +27531,20 @@ is sent on the menu when a reader's choice changes it. */
27097
27531
  };
27098
27532
 
27099
27533
  export type HelixMenuSolidJsProps = {
27534
+ /** The panel's surface: `frosted` or `glass`.
27535
+
27536
+ Absent is the opaque overlay surface. `glass` is the page's translucent
27537
+ ground over a blur, for a page whose surfaces are glass, so a panel opened
27538
+ over a glass window is not the one opaque slab on it. `frosted` is the same
27539
+ pair turned up, a ground that admits less and a heavier blur.
27540
+
27541
+ The strength is the theme's: `--helix-material-translucent`,
27542
+ `--helix-material-translucent-strong` and `--helix-material-backdrop` are
27543
+ what the policy moves. `Drawer` and `Tooltip` carry the same attribute.
27544
+
27545
+ **No `transparent`, deliberately.** A panel floating over arbitrary page
27546
+ content is only readable because it has a ground. */
27547
+ "prop:material"?: (HelixMenu["material"]) | undefined;
27100
27548
  /** The text shown and announced when there are no rows and none are loading. */
27101
27549
  "attr:empty-text"?: (HelixMenu["emptyText"]) | undefined;
27102
27550
  /** The text shown and announced when there are no rows and none are loading. */
@@ -27640,6 +28088,43 @@ fair summary of a task and a poor one of a quantity. */
27640
28088
  textContent?: (string | number) | undefined;
27641
28089
  };
27642
28090
 
28091
+ export type HelixMeterSegmentProps = {
28092
+ /** What the segment is, such as "Tools", which names the slice when a pointer
28093
+ rests on it.
28094
+
28095
+ Not announced: see the note on a meter's children above. */
28096
+ label?: (HelixMeterSegment["label"]) | undefined;
28097
+ /** What the segment means, as it does on a callout. Takes the tone's color in
28098
+ place of the next color in the series. */
28099
+ tone?: (HelixMeterSegment["tone"]) | undefined;
28100
+ /** How much of the meter's range the segment takes, in the units of the meter's
28101
+ `min` and `max`.
28102
+
28103
+ A value that is not a number, or is below zero, draws nothing. */
28104
+ value?: (HelixMeterSegment["value"]) | undefined;
28105
+ };
28106
+
28107
+ export type HelixMeterSegmentSolidJsProps = {
28108
+ /** What the segment is, such as "Tools", which names the slice when a pointer
28109
+ rests on it.
28110
+
28111
+ Not announced: see the note on a meter's children above. */
28112
+ "prop:label"?: (HelixMeterSegment["label"]) | undefined;
28113
+ /** What the segment means, as it does on a callout. Takes the tone's color in
28114
+ place of the next color in the series. */
28115
+ "prop:tone"?: (HelixMeterSegment["tone"]) | undefined;
28116
+ /** How much of the meter's range the segment takes, in the units of the meter's
28117
+ `min` and `max`.
28118
+
28119
+ A value that is not a number, or is below zero, draws nothing. */
28120
+ "prop:value"?: (HelixMeterSegment["value"]) | undefined;
28121
+
28122
+ /** Set the innerHTML of the element */
28123
+ innerHTML?: (string) | undefined;
28124
+ /** Set the textContent of the element */
28125
+ textContent?: (string | number) | undefined;
28126
+ };
28127
+
27643
28128
  /** `HelixMotionToggle` component event */
27644
28129
  export type HelixMotionToggleElementEvent<E = Event> = TypedEvent<
27645
28130
  HelixMotionToggle,
@@ -30711,6 +31196,20 @@ export type HelixPopoverHelixBeforeOpenElementEvent =
30711
31196
  HelixPopoverElementEvent<HelixBeforeOpenEvent>;
30712
31197
 
30713
31198
  export type HelixPopoverProps = {
31199
+ /** The panel's surface: `frosted` or `glass`.
31200
+
31201
+ Absent is the opaque overlay surface. `glass` is the page's translucent
31202
+ ground over a blur, for a page whose surfaces are glass, so a panel opened
31203
+ over a glass window is not the one opaque slab on it. `frosted` is the same
31204
+ pair turned up, a ground that admits less and a heavier blur.
31205
+
31206
+ The strength is the theme's: `--helix-material-translucent`,
31207
+ `--helix-material-translucent-strong` and `--helix-material-backdrop` are
31208
+ what the policy moves. `Drawer` and `Tooltip` carry the same attribute.
31209
+
31210
+ **No `transparent`, deliberately.** A panel floating over arbitrary page
31211
+ content is only readable because it has a ground. */
31212
+ material?: (HelixPopover["material"]) | undefined;
30714
31213
  /** How the panel is set apart from the content under it.
30715
31214
 
30716
31215
  One of the axis's four values, which is all this surface has meaning for: a
@@ -30800,6 +31299,20 @@ It moves if that side does not fit. */
30800
31299
  };
30801
31300
 
30802
31301
  export type HelixPopoverSolidJsProps = {
31302
+ /** The panel's surface: `frosted` or `glass`.
31303
+
31304
+ Absent is the opaque overlay surface. `glass` is the page's translucent
31305
+ ground over a blur, for a page whose surfaces are glass, so a panel opened
31306
+ over a glass window is not the one opaque slab on it. `frosted` is the same
31307
+ pair turned up, a ground that admits less and a heavier blur.
31308
+
31309
+ The strength is the theme's: `--helix-material-translucent`,
31310
+ `--helix-material-translucent-strong` and `--helix-material-backdrop` are
31311
+ what the policy moves. `Drawer` and `Tooltip` carry the same attribute.
31312
+
31313
+ **No `transparent`, deliberately.** A panel floating over arbitrary page
31314
+ content is only readable because it has a ground. */
31315
+ "prop:material"?: (HelixPopover["material"]) | undefined;
30803
31316
  /** How the panel is set apart from the content under it.
30804
31317
 
30805
31318
  One of the axis's four values, which is all this surface has meaning for: a
@@ -35502,6 +36015,13 @@ shows the bars behind it. Absent is the filled bar, per the rule that a
35502
36015
  reflected property takes no default, and `solid` writes it out. A
35503
36016
  renderer draws the bars the same way.
35504
36017
 
36018
+ **`muted` draws every bar in the neutral ink**, so the one bar whose cell
36019
+ names a tone, such as `data-tone="primary"`, is the bar in color, with a
36020
+ soft glow in its tone: one reading lit among the others, such as today
36021
+ among a week. Each top takes the most ink and each side less, as a
36022
+ colored bar's faces do. A renderer draws the neutral bars and the toned
36023
+ one, without the glow.
36024
+
35505
36025
  It composes with `material`: emphasis decides what is drawn, and material
35506
36026
  how much of it comes through. The outline on the bar the keys rest on
35507
36027
  keeps its own ink. */
@@ -35612,13 +36132,42 @@ press, and the sound is made only then. */
35612
36132
  for no one else. Reflected, because the stylesheet draws it by the
35613
36133
  attribute, and a page that sets the property, as React does, writes none. */
35614
36134
  summary?: (HelixSpatialBarChart["summary"]) | undefined;
35615
- /** Draws no box: no edges, grid, numbers, or names, so the readings stand
35616
- alone and fill the plot, as a picture on a product's own page does. The
36135
+ /** Grows the bars up from the floor the first time the chart comes into
36136
+ view with readings, each category a little after the one before it, so
36137
+ the drawing arrives the way a page's own picture does. The growth is
36138
+ fast at first, slows to rest, and never passes a bar's value.
36139
+
36140
+ Under `prefers-reduced-motion`, or where the page has paused its motion
36141
+ through `pauseMotion` or `Motion Toggle`, the bars stand at their height
36142
+ from the start. A later table draws the bars it already had at their
36143
+ height, and grows the bars it adds, each from the floor, so a reading that
36144
+ arrives while the chart is in view arrives the same way. */
36145
+ grow?: (HelixSpatialBarChart["grow"]) | undefined;
36146
+ /** Grows the bars again each time the chart comes back into view after it
36147
+ left it, as a pane does when it is opened again, where `grow` alone grows
36148
+ them the first time only. Only a chart that grows takes it.
36149
+
36150
+ While it is out of view the bars stand at the floor, so the first frame
36151
+ after it returns is the start of the growth and never a flash at full
36152
+ height. */
36153
+ "grow-again"?: (HelixSpatialBarChart["growAgain"]) | undefined;
36154
+ /** Grows the bars again each time the chart comes back into view after it
36155
+ left it, as a pane does when it is opened again, where `grow` alone grows
36156
+ them the first time only. Only a chart that grows takes it.
36157
+
36158
+ While it is out of view the bars stand at the floor, so the first frame
36159
+ after it returns is the start of the growth and never a flash at full
36160
+ height. */
36161
+ growAgain?: (HelixSpatialBarChart["growAgain"]) | undefined;
36162
+ /** Draws no box: no edges, grid, numbers, or names, and in a `row` no
36163
+ floor, so the readings stand alone and fill the plot, as a picture on a
36164
+ product's own page does. The
35617
36165
  table, the summary, the tooltip, and the keys still carry every value,
35618
36166
  and a renderer draws no box either. */
35619
36167
  "no-box"?: (HelixSpatialBarChart["noBox"]) | undefined;
35620
- /** Draws no box: no edges, grid, numbers, or names, so the readings stand
35621
- alone and fill the plot, as a picture on a product's own page does. The
36168
+ /** Draws no box: no edges, grid, numbers, or names, and in a `row` no
36169
+ floor, so the readings stand alone and fill the plot, as a picture on a
36170
+ product's own page does. The
35622
36171
  table, the summary, the tooltip, and the keys still carry every value,
35623
36172
  and a renderer draws no box either. */
35624
36173
  noBox?: (HelixSpatialBarChart["noBox"]) | undefined;
@@ -35632,6 +36181,15 @@ and a renderer draws no box either. */
35632
36181
  "plot-label"?: (HelixSpatialBarChart["plotLabel"]) | undefined;
35633
36182
  /** The plot's name where the chart has none: no `aria-label`, `label`, or table caption. */
35634
36183
  plotLabel?: (HelixSpatialBarChart["plotLabel"]) | undefined;
36184
+ /** Stacks a category's series into one column, each block standing on the
36185
+ ones before it, so the column is as tall as the category's total, as a
36186
+ flat `Bar Chart` stacks them.
36187
+
36188
+ Absent stands the series one behind another in depth. Stacked, every
36189
+ series stands in the front row, so none hides another, and the parts of
36190
+ one total read together. A negative reading hangs below zero on the
36191
+ negatives before it. The scale fits the stacks. */
36192
+ stacked?: (HelixSpatialBarChart["stacked"]) | undefined;
35635
36193
  /** The `summary` part's sentence. `{count}`, `{series}`, and `{categories}`
35636
36194
  are the number of bars, series, and categories, written in the locale,
35637
36195
  and `{low}` and `{high}` the lowest and the highest value. */
@@ -35640,6 +36198,38 @@ and `{low}` and `{high}` the lowest and the highest value. */
35640
36198
  are the number of bars, series, and categories, written in the locale,
35641
36199
  and `{low}` and `{high}` the lowest and the highest value. */
35642
36200
  summaryLabel?: (HelixSpatialBarChart["summaryLabel"]) | undefined;
36201
+ /** How the bars stand.
36202
+
36203
+ Unset, they stand on a grid of categories across and series in depth,
36204
+ in a box the camera looks at from a corner, so the grid recedes at an
36205
+ angle. `row` lays the categories in a straight line across the page and
36206
+ turns each bar to the camera, showing its top and two sides, for one row
36207
+ of readings in a small space such as a pane: turning the view turns each
36208
+ bar where it stands, and the row stays level. It is the chart's own
36209
+ drawing that lays the row: a renderer connected through
36210
+ `@fusion.dev/helix-plot` stands the bars on the grid.
36211
+
36212
+ `diagonal` is the same row climbing to the right as it recedes, each
36213
+ place a step further back than the one before, as a row of days on a
36214
+ product's page is drawn: the row rises one part in five across the page
36215
+ from any turn, and its floor and names climb with it. A row whose bars
36216
+ have a size climbs at most a quarter of the plot's height, so the bars
36217
+ of a long row keep theirs.
36218
+
36219
+ **A row draws its floor in place of a box**: each place as an outline a
36220
+ little wider than its bar, and each category's name under it, as many
36221
+ names as fit without touching. A name whose bar names a tone is written
36222
+ first, in that tone. `no-box` leaves the floor and the names out.
36223
+
36224
+ **A `column-gap` on the `fallback` part gives a row's bars one width**,
36225
+ which the styled tier sets from `--spatial-bar-chart-bar-size`: one bar
36226
+ stands as wide as each of twenty, the row is as long as its bars and
36227
+ centered, the tallest bar stands as high as the plot has room for and
36228
+ no taller than the row is long and a quarter again, so one bar stands
36229
+ as a block, and `fits` says how many bars the plot holds, so a page
36230
+ can give it the latest of a longer table. It is read when the plot's
36231
+ size changes. */
36232
+ variant?: (HelixSpatialBarChart["variant"]) | undefined;
35643
36233
  /** The readings as data, in the shape of a table, where the page has no
35644
36234
  table to point `for` at. `for` wins where both are set.
35645
36235
 
@@ -35691,6 +36281,13 @@ shows the bars behind it. Absent is the filled bar, per the rule that a
35691
36281
  reflected property takes no default, and `solid` writes it out. A
35692
36282
  renderer draws the bars the same way.
35693
36283
 
36284
+ **`muted` draws every bar in the neutral ink**, so the one bar whose cell
36285
+ names a tone, such as `data-tone="primary"`, is the bar in color, with a
36286
+ soft glow in its tone: one reading lit among the others, such as today
36287
+ among a week. Each top takes the most ink and each side less, as a
36288
+ colored bar's faces do. A renderer draws the neutral bars and the toned
36289
+ one, without the glow.
36290
+
35694
36291
  It composes with `material`: emphasis decides what is drawn, and material
35695
36292
  how much of it comes through. The outline on the bar the keys rest on
35696
36293
  keeps its own ink. */
@@ -35801,13 +36398,42 @@ press, and the sound is made only then. */
35801
36398
  for no one else. Reflected, because the stylesheet draws it by the
35802
36399
  attribute, and a page that sets the property, as React does, writes none. */
35803
36400
  "prop:summary"?: (HelixSpatialBarChart["summary"]) | undefined;
35804
- /** Draws no box: no edges, grid, numbers, or names, so the readings stand
35805
- alone and fill the plot, as a picture on a product's own page does. The
36401
+ /** Grows the bars up from the floor the first time the chart comes into
36402
+ view with readings, each category a little after the one before it, so
36403
+ the drawing arrives the way a page's own picture does. The growth is
36404
+ fast at first, slows to rest, and never passes a bar's value.
36405
+
36406
+ Under `prefers-reduced-motion`, or where the page has paused its motion
36407
+ through `pauseMotion` or `Motion Toggle`, the bars stand at their height
36408
+ from the start. A later table draws the bars it already had at their
36409
+ height, and grows the bars it adds, each from the floor, so a reading that
36410
+ arrives while the chart is in view arrives the same way. */
36411
+ "prop:grow"?: (HelixSpatialBarChart["grow"]) | undefined;
36412
+ /** Grows the bars again each time the chart comes back into view after it
36413
+ left it, as a pane does when it is opened again, where `grow` alone grows
36414
+ them the first time only. Only a chart that grows takes it.
36415
+
36416
+ While it is out of view the bars stand at the floor, so the first frame
36417
+ after it returns is the start of the growth and never a flash at full
36418
+ height. */
36419
+ "bool:grow-again"?: (HelixSpatialBarChart["growAgain"]) | undefined;
36420
+ /** Grows the bars again each time the chart comes back into view after it
36421
+ left it, as a pane does when it is opened again, where `grow` alone grows
36422
+ them the first time only. Only a chart that grows takes it.
36423
+
36424
+ While it is out of view the bars stand at the floor, so the first frame
36425
+ after it returns is the start of the growth and never a flash at full
36426
+ height. */
36427
+ "prop:growAgain"?: (HelixSpatialBarChart["growAgain"]) | undefined;
36428
+ /** Draws no box: no edges, grid, numbers, or names, and in a `row` no
36429
+ floor, so the readings stand alone and fill the plot, as a picture on a
36430
+ product's own page does. The
35806
36431
  table, the summary, the tooltip, and the keys still carry every value,
35807
36432
  and a renderer draws no box either. */
35808
36433
  "bool:no-box"?: (HelixSpatialBarChart["noBox"]) | undefined;
35809
- /** Draws no box: no edges, grid, numbers, or names, so the readings stand
35810
- alone and fill the plot, as a picture on a product's own page does. The
36434
+ /** Draws no box: no edges, grid, numbers, or names, and in a `row` no
36435
+ floor, so the readings stand alone and fill the plot, as a picture on a
36436
+ product's own page does. The
35811
36437
  table, the summary, the tooltip, and the keys still carry every value,
35812
36438
  and a renderer draws no box either. */
35813
36439
  "prop:noBox"?: (HelixSpatialBarChart["noBox"]) | undefined;
@@ -35821,6 +36447,15 @@ and a renderer draws no box either. */
35821
36447
  "attr:plot-label"?: (HelixSpatialBarChart["plotLabel"]) | undefined;
35822
36448
  /** The plot's name where the chart has none: no `aria-label`, `label`, or table caption. */
35823
36449
  "prop:plotLabel"?: (HelixSpatialBarChart["plotLabel"]) | undefined;
36450
+ /** Stacks a category's series into one column, each block standing on the
36451
+ ones before it, so the column is as tall as the category's total, as a
36452
+ flat `Bar Chart` stacks them.
36453
+
36454
+ Absent stands the series one behind another in depth. Stacked, every
36455
+ series stands in the front row, so none hides another, and the parts of
36456
+ one total read together. A negative reading hangs below zero on the
36457
+ negatives before it. The scale fits the stacks. */
36458
+ "prop:stacked"?: (HelixSpatialBarChart["stacked"]) | undefined;
35824
36459
  /** The `summary` part's sentence. `{count}`, `{series}`, and `{categories}`
35825
36460
  are the number of bars, series, and categories, written in the locale,
35826
36461
  and `{low}` and `{high}` the lowest and the highest value. */
@@ -35829,6 +36464,38 @@ and `{low}` and `{high}` the lowest and the highest value. */
35829
36464
  are the number of bars, series, and categories, written in the locale,
35830
36465
  and `{low}` and `{high}` the lowest and the highest value. */
35831
36466
  "prop:summaryLabel"?: (HelixSpatialBarChart["summaryLabel"]) | undefined;
36467
+ /** How the bars stand.
36468
+
36469
+ Unset, they stand on a grid of categories across and series in depth,
36470
+ in a box the camera looks at from a corner, so the grid recedes at an
36471
+ angle. `row` lays the categories in a straight line across the page and
36472
+ turns each bar to the camera, showing its top and two sides, for one row
36473
+ of readings in a small space such as a pane: turning the view turns each
36474
+ bar where it stands, and the row stays level. It is the chart's own
36475
+ drawing that lays the row: a renderer connected through
36476
+ `@fusion.dev/helix-plot` stands the bars on the grid.
36477
+
36478
+ `diagonal` is the same row climbing to the right as it recedes, each
36479
+ place a step further back than the one before, as a row of days on a
36480
+ product's page is drawn: the row rises one part in five across the page
36481
+ from any turn, and its floor and names climb with it. A row whose bars
36482
+ have a size climbs at most a quarter of the plot's height, so the bars
36483
+ of a long row keep theirs.
36484
+
36485
+ **A row draws its floor in place of a box**: each place as an outline a
36486
+ little wider than its bar, and each category's name under it, as many
36487
+ names as fit without touching. A name whose bar names a tone is written
36488
+ first, in that tone. `no-box` leaves the floor and the names out.
36489
+
36490
+ **A `column-gap` on the `fallback` part gives a row's bars one width**,
36491
+ which the styled tier sets from `--spatial-bar-chart-bar-size`: one bar
36492
+ stands as wide as each of twenty, the row is as long as its bars and
36493
+ centered, the tallest bar stands as high as the plot has room for and
36494
+ no taller than the row is long and a quarter again, so one bar stands
36495
+ as a block, and `fits` says how many bars the plot holds, so a page
36496
+ can give it the latest of a longer table. It is read when the plot's
36497
+ size changes. */
36498
+ "prop:variant"?: (HelixSpatialBarChart["variant"]) | undefined;
35832
36499
  /** The readings as data, in the shape of a table, where the page has no
35833
36500
  table to point `for` at. `for` wins where both are set.
35834
36501
 
@@ -39215,6 +39882,14 @@ own. */
39215
39882
  /** How much the glow around the strands adds, as a multiplier. `0` draws the
39216
39883
  strands alone, crisp and dimmer, and `1` is the default glow. */
39217
39884
  bloom?: (HelixStrands["bloom"]) | undefined;
39885
+ /** Whether the light is drawn alone, without the ground under it, so what is
39886
+ behind the element shows through, such as a translucent pane or a window's
39887
+ glass. The ground still says which way the page runs: light added on a
39888
+ dark one, ink on a light one.
39889
+
39890
+ Reflected because the stylesheet selects on it: the band under the canvas
39891
+ shows only while the element falls back, and loses its ground too. */
39892
+ clear?: (HelixStrands["clear"]) | undefined;
39218
39893
  /** How far apart the brightest and dimmest strands are, from `0`, most of
39219
39894
  them alike, to `1`, a few burning bright over many faint ones. Clamped to
39220
39895
  that range. The ribbon as a whole keeps its strength. */
@@ -39280,6 +39955,14 @@ own. */
39280
39955
  /** How much the glow around the strands adds, as a multiplier. `0` draws the
39281
39956
  strands alone, crisp and dimmer, and `1` is the default glow. */
39282
39957
  "prop:bloom"?: (HelixStrands["bloom"]) | undefined;
39958
+ /** Whether the light is drawn alone, without the ground under it, so what is
39959
+ behind the element shows through, such as a translucent pane or a window's
39960
+ glass. The ground still says which way the page runs: light added on a
39961
+ dark one, ink on a light one.
39962
+
39963
+ Reflected because the stylesheet selects on it: the band under the canvas
39964
+ shows only while the element falls back, and loses its ground too. */
39965
+ "prop:clear"?: (HelixStrands["clear"]) | undefined;
39283
39966
  /** How far apart the brightest and dimmest strands are, from `0`, most of
39284
39967
  them alike, to `1`, a few burning bright over many faint ones. Clamped to
39285
39968
  that range. The ribbon as a whole keeps its strength. */
@@ -40720,6 +41403,33 @@ export type HelixTabsHelixSelectElementEvent =
40720
41403
  HelixTabsElementEvent<HelixSelectEvent>;
40721
41404
 
40722
41405
  export type HelixTabsProps = {
41406
+ /** When the close mark of each `dismissible` tab shows.
41407
+
41408
+ Unset, or `always`, every mark shows. `hover` shows a tab's mark while it
41409
+ is current, under the pointer, or holds focus, and keeps its room on every
41410
+ tab, so the labels do not move as the marks come and go. For a strip of
41411
+ many dismissible tabs, where a mark on each reads as a row of crosses. A
41412
+ keyboard closes a tab with Delete whether its mark shows or not. */
41413
+ "dismiss-marks"?: (HelixTabs["dismissMarks"]) | undefined;
41414
+ /** When the close mark of each `dismissible` tab shows.
41415
+
41416
+ Unset, or `always`, every mark shows. `hover` shows a tab's mark while it
41417
+ is current, under the pointer, or holds focus, and keeps its room on every
41418
+ tab, so the labels do not move as the marks come and go. For a strip of
41419
+ many dismissible tabs, where a mark on each reads as a row of crosses. A
41420
+ keyboard closes a tab with Delete whether its mark shows or not. */
41421
+ dismissMarks?: (HelixTabs["dismissMarks"]) | undefined;
41422
+ /** How loud the mark on the current tab is.
41423
+
41424
+ Unset is the mark `variant` draws at rest. `subtle` is a tint with no
41425
+ edge or shadow: the raised pill becomes a wash, the `segmented` track's
41426
+ pill does the same inside it, and the `underlined` bar takes the
41427
+ foreground's ink in place of the primary color. For tabs inside other
41428
+ chrome, where a raised mark reads as a control laid on top of it.
41429
+
41430
+ Independent of `variant`, since each of its marks has a quiet form: the two
41431
+ answer different questions, which is the test the axis registry applies. */
41432
+ emphasis?: (HelixTabs["emphasis"]) | undefined;
40723
41433
  /** The `value` of the current item.
40724
41434
 
40725
41435
  Not `option.active`, which is the option the keyboard is on: that is a
@@ -40795,6 +41505,33 @@ consumer's server markup does not already have. */
40795
41505
  };
40796
41506
 
40797
41507
  export type HelixTabsSolidJsProps = {
41508
+ /** When the close mark of each `dismissible` tab shows.
41509
+
41510
+ Unset, or `always`, every mark shows. `hover` shows a tab's mark while it
41511
+ is current, under the pointer, or holds focus, and keeps its room on every
41512
+ tab, so the labels do not move as the marks come and go. For a strip of
41513
+ many dismissible tabs, where a mark on each reads as a row of crosses. A
41514
+ keyboard closes a tab with Delete whether its mark shows or not. */
41515
+ "attr:dismiss-marks"?: (HelixTabs["dismissMarks"]) | undefined;
41516
+ /** When the close mark of each `dismissible` tab shows.
41517
+
41518
+ Unset, or `always`, every mark shows. `hover` shows a tab's mark while it
41519
+ is current, under the pointer, or holds focus, and keeps its room on every
41520
+ tab, so the labels do not move as the marks come and go. For a strip of
41521
+ many dismissible tabs, where a mark on each reads as a row of crosses. A
41522
+ keyboard closes a tab with Delete whether its mark shows or not. */
41523
+ "prop:dismissMarks"?: (HelixTabs["dismissMarks"]) | undefined;
41524
+ /** How loud the mark on the current tab is.
41525
+
41526
+ Unset is the mark `variant` draws at rest. `subtle` is a tint with no
41527
+ edge or shadow: the raised pill becomes a wash, the `segmented` track's
41528
+ pill does the same inside it, and the `underlined` bar takes the
41529
+ foreground's ink in place of the primary color. For tabs inside other
41530
+ chrome, where a raised mark reads as a control laid on top of it.
41531
+
41532
+ Independent of `variant`, since each of its marks has a quiet form: the two
41533
+ answer different questions, which is the test the axis registry applies. */
41534
+ "prop:emphasis"?: (HelixTabs["emphasis"]) | undefined;
40798
41535
  /** The `value` of the current item.
40799
41536
 
40800
41537
  Not `option.active`, which is the option the keyboard is on: that is a
@@ -45851,6 +46588,10 @@ appeared in the server's markup for every tree anybody rendered, which is
45851
46588
  the same fault `href` and `target` had on `Button`. The resting arrangement
45852
46589
  is the absence of the attribute, and the stylesheet only asks about `end`.
45853
46590
 
46591
+ `label` sets the chevron against the end of a branch's name, where the name
46592
+ takes only its own width, and leaves the `end` slot at the row's far side.
46593
+ A leaf is unchanged, since it has no chevron.
46594
+
45854
46595
  It is worth owning rather than leaving to `::part(toggle)`, which a
45855
46596
  consumer could reach for: the naive version is `order` plus an auto margin,
45856
46597
  and the row's `end` slot already carries an auto margin of its own, so the
@@ -45873,6 +46614,10 @@ appeared in the server's markup for every tree anybody rendered, which is
45873
46614
  the same fault `href` and `target` had on `Button`. The resting arrangement
45874
46615
  is the absence of the attribute, and the stylesheet only asks about `end`.
45875
46616
 
46617
+ `label` sets the chevron against the end of a branch's name, where the name
46618
+ takes only its own width, and leaves the `end` slot at the row's far side.
46619
+ A leaf is unchanged, since it has no chevron.
46620
+
45876
46621
  It is worth owning rather than leaving to `::part(toggle)`, which a
45877
46622
  consumer could reach for: the naive version is `order` plus an auto margin,
45878
46623
  and the row's `end` slot already carries an auto margin of its own, so the
@@ -46037,6 +46782,10 @@ appeared in the server's markup for every tree anybody rendered, which is
46037
46782
  the same fault `href` and `target` had on `Button`. The resting arrangement
46038
46783
  is the absence of the attribute, and the stylesheet only asks about `end`.
46039
46784
 
46785
+ `label` sets the chevron against the end of a branch's name, where the name
46786
+ takes only its own width, and leaves the `end` slot at the row's far side.
46787
+ A leaf is unchanged, since it has no chevron.
46788
+
46040
46789
  It is worth owning rather than leaving to `::part(toggle)`, which a
46041
46790
  consumer could reach for: the naive version is `order` plus an auto margin,
46042
46791
  and the row's `end` slot already carries an auto margin of its own, so the
@@ -46059,6 +46808,10 @@ appeared in the server's markup for every tree anybody rendered, which is
46059
46808
  the same fault `href` and `target` had on `Button`. The resting arrangement
46060
46809
  is the absence of the attribute, and the stylesheet only asks about `end`.
46061
46810
 
46811
+ `label` sets the chevron against the end of a branch's name, where the name
46812
+ takes only its own width, and leaves the `end` slot at the row's far side.
46813
+ A leaf is unchanged, since it has no chevron.
46814
+
46062
46815
  It is worth owning rather than leaving to `::part(toggle)`, which a
46063
46816
  consumer could reach for: the naive version is `order` plus an auto margin,
46064
46817
  and the row's `end` slot already carries an auto margin of its own, so the
@@ -48198,6 +48951,91 @@ it is unset, the header is the name as text. */
48198
48951
  textContent?: (string | number) | undefined;
48199
48952
  };
48200
48953
 
48954
+ export type HelixVoiceLevelProps = {
48955
+ /** How loud each frequency band is, from `0` to `1`, lowest band first.
48956
+
48957
+ Each bar of the spectrum follows one band. Where there are more or fewer
48958
+ bands than bars, each bar reads between the two nearest bands. Empty draws
48959
+ every bar from `level`. Written as an attribute, the numbers are separated
48960
+ by spaces or commas: `bands="0.1 0.4 0.6 0.3"`. Assign an array to the
48961
+ property for readings that change many times a second. */
48962
+ bands?: (HelixVoiceLevel["bands"]) | undefined;
48963
+ /** The name where `label` is empty. Translate it with the rest of your
48964
+ interface. */
48965
+ "fallback-label"?: (HelixVoiceLevel["fallbackLabel"]) | undefined;
48966
+ /** The name where `label` is empty. Translate it with the rest of your
48967
+ interface. */
48968
+ fallbackLabel?: (HelixVoiceLevel["fallbackLabel"]) | undefined;
48969
+ /** The name read by screen readers, such as "Your voice". Defaults to
48970
+ `fallbackLabel`. */
48971
+ label?: (HelixVoiceLevel["label"]) | undefined;
48972
+ /** How loud the voice is, from `0` for silence to `1`.
48973
+
48974
+ It sets how far the waves swing, the length of the still bar under
48975
+ `prefers-reduced-motion`, and every bar of a spectrum that has no
48976
+ `bands`. A value outside the range is drawn at the nearer end. */
48977
+ level?: (HelixVoiceLevel["level"]) | undefined;
48978
+ /** Draws the readings as a still picture: each bar at its band and the waves
48979
+ at one fixed moment, swung as far as `level`.
48980
+
48981
+ For a level that holds, such as the loudness of a recorded clip or a
48982
+ picture of the drawing. No frame loop runs, and each new reading is drawn
48983
+ at once with no easing. Because nothing moves, the drawing is the same
48984
+ under `prefers-reduced-motion`. Clearing it starts the motion from the
48985
+ readings as they are. */
48986
+ still?: (HelixVoiceLevel["still"]) | undefined;
48987
+ /** The drawing: a row of bars, one for each band, or three moving waves.
48988
+
48989
+ Reflected because the stylesheet sizes each drawing differently. Absent
48990
+ is `spectrum`, the resting value, which selects nothing. */
48991
+ variant?: (HelixVoiceLevel["variant"]) | undefined;
48992
+ };
48993
+
48994
+ export type HelixVoiceLevelSolidJsProps = {
48995
+ /** How loud each frequency band is, from `0` to `1`, lowest band first.
48996
+
48997
+ Each bar of the spectrum follows one band. Where there are more or fewer
48998
+ bands than bars, each bar reads between the two nearest bands. Empty draws
48999
+ every bar from `level`. Written as an attribute, the numbers are separated
49000
+ by spaces or commas: `bands="0.1 0.4 0.6 0.3"`. Assign an array to the
49001
+ property for readings that change many times a second. */
49002
+ "prop:bands"?: (HelixVoiceLevel["bands"]) | undefined;
49003
+ /** The name where `label` is empty. Translate it with the rest of your
49004
+ interface. */
49005
+ "attr:fallback-label"?: (HelixVoiceLevel["fallbackLabel"]) | undefined;
49006
+ /** The name where `label` is empty. Translate it with the rest of your
49007
+ interface. */
49008
+ "prop:fallbackLabel"?: (HelixVoiceLevel["fallbackLabel"]) | undefined;
49009
+ /** The name read by screen readers, such as "Your voice". Defaults to
49010
+ `fallbackLabel`. */
49011
+ "prop:label"?: (HelixVoiceLevel["label"]) | undefined;
49012
+ /** How loud the voice is, from `0` for silence to `1`.
49013
+
49014
+ It sets how far the waves swing, the length of the still bar under
49015
+ `prefers-reduced-motion`, and every bar of a spectrum that has no
49016
+ `bands`. A value outside the range is drawn at the nearer end. */
49017
+ "prop:level"?: (HelixVoiceLevel["level"]) | undefined;
49018
+ /** Draws the readings as a still picture: each bar at its band and the waves
49019
+ at one fixed moment, swung as far as `level`.
49020
+
49021
+ For a level that holds, such as the loudness of a recorded clip or a
49022
+ picture of the drawing. No frame loop runs, and each new reading is drawn
49023
+ at once with no easing. Because nothing moves, the drawing is the same
49024
+ under `prefers-reduced-motion`. Clearing it starts the motion from the
49025
+ readings as they are. */
49026
+ "prop:still"?: (HelixVoiceLevel["still"]) | undefined;
49027
+ /** The drawing: a row of bars, one for each band, or three moving waves.
49028
+
49029
+ Reflected because the stylesheet sizes each drawing differently. Absent
49030
+ is `spectrum`, the resting value, which selects nothing. */
49031
+ "prop:variant"?: (HelixVoiceLevel["variant"]) | undefined;
49032
+
49033
+ /** Set the innerHTML of the element */
49034
+ innerHTML?: (string) | undefined;
49035
+ /** Set the textContent of the element */
49036
+ textContent?: (string | number) | undefined;
49037
+ };
49038
+
48201
49039
  export type CustomElements<F extends Framework = "other"> = {
48202
49040
  /**
48203
49041
  * The open and close transition animates `grid-template-rows` from `0fr` to
@@ -50350,7 +51188,7 @@ export type CustomElements<F extends Framework = "other"> = {
50350
51188
  * - `expand`: The button after the first crumb of a folded slotted trail, which shows the folded crumbs.
50351
51189
  * - `fold-separator`: The chevron before that button.
50352
51190
  * - `link`: The crumb itself, which is an `<a>` where `href` is set.
50353
- * - `separator-mark`: The chevron between crumbs, shown when no separator is slotted.
51191
+ * - `separator-mark`: The chevron between crumbs, or the slash under the trail's `separator="slash"`, shown when no separator is slotted.
50354
51192
  *
50355
51193
  * ## CSS States
50356
51194
  *
@@ -50392,6 +51230,18 @@ export type CustomElements<F extends Framework = "other"> = {
50392
51230
  * - `max-items`/`maxItems`: The most crumbs a trail drawn from `items` shows before it folds its middle
50393
51231
  * into one, counting the first and the last. Unset, it never folds. At least
50394
51232
  * 2, so the first crumb and the current page always show.
51233
+ * - `separator`: The mark between one crumb and the next, for the whole trail. Unset is a
51234
+ * chevron; `slash` is a slash, as a path or a repository and its branch is
51235
+ * written.
51236
+ *
51237
+ * **On the trail rather than on each crumb**, because the marks are one
51238
+ * decision: a trail whose separators differ from crumb to crumb is a
51239
+ * mistake, and a trail drawn from `items` has no crumb of yours to set it
51240
+ * on. A crumb's own `separator` slot still replaces its mark, for the rare
51241
+ * crumb that needs something else.
51242
+ *
51243
+ * Optional and reflected, per the rule that a reflected property takes no
51244
+ * default, so a stylesheet can select on it.
50395
51245
  * - `items`: The trail as data, drawn as crumbs before any you slot. The last item is the
50396
51246
  * current page.
50397
51247
  *
@@ -50446,7 +51296,7 @@ export type CustomElements<F extends Framework = "other"> = {
50446
51296
  * - `crumb-fold-separator`: The chevron before that button.
50447
51297
  * - `crumb-link`: The link, or the current page's words, of a crumb drawn from `items`.
50448
51298
  * - `crumb-separator`: The separator before a crumb drawn from `items`.
50449
- * - `crumb-separator-mark`: The chevron before a crumb drawn from `items`.
51299
+ * - `crumb-separator-mark`: The chevron, or the slash under `separator="slash"`, before a crumb drawn from `items`.
50450
51300
  *
50451
51301
  * ## CSS States
50452
51302
  *
@@ -50662,6 +51512,20 @@ export type CustomElements<F extends Framework = "other"> = {
50662
51512
  * name to derive one rather than dash-casing it, and what a consumer writes
50663
51513
  * is the platform's `commandfor`.
50664
51514
  * - `commandfor`/`commandFor`: The id of the element the command is sent to.
51515
+ * - `focusable-when-disabled`/`focusableWhenDisabled`: Whether a disabled button stays in the tab order, so a tooltip around it
51516
+ * can say why it is disabled.
51517
+ *
51518
+ * Set it on a button whose reason a Tooltip gives, such as a Save with no
51519
+ * changes to save. While the button is disabled, it keeps focus and takes
51520
+ * hover, and it refuses every press: a click, Enter and Space, and Enter in
51521
+ * a field of its form. The click does not reach your listeners, and a submit
51522
+ * button submits nothing. The inner control carries `aria-disabled` in place
51523
+ * of the native `disabled`, so a screen reader still says it is unavailable.
51524
+ * The styled button keeps the disabled look.
51525
+ *
51526
+ * Leave it unset on a button with no reason to give. A plain disabled button
51527
+ * leaves the tab order, as a native one does, and a keyboard reader skips a
51528
+ * stop that does nothing. Set `pending` for the wait after a press.
50665
51529
  * - `formaction`/`formAction`: Where this button's submission goes, overriding the form's own.
50666
51530
  *
50667
51531
  * **The five `form*` overrides ride on a native submit button that stands in
@@ -51749,6 +52613,16 @@ export type CustomElements<F extends Framework = "other"> = {
51749
52613
  * - `pan-up-spinner`: The ring `pan-up` turns while it is pending.
51750
52614
  * - `pan-up-text`: The box `pan-up`'s glyph sits in.
51751
52615
  * - `region`: The named region the board is drawn in.
52616
+ * - `tooltip-arrow`: The arrow of the tooltip that names each button, forwarded from `Tooltip`.
52617
+ * - `tooltip-arrow-bottom`: The arrow while the bubble is below its button, on the bubble's top edge. Set together with `tooltip-arrow`.
52618
+ * - `tooltip-arrow-left`: The arrow while the bubble is left of its button, on the bubble's right edge. Set together with `tooltip-arrow`.
52619
+ * - `tooltip-arrow-right`: The arrow while the bubble is right of its button, on the bubble's left edge. Set together with `tooltip-arrow`.
52620
+ * - `tooltip-arrow-top`: The arrow while the bubble is above its button, on the bubble's bottom edge. Set together with `tooltip-arrow`.
52621
+ * - `tooltip-surface`: The bubble of the tooltip that names each button, forwarded from `Tooltip`.
52622
+ * - `tooltip-surface-bottom`: The bubble while it is below its button. Set together with `tooltip-surface`.
52623
+ * - `tooltip-surface-left`: The bubble while it is left of its button. Set together with `tooltip-surface`.
52624
+ * - `tooltip-surface-right`: The bubble while it is right of its button. Set together with `tooltip-surface`.
52625
+ * - `tooltip-surface-top`: The bubble while it is above its button. Set together with `tooltip-surface`.
51752
52626
  * - `viewport`: The box the board is drawn inside.
51753
52627
  * - `zoom-in`: The button that zooms in.
51754
52628
  * - `zoom-in-button`: `zoom-in`'s inner button.
@@ -52290,15 +53164,36 @@ export type CustomElements<F extends Framework = "other"> = {
52290
53164
  >;
52291
53165
 
52292
53166
  /**
52293
- * The composer is one row, and the field takes the remaining width. The field
52294
- * grows with its text up to a maximum height, through `field-sizing: content`.
52295
- * Where that is not supported, the field keeps its rows and scrolls. The
52296
- * maximum height keeps the composer from covering the transcript.
53167
+ * The composer is one box. What the draft carries sits at its top, in a row
53168
+ * that wraps, inset to the line the caret starts on. The field grows with its
53169
+ * text up to a maximum height, through `field-sizing: content`. Where that is
53170
+ * not supported, the field keeps its rows and scrolls. The maximum height
53171
+ * keeps the composer from covering the transcript.
53172
+ *
53173
+ * With two `placeholders` or more, each example rolls into the next: the one
53174
+ * showing rises a little as it fades and blurs, and the next rises into its
53175
+ * place from below as it fades in, the two crossing so the field is never
53176
+ * empty. A box that changes height for the next example changes as it
53177
+ * lands. Where the browser has no CSS anchor
53178
+ * positioning, the examples fade into each other in the field's own
53179
+ * placeholder.
52297
53180
  *
52298
53181
  * ## Attributes & Properties
52299
53182
  *
52300
53183
  * Component attributes and properties that can be applied to the element or by using JavaScript.
52301
53184
  *
53185
+ * - `glow`: Draws the composer's focus as a glow: a light that runs once around the
53186
+ * edge as the composer takes focus, then a soft steady edge while it holds
53187
+ * it, in place of the focus ring.
53188
+ *
53189
+ * **On focus, and only then.** It says the composer is listening. A glow
53190
+ * that ran while a reply was on its way would be a second indicator of what
53191
+ * the conversation already shows, and one that ran all the time would be
53192
+ * decoration that moves. With reduced motion asked for, the edge lights
53193
+ * without the sweep.
53194
+ *
53195
+ * The steady edge is the focus indicator, so the ring is not drawn as well.
53196
+ * Its color is `--chat-composer-glow-color`, the primary color unless set.
52302
53197
  * - `listening-label`/`listeningLabel`: What a screen reader hears as listening starts.
52303
53198
  * - `stopped-listening-label`/`stoppedListeningLabel`: What a screen reader hears as listening stops.
52304
53199
  * - `voice`: Draws a button that listens for dictation and types what it hears at
@@ -52307,6 +53202,16 @@ export type CustomElements<F extends Framework = "other"> = {
52307
53202
  * `email` or `number` draws no button.
52308
53203
  * - `voice-label`/`voiceLabel`: The dictation button's name while it is not listening.
52309
53204
  * - `voice-stop-label`/`voiceStopLabel`: The dictation button's name while it listens.
53205
+ * - `attached`: Whether the draft holds something besides its text, such as an attached
53206
+ * file. The draft then counts as one though the field is empty, so the
53207
+ * send button shows in place of the `idle` slot.
53208
+ * - `busy`: Whether a reply is on its way. While set, the send button is a stop
53209
+ * button that sends `helix-stop`, and the draft does not send.
53210
+ *
53211
+ * **The same button rather than one beside it**, because sending and
53212
+ * stopping are never both possible: while a reply is on its way there is
53213
+ * nothing to send to, and the place the reader's eye goes to act is the
53214
+ * place that can act. The field stays open for the next turn.
52310
53215
  * - `feedback`: A message about the draft, shown under the field. While set, the composer
52311
53216
  * is invalid, does not send, and does not submit, as a field's `feedback`
52312
53217
  * does, and the message is announced as it appears.
@@ -52315,12 +53220,28 @@ export type CustomElements<F extends Framework = "other"> = {
52315
53220
  * - `minlength`/`minLength`: The fewest characters a draft can have, once the reader has written in
52316
53221
  * the field, as on a `<textarea>`.
52317
53222
  * - `placeholder`: Placeholder text shown in an empty field.
53223
+ * - `queue`: Whether Enter sends while `busy`, for a page that queues the turn or
53224
+ * hands it to the reply under way.
53225
+ *
53226
+ * Off by default, because a page that does neither would drop the turn: it
53227
+ * has nowhere to put a message while a reply is coming. The button stays
53228
+ * the stop button either way, since stopping is still the one thing it
53229
+ * should do while a reply is on its way.
52318
53230
  * - `required`: Whether the form needs a draft to submit. An empty draft never sends,
52319
53231
  * required or not.
52320
53232
  * - `rows`: How many rows the field opens at.
52321
53233
  *
52322
53234
  * It grows from there.
53235
+ * - `send-disabled`/`sendDisabled`: Whether the draft waits to be sent, such as while an attachment is still
53236
+ * read. The send button is unavailable and Enter does not send, while the
53237
+ * field stays open. The stop button shown while `busy` still stops.
52323
53238
  * - `send-label`/`sendLabel`: Label for the send button.
53239
+ * - `send-reason`/`sendReason`: Why the draft waits, such as "Reading photo.jpg", shown in a tooltip on
53240
+ * the send button while `send-disabled` is set. The button then stays in
53241
+ * the tab order and takes the pointer, with `aria-disabled` in place of
53242
+ * `disabled`, so the reason can be reached by keyboard and by pointer, as
53243
+ * Button's `focusable-when-disabled` does. A press still sends nothing.
53244
+ * - `stop-label`/`stopLabel`: Label for the stop button shown while `busy`.
52324
53245
  * - `submit-on`/`submitOn`: What sends the turn: `enter` for the Enter key, or `button` for the send
52325
53246
  * button only.
52326
53247
  *
@@ -52360,6 +53281,22 @@ export type CustomElements<F extends Framework = "other"> = {
52360
53281
  * - `speechEngine`: The engine this field listens through, in place of the one
52361
53282
  * `registerSpeechEngine` gave the page, or the browser's own. (property only)
52362
53283
  * - `listening`: Whether the field is listening for dictation now. (property only) (readonly)
53284
+ * - `placeholders`: Examples the empty field shows in turn, in place of `placeholder`, such
53285
+ * as tasks a reader might ask for. Each shows for 6.5 seconds, and a longer
53286
+ * one shows longer, up to 10 seconds.
53287
+ *
53288
+ * **Each is the field's placeholder in its turn**, so a screen reader that
53289
+ * reaches the field hears the one showing. The swap runs through
53290
+ * `:state(example-leaving)`, as one example leaves, and
53291
+ * `:state(example-entering)`, as the next arrives.
53292
+ *
53293
+ * **They move only while nobody is about to write, and while the reader
53294
+ * can see them.** An empty field without focus moves on. Focus or text
53295
+ * holds the example showing, and an example already leaving finishes its
53296
+ * turn. A composer scrolled out of view holds its example, and the example
53297
+ * gets its full time again when the composer comes back. Where the reader
53298
+ * asked for less motion, or the page paused its motion, the first example
53299
+ * stays. (property only)
52363
53300
  * - `typing`: Whether the user is writing: true from their first keystroke until they
52364
53301
  * send, clear the field, or pause for `typing-timeout` milliseconds. (property only) (readonly)
52365
53302
  * - `validity`: Whether the control meets its constraints, and why not. (property only) (readonly)
@@ -52395,6 +53332,7 @@ export type CustomElements<F extends Framework = "other"> = {
52395
53332
  * - `helix-before-listen`: The dictation button was pressed. Cancelable: cancel it to keep the composer from listening.
52396
53333
  * - `helix-listen`: Dictation settled on a phrase and put it in the draft, after the draft's own `input`.
52397
53334
  * - `helix-send`: Fired when the user sends their turn, and cancelable.
53335
+ * - `helix-stop`: Fired when the user presses the stop button, shown in place of the send button while `busy` is set.
52398
53336
  * - `helix-typing`: The user started or stopped writing, with `typing` saying which, as the composer's `typing` does.
52399
53337
  * - `input`: 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.
52400
53338
  *
@@ -52402,8 +53340,10 @@ export type CustomElements<F extends Framework = "other"> = {
52402
53340
  *
52403
53341
  * Areas where markup can be added to the component.
52404
53342
  *
53343
+ * - `attachments`: What the draft carries, such as images or files, inside the box and above the field.
52405
53344
  * - `end`: Content under the field, beside the send button.
52406
53345
  * - `start`: Content under the field at the leading edge, such as an attachment button or a model picker.
53346
+ * - `idle`: A control shown in place of the send button while the draft is empty and no reply is on its way, such as a button that starts a voice conversation.
52407
53347
  *
52408
53348
  * ## Methods
52409
53349
  *
@@ -52476,6 +53416,7 @@ export type CustomElements<F extends Framework = "other"> = {
52476
53416
  *
52477
53417
  * - `--chat-composer-background-color`: Fill behind the composer.
52478
53418
  * - `--chat-composer-border-width`: Width of the composer's edge, so your theme can remove it.
53419
+ * - `--chat-composer-glow-color`: Color of the focus glow under `glow`. Defaults to the primary color.
52479
53420
  * - `--chat-composer-max-block-size`: Maximum height the field grows to.
52480
53421
  * - `--dictation-level`: 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.
52481
53422
  *
@@ -52483,13 +53424,27 @@ export type CustomElements<F extends Framework = "other"> = {
52483
53424
  *
52484
53425
  * Custom selectors for styling elements within the component.
52485
53426
  *
53427
+ * - `attachments`: The row above the field that holds the `attachments` slot, inset to the field's text and hidden while the slot is empty.
53428
+ * - `example`: The example drawn over the empty field while `placeholders` holds two or more, in the field's box. It is a second field that shows only its placeholder, hidden from screen readers. Style its `::placeholder` where you style the field's.
53429
+ * - `example-leaving`: The example on its way out while the next comes in, for its first 250 milliseconds. Set together with `example`.
52486
53430
  * - `field`: The text field.
52487
53431
  * - `send`: The send button.
52488
53432
  * - `tools`: The row under the field.
52489
53433
  * - `composer`: The whole composer.
52490
53434
  * - `end`: The box around the `end` slot.
52491
53435
  * - `feedback`: The `feedback` message, under the field while it is set.
52492
- * - `mark`: The icon inside the send button.
53436
+ * - `idle`: The box around the `idle` slot, shown in the send button's place while the draft is empty.
53437
+ * - `mark`: The icon inside the send button, a return key, or a square while `busy`.
53438
+ * - `reason-arrow`: The arrow of the bubble that says `send-reason`, forwarded from `Tooltip`.
53439
+ * - `reason-arrow-bottom`: The arrow while the bubble is below the send button, on the bubble's top edge. Set together with `reason-arrow`.
53440
+ * - `reason-arrow-left`: The arrow while the bubble is left of the send button, on the bubble's right edge. Set together with `reason-arrow`.
53441
+ * - `reason-arrow-right`: The arrow while the bubble is right of the send button, on the bubble's left edge. Set together with `reason-arrow`.
53442
+ * - `reason-arrow-top`: The arrow while the bubble is above the send button, on the bubble's bottom edge. Set together with `reason-arrow`.
53443
+ * - `reason-surface`: The bubble that says `send-reason` over the send button, forwarded from `Tooltip`.
53444
+ * - `reason-surface-bottom`: The bubble while it is below the send button. Set together with `reason-surface`.
53445
+ * - `reason-surface-left`: The bubble while it is left of the send button. Set together with `reason-surface`.
53446
+ * - `reason-surface-right`: The bubble while it is right of the send button. Set together with `reason-surface`.
53447
+ * - `reason-surface-top`: The bubble while it is above the send button. Set together with `reason-surface`.
52493
53448
  * - `start`: The box around the `start` slot.
52494
53449
  * - `voice`: The dictation button, under `voice`, before the send button.
52495
53450
  * - `voice-listening`: The dictation button while it listens. Set alongside `voice`.
@@ -52499,6 +53454,8 @@ export type CustomElements<F extends Framework = "other"> = {
52499
53454
  *
52500
53455
  * These can be used to apply styling when a component is in a given state.
52501
53456
  *
53457
+ * - `example-entering`: The example in the empty field has just replaced the one before it, for an entrance. It holds for 350 milliseconds. See `placeholders`.
53458
+ * - `example-leaving`: The example in the empty field is giving way to the next one, for an exit. It holds for 250 milliseconds, and the next example becomes the placeholder 100 milliseconds in, so the two can cross. See `placeholders`.
52502
53459
  * - `invalid`: The draft fails `required`, `minlength`, `maxlength`, or a custom error, and the reader has tried to send or submit it, or edited the field and left it. Or `feedback` is set.
52503
53460
  * - `listening`: While the composer listens for dictation. The element sets `--dictation-level` on itself meanwhile, from 0 to 1, for a meter.
52504
53461
  * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
@@ -52599,6 +53556,7 @@ export type CustomElements<F extends Framework = "other"> = {
52599
53556
  *
52600
53557
  * - `(default)`: The turn's content.
52601
53558
  * - `actions`: Controls for the turn.
53559
+ * - `attachments`: What the turn carries, such as images or files, above the bubble.
52602
53560
  * - `avatar`: The author's avatar.
52603
53561
  * - `indicator`: The indicator shown before the first token arrives. Replaces the three dots.
52604
53562
  * - `sources`: The turn's sources, such as citations, documents, or a retrieved page.
@@ -52627,6 +53585,7 @@ export type CustomElements<F extends Framework = "other"> = {
52627
53585
  * - `indicator`: The three dots, shown when nothing is in the `indicator` slot.
52628
53586
  * - `meta`: The time and the state together.
52629
53587
  * - `actions`: The controls on the turn, beside its time.
53588
+ * - `attachments`: The box around the `attachments` slot, above the content and outside the bubble.
52630
53589
  * - `avatar`: The box around the `avatar` slot.
52631
53590
  * - `body`: The content and the line under it.
52632
53591
  * - `mark`: The status icon beside a failure.
@@ -52829,6 +53788,7 @@ export type CustomElements<F extends Framework = "other"> = {
52829
53788
  * - `loading`: Shown while the history loads.
52830
53789
  * - `message`: The message drawn for a turn from `turns`, forwarded whole.
52831
53790
  * - `message-actions`: The controls on a turn from `turns`, beside its time.
53791
+ * - `message-attachments`: The attachments above the bubble of a turn from `turns`.
52832
53792
  * - `message-avatar`: The avatar box of a turn from `turns`.
52833
53793
  * - `message-avatar-mine`: The avatar box of a turn from `turns` by `me`.
52834
53794
  * - `message-body`: The content of a turn from `turns`, and the line under it.
@@ -54654,7 +55614,7 @@ export type CustomElements<F extends Framework = "other"> = {
54654
55614
  *
54655
55615
  * - `--color-input-background-color`: Fill behind the field.
54656
55616
  * - `--color-input-border-color`: Color of the panel's edge.
54657
- * - `--color-input-border-width`: 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.
55617
+ * - `--color-input-border-width`: 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.
54658
55618
  * - `--color-input-panel-size`: Width of the panel, and so of the square.
54659
55619
  * - `--color-input-shadow`: Shadow under the panel. Defaults to `--helix-shadow-floating`, so the panel keeps a shadow over any content below it. `--helix-shadow-floating`: a floating surface sits over content nobody can predict, so it keeps a lift by default.
54660
55620
  * - `--color-input-swatch-radius`: Corner radius of the swatch in `variant="swatch"`.
@@ -55487,7 +56447,7 @@ export type CustomElements<F extends Framework = "other"> = {
55487
56447
  *
55488
56448
  * - `--combobox-background-color`: Fill behind the field.
55489
56449
  * - `--combobox-border-color`: Color of the panel's edge.
55490
- * - `--combobox-border-width`: 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.
56450
+ * - `--combobox-border-width`: 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.
55491
56451
  * - `--combobox-control-size`: Smallest the text field shrinks to once tags share its line.
55492
56452
  * - `--combobox-panel-size`: Width of the panel. Follows the field by default.
55493
56453
  * - `--combobox-shadow`: Shadow under the panel. Follows `--helix-shadow-floating`. A floating panel can sit over any content, so it has a shadow by default.
@@ -55558,6 +56518,16 @@ export type CustomElements<F extends Framework = "other"> = {
55558
56518
  *
55559
56519
  * Component attributes and properties that can be applied to the element or by using JavaScript.
55560
56520
  *
56521
+ * - `material`: The panel's surface: `frosted` or `glass`, as on `Dialog`, which the
56522
+ * palette opens in and hands the value to.
56523
+ *
56524
+ * Absent is the opaque overlay surface. `glass` is the page's translucent
56525
+ * ground over the theme's blur, and `frosted` the same pair turned up, so a
56526
+ * page whose panels are frosted has a palette that matches. Its strength is
56527
+ * the theme's, as on `Popover`, `Menu` and `Drawer`.
56528
+ *
56529
+ * **No `transparent`, deliberately.** A palette over arbitrary page content
56530
+ * is only readable because it has a ground.
55561
56531
  * - `default-open`/`defaultOpen`: Whether the element starts open. Ignored once `open` is written.
55562
56532
  * - `open`: Whether the element is open.
55563
56533
  *
@@ -55715,6 +56685,7 @@ export type CustomElements<F extends Framework = "other"> = {
55715
56685
  * CSS variables available for styling the component.
55716
56686
  *
55717
56687
  * - `--command-list-size`: How tall the list grows before it scrolls.
56688
+ * - `--command-radius`: The corners of the palette's panel. Defaults to the dialog's.
55718
56689
  * - `--command-size`: How wide the palette is. Defaults to `40rem`.
55719
56690
  *
55720
56691
  * ## CSS Parts
@@ -55833,6 +56804,20 @@ export type CustomElements<F extends Framework = "other"> = {
55833
56804
  * It replaces `Button.value`, the submit value: a copy button never submits,
55834
56805
  * whatever its `type`. Declared here so its own page says what it holds.
55835
56806
  * - `aria-label`/`undefined`: undefined
56807
+ * - `focusable-when-disabled`/`focusableWhenDisabled`: Whether a disabled button stays in the tab order, so a tooltip around it
56808
+ * can say why it is disabled.
56809
+ *
56810
+ * Set it on a button whose reason a Tooltip gives, such as a Save with no
56811
+ * changes to save. While the button is disabled, it keeps focus and takes
56812
+ * hover, and it refuses every press: a click, Enter and Space, and Enter in
56813
+ * a field of its form. The click does not reach your listeners, and a submit
56814
+ * button submits nothing. The inner control carries `aria-disabled` in place
56815
+ * of the native `disabled`, so a screen reader still says it is unavailable.
56816
+ * The styled button keeps the disabled look.
56817
+ *
56818
+ * Leave it unset on a button with no reason to give. A plain disabled button
56819
+ * leaves the tab order, as a native one does, and a keyboard reader skips a
56820
+ * stop that does nothing. Set `pending` for the wait after a press.
55836
56821
  * - `pending`: Whether the action the button started is still running.
55837
56822
  *
55838
56823
  * A pending button keeps focus and stays in the tab order, and refuses every
@@ -56889,7 +57874,7 @@ export type CustomElements<F extends Framework = "other"> = {
56889
57874
  *
56890
57875
  * - `--date-input-background-color`: The fill behind the field.
56891
57876
  * - `--date-input-border-color`: The color of the panel's border.
56892
- * - `--date-input-border-width`: 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.
57877
+ * - `--date-input-border-width`: 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.
56893
57878
  * - `--date-input-segment-focus-background-color`: The fill behind the segment with focus, in `segmented`. It follows `--helix-color-primary-surface`.
56894
57879
  * - `--date-input-segment-focus-color`: The text of the segment with focus, in `segmented`.
56895
57880
  * - `--date-input-segment-literal-color`: The text the locale writes between two segments, in `segmented`.
@@ -57797,6 +58782,16 @@ export type CustomElements<F extends Framework = "other"> = {
57797
58782
  * - `screenshot-live`: The screenshot button's live region, which speaks while the button is pending.
57798
58783
  * - `screenshot-spinner`: The ring the screenshot button turns while it is pending.
57799
58784
  * - `screenshot-text`: The box the screenshot button's icon sits in.
58785
+ * - `tooltip-arrow`: The arrow of the tooltip that names each button, forwarded from `Tooltip`.
58786
+ * - `tooltip-arrow-bottom`: The arrow while the bubble is below its button, on the bubble's top edge. Set together with `tooltip-arrow`.
58787
+ * - `tooltip-arrow-left`: The arrow while the bubble is left of its button, on the bubble's right edge. Set together with `tooltip-arrow`.
58788
+ * - `tooltip-arrow-right`: The arrow while the bubble is right of its button, on the bubble's left edge. Set together with `tooltip-arrow`.
58789
+ * - `tooltip-arrow-top`: The arrow while the bubble is above its button, on the bubble's bottom edge. Set together with `tooltip-arrow`.
58790
+ * - `tooltip-surface`: The bubble of the tooltip that names each button, forwarded from `Tooltip`.
58791
+ * - `tooltip-surface-bottom`: The bubble while it is below its button. Set together with `tooltip-surface`.
58792
+ * - `tooltip-surface-left`: The bubble while it is left of its button. Set together with `tooltip-surface`.
58793
+ * - `tooltip-surface-right`: The bubble while it is right of its button. Set together with `tooltip-surface`.
58794
+ * - `tooltip-surface-top`: The bubble while it is above its button. Set together with `tooltip-surface`.
57800
58795
  * - `touch`: A ring where a touch is or was.
57801
58796
  * - `touch-held`: A ring under a finger that is down, beside `touch`, with `show-touches`.
57802
58797
  * - `volume-down`: The Volume down button.
@@ -57835,6 +58830,15 @@ export type CustomElements<F extends Framework = "other"> = {
57835
58830
  *
57836
58831
  * Component attributes and properties that can be applied to the element or by using JavaScript.
57837
58832
  *
58833
+ * - `material`: The panel's surface: `frosted` or `glass`.
58834
+ *
58835
+ * Absent is the opaque overlay surface. `glass` is the page's translucent
58836
+ * ground over the theme's blur, and `frosted` the same pair turned up, as
58837
+ * on `Popover`, `Menu`, `Drawer` and `Tooltip`, so a page whose panels are
58838
+ * frosted has dialogs that match.
58839
+ *
58840
+ * **No `transparent`, deliberately.** A dialog over arbitrary page content
58841
+ * is only readable because it has a ground.
57838
58842
  * - `size`: How wide the panel is allowed to be.
57839
58843
  *
57840
58844
  * Steps rather than a number, because a dialog's width is a fact about what is
@@ -58010,9 +59014,10 @@ export type CustomElements<F extends Framework = "other"> = {
58010
59014
  *
58011
59015
  * CSS variables available for styling the component.
58012
59016
  *
59017
+ * - `--dialog-backdrop`: Filter applied behind a `frosted` or `glass` panel. Follows the theme's material policy.
58013
59018
  * - `--dialog-background-color`: The panel's fill. Follows `--helix-color-surface-overlay`.
58014
59019
  * - `--dialog-border-color`: Color of the panel's edge.
58015
- * - `--dialog-border-width`: 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.
59020
+ * - `--dialog-border-width`: 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.
58016
59021
  * - `--dialog-color`: Color of the words in the panel. Follows `--helix-color-foreground`.
58017
59022
  * - `--dialog-icon-size`: How big the mark above the title is.
58018
59023
  * - `--dialog-inline-size`: Width of the panel.
@@ -58655,7 +59660,7 @@ export type CustomElements<F extends Framework = "other"> = {
58655
59660
  * - `--drawer-backdrop`: Filter applied behind a `frosted` or `glass` drawer. Follows the theme's material policy. Set it to change the strength on one drawer.
58656
59661
  * - `--drawer-background-color`: Surface behind the panel.
58657
59662
  * - `--drawer-border-color`: Color of the panel's edge.
58658
- * - `--drawer-border-width`: 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.
59663
+ * - `--drawer-border-width`: 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.
58659
59664
  * - `--drawer-padding`: Padding inside the panel.
58660
59665
  * - `--drawer-padding-block-start`: Padding above the header. It is one step larger than the other three sides, so the first line clears the window's edge. Falls back to `--drawer-padding`, so setting that alone sets all four sides.
58661
59666
  * - `--drawer-radius`: Corner radius on the edges that face the page.
@@ -60781,6 +61786,16 @@ export type CustomElements<F extends Framework = "other"> = {
60781
61786
  * - `settling`: What is said while a layout runs unseen, where the reader asked for less motion or the page paused its motion, over the hidden drawing.
60782
61787
  * - `stage`: The drawing and its controls.
60783
61788
  * - `stop-layout`: The button that stops a layout that has run past five seconds, where the notes stand.
61789
+ * - `tooltip-arrow`: The arrow of the tooltip that names each button, forwarded from `Tooltip`.
61790
+ * - `tooltip-arrow-bottom`: The arrow while the bubble is below its button, on the bubble's top edge. Set together with `tooltip-arrow`.
61791
+ * - `tooltip-arrow-left`: The arrow while the bubble is left of its button, on the bubble's right edge. Set together with `tooltip-arrow`.
61792
+ * - `tooltip-arrow-right`: The arrow while the bubble is right of its button, on the bubble's left edge. Set together with `tooltip-arrow`.
61793
+ * - `tooltip-arrow-top`: The arrow while the bubble is above its button, on the bubble's bottom edge. Set together with `tooltip-arrow`.
61794
+ * - `tooltip-surface`: The bubble of the tooltip that names each button, forwarded from `Tooltip`.
61795
+ * - `tooltip-surface-bottom`: The bubble while it is below its button. Set together with `tooltip-surface`.
61796
+ * - `tooltip-surface-left`: The bubble while it is left of its button. Set together with `tooltip-surface`.
61797
+ * - `tooltip-surface-right`: The bubble while it is right of its button. Set together with `tooltip-surface`.
61798
+ * - `tooltip-surface-top`: The bubble while it is above its button. Set together with `tooltip-surface`.
60784
61799
  * - `viewport`: The box the renderer draws in.
60785
61800
  * - `zoom-in`: The zoom in button.
60786
61801
  * - `zoom-in-button`: `zoom-in`'s inner button.
@@ -61378,6 +62393,20 @@ export type CustomElements<F extends Framework = "other"> = {
61378
62393
  * name to derive one rather than dash-casing it, and what a consumer writes
61379
62394
  * is the platform's `commandfor`.
61380
62395
  * - `commandfor`/`commandFor`: The id of the element the command is sent to.
62396
+ * - `focusable-when-disabled`/`focusableWhenDisabled`: Whether a disabled button stays in the tab order, so a tooltip around it
62397
+ * can say why it is disabled.
62398
+ *
62399
+ * Set it on a button whose reason a Tooltip gives, such as a Save with no
62400
+ * changes to save. While the button is disabled, it keeps focus and takes
62401
+ * hover, and it refuses every press: a click, Enter and Space, and Enter in
62402
+ * a field of its form. The click does not reach your listeners, and a submit
62403
+ * button submits nothing. The inner control carries `aria-disabled` in place
62404
+ * of the native `disabled`, so a screen reader still says it is unavailable.
62405
+ * The styled button keeps the disabled look.
62406
+ *
62407
+ * Leave it unset on a button with no reason to give. A plain disabled button
62408
+ * leaves the tab order, as a native one does, and a keyboard reader skips a
62409
+ * stop that does nothing. Set `pending` for the wait after a press.
61381
62410
  * - `formaction`/`formAction`: Where this button's submission goes, overriding the form's own.
61382
62411
  *
61383
62412
  * **The five `form*` overrides ride on a native submit button that stands in
@@ -61987,6 +63016,9 @@ export type CustomElements<F extends Framework = "other"> = {
61987
63016
  *
61988
63017
  * Empty leaves the attribute off, which is the browser's default. Set it to
61989
63018
  * a token like `email` or `bday` to ask for autofill, or to `off` to refuse.
63019
+ * - `autocorrect`: Whether the browser corrects words as the reader types, as the platform's
63020
+ * `autocorrect`. Turn it off, with `autocorrect="off"`, for text that is not
63021
+ * prose, such as an address or a code, which corrections would change.
61990
63022
  * - `clearable`: Whether the field shows a button that empties it.
61991
63023
  *
61992
63024
  * Shown only while there is something to clear, because a control that does
@@ -64203,7 +65235,9 @@ export type CustomElements<F extends Framework = "other"> = {
64203
65235
  *
64204
65236
  * These can be used to apply styling when a component is in a given state.
64205
65237
  *
65238
+ * - `empty`: The group holds nothing to show, so opening it shows nothing.
64206
65239
  * - `open`: The group shows its lines.
65240
+ * - `steps`: The group holds steps of its own, which a stylesheet draws as a tree.
64207
65241
  * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
64208
65242
  */
64209
65243
  "helix-log-group": Partial<
@@ -64329,7 +65363,10 @@ export type CustomElements<F extends Framework = "other"> = {
64329
65363
  * - `plain` has no edge, no fill, no inset and no height of its own: the
64330
65364
  * lines start where the text around them does and the log grows with
64331
65365
  * them. For a log inside something that already frames it, such as an
64332
- * agent's work in a chat turn's `work` slot.
65366
+ * agent's work in a chat turn's `work` slot. Each step is a row with its
65367
+ * status mark on that edge and its caret after the heading. A step that
65368
+ * holds steps draws a rule beside them, and a step that holds lines draws
65369
+ * them on a quiet surface that scrolls after `--log-step-max-block-size`.
64333
65370
  *
64334
65371
  * Both are writable, so a page can say which it means rather than relying
64335
65372
  * on the absence of an attribute.
@@ -64487,6 +65524,7 @@ export type CustomElements<F extends Framework = "other"> = {
64487
65524
  * - `--log-radius`: The corners of the log.
64488
65525
  * - `--log-scrollbar-thumb-color`: The thumb of the scrollbar. Defaults to `--helix-scrollbar-thumb-color`.
64489
65526
  * - `--log-scrollbar-track-color`: The track of the scrollbar. Defaults to `--helix-scrollbar-track-color`.
65527
+ * - `--log-step-max-block-size`: How tall a step's lines may get in a `plain` log before they scroll. Defaults to 20rem.
64490
65528
  * - `--log-ansi-background`: The background a run takes where ANSI swaps the colors and named none. Defaults to the log's own background on the styled tier.
64491
65529
  * - `--log-ansi-black`: The ANSI color black, which codes `30` and `40` draw.
64492
65530
  * - `--log-ansi-blue`: The ANSI color blue, which codes `34` and `44` draw.
@@ -64514,7 +65552,7 @@ export type CustomElements<F extends Framework = "other"> = {
64514
65552
  * - `after`: The space the rows below the drawn ones would take. Only for lines drawn from data.
64515
65553
  * - `before`: The space the rows above the drawn ones would take. Only for lines drawn from data.
64516
65554
  * - `dropped`: The line above the log that says how many earlier lines `limit` let go.
64517
- * - `empty`: Shown when the log has no lines.
65555
+ * - `empty`: Shown when the log has no lines and no steps.
64518
65556
  * - `group-content`: Not drawn: a group drawn from data stands for its heading, and its lines are rows beside it.
64519
65557
  * - `group-duration`: How long a step drawn from `groups` took.
64520
65558
  * - `group-heading`: The heading of a step drawn from `groups`.
@@ -64560,7 +65598,7 @@ export type CustomElements<F extends Framework = "other"> = {
64560
65598
  * These can be used to apply styling when a component is in a given state.
64561
65599
  *
64562
65600
  * - `done`: The run is over: `done` is set, or `source` ended.
64563
- * - `empty`: The log has no lines.
65601
+ * - `empty`: The log has no lines and no steps.
64564
65602
  * - `filtered`: `query` or `level` is set, so only the lines they keep are shown.
64565
65603
  * - `pinned`: The log follows its newest line.
64566
65604
  * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
@@ -65502,6 +66540,16 @@ export type CustomElements<F extends Framework = "other"> = {
65502
66540
  * - `tilt-live`: `tilt`'s live region, which speaks while it is pending.
65503
66541
  * - `tilt-spinner`: The ring `tilt` turns while it is pending.
65504
66542
  * - `tilt-text`: The box `tilt`'s glyph sits in.
66543
+ * - `tooltip-arrow`: The arrow of the tooltip that names each button, forwarded from `Tooltip`.
66544
+ * - `tooltip-arrow-bottom`: The arrow while the bubble is below its button, on the bubble's top edge. Set together with `tooltip-arrow`.
66545
+ * - `tooltip-arrow-left`: The arrow while the bubble is left of its button, on the bubble's right edge. Set together with `tooltip-arrow`.
66546
+ * - `tooltip-arrow-right`: The arrow while the bubble is right of its button, on the bubble's left edge. Set together with `tooltip-arrow`.
66547
+ * - `tooltip-arrow-top`: The arrow while the bubble is above its button, on the bubble's bottom edge. Set together with `tooltip-arrow`.
66548
+ * - `tooltip-surface`: The bubble of the tooltip that names each button, forwarded from `Tooltip`.
66549
+ * - `tooltip-surface-bottom`: The bubble while it is below its button. Set together with `tooltip-surface`.
66550
+ * - `tooltip-surface-left`: The bubble while it is left of its button. Set together with `tooltip-surface`.
66551
+ * - `tooltip-surface-right`: The bubble while it is right of its button. Set together with `tooltip-surface`.
66552
+ * - `tooltip-surface-top`: The bubble while it is above its button. Set together with `tooltip-surface`.
65505
66553
  * - `viewport`: The box the map is drawn in.
65506
66554
  * - `zoom-in`: The button that zooms in.
65507
66555
  * - `zoom-in-button`: `zoom-in`'s inner button.
@@ -65882,7 +66930,7 @@ export type CustomElements<F extends Framework = "other"> = {
65882
66930
  *
65883
66931
  * - `--megamenu-backdrop`: The filter behind the panel, `none` by default. This family has no `material` property, so this and `--megamenu-background-color` set the panel's material.
65884
66932
  * - `--megamenu-background-color`: The panel's fill.
65885
- * - `--megamenu-border-width`: 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.
66933
+ * - `--megamenu-border-width`: 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.
65886
66934
  * - `--megamenu-column-size`: The minimum width of a column before the grid wraps.
65887
66935
  * - `--megamenu-duration`: How long the panel takes to open and close.
65888
66936
  * - `--megamenu-full-size`: The maximum width of the band's contents, which are centered in it.
@@ -66125,6 +67173,19 @@ export type CustomElements<F extends Framework = "other"> = {
66125
67173
  *
66126
67174
  * Component attributes and properties that can be applied to the element or by using JavaScript.
66127
67175
  *
67176
+ * - `material`: The panel's surface: `frosted` or `glass`.
67177
+ *
67178
+ * Absent is the opaque overlay surface. `glass` is the page's translucent
67179
+ * ground over a blur, for a page whose surfaces are glass, so a panel opened
67180
+ * over a glass window is not the one opaque slab on it. `frosted` is the same
67181
+ * pair turned up, a ground that admits less and a heavier blur.
67182
+ *
67183
+ * The strength is the theme's: `--helix-material-translucent`,
67184
+ * `--helix-material-translucent-strong` and `--helix-material-backdrop` are
67185
+ * what the policy moves. `Drawer` and `Tooltip` carry the same attribute.
67186
+ *
67187
+ * **No `transparent`, deliberately.** A panel floating over arbitrary page
67188
+ * content is only readable because it has a ground.
66128
67189
  * - `empty-text`/`emptyText`: The text shown and announced when there are no rows and none are loading.
66129
67190
  * - `loading`: Whether the rows are still loading.
66130
67191
  *
@@ -66274,9 +67335,10 @@ export type CustomElements<F extends Framework = "other"> = {
66274
67335
  *
66275
67336
  * CSS variables available for styling the component.
66276
67337
  *
67338
+ * - `--menu-backdrop`: Filter applied behind a `frosted` or `glass` panel. Follows the theme's material policy.
66277
67339
  * - `--menu-background-color`: Fill of the surface.
66278
67340
  * - `--menu-border-color`: Color of the panel's edge.
66279
- * - `--menu-border-width`: 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.
67341
+ * - `--menu-border-width`: 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.
66280
67342
  * - `--menu-max-block-size`: The tallest the menu grows before it scrolls.
66281
67343
  * - `--menu-min-inline-size`: The narrowest the menu gets.
66282
67344
  * - `--menu-shadow`: Shadow under the panel. Defaults to `--helix-shadow-floating`, so the panel keeps a shadow over any content below it.
@@ -66370,6 +67432,7 @@ export type CustomElements<F extends Framework = "other"> = {
66370
67432
  *
66371
67433
  * These can be used to apply styling when a component is in a given state.
66372
67434
  *
67435
+ * - `start`: A row in the section has content before its label, so every row in it keeps the leading column. The menu decides it for each section, apart from the rows outside one.
66373
67436
  * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
66374
67437
  */
66375
67438
  "helix-menu-section": Partial<
@@ -66555,6 +67618,7 @@ export type CustomElements<F extends Framework = "other"> = {
66555
67618
  * Areas where markup can be added to the component.
66556
67619
  *
66557
67620
  * - `label`: A visible label, above a bar and under a ring or an arc. Its words name it in place of `label`.
67621
+ * - `(default)`: `Meter.Segment` elements, one for each share of the whole, drawn in the bar.
66558
67622
  *
66559
67623
  * ## CSS Custom Properties
66560
67624
  *
@@ -66576,6 +67640,7 @@ export type CustomElements<F extends Framework = "other"> = {
66576
67640
  * - `--meter-along`: Where a bound sits on the arc, as a length along it.
66577
67641
  * - `--meter-at`: Where a bound sits on a linear track, as a percentage.
66578
67642
  * - `--meter-fraction`: The value as a fraction of the range, 0 to 1.
67643
+ * - `--meter-span`: How much the range holds, `max` less `min`, which a segment divides its own value by to find its width.
66579
67644
  * - `--meter-sweep`: How much of the circle the arc covers, as a path length.
66580
67645
  *
66581
67646
  * ## CSS Parts
@@ -66607,6 +67672,84 @@ export type CustomElements<F extends Framework = "other"> = {
66607
67672
  */
66608
67673
  "helix-meter": Partial<HelixMeterProps & BaseProps<HelixMeter, F> & BaseEvents<HelixMeter>>;
66609
67674
 
67675
+ /**
67676
+ * Each segment takes the next color in the chart series, in the order written, so
67677
+ * two of them are told apart without being given a color. A `tone` is what a
67678
+ * segment means, and takes the place of its turn. A hairline in the track's ground
67679
+ * sits between neighbors, so the boundary is there for a reader who cannot tell
67680
+ * two of the colors apart.
67681
+ *
67682
+ * Write the segments inside a meter, and the page imports the family beside it:
67683
+ *
67684
+ * ```js
67685
+ * import '@fusion.dev/helix/meter'
67686
+ * ```
67687
+ *
67688
+ * ## Attributes & Properties
67689
+ *
67690
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
67691
+ *
67692
+ * - `label`: What the segment is, such as "Tools", which names the slice when a pointer
67693
+ * rests on it.
67694
+ *
67695
+ * Not announced: see the note on a meter's children above.
67696
+ * - `tone`: What the segment means, as it does on a callout. Takes the tone's color in
67697
+ * place of the next color in the series.
67698
+ * - `value`: How much of the meter's range the segment takes, in the units of the meter's
67699
+ * `min` and `max`.
67700
+ *
67701
+ * A value that is not a number, or is below zero, draws nothing.
67702
+ * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
67703
+ *
67704
+ * **Named `whenSettled` because `settled` is taken four times over**, by
67705
+ * Image, Splitter and both color controls, none of them about transitions. A
67706
+ * base class takes the name every subclass then cannot use.
67707
+ *
67708
+ * **The state it reports cannot be watched, which is why this exists.** A
67709
+ * custom state is deliberately not in the DOM, so there is no
67710
+ * `MutationObserver` equivalent for `ElementInternals.states`. Await this
67711
+ * instead.
67712
+ *
67713
+ * Separate from `updateComplete`, which resolves in the microtask checkpoint
67714
+ * the suppression is still active in. That is the distinction `readyToMove`
67715
+ * in `@fusion.dev/helix-testing` is written around.
67716
+ *
67717
+ * It never resolves where `requestAnimationFrame` never fires, which is a
67718
+ * server, a hidden tab, and happy-dom. Callers that must not hang there race
67719
+ * it against a timeout, as the happy-dom harness's `readyToMove` does. The
67720
+ * browser harness's awaits it alone: a browser always runs the frame, and a
67721
+ * timer beside it was a bet on how long one takes, which a busy run lost. (property only) (readonly)
67722
+ *
67723
+ * ## Slots
67724
+ *
67725
+ * Areas where markup can be added to the component.
67726
+ *
67727
+ * - `(default)`: Nothing. A segment draws its share and has no content.
67728
+ *
67729
+ * ## CSS Custom Properties
67730
+ *
67731
+ * CSS variables available for styling the component.
67732
+ *
67733
+ * - `--meter-segment-color`: The slice's color. Overrides the series and the tone.
67734
+ * - `--meter-segment-gap-color`: The color of the hairline between neighbors.
67735
+ * - `--meter-segment-value`: How much of the range the segment takes, in the meter's own units.
67736
+ *
67737
+ * ## CSS Parts
67738
+ *
67739
+ * Custom selectors for styling elements within the component.
67740
+ *
67741
+ * - `fill`: The slice of the bar the segment takes.
67742
+ *
67743
+ * ## CSS States
67744
+ *
67745
+ * These can be used to apply styling when a component is in a given state.
67746
+ *
67747
+ * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
67748
+ */
67749
+ "helix-meter-segment": Partial<
67750
+ HelixMeterSegmentProps & BaseProps<HelixMeterSegment, F> & BaseEvents<HelixMeterSegment>
67751
+ >;
67752
+
66610
67753
  /**
66611
67754
  * A quiet square button, as the controls over a map are, with the pause icon
66612
67755
  * while motion runs and the play icon while it is paused. Text slotted into
@@ -69249,6 +70392,19 @@ export type CustomElements<F extends Framework = "other"> = {
69249
70392
  *
69250
70393
  * Component attributes and properties that can be applied to the element or by using JavaScript.
69251
70394
  *
70395
+ * - `material`: The panel's surface: `frosted` or `glass`.
70396
+ *
70397
+ * Absent is the opaque overlay surface. `glass` is the page's translucent
70398
+ * ground over a blur, for a page whose surfaces are glass, so a panel opened
70399
+ * over a glass window is not the one opaque slab on it. `frosted` is the same
70400
+ * pair turned up, a ground that admits less and a heavier blur.
70401
+ *
70402
+ * The strength is the theme's: `--helix-material-translucent`,
70403
+ * `--helix-material-translucent-strong` and `--helix-material-backdrop` are
70404
+ * what the policy moves. `Drawer` and `Tooltip` carry the same attribute.
70405
+ *
70406
+ * **No `transparent`, deliberately.** A panel floating over arbitrary page
70407
+ * content is only readable because it has a ground.
69252
70408
  * - `separation`: How the panel is set apart from the content under it.
69253
70409
  *
69254
70410
  * One of the axis's four values, which is all this surface has meaning for: a
@@ -69357,8 +70513,10 @@ export type CustomElements<F extends Framework = "other"> = {
69357
70513
  * CSS variables available for styling the component.
69358
70514
  *
69359
70515
  * - `--popover-arrow-size`: Size of the point drawn with `arrow`. Tooltip's point is the same size.
70516
+ * - `--popover-backdrop`: Filter applied behind a `frosted` or `glass` panel. Follows the theme's material policy.
70517
+ * - `--popover-background-color`: Fill of the surface.
69360
70518
  * - `--popover-border-color`: Color of the panel's edge.
69361
- * - `--popover-border-width`: 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.
70519
+ * - `--popover-border-width`: 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.
69362
70520
  * - `--popover-inline-size`: Width of the panel.
69363
70521
  * - `--popover-max-block-size`: Maximum height of the panel before it scrolls.
69364
70522
  * - `--popover-padding`: Space between the panel's edge and its contents.
@@ -71774,6 +72932,17 @@ export type CustomElements<F extends Framework = "other"> = {
71774
72932
  * styled to match the design system. The base class measures which edges have
71775
72933
  * content past them.
71776
72934
  *
72935
+ * **The content fades out toward each edge that has more past it.** The fade
72936
+ * is a mask on the viewport, so the surface behind the scroll area shows
72937
+ * through it: the page, a card, or a translucent pane. Set the depth with
72938
+ * `--scroll-area-fade`, or one edge's depth with its own property, and use `0`
72939
+ * to keep an edge from fading. A scrollbar that takes room beside the content
72940
+ * stays out of the mask.
72941
+ *
72942
+ * **Set `--scroll-area-fade-color` to paint the fades.** Each fade is then a
72943
+ * gradient from that color over the content, and there is no mask. Use it for
72944
+ * a scroll area on a solid ground, in the ground's color or one of your own.
72945
+ *
71777
72946
  * Under `scrollbars`, the browser's scrollbar is hidden and the component's own
71778
72947
  * are drawn over the content at the edge, in the same colors.
71779
72948
  *
@@ -71847,10 +73016,10 @@ export type CustomElements<F extends Framework = "other"> = {
71847
73016
  *
71848
73017
  * CSS variables available for styling the component.
71849
73018
  *
71850
- * - `--scroll-area-fade`: The depth of the fades at both edges.
73019
+ * - `--scroll-area-fade`: The depth of the fade at each edge.
71851
73020
  * - `--scroll-area-fade-block-end`: The depth of the bottom fade, or `0` to remove it.
71852
73021
  * - `--scroll-area-fade-block-start`: The depth of the top fade, or `0` to remove it.
71853
- * - `--scroll-area-fade-color`: The color the fades blend into, which is the background behind the box.
73022
+ * - `--scroll-area-fade-color`: The color to paint the fades in, as a gradient over the content at each edge. Unset, the fades are a mask.
71854
73023
  * - `--scroll-area-fade-inline-end`: The depth of the fade at the inline end, or `0` to remove it.
71855
73024
  * - `--scroll-area-fade-inline-start`: The depth of the fade at the inline start, or `0` to remove it.
71856
73025
  * - `--scroll-area-scrollbar`: The scrollbar width, as a `scrollbar-width` keyword.
@@ -71859,6 +73028,8 @@ export type CustomElements<F extends Framework = "other"> = {
71859
73028
  * - `--scroll-area-thumb-hover-color`: The color of the browser's thumb while the pointer is over the scroll area, and of a thumb drawn under `scrollbars` while the pointer is over it. Defaults to `--helix-scrollbar-thumb-hover-color`.
71860
73029
  * - `--scroll-area-thumb-min-size`: The shortest a thumb drawn under `scrollbars` gets, however long the content.
71861
73030
  * - `--scroll-area-track-color`: The color of the scrollbar's track. Defaults to `--helix-scrollbar-track-color`.
73031
+ * - `--scroll-area-gutter-block-end`: 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.
73032
+ * - `--scroll-area-gutter-inline-end`: 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.
71862
73033
  * - `--scroll-area-scroll-fraction`: 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.
71863
73034
  * - `--scroll-area-thumb-fraction`: 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.
71864
73035
  *
@@ -71867,7 +73038,7 @@ export type CustomElements<F extends Framework = "other"> = {
71867
73038
  * Custom selectors for styling elements within the component.
71868
73039
  *
71869
73040
  * - `corner`: The square where the two scrollbars meet, under `scrollbars`. Hidden unless both are drawn.
71870
- * - `edges`: The layer that draws the cues on the inline start and end edges.
73041
+ * - `edges`: The layer over the viewport. The styled tier draws the focus ring on it, and the painted fades at the inline start and end.
71871
73042
  * - `scrollbar`: Each scrollbar, under `scrollbars`. Hidden on an axis that has none.
71872
73043
  * - `scrollbar-horizontal`: The scrollbar along the inline axis, alongside `scrollbar`.
71873
73044
  * - `scrollbar-vertical`: The scrollbar along the block axis, alongside `scrollbar`.
@@ -72217,7 +73388,7 @@ export type CustomElements<F extends Framework = "other"> = {
72217
73388
  * CSS variables available for styling the component.
72218
73389
  *
72219
73390
  * - `--select-border-color`: Color of the panel's edge.
72220
- * - `--select-border-width`: 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.
73391
+ * - `--select-border-width`: 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.
72221
73392
  * - `--select-shadow`: Shadow under the panel. Defaults to `--helix-shadow-floating`, because the panel can sit over any content.
72222
73393
  * - `--select-surface-max-block-size`: Maximum height of the panel.
72223
73394
  * - `--floating-anchor-inline-size`: The trigger's width, written on the panel while it is open, as in `min-inline-size: var(--floating-anchor-inline-size)`. Read it; a value set here is written over.
@@ -72516,7 +73687,7 @@ export type CustomElements<F extends Framework = "other"> = {
72516
73687
  *
72517
73688
  * - `--skip-link-background-color`: The background of the link while it is shown.
72518
73689
  * - `--skip-link-border-color`: The border color of the link while it is shown.
72519
- * - `--skip-link-border-width`: 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.
73690
+ * - `--skip-link-border-width`: The border width of the link while it is shown. Follows `--helix-border-floating`, a hairline. Set it to `0` for the shadow alone.
72520
73691
  * - `--skip-link-color`: The text color of the link while it is shown.
72521
73692
  * - `--skip-link-font-size`: The size of the link's text.
72522
73693
  * - `--skip-link-inset-block`: How far the shown link sits from the top of the viewport.
@@ -73139,6 +74310,13 @@ export type CustomElements<F extends Framework = "other"> = {
73139
74310
  * reflected property takes no default, and `solid` writes it out. A
73140
74311
  * renderer draws the bars the same way.
73141
74312
  *
74313
+ * **`muted` draws every bar in the neutral ink**, so the one bar whose cell
74314
+ * names a tone, such as `data-tone="primary"`, is the bar in color, with a
74315
+ * soft glow in its tone: one reading lit among the others, such as today
74316
+ * among a week. Each top takes the most ink and each side less, as a
74317
+ * colored bar's faces do. A renderer draws the neutral bars and the toned
74318
+ * one, without the glow.
74319
+ *
73142
74320
  * It composes with `material`: emphasis decides what is drawn, and material
73143
74321
  * how much of it comes through. The outline on the bar the keys rest on
73144
74322
  * keeps its own ink.
@@ -73201,16 +74379,73 @@ export type CustomElements<F extends Framework = "other"> = {
73201
74379
  * `hidden`, or absent, says the summary to a screen reader and draws it
73202
74380
  * for no one else. Reflected, because the stylesheet draws it by the
73203
74381
  * attribute, and a page that sets the property, as React does, writes none.
73204
- * - `no-box`/`noBox`: Draws no box: no edges, grid, numbers, or names, so the readings stand
73205
- * alone and fill the plot, as a picture on a product's own page does. The
74382
+ * - `grow`: Grows the bars up from the floor the first time the chart comes into
74383
+ * view with readings, each category a little after the one before it, so
74384
+ * the drawing arrives the way a page's own picture does. The growth is
74385
+ * fast at first, slows to rest, and never passes a bar's value.
74386
+ *
74387
+ * Under `prefers-reduced-motion`, or where the page has paused its motion
74388
+ * through `pauseMotion` or `Motion Toggle`, the bars stand at their height
74389
+ * from the start. A later table draws the bars it already had at their
74390
+ * height, and grows the bars it adds, each from the floor, so a reading that
74391
+ * arrives while the chart is in view arrives the same way.
74392
+ * - `grow-again`/`growAgain`: Grows the bars again each time the chart comes back into view after it
74393
+ * left it, as a pane does when it is opened again, where `grow` alone grows
74394
+ * them the first time only. Only a chart that grows takes it.
74395
+ *
74396
+ * While it is out of view the bars stand at the floor, so the first frame
74397
+ * after it returns is the start of the growth and never a flash at full
74398
+ * height.
74399
+ * - `no-box`/`noBox`: Draws no box: no edges, grid, numbers, or names, and in a `row` no
74400
+ * floor, so the readings stand alone and fill the plot, as a picture on a
74401
+ * product's own page does. The
73206
74402
  * table, the summary, the tooltip, and the keys still carry every value,
73207
74403
  * and a renderer draws no box either.
73208
74404
  * - `open-label`/`openLabel`: What the readout says for a place with no value. `{category}` and
73209
74405
  * `{series}` name the place.
73210
74406
  * - `plot-label`/`plotLabel`: The plot's name where the chart has none: no `aria-label`, `label`, or table caption.
74407
+ * - `stacked`: Stacks a category's series into one column, each block standing on the
74408
+ * ones before it, so the column is as tall as the category's total, as a
74409
+ * flat `Bar Chart` stacks them.
74410
+ *
74411
+ * Absent stands the series one behind another in depth. Stacked, every
74412
+ * series stands in the front row, so none hides another, and the parts of
74413
+ * one total read together. A negative reading hangs below zero on the
74414
+ * negatives before it. The scale fits the stacks.
73211
74415
  * - `summary-label`/`summaryLabel`: The `summary` part's sentence. `{count}`, `{series}`, and `{categories}`
73212
74416
  * are the number of bars, series, and categories, written in the locale,
73213
74417
  * and `{low}` and `{high}` the lowest and the highest value.
74418
+ * - `variant`: How the bars stand.
74419
+ *
74420
+ * Unset, they stand on a grid of categories across and series in depth,
74421
+ * in a box the camera looks at from a corner, so the grid recedes at an
74422
+ * angle. `row` lays the categories in a straight line across the page and
74423
+ * turns each bar to the camera, showing its top and two sides, for one row
74424
+ * of readings in a small space such as a pane: turning the view turns each
74425
+ * bar where it stands, and the row stays level. It is the chart's own
74426
+ * drawing that lays the row: a renderer connected through
74427
+ * `@fusion.dev/helix-plot` stands the bars on the grid.
74428
+ *
74429
+ * `diagonal` is the same row climbing to the right as it recedes, each
74430
+ * place a step further back than the one before, as a row of days on a
74431
+ * product's page is drawn: the row rises one part in five across the page
74432
+ * from any turn, and its floor and names climb with it. A row whose bars
74433
+ * have a size climbs at most a quarter of the plot's height, so the bars
74434
+ * of a long row keep theirs.
74435
+ *
74436
+ * **A row draws its floor in place of a box**: each place as an outline a
74437
+ * little wider than its bar, and each category's name under it, as many
74438
+ * names as fit without touching. A name whose bar names a tone is written
74439
+ * first, in that tone. `no-box` leaves the floor and the names out.
74440
+ *
74441
+ * **A `column-gap` on the `fallback` part gives a row's bars one width**,
74442
+ * which the styled tier sets from `--spatial-bar-chart-bar-size`: one bar
74443
+ * stands as wide as each of twenty, the row is as long as its bars and
74444
+ * centered, the tallest bar stands as high as the plot has room for and
74445
+ * no taller than the row is long and a quarter again, so one bar stands
74446
+ * as a block, and `fits` says how many bars the plot holds, so a page
74447
+ * can give it the latest of a longer table. It is read when the plot's
74448
+ * size changes.
73214
74449
  * - `sounding`: Whether the chart is playing as sound now. (property only) (readonly)
73215
74450
  * - `data`: The readings as data, in the shape of a table, where the page has no
73216
74451
  * table to point `for` at. `for` wins where both are set.
@@ -73259,6 +74494,11 @@ export type CustomElements<F extends Framework = "other"> = {
73259
74494
  * - `field`: The table read as bars. **Each row is a category, and each numeric
73260
74495
  * column a series.** A renderer reads it. (property only) (readonly)
73261
74496
  * - `active`: The bar the keys or the pointer rest on, as its place in `field.cells`, or `-1`. (property only) (readonly)
74497
+ * - `fits`: How many categories a `row` or a `diagonal` has room for across the
74498
+ * plot at its bar size, measured as it is read, or
74499
+ * `undefined` where there is no row, no bar size, or nothing drawn to
74500
+ * measure. A page with a longer table gives the chart its latest that
74501
+ * many rows, and says so. (property only) (readonly)
73262
74502
  * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
73263
74503
  *
73264
74504
  * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -73346,8 +74586,16 @@ export type CustomElements<F extends Framework = "other"> = {
73346
74586
  *
73347
74587
  * CSS variables available for styling the component.
73348
74588
  *
74589
+ * - `--spatial-bar-chart-bar-size`: 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.
73349
74590
  * - `--spatial-bar-chart-block-size`: How tall the plot is. By default, three quarters of its width and 22em at most.
73350
- * - `--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.
74591
+ * - `--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.`: undefined
74592
+ * - `--spatial-bar-chart-tone-accent`: The color of a bar whose cell says `data-tone="accent"`.
74593
+ * - `--spatial-bar-chart-tone-danger`: The color of a bar whose cell says `data-tone="danger"`.
74594
+ * - `--spatial-bar-chart-tone-info`: The color of a bar whose cell says `data-tone="info"`.
74595
+ * - `--spatial-bar-chart-tone-muted`: The color of a bar whose cell says `data-tone="muted"`.
74596
+ * - `--spatial-bar-chart-tone-primary`: 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.
74597
+ * - `--spatial-bar-chart-tone-success`: The color of a bar whose cell says `data-tone="success"`.
74598
+ * - `--spatial-bar-chart-tone-warning`: The color of a bar whose cell says `data-tone="warning"`.
73351
74599
  *
73352
74600
  * ## CSS Parts
73353
74601
  *
@@ -73360,6 +74608,8 @@ export type CustomElements<F extends Framework = "other"> = {
73360
74608
  * - `empty`: The words when the table has no readings: the `empty` slot, falling back to `empty-text`.
73361
74609
  * - `face`: One face of a bar the view shows, shaded by which way it faces.
73362
74610
  * - `fallback`: The box the chart's own drawing fills, shown until a renderer has drawn and where none is connected. Hidden from screen readers.
74611
+ * - `floor`: One place on the floor of a `row`, under a bar or where one would stand, drawn as its outline.
74612
+ * - `glow`: The outline of a bar whose cell names a tone, blurred by 8 CSS pixels and painted under the bar, with no fill until a stylesheet gives it one: a soft glow in the bar's tone.
73363
74613
  * - `grid`: The box's edges and its grid, in the chart's own drawing.
73364
74614
  * - `live`: The readout: a polite live region that says the bar the keys moved to. Hide it visually.
73365
74615
  * - `loading`: The words while `loading` is set and there are no readings.
@@ -73371,7 +74621,7 @@ export type CustomElements<F extends Framework = "other"> = {
73371
74621
  * - `summary`: The number of bars, series, and categories, and the range of values, written as a sentence for screen readers, which describes the plot. Hide it visually.
73372
74622
  * - `table`: The readings as a table, for a screen reader, rendered only where they were drawn from `data`, a page of them at a time past a few hundred. Hide it visually.
73373
74623
  * - `table-pages`: Which readings a page of the `table` holds, and the buttons that show the previous and the next page, rendered only while it holds a page. Hide it visually.
73374
- * - `tick`: A category's or a series' name, or a value at a tick, along its edge of the box, in the chart's own drawing.
74624
+ * - `tick`: A category's or a series' name, or a value at a tick, along its edge of the box, or a category's name under its place in a `row`, in the chart's own drawing.
73375
74625
  * - `tooltip-anchor`: The `Tooltip` element itself.
73376
74626
  * - `tooltip-arrow`: The bubble's point, forwarded from `Tooltip`.
73377
74627
  * - `tooltip-arrow-bottom`: The point while the bubble is below the reading, on its top edge. Set alongside `tooltip-arrow`.
@@ -73388,6 +74638,7 @@ export type CustomElements<F extends Framework = "other"> = {
73388
74638
  * - `tooltip-surface-right`: The bubble while it is right of the reading. Set alongside `tooltip-surface`.
73389
74639
  * - `tooltip-surface-top`: The bubble while it is above the reading. Set alongside `tooltip-surface`.
73390
74640
  * - `tooltip-value`: A column's value inside the tooltip.
74641
+ * - `value`: The value of a bar whose cell names a tone, written above it in the chart's own drawing.
73391
74642
  *
73392
74643
  * ## CSS States
73393
74644
  *
@@ -75941,6 +77192,10 @@ export type CustomElements<F extends Framework = "other"> = {
75941
77192
  * `at` is nearer, and crosses in one diagonal to the far side. `waves` is sharp
75942
77193
  * strands crossing the full width.
75943
77194
  *
77195
+ * **Clear, over glass.** Set `clear` and the ribbon is drawn without its
77196
+ * ground, so a translucent pane or a frosted window behind the element shows
77197
+ * through, with the light over it.
77198
+ *
75944
77199
  * **Quiet behind words.** `quiet` names elements, such as a hero's words, that
75945
77200
  * the light dims behind to a faint glow, so a bright ribbon can cross the page
75946
77201
  * under them and they stay crisp.
@@ -75986,6 +77241,13 @@ export type CustomElements<F extends Framework = "other"> = {
75986
77241
  * own.
75987
77242
  * - `bloom`: How much the glow around the strands adds, as a multiplier. `0` draws the
75988
77243
  * strands alone, crisp and dimmer, and `1` is the default glow.
77244
+ * - `clear`: Whether the light is drawn alone, without the ground under it, so what is
77245
+ * behind the element shows through, such as a translucent pane or a window's
77246
+ * glass. The ground still says which way the page runs: light added on a
77247
+ * dark one, ink on a light one.
77248
+ *
77249
+ * Reflected because the stylesheet selects on it: the band under the canvas
77250
+ * shows only while the element falls back, and loses its ground too.
75989
77251
  * - `contrast`: How far apart the brightest and dimmest strands are, from `0`, most of
75990
77252
  * them alike, to `1`, a few burning bright over many faint ones. Clamped to
75991
77253
  * that range. The ribbon as a whole keeps its strength.
@@ -77103,10 +78365,40 @@ export type CustomElements<F extends Framework = "other"> = {
77103
78365
  * - `underlined` makes it a bar along the bottom of the strip, on a rule.
77104
78366
  * - `segmented` makes it the size of the tab's box, inside a sunken track.
77105
78367
  *
78368
+ * `emphasis="subtle"` makes the mark quieter, for tabs inside other chrome
78369
+ * such as a pane's header: a tint with no edge or shadow, the same wash a
78370
+ * subtle button takes.
78371
+ *
78372
+ * **Tabs with no panels are a strip.** Where what each tab stands for lives
78373
+ * outside the set, such as a pane's pages or shells, leave the panels out: the
78374
+ * tabs keep their keys and their selection, `active` and `helix-activate` say
78375
+ * which is current, and the page shows the rest. Put a control that adds a tab,
78376
+ * such as a plus, beside the set rather than in it, so the tab list holds tabs
78377
+ * alone. With `dismissible` tabs, `dismiss-marks="hover"` keeps each close
78378
+ * mark out of sight until the tab is current, under the pointer, or holds
78379
+ * focus, as a browser's tabs do.
78380
+ *
77106
78381
  * ## Attributes & Properties
77107
78382
  *
77108
78383
  * Component attributes and properties that can be applied to the element or by using JavaScript.
77109
78384
  *
78385
+ * - `dismiss-marks`/`dismissMarks`: When the close mark of each `dismissible` tab shows.
78386
+ *
78387
+ * Unset, or `always`, every mark shows. `hover` shows a tab's mark while it
78388
+ * is current, under the pointer, or holds focus, and keeps its room on every
78389
+ * tab, so the labels do not move as the marks come and go. For a strip of
78390
+ * many dismissible tabs, where a mark on each reads as a row of crosses. A
78391
+ * keyboard closes a tab with Delete whether its mark shows or not.
78392
+ * - `emphasis`: How loud the mark on the current tab is.
78393
+ *
78394
+ * Unset is the mark `variant` draws at rest. `subtle` is a tint with no
78395
+ * edge or shadow: the raised pill becomes a wash, the `segmented` track's
78396
+ * pill does the same inside it, and the `underlined` bar takes the
78397
+ * foreground's ink in place of the primary color. For tabs inside other
78398
+ * chrome, where a raised mark reads as a control laid on top of it.
78399
+ *
78400
+ * Independent of `variant`, since each of its marks has a quiet form: the two
78401
+ * answer different questions, which is the test the axis registry applies.
77110
78402
  * - `active`: The `value` of the current item.
77111
78403
  *
77112
78404
  * Not `option.active`, which is the option the keyboard is on: that is a
@@ -77339,6 +78631,7 @@ export type CustomElements<F extends Framework = "other"> = {
77339
78631
  * - `--tabs-tab-font-weight`: The weight of a tab's label.
77340
78632
  * - `--tabs-tab-hover-background-color`: The wash under the pointer.
77341
78633
  * - `--tabs-tab-hover-color`: The label color under the pointer.
78634
+ * - `--tabs-tab-max-inline-size`: 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.
77342
78635
  * - `--tabs-tab-padding-inline`: The space either side of the label.
77343
78636
  * - `--tabs-tab-radius`: The corners of a tab, which the hover wash takes.
77344
78637
  * - `--tabs-tab-selected-background-color`: The fill of the current tab itself, under the moving mark.
@@ -77350,6 +78643,7 @@ export type CustomElements<F extends Framework = "other"> = {
77350
78643
  *
77351
78644
  * - `dismiss`: The mark a pointer presses to close a `dismissible` tab.
77352
78645
  * - `dismiss-mark`: The glyph on that mark, where none is slotted.
78646
+ * - `label`: The slot the tab's label is in, which shortens with an ellipsis under `--tabs-tab-max-inline-size`.
77353
78647
  * - `tab`: The tab itself.
77354
78648
  *
77355
78649
  * ## CSS States
@@ -77558,7 +78852,7 @@ export type CustomElements<F extends Framework = "other"> = {
77558
78852
  *
77559
78853
  * - `(default)`: The tag's label.
77560
78854
  * - `dismiss-icon`: Replaces the glyph on the remove button.
77561
- * - `start`: The category the label belongs to, shown before it in a heavier weight.
78855
+ * - `start`: The category the label belongs to, shown before it in a heavier weight, or an icon.
77562
78856
  *
77563
78857
  * ## Methods
77564
78858
  *
@@ -77864,6 +79158,16 @@ export type CustomElements<F extends Framework = "other"> = {
77864
79158
  * - `restart-spinner`: The ring the Restart button turns while it is pending.
77865
79159
  * - `restart-text`: The Restart button's label.
77866
79160
  * - `status`: The line under the terminal that says the process exited, or that Tab moves focus.
79161
+ * - `tooltip-arrow`: The arrow of the tooltip that names each button, forwarded from `Tooltip`.
79162
+ * - `tooltip-arrow-bottom`: The arrow while the bubble is below its button, on the bubble's top edge. Set together with `tooltip-arrow`.
79163
+ * - `tooltip-arrow-left`: The arrow while the bubble is left of its button, on the bubble's right edge. Set together with `tooltip-arrow`.
79164
+ * - `tooltip-arrow-right`: The arrow while the bubble is right of its button, on the bubble's left edge. Set together with `tooltip-arrow`.
79165
+ * - `tooltip-arrow-top`: The arrow while the bubble is above its button, on the bubble's bottom edge. Set together with `tooltip-arrow`.
79166
+ * - `tooltip-surface`: The bubble of the tooltip that names each button, forwarded from `Tooltip`.
79167
+ * - `tooltip-surface-bottom`: The bubble while it is below its button. Set together with `tooltip-surface`.
79168
+ * - `tooltip-surface-left`: The bubble while it is left of its button. Set together with `tooltip-surface`.
79169
+ * - `tooltip-surface-right`: The bubble while it is right of its button. Set together with `tooltip-surface`.
79170
+ * - `tooltip-surface-top`: The bubble while it is above its button. Set together with `tooltip-surface`.
77867
79171
  * - `viewport`: The box the terminal is drawn in.
77868
79172
  *
77869
79173
  * ## CSS States
@@ -78677,7 +79981,7 @@ export type CustomElements<F extends Framework = "other"> = {
78677
79981
  *
78678
79982
  * - `--time-input-background-color`: Fill behind the field.
78679
79983
  * - `--time-input-border-color`: Color of the panel's edge.
78680
- * - `--time-input-border-width`: 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.
79984
+ * - `--time-input-border-width`: 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.
78681
79985
  * - `--time-input-segment-focus-background-color`: The fill behind the segment with focus, in `segmented`. It follows `--helix-color-primary-surface`.
78682
79986
  * - `--time-input-segment-focus-color`: The text of the segment with focus, in `segmented`.
78683
79987
  * - `--time-input-segment-literal-color`: The text the locale writes between two segments, in `segmented`.
@@ -79552,7 +80856,7 @@ export type CustomElements<F extends Framework = "other"> = {
79552
80856
  *
79553
80857
  * - `--toast-background-color`: The panel's color. Follows `--helix-color-surface-overlay`.
79554
80858
  * - `--toast-border-color`: Color of the panel's edge.
79555
- * - `--toast-border-width`: 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.
80859
+ * - `--toast-border-width`: 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.
79556
80860
  * - `--toast-color`: Color of the message's text.
79557
80861
  * - `--toast-description-color`: Color of the line in the `description` slot, under the heading.
79558
80862
  * - `--toast-dismiss-color`: Color of the dismiss control's mark at rest.
@@ -80720,7 +82024,7 @@ export type CustomElements<F extends Framework = "other"> = {
80720
82024
  * CSS variables available for styling the component.
80721
82025
  *
80722
82026
  * - `--tour-arrow-size`: The size of the arrow's box, before it is rotated.
80723
- * - `--tour-border-width`: 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.
82027
+ * - `--tour-border-width`: 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.
80724
82028
  * - `--tour-bubble-size`: The widest the panel can grow.
80725
82029
  * - `--tour-padding`: The padding inside the panel.
80726
82030
  * - `--tour-shadow`: The shadow under the panel. It follows `--helix-shadow-floating`. The panel can sit over any content, so it has a shadow by default.
@@ -80997,6 +82301,10 @@ export type CustomElements<F extends Framework = "other"> = {
80997
82301
  * the same fault `href` and `target` had on `Button`. The resting arrangement
80998
82302
  * is the absence of the attribute, and the stylesheet only asks about `end`.
80999
82303
  *
82304
+ * `label` sets the chevron against the end of a branch's name, where the name
82305
+ * takes only its own width, and leaves the `end` slot at the row's far side.
82306
+ * A leaf is unchanged, since it has no chevron.
82307
+ *
81000
82308
  * It is worth owning rather than leaving to `::part(toggle)`, which a
81001
82309
  * consumer could reach for: the naive version is `order` plus an auto margin,
81002
82310
  * and the row's `end` slot already carries an auto margin of its own, so the
@@ -82344,6 +83652,114 @@ export type CustomElements<F extends Framework = "other"> = {
82344
83652
  "helix-virtual-list": Partial<
82345
83653
  HelixVirtualListProps & BaseProps<HelixVirtualList, F> & BaseEvents<HelixVirtualList>
82346
83654
  >;
83655
+
83656
+ /**
83657
+ * Two drawings, chosen with `variant`:
83658
+ *
83659
+ * - `spectrum`: a row of thin rounded bars, one for each frequency band in
83660
+ * `bands`, tallest in the middle. The middle half of the row takes the
83661
+ * stronger color. A quiet bar rests as a dot.
83662
+ * - `waves`: three sine lines with different speeds, phases, and weights, held
83663
+ * to the center line at both ends. `level` sets how far they swing, and a
83664
+ * quiet level rests as a flat line.
83665
+ *
83666
+ * Set `level` and `bands` from your audio as often as you have readings, about
83667
+ * 30 times a second. Each bar and wave eases toward its reading: up fast and
83668
+ * down slower. A spectrum given no `bands` draws every bar from `level`.
83669
+ *
83670
+ * The drawing stops when it is off screen, in a background tab, or after the
83671
+ * level has been zero for under a second, and starts again with the next
83672
+ * reading. With `prefers-reduced-motion`, it draws one bar from the middle
83673
+ * over a faint track, whose length is the level, and redraws it on each
83674
+ * reading. With `still`, it draws either drawing as a still picture of its
83675
+ * readings, whatever the motion preference.
83676
+ *
83677
+ * The level is an image named by `label`. A meter's value would be announced
83678
+ * on every change, and a level changes many times a second.
83679
+ *
83680
+ * Voice Level is styled only and has behavior, which the tier split does not
83681
+ * otherwise allow. Its role and name are set on the host, and the rest is
83682
+ * drawing to a canvas.
83683
+ *
83684
+ * ## Attributes & Properties
83685
+ *
83686
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
83687
+ *
83688
+ * - `bands`: How loud each frequency band is, from `0` to `1`, lowest band first.
83689
+ *
83690
+ * Each bar of the spectrum follows one band. Where there are more or fewer
83691
+ * bands than bars, each bar reads between the two nearest bands. Empty draws
83692
+ * every bar from `level`. Written as an attribute, the numbers are separated
83693
+ * by spaces or commas: `bands="0.1 0.4 0.6 0.3"`. Assign an array to the
83694
+ * property for readings that change many times a second.
83695
+ * - `fallback-label`/`fallbackLabel`: The name where `label` is empty. Translate it with the rest of your
83696
+ * interface.
83697
+ * - `label`: The name read by screen readers, such as "Your voice". Defaults to
83698
+ * `fallbackLabel`.
83699
+ * - `level`: How loud the voice is, from `0` for silence to `1`.
83700
+ *
83701
+ * It sets how far the waves swing, the length of the still bar under
83702
+ * `prefers-reduced-motion`, and every bar of a spectrum that has no
83703
+ * `bands`. A value outside the range is drawn at the nearer end.
83704
+ * - `still`: Draws the readings as a still picture: each bar at its band and the waves
83705
+ * at one fixed moment, swung as far as `level`.
83706
+ *
83707
+ * For a level that holds, such as the loudness of a recorded clip or a
83708
+ * picture of the drawing. No frame loop runs, and each new reading is drawn
83709
+ * at once with no easing. Because nothing moves, the drawing is the same
83710
+ * under `prefers-reduced-motion`. Clearing it starts the motion from the
83711
+ * readings as they are.
83712
+ * - `variant`: The drawing: a row of bars, one for each band, or three moving waves.
83713
+ *
83714
+ * Reflected because the stylesheet sizes each drawing differently. Absent
83715
+ * is `spectrum`, the resting value, which selects nothing.
83716
+ * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
83717
+ *
83718
+ * **Named `whenSettled` because `settled` is taken four times over**, by
83719
+ * Image, Splitter and both color controls, none of them about transitions. A
83720
+ * base class takes the name every subclass then cannot use.
83721
+ *
83722
+ * **The state it reports cannot be watched, which is why this exists.** A
83723
+ * custom state is deliberately not in the DOM, so there is no
83724
+ * `MutationObserver` equivalent for `ElementInternals.states`. Await this
83725
+ * instead.
83726
+ *
83727
+ * Separate from `updateComplete`, which resolves in the microtask checkpoint
83728
+ * the suppression is still active in. That is the distinction `readyToMove`
83729
+ * in `@fusion.dev/helix-testing` is written around.
83730
+ *
83731
+ * It never resolves where `requestAnimationFrame` never fires, which is a
83732
+ * server, a hidden tab, and happy-dom. Callers that must not hang there race
83733
+ * it against a timeout, as the happy-dom harness's `readyToMove` does. The
83734
+ * browser harness's awaits it alone: a browser always runs the frame, and a
83735
+ * timer beside it was a bet on how long one takes, which a busy run lost. (property only) (readonly)
83736
+ *
83737
+ * ## CSS Custom Properties
83738
+ *
83739
+ * CSS variables available for styling the component.
83740
+ *
83741
+ * - `--voice-level-accent-color`: The color of the second wave. Defaults to the accent color.
83742
+ * - `--voice-level-bars`: How many bars the spectrum draws, from 3 to 96. Defaults to `24`.
83743
+ * - `--voice-level-block-size`: The height. Defaults to the icon size for `spectrum` and the control size for `waves`.
83744
+ * - `--voice-level-color`: The color of the center bars and the main wave. Defaults to the primary color.
83745
+ * - `--voice-level-edge-color`: The color of the bars at either end. Defaults to `--voice-level-color` at 55 percent.
83746
+ * - `--voice-level-inline-size`: The width. Defaults to four times the height for `spectrum` and three times for `waves`.
83747
+ *
83748
+ * ## CSS Parts
83749
+ *
83750
+ * Custom selectors for styling elements within the component.
83751
+ *
83752
+ * - `canvas`: The canvas the level is drawn on.
83753
+ *
83754
+ * ## CSS States
83755
+ *
83756
+ * These can be used to apply styling when a component is in a given state.
83757
+ *
83758
+ * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
83759
+ */
83760
+ "helix-voice-level": Partial<
83761
+ HelixVoiceLevelProps & BaseProps<HelixVoiceLevel, F> & BaseEvents<HelixVoiceLevel>
83762
+ >;
82347
83763
  };
82348
83764
 
82349
83765
  export type CustomElementsSolidJs = {
@@ -84532,7 +85948,7 @@ export type CustomElementsSolidJs = {
84532
85948
  * - `expand`: The button after the first crumb of a folded slotted trail, which shows the folded crumbs.
84533
85949
  * - `fold-separator`: The chevron before that button.
84534
85950
  * - `link`: The crumb itself, which is an `<a>` where `href` is set.
84535
- * - `separator-mark`: The chevron between crumbs, shown when no separator is slotted.
85951
+ * - `separator-mark`: The chevron between crumbs, or the slash under the trail's `separator="slash"`, shown when no separator is slotted.
84536
85952
  *
84537
85953
  * ## CSS States
84538
85954
  *
@@ -84577,6 +85993,18 @@ export type CustomElementsSolidJs = {
84577
85993
  * - `max-items`/`maxItems`: The most crumbs a trail drawn from `items` shows before it folds its middle
84578
85994
  * into one, counting the first and the last. Unset, it never folds. At least
84579
85995
  * 2, so the first crumb and the current page always show.
85996
+ * - `separator`: The mark between one crumb and the next, for the whole trail. Unset is a
85997
+ * chevron; `slash` is a slash, as a path or a repository and its branch is
85998
+ * written.
85999
+ *
86000
+ * **On the trail rather than on each crumb**, because the marks are one
86001
+ * decision: a trail whose separators differ from crumb to crumb is a
86002
+ * mistake, and a trail drawn from `items` has no crumb of yours to set it
86003
+ * on. A crumb's own `separator` slot still replaces its mark, for the rare
86004
+ * crumb that needs something else.
86005
+ *
86006
+ * Optional and reflected, per the rule that a reflected property takes no
86007
+ * default, so a stylesheet can select on it.
84580
86008
  * - `items`: The trail as data, drawn as crumbs before any you slot. The last item is the
84581
86009
  * current page.
84582
86010
  *
@@ -84631,7 +86059,7 @@ export type CustomElementsSolidJs = {
84631
86059
  * - `crumb-fold-separator`: The chevron before that button.
84632
86060
  * - `crumb-link`: The link, or the current page's words, of a crumb drawn from `items`.
84633
86061
  * - `crumb-separator`: The separator before a crumb drawn from `items`.
84634
- * - `crumb-separator-mark`: The chevron before a crumb drawn from `items`.
86062
+ * - `crumb-separator-mark`: The chevron, or the slash under `separator="slash"`, before a crumb drawn from `items`.
84635
86063
  *
84636
86064
  * ## CSS States
84637
86065
  *
@@ -84853,6 +86281,20 @@ export type CustomElementsSolidJs = {
84853
86281
  * name to derive one rather than dash-casing it, and what a consumer writes
84854
86282
  * is the platform's `commandfor`.
84855
86283
  * - `commandfor`/`commandFor`: The id of the element the command is sent to.
86284
+ * - `focusable-when-disabled`/`focusableWhenDisabled`: Whether a disabled button stays in the tab order, so a tooltip around it
86285
+ * can say why it is disabled.
86286
+ *
86287
+ * Set it on a button whose reason a Tooltip gives, such as a Save with no
86288
+ * changes to save. While the button is disabled, it keeps focus and takes
86289
+ * hover, and it refuses every press: a click, Enter and Space, and Enter in
86290
+ * a field of its form. The click does not reach your listeners, and a submit
86291
+ * button submits nothing. The inner control carries `aria-disabled` in place
86292
+ * of the native `disabled`, so a screen reader still says it is unavailable.
86293
+ * The styled button keeps the disabled look.
86294
+ *
86295
+ * Leave it unset on a button with no reason to give. A plain disabled button
86296
+ * leaves the tab order, as a native one does, and a keyboard reader skips a
86297
+ * stop that does nothing. Set `pending` for the wait after a press.
84856
86298
  * - `formaction`/`formAction`: Where this button's submission goes, overriding the form's own.
84857
86299
  *
84858
86300
  * **The five `form*` overrides ride on a native submit button that stands in
@@ -85952,6 +87394,16 @@ export type CustomElementsSolidJs = {
85952
87394
  * - `pan-up-spinner`: The ring `pan-up` turns while it is pending.
85953
87395
  * - `pan-up-text`: The box `pan-up`'s glyph sits in.
85954
87396
  * - `region`: The named region the board is drawn in.
87397
+ * - `tooltip-arrow`: The arrow of the tooltip that names each button, forwarded from `Tooltip`.
87398
+ * - `tooltip-arrow-bottom`: The arrow while the bubble is below its button, on the bubble's top edge. Set together with `tooltip-arrow`.
87399
+ * - `tooltip-arrow-left`: The arrow while the bubble is left of its button, on the bubble's right edge. Set together with `tooltip-arrow`.
87400
+ * - `tooltip-arrow-right`: The arrow while the bubble is right of its button, on the bubble's left edge. Set together with `tooltip-arrow`.
87401
+ * - `tooltip-arrow-top`: The arrow while the bubble is above its button, on the bubble's bottom edge. Set together with `tooltip-arrow`.
87402
+ * - `tooltip-surface`: The bubble of the tooltip that names each button, forwarded from `Tooltip`.
87403
+ * - `tooltip-surface-bottom`: The bubble while it is below its button. Set together with `tooltip-surface`.
87404
+ * - `tooltip-surface-left`: The bubble while it is left of its button. Set together with `tooltip-surface`.
87405
+ * - `tooltip-surface-right`: The bubble while it is right of its button. Set together with `tooltip-surface`.
87406
+ * - `tooltip-surface-top`: The bubble while it is above its button. Set together with `tooltip-surface`.
85955
87407
  * - `viewport`: The box the board is drawn inside.
85956
87408
  * - `zoom-in`: The button that zooms in.
85957
87409
  * - `zoom-in-button`: `zoom-in`'s inner button.
@@ -86501,15 +87953,36 @@ export type CustomElementsSolidJs = {
86501
87953
  >;
86502
87954
 
86503
87955
  /**
86504
- * The composer is one row, and the field takes the remaining width. The field
86505
- * grows with its text up to a maximum height, through `field-sizing: content`.
86506
- * Where that is not supported, the field keeps its rows and scrolls. The
86507
- * maximum height keeps the composer from covering the transcript.
87956
+ * The composer is one box. What the draft carries sits at its top, in a row
87957
+ * that wraps, inset to the line the caret starts on. The field grows with its
87958
+ * text up to a maximum height, through `field-sizing: content`. Where that is
87959
+ * not supported, the field keeps its rows and scrolls. The maximum height
87960
+ * keeps the composer from covering the transcript.
87961
+ *
87962
+ * With two `placeholders` or more, each example rolls into the next: the one
87963
+ * showing rises a little as it fades and blurs, and the next rises into its
87964
+ * place from below as it fades in, the two crossing so the field is never
87965
+ * empty. A box that changes height for the next example changes as it
87966
+ * lands. Where the browser has no CSS anchor
87967
+ * positioning, the examples fade into each other in the field's own
87968
+ * placeholder.
86508
87969
  *
86509
87970
  * ## Attributes & Properties
86510
87971
  *
86511
87972
  * Component attributes and properties that can be applied to the element or by using JavaScript.
86512
87973
  *
87974
+ * - `glow`: Draws the composer's focus as a glow: a light that runs once around the
87975
+ * edge as the composer takes focus, then a soft steady edge while it holds
87976
+ * it, in place of the focus ring.
87977
+ *
87978
+ * **On focus, and only then.** It says the composer is listening. A glow
87979
+ * that ran while a reply was on its way would be a second indicator of what
87980
+ * the conversation already shows, and one that ran all the time would be
87981
+ * decoration that moves. With reduced motion asked for, the edge lights
87982
+ * without the sweep.
87983
+ *
87984
+ * The steady edge is the focus indicator, so the ring is not drawn as well.
87985
+ * Its color is `--chat-composer-glow-color`, the primary color unless set.
86513
87986
  * - `listening-label`/`listeningLabel`: What a screen reader hears as listening starts.
86514
87987
  * - `stopped-listening-label`/`stoppedListeningLabel`: What a screen reader hears as listening stops.
86515
87988
  * - `voice`: Draws a button that listens for dictation and types what it hears at
@@ -86518,6 +87991,16 @@ export type CustomElementsSolidJs = {
86518
87991
  * `email` or `number` draws no button.
86519
87992
  * - `voice-label`/`voiceLabel`: The dictation button's name while it is not listening.
86520
87993
  * - `voice-stop-label`/`voiceStopLabel`: The dictation button's name while it listens.
87994
+ * - `attached`: Whether the draft holds something besides its text, such as an attached
87995
+ * file. The draft then counts as one though the field is empty, so the
87996
+ * send button shows in place of the `idle` slot.
87997
+ * - `busy`: Whether a reply is on its way. While set, the send button is a stop
87998
+ * button that sends `helix-stop`, and the draft does not send.
87999
+ *
88000
+ * **The same button rather than one beside it**, because sending and
88001
+ * stopping are never both possible: while a reply is on its way there is
88002
+ * nothing to send to, and the place the reader's eye goes to act is the
88003
+ * place that can act. The field stays open for the next turn.
86521
88004
  * - `feedback`: A message about the draft, shown under the field. While set, the composer
86522
88005
  * is invalid, does not send, and does not submit, as a field's `feedback`
86523
88006
  * does, and the message is announced as it appears.
@@ -86526,12 +88009,28 @@ export type CustomElementsSolidJs = {
86526
88009
  * - `minlength`/`minLength`: The fewest characters a draft can have, once the reader has written in
86527
88010
  * the field, as on a `<textarea>`.
86528
88011
  * - `placeholder`: Placeholder text shown in an empty field.
88012
+ * - `queue`: Whether Enter sends while `busy`, for a page that queues the turn or
88013
+ * hands it to the reply under way.
88014
+ *
88015
+ * Off by default, because a page that does neither would drop the turn: it
88016
+ * has nowhere to put a message while a reply is coming. The button stays
88017
+ * the stop button either way, since stopping is still the one thing it
88018
+ * should do while a reply is on its way.
86529
88019
  * - `required`: Whether the form needs a draft to submit. An empty draft never sends,
86530
88020
  * required or not.
86531
88021
  * - `rows`: How many rows the field opens at.
86532
88022
  *
86533
88023
  * It grows from there.
88024
+ * - `send-disabled`/`sendDisabled`: Whether the draft waits to be sent, such as while an attachment is still
88025
+ * read. The send button is unavailable and Enter does not send, while the
88026
+ * field stays open. The stop button shown while `busy` still stops.
86534
88027
  * - `send-label`/`sendLabel`: Label for the send button.
88028
+ * - `send-reason`/`sendReason`: Why the draft waits, such as "Reading photo.jpg", shown in a tooltip on
88029
+ * the send button while `send-disabled` is set. The button then stays in
88030
+ * the tab order and takes the pointer, with `aria-disabled` in place of
88031
+ * `disabled`, so the reason can be reached by keyboard and by pointer, as
88032
+ * Button's `focusable-when-disabled` does. A press still sends nothing.
88033
+ * - `stop-label`/`stopLabel`: Label for the stop button shown while `busy`.
86535
88034
  * - `submit-on`/`submitOn`: What sends the turn: `enter` for the Enter key, or `button` for the send
86536
88035
  * button only.
86537
88036
  *
@@ -86571,6 +88070,22 @@ export type CustomElementsSolidJs = {
86571
88070
  * - `speechEngine`: The engine this field listens through, in place of the one
86572
88071
  * `registerSpeechEngine` gave the page, or the browser's own. (property only)
86573
88072
  * - `listening`: Whether the field is listening for dictation now. (property only) (readonly)
88073
+ * - `placeholders`: Examples the empty field shows in turn, in place of `placeholder`, such
88074
+ * as tasks a reader might ask for. Each shows for 6.5 seconds, and a longer
88075
+ * one shows longer, up to 10 seconds.
88076
+ *
88077
+ * **Each is the field's placeholder in its turn**, so a screen reader that
88078
+ * reaches the field hears the one showing. The swap runs through
88079
+ * `:state(example-leaving)`, as one example leaves, and
88080
+ * `:state(example-entering)`, as the next arrives.
88081
+ *
88082
+ * **They move only while nobody is about to write, and while the reader
88083
+ * can see them.** An empty field without focus moves on. Focus or text
88084
+ * holds the example showing, and an example already leaving finishes its
88085
+ * turn. A composer scrolled out of view holds its example, and the example
88086
+ * gets its full time again when the composer comes back. Where the reader
88087
+ * asked for less motion, or the page paused its motion, the first example
88088
+ * stays. (property only)
86574
88089
  * - `typing`: Whether the user is writing: true from their first keystroke until they
86575
88090
  * send, clear the field, or pause for `typing-timeout` milliseconds. (property only) (readonly)
86576
88091
  * - `validity`: Whether the control meets its constraints, and why not. (property only) (readonly)
@@ -86606,6 +88121,7 @@ export type CustomElementsSolidJs = {
86606
88121
  * - `helix-before-listen`: The dictation button was pressed. Cancelable: cancel it to keep the composer from listening.
86607
88122
  * - `helix-listen`: Dictation settled on a phrase and put it in the draft, after the draft's own `input`.
86608
88123
  * - `helix-send`: Fired when the user sends their turn, and cancelable.
88124
+ * - `helix-stop`: Fired when the user presses the stop button, shown in place of the send button while `busy` is set.
86609
88125
  * - `helix-typing`: The user started or stopped writing, with `typing` saying which, as the composer's `typing` does.
86610
88126
  * - `input`: 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.
86611
88127
  *
@@ -86613,8 +88129,10 @@ export type CustomElementsSolidJs = {
86613
88129
  *
86614
88130
  * Areas where markup can be added to the component.
86615
88131
  *
88132
+ * - `attachments`: What the draft carries, such as images or files, inside the box and above the field.
86616
88133
  * - `end`: Content under the field, beside the send button.
86617
88134
  * - `start`: Content under the field at the leading edge, such as an attachment button or a model picker.
88135
+ * - `idle`: A control shown in place of the send button while the draft is empty and no reply is on its way, such as a button that starts a voice conversation.
86618
88136
  *
86619
88137
  * ## Methods
86620
88138
  *
@@ -86687,6 +88205,7 @@ export type CustomElementsSolidJs = {
86687
88205
  *
86688
88206
  * - `--chat-composer-background-color`: Fill behind the composer.
86689
88207
  * - `--chat-composer-border-width`: Width of the composer's edge, so your theme can remove it.
88208
+ * - `--chat-composer-glow-color`: Color of the focus glow under `glow`. Defaults to the primary color.
86690
88209
  * - `--chat-composer-max-block-size`: Maximum height the field grows to.
86691
88210
  * - `--dictation-level`: 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.
86692
88211
  *
@@ -86694,13 +88213,27 @@ export type CustomElementsSolidJs = {
86694
88213
  *
86695
88214
  * Custom selectors for styling elements within the component.
86696
88215
  *
88216
+ * - `attachments`: The row above the field that holds the `attachments` slot, inset to the field's text and hidden while the slot is empty.
88217
+ * - `example`: The example drawn over the empty field while `placeholders` holds two or more, in the field's box. It is a second field that shows only its placeholder, hidden from screen readers. Style its `::placeholder` where you style the field's.
88218
+ * - `example-leaving`: The example on its way out while the next comes in, for its first 250 milliseconds. Set together with `example`.
86697
88219
  * - `field`: The text field.
86698
88220
  * - `send`: The send button.
86699
88221
  * - `tools`: The row under the field.
86700
88222
  * - `composer`: The whole composer.
86701
88223
  * - `end`: The box around the `end` slot.
86702
88224
  * - `feedback`: The `feedback` message, under the field while it is set.
86703
- * - `mark`: The icon inside the send button.
88225
+ * - `idle`: The box around the `idle` slot, shown in the send button's place while the draft is empty.
88226
+ * - `mark`: The icon inside the send button, a return key, or a square while `busy`.
88227
+ * - `reason-arrow`: The arrow of the bubble that says `send-reason`, forwarded from `Tooltip`.
88228
+ * - `reason-arrow-bottom`: The arrow while the bubble is below the send button, on the bubble's top edge. Set together with `reason-arrow`.
88229
+ * - `reason-arrow-left`: The arrow while the bubble is left of the send button, on the bubble's right edge. Set together with `reason-arrow`.
88230
+ * - `reason-arrow-right`: The arrow while the bubble is right of the send button, on the bubble's left edge. Set together with `reason-arrow`.
88231
+ * - `reason-arrow-top`: The arrow while the bubble is above the send button, on the bubble's bottom edge. Set together with `reason-arrow`.
88232
+ * - `reason-surface`: The bubble that says `send-reason` over the send button, forwarded from `Tooltip`.
88233
+ * - `reason-surface-bottom`: The bubble while it is below the send button. Set together with `reason-surface`.
88234
+ * - `reason-surface-left`: The bubble while it is left of the send button. Set together with `reason-surface`.
88235
+ * - `reason-surface-right`: The bubble while it is right of the send button. Set together with `reason-surface`.
88236
+ * - `reason-surface-top`: The bubble while it is above the send button. Set together with `reason-surface`.
86704
88237
  * - `start`: The box around the `start` slot.
86705
88238
  * - `voice`: The dictation button, under `voice`, before the send button.
86706
88239
  * - `voice-listening`: The dictation button while it listens. Set alongside `voice`.
@@ -86710,6 +88243,8 @@ export type CustomElementsSolidJs = {
86710
88243
  *
86711
88244
  * These can be used to apply styling when a component is in a given state.
86712
88245
  *
88246
+ * - `example-entering`: The example in the empty field has just replaced the one before it, for an entrance. It holds for 350 milliseconds. See `placeholders`.
88247
+ * - `example-leaving`: The example in the empty field is giving way to the next one, for an exit. It holds for 250 milliseconds, and the next example becomes the placeholder 100 milliseconds in, so the two can cross. See `placeholders`.
86713
88248
  * - `invalid`: The draft fails `required`, `minlength`, `maxlength`, or a custom error, and the reader has tried to send or submit it, or edited the field and left it. Or `feedback` is set.
86714
88249
  * - `listening`: While the composer listens for dictation. The element sets `--dictation-level` on itself meanwhile, from 0 to 1, for a meter.
86715
88250
  * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
@@ -86813,6 +88348,7 @@ export type CustomElementsSolidJs = {
86813
88348
  *
86814
88349
  * - `(default)`: The turn's content.
86815
88350
  * - `actions`: Controls for the turn.
88351
+ * - `attachments`: What the turn carries, such as images or files, above the bubble.
86816
88352
  * - `avatar`: The author's avatar.
86817
88353
  * - `indicator`: The indicator shown before the first token arrives. Replaces the three dots.
86818
88354
  * - `sources`: The turn's sources, such as citations, documents, or a retrieved page.
@@ -86841,6 +88377,7 @@ export type CustomElementsSolidJs = {
86841
88377
  * - `indicator`: The three dots, shown when nothing is in the `indicator` slot.
86842
88378
  * - `meta`: The time and the state together.
86843
88379
  * - `actions`: The controls on the turn, beside its time.
88380
+ * - `attachments`: The box around the `attachments` slot, above the content and outside the bubble.
86844
88381
  * - `avatar`: The box around the `avatar` slot.
86845
88382
  * - `body`: The content and the line under it.
86846
88383
  * - `mark`: The status icon beside a failure.
@@ -87046,6 +88583,7 @@ export type CustomElementsSolidJs = {
87046
88583
  * - `loading`: Shown while the history loads.
87047
88584
  * - `message`: The message drawn for a turn from `turns`, forwarded whole.
87048
88585
  * - `message-actions`: The controls on a turn from `turns`, beside its time.
88586
+ * - `message-attachments`: The attachments above the bubble of a turn from `turns`.
87049
88587
  * - `message-avatar`: The avatar box of a turn from `turns`.
87050
88588
  * - `message-avatar-mine`: The avatar box of a turn from `turns` by `me`.
87051
88589
  * - `message-body`: The content of a turn from `turns`, and the line under it.
@@ -88890,7 +90428,7 @@ export type CustomElementsSolidJs = {
88890
90428
  *
88891
90429
  * - `--color-input-background-color`: Fill behind the field.
88892
90430
  * - `--color-input-border-color`: Color of the panel's edge.
88893
- * - `--color-input-border-width`: 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.
90431
+ * - `--color-input-border-width`: 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.
88894
90432
  * - `--color-input-panel-size`: Width of the panel, and so of the square.
88895
90433
  * - `--color-input-shadow`: Shadow under the panel. Defaults to `--helix-shadow-floating`, so the panel keeps a shadow over any content below it. `--helix-shadow-floating`: a floating surface sits over content nobody can predict, so it keeps a lift by default.
88896
90434
  * - `--color-input-swatch-radius`: Corner radius of the swatch in `variant="swatch"`.
@@ -89729,7 +91267,7 @@ export type CustomElementsSolidJs = {
89729
91267
  *
89730
91268
  * - `--combobox-background-color`: Fill behind the field.
89731
91269
  * - `--combobox-border-color`: Color of the panel's edge.
89732
- * - `--combobox-border-width`: 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.
91270
+ * - `--combobox-border-width`: 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.
89733
91271
  * - `--combobox-control-size`: Smallest the text field shrinks to once tags share its line.
89734
91272
  * - `--combobox-panel-size`: Width of the panel. Follows the field by default.
89735
91273
  * - `--combobox-shadow`: Shadow under the panel. Follows `--helix-shadow-floating`. A floating panel can sit over any content, so it has a shadow by default.
@@ -89803,6 +91341,16 @@ export type CustomElementsSolidJs = {
89803
91341
  *
89804
91342
  * Component attributes and properties that can be applied to the element or by using JavaScript.
89805
91343
  *
91344
+ * - `material`: The panel's surface: `frosted` or `glass`, as on `Dialog`, which the
91345
+ * palette opens in and hands the value to.
91346
+ *
91347
+ * Absent is the opaque overlay surface. `glass` is the page's translucent
91348
+ * ground over the theme's blur, and `frosted` the same pair turned up, so a
91349
+ * page whose panels are frosted has a palette that matches. Its strength is
91350
+ * the theme's, as on `Popover`, `Menu` and `Drawer`.
91351
+ *
91352
+ * **No `transparent`, deliberately.** A palette over arbitrary page content
91353
+ * is only readable because it has a ground.
89806
91354
  * - `default-open`/`defaultOpen`: Whether the element starts open. Ignored once `open` is written.
89807
91355
  * - `open`: Whether the element is open.
89808
91356
  *
@@ -89960,6 +91508,7 @@ export type CustomElementsSolidJs = {
89960
91508
  * CSS variables available for styling the component.
89961
91509
  *
89962
91510
  * - `--command-list-size`: How tall the list grows before it scrolls.
91511
+ * - `--command-radius`: The corners of the palette's panel. Defaults to the dialog's.
89963
91512
  * - `--command-size`: How wide the palette is. Defaults to `40rem`.
89964
91513
  *
89965
91514
  * ## CSS Parts
@@ -90081,6 +91630,20 @@ export type CustomElementsSolidJs = {
90081
91630
  * It replaces `Button.value`, the submit value: a copy button never submits,
90082
91631
  * whatever its `type`. Declared here so its own page says what it holds.
90083
91632
  * - `aria-label`/`undefined`: undefined
91633
+ * - `focusable-when-disabled`/`focusableWhenDisabled`: Whether a disabled button stays in the tab order, so a tooltip around it
91634
+ * can say why it is disabled.
91635
+ *
91636
+ * Set it on a button whose reason a Tooltip gives, such as a Save with no
91637
+ * changes to save. While the button is disabled, it keeps focus and takes
91638
+ * hover, and it refuses every press: a click, Enter and Space, and Enter in
91639
+ * a field of its form. The click does not reach your listeners, and a submit
91640
+ * button submits nothing. The inner control carries `aria-disabled` in place
91641
+ * of the native `disabled`, so a screen reader still says it is unavailable.
91642
+ * The styled button keeps the disabled look.
91643
+ *
91644
+ * Leave it unset on a button with no reason to give. A plain disabled button
91645
+ * leaves the tab order, as a native one does, and a keyboard reader skips a
91646
+ * stop that does nothing. Set `pending` for the wait after a press.
90084
91647
  * - `pending`: Whether the action the button started is still running.
90085
91648
  *
90086
91649
  * A pending button keeps focus and stays in the tab order, and refuses every
@@ -91143,7 +92706,7 @@ export type CustomElementsSolidJs = {
91143
92706
  *
91144
92707
  * - `--date-input-background-color`: The fill behind the field.
91145
92708
  * - `--date-input-border-color`: The color of the panel's border.
91146
- * - `--date-input-border-width`: 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.
92709
+ * - `--date-input-border-width`: 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.
91147
92710
  * - `--date-input-segment-focus-background-color`: The fill behind the segment with focus, in `segmented`. It follows `--helix-color-primary-surface`.
91148
92711
  * - `--date-input-segment-focus-color`: The text of the segment with focus, in `segmented`.
91149
92712
  * - `--date-input-segment-literal-color`: The text the locale writes between two segments, in `segmented`.
@@ -92061,6 +93624,16 @@ export type CustomElementsSolidJs = {
92061
93624
  * - `screenshot-live`: The screenshot button's live region, which speaks while the button is pending.
92062
93625
  * - `screenshot-spinner`: The ring the screenshot button turns while it is pending.
92063
93626
  * - `screenshot-text`: The box the screenshot button's icon sits in.
93627
+ * - `tooltip-arrow`: The arrow of the tooltip that names each button, forwarded from `Tooltip`.
93628
+ * - `tooltip-arrow-bottom`: The arrow while the bubble is below its button, on the bubble's top edge. Set together with `tooltip-arrow`.
93629
+ * - `tooltip-arrow-left`: The arrow while the bubble is left of its button, on the bubble's right edge. Set together with `tooltip-arrow`.
93630
+ * - `tooltip-arrow-right`: The arrow while the bubble is right of its button, on the bubble's left edge. Set together with `tooltip-arrow`.
93631
+ * - `tooltip-arrow-top`: The arrow while the bubble is above its button, on the bubble's bottom edge. Set together with `tooltip-arrow`.
93632
+ * - `tooltip-surface`: The bubble of the tooltip that names each button, forwarded from `Tooltip`.
93633
+ * - `tooltip-surface-bottom`: The bubble while it is below its button. Set together with `tooltip-surface`.
93634
+ * - `tooltip-surface-left`: The bubble while it is left of its button. Set together with `tooltip-surface`.
93635
+ * - `tooltip-surface-right`: The bubble while it is right of its button. Set together with `tooltip-surface`.
93636
+ * - `tooltip-surface-top`: The bubble while it is above its button. Set together with `tooltip-surface`.
92064
93637
  * - `touch`: A ring where a touch is or was.
92065
93638
  * - `touch-held`: A ring under a finger that is down, beside `touch`, with `show-touches`.
92066
93639
  * - `volume-down`: The Volume down button.
@@ -92102,6 +93675,15 @@ export type CustomElementsSolidJs = {
92102
93675
  *
92103
93676
  * Component attributes and properties that can be applied to the element or by using JavaScript.
92104
93677
  *
93678
+ * - `material`: The panel's surface: `frosted` or `glass`.
93679
+ *
93680
+ * Absent is the opaque overlay surface. `glass` is the page's translucent
93681
+ * ground over the theme's blur, and `frosted` the same pair turned up, as
93682
+ * on `Popover`, `Menu`, `Drawer` and `Tooltip`, so a page whose panels are
93683
+ * frosted has dialogs that match.
93684
+ *
93685
+ * **No `transparent`, deliberately.** A dialog over arbitrary page content
93686
+ * is only readable because it has a ground.
92105
93687
  * - `size`: How wide the panel is allowed to be.
92106
93688
  *
92107
93689
  * Steps rather than a number, because a dialog's width is a fact about what is
@@ -92277,9 +93859,10 @@ export type CustomElementsSolidJs = {
92277
93859
  *
92278
93860
  * CSS variables available for styling the component.
92279
93861
  *
93862
+ * - `--dialog-backdrop`: Filter applied behind a `frosted` or `glass` panel. Follows the theme's material policy.
92280
93863
  * - `--dialog-background-color`: The panel's fill. Follows `--helix-color-surface-overlay`.
92281
93864
  * - `--dialog-border-color`: Color of the panel's edge.
92282
- * - `--dialog-border-width`: 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.
93865
+ * - `--dialog-border-width`: 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.
92283
93866
  * - `--dialog-color`: Color of the words in the panel. Follows `--helix-color-foreground`.
92284
93867
  * - `--dialog-icon-size`: How big the mark above the title is.
92285
93868
  * - `--dialog-inline-size`: Width of the panel.
@@ -92931,7 +94514,7 @@ export type CustomElementsSolidJs = {
92931
94514
  * - `--drawer-backdrop`: Filter applied behind a `frosted` or `glass` drawer. Follows the theme's material policy. Set it to change the strength on one drawer.
92932
94515
  * - `--drawer-background-color`: Surface behind the panel.
92933
94516
  * - `--drawer-border-color`: Color of the panel's edge.
92934
- * - `--drawer-border-width`: 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.
94517
+ * - `--drawer-border-width`: 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.
92935
94518
  * - `--drawer-padding`: Padding inside the panel.
92936
94519
  * - `--drawer-padding-block-start`: Padding above the header. It is one step larger than the other three sides, so the first line clears the window's edge. Falls back to `--drawer-padding`, so setting that alone sets all four sides.
92937
94520
  * - `--drawer-radius`: Corner radius on the edges that face the page.
@@ -95094,6 +96677,16 @@ export type CustomElementsSolidJs = {
95094
96677
  * - `settling`: What is said while a layout runs unseen, where the reader asked for less motion or the page paused its motion, over the hidden drawing.
95095
96678
  * - `stage`: The drawing and its controls.
95096
96679
  * - `stop-layout`: The button that stops a layout that has run past five seconds, where the notes stand.
96680
+ * - `tooltip-arrow`: The arrow of the tooltip that names each button, forwarded from `Tooltip`.
96681
+ * - `tooltip-arrow-bottom`: The arrow while the bubble is below its button, on the bubble's top edge. Set together with `tooltip-arrow`.
96682
+ * - `tooltip-arrow-left`: The arrow while the bubble is left of its button, on the bubble's right edge. Set together with `tooltip-arrow`.
96683
+ * - `tooltip-arrow-right`: The arrow while the bubble is right of its button, on the bubble's left edge. Set together with `tooltip-arrow`.
96684
+ * - `tooltip-arrow-top`: The arrow while the bubble is above its button, on the bubble's bottom edge. Set together with `tooltip-arrow`.
96685
+ * - `tooltip-surface`: The bubble of the tooltip that names each button, forwarded from `Tooltip`.
96686
+ * - `tooltip-surface-bottom`: The bubble while it is below its button. Set together with `tooltip-surface`.
96687
+ * - `tooltip-surface-left`: The bubble while it is left of its button. Set together with `tooltip-surface`.
96688
+ * - `tooltip-surface-right`: The bubble while it is right of its button. Set together with `tooltip-surface`.
96689
+ * - `tooltip-surface-top`: The bubble while it is above its button. Set together with `tooltip-surface`.
95097
96690
  * - `viewport`: The box the renderer draws in.
95098
96691
  * - `zoom-in`: The zoom in button.
95099
96692
  * - `zoom-in-button`: `zoom-in`'s inner button.
@@ -95701,6 +97294,20 @@ export type CustomElementsSolidJs = {
95701
97294
  * name to derive one rather than dash-casing it, and what a consumer writes
95702
97295
  * is the platform's `commandfor`.
95703
97296
  * - `commandfor`/`commandFor`: The id of the element the command is sent to.
97297
+ * - `focusable-when-disabled`/`focusableWhenDisabled`: Whether a disabled button stays in the tab order, so a tooltip around it
97298
+ * can say why it is disabled.
97299
+ *
97300
+ * Set it on a button whose reason a Tooltip gives, such as a Save with no
97301
+ * changes to save. While the button is disabled, it keeps focus and takes
97302
+ * hover, and it refuses every press: a click, Enter and Space, and Enter in
97303
+ * a field of its form. The click does not reach your listeners, and a submit
97304
+ * button submits nothing. The inner control carries `aria-disabled` in place
97305
+ * of the native `disabled`, so a screen reader still says it is unavailable.
97306
+ * The styled button keeps the disabled look.
97307
+ *
97308
+ * Leave it unset on a button with no reason to give. A plain disabled button
97309
+ * leaves the tab order, as a native one does, and a keyboard reader skips a
97310
+ * stop that does nothing. Set `pending` for the wait after a press.
95704
97311
  * - `formaction`/`formAction`: Where this button's submission goes, overriding the form's own.
95705
97312
  *
95706
97313
  * **The five `form*` overrides ride on a native submit button that stands in
@@ -96320,6 +97927,9 @@ export type CustomElementsSolidJs = {
96320
97927
  *
96321
97928
  * Empty leaves the attribute off, which is the browser's default. Set it to
96322
97929
  * a token like `email` or `bday` to ask for autofill, or to `off` to refuse.
97930
+ * - `autocorrect`: Whether the browser corrects words as the reader types, as the platform's
97931
+ * `autocorrect`. Turn it off, with `autocorrect="off"`, for text that is not
97932
+ * prose, such as an address or a code, which corrections would change.
96323
97933
  * - `clearable`: Whether the field shows a button that empties it.
96324
97934
  *
96325
97935
  * Shown only while there is something to clear, because a control that does
@@ -98566,7 +100176,9 @@ export type CustomElementsSolidJs = {
98566
100176
  *
98567
100177
  * These can be used to apply styling when a component is in a given state.
98568
100178
  *
100179
+ * - `empty`: The group holds nothing to show, so opening it shows nothing.
98569
100180
  * - `open`: The group shows its lines.
100181
+ * - `steps`: The group holds steps of its own, which a stylesheet draws as a tree.
98570
100182
  * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
98571
100183
  */
98572
100184
  "helix-log-group": Partial<
@@ -98698,7 +100310,10 @@ export type CustomElementsSolidJs = {
98698
100310
  * - `plain` has no edge, no fill, no inset and no height of its own: the
98699
100311
  * lines start where the text around them does and the log grows with
98700
100312
  * them. For a log inside something that already frames it, such as an
98701
- * agent's work in a chat turn's `work` slot.
100313
+ * agent's work in a chat turn's `work` slot. Each step is a row with its
100314
+ * status mark on that edge and its caret after the heading. A step that
100315
+ * holds steps draws a rule beside them, and a step that holds lines draws
100316
+ * them on a quiet surface that scrolls after `--log-step-max-block-size`.
98702
100317
  *
98703
100318
  * Both are writable, so a page can say which it means rather than relying
98704
100319
  * on the absence of an attribute.
@@ -98856,6 +100471,7 @@ export type CustomElementsSolidJs = {
98856
100471
  * - `--log-radius`: The corners of the log.
98857
100472
  * - `--log-scrollbar-thumb-color`: The thumb of the scrollbar. Defaults to `--helix-scrollbar-thumb-color`.
98858
100473
  * - `--log-scrollbar-track-color`: The track of the scrollbar. Defaults to `--helix-scrollbar-track-color`.
100474
+ * - `--log-step-max-block-size`: How tall a step's lines may get in a `plain` log before they scroll. Defaults to 20rem.
98859
100475
  * - `--log-ansi-background`: The background a run takes where ANSI swaps the colors and named none. Defaults to the log's own background on the styled tier.
98860
100476
  * - `--log-ansi-black`: The ANSI color black, which codes `30` and `40` draw.
98861
100477
  * - `--log-ansi-blue`: The ANSI color blue, which codes `34` and `44` draw.
@@ -98883,7 +100499,7 @@ export type CustomElementsSolidJs = {
98883
100499
  * - `after`: The space the rows below the drawn ones would take. Only for lines drawn from data.
98884
100500
  * - `before`: The space the rows above the drawn ones would take. Only for lines drawn from data.
98885
100501
  * - `dropped`: The line above the log that says how many earlier lines `limit` let go.
98886
- * - `empty`: Shown when the log has no lines.
100502
+ * - `empty`: Shown when the log has no lines and no steps.
98887
100503
  * - `group-content`: Not drawn: a group drawn from data stands for its heading, and its lines are rows beside it.
98888
100504
  * - `group-duration`: How long a step drawn from `groups` took.
98889
100505
  * - `group-heading`: The heading of a step drawn from `groups`.
@@ -98929,7 +100545,7 @@ export type CustomElementsSolidJs = {
98929
100545
  * These can be used to apply styling when a component is in a given state.
98930
100546
  *
98931
100547
  * - `done`: The run is over: `done` is set, or `source` ended.
98932
- * - `empty`: The log has no lines.
100548
+ * - `empty`: The log has no lines and no steps.
98933
100549
  * - `filtered`: `query` or `level` is set, so only the lines they keep are shown.
98934
100550
  * - `pinned`: The log follows its newest line.
98935
100551
  * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
@@ -99897,6 +101513,16 @@ export type CustomElementsSolidJs = {
99897
101513
  * - `tilt-live`: `tilt`'s live region, which speaks while it is pending.
99898
101514
  * - `tilt-spinner`: The ring `tilt` turns while it is pending.
99899
101515
  * - `tilt-text`: The box `tilt`'s glyph sits in.
101516
+ * - `tooltip-arrow`: The arrow of the tooltip that names each button, forwarded from `Tooltip`.
101517
+ * - `tooltip-arrow-bottom`: The arrow while the bubble is below its button, on the bubble's top edge. Set together with `tooltip-arrow`.
101518
+ * - `tooltip-arrow-left`: The arrow while the bubble is left of its button, on the bubble's right edge. Set together with `tooltip-arrow`.
101519
+ * - `tooltip-arrow-right`: The arrow while the bubble is right of its button, on the bubble's left edge. Set together with `tooltip-arrow`.
101520
+ * - `tooltip-arrow-top`: The arrow while the bubble is above its button, on the bubble's bottom edge. Set together with `tooltip-arrow`.
101521
+ * - `tooltip-surface`: The bubble of the tooltip that names each button, forwarded from `Tooltip`.
101522
+ * - `tooltip-surface-bottom`: The bubble while it is below its button. Set together with `tooltip-surface`.
101523
+ * - `tooltip-surface-left`: The bubble while it is left of its button. Set together with `tooltip-surface`.
101524
+ * - `tooltip-surface-right`: The bubble while it is right of its button. Set together with `tooltip-surface`.
101525
+ * - `tooltip-surface-top`: The bubble while it is above its button. Set together with `tooltip-surface`.
99900
101526
  * - `viewport`: The box the map is drawn in.
99901
101527
  * - `zoom-in`: The button that zooms in.
99902
101528
  * - `zoom-in-button`: `zoom-in`'s inner button.
@@ -100288,7 +101914,7 @@ export type CustomElementsSolidJs = {
100288
101914
  *
100289
101915
  * - `--megamenu-backdrop`: The filter behind the panel, `none` by default. This family has no `material` property, so this and `--megamenu-background-color` set the panel's material.
100290
101916
  * - `--megamenu-background-color`: The panel's fill.
100291
- * - `--megamenu-border-width`: 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.
101917
+ * - `--megamenu-border-width`: 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.
100292
101918
  * - `--megamenu-column-size`: The minimum width of a column before the grid wraps.
100293
101919
  * - `--megamenu-duration`: How long the panel takes to open and close.
100294
101920
  * - `--megamenu-full-size`: The maximum width of the band's contents, which are centered in it.
@@ -100537,6 +102163,19 @@ export type CustomElementsSolidJs = {
100537
102163
  *
100538
102164
  * Component attributes and properties that can be applied to the element or by using JavaScript.
100539
102165
  *
102166
+ * - `material`: The panel's surface: `frosted` or `glass`.
102167
+ *
102168
+ * Absent is the opaque overlay surface. `glass` is the page's translucent
102169
+ * ground over a blur, for a page whose surfaces are glass, so a panel opened
102170
+ * over a glass window is not the one opaque slab on it. `frosted` is the same
102171
+ * pair turned up, a ground that admits less and a heavier blur.
102172
+ *
102173
+ * The strength is the theme's: `--helix-material-translucent`,
102174
+ * `--helix-material-translucent-strong` and `--helix-material-backdrop` are
102175
+ * what the policy moves. `Drawer` and `Tooltip` carry the same attribute.
102176
+ *
102177
+ * **No `transparent`, deliberately.** A panel floating over arbitrary page
102178
+ * content is only readable because it has a ground.
100540
102179
  * - `empty-text`/`emptyText`: The text shown and announced when there are no rows and none are loading.
100541
102180
  * - `loading`: Whether the rows are still loading.
100542
102181
  *
@@ -100686,9 +102325,10 @@ export type CustomElementsSolidJs = {
100686
102325
  *
100687
102326
  * CSS variables available for styling the component.
100688
102327
  *
102328
+ * - `--menu-backdrop`: Filter applied behind a `frosted` or `glass` panel. Follows the theme's material policy.
100689
102329
  * - `--menu-background-color`: Fill of the surface.
100690
102330
  * - `--menu-border-color`: Color of the panel's edge.
100691
- * - `--menu-border-width`: 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.
102331
+ * - `--menu-border-width`: 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.
100692
102332
  * - `--menu-max-block-size`: The tallest the menu grows before it scrolls.
100693
102333
  * - `--menu-min-inline-size`: The narrowest the menu gets.
100694
102334
  * - `--menu-shadow`: Shadow under the panel. Defaults to `--helix-shadow-floating`, so the panel keeps a shadow over any content below it.
@@ -100784,6 +102424,7 @@ export type CustomElementsSolidJs = {
100784
102424
  *
100785
102425
  * These can be used to apply styling when a component is in a given state.
100786
102426
  *
102427
+ * - `start`: A row in the section has content before its label, so every row in it keeps the leading column. The menu decides it for each section, apart from the rows outside one.
100787
102428
  * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
100788
102429
  */
100789
102430
  "helix-menu-section": Partial<
@@ -100972,6 +102613,7 @@ export type CustomElementsSolidJs = {
100972
102613
  * Areas where markup can be added to the component.
100973
102614
  *
100974
102615
  * - `label`: A visible label, above a bar and under a ring or an arc. Its words name it in place of `label`.
102616
+ * - `(default)`: `Meter.Segment` elements, one for each share of the whole, drawn in the bar.
100975
102617
  *
100976
102618
  * ## CSS Custom Properties
100977
102619
  *
@@ -100993,6 +102635,7 @@ export type CustomElementsSolidJs = {
100993
102635
  * - `--meter-along`: Where a bound sits on the arc, as a length along it.
100994
102636
  * - `--meter-at`: Where a bound sits on a linear track, as a percentage.
100995
102637
  * - `--meter-fraction`: The value as a fraction of the range, 0 to 1.
102638
+ * - `--meter-span`: How much the range holds, `max` less `min`, which a segment divides its own value by to find its width.
100996
102639
  * - `--meter-sweep`: How much of the circle the arc covers, as a path length.
100997
102640
  *
100998
102641
  * ## CSS Parts
@@ -101029,6 +102672,87 @@ export type CustomElementsSolidJs = {
101029
102672
  BaseEvents<HelixMeter>
101030
102673
  >;
101031
102674
 
102675
+ /**
102676
+ * Each segment takes the next color in the chart series, in the order written, so
102677
+ * two of them are told apart without being given a color. A `tone` is what a
102678
+ * segment means, and takes the place of its turn. A hairline in the track's ground
102679
+ * sits between neighbors, so the boundary is there for a reader who cannot tell
102680
+ * two of the colors apart.
102681
+ *
102682
+ * Write the segments inside a meter, and the page imports the family beside it:
102683
+ *
102684
+ * ```js
102685
+ * import '@fusion.dev/helix/meter'
102686
+ * ```
102687
+ *
102688
+ * ## Attributes & Properties
102689
+ *
102690
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
102691
+ *
102692
+ * - `label`: What the segment is, such as "Tools", which names the slice when a pointer
102693
+ * rests on it.
102694
+ *
102695
+ * Not announced: see the note on a meter's children above.
102696
+ * - `tone`: What the segment means, as it does on a callout. Takes the tone's color in
102697
+ * place of the next color in the series.
102698
+ * - `value`: How much of the meter's range the segment takes, in the units of the meter's
102699
+ * `min` and `max`.
102700
+ *
102701
+ * A value that is not a number, or is below zero, draws nothing.
102702
+ * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
102703
+ *
102704
+ * **Named `whenSettled` because `settled` is taken four times over**, by
102705
+ * Image, Splitter and both color controls, none of them about transitions. A
102706
+ * base class takes the name every subclass then cannot use.
102707
+ *
102708
+ * **The state it reports cannot be watched, which is why this exists.** A
102709
+ * custom state is deliberately not in the DOM, so there is no
102710
+ * `MutationObserver` equivalent for `ElementInternals.states`. Await this
102711
+ * instead.
102712
+ *
102713
+ * Separate from `updateComplete`, which resolves in the microtask checkpoint
102714
+ * the suppression is still active in. That is the distinction `readyToMove`
102715
+ * in `@fusion.dev/helix-testing` is written around.
102716
+ *
102717
+ * It never resolves where `requestAnimationFrame` never fires, which is a
102718
+ * server, a hidden tab, and happy-dom. Callers that must not hang there race
102719
+ * it against a timeout, as the happy-dom harness's `readyToMove` does. The
102720
+ * browser harness's awaits it alone: a browser always runs the frame, and a
102721
+ * timer beside it was a bet on how long one takes, which a busy run lost. (property only) (readonly)
102722
+ *
102723
+ * ## Slots
102724
+ *
102725
+ * Areas where markup can be added to the component.
102726
+ *
102727
+ * - `(default)`: Nothing. A segment draws its share and has no content.
102728
+ *
102729
+ * ## CSS Custom Properties
102730
+ *
102731
+ * CSS variables available for styling the component.
102732
+ *
102733
+ * - `--meter-segment-color`: The slice's color. Overrides the series and the tone.
102734
+ * - `--meter-segment-gap-color`: The color of the hairline between neighbors.
102735
+ * - `--meter-segment-value`: How much of the range the segment takes, in the meter's own units.
102736
+ *
102737
+ * ## CSS Parts
102738
+ *
102739
+ * Custom selectors for styling elements within the component.
102740
+ *
102741
+ * - `fill`: The slice of the bar the segment takes.
102742
+ *
102743
+ * ## CSS States
102744
+ *
102745
+ * These can be used to apply styling when a component is in a given state.
102746
+ *
102747
+ * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
102748
+ */
102749
+ "helix-meter-segment": Partial<
102750
+ HelixMeterSegmentProps &
102751
+ HelixMeterSegmentSolidJsProps &
102752
+ BaseProps<HelixMeterSegment, "solid"> &
102753
+ BaseEvents<HelixMeterSegment>
102754
+ >;
102755
+
101032
102756
  /**
101033
102757
  * A quiet square button, as the controls over a map are, with the pause icon
101034
102758
  * while motion runs and the play icon while it is paused. Text slotted into
@@ -103718,6 +105442,19 @@ export type CustomElementsSolidJs = {
103718
105442
  *
103719
105443
  * Component attributes and properties that can be applied to the element or by using JavaScript.
103720
105444
  *
105445
+ * - `material`: The panel's surface: `frosted` or `glass`.
105446
+ *
105447
+ * Absent is the opaque overlay surface. `glass` is the page's translucent
105448
+ * ground over a blur, for a page whose surfaces are glass, so a panel opened
105449
+ * over a glass window is not the one opaque slab on it. `frosted` is the same
105450
+ * pair turned up, a ground that admits less and a heavier blur.
105451
+ *
105452
+ * The strength is the theme's: `--helix-material-translucent`,
105453
+ * `--helix-material-translucent-strong` and `--helix-material-backdrop` are
105454
+ * what the policy moves. `Drawer` and `Tooltip` carry the same attribute.
105455
+ *
105456
+ * **No `transparent`, deliberately.** A panel floating over arbitrary page
105457
+ * content is only readable because it has a ground.
103721
105458
  * - `separation`: How the panel is set apart from the content under it.
103722
105459
  *
103723
105460
  * One of the axis's four values, which is all this surface has meaning for: a
@@ -103826,8 +105563,10 @@ export type CustomElementsSolidJs = {
103826
105563
  * CSS variables available for styling the component.
103827
105564
  *
103828
105565
  * - `--popover-arrow-size`: Size of the point drawn with `arrow`. Tooltip's point is the same size.
105566
+ * - `--popover-backdrop`: Filter applied behind a `frosted` or `glass` panel. Follows the theme's material policy.
105567
+ * - `--popover-background-color`: Fill of the surface.
103829
105568
  * - `--popover-border-color`: Color of the panel's edge.
103830
- * - `--popover-border-width`: 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.
105569
+ * - `--popover-border-width`: 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.
103831
105570
  * - `--popover-inline-size`: Width of the panel.
103832
105571
  * - `--popover-max-block-size`: Maximum height of the panel before it scrolls.
103833
105572
  * - `--popover-padding`: Space between the panel's edge and its contents.
@@ -106289,6 +108028,17 @@ export type CustomElementsSolidJs = {
106289
108028
  * styled to match the design system. The base class measures which edges have
106290
108029
  * content past them.
106291
108030
  *
108031
+ * **The content fades out toward each edge that has more past it.** The fade
108032
+ * is a mask on the viewport, so the surface behind the scroll area shows
108033
+ * through it: the page, a card, or a translucent pane. Set the depth with
108034
+ * `--scroll-area-fade`, or one edge's depth with its own property, and use `0`
108035
+ * to keep an edge from fading. A scrollbar that takes room beside the content
108036
+ * stays out of the mask.
108037
+ *
108038
+ * **Set `--scroll-area-fade-color` to paint the fades.** Each fade is then a
108039
+ * gradient from that color over the content, and there is no mask. Use it for
108040
+ * a scroll area on a solid ground, in the ground's color or one of your own.
108041
+ *
106292
108042
  * Under `scrollbars`, the browser's scrollbar is hidden and the component's own
106293
108043
  * are drawn over the content at the edge, in the same colors.
106294
108044
  *
@@ -106362,10 +108112,10 @@ export type CustomElementsSolidJs = {
106362
108112
  *
106363
108113
  * CSS variables available for styling the component.
106364
108114
  *
106365
- * - `--scroll-area-fade`: The depth of the fades at both edges.
108115
+ * - `--scroll-area-fade`: The depth of the fade at each edge.
106366
108116
  * - `--scroll-area-fade-block-end`: The depth of the bottom fade, or `0` to remove it.
106367
108117
  * - `--scroll-area-fade-block-start`: The depth of the top fade, or `0` to remove it.
106368
- * - `--scroll-area-fade-color`: The color the fades blend into, which is the background behind the box.
108118
+ * - `--scroll-area-fade-color`: The color to paint the fades in, as a gradient over the content at each edge. Unset, the fades are a mask.
106369
108119
  * - `--scroll-area-fade-inline-end`: The depth of the fade at the inline end, or `0` to remove it.
106370
108120
  * - `--scroll-area-fade-inline-start`: The depth of the fade at the inline start, or `0` to remove it.
106371
108121
  * - `--scroll-area-scrollbar`: The scrollbar width, as a `scrollbar-width` keyword.
@@ -106374,6 +108124,8 @@ export type CustomElementsSolidJs = {
106374
108124
  * - `--scroll-area-thumb-hover-color`: The color of the browser's thumb while the pointer is over the scroll area, and of a thumb drawn under `scrollbars` while the pointer is over it. Defaults to `--helix-scrollbar-thumb-hover-color`.
106375
108125
  * - `--scroll-area-thumb-min-size`: The shortest a thumb drawn under `scrollbars` gets, however long the content.
106376
108126
  * - `--scroll-area-track-color`: The color of the scrollbar's track. Defaults to `--helix-scrollbar-track-color`.
108127
+ * - `--scroll-area-gutter-block-end`: 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.
108128
+ * - `--scroll-area-gutter-inline-end`: 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.
106377
108129
  * - `--scroll-area-scroll-fraction`: 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.
106378
108130
  * - `--scroll-area-thumb-fraction`: 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.
106379
108131
  *
@@ -106382,7 +108134,7 @@ export type CustomElementsSolidJs = {
106382
108134
  * Custom selectors for styling elements within the component.
106383
108135
  *
106384
108136
  * - `corner`: The square where the two scrollbars meet, under `scrollbars`. Hidden unless both are drawn.
106385
- * - `edges`: The layer that draws the cues on the inline start and end edges.
108137
+ * - `edges`: The layer over the viewport. The styled tier draws the focus ring on it, and the painted fades at the inline start and end.
106386
108138
  * - `scrollbar`: Each scrollbar, under `scrollbars`. Hidden on an axis that has none.
106387
108139
  * - `scrollbar-horizontal`: The scrollbar along the inline axis, alongside `scrollbar`.
106388
108140
  * - `scrollbar-vertical`: The scrollbar along the block axis, alongside `scrollbar`.
@@ -106735,7 +108487,7 @@ export type CustomElementsSolidJs = {
106735
108487
  * CSS variables available for styling the component.
106736
108488
  *
106737
108489
  * - `--select-border-color`: Color of the panel's edge.
106738
- * - `--select-border-width`: 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.
108490
+ * - `--select-border-width`: 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.
106739
108491
  * - `--select-shadow`: Shadow under the panel. Defaults to `--helix-shadow-floating`, because the panel can sit over any content.
106740
108492
  * - `--select-surface-max-block-size`: Maximum height of the panel.
106741
108493
  * - `--floating-anchor-inline-size`: The trigger's width, written on the panel while it is open, as in `min-inline-size: var(--floating-anchor-inline-size)`. Read it; a value set here is written over.
@@ -107043,7 +108795,7 @@ export type CustomElementsSolidJs = {
107043
108795
  *
107044
108796
  * - `--skip-link-background-color`: The background of the link while it is shown.
107045
108797
  * - `--skip-link-border-color`: The border color of the link while it is shown.
107046
- * - `--skip-link-border-width`: 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.
108798
+ * - `--skip-link-border-width`: The border width of the link while it is shown. Follows `--helix-border-floating`, a hairline. Set it to `0` for the shadow alone.
107047
108799
  * - `--skip-link-color`: The text color of the link while it is shown.
107048
108800
  * - `--skip-link-font-size`: The size of the link's text.
107049
108801
  * - `--skip-link-inset-block`: How far the shown link sits from the top of the viewport.
@@ -107675,6 +109427,13 @@ export type CustomElementsSolidJs = {
107675
109427
  * reflected property takes no default, and `solid` writes it out. A
107676
109428
  * renderer draws the bars the same way.
107677
109429
  *
109430
+ * **`muted` draws every bar in the neutral ink**, so the one bar whose cell
109431
+ * names a tone, such as `data-tone="primary"`, is the bar in color, with a
109432
+ * soft glow in its tone: one reading lit among the others, such as today
109433
+ * among a week. Each top takes the most ink and each side less, as a
109434
+ * colored bar's faces do. A renderer draws the neutral bars and the toned
109435
+ * one, without the glow.
109436
+ *
107678
109437
  * It composes with `material`: emphasis decides what is drawn, and material
107679
109438
  * how much of it comes through. The outline on the bar the keys rest on
107680
109439
  * keeps its own ink.
@@ -107737,16 +109496,73 @@ export type CustomElementsSolidJs = {
107737
109496
  * `hidden`, or absent, says the summary to a screen reader and draws it
107738
109497
  * for no one else. Reflected, because the stylesheet draws it by the
107739
109498
  * attribute, and a page that sets the property, as React does, writes none.
107740
- * - `no-box`/`noBox`: Draws no box: no edges, grid, numbers, or names, so the readings stand
107741
- * alone and fill the plot, as a picture on a product's own page does. The
109499
+ * - `grow`: Grows the bars up from the floor the first time the chart comes into
109500
+ * view with readings, each category a little after the one before it, so
109501
+ * the drawing arrives the way a page's own picture does. The growth is
109502
+ * fast at first, slows to rest, and never passes a bar's value.
109503
+ *
109504
+ * Under `prefers-reduced-motion`, or where the page has paused its motion
109505
+ * through `pauseMotion` or `Motion Toggle`, the bars stand at their height
109506
+ * from the start. A later table draws the bars it already had at their
109507
+ * height, and grows the bars it adds, each from the floor, so a reading that
109508
+ * arrives while the chart is in view arrives the same way.
109509
+ * - `grow-again`/`growAgain`: Grows the bars again each time the chart comes back into view after it
109510
+ * left it, as a pane does when it is opened again, where `grow` alone grows
109511
+ * them the first time only. Only a chart that grows takes it.
109512
+ *
109513
+ * While it is out of view the bars stand at the floor, so the first frame
109514
+ * after it returns is the start of the growth and never a flash at full
109515
+ * height.
109516
+ * - `no-box`/`noBox`: Draws no box: no edges, grid, numbers, or names, and in a `row` no
109517
+ * floor, so the readings stand alone and fill the plot, as a picture on a
109518
+ * product's own page does. The
107742
109519
  * table, the summary, the tooltip, and the keys still carry every value,
107743
109520
  * and a renderer draws no box either.
107744
109521
  * - `open-label`/`openLabel`: What the readout says for a place with no value. `{category}` and
107745
109522
  * `{series}` name the place.
107746
109523
  * - `plot-label`/`plotLabel`: The plot's name where the chart has none: no `aria-label`, `label`, or table caption.
109524
+ * - `stacked`: Stacks a category's series into one column, each block standing on the
109525
+ * ones before it, so the column is as tall as the category's total, as a
109526
+ * flat `Bar Chart` stacks them.
109527
+ *
109528
+ * Absent stands the series one behind another in depth. Stacked, every
109529
+ * series stands in the front row, so none hides another, and the parts of
109530
+ * one total read together. A negative reading hangs below zero on the
109531
+ * negatives before it. The scale fits the stacks.
107747
109532
  * - `summary-label`/`summaryLabel`: The `summary` part's sentence. `{count}`, `{series}`, and `{categories}`
107748
109533
  * are the number of bars, series, and categories, written in the locale,
107749
109534
  * and `{low}` and `{high}` the lowest and the highest value.
109535
+ * - `variant`: How the bars stand.
109536
+ *
109537
+ * Unset, they stand on a grid of categories across and series in depth,
109538
+ * in a box the camera looks at from a corner, so the grid recedes at an
109539
+ * angle. `row` lays the categories in a straight line across the page and
109540
+ * turns each bar to the camera, showing its top and two sides, for one row
109541
+ * of readings in a small space such as a pane: turning the view turns each
109542
+ * bar where it stands, and the row stays level. It is the chart's own
109543
+ * drawing that lays the row: a renderer connected through
109544
+ * `@fusion.dev/helix-plot` stands the bars on the grid.
109545
+ *
109546
+ * `diagonal` is the same row climbing to the right as it recedes, each
109547
+ * place a step further back than the one before, as a row of days on a
109548
+ * product's page is drawn: the row rises one part in five across the page
109549
+ * from any turn, and its floor and names climb with it. A row whose bars
109550
+ * have a size climbs at most a quarter of the plot's height, so the bars
109551
+ * of a long row keep theirs.
109552
+ *
109553
+ * **A row draws its floor in place of a box**: each place as an outline a
109554
+ * little wider than its bar, and each category's name under it, as many
109555
+ * names as fit without touching. A name whose bar names a tone is written
109556
+ * first, in that tone. `no-box` leaves the floor and the names out.
109557
+ *
109558
+ * **A `column-gap` on the `fallback` part gives a row's bars one width**,
109559
+ * which the styled tier sets from `--spatial-bar-chart-bar-size`: one bar
109560
+ * stands as wide as each of twenty, the row is as long as its bars and
109561
+ * centered, the tallest bar stands as high as the plot has room for and
109562
+ * no taller than the row is long and a quarter again, so one bar stands
109563
+ * as a block, and `fits` says how many bars the plot holds, so a page
109564
+ * can give it the latest of a longer table. It is read when the plot's
109565
+ * size changes.
107750
109566
  * - `sounding`: Whether the chart is playing as sound now. (property only) (readonly)
107751
109567
  * - `data`: The readings as data, in the shape of a table, where the page has no
107752
109568
  * table to point `for` at. `for` wins where both are set.
@@ -107795,6 +109611,11 @@ export type CustomElementsSolidJs = {
107795
109611
  * - `field`: The table read as bars. **Each row is a category, and each numeric
107796
109612
  * column a series.** A renderer reads it. (property only) (readonly)
107797
109613
  * - `active`: The bar the keys or the pointer rest on, as its place in `field.cells`, or `-1`. (property only) (readonly)
109614
+ * - `fits`: How many categories a `row` or a `diagonal` has room for across the
109615
+ * plot at its bar size, measured as it is read, or
109616
+ * `undefined` where there is no row, no bar size, or nothing drawn to
109617
+ * measure. A page with a longer table gives the chart its latest that
109618
+ * many rows, and says so. (property only) (readonly)
107798
109619
  * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
107799
109620
  *
107800
109621
  * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -107882,8 +109703,16 @@ export type CustomElementsSolidJs = {
107882
109703
  *
107883
109704
  * CSS variables available for styling the component.
107884
109705
  *
109706
+ * - `--spatial-bar-chart-bar-size`: 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.
107885
109707
  * - `--spatial-bar-chart-block-size`: How tall the plot is. By default, three quarters of its width and 22em at most.
107886
- * - `--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.
109708
+ * - `--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.`: undefined
109709
+ * - `--spatial-bar-chart-tone-accent`: The color of a bar whose cell says `data-tone="accent"`.
109710
+ * - `--spatial-bar-chart-tone-danger`: The color of a bar whose cell says `data-tone="danger"`.
109711
+ * - `--spatial-bar-chart-tone-info`: The color of a bar whose cell says `data-tone="info"`.
109712
+ * - `--spatial-bar-chart-tone-muted`: The color of a bar whose cell says `data-tone="muted"`.
109713
+ * - `--spatial-bar-chart-tone-primary`: 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.
109714
+ * - `--spatial-bar-chart-tone-success`: The color of a bar whose cell says `data-tone="success"`.
109715
+ * - `--spatial-bar-chart-tone-warning`: The color of a bar whose cell says `data-tone="warning"`.
107887
109716
  *
107888
109717
  * ## CSS Parts
107889
109718
  *
@@ -107896,6 +109725,8 @@ export type CustomElementsSolidJs = {
107896
109725
  * - `empty`: The words when the table has no readings: the `empty` slot, falling back to `empty-text`.
107897
109726
  * - `face`: One face of a bar the view shows, shaded by which way it faces.
107898
109727
  * - `fallback`: The box the chart's own drawing fills, shown until a renderer has drawn and where none is connected. Hidden from screen readers.
109728
+ * - `floor`: One place on the floor of a `row`, under a bar or where one would stand, drawn as its outline.
109729
+ * - `glow`: The outline of a bar whose cell names a tone, blurred by 8 CSS pixels and painted under the bar, with no fill until a stylesheet gives it one: a soft glow in the bar's tone.
107899
109730
  * - `grid`: The box's edges and its grid, in the chart's own drawing.
107900
109731
  * - `live`: The readout: a polite live region that says the bar the keys moved to. Hide it visually.
107901
109732
  * - `loading`: The words while `loading` is set and there are no readings.
@@ -107907,7 +109738,7 @@ export type CustomElementsSolidJs = {
107907
109738
  * - `summary`: The number of bars, series, and categories, and the range of values, written as a sentence for screen readers, which describes the plot. Hide it visually.
107908
109739
  * - `table`: The readings as a table, for a screen reader, rendered only where they were drawn from `data`, a page of them at a time past a few hundred. Hide it visually.
107909
109740
  * - `table-pages`: Which readings a page of the `table` holds, and the buttons that show the previous and the next page, rendered only while it holds a page. Hide it visually.
107910
- * - `tick`: A category's or a series' name, or a value at a tick, along its edge of the box, in the chart's own drawing.
109741
+ * - `tick`: A category's or a series' name, or a value at a tick, along its edge of the box, or a category's name under its place in a `row`, in the chart's own drawing.
107911
109742
  * - `tooltip-anchor`: The `Tooltip` element itself.
107912
109743
  * - `tooltip-arrow`: The bubble's point, forwarded from `Tooltip`.
107913
109744
  * - `tooltip-arrow-bottom`: The point while the bubble is below the reading, on its top edge. Set alongside `tooltip-arrow`.
@@ -107924,6 +109755,7 @@ export type CustomElementsSolidJs = {
107924
109755
  * - `tooltip-surface-right`: The bubble while it is right of the reading. Set alongside `tooltip-surface`.
107925
109756
  * - `tooltip-surface-top`: The bubble while it is above the reading. Set alongside `tooltip-surface`.
107926
109757
  * - `tooltip-value`: A column's value inside the tooltip.
109758
+ * - `value`: The value of a bar whose cell names a tone, written above it in the chart's own drawing.
107927
109759
  *
107928
109760
  * ## CSS States
107929
109761
  *
@@ -110513,6 +112345,10 @@ export type CustomElementsSolidJs = {
110513
112345
  * `at` is nearer, and crosses in one diagonal to the far side. `waves` is sharp
110514
112346
  * strands crossing the full width.
110515
112347
  *
112348
+ * **Clear, over glass.** Set `clear` and the ribbon is drawn without its
112349
+ * ground, so a translucent pane or a frosted window behind the element shows
112350
+ * through, with the light over it.
112351
+ *
110516
112352
  * **Quiet behind words.** `quiet` names elements, such as a hero's words, that
110517
112353
  * the light dims behind to a faint glow, so a bright ribbon can cross the page
110518
112354
  * under them and they stay crisp.
@@ -110558,6 +112394,13 @@ export type CustomElementsSolidJs = {
110558
112394
  * own.
110559
112395
  * - `bloom`: How much the glow around the strands adds, as a multiplier. `0` draws the
110560
112396
  * strands alone, crisp and dimmer, and `1` is the default glow.
112397
+ * - `clear`: Whether the light is drawn alone, without the ground under it, so what is
112398
+ * behind the element shows through, such as a translucent pane or a window's
112399
+ * glass. The ground still says which way the page runs: light added on a
112400
+ * dark one, ink on a light one.
112401
+ *
112402
+ * Reflected because the stylesheet selects on it: the band under the canvas
112403
+ * shows only while the element falls back, and loses its ground too.
110561
112404
  * - `contrast`: How far apart the brightest and dimmest strands are, from `0`, most of
110562
112405
  * them alike, to `1`, a few burning bright over many faint ones. Clamped to
110563
112406
  * that range. The ribbon as a whole keeps its strength.
@@ -111701,10 +113544,40 @@ export type CustomElementsSolidJs = {
111701
113544
  * - `underlined` makes it a bar along the bottom of the strip, on a rule.
111702
113545
  * - `segmented` makes it the size of the tab's box, inside a sunken track.
111703
113546
  *
113547
+ * `emphasis="subtle"` makes the mark quieter, for tabs inside other chrome
113548
+ * such as a pane's header: a tint with no edge or shadow, the same wash a
113549
+ * subtle button takes.
113550
+ *
113551
+ * **Tabs with no panels are a strip.** Where what each tab stands for lives
113552
+ * outside the set, such as a pane's pages or shells, leave the panels out: the
113553
+ * tabs keep their keys and their selection, `active` and `helix-activate` say
113554
+ * which is current, and the page shows the rest. Put a control that adds a tab,
113555
+ * such as a plus, beside the set rather than in it, so the tab list holds tabs
113556
+ * alone. With `dismissible` tabs, `dismiss-marks="hover"` keeps each close
113557
+ * mark out of sight until the tab is current, under the pointer, or holds
113558
+ * focus, as a browser's tabs do.
113559
+ *
111704
113560
  * ## Attributes & Properties
111705
113561
  *
111706
113562
  * Component attributes and properties that can be applied to the element or by using JavaScript.
111707
113563
  *
113564
+ * - `dismiss-marks`/`dismissMarks`: When the close mark of each `dismissible` tab shows.
113565
+ *
113566
+ * Unset, or `always`, every mark shows. `hover` shows a tab's mark while it
113567
+ * is current, under the pointer, or holds focus, and keeps its room on every
113568
+ * tab, so the labels do not move as the marks come and go. For a strip of
113569
+ * many dismissible tabs, where a mark on each reads as a row of crosses. A
113570
+ * keyboard closes a tab with Delete whether its mark shows or not.
113571
+ * - `emphasis`: How loud the mark on the current tab is.
113572
+ *
113573
+ * Unset is the mark `variant` draws at rest. `subtle` is a tint with no
113574
+ * edge or shadow: the raised pill becomes a wash, the `segmented` track's
113575
+ * pill does the same inside it, and the `underlined` bar takes the
113576
+ * foreground's ink in place of the primary color. For tabs inside other
113577
+ * chrome, where a raised mark reads as a control laid on top of it.
113578
+ *
113579
+ * Independent of `variant`, since each of its marks has a quiet form: the two
113580
+ * answer different questions, which is the test the axis registry applies.
111708
113581
  * - `active`: The `value` of the current item.
111709
113582
  *
111710
113583
  * Not `option.active`, which is the option the keyboard is on: that is a
@@ -111939,6 +113812,7 @@ export type CustomElementsSolidJs = {
111939
113812
  * - `--tabs-tab-font-weight`: The weight of a tab's label.
111940
113813
  * - `--tabs-tab-hover-background-color`: The wash under the pointer.
111941
113814
  * - `--tabs-tab-hover-color`: The label color under the pointer.
113815
+ * - `--tabs-tab-max-inline-size`: 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.
111942
113816
  * - `--tabs-tab-padding-inline`: The space either side of the label.
111943
113817
  * - `--tabs-tab-radius`: The corners of a tab, which the hover wash takes.
111944
113818
  * - `--tabs-tab-selected-background-color`: The fill of the current tab itself, under the moving mark.
@@ -111950,6 +113824,7 @@ export type CustomElementsSolidJs = {
111950
113824
  *
111951
113825
  * - `dismiss`: The mark a pointer presses to close a `dismissible` tab.
111952
113826
  * - `dismiss-mark`: The glyph on that mark, where none is slotted.
113827
+ * - `label`: The slot the tab's label is in, which shortens with an ellipsis under `--tabs-tab-max-inline-size`.
111953
113828
  * - `tab`: The tab itself.
111954
113829
  *
111955
113830
  * ## CSS States
@@ -112163,7 +114038,7 @@ export type CustomElementsSolidJs = {
112163
114038
  *
112164
114039
  * - `(default)`: The tag's label.
112165
114040
  * - `dismiss-icon`: Replaces the glyph on the remove button.
112166
- * - `start`: The category the label belongs to, shown before it in a heavier weight.
114041
+ * - `start`: The category the label belongs to, shown before it in a heavier weight, or an icon.
112167
114042
  *
112168
114043
  * ## Methods
112169
114044
  *
@@ -112471,6 +114346,16 @@ export type CustomElementsSolidJs = {
112471
114346
  * - `restart-spinner`: The ring the Restart button turns while it is pending.
112472
114347
  * - `restart-text`: The Restart button's label.
112473
114348
  * - `status`: The line under the terminal that says the process exited, or that Tab moves focus.
114349
+ * - `tooltip-arrow`: The arrow of the tooltip that names each button, forwarded from `Tooltip`.
114350
+ * - `tooltip-arrow-bottom`: The arrow while the bubble is below its button, on the bubble's top edge. Set together with `tooltip-arrow`.
114351
+ * - `tooltip-arrow-left`: The arrow while the bubble is left of its button, on the bubble's right edge. Set together with `tooltip-arrow`.
114352
+ * - `tooltip-arrow-right`: The arrow while the bubble is right of its button, on the bubble's left edge. Set together with `tooltip-arrow`.
114353
+ * - `tooltip-arrow-top`: The arrow while the bubble is above its button, on the bubble's bottom edge. Set together with `tooltip-arrow`.
114354
+ * - `tooltip-surface`: The bubble of the tooltip that names each button, forwarded from `Tooltip`.
114355
+ * - `tooltip-surface-bottom`: The bubble while it is below its button. Set together with `tooltip-surface`.
114356
+ * - `tooltip-surface-left`: The bubble while it is left of its button. Set together with `tooltip-surface`.
114357
+ * - `tooltip-surface-right`: The bubble while it is right of its button. Set together with `tooltip-surface`.
114358
+ * - `tooltip-surface-top`: The bubble while it is above its button. Set together with `tooltip-surface`.
112474
114359
  * - `viewport`: The box the terminal is drawn in.
112475
114360
  *
112476
114361
  * ## CSS States
@@ -113292,7 +115177,7 @@ export type CustomElementsSolidJs = {
113292
115177
  *
113293
115178
  * - `--time-input-background-color`: Fill behind the field.
113294
115179
  * - `--time-input-border-color`: Color of the panel's edge.
113295
- * - `--time-input-border-width`: 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.
115180
+ * - `--time-input-border-width`: 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.
113296
115181
  * - `--time-input-segment-focus-background-color`: The fill behind the segment with focus, in `segmented`. It follows `--helix-color-primary-surface`.
113297
115182
  * - `--time-input-segment-focus-color`: The text of the segment with focus, in `segmented`.
113298
115183
  * - `--time-input-segment-literal-color`: The text the locale writes between two segments, in `segmented`.
@@ -114182,7 +116067,7 @@ export type CustomElementsSolidJs = {
114182
116067
  *
114183
116068
  * - `--toast-background-color`: The panel's color. Follows `--helix-color-surface-overlay`.
114184
116069
  * - `--toast-border-color`: Color of the panel's edge.
114185
- * - `--toast-border-width`: 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.
116070
+ * - `--toast-border-width`: 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.
114186
116071
  * - `--toast-color`: Color of the message's text.
114187
116072
  * - `--toast-description-color`: Color of the line in the `description` slot, under the heading.
114188
116073
  * - `--toast-dismiss-color`: Color of the dismiss control's mark at rest.
@@ -115372,7 +117257,7 @@ export type CustomElementsSolidJs = {
115372
117257
  * CSS variables available for styling the component.
115373
117258
  *
115374
117259
  * - `--tour-arrow-size`: The size of the arrow's box, before it is rotated.
115375
- * - `--tour-border-width`: 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.
117260
+ * - `--tour-border-width`: 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.
115376
117261
  * - `--tour-bubble-size`: The widest the panel can grow.
115377
117262
  * - `--tour-padding`: The padding inside the panel.
115378
117263
  * - `--tour-shadow`: The shadow under the panel. It follows `--helix-shadow-floating`. The panel can sit over any content, so it has a shadow by default.
@@ -115655,6 +117540,10 @@ export type CustomElementsSolidJs = {
115655
117540
  * the same fault `href` and `target` had on `Button`. The resting arrangement
115656
117541
  * is the absence of the attribute, and the stylesheet only asks about `end`.
115657
117542
  *
117543
+ * `label` sets the chevron against the end of a branch's name, where the name
117544
+ * takes only its own width, and leaves the `end` slot at the row's far side.
117545
+ * A leaf is unchanged, since it has no chevron.
117546
+ *
115658
117547
  * It is worth owning rather than leaving to `::part(toggle)`, which a
115659
117548
  * consumer could reach for: the naive version is `order` plus an auto margin,
115660
117549
  * and the row's `end` slot already carries an auto margin of its own, so the
@@ -117026,6 +118915,117 @@ export type CustomElementsSolidJs = {
117026
118915
  BaseProps<HelixVirtualList, "solid"> &
117027
118916
  BaseEvents<HelixVirtualList>
117028
118917
  >;
118918
+
118919
+ /**
118920
+ * Two drawings, chosen with `variant`:
118921
+ *
118922
+ * - `spectrum`: a row of thin rounded bars, one for each frequency band in
118923
+ * `bands`, tallest in the middle. The middle half of the row takes the
118924
+ * stronger color. A quiet bar rests as a dot.
118925
+ * - `waves`: three sine lines with different speeds, phases, and weights, held
118926
+ * to the center line at both ends. `level` sets how far they swing, and a
118927
+ * quiet level rests as a flat line.
118928
+ *
118929
+ * Set `level` and `bands` from your audio as often as you have readings, about
118930
+ * 30 times a second. Each bar and wave eases toward its reading: up fast and
118931
+ * down slower. A spectrum given no `bands` draws every bar from `level`.
118932
+ *
118933
+ * The drawing stops when it is off screen, in a background tab, or after the
118934
+ * level has been zero for under a second, and starts again with the next
118935
+ * reading. With `prefers-reduced-motion`, it draws one bar from the middle
118936
+ * over a faint track, whose length is the level, and redraws it on each
118937
+ * reading. With `still`, it draws either drawing as a still picture of its
118938
+ * readings, whatever the motion preference.
118939
+ *
118940
+ * The level is an image named by `label`. A meter's value would be announced
118941
+ * on every change, and a level changes many times a second.
118942
+ *
118943
+ * Voice Level is styled only and has behavior, which the tier split does not
118944
+ * otherwise allow. Its role and name are set on the host, and the rest is
118945
+ * drawing to a canvas.
118946
+ *
118947
+ * ## Attributes & Properties
118948
+ *
118949
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
118950
+ *
118951
+ * - `bands`: How loud each frequency band is, from `0` to `1`, lowest band first.
118952
+ *
118953
+ * Each bar of the spectrum follows one band. Where there are more or fewer
118954
+ * bands than bars, each bar reads between the two nearest bands. Empty draws
118955
+ * every bar from `level`. Written as an attribute, the numbers are separated
118956
+ * by spaces or commas: `bands="0.1 0.4 0.6 0.3"`. Assign an array to the
118957
+ * property for readings that change many times a second.
118958
+ * - `fallback-label`/`fallbackLabel`: The name where `label` is empty. Translate it with the rest of your
118959
+ * interface.
118960
+ * - `label`: The name read by screen readers, such as "Your voice". Defaults to
118961
+ * `fallbackLabel`.
118962
+ * - `level`: How loud the voice is, from `0` for silence to `1`.
118963
+ *
118964
+ * It sets how far the waves swing, the length of the still bar under
118965
+ * `prefers-reduced-motion`, and every bar of a spectrum that has no
118966
+ * `bands`. A value outside the range is drawn at the nearer end.
118967
+ * - `still`: Draws the readings as a still picture: each bar at its band and the waves
118968
+ * at one fixed moment, swung as far as `level`.
118969
+ *
118970
+ * For a level that holds, such as the loudness of a recorded clip or a
118971
+ * picture of the drawing. No frame loop runs, and each new reading is drawn
118972
+ * at once with no easing. Because nothing moves, the drawing is the same
118973
+ * under `prefers-reduced-motion`. Clearing it starts the motion from the
118974
+ * readings as they are.
118975
+ * - `variant`: The drawing: a row of bars, one for each band, or three moving waves.
118976
+ *
118977
+ * Reflected because the stylesheet sizes each drawing differently. Absent
118978
+ * is `spectrum`, the resting value, which selects nothing.
118979
+ * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
118980
+ *
118981
+ * **Named `whenSettled` because `settled` is taken four times over**, by
118982
+ * Image, Splitter and both color controls, none of them about transitions. A
118983
+ * base class takes the name every subclass then cannot use.
118984
+ *
118985
+ * **The state it reports cannot be watched, which is why this exists.** A
118986
+ * custom state is deliberately not in the DOM, so there is no
118987
+ * `MutationObserver` equivalent for `ElementInternals.states`. Await this
118988
+ * instead.
118989
+ *
118990
+ * Separate from `updateComplete`, which resolves in the microtask checkpoint
118991
+ * the suppression is still active in. That is the distinction `readyToMove`
118992
+ * in `@fusion.dev/helix-testing` is written around.
118993
+ *
118994
+ * It never resolves where `requestAnimationFrame` never fires, which is a
118995
+ * server, a hidden tab, and happy-dom. Callers that must not hang there race
118996
+ * it against a timeout, as the happy-dom harness's `readyToMove` does. The
118997
+ * browser harness's awaits it alone: a browser always runs the frame, and a
118998
+ * timer beside it was a bet on how long one takes, which a busy run lost. (property only) (readonly)
118999
+ *
119000
+ * ## CSS Custom Properties
119001
+ *
119002
+ * CSS variables available for styling the component.
119003
+ *
119004
+ * - `--voice-level-accent-color`: The color of the second wave. Defaults to the accent color.
119005
+ * - `--voice-level-bars`: How many bars the spectrum draws, from 3 to 96. Defaults to `24`.
119006
+ * - `--voice-level-block-size`: The height. Defaults to the icon size for `spectrum` and the control size for `waves`.
119007
+ * - `--voice-level-color`: The color of the center bars and the main wave. Defaults to the primary color.
119008
+ * - `--voice-level-edge-color`: The color of the bars at either end. Defaults to `--voice-level-color` at 55 percent.
119009
+ * - `--voice-level-inline-size`: The width. Defaults to four times the height for `spectrum` and three times for `waves`.
119010
+ *
119011
+ * ## CSS Parts
119012
+ *
119013
+ * Custom selectors for styling elements within the component.
119014
+ *
119015
+ * - `canvas`: The canvas the level is drawn on.
119016
+ *
119017
+ * ## CSS States
119018
+ *
119019
+ * These can be used to apply styling when a component is in a given state.
119020
+ *
119021
+ * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
119022
+ */
119023
+ "helix-voice-level": Partial<
119024
+ HelixVoiceLevelProps &
119025
+ HelixVoiceLevelSolidJsProps &
119026
+ BaseProps<HelixVoiceLevel, "solid"> &
119027
+ BaseEvents<HelixVoiceLevel>
119028
+ >;
117029
119029
  };
117030
119030
 
117031
119031
  export type CustomCssProperties = {
@@ -117397,6 +119397,8 @@ export type CustomCssProperties = {
117397
119397
  "--chat-composer-background-color"?: (string) | undefined;
117398
119398
  /** Width of the composer's edge, so your theme can remove it. */
117399
119399
  "--chat-composer-border-width"?: (string) | undefined;
119400
+ /** Color of the focus glow under `glow`. Defaults to the primary color. */
119401
+ "--chat-composer-glow-color"?: (string) | undefined;
117400
119402
  /** Maximum height the field grows to. */
117401
119403
  "--chat-composer-max-block-size"?: (string) | undefined;
117402
119404
  /** 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. */
@@ -117545,7 +119547,7 @@ export type CustomCssProperties = {
117545
119547
  "--color-input-background-color"?: (string) | undefined;
117546
119548
  /** Color of the panel's edge. */
117547
119549
  "--color-input-border-color"?: (string) | undefined;
117548
- /** 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. */
119550
+ /** 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. */
117549
119551
  "--color-input-border-width"?: (string) | undefined;
117550
119552
  /** Width of the panel, and so of the square. */
117551
119553
  "--color-input-panel-size"?: (string) | undefined;
@@ -117589,7 +119591,7 @@ export type CustomCssProperties = {
117589
119591
  "--combobox-background-color"?: (string) | undefined;
117590
119592
  /** Color of the panel's edge. */
117591
119593
  "--combobox-border-color"?: (string) | undefined;
117592
- /** 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. */
119594
+ /** 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. */
117593
119595
  "--combobox-border-width"?: (string) | undefined;
117594
119596
  /** Smallest the text field shrinks to once tags share its line. */
117595
119597
  "--combobox-control-size"?: (string) | undefined;
@@ -117599,6 +119601,8 @@ export type CustomCssProperties = {
117599
119601
  "--combobox-shadow"?: (string) | undefined;
117600
119602
  /** How tall the list grows before it scrolls. */
117601
119603
  "--command-list-size"?: (string) | undefined;
119604
+ /** The corners of the palette's panel. Defaults to the dialog's. */
119605
+ "--command-radius"?: (string) | undefined;
117602
119606
  /** How wide the palette is. Defaults to `40rem`. */
117603
119607
  "--command-size"?: (string) | undefined;
117604
119608
  /** The icon's color at rest. A `tone` keeps its own. */
@@ -117719,7 +119723,7 @@ export type CustomCssProperties = {
117719
119723
  "--date-input-background-color"?: (string) | undefined;
117720
119724
  /** The color of the panel's border. */
117721
119725
  "--date-input-border-color"?: (string) | undefined;
117722
- /** 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. */
119726
+ /** 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. */
117723
119727
  "--date-input-border-width"?: (string) | undefined;
117724
119728
  /** The fill behind the segment with focus, in `segmented`. It follows `--helix-color-primary-surface`. */
117725
119729
  "--date-input-segment-focus-background-color"?: (string) | undefined;
@@ -117801,11 +119805,13 @@ export type CustomCssProperties = {
117801
119805
  "--device-screen-touch-x"?: (string) | undefined;
117802
119806
  /** Where a ring is, down the screen, as a percentage. Written on each ring. */
117803
119807
  "--device-screen-touch-y"?: (string) | undefined;
119808
+ /** Filter applied behind a `frosted` or `glass` panel. Follows the theme's material policy. */
119809
+ "--dialog-backdrop"?: (string) | undefined;
117804
119810
  /** The panel's fill. Follows `--helix-color-surface-overlay`. */
117805
119811
  "--dialog-background-color"?: (string) | undefined;
117806
119812
  /** Color of the panel's edge. */
117807
119813
  "--dialog-border-color"?: (string) | undefined;
117808
- /** 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. */
119814
+ /** 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. */
117809
119815
  "--dialog-border-width"?: (string) | undefined;
117810
119816
  /** Color of the words in the panel. Follows `--helix-color-foreground`. */
117811
119817
  "--dialog-color"?: (string) | undefined;
@@ -117867,7 +119873,7 @@ export type CustomCssProperties = {
117867
119873
  "--drawer-background-color"?: (string) | undefined;
117868
119874
  /** Color of the panel's edge. */
117869
119875
  "--drawer-border-color"?: (string) | undefined;
117870
- /** 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. */
119876
+ /** 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. */
117871
119877
  "--drawer-border-width"?: (string) | undefined;
117872
119878
  /** Padding inside the panel. */
117873
119879
  "--drawer-padding"?: (string) | undefined;
@@ -118341,6 +120347,8 @@ export type CustomCssProperties = {
118341
120347
  "--log-scrollbar-thumb-color"?: (string) | undefined;
118342
120348
  /** The track of the scrollbar. Defaults to `--helix-scrollbar-track-color`. */
118343
120349
  "--log-scrollbar-track-color"?: (string) | undefined;
120350
+ /** How tall a step's lines may get in a `plain` log before they scroll. Defaults to 20rem. */
120351
+ "--log-step-max-block-size"?: (string) | undefined;
118344
120352
  /** The background a run takes where ANSI swaps the colors and named none. Defaults to the log's own background on the styled tier. */
118345
120353
  "--log-ansi-background"?: (string) | undefined;
118346
120354
  /** The ANSI color black, which codes `30` and `40` draw. */
@@ -118455,7 +120463,7 @@ export type CustomCssProperties = {
118455
120463
  "--megamenu-backdrop"?: (string) | undefined;
118456
120464
  /** The panel's fill. */
118457
120465
  "--megamenu-background-color"?: (string) | undefined;
118458
- /** 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. */
120466
+ /** 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. */
118459
120467
  "--megamenu-border-width"?: (string) | undefined;
118460
120468
  /** The minimum width of a column before the grid wraps. */
118461
120469
  "--megamenu-column-size"?: (string) | undefined;
@@ -118507,11 +120515,13 @@ export type CustomCssProperties = {
118507
120515
  "--menu-item-hover-color"?: (string) | undefined;
118508
120516
  /** 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. */
118509
120517
  "--menu-item-start"?: (string) | undefined;
120518
+ /** Filter applied behind a `frosted` or `glass` panel. Follows the theme's material policy. */
120519
+ "--menu-backdrop"?: (string) | undefined;
118510
120520
  /** Fill of the surface. */
118511
120521
  "--menu-background-color"?: (string) | undefined;
118512
120522
  /** Color of the panel's edge. */
118513
120523
  "--menu-border-color"?: (string) | undefined;
118514
- /** 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. */
120524
+ /** 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. */
118515
120525
  "--menu-border-width"?: (string) | undefined;
118516
120526
  /** The tallest the menu grows before it scrolls. */
118517
120527
  "--menu-max-block-size"?: (string) | undefined;
@@ -118557,8 +120567,16 @@ export type CustomCssProperties = {
118557
120567
  "--meter-at"?: (string) | undefined;
118558
120568
  /** The value as a fraction of the range, 0 to 1. */
118559
120569
  "--meter-fraction"?: (string) | undefined;
120570
+ /** How much the range holds, `max` less `min`, which a segment divides its own value by to find its width. */
120571
+ "--meter-span"?: (string) | undefined;
118560
120572
  /** How much of the circle the arc covers, as a path length. */
118561
120573
  "--meter-sweep"?: (string) | undefined;
120574
+ /** The slice's color. Overrides the series and the tone. */
120575
+ "--meter-segment-color"?: (string) | undefined;
120576
+ /** The color of the hairline between neighbors. */
120577
+ "--meter-segment-gap-color"?: (string) | undefined;
120578
+ /** How much of the range the segment takes, in the meter's own units. */
120579
+ "--meter-segment-value"?: (string) | undefined;
118562
120580
  /** The button's fill. Defaults to the floating overlay surface. */
118563
120581
  "--motion-toggle-background-color"?: (string) | undefined;
118564
120582
  /** Height of the bar in a row. Each destination fills it. */
@@ -118781,9 +120799,13 @@ export type CustomCssProperties = {
118781
120799
  "--pin-input-separator-color"?: (string) | undefined;
118782
120800
  /** Size of the point drawn with `arrow`. Tooltip's point is the same size. */
118783
120801
  "--popover-arrow-size"?: (string) | undefined;
120802
+ /** Filter applied behind a `frosted` or `glass` panel. Follows the theme's material policy. */
120803
+ "--popover-backdrop"?: (string) | undefined;
120804
+ /** Fill of the surface. */
120805
+ "--popover-background-color"?: (string) | undefined;
118784
120806
  /** Color of the panel's edge. */
118785
120807
  "--popover-border-color"?: (string) | undefined;
118786
- /** 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. */
120808
+ /** 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. */
118787
120809
  "--popover-border-width"?: (string) | undefined;
118788
120810
  /** Width of the panel. */
118789
120811
  "--popover-inline-size"?: (string) | undefined;
@@ -118959,13 +120981,13 @@ export type CustomCssProperties = {
118959
120981
  "--chart-point-y"?: (string) | undefined;
118960
120982
  /** A tick's position along its axis, as a percentage. The component writes it. */
118961
120983
  "--chart-tick"?: (string) | undefined;
118962
- /** The depth of the fades at both edges. */
120984
+ /** The depth of the fade at each edge. */
118963
120985
  "--scroll-area-fade"?: (string) | undefined;
118964
120986
  /** The depth of the bottom fade, or `0` to remove it. */
118965
120987
  "--scroll-area-fade-block-end"?: (string) | undefined;
118966
120988
  /** The depth of the top fade, or `0` to remove it. */
118967
120989
  "--scroll-area-fade-block-start"?: (string) | undefined;
118968
- /** The color the fades blend into, which is the background behind the box. */
120990
+ /** The color to paint the fades in, as a gradient over the content at each edge. Unset, the fades are a mask. */
118969
120991
  "--scroll-area-fade-color"?: (string) | undefined;
118970
120992
  /** The depth of the fade at the inline end, or `0` to remove it. */
118971
120993
  "--scroll-area-fade-inline-end"?: (string) | undefined;
@@ -118983,13 +121005,17 @@ export type CustomCssProperties = {
118983
121005
  "--scroll-area-thumb-min-size"?: (string) | undefined;
118984
121006
  /** The color of the scrollbar's track. Defaults to `--helix-scrollbar-track-color`. */
118985
121007
  "--scroll-area-track-color"?: (string) | undefined;
121008
+ /** 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. */
121009
+ "--scroll-area-gutter-block-end"?: (string) | undefined;
121010
+ /** 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. */
121011
+ "--scroll-area-gutter-inline-end"?: (string) | undefined;
118986
121012
  /** 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. */
118987
121013
  "--scroll-area-scroll-fraction"?: (string) | undefined;
118988
121014
  /** 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. */
118989
121015
  "--scroll-area-thumb-fraction"?: (string) | undefined;
118990
121016
  /** Color of the panel's edge. */
118991
121017
  "--select-border-color"?: (string) | undefined;
118992
- /** 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. */
121018
+ /** 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. */
118993
121019
  "--select-border-width"?: (string) | undefined;
118994
121020
  /** Shadow under the panel. Defaults to `--helix-shadow-floating`, because the panel can sit over any content. */
118995
121021
  "--select-shadow"?: (string) | undefined;
@@ -119023,7 +121049,7 @@ export type CustomCssProperties = {
119023
121049
  "--skip-link-background-color"?: (string) | undefined;
119024
121050
  /** The border color of the link while it is shown. */
119025
121051
  "--skip-link-border-color"?: (string) | undefined;
119026
- /** 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. */
121052
+ /** The border width of the link while it is shown. Follows `--helix-border-floating`, a hairline. Set it to `0` for the shadow alone. */
119027
121053
  "--skip-link-border-width"?: (string) | undefined;
119028
121054
  /** The text color of the link while it is shown. */
119029
121055
  "--skip-link-color"?: (string) | undefined;
@@ -119109,10 +121135,26 @@ export type CustomCssProperties = {
119109
121135
  "--sparkline-readout-font-size"?: (string) | undefined;
119110
121136
  /** Thickness of the line, overriding `weight`. */
119111
121137
  "--sparkline-width"?: (string) | undefined;
121138
+ /** 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. */
121139
+ "--spatial-bar-chart-bar-size"?: (string) | undefined;
119112
121140
  /** How tall the plot is. By default, three quarters of its width and 22em at most. */
119113
121141
  "--spatial-bar-chart-block-size"?: (string) | undefined;
119114
- /** 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. */
119115
- "--spatial-bar-chart-shade"?: (string) | undefined;
121142
+ /** */
121143
+ "--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;
121144
+ /** The color of a bar whose cell says `data-tone="accent"`. */
121145
+ "--spatial-bar-chart-tone-accent"?: (string) | undefined;
121146
+ /** The color of a bar whose cell says `data-tone="danger"`. */
121147
+ "--spatial-bar-chart-tone-danger"?: (string) | undefined;
121148
+ /** The color of a bar whose cell says `data-tone="info"`. */
121149
+ "--spatial-bar-chart-tone-info"?: (string) | undefined;
121150
+ /** The color of a bar whose cell says `data-tone="muted"`. */
121151
+ "--spatial-bar-chart-tone-muted"?: (string) | undefined;
121152
+ /** 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. */
121153
+ "--spatial-bar-chart-tone-primary"?: (string) | undefined;
121154
+ /** The color of a bar whose cell says `data-tone="success"`. */
121155
+ "--spatial-bar-chart-tone-success"?: (string) | undefined;
121156
+ /** The color of a bar whose cell says `data-tone="warning"`. */
121157
+ "--spatial-bar-chart-tone-warning"?: (string) | undefined;
119116
121158
  /** The largest a cell grows, along its edge. The strip is never wider than its box, and draws smaller cells to fit. */
119117
121159
  "--spatial-heatmap-cell-size"?: (string) | undefined;
119118
121160
  /** 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. */
@@ -119353,6 +121395,8 @@ export type CustomCssProperties = {
119353
121395
  "--tabs-tab-hover-background-color"?: (string) | undefined;
119354
121396
  /** The label color under the pointer. */
119355
121397
  "--tabs-tab-hover-color"?: (string) | undefined;
121398
+ /** 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. */
121399
+ "--tabs-tab-max-inline-size"?: (string) | undefined;
119356
121400
  /** The space either side of the label. */
119357
121401
  "--tabs-tab-padding-inline"?: (string) | undefined;
119358
121402
  /** The corners of a tab, which the hover wash takes. */
@@ -119463,7 +121507,7 @@ export type CustomCssProperties = {
119463
121507
  "--time-input-background-color"?: (string) | undefined;
119464
121508
  /** Color of the panel's edge. */
119465
121509
  "--time-input-border-color"?: (string) | undefined;
119466
- /** 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. */
121510
+ /** 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. */
119467
121511
  "--time-input-border-width"?: (string) | undefined;
119468
121512
  /** The fill behind the segment with focus, in `segmented`. It follows `--helix-color-primary-surface`. */
119469
121513
  "--time-input-segment-focus-background-color"?: (string) | undefined;
@@ -119523,7 +121567,7 @@ export type CustomCssProperties = {
119523
121567
  "--toast-background-color"?: (string) | undefined;
119524
121568
  /** Color of the panel's edge. */
119525
121569
  "--toast-border-color"?: (string) | undefined;
119526
- /** 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. */
121570
+ /** 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. */
119527
121571
  "--toast-border-width"?: (string) | undefined;
119528
121572
  /** Color of the message's text. */
119529
121573
  "--toast-color"?: (string) | undefined;
@@ -119625,7 +121669,7 @@ export type CustomCssProperties = {
119625
121669
  "--tour-spotlight-y"?: (string) | undefined;
119626
121670
  /** The size of the arrow's box, before it is rotated. */
119627
121671
  "--tour-arrow-size"?: (string) | undefined;
119628
- /** 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. */
121672
+ /** 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. */
119629
121673
  "--tour-border-width"?: (string) | undefined;
119630
121674
  /** The widest the panel can grow. */
119631
121675
  "--tour-bubble-size"?: (string) | undefined;
@@ -119819,6 +121863,18 @@ export type CustomCssProperties = {
119819
121863
  "--virtual-list-selected-background-color"?: (string) | undefined;
119820
121864
  /** The color of the text in a chosen row, in a list with `selection-mode`. Inherited by default. */
119821
121865
  "--virtual-list-selected-color"?: (string) | undefined;
121866
+ /** The color of the second wave. Defaults to the accent color. */
121867
+ "--voice-level-accent-color"?: (string) | undefined;
121868
+ /** How many bars the spectrum draws, from 3 to 96. Defaults to `24`. */
121869
+ "--voice-level-bars"?: (string) | undefined;
121870
+ /** The height. Defaults to the icon size for `spectrum` and the control size for `waves`. */
121871
+ "--voice-level-block-size"?: (string) | undefined;
121872
+ /** The color of the center bars and the main wave. Defaults to the primary color. */
121873
+ "--voice-level-color"?: (string) | undefined;
121874
+ /** The color of the bars at either end. Defaults to `--voice-level-color` at 55 percent. */
121875
+ "--voice-level-edge-color"?: (string) | undefined;
121876
+ /** The width. Defaults to four times the height for `spectrum` and three times for `waves`. */
121877
+ "--voice-level-inline-size"?: (string) | undefined;
119822
121878
  };
119823
121879
 
119824
121880
  declare module "react" {