@fusion.dev/helix-headless 0.158.0 → 0.159.0

package/custom-elements.json

@@ -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",
@@ -43308,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",
@@ -77572,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",
@@ -84197,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": [
             {
@@ -84246,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",
@@ -84678,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": [
             {
@@ -85069,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",
@@ -86347,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"
@@ -86444,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": [
             {
@@ -86682,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",
@@ -148972,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": [
             {
@@ -149133,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",
@@ -155815,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": [
             {
@@ -155825,7 +156152,7 @@
           ],
           "slots": [
             {
-              "description": "The panel's content.",
+              "description": "The panel's content. Under `lazy`, a `<template>` holding it.",
               "name": ""
             }
           ],
@@ -155839,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",
@@ -156222,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": {
@@ -156243,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"
@@ -156303,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": [
             {
@@ -156318,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"
@@ -156339,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": [
@@ -156518,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",
@@ -156601,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",
@@ -157229,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"
@@ -157245,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": [
@@ -169658,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": [
             {
@@ -169668,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": [
@@ -169771,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",
@@ -169795,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",
@@ -170548,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"
             },
             {
@@ -170614,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": [
             {
@@ -170685,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",
@@ -170860,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",
@@ -171366,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": {
@@ -176018,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": [
             {
@@ -176134,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",
@@ -176334,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",
@@ -177096,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": {
@@ -177163,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"
@@ -177241,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": [
             {
@@ -177415,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",
@@ -177512,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",
@@ -178042,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"
@@ -188884,6 +189523,6 @@
   ],
   "helix": {
     "package": "@fusion.dev/helix-headless",
-    "version": "0.158.0"
+    "version": "0.159.0"
   }
 }