@skdx/web-components 0.27.0 → 0.28.0

package/dist/tag-group/TagGroupEmpty.js

@@ -0,0 +1,9 @@
+var p=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var l=(d,r,t,s)=>{for(var e=s>1?void 0:s?c(r,t):r,i=d.length-1,n;i>=0;i--)(n=d[i])&&(e=(s?n(r,t,e):n(e))||e);return s&&e&&p(r,t,e),e};import{css as u,html as g,LitElement as h}from"lit";import{customElement as m}from"../internal/define.js";import{TAG_GROUP_UPDATE_EVENT as a,TAG_SELECTOR as v}from"./TagGroup.js";var o=class extends h{constructor(){super(...arguments);this.group=null;this.handleGroupUpdate=()=>this.syncHidden()}connectedCallback(){if(super.connectedCallback(),this.group=this.closest("skdx-tag-group"),!this.group)throw new Error("<skdx-tag-group-empty> must be used inside <skdx-tag-group>.");this.group.addEventListener(a,this.handleGroupUpdate),this.syncHidden()}disconnectedCallback(){this.group?.removeEventListener(a,this.handleGroupUpdate),super.disconnectedCallback()}syncHidden(){let t=this.group;t&&(this.hidden=t.querySelectorAll(v).length>0)}render(){return g`<slot></slot>`}};o.styles=u`
+    :host {
+      display: block;
+    }
+
+    :host([hidden]) {
+      display: none;
+    }
+  `,o=l([m("skdx-tag-group-empty","tag-group","empty")],o);export{o as SkdxTagGroupEmpty};

package/dist/tag-group/TagGroupLabel.cjs

@@ -0,0 +1,5 @@
+"use strict";var i=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var k=(r,e)=>{for(var o in e)i(r,o,{get:e[o],enumerable:!0})},x=(r,e,o,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of u(e))!f.call(r,t)&&t!==o&&i(r,t,{get:()=>e[t],enumerable:!(s=c(e,t))||s.enumerable});return r};var b=r=>x(i({},"__esModule",{value:!0}),r),m=(r,e,o,s)=>{for(var t=s>1?void 0:s?c(e,o):e,d=r.length-1,p;d>=0;d--)(p=r[d])&&(t=(s?p(e,o,t):p(t))||t);return s&&t&&i(e,o,t),t};var h={};k(h,{SkdxTagGroupLabel:()=>l});module.exports=b(h);var a=require("lit"),g=require("../internal/define.cjs"),n=require("../internal/ids.cjs");var l=class extends a.LitElement{connectedCallback(){super.connectedCallback(),this.id||(this.id=(0,n.nextId)("skdx-tag-group-label")),this.closest("skdx-tag-group")?.requestUpdate()}render(){return a.html`<slot></slot>`}};l.styles=a.css`
+    :host {
+      display: block;
+    }
+  `,l=m([(0,g.customElement)("skdx-tag-group-label","tag-group","label")],l);0&&(module.exports={SkdxTagGroupLabel});

package/dist/tag-group/TagGroupLabel.d.cts

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-tag-group-label>` — a visible heading for a `<skdx-tag-group>` that
+ * names it via `aria-labelledby`. A part rather than a plain `<span>` because
+ * `role="list"` computes no name from its contents.
+ *
+ * @example
+ * ```html
+ * <skdx-tag-group>
+ *   <skdx-tag-group-label>Filters</skdx-tag-group-label>
+ *   <skdx-tag-group-list>
+ *     <skdx-tag index="0" label="react">react</skdx-tag>
+ *   </skdx-tag-group-list>
+ * </skdx-tag-group>
+ * ```
+ */
+export declare class SkdxTagGroupLabel extends LitElement {
+    static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tag-group-label': SkdxTagGroupLabel;
+    }
+}

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

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-tag-group-label>` — a visible heading for a `<skdx-tag-group>` that
+ * names it via `aria-labelledby`. A part rather than a plain `<span>` because
+ * `role="list"` computes no name from its contents.
+ *
+ * @example
+ * ```html
+ * <skdx-tag-group>
+ *   <skdx-tag-group-label>Filters</skdx-tag-group-label>
+ *   <skdx-tag-group-list>
+ *     <skdx-tag index="0" label="react">react</skdx-tag>
+ *   </skdx-tag-group-list>
+ * </skdx-tag-group>
+ * ```
+ */
+export declare class SkdxTagGroupLabel extends LitElement {
+    static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tag-group-label': SkdxTagGroupLabel;
+    }
+}

package/dist/tag-group/TagGroupLabel.js

@@ -0,0 +1,5 @@
+var p=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var d=(s,r,l,o)=>{for(var e=o>1?void 0:o?c(r,l):r,a=s.length-1,i;a>=0;a--)(i=s[a])&&(e=(o?i(r,l,e):i(e))||e);return o&&e&&p(r,l,e),e};import{css as m,html as g,LitElement as n}from"lit";import{customElement as u}from"../internal/define.js";import{nextId as f}from"../internal/ids.js";var t=class extends n{connectedCallback(){super.connectedCallback(),this.id||(this.id=f("skdx-tag-group-label")),this.closest("skdx-tag-group")?.requestUpdate()}render(){return g`<slot></slot>`}};t.styles=m`
+    :host {
+      display: block;
+    }
+  `,t=d([u("skdx-tag-group-label","tag-group","label")],t);export{t as SkdxTagGroupLabel};

package/dist/tag-group/TagGroupList.cjs

