@skdx/web-components 0.26.0

package/dist/tour/TourArrow.d.ts

@@ -0,0 +1,32 @@
+import { SkdxOverlayArrow } from '../internal/overlay-arrow.js';
+/**
+ * `<skdx-tour-arrow>` — optional pointer from `<skdx-tour-content>` back at the
+ * step's target, self-positioning on the edge facing it. Render it inside
+ * `<skdx-tour-content>`; it takes no positioning attributes of its own (see
+ * `data-side` on the content for where it landed).
+ *
+ * Hidden on a step that is centred — one with no target, or with
+ * `type: 'dialog'`. There is nothing for it to point at, and the popper layer
+ * writes it no offsets on that branch.
+ *
+ * @example
+ * ```html
+ * <skdx-tour-content>
+ *   <skdx-tour-title>Your inbox</skdx-tour-title>
+ *   <skdx-tour-arrow></skdx-tour-arrow>
+ * </skdx-tour-content>
+ * ```
+ */
+export declare class SkdxTourArrow extends SkdxOverlayArrow {
+    static styles: import("lit").CSSResultGroup[];
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private syncHostState;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tour-arrow': SkdxTourArrow;
+    }
+}

package/dist/tour/TourArrow.js

@@ -0,0 +1 @@
+var p=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var d=(s,e,a,r)=>{for(var t=r>1?void 0:r?h(e,a):e,i=s.length-1,n;i>=0;i--)(n=s[i])&&(t=(r?n(e,a,t):n(t))||t);return r&&t&&p(e,a,t),t};import{customElement as m}from"../internal/define.js";import{SkdxOverlayArrow as l}from"../internal/overlay-arrow.js";import{hiddenHostStyles as v}from"../internal/styles.js";import{findTourRoot as y,TOUR_INTERNAL_UPDATE as c}from"./Tour.js";var o=class extends l{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.syncHostState()}connectedCallback(){super.connectedCallback(),this.root=y(this),this.root?.addEventListener(c,this.onRootUpdate),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener(c,this.onRootUpdate),super.disconnectedCallback()}syncHostState(){this.hidden=!this.root?.anchored}};o.styles=[l.styles,v],o=d([m("skdx-tour-arrow","tour","arrow")],o);export{o as SkdxTourArrow};

package/dist/tour/TourBackdrop.cjs

@@ -0,0 +1,5 @@
+"use strict";var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var k=(o,t)=>{for(var s in t)a(o,s,{get:t[s],enumerable:!0})},y=(o,t,s,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of b(t))!v.call(o,e)&&e!==s&&a(o,e,{get:()=>t[e],enumerable:!(r=p(t,e))||r.enumerable});return o};var f=o=>y(a({},"__esModule",{value:!0}),o),h=(o,t,s,r)=>{for(var e=r>1?void 0:r?p(t,s):t,l=o.length-1,c;l>=0;l--)(c=o[l])&&(e=(r?c(t,s,e):c(e))||e);return r&&e&&a(t,s,e),e};var E={};k(E,{SkdxTourBackdrop:()=>d});module.exports=f(E);var n=require("lit"),m=require("../internal/define.cjs"),u=require("../internal/styles.cjs"),i=require("./Tour.cjs");var d=class extends n.LitElement{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.syncHostState()}connectedCallback(){if(super.connectedCallback(),this.root=(0,i.findTourRoot)(this),!this.root)throw new Error("<skdx-tour-backdrop> must be used inside <skdx-tour>.");this.root.addEventListener(i.TOUR_INTERNAL_UPDATE,this.onRootUpdate),this.setAttribute("aria-hidden","true"),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener(i.TOUR_INTERNAL_UPDATE,this.onRootUpdate),super.disconnectedCallback()}syncHostState(){let s=this.root?.open??!1;this.setAttribute("data-state",s?"open":"closed"),this.hidden=!s,(0,i.applySpotlightProperties)(this,this.root?.spotlightVars??{})}render(){return n.html`<slot></slot>`}};d.styles=[n.css`
+      :host {
+        display: block;
+      }
+    `,u.hiddenHostStyles],d=h([(0,m.customElement)("skdx-tour-backdrop","tour","backdrop")],d);0&&(module.exports={SkdxTourBackdrop});

package/dist/tour/TourBackdrop.d.cts

