@fusion.dev/helix-headless 0.144.0 → 0.146.0

package/dist/toast/item/toast-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 { customElement, drawDismiss, drawDismissGlyph, HelixElement, hostAria, isRtl, MixinDismissible, requestChange, SwipeController, settleSwipe, swipeEdge, toneMark, towardEdge, } from '@fusion.dev/helix-core';
+import { CountdownController, customElement, drawDismiss, drawDismissGlyph, HelixElement, hostAria, isRtl, MixinDismissible, requestChange, SwipeController, settleSwipe, swipeEdge, toneMark, towardEdge, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
@@ -31,17 +31,31 @@ let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissib
             start: (_target, event) => event.pointerType !== 'mouse',
             surface: () => this.partNamed('item'),
         });
+        this.countdown = new CountdownController(this, {
+            done: () => {
+                this.dismiss();
+            },
+            paused: (paused) => {
+                this.toggleAttribute('data-paused', paused);
+            },
+        });
         this.openState = undefined;
-        this.holds = 0;
         this.handlePause = () => {
-            this.holds += 1;
-            this.pause();
+            this.countdown.hold();
         };
         this.handleResume = () => {
-            this.holds = Math.max(this.holds - 1, 0);
-            if (this.holds === 0) {
-                this.resume();
+            this.countdown.release();
+        };
+        this.name = () => {
+            const words = this.partNamed('content');
+            if (!words) {
+                return;
             }
+            const heading = this.assigned('heading');
+            hostAria(this.internals, {
+                describedBy: this.assigned('description'),
+                labelledBy: heading.length > 0 ? heading : [words],
+            });
         };
     }
     get open() {
@@ -60,8 +74,7 @@ let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissib
         if (!this.open) {
             return true;
         }
-        clearTimeout(this.timer);
-        this.timer = undefined;
+        this.countdown.cancel();
         return requestChange({
             apply: () => {
                 const previous = this.open;
@@ -74,25 +87,10 @@ let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissib
         });
     }
     pause() {
-        if (this.timer === undefined || this.startedAt === undefined) {
-            return;
-        }
-        clearTimeout(this.timer);
-        this.timer = undefined;
-        this.remaining = Math.max((this.remaining ?? 0) - (Date.now() - this.startedAt), 0);
-        this.startedAt = undefined;
-        this.toggleAttribute('data-paused', true);
+        this.countdown.pause();
     }
     resume() {
-        if (this.timer !== undefined || this.remaining === undefined || this.remaining <= 0) {
-            return;
-        }
-        this.startedAt = Date.now();
-        this.toggleAttribute('data-paused', false);
-        this.timer = setTimeout(() => {
-            this.timer = undefined;
-            this.dismiss();
-        }, this.remaining);
+        this.countdown.resume();
     }
     connectedCallback() {
         super.connectedCallback();
@@ -100,11 +98,6 @@ let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissib
             this.resume();
         }
     }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.pause();
-        this.holds = 0;
-    }
     willUpdate(changed) {
         super.willUpdate(changed);
         this.toggleAttribute('data-closed', !this.open);
@@ -115,17 +108,16 @@ let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissib
     }
     updated(changed) {
         super.updated(changed);
-        const words = this.partNamed('content');
-        if (words) {
-            hostAria(this.internals, { labelledBy: [words] });
-        }
+        this.name();
+    }
+    assigned(name) {
+        return (this.renderRoot
+            ?.querySelector(`slot[name="${name}"]`)
+            ?.assignedElements({ flatten: true }) ?? []);
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
-        if (this.duration !== undefined && this.duration > 0) {
-            this.remaining = this.duration;
-            this.resume();
-        }
+        this.countdown.start(this.duration);
     }
     renderIcon(mark) {
         return html `<slot name="icon">
@@ -158,7 +150,11 @@ let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissib
               ${this.renderIcon(mark)}
             </span>`
             : nothing}
