@fusion.dev/helix-headless 0.166.0 → 0.167.0

package/types/jsx.d.ts

@@ -8,6 +8,7 @@ import type {
   HelixBeforeCollapseEvent,
   HelixBeforeMoveEvent,
   HelixBeforeOpenEvent,
+  HelixBeforePasteEvent,
   HelixBeforePinEvent,
   HelixBeforeReconnectEvent,
   HelixBeforeRelabelEvent,
@@ -201,6 +202,7 @@ import type {
   HelixMoveEvent,
   HelixNavigateEvent,
   HelixNextEvent,
+  HelixPastedEvent,
   HelixPinEvent,
   HelixPressEvent,
   HelixPreviewEvent,
@@ -3335,6 +3337,9 @@ export type HelixHeadlessCanvasElementEvent<E = Event> = TypedEvent<
 /** `helix-before-move` event type */
 export type HelixHeadlessCanvasHelixBeforeMoveElementEvent =
   HelixHeadlessCanvasElementEvent<HelixBeforeMoveEvent>;
+/** `helix-before-paste` event type */
+export type HelixHeadlessCanvasHelixBeforePasteElementEvent =
+  HelixHeadlessCanvasElementEvent<HelixBeforePasteEvent>;
 /** `helix-before-reconnect` event type */
 export type HelixHeadlessCanvasHelixBeforeReconnectElementEvent =
   HelixHeadlessCanvasElementEvent<HelixBeforeReconnectEvent>;
@@ -3359,6 +3364,9 @@ export type HelixHeadlessCanvasHelixConnectElementEvent =
 /** `helix-move` event type */
 export type HelixHeadlessCanvasHelixMoveElementEvent =
   HelixHeadlessCanvasElementEvent<HelixMoveEvent>;
+/** `helix-pasted` event type */
+export type HelixHeadlessCanvasHelixPastedElementEvent =
+  HelixHeadlessCanvasElementEvent<HelixPastedEvent>;
 /** `helix-reconnect` event type */
 export type HelixHeadlessCanvasHelixReconnectElementEvent =
   HelixHeadlessCanvasElementEvent<HelixReconnectEvent>;
@@ -3379,6 +3387,10 @@ export type HelixHeadlessCanvasProps = {
   /** The hint shown when the board, waiting to be pressed with
 `gestures="activate"`, is scrolled or swiped over. */
   activateHintLabel?: (HelixHeadlessCanvas["activateHintLabel"]) | undefined;
+  /** What screen readers hear after `arrange()` moves the cards. */
+  "arranged-label"?: (HelixHeadlessCanvas["arrangedLabel"]) | undefined;
+  /** What screen readers hear after `arrange()` moves the cards. */
+  arrangedLabel?: (HelixHeadlessCanvas["arrangedLabel"]) | undefined;
   /** The text read with a card to say where its connections come from, with `{cards}`. */
   "comes-from-label"?: (HelixHeadlessCanvas["comesFromLabel"]) | undefined;
   /** The text read with a card to say where its connections come from, with `{cards}`. */
@@ -3477,6 +3489,10 @@ on a board that is a flow is the order its author meant.
 Absent is spatial, a resting value being an attribute's absence: a default
 that reflected would write a choice onto every host that no server sent. */
   order?: (HelixHeadlessCanvas["order"]) | undefined;
+  /** What screen readers hear after a paste, with `{count}` for the cards pasted. */
+  "pasted-label"?: (HelixHeadlessCanvas["pastedLabel"]) | undefined;
+  /** What screen readers hear after a paste, with `{count}` for the cards pasted. */
+  pastedLabel?: (HelixHeadlessCanvas["pastedLabel"]) | undefined;
   /** The route every connection takes when it sets no `path` of its own:
 `straight`, or `step` for right angles.
 
@@ -3510,6 +3526,14 @@ walk the cards. */
   "redone-label"?: (HelixHeadlessCanvas["redoneLabel"]) | undefined;
   /** What screen readers hear after a move or a resize is made again. */
   redoneLabel?: (HelixHeadlessCanvas["redoneLabel"]) | undefined;
+  /** What screen readers hear when Delete asks to remove what is selected, with
+`{count}` for how many cards and connections, and `{name}` for the one
+where there is one. */
+  "removed-label"?: (HelixHeadlessCanvas["removedLabel"]) | undefined;
+  /** What screen readers hear when Delete asks to remove what is selected, with
+`{count}` for how many cards and connections, and `{name}` for the one
+where there is one. */
+  removedLabel?: (HelixHeadlessCanvas["removedLabel"]) | undefined;
   /** What screen readers hear after a key resizes a card, with `{name}` for the
 card and `{width}` and `{height}` for its new size, in the document's
 units. */
@@ -3787,6 +3811,10 @@ it rather than fitting the board again. */
   "onhelix-before-move"?: ((
     e: HelixHeadlessCanvasHelixBeforeMoveElementEvent,
   ) => void) | undefined;
+  /** Cards and connections are about to be pasted. Cancelable: cancel it to add the detail's document to your own state. */
+  "onhelix-before-paste"?: ((
+    e: HelixHeadlessCanvasHelixBeforePasteElementEvent,
+  ) => void) | undefined;
   /** A connection's end is about to move to another card or side. Cancelable: cancel it to keep connections in your own state. */
   "onhelix-before-reconnect"?: ((
     e: HelixHeadlessCanvasHelixBeforeReconnectElementEvent,
@@ -3815,6 +3843,8 @@ it rather than fitting the board again. */
   "onhelix-connect"?: ((e: HelixHeadlessCanvasHelixConnectElementEvent) => void) | undefined;
   /** Cards moved and the move is finished: a drag was released, a click put a card down, or a key was pressed. */
   "onhelix-move"?: ((e: HelixHeadlessCanvasHelixMoveElementEvent) => void) | undefined;
+  /** Cards and connections were pasted, and the board holds them. */
+  "onhelix-pasted"?: ((e: HelixHeadlessCanvasHelixPastedElementEvent) => void) | undefined;
   /** A connection's end moved, and the move is finished. */
   "onhelix-reconnect"?: ((
     e: HelixHeadlessCanvasHelixReconnectElementEvent,
@@ -3834,6 +3864,10 @@ export type HelixHeadlessCanvasSolidJsProps = {
   /** The hint shown when the board, waiting to be pressed with
 `gestures="activate"`, is scrolled or swiped over. */
   "prop:activateHintLabel"?: (HelixHeadlessCanvas["activateHintLabel"]) | undefined;
+  /** What screen readers hear after `arrange()` moves the cards. */
+  "attr:arranged-label"?: (HelixHeadlessCanvas["arrangedLabel"]) | undefined;
+  /** What screen readers hear after `arrange()` moves the cards. */
+  "prop:arrangedLabel"?: (HelixHeadlessCanvas["arrangedLabel"]) | undefined;
   /** The text read with a card to say where its connections come from, with `{cards}`. */
   "attr:comes-from-label"?: (HelixHeadlessCanvas["comesFromLabel"]) | undefined;
   /** The text read with a card to say where its connections come from, with `{cards}`. */
@@ -3932,6 +3966,10 @@ on a board that is a flow is the order its author meant.
 Absent is spatial, a resting value being an attribute's absence: a default
 that reflected would write a choice onto every host that no server sent. */
   "prop:order"?: (HelixHeadlessCanvas["order"]) | undefined;
+  /** What screen readers hear after a paste, with `{count}` for the cards pasted. */
+  "attr:pasted-label"?: (HelixHeadlessCanvas["pastedLabel"]) | undefined;
+  /** What screen readers hear after a paste, with `{count}` for the cards pasted. */
+  "prop:pastedLabel"?: (HelixHeadlessCanvas["pastedLabel"]) | undefined;
   /** The route every connection takes when it sets no `path` of its own:
 `straight`, or `step` for right angles.
 
@@ -3965,6 +4003,14 @@ walk the cards. */
   "attr:redone-label"?: (HelixHeadlessCanvas["redoneLabel"]) | undefined;
   /** What screen readers hear after a move or a resize is made again. */
   "prop:redoneLabel"?: (HelixHeadlessCanvas["redoneLabel"]) | undefined;
+  /** What screen readers hear when Delete asks to remove what is selected, with
+`{count}` for how many cards and connections, and `{name}` for the one
+where there is one. */
+  "attr:removed-label"?: (HelixHeadlessCanvas["removedLabel"]) | undefined;
+  /** What screen readers hear when Delete asks to remove what is selected, with
+`{count}` for how many cards and connections, and `{name}` for the one
+where there is one. */
+  "prop:removedLabel"?: (HelixHeadlessCanvas["removedLabel"]) | undefined;
   /** What screen readers hear after a key resizes a card, with `{name}` for the
 card and `{width}` and `{height}` for its new size, in the document's
 units. */
@@ -4241,6 +4287,10 @@ it rather than fitting the board again. */
   "on:helix-before-move"?: ((
     e: HelixHeadlessCanvasHelixBeforeMoveElementEvent,
   ) => void) | undefined;
+  /** Cards and connections are about to be pasted. Cancelable: cancel it to add the detail's document to your own state. */
+  "on:helix-before-paste"?: ((
+    e: HelixHeadlessCanvasHelixBeforePasteElementEvent,
+  ) => void) | undefined;
   /** A connection's end is about to move to another card or side. Cancelable: cancel it to keep connections in your own state. */
   "on:helix-before-reconnect"?: ((
     e: HelixHeadlessCanvasHelixBeforeReconnectElementEvent,
@@ -4269,6 +4319,8 @@ it rather than fitting the board again. */
   "on:helix-connect"?: ((e: HelixHeadlessCanvasHelixConnectElementEvent) => void) | undefined;
   /** Cards moved and the move is finished: a drag was released, a click put a card down, or a key was pressed. */
   "on:helix-move"?: ((e: HelixHeadlessCanvasHelixMoveElementEvent) => void) | undefined;
+  /** Cards and connections were pasted, and the board holds them. */
+  "on:helix-pasted"?: ((e: HelixHeadlessCanvasHelixPastedElementEvent) => void) | undefined;
   /** A connection's end moved, and the move is finished. */
   "on:helix-reconnect"?: ((
     e: HelixHeadlessCanvasHelixReconnectElementEvent,
@@ -14212,7 +14264,8 @@ such as `buddhist` for `th-TH`, and `gregory` for every other, such as
 `persian` for `fa-IR`, so a date written here reads as the same date a
 Date Picker beside it shows. Write `calendar="persian"` for Mehr 14, 1405. */
   calendar?: (HelixHeadlessFormatDate["calendar"]) | undefined;
-  /** The timestamp, in any format `Date` can parse.
+  /** The timestamp: a `Date`, milliseconds since the epoch, or a string in any
+format `Date` can parse. The attribute is the string.
 
 An ISO string is what an API sends and what `<time datetime>` takes, so it
 is the shape that needs no translation at either end. Left unset this
@@ -14356,7 +14409,8 @@ such as `buddhist` for `th-TH`, and `gregory` for every other, such as
 `persian` for `fa-IR`, so a date written here reads as the same date a
 Date Picker beside it shows. Write `calendar="persian"` for Mehr 14, 1405. */
   "prop:calendar"?: (HelixHeadlessFormatDate["calendar"]) | undefined;
-  /** The timestamp, in any format `Date` can parse.
+  /** The timestamp: a `Date`, milliseconds since the epoch, or a string in any
+format `Date` can parse. The attribute is the string.
 
 An ISO string is what an API sends and what `<time datetime>` takes, so it
 is the shape that needs no translation at either end. Left unset this
@@ -29513,6 +29567,15 @@ order has its whole sentence. `{order}` is the deprecated
   "unsorted-label"?: (HelixHeadlessTable["unsortedLabel"]) | undefined;
   /** What screen readers hear when the table stops being sorted. */
   unsortedLabel?: (HelixHeadlessTable["unsortedLabel"]) | undefined;
+  /** Draws only the rows in view, with empty space in place of the rest, as
+Data Table's `windowed` does. The table's box then scrolls, at the
+height `--table-block-size` gives it in the styled tier, and the
+headings stick to its top.
+
+Off by default. Windowing costs a scroll listener, a measurement per row
+drawn, and a height on the table, and a table of twenty rows should pay
+none of them. */
+  windowed?: (HelixHeadlessTable["windowed"]) | undefined;
   /** The text shown and announced when there are no rows and none are loading. */
   "empty-text"?: (HelixHeadlessTable["emptyText"]) | undefined;
   /** The text shown and announced when there are no rows and none are loading. */
@@ -29769,6 +29832,15 @@ order has its whole sentence. `{order}` is the deprecated
   "attr:unsorted-label"?: (HelixHeadlessTable["unsortedLabel"]) | undefined;
   /** What screen readers hear when the table stops being sorted. */
   "prop:unsortedLabel"?: (HelixHeadlessTable["unsortedLabel"]) | undefined;
+  /** Draws only the rows in view, with empty space in place of the rest, as
+Data Table's `windowed` does. The table's box then scrolls, at the
+height `--table-block-size` gives it in the styled tier, and the
+headings stick to its top.
+
+Off by default. Windowing costs a scroll listener, a measurement per row
+drawn, and a height on the table, and a table of twenty rows should pay
+none of them. */
+  "prop:windowed"?: (HelixHeadlessTable["windowed"]) | undefined;
   /** The text shown and announced when there are no rows and none are loading. */
   "attr:empty-text"?: (HelixHeadlessTable["emptyText"]) | undefined;
   /** The text shown and announced when there are no rows and none are loading. */
@@ -31850,6 +31922,12 @@ and a wheel has exactly one value by construction. Rather than draw
 something that cannot say what it holds, `wheels` renders as a list
 whenever a mode is set. */
   mode?: (HelixHeadlessTimePicker["mode"]) | undefined;
+  /** The words on the button that chooses the current time, drawn with
+`show-now`. */
+  "now-label"?: (HelixHeadlessTimePicker["nowLabel"]) | undefined;
+  /** The words on the button that chooses the current time, drawn with
+`show-now`. */
+  nowLabel?: (HelixHeadlessTimePicker["nowLabel"]) | undefined;
   /** The validation message for a time after `max`. `{max}` is replaced with
 `max`, written in `locale`. */
   "range-overflow-message"?: (HelixHeadlessTimePicker["rangeOverflowMessage"]) | undefined;
@@ -31906,6 +31984,22 @@ wheels take a column of seconds, and `step` counts seconds, the unit
 rows, so give `seconds` a `step` and bounds that keep it a list, or use
 the wheels. */
   seconds?: (HelixHeadlessTimePicker["seconds"]) | undefined;
+  /** Draws a button under the times that chooses the current time, as
+`selectNow()` does.
+
+For a form about something happening now, such as a shift starting or a
+dose taken, where the reader would otherwise scroll to the time on the
+clock. The button is a tab stop after the times, and its words are
+`now-label`. */
+  "show-now"?: (HelixHeadlessTimePicker["showNow"]) | undefined;
+  /** Draws a button under the times that chooses the current time, as
+`selectNow()` does.
+
+For a form about something happening now, such as a shift starting or a
+dose taken, where the reader would otherwise scroll to the time on the
+clock. The button is a tab stop after the times, and its words are
+`now-label`. */
+  showNow?: (HelixHeadlessTimePicker["showNow"]) | undefined;
   /** How far apart the offered times are, in minutes, or in seconds with
 `seconds`.
 
@@ -32164,6 +32258,12 @@ and a wheel has exactly one value by construction. Rather than draw
 something that cannot say what it holds, `wheels` renders as a list
 whenever a mode is set. */
   "prop:mode"?: (HelixHeadlessTimePicker["mode"]) | undefined;
+  /** The words on the button that chooses the current time, drawn with
+`show-now`. */
+  "attr:now-label"?: (HelixHeadlessTimePicker["nowLabel"]) | undefined;
+  /** The words on the button that chooses the current time, drawn with
+`show-now`. */
+  "prop:nowLabel"?: (HelixHeadlessTimePicker["nowLabel"]) | undefined;
   /** The validation message for a time after `max`. `{max}` is replaced with
 `max`, written in `locale`. */
   "attr:range-overflow-message"?: (HelixHeadlessTimePicker["rangeOverflowMessage"]) | undefined;
@@ -32220,6 +32320,22 @@ wheels take a column of seconds, and `step` counts seconds, the unit
 rows, so give `seconds` a `step` and bounds that keep it a list, or use
 the wheels. */
   "prop:seconds"?: (HelixHeadlessTimePicker["seconds"]) | undefined;
+  /** Draws a button under the times that chooses the current time, as
+`selectNow()` does.
+
+For a form about something happening now, such as a shift starting or a
+dose taken, where the reader would otherwise scroll to the time on the
+clock. The button is a tab stop after the times, and its words are
+`now-label`. */
+  "bool:show-now"?: (HelixHeadlessTimePicker["showNow"]) | undefined;
+  /** Draws a button under the times that chooses the current time, as
+`selectNow()` does.
+
+For a form about something happening now, such as a shift starting or a
+dose taken, where the reader would otherwise scroll to the time on the
+clock. The button is a tab stop after the times, and its words are
+`now-label`. */
+  "prop:showNow"?: (HelixHeadlessTimePicker["showNow"]) | undefined;
   /** How far apart the offered times are, in minutes, or in seconds with
 `seconds`.
 
@@ -36073,6 +36189,23 @@ follows the box as it resizes, which `columns` then does not decide. */
 out as many columns as fit the box at that width, at least one, and
 follows the box as it resizes, which `columns` then does not decide. */
   minColumnWidth?: (HelixHeadlessVirtualList["minColumnWidth"]) | undefined;
+  /** Which way the list runs. `horizontal` lays the items out along a line
+and scrolls it sideways: Left and Right move between items, the other
+way round on a right-to-left page, and `estimate` is an item's width. A
+grid always runs down. */
+  orientation?: (HelixHeadlessVirtualList["orientation"]) | undefined;
+  /** The field of each item that names its section, as a key or a path of
+keys. Set, the items are drawn in sections: a header, then the items, in
+an element with the `group` role that the header names. A section starts
+wherever the field changes, so give the items in order. A list of one
+column only. */
+  "section-field"?: (HelixHeadlessVirtualList["sectionField"]) | undefined;
+  /** The field of each item that names its section, as a key or a path of
+keys. Set, the items are drawn in sections: a header, then the items, in
+an element with the `group` role that the header names. A section starts
+wherever the field changes, so give the items in order. A list of one
+column only. */
+  sectionField?: (HelixHeadlessVirtualList["sectionField"]) | undefined;
   /** What a press does to the items already chosen: `toggle` adds or takes out
 the item, and `replace` selects it alone and lets the arrow keys carry the
 selection, with Control or Command adding or taking out one item. */
@@ -36115,6 +36248,10 @@ It returns what Lit renders: a template from `html`, a string, or a DOM
 node. The list wraps each result in a `<div>` that carries the row's role
 and place in the set. Where it is unset, the row `<template>` is used. */
   renderItem?: (HelixHeadlessVirtualList["renderItem"]) | undefined;
+  /** Draws each section's header, given its name and its place among the
+sections, for a list given `section-field`. Set it as a property. Where
+it is unset, the header is the name as text. */
+  renderSection?: (HelixHeadlessVirtualList["renderSection"]) | undefined;
 
   /** Fired once a press or a key has changed which items are selected, in a list with `selection-mode`. */
   onchange?: ((e: HelixHeadlessVirtualListElementEvent) => void) | undefined;
@@ -36205,6 +36342,23 @@ follows the box as it resizes, which `columns` then does not decide. */
 out as many columns as fit the box at that width, at least one, and
 follows the box as it resizes, which `columns` then does not decide. */
   "prop:minColumnWidth"?: (HelixHeadlessVirtualList["minColumnWidth"]) | undefined;
+  /** Which way the list runs. `horizontal` lays the items out along a line
+and scrolls it sideways: Left and Right move between items, the other
+way round on a right-to-left page, and `estimate` is an item's width. A
+grid always runs down. */
+  "prop:orientation"?: (HelixHeadlessVirtualList["orientation"]) | undefined;
+  /** The field of each item that names its section, as a key or a path of
+keys. Set, the items are drawn in sections: a header, then the items, in
+an element with the `group` role that the header names. A section starts
+wherever the field changes, so give the items in order. A list of one
+column only. */
+  "attr:section-field"?: (HelixHeadlessVirtualList["sectionField"]) | undefined;
+  /** The field of each item that names its section, as a key or a path of
+keys. Set, the items are drawn in sections: a header, then the items, in
+an element with the `group` role that the header names. A section starts
+wherever the field changes, so give the items in order. A list of one
+column only. */
+  "prop:sectionField"?: (HelixHeadlessVirtualList["sectionField"]) | undefined;
   /** What a press does to the items already chosen: `toggle` adds or takes out
 the item, and `replace` selects it alone and lets the arrow keys carry the
 selection, with Control or Command adding or taking out one item. */
@@ -36247,6 +36401,10 @@ It returns what Lit renders: a template from `html`, a string, or a DOM
 node. The list wraps each result in a `<div>` that carries the row's role
 and place in the set. Where it is unset, the row `<template>` is used. */
   "prop:renderItem"?: (HelixHeadlessVirtualList["renderItem"]) | undefined;
+  /** Draws each section's header, given its name and its place among the
+sections, for a list given `section-field`. Set it as a property. Where
+it is unset, the header is the name as text. */
+  "prop:renderSection"?: (HelixHeadlessVirtualList["renderSection"]) | undefined;
   /** Fired once a press or a key has changed which items are selected, in a list with `selection-mode`. */
   "on:change"?: ((e: HelixHeadlessVirtualListElementEvent) => void) | undefined;
   /** Fired before a press or a key changes which items are selected, with the `value` it would leave. Cancelable. */
@@ -38621,7 +38779,7 @@ export type CustomElements = {
    * forgetting of a reader's past attempt, whose message otherwise showed over
    * the emptied control the moment the form was reset.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -39065,15 +39223,24 @@ export type CustomElements = {
    *   card or connection says so when a reader arrives on it.
    * - Control or Command with C copies the selected cards, and the connections
    *   between them, as a JSON Canvas document in text, which another board or
-   *   an app that reads the format takes. A paste is your page's: listen for
-   *   `paste` on the board, read the text with `fromJsonCanvas`, and add the
-   *   cards it holds.
+   *   an app that reads the format takes.
+   * - Control or Command with V pastes a JSON Canvas document: the board adds
+   *   its cards and connections, a step down and to the right of any card they
+   *   would sit on, and selects them. It asks with `helix-before-paste` first.
+   *   A page that renders its cards from its own state cancels it and adds the
+   *   detail's document to that state, through `fromJsonCanvas`. `paste()` does
+   *   the same from a script.
    * - Control or Command with Z undoes the last move or resize the board made,
    *   and with Shift, or Control with Y, makes it again. `undo()` and `redo()`
    *   do the same from a script. Each asks with `helix-before-move` and tells
    *   with `helix-move`, as a move does, so a board that holds its positions in
    *   your state is undone through your state.
    *
+   * **`arrange()` moves every card so that none overlaps another**, in layers
+   * that follow the arrows, or in a grid on a board with no connections. The
+   * cards glide for as long as the board's own transition, and `undo()` puts
+   * them back.
+   *
    * Every drag also works with clicks, as WCAG 2.5.7 requires for a pointer that
    * cannot hold a button down. Click a selected card's move handle, a corner, a
    * card's connection point, or the end of a selected connection to pick it up.
@@ -39121,6 +39288,7 @@ export type CustomElements = {
    *
    * - `activate-hint-label`/`activateHintLabel`: The hint shown when the board, waiting to be pressed with
    * `gestures="activate"`, is scrolled or swiped over.
+   * - `arranged-label`/`arrangedLabel`: What screen readers hear after `arrange()` moves the cards.
    * - `comes-from-label`/`comesFromLabel`: The text read with a card to say where its connections come from, with `{cards}`.
    * - `connected-label`/`connectedLabel`: The text announced when a connection is requested, with `{from}` and `{to}`.
    * - `connecting-label`/`connectingLabel`: The text announced when a connection is started, with `{from}` filled in.
@@ -39165,6 +39333,7 @@ export type CustomElements = {
    *
    * Absent is spatial, a resting value being an attribute's absence: a default
    * that reflected would write a choice onto every host that no server sent.
+   * - `pasted-label`/`pastedLabel`: What screen readers hear after a paste, with `{count}` for the cards pasted.
    * - `path`: The route every connection takes when it sets no `path` of its own:
    * `straight`, or `step` for right angles.
    *
@@ -39181,6 +39350,9 @@ export type CustomElements = {
    * - `reconnecting-label`/`reconnectingLabel`: The text announced when a connection's end is picked up, with `{from}` and
    * `{to}`.
    * - `redone-label`/`redoneLabel`: What screen readers hear after a move or a resize is made again.
+   * - `removed-label`/`removedLabel`: What screen readers hear when Delete asks to remove what is selected, with
+   * `{count}` for how many cards and connections, and `{name}` for the one
+   * where there is one.
    * - `resized-label`/`resizedLabel`: What screen readers hear after a key resizes a card, with `{name}` for the
    * card and `{width}` and `{height}` for its new size, in the document's
    * units.
@@ -39361,6 +39533,7 @@ export type CustomElements = {
    * Events that will be emitted by the component.
    *
    * - `helix-before-move`: Cards are about to move. Cancelable: cancel it to keep the positions in your own state.
+   * - `helix-before-paste`: Cards and connections are about to be pasted. Cancelable: cancel it to add the detail's document to your own state.
    * - `helix-before-reconnect`: A connection's end is about to move to another card or side. Cancelable: cancel it to keep connections in your own state.
    * - `helix-before-relabel`: A connection's label or a group's name is about to change. Cancelable: cancel it to keep labels in your own state.
    * - `helix-canvas-edit`: A card was double-clicked, or Enter or F2 was pressed on it. Open your own editor for the card.
@@ -39369,6 +39542,7 @@ export type CustomElements = {
    * - `helix-canvas-zoom`: The board zoomed one step, from its controls or the keys. A wheel or a pinch sends `helix-canvas-view`.
    * - `helix-connect`: Two cards were chosen to be joined. Add a `helix-canvas-edge` to join them.
    * - `helix-move`: Cards moved and the move is finished: a drag was released, a click put a card down, or a key was pressed.
+   * - `helix-pasted`: Cards and connections were pasted, and the board holds them.
    * - `helix-reconnect`: A connection's end moved, and the move is finished.
    * - `helix-relabel`: A connection's label or a group's name changed.
    * - `helix-remove`: Cards or connections were chosen for removal. Remove the elements it names.
@@ -39422,6 +39596,24 @@ export type CustomElements = {
    * with nothing to undo, or when the request was refused.
    * - `redo() => boolean`: Makes the last move or resize `undo` took back again, asking with
    * `helix-before-move` first. Returns whether anything moved.
+   * - `paste(document: CanvasDocument | string) => boolean`: Adds the cards and connections of a JSON Canvas document, as a paste does,
+   * and selects the cards. Ids the board already holds are given a count after
+   * them, and the cards move a step down and to the right while they would sit
+   * on cards already there.
+   *
+   * Asks with `helix-before-paste` first: cancel it to add the detail's
+   * document to your own state. Returns whether the board added the cards:
+   * false on a `readonly` board, for text that is not a board, or when the
+   * request was refused.
+   * - `arrange(options: CanvasArrangeOptions = {}) => boolean`: Moves the cards so that none overlaps another: in layers that follow the
+   * connections, or in a grid where there are none. A group moves as one box
+   * with its cards. Each place lands on a multiple of `snap` where it is set.
+   *
+   * Asks with `helix-before-move` first and tells with `helix-move`, as a
+   * move does, so `undo()` puts every card back. The cards glide to their
+   * places for as long as the board's plane takes to glide, and land at once
+   * where it does not, such as under `prefers-reduced-motion`. Returns whether
+   * the cards moved.
    * - `toJsonCanvas() => CanvasDocument`: The board as a JSON Canvas document, for saving it.
    *
    * What each card holds is the consumer's DOM, so a card comes back as a card
@@ -40076,7 +40268,7 @@ export type CustomElements = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -40660,7 +40852,7 @@ export type CustomElements = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -40919,7 +41111,7 @@ export type CustomElements = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -41602,7 +41794,7 @@ export type CustomElements = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -42018,7 +42210,7 @@ export type CustomElements = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -42454,7 +42646,7 @@ export type CustomElements = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -42948,7 +43140,7 @@ export type CustomElements = {
    * forgetting of a reader's past attempt, whose message otherwise showed over
    * the emptied control the moment the form was reset.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -43521,7 +43713,7 @@ export type CustomElements = {
    * | Page Up, Page Down on a segment | Steps by a page: a week of days, two months, or five years. |
    * | Home, End on a segment | Goes to the segment's first or last value. |
    * | Digits on a segment | Fill it, and move to the next once it can take no more. |
-   * | Backspace, Delete on a segment | Empty the segment. |
+   * | Backspace, Delete on a segment | Take off its last digit, or move to the segment before where it is empty. |
    * | Left, Right on a segment | Move to the previous or the next segment, along the line of text. |
    *
    * In the calendar, the keys are `DatePicker`'s: the arrows move by a day or a
@@ -43897,7 +44089,7 @@ export type CustomElements = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -44324,7 +44516,7 @@ export type CustomElements = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -46002,7 +46194,7 @@ export type CustomElements = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -46916,7 +47108,7 @@ export type CustomElements = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -47010,7 +47202,8 @@ export type CustomElements = {
    * such as `buddhist` for `th-TH`, and `gregory` for every other, such as
    * `persian` for `fa-IR`, so a date written here reads as the same date a
    * Date Picker beside it shows. Write `calendar="persian"` for Mehr 14, 1405.
-   * - `date`: The timestamp, in any format `Date` can parse.
+   * - `date`: The timestamp: a `Date`, milliseconds since the epoch, or a string in any
+   * format `Date` can parse. The attribute is the string.
    *
    * An ISO string is what an API sends and what `<time datetime>` takes, so it
    * is the shape that needs no translation at either end. Left unset this
@@ -48066,7 +48259,7 @@ export type CustomElements = {
    * forgetting of a reader's past attempt, whose message otherwise showed over
    * the emptied control the moment the form was reset.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -48676,7 +48869,7 @@ export type CustomElements = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -50399,7 +50592,8 @@ export type CustomElements = {
    * rather than being typed into means. Enter still chooses, because that is
    * the caller asking for the answer rather than for a move. Space, Home, End
    * and letters are left to the caller's field, where they are typing.
-   * - `reveal() => void`: Scrolls the chosen option to the middle of the list.
+   * - `reveal() => void`: Scrolls the chosen option to the middle of the list, or the highlighted one
+   * where nothing is chosen.
    *
    * A method rather than something this does on its own, because a listbox
    * opening on its answer usually wants it merely *visible* and the browser
@@ -50409,6 +50603,13 @@ export type CustomElements = {
    *
    * Measured by core's `centerInView`, or, for a list of `items`, by the
    * arithmetic, since the chosen option may not be drawn.
+   * - `highlightValue(value: string) => void`: Puts the highlight on the option holding `value`, without choosing it, so
+   * the arrow keys move from there. Nothing changes where no option a reader
+   * can reach holds `value`.
+   *
+   * Time Picker calls it for a time between two of its steps, which no option
+   * holds: without it the first arrow moved from the top of the list, so Down
+   * from 14:07 went to midnight.
    * - `requestFilter(next: string) => boolean`: Requests a new filter, and returns whether the request went through.
    * - `requestValue(next: string) => boolean`: Requests a new value, and returns whether the change was applied.
    *
@@ -50462,7 +50663,7 @@ export type CustomElements = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -53508,7 +53709,7 @@ export type CustomElements = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -54650,7 +54851,7 @@ export type CustomElements = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -55031,7 +55232,7 @@ export type CustomElements = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -55857,7 +56058,7 @@ export type CustomElements = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -56290,7 +56491,7 @@ export type CustomElements = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -57109,7 +57310,7 @@ export type CustomElements = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -57627,7 +57828,7 @@ export type CustomElements = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -59135,7 +59336,7 @@ export type CustomElements = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -59500,6 +59701,7 @@ export type CustomElements = {
    * 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.
+   * A table with no name is reported once in a development build.
    *
    * **Selecting.** `selectable` adds a column of checkboxes.
    *
@@ -59585,9 +59787,17 @@ export type CustomElements = {
    * | A letter or a word | Moves to the next row whose first cell starts with what you typed. |
    * | Tab | Leaves the table. |
    *
+   * **Long tables.** `windowed` draws only the rows in view, as Data Table's
+   * does, and the box of the table scrolls under headings that stick. The
+   * table still says how many rows it has with `aria-rowcount`, and each row
+   * its place with `aria-rowindex`. The keys reach every row, drawn or not, and
+   * the row holding focus stays drawn when it scrolls away. Nested rows,
+   * sorting, and selecting work as they do in a table that draws every row.
+   *
    * **Loading more.** `load-more` sends `helix-load-more` once the end of the
    * table comes within a screen of view, in the box that scrolls it or the
-   * page, once for each number of rows: add rows and it can send it again. Set
+   * page, or in the table's own box when it is `windowed`, once for each
+   * number of rows: add rows and it can send it again. Set
    * `loading` while you fetch, and the table asks for nothing until it clears.
    *
    * When the rows did not load, set `error-text`, such as "The orders did not
@@ -59712,6 +59922,14 @@ export type CustomElements = {
    * order has its whole sentence. `{order}` is the deprecated
    * `ascending-label` or `descending-label`.
    * - `unsorted-label`/`unsortedLabel`: What screen readers hear when the table stops being sorted.
+   * - `windowed`: Draws only the rows in view, with empty space in place of the rest, as
+   * Data Table's `windowed` does. The table's box then scrolls, at the
+   * height `--table-block-size` gives it in the styled tier, and the
+   * headings stick to its top.
+   *
+   * Off by default. Windowing costs a scroll listener, a measurement per row
+   * drawn, and a height on the table, and a table of twenty rows should pay
+   * none of them.
    * - `empty-text`/`emptyText`: The text shown and announced when there are no rows and none are loading.
    * - `loading`: Whether the rows are still loading.
    *
@@ -59783,6 +60001,8 @@ export type CustomElements = {
    *
    * Custom selectors for styling elements within the component.
    *
+   * - `after`: The space that stands in for the rows below the window. Only while `windowed`.
+   * - `before`: The space that stands in for the rows above the window. Only while `windowed`.
    * - `checkbox`: The checkbox in the heading that selects every row, in a `selectable` table.
    * - `checkbox-box`: The box drawn for the checkbox's input.
    * - `checkbox-control`: The checkbox's input.
@@ -60824,7 +61044,7 @@ export type CustomElements = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -60903,7 +61123,7 @@ export type CustomElements = {
    * | Home, End on a segment | Goes to the segment's first or last value. |
    * | Digits on a segment | Fill it, and move to the next once it can take no more. |
    * | A letter on the half of the day | Picks the half whose name starts with it, such as A for AM. |
-   * | Backspace, Delete on a segment | Empty the segment. |
+   * | Backspace, Delete on a segment | Take off its last digit, or move to the segment before where it is empty. |
    * | Left, Right on a segment | Move to the previous or the next segment, along the line of text. |
    *
    * In the list, the keys are `TimePicker`'s.
@@ -61219,7 +61439,7 @@ export type CustomElements = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -61267,6 +61487,7 @@ export type CustomElements = {
    * - `picker-list-loading`: The text shown while the options load.
    * - `picker-list-search`: The region that holds the filter field.
    * - `picker-list-search-field`: The filter field.
+   * - `picker-now`: The picker's button that chooses the current time, which Time Input does not draw.
    * - `picker-option`: One time in the picker. Carries `data-between` inside a range.
    * - `picker-option-between`: A time inside a chosen range, between its two ends. Set together with `picker-option`.
    * - `picker-option-description`: The caption under the label, when there is one.
@@ -61313,7 +61534,9 @@ export type CustomElements = {
    * between the wheels, and Tab does too.
    *
    * `hour-cycle` writes every time on a twelve or a twenty-four hour clock
-   * whatever the locale, and `seconds` holds times to the second.
+   * whatever the locale, and `seconds` holds times to the second. `show-now`
+   * draws a button that chooses the current time, on the step and inside the
+   * bounds.
    *
    * The step keeps the list usable. At the default of 15 minutes a day is 96
    * rows, which people can scroll or type into. At 1 minute it is 1,440. Use the
@@ -61438,6 +61661,8 @@ export type CustomElements = {
    * and a wheel has exactly one value by construction. Rather than draw
    * something that cannot say what it holds, `wheels` renders as a list
    * whenever a mode is set.
+   * - `now-label`/`nowLabel`: The words on the button that chooses the current time, drawn with
+   * `show-now`.
    * - `range-overflow-message`/`rangeOverflowMessage`: The validation message for a time after `max`. `{max}` is replaced with
    * `max`, written in `locale`.
    * - `range-underflow-message`/`rangeUnderflowMessage`: The validation message for a time before `min`. `{min}` is replaced with
@@ -61465,6 +61690,13 @@ export type CustomElements = {
    * `<input type="time">` counts in. A list at a step of one second is 86,400
    * rows, so give `seconds` a `step` and bounds that keep it a list, or use
    * the wheels.
+   * - `show-now`/`showNow`: Draws a button under the times that chooses the current time, as
+   * `selectNow()` does.
+   *
+   * For a form about something happening now, such as a shift starting or a
+   * dose taken, where the reader would otherwise scroll to the time on the
+   * clock. The button is a tab stop after the times, and its words are
+   * `now-label`.
    * - `step`: How far apart the offered times are, in minutes, or in seconds with
    * `seconds`.
    *
@@ -61597,6 +61829,14 @@ export type CustomElements = {
    *
    * Methods that can be called to access component functionality.
    *
+   * - `selectNow() => boolean`: Chooses the current time, as a press on the `show-now` button does, and
+   * returns whether the value changed.
+   *
+   * The time is read off the reader's clock and moved to the nearest time on
+   * offer that is not barred, so it falls on the `step` and inside `min` and
+   * `max`. It is requested as a pick is, so `helix-before-change` can cancel
+   * it. With a `mode` the time joins the times held, and a range that holds
+   * two starts over from it, as a third pick does.
    * - `reveal() => void`: Scrolls each wheel to its selected value, and the list to its selected
    * time.
    *
@@ -61671,7 +61911,7 @@ export type CustomElements = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -61711,6 +61951,7 @@ export type CustomElements = {
    * - `list-loading`: The text shown while the options load.
    * - `list-search`: The region that holds the filter field.
    * - `list-search-field`: The filter field.
+   * - `now`: The button that chooses the current time, drawn with `show-now`.
    * - `option`: One time in the list. It carries `data-between` inside a range, and inside the run to the time under the pointer while a range waits for its second end.
    * - `option-between`: A time inside a chosen range, excluding its ends, beside `option`.
    * - `option-description`: The caption under the time's label, when there is one.
@@ -62540,7 +62781,7 @@ export type CustomElements = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -64869,12 +65110,26 @@ export type CustomElements = {
    * smallest item size, and follows the box as it resizes. `gap` spaces the rows, and the columns
    * of a grid, by a number of pixels the list counts in each row's place.
    *
+   * **Across.** `orientation="horizontal"` lays the items out along a line and
+   * scrolls it sideways, as a strip of cards does, windowed the same way:
+   * `estimate` is then an item's width, and the box needs an inline size.
+   *
+   * **Sections.** `section-field` names the field of each item that says which
+   * section it is in, and the list draws a header before each section's items,
+   * as React Aria's list box sections do. Each section is an element with the
+   * `group` role, named by its header, which is its first child and carries
+   * `data-header`, so your stylesheet styles it, such as with `position:
+   * sticky`. A section starts wherever the field changes, so give the items in
+   * order. The window counts the headers with the items, and a section the
+   * window starts inside is drawn with its header. `renderSection` draws a
+   * header of your own.
+   *
    * **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. |
+   * | 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. In a list that runs across, moves to the next or the previous item the same way, and Down and Up are left to the row. |
    * | 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. |
@@ -64994,6 +65249,15 @@ export type CustomElements = {
    * - `min-column-width`/`minColumnWidth`: The narrowest a column of a grid may be, in pixels. Set, the list lays
    * out as many columns as fit the box at that width, at least one, and
    * follows the box as it resizes, which `columns` then does not decide.
+   * - `orientation`: Which way the list runs. `horizontal` lays the items out along a line
+   * and scrolls it sideways: Left and Right move between items, the other
+   * way round on a right-to-left page, and `estimate` is an item's width. A
+   * grid always runs down.
+   * - `section-field`/`sectionField`: The field of each item that names its section, as a key or a path of
+   * keys. Set, the items are drawn in sections: a header, then the items, in
+   * an element with the `group` role that the header names. A section starts
+   * wherever the field changes, so give the items in order. A list of one
+   * column only.
    * - `selection-behavior`/`selectionBehavior`: What a press does to the items already chosen: `toggle` adds or takes out
    * the item, and `replace` selects it alone and lets the arrow keys carry the
    * selection, with Control or Command adding or taking out one item.
@@ -65017,6 +65281,9 @@ export type CustomElements = {
    * It returns what Lit renders: a template from `html`, a string, or a DOM
    * node. The list wraps each result in a `<div>` that carries the row's role
    * and place in the set. Where it is unset, the row `<template>` is used. (property only)
+   * - `renderSection`: Draws each section's header, given its name and its place among the
+   * sections, for a list given `section-field`. Set it as a property. Where
+   * it is unset, the header is the name as text. (property only)
    * - `range`: The items on screen, as `items.slice(first, last)` reads them.
    *
    * Read from the scroll offset when asked. Both are 0 before the list has a
@@ -65084,6 +65351,7 @@ export type CustomElements = {
    * These can be used to apply styling when a component is in a given state.
    *
    * - `empty`: While the list has read its items and holds none.
+   * - `horizontal`: While the list runs across, with `orientation="horizontal"`.
    * - `loading`: While `loading` is set.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
@@ -67472,7 +67740,7 @@ export type CustomElementsSolidJs = {
    * forgetting of a reader's past attempt, whose message otherwise showed over
    * the emptied control the moment the form was reset.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -67924,15 +68192,24 @@ export type CustomElementsSolidJs = {
    *   card or connection says so when a reader arrives on it.
    * - Control or Command with C copies the selected cards, and the connections
    *   between them, as a JSON Canvas document in text, which another board or
-   *   an app that reads the format takes. A paste is your page's: listen for
-   *   `paste` on the board, read the text with `fromJsonCanvas`, and add the
-   *   cards it holds.
+   *   an app that reads the format takes.
+   * - Control or Command with V pastes a JSON Canvas document: the board adds
+   *   its cards and connections, a step down and to the right of any card they
+   *   would sit on, and selects them. It asks with `helix-before-paste` first.
+   *   A page that renders its cards from its own state cancels it and adds the
+   *   detail's document to that state, through `fromJsonCanvas`. `paste()` does
+   *   the same from a script.
    * - Control or Command with Z undoes the last move or resize the board made,
    *   and with Shift, or Control with Y, makes it again. `undo()` and `redo()`
    *   do the same from a script. Each asks with `helix-before-move` and tells
    *   with `helix-move`, as a move does, so a board that holds its positions in
    *   your state is undone through your state.
    *
+   * **`arrange()` moves every card so that none overlaps another**, in layers
+   * that follow the arrows, or in a grid on a board with no connections. The
+   * cards glide for as long as the board's own transition, and `undo()` puts
+   * them back.
+   *
    * Every drag also works with clicks, as WCAG 2.5.7 requires for a pointer that
    * cannot hold a button down. Click a selected card's move handle, a corner, a
    * card's connection point, or the end of a selected connection to pick it up.
@@ -67980,6 +68257,7 @@ export type CustomElementsSolidJs = {
    *
    * - `activate-hint-label`/`activateHintLabel`: The hint shown when the board, waiting to be pressed with
    * `gestures="activate"`, is scrolled or swiped over.
+   * - `arranged-label`/`arrangedLabel`: What screen readers hear after `arrange()` moves the cards.
    * - `comes-from-label`/`comesFromLabel`: The text read with a card to say where its connections come from, with `{cards}`.
    * - `connected-label`/`connectedLabel`: The text announced when a connection is requested, with `{from}` and `{to}`.
    * - `connecting-label`/`connectingLabel`: The text announced when a connection is started, with `{from}` filled in.
@@ -68024,6 +68302,7 @@ export type CustomElementsSolidJs = {
    *
    * Absent is spatial, a resting value being an attribute's absence: a default
    * that reflected would write a choice onto every host that no server sent.
+   * - `pasted-label`/`pastedLabel`: What screen readers hear after a paste, with `{count}` for the cards pasted.
    * - `path`: The route every connection takes when it sets no `path` of its own:
    * `straight`, or `step` for right angles.
    *
@@ -68040,6 +68319,9 @@ export type CustomElementsSolidJs = {
    * - `reconnecting-label`/`reconnectingLabel`: The text announced when a connection's end is picked up, with `{from}` and
    * `{to}`.
    * - `redone-label`/`redoneLabel`: What screen readers hear after a move or a resize is made again.
+   * - `removed-label`/`removedLabel`: What screen readers hear when Delete asks to remove what is selected, with
+   * `{count}` for how many cards and connections, and `{name}` for the one
+   * where there is one.
    * - `resized-label`/`resizedLabel`: What screen readers hear after a key resizes a card, with `{name}` for the
    * card and `{width}` and `{height}` for its new size, in the document's
    * units.
@@ -68220,6 +68502,7 @@ export type CustomElementsSolidJs = {
    * Events that will be emitted by the component.
    *
    * - `helix-before-move`: Cards are about to move. Cancelable: cancel it to keep the positions in your own state.
+   * - `helix-before-paste`: Cards and connections are about to be pasted. Cancelable: cancel it to add the detail's document to your own state.
    * - `helix-before-reconnect`: A connection's end is about to move to another card or side. Cancelable: cancel it to keep connections in your own state.
    * - `helix-before-relabel`: A connection's label or a group's name is about to change. Cancelable: cancel it to keep labels in your own state.
    * - `helix-canvas-edit`: A card was double-clicked, or Enter or F2 was pressed on it. Open your own editor for the card.
@@ -68228,6 +68511,7 @@ export type CustomElementsSolidJs = {
    * - `helix-canvas-zoom`: The board zoomed one step, from its controls or the keys. A wheel or a pinch sends `helix-canvas-view`.
    * - `helix-connect`: Two cards were chosen to be joined. Add a `helix-canvas-edge` to join them.
    * - `helix-move`: Cards moved and the move is finished: a drag was released, a click put a card down, or a key was pressed.
+   * - `helix-pasted`: Cards and connections were pasted, and the board holds them.
    * - `helix-reconnect`: A connection's end moved, and the move is finished.
    * - `helix-relabel`: A connection's label or a group's name changed.
    * - `helix-remove`: Cards or connections were chosen for removal. Remove the elements it names.
@@ -68281,6 +68565,24 @@ export type CustomElementsSolidJs = {
    * with nothing to undo, or when the request was refused.
    * - `redo() => boolean`: Makes the last move or resize `undo` took back again, asking with
    * `helix-before-move` first. Returns whether anything moved.
+   * - `paste(document: CanvasDocument | string) => boolean`: Adds the cards and connections of a JSON Canvas document, as a paste does,
+   * and selects the cards. Ids the board already holds are given a count after
+   * them, and the cards move a step down and to the right while they would sit
+   * on cards already there.
+   *
+   * Asks with `helix-before-paste` first: cancel it to add the detail's
+   * document to your own state. Returns whether the board added the cards:
+   * false on a `readonly` board, for text that is not a board, or when the
+   * request was refused.
+   * - `arrange(options: CanvasArrangeOptions = {}) => boolean`: Moves the cards so that none overlaps another: in layers that follow the
+   * connections, or in a grid where there are none. A group moves as one box
+   * with its cards. Each place lands on a multiple of `snap` where it is set.
+   *
+   * Asks with `helix-before-move` first and tells with `helix-move`, as a
+   * move does, so `undo()` puts every card back. The cards glide to their
+   * places for as long as the board's plane takes to glide, and land at once
+   * where it does not, such as under `prefers-reduced-motion`. Returns whether
+   * the cards moved.
    * - `toJsonCanvas() => CanvasDocument`: The board as a JSON Canvas document, for saving it.
    *
    * What each card holds is the consumer's DOM, so a card comes back as a card
@@ -68944,7 +69246,7 @@ export type CustomElementsSolidJs = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -69533,7 +69835,7 @@ export type CustomElementsSolidJs = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -69793,7 +70095,7 @@ export type CustomElementsSolidJs = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -70485,7 +70787,7 @@ export type CustomElementsSolidJs = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -70902,7 +71204,7 @@ export type CustomElementsSolidJs = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -71339,7 +71641,7 @@ export type CustomElementsSolidJs = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -71839,7 +72141,7 @@ export type CustomElementsSolidJs = {
    * forgetting of a reader's past attempt, whose message otherwise showed over
    * the emptied control the moment the form was reset.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -72416,7 +72718,7 @@ export type CustomElementsSolidJs = {
    * | Page Up, Page Down on a segment | Steps by a page: a week of days, two months, or five years. |
    * | Home, End on a segment | Goes to the segment's first or last value. |
    * | Digits on a segment | Fill it, and move to the next once it can take no more. |
-   * | Backspace, Delete on a segment | Empty the segment. |
+   * | Backspace, Delete on a segment | Take off its last digit, or move to the segment before where it is empty. |
    * | Left, Right on a segment | Move to the previous or the next segment, along the line of text. |
    *
    * In the calendar, the keys are `DatePicker`'s: the arrows move by a day or a
@@ -72792,7 +73094,7 @@ export type CustomElementsSolidJs = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -73222,7 +73524,7 @@ export type CustomElementsSolidJs = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -74920,7 +75222,7 @@ export type CustomElementsSolidJs = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -75841,7 +76143,7 @@ export type CustomElementsSolidJs = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -75936,7 +76238,8 @@ export type CustomElementsSolidJs = {
    * such as `buddhist` for `th-TH`, and `gregory` for every other, such as
    * `persian` for `fa-IR`, so a date written here reads as the same date a
    * Date Picker beside it shows. Write `calendar="persian"` for Mehr 14, 1405.
-   * - `date`: The timestamp, in any format `Date` can parse.
+   * - `date`: The timestamp: a `Date`, milliseconds since the epoch, or a string in any
+   * format `Date` can parse. The attribute is the string.
    *
    * An ISO string is what an API sends and what `<time datetime>` takes, so it
    * is the shape that needs no translation at either end. Left unset this
@@ -76999,7 +77302,7 @@ export type CustomElementsSolidJs = {
    * forgetting of a reader's past attempt, whose message otherwise showed over
    * the emptied control the moment the form was reset.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -77616,7 +77919,7 @@ export type CustomElementsSolidJs = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -79361,7 +79664,8 @@ export type CustomElementsSolidJs = {
    * rather than being typed into means. Enter still chooses, because that is
    * the caller asking for the answer rather than for a move. Space, Home, End
    * and letters are left to the caller's field, where they are typing.
-   * - `reveal() => void`: Scrolls the chosen option to the middle of the list.
+   * - `reveal() => void`: Scrolls the chosen option to the middle of the list, or the highlighted one
+   * where nothing is chosen.
    *
    * A method rather than something this does on its own, because a listbox
    * opening on its answer usually wants it merely *visible* and the browser
@@ -79371,6 +79675,13 @@ export type CustomElementsSolidJs = {
    *
    * Measured by core's `centerInView`, or, for a list of `items`, by the
    * arithmetic, since the chosen option may not be drawn.
+   * - `highlightValue(value: string) => void`: Puts the highlight on the option holding `value`, without choosing it, so
+   * the arrow keys move from there. Nothing changes where no option a reader
+   * can reach holds `value`.
+   *
+   * Time Picker calls it for a time between two of its steps, which no option
+   * holds: without it the first arrow moved from the top of the list, so Down
+   * from 14:07 went to midnight.
    * - `requestFilter(next: string) => boolean`: Requests a new filter, and returns whether the request went through.
    * - `requestValue(next: string) => boolean`: Requests a new value, and returns whether the change was applied.
    *
@@ -79424,7 +79735,7 @@ export type CustomElementsSolidJs = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -82516,7 +82827,7 @@ export type CustomElementsSolidJs = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -83669,7 +83980,7 @@ export type CustomElementsSolidJs = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -84052,7 +84363,7 @@ export type CustomElementsSolidJs = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -84893,7 +85204,7 @@ export type CustomElementsSolidJs = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -85330,7 +85641,7 @@ export type CustomElementsSolidJs = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -86154,7 +86465,7 @@ export type CustomElementsSolidJs = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -86681,7 +86992,7 @@ export type CustomElementsSolidJs = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -88215,7 +88526,7 @@ export type CustomElementsSolidJs = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -88587,6 +88898,7 @@ export type CustomElementsSolidJs = {
    * 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.
+   * A table with no name is reported once in a development build.
    *
    * **Selecting.** `selectable` adds a column of checkboxes.
    *
@@ -88672,9 +88984,17 @@ export type CustomElementsSolidJs = {
    * | A letter or a word | Moves to the next row whose first cell starts with what you typed. |
    * | Tab | Leaves the table. |
    *
+   * **Long tables.** `windowed` draws only the rows in view, as Data Table's
+   * does, and the box of the table scrolls under headings that stick. The
+   * table still says how many rows it has with `aria-rowcount`, and each row
+   * its place with `aria-rowindex`. The keys reach every row, drawn or not, and
+   * the row holding focus stays drawn when it scrolls away. Nested rows,
+   * sorting, and selecting work as they do in a table that draws every row.
+   *
    * **Loading more.** `load-more` sends `helix-load-more` once the end of the
    * table comes within a screen of view, in the box that scrolls it or the
-   * page, once for each number of rows: add rows and it can send it again. Set
+   * page, or in the table's own box when it is `windowed`, once for each
+   * number of rows: add rows and it can send it again. Set
    * `loading` while you fetch, and the table asks for nothing until it clears.
    *
    * When the rows did not load, set `error-text`, such as "The orders did not
@@ -88799,6 +89119,14 @@ export type CustomElementsSolidJs = {
    * order has its whole sentence. `{order}` is the deprecated
    * `ascending-label` or `descending-label`.
    * - `unsorted-label`/`unsortedLabel`: What screen readers hear when the table stops being sorted.
+   * - `windowed`: Draws only the rows in view, with empty space in place of the rest, as
+   * Data Table's `windowed` does. The table's box then scrolls, at the
+   * height `--table-block-size` gives it in the styled tier, and the
+   * headings stick to its top.
+   *
+   * Off by default. Windowing costs a scroll listener, a measurement per row
+   * drawn, and a height on the table, and a table of twenty rows should pay
+   * none of them.
    * - `empty-text`/`emptyText`: The text shown and announced when there are no rows and none are loading.
    * - `loading`: Whether the rows are still loading.
    *
@@ -88870,6 +89198,8 @@ export type CustomElementsSolidJs = {
    *
    * Custom selectors for styling elements within the component.
    *
+   * - `after`: The space that stands in for the rows below the window. Only while `windowed`.
+   * - `before`: The space that stands in for the rows above the window. Only while `windowed`.
    * - `checkbox`: The checkbox in the heading that selects every row, in a `selectable` table.
    * - `checkbox-box`: The box drawn for the checkbox's input.
    * - `checkbox-control`: The checkbox's input.
@@ -89932,7 +90262,7 @@ export type CustomElementsSolidJs = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -90014,7 +90344,7 @@ export type CustomElementsSolidJs = {
    * | Home, End on a segment | Goes to the segment's first or last value. |
    * | Digits on a segment | Fill it, and move to the next once it can take no more. |
    * | A letter on the half of the day | Picks the half whose name starts with it, such as A for AM. |
-   * | Backspace, Delete on a segment | Empty the segment. |
+   * | Backspace, Delete on a segment | Take off its last digit, or move to the segment before where it is empty. |
    * | Left, Right on a segment | Move to the previous or the next segment, along the line of text. |
    *
    * In the list, the keys are `TimePicker`'s.
@@ -90330,7 +90660,7 @@ export type CustomElementsSolidJs = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -90378,6 +90708,7 @@ export type CustomElementsSolidJs = {
    * - `picker-list-loading`: The text shown while the options load.
    * - `picker-list-search`: The region that holds the filter field.
    * - `picker-list-search-field`: The filter field.
+   * - `picker-now`: The picker's button that chooses the current time, which Time Input does not draw.
    * - `picker-option`: One time in the picker. Carries `data-between` inside a range.
    * - `picker-option-between`: A time inside a chosen range, between its two ends. Set together with `picker-option`.
    * - `picker-option-description`: The caption under the label, when there is one.
@@ -90427,7 +90758,9 @@ export type CustomElementsSolidJs = {
    * between the wheels, and Tab does too.
    *
    * `hour-cycle` writes every time on a twelve or a twenty-four hour clock
-   * whatever the locale, and `seconds` holds times to the second.
+   * whatever the locale, and `seconds` holds times to the second. `show-now`
+   * draws a button that chooses the current time, on the step and inside the
+   * bounds.
    *
    * The step keeps the list usable. At the default of 15 minutes a day is 96
    * rows, which people can scroll or type into. At 1 minute it is 1,440. Use the
@@ -90552,6 +90885,8 @@ export type CustomElementsSolidJs = {
    * and a wheel has exactly one value by construction. Rather than draw
    * something that cannot say what it holds, `wheels` renders as a list
    * whenever a mode is set.
+   * - `now-label`/`nowLabel`: The words on the button that chooses the current time, drawn with
+   * `show-now`.
    * - `range-overflow-message`/`rangeOverflowMessage`: The validation message for a time after `max`. `{max}` is replaced with
    * `max`, written in `locale`.
    * - `range-underflow-message`/`rangeUnderflowMessage`: The validation message for a time before `min`. `{min}` is replaced with
@@ -90579,6 +90914,13 @@ export type CustomElementsSolidJs = {
    * `<input type="time">` counts in. A list at a step of one second is 86,400
    * rows, so give `seconds` a `step` and bounds that keep it a list, or use
    * the wheels.
+   * - `show-now`/`showNow`: Draws a button under the times that chooses the current time, as
+   * `selectNow()` does.
+   *
+   * For a form about something happening now, such as a shift starting or a
+   * dose taken, where the reader would otherwise scroll to the time on the
+   * clock. The button is a tab stop after the times, and its words are
+   * `now-label`.
    * - `step`: How far apart the offered times are, in minutes, or in seconds with
    * `seconds`.
    *
@@ -90711,6 +91053,14 @@ export type CustomElementsSolidJs = {
    *
    * Methods that can be called to access component functionality.
    *
+   * - `selectNow() => boolean`: Chooses the current time, as a press on the `show-now` button does, and
+   * returns whether the value changed.
+   *
+   * The time is read off the reader's clock and moved to the nearest time on
+   * offer that is not barred, so it falls on the `step` and inside `min` and
+   * `max`. It is requested as a pick is, so `helix-before-change` can cancel
+   * it. With a `mode` the time joins the times held, and a range that holds
+   * two starts over from it, as a third pick does.
    * - `reveal() => void`: Scrolls each wheel to its selected value, and the list to its selected
    * time.
    *
@@ -90785,7 +91135,7 @@ export type CustomElementsSolidJs = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -90825,6 +91175,7 @@ export type CustomElementsSolidJs = {
    * - `list-loading`: The text shown while the options load.
    * - `list-search`: The region that holds the filter field.
    * - `list-search-field`: The filter field.
+   * - `now`: The button that chooses the current time, drawn with `show-now`.
    * - `option`: One time in the list. It carries `data-between` inside a range, and inside the run to the time under the pointer while a range waits for its second end.
    * - `option-between`: A time inside a chosen range, excluding its ends, beside `option`.
    * - `option-description`: The caption under the time's label, when there is one.
@@ -91666,7 +92017,7 @@ export type CustomElementsSolidJs = {
    * and reading `:disabled` here would answer about the attribute we are in the
    * middle of removing.
    * - `checkValidity() => boolean`: Returns whether the control is valid, and fires `invalid` on it when it is
-   * not.
+   * not. The control shows no message for it: `reportValidity()` does that.
    * - `reportValidity() => boolean`: Returns whether the control is valid, and when it is not, fires `invalid`
    * and shows the browser's message at the control.
    * - `setCustomValidity(message: string) => void`: Marks the control invalid with `message`, or clears that with an empty
@@ -94026,12 +94377,26 @@ export type CustomElementsSolidJs = {
    * smallest item size, and follows the box as it resizes. `gap` spaces the rows, and the columns
    * of a grid, by a number of pixels the list counts in each row's place.
    *
+   * **Across.** `orientation="horizontal"` lays the items out along a line and
+   * scrolls it sideways, as a strip of cards does, windowed the same way:
+   * `estimate` is then an item's width, and the box needs an inline size.
+   *
+   * **Sections.** `section-field` names the field of each item that says which
+   * section it is in, and the list draws a header before each section's items,
+   * as React Aria's list box sections do. Each section is an element with the
+   * `group` role, named by its header, which is its first child and carries
+   * `data-header`, so your stylesheet styles it, such as with `position:
+   * sticky`. A section starts wherever the field changes, so give the items in
+   * order. The window counts the headers with the items, and a section the
+   * window starts inside is drawn with its header. `renderSection` draws a
+   * header of your own.
+   *
    * **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. |
+   * | 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. In a list that runs across, moves to the next or the previous item the same way, and Down and Up are left to the row. |
    * | 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. |
@@ -94151,6 +94516,15 @@ export type CustomElementsSolidJs = {
    * - `min-column-width`/`minColumnWidth`: The narrowest a column of a grid may be, in pixels. Set, the list lays
    * out as many columns as fit the box at that width, at least one, and
    * follows the box as it resizes, which `columns` then does not decide.
+   * - `orientation`: Which way the list runs. `horizontal` lays the items out along a line
+   * and scrolls it sideways: Left and Right move between items, the other
+   * way round on a right-to-left page, and `estimate` is an item's width. A
+   * grid always runs down.
+   * - `section-field`/`sectionField`: The field of each item that names its section, as a key or a path of
+   * keys. Set, the items are drawn in sections: a header, then the items, in
+   * an element with the `group` role that the header names. A section starts
+   * wherever the field changes, so give the items in order. A list of one
+   * column only.
    * - `selection-behavior`/`selectionBehavior`: What a press does to the items already chosen: `toggle` adds or takes out
    * the item, and `replace` selects it alone and lets the arrow keys carry the
    * selection, with Control or Command adding or taking out one item.
@@ -94174,6 +94548,9 @@ export type CustomElementsSolidJs = {
    * It returns what Lit renders: a template from `html`, a string, or a DOM
    * node. The list wraps each result in a `<div>` that carries the row's role
    * and place in the set. Where it is unset, the row `<template>` is used. (property only)
+   * - `renderSection`: Draws each section's header, given its name and its place among the
+   * sections, for a list given `section-field`. Set it as a property. Where
+   * it is unset, the header is the name as text. (property only)
    * - `range`: The items on screen, as `items.slice(first, last)` reads them.
    *
    * Read from the scroll offset when asked. Both are 0 before the list has a
@@ -94241,6 +94618,7 @@ export type CustomElementsSolidJs = {
    * These can be used to apply styling when a component is in a given state.
    *
    * - `empty`: While the list has read its items and holds none.
+   * - `horizontal`: While the list runs across, with `orientation="horizontal"`.
    * - `loading`: While `loading` is set.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */