@skdx/vue 0.27.0 → 0.28.0

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

@@ -1,80 +1,43 @@
 import { type Align, type PhysicalSide, type Side } from '../utils/popper.js';
 import { type FocusOutsideEvent, type InteractOutsideEvent } from '../utils/useDismiss.js';
+import { type AutoFocusEvent } from '../utils/useFocusTrap.js';
 /**
- * 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;

package/dist/tour/TourContent.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const T=require("../utils/composeRefs.cjs"),g=require("../utils/useDismiss.cjs"),b=require("../utils/useFocusTrap.cjs"),y=require("../utils/popper.cjs"),_=require("./context.cjs"),k=require("./TourPositioner.vue.cjs");let e=require("vue");var C=["id","aria-labelledby","aria-describedby","data-state","data-step","data-type","data-centered","data-side","data-align"],q=(0,e.defineComponent)({__name:"TourContent",props:{side:{default:"bottom"},align:{default:"center"},sideOffset:{default:8},alignOffset:{default:0},avoidCollisions:{type:Boolean,default:!0},collisionPadding:{default:8},collisionBoundary:{default:void 0},forceMount:{type:Boolean,default:!1}},emits:["escape-key-down","pointer-down-outside","focus-outside","interact-outside"],setup(u,{emit:O}){const n=u,r=O,t=(0,e.inject)(_.TOUR_CONTEXT);if(!t)throw new Error("SkdxTourContent must be used within SkdxTour.");const s=(0,e.inject)(y.POPPER_CONTEXT);if(!s)throw new Error("SkdxTourContent must be used within SkdxTour.");const a=(0,e.ref)(null),l=(0,e.ref)(null),d=(0,e.shallowRef)({}),c=(0,e.shallowRef)({position:"absolute"}),f=(0,e.ref)("bottom"),p=(0,e.ref)("center"),h=T.composeRefs(a,t.contentRef);(0,e.provide)(_.TOUR_POSITION,{contentRef:a,arrowRef:l,style:d,arrowStyle:c,placedSide:f,placedAlign:p}),(0,e.provide)(y.ARROW_CONTEXT,{style:c,setArrowEl:o=>{l.value=o}});const v=(0,e.ref)(0);(0,e.watch)(()=>s.anchor.value,()=>{v.value+=1});const i=(0,e.computed)(()=>({side:t.activeStep.value?.placement??n.side,align:t.activeStep.value?.align??n.align,sideOffset:n.sideOffset,alignOffset:n.alignOffset,avoidCollisions:n.avoidCollisions,collisionPadding:n.collisionPadding,collisionBoundary:n.collisionBoundary})),w=(0,e.computed)(()=>`${i.value.side}|${i.value.align}|${v.value}`);b.useFocusTrap(a,t.open);function m(){t.open.value&&a.value?.focus({preventScroll:!0})}return(0,e.watch)([t.open,t.step],m,{flush:"post"}),(0,e.onMounted)(m),g.useDismiss({enabled:t.open,onEscapeKeyDown:o=>{r("escape-key-down",o),!(o.defaultPrevented||!t.closeOnEscape.value)&&t.skip()},onInteractOutside:o=>r("interact-outside",o),onPointerDownOutside:o=>{r("pointer-down-outside",o),!(o.defaultPrevented||!t.closeOnInteractOutside.value)&&t.skip()},onFocusOutside:o=>r("focus-outside",o)},[a]),(o,P)=>u.forceMount||(0,e.unref)(t).open.value?((0,e.openBlock)(),(0,e.createElementBlock)("div",{key:0,class:"skdx-tour__content","data-part":"content",id:(0,e.unref)(t).contentId,ref:(0,e.unref)(h),role:"dialog","aria-modal":"true","aria-labelledby":(0,e.unref)(t).titleId,"aria-describedby":(0,e.unref)(t).descriptionId,tabindex:"-1","data-state":(0,e.unref)(t).open.value?"open":"closed","data-step":(0,e.unref)(t).step.value,"data-type":(0,e.unref)(t).activeStep.value?.type,"data-centered":(0,e.unref)(t).anchored.value?void 0:"","data-side":(0,e.unref)(t).anchored.value?f.value:void 0,"data-align":(0,e.unref)(t).anchored.value?p.value:void 0,style:(0,e.normalizeStyle)((0,e.unref)(t).anchored.value?d.value:void 0)},[(0,e.unref)(t).anchored.value?((0,e.openBlock)(),(0,e.createBlock)(k.default,(0,e.mergeProps)({key:w.value},i.value),null,16)):(0,e.createCommentVNode)("",!0),(0,e.renderSlot)(o.$slots,"default")],12,C)):(0,e.createCommentVNode)("",!0)}});exports.default=q;
+const E=require("../utils/composeRefs.cjs"),q=require("../utils/useDismiss.cjs"),h=require("../utils/useFocusTrap.cjs"),R=require("../utils/useOutsideInert.cjs"),k=require("../utils/popper.cjs"),O=require("./context.cjs"),x=require("./TourPositioner.vue.cjs");let e=require("vue");var P=["id","aria-modal","aria-labelledby","aria-describedby","data-state","data-step","data-type","data-keyboard-navigation","data-backdrop","data-centered","data-side","data-align"],S=(0,e.defineComponent)({__name:"TourContent",props:{side:{default:"bottom"},align:{default:"center"},sideOffset:{default:8},alignOffset:{default:0},avoidCollisions:{type:Boolean,default:!0},collisionPadding:{default:8},collisionBoundary:{default:void 0},forceMount:{type:Boolean,default:!1}},emits:["escape-key-down","pointer-down-outside","focus-outside","interact-outside","open-auto-focus","close-auto-focus"],setup(s,{emit:_}){const n=s,a=_;function w(o){if(!(o instanceof HTMLElement))return!1;if(o.isContentEditable||o.getAttribute("role")==="textbox")return!0;const r=o.localName;return r==="input"||r==="textarea"||r==="select"}const t=(0,e.inject)(O.TOUR_CONTEXT);if(!t)throw new Error("SkdxTourContent must be used within SkdxTour.");const l=(0,e.inject)(k.POPPER_CONTEXT);if(!l)throw new Error("SkdxTourContent must be used within SkdxTour.");const u=(0,e.ref)(null),d=(0,e.ref)(null),c=(0,e.shallowRef)({}),f=(0,e.shallowRef)({position:"absolute"}),p=(0,e.ref)("bottom"),v=(0,e.ref)("center"),g=E.composeRefs(u,t.contentRef);(0,e.provide)(O.TOUR_POSITION,{contentRef:u,arrowRef:d,style:c,arrowStyle:f,placedSide:p,placedAlign:v}),(0,e.provide)(k.ARROW_CONTEXT,{style:f,setArrowEl:o=>{d.value=o}});const y=(0,e.ref)(0);(0,e.watch)(()=>l.anchor.value,()=>{y.value+=1});const i=(0,e.computed)(()=>({side:t.activeStep.value?.placement??n.side,align:t.activeStep.value?.align??n.align,sideOffset:n.sideOffset,alignOffset:n.alignOffset,avoidCollisions:n.avoidCollisions,collisionPadding:n.collisionPadding,collisionBoundary:n.collisionBoundary})),T=(0,e.computed)(()=>`${i.value.side}|${i.value.align}|${y.value}`);h.useFocusTrap(u,t.open,{onOpenAutoFocus:o=>a("open-auto-focus",o),onCloseAutoFocus:o=>a("close-auto-focus",o)});const m=(0,e.computed)(()=>t.open.value&&t.preventInteraction.value);R.useOutsideInert(u,m),(0,e.watch)(()=>t.step.value,()=>{t.open.value&&h.autoFocusEvent("open-auto-focus",o=>a("open-auto-focus",o))&&u.value?.focus({preventScroll:!0})},{flush:"post"}),q.useDismiss({enabled:t.open,onEscapeKeyDown:o=>{a("escape-key-down",o),!(o.defaultPrevented||!t.closeOnEscape.value)&&t.skip()},onInteractOutside:o=>a("interact-outside",o),onPointerDownOutside:o=>{a("pointer-down-outside",o),!(o.defaultPrevented||!t.closeOnInteractOutside.value)&&t.skip()},onFocusOutside:o=>a("focus-outside",o)},[u]);const C=o=>{if(!t.keyboardNavigation.value||o.defaultPrevented||o.altKey||o.ctrlKey||o.metaKey||w(o.target))return;const r=document.documentElement.getAttribute("dir")==="rtl",b=o.key;if(b==="ArrowRight")r?t.prev():t.next();else if(b==="ArrowLeft")r?t.next():t.prev();else return;o.preventDefault()};return(o,r)=>s.forceMount||(0,e.unref)(t).open.value?((0,e.openBlock)(),(0,e.createElementBlock)("div",{key:0,class:"skdx-tour__content","data-part":"content",id:(0,e.unref)(t).contentId,ref:(0,e.unref)(g),role:"dialog","aria-modal":m.value?"true":void 0,"aria-labelledby":(0,e.unref)(t).hasTitle.value?(0,e.unref)(t).titleId:void 0,"aria-describedby":(0,e.unref)(t).hasDescription.value?(0,e.unref)(t).descriptionId:void 0,tabindex:"-1","data-state":(0,e.unref)(t).open.value?"open":"closed","data-step":(0,e.unref)(t).step.value,"data-type":(0,e.unref)(t).activeStep.value?.type,"data-keyboard-navigation":(0,e.unref)(t).keyboardNavigation.value?"":void 0,"data-backdrop":(0,e.unref)(t).hasBackdrop.value?"":void 0,"data-centered":(0,e.unref)(t).anchored.value?void 0:"","data-side":(0,e.unref)(t).anchored.value?p.value:void 0,"data-align":(0,e.unref)(t).anchored.value?v.value:void 0,style:(0,e.normalizeStyle)((0,e.unref)(t).anchored.value?c.value:void 0),onKeydown:C},[(0,e.unref)(t).anchored.value?((0,e.openBlock)(),(0,e.createBlock)(x.default,(0,e.mergeProps)({key:T.value},i.value),null,16)):(0,e.createCommentVNode)("",!0),(0,e.renderSlot)(o.$slots,"default")],44,P)):(0,e.createCommentVNode)("",!0)}});exports.default=S;

package/dist/tour/TourContent.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{composeRefs as e}from"../utils/composeRefs.js";import{useDismiss as a}from"../utils/useDismiss.js";import{useFocusTrap as o}from"../utils/useFocusTrap.js";import{ARROW_CONTEXT as t,POPPER_CONTEXT as s}from"../utils/popper.js";import{TOUR_CONTEXT as n,TOUR_POSITION as i}from"./context.js";import l from"./TourPositioner.vue.js";import{computed as d,createBlock as r,createCommentVNode as u,createElementBlock as c,defineComponent as p,inject as f,mergeProps as v,normalizeStyle as m,onMounted as y,openBlock as O,provide as w,ref as T,renderSlot as g,shallowRef as b,unref as k,watch as h}from"vue";var S=["id","aria-labelledby","aria-describedby","data-state","data-step","data-type","data-centered","data-side","data-align"],P=/* @__PURE__ */p({__name:"TourContent",props:{side:{default:"bottom"},align:{default:"center"},sideOffset:{default:8},alignOffset:{default:0},avoidCollisions:{type:Boolean,default:!0},collisionPadding:{default:8},collisionBoundary:{default:void 0},forceMount:{type:Boolean,default:!1}},emits:["escape-key-down","pointer-down-outside","focus-outside","interact-outside"],setup(p,{emit:P}){const C=p,R=P,E=f(n);if(!E)throw new Error("SkdxTourContent must be used within SkdxTour.");const x=f(s);if(!x)throw new Error("SkdxTourContent must be used within SkdxTour.");const B=T(null),_=T(null),j=b({}),I=b({position:"absolute"}),N=T("bottom"),D=T("center"),$=e(B,E.contentRef);w(i,{contentRef:B,arrowRef:_,style:j,arrowStyle:I,placedSide:N,placedAlign:D}),w(t,{style:I,setArrowEl:e=>{_.value=e}});const A=T(0);h(()=>x.anchor.value,()=>{A.value+=1});const F=d(()=>({side:E.activeStep.value?.placement??C.side,align:E.activeStep.value?.align??C.align,sideOffset:C.sideOffset,alignOffset:C.alignOffset,avoidCollisions:C.avoidCollisions,collisionPadding:C.collisionPadding,collisionBoundary:C.collisionBoundary})),M=d(()=>`${F.value.side}|${F.value.align}|${A.value}`);function X(){E.open.value&&B.value?.focus({preventScroll:!0})}return o(B,E.open),h([E.open,E.step],X,{flush:"post"}),y(X),a({enabled:E.open,onEscapeKeyDown:e=>{R("escape-key-down",e),!e.defaultPrevented&&E.closeOnEscape.value&&E.skip()},onInteractOutside:e=>R("interact-outside",e),onPointerDownOutside:e=>{R("pointer-down-outside",e),!e.defaultPrevented&&E.closeOnInteractOutside.value&&E.skip()},onFocusOutside:e=>R("focus-outside",e)},[B]),(e,a)=>p.forceMount||k(E).open.value?(O(),c("div",{key:0,class:"skdx-tour__content","data-part":"content",id:k(E).contentId,ref:k($),role:"dialog","aria-modal":"true","aria-labelledby":k(E).titleId,"aria-describedby":k(E).descriptionId,tabindex:"-1","data-state":k(E).open.value?"open":"closed","data-step":k(E).step.value,"data-type":k(E).activeStep.value?.type,"data-centered":k(E).anchored.value?void 0:"","data-side":k(E).anchored.value?N.value:void 0,"data-align":k(E).anchored.value?D.value:void 0,style:m(k(E).anchored.value?j.value:void 0)},[k(E).anchored.value?(O(),r(l,v({key:M.value},F.value),null,16)):u("",!0),g(e.$slots,"default")],12,S)):u("",!0)}});export{P as default};
+import{composeRefs as e}from"../utils/composeRefs.js";import{useDismiss as t}from"../utils/useDismiss.js";import{autoFocusEvent as o,useFocusTrap as a}from"../utils/useFocusTrap.js";import{useOutsideInert as s}from"../utils/useOutsideInert.js";import{ARROW_CONTEXT as n,POPPER_CONTEXT as i}from"../utils/popper.js";import{TOUR_CONTEXT as l,TOUR_POSITION as u}from"./context.js";import r from"./TourPositioner.vue.js";import{computed as d,createBlock as c,createCommentVNode as p,createElementBlock as v,defineComponent as f,inject as m,mergeProps as y,normalizeStyle as b,openBlock as g,provide as O,ref as k,renderSlot as w,shallowRef as T,unref as h,watch as E}from"vue";var x=["id","aria-modal","aria-labelledby","aria-describedby","data-state","data-step","data-type","data-keyboard-navigation","data-backdrop","data-centered","data-side","data-align"],C=/* @__PURE__ */f({__name:"TourContent",props:{side:{default:"bottom"},align:{default:"center"},sideOffset:{default:8},alignOffset:{default:0},avoidCollisions:{type:Boolean,default:!0},collisionPadding:{default:8},collisionBoundary:{default:void 0},forceMount:{type:Boolean,default:!1}},emits:["escape-key-down","pointer-down-outside","focus-outside","interact-outside","open-auto-focus","close-auto-focus"],setup(f,{emit:C}){const P=f,S=C,R=m(l);if(!R)throw new Error("SkdxTourContent must be used within SkdxTour.");const I=m(i);if(!I)throw new Error("SkdxTourContent must be used within SkdxTour.");const A=k(null),B=k(null),j=T({}),N=T({position:"absolute"}),_=k("bottom"),D=k("center"),F=e(A,R.contentRef);O(u,{contentRef:A,arrowRef:B,style:j,arrowStyle:N,placedSide:_,placedAlign:D}),O(n,{style:N,setArrowEl:e=>{B.value=e}});const K=k(0);E(()=>I.anchor.value,()=>{K.value+=1});const $=d(()=>({side:R.activeStep.value?.placement??P.side,align:R.activeStep.value?.align??P.align,sideOffset:P.sideOffset,alignOffset:P.alignOffset,avoidCollisions:P.avoidCollisions,collisionPadding:P.collisionPadding,collisionBoundary:P.collisionBoundary})),M=d(()=>`${$.value.side}|${$.value.align}|${K.value}`);a(A,R.open,{onOpenAutoFocus:e=>S("open-auto-focus",e),onCloseAutoFocus:e=>S("close-auto-focus",e)});const X=d(()=>R.open.value&&R.preventInteraction.value);s(A,X),E(()=>R.step.value,()=>{R.open.value&&o("open-auto-focus",e=>S("open-auto-focus",e))&&A.value?.focus({preventScroll:!0})},{flush:"post"}),t({enabled:R.open,onEscapeKeyDown:e=>{S("escape-key-down",e),!e.defaultPrevented&&R.closeOnEscape.value&&R.skip()},onInteractOutside:e=>S("interact-outside",e),onPointerDownOutside:e=>{S("pointer-down-outside",e),!e.defaultPrevented&&R.closeOnInteractOutside.value&&R.skip()},onFocusOutside:e=>S("focus-outside",e)},[A]);const L=e=>{if(!R.keyboardNavigation.value||e.defaultPrevented||e.altKey||e.ctrlKey||e.metaKey||function(e){if(!(e instanceof HTMLElement))return!1;if(e.isContentEditable||"textbox"===e.getAttribute("role"))return!0;const t=e.localName;return"input"===t||"textarea"===t||"select"===t}(e.target))return;const t="rtl"===document.documentElement.getAttribute("dir"),o=e.key;if("ArrowRight"===o)t?R.prev():R.next();else{if("ArrowLeft"!==o)return;t?R.next():R.prev()}e.preventDefault()};return(e,t)=>f.forceMount||h(R).open.value?(g(),v("div",{key:0,class:"skdx-tour__content","data-part":"content",id:h(R).contentId,ref:h(F),role:"dialog","aria-modal":X.value?"true":void 0,"aria-labelledby":h(R).hasTitle.value?h(R).titleId:void 0,"aria-describedby":h(R).hasDescription.value?h(R).descriptionId:void 0,tabindex:"-1","data-state":h(R).open.value?"open":"closed","data-step":h(R).step.value,"data-type":h(R).activeStep.value?.type,"data-keyboard-navigation":h(R).keyboardNavigation.value?"":void 0,"data-backdrop":h(R).hasBackdrop.value?"":void 0,"data-centered":h(R).anchored.value?void 0:"","data-side":h(R).anchored.value?_.value:void 0,"data-align":h(R).anchored.value?D.value:void 0,style:b(h(R).anchored.value?j.value:void 0),onKeydown:L},[h(R).anchored.value?(g(),c(r,y({key:M.value},$.value),null,16)):p("",!0),w(e.$slots,"default")],44,x)):p("",!0)}});export{C as default};

