@fusion.dev/helix-headless 0.158.0 → 0.159.0

package/types/jsx.d.ts

@@ -936,9 +936,18 @@ export type HelixHeadlessAppHeaderElementEvent<E = Event> = TypedEvent<
   HelixHeadlessAppHeader,
   E
 >;
+/** `helix-before-close` event type */
+export type HelixHeadlessAppHeaderHelixBeforeCloseElementEvent =
+  HelixHeadlessAppHeaderElementEvent<HelixBeforeCloseEvent>;
+/** `helix-before-open` event type */
+export type HelixHeadlessAppHeaderHelixBeforeOpenElementEvent =
+  HelixHeadlessAppHeaderElementEvent<HelixBeforeOpenEvent>;
 /** `helix-scrolled` event type */
 export type HelixHeadlessAppHeaderHelixScrolledElementEvent =
   HelixHeadlessAppHeaderElementEvent<HelixScrolledEvent>;
+/** `toggle` event type */
+export type HelixHeadlessAppHeaderToggleElementEvent =
+  HelixHeadlessAppHeaderElementEvent<ToggleEvent>;
 
 export type HelixHeadlessAppHeaderProps = {
   /** Where the middle region sits in the bar.
@@ -988,11 +997,50 @@ page scrolls up. */
   /** The id of the element whose scrolling lifts the bar, for an app shell that
 scrolls a container instead of the window. Unset is the window. */
   scroller?: (HelixHeadlessAppHeader["scroller"]) | undefined;
+  /** Where the toggle that opens a folded middle region sits: at the end of the
+bar, after the trailing content, or with `start`, before the leading
+content.
+
+Optional, so the resting bar writes no attribute onto the host. */
+  "toggle-placement"?: (HelixHeadlessAppHeader["togglePlacement"]) | undefined;
+  /** Where the toggle that opens a folded middle region sits: at the end of the
+bar, after the trailing content, or with `start`, before the leading
+content.
+
+Optional, so the resting bar writes no attribute onto the host. */
+  togglePlacement?: (HelixHeadlessAppHeader["togglePlacement"]) | undefined;
+  /** Whether the element starts open. Ignored once `open` is written. */
+  "default-open"?: (HelixHeadlessAppHeader["defaultOpen"]) | undefined;
+  /** Whether the element starts open. Ignored once `open` is written. */
+  defaultOpen?: (HelixHeadlessAppHeader["defaultOpen"]) | undefined;
+  /** Whether the element is open.
+
+One property, not two, so `dialog.open` answers the question anyone
+asking it meant. Writing always applies; `<helix-dialog open>` is the
+same statement in markup.
+
+**Not reflected, and that is required rather than tidy.** Reflection
+writes the resolved state back as an attribute, so an element that opened
+itself would put `open` on its own host: cloned, serialized for
+hydration, or diffed by a framework, it comes back holding whatever the
+last reader did rather than what the author wrote. `:state(open)` carries
+the resolved state for stylesheets, which is what the mirror is for. */
+  open?: (HelixHeadlessAppHeader["open"]) | undefined;
 
+  /** The folded region is about to close. Cancelable: cancel it to keep it open. */
+  "onhelix-before-close"?: ((
+    e: HelixHeadlessAppHeaderHelixBeforeCloseElementEvent,
+  ) => void) | undefined;
+  /** The folded region is about to open. Cancelable: cancel it to keep it closed. */
+  "onhelix-before-open"?: ((
+    e: HelixHeadlessAppHeaderHelixBeforeOpenElementEvent,
+  ) => void) | undefined;
   /** 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. */
   "onhelix-scrolled"?: ((
     e: HelixHeadlessAppHeaderHelixScrolledElementEvent,
   ) => void) | undefined;
+  /** The folded region opened or closed. The event carries `newState` and `oldState`. */
+  ontoggle?: ((e: HelixHeadlessAppHeaderToggleElementEvent) => void) | undefined;
 };
 
 export type HelixHeadlessAppHeaderSolidJsProps = {
@@ -1043,10 +1091,49 @@ page scrolls up. */
   /** The id of the element whose scrolling lifts the bar, for an app shell that
 scrolls a container instead of the window. Unset is the window. */
   "prop:scroller"?: (HelixHeadlessAppHeader["scroller"]) | undefined;
+  /** Where the toggle that opens a folded middle region sits: at the end of the
+bar, after the trailing content, or with `start`, before the leading
+content.
+
+Optional, so the resting bar writes no attribute onto the host. */
+  "attr:toggle-placement"?: (HelixHeadlessAppHeader["togglePlacement"]) | undefined;
+  /** Where the toggle that opens a folded middle region sits: at the end of the
+bar, after the trailing content, or with `start`, before the leading
+content.
+
+Optional, so the resting bar writes no attribute onto the host. */
+  "prop:togglePlacement"?: (HelixHeadlessAppHeader["togglePlacement"]) | undefined;
+  /** Whether the element starts open. Ignored once `open` is written. */
+  "bool:default-open"?: (HelixHeadlessAppHeader["defaultOpen"]) | undefined;
+  /** Whether the element starts open. Ignored once `open` is written. */
+  "prop:defaultOpen"?: (HelixHeadlessAppHeader["defaultOpen"]) | undefined;
+  /** Whether the element is open.
+
+One property, not two, so `dialog.open` answers the question anyone
+asking it meant. Writing always applies; `<helix-dialog open>` is the
+same statement in markup.
+
+**Not reflected, and that is required rather than tidy.** Reflection
+writes the resolved state back as an attribute, so an element that opened
+itself would put `open` on its own host: cloned, serialized for
+hydration, or diffed by a framework, it comes back holding whatever the
+last reader did rather than what the author wrote. `:state(open)` carries
+the resolved state for stylesheets, which is what the mirror is for. */
+  "prop:open"?: (HelixHeadlessAppHeader["open"]) | undefined;
+  /** The folded region is about to close. Cancelable: cancel it to keep it open. */
+  "on:helix-before-close"?: ((
+    e: HelixHeadlessAppHeaderHelixBeforeCloseElementEvent,
+  ) => void) | undefined;
+  /** The folded region is about to open. Cancelable: cancel it to keep it closed. */
+  "on:helix-before-open"?: ((
+    e: HelixHeadlessAppHeaderHelixBeforeOpenElementEvent,
+  ) => void) | undefined;
   /** 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. */
   "on:helix-scrolled"?: ((
     e: HelixHeadlessAppHeaderHelixScrolledElementEvent,
   ) => void) | undefined;
+  /** The folded region opened or closed. The event carries `newState` and `oldState`. */
+  "on:toggle"?: ((e: HelixHeadlessAppHeaderToggleElementEvent) => void) | undefined;
 
   /** Set the innerHTML of the element */
   innerHTML?: (string) | undefined;
@@ -2317,6 +2404,14 @@ export type HelixHeadlessButtonGroupHelixBeforeChangeElementEvent =
   HelixHeadlessButtonGroupElementEvent<HelixBeforeChangeEvent>;
 
 export type HelixHeadlessButtonGroupProps = {
+  /** Keeps at least one button pressed once one is, as React Aria's
+`disallowEmptySelection`: a press that would leave none pressed is
+refused. */
+  "disallow-empty-selection"?: (HelixHeadlessButtonGroup["disallowEmptySelection"]) | undefined;
+  /** Keeps at least one button pressed once one is, as React Aria's
+`disallowEmptySelection`: a press that would leave none pressed is
+refused. */
+  disallowEmptySelection?: (HelixHeadlessButtonGroup["disallowEmptySelection"]) | undefined;
   /** The group's name, read by screen readers.
 
 On the host through internals, so an author's `aria-label` still overrides
@@ -2368,6 +2463,14 @@ not reflect, as a native control's `value` does not. */
 };
 
 export type HelixHeadlessButtonGroupSolidJsProps = {
+  /** Keeps at least one button pressed once one is, as React Aria's
+`disallowEmptySelection`: a press that would leave none pressed is
+refused. */
+  "bool:disallow-empty-selection"?: (HelixHeadlessButtonGroup["disallowEmptySelection"]) | undefined;
+  /** Keeps at least one button pressed once one is, as React Aria's
+`disallowEmptySelection`: a press that would leave none pressed is
+refused. */
+  "prop:disallowEmptySelection"?: (HelixHeadlessButtonGroup["disallowEmptySelection"]) | undefined;
   /** The group's name, read by screen readers.
 
 On the host through internals, so an author's `aria-label` still overrides
@@ -29059,7 +29162,19 @@ known by its place among the rows as written. */
   textContent?: (string | number) | undefined;
 };
 
+/** `HelixHeadlessTabPanel` component event */
+export type HelixHeadlessTabPanelElementEvent<E = Event> = TypedEvent<
+  HelixHeadlessTabPanel,
+  E
+>;
+/** `helix-load` event type */
+export type HelixHeadlessTabPanelHelixLoadElementEvent =
+  HelixHeadlessTabPanelElementEvent<HelixLoadEvent>;
+
 export type HelixHeadlessTabPanelProps = {
+  /** Whether the panel's content waits in a `<template>` until the panel is
+first shown. */
+  lazy?: (HelixHeadlessTabPanel["lazy"]) | undefined;
   /** Whether this panel is the visible one. */
   selected?: (HelixHeadlessTabPanel["selected"]) | undefined;
   /** Pairs the panel with the tab of the same value. */
@@ -29075,9 +29190,15 @@ written in, and the tab's control is inside the tab's shadow root, which no
 reference from the light DOM can reach. `aria-label` on a `tabpanel` is how
 the pattern names one anyway. */
   label?: (HelixHeadlessTabPanel["label"]) | undefined;
+
+  /** Fired the first time a `lazy` panel is shown, once its template's content is in. */
+  "onhelix-load"?: ((e: HelixHeadlessTabPanelHelixLoadElementEvent) => void) | undefined;
 };
 
 export type HelixHeadlessTabPanelSolidJsProps = {
+  /** Whether the panel's content waits in a `<template>` until the panel is
+first shown. */
+  "prop:lazy"?: (HelixHeadlessTabPanel["lazy"]) | undefined;
   /** Whether this panel is the visible one. */
   "prop:selected"?: (HelixHeadlessTabPanel["selected"]) | undefined;
   /** Pairs the panel with the tab of the same value. */
@@ -29093,6 +29214,8 @@ written in, and the tab's control is inside the tab's shadow root, which no
 reference from the light DOM can reach. `aria-label` on a `tabpanel` is how
 the pattern names one anyway. */
   "prop:label"?: (HelixHeadlessTabPanel["label"]) | undefined;
+  /** Fired the first time a `lazy` panel is shown, once its template's content is in. */
+  "on:helix-load"?: ((e: HelixHeadlessTabPanelHelixLoadElementEvent) => void) | undefined;
 
   /** Set the innerHTML of the element */
   innerHTML?: (string) | undefined;
@@ -31716,6 +31839,12 @@ consumer's server markup does not have. A sheet carries the resting
 arrangement in its own `:host` rule and the selectors describe only the
 departures, which is what `orientation` does. */
   placement?: (HelixHeadlessToast["placement"]) | undefined;
+  /** The edge a touch or a pen swipes a message toward to dismiss it: `end`,
+the end of the line, or `start`, `top` or `bottom`. Unset is `end`. */
+  "swipe-direction"?: (HelixHeadlessToast["swipeDirection"]) | undefined;
+  /** The edge a touch or a pen swipes a message toward to dismiss it: `end`,
+the end of the line, or `start`, `top` or `bottom`. Unset is `end`. */
+  swipeDirection?: (HelixHeadlessToast["swipeDirection"]) | undefined;
 
   /** A message is being dismissed, by its control or by its timer. The message sends it, and you can listen for it on the region. Cancelable: canceling it keeps the message. */
   "onhelix-dismiss"?: ((e: HelixHeadlessToastHelixDismissElementEvent) => void) | undefined;
@@ -31763,6 +31892,12 @@ consumer's server markup does not have. A sheet carries the resting
 arrangement in its own `:host` rule and the selectors describe only the
 departures, which is what `orientation` does. */
   "prop:placement"?: (HelixHeadlessToast["placement"]) | undefined;
+  /** The edge a touch or a pen swipes a message toward to dismiss it: `end`,
+the end of the line, or `start`, `top` or `bottom`. Unset is `end`. */
+  "attr:swipe-direction"?: (HelixHeadlessToast["swipeDirection"]) | undefined;
+  /** The edge a touch or a pen swipes a message toward to dismiss it: `end`,
+the end of the line, or `start`, `top` or `bottom`. Unset is `end`. */
+  "prop:swipeDirection"?: (HelixHeadlessToast["swipeDirection"]) | undefined;
   /** A message is being dismissed, by its control or by its timer. The message sends it, and you can listen for it on the region. Cancelable: canceling it keeps the message. */
   "on:helix-dismiss"?: ((e: HelixHeadlessToastHelixDismissElementEvent) => void) | undefined;
 
@@ -32679,6 +32814,14 @@ The shape is `Carousel`'s, which is the nearest thing in the library: a
   "next-label"?: (HelixHeadlessTour["nextLabel"]) | undefined;
   /** Label for the control that goes on. */
   nextLabel?: (HelixHeadlessTour["nextLabel"]) | undefined;
+  /** What a press outside the current stop and its target does while the tour
+runs. Unset, nothing: the page stays usable. `close` ends the tour, as
+Skip does, and `block` refuses the press. */
+  "outside-press"?: (HelixHeadlessTour["outsidePress"]) | undefined;
+  /** What a press outside the current stop and its target does while the tour
+runs. Unset, nothing: the page stays usable. `close` ends the tour, as
+Skip does, and `block` refuses the press. */
+  outsidePress?: (HelixHeadlessTour["outsidePress"]) | undefined;
   /** Draws each stop's place in the run in its panel, as well as saying it. */
   progress?: (HelixHeadlessTour["progress"]) | undefined;
   /** Each stop's place in the run, with `{index}` and `{count}` filled in and
@@ -32769,6 +32912,14 @@ The shape is `Carousel`'s, which is the nearest thing in the library: a
   "attr:next-label"?: (HelixHeadlessTour["nextLabel"]) | undefined;
   /** Label for the control that goes on. */
   "prop:nextLabel"?: (HelixHeadlessTour["nextLabel"]) | undefined;
+  /** What a press outside the current stop and its target does while the tour
+runs. Unset, nothing: the page stays usable. `close` ends the tour, as
+Skip does, and `block` refuses the press. */
+  "attr:outside-press"?: (HelixHeadlessTour["outsidePress"]) | undefined;
+  /** What a press outside the current stop and its target does while the tour
+runs. Unset, nothing: the page stays usable. `close` ends the tour, as
+Skip does, and `block` refuses the press. */
+  "prop:outsidePress"?: (HelixHeadlessTour["outsidePress"]) | undefined;
   /** Draws each stop's place in the run in its panel, as well as saying it. */
   "prop:progress"?: (HelixHeadlessTour["progress"]) | undefined;
   /** Each stop's place in the run, with `{index}` and `{count}` filled in and
@@ -32887,6 +33038,9 @@ heading. */
 Reflected, because the styled tier places a dialog and a floating panel by
 it, and unset at rest, so no default is written onto the host. */
   type?: (HelixHeadlessTourStop["type"]) | undefined;
+  /** Run as the tour reaches the stop, before it is shown: see the description
+above. A function, so it is set from script and has no attribute. */
+  effect?: (HelixHeadlessTourStop["effect"]) | undefined;
 
   /** Fired when one of the stop's controls is pressed, to move the tour. */
   "onhelix-tour-ask"?: ((
@@ -32939,6 +33093,9 @@ heading. */
 Reflected, because the styled tier places a dialog and a floating panel by
 it, and unset at rest, so no default is written onto the host. */
   "prop:type"?: (HelixHeadlessTourStop["type"]) | undefined;
+  /** Run as the tour reaches the stop, before it is shown: see the description
+above. A function, so it is set from script and has no attribute. */
+  "prop:effect"?: (HelixHeadlessTourStop["effect"]) | undefined;
   /** Fired when one of the stop's controls is pressed, to move the tour. */
   "on:helix-tour-ask"?: ((
     e: HelixHeadlessTourStopHelixTourAskElementEvent,
@@ -35558,12 +35715,21 @@ export type CustomElements = {
    *
    * **Set `fold-below` to fold the middle region on a narrow screen.** Below that
    * many pixels of the bar's own width, the middle region is hidden behind a
-   * toggle at the end of the bar, named by `menu-label`. The toggle says whether
-   * the region is open with `aria-expanded`, and the region opens below the row.
-   * Escape closes it and puts focus back on the toggle. The custom state
-   * `folded` is on the host while the bar is that narrow, and `open` while the
-   * folded region is open. A server serves the bar unfolded, and the browser
-   * folds it once it has measured it.
+   * toggle at the end of the bar, named by `menu-label`, or at its start with
+   * `toggle-placement="start"`. The toggle says whether the region is open with
+   * `aria-expanded`, and the region opens below the row. The region follows the
+   * toggle's region in focus order, so Tab from the toggle at the end goes into
+   * the open region. The custom state `folded` is on the host while the bar is
+   * that narrow, and `open` while the folded region is open. A server serves the
+   * bar unfolded, and the browser folds it once it has measured it.
+   *
+   * **`open` says whether the folded region is open, and setting it opens or
+   * closes the region.** `requestOpen(true)` and `requestOpen(false)` do the same
+   * and send `helix-before-open` or `helix-before-close` first, which you can
+   * cancel, and `toggleOpen()` asks for the opposite. `toggle` follows every
+   * change. The region closes on Escape, which puts focus back on the toggle,
+   * when focus moves to something outside the header, and on a press outside
+   * it. A bar that widens past `fold-below` closes its region.
    *
    * The host is the page's `banner` landmark. Placed inside `main`, `article`,
    * `aside`, `nav` or `section`, it is a plain box instead, as a native
@@ -35598,6 +35764,24 @@ export type CustomElements = {
    * - `menu-label`/`menuLabel`: The name of the toggle that opens a folded middle region.
    * - `scroller`: The id of the element whose scrolling lifts the bar, for an app shell that
    * scrolls a container instead of the window. Unset is the window.
+   * - `toggle-placement`/`togglePlacement`: Where the toggle that opens a folded middle region sits: at the end of the
+   * bar, after the trailing content, or with `start`, before the leading
+   * content.
+   *
+   * Optional, so the resting bar writes no attribute onto the host.
+   * - `default-open`/`defaultOpen`: Whether the element starts open. Ignored once `open` is written.
+   * - `open`: Whether the element is open.
+   *
+   * One property, not two, so `dialog.open` answers the question anyone
+   * asking it meant. Writing always applies; `<helix-dialog open>` is the
+   * same statement in markup.
+   *
+   * **Not reflected, and that is required rather than tidy.** Reflection
+   * writes the resolved state back as an attribute, so an element that opened
+   * itself would put `open` on its own host: cloned, serialized for
+   * hydration, or diffed by a framework, it comes back holding whatever the
+   * last reader did rather than what the author wrote. `:state(open)` carries
+   * the resolved state for stylesheets, which is what the mirror is for.
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -35623,7 +35807,10 @@ export type CustomElements = {
    *
    * Events that will be emitted by the component.
    *
+   * - `helix-before-close`: The folded region is about to close. Cancelable: cancel it to keep it open.
+   * - `helix-before-open`: The folded region is about to open. Cancelable: cancel it to keep it closed.
    * - `helix-scrolled`: 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.
+   * - `toggle`: The folded region opened or closed. The event carries `newState` and `oldState`.
    *
    * ## Slots
    *
@@ -35634,6 +35821,20 @@ export type CustomElements = {
    * - `menu-icon`: Replaces the glyph inside the toggle that opens a folded middle region.
    * - `start`: Leading content, usually a wordmark.
    *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `requestOpen(next: boolean) => boolean`: Requests that the element open or close, and returns whether the change
+   * was applied.
+   *
+   * Announces before it acts, so `preventDefault()` on the `helix-before-open` or
+   * `helix-before-close` is a refusal and nothing moves. Nobody refusing means the
+   * element opens or closes itself, whether or not a consumer declared
+   * `open`: a declared property is a seed and a correction, and a consumer
+   * who wants the decision for themselves refuses it and assigns their own.
+   * - `toggleOpen() => boolean`: Requests the opposite of the current state.
+   *
    * ## CSS Parts
    *
    * Custom selectors for styling elements within the component.
@@ -37018,11 +37219,15 @@ export type CustomElements = {
    * appearance and size.
    *
    * **Buttons that stay pressed.** With `selection-mode`, each button with a
-   * `value` is a toggle button: a press presses or releases it, and it says so
-   * with `aria-pressed`. `single` keeps one pressed at a time, and a press on the
-   * pressed one releases it. `multiple` lets any number be pressed. `value` is
-   * the pressed values, comma separated. A press sends a cancelable
-   * `helix-before-change` with the value it would leave, then `change`.
+   * `value` is a toggle button: a press presses or releases it. `multiple` lets
+   * any number be pressed, and each button says so with `aria-pressed`. `single`
+   * keeps one pressed at a time: the group is a `radiogroup` and each button a
+   * `radio` that says so with `aria-checked`, as React Aria's toggle button
+   * group is. A press on the pressed one releases it, unless
+   * `disallow-empty-selection` keeps one pressed. `value` is the pressed values,
+   * comma separated. A press sends a cancelable `helix-before-change` with the
+   * value it would leave, then `change`. A pressed Helix button has
+   * `:state(pressed)` on its own element.
    *
    * The pressed state is written on the control inside each button's shadow
    * root, so the markup you rendered is never changed and a framework hydrating
@@ -37050,15 +37255,18 @@ export type CustomElements = {
    * | Space, Enter | Presses or releases the focused button. |
    *
    * Left and Right swap on a right-to-left page, and a disabled button is
-   * passed over. In a selection mode the group is a `toolbar`, with
+   * passed over. Under `multiple` the group is a `toolbar`, with
    * `aria-orientation` under `orientation="vertical"`. Inside a toolbar it stays
    * a named `group`, and the toolbar's own arrow keys walk its buttons, so a
-   * reader meets one toolbar.
+   * reader meets one toolbar. Under `single` it is a `radiogroup` either way.
    *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
+   * - `disallow-empty-selection`/`disallowEmptySelection`: Keeps at least one button pressed once one is, as React Aria's
+   * `disallowEmptySelection`: a press that would leave none pressed is
+   * refused.
    * - `label`: The group's name, read by screen readers.
    *
    * On the host through internals, so an author's `aria-label` still overrides
@@ -37426,6 +37634,7 @@ export type CustomElements = {
    * These can be used to apply styling when a component is in a given state.
    *
    * - `pending`: The button is pending: `pending` is set.
+   * - `pressed`: A Button Group in a selection mode has this button pressed.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
   "helix-headless-button": Partial<
@@ -41607,6 +41816,7 @@ export type CustomElements = {
    * - `copied`: The moment after a successful copy, while `copied-label` names the button.
    * - `failed`: The moment after a press that put nothing on the clipboard, while `error-label` names the button.
    * - `pending`: The button is pending: `pending` is set.
+   * - `pressed`: A Button Group in a selection mode has this button pressed.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
   "helix-headless-copy-button": Partial<
@@ -46632,6 +46842,7 @@ export type CustomElements = {
    * These can be used to apply styling when a component is in a given state.
    *
    * - `pending`: The button is pending: `pending` is set.
+   * - `pressed`: A Button Group in a selection mode has this button pressed.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
   "helix-headless-icon-button": Partial<
@@ -47518,7 +47729,8 @@ export type CustomElements = {
    * Each item is a `group` with the role description `slide`, named by its
    * `label` or, without one, by its place in the set, such as "2 of 5", as the
    * APG carousel pattern names a slide. The lightbox supplies both words, so they
-   * are translated on the lightbox.
+   * are translated on the lightbox. A `description`, while there is one,
+   * describes the group, so a screen reader says it with the name.
    *
    * An item that is not current is hidden and stays in the DOM, as a `TabPanel`
    * does. Crawlers can read it, it is in the server-rendered markup, and an
@@ -47602,9 +47814,10 @@ export type CustomElements = {
    * buttons that send `--previous`, `--next` and `--close`.
    *
    * **Set `max-zoom` to let a reader zoom into the shown item**, such as `3`.
-   * Two fingers pinch it, a double click or a double tap zooms all the way in
-   * about the point pressed and back out, and once zoomed one pointer drags it
-   * about. `+` and `-` zoom in and out from the keyboard, and `0` puts it back.
+   * Two fingers pinch it, and so does a trackpad pinch or the wheel with Ctrl
+   * held, about the point under the pointer. A double click or a double tap
+   * zooms all the way in about the point pressed and back out, and once zoomed
+   * one pointer drags it about and the wheel moves it. `+` and `-` zoom in and out from the keyboard, and `0` puts it back.
    * The scale and the offset are on the `viewport` part as `--lightbox-zoom`,
    * `--lightbox-pan-x` and `--lightbox-pan-y`, written only while zoomed, and a
    * swipe moves to the next item only while the item is at its own size. With
@@ -47825,6 +48038,8 @@ export type CustomElements = {
    *
    * These can be used to apply styling when a component is in a given state.
    *
+   * - `entering`: From the moment the viewer opens until its entrance has finished.
+   * - `exiting`: From the moment the viewer closes until its exit has finished.
    * - `fullscreen`: While the viewer fills the screen.
    * - `idle`: The user has been still long enough for the controls to hide.
    * - `open`: While the viewer is open.
@@ -57275,6 +57490,10 @@ export type CustomElements = {
    * region. The current stage's button carries `aria-current="step"`, and only
    * the button, so the state is said once, on the control.
    *
+   * A stage's `content`, while it holds anything, is a group named by the
+   * stage's name, so a screen reader moving into it hears which stage it
+   * belongs to.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -58321,10 +58540,18 @@ export type CustomElements = {
    * the tab list lands on the panel's first link or control where there is one,
    * and on the panel itself where there is none.
    *
+   * **Set `lazy` for a panel that is expensive to draw.** Its content waits in a
+   * `<template>` inside it, and goes into the panel the first time the panel is
+   * shown, so it costs nothing until a reader opens that tab. Once in, it stays.
+   * The panel sends `helix-load` at the same moment, for content your code
+   * renders itself.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
+   * - `lazy`: Whether the panel's content waits in a `<template>` until the panel is
+   * first shown.
    * - `selected`: Whether this panel is the visible one.
    * - `value`: Pairs the panel with the tab of the same value.
    * - `label`: The name of the panel, which is the text of the tab that opens it.
@@ -58358,11 +58585,17 @@ export type CustomElements = {
    * browser harness's awaits it alone: a browser always runs the frame, and a
    * timer beside it was a bet on how long one takes, which a busy run lost. (property only) (readonly)
    *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `helix-load`: Fired the first time a `lazy` panel is shown, once its template's content is in.
+   *
    * ## Slots
    *
    * Areas where markup can be added to the component.
    *
-   * - `(default)`: The panel's content.
+   * - `(default)`: The panel's content. Under `lazy`, a `<template>` holding it.
    *
    * ## CSS Parts
    *
@@ -58374,6 +58607,7 @@ export type CustomElements = {
    *
    * These can be used to apply styling when a component is in a given state.
    *
+   * - `loaded`: Once a `lazy` panel has been shown and its content is in.
    * - `selected`: While its tab is the one selected.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
@@ -58423,9 +58657,9 @@ export type CustomElements = {
    * | Enter, Space | Selects the tab with focus, or follows its link. |
    * | Tab | Leaves the list for the selected panel. |
    *
-   * Removing the selected tab selects the first enabled tab that is left, and
-   * `active` says so, with `helix-activate`. Where the removed tab had focus,
-   * focus moves to the tab now selected.
+   * Removing the selected tab selects the enabled tab beside it, the next one
+   * or else the one before, and `active` says so, with `helix-activate`. Where
+   * the removed tab had focus, focus moves to the tab now selected.
    *
    * **More tabs than fit.** With `scroll-controls`, a strip that scrolls shows a
    * button at each end it can scroll toward, as Web Awesome's tab group does,
@@ -58531,6 +58765,8 @@ export type CustomElements = {
    * - `(default)`: The tabs, as direct children of this element.
    * - `indicator`: A mark of your own, drawn inside the `indicator` part, where `--indicator-x`, `--indicator-y`, `--indicator-inline-size` and `--indicator-block-size` reach it.
    * - `panels`: The panels, as direct children of this element. Panels inside a wrapper are not paired with tabs, because pairing reads only the direct children.
+   * - `scroll-end-icon`: Replaces the glyph on the button that scrolls the strip toward its end.
+   * - `scroll-start-icon`: Replaces the glyph on the button that scrolls the strip toward its start.
    *
    * ## Methods
    *
@@ -58552,7 +58788,9 @@ export type CustomElements = {
    * - `indicator`: The marker that moves to the selected tab. It carries the selected tab's place and size as `--indicator-x`, `--indicator-y`, `--indicator-inline-size` and `--indicator-block-size`, and `data-placed` once it has been placed, for a mark you draw and animate yourself.
    * - `panels`: The panel container.
    * - `scroll-end`: The button that scrolls the strip toward its end, shown under `scroll-controls` while there is more that way.
+   * - `scroll-end-mark`: The glyph on that button, where none is slotted.
    * - `scroll-start`: The button that scrolls the strip toward its start, shown under `scroll-controls` while there is more that way.
+   * - `scroll-start-mark`: The glyph on that button, where none is slotted.
    * - `tabs`: The tab list.
    *
    * ## CSS States
@@ -58577,8 +58815,8 @@ export type CustomElements = {
    * can: a press on its `dismiss` mark, or Delete or Backspace while the tab
    * has focus, sends `helix-dismiss`. The tab does not remove itself, because
    * your code owns the set, so remove the tab and its panel in your handler.
-   * Focus moves to the tab beside it, and the tab set selects a tab that is
-   * left.
+   * Focus moves to the tab beside it, and where the tab was selected, the tab
+   * set selects that same tab.
    * The tab says the key through `aria-keyshortcuts`, and the mark is for the
    * pointer, hidden from screen readers.
    *
@@ -58635,6 +58873,7 @@ export type CustomElements = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: The tab's label.
+   * - `dismiss-icon`: Replaces the glyph on the mark that closes a `dismissible` tab.
    *
    * ## Methods
    *
@@ -58659,6 +58898,7 @@ export type CustomElements = {
    * Custom selectors for styling elements within the component.
    *
    * - `dismiss`: The mark a pointer presses to close a `dismissible` tab.
+   * - `dismiss-mark`: The glyph on that mark, where none is slotted.
    * - `tab`: The tab itself.
    *
    * ## CSS States
@@ -60277,8 +60517,9 @@ export type CustomElements = {
    *
    * **Each item runs its own timer.** A timer held by the region would restart
    * with each new message, and the last of three messages would stay for nine
-   * seconds. It pauses while the pointer or focus is on the message, and while
-   * the page is hidden, so a message is not spent in a background tab.
+   * seconds. It pauses while the pointer or focus is on the message or anywhere
+   * in the region's stack, and while the page is hidden, so a message is not
+   * spent in a background tab.
    *
    * **Each message is an `alertdialog` named by its words**, which is how a reader
    * who moves into the stack hears which message they are on. Give it a
@@ -60287,10 +60528,11 @@ export type CustomElements = {
    * says each message once as it arrives, a `danger` one assertively, so a
    * message is never a live region of its own.
    *
-   * A touch or a pen swipes a message toward the end of the line, and past
-   * halfway, or quickly, dismisses it through the same `helix-dismiss` as its
-   * control. While it moves, the distance is on the `item` part as
-   * `--toast-swipe-x`.
+   * A touch or a pen swipes a message toward the end of the line, or toward the
+   * edge the region's `swipe-direction` names, and past halfway, or quickly,
+   * dismisses it through the same `helix-dismiss` as its control. While it
+   * moves, the distance is on the `item` part as `--toast-swipe-x` or
+   * `--toast-swipe-y`.
    *
    * **Escape dismisses the message holding focus**, through the same
    * `helix-dismiss`, and focus moves to the next message.
@@ -60392,6 +60634,7 @@ export type CustomElements = {
    *
    * - `--toast-duration`: How long this message stays, in milliseconds, for a progress hint.
    * - `--toast-swipe-x`: How far a swipe has moved the message across, in pixels, toward the right.
+   * - `--toast-swipe-y`: How far a swipe has moved the message down, in pixels, under a `swipe-direction` of `top` or `bottom`.
    *
    * ## CSS Parts
    *
@@ -60413,7 +60656,7 @@ export type CustomElements = {
    * These can be used to apply styling when a component is in a given state.
    *
    * - `closed`: The message has been dismissed and is hidden, or leaving.
-   * - `paused`: The dismiss timer is paused, while a pointer or focus is on the message, or while the page is hidden.
+   * - `paused`: The dismiss timer is paused, while a pointer or focus is on the message or in the stack, or while the page is hidden.
    * - `waiting`: The region holds the message back, past its `max-visible`, until a message before it goes.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
@@ -60452,7 +60695,12 @@ export type CustomElements = {
    * to render them from: it appends a message of the region's own tier and
    * removes it once it has been dismissed and has finished leaving. Messages
    * you render yourself stay yours, and the region never removes them. A touch
-   * or a pen swipes a message away toward the end of the line.
+   * or a pen swipes a message away toward the end of the line, or toward the
+   * edge `swipe-direction` names.
+   *
+   * **Every message's timer waits while a pointer or focus is in the stack**, as
+   * React Aria's and Radix's regions do, so a reader moving from one message to
+   * the next does not lose the one behind them.
    *
    * **The stack is in the top layer.** The `region` part is a `popover="manual"`
    * shown while a message is showing, and shown again above a modal dialog that
@@ -60517,6 +60765,8 @@ export type CustomElements = {
    * consumer's server markup does not have. A sheet carries the resting
    * arrangement in its own `:host` rule and the selectors describe only the
    * departures, which is what `orientation` does.
+   * - `swipe-direction`/`swipeDirection`: The edge a touch or a pen swipes a message toward to dismiss it: `end`,
+   * the end of the line, or `start`, `top` or `bottom`. Unset is `end`.
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -61385,6 +61635,17 @@ export type CustomElements = {
    * least distance that brings it on screen, so the stop that points at it is
    * on screen too.
    *
+   * **A stop's `effect` runs as the tour reaches it**, before it is shown, and
+   * the stop waits for a promise it returns, with `:state(preparing)` on the
+   * tour meanwhile. A function it returns runs when the tour leaves the stop.
+   *
+   * **A press outside the current stop and its target does nothing by
+   * default**, so a reader can use the page the tour is describing. Set
+   * `outside-press="close"` to end the tour on one, through `helix-before-close`
+   * as Skip does, or `outside-press="block"` to refuse it, so the stop and its
+   * target are all a pointer can reach while the tour runs, as Zag's
+   * `preventInteraction` does.
+   *
    * **Keyboard.** Focus is on the current stop's panel, which is not in the
    * `Tab` order itself.
    *
@@ -61422,6 +61683,9 @@ export type CustomElements = {
    * `undefined` until somebody sets one.
    * - `label`: The tour's name, read by screen readers, such as "Getting started".
    * - `next-label`/`nextLabel`: Label for the control that goes on.
+   * - `outside-press`/`outsidePress`: What a press outside the current stop and its target does while the tour
+   * runs. Unset, nothing: the page stays usable. `close` ends the tour, as
+   * Skip does, and `block` refuses the press.
    * - `progress`: Draws each stop's place in the run in its panel, as well as saying it.
    * - `progress-label`/`progressLabel`: Each stop's place in the run, with `{index}` and `{count}` filled in and
    * written in the locale. Translate it with the rest of your text.
@@ -61525,6 +61789,7 @@ export type CustomElements = {
    * These can be used to apply styling when a component is in a given state.
    *
    * - `open`: While the tour is running.
+   * - `preparing`: While the tour waits for the current stop's `effect` before showing the stop.
    * - `waiting`: While the tour waits at a `wait` stop for its target to be on the page.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
@@ -61558,6 +61823,13 @@ export type CustomElements = {
    * get Back, Next, and Skip, already wired. Slot your own `actions` and drive
    * them with `next()`, `back()`, and `skip()` on the root.
    *
+   * **Set `effect` to prepare the page for a stop**, such as opening the menu
+   * it points into or loading what it describes. It is a function, set from
+   * script, that the tour runs as it reaches the stop. Return a promise and the
+   * stop waits for it, and the tour has `:state(preparing)` meanwhile; return a
+   * function, or resolve to one, and the tour runs it when it leaves the stop.
+   * Zag's tour step has the same `effect`.
+   *
    * **`for` is an id, as with `Tooltip`**, so you can point at a target elsewhere
    * on the page from markup. It resolves against the stop's root node, so a stop
    * inside a shadow tree points at a target in that tree.
@@ -61599,6 +61871,8 @@ export type CustomElements = {
    *
    * Reflected, because the styled tier places a dialog and a floating panel by
    * it, and unset at rest, so no default is written onto the host.
+   * - `effect`: Run as the tour reaches the stop, before it is shown: see the description
+   * above. A function, so it is set from script and has no attribute. (property only)
    * - `target`: The element the stop points at, or `null` when no element has the `for` id. (property only) (readonly)
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
@@ -61681,6 +61955,8 @@ export type CustomElements = {
    *
    * These can be used to apply styling when a component is in a given state.
    *
+   * - `entering`: From the moment the stop is shown until its entrance has finished.
+   * - `exiting`: From the moment the stop is left until its exit has finished.
    * - `placed-bottom`: The panel sits below its target.
    * - `placed-left`: The panel sits to the left of its target.
    * - `placed-right`: The panel sits to the right of its target.
@@ -63729,12 +64005,21 @@ export type CustomElementsSolidJs = {
    *
    * **Set `fold-below` to fold the middle region on a narrow screen.** Below that
    * many pixels of the bar's own width, the middle region is hidden behind a
-   * toggle at the end of the bar, named by `menu-label`. The toggle says whether
-   * the region is open with `aria-expanded`, and the region opens below the row.
-   * Escape closes it and puts focus back on the toggle. The custom state
-   * `folded` is on the host while the bar is that narrow, and `open` while the
-   * folded region is open. A server serves the bar unfolded, and the browser
-   * folds it once it has measured it.
+   * toggle at the end of the bar, named by `menu-label`, or at its start with
+   * `toggle-placement="start"`. The toggle says whether the region is open with
+   * `aria-expanded`, and the region opens below the row. The region follows the
+   * toggle's region in focus order, so Tab from the toggle at the end goes into
+   * the open region. The custom state `folded` is on the host while the bar is
+   * that narrow, and `open` while the folded region is open. A server serves the
+   * bar unfolded, and the browser folds it once it has measured it.
+   *
+   * **`open` says whether the folded region is open, and setting it opens or
+   * closes the region.** `requestOpen(true)` and `requestOpen(false)` do the same
+   * and send `helix-before-open` or `helix-before-close` first, which you can
+   * cancel, and `toggleOpen()` asks for the opposite. `toggle` follows every
+   * change. The region closes on Escape, which puts focus back on the toggle,
+   * when focus moves to something outside the header, and on a press outside
+   * it. A bar that widens past `fold-below` closes its region.
    *
    * The host is the page's `banner` landmark. Placed inside `main`, `article`,
    * `aside`, `nav` or `section`, it is a plain box instead, as a native
@@ -63769,6 +64054,24 @@ export type CustomElementsSolidJs = {
    * - `menu-label`/`menuLabel`: The name of the toggle that opens a folded middle region.
    * - `scroller`: The id of the element whose scrolling lifts the bar, for an app shell that
    * scrolls a container instead of the window. Unset is the window.
+   * - `toggle-placement`/`togglePlacement`: Where the toggle that opens a folded middle region sits: at the end of the
+   * bar, after the trailing content, or with `start`, before the leading
+   * content.
+   *
+   * Optional, so the resting bar writes no attribute onto the host.
+   * - `default-open`/`defaultOpen`: Whether the element starts open. Ignored once `open` is written.
+   * - `open`: Whether the element is open.
+   *
+   * One property, not two, so `dialog.open` answers the question anyone
+   * asking it meant. Writing always applies; `<helix-dialog open>` is the
+   * same statement in markup.
+   *
+   * **Not reflected, and that is required rather than tidy.** Reflection
+   * writes the resolved state back as an attribute, so an element that opened
+   * itself would put `open` on its own host: cloned, serialized for
+   * hydration, or diffed by a framework, it comes back holding whatever the
+   * last reader did rather than what the author wrote. `:state(open)` carries
+   * the resolved state for stylesheets, which is what the mirror is for.
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -63794,7 +64097,10 @@ export type CustomElementsSolidJs = {
    *
    * Events that will be emitted by the component.
    *
+   * - `helix-before-close`: The folded region is about to close. Cancelable: cancel it to keep it open.
+   * - `helix-before-open`: The folded region is about to open. Cancelable: cancel it to keep it closed.
    * - `helix-scrolled`: 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.
+   * - `toggle`: The folded region opened or closed. The event carries `newState` and `oldState`.
    *
    * ## Slots
    *
@@ -63805,6 +64111,20 @@ export type CustomElementsSolidJs = {
    * - `menu-icon`: Replaces the glyph inside the toggle that opens a folded middle region.
    * - `start`: Leading content, usually a wordmark.
    *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `requestOpen(next: boolean) => boolean`: Requests that the element open or close, and returns whether the change
+   * was applied.
+   *
+   * Announces before it acts, so `preventDefault()` on the `helix-before-open` or
+   * `helix-before-close` is a refusal and nothing moves. Nobody refusing means the
+   * element opens or closes itself, whether or not a consumer declared
+   * `open`: a declared property is a seed and a correction, and a consumer
+   * who wants the decision for themselves refuses it and assigns their own.
+   * - `toggleOpen() => boolean`: Requests the opposite of the current state.
+   *
    * ## CSS Parts
    *
    * Custom selectors for styling elements within the component.
@@ -65208,11 +65528,15 @@ export type CustomElementsSolidJs = {
    * appearance and size.
    *
    * **Buttons that stay pressed.** With `selection-mode`, each button with a
-   * `value` is a toggle button: a press presses or releases it, and it says so
-   * with `aria-pressed`. `single` keeps one pressed at a time, and a press on the
-   * pressed one releases it. `multiple` lets any number be pressed. `value` is
-   * the pressed values, comma separated. A press sends a cancelable
-   * `helix-before-change` with the value it would leave, then `change`.
+   * `value` is a toggle button: a press presses or releases it. `multiple` lets
+   * any number be pressed, and each button says so with `aria-pressed`. `single`
+   * keeps one pressed at a time: the group is a `radiogroup` and each button a
+   * `radio` that says so with `aria-checked`, as React Aria's toggle button
+   * group is. A press on the pressed one releases it, unless
+   * `disallow-empty-selection` keeps one pressed. `value` is the pressed values,
+   * comma separated. A press sends a cancelable `helix-before-change` with the
+   * value it would leave, then `change`. A pressed Helix button has
+   * `:state(pressed)` on its own element.
    *
    * The pressed state is written on the control inside each button's shadow
    * root, so the markup you rendered is never changed and a framework hydrating
@@ -65240,15 +65564,18 @@ export type CustomElementsSolidJs = {
    * | Space, Enter | Presses or releases the focused button. |
    *
    * Left and Right swap on a right-to-left page, and a disabled button is
-   * passed over. In a selection mode the group is a `toolbar`, with
+   * passed over. Under `multiple` the group is a `toolbar`, with
    * `aria-orientation` under `orientation="vertical"`. Inside a toolbar it stays
    * a named `group`, and the toolbar's own arrow keys walk its buttons, so a
-   * reader meets one toolbar.
+   * reader meets one toolbar. Under `single` it is a `radiogroup` either way.
    *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
+   * - `disallow-empty-selection`/`disallowEmptySelection`: Keeps at least one button pressed once one is, as React Aria's
+   * `disallowEmptySelection`: a press that would leave none pressed is
+   * refused.
    * - `label`: The group's name, read by screen readers.
    *
    * On the host through internals, so an author's `aria-label` still overrides
@@ -65617,6 +65944,7 @@ export type CustomElementsSolidJs = {
    * These can be used to apply styling when a component is in a given state.
    *
    * - `pending`: The button is pending: `pending` is set.
+   * - `pressed`: A Button Group in a selection mode has this button pressed.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
   "helix-headless-button": Partial<
@@ -69838,6 +70166,7 @@ export type CustomElementsSolidJs = {
    * - `copied`: The moment after a successful copy, while `copied-label` names the button.
    * - `failed`: The moment after a press that put nothing on the clipboard, while `error-label` names the button.
    * - `pending`: The button is pending: `pending` is set.
+   * - `pressed`: A Button Group in a selection mode has this button pressed.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
   "helix-headless-copy-button": Partial<
@@ -74905,6 +75234,7 @@ export type CustomElementsSolidJs = {
    * These can be used to apply styling when a component is in a given state.
    *
    * - `pending`: The button is pending: `pending` is set.
+   * - `pressed`: A Button Group in a selection mode has this button pressed.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
   "helix-headless-icon-button": Partial<
@@ -75807,7 +76137,8 @@ export type CustomElementsSolidJs = {
    * Each item is a `group` with the role description `slide`, named by its
    * `label` or, without one, by its place in the set, such as "2 of 5", as the
    * APG carousel pattern names a slide. The lightbox supplies both words, so they
-   * are translated on the lightbox.
+   * are translated on the lightbox. A `description`, while there is one,
+   * describes the group, so a screen reader says it with the name.
    *
    * An item that is not current is hidden and stays in the DOM, as a `TabPanel`
    * does. Crawlers can read it, it is in the server-rendered markup, and an
@@ -75892,9 +76223,10 @@ export type CustomElementsSolidJs = {
    * buttons that send `--previous`, `--next` and `--close`.
    *
    * **Set `max-zoom` to let a reader zoom into the shown item**, such as `3`.
-   * Two fingers pinch it, a double click or a double tap zooms all the way in
-   * about the point pressed and back out, and once zoomed one pointer drags it
-   * about. `+` and `-` zoom in and out from the keyboard, and `0` puts it back.
+   * Two fingers pinch it, and so does a trackpad pinch or the wheel with Ctrl
+   * held, about the point under the pointer. A double click or a double tap
+   * zooms all the way in about the point pressed and back out, and once zoomed
+   * one pointer drags it about and the wheel moves it. `+` and `-` zoom in and out from the keyboard, and `0` puts it back.
    * The scale and the offset are on the `viewport` part as `--lightbox-zoom`,
    * `--lightbox-pan-x` and `--lightbox-pan-y`, written only while zoomed, and a
    * swipe moves to the next item only while the item is at its own size. With
@@ -76115,6 +76447,8 @@ export type CustomElementsSolidJs = {
    *
    * These can be used to apply styling when a component is in a given state.
    *
+   * - `entering`: From the moment the viewer opens until its entrance has finished.
+   * - `exiting`: From the moment the viewer closes until its exit has finished.
    * - `fullscreen`: While the viewer fills the screen.
    * - `idle`: The user has been still long enough for the controls to hide.
    * - `open`: While the viewer is open.
@@ -85692,6 +86026,10 @@ export type CustomElementsSolidJs = {
    * region. The current stage's button carries `aria-current="step"`, and only
    * the button, so the state is said once, on the control.
    *
+   * A stage's `content`, while it holds anything, is a group named by the
+   * stage's name, so a screen reader moving into it hears which stage it
+   * belongs to.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -86754,10 +87092,18 @@ export type CustomElementsSolidJs = {
    * the tab list lands on the panel's first link or control where there is one,
    * and on the panel itself where there is none.
    *
+   * **Set `lazy` for a panel that is expensive to draw.** Its content waits in a
+   * `<template>` inside it, and goes into the panel the first time the panel is
+   * shown, so it costs nothing until a reader opens that tab. Once in, it stays.
+   * The panel sends `helix-load` at the same moment, for content your code
+   * renders itself.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
+   * - `lazy`: Whether the panel's content waits in a `<template>` until the panel is
+   * first shown.
    * - `selected`: Whether this panel is the visible one.
    * - `value`: Pairs the panel with the tab of the same value.
    * - `label`: The name of the panel, which is the text of the tab that opens it.
@@ -86791,11 +87137,17 @@ export type CustomElementsSolidJs = {
    * browser harness's awaits it alone: a browser always runs the frame, and a
    * timer beside it was a bet on how long one takes, which a busy run lost. (property only) (readonly)
    *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `helix-load`: Fired the first time a `lazy` panel is shown, once its template's content is in.
+   *
    * ## Slots
    *
    * Areas where markup can be added to the component.
    *
-   * - `(default)`: The panel's content.
+   * - `(default)`: The panel's content. Under `lazy`, a `<template>` holding it.
    *
    * ## CSS Parts
    *
@@ -86807,6 +87159,7 @@ export type CustomElementsSolidJs = {
    *
    * These can be used to apply styling when a component is in a given state.
    *
+   * - `loaded`: Once a `lazy` panel has been shown and its content is in.
    * - `selected`: While its tab is the one selected.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
@@ -86859,9 +87212,9 @@ export type CustomElementsSolidJs = {
    * | Enter, Space | Selects the tab with focus, or follows its link. |
    * | Tab | Leaves the list for the selected panel. |
    *
-   * Removing the selected tab selects the first enabled tab that is left, and
-   * `active` says so, with `helix-activate`. Where the removed tab had focus,
-   * focus moves to the tab now selected.
+   * Removing the selected tab selects the enabled tab beside it, the next one
+   * or else the one before, and `active` says so, with `helix-activate`. Where
+   * the removed tab had focus, focus moves to the tab now selected.
    *
    * **More tabs than fit.** With `scroll-controls`, a strip that scrolls shows a
    * button at each end it can scroll toward, as Web Awesome's tab group does,
@@ -86967,6 +87320,8 @@ export type CustomElementsSolidJs = {
    * - `(default)`: The tabs, as direct children of this element.
    * - `indicator`: A mark of your own, drawn inside the `indicator` part, where `--indicator-x`, `--indicator-y`, `--indicator-inline-size` and `--indicator-block-size` reach it.
    * - `panels`: The panels, as direct children of this element. Panels inside a wrapper are not paired with tabs, because pairing reads only the direct children.
+   * - `scroll-end-icon`: Replaces the glyph on the button that scrolls the strip toward its end.
+   * - `scroll-start-icon`: Replaces the glyph on the button that scrolls the strip toward its start.
    *
    * ## Methods
    *
@@ -86988,7 +87343,9 @@ export type CustomElementsSolidJs = {
    * - `indicator`: The marker that moves to the selected tab. It carries the selected tab's place and size as `--indicator-x`, `--indicator-y`, `--indicator-inline-size` and `--indicator-block-size`, and `data-placed` once it has been placed, for a mark you draw and animate yourself.
    * - `panels`: The panel container.
    * - `scroll-end`: The button that scrolls the strip toward its end, shown under `scroll-controls` while there is more that way.
+   * - `scroll-end-mark`: The glyph on that button, where none is slotted.
    * - `scroll-start`: The button that scrolls the strip toward its start, shown under `scroll-controls` while there is more that way.
+   * - `scroll-start-mark`: The glyph on that button, where none is slotted.
    * - `tabs`: The tab list.
    *
    * ## CSS States
@@ -87016,8 +87373,8 @@ export type CustomElementsSolidJs = {
    * can: a press on its `dismiss` mark, or Delete or Backspace while the tab
    * has focus, sends `helix-dismiss`. The tab does not remove itself, because
    * your code owns the set, so remove the tab and its panel in your handler.
-   * Focus moves to the tab beside it, and the tab set selects a tab that is
-   * left.
+   * Focus moves to the tab beside it, and where the tab was selected, the tab
+   * set selects that same tab.
    * The tab says the key through `aria-keyshortcuts`, and the mark is for the
    * pointer, hidden from screen readers.
    *
@@ -87074,6 +87431,7 @@ export type CustomElementsSolidJs = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: The tab's label.
+   * - `dismiss-icon`: Replaces the glyph on the mark that closes a `dismissible` tab.
    *
    * ## Methods
    *
@@ -87098,6 +87456,7 @@ export type CustomElementsSolidJs = {
    * Custom selectors for styling elements within the component.
    *
    * - `dismiss`: The mark a pointer presses to close a `dismissible` tab.
+   * - `dismiss-mark`: The glyph on that mark, where none is slotted.
    * - `tab`: The tab itself.
    *
    * ## CSS States
@@ -88737,8 +89096,9 @@ export type CustomElementsSolidJs = {
    *
    * **Each item runs its own timer.** A timer held by the region would restart
    * with each new message, and the last of three messages would stay for nine
-   * seconds. It pauses while the pointer or focus is on the message, and while
-   * the page is hidden, so a message is not spent in a background tab.
+   * seconds. It pauses while the pointer or focus is on the message or anywhere
+   * in the region's stack, and while the page is hidden, so a message is not
+   * spent in a background tab.
    *
    * **Each message is an `alertdialog` named by its words**, which is how a reader
    * who moves into the stack hears which message they are on. Give it a
@@ -88747,10 +89107,11 @@ export type CustomElementsSolidJs = {
    * says each message once as it arrives, a `danger` one assertively, so a
    * message is never a live region of its own.
    *
-   * A touch or a pen swipes a message toward the end of the line, and past
-   * halfway, or quickly, dismisses it through the same `helix-dismiss` as its
-   * control. While it moves, the distance is on the `item` part as
-   * `--toast-swipe-x`.
+   * A touch or a pen swipes a message toward the end of the line, or toward the
+   * edge the region's `swipe-direction` names, and past halfway, or quickly,
+   * dismisses it through the same `helix-dismiss` as its control. While it
+   * moves, the distance is on the `item` part as `--toast-swipe-x` or
+   * `--toast-swipe-y`.
    *
    * **Escape dismisses the message holding focus**, through the same
    * `helix-dismiss`, and focus moves to the next message.
@@ -88852,6 +89213,7 @@ export type CustomElementsSolidJs = {
    *
    * - `--toast-duration`: How long this message stays, in milliseconds, for a progress hint.
    * - `--toast-swipe-x`: How far a swipe has moved the message across, in pixels, toward the right.
+   * - `--toast-swipe-y`: How far a swipe has moved the message down, in pixels, under a `swipe-direction` of `top` or `bottom`.
    *
    * ## CSS Parts
    *
@@ -88873,7 +89235,7 @@ export type CustomElementsSolidJs = {
    * These can be used to apply styling when a component is in a given state.
    *
    * - `closed`: The message has been dismissed and is hidden, or leaving.
-   * - `paused`: The dismiss timer is paused, while a pointer or focus is on the message, or while the page is hidden.
+   * - `paused`: The dismiss timer is paused, while a pointer or focus is on the message or in the stack, or while the page is hidden.
    * - `waiting`: The region holds the message back, past its `max-visible`, until a message before it goes.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
@@ -88915,7 +89277,12 @@ export type CustomElementsSolidJs = {
    * to render them from: it appends a message of the region's own tier and
    * removes it once it has been dismissed and has finished leaving. Messages
    * you render yourself stay yours, and the region never removes them. A touch
-   * or a pen swipes a message away toward the end of the line.
+   * or a pen swipes a message away toward the end of the line, or toward the
+   * edge `swipe-direction` names.
+   *
+   * **Every message's timer waits while a pointer or focus is in the stack**, as
+   * React Aria's and Radix's regions do, so a reader moving from one message to
+   * the next does not lose the one behind them.
    *
    * **The stack is in the top layer.** The `region` part is a `popover="manual"`
    * shown while a message is showing, and shown again above a modal dialog that
@@ -88980,6 +89347,8 @@ export type CustomElementsSolidJs = {
    * consumer's server markup does not have. A sheet carries the resting
    * arrangement in its own `:host` rule and the selectors describe only the
    * departures, which is what `orientation` does.
+   * - `swipe-direction`/`swipeDirection`: The edge a touch or a pen swipes a message toward to dismiss it: `end`,
+   * the end of the line, or `start`, `top` or `bottom`. Unset is `end`.
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -89861,6 +90230,17 @@ export type CustomElementsSolidJs = {
    * least distance that brings it on screen, so the stop that points at it is
    * on screen too.
    *
+   * **A stop's `effect` runs as the tour reaches it**, before it is shown, and
+   * the stop waits for a promise it returns, with `:state(preparing)` on the
+   * tour meanwhile. A function it returns runs when the tour leaves the stop.
+   *
+   * **A press outside the current stop and its target does nothing by
+   * default**, so a reader can use the page the tour is describing. Set
+   * `outside-press="close"` to end the tour on one, through `helix-before-close`
+   * as Skip does, or `outside-press="block"` to refuse it, so the stop and its
+   * target are all a pointer can reach while the tour runs, as Zag's
+   * `preventInteraction` does.
+   *
    * **Keyboard.** Focus is on the current stop's panel, which is not in the
    * `Tab` order itself.
    *
@@ -89898,6 +90278,9 @@ export type CustomElementsSolidJs = {
    * `undefined` until somebody sets one.
    * - `label`: The tour's name, read by screen readers, such as "Getting started".
    * - `next-label`/`nextLabel`: Label for the control that goes on.
+   * - `outside-press`/`outsidePress`: What a press outside the current stop and its target does while the tour
+   * runs. Unset, nothing: the page stays usable. `close` ends the tour, as
+   * Skip does, and `block` refuses the press.
    * - `progress`: Draws each stop's place in the run in its panel, as well as saying it.
    * - `progress-label`/`progressLabel`: Each stop's place in the run, with `{index}` and `{count}` filled in and
    * written in the locale. Translate it with the rest of your text.
@@ -90001,6 +90384,7 @@ export type CustomElementsSolidJs = {
    * These can be used to apply styling when a component is in a given state.
    *
    * - `open`: While the tour is running.
+   * - `preparing`: While the tour waits for the current stop's `effect` before showing the stop.
    * - `waiting`: While the tour waits at a `wait` stop for its target to be on the page.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
@@ -90037,6 +90421,13 @@ export type CustomElementsSolidJs = {
    * get Back, Next, and Skip, already wired. Slot your own `actions` and drive
    * them with `next()`, `back()`, and `skip()` on the root.
    *
+   * **Set `effect` to prepare the page for a stop**, such as opening the menu
+   * it points into or loading what it describes. It is a function, set from
+   * script, that the tour runs as it reaches the stop. Return a promise and the
+   * stop waits for it, and the tour has `:state(preparing)` meanwhile; return a
+   * function, or resolve to one, and the tour runs it when it leaves the stop.
+   * Zag's tour step has the same `effect`.
+   *
    * **`for` is an id, as with `Tooltip`**, so you can point at a target elsewhere
    * on the page from markup. It resolves against the stop's root node, so a stop
    * inside a shadow tree points at a target in that tree.
@@ -90078,6 +90469,8 @@ export type CustomElementsSolidJs = {
    *
    * Reflected, because the styled tier places a dialog and a floating panel by
    * it, and unset at rest, so no default is written onto the host.
+   * - `effect`: Run as the tour reaches the stop, before it is shown: see the description
+   * above. A function, so it is set from script and has no attribute. (property only)
    * - `target`: The element the stop points at, or `null` when no element has the `for` id. (property only) (readonly)
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
@@ -90160,6 +90553,8 @@ export type CustomElementsSolidJs = {
    *
    * These can be used to apply styling when a component is in a given state.
    *
+   * - `entering`: From the moment the stop is shown until its entrance has finished.
+   * - `exiting`: From the moment the stop is left until its exit has finished.
    * - `placed-bottom`: The panel sits below its target.
    * - `placed-left`: The panel sits to the left of its target.
    * - `placed-right`: The panel sits to the right of its target.
@@ -91932,6 +92327,8 @@ export type CustomCssProperties = {
   "--toast-duration"?: (string) | undefined;
   /** How far a swipe has moved the message across, in pixels, toward the right. */
   "--toast-swipe-x"?: (string) | undefined;
+  /** How far a swipe has moved the message down, in pixels, under a `swipe-direction` of `top` or `bottom`. */
+  "--toast-swipe-y"?: (string) | undefined;
   /** The lit box's height, in pixels, padding included. Written on the spotlight while it lights a target. */
   "--tour-spotlight-height"?: (string) | undefined;
   /** The lit box's width, in pixels, padding included. Written on the spotlight while it lights a target. */