@slotted/angular 0.0.0-stage → 0.1.0-beta.0

package/fesm2022/slotted-angular-tour.mjs

@@ -0,0 +1,1330 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injectable, input, TemplateRef, Directive, HostAttributeToken, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, afterNextRender, booleanAttribute, numberAttribute, model, output, contentChild, contentChildren, viewChild, ViewContainerRef, Injector, signal, DestroyRef, effect, untracked, forwardRef } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import { injectMessages } from '@slotted/angular/i18n';
+import { createDismissableLayer } from '@slotted/core/dismissable-layer';
+import { createFocusScope, tabbables } from '@slotted/core/focus';
+import { getLiveAnnouncer } from '@slotted/core/live-announcer';
+import { createPortalRoot } from '@slotted/core/portal';
+import { createPositioner } from '@slotted/core/positioner';
+import { createPresence } from '@slotted/core/presence';
+import { tourMessages } from '@slotted/core/i18n';
+import { createControllable } from '@slotted/core/state';
+import { compactSide, tourProgress, createTourController, stageStep, cardFits, writeTargetRect, watchTarget, isCompactViewport, keepOverTarget, isTextEntry, tourKey } from '@slotted/core/tour';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+
+const SL_TOUR = new InjectionToken('slotted tour');
+
+/**
+ * `closeOnOutsidePress` is off: a press on the scrim is the easiest press on
+ * the page to make by accident, and it would throw away where the reader was.
+ * `targetTimeout` is zero: a wait shows nothing new, so a consumer whose
+ * target renders late says how late.
+ */
+const TOUR_FALLBACK = {
+    align: 'center',
+    alignOffset: 0,
+    arrow: true,
+    arrowPadding: 12,
+    autoFocus: true,
+    closeOnEscape: true,
+    closeOnOutsidePress: false,
+    collisionPadding: 8,
+    keyboardNavigation: true,
+    layout: 'auto',
+    missing: 'center',
+    modal: true,
+    scrollIntoView: true,
+    side: 'bottom',
+    sideOffset: 0,
+    size: 'md',
+    spotlight: true,
+    targetTimeout: 0,
+};
+const TOUR_DEFAULTS = new InjectionToken('slotted tour defaults', {
+    providedIn: 'root',
+    factory: () => TOUR_FALLBACK,
+});
+/**
+ * An application decides once how its tours behave. A tour that states any of
+ * it itself still wins, and so does a step. Its words come from the language
+ * in force (`provideSlotted`).
+ */
+function provideTourDefaults(defaults) {
+    return {
+        provide: TOUR_DEFAULTS,
+        useFactory: () => ({ ...TOUR_FALLBACK, ...defaults }),
+    };
+}
+/** What a tour renders as here, before it states anything of its own. */
+function injectTourDefaults() {
+    return inject(TOUR_DEFAULTS);
+}
+/**
+ * Application-scoped rather than module-scoped, for the reason `field` records:
+ * two applications rendering in one server process must not share a sequence.
+ */
+class SlTourIdFactory {
+    count = 0;
+    next() {
+        this.count += 1;
+        return `slotted-tour-${this.count}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTourIdFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTourIdFactory, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTourIdFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * `<ng-template slTourStep="share">`: the body of the step with that id,
+ * rendered only while the step is shown. `slTourStepSlot="media"` writes the
+ * picture above the header instead.
+ */
+class SlTourStep {
+    id = input.required({ ...(ngDevMode ? { debugName: "id" } : /* istanbul ignore next */ {}), alias: 'slTourStep' });
+    slot = input('body', { ...(ngDevMode ? { debugName: "slot" } : /* istanbul ignore next */ {}), alias: 'slTourStepSlot' });
+    template = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTourStep, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlTourStep, isStandalone: true, selector: "ng-template[slTourStep]", inputs: { id: { classPropertyName: "id", publicName: "slTourStep", isSignal: true, isRequired: true, transformFunction: null }, slot: { classPropertyName: "slot", publicName: "slTourStepSlot", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTourStep, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[slTourStep]', standalone: true }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "slTourStep", required: true }] }], slot: [{ type: i0.Input, args: [{ isSignal: true, alias: "slTourStepSlot", required: false }] }] } });
+/**
+ * `<ng-template slTourCard>`: the consumer's own arrangement of the card,
+ * rendered inside the positioned layer in place of the whole anatomy.
+ */
+class SlTourCard {
+    template = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTourCard, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTourCard, isStandalone: true, selector: "ng-template[slTourCard]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTourCard, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[slTourCard]', standalone: true }]
+        }] });
+/**
+ * The card. `role="dialog"`, named by the title part and described by the
+ * description part when the step has one; `aria-modal` only on a modal step,
+ * the only state in which the page behind is actually inert. The arrow keys
+ * are read here. A role or an `aria-label` the consumer wrote survives.
+ */
+class SlTourContent {
+    tour = inject(SL_TOUR);
+    role = inject(new HostAttributeToken('role'), { optional: true });
+    label = inject(new HostAttributeToken('aria-label'), { optional: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTourContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTourContent, isStandalone: true, selector: "[slTourContent]", host: { attributes: { "data-part": "content", "tabindex": "-1" }, listeners: { "keydown": "tour.onKeyDown($event)" }, properties: { "attr.role": "role ?? \"dialog\"", "attr.aria-labelledby": "label === null ? tour.titleId : null", "attr.aria-describedby": "tour.hasDescription() ? tour.descriptionId : null", "attr.aria-modal": "tour.modal() ? \"true\" : null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTourContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slTourContent]',
+                    standalone: true,
+                    host: {
+                        'data-part': 'content',
+                        tabindex: '-1',
+                        '[attr.role]': 'role ?? "dialog"',
+                        '[attr.aria-labelledby]': 'label === null ? tour.titleId : null',
+                        '[attr.aria-describedby]': 'tour.hasDescription() ? tour.descriptionId : null',
+                        '[attr.aria-modal]': 'tour.modal() ? "true" : null',
+                        '(keydown)': 'tour.onKeyDown($event)',
+                    },
+                }]
+        }] });
+/** The step's picture, full bleed above the header; hidden when it has none. */
+class SlTourMedia {
+    tour = inject(SL_TOUR);
+    url = computed(() => {
+        const media = this.tour.current()?.media;
+        return typeof media === 'string' ? media : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "url" }] : /* istanbul ignore next */ []));
+    shown = computed(() => this.tour.mediaTemplate() !== null || this.url() !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shown" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTourMedia, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlTourMedia, isStandalone: true, selector: "[slTourMedia]", host: { attributes: { "data-part": "media" }, properties: { "attr.hidden": "shown() ? null : \"\"" } }, ngImport: i0, template: `@if (tour.mediaTemplate(); as media) {
+      <ng-container [ngTemplateOutlet]="media" />
+    } @else if (url(); as src) {
+      <img alt="" [src]="src" />
+    }`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTourMedia, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slTourMedia]',
+                    standalone: true,
+                    imports: [NgTemplateOutlet],
+                    template: `@if (tour.mediaTemplate(); as media) {
+      <ng-container [ngTemplateOutlet]="media" />
+    } @else if (url(); as src) {
+      <img alt="" [src]="src" />
+    }`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        'data-part': 'media',
+                        '[attr.hidden]': 'shown() ? null : ""',
+                    },
+                }]
+        }] });
+class SlTourHeader {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTourHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTourHeader, isStandalone: true, selector: "[slTourHeader]", host: { attributes: { "data-part": "header" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTourHeader, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slTourHeader]', standalone: true, host: { 'data-part': 'header' } }]
+        }] });
+/** “2 of 5”, counting the steps available now; hidden in a tour of one step. */
+class SlTourProgress {
+    tour = inject(SL_TOUR);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTourProgress, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlTourProgress, isStandalone: true, selector: "[slTourProgress]", host: { attributes: { "data-part": "progress" }, properties: { "attr.hidden": "tour.total() > 1 ? null : \"\"" } }, ngImport: i0, template: `{{ tour.t('progress', { position: tour.position(), total: tour.total() }) }}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTourProgress, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slTourProgress]',
+                    standalone: true,
+                    template: `{{ tour.t('progress', { position: tour.position(), total: tour.total() }) }}`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        'data-part': 'progress',
+                        '[attr.hidden]': 'tour.total() > 1 ? null : ""',
+                    },
+                }]
+        }] });
+/** Closes with the outcome `close` and the reason `dismiss`. The cross is drawn unless the consumer wrote content of their own. */
+class SlTourClose {
+    tour = inject(SL_TOUR);
+    label = inject(new HostAttributeToken('aria-label'), { optional: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTourClose, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlTourClose, isStandalone: true, selector: "button[slTourClose]", host: { attributes: { "data-part": "close", "type": "button" }, listeners: { "click": "tour.close(\"close\", $event, true)" }, properties: { "attr.aria-label": "label ?? tour.t('close')", "attr.hidden": "tour.showClose() ? null : \"\"" } }, ngImport: i0, template: `<ng-content
+    ><span slIcon size="sm"><svg slGlyph name="x"></svg></span
+  ></ng-content>`, isInline: true, dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTourClose, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[slTourClose]',
+                    standalone: true,
+                    imports: [SlGlyph, SlIcon],
+                    template: `<ng-content
+    ><span slIcon size="sm"><svg slGlyph name="x"></svg></span
+  ></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        'data-part': 'close',
+                        type: 'button',
+                        '[attr.aria-label]': "label ?? tour.t('close')",
+                        '[attr.hidden]': 'tour.showClose() ? null : ""',
+                        '(click)': 'tour.close("close", $event, true)',
+                    },
+                }]
+        }] });
+/** The step's title and the card's accessible name. Text written inside replaces it. */
+class SlTourTitle {
+    tour = inject(SL_TOUR);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTourTitle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlTourTitle, isStandalone: true, selector: "[slTourTitle]", host: { attributes: { "data-part": "title" }, properties: { "id": "tour.titleId" } }, ngImport: i0, template: `<ng-content>{{ tour.current()?.title }}</ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTourTitle, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slTourTitle]',
+                    standalone: true,
+                    template: `<ng-content>{{ tour.current()?.title }}</ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { 'data-part': 'title', '[id]': 'tour.titleId' },
+                }]
+        }] });
+/** The step's description, and the card's accessible description; hidden when it has none. */
+class SlTourDescription {
+    tour = inject(SL_TOUR);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTourDescription, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlTourDescription, isStandalone: true, selector: "[slTourDescription]", host: { attributes: { "data-part": "description" }, properties: { "id": "tour.descriptionId", "attr.hidden": "tour.hasDescription() ? null : \"\"" } }, ngImport: i0, template: `{{ tour.current()?.description }}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTourDescription, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slTourDescription]',
+                    standalone: true,
+                    template: `{{ tour.current()?.description }}`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        'data-part': 'description',
+                        '[id]': 'tour.descriptionId',
+                        '[attr.hidden]': 'tour.hasDescription() ? null : ""',
+                    },
+                }]
+        }] });
+/** The step's content — a template or text — and the only part that scrolls. */
+class SlTourBody {
+    tour = inject(SL_TOUR);
+    text = computed(() => {
+        const content = this.tour.current()?.content;
+        return typeof content === 'string' ? content : '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    shown = computed(() => this.tour.bodyTemplate() !== null || this.text() !== '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shown" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTourBody, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlTourBody, isStandalone: true, selector: "[slTourBody]", host: { attributes: { "data-part": "body" }, properties: { "attr.hidden": "shown() ? null : \"\"" } }, ngImport: i0, template: `@if (tour.bodyTemplate(); as body) {
+      <ng-container [ngTemplateOutlet]="body" />
+    } @else {
+      {{ text() }}
+    }`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTourBody, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slTourBody]',
+                    standalone: true,
+                    imports: [NgTemplateOutlet],
+                    template: `@if (tour.bodyTemplate(); as body) {
+      <ng-container [ngTemplateOutlet]="body" />
+    } @else {
+      {{ text() }}
+    }`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        'data-part': 'body',
+                        '[attr.hidden]': 'shown() ? null : ""',
+                    },
+                }]
+        }] });
+class SlTourFooter {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTourFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTourFooter, isStandalone: true, selector: "[slTourFooter]", host: { attributes: { "data-part": "footer" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTourFooter, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slTourFooter]', standalone: true, host: { 'data-part': 'footer' } }]
+        }] });
+/**
+ * The three actions go on the consumer's own `button slButton`. `slButton`
+ * writes `data-part="root"` as a static host attribute, which erases the part
+ * the template wrote, so each of these writes its part back after the first
+ * render, as `slTransferPart` does.
+ */
+class TourAction {
+    tour = inject(SL_TOUR);
+    constructor(part) {
+        const host = inject(ElementRef).nativeElement;
+        afterNextRender(() => host.setAttribute('data-part', part));
+    }
+}
+/** Closes with the outcome `skip`. Hidden on the last step and in a tour of one. */
+class SlTourSkip extends TourAction {
+    constructor() {
+        super('skip');
+    }
+    onClick(event) {
+        if (!event.defaultPrevented)
+            this.tour.close('skip', event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTourSkip, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTourSkip, isStandalone: true, selector: "button[slTourSkip]", host: { listeners: { "click": "onClick($event)" }, properties: { "attr.hidden": "tour.showSkip() ? null : \"\"" } }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTourSkip, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[slTourSkip]',
+                    standalone: true,
+                    host: {
+                        '[attr.hidden]': 'tour.showSkip() ? null : ""',
+                        '(click)': 'onClick($event)',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+/** The previous available step. Hidden on the first. */
+class SlTourPrev extends TourAction {
+    constructor() {
+        super('prev');
+    }
+    onClick(event) {
+        if (!event.defaultPrevented)
+            this.tour.prev(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTourPrev, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTourPrev, isStandalone: true, selector: "button[slTourPrev]", host: { listeners: { "click": "onClick($event)" }, properties: { "attr.hidden": "tour.showPrev() ? null : \"\"" } }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTourPrev, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[slTourPrev]',
+                    standalone: true,
+                    host: {
+                        '[attr.hidden]': 'tour.showPrev() ? null : ""',
+                        '(click)': 'onClick($event)',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * The next available step, or Done on the last (`data-last`), which closes
+ * with the outcome `complete`. Hidden on a step that advances on the reader's
+ * own action at the target, unless the step asks for it.
+ */
+class SlTourNext extends TourAction {
+    constructor() {
+        super('next');
+    }
+    onClick(event) {
+        if (event.defaultPrevented || this.tour.pending())
+            return;
+        this.tour.next(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTourNext, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTourNext, isStandalone: true, selector: "button[slTourNext]", host: { listeners: { "click": "onClick($event)" }, properties: { "attr.hidden": "tour.showNext() ? null : \"\"", "attr.data-last": "tour.last() ? \"\" : null" } }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTourNext, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[slTourNext]',
+                    standalone: true,
+                    host: {
+                        '[attr.hidden]': 'tour.showNext() ? null : ""',
+                        '[attr.data-last]': 'tour.last() ? "" : null',
+                        '(click)': 'onClick($event)',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+const optionalBoolean = (state) => state === undefined ? undefined : booleanAttribute(state);
+const optionalNumber = (value) => value === undefined ? undefined : numberAttribute(value);
+const DISMISS_REASONS = {
+    back: 'back',
+    blur: 'programmatic',
+    escape: 'escape',
+    outsidePress: 'outsidePress',
+    programmatic: 'programmatic',
+};
+function eventReason(event) {
+    if (event === undefined)
+        return 'programmatic';
+    if (event instanceof KeyboardEvent)
+        return 'keyboard';
+    if (event instanceof MouseEvent)
+        return event.detail === 0 ? 'keyboard' : 'pointer';
+    return 'programmatic';
+}
+function directionOf(node) {
+    const declared = node.closest('[dir]')?.getAttribute('dir');
+    if (declared === 'rtl' || declared === 'ltr')
+        return declared;
+    return node.ownerDocument.defaultView?.getComputedStyle(node).direction === 'rtl' ? 'rtl' : 'ltr';
+}
+/**
+ * The frame the tour draws over the page: scrim, spotlight and the card's
+ * layer. A component of its own, created inside `sl-tour` and moved to the
+ * portal, because a component's view is redrawn by the signals it reads.
+ * The same template as an embedded view created by hand was drawn once and
+ * never again outside a harness that checks the whole tree: the tour opened
+ * with no scrim, its card never appeared, and a step change removed
+ * `data-open` from a frame that no longer followed its state.
+ */
+class SlTourFrame {
+    tour = inject(SL_TOUR);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTourFrame, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlTourFrame, isStandalone: true, selector: "sl-tour-frame", host: { styleAttribute: "display: contents" }, ngImport: i0, template: `<div
+    data-ui="tour"
+    data-part="root"
+    [attr.data-open]="tour.visible() && tour.arrived() ? '' : null"
+    [attr.data-modal]="tour.modal() ? '' : null"
+    [attr.data-spot]="tour.spot().move"
+    [attr.data-spotlight]="tour.spotlightOn() ? '' : null"
+    [attr.data-compact]="tour.compact() ? '' : null"
+    [attr.data-missing]="tour.drawn()?.missing ? '' : null"
+    [attr.data-placement]="tour.anchored() ? 'anchored' : 'centered'"
+    [attr.data-size]="tour.resolvedSize()"
+    [attr.data-align]="tour.anchored() ? tour.resolvedAlign() : null"
+  >
+    @if (tour.modal() || tour.spotlightOn()) {
+      <div data-part="backdrop" aria-hidden="true">
+        @if (tour.spotlightOn()) {
+          <div data-part="spotlight"></div>
+        }
+      </div>
+    }
+    <div
+      data-part="surface"
+      [attr.data-placement]="tour.anchored() ? 'anchored' : 'centered'"
+      [attr.data-ready]="tour.ready() ? '' : null"
+      [attr.data-leaving]="tour.leaving() ? '' : null"
+    >
+      @if (!tour.modal()) {
+        <span
+          data-part="focus-guard"
+          tabindex="0"
+          aria-hidden="true"
+          (focus)="tour.onGuardFocus()"
+        ></span>
+      }
+      @if (tour.anchored() && tour.resolvedArrow()) {
+        <div data-part="arrow"></div>
+      }
+      @if (tour.card(); as custom) {
+        <ng-container [ngTemplateOutlet]="custom.template" />
+      } @else {
+        <div slTourContent>
+          <div slTourMedia></div>
+          <div slTourHeader>
+            <p slTourProgress></p>
+            <button slTourClose></button>
+          </div>
+          <h2 slTourTitle></h2>
+          <p slTourDescription></p>
+          <div slTourBody></div>
+          <div slTourFooter>
+            <button slButton slTourSkip size="sm" tone="secondary" variant="ghost">
+              {{ tour.t('skip') }}
+            </button>
+            <button slButton slTourPrev size="sm" tone="secondary" variant="outline">
+              {{ tour.t('prev') }}
+            </button>
+            <button
+              slButton
+              slTourNext
+              size="sm"
+              tone="accent"
+              variant="solid"
+              [loading]="tour.pending()"
+              [messages]="{ loading: tour.t('preparing') }"
+            >
+              {{ tour.t(tour.last() ? 'done' : 'next') }}
+            </button>
+          </div>
+        </div>
+      }
+      @if (!tour.modal()) {
+        <span
+          data-part="focus-guard"
+          tabindex="0"
+          aria-hidden="true"
+          (focus)="tour.onGuardFocus()"
+        ></span>
+      }
+    </div>
+  </div>`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SlButton, selector: "button[slButton]", inputs: ["disabled", "focusableWhenDisabled", "fullWidth", "loading", "loadingDelay", "messages", "size", "tone", "type", "variant"], exportAs: ["slButton"] }, { kind: "component", type: SlTourBody, selector: "[slTourBody]" }, { kind: "component", type: SlTourClose, selector: "button[slTourClose]" }, { kind: "directive", type: SlTourContent, selector: "[slTourContent]" }, { kind: "component", type: SlTourDescription, selector: "[slTourDescription]" }, { kind: "directive", type: SlTourFooter, selector: "[slTourFooter]" }, { kind: "directive", type: SlTourHeader, selector: "[slTourHeader]" }, { kind: "component", type: SlTourMedia, selector: "[slTourMedia]" }, { kind: "directive", type: SlTourNext, selector: "button[slTourNext]" }, { kind: "directive", type: SlTourPrev, selector: "button[slTourPrev]" }, { kind: "component", type: SlTourProgress, selector: "[slTourProgress]" }, { kind: "directive", type: SlTourSkip, selector: "button[slTourSkip]" }, { kind: "component", type: SlTourTitle, selector: "[slTourTitle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTourFrame, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sl-tour-frame',
+                    standalone: true,
+                    imports: [
+                        NgTemplateOutlet,
+                        SlButton,
+                        SlTourBody,
+                        SlTourClose,
+                        SlTourContent,
+                        SlTourDescription,
+                        SlTourFooter,
+                        SlTourHeader,
+                        SlTourMedia,
+                        SlTourNext,
+                        SlTourPrev,
+                        SlTourProgress,
+                        SlTourSkip,
+                        SlTourTitle,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { style: 'display: contents' },
+                    template: `<div
+    data-ui="tour"
+    data-part="root"
+    [attr.data-open]="tour.visible() && tour.arrived() ? '' : null"
+    [attr.data-modal]="tour.modal() ? '' : null"
+    [attr.data-spot]="tour.spot().move"
+    [attr.data-spotlight]="tour.spotlightOn() ? '' : null"
+    [attr.data-compact]="tour.compact() ? '' : null"
+    [attr.data-missing]="tour.drawn()?.missing ? '' : null"
+    [attr.data-placement]="tour.anchored() ? 'anchored' : 'centered'"
+    [attr.data-size]="tour.resolvedSize()"
+    [attr.data-align]="tour.anchored() ? tour.resolvedAlign() : null"
+  >
+    @if (tour.modal() || tour.spotlightOn()) {
+      <div data-part="backdrop" aria-hidden="true">
+        @if (tour.spotlightOn()) {
+          <div data-part="spotlight"></div>
+        }
+      </div>
+    }
+    <div
+      data-part="surface"
+      [attr.data-placement]="tour.anchored() ? 'anchored' : 'centered'"
+      [attr.data-ready]="tour.ready() ? '' : null"
+      [attr.data-leaving]="tour.leaving() ? '' : null"
+    >
+      @if (!tour.modal()) {
+        <span
+          data-part="focus-guard"
+          tabindex="0"
+          aria-hidden="true"
+          (focus)="tour.onGuardFocus()"
+        ></span>
+      }
+      @if (tour.anchored() && tour.resolvedArrow()) {
+        <div data-part="arrow"></div>
+      }
+      @if (tour.card(); as custom) {
+        <ng-container [ngTemplateOutlet]="custom.template" />
+      } @else {
+        <div slTourContent>
+          <div slTourMedia></div>
+          <div slTourHeader>
+            <p slTourProgress></p>
+            <button slTourClose></button>
+          </div>
+          <h2 slTourTitle></h2>
+          <p slTourDescription></p>
+          <div slTourBody></div>
+          <div slTourFooter>
+            <button slButton slTourSkip size="sm" tone="secondary" variant="ghost">
+              {{ tour.t('skip') }}
+            </button>
+            <button slButton slTourPrev size="sm" tone="secondary" variant="outline">
+              {{ tour.t('prev') }}
+            </button>
+            <button
+              slButton
+              slTourNext
+              size="sm"
+              tone="accent"
+              variant="solid"
+              [loading]="tour.pending()"
+              [messages]="{ loading: tour.t('preparing') }"
+            >
+              {{ tour.t(tour.last() ? 'done' : 'next') }}
+            </button>
+          </div>
+        </div>
+      }
+      @if (!tour.modal()) {
+        <span
+          data-part="focus-guard"
+          tabindex="0"
+          aria-hidden="true"
+          (focus)="tour.onGuardFocus()"
+        ></span>
+      }
+    </div>
+  </div>`,
+                }]
+        }] });
+/**
+ * A guided walk through an interface, one step at a time.
+ *
+ * `open` and `step` are two-way; `@slotted/core/tour` owns everything between
+ * a press and a card — conditions, preparation, a target that arrives late or
+ * never. The frame is built from a template and portalled to the end of the
+ * document, as `slPopoverLayer`'s is. A modal step makes the page `inert` and
+ * keeps focus in the card; an interactive step leaves the page reachable so
+ * the reader can operate the target.
+ *
+ * With no `ng-template slTourCard` inside, it renders the whole card.
+ */
+class SlTour {
+    steps = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
+    /** Whether the tour is showing. Two-way. */
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** The current step's id. Two-way; `null` is the first available step. */
+    step = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** `compact` or `regular` decide the phone composition; `auto` takes it below 600 pixels of viewport. */
+    layout = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    side = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    align = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    missing = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "missing" }] : /* istanbul ignore next */ []));
+    /** Words laid over the catalog of the language in force, key by key. */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    finalFocus = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "finalFocus" }] : /* istanbul ignore next */ []));
+    arrow = input(undefined, { ...(ngDevMode ? { debugName: "arrow" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    modalInput = input(undefined, { ...(ngDevMode ? { debugName: "modalInput" } : /* istanbul ignore next */ {}), alias: 'modal',
+        transform: optionalBoolean });
+    spotlight = input(undefined, { ...(ngDevMode ? { debugName: "spotlight" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    autoFocus = input(undefined, { ...(ngDevMode ? { debugName: "autoFocus" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    closeOnEscape = input(undefined, { ...(ngDevMode ? { debugName: "closeOnEscape" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    closeOnOutsidePress = input(undefined, { ...(ngDevMode ? { debugName: "closeOnOutsidePress" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    scrollIntoView = input(undefined, { ...(ngDevMode ? { debugName: "scrollIntoView" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    keyboardNavigation = input(undefined, { ...(ngDevMode ? { debugName: "keyboardNavigation" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    targetTimeout = input(undefined, { ...(ngDevMode ? { debugName: "targetTimeout" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    sideOffset = input(undefined, { ...(ngDevMode ? { debugName: "sideOffset" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    alignOffset = input(undefined, { ...(ngDevMode ? { debugName: "alignOffset" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    collisionPadding = input(undefined, { ...(ngDevMode ? { debugName: "collisionPadding" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    arrowPadding = input(undefined, { ...(ngDevMode ? { debugName: "arrowPadding" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    /** One output per transition, carrying the reason, the event and — on a close — the outcome. */
+    openChangeRequest = output();
+    stepChangeRequest = output();
+    card = contentChild(SlTourCard, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "card" }] : /* istanbul ignore next */ []));
+    stepTemplates = contentChildren(SlTourStep, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stepTemplates" }] : /* istanbul ignore next */ []));
+    /**
+     * Where the frame's view is inserted: inside this component's own view, so
+     * the signals its template reads mark this component for check. Inserted
+     * into the host's container instead — the parent's view — the frame was
+     * never redrawn after the first time outside a test harness that checks the
+     * whole tree: the tour opened with no scrim and its card never appeared.
+     * The frame's nodes are then moved to the portal, as before.
+     */
+    outlet = viewChild.required('outlet', { ...(ngDevMode ? { debugName: "outlet" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
+    defaults = injectTourDefaults();
+    base = inject(SlTourIdFactory).next();
+    viewContainer = inject(ViewContainerRef);
+    injector = inject(Injector);
+    document = inject(ViewContainerRef).element.nativeElement
+        .ownerDocument;
+    titleId = `${this.base}-title`;
+    descriptionId = `${this.base}-description`;
+    /* ── Resolution ─────────────────────────────────────────────────────── */
+    shown = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shown" }] : /* istanbul ignore next */ []));
+    /** The cutout's target and the movement that brings it there. */
+    spot = signal({
+        target: null,
+        move: 'rest',
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "spot" }] : /* istanbul ignore next */ []));
+    leaving = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "leaving" }] : /* istanbul ignore next */ []));
+    /** The card of the drawn step has been placed, and may be shown. */
+    ready = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ready" }] : /* istanbul ignore next */ []));
+    staging = null;
+    pending = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pending" }] : /* istanbul ignore next */ []));
+    /** The last step drawn, kept through the exit so the card leaves as it was. */
+    drawn = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "drawn" }] : /* istanbul ignore next */ []));
+    current = computed(() => this.drawn()?.step ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    /** The tour's own words and the drawn step's, laid over the catalog in that order. */
+    override = computed(() => {
+        const step = this.current()?.messages;
+        return step === undefined ? this.messages() : { ...this.messages(), ...step };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "override" }] : /* istanbul ignore next */ []));
+    /** The family's words in the language in force, with the tour's and the step's `messages` laid over them. */
+    t = injectMessages(tourMessages, this.override);
+    resolvedSize = computed(() => this.size() ?? this.defaults.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    /** The viewport is in the compact size class: a lateral side turns vertical, the card takes the width. */
+    narrow = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "narrow" }] : /* istanbul ignore next */ []));
+    compact = computed(() => {
+        const layout = this.layout() ?? this.defaults.layout;
+        return layout === 'compact' || (layout === 'auto' && this.narrow());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
+    /** The target leaves a card room on some side; when it does not, the card is centred over it. */
+    fits = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fits" }] : /* istanbul ignore next */ []));
+    resolvedSide = computed(() => compactSide(this.current()?.side ?? this.side() ?? this.defaults.side, this.compact()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSide" }] : /* istanbul ignore next */ []));
+    resolvedAlign = computed(() => this.current()?.align ?? this.align() ?? this.defaults.align, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedAlign" }] : /* istanbul ignore next */ []));
+    resolvedArrow = computed(() => this.arrow() ?? this.defaults.arrow, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedArrow" }] : /* istanbul ignore next */ []));
+    modal = computed(() => (this.modalInput() ?? this.defaults.modal) && this.current()?.interactive !== true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "modal" }] : /* istanbul ignore next */ []));
+    resolvedSpotlight = computed(() => this.current()?.spotlight ?? this.spotlight() ?? this.defaults.spotlight, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSpotlight" }] : /* istanbul ignore next */ []));
+    hasTarget = computed(() => (this.drawn()?.target ?? null) !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasTarget" }] : /* istanbul ignore next */ []));
+    anchored = computed(() => this.hasTarget() && this.fits(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "anchored" }] : /* istanbul ignore next */ []));
+    spotlightOn = computed(() => this.resolvedSpotlight() && this.spot().target !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "spotlightOn" }] : /* istanbul ignore next */ []));
+    progress = computed(() => tourProgress(this.steps(), this.current()?.id ?? null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
+    position = computed(() => this.progress().position, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    total = computed(() => this.progress().total, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
+    first = computed(() => this.progress().first, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "first" }] : /* istanbul ignore next */ []));
+    last = computed(() => this.progress().last, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "last" }] : /* istanbul ignore next */ []));
+    hasDescription = computed(() => (this.current()?.description ?? '') !== '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasDescription" }] : /* istanbul ignore next */ []));
+    showPrev = computed(() => this.current()?.actions?.prev ?? !this.first(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showPrev" }] : /* istanbul ignore next */ []));
+    showSkip = computed(() => this.current()?.actions?.skip ?? (!this.last() && this.total() > 1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showSkip" }] : /* istanbul ignore next */ []));
+    showClose = computed(() => this.current()?.actions?.close ?? true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClose" }] : /* istanbul ignore next */ []));
+    showNext = computed(() => this.current()?.actions?.next ?? this.current()?.advanceOn === undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showNext" }] : /* istanbul ignore next */ []));
+    namedTemplate = (slot) => this.stepTemplates().find((entry) => entry.id() === this.current()?.id && entry.slot() === slot)
+        ?.template ?? null;
+    bodyTemplate = computed(() => {
+        const content = this.current()?.content;
+        return typeof content === 'object' && content !== null ? content : this.namedTemplate('body');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bodyTemplate" }] : /* istanbul ignore next */ []));
+    mediaTemplate = computed(() => {
+        const media = this.current()?.media;
+        return typeof media === 'object' && media !== null ? media : this.namedTemplate('media');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mediaTemplate" }] : /* istanbul ignore next */ []));
+    controller = createTourController({
+        steps: () => this.steps(),
+        settings: () => ({
+            missing: this.missing() ?? this.defaults.missing,
+            targetTimeout: this.targetTimeout() ?? this.defaults.targetTimeout,
+        }),
+        onShow: (resolved) => this.shown.set(resolved),
+        onPending: (value) => {
+            if (value) {
+                const card = this.document.activeElement?.closest('[data-ui="tour"] [data-part="content"]');
+                this.leftFromCard = card !== null && card !== undefined;
+            }
+            this.pending.set(value);
+        },
+        requestStep: (id, reason, source) => this.requestStep(id, reason, source),
+        requestClose: (outcome, reason, source) => this.requestOpen(false, reason, outcome, source),
+    });
+    /* ── Frame, presence and layer ──────────────────────────────────────── */
+    status = signal('unmounted', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    presence = createPresence({
+        present: false,
+        onStatusChange: (next) => this.status.set(next),
+    });
+    visible = computed(() => this.open() && this.drawn() !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    /**
+     * `data-open` is written a frame after the frame exists, so the scrim and
+     * the card have a closed style to arrive from.
+     */
+    arrived = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "arrived" }] : /* istanbul ignore next */ []));
+    mounted = computed(() => this.drawn() !== null && (this.visible() || this.status() !== 'unmounted'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mounted" }] : /* istanbul ignore next */ []));
+    rootNode = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rootNode" }] : /* istanbul ignore next */ []));
+    frameRef = null;
+    portal = null;
+    closing = undefined;
+    opener = null;
+    focusedStep = null;
+    /** Whether focus was in the card when the reader asked to move; a dialog a step opens may take it meanwhile. */
+    leftFromCard = false;
+    layerHandle = null;
+    layer = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layer" }] : /* istanbul ignore next */ []));
+    /** The target of an interactive step, which a press on is not a press outside. */
+    interactiveTarget = computed(() => this.current()?.interactive === true ? (this.drawn()?.target ?? null) : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "interactiveTarget" }] : /* istanbul ignore next */ []));
+    reposition_ = () => { };
+    constructor() {
+        const destroyRef = inject(DestroyRef);
+        effect(() => {
+            const open = this.open();
+            const id = this.step();
+            untracked(() => {
+                if (open) {
+                    if (this.opener === null) {
+                        const active = this.document.activeElement;
+                        this.opener =
+                            active instanceof HTMLElement && active !== this.document.body ? active : null;
+                    }
+                    this.controller.sync(id);
+                    return;
+                }
+                this.controller.reset();
+                this.shown.set(null);
+                this.pending.set(false);
+                this.restoreFocus();
+                const outcome = this.closing;
+                this.closing = undefined;
+                if (outcome !== undefined && outcome !== 'close')
+                    this.step.set(null);
+            });
+        });
+        /* The steps changed under an open tour: the shown one may have gone. */
+        effect(() => {
+            const steps = this.steps();
+            const shown = untracked(() => this.shown());
+            if (shown !== null && !steps.some((candidate) => candidate.id === shown.step.id)) {
+                untracked(() => this.controller.sync(null));
+            }
+        });
+        effect(() => this.presence.sync(this.visible()));
+        effect((onCleanup) => {
+            const root = this.rootNode();
+            if (root === null || !this.visible()) {
+                untracked(() => this.arrived.set(false));
+                return;
+            }
+            const frame = requestAnimationFrame(() => this.arrived.set(true));
+            onCleanup(() => cancelAnimationFrame(frame));
+        });
+        effect(() => (this.mounted() ? this.build() : this.teardown()));
+        /**
+         * Every step the controller shows is staged: the old card leaves while the
+         * cutout moves and the page scrolls, and the new card arrives once the
+         * cutout has landed (`@slotted/core/tour`'s `stageStep`). `drawn` is the
+         * step whose card is on screen, and it trails `shown` by that sequence.
+         */
+        effect(() => {
+            const shown = this.shown();
+            untracked(() => {
+                this.staging?.abort();
+                this.staging = null;
+                if (shown === null)
+                    return;
+                const run = new AbortController();
+                this.staging = run;
+                const opening = this.drawn() === null;
+                void stageStep({
+                    /* Before the tour has an element of its own, the target — or the
+                       tour's own host — stands in the theme's region and carries the
+                       same duration tokens. */
+                    root: this.rootNode() ?? shown.target ?? this.viewContainer.element.nativeElement,
+                    from: opening ? undefined : this.spot().target,
+                    to: shown.target,
+                    scroll: this.scrollIntoView() ?? this.defaults.scrollIntoView,
+                    signal: run.signal,
+                    spot: (target, move) => {
+                        /* Written on the element at once, before the rectangle it moves to
+                           is: a transition needs its property in place before the value
+                           changes, and the frame's bindings are drawn a tick later. */
+                        this.rootNode()?.setAttribute('data-spot', move);
+                        this.spot.set({ target, move });
+                    },
+                    card: (phase) => {
+                        if (phase === 'leave') {
+                            this.leaving.set(true);
+                            return;
+                        }
+                        this.ready.set(false);
+                        /* Whether the arriving card fits beside its target is its own
+                           target's answer, taken as it arrives. */
+                        const rect = shown.target?.getBoundingClientRect();
+                        const view = this.document.defaultView;
+                        this.fits.set(rect === undefined ||
+                            view === null ||
+                            cardFits({ x: rect.left, y: rect.top, width: rect.width, height: rect.height }, { width: view.innerWidth, height: view.innerHeight }));
+                        this.drawn.set(shown);
+                        this.leaving.set(false);
+                    },
+                });
+            });
+        });
+        effect((onCleanup) => {
+            const root = this.rootNode();
+            const target = this.spot().target;
+            if (root === null)
+                return;
+            if (target === null) {
+                writeTargetRect(root, null);
+                return;
+            }
+            onCleanup(watchTarget(target, {
+                onRect: (rect) => {
+                    writeTargetRect(root, rect);
+                    const view = this.document.defaultView;
+                    /* Only the card's own target answers whether the card fits beside it. */
+                    if (view !== null && target === untracked(() => this.drawn()?.target)) {
+                        this.fits.set(cardFits(rect, { width: view.innerWidth, height: view.innerHeight }));
+                    }
+                },
+                onRemoved: () => this.controller.markMissing(),
+            }));
+        });
+        effect((onCleanup) => {
+            const view = this.document.defaultView;
+            if (!this.mounted() || view === null)
+                return;
+            const update = () => this.narrow.set(isCompactViewport(view));
+            update();
+            view.addEventListener('resize', update, { passive: true });
+            onCleanup(() => view.removeEventListener('resize', update));
+        });
+        effect((onCleanup) => this.place(onCleanup));
+        effect((onCleanup) => this.stack(onCleanup));
+        effect((onCleanup) => {
+            const layer = this.layer();
+            const branch = this.interactiveTarget();
+            if (layer === null || branch === null)
+                return;
+            onCleanup(layer.addBranch(branch));
+        });
+        effect((onCleanup) => {
+            const root = this.rootNode();
+            if (root === null || !this.visible() || !this.modal())
+                return;
+            const scope = createFocusScope(root, { contain: true, initial: false, restore: false });
+            onCleanup(() => scope.destroy());
+        });
+        effect(() => {
+            const drawn = this.drawn();
+            const root = this.rootNode();
+            /* A frame still hidden until the frame it arrives in cannot take focus. */
+            if (!this.visible() || !this.arrived() || drawn === null || root === null)
+                return;
+            afterNextRender(() => this.focusStep(drawn, root), { injector: this.injector });
+        });
+        /**
+         * A step whose target lives in a layer opened after the tour — a dialog its
+         * `prepare` opened — would stand under that layer, inert and unreachable.
+         * The tour is raised back over it, in the document and in the stack.
+         */
+        effect((onCleanup) => {
+            const root = this.rootNode();
+            const target = this.spot().target;
+            /* The portal's own element, which stands beside the other layers; the
+               root's parent is the frame component's host. */
+            const layerNode = root === null ? null : (this.portal?.container ?? null);
+            if (!this.visible() || target === null || layerNode === null)
+                return;
+            onCleanup(keepOverTarget(layerNode, target, () => {
+                this.portal?.raise();
+                this.layerHandle?.raise();
+            }));
+        });
+        effect((onCleanup) => {
+            const target = this.drawn()?.target ?? null;
+            const event = this.current()?.advanceOn;
+            if (!this.visible() || target === null || event === undefined)
+                return;
+            const listener = (source) => this.controller.next(eventReason(source), source);
+            target.addEventListener(event, listener);
+            onCleanup(() => target.removeEventListener(event, listener));
+        });
+        destroyRef.onDestroy(() => {
+            this.controller.destroy();
+            this.presence.destroy();
+            this.teardown();
+        });
+    }
+    /* ── The two values ─────────────────────────────────────────────────── */
+    requestOpen(next, reason, outcome, source) {
+        if (next === this.open())
+            return;
+        let cancelled = false;
+        const state = createControllable({
+            initial: this.open(),
+            onRequest: (raw) => {
+                this.openChangeRequest.emit({
+                    get cancelled() {
+                        return raw.cancelled;
+                    },
+                    cancel: () => raw.cancel(),
+                    outcome,
+                    previous: raw.previous,
+                    reason,
+                    source: raw.source,
+                    value: raw.value,
+                });
+                cancelled = raw.cancelled;
+            },
+        });
+        const moved = state.request(next, reason, source);
+        if (cancelled || !moved)
+            return;
+        if (!next)
+            this.closing = outcome;
+        this.open.set(next);
+    }
+    requestStep(id, reason, source) {
+        if (id === this.step()) {
+            this.controller.sync(id);
+            return;
+        }
+        let cancelled = false;
+        const state = createControllable({
+            initial: this.step(),
+            onRequest: (raw) => {
+                this.stepChangeRequest.emit({
+                    get cancelled() {
+                        return raw.cancelled;
+                    },
+                    cancel: () => raw.cancel(),
+                    previous: raw.previous,
+                    reason,
+                    source: raw.source,
+                    value: raw.value,
+                });
+                cancelled = raw.cancelled;
+            },
+        });
+        const moved = state.request(id, reason, source);
+        if (!cancelled && moved)
+            this.step.set(id);
+    }
+    /* ── The handle a template reaches through exportAs ─────────────────── */
+    /** Opens the tour at a step, or at the first available one. */
+    start(id) {
+        if (id !== undefined)
+            this.requestStep(id, 'programmatic', undefined);
+        this.requestOpen(true, 'programmatic', undefined, undefined);
+    }
+    next(source) {
+        this.controller.next(eventReason(source), source);
+    }
+    prev(source) {
+        this.controller.prev(eventReason(source), source);
+    }
+    goTo(id) {
+        this.controller.goTo(id, 'programmatic');
+    }
+    close(outcome = 'close', source, dismiss = false) {
+        this.requestOpen(false, dismiss ? 'dismiss' : eventReason(source), outcome, source);
+    }
+    /** Measures the target and the card again, after the page moved without scrolling. */
+    reposition() {
+        this.reposition_();
+    }
+    onKeyDown(event) {
+        if (!(this.keyboardNavigation() ?? this.defaults.keyboardNavigation))
+            return;
+        if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
+            return;
+        const origin = event.target instanceof Element ? event.target : null;
+        if (isTextEntry(origin))
+            return;
+        const action = tourKey(event.key, origin === null ? 'ltr' : directionOf(origin));
+        if (action === null)
+            return;
+        event.preventDefault();
+        if (action === 'next')
+            this.controller.next('keyboard', event);
+        else
+            this.controller.prev('keyboard', event);
+    }
+    onGuardFocus() {
+        const target = this.drawn()?.target;
+        let destination = null;
+        if (target instanceof HTMLElement) {
+            destination = tabbables(target)[0] ?? (target.tabIndex >= 0 ? target : null);
+        }
+        (destination ?? this.contentNode())?.focus();
+    }
+    /* ── The frame ──────────────────────────────────────────────────────── */
+    contentNode() {
+        return this.rootNode()?.querySelector('[data-part="content"]') ?? null;
+    }
+    build() {
+        if (untracked(() => this.rootNode()) !== null)
+            return;
+        const frame = untracked(() => this.outlet()).createComponent(SlTourFrame);
+        frame.changeDetectorRef.detectChanges();
+        const element = frame.location.nativeElement;
+        const root = element.querySelector('[data-ui="tour"]');
+        if (root === null)
+            return;
+        /**
+         * The layer inherits its theme, scheme, density and direction from its
+         * origin. The tour's own element stands where the consumer wrote it, in
+         * the region whose theme the layer belongs to, which a centred first step
+         * with no target could not otherwise say.
+         */
+        const host = this.viewContainer.element.nativeElement;
+        const portal = createPortalRoot({ origin: untracked(() => this.drawn()?.target ?? host) });
+        (portal.container ?? this.document.body).appendChild(element);
+        this.frameRef = frame;
+        this.portal = portal;
+        this.presence.setNode(root);
+        this.rootNode.set(root);
+    }
+    teardown() {
+        const root = untracked(() => this.rootNode());
+        if (root === null && this.frameRef === null)
+            return;
+        this.presence.setNode(null);
+        this.frameRef?.location.nativeElement.remove();
+        this.rootNode.set(null);
+        this.frameRef?.destroy();
+        this.frameRef = null;
+        this.portal?.release();
+        this.portal = null;
+        untracked(() => {
+            this.drawn.set(null);
+            this.spot.set({ target: null, move: 'rest' });
+            this.leaving.set(false);
+            this.ready.set(false);
+        });
+    }
+    place(onCleanup) {
+        const root = this.rootNode();
+        const target = this.anchored() ? (this.drawn()?.target ?? null) : null;
+        const stepId = this.current()?.id;
+        const options = {
+            align: this.resolvedAlign(),
+            alignOffset: this.alignOffset() ?? this.defaults.alignOffset,
+            boundaryPadding: this.collisionPadding() ?? this.defaults.collisionPadding,
+            side: this.resolvedSide(),
+            sideOffset: this.sideOffset() ?? this.defaults.sideOffset,
+            strategy: 'absolute',
+        };
+        const arrowPadding = this.arrowPadding() ?? this.defaults.arrowPadding;
+        const withArrow = this.resolvedArrow();
+        if (root === null || stepId === undefined)
+            return;
+        let destroy = () => { };
+        let live = true;
+        afterNextRender(() => {
+            if (!live)
+                return;
+            const surface = root.querySelector('[data-part="surface"]');
+            if (surface === null)
+                return;
+            if (target === null) {
+                surface.style.removeProperty('left');
+                surface.style.removeProperty('top');
+                surface.removeAttribute('data-side');
+                surface.removeAttribute('data-positioned');
+                /* A centred card is placed by the stylesheet; it is ready on the
+                   next frame, so its arrival starts from nothing. */
+                requestAnimationFrame(() => live && this.ready.set(true));
+                return;
+            }
+            const arrow = withArrow ? root.querySelector('[data-part="arrow"]') : null;
+            const handle = createPositioner(target, surface, {
+                ...options,
+                ...(arrow ? { arrow, arrowPadding } : {}),
+            });
+            this.reposition_ = () => void handle.update();
+            void handle.update().then(() => {
+                if (live)
+                    requestAnimationFrame(() => live && this.ready.set(true));
+            });
+            destroy = () => {
+                handle.destroy();
+                surface.removeAttribute('data-positioned');
+                this.reposition_ = () => { };
+            };
+        }, { injector: this.injector });
+        onCleanup(() => {
+            live = false;
+            destroy();
+        });
+    }
+    /**
+     * One layer in the single stack. A modal step makes everything outside it
+     * `inert` and holds a history entry for the way back; the target of an
+     * interactive step is a branch, so pressing it is not a press outside.
+     */
+    /**
+     * The layer is made again only when something that defines it changes —
+     * whether it is modal, and the two dismissals. A modal layer holds a history
+     * entry for the way back, and one made again on every step gave its entry
+     * back and took a new one on every Next: the browser's own `popstate` for
+     * the entry given back arrived as the way back, and the tour closed itself.
+     * The target of an interactive step joins the layer as a branch instead.
+     */
+    stack(onCleanup) {
+        const root = this.rootNode();
+        const visible = this.visible();
+        const modal = this.modal();
+        const escape = this.closeOnEscape() ?? this.defaults.closeOnEscape;
+        const outside = this.closeOnOutsidePress() ?? this.defaults.closeOnOutsidePress;
+        if (root === null || !visible)
+            return;
+        const surface = root.querySelector('[data-part="surface"]') ?? root;
+        const layer = createDismissableLayer(root, {
+            back: modal,
+            content: surface,
+            escape,
+            modal,
+            outsidePress: outside,
+            scrollLock: false,
+            onDismiss: (request) => this.requestOpen(false, DISMISS_REASONS[request.reason], 'close', request.source),
+        });
+        this.layerHandle = layer;
+        this.layer.set(layer);
+        onCleanup(() => {
+            this.layerHandle = null;
+            this.layer.set(null);
+            layer.destroy();
+        });
+    }
+    /**
+     * Focus follows the reader rather than the tour: the card takes it when the
+     * tour opens, and on a step change only when it was already in the card. A
+     * reader elsewhere keeps their place and hears the new step instead.
+     */
+    focusStep(shown, root) {
+        const id = shown.step.id;
+        if (this.focusedStep === id)
+            return;
+        const first = this.focusedStep === null;
+        this.focusedStep = id;
+        const content = root.querySelector('[data-part="content"]');
+        const active = this.document.activeElement;
+        const inCard = active === null || active === this.document.body || root.contains(active);
+        /* The mark is the navigation's that led here; the opening has none, and
+           a first card focused late must not take the mark of the next move. */
+        const fromCard = !first && this.leftFromCard;
+        if (!first)
+            this.leftFromCard = false;
+        if (first ? (this.autoFocus() ?? this.defaults.autoFocus) : inCard || fromCard) {
+            content?.focus({ preventScroll: true });
+            return;
+        }
+        if (!first) {
+            const text = shown.step.announcement ?? shown.step.title;
+            if (text !== '')
+                getLiveAnnouncer(this.document).announce(text);
+        }
+    }
+    restoreFocus() {
+        const wasOpen = this.focusedStep !== null;
+        this.focusedStep = null;
+        const origin = this.opener;
+        this.opener = null;
+        if (!wasOpen)
+            return;
+        const root = this.rootNode();
+        const active = this.document.activeElement;
+        const inside = active === null || active === this.document.body || (root?.contains(active) ?? false);
+        if (!inside)
+            return;
+        const named = this.finalFocus();
+        const destination = named === undefined
+            ? origin
+            : typeof named === 'string'
+                ? this.document.querySelector(named)
+                : named;
+        if (destination?.isConnected)
+            destination.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTour, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.7", type: SlTour, isStandalone: true, selector: "sl-tour", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, missing: { classPropertyName: "missing", publicName: "missing", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, finalFocus: { classPropertyName: "finalFocus", publicName: "finalFocus", isSignal: true, isRequired: false, transformFunction: null }, arrow: { classPropertyName: "arrow", publicName: "arrow", isSignal: true, isRequired: false, transformFunction: null }, modalInput: { classPropertyName: "modalInput", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, spotlight: { classPropertyName: "spotlight", publicName: "spotlight", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsidePress: { classPropertyName: "closeOnOutsidePress", publicName: "closeOnOutsidePress", isSignal: true, isRequired: false, transformFunction: null }, scrollIntoView: { classPropertyName: "scrollIntoView", publicName: "scrollIntoView", isSignal: true, isRequired: false, transformFunction: null }, keyboardNavigation: { classPropertyName: "keyboardNavigation", publicName: "keyboardNavigation", isSignal: true, isRequired: false, transformFunction: null }, targetTimeout: { classPropertyName: "targetTimeout", publicName: "targetTimeout", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, alignOffset: { classPropertyName: "alignOffset", publicName: "alignOffset", isSignal: true, isRequired: false, transformFunction: null }, collisionPadding: { classPropertyName: "collisionPadding", publicName: "collisionPadding", isSignal: true, isRequired: false, transformFunction: null }, arrowPadding: { classPropertyName: "arrowPadding", publicName: "arrowPadding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", step: "stepChange", openChangeRequest: "openChangeRequest", stepChangeRequest: "stepChangeRequest" }, providers: [{ provide: SL_TOUR, useExisting: forwardRef(() => SlTour) }], queries: [{ propertyName: "card", first: true, predicate: SlTourCard, descendants: true, isSignal: true }, { propertyName: "stepTemplates", predicate: SlTourStep, isSignal: true }], viewQueries: [{ propertyName: "outlet", first: true, predicate: ["outlet"], descendants: true, read: ViewContainerRef, isSignal: true }], exportAs: ["slTour"], ngImport: i0, template: `<ng-container #outlet></ng-container>`, isInline: true, styles: ["@layer slotted.components{[data-ui=tour]{--_scrim: var(--slotted-tour-scrim, var(--slotted-scrim, Canvas));--_spotlight-padding: var(--slotted-tour-spotlight-padding, var(--slotted-space-3, .375rem));--_spotlight-radius: var(--slotted-tour-spotlight-radius, var(--slotted-radius-md, 6px));--_gap: var( --slotted-tour-gap, calc(var(--_spotlight-padding) + var(--slotted-space-4, .5rem)) );--_surface: var(--slotted-tour-surface, var(--slotted-surface-raised, #ffffff));--_text: var(--slotted-tour-text, var(--slotted-text, #0f172a));--_border-color: var(--slotted-tour-border-color, var(--slotted-border-subtle, #e2e8f0));--_border-width: var(--slotted-border-width-thin, 1px);--_radius: var(--slotted-tour-radius, var(--slotted-radius-lg, 8px));--_shadow: var(--slotted-tour-shadow, var(--slotted-shadow-lg));--_arrow-size: var(--slotted-tour-arrow-size, .625rem);--_arrow-tip-radius: var(--slotted-tour-arrow-tip-radius, var(--slotted-radius-xs, 2px));--_inset-block: var(--slotted-tour-padding-block, var(--slotted-space-6, 1rem));--_inset-inline: var(--slotted-tour-padding-inline, var(--slotted-space-6, 1rem));--_row-gap: var(--slotted-control-gap-md, .5rem);--_title-font-size: var(--slotted-font-size-lg, 1rem);--_font-size: var(--slotted-font-size-md, .875rem);--_measure: var(--slotted-tour-measure, 20rem);position:fixed;inset:0;z-index:calc(var(--slotted-z-index-overlay, 1000) + var(--slotted-layer-depth, 0));isolation:isolate;overflow:clip;pointer-events:none;visibility:hidden;transition:visibility var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=tour][data-open]{visibility:visible;transition:none}[data-ui=tour][data-size=sm]{--_inset-block: var(--slotted-tour-padding-block-sm, var(--slotted-space-5, .75rem));--_inset-inline: var(--slotted-tour-padding-inline-sm, var(--slotted-space-5, .75rem));--_title-font-size: var(--slotted-font-size-md, .875rem);--_font-size: var(--slotted-font-size-sm, .8125rem);--_measure: var(--slotted-tour-measure-sm, 16rem)}[data-ui=tour][data-size=lg]{--_inset-block: var(--slotted-tour-padding-block-lg, var(--slotted-space-7, 1.25rem));--_inset-inline: var(--slotted-tour-padding-inline-lg, var(--slotted-space-7, 1.25rem));--_title-font-size: var(--slotted-font-size-xl, 1.125rem);--_measure: var(--slotted-tour-measure-lg, 24rem)}[data-ui=tour]>[data-part=backdrop]{position:absolute;inset:0;overflow:clip;background:var(--_scrim);opacity:0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=tour][data-open]>[data-part=backdrop]{opacity:1;transition:opacity var(--slotted-duration-long) var(--slotted-easing-standard)}[data-ui=tour][data-spotlight]>[data-part=backdrop]{background:transparent}[data-ui=tour][data-modal]>[data-part=backdrop]{pointer-events:auto}[data-ui=tour]>[data-part=backdrop]>[data-part=spotlight]{position:absolute;left:calc(var(--slotted-tour-target-x, 0px) - var(--_spotlight-padding));top:calc(var(--slotted-tour-target-y, 0px) - var(--_spotlight-padding));width:calc(var(--slotted-tour-target-width, 0px) + 2 * var(--_spotlight-padding));height:calc(var(--slotted-tour-target-height, 0px) + 2 * var(--_spotlight-padding));border-radius:var(--_spotlight-radius);box-shadow:0 0 0 200vmax var(--_scrim);background-color:transparent}[data-ui=tour][data-spot=travel]>[data-part=backdrop]>[data-part=spotlight]{transition-property:left,top,width,height;transition-duration:var(--slotted-duration-long);transition-timing-function:var(--slotted-easing-standard)}[data-ui=tour][data-spot=light]>[data-part=backdrop]>[data-part=spotlight]{animation:slotted-tour-light var(--slotted-duration-long) var(--slotted-easing-standard)}[data-ui=tour][data-spot=close]>[data-part=backdrop]>[data-part=spotlight]{background-color:var(--_scrim);transition:background-color var(--slotted-duration-long) var(--slotted-easing-standard)}@keyframes slotted-tour-light{0%{background-color:var(--_scrim)}}[data-ui=tour]>[data-part=surface]{position:absolute;inset-block-start:0;box-sizing:border-box;padding:var(--_gap);inline-size:max-content;max-inline-size:min(var(--_measure),var(--slotted-positioner-available-width, 100vw));pointer-events:none;opacity:0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=tour][data-open]>[data-part=surface][data-ready]:not([data-leaving]){opacity:1;transition:opacity var(--slotted-duration-long) var(--slotted-easing-standard)}[data-ui=tour]>[data-part=surface][data-detached]{visibility:hidden}[data-ui=tour]>[data-part=surface][data-placement=centered]{inset:0;margin:auto;block-size:max-content;max-inline-size:min(var(--_measure),100%);max-block-size:100%}@supports (inset: env(safe-area-inset-top)){[data-ui=tour]>[data-part=surface][data-placement=centered]{inset:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0)}}[data-ui=tour][data-compact]>[data-part=surface][data-placement=anchored]{--_compact-measure: var(--slotted-tour-measure-compact, 32rem);inline-size:min(var(--slotted-positioner-available-width, 100vw),var(--_compact-measure));max-inline-size:min(var(--slotted-positioner-available-width, 100vw),var(--_compact-measure))}[data-ui=tour]>[data-part=surface][data-placement=centered]>[data-part=arrow]{display:none}[data-ui=tour]>[data-part=surface]>[data-part=focus-guard]{position:absolute;inline-size:1px;block-size:1px;padding:0;overflow:hidden;opacity:0;outline:none;pointer-events:none}[data-ui=tour]>[data-part=surface]>[data-part=content]{box-sizing:border-box;display:flex;flex-direction:column;max-inline-size:100%;max-block-size:calc(var(--slotted-positioner-available-height, 100vh) - 2 * var(--_gap));border:var(--_border-width) solid var(--_border-color);border-radius:var(--_radius);background:var(--_surface);color:var(--_text);box-shadow:var(--_shadow);overflow:clip;font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);font-size:var(--_font-size);line-height:var(--slotted-line-height-md, 1.5);text-align:start;pointer-events:auto;outline:none}[data-ui=tour]>[data-part=surface][data-placement=centered]>[data-part=content]{max-block-size:calc(100vh - 2 * var(--_gap))}[data-ui=tour]>[data-part=surface]>[data-part=content]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, currentColor);outline-offset:calc(-1 * var(--slotted-focus-ring-width, 2px))}[data-ui=tour] [data-part=content]>[data-part=media]{display:block;flex:none;inline-size:100%;max-inline-size:100%;block-size:auto;object-fit:cover;border-block-end:var(--_border-width) solid var(--_border-color)}[data-ui=tour] [data-part=content]>[data-part=media]>:is(img,video,svg){display:block;inline-size:100%;block-size:auto}[data-ui=tour] [data-part=content]>[data-part=header]{display:flex;flex:none;align-items:flex-start;gap:var(--_row-gap);min-block-size:var(--slotted-control-height-sm, 30px);padding-block-start:calc(var(--_inset-block) - var(--slotted-space-3, .375rem));padding-inline:var(--_inset-inline) calc(var(--_inset-inline) - var(--slotted-space-3, .375rem))}[data-ui=tour] [data-part=content]>[data-part=header]>[data-part=progress]{flex:1 1 auto;min-inline-size:0;margin:0;font-size:var(--slotted-font-size-xs, .75rem);font-weight:var(--slotted-font-weight-medium, 500);line-height:var(--slotted-line-height-xs, 1.4);color:var(--slotted-text-muted, #5b6b7f);font-variant-numeric:tabular-nums;padding-block:calc((var(--slotted-control-height-sm, 30px) - 1lh) / 2);unicode-bidi:plaintext}[data-ui=tour] [data-part=content]>[data-part=header]>[data-part=close]{flex:none;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;inline-size:var(--slotted-control-height-sm, 30px);block-size:var(--slotted-control-height-sm, 30px);margin-inline-start:auto;padding:0;border:0;border-radius:var(--slotted-control-radius, var(--slotted-radius-sm, 4px));background:transparent;color:var(--slotted-text-muted, #5b6b7f);cursor:pointer;transition:background-color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard)),color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui=tour] [data-part=content]>[data-part=header]>[data-part=close]:enabled:hover{background:var(--slotted-tone-secondary-subtle-hover, rgb(15 23 42 / .06));color:var(--_text)}[data-ui=tour] [data-part=content]>[data-part=header]>[data-part=close]:enabled:active{background:var(--slotted-tone-secondary-subtle-active, rgb(15 23 42 / .1))}[data-ui=tour] [data-part=content]>[data-part=header]>[data-part=close]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, currentColor);outline-offset:calc(-1 * var(--slotted-focus-ring-width, 2px))}[data-ui=tour] [data-part=content]>[data-part=title]{flex:none;margin:0;padding-inline:var(--_inset-inline);padding-block-start:var(--slotted-space-2, .25rem);font-family:var( --slotted-font-family-heading, var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif) );font-size:var(--_title-font-size);font-weight:var(--slotted-font-weight-semibold, 600);line-height:var(--slotted-line-height-lg, 1.5);color:var(--_text);overflow-wrap:anywhere;unicode-bidi:plaintext}[data-ui=tour] [data-part=content]>[data-part=title]:first-child,[data-ui=tour] [data-part=content]>[data-part=media]+[data-part=title]{padding-block-start:var(--_inset-block)}[data-ui=tour] [data-part=content]>[data-part=description]{flex:none;margin:0;padding-inline:var(--_inset-inline);padding-block-start:var(--slotted-space-2, .25rem);color:var(--slotted-text-muted, #5b6b7f);overflow-wrap:anywhere;unicode-bidi:plaintext}[data-ui=tour] [data-part=content]>[data-part=body]{flex:1 1 auto;min-block-size:0;overflow-x:hidden;overflow-y:auto;overflow-inline:hidden;overflow-block:auto;overscroll-behavior:contain;overflow-wrap:anywhere;unicode-bidi:plaintext;margin-block-start:var(--_row-gap);padding-inline:var(--_inset-inline);background:linear-gradient(var(--_surface) 30%,transparent) center top / 100% var(--slotted-space-4, .5rem) no-repeat local,linear-gradient(transparent,var(--_surface) 70%) center bottom / 100% var(--slotted-space-4, .5rem) no-repeat local,radial-gradient(farthest-side at 50% 0,color-mix(in oklab,var(--_text) 12%,transparent),transparent) center top / 100% var(--slotted-space-3, .375rem) no-repeat scroll,radial-gradient(farthest-side at 50% 100%,color-mix(in oklab,var(--_text) 12%,transparent),transparent) center bottom / 100% var(--slotted-space-3, .375rem) no-repeat scroll}[data-ui=tour] [data-part=content]>[data-part=footer]{display:flex;flex:none;flex-direction:row-reverse;flex-wrap:wrap-reverse;align-items:center;justify-content:flex-start;gap:var(--_row-gap);padding-block:var(--_inset-block);padding-inline:var(--_inset-inline)}[data-ui=tour] [data-part=content]>[data-part=footer]>[data-part=next]{order:1}[data-ui=tour] [data-part=content]>[data-part=footer]>[data-part=prev]{order:2}[data-ui=tour] [data-part=content]>[data-part=footer]>[data-part=skip]{order:3;margin-inline-end:auto;margin-inline-start:calc(-1 * var(--slotted-control-padding-inline-sm, 10px))}[data-ui=tour]>[data-part=surface]>[data-part=arrow]{--_arrow-min: calc(var(--_gap) + var(--_radius));--_arrow-max-x: calc(100% - var(--_gap) - var(--_radius) - var(--_arrow-size));--_arrow-x: clamp( var(--_arrow-min), var(--slotted-positioner-arrow-x, 0px), var(--_arrow-max-x) );--_arrow-y: clamp( var(--_arrow-min), var(--slotted-positioner-arrow-y, 0px), calc(100% - var(--_gap) - var(--_radius) - var(--_arrow-size)) );position:absolute;z-index:1;inline-size:var(--_arrow-size);block-size:var(--_arrow-size);rotate:45deg;background:var(--_surface);border:0 solid var(--_border-color)}[data-ui=tour]>[data-part=surface][data-side=top]>[data-part=arrow]{left:var(--_arrow-x);top:auto;bottom:calc(var(--_gap) - var(--_arrow-size) / 2);border-right-width:var(--_border-width);border-bottom-width:var(--_border-width);border-bottom-right-radius:var(--_arrow-tip-radius)}[data-ui=tour]>[data-part=surface][data-side=bottom]>[data-part=arrow]{left:var(--_arrow-x);top:calc(var(--_gap) - var(--_arrow-size) / 2);bottom:auto;border-top-width:var(--_border-width);border-left-width:var(--_border-width);border-top-left-radius:var(--_arrow-tip-radius)}[data-ui=tour]>[data-part=surface][data-side=left]>[data-part=arrow]{top:var(--_arrow-y);left:auto;right:calc(var(--_gap) - var(--_arrow-size) / 2);border-top-width:var(--_border-width);border-right-width:var(--_border-width);border-top-right-radius:var(--_arrow-tip-radius)}[data-ui=tour]>[data-part=surface][data-side=right]>[data-part=arrow]{top:var(--_arrow-y);left:calc(var(--_gap) - var(--_arrow-size) / 2);right:auto;border-bottom-width:var(--_border-width);border-left-width:var(--_border-width);border-bottom-left-radius:var(--_arrow-tip-radius)}[data-ui=tour]>[data-part=surface]:has(>[data-part=content]:focus-visible)>[data-part=arrow]{--_border-width: var(--slotted-focus-ring-width, 2px);border-color:var(--slotted-focus-ring-color, currentColor)}[data-ui=tour] [data-part=content] [data-part][hidden]{display:none}@media(forced-colors:active){[data-ui=tour]>[data-part=backdrop]>[data-part=spotlight]{outline:var(--slotted-focus-ring-width, 2px) solid Highlight}[data-ui=tour][data-spotlight]>[data-part=backdrop]{background:transparent}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTour, decorators: [{
+            type: Component,
+            args: [{ selector: 'sl-tour', standalone: true, exportAs: 'slTour', imports: [SlTourFrame], providers: [{ provide: SL_TOUR, useExisting: forwardRef(() => SlTour) }], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `<ng-container #outlet></ng-container>`, styles: ["@layer slotted.components{[data-ui=tour]{--_scrim: var(--slotted-tour-scrim, var(--slotted-scrim, Canvas));--_spotlight-padding: var(--slotted-tour-spotlight-padding, var(--slotted-space-3, .375rem));--_spotlight-radius: var(--slotted-tour-spotlight-radius, var(--slotted-radius-md, 6px));--_gap: var( --slotted-tour-gap, calc(var(--_spotlight-padding) + var(--slotted-space-4, .5rem)) );--_surface: var(--slotted-tour-surface, var(--slotted-surface-raised, #ffffff));--_text: var(--slotted-tour-text, var(--slotted-text, #0f172a));--_border-color: var(--slotted-tour-border-color, var(--slotted-border-subtle, #e2e8f0));--_border-width: var(--slotted-border-width-thin, 1px);--_radius: var(--slotted-tour-radius, var(--slotted-radius-lg, 8px));--_shadow: var(--slotted-tour-shadow, var(--slotted-shadow-lg));--_arrow-size: var(--slotted-tour-arrow-size, .625rem);--_arrow-tip-radius: var(--slotted-tour-arrow-tip-radius, var(--slotted-radius-xs, 2px));--_inset-block: var(--slotted-tour-padding-block, var(--slotted-space-6, 1rem));--_inset-inline: var(--slotted-tour-padding-inline, var(--slotted-space-6, 1rem));--_row-gap: var(--slotted-control-gap-md, .5rem);--_title-font-size: var(--slotted-font-size-lg, 1rem);--_font-size: var(--slotted-font-size-md, .875rem);--_measure: var(--slotted-tour-measure, 20rem);position:fixed;inset:0;z-index:calc(var(--slotted-z-index-overlay, 1000) + var(--slotted-layer-depth, 0));isolation:isolate;overflow:clip;pointer-events:none;visibility:hidden;transition:visibility var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=tour][data-open]{visibility:visible;transition:none}[data-ui=tour][data-size=sm]{--_inset-block: var(--slotted-tour-padding-block-sm, var(--slotted-space-5, .75rem));--_inset-inline: var(--slotted-tour-padding-inline-sm, var(--slotted-space-5, .75rem));--_title-font-size: var(--slotted-font-size-md, .875rem);--_font-size: var(--slotted-font-size-sm, .8125rem);--_measure: var(--slotted-tour-measure-sm, 16rem)}[data-ui=tour][data-size=lg]{--_inset-block: var(--slotted-tour-padding-block-lg, var(--slotted-space-7, 1.25rem));--_inset-inline: var(--slotted-tour-padding-inline-lg, var(--slotted-space-7, 1.25rem));--_title-font-size: var(--slotted-font-size-xl, 1.125rem);--_measure: var(--slotted-tour-measure-lg, 24rem)}[data-ui=tour]>[data-part=backdrop]{position:absolute;inset:0;overflow:clip;background:var(--_scrim);opacity:0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=tour][data-open]>[data-part=backdrop]{opacity:1;transition:opacity var(--slotted-duration-long) var(--slotted-easing-standard)}[data-ui=tour][data-spotlight]>[data-part=backdrop]{background:transparent}[data-ui=tour][data-modal]>[data-part=backdrop]{pointer-events:auto}[data-ui=tour]>[data-part=backdrop]>[data-part=spotlight]{position:absolute;left:calc(var(--slotted-tour-target-x, 0px) - var(--_spotlight-padding));top:calc(var(--slotted-tour-target-y, 0px) - var(--_spotlight-padding));width:calc(var(--slotted-tour-target-width, 0px) + 2 * var(--_spotlight-padding));height:calc(var(--slotted-tour-target-height, 0px) + 2 * var(--_spotlight-padding));border-radius:var(--_spotlight-radius);box-shadow:0 0 0 200vmax var(--_scrim);background-color:transparent}[data-ui=tour][data-spot=travel]>[data-part=backdrop]>[data-part=spotlight]{transition-property:left,top,width,height;transition-duration:var(--slotted-duration-long);transition-timing-function:var(--slotted-easing-standard)}[data-ui=tour][data-spot=light]>[data-part=backdrop]>[data-part=spotlight]{animation:slotted-tour-light var(--slotted-duration-long) var(--slotted-easing-standard)}[data-ui=tour][data-spot=close]>[data-part=backdrop]>[data-part=spotlight]{background-color:var(--_scrim);transition:background-color var(--slotted-duration-long) var(--slotted-easing-standard)}@keyframes slotted-tour-light{0%{background-color:var(--_scrim)}}[data-ui=tour]>[data-part=surface]{position:absolute;inset-block-start:0;box-sizing:border-box;padding:var(--_gap);inline-size:max-content;max-inline-size:min(var(--_measure),var(--slotted-positioner-available-width, 100vw));pointer-events:none;opacity:0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=tour][data-open]>[data-part=surface][data-ready]:not([data-leaving]){opacity:1;transition:opacity var(--slotted-duration-long) var(--slotted-easing-standard)}[data-ui=tour]>[data-part=surface][data-detached]{visibility:hidden}[data-ui=tour]>[data-part=surface][data-placement=centered]{inset:0;margin:auto;block-size:max-content;max-inline-size:min(var(--_measure),100%);max-block-size:100%}@supports (inset: env(safe-area-inset-top)){[data-ui=tour]>[data-part=surface][data-placement=centered]{inset:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0)}}[data-ui=tour][data-compact]>[data-part=surface][data-placement=anchored]{--_compact-measure: var(--slotted-tour-measure-compact, 32rem);inline-size:min(var(--slotted-positioner-available-width, 100vw),var(--_compact-measure));max-inline-size:min(var(--slotted-positioner-available-width, 100vw),var(--_compact-measure))}[data-ui=tour]>[data-part=surface][data-placement=centered]>[data-part=arrow]{display:none}[data-ui=tour]>[data-part=surface]>[data-part=focus-guard]{position:absolute;inline-size:1px;block-size:1px;padding:0;overflow:hidden;opacity:0;outline:none;pointer-events:none}[data-ui=tour]>[data-part=surface]>[data-part=content]{box-sizing:border-box;display:flex;flex-direction:column;max-inline-size:100%;max-block-size:calc(var(--slotted-positioner-available-height, 100vh) - 2 * var(--_gap));border:var(--_border-width) solid var(--_border-color);border-radius:var(--_radius);background:var(--_surface);color:var(--_text);box-shadow:var(--_shadow);overflow:clip;font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);font-size:var(--_font-size);line-height:var(--slotted-line-height-md, 1.5);text-align:start;pointer-events:auto;outline:none}[data-ui=tour]>[data-part=surface][data-placement=centered]>[data-part=content]{max-block-size:calc(100vh - 2 * var(--_gap))}[data-ui=tour]>[data-part=surface]>[data-part=content]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, currentColor);outline-offset:calc(-1 * var(--slotted-focus-ring-width, 2px))}[data-ui=tour] [data-part=content]>[data-part=media]{display:block;flex:none;inline-size:100%;max-inline-size:100%;block-size:auto;object-fit:cover;border-block-end:var(--_border-width) solid var(--_border-color)}[data-ui=tour] [data-part=content]>[data-part=media]>:is(img,video,svg){display:block;inline-size:100%;block-size:auto}[data-ui=tour] [data-part=content]>[data-part=header]{display:flex;flex:none;align-items:flex-start;gap:var(--_row-gap);min-block-size:var(--slotted-control-height-sm, 30px);padding-block-start:calc(var(--_inset-block) - var(--slotted-space-3, .375rem));padding-inline:var(--_inset-inline) calc(var(--_inset-inline) - var(--slotted-space-3, .375rem))}[data-ui=tour] [data-part=content]>[data-part=header]>[data-part=progress]{flex:1 1 auto;min-inline-size:0;margin:0;font-size:var(--slotted-font-size-xs, .75rem);font-weight:var(--slotted-font-weight-medium, 500);line-height:var(--slotted-line-height-xs, 1.4);color:var(--slotted-text-muted, #5b6b7f);font-variant-numeric:tabular-nums;padding-block:calc((var(--slotted-control-height-sm, 30px) - 1lh) / 2);unicode-bidi:plaintext}[data-ui=tour] [data-part=content]>[data-part=header]>[data-part=close]{flex:none;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;inline-size:var(--slotted-control-height-sm, 30px);block-size:var(--slotted-control-height-sm, 30px);margin-inline-start:auto;padding:0;border:0;border-radius:var(--slotted-control-radius, var(--slotted-radius-sm, 4px));background:transparent;color:var(--slotted-text-muted, #5b6b7f);cursor:pointer;transition:background-color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard)),color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui=tour] [data-part=content]>[data-part=header]>[data-part=close]:enabled:hover{background:var(--slotted-tone-secondary-subtle-hover, rgb(15 23 42 / .06));color:var(--_text)}[data-ui=tour] [data-part=content]>[data-part=header]>[data-part=close]:enabled:active{background:var(--slotted-tone-secondary-subtle-active, rgb(15 23 42 / .1))}[data-ui=tour] [data-part=content]>[data-part=header]>[data-part=close]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, currentColor);outline-offset:calc(-1 * var(--slotted-focus-ring-width, 2px))}[data-ui=tour] [data-part=content]>[data-part=title]{flex:none;margin:0;padding-inline:var(--_inset-inline);padding-block-start:var(--slotted-space-2, .25rem);font-family:var( --slotted-font-family-heading, var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif) );font-size:var(--_title-font-size);font-weight:var(--slotted-font-weight-semibold, 600);line-height:var(--slotted-line-height-lg, 1.5);color:var(--_text);overflow-wrap:anywhere;unicode-bidi:plaintext}[data-ui=tour] [data-part=content]>[data-part=title]:first-child,[data-ui=tour] [data-part=content]>[data-part=media]+[data-part=title]{padding-block-start:var(--_inset-block)}[data-ui=tour] [data-part=content]>[data-part=description]{flex:none;margin:0;padding-inline:var(--_inset-inline);padding-block-start:var(--slotted-space-2, .25rem);color:var(--slotted-text-muted, #5b6b7f);overflow-wrap:anywhere;unicode-bidi:plaintext}[data-ui=tour] [data-part=content]>[data-part=body]{flex:1 1 auto;min-block-size:0;overflow-x:hidden;overflow-y:auto;overflow-inline:hidden;overflow-block:auto;overscroll-behavior:contain;overflow-wrap:anywhere;unicode-bidi:plaintext;margin-block-start:var(--_row-gap);padding-inline:var(--_inset-inline);background:linear-gradient(var(--_surface) 30%,transparent) center top / 100% var(--slotted-space-4, .5rem) no-repeat local,linear-gradient(transparent,var(--_surface) 70%) center bottom / 100% var(--slotted-space-4, .5rem) no-repeat local,radial-gradient(farthest-side at 50% 0,color-mix(in oklab,var(--_text) 12%,transparent),transparent) center top / 100% var(--slotted-space-3, .375rem) no-repeat scroll,radial-gradient(farthest-side at 50% 100%,color-mix(in oklab,var(--_text) 12%,transparent),transparent) center bottom / 100% var(--slotted-space-3, .375rem) no-repeat scroll}[data-ui=tour] [data-part=content]>[data-part=footer]{display:flex;flex:none;flex-direction:row-reverse;flex-wrap:wrap-reverse;align-items:center;justify-content:flex-start;gap:var(--_row-gap);padding-block:var(--_inset-block);padding-inline:var(--_inset-inline)}[data-ui=tour] [data-part=content]>[data-part=footer]>[data-part=next]{order:1}[data-ui=tour] [data-part=content]>[data-part=footer]>[data-part=prev]{order:2}[data-ui=tour] [data-part=content]>[data-part=footer]>[data-part=skip]{order:3;margin-inline-end:auto;margin-inline-start:calc(-1 * var(--slotted-control-padding-inline-sm, 10px))}[data-ui=tour]>[data-part=surface]>[data-part=arrow]{--_arrow-min: calc(var(--_gap) + var(--_radius));--_arrow-max-x: calc(100% - var(--_gap) - var(--_radius) - var(--_arrow-size));--_arrow-x: clamp( var(--_arrow-min), var(--slotted-positioner-arrow-x, 0px), var(--_arrow-max-x) );--_arrow-y: clamp( var(--_arrow-min), var(--slotted-positioner-arrow-y, 0px), calc(100% - var(--_gap) - var(--_radius) - var(--_arrow-size)) );position:absolute;z-index:1;inline-size:var(--_arrow-size);block-size:var(--_arrow-size);rotate:45deg;background:var(--_surface);border:0 solid var(--_border-color)}[data-ui=tour]>[data-part=surface][data-side=top]>[data-part=arrow]{left:var(--_arrow-x);top:auto;bottom:calc(var(--_gap) - var(--_arrow-size) / 2);border-right-width:var(--_border-width);border-bottom-width:var(--_border-width);border-bottom-right-radius:var(--_arrow-tip-radius)}[data-ui=tour]>[data-part=surface][data-side=bottom]>[data-part=arrow]{left:var(--_arrow-x);top:calc(var(--_gap) - var(--_arrow-size) / 2);bottom:auto;border-top-width:var(--_border-width);border-left-width:var(--_border-width);border-top-left-radius:var(--_arrow-tip-radius)}[data-ui=tour]>[data-part=surface][data-side=left]>[data-part=arrow]{top:var(--_arrow-y);left:auto;right:calc(var(--_gap) - var(--_arrow-size) / 2);border-top-width:var(--_border-width);border-right-width:var(--_border-width);border-top-right-radius:var(--_arrow-tip-radius)}[data-ui=tour]>[data-part=surface][data-side=right]>[data-part=arrow]{top:var(--_arrow-y);left:calc(var(--_gap) - var(--_arrow-size) / 2);right:auto;border-bottom-width:var(--_border-width);border-left-width:var(--_border-width);border-bottom-left-radius:var(--_arrow-tip-radius)}[data-ui=tour]>[data-part=surface]:has(>[data-part=content]:focus-visible)>[data-part=arrow]{--_border-width: var(--slotted-focus-ring-width, 2px);border-color:var(--slotted-focus-ring-color, currentColor)}[data-ui=tour] [data-part=content] [data-part][hidden]{display:none}@media(forced-colors:active){[data-ui=tour]>[data-part=backdrop]>[data-part=spotlight]{outline:var(--slotted-focus-ring-width, 2px) solid Highlight}[data-ui=tour][data-spotlight]>[data-part=backdrop]{background:transparent}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }, { type: i0.Output, args: ["stepChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], missing: [{ type: i0.Input, args: [{ isSignal: true, alias: "missing", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], finalFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "finalFocus", required: false }] }], arrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrow", required: false }] }], modalInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], spotlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "spotlight", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnOutsidePress: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsidePress", required: false }] }], scrollIntoView: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollIntoView", required: false }] }], keyboardNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardNavigation", required: false }] }], targetTimeout: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetTimeout", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], alignOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignOffset", required: false }] }], collisionPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "collisionPadding", required: false }] }], arrowPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowPadding", required: false }] }], openChangeRequest: [{ type: i0.Output, args: ["openChangeRequest"] }], stepChangeRequest: [{ type: i0.Output, args: ["stepChangeRequest"] }], card: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlTourCard), { isSignal: true }] }], stepTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SlTourStep), { isSignal: true }] }], outlet: [{ type: i0.ViewChild, args: ['outlet', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SL_TOUR, SlTour, SlTourBody, SlTourCard, SlTourClose, SlTourContent, SlTourDescription, SlTourFooter, SlTourHeader, SlTourIdFactory, SlTourMedia, SlTourNext, SlTourPrev, SlTourProgress, SlTourSkip, SlTourStep, SlTourTitle, TOUR_DEFAULTS, TOUR_FALLBACK, injectTourDefaults, provideTourDefaults };
+//# sourceMappingURL=slotted-angular-tour.mjs.map