@@ -0,0 +1,18 @@
+"use strict";var d=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var m=(o,e)=>{for(var t in e)d(o,t,{get:e[t],enumerable:!0})},v=(o,e,t,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of b(e))!h.call(o,r)&&r!==t&&d(o,r,{get:()=>e[r],enumerable:!(l=u(e,r))||l.enumerable});return o};var k=o=>v(d({},"__esModule",{value:!0}),o),g=(o,e,t,l)=>{for(var r=l>1?void 0:l?u(e,t):e,i=o.length-1,n;i>=0;i--)(n=o[i])&&(r=(l?n(e,t,r):n(r))||r);return l&&r&&d(e,t,r),r};var E={};m(E,{SkdxTagGroupList:()=>s});module.exports=k(E);var a=require("lit"),c=require("../internal/define.cjs"),p=require("./TagGroup.cjs");var s=class extends a.LitElement{constructor(){super(...arguments);this.group=null;this.handleGroupUpdate=()=>this.requestUpdate()}connectedCallback(){if(super.connectedCallback(),this.group=this.closest("skdx-tag-group"),!this.group)throw new Error("<skdx-tag-group-list> must be used inside <skdx-tag-group>.");this.group.addEventListener(p.TAG_GROUP_UPDATE_EVENT,this.handleGroupUpdate),this.group.requestUpdate()}disconnectedCallback(){this.group?.removeEventListener(p.TAG_GROUP_UPDATE_EVENT,this.handleGroupUpdate);let t=this.group;super.disconnectedCallback(),t?.requestUpdate()}render(){let t=this.group,l=!!t?.disabled,r=t?.labelId,i=t?.getAttribute("aria-label");return a.html`
+      <!-- tabindex="-1": removes the last tag, park focus inside the group not <body>. -->
+      <ul
+        part="list"
+        role="list"
+        tabindex="-1"
+        aria-label=${i??a.nothing}
+        aria-labelledby=${r??a.nothing}
+        data-orientation=${t?.orientation??"horizontal"}
+        data-disabled=${l?"":a.nothing}
+      >
+        <slot></slot>
+      </ul>
+    `}};s.styles=a.css`
+    :host {
+      display: block;
+    }
+  `,s=g([(0,c.customElement)("skdx-tag-group-list","tag-group","list")],s);0&&(module.exports={SkdxTagGroupList});

package/dist/tag-group/TagGroupList.d.cts

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-tag-group-list>` — the `<ul>` that holds the tags when a
+ * `<skdx-tag-group>` has a visible heading. Rendering one moves `role="list"`
+ * and the accessible name off the group host. That split exists because a
+ * `role="list"` whose first owned child is a heading announces it as an item.
+ *
+ * Optional: groups with no heading need no wrapper. The explicit `role="list"`
+ * on the real `<ul>` is necessary because `list-style: none` drops a `<ul>`'s
+ * list semantics in Safari/VoiceOver unless the role is written back.
+ *
+ * @csspart list - The `<ul>` element inside the shadow root.
+ */
+export declare class SkdxTagGroupList extends LitElement {
+    static styles: import("lit").CSSResult;
+    private group;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleGroupUpdate;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tag-group-list': SkdxTagGroupList;
+    }
+}

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

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-tag-group-list>` — the `<ul>` that holds the tags when a
+ * `<skdx-tag-group>` has a visible heading. Rendering one moves `role="list"`
+ * and the accessible name off the group host. That split exists because a
+ * `role="list"` whose first owned child is a heading announces it as an item.
+ *
+ * Optional: groups with no heading need no wrapper. The explicit `role="list"`
+ * on the real `<ul>` is necessary because `list-style: none` drops a `<ul>`'s
+ * list semantics in Safari/VoiceOver unless the role is written back.
+ *
+ * @csspart list - The `<ul>` element inside the shadow root.
+ */
+export declare class SkdxTagGroupList extends LitElement {
+    static styles: import("lit").CSSResult;
+    private group;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleGroupUpdate;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tag-group-list': SkdxTagGroupList;
+    }
+}

package/dist/tag-group/TagGroupList.js

@@ -0,0 +1,18 @@
+var u=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var n=(s,o,e,r)=>{for(var t=r>1?void 0:r?g(o,e):o,a=s.length-1,i;a>=0;a--)(i=s[a])&&(t=(r?i(o,e,t):i(t))||t);return r&&t&&u(o,e,t),t};import{css as c,html as b,LitElement as h,nothing as d}from"lit";import{customElement as m}from"../internal/define.js";import{TAG_GROUP_UPDATE_EVENT as p}from"./TagGroup.js";var l=class extends h{constructor(){super(...arguments);this.group=null;this.handleGroupUpdate=()=>this.requestUpdate()}connectedCallback(){if(super.connectedCallback(),this.group=this.closest("skdx-tag-group"),!this.group)throw new Error("<skdx-tag-group-list> must be used inside <skdx-tag-group>.");this.group.addEventListener(p,this.handleGroupUpdate),this.group.requestUpdate()}disconnectedCallback(){this.group?.removeEventListener(p,this.handleGroupUpdate);let e=this.group;super.disconnectedCallback(),e?.requestUpdate()}render(){let e=this.group,r=!!e?.disabled,t=e?.labelId,a=e?.getAttribute("aria-label");return b`
+      <!-- tabindex="-1": removes the last tag, park focus inside the group not <body>. -->
+      <ul
+        part="list"
+        role="list"
+        tabindex="-1"
+        aria-label=${a??d}
+        aria-labelledby=${t??d}
+        data-orientation=${e?.orientation??"horizontal"}
+        data-disabled=${r?"":d}
+      >
+        <slot></slot>
+      </ul>
+    `}};l.styles=c`
+    :host {
+      display: block;
+    }
+  `,l=n([m("skdx-tag-group-list","tag-group","list")],l);export{l as SkdxTagGroupList};

package/dist/tag-group/index.cjs

@@ -1 +1 @@
-"use strict";var t=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var e=Object.prototype.hasOwnProperty;var f=(r,o)=>{for(var m in o)t(r,m,{get:o[m],enumerable:!0})},g=(r,o,m,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let p of d(o))!e.call(r,p)&&p!==m&&t(r,p,{get:()=>o[p],enumerable:!(i=a(o,p))||i.enumerable});return r};var k=r=>g(t({},"__esModule",{value:!0}),r);var u={};f(u,{SkdxTagGroup:()=>x.SkdxTagGroup});module.exports=k(u);var S=require("../tag/Tag.cjs"),T=require("../tag/TagDelete.cjs"),x=require("./TagGroup.cjs");0&&(module.exports={SkdxTagGroup});
+"use strict";var i=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var T=Object.prototype.hasOwnProperty;var d=(p,o)=>{for(var t in o)i(p,t,{get:o[t],enumerable:!0})},x=(p,o,t,m)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of g(o))!T.call(p,r)&&r!==t&&i(p,r,{get:()=>o[r],enumerable:!(m=a(o,r))||m.enumerable});return p};var k=p=>x(i({},"__esModule",{value:!0}),p);var u={};d(u,{SkdxTagGroup:()=>e.SkdxTagGroup});module.exports=k(u);var D=require("../tag/Tag.cjs"),G=require("../tag/TagDelete.cjs"),S=require("../tag/TagLabel.cjs"),c=require("../tag/TagLeading.cjs"),f=require("./TagGroupEmpty.cjs"),l=require("./TagGroupLabel.cjs"),s=require("./TagGroupList.cjs"),e=require("./TagGroup.cjs");0&&(module.exports={SkdxTagGroup});

package/dist/tag-group/index.d.cts

@@ -1,3 +1,8 @@
 import '../tag/Tag.cjs';
 import '../tag/TagDelete.cjs';
-export { SkdxTagGroup } from './TagGroup.cjs';
+import '../tag/TagLabel.cjs';
+import '../tag/TagLeading.cjs';
+import './TagGroupEmpty.cjs';
+import './TagGroupLabel.cjs';
+import './TagGroupList.cjs';
+export { SkdxTagGroup, type TagRemovedDetail, type SkdxTagGroupTagDescriptor } from './TagGroup.cjs';

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

@@ -1,3 +1,8 @@
 import '../tag/Tag.js';
 import '../tag/TagDelete.js';
-export { SkdxTagGroup } from './TagGroup.js';
+import '../tag/TagLabel.js';
+import '../tag/TagLeading.js';
+import './TagGroupEmpty.js';
+import './TagGroupLabel.js';
+import './TagGroupList.js';
+export { SkdxTagGroup, type TagRemovedDetail, type SkdxTagGroupTagDescriptor } from './TagGroup.js';

package/dist/tag-group/index.js

@@ -1 +1 @@
-import"../tag/Tag.js";import"../tag/TagDelete.js";import{SkdxTagGroup as t}from"./TagGroup.js";export{t as SkdxTagGroup};
+import"../tag/Tag.js";import"../tag/TagDelete.js";import"../tag/TagLabel.js";import"../tag/TagLeading.js";import"./TagGroupEmpty.js";import"./TagGroupLabel.js";import"./TagGroupList.js";import{SkdxTagGroup as T}from"./TagGroup.js";export{T as SkdxTagGroup};

package/dist/tag-group/primitives.cjs

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

package/dist/tag-group/primitives.d.cts

@@ -0,0 +1,22 @@
+/**
+ * Advanced primitives for `<skdx-tag-group>` — component parts you can compose
+ * when the derived anatomy doesn't suit your needs. The Label, List, and Empty
+ * parts are available only here.
+ *
+ * @example
+ * ```ts
+ * import * as TagGroup from '@skdx/web-components/primitives/tag-group';
+ * ```
+ * ```html
+ * <skdx-tag-group>
+ *   <skdx-tag-group-label>Filters</skdx-tag-group-label>
+ *   <skdx-tag-group-list>
+ *     <skdx-tag index="0" value="react">react<skdx-tag-delete>×</skdx-tag-delete></skdx-tag>
+ *   </skdx-tag-group-list>
+ *   <skdx-tag-group-empty>No filters applied.</skdx-tag-group-empty>
+ * </skdx-tag-group>
+ * ```
+ */
+export { SkdxTagGroupLabel } from './TagGroupLabel.cjs';
+export { SkdxTagGroupList } from './TagGroupList.cjs';
+export { SkdxTagGroupEmpty } from './TagGroupEmpty.cjs';

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

@@ -0,0 +1,22 @@
+/**
+ * Advanced primitives for `<skdx-tag-group>` — component parts you can compose
+ * when the derived anatomy doesn't suit your needs. The Label, List, and Empty
+ * parts are available only here.
+ *
+ * @example
+ * ```ts
+ * import * as TagGroup from '@skdx/web-components/primitives/tag-group';
+ * ```
+ * ```html
+ * <skdx-tag-group>
+ *   <skdx-tag-group-label>Filters</skdx-tag-group-label>
+ *   <skdx-tag-group-list>
+ *     <skdx-tag index="0" value="react">react<skdx-tag-delete>×</skdx-tag-delete></skdx-tag>
+ *   </skdx-tag-group-list>
+ *   <skdx-tag-group-empty>No filters applied.</skdx-tag-group-empty>
+ * </skdx-tag-group>
+ * ```
+ */
+export { SkdxTagGroupLabel } from './TagGroupLabel.js';
+export { SkdxTagGroupList } from './TagGroupList.js';
+export { SkdxTagGroupEmpty } from './TagGroupEmpty.js';

