@fusion.dev/helix 0.176.1 → 0.177.1

package/types/vue.d.ts

@@ -930,6 +930,13 @@ hit-testable at rest, or it would swallow clicks meant for what is over it,
 and an element that is not hit-testable never receives the `pointermove`
 this listens for. Asking for the pointer is asking for the hit test. */
   interactive?: (HelixAura["interactive"]) | undefined;
+  /** Whether the field holds still on the frame it shows.
+
+Set it from a pause control on your page, so a reader can stop the motion,
+as WCAG 2.2.2 asks of anything that moves for more than five seconds. A
+change to another property still repaints the frame. Clearing it starts
+the field from where it stopped. */
+  paused?: (HelixAura["paused"]) | undefined;
   /** How far the pointer reaches into the field, `0` upward.
 
 Multiplied into the presence the pointer already fades in and out with, so
@@ -3414,7 +3421,7 @@ export type HelixChatComposerVueEvents = {
   "helix-send": HelixChatComposerHelixSendElementEvent;
   /** The user started or stopped writing, with `typing` saying which, as the composer's `typing` does. */
   "helix-typing": HelixChatComposerHelixTypingElementEvent;
-  /** The user changed the text. Read it from `value`, for a typing indicator or a saved draft. Sent on the composer and does not bubble. */
+  /** 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. */
   input: HelixChatComposerElementEvent;
 };
 
@@ -7291,6 +7298,18 @@ Unset is horizontal, or across the toolbar the divider sits in. */
 
 export type HelixDividerVueEvents = {};
 
