@skdx/vue 0.27.0 → 0.28.0

package/dist/tour/Tour.vue.d.ts

@@ -1,103 +1,82 @@
 import { type TourStep } from './context.js';
 /**
- * The Vue implementation of the shared Tour contract (see `@skdx/shared`'s
- * `tourContract`). Root of a stepped product tour: owns the running state,
- * the active step index, the step list, target resolution and the spotlight
- * geometry, and hands them down to `SkdxTourTrigger` / `SkdxTourPortal` /
- * `SkdxTourBackdrop` / `SkdxTourSpotlight` / `SkdxTourContent` and the
- * navigation triggers via context. Renders no DOM element itself.
- *
- * Steps are **data**: each declares the element it points at (a selector, an
- * element, or a template ref), optionally a `placement`, a `title` for the
- * announcement, and a `type`. A step with no target renders centred, which is
- * how a tour usually opens and closes.
- *
- * A target that has not mounted yet is polled for up to `targetTimeout`; on
- * timeout `step-target-missing` fires and the tour skips forward rather than
- * showing a popup anchored to nothing. A target that is found is scrolled
- * into view before it is measured.
- *
- * Works controlled (`v-model:open` / `v-model:step`) or uncontrolled
- * (`default-open` / `default-step`) — the two axes are independent.
- *
- * Everything that touches the DOM (resolving a target, measuring it,
- * announcing a step) is deferred to `onMounted` or a watcher, so the root
- * server-renders without a DOM.
- *
+ * Stepped product tour root; owns running state, active step, target resolution.
+ * Controlled (`v-model:open` / `v-model:step`) or uncontrolled.
+ * Polled target timeout fires `step-target-missing` and skips forward.
  * @example
  * ```vue
  * <SkdxTour :steps="steps" @complete="markSeen">
  *   <SkdxTourTrigger>Take the tour</SkdxTourTrigger>
- *   <SkdxTourPortal>
- *     <SkdxTourBackdrop />
- *     <SkdxTourSpotlight />
- *     <SkdxTourContent>
- *       <SkdxTourTitle>Your inbox</SkdxTourTitle>
- *       <SkdxTourDescription>Everything lands here first.</SkdxTourDescription>
- *       <SkdxTourProgressText />
- *       <SkdxTourPrevTrigger>Back</SkdxTourPrevTrigger>
- *       <SkdxTourNextTrigger>Next</SkdxTourNextTrigger>
- *       <SkdxTourSkipTrigger>Skip</SkdxTourSkipTrigger>
- *     </SkdxTourContent>
- *   </SkdxTourPortal>
  * </SkdxTour>
  * ```
  */
 type __VLS_Props = {
-    /**
-     * The ordered steps. Required: a tour with no steps has nothing to show,
-     * and the array's length is what "Step 2 of 5" counts against.
-     */
+    /** Ordered steps; its length counts against "Step 2 of 5". */
     steps: TourStep[];
-    /**
-     * Whether the tour is running, for controlled usage via `v-model:open`.
-     * @default undefined — uncontrolled, the tour tracks its own running state.
+    /** Whether tour is running; controlled usage via `v-model:open`.
+     * @default undefined
      */
     open?: boolean;
-    /**
-     * Whether the tour is running on mount, for uncontrolled usage.
-     * @default false — the tour waits for a trigger, so a first-visit tour is started deliberately rather than on every render.
+    /** Whether tour runs on mount for uncontrolled usage.
+     * @default false
      */
     defaultOpen?: boolean;
-    /**
-     * Index of the active step, for controlled usage via `v-model:step`.
-     * @default undefined — uncontrolled, the tour tracks the index itself.
+    /** Active step index; controlled usage via `v-model:step`.
+     * @default undefined
      */
     step?: number;
-    /**
-     * Index the tour starts on, for uncontrolled usage.
-     * @default 0 — useful to raise when resuming a tour the user abandoned.
+    /** Starting step index for uncontrolled usage.
+     * @default 0
      */
     defaultStep?: number;
-    /**
-     * Whether pressing Escape ends the tour the same way skipping does.
-     * @default true — Escape must always get a user out of a modal layer; set `false` only when the tour genuinely cannot be abandoned, and then provide another way out.
+    /** Escape ends tour like skipping does.
+     * @default true
      */
     closeOnEscape?: boolean;
-    /**
-     * Whether a pointer-down outside the content skips the tour.
-     * @default false — during a tour an outside click is almost always a misclick on the very UI being explained, and losing the tour to it is worse than ignoring it.
+    /** Page behind tour is unreachable; aria-modal and inert applied.
+     * @default false
+     */
+    preventInteraction?: boolean;
+    /** Whether a pointer-down outside the content skips the tour.
+     * @default false
      */
     closeOnInteractOutside?: boolean;
-    /**
-     * Pixels of breathing room added around the target on every side when the
-     * spotlight geometry is published.
-     * @default 8 — the cutout clears the target's own focus ring instead of clipping it.
+    /** Spotlight padding around target on all sides.
+     * @default 8
      */
     spotlightPadding?: number;
-    /**
-     * How long, in milliseconds, to keep polling for a step's target before
-     * giving up on it. Covers targets that mount late — a lazy route, a panel
-     * that opens on the previous step's action.
-     * @default 2000 — long enough for a lazy chunk to land, short enough that a genuinely absent target does not strand the tour.
+    /** Spotlight corner radius; published as `--skdx-tour-radius`.
+     * @default 0
+     */
+    spotlightRadius?: number;
+    /** Scroll target into view before positioning panel.
+     * @default { block: 'center', inline: 'center' }
+     */
+    scrollIntoView?: boolean | ScrollIntoViewOptions;
+    /** Milliseconds to poll for missing step target.
+     * @default 2000
      */
     targetTimeout?: number;
-    /**
-     * Builds the string announced to screen readers on every step change.
-     * Override it to translate, or to include more of the step than its title.
-     * @default undefined — announces the step's `title` (when set) followed by "Step {n} of {total}", in English.
+    /** Arrow keys step forward/back while content focused.
+     * @default false
+     */
+    keyboardNavigation?: boolean;
+    /** Builds the string announced to screen readers on every step change.
+     * @default undefined
      */
     getAnnouncement?: (step: TourStep, index: number, total: number) => string;
+    /** Whether the derived anatomy includes a spotlight cutout.
+     * @default true
+     */
+    spotlight?: boolean;
+    /** Derive `SkdxTourProgressText` ("Step 2 of 5").
+     * @default true
+     */
+    showProgress?: boolean;
+    /** Whether the derived anatomy includes a skip trigger part.
+     * @default true
+     */
+    showSkip?: boolean;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -106,28 +85,37 @@ type __VLS_Slots = {} & {
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (open: boolean) => any;
     "open-change": (open: boolean) => any;
+    "open-change-complete": (open: boolean) => any;
     complete: () => any;
     "update:step": (step: number) => any;
-    "step-change": (step: number) => any;
+    "step-change": (step: number, id: string | undefined) => any;
     skip: () => any;
     "step-target-missing": (index: number, step: TourStep) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:open"?: ((open: boolean) => any) | undefined;
     "onOpen-change"?: ((open: boolean) => any) | undefined;
+    "onOpen-change-complete"?: ((open: boolean) => any) | undefined;
     onComplete?: (() => any) | undefined;
     "onUpdate:step"?: ((step: number) => any) | undefined;
-    "onStep-change"?: ((step: number) => any) | undefined;
+    "onStep-change"?: ((step: number, id: string | undefined) => any) | undefined;
     onSkip?: (() => any) | undefined;
     "onStep-target-missing"?: ((index: number, step: TourStep) => any) | undefined;
 }>, {
     open: boolean;
     defaultOpen: boolean;
     step: number;
+    scrollIntoView: boolean | ScrollIntoViewOptions;
+    spotlight: boolean;
+    showProgress: boolean;
+    showSkip: boolean;
     defaultStep: number;
     closeOnEscape: boolean;
+    preventInteraction: boolean;
     closeOnInteractOutside: boolean;
     spotlightPadding: number;
+    spotlightRadius: number;
     targetTimeout: number;
+    keyboardNavigation: boolean;
     getAnnouncement: (step: TourStep, index: number, total: number) => string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/tour/Tour.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const T=require("../utils/id.cjs"),D=require("../utils/popper.cjs"),d=require("../utils/clamp.cjs"),H=require("../utils/liveAnnouncer.cjs"),U=require("./context.cjs");let t=require("vue");var V=50,W=(0,t.defineComponent)({__name:"Tour",props:{steps:{},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},step:{default:void 0},defaultStep:{default:0},closeOnEscape:{type:Boolean,default:!0},closeOnInteractOutside:{type:Boolean,default:!1},spotlightPadding:{default:8},targetTimeout:{default:2e3},getAnnouncement:{type:Function,default:void 0}},emits:["update:open","open-change","update:step","step-change","complete","skip","step-target-missing"],setup(B,{emit:L}){const n=B,s=L,$=(0,t.ref)(null),i=(0,t.ref)(null),v=(0,t.ref)(null),g=(0,t.ref)(null),y=(0,t.ref)(n.defaultOpen),a=(0,t.computed)(()=>n.open??y.value),I=(0,t.ref)(n.defaultStep),o=(0,t.computed)(()=>n.step??I.value),R=(0,t.computed)(()=>n.steps),m=(0,t.computed)(()=>n.steps.length),h=(0,t.computed)(()=>n.steps[o.value]),q=(0,t.computed)(()=>i.value!==null&&h.value?.type!=="dialog");function w(e){e!==a.value&&(n.open===void 0&&(y.value=e),s("update:open",e),s("open-change",e))}function C(e){e!==o.value&&(n.step===void 0&&(I.value=e),s("update:step",e),s("step-change",e))}function _(e){C(d.clamp(e,0,Math.max(m.value-1,0)))}function x(){w(!1),s("complete")}function M(){w(!1),s("skip")}function E(){o.value>=m.value-1?x():_(o.value+1)}function N(){_(o.value-1)}function S(e){return e?typeof e=="string"?document.querySelector(e):(0,t.isRef)(e)?e.value:e:null}const P=(0,t.computed)(()=>h.value?.target);let O;function f(){clearInterval(O),O=void 0}function k(){if(f(),!a.value)return;const e=P.value;if(!e){i.value=null;return}const l=p=>{p.scrollIntoView?.({block:"center",inline:"center"}),i.value=p},r=S(e);if(r){l(r);return}i.value=null;const u=Date.now(),c=o.value;O=setInterval(()=>{const p=S(e);if(p){f(),l(p);return}Date.now()-u<n.targetTimeout||(f(),s("step-target-missing",c,n.steps[c]),E())},V)}(0,t.watch)([a,o,P,()=>n.targetTimeout],k,{flush:"post"}),(0,t.onMounted)(k),(0,t.onBeforeUnmount)(f),(0,t.watch)(i,(e,l,r)=>{if(!e){v.value=null;return}const u=()=>{v.value=e.getBoundingClientRect()};u(),window.addEventListener("scroll",u,!0),window.addEventListener("resize",u),r(()=>{window.removeEventListener("scroll",u,!0),window.removeEventListener("resize",u)})},{flush:"post"});function b(e,l,r){return[e.title,`Step ${l+1} of ${r}`].filter(Boolean).join(", ")}function A(){if(!a.value)return;const e=n.steps[o.value];e&&H.announce((n.getAnnouncement??b)(e,o.value,n.steps.length))}(0,t.watch)([a,o],A,{flush:"post"}),(0,t.onMounted)(A);const z=(0,t.computed)(()=>{const e=v.value;if(!e)return{};const l=window.innerWidth,r=window.innerHeight,u=d.clamp(e.left-n.spotlightPadding,0,l),c=d.clamp(e.top-n.spotlightPadding,0,r);return{"--skdx-tour-x":`${u}px`,"--skdx-tour-y":`${c}px`,"--skdx-tour-width":`${d.clamp(e.width+n.spotlightPadding*2,0,l-u)}px`,"--skdx-tour-height":`${d.clamp(e.height+n.spotlightPadding*2,0,r-c)}px`}});return(0,t.watchEffect)(()=>{g.value=q.value?i.value:null}),(0,t.provide)(D.POPPER_CONTEXT,{anchor:g,setAnchor:e=>{g.value=e}}),(0,t.provide)(U.TOUR_CONTEXT,{steps:R,step:o,total:m,activeStep:h,open:a,anchored:q,target:i,spotlightStyle:z,contentRef:$,contentId:T.nextId("tour-content"),titleId:T.nextId("tour-title"),descriptionId:T.nextId("tour-description"),closeOnEscape:(0,t.computed)(()=>n.closeOnEscape),closeOnInteractOutside:(0,t.computed)(()=>n.closeOnInteractOutside),setOpen:w,goTo:_,next:E,prev:N,skip:M,complete:x}),(e,l)=>(0,t.renderSlot)(e.$slots,"default")}});exports.default=W;
+const I=require("../utils/id.cjs"),F=require("../utils/useOpenChangeComplete.cjs"),G=require("../utils/popper.cjs"),d=require("../utils/clamp.cjs"),J=require("../utils/liveAnnouncer.cjs"),K=require("./context.cjs"),Q=require("./TourAnatomy.vue.cjs");let t=require("vue");var Y=50,Z=(0,t.defineComponent)({__name:"Tour",props:{steps:{},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},step:{default:void 0},defaultStep:{default:0},closeOnEscape:{type:Boolean,default:!0},preventInteraction:{type:Boolean,default:!1},closeOnInteractOutside:{type:Boolean,default:!1},spotlightPadding:{default:8},spotlightRadius:{default:0},scrollIntoView:{type:Boolean,default:void 0},targetTimeout:{default:2e3},keyboardNavigation:{type:Boolean,default:!1},getAnnouncement:{type:Function,default:void 0},spotlight:{type:Boolean,default:!0},showProgress:{type:Boolean,default:!0},showSkip:{type:Boolean,default:!0}},emits:["update:open","open-change","open-change-complete","update:step","step-change","complete","skip","step-target-missing"],setup(f,{emit:$}){const n=f;function L(e,o){if(o===!1)return;const l=o===!0||o===void 0?{block:"center",inline:"center"}:o,s=window.matchMedia?.("(prefers-reduced-motion: reduce)").matches??!1;e.scrollIntoView?.(s?{...l,behavior:"auto"}:l)}const r=$,k=(0,t.ref)(null),N=I.nextId("tour-title"),V=I.nextId("tour-description"),_=(0,t.ref)(!1),q=(0,t.ref)(!1),a=(0,t.ref)(null),w=(0,t.ref)(null),y=(0,t.ref)(null),B=(0,t.ref)(n.defaultOpen),i=(0,t.computed)(()=>n.open??B.value);F.useOpenChangeComplete(i,k,e=>r("open-change-complete",e));const S=(0,t.ref)(n.defaultStep),u=(0,t.computed)(()=>n.step??S.value),D=(0,t.computed)(()=>n.steps),v=(0,t.computed)(()=>n.steps.length),g=(0,t.computed)(()=>n.steps[u.value]),x=(0,t.computed)(()=>a.value!==null&&g.value?.type!=="dialog"),M=(0,t.computed)(()=>g.value?.backdrop!==!1);function O(e){e!==i.value&&(n.open===void 0&&(B.value=e),r("update:open",e),r("open-change",e))}function H(e){e!==u.value&&(n.step===void 0&&(S.value=e),r("update:step",e),r("step-change",e,n.steps[e]?.id))}function h(e){H(d.clamp(e,0,Math.max(v.value-1,0)))}function E(){O(!1),r("complete")}function P(){O(!1),r("skip")}function z(){u.value>=v.value-1?E():h(u.value+1)}function U(){u.value>=v.value-1?P():h(u.value+1)}function W(){h(u.value-1)}function b(e){return e?typeof e=="string"?document.querySelector(e):(0,t.isRef)(e)?e.value:e:null}const A=(0,t.computed)(()=>g.value?.target);let T;function m(){clearInterval(T),T=void 0}function C(){if(m(),!i.value)return;const e=A.value;if(!e){a.value=null;return}const o=p=>{L(p,n.scrollIntoView),a.value=p},l=b(e);if(l){o(l);return}a.value=null;const s=Date.now(),c=u.value;T=setInterval(()=>{const p=b(e);if(p){m(),o(p);return}Date.now()-s<n.targetTimeout||(m(),r("step-target-missing",c,n.steps[c]),U())},Y)}(0,t.watch)([i,u,A,()=>n.targetTimeout],C,{flush:"post"}),(0,t.onMounted)(C),(0,t.onBeforeUnmount)(m),(0,t.watch)(a,(e,o,l)=>{if(!e){w.value=null;return}const s=()=>{w.value=e.getBoundingClientRect()};s(),window.addEventListener("scroll",s,!0),window.addEventListener("resize",s),l(()=>{window.removeEventListener("scroll",s,!0),window.removeEventListener("resize",s)})},{flush:"post"});function X(e,o,l){return[e.title,`Step ${o+1} of ${l}`].filter(Boolean).join(", ")}function R(){if(!i.value)return;const e=n.steps[u.value];e&&J.announce((n.getAnnouncement??X)(e,u.value,n.steps.length))}(0,t.watch)([i,u],R,{flush:"post"}),(0,t.onMounted)(R);const j=(0,t.computed)(()=>{const e=w.value;if(!e)return{};const o=window.innerWidth,l=window.innerHeight,s=d.clamp(e.left-n.spotlightPadding,0,o),c=d.clamp(e.top-n.spotlightPadding,0,l);return{"--skdx-tour-x":`${s}px`,"--skdx-tour-y":`${c}px`,"--skdx-tour-width":`${d.clamp(e.width+n.spotlightPadding*2,0,o-s)}px`,"--skdx-tour-height":`${d.clamp(e.height+n.spotlightPadding*2,0,l-c)}px`,"--skdx-tour-radius":`${n.spotlightRadius}px`}});return(0,t.watchEffect)(()=>{y.value=x.value?a.value:null}),(0,t.provide)(G.POPPER_CONTEXT,{anchor:y,setAnchor:e=>{y.value=e}}),(0,t.provide)(K.TOUR_CONTEXT,{steps:D,step:u,total:v,activeStep:g,open:i,anchored:x,hasBackdrop:M,target:a,spotlightStyle:j,contentRef:k,contentId:I.nextId("tour-content"),titleId:N,descriptionId:V,hasTitle:(0,t.computed)(()=>_.value),setHasTitle:e=>{_.value=e},hasDescription:(0,t.computed)(()=>q.value),setHasDescription:e=>{q.value=e},closeOnEscape:(0,t.computed)(()=>n.closeOnEscape),preventInteraction:(0,t.computed)(()=>n.preventInteraction),closeOnInteractOutside:(0,t.computed)(()=>n.closeOnInteractOutside),keyboardNavigation:(0,t.computed)(()=>n.keyboardNavigation),setOpen:O,goTo:h,next:z,prev:W,skip:P,complete:E}),(e,o)=>(0,t.renderSlot)(e.$slots,"default",{},()=>[(0,t.createVNode)(Q.default,{spotlight:f.spotlight,"show-progress":f.showProgress,"show-skip":f.showSkip},null,8,["spotlight","show-progress","show-skip"])])}});exports.default=Z;