package/dist/tag-group/primitives.js

@@ -0,0 +1 @@
+import{SkdxTagGroupLabel as p}from"./TagGroupLabel.js";import{SkdxTagGroupList as t}from"./TagGroupList.js";import{SkdxTagGroupEmpty as e}from"./TagGroupEmpty.js";export{e as SkdxTagGroupEmpty,p as SkdxTagGroupLabel,t as SkdxTagGroupList};

package/dist/tags-input/TagsInput.cjs

@@ -1,5 +1,6 @@
-"use strict";var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var V=Object.prototype.hasOwnProperty;var C=(s,t)=>{for(var e in t)d(s,e,{get:t[e],enumerable:!0})},L=(s,t,e,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of E(t))!V.call(s,a)&&a!==e&&d(s,a,{get:()=>t[a],enumerable:!(i=c(t,a))||i.enumerable});return s};var _=s=>L(d({},"__esModule",{value:!0}),s),l=(s,t,e,i)=>{for(var a=i>1?void 0:i?c(t,e):t,n=s.length-1,m;n>=0;n--)(m=s[n])&&(a=(i?m(t,e,a):m(a))||a);return i&&a&&d(t,e,a),a};var A={};C(A,{SkdxTagsInput:()=>r,TAGS_INPUT_DELETE_SELECTOR:()=>y,TAGS_INPUT_FIELD_SELECTOR:()=>b,TAGS_INPUT_SELECTOR:()=>g,focusDeleteNeighbor:()=>q});module.exports=_(A);var u=require("lit"),o=require("lit/decorators.js"),h=require("../internal/define.cjs"),p=require("../internal/form-associated.cjs"),f=require("../internal/part.cjs"),v=require("../internal/positioning.cjs");var g="[data-skdx-tags-input]",y="[data-skdx-tags-input-delete]",b="[data-skdx-tags-input-field]";function M(s){(s?.shadowRoot?.querySelector("button, input")??s)?.focus()}function q(s){let t=s.closest(g),e=t?Array.from(t.querySelectorAll(y)):[],i=e.indexOf(s),a=i===-1?void 0:e[i+1];M(a??e[i-1]??t?.querySelector(b))}var r=class extends(0,p.FormAssociated)(u.LitElement){constructor(){super(...arguments);this.value=[];this.disabled=!1;this.invalid=!1;this.readOnly=!1;this.required=!1;this.delimiter=",";this.addOnPaste=!0;this.inputValue=""}connectedCallback(){super.connectedCallback(),this.setAttribute("data-skdx-tags-input",""),this.defaultValue??(this.defaultValue=[...this.value])}syncFormState(){this.setFormValue(this.multiFormValue(this.value)),this.setValueMissing(this.required&&this.value.length===0,"Please add at least one tag.",this.querySelector("skdx-tags-input-input input"))}formResetCallback(){this.value=[...this.defaultValue??[]]}updated(e){e.size>0&&this.dispatchEvent(new CustomEvent("skdx-tags-input-internal-update")),(e.has("value")||e.has("required")||e.has("name"))&&this.syncFormState(),(0,f.reflectHostState)(this,{"data-disabled":this.disabled?"":null,"data-invalid":this.invalid?"":null,"data-readonly":this.readOnly?"":null})}_emitValueChange(){this.dispatchEvent(new CustomEvent("value-change",{detail:this.value,bubbles:!0,composed:!0}))}addTag(e){this.addTags([e])}addTags(e){let i=[...this.value];for(let a of e){let n=a.trim();if(!(!n||i.includes(n))){if(this.max!==void 0&&i.length>=this.max)break;this.validate?.(n,i)!==!1&&i.push(n)}}i.length!==this.value.length&&(this.value=i,this._emitValueChange())}setInputValue(e){e!==this.inputValue&&(this.inputValue=e,this.dispatchEvent(new CustomEvent("input-value-change",{detail:e,bubbles:!0,composed:!0})))}removeTag(e){this.value=this.value.filter((i,a)=>a!==e),this._emitValueChange()}render(){return u.html`<slot></slot>`}};r.styles=u.css`
+"use strict";var p=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var H=Object.prototype.hasOwnProperty;var O=(i,a)=>{for(var t in a)p(i,t,{get:a[t],enumerable:!0})},q=(i,a,t,r)=>{if(a&&typeof a=="object"||typeof a=="function")for(let e of I(a))!H.call(i,e)&&e!==t&&p(i,e,{get:()=>a[e],enumerable:!(r=E(a,e))||r.enumerable});return i};var w=i=>q(p({},"__esModule",{value:!0}),i),s=(i,a,t,r)=>{for(var e=r>1?void 0:r?E(a,t):a,u=i.length-1,o;u>=0;u--)(o=i[u])&&(e=(r?o(a,t,e):o(e))||e);return r&&e&&p(a,t,e),e};var G={};O(G,{DEFAULT_DELIMITER:()=>T,SkdxTagsInput:()=>l,TAGS_INPUT_DELETE_SELECTOR:()=>P,TAGS_INPUT_FIELD_SELECTOR:()=>b,TAGS_INPUT_ITEM_SELECTOR:()=>g,TAGS_INPUT_SELECTOR:()=>x,commitsOnKey:()=>N,delimiterList:()=>v,focusDeleteNeighbor:()=>R,focusTagStep:()=>F,splitOnDelimiters:()=>B});module.exports=w(G);var h=require("lit"),n=require("lit/decorators.js"),A=require("../internal/authored.cjs"),V=require("../internal/define.cjs"),_=require("../internal/form-associated.cjs"),L=require("../internal/part.cjs"),M=require("../internal/positioning.cjs"),c=require("./TagsInputAnatomy.cjs");var T=[",",`
+`];function v(i){return(Array.isArray(i)?i:[i]).filter(Boolean)}function B(i,a){return v(a).reduce((t,r)=>t.flatMap(e=>e.split(r)),[i])}function N(i,a){return v(a).includes(i)}var x="[data-skdx-tags-input]",g="[data-skdx-tags-input-item]",P="[data-skdx-tags-input-delete]",b="[data-skdx-tags-input-field]";function C(i){(i?.shadowRoot?.querySelector("button, input")??i)?.focus()}function D(i){let a=i?.closest(x)??null;return{root:a,items:a?Array.from(a.querySelectorAll(g)):[]}}function R(i,a){let{root:t,items:r}=D(i),e=i?.closest(g)??null,u=e?r.indexOf(e):-1,o=u===-1?void 0:r[u+1];return C(o??r[u-1]??t?.querySelector(b)),o?a:Math.max(a-1,0)}function F(i,a){let{root:t,items:r}=D(i),e=r.indexOf(i);if(e===-1)return;let u=a===1?t?.querySelector(b):null;C(r[e+a]??u)}var l=class extends(0,_.FormAssociated)(h.LitElement){constructor(){super(...arguments);this.value=[];this.disabled=!1;this.invalid=!1;this.readOnly=!1;this.required=!1;this.delimiter=T;this.blurBehavior="keep";this.editable=!1;this.addOnPaste=!0;this.allowDuplicates=!1;this.inputValue="";this.defaultValue=[];this.defaultInputValue="";this.clearable=!1;this.inputLabel="Add a tag";this.seeded=!1;this.fillAnatomy=()=>{(0,A.hasAuthoredParts)(this,c.TAGS_INPUT_ANATOMY_GENERATED)||(0,c.fillTagsInputAnatomy)(this)};this.activeIndex=0;this.editIndex=null}connectedCallback(){super.connectedCallback(),this.setAttribute("data-skdx-tags-input",""),!this.seeded&&(this.seeded=!0,!this.hasAttribute("value")&&this.value.length===0&&(this.value=[...this.defaultValue]),!this.hasAttribute("input-value")&&this.inputValue===""&&(this.inputValue=this.defaultInputValue),queueMicrotask(this.fillAnatomy))}syncFormState(){this.setFormValue(this.multiFormValue(this.value)),this.setValueMissing(this.required&&this.value.length===0,"Please add at least one tag.",this.querySelector("skdx-tags-input-input input"))}formResetCallback(){this.value=[...this.defaultValue],this.inputValue=this.defaultInputValue}updated(t){(t.has("value")||t.has("placeholder")||t.has("clearable"))&&this.fillAnatomy(),t.size>0&&this.dispatchEvent(new CustomEvent("skdx-tags-input-internal-update")),(t.has("value")||t.has("required")||t.has("name"))&&this.syncFormState(),(0,L.reflectHostState)(this,{"data-disabled":this.disabled?"":null,"data-invalid":this.invalid?"":null,"data-readonly":this.readOnly?"":null})}_emitValueChange(){this.dispatchEvent(new CustomEvent("value-change",{detail:this.value,bubbles:!0,composed:!0}))}addTag(t){this.addTags([t])}addTags(t){let r=[...this.value],e=[];for(let u of t){let o=u.trim();if(!o)e.push({tag:o,reason:"empty"});else if(this.max!==void 0&&r.length>=this.max)e.push({tag:o,reason:"max"});else{let d=this.validate?.(o,r);d===!1?e.push({tag:o,reason:"validate"}):d!==!0&&!this.allowDuplicates&&r.includes(o)?e.push({tag:o,reason:"duplicate"}):r.push(o)}}for(let u of e)this._emitValueInvalid(u);r.length!==this.value.length&&(this.value=r,this._emitValueChange())}_emitValueInvalid(t){this.dispatchEvent(new CustomEvent("value-invalid",{detail:t,bubbles:!0,composed:!0}))}setTagAtIndex(t,r){let e=this.value[t];if(e===void 0)return;let u=r.trim(),o=this.value.filter((m,f)=>f!==t),d=m=>this._emitValueInvalid({tag:u,reason:m});if(!u)return d("empty");let y=this.validate?.(u,o);if(y===!1)return d("validate");if(y!==!0&&!this.allowDuplicates&&o.includes(u))return d("duplicate");u!==e&&(this.value=this.value.map((m,f)=>f===t?u:m),this._emitValueChange())}clearTags(){this.value.length!==0&&(this.value=[],this._emitValueChange())}setInputValue(t){t!==this.inputValue&&(this.inputValue=t,this.dispatchEvent(new CustomEvent("input-value-change",{detail:t,bubbles:!0,composed:!0})))}removeTag(t){this.value=this.value.filter((r,e)=>e!==t),this._emitValueChange()}get editingIndex(){return this.editable&&this.editIndex!==null&&this.editIndex<this.value.length?this.editIndex:null}setEditingIndex(t){this.editIndex=t}get tabStopIndex(){return Math.min(this.activeIndex,Math.max(this.value.length-1,0))}setActiveIndex(t){this.activeIndex=t}render(){return h.html`<slot @slotchange=${this.fillAnatomy}></slot>`}};l.styles=h.css`
     :host {
       display: contents;
     }
