@fusion.dev/helix-headless 0.149.1 → 0.150.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-headless",
   "description": "Headless component tier. Structure, accessibility, state, and form participation. No styling.",
-  "version": "0.149.1",
+  "version": "0.150.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -49,13 +49,13 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.149.1",
-    "@fusion.dev/helix-icons": "0.149.1",
+    "@fusion.dev/helix-core": "0.150.0",
+    "@fusion.dev/helix-icons": "0.150.0",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.149.1",
-    "@fusion.dev/helix-testing": "0.149.1",
+    "@fusion.dev/helix-cem": "0.150.0",
+    "@fusion.dev/helix-testing": "0.150.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.14.5",
     "@lit-labs/ssr": "^4.1.0",

package/types/jsx.d.ts

@@ -20693,14 +20693,10 @@ between them makes a reader parse the punctuation to find where the name
 ends. Matching still reads the label, so what somebody types is matched
 against the name rather than against prose about it.
 
-**A property and not a slot, which is the departure worth explaining.** The
-area rules say a content property is its slot's fallback, and that holds for
-a region always drawn: `Avatar`'s initials, `Tooltip`'s text. This one is
-usually absent, and a wrapped slot generates a box whether or not it is
-filled, so every option without a caption would carry an empty line. The
-detection that would avoid it does not exist, `:host(:has())` being invalid
-and the server having no children to inspect. A property is known at render
-time, so the component can decline to draw the box at all.
+For a caption richer than a string, slot it into `description`. The
+property is that slot's fallback inside the `description` part. With no
+property the slot is drawn bare, which takes no box while it is empty, so
+an option without a caption carries no empty line.
 
 It does not reflect, per the rule that payload state stays off the host: a
 string is not a fact a selector needs. */
@@ -20788,6 +20784,13 @@ name is the fault `TreeItem` avoids by mirroring to `data-selected`.
 Splitting them means moving what every stylesheet selects on, which is a
 change of its own rather than a property being added. */
   defaultSelected?: (HelixHeadlessOption["defaultSelected"]) | undefined;
+  /** Whether the option says it is selected while the keyboard is on it.
+
+Written by a control whose list holds suggestions, such as `FilterInput`:
+nothing there stays chosen, so the row the keyboard is on is the
+selection, as the APG combobox's list with selection that follows focus
+says. No attribute: it is coordination between elements. */
+  selectionFollowsActive?: (HelixHeadlessOption["selectionFollowsActive"]) | undefined;
 
   /** The option was chosen. Cancelable: canceling it leaves the selection as it was, and keeps the browser from following an option's `href`. */
   "onhelix-select"?: ((e: HelixHeadlessOptionHelixSelectElementEvent) => void) | undefined;
@@ -20850,14 +20853,10 @@ between them makes a reader parse the punctuation to find where the name
 ends. Matching still reads the label, so what somebody types is matched
 against the name rather than against prose about it.
 
-**A property and not a slot, which is the departure worth explaining.** The
-area rules say a content property is its slot's fallback, and that holds for
-a region always drawn: `Avatar`'s initials, `Tooltip`'s text. This one is
-usually absent, and a wrapped slot generates a box whether or not it is
-filled, so every option without a caption would carry an empty line. The
-detection that would avoid it does not exist, `:host(:has())` being invalid
-and the server having no children to inspect. A property is known at render
-time, so the component can decline to draw the box at all.
+For a caption richer than a string, slot it into `description`. The
+property is that slot's fallback inside the `description` part. With no
+property the slot is drawn bare, which takes no box while it is empty, so
+an option without a caption carries no empty line.
 
 It does not reflect, per the rule that payload state stays off the host: a
 string is not a fact a selector needs. */
@@ -20945,6 +20944,13 @@ name is the fault `TreeItem` avoids by mirroring to `data-selected`.
 Splitting them means moving what every stylesheet selects on, which is a
 change of its own rather than a property being added. */
   "prop:defaultSelected"?: (HelixHeadlessOption["defaultSelected"]) | undefined;
+  /** Whether the option says it is selected while the keyboard is on it.
+
+Written by a control whose list holds suggestions, such as `FilterInput`:
+nothing there stays chosen, so the row the keyboard is on is the
+selection, as the APG combobox's list with selection that follows focus
+says. No attribute: it is coordination between elements. */
+  "prop:selectionFollowsActive"?: (HelixHeadlessOption["selectionFollowsActive"]) | undefined;
   /** The option was chosen. Cancelable: canceling it leaves the selection as it was, and keeps the browser from following an option's `href`. */
   "on:helix-select"?: ((e: HelixHeadlessOptionHelixSelectElementEvent) => void) | undefined;
 
