@fusion.dev/helix-headless 0.152.0 → 0.154.0

package/types/vue.d.ts

@@ -663,6 +663,25 @@ them, and the tooltip and the table hold every reading. */
 Absent draws none: bands read as a composition need no numbers beside
 them, and the tooltip and the table hold every reading. */
   valueAxis?: (HelixHeadlessAreaChart["valueAxis"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  "empty-text"?: (HelixHeadlessAreaChart["emptyText"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  emptyText?: (HelixHeadlessAreaChart["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?: (HelixHeadlessAreaChart["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"?: (HelixHeadlessAreaChart["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?: (HelixHeadlessAreaChart["loadingText"]) | undefined;
   /** The id of the table to read.
 
 Names a table in the same tree, so a chart inside another component's
@@ -699,6 +718,29 @@ Set it to the words of the page's language, such as `{position} von
 {count}`, or to nothing to say no position. A slice or a series a
 legend hid is not counted. */
   positionLabel?: (HelixHeadlessAreaChart["positionLabel"]) | undefined;
+  /** The readings as data, in the shape of a table, where the page has no
+table to point `for` at. `for` wins where both are set.
+
+```js
+chart.data = {
+  caption: 'Sessions by channel',
+  columns: ['Month', 'Direct', 'Referral'],
+  rows: [['Jan', 10, 4], ['Feb', 20, 8]],
+}
+```
+
+The first column holds each row's label and every column after it a
+series, as in a table. A cell is a number, words, `null` for a blank,
+or `{ value, text }` for a number shown as words, such as `$128k`. A
+number is shown in `locale`.
+
+**A table is still the better source where the page can show one**:
+it reads with no script and before hydration, and a reader can sort and
+copy it. Data is drawn on the client only, so a server serves the
+frame, and the summary, the keys and the readout are then the whole of
+what a screen reader is given. Set a new object to redraw: the chart
+does not look inside the one it has. */
+  data?: (HelixHeadlessAreaChart["data"]) | undefined;
 };
 
 export type HelixHeadlessAreaChartVueEvents = {
@@ -1001,6 +1043,25 @@ bottom of bars under `orientation="horizontal"`.
 Absent draws none with one scale, since bars compared with each other need
 no numbers. With `secondary` both scales are drawn whatever this says. */
   valueAxis?: (HelixHeadlessBarChart["valueAxis"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  "empty-text"?: (HelixHeadlessBarChart["emptyText"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  emptyText?: (HelixHeadlessBarChart["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?: (HelixHeadlessBarChart["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"?: (HelixHeadlessBarChart["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?: (HelixHeadlessBarChart["loadingText"]) | undefined;
   /** The id of the table to read.
 
 Names a table in the same tree, so a chart inside another component's
@@ -1037,6 +1098,29 @@ Set it to the words of the page's language, such as `{position} von
 {count}`, or to nothing to say no position. A slice or a series a
 legend hid is not counted. */
   positionLabel?: (HelixHeadlessBarChart["positionLabel"]) | undefined;
+  /** The readings as data, in the shape of a table, where the page has no
+table to point `for` at. `for` wins where both are set.
+
+```js
+chart.data = {
+  caption: 'Sessions by channel',
+  columns: ['Month', 'Direct', 'Referral'],
+  rows: [['Jan', 10, 4], ['Feb', 20, 8]],
+}
+```
+
+The first column holds each row's label and every column after it a
+series, as in a table. A cell is a number, words, `null` for a blank,
+or `{ value, text }` for a number shown as words, such as `$128k`. A
+number is shown in `locale`.
+
+**A table is still the better source where the page can show one**:
+it reads with no script and before hydration, and a reader can sort and
+copy it. Data is drawn on the client only, so a server serves the
+frame, and the summary, the keys and the readout are then the whole of
+what a screen reader is given. Set a new object to redraw: the chart
+does not look inside the one it has. */
+  data?: (HelixHeadlessBarChart["data"]) | undefined;
 };
 
 export type HelixHeadlessBarChartVueEvents = {
@@ -2079,10 +2163,6 @@ twice what this says once.
 Reflected and undefaulted, so a card that has not asked reads as a card
 with no attribute on it and the stylesheet only describes the departure. */
   mediaPlacement?: (HelixHeadlessCard["mediaPlacement"]) | undefined;
-  /**  */
-  "aria-labelledby"?: unknown;
-  /**  */
-  "aria-label"?: unknown;
 };
 
 export type HelixHeadlessCardVueEvents = {};
@@ -2899,6 +2979,22 @@ export type HelixHeadlessCheckboxVueEvents = {
 };
 
 export type HelixHeadlessCodeBlockVueProps = {
+  /** The name of a block that scrolls, which is a tab stop while it does.
+
+Where the block has a name, the scroller says it too, such as "Code,
+app.ts", as `code-name-label` puts it. */
+  "code-label"?: (HelixHeadlessCodeBlock["codeLabel"]) | undefined;
+  /** The name of a block that scrolls, which is a tab stop while it does.
+
+Where the block has a name, the scroller says it too, such as "Code,
+app.ts", as `code-name-label` puts it. */
+  codeLabel?: (HelixHeadlessCodeBlock["codeLabel"]) | undefined;
+  /** The name of a block that scrolls, where the block has a name. `{code}` is
+`code-label` and `{name}` the block's name. */
+  "code-name-label"?: (HelixHeadlessCodeBlock["codeNameLabel"]) | undefined;
+  /** The name of a block that scrolls, where the block has a name. `{code}` is
+`code-label` and `{name}` the block's name. */
+  codeNameLabel?: (HelixHeadlessCodeBlock["codeNameLabel"]) | undefined;
   /** The expand button's words while the block shows every line. */
   "collapse-label"?: (HelixHeadlessCodeBlock["collapseLabel"]) | undefined;
   /** The expand button's words while the block shows every line. */
@@ -5748,6 +5844,29 @@ Set it to the words of the page's language, such as `{position} von
 {count}`, or to nothing to say no position. A slice or a series a
 legend hid is not counted. */
   positionLabel?: (HelixHeadlessDonutChart["positionLabel"]) | undefined;
+  /** The readings as data, in the shape of a table, where the page has no
+table to point `for` at. `for` wins where both are set.
+
+```js
+chart.data = {
+  caption: 'Sessions by channel',
+  columns: ['Month', 'Direct', 'Referral'],
+  rows: [['Jan', 10, 4], ['Feb', 20, 8]],
+}
+```
+
+The first column holds each row's label and every column after it a
+series, as in a table. A cell is a number, words, `null` for a blank,
+or `{ value, text }` for a number shown as words, such as `$128k`. A
+number is shown in `locale`.
+
+**A table is still the better source where the page can show one**:
+it reads with no script and before hydration, and a reader can sort and
+copy it. Data is drawn on the client only, so a server serves the
+frame, and the summary, the keys and the readout are then the whole of
+what a screen reader is given. Set a new object to redraw: the chart
+does not look inside the one it has. */
+  data?: (HelixHeadlessDonutChart["data"]) | undefined;
 };
 
 export type HelixHeadlessDonutChartVueEvents = {};
@@ -7175,6 +7294,29 @@ Set it to the words of the page's language, such as `{position} von
 {count}`, or to nothing to say no position. A slice or a series a
 legend hid is not counted. */
   positionLabel?: (HelixHeadlessHeatmap["positionLabel"]) | undefined;
+  /** The readings as data, in the shape of a table, where the page has no
+table to point `for` at. `for` wins where both are set.
+
+```js
+chart.data = {
+  caption: 'Sessions by channel',
+  columns: ['Month', 'Direct', 'Referral'],
+  rows: [['Jan', 10, 4], ['Feb', 20, 8]],
+}
+```
+
+The first column holds each row's label and every column after it a
+series, as in a table. A cell is a number, words, `null` for a blank,
+or `{ value, text }` for a number shown as words, such as `$128k`. A
+number is shown in `locale`.
+
+**A table is still the better source where the page can show one**:
+it reads with no script and before hydration, and a reader can sort and
+copy it. Data is drawn on the client only, so a server serves the
+frame, and the summary, the keys and the readout are then the whole of
+what a screen reader is given. Set a new object to redraw: the chart
+does not look inside the one it has. */
+  data?: (HelixHeadlessHeatmap["data"]) | undefined;
 };
 
 export type HelixHeadlessHeatmapVueEvents = {
@@ -7408,6 +7550,11 @@ the value instead.
 A name written `prefix:name` asks the library registered under that
 prefix. */
   name?: (HelixHeadlessIcon["name"]) | undefined;
+  /** The URL of an SVG file to draw, fetched once a page and drawn in
+`currentColor` where the file does not color its shapes.
+
+Wins over `name`; `icon` wins over both. Absent draws `name`. */
+  src?: (HelixHeadlessIcon["src"]) | undefined;
   /** The icon to draw, as an object you import.
 
 **The scalable door, and the one this library uses internally.** An icon is
@@ -7424,9 +7571,9 @@ for. Set both and this wins, the value being the more specific statement. */
 };
 
 export type HelixHeadlessIconVueEvents = {
-  /** `name` matches no registered icon and no library answers it, so nothing is drawn. */
+  /** `name` matches no registered icon and no library answers it, or `src` is no SVG, so nothing is drawn. */
   error: HelixHeadlessIconElementEvent;
-  /** A glyph a library gave later for `name` is drawn. */
+  /** A glyph a library gave later for `name`, or the file at `src`, is drawn. */
   load: HelixHeadlessIconElementEvent;
 };
 
@@ -8247,6 +8394,25 @@ Set it where the distance from nothing is the point rather than the shape,
 and accept that a series which never approaches zero becomes a flat rule
 near the top of the box. */
   zero?: (HelixHeadlessLineChart["zero"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  "empty-text"?: (HelixHeadlessLineChart["emptyText"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  emptyText?: (HelixHeadlessLineChart["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?: (HelixHeadlessLineChart["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"?: (HelixHeadlessLineChart["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?: (HelixHeadlessLineChart["loadingText"]) | undefined;
   /** The id of the table to read.
 
 Names a table in the same tree, so a chart inside another component's
@@ -8283,6 +8449,29 @@ Set it to the words of the page's language, such as `{position} von
 {count}`, or to nothing to say no position. A slice or a series a
 legend hid is not counted. */
   positionLabel?: (HelixHeadlessLineChart["positionLabel"]) | undefined;
+  /** The readings as data, in the shape of a table, where the page has no
+table to point `for` at. `for` wins where both are set.
+
+```js
+chart.data = {
+  caption: 'Sessions by channel',
+  columns: ['Month', 'Direct', 'Referral'],
+  rows: [['Jan', 10, 4], ['Feb', 20, 8]],
+}
+```
+
+The first column holds each row's label and every column after it a
+series, as in a table. A cell is a number, words, `null` for a blank,
+or `{ value, text }` for a number shown as words, such as `$128k`. A
+number is shown in `locale`.
+
+**A table is still the better source where the page can show one**:
+it reads with no script and before hydration, and a reader can sort and
+copy it. Data is drawn on the client only, so a server serves the
+frame, and the summary, the keys and the readout are then the whole of
+what a screen reader is given. Set a new object to redraw: the chart
+does not look inside the one it has. */
+  data?: (HelixHeadlessLineChart["data"]) | undefined;
 };
 
 export type HelixHeadlessLineChartVueEvents = {
@@ -11443,7 +11632,8 @@ decimals. Written as JSON in the attribute.
 
 A `percent` style writes the share of the range, and any other the value
 itself, so the example says "18 GB". Absent is a whole percentage. The
-words are announced as well as shown. `value-text` still wins. */
+words are announced whether or not `show-value` shows them. `value-text`
+still wins. */
   "format-options"?: (HelixHeadlessProgress["formatOptions"]) | undefined;
   /** `Intl.NumberFormat` options the reading is written with, as React Aria's
 Meter and ProgressBar take them: a unit, a currency, or a number of
@@ -11455,7 +11645,8 @@ decimals. Written as JSON in the attribute.
 
 A `percent` style writes the share of the range, and any other the value
 itself, so the example says "18 GB". Absent is a whole percentage. The
-words are announced as well as shown. `value-text` still wins. */
+words are announced whether or not `show-value` shows them. `value-text`
+still wins. */
   formatOptions?: (HelixHeadlessProgress["formatOptions"]) | undefined;
   /** Whether the length of the task is unknown. The bar then shows activity
 without a value.
@@ -11610,6 +11801,20 @@ export type HelixHeadlessQrCodeVueEvents = {
 export type HelixHeadlessQuoteVueProps = {
   /** URL identifying where the quotation came from. */
   cite?: (HelixHeadlessQuote["cite"]) | undefined;
+  /** Whether to leave the quotation marks off, for a quotation set where the
+page draws its own.
+
+Negative, because the marks are on by default and a boolean attribute is
+true whenever it is present. Reflected, because a stylesheet takes the
+marks off on it. */
+  "no-marks"?: (HelixHeadlessQuote["noMarks"]) | undefined;
+  /** Whether to leave the quotation marks off, for a quotation set where the
+page draws its own.
+
+Negative, because the marks are on by default and a boolean attribute is
+true whenever it is present. Reflected, because a stylesheet takes the
+marks off on it. */
+  noMarks?: (HelixHeadlessQuote["noMarks"]) | undefined;
 };
 
 export type HelixHeadlessQuoteVueEvents = {};
@@ -12088,6 +12293,25 @@ Absent draws none. A series with fewer than two points, or with every
 point at one measure across, has no line to draw. The summary already
 gives each series' correlation, which says how near the points are to it. */
   trend?: (HelixHeadlessScatterChart["trend"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  "empty-text"?: (HelixHeadlessScatterChart["emptyText"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  emptyText?: (HelixHeadlessScatterChart["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?: (HelixHeadlessScatterChart["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"?: (HelixHeadlessScatterChart["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?: (HelixHeadlessScatterChart["loadingText"]) | undefined;
   /** The id of the table to read.
 
 Names a table in the same tree, so a chart inside another component's
@@ -12124,6 +12348,29 @@ Set it to the words of the page's language, such as `{position} von
 {count}`, or to nothing to say no position. A slice or a series a
 legend hid is not counted. */
   positionLabel?: (HelixHeadlessScatterChart["positionLabel"]) | undefined;
+  /** The readings as data, in the shape of a table, where the page has no
+table to point `for` at. `for` wins where both are set.
+
+```js
+chart.data = {
+  caption: 'Sessions by channel',
+  columns: ['Month', 'Direct', 'Referral'],
+  rows: [['Jan', 10, 4], ['Feb', 20, 8]],
+}
+```
+
+The first column holds each row's label and every column after it a
+series, as in a table. A cell is a number, words, `null` for a blank,
+or `{ value, text }` for a number shown as words, such as `$128k`. A
+number is shown in `locale`.
+
+**A table is still the better source where the page can show one**:
+it reads with no script and before hydration, and a reader can sort and
+copy it. Data is drawn on the client only, so a server serves the
+frame, and the summary, the keys and the readout are then the whole of
+what a screen reader is given. Set a new object to redraw: the chart
+does not look inside the one it has. */
+  data?: (HelixHeadlessScatterChart["data"]) | undefined;
 };
 
 export type HelixHeadlessScatterChartVueEvents = {
@@ -13029,7 +13276,10 @@ export type HelixHeadlessSplitterVueEvents = {
 };
 
 export type HelixHeadlessStatGroupVueProps = {
-  /** Accessible name for the group. */
+  /** Accessible name for the group, which makes it a group.
+
+Absent leaves the stats with no group around them, unless `aria-label` or
+`aria-labelledby` names it. */
   label?: (HelixHeadlessStatGroup["label"]) | undefined;
 };
 
@@ -13062,6 +13312,29 @@ reports a hydration mismatch. The absent attribute is the column, which the
 stylesheet reads as the base case, and the server spec asserts the host
 carries nothing nobody wrote. */
   direction?: (HelixHeadlessStat["direction"]) | undefined;
+  /** `Intl.NumberFormat` options `value` is written with, such as
+`{"notation":"compact"}` for `1.2M` or `{"style":"percent"}` for `98%`,
+written as JSON in the attribute.
+
+Absent writes the number as the locale writes any number. */
+  "format-options"?: (HelixHeadlessStat["formatOptions"]) | undefined;
+  /** `Intl.NumberFormat` options `value` is written with, such as
+`{"notation":"compact"}` for `1.2M` or `{"style":"percent"}` for `98%`,
+written as JSON in the attribute.
+
+Absent writes the number as the locale writes any number. */
+  formatOptions?: (HelixHeadlessStat["formatOptions"]) | undefined;
+  /** The locale `value` is written in, such as `de` for `1.234.567`.
+
+Absent reads the nearest `lang`, then the runtime's own. Set it on a page
+rendered on a server, so the server and the browser write the figure
+alike. */
+  locale?: (HelixHeadlessStat["locale"]) | undefined;
+  /** The figure as a number, written with `format-options` in `locale` in
+place of a slotted value.
+
+Absent leaves the figure to the slot. */
+  value?: (HelixHeadlessStat["value"]) | undefined;
 };
 
 export type HelixHeadlessStatVueEvents = {};
@@ -16846,7 +17119,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. */
+  /** 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. */
   "helix-headless-area-chart": DefineCustomElement<
     HelixHeadlessAreaChart,
     HelixHeadlessAreaChartVueProps,
@@ -16864,13 +17137,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessAvatarVueProps,
     HelixHeadlessAvatarVueEvents
   >;
-  /** Badge wraps the element it decorates and pins an indicator to its corner, so the wrapped element keeps its place in the layout.  What the indicator shows depends on 'value':  - A 'value' of zero shows no indicator. - No 'value' shows a dot. - Any other value shows the value. Above 'max', the indicator shows '{max}+',   so its width stays the same as the count grows.  'format-options' writes a count with 'Intl.NumberFormat', in 'locale': 'format-options='{"notation":"compact"}'' shows 1,200 as '1.2K'. Absent, the count is shown as it was given.  A count is announced from its own text, and 'label' replaces that with a fuller name, such as '4 unread'. A dot needs a 'label'. Without one, the dot is a colored circle that screen readers do not announce.  **A badge wrapped around a control describes it.** The control is the first element in the badge that takes focus, and its description is the badge's words, so focusing '<helix-badge value="8" label="{count} unread"><button>Inbox </button></helix-badge>' announces "Inbox, button, 8 unread", current as the count changes. A control that already has a description keeps its own. The count is also a status of its own, read when it changes.  **Put the badge inside the control to have its count read with the control's name**, as Web Awesome and Shoelace do: '<button>Inbox <helix-badge value="8" label="8 unread"></helix-badge></button>' is the button "Inbox 8 unread", and stays current as the count changes. The styled tier's 'placement="inline"' draws the mark in the line for that case. */
+  /** Badge wraps the element it decorates and pins an indicator to its corner, so the wrapped element keeps its place in the layout.  What the indicator shows depends on 'value':  - A 'value' of zero shows no indicator. - No 'value' shows a dot. - Any other value shows the value. Above 'max', the indicator shows '{max}+',   so its width stays the same as the count grows.  'format-options' writes a count with 'Intl.NumberFormat', in 'locale': 'format-options='{"notation":"compact"}'' shows 1,200 as '1.2K'. Absent, the count is shown as it was given.  A count is announced from its own text, and 'label' replaces that with a fuller name, such as '4 unread'. A dot needs a 'label'. Without one, the dot is a colored circle that screen readers do not announce.  **A badge wrapped around a control describes it.** The control is the first element in the badge that takes focus, and its description is the badge's words, so focusing '<helix-badge value="8" label="{count} unread"><button>Inbox </button></helix-badge>' announces "Inbox, button, 8 unread", current as the count changes. A control that already has a description keeps its own. The count is also a status of its own, read when it changes.  **Put the badge inside the control to have its count read with the control's name**, as Web Awesome and Shoelace do: '<button>Inbox <helix-badge value="8" label="8 unread"></helix-badge></button>' is the button "Inbox 8 unread", and stays current as the count changes. The styled tier's 'placement="inline"' draws the mark in the line for that case.  **An icon goes inside the mark** through the 'icon' slot, before the count, as Web Awesome's badge takes one at its start. With no 'value' the icon is the whole mark, such as a check on an avatar, drawn where the dot would be. The icon is hidden from screen readers: the count and 'label' are what the mark says. */
   "helix-headless-badge": DefineCustomElement<
     HelixHeadlessBadge,
     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. */
+  /** 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. */
   "helix-headless-bar-chart": DefineCustomElement<
     HelixHeadlessBarChart,
     HelixHeadlessBarChartVueProps,
@@ -16930,7 +17203,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessCanvasVueProps,
     HelixHeadlessCanvasVueEvents
   >;
-  /** The header, body, and footer regions are slots, because they have no state, behavior, or API of their own. You bring your own markup, so a title can be a real '<h2>'.  The host is the surface. The element itself takes the border, the radius, and the grid, so you style 'Card' directly and there is no wrapper part to reach through with '::part'.  Name the card with 'label', as a Stat Group is named, or with 'aria-label' or 'aria-labelledby'. These are the only names that work with server rendering, because reading a title from the light DOM needs a DOM, and the server has none. 'label' is set through 'ElementInternals', so it writes no attribute onto the card. **A named card is a group**, so a reader entering it hears its name; an unnamed one has no role, since a group with no name only adds "group" to what a reader says.  Each region's slot is a part of the same name, 'body' for the main content, as Web Awesome's card names its regions. A slot draws no box, so a part passes inherited properties to what is slotted, and a page wanting a box there gives it one with 'display'.  'header-actions' and 'footer-actions' hold controls at the end of the header's and the footer's line, as Web Awesome's card does. While one holds something, its line is a 'header-row' or 'footer-row' part; otherwise there is no wrapper and every region is a bare slot. A server cannot see slotted content, so served actions sit on their own line until the script runs.  **The card says which regions it holds**, as ':state(has-media)', ':state(has-header)' and ':state(has-footer)', so a sheet can draw a card with a header differently, as Web Awesome's 'with-header' does, with no attribute written onto the card. Read in the browser, so a served card carries none until the script runs. */
+  /** The header, body, and footer regions are slots, because they have no state, behavior, or API of their own. You bring your own markup, so a title can be a real '<h2>'.  The host is the surface. The element itself takes the border, the radius, and the grid, so you style 'Card' directly and there is no wrapper part to reach through with '::part'.  Name the card with 'label', as a Stat Group is named, or with 'aria-label' or 'aria-labelledby'. 'label' is set through 'ElementInternals', so it writes no attribute onto the card. **A named card is a group**, so a reader entering it hears its name; an unnamed one has no role, since a group with no name only adds "group" to what a reader says.  **With none of those, a heading in 'header' names the card**, such as the '<h2>' of its title, by reference, so the name follows the heading's words. Reading a heading needs a DOM, so a served card is named by it once the script runs; 'label', 'aria-label' and 'aria-labelledby' are the names a server writes.  Each region's slot is a part of the same name, 'body' for the main content, as Web Awesome's card names its regions. A slot draws no box, so a part passes inherited properties to what is slotted, and a page wanting a box there gives it one with 'display'.  'header-actions' and 'footer-actions' hold controls at the end of the header's and the footer's line, as Web Awesome's card does. While one holds something, its line is a 'header-row' or 'footer-row' part; otherwise there is no wrapper and every region is a bare slot. A server cannot see slotted content, so a served card has no row; the styled tier sets served actions at the end of their line from the stylesheet alone, so they do not move when the script runs.  **The card says which regions it holds**, as ':state(has-media)', ':state(has-header)' and ':state(has-footer)', so a sheet can draw a card with a header differently, as Web Awesome's 'with-header' does, with no attribute written onto the card. Read in the browser, so a served card carries none until the script runs. */
   "helix-headless-card": DefineCustomElement<
     HelixHeadlessCard,
     HelixHeadlessCardVueProps,
@@ -16972,13 +17245,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessCheckboxVueProps,
     HelixHeadlessCheckboxVueEvents
   >;
-  /** Renders a '<pre><code>' pair: 'pre' keeps the whitespace, and 'code' marks it as code. Long lines scroll inside the block and do not wrap, because a line break can be significant in code.  A copy button is on by default. Set 'no-copy' to remove it. The button copies the slotted text, so there is no second copy of the code to keep in sync.  For a fragment of code inside a sentence, use 'Code'.  Set 'line-numbers' to number the lines in a gutter beside the code, hidden from the accessibility tree and left out of a copy. Set 'highlight' to a function that turns the code into highlighted markup, such as one wrapping Shiki or Prism, and the block draws what it returns; it is handed the block's 'language', so one function serves every block. The code stays in the slot, so the copy button and the page's own text are the code as written.  Set 'expandable' on a block whose height is capped, such as by '--code-block-max-block-size', and a button under it shows every line and then fewer again, as a docs site's long example does. The button is drawn only while the cap hides something, says whether the block is expanded with 'aria-expanded', names the block it opens with 'aria-controls', and the block carries ':state(expanded)' while it is.  Set 'diff' to show a change. Put a unified diff, the output of 'git diff' or 'diff -u', in the same slot, and the block draws the lines it added and removed. The block never computes a diff itself. Line numbers come from the hunk headers and are hidden from the accessibility tree. Changed lines are '<ins>' and '<del>' with the '+' and '-' kept as text, so the change does not depend on color. Each file in the patch is its own block under its own name, and its copy button copies the new version of the file. 'variant="split"' shows the old version beside the new, each removal opposite its replacement.  On the server, the slot renders as ordinary code, so a diff first appears as the patch text in a '<pre>'. The client makes the same first render, which keeps hydration clean, and draws the diff once it can read the content. Diff mode is experimental. The rest of the family is stable. */
+  /** Renders a '<pre><code>' pair: 'pre' keeps the whitespace, and 'code' marks it as code. Long lines scroll inside the block and do not wrap, because a line break can be significant in code.  A copy button is on by default. Set 'no-copy' to remove it. The button copies the slotted text, so there is no second copy of the code to keep in sync.  For a fragment of code inside a sentence, use 'Code'.  Set 'line-numbers' to number the lines in a gutter beside the code, hidden from the accessibility tree and left out of a copy. Set 'highlight' to a function that turns the code into highlighted markup, such as one wrapping Shiki or Prism, and the block draws what it returns; it is handed the block's 'language', so one function serves every block. The code stays in the slot, so the copy button and the page's own text are the code as written.  Set 'expandable' on a block whose height is capped, such as by '--code-block-max-block-size', and a button under it shows every line and then fewer again, as a docs site's long example does. The button is drawn only while the cap hides something, says whether the block is expanded with 'aria-expanded', names the block it opens with 'aria-controls', and the block carries ':state(expanded)' while it is.  Set 'diff' to show a change. Put a unified diff, the output of 'git diff' or 'diff -u', in the same slot, and the block draws the lines it added and removed. The block never computes a diff itself. Line numbers come from the hunk headers and are hidden from the accessibility tree. Changed lines are '<ins>' and '<del>' with the '+' and '-' kept as text, so the change does not depend on color. Each file in the patch is its own block under its own name, and its copy button copies the new version of the file. 'variant="split"' shows the old version beside the new, each removal opposite its replacement.  **A block that scrolls is a tab stop.** While its lines run past its width or its cap, the scroller is a region named for the block, such as "Code, app.ts", that Tab reaches, so a keyboard scrolls it with the arrow keys in every browser. Chromium and Firefox make a scrolling box focusable on their own, and Safari does not. A block that fits is no stop at all.  **The code the block draws is marked untranslated**, 'translate="no"' on its '<pre>', so a page translator leaves highlighted lines and a diff as written. Code in the slot takes its translation mode from the element, which writes nothing onto itself, so set 'translate="no"' on the element to keep a translator off plain code too.  On the server, the slot renders as ordinary code, so a diff first appears as the patch text in a '<pre>'. The client makes the same first render, which keeps hydration clean, and draws the diff once it can read the content. Diff mode is experimental. The rest of the family is stable. */
   "helix-headless-code-block": DefineCustomElement<
     HelixHeadlessCodeBlock,
     HelixHeadlessCodeBlockVueProps,
     HelixHeadlessCodeBlockVueEvents
   >;
-  /** Renders a real '<code>' element, which marks the text as code for translation tools and document search. A styled span carries no such meaning, and a screen reader announces nothing about it.  'Code' is inline only and never scrolls. For a block of code with its own box, its own overflow, and copying, use 'CodeBlock', which is a separate family. */
+  /** Renders a real '<code>' element, which marks the text as code for translation tools and document search. A styled span carries no such meaning, and a screen reader announces nothing about it.  **Set 'translate="no"' on the element to keep a page translator off the code.** A translator that rewrites prose would also rewrite an identifier. The slotted text takes its translation mode from the element, its parent in the page, and the element writes nothing onto itself, so the attribute is yours to set. The '<code>' inside carries 'translate="no"' for anything the element draws itself.  'Code' is inline only and never scrolls. For a block of code with its own box, its own overflow, and copying, use 'CodeBlock', which is a separate family. */
   "helix-headless-code": DefineCustomElement<
     HelixHeadlessCode,
     HelixHeadlessCodeVueProps,
@@ -17080,7 +17353,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessDrilldownVueProps,
     HelixHeadlessDrilldownVueEvents
   >;
-  /** Shows what would be in a region and the one action that would fill it, so an empty region does not look like one that failed to load.  The message is announced, because an empty view often replaces content that was loading, and the announcement tells a screen reader user that the search returned nothing. It is announced from a status region of its own, which is rendered empty and filled a frame after the view appears. Screen readers read a region that arrives with its text already in it inconsistently. For the seven seconds the region holds its copy, the heading and the message are hidden from screen readers, so the words are in the page once.  Every region is a bare slot. There is no 'empty-state-heading' or 'empty-state-actions' element: assign your own heading and actions to the slots.  **Or give the heading as words.** 'heading' draws them in a 'heading' part that is a heading at 'heading-level', 3 where it is not set, so a page rendering from data or on a server gets a heading a reader finds in the outline without writing the element. A heading slotted in replaces it.  **Whatever is slotted into 'heading' is read as a heading.** An element that is no heading, such as a '<span>' or a '<p>', is set inside the 'heading' part at 'heading-level', so a screen reader still finds it in the outline. A heading element, or an element holding one, keeps its own level. A server cannot see the slotted element, so a served '<span>' becomes a heading once the script runs. */
+  /** Shows what would be in a region and the one action that would fill it, so an empty region does not look like one that failed to load.  The message is announced, because an empty view often replaces content that was loading, and the announcement tells a screen reader user that the search returned nothing. It is announced from a status region of its own, which is rendered empty and filled a frame after the view appears. Screen readers read a region that arrives with its text already in it inconsistently. For the seven seconds the region holds its copy, the heading and the message are hidden from screen readers, so the words are in the page once.  Every region is a bare slot. There is no 'empty-state-heading' or 'empty-state-actions' element: assign your own heading and actions to the slots. The icon, the message and the actions slots are parts of the same names, as Card's regions are. A slot draws no box, so a part passes inherited properties, such as color and font, to what is slotted, and a page wanting a box there gives it one with 'display', such as a row of actions with 'display: flex'.  **The view says which regions it holds**, as ':state(has-icon)' and ':state(has-actions)', so a sheet can space a view with no icon or no actions differently. Read in the browser, so a served view carries neither until the script runs.  **Or give the heading as words.** 'heading' draws them in a 'heading' part that is a heading at 'heading-level', 3 where it is not set, so a page rendering from data or on a server gets a heading a reader finds in the outline without writing the element. A heading slotted in replaces it.  **Whatever is slotted into 'heading' is read as a heading.** An element that is no heading, such as a '<span>' or a '<p>', is set inside the 'heading' part at 'heading-level', so a screen reader still finds it in the outline. A heading element, or an element holding one, keeps its own level. A server cannot see the slotted element, so a served '<span>' becomes a heading once the script runs. */
   "helix-headless-empty": DefineCustomElement<
     HelixHeadlessEmpty,
     HelixHeadlessEmptyVueProps,
@@ -17146,7 +17419,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessIconButtonVueProps,
     HelixHeadlessIconButtonVueEvents
   >;
-  /** The icons are Phosphor, drawn on a 256 box at stroke-width 16. Each glyph renders its full inner markup, because most icons are several elements, each with its own stroke and fill.  The markup is generated at build time from SVG files in this repository and never comes from user input, so rendering it with 'unsafeSVG' is safe.  The '<svg>' carries 'fill="currentColor"'. The generator keeps only the inner markup, and Phosphor sets its fill on the root tag that the generator discards. Without it, the 65 solid glyphs fall back to black and disappear on a dark background. Shapes that set their own 'fill' or 'stroke' are unaffected.  **A name is looked up in a registry.** The family's entry registers the whole set, so any name in it draws. The element's own entry, '@fusion.dev/helix-headless/icon/root', registers none: a page that imports it and calls 'registerIcons' with the glyphs it names ships those and no others. 'registerIconLibrary' resolves names under a prefix of your own, such as 'lucide:camera', at once or later, and the element fires 'load' when a glyph that came later is drawn. A glyph registered after the element rendered is drawn then.  A name with no match renders nothing, and the element fires 'error', so a typo in a name can be heard. It waits until the page has loaded and painted first, so a library a later module registers is not taken for a typo.  An icon is decorative by default and hidden from assistive technology. Set 'label' only when the icon is the only carrier of meaning, such as in a button with no text. An 'aria-label' on the element works too: the element is then an image with that name.  **A decorative icon that is all a control holds is reported.** In a development build, a button or a link whose only content is an icon with no 'label', and which has no name of its own, warns 'missing-name' once, through the runtime channel every Helix warning uses. */
+  /** The icons are Phosphor, drawn on a 256 box at stroke-width 16. Each glyph renders its full inner markup, because most icons are several elements, each with its own stroke and fill.  The markup is generated at build time from SVG files in this repository and never comes from user input, so rendering it with 'unsafeSVG' is safe.  The '<svg>' carries 'fill="currentColor"'. The generator keeps only the inner markup, and Phosphor sets its fill on the root tag that the generator discards. Without it, the 65 solid glyphs fall back to black and disappear on a dark background. Shapes that set their own 'fill' or 'stroke' are unaffected.  **A name is looked up in a registry.** The family's entry registers the whole set, so any name in it draws. The element's own entry, '@fusion.dev/helix-headless/icon/root', registers none: a page that imports it and calls 'registerIcons' with the glyphs it names ships those and no others. 'registerIconLibrary' resolves names under a prefix of your own, such as 'lucide:camera', at once or later, and the element fires 'load' when a glyph that came later is drawn. A glyph registered after the element rendered is drawn then.  **Or point 'src' at an SVG file**, such as 'src="/icons/rocket.svg"', and the element fetches it and draws its shapes in 'currentColor' where the file does not color them. A file is fetched once a page, however many icons name it, and 'load' fires when it is drawn. Scripts, event handlers and 'javascript:' links in the file are taken out before it is drawn. A server fetches nothing, so a served icon with a 'src' is drawn once the script runs.  A name with no match, or a 'src' that is no SVG, renders nothing, and the element fires 'error', so a typo in a name can be heard. It waits until the page has loaded and painted first, so a library a later module registers is not taken for a typo.  An icon is decorative by default and hidden from assistive technology. Set 'label' only when the icon is the only carrier of meaning, such as in a button with no text. An 'aria-label' on the element works too: the element is then an image with that name.  **A decorative icon that is all a control holds is reported.** In a development build, a button or a link whose only content is an icon with no 'label', and which has no name of its own, warns 'missing-name' once, through the runtime channel every Helix warning uses. */
   "helix-headless-icon": DefineCustomElement<
     HelixHeadlessIcon,
     HelixHeadlessIconVueProps,
@@ -17188,7 +17461,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. */
+  /** 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. */
   "helix-headless-line-chart": DefineCustomElement<
     HelixHeadlessLineChart,
     HelixHeadlessLineChartVueProps,
@@ -17212,7 +17485,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.  **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)'. */
   "helix-headless-loader": DefineCustomElement<
     HelixHeadlessLoader,
     HelixHeadlessLoaderVueProps,
@@ -17404,7 +17677,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessPopoverVueProps,
     HelixHeadlessPopoverVueEvents
   >;
-  /** Determinate by default. Set 'indeterminate' for a task whose total is not known yet. Use 'Loader' for a short wait or one with no place of its own on the page.  The indeterminate bar runs a segment across the track and does not fill, so it shows that work is happening without claiming a proportion. 'aria-valuenow' is omitted in that state, which is the platform's signal for the same thing.  The fill is a fraction of the track, written as a custom property.  **Reaching 'max' is said and sent.** When the value arrives at 'max' from below, the bar says 'complete-label', "Complete" by default, in a polite 'live' region and sends 'helix-complete', so a reader hears that the work is done and a page can move on. A bar that starts full says nothing, and an empty 'complete-label' keeps it quiet. The 'complete' custom state is set while the bar is full. */
+  /** Determinate by default. Set 'indeterminate' for a task whose total is not known yet. Use 'Loader' for a short wait or one with no place of its own on the page.  The indeterminate bar runs a segment across the track and does not fill, so it shows that work is happening without claiming a proportion. 'aria-valuenow' is omitted in that state, which is the platform's signal for the same thing.  The fill is a fraction of the track, written as a custom property.  **The reading is said in the words the bar would show**: a whole percentage of the range in 'locale', the reading 'format-options' writes, or 'value-text', as 'aria-valuetext' beside the number.  **Words set in the default slot are drawn on the bar**, or in the middle of a ring, such as '62%' or '3 of 8', and are what the bar says as its reading where 'value-text' is not set. While there are any, the bar carries ':state(content)', so a sheet can make room for them.  **Reaching 'max' is said and sent.** When the value arrives at 'max' from below, the bar says 'complete-label', "Complete" by default, in a polite 'live' region and sends 'helix-complete', so a reader hears that the work is done and a page can move on. A bar that starts full says nothing, and an empty 'complete-label' keeps it quiet. The 'complete' custom state is set while the bar is full. */
   "helix-headless-progress": DefineCustomElement<
     HelixHeadlessProgress,
     HelixHeadlessProgressVueProps,
@@ -17416,7 +17689,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessQrCodeVueProps,
     HelixHeadlessQrCodeVueEvents
   >;
-  /** Renders a real '<q>', so the browser supplies the quotation marks. It inserts the correct marks for the document's language and nests them correctly when one quotation sits inside another. Do not type quotation marks into the content: one that starts or ends with a typed mark warns once, with the runtime kind 'typed-marks'. A quotation in a language other than the page's takes 'lang' on the element, and its marks follow it: 'lang="de"' sets „…“ and 'lang="fr"' «…» inside an English page.  For a passage set off from the surrounding text, use a blockquote. */
+  /** Renders a real '<q>', so the browser supplies the quotation marks. It inserts the correct marks for the document's language and nests them correctly when one quotation sits inside another. Do not type quotation marks into the content: one that starts or ends with a typed mark warns once, with the runtime kind 'typed-marks'. A quotation in a language other than the page's takes 'lang' on the element, and its marks follow it: 'lang="de"' sets „…“ and 'lang="fr"' «…» inside an English page.  **'no-marks' leaves the marks off**, for a quotation set where the page draws its own, such as a pull quote with a large decorative mark beside it or a table of sayings. The quotation still counts toward nesting, so a quote inside it takes the inner marks it would have had. Text with marks typed into it raises no warning under 'no-marks'.  For a passage set off from the surrounding text, use a blockquote. */
   "helix-headless-quote": DefineCustomElement<
     HelixHeadlessQuote,
     HelixHeadlessQuoteVueProps,
@@ -17440,7 +17713,7 @@ export interface WcToolkitVueGlobalComponents {
     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. */
+  /** 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. */
   "helix-headless-scatter-chart": DefineCustomElement<
     HelixHeadlessScatterChart,
     HelixHeadlessScatterChartVueProps,
@@ -17506,13 +17779,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessSplitterVueProps,
     HelixHeadlessSplitterVueEvents
   >;
-  /** Screen readers announce the stats as a group. The figures are read together and their order has no meaning, so the group does not announce positions such as "1 of 4". */
+  /** **A named group is a group**, so a screen reader announces the stats together under its name, such as "Usage, group". Name it with 'label', 'aria-label' or 'aria-labelledby'. An unnamed one has no role, since a group with no name only adds "group" to what a reader says, as an unnamed Card has none. The figures are read together and their order has no meaning, so the group does not announce positions such as "1 of 4". */
   "helix-headless-stat-group": DefineCustomElement<
     HelixHeadlessStatGroup,
     HelixHeadlessStatGroupVueProps,
     HelixHeadlessStatGroupVueEvents
   >;
-  /** The label comes first in the markup and the value after it, so a screen reader reads what the figure counts before the number. Visually, the number stands out either way.  Both are bare slots. An element that assigned itself a slot on connect would add an attribute after upgrade, which markup rendered on the server by React does not have.  **A stat with a label is a group named by it**, so a reader moving through a dashboard hears "Revenue, group" and then the figure, its unit and its trend as one reading, rather than a run of loose words. The role and the name are set through 'ElementInternals' once the label is known, which writes no attribute; a stat with no label has no role. Put a 'Trend' in the 'trend' slot to have it read inside the group, after the figure it qualifies. */
+  /** The label comes first in the markup and the value after it, so a screen reader reads what the figure counts before the number. Visually, the number stands out either way.  Both are bare slots. An element that assigned itself a slot on connect would add an attribute after upgrade, which markup rendered on the server by React does not have.  **A stat with a label is a group named by it**, so a reader moving through a dashboard hears "Revenue, group" and then the figure, its unit and its trend as one reading, rather than a run of loose words. The role and the name are set through 'ElementInternals' once the label is known, which writes no attribute; a stat with no label has no role. Put a 'Trend' in the 'trend' slot to have it read inside the group, after the figure it qualifies.  **Or give the figure as a number.** 'value' is written with 'Intl.NumberFormat', in 'locale' and with 'format-options', so 'value="1234567" format-options='{"notation":"compact"}'' shows '1.2M', and a server writes it as the browser does. A number in 'value' takes the place of a slotted figure.  **Each slot is a part of the same name**, and 'value' for the figure, so a page reaches the label, the unit and the trend from outside. A slot draws no box, so a part passes inherited properties to what is slotted. **The stat says which pieces it holds**, as ':state(has-label)', ':state(has-unit)' and ':state(has-trend)', read in the browser, so a served stat carries none until the script runs. */
   "helix-headless-stat": DefineCustomElement<
     HelixHeadlessStat,
     HelixHeadlessStatVueProps,