@fusion.dev/helix-headless 0.151.0 → 0.152.0

package/types/jsx.d.ts

@@ -969,6 +969,22 @@ the wordmark and the actions happen to measure.
 takes a search field or a breadcrumb trail as readily as a `Navigation`, so
 the property carries the part's name, `content`. */
   contentAlign?: (HelixHeadlessAppHeader["contentAlign"]) | undefined;
+  /** The width of the bar, in pixels, below which the middle region folds behind
+a toggle. Unset, it never folds. */
+  "fold-below"?: (HelixHeadlessAppHeader["foldBelow"] | `${number}`) | undefined;
+  /** The width of the bar, in pixels, below which the middle region folds behind
+a toggle. Unset, it never folds. */
+  foldBelow?: (HelixHeadlessAppHeader["foldBelow"]) | undefined;
+  /** Hides the bar as the page scrolls down past it, and shows it again as the
+page scrolls up. */
+  "hide-on-scroll"?: (HelixHeadlessAppHeader["hideOnScroll"]) | undefined;
+  /** Hides the bar as the page scrolls down past it, and shows it again as the
+page scrolls up. */
+  hideOnScroll?: (HelixHeadlessAppHeader["hideOnScroll"]) | undefined;
+  /** The name of the toggle that opens a folded middle region. */
+  "menu-label"?: (HelixHeadlessAppHeader["menuLabel"]) | undefined;
+  /** The name of the toggle that opens a folded middle region. */
+  menuLabel?: (HelixHeadlessAppHeader["menuLabel"]) | undefined;
   /** 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;
@@ -1008,6 +1024,22 @@ the wordmark and the actions happen to measure.
 takes a search field or a breadcrumb trail as readily as a `Navigation`, so
 the property carries the part's name, `content`. */
   "prop:contentAlign"?: (HelixHeadlessAppHeader["contentAlign"]) | undefined;
+  /** The width of the bar, in pixels, below which the middle region folds behind
+a toggle. Unset, it never folds. */
+  "attr:fold-below"?: (HelixHeadlessAppHeader["foldBelow"] | `${number}`) | undefined;
+  /** The width of the bar, in pixels, below which the middle region folds behind
+a toggle. Unset, it never folds. */
+  "prop:foldBelow"?: (HelixHeadlessAppHeader["foldBelow"]) | undefined;
+  /** Hides the bar as the page scrolls down past it, and shows it again as the
+page scrolls up. */
+  "bool:hide-on-scroll"?: (HelixHeadlessAppHeader["hideOnScroll"]) | undefined;
+  /** Hides the bar as the page scrolls down past it, and shows it again as the
+page scrolls up. */
+  "prop:hideOnScroll"?: (HelixHeadlessAppHeader["hideOnScroll"]) | undefined;
+  /** The name of the toggle that opens a folded middle region. */
+  "attr:menu-label"?: (HelixHeadlessAppHeader["menuLabel"]) | undefined;
+  /** The name of the toggle that opens a folded middle region. */
+  "prop:menuLabel"?: (HelixHeadlessAppHeader["menuLabel"]) | undefined;
   /** 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;
@@ -10754,8 +10786,14 @@ first, `handleCancel` prevents it, and `requestOpen` decides. So
 `closedby="any"` gains light dismiss without giving up the refusal, which is
 the property this component exists to keep.
 
+The press on the backdrop that this element handles itself follows it too:
+`closerequest` and `none` leave the dialog open on that press, as the
+platform does, and `none` also keeps it open on Escape in a browser without
+`closedby`.
+
 Absent by default, which is the platform's `auto` and this library's rule
-that a resting value is an attribute's absence. */
+that a resting value is an attribute's absence. Absent, a press on the
+backdrop closes the dialog. */
   closedby?: (HelixHeadlessDialog["closedBy"]) | undefined;
   /** Which close requests the browser handles on its own.
 
@@ -10765,8 +10803,14 @@ first, `handleCancel` prevents it, and `requestOpen` decides. So
 `closedby="any"` gains light dismiss without giving up the refusal, which is
 the property this component exists to keep.
 
+The press on the backdrop that this element handles itself follows it too:
+`closerequest` and `none` leave the dialog open on that press, as the
+platform does, and `none` also keeps it open on Escape in a browser without
+`closedby`.
+
 Absent by default, which is the platform's `auto` and this library's rule
-that a resting value is an attribute's absence. */
+that a resting value is an attribute's absence. Absent, a press on the
+backdrop closes the dialog. */
   closedBy?: (HelixHeadlessDialog["closedBy"]) | undefined;
   /** Draws a control that closes the dialog, in the corner where the title is.
 
@@ -10860,8 +10904,14 @@ first, `handleCancel` prevents it, and `requestOpen` decides. So
 `closedby="any"` gains light dismiss without giving up the refusal, which is
 the property this component exists to keep.
 
+The press on the backdrop that this element handles itself follows it too:
+`closerequest` and `none` leave the dialog open on that press, as the
+platform does, and `none` also keeps it open on Escape in a browser without
+`closedby`.
+
 Absent by default, which is the platform's `auto` and this library's rule
-that a resting value is an attribute's absence. */
+that a resting value is an attribute's absence. Absent, a press on the
+backdrop closes the dialog. */
   "attr:closedby"?: (HelixHeadlessDialog["closedBy"]) | undefined;
   /** Which close requests the browser handles on its own.
 
@@ -10871,8 +10921,14 @@ first, `handleCancel` prevents it, and `requestOpen` decides. So
 `closedby="any"` gains light dismiss without giving up the refusal, which is
 the property this component exists to keep.
 
+The press on the backdrop that this element handles itself follows it too:
+`closerequest` and `none` leave the dialog open on that press, as the
+platform does, and `none` also keeps it open on Escape in a browser without
+`closedby`.
+
 Absent by default, which is the platform's `auto` and this library's rule
-that a resting value is an attribute's absence. */
+that a resting value is an attribute's absence. Absent, a press on the
+backdrop closes the dialog. */
   "prop:closedBy"?: (HelixHeadlessDialog["closedBy"]) | undefined;
   /** Draws a control that closes the dialog, in the corner where the title is.
 
@@ -11271,6 +11327,12 @@ lost its focus trap because a consumer forgot a word would be worse than an
 attribute on the host, and nothing selects on it: the scrim is rendered or
 not, rather than shown or hidden by CSS. */
   modal?: (HelixHeadlessDrawer["modal"]) | undefined;