package/dist/tour/Tour.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{nextId as e}from"../utils/id.js";import{POPPER_CONTEXT as t}from"../utils/popper.js";import{clamp as n}from"../utils/clamp.js";import{announce as o}from"../utils/liveAnnouncer.js";import{TOUR_CONTEXT as l}from"./context.js";import{computed as s,defineComponent as u,isRef as a,onBeforeUnmount as i,onMounted as r,provide as p,ref as d,renderSlot as c,watch as v,watchEffect as f}from"vue";var g=/* @__PURE__ */u({__name:"Tour",props:{steps:{},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},step:{default:void 0},defaultStep:{default:0},closeOnEscape:{type:Boolean,default:!0},closeOnInteractOutside:{type:Boolean,default:!1},spotlightPadding:{default:8},targetTimeout:{default:2e3},getAnnouncement:{type:Function,default:void 0}},emits:["update:open","open-change","update:step","step-change","complete","skip","step-target-missing"],setup(u,{emit:g}){const m=u,h=g,w=d(null),O=d(null),x=d(null),E=d(null),y=d(m.defaultOpen),I=s(()=>m.open??y.value),T=d(m.defaultStep),k=s(()=>m.step??T.value),P=s(()=>m.steps),B=s(()=>m.steps.length),S=s(()=>m.steps[k.value]),$=s(()=>null!==O.value&&"dialog"!==S.value?.type);function j(e){e!==I.value&&(void 0===m.open&&(y.value=e),h("update:open",e),h("open-change",e))}function R(e){!function(e){e!==k.value&&(void 0===m.step&&(T.value=e),h("update:step",e),h("step-change",e))}(n(e,0,Math.max(B.value-1,0)))}function A(){j(!1),h("complete")}function C(){k.value>=B.value-1?A():R(k.value+1)}function L(e){return e?"string"==typeof e?document.querySelector(e):a(e)?e.value:e:null}const _=s(()=>S.value?.target);let z;function D(){clearInterval(z),z=void 0}function M(){if(D(),!I.value)return;const e=_.value;if(!e)return void(O.value=null);const t=e=>{e.scrollIntoView?.({block:"center",inline:"center"}),O.value=e},n=L(e);if(n)return void t(n);O.value=null;const o=Date.now(),l=k.value;z=setInterval(()=>{const n=L(e);if(n)return D(),void t(n);Date.now()-o<m.targetTimeout||(D(),h("step-target-missing",l,m.steps[l]),C())},50)}function N(e,t,n){return[e.title,`Step ${t+1} of ${n}`].filter(Boolean).join(", ")}function U(){if(!I.value)return;const e=m.steps[k.value];e&&o((m.getAnnouncement??N)(e,k.value,m.steps.length))}v([I,k,_,()=>m.targetTimeout],M,{flush:"post"}),r(M),i(D),v(O,(e,t,n)=>{if(!e)return void(x.value=null);const o=()=>{x.value=e.getBoundingClientRect()};o(),window.addEventListener("scroll",o,!0),window.addEventListener("resize",o),n(()=>{window.removeEventListener("scroll",o,!0),window.removeEventListener("resize",o)})},{flush:"post"}),v([I,k],U,{flush:"post"}),r(U);const X=s(()=>{const e=x.value;if(!e)return{};const t=window.innerWidth,o=window.innerHeight,l=n(e.left-m.spotlightPadding,0,t),s=n(e.top-m.spotlightPadding,0,o);return{"--skdx-tour-x":`${l}px`,"--skdx-tour-y":`${s}px`,"--skdx-tour-width":`${n(e.width+2*m.spotlightPadding,0,t-l)}px`,"--skdx-tour-height":`${n(e.height+2*m.spotlightPadding,0,o-s)}px`}});return f(()=>{E.value=$.value?O.value:null}),p(t,{anchor:E,setAnchor:e=>{E.value=e}}),p(l,{steps:P,step:k,total:B,activeStep:S,open:I,anchored:$,target:O,spotlightStyle:X,contentRef:w,contentId:e("tour-content"),titleId:e("tour-title"),descriptionId:e("tour-description"),closeOnEscape:s(()=>m.closeOnEscape),closeOnInteractOutside:s(()=>m.closeOnInteractOutside),setOpen:j,goTo:R,next:C,prev:function(){R(k.value-1)},skip:function(){j(!1),h("skip")},complete:A}),(e,t)=>c(e.$slots,"default")}});export{g as default};
+import{nextId as e}from"../utils/id.js";import{useOpenChangeComplete as t}from"../utils/useOpenChangeComplete.js";import{POPPER_CONTEXT as o}from"../utils/popper.js";import{clamp as n}from"../utils/clamp.js";import{announce as a}from"../utils/liveAnnouncer.js";import{TOUR_CONTEXT as s}from"./context.js";import l from"./TourAnatomy.vue.js";import{computed as i,createVNode as u,defineComponent as r,isRef as p,onBeforeUnmount as d,onMounted as c,provide as v,ref as f,renderSlot as g,watch as h,watchEffect as m}from"vue";var w=/* @__PURE__ */r({__name:"Tour",props:{steps:{},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},step:{default:void 0},defaultStep:{default:0},closeOnEscape:{type:Boolean,default:!0},preventInteraction:{type:Boolean,default:!1},closeOnInteractOutside:{type:Boolean,default:!1},spotlightPadding:{default:8},spotlightRadius:{default:0},scrollIntoView:{type:Boolean,default:void 0},targetTimeout:{default:2e3},keyboardNavigation:{type:Boolean,default:!1},getAnnouncement:{type:Function,default:void 0},spotlight:{type:Boolean,default:!0},showProgress:{type:Boolean,default:!0},showSkip:{type:Boolean,default:!0}},emits:["update:open","open-change","open-change-complete","update:step","step-change","complete","skip","step-target-missing"],setup(r,{emit:w}){const y=r,k=w,O=f(null),x=e("tour-title"),I=e("tour-description"),B=f(!1),T=f(!1),E=f(null),P=f(null),S=f(null),j=f(y.defaultOpen),C=i(()=>y.open??j.value);t(C,O,e=>k("open-change-complete",e));const $=f(y.defaultStep),R=i(()=>y.step??$.value),b=i(()=>y.steps),N=i(()=>y.steps.length),A=i(()=>y.steps[R.value]),D=i(()=>null!==E.value&&"dialog"!==A.value?.type),L=i(()=>!1!==A.value?.backdrop);function V(e){e!==C.value&&(void 0===y.open&&(j.value=e),k("update:open",e),k("open-change",e))}function _(e){!function(e){e!==R.value&&(void 0===y.step&&($.value=e),k("update:step",e),k("step-change",e,y.steps[e]?.id))}(n(e,0,Math.max(N.value-1,0)))}function H(){V(!1),k("complete")}function M(){V(!1),k("skip")}function z(e){return e?"string"==typeof e?document.querySelector(e):p(e)?e.value:e:null}const U=i(()=>A.value?.target);let X;function q(){clearInterval(X),X=void 0}function F(){if(q(),!C.value)return;const e=U.value;if(!e)return void(E.value=null);const t=e=>{(function(e,t){if(!1===t)return;const o=!0===t||void 0===t?{block:"center",inline:"center"}:t,n=window.matchMedia?.("(prefers-reduced-motion: reduce)").matches??!1;e.scrollIntoView?.(n?{...o,behavior:"auto"}:o)})(e,y.scrollIntoView),E.value=e},o=z(e);if(o)return void t(o);E.value=null;const n=Date.now(),a=R.value;X=setInterval(()=>{const o=z(e);if(o)return q(),void t(o);Date.now()-n<y.targetTimeout||(q(),k("step-target-missing",a,y.steps[a]),R.value>=N.value-1?M():_(R.value+1))},50)}function W(e,t,o){return[e.title,`Step ${t+1} of ${o}`].filter(Boolean).join(", ")}function G(){if(!C.value)return;const e=y.steps[R.value];e&&a((y.getAnnouncement??W)(e,R.value,y.steps.length))}h([C,R,U,()=>y.targetTimeout],F,{flush:"post"}),c(F),d(q),h(E,(e,t,o)=>{if(!e)return void(P.value=null);const n=()=>{P.value=e.getBoundingClientRect()};n(),window.addEventListener("scroll",n,!0),window.addEventListener("resize",n),o(()=>{window.removeEventListener("scroll",n,!0),window.removeEventListener("resize",n)})},{flush:"post"}),h([C,R],G,{flush:"post"}),c(G);const J=i(()=>{const e=P.value;if(!e)return{};const t=window.innerWidth,o=window.innerHeight,a=n(e.left-y.spotlightPadding,0,t),s=n(e.top-y.spotlightPadding,0,o);return{"--skdx-tour-x":`${a}px`,"--skdx-tour-y":`${s}px`,"--skdx-tour-width":`${n(e.width+2*y.spotlightPadding,0,t-a)}px`,"--skdx-tour-height":`${n(e.height+2*y.spotlightPadding,0,o-s)}px`,"--skdx-tour-radius":`${y.spotlightRadius}px`}});return m(()=>{S.value=D.value?E.value:null}),v(o,{anchor:S,setAnchor:e=>{S.value=e}}),v(s,{steps:b,step:R,total:N,activeStep:A,open:C,anchored:D,hasBackdrop:L,target:E,spotlightStyle:J,contentRef:O,contentId:e("tour-content"),titleId:x,descriptionId:I,hasTitle:i(()=>B.value),setHasTitle:e=>{B.value=e},hasDescription:i(()=>T.value),setHasDescription:e=>{T.value=e},closeOnEscape:i(()=>y.closeOnEscape),preventInteraction:i(()=>y.preventInteraction),closeOnInteractOutside:i(()=>y.closeOnInteractOutside),keyboardNavigation:i(()=>y.keyboardNavigation),setOpen:V,goTo:_,next:function(){R.value>=N.value-1?H():_(R.value+1)},prev:function(){_(R.value-1)},skip:M,complete:H}),(e,t)=>g(e.$slots,"default",{},()=>[u(l,{spotlight:r.spotlight,"show-progress":r.showProgress,"show-skip":r.showSkip},null,8,["spotlight","show-progress","show-skip"])])}});export{w as default};

