@fusion.dev/helix-headless 0.145.0 → 0.147.0

package/dist/toolbar/root/toolbar-root.js

@@ -4,8 +4,9 @@ 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, customElement, HelixElement, inlineStep, keyClaimed, } from '@fusion.dev/helix-core';
-import { html } from 'lit';
+var HelixHeadlessToolbar_1;
+import { AriaForwardController, closestInstance, customElement, HelixElement, inlineStep, keyClaimed, } from '@fusion.dev/helix-core';
+import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 const KEYS = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End']);
 const ownsTabStop = (node) => 'focusable' in node;
@@ -22,7 +23,9 @@ const takesFocus = (node) => {
         node.shadowRoot?.delegatesFocus === true ||
         node.shadowRoot?.querySelector(TABBABLE) != null);
 };
-let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
+const flattens = (node) => ownsTabStop(node) &&
+    node.selectionMode === 'multiple';
+let HelixHeadlessToolbar = HelixHeadlessToolbar_1 = class HelixHeadlessToolbar extends HelixElement {
     constructor() {
         super(...arguments);
         this.label = 'Toolbar';
@@ -33,14 +36,23 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
         this.wroteForeign = false;
         this.stopAtEnds = false;
         this.handleFocusIn = (event) => {
+            if (this.nested) {
+                return;
+            }
             const control = this.origin(event);
             if (control) {
                 this.setTabStop(control);
             }
         };
         this.restoreTabStop = () => {
+            if (this.nested) {
+                return;
+            }
             const controls = this.controls;
             const held = controls.some((control) => {
+                if (control.group) {
+                    return control.group.focusable;
+                }
                 const composite = control.stops.length !== 1;
                 const element = composite ? control.child : control.stops[0];
                 if (ownsTabStop(element)) {
@@ -53,8 +65,11 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
             }
         };
         this.handleCompositeKeydown = (event) => {
+            if (this.nested) {
+                return;
+            }
             const control = this.origin(event);
-            if (!control || control.stops.length === 1) {
+            if (!control || (control.stops.length === 1 && !control.group)) {
                 return;
             }
             this.handleKeydown(event);
@@ -63,7 +78,7 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
             }
         };
         this.handleKeydown = (event) => {
-            if (!KEYS.has(event.key) || keyClaimed(event)) {
+            if (this.nested || !KEYS.has(event.key) || keyClaimed(event)) {
                 return;
             }
             const along = inlineStep(this, event.key);
@@ -115,7 +130,14 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
                 continue;
             }
             if (takesFocus(child)) {
-                controls.push({ child, stops: this.inside(child) });
+                const stops = this.inside(child);
+                if (stops.length > 1 && flattens(child)) {
+                    for (const stop of stops) {
+                        controls.push({ child: stop, group: child, stops: [stop] });
+                    }
+                    continue;
+                }
+                controls.push({ child, stops });
                 continue;
             }
             for (const stop of this.within(child)) {
@@ -151,6 +173,10 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
             this.wroteForeign = true;
         }
         for (const control of this.controls) {
+            if (control.group) {
+                control.group.focusable = control.group === active?.group;
+                continue;
+            }
             if (control.stops.length !== 1) {
                 if (ownsTabStop(control.child)) {
                     control.child.focusable = control.child === active?.child;
@@ -168,15 +194,27 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
         }
     }
     async claimTabStop() {
+        if (this.nested) {
+            return;
+        }
         const pending = [...new Set([...this.children].map((child) => child.localName))].filter((name) => name.includes('-'));
         await Promise.all(pending.map((name) => customElements.whenDefined(name)));
         this.setTabStop(this.controls[0], false);
     }
+    get nested() {
+        const parent = this.parentElement;
+        if (!parent) {
+            return false;
+        }
+        return (closestInstance(parent, HelixHeadlessToolbar_1) !== null ||
+            parent.closest('[role="toolbar"]') !== null);
+    }
     get axis() {
         return this.orientation ?? 'horizontal';
     }
     connectedCallback() {
         super.connectedCallback();
+        this.requestUpdate();
         this.addEventListener('keydown', this.handleCompositeKeydown, true);
         this.addEventListener('keydown', this.handleKeydown);
         this.addEventListener('focusin', this.handleFocusIn);
@@ -200,7 +238,13 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
         void this.claimTabStop();
     }
     render() {
-        return html `<div part="toolbar" role="toolbar" aria-label=${this.label} aria-orientation=${this.axis}>
+        const nested = this.nested;
+        return html `<div
+      part="toolbar"
+      role=${nested ? 'group' : 'toolbar'}
+      aria-label=${this.label}
+      aria-orientation=${nested ? nothing : this.axis}
+    >
       <slot @slotchange=${() => this.claimTabStop()}></slot>
     </div>`;
     }
@@ -214,7 +258,7 @@ __decorate([
 __decorate([
     property({ attribute: 'stop-at-ends', type: Boolean })
 ], HelixHeadlessToolbar.prototype, "stopAtEnds", void 0);
-HelixHeadlessToolbar = __decorate([
+HelixHeadlessToolbar = HelixHeadlessToolbar_1 = __decorate([
     customElement('helix-headless-toolbar')
 ], HelixHeadlessToolbar);
 export { HelixHeadlessToolbar };

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

@@ -1,4 +1,4 @@
-import { HelixElement, type Placement } from '@fusion.dev/helix-core';
+import { HelixElement, OpenPhaseController, type Placement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessTooltip_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & typeof HelixElement;
 /**
@@ -27,10 +27,15 @@ declare const HelixHeadlessTooltip_base: (new (...args: any[]) => import("@fusio
  * `aria-describedby` pointing at the tooltip yourself to have the link in the
  * server's markup. Where the browser has no element references, write it
  * yourself; the tooltip warns once on first open if nothing links the two.
+ * In the `for` form the tooltip itself is out of the accessibility tree while
+ * its bubble is down, so a reader walking the page meets its words once, as
+ * the trigger's description.
  *
  * The tooltip shows on hover and on focus. It hides on pointer leave, on blur,
  * on Escape, and when the trigger is activated. The pointer can move from the
- * trigger onto the bubble and the bubble stays.
+ * trigger onto the bubble and the bubble stays, unless you set
+ * `hoverable="false"`. `delay` is how long the pointer rests before it shows,
+ * and `delay-out` how long it stays once the pointer leaves.
  *
  * Once one tooltip is showing, moving to another trigger shows its tooltip
  * with no `delay`, and the first one hides. The same holds for `skip-delay`
@@ -63,6 +68,8 @@ declare const HelixHeadlessTooltip_base: (new (...args: any[]) => import("@fusio
  * @csspart tooltip-right - Added to `tooltip` while the bubble is right of its trigger.
  * @csspart tooltip-top - Added to `tooltip` while the bubble is above its trigger.
  *
+ * @cssstate entering - From the moment the bubble shows until its entrance has finished.
+ * @cssstate exiting - From the moment the bubble hides until its exit has finished.
  * @cssstate open - While the tooltip shows.
  * @cssstate placed-bottom - While the bubble sits below its trigger.
  * @cssstate placed-left - While the bubble sits to the left of its trigger.
@@ -87,7 +94,9 @@ export declare class HelixHeadlessTooltip extends HelixHeadlessTooltip_base {
      */
     delay: number;
     /**
-     * How long the bubble stays after the pointer leaves, in milliseconds.
+     * How long the bubble stays after the pointer leaves the trigger or the
+     * bubble, in milliseconds: the close delay. It is the time a reader has to
+     * cross the gap onto the bubble.
      */
     delayOut: number;
     /**
@@ -115,6 +124,13 @@ export declare class HelixHeadlessTooltip extends HelixHeadlessTooltip_base {
      * why this does not reflect and nothing styles on it.
      */
     for: string;
+    /**
+     * Whether the pointer can move onto the bubble and the bubble stays, so a
+     * reader can read it under a magnifier or select its words, as WCAG 1.4.13
+     * asks. `hoverable="false"` hides the bubble once the pointer reaches it,
+     * for a bubble that covers something a reader moves on to.
+     */
+    hoverable: boolean;
     /**
      * The space between the trigger and the tip of the bubble, in pixels.
      *
@@ -225,6 +241,7 @@ export declare class HelixHeadlessTooltip extends HelixHeadlessTooltip_base {
      * it must stay inside, and a component often has one and not the other.
      */
     private get enclosure();
+    protected readonly phases: OpenPhaseController;
     private get bubble();
     /**
      * Whether there is anything to show.

package/dist/tooltip/root/tooltip-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 { anchorElement, arrowReach, customElement, elementById, HelixElement, hostAria, linkDescription, MixinControllerOpen, PopoverController, reportRuntime, sideOf, unlinkDescription, } from '@fusion.dev/helix-core';
+import { anchorElement, arrowReach, customElement, elementById, HelixElement, hostAria, linkDescription, MixinControllerOpen, OpenPhaseController, onUnlessFalse, PopoverController, reportRuntime, sideOf, unlinkDescription, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { focusTarget } from '../focus-target.js';
@@ -23,6 +23,7 @@ let HelixHeadlessTooltip = class HelixHeadlessTooltip extends MixinControllerOpe
         this.delayOut = 100;
         this.disabled = false;
         this.for = '';
+        this.hoverable = true;
         this.offset = 8;
         this.persist = false;
         this.placement = 'top';
@@ -50,6 +51,14 @@ let HelixHeadlessTooltip = class HelixHeadlessTooltip extends MixinControllerOpe
             surface: () => this.partNamed('tooltip'),
             within: () => this.enclosure,
         });
+        this.phases = new OpenPhaseController(this, {
+            mark: {
+                entering: (on) => this.toggleState('entering', on),
+                exiting: (on) => this.toggleState('exiting', on),
+            },
+            open: () => this.open,
+            surface: () => this.partNamed('tooltip'),
+        });
         this.handleContentChange = () => {
             this.requestUpdate();
         };
@@ -68,6 +77,10 @@ let HelixHeadlessTooltip = class HelixHeadlessTooltip extends MixinControllerOpe
             this.timer = setTimeout(() => this.show(), this.delay);
         };
         this.holdOnBubble = () => {
+            if (!this.hoverable) {
+                this.hideLater();
+                return;
+            }
             if (!this.named) {
                 return;
             }
@@ -330,6 +343,7 @@ let HelixHeadlessTooltip = class HelixHeadlessTooltip extends MixinControllerOpe
             describedBy: this.hasContent ? [bubble] : [],
             label: this.describedText,
         });
+        this.internals.ariaHidden = this.for !== '' && !this.open ? 'true' : null;
     }
     render() {
         const side = this.side;
@@ -365,6 +379,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessTooltip.prototype, "for", void 0);
+__decorate([
+    property({ converter: onUnlessFalse })
+], HelixHeadlessTooltip.prototype, "hoverable", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessTooltip.prototype, "offset", void 0);

package/dist/tour/back.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The stop Back goes to from `index`: the nearest stop before it that is not a
+ * `wait` stop, or `undefined` where there is none.
+ *
+ * A `wait` stop shows nothing and moves on by itself once its target is on the
+ * page, so going back onto one either moves straight on again or leaves the
+ * reader at a stop with nothing in it. Back passes over it to the stop that
+ * told the reader what to do.
+ */
+export declare const stopBefore: (types: readonly (string | undefined)[], index: number) => number | undefined;

package/dist/tour/back.js

@@ -0,0 +1,8 @@
+export const stopBefore = (types, index) => {
+    for (let at = Math.min(index, types.length) - 1; at >= 0; at -= 1) {
+        if (types[at] !== 'wait') {
+            return at;
+        }
+    }
+    return undefined;
+};

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

@@ -22,6 +22,11 @@ declare const HelixHeadlessTour_base: (new (...args: any[]) => import("@fusion.d
  * `toggle` work as they do on `Dialog`. Setting `open` starts the run, and
  * `skip()` and `requestOpen(false)` end it early.
  *
+ * The box the light falls on is on the `spotlight` part as
+ * `--tour-spotlight-x`, `--tour-spotlight-y`, `--tour-spotlight-width` and
+ * `--tour-spotlight-height`, for a sheet that draws its own light, such as a
+ * ring around the target.
+ *
  * Each stop is told its place in the run, from `progress-label`, such as "2 of
  * 5". It describes the stop's panel, so a screen reader says it at every stop,
  * and `progress` draws it in the panel as well. A dialog or a floating stop,
@@ -35,6 +40,12 @@ declare const HelixHeadlessTour_base: (new (...args: any[]) => import("@fusion.d
  * you have moved it somewhere else on the page. A stop does not trap focus, so
  * you can still `Tab` out to the element it describes.
  *
+ * **The arrow keys move between stops** while focus is in one: the arrow that
+ * points the way the line runs goes on, and the other goes back, so on a
+ * right-to-left page `ArrowLeft` goes on. Neither finishes the tour at the last
+ * stop, and a text field in a stop keeps its own arrows. `Escape` skips the
+ * tour.
+ *
  * @since 0.1.0
  * @status stable
  * @category overlays
@@ -50,12 +61,19 @@ declare const HelixHeadlessTour_base: (new (...args: any[]) => import("@fusion.d
  * @event {HelixCompleteEvent} helix-complete - Fired when the last stop is
  * finished.
  * @event {HelixTourAskEvent} helix-tour-ask - Fired when a stop's control is pressed to move the tour. The stop sends it, and the tour handles it.
+ * @event {HelixTourStatusEvent} helix-tour-status - Fired when the tour starts waiting at a `wait` stop, is skipped, or is completed, with the stop's index and `detail.status` saying which.
  * @event {ToggleEvent} toggle - Sent when the tour starts or ends, with `newState` and `oldState`.
  *
  * @csspart backdrop - Behind a dialog or a floating stop, which lights nothing. It draws no box until you give it one.
  * @csspart spotlight - The box over the current target. It also draws the dimmed area around the target.
  *
+ * @cssproperty --tour-spotlight-height - The lit box's height, in pixels, padding included. Written on the spotlight while it lights a target.
+ * @cssproperty --tour-spotlight-width - The lit box's width, in pixels, padding included. Written on the spotlight while it lights a target.
+ * @cssproperty --tour-spotlight-x - The lit box's left edge, from the window's left edge, in pixels. Written on the spotlight while it lights a target.
+ * @cssproperty --tour-spotlight-y - The lit box's top edge, from the window's top edge, in pixels. Written on the spotlight while it lights a target.
+ *
  * @cssstate open - While the tour is running.
+ * @cssstate waiting - While the tour waits at a `wait` stop for its target to be on the page.
  */
 export declare class HelixHeadlessTour extends HelixHeadlessTour_base {
     /**
@@ -131,7 +149,10 @@ export declare class HelixHeadlessTour extends HelixHeadlessTour_base {
     get length(): number;
     /** Goes to the next stop, and finishes the tour on the last stop. */
     next(): void;
-    /** Goes to the previous stop. It does nothing on the first stop. */
+    /**
+     * Goes to the previous stop, passing over a `wait` stop, which shows nothing.
+     * It does nothing on the first stop, or where only `wait` stops come before.
+     */
     back(): void;
     /**
      * Ends the tour early, as a close. `helix-complete` is not fired.
@@ -144,6 +165,15 @@ export declare class HelixHeadlessTour extends HelixHeadlessTour_base {
     private finish;
     private move;
     private readonly handleAsk;
+    /**
+     * The arrow along the line, from inside a stop: on, or back.
+     *
+     * A move and never a finish, so a reader walking the stops with the arrows
+     * cannot end the tour by going one too far; that is Next on the last stop.
+     */
+    private readonly handleArrows;
+    /** Whether `back()` would move, there being a stop that shows before this one. */
+    private get canGoBack();
     private readonly handleKeydown;
     private readonly handleViewport;
     connectedCallback(): void;
@@ -164,7 +194,20 @@ export declare class HelixHeadlessTour extends HelixHeadlessTour_base {
      * where to be.
      */
     private follow;
-    /** Focuses the current stop's panel once the stop has shown it. */
+    /**
+     * Where focus was put while a `wait` stop waits, so the move on from it still
+     * counts as a move from inside the tour while focus has stayed there.
+     */
+    private parked;
+    /**
+     * Focuses the current stop's panel once the stop has shown it.
+     *
+     * A `wait` stop shows no panel, and focus would fall to the body. It goes to
+     * the target of the stop before instead, which is usually the control the
+     * reader is asked to use, such as the button that opens the menu the stop
+     * waits for. Where that target holds no control, it goes back to where it
+     * was when the tour opened.
+     */
     private focusCurrent;
     /**
      * Tells each stop where it is in the run.

package/dist/tour/root/tour-root.js

@@ -4,9 +4,10 @@ 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, deepActiveElement, deepContains, fillTemplate, HelixActivateEvent, HelixBeforeActivateEvent, HelixCompleteEvent, HelixElement, hostAria, MixinControllerOpen, requestChange, whenHydrated, } from '@fusion.dev/helix-core';
+import { controlsIn, customElement, deepActiveElement, deepContains, fillTemplate, HelixActivateEvent, HelixBeforeActivateEvent, HelixCompleteEvent, HelixElement, HelixTourStatusEvent, hostAria, inlineStep, keyClaimed, MixinControllerOpen, requestChange, whenHydrated, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property, queryAssignedElements, state } from 'lit/decorators.js';
+import { stopBefore } from '../back.js';
 import { onPage, waitFor } from '../wait.js';
 let HelixHeadlessTour = class HelixHeadlessTour extends MixinControllerOpen(HelixElement) {
     constructor() {
@@ -35,6 +36,20 @@ let HelixHeadlessTour = class HelixHeadlessTour extends MixinControllerOpen(Heli
                 this.skip();
             }
         };
+        this.handleArrows = (event) => {
+            if (!this.open || keyClaimed(event) || event.altKey || event.ctrlKey || event.metaKey) {
+                return;
+            }
+            const along = inlineStep(this, event.key);
+            if (along === 1 && this.index < this.length - 1) {
+                event.preventDefault();
+                this.next();
+            }
+            else if (along === -1 && this.canGoBack) {
+                event.preventDefault();
+                this.back();
+            }
+        };
         this.handleKeydown = (event) => {
             if (this.open && event.key === 'Escape' && !event.defaultPrevented) {
                 event.preventDefault();
@@ -69,16 +84,20 @@ let HelixHeadlessTour = class HelixHeadlessTour extends MixinControllerOpen(Heli
         this.move(this.index + 1);
     }
     back() {
-        if (this.index <= 0) {
-            return;
+        const to = stopBefore(this.stops.map((stop) => stop.type), this.index);
+        if (to !== undefined) {
+            this.move(to);
         }
-        this.move(this.index - 1);
     }
     skip() {
-        this.requestOpen(false);
+        const at = this.index;
+        if (this.open && this.requestOpen(false)) {
+            this.dispatchEvent(new HelixTourStatusEvent({ index: at, status: 'skipped' }));
+        }
     }
     finish() {
         this.dispatchEvent(new HelixCompleteEvent({ value: String(this.index) }));
+        this.dispatchEvent(new HelixTourStatusEvent({ index: this.index, status: 'completed' }));
         this.open = false;
     }
     move(to) {
@@ -94,9 +113,13 @@ let HelixHeadlessTour = class HelixHeadlessTour extends MixinControllerOpen(Heli
             this.dispatchEvent(new HelixActivateEvent({ value: String(this.index) }));
         }
     }
+    get canGoBack() {
+        return (stopBefore(this.stops.map((stop) => stop.type), this.index) !== undefined);
+    }
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('helix-tour-ask', this.handleAsk);
+        this.addEventListener('keydown', this.handleArrows);
         document.addEventListener('keydown', this.handleKeydown);
         window.addEventListener('resize', this.handleViewport, { passive: true });
         window.addEventListener('scroll', this.handleViewport, { capture: true, passive: true });
@@ -107,6 +130,7 @@ let HelixHeadlessTour = class HelixHeadlessTour extends MixinControllerOpen(Heli
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('helix-tour-ask', this.handleAsk);
+        this.removeEventListener('keydown', this.handleArrows);
         document.removeEventListener('keydown', this.handleKeydown);
         window.removeEventListener('resize', this.handleViewport);
         window.removeEventListener('scroll', this.handleViewport, { capture: true });
@@ -115,6 +139,7 @@ let HelixHeadlessTour = class HelixHeadlessTour extends MixinControllerOpen(Heli
         this.unwait?.();
         this.unwait = undefined;
         this.waiting = undefined;
+        this.toggleState('waiting', false);
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -138,7 +163,13 @@ let HelixHeadlessTour = class HelixHeadlessTour extends MixinControllerOpen(Heli
         const opened = changed.has('open') && this.open && changed.get('open') === false;
         const closed = changed.has('open') && !this.open && changed.get('open') === true;
         const active = deepActiveElement();
-        const inside = active === null || active === document.body || deepContains(this, active);
+        const inside = active === null ||
+            active === document.body ||
+            deepContains(this, active) ||
+            (this.parked !== undefined && active === this.parked);
+        if (opened || closed || changed.has('index')) {
+            this.parked = undefined;
+        }
         if (opened) {
             if (active instanceof HTMLElement && !deepContains(this, active)) {
                 this.returnFocus = active;
@@ -158,10 +189,21 @@ let HelixHeadlessTour = class HelixHeadlessTour extends MixinControllerOpen(Heli
     }
     focusCurrent() {
         const stops = this.stops;
-        const stop = stops[Math.max(0, Math.min(this.index, stops.length - 1))];
+        const at = Math.max(0, Math.min(this.index, stops.length - 1));
+        const stop = stops[at];
         if (!stop) {
             return;
         }
+        if (stop.type === 'wait') {
+            const before = stopBefore(stops.map((one) => one.type), at);
+            const target = before === undefined ? undefined : stops[before]?.target;
+            const park = (target ? controlsIn([target])[0] : undefined) ?? this.returnFocus;
+            if (park?.isConnected) {
+                park.focus();
+                this.parked = park;
+            }
+            return;
+        }
         void stop.updateComplete.then(() => {
             if (this.open && stop.current) {
                 stop.focus();
@@ -213,12 +255,15 @@ let HelixHeadlessTour = class HelixHeadlessTour extends MixinControllerOpen(Heli
         this.unwait?.();
         this.unwait = undefined;
         this.waiting = next;
+        this.toggleState('waiting', next !== undefined);
         if (!next) {
             return;
         }
+        this.dispatchEvent(new HelixTourStatusEvent({ index: this.index, status: 'waiting' }));
         this.unwait = waitFor(next.getRootNode(), () => onPage(next.target), () => {
             this.waiting = undefined;
             this.unwait = undefined;
+            this.toggleState('waiting', false);
             queueMicrotask(() => {
                 if (this.open && this.current === next) {
                     this.next();
@@ -274,7 +319,7 @@ let HelixHeadlessTour = class HelixHeadlessTour extends MixinControllerOpen(Heli
             : html `<div
             part="spotlight"
             aria-hidden="true"
-            style=${`left: ${spot.left}px; top: ${spot.top}px; block-size: ${spot.height}px; inline-size: ${spot.width}px`}
+            style=${`left: ${spot.left}px; top: ${spot.top}px; block-size: ${spot.height}px; inline-size: ${spot.width}px; --tour-spotlight-x: ${spot.left}px; --tour-spotlight-y: ${spot.top}px; --tour-spotlight-width: ${spot.width}px; --tour-spotlight-height: ${spot.height}px`}
           ></div>`}
       <slot></slot>`;
     }

package/dist/tour/stop/tour-stop.d.ts

@@ -62,6 +62,7 @@ import '../../button/index.js';
  * @csspart back - The control that goes to the previous stop.
  * @csspart back-button - The button inside `back`.
  * @csspart back-live - The live region inside `back`.
+ * @csspart back-spinner - The ring `back` turns while it is pending.
  * @csspart back-text - The words on that button, trimmed to their capitals and baseline.
  * @csspart bubble - The panel that points at the target.
  * @csspart content - The region holding the slotted content.
@@ -70,11 +71,13 @@ import '../../button/index.js';
  * @csspart next - The control that goes to the next stop, and finishes the tour on the last stop.
  * @csspart next-button - The button inside `next`.
  * @csspart next-live - The live region inside `next`.
+ * @csspart next-spinner - The ring `next` turns while it is pending.
  * @csspart next-text - The words on that button, trimmed to their capitals and baseline.
  * @csspart progress - The stop's place in the tour, such as "2 of 5". It describes the panel, and is shown when the tour has `progress`.
  * @csspart skip - The control that ends the tour early.
  * @csspart skip-button - The button inside `skip`.
  * @csspart skip-live - The live region inside `skip`.
+ * @csspart skip-spinner - The ring `skip` turns while it is pending.
  * @csspart skip-text - The words on that button, trimmed to their capitals and baseline.
  *
  * @cssstate placed-bottom - The panel sits below its target.

package/dist/tour/stop/tour-stop.js

@@ -86,14 +86,14 @@ let HelixHeadlessTourStop = class HelixHeadlessTourStop extends HelixElement {
         return html `<slot name="actions">
       <${this.tag('button')}
         part="skip"
-      exportparts="button: skip-button, live: skip-live, text: skip-text" emphasis="ghost" @click=${() => this.ask('skip')}>
+      exportparts="button: skip-button, live: skip-live, spinner: skip-spinner, text: skip-text" emphasis="ghost" @click=${() => this.ask('skip')}>
         ${this.skipLabel}
       </${this.tag('button')}>
       ${this.first
             ? ''
             : html `<${this.tag('button')}
               part="back"
-      exportparts="button: back-button, live: back-live, text: back-text"
+      exportparts="button: back-button, live: back-live, spinner: back-spinner, text: back-text"
               emphasis="outlined"
               @click=${() => this.ask('back')}
             >
@@ -101,7 +101,7 @@ let HelixHeadlessTourStop = class HelixHeadlessTourStop extends HelixElement {
             </${this.tag('button')}>`}
       <${this.tag('button')}
         part="next"
-      exportparts="button: next-button, live: next-live, text: next-text"
+      exportparts="button: next-button, live: next-live, spinner: next-spinner, text: next-text"
         emphasis="solid"
         tone="primary"
         @click=${() => this.ask('next')}

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

@@ -21,7 +21,8 @@ declare const HelixHeadlessTreeItem_base: (new (...args: any[]) => import("@fusi
  *
  * Pressing a branch, or Enter or Space on it, opens or closes it. A branch with
  * a `value` is chosen as well and sends `helix-select`, unless the tree has
- * `nesting="heading"`, where a branch names the list under it.
+ * `nesting="heading"`, where a branch names the list under it, or
+ * `selection-mode="leaf"`, where only the items at the ends are chosen.
  *
  * A `disabled` item is reached by the arrow keys and announced as unavailable,
  * and a press, Enter or Space on it does nothing.
@@ -58,7 +59,9 @@ declare const HelixHeadlessTreeItem_base: (new (...args: any[]) => import("@fusi
  *
  * @cssproperty --tree-level - How deep this row sits, counting from one as `aria-level` does, for the indent.
  *
+ * @cssstate checked - While it is checked, in a tree with `selection-mode="multiple"`.
  * @cssstate loading - While a `lazy` item is open and its children have not arrived.
+ * @cssstate mixed - While some of a branch's items are checked, in a tree with `selection-mode="multiple"`.
  * @cssstate open - While its children are shown.
  * @cssstate selected - While it is selected.
  */
@@ -80,8 +83,9 @@ export declare class HelixHeadlessTreeItem extends HelixHeadlessTreeItem_base {
     disabled: boolean;
     /**
      * @internal Set by the tree: whether a branch heads the list under it, as
-     * under `nesting="heading"`. Such a branch only opens and closes when it is
-     * pressed, because it names a list and is not a destination of its own.
+     * under `nesting="heading"`, or is not chosen at all, as under
+     * `selection-mode="leaf"`. Such a branch only opens and closes when it is
+     * pressed.
      */
     heads: boolean;
     /**

package/dist/tree/item/tree-item.js

@@ -110,6 +110,7 @@ let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerO
     renderToggle() {
         return html `<slot
       name="chevron"
+      aria-hidden="true"
       @click=${this.href === '' ? nothing : this.handleToggleClick}
       ><svg part="toggle" fill="currentColor" viewBox=${caretDown.viewBox} aria-hidden="true">
         ${unsafeSVG(caretDown.content)}
@@ -140,6 +141,8 @@ let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerO
     willUpdate(changed) {
         super.willUpdate(changed);
         this.toggleState('selected', this.selected);
+        this.toggleState('checked', this.checkable && this.checked === true);
+        this.toggleState('mixed', this.checkable && this.checked === 'mixed');
         this.toggleState('loading', this.open && this.lazy);
         if (this.childrenKnown) {
             this.branch = this.knownChildren.some((child) => child.slot === 'children');