@fusion.dev/helix-headless 0.0.0-dev

package/dist/tour/index.d.ts

@@ -0,0 +1,2 @@
+export * from './root/tour-root.js';
+export * from './stop/tour-stop.js';

package/dist/tour/index.js

@@ -0,0 +1,2 @@
+export * from './root/tour-root.js';
+export * from './stop/tour-stop.js';

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

@@ -0,0 +1,161 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { type PropertyValues, type TemplateResult } from 'lit';
+import type { HelixHeadlessTourStop } from '../stop/tour-stop.js';
+/**
+ * @summary A guided run through an interface, one stop at a time.
+ *
+ * @description
+ * The root owns the order and nothing else. Which stop is current, what Next
+ * and Back mean, when the run is finished; the stops own where they point, and
+ * the consumer owns every word.
+ *
+ * **The spotlight is a shadow, not a hole.** The scrim is a box the size of the
+ * current target with an enormous spread on its `box-shadow`, so the darkness
+ * is what the shadow paints and the target is simply where the box is. A
+ * `clip-path` on a full-screen scrim is the other way to do it and is worse
+ * here: it needs the viewport in the same coordinate space as the cut, which
+ * stops being true the moment anything between them is transformed.
+ *
+ * **It measures, and this is a case where measuring is the only option.** The
+ * target is an element somewhere else on the page whose position nothing can
+ * know statically. That is different from a trail folding by width, where the
+ * design rule was expressible and the measurement was answering a question
+ * nobody had asked. Here the question is "where is that button", and there is
+ * no other way to ask it.
+ *
+ * **Nothing is measured on the server and nothing needs to be.** A tour starts
+ * closed and a closed tour draws nothing, so the server renders the stops as
+ * inert markup and the first frame is correct. This is also what makes it
+ * acceptable for the root to write `current` onto stops it does not own: there
+ * is no server state for the write to disagree with.
+ *
+ * **It cannot point inside a modal, and nothing can fix that here.**
+ * `showModal()` makes everything outside the dialog's own subtree inert, so a
+ * panel anywhere else is unpressable however the top layer is ordered: this is
+ * what modal means rather than a stacking accident. Measured with a modal
+ * `Drawer` open, `elementsFromPoint` over the tour's own Done button returned
+ * the drawer, the press light-dismissed the drawer, and the tour heard nothing
+ * at all. Anything a tour points into has to stay reachable, which for `Drawer`
+ * and `Dialog` means not modal while the tour is running.
+ *
+ * **Focus is not trapped.** A reader has to be able to look at, and reach, the
+ * thing being pointed at. `Escape` leaves, which is the one binding a tour
+ * needs and the one every reader already tries.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category overlays
+ * @aliases Coachmark, Product tour, Walkthrough, Onboarding
+ * @documentation https://helix.fusion.dev/components/tour
+ *
+ * @slot - The stops, in the order they should be visited.
+ *
+ * @event {HelixBeforeActivateEvent} helix-before-activate - Fired before the current stop moves, carrying the new index. Cancelable: refusing it takes the decision and nothing moves.
+ * @event {HelixBeforeCloseEvent} helix-before-close - Fired before the reader leaves early. Cancelable: refusing it takes the decision and nothing moves.
+ * @event {HelixCompleteEvent} helix-complete - Fired when the last stop is
+ * finished.
+ * @event {Event} toggle - Says the state moved, carrying `newState` and `oldState`.
+ *
+ * @csspart spotlight - The box over the current target, which paints the scrim.
+ */
+export declare class HelixHeadlessTour extends HelixElement {
+    /**
+     * Whether the tour is running.
+     */
+    open: boolean;
+    /**
+     * Which stop the reader is on.
+     *
+     * **It announced after it moved for two days, which made refusing it
+     * impossible.** `index` was a plain property the tour wrote to directly:
+     * `move` assigned it and *then* announced, so `preventDefault` on the change
+     * arrived after the move it was refusing. It goes through `requestChange`
+     * now, which announces first and applies only if nobody refused, and refusing
+     * is how a consumer takes the decision. See 294.
+     *
+     * The shape is `Carousel`'s, which is the nearest thing in the library: a
+     * `default-index` for markup that only seeds and a held state that is
+     * `undefined` until somebody sets one.
+     *
+     *
+     */
+    get index(): number;
+    set index(next: number);
+    /**
+     * Stop to start on, where nothing declared one.
+     */
+    defaultIndex: number;
+    /** The stop being shown, whoever set it, and `undefined` until somebody has. */
+    private indexState;
+    /**
+     * Accessible name for the run, such as "Getting started".
+     */
+    label: string;
+    /**
+     * Space left around the target when it is lit, in pixels.
+     */
+    spotlightPadding: number;
+    /**
+     * Label for the control that goes back, handed to every stop.
+     */
+    backLabel: string;
+    /**
+     * Label for the control that goes on.
+     */
+    nextLabel: string;
+    /**
+     * Label for the control that goes on from the last stop.
+     */
+    doneLabel: string;
+    /**
+     * Label for the control that leaves the tour.
+     */
+    skipLabel: string;
+    private assigned;
+    /**
+     * Where the light falls, read from the current target.
+     */
+    private spot;
+    /** The stops, in the order they were written. */
+    get stops(): HelixHeadlessTourStop[];
+    /** How many stops there are. */
+    get length(): number;
+    /** Goes on, and finishes the run on the last stop. */
+    next(): void;
+    /** Goes back, and does nothing on the first stop. */
+    back(): void;
+    /**
+     * Leaves the run early, which is a close rather than a completion.
+     *
+     * Announced before it is applied, and cancelable because of it. Both closes
+     * wrote `open` first and dispatched after, so a consumer calling
+     * `preventDefault` was refusing something that had already happened.
+     */
+    skip(): void;
+    private finish;
+    private move;
+    private readonly handleAsk;
+    private readonly handleKeydown;
+    private readonly handleViewport;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    /**
+     * Tells each stop where it is in the run.
+     *
+     * Written onto the stops, which is the one outward write in this family and
+     * is argued for on the class above. The labels go with it, and only where the
+     * root was given one, so a stop keeps its own default unless somebody has
+     * localised the tour.
+     */
+    private settle;
+    /** Reads the current target's box, which is where the light falls. */
+    private light;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-tour': HelixHeadlessTour;
+    }
+}

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

@@ -0,0 +1,351 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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, HelixBeforeActivateEvent, HelixBeforeCloseEvent, HelixCompleteEvent, HelixElement, hostAria, requestChange, } from '@fusion.dev/helix-core';
+import { html } from 'lit';
+import { property, queryAssignedElements, state } from 'lit/decorators.js';
+/**
+ * @summary A guided run through an interface, one stop at a time.
+ *
+ * @description
+ * The root owns the order and nothing else. Which stop is current, what Next
+ * and Back mean, when the run is finished; the stops own where they point, and
+ * the consumer owns every word.
+ *
+ * **The spotlight is a shadow, not a hole.** The scrim is a box the size of the
+ * current target with an enormous spread on its `box-shadow`, so the darkness
+ * is what the shadow paints and the target is simply where the box is. A
+ * `clip-path` on a full-screen scrim is the other way to do it and is worse
+ * here: it needs the viewport in the same coordinate space as the cut, which
+ * stops being true the moment anything between them is transformed.
+ *
+ * **It measures, and this is a case where measuring is the only option.** The
+ * target is an element somewhere else on the page whose position nothing can
+ * know statically. That is different from a trail folding by width, where the
+ * design rule was expressible and the measurement was answering a question
+ * nobody had asked. Here the question is "where is that button", and there is
+ * no other way to ask it.
+ *
+ * **Nothing is measured on the server and nothing needs to be.** A tour starts
+ * closed and a closed tour draws nothing, so the server renders the stops as
+ * inert markup and the first frame is correct. This is also what makes it
+ * acceptable for the root to write `current` onto stops it does not own: there
+ * is no server state for the write to disagree with.
+ *
+ * **It cannot point inside a modal, and nothing can fix that here.**
+ * `showModal()` makes everything outside the dialog's own subtree inert, so a
+ * panel anywhere else is unpressable however the top layer is ordered: this is
+ * what modal means rather than a stacking accident. Measured with a modal
+ * `Drawer` open, `elementsFromPoint` over the tour's own Done button returned
+ * the drawer, the press light-dismissed the drawer, and the tour heard nothing
+ * at all. Anything a tour points into has to stay reachable, which for `Drawer`
+ * and `Dialog` means not modal while the tour is running.
+ *
+ * **Focus is not trapped.** A reader has to be able to look at, and reach, the
+ * thing being pointed at. `Escape` leaves, which is the one binding a tour
+ * needs and the one every reader already tries.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category overlays
+ * @aliases Coachmark, Product tour, Walkthrough, Onboarding
+ * @documentation https://helix.fusion.dev/components/tour
+ *
+ * @slot - The stops, in the order they should be visited.
+ *
+ * @event {HelixBeforeActivateEvent} helix-before-activate - Fired before the current stop moves, carrying the new index. Cancelable: refusing it takes the decision and nothing moves.
+ * @event {HelixBeforeCloseEvent} helix-before-close - Fired before the reader leaves early. Cancelable: refusing it takes the decision and nothing moves.
+ * @event {HelixCompleteEvent} helix-complete - Fired when the last stop is
+ * finished.
+ * @event {Event} toggle - Says the state moved, carrying `newState` and `oldState`.
+ *
+ * @csspart spotlight - The box over the current target, which paints the scrim.
+ */
+let HelixHeadlessTour = class HelixHeadlessTour extends HelixElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether the tour is running.
+         */
+        this.open = false;
+        /**
+         * Stop to start on, where nothing declared one.
+         */
+        this.defaultIndex = 0;
+        /** The stop being shown, whoever set it, and `undefined` until somebody has. */
+        this.indexState = undefined;
+        /**
+         * Accessible name for the run, such as "Getting started".
+         */
+        this.label = '';
+        /**
+         * Space left around the target when it is lit, in pixels.
+         */
+        this.spotlightPadding = 8;
+        /**
+         * Label for the control that goes back, handed to every stop.
+         */
+        this.backLabel = '';
+        /**
+         * Label for the control that goes on.
+         */
+        this.nextLabel = '';
+        /**
+         * Label for the control that goes on from the last stop.
+         */
+        this.doneLabel = '';
+        /**
+         * Label for the control that leaves the tour.
+         */
+        this.skipLabel = '';
+        this.handleAsk = (event) => {
+            const what = event.detail?.what;
+            if (what === 'next') {
+                this.next();
+            }
+            else if (what === 'back') {
+                this.back();
+            }
+            else if (what === 'skip') {
+                this.skip();
+            }
+        };
+        this.handleKeydown = (event) => {
+            if (this.open && event.key === 'Escape') {
+                event.preventDefault();
+                this.skip();
+            }
+        };
+        /* On the window, because the scrim is fixed and a scroll or a resize moves
+           the target out from under it. Passive: neither handler cancels anything. */
+        this.handleViewport = () => {
+            this.light();
+        };
+    }
+    /**
+     * Which stop the reader is on.
+     *
+     * **It announced after it moved for two days, which made refusing it
+     * impossible.** `index` was a plain property the tour wrote to directly:
+     * `move` assigned it and *then* announced, so `preventDefault` on the change
+     * arrived after the move it was refusing. It goes through `requestChange`
+     * now, which announces first and applies only if nobody refused, and refusing
+     * is how a consumer takes the decision. See 294.
+     *
+     * The shape is `Carousel`'s, which is the nearest thing in the library: a
+     * `default-index` for markup that only seeds and a held state that is
+     * `undefined` until somebody sets one.
+     *
+     *
+     */
+    get index() {
+        return this.indexState ?? this.defaultIndex;
+    }
+    set index(next) {
+        const previous = this.index;
+        this.indexState = next;
+        this.requestUpdate('index', previous);
+    }
+    /** The stops, in the order they were written. */
+    get stops() {
+        return (this.assigned ?? []).filter((one) => one.current !== undefined);
+    }
+    /** How many stops there are. */
+    get length() {
+        return this.stops.length;
+    }
+    /** Goes on, and finishes the run on the last stop. */
+    next() {
+        if (this.index >= this.length - 1) {
+            this.finish();
+            return;
+        }
+        this.move(this.index + 1);
+    }
+    /** Goes back, and does nothing on the first stop. */
+    back() {
+        if (this.index <= 0) {
+            return;
+        }
+        this.move(this.index - 1);
+    }
+    /**
+     * Leaves the run early, which is a close rather than a completion.
+     *
+     * Announced before it is applied, and cancelable because of it. Both closes
+     * wrote `open` first and dispatched after, so a consumer calling
+     * `preventDefault` was refusing something that had already happened.
+     */
+    skip() {
+        const event = new HelixBeforeCloseEvent();
+        this.dispatchEvent(event);
+        if (event.defaultPrevented) {
+            return;
+        }
+        this.open = false;
+    }
+    /* Announced before it closes, and not cancelable, which is the difference
+       from `skip`. `HelixCompleteEvent` is `cancelable: false` by construction:
+       leaving early is a request a consumer may refuse, and having reached the
+       end is something that has already happened. What ordering still buys is a
+       listener that reads `open` and sees the tour as it was when it finished. */
+    finish() {
+        this.dispatchEvent(new HelixCompleteEvent({ value: String(this.index) }));
+        this.open = false;
+    }
+    /* The one audited path, which every stateful change in the library goes
+       through and this did not. It announces, then applies where nothing refused
+       and where the consumer has not taken the value over, and it audits a
+       controlled tour whose consumer never answers. */
+    move(to) {
+        requestChange({
+            apply: (value) => {
+                this.index = value;
+            },
+            event: (value) => new HelixBeforeActivateEvent({ value: String(value) }),
+            host: this,
+            next: to,
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        /* On the host, not on the slot the stops are assigned to.
+           The event is composed and bubbles, so in a browser it reaches either. It
+           does not reach the slot under `bun test`: happy-dom does not propagate
+           events through slot assignment, so a listener bound there hears nothing
+           and every spec about pressing Next passes for the wrong reason or fails
+           for a reason that is not the component's. `Megamenu` moved its own
+           listener to the host for exactly this. */
+        this.addEventListener('helix-tour-ask', this.handleAsk);
+        this.ownerDocument.addEventListener('keydown', this.handleKeydown);
+        globalThis.addEventListener('resize', this.handleViewport, { passive: true });
+        globalThis.addEventListener('scroll', this.handleViewport, { capture: true, passive: true });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('helix-tour-ask', this.handleAsk);
+        this.ownerDocument.removeEventListener('keydown', this.handleKeydown);
+        globalThis.removeEventListener('resize', this.handleViewport);
+        globalThis.removeEventListener('scroll', this.handleViewport, { capture: true });
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        /* Only the first time, before anything reads it. A script assigning `index`
+           to a tour nobody owns would otherwise hand it to a consumer who never
+           asked, and the tour would stop moving itself from then on. See
+           `MixinControllerOpen`, which argues the whole decide-once rule. */
+        hostAria(this.internals, { label: this.label, role: 'region' });
+    }
+    updated(changed) {
+        super.updated(changed);
+        this.settle();
+        this.light();
+    }
+    /**
+     * Tells each stop where it is in the run.
+     *
+     * Written onto the stops, which is the one outward write in this family and
+     * is argued for on the class above. The labels go with it, and only where the
+     * root was given one, so a stop keeps its own default unless somebody has
+     * localised the tour.
+     */
+    settle() {
+        const stops = this.stops;
+        const at = Math.max(0, Math.min(this.index, stops.length - 1));
+        stops.forEach((stop, index) => {
+            stop.current = this.open && index === at;
+            stop.first = index === 0;
+            stop.last = index === stops.length - 1;
+            if (this.backLabel !== '') {
+                stop.backLabel = this.backLabel;
+            }
+            if (this.nextLabel !== '') {
+                stop.nextLabel = this.nextLabel;
+            }
+            if (this.doneLabel !== '') {
+                stop.doneLabel = this.doneLabel;
+            }
+            if (this.skipLabel !== '') {
+                stop.skipLabel = this.skipLabel;
+            }
+        });
+    }
+    /** Reads the current target's box, which is where the light falls. */
+    light() {
+        const stops = this.stops;
+        const target = this.open
+            ? stops[Math.max(0, Math.min(this.index, stops.length - 1))]?.target
+            : undefined;
+        if (!target || typeof target.getBoundingClientRect !== 'function') {
+            this.spot = undefined;
+            return;
+        }
+        const box = target.getBoundingClientRect();
+        const pad = this.spotlightPadding;
+        const next = {
+            height: box.height + pad * 2,
+            left: box.left - pad,
+            top: box.top - pad,
+            width: box.width + pad * 2,
+        };
+        const same = this.spot !== undefined &&
+            this.spot.top === next.top &&
+            this.spot.left === next.left &&
+            this.spot.width === next.width &&
+            this.spot.height === next.height;
+        if (!same) {
+            this.spot = next;
+        }
+    }
+    render() {
+        const spot = this.spot;
+        return html `${spot === undefined
+            ? ''
+            : html `<div
+            part="spotlight"
+            aria-hidden="true"
+            style=${`inset-block-start: ${spot.top}px; inset-inline-start: ${spot.left}px; block-size: ${spot.height}px; inline-size: ${spot.width}px`}
+          ></div>`}
+      <slot></slot>`;
+    }
+};
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessTour.prototype, "open", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessTour.prototype, "index", null);
+__decorate([
+    property({ attribute: 'default-index', type: Number })
+], HelixHeadlessTour.prototype, "defaultIndex", void 0);
+__decorate([
+    property()
+], HelixHeadlessTour.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'spotlight-padding', type: Number })
+], HelixHeadlessTour.prototype, "spotlightPadding", void 0);
+__decorate([
+    property({ attribute: 'back-label' })
+], HelixHeadlessTour.prototype, "backLabel", void 0);
+__decorate([
+    property({ attribute: 'next-label' })
+], HelixHeadlessTour.prototype, "nextLabel", void 0);
+__decorate([
+    property({ attribute: 'done-label' })
+], HelixHeadlessTour.prototype, "doneLabel", void 0);
+__decorate([
+    property({ attribute: 'skip-label' })
+], HelixHeadlessTour.prototype, "skipLabel", void 0);
+__decorate([
+    queryAssignedElements({ flatten: true })
+], HelixHeadlessTour.prototype, "assigned", void 0);
+__decorate([
+    state()
+], HelixHeadlessTour.prototype, "spot", void 0);
+HelixHeadlessTour = __decorate([
+    customElement('helix-headless-tour')
+], HelixHeadlessTour);
+export { HelixHeadlessTour };

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

