@fusion.dev/helix-headless 0.157.0 → 0.159.0

package/custom-elements.json

@@ -1707,7 +1707,7 @@
                   "text": "HTMLElement | undefined"
                 }
               },
-              "description": "The tab stop after this element on the page, or the one before it at the\nend, for a lone element whose removal would drop focus to the body.\n\n**A lone Callout or Announcement had nowhere to hand focus**, so a\nkeyboard reader who dismissed one started again from the top of the\npage. React Aria's Toast hands focus on the same way. Read before the\nevent, in the order Tab reaches the stops, while this element's own are\nstill among them.",
+              "description": "The tab stop after this element on the page, or the one before it at the\nend, for an element whose removal would drop focus to the body because\nno neighbor of its kind has a control to take it.\n\n**A lone Callout or Announcement had nowhere to hand focus**, so a\nkeyboard reader who dismissed one started again from the top of the\npage. React Aria's Toast hands focus on the same way. Read before the\nevent, in the order Tab reaches the stops, while this element's own are\nstill among them.",
               "inheritedFrom": {
                 "name": "MixinDismissible",
                 "module": "src/mixins/mixin-dismissible/mixin-dismissible.ts"
@@ -2303,7 +2303,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Tracks whether the page has scrolled and sets the custom state `scrolled`, so\nthe styled tier can lift the bar without a scroll handler of its own. The\nstate is read when the element connects. A fresh load starts at the top,\nwhich matches the server markup, and a reload partway down the page is\ncorrected on hydration.\n\nThe element uses a custom state because an attribute such as `data-scrolled`,\nwritten onto its own host, is one the server did not send. A hydrating\nframework would report a mismatch whenever the page reloads far enough down.\n`ElementInternals.states` is not in the DOM, so hydration has nothing to\ncompare. Select the state with `:state(scrolled)`.\n\nThe page is the window unless `scroller` names the element that scrolls, for\nan app shell whose content scrolls inside a container.\n\n**Set `hide-on-scroll` for a bar that moves out of the way.** Scrolling down\npast the bar's own height hides it, and scrolling up shows it again, as does\nfocus moving into it. The custom state `hidden` is on the host while it is\nhidden, and the styled tier slides a `sticky` bar up out of view.\n\n**Set `fold-below` to fold the middle region on a narrow screen.** Below that\nmany pixels of the bar's own width, the middle region is hidden behind a\ntoggle at the end of the bar, named by `menu-label`. The toggle says whether\nthe region is open with `aria-expanded`, and the region opens below the row.\nEscape closes it and puts focus back on the toggle. The custom state\n`folded` is on the host while the bar is that narrow, and `open` while the\nfolded region is open. A server serves the bar unfolded, and the browser\nfolds it once it has measured it.\n\nThe host is the page's `banner` landmark. Placed inside `main`, `article`,\n`aside`, `nav` or `section`, it is a plain box instead, as a native\n`<header>` is there, so a header inside a card or a pane does not add a\nsecond banner. The ancestors are read as the accessibility tree reads them,\nthrough the slots that take the header in, so one slotted into a component\nthat draws a `<nav>`, such as `Navigation`, is not a banner either. A server\ncannot see the ancestors, so it serves the banner and the browser corrects\nit when the element connects.",
+          "description": "Tracks whether the page has scrolled and sets the custom state `scrolled`, so\nthe styled tier can lift the bar without a scroll handler of its own. The\nstate is read when the element connects. A fresh load starts at the top,\nwhich matches the server markup, and a reload partway down the page is\ncorrected on hydration.\n\nThe element uses a custom state because an attribute such as `data-scrolled`,\nwritten onto its own host, is one the server did not send. A hydrating\nframework would report a mismatch whenever the page reloads far enough down.\n`ElementInternals.states` is not in the DOM, so hydration has nothing to\ncompare. Select the state with `:state(scrolled)`.\n\nThe page is the window unless `scroller` names the element that scrolls, for\nan app shell whose content scrolls inside a container.\n\n**Set `hide-on-scroll` for a bar that moves out of the way.** Scrolling down\npast the bar's own height hides it, and scrolling up shows it again, as does\nfocus moving into it. The custom state `hidden` is on the host while it is\nhidden, and the styled tier slides a `sticky` bar up out of view.\n\n**Set `fold-below` to fold the middle region on a narrow screen.** Below that\nmany pixels of the bar's own width, the middle region is hidden behind a\ntoggle at the end of the bar, named by `menu-label`, or at its start with\n`toggle-placement=\"start\"`. The toggle says whether the region is open with\n`aria-expanded`, and the region opens below the row. The region follows the\ntoggle's region in focus order, so Tab from the toggle at the end goes into\nthe open region. The custom state `folded` is on the host while the bar is\nthat narrow, and `open` while the folded region is open. A server serves the\nbar unfolded, and the browser folds it once it has measured it.\n\n**`open` says whether the folded region is open, and setting it opens or\ncloses the region.** `requestOpen(true)` and `requestOpen(false)` do the same\nand send `helix-before-open` or `helix-before-close` first, which you can\ncancel, and `toggleOpen()` asks for the opposite. `toggle` follows every\nchange. The region closes on Escape, which puts focus back on the toggle,\nwhen focus moves to something outside the header, and on a press outside\nit. A bar that widens past `fold-below` closes its region.\n\nThe host is the page's `banner` landmark. Placed inside `main`, `article`,\n`aside`, `nav` or `section`, it is a plain box instead, as a native\n`<header>` is there, so a header inside a card or a pane does not add a\nsecond banner. The ancestors are read as the accessibility tree reads them,\nthrough the slots that take the header in, so one slotted into a component\nthat draws a `<nav>`, such as `Navigation`, is not a banner either. A server\ncannot see the ancestors, so it serves the banner and the browser corrects\nit when the element connects.",
           "name": "HelixHeadlessAppHeader",
           "cssParts": [
             {
@@ -2389,6 +2389,19 @@
               "description": "Hides the bar as the page scrolls down past it, and shows it again as the\npage scrolls up.",
               "attribute": "hide-on-scroll"
             },
+            {
+              "kind": "field",
+              "name": "menuLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Menu'",
+              "description": "The name of the toggle that opens a folded middle region.",
+              "attribute": "menu-label",
+              "helix": {
+                "words": true
+              }
+            },
             {
               "kind": "field",
               "name": "folded",
@@ -2406,8 +2419,8 @@
                 "text": "boolean"
               },
               "privacy": "private",
-              "default": "false",
-              "description": "Whether the folded middle region is open."
+              "description": "Whether the folded middle region is open and showing.",
+              "readonly": true
             },
             {
               "kind": "field",
@@ -2446,7 +2459,7 @@
                   }
                 }
               ],
-              "description": "Folds the middle region where the bar is narrower than `fold-below`."
+              "description": "Folds the middle region where the bar is narrower than `fold-below`. A bar\nthat widens closes its region, so it starts closed when it folds again;\none that narrows keeps an `open` you set."
             },
             {
               "kind": "field",
@@ -2462,6 +2475,41 @@
               "readonly": true,
               "description": "Escape in the open region closes it and puts focus back on the toggle."
             },
+            {
+              "kind": "field",
+              "name": "handleFocusOut",
+              "privacy": "private",
+              "readonly": true,
+              "description": "Closes the open region when focus moves to something outside the header.\nFocus leaving the window has no `relatedTarget`, and closes nothing."
+            },
+            {
+              "kind": "field",
+              "name": "handleOutsidePress",
+              "privacy": "private",
+              "readonly": true,
+              "description": "Closes the open region on a press outside the header."
+            },
+            {
+              "kind": "field",
+              "name": "pressing",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether the outside press is listened for, which is while the region is open."
+            },
+            {
+              "kind": "method",
+              "name": "watchPresses",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Listens for a press outside while the folded region is open, and only then."
+            },
             {
               "kind": "field",
               "name": "away",
@@ -2529,25 +2577,22 @@
             },
             {
               "kind": "field",
-              "name": "menuLabel",
+              "name": "scroller",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'Menu'",
-              "description": "The name of the toggle that opens a folded middle region.",
-              "attribute": "menu-label",
-              "helix": {
-                "words": true
-              }
+              "description": "The id of the element whose scrolling lifts the bar, for an app shell that\nscrolls a container instead of the window. Unset is the window.",
+              "attribute": "scroller"
             },
             {
               "kind": "field",
-              "name": "scroller",
+              "name": "togglePlacement",
               "type": {
-                "text": "string | undefined"
+                "text": "'start' | undefined"
               },
-              "description": "The id of the element whose scrolling lifts the bar, for an app shell that\nscrolls a container instead of the window. Unset is the window.",
-              "attribute": "scroller"
+              "description": "Where the toggle that opens a folded middle region sits: at the end of the\nbar, after the trailing content, or with `start`, before the leading\ncontent.\n\nOptional, so the resting bar writes no attribute onto the host.",
+              "attribute": "toggle-placement",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -2636,6 +2681,126 @@
               },
               "description": "The glyph on the toggle that opens a folded middle region, behind a seam:\nslot fallback, so a consumer replaces it by slotting, and a method, so a\ntier above replaces it by overriding."
             },