@@ -26968,6 +26974,13 @@ Absent is the tag's own words, its category first. */
   value?: (HelixHeadlessTag["value"]) | undefined;
   /** Whether the element shows a control that dismisses it. */
   dismissible?: (HelixHeadlessTag["dismissible"]) | undefined;
+  /** Whether the remove button is a tab stop of its own, outside a `Tag.Group`.
+
+A field that holds tags as its tokens, such as a `multiple` Combobox,
+writes `false`: the field's text is its one tab stop, and the arrow keys
+move from the text to the tags. No attribute: it is coordination between
+elements, as `focusable` is. */
+  dismissTabStop?: (HelixHeadlessTag["dismissTabStop"]) | undefined;
   /** Whether the tag holds its group's tab stop.
 
 Written by `Tag.Group` on every tag it holds, and unset outside one, which
@@ -27012,6 +27025,13 @@ Absent is the tag's own words, its category first. */
   "prop:value"?: (HelixHeadlessTag["value"]) | undefined;
   /** Whether the element shows a control that dismisses it. */
   "prop:dismissible"?: (HelixHeadlessTag["dismissible"]) | undefined;
+  /** Whether the remove button is a tab stop of its own, outside a `Tag.Group`.
+
+A field that holds tags as its tokens, such as a `multiple` Combobox,
+writes `false`: the field's text is its one tab stop, and the arrow keys
+move from the text to the tags. No attribute: it is coordination between
+elements, as `focusable` is. */
+  "prop:dismissTabStop"?: (HelixHeadlessTag["dismissTabStop"]) | undefined;
   /** Whether the tag holds its group's tab stop.
 
 Written by `Tag.Group` on every tag it holds, and unset outside one, which
@@ -29400,8 +29420,8 @@ name is the fault `TreeItem` avoids by mirroring to `data-selected`.
 Splitting them means moving what every stylesheet selects on, which is a
 change of its own rather than a property being added. */
   defaultSelected?: (HelixHeadlessToggle["defaultSelected"]) | undefined;
-  /** Whether the item holds the group's tab stop. Unset, the chosen item holds
-it.
+  /** Whether the item holds the group's tab stop. Unset, no group holds the
+item, and it is a toggle button with a tab stop of its own.
 
 Written by the group on every item: `true` for the chosen item, or for the
 first item that can be chosen while there is no selection to carry the
@@ -29416,6 +29436,8 @@ React consumer's hydration reports and does not patch up. */
 Written by the group, like `selected`, so no attribute. */
   pressed?: (HelixHeadlessToggle["pressed"]) | undefined;
 
+  /** Fired after a toggle button on its own is pressed or released. */
+  onchange?: ((e: HelixHeadlessToggleElementEvent) => void) | undefined;
   /** Fired when the item is chosen. Cancelable: call `preventDefault()` to keep the current choice. */
   "onhelix-select"?: ((e: HelixHeadlessToggleHelixSelectElementEvent) => void) | undefined;
 };
@@ -29458,8 +29480,8 @@ name is the fault `TreeItem` avoids by mirroring to `data-selected`.
 Splitting them means moving what every stylesheet selects on, which is a
 change of its own rather than a property being added. */
   "prop:defaultSelected"?: (HelixHeadlessToggle["defaultSelected"]) | undefined;
-  /** Whether the item holds the group's tab stop. Unset, the chosen item holds
-it.
+  /** Whether the item holds the group's tab stop. Unset, no group holds the
+item, and it is a toggle button with a tab stop of its own.
 
 Written by the group on every item: `true` for the chosen item, or for the
 first item that can be chosen while there is no selection to carry the
@@ -29473,6 +29495,8 @@ React consumer's hydration reports and does not patch up. */
 
 Written by the group, like `selected`, so no attribute. */
   "prop:pressed"?: (HelixHeadlessToggle["pressed"]) | undefined;
+  /** Fired after a toggle button on its own is pressed or released. */
+  "on:change"?: ((e: HelixHeadlessToggleElementEvent) => void) | undefined;
   /** Fired when the item is chosen. Cancelable: call `preventDefault()` to keep the current choice. */
   "on:helix-select"?: ((e: HelixHeadlessToggleHelixSelectElementEvent) => void) | undefined;
 