@@ -0,0 +1,131 @@
+import { HelixElement, type Placement } from '@fusion.dev/helix-core';
+import type { PropertyValues, TemplateResult } from 'lit';
+import '../../button/index.js';
+/**
+ * @summary One stop on a tour: what it points at, and a panel to say it in.
+ *
+ * @description
+ * A stop names a target with `for` and holds whatever the consumer puts in it.
+ * It owns no content of its own, which is the whole shape of this family: the
+ * tour abstracts the three things that are genuinely hard, and the words are
+ * the consumer's.
+ *
+ * What it does own:
+ *
+ * - **Where the panel goes.** Anchored to the target through the same floating
+ *   pass every other overlay here uses.
+ * - **That it is on top.** A popover, so it is in the top layer. A tour points
+ *   at things inside dialogs, inside scrollers, inside anything with a stacking
+ *   context, and a panel in the ordinary flow loses to all three.
+ * - **When it shows.** Which is `current`, and which the root decides.
+ *
+ * What it does not own is the heading, the paragraph, the picture and the
+ * layout. Slot a `helix-card`, or a heading and a line of prose, or anything
+ * else. This was written the other way first, with `title` and `body` parts and
+ * a fixed arrangement, which is a component deciding what a tour is allowed to
+ * say.
+ *
+ * **The buttons are slot fallback, so the common case costs nothing and the
+ * uncommon one is possible.** Write nothing and get Back, Next and Skip already
+ * wired. Slot `actions` and they are yours, driven by `next()`, `back()` and
+ * `skip()` on the root, which are public for exactly that.
+ *
+ * **`for` is an id, the same as `Tooltip`'s.** The target is elsewhere on the
+ * page, and an id is the one reference a consumer can write in markup without
+ * holding an element. Resolved against the root node, so a stop inside a shadow
+ * tree points at a target in that tree.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category overlays
+ * @documentation https://helix.fusion.dev/components/tour
+ *
+ * @slot - What this stop says. A card, a heading and a line, anything.
+ * @slot actions - Replaces the controls, which are Back, Next and Skip.
+ *
+ * @event {HelixTourAskEvent} helix-tour-ask - A stop asking the tour to move, from its own controls.
+ *
+ * @csspart actions - The row the controls sit in.
+ * @csspart arrow - The point, which the floating pass places against the target.
+ * @csspart back - The control that goes to the previous stop.
+ * @csspart back-button - The inner control.
+ * @csspart bubble - The panel that points at the target.
+ * @csspart content - The region holding the slotted content.
+ * @csspart next - The control that goes on, and finishes on the last stop.
+ * @csspart next-button - The inner control.
+ * @csspart skip - The control that leaves the tour.
+ * @csspart skip-button - The inner control.
+ */
+export declare class HelixHeadlessTourStop extends HelixElement {
+    /**
+     * The id of the element this stop is about.
+     */
+    for: string;
+    /**
+     * Which side of the target the panel prefers.
+     */
+    placement: Placement;
+    /**
+     * Whether this is the stop the reader is on.
+     *
+     * Written by the root rather than by a consumer, which is the one place this
+     * family writes onto markup it does not own. It is acceptable here for a
+     * reason that did not hold for the trail or the avatar group: a tour starts
+     * closed, so there is no server state to get wrong. The server renders a
+     * closed tour, a closed tour shows nothing, and nothing can disagree.
+     */
+    current: boolean;
+    /**
+     * Whether this is the last stop, so the control says Done.
+     */
+    last: boolean;
+    /**
+     * Whether this is the first stop, so there is nowhere back to.
+     */
+    first: boolean;
+    /**
+     * Label for the control that goes back.
+     */
+    backLabel: string;
+    /**
+     * Label for the control that goes on.
+     */
+    nextLabel: string;
+    /**
+     * Label for the control that goes on from the last stop.
+     */
+    doneLabel: string;
+    /**
+     * Label for the control that leaves the tour.
+     */
+    skipLabel: string;
+    /** The element this stop is about, or null where the id resolves to nothing. */
+    get target(): HTMLElement | null;
+    private readonly floating;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    /**
+     * Skip, back and next, behind a seam the styled tier can move.
+     *
+     * They are slot fallback rather than markup a consumer has to write, so a
+     * tour with nothing slotted still has the three controls a tour needs; and
+     * they are a method as well, so a tier above can render its own three without
+     * reimplementing the panel around them. Both are needed: the slot is for the
+     * consumer and the method is for the tier.
+     */
+    protected renderActions(): TemplateResult;
+    protected render(): TemplateResult;
+    /**
+     * Says what the reader pressed and lets the root decide.
+     *
+     * A stop cannot move a tour: it does not know what is after it, and a stop
+     * that reached up to its parent to find out would be a stop that only works
+     * inside one. Composed, so the root hears it through its own slot.
+     */
+    private ask;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-tour-stop': HelixHeadlessTourStop;
+    }
+}