+            {
+              "kind": "field",
+              "name": "defaultOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the element starts open. Ignored once `open` is written.",
+              "attribute": "default-open",
+              "inheritedFrom": {
+                "name": "MixinControllerOpen",
+                "module": "src/mixins/mixin-controller-open/mixin-controller-open.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Whether the element is open.\n\nOne property, not two, so `dialog.open` answers the question anyone\nasking it meant. Writing always applies; `<helix-dialog open>` is the\nsame statement in markup.\n\n**Not reflected, and that is required rather than tidy.** Reflection\nwrites the resolved state back as an attribute, so an element that opened\nitself would put `open` on its own host: cloned, serialized for\nhydration, or diffed by a framework, it comes back holding whatever the\nlast reader did rather than what the author wrote. `:state(open)` carries\nthe resolved state for stylesheets, which is what the mirror is for.",
+              "attribute": "open",
+              "inheritedFrom": {
+                "name": "MixinControllerOpen",
+                "module": "src/mixins/mixin-controller-open/mixin-controller-open.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "openState",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "privacy": "private",
+              "default": "undefined",
+              "description": "The state, whoever set it, and `undefined` until somebody has.\n\nPrefixed, and it has to be. These mixins compose onto one prototype\nchain, `Select` takes this one and `MixinControllerValue` together, and\nTypeScript's `private` is a compile-time fiction: two mixins with a field\ncalled `state` share one property on the instance, and the second one\nsilently overwrites the first. Measured, as a select whose `value` came\nback holding its `open` boolean.\n\nOne field and not two. Writing always applies, the way a native control\ndoes when a script assigns to it.",
+              "inheritedFrom": {
+                "name": "MixinControllerOpen",
+                "module": "src/mixins/mixin-controller-open/mixin-controller-open.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "announcedOpen",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "privacy": "private",
+              "default": "undefined",
+              "description": "The state `toggle` last reported, and `undefined` before the first update.\n\n`requestOpen` announces at once. An assignment to `open` announces here,\nonce it has rendered, so a consumer binding `toggle` hears every change\nthat a `close` listener on a dialog hears. The first update sets it and\nannounces nothing, because a seed is where the element starts.",
+              "inheritedFrom": {
+                "name": "MixinControllerOpen",
+                "module": "src/mixins/mixin-controller-open/mixin-controller-open.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "requestOpen",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "next",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "description": "Requests that the element open or close, and returns whether the change\nwas applied.\n\nAnnounces before it acts, so `preventDefault()` on the `helix-before-open` or\n`helix-before-close` is a refusal and nothing moves. Nobody refusing means the\nelement opens or closes itself, whether or not a consumer declared\n`open`: a declared property is a seed and a correction, and a consumer\nwho wants the decision for themselves refuses it and assigns their own.",
+              "inheritedFrom": {
+                "name": "MixinControllerOpen",
+                "module": "src/mixins/mixin-controller-open/mixin-controller-open.ts"
+              },
+              "type": {
+                "text": "requestOpen(next: boolean) => boolean"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "announceToggle",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "open",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "description": "Says the state moved, under the platform's own name and in its shape.\n\n**A native `toggle` from inside a shadow root reaches nobody**, because\nit neither bubbles nor composes, so the ten families showing a\n`popover=\"manual\"` panel and the two rendering a real `<dialog>` announce\nnothing to a consumer. The disclosures have no native element to fire\nanything at all: `AccordionItem` and `TreeItem` are `aria-expanded` and\n`hidden` written by hand, which is `<details>`'s job done manually.\n\n**From here rather than from `PopoverController`.** The controller covers\neleven families and the mixin covers sixteen, so announcing from both\nwould announce twice on the ten they share. What `toggle` reports is the\n*state*, and the state is this mixin's; the controller is a way of\nputting a panel on the screen.\n\n**`newState` and `oldState`, because that is the platform's shape**, so a\nconsumer arriving from `<details>` reads the same two words. Not\ncancelable: the before events are the request, and a second cancelable\nevent for one transition is two answers to one question.",
+              "inheritedFrom": {
+                "name": "MixinControllerOpen",
+                "module": "src/mixins/mixin-controller-open/mixin-controller-open.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "toggleOpen",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "description": "Requests the opposite of the current state.",
+              "inheritedFrom": {
+                "name": "MixinControllerOpen",
+                "module": "src/mixins/mixin-controller-open/mixin-controller-open.ts"
+              },
+              "type": {
+                "text": "toggleOpen() => boolean"
+              }
+            },
             {
               "kind": "field",
               "name": "tier",
@@ -2977,6 +3142,22 @@
             }
           ],
           "events": [
+            {
+              "type": {
+                "text": "HelixBeforeCloseEvent"
+              },
+              "description": "The folded region is about to close. Cancelable: cancel it to keep it open.",
+              "name": "helix-before-close",
+              "reactProp": "onhelix-before-close"
+            },
+            {
+              "type": {
+                "text": "HelixBeforeOpenEvent"
+              },
+              "description": "The folded region is about to open. Cancelable: cancel it to keep it closed.",
+              "name": "helix-before-open",
+              "reactProp": "onhelix-before-open"
+            },
             {
               "type": {
                 "text": "HelixScrolledEvent"
@@ -2984,6 +3165,18 @@
               "description": "Fired when the page crosses the scroll threshold, with the new state. A custom state cannot be observed the way an attribute can, so listen for this event to follow it. The event uses the header's own threshold and hysteresis, so you do not need a second scroll listener.",
               "name": "helix-scrolled",
               "reactProp": "onhelix-scrolled"
+            },
+            {
+              "name": "toggle",
+              "type": {
+                "text": "ToggleEvent"
+              },
+              "description": "The folded region opened or closed. The event carries `newState` and `oldState`.",
+              "inheritedFrom": {
+                "name": "MixinControllerOpen",
+                "module": "src/mixins/mixin-controller-open/mixin-controller-open.ts"
+              },
+              "reactProp": "ontoggle"
             }
           ],
           "attributes": [
@@ -3028,6 +3221,39 @@
               },
               "description": "The id of the element whose scrolling lifts the bar, for an app shell that\nscrolls a container instead of the window. Unset is the window.",
               "fieldName": "scroller"
+            },
+            {
+              "name": "toggle-placement",
+              "type": {
+                "text": "'start' | undefined"
+              },
+              "description": "Where the toggle that opens a folded middle region sits: at the end of the\nbar, after the trailing content, or with `start`, before the leading\ncontent.\n\nOptional, so the resting bar writes no attribute onto the host.",
+              "fieldName": "togglePlacement"
+            },
+            {
+              "name": "default-open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the element starts open. Ignored once `open` is written.",
+              "fieldName": "defaultOpen",
+              "inheritedFrom": {
+                "name": "MixinControllerOpen",
+                "module": "src/mixins/mixin-controller-open/mixin-controller-open.ts"
+              }
+            },
+            {
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Whether the element is open.\n\nOne property, not two, so `dialog.open` answers the question anyone\nasking it meant. Writing always applies; `<helix-dialog open>` is the\nsame statement in markup.\n\n**Not reflected, and that is required rather than tidy.** Reflection\nwrites the resolved state back as an attribute, so an element that opened\nitself would put `open` on its own host: cloned, serialized for\nhydration, or diffed by a framework, it comes back holding whatever the\nlast reader did rather than what the author wrote. `:state(open)` carries\nthe resolved state for stylesheets, which is what the mirror is for.",
+              "fieldName": "open",
+              "inheritedFrom": {
+                "name": "MixinControllerOpen",
+                "module": "src/mixins/mixin-controller-open/mixin-controller-open.ts"
+              }
             }
           ],
           "cssStates": [
@@ -3056,6 +3282,12 @@
               }
             }
           ],
+          "mixins": [
+            {
+              "name": "MixinControllerOpen",
+              "package": "@fusion.dev/helix-core"
+            }
+          ],
           "superclass": {
             "name": "HelixElement",
             "package": "@fusion.dev/helix-core"
@@ -10275,7 +10507,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Sets `role=\"group\"` on the host through internals, and `label` names the\ngroup. Without a name, a screen reader announces the buttons as separate\ncontrols, and a development build warns once with the kind `missing-name`.\n\nThe group does not manage focus, so each button keeps its own tab stop. For\none tab stop with arrow keys between a mix of controls, the APG toolbar\npattern, use Toolbar.\n\nButtons are slotted, so they stay your own elements and keep their own\nappearance and size.\n\n**Buttons that stay pressed.** With `selection-mode`, each button with a\n`value` is a toggle button: a press presses or releases it, and it says so\nwith `aria-pressed`. `single` keeps one pressed at a time, and a press on the\npressed one releases it. `multiple` lets any number be pressed. `value` is\nthe pressed values, comma separated. A press sends a cancelable\n`helix-before-change` with the value it would leave, then `change`.\n\nThe pressed state is written on the control inside each button's shadow\nroot, so the markup you rendered is never changed and a framework hydrating\nit sees what its server sent. That is also why only Helix buttons are\ntoggles: a native `<button>` or a button without a `value` stays a plain\naction button in the group, and a native one without its own\n`aria-pressed` warns once, with the runtime kind `untold-toggle`. The inner\ncontrol also carries\n`--button-group-pressed`, `1` or `0`, for a `::part(button)` rule of yours.\n\nUse Toggle Group instead for a choice that belongs in a form, or one where\nthe arrow keys choose as they move: it is a `radiogroup` of options with a\nform value, `required` and validation. A Button Group in a selection mode is\na set of actions that stay on, such as bold and italic, or a view that a\npress switches, and it submits nothing.\n\n**Keyboard.** In a selection mode the group is one tab stop: the button\nfocus was last on, then the first pressed one, then the first one.\n\n| Key | What it does |\n|---|---|\n| Right, Down | Moves to the next button, from the last back to the first. |\n| Left, Up | Moves to the button before, from the first round to the last. |\n| Home, End | Moves to the first or the last button. |\n| Space, Enter | Presses or releases the focused button. |\n\nLeft and Right swap on a right-to-left page, and a disabled button is\npassed over. In a selection mode the group is a `toolbar`, with\n`aria-orientation` under `orientation=\"vertical\"`. Inside a toolbar it stays\na named `group`, and the toolbar's own arrow keys walk its buttons, so a\nreader meets one toolbar.",
+          "description": "Sets `role=\"group\"` on the host through internals, and `label` names the\ngroup. Without a name, a screen reader announces the buttons as separate\ncontrols, and a development build warns once with the kind `missing-name`.\n\nThe group does not manage focus, so each button keeps its own tab stop. For\none tab stop with arrow keys between a mix of controls, the APG toolbar\npattern, use Toolbar.\n\nButtons are slotted, so they stay your own elements and keep their own\nappearance and size.\n\n**Buttons that stay pressed.** With `selection-mode`, each button with a\n`value` is a toggle button: a press presses or releases it. `multiple` lets\nany number be pressed, and each button says so with `aria-pressed`. `single`\nkeeps one pressed at a time: the group is a `radiogroup` and each button a\n`radio` that says so with `aria-checked`, as React Aria's toggle button\ngroup is. A press on the pressed one releases it, unless\n`disallow-empty-selection` keeps one pressed. `value` is the pressed values,\ncomma separated. A press sends a cancelable `helix-before-change` with the\nvalue it would leave, then `change`. A pressed Helix button has\n`:state(pressed)` on its own element.\n\nThe pressed state is written on the control inside each button's shadow\nroot, so the markup you rendered is never changed and a framework hydrating\nit sees what its server sent. That is also why only Helix buttons are\ntoggles: a native `<button>` or a button without a `value` stays a plain\naction button in the group, and a native one without its own\n`aria-pressed` warns once, with the runtime kind `untold-toggle`. The inner\ncontrol also carries\n`--button-group-pressed`, `1` or `0`, for a `::part(button)` rule of yours.\n\nUse Toggle Group instead for a choice that belongs in a form, or one where\nthe arrow keys choose as they move: it is a `radiogroup` of options with a\nform value, `required` and validation. A Button Group in a selection mode is\na set of actions that stay on, such as bold and italic, or a view that a\npress switches, and it submits nothing.\n\n**Keyboard.** In a selection mode the group is one tab stop: the button\nfocus was last on, then the first pressed one, then the first one.\n\n| Key | What it does |\n|---|---|\n| Right, Down | Moves to the next button, from the last back to the first. |\n| Left, Up | Moves to the button before, from the first round to the last. |\n| Home, End | Moves to the first or the last button. |\n| Space, Enter | Presses or releases the focused button. |\n\nLeft and Right swap on a right-to-left page, and a disabled button is\npassed over. Under `multiple` the group is a `toolbar`, with\n`aria-orientation` under `orientation=\"vertical\"`. Inside a toolbar it stays\na named `group`, and the toolbar's own arrow keys walk its buttons, so a\nreader meets one toolbar. Under `single` it is a `radiogroup` either way.",
           "name": "HelixHeadlessButtonGroup",
           "cssProperties": [
             {
@@ -10290,6 +10522,16 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "disallowEmptySelection",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Keeps at least one button pressed once one is, as React Aria's\n`disallowEmptySelection`: a press that would leave none pressed is\nrefused.",
+              "attribute": "disallow-empty-selection"
+            },
             {
               "kind": "field",
               "name": "label",
@@ -10479,7 +10721,7 @@
                   "description": "Whether the button is pressed, or undefined where it is not a toggle."
                 }
               ],
-              "description": "Says on a button's control whether it is pressed, or that it is no toggle\nat all where `pressed` is undefined. A styled tier draws the look here."
+              "description": "Says on a button's control whether it is pressed, or that it is no toggle\nat all where `pressed` is undefined. A styled tier draws the look here.\n\nUnder `single` the control is a `radio` that says so with `aria-checked`,\nand under `multiple` a toggle button that says so with `aria-pressed`."
             },
             {
               "kind": "field",
@@ -10861,6 +11103,15 @@
             }
           ],
           "attributes": [
+            {
+              "name": "disallow-empty-selection",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Keeps at least one button pressed once one is, as React Aria's\n`disallowEmptySelection`: a press that would leave none pressed is\nrefused.",
+              "fieldName": "disallowEmptySelection"
+            },
             {
               "name": "label",
               "type": {
@@ -12343,6 +12594,10 @@
               "description": "The button is pending: `pending` is set.",
               "name": "pending"
             },
+            {
+              "description": "A Button Group in a selection mode has this button pressed.",
+              "name": "pressed"
+            },
             {
               "description": "Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.",
               "name": "settled",
@@ -12691,7 +12946,7 @@
                   "text": "HTMLElement | undefined"
                 }
               },
-              "description": "The tab stop after this element on the page, or the one before it at the\nend, for a lone element whose removal would drop focus to the body.\n\n**A lone Callout or Announcement had nowhere to hand focus**, so a\nkeyboard reader who dismissed one started again from the top of the\npage. React Aria's Toast hands focus on the same way. Read before the\nevent, in the order Tab reaches the stops, while this element's own are\nstill among them.",
+              "description": "The tab stop after this element on the page, or the one before it at the\nend, for an element whose removal would drop focus to the body because\nno neighbor of its kind has a control to take it.\n\n**A lone Callout or Announcement had nowhere to hand focus**, so a\nkeyboard reader who dismissed one started again from the top of the\npage. React Aria's Toast hands focus on the same way. Read before the\nevent, in the order Tab reaches the stops, while this element's own are\nstill among them.",
               "inheritedFrom": {
                 "name": "MixinDismissible",
                 "module": "src/mixins/mixin-dismissible/mixin-dismissible.ts"
@@ -40391,7 +40646,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The list is a `Listbox`, which handles filtering, the empty state, the match\nhighlight, `aria-activedescendant`, scrolling an option into view, and moving\nbetween options with the keyboard. The palette adds a dialog and a hotkey\nthat opens it.\n\nThe palette keeps no value. It is not a form control and submits nothing.\nChoosing an option dispatches `helix-select` once. To remember the last\ncommand, store it yourself. An option with `href` is a link to a page, which\nthe browser follows once the palette has closed.\n\nThe hotkey listener is on the document, so the hotkey works from anywhere on\nthe page, including inside another control's text field, whether or not the\npalette is open. `mod` means Command on a Mac and Control elsewhere, so you\nwrite one binding.\n\nWith `inline`, the palette is drawn in the page with no dialog, as a search\nover a list that is always shown.\n\n**Pages.** A command can open a page of commands of its own, as a palette\noffers \"Change theme\" and then the themes. Give the option `opens` with a\nname, and slot the page's commands as `page:` and that name:\n\n```html\n<helix-command>\n  <helix-option value=\"theme\" opens=\"theme\">Change theme</helix-option>\n  <helix-option value=\"dark\" slot=\"page:theme\">Dark</helix-option>\n  <helix-option value=\"light\" slot=\"page:theme\">Light</helix-option>\n</helix-command>\n```\n\nChoosing the opener says `helix-select` with its value, and canceling it\nkeeps the page that is shown. The list then shows the page, named by the\nopener's words, and Backspace in an empty filter goes back. `page` says\nwhich page is shown.\n\nThe filter is cleared when the palette closes, so each opening starts from\nthe full list. Combobox and Select do the same. As typing narrows the list, a\nscreen reader hears how many commands are left, such as \"3 commands\".\n\n**Keyboard.** Focus goes to the filter field as the palette opens, and the\nhighlight moves through the commands while you type.\n\n| Key | What it does |\n|---|---|\n| `hotkey`, Command or Control with K by default | Opens the palette from anywhere on the page, or closes it. With `inline`, puts focus in its filter field. |\n| Down, Up | Moves the highlight to the next or the previous command, round from the last to the first. |\n| Page Down, Page Up | Moves the highlight by as many commands as the list shows at once. |\n| Home, End, Left, Right | Move the caret in the filter field. |\n| Enter | Runs the highlighted command, or follows it where it is a link, and closes the palette. On a command with `opens`, shows its page. |\n| Command or Control with Enter | Takes the highlighted command's `alternate` destination, where it has one. |\n| Backspace | In an empty filter on a page, goes back to the page before. |\n| Escape | Clears the filter. With the filter empty, closes the palette and puts focus back where it was. |\n| Tab | Stays in the palette, which is modal. With `inline`, moves on through the page. |\n\n**ARIA.** The palette is a modal `dialog` named by `label`, or with\n`inline` no dialog at all. Inside it the filter field is a `combobox` with\n`aria-activedescendant` on the highlighted command, and the commands are a\n`listbox` of `option`s. How many commands typing left, the empty text and\nthe loading text are said in a polite live region.",
+          "description": "The list is a `Listbox`, which handles filtering, the empty state, the match\nhighlight, `aria-activedescendant`, scrolling an option into view, and moving\nbetween options with the keyboard. The palette adds a dialog and a hotkey\nthat opens it.\n\nThe palette keeps no value. It is not a form control and submits nothing.\nChoosing an option dispatches `helix-select` once. To remember the last\ncommand, store it yourself. An option with `href` is a link to a page, which\nthe browser follows once the palette has closed.\n\nThe hotkey listener is on the document, so the hotkey works from anywhere on\nthe page, including inside another control's text field, whether or not the\npalette is open. `mod` means Command on a Mac and Control elsewhere, so you\nwrite one binding.\n\nWith `inline`, the palette is drawn in the page with no dialog, as a search\nover a list that is always shown.\n\n**Pages.** A command can open a page of commands of its own, as a palette\noffers \"Change theme\" and then the themes. Give the option `opens` with a\nname, and slot the page's commands as `page:` and that name:\n\n```html\n<helix-command>\n  <helix-option value=\"theme\" opens=\"theme\">Change theme</helix-option>\n  <helix-option value=\"dark\" slot=\"page:theme\">Dark</helix-option>\n  <helix-option value=\"light\" slot=\"page:theme\">Light</helix-option>\n</helix-command>\n```\n\nChoosing the opener says `helix-select` with its value, and canceling it\nkeeps the page that is shown. The list then shows the page, named by the\nopener's words, and a screen reader hears those words. Backspace in an empty\nfilter goes back, and a screen reader hears the name of the page it goes\nback to. `page` says which page is shown.\n\nThe filter is cleared when the palette closes, so each opening starts from\nthe full list. Combobox and Select do the same. As typing narrows the list, a\nscreen reader hears how many commands are left, such as \"3 commands\".\n\n**Keyboard.** Focus goes to the filter field as the palette opens, and the\nhighlight moves through the commands while you type.\n\n| Key | What it does |\n|---|---|\n| `hotkey`, Command or Control with K by default | Opens the palette from anywhere on the page, or closes it. With `inline`, puts focus in its filter field. |\n| Down, Up | Moves the highlight to the next or the previous command, round from the last to the first. |\n| Page Down, Page Up | Moves the highlight by as many commands as the list shows at once. |\n| Home, End, Left, Right | Move the caret in the filter field. |\n| Enter | Runs the highlighted command, or follows it where it is a link, and closes the palette. On a command with `opens`, shows its page. |\n| Command or Control with Enter | Takes the highlighted command's `alternate` destination, where it has one. |\n| Backspace | In an empty filter on a page, goes back to the page before. |\n| Escape | Clears the filter. With the filter empty, closes the palette and puts focus back where it was. |\n| Tab | Stays in the palette, which is modal. With `inline`, moves on through the page. |\n\n**ARIA.** The palette is a modal `dialog` named by `label`, or with\n`inline` no dialog at all. Inside it the filter field is a text field with\n`aria-autocomplete=\"list\"`, `aria-controls` on the list, and\n`aria-activedescendant` on the highlighted command, as the field of React\nAria's `Autocomplete` is. The commands are a `listbox` of `option`s. How many commands typing left, the empty text and\nthe loading text are said in a polite live region.",
           "name": "HelixHeadlessCommand",
           "cssParts": [
             {
@@ -40473,6 +40728,10 @@
             {
               "description": "The filter field.",
               "name": "listbox-search-field"
+            },
+            {
+              "description": "The region a screen reader announces the page shown from, by the words of the command that opens it, drawn once there is one to say. Visually hidden in the styled tier.",
+              "name": "live"
             }
           ],
           "slots": [
@@ -40543,6 +40802,14 @@
               "description": "How long typing rests before the commands are filtered, in milliseconds,\nso a palette filtered on a server sends one `helix-filter` for a word.\n`0` filters on every keystroke. See Listbox's `filter-delay`.",
               "attribute": "filter-delay"
             },
+            {
+              "kind": "field",
+              "name": "filterMatch",
+              "type": {
+                "text": "((text: string, filter: string) => boolean) | undefined | undefined"
+              },
+              "description": "Whether a command is kept by the filter: a function given the command's\nwords and the filter, trimmed, that returns `true` to keep it showing, as\nReact Aria's `Autocomplete` takes `filter`. See Listbox's `filterMatch`.\n\nAbsent, a command is kept where its words hold the filter, in any case. A\nproperty only, there being no way to write a function in markup."
+            },
             {
               "kind": "field",
               "name": "hotkey",
@@ -40752,6 +41019,14 @@
               ],
               "description": "Shows a page of commands, with the trail that leads back from it. The\nfilter starts empty, as it does on opening, and the field keeps focus."
             },
+            {
+              "kind": "field",
+              "name": "status",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new StatusController(this)",
+              "description": "The region the page shown is said from as it changes."
+            },
             {
               "kind": "field",
               "name": "handleBack",
@@ -43288,6 +43563,14 @@
                 "module": "src/button/root/button-root.ts"
               }
             },
+            {
+              "description": "A Button Group in a selection mode has this button pressed.",
+              "name": "pressed",
+              "inheritedFrom": {
+                "name": "HelixHeadlessButton",
+                "module": "src/button/root/button-root.ts"
+              }
+            },
             {
               "description": "Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.",
               "name": "settled",
@@ -45597,6 +45880,13 @@
                   "type": {
                     "text": "boolean"
                   }
+                },
+                {
+                  "name": "id",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  }
                 }
               ],
               "description": "One cell, carrying its column's edge as a fact rather than as a decision.\n\n**A fact published rather than a property chosen**, which is what `Table`\ndoes with the same attribute: what lining up *means*, a `justify-content`\nfor a value that fits or a `text-align` for one that wraps, belongs to\nwhoever draws the cell. Written here as an inline `text-align` it was this\ntier choosing, in the tier that ships no CSS, and a consumer could not\noverrule it either, an inline declaration beating any `::part(cell)` rule\nthey wrote.\n\nOnly the three edges reach it, `text-align` being a string anybody can write and\nthis being a style attribute: `edgeOf` is that guard, and `Table` holds the\nsame value to the same three."
@@ -64523,7 +64813,7 @@
                   "text": "HTMLElement | undefined"
                 }
               },
-              "description": "The tab stop after this element on the page, or the one before it at the\nend, for a lone element whose removal would drop focus to the body.\n\n**A lone Callout or Announcement had nowhere to hand focus**, so a\nkeyboard reader who dismissed one started again from the top of the\npage. React Aria's Toast hands focus on the same way. Read before the\nevent, in the order Tab reaches the stops, while this element's own are\nstill among them.",
+              "description": "The tab stop after this element on the page, or the one before it at the\nend, for an element whose removal would drop focus to the body because\nno neighbor of its kind has a control to take it.\n\n**A lone Callout or Announcement had nowhere to hand focus**, so a\nkeyboard reader who dismissed one started again from the top of the\npage. React Aria's Toast hands focus on the same way. Read before the\nevent, in the order Tab reaches the stops, while this element's own are\nstill among them.",
               "inheritedFrom": {
                 "name": "MixinDismissible",
                 "module": "src/mixins/mixin-dismissible/mixin-dismissible.ts"
@@ -77545,6 +77835,14 @@
                 "module": "src/button/root/button-root.ts"
               }
             },
