@editora/ui-core 0.1.21 → 0.1.23

package/dist/tabs.esm.js

@@ -1,12 +1,12 @@
-import { E as y } from "./ElementBase-YlTLMsGk.mjs";
-import { s as v, r as _, f as w, g as p, m as A } from "./roving-focus-group-Dbm1Jko_.mjs";
+import { E as y } from "./ElementBase-BeZT54Hj.mjs";
+import { s as p, r as _, f as w, g as f, m as A } from "./roving-focus-group-Dbm1Jko_.mjs";
 const k = `
   :host {
     --ui-tabs-nav-bg: var(--ui-color-surface, #ffffff);
     --ui-tabs-panel-bg: var(--ui-color-surface, #ffffff);
     --ui-tabs-border: var(--ui-color-border, #cbd5e1);
     --ui-tabs-text: var(--ui-color-text, #0f172a);
-    --ui-tabs-muted: var(--ui-color-muted, #64748b);
+    --ui-tabs-muted: var(--ui-color-muted, #526175);
     --ui-tabs-accent: var(--ui-tabs-active-bg, var(--ui-color-primary, #2563eb));
     --ui-tabs-active-text: color-mix(in srgb, var(--ui-tabs-accent) 82%, #0f172a 18%);
     --ui-tabs-focus: var(--ui-color-focus-ring, #2563eb);
@@ -300,18 +300,18 @@ const k = `
     --ui-tabs-nav-bg: var(--ui-tabs-accent);
     --ui-tabs-panel-bg: var(--ui-color-surface, #ffffff);
     --ui-tabs-border: color-mix(in srgb, var(--ui-tabs-accent) 76%, #0f172a 24%);
-    --ui-tabs-muted: color-mix(in srgb, var(--ui-color-primary-foreground, #ffffff) 80%, transparent);
+    --ui-tabs-muted: color-mix(in srgb, var(--ui-color-primary-foreground, var(--ui-color-foreground-on-primary, #ffffff)) 94%, transparent);
     --ui-tabs-active-text: color-mix(in srgb, var(--ui-tabs-accent) 78%, #0f172a 22%);
-    --ui-tabs-focus: color-mix(in srgb, var(--ui-color-primary-foreground, #ffffff) 72%, var(--ui-tabs-accent));
+    --ui-tabs-focus: color-mix(in srgb, var(--ui-color-primary-foreground, var(--ui-color-foreground-on-primary, #ffffff)) 72%, var(--ui-tabs-accent));
   }
 
   :host([variant="solid"]) .tab:hover {
-    background: color-mix(in srgb, var(--ui-color-primary-foreground, #ffffff) 14%, transparent);
-    color: var(--ui-color-primary-foreground, #ffffff);
+    background: color-mix(in srgb, var(--ui-color-primary-foreground, var(--ui-color-foreground-on-primary, #ffffff)) 14%, transparent);
+    color: var(--ui-color-primary-foreground, var(--ui-color-foreground-on-primary, #ffffff));
   }
 
   :host([variant="solid"]) .tab[aria-selected="true"] {
-    background: var(--ui-color-primary-foreground, #ffffff);
+    background: var(--ui-color-primary-foreground, var(--ui-color-foreground-on-primary, #ffffff));
     border-color: color-mix(in srgb, var(--ui-tabs-accent) 44%, var(--ui-tabs-border));
     color: var(--ui-tabs-active-text);
   }
@@ -435,11 +435,11 @@ const k = `
   }
 
   :host([tone="success"]) {
-    --ui-tabs-accent: var(--ui-color-success, #16a34a);
+    --ui-tabs-accent: var(--ui-color-success, #15803d);
   }
 
   :host([tone="warning"]) {
-    --ui-tabs-accent: var(--ui-color-warning, #d97706);
+    --ui-tabs-accent: var(--ui-color-warning, #b45309);
   }
 
   :host([tone="danger"]) {
@@ -485,16 +485,18 @@ const k = `
       border-color: Highlight;
     }
   }
-`, f = "data-ui-tabs-auto-label";
-function g(u) {
-  return String(u).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+`, g = "data-ui-tabs-auto-label";
+function v(d) {
+  return String(d).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function x(u) {
-  if (u == null) return !1;
-  const t = String(u).toLowerCase();
+function x(d) {
+  if (d == null) return !1;
+  const t = String(d).toLowerCase();
   return t !== "false" && t !== "0" && t !== "off";
 }
 const S = /* @__PURE__ */ new Set([
+  "aria-label",
+  "aria-labelledby",
   "orientation",
   "activation",
   "headless",
@@ -526,7 +528,9 @@ class I extends y {
       "shape",
       "elevation",
       "loop",
-      "bare"
+      "bare",
+      "aria-label",
+      "aria-labelledby"
     ];
   }
   connectedCallback() {
@@ -567,8 +571,8 @@ class I extends y {
   }
   _tabsModel() {
     return this._sourceTabs().map((t, e) => {
-      const r = t.getAttribute("data-value") || t.getAttribute("value") || String(e), a = t.getAttribute("data-label") || t.textContent?.trim() || `Tab ${e + 1}`, i = t.getAttribute("data-icon") || "", s = t.hasAttribute("disabled") || x(t.getAttribute("data-disabled")), n = `${this._uid}-tab-${e}`, o = `${this._uid}-panel-${e}`;
-      return { index: e, value: r, label: a, icon: i, disabled: s, tabId: n, panelId: o };
+      const r = t.getAttribute("data-value") || t.getAttribute("value") || String(e), a = t.getAttribute("data-label") || t.textContent?.trim() || `Tab ${e + 1}`, i = t.getAttribute("data-icon") || "", s = t.hasAttribute("disabled") || x(t.getAttribute("data-disabled")), b = `${this._uid}-tab-${e}`, c = `${this._uid}-panel-${e}`;
+      return { index: e, value: r, label: a, icon: i, disabled: s, tabId: b, panelId: c };
     });
   }
   _resolveSelectedIndex(t) {
@@ -577,9 +581,9 @@ class I extends y {
     let i = -1;
     if (e != null && e !== "") {
       const s = Number(e);
-      Number.isFinite(s) ? i = Math.trunc(s) : i = t.findIndex((n) => n.value === e);
+      Number.isFinite(s) ? i = Math.trunc(s) : i = t.findIndex((b) => b.value === e);
     }
-    return i < 0 && r && (i = t.findIndex((s) => s.value === r)), i < 0 && (i = t.findIndex((s, n) => !!a[n]?.hasAttribute("data-active") && !s.disabled)), (i < 0 || !t[i] || t[i].disabled) && (i = t.findIndex((s) => !s.disabled)), i;
+    return i < 0 && r && (i = t.findIndex((s) => s.value === r)), i < 0 && (i = t.findIndex((s, b) => !!a[b]?.hasAttribute("data-active") && !s.disabled)), (i < 0 || !t[i] || t[i].disabled) && (i = t.findIndex((s) => !s.disabled)), i;
   }
   _syncSelectedAttributes(t, e) {
     const r = t[e];
@@ -627,14 +631,14 @@ class I extends y {
     const e = this._resolveSelectedIndex(t), r = this._resolveFocusIndex(t, e);
     this._syncSelectedAttributes(t, e);
     const a = Array.from(this.root.querySelectorAll(".tab"));
-    a.forEach((s, n) => {
-      const o = t[n];
-      if (!o) return;
-      const l = n === e;
-      s.setAttribute("aria-selected", l ? "true" : "false"), s.setAttribute("aria-controls", o.panelId), s.setAttribute("aria-disabled", o.disabled ? "true" : "false"), o.disabled ? s.setAttribute("disabled", "") : s.removeAttribute("disabled");
-    }), v(a, a[r] || null, { activeAttribute: null });
+    a.forEach((s, b) => {
+      const c = t[b];
+      if (!c) return;
+      const o = b === e;
+      s.setAttribute("aria-selected", o ? "true" : "false"), s.setAttribute("aria-disabled", c.disabled ? "true" : "false"), c.disabled ? s.setAttribute("disabled", "") : s.removeAttribute("disabled");
+    }), p(a, a[r] || null, { activeAttribute: null });
     const i = t[e];
-    this._syncIndicator(e), i ? (this.setAttribute("aria-activedescendant", i.tabId), this.setAttribute("aria-controls", i.panelId), this._scrollSelectedTabIntoView(e)) : (this.removeAttribute("aria-activedescendant"), this.removeAttribute("aria-controls")), this._syncPanels(t, e);
+    this._syncIndicator(e), this._clearCrossRootReferences(), i && this._scrollSelectedTabIntoView(e), this._syncPanels(t, e);
   }
   _syncIndicator(t) {
     const e = this.root.querySelector(".nav");
@@ -649,17 +653,20 @@ class I extends y {
       e.removeAttribute("data-indicator-ready");
       return;
     }
-    const n = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", o = getComputedStyle(this).direction === "rtl";
-    let l = s.offsetLeft, d = s.offsetTop, c = s.offsetWidth, b = s.offsetHeight;
-    a ? (l += 2, d += 2, c = Math.max(0, c - 4), b = Math.max(0, b - 4)) : n === "vertical" ? (d += 5, b = Math.max(8, b - 10), c = 3, l += o ? s.offsetWidth - 3 - 2 : 2) : (l += 8, c = Math.max(12, c - 16), b = 2, d += s.offsetHeight - 2 - 2), e.style.setProperty("--ui-tabs-indicator-x", `${l}px`), e.style.setProperty("--ui-tabs-indicator-y", `${d}px`), e.style.setProperty("--ui-tabs-indicator-w", `${c}px`), e.style.setProperty("--ui-tabs-indicator-h", `${b}px`), e.setAttribute("data-indicator-ready", "true");
+    const b = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", c = getComputedStyle(this).direction === "rtl";
+    let o = s.offsetLeft, u = s.offsetTop, n = s.offsetWidth, l = s.offsetHeight;
+    a ? (o += 2, u += 2, n = Math.max(0, n - 4), l = Math.max(0, l - 4)) : b === "vertical" ? (u += 5, l = Math.max(8, l - 10), n = 3, o += c ? s.offsetWidth - 3 - 2 : 2) : (o += 8, n = Math.max(12, n - 16), l = 2, u += s.offsetHeight - 2 - 2), e.style.setProperty("--ui-tabs-indicator-x", `${o}px`), e.style.setProperty("--ui-tabs-indicator-y", `${u}px`), e.style.setProperty("--ui-tabs-indicator-w", `${n}px`), e.style.setProperty("--ui-tabs-indicator-h", `${l}px`), e.setAttribute("data-indicator-ready", "true");
+  }
+  _clearCrossRootReferences() {
+    this.removeAttribute("aria-activedescendant"), this.removeAttribute("aria-controls");
   }
   _syncPanels(t, e) {
     const r = this._sourcePanels(), a = this.root.querySelector(".panel-wrap");
     a && (r.length ? a.removeAttribute("hidden") : a.setAttribute("hidden", "")), this._isSyncing = !0;
     try {
       r.forEach((i, s) => {
-        const n = t[s], o = s === e;
-        i.id = n?.panelId || `${this._uid}-panel-${s}`, i.setAttribute("role", "tabpanel"), i.setAttribute("tabindex", o ? "0" : "-1"), i.setAttribute("aria-hidden", o ? "false" : "true"), n && (i.getAttribute("aria-labelledby") === n.tabId && i.removeAttribute("aria-labelledby"), i.hasAttribute("aria-labelledby") || i.hasAttribute("aria-label") && !i.hasAttribute(f) || (i.setAttribute("aria-label", n.label), i.setAttribute(f, ""))), o ? i.removeAttribute("hidden") : i.setAttribute("hidden", "");
+        const b = t[s], c = s === e;
+        i.id = b?.panelId || `${this._uid}-panel-${s}`, i.setAttribute("role", "tabpanel"), i.setAttribute("tabindex", c ? "0" : "-1"), i.setAttribute("aria-hidden", c ? "false" : "true"), b && (i.getAttribute("aria-labelledby") === b.tabId && i.removeAttribute("aria-labelledby"), i.hasAttribute("aria-labelledby") || i.hasAttribute("aria-label") && !i.hasAttribute(g) || (i.setAttribute("aria-label", b.label), i.setAttribute(g, ""))), c ? i.removeAttribute("hidden") : i.setAttribute("hidden", "");
       });
     } finally {
       this._isSyncing = !1;
@@ -682,7 +689,7 @@ class I extends y {
   _focusTab(t) {
     this._focusIndex = t;
     const e = this.root.querySelector(`.tab[data-index="${t}"]`), r = Array.from(this.root.querySelectorAll(".tab"));
-    v(r, e, { activeAttribute: null }), w(e);
+    p(r, e, { activeAttribute: null }), w(e);
   }
   _scrollSelectedTabIntoView(t) {
     const e = this.root.querySelector(".nav"), r = this.root.querySelector(`.tab[data-index="${t}"]`);
@@ -707,79 +714,76 @@ class I extends y {
     if (!r) return;
     const a = this._tabsModel();
     if (!a.length) return;
-    const i = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", s = this.getAttribute("activation") === "manual" ? "manual" : "auto", n = !this.hasAttribute("loop") || x(this.getAttribute("loop")), o = getComputedStyle(this).direction === "rtl", l = Number(r.getAttribute("data-index"));
-    if (!Number.isFinite(l)) return;
-    const d = (c) => {
-      const b = A(a, l, c, {
-        wrap: n,
+    const i = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", s = this.getAttribute("activation") === "manual" ? "manual" : "auto", b = !this.hasAttribute("loop") || x(this.getAttribute("loop")), c = getComputedStyle(this).direction === "rtl", o = Number(r.getAttribute("data-index"));
+    if (!Number.isFinite(o)) return;
+    const u = (n) => {
+      const l = A(a, o, n, {
+        wrap: b,
         fallbackIndex: this._resolveFocusIndex(a, this._resolveSelectedIndex(a)),
         getDisabled: (h) => h.disabled
       });
-      b != null && (this._focusTab(b), s === "auto" ? this._setSelectedByIndex(a, b, !0) : this._emit("focus", a, b));
+      l != null && (this._focusTab(l), s === "auto" ? this._setSelectedByIndex(a, l, !0) : this._emit("focus", a, l));
     };
-    if (i === "horizontal" && (t.key === "ArrowRight" && !o || t.key === "ArrowLeft" && o) || i === "vertical" && t.key === "ArrowDown") {
-      t.preventDefault(), d(1);
+    if (i === "horizontal" && (t.key === "ArrowRight" && !c || t.key === "ArrowLeft" && c) || i === "vertical" && t.key === "ArrowDown") {
+      t.preventDefault(), u(1);
       return;
     }
-    if (i === "horizontal" && (t.key === "ArrowLeft" && !o || t.key === "ArrowRight" && o) || i === "vertical" && t.key === "ArrowUp") {
-      t.preventDefault(), d(-1);
+    if (i === "horizontal" && (t.key === "ArrowLeft" && !c || t.key === "ArrowRight" && c) || i === "vertical" && t.key === "ArrowUp") {
+      t.preventDefault(), u(-1);
       return;
     }
     if (t.key === "Home") {
       t.preventDefault();
-      const c = p(a, "first", (b) => b.disabled);
-      if (c < 0) return;
-      this._focusTab(c), s === "auto" ? this._setSelectedByIndex(a, c, !0) : this._emit("focus", a, c);
+      const n = f(a, "first", (l) => l.disabled);
+      if (n < 0) return;
+      this._focusTab(n), s === "auto" ? this._setSelectedByIndex(a, n, !0) : this._emit("focus", a, n);
       return;
     }
     if (t.key === "End") {
       t.preventDefault();
-      const c = p(a, "last", (b) => b.disabled);
-      if (c < 0) return;
-      this._focusTab(c), s === "auto" ? this._setSelectedByIndex(a, c, !0) : this._emit("focus", a, c);
+      const n = f(a, "last", (l) => l.disabled);
+      if (n < 0) return;
+      this._focusTab(n), s === "auto" ? this._setSelectedByIndex(a, n, !0) : this._emit("focus", a, n);
       return;
     }
-    (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this._setSelectedByIndex(a, l, !0));
+    (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this._setSelectedByIndex(a, o, !0));
   }
   render() {
     const t = this._tabsModel(), e = this._resolveSelectedIndex(t), r = this._resolveFocusIndex(t, e);
     this._syncSelectedAttributes(t, e);
-    const a = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", i = t.map((n) => {
-      const o = n.index === e, l = n.icon ? `<span class="tab-icon" aria-hidden="true">${g(n.icon)}</span>` : "";
+    const a = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", i = (this.getAttribute("aria-label") || "").trim(), s = (this.getAttribute("aria-labelledby") || "").trim(), b = (i ? ` aria-label="${v(i)}"` : "") + (s ? ` aria-labelledby="${v(s)}"` : ""), c = t.map((o) => {
+      const u = o.index === e, n = o.icon ? `<span class="tab-icon" aria-hidden="true">${v(o.icon)}</span>` : "";
       return `
           <button
             type="button"
             class="tab"
             part="tab"
-            id="${n.tabId}"
+            id="${o.tabId}"
             role="tab"
-            data-index="${n.index}"
-            aria-selected="${o ? "true" : "false"}"
-            aria-controls="${n.panelId}"
-            aria-disabled="${n.disabled ? "true" : "false"}"
-            tabindex="${n.index === r && !n.disabled ? "0" : "-1"}"
-            ${n.disabled ? "disabled" : ""}
+            data-index="${o.index}"
+            aria-selected="${u ? "true" : "false"}"
+            aria-disabled="${o.disabled ? "true" : "false"}"
+            tabindex="${o.index === r && !o.disabled ? "0" : "-1"}"
+            ${o.disabled ? "disabled" : ""}
           >
-            ${l}
-            <span class="tab-label">${g(n.label)}</span>
+            ${n}
+            <span class="tab-label">${v(o.label)}</span>
           </button>
         `;
     }).join("");
     this.setContent(`
       <style>${k}</style>
       <section class="shell" part="shell">
-        <div class="nav" role="tablist" aria-orientation="${a}" part="nav">
+        <div class="nav" role="tablist" aria-orientation="${a}"${b} part="nav">
           <span class="indicator" part="indicator" aria-hidden="true"></span>
-          ${i}
+          ${c}
         </div>
         <div class="panel-wrap" part="panel-wrap" aria-live="polite">
           <slot name="panel"></slot>
         </div>
       </section>
       <slot class="source-tabs" name="tab"></slot>
-    `);
-    const s = t[e];
-    s ? (this.setAttribute("aria-activedescendant", s.tabId), this.setAttribute("aria-controls", s.panelId)) : (this.removeAttribute("aria-activedescendant"), this.removeAttribute("aria-controls")), this._syncIndicator(e), this._syncPanels(t, e);
+    `), this._clearCrossRootReferences(), this._syncIndicator(e), this._syncPanels(t, e);
   }
 }
 typeof customElements < "u" && !customElements.get("ui-tabs") && customElements.define("ui-tabs", I);

package/dist/tags-input.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const E=require("./ElementBase-EV6mVBUV.js"),A=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const S=require("./ElementBase-DxbvhLJs.js"),f=require("./control-name-BmoI1m3a.js"),k=`
   :host {
     --ui-tags-input-padding: 10px 12px;
     --ui-tags-input-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
@@ -6,7 +6,7 @@
     --ui-tags-input-radius: var(--ui-radius, 12px);
     --ui-tags-input-bg: var(--ui-color-surface, #ffffff);
     --ui-tags-input-text: var(--ui-color-text, #0f172a);
-    --ui-tags-input-muted: var(--ui-color-muted, #64748b);
+    --ui-tags-input-muted: var(--ui-color-muted, #526175);
     --ui-tags-input-focus: var(--ui-color-focus-ring, #2563eb);
     --ui-tags-input-danger: var(--ui-color-danger, #dc2626);
     --ui-tags-input-chip-bg: color-mix(in srgb, var(--ui-color-primary, #2563eb) 10%, transparent);
@@ -181,22 +181,22 @@
   :host([readonly]) .chip-remove {
     pointer-events: none;
   }
-`;function m(r,t){return r.length===t.length&&r.every((i,e)=>i===t[e])}function d(r){if(!r)return[];const t=r.trim();if(!t)return[];if(t.startsWith("["))try{const i=JSON.parse(t);if(Array.isArray(i))return i.map(e=>String(e).trim()).filter(Boolean)}catch{}return t.split(",").map(i=>i.trim()).filter(Boolean)}function S(r){return r.length?r.some(t=>t.includes(",")||t.includes(`
-`))?JSON.stringify(r):r.join(", "):""}function c(r){return r.replace(/\s+/g," ").trim()}class f extends E.ElementBase{constructor(){super(),this._tags=[],this._draft="",this._suppressValueAttr=!1,this._formUnregister=null,this._rootEl=null,this._shellEl=null,this._chipsEl=null,this._inputEl=null,this._labelEl=null,this._descriptionEl=null,this._errorEl=null,this._assistEl=null,this._counterEl=null,this._focused=!1,this._onInput=this._onInput.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onFocusIn=this._onFocusIn.bind(this),this._onFocusOut=this._onFocusOut.bind(this),this._onPaste=this._onPaste.bind(this),this._onShellClick=this._onShellClick.bind(this),this._onChipClick=this._onChipClick.bind(this)}static get observedAttributes(){return["value","label","description","placeholder","data-error","required","disabled","readonly","name","max-tags","counter"]}get value(){return[...this._tags]}set value(t){const i=Array.isArray(t)?t.map(e=>c(String(e))).filter(Boolean):d(String(t??""));this._applyTags(i,"api")}addTag(t){return this._addTag(t,"api")}removeTag(t){if(typeof t=="number"){if(t<0||t>=this._tags.length)return;this._removeTagAt(t,"api");return}const i=this._tags.indexOf(t);i>=0&&this._removeTagAt(i,"api")}clearTags(){this._applyTags([],"api")}focusInput(){this._inputEl?.focus()}connectedCallback(){super.connectedCallback(),this._registerWithForm()}disconnectedCallback(){this._formUnregister&&(this._formUnregister(),this._formUnregister=null),super.disconnectedCallback()}attributeChangedCallback(t,i,e){if(i!==e){if(t==="name"&&this.isConnected&&this._registerWithForm(),t==="value"&&!this._suppressValueAttr){const s=d(e);m(s,this._tags)||(this._tags=s)}this._rootEl&&this._syncUi()}}shouldRenderOnAttributeChange(){return!1}render(){this.setContent(`
-      <style>${A}</style>
+`;function b(r,t){return r.length===t.length&&r.every((i,e)=>i===t[e])}function d(r){if(!r)return[];const t=r.trim();if(!t)return[];if(t.startsWith("["))try{const i=JSON.parse(t);if(Array.isArray(i))return i.map(e=>String(e).trim()).filter(Boolean)}catch{}return t.split(",").map(i=>i.trim()).filter(Boolean)}function C(r){return r.length?r.some(t=>t.includes(",")||t.includes(`
+`))?JSON.stringify(r):r.join(", "):""}function c(r){return r.replace(/\s+/g," ").trim()}let T=0;class v extends S.ElementBase{constructor(){super(),this._tags=[],this._draft="",this._suppressValueAttr=!1,this._formUnregister=null,this._rootEl=null,this._shellEl=null,this._chipsEl=null,this._inputEl=null,this._uid=`ui-tags-input-${++T}`,this._labelEl=null,this._descriptionEl=null,this._errorEl=null,this._assistEl=null,this._counterEl=null,this._focused=!1,this._onInput=this._onInput.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onFocusIn=this._onFocusIn.bind(this),this._onFocusOut=this._onFocusOut.bind(this),this._onPaste=this._onPaste.bind(this),this._onShellClick=this._onShellClick.bind(this),this._onChipClick=this._onChipClick.bind(this)}static get observedAttributes(){return["value","label","aria-label","aria-description","aria-describedby","description","placeholder","data-error","required","disabled","readonly","name","max-tags","counter"]}get value(){return[...this._tags]}set value(t){const i=Array.isArray(t)?t.map(e=>c(String(e))).filter(Boolean):d(String(t??""));this._applyTags(i,"api")}addTag(t){return this._addTag(t,"api")}removeTag(t){if(typeof t=="number"){if(t<0||t>=this._tags.length)return;this._removeTagAt(t,"api");return}const i=this._tags.indexOf(t);i>=0&&this._removeTagAt(i,"api")}clearTags(){this._applyTags([],"api")}focusInput(){this._inputEl?.focus()}connectedCallback(){super.connectedCallback(),this._registerWithForm()}disconnectedCallback(){this._formUnregister&&(this._formUnregister(),this._formUnregister=null),super.disconnectedCallback()}attributeChangedCallback(t,i,e){if(i!==e){if(t==="name"&&this.isConnected&&this._registerWithForm(),t==="value"&&!this._suppressValueAttr){const s=d(e);b(s,this._tags)||(this._tags=s)}this._rootEl&&this._syncUi()}}shouldRenderOnAttributeChange(){return!1}render(){this.setContent(`
+      <style>${k}</style>
       <div class="root">
         <div class="meta" hidden>
-          <div class="label" hidden><span class="label-text"></span><span class="required" hidden>*</span></div>
-          <div class="description" hidden></div>
+          <div class="label" hidden><span class="label-text" id="${this._uid}-label"></span><span class="required" hidden>*</span></div>
+          <div class="description" id="${this._uid}-description" hidden></div>
         </div>
         <div class="shell" part="shell" data-focused="false" data-invalid="false">
           <div class="chips" part="chips"></div>
           <input class="input" part="input" type="text" />
         </div>
-        <div class="error" part="error" hidden></div>
+        <div class="error" id="${this._uid}-error" part="error" hidden></div>
         <div class="assist" hidden>
           <div class="hint">Press Enter or comma to create a tag.</div>
           <div class="counter"></div>
         </div>
       </div>
-    `),this._rootEl=this.root.querySelector(".root"),this._shellEl=this.root.querySelector(".shell"),this._chipsEl=this.root.querySelector(".chips"),this._inputEl=this.root.querySelector(".input"),this._labelEl=this.root.querySelector(".label"),this._descriptionEl=this.root.querySelector(".description"),this._errorEl=this.root.querySelector(".error"),this._assistEl=this.root.querySelector(".assist"),this._counterEl=this.root.querySelector(".counter"),this._inputEl?.addEventListener("input",this._onInput),this._inputEl?.addEventListener("keydown",this._onKeyDown),this._inputEl?.addEventListener("focus",this._onFocusIn),this._inputEl?.addEventListener("blur",this._onFocusOut),this._inputEl?.addEventListener("paste",this._onPaste),this._shellEl?.addEventListener("click",this._onShellClick),this.root.addEventListener("click",this._onChipClick),this._tags=d(this.getAttribute("value")),this._syncUi()}_readOnly(){return this.hasAttribute("readonly")}_disabled(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}_allowDuplicates(){return this.hasAttribute("allow-duplicates")}_maxTags(){const t=this.getAttribute("max-tags");if(!t)return null;const i=Number(t);return Number.isFinite(i)&&i>0?Math.floor(i):null}_emit(t,i){this.dispatchEvent(new CustomEvent(t,{detail:i,bubbles:!0,composed:!0}))}_setValueAttr(t){const i=S(t);this._suppressValueAttr=!0;try{i?this.getAttribute("value")!==i&&this.setAttribute("value",i):this.removeAttribute("value")}finally{this._suppressValueAttr=!1}}_applyTags(t,i){const e=t.map(l=>c(l)).filter(Boolean),s=this._allowDuplicates()?e:e.filter((l,o)=>e.indexOf(l)===o),n=this._maxTags()!=null?s.slice(0,this._maxTags()):s;if(m(n,this._tags))return this._syncUi(),!1;const a=[...this._tags];return this._tags=[...n],this._setValueAttr(this._tags),this._syncUi(),this._emit("change",{value:[...this._tags],previousValue:a,source:i}),!0}_addTag(t,i){if(this._disabled()||this._readOnly())return!1;const e=c(t);if(!e)return!1;if(!this._allowDuplicates()&&this._tags.includes(e))return this._syncUi("Duplicate tag"),!1;const s=this._maxTags();if(s!=null&&this._tags.length>=s)return this._syncUi(`Maximum ${s} tags`),!1;const n=this._applyTags([...this._tags,e],i);return n&&this._emit("tag-add",{tag:e,value:[...this._tags],source:i}),n}_removeTagAt(t,i){if(this._disabled()||this._readOnly())return;const e=this._tags[t];if(!e)return;const s=this._tags.filter((a,l)=>l!==t);this._applyTags(s,i)&&this._emit("tag-remove",{tag:e,index:t,value:[...this._tags],source:i})}_commitDraft(t){const i=this._draft;this._draft="",this._inputEl&&(this._inputEl.value=""),this._addTag(i,t),this._syncUi()}_syncUi(t){if(!this._shellEl||!this._chipsEl||!this._inputEl||!this._labelEl||!this._descriptionEl||!this._errorEl||!this._assistEl||!this._counterEl)return;const i=(this.getAttribute("label")||"").trim(),e=(this.getAttribute("description")||"").trim(),s=(this.getAttribute("data-error")||"").trim(),n=this.hasAttribute("required"),a=this._disabled(),l=this._readOnly(),o=this._maxTags(),b=this.hasAttribute("counter")||o!=null,v=!!s||!!t||n&&this._tags.length===0&&this.hasAttribute("invalid");this._labelEl.hidden=!i,this._labelEl.querySelector(".label-text").textContent=i,this._labelEl.querySelector(".required").hidden=!n,this._descriptionEl.hidden=!e,this._descriptionEl.textContent=e,this.root.querySelector(".meta").hidden=!i&&!e,this._shellEl.setAttribute("data-focused",this._focused?"true":"false"),this._shellEl.setAttribute("data-invalid",v?"true":"false"),this._inputEl.disabled=a,this._inputEl.readOnly=l,this._inputEl.placeholder=this._tags.length===0?this.getAttribute("placeholder")||"Add tags":"",this._inputEl.value=this._draft;const y=a||o!=null&&this._tags.length>=o;this._inputEl.setAttribute("aria-disabled",y?"true":"false"),this._chipsEl.replaceChildren(...this._tags.map((_,x)=>{const h=document.createElement("span");h.className="chip",h.setAttribute("part","chip");const p=document.createElement("span");p.className="chip-label",p.textContent=_;const u=document.createElement("button");return u.type="button",u.className="chip-remove",u.setAttribute("data-index",String(x)),u.setAttribute("aria-label",`Remove ${_}`),u.textContent="×",u.disabled=a||l,h.append(p,u),h}));const g=t||s;this._errorEl.hidden=!g,this._errorEl.textContent=g,this._assistEl.hidden=!b,this._counterEl.textContent=o!=null?`${this._tags.length}/${o}`:String(this._tags.length)}_registerWithForm(){this._formUnregister&&(this._formUnregister(),this._formUnregister=null);try{const s=this.getRootNode().host?.closest?.("ui-form")||null||this.closest("ui-form"),n=this.getAttribute("name");s&&typeof s.registerField=="function"&&n&&(this._formUnregister=s.registerField(n,{name:n,getValue:()=>[...this._tags],setValue:a=>{Array.isArray(a)?this._applyTags(a.map(l=>String(l)),"form"):this._applyTags(d(String(a??"")),"form")},validate:async()=>this.hasAttribute("required")&&this._tags.length===0?{valid:!1,message:"At least one tag is required"}:{valid:!0},setError:a=>{a?this.setAttribute("data-error",a):this.removeAttribute("data-error"),this._syncUi()}}))}catch{}}_onInput(t){const i=t.target;this._draft=i?.value||"",this._emit("input",{draft:this._draft,value:[...this._tags]}),this._syncUi()}_onKeyDown(t){if(t.key==="Enter"||t.key===","){t.preventDefault(),this._commitDraft("keyboard");return}t.key==="Backspace"&&!this._draft&&this._removeTagAt(this._tags.length-1,"keyboard")}_onPaste(t){const i=t.clipboardData?.getData("text")||"";if(!/[,\n]/.test(i))return;t.preventDefault();const e=i.split(/[,\n]+/).map(c).filter(Boolean);e.length&&(this._draft="",this._inputEl&&(this._inputEl.value=""),this._applyTags([...this._tags,...e],"paste"))}_onFocusIn(){this._focused=!0,this._syncUi()}_onFocusOut(){this._focused=!1,this.hasAttribute("add-on-blur")&&this._draft?this._commitDraft("blur"):this._syncUi()}_onShellClick(t){t.target?.closest(".chip-remove")||this._inputEl?.focus()}_onChipClick(t){const e=t.target?.closest(".chip-remove");if(!e)return;const s=Number(e.getAttribute("data-index"));Number.isFinite(s)&&this._removeTagAt(s,"remove-button")}}typeof customElements<"u"&&!customElements.get("ui-tags-input")&&customElements.define("ui-tags-input",f);exports.UITagsInput=f;
+    `),this._rootEl=this.root.querySelector(".root"),this._shellEl=this.root.querySelector(".shell"),this._chipsEl=this.root.querySelector(".chips"),this._inputEl=this.root.querySelector(".input"),this._labelEl=this.root.querySelector(".label"),this._descriptionEl=this.root.querySelector(".description"),this._errorEl=this.root.querySelector(".error"),this._assistEl=this.root.querySelector(".assist"),this._counterEl=this.root.querySelector(".counter"),this._inputEl?.addEventListener("input",this._onInput),this._inputEl?.addEventListener("keydown",this._onKeyDown),this._inputEl?.addEventListener("focus",this._onFocusIn),this._inputEl?.addEventListener("blur",this._onFocusOut),this._inputEl?.addEventListener("paste",this._onPaste),this._shellEl?.addEventListener("click",this._onShellClick),this.root.addEventListener("click",this._onChipClick),this._tags=d(this.getAttribute("value")),this._syncUi()}_readOnly(){return this.hasAttribute("readonly")}_disabled(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}_allowDuplicates(){return this.hasAttribute("allow-duplicates")}_maxTags(){const t=this.getAttribute("max-tags");if(!t)return null;const i=Number(t);return Number.isFinite(i)&&i>0?Math.floor(i):null}_emit(t,i){this.dispatchEvent(new CustomEvent(t,{detail:i,bubbles:!0,composed:!0}))}_setValueAttr(t){const i=C(t);this._suppressValueAttr=!0;try{i?this.getAttribute("value")!==i&&this.setAttribute("value",i):this.removeAttribute("value")}finally{this._suppressValueAttr=!1}}_applyTags(t,i){const e=t.map(l=>c(l)).filter(Boolean),s=this._allowDuplicates()?e:e.filter((l,o)=>e.indexOf(l)===o),n=this._maxTags()!=null?s.slice(0,this._maxTags()):s;if(b(n,this._tags))return this._syncUi(),!1;const a=[...this._tags];return this._tags=[...n],this._setValueAttr(this._tags),this._syncUi(),this._emit("change",{value:[...this._tags],previousValue:a,source:i}),!0}_addTag(t,i){if(this._disabled()||this._readOnly())return!1;const e=c(t);if(!e)return!1;if(!this._allowDuplicates()&&this._tags.includes(e))return this._syncUi("Duplicate tag"),!1;const s=this._maxTags();if(s!=null&&this._tags.length>=s)return this._syncUi(`Maximum ${s} tags`),!1;const n=this._applyTags([...this._tags,e],i);return n&&this._emit("tag-add",{tag:e,value:[...this._tags],source:i}),n}_removeTagAt(t,i){if(this._disabled()||this._readOnly())return;const e=this._tags[t];if(!e)return;const s=this._tags.filter((a,l)=>l!==t);this._applyTags(s,i)&&this._emit("tag-remove",{tag:e,index:t,value:[...this._tags],source:i})}_commitDraft(t){const i=this._draft;this._draft="",this._inputEl&&(this._inputEl.value=""),this._addTag(i,t),this._syncUi()}_syncUi(t){if(!this._shellEl||!this._chipsEl||!this._inputEl||!this._labelEl||!this._descriptionEl||!this._errorEl||!this._assistEl||!this._counterEl)return;const i=(this.getAttribute("label")||"").trim(),e=(this.getAttribute("description")||"").trim(),s=(this.getAttribute("data-error")||"").trim(),n=this.hasAttribute("required"),a=this._disabled(),l=this._readOnly(),o=this._maxTags(),y=this.hasAttribute("counter")||o!=null,x=!!s||!!t||n&&this._tags.length===0&&this.hasAttribute("invalid");this._labelEl.hidden=!i,this._labelEl.querySelector(".label-text").textContent=i,this._labelEl.querySelector(".required").hidden=!n,this._descriptionEl.hidden=!e,this._descriptionEl.textContent=e,this.root.querySelector(".meta").hidden=!i&&!e,f.syncControlName(this._inputEl,this,i?`${this._uid}-label`:null),this._shellEl.setAttribute("data-focused",this._focused?"true":"false"),this._shellEl.setAttribute("data-invalid",x?"true":"false"),this._inputEl.disabled=a,this._inputEl.readOnly=l,this._inputEl.placeholder=this._tags.length===0?this.getAttribute("placeholder")||"Add tags":"",this._inputEl.value=this._draft;const E=a||o!=null&&this._tags.length>=o;this._inputEl.setAttribute("aria-disabled",E?"true":"false"),this._chipsEl.replaceChildren(...this._tags.map((m,A)=>{const h=document.createElement("span");h.className="chip",h.setAttribute("part","chip");const _=document.createElement("span");_.className="chip-label",_.textContent=m;const u=document.createElement("button");return u.type="button",u.className="chip-remove",u.setAttribute("data-index",String(A)),u.setAttribute("aria-label",`Remove ${m}`),u.textContent="×",u.disabled=a||l,h.append(_,u),h}));const p=t||s;this._errorEl.hidden=!p,this._errorEl.textContent=p;const g=[];e&&g.push(`${this._uid}-description`),p&&g.push(`${this._uid}-error`),f.syncControlDescription(this._inputEl,this,this._uid,g),this._assistEl.hidden=!y,this._counterEl.textContent=o!=null?`${this._tags.length}/${o}`:String(this._tags.length)}_registerWithForm(){this._formUnregister&&(this._formUnregister(),this._formUnregister=null);try{const s=this.getRootNode().host?.closest?.("ui-form")||null||this.closest("ui-form"),n=this.getAttribute("name");s&&typeof s.registerField=="function"&&n&&(this._formUnregister=s.registerField(n,{name:n,getValue:()=>[...this._tags],setValue:a=>{Array.isArray(a)?this._applyTags(a.map(l=>String(l)),"form"):this._applyTags(d(String(a??"")),"form")},validate:async()=>this.hasAttribute("required")&&this._tags.length===0?{valid:!1,message:"At least one tag is required"}:{valid:!0},setError:a=>{a?this.setAttribute("data-error",a):this.removeAttribute("data-error"),this._syncUi()}}))}catch{}}_onInput(t){const i=t.target;this._draft=i?.value||"",this._emit("input",{draft:this._draft,value:[...this._tags]}),this._syncUi()}_onKeyDown(t){if(t.key==="Enter"||t.key===","){t.preventDefault(),this._commitDraft("keyboard");return}t.key==="Backspace"&&!this._draft&&this._removeTagAt(this._tags.length-1,"keyboard")}_onPaste(t){const i=t.clipboardData?.getData("text")||"";if(!/[,\n]/.test(i))return;t.preventDefault();const e=i.split(/[,\n]+/).map(c).filter(Boolean);e.length&&(this._draft="",this._inputEl&&(this._inputEl.value=""),this._applyTags([...this._tags,...e],"paste"))}_onFocusIn(){this._focused=!0,this._syncUi()}_onFocusOut(){this._focused=!1,this.hasAttribute("add-on-blur")&&this._draft?this._commitDraft("blur"):this._syncUi()}_onShellClick(t){t.target?.closest(".chip-remove")||this._inputEl?.focus()}_onChipClick(t){const e=t.target?.closest(".chip-remove");if(!e)return;const s=Number(e.getAttribute("data-index"));Number.isFinite(s)&&this._removeTagAt(s,"remove-button")}}typeof customElements<"u"&&!customElements.get("ui-tags-input")&&customElements.define("ui-tags-input",v);exports.UITagsInput=v;

package/dist/tags-input.esm.js

@@ -1,5 +1,6 @@
-import { E as x } from "./ElementBase-YlTLMsGk.mjs";
-const E = `
+import { E } from "./ElementBase-BeZT54Hj.mjs";
+import { s as A, a as S } from "./control-name-Bpj7F34X.mjs";
+const k = `
   :host {
     --ui-tags-input-padding: 10px 12px;
     --ui-tags-input-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
@@ -7,7 +8,7 @@ const E = `
     --ui-tags-input-radius: var(--ui-radius, 12px);
     --ui-tags-input-bg: var(--ui-color-surface, #ffffff);
     --ui-tags-input-text: var(--ui-color-text, #0f172a);
-    --ui-tags-input-muted: var(--ui-color-muted, #64748b);
+    --ui-tags-input-muted: var(--ui-color-muted, #526175);
     --ui-tags-input-focus: var(--ui-color-focus-ring, #2563eb);
     --ui-tags-input-danger: var(--ui-color-danger, #dc2626);
     --ui-tags-input-chip-bg: color-mix(in srgb, var(--ui-color-primary, #2563eb) 10%, transparent);
@@ -183,7 +184,7 @@ const E = `
     pointer-events: none;
   }
 `;
-function m(r, t) {
+function f(r, t) {
   return r.length === t.length && r.every((i, e) => i === t[e]);
 }
 function d(r) {
@@ -199,21 +200,25 @@ function d(r) {
     }
   return t.split(",").map((i) => i.trim()).filter(Boolean);
 }
-function A(r) {
+function C(r) {
   return r.length ? r.some((t) => t.includes(",") || t.includes(`
 `)) ? JSON.stringify(r) : r.join(", ") : "";
 }
 function c(r) {
   return r.replace(/\s+/g, " ").trim();
 }
-class S extends x {
+let T = 0;
+class U extends E {
   constructor() {
-    super(), this._tags = [], this._draft = "", this._suppressValueAttr = !1, this._formUnregister = null, this._rootEl = null, this._shellEl = null, this._chipsEl = null, this._inputEl = null, this._labelEl = null, this._descriptionEl = null, this._errorEl = null, this._assistEl = null, this._counterEl = null, this._focused = !1, this._onInput = this._onInput.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onFocusIn = this._onFocusIn.bind(this), this._onFocusOut = this._onFocusOut.bind(this), this._onPaste = this._onPaste.bind(this), this._onShellClick = this._onShellClick.bind(this), this._onChipClick = this._onChipClick.bind(this);
+    super(), this._tags = [], this._draft = "", this._suppressValueAttr = !1, this._formUnregister = null, this._rootEl = null, this._shellEl = null, this._chipsEl = null, this._inputEl = null, this._uid = `ui-tags-input-${++T}`, this._labelEl = null, this._descriptionEl = null, this._errorEl = null, this._assistEl = null, this._counterEl = null, this._focused = !1, this._onInput = this._onInput.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onFocusIn = this._onFocusIn.bind(this), this._onFocusOut = this._onFocusOut.bind(this), this._onPaste = this._onPaste.bind(this), this._onShellClick = this._onShellClick.bind(this), this._onChipClick = this._onChipClick.bind(this);
   }
   static get observedAttributes() {
     return [
       "value",
       "label",
+      "aria-label",
+      "aria-description",
+      "aria-describedby",
       "description",
       "placeholder",
       "data-error",
@@ -260,7 +265,7 @@ class S extends x {
     if (i !== e) {
       if (t === "name" && this.isConnected && this._registerWithForm(), t === "value" && !this._suppressValueAttr) {
         const s = d(e);
-        m(s, this._tags) || (this._tags = s);
+        f(s, this._tags) || (this._tags = s);
       }
       this._rootEl && this._syncUi();
     }
@@ -270,17 +275,17 @@ class S extends x {
   }
   render() {
     this.setContent(`
-      <style>${E}</style>
+      <style>${k}</style>
       <div class="root">
         <div class="meta" hidden>
-          <div class="label" hidden><span class="label-text"></span><span class="required" hidden>*</span></div>
-          <div class="description" hidden></div>
+          <div class="label" hidden><span class="label-text" id="${this._uid}-label"></span><span class="required" hidden>*</span></div>
+          <div class="description" id="${this._uid}-description" hidden></div>
         </div>
         <div class="shell" part="shell" data-focused="false" data-invalid="false">
           <div class="chips" part="chips"></div>
           <input class="input" part="input" type="text" />
         </div>
-        <div class="error" part="error" hidden></div>
+        <div class="error" id="${this._uid}-error" part="error" hidden></div>
         <div class="assist" hidden>
           <div class="hint">Press Enter or comma to create a tag.</div>
           <div class="counter"></div>
@@ -307,7 +312,7 @@ class S extends x {
     this.dispatchEvent(new CustomEvent(t, { detail: i, bubbles: !0, composed: !0 }));
   }
   _setValueAttr(t) {
-    const i = A(t);
+    const i = C(t);
     this._suppressValueAttr = !0;
     try {
       i ? this.getAttribute("value") !== i && this.setAttribute("value", i) : this.removeAttribute("value");
@@ -317,7 +322,7 @@ class S extends x {
   }
   _applyTags(t, i) {
     const e = t.map((l) => c(l)).filter(Boolean), s = this._allowDuplicates() ? e : e.filter((l, o) => e.indexOf(l) === o), n = this._maxTags() != null ? s.slice(0, this._maxTags()) : s;
-    if (m(n, this._tags))
+    if (f(n, this._tags))
       return this._syncUi(), !1;
     const a = [...this._tags];
     return this._tags = [...n], this._setValueAttr(this._tags), this._syncUi(), this._emit("change", { value: [...this._tags], previousValue: a, source: i }), !0;
@@ -347,19 +352,21 @@ class S extends x {
   }
   _syncUi(t) {
     if (!this._shellEl || !this._chipsEl || !this._inputEl || !this._labelEl || !this._descriptionEl || !this._errorEl || !this._assistEl || !this._counterEl) return;
-    const i = (this.getAttribute("label") || "").trim(), e = (this.getAttribute("description") || "").trim(), s = (this.getAttribute("data-error") || "").trim(), n = this.hasAttribute("required"), a = this._disabled(), l = this._readOnly(), o = this._maxTags(), f = this.hasAttribute("counter") || o != null, b = !!s || !!t || n && this._tags.length === 0 && this.hasAttribute("invalid");
-    this._labelEl.hidden = !i, this._labelEl.querySelector(".label-text").textContent = i, this._labelEl.querySelector(".required").hidden = !n, this._descriptionEl.hidden = !e, this._descriptionEl.textContent = e, this.root.querySelector(".meta").hidden = !i && !e, this._shellEl.setAttribute("data-focused", this._focused ? "true" : "false"), this._shellEl.setAttribute("data-invalid", b ? "true" : "false"), this._inputEl.disabled = a, this._inputEl.readOnly = l, this._inputEl.placeholder = this._tags.length === 0 ? this.getAttribute("placeholder") || "Add tags" : "", this._inputEl.value = this._draft;
-    const v = a || o != null && this._tags.length >= o;
-    this._inputEl.setAttribute("aria-disabled", v ? "true" : "false"), this._chipsEl.replaceChildren(...this._tags.map((_, y) => {
+    const i = (this.getAttribute("label") || "").trim(), e = (this.getAttribute("description") || "").trim(), s = (this.getAttribute("data-error") || "").trim(), n = this.hasAttribute("required"), a = this._disabled(), l = this._readOnly(), o = this._maxTags(), b = this.hasAttribute("counter") || o != null, v = !!s || !!t || n && this._tags.length === 0 && this.hasAttribute("invalid");
+    this._labelEl.hidden = !i, this._labelEl.querySelector(".label-text").textContent = i, this._labelEl.querySelector(".required").hidden = !n, this._descriptionEl.hidden = !e, this._descriptionEl.textContent = e, this.root.querySelector(".meta").hidden = !i && !e, A(this._inputEl, this, i ? `${this._uid}-label` : null), this._shellEl.setAttribute("data-focused", this._focused ? "true" : "false"), this._shellEl.setAttribute("data-invalid", v ? "true" : "false"), this._inputEl.disabled = a, this._inputEl.readOnly = l, this._inputEl.placeholder = this._tags.length === 0 ? this.getAttribute("placeholder") || "Add tags" : "", this._inputEl.value = this._draft;
+    const y = a || o != null && this._tags.length >= o;
+    this._inputEl.setAttribute("aria-disabled", y ? "true" : "false"), this._chipsEl.replaceChildren(...this._tags.map((m, x) => {
       const h = document.createElement("span");
       h.className = "chip", h.setAttribute("part", "chip");
-      const p = document.createElement("span");
-      p.className = "chip-label", p.textContent = _;
+      const _ = document.createElement("span");
+      _.className = "chip-label", _.textContent = m;
       const u = document.createElement("button");
-      return u.type = "button", u.className = "chip-remove", u.setAttribute("data-index", String(y)), u.setAttribute("aria-label", `Remove ${_}`), u.textContent = "×", u.disabled = a || l, h.append(p, u), h;
+      return u.type = "button", u.className = "chip-remove", u.setAttribute("data-index", String(x)), u.setAttribute("aria-label", `Remove ${m}`), u.textContent = "×", u.disabled = a || l, h.append(_, u), h;
     }));
-    const g = t || s;
-    this._errorEl.hidden = !g, this._errorEl.textContent = g, this._assistEl.hidden = !f, this._counterEl.textContent = o != null ? `${this._tags.length}/${o}` : String(this._tags.length);
+    const p = t || s;
+    this._errorEl.hidden = !p, this._errorEl.textContent = p;
+    const g = [];
+    e && g.push(`${this._uid}-description`), p && g.push(`${this._uid}-error`), S(this._inputEl, this, this._uid, g), this._assistEl.hidden = !b, this._counterEl.textContent = o != null ? `${this._tags.length}/${o}` : String(this._tags.length);
   }
   _registerWithForm() {
     this._formUnregister && (this._formUnregister(), this._formUnregister = null);
@@ -413,7 +420,7 @@ class S extends x {
     Number.isFinite(s) && this._removeTagAt(s, "remove-button");
   }
 }
-typeof customElements < "u" && !customElements.get("ui-tags-input") && customElements.define("ui-tags-input", S);
+typeof customElements < "u" && !customElements.get("ui-tags-input") && customElements.define("ui-tags-input", U);
 export {
-  S as UITagsInput
+  U as UITagsInput
 };