@skdx/web-components 0.26.0 → 0.28.0

package/dist/tour/TourArrow.d.cts

@@ -1,13 +1,7 @@
 import { SkdxOverlayArrow } from '../internal/overlay-arrow.cjs';
 /**
- * `<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.
+ * Optional pointer from content to target, self-positioning on facing edge. Reads position from
+ * data-side. Hidden when centered (no target/dialog type).
  *
  * @example
  * ```html

package/dist/tour/TourArrow.d.ts

@@ -1,13 +1,7 @@
 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.
+ * Optional pointer from content to target, self-positioning on facing edge. Reads position from
+ * data-side. Hidden when centered (no target/dialog type).
  *
  * @example
  * ```html

package/dist/tour/TourBackdrop.cjs

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

package/dist/tour/TourBackdrop.d.cts

@@ -1,21 +1,6 @@
 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>`.
+ * `<skdx-tour-backdrop>` — the dimming layer behind the tour, carrying spotlight geometry as custom properties `--skdx-tour-x`, `-y`, `-width`, `-height` (padded and viewport-clamped). Decorative and `aria-hidden`; announcement flows through `<skdx-tour-content>`. `data-state` and `hidden` are set on the host, not shadow DOM, so consumers can style and animate it. A step with `backdrop: false` removes it from the DOM; a marker lets it be reinserted when the backdrop is restored. Must be inside `<skdx-tour-portal>` within `<skdx-tour>`.
  *
  * @example
  * ```css
@@ -38,9 +23,15 @@ export declare class SkdxTourBackdrop extends LitElement {
     static styles: import("lit").CSSResult[];
     private root;
     private readonly onRootUpdate;
+    private anchor;
+    private movingSelf;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private syncHostState;
+    /** Removes this element from the DOM, leaving a comment marking its spot. */
+    private detach;
+    /** Restores this element to the anchor `detach` left behind. */
+    private reattach;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/dist/tour/TourBackdrop.d.ts

@@ -1,21 +1,6 @@
 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>`.
+ * `<skdx-tour-backdrop>` — the dimming layer behind the tour, carrying spotlight geometry as custom properties `--skdx-tour-x`, `-y`, `-width`, `-height` (padded and viewport-clamped). Decorative and `aria-hidden`; announcement flows through `<skdx-tour-content>`. `data-state` and `hidden` are set on the host, not shadow DOM, so consumers can style and animate it. A step with `backdrop: false` removes it from the DOM; a marker lets it be reinserted when the backdrop is restored. Must be inside `<skdx-tour-portal>` within `<skdx-tour>`.
  *
  * @example
  * ```css
@@ -38,9 +23,15 @@ export declare class SkdxTourBackdrop extends LitElement {
     static styles: import("lit").CSSResult[];
     private root;
     private readonly onRootUpdate;
+    private anchor;
+    private movingSelf;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private syncHostState;
+    /** Removes this element from the DOM, leaving a comment marking its spot. */
+    private detach;
+    /** Restores this element to the anchor `detach` left behind. */
+    private reattach;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/dist/tour/TourBackdrop.js

@@ -1,5 +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`
+var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var h=(s,i,t,o)=>{for(var e=o>1?void 0:o?c(i,t):i,a=s.length-1,n;a>=0;a--)(n=s[a])&&(e=(o?n(i,t,e):n(e))||e);return o&&e&&d(i,t,e),e};import{css as p,html as m,LitElement as v}from"lit";import{customElement as f}from"../internal/define.js";import{hiddenHostStyles as u}from"../internal/styles.js";import{applySpotlightProperties as b,findTourRoot as S,TOUR_INTERNAL_UPDATE as l}from"./Tour.js";var r=class extends v{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.syncHostState();this.anchor=null;this.movingSelf=!1}connectedCallback(){if(super.connectedCallback(),!this.movingSelf){if(this.root=S(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.movingSelf||this.root?.removeEventListener(l,this.onRootUpdate),super.disconnectedCallback()}syncHostState(){let t=this.root?.open??!1,o=this.root?.activeStep?.backdrop!==!1;this.setAttribute("data-state",t?"open":"closed"),this.hidden=!t,o?this.reattach():this.detach(),b(this,this.root?.spotlightVars??{})}detach(){this.anchor||!this.parentNode||(this.anchor=document.createComment(""),this.parentNode.insertBefore(this.anchor,this),this.movingSelf=!0,this.remove(),this.movingSelf=!1)}reattach(){if(!this.anchor)return;let t=this.anchor;this.anchor=null,this.movingSelf=!0,t.replaceWith(this),this.movingSelf=!1}render(){return m`<slot></slot>`}};r.styles=[p`
       :host {
         display: block;
       }
-    `,v],s=a([b("skdx-tour-backdrop","tour","backdrop")],s);export{s as SkdxTourBackdrop};
+    `,u],r=h([f("skdx-tour-backdrop","tour","backdrop")],r);export{r as SkdxTourBackdrop};

