@fusion.dev/helix-headless 0.171.0 → 0.172.0

package/types/jsx.d.ts

@@ -4966,6 +4966,10 @@ export type HelixHeadlessChatComposerHelixTypingElementEvent =
   HelixHeadlessChatComposerElementEvent<HelixTypingEvent>;
 
 export type HelixHeadlessChatComposerProps = {
+  /** A message about the draft, shown under the field. While set, the composer
+is invalid, does not send, and does not submit, as a field's `feedback`
+does, and the message is announced as it appears. */
+  feedback?: (HelixHeadlessChatComposer["feedback"]) | undefined;
   /** The field's name, read by screen readers. */
   label?: (HelixHeadlessChatComposer["label"]) | undefined;
   /** The most characters a draft can have. The field stops taking more. */
@@ -5054,6 +5058,10 @@ Here rather than on each control. */
 };
 
 export type HelixHeadlessChatComposerSolidJsProps = {
+  /** A message about the draft, shown under the field. While set, the composer
+is invalid, does not send, and does not submit, as a field's `feedback`
+does, and the message is announced as it appears. */
+  "prop:feedback"?: (HelixHeadlessChatComposer["feedback"]) | undefined;
   /** The field's name, read by screen readers. */
   "prop:label"?: (HelixHeadlessChatComposer["label"]) | undefined;
   /** The most characters a draft can have. The field stops taking more. */
@@ -9693,7 +9701,11 @@ thousand rows, where the page is a reasonable fetch and a poor render.
 
 Off by default. Windowing costs a scroll listener, a measurement per row
 drawn, and a `block-size` on the scrolling box, and a table of twenty rows
-should pay none of them. */
+should pay none of them.
+
+While windowed, the `table` part scrolls on this tier: it carries
+`data-scroller`, and `core` ships `[data-scroller] { overflow: auto }` into
+every shadow root. You still need to give it a block size. */
   windowed?: (HelixHeadlessDataTable["windowed"]) | undefined;
   /** The text shown and announced when there are no rows and none are loading. */
   "empty-text"?: (HelixHeadlessDataTable["emptyText"]) | undefined;
@@ -10122,7 +10134,11 @@ thousand rows, where the page is a reasonable fetch and a poor render.
 
 Off by default. Windowing costs a scroll listener, a measurement per row
 drawn, and a `block-size` on the scrolling box, and a table of twenty rows
-should pay none of them. */
+should pay none of them.
+
+While windowed, the `table` part scrolls on this tier: it carries
+`data-scroller`, and `core` ships `[data-scroller] { overflow: auto }` into
+every shadow root. You still need to give it a block size. */
   "prop:windowed"?: (HelixHeadlessDataTable["windowed"]) | undefined;
   /** The text shown and announced when there are no rows and none are loading. */
   "attr:empty-text"?: (HelixHeadlessDataTable["emptyText"]) | undefined;
@@ -21188,6 +21204,14 @@ or on Alt+Down or Alt+Up. */
 
 It moves if that side does not fit. */
   placement?: (HelixHeadlessMenu["placement"]) | undefined;
+  /** What a screen reader hears when the filter narrows the rows. `{count}` is
+how many rows are left, written in the locale, and each language writes
+the forms it has, as Listbox's `results-label` does. */
+  "results-label"?: (HelixHeadlessMenu["resultsLabel"]) | undefined;
+  /** What a screen reader hears when the filter narrows the rows. `{count}` is
+how many rows are left, written in the locale, and each language writes
+the forms it has, as Listbox's `results-label` does. */
+  resultsLabel?: (HelixHeadlessMenu["resultsLabel"]) | undefined;
   /** How a submenu opens. `drill` shows it in place of the page showing, with
 a way back. `flyout` opens it in a panel of its own beside its row. */
   submenus?: (HelixHeadlessMenu["submenus"]) | undefined;
@@ -21229,7 +21253,17 @@ Aria's `Autocomplete` takes `filter`. See Listbox's `filterMatch`.
 Absent, a row is kept where its words hold the filter, in any case. A
 property only, there being no way to write a function in markup. */
   filterMatch?: (HelixHeadlessMenu["filterMatch"]) | undefined;
+  /** The values of the choice rows that are checked, anywhere in the menu, in
+document order.
+
+Set it to check exactly those rows and uncheck every other choice row, as
+React Aria's `selectedKeys` controls a menu's selection from one place.
+Each row keeps its own `checked` too, which this reads and writes. `change`
+is sent on the menu when a reader's choice changes it. */
+  checkedValues?: (HelixHeadlessMenu["checkedValues"]) | undefined;
 
+  /** A reader's choice checked or unchecked rows. Read `checkedValues` for the rows that are checked now. */
+  onchange?: ((e: HelixHeadlessMenuElementEvent) => void) | undefined;
   /** The menu is about to close. Cancelable: cancel it to keep it open. */
   "onhelix-before-close"?: ((
     e: HelixHeadlessMenuHelixBeforeCloseElementEvent,
@@ -21308,6 +21342,14 @@ or on Alt+Down or Alt+Up. */
 
 It moves if that side does not fit. */
   "prop:placement"?: (HelixHeadlessMenu["placement"]) | undefined;
+  /** What a screen reader hears when the filter narrows the rows. `{count}` is
+how many rows are left, written in the locale, and each language writes
+the forms it has, as Listbox's `results-label` does. */
+  "attr:results-label"?: (HelixHeadlessMenu["resultsLabel"]) | undefined;
+  /** What a screen reader hears when the filter narrows the rows. `{count}` is
+how many rows are left, written in the locale, and each language writes
+the forms it has, as Listbox's `results-label` does. */
+  "prop:resultsLabel"?: (HelixHeadlessMenu["resultsLabel"]) | undefined;
   /** How a submenu opens. `drill` shows it in place of the page showing, with
 a way back. `flyout` opens it in a panel of its own beside its row. */
   "prop:submenus"?: (HelixHeadlessMenu["submenus"]) | undefined;
@@ -21349,6 +21391,16 @@ Aria's `Autocomplete` takes `filter`. See Listbox's `filterMatch`.
 Absent, a row is kept where its words hold the filter, in any case. A
 property only, there being no way to write a function in markup. */
   "prop:filterMatch"?: (HelixHeadlessMenu["filterMatch"]) | undefined;
+  /** The values of the choice rows that are checked, anywhere in the menu, in
+document order.
+
+Set it to check exactly those rows and uncheck every other choice row, as
+React Aria's `selectedKeys` controls a menu's selection from one place.
+Each row keeps its own `checked` too, which this reads and writes. `change`
+is sent on the menu when a reader's choice changes it. */
+  "prop:checkedValues"?: (HelixHeadlessMenu["checkedValues"]) | undefined;
+  /** A reader's choice checked or unchecked rows. Read `checkedValues` for the rows that are checked now. */
+  "on:change"?: ((e: HelixHeadlessMenuElementEvent) => void) | undefined;
   /** The menu is about to close. Cancelable: cancel it to keep it open. */
   "on:helix-before-close"?: ((
     e: HelixHeadlessMenuHelixBeforeCloseElementEvent,
@@ -24670,17 +24722,42 @@ export type HelixHeadlessPopoverToggleElementEvent =
   HelixHeadlessPopoverElementEvent<ToggleEvent>;
 
 export type HelixHeadlessPopoverProps = {
+  /** The element the panel opens against, where that is not the trigger: its
+`id` in the same document or shadow root, or the element itself. Left
+empty, the panel opens against the trigger, or against the button whose
+command opened it. */
+  anchor?: (HelixHeadlessPopover["anchor"]) | undefined;
   /** Draws a point on the panel's edge facing the trigger.
 
 Off by default, which is the house style: a panel that opens from its
 trigger already reads as belonging to it. */
   arrow?: (HelixHeadlessPopover["arrow"]) | undefined;
+  /** How close to the window's edges the panel may come, in pixels, when it
+slides, shrinks or moves to the other side to fit. Left unset, it slides
+and shrinks to 8 pixels from an edge and moves to the other side only
+once it would cross one. */
+  "container-padding"?: (HelixHeadlessPopover["containerPadding"] | `${number}`) | undefined;
+  /** How close to the window's edges the panel may come, in pixels, when it
+slides, shrinks or moves to the other side to fit. Left unset, it slides
+and shrinks to 8 pixels from an edge and moves to the other side only
+once it would cross one. */
+  containerPadding?: (HelixHeadlessPopover["containerPadding"]) | undefined;
+  /** How far to slide the panel along the side it is on, in pixels: to the
+right on the top or the bottom, and down on the left or the right. */
+  "cross-offset"?: (HelixHeadlessPopover["crossOffset"] | `${number}`) | undefined;
+  /** How far to slide the panel along the side it is on, in pixels: to the
+right on the top or the bottom, and down on the left or the right. */
+  crossOffset?: (HelixHeadlessPopover["crossOffset"]) | undefined;
   /** The panel's name where nothing else names it: no `label`, no heading in
 the panel, and no `aria-labelledby` on the host. */
   "fallback-label"?: (HelixHeadlessPopover["fallbackLabel"]) | undefined;
   /** The panel's name where nothing else names it: no `label`, no heading in
 the panel, and no `aria-labelledby` on the host. */
   fallbackLabel?: (HelixHeadlessPopover["fallbackLabel"]) | undefined;
+  /** Whether the panel moves to the other side of the trigger when its own
+side has no room. On by default. Write `flip="false"` to keep it on its
+side, where it shrinks to fit, as React Aria's `shouldFlip` turns off. */
+  flip?: (HelixHeadlessPopover["flip"]) | undefined;
   /** The panel's name, read by screen readers. Left empty, the first heading in
 the panel names it, and then `fallback-label`. */
   label?: (HelixHeadlessPopover["label"]) | undefined;
@@ -24725,17 +24802,42 @@ the resolved state for stylesheets, which is what the mirror is for. */
 };
 
 export type HelixHeadlessPopoverSolidJsProps = {
+  /** The element the panel opens against, where that is not the trigger: its
+`id` in the same document or shadow root, or the element itself. Left
+empty, the panel opens against the trigger, or against the button whose
+command opened it. */
+  "prop:anchor"?: (HelixHeadlessPopover["anchor"]) | undefined;
   /** Draws a point on the panel's edge facing the trigger.
 
 Off by default, which is the house style: a panel that opens from its
 trigger already reads as belonging to it. */
   "prop:arrow"?: (HelixHeadlessPopover["arrow"]) | undefined;
+  /** How close to the window's edges the panel may come, in pixels, when it
+slides, shrinks or moves to the other side to fit. Left unset, it slides
+and shrinks to 8 pixels from an edge and moves to the other side only
+once it would cross one. */
+  "attr:container-padding"?: (HelixHeadlessPopover["containerPadding"] | `${number}`) | undefined;
+  /** How close to the window's edges the panel may come, in pixels, when it
+slides, shrinks or moves to the other side to fit. Left unset, it slides
+and shrinks to 8 pixels from an edge and moves to the other side only
+once it would cross one. */
+  "prop:containerPadding"?: (HelixHeadlessPopover["containerPadding"]) | undefined;
+  /** How far to slide the panel along the side it is on, in pixels: to the
+right on the top or the bottom, and down on the left or the right. */
+  "attr:cross-offset"?: (HelixHeadlessPopover["crossOffset"] | `${number}`) | undefined;
+  /** How far to slide the panel along the side it is on, in pixels: to the
+right on the top or the bottom, and down on the left or the right. */
+  "prop:crossOffset"?: (HelixHeadlessPopover["crossOffset"]) | undefined;
   /** The panel's name where nothing else names it: no `label`, no heading in
 the panel, and no `aria-labelledby` on the host. */
   "attr:fallback-label"?: (HelixHeadlessPopover["fallbackLabel"]) | undefined;
   /** The panel's name where nothing else names it: no `label`, no heading in
 the panel, and no `aria-labelledby` on the host. */
   "prop:fallbackLabel"?: (HelixHeadlessPopover["fallbackLabel"]) | undefined;
+  /** Whether the panel moves to the other side of the trigger when its own
+side has no room. On by default. Write `flip="false"` to keep it on its
+side, where it shrinks to fit, as React Aria's `shouldFlip` turns off. */
+  "prop:flip"?: (HelixHeadlessPopover["flip"]) | undefined;
   /** The panel's name, read by screen readers. Left empty, the first heading in
 the panel names it, and then `fallback-label`. */
   "prop:label"?: (HelixHeadlessPopover["label"]) | undefined;
@@ -40337,6 +40439,11 @@ export type CustomElements = {
    * Sending an empty required composer counts as trying. Tabbing past an empty
    * composer marks nothing.
    *
+   * **`feedback` is a message of your own about the draft**, such as one your
+   * server sent back. While it is set, the composer is invalid at once, does
+   * not send or submit, shows the message under the field, and a screen reader
+   * hears it as it appears. Clear it to let the draft go.
+   *
    * **`typing` says whether the user is writing**, and `helix-typing` is sent
    * each time it changes: when they start, and when they send or stop for
    * `typing-timeout` milliseconds. Pass it on to show "is typing" to the other
@@ -40346,6 +40453,9 @@ export type CustomElements = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
+   * - `feedback`: A message about the draft, shown under the field. While set, the composer
+   * is invalid, does not send, and does not submit, as a field's `feedback`
+   * does, and the message is announced as it appears.
    * - `label`: The field's name, read by screen readers.
    * - `maxlength`/`maxLength`: The most characters a draft can have. The field stops taking more.
    * - `minlength`/`minLength`: The fewest characters a draft can have, once the reader has written in
@@ -40494,6 +40604,7 @@ export type CustomElements = {
    *
    * - `composer`: The whole composer.
    * - `end`: The box around the `end` slot.
+   * - `feedback`: The `feedback` message, under the field while it is set.
    * - `field`: The text field.
    * - `mark`: The icon inside the send button.
    * - `send`: The send button.
@@ -40504,7 +40615,7 @@ export type CustomElements = {
    *
    * These can be used to apply styling when a component is in a given state.
    *
-   * - `invalid`: The draft fails `required`, `minlength`, `maxlength`, or a custom error, and the reader has tried to send or submit it, or edited the field and left it.
+   * - `invalid`: The draft fails `required`, `minlength`, `maxlength`, or a custom error, and the reader has tried to send or submit it, or edited the field and left it. Or `feedback` is set.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
   "helix-headless-chat-composer": Partial<
@@ -40638,6 +40749,13 @@ export type CustomElements = {
    * `loading` while you fetch, then prepend the older turns. The turn the user
    * was reading stays in place on screen.
    *
+   * The transcript is a `log`, the role for content added in order where the
+   * newest matters most, and it answers the APG feed's keys. The `feed` role
+   * reads its articles as a list from the top, with no newest end to stay
+   * pinned to, so the log keeps the role a conversation has. While `loading` is
+   * set or older turns load, the log carries `aria-busy`, as the APG asks of a
+   * feed.
+   *
    * The log is `aria-live="off"`. A separate status region announces each new
    * turn once, when it has finished arriving. It skips the user's own turns
    * unless they failed to send, turns loaded as history, and the turns already
@@ -40650,6 +40768,12 @@ export type CustomElements = {
    * conversations. `turns` draws a long
    * transcript one window at a time, so the log needs a block size of its own.
    *
+   * The log scrolls on this tier. It carries `data-scroller`, and `core` ships
+   * `[data-scroller] { overflow: auto }` into every shadow root, so pinning,
+   * history and the window work with no stylesheet. You still need to give the
+   * log a block size, such as `helix-headless-chat::part(log) { block-size:
+   * 20rem }`.
+   *
    * **A conversation is built from three elements.** The chat holds the
    * transcript, a `Chat.Message` stands for each turn, and a `Chat.Composer` sits
    * in the `composer` slot. When the user sends, `helix-send` reaches the chat:
@@ -40666,7 +40790,9 @@ export type CustomElements = {
    * turn says its place, such as "3 of 40", windowed or not. The transcript is
    * a tab stop while it holds a turn, and the turn a reader moved to is one
    * too. Moving to an older turn unpins a transcript that scrolls and scrolls
-   * the turn into view, and moving to the newest pins it again.
+   * the turn into view, and moving to the newest pins it again. When the turn
+   * holding focus is removed, focus moves to the turn that took its place, or to
+   * the one before it where it was the last.
    *
    * | Key | What it does |
    * |---|---|
@@ -40845,7 +40971,7 @@ export type CustomElements = {
    * - `indicator`: The three dots before the words that say who is typing, which the styled tier animates as a message's are. Hidden from screen readers.
    * - `live`: The region where screen readers announce each turn once it has arrived.
    * - `loading`: Shown while the history loads.
-   * - `log`: The transcript, which scrolls.
+   * - `log`: The transcript, which scrolls. On this tier, it needs only a block size.
    * - `message`: The message drawn for a turn from `turns`, forwarded whole.
    * - `message-actions`: The controls on a turn from `turns`, beside its time.
    * - `message-avatar`: The avatar box of a turn from `turns`.
@@ -41779,7 +41905,8 @@ export type CustomElements = {
    *
    * The trigger and ArrowDown open the panel with focus in the square. Tab moves
    * between the panel's controls without leaving it, and Escape closes it and
-   * returns focus to the field.
+   * returns focus to the control that opened it: the trigger after a press, and
+   * the field after ArrowDown.
    *
    * The component sets `--color-input-swatch`, so do not set it yourself. It
    * holds the resolved color, so the styled tier can paint the swatch without
@@ -43733,6 +43860,10 @@ export type CustomElements = {
    * Off by default. Windowing costs a scroll listener, a measurement per row
    * drawn, and a `block-size` on the scrolling box, and a table of twenty rows
    * should pay none of them.
+   *
+   * While windowed, the `table` part scrolls on this tier: it carries
+   * `data-scroller`, and `core` ships `[data-scroller] { overflow: auto }` into
+   * every shadow root. You still need to give it a block size.
    * - `empty-text`/`emptyText`: The text shown and announced when there are no rows and none are loading.
    * - `loading`: Whether the rows are still loading.
    *
@@ -43895,7 +44026,7 @@ export type CustomElements = {
    * - `select`: The cell that holds a row's checkbox.
    * - `select-all`: The heading that holds the checkbox that selects every row.
    * - `select-selected`: Added to `select` in a selected row.
-   * - `table`: The grid.
+   * - `table`: The grid. While `windowed`, the box that scrolls, which needs only a block size on this tier.
    * - `toggle`: The mark in a row header that a press opens and closes its row by, in a tree grid.
    * - `toggle-mark`: The caret in `toggle`. It points along the line while the row is closed and down while it is open.
    * - `toggle-open`: Added to `toggle` while its row is open.
@@ -45631,6 +45762,10 @@ export type CustomElements = {
    * <helix-headless-drawer id="nav">…</helix-headless-drawer>
    * ```
    *
+   * From its first press, a button that opens the drawer this way says whether
+   * the drawer is open: a Helix button through `expanded`, and any other
+   * element with `aria-expanded`.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -52556,6 +52691,8 @@ export type CustomElements = {
    * These can be used to apply styling when a component is in a given state.
    *
    * - `checked`: The row is checked.
+   * - `disabled`: The row is disabled.
+   * - `expanded`: Under `submenus="flyout"`, the row's submenu is open beside it.
    * - `highlighted`: In a menu with `filterable`, the arrow keys or the pointer reached the row while focus stays in the filter field.
    * - `submenu-mark`: Under `submenus="flyout"`, a row in this row's submenu can be ticked or opens a submenu, so the submenu keeps its trailing column.
    * - `submenu-start`: Under `submenus="flyout"`, a row in this row's submenu has content before its label, so the submenu keeps its leading column.
@@ -52579,7 +52716,9 @@ export type CustomElements = {
    *
    * Submenus drill down by default. A submenu replaces the panel's content, and a
    * back row returns to the previous page. One panel stays inside a narrow
-   * window, and works on touch screens, which have no hover.
+   * window, and works on touch screens, which have no hover. Focus follows a
+   * mouse resting on a row in either mode, and a drilled page is a `menu` named
+   * by the row that opened it.
    *
    * **`submenus="flyout"` opens each submenu in a panel of its own beside its
    * row**, as React Aria's `SubmenuTrigger` and Radix's `Sub` do. Resting the
@@ -52613,6 +52752,11 @@ export type CustomElements = {
    * trigger's width, for a menu as wide as its trigger:
    * `helix-menu::part(surface) { min-inline-size: var(--floating-anchor-inline-size) }`.
    *
+   * **The choices in one place.** `checkedValues` holds the values of the rows
+   * that are checked, anywhere in the menu, and setting it checks exactly
+   * those rows, as React Aria's `selectedKeys` does. `change` is sent on the
+   * menu when a reader's choice changes it.
+   *
    * With `context`, the trigger is an area and the menu is its context menu: a
    * right-click, a long press, Shift+F10 or the menu key over the area opens it
    * at the pointer, or at the area's corner from the keyboard, as Radix's context
@@ -52635,7 +52779,8 @@ export type CustomElements = {
    * field: Up and Down Arrow move the highlight through the rows that are left,
    * Enter chooses the highlighted row, Right Arrow opens its submenu, Left Arrow
    * on a submenu goes back, and Escape clears the filter and then closes the
-   * menu. Home, End and the other keys move the caret and type. The field names
+   * menu. A screen reader hears how many rows the filter keeps
+   * (`results-label`). Home, End and the other keys move the caret and type. The field names
    * the highlighted row with `aria-activedescendant`, and the rows are a `menu`
    * after the field. Cancel `helix-filter` to keep every row
    * showing and narrow the rows yourself, such as by replacing them with rows
@@ -52675,6 +52820,9 @@ export type CustomElements = {
    * - `placement`: The side the menu opens on, when there is room.
    *
    * It moves if that side does not fit.
+   * - `results-label`/`resultsLabel`: What a screen reader hears when the filter narrows the rows. `{count}` is
+   * how many rows are left, written in the locale, and each language writes
+   * the forms it has, as Listbox's `results-label` does.
    * - `submenus`: How a submenu opens. `drill` shows it in place of the page showing, with
    * a way back. `flyout` opens it in a panel of its own beside its row.
    * - `empty-text`/`emptyText`: The text shown and announced when there are no rows and none are loading.
@@ -52703,6 +52851,13 @@ export type CustomElements = {
    *
    * Absent, a row is kept where its words hold the filter, in any case. A
    * property only, there being no way to write a function in markup. (property only)
+   * - `checkedValues`: The values of the choice rows that are checked, anywhere in the menu, in
+   * document order.
+   *
+   * Set it to check exactly those rows and uncheck every other choice row, as
+   * React Aria's `selectedKeys` controls a menu's selection from one place.
+   * Each row keeps its own `checked` too, which this reads and writes. `change`
+   * is sent on the menu when a reader's choice changes it. (property only)
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -52728,6 +52883,7 @@ export type CustomElements = {
    *
    * Events that will be emitted by the component.
    *
+   * - `change`: A reader's choice checked or unchecked rows. Read `checkedValues` for the rows that are checked now.
    * - `helix-before-close`: The menu is about to close. Cancelable: cancel it to keep it open.
    * - `helix-before-open`: The menu is about to open. Cancelable: cancel it to keep it closed.
    * - `helix-filter`: The text in the filter field changed, with the new text in `detail.value`. Cancelable: cancel it to keep every row showing and narrow the rows yourself.
@@ -52739,6 +52895,8 @@ export type CustomElements = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: The items.
+   * - `empty`: What the menu shows when it has no items, for content richer than `empty-text`.
+   * - `loading`: What the menu shows while its items load, for content richer than `loading-text`.
    * - `no-results`: What the menu shows when the filter keeps no rows, for content richer than `no-results-text`.
    * - `trigger`: The control that opens the menu, or with `context` the area a context menu opens over.
    *
@@ -52784,6 +52942,8 @@ export type CustomElements = {
    * These can be used to apply styling when a component is in a given state.
    *
    * - `drilled`: A submenu's page is showing, so content that is not a row can hide with the top page.
+   * - `entering`: From the moment the panel shows until its entrance has finished.
+   * - `exiting`: From the moment the panel hides until its exit has finished.
    * - `mark`: A row on the current page has a checkbox or a link, so every row keeps the trailing column.
    * - `open`: While the menu is open.
    * - `placed-bottom`: While the open panel sits below its trigger.
@@ -55598,7 +55758,9 @@ export type CustomElements = {
    *
    * It opens on click and from a command. `command="--show"` and the related
    * commands work as they do on `Dialog` and `Drawer`, so a button anywhere on
-   * the page can open the popover with no script.
+   * the page can open the popover with no script. From its first press, a
+   * button that opens it this way says whether the popover is open: a Helix
+   * button through `expanded`, and any other element with `aria-expanded`.
    *
    * **Opening moves focus into the panel**, to the first control in it, or to the
    * panel itself where it holds none, and closing from inside gives it back to
@@ -55608,8 +55770,12 @@ export type CustomElements = {
    * `modal` keeps `Tab` inside the panel while it is open and says so with
    * `aria-modal`, for a panel that has to be answered before the page goes on.
    * The rest of the page is hidden from screen readers with `aria-hidden` while
-   * it is open, so the virtual cursor stays in the panel too. Without it the
-   * popover does not trap focus.
+   * it is open, so the virtual cursor stays in the panel too, and the page does
+   * not scroll behind it. Without it the popover does not trap focus.
+   *
+   * A press outside closes the panel and leaves focus where the press put it.
+   * Where it put focus nowhere, as a press on text or on the page's background
+   * does, focus goes back to the trigger.
    *
    * The panel's name is `label` when you set it. Otherwise it is the first
    * heading in the panel, or the elements an `aria-labelledby` on the host names.
@@ -55625,10 +55791,17 @@ export type CustomElements = {
    * | Escape | Closes the panel and puts focus back on the trigger. |
    * | Tab, Shift+Tab | Moves through the controls in the panel. Leaving the panel and the trigger closes it. With `modal`, moves from the last control round to the first and from the first round to the last. |
    *
+   * The panel opens against the trigger, or against the element `anchor` names,
+   * such as a field beside the button that opens it. `offset` moves it away from
+   * that element, `cross-offset` slides it along the side it is on,
+   * `container-padding` keeps it that far from the window's edges, and
+   * `flip="false"` keeps it on its side where the other side has more room.
+   *
    * `arrow` draws a point on the panel's edge facing the trigger. The side the
-   * panel landed on is on the host as `:state(placed-top)` and its kin, and the
-   * trigger's width is on the panel as `--floating-anchor-inline-size`, for a
-   * panel as wide as its trigger:
+   * panel landed on is on the host as `:state(placed-top)` and its kin, its
+   * alignment along that side as `:state(aligned-start)` or
+   * `:state(aligned-end)`, and the trigger's width is on the panel as
+   * `--floating-anchor-inline-size`, for a panel as wide as its trigger:
    *
    * ```css
    * helix-popover::part(popover) {
@@ -55640,12 +55813,25 @@ export type CustomElements = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
+   * - `anchor`: The element the panel opens against, where that is not the trigger: its
+   * `id` in the same document or shadow root, or the element itself. Left
+   * empty, the panel opens against the trigger, or against the button whose
+   * command opened it.
    * - `arrow`: Draws a point on the panel's edge facing the trigger.
    *
    * Off by default, which is the house style: a panel that opens from its
    * trigger already reads as belonging to it.
+   * - `container-padding`/`containerPadding`: How close to the window's edges the panel may come, in pixels, when it
+   * slides, shrinks or moves to the other side to fit. Left unset, it slides
+   * and shrinks to 8 pixels from an edge and moves to the other side only
+   * once it would cross one.
+   * - `cross-offset`/`crossOffset`: How far to slide the panel along the side it is on, in pixels: to the
+   * right on the top or the bottom, and down on the left or the right.
    * - `fallback-label`/`fallbackLabel`: The panel's name where nothing else names it: no `label`, no heading in
    * the panel, and no `aria-labelledby` on the host.
+   * - `flip`: Whether the panel moves to the other side of the trigger when its own
+   * side has no room. On by default. Write `flip="false"` to keep it on its
+   * side, where it shrinks to fit, as React Aria's `shouldFlip` turns off.
    * - `label`: The panel's name, read by screen readers. Left empty, the first heading in
    * the panel names it, and then `fallback-label`.
    * - `modal`: Keeps `Tab` inside the panel while it is open, marks the panel
@@ -55743,6 +55929,8 @@ export type CustomElements = {
    *
    * These can be used to apply styling when a component is in a given state.
    *
+   * - `aligned-end`: While the panel is aligned to the end of the side it sits on.
+   * - `aligned-start`: While the panel is aligned to the start of the side it sits on.
    * - `entering`: From the moment the panel shows until its entrance has finished.
    * - `exiting`: From the moment the panel hides until its exit has finished.
    * - `open`: While the popover is open.
@@ -57338,7 +57526,7 @@ export type CustomElements = {
    * | Down, Enter, Space | Opens the list on the chosen option, or the first. |
    * | Up | Opens the list on the chosen option, or the last. |
    * | Home, End | Opens the list on the first or the last option. |
-   * | Left, Right | Chooses the option before or after the chosen one without opening, as React Aria's Select does, in either direction of text. |
+   * | Left, Right | Chooses the option before or after the chosen one without opening, as React Aria's Select does. On a right-to-left page Left chooses the one after. |
    * | A letter or a word | Chooses the option whose words start with what you typed, as a native `<select>` does. With `multiple`, opens the list on it. |
    *
    * In the open list, which is a `Listbox`:
@@ -61319,6 +61507,10 @@ export type CustomElements = {
    * along, so the two writes a consumer would make in sequence do not compose
    * into the range they asked for. The platform has this method for that reason
    * and so does this.
+   * - `setRangeText(replacement: string, start?: number, end?: number, selectMode?: SelectionMode) => void`: Replaces a range of the text, as the native method does: the selection
+   * where `start` and `end` are left out, and `selectMode` says what is
+   * selected after. It sends no event, as the native method sends none.
+   * - `select() => void`: Selects everything in the field.
    * - `focus(options?: FocusOptions) => void`: Puts the caret in the field, as a label pointing at it would.
    * - `requestValue(next: string) => boolean`: Requests a new value, and returns whether the change was applied.
    *
@@ -69445,6 +69637,11 @@ export type CustomElementsSolidJs = {
    * Sending an empty required composer counts as trying. Tabbing past an empty
    * composer marks nothing.
    *
+   * **`feedback` is a message of your own about the draft**, such as one your
+   * server sent back. While it is set, the composer is invalid at once, does
+   * not send or submit, shows the message under the field, and a screen reader
+   * hears it as it appears. Clear it to let the draft go.
+   *
    * **`typing` says whether the user is writing**, and `helix-typing` is sent
    * each time it changes: when they start, and when they send or stop for
    * `typing-timeout` milliseconds. Pass it on to show "is typing" to the other
@@ -69454,6 +69651,9 @@ export type CustomElementsSolidJs = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
+   * - `feedback`: A message about the draft, shown under the field. While set, the composer
+   * is invalid, does not send, and does not submit, as a field's `feedback`
+   * does, and the message is announced as it appears.
    * - `label`: The field's name, read by screen readers.
    * - `maxlength`/`maxLength`: The most characters a draft can have. The field stops taking more.
    * - `minlength`/`minLength`: The fewest characters a draft can have, once the reader has written in
@@ -69602,6 +69802,7 @@ export type CustomElementsSolidJs = {
    *
    * - `composer`: The whole composer.
    * - `end`: The box around the `end` slot.
+   * - `feedback`: The `feedback` message, under the field while it is set.
    * - `field`: The text field.
    * - `mark`: The icon inside the send button.
    * - `send`: The send button.
@@ -69612,7 +69813,7 @@ export type CustomElementsSolidJs = {
    *
    * These can be used to apply styling when a component is in a given state.
    *
-   * - `invalid`: The draft fails `required`, `minlength`, `maxlength`, or a custom error, and the reader has tried to send or submit it, or edited the field and left it.
+   * - `invalid`: The draft fails `required`, `minlength`, `maxlength`, or a custom error, and the reader has tried to send or submit it, or edited the field and left it. Or `feedback` is set.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
   "helix-headless-chat-composer": Partial<
@@ -69748,6 +69949,13 @@ export type CustomElementsSolidJs = {
    * `loading` while you fetch, then prepend the older turns. The turn the user
    * was reading stays in place on screen.
    *
+   * The transcript is a `log`, the role for content added in order where the
+   * newest matters most, and it answers the APG feed's keys. The `feed` role
+   * reads its articles as a list from the top, with no newest end to stay
+   * pinned to, so the log keeps the role a conversation has. While `loading` is
+   * set or older turns load, the log carries `aria-busy`, as the APG asks of a
+   * feed.
+   *
    * The log is `aria-live="off"`. A separate status region announces each new
    * turn once, when it has finished arriving. It skips the user's own turns
    * unless they failed to send, turns loaded as history, and the turns already
@@ -69760,6 +69968,12 @@ export type CustomElementsSolidJs = {
    * conversations. `turns` draws a long
    * transcript one window at a time, so the log needs a block size of its own.
    *
+   * The log scrolls on this tier. It carries `data-scroller`, and `core` ships
+   * `[data-scroller] { overflow: auto }` into every shadow root, so pinning,
+   * history and the window work with no stylesheet. You still need to give the
+   * log a block size, such as `helix-headless-chat::part(log) { block-size:
+   * 20rem }`.
+   *
    * **A conversation is built from three elements.** The chat holds the
    * transcript, a `Chat.Message` stands for each turn, and a `Chat.Composer` sits
    * in the `composer` slot. When the user sends, `helix-send` reaches the chat:
@@ -69776,7 +69990,9 @@ export type CustomElementsSolidJs = {
    * turn says its place, such as "3 of 40", windowed or not. The transcript is
    * a tab stop while it holds a turn, and the turn a reader moved to is one
    * too. Moving to an older turn unpins a transcript that scrolls and scrolls
-   * the turn into view, and moving to the newest pins it again.
+   * the turn into view, and moving to the newest pins it again. When the turn
+   * holding focus is removed, focus moves to the turn that took its place, or to
+   * the one before it where it was the last.
    *
    * | Key | What it does |
    * |---|---|
@@ -69955,7 +70171,7 @@ export type CustomElementsSolidJs = {
    * - `indicator`: The three dots before the words that say who is typing, which the styled tier animates as a message's are. Hidden from screen readers.
    * - `live`: The region where screen readers announce each turn once it has arrived.
    * - `loading`: Shown while the history loads.
-   * - `log`: The transcript, which scrolls.
+   * - `log`: The transcript, which scrolls. On this tier, it needs only a block size.
    * - `message`: The message drawn for a turn from `turns`, forwarded whole.
    * - `message-actions`: The controls on a turn from `turns`, beside its time.
    * - `message-avatar`: The avatar box of a turn from `turns`.
@@ -70902,7 +71118,8 @@ export type CustomElementsSolidJs = {
    *
    * The trigger and ArrowDown open the panel with focus in the square. Tab moves
    * between the panel's controls without leaving it, and Escape closes it and
-   * returns focus to the field.
+   * returns focus to the control that opened it: the trigger after a press, and
+   * the field after ArrowDown.
    *
    * The component sets `--color-input-swatch`, so do not set it yourself. It
    * holds the resolved color, so the styled tier can paint the swatch without
@@ -72865,6 +73082,10 @@ export type CustomElementsSolidJs = {
    * Off by default. Windowing costs a scroll listener, a measurement per row
    * drawn, and a `block-size` on the scrolling box, and a table of twenty rows
    * should pay none of them.
+   *
+   * While windowed, the `table` part scrolls on this tier: it carries
+   * `data-scroller`, and `core` ships `[data-scroller] { overflow: auto }` into
+   * every shadow root. You still need to give it a block size.
    * - `empty-text`/`emptyText`: The text shown and announced when there are no rows and none are loading.
    * - `loading`: Whether the rows are still loading.
    *
@@ -73027,7 +73248,7 @@ export type CustomElementsSolidJs = {
    * - `select`: The cell that holds a row's checkbox.
    * - `select-all`: The heading that holds the checkbox that selects every row.
    * - `select-selected`: Added to `select` in a selected row.
-   * - `table`: The grid.
+   * - `table`: The grid. While `windowed`, the box that scrolls, which needs only a block size on this tier.
    * - `toggle`: The mark in a row header that a press opens and closes its row by, in a tree grid.
    * - `toggle-mark`: The caret in `toggle`. It points along the line while the row is closed and down while it is open.
    * - `toggle-open`: Added to `toggle` while its row is open.
@@ -74779,6 +75000,10 @@ export type CustomElementsSolidJs = {
    * <helix-headless-drawer id="nav">…</helix-headless-drawer>
    * ```
    *
+   * From its first press, a button that opens the drawer this way says whether
+   * the drawer is open: a Helix button through `expanded`, and any other
+   * element with `aria-expanded`.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -81790,6 +82015,8 @@ export type CustomElementsSolidJs = {
    * These can be used to apply styling when a component is in a given state.
    *
    * - `checked`: The row is checked.
+   * - `disabled`: The row is disabled.
+   * - `expanded`: Under `submenus="flyout"`, the row's submenu is open beside it.
    * - `highlighted`: In a menu with `filterable`, the arrow keys or the pointer reached the row while focus stays in the filter field.
    * - `submenu-mark`: Under `submenus="flyout"`, a row in this row's submenu can be ticked or opens a submenu, so the submenu keeps its trailing column.
    * - `submenu-start`: Under `submenus="flyout"`, a row in this row's submenu has content before its label, so the submenu keeps its leading column.
@@ -81816,7 +82043,9 @@ export type CustomElementsSolidJs = {
    *
    * Submenus drill down by default. A submenu replaces the panel's content, and a
    * back row returns to the previous page. One panel stays inside a narrow
-   * window, and works on touch screens, which have no hover.
+   * window, and works on touch screens, which have no hover. Focus follows a
+   * mouse resting on a row in either mode, and a drilled page is a `menu` named
+   * by the row that opened it.
    *
    * **`submenus="flyout"` opens each submenu in a panel of its own beside its
    * row**, as React Aria's `SubmenuTrigger` and Radix's `Sub` do. Resting the
@@ -81850,6 +82079,11 @@ export type CustomElementsSolidJs = {
    * trigger's width, for a menu as wide as its trigger:
    * `helix-menu::part(surface) { min-inline-size: var(--floating-anchor-inline-size) }`.
    *
+   * **The choices in one place.** `checkedValues` holds the values of the rows
+   * that are checked, anywhere in the menu, and setting it checks exactly
+   * those rows, as React Aria's `selectedKeys` does. `change` is sent on the
+   * menu when a reader's choice changes it.
+   *
    * With `context`, the trigger is an area and the menu is its context menu: a
    * right-click, a long press, Shift+F10 or the menu key over the area opens it
    * at the pointer, or at the area's corner from the keyboard, as Radix's context
@@ -81872,7 +82106,8 @@ export type CustomElementsSolidJs = {
    * field: Up and Down Arrow move the highlight through the rows that are left,
    * Enter chooses the highlighted row, Right Arrow opens its submenu, Left Arrow
    * on a submenu goes back, and Escape clears the filter and then closes the
-   * menu. Home, End and the other keys move the caret and type. The field names
+   * menu. A screen reader hears how many rows the filter keeps
+   * (`results-label`). Home, End and the other keys move the caret and type. The field names
    * the highlighted row with `aria-activedescendant`, and the rows are a `menu`
    * after the field. Cancel `helix-filter` to keep every row
    * showing and narrow the rows yourself, such as by replacing them with rows
@@ -81912,6 +82147,9 @@ export type CustomElementsSolidJs = {
    * - `placement`: The side the menu opens on, when there is room.
    *
    * It moves if that side does not fit.
+   * - `results-label`/`resultsLabel`: What a screen reader hears when the filter narrows the rows. `{count}` is
+   * how many rows are left, written in the locale, and each language writes
+   * the forms it has, as Listbox's `results-label` does.
    * - `submenus`: How a submenu opens. `drill` shows it in place of the page showing, with
    * a way back. `flyout` opens it in a panel of its own beside its row.
    * - `empty-text`/`emptyText`: The text shown and announced when there are no rows and none are loading.
@@ -81940,6 +82178,13 @@ export type CustomElementsSolidJs = {
    *
    * Absent, a row is kept where its words hold the filter, in any case. A
    * property only, there being no way to write a function in markup. (property only)
+   * - `checkedValues`: The values of the choice rows that are checked, anywhere in the menu, in
+   * document order.
+   *
+   * Set it to check exactly those rows and uncheck every other choice row, as
+   * React Aria's `selectedKeys` controls a menu's selection from one place.
+   * Each row keeps its own `checked` too, which this reads and writes. `change`
+   * is sent on the menu when a reader's choice changes it. (property only)
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -81965,6 +82210,7 @@ export type CustomElementsSolidJs = {
    *
    * Events that will be emitted by the component.
    *
+   * - `change`: A reader's choice checked or unchecked rows. Read `checkedValues` for the rows that are checked now.
    * - `helix-before-close`: The menu is about to close. Cancelable: cancel it to keep it open.
    * - `helix-before-open`: The menu is about to open. Cancelable: cancel it to keep it closed.
    * - `helix-filter`: The text in the filter field changed, with the new text in `detail.value`. Cancelable: cancel it to keep every row showing and narrow the rows yourself.
@@ -81976,6 +82222,8 @@ export type CustomElementsSolidJs = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: The items.
+   * - `empty`: What the menu shows when it has no items, for content richer than `empty-text`.
+   * - `loading`: What the menu shows while its items load, for content richer than `loading-text`.
    * - `no-results`: What the menu shows when the filter keeps no rows, for content richer than `no-results-text`.
    * - `trigger`: The control that opens the menu, or with `context` the area a context menu opens over.
    *
@@ -82021,6 +82269,8 @@ export type CustomElementsSolidJs = {
    * These can be used to apply styling when a component is in a given state.
    *
    * - `drilled`: A submenu's page is showing, so content that is not a row can hide with the top page.
+   * - `entering`: From the moment the panel shows until its entrance has finished.
+   * - `exiting`: From the moment the panel hides until its exit has finished.
    * - `mark`: A row on the current page has a checkbox or a link, so every row keeps the trailing column.
    * - `open`: While the menu is open.
    * - `placed-bottom`: While the open panel sits below its trigger.
@@ -84862,7 +85112,9 @@ export type CustomElementsSolidJs = {
    *
    * It opens on click and from a command. `command="--show"` and the related
    * commands work as they do on `Dialog` and `Drawer`, so a button anywhere on
-   * the page can open the popover with no script.
+   * the page can open the popover with no script. From its first press, a
+   * button that opens it this way says whether the popover is open: a Helix
+   * button through `expanded`, and any other element with `aria-expanded`.
    *
    * **Opening moves focus into the panel**, to the first control in it, or to the
    * panel itself where it holds none, and closing from inside gives it back to
@@ -84872,8 +85124,12 @@ export type CustomElementsSolidJs = {
    * `modal` keeps `Tab` inside the panel while it is open and says so with
    * `aria-modal`, for a panel that has to be answered before the page goes on.
    * The rest of the page is hidden from screen readers with `aria-hidden` while
-   * it is open, so the virtual cursor stays in the panel too. Without it the
-   * popover does not trap focus.
+   * it is open, so the virtual cursor stays in the panel too, and the page does
+   * not scroll behind it. Without it the popover does not trap focus.
+   *
+   * A press outside closes the panel and leaves focus where the press put it.
+   * Where it put focus nowhere, as a press on text or on the page's background
+   * does, focus goes back to the trigger.
    *
    * The panel's name is `label` when you set it. Otherwise it is the first
    * heading in the panel, or the elements an `aria-labelledby` on the host names.
@@ -84889,10 +85145,17 @@ export type CustomElementsSolidJs = {
    * | Escape | Closes the panel and puts focus back on the trigger. |
    * | Tab, Shift+Tab | Moves through the controls in the panel. Leaving the panel and the trigger closes it. With `modal`, moves from the last control round to the first and from the first round to the last. |
    *
+   * The panel opens against the trigger, or against the element `anchor` names,
+   * such as a field beside the button that opens it. `offset` moves it away from
+   * that element, `cross-offset` slides it along the side it is on,
+   * `container-padding` keeps it that far from the window's edges, and
+   * `flip="false"` keeps it on its side where the other side has more room.
+   *
    * `arrow` draws a point on the panel's edge facing the trigger. The side the
-   * panel landed on is on the host as `:state(placed-top)` and its kin, and the
-   * trigger's width is on the panel as `--floating-anchor-inline-size`, for a
-   * panel as wide as its trigger:
+   * panel landed on is on the host as `:state(placed-top)` and its kin, its
+   * alignment along that side as `:state(aligned-start)` or
+   * `:state(aligned-end)`, and the trigger's width is on the panel as
+   * `--floating-anchor-inline-size`, for a panel as wide as its trigger:
    *
    * ```css
    * helix-popover::part(popover) {
@@ -84904,12 +85167,25 @@ export type CustomElementsSolidJs = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
+   * - `anchor`: The element the panel opens against, where that is not the trigger: its
+   * `id` in the same document or shadow root, or the element itself. Left
+   * empty, the panel opens against the trigger, or against the button whose
+   * command opened it.
    * - `arrow`: Draws a point on the panel's edge facing the trigger.
    *
    * Off by default, which is the house style: a panel that opens from its
    * trigger already reads as belonging to it.
+   * - `container-padding`/`containerPadding`: How close to the window's edges the panel may come, in pixels, when it
+   * slides, shrinks or moves to the other side to fit. Left unset, it slides
+   * and shrinks to 8 pixels from an edge and moves to the other side only
+   * once it would cross one.
+   * - `cross-offset`/`crossOffset`: How far to slide the panel along the side it is on, in pixels: to the
+   * right on the top or the bottom, and down on the left or the right.
    * - `fallback-label`/`fallbackLabel`: The panel's name where nothing else names it: no `label`, no heading in
    * the panel, and no `aria-labelledby` on the host.
+   * - `flip`: Whether the panel moves to the other side of the trigger when its own
+   * side has no room. On by default. Write `flip="false"` to keep it on its
+   * side, where it shrinks to fit, as React Aria's `shouldFlip` turns off.
    * - `label`: The panel's name, read by screen readers. Left empty, the first heading in
    * the panel names it, and then `fallback-label`.
    * - `modal`: Keeps `Tab` inside the panel while it is open, marks the panel
@@ -85007,6 +85283,8 @@ export type CustomElementsSolidJs = {
    *
    * These can be used to apply styling when a component is in a given state.
    *
+   * - `aligned-end`: While the panel is aligned to the end of the side it sits on.
+   * - `aligned-start`: While the panel is aligned to the start of the side it sits on.
    * - `entering`: From the moment the panel shows until its entrance has finished.
    * - `exiting`: From the moment the panel hides until its exit has finished.
    * - `open`: While the popover is open.
@@ -86623,7 +86901,7 @@ export type CustomElementsSolidJs = {
    * | Down, Enter, Space | Opens the list on the chosen option, or the first. |
    * | Up | Opens the list on the chosen option, or the last. |
    * | Home, End | Opens the list on the first or the last option. |
-   * | Left, Right | Chooses the option before or after the chosen one without opening, as React Aria's Select does, in either direction of text. |
+   * | Left, Right | Chooses the option before or after the chosen one without opening, as React Aria's Select does. On a right-to-left page Left chooses the one after. |
    * | A letter or a word | Chooses the option whose words start with what you typed, as a native `<select>` does. With `multiple`, opens the list on it. |
    *
    * In the open list, which is a `Listbox`:
@@ -90667,6 +90945,10 @@ export type CustomElementsSolidJs = {
    * along, so the two writes a consumer would make in sequence do not compose
    * into the range they asked for. The platform has this method for that reason
    * and so does this.
+   * - `setRangeText(replacement: string, start?: number, end?: number, selectMode?: SelectionMode) => void`: Replaces a range of the text, as the native method does: the selection
+   * where `start` and `end` are left out, and `selectMode` says what is
+   * selected after. It sends no event, as the native method sends none.
+   * - `select() => void`: Selects everything in the field.
    * - `focus(options?: FocusOptions) => void`: Puts the caret in the field, as a label pointing at it would.
    * - `requestValue(next: string) => boolean`: Requests a new value, and returns whether the change was applied.
    *