@editora/ui-core 0.1.9 → 0.1.10

package/dist/tags-input.cjs.js

@@ -0,0 +1,202 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const E=require("./ElementBase-1b301e7f.js"),A=`
+  :host {
+    --ui-tags-input-padding: 10px 12px;
+    --ui-tags-input-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
+    --ui-tags-input-border: 1px solid var(--ui-tags-input-border-color);
+    --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-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);
+    --ui-tags-input-chip-text: color-mix(in srgb, var(--ui-color-primary, #2563eb) 82%, #0f172a 18%);
+    --ui-tags-input-chip-remove-bg: color-mix(in srgb, currentColor 8%, transparent);
+    --ui-tags-input-min-height: 44px;
+    display: block;
+    inline-size: 100%;
+    max-inline-size: 100%;
+    min-inline-size: 0;
+    color: var(--ui-tags-input-text);
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    color-scheme: light dark;
+  }
+
+  .root {
+    display: grid;
+    gap: 8px;
+    min-inline-size: 0;
+  }
+
+  .meta {
+    display: grid;
+    gap: 4px;
+    min-inline-size: 0;
+  }
+
+  .label {
+    margin: 0;
+    min-inline-size: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--ui-tags-input-muted);
+    font: 600 13px/1.35 "IBM Plex Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    letter-spacing: 0.01em;
+  }
+
+  .required {
+    color: var(--ui-tags-input-danger);
+    font-size: 12px;
+    line-height: 1;
+  }
+
+  .description,
+  .error {
+    margin: 0;
+    font-size: 12px;
+    line-height: 1.4;
+    letter-spacing: 0.01em;
+  }
+
+  .description {
+    color: var(--ui-tags-input-muted);
+  }
+
+  .error {
+    color: var(--ui-tags-input-danger);
+  }
+
+  .shell {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+    min-block-size: var(--ui-tags-input-min-height);
+    box-sizing: border-box;
+    padding: 8px 10px;
+    border: var(--ui-tags-input-border);
+    border-radius: var(--ui-tags-input-radius);
+    background: var(--ui-tags-input-bg);
+    transition: border-color 170ms ease, box-shadow 170ms ease;
+  }
+
+  .shell[data-focused="true"] {
+    border-color: color-mix(in srgb, var(--ui-tags-input-focus) 58%, var(--ui-tags-input-border-color));
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-tags-input-focus) 22%, transparent);
+  }
+
+  .shell[data-invalid="true"] {
+    border-color: color-mix(in srgb, var(--ui-tags-input-danger) 62%, transparent);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-tags-input-danger) 16%, transparent);
+  }
+
+  .chips {
+    display: contents;
+  }
+
+  .chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    padding: 6px 8px 6px 10px;
+    border-radius: 999px;
+    background: var(--ui-tags-input-chip-bg);
+    color: var(--ui-tags-input-chip-text);
+    font: 600 12px/1.2 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  .chip-label {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .chip-remove {
+    inline-size: 18px;
+    block-size: 18px;
+    border: none;
+    border-radius: 999px;
+    padding: 0;
+    display: inline-grid;
+    place-items: center;
+    background: var(--ui-tags-input-chip-remove-bg);
+    color: inherit;
+    cursor: pointer;
+    font: 700 11px/1 "Inter", sans-serif;
+  }
+
+  .chip-remove:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--ui-tags-input-focus) 56%, transparent);
+    outline-offset: 1px;
+  }
+
+  .input {
+    flex: 1 1 120px;
+    min-inline-size: 96px;
+    border: none;
+    background: transparent;
+    color: inherit;
+    outline: none;
+    font: 500 14px/1.4 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    padding: 4px 2px;
+    margin: 0;
+  }
+
+  .input::placeholder {
+    color: color-mix(in srgb, var(--ui-tags-input-text) 42%, transparent);
+  }
+
+  .assist {
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+    color: var(--ui-tags-input-muted);
+    font-size: 11px;
+    line-height: 1.35;
+  }
+
+  .counter {
+    white-space: nowrap;
+  }
+
+  .label[hidden],
+  .description[hidden],
+  .error[hidden],
+  .meta[hidden],
+  .assist[hidden] {
+    display: none;
+  }
+
+  :host([disabled]) .shell {
+    opacity: 0.68;
+  }
+
+  :host([disabled]) .input,
+  :host([disabled]) .chip-remove,
+  :host([readonly]) .chip-remove {
+    pointer-events: none;
+  }
+`;function m(a,t){return a.length===t.length&&a.every((i,e)=>i===t[e])}function d(a){if(!a)return[];const t=a.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(a){return a.length?a.some(t=>t.includes(",")||t.includes(`
+`))?JSON.stringify(a):a.join(", "):""}function c(a){return a.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(){var t;(t=this._inputEl)==null||t.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(){var t,i,e,s,r,l;this.setContent(`
+      <style>${A}</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>
+        <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="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"),(t=this._inputEl)==null||t.addEventListener("input",this._onInput),(i=this._inputEl)==null||i.addEventListener("keydown",this._onKeyDown),(e=this._inputEl)==null||e.addEventListener("focus",this._onFocusIn),(s=this._inputEl)==null||s.addEventListener("blur",this._onFocusOut),(r=this._inputEl)==null||r.addEventListener("paste",this._onPaste),(l=this._shellEl)==null||l.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(n=>c(n)).filter(Boolean),s=this._allowDuplicates()?e:e.filter((n,o)=>e.indexOf(n)===o),r=this._maxTags()!=null?s.slice(0,this._maxTags()):s;if(m(r,this._tags))return this._syncUi(),!1;const l=[...this._tags];return this._tags=[...r],this._setValueAttr(this._tags),this._syncUi(),this._emit("change",{value:[...this._tags],previousValue:l,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 r=this._applyTags([...this._tags,e],i);return r&&this._emit("tag-add",{tag:e,value:[...this._tags],source:i}),r}_removeTagAt(t,i){if(this._disabled()||this._readOnly())return;const e=this._tags[t];if(!e)return;const s=this._tags.filter((l,n)=>n!==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(),r=this.hasAttribute("required"),l=this._disabled(),n=this._readOnly(),o=this._maxTags(),b=this.hasAttribute("counter")||o!=null,v=!!s||!!t||r&&this._tags.length===0&&this.hasAttribute("invalid");this._labelEl.hidden=!i,this._labelEl.querySelector(".label-text").textContent=i,this._labelEl.querySelector(".required").hidden=!r,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=l,this._inputEl.readOnly=n,this._inputEl.placeholder=this._tags.length===0?this.getAttribute("placeholder")||"Add tags":"",this._inputEl.value=this._draft;const y=l||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=l||n,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(){var t;this._formUnregister&&(this._formUnregister(),this._formUnregister=null);try{const e=this.getRootNode().host,r=((t=e==null?void 0:e.closest)==null?void 0:t.call(e,"ui-form"))||null||this.closest("ui-form"),l=this.getAttribute("name");r&&typeof r.registerField=="function"&&l&&(this._formUnregister=r.registerField(l,{name:l,getValue:()=>[...this._tags],setValue:n=>{Array.isArray(n)?this._applyTags(n.map(o=>String(o)),"form"):this._applyTags(d(String(n??"")),"form")},validate:async()=>this.hasAttribute("required")&&this._tags.length===0?{valid:!1,message:"At least one tag is required"}:{valid:!0},setError:n=>{n?this.setAttribute("data-error",n):this.removeAttribute("data-error"),this._syncUi()}}))}catch{}}_onInput(t){const i=t.target;this._draft=(i==null?void 0: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){var s;const i=((s=t.clipboardData)==null?void 0:s.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){var e;const i=t.target;i!=null&&i.closest(".chip-remove")||(e=this._inputEl)==null||e.focus()}_onChipClick(t){const i=t.target,e=i==null?void 0:i.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;

package/dist/tags-input.esm.js

@@ -0,0 +1,436 @@
+import { E as x } from "./ElementBase-909688f3.mjs";
+const E = `
+  :host {
+    --ui-tags-input-padding: 10px 12px;
+    --ui-tags-input-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
+    --ui-tags-input-border: 1px solid var(--ui-tags-input-border-color);
+    --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-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);
+    --ui-tags-input-chip-text: color-mix(in srgb, var(--ui-color-primary, #2563eb) 82%, #0f172a 18%);
+    --ui-tags-input-chip-remove-bg: color-mix(in srgb, currentColor 8%, transparent);
+    --ui-tags-input-min-height: 44px;
+    display: block;
+    inline-size: 100%;
+    max-inline-size: 100%;
+    min-inline-size: 0;
+    color: var(--ui-tags-input-text);
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    color-scheme: light dark;
+  }
+
+  .root {
+    display: grid;
+    gap: 8px;
+    min-inline-size: 0;
+  }
+
+  .meta {
+    display: grid;
+    gap: 4px;
+    min-inline-size: 0;
+  }
+
+  .label {
+    margin: 0;
+    min-inline-size: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--ui-tags-input-muted);
+    font: 600 13px/1.35 "IBM Plex Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    letter-spacing: 0.01em;
+  }
+
+  .required {
+    color: var(--ui-tags-input-danger);
+    font-size: 12px;
+    line-height: 1;
+  }
+
+  .description,
+  .error {
+    margin: 0;
+    font-size: 12px;
+    line-height: 1.4;
+    letter-spacing: 0.01em;
+  }
+
+  .description {
+    color: var(--ui-tags-input-muted);
+  }
+
+  .error {
+    color: var(--ui-tags-input-danger);
+  }
+
+  .shell {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+    min-block-size: var(--ui-tags-input-min-height);
+    box-sizing: border-box;
+    padding: 8px 10px;
+    border: var(--ui-tags-input-border);
+    border-radius: var(--ui-tags-input-radius);
+    background: var(--ui-tags-input-bg);
+    transition: border-color 170ms ease, box-shadow 170ms ease;
+  }
+
+  .shell[data-focused="true"] {
+    border-color: color-mix(in srgb, var(--ui-tags-input-focus) 58%, var(--ui-tags-input-border-color));
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-tags-input-focus) 22%, transparent);
+  }
+
+  .shell[data-invalid="true"] {
+    border-color: color-mix(in srgb, var(--ui-tags-input-danger) 62%, transparent);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-tags-input-danger) 16%, transparent);
+  }
+
+  .chips {
+    display: contents;
+  }
+
+  .chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    padding: 6px 8px 6px 10px;
+    border-radius: 999px;
+    background: var(--ui-tags-input-chip-bg);
+    color: var(--ui-tags-input-chip-text);
+    font: 600 12px/1.2 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  .chip-label {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .chip-remove {
+    inline-size: 18px;
+    block-size: 18px;
+    border: none;
+    border-radius: 999px;
+    padding: 0;
+    display: inline-grid;
+    place-items: center;
+    background: var(--ui-tags-input-chip-remove-bg);
+    color: inherit;
+    cursor: pointer;
+    font: 700 11px/1 "Inter", sans-serif;
+  }
+
+  .chip-remove:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--ui-tags-input-focus) 56%, transparent);
+    outline-offset: 1px;
+  }
+
+  .input {
+    flex: 1 1 120px;
+    min-inline-size: 96px;
+    border: none;
+    background: transparent;
+    color: inherit;
+    outline: none;
+    font: 500 14px/1.4 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    padding: 4px 2px;
+    margin: 0;
+  }
+
+  .input::placeholder {
+    color: color-mix(in srgb, var(--ui-tags-input-text) 42%, transparent);
+  }
+
+  .assist {
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+    color: var(--ui-tags-input-muted);
+    font-size: 11px;
+    line-height: 1.35;
+  }
+
+  .counter {
+    white-space: nowrap;
+  }
+
+  .label[hidden],
+  .description[hidden],
+  .error[hidden],
+  .meta[hidden],
+  .assist[hidden] {
+    display: none;
+  }
+
+  :host([disabled]) .shell {
+    opacity: 0.68;
+  }
+
+  :host([disabled]) .input,
+  :host([disabled]) .chip-remove,
+  :host([readonly]) .chip-remove {
+    pointer-events: none;
+  }
+`;
+function m(a, t) {
+  return a.length === t.length && a.every((i, e) => i === t[e]);
+}
+function d(a) {
+  if (!a)
+    return [];
+  const t = a.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 A(a) {
+  return a.length ? a.some((t) => t.includes(",") || t.includes(`
+`)) ? JSON.stringify(a) : a.join(", ") : "";
+}
+function c(a) {
+  return a.replace(/\s+/g, " ").trim();
+}
+class S extends x {
+  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() {
+    var t;
+    (t = this._inputEl) == null || t.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() {
+    var t, i, e, s, r, l;
+    this.setContent(`
+      <style>${E}</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>
+        <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="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"), (t = this._inputEl) == null || t.addEventListener("input", this._onInput), (i = this._inputEl) == null || i.addEventListener("keydown", this._onKeyDown), (e = this._inputEl) == null || e.addEventListener("focus", this._onFocusIn), (s = this._inputEl) == null || s.addEventListener("blur", this._onFocusOut), (r = this._inputEl) == null || r.addEventListener("paste", this._onPaste), (l = this._shellEl) == null || l.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 = A(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((n) => c(n)).filter(Boolean), s = this._allowDuplicates() ? e : e.filter((n, o) => e.indexOf(n) === o), r = this._maxTags() != null ? s.slice(0, this._maxTags()) : s;
+    if (m(r, this._tags))
+      return this._syncUi(), !1;
+    const l = [...this._tags];
+    return this._tags = [...r], this._setValueAttr(this._tags), this._syncUi(), this._emit("change", { value: [...this._tags], previousValue: l, 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 r = this._applyTags([...this._tags, e], i);
+    return r && this._emit("tag-add", { tag: e, value: [...this._tags], source: i }), r;
+  }
+  _removeTagAt(t, i) {
+    if (this._disabled() || this._readOnly())
+      return;
+    const e = this._tags[t];
+    if (!e)
+      return;
+    const s = this._tags.filter((l, n) => n !== 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(), r = this.hasAttribute("required"), l = this._disabled(), n = this._readOnly(), o = this._maxTags(), f = this.hasAttribute("counter") || o != null, b = !!s || !!t || r && this._tags.length === 0 && this.hasAttribute("invalid");
+    this._labelEl.hidden = !i, this._labelEl.querySelector(".label-text").textContent = i, this._labelEl.querySelector(".required").hidden = !r, 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 = l, this._inputEl.readOnly = n, this._inputEl.placeholder = this._tags.length === 0 ? this.getAttribute("placeholder") || "Add tags" : "", this._inputEl.value = this._draft;
+    const v = l || o != null && this._tags.length >= o;
+    this._inputEl.setAttribute("aria-disabled", v ? "true" : "false"), this._chipsEl.replaceChildren(...this._tags.map((_, y) => {
+      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(y)), u.setAttribute("aria-label", `Remove ${_}`), u.textContent = "×", u.disabled = l || n, h.append(p, 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);
+  }
+  _registerWithForm() {
+    var t;
+    this._formUnregister && (this._formUnregister(), this._formUnregister = null);
+    try {
+      const e = this.getRootNode().host, r = ((t = e == null ? void 0 : e.closest) == null ? void 0 : t.call(e, "ui-form")) || null || this.closest("ui-form"), l = this.getAttribute("name");
+      r && typeof r.registerField == "function" && l && (this._formUnregister = r.registerField(l, {
+        name: l,
+        getValue: () => [...this._tags],
+        setValue: (n) => {
+          Array.isArray(n) ? this._applyTags(n.map((o) => String(o)), "form") : this._applyTags(d(String(n ?? "")), "form");
+        },
+        validate: async () => this.hasAttribute("required") && this._tags.length === 0 ? { valid: !1, message: "At least one tag is required" } : { valid: !0 },
+        setError: (n) => {
+          n ? this.setAttribute("data-error", n) : this.removeAttribute("data-error"), this._syncUi();
+        }
+      }));
+    } catch {
+    }
+  }
+  _onInput(t) {
+    const i = t.target;
+    this._draft = (i == null ? void 0 : 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) {
+    var s;
+    const i = ((s = t.clipboardData) == null ? void 0 : s.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) {
+    var e;
+    const i = t.target;
+    i != null && i.closest(".chip-remove") || (e = this._inputEl) == null || e.focus();
+  }
+  _onChipClick(t) {
+    const i = t.target, e = i == null ? void 0 : i.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", S);
+export {
+  S as UITagsInput
+};