@@ -0,0 +1,50 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-tour-backdrop>` — the dimming layer behind the tour, carrying the
+ * spotlight geometry as the custom properties `--skdx-tour-x` / `-y` /
+ * `-width` / `-height` (already padded by the tour's `spotlight-padding` and
+ * clamped to the viewport). Those four are everything a cutout needs, so the
+ * hole over the highlighted element is drawable from CSS alone — a
+ * `clip-path`, a `radial-gradient`, or a giant `box-shadow` on
+ * `<skdx-tour-spotlight>` — with no measuring in JavaScript.
+ *
+ * Decorative and `aria-hidden`: the active step is announced through
+ * `<skdx-tour-content>`, not through the backdrop. `data-state`
+ * (`open`/`closed`) and `hidden` are set on this **host** element rather than
+ * inside shadow DOM, so a consumer's own stylesheet can position and animate
+ * it without piercing a shadow boundary — the same call
+ * `<skdx-drawer-overlay>` makes.
+ *
+ * Render it inside `<skdx-tour-portal>`. Must be used inside `<skdx-tour>`.
+ *
+ * @example
+ * ```css
+ * skdx-tour-backdrop {
+ *   position: fixed;
+ *   inset: 0;
+ *   background: rgb(0 0 0 / 0.5);
+ *   clip-path: polygon(
+ *     0 0, 100% 0, 100% 100%, 0 100%, 0 0,
+ *     var(--skdx-tour-x) var(--skdx-tour-y),
+ *     var(--skdx-tour-x) calc(var(--skdx-tour-y) + var(--skdx-tour-height)),
+ *     calc(var(--skdx-tour-x) + var(--skdx-tour-width)) calc(var(--skdx-tour-y) + var(--skdx-tour-height)),
+ *     calc(var(--skdx-tour-x) + var(--skdx-tour-width)) var(--skdx-tour-y),
+ *     var(--skdx-tour-x) var(--skdx-tour-y)
+ *   );
+ * }
+ * ```
+ */
+export declare class SkdxTourBackdrop extends LitElement {
+    static styles: import("lit").CSSResult[];
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private syncHostState;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tour-backdrop': SkdxTourBackdrop;
+    }
+}

package/dist/tour/TourBackdrop.d.ts

@@ -0,0 +1,50 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-tour-backdrop>` — the dimming layer behind the tour, carrying the
+ * spotlight geometry as the custom properties `--skdx-tour-x` / `-y` /
+ * `-width` / `-height` (already padded by the tour's `spotlight-padding` and
+ * clamped to the viewport). Those four are everything a cutout needs, so the
+ * hole over the highlighted element is drawable from CSS alone — a
+ * `clip-path`, a `radial-gradient`, or a giant `box-shadow` on
+ * `<skdx-tour-spotlight>` — with no measuring in JavaScript.
+ *
+ * Decorative and `aria-hidden`: the active step is announced through
+ * `<skdx-tour-content>`, not through the backdrop. `data-state`
+ * (`open`/`closed`) and `hidden` are set on this **host** element rather than
+ * inside shadow DOM, so a consumer's own stylesheet can position and animate
+ * it without piercing a shadow boundary — the same call
+ * `<skdx-drawer-overlay>` makes.
+ *
+ * Render it inside `<skdx-tour-portal>`. Must be used inside `<skdx-tour>`.
+ *
+ * @example
+ * ```css
+ * skdx-tour-backdrop {
+ *   position: fixed;
+ *   inset: 0;
+ *   background: rgb(0 0 0 / 0.5);
+ *   clip-path: polygon(
+ *     0 0, 100% 0, 100% 100%, 0 100%, 0 0,
+ *     var(--skdx-tour-x) var(--skdx-tour-y),
+ *     var(--skdx-tour-x) calc(var(--skdx-tour-y) + var(--skdx-tour-height)),
+ *     calc(var(--skdx-tour-x) + var(--skdx-tour-width)) calc(var(--skdx-tour-y) + var(--skdx-tour-height)),
+ *     calc(var(--skdx-tour-x) + var(--skdx-tour-width)) var(--skdx-tour-y),
+ *     var(--skdx-tour-x) var(--skdx-tour-y)
+ *   );
+ * }
+ * ```
+ */
+export declare class SkdxTourBackdrop extends LitElement {
+    static styles: import("lit").CSSResult[];
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private syncHostState;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tour-backdrop': SkdxTourBackdrop;
+    }
+}

package/dist/tour/TourBackdrop.js

@@ -0,0 +1,5 @@
+var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var a=(i,o,e,r)=>{for(var t=r>1?void 0:r?p(o,e):o,d=i.length-1,n;d>=0;d--)(n=i[d])&&(t=(r?n(o,e,t):n(t))||t);return r&&t&&c(o,e,t),t};import{css as h,html as m,LitElement as u}from"lit";import{customElement as b}from"../internal/define.js";import{hiddenHostStyles as v}from"../internal/styles.js";import{applySpotlightProperties as k,findTourRoot as y,TOUR_INTERNAL_UPDATE as l}from"./Tour.js";var s=class extends u{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.syncHostState()}connectedCallback(){if(super.connectedCallback(),this.root=y(this),!this.root)throw new Error("<skdx-tour-backdrop> must be used inside <skdx-tour>.");this.root.addEventListener(l,this.onRootUpdate),this.setAttribute("aria-hidden","true"),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener(l,this.onRootUpdate),super.disconnectedCallback()}syncHostState(){let e=this.root?.open??!1;this.setAttribute("data-state",e?"open":"closed"),this.hidden=!e,k(this,this.root?.spotlightVars??{})}render(){return m`<slot></slot>`}};s.styles=[h`
+      :host {
+        display: block;
+      }
+    `,v],s=a([b("skdx-tour-backdrop","tour","backdrop")],s);export{s as SkdxTourBackdrop};

package/dist/tour/TourCloseTrigger.cjs

@@ -0,0 +1,14 @@
+"use strict";var n=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var L=(e,t)=>{for(var r in t)n(e,r,{get:t[r],enumerable:!0})},g=(e,t,r,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of k(t))!v.call(e,o)&&o!==r&&n(e,o,{get:()=>t[o],enumerable:!(l=m(t,o))||l.enumerable});return e};var y=e=>g(n({},"__esModule",{value:!0}),e),h=(e,t,r,l)=>{for(var o=l>1?void 0:l?m(t,r):t,c=e.length-1,d;c>=0;c--)(d=e[c])&&(o=(l?d(t,r,o):d(o))||o);return l&&o&&n(t,r,o),o};var w={};L(w,{SkdxTourCloseTrigger:()=>i});module.exports=y(w);var s=require("lit"),p=require("lit/decorators.js"),u=require("../internal/aria-label.cjs"),b=require("../internal/define.cjs"),a=require("../internal/styles.cjs"),f=require("./Tour.cjs");var i=class extends s.LitElement{constructor(){super(...arguments);this.hostLabel=null;this.root=null;this.handleClick=()=>this.root?.skip()}connectedCallback(){if(super.connectedCallback(),this.root=(0,f.findTourRoot)(this),!this.root)throw new Error("<skdx-tour-close-trigger> must be used inside <skdx-tour>.");this.hostLabel??(this.hostLabel=(0,u.takeHostAriaLabel)(this))}render(){return s.html`
+      <button
+        part="close-trigger"
+        type="button"
+        aria-label=${this.hostLabel??s.nothing}
+        @click=${this.handleClick}
+      >
+        <slot></slot>
+      </button>
+    `}};i.shadowRootOptions=a.delegatesFocusShadowRootOptions,i.styles=[a.resetNativeControl,s.css`
+      :host {
+        display: inline-block;
+      }
+    `,a.controlBoxOnHost],h([(0,p.state)()],i.prototype,"hostLabel",2),i=h([(0,b.customElement)("skdx-tour-close-trigger","tour","close-trigger")],i);0&&(module.exports={SkdxTourCloseTrigger});

