@skdx/web-components 0.30.0 → 0.31.0

package/dist/tag-group/TagGroupAnatomy.d.ts

@@ -3,5 +3,9 @@ import '../badge/BadgeDelete.js';
 import type { SkdxTagGroup } from './TagGroup.js';
 /** @internal Marks generated children. */
 export declare const TAG_GROUP_ANATOMY_GENERATED = "data-skdx-tag-group-generated";
-/** @internal Builds one `<skdx-badge>` per entry with an optional `<skdx-badge-delete>`, keyed by tag value so removal preserves the roving tab stop. */
+/**
+ * @internal Builds one `<skdx-badge>` per entry, keyed by tag value so removal preserves the
+ * roving tab stop. Sets `label` and `deletable` only — no light-DOM text child — so each
+ * badge derives its own Label and Delete parts instead of duplicating the label as raw content.
+ */
 export declare function fillTagGroupAnatomy(root: SkdxTagGroup): void;

package/dist/tag-group/TagGroupAnatomy.js

@@ -1,9 +1,9 @@
-import{html as d,render as t,nothing as l}from"lit";import{repeat as o}from"lit/directives/repeat.js";import{closeGlyph as p}from"../internal/glyphs.js";import"../badge/Badge.js";import"../badge/BadgeDelete.js";var x="data-skdx-tag-group-generated";function b(e){e.tags&&t(o(e.tags,a=>a.value,(a,r)=>d`
+import{html as r,render as t}from"lit";import{repeat as l}from"lit/directives/repeat.js";import"../badge/Badge.js";import"../badge/BadgeDelete.js";var s="data-skdx-tag-group-generated";function m(e){e.tags&&t(l(e.tags,a=>a.value,(a,d)=>r`
         <skdx-badge
           data-skdx-tag-group-generated
-          .index=${r}
+          .index=${d}
           label=${a.label}
           ?disabled=${a.disabled??!1}
-          >${a.label}${e.removable?d`<skdx-badge-delete>${p}</skdx-badge-delete>`:l}</skdx-badge
-        >
-      `),e,{host:e})}export{x as TAG_GROUP_ANATOMY_GENERATED,b as fillTagGroupAnatomy};
+          ?deletable=${e.removable}
+        ></skdx-badge>
+      `),e,{host:e})}export{s as TAG_GROUP_ANATOMY_GENERATED,m as fillTagGroupAnatomy};

package/dist/tags-input/TagsInputInput.cjs

@@ -1,9 +1,10 @@
-"use strict";var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var b=(o,e)=>{for(var t in e)l(o,t,{get:e[t],enumerable:!0})},E=(o,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of g(e))!f.call(o,a)&&a!==t&&l(o,a,{get:()=>e[a],enumerable:!(r=m(e,a))||r.enumerable});return o};var T=o=>E(l({},"__esModule",{value:!0}),o),u=(o,e,t,r)=>{for(var a=r>1?void 0:r?m(e,t):e,p=o.length-1,h;p>=0;p--)(h=o[p])&&(a=(r?h(e,t,a):h(a))||a);return r&&a&&l(e,t,a),a};var k={};b(k,{SkdxTagsInputInput:()=>n});module.exports=T(k);var i=require("lit"),c=require("lit/decorators.js"),v=require("../internal/define.cjs"),y=require("../internal/light-dom-styles.cjs"),s=require("./family.cjs"),d=require("./TagsInput.cjs");var n=class extends i.LitElement{constructor(){super(...arguments);this.root=null;this.handleRootUpdate=()=>this.requestUpdate();this.handleInput=t=>{this.root?.setInputValue(t.target.value)};this.handleKeydown=t=>{!this.root||this.root.disabled||this.root.readOnly||(t.key==="Enter"||(0,d.commitsOnKey)(t.key,this.root.delimiter)?(t.preventDefault(),this.root.addTag(this.text),this._clearDraft(t.target)):t.key==="Backspace"&&this.text===""&&this.root.value.length>0&&this.root.removeTag(this.root.value.length-1))};this.handleBlur=t=>{let r=this.root;!r||r.disabled||r.readOnly||r.blurBehavior==="keep"||(r.blurBehavior==="commit"&&r.addTag(this.text),this._clearDraft(t.target))};this.handlePaste=t=>{!this.root||this.root.disabled||this.root.readOnly||!this.root.addOnPaste||(t.preventDefault(),this.root.addTags((0,d.splitOnDelimiters)(t.clipboardData?.getData("text")??"",this.root.delimiter)),this._clearDraft(t.target))}}createRenderRoot(){return this}focus(t){this.querySelector("input")?.focus(t)}get text(){return this.root?.inputValue??""}connectedCallback(){if(super.connectedCallback(),(0,y.installLightDomStyles)(),this.root=s.TAGS_INPUT_FAMILY.root(this),!this.root)throw new Error("<skdx-tags-input-input> must be used inside <skdx-tags-input>.");this.setAttribute("data-skdx-tags-input-field",""),this.root.addEventListener(s.TAGS_INPUT_FAMILY.event,this.handleRootUpdate)}disconnectedCallback(){this.root?.removeEventListener(s.TAGS_INPUT_FAMILY.event,this.handleRootUpdate),super.disconnectedCallback()}_clearDraft(t){this.root?.setInputValue(""),t.value=""}render(){let t=this.root;return t?i.html`
+"use strict";var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var b=(o,e)=>{for(var t in e)n(o,t,{get:e[t],enumerable:!0})},E=(o,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of g(e))!f.call(o,a)&&a!==t&&n(o,a,{get:()=>e[a],enumerable:!(r=c(e,a))||r.enumerable});return o};var $=o=>E(n({},"__esModule",{value:!0}),o),s=(o,e,t,r)=>{for(var a=r>1?void 0:r?c(e,t):e,p=o.length-1,u;p>=0;p--)(u=o[p])&&(a=(r?u(e,t,a):u(a))||a);return r&&a&&n(e,t,a),a};var T={};b(T,{SkdxTagsInputInput:()=>l});module.exports=$(T);var i=require("lit"),m=require("lit/decorators.js"),v=require("../internal/define.cjs"),y=require("../internal/light-dom-styles.cjs"),d=require("./family.cjs"),h=require("./TagsInput.cjs");var l=class extends i.LitElement{constructor(){super(...arguments);this.root=null;this.handleRootUpdate=()=>this.requestUpdate();this.handleInput=t=>{this.root?.setInputValue(t.target.value)};this.handleKeydown=t=>{!this.root||this.root.disabled||this.root.readOnly||(t.key==="Enter"||(0,h.commitsOnKey)(t.key,this.root.delimiter)?(t.preventDefault(),this.root.addTag(this.text),this._clearDraft(t.target)):t.key==="Backspace"&&this.text===""&&this.root.value.length>0&&this.root.removeTag(this.root.value.length-1))};this.handleBlur=t=>{let r=this.root;!r||r.disabled||r.readOnly||r.blurBehavior==="keep"||(r.blurBehavior==="commit"&&r.addTag(this.text),this._clearDraft(t.target))};this.handlePaste=t=>{!this.root||this.root.disabled||this.root.readOnly||!this.root.addOnPaste||(t.preventDefault(),this.root.addTags((0,h.splitOnDelimiters)(t.clipboardData?.getData("text")??"",this.root.delimiter)),this._clearDraft(t.target))}}createRenderRoot(){return this}focus(t){this.querySelector("input")?.focus(t)}get text(){return this.root?.inputValue??""}connectedCallback(){if(super.connectedCallback(),(0,y.installLightDomStyles)(),this.root=d.TAGS_INPUT_FAMILY.root(this),!this.root)throw new Error("<skdx-tags-input-input> must be used inside <skdx-tags-input>.");this.setAttribute("data-skdx-tags-input-field",""),this.root.addEventListener(d.TAGS_INPUT_FAMILY.event,this.handleRootUpdate)}disconnectedCallback(){this.root?.removeEventListener(d.TAGS_INPUT_FAMILY.event,this.handleRootUpdate),super.disconnectedCallback()}_clearDraft(t){this.root?.setInputValue(""),t.value=""}render(){let t=this.root;return t?i.html`
       <input
         part="input"
         type="text"
         style="padding: revert"
         placeholder=${this.placeholder??i.nothing}
+        list=${this.list??i.nothing}
         aria-label=${t.inputLabel||i.nothing}
         ?disabled=${t.disabled}
         ?readonly=${t.readOnly}
@@ -18,4 +19,4 @@
         @blur=${this.handleBlur}
         @paste=${this.handlePaste}
       />
-    `:i.html``}};u([(0,c.property)({type:String})],n.prototype,"placeholder",2),n=u([(0,v.customElement)("skdx-tags-input-input","tags-input","input")],n);0&&(module.exports={SkdxTagsInputInput});
+    `:i.html``}};s([(0,m.property)({type:String})],l.prototype,"placeholder",2),s([(0,m.property)({type:String})],l.prototype,"list",2),l=s([(0,v.customElement)("skdx-tags-input-input","tags-input","input")],l);0&&(module.exports={SkdxTagsInputInput});

package/dist/tags-input/TagsInputInput.d.cts

