@fusion.dev/helix-headless 0.176.1 → 0.177.0

package/types/vue.d.ts

@@ -6360,6 +6360,18 @@ Unset is horizontal, or across the toolbar the divider sits in. */
 
 export type HelixHeadlessDividerVueEvents = {};
 
+/** `HelixHeadlessDonutChart` component event */
+export type HelixHeadlessDonutChartElementEvent<E = Event> = TypedEvent<
+  HelixHeadlessDonutChart,
+  E
+>;
+/** `helix-reading-change` event type */
+export type HelixHeadlessDonutChartHelixReadingChangeElementEvent =
+  HelixHeadlessDonutChartElementEvent<HelixReadingChangeEvent>;
+/** `helix-reading-press` event type */
+export type HelixHeadlessDonutChartHelixReadingPressElementEvent =
+  HelixHeadlessDonutChartElementEvent<HelixReadingPressEvent>;
+
 export type HelixHeadlessDonutChartVueProps = {
   /** The size of the hole in the middle of the ring.
 
@@ -6425,6 +6437,25 @@ rotation that puts the first slice at nine o'clock, the aspect ratio of a
 box that is no longer square, and where the middle sits once the bottom of
 the circle is not drawn. */
   sweep?: (HelixHeadlessDonutChart["sweep"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  "empty-text"?: (HelixHeadlessDonutChart["emptyText"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  emptyText?: (HelixHeadlessDonutChart["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?: (HelixHeadlessDonutChart["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"?: (HelixHeadlessDonutChart["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?: (HelixHeadlessDonutChart["loadingText"]) | undefined;
   /** The id of the table to read.
 
 Names a table in the same tree, so a chart inside another component's
@@ -6486,7 +6517,12 @@ does not look inside the one it has. */
   data?: (HelixHeadlessDonutChart["data"]) | undefined;
 };
 
-export type HelixHeadlessDonutChartVueEvents = {};
+export type HelixHeadlessDonutChartVueEvents = {
+  /** 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": HelixHeadlessDonutChartHelixReadingChangeElementEvent;
+  /** A slice was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`. */
+  "helix-reading-press": HelixHeadlessDonutChartHelixReadingPressElementEvent;
+};
 
 /** `HelixHeadlessDrawer` component event */
 export type HelixHeadlessDrawerElementEvent<E = Event> = TypedEvent<
@@ -7692,6 +7728,14 @@ own, since the fallback name is the same word. Empty leaves the role. */
   "selected-label"?: (HelixHeadlessGraph["selectedLabel"]) | undefined;
   /** How the selected note is described in the list. */
   selectedLabel?: (HelixHeadlessGraph["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"?: (HelixHeadlessGraph["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?: (HelixHeadlessGraph["selectionLabel"]) | undefined;
   /** The hint shown when one finger swipes over the graph with `gestures="cooperative"`. */
   "two-finger-hint-label"?: (HelixHeadlessGraph["twoFingerHintLabel"]) | undefined;
   /** The hint shown when one finger swipes over the graph with `gestures="cooperative"`. */
@@ -8044,8 +8088,9 @@ no order in it. */
   /** The name the `overview` gives the total of the readings drawn,
 `{totalLabel}` in `overview-label`. */
   totalLabel?: (HelixHeadlessHeatmap["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`. */
@@ -9862,6 +9907,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?: (HelixHeadlessLoader["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?: (HelixHeadlessLoader["idle"]) | undefined;
   /** The loader's name, announced by screen readers while the work is in
 progress. */
   label?: (HelixHeadlessLoader["label"]) | undefined;
@@ -14213,6 +14262,18 @@ export type HelixHeadlessSliderVueEvents = {
   input: HelixHeadlessSliderElementEvent;
 };
 
+/** `HelixHeadlessSparkline` component event */
+export type HelixHeadlessSparklineElementEvent<E = Event> = TypedEvent<
+  HelixHeadlessSparkline,
+  E
+>;
+/** `helix-reading-change` event type */
+export type HelixHeadlessSparklineHelixReadingChangeElementEvent =
+  HelixHeadlessSparklineElementEvent<HelixReadingChangeEvent>;
+/** `helix-reading-press` event type */
+export type HelixHeadlessSparklineHelixReadingPressElementEvent =
+  HelixHeadlessSparklineElementEvent<HelixReadingPressEvent>;
+
 export type HelixHeadlessSparklineVueProps = {
   /** How the line is drawn from one reading to the next.
 
@@ -14340,7 +14401,12 @@ not. */
   values?: (HelixHeadlessSparkline["values"]) | undefined;
 };
 
-export type HelixHeadlessSparklineVueEvents = {};
+export type HelixHeadlessSparklineVueEvents = {
+  /** 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": HelixHeadlessSparklineHelixReadingChangeElementEvent;
+  /** A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`. */
+  "helix-reading-press": HelixHeadlessSparklineHelixReadingPressElementEvent;
+};
 
 export type HelixHeadlessSpeedDialGroupVueProps = {
   /** The group's name, drawn above its actions and read by screen readers. */
@@ -15766,8 +15832,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?: (HelixHeadlessTagGroup["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. */
@@ -19125,7 +19192,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessAppHeaderVueProps,
     HelixHeadlessAppHeaderVueEvents
   >;
-  /** Shows how a total is made up. Each numeric column of the table is a part, the parts add up to the total at each reading, and the top edge is that total. The thickness of a band is that part's amount.  Use 'LineChart' with 'area' to show how each series moved: it fills each series from the floor separately, so the fills overlap. Use this chart to show the composition: it stacks the series.  **The value axis always starts at zero**, as in 'BarChart', because a band's thickness is its value. For the same reason there is no streamgraph mode, which moves the baseline. To show how the composition changed, set 'share'.  Band edges are straight between readings by default. A smoothed curve through one sum can dip below the curve through the sum beneath it, which draws a part as less than zero. Other curves:  - 'curve="smooth"': for a stack read as an overall shape. - 'curve="step"': holds each reading and jumps at the midpoint, so stacked   edges stay in order, as with 'straight'. Use it for a quantity that changes   at a moment, such as a headcount or a price.  'share' draws each reading as 100 percent, so the top edge is flat and the bands show each part's share. Use it to see which part grew. The default shows whether the total grew.  'overlap' draws every band from zero, one in front of another, so each part's own amount is its height: the first column is in front. Use it to compare the parts with each other; the scale then fits the largest part rather than the total.  'value-axis' draws the scale's numbers beside the plot, at the levels 'gridlines' rules: amounts in 'locale', or percentages under 'share'.  The drawing is hidden from screen readers. The text summary gives the latest reading's total and each part's share of it, and the table beside the chart has every number.  **The plot is read by key.** It takes focus, named by 'label' or the caption. The left and right arrows move from reading to reading, Home and End go to the first and the last, and the up and down arrows move among the series of a reading. The tooltip follows, the 'live' part says the reading in words, and Escape puts the tooltip away.  Every numeric column is a part, so leave a total column out of the table the chart reads, or it is counted twice. A negative reading is drawn as zero.  **A tap shows the reading under it**, and keeps it until a tap lands elsewhere. 'helix-reading-change' says each move of the reading, by pointer, tap or key, and 'helix-reading-press' says a reading was clicked, tapped, or pressed with Enter or Space, for a page that opens what a reading stands for.  **'data' takes the readings as data** where the page has no table to point 'for' at, in a table's shape: the column headings, then one row per reading with its label first. A table is still the better source where the page can show one, since it reads before any script runs.  **A chart with nothing to draw says so.** A table with no readings shows 'empty-text', "No readings", in the plot, and 'loading' shows 'loading-text' there until readings arrive. The 'empty' and 'loading' slots take markup in their place, such as a link to add the first reading. */
+  /** Shows how a total is made up. Each numeric column of the table is a part, the parts add up to the total at each reading, and the top edge is that total. The thickness of a band is that part's amount.  Use 'LineChart' with 'area' to show how each series moved: it fills each series from the floor separately, so the fills overlap. Use this chart to show the composition: it stacks the series.  **The value axis always starts at zero**, as in 'BarChart', because a band's thickness is its value. For the same reason there is no streamgraph mode, which moves the baseline. To show how the composition changed, set 'share'.  Band edges are straight between readings by default. A smoothed curve through one sum can dip below the curve through the sum beneath it, which draws a part as less than zero. Other curves:  - 'curve="smooth"': for a stack read as an overall shape. - 'curve="step"': holds each reading and jumps at the midpoint, so stacked   edges stay in order, as with 'straight'. Use it for a quantity that changes   at a moment, such as a headcount or a price.  'share' draws each reading as 100 percent, so the top edge is flat and the bands show each part's share. Use it to see which part grew. The default shows whether the total grew.  'overlap' draws every band from zero, one in front of another, so each part's own amount is its height: the first column is in front. Use it to compare the parts with each other; the scale then fits the largest part rather than the total.  'value-axis' draws the scale's numbers beside the plot, at the levels 'gridlines' rules: amounts in 'locale', or percentages under 'share'.  The drawing is hidden from screen readers. The text summary gives the latest reading's total and each part's share of it, and the table beside the chart has every number.  **The plot is read by key.** It takes focus, named by 'label' or the caption. The left and right arrows move from reading to reading, Home and End go to the first and the last, and the up and down arrows move among the series of a reading. The tooltip follows, the 'live' part says the reading in words, and Escape puts the tooltip away.  Every numeric column is a part, so leave a total column out of the table the chart reads, or it is counted twice. A negative reading is drawn as zero.  **A tap shows the reading under it**, and keeps it until a tap lands elsewhere. 'helix-reading-change' says each move of the reading, by pointer, tap or key, and 'helix-reading-press' says a reading was clicked, tapped, or pressed with Enter or Space, for a page that opens what a reading stands for.  **'data' takes the readings as data** where the page has no table to point 'for' at, in a table's shape: the column headings, then one row per reading with its label first. A table is still the better source where the page can show one, since it reads before any script runs.  **A chart with nothing to draw says so.** A table with no readings shows 'empty-text', "No readings", in the plot, and 'loading' shows 'loading-text' there until readings arrive. The 'empty' and 'loading' slots take markup in their place, such as a link to add the first reading.  **Keyboard.** The plot is one tab stop.  | Key | What it does | |---|---| | Tab | Moves focus to the plot and shows the first reading. | | Right, Left | Moves to the next or the previous reading. On a right-to-left page, Left moves to the next. | | Down, Up | Moves among the series of the reading. With one series, moves to the next or the previous reading. | | Home, End | Moves to the first or the last reading. | | Page Down, Page Up | Moves a tenth of the readings on or back. | | Enter, Space | Presses the reading shown, which sends 'helix-reading-press'. | | Escape | Puts the reading and its tooltip away. | */
   "helix-headless-area-chart": DefineCustomElement<
     HelixHeadlessAreaChart,
     HelixHeadlessAreaChartVueProps,
@@ -19149,7 +19216,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessBadgeVueProps,
     HelixHeadlessBadgeVueEvents
   >;
-  /** Every bar is measured from zero, and no property changes the baseline, because a bar's length is its value. To show the differences between values, use a line chart.  The labels are HTML beside the drawing. An '<svg>' that fills its box scales the text inside it: the same 'font-size' renders at 10px in a narrow chart and 43px in a wide one, and SVG has no setting that keeps text at one size the way 'vector-effect' does for strokes.  The table is the accessible representation, and the drawing is hidden from screen readers, so they get the numbers themselves. The 'summary' part names the chart, from 'label' or the table's caption, and gives each series' highest reading.  **The plot is read by key.** It takes focus, named by 'label' or the caption. The arrows along the categories move from one to the next, which is left and right for columns and up and down for 'orientation="horizontal"'. Home and End go to the first and the last, and the other pair of arrows moves among the series of a category. The tooltip follows, the 'live' part says the reading in words, and Escape puts the tooltip away.  The component writes the custom properties below with numbers it computes, and the stylesheet that draws the chart reads them. Do not set them yourself.  **A tap shows the reading under it**, and keeps it until a tap lands elsewhere. 'helix-reading-change' says each move of the reading, by pointer, tap or key, and 'helix-reading-press' says a reading was clicked, tapped, or pressed with Enter or Space, for a page that opens what a reading stands for.  **'data' takes the readings as data** where the page has no table to point 'for' at, in a table's shape: the column headings, then one row per reading with its label first. A table is still the better source where the page can show one, since it reads before any script runs.  **A chart with nothing to draw says so.** A table with no readings shows 'empty-text', "No readings", in the plot, and 'loading' shows 'loading-text' there until readings arrive. The 'empty' and 'loading' slots take markup in their place, such as a link to add the first reading. */
+  /** Every bar is measured from zero, and no property changes the baseline, because a bar's length is its value. To show the differences between values, use a line chart.  The labels are HTML beside the drawing. An '<svg>' that fills its box scales the text inside it: the same 'font-size' renders at 10px in a narrow chart and 43px in a wide one, and SVG has no setting that keeps text at one size the way 'vector-effect' does for strokes.  The table is the accessible representation, and the drawing is hidden from screen readers, so they get the numbers themselves. The 'summary' part names the chart, from 'label' or the table's caption, and gives each series' highest reading.  **The plot is read by key.** It takes focus, named by 'label' or the caption. The arrows along the categories move from one to the next, which is left and right for columns and up and down for 'orientation="horizontal"'. Home and End go to the first and the last, and the other pair of arrows moves among the series of a category. The tooltip follows, the 'live' part says the reading in words, and Escape puts the tooltip away.  The component writes the custom properties below with numbers it computes, and the stylesheet that draws the chart reads them. Do not set them yourself.  **A tap shows the reading under it**, and keeps it until a tap lands elsewhere. 'helix-reading-change' says each move of the reading, by pointer, tap or key, and 'helix-reading-press' says a reading was clicked, tapped, or pressed with Enter or Space, for a page that opens what a reading stands for.  **'data' takes the readings as data** where the page has no table to point 'for' at, in a table's shape: the column headings, then one row per reading with its label first. A table is still the better source where the page can show one, since it reads before any script runs.  **A chart with nothing to draw says so.** A table with no readings shows 'empty-text', "No readings", in the plot, and 'loading' shows 'loading-text' there until readings arrive. The 'empty' and 'loading' slots take markup in their place, such as a link to add the first reading.  **Keyboard.** The plot is one tab stop.  | Key | What it does | |---|---| | Tab | Moves focus to the plot and shows the first reading. | | Right, Left | Moves to the next or the previous reading. On a right-to-left page, Left moves to the next. | | Down, Up | Moves among the series of the reading. With one series, moves to the next or the previous reading. | | Down, Up under 'orientation="horizontal"' | Moves to the next or the previous reading, and Right and Left move among the series. | | Home, End | Moves to the first or the last reading. | | Page Down, Page Up | Moves a tenth of the readings on or back. | | Enter, Space | Presses the reading shown, which sends 'helix-reading-press'. | | Escape | Puts the reading and its tooltip away. | */
   "helix-headless-bar-chart": DefineCustomElement<
     HelixHeadlessBarChart,
     HelixHeadlessBarChartVueProps,
@@ -19203,7 +19270,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessCanvasNodeVueProps,
     HelixHeadlessCanvasNodeVueEvents
   >;
-  /** A board of cards and connectors, drawn by Helix. On a canvas every position is data that someone placed, so drawing is arithmetic over rectangles with no layout to compute. 'Map' takes a slotted map, because another renderer draws its tiles.  The format is [JSON Canvas](https://jsoncanvas.org), an open format. Each node has an 'x', 'y', 'width', 'height', and a type. Each edge names the two nodes it joins and the sides it leaves and arrives on. A card belongs to a group when it sits inside the group's bounds.  The cards are text in the DOM, so a screen reader can read them. The family adds a reading order and states each card's connections as text. 'order' sets the reading order: - 'spatial' bands the cards into rows. - 'edges' follows the arrows, starting from the cards that nothing points to.  **Cards move by default.** The board writes the new 'x' and 'y' onto the card, the way an input writes its own value, and dispatches two events: - 'helix-before-move' for every step. Cancel it to hold the positions in your   own state and apply them yourself. - 'helix-move' once the move is finished.  A resize dispatches the same pair with a size. Set 'readonly' on the board to keep every card in place, such as on a published board. Set 'readonly' on one card or connection to keep only that one in place.  Set 'snap' to a length in the document's units, such as '32', and a card that is moved or resized lands on a multiple of it. Carrying a card, a corner, a connection, or the selection box near the edge of the board moves the board under it, so a card can be taken to a place off screen in one drag. A connection let go within 20 pixels of a card arrives at it. A double click on the empty board zooms in about that point, and Shift with a double click zooms out.  Keyboard behavior: - One card holds the board's tab stop. - The arrow keys move through the cards in reading order. The card you land   on scrolls into view, and its connections are announced with it. - The card you land on is selected. Control or Command with an arrow key,   Home, or End moves without changing the selection, and Space adds the card   to the selection or takes it out, so you can select cards that are not   next to each other. - Shift with an arrow key moves the card: by 16 units, or to the next   multiple of 'snap' where it is set. Alt with an arrow key resizes it from   its bottom right corner the same way. - The connections leaving a card are stops of their own, straight after it.   Enter on one moves to the card it arrives at. - What a key changes that a reader cannot see is said: where a card moved   to, its new size, how many cards are selected, and the zoom. A selected   card or connection says so when a reader arrives on it. - Control or Command with C copies the selected cards, and the connections   between them, as a JSON Canvas document in text, which another board or   an app that reads the format takes. - Control or Command with V pastes a JSON Canvas document: the board adds   its cards and connections, a step down and to the right of any card they   would sit on, and selects them. It asks with 'helix-before-paste' first.   A page that renders its cards from its own state cancels it and adds the   detail's document to that state, through 'fromJsonCanvas'. 'paste()' does   the same from a script. - Control or Command with Z undoes the last move or resize the board made,   and with Shift, or Control with Y, makes it again. 'undo()' and 'redo()'   do the same from a script. Each asks with 'helix-before-move' and tells   with 'helix-move', as a move does, so a board that holds its positions in   your state is undone through your state.  **'arrange()' moves every card so that none overlaps another**, in layers that follow the arrows, or in a grid on a board with no connections. The cards glide for as long as the board's own transition, and 'undo()' puts them back.  Every drag also works with clicks, as WCAG 2.5.7 requires for a pointer that cannot hold a button down. Click a selected card's move handle, a corner, a card's connection point, or the end of a selected connection to pick it up. It follows the pointer with no button held, and the next click puts it down where a drag would have. On touch, the next tap sets where it lands. Escape, or a press outside the board, puts it back. So a finger connects two cards with three taps: the card, one of its points, and the card to connect to.  Connecting and removing dispatch requests, and your code applies them: - Drawing from a card's handle to another card, or pressing C on one card and   Enter on another, dispatches 'helix-connect'. - Delete on a card or a connection dispatches 'helix-remove'. The event names   every connection that removing the card would leave without an end.  Once your page removes what Delete asked for, focus moves to the next stop, to the one before where it was the last, and to the board where none is left. A focused card your page removes for its own reasons hands focus on the same way, unless the reader has already moved focus somewhere else.  The board applies a move itself, because the card already exists. A connection is a new element, and React discards an element the board adds to its markup on the next render, so you write the connection.  **'edgeRoute' draws the connections' lines your own way**: a function from where a line leaves and arrives, and the sides it does, to its SVG path, for a route such as one that bends around the cards between. What it returns is the line drawn, the line pressed and focused, and the one an arrowhead sits at the end of. Nothing back draws the board's own.  Add 'minimap' to 'controls' for a picture of the whole board in a corner: each card as a box, and a frame around what is on screen. A press or a drag on it brings that place to the middle of the view. It is for a pointer, and a screen reader skips it: the arrow keys and 'show()' reach every card.  Cards and connections are 'helix-canvas-node' and 'helix-canvas-edge' elements, so they are in the served markup whichever renderer wrote them. The library fetches nothing, and an array passed to an element is missing from the first paint of a server-rendered React page. 'fromJsonCanvas' turns a JSON Canvas document into their props, and 'toJsonCanvas()' writes a board back out. */
+  /** A board of cards and connectors, drawn by Helix. On a canvas every position is data that someone placed, so drawing is arithmetic over rectangles with no layout to compute. 'Map' takes a slotted map, because another renderer draws its tiles.  The format is [JSON Canvas](https://jsoncanvas.org), an open format. Each node has an 'x', 'y', 'width', 'height', and a type. Each edge names the two nodes it joins and the sides it leaves and arrives on. A card belongs to a group when it sits inside the group's bounds.  The cards are text in the DOM, so a screen reader can read them. The family adds a reading order and states each card's connections as text. 'order' sets the reading order: - 'spatial' bands the cards into rows. - 'edges' follows the arrows, starting from the cards that nothing points to.  **Cards move by default.** The board writes the new 'x' and 'y' onto the card, the way an input writes its own value, and dispatches two events: - 'helix-before-move' for every step. Cancel it to hold the positions in your   own state and apply them yourself. - 'helix-move' once the move is finished.  A resize dispatches the same pair with a size. Set 'readonly' on the board to keep every card in place, such as on a published board. Set 'readonly' on one card or connection to keep only that one in place.  Set 'snap' to a length in the document's units, such as '32', and a card that is moved or resized lands on a multiple of it. Carrying a card, a corner, a connection, or the selection box near the edge of the board moves the board under it, so a card can be taken to a place off screen in one drag. A connection let go within 20 pixels of a card arrives at it. A double click on the empty board zooms in about that point, and Shift with a double click zooms out.  Keyboard behavior: - One card holds the board's tab stop, and the board itself leaves the tab   order while a card can hold it. Escape on a card goes back out to the   board, where the arrow keys pan it. - Plus and minus zoom the board, on the board and on a card or a   connection. - The arrow keys move through the cards in reading order. The card you land   on scrolls into view, and its connections are announced with it. - The card you land on is selected. Control or Command with an arrow key,   Home, or End moves without changing the selection, and Space adds the card   to the selection or takes it out, so you can select cards that are not   next to each other. - Shift with an arrow key moves the card: by 16 units, or to the next   multiple of 'snap' where it is set. Alt with an arrow key resizes it from   its bottom right corner the same way. - The connections leaving a card are stops of their own, straight after it.   Enter on one moves to the card it arrives at. - What a key changes that a reader cannot see is said: where a card moved   to, its new size, how many cards are selected, and the zoom. A selected   card or connection says so when a reader arrives on it. - Control or Command with C copies the selected cards, and the connections   between them, as a JSON Canvas document in text, which another board or   an app that reads the format takes. - Control or Command with V pastes a JSON Canvas document: the board adds   its cards and connections, a step down and to the right of any card they   would sit on, and selects them. It asks with 'helix-before-paste' first.   A page that renders its cards from its own state cancels it and adds the   detail's document to that state, through 'fromJsonCanvas'. 'paste()' does   the same from a script. - Control or Command with Z undoes the last move or resize the board made,   and with Shift, or Control with Y, makes it again. 'undo()' and 'redo()'   do the same from a script. Each asks with 'helix-before-move' and tells   with 'helix-move', as a move does, so a board that holds its positions in   your state is undone through your state.  **'arrange()' moves every card so that none overlaps another**, in layers that follow the arrows, or in a grid on a board with no connections. The cards glide for as long as the board's own transition, and 'undo()' puts them back.  Every drag also works with clicks, as WCAG 2.5.7 requires for a pointer that cannot hold a button down. Click a selected card's move handle, a corner, a card's connection point, or the end of a selected connection to pick it up. It follows the pointer with no button held, and the next click puts it down where a drag would have. On touch, the next tap sets where it lands. Escape, or a press outside the board, puts it back. So a finger connects two cards with three taps: the card, one of its points, and the card to connect to.  Connecting and removing dispatch requests, and your code applies them: - Drawing from a card's handle to another card, or pressing C on one card and   Enter on another, dispatches 'helix-connect'. - Delete on a card or a connection dispatches 'helix-remove'. The event names   every connection that removing the card would leave without an end.  Once your page removes what Delete asked for, focus moves to the next stop, to the one before where it was the last, and to the board where none is left. A focused card your page removes for its own reasons hands focus on the same way, unless the reader has already moved focus somewhere else.  The board applies a move itself, because the card already exists. A connection is a new element, and React discards an element the board adds to its markup on the next render, so you write the connection.  **'edgeRoute' draws the connections' lines your own way**: a function from where a line leaves and arrives, and the sides it does, to its SVG path, for a route such as one that bends around the cards between. What it returns is the line drawn, the line pressed and focused, and the one an arrowhead sits at the end of. Nothing back draws the board's own.  Add 'minimap' to 'controls' for a picture of the whole board in a corner: each card as a box, and a frame around what is on screen. A press or a drag on it brings that place to the middle of the view. It is for a pointer, and a screen reader skips it: the arrow keys and 'show()' reach every card.  Cards and connections are 'helix-canvas-node' and 'helix-canvas-edge' elements, so they are in the served markup whichever renderer wrote them. The library fetches nothing, and an array passed to an element is missing from the first paint of a server-rendered React page. 'fromJsonCanvas' turns a JSON Canvas document into their props, and 'toJsonCanvas()' writes a board back out. */
   "helix-headless-canvas": DefineCustomElement<
     HelixHeadlessCanvas,
     HelixHeadlessCanvasVueProps,
@@ -19335,7 +19402,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessDividerVueProps,
     HelixHeadlessDividerVueEvents
   >;
-  /** A donut chart divides one whole into parts, so the component reads one column.  **The first column of numbers is the series, and each row is a slice.** Other Helix charts take one column per series.  **Negative values are skipped.** An arc cannot show a negative number, so those rows are left out and the total is the sum of the remaining rows.  The ring is hidden from screen readers. The 'summary' part names the chart, from 'label' or the table's caption, and gives each slice's share, and the table beside the chart has every amount.  **The ring is read by key.** The plot takes focus, named by 'label' or the caption. Every arrow moves from slice to slice, the right and down arrows to the next, and Home and End go to the first and the last. The tooltip follows, the 'live' part says the slice in words, and Escape puts the tooltip away. */
+  /** A donut chart divides one whole into parts, so the component reads one column.  **The first column of numbers is the series, and each row is a slice.** Other Helix charts take one column per series.  **Negative values are skipped.** An arc cannot show a negative number, so those rows are left out and the total is the sum of the remaining rows.  The ring is hidden from screen readers. The 'summary' part names the chart, from 'label' or the table's caption, and gives each slice's share, and the table beside the chart has every amount.  **The ring is read by key.** The plot takes focus, named by 'label' or the caption. Every arrow moves from slice to slice, the right and down arrows to the next, and Home and End go to the first and the last. The tooltip follows, the 'live' part says the slice in words, and Escape puts the tooltip away.  **A tap shows the slice under it**, and keeps it until a tap lands elsewhere. 'helix-reading-change' says each move of the slice shown, by pointer, tap or key, and 'helix-reading-press' says a slice was clicked, tapped, or pressed with Enter or Space, for a page that opens what a slice stands for. 'index' is the slice's row in the table.  **A chart with nothing to draw says so.** A table with no readings shows 'empty-text', "No readings", in the plot, and 'loading' shows 'loading-text' there until readings arrive. The 'empty' and 'loading' slots take markup in their place.  **Keyboard.** The plot is one tab stop.  | Key | What it does | |---|---| | Tab | Moves focus to the plot and shows the first slice. | | Any arrow | Right and Down move to the next slice, Left and Up to the previous. On a right-to-left page, Left moves to the next. | | Home, End | Moves to the first or the last slice. | | Enter, Space | Presses the slice shown, which sends 'helix-reading-press'. | | Escape | Puts the slice and its tooltip away. | */
   "helix-headless-donut-chart": DefineCustomElement<
     HelixHeadlessDonutChart,
     HelixHeadlessDonutChartVueProps,
@@ -19407,13 +19474,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessFormatDateVueProps,
     HelixHeadlessFormatDateVueEvents
   >;
-  /** Helix draws no graph. A force layout of thousands of notes is physics and WebGL, which a renderer such as Sigma.js does. Put the renderer's box in the frame, and 'connectGraph' from '@fusion.dev/helix-graph' draws 'nodes' and 'links' in it and keeps it in step with the frame.  What the frame adds is what a drawing of a graph cannot do: a list of every note beside it, which is the graph for a screen reader and a quick way to find a note for anyone. The selected note comes first, then the notes it links to and from, then every other note, and the search field narrows it. Selecting a note in the list or in the drawing is the same selection.  Set 'depth' to show the local graph: only the notes within that many links of the selected one.  Set 'legend' to name the groups over the drawing, each a button that shows or hides its notes. 'hiddenGroups' holds the groups turned off, and the list holds only what the drawing shows.  'nodes' and 'links' are properties, never markup: a graph of ten thousand notes as ten thousand elements would cost what the renderer exists to save. The list draws only the rows in view.  The list scrolls on this tier. It carries 'data-scroller', and 'core' ships '[data-scroller] { overflow: auto }' into every shadow root. You still need to set a block size on the list, or it grows to hold every row. */
+  /** Helix draws no graph. A force layout of thousands of notes is physics and WebGL, which a renderer such as Sigma.js does. Put the renderer's box in the frame, and 'connectGraph' from '@fusion.dev/helix-graph' draws 'nodes' and 'links' in it and keeps it in step with the frame.  What the frame adds is what a drawing of a graph cannot do: a list of every note beside it, which is the graph for a screen reader and a quick way to find a note for anyone. The selected note comes first, then the notes it links to and from, then every other note, and the search field narrows it. Selecting a note in the list or in the drawing is the same selection.  Set 'depth' to show the local graph: only the notes within that many links of the selected one.  Set 'legend' to name the groups over the drawing, each a button that shows or hides its notes. 'hiddenGroups' holds the groups turned off, and the list holds only what the drawing shows. The legend is a toolbar and one tab stop: the arrow keys, Home, End and a group's first letters move between its buttons, and Space or Enter presses one.  'nodes' and 'links' are properties, never markup: a graph of ten thousand notes as ten thousand elements would cost what the renderer exists to save. The list draws only the rows in view.  The list scrolls on this tier. It carries 'data-scroller', and 'core' ships '[data-scroller] { overflow: auto }' into every shadow root. You still need to set a block size on the list, or it grows to hold every row. */
   "helix-headless-graph": DefineCustomElement<
     HelixHeadlessGraph,
     HelixHeadlessGraphVueProps,
     HelixHeadlessGraphVueEvents
   >;
-  /** A grid of cells, each colored by a tone. 'rows="1"' makes a status strip, and 'rows="7"' makes a contribution graph. GitHub's contribution graph uses five discrete levels, which a set of tones covers.  Color in a heatmap is per cell. In every other Helix chart, color is per series, so ninety differently colored cells would need ninety series.  **The data is a real '<table>' named by 'for'**, as in every Helix chart, and the table is the accessible representation. Hide it with 'data-hidden-visually', and screen readers still read it.  A cell takes its tone from its own 'data-tone', or from 'thresholds' and 'tones' applied to its value. 'data-tone' wins, so when you already know a day was degraded, you can set the tone directly.  **The headless tier does not resolve tone names.** A tone named 'success' writes '--heatmap-tone: var(--heatmap-tone-success)', and the styled tier or your own stylesheet defines that property. The headless tier does not use 'var(--helix-color-*)'.  **The strip is read by key.** It takes focus once it has cells. The up and down arrows move a cell, the left and right arrows move a column, which is a week with 'rows="7"', and Home and End go to the first and the last. The tooltip follows, the 'live' part says the cell's row in words, and Escape puts the tooltip away. PageUp and PageDown move a month, to the same day, where each row's header carries its date as a '<time datetime>', and four columns otherwise, which is four weeks with 'rows="7"'.  **The strip describes itself.** The 'overview' part says the busiest reading and the total of the readings drawn, "Busiest: 11 Jun, 12; Total 84", and the strip is described by it, as every chart is by its summary. Hide it visually. The 'summary' slot is still yours, for words of your own.  **'selection-mode' lets a reader select cells**: 'single' one at a time and 'multiple' any number. Space, Enter or a press selects the cell the keys or the pointer rest on, or lets it go, and under 'multiple' Shift with an arrow, Home, End, PageUp or PageDown takes in every cell from the last one pressed to where the key went. 'value' holds the selected days, by the names their rows have in the table, separated by commas. A change asks with 'helix-before-change' and tells with 'change', and the 'selection' part says how many are selected, in 'selection-label'. */
+  /** A grid of cells, each colored by a tone. 'rows="1"' makes a status strip, and 'rows="7"' makes a contribution graph. GitHub's contribution graph uses five discrete levels, which a set of tones covers.  Color in a heatmap is per cell. In every other Helix chart, color is per series, so ninety differently colored cells would need ninety series.  **The data is a real '<table>' named by 'for'**, as in every Helix chart, and the table is the accessible representation. Hide it with 'data-hidden-visually', and screen readers still read it.  A cell takes its tone from its own 'data-tone', or from 'thresholds' and 'tones' applied to its value. 'data-tone' wins, so when you already know a day was degraded, you can set the tone directly.  **The headless tier does not resolve tone names.** A tone named 'success' writes '--heatmap-tone: var(--heatmap-tone-success)', and the styled tier or your own stylesheet defines that property. The headless tier does not use 'var(--helix-color-*)'.  **The strip is read by key.** It takes focus once it has cells. The up and down arrows move a cell, the left and right arrows move a column, which is a week with 'rows="7"', and Home and End go to the first and the last. The tooltip follows, the 'live' part says the cell's row in words, and Escape puts the tooltip away. PageUp and PageDown move a month, to the same day, where each row's header carries its date as a '<time datetime>', and four columns otherwise, which is four weeks with 'rows="7"'.  **The strip describes itself.** The 'overview' part says the busiest reading and the total of the readings drawn, "Busiest: 11 Jun, 12; Total 84", and the strip is described by it, as every chart is by its summary. Hide it visually. The 'summary' slot is still yours, for words of your own.  **'selection-mode' lets a reader select cells**: 'single' one at a time and 'multiple' any number. Space, Enter or a press selects the cell the keys or the pointer rest on, or lets it go, and under 'multiple' Shift with an arrow, Home, End, PageUp or PageDown takes in every cell from the last one pressed to where the key went. 'value' holds the selected days, separated by commas: each by its row's '<time datetime>', such as '2026-06-11', or by its row's name where the row carries no date. A change asks with 'helix-before-change' and tells with 'change', and the 'selection' part says how many are selected, in 'selection-label'.  **Keyboard.** The strip is one tab stop once it has cells.  | Key | What it does | |---|---| | Tab | Moves focus to the strip and shows the first cell. | | Down, Up | Moves to the next or the previous cell. | | Right, Left | Moves a column on or back, a week with 'rows="7"'. On a right-to-left page, Left moves on. | | Home, End | Moves to the first or the last cell. | | Page Down, Page Up | Moves a month on or back where the rows carry dates, and four columns otherwise. | | Enter, Space | Selects the cell, or lets it go, under 'selection-mode'. | | Shift with an arrow, Home, End, Page Up or Page Down | Selects every cell from the last one pressed to where the key went, under 'selection-mode="multiple"'. | | Escape | Puts the cell's tooltip away. | */
   "helix-headless-heatmap": DefineCustomElement<
     HelixHeadlessHeatmap,
     HelixHeadlessHeatmapVueProps,
@@ -19467,7 +19534,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessLightboxVueProps,
     HelixHeadlessLightboxVueEvents
   >;
-  /** A line chart shows the shape of each series: where the readings went.  The scale covers the range of the data. Including zero in the range of a series that moves between 980 and 1020 would flatten the line into a rule across the top of the box. 'BarChart' always starts at zero, because a bar's length is its value. Set 'zero' when the distance from zero is the point.  Every series shares one scale, as in the bar chart.  'dashed' names the series drawn as a dashed line, such as a forecast or a target beside the readings: 'dashed="Forecast"'. Each takes a 'line-dashed' part beside 'line'.  'area' fills each series down to the floor on its own, so the fills overlap. For a total made of parts, use 'Area Chart', which stacks the series so the top edge is the total and each band is a share.  The labels are HTML beside the drawing, as in 'BarChart'. Text inside an '<svg>' that fills its box scales with the box, so the same 'font-size' can render at 10px in a narrow chart and 43px in a wide one.  'value-axis' draws the scale's numbers beside the plot, at the levels 'gridlines' rules, written in 'locale'.  The table is the accessible representation, and the drawing is hidden from screen readers, who get the numbers. The 'summary' part names the chart, from 'label' or the table's caption, and gives each series' latest reading.  **The plot is read by key.** It takes focus, named by 'label' or the caption. The left and right arrows move from reading to reading, Home and End go to the first and the last, and the up and down arrows move among the series of a reading. The tooltip follows, the 'live' part says the reading in words, and Escape puts the tooltip away.  **A tap shows the reading under it**, and keeps it until a tap lands elsewhere. 'helix-reading-change' says each move of the reading, by pointer, tap or key, and 'helix-reading-press' says a reading was clicked, tapped, or pressed with Enter or Space, for a page that opens what a reading stands for.  **'data' takes the readings as data** where the page has no table to point 'for' at, in a table's shape: the column headings, then one row per reading with its label first. A table is still the better source where the page can show one, since it reads before any script runs.  **A chart with nothing to draw says so.** A table with no readings shows 'empty-text', "No readings", in the plot, and 'loading' shows 'loading-text' there until readings arrive. The 'empty' and 'loading' slots take markup in their place, such as a link to add the first reading. */
+  /** A line chart shows the shape of each series: where the readings went.  The scale covers the range of the data. Including zero in the range of a series that moves between 980 and 1020 would flatten the line into a rule across the top of the box. 'BarChart' always starts at zero, because a bar's length is its value. Set 'zero' when the distance from zero is the point.  Every series shares one scale, as in the bar chart.  'dashed' names the series drawn as a dashed line, such as a forecast or a target beside the readings: 'dashed="Forecast"'. Each takes a 'line-dashed' part beside 'line'.  'area' fills each series down to the floor on its own, so the fills overlap. For a total made of parts, use 'Area Chart', which stacks the series so the top edge is the total and each band is a share.  The labels are HTML beside the drawing, as in 'BarChart'. Text inside an '<svg>' that fills its box scales with the box, so the same 'font-size' can render at 10px in a narrow chart and 43px in a wide one.  'value-axis' draws the scale's numbers beside the plot, at the levels 'gridlines' rules, written in 'locale'.  The table is the accessible representation, and the drawing is hidden from screen readers, who get the numbers. The 'summary' part names the chart, from 'label' or the table's caption, and gives each series' latest reading.  **The plot is read by key.** It takes focus, named by 'label' or the caption. The left and right arrows move from reading to reading, Home and End go to the first and the last, and the up and down arrows move among the series of a reading. The tooltip follows, the 'live' part says the reading in words, and Escape puts the tooltip away.  **A tap shows the reading under it**, and keeps it until a tap lands elsewhere. 'helix-reading-change' says each move of the reading, by pointer, tap or key, and 'helix-reading-press' says a reading was clicked, tapped, or pressed with Enter or Space, for a page that opens what a reading stands for.  **'data' takes the readings as data** where the page has no table to point 'for' at, in a table's shape: the column headings, then one row per reading with its label first. A table is still the better source where the page can show one, since it reads before any script runs.  **A chart with nothing to draw says so.** A table with no readings shows 'empty-text', "No readings", in the plot, and 'loading' shows 'loading-text' there until readings arrive. The 'empty' and 'loading' slots take markup in their place, such as a link to add the first reading.  **Keyboard.** The plot is one tab stop.  | Key | What it does | |---|---| | Tab | Moves focus to the plot and shows the first reading. | | Right, Left | Moves to the next or the previous reading. On a right-to-left page, Left moves to the next. | | Down, Up | Moves among the series of the reading. With one series, moves to the next or the previous reading. | | Home, End | Moves to the first or the last reading. | | Page Down, Page Up | Moves a tenth of the readings on or back. | | Enter, Space | Presses the reading shown, which sends 'helix-reading-press'. | | Escape | Puts the reading and its tooltip away. | */
   "helix-headless-line-chart": DefineCustomElement<
     HelixHeadlessLineChart,
     HelixHeadlessLineChartVueProps,
@@ -19491,7 +19558,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessListboxVueProps,
     HelixHeadlessListboxVueEvents
   >;
-  /** Draws two concentric circles: a track and a moving arc. The track shows the arc as a proportion of a whole, and costs one element.  **For work whose length is known, use 'Progress' with 'shape="ring"'.** It draws the same ring filled to the value, says the value as a progress bar does, and says when the work is complete. A loader claims no proportion, so it takes no value.  **The center is a slot, empty by default.** Put your logo there once, where your app wraps the loader. When nothing is slotted, nothing extra is rendered.  Slotted content does not rotate. Only the arc moves, so a logo stays readable.  The role is set on the host through 'ElementInternals'. A 'role' in the shadow root would leave the host itself without a role in the light DOM, and a 'role' attribute on the host would be missing from React server-rendered markup.  **'for' names the region being loaded**, and the loader sets 'aria-busy="true"' on it for as long as the loader is on the page, so a screen reader waits for the region rather than reading it half filled. Two loaders in one region hold it busy until the last one leaves. A region drawn after the loader is marked when it arrives.  **'delay' keeps a quick load from flashing a loader.** The loader stays hidden, and silent, for that many milliseconds, and appears only if the work is still going. While it waits it carries ':state(waiting)'. */
+  /** Draws two concentric circles: a track and a moving arc. The track shows the arc as a proportion of a whole, and costs one element.  **For work whose length is known, use 'Progress' with 'shape="ring"'.** It draws the same ring filled to the value, says the value as a progress bar does, and says when the work is complete. A loader claims no proportion, so it takes no value.  **The center is a slot, empty by default.** Put your logo there once, where your app wraps the loader. When nothing is slotted, nothing extra is rendered.  Slotted content does not rotate. Only the arc moves, so a logo stays readable.  The role is set on the host through 'ElementInternals'. A 'role' in the shadow root would leave the host itself without a role in the light DOM, and a 'role' attribute on the host would be missing from React server-rendered markup.  **'for' names the region being loaded**, and the loader sets 'aria-busy="true"' on it for as long as the loader is on the page, so a screen reader waits for the region rather than reading it half filled. Two loaders in one region hold it busy until the last one leaves. A region drawn after the loader is marked when it arrives.  **'delay' keeps a quick load from flashing a loader.** The loader stays hidden, and silent, for that many milliseconds, and appears only if the work is still going. While it waits it carries ':state(waiting)'.  **The loader can stand in for what it wraps.** Put the content in the 'content' slot, such as a button or a card, and set 'idle' while no work is in progress. While the work runs, the content keeps its size and is hidden and inert, and the ring draws over it. While 'idle' is set, the loader draws nothing of its own, has no role, and marks no region busy, so only the content shows. Clearing 'idle' starts 'delay' again. */
   "helix-headless-loader": DefineCustomElement<
     HelixHeadlessLoader,
     HelixHeadlessLoaderVueProps,
@@ -19713,13 +19780,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessRadioVueProps,
     HelixHeadlessRadioVueEvents
   >;
-  /** Supports half marks, so the value is not always an integer and the press targets are not the marks: five stars at a half step give ten places to press. The pointer handling and 'step' are built around half marks.  A partial mark is the full mark, clipped. The filled marks are drawn over the empty marks and cut off partway, so any mark and any fraction work.  A read-only rating displays a score, which is the most common use. It is announced as a displayed value and does not look disabled.  With 'clearable', pressing the chosen score again, or Backspace or Delete on the marks, takes the rating back to unrated and sends 'helix-clear'.  **Keyboard.** The marks are one tab stop, on the chosen score or the first.  | Key | What it does | |---|---| | Right, Down | Chooses the next score up, and stops at the highest. | | Left, Up | Chooses the next score down, and stops at the lowest. | | Home, End | Chooses the lowest or the highest score. | | Space, Enter | Chooses the focused score, or clears it under 'clearable' when it is already chosen. | | Backspace, Delete | Clears the rating, under 'clearable'. |  Left and Right swap on a right-to-left page. The marks are a 'radiogroup' named by 'label', and each score is a 'radio' named by 'option-label', such as "3 out of 5". A read-only rating is one 'img' named by its score. */
+  /** Supports half marks, so the value is not always an integer and the press targets are not the marks: five stars at a half step give ten places to press. The pointer handling and 'step' are built around half marks.  A partial mark is the full mark, clipped. The filled marks are drawn over the empty marks and cut off partway, so any mark and any fraction work.  A read-only rating displays a score, which is the most common use. It is announced as a displayed value and does not look disabled.  With 'clearable', pressing the chosen score again, or Backspace or Delete on the marks, takes the rating back to unrated and sends 'helix-clear'.  **Keyboard.** The marks are one tab stop, on the chosen score or the first.  | Key | What it does | |---|---| | Right, Down | Chooses the next score up, and stops at the highest. | | Left, Up | Chooses the next score down, and stops at the lowest. | | Home, End | Chooses the lowest or the highest score. | | Space, Enter | Chooses the focused score, or clears it under 'clearable' when it is already chosen. | | Backspace, Delete | Clears the rating, under 'clearable'. |  Left and Right swap on a right-to-left page. The marks are a 'radiogroup' named by 'label', and each score is a 'radio' named by 'option-label', such as "3 out of 5". A read-only rating is one 'img' named by its label and then its score, such as "Quality 3 out of 5". */
   "helix-headless-rating": DefineCustomElement<
     HelixHeadlessRating,
     HelixHeadlessRatingVueProps,
     HelixHeadlessRatingVueEvents
   >;
-  /** A scatter chart shows how two measures relate. The table's first numeric column is measured across, every other numeric column is measured up, and each row is one point. A table of countries with an income column and a life expectancy column draws one point for each country. Each additional numeric column is another series, in its own color.  Both axes are labeled, because both positions are values. The ticks sit at round numbers, and the range extends to them.  'trend' draws each series' line of best fit, by least squares, across the plot in the series' color.  **'size-by' names a third measure, drawn as each point's size**, as a bubble chart does: 'size-by="Population"' takes that column out of the series and gives each point an area in proportion to its row's number there. The tooltip and the table still say the number.  The summary gives each series' correlation coefficient and its number of points. The table has every number, and the drawing is hidden from screen readers.  **The plot is read by key.** It takes focus, named by 'label' or the caption. The left and right arrows move from row to row in the table's order, Home and End go to the first and the last, and the up and down arrows move among the series of a row. The tooltip sits on that point, the 'live' part says the row in words, and Escape puts the tooltip away.  Each point is a '<span>' placed by percentage over the drawing, as 'LineChart' places its end points, so points stay round when the drawing stretches.  The plot runs left to right in every text direction, as a number line does. The plot, its axes, and the axis names sit in a 'plane' part with 'dir="ltr"'. The axis names carry 'dir="auto"', so a name in Arabic or Hebrew reads in its own direction. The summary and the tooltip bubble follow the page's direction.  **A tap shows the reading under it**, and keeps it until a tap lands elsewhere. 'helix-reading-change' says each move of the reading, by pointer, tap or key, and 'helix-reading-press' says a reading was clicked, tapped, or pressed with Enter or Space, for a page that opens what a reading stands for.  **'data' takes the readings as data** where the page has no table to point 'for' at, in a table's shape: the column headings, then one row per reading with its label first. A table is still the better source where the page can show one, since it reads before any script runs.  **A chart with nothing to draw says so.** A table with no readings shows 'empty-text', "No readings", in the plot, and 'loading' shows 'loading-text' there until readings arrive. The 'empty' and 'loading' slots take markup in their place, such as a link to add the first reading. */
+  /** A scatter chart shows how two measures relate. The table's first numeric column is measured across, every other numeric column is measured up, and each row is one point. A table of countries with an income column and a life expectancy column draws one point for each country. Each additional numeric column is another series, in its own color.  Both axes are labeled, because both positions are values. The ticks sit at round numbers, and the range extends to them.  'trend' draws each series' line of best fit, by least squares, across the plot in the series' color.  **'size-by' names a third measure, drawn as each point's size**, as a bubble chart does: 'size-by="Population"' takes that column out of the series and gives each point an area in proportion to its row's number there. The tooltip and the table still say the number.  The summary gives each series' correlation coefficient and its number of points. The table has every number, and the drawing is hidden from screen readers.  **The plot is read by key.** It takes focus, named by 'label' or the caption. The left and right arrows move from point to point, left to right across the plot, Home and End go to the first and the last, and the up and down arrows move among the series of a row. The tooltip sits on that point, the 'live' part says the row in words, and Escape puts the tooltip away.  Each point is a '<span>' placed by percentage over the drawing, as 'LineChart' places its end points, so points stay round when the drawing stretches.  The plot runs left to right in every text direction, as a number line does. The plot, its axes, and the axis names sit in a 'plane' part with 'dir="ltr"'. The axis names carry 'dir="auto"', so a name in Arabic or Hebrew reads in its own direction. The summary and the tooltip bubble follow the page's direction.  **A tap shows the reading under it**, and keeps it until a tap lands elsewhere. 'helix-reading-change' says each move of the reading, by pointer, tap or key, and 'helix-reading-press' says a reading was clicked, tapped, or pressed with Enter or Space, for a page that opens what a reading stands for.  **'data' takes the readings as data** where the page has no table to point 'for' at, in a table's shape: the column headings, then one row per reading with its label first. A table is still the better source where the page can show one, since it reads before any script runs.  **A chart with nothing to draw says so.** A table with no readings shows 'empty-text', "No readings", in the plot, and 'loading' shows 'loading-text' there until readings arrive. The 'empty' and 'loading' slots take markup in their place, such as a link to add the first reading.  **Keyboard.** The plot is one tab stop.  | Key | What it does | |---|---| | Tab | Moves focus to the plot and shows the first reading. | | Right, Left | Moves to the next or the previous point, left to right across the plot. On a right-to-left page, Left moves to the next. | | Down, Up | Moves among the series of the point. With one series, moves to the next or the previous point. | | Home, End | Moves to the first or the last point. | | Page Down, Page Up | Moves a tenth of the points on or back. | | Enter, Space | Presses the point shown, which sends 'helix-reading-press'. | | Escape | Puts the point and its tooltip away. | */
   "helix-headless-scatter-chart": DefineCustomElement<
     HelixHeadlessScatterChart,
     HelixHeadlessScatterChartVueProps,
@@ -19731,7 +19798,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessScrollAreaVueProps,
     HelixHeadlessScrollAreaVueEvents
   >;
-  /** A trigger that opens a 'Listbox'. The list is the same element you can use on its own, with the same keyboard behavior, filtering, and multi-select rules. Select adds a trigger that shows what is chosen, a floating surface, and a place for focus to return to when the list closes.  Your options stay in your light DOM and are slotted through into the listbox, so the listbox looks through slots to find them. For a list too long to draw whole, set 'items' instead: the list draws only the options in sight, as Listbox's 'items' does, and the trigger, its keys and the form read the whole set.  'Select' owns the value, passes it down to the listbox, and takes changes back, so the value lives in one place. With 'multiple', the value is the chosen values joined with commas, and the form receives one entry for each. An option's value may hold a comma, and it is read as one value.  Set 'valueContent' to draw the trigger's content from the chosen options, and several chosen options are written as a list in the reader's language.  **Keyboard.** On the closed trigger:  | Key | What it does | |---|---| | Down, Enter, Space | Opens the list on the chosen option, or the first. | | Up | Opens the list on the chosen option, or the last. | | Home, End | Opens the list on the first or the last option. | | Left, Right | Chooses the option before or after the chosen one without opening, as React Aria's Select does. On a right-to-left page Left chooses the one after. | | A letter or a word | Chooses the option whose words start with what you typed, as a native '<select>' does. With 'multiple', opens the list on it. |  In the open list, which is a 'Listbox':  | Key | What it does | |---|---| | Down, Up, Home, End, Page Down, Page Up | Moves the highlight. | | A letter or a word | Moves the highlight to the next option whose words start with what you typed. | | Enter, Space | Chooses the highlighted option and closes the list. With 'multiple', toggles it and leaves the list open. | | Escape | Closes the list and puts focus back on the trigger. | | Tab | Closes the list and moves on. |  A choice made on the closed trigger is said aloud on Apple devices, where VoiceOver does not read the trigger's new name.  **ARIA.** The trigger is a 'button' with 'aria-haspopup="listbox"' and 'aria-expanded', named by the label and then the chosen words, as a native '<select>' is. The list is the listbox 'Listbox' describes, named by the label, or by 'list-label' where there is none.  Set 'autocomplete' to let a browser's autofill choose, as a native '<select>' with the same attribute would. */
+  /** A trigger that opens a 'Listbox'. The list is the same element you can use on its own, with the same keyboard behavior, filtering, and multi-select rules. Select adds a trigger that shows what is chosen, a floating surface, and a place for focus to return to when the list closes.  Your options stay in your light DOM and are slotted through into the listbox, so the listbox looks through slots to find them. Write them as 'Option', group them in 'Option.Group', and divide them with 'Option.Separator'. Importing Select registers all three in the same tier. For a list too long to draw whole, set 'items' instead: the list draws only the options in sight, as Listbox's 'items' does, and the trigger, its keys and the form read the whole set.  'Select' owns the value, passes it down to the listbox, and takes changes back, so the value lives in one place. With 'multiple', the value is the chosen values joined with commas, and the form receives one entry for each. An option's value may hold a comma, and it is read as one value.  Set 'valueContent' to draw the trigger's content from the chosen options, and several chosen options are written as a list in the reader's language.  **Keyboard.** On the closed trigger:  | Key | What it does | |---|---| | Down, Enter, Space | Opens the list on the chosen option, or the first. | | Up | Opens the list on the chosen option, or the last. | | Home, End | Opens the list on the first or the last option. | | Left, Right | Chooses the option before or after the chosen one without opening, as React Aria's Select does. On a right-to-left page Left chooses the one after. | | A letter or a word | Chooses the option whose words start with what you typed, as a native '<select>' does. With 'multiple', opens the list on it. |  In the open list, which is a 'Listbox':  | Key | What it does | |---|---| | Down, Up, Home, End, Page Down, Page Up | Moves the highlight. | | A letter or a word | Moves the highlight to the next option whose words start with what you typed. | | Enter, Space | Chooses the highlighted option and closes the list. With 'multiple', toggles it and leaves the list open. | | Escape | Closes the list and puts focus back on the trigger. | | Tab | Closes the list and moves on. |  A choice made on the closed trigger is said aloud on Apple devices, where VoiceOver does not read the trigger's new name.  **ARIA.** The trigger is a 'button' with 'aria-haspopup="listbox"' and 'aria-expanded', named by the label and then the chosen words, as a native '<select>' is. The list is the listbox 'Listbox' describes, named by the label, or by 'list-label' where there is none.  Set 'autocomplete' to let a browser's autofill choose, as a native '<select>' with the same attribute would. */
   "helix-headless-select": DefineCustomElement<
     HelixHeadlessSelect,
     HelixHeadlessSelectVueProps,
@@ -19755,7 +19822,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessSliderVueProps,
     HelixHeadlessSliderVueEvents
   >;
-  /** Takes its numbers from the 'values' attribute. The other charts read a table, but a table behind a small trend line would be read aloud row by row. Set 'values' to the data and 'label' to the one sentence a screen reader announces.  Use 'for' when a sparkline has a real table behind it. 'for' wins when both are set.  Without a 'label' the sparkline is decorative and 'aria-hidden', for example beside a stat that already says "Sessions, 1,102". With a 'label' it is named by that sentence and read by key, as every chart is: the drawing takes focus, the arrow keys walk the readings, Home and End go to the first and the last, Escape puts the reading away, and the 'live' part says each reading with where it stands, such as "Mon: 12 (3 of 7)".  **A named sparkline describes itself.** Beside its name, a screen reader hears what the readings come to, the first and the last, the highest and the lowest, in 'overview-label': "From 12 to 20, highest 30, lowest 8". An 'aria-label' on the element names it as 'label' does.  A pointer resting on the drawing shows the reading under it: the 'cursor' part marks it and the 'readout' part writes it. 'marks' adds a mark on the highest and the lowest reading, and 'range' draws a band between two values, such as a normal range. A blank cell in a 'for' table is a gap in the line, and a reading alone between two blanks is a 'lone' mark.  Place it beside a 'Stat', because a change beside a figure is a second fact, as 'Stat''s own spec says. 'Trend' is composed the same way.  The component writes the properties listed below, and the stylesheet that draws the sparkline reads them. Do not set them yourself. They carry numbers the component computes and CSS cannot, so a stylesheet can draw the sparkline without measuring anything. */
+  /** Takes its numbers from the 'values' attribute. The other charts read a table, but a table behind a small trend line would be read aloud row by row. Set 'values' to the data and 'label' to the one sentence a screen reader announces.  Use 'for' when a sparkline has a real table behind it. 'for' wins when both are set.  Without a 'label' the sparkline is decorative and 'aria-hidden', for example beside a stat that already says "Sessions, 1,102". With a 'label' it is named by that sentence and read by key, as every chart is: the drawing takes focus, the arrow keys walk the readings, Home and End go to the first and the last, Escape puts the reading away, and the 'live' part says each reading with where it stands, such as "Mon: 12 (3 of 7)".  **A named sparkline describes itself.** Beside its name, a screen reader hears what the readings come to, the first and the last, the highest and the lowest, in 'overview-label': "From 12 to 20, highest 30, lowest 8". An 'aria-label' on the element names it as 'label' does.  'helix-reading-change' says each move of the reading, by pointer, tap or key, and 'helix-reading-press' says a reading was clicked, tapped, or pressed with Enter or Space, as on every chart.  A pointer resting on the drawing shows the reading under it: the 'cursor' part marks it and the 'readout' part writes it. 'marks' adds a mark on the highest and the lowest reading, and 'range' draws a band between two values, such as a normal range. A blank cell in a 'for' table is a gap in the line, and a reading alone between two blanks is a 'lone' mark.  Place it beside a 'Stat', because a change beside a figure is a second fact, as 'Stat''s own spec says. 'Trend' is composed the same way.  The component writes the properties listed below, and the stylesheet that draws the sparkline reads them. Do not set them yourself. They carry numbers the component computes and CSS cannot, so a stylesheet can draw the sparkline without measuring anything.  **Keyboard.** A sparkline with a 'label' is one tab stop.  | Key | What it does | |---|---| | Tab | Moves focus to the drawing and shows the first reading, where there is a 'label'. | | Any arrow | Right and Down move to the next reading, Left and Up to the previous. On a right-to-left page, Left moves to the next. | | Home, End | Moves to the first or the last reading. | | Page Down, Page Up | Moves a tenth of the readings on or back. | | Enter, Space | Presses the reading shown, which sends 'helix-reading-press'. | | Escape | Puts the reading and its tooltip away. | */
   "helix-headless-sparkline": DefineCustomElement<
     HelixHeadlessSparkline,
     HelixHeadlessSparklineVueProps,
@@ -19953,7 +20020,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessTourStopVueProps,
     HelixHeadlessTourStopVueEvents
   >;
-  /** 'open' comes from 'MixinControllerOpen', the same state a disclosure holds, so you can respond to a branch opening and control the state yourself. The row renders 'aria-expanded'.  Each item is an element because it holds state: whether it is open, selected, and focused.  An item is a branch when something is slotted into 'children'. This is detected on the client, so server-rendered markup shows a leaf and the twisty appears on hydration.  **'href' makes the whole row a link**, rendered as an '<a>'. Enter, middle click, and the status bar then work anywhere on the row.  Pressing a branch, or Enter or Space on it, opens or closes it. A branch with a 'value' is chosen as well and sends 'helix-select', unless the tree has 'nesting="heading"', where a branch names the list under it, or 'selection-mode="leaf"', where only the items at the ends are chosen.  A 'disabled' item is reached by the arrow keys and announced as unavailable, and a press, Enter or Space on it does nothing.  A 'lazy' item is a branch whose children you load when it opens: opening it sends 'helix-load', the row says it is busy, and the children you add appear in it. Remove 'lazy' once they are in.  **In a 'reorderable' tree, the row has a grip** at its far end, which a pointer drags to move the item among its siblings. The tree says which item is moving and where the drop indicator is, with the 'dragging', 'drop-before', and 'drop-after' states. */
+  /** 'open' comes from 'MixinControllerOpen', the same state a disclosure holds, so you can respond to a branch opening and control the state yourself. The row renders 'aria-expanded'.  Each item is an element because it holds state: whether it is open, selected, and focused.  An item is a branch when an item is slotted into 'children', with 'slot="children"' on each nested item. This is detected on the client, so server-rendered markup shows a leaf and the twisty appears on hydration.  **'href' makes the whole row a link**, rendered as an '<a>'. Enter, middle click, and the status bar then work anywhere on the row.  Pressing a branch, or Enter or Space on it, opens or closes it. A branch with a 'value' is chosen as well and sends 'helix-select', unless the tree has 'nesting="heading"', where a branch names the list under it, or 'selection-mode="leaf"', where only the items at the ends are chosen.  A 'disabled' item is reached by the arrow keys and announced as unavailable, and a press, Enter or Space on it does nothing.  A 'lazy' item is a branch whose children you load when it opens: opening it sends 'helix-load', the row says it is busy, and the children you add appear in it. Remove 'lazy' once they are in.  **In a 'reorderable' tree, the row has a grip** at its far end, which a pointer drags to move the item among its siblings. The tree says which item is moving and where the drop indicator is, with the 'dragging', 'drop-before', and 'drop-after' states. */
   "helix-headless-tree-item": DefineCustomElement<
     HelixHeadlessTreeItem,
     HelixHeadlessTreeItemVueProps,

package/types/words.d.ts

@@ -1413,6 +1413,20 @@ declare module '@fusion.dev/helix-core' {
       fallbackLabel: Message
     }
     'helix-donut-chart': {
+      /**
+       * The words shown in place of the drawing when the table has no readings,
+       * and the fallback of the `empty` slot.
+       *
+       * English: `No readings`
+       */
+      emptyText: Message
+      /**
+       * 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.
+       *
+       * English: `Loading readings`
+       */
+      loadingText: Message
       /**
        * Where a reading the keys moved to stands among the readings, said after
        * it. `{position}` and `{count}` are replaced with the numbers, written in
@@ -1721,6 +1735,14 @@ declare module '@fusion.dev/helix-core' {
        * English: `Selected`
        */
       selectedLabel: Message
+      /**
+       * 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`.
+       *
+       * English: `{note}, selected. {count}`
+       */
+      selectionLabel: Message
       /**
        * The hint shown when one finger swipes over the graph with `gestures="cooperative"`.
        *