-      <div part="content"><slot></slot></div>
+      <div part="content">
+        <slot name="heading" part="heading" @slotchange=${this.name}></slot>
+        <slot name="description" part="description" @slotchange=${this.name}></slot>
+        <slot></slot>
+      </div>
       <div part="actions"><slot name="actions"></slot></div>
       ${this.dismissible
             ? drawDismiss({

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

@@ -109,10 +109,16 @@ export declare class HelixHeadlessToast extends HelixElement {
      * stack, holding `message` as its text. The region removes it once it has
      * been dismissed and has finished leaving, which is the one case where it
      * removes anything: a message you render stays yours.
+     *
+     * `heading` gives the message a title, which names it, and `message` becomes
+     * the line of detail under it. `action` is an element for the message's
+     * `actions` slot, such as an Undo button you have wired up.
      */
     add(message: string, options?: {
+        action?: Element;
         dismissible?: boolean;
         duration?: number;
+        heading?: string;
         tone?: 'danger' | 'info' | 'success' | 'warning';
     }): HTMLElement;
     /** Removes a message `add()` made, once it has hidden and finished leaving. */

package/dist/toast/root/toast-root.js

@@ -92,7 +92,16 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
     add(message, options = {}) {
         const tier = this.constructor.tier;
         const item = document.createElement(`${tier}toast-item`);
-        item.textContent = message;
+        if (options.heading === undefined) {
+            item.textContent = message;
+        }
+        else {
+            item.append(slotted('heading', options.heading), slotted('description', message));
+        }
+        if (options.action) {
+            options.action.setAttribute('slot', 'actions');
+            item.append(options.action);
+        }
         if (options.tone) {
             item.setAttribute('tone', options.tone);
         }
@@ -238,3 +247,9 @@ const popoverOpen = (region) => {
 const focusTarget = (item) => item.shadowRoot?.querySelector('[part="dismiss"]') ??
     focusableElements(item)[0] ??
     null;
+const slotted = (slot, words) => {
+    const element = document.createElement('div');
+    element.slot = slot;
+    element.textContent = words;
+    return element;
+};

package/dist/toggle/group/toggle-group.d.ts

@@ -18,9 +18,12 @@ declare const HelixHeadlessToggleGroup_base: (new (...args: any[]) => import("@f
  * say whether they are pressed with `aria-pressed`, as React Aria's
  * ToggleButtonGroup and Radix's ToggleGroup do. A press presses or releases
  * one item, the arrow keys move focus without pressing, and `value` is the
- * pressed values, comma separated, which `values` also gives as a list. The
- * form receives one entry per pressed value. The indicator stays hidden, and
- * each pressed item is marked with `:state(pressed)`.
+ * pressed values, comma separated, which `values` also gives as a list. Use
+ * `values` where an item's value holds a comma. The form receives one entry
+ * per pressed value, and a page the browser brings back presses the same
+ * items again. The indicator stays hidden, and each pressed item is marked
+ * with `:state(pressed)`. Inside a toolbar it is a named group of that
+ * toolbar's controls instead, so a reader meets one toolbar.
  *
  * `orientation="vertical"` runs the items down a column, says so to the
  * accessibility tree, and the up and down arrows move between them.
@@ -178,6 +181,16 @@ export declare class HelixHeadlessToggleGroup extends HelixHeadlessToggleGroup_b
     disconnectedCallback(): void;
     protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
+    /**
+     * The group's role: a radio group, a toolbar of pressed buttons, or, for
+     * pressed buttons inside a toolbar, a group.
+     *
+     * **A toolbar inside a toolbar is a reader's dead end**, so inside one the
+     * pressed buttons are a named group of the outer toolbar, as React Aria's
+     * ToggleButtonGroup demotes itself. Read by tag and by role, since the
+     * outer toolbar is a Helix one or the page's own `role="toolbar"`.
+     */
+    private get groupRole();
     protected willUpdate(changed: PropertyValues): void;
     /**
      * What the form receives: the value, or under `selection-mode="multiple"`
@@ -203,6 +216,14 @@ export declare class HelixHeadlessToggleGroup extends HelixHeadlessToggleGroup_b
      */
     get values(): string[];
     set values(next: string[]);
+    /** The pressed values as a list last written, which `values` reads. */
+    private chosen;
+    /**
+     * Presses the items a page the browser brings back held. Under
+     * `selection-mode="multiple"` the saved state is the form's entries, one per
+     * pressed value, which the shared restore leaves alone.
+     */
+    formStateRestoreCallback(state: string | File | FormData | null): void;
     /**
      * The row the track sits in, so something can sit beside it.
      *

package/dist/toggle/group/toggle-group.js

@@ -39,11 +39,19 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
                     return;
                 }
                 const value = event.detail.value;
-                this.requestValue(this.multiple
-                    ? toggleValue(this.values, value, this.items.map((item) => item.value)).join(',')
-                    : value);
+                if (!this.multiple) {
+                    this.requestValue(value);
+                    return;
+                }
+                const next = toggleValue(this.values, value, this.items.map((item) => item.value));
+                const was = this.chosen;
+                this.chosen = next;
+                if (!this.requestValue(next.join(','))) {
+                    this.chosen = was;
+                }
             });
         };
+        this.chosen = undefined;
     }
     adopt() {
         if (this.value !== '' || this.children === undefined) {
@@ -120,10 +128,18 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
         this.validate();
         this.linkHost();
     }
+    get groupRole() {
+        if (!this.multiple) {
+            return 'radiogroup';
+        }
+        return this.parentElement?.closest('[role="toolbar"], helix-toolbar, helix-headless-toolbar')
+            ? 'group'
+            : 'toolbar';
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
         this.adopt();
-        hostAria(this.internals, { label: this.label, role: this.multiple ? 'toolbar' : 'radiogroup' });
+        hostAria(this.internals, { label: this.label, role: this.groupRole });
         this.internals.ariaOrientation = this.orientation ?? null;
         this.internals.setFormValue(this.formValue());
     }
@@ -144,11 +160,24 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
         this.reportRequired(!this.answered, 'Choose one to continue.', 'track');
     }
     get values() {
-        return this.multiple ? commaList(this.value) : this.value === '' ? [] : [this.value];
+        if (!this.multiple) {
+            return this.value === '' ? [] : [this.value];
+        }
+        return this.chosen && this.chosen.join(',') === this.value
+            ? [...this.chosen]
+            : commaList(this.value);
     }
     set values(next) {
+        this.chosen = [...next];
         this.value = next.join(',');
     }
+    formStateRestoreCallback(state) {
+        if (!(state instanceof FormData) || !this.multiple) {
+            super.formStateRestoreCallback(state);
+            return;
+        }
+        this.values = state.getAll(this.name).filter((one) => typeof one === 'string');
+    }
     render() {
         const inside = this.labelPlacement === 'start';
         const label = this.renderGroupLabel();

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

@@ -12,6 +12,14 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * focus counts as a control, including your own elements. A child that takes no
  * focus, such as a divider, is skipped. A menu is reached at its trigger.
  *
+ * Controls inside a plain wrapper, such as a `Button Group`, are each a stop
+ * of the toolbar's own, as React Aria's toolbar flattens a group: the arrows
+ * walk through the group's buttons and on past it, and the group takes no tab
+ * stop of its own.
+ *
+ * The arrows wrap from the last control to the first. Set `stop-at-ends` to
+ * keep them at the ends, as Radix's `loop` set to false does.
+ *
  * A nested composite, such as a toggle group, is one stop on the toolbar's
  * axis: the toolbar's arrows move past it, and the arrows across the toolbar
  * move inside it. A composite with a `focusable` property, as Toggle Group
@@ -49,6 +57,11 @@ export declare class HelixHeadlessToolbar extends HelixElement {
      * The direction the arrow keys move focus in.
      */
     orientation?: 'horizontal' | 'vertical';
+    /**
+     * Whether the arrow keys stop at the first and the last control. Unset, they
+     * wrap around from one end to the other.
+     */
+    stopAtEnds: boolean;
     private watcher;
     /**
      * The children that take part in the toolbar, in document order, each with

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

@@ -31,6 +31,7 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
             target: () => this.partNamed('toolbar'),
         });
         this.wroteForeign = false;
+        this.stopAtEnds = false;
         this.handleFocusIn = (event) => {
             const control = this.origin(event);
             if (control) {
@@ -75,11 +76,14 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
                 return;
             }
             let next = current;
+            const last = controls.length - 1;
             if (forward) {
-                next = (current + 1) % controls.length;
+                next = this.stopAtEnds ? Math.min(current + 1, last) : (current + 1) % controls.length;
             }
             else if (back) {
-                next = (current - 1 + controls.length) % controls.length;
+                next = this.stopAtEnds
+                    ? Math.max(current - 1, 0)
+                    : (current - 1 + controls.length) % controls.length;
             }
             else if (event.key === 'Home') {
                 next = 0;
@@ -110,9 +114,12 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
                 child.getAttribute('aria-hidden') === 'true') {
                 continue;
             }
-            const stops = takesFocus(child) ? this.inside(child) : this.within(child);
-            if (stops.length > 0) {
-                controls.push({ child, stops });
+            if (takesFocus(child)) {
+                controls.push({ child, stops: this.inside(child) });
+                continue;
+            }
+            for (const stop of this.within(child)) {
+                controls.push({ child: stop, stops: [stop] });
             }
         }
         return controls;
@@ -204,6 +211,9 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessToolbar.prototype, "orientation", void 0);
+__decorate([
+    property({ attribute: 'stop-at-ends', type: Boolean })
+], HelixHeadlessToolbar.prototype, "stopAtEnds", void 0);
 HelixHeadlessToolbar = __decorate([
     customElement('helix-headless-toolbar')
 ], HelixHeadlessToolbar);

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

@@ -30,7 +30,9 @@ declare const HelixHeadlessTooltip_base: (new (...args: any[]) => import("@fusio
  *
  * 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`
@@ -87,7 +89,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 +119,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.
      *

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, 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';
@@ -68,6 +69,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;
             }
@@ -365,6 +370,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,
@@ -50,12 +55,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 +143,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.
@@ -164,7 +179,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, 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() {
@@ -69,16 +70,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) {
@@ -115,6 +120,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 +144,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 +170,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 +236,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 +300,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>`;
     }