@fusion.dev/helix-headless 0.162.0 → 0.163.0

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

@@ -1,4 +1,4 @@
-import { HelixElement } from '@fusion.dev/helix-core';
+import { HelixElement, UpgradeController } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 /** One step of a trail written as data, for `items`. */
 export interface BreadcrumbItem {
@@ -120,6 +120,8 @@ export declare class HelixHeadlessBreadcrumbs extends HelixElement {
     private readonly markLast;
     /** New crumbs fold again, as a new `items` does. */
     private readonly handleSlotChange;
+    /** Reads a crumb again once it upgrades, so the current one is marked. */
+    protected readonly upgradeWatch: UpgradeController;
     /** The crumbs `items` describes, each a crumb of this tier. */
     protected renderItems(): TemplateResult | typeof nothing;
     protected render(): TemplateResult;

package/dist/breadcrumbs/root/breadcrumbs-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 { customElement, formatWords, HelixElement, hostAria, whenHydrated, words, } from '@fusion.dev/helix-core';
+import { customElement, formatWords, HelixElement, hostAria, UpgradeController, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -55,6 +55,7 @@ let HelixHeadlessBreadcrumbs = class HelixHeadlessBreadcrumbs extends HelixEleme
             this.expanded = false;
             this.markLast();
         };
+        this.upgradeWatch = new UpgradeController(this, this.handleSlotChange);
     }
     static { this.words = 'helix-breadcrumbs'; }
     get slotted() {

package/dist/canvas/index.d.ts

@@ -1,4 +1,4 @@
 export { HelixHeadlessCanvasEdge } from './edge/canvas-edge.js';
 export { HelixHeadlessCanvasNode } from './node/canvas-node.js';
-export type { CanvasDocument, CanvasEdge, CanvasEdgeProps, CanvasEnd, CanvasNode, CanvasNodeProps, CanvasPath, CanvasSide, CanvasTone, } from './root/canvas-root.js';
+export type { CanvasDocument, CanvasEdge, CanvasEdgeProps, CanvasEnd, CanvasNode, CanvasNodeProps, CanvasPath, CanvasRoute, CanvasRouteEnds, CanvasSide, CanvasTone, } from './root/canvas-root.js';
 export { fromJsonCanvas, HelixHeadlessCanvas } from './root/canvas-root.js';

package/dist/canvas/root/canvas-document.d.ts

@@ -91,6 +91,39 @@ export declare const port: (node: CanvasNode, side: CanvasSide) => {
 };
 /** How a connector travels between the two cards it joins. */
 export type CanvasPath = 'curve' | 'straight' | 'step';
+/** What a board's `edgeRoute` is given for one connection, in the board's own units. */
+export interface CanvasRouteEnds {
+    /** The connection. */
+    edge: CanvasEdge;
+    /** Where it arrives, on the side of the card it arrives at. */
+    end: {
+        x: number;
+        y: number;
+    };
+    /** The side of the card it leaves. */
+    fromSide: CanvasSide;
+    /** The route the board would draw: the connection's `path`, or the board's. */
+    path: CanvasPath;
+    /** Where it leaves, on the side of the card it leaves. */
+    start: {
+        x: number;
+        y: number;
+    };
+    /** The side of the card it arrives at. */
+    toSide: CanvasSide;
+}
+/**
+ * Draws a connection's line: its SVG path from `start` to `end`, and where its
+ * label sits, the middle of the two ends where it says nothing. Nothing back
+ * draws the board's own.
+ */
+export type CanvasRoute = (ends: CanvasRouteEnds) => {
+    d: string;
+    mid?: {
+        x: number;
+        y: number;
+    } | undefined;
+} | undefined;
 /** A point in the document's own units. */
 type Point = {
     x: number;

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

@@ -1,7 +1,7 @@
 import { type CanvasView, HelixElement, type ViewportPanDetail, type ViewportWay, type ViewportZoomDetail } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
-import { type CanvasDocument, type CanvasTone } from './canvas-document.js';
-export type { CanvasDocument, CanvasEdge, CanvasEdgeProps, CanvasEnd, CanvasNode, CanvasNodeProps, CanvasPath, CanvasSide, CanvasTone, } from './canvas-document.js';
+import { type CanvasDocument, type CanvasRoute, type CanvasTone } from './canvas-document.js';
+export type { CanvasDocument, CanvasEdge, CanvasEdgeProps, CanvasEnd, CanvasNode, CanvasNodeProps, CanvasPath, CanvasRoute, CanvasRouteEnds, CanvasSide, CanvasTone, } from './canvas-document.js';
 export { fromJsonCanvas } from './canvas-document.js';
 declare const HelixHeadlessCanvas_base: (new (...args: any[]) => import("@fusion.dev/helix-core").ViewportElement) & typeof HelixElement;
 /**
@@ -92,6 +92,17 @@ declare const HelixHeadlessCanvas_base: (new (...args: any[]) => import("@fusion
  * 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
@@ -148,6 +159,9 @@ declare const HelixHeadlessCanvas_base: (new (...args: any[]) => import("@fusion
  * @csspart label-editor - The field for editing a connection's label or a group's name, placed over that text.
  * @csspart live - A live region that screen readers announce while a connection is being made.
  * @csspart marquee - The box a Shift-drag across the empty board draws, which selects the cards it touches.
+ * @csspart minimap - The picture of the whole board, under `controls="minimap"`.
+ * @csspart minimap-node - One card in the minimap.
+ * @csspart minimap-view - The frame in the minimap around what is on screen.
  * @csspart pan-down - The button that moves the board down.
  * @csspart pan-end - The button that moves the board toward the end of a line of text: right in English.
  * @csspart pan-start - The button that moves the board toward the start of a line of text: left in English.
@@ -210,6 +224,15 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
     controlsLabel: string;
     /** What screen readers hear after a copy, with `{count}` for the cards copied. */
     copiedLabel: string;
+    /**
+     * 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?: CanvasRoute;
     /** The board's name where `label` is empty. */
     fallbackLabel: string;
     /**
@@ -702,6 +725,8 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
      * both its cards are on the board; nothing where either is not.
      */
     private geometryOf;
+    /** One connection's line, by `edgeRoute` where it draws one, and by the board's own where not. */
+    private draw;
     /** The card an event came from, wherever inside it the event began. */
     private cardOf;
     /**
@@ -1244,6 +1269,29 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
      * the card a keyboard reader is on.
      */
     private renderDraft;
+    /** The part of the document on screen, in its own units. */
+    private get onScreen();
+    /** What the minimap shows: every card and what is on screen, with room around them. */
+    private get minimapArea();
+    /**
+     * A press or a drag on the minimap, which brings the place under it to the
+     * middle of the view.
+     *
+     * **The point is read through the picture's own scale**: the area is drawn
+     * whole and centered in the box, so the box's spare width or height is split
+     * either side of it.
+     */
+    private readonly handleMinimapPointer;
+    /**
+     * The minimap, under `controls="minimap"`: each card as a box, and a frame
+     * around what is on screen.
+     *
+     * **A picture for a pointer**, hidden from screen readers and taking no
+     * focus, as a map's own overview is: the arrow keys and `show()` already take
+     * a keyboard to any card, and a second way that says nothing a reader can
+     * use would be a stop that does nothing.
+     */
+    private renderMinimap;
     protected render(): TemplateResult;
 }
 declare global {

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

@@ -1,4 +1,4 @@
-import { ChildrenController, HelixElement } from '@fusion.dev/helix-core';
+import { ChildrenController, HelixElement, UpgradeController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import type { HelixHeadlessChatMessage } from '../message/chat-message.js';
 /** One turn handed over as data, which is what `turns` holds. */
@@ -308,6 +308,11 @@ export declare class HelixHeadlessChat extends HelixHeadlessChat_base {
      * never a turn's own text, which a streaming turn rewrites every frame.
      */
     protected readonly childWatch: ChildrenController;
+    /**
+     * Hears a message upgrade after it arrived. A message is known by its marker,
+     * which an element that has not upgraded lacks, so it was assigned nowhere.
+     */
+    protected readonly upgradeWatch: UpgradeController;
     /** Watches the turns' own `state`, which is when one of them settles. */
     private settling;
     /** Watches the turns and the log for size, which scrolling does not report. */
@@ -512,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

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessChat_1;
-import { ChildrenController, customElement, drawIcon, focusableElements, formatWords, HelixBeforePinEvent, HelixElement, HelixHistoryEvent, HelixPinEvent, hostAria, MixinCollection, onUnlessFalse, requestChange, VirtualizeController, whenHydrated, words, wordsConverter, } from '@fusion.dev/helix-core';
+import { ChildrenController, customElement, drawIcon, focusableElements, formatWords, HelixBeforePinEvent, HelixElement, HelixHistoryEvent, HelixPinEvent, hostAria, MixinCollection, onUnlessFalse, requestChange, UpgradeController, VirtualizeController, whenHydrated, words, wordsConverter, } from '@fusion.dev/helix-core';
 import { arrowDown } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -63,6 +63,7 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         this.said = 0;
         this.words = TURN_WORDS;
         this.childWatch = new ChildrenController(this, () => this.handleSlotChange());
+        this.upgradeWatch = new UpgradeController(this, () => this.handleSlotChange());
         this.settling = undefined;
         this.grower = undefined;
         this.watched = [];
@@ -523,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) {
@@ -536,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) {
@@ -581,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/checkbox-group/root/checkbox-group-root.d.ts

@@ -1,4 +1,4 @@
-import { DisabledCascadeController, HelixFormElement } from '@fusion.dev/helix-core';
+import { DisabledCascadeController, HelixFormElement, UpgradeController } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import { HelixHeadlessCheckbox } from '../../checkbox/root/checkbox-root.js';
 import '../../checkbox/index.js';
@@ -132,6 +132,8 @@ export declare class HelixHeadlessCheckboxGroup extends HelixHeadlessCheckboxGro
     private pending;
     /** Watches for boxes arriving inside a wrapper, which no slot reports. */
     private observer;
+    /** Reads a box again once it upgrades, so it takes the group's name and value. */
+    protected readonly upgradeWatch: UpgradeController;
     /** The value the required check last judged. */
     private judged;
     /** The boxes `member` is added to. */

package/dist/checkbox-group/root/checkbox-group-root.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessCheckboxGroup_1;
-import { commaList, customElement, DisabledCascadeController, HelixBeforeChangeEvent, HelixFormElement, hostAria, MixinField, words, } from '@fusion.dev/helix-core';
+import { commaList, customElement, DisabledCascadeController, HelixBeforeChangeEvent, HelixFormElement, hostAria, MixinField, UpgradeController, words, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
@@ -21,6 +21,7 @@ let HelixHeadlessCheckboxGroup = class HelixHeadlessCheckboxGroup extends MixinF
         this.declared = [];
         this.checking = undefined;
         this.pending = false;
+        this.upgradeWatch = new UpgradeController(this, undefined, { subtree: true });
         this.watched = new Set();
         this.member = {
             hostUpdated: () => {

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

@@ -1,4 +1,4 @@
-import { AriaForwardController, HelixFormElement, PopoverController } from '@fusion.dev/helix-core';
+import { AriaForwardController, HelixFormElement, PopoverController, UpgradeController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import '../../listbox/index.js';
 import '../../tag/index.js';
@@ -376,6 +376,13 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      */
     get type(): string;
     private get listbox();
+    /**
+     * Hears an option upgrade after it arrived. The options are this element's
+     * children, which the listbox reaches through a slot and does not watch, so
+     * both read them again: the listbox to select the one `value` names, and this
+     * element for the words in its field.
+     */
+    protected readonly upgradeWatch: UpgradeController;
     protected readonly panel: PopoverController;
     /** The values chosen, in the order they were chosen. */
     private get values();

package/dist/combobox/root/combobox-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, afterLinkFollowed, countLabel, customElement, DelayController, drawAutofill, drawStatus, formatWords, HelixCreateEvent, HelixFilterEvent, HelixFormElement, handedLocale, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, onApple, PopoverController, reportValues, StatusController, submitImplicitly, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { AriaForwardController, afterLinkFollowed, countLabel, customElement, DelayController, drawAutofill, drawStatus, formatWords, HelixCreateEvent, HelixFilterEvent, HelixFormElement, handedLocale, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, onApple, PopoverController, reportValues, StatusController, submitImplicitly, UpgradeController, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { caretDown } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -50,6 +50,10 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         this.emptied = false;
         this.opening = undefined;
         this.watcher = undefined;
+        this.upgradeWatch = new UpgradeController(this, () => {
+            this.listbox?.requestUpdate();
+            this.requestUpdate();
+        }, { subtree: true });
         this.panel = new PopoverController(this, {
             anchor: () => this.partNamed('field'),
             boundary: () => [

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

@@ -1,4 +1,4 @@
-import { HelixElement, KeyboardNavigationController } from '@fusion.dev/helix-core';
+import { HelixElement, KeyboardNavigationController, UpgradeController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import { HelixHeadlessListItem } from '../item/list-item.js';
 import { type ListSelectionBehavior, type ListSelectionMode } from '../selection.js';
@@ -405,6 +405,8 @@ export declare class HelixHeadlessList extends HelixElement {
     private askForMore;
     private readonly handleEmptyChange;
     private readonly handleSlotChange;
+    /** Reads an item again once it upgrades, so it takes the role the list gives its rows. */
+    protected readonly upgradeWatch: UpgradeController;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/list/root/list-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 { auditName, commaList, customElement, deepActiveElement, drawStatus, focusItemOf, formatWords, HelixActionEvent, HelixElement, HelixLoadMoreEvent, hostAria, inlineStep, KeyboardNavigationController, placeKey, pressedOwnControl, ReorderController, requestReorder, requestValue, rovingStop, StatusController, scrollingAncestor, scrollRoom, selectsAll, typeaheadByWords, whenHydrated, words, } from '@fusion.dev/helix-core';
+import { auditName, commaList, customElement, deepActiveElement, drawStatus, focusItemOf, formatWords, HelixActionEvent, HelixElement, HelixLoadMoreEvent, hostAria, inlineStep, KeyboardNavigationController, placeKey, pressedOwnControl, ReorderController, requestReorder, requestValue, rovingStop, StatusController, scrollingAncestor, scrollRoom, selectsAll, typeaheadByWords, UpgradeController, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessListItem } from '../item/list-item.js';
@@ -138,6 +138,7 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
             this.rowsChanged = true;
             this.requestUpdate();
         };
+        this.upgradeWatch = new UpgradeController(this, this.handleSlotChange);
     }
     static { this.words = 'helix-list'; }
     blocked(row) {

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

@@ -1,4 +1,4 @@
-import { AriaForwardController, type DataOptionItem, DisabledCascadeController, HelixFormElement } from '@fusion.dev/helix-core';
+import { AriaForwardController, type DataOptionItem, DisabledCascadeController, HelixFormElement, UpgradeController } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import { HelixHeadlessOption } from '../../option/root/option-root.js';
 declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusion.dev/helix-core").CollectionElement) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
@@ -436,6 +436,7 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * exactly as it moves through a flat one.
      */
     get options(): HelixHeadlessOption[];
+    protected readonly upgradeWatch: UpgradeController;
     /**
      * The elements of one kind in the list: its options, its groups or its
      * rules. Walks the tree, and walks *through* a slot when it meets one.

package/dist/listbox/root/listbox-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, centerInView, chosenValues, columnStep, countLabel, customElement, DelayController, DisabledCascadeController, drawAutofill, endInSight, formatWords, HelixFilterEvent, HelixFormElement, HelixLoadMoreEvent, hostAria, inlineStep, MixinCollection, MixinControllerValue, MixinField, markMatches, OptionWindowController, onApple, pageRows, rangeAdd, reportValues, requestChange, scrollItemIntoView, selectsAll, Typeahead, toggleEvery, typesCharacter, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { AriaForwardController, centerInView, chosenValues, columnStep, countLabel, customElement, DelayController, DisabledCascadeController, drawAutofill, endInSight, formatWords, HelixFilterEvent, HelixFormElement, HelixLoadMoreEvent, hostAria, inlineStep, MixinCollection, MixinControllerValue, MixinField, markMatches, OptionWindowController, onApple, pageRows, rangeAdd, reportValues, requestChange, scrollItemIntoView, selectsAll, Typeahead, toggleEvery, typesCharacter, UpgradeController, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { magnifyingGlass } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -51,6 +51,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
             items: () => this.options,
         });
         this.chosenAgain = undefined;
+        this.upgradeWatch = new UpgradeController(this, undefined, { subtree: true });
         this.handleSelection = (event) => {
             if (event.detail.href !== undefined) {
                 return;

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}