package/dist/tour/TourActions.vue.cjs

@@ -0,0 +1 @@
+const e=require("./TourActions.vue_vue_type_script_setup_true_lang.cjs");var u=e.default;exports.default=u;

package/dist/tour/TourActions.vue.d.cts

@@ -0,0 +1,17 @@
+/**
+ * The row holding tour navigation triggers. Purely presentational — no role or label.
+ * Content is already the dialog with a name; buttons name themselves.
+ */
+type __VLS_Props = {};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/tour/TourActions.vue.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The row holding tour navigation triggers. Purely presentational — no role or label.
+ * Content is already the dialog with a name; buttons name themselves.
+ */
+type __VLS_Props = {};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/tour/TourActions.vue.js

@@ -0,0 +1 @@
+import t from"./TourActions.vue_vue_type_script_setup_true_lang.js";var e=t;export{e as default};

package/dist/tour/TourActions.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+let e=require("vue");var r={class:"skdx-tour__actions","data-part":"actions"},_=(0,e.defineComponent)({__name:"TourActions",setup(o){return(t,a)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",r,[(0,e.renderSlot)(t.$slots,"default")]))}});exports.default=_;

package/dist/tour/TourActions.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{createElementBlock as a,defineComponent as e,openBlock as t,renderSlot as o}from"vue";var s={class:"skdx-tour__actions","data-part":"actions"},n=/* @__PURE__ */e({__name:"TourActions",setup:e=>(e,n)=>(t(),a("div",s,[o(e.$slots,"default")]))});export{n as default};

package/dist/tour/TourAnatomy.vue.cjs

@@ -0,0 +1 @@
+const e=require("./TourAnatomy.vue_vue_type_script_setup_true_lang.cjs");var u=e.default;exports.default=u;

package/dist/tour/TourAnatomy.vue.d.cts

@@ -0,0 +1,16 @@
+/**
+ * Tour anatomy: Portal → Backdrop, Spotlight (if enabled), Content (Title, Description, ProgressText, Actions).
+ * CloseTrigger always shown; Skip gated on `showSkip`. No Trigger or Arrow.
+ * @internal
+ */
+type __VLS_Props = {
+    spotlight?: boolean;
+    showProgress?: boolean;
+    showSkip?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    spotlight: boolean;
+    showProgress: boolean;
+    showSkip: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/tour/TourAnatomy.vue.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Tour anatomy: Portal → Backdrop, Spotlight (if enabled), Content (Title, Description, ProgressText, Actions).
+ * CloseTrigger always shown; Skip gated on `showSkip`. No Trigger or Arrow.
+ * @internal
+ */
+type __VLS_Props = {
+    spotlight?: boolean;
+    showProgress?: boolean;
+    showSkip?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    spotlight: boolean;
+    showProgress: boolean;
+    showSkip: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/tour/TourAnatomy.vue.js

@@ -0,0 +1 @@
+import t from"./TourAnatomy.vue_vue_type_script_setup_true_lang.js";var e=t;export{e as default};

package/dist/tour/TourAnatomy.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const u=require("./context.cjs"),i=require("./TourActions.vue.cjs"),l=require("./TourBackdrop.vue.cjs"),a=require("./TourCloseTrigger.vue.cjs"),n=require("./TourContent.vue.cjs"),c=require("./TourDescription.vue.cjs"),d=require("./TourNextTrigger.vue.cjs"),s=require("./TourPortal.vue.cjs"),f=require("./TourPrevTrigger.vue.cjs"),T=require("./TourProgressText.vue.cjs"),p=require("./TourSkipTrigger.vue.cjs"),q=require("./TourSpotlight.vue.cjs"),k=require("./TourTitle.vue.cjs");let e=require("vue");var _=(0,e.defineComponent)({__name:"TourAnatomy",props:{spotlight:{type:Boolean,default:!0},showProgress:{type:Boolean,default:!0},showSkip:{type:Boolean,default:!0}},setup(o){const r=(0,e.inject)(u.TOUR_CONTEXT);if(!r)throw new Error("TourAnatomy must be used within SkdxTour.");return(x,t)=>((0,e.openBlock)(),(0,e.createBlock)(s.default,null,{default:(0,e.withCtx)(()=>[(0,e.createVNode)(l.default),o.spotlight?((0,e.openBlock)(),(0,e.createBlock)(q.default,{key:0})):(0,e.createCommentVNode)("",!0),(0,e.createVNode)(n.default,null,{default:(0,e.withCtx)(()=>[(0,e.unref)(r).activeStep.value?.title?((0,e.openBlock)(),(0,e.createBlock)(k.default,{key:0},{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)((0,e.unref)(r).activeStep.value.title),1)]),_:1})):(0,e.createCommentVNode)("",!0),(0,e.unref)(r).activeStep.value?.description?((0,e.openBlock)(),(0,e.createBlock)(c.default,{key:1},{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)((0,e.unref)(r).activeStep.value.description),1)]),_:1})):(0,e.createCommentVNode)("",!0),o.showProgress?((0,e.openBlock)(),(0,e.createBlock)(T.default,{key:2})):(0,e.createCommentVNode)("",!0),(0,e.createVNode)(i.default,null,{default:(0,e.withCtx)(()=>[(0,e.createVNode)(f.default,null,{default:(0,e.withCtx)(()=>[...t[0]||(t[0]=[(0,e.createTextVNode)("Previous",-1)])]),_:1}),(0,e.createVNode)(d.default,null,{default:(0,e.withCtx)(()=>[...t[1]||(t[1]=[(0,e.createTextVNode)("Next",-1)])]),_:1}),o.showSkip?((0,e.openBlock)(),(0,e.createBlock)(p.default,{key:0},{default:(0,e.withCtx)(()=>[...t[2]||(t[2]=[(0,e.createTextVNode)("Skip",-1)])]),_:1})):(0,e.createCommentVNode)("",!0),(0,e.createVNode)(a.default,{"aria-label":"Close tour"},{default:(0,e.withCtx)(()=>[...t[3]||(t[3]=[(0,e.createTextVNode)("Close",-1)])]),_:1})]),_:1})]),_:1})]),_:1}))}});exports.default=_;