package/dist/tour/TourDescription.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const o=require("./context.cjs");let e=require("vue");var i=["id"],n=(0,e.defineComponent)({__name:"TourDescription",setup(u){const t=(0,e.inject)(o.TOUR_CONTEXT);if(!t)throw new Error("SkdxTourDescription must be used within SkdxTour.");return(r,s)=>((0,e.openBlock)(),(0,e.createElementBlock)("p",{class:"skdx-tour__description","data-part":"description",id:(0,e.unref)(t).descriptionId},[(0,e.renderSlot)(r.$slots,"default")],8,i))}});exports.default=n;
+const o=require("./context.cjs");let e=require("vue");var n=["id"],i=(0,e.defineComponent)({__name:"TourDescription",setup(s){const t=(0,e.inject)(o.TOUR_CONTEXT);if(!t)throw new Error("SkdxTourDescription must be used within SkdxTour.");return t.setHasDescription(!0),(0,e.onUnmounted)(()=>t.setHasDescription(!1)),(r,u)=>((0,e.openBlock)(),(0,e.createElementBlock)("p",{class:"skdx-tour__description","data-part":"description",id:(0,e.unref)(t).descriptionId},[(0,e.renderSlot)(r.$slots,"default")],8,n))}});exports.default=i;

package/dist/tour/TourDescription.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{TOUR_CONTEXT as e}from"./context.js";import{createElementBlock as t,defineComponent as r,inject as o,openBlock as s,renderSlot as i,unref as n}from"vue";var a=["id"],d=/* @__PURE__ */r({__name:"TourDescription",setup(r){const d=o(e);if(!d)throw new Error("SkdxTourDescription must be used within SkdxTour.");return(e,r)=>(s(),t("p",{class:"skdx-tour__description","data-part":"description",id:n(d).descriptionId},[i(e.$slots,"default")],8,a))}});export{d as default};
+import{TOUR_CONTEXT as e}from"./context.js";import{createElementBlock as t,defineComponent as s,inject as o,onUnmounted as r,openBlock as n,renderSlot as i,unref as a}from"vue";var d=["id"],p=/* @__PURE__ */s({__name:"TourDescription",setup(s){const p=o(e);if(!p)throw new Error("SkdxTourDescription must be used within SkdxTour.");return p.setHasDescription(!0),r(()=>p.setHasDescription(!1)),(e,s)=>(n(),t("p",{class:"skdx-tour__description","data-part":"description",id:a(p).descriptionId},[i(e.$slots,"default")],8,d))}});export{p as default};

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