package/dist/tour/TourCloseTrigger.d.cts

@@ -0,0 +1,33 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-tour-close-trigger>` — the dismiss affordance, the corner ✕. Ends the
+ * tour through the same path as `<skdx-tour-skip-trigger>` and Escape: closes
+ * it and fires `skip`, never `complete`. Abandoning a tour is abandoning it,
+ * whichever control did it.
+ *
+ * Distinct from `<skdx-tour-skip-trigger>` only in intent and placement, so
+ * give it an `aria-label` — an icon-only button has no accessible name of its
+ * own.
+ *
+ * @csspart close-trigger - The native `<button>` element inside the shadow root.
+ *
+ * @example
+ * ```html
+ * <skdx-tour-close-trigger aria-label="Close tour">✕</skdx-tour-close-trigger>
+ * ```
+ */
+export declare class SkdxTourCloseTrigger extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /** Accessible name for the inner `<button>`, moved off this host — see `takeHostAriaLabel`. */
+    private hostLabel;
+    private root;
+    connectedCallback(): void;
+    private readonly handleClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tour-close-trigger': SkdxTourCloseTrigger;
+    }
+}

package/dist/tour/TourCloseTrigger.d.ts

@@ -0,0 +1,33 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-tour-close-trigger>` — the dismiss affordance, the corner ✕. Ends the
+ * tour through the same path as `<skdx-tour-skip-trigger>` and Escape: closes
+ * it and fires `skip`, never `complete`. Abandoning a tour is abandoning it,
+ * whichever control did it.
+ *
+ * Distinct from `<skdx-tour-skip-trigger>` only in intent and placement, so
+ * give it an `aria-label` — an icon-only button has no accessible name of its
+ * own.
+ *
+ * @csspart close-trigger - The native `<button>` element inside the shadow root.
+ *
+ * @example
+ * ```html
+ * <skdx-tour-close-trigger aria-label="Close tour">✕</skdx-tour-close-trigger>
+ * ```
+ */
+export declare class SkdxTourCloseTrigger extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /** Accessible name for the inner `<button>`, moved off this host — see `takeHostAriaLabel`. */
+    private hostLabel;
+    private root;
+    connectedCallback(): void;
+    private readonly handleClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tour-close-trigger': SkdxTourCloseTrigger;
+    }
+}

package/dist/tour/TourCloseTrigger.js

@@ -0,0 +1,14 @@
+var c=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var n=(i,e,s,r)=>{for(var t=r>1?void 0:r?d(e,s):e,l=i.length-1,a;l>=0;l--)(a=i[l])&&(t=(r?a(e,s,t):a(t))||t);return r&&t&&c(e,s,t),t};import{css as h,html as m,LitElement as p,nothing as u}from"lit";import{state as b}from"lit/decorators.js";import{takeHostAriaLabel as f}from"../internal/aria-label.js";import{customElement as k}from"../internal/define.js";import{controlBoxOnHost as v,delegatesFocusShadowRootOptions as L,resetNativeControl as g}from"../internal/styles.js";import{findTourRoot as y}from"./Tour.js";var o=class extends p{constructor(){super(...arguments);this.hostLabel=null;this.root=null;this.handleClick=()=>this.root?.skip()}connectedCallback(){if(super.connectedCallback(),this.root=y(this),!this.root)throw new Error("<skdx-tour-close-trigger> must be used inside <skdx-tour>.");this.hostLabel??(this.hostLabel=f(this))}render(){return m`
+      <button
+        part="close-trigger"
+        type="button"
+        aria-label=${this.hostLabel??u}
+        @click=${this.handleClick}
+      >
+        <slot></slot>
+      </button>
+    `}};o.shadowRootOptions=L,o.styles=[g,h`
+      :host {
+        display: inline-block;
+      }
+    `,v],n([b()],o.prototype,"hostLabel",2),o=n([k("skdx-tour-close-trigger","tour","close-trigger")],o);export{o as SkdxTourCloseTrigger};

package/dist/tour/TourContent.cjs

@@ -0,0 +1,5 @@
+"use strict";var p=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var O=Object.prototype.hasOwnProperty;var w=(s,o)=>{for(var t in o)p(s,t,{get:o[t],enumerable:!0})},F=(s,o,t,e)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of E(o))!O.call(s,i)&&i!==t&&p(s,i,{get:()=>o[i],enumerable:!(e=y(o,i))||e.enumerable});return s};var P=s=>F(p({},"__esModule",{value:!0}),s),r=(s,o,t,e)=>{for(var i=e>1?void 0:e?y(o,t):o,c=s.length-1,l;c>=0;c--)(l=s[c])&&(i=(e?l(o,t,i):l(i))||i);return e&&i&&p(o,t,i),i};var S={};w(S,{SkdxTourContent:()=>n});module.exports=P(S);var u=require("lit"),d=require("lit/decorators.js"),b=require("../internal/define.cjs"),a=require("../internal/dismiss.cjs"),m=require("../internal/positioning.cjs"),g=require("../internal/styles.cjs"),h=require("./Tour.cjs");var f='a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';function A(s){return Array.from(s.querySelectorAll("*")).filter(o=>o.matches(f)||!!o.shadowRoot?.querySelector(f))}function v(s){(s.matches(f)?s:s.shadowRoot?.querySelector(f)??s).focus({preventScroll:!0})}var L=["position","left","top","transform"],n=class extends u.LitElement{constructor(){super(...arguments);this.side="bottom";this.align="center";this.sideOffset=8;this.alignOffset=0;this.avoidCollisions=!0;this.collisionPadding=8;this.root=null;this.onRootUpdate=()=>this.sync();this.positionedTarget=null;this.positionedStep=-1;this.wasOpen=!1;this.previouslyFocused=null;this.focusedStep=-1;this.handleKeyDown=t=>{if(t.key!=="Tab"||!this.root?.open)return;let e=A(this);if(e.length===0){t.preventDefault();return}let i=e[0],c=e[e.length-1],l=document.activeElement;t.shiftKey&&(l===i||l===this)?(t.preventDefault(),v(c)):!t.shiftKey&&l===c&&(t.preventDefault(),v(i))};this.handleDocumentKeyDown=t=>{t.key!=="Escape"||!this.root?.open||(0,a.dispatchEscapeKeyDown)(this,t)&&this.root.closeOnEscape&&this.root.skip()};this.handleOutsidePointerDown=t=>{let e=this.root;if(!e?.open)return;let i=t.target;!i||this.contains(i)||(0,a.dispatchOutside)(this,"pointer-down-outside",t)&&e.closeOnInteractOutside&&e.skip()};this.handleOutsideFocus=t=>{if(!this.root?.open)return;let e=(0,a.focusOutsideTarget)(t);!e||this.contains(e)||(0,a.dispatchOutside)(this,"focus-outside",t)}}connectedCallback(){if(super.connectedCallback(),this.root=(0,h.findTourRoot)(this),!this.root)throw new Error("<skdx-tour-content> must be used inside <skdx-tour>.");this.root.addEventListener(h.TOUR_INTERNAL_UPDATE,this.onRootUpdate),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("keydown",this.handleDocumentKeyDown),document.addEventListener("pointerdown",this.handleOutsidePointerDown),document.addEventListener("focusin",this.handleOutsideFocus),this.sync()}disconnectedCallback(){this.root?.removeEventListener(h.TOUR_INTERNAL_UPDATE,this.onRootUpdate),this.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("keydown",this.handleDocumentKeyDown),document.removeEventListener("pointerdown",this.handleOutsidePointerDown),document.removeEventListener("focusin",this.handleOutsideFocus),this.focusFrame!==void 0&&cancelAnimationFrame(this.focusFrame),this.deactivatePosition(),this.focusedStep=-1,super.disconnectedCallback()}sync(){let t=this.root;if(!t)return;let e=t.open;this.id=t.contentId,this.setAttribute("role","dialog"),this.setAttribute("aria-modal","true"),this.setAttribute("aria-labelledby",t.titleId),this.setAttribute("aria-describedby",t.descriptionId),this.hasAttribute("tabindex")||(this.tabIndex=-1),this.setAttribute("data-state",e?"open":"closed"),this.setAttribute("data-step",String(t.step));let i=t.activeStep?.type;i?this.setAttribute("data-type",i):this.removeAttribute("data-type"),this.hidden=!e,e&&t.anchored&&t.target?this.activatePosition(t.target):this.centre(),this.syncFocus(e)}activatePosition(t){let e=this.root;e&&(this.positionedTarget===t&&this.positionedStep===e.step||(this.deactivatePosition(),this.positionedTarget=t,this.positionedStep=e.step,this.removeAttribute("data-centered"),this.setAttribute("data-side",e.activeStep?.placement??this.side??"bottom"),this.setAttribute("data-align",e.activeStep?.align??this.align??"center"),this.cleanupPosition=(0,m.positionFloating)(t,this,{side:e.activeStep?.placement??this.side,align:e.activeStep?.align??this.align,sideOffset:this.sideOffset,alignOffset:this.alignOffset,avoidCollisions:this.avoidCollisions,collisionPadding:this.collisionPadding,collisionBoundary:this.collisionBoundary,component:"tour",arrow:()=>this.querySelector("skdx-tour-arrow")})))}centre(){this.deactivatePosition(),this.setAttribute("data-centered",""),this.removeAttribute("data-side"),this.removeAttribute("data-align");for(let t of L)this.style.removeProperty(t)}deactivatePosition(){this.cleanupPosition?.(),this.cleanupPosition=void 0,this.positionedTarget=null,this.positionedStep=-1}syncFocus(t){t&&!this.wasOpen&&(this.previouslyFocused=document.activeElement),!t&&this.wasOpen&&(this.focusFrame!==void 0&&cancelAnimationFrame(this.focusFrame),this.focusFrame=void 0,this.focusedStep=-1,this.previouslyFocused&&document.contains(this.previouslyFocused)&&v(this.previouslyFocused),this.previouslyFocused=null),this.wasOpen=t;let e=this.root?.step??-1;!t||this.focusedStep===e||(this.focusedStep=e,this.focusFrame=requestAnimationFrame(()=>(0,a.focusOnOpen)(()=>{this.focusFrame=void 0,this.focus({preventScroll:!0})})))}render(){return u.html`<slot></slot>`}};n.styles=[u.css`
+      :host {
+        display: block;
+      }
+    `,g.hiddenHostStyles],r([(0,d.property)({type:String})],n.prototype,"side",2),r([(0,d.property)({type:String})],n.prototype,"align",2),r([(0,d.property)({type:Number,attribute:"side-offset"})],n.prototype,"sideOffset",2),r([(0,d.property)({type:Number,attribute:"align-offset"})],n.prototype,"alignOffset",2),r([(0,d.property)({converter:m.optOutBoolean,attribute:"avoid-collisions"})],n.prototype,"avoidCollisions",2),r([(0,d.property)({type:Number,attribute:"collision-padding"})],n.prototype,"collisionPadding",2),r([(0,d.property)({attribute:!1})],n.prototype,"collisionBoundary",2),n=r([(0,b.customElement)("skdx-tour-content","tour","content")],n);0&&(module.exports={SkdxTourContent});

package/dist/tour/TourContent.d.cts