@@ -16,6 +16,11 @@ export declare class SkdxTagsInputInput extends LitElement {
      * @default undefined
      */
     placeholder?: string;
+    /**
+     * Id of a `<datalist>` backing the input, forwarded to the native input's `list` attribute.
+     * @default undefined
+     */
+    list?: string;
     private root;
     /** The draft text, owned by the root so a consumer can control it. */
     private get text();

package/dist/tags-input/TagsInputInput.d.ts

@@ -16,6 +16,11 @@ export declare class SkdxTagsInputInput extends LitElement {
      * @default undefined
      */
     placeholder?: string;
+    /**
+     * Id of a `<datalist>` backing the input, forwarded to the native input's `list` attribute.
+     * @default undefined
+     */
+    list?: string;
     private root;
     /** The draft text, owned by the root so a consumer can control it. */
     private get text();

package/dist/tags-input/TagsInputInput.js

@@ -1,21 +1,22 @@
-var u=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var d=(n,i,t,e)=>{for(var r=e>1?void 0:e?m(i,t):i,l=n.length-1,s;l>=0;l--)(s=n[l])&&(r=(e?s(i,t,r):s(r))||r);return e&&r&&u(i,t,r),r};import{html as h,LitElement as c,nothing as a}from"lit";import{property as v}from"lit/decorators.js";import{customElement as y}from"../internal/define.js";import{installLightDomStyles as g}from"../internal/light-dom-styles.js";import{TAGS_INPUT_FAMILY as p}from"./family.js";import{commitsOnKey as f,splitOnDelimiters as b}from"./TagsInput.js";var o=class extends c{constructor(){super(...arguments);this.root=null;this.handleRootUpdate=()=>this.requestUpdate();this.handleInput=t=>{this.root?.setInputValue(t.target.value)};this.handleKeydown=t=>{!this.root||this.root.disabled||this.root.readOnly||(t.key==="Enter"||f(t.key,this.root.delimiter)?(t.preventDefault(),this.root.addTag(this.text),this._clearDraft(t.target)):t.key==="Backspace"&&this.text===""&&this.root.value.length>0&&this.root.removeTag(this.root.value.length-1))};this.handleBlur=t=>{let e=this.root;!e||e.disabled||e.readOnly||e.blurBehavior==="keep"||(e.blurBehavior==="commit"&&e.addTag(this.text),this._clearDraft(t.target))};this.handlePaste=t=>{!this.root||this.root.disabled||this.root.readOnly||!this.root.addOnPaste||(t.preventDefault(),this.root.addTags(b(t.clipboardData?.getData("text")??"",this.root.delimiter)),this._clearDraft(t.target))}}createRenderRoot(){return this}focus(t){this.querySelector("input")?.focus(t)}get text(){return this.root?.inputValue??""}connectedCallback(){if(super.connectedCallback(),g(),this.root=p.root(this),!this.root)throw new Error("<skdx-tags-input-input> must be used inside <skdx-tags-input>.");this.setAttribute("data-skdx-tags-input-field",""),this.root.addEventListener(p.event,this.handleRootUpdate)}disconnectedCallback(){this.root?.removeEventListener(p.event,this.handleRootUpdate),super.disconnectedCallback()}_clearDraft(t){this.root?.setInputValue(""),t.value=""}render(){let t=this.root;return t?h`
+var m=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var l=(n,o,t,e)=>{for(var i=e>1?void 0:e?c(o,t):o,s=n.length-1,d;s>=0;s--)(d=n[s])&&(i=(e?d(o,t,i):d(i))||i);return e&&i&&m(o,t,i),i};import{html as p,LitElement as v,nothing as r}from"lit";import{property as u}from"lit/decorators.js";import{customElement as y}from"../internal/define.js";import{installLightDomStyles as g}from"../internal/light-dom-styles.js";import{TAGS_INPUT_FAMILY as h}from"./family.js";import{commitsOnKey as f,splitOnDelimiters as b}from"./TagsInput.js";var a=class extends v{constructor(){super(...arguments);this.root=null;this.handleRootUpdate=()=>this.requestUpdate();this.handleInput=t=>{this.root?.setInputValue(t.target.value)};this.handleKeydown=t=>{!this.root||this.root.disabled||this.root.readOnly||(t.key==="Enter"||f(t.key,this.root.delimiter)?(t.preventDefault(),this.root.addTag(this.text),this._clearDraft(t.target)):t.key==="Backspace"&&this.text===""&&this.root.value.length>0&&this.root.removeTag(this.root.value.length-1))};this.handleBlur=t=>{let e=this.root;!e||e.disabled||e.readOnly||e.blurBehavior==="keep"||(e.blurBehavior==="commit"&&e.addTag(this.text),this._clearDraft(t.target))};this.handlePaste=t=>{!this.root||this.root.disabled||this.root.readOnly||!this.root.addOnPaste||(t.preventDefault(),this.root.addTags(b(t.clipboardData?.getData("text")??"",this.root.delimiter)),this._clearDraft(t.target))}}createRenderRoot(){return this}focus(t){this.querySelector("input")?.focus(t)}get text(){return this.root?.inputValue??""}connectedCallback(){if(super.connectedCallback(),g(),this.root=h.root(this),!this.root)throw new Error("<skdx-tags-input-input> must be used inside <skdx-tags-input>.");this.setAttribute("data-skdx-tags-input-field",""),this.root.addEventListener(h.event,this.handleRootUpdate)}disconnectedCallback(){this.root?.removeEventListener(h.event,this.handleRootUpdate),super.disconnectedCallback()}_clearDraft(t){this.root?.setInputValue(""),t.value=""}render(){let t=this.root;return t?p`
       <input
         part="input"
         type="text"
         style="padding: revert"
-        placeholder=${this.placeholder??a}
-        aria-label=${t.inputLabel||a}
+        placeholder=${this.placeholder??r}
+        list=${this.list??r}
+        aria-label=${t.inputLabel||r}
         ?disabled=${t.disabled}
         ?readonly=${t.readOnly}
-        aria-invalid=${t.invalid?"true":a}
-        aria-readonly=${t.readOnly?"true":a}
-        data-disabled=${t.disabled?"":a}
-        data-invalid=${t.invalid?"":a}
-        data-readonly=${t.readOnly?"":a}
+        aria-invalid=${t.invalid?"true":r}
+        aria-readonly=${t.readOnly?"true":r}
+        data-disabled=${t.disabled?"":r}
+        data-invalid=${t.invalid?"":r}
+        data-readonly=${t.readOnly?"":r}
         .value=${this.text}
         @input=${this.handleInput}
         @keydown=${this.handleKeydown}
         @blur=${this.handleBlur}
         @paste=${this.handlePaste}
       />
-    `:h``}};d([v({type:String})],o.prototype,"placeholder",2),o=d([y("skdx-tags-input-input","tags-input","input")],o);export{o as SkdxTagsInputInput};
+    `:p``}};l([u({type:String})],a.prototype,"placeholder",2),l([u({type:String})],a.prototype,"list",2),a=l([y("skdx-tags-input-input","tags-input","input")],a);export{a as SkdxTagsInputInput};

package/dist/text-field/TextField.cjs

@@ -1,4 +1,4 @@
-"use strict";var d=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var L=Object.prototype.hasOwnProperty;var M=(l,r)=>{for(var e in r)d(l,e,{get:r[e],enumerable:!0})},I=(l,r,e,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of A(r))!L.call(l,s)&&s!==e&&d(l,s,{get:()=>r[s],enumerable:!(n=m(r,s))||n.enumerable});return l};var V=l=>I(d({},"__esModule",{value:!0}),l),i=(l,r,e,n)=>{for(var s=n>1?void 0:n?m(r,e):r,h=l.length-1,f;h>=0;h--)(f=l[h])&&(s=(n?f(r,e,s):f(s))||s);return n&&s&&d(r,e,s),s};var B={};M(B,{SkdxTextField:()=>t});module.exports=V(B);var o=require("lit"),a=require("lit/decorators.js"),v=require("../internal/authored.cjs"),c=require("../internal/define.cjs"),p=require("../internal/derive.cjs"),b=require("../internal/events.cjs"),g=require("../internal/form-associated.cjs"),E=require("../internal/ids.cjs"),y=require("./family.cjs"),u=require("./TextFieldAnatomy.cjs");var t=class extends(0,g.FormAssociated)(o.LitElement){constructor(){super(...arguments);this.disabled=!1;this.invalid=!1;this.required=!1;this.value="";this.defaultValue="";this.clearable=!1;this.clearLabel="Clear";this.type="text";this.readOnly=!1;this.ariaDescribedBy=null;this.ariaLabelledBy=null;this.ariaInvalid=null;this.inputId=(0,E.nextId)("skdx-text-field");this.hasUpdatedOnce=!1;this.seeded=!1;this.fillAnatomy=()=>{(0,v.hasAuthoredParts)(this,u.TEXT_FIELD_ANATOMY_GENERATED,u.TEXT_FIELD_RENDER_SLOTS)||(0,u.fillTextFieldAnatomy)(this)}}get validity(){return this.internals.validity??this.inputElement?.validity??null}get validationMessage(){return this.internals.validationMessage||(this.inputElement?.validationMessage??"")}setValue(e){this.value!==e&&(this.value=e,(0,b.emit)(this,"value-change",e))}get inputElement(){return this.querySelector("skdx-text-field-input input")}syncFormState(){this.setFormValue(this.value);let e=this.inputElement;e?this.mirrorValidity(e):this.setValueMissing(this.required&&!this.value,"Please fill out this field.")}connectedCallback(){super.connectedCallback(),this.seeded||(this.seeded=!0,this.hasAttribute("value")||(this.value=this.defaultValue)),queueMicrotask(this.fillAnatomy)}formResetCallback(){this.value=this.defaultValue}updated(e){let n=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,(e.has("disabled")||e.has("invalid")||e.has("required")||e.has("value"))&&(n||y.TEXT_FIELD_FAMILY.notify(this),this.syncFormState()),!n&&(e.has("ariaDescribedBy")||e.has("ariaLabelledBy")||e.has("ariaInvalid"))&&y.TEXT_FIELD_FAMILY.notify(this),(e.has("clearable")||e.has("clearLabel")||e.has("placeholder")||e.has("type")||e.has("readOnly"))&&this.fillAnatomy(),(0,p.threadAppearance)(this,{size:this.size,variant:this.variant},[...(0,p.derivedParts)(this,"skdx-text-field-input")])}render(){return o.html`
+"use strict";var d=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var L=Object.prototype.hasOwnProperty;var M=(l,r)=>{for(var t in r)d(l,t,{get:r[t],enumerable:!0})},I=(l,r,t,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of A(r))!L.call(l,s)&&s!==t&&d(l,s,{get:()=>r[s],enumerable:!(n=m(r,s))||n.enumerable});return l};var V=l=>I(d({},"__esModule",{value:!0}),l),i=(l,r,t,n)=>{for(var s=n>1?void 0:n?m(r,t):r,p=l.length-1,f;p>=0;p--)(f=l[p])&&(s=(n?f(r,t,s):f(s))||s);return n&&s&&d(r,t,s),s};var B={};M(B,{SkdxTextField:()=>e});module.exports=V(B);var o=require("lit"),a=require("lit/decorators.js"),v=require("../internal/authored.cjs"),c=require("../internal/define.cjs"),h=require("../internal/derive.cjs"),b=require("../internal/events.cjs"),g=require("../internal/form-associated.cjs"),E=require("../internal/ids.cjs"),y=require("./family.cjs"),u=require("./TextFieldAnatomy.cjs");var e=class extends(0,g.FormAssociated)(o.LitElement){constructor(){super(...arguments);this.disabled=!1;this.invalid=!1;this.required=!1;this.value="";this.defaultValue="";this.clearable=!1;this.clearLabel="Clear";this.type="text";this.readOnly=!1;this.ariaDescribedBy=null;this.ariaLabelledBy=null;this.ariaInvalid=null;this.inputId=(0,E.nextId)("skdx-text-field");this.hasUpdatedOnce=!1;this.seeded=!1;this.fillAnatomy=()=>{(0,v.hasAuthoredParts)(this,u.TEXT_FIELD_ANATOMY_GENERATED,u.TEXT_FIELD_RENDER_SLOTS)||(0,u.fillTextFieldAnatomy)(this)}}get validity(){return this.internals.validity??this.inputElement?.validity??null}get validationMessage(){return this.internals.validationMessage||(this.inputElement?.validationMessage??"")}setValue(t){this.value!==t&&(this.value=t,(0,b.emit)(this,"value-change",t))}get inputElement(){return this.querySelector("skdx-text-field-input input")}syncFormState(){this.setFormValue(this.value);let t=this.inputElement;t?this.mirrorValidity(t):this.setValueMissing(this.required&&!this.value,"Please fill out this field.")}connectedCallback(){super.connectedCallback(),this.seeded||(this.seeded=!0,this.hasAttribute("value")||(this.value=this.defaultValue)),queueMicrotask(this.fillAnatomy)}formResetCallback(){this.value=this.defaultValue}updated(t){let n=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,(t.has("disabled")||t.has("invalid")||t.has("required")||t.has("value"))&&(n||y.TEXT_FIELD_FAMILY.notify(this),this.syncFormState()),!n&&(t.has("ariaDescribedBy")||t.has("ariaLabelledBy")||t.has("ariaInvalid"))&&y.TEXT_FIELD_FAMILY.notify(this),(t.has("clearable")||t.has("clearLabel")||t.has("placeholder")||t.has("type")||t.has("readOnly"))&&this.fillAnatomy(),(0,h.threadAppearance)(this,{size:this.size,variant:this.variant},[...(0,h.derivedParts)(this,"skdx-text-field-input")])}render(){return o.html`
       <div
         part="root"
         data-disabled=${this.disabled?"":o.nothing}
@@ -6,7 +6,7 @@
       >
         <slot @slotchange=${this.fillAnatomy}></slot>
       </div>
-    `}};t.styles=o.css`
+    `}};e.styles=o.css`
     :host {
       display: block;
     }
@@ -14,10 +14,14 @@
       display: none;
     }
     /* The shared skin's .skdx-text-field flex rule targets the light-DOM host
-       and never reaches this shadow root, so the layout is redeclared here. */
+       and never reaches this shadow root, so the layout is redeclared here.
+       inline-size is explicit: a shadow-root block child does not reliably
+       inherit :host's externally stretched width, so it shrinks to the
+       slotted input's intrinsic size instead of filling the host. */
     div {
       display: flex;
       align-items: center;
       gap: var(--skdx-control-gap-md);
+      inline-size: 100%;
     }
-  `,i([(0,a.property)({type:Boolean,reflect:!0})],t.prototype,"disabled",2),i([(0,a.property)({type:Boolean,reflect:!0})],t.prototype,"invalid",2),i([(0,a.property)({type:Boolean,reflect:!0})],t.prototype,"required",2),i([(0,a.property)({type:String})],t.prototype,"value",2),i([(0,a.property)({type:String,attribute:"default-value"})],t.prototype,"defaultValue",2),i([(0,a.property)({type:String,reflect:!0})],t.prototype,"name",2),i([(0,a.property)({attribute:"required-message"})],t.prototype,"requiredMessage",2),i([(0,a.property)({type:Boolean,reflect:!0})],t.prototype,"clearable",2),i([(0,a.property)({type:String,attribute:"clear-label"})],t.prototype,"clearLabel",2),i([(0,a.property)({type:String})],t.prototype,"placeholder",2),i([(0,a.property)({type:String})],t.prototype,"type",2),i([(0,a.property)({type:Boolean,reflect:!0,attribute:"read-only"})],t.prototype,"readOnly",2),i([(0,a.property)({type:String,attribute:"aria-describedby"})],t.prototype,"ariaDescribedBy",2),i([(0,a.property)({type:String,attribute:"aria-labelledby"})],t.prototype,"ariaLabelledBy",2),i([(0,a.property)({type:String,attribute:"aria-invalid"})],t.prototype,"ariaInvalid",2),i([(0,a.property)({type:String,reflect:!0,attribute:"data-size"})],t.prototype,"size",2),i([(0,a.property)({type:String,reflect:!0,attribute:"data-variant"})],t.prototype,"variant",2),t=i([(0,c.customElement)("skdx-text-field","text-field","root")],t);0&&(module.exports={SkdxTextField});
+  `,i([(0,a.property)({type:Boolean,reflect:!0})],e.prototype,"disabled",2),i([(0,a.property)({type:Boolean,reflect:!0})],e.prototype,"invalid",2),i([(0,a.property)({type:Boolean,reflect:!0})],e.prototype,"required",2),i([(0,a.property)({type:String})],e.prototype,"value",2),i([(0,a.property)({type:String,attribute:"default-value"})],e.prototype,"defaultValue",2),i([(0,a.property)({type:String,reflect:!0})],e.prototype,"name",2),i([(0,a.property)({attribute:"required-message"})],e.prototype,"requiredMessage",2),i([(0,a.property)({type:Boolean,reflect:!0})],e.prototype,"clearable",2),i([(0,a.property)({type:String,attribute:"clear-label"})],e.prototype,"clearLabel",2),i([(0,a.property)({type:String})],e.prototype,"placeholder",2),i([(0,a.property)({type:String})],e.prototype,"type",2),i([(0,a.property)({type:Boolean,reflect:!0,attribute:"read-only"})],e.prototype,"readOnly",2),i([(0,a.property)({type:String,attribute:"aria-describedby"})],e.prototype,"ariaDescribedBy",2),i([(0,a.property)({type:String,attribute:"aria-labelledby"})],e.prototype,"ariaLabelledBy",2),i([(0,a.property)({type:String,attribute:"aria-invalid"})],e.prototype,"ariaInvalid",2),i([(0,a.property)({type:String,reflect:!0,attribute:"data-size"})],e.prototype,"size",2),i([(0,a.property)({type:String,reflect:!0,attribute:"data-variant"})],e.prototype,"variant",2),e=i([(0,c.customElement)("skdx-text-field","text-field","root")],e);0&&(module.exports={SkdxTextField});

package/dist/text-field/TextField.js

@@ -1,4 +1,4 @@
-var h=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var i=(n,l,e,r)=>{for(var s=r>1?void 0:r?f(l,e):l,o=n.length-1,u;o>=0;o--)(u=n[o])&&(s=(r?u(l,e,s):u(s))||s);return r&&s&&h(l,e,s),s};import{css as y,html as m,LitElement as v,nothing as d}from"lit";import{property as a}from"lit/decorators.js";import{hasAuthoredParts as c}from"../internal/authored.js";import{customElement as b}from"../internal/define.js";import{derivedParts as g,threadAppearance as E}from"../internal/derive.js";import{emit as A}from"../internal/events.js";import{FormAssociated as L}from"../internal/form-associated.js";import{nextId as M}from"../internal/ids.js";import{TEXT_FIELD_FAMILY as p}from"./family.js";import{fillTextFieldAnatomy as I,TEXT_FIELD_ANATOMY_GENERATED as V,TEXT_FIELD_RENDER_SLOTS as B}from"./TextFieldAnatomy.js";var t=class extends L(v){constructor(){super(...arguments);this.disabled=!1;this.invalid=!1;this.required=!1;this.value="";this.defaultValue="";this.clearable=!1;this.clearLabel="Clear";this.type="text";this.readOnly=!1;this.ariaDescribedBy=null;this.ariaLabelledBy=null;this.ariaInvalid=null;this.inputId=M("skdx-text-field");this.hasUpdatedOnce=!1;this.seeded=!1;this.fillAnatomy=()=>{c(this,V,B)||I(this)}}get validity(){return this.internals.validity??this.inputElement?.validity??null}get validationMessage(){return this.internals.validationMessage||(this.inputElement?.validationMessage??"")}setValue(e){this.value!==e&&(this.value=e,A(this,"value-change",e))}get inputElement(){return this.querySelector("skdx-text-field-input input")}syncFormState(){this.setFormValue(this.value);let e=this.inputElement;e?this.mirrorValidity(e):this.setValueMissing(this.required&&!this.value,"Please fill out this field.")}connectedCallback(){super.connectedCallback(),this.seeded||(this.seeded=!0,this.hasAttribute("value")||(this.value=this.defaultValue)),queueMicrotask(this.fillAnatomy)}formResetCallback(){this.value=this.defaultValue}updated(e){let r=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,(e.has("disabled")||e.has("invalid")||e.has("required")||e.has("value"))&&(r||p.notify(this),this.syncFormState()),!r&&(e.has("ariaDescribedBy")||e.has("ariaLabelledBy")||e.has("ariaInvalid"))&&p.notify(this),(e.has("clearable")||e.has("clearLabel")||e.has("placeholder")||e.has("type")||e.has("readOnly"))&&this.fillAnatomy(),E(this,{size:this.size,variant:this.variant},[...g(this,"skdx-text-field-input")])}render(){return m`
+var p=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var i=(n,l,t,r)=>{for(var s=r>1?void 0:r?f(l,t):l,o=n.length-1,u;o>=0;o--)(u=n[o])&&(s=(r?u(l,t,s):u(s))||s);return r&&s&&p(l,t,s),s};import{css as y,html as m,LitElement as v,nothing as d}from"lit";import{property as a}from"lit/decorators.js";import{hasAuthoredParts as c}from"../internal/authored.js";import{customElement as b}from"../internal/define.js";import{derivedParts as g,threadAppearance as E}from"../internal/derive.js";import{emit as A}from"../internal/events.js";import{FormAssociated as L}from"../internal/form-associated.js";import{nextId as M}from"../internal/ids.js";import{TEXT_FIELD_FAMILY as h}from"./family.js";import{fillTextFieldAnatomy as I,TEXT_FIELD_ANATOMY_GENERATED as V,TEXT_FIELD_RENDER_SLOTS as B}from"./TextFieldAnatomy.js";var e=class extends L(v){constructor(){super(...arguments);this.disabled=!1;this.invalid=!1;this.required=!1;this.value="";this.defaultValue="";this.clearable=!1;this.clearLabel="Clear";this.type="text";this.readOnly=!1;this.ariaDescribedBy=null;this.ariaLabelledBy=null;this.ariaInvalid=null;this.inputId=M("skdx-text-field");this.hasUpdatedOnce=!1;this.seeded=!1;this.fillAnatomy=()=>{c(this,V,B)||I(this)}}get validity(){return this.internals.validity??this.inputElement?.validity??null}get validationMessage(){return this.internals.validationMessage||(this.inputElement?.validationMessage??"")}setValue(t){this.value!==t&&(this.value=t,A(this,"value-change",t))}get inputElement(){return this.querySelector("skdx-text-field-input input")}syncFormState(){this.setFormValue(this.value);let t=this.inputElement;t?this.mirrorValidity(t):this.setValueMissing(this.required&&!this.value,"Please fill out this field.")}connectedCallback(){super.connectedCallback(),this.seeded||(this.seeded=!0,this.hasAttribute("value")||(this.value=this.defaultValue)),queueMicrotask(this.fillAnatomy)}formResetCallback(){this.value=this.defaultValue}updated(t){let r=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,(t.has("disabled")||t.has("invalid")||t.has("required")||t.has("value"))&&(r||h.notify(this),this.syncFormState()),!r&&(t.has("ariaDescribedBy")||t.has("ariaLabelledBy")||t.has("ariaInvalid"))&&h.notify(this),(t.has("clearable")||t.has("clearLabel")||t.has("placeholder")||t.has("type")||t.has("readOnly"))&&this.fillAnatomy(),E(this,{size:this.size,variant:this.variant},[...g(this,"skdx-text-field-input")])}render(){return m`
       <div
         part="root"
         data-disabled=${this.disabled?"":d}
@@ -6,7 +6,7 @@ var h=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var i=(n,l,e,r
       >
         <slot @slotchange=${this.fillAnatomy}></slot>
       </div>
-    `}};t.styles=y`
+    `}};e.styles=y`
     :host {
       display: block;
     }
@@ -14,10 +14,14 @@ var h=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var i=(n,l,e,r
       display: none;
     }
     /* The shared skin's .skdx-text-field flex rule targets the light-DOM host
-       and never reaches this shadow root, so the layout is redeclared here. */
+       and never reaches this shadow root, so the layout is redeclared here.
+       inline-size is explicit: a shadow-root block child does not reliably
+       inherit :host's externally stretched width, so it shrinks to the
+       slotted input's intrinsic size instead of filling the host. */
     div {
       display: flex;
       align-items: center;
       gap: var(--skdx-control-gap-md);
+      inline-size: 100%;
     }
-  `,i([a({type:Boolean,reflect:!0})],t.prototype,"disabled",2),i([a({type:Boolean,reflect:!0})],t.prototype,"invalid",2),i([a({type:Boolean,reflect:!0})],t.prototype,"required",2),i([a({type:String})],t.prototype,"value",2),i([a({type:String,attribute:"default-value"})],t.prototype,"defaultValue",2),i([a({type:String,reflect:!0})],t.prototype,"name",2),i([a({attribute:"required-message"})],t.prototype,"requiredMessage",2),i([a({type:Boolean,reflect:!0})],t.prototype,"clearable",2),i([a({type:String,attribute:"clear-label"})],t.prototype,"clearLabel",2),i([a({type:String})],t.prototype,"placeholder",2),i([a({type:String})],t.prototype,"type",2),i([a({type:Boolean,reflect:!0,attribute:"read-only"})],t.prototype,"readOnly",2),i([a({type:String,attribute:"aria-describedby"})],t.prototype,"ariaDescribedBy",2),i([a({type:String,attribute:"aria-labelledby"})],t.prototype,"ariaLabelledBy",2),i([a({type:String,attribute:"aria-invalid"})],t.prototype,"ariaInvalid",2),i([a({type:String,reflect:!0,attribute:"data-size"})],t.prototype,"size",2),i([a({type:String,reflect:!0,attribute:"data-variant"})],t.prototype,"variant",2),t=i([b("skdx-text-field","text-field","root")],t);export{t as SkdxTextField};
+  `,i([a({type:Boolean,reflect:!0})],e.prototype,"disabled",2),i([a({type:Boolean,reflect:!0})],e.prototype,"invalid",2),i([a({type:Boolean,reflect:!0})],e.prototype,"required",2),i([a({type:String})],e.prototype,"value",2),i([a({type:String,attribute:"default-value"})],e.prototype,"defaultValue",2),i([a({type:String,reflect:!0})],e.prototype,"name",2),i([a({attribute:"required-message"})],e.prototype,"requiredMessage",2),i([a({type:Boolean,reflect:!0})],e.prototype,"clearable",2),i([a({type:String,attribute:"clear-label"})],e.prototype,"clearLabel",2),i([a({type:String})],e.prototype,"placeholder",2),i([a({type:String})],e.prototype,"type",2),i([a({type:Boolean,reflect:!0,attribute:"read-only"})],e.prototype,"readOnly",2),i([a({type:String,attribute:"aria-describedby"})],e.prototype,"ariaDescribedBy",2),i([a({type:String,attribute:"aria-labelledby"})],e.prototype,"ariaLabelledBy",2),i([a({type:String,attribute:"aria-invalid"})],e.prototype,"ariaInvalid",2),i([a({type:String,reflect:!0,attribute:"data-size"})],e.prototype,"size",2),i([a({type:String,reflect:!0,attribute:"data-variant"})],e.prototype,"variant",2),e=i([b("skdx-text-field","text-field","root")],e);export{e as SkdxTextField};

package/dist/timeline/Timeline.cjs

@@ -1,4 +1,4 @@
-"use strict";var m=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var A=(i,t)=>{for(var r in t)m(i,r,{get:t[r],enumerable:!0})},b=(i,t,r,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of y(t))!v.call(i,e)&&e!==r&&m(i,e,{get:()=>t[e],enumerable:!(o=f(t,e))||o.enumerable});return i};var E=i=>b(m({},"__esModule",{value:!0}),i),a=(i,t,r,o)=>{for(var e=o>1?void 0:o?f(t,r):t,d=i.length-1,c;d>=0;d--)(c=i[d])&&(e=(o?c(t,r,e):c(e))||e);return o&&e&&m(t,r,e),e};var M={};A(M,{SkdxTimeline:()=>n});module.exports=E(M);var l=require("lit"),s=require("lit/decorators.js"),u=require("../internal/authored.cjs"),g=require("../internal/define.cjs"),h=require("../internal/part.cjs"),p=require("./TimelineAnatomy.cjs");var n=class extends l.LitElement{constructor(){super(...arguments);this.orientation="vertical";this.fillAnatomy=()=>{(0,u.hasAuthoredParts)(this,p.TIMELINE_ANATOMY_GENERATED)||(0,p.fillTimelineAnatomy)(this)}}connectedCallback(){super.connectedCallback(),queueMicrotask(this.fillAnatomy)}updated(r){(0,h.reflectHostState)(this,{"data-orientation":this.orientation}),(r.has("items")||r.has("renderContent"))&&this.fillAnatomy()}render(){return l.html`<ol
+"use strict";var m=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var v=(r,t)=>{for(var i in t)m(r,i,{get:t[i],enumerable:!0})},A=(r,t,i,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of y(t))!b.call(r,e)&&e!==i&&m(r,e,{get:()=>t[e],enumerable:!(o=h(t,e))||o.enumerable});return r};var w=r=>A(m({},"__esModule",{value:!0}),r),a=(r,t,i,o)=>{for(var e=o>1?void 0:o?h(t,i):t,d=r.length-1,c;d>=0;d--)(c=r[d])&&(e=(o?c(t,i,e):c(e))||e);return o&&e&&m(t,i,e),e};var x={};v(x,{SkdxTimeline:()=>n});module.exports=w(x);var l=require("lit"),s=require("lit/decorators.js"),u=require("../internal/authored.cjs"),f=require("../internal/define.cjs"),g=require("../internal/part.cjs"),p=require("./TimelineAnatomy.cjs");var n=class extends l.LitElement{constructor(){super(...arguments);this.orientation="vertical";this.fillAnatomy=()=>{(0,u.hasAuthoredParts)(this,p.TIMELINE_ANATOMY_GENERATED)||(0,p.fillTimelineAnatomy)(this)}}connectedCallback(){super.connectedCallback(),queueMicrotask(this.fillAnatomy)}updated(i){(0,g.reflectHostState)(this,{"data-orientation":this.orientation}),(i.has("items")||i.has("renderContent")||i.has("renderOpposite"))&&this.fillAnatomy()}render(){return l.html`<ol
       part="timeline"
       role="list"
       data-orientation=${this.orientation}
@@ -15,4 +15,11 @@
       padding: 0;
       list-style: none;
     }
-  `,a([(0,s.property)({type:String})],n.prototype,"orientation",2),a([(0,s.property)({attribute:!1})],n.prototype,"items",2),a([(0,s.property)({attribute:!1})],n.prototype,"renderContent",2),a([(0,s.property)({type:String,reflect:!0,attribute:"data-align"})],n.prototype,"align",2),n=a([(0,g.customElement)("skdx-timeline","timeline","root")],n);0&&(module.exports={SkdxTimeline});
+    /* The host is display: contents, so the skin's own [data-orientation='horizontal']
+       rule — written against the light-DOM host — never reaches this shadow-root box,
+       which is the element that actually establishes the flex container. */
+    [part='timeline'][data-orientation='horizontal'] {
+      flex-direction: row;
+      align-items: start;
+    }
+  `,a([(0,s.property)({type:String})],n.prototype,"orientation",2),a([(0,s.property)({attribute:!1})],n.prototype,"items",2),a([(0,s.property)({attribute:!1})],n.prototype,"renderContent",2),a([(0,s.property)({attribute:!1})],n.prototype,"renderOpposite",2),a([(0,s.property)({type:String,reflect:!0,attribute:"data-align"})],n.prototype,"align",2),n=a([(0,f.customElement)("skdx-timeline","timeline","root")],n);0&&(module.exports={SkdxTimeline});

package/dist/timeline/Timeline.d.cts

@@ -3,7 +3,7 @@ import { LitElement, type TemplateResult } from 'lit';
 export interface SkdxTimelineItemDescriptor {
     /** The event itself — the Item's body text. */
     content: string;
-    /** Metadata on the far side of the marker: a timestamp, an actor, an elapsed time. */
+    /** Metadata on the far side of the marker: a timestamp, an actor, an elapsed time — plain text; use `renderOpposite` for markup. */
     opposite?: string;
     /**
      * Text, a glyph, or a rendered icon inside the marker. An Indicator given
@@ -59,6 +59,13 @@ export declare class SkdxTimeline extends LitElement {
      * @default undefined — the entry's `content` is rendered as text.
      */
     renderContent?: (item: SkdxTimelineItemDescriptor, index: number) => unknown;
+    /**
+     * Renders each event's opposite metadata, in place of its `opposite`
+     * string — return anything Lit can render. Property only: a function has
+     * no attribute form.
+     * @default undefined — the entry's `opposite` is rendered as text.
+     */
+    renderOpposite?: (item: SkdxTimelineItemDescriptor, index: number) => unknown;
     /**
      * Which side items sit on relative to the rail, reflected as `data-align`; may be written as that attribute directly.
      * @default undefined — the skin’s own default.

package/dist/timeline/Timeline.d.ts

@@ -3,7 +3,7 @@ import { LitElement, type TemplateResult } from 'lit';
 export interface SkdxTimelineItemDescriptor {
     /** The event itself — the Item's body text. */
     content: string;
-    /** Metadata on the far side of the marker: a timestamp, an actor, an elapsed time. */
+    /** Metadata on the far side of the marker: a timestamp, an actor, an elapsed time — plain text; use `renderOpposite` for markup. */
     opposite?: string;
     /**
      * Text, a glyph, or a rendered icon inside the marker. An Indicator given
@@ -59,6 +59,13 @@ export declare class SkdxTimeline extends LitElement {
      * @default undefined — the entry's `content` is rendered as text.
      */
     renderContent?: (item: SkdxTimelineItemDescriptor, index: number) => unknown;
+    /**
+     * Renders each event's opposite metadata, in place of its `opposite`
+     * string — return anything Lit can render. Property only: a function has
+     * no attribute form.
+     * @default undefined — the entry's `opposite` is rendered as text.
+     */
+    renderOpposite?: (item: SkdxTimelineItemDescriptor, index: number) => unknown;
     /**
      * Which side items sit on relative to the rail, reflected as `data-align`; may be written as that attribute directly.
      * @default undefined — the skin’s own default.

package/dist/timeline/Timeline.js

@@ -1,4 +1,4 @@
-var p=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var r=(l,n,i,o)=>{for(var e=o>1?void 0:o?d(n,i):n,s=l.length-1,m;s>=0;s--)(m=l[s])&&(e=(o?m(n,i,e):m(e))||e);return o&&e&&p(n,i,e),e};import{css as c,html as f,LitElement as u}from"lit";import{property as a}from"lit/decorators.js";import{hasAuthoredParts as g}from"../internal/authored.js";import{customElement as h}from"../internal/define.js";import{reflectHostState as y}from"../internal/part.js";import{fillTimelineAnatomy as v,TIMELINE_ANATOMY_GENERATED as A}from"./TimelineAnatomy.js";var t=class extends u{constructor(){super(...arguments);this.orientation="vertical";this.fillAnatomy=()=>{g(this,A)||v(this)}}connectedCallback(){super.connectedCallback(),queueMicrotask(this.fillAnatomy)}updated(i){y(this,{"data-orientation":this.orientation}),(i.has("items")||i.has("renderContent"))&&this.fillAnatomy()}render(){return f`<ol
+var p=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var r=(s,n,e,a)=>{for(var i=a>1?void 0:a?d(n,e):n,l=s.length-1,m;l>=0;l--)(m=s[l])&&(i=(a?m(n,e,i):m(i))||i);return a&&i&&p(n,e,i),i};import{css as c,html as h,LitElement as u}from"lit";import{property as o}from"lit/decorators.js";import{hasAuthoredParts as f}from"../internal/authored.js";import{customElement as g}from"../internal/define.js";import{reflectHostState as y}from"../internal/part.js";import{fillTimelineAnatomy as b,TIMELINE_ANATOMY_GENERATED as v}from"./TimelineAnatomy.js";var t=class extends u{constructor(){super(...arguments);this.orientation="vertical";this.fillAnatomy=()=>{f(this,v)||b(this)}}connectedCallback(){super.connectedCallback(),queueMicrotask(this.fillAnatomy)}updated(e){y(this,{"data-orientation":this.orientation}),(e.has("items")||e.has("renderContent")||e.has("renderOpposite"))&&this.fillAnatomy()}render(){return h`<ol
       part="timeline"
       role="list"
       data-orientation=${this.orientation}
@@ -15,4 +15,11 @@ var p=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var r=(l,n,i,o
       padding: 0;
       list-style: none;
     }
-  `,r([a({type:String})],t.prototype,"orientation",2),r([a({attribute:!1})],t.prototype,"items",2),r([a({attribute:!1})],t.prototype,"renderContent",2),r([a({type:String,reflect:!0,attribute:"data-align"})],t.prototype,"align",2),t=r([h("skdx-timeline","timeline","root")],t);export{t as SkdxTimeline};
+    /* The host is display: contents, so the skin's own [data-orientation='horizontal']
+       rule — written against the light-DOM host — never reaches this shadow-root box,
+       which is the element that actually establishes the flex container. */
+    [part='timeline'][data-orientation='horizontal'] {
+      flex-direction: row;
+      align-items: start;
+    }
+  `,r([o({type:String})],t.prototype,"orientation",2),r([o({attribute:!1})],t.prototype,"items",2),r([o({attribute:!1})],t.prototype,"renderContent",2),r([o({attribute:!1})],t.prototype,"renderOpposite",2),r([o({type:String,reflect:!0,attribute:"data-align"})],t.prototype,"align",2),t=r([g("skdx-timeline","timeline","root")],t);export{t as SkdxTimeline};

package/dist/timeline/TimelineAnatomy.cjs

@@ -1,15 +1,15 @@
-"use strict";var r=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var p=(e,i)=>{for(var t in i)r(e,t,{get:i[t],enumerable:!0})},x=(e,i,t,o)=>{if(i&&typeof i=="object"||typeof i=="function")for(let m of a(i))!l.call(e,m)&&m!==t&&r(e,m,{get:()=>i[m],enumerable:!(o=s(i,m))||o.enumerable});return e};var k=e=>x(r({},"__esModule",{value:!0}),e);var $={};p($,{TIMELINE_ANATOMY_GENERATED:()=>c,fillTimelineAnatomy:()=>T});module.exports=k($);var n=require("lit"),d=require("lit/directives/repeat.js"),E=require("./TimelineItem.cjs"),g=require("./TimelineOpposite.cjs"),h=require("./TimelineIndicator.cjs"),A=require("./TimelineSeparator.cjs"),N=require("./TimelineContent.cjs"),c="data-skdx-timeline-generated";function T(e){let i=e.items??[];(0,n.render)((0,d.repeat)(i,(t,o)=>o,(t,o)=>n.html`
+"use strict";var d=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var a=Object.prototype.hasOwnProperty;var l=(e,t)=>{for(var i in t)d(e,i,{get:t[i],enumerable:!0})},k=(e,t,i,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of p(t))!a.call(e,o)&&o!==i&&d(e,o,{get:()=>t[o],enumerable:!(r=m(t,o))||r.enumerable});return e};var x=e=>k(d({},"__esModule",{value:!0}),e);var $={};l($,{TIMELINE_ANATOMY_GENERATED:()=>c,fillTimelineAnatomy:()=>T});module.exports=x($);var n=require("lit"),s=require("lit/directives/repeat.js"),E=require("./TimelineItem.cjs"),g=require("./TimelineOpposite.cjs"),h=require("./TimelineIndicator.cjs"),A=require("./TimelineSeparator.cjs"),N=require("./TimelineContent.cjs"),c="data-skdx-timeline-generated";function T(e){let t=e.items??[];(0,n.render)((0,s.repeat)(t,(i,r)=>r,(i,r)=>n.html`
         <skdx-timeline-item
           data-skdx-timeline-generated
-          data-state=${t.state??n.nothing}
+          data-state=${i.state??n.nothing}
         >
-          ${t.opposite?n.html`<skdx-timeline-opposite>${t.opposite}</skdx-timeline-opposite>`:n.nothing}
-          <skdx-timeline-indicator aria-label=${t.indicatorLabel??n.nothing}
-            >${t.indicator??n.nothing}</skdx-timeline-indicator
+          ${i.opposite?n.html`<skdx-timeline-opposite>${e.renderOpposite?e.renderOpposite(i,r):i.opposite}</skdx-timeline-opposite>`:n.nothing}
+          <skdx-timeline-indicator aria-label=${i.indicatorLabel??n.nothing}
+            >${i.indicator??n.nothing}</skdx-timeline-indicator
           >
-          ${o<i.length-1?n.html`<skdx-timeline-separator></skdx-timeline-separator>`:n.nothing}
+          ${r<t.length-1?n.html`<skdx-timeline-separator></skdx-timeline-separator>`:n.nothing}
           <skdx-timeline-content
-            >${e.renderContent?e.renderContent(t,o):t.content}</skdx-timeline-content
+            >${e.renderContent?e.renderContent(i,r):i.content}</skdx-timeline-content
           >
         </skdx-timeline-item>
       `),e,{host:e})}0&&(module.exports={TIMELINE_ANATOMY_GENERATED,fillTimelineAnatomy});

package/dist/timeline/TimelineAnatomy.js

@@ -1,15 +1,15 @@
-import{html as o,render as r,nothing as i}from"lit";import{repeat as d}from"lit/directives/repeat.js";import"./TimelineItem.js";import"./TimelineOpposite.js";import"./TimelineIndicator.js";import"./TimelineSeparator.js";import"./TimelineContent.js";var T="data-skdx-timeline-generated";function $(t){let m=t.items??[];r(d(m,(e,n)=>n,(e,n)=>o`
+import{html as r,render as d,nothing as n}from"lit";import{repeat as s}from"lit/directives/repeat.js";import"./TimelineItem.js";import"./TimelineOpposite.js";import"./TimelineIndicator.js";import"./TimelineSeparator.js";import"./TimelineContent.js";var T="data-skdx-timeline-generated";function $(i){let o=i.items??[];d(s(o,(e,t)=>t,(e,t)=>r`
         <skdx-timeline-item
           data-skdx-timeline-generated
-          data-state=${e.state??i}
+          data-state=${e.state??n}
         >
-          ${e.opposite?o`<skdx-timeline-opposite>${e.opposite}</skdx-timeline-opposite>`:i}
-          <skdx-timeline-indicator aria-label=${e.indicatorLabel??i}
-            >${e.indicator??i}</skdx-timeline-indicator
+          ${e.opposite?r`<skdx-timeline-opposite>${i.renderOpposite?i.renderOpposite(e,t):e.opposite}</skdx-timeline-opposite>`:n}
+          <skdx-timeline-indicator aria-label=${e.indicatorLabel??n}
+            >${e.indicator??n}</skdx-timeline-indicator
           >
-          ${n<m.length-1?o`<skdx-timeline-separator></skdx-timeline-separator>`:i}
+          ${t<o.length-1?r`<skdx-timeline-separator></skdx-timeline-separator>`:n}
           <skdx-timeline-content
-            >${t.renderContent?t.renderContent(e,n):e.content}</skdx-timeline-content
+            >${i.renderContent?i.renderContent(e,t):e.content}</skdx-timeline-content
           >
         </skdx-timeline-item>
-      `),t,{host:t})}export{T as TIMELINE_ANATOMY_GENERATED,$ as fillTimelineAnatomy};
+      `),i,{host:i})}export{T as TIMELINE_ANATOMY_GENERATED,$ as fillTimelineAnatomy};

package/dist/tooltip/Tooltip.cjs

@@ -0,0 +1 @@
+"use strict";var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var a=(t,e)=>{for(var s in e)i(t,s,{get:e[s],enumerable:!0})},c=(t,e,s,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of d(e))!m.call(t,o)&&o!==s&&i(t,o,{get:()=>e[o],enumerable:!(n=p(e,o))||n.enumerable});return t};var x=t=>c(i({},"__esModule",{value:!0}),t);var f={};a(f,{SkdxTooltip:()=>l});module.exports=x(f);var r=require("../popover/Popover.cjs"),l=class extends r.SkdxPopover{constructor(){super(),this.role="tooltip",this.openOn="hover"}};customElements.get("skdx-tooltip")===void 0&&customElements.define("skdx-tooltip",l);0&&(module.exports={SkdxTooltip});

package/dist/tooltip/Tooltip.d.cts

@@ -0,0 +1,20 @@
+import { SkdxPopover } from '../popover/Popover.cjs';
+/**
+ * Tooltip alias of `<skdx-popover>`: the same element with `role="tooltip"` and `open-on="hover"` as defaults. Every popover attribute, property, event and slot applies; compose the popover parts directly for full control.
+ *
+ * @example
+ * ```html
+ * <skdx-tooltip side="top">
+ *   <button slot="trigger">Save</button>
+ *   Keeps the draft without leaving this page
+ * </skdx-tooltip>
+ * ```
+ */
+export declare class SkdxTooltip extends SkdxPopover {
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tooltip': SkdxTooltip;
+    }
+}

package/dist/tooltip/Tooltip.d.ts

@@ -0,0 +1,20 @@
+import { SkdxPopover } from '../popover/Popover.js';
+/**
+ * Tooltip alias of `<skdx-popover>`: the same element with `role="tooltip"` and `open-on="hover"` as defaults. Every popover attribute, property, event and slot applies; compose the popover parts directly for full control.
+ *
+ * @example
+ * ```html
+ * <skdx-tooltip side="top">
+ *   <button slot="trigger">Save</button>
+ *   Keeps the draft without leaving this page
+ * </skdx-tooltip>
+ * ```
+ */
+export declare class SkdxTooltip extends SkdxPopover {
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tooltip': SkdxTooltip;
+    }
+}

package/dist/tooltip/Tooltip.js

@@ -0,0 +1 @@
+import{SkdxPopover as t}from"../popover/Popover.js";var e=class extends t{constructor(){super(),this.role="tooltip",this.openOn="hover"}};customElements.get("skdx-tooltip")===void 0&&customElements.define("skdx-tooltip",e);export{e as SkdxTooltip};

package/dist/tooltip/index.cjs

@@ -0,0 +1 @@
+"use strict";var x=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var l=(p,o)=>{for(var t in o)x(p,t,{get:o[t],enumerable:!0})},m=(p,o,t,d)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of i(o))!k.call(p,r)&&r!==t&&x(p,r,{get:()=>o[r],enumerable:!(d=f(o,r))||d.enumerable});return p};var S=p=>m(x({},"__esModule",{value:!0}),p);var T={};l(T,{SkdxTooltip:()=>e.SkdxTooltip});module.exports=S(T);var e=require("./Tooltip.cjs");0&&(module.exports={SkdxTooltip});