-  `,l([(0,o.property)({type:Array})],r.prototype,"value",2),l([(0,o.property)({type:Boolean,reflect:!0})],r.prototype,"disabled",2),l([(0,o.property)({type:Boolean,reflect:!0})],r.prototype,"invalid",2),l([(0,o.property)({type:Boolean,reflect:!0,attribute:"read-only"})],r.prototype,"readOnly",2),l([(0,o.property)({type:Number})],r.prototype,"max",2),l([(0,o.property)({type:Boolean,reflect:!0})],r.prototype,"required",2),l([(0,o.property)({type:String,reflect:!0})],r.prototype,"name",2),l([(0,o.property)({attribute:"required-message"})],r.prototype,"requiredMessage",2),l([(0,o.property)({type:String})],r.prototype,"delimiter",2),l([(0,o.property)({converter:v.optOutBoolean,attribute:"add-on-paste"})],r.prototype,"addOnPaste",2),l([(0,o.property)({attribute:!1})],r.prototype,"validate",2),l([(0,o.property)({type:String,attribute:"input-value"})],r.prototype,"inputValue",2),r=l([(0,h.customElement)("skdx-tags-input","tags-input","root")],r);0&&(module.exports={SkdxTagsInput,TAGS_INPUT_DELETE_SELECTOR,TAGS_INPUT_FIELD_SELECTOR,TAGS_INPUT_SELECTOR,focusDeleteNeighbor});
+  `,s([(0,n.property)({type:Array})],l.prototype,"value",2),s([(0,n.property)({type:Boolean,reflect:!0})],l.prototype,"disabled",2),s([(0,n.property)({type:Boolean,reflect:!0})],l.prototype,"invalid",2),s([(0,n.property)({type:Boolean,reflect:!0,attribute:"read-only"})],l.prototype,"readOnly",2),s([(0,n.property)({type:Number})],l.prototype,"max",2),s([(0,n.property)({type:Boolean,reflect:!0})],l.prototype,"required",2),s([(0,n.property)({type:String,reflect:!0})],l.prototype,"name",2),s([(0,n.property)({attribute:"required-message"})],l.prototype,"requiredMessage",2),s([(0,n.property)({type:String})],l.prototype,"delimiter",2),s([(0,n.property)({type:String,attribute:"blur-behavior"})],l.prototype,"blurBehavior",2),s([(0,n.property)({type:Boolean,reflect:!0})],l.prototype,"editable",2),s([(0,n.property)({converter:M.optOutBoolean,attribute:"add-on-paste"})],l.prototype,"addOnPaste",2),s([(0,n.property)({attribute:!1})],l.prototype,"validate",2),s([(0,n.property)({type:Boolean,reflect:!0,attribute:"allow-duplicates"})],l.prototype,"allowDuplicates",2),s([(0,n.property)({type:String,attribute:"input-value"})],l.prototype,"inputValue",2),s([(0,n.property)({type:Array,attribute:"default-value"})],l.prototype,"defaultValue",2),s([(0,n.property)({type:String,attribute:"default-input-value"})],l.prototype,"defaultInputValue",2),s([(0,n.property)({type:String})],l.prototype,"placeholder",2),s([(0,n.property)({type:Boolean})],l.prototype,"clearable",2),s([(0,n.property)({type:String,attribute:"input-label"})],l.prototype,"inputLabel",2),s([(0,n.state)()],l.prototype,"activeIndex",2),s([(0,n.state)()],l.prototype,"editIndex",2),l=s([(0,V.customElement)("skdx-tags-input","tags-input","root")],l);0&&(module.exports={DEFAULT_DELIMITER,SkdxTagsInput,TAGS_INPUT_DELETE_SELECTOR,TAGS_INPUT_FIELD_SELECTOR,TAGS_INPUT_ITEM_SELECTOR,TAGS_INPUT_SELECTOR,commitsOnKey,delimiterList,focusDeleteNeighbor,focusTagStep,splitOnDelimiters});

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