@@ -36909,6 +36933,7 @@ export type CustomElements = {
    * - `end`: Content at the trailing end, before the trigger.
    * - `feedback`: The message that says what is wrong with the value.
    * - `hint`: Help text under the field.
+   * - `label`: The label, for content richer than the `label` text.
    * - `panel-footer`: Content in the panel under the picker, such as a note or an action.
    * - `panel-header`: Content in the panel above the picker, such as a heading or a shortcut.
    * - `start`: Content at the leading end of the field, inside its border.
@@ -37455,6 +37480,9 @@ export type CustomElements = {
    * | Escape | Closes the list and puts the chosen words back. On a closed field, a second Escape clears a single choice. |
    * | Tab | Closes the list and moves on. |
    * | Backspace | With `multiple`, on an empty field, removes the last tag. |
+   * | Left | With `multiple`, with the caret at the start of the text, moves to the last tag's remove button. Right on a right-to-left page. |
+   * | Left, Right on a tag | Move between the tags, and past the last back to the text. |
+   * | Delete, Backspace on a tag | Removes the tag. |
    * | Space, Home, End, letters | Edit the text. |
    *
    * **ARIA.** The input is the `combobox`, named by the label, with
@@ -37470,7 +37498,8 @@ export type CustomElements = {
    * Set `autocomplete` to let a browser's autofill choose an option.
    *
    * With `multiple`, each chosen option is a tag in the field with its own remove
-   * control. The panel stays open and the filter clears after each choice, so the
+   * control. The text is the field's one tab stop, and the arrow keys reach the
+   * tags from it. The panel stays open and the filter clears after each choice, so the
    * next choice starts from the whole list.
    *
    * With `creatable`, the combobox offers a create row and fires `helix-create`.
@@ -38006,8 +38035,9 @@ export type CustomElements = {
    * **Keyboard.** Enter and Space copy, as they press a native button.
    *
    * The button is named `label`, or the host's `aria-label`, and its name
-   * changes to `copied-label` or `error-label` for the moment after a press,
-   * which is what a screen reader on it hears. The tooltip shows the same words.
+   * changes to `copied-label` or `error-label` for the moment after a press. The
+   * same words are said in a live region, so a screen reader hears the result,
+   * and the tooltip shows them.
    *
    * ## Attributes & Properties
    *
@@ -38188,7 +38218,7 @@ export type CustomElements = {
    * Custom selectors for styling elements within the component.
    *
    * - `button`: The inner button.
-   * - `live`: The live region that says `pending-label` when the button becomes pending under focus. It is rendered from the first time the button is pending.
+   * - `live`: The live region that says `copied-label` or `error-label` after a press, and `pending-label` when the button becomes pending under focus. It is rendered from the first time it says anything.
    * - `mark`: The clipboard icon, and the confirmation icon that replaces it.
    * - `spinner`: The ring a pending button turns, an empty element the styled button draws over the icon. It is rendered only while the button is pending.
    * - `tooltip`: The tooltip bubble, forwarded from the tooltip inside the button.
@@ -38961,6 +38991,7 @@ export type CustomElements = {
    *
    * - `feedback`: The error message under the field.
    * - `hint`: The help text under the field.
+   * - `label`: The label, for content richer than the `label` text.
    * - `next-icon`: The icon on the calendar's next month control.
    * - `panel-footer`: Content in the panel under the calendar, such as a note or an action.
    * - `panel-header`: Content in the panel above the calendar, such as a heading or a shortcut.
@@ -41029,7 +41060,8 @@ export type CustomElements = {
    *
    * **Keyboard.** The remove button is a tab stop of its own, and Enter or Space
    * on it asks to remove the filter. In a `FilterInput`, Backspace in the empty
-   * field asks to remove the last chip.
+   * field asks to remove the last chip, the arrow keys move between the field
+   * and the chips, and Delete or Backspace on a chip asks to remove it.
    *
    * The remove button is named `dismiss-label` followed by the chip's words,
    * such as "Remove filter Status is not open", so a row of chips says which
@@ -41560,6 +41592,9 @@ export type CustomElements = {
    * | Home, End | Highlights the first or the last suggestion while the panel is open. |
    * | Escape | Closes the panel and stops there, so a dialog around the field stays open. |
    * | Backspace | In an empty field, asks the last token to go. |
+   * | Left | With the caret at the start of the text, moves to the last token's remove button. Right on a right-to-left page. |
+   * | Left, Right on a token | Move between the tokens, and past the last back to the text. |
+   * | Delete, Backspace on a token | Asks the token to go. |
    *
    * **Typed filters.** The field parses only the fields you declare. Write
    * `FilterField` elements, usually inside the `FilterMenu` slotted into `start`,
@@ -48375,14 +48410,10 @@ export type CustomElements = {
    * ends. Matching still reads the label, so what somebody types is matched
    * against the name rather than against prose about it.
    *
-   * **A property and not a slot, which is the departure worth explaining.** The
-   * area rules say a content property is its slot's fallback, and that holds for
-   * a region always drawn: `Avatar`'s initials, `Tooltip`'s text. This one is
-   * usually absent, and a wrapped slot generates a box whether or not it is
-   * filled, so every option without a caption would carry an empty line. The
-   * detection that would avoid it does not exist, `:host(:has())` being invalid
-   * and the server having no children to inspect. A property is known at render
-   * time, so the component can decline to draw the box at all.
+   * For a caption richer than a string, slot it into `description`. The
+   * property is that slot's fallback inside the `description` part. With no
+   * property the slot is drawn bare, which takes no box while it is empty, so
+   * an option without a caption carries no empty line.
    *
    * It does not reflect, per the rule that payload state stays off the host: a
    * string is not a fact a selector needs.
@@ -48451,6 +48482,12 @@ export type CustomElements = {
    * name is the fault `TreeItem` avoids by mirroring to `data-selected`.
    * Splitting them means moving what every stylesheet selects on, which is a
    * change of its own rather than a property being added. (property only)
+   * - `selectionFollowsActive`: Whether the option says it is selected while the keyboard is on it.
+   *
+   * Written by a control whose list holds suggestions, such as `FilterInput`:
+   * nothing there stays chosen, so the row the keyboard is on is the
+   * selection, as the APG combobox's list with selection that follows focus
+   * says. No attribute: it is coordination between elements. (property only)
    * - `text`: The option's text, which a listbox matches typed text against.
    *
    * Read from the rendered content rather than required as a property, because
@@ -48523,7 +48560,9 @@ export type CustomElements = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: The option's label.
+   * - `description`: A second line under the label, for content richer than the `description` text.
    * - `end`: Content after the label, such as a shortcut or a count.
+   * - `indicator`: An icon shown while the option is chosen, in place of the check the styled option draws.
    * - `start`: Content before the label, such as an icon or an avatar.
    *
    * ## Methods
@@ -48551,6 +48590,8 @@ export type CustomElements = {
    * These can be used to apply styling when a component is in a given state.
    *
    * - `active`: While the keyboard is on the option, which is the option `aria-activedescendant` names.
+   * - `disabled`: While the option cannot be chosen.
+   * - `has-indicator`: An icon is slotted into `indicator`.
    * - `selected`: While the option is chosen.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
@@ -50114,7 +50155,11 @@ export type CustomElements = {
    *
    * No attribute: it is coordination between elements, and a consumer has no
    * reason to set it. (property only)
-   * - `items`: The radios, in light-DOM order. Client only: the server has no tree. (property only) (readonly)
+   * - `items`: The radios, in light-DOM order. Client only: the server has no tree.
+   *
+   * Descendants, as `Checkbox.Group` reads its boxes, so a radio inside a
+   * layout wrapper of yours is one of the group's. A radio held by a group
+   * nested inside this one is that group's. (property only) (readonly)
    * - `validity`: Whether the control meets its constraints, and why not. (property only) (readonly)
    * - `validationMessage`: The message the browser would show for the control, or an empty string. (property only) (readonly)
    * - `willValidate`: Whether the control is checked when its form is submitted. (property only) (readonly)
@@ -54231,7 +54276,10 @@ export type CustomElements = {
    * focus moves to the next tag, or the previous one after the last.
    *
    * `selection-mode` lets a reader select tags, with Space, Enter or a press:
-   * `single` selects one at a time and `multiple` any number. `value` holds the
+   * `single` selects one at a time and `multiple` any number. In `multiple`,
+   * Shift with an arrow, Home or End selects the range from the tag last
+   * pressed to the tag focus moves to, and Control or Command with A selects
+   * every tag that is not disabled. `value` holds the
    * selected tags' values, separated by commas, and a change asks with
    * `helix-before-change` and tells with `change`. Enter on a tag with an
    * `href` follows its link. A `disabled` tag is passed over. A selected tag
@@ -54246,6 +54294,8 @@ export type CustomElements = {
    * set is a `group`, and focus moves to its `empty` part,
    * which holds the `empty` slot: put words there such as "No filters" for a
    * reader to hear. With nothing slotted it says `empty-label`, "No tags".
+   * Where only disabled tags are left, the first of them holds the tab stop and
+   * takes focus, so the reader stays in the set.
    *
    * ## Attributes & Properties
    *
@@ -54358,6 +54408,12 @@ export type CustomElements = {
    *
    * Absent is the tag's own words, its category first.
    * - `dismissible`: Whether the element shows a control that dismisses it.
+   * - `dismissTabStop`: Whether the remove button is a tab stop of its own, outside a `Tag.Group`.
+   *
+   * A field that holds tags as its tokens, such as a `multiple` Combobox,
+   * writes `false`: the field's text is its one tab stop, and the arrow keys
+   * move from the text to the tags. No attribute: it is coordination between
+   * elements, as `focusable` is. (property only)
    * - `focusable`: Whether the tag holds its group's tab stop.
    *
    * Written by `Tag.Group` on every tag it holds, and unset outside one, which
@@ -54964,6 +55020,7 @@ export type CustomElements = {
    *
    * - `feedback`: The message that says what is wrong with the value.
    * - `hint`: Help under the field.
+   * - `label`: The label, for content richer than the `label` text.
    * - `panel-footer`: Content in the panel under the times, such as a note or an action.
    * - `panel-header`: Content in the panel above the times, such as a heading or a shortcut.
    * - `trigger`: The icon on the field that shows a list opens.
@@ -56252,6 +56309,11 @@ export type CustomElements = {
    * `selection-mode="multiple"` it is a `<button>` that says whether it is
    * pressed with `aria-pressed`.
    *
+   * **On its own, outside a `Toggle.Group`, it is a toggle button**, as React
+   * Aria's `ToggleButton`: a `<button>` with `aria-pressed`. A press, Enter or
+   * Space sends `helix-select`, which you can cancel, then flips `selected` and
+   * sends `change`. Write `selected` in the markup to start it pressed.
+   *
    * Do not use it for navigation. For navigation, use links marked with
    * `aria-current` and styled by the `data-navigation-item` recipe in the base
    * layer. The recipe has the same look, and links are not announced as choices.
@@ -56293,8 +56355,8 @@ export type CustomElements = {
    * name is the fault `TreeItem` avoids by mirroring to `data-selected`.
    * Splitting them means moving what every stylesheet selects on, which is a
    * change of its own rather than a property being added. (property only)
-   * - `focusable`: Whether the item holds the group's tab stop. Unset, the chosen item holds
-   * it.
+   * - `focusable`: Whether the item holds the group's tab stop. Unset, no group holds the
+   * item, and it is a toggle button with a tab stop of its own.
    *
    * Written by the group on every item: `true` for the chosen item, or for the
    * first item that can be chosen while there is no selection to carry the
@@ -56331,6 +56393,7 @@ export type CustomElements = {
    *
    * Events that will be emitted by the component.
    *
+   * - `change`: Fired after a toggle button on its own is pressed or released.
    * - `helix-select`: Fired when the item is chosen. Cancelable: call `preventDefault()` to keep the current choice.
    *
    * ## Slots
@@ -56343,13 +56406,13 @@ export type CustomElements = {
    *
    * Methods that can be called to access component functionality.
    *
+   * - `select() => boolean`: Chooses the item in its group, or, on its own, flips `selected` once
+   * `helix-select` stands and sends `change`.
    * - `focusItem() => void`: Moves focus to the item's control, for the set's arrow keys.
    *
    * The set drives the keys and cannot reach the control itself, which is
    * inside this shadow root, so the intent is a method and the internals stay
    * the item's.
-   * - `select() => boolean`: Selects the item and fires `helix-select`. Returns `false` if the item is
-   * disabled or a listener cancels the event.
    *
    * ## CSS Parts
    *
@@ -63340,6 +63403,7 @@ export type CustomElementsSolidJs = {
    * - `end`: Content at the trailing end, before the trigger.
    * - `feedback`: The message that says what is wrong with the value.
    * - `hint`: Help text under the field.
+   * - `label`: The label, for content richer than the `label` text.
    * - `panel-footer`: Content in the panel under the picker, such as a note or an action.
    * - `panel-header`: Content in the panel above the picker, such as a heading or a shortcut.
    * - `start`: Content at the leading end of the field, inside its border.
@@ -63888,6 +63952,9 @@ export type CustomElementsSolidJs = {
    * | Escape | Closes the list and puts the chosen words back. On a closed field, a second Escape clears a single choice. |
    * | Tab | Closes the list and moves on. |
    * | Backspace | With `multiple`, on an empty field, removes the last tag. |
+   * | Left | With `multiple`, with the caret at the start of the text, moves to the last tag's remove button. Right on a right-to-left page. |
+   * | Left, Right on a tag | Move between the tags, and past the last back to the text. |
+   * | Delete, Backspace on a tag | Removes the tag. |
    * | Space, Home, End, letters | Edit the text. |
    *
    * **ARIA.** The input is the `combobox`, named by the label, with
@@ -63903,7 +63970,8 @@ export type CustomElementsSolidJs = {
    * Set `autocomplete` to let a browser's autofill choose an option.
    *
    * With `multiple`, each chosen option is a tag in the field with its own remove
-   * control. The panel stays open and the filter clears after each choice, so the
+   * control. The text is the field's one tab stop, and the arrow keys reach the
+   * tags from it. The panel stays open and the filter clears after each choice, so the
    * next choice starts from the whole list.
    *
    * With `creatable`, the combobox offers a create row and fires `helix-create`.
@@ -64445,8 +64513,9 @@ export type CustomElementsSolidJs = {
    * **Keyboard.** Enter and Space copy, as they press a native button.
    *
    * The button is named `label`, or the host's `aria-label`, and its name
-   * changes to `copied-label` or `error-label` for the moment after a press,
-   * which is what a screen reader on it hears. The tooltip shows the same words.
+   * changes to `copied-label` or `error-label` for the moment after a press. The
+   * same words are said in a live region, so a screen reader hears the result,
+   * and the tooltip shows them.
    *
    * ## Attributes & Properties
    *
@@ -64627,7 +64696,7 @@ export type CustomElementsSolidJs = {
    * Custom selectors for styling elements within the component.
    *
    * - `button`: The inner button.
-   * - `live`: The live region that says `pending-label` when the button becomes pending under focus. It is rendered from the first time the button is pending.
+   * - `live`: The live region that says `copied-label` or `error-label` after a press, and `pending-label` when the button becomes pending under focus. It is rendered from the first time it says anything.
    * - `mark`: The clipboard icon, and the confirmation icon that replaces it.
    * - `spinner`: The ring a pending button turns, an empty element the styled button draws over the icon. It is rendered only while the button is pending.
    * - `tooltip`: The tooltip bubble, forwarded from the tooltip inside the button.
@@ -65404,6 +65473,7 @@ export type CustomElementsSolidJs = {
    *
    * - `feedback`: The error message under the field.
    * - `hint`: The help text under the field.
+   * - `label`: The label, for content richer than the `label` text.
    * - `next-icon`: The icon on the calendar's next month control.
    * - `panel-footer`: Content in the panel under the calendar, such as a note or an action.
    * - `panel-header`: Content in the panel above the calendar, such as a heading or a shortcut.
@@ -67498,7 +67568,8 @@ export type CustomElementsSolidJs = {
    *
    * **Keyboard.** The remove button is a tab stop of its own, and Enter or Space
    * on it asks to remove the filter. In a `FilterInput`, Backspace in the empty
-   * field asks to remove the last chip.
+   * field asks to remove the last chip, the arrow keys move between the field
+   * and the chips, and Delete or Backspace on a chip asks to remove it.
    *
    * The remove button is named `dismiss-label` followed by the chip's words,
    * such as "Remove filter Status is not open", so a row of chips says which
@@ -68033,6 +68104,9 @@ export type CustomElementsSolidJs = {
    * | Home, End | Highlights the first or the last suggestion while the panel is open. |
    * | Escape | Closes the panel and stops there, so a dialog around the field stays open. |
    * | Backspace | In an empty field, asks the last token to go. |
+   * | Left | With the caret at the start of the text, moves to the last token's remove button. Right on a right-to-left page. |
+   * | Left, Right on a token | Move between the tokens, and past the last back to the text. |
+   * | Delete, Backspace on a token | Asks the token to go. |
    *
    * **Typed filters.** The field parses only the fields you declare. Write
    * `FilterField` elements, usually inside the `FilterMenu` slotted into `start`,
@@ -74934,14 +75008,10 @@ export type CustomElementsSolidJs = {
    * ends. Matching still reads the label, so what somebody types is matched
    * against the name rather than against prose about it.
    *
-   * **A property and not a slot, which is the departure worth explaining.** The
-   * area rules say a content property is its slot's fallback, and that holds for
-   * a region always drawn: `Avatar`'s initials, `Tooltip`'s text. This one is
-   * usually absent, and a wrapped slot generates a box whether or not it is
-   * filled, so every option without a caption would carry an empty line. The
-   * detection that would avoid it does not exist, `:host(:has())` being invalid
-   * and the server having no children to inspect. A property is known at render
-   * time, so the component can decline to draw the box at all.
+   * For a caption richer than a string, slot it into `description`. The
+   * property is that slot's fallback inside the `description` part. With no
+   * property the slot is drawn bare, which takes no box while it is empty, so
+   * an option without a caption carries no empty line.
    *
    * It does not reflect, per the rule that payload state stays off the host: a
    * string is not a fact a selector needs.
@@ -75010,6 +75080,12 @@ export type CustomElementsSolidJs = {
    * name is the fault `TreeItem` avoids by mirroring to `data-selected`.
    * Splitting them means moving what every stylesheet selects on, which is a
    * change of its own rather than a property being added. (property only)
+   * - `selectionFollowsActive`: Whether the option says it is selected while the keyboard is on it.
+   *
+   * Written by a control whose list holds suggestions, such as `FilterInput`:
+   * nothing there stays chosen, so the row the keyboard is on is the
+   * selection, as the APG combobox's list with selection that follows focus
+   * says. No attribute: it is coordination between elements. (property only)
    * - `text`: The option's text, which a listbox matches typed text against.
    *
    * Read from the rendered content rather than required as a property, because
@@ -75082,7 +75158,9 @@ export type CustomElementsSolidJs = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: The option's label.
+   * - `description`: A second line under the label, for content richer than the `description` text.
    * - `end`: Content after the label, such as a shortcut or a count.
+   * - `indicator`: An icon shown while the option is chosen, in place of the check the styled option draws.
    * - `start`: Content before the label, such as an icon or an avatar.
    *
    * ## Methods
@@ -75110,6 +75188,8 @@ export type CustomElementsSolidJs = {
    * These can be used to apply styling when a component is in a given state.
    *
    * - `active`: While the keyboard is on the option, which is the option `aria-activedescendant` names.
+   * - `disabled`: While the option cannot be chosen.
+   * - `has-indicator`: An icon is slotted into `indicator`.
    * - `selected`: While the option is chosen.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
@@ -76698,7 +76778,11 @@ export type CustomElementsSolidJs = {
    *
    * No attribute: it is coordination between elements, and a consumer has no
    * reason to set it. (property only)
-   * - `items`: The radios, in light-DOM order. Client only: the server has no tree. (property only) (readonly)
+   * - `items`: The radios, in light-DOM order. Client only: the server has no tree.
+   *
+   * Descendants, as `Checkbox.Group` reads its boxes, so a radio inside a
+   * layout wrapper of yours is one of the group's. A radio held by a group
+   * nested inside this one is that group's. (property only) (readonly)
    * - `validity`: Whether the control meets its constraints, and why not. (property only) (readonly)
    * - `validationMessage`: The message the browser would show for the control, or an empty string. (property only) (readonly)
    * - `willValidate`: Whether the control is checked when its form is submitted. (property only) (readonly)
@@ -80881,7 +80965,10 @@ export type CustomElementsSolidJs = {
    * focus moves to the next tag, or the previous one after the last.
    *
    * `selection-mode` lets a reader select tags, with Space, Enter or a press:
-   * `single` selects one at a time and `multiple` any number. `value` holds the
+   * `single` selects one at a time and `multiple` any number. In `multiple`,
+   * Shift with an arrow, Home or End selects the range from the tag last
+   * pressed to the tag focus moves to, and Control or Command with A selects
+   * every tag that is not disabled. `value` holds the
    * selected tags' values, separated by commas, and a change asks with
    * `helix-before-change` and tells with `change`. Enter on a tag with an
    * `href` follows its link. A `disabled` tag is passed over. A selected tag
@@ -80896,6 +80983,8 @@ export type CustomElementsSolidJs = {
    * set is a `group`, and focus moves to its `empty` part,
    * which holds the `empty` slot: put words there such as "No filters" for a
    * reader to hear. With nothing slotted it says `empty-label`, "No tags".
+   * Where only disabled tags are left, the first of them holds the tab stop and
+   * takes focus, so the reader stays in the set.
    *
    * ## Attributes & Properties
    *
@@ -81011,6 +81100,12 @@ export type CustomElementsSolidJs = {
    *
    * Absent is the tag's own words, its category first.
    * - `dismissible`: Whether the element shows a control that dismisses it.
+   * - `dismissTabStop`: Whether the remove button is a tab stop of its own, outside a `Tag.Group`.
+   *
+   * A field that holds tags as its tokens, such as a `multiple` Combobox,
+   * writes `false`: the field's text is its one tab stop, and the arrow keys
+   * move from the text to the tags. No attribute: it is coordination between
+   * elements, as `focusable` is. (property only)
    * - `focusable`: Whether the tag holds its group's tab stop.
    *
    * Written by `Tag.Group` on every tag it holds, and unset outside one, which
@@ -81623,6 +81718,7 @@ export type CustomElementsSolidJs = {
    *
    * - `feedback`: The message that says what is wrong with the value.
    * - `hint`: Help under the field.
+   * - `label`: The label, for content richer than the `label` text.
    * - `panel-footer`: Content in the panel under the times, such as a note or an action.
    * - `panel-header`: Content in the panel above the times, such as a heading or a shortcut.
    * - `trigger`: The icon on the field that shows a list opens.
@@ -82927,6 +83023,11 @@ export type CustomElementsSolidJs = {
    * `selection-mode="multiple"` it is a `<button>` that says whether it is
    * pressed with `aria-pressed`.
    *
+   * **On its own, outside a `Toggle.Group`, it is a toggle button**, as React
+   * Aria's `ToggleButton`: a `<button>` with `aria-pressed`. A press, Enter or
+   * Space sends `helix-select`, which you can cancel, then flips `selected` and
+   * sends `change`. Write `selected` in the markup to start it pressed.
+   *
    * Do not use it for navigation. For navigation, use links marked with
    * `aria-current` and styled by the `data-navigation-item` recipe in the base
    * layer. The recipe has the same look, and links are not announced as choices.
@@ -82968,8 +83069,8 @@ export type CustomElementsSolidJs = {
    * name is the fault `TreeItem` avoids by mirroring to `data-selected`.
    * Splitting them means moving what every stylesheet selects on, which is a
    * change of its own rather than a property being added. (property only)
-   * - `focusable`: Whether the item holds the group's tab stop. Unset, the chosen item holds
-   * it.
+   * - `focusable`: Whether the item holds the group's tab stop. Unset, no group holds the
+   * item, and it is a toggle button with a tab stop of its own.
    *
    * Written by the group on every item: `true` for the chosen item, or for the
    * first item that can be chosen while there is no selection to carry the
@@ -83006,6 +83107,7 @@ export type CustomElementsSolidJs = {
    *
    * Events that will be emitted by the component.
    *
+   * - `change`: Fired after a toggle button on its own is pressed or released.
    * - `helix-select`: Fired when the item is chosen. Cancelable: call `preventDefault()` to keep the current choice.
    *
    * ## Slots
@@ -83018,13 +83120,13 @@ export type CustomElementsSolidJs = {
    *
    * Methods that can be called to access component functionality.
    *
+   * - `select() => boolean`: Chooses the item in its group, or, on its own, flips `selected` once
+   * `helix-select` stands and sends `change`.
    * - `focusItem() => void`: Moves focus to the item's control, for the set's arrow keys.
    *
    * The set drives the keys and cannot reach the control itself, which is
    * inside this shadow root, so the intent is a method and the internals stay
    * the item's.
-   * - `select() => boolean`: Selects the item and fires `helix-select`. Returns `false` if the item is
-   * disabled or a listener cancels the event.
    *
    * ## CSS Parts
    *