@skdx/web-components 0.26.0 → 0.28.0

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

@@ -1,38 +1,28 @@
 import { LitElement } from 'lit';
 /**
- * `<skdx-tags-input-input>` — the text field for typing and committing new
- * tags within a `<skdx-tags-input>`. Renders a native `<input type="text">`
- * whose draft text lives on the root
- * (`<skdx-tags-input>`'s `inputValue`, so it is controllable from outside),
- * plus `aria-invalid`/`data-invalid` and the native `readonly` attribute
- * with `aria-readonly`/`data-readonly` from the root. Enter or the root's
- * `delimiter` commits the draft as a tag; Backspace on an empty field
- * removes the last tag; pasting splits on the delimiter and commits every
- * piece at once while the root's `addOnPaste` is set. Must be used inside
- * `<skdx-tags-input>`.
+ * Text field for typing and committing new tags inside `<skdx-tags-input>`.
+ * Renders native `<input>` with draft text on root (`inputValue`), so it's
+ * controllable outside. Mirrors root's `aria-invalid`, `data-invalid`,
+ * `readonly`, `aria-readonly`.
  *
- * Renders **into light DOM** (`createRenderRoot()` returns `this` — no shadow
- * root), for the same reason `<skdx-text-field-input>` does: behind a shadow
- * boundary a wrapping `<label>` cannot name the `<input>` (a label names its
- * first labelable *descendant*) and `<skdx-field>`'s `findFieldControl()` cannot
- * see it (`querySelectorAll()` does not pierce a shadow root). Putting
- * `display: contents` on the `<input>` instead is not an option: CSS Display 3
- * computes it to `none` on form controls.
+ * Enter or single-char delimiter entry commits; Backspace on empty removes last
+ * tag; paste splits on delimiters and commits all (if `addOnPaste` is set).
+ * Focus blur behavior controlled by root's `blurBehavior`.
  *
- * @csspart input - The native `<input>` element. **`::part(input)` does not reach it.**
- * This element renders into the light DOM (see `createRenderRoot` below) and `::part()`
- * only matches inside a shadow root, so the `part` attribute is inert here. It is kept so
- * the name matches the shadow-DOM components and the styling-hooks contract. Style it as an
- * ordinary descendant instead: `skdx-tags-input-input > input { … }`.
+ * Renders into light DOM (no shadow root) so wrapping `<label>` can name it
+ * and `<skdx-field>`'s `findFieldControl()` can see it. `display: contents`
+ * doesn't work on form controls.
+ *
+ * @csspart input - `<input>` element. **`::part(input)` does not reach it**
+ * (renders light DOM; `::part()` only matches in shadow). Kept for contract
+ * consistency. Style as descendant: `skdx-tags-input-input > input { … }`.
  */
 export declare class SkdxTagsInputInput extends LitElement {
     /** Light DOM, for the labelling reasons in the class docblock. */
     createRenderRoot(): this;
     /**
-     * Reaches through to the native `<input>` — `focusDeleteNeighbor()` on the
-     * root lands here when the tag being removed was the only one. The shadow
-     * root used to carry `delegatesFocus`, which did this for free; a light-DOM
-     * element has to forward focus itself.
+     * Forward focus to inner `<input>`: lands here when the tag being deleted
+     * was the only one. Light DOM has no `delegatesFocus`.
      */
     focus(options?: FocusOptions): void;
     /**
@@ -48,6 +38,7 @@ export declare class SkdxTagsInputInput extends LitElement {
     private readonly handleRootUpdate;
     private readonly handleInput;
     private readonly handleKeydown;
+    private readonly handleBlur;
     private readonly handlePaste;
     private _clearDraft;
     render(): import("lit").TemplateResult<1>;

package/dist/tags-input/TagsInputInput.js

@@ -1,18 +1,20 @@
-var u=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var l=(s,r,t,o)=>{for(var e=o>1?void 0:o?h(r,t):r,n=s.length-1,d;n>=0;n--)(d=s[n])&&(e=(o?d(r,t,e):d(e))||e);return o&&e&&u(r,t,e),e};import{html as p,LitElement as c,nothing as a}from"lit";import{property as v}from"lit/decorators.js";import{customElement as g}from"../internal/define.js";import{installLightDomStyles as m}from"../internal/styles.js";var i=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||(t.key==="Enter"||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.handlePaste=t=>{!this.root||this.root.disabled||!this.root.addOnPaste||(t.preventDefault(),this.root.addTags((t.clipboardData?.getData("text")??"").split(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(),m(),this.root=this.closest("skdx-tags-input"),!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("skdx-tags-input-internal-update",this.handleRootUpdate)}disconnectedCallback(){this.root?.removeEventListener("skdx-tags-input-internal-update",this.handleRootUpdate),super.disconnectedCallback()}_clearDraft(t){this.root?.setInputValue(""),t.value=""}render(){let t=this.root;return t?p`
+var u=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var d=(n,i,t,e)=>{for(var a=e>1?void 0:e?h(i,t):i,s=n.length-1,l;s>=0;s--)(l=n[s])&&(a=(e?l(i,t,a):l(a))||a);return e&&a&&u(i,t,a),a};import{html as p,LitElement as c,nothing as r}from"lit";import{property as m}from"lit/decorators.js";import{customElement as v}from"../internal/define.js";import{installLightDomStyles as g}from"../internal/styles.js";import{commitsOnKey as y,splitOnDelimiters as f}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||(t.key==="Enter"||y(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.addOnPaste||(t.preventDefault(),this.root.addTags(f(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=this.closest("skdx-tags-input"),!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("skdx-tags-input-internal-update",this.handleRootUpdate)}disconnectedCallback(){this.root?.removeEventListener("skdx-tags-input-internal-update",this.handleRootUpdate),super.disconnectedCallback()}_clearDraft(t){this.root?.setInputValue(""),t.value=""}render(){let t=this.root;return t?p`
       <input
         part="input"
         type="text"
-        placeholder=${this.placeholder??a}
+        placeholder=${this.placeholder??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}
       />
-    `:p``}};l([v({type:String})],i.prototype,"placeholder",2),i=l([g("skdx-tags-input-input","tags-input","input")],i);export{i as SkdxTagsInputInput};
+    `:p``}};d([m({type:String})],o.prototype,"placeholder",2),o=d([v("skdx-tags-input-input","tags-input","input")],o);export{o as SkdxTagsInputInput};

package/dist/tags-input/TagsInputItem.cjs

@@ -1,5 +1,5 @@
-"use strict";var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var v=(s,t)=>{for(var i in t)d(s,i,{get:t[i],enumerable:!0})},g=(s,t,i,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of m(t))!b.call(s,e)&&e!==i&&d(s,e,{get:()=>t[e],enumerable:!(o=c(t,e))||o.enumerable});return s};var k=s=>g(d({},"__esModule",{value:!0}),s),p=(s,t,i,o)=>{for(var e=o>1?void 0:o?c(t,i):t,n=s.length-1,l;n>=0;n--)(l=s[n])&&(e=(o?l(t,i,e):l(e))||e);return o&&e&&d(t,i,e),e};var y={};v(y,{SkdxTagsInputItem:()=>r});module.exports=k(y);var a=require("lit"),u=require("lit/decorators.js"),h=require("../internal/define.cjs");var r=class extends a.LitElement{constructor(){super(...arguments);this.index=0;this.root=null;this.handleRootUpdate=()=>this.syncDisabled()}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-tags-input"),!this.root)throw new Error("<skdx-tags-input-item> must be used inside <skdx-tags-input>.");this.root.addEventListener("skdx-tags-input-internal-update",this.handleRootUpdate),this.syncDisabled()}disconnectedCallback(){this.root?.removeEventListener("skdx-tags-input-internal-update",this.handleRootUpdate),super.disconnectedCallback()}syncDisabled(){this.root?.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled")}render(){return a.html`<slot></slot>`}};r.styles=a.css`
+"use strict";var n=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var f=(s,e)=>{for(var t in e)n(s,t,{get:e[t],enumerable:!0})},g=(s,e,t,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of v(e))!m.call(s,i)&&i!==t&&n(s,i,{get:()=>e[i],enumerable:!(o=p(e,i))||o.enumerable});return s};var x=s=>g(n({},"__esModule",{value:!0}),s),c=(s,e,t,o)=>{for(var i=o>1?void 0:o?p(e,t):e,h=s.length-1,l;h>=0;h--)(l=s[h])&&(i=(o?l(e,t,i):l(i))||i);return o&&i&&n(e,t,i),i};var k={};f(k,{SkdxTagsInputItem:()=>r});module.exports=x(k);var d=require("lit"),u=require("lit/decorators.js"),y=require("../internal/define.cjs"),b=require("../internal/direction.cjs"),a=require("./TagsInput.cjs");var r=class extends d.LitElement{constructor(){super(...arguments);this.index=0;this.root=null;this.handleRootUpdate=()=>{this.syncDisabled(),this.syncTabStop(),this.syncEditing()};this.handleFocus=()=>this.root?.setActiveIndex(this.index);this.handleKeydown=t=>{if(!this.root)return;let o=(0,b.directionalKey)(t.key,this);if(o==="ArrowRight"||o==="ArrowLeft"){t.preventDefault(),(0,a.focusTagStep)(this,o==="ArrowRight"?1:-1);return}if(t.key==="Enter"){if(!this.root.editable||this.root.disabled||this.root.readOnly)return;t.preventDefault(),this.root.setEditingIndex(this.index);return}t.key!=="Delete"&&t.key!=="Backspace"||this.root.disabled||this.root.readOnly||(t.preventDefault(),this.root.setActiveIndex((0,a.focusDeleteNeighbor)(this,this.index)),this.root.removeTag(this.index))}}updated(){this.syncTabStop(),this.syncEditing()}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-tags-input"),!this.root)throw new Error("<skdx-tags-input-item> must be used inside <skdx-tags-input>.");this.root.addEventListener("skdx-tags-input-internal-update",this.handleRootUpdate),this.setAttribute("data-skdx-tags-input-item",""),this.addEventListener("focus",this.handleFocus),this.addEventListener("keydown",this.handleKeydown),this.syncDisabled(),this.syncTabStop(),this.syncEditing()}disconnectedCallback(){this.root?.removeEventListener("skdx-tags-input-internal-update",this.handleRootUpdate),this.removeEventListener("focus",this.handleFocus),this.removeEventListener("keydown",this.handleKeydown),super.disconnectedCallback()}syncEditing(){this.root?.editingIndex===this.index?this.setAttribute("data-editing",""):this.removeAttribute("data-editing")}syncDisabled(){this.root?.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled")}syncTabStop(){let t=!this.root?.disabled&&this.root?.tabStopIndex===this.index;this.setAttribute("tabindex",t?"0":"-1")}render(){return d.html`<slot></slot>`}};r.styles=d.css`
     :host {
       display: contents;
     }
-  `,p([(0,u.property)({type:Number})],r.prototype,"index",2),r=p([(0,h.customElement)("skdx-tags-input-item","tags-input","item")],r);0&&(module.exports={SkdxTagsInputItem});
+  `,c([(0,u.property)({type:Number})],r.prototype,"index",2),r=c([(0,y.customElement)("skdx-tags-input-item","tags-input","item")],r);0&&(module.exports={SkdxTagsInputItem});

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

@@ -1,20 +1,25 @@
 import { LitElement } from 'lit';
 /**
- * `<skdx-tags-input-item>` — a single rendered tag within a
- * `<skdx-tags-input>`. Renders `display: contents` plus `data-disabled`
- * mirroring the root; typically wraps the tag's label and a
- * `<skdx-tags-input-item-delete>` button. Must be used inside
+ * Single rendered tag within `<skdx-tags-input>`. Renders `display: contents`
+ * plus `data-disabled`. One Tab stop per strip (ArrowLeft/ArrowRight navigate,
+ * Enter opens for editing, Delete/Backspace removes). Must be inside
  * `<skdx-tags-input>`.
  */
 export declare class SkdxTagsInputItem extends LitElement {
     static styles: import("lit").CSSResult;
     /** This tag's position in the list, zero-based. */
     index: number;
+    protected updated(): void;
     private root;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private readonly handleRootUpdate;
+    /** The styling hook for "this tag is open in its editor", mirroring the other four packages. */
+    private syncEditing;
     private syncDisabled;
+    private syncTabStop;
+    private readonly handleFocus;
+    private readonly handleKeydown;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

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

@@ -1,20 +1,25 @@
 import { LitElement } from 'lit';
 /**
- * `<skdx-tags-input-item>` — a single rendered tag within a
- * `<skdx-tags-input>`. Renders `display: contents` plus `data-disabled`
- * mirroring the root; typically wraps the tag's label and a
- * `<skdx-tags-input-item-delete>` button. Must be used inside
+ * Single rendered tag within `<skdx-tags-input>`. Renders `display: contents`
+ * plus `data-disabled`. One Tab stop per strip (ArrowLeft/ArrowRight navigate,
+ * Enter opens for editing, Delete/Backspace removes). Must be inside
  * `<skdx-tags-input>`.
  */
 export declare class SkdxTagsInputItem extends LitElement {
     static styles: import("lit").CSSResult;
     /** This tag's position in the list, zero-based. */
     index: number;
+    protected updated(): void;
     private root;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private readonly handleRootUpdate;
+    /** The styling hook for "this tag is open in its editor", mirroring the other four packages. */
+    private syncEditing;
     private syncDisabled;
+    private syncTabStop;
+    private readonly handleFocus;
+    private readonly handleKeydown;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/dist/tags-input/TagsInputItem.js

@@ -1,5 +1,5 @@
-var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var n=(o,s,r,i)=>{for(var t=i>1?void 0:i?p(s,r):s,a=o.length-1,d;a>=0;a--)(d=o[a])&&(t=(i?d(s,r,t):d(t))||t);return i&&t&&l(s,r,t),t};import{css as c,html as u,LitElement as h}from"lit";import{property as m}from"lit/decorators.js";import{customElement as b}from"../internal/define.js";var e=class extends h{constructor(){super(...arguments);this.index=0;this.root=null;this.handleRootUpdate=()=>this.syncDisabled()}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-tags-input"),!this.root)throw new Error("<skdx-tags-input-item> must be used inside <skdx-tags-input>.");this.root.addEventListener("skdx-tags-input-internal-update",this.handleRootUpdate),this.syncDisabled()}disconnectedCallback(){this.root?.removeEventListener("skdx-tags-input-internal-update",this.handleRootUpdate),super.disconnectedCallback()}syncDisabled(){this.root?.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled")}render(){return u`<slot></slot>`}};e.styles=c`
+var h=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var a=(r,o,t,e)=>{for(var i=e>1?void 0:e?l(o,t):o,d=r.length-1,n;d>=0;d--)(n=r[d])&&(i=(e?n(o,t,i):n(i))||i);return e&&i&&h(o,t,i),i};import{css as c,html as p,LitElement as u}from"lit";import{property as y}from"lit/decorators.js";import{customElement as b}from"../internal/define.js";import{directionalKey as v}from"../internal/direction.js";import{focusDeleteNeighbor as m,focusTagStep as f}from"./TagsInput.js";var s=class extends u{constructor(){super(...arguments);this.index=0;this.root=null;this.handleRootUpdate=()=>{this.syncDisabled(),this.syncTabStop(),this.syncEditing()};this.handleFocus=()=>this.root?.setActiveIndex(this.index);this.handleKeydown=t=>{if(!this.root)return;let e=v(t.key,this);if(e==="ArrowRight"||e==="ArrowLeft"){t.preventDefault(),f(this,e==="ArrowRight"?1:-1);return}if(t.key==="Enter"){if(!this.root.editable||this.root.disabled||this.root.readOnly)return;t.preventDefault(),this.root.setEditingIndex(this.index);return}t.key!=="Delete"&&t.key!=="Backspace"||this.root.disabled||this.root.readOnly||(t.preventDefault(),this.root.setActiveIndex(m(this,this.index)),this.root.removeTag(this.index))}}updated(){this.syncTabStop(),this.syncEditing()}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-tags-input"),!this.root)throw new Error("<skdx-tags-input-item> must be used inside <skdx-tags-input>.");this.root.addEventListener("skdx-tags-input-internal-update",this.handleRootUpdate),this.setAttribute("data-skdx-tags-input-item",""),this.addEventListener("focus",this.handleFocus),this.addEventListener("keydown",this.handleKeydown),this.syncDisabled(),this.syncTabStop(),this.syncEditing()}disconnectedCallback(){this.root?.removeEventListener("skdx-tags-input-internal-update",this.handleRootUpdate),this.removeEventListener("focus",this.handleFocus),this.removeEventListener("keydown",this.handleKeydown),super.disconnectedCallback()}syncEditing(){this.root?.editingIndex===this.index?this.setAttribute("data-editing",""):this.removeAttribute("data-editing")}syncDisabled(){this.root?.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled")}syncTabStop(){let t=!this.root?.disabled&&this.root?.tabStopIndex===this.index;this.setAttribute("tabindex",t?"0":"-1")}render(){return p`<slot></slot>`}};s.styles=c`
     :host {
       display: contents;
     }
-  `,n([m({type:Number})],e.prototype,"index",2),e=n([b("skdx-tags-input-item","tags-input","item")],e);export{e as SkdxTagsInputItem};
+  `,a([y({type:Number})],s.prototype,"index",2),s=a([b("skdx-tags-input-item","tags-input","item")],s);export{s as SkdxTagsInputItem};

package/dist/tags-input/TagsInputItemDelete.cjs

@@ -1,7 +1,8 @@
-"use strict";var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var f=(o,e)=>{for(var i in e)l(o,i,{get:e[i],enumerable:!0})},x=(o,e,i,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of g(e))!k.call(o,t)&&t!==i&&l(o,t,{get:()=>e[t],enumerable:!(s=u(e,t))||s.enumerable});return o};var y=o=>x(l({},"__esModule",{value:!0}),o),n=(o,e,i,s)=>{for(var t=s>1?void 0:s?u(e,i):e,p=o.length-1,c;p>=0;p--)(c=o[p])&&(t=(s?c(e,i,t):c(t))||t);return s&&t&&l(e,i,t),t};var C={};f(C,{SkdxTagsInputItemDelete:()=>r});module.exports=y(C);var d=require("lit"),h=require("lit/decorators.js"),b=require("../internal/define.cjs"),m=require("../internal/part.cjs"),a=require("../internal/styles.cjs"),v=require("./TagsInput.cjs");var r=class extends d.LitElement{constructor(){super(...arguments);this.index=0;this.root=null;this.handleRootUpdate=()=>this.requestUpdate();this.handleClick=()=>{!this.root||this.root.disabled||((0,v.focusDeleteNeighbor)(this),this.root.removeTag(this.index))}}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-tags-input"),!this.root)throw new Error("<skdx-tags-input-item-delete> must be used inside <skdx-tags-input>.");this.setAttribute("data-skdx-tags-input-delete",""),this.root.addEventListener("skdx-tags-input-internal-update",this.handleRootUpdate)}disconnectedCallback(){this.root?.removeEventListener("skdx-tags-input-internal-update",this.handleRootUpdate),super.disconnectedCallback()}updated(){(0,m.reflectHostState)(this,{"data-disabled":this.root?.disabled?"":null})}render(){let i=this.root,s=this.label??`Remove ${i?.value[this.index]??""}`.trim(),t=!!i?.disabled;return d.html`
+"use strict";var n=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var k=(o,e)=>{for(var i in e)n(o,i,{get:e[i],enumerable:!0})},f=(o,e,i,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of g(e))!x.call(o,t)&&t!==i&&n(o,t,{get:()=>e[t],enumerable:!(s=u(e,t))||s.enumerable});return o};var y=o=>f(n({},"__esModule",{value:!0}),o),l=(o,e,i,s)=>{for(var t=s>1?void 0:s?u(e,i):e,p=o.length-1,h;p>=0;p--)(h=o[p])&&(t=(s?h(e,i,t):h(t))||t);return s&&t&&n(e,i,t),t};var C={};k(C,{SkdxTagsInputItemDelete:()=>r});module.exports=y(C);var d=require("lit"),c=require("lit/decorators.js"),b=require("../internal/define.cjs"),m=require("../internal/part.cjs"),a=require("../internal/styles.cjs"),v=require("./TagsInput.cjs");var r=class extends d.LitElement{constructor(){super(...arguments);this.index=0;this.root=null;this.handleRootUpdate=()=>this.requestUpdate();this.handleClick=()=>{!this.root||this.root.disabled||(this.root.setActiveIndex((0,v.focusDeleteNeighbor)(this,this.index)),this.root.removeTag(this.index))}}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-tags-input"),!this.root)throw new Error("<skdx-tags-input-item-delete> must be used inside <skdx-tags-input>.");this.setAttribute("data-skdx-tags-input-delete",""),this.root.addEventListener("skdx-tags-input-internal-update",this.handleRootUpdate)}disconnectedCallback(){this.root?.removeEventListener("skdx-tags-input-internal-update",this.handleRootUpdate),super.disconnectedCallback()}updated(){(0,m.reflectHostState)(this,{"data-disabled":this.root?.disabled?"":null})}render(){let i=this.root,s=this.label??`Remove ${i?.value[this.index]??""}`.trim(),t=!!i?.disabled;return d.html`
       <button
         part="delete"
         type="button"
+        tabindex="-1"
         aria-label=${s}
         ?disabled=${t}
         data-disabled=${t?"":d.nothing}
@@ -13,4 +14,4 @@
       :host {
         display: inline-block;
       }
-    `,a.controlBoxOnHost],n([(0,h.property)({type:Number})],r.prototype,"index",2),n([(0,h.property)({type:String})],r.prototype,"label",2),r=n([(0,b.customElement)("skdx-tags-input-item-delete","tags-input","item-delete")],r);0&&(module.exports={SkdxTagsInputItemDelete});
+    `,a.controlBoxOnHost],l([(0,c.property)({type:Number})],r.prototype,"index",2),l([(0,c.property)({type:String})],r.prototype,"label",2),r=l([(0,b.customElement)("skdx-tags-input-item-delete","tags-input","item-delete")],r);0&&(module.exports={SkdxTagsInputItemDelete});

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