@@ -1,69 +1,65 @@
 import { LitElement, type PropertyValues } from 'lit';
-/** @internal Marks the {@link SkdxTagsInput} root, so a delete button being removed can find its siblings and the draft field. */
+/** Detail of `value-invalid`: which rule refused the tag. */
+export interface TagsInputInvalidDetail {
+    /** Candidate, trimmed (the text that would have been committed). */
+    tag: string;
+    /** Rule that refused it, in fixed order: `'empty'`, `'max'`, `'validate'`, `'duplicate'`. */
+    reason: 'empty' | 'max' | 'validate' | 'duplicate';
+}
+/**
+ * @internal Default delimiter set including newline for pasted lists.
+ */
+export declare const DEFAULT_DELIMITER: string[];
+/**
+ * @internal Normalizes delimiters to list form; drops empty entries.
+ */
+export declare function delimiterList(delimiter: string | string[]): string[];
+/**
+ * @internal Splits text on every delimiter without regex escaping issues.
+ */
+export declare function splitOnDelimiters(text: string, delimiter: string | string[]): string[];
+/**
+ * @internal Checks if keystroke commits draft based on delimiters.
+ */
+export declare function commitsOnKey(key: string, delimiter: string | string[]): boolean;
+/** @internal Root selector. */
 export declare const TAGS_INPUT_SELECTOR = "[data-skdx-tags-input]";
-/** @internal Marks a `<skdx-tags-input-item-delete>` host — each one is its own tab stop, so removal has to hand focus on. */
+/** @internal Item selector. */
+export declare const TAGS_INPUT_ITEM_SELECTOR = "[data-skdx-tags-input-item]";
+/** @internal Delete button selector (carries `tabindex="-1"`, not a focus target). */
 export declare const TAGS_INPUT_DELETE_SELECTOR = "[data-skdx-tags-input-delete]";
