@fusion.dev/helix-headless 0.162.1 → 0.163.0

package/dist/canvas/root/canvas-root.js

@@ -733,6 +733,35 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         this.handleSlotChange = () => {
             this.requestUpdate();
         };
+        this.handleMinimapPointer = (event) => {
+            if (event.type === 'pointermove' && (event.buttons & 1) === 0) {
+                return;
+            }
+            const picture = event.currentTarget;
+            if (event.type === 'pointerdown') {
+                if (event.button !== 0) {
+                    return;
+                }
+                capturePointer(picture, event.pointerId);
+            }
+            event.preventDefault();
+            const area = this.minimapArea;
+            const shown = picture.getBoundingClientRect();
+            const scale = Math.min(shown.width / area.width, shown.height / area.height) || 1;
+            const point = {
+                x: area.x + (event.clientX - shown.left - (shown.width - area.width * scale) / 2) / scale,
+                y: area.y + (event.clientY - shown.top - (shown.height - area.height * scale) / 2) / scale,
+            };
+            const board = extent(this.nodes);
+            const { zoom } = this.at;
+            this.direct = event.type === 'pointermove';
+            this.touched = true;
+            this.at = {
+                ...this.at,
+                x: this.box.width / 2 - (point.x - board.x + MARGIN) * zoom,
+                y: this.box.height / 2 - (point.y - board.y + MARGIN) * zoom,
+            };
+        };
     }
     static { this.words = 'helix-canvas'; }
     static { this.shadowRootOptions = {
@@ -1120,9 +1149,25 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         if (!from || !to) {
             return undefined;
         }
-        const drawn = connector(edge, onPlane(from, origin), onPlane(to, origin), edge.path ?? this.path ?? 'curve', heads(edge));
+        const drawn = this.draw(edge, onPlane(from, origin), onPlane(to, origin), edge.path ?? this.path ?? 'curve', heads(edge));
         return { ...drawn, from, to };
     }
+    draw(edge, from, to, path, drawnHeads) {
+        if (this.edgeRoute) {
+            const { end, fromSide, start, toSide } = ends(edge, from, to);
+            let own;
+            try {
+                own = this.edgeRoute({ edge, end, fromSide, path, start, toSide });
+            }
+            catch (error) {
+                globalThis.reportError?.(error);
+            }
+            if (own?.d) {
+                return { d: own.d, mid: own.mid ?? { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2 } };
+            }
+        }
+        return connector(edge, from, to, path, drawnHeads);
+    }
     cardOf(event) {
         return event
             .composedPath()
@@ -2134,7 +2179,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         if (target) {
             const reversed = linking.moving === 'from';
             const [from, to] = reversed ? [target, anchor] : [anchor, target];
-            const drawn = connector({
+            const drawn = this.draw({
                 fromNode: from.id,
                 fromSide: reversed ? linking.toSide : linking.side,
                 id: '',
@@ -2157,6 +2202,53 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         }
         return nothing;
     }
+    get onScreen() {
+        const board = extent(this.nodes);
+        const { height, width } = this.box;
+        const { x, y, zoom } = this.at;
+        return {
+            height: height / zoom,
+            width: width / zoom,
+            x: board.x - MARGIN - x / zoom,
+            y: board.y - MARGIN - y / zoom,
+        };
+    }
+    get minimapArea() {
+        const board = extent(this.nodes);
+        const view = this.onScreen;
+        const x = Math.min(board.x, view.x);
+        const y = Math.min(board.y, view.y);
+        const width = Math.max(board.x + board.width, view.x + view.width) - x;
+        const height = Math.max(board.y + board.height, view.y + view.height) - y;
+        const room = Math.max(width, height) * 0.05;
+        return {
+            height: height + room * 2,
+            width: width + room * 2,
+            x: x - room,
+            y: y - room,
+        };
+    }
+    renderMinimap() {
+        const nodes = this.nodes;
+        if (!this.drawsControls('minimap') || nodes.length === 0) {
+            return nothing;
+        }
+        const area = this.minimapArea;
+        const view = this.onScreen;
+        return html `<svg
+      part="minimap"
+      aria-hidden="true"
+      height="120"
+      preserveAspectRatio="xMidYMid meet"
+      viewBox=${`${area.x} ${area.y} ${area.width} ${area.height}`}
+      width="160"
+      @pointerdown=${this.handleMinimapPointer}
+      @pointermove=${this.handleMinimapPointer}
+    >
+      ${nodes.map((node) => svg `<rect part="minimap-node" data-group=${node.type === 'group' ? '' : nothing} x=${node.x} y=${node.y} width=${node.width} height=${node.height} />`)}
+      ${svg `<rect part="minimap-view" x=${view.x} y=${view.y} width=${view.width} height=${view.height} />`}
+    </svg>`;
+    }
     render() {
         const nodes = this.nodes;
         const drawn = extent(nodes);
@@ -2219,7 +2311,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         <slot name="empty"></slot>
         ${this.renderGestures()}
       </div>
-      ${this.renderControls()}
+      ${this.renderControls()} ${this.renderMinimap()}
       <span part="live" role="status">${this.said}</span>
       <div part="footer">
         <slot name="footer"></slot>
@@ -2255,6 +2347,9 @@ __decorate([
     words,
     property({ attribute: 'copied-label' })
 ], HelixHeadlessCanvas.prototype, "copiedLabel", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessCanvas.prototype, "edgeRoute", void 0);
 __decorate([
     words,
     property({ attribute: 'fallback-label' })

package/dist/chat/composer/chat-composer.js

@@ -113,7 +113,7 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFor
         }
         const invalid = this.touched && !this.internals.validity.valid;
         this.toggleState('invalid', invalid);
-        this.internals.ariaInvalid = invalid ? 'true' : null;
+        this.internals.ariaInvalid = invalid ? 'true' : 'false';
         if (invalid !== this.shownInvalid) {
             this.shownInvalid = invalid;
         }

package/dist/chat/root/chat-root.d.ts

@@ -517,12 +517,23 @@ export declare class HelixHeadlessChat extends HelixHeadlessChat_base {
      * Moves focus to turn `at`, drawing it first where the transcript is
      * windowed and it is not drawn.
      *
-     * **A turn takes focus only once a reader moves to it**, so the
-     * `tabindex="-1"` a turn written as a child needs is written then, long
-     * after any server's markup has hydrated, and never on a turn nobody moved
-     * to.
+     * **A turn takes focus only once a reader moves to it**, so the `tabindex`
+     * it needs is written then, long after any server's markup has hydrated,
+     * and never on a turn nobody moved to.
      */
     private focusTurn;
+    /** The turn that is a tab stop because a reader moved to it. */
+    private stop;
+    /**
+     * Focuses a turn, making it the transcript's one stop a reader moved to.
+     *
+     * **`0`, and never `-1`.** Chromium leaves the whole of a shadow host at a
+     * negative `tabindex` out of the Tab order, its own controls and what is
+     * slotted into it alike, so a turn at `-1` lost its links and its Try again
+     * once a reader had paged through it. The stop moves with the reader, and a
+     * `tabindex` you wrote on a turn is left as it is.
+     */
+    private visit;
     /** The first control in the regions `names` holds, in their order. */
     private firstControlIn;
     /**

package/dist/chat/root/chat-root.js

@@ -524,7 +524,9 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
     }
     async focusTurn(at) {
         const count = this.fed ? this.turns.length : this.messages.length;
-        if (at < count - 1 && this.pinned) {
+        const log = this.log;
+        const scrolls = log !== null && log !== undefined && log.scrollHeight > log.clientHeight;
+        if (at < count - 1 && this.pinned && scrolls) {
             this.requestPinned(false);
         }
         if (this.fed) {
@@ -537,17 +539,27 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
                 this.requestUpdate();
                 await this.updateComplete;
             }
-            drawn()?.focus();
+            const turn = drawn();
+            if (turn) {
+                this.visit(turn);
+            }
             return;
         }
         const message = this.messages[at];
-        if (!message) {
-            return;
+        if (message) {
+            this.visit(message);
         }
-        if (!message.hasAttribute('tabindex')) {
-            message.setAttribute('tabindex', '-1');
+    }
+    visit(turn) {
+        if (this.stop !== turn) {
+            this.stop?.removeAttribute('tabindex');
+            this.stop = undefined;
+            if (!turn.hasAttribute('tabindex')) {
+                turn.setAttribute('tabindex', '0');
+                this.stop = turn;
+            }
         }
-        message.focus();
+        turn.focus();
     }
     firstControlIn(names) {
         for (const name of names) {
@@ -582,7 +594,6 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
               .turnWords=${this.words}
               .turnPosition=${first + offset + 1}
               .turnCount=${this.turns.length}
-              tabindex="-1"
               .failedLabel=${this.failedLabel}
               state=${turn.state ?? nothing}
             >${turn.text}</${message}>

package/dist/map/root/map-root.d.ts

@@ -46,7 +46,8 @@ declare const HelixHeadlessMap_base: (new (...args: any[]) => import("@fusion.de
  * 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,
@@ -315,6 +316,12 @@ export declare class HelixHeadlessMap extends HelixHeadlessMap_base {
     private hiding?;
     /** Closes the layers menu on a press anywhere outside the frame. */
     private readonly handleOutside;
+    /**
+     * Closes the layers menu when focus moves on from its button and the menu,
+     * as a Tab past the last tile does. Focus leaving the page, with nothing
+     * focused in its place, leaves the menu as it is.
+     */
+    private readonly handleMenuFocusOut;
     /**
      * Keys pressed in the layers menu. Escape closes it and returns to its
      * button, and no key reaches the region, where the arrows would pan the map.

package/dist/map/root/map-root.js

@@ -82,6 +82,16 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
                 this.layersOpen = false;
             }
         };
+        this.handleMenuFocusOut = (event) => {
+            const to = event.relatedTarget;
+            if (!(this.layersOpen && to)) {
+                return;
+            }
+            const owners = this.renderRoot.querySelectorAll('[part="layers-toggle"], [part="layers-menu"]');
+            if (![...owners].some((owner) => owner.contains(to))) {
+                this.layersOpen = false;
+            }
+        };
         this.handleMenuKeydown = (event) => {
             event.stopPropagation();
             if (event.key === 'Escape' && this.layersOpen) {
@@ -402,6 +412,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
                 this.dispatchEvent(new HelixMapPartChangeEvent({ kind: 'menu' }));
             }
         }}
+        @focusout=${this.handleMenuFocusOut}
         @keydown=${this.handleMenuKeydown}
       >
         <slot name="layers-icon">
@@ -416,6 +427,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         role="group"
         aria-label=${this.layersLabel}
         ?hidden=${!this.layersOpen}
+        @focusout=${this.handleMenuFocusOut}
         @keydown=${this.handleMenuKeydown}
       >
         ${this.imagery.length > 0 ? this.renderMapTypes() : nothing}

package/dist/menu/item/menu-item.d.ts

@@ -10,16 +10,22 @@ import '../../kbd/index.js';
  * - `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.
@@ -82,7 +88,8 @@ export declare class HelixHeadlessMenuItem extends HelixElement {
      * 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.
@@ -95,6 +102,14 @@ export declare class HelixHeadlessMenuItem extends HelixElement {
      * state you start the row in, and `:state(checked)` carries the current one.
      */
     checked: boolean;
+    /**
+     * 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?: boolean;
     /**
      * Whether the row is disabled, so it cannot be chosen.
      */
@@ -116,8 +131,7 @@ export declare class HelixHeadlessMenuItem extends HelixElement {
      * 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: boolean;
     /**
@@ -192,6 +206,17 @@ export declare class HelixHeadlessMenuItem extends HelixElement {
      * protected. Not a consumer's to read or set.
      */
     readonly isMenuItem = true;
+    /**
+     * @internal Whether the last choice of this row asked the menu to stay open:
+     * a Space on a choice row, or `close-on-select="false"`. Read by the menu
+     * while it hears the row's `helix-select`.
+     */
+    keepsOpen: boolean;
+    /**
+     * @internal Whether the row is a choice: it can be ticked, or is one of a
+     * set. Read by the menu to reserve the trailing column.
+     */
+    get choice(): boolean;
     /**
      * Whether anything was slotted into `submenu`.
      *
@@ -342,8 +367,14 @@ export declare class HelixHeadlessMenuItem extends HelixElement {
     private tick;
     /** The other `exclusive` rows in this row's run of siblings. */
     private exclusivePeers;
+    /**
+     * Chooses the row. `space` is whether a Space chose it, which keeps the menu
+     * open on a choice row unless the row says otherwise.
+     */
     private choose;
     private readonly handleClick;
+    /** Whether the click on its way is the one a Space on a linked row sent. */
+    private spacePressed;
     /**
      * Enter and Space choose the row, which a `<div>` would not do on its own.
      *

package/dist/menu/item/menu-item.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { ariaChord, auditName, customElement, deepActiveElement, HelixBeforeToggleEvent, HelixElement, HelixSelectEvent, isRtl, onApple, PopoverController, requestChange, slotFilled, } from '@fusion.dev/helix-core';
+import { ariaChord, auditName, customElement, deepActiveElement, HelixBeforeToggleEvent, HelixElement, HelixSelectEvent, isRtl, onApple, onUnlessFalse, PopoverController, requestChange, slotFilled, } from '@fusion.dev/helix-core';
 import { caretRight, check } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -29,6 +29,7 @@ let HelixHeadlessMenuItem = class HelixHeadlessMenuItem extends HelixElement {
         this.target = '';
         this.value = '';
         this.isMenuItem = true;
+        this.keepsOpen = false;
         this.submenu = false;
         this.start = false;
         this.end = false;
@@ -58,8 +59,10 @@ let HelixHeadlessMenuItem = class HelixHeadlessMenuItem extends HelixElement {
             surface: () => (this.flyout ? this.partNamed('surface') : null),
         });
         this.handleClick = () => {
-            this.choose();
+            this.choose(this.spacePressed);
+            this.spacePressed = false;
         };
+        this.spacePressed = false;
         this.handleKeydown = (event) => {
             if (event.key !== 'Enter' && event.key !== ' ') {
                 return;
@@ -70,12 +73,17 @@ let HelixHeadlessMenuItem = class HelixHeadlessMenuItem extends HelixElement {
             }
             event.preventDefault();
             if (link) {
+                this.spacePressed = true;
                 link.click();
+                this.spacePressed = false;
                 return;
             }
-            this.handleClick();
+            this.choose(event.key === ' ');
         };
     }
+    get choice() {
+        return this.checkable || this.checked || this.exclusive;
+    }
     get hasSubmenu() {
         return this.submenu;
     }
@@ -93,9 +101,7 @@ let HelixHeadlessMenuItem = class HelixHeadlessMenuItem extends HelixElement {
         const rows = this.knownChildren.filter((child) => child.slot === 'submenu' && child.isMenuItem);
         this.toggleState('submenu-start', this.flyout && rows.some((row) => row.querySelector(':scope > [slot="start"]') !== null));
         this.toggleState('submenu-mark', this.flyout &&
-            rows.some((row) => row.checkable ||
-                row.checked ||
-                [...row.children].some((child) => child.slot === 'submenu')));
+            rows.some((row) => row.choice || [...row.children].some((child) => child.slot === 'submenu')));
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -152,7 +158,7 @@ let HelixHeadlessMenuItem = class HelixHeadlessMenuItem extends HelixElement {
         return this.active;
     }
     tick() {
-        if (!(this.checkable || this.checked) || this.hasSubmenu) {
+        if (!this.choice || this.hasSubmenu) {
             return;
         }
         const next = this.exclusive ? true : !this.checked;
@@ -188,10 +194,12 @@ let HelixHeadlessMenuItem = class HelixHeadlessMenuItem extends HelixElement {
         }
         return peers;
     }
-    choose() {
+    choose(space = false) {
         if (this.disabled) {
             return;
         }
+        const spaceKeeps = space && this.choice && !this.hasSubmenu;
+        this.keepsOpen = this.closeOnSelect === undefined ? spaceKeeps : !this.closeOnSelect;
         this.tick();
         this.dispatchEvent(new HelixSelectEvent({ value: this.value }));
     }
@@ -221,7 +229,7 @@ let HelixHeadlessMenuItem = class HelixHeadlessMenuItem extends HelixElement {
         }
         const submenu = this.hasSubmenu;
         const linked = this.href !== '' && !this.disabled;
-        const ticks = this.checkable || this.checked;
+        const ticks = this.choice;
         const role = ticks ? (this.exclusive ? 'menuitemradio' : 'menuitemcheckbox') : 'menuitem';
         const checkedState = ticks ? (this.checked ? 'true' : 'false') : nothing;
         const keys = this.shortcut === '' ? nothing : ariaChord(this.shortcut, !this.hydrating && onApple());
@@ -281,6 +289,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessMenuItem.prototype, "checked", void 0);
+__decorate([
+    property({ attribute: 'close-on-select', converter: onUnlessFalse })
+], HelixHeadlessMenuItem.prototype, "closeOnSelect", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessMenuItem.prototype, "disabled", void 0);

package/dist/menu/root/menu-root.d.ts

@@ -40,7 +40,8 @@ declare const HelixHeadlessMenu_base: (new (...args: any[]) => import("@fusion.d
  * 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.
@@ -109,6 +110,14 @@ export declare class HelixHeadlessMenu extends HelixHeadlessMenu_base {
      * The text of the row that returns from a submenu.
      */
     backLabel: string;
+    /**
+     * 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: boolean;
     /**
      * 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.

package/dist/menu/root/menu-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, anchorElement, customElement, DrilldownController, deepActiveElement, deepContains, focusTarget, HelixElement, inlineStep, KeyboardNavigationController, linkDescription, MixinCollection, MixinControllerOpen, PopoverController, scrollItemIntoView, sideOf, slottedWords, tellDisclosure, typeaheadBy, unlinkDescription, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, anchorElement, customElement, DrilldownController, deepActiveElement, deepContains, focusTarget, HelixElement, inlineStep, KeyboardNavigationController, linkDescription, MixinCollection, MixinControllerOpen, onUnlessFalse, PopoverController, scrollItemIntoView, sideOf, slottedWords, tellDisclosure, typeaheadBy, unlinkDescription, words, } from '@fusion.dev/helix-core';
 import { caretLeft } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -31,6 +31,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
     constructor() {
         super(...arguments);
         this.backLabel = 'Back';
+        this.closeOnSelect = true;
         this.context = false;
         this.label = '';
         this.longPressLabel = 'Long press or press Alt+Down to show the menu';
@@ -119,8 +120,9 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
                 this.enter(chosen);
                 return;
             }
+            const keep = chosen.keepsOpen || (chosen.closeOnSelect === undefined && !this.closeOnSelect);
             queueMicrotask(() => {
-                if (!event.defaultPrevented) {
+                if (!(event.defaultPrevented || keep)) {
                     this.hide();
                 }
             });
@@ -538,7 +540,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
     markColumns() {
         const rows = this.flies ? this.topRows : this.drilldown.rows;
         this.toggleState('start', rows.some((row) => row.querySelector(':scope > [slot="start"]') !== null));
-        this.toggleState('mark', rows.some((row) => row.checkable || row.checked || this.drilldown.hasPage(row)));
+        this.toggleState('mark', rows.some((row) => row.choice || this.drilldown.hasPage(row)));
     }
     mark(item, onPage) {
         const page = this.drilldown.page;
@@ -608,6 +610,9 @@ __decorate([
     words,
     property({ attribute: 'back-label' })
 ], HelixHeadlessMenu.prototype, "backLabel", void 0);
+__decorate([
+    property({ attribute: 'close-on-select', converter: onUnlessFalse })
+], HelixHeadlessMenu.prototype, "closeOnSelect", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessMenu.prototype, "context", void 0);

package/dist/steps/root/steps-root.d.ts

@@ -150,7 +150,13 @@ export declare class HelixHeadlessSteps extends HelixHeadlessSteps_base {
     protected readonly keys: KeyboardNavigationController;
     /** The steps, in the order the consumer wrote them. */
     private get steps();
-    /** The index of the stage the reader is on, or `-1`. */
+    /**
+     * The index of the stage the reader is on, or `-1`.
+     *
+     * Read from `active` once anything has set it, because a move writes
+     * `active` at once and each step's `current` only on the next update: two
+     * calls to `next()` in one task then move two stages.
+     */
     private get at();
     /**
      * Moves to the next stage that can be gone to, as Ark UI's `goToNextStep`

package/dist/steps/root/steps-root.js

@@ -58,7 +58,12 @@ let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(
         return [...this.querySelectorAll(':scope > *')].filter((one) => 'current' in one);
     }
     get at() {
-        return this.steps.findIndex((step) => step.current);
+        const steps = this.steps;
+        if (this.active === '') {
+            return steps.findIndex((step) => step.current);
+        }
+        const item = this.resolveActive(steps);
+        return item ? steps.indexOf(item) : -1;
     }
     next() {
         return this.step(1);