@@ -1,14 +1,8 @@
 import { LitElement } from 'lit';
 /**
- * `<skdx-tags-input-item-delete>` — removes its associated tag (by `index`)
- * from the closest `<skdx-tags-input>` on click. Renders a native
- * `<button type="button">` in shadow DOM with an auto-generated
- * `aria-label="Remove <tag>"`, disabled + `data-disabled` when the root is
- * disabled. Must be used inside `<skdx-tags-input>`.
- *
- * Because the button is its own tab stop, it hands focus to the next delete
- * button (or the previous one, or the draft field) *before* removing the tag,
- * so deleting a tag never drops focus onto `<body>`.
+ * `<skdx-tags-input-item-delete>` — removes the tag at `index` on click.
+ * Hands focus to the next/previous delete button before removing, so deleting
+ * never drops focus onto `<body>`.
  *
  * @csspart delete - The native `<button>` element inside the shadow root.
  */
@@ -18,12 +12,7 @@ export declare class SkdxTagsInputItemDelete extends LitElement {
     /** The tag's position in the list to remove on click, zero-based. */
     index: number;
     /**
-     * Accessible name for the inner `<button>`, replacing the generated
-     * `Remove <tag>`. The button lives in this element's shadow root, so an
-     * `aria-label` written on the host names nothing — this property is the only
-     * way in from markup, and "Remove" is not a word in every language. Set it
-     * per tag (the whole string, not a prefix), since it is what distinguishes
-     * one delete button from the next.
+     * Accessible name for the inner button, replacing the generated `Remove <tag>`.
      * @default undefined — keeps `` `Remove ${tag}` ``
      */
     label?: string;

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

@@ -1,14 +1,8 @@
 import { LitElement } from 'lit';
 /**
- * `<skdx-tags-input-item-delete>` — removes its associated tag (by `index`)
- * from the closest `<skdx-tags-input>` on click. Renders a native
- * `<button type="button">` in shadow DOM with an auto-generated
- * `aria-label="Remove <tag>"`, disabled + `data-disabled` when the root is
- * disabled. Must be used inside `<skdx-tags-input>`.
- *
- * Because the button is its own tab stop, it hands focus to the next delete
- * button (or the previous one, or the draft field) *before* removing the tag,
- * so deleting a tag never drops focus onto `<body>`.
+ * `<skdx-tags-input-item-delete>` — removes the tag at `index` on click.
+ * Hands focus to the next/previous delete button before removing, so deleting
+ * never drops focus onto `<body>`.
  *
  * @csspart delete - The native `<button>` element inside the shadow root.
  */
@@ -18,12 +12,7 @@ export declare class SkdxTagsInputItemDelete extends LitElement {
     /** The tag's position in the list to remove on click, zero-based. */
     index: number;
     /**
-     * Accessible name for the inner `<button>`, replacing the generated
-     * `Remove <tag>`. The button lives in this element's shadow root, so an
-     * `aria-label` written on the host names nothing — this property is the only
-     * way in from markup, and "Remove" is not a word in every language. Set it
-     * per tag (the whole string, not a prefix), since it is what distinguishes
-     * one delete button from the next.
+     * Accessible name for the inner button, replacing the generated `Remove <tag>`.
      * @default undefined — keeps `` `Remove ${tag}` ``
      */
     label?: string;

package/dist/tags-input/TagsInputItemDelete.js

@@ -1,7 +1,8 @@
-var p=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var r=(d,s,o,i)=>{for(var t=i>1?void 0:i?c(s,o):s,a=d.length-1,l;a>=0;a--)(l=d[a])&&(t=(i?l(s,o,t):l(t))||t);return i&&t&&p(s,o,t),t};import{css as h,html as u,LitElement as b,nothing as m}from"lit";import{property as n}from"lit/decorators.js";import{customElement as v}from"../internal/define.js";import{reflectHostState as g}from"../internal/part.js";import{controlBoxOnHost as k,delegatesFocusShadowRootOptions as f,hiddenHostStyles as x,resetNativeControl as y}from"../internal/styles.js";import{focusDeleteNeighbor as C}from"./TagsInput.js";var e=class extends b{constructor(){super(...arguments);this.index=0;this.root=null;this.handleRootUpdate=()=>this.requestUpdate();this.handleClick=()=>{!this.root||this.root.disabled||(C(this),this.root.removeTag(this.index))}}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-tags-input"),!this.root)throw new Error("<skdx-tags-input-item-delete> must be used inside <skdx-tags-input>.");this.setAttribute("data-skdx-tags-input-delete",""),this.root.addEventListener("skdx-tags-input-internal-update",this.handleRootUpdate)}disconnectedCallback(){this.root?.removeEventListener("skdx-tags-input-internal-update",this.handleRootUpdate),super.disconnectedCallback()}updated(){g(this,{"data-disabled":this.root?.disabled?"":null})}render(){let o=this.root,i=this.label??`Remove ${o?.value[this.index]??""}`.trim(),t=!!o?.disabled;return u`
+var p=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var r=(d,s,o,i)=>{for(var t=i>1?void 0:i?h(s,o):s,a=d.length-1,n;a>=0;a--)(n=d[a])&&(t=(i?n(s,o,t):n(t))||t);return i&&t&&p(s,o,t),t};import{css as c,html as u,LitElement as b,nothing as m}from"lit";import{property as l}from"lit/decorators.js";import{customElement as v}from"../internal/define.js";import{reflectHostState as g}from"../internal/part.js";import{controlBoxOnHost as x,delegatesFocusShadowRootOptions as k,hiddenHostStyles as f,resetNativeControl as y}from"../internal/styles.js";import{focusDeleteNeighbor as C}from"./TagsInput.js";var e=class extends b{constructor(){super(...arguments);this.index=0;this.root=null;this.handleRootUpdate=()=>this.requestUpdate();this.handleClick=()=>{!this.root||this.root.disabled||(this.root.setActiveIndex(C(this,this.index)),this.root.removeTag(this.index))}}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-tags-input"),!this.root)throw new Error("<skdx-tags-input-item-delete> must be used inside <skdx-tags-input>.");this.setAttribute("data-skdx-tags-input-delete",""),this.root.addEventListener("skdx-tags-input-internal-update",this.handleRootUpdate)}disconnectedCallback(){this.root?.removeEventListener("skdx-tags-input-internal-update",this.handleRootUpdate),super.disconnectedCallback()}updated(){g(this,{"data-disabled":this.root?.disabled?"":null})}render(){let o=this.root,i=this.label??`Remove ${o?.value[this.index]??""}`.trim(),t=!!o?.disabled;return u`
       <button
         part="delete"
         type="button"
+        tabindex="-1"
         aria-label=${i}
         ?disabled=${t}
         data-disabled=${t?"":m}
@@ -9,8 +10,8 @@ var p=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var r=(d,s,o,i
       >
         <slot></slot>
       </button>
-    `}};e.shadowRootOptions=f,e.styles=[y,x,h`
+    `}};e.shadowRootOptions=k,e.styles=[y,f,c`
       :host {
         display: inline-block;
       }
-    `,k],r([n({type:Number})],e.prototype,"index",2),r([n({type:String})],e.prototype,"label",2),e=r([v("skdx-tags-input-item-delete","tags-input","item-delete")],e);export{e as SkdxTagsInputItemDelete};
+    `,x],r([l({type:Number})],e.prototype,"index",2),r([l({type:String})],e.prototype,"label",2),e=r([v("skdx-tags-input-item-delete","tags-input","item-delete")],e);export{e as SkdxTagsInputItemDelete};

package/dist/tags-input/TagsInputItemInput.cjs

@@ -0,0 +1,13 @@
+"use strict";var d=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var E=(n,i)=>{for(var t in i)d(n,t,{get:i[t],enumerable:!0})},x=(n,i,t,e)=>{if(i&&typeof i=="object"||typeof i=="function")for(let r of v(i))!f.call(n,r)&&r!==t&&d(n,r,{get:()=>i[r],enumerable:!(e=h(i,r))||e.enumerable});return n};var y=n=>x(d({},"__esModule",{value:!0}),n),o=(n,i,t,e)=>{for(var r=e>1?void 0:e?h(i,t):i,l=n.length-1,p;l>=0;l--)(p=n[l])&&(r=(e?p(i,t,r):p(r))||r);return e&&r&&d(i,t,r),r};var b={};E(b,{SkdxTagsInputItemInput:()=>a});module.exports=y(b);var s=require("lit"),u=require("lit/decorators.js"),g=require("../internal/define.cjs"),c=require("../internal/styles.cjs"),m=require("./TagsInput.cjs");var a=class extends s.LitElement{constructor(){super(...arguments);this.index=0;this.root=null;this.draft="";this.wasEditing=!1;this.handleRootUpdate=()=>this.requestUpdate();this.handleInput=t=>{this.draft=t.target.value};this.handleKeydown=t=>{let e=t.target;t.key==="Enter"?(t.preventDefault(),this.root?.setTagAtIndex(this.index,e.value),this.close(e)):t.key==="Escape"&&(t.preventDefault(),this.close(e))};this.handleBlur=()=>this.root?.setEditingIndex(null)}createRenderRoot(){return this}connectedCallback(){if(super.connectedCallback(),(0,c.installLightDomStyles)(),this.root=this.closest("skdx-tags-input"),!this.root)throw new Error("<skdx-tags-input-item-input> must be used inside <skdx-tags-input>.");this.root.addEventListener("skdx-tags-input-internal-update",this.handleRootUpdate)}disconnectedCallback(){this.root?.removeEventListener("skdx-tags-input-internal-update",this.handleRootUpdate),super.disconnectedCallback()}get editing(){return this.root?.editingIndex===this.index}get tag(){return this.root?.value[this.index]??""}updated(){let t=this.editing;if(t===this.wasEditing||(this.wasEditing=t,!t))return;this.draft=this.tag;let e=this.querySelector("input");e&&(e.value=this.draft,e.focus(),e.select())}close(t){t.closest(m.TAGS_INPUT_ITEM_SELECTOR)?.focus(),this.root?.setEditingIndex(null)}render(){return this.editing?s.html`
+      <input
+        part="item-input"
+        type="text"
+        data-skdx-tags-input-item-input=""
+        aria-label=${this.label??`Edit ${this.tag}`.trim()}
+        data-disabled=${this.root?.disabled?"":s.nothing}
+        .value=${this.draft}
+        @input=${this.handleInput}
+        @keydown=${this.handleKeydown}
+        @blur=${this.handleBlur}
+      />
+    `:s.nothing}};o([(0,u.property)({type:Number})],a.prototype,"index",2),o([(0,u.property)({type:String})],a.prototype,"label",2),a=o([(0,g.customElement)("skdx-tags-input-item-input","tags-input","item-input")],a);0&&(module.exports={SkdxTagsInputItemInput});

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

@@ -0,0 +1,37 @@
+import { LitElement, nothing } from 'lit';
+/**
+ * The field that appears when a committed tag is being edited. Opens via
+ * Enter (text pre-selected), commits on Enter, cancels on Escape or blur.
+ * Renders to light DOM so wrapping label/field can access it.
+ *
+ * @csspart item-input - The native `<input>`. **`::part()` does not reach it**
+ * (light DOM); style as `skdx-tags-input-item-input > input { … }`.
+ */
+export declare class SkdxTagsInputItemInput extends LitElement {
+    createRenderRoot(): this;
+    /** The tag's position in the list this editor edits, zero-based. */
+    index: number;
+    /** Accessible name for the editor, replacing the generated `Edit <tag>`.
+     * @default undefined — keeps `` `Edit ${tag}` ``
+     */
+    label?: string;
+    private root;
+    private draft;
+    private wasEditing;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleRootUpdate;
+    private get editing();
+    private get tag();
+    protected updated(): void;
+    private close;
+    private readonly handleInput;
+    private readonly handleKeydown;
+    private readonly handleBlur;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tags-input-item-input': SkdxTagsInputItemInput;
+    }
+}

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

@@ -0,0 +1,37 @@
+import { LitElement, nothing } from 'lit';
+/**
+ * The field that appears when a committed tag is being edited. Opens via
+ * Enter (text pre-selected), commits on Enter, cancels on Escape or blur.
+ * Renders to light DOM so wrapping label/field can access it.
+ *
+ * @csspart item-input - The native `<input>`. **`::part()` does not reach it**
+ * (light DOM); style as `skdx-tags-input-item-input > input { … }`.
+ */
+export declare class SkdxTagsInputItemInput extends LitElement {
+    createRenderRoot(): this;
+    /** The tag's position in the list this editor edits, zero-based. */
+    index: number;
+    /** Accessible name for the editor, replacing the generated `Edit <tag>`.
+     * @default undefined — keeps `` `Edit ${tag}` ``
+     */
+    label?: string;
+    private root;
+    private draft;
+    private wasEditing;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleRootUpdate;
+    private get editing();
+    private get tag();
+    protected updated(): void;
+    private close;
+    private readonly handleInput;
+    private readonly handleKeydown;
+    private readonly handleBlur;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tags-input-item-input': SkdxTagsInputItemInput;
+    }
+}

package/dist/tags-input/TagsInputItemInput.js

@@ -0,0 +1,13 @@
+var u=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var a=(s,n,t,e)=>{for(var i=e>1?void 0:e?h(n,t):n,d=s.length-1,o;d>=0;d--)(o=s[d])&&(i=(e?o(n,t,i):o(i))||i);return e&&i&&u(n,t,i),i};import{html as g,LitElement as c,nothing as l}from"lit";import{property as p}from"lit/decorators.js";import{customElement as m}from"../internal/define.js";import{installLightDomStyles as v}from"../internal/styles.js";import{TAGS_INPUT_ITEM_SELECTOR as f}from"./TagsInput.js";var r=class extends c{constructor(){super(...arguments);this.index=0;this.root=null;this.draft="";this.wasEditing=!1;this.handleRootUpdate=()=>this.requestUpdate();this.handleInput=t=>{this.draft=t.target.value};this.handleKeydown=t=>{let e=t.target;t.key==="Enter"?(t.preventDefault(),this.root?.setTagAtIndex(this.index,e.value),this.close(e)):t.key==="Escape"&&(t.preventDefault(),this.close(e))};this.handleBlur=()=>this.root?.setEditingIndex(null)}createRenderRoot(){return this}connectedCallback(){if(super.connectedCallback(),v(),this.root=this.closest("skdx-tags-input"),!this.root)throw new Error("<skdx-tags-input-item-input> must be used inside <skdx-tags-input>.");this.root.addEventListener("skdx-tags-input-internal-update",this.handleRootUpdate)}disconnectedCallback(){this.root?.removeEventListener("skdx-tags-input-internal-update",this.handleRootUpdate),super.disconnectedCallback()}get editing(){return this.root?.editingIndex===this.index}get tag(){return this.root?.value[this.index]??""}updated(){let t=this.editing;if(t===this.wasEditing||(this.wasEditing=t,!t))return;this.draft=this.tag;let e=this.querySelector("input");e&&(e.value=this.draft,e.focus(),e.select())}close(t){t.closest(f)?.focus(),this.root?.setEditingIndex(null)}render(){return this.editing?g`
+      <input
+        part="item-input"
+        type="text"
+        data-skdx-tags-input-item-input=""
+        aria-label=${this.label??`Edit ${this.tag}`.trim()}
+        data-disabled=${this.root?.disabled?"":l}
+        .value=${this.draft}
+        @input=${this.handleInput}
+        @keydown=${this.handleKeydown}
+        @blur=${this.handleBlur}
+      />
+    `:l}};a([p({type:Number})],r.prototype,"index",2),a([p({type:String})],r.prototype,"label",2),r=a([m("skdx-tags-input-item-input","tags-input","item-input")],r);export{r as SkdxTagsInputItemInput};

package/dist/tags-input/index.cjs

@@ -1 +1 @@
-"use strict";var r=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var g=(e,t)=>{for(var o in t)r(e,o,{get:t[o],enumerable:!0})},k=(e,t,o,x)=>{if(t&&typeof t=="object"||typeof t=="function")for(let p of d(t))!f.call(e,p)&&p!==o&&r(e,p,{get:()=>t[p],enumerable:!(x=a(t,p))||x.enumerable});return e};var s=e=>k(r({},"__esModule",{value:!0}),e);var S={};g(S,{SkdxTagsInput:()=>I.SkdxTagsInput,SkdxTagsInputInput:()=>u.SkdxTagsInputInput,SkdxTagsInputItem:()=>m.SkdxTagsInputItem,SkdxTagsInputItemDelete:()=>n.SkdxTagsInputItemDelete});module.exports=s(S);var I=require("./TagsInput.cjs"),m=require("./TagsInputItem.cjs"),n=require("./TagsInputItemDelete.cjs"),u=require("./TagsInputInput.cjs");0&&(module.exports={SkdxTagsInput,SkdxTagsInputInput,SkdxTagsInputItem,SkdxTagsInputItemDelete});
+"use strict";var n=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var o=(a,t)=>{for(var e in t)n(a,e,{get:t[e],enumerable:!0})},r=(a,t,e,I)=>{if(t&&typeof t=="object"||typeof t=="function")for(let p of i(t))!l.call(a,p)&&p!==e&&n(a,p,{get:()=>t[p],enumerable:!(I=g(t,p))||I.enumerable});return a};var s=a=>r(n({},"__esModule",{value:!0}),a);var u={};o(u,{SkdxTagsInput:()=>d.SkdxTagsInput});module.exports=s(u);var d=require("./TagsInput.cjs");0&&(module.exports={SkdxTagsInput});

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

@@ -1,4 +1 @@
-export { SkdxTagsInput } from './TagsInput.cjs';
-export { SkdxTagsInputItem } from './TagsInputItem.cjs';
-export { SkdxTagsInputItemDelete } from './TagsInputItemDelete.cjs';
-export { SkdxTagsInputInput } from './TagsInputInput.cjs';
+export { SkdxTagsInput, type TagsInputInvalidDetail } from './TagsInput.cjs';

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

@@ -1,4 +1 @@
-export { SkdxTagsInput } from './TagsInput.js';
-export { SkdxTagsInputItem } from './TagsInputItem.js';
-export { SkdxTagsInputItemDelete } from './TagsInputItemDelete.js';
-export { SkdxTagsInputInput } from './TagsInputInput.js';
+export { SkdxTagsInput, type TagsInputInvalidDetail } from './TagsInput.js';

package/dist/tags-input/index.js

@@ -1 +1 @@
-import{SkdxTagsInput as p}from"./TagsInput.js";import{SkdxTagsInputItem as r}from"./TagsInputItem.js";import{SkdxTagsInputItemDelete as I}from"./TagsInputItemDelete.js";import{SkdxTagsInputInput as n}from"./TagsInputInput.js";export{p as SkdxTagsInput,n as SkdxTagsInputInput,r as SkdxTagsInputItem,I as SkdxTagsInputItemDelete};
+import{SkdxTagsInput as p}from"./TagsInput.js";export{p as SkdxTagsInput};

package/dist/tags-input/primitives.cjs

@@ -0,0 +1 @@
+"use strict";var o=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var k=(e,t)=>{for(var r in t)o(e,r,{get:t[r],enumerable:!0})},s=(e,t,r,x)=>{if(t&&typeof t=="object"||typeof t=="function")for(let p of f(t))!g.call(e,p)&&p!==r&&o(e,p,{get:()=>t[p],enumerable:!(x=d(t,p))||x.enumerable});return e};var S=e=>s(o({},"__esModule",{value:!0}),e);var T={};k(T,{SkdxTagsInputClear:()=>a.SkdxTagsInputClear,SkdxTagsInputInput:()=>u.SkdxTagsInputInput,SkdxTagsInputItem:()=>I.SkdxTagsInputItem,SkdxTagsInputItemDelete:()=>m.SkdxTagsInputItemDelete,SkdxTagsInputItemInput:()=>n.SkdxTagsInputItemInput});module.exports=S(T);var I=require("./TagsInputItem.cjs"),m=require("./TagsInputItemDelete.cjs"),n=require("./TagsInputItemInput.cjs"),u=require("./TagsInputInput.cjs"),a=require("./TagsInputClear.cjs");0&&(module.exports={SkdxTagsInputClear,SkdxTagsInputInput,SkdxTagsInputItem,SkdxTagsInputItemDelete,SkdxTagsInputItemInput});

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

@@ -0,0 +1,25 @@
+/**
+ * Advanced primitives for `<skdx-tags-input>` — component parts you can
+ * compose when the derived anatomy doesn't suit your needs. Examples include a
+ * custom clear button, delete glyph, or draft field with placeholder.
+ *
+ * @example
+ * ```ts
+ * import * as TagsInput from '@skdx/web-components/primitives/tags-input';
+ * ```
+ * ```html
+ * <skdx-tags-input value='["react"]'>
+ *   <skdx-tags-input-item index="0">
+ *     react
+ *     <skdx-tags-input-item-delete index="0">×</skdx-tags-input-item-delete>
+ *   </skdx-tags-input-item>
+ *   <skdx-tags-input-input placeholder="Add a tag…"></skdx-tags-input-input>
+ *   <skdx-tags-input-clear>Clear</skdx-tags-input-clear>
+ * </skdx-tags-input>
+ * ```
+ */
+export { SkdxTagsInputItem } from './TagsInputItem.cjs';
+export { SkdxTagsInputItemDelete } from './TagsInputItemDelete.cjs';
+export { SkdxTagsInputItemInput } from './TagsInputItemInput.cjs';
+export { SkdxTagsInputInput } from './TagsInputInput.cjs';
+export { SkdxTagsInputClear } from './TagsInputClear.cjs';

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

@@ -0,0 +1,25 @@
+/**
+ * Advanced primitives for `<skdx-tags-input>` — component parts you can
+ * compose when the derived anatomy doesn't suit your needs. Examples include a
+ * custom clear button, delete glyph, or draft field with placeholder.
+ *
+ * @example
+ * ```ts
+ * import * as TagsInput from '@skdx/web-components/primitives/tags-input';
+ * ```
+ * ```html
+ * <skdx-tags-input value='["react"]'>
+ *   <skdx-tags-input-item index="0">
+ *     react
+ *     <skdx-tags-input-item-delete index="0">×</skdx-tags-input-item-delete>
+ *   </skdx-tags-input-item>
+ *   <skdx-tags-input-input placeholder="Add a tag…"></skdx-tags-input-input>
+ *   <skdx-tags-input-clear>Clear</skdx-tags-input-clear>
+ * </skdx-tags-input>
+ * ```
+ */
+export { SkdxTagsInputItem } from './TagsInputItem.js';
+export { SkdxTagsInputItemDelete } from './TagsInputItemDelete.js';
+export { SkdxTagsInputItemInput } from './TagsInputItemInput.js';
+export { SkdxTagsInputInput } from './TagsInputInput.js';
+export { SkdxTagsInputClear } from './TagsInputClear.js';

package/dist/tags-input/primitives.js

@@ -0,0 +1 @@
+import{SkdxTagsInputItem as p}from"./TagsInputItem.js";import{SkdxTagsInputItemDelete as o}from"./TagsInputItemDelete.js";import{SkdxTagsInputItemInput as I}from"./TagsInputItemInput.js";import{SkdxTagsInputInput as n}from"./TagsInputInput.js";import{SkdxTagsInputClear as a}from"./TagsInputClear.js";export{a as SkdxTagsInputClear,n as SkdxTagsInputInput,p as SkdxTagsInputItem,o as SkdxTagsInputItemDelete,I as SkdxTagsInputItemInput};

package/dist/text/Text.cjs

@@ -0,0 +1,5 @@
+"use strict";var i=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var E=(r,t)=>{for(var o in t)i(r,o,{get:t[o],enumerable:!0})},H=(r,t,o,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of u(t))!v.call(r,e)&&e!==o&&i(r,e,{get:()=>t[e],enumerable:!(s=c(t,e))||s.enumerable});return r};var L=r=>H(i({},"__esModule",{value:!0}),r),n=(r,t,o,s)=>{for(var e=s>1?void 0:s?c(t,o):t,l=r.length-1,p;l>=0;l--)(p=r[l])&&(e=(s?p(t,o,e):p(e))||e);return s&&e&&i(t,o,e),e};var M={};E(M,{SkdxText:()=>m});module.exports=L(M);var a=require("lit"),f=require("lit/decorators.js"),y=require("lit/static-html.js"),g=require("../internal/define.cjs"),d=require("../internal/styles.cjs"),h=require("../utils/polymorphic.cjs");var m=class extends a.LitElement{constructor(){super(...arguments);this.as="span"}render(){let o=(0,h.resolveTag)(this.as,"span");return y.html`<${o} part="text"><slot></slot></${o}>`}};m.styles=[d.hiddenHostStyles,a.css`
+      :host {
+        display: inline;
+      }
+    `],n([(0,f.property)({type:String,reflect:!0})],m.prototype,"as",2),m=n([(0,g.customElement)("skdx-text","text","root")],m);0&&(module.exports={SkdxText});

package/dist/text/Text.d.cts

@@ -0,0 +1,29 @@
+import { LitElement } from 'lit';
+import { type PolymorphicTag } from '../utils/polymorphic.cjs';
+/**
+ * `<skdx-text>` — the Web Components implementation of the Text contract.
+ * Appearance is skin-driven via `data-tone`, `data-variant`, `data-size` attributes.
+ *
+ * @example
+ * ```html
+ * <skdx-text as="p" data-tone="muted">Last synced 3 minutes ago</skdx-text>
+ * <skdx-text data-variant="numeric">1,284</skdx-text>
+ * <skdx-text as="code" data-variant="mono">--skdx-color-text-muted</skdx-text>
+ * ```
+ *
+ * @csspart text - The rendered element inside the shadow root.
+ */
+export declare class SkdxText extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Element name to render, from the library's tag allowlist. Takes a tag name only, never a component.
+     * @default 'span'
+     */
+    as: PolymorphicTag;
+    render(): import("lit").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-text': SkdxText;
+    }
+}

package/dist/text/Text.d.ts

@@ -0,0 +1,29 @@
+import { LitElement } from 'lit';
+import { type PolymorphicTag } from '../utils/polymorphic.js';
+/**
+ * `<skdx-text>` — the Web Components implementation of the Text contract.
+ * Appearance is skin-driven via `data-tone`, `data-variant`, `data-size` attributes.
+ *
+ * @example
+ * ```html
+ * <skdx-text as="p" data-tone="muted">Last synced 3 minutes ago</skdx-text>
+ * <skdx-text data-variant="numeric">1,284</skdx-text>
+ * <skdx-text as="code" data-variant="mono">--skdx-color-text-muted</skdx-text>
+ * ```
+ *
+ * @csspart text - The rendered element inside the shadow root.
+ */
+export declare class SkdxText extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Element name to render, from the library's tag allowlist. Takes a tag name only, never a component.
+     * @default 'span'
+     */
+    as: PolymorphicTag;
+    render(): import("lit").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-text': SkdxText;
+    }
+}

package/dist/text/Text.js

@@ -0,0 +1,5 @@
+var p=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var l=(m,o,e,s)=>{for(var t=s>1?void 0:s?n(o,e):o,i=m.length-1,a;i>=0;i--)(a=m[i])&&(t=(s?a(o,e,t):a(t))||t);return s&&t&&p(o,e,t),t};import{css as c,LitElement as f}from"lit";import{property as y}from"lit/decorators.js";import{html as g}from"lit/static-html.js";import{customElement as d}from"../internal/define.js";import{hiddenHostStyles as h}from"../internal/styles.js";import{resolveTag as u}from"../utils/polymorphic.js";var r=class extends f{constructor(){super(...arguments);this.as="span"}render(){let e=u(this.as,"span");return g`<${e} part="text"><slot></slot></${e}>`}};r.styles=[h,c`
+      :host {
+        display: inline;
+      }
+    `],l([y({type:String,reflect:!0})],r.prototype,"as",2),r=l([d("skdx-text","text","root")],r);export{r as SkdxText};

package/dist/text/index.cjs

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

package/dist/text/index.d.cts

@@ -0,0 +1 @@
+export { SkdxText } from './Text.cjs';