-/** @internal Marks the `<skdx-tags-input-input>` host, the last place focus can go when the removed tag was the only one. */
+/** @internal Draft field selector. */
 export declare const TAGS_INPUT_FIELD_SELECTOR = "[data-skdx-tags-input-field]";
 /**
- * Moves focus off the `<skdx-tags-input-item-delete>` host `button` *before* the
- * tag it deletes is removed.
- *
- * Focus goes to the next tag's delete button, to the previous one when the
- * removed tag was last, or to the draft input when it was the only one — never
- * to `<body>`, which is where focus lands by default once the button holding it
- * is removed, and which makes clearing several tags in a row unusable from the
- * keyboard.
- *
- * This can't reuse `<skdx-tag-group>`'s `focusTagNeighbor`: there the tag is the
- * single tab stop and its delete button is `tabindex="-1"`, whereas here every
- * delete button is its own tab stop and the draft input — not the root — is the
- * natural landing spot, since deleting a tag usually precedes typing another.
- *
- * Mirrors `packages/react/src/tags-input/TagsInput.tsx`'s `focusDeleteNeighbor`
- * — duplicated rather than shared, because no framework package imports
- * `@skdx/shared` at runtime.
- * @internal
+ * @internal Move focus off the tag at `index` before removal — to the next
+ * tag, previous if last, or draft field if only one. Landing on `<body>`
+ * makes clearing tags unusable from keyboard. Returns the Tab stop index
+ * after removal.
  */