@@ -0,0 +1,110 @@
+import { LitElement } from 'lit';
+import { type PositionOptions } from '../internal/positioning.cjs';
+/**
+ * `<skdx-tour-content>` — the active step's panel: `role="dialog"` with
+ * `aria-modal="true"`, labelled by `<skdx-tour-title>` and described by
+ * `<skdx-tour-description>`, and `data-state` (`open`/`closed`) plus
+ * `data-step` and `data-type`. `role` and the ARIA wiring are set on this
+ * **host** element rather than inside shadow DOM, because an IDREF cannot
+ * cross a shadow boundary: the slotted title and description share this
+ * element's light-DOM scope.
+ *
+ * When the step has a resolved target (and is not `type: 'dialog'`) it is
+ * positioned by the shared popper layer against that target, exposing the
+ * resolved `data-side`/`data-align` and the `--skdx-tour-available-width` /
+ * `-available-height` / `-trigger-width` / `-transform-origin` measurement
+ * properties. A step with no target — or an explicit `type: 'dialog'` — gets
+ * `data-centered` instead, with **no** inline positioning and no
+ * `data-side`/`data-align` at all, so CSS is free to place it in the middle of
+ * the viewport. The active step's `placement`/`align` override this element's
+ * own `side`/`align`, which act as the tour-wide defaults.
+ *
+ * Focus is trapped inside while the tour runs, moves onto the panel on **each
+ * step change** (not just on open — a step change that only swaps text is
+ * invisible to a screen reader otherwise), and is restored to whatever was
+ * focused before the tour started when it completes or is skipped.
+ *
+ * Escape skips the tour when the tour's `close-on-escape` is set (the
+ * default); a pointer-down outside skips it only when
+ * `close-on-interact-outside` is. Both are announced first — as
+ * `escape-key-down`, and as `interact-outside` then `pointer-down-outside` —
+ * and `preventDefault()` on any of them keeps the tour running. Focus moving
+ * outside is announced too but never ends the tour: a tour's whole job is to
+ * point at the page, so focus landing on the very thing being explained must
+ * not close it. Arrow keys are deliberately **not** handled: they belong to
+ * whatever the step is pointing at.
+ *
+ * Render it inside `<skdx-tour-portal>`. Must be used inside `<skdx-tour>`.
+ *
+ * @fires escape-key-down - Escape was pressed while the tour is open (detail: the KeyboardEvent). Preventable, whatever `close-on-escape` is set to.
+ * @fires pointer-down-outside - A pointer-down landed outside this content while open (detail: the PointerEvent). Preventing default keeps the tour open.
+ * @fires focus-outside - Focus moved to an element outside this content while open (detail: the original focusin). Notification only — focus never ends a tour.
+ * @fires interact-outside - Either kind of outside interaction, fired immediately before the specific event so one handler can veto both.
+ */
+export declare class SkdxTourContent extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Preferred edge of the target to place the panel against, for steps that declare no `placement` of their own. */
+    side: PositionOptions['side'];
+    /** Preferred alignment along that edge, for steps that declare no `align` of their own. */
+    align: PositionOptions['align'];
+    /** Pixel gap between the panel and the target's edge. */
+    sideOffset: number;
+    /** Pixel offset along the alignment axis. */
+    alignOffset: number;
+    /** Flip/shift to stay within the viewport instead of overflowing it. */
+    avoidCollisions: boolean;
+    /**
+     * Minimum pixel distance to keep from the collision boundary when avoiding
+     * collisions. The `collision-padding` attribute sets a single number for
+     * every side; the per-side `{ top, right, bottom, left }` form is
+     * property-only, since an attribute cannot carry an object.
+     */
+    collisionPadding: NonNullable<PositionOptions['collisionPadding']>;
+    /**
+     * Element (or elements) collisions are measured against instead of this
+     * panel's clipping ancestors. Property-only: an `Element` cannot come from
+     * an attribute string.
+     */
+    collisionBoundary?: PositionOptions['collisionBoundary'];
+    private root;
+    private readonly onRootUpdate;
+    private cleanupPosition?;
+    private positionedTarget;
+    private positionedStep;
+    private wasOpen;
+    private previouslyFocused;
+    private focusedStep;
+    private focusFrame?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private sync;
+    /** Positions the panel against the step's target through the shared popper layer. */
+    private activatePosition;
+    /**
+     * The centred branch. There is no anchor here, so reporting a side the panel
+     * was never placed on would be a lie, and the zeroed inline `left`/`top`
+     * would fight the CSS doing the centring — both are stripped rather than
+     * overridden.
+     */
+    private centre;
+    private deactivatePosition;
+    /**
+     * The panel stays put across a step change, so nothing would move focus on
+     * its own — the user would be left focused on a "Next" button whose
+     * surrounding text silently changed. Pulling focus back onto the panel for
+     * every index makes the new step the thing the screen reader is on.
+     */
+    private syncFocus;
+    /** Tab cycling only fires for keys pressed inside the panel. */
+    private readonly handleKeyDown;
+    /** Escape is listened for on the document, so it works wherever focus happens to be. */
+    private readonly handleDocumentKeyDown;
+    private readonly handleOutsidePointerDown;
+    private readonly handleOutsideFocus;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tour-content': SkdxTourContent;
+    }
+}

package/dist/tour/TourContent.d.ts