package/dist/tooltip/index.d.cts

@@ -0,0 +1 @@
+export { SkdxTooltip } from './Tooltip.cjs';

package/dist/tooltip/index.d.ts

@@ -0,0 +1 @@
+export { SkdxTooltip } from './Tooltip.js';

package/dist/tooltip/index.js

@@ -0,0 +1 @@
+import{SkdxTooltip as r}from"./Tooltip.js";export{r as SkdxTooltip};

package/dist/tour/TourAnatomy.cjs

@@ -1 +1 @@
-"use strict";var c=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var h=(t,e)=>{for(var n in e)c(t,n,{get:e[n],enumerable:!0})},v=(t,e,n,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of f(e))!g.call(t,r)&&r!==n&&c(t,r,{get:()=>e[r],enumerable:!(o=E(e,r))||o.enumerable});return t};var S=t=>v(c({},"__esModule",{value:!0}),t);var y={};h(y,{TOUR_ANATOMY_GENERATED:()=>s,fillTourAnatomy:()=>T,refreshTourAnatomyText:()=>k});module.exports=S(y);var a=require("lit"),l=require("../internal/authored.cjs"),x=require("../internal/glyphs.cjs"),A=require("./TourPortal.cjs"),I=require("./TourBackdrop.cjs"),b=require("./TourSpotlight.cjs"),B=require("./TourContent.cjs"),G=require("./TourTitle.cjs"),N=require("./TourDescription.cjs"),O=require("./TourProgressText.cjs"),R=require("./TourActions.cjs"),w=require("./TourNextTrigger.cjs"),D=require("./TourPrevTrigger.cjs"),P=require("./TourSkipTrigger.cjs"),_=require("./TourCloseTrigger.cjs"),s="data-skdx-tour-generated";function T(t){let e=[],n=document.createElement("skdx-tour-content");t.activeStep?.title&&n.append(document.createElement("skdx-tour-title")),t.activeStep?.description&&n.append(document.createElement("skdx-tour-description")),t.showProgress&&n.append(document.createElement("skdx-tour-progress-text"));let o=document.createElement("skdx-tour-actions"),r=document.createElement("skdx-tour-prev-trigger");r.textContent="Back";let i=document.createElement("skdx-tour-next-trigger");if(i.textContent=t.step>=t.total-1?"Done":"Next",o.append(r,i),t.showSkip){let m=document.createElement("skdx-tour-skip-trigger");m.textContent="Skip",o.append(m)}let p=document.createElement("skdx-tour-close-trigger");p.setAttribute("aria-label","Close tour"),(0,a.render)(x.closeGlyph,p),o.append(p),n.append(o);let d=document.createElement("skdx-tour-portal");d.setAttribute(s,""),d.append(document.createElement("skdx-tour-backdrop")),t.spotlight&&d.append(document.createElement("skdx-tour-spotlight")),d.append(n),e.push(d),t.replaceChildren(...e),k(t)}function k(t){if(!(0,l.hasGeneratedContent)(t,s))return;let e=document.getElementById(t.contentId);e&&(u(e,"skdx-tour-title",t.activeStep?.title,t.titleId),u(e,"skdx-tour-description",t.activeStep?.description,t.descriptionId))}function u(t,e,n,o){let r=document.getElementById(o)??t.querySelector(e);if(!n){r?.remove();return}if(r){r.textContent=n;return}let i=document.createElement(e);i.textContent=n,t.prepend(i)}0&&(module.exports={TOUR_ANATOMY_GENERATED,fillTourAnatomy,refreshTourAnatomyText});
+"use strict";var c=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var h=(t,e)=>{for(var n in e)c(t,n,{get:e[n],enumerable:!0})},v=(t,e,n,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of f(e))!g.call(t,r)&&r!==n&&c(t,r,{get:()=>e[r],enumerable:!(o=E(e,r))||o.enumerable});return t};var S=t=>v(c({},"__esModule",{value:!0}),t);var y={};h(y,{TOUR_ANATOMY_GENERATED:()=>s,fillTourAnatomy:()=>T,refreshTourAnatomyText:()=>k});module.exports=S(y);var a=require("lit"),l=require("../internal/authored.cjs"),x=require("../internal/glyphs.cjs"),C=require("./TourPortal.cjs"),I=require("./TourBackdrop.cjs"),b=require("./TourSpotlight.cjs"),B=require("./TourContent.cjs"),G=require("./TourTitle.cjs"),O=require("./TourDescription.cjs"),R=require("./TourProgressText.cjs"),w=require("./TourActions.cjs"),N=require("./TourNextTrigger.cjs"),P=require("./TourPrevTrigger.cjs"),_=require("./TourSkipTrigger.cjs"),q=require("./TourCloseTrigger.cjs"),D=require("./TourTrigger.cjs"),s="data-skdx-tour-generated";function T(t){let e=[],n=document.createElement("skdx-tour-content");t.activeStep?.title&&n.append(document.createElement("skdx-tour-title")),t.activeStep?.description&&n.append(document.createElement("skdx-tour-description")),t.showProgress&&n.append(document.createElement("skdx-tour-progress-text"));let o=document.createElement("skdx-tour-actions"),r=document.createElement("skdx-tour-prev-trigger");r.textContent="Back";let d=document.createElement("skdx-tour-next-trigger");if(o.append(r,d),t.showSkip){let m=document.createElement("skdx-tour-skip-trigger");m.textContent="Skip",o.append(m)}let p=document.createElement("skdx-tour-close-trigger");p.setAttribute("aria-label","Close tour"),(0,a.render)(x.closeGlyph,p),o.append(p),n.append(o);let i=document.createElement("skdx-tour-portal");i.setAttribute(s,""),i.append(document.createElement("skdx-tour-backdrop")),t.spotlight&&i.append(document.createElement("skdx-tour-spotlight")),i.append(n),e.push(i),t.replaceChildren(...e),k(t)}function k(t){if(!(0,l.hasGeneratedContent)(t,s))return;let e=document.getElementById(t.contentId);e&&(u(e,"skdx-tour-title",t.activeStep?.title,t.titleId),u(e,"skdx-tour-description",t.activeStep?.description,t.descriptionId))}function u(t,e,n,o){let r=document.getElementById(o)??t.querySelector(e);if(!n){r?.remove();return}if(r){r.textContent=n;return}let d=document.createElement(e);d.textContent=n,t.prepend(d)}0&&(module.exports={TOUR_ANATOMY_GENERATED,fillTourAnatomy,refreshTourAnatomyText});