-export declare function focusDeleteNeighbor(button: HTMLElement): void;
+export declare function focusDeleteNeighbor(origin: HTMLElement | null, index: number): number;
+/**
+ * @internal Move focus one tag along from `item` (document reading direction,
+ * `delta` resolves `directionalKey` for RTL). Past the last lands on draft
+ * field; past the first stays put.
+ */
+export declare function focusTagStep(item: HTMLElement, delta: 1 | -1): void;
 declare const SkdxTagsInput_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.cjs").SkdxFormAssociated) & {
     formAssociated: boolean;
 };
 /**
- * `<skdx-tags-input>` — the Web Components implementation of the shared
- * TagsInput contract (see `@skdx/shared`'s `tagsInputContract`). Owns the
- * `string[]` of committed tags and acts as the shared-state root that
- * `<skdx-tags-input-item>` / `<skdx-tags-input-item-delete>` /
- * `<skdx-tags-input-input>` look up via `closest('skdx-tags-input')`,
- * re-rendering on the `skdx-tags-input-internal-update` event this element
- * dispatches whenever a relevant property changes (same convention as
- * `<skdx-select>`). Renders `display: contents` — layout of tags vs. the
- * text field is entirely up to your CSS.
- *
- * `value` is a JSON array attribute (Lit's default `Array` converter), e.g.
- * `value='["react","typescript"]'`.
+ * Manages a `string[]` of tags. Renders `display: contents` so CSS controls
+ * layout. Draft text lives here (`inputValue`), staying controllable from
+ * outside. `delimiter` and `addOnPaste` split text into tags; `validate`
+ * can reject candidates. Form-associated: every tag submits as its own entry.
+ * `value` derives full anatomy by default; hand-compose any part.
  *
- * Form-associated via `ElementInternals`: with a `name`, every tag is
- * submitted as its own `name` entry — the same shape a set of repeated
- * same-named inputs produces, so `formData.getAll(name)` returns the tags.
- *
- * The draft text lives here too (`inputValue`), not on
- * `<skdx-tags-input-input>`, so it is controllable from outside; `delimiter`
- * and `addOnPaste` decide how typed and pasted text is split into tags, and
- * `validate` can reject a candidate.
- *
- * @fires value-change - The tag list changed. `detail` is the new `string[]`.
- * @fires input-value-change - The draft text changed. `detail` is the new text.
+ * @fires value-change - Tag list changed. `detail` is the new `string[]`.
+ * @fires input-value-change - Draft text changed. `detail` is the new text.
+ * @fires value-invalid - Candidate tag refused. `detail` is `{ tag, reason }`.
  *
  * @example
  * ```html
- * <skdx-tags-input value='["react","typescript"]'>
- *   <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>
+ * <skdx-tags-input value='["react","typescript"]'></skdx-tags-input>
  * ```
  */
 export declare class SkdxTagsInput extends SkdxTagsInput_base {
@@ -86,61 +82,129 @@ export declare class SkdxTagsInput extends SkdxTagsInput_base {
     /** Name used as the `FormData` entry key for every tag when inside a `<form>`. @default undefined */
     name?: string;
     /**
-     * Replaces the message the browser shows when a `required` field is
-     * submitted with no tags. Sealed inside the shadow root otherwise, so this
-     * is the only way to translate it or to call the tags what they actually are
-     * ("Add at least one recipient.").
+     * Replaces the browser's default required-field message; enables translation
+     * and custom labeling since the native message is sealed in the shadow root.
      * @default undefined — keeps `'Please add at least one tag.'`
      */
     requiredMessage?: string;
     /**
-     * Character that commits the draft as a tag while typing, and that pasted
-     * text is split on.
-     * @default ','
+     * Characters that commit typed tags and split pasted text. Default includes
+     * newline so spreadsheet columns paste as separate tags. The **attribute**
+     * form accepts only one; use the property for multiple delimiters.
+     * @default [',', '\n']
+     */
+    delimiter: string | string[];
+    /**
+     * What happens to uncommitted draft text on blur: `keep` leaves it, `clear`
+     * discards it, `commit` adds it as a tag through the same refusal rules.
+     * @default 'keep'
      */
-    delimiter: string;
+    blurBehavior: 'keep' | 'clear' | 'commit';
     /**
-     * Commit pasted text as tags (split on `delimiter`) instead of dropping it
-     * into the draft field. Opt *out* with `add-on-paste="false"` — a plain
-     * `type: Boolean` attribute can never turn a default-`true` flag off.
+     * Whether a committed tag can be edited in place instead of deleted and
+     * retyped; `Enter` opens the editor, `Enter` again commits, `Escape` cancels.
+     * @default false
+     */
+    editable: boolean;
+    /**
+     * Commits pasted text as tags (split on `delimiter`) instead of the draft
+     * field. Opt out with `add-on-paste="false"`; HTML `Boolean` can't turn
+     * default-`true` flags off, so this converter exists.
      * @default true
      */
     addOnPaste: boolean;
     /**
      * Decides whether a tag may be added, given the trimmed candidate and the
-     * tags accepted so far — including the ones accepted earlier in the *same*
-     * batch, so a pasted `"a,b,c"` is validated against a growing list rather
-     * than the one it started from. Return `false` to reject. Property only: a
-     * function has no attribute form.
+     * tags accepted so far in the same batch; return `false` to reject.
+     * Property only — a function has no attribute form.
      * @default undefined — every non-empty, non-duplicate tag is accepted.
      */
     validate?: (tag: string, tags: string[]) => boolean;
     /**
-     * The draft text in `<skdx-tags-input-input>`. Owned here rather than by the
-     * input so it is controllable from outside; listen for `input-value-change`.
+     * Whether the same tag may appear more than once; the built-in check is an
+     * exact match on the trimmed candidate, and `validate` runs first so a
+     * `true` return can express normalised or case-insensitive matching.
+     * @default false
+     */
+    allowDuplicates: boolean;
+    /**
+     * The draft text in `<skdx-tags-input-input>`, owned here so it's
+     * controllable from outside; listen for `input-value-change`.
      * @default ''
      */
     inputValue: string;
-    private defaultValue?;
+    /**
+     * Initial tags for uncontrolled usage, and the list a form reset restores.
+     * Seeds `value` on connect when no `value` attribute was authored, so
+     * `default-value` alone is a complete uncontrolled declaration.
+     * @default [] — no tags.
+     */
+    defaultValue: string[];
+    /**
+     * Initial draft text for uncontrolled usage, and what a form reset restores the draft field to.
+     * @default '' — an empty draft.
+     */
+    defaultInputValue: string;
+    /**
+     * Placeholder for the draft field, passed through to the derived
+     * `<skdx-tags-input-input>`.
+     * @default undefined — no placeholder.
+     */
+    placeholder?: string;
+    /**
+     * Whether the derived anatomy ends with a `<skdx-tags-input-clear>` that
+     * empties the whole list in one press.
+     * @default false
+     */
+    clearable: boolean;
+    /**
+     * Accessible name for the draft field, which has no visible label of its own.
+     * @default 'Add a tag'
+     */
+    inputLabel: string;
+    private seeded;
     connectedCallback(): void;
+    /** Draws the canonical anatomy into the light DOM unless a consumer-authored part already exists. */
+    private readonly fillAnatomy;
     private syncFormState;
-    /** Restores the tags the `value` attribute declared when the element was first connected. */
+    /** Restore declared `defaultValue` and `defaultInputValue`. */
     formResetCallback(): void;
     protected updated(changed: PropertyValues): void;
     private _emitValueChange;
-    /** @internal Trims and appends `tag`, deduping and honoring `max`. No-op for a blank/duplicate/rejected tag or once `max` is reached. */
+    /** @internal Trim and append `tag`, deduping and honoring `max`. */
     addTag(tag: string): void;
     /**
-     * @internal Appends a whole batch in one commit, so a pasted `"a,b,c"`
-     * dedupes and validates against the tags accepted earlier in the *same*
-     * batch — not just against the list as it was before the paste. Fires one
-     * `value-change` for the batch, and none at all when nothing was accepted.
+     * @internal Append a batch in one commit (pasted `"a,b,c"` dedupes against
+     * earlier tags in batch). Fires one `value-change`, none if nothing accepted.
      */
     addTags(tags: string[]): void;
-    /** @internal Sets the draft text and dispatches `input-value-change`. */
+    private _emitValueInvalid;
+    /**
+     * @internal Edit a tag through the same rules as new tags, minus `max`.
+     * Judged against other tags so it's not refused as a duplicate of itself.
+     */
+    setTagAtIndex(index: number, tag: string): void;
+    /** @internal Empty the whole list in one change. */
+    clearTags(): void;
+    /** @internal Set draft text and dispatch `input-value-change`. */
     setInputValue(value: string): void;
-    /** @internal Removes the tag at `index`. */
+    /** @internal Remove the tag at `index`. */
     removeTag(index: number): void;
+    /** Which tag owns the Tab stop (seeded 0 for first-render reachability). */
+    private activeIndex;
+    /** Which tag is open for editing (clamped against live count on read). */
+    private editIndex;
+    /** @internal Which tag is open for editing, or `null`. */
+    get editingIndex(): number | null;
+    /** @internal Opens (or, with `null`, closes) the editor over the tag at that index. */
+    setEditingIndex(index: number | null): void;
+    /**
+     * @internal Which tag carries `tabindex="0"`; the rest carry `-1`. Clamped
+     * against the live tag count so a removed tag can't leave the strip unreachable.
+     */
+    get tabStopIndex(): number;
+    /** @internal Claims the Tab stop for the tag at `index` — called on focus, and after a removal hands focus on. */
+    setActiveIndex(index: number): void;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {