@fusion.dev/helix-headless 0.217.0 → 0.219.0

package/types/vue.d.ts

@@ -137,6 +137,7 @@ import type {
   HelixHeadlessMenuItem,
   HelixHeadlessMenuSection,
   HelixHeadlessMeter,
+  HelixHeadlessMeterSegment,
   HelixHeadlessMotionToggle,
   HelixHeadlessNavigation,
   HelixHeadlessNotification,
@@ -256,6 +257,7 @@ import type {
   HelixShortcutEvent,
   HelixSortEvent,
   HelixSortedEvent,
+  HelixStopEvent,
   HelixTerminalBellEvent,
   HelixTerminalInputEvent,
   HelixTerminalLinkEvent,
@@ -1371,6 +1373,19 @@ into one, counting the first and the last. Unset, it never folds. At least
 into one, counting the first and the last. Unset, it never folds. At least
 2, so the first crumb and the current page always show. */
   maxItems?: (HelixHeadlessBreadcrumbs["maxItems"]) | undefined;
+  /** The mark between one crumb and the next, for the whole trail. Unset is a
+chevron; `slash` is a slash, as a path or a repository and its branch is
+written.
+
+**On the trail rather than on each crumb**, because the marks are one
+decision: a trail whose separators differ from crumb to crumb is a
+mistake, and a trail drawn from `items` has no crumb of yours to set it
+on. A crumb's own `separator` slot still replaces its mark, for the rare
+crumb that needs something else.
+
+Optional and reflected, per the rule that a reflected property takes no
+default, so a stylesheet can select on it. */
+  separator?: (HelixHeadlessBreadcrumbs["separator"]) | undefined;
   /** The trail as data, drawn as crumbs before any you slot. The last item is the
 current page.
 
@@ -1485,6 +1500,36 @@ is the platform's `commandfor`. */
   commandfor?: (HelixHeadlessButton["commandFor"]) | undefined;
   /** The id of the element the command is sent to. */
   commandFor?: (HelixHeadlessButton["commandFor"]) | undefined;
+  /** Whether a disabled button stays in the tab order, so a tooltip around it
+can say why it is disabled.
+
+Set it on a button whose reason a Tooltip gives, such as a Save with no
+changes to save. While the button is disabled, it keeps focus and takes
+hover, and it refuses every press: a click, Enter and Space, and Enter in
+a field of its form. The click does not reach your listeners, and a submit
+button submits nothing. The inner control carries `aria-disabled` in place
+of the native `disabled`, so a screen reader still says it is unavailable.
+The styled button keeps the disabled look.
+
+Leave it unset on a button with no reason to give. A plain disabled button
+leaves the tab order, as a native one does, and a keyboard reader skips a
+stop that does nothing. Set `pending` for the wait after a press. */
+  "focusable-when-disabled"?: (HelixHeadlessButton["focusableWhenDisabled"]) | undefined;
+  /** Whether a disabled button stays in the tab order, so a tooltip around it
+can say why it is disabled.
+
+Set it on a button whose reason a Tooltip gives, such as a Save with no
+changes to save. While the button is disabled, it keeps focus and takes
+hover, and it refuses every press: a click, Enter and Space, and Enter in
+a field of its form. The click does not reach your listeners, and a submit
+button submits nothing. The inner control carries `aria-disabled` in place
+of the native `disabled`, so a screen reader still says it is unavailable.
+The styled button keeps the disabled look.
+
+Leave it unset on a button with no reason to give. A plain disabled button
+leaves the tab order, as a native one does, and a keyboard reader skips a
+stop that does nothing. Set `pending` for the wait after a press. */
+  focusableWhenDisabled?: (HelixHeadlessButton["focusableWhenDisabled"]) | undefined;
   /** Where this button's submission goes, overriding the form's own.
 
 **The five `form*` overrides ride on a native submit button that stands in
@@ -2713,11 +2758,26 @@ export type HelixHeadlessChatComposerHelixListenElementEvent =
 /** `helix-send` event type */
 export type HelixHeadlessChatComposerHelixSendElementEvent =
   HelixHeadlessChatComposerElementEvent<HelixSendEvent>;
+/** `helix-stop` event type */
+export type HelixHeadlessChatComposerHelixStopElementEvent =
+  HelixHeadlessChatComposerElementEvent<HelixStopEvent>;
 /** `helix-typing` event type */
 export type HelixHeadlessChatComposerHelixTypingElementEvent =
   HelixHeadlessChatComposerElementEvent<HelixTypingEvent>;
 
 export type HelixHeadlessChatComposerVueProps = {
+  /** Whether the draft holds something besides its text, such as an attached
+file. The draft then counts as one though the field is empty, so the
+send button shows in place of the `idle` slot. */
+  attached?: (HelixHeadlessChatComposer["attached"]) | undefined;
+  /** Whether a reply is on its way. While set, the send button is a stop
+button that sends `helix-stop`, and the draft does not send.
+
+**The same button rather than one beside it**, because sending and
+stopping are never both possible: while a reply is on its way there is
+nothing to send to, and the place the reader's eye goes to act is the
+place that can act. The field stays open for the next turn. */
+  busy?: (HelixHeadlessChatComposer["busy"]) | undefined;
   /** A message about the draft, shown under the field. While set, the composer
 is invalid, does not send, and does not submit, as a field's `feedback`
 does, and the message is announced as it appears. */
@@ -2736,6 +2796,14 @@ the field, as on a `<textarea>`. */
   minLength?: (HelixHeadlessChatComposer["minLength"]) | undefined;
   /** Placeholder text shown in an empty field. */
   placeholder?: (HelixHeadlessChatComposer["placeholder"]) | undefined;
+  /** Whether Enter sends while `busy`, for a page that queues the turn or
+hands it to the reply under way.
+
+Off by default, because a page that does neither would drop the turn: it
+has nowhere to put a message while a reply is coming. The button stays
+the stop button either way, since stopping is still the one thing it
+should do while a reply is on its way. */
+  queue?: (HelixHeadlessChatComposer["queue"]) | undefined;
   /** Whether the form needs a draft to submit. An empty draft never sends,
 required or not. */
   required?: (HelixHeadlessChatComposer["required"]) | undefined;
@@ -2743,10 +2811,34 @@ required or not. */
 
 It grows from there. */
   rows?: (HelixHeadlessChatComposer["rows"]) | undefined;
+  /** Whether the draft waits to be sent, such as while an attachment is still
+read. The send button is unavailable and Enter does not send, while the
+field stays open. The stop button shown while `busy` still stops. */
+  "send-disabled"?: (HelixHeadlessChatComposer["sendDisabled"]) | undefined;
+  /** Whether the draft waits to be sent, such as while an attachment is still
+read. The send button is unavailable and Enter does not send, while the
+field stays open. The stop button shown while `busy` still stops. */
+  sendDisabled?: (HelixHeadlessChatComposer["sendDisabled"]) | undefined;
   /** Label for the send button. */
   "send-label"?: (HelixHeadlessChatComposer["sendLabel"]) | undefined;
   /** Label for the send button. */
   sendLabel?: (HelixHeadlessChatComposer["sendLabel"]) | undefined;
+  /** Why the draft waits, such as "Reading photo.jpg", shown in a tooltip on
+the send button while `send-disabled` is set. The button then stays in
+the tab order and takes the pointer, with `aria-disabled` in place of
+`disabled`, so the reason can be reached by keyboard and by pointer, as
+Button's `focusable-when-disabled` does. A press still sends nothing. */
+  "send-reason"?: (HelixHeadlessChatComposer["sendReason"]) | undefined;
+  /** Why the draft waits, such as "Reading photo.jpg", shown in a tooltip on
+the send button while `send-disabled` is set. The button then stays in
+the tab order and takes the pointer, with `aria-disabled` in place of
+`disabled`, so the reason can be reached by keyboard and by pointer, as
+Button's `focusable-when-disabled` does. A press still sends nothing. */
+  sendReason?: (HelixHeadlessChatComposer["sendReason"]) | undefined;
+  /** Label for the stop button shown while `busy`. */
+  "stop-label"?: (HelixHeadlessChatComposer["stopLabel"]) | undefined;
+  /** Label for the stop button shown while `busy`. */
+  stopLabel?: (HelixHeadlessChatComposer["stopLabel"]) | undefined;
   /** What sends the turn: `enter` for the Enter key, or `button` for the send
 button only.
 
@@ -2819,6 +2911,23 @@ imperatively later, and nothing is hydrating by then.
 
 Here rather than on each control. */
   name?: (HelixHeadlessChatComposer["name"]) | undefined;
+  /** Examples the empty field shows in turn, in place of `placeholder`, such
+as tasks a reader might ask for. Each shows for 6.5 seconds, and a longer
+one shows longer, up to 10 seconds.
+
+**Each is the field's placeholder in its turn**, so a screen reader that
+reaches the field hears the one showing. The swap runs through
+`:state(example-leaving)`, as one example leaves, and
+`:state(example-entering)`, as the next arrives.
+
+**They move only while nobody is about to write, and while the reader
+can see them.** An empty field without focus moves on. Focus or text
+holds the example showing, and an example already leaving finishes its
+turn. A composer scrolled out of view holds its example, and the example
+gets its full time again when the composer comes back. Where the reader
+asked for less motion, or the page paused its motion, the first example
+stays. */
+  placeholders?: (HelixHeadlessChatComposer["placeholders"]) | undefined;
   /** The engine this field listens through, in place of the one
 `registerSpeechEngine` gave the page, or the browser's own. */
   speechEngine?: (HelixHeadlessChatComposer["speechEngine"]) | undefined;
@@ -2831,6 +2940,8 @@ export type HelixHeadlessChatComposerVueEvents = {
   "helix-listen": HelixHeadlessChatComposerHelixListenElementEvent;
   /** Fired when the user sends their turn, and cancelable. */
   "helix-send": HelixHeadlessChatComposerHelixSendElementEvent;
+  /** Fired when the user presses the stop button, shown in place of the send button while `busy` is set. */
+  "helix-stop": HelixHeadlessChatComposerHelixStopElementEvent;
   /** The user started or stopped writing, with `typing` saying which, as the composer's `typing` does. */
   "helix-typing": HelixHeadlessChatComposerHelixTypingElementEvent;
   /** 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. */
@@ -5330,6 +5441,36 @@ whatever its `type`. Declared here so its own page says what it holds. */
   value?: (HelixHeadlessCopyButton["value"]) | undefined;
   /**  */
   "aria-label"?: (string) | undefined;
+  /** Whether a disabled button stays in the tab order, so a tooltip around it
+can say why it is disabled.
+
+Set it on a button whose reason a Tooltip gives, such as a Save with no
+changes to save. While the button is disabled, it keeps focus and takes
+hover, and it refuses every press: a click, Enter and Space, and Enter in
+a field of its form. The click does not reach your listeners, and a submit
+button submits nothing. The inner control carries `aria-disabled` in place
+of the native `disabled`, so a screen reader still says it is unavailable.
+The styled button keeps the disabled look.
+
+Leave it unset on a button with no reason to give. A plain disabled button
+leaves the tab order, as a native one does, and a keyboard reader skips a
+stop that does nothing. Set `pending` for the wait after a press. */
+  "focusable-when-disabled"?: (HelixHeadlessCopyButton["focusableWhenDisabled"]) | undefined;
+  /** Whether a disabled button stays in the tab order, so a tooltip around it
+can say why it is disabled.
+
+Set it on a button whose reason a Tooltip gives, such as a Save with no
+changes to save. While the button is disabled, it keeps focus and takes
+hover, and it refuses every press: a click, Enter and Space, and Enter in
+a field of its form. The click does not reach your listeners, and a submit
+button submits nothing. The inner control carries `aria-disabled` in place
+of the native `disabled`, so a screen reader still says it is unavailable.
+The styled button keeps the disabled look.
+
+Leave it unset on a button with no reason to give. A plain disabled button
+leaves the tab order, as a native one does, and a keyboard reader skips a
+stop that does nothing. Set `pending` for the wait after a press. */
+  focusableWhenDisabled?: (HelixHeadlessCopyButton["focusableWhenDisabled"]) | undefined;
   /** Whether the action the button started is still running.
 
 A pending button keeps focus and stays in the tab order, and refuses every
@@ -9167,6 +9308,36 @@ is the platform's `commandfor`. */
   commandfor?: (HelixHeadlessIconButton["commandFor"]) | undefined;
   /** The id of the element the command is sent to. */
   commandFor?: (HelixHeadlessIconButton["commandFor"]) | undefined;
+  /** Whether a disabled button stays in the tab order, so a tooltip around it
+can say why it is disabled.
+
+Set it on a button whose reason a Tooltip gives, such as a Save with no
+changes to save. While the button is disabled, it keeps focus and takes
+hover, and it refuses every press: a click, Enter and Space, and Enter in
+a field of its form. The click does not reach your listeners, and a submit
+button submits nothing. The inner control carries `aria-disabled` in place
+of the native `disabled`, so a screen reader still says it is unavailable.
+The styled button keeps the disabled look.
+
+Leave it unset on a button with no reason to give. A plain disabled button
+leaves the tab order, as a native one does, and a keyboard reader skips a
+stop that does nothing. Set `pending` for the wait after a press. */
+  "focusable-when-disabled"?: (HelixHeadlessIconButton["focusableWhenDisabled"]) | undefined;
+  /** Whether a disabled button stays in the tab order, so a tooltip around it
+can say why it is disabled.
+
+Set it on a button whose reason a Tooltip gives, such as a Save with no
+changes to save. While the button is disabled, it keeps focus and takes
+hover, and it refuses every press: a click, Enter and Space, and Enter in
+a field of its form. The click does not reach your listeners, and a submit
+button submits nothing. The inner control carries `aria-disabled` in place
+of the native `disabled`, so a screen reader still says it is unavailable.
+The styled button keeps the disabled look.
+
+Leave it unset on a button with no reason to give. A plain disabled button
+leaves the tab order, as a native one does, and a keyboard reader skips a
+stop that does nothing. Set `pending` for the wait after a press. */
+  focusableWhenDisabled?: (HelixHeadlessIconButton["focusableWhenDisabled"]) | undefined;
   /** Where this button's submission goes, overriding the form's own.
 
 **The five `form*` overrides ride on a native submit button that stands in
@@ -9522,6 +9693,10 @@ token.
 Empty leaves the attribute off, which is the browser's default. Set it to
 a token like `email` or `bday` to ask for autofill, or to `off` to refuse. */
   autocomplete?: (HelixHeadlessInput["autocomplete"]) | undefined;
+  /** Whether the browser corrects words as the reader types, as the platform's
+`autocorrect`. Turn it off, with `autocorrect="off"`, for text that is not
+prose, such as an address or a code, which corrections would change. */
+  autocorrect?: (HelixHeadlessInput["autocorrect"]) | undefined;
   /** Whether the field shows a button that empties it.
 
 Shown only while there is something to clear, because a control that does
@@ -11116,9 +11291,13 @@ stream ends. */
   "dropped-label"?: (HelixHeadlessLog["droppedLabel"]) | undefined;
   /** What the line above the log says once `limit` has let lines go. `{count}` is how many. */
   droppedLabel?: (HelixHeadlessLog["droppedLabel"]) | undefined;
-  /** The text shown and announced when the log has no lines. */
+  /** The text shown and announced when the log has no lines and no steps. A
+step with nothing in it yet, such as one still `pending`, is its heading
+alone, so a log holding one says nothing. */
   "empty-text"?: (HelixHeadlessLog["emptyText"]) | undefined;
-  /** The text shown and announced when the log has no lines. */
+  /** The text shown and announced when the log has no lines and no steps. A
+step with nothing in it yet, such as one still `pending`, is its heading
+alone, so a log holding one says nothing. */
   emptyText?: (HelixHeadlessLog["emptyText"]) | undefined;
   /** What a screen reader hears when lines at `error` arrive. `{count}` is how
 many arrived together and `{text}` is the first of them. */
@@ -12641,6 +12820,24 @@ export type HelixHeadlessMeterVueEvents = {
   "helix-band": HelixHeadlessMeterHelixBandElementEvent;
 };
 
+export type HelixHeadlessMeterSegmentVueProps = {
+  /** What the segment is, such as "Tools", which names the slice when a pointer
+rests on it.
+
+Not announced: see the note on a meter's children above. */
+  label?: (HelixHeadlessMeterSegment["label"]) | undefined;
+  /** What the segment means, as it does on a callout. Takes the tone's color in
+place of the next color in the series. */
+  tone?: (HelixHeadlessMeterSegment["tone"]) | undefined;
+  /** How much of the meter's range the segment takes, in the units of the meter's
+`min` and `max`.
+
+A value that is not a number, or is below zero, draws nothing. */
+  value?: (HelixHeadlessMeterSegment["value"]) | undefined;
+};
+
+export type HelixHeadlessMeterSegmentVueEvents = {};
+
 /** `HelixHeadlessMotionToggle` component event */
 export type HelixHeadlessMotionToggleElementEvent<E = Event> = TypedEvent<
   HelixHeadlessMotionToggle,
@@ -15819,13 +16016,42 @@ export type HelixHeadlessSpatialBarChartHelixReadingPressElementEvent =
   HelixHeadlessSpatialBarChartElementEvent<HelixReadingPressEvent>;
 
 export type HelixHeadlessSpatialBarChartVueProps = {
-  /** Draws no box: no edges, grid, numbers, or names, so the readings stand
-alone and fill the plot, as a picture on a product's own page does. The
+  /** Grows the bars up from the floor the first time the chart comes into
+view with readings, each category a little after the one before it, so
+the drawing arrives the way a page's own picture does. The growth is
+fast at first, slows to rest, and never passes a bar's value.
+
+Under `prefers-reduced-motion`, or where the page has paused its motion
+through `pauseMotion` or `Motion Toggle`, the bars stand at their height
+from the start. A later table draws the bars it already had at their
+height, and grows the bars it adds, each from the floor, so a reading that
+arrives while the chart is in view arrives the same way. */
+  grow?: (HelixHeadlessSpatialBarChart["grow"]) | undefined;
+  /** Grows the bars again each time the chart comes back into view after it
+left it, as a pane does when it is opened again, where `grow` alone grows
+them the first time only. Only a chart that grows takes it.
+
+While it is out of view the bars stand at the floor, so the first frame
+after it returns is the start of the growth and never a flash at full
+height. */
+  "grow-again"?: (HelixHeadlessSpatialBarChart["growAgain"]) | undefined;
+  /** Grows the bars again each time the chart comes back into view after it
+left it, as a pane does when it is opened again, where `grow` alone grows
+them the first time only. Only a chart that grows takes it.
+
+While it is out of view the bars stand at the floor, so the first frame
+after it returns is the start of the growth and never a flash at full
+height. */
+  growAgain?: (HelixHeadlessSpatialBarChart["growAgain"]) | undefined;
+  /** Draws no box: no edges, grid, numbers, or names, and in a `row` no
+floor, so the readings stand alone and fill the plot, as a picture on a
+product's own page does. The
 table, the summary, the tooltip, and the keys still carry every value,
 and a renderer draws no box either. */
   "no-box"?: (HelixHeadlessSpatialBarChart["noBox"]) | undefined;
-  /** Draws no box: no edges, grid, numbers, or names, so the readings stand
-alone and fill the plot, as a picture on a product's own page does. The
+  /** Draws no box: no edges, grid, numbers, or names, and in a `row` no
+floor, so the readings stand alone and fill the plot, as a picture on a
+product's own page does. The
 table, the summary, the tooltip, and the keys still carry every value,
 and a renderer draws no box either. */
   noBox?: (HelixHeadlessSpatialBarChart["noBox"]) | undefined;
@@ -15839,6 +16065,15 @@ and a renderer draws no box either. */
   "plot-label"?: (HelixHeadlessSpatialBarChart["plotLabel"]) | undefined;
   /** The plot's name where the chart has none: no `aria-label`, `label`, or table caption. */
   plotLabel?: (HelixHeadlessSpatialBarChart["plotLabel"]) | undefined;
+  /** Stacks a category's series into one column, each block standing on the
+ones before it, so the column is as tall as the category's total, as a
+flat `Bar Chart` stacks them.
+
+Absent stands the series one behind another in depth. Stacked, every
+series stands in the front row, so none hides another, and the parts of
+one total read together. A negative reading hangs below zero on the
+negatives before it. The scale fits the stacks. */
+  stacked?: (HelixHeadlessSpatialBarChart["stacked"]) | undefined;
   /** The `summary` part's sentence. `{count}`, `{series}`, and `{categories}`
 are the number of bars, series, and categories, written in the locale,
 and `{low}` and `{high}` the lowest and the highest value. */
@@ -15847,6 +16082,38 @@ and `{low}` and `{high}` the lowest and the highest value. */
 are the number of bars, series, and categories, written in the locale,
 and `{low}` and `{high}` the lowest and the highest value. */
   summaryLabel?: (HelixHeadlessSpatialBarChart["summaryLabel"]) | undefined;
+  /** How the bars stand.
+
+Unset, they stand on a grid of categories across and series in depth,
+in a box the camera looks at from a corner, so the grid recedes at an
+angle. `row` lays the categories in a straight line across the page and
+turns each bar to the camera, showing its top and two sides, for one row
+of readings in a small space such as a pane: turning the view turns each
+bar where it stands, and the row stays level. It is the chart's own
+drawing that lays the row: a renderer connected through
+`@fusion.dev/helix-plot` stands the bars on the grid.
+
+`diagonal` is the same row climbing to the right as it recedes, each
+place a step further back than the one before, as a row of days on a
+product's page is drawn: the row rises one part in five across the page
+from any turn, and its floor and names climb with it. A row whose bars
+have a size climbs at most a quarter of the plot's height, so the bars
+of a long row keep theirs.
+
+**A row draws its floor in place of a box**: each place as an outline a
+little wider than its bar, and each category's name under it, as many
+names as fit without touching. A name whose bar names a tone is written
+first, in that tone. `no-box` leaves the floor and the names out.
+
+**A `column-gap` on the `fallback` part gives a row's bars one width**,
+which the styled tier sets from `--spatial-bar-chart-bar-size`: one bar
+stands as wide as each of twenty, the row is as long as its bars and
+centered, 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, and `fits` says how many bars the plot holds, so a page
+can give it the latest of a longer table. It is read when the plot's
+size changes. */
+  variant?: (HelixHeadlessSpatialBarChart["variant"]) | undefined;
   /** The words shown in place of the drawing when the table has no readings,
 and the fallback of the `empty` slot. */
   "empty-text"?: (HelixHeadlessSpatialBarChart["emptyText"]) | undefined;
@@ -22033,8 +22300,12 @@ export type CustomCssProperties = {
   "--meter-at"?: (string) | undefined;
   /** The value as a fraction of the range, 0 to 1. */
   "--meter-fraction"?: (string) | undefined;
+  /** How much the range holds, `max` less `min`, which a segment divides its own value by to find its width. */
+  "--meter-span"?: (string) | undefined;
   /** How much of the circle the arc covers, as a path length. */
   "--meter-sweep"?: (string) | undefined;
+  /** How much of the range the segment takes, in the meter's own units. */
+  "--meter-segment-value"?: (string) | undefined;
   /** How deep a row is, from 0 at the root, for indenting it. */
   "--object-inspector-level"?: (string) | undefined;
   /** The value as a fraction of the range, 0 to 1. Pinned to 1 while indeterminate. */
@@ -22055,6 +22326,10 @@ export type CustomCssProperties = {
   "--chart-point-y"?: (string) | undefined;
   /** A tick's position along its axis, as a percentage. The component writes it. */
   "--chart-tick"?: (string) | undefined;
+  /** 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. */
+  "--scroll-area-gutter-block-end"?: (string) | undefined;
+  /** 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. */
+  "--scroll-area-gutter-inline-end"?: (string) | undefined;
   /** 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. */
   "--scroll-area-scroll-fraction"?: (string) | undefined;
   /** 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. */
@@ -22069,8 +22344,22 @@ export type CustomCssProperties = {
   "--slider-marker-at"?: (string) | undefined;
   /** Where the filled span ends, as a fraction of the track, 0 to 1: a range's upper thumb, or the farther of a single thumb and its `origin`. */
   "--slider-to"?: (string) | undefined;
-  /** 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. */
-  "--spatial-bar-chart-shade"?: (string) | undefined;
+  /**  */
+  "--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;
+  /** The color of a bar whose cell says `data-tone="accent"`. */
+  "--spatial-bar-chart-tone-accent"?: (string) | undefined;
+  /** The color of a bar whose cell says `data-tone="danger"`. */
+  "--spatial-bar-chart-tone-danger"?: (string) | undefined;
+  /** The color of a bar whose cell says `data-tone="info"`. */
+  "--spatial-bar-chart-tone-info"?: (string) | undefined;
+  /** The color of a bar whose cell says `data-tone="muted"`. */
+  "--spatial-bar-chart-tone-muted"?: (string) | undefined;
+  /** 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. */
+  "--spatial-bar-chart-tone-primary"?: (string) | undefined;
+  /** The color of a bar whose cell says `data-tone="success"`. */
+  "--spatial-bar-chart-tone-success"?: (string) | undefined;
+  /** The color of a bar whose cell says `data-tone="warning"`. */
+  "--spatial-bar-chart-tone-warning"?: (string) | undefined;
   /** Where the `start` or the `end` label stands clear of the drawing, from the footer's inline start, in pixels. The component measures it and writes it on the label, with `data-placed`, as the view turns. */
   "--spatial-heatmap-label-x"?: (string) | undefined;
   /** Where the `start` or the `end` label stands clear of the drawing, from the footer's top, in pixels. The component measures it and writes it on the label, with `data-placed`, as the view turns. */
@@ -22251,7 +22540,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessButtonGroupVueProps,
     HelixHeadlessButtonGroupVueEvents
   >;
-  /** Renders a real '<button>', so activation, focus, and other browser behavior come from the platform.  **It never renders an anchor.** A router renders its own '<a>' to intercept a click, and it cannot render one inside the button's shadow root. For a link that looks like a button, use the base layer recipe on your own anchor: '<Link data-button="solid">' draws the same control.  'delegatesFocus' moves focus to the inner control. It is serialized into the server markup, so the button is reachable by keyboard before any JavaScript loads.  The inner control is always 'type="button"', because a '<button type="submit">' inside a shadow root cannot submit a form outside it. To submit, the button puts a hidden native submit button carrying its 'name', 'value' and 'form*' overrides into the form, calls 'requestSubmit()' with it, which runs validation, unlike 'submit()', and takes it out again, as Shoelace and Web Awesome do. A 'submit' listener reads that button as 'event.submitter', so 'event.submitter.value' and 'new FormData(form, event.submitter)' tell two submit buttons apart.  As the first submit button in its form, it is the form's default button: Enter in a text field of the form presses it, as it presses a native one.  A press acts once its 'click' has reached your listeners, as a native button's does, so 'preventDefault()' in a 'click' listener cancels it: the form is not submitted or reset, and no command is sent.  Set 'pending' while the action a press started is still running. The button keeps focus and refuses presses, and a reader on it hears 'pending-label'.  Every press that acts sends 'helix-press' with what pressed it in 'detail.pointerType': 'mouse', 'pen', 'touch', 'keyboard', or 'virtual' for a screen reader's press or a script's 'click()', as React Aria's 'onPress' does. It is sent once the press has done its own work, after 'click' has reached your listeners, and never for a disabled or pending button or a canceled press.  **Keyboard.** Enter and Space press the button, as on a native one. */
+  /** Renders a real '<button>', so activation, focus, and other browser behavior come from the platform.  **It never renders an anchor.** A router renders its own '<a>' to intercept a click, and it cannot render one inside the button's shadow root. For a link that looks like a button, use the base layer recipe on your own anchor: '<Link data-button="solid">' draws the same control.  'delegatesFocus' moves focus to the inner control. It is serialized into the server markup, so the button is reachable by keyboard before any JavaScript loads.  The inner control is always 'type="button"', because a '<button type="submit">' inside a shadow root cannot submit a form outside it. To submit, the button puts a hidden native submit button carrying its 'name', 'value' and 'form*' overrides into the form, calls 'requestSubmit()' with it, which runs validation, unlike 'submit()', and takes it out again, as Shoelace and Web Awesome do. A 'submit' listener reads that button as 'event.submitter', so 'event.submitter.value' and 'new FormData(form, event.submitter)' tell two submit buttons apart.  As the first submit button in its form, it is the form's default button: Enter in a text field of the form presses it, as it presses a native one.  A press acts once its 'click' has reached your listeners, as a native button's does, so 'preventDefault()' in a 'click' listener cancels it: the form is not submitted or reset, and no command is sent.  Set 'pending' while the action a press started is still running. The button keeps focus and refuses presses, and a reader on it hears 'pending-label'.  Set 'focusable-when-disabled' on a disabled button whose reason a Tooltip gives. It stays in the tab order and takes hover, so the tooltip opens, and it refuses every press.  Every press that acts sends 'helix-press' with what pressed it in 'detail.pointerType': 'mouse', 'pen', 'touch', 'keyboard', or 'virtual' for a screen reader's press or a script's 'click()', as React Aria's 'onPress' does. It is sent once the press has done its own work, after 'click' has reached your listeners, and never for a disabled or pending button or a canceled press.  **Keyboard.** Enter and Space press the button, as on a native one. */
   "helix-headless-button": DefineCustomElement<
     HelixHeadlessButton,
     HelixHeadlessButtonVueProps,
@@ -22293,13 +22582,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessCarouselVueProps,
     HelixHeadlessCarouselVueEvents
   >;
-  /** The composer is a separate element so you can replace it. If you need attachments, slash commands, or a model picker, replace the composer and keep the transcript.  By default, Enter sends and Shift+Enter starts a new line, the convention in messaging apps. Document editors mostly use the opposite, so 'submit-on' takes 'enter' or 'button'. Use 'button' for a long-form composer.  The composer clears only when no listener cancels the send, so the text is kept when you cancel a send that failed.  **Set 'voice' for dictation.** A microphone button before send listens through the page's speech engine, the browser's own unless 'registerSpeechEngine' gave the page another, and types what it hears at the caret as the reader speaks, each guess replaced by the next. Press it again, press Escape, or send, and it stops. Where the browser has no engine, as in Firefox, no button is drawn.  **In a form, the draft is the composer's value**, submitted under 'name', and an empty draft submits an empty entry, as a native textarea does. A form reset puts back the 'value' the markup declared, and a '<fieldset disabled>' turns the composer off. Sending is still 'helix-send', and it does not submit the form.  **'required', 'minlength' and 'maxlength' are checked by the browser**, as on a '<textarea>', and the message is the browser's. 'maxlength' stops the field taking more. A draft that fails them does not send, and the composer takes ':state(invalid)' and 'aria-invalid' once the reader has tried to send it, the form was submitted, or the reader edited the field and left it. Sending an empty required composer counts as trying. Tabbing past an empty composer marks nothing.  **'feedback' is a message of your own about the draft**, such as one your server sent back. While it is set, the composer is invalid at once, does not send or submit, shows the message under the field, and a screen reader hears it as it appears. Clear it to let the draft go.  **'typing' says whether the user is writing**, and 'helix-typing' is sent each time it changes: when they start, and when they send or stop for 'typing-timeout' milliseconds. Pass it on to show "is typing" to the other side. */
+  /** The composer is a separate element so you can replace it. If you need slash commands or a layout of your own, replace the composer and keep the transcript.  By default, Enter sends and Shift+Enter starts a new line, the convention in messaging apps. Document editors mostly use the opposite, so 'submit-on' takes 'enter' or 'button'. Use 'button' for a long-form composer.  The composer clears only when no listener cancels the send, so the text is kept when you cancel a send that failed.  **Set 'voice' for dictation.** A microphone button before send listens through the page's speech engine, the browser's own unless 'registerSpeechEngine' gave the page another, and types what it hears at the caret as the reader speaks, each guess replaced by the next. Press it again, press Escape, or send, and it stops. Where the browser has no engine, as in Firefox, no button is drawn.  **In a form, the draft is the composer's value**, submitted under 'name', and an empty draft submits an empty entry, as a native textarea does. A form reset puts back the 'value' the markup declared, and a '<fieldset disabled>' turns the composer off. Sending is still 'helix-send', and it does not submit the form.  **'required', 'minlength' and 'maxlength' are checked by the browser**, as on a '<textarea>', and the message is the browser's. 'maxlength' stops the field taking more. A draft that fails them does not send, and the composer takes ':state(invalid)' and 'aria-invalid' once the reader has tried to send it, the form was submitted, or the reader edited the field and left it. Sending an empty required composer counts as trying. Tabbing past an empty composer marks nothing.  **'feedback' is a message of your own about the draft**, such as one your server sent back. While it is set, the composer is invalid at once, does not send or submit, shows the message under the field, and a screen reader hears it as it appears. Clear it to let the draft go.  **'typing' says whether the user is writing**, and 'helix-typing' is sent each time it changes: when they start, and when they send or stop for 'typing-timeout' milliseconds. Pass it on to show "is typing" to the other side.  **'busy' says a reply is on its way**, and turns the send button into a stop button, named by 'stop-label', that sends 'helix-stop'. The field stays open so the reader can write the next turn, and Enter does not send it until 'busy' is cleared. With 'queue', Enter sends while 'busy' too, for a page that holds a turn until the reply ends or hands it to the reply under way; the button stays the stop button.  **The 'idle' slot takes the send button's place while there is nothing to send**: the field is empty, 'attached' is not set, and no reply is on its way. Put the action an empty draft offers there, such as a button that starts a voice conversation. The send button comes back as soon as there is a draft. Where focus was on the one that goes, it moves to the one that comes, so a keyboard reader stays in the same place.  **What the draft carries goes in 'attachments'**, inside the box and above the field, such as thumbnails of attached images and cards for attached files. The region takes no room while nothing is in it. A press on its empty space keeps the reader in the field, and a press on a control in it, such as a button that removes an attachment, goes to that control. Set 'attached' as well, so the send button shows for a draft with no text. */
   "helix-headless-chat-composer": DefineCustomElement<
     HelixHeadlessChatComposer,
     HelixHeadlessChatComposerVueProps,
     HelixHeadlessChatComposerVueEvents
   >;
-  /** A chat message carries its state: sending, arrived, streaming, or failed. A failed message has a retry control in the message, which fires 'helix-send'.  'streaming' is the state the others are arranged around. A streaming message changes height on every frame, so it is marked 'aria-busy' while it arrives and announced once when it settles. A screen reader cannot follow a stream read out character by character.  A screen reader names the turn by its author and its time, such as "You, 2 minutes ago". The author is 'author-label', or "You" for 'me', or the 'author' itself where it is a name; give a turn by 'them' an 'author-label' to name it. The chat it sits in holds the sentence and the word for 'me', so a page in another language sets them once there. The time moves on by itself, so "now" becomes "1 minute ago" while the page is open.  **An agent's work goes in 'work', and its answer in the content.** The work, its thinking, the commands it ran and what they printed, is a record read the way a log is, so a 'Log' with 'separation="plain"' and 'quiet' sits there above the answer. The chat says the turn once it settles, from the content alone, so the work is never read aloud as part of the answer. */
+  /** A chat message carries its state: sending, arrived, streaming, or failed. A failed message has a retry control in the message, which fires 'helix-send'.  'streaming' is the state the others are arranged around. A streaming message changes height on every frame, so it is marked 'aria-busy' while it arrives and announced once when it settles. A screen reader cannot follow a stream read out character by character.  A screen reader names the turn by its author and its time, such as "You, 2 minutes ago". The author is 'author-label', or "You" for 'me', or the 'author' itself where it is a name; give a turn by 'them' an 'author-label' to name it. The chat it sits in holds the sentence and the word for 'me', so a page in another language sets them once there. The time moves on by itself, so "now" becomes "1 minute ago" while the page is open.  **What a turn carries goes in 'attachments'**, above the bubble rather in it: a picture inside a tinted bubble is framed twice, and one sent with no words is an empty bubble around it. It sits against the same edge as the turn, and the words keep their bubble under it.  **An agent's work goes in 'work', and its answer in the content.** The work, its thinking, the commands it ran and what they printed, is a record read the way a log is, so a 'Log' with 'separation="plain"' and 'quiet' sits there above the answer. The chat says the turn once it settles, from the content alone, so the work is never read aloud as part of the answer. */
   "helix-headless-chat-message": DefineCustomElement<
     HelixHeadlessChatMessage,
     HelixHeadlessChatMessageVueProps,
@@ -22551,7 +22840,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessLightboxItemVueProps,
     HelixHeadlessLightboxItemVueEvents
   >;
-  /** The frame around content you open, such as a picture, a video frame, or a chart. The lightbox draws no content of its own. It provides the frame, the keyboard behavior, and text that states the current position in the set.  The modal behavior comes from a native '<dialog>' opened with 'showModal()', which provides the top layer, a backdrop, Escape to close, and 'inert' on the rest of the document. Every way of closing goes through 'requestOpen', as in 'Dialog' and 'Drawer'.  A lightbox shows one item at a time and has no scrolling track, so 'active' holds the current item, as in 'Tabs'. The arrow keys change the item while focus stays in the dialog. 'active' names an item by its 'value', and an item with no 'value' by its place, counted from 1, as in 'Steps', so a set written without values moves and 'helix-activate' says '1', '2' and so on.  Set 'controls' for the viewer's own previous, next and close controls, named by 'previous-label', 'next-label' and 'dismiss-label', whose glyphs you can replace in the 'previous-icon', 'next-icon' and 'dismiss-icon' slots. Without it, compose the chrome yourself in the 'header' and 'footer' slots, with buttons that send '--previous', '--next' and '--close'.  **Set 'max-zoom' to let a reader zoom into the shown item**, such as '3'. Two fingers pinch it, and so does a trackpad pinch or the wheel with Ctrl held, about the point under the pointer. A double click or a double tap zooms all the way in about the point pressed and back out, and once zoomed one pointer drags it about and the wheel moves it. '+' and '-' zoom in and out from the keyboard, and '0' puts it back. The scale and the offset are on the 'viewport' part as '--lightbox-zoom', '--lightbox-pan-x' and '--lightbox-pan-y', written only while zoomed, and a swipe moves to the next item only while the item is at its own size. With 'controls', the viewer also draws zoom-out and zoom-in controls, for a pointer with no wheel and no second finger. Once a reader stops zooming, and at once for a key or a zoom control, the live region says the new scale in the words of 'zoom-status-label', such as "Zoomed to 150%".  Each item is a slide: a 'group' with the role description in 'slide-role-label', named by its 'label' or by 'slide-label'. A touch or a pen swiped across the picture shows the next or the previous item, the way the line of text runs.  A press on the empty area around the item closes the viewer, as a press on the backdrop does. Under 'max-zoom', a press beside the item zooms on a double press and closes nothing, and only the space outside the viewport closes the viewer. A press that dragged closes nothing.  **Keyboard.** Opening moves focus to the viewer itself, which a screen reader names.  | Key | What it does | |---|---| | Right, Down | Shows the next item. On a right-to-left page, Left does. While the item is zoomed, the arrows move about it instead. | | Left, Up | Shows the previous item. | | Home, End | Shows the first or the last item. | | '+', '-', '0' | Zooms in, zooms out, and puts the item back at its own size, where 'max-zoom' allows zooming. | | Tab, Shift+Tab | Moves through the controls in the viewer, from the last round to the first and from the first round to the last. | | Escape | Closes the viewer. A 'helix-before-close' listener can refuse. |  A development build warns when a viewer opens with no 'label'.  The chrome hides when there is no input, through 'IdleController', and comes back on a pointer move, a key press, or a focus. It stays while focus is on a control in the header or the footer, so a keyboard reader is never left on a control that has gone. 'fullscreen' uses 'FullscreenController', as 'Video' does. While the viewer is open, the page behind it does not scroll. */
+  /** The frame around content you open, such as a picture, a video frame, or a chart. The lightbox draws no content of its own. It provides the frame, the keyboard behavior, and text that states the current position in the set.  The modal behavior comes from a native '<dialog>' opened with 'showModal()', which provides the top layer, a backdrop, Escape to close, and 'inert' on the rest of the document. Every way of closing goes through 'requestOpen', as in 'Dialog' and 'Drawer'.  A lightbox shows one item at a time and has no scrolling track, so 'active' holds the current item, as in 'Tabs'. The arrow keys change the item while focus stays in the dialog. 'active' names an item by its 'value', and an item with no 'value' by its place, counted from 1, as in 'Steps', so a set written without values moves and 'helix-activate' says '1', '2' and so on.  Set 'controls' for the viewer's own previous, next and close controls, named by 'previous-label', 'next-label' and 'dismiss-label', whose glyphs you can replace in the 'previous-icon', 'next-icon' and 'dismiss-icon' slots. A set of one item has nothing to step to, so it draws no previous, next or counter. Without it, compose the chrome yourself in the 'header' and 'footer' slots, with buttons that send '--previous', '--next' and '--close'.  **Set 'max-zoom' to let a reader zoom into the shown item**, such as '3'. Two fingers pinch it, and so does a trackpad pinch or the wheel with Ctrl held, about the point under the pointer. A double click or a double tap zooms all the way in about the point pressed and back out, and once zoomed one pointer drags it about and the wheel moves it. '+' and '-' zoom in and out from the keyboard, and '0' puts it back. The scale and the offset are on the 'viewport' part as '--lightbox-zoom', '--lightbox-pan-x' and '--lightbox-pan-y', written only while zoomed, and a swipe moves to the next item only while the item is at its own size. With 'controls', the viewer also draws zoom-out and zoom-in controls, for a pointer with no wheel and no second finger. Once a reader stops zooming, and at once for a key or a zoom control, the live region says the new scale in the words of 'zoom-status-label', such as "Zoomed to 150%".  Each item is a slide: a 'group' with the role description in 'slide-role-label', named by its 'label' or by 'slide-label'. A touch or a pen swiped across the picture shows the next or the previous item, the way the line of text runs.  A press on the empty area around the item closes the viewer, as a press on the backdrop does. Under 'max-zoom', a press beside the item zooms on a double press and closes nothing, and only the space outside the viewport closes the viewer. A press that dragged closes nothing.  **Keyboard.** Opening moves focus to the viewer itself, which a screen reader names.  | Key | What it does | |---|---| | Right, Down | Shows the next item. On a right-to-left page, Left does. While the item is zoomed, the arrows move about it instead. | | Left, Up | Shows the previous item. | | Home, End | Shows the first or the last item. | | '+', '-', '0' | Zooms in, zooms out, and puts the item back at its own size, where 'max-zoom' allows zooming. | | Tab, Shift+Tab | Moves through the controls in the viewer, from the last round to the first and from the first round to the last. | | Escape | Closes the viewer. A 'helix-before-close' listener can refuse. |  A development build warns when a viewer opens with no 'label'.  The chrome hides when there is no input, through 'IdleController', and comes back on a pointer move, a key press, or a focus. It stays while focus is on a control in the header or the footer, so a keyboard reader is never left on a control that has gone. 'fullscreen' uses 'FullscreenController', as 'Video' does. While the viewer is open, the page behind it does not scroll. */
   "helix-headless-lightbox": DefineCustomElement<
     HelixHeadlessLightbox,
     HelixHeadlessLightboxVueProps,
@@ -22701,12 +22990,18 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessMenuSectionVueProps,
     HelixHeadlessMenuSectionVueEvents
   >;
-  /** A meter shows a level within a range. Use 'Progress' to show how far along a task is. A progress bar starts empty and ends full, and full is always the good end. For a meter, which end is good depends on what is measured. There is no 'indeterminate', because a meter always has a value.  **Set 'low', 'high', and 'optimum'**, as defined in the HTML specification. 'low' and 'high' divide the range into a low band, a middle band, and a high band. 'optimum' sets the preferred band. The band next to it is fair, and the band two away is poor.  The band is a custom state on the meter, 'good', 'fair' or 'poor', beside 'over' and 'under' for a value past an end, so a page styles the meter around the fill as well as the fill.  **'live' says the reading when it moves into another band**, such as "92%, Poor", in a polite region, for a meter whose value changes while a reader is on the page: a disk filling or a battery draining. The band's word comes from 'band-labels'. */
+  /** A meter shows a level within a range, or how the level divides: write 'Meter.Segment' inside it for each part of the whole, and the meter measures their sum. Use 'Progress' to show how far along a task is. A progress bar starts empty and ends full, and full is always the good end. For a meter, which end is good depends on what is measured. There is no 'indeterminate', because a meter always has a value.  **Set 'low', 'high', and 'optimum'**, as defined in the HTML specification. 'low' and 'high' divide the range into a low band, a middle band, and a high band. 'optimum' sets the preferred band. The band next to it is fair, and the band two away is poor.  The band is a custom state on the meter, 'good', 'fair' or 'poor', beside 'over' and 'under' for a value past an end, so a page styles the meter around the fill as well as the fill.  **'live' says the reading when it moves into another band**, such as "92%, Poor", in a polite region, for a meter whose value changes while a reader is on the page: a disk filling or a battery draining. The band's word comes from 'band-labels'. */
   "helix-headless-meter": DefineCustomElement<
     HelixHeadlessMeter,
     HelixHeadlessMeterVueProps,
     HelixHeadlessMeterVueEvents
   >;
+  /** A segment says how much of the range one part of the whole takes, such as the tokens a model's context holds for its tools, against the tokens it holds for the conversation. Write one for each part inside a 'Meter'.  **The meter's reading is the sum of its segments.** 'value' on the meter is ignored while it has any, so the two cannot disagree, and the bands, the ticks and the reading answer to the total. A segment is drawn as wide as its 'value' is of the meter's range, so segments that add up to less than the range leave the rest of the track empty, and ones that add up to more are cut at the end.  **A meter's children are presentational to a screen reader**, so a segment reaches no one that cannot see the bar. Say the breakdown in text beside it, such as a list with the name and the amount of each part, which is also where a reader finds the exact figures.  A segment draws only in the bar. A meter in 'ring' or 'arc' draws its total. */
+  "helix-headless-meter-segment": DefineCustomElement<
+    HelixHeadlessMeterSegment,
+    HelixHeadlessMeterSegmentVueProps,
+    HelixHeadlessMeterSegmentVueEvents
+  >;
   /** WCAG 2.2.2 asks that motion which starts by itself and runs longer than five seconds can be paused. **This is one control for the whole page**: a press pauses every Helix component that moves by itself, and another lets them run again.  - 'Carousel' stops rotating under 'autoplay'. - 'Video' pauses a video that started itself under 'autoplay'. - 'Aura', 'Orb', and 'Strands' hold the frame they show. - A graph that 'connectGraph' lays out stops where its notes stand, and its   three.js view stops turning. - A map layer's 'frames' stop on the frame they show.  **The choice is the page's**, held on the document element as 'data-helix-motion="paused"', so two of these on one page agree, and a page can set it in its markup or with 'pauseMotion' from '@fusion.dev/helix-core'. A stylesheet can select on the attribute to pause motion of its own.  It is a toggle button: a '<button>' that says whether motion is paused with 'aria-pressed'. It keeps one name, 'label', whichever way it stands, as a toggle button does, and its icon shows what a press does next.  Put it where a reader looks first, such as the page's header. Where the reader asked for reduced motion, nothing moves by itself to begin with. */
   "helix-headless-motion-toggle": DefineCustomElement<
     HelixHeadlessMotionToggle,
@@ -22845,7 +23140,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessScatterChartVueProps,
     HelixHeadlessScatterChartVueEvents
   >;
-  /** Measures which edges have content past them and sets one custom state per edge. CSS cannot read scroll position, so a stylesheet cannot work this out on its own. The styled tier draws a fade on each edge that has a state.  Custom states keep an element that upgrades after a framework rendered it from adding markup the framework did not write. Select them with ':host(:state(more-block-end))'.  While the content overflows, the region gets a 'tabindex', so keyboard users can scroll it. When nothing overflows, it is not a tab stop.  It has 'role="region"' only when you set a 'label', because a screen reader announces an unnamed region as only "region".  **'scrollbars' draws scrollbars of its own** in place of the browser's: a 'scrollbar' part for each axis that scrolls, a 'thumb' in each, and a 'corner' where the two meet. They are for the pointer. The thumb drags, and a press on the track moves the thumb to the press. The viewport stays the tab stop and the region a screen reader reads, and the scrollbars are hidden from screen readers. On the headless tier your stylesheet sizes and places them, hides the browser's own with 'scrollbar-width: none' on the viewport, and draws the thumb from the two custom properties written on each scrollbar. An axis whose 'overflow' is 'hidden' gets no scrollbar.  **'orientation' keeps the content to one axis.** 'vertical' scrolls up and down only, and 'horizontal' sideways only, so the other axis has no scrollbar, the browser's or the component's, and clips what is past it. Leave it unset to scroll both ways.  The viewport's 'scroll' and 'scrollend' are sent again from the host, which is the element you hold. A thumb dragged across the content sends one 'scrollend', once it is let go. In React, bind them with 'onScroll' and 'onScrollEnd'.  **Keyboard.** The viewport is the tab stop while the content overflows, and the browser's scrolling keys move it: the arrow keys, Page Up and Page Down, Home and End, and Space. The scrollbars take no focus. */
+  /** Measures which edges have content past them and sets one custom state per edge. CSS cannot read scroll position, so a stylesheet cannot work this out on its own. The styled tier draws a fade on each edge that has a state.  Custom states keep an element that upgrades after a framework rendered it from adding markup the framework did not write. Select them with ':host(:state(more-block-end))'.  While the content overflows, the region gets a 'tabindex', so keyboard users can scroll it. When nothing overflows, it is not a tab stop.  It has 'role="region"' only when you set a 'label', because a screen reader announces an unnamed region as only "region".  **'scrollbars' draws scrollbars of its own** in place of the browser's: a 'scrollbar' part for each axis that scrolls, a 'thumb' in each, and a 'corner' where the two meet. They are for the pointer. The thumb drags, and a press on the track moves the thumb to the press. The viewport stays the tab stop and the region a screen reader reads, and the scrollbars are hidden from screen readers. On the headless tier your stylesheet sizes and places them, hides the browser's own with 'scrollbar-width: none' on the viewport, and draws the thumb from the two custom properties written on each scrollbar. An axis whose 'overflow' is 'hidden' gets no scrollbar.  **'orientation' keeps the content to one axis.** 'vertical' scrolls up and down only, and 'horizontal' sideways only, so the other axis has no scrollbar, the browser's or the component's, and clips what is past it. Leave it unset to scroll both ways.  **A mask on the viewport also masks the browser's scrollbar.** While a scrollbar takes room beside the content, the viewport carries its size in '--scroll-area-gutter-inline-end' or '--scroll-area-gutter-block-end', so a mask can leave that room opaque. The styled tier's fades use them.  The viewport's 'scroll' and 'scrollend' are sent again from the host, which is the element you hold. A thumb dragged across the content sends one 'scrollend', once it is let go. In React, bind them with 'onScroll' and 'onScrollEnd'.  **Keyboard.** The viewport is the tab stop while the content overflows, and the browser's scrolling keys move it: the arrow keys, Page Up and Page Down, Home and End, and Space. The scrollbars take no focus. */
   "helix-headless-scroll-area": DefineCustomElement<
     HelixHeadlessScrollArea,
     HelixHeadlessScrollAreaVueProps,
@@ -22887,7 +23182,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessSparklineVueProps,
     HelixHeadlessSparklineVueEvents
   >;
-  /** A 3D bar chart reads its table as 'Bar Chart' does: **each row is a category, named by its label, and each numeric column a series**, named by its heading. The bars stand on a grid of categories across and series in depth, each as tall as its value from zero and colored by its series, so one series is a single row of bars and several make a block of them.  **The flat 'Bar Chart' is read more exactly.** Measured, a reader judges a 3D bar's value less closely than a flat one's, and a bar can stand behind another. Use this one where the shape across two sets of names matters more than any one exact value, such as sales by region and by quarter. The tooltip and the table carry the exact values, and a drag turns the view to show a bar another hides.  **Helix draws the frame, and the chart draws the bars in 3D itself, in SVG**: a picture a print and a page without WebGL show too, which a drag or Shift with an arrow turns. Put a box inside the chart, and 'connectSpatialBarChart' from '@fusion.dev/helix-plot', given 'threeBarDriver' from '@fusion.dev/helix-plot/three', draws the bars in it with three.js, lit and in perspective.  **The table is the reading.** Every number is in it, and screen readers read it. The 'summary' part names the number of bars, series, and categories, and the range of values, and describes the plot.  **The plot is read by key, across and in depth.** It takes focus, named by 'label' or the caption. The left and right arrows move from category to category, the down and up arrows from series to series, and Home and End go to the first and the last bar. The 'live' part says the bar's category, series, and value in words. Shift with an arrow turns the view, and Escape lets the bar go.  **A reading shows its row in a tooltip**, as on every chart: the bar a mouse or a pen rests on, the bar tapped, or the one the keys move to.  **Readings are sent as every chart sends them.** 'helix-reading-change' says each move of the reading, and 'helix-reading-press' a bar clicked or pressed with Enter or Space, each with the row of the table in 'index'.  **Keyboard.** The plot is one tab stop once it has readings.  | Key | What it does | |---|---| | Tab | Moves focus to the plot. | | Right, Left | Moves to the next or the previous category. | | Down, Up | Moves to the next or the previous series. | | Home, End | Moves to the first or the last bar. | | Shift with an arrow | Turns the view across, or tilts it up and down. | | Enter, Space | Presses the bar, which sends 'helix-reading-press'. | | Escape | Lets the bar go. | */
+  /** A 3D bar chart reads its table as 'Bar Chart' does: **each row is a category, named by its label, and each numeric column a series**, named by its heading. The bars stand on a grid of categories across and series in depth, each as tall as its value from zero and colored by its series, so one series is a single row of bars and several make a block of them.  **A cell's 'data-tone' colors its own bar and writes its value above it**, such as 'data-tone="primary"' on the one reading a chart is about, as on 'Bar Chart'. The value is the cell's own text. Without a tone, a bar takes its series' color.  **The flat 'Bar Chart' is read more exactly.** Measured, a reader judges a 3D bar's value less closely than a flat one's, and a bar can stand behind another. Use this one where the shape across two sets of names matters more than any one exact value, such as sales by region and by quarter. The tooltip and the table carry the exact values, and a drag turns the view to show a bar another hides.  **Helix draws the frame, and the chart draws the bars in 3D itself, in SVG**: a picture a print and a page without WebGL show too, which a drag or Shift with an arrow turns. Put a box inside the chart, and 'connectSpatialBarChart' from '@fusion.dev/helix-plot', given 'threeBarDriver' from '@fusion.dev/helix-plot/three', draws the bars in it with three.js, lit and in perspective.  **The table is the reading.** Every number is in it, and screen readers read it. The 'summary' part names the number of bars, series, and categories, and the range of values, and describes the plot.  **The plot is read by key, across and in depth.** It takes focus, named by 'label' or the caption. The left and right arrows move from category to category, the down and up arrows from series to series, and Home and End go to the first and the last bar. The 'live' part says the bar's category, series, and value in words. Shift with an arrow turns the view, and Escape lets the bar go.  **A reading shows its row in a tooltip**, as on every chart: the bar a mouse or a pen rests on, the bar tapped, or the one the keys move to.  **Readings are sent as every chart sends them.** 'helix-reading-change' says each move of the reading, and 'helix-reading-press' a bar clicked or pressed with Enter or Space, each with the row of the table in 'index'.  **Keyboard.** The plot is one tab stop once it has readings.  | Key | What it does | |---|---| | Tab | Moves focus to the plot. | | Right, Left | Moves to the next or the previous category. | | Down, Up | Moves to the next or the previous series. | | Home, End | Moves to the first or the last bar. | | Shift with an arrow | Turns the view across, or tilts it up and down. | | Enter, Space | Presses the bar, which sends 'helix-reading-press'. | | Escape | Lets the bar go. | */
   "helix-headless-spatial-bar-chart": DefineCustomElement<
     HelixHeadlessSpatialBarChart,
     HelixHeadlessSpatialBarChartVueProps,
@@ -23007,7 +23302,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessTabPanelVueProps,
     HelixHeadlessTabPanelVueEvents
   >;
-  /** Selection works through an event, the same as in the accordion and the tree. A tab dispatches 'helix-select', and the root pairs it with the panel of the same value. Nothing registers with anything, so tabs added later work with no extra setup.  The tab list is a single tab stop, and the arrow keys move between tabs through 'KeyboardNavigationController', the same as in the radio and toggle groups. Selection follows focus, which suits a small set where showing a panel is cheap. Set 'manual' when showing a panel is expensive, so focus can move without selecting.  'orientation="vertical"' sets the tabs in a column beside the panels, and the tab list says 'aria-orientation="vertical"'. The arrow keys of both axes move between tabs either way.  A tab with an 'href' is a link, for tabs that are pages of a site. Pressing it follows the link. Where any tab is a link, the arrow keys move focus without choosing on every tab of the list, as under 'manual', so arrowing past a tab never leaves the page and the list answers the keys one way. Mark the tab of the page you are on with 'selected', or set 'active' to its value.  Each tab says which panel it controls through 'aria-controls', set as an element reference to the panel's host, where the engine has reflection.  Keys, on the tab list: Left and Right Arrow move between tabs, and so do Up and Down; Home and End go to the first and the last. The horizontal arrows follow the reading direction, so on a right-to-left page Left moves on. Disabled tabs are passed over. Tab leaves the list for the selected panel, which is a tab stop only while it holds nothing focusable.  **Keyboard.**  | Key | What it does | |---|---| | Right, Down | Moves to the next tab, from the last round to the first. Selects it, unless 'manual' is set or a tab is a link. | | Left, Up | Moves to the tab before, from the first round to the last. | | Home, End | Moves to the first or the last tab. | | Enter, Space | Selects the tab with focus, or follows its link. | | Tab | Leaves the list for the selected panel. |  Removing the selected tab selects the enabled tab beside it, the next one or else the one before, and 'active' says so, with 'helix-activate'. Where the removed tab had focus, focus moves to the tab now selected.  **More tabs than fit.** With 'scroll-controls', a strip that scrolls shows a button at each end it can scroll toward, as Web Awesome's tab group does, and a press scrolls it most of its own length. The buttons are for the pointer, so they are out of the tab order and hidden from screen readers; the arrow keys already reach every tab, and the strip scrolls the selected tab into view. A strip scrolls once a stylesheet gives the 'tabs' part an 'overflow', as the styled tier does.  A tab with 'dismissible' can be closed: see 'Tabs.Tab'.  The 'indicator' part moves to the selected tab and carries its place and size, so a mark of your own can be drawn there: style the part, or slot an element into 'indicator', which sits inside the part and reads the same properties. */
+  /** Selection works through an event, the same as in the accordion and the tree. A tab dispatches 'helix-select', and the root pairs it with the panel of the same value. Nothing registers with anything, so tabs added later work with no extra setup.  The tab list is a single tab stop, and the arrow keys move between tabs through 'KeyboardNavigationController', the same as in the radio and toggle groups. Selection follows focus, which suits a small set where showing a panel is cheap. Set 'manual' when showing a panel is expensive, so focus can move without selecting.  'orientation="vertical"' sets the tabs in a column beside the panels, and the tab list says 'aria-orientation="vertical"'. The arrow keys of both axes move between tabs either way.  A tab with an 'href' is a link, for tabs that are pages of a site. Pressing it follows the link. Where any tab is a link, the arrow keys move focus without choosing on every tab of the list, as under 'manual', so arrowing past a tab never leaves the page and the list answers the keys one way. Mark the tab of the page you are on with 'selected', or set 'active' to its value.  Each tab says which panel it controls through 'aria-controls', set as an element reference to the panel's host, where the engine has reflection.  Keys, on the tab list: Left and Right Arrow move between tabs, and so do Up and Down; Home and End go to the first and the last. The horizontal arrows follow the reading direction, so on a right-to-left page Left moves on. Disabled tabs are passed over. Tab leaves the list for the selected panel, which is a tab stop only while it holds nothing focusable.  **Keyboard.**  | Key | What it does | |---|---| | Right, Down | Moves to the next tab, from the last round to the first. Selects it, unless 'manual' is set or a tab is a link. | | Left, Up | Moves to the tab before, from the first round to the last. | | Home, End | Moves to the first or the last tab. | | Enter, Space | Selects the tab with focus, or follows its link. | | Tab | Leaves the list for the selected panel. |  Removing the selected tab selects the enabled tab beside it, the next one or else the one before, and 'active' says so, with 'helix-activate'. Where the removed tab had focus, focus moves to the tab now selected.  **More tabs than fit.** With 'scroll-controls', a strip that scrolls shows a button at each end it can scroll toward, as Web Awesome's tab group does, and a press scrolls it most of its own length. The buttons are for the pointer, so they are out of the tab order and hidden from screen readers; the arrow keys already reach every tab, and the strip scrolls the selected tab into view. A strip scrolls once a stylesheet gives the 'tabs' part an 'overflow', as the styled tier does.  A tab with 'dismissible' can be closed: see 'Tabs.Tab'.  **Panels are optional.** A set with none is a strip whose tabs stand for something the page shows elsewhere: the keys, the selection, 'active' and 'helix-activate' work the same, and no tab names a panel it controls.  The 'indicator' part moves to the selected tab and carries its place and size, so a mark of your own can be drawn there: style the part, or slot an element into 'indicator', which sits inside the part and reads the same properties. */
   "helix-headless-tabs": DefineCustomElement<
     HelixHeadlessTabs,
     HelixHeadlessTabsVueProps,
@@ -23097,7 +23392,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessToggleVueProps,
     HelixHeadlessToggleVueEvents
   >;
-  /** A toolbar holds a mix of controls, such as buttons, toggles, and menus. A button group holds one kind, so the two are separate components.  The toolbar is one tab stop, and the arrow keys move between its controls, so three toolbars take three presses of Tab to pass. Any element the browser can focus counts as a control, including your own elements. A child that takes no focus, such as a divider, is skipped. A menu is reached at its trigger.  A Divider in the toolbar is a separator across the toolbar's axis, as React Aria's is: vertical in a horizontal toolbar and horizontal in a vertical one, without an 'orientation' of its own.  Controls inside a plain wrapper, such as a 'Button Group', are each a stop of the toolbar's own, as React Aria's toolbar flattens a group: the arrows walk through the group's buttons and on past it, and the group takes no tab stop of its own.  The arrows wrap from the last control to the first. Set 'stop-at-ends' to keep them at the ends, as Radix's 'loop' set to false does.  **Keyboard.** Tab enters the toolbar on the control that last had focus, the first control at the start, and the next Tab leaves it.  | Key | What it does | |---|---| | Right | Moves to the next control in a horizontal toolbar, from the last back to the first. | | Left | Moves to the control before in a horizontal toolbar, from the first round to the last. | | Down, Up | The same in a vertical toolbar. | | Home, End | Moves to the first or the last control. |  Left and Right swap on a right-to-left page, where the first control is on the right. The arrows across the toolbar's axis are left to the control that has focus, so a radio-style toggle group or a select answers them itself. The toolbar is 'role="toolbar"' with 'aria-orientation', named by 'label'.  The stop moves through a control's own 'focusable' property where it has one, as Button, Select and Toggle Group do. A control without one has 'tabindex' written on the element that takes focus: a native element itself, or the control inside a custom element's open shadow root, so the host keeps the markup you rendered. Only a custom element whose shadow root is closed takes it on the host.  A toggle group of pressed buttons, 'selection-mode="multiple"', is walked through the same way, each toggle a stop on the toolbar's axis, as React Aria's toolbar walks its toggle buttons. Another nested composite, such as a radio-style toggle group, is one stop on the toolbar's axis: the toolbar's arrows move past it, and the arrows across the toolbar move inside it. A composite with a 'focusable' property, as Toggle Group has, gives up its own tab stop while the toolbar's is elsewhere, so Tab stops once in the toolbar. A composite without one keeps its own tab stop.  A '<slot>' in the toolbar counts as the controls assigned to it, for a toolbar a component draws in its own shadow root with your controls passed into it: they share its tab stop and its arrows with the component's own.  A toolbar inside another toolbar, a Helix one or the page's own 'role="toolbar"', is a 'group' of the outer one, as React Aria's is: the outer toolbar's arrows walk through its controls and on past them, and it takes no keys and no tab stop of its own. A server renders it as a toolbar, having no parent to read, until it upgrades. */
+  /** A toolbar holds a mix of controls, such as buttons, toggles, and menus. A button group holds one kind, so the two are separate components.  The toolbar is one tab stop, and the arrow keys move between its controls, so three toolbars take three presses of Tab to pass. Any element the browser can focus counts as a control, including your own elements. A child that takes no focus, such as a divider, is skipped. A menu is reached at its trigger. A disabled control is skipped too, except a Button with 'focusable-when-disabled', which the arrows still reach so its tooltip can say why it is disabled.  A Divider in the toolbar is a separator across the toolbar's axis, as React Aria's is: vertical in a horizontal toolbar and horizontal in a vertical one, without an 'orientation' of its own.  Controls inside a plain wrapper, such as a 'Button Group', are each a stop of the toolbar's own, as React Aria's toolbar flattens a group: the arrows walk through the group's buttons and on past it, and the group takes no tab stop of its own.  The arrows wrap from the last control to the first. Set 'stop-at-ends' to keep them at the ends, as Radix's 'loop' set to false does.  **Keyboard.** Tab enters the toolbar on the control that last had focus, the first control at the start, and the next Tab leaves it.  | Key | What it does | |---|---| | Right | Moves to the next control in a horizontal toolbar, from the last back to the first. | | Left | Moves to the control before in a horizontal toolbar, from the first round to the last. | | Down, Up | The same in a vertical toolbar. | | Home, End | Moves to the first or the last control. |  Left and Right swap on a right-to-left page, where the first control is on the right. The arrows across the toolbar's axis are left to the control that has focus, so a radio-style toggle group or a select answers them itself. The toolbar is 'role="toolbar"' with 'aria-orientation', named by 'label'.  The stop moves through a control's own 'focusable' property where it has one, as Button, Select and Toggle Group do. A control without one has 'tabindex' written on the element that takes focus: a native element itself, or the control inside a custom element's open shadow root, so the host keeps the markup you rendered. Only a custom element whose shadow root is closed takes it on the host.  A toggle group of pressed buttons, 'selection-mode="multiple"', is walked through the same way, each toggle a stop on the toolbar's axis, as React Aria's toolbar walks its toggle buttons. Another nested composite, such as a radio-style toggle group, is one stop on the toolbar's axis: the toolbar's arrows move past it, and the arrows across the toolbar move inside it. A composite with a 'focusable' property, as Toggle Group has, gives up its own tab stop while the toolbar's is elsewhere, so Tab stops once in the toolbar. A composite without one keeps its own tab stop.  A '<slot>' in the toolbar counts as the controls assigned to it, for a toolbar a component draws in its own shadow root with your controls passed into it: they share its tab stop and its arrows with the component's own.  A toolbar inside another toolbar, a Helix one or the page's own 'role="toolbar"', is a 'group' of the outer one, as React Aria's is: the outer toolbar's arrows walk through its controls and on past them, and it takes no keys and no tab stop of its own. A server renders it as a toolbar, having no parent to read, until it upgrades. */
   "helix-headless-toolbar": DefineCustomElement<
     HelixHeadlessToolbar,
     HelixHeadlessToolbarVueProps,