@fusion.dev/helix-headless 0.162.1 → 0.163.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-headless",
   "description": "Headless component tier. Structure, accessibility, state, and form participation. No styling.",
-  "version": "0.162.1",
+  "version": "0.163.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -49,13 +49,13 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.162.1",
-    "@fusion.dev/helix-icons": "0.162.1",
+    "@fusion.dev/helix-core": "0.163.0",
+    "@fusion.dev/helix-icons": "0.163.0",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.162.1",
-    "@fusion.dev/helix-testing": "0.162.1",
+    "@fusion.dev/helix-cem": "0.163.0",
+    "@fusion.dev/helix-testing": "0.163.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.14.5",
     "@lit-labs/ssr": "^4.1.0",

package/types/jsx.d.ts

@@ -3754,6 +3754,13 @@ at any zoom, and a consumer who wants their own units multiplies by them. */
   "zoom-out-label"?: (HelixHeadlessCanvas["zoomOutLabel"]) | undefined;
   /** The zoom out button's label. */
   zoomOutLabel?: (HelixHeadlessCanvas["zoomOutLabel"]) | undefined;
+  /** Draws every connection's line: a function from where it leaves and
+arrives, and the sides it does, to its SVG path and where its label sits.
+
+Absent, or returning nothing for a connection, draws the board's own
+route. A function that throws draws the board's own too, and the error is
+reported to the page as an uncaught one. Set it as a property. */
+  edgeRoute?: (HelixHeadlessCanvas["edgeRoute"]) | undefined;
   /** The board's current view: the document's point at the middle of the view,
 and the zoom.
 
@@ -4202,6 +4209,13 @@ at any zoom, and a consumer who wants their own units multiplies by them. */
   "attr:zoom-out-label"?: (HelixHeadlessCanvas["zoomOutLabel"]) | undefined;
   /** The zoom out button's label. */
   "prop:zoomOutLabel"?: (HelixHeadlessCanvas["zoomOutLabel"]) | undefined;
+  /** Draws every connection's line: a function from where it leaves and
+arrives, and the sides it does, to its SVG path and where its label sits.
+
+Absent, or returning nothing for a connection, draws the board's own
+route. A function that throws draws the board's own too, and the error is
+reported to the page as an uncaught one. Set it as a property. */
+  "prop:edgeRoute"?: (HelixHeadlessCanvas["edgeRoute"]) | undefined;
   /** The board's current view: the document's point at the middle of the view,
 and the zoom.
 
@@ -20613,7 +20627,8 @@ was never tickable look identical from here. Announcing only the ticked one
 as a checkbox tells a reader its siblings are commands, which is the one
 thing they are not.
 
-`checked` implies it, so a row that is on never has to say both.
+`checked` and `exclusive` imply it, so a row that is on, or one of a set,
+never has to say both.
 
 Choosing the row checks or unchecks it, after a `helix-before-toggle` that
 you can cancel. */
@@ -20623,6 +20638,18 @@ you can cancel. */
 The row changes it when it is chosen. Not reflected: the attribute is the
 state you start the row in, and `:state(checked)` carries the current one. */
   checked?: (HelixHeadlessMenuItem["checked"]) | undefined;
+  /** Whether choosing the row closes the menu.
+
+Unset takes the menu's `close-on-select`, which is on, and keeps the menu
+open after a Space on a choice row. Write `close-on-select="false"` for a
+row that changes something the reader is watching, such as a zoom step. */
+  "close-on-select"?: (HelixHeadlessMenuItem["closeOnSelect"]) | undefined;
+  /** Whether choosing the row closes the menu.
+
+Unset takes the menu's `close-on-select`, which is on, and keeps the menu
+open after a Space on a choice row. Write `close-on-select="false"` for a
+row that changes something the reader is watching, such as a zoom step. */
+  closeOnSelect?: (HelixHeadlessMenuItem["closeOnSelect"]) | undefined;
   /** Whether the row is disabled, so it cannot be chosen. */
   disabled?: (HelixHeadlessMenuItem["disabled"]) | undefined;
   /** Whether the link downloads the file when the row is chosen.
@@ -20639,8 +20666,7 @@ that row and unchecks the others. Choosing the row that is checked leaves
 it checked. `menuitemradio` tells a reader which kind of set they are in,
 where `menuitemcheckbox` says every row is independent.
 
-Meaningless without `checkable`, since a row that cannot be ticked is not
-one of a set of anything. */
+It makes the row a choice, so it needs no `checkable` beside it. */
   exclusive?: (HelixHeadlessMenuItem["exclusive"]) | undefined;
   /** The URL the row links to. Setting it renders the row as a link.
 
@@ -20687,7 +20713,8 @@ was never tickable look identical from here. Announcing only the ticked one
 as a checkbox tells a reader its siblings are commands, which is the one
 thing they are not.
 
-`checked` implies it, so a row that is on never has to say both.
+`checked` and `exclusive` imply it, so a row that is on, or one of a set,
+never has to say both.
 
 Choosing the row checks or unchecks it, after a `helix-before-toggle` that
 you can cancel. */
@@ -20697,6 +20724,18 @@ you can cancel. */
 The row changes it when it is chosen. Not reflected: the attribute is the
 state you start the row in, and `:state(checked)` carries the current one. */
   "prop:checked"?: (HelixHeadlessMenuItem["checked"]) | undefined;
+  /** Whether choosing the row closes the menu.
+
+Unset takes the menu's `close-on-select`, which is on, and keeps the menu
+open after a Space on a choice row. Write `close-on-select="false"` for a
+row that changes something the reader is watching, such as a zoom step. */
+  "bool:close-on-select"?: (HelixHeadlessMenuItem["closeOnSelect"]) | undefined;
+  /** Whether choosing the row closes the menu.
+
+Unset takes the menu's `close-on-select`, which is on, and keeps the menu
+open after a Space on a choice row. Write `close-on-select="false"` for a
+row that changes something the reader is watching, such as a zoom step. */
+  "prop:closeOnSelect"?: (HelixHeadlessMenuItem["closeOnSelect"]) | undefined;
   /** Whether the row is disabled, so it cannot be chosen. */
   "prop:disabled"?: (HelixHeadlessMenuItem["disabled"]) | undefined;
   /** Whether the link downloads the file when the row is chosen.
@@ -20713,8 +20752,7 @@ that row and unchecks the others. Choosing the row that is checked leaves
 it checked. `menuitemradio` tells a reader which kind of set they are in,
 where `menuitemcheckbox` says every row is independent.
 
-Meaningless without `checkable`, since a row that cannot be ticked is not
-one of a set of anything. */
+It makes the row a choice, so it needs no `checkable` beside it. */
   "prop:exclusive"?: (HelixHeadlessMenuItem["exclusive"]) | undefined;
   /** The URL the row links to. Setting it renders the row as a link.
 
@@ -20779,6 +20817,18 @@ export type HelixHeadlessMenuProps = {
   "back-label"?: (HelixHeadlessMenu["backLabel"]) | undefined;
   /** The text of the row that returns from a submenu. */
   backLabel?: (HelixHeadlessMenu["backLabel"]) | undefined;