@@ -0,0 +1,110 @@
+import { LitElement } from 'lit';
+import { type PositionOptions } from '../internal/positioning.js';
+/**
+ * `<skdx-tour-content>` — the active step's panel: `role="dialog"` with
+ * `aria-modal="true"`, labelled by `<skdx-tour-title>` and described by
+ * `<skdx-tour-description>`, and `data-state` (`open`/`closed`) plus
+ * `data-step` and `data-type`. `role` and the ARIA wiring are set on this
+ * **host** element rather than inside shadow DOM, because an IDREF cannot
+ * cross a shadow boundary: the slotted title and description share this
+ * element's light-DOM scope.
+ *
+ * When the step has a resolved target (and is not `type: 'dialog'`) it is
+ * positioned by the shared popper layer against that target, exposing the
+ * resolved `data-side`/`data-align` and the `--skdx-tour-available-width` /
+ * `-available-height` / `-trigger-width` / `-transform-origin` measurement
+ * properties. A step with no target — or an explicit `type: 'dialog'` — gets
+ * `data-centered` instead, with **no** inline positioning and no
+ * `data-side`/`data-align` at all, so CSS is free to place it in the middle of
+ * the viewport. The active step's `placement`/`align` override this element's
+ * own `side`/`align`, which act as the tour-wide defaults.
+ *
+ * Focus is trapped inside while the tour runs, moves onto the panel on **each
+ * step change** (not just on open — a step change that only swaps text is
+ * invisible to a screen reader otherwise), and is restored to whatever was
+ * focused before the tour started when it completes or is skipped.
+ *
+ * Escape skips the tour when the tour's `close-on-escape` is set (the
+ * default); a pointer-down outside skips it only when
+ * `close-on-interact-outside` is. Both are announced first — as
+ * `escape-key-down`, and as `interact-outside` then `pointer-down-outside` —
+ * and `preventDefault()` on any of them keeps the tour running. Focus moving
+ * outside is announced too but never ends the tour: a tour's whole job is to
+ * point at the page, so focus landing on the very thing being explained must
+ * not close it. Arrow keys are deliberately **not** handled: they belong to
+ * whatever the step is pointing at.
+ *
+ * Render it inside `<skdx-tour-portal>`. Must be used inside `<skdx-tour>`.
+ *
+ * @fires escape-key-down - Escape was pressed while the tour is open (detail: the KeyboardEvent). Preventable, whatever `close-on-escape` is set to.
+ * @fires pointer-down-outside - A pointer-down landed outside this content while open (detail: the PointerEvent). Preventing default keeps the tour open.
+ * @fires focus-outside - Focus moved to an element outside this content while open (detail: the original focusin). Notification only — focus never ends a tour.
+ * @fires interact-outside - Either kind of outside interaction, fired immediately before the specific event so one handler can veto both.
+ */
+export declare class SkdxTourContent extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Preferred edge of the target to place the panel against, for steps that declare no `placement` of their own. */
+    side: PositionOptions['side'];
+    /** Preferred alignment along that edge, for steps that declare no `align` of their own. */
+    align: PositionOptions['align'];
+    /** Pixel gap between the panel and the target's edge. */
+    sideOffset: number;
+    /** Pixel offset along the alignment axis. */
+    alignOffset: number;
+    /** Flip/shift to stay within the viewport instead of overflowing it. */
+    avoidCollisions: boolean;
+    /**
+     * Minimum pixel distance to keep from the collision boundary when avoiding
+     * collisions. The `collision-padding` attribute sets a single number for
+     * every side; the per-side `{ top, right, bottom, left }` form is
+     * property-only, since an attribute cannot carry an object.
+     */
+    collisionPadding: NonNullable<PositionOptions['collisionPadding']>;
+    /**
+     * Element (or elements) collisions are measured against instead of this
+     * panel's clipping ancestors. Property-only: an `Element` cannot come from
+     * an attribute string.
+     */
+    collisionBoundary?: PositionOptions['collisionBoundary'];
+    private root;
+    private readonly onRootUpdate;
+    private cleanupPosition?;
+    private positionedTarget;
+    private positionedStep;
+    private wasOpen;
+    private previouslyFocused;
+    private focusedStep;
+    private focusFrame?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private sync;
+    /** Positions the panel against the step's target through the shared popper layer. */
+    private activatePosition;
+    /**
+     * The centred branch. There is no anchor here, so reporting a side the panel
+     * was never placed on would be a lie, and the zeroed inline `left`/`top`
+     * would fight the CSS doing the centring — both are stripped rather than
+     * overridden.
+     */
+    private centre;
+    private deactivatePosition;
+    /**
+     * The panel stays put across a step change, so nothing would move focus on
+     * its own — the user would be left focused on a "Next" button whose
+     * surrounding text silently changed. Pulling focus back onto the panel for
+     * every index makes the new step the thing the screen reader is on.
+     */
+    private syncFocus;
+    /** Tab cycling only fires for keys pressed inside the panel. */
+    private readonly handleKeyDown;
+    /** Escape is listened for on the document, so it works wherever focus happens to be. */
+    private readonly handleDocumentKeyDown;
+    private readonly handleOutsidePointerDown;
+    private readonly handleOutsideFocus;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tour-content': SkdxTourContent;
+    }
+}

package/dist/tour/TourContent.js