package/dist/tour/TourContent.cjs

@@ -1,5 +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`
+"use strict";var f=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var F=Object.prototype.hasOwnProperty;var P=(o,s)=>{for(var t in s)f(o,t,{get:s[t],enumerable:!0})},L=(o,s,t,e)=>{if(s&&typeof s=="object"||typeof s=="function")for(let i of w(s))!F.call(o,i)&&i!==t&&f(o,i,{get:()=>s[i],enumerable:!(e=b(s,i))||e.enumerable});return o};var S=o=>L(f({},"__esModule",{value:!0}),o),l=(o,s,t,e)=>{for(var i=e>1?void 0:e?b(s,t):s,r=o.length-1,d;r>=0;r--)(d=o[r])&&(i=(e?d(s,t,i):d(i))||i);return e&&i&&f(s,t,i),i};var K={};P(K,{SkdxTourContent:()=>n});module.exports=S(K);var c=require("lit"),u=require("lit/decorators.js"),g=require("../internal/define.cjs"),a=require("../internal/dismiss.cjs"),E=require("../internal/outsideInert.cjs"),m=require("../internal/positioning.cjs"),A=require("../internal/styles.cjs"),h=require("../internal/tabbable.cjs"),p=require("./Tour.cjs");function k(o){return Array.from(o.querySelectorAll("*")).filter(s=>s.matches(h.TABBABLE_SELECTOR)||!!s.shadowRoot?.querySelector(h.TABBABLE_SELECTOR))}function v(o){(o.matches(h.TABBABLE_SELECTOR)?o:o.shadowRoot?.querySelector(h.TABBABLE_SELECTOR)??o).focus({preventScroll:!0})}function D(o){if(!(o instanceof HTMLElement))return!1;if(o.isContentEditable||o.getAttribute("role")==="textbox")return!0;let s=o.localName;return s==="input"||s==="textarea"||s==="select"}var T=["position","left","top","transform"],n=class extends c.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=k(this);if(e.length===0){t.preventDefault();return}let i=e[0],r=e[e.length-1],d=document.activeElement;t.shiftKey&&(d===i||d===this)?(t.preventDefault(),v(r)):!t.shiftKey&&d===r&&(t.preventDefault(),v(i))};this.handleDocumentKeyDown=t=>{if(this.root?.open){if(t.key==="Escape"){if(!(0,a.dispatchEscapeKeyDown)(this,t)||!this.root.closeOnEscape)return;this.root.skip();return}if(this.root.keyboardNavigation&&!t.defaultPrevented&&!t.altKey&&!t.ctrlKey&&!t.metaKey&&!D(t.target)){let i=document.documentElement.getAttribute("dir")==="rtl",r=t.key;if(r==="ArrowRight"){i?this.root.prev():this.root.next(),t.preventDefault();return}else if(r==="ArrowLeft"){i?this.root.next():this.root.prev(),t.preventDefault();return}}}};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,p.findTourRoot)(this),!this.root)throw new Error("<skdx-tour-content> must be used inside <skdx-tour>.");this.root.addEventListener(p.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(p.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.id:this.id=t.contentId,this.setAttribute("role","dialog");let i=e&&t.preventInteraction;i?this.setAttribute("aria-modal","true"):this.removeAttribute("aria-modal"),(0,E.setOutsideInert)(this,i);for(let[d,y,O]of[["skdx-tour-title","aria-labelledby",t.titleId],["skdx-tour-description","aria-describedby",t.descriptionId]])this.querySelector(d)?this.setAttribute(y,O):this.removeAttribute(y);this.hasAttribute("tabindex")||(this.tabIndex=-1),this.setAttribute("data-state",e?"open":"closed"),this.setAttribute("data-step",String(t.step));let r=t.activeStep?.type;r?this.setAttribute("data-type",r):this.removeAttribute("data-type"),t.keyboardNavigation?this.setAttribute("data-keyboard-navigation",""):this.removeAttribute("data-keyboard-navigation"),t.activeStep?.backdrop!==!1?this.setAttribute("data-backdrop",""):this.removeAttribute("data-backdrop"),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 T)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,(0,a.dispatchAutoFocus)(this,"close-auto-focus")&&this.previouslyFocused&&this.previouslyFocused!==document.body&&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,(0,a.dispatchAutoFocus)(this,"open-auto-focus")&&this.focus({preventScroll:!0})})))}render(){return c.html`<slot></slot>`}};n.styles=[c.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});
+    `,A.hiddenHostStyles],l([(0,u.property)({type:String})],n.prototype,"side",2),l([(0,u.property)({type:String})],n.prototype,"align",2),l([(0,u.property)({type:Number,attribute:"side-offset"})],n.prototype,"sideOffset",2),l([(0,u.property)({type:Number,attribute:"align-offset"})],n.prototype,"alignOffset",2),l([(0,u.property)({converter:m.optOutBoolean,attribute:"avoid-collisions"})],n.prototype,"avoidCollisions",2),l([(0,u.property)({type:Number,attribute:"collision-padding"})],n.prototype,"collisionPadding",2),l([(0,u.property)({attribute:!1})],n.prototype,"collisionBoundary",2),n=l([(0,g.customElement)("skdx-tour-content","tour","content")],n);0&&(module.exports={SkdxTourContent});