package/dist/tour/TourAnatomy.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{TOUR_CONTEXT as e}from"./context.js";import o from"./TourActions.vue.js";import t from"./TourBackdrop.vue.js";import r from"./TourCloseTrigger.vue.js";import u from"./TourContent.vue.js";import s from"./TourDescription.vue.js";import a from"./TourNextTrigger.vue.js";import i from"./TourPortal.vue.js";import l from"./TourPrevTrigger.vue.js";import p from"./TourProgressText.vue.js";import m from"./TourSkipTrigger.vue.js";import f from"./TourSpotlight.vue.js";import n from"./TourTitle.vue.js";import{createBlock as T,createCommentVNode as v,createTextVNode as d,createVNode as c,defineComponent as g,inject as j,openBlock as k,toDisplayString as _,unref as y,withCtx as S}from"vue";var h=/* @__PURE__ */g({__name:"TourAnatomy",props:{spotlight:{type:Boolean,default:!0},showProgress:{type:Boolean,default:!0},showSkip:{type:Boolean,default:!0}},setup(g){const h=j(e);if(!h)throw new Error("TourAnatomy must be used within SkdxTour.");return(e,j)=>(k(),T(i,null,{default:S(()=>[c(t),g.spotlight?(k(),T(f,{key:0})):v("",!0),c(u,null,{default:S(()=>[y(h).activeStep.value?.title?(k(),T(n,{key:0},{default:S(()=>[d(_(y(h).activeStep.value.title),1)]),_:1})):v("",!0),y(h).activeStep.value?.description?(k(),T(s,{key:1},{default:S(()=>[d(_(y(h).activeStep.value.description),1)]),_:1})):v("",!0),g.showProgress?(k(),T(p,{key:2})):v("",!0),c(o,null,{default:S(()=>[c(l,null,{default:S(()=>[...j[0]||(j[0]=[d("Previous",-1)])]),_:1}),c(a,null,{default:S(()=>[...j[1]||(j[1]=[d("Next",-1)])]),_:1}),g.showSkip?(k(),T(m,{key:0},{default:S(()=>[...j[2]||(j[2]=[d("Skip",-1)])]),_:1})):v("",!0),c(r,{"aria-label":"Close tour"},{default:S(()=>[...j[3]||(j[3]=[d("Close",-1)])]),_:1})]),_:1})]),_:1})]),_:1}))}});export{h as default};