+  /** Stops Escape, a press outside, and a swipe from closing the drawer, for a
+drawer that has to be answered.
+
+The close control and `close()` still close it, as on `Dialog`: a panel
+with no way out at all is a trap. */
+  persistent?: (HelixHeadlessDrawer["persistent"]) | undefined;
   /** Which edge the drawer comes from.
 
 Unset is `end`, and it stays unset rather than being written down: a
@@ -11398,6 +11460,12 @@ lost its focus trap because a consumer forgot a word would be worse than an
 attribute on the host, and nothing selects on it: the scrim is rendered or
 not, rather than shown or hidden by CSS. */
   "prop:modal"?: (HelixHeadlessDrawer["modal"]) | undefined;
+  /** Stops Escape, a press outside, and a swipe from closing the drawer, for a
+drawer that has to be answered.
+
+The close control and `close()` still close it, as on `Dialog`: a panel
+with no way out at all is a trap. */
+  "prop:persistent"?: (HelixHeadlessDrawer["persistent"]) | undefined;
   /** Which edge the drawer comes from.
 
 Unset is `end`, and it stays unset rather than being written down: a
@@ -25251,6 +25319,9 @@ Reading gives where it is; writing declares it the consumer's, and
 `default-position` seeds one this element owns. The same accessor pair
 `Pagination.page` and the calendar's `month` carry. */
   position?: (HelixHeadlessSplitter["position"]) | undefined;
+  /** The pane that keeps its size when the splitter's own size changes. The
+other pane takes all of the change. Unset, both keep their share. */
+  primary?: (HelixHeadlessSplitter["primary"]) | undefined;
   /** Where a dragged divider snaps, comma separated, as Web Awesome's split
 panel does: a bare number is a percentage and a length such as `240px` is
 measured along the splitter, so `snap="25, 50, 75"` or `snap="240px, 50"`.
@@ -25392,6 +25463,9 @@ Reading gives where it is; writing declares it the consumer's, and
 `default-position` seeds one this element owns. The same accessor pair
 `Pagination.page` and the calendar's `month` carry. */
   "prop:position"?: (HelixHeadlessSplitter["position"]) | undefined;