@@ -0,0 +1,5 @@
+var f=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var r=(s,n,t,e)=>{for(var i=e>1?void 0:e?m(n,t):n,l=s.length-1,a;l>=0;l--)(a=s[l])&&(i=(e?a(n,t,i):a(i))||i);return e&&i&&f(n,t,i),i};import{css as v,html as y,LitElement as b}from"lit";import{property as d}from"lit/decorators.js";import{customElement as g}from"../internal/define.js";import{dispatchEscapeKeyDown as E,dispatchOutside as h,focusOnOpen as O,focusOutsideTarget as w}from"../internal/dismiss.js";import{optOutBoolean as F,positionFloating as P}from"../internal/positioning.js";import{hiddenHostStyles as A}from"../internal/styles.js";import{findTourRoot as L,TOUR_INTERNAL_UPDATE as p}from"./Tour.js";var c='a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';function S(s){return Array.from(s.querySelectorAll("*")).filter(n=>n.matches(c)||!!n.shadowRoot?.querySelector(c))}function u(s){(s.matches(c)?s:s.shadowRoot?.querySelector(c)??s).focus({preventScroll:!0})}var D=["position","left","top","transform"],o=class extends b{constructor(){super(...arguments);this.side="bottom";this.align="center";this.sideOffset=8;this.alignOffset=0;this.avoidCollisions=!0;this.collisionPadding=8;this.root=null;this.onRootUpdate=()=>this.sync();this.positionedTarget=null;this.positionedStep=-1;this.wasOpen=!1;this.previouslyFocused=null;this.focusedStep=-1;this.handleKeyDown=t=>{if(t.key!=="Tab"||!this.root?.open)return;let e=S(this);if(e.length===0){t.preventDefault();return}let i=e[0],l=e[e.length-1],a=document.activeElement;t.shiftKey&&(a===i||a===this)?(t.preventDefault(),u(l)):!t.shiftKey&&a===l&&(t.preventDefault(),u(i))};this.handleDocumentKeyDown=t=>{t.key!=="Escape"||!this.root?.open||E(this,t)&&this.root.closeOnEscape&&this.root.skip()};this.handleOutsidePointerDown=t=>{let e=this.root;if(!e?.open)return;let i=t.target;!i||this.contains(i)||h(this,"pointer-down-outside",t)&&e.closeOnInteractOutside&&e.skip()};this.handleOutsideFocus=t=>{if(!this.root?.open)return;let e=w(t);!e||this.contains(e)||h(this,"focus-outside",t)}}connectedCallback(){if(super.connectedCallback(),this.root=L(this),!this.root)throw new Error("<skdx-tour-content> must be used inside <skdx-tour>.");this.root.addEventListener(p,this.onRootUpdate),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("keydown",this.handleDocumentKeyDown),document.addEventListener("pointerdown",this.handleOutsidePointerDown),document.addEventListener("focusin",this.handleOutsideFocus),this.sync()}disconnectedCallback(){this.root?.removeEventListener(p,this.onRootUpdate),this.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("keydown",this.handleDocumentKeyDown),document.removeEventListener("pointerdown",this.handleOutsidePointerDown),document.removeEventListener("focusin",this.handleOutsideFocus),this.focusFrame!==void 0&&cancelAnimationFrame(this.focusFrame),this.deactivatePosition(),this.focusedStep=-1,super.disconnectedCallback()}sync(){let t=this.root;if(!t)return;let e=t.open;this.id=t.contentId,this.setAttribute("role","dialog"),this.setAttribute("aria-modal","true"),this.setAttribute("aria-labelledby",t.titleId),this.setAttribute("aria-describedby",t.descriptionId),this.hasAttribute("tabindex")||(this.tabIndex=-1),this.setAttribute("data-state",e?"open":"closed"),this.setAttribute("data-step",String(t.step));let i=t.activeStep?.type;i?this.setAttribute("data-type",i):this.removeAttribute("data-type"),this.hidden=!e,e&&t.anchored&&t.target?this.activatePosition(t.target):this.centre(),this.syncFocus(e)}activatePosition(t){let e=this.root;e&&(this.positionedTarget===t&&this.positionedStep===e.step||(this.deactivatePosition(),this.positionedTarget=t,this.positionedStep=e.step,this.removeAttribute("data-centered"),this.setAttribute("data-side",e.activeStep?.placement??this.side??"bottom"),this.setAttribute("data-align",e.activeStep?.align??this.align??"center"),this.cleanupPosition=P(t,this,{side:e.activeStep?.placement??this.side,align:e.activeStep?.align??this.align,sideOffset:this.sideOffset,alignOffset:this.alignOffset,avoidCollisions:this.avoidCollisions,collisionPadding:this.collisionPadding,collisionBoundary:this.collisionBoundary,component:"tour",arrow:()=>this.querySelector("skdx-tour-arrow")})))}centre(){this.deactivatePosition(),this.setAttribute("data-centered",""),this.removeAttribute("data-side"),this.removeAttribute("data-align");for(let t of D)this.style.removeProperty(t)}deactivatePosition(){this.cleanupPosition?.(),this.cleanupPosition=void 0,this.positionedTarget=null,this.positionedStep=-1}syncFocus(t){t&&!this.wasOpen&&(this.previouslyFocused=document.activeElement),!t&&this.wasOpen&&(this.focusFrame!==void 0&&cancelAnimationFrame(this.focusFrame),this.focusFrame=void 0,this.focusedStep=-1,this.previouslyFocused&&document.contains(this.previouslyFocused)&&u(this.previouslyFocused),this.previouslyFocused=null),this.wasOpen=t;let e=this.root?.step??-1;!t||this.focusedStep===e||(this.focusedStep=e,this.focusFrame=requestAnimationFrame(()=>O(()=>{this.focusFrame=void 0,this.focus({preventScroll:!0})})))}render(){return y`<slot></slot>`}};o.styles=[v`
+      :host {
+        display: block;
+      }
+    `,A],r([d({type:String})],o.prototype,"side",2),r([d({type:String})],o.prototype,"align",2),r([d({type:Number,attribute:"side-offset"})],o.prototype,"sideOffset",2),r([d({type:Number,attribute:"align-offset"})],o.prototype,"alignOffset",2),r([d({converter:F,attribute:"avoid-collisions"})],o.prototype,"avoidCollisions",2),r([d({type:Number,attribute:"collision-padding"})],o.prototype,"collisionPadding",2),r([d({attribute:!1})],o.prototype,"collisionBoundary",2),o=r([g("skdx-tour-content","tour","content")],o);export{o as SkdxTourContent};

package/dist/tour/TourDescription.cjs

@@ -0,0 +1,5 @@
+"use strict";var l=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var u=(o,t)=>{for(var r in t)l(o,r,{get:t[r],enumerable:!0})},v=(o,t,r,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of b(t))!h.call(o,e)&&e!==r&&l(o,e,{get:()=>t[e],enumerable:!(s=a(t,e))||s.enumerable});return o};var E=o=>v(l({},"__esModule",{value:!0}),o),m=(o,t,r,s)=>{for(var e=s>1?void 0:s?a(t,r):t,c=o.length-1,n;c>=0;c--)(n=o[c])&&(e=(s?n(t,r,e):n(e))||e);return s&&e&&l(t,r,e),e};var g={};u(g,{SkdxTourDescription:()=>i});module.exports=E(g);var d=require("lit"),p=require("../internal/define.cjs"),f=require("./Tour.cjs");var i=class extends d.LitElement{connectedCallback(){super.connectedCallback();let t=(0,f.findTourRoot)(this);t&&(this.id=t.descriptionId)}render(){return d.html`<p part="description"><slot></slot></p>`}};i.styles=d.css`
+    :host {
+      display: block;
+    }
+  `,i=m([(0,p.customElement)("skdx-tour-description","tour","description")],i);0&&(module.exports={SkdxTourDescription});

