@fusion.dev/helix-headless 0.150.0 → 0.152.0

package/types/vue.d.ts

@@ -175,6 +175,8 @@ import type {
   ToggleEvent,
   HelixDismissEvent,
   HelixScrolledEvent,
+  HelixReadingChangeEvent,
+  HelixReadingPressEvent,
   HelixBeforeChangeEvent,
   HelixPressEvent,
   HelixBeforeMoveEvent,
@@ -561,6 +563,22 @@ the wordmark and the actions happen to measure.
 takes a search field or a breadcrumb trail as readily as a `Navigation`, so
 the property carries the part's name, `content`. */
   contentAlign?: (HelixHeadlessAppHeader["contentAlign"]) | undefined;
+  /** The width of the bar, in pixels, below which the middle region folds behind
+a toggle. Unset, it never folds. */
+  "fold-below"?: (HelixHeadlessAppHeader["foldBelow"] | `${number}`) | undefined;
+  /** The width of the bar, in pixels, below which the middle region folds behind
+a toggle. Unset, it never folds. */
+  foldBelow?: (HelixHeadlessAppHeader["foldBelow"]) | undefined;
+  /** Hides the bar as the page scrolls down past it, and shows it again as the
+page scrolls up. */
+  "hide-on-scroll"?: (HelixHeadlessAppHeader["hideOnScroll"]) | undefined;
+  /** Hides the bar as the page scrolls down past it, and shows it again as the
+page scrolls up. */
+  hideOnScroll?: (HelixHeadlessAppHeader["hideOnScroll"]) | undefined;
+  /** The name of the toggle that opens a folded middle region. */
+  "menu-label"?: (HelixHeadlessAppHeader["menuLabel"]) | undefined;
+  /** The name of the toggle that opens a folded middle region. */
+  menuLabel?: (HelixHeadlessAppHeader["menuLabel"]) | undefined;
   /** The id of the element whose scrolling lifts the bar, for an app shell that
 scrolls a container instead of the window. Unset is the window. */
   scroller?: (HelixHeadlessAppHeader["scroller"]) | undefined;
@@ -571,6 +589,18 @@ export type HelixHeadlessAppHeaderVueEvents = {
   "helix-scrolled": HelixHeadlessAppHeaderHelixScrolledElementEvent;
 };
 
+/** `HelixHeadlessAreaChart` component event */
+export type HelixHeadlessAreaChartElementEvent<E = Event> = TypedEvent<
+  HelixHeadlessAreaChart,
+  E
+>;
+/** `helix-reading-change` event type */
+export type HelixHeadlessAreaChartHelixReadingChangeElementEvent =
+  HelixHeadlessAreaChartElementEvent<HelixReadingChangeEvent>;
+/** `helix-reading-press` event type */
+export type HelixHeadlessAreaChartHelixReadingPressElementEvent =
+  HelixHeadlessAreaChartElementEvent<HelixReadingPressEvent>;
+
 export type HelixHeadlessAreaChartVueProps = {
   /** How a band's edge gets from one reading to the next.
 
@@ -621,6 +651,18 @@ locale, and `{shares}` each part's share, listed as the locale lists. */
   "total-label"?: (HelixHeadlessAreaChart["totalLabel"]) | undefined;
   /** The name for the sum of the parts, shown in the tooltip and the summary. */
   totalLabel?: (HelixHeadlessAreaChart["totalLabel"]) | undefined;
+  /** Draws the scale's numbers beside the plot, the `axis` part, at the levels
+`gridlines` rules: amounts, or percentages under `share`.
+
+Absent draws none: bands read as a composition need no numbers beside
+them, and the tooltip and the table hold every reading. */
+  "value-axis"?: (HelixHeadlessAreaChart["valueAxis"]) | undefined;
+  /** Draws the scale's numbers beside the plot, the `axis` part, at the levels
+`gridlines` rules: amounts, or percentages under `share`.
+
+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 id of the table to read.
 
 Names a table in the same tree, so a chart inside another component's
@@ -659,7 +701,12 @@ legend hid is not counted. */
   positionLabel?: (HelixHeadlessAreaChart["positionLabel"]) | undefined;
 };
 
-export type HelixHeadlessAreaChartVueEvents = {};
+export type HelixHeadlessAreaChartVueEvents = {
+  /** The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it. */
+  "helix-reading-change": HelixHeadlessAreaChartHelixReadingChangeElementEvent;
+  /** A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`. */
+  "helix-reading-press": HelixHeadlessAreaChartHelixReadingPressElementEvent;
+};
 
 export type HelixHeadlessAvatarGroupVueProps = {
   /** Accessible name for the set, such as "Reviewers". */
@@ -818,6 +865,18 @@ is showing a count must not lose the count for being handed one. */
 
 export type HelixHeadlessBadgeVueEvents = {};
 
+/** `HelixHeadlessBarChart` component event */
+export type HelixHeadlessBarChartElementEvent<E = Event> = TypedEvent<
+  HelixHeadlessBarChart,
+  E
+>;
+/** `helix-reading-change` event type */
+export type HelixHeadlessBarChartHelixReadingChangeElementEvent =
+  HelixHeadlessBarChartElementEvent<HelixReadingChangeEvent>;
+/** `helix-reading-press` event type */
+export type HelixHeadlessBarChartHelixReadingPressElementEvent =
+  HelixHeadlessBarChartElementEvent<HelixReadingPressEvent>;
+
 export type HelixHeadlessBarChartVueProps = {
   /** Which gridlines are drawn across the plot, if any.
 
@@ -928,6 +987,20 @@ the reading as the table writes it. */
 `{readings}` each series' highest reading: the series, the category and
 the reading as the table writes it. */
   summaryLabel?: (HelixHeadlessBarChart["summaryLabel"]) | undefined;
+  /** Draws the numbers of the scale the bars are measured on, the `axis` part,
+at the levels `gridlines` rules: down the side of columns, and along the
+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. */
+  "value-axis"?: (HelixHeadlessBarChart["valueAxis"]) | undefined;
+  /** Draws the numbers of the scale the bars are measured on, the `axis` part,
+at the levels `gridlines` rules: down the side of columns, and along the
+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 id of the table to read.
 
 Names a table in the same tree, so a chart inside another component's
@@ -966,7 +1039,12 @@ legend hid is not counted. */
   positionLabel?: (HelixHeadlessBarChart["positionLabel"]) | undefined;
 };
 
-export type HelixHeadlessBarChartVueEvents = {};
+export type HelixHeadlessBarChartVueEvents = {
+  /** The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it. */
+  "helix-reading-change": HelixHeadlessBarChartHelixReadingChangeElementEvent;
+  /** A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`. */
+  "helix-reading-press": HelixHeadlessBarChartHelixReadingPressElementEvent;
+};
 
 export type HelixHeadlessBlockquoteVueProps = {
   /** Who said it, and where, as words, such as "Maria Lopez, operations
@@ -1311,6 +1389,22 @@ export type HelixHeadlessCalloutHelixDismissElementEvent =
   HelixHeadlessCalloutElementEvent<HelixDismissEvent>;
 
 export type HelixHeadlessCalloutVueProps = {
+  /** The dismiss button's name, read by screen readers, with `{label}` for
+what the callout is called: its heading, or the tone's name where it has
+none.
+
+"Dismiss Scheduled maintenance" says which of several callouts the button
+takes away, where every button was "Dismiss". A label without `{label}` is
+read as written. */
+  "dismiss-label"?: (HelixHeadlessCallout["dismissLabel"]) | undefined;
+  /** The dismiss button's name, read by screen readers, with `{label}` for
+what the callout is called: its heading, or the tone's name where it has
+none.
+
+"Dismiss Scheduled maintenance" says which of several callouts the button
+takes away, where every button was "Dismiss". A label without `{label}` is
+read as written. */
+  dismissLabel?: (HelixHeadlessCallout["dismissLabel"]) | undefined;
   /** What kind of attention the passage needs.
 
 `tone` is the axis for what a thing means, and this is a subset of it: a
@@ -1344,28 +1438,6 @@ out keeps its English, and `tone-label` wins over both.
   toneLabels?: (HelixHeadlessCallout["toneLabels"]) | undefined;
   /** Whether the element shows a control that dismisses it. */
   dismissible?: (HelixHeadlessCallout["dismissible"]) | undefined;
-  /** The dismiss control's label, read by screen readers.
-
-`attribute` is spelled out because Lit lowercases a property name to
-derive one rather than dash-casing it, so this would otherwise be
-reachable only as `dismisslabel`, which nobody would guess and no linter
-would catch.
-
-A word property: register it for a locale under the host's key. A family
-that names the control otherwise, such as Tag's `Remove {label}`,
-declares its own English with `@words` above the override. */
-  "dismiss-label"?: (HelixHeadlessCallout["dismissLabel"]) | undefined;
-  /** The dismiss control's label, read by screen readers.
-
-`attribute` is spelled out because Lit lowercases a property name to
-derive one rather than dash-casing it, so this would otherwise be
-reachable only as `dismisslabel`, which nobody would guess and no linter
-would catch.
-
-A word property: register it for a locale under the host's key. A family
-that names the control otherwise, such as Tag's `Remove {label}`,
-declares its own English with `@words` above the override. */
-  dismissLabel?: (HelixHeadlessCallout["dismissLabel"]) | undefined;
 };
 
 export type HelixHeadlessCalloutVueEvents = {
@@ -2304,8 +2376,21 @@ export type HelixHeadlessChatComposerHelixTypingElementEvent =
 export type HelixHeadlessChatComposerVueProps = {
   /** The field's name, read by screen readers. */
   label?: (HelixHeadlessChatComposer["label"]) | undefined;
+  /** The most characters a draft can have. The field stops taking more. */
+  maxlength?: (HelixHeadlessChatComposer["maxLength"] | `${number}`) | undefined;
+  /** The most characters a draft can have. The field stops taking more. */
+  maxLength?: (HelixHeadlessChatComposer["maxLength"]) | undefined;
+  /** The fewest characters a draft can have, once the reader has written in
+the field, as on a `<textarea>`. */
+  minlength?: (HelixHeadlessChatComposer["minLength"] | `${number}`) | undefined;
+  /** The fewest characters a draft can have, once the reader has written in
+the field, as on a `<textarea>`. */
+  minLength?: (HelixHeadlessChatComposer["minLength"]) | undefined;
   /** Placeholder text shown in an empty field. */
   placeholder?: (HelixHeadlessChatComposer["placeholder"]) | undefined;
+  /** Whether the form needs a draft to submit. An empty draft never sends,
+required or not. */
+  required?: (HelixHeadlessChatComposer["required"]) | undefined;
   /** How many rows the field opens at.
 
 It grows from there. */
@@ -4481,6 +4566,20 @@ rows are chosen, written in the locale, and a language that needs plural
 forms writes them: `{count, plural, one {# wybrany} few {# wybrane} many
 {# wybranych} other {# wybranego}}`. */
   selectedLabel?: (HelixHeadlessDataTable["selectedLabel"]) | undefined;
+  /** What a key or a press on a row does to the rows already selected, in a
+`selectable` table. `toggle`, the default, keeps them: Space adds or takes
+out the row. `replace` selects the row alone, as a file list does: Down and
+Up carry the selection with them, and a press on a row selects it. Control
+or Command with a press or Space adds or takes out one row, and with a move
+goes without selecting. The checkboxes add or take out one row either way. */
+  "selection-behavior"?: (HelixHeadlessDataTable["selectionBehavior"]) | undefined;
+  /** What a key or a press on a row does to the rows already selected, in a
+`selectable` table. `toggle`, the default, keeps them: Space adds or takes
+out the row. `replace` selects the row alone, as a file list does: Down and
+Up carry the selection with them, and a press on a row selects it. Control
+or Command with a press or Space adds or takes out one row, and with a move
+goes without selecting. The checkboxes add or take out one row either way. */
+  selectionBehavior?: (HelixHeadlessDataTable["selectionBehavior"]) | undefined;
   /** The name of a row's checkbox. `{row}` is replaced with the row's value in
 the first column that has a field, or with its key. */
   "select-row-label"?: (HelixHeadlessDataTable["selectRowLabel"]) | undefined;
@@ -5432,8 +5531,14 @@ first, `handleCancel` prevents it, and `requestOpen` decides. So
 `closedby="any"` gains light dismiss without giving up the refusal, which is
 the property this component exists to keep.
 
+The press on the backdrop that this element handles itself follows it too:
+`closerequest` and `none` leave the dialog open on that press, as the
+platform does, and `none` also keeps it open on Escape in a browser without
+`closedby`.
+
 Absent by default, which is the platform's `auto` and this library's rule
-that a resting value is an attribute's absence. */
+that a resting value is an attribute's absence. Absent, a press on the
+backdrop closes the dialog. */
   closedby?: (HelixHeadlessDialog["closedBy"]) | undefined;
   /** Which close requests the browser handles on its own.
 
@@ -5443,8 +5548,14 @@ first, `handleCancel` prevents it, and `requestOpen` decides. So
 `closedby="any"` gains light dismiss without giving up the refusal, which is
 the property this component exists to keep.
 
+The press on the backdrop that this element handles itself follows it too:
+`closerequest` and `none` leave the dialog open on that press, as the
+platform does, and `none` also keeps it open on Escape in a browser without
+`closedby`.
+
 Absent by default, which is the platform's `auto` and this library's rule
-that a resting value is an attribute's absence. */
+that a resting value is an attribute's absence. Absent, a press on the
+backdrop closes the dialog. */
   closedBy?: (HelixHeadlessDialog["closedBy"]) | undefined;
   /** Draws a control that closes the dialog, in the corner where the title is.
 
@@ -5519,11 +5630,7 @@ export type HelixHeadlessDialogVueEvents = {
 
 export type HelixHeadlessDividerVueProps = {
   /** Whether screen readers announce the line as a separator, which they now do
-by default.
-
-It dates from when the line was decorative by default. It is still read,
-and it wins over `decorative`, so a divider written with it stays a
-separator. */
+by default. */
   announced?: (HelixHeadlessDivider["announced"]) | undefined;
   /** Takes the line out of the accessibility tree, for a rule that separates
 nothing: one under a heading, or between the facts of a byline.
@@ -5715,6 +5822,12 @@ lost its focus trap because a consumer forgot a word would be worse than an
 attribute on the host, and nothing selects on it: the scrim is rendered or
 not, rather than shown or hidden by CSS. */
   modal?: (HelixHeadlessDrawer["modal"]) | undefined;
+  /** Stops Escape, a press outside, and a swipe from closing the drawer, for a
+drawer that has to be answered.
+
+The close control and `close()` still close it, as on `Dialog`: a panel
+with no way out at all is a trap. */
+  persistent?: (HelixHeadlessDrawer["persistent"]) | undefined;
   /** Which edge the drawer comes from.
 
 Unset is `end`, and it stays unset rather than being written down: a
@@ -8000,6 +8113,18 @@ export type HelixHeadlessLightboxVueEvents = {
   toggle: HelixHeadlessLightboxToggleElementEvent;
 };
 
+/** `HelixHeadlessLineChart` component event */
+export type HelixHeadlessLineChartElementEvent<E = Event> = TypedEvent<
+  HelixHeadlessLineChart,
+  E
+>;
+/** `helix-reading-change` event type */
+export type HelixHeadlessLineChartHelixReadingChangeElementEvent =
+  HelixHeadlessLineChartElementEvent<HelixReadingChangeEvent>;
+/** `helix-reading-press` event type */
+export type HelixHeadlessLineChartHelixReadingPressElementEvent =
+  HelixHeadlessLineChartElementEvent<HelixReadingPressEvent>;
+
 export type HelixHeadlessLineChartVueProps = {
   /** Draws a wash under each line, down to the floor of the plot. The washes
 overlap and do not add up, so for parts that make a total, use
@@ -8101,6 +8226,20 @@ masked with one disc per series and every stroke stops at its own ring's
 inner edge. `mask-composite: intersect` is what makes N holes out of N
 layers; a single `mask-image` would only ever cut the last one. */
   terminus?: (HelixHeadlessLineChart["terminus"]) | undefined;
+  /** Draws the scale's numbers beside the plot, the `axis` part, at the levels
+`gridlines` rules, so a reading can be measured off the drawing as well
+as read from the tooltip.
+
+Absent draws none: a line read for its shape needs no numbers beside it,
+and the tooltip and the table hold every reading. */
+  "value-axis"?: (HelixHeadlessLineChart["valueAxis"]) | undefined;
+  /** Draws the scale's numbers beside the plot, the `axis` part, at the levels
+`gridlines` rules, so a reading can be measured off the drawing as well
+as read from the tooltip.
+
+Absent draws none: a line read for its shape needs no numbers beside it,
+and the tooltip and the table hold every reading. */
+  valueAxis?: (HelixHeadlessLineChart["valueAxis"]) | undefined;
   /** Whether the range always includes zero.
 
 Absent measures from the data's own extent, which is what a line is for.
@@ -8146,7 +8285,12 @@ legend hid is not counted. */
   positionLabel?: (HelixHeadlessLineChart["positionLabel"]) | undefined;
 };
 
-export type HelixHeadlessLineChartVueEvents = {};
+export type HelixHeadlessLineChartVueEvents = {
+  /** The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it. */
+  "helix-reading-change": HelixHeadlessLineChartHelixReadingChangeElementEvent;
+  /** A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`. */
+  "helix-reading-press": HelixHeadlessLineChartHelixReadingPressElementEvent;
+};
 
 /** `HelixHeadlessListItem` component event */
 export type HelixHeadlessListItemElementEvent<E = Event> = TypedEvent<
@@ -11872,6 +12016,18 @@ export type HelixHeadlessRatingVueEvents = {
   input: HelixHeadlessRatingElementEvent;
 };
 
+/** `HelixHeadlessScatterChart` component event */
+export type HelixHeadlessScatterChartElementEvent<E = Event> = TypedEvent<
+  HelixHeadlessScatterChart,
+  E
+>;
+/** `helix-reading-change` event type */
+export type HelixHeadlessScatterChartHelixReadingChangeElementEvent =
+  HelixHeadlessScatterChartElementEvent<HelixReadingChangeEvent>;
+/** `helix-reading-press` event type */
+export type HelixHeadlessScatterChartHelixReadingPressElementEvent =
+  HelixHeadlessScatterChartElementEvent<HelixReadingPressEvent>;
+
 export type HelixHeadlessScatterChartVueProps = {
   /** The word for the strength of the relation, `{correlationLabel}` in
 `series-label`. */
@@ -11970,7 +12126,12 @@ legend hid is not counted. */
   positionLabel?: (HelixHeadlessScatterChart["positionLabel"]) | undefined;
 };
 
-export type HelixHeadlessScatterChartVueEvents = {};
+export type HelixHeadlessScatterChartVueEvents = {
+  /** The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it. */
+  "helix-reading-change": HelixHeadlessScatterChartHelixReadingChangeElementEvent;
+  /** A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`. */
+  "helix-reading-press": HelixHeadlessScatterChartHelixReadingPressElementEvent;
+};
 
 /** `HelixHeadlessScrollArea` component event */
 export type HelixHeadlessScrollAreaElementEvent<E = Event> = TypedEvent<
@@ -12838,6 +12999,9 @@ Reading gives where it is; writing declares it the consumer's, and
 `default-position` seeds one this element owns. The same accessor pair
 `Pagination.page` and the calendar's `month` carry. */
   position?: (HelixHeadlessSplitter["position"]) | undefined;
+  /** The pane that keeps its size when the splitter's own size changes. The
+other pane takes all of the change. Unset, both keep their share. */
+  primary?: (HelixHeadlessSplitter["primary"]) | undefined;
   /** Where a dragged divider snaps, comma separated, as Web Awesome's split
 panel does: a bare number is a percentage and a length such as `240px` is
 measured along the splitter, so `snap="25, 50, 75"` or `snap="240px, 50"`.
@@ -13565,6 +13729,13 @@ export type HelixHeadlessTableVueEvents = {
 };
 
 export type HelixHeadlessTableRowVueProps = {
+  /** Takes the row out of the table's selection and out of its link: the row's
+checkbox is disabled, Space, Shift ranges, and the checkbox in the heading
+pass over it, and a press does not follow `href`. A row already selected
+stays selected. A screen reader hears it as unavailable, and in a `grid`
+table the arrow keys still reach it, as a disabled cell in a grid is
+reached. */
+  disabled?: (HelixHeadlessTableRow["disabled"]) | undefined;
   /** The URL a press on the row follows, which makes the whole row a link.
 Empty, the default, leaves presses to the row's cells. */
   href?: (HelixHeadlessTableRow["href"]) | undefined;
@@ -16104,6 +16275,14 @@ regardless, because a reader who stopped it is deciding what to do next. */
   loadingLabel?: (HelixHeadlessVideo["loadingLabel"]) | undefined;
   /** Whether the video starts again at the end. */
   loop?: (HelixHeadlessVideo["loop"]) | undefined;
+  /** The title the device's own media controls show while the video plays,
+such as on a lock screen. Empty, the default, shows `label`. A playlist
+writes the current entry's name here. */
+  "media-title"?: (HelixHeadlessVideo["mediaTitle"]) | undefined;
+  /** The title the device's own media controls show while the video plays,
+such as on a lock screen. Empty, the default, shows `label`. A playlist
+writes the current entry's name here. */
+  mediaTitle?: (HelixHeadlessVideo["mediaTitle"]) | undefined;
   /** What the button that opens `overflow-controls` is called. */
   "more-label"?: (HelixHeadlessVideo["moreLabel"]) | undefined;
   /** What the button that opens `overflow-controls` is called. */
@@ -16362,6 +16541,12 @@ export type HelixHeadlessVirtualListVueProps = {
 items out as a grid of that many equal columns, windowed a line at a
 time, with Left and Right moving along a line. */
   columns?: (HelixHeadlessVirtualList["columns"]) | undefined;
+  /** The text of the row shown when there are no items and none are loading,
+where the `empty` slot is empty. Empty, the default, shows no row. */
+  "empty-label"?: (HelixHeadlessVirtualList["emptyLabel"]) | undefined;
+  /** The text of the row shown when there are no items and none are loading,
+where the `empty` slot is empty. Empty, the default, shows no row. */
+  emptyLabel?: (HelixHeadlessVirtualList["emptyLabel"]) | undefined;
   /** The height of one row, in pixels, used to find the row at a scroll offset.
 
 An estimate rather than a measurement while `measured` is off, which is
@@ -16455,6 +16640,8 @@ export type HelixHeadlessVirtualListVueEvents = {
 export type CustomCssProperties = {
   /** The height of the content, in pixels, written on the `content` part while the section is open. */
   "--accordion-content-height"?: (string) | undefined;
+  /** The width of the axis, in `ch`, set from the widest number on it. Written by the component on the axis. */
+  "--area-chart-axis"?: (string) | undefined;
   /** The width of an axis, in `ch`, set from the widest number on it. The chart sets it on the axis itself, and only when the categories run along the bottom. In a horizontal chart the axis is a row, one line high. */
   "--bar-chart-axis"?: (string) | undefined;
   /** The color of the secondary axis, when one series is on it. The chart sets it from that series' `--chart-series-*` property, so the axis is drawn in whatever color that property resolves to. */
@@ -16535,6 +16722,8 @@ export type CustomCssProperties = {
   "--chart-terminus-x"?: (string) | undefined;
   /** Where a series' last reading sits vertically, as a percentage. Written by the component. */
   "--chart-terminus-y"?: (string) | undefined;
+  /** The width of the axis, in `ch`, set from the widest number on it. Written by the component on the axis. */
+  "--line-chart-axis"?: (string) | undefined;
   /** The number of the first row, written where `start` or `reversed` moves it. */
   "--list-first"?: (string) | undefined;
   /** What each row adds to the number before it: `1`, or `-1` where `reversed`. */
@@ -16651,13 +16840,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessAnnouncementVueProps,
     HelixHeadlessAnnouncementVueEvents
   >;
-  /** Tracks whether the page has scrolled and sets the custom state 'scrolled', so the styled tier can lift the bar without a scroll handler of its own. The state is read when the element connects. A fresh load starts at the top, which matches the server markup, and a reload partway down the page is corrected on hydration.  The element uses a custom state because an attribute such as 'data-scrolled', written onto its own host, is one the server did not send. A hydrating framework would report a mismatch whenever the page reloads far enough down. 'ElementInternals.states' is not in the DOM, so hydration has nothing to compare. Select the state with ':state(scrolled)'.  The page is the window unless 'scroller' names the element that scrolls, for an app shell whose content scrolls inside a container.  The host is the page's 'banner' landmark. Placed inside 'main', 'article', 'aside', 'nav' or 'section', it is a plain box instead, as a native '<header>' is there, so a header inside a card or a pane does not add a second banner. The ancestors are read as the accessibility tree reads them, through the slots that take the header in, so one slotted into a component that draws a '<nav>', such as 'Navigation', is not a banner either. A server cannot see the ancestors, so it serves the banner and the browser corrects it when the element connects. */
+  /** Tracks whether the page has scrolled and sets the custom state 'scrolled', so the styled tier can lift the bar without a scroll handler of its own. The state is read when the element connects. A fresh load starts at the top, which matches the server markup, and a reload partway down the page is corrected on hydration.  The element uses a custom state because an attribute such as 'data-scrolled', written onto its own host, is one the server did not send. A hydrating framework would report a mismatch whenever the page reloads far enough down. 'ElementInternals.states' is not in the DOM, so hydration has nothing to compare. Select the state with ':state(scrolled)'.  The page is the window unless 'scroller' names the element that scrolls, for an app shell whose content scrolls inside a container.  **Set 'hide-on-scroll' for a bar that moves out of the way.** Scrolling down past the bar's own height hides it, and scrolling up shows it again, as does focus moving into it. The custom state 'hidden' is on the host while it is hidden, and the styled tier slides a 'sticky' bar up out of view.  **Set 'fold-below' to fold the middle region on a narrow screen.** Below that many pixels of the bar's own width, the middle region is hidden behind a toggle at the end of the bar, named by 'menu-label'. The toggle says whether the region is open with 'aria-expanded', and the region opens below the row. Escape closes it and puts focus back on the toggle. The custom state 'folded' is on the host while the bar is that narrow, and 'open' while the folded region is open. A server serves the bar unfolded, and the browser folds it once it has measured it.  The host is the page's 'banner' landmark. Placed inside 'main', 'article', 'aside', 'nav' or 'section', it is a plain box instead, as a native '<header>' is there, so a header inside a card or a pane does not add a second banner. The ancestors are read as the accessibility tree reads them, through the slots that take the header in, so one slotted into a component that draws a '<nav>', such as 'Navigation', is not a banner either. A server cannot see the ancestors, so it serves the banner and the browser corrects it when the element connects. */
   "helix-headless-app-header": DefineCustomElement<
     HelixHeadlessAppHeader,
     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.  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. */
+  /** 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. */
   "helix-headless-area-chart": DefineCustomElement<
     HelixHeadlessAreaChart,
     HelixHeadlessAreaChartVueProps,
@@ -16681,7 +16870,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. */
+  /** 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. */
   "helix-headless-bar-chart": DefineCustomElement<
     HelixHeadlessBarChart,
     HelixHeadlessBarChartVueProps,
@@ -16693,13 +16882,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessBlockquoteVueProps,
     HelixHeadlessBlockquoteVueEvents
   >;
-  /** Each crumb renders its separator and sets its list-item role. It hides its own separator with ':host(:first-child)', so the trail needs no index from the parent.  Set 'href' to make the whole crumb an anchor, which works with Enter, middle click, and the status bar, and before any JavaScript runs. A router cannot reach an anchor inside a shadow root, so intercept the click for client-side navigation, as with 'Tree.Item' and 'List.Item'. A trail that collapses also reads 'href' to rebuild its hidden crumbs elsewhere.  Without 'href', the crumb renders a plain '<span>' around what you slot, including your own anchor.  The current page is plain text, and 'aria-current="page"' on the host conveys the position. */
+  /** Each crumb renders its separator and sets its list-item role. It hides its own separator with ':host(:first-child)', so the trail needs no index from the parent.  Set 'href' to make the whole crumb an anchor, which works with Enter, middle click, and the status bar, and before any JavaScript runs. A router cannot reach an anchor inside a shadow root, so intercept the click for client-side navigation, as with 'Tree.Item' and 'List.Item'. A trail that collapses also reads 'href' to rebuild its hidden crumbs elsewhere.  Without 'href', the crumb renders a plain '<span>' around what you slot, including your own anchor.  The current page is plain text, and 'aria-current="page"' on the host conveys the position. In a trail where no crumb is 'current', the last one is said to be the current page, and keeps its link. An 'aria-current' you write on the host, such as 'aria-current="location"', replaces the one the crumb gives itself. */
   "helix-headless-breadcrumb": DefineCustomElement<
     HelixHeadlessBreadcrumb,
     HelixHeadlessBreadcrumbVueProps,
     HelixHeadlessBreadcrumbVueEvents
   >;
-  /** The host is the navigation landmark, named "Breadcrumb" by default. An 'aria-label' on the host names the trail instead, and so does 'label'. When a page has more than one navigation landmark, screen reader users choose between them by name.  The '<ol>' has an explicit 'role="list"', because Safari removes list semantics from a list with 'list-style: none', and the trail always hides its markers.  The items are slotted directly, so they are '<ol>' children in the flat tree, and each item sets 'role="listitem"' on itself.  The trail does not measure itself, and you write its overflow in markup: put the crumb that holds the folded items where the gap should appear.  A trail built from data, such as a router's matched routes, takes 'items': an array of '{ label, href }', drawn as crumbs in order, the last one as the current page. Slotted crumbs follow them. Use one way or the other in a trail.  With 'max-items', a trail drawn from 'items' that is longer folds its middle into one crumb: the first crumb, a button, then the last 'max-items' less one. The button is named by 'expand-label' and shows the whole trail, moving focus to the first crumb it brought back. A new 'items' folds again. Slotted crumbs do not fold; write the folded crumb where the gap should be. */
+  /** The host is the navigation landmark, named "Breadcrumb" by default. An 'aria-label' on the host names the trail instead, and so does 'label'. When a page has more than one navigation landmark, screen reader users choose between them by name.  The '<ol>' has an explicit 'role="list"', because Safari removes list semantics from a list with 'list-style: none', and the trail always hides its markers.  The items are slotted directly, so they are '<ol>' children in the flat tree, and each item sets 'role="listitem"' on itself. Where no slotted crumb is 'current', the last one is said to be the current page.  The trail does not measure itself, and you write its overflow in markup: put the crumb that holds the folded items where the gap should appear.  A trail built from data, such as a router's matched routes, takes 'items': an array of '{ label, href }', drawn as crumbs in order, the last one as the current page. Slotted crumbs follow them. Use one way or the other in a trail.  With 'max-items', a trail drawn from 'items' that is longer folds its middle into one crumb: the first crumb, a button, then the last 'max-items' less one. The button is named by 'expand-label' and shows the whole trail, moving focus to the first crumb it brought back. A new 'items' folds again. Slotted crumbs do not fold; write the folded crumb where the gap should be.  **Keyboard.** Each crumb with an 'href' is a link and one tab stop, and Enter follows it. The current page and the separators are not in the tab order. In a folded trail, Enter or Space on the fold's button shows the whole trail and moves focus to the first crumb it brought back. */
   "helix-headless-breadcrumbs": DefineCustomElement<
     HelixHeadlessBreadcrumbs,
     HelixHeadlessBreadcrumbsVueProps,
@@ -16753,7 +16942,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessCarouselVueProps,
     HelixHeadlessCarouselVueEvents
   >;
-  /** The composer is a separate element so you can replace it. If you need attachments, slash commands, or a model picker, replace the composer and keep the transcript.  By default, Enter sends and Shift+Enter starts a new line, the convention in messaging apps. Document editors mostly use the opposite, so 'submit-on' takes 'enter' or 'button'. Use 'button' for a long-form composer.  The composer clears only when no listener cancels the send, so the text is kept when you cancel a send that failed.  **In a form, the draft is the composer's value**, submitted under 'name'. A form reset puts back the 'value' the markup declared, and a '<fieldset disabled>' turns the composer off. Sending is still 'helix-send', and it does not submit the form.  **'typing' says whether the user is writing**, and 'helix-typing' is sent each time it changes: when they start, and when they send or stop for 'typing-timeout' milliseconds. Pass it on to show "is typing" to the other side. */
+  /** The composer is a separate element so you can replace it. If you need attachments, slash commands, or a model picker, replace the composer and keep the transcript.  By default, Enter sends and Shift+Enter starts a new line, the convention in messaging apps. Document editors mostly use the opposite, so 'submit-on' takes 'enter' or 'button'. Use 'button' for a long-form composer.  The composer clears only when no listener cancels the send, so the text is kept when you cancel a send that failed.  **In a form, the draft is the composer's value**, submitted under 'name'. A form reset puts back the 'value' the markup declared, and a '<fieldset disabled>' turns the composer off. Sending is still 'helix-send', and it does not submit the form.  **'required', 'minlength' and 'maxlength' are checked by the browser**, as on a '<textarea>', and the message is the browser's. 'maxlength' stops the field taking more. A draft that fails them does not send, and the composer takes ':state(invalid)' and 'aria-invalid' once the reader has tried to send it, the form was submitted, or the reader edited the field and left it. Tabbing past an empty composer marks nothing.  **'typing' says whether the user is writing**, and 'helix-typing' is sent each time it changes: when they start, and when they send or stop for 'typing-timeout' milliseconds. Pass it on to show "is typing" to the other side. */
   "helix-headless-chat-composer": DefineCustomElement<
     HelixHeadlessChatComposer,
     HelixHeadlessChatComposerVueProps,
@@ -16825,7 +17014,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessCopyButtonVueProps,
     HelixHeadlessCopyButtonVueEvents
   >;
-  /** Declare the columns as 'TableColumn' children and pass the rows as an array. The schema stays readable in the HTML, and the rows can be windowed, which ten thousand row elements cannot be.  '''html <helix-headless-data-table .rows=${rows} sort="name:asc" page-size="20">   <helix-headless-table-column field="name" sortable>Name</helix-headless-table-column>   <helix-headless-table-column field="size" text-align="end" sortable .cell=${bytes}>Size</helix-headless-table-column> </helix-headless-data-table> '''  For a short table written out by hand, use 'Table', which takes rows as markup.  Sort and filter apply to the whole set, including the rows on other pages.  **The cell values do not server-render.** The headings and the row elements do. Reading a cell needs the columns, and Lit SSR does not pass the column children to this element, so a crawler sees an empty table of the right shape. Use 'Table' when the served HTML has to carry the values.  'selectable' adds a column of checkboxes, keyed on 'row-key':  - A row is selected by its key, so the selection survives a sort, a filter,   and a page change. - 'selected' holds the chosen keys, comma separated, the same shape 'Listbox'   uses for a multiple choice. As with 'sort', writing it applies the   selection, and 'default-selected' holds what the markup declared. - The checkbox in the heading selects every row in the result, across pages,   and shows a dash while only some are chosen. - Shift with a press on a checkbox selects every row between it and the row   last chosen.  To act on a single row, such as opening it, put a link or a button in a cell.  **Keyboard.** The grid is one tab stop, and the arrow keys move between its cells, the headings included.  | Key | What it does | |---|---| | Right, Left | Moves one cell along the row. Left moves on, on a right-to-left page. | | Down, Up | Moves one row, the heading row and the 'load-more' row included. | | Home, End | Moves to the first or the last cell of the row. | | Control with Home or End | Moves to the first or the last cell of the grid. | | Page Down, Page Up | Moves by the rows that fit in view. | | Enter, F2 | Moves into the cell's controls. Escape moves back to the cell, and Tab moves between the controls of one cell. | | Enter, Space on a sortable heading | Sorts by the column. | | Enter, Space on the 'load-more' row | Sends 'helix-load-more'. | | Space on a row | Selects the row, in a 'selectable' table. | | Shift with Down or Up | Selects the rows it moves across, in a 'selectable' table. | | Shift with Space | Selects every row from the one last chosen, in a 'selectable' table. | | Control or Command with A | Selects every row, in a 'selectable' table. | | Right on a row header in a tree grid | Opens a closed row, and moves one cell along an open one. | | Left on a row header in a tree grid | Closes an open row, and moves to the parent of a closed one. | | A letter or a word | Moves to the next row whose row header starts with what you typed. |  'selected' and 'expanded' hold their keys in the order of the rows, as do 'helix-select', 'helix-selected' and 'helix-expand'.  Each row is named by its row header, the column marked 'row-header', or the first column with a 'field' where none is. A screen reader says it as a reader moves between rows.  **Rows that hold rows.** 'child-field' names the field that holds a row's child rows, and the grid becomes a tree grid. The row header column draws a mark that a press opens and closes a row by, and 'expanded' holds the keys of the open rows, which 'row-key' names. Right on a closed row's header opens it, Left on an open one closes it, and Left on a child moves to its parent. A sort orders the rows under each parent, and a search shows the rows that lead to each match, open.  'load-more' adds a row after the last one with a button that sends 'helix-load-more'. A 'windowed' table also sends it by itself once a reader scrolls within one screen of the end, once for each number of rows. Add the next rows to 'rows', and set 'loading' while they are on their way.  The controls inside the cells leave the tab order, so Tab moves past the whole grid. A windowed table keeps the row holding focus drawn while the rest scroll away.  People can resize and reorder the columns. 'resizable' on a column puts a separator on its edge. 'reorderable' on the table puts a grip on each heading that has a 'field', moved by dragging or with the arrow keys. The new order is written to 'order' as a list of fields. Your markup is not rewritten: the table assigns the headings to its header in that order.  **'reorderable-rows' lets people move rows.** A column of grips leads each row, named by 'move-row-label'. Drag a grip to move its row, and the table scrolls near an edge. Or press Space or Enter on a grip, or click it, to pick up its row, move it with Down and Up, Home and End, and press Space or Enter again to drop it. A click on another row drops it there, and Escape puts it back. The table says each step in its 'live' region. A drop sends 'helix-before-reorder', which you can refuse, and then 'helix-reorder' with 'kind' set to 'row', whose 'keys' hold every key of 'rows' in the new order. **You move the rows**: set 'rows' to the new order, and the table draws it. Set 'row-key', so a row is known by its key once it has moved. The grips do nothing while a 'sort' is set, since the sort decides the order, and a tree grid draws none.  'csv()' returns the result as text: every row that passes the filter, in the order and the columns on screen. Saving the file is up to you.  'DataTable' has no 'columns' attribute. Each 'TableColumn' is part of the schema, so you size a column with its own 'width'. 'Table' has 'columns' because its cells are markup you write and it can have no columns at all. Written on 'DataTable', 'columns' has no effect, so watch for it when you move a table from 'Table' to 'DataTable'. */
+  /** Declare the columns as 'TableColumn' children and pass the rows as an array. The schema stays readable in the HTML, and the rows can be windowed, which ten thousand row elements cannot be.  '''html <helix-headless-data-table .rows=${rows} sort="name:asc" page-size="20">   <helix-headless-table-column field="name" sortable>Name</helix-headless-table-column>   <helix-headless-table-column field="size" text-align="end" sortable .cell=${bytes}>Size</helix-headless-table-column> </helix-headless-data-table> '''  For a short table written out by hand, use 'Table', which takes rows as markup.  Sort and filter apply to the whole set, including the rows on other pages.  **The cell values do not server-render.** The headings and the row elements do. Reading a cell needs the columns, and Lit SSR does not pass the column children to this element, so a crawler sees an empty table of the right shape. Use 'Table' when the served HTML has to carry the values.  'selectable' adds a column of checkboxes, keyed on 'row-key':  - A row is selected by its key, so the selection survives a sort, a filter,   and a page change. - 'selected' holds the chosen keys, comma separated, the same shape 'Listbox'   uses for a multiple choice. As with 'sort', writing it applies the   selection, and 'default-selected' holds what the markup declared. - The checkbox in the heading selects every row in the result, across pages,   and shows a dash while only some are chosen. - Shift with a press on a checkbox selects every row between it and the row   last chosen. - 'selection-behavior="replace"' makes a press or a move select the row   alone, as a file list does. Control or Command with a press adds or takes   out one row, and Shift with a press selects every row from the one last   chosen.  To act on a single row, such as opening it, put a link or a button in a cell.  **Keyboard.** The grid is one tab stop, and the arrow keys move between its cells, the headings included.  | Key | What it does | |---|---| | Right, Left | Moves one cell along the row. Left moves on, on a right-to-left page. | | Down, Up | Moves one row, the heading row and the 'load-more' row included. | | Home, End | Moves to the first or the last cell of the row. | | Control with Home or End | Moves to the first or the last cell of the grid. | | Page Down, Page Up | Moves by the rows that fit in view. | | Enter, F2 | Moves into the cell's controls. Escape moves back to the cell, and Tab moves between the controls of one cell. | | Enter, Space on a sortable heading | Sorts by the column. | | Enter, Space on the 'load-more' row | Sends 'helix-load-more'. | | Space on a row | Selects the row, in a 'selectable' table. Under 'selection-behavior="replace"', selects it alone, and Control or Command with Space adds or takes out the row. | | Down, Up, Page Down, Page Up under 'selection-behavior="replace"' | Selects the row it moves to alone. Control or Command with the key moves without selecting. | | Shift with Down or Up | Selects the rows it moves across, in a 'selectable' table. | | Shift with Space | Selects every row from the one last chosen, in a 'selectable' table. | | Control or Command with A | Selects every row, in a 'selectable' table. | | Right on a row header in a tree grid | Opens a closed row, and moves one cell along an open one. | | Left on a row header in a tree grid | Closes an open row, and moves to the parent of a closed one. | | A letter or a word | Moves to the next row whose row header starts with what you typed. |  'selected' and 'expanded' hold their keys in the order of the rows, as do 'helix-select', 'helix-selected' and 'helix-expand'.  Each row is named by its row header, the column marked 'row-header', or the first column with a 'field' where none is. A screen reader says it as a reader moves between rows.  **Rows that hold rows.** 'child-field' names the field that holds a row's child rows, and the grid becomes a tree grid. The row header column draws a mark that a press opens and closes a row by, and 'expanded' holds the keys of the open rows, which 'row-key' names. Right on a closed row's header opens it, Left on an open one closes it, and Left on a child moves to its parent. A sort orders the rows under each parent, and a search shows the rows that lead to each match, open.  'load-more' adds a row after the last one with a button that sends 'helix-load-more'. A 'windowed' table also sends it by itself once a reader scrolls within one screen of the end, once for each number of rows. Add the next rows to 'rows', and set 'loading' while they are on their way.  The controls inside the cells leave the tab order, so Tab moves past the whole grid. A windowed table keeps the row holding focus drawn while the rest scroll away.  People can resize and reorder the columns. 'resizable' on a column puts a separator on its edge. 'reorderable' on the table puts a grip on each heading that has a 'field', moved by dragging or with the arrow keys. The new order is written to 'order' as a list of fields. Your markup is not rewritten: the table assigns the headings to its header in that order.  **'reorderable-rows' lets people move rows.** A column of grips leads each row, named by 'move-row-label'. Drag a grip to move its row, and the table scrolls near an edge. Or press Space or Enter on a grip, or click it, to pick up its row, move it with Down and Up, Home and End, and press Space or Enter again to drop it. A click on another row drops it there, and Escape puts it back. The table says each step in its 'live' region. A drop sends 'helix-before-reorder', which you can refuse, and then 'helix-reorder' with 'kind' set to 'row', whose 'keys' hold every key of 'rows' in the new order. **You move the rows**: set 'rows' to the new order, and the table draws it. Set 'row-key', so a row is known by its key once it has moved. The grips do nothing while a 'sort' is set, since the sort decides the order, and a tree grid draws none.  'csv()' returns the result as text: every row that passes the filter, in the order and the columns on screen. Saving the file is up to you.  'DataTable' has no 'columns' attribute. Each 'TableColumn' is part of the schema, so you size a column with its own 'width'. 'Table' has 'columns' because its cells are markup you write and it can have no columns at all. Written on 'DataTable', 'columns' has no effect, so watch for it when you move a table from 'Table' to 'DataTable'. */
   "helix-headless-data-table": DefineCustomElement<
     HelixHeadlessDataTable,
     HelixHeadlessDataTableVueProps,
@@ -16855,13 +17044,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessDescriptionListVueProps,
     HelixHeadlessDescriptionListVueEvents
   >;
-  /** Renders a native '<dialog>' opened with 'showModal()'. The platform provides:  - the top layer, so the dialog is above everything whatever the 'z-index' - a backdrop - closing with Escape - an inert page behind the dialog, unreachable by pointer, keyboard, or   virtual cursor  The dialog adds one thing to those: 'Tab' from its last control goes to its first, and 'Shift+Tab' from its first to its last. A native modal lets 'Tab' past its last control out to the browser's own controls.  'open' calls 'showModal()', and every way the dialog closes goes through 'requestOpen'. A native dialog closes three ways: the property, Escape, and a '<form method="dialog">' submit. Routing all three through 'requestOpen' keeps your state in step, so the dialog never closes while your state still says it is open, which would leave it impossible to reopen.  The dialog's name is 'label' when you set it. Otherwise it is the heading in the 'header' slot, or the elements an 'aria-labelledby' on the host names, and 'fallback-label' where nothing names it. While it is open, the page behind it does not scroll.  The dialog is described by the words at the start of its body: the elements in the default slot before the first one that is or holds a control. A question above a form describes the dialog, and the form does not. A Helix component that draws words and no control, such as 'Text', counts as words. An 'aria-describedby' on the host replaces it.  Set 'alert' for a dialog that interrupts to ask for an answer, such as a confirmation before a deletion. It is an 'alertdialog', which a screen reader announces with its description as it opens. Set 'dismissible' to draw a close control, labeled by 'dismiss-label'. */
+  /** Renders a native '<dialog>' opened with 'showModal()'. The platform provides:  - the top layer, so the dialog is above everything whatever the 'z-index' - a backdrop - closing with Escape - an inert page behind the dialog, unreachable by pointer, keyboard, or   virtual cursor  The dialog adds one thing to those: 'Tab' from its last control goes to its first, and 'Shift+Tab' from its first to its last. A native modal lets 'Tab' past its last control out to the browser's own controls.  'open' calls 'showModal()', and every way the dialog closes goes through 'requestOpen'. A native dialog closes three ways: the property, Escape, and a '<form method="dialog">' submit. Routing all three through 'requestOpen' keeps your state in step, so the dialog never closes while your state still says it is open, which would leave it impossible to reopen.  The dialog's name is 'label' when you set it. Otherwise it is the heading in the 'header' slot, or the elements an 'aria-labelledby' on the host names, and 'fallback-label' where nothing names it. While it is open, the page behind it does not scroll.  The dialog is described by the words at the start of its body: the elements in the default slot before the first one that is or holds a control. A question above a form describes the dialog, and the form does not. A Helix component that draws words and no control, such as 'Text', counts as words. An 'aria-describedby' on the host replaces it.  Set 'alert' for a dialog that interrupts to ask for an answer, such as a confirmation before a deletion. It is an 'alertdialog', which a screen reader announces with its description as it opens. Set 'dismissible' to draw a close control, labeled by 'dismiss-label'.  **Keyboard.** Opening moves focus to the first control in the dialog.  | Key | What it does | |---|---| | Tab, Shift+Tab | Moves through the controls in the dialog, from the last round to the first and from the first round to the last. | | Escape | Asks to close the dialog. A 'helix-before-close' listener can refuse, and 'persistent' or 'closedby="none"' keeps it open. | | Enter, Space | On the close control, closes the dialog. |  Closing puts focus back on the element that had it before the dialog opened. */
   "helix-headless-dialog": DefineCustomElement<
     HelixHeadlessDialog,
     HelixHeadlessDialogVueProps,
     HelixHeadlessDialogVueEvents
   >;
-  /** The separator role is on the rule inside the shadow root. A role does not need to cross the shadow boundary the way an IDREF does, so it can sit on the rendered element. The semantics are then in the server-rendered markup, with no attribute written by script after the element connects.  **The line is a separator**, as '<hr>' is, and as Radix Separator, React Aria Separator, and Web Awesome's divider are. It is named by any content set into it, so a screen reader says "Or, separator" where you wrote "Or" on the line. Set 'decorative' on a rule that separates nothing, such as one under a heading or between the facts of a byline, and it leaves the accessibility tree.  Use 'orientation="vertical"' between items on one line. A vertical divider stretches to fit its flex parent and sets no height of its own.  **Inside a toolbar it runs across the toolbar** without being told: vertical in a horizontal toolbar and horizontal in a vertical one, with 'aria-orientation' to match, as React Aria's separator does inside a toolbar. Inside means a child of Toolbar or of the page's own 'role="toolbar"'. An 'orientation' you write still wins. A server cannot see the toolbar, so the turn arrives with hydration, inside the shadow root. */
+  /** The separator role is on the rule inside the shadow root. A role does not need to cross the shadow boundary the way an IDREF does, so it can sit on the rendered element. The semantics are then in the server-rendered markup, with no attribute written by script after the element connects.  **The line is a separator**, as '<hr>' is, and as Radix Separator, React Aria Separator, and Web Awesome's divider are. It is named by any content set into it, so a screen reader says "Or, separator" where you wrote "Or" on the line, and the words are read once, as that name. Set words into a separator and no controls, which are hidden with them. Set 'decorative' on a rule that separates nothing, such as one under a heading or between the facts of a byline, and it leaves the accessibility tree.  Use 'orientation="vertical"' between items on one line. A vertical divider stretches to fit its flex parent and sets no height of its own.  **Inside a toolbar it runs across the toolbar** without being told: vertical in a horizontal toolbar and horizontal in a vertical one, with 'aria-orientation' to match, as React Aria's separator does inside a toolbar. Inside means a child of Toolbar or of the page's own 'role="toolbar"'. An 'orientation' you write still wins. A server cannot see the toolbar, so the turn arrives with hydration, inside the shadow root. */
   "helix-headless-divider": DefineCustomElement<
     HelixHeadlessDivider,
     HelixHeadlessDividerVueProps,
@@ -16873,7 +17062,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessDonutChartVueProps,
     HelixHeadlessDonutChartVueEvents
   >;
-  /** Uses 'MixinControllerOpen', so 'open', 'defaultOpen', and the 'helix-before-open' and 'helix-before-close' events work the same way as on an accordion item.  The drawer is modal by default, which means four things:  - focus is trapped inside: 'Tab' from the last control goes to the first,   and 'Shift+Tab' from the first to the last, as in 'Dialog' - Escape and a press outside close it - the page behind is covered - the page behind does not scroll  A drawer with 'modal="false"' leaves the page usable and still closes on Escape, in a browser without 'closedby' as well.  **A touch or a pen swipes it away**, toward the edge it came from, resolved against the writing direction. A swipe past halfway, or a quick one, closes it through the same request as every other way out. 'snap-points' lists the fractions of the panel a reader can leave on screen, such as '0.5 1' for a sheet that rests half open: it opens at the smallest, and a swipe settles at the nearest. While a swipe moves the panel, the distance is written on it as '--drawer-swipe-x' and '--drawer-swipe-y'. 'swipe="false"' turns swiping off.  'snap' is the snap point the panel rests at, and ':state(snapped)' is on the host while that is less than the whole panel. 'snapTo()' moves it to another. **Focus moving to a control past the window's edge opens the panel to its largest snap point**, so a reader moving through a half open sheet with 'Tab' never lands on a control they cannot see.  Set 'dismissible' to draw a close control in the corner, labeled by 'dismiss-label', as 'Dialog' draws one.  The panel's name is 'label' when you set it. Otherwise it is the heading in the 'header' slot, or the elements an 'aria-labelledby' on the host names, and 'fallback-label' where nothing names it.  Content stays mounted when the drawer is closed, so it is in the server markup and can animate. A closed '<dialog>' is already out of the tab order and the accessibility tree, so the drawer does not write 'inert'. The 'role', 'aria-modal', and the scrim also come from the '<dialog>' element. 'drawer-root.ssr.spec.ts' checks that the panel has no hand-written 'inert' or 'role'.  Open the drawer declaratively with the platform's invoker attributes:  '''html <helix-headless-button commandfor="nav" command="--toggle">Menu</helix-headless-button> <helix-headless-drawer id="nav">…</helix-headless-drawer> ''' */
+  /** Uses 'MixinControllerOpen', so 'open', 'defaultOpen', and the 'helix-before-open' and 'helix-before-close' events work the same way as on an accordion item.  The drawer is modal by default, which means four things:  - focus is trapped inside: 'Tab' from the last control goes to the first,   and 'Shift+Tab' from the first to the last, as in 'Dialog' - Escape and a press outside close it - the page behind is covered - the page behind does not scroll  A drawer with 'modal="false"' leaves the page usable and still closes on Escape, in a browser without 'closedby' as well.  Set 'persistent' for a drawer that has to be answered: Escape, a press outside, and a swipe leave it open, and the close control and 'close()' still close it. 'closedby="none"' keeps it open on all three as well, and 'closedby="closerequest"' keeps it open on a press outside.  **A touch or a pen swipes it away**, toward the edge it came from, resolved against the writing direction. A swipe past halfway, or a quick one, closes it through the same request as every other way out. 'snap-points' lists the fractions of the panel a reader can leave on screen, such as '0.5 1' for a sheet that rests half open: it opens at the smallest, and a swipe settles at the nearest. While a swipe moves the panel, the distance is written on it as '--drawer-swipe-x' and '--drawer-swipe-y'. 'swipe="false"' turns swiping off.  'snap' is the snap point the panel rests at, and ':state(snapped)' is on the host while that is less than the whole panel. 'snapTo()' moves it to another. **Focus moving to a control past the window's edge opens the panel to its largest snap point**, so a reader moving through a half open sheet with 'Tab' never lands on a control they cannot see.  Set 'dismissible' to draw a close control in the corner, labeled by 'dismiss-label', as 'Dialog' draws one.  The panel's name is 'label' when you set it. Otherwise it is the heading in the 'header' slot, or the elements an 'aria-labelledby' on the host names, and 'fallback-label' where nothing names it. A development build warns when a drawer opens with nothing but 'fallback-label' to name it.  The panel is described by the words at the start of its body, as 'Dialog' is: the elements in the default slot before the first one that is or holds a control. An 'aria-describedby' on the host replaces it.  **Keyboard.** Opening moves focus to the first control in the panel.  | Key | What it does | |---|---| | Tab, Shift+Tab | In a modal drawer, moves through the controls in the panel, from the last round to the first and from the first round to the last. In a drawer that is not modal, moves on to the page. | | Escape | Asks to close the drawer. A 'helix-before-close' listener can refuse, and 'persistent' or 'closedby="none"' keeps it open. | | Enter, Space | On the close control, closes the drawer. |  Content stays mounted when the drawer is closed, so it is in the server markup and can animate. A closed '<dialog>' is already out of the tab order and the accessibility tree, so the drawer does not write 'inert'. The 'role', 'aria-modal', and the scrim also come from the '<dialog>' element. 'drawer-root.ssr.spec.ts' checks that the panel has no hand-written 'inert' or 'role'.  Open the drawer declaratively with the platform's invoker attributes:  '''html <helix-headless-button commandfor="nav" command="--toggle">Menu</helix-headless-button> <helix-headless-drawer id="nav">…</helix-headless-drawer> ''' */
   "helix-headless-drawer": DefineCustomElement<
     HelixHeadlessDrawer,
     HelixHeadlessDrawerVueProps,
@@ -16975,7 +17164,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessInputVueProps,
     HelixHeadlessInputVueEvents
   >;
-  /** Renders a '<kbd>' element.  Each element holds one key, except when you use 'keys'. For a sequence or a chord, write one element per key and put the separator between them as text, such as "then" or "plus".  'keys' renders the right glyphs for the platform. Given 'mod', it renders '⌘K' on Apple devices and 'Ctrl+K' everywhere else. A '⌘K' typed into a template is wrong for anyone on Windows.  The element binds the shortcut only when 'within' is set. By default it draws the key and listens for nothing.  **'for' names the control the shortcut works**, and the key writes its chord onto that control's 'aria-keyshortcuts', in the platform's words ('Meta+K' on an Apple keyboard, 'Control+K' elsewhere), so a screen reader announces the shortcut with the control. A chord the page wrote there itself is left alone, and the key takes back only what it added.  'caps' draws a chord as a key per key: each is a 'key' part and the '+' between two a 'separator' part, so a sheet can draw a cap for each. 'key-labels' renames any key, on every platform, such as 'key-labels='{"mod":"Command"}''. On an Apple keyboard a word joins the next key with a hyphen, as in 'Command-K'.  **'activate' makes the shortcut work the control 'for' names**, with no script: 'activate="focus"' moves focus to it, as '/' does to a search field, and 'activate="click"' presses it. It acts once 'helix-shortcut' has gone out and no listener canceled it, and only where 'within' listens. */
+  /** Renders a '<kbd>' element.  Each element holds one key, except when you use 'keys'. For a sequence or a chord, write one element per key and put the separator between them as text, such as "then" or "plus".  'keys' renders the right glyphs for the platform. Given 'mod', it renders '⌘K' on Apple devices and 'Ctrl+K' everywhere else. A '⌘K' typed into a template is wrong for anyone on Windows.  The element binds the shortcut only when 'within' is set. By default it draws the key and listens for nothing.  **'for' names the control the shortcut works**, and the key writes its chord onto that control's 'aria-keyshortcuts', in the platform's words ('Meta+K' on an Apple keyboard, 'Control+K' elsewhere), so a screen reader announces the shortcut with the control. A chord the page wrote there itself is left alone, and the key takes back only what it added.  A chord is drawn with the platform's modifiers first, in its order, so one 'keys' value is right everywhere: 'mod+shift+p' is '⇧⌘P' on an Apple keyboard and 'Ctrl+Shift+P' elsewhere. Where it is drawn in glyphs, it is read in words, such as 'Shift Command P'.  'caps' draws a chord as a key per key: each is a 'key' part and the '+' between two a 'separator' part, so a sheet can draw a cap for each. 'key-labels' renames any key, on every platform, such as 'key-labels='{"mod":"Command"}''. On an Apple keyboard a word joins the next key with a hyphen, as in 'Command-K'.  **'activate' makes the shortcut work the control 'for' names**, with no script: 'activate="focus"' moves focus to it, as '/' does to a search field, and 'activate="click"' presses it. It acts once 'helix-shortcut' has gone out and no listener canceled it, and only where 'within' listens. */
   "helix-headless-kbd": DefineCustomElement<
     HelixHeadlessKbd,
     HelixHeadlessKbdVueProps,
@@ -16993,13 +17182,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessLightboxItemVueProps,
     HelixHeadlessLightboxItemVueEvents
   >;
-  /** The frame around content you open, such as a picture, a video frame, or a chart. The lightbox draws no content of its own. It provides the frame, the keyboard behavior, and text that states the current position in the set.  The modal behavior comes from a native '<dialog>' opened with 'showModal()', which provides the top layer, a backdrop, Escape to close, and 'inert' on the rest of the document. Every way of closing goes through 'requestOpen', as in 'Dialog' and 'Drawer'.  A lightbox shows one item at a time and has no scrolling track, so 'active' holds the current item, as in 'Tabs'. The arrow keys change the item while focus stays in the dialog.  Set 'controls' for the viewer's own previous, next and close controls, named by 'previous-label', 'next-label' and 'dismiss-label', whose glyphs you can replace in the 'previous-icon', 'next-icon' and 'dismiss-icon' slots. Without it, compose the chrome yourself in the 'header' and 'footer' slots, with buttons that send '--previous', '--next' and '--close'.  **Set 'max-zoom' to let a reader zoom into the shown item**, such as '3'. Two fingers pinch it, a double click or a double tap zooms all the way in about the point pressed and back out, and once zoomed one pointer drags it about. '+' and '-' zoom in and out from the keyboard, and '0' puts it back. The scale and the offset are on the 'viewport' part as '--lightbox-zoom', '--lightbox-pan-x' and '--lightbox-pan-y', written only while zoomed, and a swipe moves to the next item only while the item is at its own size. With 'controls', the viewer also draws zoom-out and zoom-in controls, for a pointer with no wheel and no second finger. Once a reader stops zooming, the live region says the new scale in the words of 'zoom-status-label', such as "Zoomed to 150%".  Each item is a slide: a 'group' with the role description in 'slide-role-label', named by its 'label' or by 'slide-label'. A touch or a pen swiped across the picture shows the next or the previous item, the way the line of text runs.  The chrome hides when there is no input, through 'IdleController', and comes back on a pointer move, a key press, or a focus. It stays while focus is on a control in the header or the footer, so a keyboard reader is never left on a control that has gone. 'fullscreen' uses 'FullscreenController', as 'Video' does. While the viewer is open, the page behind it does not scroll. */
+  /** The frame around content you open, such as a picture, a video frame, or a chart. The lightbox draws no content of its own. It provides the frame, the keyboard behavior, and text that states the current position in the set.  The modal behavior comes from a native '<dialog>' opened with 'showModal()', which provides the top layer, a backdrop, Escape to close, and 'inert' on the rest of the document. Every way of closing goes through 'requestOpen', as in 'Dialog' and 'Drawer'.  A lightbox shows one item at a time and has no scrolling track, so 'active' holds the current item, as in 'Tabs'. The arrow keys change the item while focus stays in the dialog.  Set 'controls' for the viewer's own previous, next and close controls, named by 'previous-label', 'next-label' and 'dismiss-label', whose glyphs you can replace in the 'previous-icon', 'next-icon' and 'dismiss-icon' slots. Without it, compose the chrome yourself in the 'header' and 'footer' slots, with buttons that send '--previous', '--next' and '--close'.  **Set 'max-zoom' to let a reader zoom into the shown item**, such as '3'. Two fingers pinch it, a double click or a double tap zooms all the way in about the point pressed and back out, and once zoomed one pointer drags it about. '+' and '-' zoom in and out from the keyboard, and '0' puts it back. The scale and the offset are on the 'viewport' part as '--lightbox-zoom', '--lightbox-pan-x' and '--lightbox-pan-y', written only while zoomed, and a swipe moves to the next item only while the item is at its own size. With 'controls', the viewer also draws zoom-out and zoom-in controls, for a pointer with no wheel and no second finger. Once a reader stops zooming, the live region says the new scale in the words of 'zoom-status-label', such as "Zoomed to 150%".  Each item is a slide: a 'group' with the role description in 'slide-role-label', named by its 'label' or by 'slide-label'. A touch or a pen swiped across the picture shows the next or the previous item, the way the line of text runs.  A press on the empty area around the item closes the viewer, as a press on the backdrop does. Under 'max-zoom', a press beside the item zooms on a double press and closes nothing, and only the space outside the viewport closes the viewer. A press that dragged closes nothing.  **Keyboard.** Opening moves focus to the viewer itself, which a screen reader names.  | Key | What it does | |---|---| | Right, Down | Shows the next item. On a right-to-left page, Left does. While the item is zoomed, the arrows move about it instead. | | Left, Up | Shows the previous item. | | Home, End | Shows the first or the last item. | | '+', '-', '0' | Zooms in, zooms out, and puts the item back at its own size, where 'max-zoom' allows zooming. | | Tab, Shift+Tab | Moves through the controls in the viewer, from the last round to the first and from the first round to the last. | | Escape | Closes the viewer. A 'helix-before-close' listener can refuse. |  A development build warns when a viewer opens with no 'label'.  The chrome hides when there is no input, through 'IdleController', and comes back on a pointer move, a key press, or a focus. It stays while focus is on a control in the header or the footer, so a keyboard reader is never left on a control that has gone. 'fullscreen' uses 'FullscreenController', as 'Video' does. While the viewer is open, the page behind it does not scroll. */
   "helix-headless-lightbox": DefineCustomElement<
     HelixHeadlessLightbox,
     HelixHeadlessLightboxVueProps,
     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.  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 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. */
   "helix-headless-line-chart": DefineCustomElement<
     HelixHeadlessLineChart,
     HelixHeadlessLineChartVueProps,
@@ -17125,7 +17314,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessMeterVueProps,
     HelixHeadlessMeterVueEvents
   >;
-  /** Renders a real '<nav>', the landmark that screen reader users jump to. Navigation is its own component, separate from 'AppHeader', so you can use it in a header, a footer, or a sidebar.  **It renders no links.** Bring your own, mark the current one with 'aria-current="page"', and style them with the 'data-navigation-item' recipe. A router renders its own anchors and cannot render them inside the component's shadow root.  The component moves a marker to the current item. It finds the current item by reading 'aria-current', so the attribute that screen readers announce also places the marker. Any value but 'false' counts, so a sidebar of sections on one page can mark the section in view with 'aria-current="location"'. Where several are marked, 'page' wins.  Set 'orientation="vertical"' to stack the destinations in a column, for a sidebar.  Set 'arrows' and the arrow keys move focus between the destinations, as Radix's navigation menu does: left and right along a row, up and down a column, Home and End to the ends. A 'Megamenu' among them is reached at its trigger. Tab still stops at every link, since a navigation is a list of links and not a single control, and the keys across the other axis are left to the page and to an open panel. */
+  /** Renders a real '<nav>', the landmark that screen reader users jump to. Navigation is its own component, separate from 'AppHeader', so you can use it in a header, a footer, or a sidebar.  **It renders no links.** Bring your own, mark the current one with 'aria-current="page"', and style them with the 'data-navigation-item' recipe. A router renders its own anchors and cannot render them inside the component's shadow root.  The component moves a marker to the current item. It finds the current item by reading 'aria-current', so the attribute that screen readers announce also places the marker. Any value but 'false' counts, so a sidebar of sections on one page can mark the section in view with 'aria-current="location"'. Where several are marked, 'page' wins.  **The destinations can be a list.** Slot a '<ul>' or an '<ol>' of '<li>' elements, each holding a link, and a screen reader says how many there are and where each one is, as in Radix's 'NavigationMenu.List'. The marker and the arrow keys work on the list items as they do on bare links. Give the list 'role="list"' as well, since Safari drops the semantics of a list drawn without bullets.  Set 'orientation="vertical"' to stack the destinations in a column, for a sidebar.  Set 'arrows' and the arrow keys move focus between the destinations, as Radix's navigation menu does: left and right along a row, up and down a column, Home and End to the ends. A 'Megamenu' among them is reached at its trigger. Tab still stops at every link, since a navigation is a list of links and not a single control, and the keys across the other axis are left to the page and to an open panel. */
   "helix-headless-navigation": DefineCustomElement<
     HelixHeadlessNavigation,
     HelixHeadlessNavigationVueProps,
@@ -17143,7 +17332,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessNotificationVueProps,
     HelixHeadlessNotificationVueEvents
   >;
-  /** Notifications are slotted children. Each one is your own markup, with an avatar, a link, or a button in it. Feeds usually hold tens of items, so writing them out lets an item hold anything.  The list does not virtualize. Windowing needs the list to own the data, and here you own it, so N notifications are N elements. For a feed of thousands, use a data table with a custom cell.  Read state is reported to you. Marking read goes from the root to the item and from the item to you, so a canceled 'helix-read' changes nothing, and if you own 'read', nothing changes until you set it. 'unread' is derived from the items and written to an attribute, so a stylesheet and a badge can both use it without counting.  **The feed is one 'Tab' stop for its rows.** Each row takes focus itself and is read by its label. 'ArrowDown' and 'ArrowUp' move to the next and the previous row, 'Home' and 'End' to the first and the last, and 'PageDown' and 'PageUp' move a row on or back from anywhere inside one, as in the APG feed pattern. The controls inside a row stay in the 'Tab' order. Set 'total' when the feed holds one page of a longer list, and each row says its place in the whole of it.  **'load-more' adds a button after the list** that sends 'helix-load-more', for a feed that holds one page of a longer list. Append the next page, set 'loading' while it is on its way, and take 'load-more' off once there is nothing more. While the feed is loading the button stays, so focus stays on it, and it is 'aria-disabled' and sends nothing.  **'load-error' says a page could not be fetched**, such as "Could not load notifications": it shows under the rows there are, in the 'error' part, in place of the empty and loading lines, and a screen reader hears it. Clear it when you ask again. */
+  /** Notifications are slotted children. Each one is your own markup, with an avatar, a link, or a button in it. Feeds usually hold tens of items, so writing them out lets an item hold anything.  The list does not virtualize. Windowing needs the list to own the data, and here you own it, so N notifications are N elements. For a feed of thousands, use a data table with a custom cell.  Read state is reported to you. Marking read goes from the root to the item and from the item to you, so a canceled 'helix-read' changes nothing, and if you own 'read', nothing changes until you set it. 'unread' is derived from the items and written to an attribute, so a stylesheet and a badge can both use it without counting.  **The feed is one 'Tab' stop for its rows.** Each row takes focus itself and is read by its label. 'ArrowDown' and 'ArrowUp' move to the next and the previous row, 'Home' and 'End' to the first and the last, and 'PageDown' and 'PageUp' move a row on or back from anywhere inside one, as in the APG feed pattern. The controls inside a row stay in the 'Tab' order. Set 'total' when the feed holds one page of a longer list, and each row says its place in the whole of it.  **Keyboard.**  | Key | What it does | |---|---| | Down, Up | On a row, moves to the next or the previous row. | | Home, End | On a row, moves to the first or the last row. | | Page Down, Page Up | From anywhere in a row, moves to the next or the previous row. | | Control+End | From anywhere in the feed, moves to the first control after it on the page. | | Control+Home | From anywhere in the feed, moves to the nearest control before it on the page. | | Tab | Moves through the controls in a row, and on out of the feed. |  **'load-more' adds a button after the list** that sends 'helix-load-more', for a feed that holds one page of a longer list. Append the next page, set 'loading' while it is on its way, and take 'load-more' off once there is nothing more. While the feed is loading the button stays, so focus stays on it, and it is 'aria-disabled' and sends nothing.  **'load-error' says a page could not be fetched**, such as "Could not load notifications": it shows under the rows there are, in the 'error' part, in place of the empty and loading lines, and a screen reader hears it. Clear it when you ask again. */
   "helix-headless-notifications": DefineCustomElement<
     HelixHeadlessNotifications,
     HelixHeadlessNotificationsVueProps,
@@ -17209,7 +17398,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessPinInputVueProps,
     HelixHeadlessPinInputVueEvents
   >;
-  /** Popover is the general overlay that the specific ones build on. 'Menu' holds commands, 'Select' holds options, and 'Tooltip' holds a description. Popover holds any content you put in it, so it has no keyboard handling of its own.  The trigger is slotted and stays your own element. A Helix trigger is told whether the popover is open inside its own shadow root. On a plain element, such as a '<button>', the popover writes 'aria-expanded' only once a reader has pressed it, which is after any hydration, and never where you wrote 'aria-expanded' yourself. It writes nothing else onto your markup.  The panel is in the top layer through the popover API, so it needs no 'z-index', and an ancestor with 'overflow: hidden', 'transform', 'filter', or 'contain' does not clip or move it.  It opens on click and from a command. 'command="--show"' and the related commands work as they do on 'Dialog' and 'Drawer', so a button anywhere on the page can open the popover with no script.  **Opening moves focus into the panel**, to the first control in it, or to the panel itself where it holds none, and closing from inside gives it back to the trigger. It closes on Escape, on a press outside it, and when focus moves out of the trigger and the panel to somewhere else on the page.  'modal' keeps 'Tab' inside the panel while it is open and says so with 'aria-modal', for a panel that has to be answered before the page goes on. The rest of the page is hidden from screen readers with 'aria-hidden' while it is open, so the virtual cursor stays in the panel too. Without it the popover does not trap focus.  The panel's name is 'label' when you set it. Otherwise it is the first heading in the panel, or the elements an 'aria-labelledby' on the host names.  'arrow' draws a point on the panel's edge facing the trigger. The side the panel landed on is on the host as ':state(placed-top)' and its kin, and the trigger's width is on the panel as '--floating-anchor-inline-size', for a panel as wide as its trigger:  '''css helix-popover::part(popover) {   min-inline-size: var(--floating-anchor-inline-size); } ''' */
+  /** Popover is the general overlay that the specific ones build on. 'Menu' holds commands, 'Select' holds options, and 'Tooltip' holds a description. Popover holds any content you put in it, so it has no keyboard handling of its own.  The trigger is slotted and stays your own element. A Helix trigger is told whether the popover is open inside its own shadow root. On a plain element, such as a '<button>', the popover writes 'aria-expanded', from a frame after its own first render, or from the first press where that comes sooner. It never writes it where you wrote 'aria-expanded' yourself, and writes nothing else onto your markup.  The panel is in the top layer through the popover API, so it needs no 'z-index', and an ancestor with 'overflow: hidden', 'transform', 'filter', or 'contain' does not clip or move it.  It opens on click and from a command. 'command="--show"' and the related commands work as they do on 'Dialog' and 'Drawer', so a button anywhere on the page can open the popover with no script.  **Opening moves focus into the panel**, to the first control in it, or to the panel itself where it holds none, and closing from inside gives it back to the trigger. It closes on Escape, on a press outside it, and when focus moves out of the trigger and the panel to somewhere else on the page.  'modal' keeps 'Tab' inside the panel while it is open and says so with 'aria-modal', for a panel that has to be answered before the page goes on. The rest of the page is hidden from screen readers with 'aria-hidden' while it is open, so the virtual cursor stays in the panel too. Without it the popover does not trap focus.  The panel's name is 'label' when you set it. Otherwise it is the first heading in the panel, or the elements an 'aria-labelledby' on the host names. A development build warns when a popover opens with nothing but 'fallback-label' to name it.  **Keyboard.** Opening moves focus to the first control in the panel, or to the panel where it holds none.  | Key | What it does | |---|---| | Enter, Space | On the trigger, opens the panel, or closes it while it is open. | | Escape | Closes the panel and puts focus back on the trigger. | | Tab, Shift+Tab | Moves through the controls in the panel. Leaving the panel and the trigger closes it. With 'modal', moves from the last control round to the first and from the first round to the last. |  'arrow' draws a point on the panel's edge facing the trigger. The side the panel landed on is on the host as ':state(placed-top)' and its kin, and the trigger's width is on the panel as '--floating-anchor-inline-size', for a panel as wide as its trigger:  '''css helix-popover::part(popover) {   min-inline-size: var(--floating-anchor-inline-size); } ''' */
   "helix-headless-popover": DefineCustomElement<
     HelixHeadlessPopover,
     HelixHeadlessPopoverVueProps,
@@ -17251,7 +17440,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 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. */
   "helix-headless-scatter-chart": DefineCustomElement<
     HelixHeadlessScatterChart,
     HelixHeadlessScatterChartVueProps,
@@ -17311,7 +17500,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessSpeedDialVueProps,
     HelixHeadlessSpeedDialVueEvents
   >;
-  /** A splitter has one axis. Nest splitters to get two axes and three-pane or four-pane layouts.  When a splitter is slotted into a pane of another at a right angle, a corner handle appears where the dividers cross. It shows the 'move' cursor, responds to both arrow axes, and a drag moves both dividers at once. The corner is added at 'firstUpdated' and is not in the server markup. Before it appears, both dividers work on their own.  The divider has 'role="separator"' and 'aria-valuenow', with 'aria-valuetext' saying the start pane's share as a percentage in the nearest 'lang', or in the reader's locale where no 'lang' is set, and 'aria-controls' names the start pane. Drag it with a pointer or move it with the arrow keys, press 'Home' or 'End' to move it to its bounds, and press 'Enter' to collapse the start pane and open it again. A drag in progress is tracked as a state, so both dividers a corner moves stay lit for as long as they move.  By default, 'min' and 'max' let the divider reach either edge, so you can drag a pane fully closed. Set them to limit the range.  A pane can be collapsed, which is a separate state from a divider at the edge. 'collapsed' names the shut pane, 'start' or 'end', and the pane opens back to the position where the collapsing gesture began. A drag records that position on press, and every other way of collapsing records it in 'settle'. 'collapsed-size' keeps a sliver of the pane visible, such as a tab strip. Collapsing overrides 'min' and 'max'. */
+  /** A splitter has one axis. Nest splitters to get two axes and three-pane or four-pane layouts.  When a splitter is slotted into a pane of another at a right angle, a corner handle appears where the dividers cross. It shows the 'move' cursor, responds to both arrow axes, and a drag moves both dividers at once. The corner is added at 'firstUpdated' and is not in the server markup. Before it appears, both dividers work on their own.  The divider has 'role="separator"' and 'aria-valuenow', with 'aria-valuetext' saying the start pane's share as a percentage in the nearest 'lang', or in the reader's locale where no 'lang' is set, and 'aria-controls' names the start pane. Drag it with a pointer or move it with the arrow keys, press 'Home' or 'End' to move it to its bounds, and press 'Enter' to collapse the start pane and open it again. A drag in progress is tracked as a state, so both dividers a corner moves stay lit for as long as they move.  By default, 'min' and 'max' let the divider reach either edge, so you can drag a pane fully closed. Set them to limit the range.  A pane can be collapsed, which is a separate state from a divider at the edge. 'collapsed' names the shut pane, 'start' or 'end', and the pane opens back to the position where the collapsing gesture began. A drag records that position on press, and every other way of collapsing records it in 'settle'. 'collapsed-size' keeps a sliver of the pane visible, such as a tab strip. Collapsing overrides 'min' and 'max'.  Set 'primary' to the pane that keeps its size when the splitter's own size changes, such as a sidebar beside a window being resized. The other pane takes all of the change, as Web Awesome's split panel does. Without it, both panes keep their share.  **Keyboard.** The divider is one tab stop.  | Key | What it does | |---|---| | Left, Right | Moves a side-by-side divider by 'step'. On a right-to-left page, Left moves it toward the end. | | Up, Down | Moves a stacked divider by 'step'. | | Home, End | Moves the divider to its bounds. | | Enter | Collapses the start pane, and opens it again. | | F6 | Moves focus from one pane to the first control in the other, and from the divider to the start pane. | */
   "helix-headless-splitter": DefineCustomElement<
     HelixHeadlessSplitter,
     HelixHeadlessSplitterVueProps,
@@ -17359,13 +17548,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessTableColumnVueProps,
     HelixHeadlessTableColumnVueEvents
   >;
-  /** Lays out the rows on a CSS grid, so every column lines up across rows and each row stays a real element that can be styled, hidden, or made interactive. A '<table>' layout aligns columns but limits almost everything else.  A grid of elements has no table structure for assistive technology, so the roles are set explicitly: 'table', 'row', 'cell', 'columnheader', and 'rowheader' for a 'header' cell in a row of values. Rows are 'display: contents', so their cells become items of the one grid.  **Sorting.** A column with 'sortable' and a 'field' draws its heading as a button that sorts the rows by the text of its cells, numbers by their value. Your markup is not reordered: the table draws the rows in the sorted order.  1. Each press cycles the column through ascending, descending, and the    order the rows were written in, which keeps a server's own ranking    reachable. 2. 'helix-sort' asks first, with 'field:direction', or empty for the written    order. Refuse it to keep the order, or to sort the rows yourself and set    'sort'. 3. 'helix-sorted' follows once the order stands, and 'sort' holds it. 4. The heading carries 'aria-sort', and a screen reader hears 'sorted-label'    ("Sorted by Name, ascending") or 'unsorted-label' from a polite region.  Tab reaches each sort button, and Enter or Space presses it.  The 'heading' slot names the table: slot a heading or a line of text into it, and the table is named by its words. An 'aria-label' or 'aria-labelledby' on the host wins over it.  **Selecting.** 'selectable' adds a column of checkboxes.  1. Each row is known by its 'value', or by its place among the rows where it    has none, and 'selected' holds the chosen keys, comma separated, the same    shape 'DataTable' uses. 'default-selected' is where it starts. 2. A row's checkbox is named by 'select-row-label' ("Select {row}") with the    words of the row's first cell. The checkbox in the heading selects every    row, and shows a dash while only some are chosen. 3. 'helix-select' asks first, with every key the change would leave.    Refuse it to keep the selection. 'helix-selected' follows once it stands. 4. A chosen row takes ':state(selected)', and a screen reader hears    'selected-label' ("2 selected") from a polite region.  Tab reaches each checkbox, and Space ticks it. To act on one row, put a link or a button in a cell, or give the row an 'href'.  **Moving rows.** 'reorderable' adds a column of grips before the checkboxes, under a heading named by 'row-grips-label'.  1. Each row is known by its 'value', or by its place among the rows where it    has none, as for selecting. Give rows a 'value' when they move, so a key    stays with its row. 2. A grip is a button named by 'move-row-label' ("Move {row}") with the    words of the row's first cell. Drag it to move its row, and the page    scrolls near an edge. Or press it with Space, Enter, or a click to pick    the row up, move it with Up, Down, Home, and End, and press it again to    drop it. A click on another row drops it there, and Escape puts it back. 3. 'helix-before-reorder' asks first, and 'helix-reorder' follows with    'keys', every row's key in the new order. **You move the rows**: the    table moves no element of yours, and focus goes back to the moved row's    grip once you have. 4. Each step is said in the table's live region, in words you can change:    'picked-up-label', 'moved-label', 'dropped-label', and 'canceled-label'.    The grips do nothing while a sort is set.  **A grid.** 'grid' makes the table one tab stop that the arrow keys move through cell by cell, the headings included, as React Aria's table is. The table is then a 'grid' and each value a 'gridcell', and the table gives every cell a 'tabindex' so focus can rest on it: set 'grid' only where the cells may carry one. For typeahead and range selection, use 'DataTable'.  | Key | What it does | |---|---| | Right, Left | Moves one cell along the row. Left moves on, on a right-to-left page. | | Down, Up | Moves one row, the headings included. | | Home, End | Moves to the first or the last cell of the row. | | Control with Home or End | Moves to the first or the last cell of the table. | | Page Down, Page Up | Moves by the rows that fit in view. | | Enter, F2 | Moves into the cell's links and controls. Escape or F2 moves back to the cell, and Tab moves between the controls of one cell. | | Enter on a cell of a row with 'href' | Follows the row's link. | | Enter, Space on a sortable heading | Sorts by the column. | | Space on a row, Enter or Space on its checkbox cell | Selects the row, in a 'selectable' table. | | Enter or Space on a grip cell | Picks the row up, or drops it, in a 'reorderable' table. Up, Down, Home, and End move a row picked up, and Escape puts it back. | | Control or Command with A | Selects every row, in a 'selectable' table. | | Tab | Leaves the table. |  The CSS custom properties listed for this component are written by it and read by the stylesheet that draws it. Do not set them. Each holds a number the component computes and CSS cannot, so the stylesheet can draw the table without measuring anything. */
+  /** Lays out the rows on a CSS grid, so every column lines up across rows and each row stays a real element that can be styled, hidden, or made interactive. A '<table>' layout aligns columns but limits almost everything else.  A grid of elements has no table structure for assistive technology, so the roles are set explicitly: 'table', 'row', 'cell', 'columnheader', and 'rowheader' for a 'header' cell in a row of values. Rows are 'display: contents', so their cells become items of the one grid.  **Sorting.** A column with 'sortable' and a 'field' draws its heading as a button that sorts the rows by the text of its cells, numbers by their value. Your markup is not reordered: the table draws the rows in the sorted order.  1. Each press cycles the column through ascending, descending, and the    order the rows were written in, which keeps a server's own ranking    reachable. 2. 'helix-sort' asks first, with 'field:direction', or empty for the written    order. Refuse it to keep the order, or to sort the rows yourself and set    'sort'. 3. 'helix-sorted' follows once the order stands, and 'sort' holds it. 4. The heading carries 'aria-sort', and a screen reader hears 'sorted-label'    ("Sorted by Name, ascending") or 'unsorted-label' from a polite region.  Tab reaches each sort button, and Enter or Space presses it.  The 'heading' slot names the table: slot a heading or a line of text into it, and the table is named by its words. An 'aria-label' or 'aria-labelledby' on the host wins over it.  **Selecting.** 'selectable' adds a column of checkboxes.  1. Each row is known by its 'value', or by its place among the rows where it    has none, and 'selected' holds the chosen keys, comma separated, the same    shape 'DataTable' uses. 'default-selected' is where it starts. 2. A row's checkbox is named by 'select-row-label' ("Select {row}") with the    words of the row's first cell. The checkbox in the heading selects every    row, and shows a dash while only some are chosen. 3. 'helix-select' asks first, with every key the change would leave.    Refuse it to keep the selection. 'helix-selected' follows once it stands. 4. A chosen row takes ':state(selected)', and a screen reader hears    'selected-label' ("2 selected") from a polite region.  Tab reaches each checkbox, and Space ticks it. To act on one row, put a link or a button in a cell, or give the row an 'href'.  **Moving rows.** 'reorderable' adds a column of grips before the checkboxes, under a heading named by 'row-grips-label'.  1. Each row is known by its 'value', or by its place among the rows where it    has none, as for selecting. Give rows a 'value' when they move, so a key    stays with its row. 2. A grip is a button named by 'move-row-label' ("Move {row}") with the    words of the row's first cell. Drag it to move its row, and the page    scrolls near an edge. Or press it with Space, Enter, or a click to pick    the row up, move it with Up, Down, Home, and End, and press it again to    drop it. A click on another row drops it there, and Escape puts it back. 3. 'helix-before-reorder' asks first, and 'helix-reorder' follows with    'keys', every row's key in the new order. **You move the rows**: the    table moves no element of yours, and focus goes back to the moved row's    grip once you have. 4. Each step is said in the table's live region, in words you can change:    'picked-up-label', 'moved-label', 'dropped-label', and 'canceled-label'.    The grips do nothing while a sort is set.  **A grid.** 'grid' makes the table one tab stop that the arrow keys move through cell by cell, the headings included, as React Aria's table is. The table is then a 'grid' and each value a 'gridcell', and the table gives every cell a 'tabindex' so focus can rest on it: set 'grid' only where the cells may carry one.  | Key | What it does | |---|---| | Right, Left | Moves one cell along the row. Left moves on, on a right-to-left page. | | Down, Up | Moves one row, the headings included. | | Home, End | Moves to the first or the last cell of the row. | | Control with Home or End | Moves to the first or the last cell of the table. | | Page Down, Page Up | Moves by the rows that fit in view. | | Enter, F2 | Moves into the cell's links and controls. Escape or F2 moves back to the cell, and Tab moves between the controls of one cell. | | Enter on a cell of a row with 'href' | Follows the row's link. | | Enter, Space on a sortable heading | Sorts by the column. | | Space on a row, Enter or Space on its checkbox cell | Selects the row, in a 'selectable' table. | | Enter or Space on a grip cell | Picks the row up, or drops it, in a 'reorderable' table. Up, Down, Home, and End move a row picked up, and Escape puts it back. | | Shift with Down or Up | Selects the rows it moves across, in a 'selectable' table. | | Shift with Space | Selects every row from the one last chosen, in a 'selectable' table. | | Control or Command with A | Selects every row, in a 'selectable' table. | | A letter or a word | Moves to the next row whose first cell starts with what you typed. | | Tab | Leaves the table. |  The CSS custom properties listed for this component are written by it and read by the stylesheet that draws it. Do not set them. Each holds a number the component computes and CSS cannot, so the stylesheet can draw the table without measuring anything. */
   "helix-headless-table": DefineCustomElement<
     HelixHeadlessTable,
     HelixHeadlessTableVueProps,
     HelixHeadlessTableVueEvents
   >;
-  /** The row renders its cells straight through and lays out none of them, so a stylesheet can place them in the table's grid and every column lines up across rows. The row still exists as an element, so you can style it, hide it, or make it interactive.  In a 'selectable' table the row draws a checkbox cell before its own cells, and 'value' is the key the table's 'selected' lists it by.  In a 'reorderable' table the row draws a grip cell before those, holding a button named by the table's 'move-row-label', and 'value' is the key 'helix-reorder' lists it by. The table says which row is moving and where the drop indicator is, with the 'dragging', 'drop-before', and 'drop-after' states.  **'href' makes the whole row a link**, as a row action does in React Aria's table: a press anywhere on the row follows it, except on a link or a control of the row's own, and Control, Command or Shift open it the way they open a link. A drag that selects text follows nothing. A row in a table is not a stop of its own, so put the same link in a cell, usually the row header, which is what the keyboard and a screen reader reach. In a 'grid' table, Enter on any cell of the row follows it as well. */
+  /** The row renders its cells straight through and lays out none of them, so a stylesheet can place them in the table's grid and every column lines up across rows. The row still exists as an element, so you can style it, hide it, or make it interactive.  In a 'selectable' table the row draws a checkbox cell before its own cells, and 'value' is the key the table's 'selected' lists it by. 'disabled' keeps the row out of the selection and out of its link.  In a 'reorderable' table the row draws a grip cell before those, holding a button named by the table's 'move-row-label', and 'value' is the key 'helix-reorder' lists it by. The table says which row is moving and where the drop indicator is, with the 'dragging', 'drop-before', and 'drop-after' states.  **'href' makes the whole row a link**, as a row action does in React Aria's table: a press anywhere on the row follows it, except on a link or a control of the row's own, and Control, Command or Shift open it the way they open a link. A drag that selects text follows nothing. A row in a table is not a stop of its own, so put the same link in a cell, usually the row header, which is what the keyboard and a screen reader reach. In a 'grid' table, Enter on any cell of the row follows it as well. */
   "helix-headless-table-row": DefineCustomElement<
     HelixHeadlessTableRow,
     HelixHeadlessTableRowVueProps,
@@ -17377,7 +17566,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessTabPanelVueProps,
     HelixHeadlessTabPanelVueEvents
   >;
-  /** Selection works through an event, the same as in the accordion and the tree. A tab dispatches 'helix-select', and the root pairs it with the panel of the same value. Nothing registers with anything, so tabs added later work with no extra setup.  The tab list is a single tab stop, and the arrow keys move between tabs through 'KeyboardNavigationController', the same as in the radio and toggle groups. Selection follows focus, which suits a small set where showing a panel is cheap. Set 'manual' when showing a panel is expensive, so focus can move without selecting.  'orientation="vertical"' sets the tabs in a column beside the panels, and the tab list says 'aria-orientation="vertical"'. The arrow keys of both axes move between tabs either way.  A tab with an 'href' is a link, for tabs that are pages of a site. Pressing it follows the link. Where any tab is a link, the arrow keys move focus without choosing on every tab of the list, as under 'manual', so arrowing past a tab never leaves the page and the list answers the keys one way. Mark the tab of the page you are on with 'selected', or set 'active' to its value.  Each tab says which panel it controls through 'aria-controls', set as an element reference to the panel's host, where the engine has reflection.  Keys, on the tab list: Left and Right Arrow move between tabs, and so do Up and Down; Home and End go to the first and the last. The horizontal arrows follow the reading direction, so on a right-to-left page Left moves on. Disabled tabs are passed over. Tab leaves the list for the selected panel, which is a tab stop only while it holds nothing focusable.  The 'indicator' part moves to the selected tab and carries its place and size, so a mark of your own can be drawn there: style the part, or slot an element into 'indicator', which sits inside the part and reads the same properties. */
+  /** Selection works through an event, the same as in the accordion and the tree. A tab dispatches 'helix-select', and the root pairs it with the panel of the same value. Nothing registers with anything, so tabs added later work with no extra setup.  The tab list is a single tab stop, and the arrow keys move between tabs through 'KeyboardNavigationController', the same as in the radio and toggle groups. Selection follows focus, which suits a small set where showing a panel is cheap. Set 'manual' when showing a panel is expensive, so focus can move without selecting.  'orientation="vertical"' sets the tabs in a column beside the panels, and the tab list says 'aria-orientation="vertical"'. The arrow keys of both axes move between tabs either way.  A tab with an 'href' is a link, for tabs that are pages of a site. Pressing it follows the link. Where any tab is a link, the arrow keys move focus without choosing on every tab of the list, as under 'manual', so arrowing past a tab never leaves the page and the list answers the keys one way. Mark the tab of the page you are on with 'selected', or set 'active' to its value.  Each tab says which panel it controls through 'aria-controls', set as an element reference to the panel's host, where the engine has reflection.  Keys, on the tab list: Left and Right Arrow move between tabs, and so do Up and Down; Home and End go to the first and the last. The horizontal arrows follow the reading direction, so on a right-to-left page Left moves on. Disabled tabs are passed over. Tab leaves the list for the selected panel, which is a tab stop only while it holds nothing focusable.  **Keyboard.**  | Key | What it does | |---|---| | Right, Down | Moves to the next tab, from the last round to the first. Selects it, unless 'manual' is set or a tab is a link. | | Left, Up | Moves to the tab before, from the first round to the last. | | Home, End | Moves to the first or the last tab. | | Enter, Space | Selects the tab with focus, or follows its link. | | Tab | Leaves the list for the selected panel. |  Removing the selected tab selects the first enabled tab that is left, and 'active' says so, with 'helix-activate'. Where the removed tab had focus, focus moves to the tab now selected.  The 'indicator' part moves to the selected tab and carries its place and size, so a mark of your own can be drawn there: style the part, or slot an element into 'indicator', which sits inside the part and reads the same properties. */
   "helix-headless-tabs": DefineCustomElement<
     HelixHeadlessTabs,
     HelixHeadlessTabsVueProps,
@@ -17473,13 +17662,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessTooltipVueProps,
     HelixHeadlessTooltipVueEvents
   >;
-  /** The root holds the order of the stops: which stop is current, what Next and Back do, and when the tour is finished. Each stop holds its target, and you write all the text.  **The spotlight is a shadow.** The scrim is a box the size of the current target with a very large 'box-shadow' spread, and the shadow paints the darkness. A 'clip-path' on a full-screen scrim breaks as soon as an element between the scrim and the viewport is transformed.  The root measures the target's position in the browser. Nothing is measured on the server, because a tour starts only on request.  'open', 'default-open', 'helix-before-open', 'helix-before-close' and 'toggle' work as they do on 'Dialog'. Setting 'open' starts the run, and 'skip()' and 'requestOpen(false)' end it early.  The box the light falls on is on the 'spotlight' part as '--tour-spotlight-x', '--tour-spotlight-y', '--tour-spotlight-width' and '--tour-spotlight-height', for a sheet that draws its own light, such as a ring around the target.  Each stop is told its place in the run, from 'progress-label', such as "2 of 5". It describes the stop's panel, so a screen reader says it at every stop, and 'progress' draws it in the panel as well. A dialog or a floating stop, which has nothing to light, is shown over the 'backdrop' part. At a 'wait' stop the run waits for that stop's target to be on the page, and moves on by itself.  **Focus follows the run.** Opening moves focus to the first stop's panel, and moving on from a control in a stop moves it to the next one. Ending the tour puts focus back on the element that had it when the tour opened, unless you have moved it somewhere else on the page. A stop does not trap focus, so you can still 'Tab' out to the element it describes.  **The arrow keys move between stops** while focus is in one: the arrow that points the way the line runs goes on, and the other goes back, so on a right-to-left page 'ArrowLeft' goes on. Neither finishes the tour at the last stop, and a text field in a stop keeps its own arrows. 'Escape' skips the tour. */
+  /** The root holds the order of the stops: which stop is current, what Next and Back do, and when the tour is finished. Each stop holds its target, and you write all the text.  **The spotlight is a shadow.** The scrim is a box the size of the current target with a very large 'box-shadow' spread, and the shadow paints the darkness. A 'clip-path' on a full-screen scrim breaks as soon as an element between the scrim and the viewport is transformed.  The root measures the target's position in the browser. Nothing is measured on the server, because a tour starts only on request.  'open', 'default-open', 'helix-before-open', 'helix-before-close' and 'toggle' work as they do on 'Dialog'. Setting 'open' starts the run, and 'skip()' and 'requestOpen(false)' end it early.  The box the light falls on is on the 'spotlight' part as '--tour-spotlight-x', '--tour-spotlight-y', '--tour-spotlight-width' and '--tour-spotlight-height', for a sheet that draws its own light, such as a ring around the target.  Each stop is told its place in the run, from 'progress-label', such as "2 of 5". It describes the stop's panel, so a screen reader says it at every stop, and 'progress' draws it in the panel as well. A dialog or a floating stop, which has nothing to light, is shown over the 'backdrop' part. At a 'wait' stop the run waits for that stop's target to be on the page, and moves on by itself.  **Focus follows the run.** Opening moves focus to the first stop's panel, and moving on from a control in a stop moves it to the next one. Ending the tour puts focus back on the element that had it when the tour opened, unless you have moved it somewhere else on the page. A stop does not trap focus, so you can still 'Tab' out to the element it describes.  **The target is scrolled into view** before its stop is shown, by the least distance that brings it on screen, so the stop that points at it is on screen too.  **Keyboard.** Focus is on the current stop's panel, which is not in the 'Tab' order itself.  | Key | What it does | |---|---| | Right | Goes to the next stop. On the last stop it does nothing, and Next finishes the tour. | | Left | Goes back to the previous stop. | | Escape | Skips the tour, and puts focus back where it was when the tour opened. | | Tab, Shift+Tab | Moves through the controls in the stop, and on out to the page. A stop does not trap focus. | | Enter, Space | On Back, Next, or Skip, presses it. |  The arrow that points the way the line runs goes on, and the other goes back, so on a right-to-left page Left goes on and Right goes back. A text field in a stop keeps its own arrows.  The tour is a region named by 'label' while it runs. A development build warns when a tour opens with no 'label'. */
   "helix-headless-tour": DefineCustomElement<
     HelixHeadlessTour,
     HelixHeadlessTourVueProps,
     HelixHeadlessTourVueEvents
   >;
-  /** A stop names its target with 'for' and holds the content you put in it. The stop handles three things:  - **Placement.** The panel is anchored to the target by the same floating   positioning as the other Helix overlays. - **Stacking.** The panel is a popover, so it is in the top layer and shows   above dialogs, scrolling regions, and other stacking contexts. - **Visibility.** The stop shows when it is 'current', which the root sets.  Put any content in the stop, such as a 'Card', or a heading and a line of text. The 'heading' and 'description' slots are optional places for the title and the line under it, which then name and describe the panel.  **A stop has a type.** Without one it is a bubble pointing at its target. 'type="dialog"' is a panel in the middle of the window, over a backdrop, for a welcome or a summary with nothing to point at. 'type="floating"' is a panel in a corner of the window, which the styled tier puts at the end of the line, for a note that points at nothing in particular. 'type="wait"' shows nothing: the tour waits for the element 'for' names to be on the page, such as a menu the reader has to open, and moves on by itself.  **The buttons are slot fallback.** With nothing in the 'actions' slot, you get Back, Next, and Skip, already wired. Slot your own 'actions' and drive them with 'next()', 'back()', and 'skip()' on the root.  **'for' is an id, as with 'Tooltip'**, so you can point at a target elsewhere on the page from markup. It resolves against the stop's root node, so a stop inside a shadow tree points at a target in that tree.  The panel is a 'group', and a 'dialog' for a dialog stop, only while the stop is shown. It is named by the 'heading' slot, then by the first heading in the content, then by 'label', and otherwise by its place in the tour. It is described by the 'description' slot and by its place, such as "2 of 5", so a screen reader says where the reader is at every stop. 'focus()' moves focus to the panel, which is what the tour does when it opens or moves on. */
+  /** A stop names its target with 'for' and holds the content you put in it. The stop handles three things:  - **Placement.** The panel is anchored to the target by the same floating   positioning as the other Helix overlays. - **Stacking.** The panel is a popover, so it is in the top layer and shows   above dialogs, scrolling regions, and other stacking contexts. - **Visibility.** The stop shows when it is 'current', which the root sets.  Put any content in the stop, such as a 'Card', or a heading and a line of text. The 'heading' and 'description' slots are optional places for the title and the line under it, which then name and describe the panel.  **A stop has a type.** Without one it is a bubble pointing at its target. 'type="dialog"' is a panel in the middle of the window, over a backdrop, for a welcome or a summary with nothing to point at. 'type="floating"' is a panel in a corner of the window, which the styled tier puts at the end of the line, for a note that points at nothing in particular. 'type="wait"' shows nothing: the tour waits for the element 'for' names to be on the page, such as a menu the reader has to open, and moves on by itself.  **The buttons are slot fallback.** With nothing in the 'actions' slot, you get Back, Next, and Skip, already wired. Slot your own 'actions' and drive them with 'next()', 'back()', and 'skip()' on the root.  **'for' is an id, as with 'Tooltip'**, so you can point at a target elsewhere on the page from markup. It resolves against the stop's root node, so a stop inside a shadow tree points at a target in that tree.  The panel is a 'group', and a 'dialog' for a dialog stop, only while the stop is shown. It is named by the 'heading' slot, then by the first heading in the content, then by 'label', and otherwise by its place in the tour. It is described by the 'description' slot, or where that is empty by the words at the start of the content, and by its place, such as "2 of 5", so a screen reader says where the reader is at every stop. 'focus()' moves focus to the panel, which is what the tour does when it opens or moves on. */
   "helix-headless-tour-stop": DefineCustomElement<
     HelixHeadlessTourStop,
     HelixHeadlessTourStopVueProps,
@@ -17491,7 +17680,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessTreeItemVueProps,
     HelixHeadlessTreeItemVueEvents
   >;
-  /** The tree is a single tab stop, and arrow keys move focus between items, as the tree pattern requires, so Tab moves past a long sidebar in one press. The tree moves the tab stop to the focused item, so the browser's focus order stays intact.  Items are found with 'instanceof', never by tag name, so the headless tier does not depend on the styled one.  Typing a letter moves to the next visible item whose name starts with it, and '*' opens every branch beside the focused item.  'selection-mode="multiple"' draws a check mark on every row and lets a reader check many, as Web Awesome's and Ark UI's checkbox trees do. Checking a branch checks every item under it, and a branch some of whose items are checked is partly checked. Space or a press on the mark checks the focused row, and Enter or a press on a branch's row opens it. 'active' then holds the checked values, comma separated, which 'values' also gives as a list, and the tree says 'aria-multiselectable'.  'selection-mode="leaf"' chooses one item at a time and only the items at the ends: a press, Enter or Space on a branch opens or closes it and chooses nothing, as Web Awesome's 'leaf' mode does.  Keys: Up and Down Arrow move between the items a reader can see; Right Arrow opens a shut branch and then moves into it, and Left Arrow shuts an open one and then moves to its parent, the two swapping on a right-to-left page. Home and End go to the first and the last item, Enter and Space choose or open, and the tree's one tab stop stays on the item last reached. In a tree of check marks, Control+A (Command+A on an Apple keyboard) checks every item or clears them all, and Shift with Up or Down Arrow moves and checks.  **'reorderable' lets you move items among their siblings.** Alt with Up or Down moves the focused item a place, and Alt with Home or End to the first or the last place among its siblings, as the APG's rearrangeable listbox does. Each row gets a grip at its far end: drag it to move the item, and the tree scrolls near an edge. A click on a grip picks the item up and a click on one of its siblings drops it there, which needs no drag. The arrows move an item picked up that way, Enter or Space drops it, and Escape puts it back. The tree says each step in its 'live' region. A drop sends 'helix-before-reorder', which you can refuse, and then 'helix-reorder', whose 'keys' hold the siblings in the new order. **You move the items**: the tree moves no element of yours, and focus follows the moved item once you have. Moving an item into another branch is not part of this. */
+  /** The tree is a single tab stop, and arrow keys move focus between items, as the tree pattern requires, so Tab moves past a long sidebar in one press. The tree moves the tab stop to the focused item, so the browser's focus order stays intact.  Items are found with 'instanceof', never by tag name, so the headless tier does not depend on the styled one.  Typing a letter moves to the next visible item whose name starts with it, and '*' opens every branch beside the focused item.  'selection-mode="multiple"' draws a check mark on every row and lets a reader check many, as Web Awesome's and Ark UI's checkbox trees do. Checking a branch checks every item under it, and a branch some of whose items are checked is partly checked. Space or a press on the mark checks the focused row, and Enter or a press on a branch's row opens it. 'active' then holds the checked values, comma separated, which 'values' also gives as a list, and the tree says 'aria-multiselectable'.  'selection-mode="leaf"' chooses one item at a time and only the items at the ends: a press, Enter or Space on a branch opens or closes it and chooses nothing, as Web Awesome's 'leaf' mode does.  Keys: Up and Down Arrow move between the items a reader can see; Right Arrow opens a shut branch and then moves into it, and Left Arrow shuts an open one and then moves to its parent, the two swapping on a right-to-left page. Home and End go to the first and the last item, Enter and Space choose or open, and the tree's one tab stop stays on the item last reached. In a tree of check marks, Control+A (Command+A on an Apple keyboard) checks every item or clears them all, and Shift with Up or Down Arrow moves and checks.  Removing the item that has focus moves focus to the item after it among its siblings, or the one before, or its parent, so focus stays in the tree.  **'reorderable' lets you move items among their siblings.** Alt with Up or Down moves the focused item a place, and Alt with Home or End to the first or the last place among its siblings, as the APG's rearrangeable listbox does. Each row gets a grip at its far end: drag it to move the item, and the tree scrolls near an edge. A click on a grip picks the item up and a click on one of its siblings drops it there, which needs no drag. The arrows move an item picked up that way, Enter or Space drops it, and Escape puts it back. The tree says each step in its 'live' region. A drop sends 'helix-before-reorder', which you can refuse, and then 'helix-reorder', whose 'keys' hold the siblings in the new order. **You move the items**: the tree moves no element of yours, and focus follows the moved item once you have. Moving an item into another branch is not part of this. */
   "helix-headless-tree": DefineCustomElement<
     HelixHeadlessTree,
     HelixHeadlessTreeVueProps,
@@ -17515,7 +17704,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessVideoPlaylistMenuVueProps,
     HelixHeadlessVideoPlaylistMenuVueEvents
   >;
-  /** **You slot the player**, so it keeps your appearance, extra controls, captions, and poster treatment. 'Sandbox' takes its preview and 'Menu' its trigger the same way.  **Entries are markup.** React skips properties it would set imperatively during hydration, so an array property on a custom element is missing on the first paint of a server-rendered page. 'using-the-elements.mdx' has the measurement. Markup also makes each entry a real button with its name inside.  **The playlist does not play media.** It sets 'src' on the player and tracks which entry is current. The current entry moves when:  - an entry is pressed, - the player dispatches 'helix-next' or 'helix-previous', or - the player reaches the end.  On 'ended' the playlist advances and the next clip starts playing, because the user already pressed play once. 'repeat' decides what happens at the end: 'one' plays the same entry again, and 'all' goes from the last entry back to the first. Without it, the playlist stops on the last entry and sends 'helix-end'. 'shuffle' plays the entries in a random order, starting from the one that is current, and 'previous' retraces that order.  **Keyboard.** Each entry is a button in the tab order, and Enter or Space plays it. The current entry carries 'aria-current'. While focus is on the player, the player's own keys work, and 'Video' lists them. Its previous and next controls move through the entries in the same order the playlist does. */
+  /** **You slot the player**, so it keeps your appearance, extra controls, captions, and poster treatment. 'Sandbox' takes its preview and 'Menu' its trigger the same way.  **Entries are markup.** React skips properties it would set imperatively during hydration, so an array property on a custom element is missing on the first paint of a server-rendered page. 'using-the-elements.mdx' has the measurement. Markup also makes each entry a real button with its name inside.  **The playlist does not play media.** It sets 'src' on the player and tracks which entry is current. The current entry moves when:  - an entry is pressed, - the player dispatches 'helix-next' or 'helix-previous', or - the player reaches the end.  On 'ended' the playlist advances and the next clip starts playing, because the user already pressed play once. 'repeat' decides what happens at the end: 'one' plays the same entry again, and 'all' goes from the last entry back to the first. Without it, the playlist stops on the last entry and sends 'helix-end'. 'shuffle' plays the entries in a random order, starting from the one that is current, and 'previous' retraces that order.  **The player is named by the current entry**, and the device's own media controls show the entry as the title. A player you gave a 'label' keeps your name, and only the title follows the entry.  **Keyboard.** Each entry is a button in the tab order, and Enter or Space plays it. The current entry carries 'aria-current'. While focus is on the player, the player's own keys work, and 'Video' lists them. Its previous and next controls move through the entries in the same order the playlist does. */
   "helix-headless-video-playlist": DefineCustomElement<
     HelixHeadlessVideoPlaylist,
     HelixHeadlessVideoPlaylistVueProps,
@@ -17527,7 +17716,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessVideoVueProps,
     HelixHeadlessVideoVueEvents
   >;
-  /** The items arrive as data, in one of two ways:  - 'items' takes an array. A framework sets it as a property, and React   hydration keeps it. - 'for' names a '<script type="application/json">' that holds an array, which   a server sends as markup.  Each item is drawn into a row in one of two ways:  - 'renderItem' is a function from an item and its index to the row's   content: a Lit template, a string, or a DOM node. - A '<template>' child defines one row. 'data-field="name"' fills an element   with the item's 'name' as text, and 'data-field-href="url"' writes the   item's 'url' into 'href', the same for any attribute. A field may be a path   of keys, such as 'author.name'.  Rows are your markup in the light DOM, so your stylesheet styles them.  **A grid.** 'columns' lays the items out that many to a line, as a grid of equal columns, and windows the set a line at a time, as React Aria's grid layout does. Each item draws one element, a cell of the grid, and 'estimate' is the height of a line. Space the items with padding inside each one, which the list measures with the line.  **Keyboard.** The list is one tab stop.  | Key | What it does | |---|---| | Down, Up | Moves to the next or the previous item, or in a grid to the item in the same column on the next or the previous line. | | Right, Left | In a grid, moves to the next or the previous item along the line, the other way round on a right-to-left page. | | Home, End | Moves to the first or the last item. | | Page Down, Page Up | Moves by the number of items, or of lines in a grid, on screen. | | A letter or a word | Moves to the next item whose text starts with what you typed. | | Tab | Moves into the focused row's own links and buttons, then out of the list. |  An item that is not drawn is scrolled into view and focused, so a keyboard reaches the whole set. When the row holding the tab stop scrolls away, the stop moves to the first row on screen. Typing matches each item's 'text-field', which is the first 'data-field' of the row template by default, or the item itself when it is a string or a number.  Each row says its place in the whole set with 'aria-posinset' and 'aria-setsize', so a screen reader says "4,000 of 10,000". The row holding focus stays drawn when it scrolls out.  **Selecting.** 'selection-mode' makes the list a list box a reader chooses from: 'single' selects one item and 'multiple' any number. Space or a press selects an item, Shift with Space, an arrow, Home, End or a press takes in the items from the last one chosen, and Control or Command with A selects them all, in 'multiple'. 'value' holds the chosen items' keys, separated by commas, in the order of the set: 'key-field' names each item's key, and a string or a number item is its own key. A change asks with 'helix-before-change' and tells with 'change'. Each row is an 'option' marked 'aria-selected', so a row's own links and buttons are not reached there: keep those to a list without 'selection-mode'.  **Loading more.** 'helix-range-change' fires as the items on screen change, and 'range' holds them. 'helix-load-more' fires once a reader is within one screen of the end, once for each length of the set: add to 'items' and it can fire again. While you fetch, set 'loading': the list is busy, and a row after the last item says "Loading more" ('loading-label', or your own content in the 'loading' slot). 'scrollToIndex' takes a reader to an item.  **Row height.** Rows are placed by 'estimate' until they are drawn. Then the list reads the drawn rows' height once and places every row by it, so a wrong estimate still reaches the last item. Set 'measured' for rows of different heights. Once the list draws rows of different heights, such as rows that wrap on a narrow screen, it places each row by its own height whether 'measured' is set or not.  The list follows its source. A new 'items' array, an edit to the script's text, or a script replaced under the same id draws the new rows. A row that stays in view keeps its element as the list scrolls.  The viewport scrolls on this tier. It carries 'data-scroller', and 'core' ships '[data-scroller] { overflow: auto }' into every shadow root, so 'scrollTop' works with no stylesheet. You still need to set a block size. */
+  /** The items arrive as data, in one of two ways:  - 'items' takes an array. A framework sets it as a property, and React   hydration keeps it. - 'for' names a '<script type="application/json">' that holds an array, which   a server sends as markup.  Each item is drawn into a row in one of two ways:  - 'renderItem' is a function from an item and its index to the row's   content: a Lit template, a string, or a DOM node. - A '<template>' child defines one row. 'data-field="name"' fills an element   with the item's 'name' as text, and 'data-field-href="url"' writes the   item's 'url' into 'href', the same for any attribute. A field may be a path   of keys, such as 'author.name'.  Rows are your markup in the light DOM, so your stylesheet styles them.  **A grid.** 'columns' lays the items out that many to a line, as a grid of equal columns, and windows the set a line at a time, as React Aria's grid layout does. Each item draws one element, a cell of the grid, and 'estimate' is the height of a line. Space the items with padding inside each one, which the list measures with the line.  **Keyboard.** The list is one tab stop.  | Key | What it does | |---|---| | Down, Up | Moves to the next or the previous item, or in a grid to the item in the same column on the next or the previous line. | | Right, Left | In a grid, moves to the next or the previous item along the line, the other way round on a right-to-left page. | | Home, End | Moves to the first or the last item. | | Page Down, Page Up | Moves by the number of items, or of lines in a grid, on screen. | | A letter or a word | Moves to the next item whose text starts with what you typed. | | Tab | Moves into the focused row's own links and buttons, then out of the list. |  An item that is not drawn is scrolled into view and focused, so a keyboard reaches the whole set. When the row holding the tab stop scrolls away, the stop moves to the first row on screen. Typing matches each item's 'text-field', which is the first 'data-field' of the row template by default, or the item itself when it is a string or a number.  Each row says its place in the whole set with 'aria-posinset' and 'aria-setsize', so a screen reader says "4,000 of 10,000". The row holding focus stays drawn when it scrolls out.  **Selecting.** 'selection-mode' makes the list a list box a reader chooses from: 'single' selects one item and 'multiple' any number. Space or a press selects an item, Shift with Space, an arrow, Home, End or a press takes in the items from the last one chosen, and Control or Command with A selects them all, in 'multiple'. 'value' holds the chosen items' keys, separated by commas, in the order of the set: 'key-field' names each item's key, and a string or a number item is its own key. A change asks with 'helix-before-change' and tells with 'change'. Each row is an 'option' marked 'aria-selected', so a row's own links and buttons are not reached there: keep those to a list without 'selection-mode'.  **Loading more.** 'helix-range-change' fires as the items on screen change, and 'range' holds them. 'helix-load-more' fires once a reader is within one screen of the end, once for each length of the set: add to 'items' and it can fire again. While you fetch, set 'loading': the list is busy, and a row after the last item says "Loading more" ('loading-label', or your own content in the 'loading' slot). 'scrollToIndex' takes a reader to an item.  **An empty list.** Set 'empty-label', or put your own content in the 'empty' slot, for a row shown when there are no items and none are loading, such as "No messages yet" and a link to write one. Without either, an empty list shows nothing, since a list whose items have not arrived yet has not said it has none.  **Row height.** Rows are placed by 'estimate' until they are drawn. Then the list reads the drawn rows' height once and places every row by it, so a wrong estimate still reaches the last item. Set 'measured' for rows of different heights. Once the list draws rows of different heights, such as rows that wrap on a narrow screen, it places each row by its own height whether 'measured' is set or not.  The list follows its source. A new 'items' array, an edit to the script's text, or a script replaced under the same id draws the new rows. A row that stays in view keeps its element as the list scrolls.  The viewport scrolls on this tier. It carries 'data-scroller', and 'core' ships '[data-scroller] { overflow: auto }' into every shadow root, so 'scrollTop' works with no stylesheet. You still need to set a block size. */
   "helix-headless-virtual-list": DefineCustomElement<
     HelixHeadlessVirtualList,
     HelixHeadlessVirtualListVueProps,