@fusion.dev/helix-headless 0.157.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
@@ -8419,6 +8522,13 @@ 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?: (HelixHeadlessCommand["open"]) | undefined;
+  /** Whether a command is kept by the filter: a function given the command's
+words and the filter, trimmed, that returns `true` to keep it showing, as
+React Aria's `Autocomplete` takes `filter`. See Listbox's `filterMatch`.
+
+Absent, a command is kept where its words hold the filter, in any case. A
+property only, there being no way to write a function in markup. */
+  filterMatch?: (HelixHeadlessCommand["filterMatch"]) | undefined;
   /** The commands as data, for a palette too long to draw whole: each a value,
 which is also its words, or a record with a `value`, a `label` and
 `disabled`. Handed to the list, which draws only the commands in sight and
@@ -8548,6 +8658,13 @@ 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"?: (HelixHeadlessCommand["open"]) | undefined;
+  /** Whether a command is kept by the filter: a function given the command's
+words and the filter, trimmed, that returns `true` to keep it showing, as
+React Aria's `Autocomplete` takes `filter`. See Listbox's `filterMatch`.
+
+Absent, a command is kept where its words hold the filter, in any case. A
+property only, there being no way to write a function in markup. */
+  "prop:filterMatch"?: (HelixHeadlessCommand["filterMatch"]) | undefined;
   /** The commands as data, for a palette too long to draw whole: each a value,
 which is also its words, or a record with a `value`, a `label` and
 `disabled`. Handed to the list, which draws only the commands in sight and
@@ -17395,7 +17512,9 @@ Not reflected, as a state never is. `row-current` is the part a
 stylesheet draws it from. */
   current?: (HelixHeadlessListItem["current"]) | undefined;
   /** Takes the row out of reach in a list with `selection-mode`: the arrow keys
-pass over it and it cannot be selected or acted on. */
+pass over it and it cannot be selected or acted on. In a list with
+`disabled-behavior="selection"`, it cannot be selected and is reached and
+acted on as any row is. */
   disabled?: (HelixHeadlessListItem["disabled"]) | undefined;
   /** The URL the row links to. Leave it empty for a row that is not a link.
 
@@ -17431,6 +17550,10 @@ being moved, or the one the drop indicator is beside. Unset otherwise. */
 Written by the list from its own `value`, and unset where nothing can be
 selected, which keeps `aria-selected` off a list that does not select. */
   selected?: (HelixHeadlessListItem["selected"]) | undefined;
+  /** Whether `disabled` takes the row out of selection alone, written by a list
+with `disabled-behavior="selection"`. No attribute: it is coordination
+between elements, as `focusable` is. */
+  selectionOnly?: (HelixHeadlessListItem["selectionOnly"]) | undefined;
 
   /** The reader pressed Enter on the row, or pressed the row in a list that selects nothing, in a list with `selection-mode`. Read the row from `target`. A row with `href` follows its link instead. */
   "onhelix-action"?: ((e: HelixHeadlessListItemHelixActionElementEvent) => void) | undefined;
@@ -17446,7 +17569,9 @@ Not reflected, as a state never is. `row-current` is the part a
 stylesheet draws it from. */
   "prop:current"?: (HelixHeadlessListItem["current"]) | undefined;
   /** Takes the row out of reach in a list with `selection-mode`: the arrow keys
-pass over it and it cannot be selected or acted on. */
+pass over it and it cannot be selected or acted on. In a list with
+`disabled-behavior="selection"`, it cannot be selected and is reached and
+acted on as any row is. */
   "prop:disabled"?: (HelixHeadlessListItem["disabled"]) | undefined;
   /** The URL the row links to. Leave it empty for a row that is not a link.
 
@@ -17482,6 +17607,10 @@ being moved, or the one the drop indicator is beside. Unset otherwise. */
 Written by the list from its own `value`, and unset where nothing can be
 selected, which keeps `aria-selected` off a list that does not select. */
   "prop:selected"?: (HelixHeadlessListItem["selected"]) | undefined;
+  /** Whether `disabled` takes the row out of selection alone, written by a list
+with `disabled-behavior="selection"`. No attribute: it is coordination
+between elements, as `focusable` is. */
+  "prop:selectionOnly"?: (HelixHeadlessListItem["selectionOnly"]) | undefined;
   /** The reader pressed Enter on the row, or pressed the row in a list that selects nothing, in a list with `selection-mode`. Read the row from `target`. A row with `href` follows its link instead. */
   "on:helix-action"?: ((e: HelixHeadlessListItemHelixActionElementEvent) => void) | undefined;
 