@@ -1,8 +1,6 @@
 /**
- * Button that advances to the next step — and, on the **last** step,
- * completes the tour: closes it and emits `complete`. That means one button
- * can carry the whole flow; use `data-last` to relabel it ("Next" → "Done")
- * without tracking the index yourself. Must be used inside `SkdxTour`.
+ * Button advances to next step; on final step, completes tour (closes, emits `complete`).
+ * Use `data-last` to relabel without tracking index. Must be used in `SkdxTour`.
  *
  * @example
  * ```vue

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

@@ -1,8 +1,6 @@
 /**
- * Button that advances to the next step — and, on the **last** step,
- * completes the tour: closes it and emits `complete`. That means one button
- * can carry the whole flow; use `data-last` to relabel it ("Next" → "Done")
- * without tracking the index yourself. Must be used inside `SkdxTour`.
+ * Button advances to next step; on final step, completes tour (closes, emits `complete`).
+ * Use `data-last` to relabel without tracking index. Must be used in `SkdxTour`.
  *
  * @example
  * ```vue

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

@@ -1,9 +1,7 @@
 import type { PortalContainer } from '../utils/portal.cjs';
 /**
- * Teleports the tour's layer — backdrop, spotlight and content — to
- * `document.body` (or a custom `container`), so it escapes any clipping or `overflow` ancestor of the
- * element the tour happens to be pointing at. Mounts only while the tour is
- * running unless `forceMount` is set. Must be used inside `SkdxTour`.
+ * Teleports the tour layer to `document.body` (or a custom `container`) so
+ * it escapes clipping. Mounts while the tour is running unless `forceMount` is set.
  */
 type __VLS_Props = {
     /**

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

@@ -1,9 +1,7 @@
 import type { PortalContainer } from '../utils/portal.js';
 /**
- * Teleports the tour's layer — backdrop, spotlight and content — to
- * `document.body` (or a custom `container`), so it escapes any clipping or `overflow` ancestor of the
- * element the tour happens to be pointing at. Mounts only while the tour is
- * running unless `forceMount` is set. Must be used inside `SkdxTour`.
+ * Teleports the tour layer to `document.body` (or a custom `container`) so
+ * it escapes clipping. Mounts while the tour is running unless `forceMount` is set.
  */
 type __VLS_Props = {
     /**

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

@@ -1,7 +1,6 @@
 /**
- * Button that steps the tour back. Disabled on the first step — there is
- * nowhere to go, and a button that silently does nothing is worse than one
- * that says so — and exposes `data-disabled` for styling. Must be used inside
+ * Back button for the tour. Disabled on the first step (nowhere to go); an
+ * explicit `data-disabled` is better than a silent no-op. Must be used inside
  * `SkdxTour`.
  */
 type __VLS_Props = {

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

@@ -1,7 +1,6 @@
 /**
- * Button that steps the tour back. Disabled on the first step — there is
- * nowhere to go, and a button that silently does nothing is worse than one
- * that says so — and exposes `data-disabled` for styling. Must be used inside
+ * Back button for the tour. Disabled on the first step (nowhere to go); an
+ * explicit `data-disabled` is better than a silent no-op. Must be used inside
  * `SkdxTour`.
  */
 type __VLS_Props = {

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

@@ -1,11 +1,7 @@
 /**
- * The visible "Step 2 of 5" line, as a `<p>` also carrying `data-step` and
- * `data-total`. Pass `format` to translate it, or default slot content to
- * render the position yourself.
- *
- * Not a live region: the same information is already spoken on every step
- * change through the tour's own announcement, and a second live region would
- * make a screen reader say it twice. Must be used inside `SkdxTour`.
+ * Visible progress text ("Step 2 of 5") as `<p>` with `data-step` and `data-total`.
+ * Pass `format` to customize, or use default slot.
+ * Not a live region (tour already announces on step change).
  *
  * @example
  * ```vue
@@ -14,9 +10,8 @@
  */
 type __VLS_Props = {
     /**
-     * Builds the visible progress string from the zero-based index and the
-     * total.
-     * @default undefined — renders "Step {index + 1} of {total}" in English.
+     * Format the progress string from zero-based index and total.
+     * @default "Step {index + 1} of {total}"
      */
     format?: (index: number, total: number) => string;
 };

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

@@ -1,11 +1,7 @@
 /**
- * The visible "Step 2 of 5" line, as a `<p>` also carrying `data-step` and
- * `data-total`. Pass `format` to translate it, or default slot content to
- * render the position yourself.
- *
- * Not a live region: the same information is already spoken on every step
- * change through the tour's own announcement, and a second live region would
- * make a screen reader say it twice. Must be used inside `SkdxTour`.
+ * Visible progress text ("Step 2 of 5") as `<p>` with `data-step` and `data-total`.
+ * Pass `format` to customize, or use default slot.
+ * Not a live region (tour already announces on step change).
  *
  * @example
  * ```vue
@@ -14,9 +10,8 @@
  */
 type __VLS_Props = {
     /**
-     * Builds the visible progress string from the zero-based index and the
-     * total.
-     * @default undefined — renders "Step {index + 1} of {total}" in English.
+     * Format the progress string from zero-based index and total.
+     * @default "Step {index + 1} of {total}"
      */
     format?: (index: number, total: number) => string;
 };

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

@@ -1,12 +1,6 @@
 /**
- * The highlight box sitting over the active step's target, carrying the same
- * `--skdx-tour-x` / `-y` / `-width` / `-height` geometry as `SkdxTourBackdrop`
- * so a ring, glow or cut-out can be positioned from CSS alone.
- *
- * Renders nothing when the active step has no resolved target — a centred
- * step spotlights nothing, and an empty box parked at the top-left corner
- * would be worse than no box. Decorative and `aria-hidden`. Must be used
- * inside `SkdxTour`.
+ * Highlight box over the active step's target, positioned via `--skdx-tour-x/y/width/height`.
+ * Renders nothing when the step has no target. Decorative and `aria-hidden`. Must be used inside `SkdxTour`.
  *
  * @example
  * ```css
@@ -22,10 +16,8 @@
  */
 type __VLS_Props = {
     /**
-     * Keep the spotlight mounted even while the tour is closed. It still
-     * renders nothing when the active step has no target — there is nothing to
-     * spotlight.
-     * @default false — it leaves the DOM with the tour.
+     * Keep spotlight mounted while tour is closed.
+     * @default false
      */
     forceMount?: boolean;
 };

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

@@ -1,12 +1,6 @@
 /**
- * The highlight box sitting over the active step's target, carrying the same
- * `--skdx-tour-x` / `-y` / `-width` / `-height` geometry as `SkdxTourBackdrop`
- * so a ring, glow or cut-out can be positioned from CSS alone.
- *
- * Renders nothing when the active step has no resolved target — a centred
- * step spotlights nothing, and an empty box parked at the top-left corner
- * would be worse than no box. Decorative and `aria-hidden`. Must be used
- * inside `SkdxTour`.
+ * Highlight box over the active step's target, positioned via `--skdx-tour-x/y/width/height`.
+ * Renders nothing when the step has no target. Decorative and `aria-hidden`. Must be used inside `SkdxTour`.
  *
  * @example
  * ```css
@@ -22,10 +16,8 @@
  */
 type __VLS_Props = {
     /**
-     * Keep the spotlight mounted even while the tour is closed. It still
-     * renders nothing when the active step has no target — there is nothing to
-     * spotlight.
-     * @default false — it leaves the DOM with the tour.
+     * Keep spotlight mounted while tour is closed.
+     * @default false
      */
     forceMount?: boolean;
 };

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

@@ -1,10 +1,6 @@
 /**
- * The active step's accessible name: renders an `<h2>` wired to
- * `SkdxTourContent` via `aria-labelledby`. Every step should have one.
- *
- * This is the *visible* heading. The string announced on a step change comes
- * from the step's own `title` in the `steps` array — set both, and keep them
- * saying the same thing. Must be used inside `SkdxTour`.
+ * The active step's accessible name via `aria-labelledby` on `SkdxTourContent`.
+ * Renders an `<h2>`. Must be used inside `SkdxTour`.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

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

@@ -1,10 +1,6 @@
 /**
- * The active step's accessible name: renders an `<h2>` wired to
- * `SkdxTourContent` via `aria-labelledby`. Every step should have one.
- *
- * This is the *visible* heading. The string announced on a step change comes
- * from the step's own `title` in the `steps` array — set both, and keep them
- * saying the same thing. Must be used inside `SkdxTour`.
+ * The active step's accessible name via `aria-labelledby` on `SkdxTourContent`.
+ * Renders an `<h2>`. Must be used inside `SkdxTour`.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

package/dist/tour/TourTitle.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const u=require("./context.cjs");let e=require("vue");var o=["id"],_=(0,e.defineComponent)({__name:"TourTitle",setup(i){const t=(0,e.inject)(u.TOUR_CONTEXT);if(!t)throw new Error("SkdxTourTitle must be used within SkdxTour.");return(r,n)=>((0,e.openBlock)(),(0,e.createElementBlock)("h2",{class:"skdx-tour__title","data-part":"title",id:(0,e.unref)(t).titleId},[(0,e.renderSlot)(r.$slots,"default")],8,o))}});exports.default=_;
+const u=require("./context.cjs");let e=require("vue");var o=["id"],n=(0,e.defineComponent)({__name:"TourTitle",setup(i){const t=(0,e.inject)(u.TOUR_CONTEXT);if(!t)throw new Error("SkdxTourTitle must be used within SkdxTour.");return t.setHasTitle(!0),(0,e.onUnmounted)(()=>t.setHasTitle(!1)),(r,l)=>((0,e.openBlock)(),(0,e.createElementBlock)("h2",{class:"skdx-tour__title","data-part":"title",id:(0,e.unref)(t).titleId},[(0,e.renderSlot)(r.$slots,"default")],8,o))}});exports.default=n;

package/dist/tour/TourTitle.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{TOUR_CONTEXT as t}from"./context.js";import{createElementBlock as e,defineComponent as r,inject as o,openBlock as s,renderSlot as a,unref as i}from"vue";var n=["id"],l=/* @__PURE__ */r({__name:"TourTitle",setup(r){const l=o(t);if(!l)throw new Error("SkdxTourTitle must be used within SkdxTour.");return(t,r)=>(s(),e("h2",{class:"skdx-tour__title","data-part":"title",id:i(l).titleId},[a(t.$slots,"default")],8,n))}});export{l as default};
+import{TOUR_CONTEXT as t}from"./context.js";import{createElementBlock as e,defineComponent as s,inject as o,onUnmounted as r,openBlock as a,renderSlot as n,unref as i}from"vue";var l=["id"],d=/* @__PURE__ */s({__name:"TourTitle",setup(s){const d=o(t);if(!d)throw new Error("SkdxTourTitle must be used within SkdxTour.");return d.setHasTitle(!0),r(()=>d.setHasTitle(!1)),(t,s)=>(a(),e("h2",{class:"skdx-tour__title","data-part":"title",id:i(d).titleId},[n(t.$slots,"default")],8,l))}});export{d as default};

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

@@ -1,12 +1,7 @@
 /**
- * Button that starts the tour. Sets `aria-haspopup="dialog"`,
- * `aria-expanded`, `aria-controls` pointing at `SkdxTourContent`, and
- * `data-state` (`open`/`closed`).
- *
- * It is also where focus goes back to when the tour completes or is skipped —
- * whatever was focused when the tour started is what the focus trap restores,
- * and for a tour started from a button that is this button. Must be used
- * inside `SkdxTour`.
+ * Button that opens the tour. Sets `aria-haspopup="dialog"`, `aria-expanded`,
+ * `aria-controls` (pointing at `SkdxTourContent`), and `data-state` (`open`/`closed`).
+ * Focus returns here when tour completes or is skipped. Must be used in `SkdxTour`.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

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

@@ -1,12 +1,7 @@
 /**
- * Button that starts the tour. Sets `aria-haspopup="dialog"`,
- * `aria-expanded`, `aria-controls` pointing at `SkdxTourContent`, and
- * `data-state` (`open`/`closed`).
- *
- * It is also where focus goes back to when the tour completes or is skipped —
- * whatever was focused when the tour started is what the focus trap restores,
- * and for a tour started from a button that is this button. Must be used
- * inside `SkdxTour`.
+ * Button that opens the tour. Sets `aria-haspopup="dialog"`, `aria-expanded`,
+ * `aria-controls` (pointing at `SkdxTourContent`), and `data-state` (`open`/`closed`).
+ * Focus returns here when tour completes or is skipped. Must be used in `SkdxTour`.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

package/dist/tour/context.d.cts

@@ -1,64 +1,82 @@
 import type { ComputedRef, CSSProperties, InjectionKey, Ref } from 'vue';
 import type { Align, PhysicalSide, Side } from '../utils/popper.cjs';
-/**
- * How a step presents itself. `tooltip` and `floating` both anchor to the
- * step's target; `dialog` renders centred even when a target is present, so a
- * step can spotlight an element while explaining it from the middle of the
- * screen. Published as `data-type` on `SkdxTourContent` either way.
- */
+/** Step presentation: tooltip / floating anchor, dialog centers. */
 export type TourStepType = 'tooltip' | 'dialog' | 'floating';
-/** One step of a tour. Steps are data, not markup — the whole list is passed to `SkdxTour`. */
+/** One tour step (data-driven, not markup). */
 export interface TourStep {
     /**
-     * The element this step points at: a CSS selector, the element itself, or a
-     * template ref holding it. A step with no target renders centred and
-     * spotlights nothing — that is how a tour opens and closes.
-     * @default undefined — the step is centred, with no spotlight and no anchoring.
+     * Stable step id (reported on step-change; stable across conditional rendering).
+     * @default undefined — index alone.
+     */
+    id?: string;
+    /**
+     * Target element (selector / element / ref). No target → centered, no spotlight.
+     * @default undefined — centered, no spotlight.
      */
     target?: string | HTMLElement | Ref<HTMLElement | null> | null;
     /**
-     * Short name for the step, announced to screen readers alongside its
-     * position. Purely for the announcement — render the visible heading with
-     * `SkdxTourTitle`.
-     * @default undefined — only the position ("Step 2 of 5") is announced.
+     * Accessible name (announced with position).
+     * @default undefined — position only.
      */
     title?: string;
     /**
-     * Side of the target this step's content is placed against, fed straight to
-     * the shared popper layer. `start`/`end` are logical and mirror under RTL.
-     * @default undefined — falls back to `SkdxTourContent`'s own `side`, which defaults to `bottom`.
+     * Description (rendered as TourDescription).
+     * @default undefined — no description.
+     */
+    description?: string;
+    /**
+     * Popper side (logical start / end mirror under RTL).
+     * @default undefined — TourContent's side (bottom).
      */
     placement?: Side;
     /**
-     * Alignment along `placement`.
-     * @default undefined — falls back to `SkdxTourContent`'s own `align`, which defaults to `center`.
+     * Alignment along placement.
+     * @default undefined — TourContent's align (center).
      */
     align?: Align;
     /**
-     * How this step presents itself. `dialog` forces centred content even with a
-     * target set; the other two anchor.
-     * @default undefined — anchored when the step has a target, centred when it does not.
+     * Presentation: dialog forces center, others anchor.
+     * @default undefined — anchored if target, centered otherwise.
      */
     type?: TourStepType;
+    /**
+     * Dims page behind step.
+     * @default true
+     */
+    backdrop?: boolean;
 }
-/** @internal Shared, reactive state an `SkdxTour` distributes to its parts. */
+/** @internal Shared state for tour and parts. */
 export interface TourContext {
     steps: ComputedRef<TourStep[]>;
     step: ComputedRef<number>;
     total: ComputedRef<number>;
     activeStep: ComputedRef<TourStep | undefined>;
     open: ComputedRef<boolean>;
-    /** True when the active step's content is positioned against a resolved target rather than centred. */
+    /** Content positioned against target (not centered). */
     anchored: ComputedRef<boolean>;
+    /** Active step has dimming layer. */
+    hasBackdrop: ComputedRef<boolean>;
     target: Readonly<Ref<HTMLElement | null>>;
-    /** The `--skdx-tour-x/-y/-width/-height` bag, already padded and clamped to the viewport. */
+    /** Spotlight style (--skdx-tour-x/-y/-width/-height). */
     spotlightStyle: ComputedRef<Record<string, string>>;
     contentRef: Ref<HTMLElement | null>;
     contentId: string;
     titleId: string;
     descriptionId: string;
+    /** SkdxTourTitle is rendered. */
+    hasTitle: ComputedRef<boolean>;
+    /** Called by SkdxTourTitle on mount/unmount. */
+    setHasTitle(present: boolean): void;
+    /** SkdxTourDescription is rendered. */
+    hasDescription: ComputedRef<boolean>;
+    /** Called by SkdxTourDescription on mount/unmount. */
+    setHasDescription(present: boolean): void;
     closeOnEscape: ComputedRef<boolean>;
+    /** Page is inert (makes aria-modal true). */
+    preventInteraction: ComputedRef<boolean>;
     closeOnInteractOutside: ComputedRef<boolean>;
+    /** Root binds Arrow keys on Content. */
+    keyboardNavigation: ComputedRef<boolean>;
     setOpen(open: boolean): void;
     goTo(index: number): void;
     next(): void;
@@ -66,18 +84,9 @@ export interface TourContext {
     skip(): void;
     complete(): void;
 }
-/** @internal Injection key an `SkdxTour` provides so its parts share the step list, the active index and the spotlight geometry. */
+/** @internal Injection key for tour shared state. */
 export declare const TOUR_CONTEXT: InjectionKey<TourContext>;
-/**
- * @internal What `SkdxTourContent` hands its renderless positioner: the two
- * element refs the shared popper layer needs, and the four result refs the
- * positioner writes back into.
- *
- * It exists because `usePopperPosition` reads its anchor element and its
- * `side`/`align` once, when it is enabled — and a tour re-anchors and
- * re-places on every step. Remounting the positioner is what makes those
- * re-read, without reaching into the shared util.
- */
+/** @internal Positioner context: element refs and placement result. */
 export interface TourPositionContext {
     contentRef: Ref<HTMLElement | null>;
     arrowRef: Ref<HTMLElement | null>;
@@ -86,5 +95,5 @@ export interface TourPositionContext {
     placedSide: Ref<PhysicalSide>;
     placedAlign: Ref<Align>;
 }
-/** @internal Injection key `SkdxTourContent` provides so its renderless positioner can position the panel it owns. */
+/** @internal Injection key for positioner. */
 export declare const TOUR_POSITION: InjectionKey<TourPositionContext>;