+  /** The pane that keeps its size when the splitter's own size changes. The
+other pane takes all of the change. Unset, both keep their share. */
+  "prop:primary"?: (HelixHeadlessSplitter["primary"]) | undefined;
   /** Where a dragged divider snaps, comma separated, as Web Awesome's split
 panel does: a bare number is a percentage and a length such as `240px` is
 measured along the splitter, so `snap="25, 50, 75"` or `snap="240px, 50"`.
@@ -32908,6 +32982,20 @@ export type CustomElements = {
    * The page is the window unless `scroller` names the element that scrolls, for
    * an app shell whose content scrolls inside a container.
    *
+   * **Set `hide-on-scroll` for a bar that moves out of the way.** Scrolling down
+   * past the bar's own height hides it, and scrolling up shows it again, as does
+   * focus moving into it. The custom state `hidden` is on the host while it is
+   * hidden, and the styled tier slides a `sticky` bar up out of view.
+   *
+   * **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.
+   *
    * 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
    * `<header>` is there, so a header inside a card or a pane does not add a
@@ -32934,6 +33022,11 @@ export type CustomElements = {
    * **Named for the region and not for what is usually in it.** The middle slot
    * takes a search field or a breadcrumb trail as readily as a `Navigation`, so
    * the property carries the part's name, `content`.
+   * - `fold-below`/`foldBelow`: The width of the bar, in pixels, below which the middle region folds behind
+   * a toggle. Unset, it never folds.
+   * - `hide-on-scroll`/`hideOnScroll`: Hides the bar as the page scrolls down past it, and shows it again as the
+   * page scrolls up.
+   * - `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.
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
@@ -32969,6 +33062,7 @@ export type CustomElements = {
    *
    * - `(default)`: The middle region, usually a `Navigation`.
    * - `end`: Trailing content.
+   * - `menu-icon`: Replaces the glyph inside the toggle that opens a folded middle region.
    * - `start`: Leading content, usually a wordmark.
    *
    * ## CSS Parts
@@ -32979,11 +33073,16 @@ export type CustomElements = {
    * - `end`: The trailing region.
    * - `row`: The centered row inside the banner.
    * - `start`: The leading region.
+   * - `toggle`: The control that opens and closes the folded middle region, drawn while the bar is narrower than `fold-below`.
+   * - `toggle-mark`: The glyph on the toggle, where none is slotted.
    *
    * ## CSS States
    *
    * These can be used to apply styling when a component is in a given state.
    *
+   * - `folded`: While the bar is narrower than `fold-below`, and the middle region is behind the toggle.
+   * - `hidden`: While `hide-on-scroll` has the bar out of the way, after a scroll down.
+   * - `open`: While the folded middle region is open.
    * - `scrolled`: While the page is scrolled down from the top, which is when the bar lifts off it.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
@@ -34019,7 +34118,10 @@ export type CustomElements = {
    * including your own anchor.
    *
    * The current page is plain text, and `aria-current="page"` on the host conveys
-   * the position.
+   * the position. In a trail where no crumb is `current`, the last one is said
+   * to be the current page, and keeps its link. An `aria-current` you write on
+   * the host, such as `aria-current="location"`, replaces the one the crumb
+   * gives itself.
    *
    * ## Attributes & Properties
    *
@@ -34109,7 +34211,8 @@ export type CustomElements = {
    * markers.
    *
    * The items are slotted directly, so they are `<ol>` children in the flat tree,
-   * and each item sets `role="listitem"` on itself.
+   * and each item sets `role="listitem"` on itself. Where no slotted crumb is
+   * `current`, the last one is said to be the current page.
    *
    * The trail does not measure itself, and you write its overflow in markup: put
    * the crumb that holds the folded items where the gap should appear.
@@ -34124,6 +34227,11 @@ export type CustomElements = {
    * to the first crumb it brought back. A new `items` folds again. Slotted crumbs
    * do not fold; write the folded crumb where the gap should be.
    *
+   * **Keyboard.** Each crumb with an `href` is a link and one tab stop, and
+   * Enter follows it. The current page and the separators are not in the tab
+   * order. In a folded trail, Enter or Space on the fold's button shows the
+   * whole trail and moves focus to the first crumb it brought back.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -40043,6 +40151,16 @@ export type CustomElements = {
    * announces with its description as it opens. Set `dismissible` to draw a
    * close control, labeled by `dismiss-label`.
    *
+   * **Keyboard.** Opening moves focus to the first control in the dialog.
+   *
+   * | Key | What it does |
+   * |---|---|
+   * | Tab, Shift+Tab | Moves through the controls in the dialog, from the last round to the first and from the first round to the last. |
+   * | Escape | Asks to close the dialog. A `helix-before-close` listener can refuse, and `persistent` or `closedby="none"` keeps it open. |
+   * | Enter, Space | On the close control, closes the dialog. |
+   *
+   * Closing puts focus back on the element that had it before the dialog opened.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -40064,8 +40182,14 @@ export type CustomElements = {
    * `closedby="any"` gains light dismiss without giving up the refusal, which is
    * the property this component exists to keep.
    *
+   * The press on the backdrop that this element handles itself follows it too:
+   * `closerequest` and `none` leave the dialog open on that press, as the
+   * platform does, and `none` also keeps it open on Escape in a browser without
+   * `closedby`.
+   *
    * Absent by default, which is the platform's `auto` and this library's rule
-   * that a resting value is an attribute's absence.
+   * that a resting value is an attribute's absence. Absent, a press on the
+   * backdrop closes the dialog.
    * - `dismissible`: Draws a control that closes the dialog, in the corner where the title is.
    *
    * Pressing it is `close()`, so it sends `helix-before-close` like every other
@@ -40545,6 +40669,11 @@ export type CustomElements = {
    * A drawer with `modal="false"` leaves the page usable and still closes on
    * Escape, in a browser without `closedby` as well.
    *
+   * Set `persistent` for a drawer that has to be answered: Escape, a press
+   * outside, and a swipe leave it open, and the close control and `close()`
+   * still close it. `closedby="none"` keeps it open on all three as well, and
+   * `closedby="closerequest"` keeps it open on a press outside.
+   *
    * **A touch or a pen swipes it away**, toward the edge it came from, resolved
    * against the writing direction. A swipe past halfway, or a quick one, closes
    * it through the same request as every other way out. `snap-points` lists the
@@ -40565,7 +40694,20 @@ export type CustomElements = {
    *
    * The panel's name is `label` when you set it. Otherwise it is the heading in
    * the `header` slot, or the elements an `aria-labelledby` on the host names,
-   * and `fallback-label` where nothing names it.
+   * and `fallback-label` where nothing names it. A development build warns
+   * when a drawer opens with nothing but `fallback-label` to name it.
+   *
+   * The panel is described by the words at the start of its body, as `Dialog`
+   * is: the elements in the default slot before the first one that is or holds
+   * a control. An `aria-describedby` on the host replaces it.
+   *
+   * **Keyboard.** Opening moves focus to the first control in the panel.
+   *
+   * | Key | What it does |
+   * |---|---|
+   * | Tab, Shift+Tab | In a modal drawer, moves through the controls in the panel, from the last round to the first and from the first round to the last. In a drawer that is not modal, moves on to the page. |
+   * | Escape | Asks to close the drawer. A `helix-before-close` listener can refuse, and `persistent` or `closedby="none"` keeps it open. |
+   * | Enter, Space | On the close control, closes the drawer. |
    *
    * Content stays mounted when the drawer is closed, so it is in the server
    * markup and can animate. A closed `<dialog>` is already out of the tab order
@@ -40616,6 +40758,11 @@ export type CustomElements = {
    * lost its focus trap because a consumer forgot a word would be worse than an
    * attribute on the host, and nothing selects on it: the scrim is rendered or
    * not, rather than shown or hidden by CSS.
+   * - `persistent`: Stops Escape, a press outside, and a swipe from closing the drawer, for a
+   * drawer that has to be answered.
+   *
+   * The close control and `close()` still close it, as on `Dialog`: a panel
+   * with no way out at all is a trap.
    * - `placement`: Which edge the drawer comes from.
    *
    * Unset is `end`, and it stays unset rather than being written down: a
@@ -44304,6 +44451,25 @@ export type CustomElements = {
    * swiped across the picture shows the next or the previous item, the way the
    * line of text runs.
    *
+   * A press on the empty area around the item closes the viewer, as a press on
+   * the backdrop does. Under `max-zoom`, a press beside the item zooms on a
+   * double press and closes nothing, and only the space outside the viewport
+   * closes the viewer. A press that dragged closes nothing.
+   *
+   * **Keyboard.** Opening moves focus to the viewer itself, which a screen
+   * reader names.
+   *
+   * | Key | What it does |
+   * |---|---|
+   * | Right, Down | Shows the next item. On a right-to-left page, Left does. While the item is zoomed, the arrows move about it instead. |
+   * | Left, Up | Shows the previous item. |
+   * | Home, End | Shows the first or the last item. |
+   * | `+`, `-`, `0` | Zooms in, zooms out, and puts the item back at its own size, where `max-zoom` allows zooming. |
+   * | Tab, Shift+Tab | Moves through the controls in the viewer, from the last round to the first and from the first round to the last. |
+   * | Escape | Closes the viewer. A `helix-before-close` listener can refuse. |
+   *
+   * A development build warns when a viewer opens with no `label`.
+   *
    * The chrome hides when there is no input, through `IdleController`, and comes
    * back on a pointer move, a key press, or a focus. It stays while focus is on a
    * control in the header or the footer, so a keyboard reader is never left on
@@ -47550,6 +47716,13 @@ export type CustomElements = {
    * one page can mark the section in view with `aria-current="location"`. Where
    * several are marked, `page` wins.
    *
+   * **The destinations can be a list.** Slot a `<ul>` or an `<ol>` of `<li>`
+   * elements, each holding a link, and a screen reader says how many there are
+   * and where each one is, as in Radix's `NavigationMenu.List`. The marker and
+   * the arrow keys work on the list items as they do on bare links. Give the
+   * list `role="list"` as well, since Safari drops the semantics of a list drawn
+   * without bullets.
+   *
    * Set `orientation="vertical"` to stack the destinations in a column, for a
    * sidebar.
    *
@@ -47927,6 +48100,17 @@ export type CustomElements = {
    * the feed holds one page of a longer list, and each row says its place in the
    * whole of it.
    *
+   * **Keyboard.**
+   *
+   * | Key | What it does |
+   * |---|---|
+   * | Down, Up | On a row, moves to the next or the previous row. |
+   * | Home, End | On a row, moves to the first or the last row. |
+   * | Page Down, Page Up | From anywhere in a row, moves to the next or the previous row. |
+   * | Control+End | From anywhere in the feed, moves to the first control after it on the page. |
+   * | Control+Home | From anywhere in the feed, moves to the nearest control before it on the page. |
+   * | Tab | Moves through the controls in a row, and on out of the feed. |
+   *
    * **`load-more` adds a button after the list** that sends `helix-load-more`,
    * for a feed that holds one page of a longer list. Append the next page, set
    * `loading` while it is on its way, and take `load-more` off once there is
@@ -49894,9 +50078,10 @@ export type CustomElements = {
    *
    * The trigger is slotted and stays your own element. A Helix trigger is told
    * whether the popover is open inside its own shadow root. On a plain element,
-   * such as a `<button>`, the popover writes `aria-expanded` only once a reader
-   * has pressed it, which is after any hydration, and never where you wrote
-   * `aria-expanded` yourself. It writes nothing else onto your markup.
+   * such as a `<button>`, the popover writes `aria-expanded`, from a frame after
+   * its own first render, or from the first press where that comes sooner. It
+   * never writes it where you wrote `aria-expanded` yourself, and writes nothing
+   * else onto your markup.
    *
    * The panel is in the top layer through the popover API, so it needs no
    * `z-index`, and an ancestor with `overflow: hidden`, `transform`, `filter`, or
@@ -49919,6 +50104,17 @@ export type CustomElements = {
    *
    * The panel's name is `label` when you set it. Otherwise it is the first
    * heading in the panel, or the elements an `aria-labelledby` on the host names.
+   * A development build warns when a popover opens with nothing but
+   * `fallback-label` to name it.
+   *
+   * **Keyboard.** Opening moves focus to the first control in the panel, or to
+   * the panel where it holds none.
+   *
+   * | Key | What it does |
+   * |---|---|
+   * | Enter, Space | On the trigger, opens the panel, or closes it while it is open. |
+   * | Escape | Closes the panel and puts focus back on the trigger. |
+   * | Tab, Shift+Tab | Moves through the controls in the panel. Leaving the panel and the trigger closes it. With `modal`, moves from the last control round to the first and from the first round to the last. |
    *
    * `arrow` draws a point on the panel's edge facing the trigger. The side the
    * panel landed on is on the host as `:state(placed-top)` and its kin, and the
@@ -52847,6 +53043,21 @@ export type CustomElements = {
    * `collapsed-size` keeps a sliver of the pane visible, such as a tab strip.
    * Collapsing overrides `min` and `max`.
    *
+   * Set `primary` to the pane that keeps its size when the splitter's own size
+   * changes, such as a sidebar beside a window being resized. The other pane
+   * takes all of the change, as Web Awesome's split panel does. Without it,
+   * both panes keep their share.
+   *
+   * **Keyboard.** The divider is one tab stop.
+   *
+   * | Key | What it does |
+   * |---|---|
+   * | Left, Right | Moves a side-by-side divider by `step`. On a right-to-left page, Left moves it toward the end. |
+   * | Up, Down | Moves a stacked divider by `step`. |
+   * | Home, End | Moves the divider to its bounds. |
+   * | Enter | Collapses the start pane, and opens it again. |
+   * | F6 | Moves focus from one pane to the first control in the other, and from the divider to the start pane. |
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -52928,6 +53139,8 @@ export type CustomElements = {
    * Reading gives where it is; writing declares it the consumer's, and
    * `default-position` seeds one this element owns. The same accessor pair
    * `Pagination.page` and the calendar's `month` carry.
+   * - `primary`: The pane that keeps its size when the splitter's own size changes. The
+   * other pane takes all of the change. Unset, both keep their share.
    * - `snap`: Where a dragged divider snaps, comma separated, as Web Awesome's split
    * panel does: a bare number is a percentage and a length such as `240px` is
    * measured along the splitter, so `snap="25, 50, 75"` or `snap="240px, 50"`.
@@ -54448,6 +54661,20 @@ export type CustomElements = {
    * Disabled tabs are passed over. Tab leaves the list for the selected panel,
    * which is a tab stop only while it holds nothing focusable.
    *
+   * **Keyboard.**
+   *
+   * | Key | What it does |
+   * |---|---|
+   * | Right, Down | Moves to the next tab, from the last round to the first. Selects it, unless `manual` is set or a tab is a link. |
+   * | Left, Up | Moves to the tab before, from the first round to the last. |
+   * | Home, End | Moves to the first or the last tab. |
+   * | 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.
+   *
    * The `indicator` part moves to the selected tab and carries its place and
    * size, so a mark of your own can be drawn there: style the part, or slot an
    * element into `indicator`, which sits inside the part and reads the same
@@ -57215,11 +57442,27 @@ export type CustomElements = {
    * you have moved it somewhere else on the page. A stop does not trap focus, so
    * you can still `Tab` out to the element it describes.
    *
-   * **The arrow keys move between stops** while focus is in one: the arrow that
-   * points the way the line runs goes on, and the other goes back, so on a
-   * right-to-left page `ArrowLeft` goes on. Neither finishes the tour at the last
-   * stop, and a text field in a stop keeps its own arrows. `Escape` skips the
-   * tour.
+   * **The target is scrolled into view** before its stop is shown, by the
+   * least distance that brings it on screen, so the stop that points at it is
+   * on screen too.
+   *
+   * **Keyboard.** Focus is on the current stop's panel, which is not in the
+   * `Tab` order itself.
+   *
+   * | Key | What it does |
+   * |---|---|
+   * | Right | Goes to the next stop. On the last stop it does nothing, and Next finishes the tour. |
+   * | Left | Goes back to the previous stop. |
+   * | Escape | Skips the tour, and puts focus back where it was when the tour opened. |
+   * | Tab, Shift+Tab | Moves through the controls in the stop, and on out to the page. A stop does not trap focus. |
+   * | Enter, Space | On Back, Next, or Skip, presses it. |
+   *
+   * The arrow that points the way the line runs goes on, and the other goes
+   * back, so on a right-to-left page Left goes on and Right goes back. A text field in a stop keeps
+   * its own arrows.
+   *
+   * The tour is a region named by `label` while it runs. A development build
+   * warns when a tour opens with no `label`.
    *
    * ## Attributes & Properties
    *
@@ -57383,7 +57626,8 @@ export type CustomElements = {
    * The panel is a `group`, and a `dialog` for a dialog stop, only while the
    * stop is shown. It is named by the `heading` slot, then by the first heading
    * in the content, then by `label`, and otherwise by its place in the tour. It
-   * is described by the `description` slot and by its place, such as "2 of 5",
+   * is described by the `description` slot, or where that is empty by the words
+   * at the start of the content, and by its place, such as "2 of 5",
    * so a screen reader says where the reader is at every stop. `focus()` moves
    * focus to the panel, which is what the tour does when it opens or moves on.
    *
@@ -57747,6 +57991,9 @@ export type CustomElements = {
    * tree of check marks, Control+A (Command+A on an Apple keyboard) checks every
    * item or clears them all, and Shift with Up or Down Arrow moves and checks.
    *
+   * Removing the item that has focus moves focus to the item after it among its
+   * siblings, or the one before, or its parent, so focus stays in the tree.
+   *
    * **`reorderable` lets you move items among their siblings.** Alt with Up or
    * Down moves the focused item a place, and Alt with Home or End to the first
    * or the last place among its siblings, as the APG's rearrangeable listbox
@@ -59462,6 +59709,20 @@ export type CustomElementsSolidJs = {
    * The page is the window unless `scroller` names the element that scrolls, for
    * an app shell whose content scrolls inside a container.
    *
+   * **Set `hide-on-scroll` for a bar that moves out of the way.** Scrolling down
+   * past the bar's own height hides it, and scrolling up shows it again, as does
+   * focus moving into it. The custom state `hidden` is on the host while it is
+   * hidden, and the styled tier slides a `sticky` bar up out of view.
+   *
+   * **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.
+   *
    * 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
    * `<header>` is there, so a header inside a card or a pane does not add a
@@ -59488,6 +59749,11 @@ export type CustomElementsSolidJs = {
    * **Named for the region and not for what is usually in it.** The middle slot
    * takes a search field or a breadcrumb trail as readily as a `Navigation`, so
    * the property carries the part's name, `content`.
+   * - `fold-below`/`foldBelow`: The width of the bar, in pixels, below which the middle region folds behind
+   * a toggle. Unset, it never folds.
+   * - `hide-on-scroll`/`hideOnScroll`: Hides the bar as the page scrolls down past it, and shows it again as the
+   * page scrolls up.
+   * - `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.
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
@@ -59523,6 +59789,7 @@ export type CustomElementsSolidJs = {
    *
    * - `(default)`: The middle region, usually a `Navigation`.
    * - `end`: Trailing content.
+   * - `menu-icon`: Replaces the glyph inside the toggle that opens a folded middle region.
    * - `start`: Leading content, usually a wordmark.
    *
    * ## CSS Parts
@@ -59533,11 +59800,16 @@ export type CustomElementsSolidJs = {
    * - `end`: The trailing region.
    * - `row`: The centered row inside the banner.
    * - `start`: The leading region.
+   * - `toggle`: The control that opens and closes the folded middle region, drawn while the bar is narrower than `fold-below`.
+   * - `toggle-mark`: The glyph on the toggle, where none is slotted.
    *
    * ## CSS States
    *
    * These can be used to apply styling when a component is in a given state.
    *
+   * - `folded`: While the bar is narrower than `fold-below`, and the middle region is behind the toggle.
+   * - `hidden`: While `hide-on-scroll` has the bar out of the way, after a scroll down.
+   * - `open`: While the folded middle region is open.
    * - `scrolled`: While the page is scrolled down from the top, which is when the bar lifts off it.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
@@ -60590,7 +60862,10 @@ export type CustomElementsSolidJs = {
    * including your own anchor.
    *
    * The current page is plain text, and `aria-current="page"` on the host conveys
-   * the position.
+   * the position. In a trail where no crumb is `current`, the last one is said
+   * to be the current page, and keeps its link. An `aria-current` you write on
+   * the host, such as `aria-current="location"`, replaces the one the crumb
+   * gives itself.
    *
    * ## Attributes & Properties
    *
@@ -60681,7 +60956,8 @@ export type CustomElementsSolidJs = {
    * markers.
    *
    * The items are slotted directly, so they are `<ol>` children in the flat tree,
-   * and each item sets `role="listitem"` on itself.
+   * and each item sets `role="listitem"` on itself. Where no slotted crumb is
+   * `current`, the last one is said to be the current page.
    *
    * The trail does not measure itself, and you write its overflow in markup: put
    * the crumb that holds the folded items where the gap should appear.
@@ -60696,6 +60972,11 @@ export type CustomElementsSolidJs = {
    * to the first crumb it brought back. A new `items` folds again. Slotted crumbs
    * do not fold; write the folded crumb where the gap should be.
    *
+   * **Keyboard.** Each crumb with an `href` is a link and one tab stop, and
+   * Enter follows it. The current page and the separators are not in the tab
+   * order. In a folded trail, Enter or Space on the fold's button shows the
+   * whole trail and moves focus to the first crumb it brought back.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -66667,6 +66948,16 @@ export type CustomElementsSolidJs = {
    * announces with its description as it opens. Set `dismissible` to draw a
    * close control, labeled by `dismiss-label`.
    *
+   * **Keyboard.** Opening moves focus to the first control in the dialog.
+   *
+   * | Key | What it does |
+   * |---|---|
+   * | Tab, Shift+Tab | Moves through the controls in the dialog, from the last round to the first and from the first round to the last. |
+   * | Escape | Asks to close the dialog. A `helix-before-close` listener can refuse, and `persistent` or `closedby="none"` keeps it open. |
+   * | Enter, Space | On the close control, closes the dialog. |
+   *
+   * Closing puts focus back on the element that had it before the dialog opened.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -66688,8 +66979,14 @@ export type CustomElementsSolidJs = {
    * `closedby="any"` gains light dismiss without giving up the refusal, which is
    * the property this component exists to keep.
    *
+   * The press on the backdrop that this element handles itself follows it too:
+   * `closerequest` and `none` leave the dialog open on that press, as the
+   * platform does, and `none` also keeps it open on Escape in a browser without
+   * `closedby`.
+   *
    * Absent by default, which is the platform's `auto` and this library's rule
-   * that a resting value is an attribute's absence.
+   * that a resting value is an attribute's absence. Absent, a press on the
+   * backdrop closes the dialog.
    * - `dismissible`: Draws a control that closes the dialog, in the corner where the title is.
    *
    * Pressing it is `close()`, so it sends `helix-before-close` like every other
@@ -67176,6 +67473,11 @@ export type CustomElementsSolidJs = {
    * A drawer with `modal="false"` leaves the page usable and still closes on
    * Escape, in a browser without `closedby` as well.
    *
+   * Set `persistent` for a drawer that has to be answered: Escape, a press
+   * outside, and a swipe leave it open, and the close control and `close()`
+   * still close it. `closedby="none"` keeps it open on all three as well, and
+   * `closedby="closerequest"` keeps it open on a press outside.
+   *
    * **A touch or a pen swipes it away**, toward the edge it came from, resolved
    * against the writing direction. A swipe past halfway, or a quick one, closes
    * it through the same request as every other way out. `snap-points` lists the
@@ -67196,7 +67498,20 @@ export type CustomElementsSolidJs = {
    *
    * The panel's name is `label` when you set it. Otherwise it is the heading in
    * the `header` slot, or the elements an `aria-labelledby` on the host names,
-   * and `fallback-label` where nothing names it.
+   * and `fallback-label` where nothing names it. A development build warns
+   * when a drawer opens with nothing but `fallback-label` to name it.
+   *
+   * The panel is described by the words at the start of its body, as `Dialog`
+   * is: the elements in the default slot before the first one that is or holds
+   * a control. An `aria-describedby` on the host replaces it.
+   *
+   * **Keyboard.** Opening moves focus to the first control in the panel.
+   *
+   * | Key | What it does |
+   * |---|---|
+   * | Tab, Shift+Tab | In a modal drawer, moves through the controls in the panel, from the last round to the first and from the first round to the last. In a drawer that is not modal, moves on to the page. |
+   * | Escape | Asks to close the drawer. A `helix-before-close` listener can refuse, and `persistent` or `closedby="none"` keeps it open. |
+   * | Enter, Space | On the close control, closes the drawer. |
    *
    * Content stays mounted when the drawer is closed, so it is in the server
    * markup and can animate. A closed `<dialog>` is already out of the tab order
@@ -67247,6 +67562,11 @@ export type CustomElementsSolidJs = {
    * lost its focus trap because a consumer forgot a word would be worse than an
    * attribute on the host, and nothing selects on it: the scrim is rendered or
    * not, rather than shown or hidden by CSS.
+   * - `persistent`: Stops Escape, a press outside, and a swipe from closing the drawer, for a
+   * drawer that has to be answered.
+   *
+   * The close control and `close()` still close it, as on `Dialog`: a panel
+   * with no way out at all is a trap.
    * - `placement`: Which edge the drawer comes from.
    *
    * Unset is `end`, and it stays unset rather than being written down: a
@@ -70977,6 +71297,25 @@ export type CustomElementsSolidJs = {
    * swiped across the picture shows the next or the previous item, the way the
    * line of text runs.
    *
+   * A press on the empty area around the item closes the viewer, as a press on
+   * the backdrop does. Under `max-zoom`, a press beside the item zooms on a
+   * double press and closes nothing, and only the space outside the viewport
+   * closes the viewer. A press that dragged closes nothing.
+   *
+   * **Keyboard.** Opening moves focus to the viewer itself, which a screen
+   * reader names.
+   *
+   * | Key | What it does |
+   * |---|---|
+   * | Right, Down | Shows the next item. On a right-to-left page, Left does. While the item is zoomed, the arrows move about it instead. |
+   * | Left, Up | Shows the previous item. |
+   * | Home, End | Shows the first or the last item. |
+   * | `+`, `-`, `0` | Zooms in, zooms out, and puts the item back at its own size, where `max-zoom` allows zooming. |
+   * | Tab, Shift+Tab | Moves through the controls in the viewer, from the last round to the first and from the first round to the last. |
+   * | Escape | Closes the viewer. A `helix-before-close` listener can refuse. |
+   *
+   * A development build warns when a viewer opens with no `label`.
+   *
    * The chrome hides when there is no input, through `IdleController`, and comes
    * back on a pointer move, a key press, or a focus. It stays while focus is on a
    * control in the header or the footer, so a keyboard reader is never left on
@@ -74277,6 +74616,13 @@ export type CustomElementsSolidJs = {
    * one page can mark the section in view with `aria-current="location"`. Where
    * several are marked, `page` wins.
    *
+   * **The destinations can be a list.** Slot a `<ul>` or an `<ol>` of `<li>`
+   * elements, each holding a link, and a screen reader says how many there are
+   * and where each one is, as in Radix's `NavigationMenu.List`. The marker and
+   * the arrow keys work on the list items as they do on bare links. Give the
+   * list `role="list"` as well, since Safari drops the semantics of a list drawn
+   * without bullets.
+   *
    * Set `orientation="vertical"` to stack the destinations in a column, for a
    * sidebar.
    *
@@ -74657,6 +75003,17 @@ export type CustomElementsSolidJs = {
    * the feed holds one page of a longer list, and each row says its place in the
    * whole of it.
    *
+   * **Keyboard.**
+   *
+   * | Key | What it does |
+   * |---|---|
+   * | Down, Up | On a row, moves to the next or the previous row. |
+   * | Home, End | On a row, moves to the first or the last row. |
+   * | Page Down, Page Up | From anywhere in a row, moves to the next or the previous row. |
+   * | Control+End | From anywhere in the feed, moves to the first control after it on the page. |
+   * | Control+Home | From anywhere in the feed, moves to the nearest control before it on the page. |
+   * | Tab | Moves through the controls in a row, and on out of the feed. |
+   *
    * **`load-more` adds a button after the list** that sends `helix-load-more`,
    * for a feed that holds one page of a longer list. Append the next page, set
    * `loading` while it is on its way, and take `load-more` off once there is
@@ -76641,9 +76998,10 @@ export type CustomElementsSolidJs = {
    *
    * The trigger is slotted and stays your own element. A Helix trigger is told
    * whether the popover is open inside its own shadow root. On a plain element,
-   * such as a `<button>`, the popover writes `aria-expanded` only once a reader
-   * has pressed it, which is after any hydration, and never where you wrote
-   * `aria-expanded` yourself. It writes nothing else onto your markup.
+   * such as a `<button>`, the popover writes `aria-expanded`, from a frame after
+   * its own first render, or from the first press where that comes sooner. It
+   * never writes it where you wrote `aria-expanded` yourself, and writes nothing
+   * else onto your markup.
    *
    * The panel is in the top layer through the popover API, so it needs no
    * `z-index`, and an ancestor with `overflow: hidden`, `transform`, `filter`, or
@@ -76666,6 +77024,17 @@ export type CustomElementsSolidJs = {
    *
    * The panel's name is `label` when you set it. Otherwise it is the first
    * heading in the panel, or the elements an `aria-labelledby` on the host names.
+   * A development build warns when a popover opens with nothing but
+   * `fallback-label` to name it.
+   *
+   * **Keyboard.** Opening moves focus to the first control in the panel, or to
+   * the panel where it holds none.
+   *
+   * | Key | What it does |
+   * |---|---|
+   * | Enter, Space | On the trigger, opens the panel, or closes it while it is open. |
+   * | Escape | Closes the panel and puts focus back on the trigger. |
+   * | Tab, Shift+Tab | Moves through the controls in the panel. Leaving the panel and the trigger closes it. With `modal`, moves from the last control round to the first and from the first round to the last. |
    *
    * `arrow` draws a point on the panel's edge facing the trigger. The side the
    * panel landed on is on the host as `:state(placed-top)` and its kin, and the
@@ -79635,6 +80004,21 @@ export type CustomElementsSolidJs = {
    * `collapsed-size` keeps a sliver of the pane visible, such as a tab strip.
    * Collapsing overrides `min` and `max`.
    *
+   * Set `primary` to the pane that keeps its size when the splitter's own size
+   * changes, such as a sidebar beside a window being resized. The other pane
+   * takes all of the change, as Web Awesome's split panel does. Without it,
+   * both panes keep their share.
+   *
+   * **Keyboard.** The divider is one tab stop.
+   *
+   * | Key | What it does |
+   * |---|---|
+   * | Left, Right | Moves a side-by-side divider by `step`. On a right-to-left page, Left moves it toward the end. |
+   * | Up, Down | Moves a stacked divider by `step`. |
+   * | Home, End | Moves the divider to its bounds. |
+   * | Enter | Collapses the start pane, and opens it again. |
+   * | F6 | Moves focus from one pane to the first control in the other, and from the divider to the start pane. |
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -79716,6 +80100,8 @@ export type CustomElementsSolidJs = {
    * Reading gives where it is; writing declares it the consumer's, and
    * `default-position` seeds one this element owns. The same accessor pair
    * `Pagination.page` and the calendar's `month` carry.
+   * - `primary`: The pane that keeps its size when the splitter's own size changes. The
+   * other pane takes all of the change. Unset, both keep their share.
    * - `snap`: Where a dragged divider snaps, comma separated, as Web Awesome's split
    * panel does: a bare number is a percentage and a length such as `240px` is
    * measured along the splitter, so `snap="25, 50, 75"` or `snap="240px, 50"`.
@@ -81267,6 +81653,20 @@ export type CustomElementsSolidJs = {
    * Disabled tabs are passed over. Tab leaves the list for the selected panel,
    * which is a tab stop only while it holds nothing focusable.
    *
+   * **Keyboard.**
+   *
+   * | Key | What it does |
+   * |---|---|
+   * | Right, Down | Moves to the next tab, from the last round to the first. Selects it, unless `manual` is set or a tab is a link. |
+   * | Left, Up | Moves to the tab before, from the first round to the last. |
+   * | Home, End | Moves to the first or the last tab. |
+   * | 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.
+   *
    * The `indicator` part moves to the selected tab and carries its place and
    * size, so a mark of your own can be drawn there: style the part, or slot an
    * element into `indicator`, which sits inside the part and reads the same
@@ -84074,11 +84474,27 @@ export type CustomElementsSolidJs = {
    * you have moved it somewhere else on the page. A stop does not trap focus, so
    * you can still `Tab` out to the element it describes.
    *
-   * **The arrow keys move between stops** while focus is in one: the arrow that
-   * points the way the line runs goes on, and the other goes back, so on a
-   * right-to-left page `ArrowLeft` goes on. Neither finishes the tour at the last
-   * stop, and a text field in a stop keeps its own arrows. `Escape` skips the
-   * tour.
+   * **The target is scrolled into view** before its stop is shown, by the
+   * least distance that brings it on screen, so the stop that points at it is
+   * on screen too.
+   *
+   * **Keyboard.** Focus is on the current stop's panel, which is not in the
+   * `Tab` order itself.
+   *
+   * | Key | What it does |
+   * |---|---|
+   * | Right | Goes to the next stop. On the last stop it does nothing, and Next finishes the tour. |
+   * | Left | Goes back to the previous stop. |
+   * | Escape | Skips the tour, and puts focus back where it was when the tour opened. |
+   * | Tab, Shift+Tab | Moves through the controls in the stop, and on out to the page. A stop does not trap focus. |
+   * | Enter, Space | On Back, Next, or Skip, presses it. |
+   *
+   * The arrow that points the way the line runs goes on, and the other goes
+   * back, so on a right-to-left page Left goes on and Right goes back. A text field in a stop keeps
+   * its own arrows.
+   *
+   * The tour is a region named by `label` while it runs. A development build
+   * warns when a tour opens with no `label`.
    *
    * ## Attributes & Properties
    *
@@ -84245,7 +84661,8 @@ export type CustomElementsSolidJs = {
    * The panel is a `group`, and a `dialog` for a dialog stop, only while the
    * stop is shown. It is named by the `heading` slot, then by the first heading
    * in the content, then by `label`, and otherwise by its place in the tour. It
-   * is described by the `description` slot and by its place, such as "2 of 5",
+   * is described by the `description` slot, or where that is empty by the words
+   * at the start of the content, and by its place, such as "2 of 5",
    * so a screen reader says where the reader is at every stop. `focus()` moves
    * focus to the panel, which is what the tour does when it opens or moves on.
    *
@@ -84615,6 +85032,9 @@ export type CustomElementsSolidJs = {
    * tree of check marks, Control+A (Command+A on an Apple keyboard) checks every
    * item or clears them all, and Shift with Up or Down Arrow moves and checks.
    *
+   * Removing the item that has focus moves focus to the item after it among its
+   * siblings, or the one before, or its parent, so focus stays in the tree.
+   *
    * **`reorderable` lets you move items among their siblings.** Alt with Up or
    * Down moves the focused item a place, and Alt with Home or End to the first
    * or the last place among its siblings, as the APG's rearrangeable listbox