package/dist/tour/TourContent.d.cts

@@ -1,45 +1,27 @@
 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.
+ * `<skdx-tour-content>` — active step's panel with `role="dialog"`. Sets
+ * `aria-modal="true"` and marks siblings `inert` only when `preventInteraction`
+ * is true, avoiding false modality claims over an operable page. Labelled by
+ * `<skdx-tour-title>`, described by `<skdx-tour-description>`. ARIA attributes
+ * on host (not shadow DOM) so IDREFs reach slotted children. Exposes
+ * `data-state`, `data-step`, `data-type`, and when positioned: `data-side`,
+ * `data-align`, `data-centered`, plus measurement CSS variables.
  *
- * 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 trapped inside, moves to panel on each step change (not just on open —
+ * step text changes must notify screen readers), restored when tour completes.
+ * Escape/pointer-down announced via events; `preventDefault()` keeps tour open.
+ * Focus moving outside is announced but never closes the tour.
+ * Arrow keys deliberately not handled — they belong to the target element.
+ * Render inside `<skdx-tour-portal>`. Must be inside `<skdx-tour>`.
  *
- * 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.
+ * @fires escape-key-down - Emitted when Escape is pressed while open. Preventable.
+ * @fires pointer-down-outside - Emitted on pointer-down outside the panel. Preventable.
+ * @fires focus-outside - Emitted when focus moves outside the panel. Notification only.
+ * @fires open-auto-focus - Before focus moves to panel (open and step change). Preventable.
+ * @fires close-auto-focus - Before focus returns to previously focused element. Preventable.
+ * @fires interact-outside - Either outside interaction, before specific event.
  */
 export declare class SkdxTourContent extends LitElement {
     static styles: import("lit").CSSResult[];
@@ -81,18 +63,12 @@ export declare class SkdxTourContent extends LitElement {
     /** 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.
+     * Centre mode: strips positioning attributes and inline styles so CSS owns layout.
      */
     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.
+     * Panel stays mounted across step changes, so focus must move to announce new step to screen reader.
      */
     private syncFocus;
     /** Tab cycling only fires for keys pressed inside the panel. */

package/dist/tour/TourContent.d.ts

@@ -1,45 +1,27 @@
 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.
+ * `<skdx-tour-content>` — active step's panel with `role="dialog"`. Sets
+ * `aria-modal="true"` and marks siblings `inert` only when `preventInteraction`
+ * is true, avoiding false modality claims over an operable page. Labelled by
+ * `<skdx-tour-title>`, described by `<skdx-tour-description>`. ARIA attributes
+ * on host (not shadow DOM) so IDREFs reach slotted children. Exposes
+ * `data-state`, `data-step`, `data-type`, and when positioned: `data-side`,
+ * `data-align`, `data-centered`, plus measurement CSS variables.
  *
- * 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 trapped inside, moves to panel on each step change (not just on open —
+ * step text changes must notify screen readers), restored when tour completes.
+ * Escape/pointer-down announced via events; `preventDefault()` keeps tour open.
+ * Focus moving outside is announced but never closes the tour.
+ * Arrow keys deliberately not handled — they belong to the target element.
+ * Render inside `<skdx-tour-portal>`. Must be inside `<skdx-tour>`.
  *
- * 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.
+ * @fires escape-key-down - Emitted when Escape is pressed while open. Preventable.
+ * @fires pointer-down-outside - Emitted on pointer-down outside the panel. Preventable.
+ * @fires focus-outside - Emitted when focus moves outside the panel. Notification only.
+ * @fires open-auto-focus - Before focus moves to panel (open and step change). Preventable.
+ * @fires close-auto-focus - Before focus returns to previously focused element. Preventable.
+ * @fires interact-outside - Either outside interaction, before specific event.
  */
 export declare class SkdxTourContent extends LitElement {
     static styles: import("lit").CSSResult[];
@@ -81,18 +63,12 @@ export declare class SkdxTourContent extends LitElement {
     /** 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.
+     * Centre mode: strips positioning attributes and inline styles so CSS owns layout.
      */
     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.
+     * Panel stays mounted across step changes, so focus must move to announce new step to screen reader.
      */
     private syncFocus;
     /** Tab cycling only fires for keys pressed inside the panel. */

package/dist/tour/TourContent.js

@@ -1,5 +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`
+var y=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var d=(o,s,t,e)=>{for(var i=e>1?void 0:e?b(s,t):s,n=o.length-1,a;n>=0;n--)(a=o[n])&&(i=(e?a(s,t,i):a(i))||i);return e&&i&&y(s,t,i),i};import{css as g,html as E,LitElement as A}from"lit";import{property as l}from"lit/decorators.js";import{customElement as O}from"../internal/define.js";import{dispatchAutoFocus as p,dispatchEscapeKeyDown as w,dispatchOutside as f,focusOnOpen as F,focusOutsideTarget as P}from"../internal/dismiss.js";import{setOutsideInert as L}from"../internal/outsideInert.js";import{optOutBoolean as S,positionFloating as k}from"../internal/positioning.js";import{hiddenHostStyles as D}from"../internal/styles.js";import{TABBABLE_SELECTOR as u}from"../internal/tabbable.js";import{findTourRoot as T,TOUR_INTERNAL_UPDATE as m}from"./Tour.js";function K(o){return Array.from(o.querySelectorAll("*")).filter(s=>s.matches(u)||!!s.shadowRoot?.querySelector(u))}function c(o){(o.matches(u)?o:o.shadowRoot?.querySelector(u)??o).focus({preventScroll:!0})}function N(o){if(!(o instanceof HTMLElement))return!1;if(o.isContentEditable||o.getAttribute("role")==="textbox")return!0;let s=o.localName;return s==="input"||s==="textarea"||s==="select"}var R=["position","left","top","transform"],r=class extends A{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=K(this);if(e.length===0){t.preventDefault();return}let i=e[0],n=e[e.length-1],a=document.activeElement;t.shiftKey&&(a===i||a===this)?(t.preventDefault(),c(n)):!t.shiftKey&&a===n&&(t.preventDefault(),c(i))};this.handleDocumentKeyDown=t=>{if(this.root?.open){if(t.key==="Escape"){if(!w(this,t)||!this.root.closeOnEscape)return;this.root.skip();return}if(this.root.keyboardNavigation&&!t.defaultPrevented&&!t.altKey&&!t.ctrlKey&&!t.metaKey&&!N(t.target)){let i=document.documentElement.getAttribute("dir")==="rtl",n=t.key;if(n==="ArrowRight"){i?this.root.prev():this.root.next(),t.preventDefault();return}else if(n==="ArrowLeft"){i?this.root.next():this.root.prev(),t.preventDefault();return}}}};this.handleOutsidePointerDown=t=>{let e=this.root;if(!e?.open)return;let i=t.target;!i||this.contains(i)||f(this,"pointer-down-outside",t)&&e.closeOnInteractOutside&&e.skip()};this.handleOutsideFocus=t=>{if(!this.root?.open)return;let e=P(t);!e||this.contains(e)||f(this,"focus-outside",t)}}connectedCallback(){if(super.connectedCallback(),this.root=T(this),!this.root)throw new Error("<skdx-tour-content> must be used inside <skdx-tour>.");this.root.addEventListener(m,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(m,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.id:this.id=t.contentId,this.setAttribute("role","dialog");let i=e&&t.preventInteraction;i?this.setAttribute("aria-modal","true"):this.removeAttribute("aria-modal"),L(this,i);for(let[a,h,v]of[["skdx-tour-title","aria-labelledby",t.titleId],["skdx-tour-description","aria-describedby",t.descriptionId]])this.querySelector(a)?this.setAttribute(h,v):this.removeAttribute(h);this.hasAttribute("tabindex")||(this.tabIndex=-1),this.setAttribute("data-state",e?"open":"closed"),this.setAttribute("data-step",String(t.step));let n=t.activeStep?.type;n?this.setAttribute("data-type",n):this.removeAttribute("data-type"),t.keyboardNavigation?this.setAttribute("data-keyboard-navigation",""):this.removeAttribute("data-keyboard-navigation"),t.activeStep?.backdrop!==!1?this.setAttribute("data-backdrop",""):this.removeAttribute("data-backdrop"),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=k(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 R)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,p(this,"close-auto-focus")&&this.previouslyFocused&&this.previouslyFocused!==document.body&&document.contains(this.previouslyFocused)&&c(this.previouslyFocused),this.previouslyFocused=null),this.wasOpen=t;let e=this.root?.step??-1;!t||this.focusedStep===e||(this.focusedStep=e,this.focusFrame=requestAnimationFrame(()=>F(()=>{this.focusFrame=void 0,p(this,"open-auto-focus")&&this.focus({preventScroll:!0})})))}render(){return E`<slot></slot>`}};r.styles=[g`
       :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};
+    `,D],d([l({type:String})],r.prototype,"side",2),d([l({type:String})],r.prototype,"align",2),d([l({type:Number,attribute:"side-offset"})],r.prototype,"sideOffset",2),d([l({type:Number,attribute:"align-offset"})],r.prototype,"alignOffset",2),d([l({converter:S,attribute:"avoid-collisions"})],r.prototype,"avoidCollisions",2),d([l({type:Number,attribute:"collision-padding"})],r.prototype,"collisionPadding",2),d([l({attribute:!1})],r.prototype,"collisionBoundary",2),r=d([O("skdx-tour-content","tour","content")],r);export{r as SkdxTourContent};

package/dist/tour/TourDescription.cjs

@@ -1,5 +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`
+"use strict";var h=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var u=(i,t)=>{for(var o in t)h(i,o,{get:t[o],enumerable:!0})},S=(i,t,o,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of m(t))!f.call(i,e)&&e!==o&&h(i,e,{get:()=>t[e],enumerable:!(s=c(t,e))||s.enumerable});return i};var g=i=>S(h({},"__esModule",{value:!0}),i),p=(i,t,o,s)=>{for(var e=s>1?void 0:s?c(t,o):t,d=i.length-1,l;d>=0;d--)(l=i[d])&&(e=(s?l(t,o,e):l(e))||e);return s&&e&&h(t,o,e),e};var y={};u(y,{SkdxTourDescription:()=>r});module.exports=g(y);var n=require("lit"),v=require("../internal/define.cjs"),a=require("./Tour.cjs");var r=class extends n.LitElement{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.syncHostState();this.anchor=null;this.movingSelf=!1;this.isGenerated=!1}connectedCallback(){super.connectedCallback(),!this.movingSelf&&(this.root=(0,a.findTourRoot)(this),this.root&&(this.id?this.root.descriptionId=this.id:this.id=this.root.descriptionId,this.isGenerated=!this.hasChildNodes(),this.isGenerated&&(this.root.addEventListener(a.TOUR_INTERNAL_UPDATE,this.onRootUpdate),this.syncHostState())))}disconnectedCallback(){!this.movingSelf&&this.isGenerated&&this.root?.removeEventListener(a.TOUR_INTERNAL_UPDATE,this.onRootUpdate),super.disconnectedCallback()}syncHostState(){if(!this.isGenerated)return;!!(this.root?.activeStep?.description??"").trim()?this.reattach():this.detach()}detach(){this.anchor||!this.parentNode||(this.anchor=document.createComment(""),this.parentNode.insertBefore(this.anchor,this),this.movingSelf=!0,this.remove(),this.movingSelf=!1)}reattach(){if(!this.anchor)return;let o=this.anchor;this.anchor=null,this.movingSelf=!0,o.replaceWith(this),this.movingSelf=!1}render(){return n.html`<p part="description"><slot></slot></p>`}};r.styles=n.css`
     :host {
       display: block;
     }
-  `,i=m([(0,p.customElement)("skdx-tour-description","tour","description")],i);0&&(module.exports={SkdxTourDescription});
+  `,r=p([(0,v.customElement)("skdx-tour-description","tour","description")],r);0&&(module.exports={SkdxTourDescription});

package/dist/tour/TourDescription.d.cts

@@ -1,8 +1,10 @@
 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.
+ * 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`
+ * points to. For generated descriptions, the element is removed from the DOM
+ * (leaving a comment to mark its spot) until a description is added back;
+ * hand-authored descriptions stay in place.
  *
  * @csspart description - The `<p>` element inside the shadow root.
  *
@@ -16,7 +18,18 @@ import { LitElement } from 'lit';
  */
 export declare class SkdxTourDescription extends LitElement {
     static styles: import("lit").CSSResult;
+    private root;
+    private readonly onRootUpdate;
+    private anchor;
+    private movingSelf;
+    private isGenerated;
     connectedCallback(): void;
+    disconnectedCallback(): void;
+    private syncHostState;
+    /** Removes this element from the DOM, leaving a comment marking its spot. */
+    private detach;
+    /** Restores this element to the anchor `detach` left behind. */
+    private reattach;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/dist/tour/TourDescription.d.ts

@@ -1,8 +1,10 @@
 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.
+ * 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`
+ * points to. For generated descriptions, the element is removed from the DOM
+ * (leaving a comment to mark its spot) until a description is added back;
+ * hand-authored descriptions stay in place.
  *
  * @csspart description - The `<p>` element inside the shadow root.
  *
@@ -16,7 +18,18 @@ import { LitElement } from 'lit';
  */
 export declare class SkdxTourDescription extends LitElement {
     static styles: import("lit").CSSResult;
+    private root;
+    private readonly onRootUpdate;
+    private anchor;
+    private movingSelf;
+    private isGenerated;
     connectedCallback(): void;
+    disconnectedCallback(): void;
+    private syncHostState;
+    /** Removes this element from the DOM, leaving a comment marking its spot. */
+    private detach;
+    /** Restores this element to the anchor `detach` left behind. */
+    private reattach;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/dist/tour/TourDescription.js

@@ -1,5 +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`
+var l=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var h=(r,i,e,s)=>{for(var t=s>1?void 0:s?c(i,e):i,n=r.length-1,a;n>=0;n--)(a=r[n])&&(t=(s?a(i,e,t):a(t))||t);return s&&t&&l(i,e,t),t};import{css as p,html as v,LitElement as m}from"lit";import{customElement as f}from"../internal/define.js";import{findTourRoot as u,TOUR_INTERNAL_UPDATE as d}from"./Tour.js";var o=class extends m{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.syncHostState();this.anchor=null;this.movingSelf=!1;this.isGenerated=!1}connectedCallback(){super.connectedCallback(),!this.movingSelf&&(this.root=u(this),this.root&&(this.id?this.root.descriptionId=this.id:this.id=this.root.descriptionId,this.isGenerated=!this.hasChildNodes(),this.isGenerated&&(this.root.addEventListener(d,this.onRootUpdate),this.syncHostState())))}disconnectedCallback(){!this.movingSelf&&this.isGenerated&&this.root?.removeEventListener(d,this.onRootUpdate),super.disconnectedCallback()}syncHostState(){if(!this.isGenerated)return;!!(this.root?.activeStep?.description??"").trim()?this.reattach():this.detach()}detach(){this.anchor||!this.parentNode||(this.anchor=document.createComment(""),this.parentNode.insertBefore(this.anchor,this),this.movingSelf=!0,this.remove(),this.movingSelf=!1)}reattach(){if(!this.anchor)return;let e=this.anchor;this.anchor=null,this.movingSelf=!0,e.replaceWith(this),this.movingSelf=!1}render(){return v`<p part="description"><slot></slot></p>`}};o.styles=p`
     :host {
       display: block;
     }
-  `,o=c([b("skdx-tour-description","tour","description")],o);export{o as SkdxTourDescription};
+  `,o=h([f("skdx-tour-description","tour","description")],o);export{o as SkdxTourDescription};

package/dist/tour/TourNextTrigger.cjs

@@ -1,5 +1,10 @@
 "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}>
+      <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`

package/dist/tour/TourNextTrigger.d.cts

@@ -1,10 +1,7 @@
 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.
+ * Advances to the next step, or completes the tour on the last step.
+ * Sets `data-last` to allow label changes without tracking the step index.
  *
  * @csspart next-trigger - The native `<button>` element inside the shadow root.
  *

package/dist/tour/TourNextTrigger.d.ts

@@ -1,10 +1,7 @@
 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.
+ * Advances to the next step, or completes the tour on the last step.
+ * Sets `data-last` to allow label changes without tracking the step index.
  *
  * @csspart next-trigger - The native `<button>` element inside the shadow root.
  *

package/dist/tour/TourNextTrigger.js

@@ -1,5 +1,10 @@
 var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var l=(i,s,t,r)=>{for(var e=r>1?void 0:r?h(s,t):s,a=i.length-1,n;a>=0;a--)(n=i[a])&&(e=(r?n(s,t,e):n(e))||e);return r&&e&&c(s,t,e),e};import{css as p,html as u,LitElement as v}from"lit";import{customElement as m}from"../internal/define.js";import{controlBoxOnHost as b,delegatesFocusShadowRootOptions as k,resetNativeControl as y}from"../internal/styles.js";import{findTourRoot as f,TOUR_INTERNAL_UPDATE as d}from"./Tour.js";var o=class extends v{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.syncHostState();this.handleClick=()=>this.root?.next()}connectedCallback(){if(super.connectedCallback(),this.root=f(this),!this.root)throw new Error("<skdx-tour-next-trigger> must be used inside <skdx-tour>.");this.root.addEventListener(d,this.onRootUpdate),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener(d,this.onRootUpdate),super.disconnectedCallback()}get isLast(){let t=this.root;return!!t&&t.step>=t.total-1}syncHostState(){this.isLast?this.setAttribute("data-last",""):this.removeAttribute("data-last"),this.requestUpdate()}render(){return u`
-      <button part="next-trigger" type="button" ?data-last=${this.isLast} @click=${this.handleClick}>
+      <button
+        part="next-trigger"
+        type="button"
+        ?data-last=${this.isLast}
+        @click=${this.handleClick}
+      >
         <slot></slot>
       </button>
     `}};o.shadowRootOptions=k,o.styles=[y,p`