package/dist/tour/TourArrow.vue.d.cts

@@ -1,11 +1,7 @@
 /**
- * Optional arrow pointing from `SkdxTourContent` back at the step's target,
- * self-positioning on the edge facing it. Must be rendered inside
- * `SkdxTourContent`.
- *
- * Renders nothing on a step that is centred — one with no target, or with
- * `type: 'dialog'`. There is nothing for it to point at, and the underlying
- * popper arrow has no positioning context to read on that branch.
+ * Optional arrow pointing from `SkdxTourContent` at the step's target, self-positioning.
+ * Renders nothing on centred steps (no target or `type: 'dialog'`).
+ * Must be rendered inside `SkdxTourContent`.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

package/dist/tour/TourArrow.vue.d.ts

@@ -1,11 +1,7 @@
 /**
- * Optional arrow pointing from `SkdxTourContent` back at the step's target,
- * self-positioning on the edge facing it. Must be rendered inside
- * `SkdxTourContent`.
- *
- * Renders nothing on a step that is centred — one with no target, or with
- * `type: 'dialog'`. There is nothing for it to point at, and the underlying
- * popper arrow has no positioning context to read on that branch.
+ * Optional arrow pointing from `SkdxTourContent` at the step's target, self-positioning.
+ * Renders nothing on centred steps (no target or `type: 'dialog'`).
+ * Must be rendered inside `SkdxTourContent`.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

package/dist/tour/TourBackdrop.vue.d.cts

@@ -1,15 +1,7 @@
 /**
- * The dimming layer behind the tour, carrying the spotlight geometry as the
- * custom properties `--skdx-tour-x` / `-y` / `-width` / `-height` (already
- * padded by `spotlightPadding` 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 `SkdxTourSpotlight` — with no measuring in JavaScript.
- *
- * Decorative and `aria-hidden`: the active step is announced through
- * `SkdxTourContent`, not through the backdrop. Exposes `data-state`
- * (`open`/`closed`) for animation and unmounts with the tour unless
- * `forceMount` is set. Must be used inside `SkdxTour`.
+ * Dimming layer behind tour with spotlight geometry as custom properties
+ * (x/y/width/height). No JS measuring; hole drawable with CSS clip-path/radial-gradient.
+ * Decorative, aria-hidden; active step announced via Content. Use inside SkdxTour.
  *
  * @example
  * ```css

package/dist/tour/TourBackdrop.vue.d.ts

@@ -1,15 +1,7 @@
 /**
- * The dimming layer behind the tour, carrying the spotlight geometry as the
- * custom properties `--skdx-tour-x` / `-y` / `-width` / `-height` (already
- * padded by `spotlightPadding` 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 `SkdxTourSpotlight` — with no measuring in JavaScript.
- *
- * Decorative and `aria-hidden`: the active step is announced through
- * `SkdxTourContent`, not through the backdrop. Exposes `data-state`
- * (`open`/`closed`) for animation and unmounts with the tour unless
- * `forceMount` is set. Must be used inside `SkdxTour`.
+ * Dimming layer behind tour with spotlight geometry as custom properties
+ * (x/y/width/height). No JS measuring; hole drawable with CSS clip-path/radial-gradient.
+ * Decorative, aria-hidden; active step announced via Content. Use inside SkdxTour.
  *
  * @example
  * ```css

package/dist/tour/TourBackdrop.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const a=require("./context.cjs");let e=require("vue");var u=["data-state"],n=(0,e.defineComponent)({__name:"TourBackdrop",props:{forceMount:{type:Boolean,default:!1}},setup(r){const t=(0,e.inject)(a.TOUR_CONTEXT);if(!t)throw new Error("SkdxTourBackdrop must be used within SkdxTour.");return(o,d)=>r.forceMount||(0,e.unref)(t).open.value?((0,e.openBlock)(),(0,e.createElementBlock)("div",{key:0,class:"skdx-tour__backdrop","data-part":"backdrop","aria-hidden":"true","data-state":(0,e.unref)(t).open.value?"open":"closed",style:(0,e.normalizeStyle)((0,e.unref)(t).spotlightStyle.value)},[(0,e.renderSlot)(o.$slots,"default")],12,u)):(0,e.createCommentVNode)("",!0)}});exports.default=n;
+const a=require("./context.cjs");let e=require("vue");var u=["data-state"],n=(0,e.defineComponent)({__name:"TourBackdrop",props:{forceMount:{type:Boolean,default:!1}},setup(r){const t=(0,e.inject)(a.TOUR_CONTEXT);if(!t)throw new Error("SkdxTourBackdrop must be used within SkdxTour.");return(o,d)=>(0,e.unref)(t).hasBackdrop.value&&(r.forceMount||(0,e.unref)(t).open.value)?((0,e.openBlock)(),(0,e.createElementBlock)("div",{key:0,class:"skdx-tour__backdrop","data-part":"backdrop","aria-hidden":"true","data-state":(0,e.unref)(t).open.value?"open":"closed",style:(0,e.normalizeStyle)((0,e.unref)(t).spotlightStyle.value)},[(0,e.renderSlot)(o.$slots,"default")],12,u)):(0,e.createCommentVNode)("",!0)}});exports.default=n;

package/dist/tour/TourBackdrop.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{TOUR_CONTEXT as e}from"./context.js";import{createCommentVNode as t,createElementBlock as o,defineComponent as a,inject as r,normalizeStyle as s,openBlock as n,renderSlot as d,unref as l}from"vue";var u=["data-state"],p=/* @__PURE__ */a({__name:"TourBackdrop",props:{forceMount:{type:Boolean,default:!1}},setup(a){const p=r(e);if(!p)throw new Error("SkdxTourBackdrop must be used within SkdxTour.");return(e,r)=>a.forceMount||l(p).open.value?(n(),o("div",{key:0,class:"skdx-tour__backdrop","data-part":"backdrop","aria-hidden":"true","data-state":l(p).open.value?"open":"closed",style:s(l(p).spotlightStyle.value)},[d(e.$slots,"default")],12,u)):t("",!0)}});export{p as default};
+import{TOUR_CONTEXT as e}from"./context.js";import{createCommentVNode as a,createElementBlock as o,defineComponent as t,inject as r,normalizeStyle as s,openBlock as n,renderSlot as d,unref as l}from"vue";var u=["data-state"],p=/* @__PURE__ */t({__name:"TourBackdrop",props:{forceMount:{type:Boolean,default:!1}},setup(t){const p=r(e);if(!p)throw new Error("SkdxTourBackdrop must be used within SkdxTour.");return(e,r)=>l(p).hasBackdrop.value&&(t.forceMount||l(p).open.value)?(n(),o("div",{key:0,class:"skdx-tour__backdrop","data-part":"backdrop","aria-hidden":"true","data-state":l(p).open.value?"open":"closed",style:s(l(p).spotlightStyle.value)},[d(e.$slots,"default")],12,u)):a("",!0)}});export{p as default};