+/** `HelixDonutChart` component event */
+export type HelixDonutChartElementEvent<E = Event> = TypedEvent<
+  HelixDonutChart,
+  E
+>;
+/** `helix-reading-change` event type */
+export type HelixDonutChartHelixReadingChangeElementEvent =
+  HelixDonutChartElementEvent<HelixReadingChangeEvent>;
+/** `helix-reading-press` event type */
+export type HelixDonutChartHelixReadingPressElementEvent =
+  HelixDonutChartElementEvent<HelixReadingPressEvent>;
+
 export type HelixDonutChartVueProps = {
   /** How strongly the slices are drawn.
 
@@ -7333,6 +7352,25 @@ chart and a card mean the same thing by the word.
 material choice, it is an absent series, and a chart says that by not
 having the datum rather than by painting it invisibly. */
   material?: (HelixDonutChart["material"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  "empty-text"?: (HelixDonutChart["emptyText"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  emptyText?: (HelixDonutChart["emptyText"]) | undefined;
+  /** Whether the readings are still on their way. The chart shows
+`loading-text` in place of an empty drawing until it has readings.
+
+Reflected, so a stylesheet can treat the chart while it waits. A chart
+that already has readings keeps drawing them, so a refresh does not
+blank it. */
+  loading?: (HelixDonutChart["loading"]) | undefined;
+  /** The words shown in place of the drawing while `loading` is set and
+there are no readings yet, and the fallback of the `loading` slot. */
+  "loading-text"?: (HelixDonutChart["loadingText"]) | undefined;
+  /** The words shown in place of the drawing while `loading` is set and
+there are no readings yet, and the fallback of the `loading` slot. */
+  loadingText?: (HelixDonutChart["loadingText"]) | undefined;
   /** The id of the table to read.
 
 Names a table in the same tree, so a chart inside another component's
@@ -7458,7 +7496,12 @@ does not look inside the one it has. */
   data?: (HelixDonutChart["data"]) | undefined;
 };
 
-export type HelixDonutChartVueEvents = {};
+export type HelixDonutChartVueEvents = {
+  /** The slice shown moved, or was put away: `index` is the slice's row, or `-1` for none, with its `label` and the `pointerType` that moved it. */
+  "helix-reading-change": HelixDonutChartHelixReadingChangeElementEvent;
+  /** A slice was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`. */
+  "helix-reading-press": HelixDonutChartHelixReadingPressElementEvent;
+};
 
 /** `HelixDrawer` component event */
 export type HelixDrawerElementEvent<E = Event> = TypedEvent<HelixDrawer, E>;
@@ -8929,6 +8972,14 @@ own, since the fallback name is the same word. Empty leaves the role. */
   "selected-label"?: (HelixGraph["selectedLabel"]) | undefined;
   /** How the selected note is described in the list. */
   selectedLabel?: (HelixGraph["selectedLabel"]) | undefined;
+  /** What screen readers hear after a reader selects a note, in the list or in
+the drawing, with `{note}` for its name and `{count}` for how many notes
+the list then holds, written with `count-label`. */
+  "selection-label"?: (HelixGraph["selectionLabel"]) | undefined;
+  /** What screen readers hear after a reader selects a note, in the list or in
+the drawing, with `{note}` for its name and `{count}` for how many notes
+the list then holds, written with `count-label`. */
+  selectionLabel?: (HelixGraph["selectionLabel"]) | undefined;
   /** The hint shown when one finger swipes over the graph with `gestures="cooperative"`. */
   "two-finger-hint-label"?: (HelixGraph["twoFingerHintLabel"]) | undefined;
   /** The hint shown when one finger swipes over the graph with `gestures="cooperative"`. */
@@ -9252,8 +9303,9 @@ no order in it. */
   /** The name the `overview` gives the total of the readings drawn,
 `{totalLabel}` in `overview-label`. */
   totalLabel?: (HelixHeatmap["totalLabel"]) | undefined;
-  /** The selected cells, by the names their rows have in the table, such as
-`2026-06-11`, separated by commas.
+  /** The selected cells, separated by commas: each by the date its row's
+header carries in a `<time datetime>`, such as `2026-06-11`, or by the
+header's words where it carries none.
 
 Set it to start with cells selected. Written by a press or a key under
 `selection-mode`. */
@@ -11225,6 +11277,10 @@ loader is on the page.
 Names an element in the same tree. In React it arrives as a property, the
 way `Tooltip.for` does. */
   for?: (HelixLoader["for"]) | undefined;
+  /** Whether no work is in progress. The loader draws nothing of its own, has
+no role, and marks no region busy, and what is in the `content` slot
+shows. Clearing it starts `delay` again. */
+  idle?: (HelixLoader["idle"]) | undefined;
   /** The loader's name, announced by screen readers while the work is in
 progress. */
   label?: (HelixLoader["label"]) | undefined;
@@ -16404,6 +16460,18 @@ export type HelixSliderVueEvents = {
   input: HelixSliderElementEvent;
 };
 
+/** `HelixSparkline` component event */
+export type HelixSparklineElementEvent<E = Event> = TypedEvent<
+  HelixSparkline,
+  E
+>;
+/** `helix-reading-change` event type */
+export type HelixSparklineHelixReadingChangeElementEvent =
+  HelixSparklineElementEvent<HelixReadingChangeEvent>;
+/** `helix-reading-press` event type */
+export type HelixSparklineHelixReadingPressElementEvent =
+  HelixSparklineElementEvent<HelixReadingPressEvent>;
+
 export type HelixSparklineVueProps = {
   /** How strongly the line, area, or columns are drawn.
 
@@ -16589,7 +16657,12 @@ not. */
   values?: (HelixSparkline["values"]) | undefined;
 };
 
-export type HelixSparklineVueEvents = {};
+export type HelixSparklineVueEvents = {
+  /** The reading shown moved, or was put away: `index` is the reading, or `-1` for none, with its row's `label` from a table and the `pointerType` that moved it. */
+  "helix-reading-change": HelixSparklineHelixReadingChangeElementEvent;
+  /** A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`. */
+  "helix-reading-press": HelixSparklineHelixReadingPressElementEvent;
+};
 
 export type HelixSpeedDialGroupVueProps = {
   /** The group's name, drawn above its actions and read by screen readers. */
@@ -18124,8 +18197,9 @@ Absent selects nothing, and the tags carry no selected state at all. */
 
 Absent selects nothing, and the tags carry no selected state at all. */
   selectionMode?: (HelixTagGroup["selectionMode"]) | undefined;
-  /** The selected tags' values, separated by commas, since a value may hold a
-space.
+  /** The selected tags' values, separated by commas with no space, as Toggle
+Group and Table write theirs, since a value may hold a space. A value
+written with a space after each comma is read the same way.
 
 Set it to start with tags selected. A tag's value is its `value`, or its
 words where it has none. */
@@ -18882,10 +18956,22 @@ never something this element would refuse to read back. */
   /** The message shown when `disable-times` bars a time. */
   unavailableMessage?: (HelixTimeInput["unavailableMessage"]) | undefined;
   /** The message for text that is no time, where `bad-input-message` is not
-set. `{mode}` is `single`, `range`, or `multiple`, and `{shape}` is `HH:mm`, or `HH:mm:ss` with `seconds`. */
+set. `{mode}` is `single`, `range`, or `multiple`, `{example}` is a time
+written as the field writes one, `2:30 PM` in `en-US` and `14:30` in
+`de-DE`, and `{shape}` is `HH:mm`, or `HH:mm:ss` with `seconds`.
+
+**The default names a time the field reads back.** It said "Enter a time
+as HH:mm." to a reader whose field showed `2:30 PM`, and a pattern token
+is words for a developer. */
   "unreadable-message"?: (HelixTimeInput["unreadableMessage"]) | undefined;
   /** The message for text that is no time, where `bad-input-message` is not
-set. `{mode}` is `single`, `range`, or `multiple`, and `{shape}` is `HH:mm`, or `HH:mm:ss` with `seconds`. */
+set. `{mode}` is `single`, `range`, or `multiple`, `{example}` is a time
+written as the field writes one, `2:30 PM` in `en-US` and `14:30` in
+`de-DE`, and `{shape}` is `HH:mm`, or `HH:mm:ss` with `seconds`.
+
+**The default names a time the field reads back.** It said "Enter a time
+as HH:mm." to a reader whose field showed `2:30 PM`, and a pattern token
+is words for a developer. */
   unreadableMessage?: (HelixTimeInput["unreadableMessage"]) | undefined;
   /** Whether the panel shows one list of times or a column for each part of the
 time.
@@ -22670,7 +22756,7 @@ export type CustomCssProperties = {
   "--listbox-max-block-size"?: (string) | undefined;
   /** Color of the moving arc. */
   "--loader-color"?: (string) | undefined;
-  /** How long one turn of the arc takes, 0.8s by default. With motion reduced the turn slows to a crawl whatever this says. */
+  /** How long one turn of the arc takes, 0.8s by default. With motion reduced the arc turns once every four seconds, whatever this says. */
   "--loader-duration"?: (string) | undefined;
   /** Diameter. Defaults to the size token that `size` picks, which is 1.5rem at the default density. */
   "--loader-size"?: (string) | undefined;
@@ -24032,7 +24118,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixAreaChartVueProps,
     HelixAreaChartVueEvents
   >;
-  /** One fragment shader draws over a full-screen triangle, and its palette comes from the tokens. A background built on '--helix-color-primary' changes when your brand color changes.  Every shape ramps through four token stops, and the token layer inverts each one: the page background, 'primary-subtle', 'primary', and a peak. The peak is the foreground on a dark page and 'primary-active' on a light one, because mixing a saturated hue toward near-black removes its chroma. The component reads which way the page runs from the background's luminance, because the mode is a private token.  The geometry is three vertices derived from 'gl_VertexID'. There is no dependency, scene graph, attribute, buffer, or upload.  The shader stops drawing in these cases: - The element is off screen or in a background tab. - 'prefers-reduced-motion' is set. The element shows one still frame. - The browser takes back the drawing context, on a GPU reset or past its   limit of about sixteen contexts. The gradient shows until the context   returns.  On a renderer that draws on the CPU, such as a headless browser or a machine with no usable GPU, the element shows the gradient. There the shader costs about 450ms for the first frame of each element, against 2ms on a GPU.  Aura is styled only and has behavior, which the tier split does not otherwise allow. Its behavior is drawing to a canvas, so there is no structure for you to restyle and nothing for a headless version to hold.  **Content placed inside sits over the field**, in a 'content' part that covers the aura, so an interactive aura answers the pointer over the content too. Clicks still reach the content. Style '::part(content)' to place it, such as centering a hero's heading.  **The colors are the theme's, and each has a hook**: '--aura-ground', '--aura-haze', '--aura-glow' and '--aura-peak', read by the shader and by the fallback gradient alike, from wherever on the page you set them. A hook changed while the aura draws, by a class, a style or the color mode, reaches the shader on the next frame.  Where the gradient shows in place of the shader, the aura matches ':state(fallback)' and sends 'helix-aura-fallback' with the reason. */
+  /** One fragment shader draws over a full-screen triangle, and its palette comes from the tokens. A background built on '--helix-color-primary' changes when your brand color changes.  Every shape ramps through four token stops, and the token layer inverts each one: the page background, 'primary-subtle', 'primary', and a peak. The peak is the foreground on a dark page and 'primary-active' on a light one, because mixing a saturated hue toward near-black removes its chroma. The component reads which way the page runs from the background's luminance, because the mode is a private token.  The geometry is three vertices derived from 'gl_VertexID'. There is no dependency, scene graph, attribute, buffer, or upload.  The shader stops drawing in these cases: - The element is off screen or in a background tab. - 'prefers-reduced-motion' is set. The element shows one still frame. - 'paused' is set, from a pause control on your page. The element holds the   frame it shows. - The browser takes back the drawing context, on a GPU reset or past its   limit of about sixteen contexts. The gradient shows until the context   returns.  On a renderer that draws on the CPU, such as a headless browser or a machine with no usable GPU, the element shows the gradient. There the shader costs about 450ms for the first frame of each element, against 2ms on a GPU.  Aura is styled only and has behavior, which the tier split does not otherwise allow. Its behavior is drawing to a canvas, so there is no structure for you to restyle and nothing for a headless version to hold.  **Content placed inside sits over the field**, in a 'content' part that covers the aura, so an interactive aura answers the pointer over the content too. Clicks still reach the content. Style '::part(content)' to place it, such as centering a hero's heading.  **The colors are the theme's, and each has a hook**: '--aura-ground', '--aura-haze', '--aura-glow' and '--aura-peak', read by the shader and by the fallback gradient alike, from wherever on the page you set them. A hook changed while the aura draws, by a class, a style or the color mode, reaches the shader on the next frame.  Where the gradient shows in place of the shader, the aura matches ':state(fallback)' and sends 'helix-aura-fallback' with the reason. */
   "helix-aura": DefineCustomElement<
     HelixAura,
     HelixAuraVueProps,
@@ -24110,7 +24196,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixCanvasNodeVueProps,
     HelixCanvasNodeVueEvents
   >;
-  /** Cards and connections take 'tone', like every other family. The tones resolve to semantic tokens, so a board follows the page into dark mode. 'fromJsonCanvas' maps the six JSON Canvas color presets to tones.  Panning and zooming move only the plane. They write three custom properties that one transform reads, so the cards are placed once in the document's coordinates and are not laid out again. */
+  /** Cards and connections take 'tone', like every other family. The tones resolve to semantic tokens, so a board follows the page into dark mode. 'fromJsonCanvas' maps the six JSON Canvas color presets to tones.  Panning and zooming move only the plane. They write three custom properties that one transform reads, so the cards are placed once in the document's coordinates and are not laid out again.  The [Canvases](https://fusion.dev/helix/docs/canvases) guide loads and saves a board, keeps it in your state, and lists every key and the roles a screen reader meets. */
   "helix-canvas": DefineCustomElement<
     HelixCanvas,
     HelixCanvasVueProps,
@@ -24320,7 +24406,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixFormatDateVueProps,
     HelixFormatDateVueEvents
   >;
-  /** The styled frame: the drawing with its zoom and fullscreen buttons, and the list of notes beside it, which moves below the drawing where the frame is narrower than 40rem. The selected note leads the list on a surface of its own, and the notes linked to it are named by how they link. With 'no-panel', the drawing takes the whole frame, and a button among the controls opens the search and the list over its end. */
+  /** The styled frame: the drawing with its zoom and fullscreen buttons, and the list of notes beside it, which moves below the drawing where the frame is narrower than 40rem. The selected note leads the list on a surface of its own, and the notes linked to it are named by how they link. With 'no-panel', the drawing takes the whole frame, and a button among the controls opens the search and the list over its end.  The [Graphs](https://fusion.dev/helix/docs/graphs) guide connects a renderer, lists the keys and what a screen reader hears, and describes the methods of a driver for another renderer. */
   "helix-graph": DefineCustomElement<
     HelixGraph,
     HelixGraphVueProps,
@@ -24410,7 +24496,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixListboxVueProps,
     HelixListboxVueEvents
   >;
-  /** Sized from the loader size tokens, so a loader is the same size wherever it is placed and follows the density region it sits in. Set '--loader-size: 1em' to match the text beside it, as inside a button. The color is 'currentColor', so it matches the text color around it, including inside a primary button.  While 'delay' runs, the loader keeps its size and draws nothing, so the line it sits in does not move when it appears. */
+  /** Sized from the loader size tokens, so a loader is the same size wherever it is placed and follows the density region it sits in. Set '--loader-size: 1em' to match the text beside it, as inside a button. The color is 'currentColor', so it matches the text color around it, including inside a primary button.  While 'delay' runs, the loader keeps its size and draws nothing, so the line it sits in does not move when it appears.  With something in the 'content' slot, the loader takes the larger of the ring and the content, and the ring centers over the content while the work runs. */
   "helix-loader": DefineCustomElement<
     HelixLoader,
     HelixLoaderVueProps,
@@ -24464,7 +24550,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixMapRasterVueProps,
     HelixMapRasterVueEvents
   >;
-  /** The styled frame: a bordered box with the pan and zoom buttons in its top corner. The buttons stay visible when the header and footer fade.  Set 'fill' to lay the map behind a page's own content, such as a hero whose words decide its height: the frame covers its container, which needs a position of its own, such as 'position: relative'. Set 'credit-placement' to draw the map's credit compact in a corner over the map, which suits a map the width of the page. */
+  /** The styled frame: a bordered box with the pan and zoom buttons in its top corner. The buttons stay visible when the header and footer fade.  Set 'fill' to lay the map behind a page's own content, such as a hero whose words decide its height: the frame covers its container, which needs a position of its own, such as 'position: relative'. Set 'credit-placement' to draw the map's credit compact in a corner over the map, which suits a map the width of the page.  The [Maps](https://fusion.dev/helix/docs/maps) guide connects a renderer, lists the keys and what a screen reader hears, and describes every method a driver for another renderer can have. */
   "helix-map": DefineCustomElement<
     HelixMap,
     HelixMapVueProps,