@@ -17519,6 +17648,20 @@ refused, in a `reorderable` list. */
   /** What screen readers hear when a held row is put back, or a move is
 refused, in a `reorderable` list. */
   canceledLabel?: (HelixHeadlessList["canceledLabel"]) | undefined;
+  /** What `disabled` takes from a row, in a list that selects: `all`, which
+passes over the row, or `selection`, which keeps the row out of the
+selection and lets the keys reach it and Enter or a press act on it, as
+React Aria's GridList takes `disabledBehavior`.
+
+Absent is `all`. */
+  "disabled-behavior"?: (HelixHeadlessList["disabledBehavior"]) | undefined;
+  /** What `disabled` takes from a row, in a list that selects: `all`, which
+passes over the row, or `selection`, which keeps the row out of the
+selection and lets the keys reach it and Enter or a press act on it, as
+React Aria's GridList takes `disabledBehavior`.
+
+Absent is `all`. */
+  disabledBehavior?: (HelixHeadlessList["disabledBehavior"]) | undefined;
   /** What screen readers hear when a row is dropped, in a `reorderable` list. */
   "dropped-label"?: (HelixHeadlessList["droppedLabel"]) | undefined;
   /** What screen readers hear when a row is dropped, in a `reorderable` list. */
@@ -17651,6 +17794,20 @@ refused, in a `reorderable` list. */
   /** What screen readers hear when a held row is put back, or a move is
 refused, in a `reorderable` list. */
   "prop:canceledLabel"?: (HelixHeadlessList["canceledLabel"]) | undefined;
+  /** What `disabled` takes from a row, in a list that selects: `all`, which
+passes over the row, or `selection`, which keeps the row out of the
+selection and lets the keys reach it and Enter or a press act on it, as
+React Aria's GridList takes `disabledBehavior`.
+
+Absent is `all`. */
+  "attr:disabled-behavior"?: (HelixHeadlessList["disabledBehavior"]) | undefined;
+  /** What `disabled` takes from a row, in a list that selects: `all`, which
+passes over the row, or `selection`, which keeps the row out of the
+selection and lets the keys reach it and Enter or a press act on it, as
+React Aria's GridList takes `disabledBehavior`.
+
+Absent is `all`. */
+  "prop:disabledBehavior"?: (HelixHeadlessList["disabledBehavior"]) | undefined;
   /** What screen readers hear when a row is dropped, in a `reorderable` list. */
   "attr:dropped-label"?: (HelixHeadlessList["droppedLabel"]) | undefined;
   /** What screen readers hear when a row is dropped, in a `reorderable` list. */
@@ -18042,6 +18199,14 @@ imperatively later, and nothing is hydrating by then.
 
 Here rather than on each control. */
   name?: (HelixHeadlessListbox["name"]) | undefined;
+  /** Whether an option is kept by the filter: a function given the option's
+words and the filter, trimmed, that returns `true` to keep it showing, as
+React Aria's `Autocomplete` takes `filter`. For matching that ignores
+accents, matches the start of each word, or matches out of order.
+
+Absent, an option is kept where its words hold the filter, in any case. A
+property only, there being no way to write a function in markup. */
+  filterMatch?: (HelixHeadlessListbox["filterMatch"]) | undefined;
   /** The options as data, for a list too long to draw whole: each a value,
 which is also its words, or a record with a `value`, a `label` and
 `disabled`. Set, the list draws only the options in sight, and the ones
@@ -18332,6 +18497,14 @@ imperatively later, and nothing is hydrating by then.
 
 Here rather than on each control. */
   "prop:name"?: (HelixHeadlessListbox["name"]) | undefined;
+  /** Whether an option is kept by the filter: a function given the option's
+words and the filter, trimmed, that returns `true` to keep it showing, as
+React Aria's `Autocomplete` takes `filter`. For matching that ignores
+accents, matches the start of each word, or matches out of order.
+
+Absent, an option is kept where its words hold the filter, in any case. A
+property only, there being no way to write a function in markup. */
+  "prop:filterMatch"?: (HelixHeadlessListbox["filterMatch"]) | undefined;
   /** The options as data, for a list too long to draw whole: each a value,
 which is also its words, or a record with a `value`, a `label` and
 `disabled`. Set, the list draws only the options in sight, and the ones
@@ -21603,8 +21776,11 @@ imperatively later, and nothing is hydrating by then.
 
 Here rather than on each control. */
   name?: (HelixHeadlessNumberInput["name"]) | undefined;
-  /** The value as a number, or `NaN` while the control is empty.
+  /** The value as a number, or `NaN` while the control is empty or does not
+hold a number.
 
+Read in the locale and the format, as the form reads it, so `1,5` typed
+in a locale with a decimal comma is 1.5 here while the form holds 1.5.
 `NaN` and not zero, which is the trap the platform already avoids: `Number('')`
 is zero, so an empty control would report a number it does not hold and a
 form would submit it. */
@@ -21878,8 +22054,11 @@ imperatively later, and nothing is hydrating by then.
 
 Here rather than on each control. */
   "prop:name"?: (HelixHeadlessNumberInput["name"]) | undefined;
-  /** The value as a number, or `NaN` while the control is empty.
+  /** The value as a number, or `NaN` while the control is empty or does not
+hold a number.
 
+Read in the locale and the format, as the form reads it, so `1,5` typed
+in a locale with a decimal comma is 1.5 here while the form holds 1.5.
 `NaN` and not zero, which is the trap the platform already avoids: `Number('')`
 is zero, so an empty control would report a number it does not hold and a
 form would submit it. */
@@ -26018,7 +26197,8 @@ export type HelixHeadlessSkeletonProps = {
   /** What is loading, read out as the placeholder's name, such as "Loading
 profile".
 
-Absent hides the placeholder from screen readers. */
+Absent hides the placeholder from screen readers. Around content, the name
+is read while `loading` is set, and the loaded content is read as it is. */
   label?: (HelixHeadlessSkeleton["label"]) | undefined;
   /** Whether the content inside is still loading, which keeps it inert and
 draws the placeholder over it.
@@ -26032,7 +26212,8 @@ export type HelixHeadlessSkeletonSolidJsProps = {
   /** What is loading, read out as the placeholder's name, such as "Loading
 profile".
 
-Absent hides the placeholder from screen readers. */
+Absent hides the placeholder from screen readers. Around content, the name
+is read while `loading` is set, and the loaded content is read as it is. */
   "prop:label"?: (HelixHeadlessSkeleton["label"]) | undefined;
   /** Whether the content inside is still loading, which keeps it inert and
 draws the placeholder over it.
@@ -28981,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. */
@@ -28997,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. */
@@ -29015,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;
@@ -31638,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;
@@ -31685,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;
 
@@ -32601,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
@@ -32691,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
@@ -32809,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"?: ((
@@ -32861,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,
@@ -35480,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
@@ -35520,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
@@ -35545,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
    *
@@ -35556,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.
@@ -36940,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
@@ -36972,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
@@ -37348,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<
@@ -41095,8 +41382,9 @@ export type CustomElements = {
    *
    * Choosing the opener says `helix-select` with its value, and canceling it
    * keeps the page that is shown. The list then shows the page, named by the
-   * opener's words, and Backspace in an empty filter goes back. `page` says
-   * which page is shown.
+   * opener's words, and a screen reader hears those words. Backspace in an empty
+   * filter goes back, and a screen reader hears the name of the page it goes
+   * back to. `page` says which page is shown.
    *
    * The filter is cleared when the palette closes, so each opening starts from
    * the full list. Combobox and Select do the same. As typing narrows the list, a
@@ -41118,9 +41406,10 @@ export type CustomElements = {
    * | Tab | Stays in the palette, which is modal. With `inline`, moves on through the page. |
    *
    * **ARIA.** The palette is a modal `dialog` named by `label`, or with
-   * `inline` no dialog at all. Inside it the filter field is a `combobox` with
-   * `aria-activedescendant` on the highlighted command, and the commands are a
-   * `listbox` of `option`s. How many commands typing left, the empty text and
+   * `inline` no dialog at all. Inside it the filter field is a text field with
+   * `aria-autocomplete="list"`, `aria-controls` on the list, and
+   * `aria-activedescendant` on the highlighted command, as the field of React
+   * Aria's `Autocomplete` is. The commands are a `listbox` of `option`s. How many commands typing left, the empty text and
    * the loading text are said in a polite live region.
    *
    * ## Attributes & Properties
@@ -41184,6 +41473,12 @@ export type CustomElements = {
    * 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.
+   * - `filterMatch`: Whether a command is kept by the filter: a function given the command's
+   * words and the filter, trimmed, that returns `true` to keep it showing, as
+   * React Aria's `Autocomplete` takes `filter`. See Listbox's `filterMatch`.
+   *
+   * Absent, a command is kept where its words hold the filter, in any case. A
+   * property only, there being no way to write a function in markup. (property only)
    * - `items`: The commands as data, for a palette too long to draw whole: each a value,
    * which is also its words, or a record with a `value`, a `label` and
    * `disabled`. Handed to the list, which draws only the commands in sight and
@@ -41275,6 +41570,7 @@ export type CustomElements = {
    * - `listbox-loading`: The text shown while the commands are loading.
    * - `listbox-search`: The region that holds the filter field.
    * - `listbox-search-field`: The filter field.
+   * - `live`: The region a screen reader announces the page shown from, by the words of the command that opens it, drawn once there is one to say. Visually hidden in the styled tier.
    *
    * ## CSS States
    *
@@ -41520,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<
@@ -46545,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<
@@ -47431,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
@@ -47515,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
@@ -47738,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.
@@ -48186,7 +48488,9 @@ export type CustomElements = {
    * Not reflected, as a state never is. `row-current` is the part a
    * stylesheet draws it from.
    * - `disabled`: Takes the row out of reach in a list with `selection-mode`: the arrow keys
-   * pass over it and it cannot be selected or acted on.
+   * pass over it and it cannot be selected or acted on. In a list with
+   * `disabled-behavior="selection"`, it cannot be selected and is reached and
+   * acted on as any row is.
    * - `href`: The URL the row links to. Leave it empty for a row that is not a link.
    *
    * Empty rather than optional, and unset by default: a list is not always a
@@ -48213,6 +48517,9 @@ export type CustomElements = {
    *
    * Written by the list from its own `value`, and unset where nothing can be
    * selected, which keeps `aria-selected` off a list that does not select. (property only)
+   * - `selectionOnly`: Whether `disabled` takes the row out of selection alone, written by a list
+   * with `disabled-behavior="selection"`. No attribute: it is coordination
+   * between elements, as `focusable` is. (property only)
    * - `words`: The row's words, or none where the children are not known yet. (property only) (readonly)
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
@@ -48273,6 +48580,7 @@ export type CustomElements = {
    * - `dragging`: The row is being moved, in a `reorderable` list.
    * - `drop-after`: The row being moved goes after this one when it is dropped.
    * - `drop-before`: The row being moved goes before this one when it is dropped.
+   * - `focus-visible`: The row's cell has keyboard focus that the browser shows, in a list with `selection-mode`.
    * - `selected`: The row is selected, in a list that selects.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
@@ -48289,7 +48597,9 @@ export type CustomElements = {
    * `multiple` any number, and `value` holds the selected rows' values,
    * separated by commas. A change asks with `helix-before-change` and tells
    * with `change`. `none` selects nothing, so a press acts on the row. A
-   * `disabled` row is passed over. Each row is named by its label and described
+   * `disabled` row is passed over. With `disabled-behavior="selection"`, a
+   * `disabled` row cannot be selected, and is reached and acted on as any row
+   * is, as React Aria's GridList has it. Each row is named by its label and described
    * by its description, so the words of the controls in `end` are not read as
    * part of its name.
    *
@@ -48367,6 +48677,12 @@ export type CustomElements = {
    *
    * - `canceled-label`/`canceledLabel`: What screen readers hear when a held row is put back, or a move is
    * refused, in a `reorderable` list.
+   * - `disabled-behavior`/`disabledBehavior`: What `disabled` takes from a row, in a list that selects: `all`, which
+   * passes over the row, or `selection`, which keeps the row out of the
+   * selection and lets the keys reach it and Enter or a press act on it, as
+   * React Aria's GridList takes `disabledBehavior`.
+   *
+   * Absent is `all`.
    * - `dropped-label`/`droppedLabel`: What screen readers hear when a row is dropped, in a `reorderable` list.
    * - `empty-label`/`emptyLabel`: The text of the row shown while the list has no rows, where the `empty`
    * slot is empty. Empty, the default, shows no row.
@@ -48506,7 +48822,9 @@ export type CustomElements = {
    * With `multiple` set, `value` is a comma-separated string, like
    * `Checkbox.Group`'s, because `MixinControllerValue` holds a string. The form
    * receives one entry per selected option, as a native `<select multiple>` sends
-   * it, so your server does not split on commas.
+   * it, so your server does not split on commas. An option's value may hold a
+   * comma: a run of the string that is an option's value is read as that one
+   * value, and the form sends it as one entry.
    *
    * Selected and active are separate. The selected option is the value. The
    * active option is where the keyboard is: the arrow keys move it, and
@@ -48713,6 +49031,13 @@ export type CustomElements = {
    * imperatively later, and nothing is hydrating by then.
    *
    * Here rather than on each control.
+   * - `filterMatch`: Whether an option is kept by the filter: a function given the option's
+   * words and the filter, trimmed, that returns `true` to keep it showing, as
+   * React Aria's `Autocomplete` takes `filter`. For matching that ignores
+   * accents, matches the start of each word, or matches out of order.
+   *
+   * Absent, an option is kept where its words hold the filter, in any case. A
+   * property only, there being no way to write a function in markup. (property only)
    * - `items`: The options as data, for a list too long to draw whole: each a value,
    * which is also its words, or a record with a `value`, a `label` and
    * `disabled`. Set, the list draws only the options in sight, and the ones
@@ -48749,7 +49074,10 @@ export type CustomElements = {
    * Descendants rather than children, because a group puts a level between the
    * list and its options and the keyboard has to move through a grouped list
    * exactly as it moves through a flat one. (property only) (readonly)
-   * - `values`: The chosen values, as an array whether or not `multiple` is set. (property only) (readonly)
+   * - `values`: The chosen values, as an array whether or not `multiple` is set.
+   *
+   * Read against the options' values, so an option whose value holds a comma
+   * is one value. See `chosenValues`. (property only) (readonly)
    * - `validity`: Whether the control meets its constraints, and why not. (property only) (readonly)
    * - `validationMessage`: The message the browser would show for the control, or an empty string. (property only) (readonly)
    * - `willValidate`: Whether the control is checked when its form is submitted. (property only) (readonly)
@@ -50520,8 +50848,8 @@ export type CustomElements = {
    * rows, Home and End go to the first and the last, a typed letter moves to
    * the next row whose name starts with it, Enter and Space choose, Right Arrow
    * opens a row's submenu and Left Arrow goes back, the two swapping on a
-   * right-to-left page, and Escape closes the menu and returns focus to the
-   * trigger. Tab closes it and moves on.
+   * right-to-left page. Left Arrow on the top page does nothing. Escape closes
+   * the menu and returns focus to the trigger. Tab closes it and moves on.
    *
    * While it is open, the surface carries the trigger's width as
    * `--floating-anchor-inline-size` and the room left below it as
@@ -50665,6 +50993,10 @@ export type CustomElements = {
    * - `drilled`: A submenu's page is showing, so content that is not a row can hide with the top page.
    * - `mark`: A row on the current page has a checkbox or a link, so every row keeps the trailing column.
    * - `open`: While the menu is open.
+   * - `placed-bottom`: While the open panel sits below its trigger.
+   * - `placed-left`: While the open panel sits to the left of its trigger.
+   * - `placed-right`: While the open panel sits to the right of its trigger.
+   * - `placed-top`: While the open panel sits above its trigger.
    * - `start`: A row on the current page has content in its leading column, so every row keeps that column.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
@@ -51564,9 +51896,9 @@ export type CustomElements = {
    * The locale's group separators are read in every field, so `1,234` is a
    * number in `en-US`.
    *
-   * The field and its two buttons sit in a `role="group"`, and the field carries
-   * `role-label`, "number field" in English, as its `aria-roledescription`, as
-   * React Aria's NumberField does. On iOS and iPadOS the field is a plain text
+   * The field and its two buttons sit in a `role="group"` named by the label,
+   * and the field carries `role-label`, "number field" in English, as its
+   * `aria-roledescription`, as React Aria's NumberField does. On iOS and iPadOS the field is a plain text
    * field, with no `role="spinbutton"`, which VoiceOver reads as a slider you
    * cannot type in, and no role description, so VoiceOver says the field is
    * required. React Aria's NumberField does the same.
@@ -51745,8 +52077,11 @@ export type CustomElements = {
    * imperatively later, and nothing is hydrating by then.
    *
    * Here rather than on each control.
-   * - `valueAsNumber`: The value as a number, or `NaN` while the control is empty.
+   * - `valueAsNumber`: The value as a number, or `NaN` while the control is empty or does not
+   * hold a number.
    *
+   * Read in the locale and the format, as the form reads it, so `1,5` typed
+   * in a locale with a decimal comma is 1.5 here while the form holds 1.5.
    * `NaN` and not zero, which is the trap the platform already avoids: `Number('')`
    * is zero, so an empty control would report a number it does not hold and a
    * form would submit it. (property only)
@@ -55142,7 +55477,9 @@ export type CustomElements = {
    * whole set.
    *
    * `Select` owns the value, passes it down to the listbox, and takes changes
-   * back, so the value lives in one place.
+   * back, so the value lives in one place. With `multiple`, the value is the
+   * chosen values joined with commas, and the form receives one entry for each.
+   * An option's value may hold a comma, and it is read as one value.
    *
    * Set `valueContent` to draw the trigger's content from the chosen options,
    * and several chosen options are written as a list in the reader's language.
@@ -55519,7 +55856,8 @@ export type CustomElements = {
    * - `label`: What is loading, read out as the placeholder's name, such as "Loading
    * profile".
    *
-   * Absent hides the placeholder from screen readers.
+   * Absent hides the placeholder from screen readers. Around content, the name
+   * is read while `loading` is set, and the loaded content is read as it is.
    * - `loading`: Whether the content inside is still loading, which keeps it inert and
    * draws the placeholder over it.
    *
@@ -57152,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.
@@ -58198,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.
@@ -58235,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
    *
@@ -58251,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.
    */
@@ -58300,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,
@@ -58408,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
    *
@@ -58429,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
@@ -58454,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.
    *
@@ -58512,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
    *
@@ -58536,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
@@ -60154,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
@@ -60164,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.
@@ -60269,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
    *
@@ -60290,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.
    */
@@ -60329,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
@@ -60394,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
@@ -61262,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.
    *
@@ -61299,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.
@@ -61402,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.
    */
@@ -61435,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.
@@ -61476,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.
    *
@@ -61558,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.
@@ -63606,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
@@ -63646,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
@@ -63671,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
    *
@@ -63682,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.
@@ -65085,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
@@ -65117,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
@@ -65494,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<
@@ -69278,8 +69729,9 @@ export type CustomElementsSolidJs = {
    *
    * Choosing the opener says `helix-select` with its value, and canceling it
    * keeps the page that is shown. The list then shows the page, named by the
-   * opener's words, and Backspace in an empty filter goes back. `page` says
-   * which page is shown.
+   * opener's words, and a screen reader hears those words. Backspace in an empty
+   * filter goes back, and a screen reader hears the name of the page it goes
+   * back to. `page` says which page is shown.
    *
    * The filter is cleared when the palette closes, so each opening starts from
    * the full list. Combobox and Select do the same. As typing narrows the list, a
@@ -69301,9 +69753,10 @@ export type CustomElementsSolidJs = {
    * | Tab | Stays in the palette, which is modal. With `inline`, moves on through the page. |
    *
    * **ARIA.** The palette is a modal `dialog` named by `label`, or with
-   * `inline` no dialog at all. Inside it the filter field is a `combobox` with
-   * `aria-activedescendant` on the highlighted command, and the commands are a
-   * `listbox` of `option`s. How many commands typing left, the empty text and
+   * `inline` no dialog at all. Inside it the filter field is a text field with
+   * `aria-autocomplete="list"`, `aria-controls` on the list, and
+   * `aria-activedescendant` on the highlighted command, as the field of React
+   * Aria's `Autocomplete` is. The commands are a `listbox` of `option`s. How many commands typing left, the empty text and
    * the loading text are said in a polite live region.
    *
    * ## Attributes & Properties
@@ -69367,6 +69820,12 @@ export type CustomElementsSolidJs = {
    * 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.
+   * - `filterMatch`: Whether a command is kept by the filter: a function given the command's
+   * words and the filter, trimmed, that returns `true` to keep it showing, as
+   * React Aria's `Autocomplete` takes `filter`. See Listbox's `filterMatch`.
+   *
+   * Absent, a command is kept where its words hold the filter, in any case. A
+   * property only, there being no way to write a function in markup. (property only)
    * - `items`: The commands as data, for a palette too long to draw whole: each a value,
    * which is also its words, or a record with a `value`, a `label` and
    * `disabled`. Handed to the list, which draws only the commands in sight and
@@ -69458,6 +69917,7 @@ export type CustomElementsSolidJs = {
    * - `listbox-loading`: The text shown while the commands are loading.
    * - `listbox-search`: The region that holds the filter field.
    * - `listbox-search-field`: The filter field.
+   * - `live`: The region a screen reader announces the page shown from, by the words of the command that opens it, drawn once there is one to say. Visually hidden in the styled tier.
    *
    * ## CSS States
    *
@@ -69706,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<
@@ -74773,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<
@@ -75675,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
@@ -75760,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
@@ -75983,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.
@@ -76437,7 +76903,9 @@ export type CustomElementsSolidJs = {
    * Not reflected, as a state never is. `row-current` is the part a
    * stylesheet draws it from.
    * - `disabled`: Takes the row out of reach in a list with `selection-mode`: the arrow keys
-   * pass over it and it cannot be selected or acted on.
+   * pass over it and it cannot be selected or acted on. In a list with
+   * `disabled-behavior="selection"`, it cannot be selected and is reached and
+   * acted on as any row is.
    * - `href`: The URL the row links to. Leave it empty for a row that is not a link.
    *
    * Empty rather than optional, and unset by default: a list is not always a
@@ -76464,6 +76932,9 @@ export type CustomElementsSolidJs = {
    *
    * Written by the list from its own `value`, and unset where nothing can be
    * selected, which keeps `aria-selected` off a list that does not select. (property only)
+   * - `selectionOnly`: Whether `disabled` takes the row out of selection alone, written by a list
+   * with `disabled-behavior="selection"`. No attribute: it is coordination
+   * between elements, as `focusable` is. (property only)
    * - `words`: The row's words, or none where the children are not known yet. (property only) (readonly)
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
@@ -76524,6 +76995,7 @@ export type CustomElementsSolidJs = {
    * - `dragging`: The row is being moved, in a `reorderable` list.
    * - `drop-after`: The row being moved goes after this one when it is dropped.
    * - `drop-before`: The row being moved goes before this one when it is dropped.
+   * - `focus-visible`: The row's cell has keyboard focus that the browser shows, in a list with `selection-mode`.
    * - `selected`: The row is selected, in a list that selects.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
@@ -76543,7 +77015,9 @@ export type CustomElementsSolidJs = {
    * `multiple` any number, and `value` holds the selected rows' values,
    * separated by commas. A change asks with `helix-before-change` and tells
    * with `change`. `none` selects nothing, so a press acts on the row. A
-   * `disabled` row is passed over. Each row is named by its label and described
+   * `disabled` row is passed over. With `disabled-behavior="selection"`, a
+   * `disabled` row cannot be selected, and is reached and acted on as any row
+   * is, as React Aria's GridList has it. Each row is named by its label and described
    * by its description, so the words of the controls in `end` are not read as
    * part of its name.
    *
@@ -76621,6 +77095,12 @@ export type CustomElementsSolidJs = {
    *
    * - `canceled-label`/`canceledLabel`: What screen readers hear when a held row is put back, or a move is
    * refused, in a `reorderable` list.
+   * - `disabled-behavior`/`disabledBehavior`: What `disabled` takes from a row, in a list that selects: `all`, which
+   * passes over the row, or `selection`, which keeps the row out of the
+   * selection and lets the keys reach it and Enter or a press act on it, as
+   * React Aria's GridList takes `disabledBehavior`.
+   *
+   * Absent is `all`.
    * - `dropped-label`/`droppedLabel`: What screen readers hear when a row is dropped, in a `reorderable` list.
    * - `empty-label`/`emptyLabel`: The text of the row shown while the list has no rows, where the `empty`
    * slot is empty. Empty, the default, shows no row.
@@ -76763,7 +77243,9 @@ export type CustomElementsSolidJs = {
    * With `multiple` set, `value` is a comma-separated string, like
    * `Checkbox.Group`'s, because `MixinControllerValue` holds a string. The form
    * receives one entry per selected option, as a native `<select multiple>` sends
-   * it, so your server does not split on commas.
+   * it, so your server does not split on commas. An option's value may hold a
+   * comma: a run of the string that is an option's value is read as that one
+   * value, and the form sends it as one entry.
    *
    * Selected and active are separate. The selected option is the value. The
    * active option is where the keyboard is: the arrow keys move it, and
@@ -76970,6 +77452,13 @@ export type CustomElementsSolidJs = {
    * imperatively later, and nothing is hydrating by then.
    *
    * Here rather than on each control.
+   * - `filterMatch`: Whether an option is kept by the filter: a function given the option's
+   * words and the filter, trimmed, that returns `true` to keep it showing, as
+   * React Aria's `Autocomplete` takes `filter`. For matching that ignores
+   * accents, matches the start of each word, or matches out of order.
+   *
+   * Absent, an option is kept where its words hold the filter, in any case. A
+   * property only, there being no way to write a function in markup. (property only)
    * - `items`: The options as data, for a list too long to draw whole: each a value,
    * which is also its words, or a record with a `value`, a `label` and
    * `disabled`. Set, the list draws only the options in sight, and the ones
@@ -77006,7 +77495,10 @@ export type CustomElementsSolidJs = {
    * Descendants rather than children, because a group puts a level between the
    * list and its options and the keyboard has to move through a grouped list
    * exactly as it moves through a flat one. (property only) (readonly)
-   * - `values`: The chosen values, as an array whether or not `multiple` is set. (property only) (readonly)
+   * - `values`: The chosen values, as an array whether or not `multiple` is set.
+   *
+   * Read against the options' values, so an option whose value holds a comma
+   * is one value. See `chosenValues`. (property only) (readonly)
    * - `validity`: Whether the control meets its constraints, and why not. (property only) (readonly)
    * - `validationMessage`: The message the browser would show for the control, or an empty string. (property only) (readonly)
    * - `willValidate`: Whether the control is checked when its form is submitted. (property only) (readonly)
@@ -78812,8 +79304,8 @@ export type CustomElementsSolidJs = {
    * rows, Home and End go to the first and the last, a typed letter moves to
    * the next row whose name starts with it, Enter and Space choose, Right Arrow
    * opens a row's submenu and Left Arrow goes back, the two swapping on a
-   * right-to-left page, and Escape closes the menu and returns focus to the
-   * trigger. Tab closes it and moves on.
+   * right-to-left page. Left Arrow on the top page does nothing. Escape closes
+   * the menu and returns focus to the trigger. Tab closes it and moves on.
    *
    * While it is open, the surface carries the trigger's width as
    * `--floating-anchor-inline-size` and the room left below it as
@@ -78957,6 +79449,10 @@ export type CustomElementsSolidJs = {
    * - `drilled`: A submenu's page is showing, so content that is not a row can hide with the top page.
    * - `mark`: A row on the current page has a checkbox or a link, so every row keeps the trailing column.
    * - `open`: While the menu is open.
+   * - `placed-bottom`: While the open panel sits below its trigger.
+   * - `placed-left`: While the open panel sits to the left of its trigger.
+   * - `placed-right`: While the open panel sits to the right of its trigger.
+   * - `placed-top`: While the open panel sits above its trigger.
    * - `start`: A row on the current page has content in its leading column, so every row keeps that column.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
@@ -79867,9 +80363,9 @@ export type CustomElementsSolidJs = {
    * The locale's group separators are read in every field, so `1,234` is a
    * number in `en-US`.
    *
-   * The field and its two buttons sit in a `role="group"`, and the field carries
-   * `role-label`, "number field" in English, as its `aria-roledescription`, as
-   * React Aria's NumberField does. On iOS and iPadOS the field is a plain text
+   * The field and its two buttons sit in a `role="group"` named by the label,
+   * and the field carries `role-label`, "number field" in English, as its
+   * `aria-roledescription`, as React Aria's NumberField does. On iOS and iPadOS the field is a plain text
    * field, with no `role="spinbutton"`, which VoiceOver reads as a slider you
    * cannot type in, and no role description, so VoiceOver says the field is
    * required. React Aria's NumberField does the same.
@@ -80048,8 +80544,11 @@ export type CustomElementsSolidJs = {
    * imperatively later, and nothing is hydrating by then.
    *
    * Here rather than on each control.
-   * - `valueAsNumber`: The value as a number, or `NaN` while the control is empty.
+   * - `valueAsNumber`: The value as a number, or `NaN` while the control is empty or does not
+   * hold a number.
    *
+   * Read in the locale and the format, as the form reads it, so `1,5` typed
+   * in a locale with a decimal comma is 1.5 here while the form holds 1.5.
    * `NaN` and not zero, which is the trap the platform already avoids: `Number('')`
    * is zero, so an empty control would report a number it does not hold and a
    * form would submit it. (property only)
@@ -83482,7 +83981,9 @@ export type CustomElementsSolidJs = {
    * whole set.
    *
    * `Select` owns the value, passes it down to the listbox, and takes changes
-   * back, so the value lives in one place.
+   * back, so the value lives in one place. With `multiple`, the value is the
+   * chosen values joined with commas, and the form receives one entry for each.
+   * An option's value may hold a comma, and it is read as one value.
    *
    * Set `valueContent` to draw the trigger's content from the chosen options,
    * and several chosen options are written as a list in the reader's language.
@@ -83862,7 +84363,8 @@ export type CustomElementsSolidJs = {
    * - `label`: What is loading, read out as the placeholder's name, such as "Loading
    * profile".
    *
-   * Absent hides the placeholder from screen readers.
+   * Absent hides the placeholder from screen readers. Around content, the name
+   * is read while `loading` is set, and the loaded content is read as it is.
    * - `loading`: Whether the content inside is still loading, which keeps it inert and
    * draws the placeholder over it.
    *
@@ -85524,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.
@@ -86586,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.
@@ -86623,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
    *
@@ -86639,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.
    */
@@ -86691,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,
@@ -86799,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
    *
@@ -86820,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
@@ -86848,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.
    *
@@ -86906,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
    *
@@ -86930,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
@@ -88569,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
@@ -88579,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.
@@ -88684,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
    *
@@ -88705,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.
    */
@@ -88747,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
@@ -88812,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
@@ -89693,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.
    *
@@ -89730,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.
@@ -89833,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.
    */
@@ -89869,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.
@@ -89910,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.
    *
@@ -89992,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.
@@ -91764,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. */