+            {
+              "description": "A Button Group in a selection mode has this button pressed.",
+              "name": "pressed",
+              "inheritedFrom": {
+                "name": "HelixHeadlessButton",
+                "module": "src/button/root/button-root.ts"
+              }
+            },
             {
               "description": "Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.",
               "name": "settled",
@@ -84170,7 +84468,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Wraps one piece of content in the lightbox, such as a picture, a video frame,\nor a chart. The lightbox shows one item at a time, and the root decides\nwhich.\n\nEach item is a `group` with the role description `slide`, named by its\n`label` or, without one, by its place in the set, such as \"2 of 5\", as the\nAPG carousel pattern names a slide. The lightbox supplies both words, so they\nare translated on the lightbox.\n\nAn item that is not current is hidden and stays in the DOM, as a `TabPanel`\ndoes. Crawlers can read it, it is in the server-rendered markup, and an\n`<img>` that has decoded does not decode again when you go back to it.",
+          "description": "Wraps one piece of content in the lightbox, such as a picture, a video frame,\nor a chart. The lightbox shows one item at a time, and the root decides\nwhich.\n\nEach item is a `group` with the role description `slide`, named by its\n`label` or, without one, by its place in the set, such as \"2 of 5\", as the\nAPG carousel pattern names a slide. The lightbox supplies both words, so they\nare translated on the lightbox. A `description`, while there is one,\ndescribes the group, so a screen reader says it with the name.\n\nAn item that is not current is hidden and stays in the DOM, as a `TabPanel`\ndoes. Crawlers can read it, it is in the server-rendered markup, and an\n`<img>` that has decoded does not decode again when you go back to it.",
           "name": "HelixHeadlessLightboxItem",
           "cssParts": [
             {
@@ -84219,6 +84517,23 @@
               "description": "The item's identifier. The root compares its `active` value against it.",
               "attribute": "value"
             },
+            {
+              "kind": "field",
+              "name": "described",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether anything is slotted into `description`, which then describes the group."
+            },
+            {
+              "kind": "field",
+              "name": "readDescription",
+              "privacy": "private",
+              "readonly": true,
+              "description": "Reads whether the `description` slot holds anything."
+            },
             {
               "kind": "field",
               "name": "tier",
@@ -84651,7 +84966,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The frame around content you open, such as a picture, a video frame, or a\nchart. The lightbox draws no content of its own. It provides the frame, the\nkeyboard behavior, and text that states the current position in the set.\n\nThe modal behavior comes from a native `<dialog>` opened with `showModal()`,\nwhich provides the top layer, a backdrop, Escape to close, and `inert` on the\nrest of the document. Every way of closing goes through `requestOpen`, as in\n`Dialog` and `Drawer`.\n\nA lightbox shows one item at a time and has no scrolling track, so `active`\nholds the current item, as in `Tabs`. The arrow keys change the item while\nfocus stays in the dialog.\n\nSet `controls` for the viewer's own previous, next and close controls, named\nby `previous-label`, `next-label` and `dismiss-label`, whose glyphs you can\nreplace in the `previous-icon`, `next-icon` and `dismiss-icon` slots. Without\nit, compose the chrome yourself in the `header` and `footer` slots, with\nbuttons that send `--previous`, `--next` and `--close`.\n\n**Set `max-zoom` to let a reader zoom into the shown item**, such as `3`.\nTwo fingers pinch it, a double click or a double tap zooms all the way in\nabout the point pressed and back out, and once zoomed one pointer drags it\nabout. `+` and `-` zoom in and out from the keyboard, and `0` puts it back.\nThe scale and the offset are on the `viewport` part as `--lightbox-zoom`,\n`--lightbox-pan-x` and `--lightbox-pan-y`, written only while zoomed, and a\nswipe moves to the next item only while the item is at its own size. With\n`controls`, the viewer also draws zoom-out and zoom-in controls, for a\npointer with no wheel and no second finger. Once a reader stops zooming, the\nlive region says the new scale in the words of `zoom-status-label`, such as\n\"Zoomed to 150%\".\n\nEach item is a slide: a `group` with the role description in\n`slide-role-label`, named by its `label` or by `slide-label`. A touch or a pen\nswiped across the picture shows the next or the previous item, the way the\nline of text runs.\n\nA press on the empty area around the item closes the viewer, as a press on\nthe backdrop does. Under `max-zoom`, a press beside the item zooms on a\ndouble press and closes nothing, and only the space outside the viewport\ncloses the viewer. A press that dragged closes nothing.\n\n**Keyboard.** Opening moves focus to the viewer itself, which a screen\nreader names.\n\n| Key | What it does |\n|---|---|\n| Right, Down | Shows the next item. On a right-to-left page, Left does. While the item is zoomed, the arrows move about it instead. |\n| Left, Up | Shows the previous item. |\n| Home, End | Shows the first or the last item. |\n| `+`, `-`, `0` | Zooms in, zooms out, and puts the item back at its own size, where `max-zoom` allows zooming. |\n| Tab, Shift+Tab | Moves through the controls in the viewer, from the last round to the first and from the first round to the last. |\n| Escape | Closes the viewer. A `helix-before-close` listener can refuse. |\n\nA development build warns when a viewer opens with no `label`.\n\nThe chrome hides when there is no input, through `IdleController`, and comes\nback on a pointer move, a key press, or a focus. It stays while focus is on a\ncontrol in the header or the footer, so a keyboard reader is never left on\na control that has gone. `fullscreen` uses `FullscreenController`, as `Video`\ndoes. While the viewer is open, the page behind it does not scroll.",
+          "description": "The frame around content you open, such as a picture, a video frame, or a\nchart. The lightbox draws no content of its own. It provides the frame, the\nkeyboard behavior, and text that states the current position in the set.\n\nThe modal behavior comes from a native `<dialog>` opened with `showModal()`,\nwhich provides the top layer, a backdrop, Escape to close, and `inert` on the\nrest of the document. Every way of closing goes through `requestOpen`, as in\n`Dialog` and `Drawer`.\n\nA lightbox shows one item at a time and has no scrolling track, so `active`\nholds the current item, as in `Tabs`. The arrow keys change the item while\nfocus stays in the dialog.\n\nSet `controls` for the viewer's own previous, next and close controls, named\nby `previous-label`, `next-label` and `dismiss-label`, whose glyphs you can\nreplace in the `previous-icon`, `next-icon` and `dismiss-icon` slots. Without\nit, compose the chrome yourself in the `header` and `footer` slots, with\nbuttons that send `--previous`, `--next` and `--close`.\n\n**Set `max-zoom` to let a reader zoom into the shown item**, such as `3`.\nTwo fingers pinch it, and so does a trackpad pinch or the wheel with Ctrl\nheld, about the point under the pointer. A double click or a double tap\nzooms all the way in about the point pressed and back out, and once zoomed\none pointer drags it about and the wheel moves it. `+` and `-` zoom in and out from the keyboard, and `0` puts it back.\nThe scale and the offset are on the `viewport` part as `--lightbox-zoom`,\n`--lightbox-pan-x` and `--lightbox-pan-y`, written only while zoomed, and a\nswipe moves to the next item only while the item is at its own size. With\n`controls`, the viewer also draws zoom-out and zoom-in controls, for a\npointer with no wheel and no second finger. Once a reader stops zooming, the\nlive region says the new scale in the words of `zoom-status-label`, such as\n\"Zoomed to 150%\".\n\nEach item is a slide: a `group` with the role description in\n`slide-role-label`, named by its `label` or by `slide-label`. A touch or a pen\nswiped across the picture shows the next or the previous item, the way the\nline of text runs.\n\nA press on the empty area around the item closes the viewer, as a press on\nthe backdrop does. Under `max-zoom`, a press beside the item zooms on a\ndouble press and closes nothing, and only the space outside the viewport\ncloses the viewer. A press that dragged closes nothing.\n\n**Keyboard.** Opening moves focus to the viewer itself, which a screen\nreader names.\n\n| Key | What it does |\n|---|---|\n| Right, Down | Shows the next item. On a right-to-left page, Left does. While the item is zoomed, the arrows move about it instead. |\n| Left, Up | Shows the previous item. |\n| Home, End | Shows the first or the last item. |\n| `+`, `-`, `0` | Zooms in, zooms out, and puts the item back at its own size, where `max-zoom` allows zooming. |\n| Tab, Shift+Tab | Moves through the controls in the viewer, from the last round to the first and from the first round to the last. |\n| Escape | Closes the viewer. A `helix-before-close` listener can refuse. |\n\nA development build warns when a viewer opens with no `label`.\n\nThe chrome hides when there is no input, through `IdleController`, and comes\nback on a pointer move, a key press, or a focus. It stays while focus is on a\ncontrol in the header or the footer, so a keyboard reader is never left on\na control that has gone. `fullscreen` uses `FullscreenController`, as `Video`\ndoes. While the viewer is open, the page behind it does not scroll.",
           "name": "HelixHeadlessLightbox",
           "cssProperties": [
             {
@@ -85042,6 +85357,13 @@
               "readonly": true,
               "default": "new FocusScopeController(this, { contain: () => this.open, contents: () => [ ...['header', '', 'footer'].flatMap( (name) => this.renderRoot ?.querySelector<HTMLSlotElement>(name ? `slot[name=\"${name}\"]` : 'slot:not([name])') ?.assignedElements({ flatten: true }) ?? [], ), /* And the controls the viewer draws itself. */ ...[...(this.dialog?.children ?? [])].filter((one) => one.localName === 'button'), ], surface: () => this.dialog, })"
             },
+            {
+              "kind": "field",
+              "name": "phases",
+              "privacy": "protected",
+              "readonly": true,
+              "default": "new OpenPhaseController(this, { mark: { entering: (on) => this.toggleState('entering', on), exiting: (on) => this.toggleState('exiting', on), }, open: () => this.open, surface: () => this.dialog, })"
+            },
             {
               "kind": "field",
               "name": "zoomer",
@@ -86320,6 +86642,14 @@
             }
           ],
           "cssStates": [
+            {
+              "description": "From the moment the viewer opens until its entrance has finished.",
+              "name": "entering"
+            },
+            {
+              "description": "From the moment the viewer closes until its exit has finished.",
+              "name": "exiting"
+            },
             {
               "description": "While the viewer fills the screen.",
               "name": "fullscreen"
@@ -86417,7 +86747,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Pinch, double press and drag to zoom into the item a viewer shows, and to\nmove about it once zoomed.\n\nTwo fingers scale the item about the point between them. A double press, a\ndouble click or a double tap, zooms all the way in about the point pressed,\nand back out again. One pointer dragged across a zoomed item moves it, never\nso far that an edge comes inside the box. What it reports is a scale and an\noffset from the middle of the box; drawing them is the caller's.",
+          "description": "Pinch, double press and drag to zoom into the item a viewer shows, and to\nmove about it once zoomed.\n\nTwo fingers scale the item about the point between them. A trackpad pinch,\nwhich the browser sends as a wheel with Ctrl held, and the wheel with Ctrl\nheld scale it about the pointer. A double press, a double click or a double\ntap, zooms all the way in about the point pressed, and back out again. One\npointer dragged across a zoomed item moves it, never so far that an edge\ncomes inside the box, and so does the wheel without Ctrl. What it reports is a scale and an\noffset from the middle of the box; drawing them is the caller's.",
           "name": "ZoomController",
           "members": [
             {
@@ -86655,6 +86985,13 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "handleWheel",
+              "privacy": "private",
+              "readonly": true,
+              "description": "A wheel with Ctrl held, which is also how the browser sends a trackpad\npinch, scales the item about the pointer. Without Ctrl, a wheel over a\nzoomed item moves it. Over an item at its own size, a plain wheel is left\nto the page."
+            },
             {
               "kind": "field",
               "name": "handleDouble",
@@ -88633,7 +88970,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Takes the row out of reach in a list with `selection-mode`: the arrow keys\npass over it and it cannot be selected or acted on.",
+              "description": "Takes the row out of reach in a list with `selection-mode`: the arrow keys\npass over it and it cannot be selected or acted on. In a list with\n`disabled-behavior=\"selection\"`, it cannot be selected and is reached and\nacted on as any row is.",
               "attribute": "disabled",
               "reflects": true
             },
@@ -88689,6 +89026,15 @@
               },
               "description": "Whether the row is selected, in a list that selects.\n\nWritten by the list from its own `value`, and unset where nothing can be\nselected, which keeps `aria-selected` off a list that does not select."
             },
+            {
+              "kind": "field",
+              "name": "selectionOnly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether `disabled` takes the row out of selection alone, written by a list\nwith `disabled-behavior=\"selection\"`. No attribute: it is coordination\nbetween elements, as `focusable` is."
+            },
             {
               "kind": "field",
               "name": "target",
@@ -88738,6 +89084,13 @@
               "description": "Whether a list with `selection-mode` holds this row, which makes it a row of a grid.",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "handleCellFocus",
+              "privacy": "private",
+              "readonly": true,
+              "description": "Says whether the cell shows keyboard focus, as `:focus-visible` does, so a\nsheet outside can draw the ring on the row by the host."
+            },
             {
               "kind": "method",
               "name": "focusItem",
@@ -89138,7 +89491,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Takes the row out of reach in a list with `selection-mode`: the arrow keys\npass over it and it cannot be selected or acted on.",
+              "description": "Takes the row out of reach in a list with `selection-mode`: the arrow keys\npass over it and it cannot be selected or acted on. In a list with\n`disabled-behavior=\"selection\"`, it cannot be selected and is reached and\nacted on as any row is.",
               "fieldName": "disabled"
             },
             {
@@ -89191,6 +89544,10 @@
               "description": "The row being moved goes before this one when it is dropped.",
               "name": "drop-before"
             },
+            {
+              "description": "The row's cell has keyboard focus that the browser shows, in a list with `selection-mode`.",
+              "name": "focus-visible"
+            },
             {
               "description": "The row is selected, in a list that selects.",
               "name": "selected"
@@ -89298,7 +89655,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Sets `role=\"list\"` on the host, so a screen reader counts the rows and\nannounces each one's position, such as \"1 of 7\".\n\n**`selection-mode` makes the list interactive**, in the way of a grid list:\na grid of rows that is one tab stop. `single` selects one row at a time and\n`multiple` any number, and `value` holds the selected rows' values,\nseparated by commas. A change asks with `helix-before-change` and tells\nwith `change`. `none` selects nothing, so a press acts on the row. A\n`disabled` row is passed over. Each row is named by its label and described\nby its description, so the words of the controls in `end` are not read as\npart of its name.\n\n`selection-behavior` says what a press does to the rows already selected.\n`toggle`, the default, adds or takes out the row. `replace` selects the row\nalone, as a file list does, and the arrow keys carry the selection with\nthem. Control or Command with a press then adds or takes out one row.\n\n| Key | What it does |\n|---|---|\n| Down, Up | Moves to the next or the previous row. Under `replace`, selects it. |\n| Home, End | Moves to the first or the last row. Under `replace`, selects it. |\n| Page Down, Page Up | Moves a box's height of rows, so the row at one edge lands at the other. Under `replace`, selects the row it lands on. |\n| A letter or a word | Moves to the next row whose words start with what you typed. |\n| Left, Right | Moves between the row and the controls in its `end` slot. |\n| Space | Selects the row, or lets it go. |\n| Shift with Down, Up, Home, End, Page Down, Page Up or Space | Selects every row from the last one pressed, in `multiple`. |\n| Control or Command with Down, Up, Home, End, Page Down or Page Up | Moves without selecting, under `replace`. |\n| Control or Command with A | Selects every row, in `multiple`. |\n| Escape | Lets go of every selected row, asking first, and keeps the key from the dialog or menu around the list. With nothing selected, the key goes on to them. |\n| Enter | Acts on the row: follows its link, or sends `helix-action` from it. |\n\nA press with Shift selects every row from the last one pressed, and a press\nwith Control or Command adds or takes out one row under `replace`.\n\n**Leave `selection-mode` unset for a list a reader reads**, and set it for\none a reader chooses from or acts on. The rows of an interactive list are\ngrid rows, which hold controls as a list box option cannot. Give a control\nin `end` `tabindex=\"-1\"` to leave it to the arrow keys and out of the tab\norder.\n\n**`reorderable` lets you move rows.** Each row gets a grip after its `end`\nslot, named by `move-label`. Drag a grip to move its row, and the list\nscrolls near an edge. Or press a grip with Space, Enter, or a click to pick\nup its row, move it with the arrow keys, and press the grip again to drop\nit. A click on another row drops it there, and Escape puts it back. The list\nsays each step in its `live` region. A drop sends `helix-before-reorder`,\nwhich you can refuse, and then `helix-reorder`, whose `keys` hold every\nrow's value in the new order. **You move the rows**: the list moves no\nelement of yours, so your framework keeps the order it rendered.\n\n| Key, on a held row's grip | What it does |\n|---|---|\n| Down, Up | Moves the row one place. |\n| Home, End | Moves the row to the top or the bottom. |\n| Space, Enter | Drops the row. |\n| Escape | Puts the row back where it was. |\n\n`start` and `reversed` number an ordered list as `<ol>` does. The list\nwrites where the numbers start and which way they run as `--list-first` and\n`--list-step` on its slot, which the styled tier counts from. Reversed with\nno `start` counts down from the number of rows, which a server cannot know,\nso served markup counts from one until the list runs.\n\n**An empty list.** Set `empty-label`, or put your own content in the `empty`\nslot, for a row shown while the list has no rows and none are loading, such\nas \"No files yet\" and a link to add one. Without either, an empty list shows\nnothing. The list takes the `empty` state while it has no rows, whatever it\nshows.\n\n**Loading more.** `load-more` sends `helix-load-more` once the end of the\nlist comes within a screen of view, in the box that scrolls it or the page,\nonce for each number of rows: add rows and it can send it again. While you\nfetch, set `loading`: the list is busy, and a row after the last says\n\"Loading more\" (`loading-label`, or your own content in the `loading`\nslot). The list asks for nothing while `loading` is set.\n\nAn interactive list with no name is reported once in a development build,\nsince a screen reader announces it as a grid and nothing more. Name it with\n`label` or `aria-label`.",
+          "description": "Sets `role=\"list\"` on the host, so a screen reader counts the rows and\nannounces each one's position, such as \"1 of 7\".\n\n**`selection-mode` makes the list interactive**, in the way of a grid list:\na grid of rows that is one tab stop. `single` selects one row at a time and\n`multiple` any number, and `value` holds the selected rows' values,\nseparated by commas. A change asks with `helix-before-change` and tells\nwith `change`. `none` selects nothing, so a press acts on the row. A\n`disabled` row is passed over. With `disabled-behavior=\"selection\"`, a\n`disabled` row cannot be selected, and is reached and acted on as any row\nis, as React Aria's GridList has it. Each row is named by its label and described\nby its description, so the words of the controls in `end` are not read as\npart of its name.\n\n`selection-behavior` says what a press does to the rows already selected.\n`toggle`, the default, adds or takes out the row. `replace` selects the row\nalone, as a file list does, and the arrow keys carry the selection with\nthem. Control or Command with a press then adds or takes out one row.\n\n| Key | What it does |\n|---|---|\n| Down, Up | Moves to the next or the previous row. Under `replace`, selects it. |\n| Home, End | Moves to the first or the last row. Under `replace`, selects it. |\n| Page Down, Page Up | Moves a box's height of rows, so the row at one edge lands at the other. Under `replace`, selects the row it lands on. |\n| A letter or a word | Moves to the next row whose words start with what you typed. |\n| Left, Right | Moves between the row and the controls in its `end` slot. |\n| Space | Selects the row, or lets it go. |\n| Shift with Down, Up, Home, End, Page Down, Page Up or Space | Selects every row from the last one pressed, in `multiple`. |\n| Control or Command with Down, Up, Home, End, Page Down or Page Up | Moves without selecting, under `replace`. |\n| Control or Command with A | Selects every row, in `multiple`. |\n| Escape | Lets go of every selected row, asking first, and keeps the key from the dialog or menu around the list. With nothing selected, the key goes on to them. |\n| Enter | Acts on the row: follows its link, or sends `helix-action` from it. |\n\nA press with Shift selects every row from the last one pressed, and a press\nwith Control or Command adds or takes out one row under `replace`.\n\n**Leave `selection-mode` unset for a list a reader reads**, and set it for\none a reader chooses from or acts on. The rows of an interactive list are\ngrid rows, which hold controls as a list box option cannot. Give a control\nin `end` `tabindex=\"-1\"` to leave it to the arrow keys and out of the tab\norder.\n\n**`reorderable` lets you move rows.** Each row gets a grip after its `end`\nslot, named by `move-label`. Drag a grip to move its row, and the list\nscrolls near an edge. Or press a grip with Space, Enter, or a click to pick\nup its row, move it with the arrow keys, and press the grip again to drop\nit. A click on another row drops it there, and Escape puts it back. The list\nsays each step in its `live` region. A drop sends `helix-before-reorder`,\nwhich you can refuse, and then `helix-reorder`, whose `keys` hold every\nrow's value in the new order. **You move the rows**: the list moves no\nelement of yours, so your framework keeps the order it rendered.\n\n| Key, on a held row's grip | What it does |\n|---|---|\n| Down, Up | Moves the row one place. |\n| Home, End | Moves the row to the top or the bottom. |\n| Space, Enter | Drops the row. |\n| Escape | Puts the row back where it was. |\n\n`start` and `reversed` number an ordered list as `<ol>` does. The list\nwrites where the numbers start and which way they run as `--list-first` and\n`--list-step` on its slot, which the styled tier counts from. Reversed with\nno `start` counts down from the number of rows, which a server cannot know,\nso served markup counts from one until the list runs.\n\n**An empty list.** Set `empty-label`, or put your own content in the `empty`\nslot, for a row shown while the list has no rows and none are loading, such\nas \"No files yet\" and a link to add one. Without either, an empty list shows\nnothing. The list takes the `empty` state while it has no rows, whatever it\nshows.\n\n**Loading more.** `load-more` sends `helix-load-more` once the end of the\nlist comes within a screen of view, in the box that scrolls it or the page,\nonce for each number of rows: add rows and it can send it again. While you\nfetch, set `loading`: the list is busy, and a row after the last says\n\"Loading more\" (`loading-label`, or your own content in the `loading`\nslot). The list asks for nothing while `loading` is set.\n\nAn interactive list with no name is reported once in a development build,\nsince a screen reader announces it as a grid and nothing more. Name it with\n`label` or `aria-label`.",
           "name": "HelixHeadlessList",
           "cssProperties": [
             {
@@ -89366,6 +89723,15 @@
                 "words": true
               }
             },
+            {
+              "kind": "field",
+              "name": "disabledBehavior",
+              "type": {
+                "text": "'all' | 'selection' | undefined | undefined"
+              },
+              "description": "What `disabled` takes from a row, in a list that selects: `all`, which\npasses over the row, or `selection`, which keeps the row out of the\nselection and lets the keys reach it and Enter or a press act on it, as\nReact Aria's GridList takes `disabledBehavior`.\n\nAbsent is `all`.",
+              "attribute": "disabled-behavior"
+            },
             {
               "kind": "field",
               "name": "droppedLabel",
@@ -89511,6 +89877,35 @@
               "description": "What a press does to the rows already selected, in a list that selects:\n`toggle` adds or takes out the row, and `replace` selects it alone and\nlets the arrow keys carry the selection.",
               "attribute": "selection-behavior"
             },
+            {
+              "kind": "method",
+              "name": "blocked",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "row",
+                  "type": {
+                    "text": "HelixHeadlessListItem"
+                  }
+                }
+              ],
+              "description": "Whether the row is out of reach of the keys and of actions, past selection."
+            },
+            {
+              "kind": "field",
+              "name": "selectable",
+              "type": {
+                "text": "HelixHeadlessListItem[]"
+              },
+              "privacy": "private",
+              "description": "The rows a key can land on that can also be selected.",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "selectionMode",
@@ -89558,6 +89953,16 @@
               "privacy": "private",
               "description": "The row the reader was last on, which keeps the tab stop."
             },
+            {
+              "kind": "field",
+              "name": "placed",
+              "type": {
+                "text": "HelixHeadlessListItem[]"
+              },
+              "privacy": "private",
+              "default": "[]",
+              "description": "The rows in order on the last `sync`, so a removed row's place is known."
+            },
             {
               "kind": "field",
               "name": "anchor",
@@ -89757,6 +90162,25 @@
               },
               "description": "Tells every row its place: whether it holds the one tab stop and whether\nit is selected, or that it is a plain row. Through `whenHydrated`, so a\nrow a server rendered draws its served markup first."
             },
+            {
+              "kind": "method",
+              "name": "followRemoved",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "rows",
+                  "type": {
+                    "text": "HelixHeadlessListItem[]"
+                  }
+                }
+              ],
+              "description": "Moves the tab stop off a row the page removed, to the next row a key can\nreach or, at the end, the one before it, and moves focus there where\nremoving the row dropped it to the body.\n\n**Focus went to the body**, and the arrow keys did nothing until the\nreader tabbed back into the list. React Aria's GridList moves focus to a\nneighbor the same way. Focus anywhere but the body is where you put it,\nand is left there."
+            },
             {
               "kind": "method",
               "name": "rowOf",
@@ -90481,6 +90905,14 @@
               "description": "What screen readers hear when a held row is put back, or a move is\nrefused, in a `reorderable` list.",
               "fieldName": "canceledLabel"
             },