package/dist/tour/TourAnatomy.d.cts

@@ -11,6 +11,7 @@ import './TourNextTrigger.cjs';
 import './TourPrevTrigger.cjs';
 import './TourSkipTrigger.cjs';
 import './TourCloseTrigger.cjs';
+import './TourTrigger.cjs';
 /** @internal Marks a direct child of `<skdx-tour>` this module generated. */
 export declare const TOUR_ANATOMY_GENERATED = "data-skdx-tour-generated";
 /**

package/dist/tour/TourAnatomy.d.ts

@@ -11,6 +11,7 @@ import './TourNextTrigger.js';
 import './TourPrevTrigger.js';
 import './TourSkipTrigger.js';
 import './TourCloseTrigger.js';
+import './TourTrigger.js';
 /** @internal Marks a direct child of `<skdx-tour>` this module generated. */
 export declare const TOUR_ANATOMY_GENERATED = "data-skdx-tour-generated";
 /**

package/dist/tour/TourAnatomy.js

@@ -1 +1 @@
-import{render as u}from"lit";import{hasGeneratedContent as a}from"../internal/authored.js";import{closeGlyph as l}from"../internal/glyphs.js";import"./TourPortal.js";import"./TourBackdrop.js";import"./TourSpotlight.js";import"./TourContent.js";import"./TourTitle.js";import"./TourDescription.js";import"./TourProgressText.js";import"./TourActions.js";import"./TourNextTrigger.js";import"./TourPrevTrigger.js";import"./TourSkipTrigger.js";import"./TourCloseTrigger.js";var m="data-skdx-tour-generated";function N(t){let e=[],n=document.createElement("skdx-tour-content");t.activeStep?.title&&n.append(document.createElement("skdx-tour-title")),t.activeStep?.description&&n.append(document.createElement("skdx-tour-description")),t.showProgress&&n.append(document.createElement("skdx-tour-progress-text"));let r=document.createElement("skdx-tour-actions"),o=document.createElement("skdx-tour-prev-trigger");o.textContent="Back";let i=document.createElement("skdx-tour-next-trigger");if(i.textContent=t.step>=t.total-1?"Done":"Next",r.append(o,i),t.showSkip){let c=document.createElement("skdx-tour-skip-trigger");c.textContent="Skip",r.append(c)}let p=document.createElement("skdx-tour-close-trigger");p.setAttribute("aria-label","Close tour"),u(l,p),r.append(p),n.append(r);let d=document.createElement("skdx-tour-portal");d.setAttribute(m,""),d.append(document.createElement("skdx-tour-backdrop")),t.spotlight&&d.append(document.createElement("skdx-tour-spotlight")),d.append(n),e.push(d),t.replaceChildren(...e),x(t)}function x(t){if(!a(t,m))return;let e=document.getElementById(t.contentId);e&&(s(e,"skdx-tour-title",t.activeStep?.title,t.titleId),s(e,"skdx-tour-description",t.activeStep?.description,t.descriptionId))}function s(t,e,n,r){let o=document.getElementById(r)??t.querySelector(e);if(!n){o?.remove();return}if(o){o.textContent=n;return}let i=document.createElement(e);i.textContent=n,t.prepend(i)}export{m as TOUR_ANATOMY_GENERATED,N as fillTourAnatomy,x as refreshTourAnatomyText};
+import{render as u}from"lit";import{hasGeneratedContent as a}from"../internal/authored.js";import{closeGlyph as l}from"../internal/glyphs.js";import"./TourPortal.js";import"./TourBackdrop.js";import"./TourSpotlight.js";import"./TourContent.js";import"./TourTitle.js";import"./TourDescription.js";import"./TourProgressText.js";import"./TourActions.js";import"./TourNextTrigger.js";import"./TourPrevTrigger.js";import"./TourSkipTrigger.js";import"./TourCloseTrigger.js";import"./TourTrigger.js";var m="data-skdx-tour-generated";function R(t){let e=[],n=document.createElement("skdx-tour-content");t.activeStep?.title&&n.append(document.createElement("skdx-tour-title")),t.activeStep?.description&&n.append(document.createElement("skdx-tour-description")),t.showProgress&&n.append(document.createElement("skdx-tour-progress-text"));let r=document.createElement("skdx-tour-actions"),o=document.createElement("skdx-tour-prev-trigger");o.textContent="Back";let d=document.createElement("skdx-tour-next-trigger");if(r.append(o,d),t.showSkip){let c=document.createElement("skdx-tour-skip-trigger");c.textContent="Skip",r.append(c)}let p=document.createElement("skdx-tour-close-trigger");p.setAttribute("aria-label","Close tour"),u(l,p),r.append(p),n.append(r);let i=document.createElement("skdx-tour-portal");i.setAttribute(m,""),i.append(document.createElement("skdx-tour-backdrop")),t.spotlight&&i.append(document.createElement("skdx-tour-spotlight")),i.append(n),e.push(i),t.replaceChildren(...e),x(t)}function x(t){if(!a(t,m))return;let e=document.getElementById(t.contentId);e&&(s(e,"skdx-tour-title",t.activeStep?.title,t.titleId),s(e,"skdx-tour-description",t.activeStep?.description,t.descriptionId))}function s(t,e,n,r){let o=document.getElementById(r)??t.querySelector(e);if(!n){o?.remove();return}if(o){o.textContent=n;return}let d=document.createElement(e);d.textContent=n,t.prepend(d)}export{m as TOUR_ANATOMY_GENERATED,R as fillTourAnatomy,x as refreshTourAnatomyText};

package/dist/tour/TourContent.cjs

@@ -1,4 +1,4 @@
-"use strict";var f=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var F=(s,o)=>{for(var t in o)f(s,t,{get:o[t],enumerable:!0})},D=(s,o,t,e)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of O(o))!w.call(s,i)&&i!==t&&f(s,i,{get:()=>o[i],enumerable:!(e=b(o,i))||e.enumerable});return s};var P=s=>D(f({},"__esModule",{value:!0}),s),l=(s,o,t,e)=>{for(var i=e>1?void 0:e?b(o,t):o,a=s.length-1,d;a>=0;a--)(d=s[a])&&(i=(e?d(o,t,i):d(i))||i);return e&&i&&f(o,t,i),i};var K={};F(K,{SkdxTourContent:()=>r});module.exports=P(K);var c=require("lit"),u=require("lit/decorators.js"),g=require("../internal/define.cjs"),E=require("../internal/direction.cjs"),n=require("../internal/dismiss.cjs"),m=require("../internal/dismissal.cjs"),A=require("../internal/outsideInert.cjs"),y=require("../internal/positioning.cjs"),L=require("../internal/styles.cjs"),h=require("../internal/tabbable.cjs"),p=require("./tour-internal.cjs");function T(s){return Array.from(s.querySelectorAll("*")).filter(o=>o.matches(h.TABBABLE_SELECTOR)||!!o.shadowRoot?.querySelector(h.TABBABLE_SELECTOR))}function v(s){(s.matches(h.TABBABLE_SELECTOR)?s:s.shadowRoot?.querySelector(h.TABBABLE_SELECTOR)??s).focus({preventScroll:!0})}function S(s){if(!(s instanceof HTMLElement))return!1;if(s.isContentEditable||s.getAttribute("role")==="textbox")return!0;let o=s.localName;return o==="input"||o==="textarea"||o==="select"}var k=["position","left","top","transform"],r=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=>{this.root?.open&&(this._handleArrowNavigation(t)||this._handleTabCycle(t))};this.handleDocumentKeyDown=t=>{this.root?.open&&(0,m.handleEscapeKeyDown)(t,this.layer,e=>{(0,n.dispatchEscapeKeyDown)(this,e)&&this.root?.closeOnEscape&&this.root.skip()})};this.layer={insideElements:()=>[this]};this.handleOutsidePointerDown=t=>{let e=this.root;if(!e?.open)return;let i=t.target;!i||this.contains(i)||(0,n.dispatchOutside)(this,"pointer-down-outside",t)&&e.closeOnInteractOutside&&e.skip()};this.handleOutsideFocus=t=>{if(!this.root?.open)return;let e=(0,n.focusOutsideTarget)(t);!e||this.contains(e)||(0,n.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.releaseLayer?.(),this.releaseLayer=void 0,this.deactivatePosition(),this.focusedStep=-1,super.disconnectedCallback()}_syncAria(t,e){this.id?t.contentId=this.id:this.id=t.contentId,this.setAttribute("role","dialog"),e?this.setAttribute("aria-modal","true"):this.removeAttribute("aria-modal"),(0,A.setOutsideInert)(this,e);for(let[i,a,d]of[["skdx-tour-title","aria-labelledby",t.titleId],["skdx-tour-description","aria-describedby",t.descriptionId]])this.querySelector(i)?this.setAttribute(a,d):this.removeAttribute(a);this.hasAttribute("tabindex")||(this.tabIndex=-1)}_syncDataAttrs(t,e){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"),t.keyboardNavigation?this.setAttribute("data-keyboard-navigation",""):this.removeAttribute("data-keyboard-navigation"),t.activeStep?.backdrop!==!1?this.setAttribute("data-backdrop",""):this.removeAttribute("data-backdrop")}_syncLayer(t){t?this.releaseLayer??(this.releaseLayer=(0,m.pushDismissLayer)(this.layer)):(this.releaseLayer?.(),this.releaseLayer=void 0)}sync(){let t=this.root;if(!t)return;let e=t.open,i=e&&t.preventInteraction;this._syncAria(t,i),this._syncDataAttrs(t,e),this.hidden=!e,this._syncLayer(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,y.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 k)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,n.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,n.focusOnOpen)(()=>{this.focusFrame=void 0,(0,n.dispatchAutoFocus)(this,"open-auto-focus")&&this.focus({preventScroll:!0})})))}_handleArrowNavigation(t){let e=this.root;if(!e?.keyboardNavigation||t.defaultPrevented||t.altKey||t.ctrlKey||t.metaKey||S(t.target))return!1;let i=(0,E.resolveDirection)(this)==="rtl";return t.key==="ArrowRight"?(i?e.prev():e.next(),t.preventDefault(),!0):t.key==="ArrowLeft"?(i?e.next():e.prev(),t.preventDefault(),!0):!1}_handleTabCycle(t){if(t.key!=="Tab")return;let e=T(this);if(e.length===0){t.preventDefault();return}let i=e[0],a=e[e.length-1],d=document.activeElement;t.shiftKey&&(d===i||d===this)?(t.preventDefault(),v(a)):!t.shiftKey&&d===a&&(t.preventDefault(),v(i))}render(){return c.html`<slot></slot>`}};r.styles=[c.css`
+"use strict";var m=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var F=(s,o)=>{for(var t in o)m(s,t,{get:o[t],enumerable:!0})},D=(s,o,t,e)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of O(o))!w.call(s,i)&&i!==t&&m(s,i,{get:()=>o[i],enumerable:!(e=b(o,i))||e.enumerable});return s};var P=s=>D(m({},"__esModule",{value:!0}),s),l=(s,o,t,e)=>{for(var i=e>1?void 0:e?b(o,t):o,a=s.length-1,d;a>=0;a--)(d=s[a])&&(i=(e?d(o,t,i):d(i))||i);return e&&i&&m(o,t,i),i};var K={};F(K,{SkdxTourContent:()=>r});module.exports=P(K);var h=require("lit"),u=require("lit/decorators.js"),g=require("../internal/define.cjs"),E=require("../internal/direction.cjs"),n=require("../internal/dismiss.cjs"),c=require("../internal/dismissal.cjs"),A=require("../internal/outsideInert.cjs"),y=require("../internal/positioning.cjs"),L=require("../internal/styles.cjs"),p=require("../internal/tabbable.cjs"),f=require("./tour-internal.cjs");function T(s){return Array.from(s.querySelectorAll("*")).filter(o=>o.matches(p.TABBABLE_SELECTOR)||!!o.shadowRoot?.querySelector(p.TABBABLE_SELECTOR))}function v(s){(s.matches(p.TABBABLE_SELECTOR)?s:s.shadowRoot?.querySelector(p.TABBABLE_SELECTOR)??s).focus({preventScroll:!0})}function S(s){if(!(s instanceof HTMLElement))return!1;if(s.isContentEditable||s.getAttribute("role")==="textbox")return!0;let o=s.localName;return o==="input"||o==="textarea"||o==="select"}var k=["position","left","top","transform"],r=class extends h.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=>{this.root?.open&&(this._handleArrowNavigation(t)||this._handleTabCycle(t))};this.handleDocumentKeyDown=t=>{this.root?.open&&(0,c.handleEscapeKeyDown)(t,this.layer,e=>{(0,n.dispatchEscapeKeyDown)(this,e)&&this.root?.closeOnEscape&&this.root.skip()})};this.layer={insideElements:()=>[this]};this.handleOutsidePointerDown=t=>{let e=this.root;if(!e?.open)return;let i=t.target;!i||this.contains(i)||(0,c.nestedLayerContains)(this.layer,i)||(0,n.dispatchOutside)(this,"pointer-down-outside",t)&&e.closeOnInteractOutside&&e.skip()};this.handleOutsideFocus=t=>{if(!this.root?.open)return;let e=(0,n.focusOutsideTarget)(t);!e||this.contains(e)||(0,c.nestedLayerContains)(this.layer,e)||(0,n.dispatchOutside)(this,"focus-outside",t)}}connectedCallback(){if(super.connectedCallback(),this.root=(0,f.findTourRoot)(this),!this.root)throw new Error("<skdx-tour-content> must be used inside <skdx-tour>.");this.root.addEventListener(f.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(f.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.releaseLayer?.(),this.releaseLayer=void 0,this.deactivatePosition(),this.focusedStep=-1,super.disconnectedCallback()}_syncAria(t,e){this.id?t.contentId=this.id:this.id=t.contentId,this.setAttribute("role","dialog"),e?this.setAttribute("aria-modal","true"):this.removeAttribute("aria-modal"),(0,A.setOutsideInert)(this,e);for(let[i,a,d]of[["skdx-tour-title","aria-labelledby",t.titleId],["skdx-tour-description","aria-describedby",t.descriptionId]])this.querySelector(i)?this.setAttribute(a,d):this.removeAttribute(a);this.hasAttribute("tabindex")||(this.tabIndex=-1)}_syncDataAttrs(t,e){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"),t.keyboardNavigation?this.setAttribute("data-keyboard-navigation",""):this.removeAttribute("data-keyboard-navigation"),t.activeStep?.backdrop!==!1?this.setAttribute("data-backdrop",""):this.removeAttribute("data-backdrop")}_syncLayer(t){t?this.releaseLayer??(this.releaseLayer=(0,c.pushDismissLayer)(this.layer)):(this.releaseLayer?.(),this.releaseLayer=void 0)}sync(){let t=this.root;if(!t)return;let e=t.open,i=e&&t.preventInteraction;this._syncAria(t,i),this._syncDataAttrs(t,e),this.hidden=!e,this._syncLayer(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,y.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 k)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,n.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,n.focusOnOpen)(()=>{this.focusFrame=void 0,(0,n.dispatchAutoFocus)(this,"open-auto-focus")&&this.focus({preventScroll:!0})})))}_handleArrowNavigation(t){let e=this.root;if(!e?.keyboardNavigation||t.defaultPrevented||t.altKey||t.ctrlKey||t.metaKey||S(t.target))return!1;let i=(0,E.resolveDirection)(this)==="rtl";return t.key==="ArrowRight"?(i?e.prev():e.next(),t.preventDefault(),!0):t.key==="ArrowLeft"?(i?e.next():e.prev(),t.preventDefault(),!0):!1}_handleTabCycle(t){if(t.key!=="Tab")return;let e=T(this);if(e.length===0){t.preventDefault();return}let i=e[0],a=e[e.length-1],d=document.activeElement;t.shiftKey&&(d===i||d===this)?(t.preventDefault(),v(a)):!t.shiftKey&&d===a&&(t.preventDefault(),v(i))}render(){return h.html`<slot></slot>`}};r.styles=[h.css`
       :host {
         display: block;
       }