+  /** Whether choosing a row closes the menu.
+
+On by default, and a Space on a choice row leaves the menu open either way.
+Write `close-on-select="false"` to keep the menu open after every choice, as
+Ark UI's `closeOnSelect` does. A row's own `close-on-select` wins over this. */
+  "close-on-select"?: (HelixHeadlessMenu["closeOnSelect"]) | undefined;
+  /** Whether choosing a row closes the menu.
+
+On by default, and a Space on a choice row leaves the menu open either way.
+Write `close-on-select="false"` to keep the menu open after every choice, as
+Ark UI's `closeOnSelect` does. A row's own `close-on-select` wins over this. */
+  closeOnSelect?: (HelixHeadlessMenu["closeOnSelect"]) | undefined;
   /** Whether the menu is the trigger's context menu: it opens where the reader
 asks for one, with a right-click, a long press, Shift+F10 or the menu key. */
   context?: (HelixHeadlessMenu["context"]) | undefined;
@@ -20862,6 +20912,18 @@ export type HelixHeadlessMenuSolidJsProps = {
   "attr:back-label"?: (HelixHeadlessMenu["backLabel"]) | undefined;
   /** The text of the row that returns from a submenu. */
   "prop:backLabel"?: (HelixHeadlessMenu["backLabel"]) | undefined;
+  /** Whether choosing a row closes the menu.
+
+On by default, and a Space on a choice row leaves the menu open either way.
+Write `close-on-select="false"` to keep the menu open after every choice, as
+Ark UI's `closeOnSelect` does. A row's own `close-on-select` wins over this. */
+  "bool:close-on-select"?: (HelixHeadlessMenu["closeOnSelect"]) | undefined;
+  /** Whether choosing a row closes the menu.
+
+On by default, and a Space on a choice row leaves the menu open either way.
+Write `close-on-select="false"` to keep the menu open after every choice, as
+Ark UI's `closeOnSelect` does. A row's own `close-on-select` wins over this. */
+  "prop:closeOnSelect"?: (HelixHeadlessMenu["closeOnSelect"]) | undefined;
   /** Whether the menu is the trigger's context menu: it opens where the reader
 asks for one, with a right-click, a long press, Shift+F10 or the menu key. */
   "prop:context"?: (HelixHeadlessMenu["context"]) | undefined;
@@ -38751,6 +38813,17 @@ export type CustomElements = {
    * connection is a new element, and React discards an element the board adds to
    * its markup on the next render, so you write the connection.
    *
+   * **`edgeRoute` draws the connections' lines your own way**: a function from
+   * where a line leaves and arrives, and the sides it does, to its SVG path, for
+   * a route such as one that bends around the cards between. What it returns
+   * is the line drawn, the line pressed and focused, and the one an arrowhead
+   * sits at the end of. Nothing back draws the board's own.
+   *
+   * Add `minimap` to `controls` for a picture of the whole board in a corner:
+   * each card as a box, and a frame around what is on screen. A press or a drag
+   * on it brings that place to the middle of the view. It is for a pointer, and
+   * a screen reader skips it: the arrow keys and `show()` reach every card.
+   *
    * Cards and connections are `helix-canvas-node` and `helix-canvas-edge`
    * elements, so they are in the served markup whichever renderer wrote them. The
    * library fetches nothing, and an array passed to an element is missing from
@@ -38962,6 +39035,12 @@ export type CustomElements = {
    * - `pan-up-label`/`panUpLabel`: The pan up button's label.
    * - `zoom-in-label`/`zoomInLabel`: The zoom in button's label.
    * - `zoom-out-label`/`zoomOutLabel`: The zoom out button's label.
+   * - `edgeRoute`: Draws every connection's line: a function from where it leaves and
+   * arrives, and the sides it does, to its SVG path and where its label sits.
+   *
+   * Absent, or returning nothing for a connection, draws the board's own
+   * route. A function that throws draws the board's own too, and the error is
+   * reported to the page as an uncaught one. Set it as a property. (property only)
    * - `view`: The board's current view: the document's point at the middle of the view,
    * and the zoom.
    *
@@ -39102,6 +39181,9 @@ export type CustomElements = {
    * - `label-editor`: The field for editing a connection's label or a group's name, placed over that text.
    * - `live`: A live region that screen readers announce while a connection is being made.
    * - `marquee`: The box a Shift-drag across the empty board draws, which selects the cards it touches.
+   * - `minimap`: The picture of the whole board, under `controls="minimap"`.
+   * - `minimap-node`: One card in the minimap.
+   * - `minimap-view`: The frame in the minimap around what is on screen.
    * - `pan-down`: The button that moves the board down.
    * - `pan-end`: The button that moves the board toward the end of a line of text: right in English.
    * - `pan-start`: The button that moves the board toward the start of a line of text: left in English.
@@ -50797,7 +50879,8 @@ export type CustomElements = {
    * same `group`, such as a route and its dotted legs, share one tile. A tile
    * sends `helix-before-toggle` from the layer first, so you can store the
    * choice or refuse it, and `helix-toggle` from it once `hidden` holds the
-   * choice.
+   * choice. Escape closes the menu and returns focus to its button, and the menu
+   * closes when focus moves on from it or a press lands outside the map.
    *
    * Imagery, a `helix-map-raster` with `ground`, is a map type and not a tile.
    * The menu opens with a card for each type, Standard, Hybrid, and Satellite,
@@ -51458,16 +51541,22 @@ export type CustomElements = {
    * - `checked` makes the row a choice.
    * - With neither, the row is a command.
    *
-   * The role follows the kind. A row with `checked` is `menuitemcheckbox` with
-   * `aria-checked`, and `exclusive` makes it `menuitemradio`, for a set where
-   * only one can be on. A row that opens a page keeps `menuitem` and sets
-   * `aria-haspopup`.
+   * The role follows the kind. A row with `checkable` or `checked` is
+   * `menuitemcheckbox` with `aria-checked`, and an `exclusive` row is
+   * `menuitemradio`, for a set where only one can be on. A row that opens a page
+   * keeps `menuitem` and sets `aria-haspopup`.
    *
    * Choosing a choice row checks or unchecks it before `helix-select` is sent,
    * so a listener reads the new `checked`. An `exclusive` row turns on and turns
    * off the `exclusive` rows next to it. Cancel `helix-before-toggle` to keep a
    * row as it is and set `checked` yourself.
    *
+   * Space on a choice row changes it and leaves the menu open, so a reader can
+   * set several in a row, as the APG's menu does. Enter and a press change it and
+   * close the menu. `close-on-select="false"` on the row keeps the menu open after
+   * any choice of it, and `close-on-select` on the row closes it after a Space as
+   * well.
+   *
    * The menu sets whether the row's page is showing as a property, never as an
    * attribute. An attribute written onto your element after it upgrades causes a
    * hydration mismatch.
@@ -51501,7 +51590,8 @@ export type CustomElements = {
    * as a checkbox tells a reader its siblings are commands, which is the one
    * thing they are not.
    *
-   * `checked` implies it, so a row that is on never has to say both.
+   * `checked` and `exclusive` imply it, so a row that is on, or one of a set,
+   * never has to say both.
    *
    * Choosing the row checks or unchecks it, after a `helix-before-toggle` that
    * you can cancel.
@@ -51509,6 +51599,11 @@ export type CustomElements = {
    *
    * The row changes it when it is chosen. Not reflected: the attribute is the
    * state you start the row in, and `:state(checked)` carries the current one.
+   * - `close-on-select`/`closeOnSelect`: Whether choosing the row closes the menu.
+   *
+   * Unset takes the menu's `close-on-select`, which is on, and keeps the menu
+   * open after a Space on a choice row. Write `close-on-select="false"` for a
+   * row that changes something the reader is watching, such as a zoom step.
    * - `disabled`: Whether the row is disabled, so it cannot be chosen.
    * - `download`: Whether the link downloads the file when the row is chosen.
    *
@@ -51523,8 +51618,7 @@ export type CustomElements = {
    * it checked. `menuitemradio` tells a reader which kind of set they are in,
    * where `menuitemcheckbox` says every row is independent.
    *
-   * Meaningless without `checkable`, since a row that cannot be ticked is not
-   * one of a set of anything.
+   * It makes the row a choice, so it needs no `checkable` beside it.
    * - `href`: The URL the row links to. Setting it renders the row as a link.
    *
    * **The row itself becomes an `<a>`, and the role goes with it.** A
@@ -51680,7 +51774,8 @@ export type CustomElements = {
    * Keys: Enter, Space or Down Arrow on the trigger opens the menu on its first
    * row, and Up Arrow on its last. In the menu, Up and Down Arrow move between
    * 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
+   * the next row whose name starts with it, Enter and Space choose (Space on a
+   * choice row changes it and leaves the menu open), Right Arrow
    * opens a row's submenu and Left Arrow goes back, the two swapping on a
    * 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.
@@ -51709,6 +51804,11 @@ export type CustomElements = {
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
    * - `back-label`/`backLabel`: The text of the row that returns from a submenu.
+   * - `close-on-select`/`closeOnSelect`: Whether choosing a row closes the menu.
+   *
+   * On by default, and a Space on a choice row leaves the menu open either way.
+   * Write `close-on-select="false"` to keep the menu open after every choice, as
+   * Ark UI's `closeOnSelect` does. A row's own `close-on-select` wins over this.
    * - `context`: Whether the menu is the trigger's context menu: it opens where the reader
    * asks for one, with a right-click, a long press, Shift+F10 or the menu key.
    * - `label`: Accessible name for the surface.
@@ -67412,6 +67512,17 @@ export type CustomElementsSolidJs = {
    * connection is a new element, and React discards an element the board adds to
    * its markup on the next render, so you write the connection.
    *
+   * **`edgeRoute` draws the connections' lines your own way**: a function from
+   * where a line leaves and arrives, and the sides it does, to its SVG path, for
+   * a route such as one that bends around the cards between. What it returns
+   * is the line drawn, the line pressed and focused, and the one an arrowhead
+   * sits at the end of. Nothing back draws the board's own.
+   *
+   * Add `minimap` to `controls` for a picture of the whole board in a corner:
+   * each card as a box, and a frame around what is on screen. A press or a drag
+   * on it brings that place to the middle of the view. It is for a pointer, and
+   * a screen reader skips it: the arrow keys and `show()` reach every card.
+   *
    * Cards and connections are `helix-canvas-node` and `helix-canvas-edge`
    * elements, so they are in the served markup whichever renderer wrote them. The
    * library fetches nothing, and an array passed to an element is missing from
@@ -67623,6 +67734,12 @@ export type CustomElementsSolidJs = {
    * - `pan-up-label`/`panUpLabel`: The pan up button's label.
    * - `zoom-in-label`/`zoomInLabel`: The zoom in button's label.
    * - `zoom-out-label`/`zoomOutLabel`: The zoom out button's label.
+   * - `edgeRoute`: Draws every connection's line: a function from where it leaves and
+   * arrives, and the sides it does, to its SVG path and where its label sits.
+   *
+   * Absent, or returning nothing for a connection, draws the board's own
+   * route. A function that throws draws the board's own too, and the error is
+   * reported to the page as an uncaught one. Set it as a property. (property only)
    * - `view`: The board's current view: the document's point at the middle of the view,
    * and the zoom.
    *
@@ -67763,6 +67880,9 @@ export type CustomElementsSolidJs = {
    * - `label-editor`: The field for editing a connection's label or a group's name, placed over that text.
    * - `live`: A live region that screen readers announce while a connection is being made.
    * - `marquee`: The box a Shift-drag across the empty board draws, which selects the cards it touches.
+   * - `minimap`: The picture of the whole board, under `controls="minimap"`.
+   * - `minimap-node`: One card in the minimap.
+   * - `minimap-view`: The frame in the minimap around what is on screen.
    * - `pan-down`: The button that moves the board down.
    * - `pan-end`: The button that moves the board toward the end of a line of text: right in English.
    * - `pan-start`: The button that moves the board toward the start of a line of text: left in English.
@@ -79583,7 +79703,8 @@ export type CustomElementsSolidJs = {
    * same `group`, such as a route and its dotted legs, share one tile. A tile
    * sends `helix-before-toggle` from the layer first, so you can store the
    * choice or refuse it, and `helix-toggle` from it once `hidden` holds the
-   * choice.
+   * choice. Escape closes the menu and returns focus to its button, and the menu
+   * closes when focus moves on from it or a press lands outside the map.
    *
    * Imagery, a `helix-map-raster` with `ground`, is a map type and not a tile.
    * The menu opens with a card for each type, Standard, Hybrid, and Satellite,
@@ -80254,16 +80375,22 @@ export type CustomElementsSolidJs = {
    * - `checked` makes the row a choice.
    * - With neither, the row is a command.
    *
-   * The role follows the kind. A row with `checked` is `menuitemcheckbox` with
-   * `aria-checked`, and `exclusive` makes it `menuitemradio`, for a set where
-   * only one can be on. A row that opens a page keeps `menuitem` and sets
-   * `aria-haspopup`.
+   * The role follows the kind. A row with `checkable` or `checked` is
+   * `menuitemcheckbox` with `aria-checked`, and an `exclusive` row is
+   * `menuitemradio`, for a set where only one can be on. A row that opens a page
+   * keeps `menuitem` and sets `aria-haspopup`.
    *
    * Choosing a choice row checks or unchecks it before `helix-select` is sent,
    * so a listener reads the new `checked`. An `exclusive` row turns on and turns
    * off the `exclusive` rows next to it. Cancel `helix-before-toggle` to keep a
    * row as it is and set `checked` yourself.
    *
+   * Space on a choice row changes it and leaves the menu open, so a reader can
+   * set several in a row, as the APG's menu does. Enter and a press change it and
+   * close the menu. `close-on-select="false"` on the row keeps the menu open after
+   * any choice of it, and `close-on-select` on the row closes it after a Space as
+   * well.
+   *
    * The menu sets whether the row's page is showing as a property, never as an
    * attribute. An attribute written onto your element after it upgrades causes a
    * hydration mismatch.
@@ -80297,7 +80424,8 @@ export type CustomElementsSolidJs = {
    * as a checkbox tells a reader its siblings are commands, which is the one
    * thing they are not.
    *
-   * `checked` implies it, so a row that is on never has to say both.
+   * `checked` and `exclusive` imply it, so a row that is on, or one of a set,
+   * never has to say both.
    *
    * Choosing the row checks or unchecks it, after a `helix-before-toggle` that
    * you can cancel.
@@ -80305,6 +80433,11 @@ export type CustomElementsSolidJs = {
    *
    * The row changes it when it is chosen. Not reflected: the attribute is the
    * state you start the row in, and `:state(checked)` carries the current one.
+   * - `close-on-select`/`closeOnSelect`: Whether choosing the row closes the menu.
+   *
+   * Unset takes the menu's `close-on-select`, which is on, and keeps the menu
+   * open after a Space on a choice row. Write `close-on-select="false"` for a
+   * row that changes something the reader is watching, such as a zoom step.
    * - `disabled`: Whether the row is disabled, so it cannot be chosen.
    * - `download`: Whether the link downloads the file when the row is chosen.
    *
@@ -80319,8 +80452,7 @@ export type CustomElementsSolidJs = {
    * it checked. `menuitemradio` tells a reader which kind of set they are in,
    * where `menuitemcheckbox` says every row is independent.
    *
-   * Meaningless without `checkable`, since a row that cannot be ticked is not
-   * one of a set of anything.
+   * It makes the row a choice, so it needs no `checkable` beside it.
    * - `href`: The URL the row links to. Setting it renders the row as a link.
    *
    * **The row itself becomes an `<a>`, and the role goes with it.** A
@@ -80479,7 +80611,8 @@ export type CustomElementsSolidJs = {
    * Keys: Enter, Space or Down Arrow on the trigger opens the menu on its first
    * row, and Up Arrow on its last. In the menu, Up and Down Arrow move between
    * 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
+   * the next row whose name starts with it, Enter and Space choose (Space on a
+   * choice row changes it and leaves the menu open), Right Arrow
    * opens a row's submenu and Left Arrow goes back, the two swapping on a
    * 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.
@@ -80508,6 +80641,11 @@ export type CustomElementsSolidJs = {
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
    * - `back-label`/`backLabel`: The text of the row that returns from a submenu.
+   * - `close-on-select`/`closeOnSelect`: Whether choosing a row closes the menu.
+   *
+   * On by default, and a Space on a choice row leaves the menu open either way.
+   * Write `close-on-select="false"` to keep the menu open after every choice, as
+   * Ark UI's `closeOnSelect` does. A row's own `close-on-select` wins over this.
    * - `context`: Whether the menu is the trigger's context menu: it opens where the reader
    * asks for one, with a right-click, a long press, Shift+F10 or the menu key.
    * - `label`: Accessible name for the surface.

package/types/vue.d.ts

@@ -25,6 +25,8 @@ import type {
   CanvasNode,
   CanvasNodeProps,
   CanvasPath,
+  CanvasRoute,
+  CanvasRouteEnds,
   CanvasSide,
   CanvasTone,
   fromJsonCanvas,
@@ -2175,6 +2177,13 @@ at any zoom, and a consumer who wants their own units multiplies by them. */
   "zoom-out-label"?: (HelixHeadlessCanvas["zoomOutLabel"]) | undefined;
   /** The zoom out button's label. */
   zoomOutLabel?: (HelixHeadlessCanvas["zoomOutLabel"]) | undefined;
+  /** Draws every connection's line: a function from where it leaves and
+arrives, and the sides it does, to its SVG path and where its label sits.
+
+Absent, or returning nothing for a connection, draws the board's own
+route. A function that throws draws the board's own too, and the error is
+reported to the page as an uncaught one. Set it as a property. */
+  edgeRoute?: (HelixHeadlessCanvas["edgeRoute"]) | undefined;
   /** The board's current view: the document's point at the middle of the view,
 and the zoom.
 
@@ -10559,7 +10568,8 @@ was never tickable look identical from here. Announcing only the ticked one
 as a checkbox tells a reader its siblings are commands, which is the one
 thing they are not.
 
-`checked` implies it, so a row that is on never has to say both.
+`checked` and `exclusive` imply it, so a row that is on, or one of a set,
+never has to say both.
 
 Choosing the row checks or unchecks it, after a `helix-before-toggle` that
 you can cancel. */
@@ -10569,6 +10579,18 @@ you can cancel. */
 The row changes it when it is chosen. Not reflected: the attribute is the
 state you start the row in, and `:state(checked)` carries the current one. */
   checked?: (HelixHeadlessMenuItem["checked"]) | undefined;
+  /** Whether choosing the row closes the menu.
+
+Unset takes the menu's `close-on-select`, which is on, and keeps the menu
+open after a Space on a choice row. Write `close-on-select="false"` for a
+row that changes something the reader is watching, such as a zoom step. */
+  "close-on-select"?: (HelixHeadlessMenuItem["closeOnSelect"]) | undefined;
+  /** Whether choosing the row closes the menu.
+
+Unset takes the menu's `close-on-select`, which is on, and keeps the menu
+open after a Space on a choice row. Write `close-on-select="false"` for a
+row that changes something the reader is watching, such as a zoom step. */
+  closeOnSelect?: (HelixHeadlessMenuItem["closeOnSelect"]) | undefined;
   /** Whether the row is disabled, so it cannot be chosen. */
   disabled?: (HelixHeadlessMenuItem["disabled"]) | undefined;
   /** Whether the link downloads the file when the row is chosen.
@@ -10585,8 +10607,7 @@ that row and unchecks the others. Choosing the row that is checked leaves
 it checked. `menuitemradio` tells a reader which kind of set they are in,
 where `menuitemcheckbox` says every row is independent.
 
-Meaningless without `checkable`, since a row that cannot be ticked is not
-one of a set of anything. */
+It makes the row a choice, so it needs no `checkable` beside it. */
   exclusive?: (HelixHeadlessMenuItem["exclusive"]) | undefined;
   /** The URL the row links to. Setting it renders the row as a link.
 
@@ -10647,6 +10668,18 @@ export type HelixHeadlessMenuVueProps = {
   "back-label"?: (HelixHeadlessMenu["backLabel"]) | undefined;
   /** The text of the row that returns from a submenu. */
   backLabel?: (HelixHeadlessMenu["backLabel"]) | undefined;
+  /** Whether choosing a row closes the menu.
+
+On by default, and a Space on a choice row leaves the menu open either way.
+Write `close-on-select="false"` to keep the menu open after every choice, as
+Ark UI's `closeOnSelect` does. A row's own `close-on-select` wins over this. */
+  "close-on-select"?: (HelixHeadlessMenu["closeOnSelect"]) | undefined;
+  /** Whether choosing a row closes the menu.
+
+On by default, and a Space on a choice row leaves the menu open either way.
+Write `close-on-select="false"` to keep the menu open after every choice, as
+Ark UI's `closeOnSelect` does. A row's own `close-on-select` wins over this. */
+  closeOnSelect?: (HelixHeadlessMenu["closeOnSelect"]) | undefined;
   /** Whether the menu is the trigger's context menu: it opens where the reader
 asks for one, with a right-click, a long press, Shift+F10 or the menu key. */
   context?: (HelixHeadlessMenu["context"]) | undefined;
@@ -18693,7 +18726,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessCanvasNodeVueProps,
     HelixHeadlessCanvasNodeVueEvents
   >;
-  /** A board of cards and connectors, drawn by Helix. On a canvas every position is data that someone placed, so drawing is arithmetic over rectangles with no layout to compute. 'Map' takes a slotted map, because another renderer draws its tiles.  The format is [JSON Canvas](https://jsoncanvas.org), an open format. Each node has an 'x', 'y', 'width', 'height', and a type. Each edge names the two nodes it joins and the sides it leaves and arrives on. A card belongs to a group when it sits inside the group's bounds.  The cards are text in the DOM, so a screen reader can read them. The family adds a reading order and states each card's connections as text. 'order' sets the reading order: - 'spatial' bands the cards into rows. - 'edges' follows the arrows, starting from the cards that nothing points to.  **Cards move by default.** The board writes the new 'x' and 'y' onto the card, the way an input writes its own value, and dispatches two events: - 'helix-before-move' for every step. Cancel it to hold the positions in your   own state and apply them yourself. - 'helix-move' once the move is finished.  A resize dispatches the same pair with a size. Set 'readonly' on the board to keep every card in place, such as on a published board. Set 'readonly' on one card or connection to keep only that one in place.  Set 'snap' to a length in the document's units, such as '32', and a card that is moved or resized lands on a multiple of it. Carrying a card, a corner, a connection, or the selection box near the edge of the board moves the board under it, so a card can be taken to a place off screen in one drag. A connection let go within 20 pixels of a card arrives at it. A double click on the empty board zooms in about that point, and Shift with a double click zooms out.  Keyboard behavior: - One card holds the board's tab stop. - The arrow keys move through the cards in reading order. The card you land   on scrolls into view, and its connections are announced with it. - The card you land on is selected. Control or Command with an arrow key,   Home, or End moves without changing the selection, and Space adds the card   to the selection or takes it out, so you can select cards that are not   next to each other. - Shift with an arrow key moves the card: by 16 units, or to the next   multiple of 'snap' where it is set. Alt with an arrow key resizes it from   its bottom right corner the same way. - The connections leaving a card are stops of their own, straight after it.   Enter on one moves to the card it arrives at. - What a key changes that a reader cannot see is said: where a card moved   to, its new size, how many cards are selected, and the zoom. A selected   card or connection says so when a reader arrives on it. - Control or Command with C copies the selected cards, and the connections   between them, as a JSON Canvas document in text, which another board or   an app that reads the format takes. A paste is your page's: listen for   'paste' on the board, read the text with 'fromJsonCanvas', and add the   cards it holds. - Control or Command with Z undoes the last move or resize the board made,   and with Shift, or Control with Y, makes it again. 'undo()' and 'redo()'   do the same from a script. Each asks with 'helix-before-move' and tells   with 'helix-move', as a move does, so a board that holds its positions in   your state is undone through your state.  Every drag also works with clicks, as WCAG 2.5.7 requires for a pointer that cannot hold a button down. Click a selected card's move handle, a corner, a card's connection point, or the end of a selected connection to pick it up. It follows the pointer with no button held, and the next click puts it down where a drag would have. On touch, the next tap sets where it lands. Escape, or a press outside the board, puts it back. So a finger connects two cards with three taps: the card, one of its points, and the card to connect to.  Connecting and removing dispatch requests, and your code applies them: - Drawing from a card's handle to another card, or pressing C on one card and   Enter on another, dispatches 'helix-connect'. - Delete on a card or a connection dispatches 'helix-remove'. The event names   every connection that removing the card would leave without an end.  Once your page removes what Delete asked for, focus moves to the next stop, to the one before where it was the last, and to the board where none is left. A focused card your page removes for its own reasons hands focus on the same way, unless the reader has already moved focus somewhere else.  The board applies a move itself, because the card already exists. A connection is a new element, and React discards an element the board adds to its markup on the next render, so you write the connection.  Cards and connections are 'helix-canvas-node' and 'helix-canvas-edge' elements, so they are in the served markup whichever renderer wrote them. The library fetches nothing, and an array passed to an element is missing from the first paint of a server-rendered React page. 'fromJsonCanvas' turns a JSON Canvas document into their props, and 'toJsonCanvas()' writes a board back out. */
+  /** A board of cards and connectors, drawn by Helix. On a canvas every position is data that someone placed, so drawing is arithmetic over rectangles with no layout to compute. 'Map' takes a slotted map, because another renderer draws its tiles.  The format is [JSON Canvas](https://jsoncanvas.org), an open format. Each node has an 'x', 'y', 'width', 'height', and a type. Each edge names the two nodes it joins and the sides it leaves and arrives on. A card belongs to a group when it sits inside the group's bounds.  The cards are text in the DOM, so a screen reader can read them. The family adds a reading order and states each card's connections as text. 'order' sets the reading order: - 'spatial' bands the cards into rows. - 'edges' follows the arrows, starting from the cards that nothing points to.  **Cards move by default.** The board writes the new 'x' and 'y' onto the card, the way an input writes its own value, and dispatches two events: - 'helix-before-move' for every step. Cancel it to hold the positions in your   own state and apply them yourself. - 'helix-move' once the move is finished.  A resize dispatches the same pair with a size. Set 'readonly' on the board to keep every card in place, such as on a published board. Set 'readonly' on one card or connection to keep only that one in place.  Set 'snap' to a length in the document's units, such as '32', and a card that is moved or resized lands on a multiple of it. Carrying a card, a corner, a connection, or the selection box near the edge of the board moves the board under it, so a card can be taken to a place off screen in one drag. A connection let go within 20 pixels of a card arrives at it. A double click on the empty board zooms in about that point, and Shift with a double click zooms out.  Keyboard behavior: - One card holds the board's tab stop. - The arrow keys move through the cards in reading order. The card you land   on scrolls into view, and its connections are announced with it. - The card you land on is selected. Control or Command with an arrow key,   Home, or End moves without changing the selection, and Space adds the card   to the selection or takes it out, so you can select cards that are not   next to each other. - Shift with an arrow key moves the card: by 16 units, or to the next   multiple of 'snap' where it is set. Alt with an arrow key resizes it from   its bottom right corner the same way. - The connections leaving a card are stops of their own, straight after it.   Enter on one moves to the card it arrives at. - What a key changes that a reader cannot see is said: where a card moved   to, its new size, how many cards are selected, and the zoom. A selected   card or connection says so when a reader arrives on it. - Control or Command with C copies the selected cards, and the connections   between them, as a JSON Canvas document in text, which another board or   an app that reads the format takes. A paste is your page's: listen for   'paste' on the board, read the text with 'fromJsonCanvas', and add the   cards it holds. - Control or Command with Z undoes the last move or resize the board made,   and with Shift, or Control with Y, makes it again. 'undo()' and 'redo()'   do the same from a script. Each asks with 'helix-before-move' and tells   with 'helix-move', as a move does, so a board that holds its positions in   your state is undone through your state.  Every drag also works with clicks, as WCAG 2.5.7 requires for a pointer that cannot hold a button down. Click a selected card's move handle, a corner, a card's connection point, or the end of a selected connection to pick it up. It follows the pointer with no button held, and the next click puts it down where a drag would have. On touch, the next tap sets where it lands. Escape, or a press outside the board, puts it back. So a finger connects two cards with three taps: the card, one of its points, and the card to connect to.  Connecting and removing dispatch requests, and your code applies them: - Drawing from a card's handle to another card, or pressing C on one card and   Enter on another, dispatches 'helix-connect'. - Delete on a card or a connection dispatches 'helix-remove'. The event names   every connection that removing the card would leave without an end.  Once your page removes what Delete asked for, focus moves to the next stop, to the one before where it was the last, and to the board where none is left. A focused card your page removes for its own reasons hands focus on the same way, unless the reader has already moved focus somewhere else.  The board applies a move itself, because the card already exists. A connection is a new element, and React discards an element the board adds to its markup on the next render, so you write the connection.  **'edgeRoute' draws the connections' lines your own way**: a function from where a line leaves and arrives, and the sides it does, to its SVG path, for a route such as one that bends around the cards between. What it returns is the line drawn, the line pressed and focused, and the one an arrowhead sits at the end of. Nothing back draws the board's own.  Add 'minimap' to 'controls' for a picture of the whole board in a corner: each card as a box, and a frame around what is on screen. A press or a drag on it brings that place to the middle of the view. It is for a pointer, and a screen reader skips it: the arrow keys and 'show()' reach every card.  Cards and connections are 'helix-canvas-node' and 'helix-canvas-edge' elements, so they are in the served markup whichever renderer wrote them. The library fetches nothing, and an array passed to an element is missing from the first paint of a server-rendered React page. 'fromJsonCanvas' turns a JSON Canvas document into their props, and 'toJsonCanvas()' writes a board back out. */
   "helix-headless-canvas": DefineCustomElement<
     HelixHeadlessCanvas,
     HelixHeadlessCanvasVueProps,
@@ -19035,7 +19068,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessMapRasterVueProps,
     HelixHeadlessMapRasterVueEvents
   >;
-  /** Wraps a map drawn by MapLibre, Leaflet, or another renderer. The frame adds a name for the map, a column of controls, and a strip for the map credit. Helix does not draw the map itself.  The controls are one column, and 'controls' names which ones: 'fullscreen', 'layers', 'tilt', 'zoom', and 'compass', top to bottom. 'zoom compass fullscreen' by default. The compass's needle points north as the map turns, and pressing it turns the map to face north.  Add 'pan' and 'rotate' for buttons around the compass that move and turn the map. Dragging is otherwise the only way a pointer moves the map, so add them where the map has to be usable without dragging, as WCAG 2.2 asks at level AA. The arrow keys pan the map and Shift with Left or Right turns it either way.  The pan and zoom buttons and the arrow keys send 'helix-map-pan' and 'helix-map-zoom'. Move your map in response, or connect it with 'connectMap' from '@fusion.dev/helix-map', which does this for you.  Add 'tilt' to 'controls' for the 3D button, which a map with 3D buildings or terrain needs. It is a toggle. Pressed, it tilts the map 50 degrees, and 'connectMap' raises the buildings and the ground. Pressed again, it makes the map flat, and lays them flat too. Shift with Up or Down tilts the map in steps. Turning and tilting send 'helix-map-rotate' and 'helix-map-tilt', which 'connectMap' answers on MapLibre. Leaflet draws maps flat and does not rotate.  Add 'layers' to 'controls' for a layers button. It opens a menu with a tile for each layer, which sets the layer's 'hidden' attribute. Layers with the same 'group', such as a route and its dotted legs, share one tile. A tile sends 'helix-before-toggle' from the layer first, so you can store the choice or refuse it, and 'helix-toggle' from it once 'hidden' holds the choice.  Imagery, a 'helix-map-raster' with 'ground', is a map type and not a tile. The menu opens with a card for each type, Standard, Hybrid, and Satellite, with a picture of the map in it, and 'map-type' says which is chosen. Standard hides the imagery, Hybrid draws it under the roads and names, and Satellite draws it alone. Choosing one sends 'helix-before-change' with its name, and 'change' once 'map-type' holds it. 'connectMap' does not draw a hidden layer, so a layer you write with 'hidden' starts turned off.  Markers, routes, areas, live positions, and points layers go inside the frame as child elements. */
+  /** Wraps a map drawn by MapLibre, Leaflet, or another renderer. The frame adds a name for the map, a column of controls, and a strip for the map credit. Helix does not draw the map itself.  The controls are one column, and 'controls' names which ones: 'fullscreen', 'layers', 'tilt', 'zoom', and 'compass', top to bottom. 'zoom compass fullscreen' by default. The compass's needle points north as the map turns, and pressing it turns the map to face north.  Add 'pan' and 'rotate' for buttons around the compass that move and turn the map. Dragging is otherwise the only way a pointer moves the map, so add them where the map has to be usable without dragging, as WCAG 2.2 asks at level AA. The arrow keys pan the map and Shift with Left or Right turns it either way.  The pan and zoom buttons and the arrow keys send 'helix-map-pan' and 'helix-map-zoom'. Move your map in response, or connect it with 'connectMap' from '@fusion.dev/helix-map', which does this for you.  Add 'tilt' to 'controls' for the 3D button, which a map with 3D buildings or terrain needs. It is a toggle. Pressed, it tilts the map 50 degrees, and 'connectMap' raises the buildings and the ground. Pressed again, it makes the map flat, and lays them flat too. Shift with Up or Down tilts the map in steps. Turning and tilting send 'helix-map-rotate' and 'helix-map-tilt', which 'connectMap' answers on MapLibre. Leaflet draws maps flat and does not rotate.  Add 'layers' to 'controls' for a layers button. It opens a menu with a tile for each layer, which sets the layer's 'hidden' attribute. Layers with the same 'group', such as a route and its dotted legs, share one tile. A tile sends 'helix-before-toggle' from the layer first, so you can store the choice or refuse it, and 'helix-toggle' from it once 'hidden' holds the choice. Escape closes the menu and returns focus to its button, and the menu closes when focus moves on from it or a press lands outside the map.  Imagery, a 'helix-map-raster' with 'ground', is a map type and not a tile. The menu opens with a card for each type, Standard, Hybrid, and Satellite, with a picture of the map in it, and 'map-type' says which is chosen. Standard hides the imagery, Hybrid draws it under the roads and names, and Satellite draws it alone. Choosing one sends 'helix-before-change' with its name, and 'change' once 'map-type' holds it. 'connectMap' does not draw a hidden layer, so a layer you write with 'hidden' starts turned off.  Markers, routes, areas, live positions, and points layers go inside the frame as child elements. */
   "helix-headless-map": DefineCustomElement<
     HelixHeadlessMap,
     HelixHeadlessMapVueProps,
@@ -19059,13 +19092,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessMegamenuVueProps,
     HelixHeadlessMegamenuVueEvents
   >;
-  /** One element covers three kinds of row, and what you give it decides which: - Content in the 'submenu' slot makes the row open a submenu page. - 'checked' makes the row a choice. - With neither, the row is a command.  The role follows the kind. A row with 'checked' is 'menuitemcheckbox' with 'aria-checked', and 'exclusive' makes it 'menuitemradio', for a set where only one can be on. A row that opens a page keeps 'menuitem' and sets 'aria-haspopup'.  Choosing a choice row checks or unchecks it before 'helix-select' is sent, so a listener reads the new 'checked'. An 'exclusive' row turns on and turns off the 'exclusive' rows next to it. Cancel 'helix-before-toggle' to keep a row as it is and set 'checked' yourself.  The menu sets whether the row's page is showing as a property, never as an attribute. An attribute written onto your element after it upgrades causes a hydration mismatch.  'shortcut' shows a row's keyboard shortcut after its label, drawn by 'Kbd' in the platform's glyphs, and gives the row 'aria-keyshortcuts'. It binds nothing: the shortcut is the page's to bind. Other trailing words, such as a count, go in the 'end' slot.  The row is named by its label alone. Words in 'description', a line under the label, and in 'end' describe it instead, through 'aria-describedby', as React Aria's menu item does with its description: a reader hears "Copy", then "Copies the selection".  A development build warns when a row has no words to be named by, such as a row holding only an icon with no label.  The check mark and the caret are the fallbacks of the 'check' and 'chevron' slots, so a mark of your own replaces either by being slotted. Neither is read as part of the row's name. */
+  /** One element covers three kinds of row, and what you give it decides which: - Content in the 'submenu' slot makes the row open a submenu page. - 'checked' makes the row a choice. - With neither, the row is a command.  The role follows the kind. A row with 'checkable' or 'checked' is 'menuitemcheckbox' with 'aria-checked', and an 'exclusive' row is 'menuitemradio', for a set where only one can be on. A row that opens a page keeps 'menuitem' and sets 'aria-haspopup'.  Choosing a choice row checks or unchecks it before 'helix-select' is sent, so a listener reads the new 'checked'. An 'exclusive' row turns on and turns off the 'exclusive' rows next to it. Cancel 'helix-before-toggle' to keep a row as it is and set 'checked' yourself.  Space on a choice row changes it and leaves the menu open, so a reader can set several in a row, as the APG's menu does. Enter and a press change it and close the menu. 'close-on-select="false"' on the row keeps the menu open after any choice of it, and 'close-on-select' on the row closes it after a Space as well.  The menu sets whether the row's page is showing as a property, never as an attribute. An attribute written onto your element after it upgrades causes a hydration mismatch.  'shortcut' shows a row's keyboard shortcut after its label, drawn by 'Kbd' in the platform's glyphs, and gives the row 'aria-keyshortcuts'. It binds nothing: the shortcut is the page's to bind. Other trailing words, such as a count, go in the 'end' slot.  The row is named by its label alone. Words in 'description', a line under the label, and in 'end' describe it instead, through 'aria-describedby', as React Aria's menu item does with its description: a reader hears "Copy", then "Copies the selection".  A development build warns when a row has no words to be named by, such as a row holding only an icon with no label.  The check mark and the caret are the fallbacks of the 'check' and 'chevron' slots, so a mark of your own replaces either by being slotted. Neither is read as part of the row's name. */
   "helix-headless-menu-item": DefineCustomElement<
     HelixHeadlessMenuItem,
     HelixHeadlessMenuItemVueProps,
     HelixHeadlessMenuItemVueEvents
   >;
-  /** The trigger is slotted and stays your own element, as with the tooltip. The menu renders its surface in the top layer with the popover API, so an ancestor with 'overflow: hidden' does not clip it and it needs no 'z-index'.  Slot a 'helix-button' or 'helix-icon-button' as the trigger, and the menu tells it that it opens a menu and whether the menu is open, inside its own shadow root. On a plain element, such as a '<button>', the menu writes 'aria-haspopup="menu"' and 'aria-expanded', from a frame after its own first render, so a server's markup is never changed while a framework hydrates it. It never writes 'aria-expanded' where you wrote it yourself.  Submenus drill down by default. A submenu replaces the panel's content, and a back row returns to the previous page. One panel stays inside a narrow window, and works on touch screens, which have no hover.  **'submenus="flyout"' opens each submenu in a panel of its own beside its row**, as React Aria's 'SubmenuTrigger' and Radix's 'Sub' do. Resting the pointer on the row opens it, and a pointer crossing toward the open panel over the rows between keeps it open, as Radix's grace area does. Right Arrow opens a row's submenu on its first row, and Left Arrow or Escape closes it and returns focus to the row, the two arrows swapping on a right-to-left page. The row says 'aria-expanded', and the panel is a 'menu' named by the row.  The root holds which page is open, because only one page shows at a time. It sets this on items as a property, never as an attribute. An attribute written onto your element after it upgrades causes a hydration mismatch.  Group rows under a heading with 'Menu.Section', which is a 'group' named by its heading. Between runs of rows, a '<helix-divider>' is a separator a screen reader announces.  Keys: Enter, Space or Down Arrow on the trigger opens the menu on its first row, and Up Arrow on its last. In the menu, Up and Down Arrow move between 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. 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 '--floating-available-block-size', as Radix's dropdown menu publishes its trigger's width, for a menu as wide as its trigger: 'helix-menu::part(surface) { min-inline-size: var(--floating-anchor-inline-size) }'.  With 'context', the trigger is an area and the menu is its context menu: a right-click, a long press, Shift+F10 or the menu key over the area opens it at the pointer, or at the area's corner from the keyboard, as Radix's context menu does. A press on the area does not open it, and closing it returns focus to where it was. A touch or a pen held still on the area opens it too, on every browser, since iOS sends no 'contextmenu' for one.  **A trigger with its own action.** With 'open-on="long-press"', a press on the trigger is the trigger's own, and a press held for half a second opens the menu, as React Aria's 'trigger="longPress"' does. Alt+Down or Alt+Up opens it from the keyboard, and the trigger is described by 'long-press-label', which says so. */
+  /** The trigger is slotted and stays your own element, as with the tooltip. The menu renders its surface in the top layer with the popover API, so an ancestor with 'overflow: hidden' does not clip it and it needs no 'z-index'.  Slot a 'helix-button' or 'helix-icon-button' as the trigger, and the menu tells it that it opens a menu and whether the menu is open, inside its own shadow root. On a plain element, such as a '<button>', the menu writes 'aria-haspopup="menu"' and 'aria-expanded', from a frame after its own first render, so a server's markup is never changed while a framework hydrates it. It never writes 'aria-expanded' where you wrote it yourself.  Submenus drill down by default. A submenu replaces the panel's content, and a back row returns to the previous page. One panel stays inside a narrow window, and works on touch screens, which have no hover.  **'submenus="flyout"' opens each submenu in a panel of its own beside its row**, as React Aria's 'SubmenuTrigger' and Radix's 'Sub' do. Resting the pointer on the row opens it, and a pointer crossing toward the open panel over the rows between keeps it open, as Radix's grace area does. Right Arrow opens a row's submenu on its first row, and Left Arrow or Escape closes it and returns focus to the row, the two arrows swapping on a right-to-left page. The row says 'aria-expanded', and the panel is a 'menu' named by the row.  The root holds which page is open, because only one page shows at a time. It sets this on items as a property, never as an attribute. An attribute written onto your element after it upgrades causes a hydration mismatch.  Group rows under a heading with 'Menu.Section', which is a 'group' named by its heading. Between runs of rows, a '<helix-divider>' is a separator a screen reader announces.  Keys: Enter, Space or Down Arrow on the trigger opens the menu on its first row, and Up Arrow on its last. In the menu, Up and Down Arrow move between 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 (Space on a choice row changes it and leaves the menu open), Right Arrow opens a row's submenu and Left Arrow goes back, the two swapping on a 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 '--floating-available-block-size', as Radix's dropdown menu publishes its trigger's width, for a menu as wide as its trigger: 'helix-menu::part(surface) { min-inline-size: var(--floating-anchor-inline-size) }'.  With 'context', the trigger is an area and the menu is its context menu: a right-click, a long press, Shift+F10 or the menu key over the area opens it at the pointer, or at the area's corner from the keyboard, as Radix's context menu does. A press on the area does not open it, and closing it returns focus to where it was. A touch or a pen held still on the area opens it too, on every browser, since iOS sends no 'contextmenu' for one.  **A trigger with its own action.** With 'open-on="long-press"', a press on the trigger is the trigger's own, and a press held for half a second opens the menu, as React Aria's 'trigger="longPress"' does. Alt+Down or Alt+Up opens it from the keyboard, and the trigger is described by 'long-press-label', which says so. */
   "helix-headless-menu": DefineCustomElement<
     HelixHeadlessMenu,
     HelixHeadlessMenuVueProps,