package/dist/tour/TourDescription.d.cts

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-tour-description>` — the active step's accessible description: renders
+ * a `<p>` in shadow DOM, and takes the light-DOM `id` that
+ * `<skdx-tour-content>`'s `aria-describedby` already points at.
+ *
+ * @csspart description - The `<p>` element inside the shadow root.
+ *
+ * @example
+ * ```html
+ * <skdx-tour-content>
+ *   <skdx-tour-title>Your inbox</skdx-tour-title>
+ *   <skdx-tour-description>Everything lands here first.</skdx-tour-description>
+ * </skdx-tour-content>
+ * ```
+ */
+export declare class SkdxTourDescription extends LitElement {
+    static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tour-description': SkdxTourDescription;
+    }
+}

package/dist/tour/TourDescription.d.ts

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-tour-description>` — the active step's accessible description: renders
+ * a `<p>` in shadow DOM, and takes the light-DOM `id` that
+ * `<skdx-tour-content>`'s `aria-describedby` already points at.
+ *
+ * @csspart description - The `<p>` element inside the shadow root.
+ *
+ * @example
+ * ```html
+ * <skdx-tour-content>
+ *   <skdx-tour-title>Your inbox</skdx-tour-title>
+ *   <skdx-tour-description>Everything lands here first.</skdx-tour-description>
+ * </skdx-tour-content>
+ * ```
+ */
+export declare class SkdxTourDescription extends LitElement {
+    static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tour-description': SkdxTourDescription;
+    }
+}

package/dist/tour/TourDescription.js

@@ -0,0 +1,5 @@
+var n=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var c=(s,t,i,r)=>{for(var e=r>1?void 0:r?a(t,i):t,d=s.length-1,l;d>=0;d--)(l=s[d])&&(e=(r?l(t,i,e):l(e))||e);return r&&e&&n(t,i,e),e};import{css as m,html as p,LitElement as f}from"lit";import{customElement as b}from"../internal/define.js";import{findTourRoot as h}from"./Tour.js";var o=class extends f{connectedCallback(){super.connectedCallback();let t=h(this);t&&(this.id=t.descriptionId)}render(){return p`<p part="description"><slot></slot></p>`}};o.styles=m`
+    :host {
+      display: block;
+    }
+  `,o=c([b("skdx-tour-description","tour","description")],o);export{o as SkdxTourDescription};

package/dist/tour/TourNextTrigger.cjs

@@ -0,0 +1,9 @@
+"use strict";var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var k=(s,t)=>{for(var o in t)d(s,o,{get:t[o],enumerable:!0})},y=(s,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of m(t))!b.call(s,e)&&e!==o&&d(s,e,{get:()=>t[e],enumerable:!(r=p(t,e))||r.enumerable});return s};var f=s=>y(d({},"__esModule",{value:!0}),s),u=(s,t,o,r)=>{for(var e=r>1?void 0:r?p(t,o):t,c=s.length-1,h;c>=0;c--)(h=s[c])&&(e=(r?h(t,o,e):h(e))||e);return r&&e&&d(t,o,e),e};var E={};k(E,{SkdxTourNextTrigger:()=>i});module.exports=f(E);var a=require("lit"),v=require("../internal/define.cjs"),n=require("../internal/styles.cjs"),l=require("./Tour.cjs");var i=class extends a.LitElement{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.syncHostState();this.handleClick=()=>this.root?.next()}connectedCallback(){if(super.connectedCallback(),this.root=(0,l.findTourRoot)(this),!this.root)throw new Error("<skdx-tour-next-trigger> must be used inside <skdx-tour>.");this.root.addEventListener(l.TOUR_INTERNAL_UPDATE,this.onRootUpdate),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener(l.TOUR_INTERNAL_UPDATE,this.onRootUpdate),super.disconnectedCallback()}get isLast(){let o=this.root;return!!o&&o.step>=o.total-1}syncHostState(){this.isLast?this.setAttribute("data-last",""):this.removeAttribute("data-last"),this.requestUpdate()}render(){return a.html`
+      <button part="next-trigger" type="button" ?data-last=${this.isLast} @click=${this.handleClick}>
+        <slot></slot>
+      </button>
+    `}};i.shadowRootOptions=n.delegatesFocusShadowRootOptions,i.styles=[n.resetNativeControl,a.css`
+      :host {
+        display: inline-block;
+      }
+    `,n.controlBoxOnHost],i=u([(0,v.customElement)("skdx-tour-next-trigger","tour","next-trigger")],i);0&&(module.exports={SkdxTourNextTrigger});

package/dist/tour/TourNextTrigger.d.cts

@@ -0,0 +1,33 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-tour-next-trigger>` — advances to the next step, and on the **last**
+ * step completes the tour instead: closes it and fires `complete`. That means
+ * one button can carry the whole flow; `data-last` (on the host and on the
+ * inner button) is there so the label can change without the consumer
+ * tracking the index.
+ *
+ * @csspart next-trigger - The native `<button>` element inside the shadow root.
+ *
+ * @example
+ * ```css
+ * skdx-tour-next-trigger:not([data-last]) .done { display: none; }
+ * skdx-tour-next-trigger[data-last] .next { display: none; }
+ * ```
+ */
+export declare class SkdxTourNextTrigger extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private get isLast();
+    private syncHostState;
+    private readonly handleClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tour-next-trigger': SkdxTourNextTrigger;
+    }
+}