+            {
+              "name": "disabled-behavior",
+              "type": {
+                "text": "'all' | 'selection' | undefined | undefined"
+              },
+              "description": "What `disabled` takes from a row, in a list that selects: `all`, which\npasses over the row, or `selection`, which keeps the row out of the\nselection and lets the keys reach it and Enter or a press act on it, as\nReact Aria's GridList takes `disabledBehavior`.\n\nAbsent is `all`.",
+              "fieldName": "disabledBehavior"
+            },
             {
               "name": "dropped-label",
               "type": {
@@ -91076,7 +91508,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The listbox is the control, and options are its items. A Select is a listbox\nwith a trigger in front of it, a Combobox is a listbox with a text input, and\na command palette is a listbox in a dialog. They differ only in what opens\nthe list and what filters it.\n\nWith `multiple` set, `value` is a comma-separated string, like\n`Checkbox.Group`'s, because `MixinControllerValue` holds a string. The form\nreceives one entry per selected option, as a native `<select multiple>` sends\nit, so your server does not split on commas.\n\nSelected and active are separate. The selected option is the value. The\nactive option is where the keyboard is: the arrow keys move it, and\n`aria-activedescendant` points to it while focus stays on the list.\n\n**Keyboard.** The list is one tab stop, or its filter field is where there\nis one. In a single-choice list the highlight is the choice unless `manual`\nis set; then Enter, Space or a click chooses.\n\n| Key | What it does |\n|---|---|\n| Down, Up | Moves the highlight to the next or the previous option, round from the last to the first. With `layout=\"grid\"`, to the option below or above, stopping at the edge. |\n| Right, Left | With `layout=\"grid\"`, moves to the next or the previous option, mirrored right to left. In a filter field, moves the caret. |\n| Home, End | Moves to the first or the last option. In a filter field, moves the caret. |\n| Page Down, Page Up | Moves by as many options as the list shows at once. |\n| A letter or a word | Moves to the next option whose words start with what you typed. In a filter field, types it. |\n| Enter | Chooses the highlighted option, or follows it where it is a link. |\n| Space | Chooses the highlighted option, or with `multiple` toggles it. In a filter field, types a space. |\n| Shift with Down or Up | With `multiple`, adds the option the highlight moves to. In a filter field, moves the highlight and leaves the value. |\n| Shift with Space | With `multiple`, adds every option from the one last chosen to the highlighted one. In a filter field, types a space. |\n| Shift with Home or End | With `multiple`, adds every option from the highlight to that end. In a filter field, hold Control as well. |\n| Control or Command with A | With `multiple`, chooses every option, or none where all are chosen. In a filter field, selects the text. |\n| Escape | In a filter field, clears the filter. |\n| Alt with Up or Down | In a `reorderable` list, moves the highlighted option a place. Alt with Home or End moves it to either end. |\n\n**ARIA.** The `items` part is the `listbox`, named by the label and\ndescribed by the hint and the message, with `aria-multiselectable` under\n`multiple`, `aria-required`, `aria-invalid`, and `aria-busy` while loading.\nEach option is an `option` with `aria-selected`. The list, or its filter\nfield, points `aria-activedescendant` at the highlighted option; the field\nis `aria-autocomplete=\"list\"` and controls the list.\n\nAn option with `href` is a link: Enter or a press follows it and selects\nnothing, and moving onto it with the arrows does not follow it.\n\nAs a filter narrows the list, a screen reader hears how many options are\nleft, such as \"3 results\", from `result-label` and `results-label`. A filter\nthat leaves none says `empty-text`.\n\n**Moving options** is a separate import, `@fusion.dev/helix/listbox/reorder`,\nso a list that never moves options carries none of its code. With it\nimported, `reorderable` lets a reader move options:\n\n- Alt with Up or Down moves the highlighted option a place, and Alt with\n  Home or End moves it to either end, as the APG's rearrangeable listbox\n  does. The highlight stays on it.\n- A pointer drags an option, with a drop indicator, and the list scrolls near\n  an edge. A press that does not travel still chooses the option.\n- A drop sends `helix-before-reorder`, which you can refuse, and then\n  `helix-reorder`, whose `keys` hold every value in the new order. **You\n  move the options**, or set `items` in the new order: the list moves no\n  element of yours.\n- The list says each move in its `live` region. The words are the\n  `moved-label`, `canceled-label`, `dropped-label`, and `picked-up-label`\n  attributes, which the import reads.\n- An option in a group moves within its group. Options do not move while a\n  filter narrows the list, under `layout=\"grid\"`, or while the list is\n  disabled.",
+          "description": "The listbox is the control, and options are its items. A Select is a listbox\nwith a trigger in front of it, a Combobox is a listbox with a text input, and\na command palette is a listbox in a dialog. They differ only in what opens\nthe list and what filters it.\n\nWith `multiple` set, `value` is a comma-separated string, like\n`Checkbox.Group`'s, because `MixinControllerValue` holds a string. The form\nreceives one entry per selected option, as a native `<select multiple>` sends\nit, so your server does not split on commas. An option's value may hold a\ncomma: a run of the string that is an option's value is read as that one\nvalue, and the form sends it as one entry.\n\nSelected and active are separate. The selected option is the value. The\nactive option is where the keyboard is: the arrow keys move it, and\n`aria-activedescendant` points to it while focus stays on the list.\n\n**Keyboard.** The list is one tab stop, or its filter field is where there\nis one. In a single-choice list the highlight is the choice unless `manual`\nis set; then Enter, Space or a click chooses.\n\n| Key | What it does |\n|---|---|\n| Down, Up | Moves the highlight to the next or the previous option, round from the last to the first. With `layout=\"grid\"`, to the option below or above, stopping at the edge. |\n| Right, Left | With `layout=\"grid\"`, moves to the next or the previous option, mirrored right to left. In a filter field, moves the caret. |\n| Home, End | Moves to the first or the last option. In a filter field, moves the caret. |\n| Page Down, Page Up | Moves by as many options as the list shows at once. |\n| A letter or a word | Moves to the next option whose words start with what you typed. In a filter field, types it. |\n| Enter | Chooses the highlighted option, or follows it where it is a link. |\n| Space | Chooses the highlighted option, or with `multiple` toggles it. In a filter field, types a space. |\n| Shift with Down or Up | With `multiple`, adds the option the highlight moves to. In a filter field, moves the highlight and leaves the value. |\n| Shift with Space | With `multiple`, adds every option from the one last chosen to the highlighted one. In a filter field, types a space. |\n| Shift with Home or End | With `multiple`, adds every option from the highlight to that end. In a filter field, hold Control as well. |\n| Control or Command with A | With `multiple`, chooses every option, or none where all are chosen. In a filter field, selects the text. |\n| Escape | In a filter field, clears the filter. |\n| Alt with Up or Down | In a `reorderable` list, moves the highlighted option a place. Alt with Home or End moves it to either end. |\n\n**ARIA.** The `items` part is the `listbox`, named by the label and\ndescribed by the hint and the message, with `aria-multiselectable` under\n`multiple`, `aria-required`, `aria-invalid`, and `aria-busy` while loading.\nEach option is an `option` with `aria-selected`. The list, or its filter\nfield, points `aria-activedescendant` at the highlighted option; the field\nis `aria-autocomplete=\"list\"` and controls the list.\n\nAn option with `href` is a link: Enter or a press follows it and selects\nnothing, and moving onto it with the arrows does not follow it.\n\nAs a filter narrows the list, a screen reader hears how many options are\nleft, such as \"3 results\", from `result-label` and `results-label`. A filter\nthat leaves none says `empty-text`.\n\n**Moving options** is a separate import, `@fusion.dev/helix/listbox/reorder`,\nso a list that never moves options carries none of its code. With it\nimported, `reorderable` lets a reader move options:\n\n- Alt with Up or Down moves the highlighted option a place, and Alt with\n  Home or End moves it to either end, as the APG's rearrangeable listbox\n  does. The highlight stays on it.\n- A pointer drags an option, with a drop indicator, and the list scrolls near\n  an edge. A press that does not travel still chooses the option.\n- A drop sends `helix-before-reorder`, which you can refuse, and then\n  `helix-reorder`, whose `keys` hold every value in the new order. **You\n  move the options**, or set `items` in the new order: the list moves no\n  element of yours.\n- The list says each move in its `live` region. The words are the\n  `moved-label`, `canceled-label`, `dropped-label`, and `picked-up-label`\n  attributes, which the import reads.\n- An option in a group moves within its group. Options do not move while a\n  filter narrows the list, under `layout=\"grid\"`, or while the list is\n  disabled.",
           "name": "HelixHeadlessListbox",
           "cssParts": [
             {
@@ -91278,6 +91710,14 @@
                 "words": true
               }
             },
+            {
+              "kind": "field",
+              "name": "filterMatch",
+              "type": {
+                "text": "((text: string, filter: string) => boolean) | undefined | undefined"
+              },
+              "description": "Whether an option is kept by the filter: a function given the option's\nwords and the filter, trimmed, that returns `true` to keep it showing, as\nReact Aria's `Autocomplete` takes `filter`. For matching that ignores\naccents, matches the start of each word, or matches out of order.\n\nAbsent, an option is kept where its words hold the filter, in any case. A\nproperty only, there being no way to write a function in markup."
+            },
             {
               "kind": "field",
               "name": "items",
@@ -91634,7 +92074,7 @@
               "type": {
                 "text": "string[]"
               },
-              "description": "The chosen values, as an array whether or not `multiple` is set.",
+              "description": "The chosen values, as an array whether or not `multiple` is set.\n\nRead against the options' values, so an option whose value holds a comma\nis one value. See `chosenValues`.",
               "readonly": true
             },
             {
@@ -100490,7 +100930,7 @@
               "name": "handlePartChange",
               "privacy": "private",
               "readonly": true,
-              "description": "A route or area renamed, or its description changed, which the list says\nand a slot change does not report."
+              "description": "A route or area renamed, or its description changed, which the list says\nand a slot change does not report.\n\nNot the map's own `gestures` news, which it sends from `updated` and which\nchanges nothing it draws: an update asked for there ran every map's\nupdate twice, and Lit's development build warned about it."
             },
             {
               "kind": "field",
@@ -106011,7 +106451,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The trigger is slotted and stays your own element, as with the tooltip. The\nmenu renders its surface in the top layer with the popover API, so an\nancestor with `overflow: hidden` does not clip it and it needs no `z-index`.\n\nSlot a `helix-button` or `helix-icon-button` as the trigger, and the menu\ntells it that it opens a menu and whether the menu is open, inside its own\nshadow root. On a plain element, such as a `<button>`, the menu writes\n`aria-haspopup=\"menu\"` and `aria-expanded`, from a frame after its own first\nrender, so a server's markup is never changed while a framework hydrates it.\nIt never writes `aria-expanded` where you wrote it yourself.\n\nSubmenus drill down by default. A submenu replaces the panel's content, and a\nback row returns to the previous page. One panel stays inside a narrow\nwindow, and works on touch screens, which have no hover.\n\n**`submenus=\"flyout\"` opens each submenu in a panel of its own beside its\nrow**, as React Aria's `SubmenuTrigger` and Radix's `Sub` do. Resting the\npointer on the row opens it, and a pointer crossing toward the open panel\nover the rows between keeps it open, as Radix's grace area does. Right Arrow\nopens a row's submenu on its first row, and Left Arrow or Escape closes it\nand returns focus to the row, the two arrows swapping on a right-to-left\npage. The row says `aria-expanded`, and the panel is a `menu` named by the\nrow.\n\nThe root holds which page is open, because only one page shows at a time. It\nsets this on items as a property, never as an attribute. An attribute written\nonto your element after it upgrades causes a hydration mismatch.\n\nGroup rows under a heading with `Menu.Section`, which is a `group` named by\nits heading. Between runs of rows, a `<helix-divider>` is a separator a\nscreen reader announces.\n\nKeys: Enter, Space or Down Arrow on the trigger opens the menu on its first\nrow, and Up Arrow on its last. In the menu, Up and Down Arrow move between\nrows, Home and End go to the first and the last, a typed letter moves to\nthe next row whose name starts with it, Enter and Space choose, Right Arrow\nopens a row's submenu and Left Arrow goes back, the two swapping on a\nright-to-left page, and Escape closes the menu and returns focus to the\ntrigger. Tab closes it and moves on.\n\nWhile it is open, the surface carries the trigger's width as\n`--floating-anchor-inline-size` and the room left below it as\n`--floating-available-block-size`, as Radix's dropdown menu publishes its\ntrigger's width, for a menu as wide as its trigger:\n`helix-menu::part(surface) { min-inline-size: var(--floating-anchor-inline-size) }`.\n\nWith `context`, the trigger is an area and the menu is its context menu: a\nright-click, a long press, Shift+F10 or the menu key over the area opens it\nat the pointer, or at the area's corner from the keyboard, as Radix's context\nmenu does. A press on the area does not open it, and closing it returns focus\nto where it was. A touch or a pen held still on the area opens it too, on\nevery browser, since iOS sends no `contextmenu` for one.\n\n**A trigger with its own action.** With `open-on=\"long-press\"`, a press on\nthe trigger is the trigger's own, and a press held for half a second opens\nthe menu, as React Aria's `trigger=\"longPress\"` does. Alt+Down or Alt+Up\nopens it from the keyboard, and the trigger is described by\n`long-press-label`, which says so.",
+          "description": "The trigger is slotted and stays your own element, as with the tooltip. The\nmenu renders its surface in the top layer with the popover API, so an\nancestor with `overflow: hidden` does not clip it and it needs no `z-index`.\n\nSlot a `helix-button` or `helix-icon-button` as the trigger, and the menu\ntells it that it opens a menu and whether the menu is open, inside its own\nshadow root. On a plain element, such as a `<button>`, the menu writes\n`aria-haspopup=\"menu\"` and `aria-expanded`, from a frame after its own first\nrender, so a server's markup is never changed while a framework hydrates it.\nIt never writes `aria-expanded` where you wrote it yourself.\n\nSubmenus drill down by default. A submenu replaces the panel's content, and a\nback row returns to the previous page. One panel stays inside a narrow\nwindow, and works on touch screens, which have no hover.\n\n**`submenus=\"flyout\"` opens each submenu in a panel of its own beside its\nrow**, as React Aria's `SubmenuTrigger` and Radix's `Sub` do. Resting the\npointer on the row opens it, and a pointer crossing toward the open panel\nover the rows between keeps it open, as Radix's grace area does. Right Arrow\nopens a row's submenu on its first row, and Left Arrow or Escape closes it\nand returns focus to the row, the two arrows swapping on a right-to-left\npage. The row says `aria-expanded`, and the panel is a `menu` named by the\nrow.\n\nThe root holds which page is open, because only one page shows at a time. It\nsets this on items as a property, never as an attribute. An attribute written\nonto your element after it upgrades causes a hydration mismatch.\n\nGroup rows under a heading with `Menu.Section`, which is a `group` named by\nits heading. Between runs of rows, a `<helix-divider>` is a separator a\nscreen reader announces.\n\nKeys: Enter, Space or Down Arrow on the trigger opens the menu on its first\nrow, and Up Arrow on its last. In the menu, Up and Down Arrow move between\nrows, Home and End go to the first and the last, a typed letter moves to\nthe next row whose name starts with it, Enter and Space choose, Right Arrow\nopens a row's submenu and Left Arrow goes back, the two swapping on a\nright-to-left page. Left Arrow on the top page does nothing. Escape closes\nthe menu and returns focus to the trigger. Tab closes it and moves on.\n\nWhile it is open, the surface carries the trigger's width as\n`--floating-anchor-inline-size` and the room left below it as\n`--floating-available-block-size`, as Radix's dropdown menu publishes its\ntrigger's width, for a menu as wide as its trigger:\n`helix-menu::part(surface) { min-inline-size: var(--floating-anchor-inline-size) }`.\n\nWith `context`, the trigger is an area and the menu is its context menu: a\nright-click, a long press, Shift+F10 or the menu key over the area opens it\nat the pointer, or at the area's corner from the keyboard, as Radix's context\nmenu does. A press on the area does not open it, and closing it returns focus\nto where it was. A touch or a pen held still on the area opens it too, on\nevery browser, since iOS sends no `contextmenu` for one.\n\n**A trigger with its own action.** With `open-on=\"long-press\"`, a press on\nthe trigger is the trigger's own, and a press held for half a second opens\nthe menu, as React Aria's `trigger=\"longPress\"` does. Alt+Down or Alt+Up\nopens it from the keyboard, and the trigger is described by\n`long-press-label`, which says so.",
           "name": "HelixHeadlessMenu",
           "cssProperties": [
             {
@@ -106340,7 +106780,7 @@
               "name": "panel",
               "privacy": "private",
               "readonly": true,
-              "default": "new PopoverController(this, { anchor: () => this.context && this.point ? this.renderRoot?.querySelector<HTMLElement>('#point') : this.trigger, // The host is `display: contents`, so it has no box a press can land in. // What counts as inside is the surface, plus the trigger, whose own click // handler decides what a press there means. boundary: () => this, offset: () => this.offset, onDismiss: () => this.hide(), open: () => this.open, placement: () => this.placement, surface: () => this.partNamed('surface'), })"
+              "default": "new PopoverController(this, { anchor: () => this.context && this.point ? this.renderRoot?.querySelector<HTMLElement>('#point') : this.trigger, // The host is `display: contents`, so it has no box a press can land in. // What counts as inside is the surface, plus the trigger, whose own click // handler decides what a press there means. boundary: () => this, offset: () => this.offset, onDismiss: () => this.hide(), /* The side the panel landed on, for a sheet outside that draws by side, as Popover says it. */ onPlace: (placement) => { const side = sideOf(placement) this.toggleState('placed-bottom', side === 'bottom') this.toggleState('placed-left', side === 'left') this.toggleState('placed-right', side === 'right') this.toggleState('placed-top', side === 'top') }, open: () => this.open, placement: () => this.placement, surface: () => this.partNamed('surface'), })"
             },
             {
               "kind": "method",
@@ -107595,6 +108035,22 @@
               "description": "While the menu is open.",
               "name": "open"
             },
+            {
+              "description": "While the open panel sits below its trigger.",
+              "name": "placed-bottom"
+            },
+            {
+              "description": "While the open panel sits to the left of its trigger.",
+              "name": "placed-left"
+            },
+            {
+              "description": "While the open panel sits to the right of its trigger.",
+              "name": "placed-right"
+            },
+            {
+              "description": "While the open panel sits above its trigger.",
+              "name": "placed-top"
+            },
             {
               "description": "A row on the current page has content in its leading column, so every row keeps that column.",
               "name": "start"
@@ -110895,7 +111351,7 @@
                   "text": "HTMLElement | undefined"
                 }
               },
-              "description": "The tab stop after this element on the page, or the one before it at the\nend, for a lone element whose removal would drop focus to the body.\n\n**A lone Callout or Announcement had nowhere to hand focus**, so a\nkeyboard reader who dismissed one started again from the top of the\npage. React Aria's Toast hands focus on the same way. Read before the\nevent, in the order Tab reaches the stops, while this element's own are\nstill among them.",
+              "description": "The tab stop after this element on the page, or the one before it at the\nend, for an element whose removal would drop focus to the body because\nno neighbor of its kind has a control to take it.\n\n**A lone Callout or Announcement had nowhere to hand focus**, so a\nkeyboard reader who dismissed one started again from the top of the\npage. React Aria's Toast hands focus on the same way. Read before the\nevent, in the order Tab reaches the stops, while this element's own are\nstill among them.",
               "inheritedFrom": {
                 "name": "MixinDismissible",
                 "module": "src/mixins/mixin-dismissible/mixin-dismissible.ts"
@@ -112816,7 +113272,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A separate family from `Input`'s `type=\"number\"`. It renders two buttons,\nbinds four keys `Input` does not, and handles clamping and stepping.\n\nThe field is `type=\"text\"` with `inputmode=\"decimal\"`. Tested in a real\nbrowser, `type=\"number\"` fails in three ways:\n- Typing `12e` gives a `.value` of `\"\"`, so the element cannot see what you\n  typed. A `type=\"text\"` field keeps `\"12e\"`.\n- The mouse wheel over a focused field changes the value, for example from 5\n  to 4, when you only meant to scroll the page.\n- `selectionStart` is `null`, so the caret cannot be managed.\n\n`inputmode=\"decimal\"` keeps the numeric keypad on phones.\n\n`format-options` shows the number with `Intl.NumberFormat` in `locale`, as a\ncurrency, a percent or a unit, while the field is not being edited. Focus\nshows the number itself, and a typed `$1,200` or `25%` is read back with the\nsame options. The value stays the plain number: `1200`, or `0.25` for 25%.\nThe locale's group separators are read in every field, so `1,234` is a\nnumber in `en-US`.\n\nThe field and its two buttons sit in a `role=\"group\"`, and the field carries\n`role-label`, \"number field\" in English, as its `aria-roledescription`, as\nReact Aria's NumberField does. On iOS and iPadOS the field is a plain text\nfield, with no `role=\"spinbutton\"`, which VoiceOver reads as a slider you\ncannot type in, and no role description, so VoiceOver says the field is\nrequired. React Aria's NumberField does the same.\n\nValidity follows the platform's rules: `min`, `max`, and `step` are checked\nand reported through the host's own `setValidity`, under the platform's flag\nnames.\n\nStepping is separate from typing, so a number is not corrected while you type\nit. While you type, the form holds the number the text reads as, so a field\nshowing `$2,500.50` gives the form 2500.5, and text that is not a number\ngives it nothing, as a native number field does.\n\nHolding a stepper button down steps once, then again after 400 milliseconds,\nthen every 60 milliseconds until you let go, as React Aria's NumberField does.\n\n**Keyboard.** The field is one tab stop, and the stepper buttons are not in\nthe tab order.\n\n| Key | What it does |\n|---|---|\n| Up, Down | Steps the value up or down by `step`. |\n| Page Up, Page Down | Steps by `large-step` steps, ten by default. |\n| Home, End | Goes to `min` or `max`, where there is one. Without one, moves the caret. |\n| Enter | Commits the typed number and submits the form, as a native field does. |\n\nThe field has `role=\"spinbutton\"` with `aria-valuenow`, `aria-valuemin`,\n`aria-valuemax`, and the formatted text in `aria-valuetext`.",
+          "description": "A separate family from `Input`'s `type=\"number\"`. It renders two buttons,\nbinds four keys `Input` does not, and handles clamping and stepping.\n\nThe field is `type=\"text\"` with `inputmode=\"decimal\"`. Tested in a real\nbrowser, `type=\"number\"` fails in three ways:\n- Typing `12e` gives a `.value` of `\"\"`, so the element cannot see what you\n  typed. A `type=\"text\"` field keeps `\"12e\"`.\n- The mouse wheel over a focused field changes the value, for example from 5\n  to 4, when you only meant to scroll the page.\n- `selectionStart` is `null`, so the caret cannot be managed.\n\n`inputmode=\"decimal\"` keeps the numeric keypad on phones.\n\n`format-options` shows the number with `Intl.NumberFormat` in `locale`, as a\ncurrency, a percent or a unit, while the field is not being edited. Focus\nshows the number itself, and a typed `$1,200` or `25%` is read back with the\nsame options. The value stays the plain number: `1200`, or `0.25` for 25%.\nThe locale's group separators are read in every field, so `1,234` is a\nnumber in `en-US`.\n\nThe field and its two buttons sit in a `role=\"group\"` named by the label,\nand the field carries `role-label`, \"number field\" in English, as its\n`aria-roledescription`, as React Aria's NumberField does. On iOS and iPadOS the field is a plain text\nfield, with no `role=\"spinbutton\"`, which VoiceOver reads as a slider you\ncannot type in, and no role description, so VoiceOver says the field is\nrequired. React Aria's NumberField does the same.\n\nValidity follows the platform's rules: `min`, `max`, and `step` are checked\nand reported through the host's own `setValidity`, under the platform's flag\nnames.\n\nStepping is separate from typing, so a number is not corrected while you type\nit. While you type, the form holds the number the text reads as, so a field\nshowing `$2,500.50` gives the form 2500.5, and text that is not a number\ngives it nothing, as a native number field does.\n\nHolding a stepper button down steps once, then again after 400 milliseconds,\nthen every 60 milliseconds until you let go, as React Aria's NumberField does.\n\n**Keyboard.** The field is one tab stop, and the stepper buttons are not in\nthe tab order.\n\n| Key | What it does |\n|---|---|\n| Up, Down | Steps the value up or down by `step`. |\n| Page Up, Page Down | Steps by `large-step` steps, ten by default. |\n| Home, End | Goes to `min` or `max`, where there is one. Without one, moves the caret. |\n| Enter | Commits the typed number and submits the form, as a native field does. |\n\nThe field has `role=\"spinbutton\"` with `aria-valuenow`, `aria-valuemin`,\n`aria-valuemax`, and the formatted text in `aria-valuetext`.",
           "name": "HelixHeadlessNumberInput",
           "cssParts": [
             {
@@ -113613,7 +114069,7 @@
               "type": {
                 "text": "number"
               },
-              "description": "The value as a number, or `NaN` while the control is empty.\n\n`NaN` and not zero, which is the trap the platform already avoids: `Number('')`\nis zero, so an empty control would report a number it does not hold and a\nform would submit it."
+              "description": "The value as a number, or `NaN` while the control is empty or does not\nhold a number.\n\nRead in the locale and the format, as the form reads it, so `1,5` typed\nin a locale with a decimal comma is 1.5 here while the form holds 1.5.\n`NaN` and not zero, which is the trap the platform already avoids: `Number('')`\nis zero, so an empty control would report a number it does not hold and a\nform would submit it."
             },
             {
               "kind": "field",
@@ -136071,7 +136527,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A trigger that opens a `Listbox`. The list is the same element you can use on\nits own, with the same keyboard behavior, filtering, and multi-select rules.\nSelect adds a trigger that shows what is chosen, a floating surface, and a\nplace for focus to return to when the list closes.\n\nYour options stay in your light DOM and are slotted through into the listbox,\nso the listbox looks through slots to find them. For a list too long to draw\nwhole, set `items` instead: the list draws only the options in sight, as\nListbox's `items` does, and the trigger, its keys and the form read the\nwhole set.\n\n`Select` owns the value, passes it down to the listbox, and takes changes\nback, so the value lives in one place.\n\nSet `valueContent` to draw the trigger's content from the chosen options,\nand several chosen options are written as a list in the reader's language.\n\n**Keyboard.** On the closed trigger:\n\n| Key | What it does |\n|---|---|\n| Down, Enter, Space | Opens the list on the chosen option, or the first. |\n| Up | Opens the list on the chosen option, or the last. |\n| Home, End | Opens the list on the first or the last option. |\n| Left, Right | Chooses the option before or after the chosen one without opening, as React Aria's Select does, in either direction of text. |\n| 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. |\n\nIn the open list, which is a `Listbox`:\n\n| Key | What it does |\n|---|---|\n| Down, Up, Home, End, Page Down, Page Up | Moves the highlight. |\n| A letter or a word | Moves the highlight to the next option whose words start with what you typed. |\n| Enter, Space | Chooses the highlighted option and closes the list. With `multiple`, toggles it and leaves the list open. |\n| Escape | Closes the list and puts focus back on the trigger. |\n| Tab | Closes the list and moves on. |\n\nA choice made on the closed trigger is said aloud on Apple devices, where\nVoiceOver does not read the trigger's new name.\n\n**ARIA.** The trigger is a `button` with `aria-haspopup=\"listbox\"` and\n`aria-expanded`, named by the label and then the chosen words, as a native\n`<select>` is. The list is the listbox `Listbox` describes, named by the\nlabel, or by `list-label` where there is none.\n\nSet `autocomplete` to let a browser's autofill choose, as a native `<select>`\nwith the same attribute would.",
+          "description": "A trigger that opens a `Listbox`. The list is the same element you can use on\nits own, with the same keyboard behavior, filtering, and multi-select rules.\nSelect adds a trigger that shows what is chosen, a floating surface, and a\nplace for focus to return to when the list closes.\n\nYour options stay in your light DOM and are slotted through into the listbox,\nso the listbox looks through slots to find them. For a list too long to draw\nwhole, set `items` instead: the list draws only the options in sight, as\nListbox's `items` does, and the trigger, its keys and the form read the\nwhole set.\n\n`Select` owns the value, passes it down to the listbox, and takes changes\nback, so the value lives in one place. With `multiple`, the value is the\nchosen values joined with commas, and the form receives one entry for each.\nAn option's value may hold a comma, and it is read as one value.\n\nSet `valueContent` to draw the trigger's content from the chosen options,\nand several chosen options are written as a list in the reader's language.\n\n**Keyboard.** On the closed trigger:\n\n| Key | What it does |\n|---|---|\n| Down, Enter, Space | Opens the list on the chosen option, or the first. |\n| Up | Opens the list on the chosen option, or the last. |\n| Home, End | Opens the list on the first or the last option. |\n| Left, Right | Chooses the option before or after the chosen one without opening, as React Aria's Select does, in either direction of text. |\n| 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. |\n\nIn the open list, which is a `Listbox`:\n\n| Key | What it does |\n|---|---|\n| Down, Up, Home, End, Page Down, Page Up | Moves the highlight. |\n| A letter or a word | Moves the highlight to the next option whose words start with what you typed. |\n| Enter, Space | Chooses the highlighted option and closes the list. With `multiple`, toggles it and leaves the list open. |\n| Escape | Closes the list and puts focus back on the trigger. |\n| Tab | Closes the list and moves on. |\n\nA choice made on the closed trigger is said aloud on Apple devices, where\nVoiceOver does not read the trigger's new name.\n\n**ARIA.** The trigger is a `button` with `aria-haspopup=\"listbox\"` and\n`aria-expanded`, named by the label and then the chosen words, as a native\n`<select>` is. The list is the listbox `Listbox` describes, named by the\nlabel, or by `list-label` where there is none.\n\nSet `autocomplete` to let a browser's autofill choose, as a native `<select>`\nwith the same attribute would.",
           "name": "HelixHeadlessSelect",
           "cssProperties": [
             {
@@ -136427,6 +136883,16 @@
               "description": "The chosen options, in the order they appear. None on a server or while hydrating, and none for `items`.",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "chosen",
+              "type": {
+                "text": "string[]"
+              },
+              "privacy": "private",
+              "description": "The chosen values, read against the options' values, so an option whose\nvalue holds a comma is one value. See `chosenValues`.",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "data",
@@ -138511,7 +138977,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "What is loading, read out as the placeholder's name, such as \"Loading\nprofile\".\n\nAbsent hides the placeholder from screen readers.",
+              "description": "What is loading, read out as the placeholder's name, such as \"Loading\nprofile\".\n\nAbsent hides the placeholder from screen readers. Around content, the name\nis read while `loading` is set, and the loaded content is read as it is.",
               "attribute": "label"
             },
             {
@@ -138893,7 +139359,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "What is loading, read out as the placeholder's name, such as \"Loading\nprofile\".\n\nAbsent hides the placeholder from screen readers.",
+              "description": "What is loading, read out as the placeholder's name, such as \"Loading\nprofile\".\n\nAbsent hides the placeholder from screen readers. Around content, the name\nis read while `loading` is set, and the loaded content is read as it is.",
               "fieldName": "label"
             },
             {
@@ -148816,7 +149282,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Only the step's name is a button. The marker is `aria-hidden` decoration, so\nit is outside the button. The name uses `Button`, so the hover wash, the\nfocus ring, and the disabled style come from `Button`.\n\nEvery step can be pressed and fires `helix-select`. To stop the user from\nmoving to a step, set `disabled` on it.\n\nThe marker is a slot, and its fallback shows the step's state: a check for a\nfinished stage, a target for the current stage, and an empty ring for a stage\nnot reached yet. Only that one mark is rendered, so the accessibility tree\nhas no hidden marks.\n\nThe half lines on each side of the mark are drawn on the step's `::before`\nand `::after` from properties the list sets, so the step renders no extra\nelement for them.\n\nA finished stage says so in words: the name's button is described by\n`complete-label`, \"Complete\" unless you translate it, and a stage that\nbecomes complete while the page is open says it once in a polite live\nregion. The current stage's button carries `aria-current=\"step\"`, and only\nthe button, so the state is said once, on the control.",
+          "description": "Only the step's name is a button. The marker is `aria-hidden` decoration, so\nit is outside the button. The name uses `Button`, so the hover wash, the\nfocus ring, and the disabled style come from `Button`.\n\nEvery step can be pressed and fires `helix-select`. To stop the user from\nmoving to a step, set `disabled` on it.\n\nThe marker is a slot, and its fallback shows the step's state: a check for a\nfinished stage, a target for the current stage, and an empty ring for a stage\nnot reached yet. Only that one mark is rendered, so the accessibility tree\nhas no hidden marks.\n\nThe half lines on each side of the mark are drawn on the step's `::before`\nand `::after` from properties the list sets, so the step renders no extra\nelement for them.\n\nA finished stage says so in words: the name's button is described by\n`complete-label`, \"Complete\" unless you translate it, and a stage that\nbecomes complete while the page is open says it once in a polite live\nregion. The current stage's button carries `aria-current=\"step\"`, and only\nthe button, so the state is said once, on the control.\n\nA stage's `content`, while it holds anything, is a group named by the\nstage's name, so a screen reader moving into it hears which stage it\nbelongs to.",
           "name": "HelixHeadlessStep",
           "cssParts": [
             {
@@ -148977,6 +149443,23 @@
               "description": "The value the step sends in `helix-select`.",
               "attribute": "value"
             },
+            {
+              "kind": "field",
+              "name": "holding",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether anything is slotted into `content`, which makes it a named group."
+            },
+            {
+              "kind": "field",
+              "name": "readContent",
+              "privacy": "private",
+              "readonly": true,
+              "description": "Reads whether the `content` slot holds anything."
+            },
             {
               "kind": "field",
               "name": "status",
@@ -155659,7 +156142,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "An inactive panel is hidden and stays mounted. Anything typed into it is\nstill there when the person comes back, and the content of every panel is in\nthe server-rendered markup for crawlers, whichever tab is open.\n\nThe host is the `tabpanel` while its tab is selected, through\n`ElementInternals`, so the tab's `aria-controls` can reach it from the tab's\nshadow root. The box inside is a tab stop only while the panel holds nothing\nfocusable, as the ARIA tabs pattern and React Aria's tab panel do: Tab from\nthe tab list lands on the panel's first link or control where there is one,\nand on the panel itself where there is none.",
+          "description": "An inactive panel is hidden and stays mounted. Anything typed into it is\nstill there when the person comes back, and the content of every panel is in\nthe server-rendered markup for crawlers, whichever tab is open.\n\nThe host is the `tabpanel` while its tab is selected, through\n`ElementInternals`, so the tab's `aria-controls` can reach it from the tab's\nshadow root. The box inside is a tab stop only while the panel holds nothing\nfocusable, as the ARIA tabs pattern and React Aria's tab panel do: Tab from\nthe tab list lands on the panel's first link or control where there is one,\nand on the panel itself where there is none.\n\n**Set `lazy` for a panel that is expensive to draw.** Its content waits in a\n`<template>` inside it, and goes into the panel the first time the panel is\nshown, so it costs nothing until a reader opens that tab. Once in, it stays.\nThe panel sends `helix-load` at the same moment, for content your code\nrenders itself.",
           "name": "HelixHeadlessTabPanel",
           "cssParts": [
             {
@@ -155669,7 +156152,7 @@
           ],
           "slots": [
             {
-              "description": "The panel's content.",
+              "description": "The panel's content. Under `lazy`, a `<template>` holding it.",
               "name": ""
             }
           ],
@@ -155683,6 +156166,37 @@
               "default": "''",
               "description": "The name of the panel, which is the text of the tab that opens it.\n\nSet by the root, which is the only thing that sees both. No attribute,\nbecause it is coordination between elements rather than anything a consumer\nwrites: the tab already says it.\n\nA string and not a reference: an IDREF resolves only in the tree it is\nwritten in, and the tab's control is inside the tab's shadow root, which no\nreference from the light DOM can reach. `aria-label` on a `tabpanel` is how\nthe pattern names one anyway."
             },
+            {
+              "kind": "field",
+              "name": "lazy",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the panel's content waits in a `<template>` until the panel is\nfirst shown.",
+              "attribute": "lazy"
+            },
+            {
+              "kind": "field",
+              "name": "loaded",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether a `lazy` panel has put its content in."
+            },
+            {
+              "kind": "method",
+              "name": "load",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Puts a `lazy` panel's content in the first time the panel is shown: the\ncontent of each `<template>` it holds, in place of the template."
+            },
             {
               "kind": "field",
               "name": "selected",
@@ -156066,7 +156580,26 @@
               }
             }
           ],
+          "events": [
+            {
+              "type": {
+                "text": "HelixLoadEvent"
+              },
+              "description": "Fired the first time a `lazy` panel is shown, once its template's content is in.",
+              "name": "helix-load",
+              "reactProp": "onhelix-load"
+            }
+          ],
           "attributes": [
+            {
+              "name": "lazy",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the panel's content waits in a `<template>` until the panel is\nfirst shown.",
+              "fieldName": "lazy"
+            },
             {
               "name": "selected",
               "type": {
@@ -156087,6 +156620,10 @@
             }
           ],
           "cssStates": [
+            {
+              "description": "Once a `lazy` panel has been shown and its content is in.",
+              "name": "loaded"
+            },
             {
               "description": "While its tab is the one selected.",
               "name": "selected"
@@ -156147,7 +156684,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Selection works through an event, the same as in the accordion and the tree.\nA tab dispatches `helix-select`, and the root pairs it with the panel of the\nsame value. Nothing registers with anything, so tabs added later work with no\nextra setup.\n\nThe tab list is a single tab stop, and the arrow keys move between tabs\nthrough `KeyboardNavigationController`, the same as in the radio and toggle\ngroups. Selection follows focus, which suits a small set where showing a\npanel is cheap. Set `manual` when showing a panel is expensive, so focus can\nmove without selecting.\n\n`orientation=\"vertical\"` sets the tabs in a column beside the panels, and the\ntab list says `aria-orientation=\"vertical\"`. The arrow keys of both axes move\nbetween tabs either way.\n\nA tab with an `href` is a link, for tabs that are pages of a site. Pressing\nit follows the link. Where any tab is a link, the arrow keys move focus\nwithout choosing on every tab of the list, as under `manual`, so arrowing\npast a tab never leaves the page and the list answers the keys one way.\nMark the tab of the page you are on with `selected`, or set `active` to its\nvalue.\n\nEach tab says which panel it controls through `aria-controls`, set as an\nelement reference to the panel's host, where the engine has reflection.\n\nKeys, on the tab list: Left and Right Arrow move between tabs, and so do Up\nand Down; Home and End go to the first and the last. The horizontal arrows\nfollow the reading direction, so on a right-to-left page Left moves on.\nDisabled tabs are passed over. Tab leaves the list for the selected panel,\nwhich is a tab stop only while it holds nothing focusable.\n\n**Keyboard.**\n\n| Key | What it does |\n|---|---|\n| Right, Down | Moves to the next tab, from the last round to the first. Selects it, unless `manual` is set or a tab is a link. |\n| Left, Up | Moves to the tab before, from the first round to the last. |\n| Home, End | Moves to the first or the last tab. |\n| Enter, Space | Selects the tab with focus, or follows its link. |\n| Tab | Leaves the list for the selected panel. |\n\nRemoving the selected tab selects the first enabled tab that is left, and\n`active` says so, with `helix-activate`. Where the removed tab had focus,\nfocus moves to the tab now selected.\n\n**More tabs than fit.** With `scroll-controls`, a strip that scrolls shows a\nbutton at each end it can scroll toward, as Web Awesome's tab group does,\nand a press scrolls it most of its own length. The buttons are for the\npointer, so they are out of the tab order and hidden from screen readers;\nthe arrow keys already reach every tab, and the strip scrolls the selected\ntab into view. A strip scrolls once a stylesheet gives the `tabs` part an\n`overflow`, as the styled tier does.\n\nA tab with `dismissible` can be closed: see `Tabs.Tab`.\n\nThe `indicator` part moves to the selected tab and carries its place and\nsize, so a mark of your own can be drawn there: style the part, or slot an\nelement into `indicator`, which sits inside the part and reads the same\nproperties.",
+          "description": "Selection works through an event, the same as in the accordion and the tree.\nA tab dispatches `helix-select`, and the root pairs it with the panel of the\nsame value. Nothing registers with anything, so tabs added later work with no\nextra setup.\n\nThe tab list is a single tab stop, and the arrow keys move between tabs\nthrough `KeyboardNavigationController`, the same as in the radio and toggle\ngroups. Selection follows focus, which suits a small set where showing a\npanel is cheap. Set `manual` when showing a panel is expensive, so focus can\nmove without selecting.\n\n`orientation=\"vertical\"` sets the tabs in a column beside the panels, and the\ntab list says `aria-orientation=\"vertical\"`. The arrow keys of both axes move\nbetween tabs either way.\n\nA tab with an `href` is a link, for tabs that are pages of a site. Pressing\nit follows the link. Where any tab is a link, the arrow keys move focus\nwithout choosing on every tab of the list, as under `manual`, so arrowing\npast a tab never leaves the page and the list answers the keys one way.\nMark the tab of the page you are on with `selected`, or set `active` to its\nvalue.\n\nEach tab says which panel it controls through `aria-controls`, set as an\nelement reference to the panel's host, where the engine has reflection.\n\nKeys, on the tab list: Left and Right Arrow move between tabs, and so do Up\nand Down; Home and End go to the first and the last. The horizontal arrows\nfollow the reading direction, so on a right-to-left page Left moves on.\nDisabled tabs are passed over. Tab leaves the list for the selected panel,\nwhich is a tab stop only while it holds nothing focusable.\n\n**Keyboard.**\n\n| Key | What it does |\n|---|---|\n| Right, Down | Moves to the next tab, from the last round to the first. Selects it, unless `manual` is set or a tab is a link. |\n| Left, Up | Moves to the tab before, from the first round to the last. |\n| Home, End | Moves to the first or the last tab. |\n| Enter, Space | Selects the tab with focus, or follows its link. |\n| Tab | Leaves the list for the selected panel. |\n\nRemoving the selected tab selects the enabled tab beside it, the next one\nor else the one before, and `active` says so, with `helix-activate`. Where\nthe removed tab had focus, focus moves to the tab now selected.\n\n**More tabs than fit.** With `scroll-controls`, a strip that scrolls shows a\nbutton at each end it can scroll toward, as Web Awesome's tab group does,\nand a press scrolls it most of its own length. The buttons are for the\npointer, so they are out of the tab order and hidden from screen readers;\nthe arrow keys already reach every tab, and the strip scrolls the selected\ntab into view. A strip scrolls once a stylesheet gives the `tabs` part an\n`overflow`, as the styled tier does.\n\nA tab with `dismissible` can be closed: see `Tabs.Tab`.\n\nThe `indicator` part moves to the selected tab and carries its place and\nsize, so a mark of your own can be drawn there: style the part, or slot an\nelement into `indicator`, which sits inside the part and reads the same\nproperties.",
           "name": "HelixHeadlessTabs",
           "cssParts": [
             {
@@ -156162,10 +156699,18 @@
               "description": "The button that scrolls the strip toward its end, shown under `scroll-controls` while there is more that way.",
               "name": "scroll-end"
             },
+            {
+              "description": "The glyph on that button, where none is slotted.",
+              "name": "scroll-end-mark"
+            },
             {
               "description": "The button that scrolls the strip toward its start, shown under `scroll-controls` while there is more that way.",
               "name": "scroll-start"
             },
+            {
+              "description": "The glyph on that button, where none is slotted.",
+              "name": "scroll-start-mark"
+            },
             {
               "description": "The tab list.",
               "name": "tabs"
@@ -156183,6 +156728,14 @@
             {
               "description": "The panels, as direct children of this element. Panels inside a wrapper are not paired with tabs, because pairing reads only the direct children.",
               "name": "panels"
+            },
+            {
+              "description": "Replaces the glyph on the button that scrolls the strip toward its end.",
+              "name": "scroll-end-icon"
+            },
+            {
+              "description": "Replaces the glyph on the button that scrolls the strip toward its start.",
+              "name": "scroll-start-icon"
             }
           ],
           "members": [
@@ -156362,6 +156915,31 @@
               "default": "[]",
               "description": "The values of the tabs the last pairing read, to tell a removed tab from one not yet here."
             },
+            {
+              "kind": "method",
+              "name": "beside",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "HelixHeadlessTab | undefined"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "gone",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "tabs",
+                  "type": {
+                    "text": "HelixHeadlessTab[]"
+                  }
+                }
+              ],
+              "description": "The enabled tab nearest to where a removed one stood: the next ones\nnearest first, then the ones before it nearest first. The same order a\ndismissed tab hands focus in."
+            },
             {
               "kind": "method",
               "name": "sync",
@@ -156445,7 +157023,26 @@
                   }
                 }
               ],
-              "description": "One of the two scroll buttons, pointing the way it scrolls. A caret along\nthe line is mirrored on a right-to-left page, and one down a column is not."
+              "description": "One of the two scroll buttons, with the glyph pointing the way it scrolls."
+            },
+            {
+              "kind": "method",
+              "name": "renderScrollIcon",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "toward",
+                  "type": {
+                    "text": "1 | -1"
+                  }
+                }
+              ],
+              "description": "The glyph on a scroll button, behind a seam: slot fallback, so a consumer\nreplaces it by slotting, and a method, so a tier above replaces it by\noverriding. A caret along the line is mirrored on a right-to-left page, and\none down a column is not."
             },
             {
               "kind": "field",
@@ -157073,13 +157670,17 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A tab is an element, because it manages selection and its own tab stop.\n\nWith an `href`, the tab is a link: `role=\"tab\"` on an `<a>`, which a press,\nEnter and the browser's own link gestures follow. `helix-select` is sent\nfirst, and canceling it keeps the browser from following, so a client-side\nrouter follows it instead.\n\nWith `dismissible`, the tab can be closed, as Web Awesome's closable tab\ncan: a press on its `dismiss` mark, or Delete or Backspace while the tab\nhas focus, sends `helix-dismiss`. The tab does not remove itself, because\nyour code owns the set, so remove the tab and its panel in your handler.\nFocus moves to the tab beside it, and the tab set selects a tab that is\nleft.\nThe tab says the key through `aria-keyshortcuts`, and the mark is for the\npointer, hidden from screen readers.",
+          "description": "A tab is an element, because it manages selection and its own tab stop.\n\nWith an `href`, the tab is a link: `role=\"tab\"` on an `<a>`, which a press,\nEnter and the browser's own link gestures follow. `helix-select` is sent\nfirst, and canceling it keeps the browser from following, so a client-side\nrouter follows it instead.\n\nWith `dismissible`, the tab can be closed, as Web Awesome's closable tab\ncan: a press on its `dismiss` mark, or Delete or Backspace while the tab\nhas focus, sends `helix-dismiss`. The tab does not remove itself, because\nyour code owns the set, so remove the tab and its panel in your handler.\nFocus moves to the tab beside it, and where the tab was selected, the tab\nset selects that same tab.\nThe tab says the key through `aria-keyshortcuts`, and the mark is for the\npointer, hidden from screen readers.",
           "name": "HelixHeadlessTab",
           "cssParts": [
             {
               "description": "The mark a pointer presses to close a `dismissible` tab.",
               "name": "dismiss"
             },
+            {
+              "description": "The glyph on that mark, where none is slotted.",
+              "name": "dismiss-mark"
+            },
             {
               "description": "The tab itself.",
               "name": "tab"
@@ -157089,6 +157690,10 @@
             {
               "description": "The tab's label.",
               "name": ""
+            },
+            {
+              "description": "Replaces the glyph on the mark that closes a `dismissible` tab.",
+              "name": "dismiss-icon"
             }
           ],
           "members": [
@@ -157287,7 +157892,7 @@
                   "text": "HTMLElement | undefined"
                 }
               },
-              "description": "The tab stop after this element on the page, or the one before it at the\nend, for a lone element whose removal would drop focus to the body.\n\n**A lone Callout or Announcement had nowhere to hand focus**, so a\nkeyboard reader who dismissed one started again from the top of the\npage. React Aria's Toast hands focus on the same way. Read before the\nevent, in the order Tab reaches the stops, while this element's own are\nstill among them.",
+              "description": "The tab stop after this element on the page, or the one before it at the\nend, for an element whose removal would drop focus to the body because\nno neighbor of its kind has a control to take it.\n\n**A lone Callout or Announcement had nowhere to hand focus**, so a\nkeyboard reader who dismissed one started again from the top of the\npage. React Aria's Toast hands focus on the same way. Read before the\nevent, in the order Tab reaches the stops, while this element's own are\nstill among them.",
               "inheritedFrom": {
                 "name": "MixinDismissible",
                 "module": "src/mixins/mixin-dismissible/mixin-dismissible.ts"
@@ -159108,7 +159713,7 @@
                   "text": "HTMLElement | undefined"
                 }
               },
-              "description": "The tab stop after this element on the page, or the one before it at the\nend, for a lone element whose removal would drop focus to the body.\n\n**A lone Callout or Announcement had nowhere to hand focus**, so a\nkeyboard reader who dismissed one started again from the top of the\npage. React Aria's Toast hands focus on the same way. Read before the\nevent, in the order Tab reaches the stops, while this element's own are\nstill among them.",
+              "description": "The tab stop after this element on the page, or the one before it at the\nend, for an element whose removal would drop focus to the body because\nno neighbor of its kind has a control to take it.\n\n**A lone Callout or Announcement had nowhere to hand focus**, so a\nkeyboard reader who dismissed one started again from the top of the\npage. React Aria's Toast hands focus on the same way. Read before the\nevent, in the order Tab reaches the stops, while this element's own are\nstill among them.",
               "inheritedFrom": {
                 "name": "MixinDismissible",
                 "module": "src/mixins/mixin-dismissible/mixin-dismissible.ts"
@@ -169502,7 +170107,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Each message is an element because it has a timeout, a tone, a dismiss\ncontrol, and a lifetime that pauses.\n\n**Each item runs its own timer.** A timer held by the region would restart\nwith each new message, and the last of three messages would stay for nine\nseconds. It pauses while the pointer or focus is on the message, and while\nthe page is hidden, so a message is not spent in a background tab.\n\n**Each message is an `alertdialog` named by its words**, which is how a reader\nwho moves into the stack hears which message they are on. Give it a\n`heading` and a `description`, and the heading names it and the description\ndescribes it, for a message with a title and a line of detail. The region\nsays each message once as it arrives, a `danger` one assertively, so a\nmessage is never a live region of its own.\n\nA touch or a pen swipes a message toward the end of the line, and past\nhalfway, or quickly, dismisses it through the same `helix-dismiss` as its\ncontrol. While it moves, the distance is on the `item` part as\n`--toast-swipe-x`.\n\n**Escape dismisses the message holding focus**, through the same\n`helix-dismiss`, and focus moves to the next message.\n\n**Messages are inverted by default.** The item flips `color-scheme`, so a new\nmessage stands out from the page without using a color that carries meaning.",
+          "description": "Each message is an element because it has a timeout, a tone, a dismiss\ncontrol, and a lifetime that pauses.\n\n**Each item runs its own timer.** A timer held by the region would restart\nwith each new message, and the last of three messages would stay for nine\nseconds. It pauses while the pointer or focus is on the message or anywhere\nin the region's stack, and while the page is hidden, so a message is not\nspent in a background tab.\n\n**Each message is an `alertdialog` named by its words**, which is how a reader\nwho moves into the stack hears which message they are on. Give it a\n`heading` and a `description`, and the heading names it and the description\ndescribes it, for a message with a title and a line of detail. The region\nsays each message once as it arrives, a `danger` one assertively, so a\nmessage is never a live region of its own.\n\nA touch or a pen swipes a message toward the end of the line, or toward the\nedge the region's `swipe-direction` names, and past halfway, or quickly,\ndismisses it through the same `helix-dismiss` as its control. While it\nmoves, the distance is on the `item` part as `--toast-swipe-x` or\n`--toast-swipe-y`.\n\n**Escape dismisses the message holding focus**, through the same\n`helix-dismiss`, and focus moves to the next message.\n\n**Messages are inverted by default.** The item flips `color-scheme`, so a new\nmessage stands out from the page without using a color that carries meaning.",
           "name": "HelixHeadlessToastItem",
           "cssProperties": [
             {
@@ -169512,6 +170117,10 @@
             {
               "description": "How far a swipe has moved the message across, in pixels, toward the right.",
               "name": "--toast-swipe-x"
+            },
+            {
+              "description": "How far a swipe has moved the message down, in pixels, under a `swipe-direction` of `top` or `bottom`.",
+              "name": "--toast-swipe-y"
             }
           ],
           "cssParts": [
@@ -169615,12 +170224,43 @@
               "description": "Whether the message is still showing.\n\nThe item always applies: it goes when it is asked to, having announced\n`helix-dismiss` first, and a consumer who owns the list refuses that event\nto take the decision instead.\n\n**No `default-open`, unlike the four mixins.** A `default-` seed exists so\nmarkup can choose a starting state without claiming ownership, and there is\nonly one starting state that makes sense: a message that has been rendered\nis showing. An attribute whose only legal value is the default is an\nattribute nobody can use.",
               "attribute": "open"
             },
+            {
+              "kind": "field",
+              "name": "regionHolding",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether the timer is held for `regionHeld`, so the hold is let go once."
+            },
+            {
+              "kind": "method",
+              "name": "holdForRegion",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Holds the timer while the region asks, and lets it go once."
+            },
+            {
+              "kind": "field",
+              "name": "swipeTo",
+              "type": {
+                "text": "ReturnType<typeof swipeEdge>"
+              },
+              "privacy": "private",
+              "description": "The physical edge a swipe dismisses toward.",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "swipes",
               "privacy": "protected",
               "readonly": true,
-              "default": "new SwipeController(this, { axis: () => (this.open ? 'x' : undefined), end: (dx, _dy, vx) => { const edge = swipeEdge('end', isRtl(this)) const width = this.partNamed('item')?.getBoundingClientRect().width ?? 0 const shown = settleSwipe({ points: [1], size: width, travel: Math.max(0, towardEdge(edge, dx, 0)), velocity: towardEdge(edge, vx, 0), }) if (shown === 0 && this.dismiss()) { return } this.slide(0) }, move: (dx) => this.slide(Math.max(0, towardEdge(swipeEdge('end', isRtl(this)), dx, 0))), start: (_target, event) => event.pointerType !== 'mouse', surface: () => this.partNamed('item'), })"
+              "default": "new SwipeController(this, { axis: () => (this.open ? swipeAxis(this.swipeTo) : undefined), end: (dx, dy, vx, vy) => { const edge = this.swipeTo const box = this.partNamed('item')?.getBoundingClientRect() const across = swipeAxis(edge) === 'x' const shown = settleSwipe({ points: [1], size: (across ? box?.width : box?.height) ?? 0, travel: Math.max(0, towardEdge(edge, dx, dy)), velocity: towardEdge(edge, vx, vy), }) if (shown === 0 && this.dismiss()) { return } this.slide(0) }, move: (dx, dy) => this.slide(Math.max(0, towardEdge(this.swipeTo, dx, dy))), start: (_target, event) => event.pointerType !== 'mouse', surface: () => this.partNamed('item'), })"
             },
             {
               "kind": "method",
@@ -169639,7 +170279,7 @@
                   }
                 }
               ],
-              "description": "Writes how far a swipe has moved the message toward the end of the line."
+              "description": "Writes how far a swipe has moved the message toward its edge."
             },
             {
               "kind": "field",
@@ -169905,7 +170545,7 @@
                   "text": "HTMLElement | undefined"
                 }
               },
-              "description": "The tab stop after this element on the page, or the one before it at the\nend, for a lone element whose removal would drop focus to the body.\n\n**A lone Callout or Announcement had nowhere to hand focus**, so a\nkeyboard reader who dismissed one started again from the top of the\npage. React Aria's Toast hands focus on the same way. Read before the\nevent, in the order Tab reaches the stops, while this element's own are\nstill among them.",
+              "description": "The tab stop after this element on the page, or the one before it at the\nend, for an element whose removal would drop focus to the body because\nno neighbor of its kind has a control to take it.\n\n**A lone Callout or Announcement had nowhere to hand focus**, so a\nkeyboard reader who dismissed one started again from the top of the\npage. React Aria's Toast hands focus on the same way. Read before the\nevent, in the order Tab reaches the stops, while this element's own are\nstill among them.",
               "inheritedFrom": {
                 "name": "MixinDismissible",
                 "module": "src/mixins/mixin-dismissible/mixin-dismissible.ts"
@@ -170392,7 +171032,7 @@
               "name": "closed"
             },
             {
-              "description": "The dismiss timer is paused, while a pointer or focus is on the message, or while the page is hidden.",
+              "description": "The dismiss timer is paused, while a pointer or focus is on the message or in the stack, or while the page is hidden.",
               "name": "paused"
             },
             {
@@ -170458,7 +171098,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The region and its items are one family because a live region must be in the\ndocument before a message is added to it. Assistive technology often does not\nannounce a region that arrives already holding its message. `Radio.Group` is\npart of its family for the same reason.\n\n**The region is a landmark named by `label`, and it says each message once\nas it arrives**: a `danger` message assertively, and every other one\npolitely. It says the word for the tone, the heading, the description and\nthe text, and not the actions, through two live regions of its own, the\n`live` parts, which it empties again a moment later. The stack itself is not\na live region, so a message is never said twice, and changing the words of a\nmessage already showing says nothing. Each message is an `alertdialog` named\nby its words, so a reader who moves into the stack hears which message they\nare on.\n\n**`hotkey` takes focus to the stack and back**, F8 unless you set it, and\n`label` says which key: `{hotkey}` in it is filled in, so the default name\nis \"Notifications (F8)\". Pressed while focus is in the stack, it gives focus\nback to where it was.\n\n**The region never creates or removes items.** You render items and remove\nthem. An item requests closing with a cancelable `helix-dismiss` event. A\ndismissed item hides itself and stays in the DOM, so your framework's state\nand the DOM stay in sync. It hides on its own unless you set `open`, which\nmakes the state yours.\n\n**`add()` shows a message from script**, for a page with no framework state\nto render them from: it appends a message of the region's own tier and\nremoves it once it has been dismissed and has finished leaving. Messages\nyou render yourself stay yours, and the region never removes them. A touch\nor a pen swipes a message away toward the end of the line.\n\n**The stack is in the top layer.** The `region` part is a `popover=\"manual\"`\nshown while a message is showing, and shown again above a modal dialog that\nopened after it. Position the `region` part, which is the box in the top\nlayer. While a modal `Dialog`, `Drawer` or `Lightbox` is open, the browser\nmakes everything outside it inert, the stack included, so a message stays\nvisible and its actions cannot be pressed. Where the browser has\n`ariaNotify`, a message that arrives then is announced through it. For a\nmessage with an action, render a second region inside the dialog.\n\nWhen a message with focus inside it is dismissed, focus moves to the next\nmessage, then the one before it, then back to where it was before it entered\nthe stack.\n\n**`max-visible` limits how many messages show at once**, as Zag's `max`\ndoes. The messages after that many, in document order, wait: each is hidden,\nits timer has not started, and the region says it once it shows, when a\nmessage before it goes. A waiting message has `:state(waiting)`.\n\n**Keyboard.**\n\n| Key | What it does |\n|---|---|\n| F8, or your `hotkey` | Moves focus to the first control in the stack, and back to where it was when pressed in the stack. |\n| Tab, Shift+Tab | Moves between the controls of the messages. |\n| Escape | Dismisses the message holding focus. Focus moves to the next message, then the one before it, then back to where it was. |",
+          "description": "The region and its items are one family because a live region must be in the\ndocument before a message is added to it. Assistive technology often does not\nannounce a region that arrives already holding its message. `Radio.Group` is\npart of its family for the same reason.\n\n**The region is a landmark named by `label`, and it says each message once\nas it arrives**: a `danger` message assertively, and every other one\npolitely. It says the word for the tone, the heading, the description and\nthe text, and not the actions, through two live regions of its own, the\n`live` parts, which it empties again a moment later. The stack itself is not\na live region, so a message is never said twice, and changing the words of a\nmessage already showing says nothing. Each message is an `alertdialog` named\nby its words, so a reader who moves into the stack hears which message they\nare on.\n\n**`hotkey` takes focus to the stack and back**, F8 unless you set it, and\n`label` says which key: `{hotkey}` in it is filled in, so the default name\nis \"Notifications (F8)\". Pressed while focus is in the stack, it gives focus\nback to where it was.\n\n**The region never creates or removes items.** You render items and remove\nthem. An item requests closing with a cancelable `helix-dismiss` event. A\ndismissed item hides itself and stays in the DOM, so your framework's state\nand the DOM stay in sync. It hides on its own unless you set `open`, which\nmakes the state yours.\n\n**`add()` shows a message from script**, for a page with no framework state\nto render them from: it appends a message of the region's own tier and\nremoves it once it has been dismissed and has finished leaving. Messages\nyou render yourself stay yours, and the region never removes them. A touch\nor a pen swipes a message away toward the end of the line, or toward the\nedge `swipe-direction` names.\n\n**Every message's timer waits while a pointer or focus is in the stack**, as\nReact Aria's and Radix's regions do, so a reader moving from one message to\nthe next does not lose the one behind them.\n\n**The stack is in the top layer.** The `region` part is a `popover=\"manual\"`\nshown while a message is showing, and shown again above a modal dialog that\nopened after it. Position the `region` part, which is the box in the top\nlayer. While a modal `Dialog`, `Drawer` or `Lightbox` is open, the browser\nmakes everything outside it inert, the stack included, so a message stays\nvisible and its actions cannot be pressed. Where the browser has\n`ariaNotify`, a message that arrives then is announced through it. For a\nmessage with an action, render a second region inside the dialog.\n\nWhen a message with focus inside it is dismissed, focus moves to the next\nmessage, then the one before it, then back to where it was before it entered\nthe stack.\n\n**`max-visible` limits how many messages show at once**, as Zag's `max`\ndoes. The messages after that many, in document order, wait: each is hidden,\nits timer has not started, and the region says it once it shows, when a\nmessage before it goes. A waiting message has `:state(waiting)`.\n\n**Keyboard.**\n\n| Key | What it does |\n|---|---|\n| F8, or your `hotkey` | Moves focus to the first control in the stack, and back to where it was when pressed in the stack. |\n| Tab, Shift+Tab | Moves between the controls of the messages. |\n| Escape | Dismisses the message holding focus. Focus moves to the next message, then the one before it, then back to where it was. |",
           "name": "HelixHeadlessToast",
           "cssParts": [
             {
@@ -170529,6 +171169,15 @@
               "attribute": "placement",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "swipeDirection",
+              "type": {
+                "text": "'bottom' | 'end' | 'start' | 'top' | undefined"
+              },
+              "description": "The edge a touch or a pen swipes a message toward to dismiss it: `end`,\nthe end of the line, or `start`, `top` or `bottom`. Unset is `end`.",
+              "attribute": "swipe-direction"
+            },
             {
               "kind": "field",
               "name": "said",
@@ -170704,6 +171353,56 @@
               "description": "The messages that are showing, in order.",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "pointerIn",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether a pointer is over the stack."
+            },
+            {
+              "kind": "field",
+              "name": "focusIn",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether focus is in the stack."
+            },
+            {
+              "kind": "method",
+              "name": "inform",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Tells every message whether the stack holds its timer and which way it\nswipes, which only the region knows."
+            },
+            {
+              "kind": "field",
+              "name": "handlePointerEnter",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "handlePointerLeave",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "handleFocusOut",
+              "privacy": "private",
+              "readonly": true,
+              "description": "Focus leaving the stack, and not moving between its messages."
+            },
             {
               "kind": "field",
               "name": "held",
@@ -171210,6 +171909,14 @@
               },
               "description": "Which corner or edge the stack sits at.\n\nNamed here rather than on each message, because where a page puts its\ntoasts is a fact about the page: a stack whose members disagreed about\nwhere they were would not be a stack.\n\n**Six corners in one word, where `Carousel` splits the same question in\ntwo.** That family takes a placement and an alignment, and argues at its own\ndeclaration that one attribute naming both facts multiplies rather than\ncomposing. It is right there and wrong here, and the difference is the\nshape of the product. A carousel's is ragged: its `overlay` belongs to no\nedge at all, and its two groups of chrome move independently, shipping\ndifferent defaults so they do not land on each other, which is what makes\nrewriting one to move the other a real cost. A stack's is two edges by\nthree alignments, every pair real and every pair named this way by every\ntoast a reader has already met. Fusing spells the domain out and loses\nnothing; a stack has one position and takes it once.\n\n**Optional, and bottom-end is the absence of it.** Reflecting *and*\ndefaulting is the pair that writes onto a host: every toast region anybody\nrendered would gain a `placement=\"bottom-end\"` nobody typed, which a React\nconsumer's server markup does not have. A sheet carries the resting\narrangement in its own `:host` rule and the selectors describe only the\ndepartures, which is what `orientation` does.",
               "fieldName": "placement"
+            },
+            {
+              "name": "swipe-direction",
+              "type": {
+                "text": "'bottom' | 'end' | 'start' | 'top' | undefined"
+              },
+              "description": "The edge a touch or a pen swipes a message toward to dismiss it: `end`,\nthe end of the line, or `start`, `top` or `bottom`. Unset is `end`.",
+              "fieldName": "swipeDirection"
             }
           ],
           "superclass": {
@@ -175862,7 +176569,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The root holds the order of the stops: which stop is current, what Next and\nBack do, and when the tour is finished. Each stop holds its target, and you\nwrite all the text.\n\n**The spotlight is a shadow.** The scrim is a box the size of the current\ntarget with a very large `box-shadow` spread, and the shadow paints the\ndarkness. A `clip-path` on a full-screen scrim breaks as soon as an element\nbetween the scrim and the viewport is transformed.\n\nThe root measures the target's position in the browser. Nothing is measured\non the server, because a tour starts only on request.\n\n`open`, `default-open`, `helix-before-open`, `helix-before-close` and\n`toggle` work as they do on `Dialog`. Setting `open` starts the run, and\n`skip()` and `requestOpen(false)` end it early.\n\nThe box the light falls on is on the `spotlight` part as\n`--tour-spotlight-x`, `--tour-spotlight-y`, `--tour-spotlight-width` and\n`--tour-spotlight-height`, for a sheet that draws its own light, such as a\nring around the target.\n\nEach stop is told its place in the run, from `progress-label`, such as \"2 of\n5\". It describes the stop's panel, so a screen reader says it at every stop,\nand `progress` draws it in the panel as well. A dialog or a floating stop,\nwhich has nothing to light, is shown over the `backdrop` part. At a `wait`\nstop the run waits for that stop's target to be on the page, and moves on by\nitself.\n\n**Focus follows the run.** Opening moves focus to the first stop's panel,\nand moving on from a control in a stop moves it to the next one. Ending the\ntour puts focus back on the element that had it when the tour opened, unless\nyou have moved it somewhere else on the page. A stop does not trap focus, so\nyou can still `Tab` out to the element it describes.\n\n**The target is scrolled into view** before its stop is shown, by the\nleast distance that brings it on screen, so the stop that points at it is\non screen too.\n\n**Keyboard.** Focus is on the current stop's panel, which is not in the\n`Tab` order itself.\n\n| Key | What it does |\n|---|---|\n| Right | Goes to the next stop. On the last stop it does nothing, and Next finishes the tour. |\n| Left | Goes back to the previous stop. |\n| Escape | Skips the tour, and puts focus back where it was when the tour opened. |\n| Tab, Shift+Tab | Moves through the controls in the stop, and on out to the page. A stop does not trap focus. |\n| Enter, Space | On Back, Next, or Skip, presses it. |\n\nThe arrow that points the way the line runs goes on, and the other goes\nback, so on a right-to-left page Left goes on and Right goes back. A text field in a stop keeps\nits own arrows.\n\nThe tour is a region named by `label` while it runs. A development build\nwarns when a tour opens with no `label`.",
+          "description": "The root holds the order of the stops: which stop is current, what Next and\nBack do, and when the tour is finished. Each stop holds its target, and you\nwrite all the text.\n\n**The spotlight is a shadow.** The scrim is a box the size of the current\ntarget with a very large `box-shadow` spread, and the shadow paints the\ndarkness. A `clip-path` on a full-screen scrim breaks as soon as an element\nbetween the scrim and the viewport is transformed.\n\nThe root measures the target's position in the browser. Nothing is measured\non the server, because a tour starts only on request.\n\n`open`, `default-open`, `helix-before-open`, `helix-before-close` and\n`toggle` work as they do on `Dialog`. Setting `open` starts the run, and\n`skip()` and `requestOpen(false)` end it early.\n\nThe box the light falls on is on the `spotlight` part as\n`--tour-spotlight-x`, `--tour-spotlight-y`, `--tour-spotlight-width` and\n`--tour-spotlight-height`, for a sheet that draws its own light, such as a\nring around the target.\n\nEach stop is told its place in the run, from `progress-label`, such as \"2 of\n5\". It describes the stop's panel, so a screen reader says it at every stop,\nand `progress` draws it in the panel as well. A dialog or a floating stop,\nwhich has nothing to light, is shown over the `backdrop` part. At a `wait`\nstop the run waits for that stop's target to be on the page, and moves on by\nitself.\n\n**Focus follows the run.** Opening moves focus to the first stop's panel,\nand moving on from a control in a stop moves it to the next one. Ending the\ntour puts focus back on the element that had it when the tour opened, unless\nyou have moved it somewhere else on the page. A stop does not trap focus, so\nyou can still `Tab` out to the element it describes.\n\n**The target is scrolled into view** before its stop is shown, by the\nleast distance that brings it on screen, so the stop that points at it is\non screen too.\n\n**A stop's `effect` runs as the tour reaches it**, before it is shown, and\nthe stop waits for a promise it returns, with `:state(preparing)` on the\ntour meanwhile. A function it returns runs when the tour leaves the stop.\n\n**A press outside the current stop and its target does nothing by\ndefault**, so a reader can use the page the tour is describing. Set\n`outside-press=\"close\"` to end the tour on one, through `helix-before-close`\nas Skip does, or `outside-press=\"block\"` to refuse it, so the stop and its\ntarget are all a pointer can reach while the tour runs, as Zag's\n`preventInteraction` does.\n\n**Keyboard.** Focus is on the current stop's panel, which is not in the\n`Tab` order itself.\n\n| Key | What it does |\n|---|---|\n| Right | Goes to the next stop. On the last stop it does nothing, and Next finishes the tour. |\n| Left | Goes back to the previous stop. |\n| Escape | Skips the tour, and puts focus back where it was when the tour opened. |\n| Tab, Shift+Tab | Moves through the controls in the stop, and on out to the page. A stop does not trap focus. |\n| Enter, Space | On Back, Next, or Skip, presses it. |\n\nThe arrow that points the way the line runs goes on, and the other goes\nback, so on a right-to-left page Left goes on and Right goes back. A text field in a stop keeps\nits own arrows.\n\nThe tour is a region named by `label` while it runs. A development build\nwarns when a tour opens with no `label`.",
           "name": "HelixHeadlessTour",
           "cssProperties": [
             {
@@ -175978,6 +176685,15 @@
               "description": "Label for the control that goes on.",
               "attribute": "next-label"
             },
+            {
+              "kind": "field",
+              "name": "outsidePress",
+              "type": {
+                "text": "'block' | 'close' | undefined"
+              },
+              "description": "What a press outside the current stop and its target does while the tour\nruns. Unset, nothing: the page stays usable. `close` ends the tour, as\nSkip does, and `block` refuses the press.",
+              "attribute": "outside-press"
+            },
             {
               "kind": "field",
               "name": "progress",
@@ -176178,6 +176894,50 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "handleOutside",
+              "privacy": "private",
+              "readonly": true,
+              "description": "Answers a press outside the current stop and its target, as\n`outside-press` asks. A press on the tour's own parts, the stop or the\ntarget is the reader using the tour."
+            },
+            {
+              "kind": "field",
+              "name": "entered",
+              "type": {
+                "text": "{ leave?: () => void; stop: HelixHeadlessTourStop } | undefined"
+              },
+              "privacy": "private",
+              "description": "The stop whose `effect` has run, and the function to run on leaving it."
+            },
+            {
+              "kind": "field",
+              "name": "preparing",
+              "type": {
+                "text": "HelixHeadlessTourStop | undefined"
+              },
+              "privacy": "private",
+              "description": "The stop held back while its `effect` settles."
+            },
+            {
+              "kind": "method",
+              "name": "enter",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "stop",
+                  "type": {
+                    "text": "HelixHeadlessTourStop | undefined"
+                  }
+                }
+              ],
+              "description": "Runs the current stop's `effect` as the tour reaches it, and the last\none's leaving function as it leaves, and holds the stop back while a\npromise settles."
+            },
             {
               "kind": "field",
               "name": "revealed",
@@ -176940,6 +177700,14 @@
               "description": "Label for the control that goes on.",
               "fieldName": "nextLabel"
             },
+            {
+              "name": "outside-press",
+              "type": {
+                "text": "'block' | 'close' | undefined"
+              },
+              "description": "What a press outside the current stop and its target does while the tour\nruns. Unset, nothing: the page stays usable. `close` ends the tour, as\nSkip does, and `block` refuses the press.",
+              "fieldName": "outsidePress"
+            },
             {
               "name": "progress",
               "type": {
@@ -177007,6 +177775,10 @@
               "description": "While the tour is running.",
               "name": "open"
             },
+            {
+              "description": "While the tour waits for the current stop's `effect` before showing the stop.",
+              "name": "preparing"
+            },
             {
               "description": "While the tour waits at a `wait` stop for its target to be on the page.",
               "name": "waiting"
@@ -177085,7 +177857,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A stop names its target with `for` and holds the content you put in it. The\nstop handles three things:\n\n- **Placement.** The panel is anchored to the target by the same floating\n  positioning as the other Helix overlays.\n- **Stacking.** The panel is a popover, so it is in the top layer and shows\n  above dialogs, scrolling regions, and other stacking contexts.\n- **Visibility.** The stop shows when it is `current`, which the root sets.\n\nPut any content in the stop, such as a `Card`, or a heading and a line of\ntext. The `heading` and `description` slots are optional places for the\ntitle and the line under it, which then name and describe the panel.\n\n**A stop has a type.** Without one it is a bubble pointing at its target.\n`type=\"dialog\"` is a panel in the middle of the window, over a backdrop, for\na welcome or a summary with nothing to point at. `type=\"floating\"` is a\npanel in a corner of the window, which the styled tier puts at the end of\nthe line, for a note that points at nothing in particular. `type=\"wait\"` shows nothing: the tour waits\nfor the element `for` names to be on the page, such as a menu the reader has\nto open, and moves on by itself.\n\n**The buttons are slot fallback.** With nothing in the `actions` slot, you\nget Back, Next, and Skip, already wired. Slot your own `actions` and drive\nthem with `next()`, `back()`, and `skip()` on the root.\n\n**`for` is an id, as with `Tooltip`**, so you can point at a target elsewhere\non the page from markup. It resolves against the stop's root node, so a stop\ninside a shadow tree points at a target in that tree.\n\nThe panel is a `group`, and a `dialog` for a dialog stop, only while the\nstop is shown. It is named by the `heading` slot, then by the first heading\nin the content, then by `label`, and otherwise by its place in the tour. It\nis described by the `description` slot, or where that is empty by the words\nat the start of the content, and by its place, such as \"2 of 5\",\nso a screen reader says where the reader is at every stop. `focus()` moves\nfocus to the panel, which is what the tour does when it opens or moves on.",
+          "description": "A stop names its target with `for` and holds the content you put in it. The\nstop handles three things:\n\n- **Placement.** The panel is anchored to the target by the same floating\n  positioning as the other Helix overlays.\n- **Stacking.** The panel is a popover, so it is in the top layer and shows\n  above dialogs, scrolling regions, and other stacking contexts.\n- **Visibility.** The stop shows when it is `current`, which the root sets.\n\nPut any content in the stop, such as a `Card`, or a heading and a line of\ntext. The `heading` and `description` slots are optional places for the\ntitle and the line under it, which then name and describe the panel.\n\n**A stop has a type.** Without one it is a bubble pointing at its target.\n`type=\"dialog\"` is a panel in the middle of the window, over a backdrop, for\na welcome or a summary with nothing to point at. `type=\"floating\"` is a\npanel in a corner of the window, which the styled tier puts at the end of\nthe line, for a note that points at nothing in particular. `type=\"wait\"` shows nothing: the tour waits\nfor the element `for` names to be on the page, such as a menu the reader has\nto open, and moves on by itself.\n\n**The buttons are slot fallback.** With nothing in the `actions` slot, you\nget Back, Next, and Skip, already wired. Slot your own `actions` and drive\nthem with `next()`, `back()`, and `skip()` on the root.\n\n**Set `effect` to prepare the page for a stop**, such as opening the menu\nit points into or loading what it describes. It is a function, set from\nscript, that the tour runs as it reaches the stop. Return a promise and the\nstop waits for it, and the tour has `:state(preparing)` meanwhile; return a\nfunction, or resolve to one, and the tour runs it when it leaves the stop.\nZag's tour step has the same `effect`.\n\n**`for` is an id, as with `Tooltip`**, so you can point at a target elsewhere\non the page from markup. It resolves against the stop's root node, so a stop\ninside a shadow tree points at a target in that tree.\n\nThe panel is a `group`, and a `dialog` for a dialog stop, only while the\nstop is shown. It is named by the `heading` slot, then by the first heading\nin the content, then by `label`, and otherwise by its place in the tour. It\nis described by the `description` slot, or where that is empty by the words\nat the start of the content, and by its place, such as \"2 of 5\",\nso a screen reader says where the reader is at every stop. `focus()` moves\nfocus to the panel, which is what the tour does when it opens or moves on.",
           "name": "HelixHeadlessTourStop",
           "cssParts": [
             {
@@ -177259,6 +178031,14 @@
                 "words": true
               }
             },
+            {
+              "kind": "field",
+              "name": "effect",
+              "type": {
+                "text": "TourStopEffect | undefined"
+              },
+              "description": "Run as the tour reaches the stop, before it is shown: see the description\nabove. A function, so it is set from script and has no attribute."
+            },
             {
               "kind": "field",
               "name": "first",
@@ -177356,6 +178136,13 @@
               "privacy": "private",
               "description": "The side of its target the panel last landed on, which names the arrow's\nsecond part. Undefined until the first placement, which the server never\nmakes."
             },
+            {
+              "kind": "field",
+              "name": "phases",
+              "privacy": "protected",
+              "readonly": true,
+              "default": "new OpenPhaseController(this, { mark: { entering: (on) => this.toggleState('entering', on), exiting: (on) => this.toggleState('exiting', on), }, open: () => this.current && this.type !== 'wait', surface: () => this.partNamed('bubble'), })"
+            },
             {
               "kind": "field",
               "name": "target",
@@ -177886,6 +178673,14 @@
             }
           ],
           "cssStates": [
+            {
+              "description": "From the moment the stop is shown until its entrance has finished.",
+              "name": "entering"
+            },
+            {
+              "description": "From the moment the stop is left until its exit has finished.",
+              "name": "exiting"
+            },
             {
               "description": "The panel sits below its target.",
               "name": "placed-bottom"
@@ -188728,6 +189523,6 @@
   ],
   "helix": {
     "package": "@fusion.dev/helix-headless",
-    "version": "0.157.0"
+    "version": "0.159.0"
   }
 }