package/dist/tour/TourCloseTrigger.vue.d.cts

@@ -1,12 +1,7 @@
 /**
- * The dismiss affordance — the corner ✕. Ends the tour through the same path
- * as `SkdxTourSkipTrigger` and Escape: closes it and emits `skip`, never
- * `complete`. Abandoning a tour is abandoning it, whichever control did it.
- *
- * Distinct from `SkdxTourSkipTrigger` only in intent and placement, so give it
- * an `aria-label` — an icon-only button has no accessible name of its own.
- * Must be used inside `SkdxTour`.
- *
+ * Dismiss button — the corner ✕. Ends the tour via `skip` like the Escape key.
+ * Distinct from `SkdxTourSkipTrigger` only in visual placement; give it an
+ * `aria-label`. Must be used inside `SkdxTour`.
  * @example
  * ```vue
  * <SkdxTourCloseTrigger aria-label="Close tour">✕</SkdxTourCloseTrigger>

package/dist/tour/TourCloseTrigger.vue.d.ts

@@ -1,12 +1,7 @@
 /**
- * The dismiss affordance — the corner ✕. Ends the tour through the same path
- * as `SkdxTourSkipTrigger` and Escape: closes it and emits `skip`, never
- * `complete`. Abandoning a tour is abandoning it, whichever control did it.
- *
- * Distinct from `SkdxTourSkipTrigger` only in intent and placement, so give it
- * an `aria-label` — an icon-only button has no accessible name of its own.
- * Must be used inside `SkdxTour`.
- *
+ * Dismiss button — the corner ✕. Ends the tour via `skip` like the Escape key.
+ * Distinct from `SkdxTourSkipTrigger` only in visual placement; give it an
+ * `aria-label`. Must be used inside `SkdxTour`.
  * @example
  * ```vue
  * <SkdxTourCloseTrigger aria-label="Close tour">✕</SkdxTourCloseTrigger>

package/dist/tour/TourContent.vue.d.cts

@@ -1,80 +1,43 @@
 import { type Align, type PhysicalSide, type Side } from '../utils/popper.cjs';
 import { type FocusOutsideEvent, type InteractOutsideEvent } from '../utils/useDismiss.cjs';
+import { type AutoFocusEvent } from '../utils/useFocusTrap.cjs';
 /**
- * The active step's panel: `role="dialog"` with `aria-modal="true"`, labelled
- * by `SkdxTourTitle` and described by `SkdxTourDescription`, and `data-state`
- * (`open`/`closed`) plus `data-step` and `data-type`.
- *
- * 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
- * component's own `side`/`align`, which act as the tour-wide defaults.
- *
- * The same element is rendered on both branches, deliberately: a step change
- * that remounted the panel would strand the focus trap's listener on the old
- * node.
- *
- * 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 `closeOnEscape`; a pointer-down outside skips it
- * only when `closeOnInteractOutside`. Both are reported first — via
- * `escape-key-down` and `pointer-down-outside`/`interact-outside` — and
- * `event.preventDefault()` on any of them keeps the tour running. Arrow keys
- * are deliberately **not** handled: they belong to whatever the step is
- * pointing at. Must be used inside `SkdxTour`.
+ * Tour step panel: `role="dialog"` with `aria-modal="true"` when `preventInteraction`.
+ * Positioned against target or centered. Focus trapped; moves on step change.
+ * Focus enter/exit announced as `open-auto-focus` / `close-auto-focus` (preventable).
+ * Escape/pointer-outside reported but kept running via preventDefault().
  */
 type __VLS_Props = {
-    /**
-     * Preferred edge of the target to place the panel against, for steps that
-     * do not name their own `placement`.
-     * @default 'bottom' — below the target, which is where a walkthrough panel is least likely to cover what it is describing.
+    /** Preferred edge to place panel against target.
+     * @default 'bottom'
      */
     side?: Side;
-    /**
-     * Preferred alignment along that edge, for steps that do not name their
-     * own `align`.
+    /** Preferred alignment along that edge. Each step's own `align` overrides it.
      * @default 'center'
      */
     align?: Align;
-    /**
-     * Pixel gap between the panel and the target's edge.
-     * @default 8 — wide enough to clear the spotlight's default padding.
+    /** Pixel gap between panel and target edge.
+     * @default 8
      */
     sideOffset?: number;
-    /**
-     * Pixel offset along the alignment axis.
-     * @default 0 — aligned exactly as `align` says.
+    /** Pixel offset along the alignment axis.
+     * @default 0
      */
     alignOffset?: number;
-    /**
-     * Flip/shift to stay within the viewport instead of overflowing it.
-     * @default true — a panel explaining an element at the edge of the screen must still be readable.
+    /** Flip/shift to stay within the viewport instead of overflowing it.
+     * @default true
      */
     avoidCollisions?: boolean;
-    /**
-     * Minimum pixel distance to keep from the collision boundary. A number
-     * applies to every side; an object sets only the sides it names.
+    /** Minimum pixel distance to keep from the collision boundary.
      * @default 8
      */
     collisionPadding?: number | Partial<Record<PhysicalSide, number>>;
-    /**
-     * Element (or elements) collisions are measured against, instead of the
-     * panel's clipping ancestors.
-     * @default undefined — the panel's clipping ancestors.
+    /** Collision boundary element(s); defaults to panel ancestors.
+     * @default undefined
      */
     collisionBoundary?: Element | Element[] | null;
-    /**
-     * Keep the panel mounted even while the tour is closed, so an animation
-     * library can play an exit transition against `data-state="closed"`.
-     * @default false — the panel unmounts with the tour.
+    /** Keep panel mounted when closed for exit transitions.
+     * @default false
      */
     forceMount?: boolean;
 };
@@ -84,18 +47,22 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "focus-outside": (event: FocusOutsideEvent) => any;
+    "open-auto-focus": (event: AutoFocusEvent) => any;
+    "close-auto-focus": (event: AutoFocusEvent) => any;
     "escape-key-down": (event: KeyboardEvent) => any;
     "pointer-down-outside": (event: PointerEvent) => any;
     "interact-outside": (event: InteractOutsideEvent) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onFocus-outside"?: ((event: FocusOutsideEvent) => any) | undefined;
+    "onOpen-auto-focus"?: ((event: AutoFocusEvent) => any) | undefined;
+    "onClose-auto-focus"?: ((event: AutoFocusEvent) => any) | undefined;
     "onEscape-key-down"?: ((event: KeyboardEvent) => any) | undefined;
     "onPointer-down-outside"?: ((event: PointerEvent) => any) | undefined;
     "onInteract-outside"?: ((event: InteractOutsideEvent) => any) | undefined;
 }>, {
     forceMount: boolean;
-    side: Side;
     align: Align;
+    side: Side;
     sideOffset: number;
     alignOffset: number;
     avoidCollisions: boolean;