@editora/ui-core 0.1.19 → 0.1.21

package/dist/tags-input.esm.js

@@ -1,4 +1,4 @@
-import { E as x } from "./ElementBase-909688f3.mjs";
+import { E as x } from "./ElementBase-YlTLMsGk.mjs";
 const E = `
   :host {
     --ui-tags-input-padding: 10px 12px;
@@ -183,15 +183,13 @@ const E = `
     pointer-events: none;
   }
 `;
-function m(a, t) {
-  return a.length === t.length && a.every((i, e) => i === t[e]);
+function m(r, t) {
+  return r.length === t.length && r.every((i, e) => i === t[e]);
 }
-function d(a) {
-  if (!a)
-    return [];
-  const t = a.trim();
-  if (!t)
-    return [];
+function d(r) {
+  if (!r) return [];
+  const t = r.trim();
+  if (!t) return [];
   if (t.startsWith("["))
     try {
       const i = JSON.parse(t);
@@ -201,12 +199,12 @@ function d(a) {
     }
   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 A(r) {
+  return r.length ? r.some((t) => t.includes(",") || t.includes(`
+`)) ? JSON.stringify(r) : r.join(", ") : "";
 }
-function c(a) {
-  return a.replace(/\s+/g, " ").trim();
+function c(r) {
+  return r.replace(/\s+/g, " ").trim();
 }
 class S extends x {
   constructor() {
@@ -239,8 +237,7 @@ class S extends x {
   }
   removeTag(t) {
     if (typeof t == "number") {
-      if (t < 0 || t >= this._tags.length)
-        return;
+      if (t < 0 || t >= this._tags.length) return;
       this._removeTagAt(t, "api");
       return;
     }
@@ -251,8 +248,7 @@ class S extends x {
     this._applyTags([], "api");
   }
   focusInput() {
-    var t;
-    (t = this._inputEl) == null || t.focus();
+    this._inputEl?.focus();
   }
   connectedCallback() {
     super.connectedCallback(), this._registerWithForm();
@@ -273,7 +269,6 @@ class S extends x {
     return !1;
   }
   render() {
-    var t, i, e, s, r, l;
     this.setContent(`
       <style>${E}</style>
       <div class="root">
@@ -291,7 +286,7 @@ class S extends x {
           <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();
+    `), 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");
@@ -304,8 +299,7 @@ class S extends x {
   }
   _maxTags() {
     const t = this.getAttribute("max-tags");
-    if (!t)
-      return null;
+    if (!t) return null;
     const i = Number(t);
     return Number.isFinite(i) && i > 0 ? Math.floor(i) : null;
   }
@@ -322,33 +316,29 @@ class S extends x {
     }
   }
   _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))
+    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 l = [...this._tags];
-    return this._tags = [...r], this._setValueAttr(this._tags), this._syncUi(), this._emit("change", { value: [...this._tags], previousValue: l, source: i }), !0;
+    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;
+    if (this._disabled() || this._readOnly()) return !1;
     const e = c(t);
-    if (!e)
-      return !1;
+    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;
+    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;
+    if (this._disabled() || this._readOnly()) return;
     const e = this._tags[t];
-    if (!e)
-      return;
-    const s = this._tags.filter((l, n) => n !== 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) {
@@ -356,36 +346,34 @@ class S extends x {
     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;
+    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 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;
+      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;
     }));
     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,
+      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: (n) => {
-          Array.isArray(n) ? this._applyTags(n.map((o) => String(o)), "form") : this._applyTags(d(String(n ?? "")), "form");
+        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: (n) => {
-          n ? this.setAttribute("data-error", n) : this.removeAttribute("data-error"), this._syncUi();
+        setError: (a) => {
+          a ? this.setAttribute("data-error", a) : this.removeAttribute("data-error"), this._syncUi();
         }
       }));
     } catch {
@@ -393,7 +381,7 @@ class S extends x {
   }
   _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();
+    this._draft = i?.value || "", this._emit("input", { draft: this._draft, value: [...this._tags] }), this._syncUi();
   }
   _onKeyDown(t) {
     if (t.key === "Enter" || t.key === ",") {
@@ -403,10 +391,8 @@ class S extends x {
     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;
+    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"));
@@ -418,14 +404,11 @@ class S extends x {
     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();
+    t.target?.closest(".chip-remove") || this._inputEl?.focus();
   }
   _onChipClick(t) {
-    const i = t.target, e = i == null ? void 0 : i.closest(".chip-remove");
-    if (!e)
-      return;
+    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");
   }

package/dist/textarea.cjs.js

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const v=require("./ElementBase-1b301e7f.js"),_=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const _=require("./ElementBase-EV6mVBUV.js"),y=`
   <svg viewBox="0 0 20 20" aria-hidden="true" focusable="false">
     <path d="m6 6 8 8M14 6l-8 8" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
   </svg>
-`,y=`
+`,A=`
   :host {
     --ui-textarea-bg: var(--ui-color-surface, #ffffff);
     --ui-textarea-text: var(--ui-color-text, #0f172a);
@@ -308,22 +308,22 @@
       color: CanvasText;
     }
   }
-`;function d(h){return h.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function x(h,t){const e=Number(h);return Number.isFinite(e)?e:t}class p extends v.ElementBase{constructor(){super(),this._uid=`ui-textarea-${Math.random().toString(36).slice(2,9)}`,this._textarea=null,this._clearBtn=null,this._countEl=null,this._debounceTimer=null,this._formUnregister=null,this._onInput=this._onInput.bind(this),this._onChange=this._onChange.bind(this),this._onClear=this._onClear.bind(this)}static get observedAttributes(){return["value","placeholder","disabled","clearable","size","validation","debounce","maxlength","minlength","rows","readonly","autofocus","resize","name","required","variant","color","radius","label","description","autosize","max-rows","show-count","density","tone","headless","data-error"]}connectedCallback(){super.connectedCallback(),this._tryRegisterWithForm()}disconnectedCallback(){this._detachListeners(),this._debounceTimer&&(clearTimeout(this._debounceTimer),this._debounceTimer=null),this._formUnregister&&(this._formUnregister(),this._formUnregister=null),super.disconnectedCallback()}attributeChangedCallback(t,e,i){if(e===i)return;if(t==="name"&&this._tryRegisterWithForm(),t==="value"&&this._textarea){const r=i||"";this._textarea.value!==r&&(this._textarea.value=r),this._syncDynamicUi(),this._applyAutosize();return}if(new Set(["placeholder","disabled","maxlength","minlength","rows","readonly","required","resize","name","validation","show-count","clearable","autosize","max-rows","variant","size","density","tone","headless","color","radius","autofocus"]).has(t)){this._syncControlAttrs(),this._syncDynamicUi(),this._applyAutosize(),t==="autofocus"&&this.hasAttribute("autofocus")&&queueMicrotask(()=>{var r;(r=this._textarea)==null||r.focus()});return}this.isConnected&&this.requestRender()}get value(){return this.getAttribute("value")||""}set value(t){this.setAttribute("value",t||"")}_tryRegisterWithForm(){var t;try{const e=(t=this.closest)==null?void 0:t.call(this,"ui-form"),i=this.getAttribute("name");if(!e||typeof e.registerField!="function"||!i)return;this._formUnregister=e.registerField(i,{name:i,getValue:()=>this.value,setValue:a=>{this.value=a},validate:async()=>this._textarea?{valid:this._textarea.checkValidity(),message:this._textarea.validationMessage||void 0}:{valid:!0},setError:a=>{a?(this.setAttribute("validation","error"),this.setAttribute("data-error",a)):(this.removeAttribute("validation"),this.removeAttribute("data-error"))}})}catch{}}_detachListeners(){this._textarea&&(this._textarea.removeEventListener("input",this._onInput),this._textarea.removeEventListener("change",this._onChange)),this._clearBtn&&this._clearBtn.removeEventListener("click",this._onClear),this._clearBtn=null}_syncControlAttrs(){if(!this._textarea)return;const t=this.getAttribute("placeholder")||"",e=this.getAttribute("maxlength"),i=this.getAttribute("minlength"),a=x(this.getAttribute("rows"),4),r=this.hasAttribute("disabled"),c=this.hasAttribute("readonly"),n=this.hasAttribute("required"),o=this.getAttribute("name")||"",s=this.getAttribute("resize")||"vertical",g=this.getAttribute("validation"),b=this.getAttribute("color"),l=this.getAttribute("radius");this._textarea.placeholder=t,this._textarea.disabled=r,this._textarea.readOnly=c,this._textarea.required=n,this._textarea.rows=Math.max(1,a),this._textarea.name=o,this._textarea.style.resize=s,e&&Number.isFinite(Number(e))?this._textarea.maxLength=Number(e):this._textarea.removeAttribute("maxlength"),i&&Number.isFinite(Number(i))?this._textarea.minLength=Number(i):this._textarea.removeAttribute("minlength"),g==="error"?this._textarea.setAttribute("aria-invalid","true"):this._textarea.removeAttribute("aria-invalid"),b?this.style.setProperty("--ui-textarea-accent",b):this.style.removeProperty("--ui-textarea-accent"),l&&l!=="none"&&l!=="large"&&l!=="full"?this.style.setProperty("--ui-textarea-radius",l):this.style.removeProperty("--ui-textarea-radius");const u=[],m=!!(this.getAttribute("description")||this.querySelector('[slot="description"]')),f=!!(this.getAttribute("data-error")||this.querySelector('[slot="error"]'));m&&u.push(`${this._uid}-description`),f&&u.push(`${this._uid}-error`),(this.hasAttribute("show-count")||this.hasAttribute("maxlength"))&&u.push(`${this._uid}-count`),!!(this.getAttribute("label")||this.querySelector('[slot="label"]'))?this._textarea.setAttribute("aria-labelledby",`${this._uid}-label`):this._textarea.removeAttribute("aria-labelledby"),u.length?this._textarea.setAttribute("aria-describedby",u.join(" ")):this._textarea.removeAttribute("aria-describedby")}_syncDynamicUi(){var a;const t=((a=this._textarea)==null?void 0:a.value)||this.getAttribute("value")||"",e=this.getAttribute("maxlength"),i=this.hasAttribute("clearable");this._clearBtn&&(i&&t&&!this.hasAttribute("disabled")&&!this.hasAttribute("readonly")?this._clearBtn.removeAttribute("hidden"):this._clearBtn.setAttribute("hidden","")),this._countEl&&(this.hasAttribute("show-count")||!!e?(this._countEl.removeAttribute("hidden"),e&&Number.isFinite(Number(e))?this._countEl.textContent=`${t.length} / ${Number(e)}`:this._countEl.textContent=`${t.length}`):this._countEl.setAttribute("hidden",""))}_applyAutosize(){if(!this._textarea)return;if(!this.hasAttribute("autosize")){this._textarea.style.height="",this._textarea.style.overflowY="";return}this._textarea.style.height="auto";const t=this._textarea.scrollHeight,e=x(this.getAttribute("max-rows"),0);if(e>0){const i=getComputedStyle(this._textarea),a=parseFloat(i.lineHeight||"20")||20,r=parseFloat(i.borderTopWidth||"0")||0,c=parseFloat(i.borderBottomWidth||"0")||0,n=parseFloat(i.paddingTop||"0")||0,o=parseFloat(i.paddingBottom||"0")||0,s=a*e+r+c+n+o;this._textarea.style.height=`${Math.min(t,s)}px`,this._textarea.style.overflowY=t>s?"auto":"hidden";return}this._textarea.style.height=`${t}px`,this._textarea.style.overflowY="hidden"}_emit(t,e){this.dispatchEvent(new CustomEvent(t,{detail:{value:e,length:e.length,name:this.getAttribute("name")||""},bubbles:!0,composed:!0}))}_onInput(t){const e=t.target.value;this.getAttribute("value")!==e&&this.setAttribute("value",e),this._syncDynamicUi(),this._applyAutosize(),this._emit("input",e);const i=x(this.getAttribute("debounce"),0);i>0?(this._debounceTimer&&clearTimeout(this._debounceTimer),this._debounceTimer=setTimeout(()=>{this._emit("debounced-input",e),this._debounceTimer=null},i)):this._emit("debounced-input",e)}_onChange(t){const e=t.target.value;this._emit("change",e)}_onClear(t){t.preventDefault(),!(this.hasAttribute("disabled")||this.hasAttribute("readonly"))&&(this.value="",this._textarea&&(this._textarea.value="",this._textarea.focus()),this._syncDynamicUi(),this._applyAutosize(),this._emit("input",""),this._emit("change",""),this.dispatchEvent(new CustomEvent("clear",{bubbles:!0,composed:!0})))}render(){var o;const t=this.getAttribute("value")||"",e=this.getAttribute("label")||"",i=this.getAttribute("description")||"",a=this.getAttribute("data-error")||"",r=!!(e||i||this.querySelector('[slot="label"]')||this.querySelector('[slot="description"]')),n=this.hasAttribute("clearable")&&!!t&&!this.hasAttribute("disabled")&&!this.hasAttribute("readonly");this.setContent(`
-      <style>${y}</style>
+`;function x(r){return r.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function b(r,t){const e=Number(r);return Number.isFinite(e)?e:t}const z=2147483647;function c(r){if(!r)return null;const t=Number(r);return!Number.isFinite(t)||t<0||t>z?null:Math.trunc(t)}class g extends _.ElementBase{constructor(){super(),this._uid=`ui-textarea-${Math.random().toString(36).slice(2,9)}`,this._textarea=null,this._clearBtn=null,this._countEl=null,this._debounceTimer=null,this._formUnregister=null,this._onInput=this._onInput.bind(this),this._onChange=this._onChange.bind(this),this._onClear=this._onClear.bind(this)}static get observedAttributes(){return["value","placeholder","disabled","clearable","size","validation","debounce","maxlength","minlength","rows","readonly","autofocus","resize","name","required","variant","color","radius","label","description","autosize","max-rows","show-count","density","tone","headless","data-error"]}connectedCallback(){super.connectedCallback(),this._tryRegisterWithForm()}disconnectedCallback(){this._detachListeners(),this._debounceTimer&&(clearTimeout(this._debounceTimer),this._debounceTimer=null),this._formUnregister&&(this._formUnregister(),this._formUnregister=null),super.disconnectedCallback()}attributeChangedCallback(t,e,i){if(e===i)return;if(t==="name"&&this._tryRegisterWithForm(),t==="value"&&this._textarea){const a=i||"";this._textarea.value!==a&&(this._textarea.value=a),this._syncDynamicUi(),this._applyAutosize();return}if(new Set(["placeholder","disabled","maxlength","minlength","rows","readonly","required","resize","name","validation","show-count","clearable","autosize","max-rows","variant","size","density","tone","headless","color","radius","autofocus"]).has(t)){this._syncControlAttrs(),this._syncDynamicUi(),this._applyAutosize(),t==="autofocus"&&this.hasAttribute("autofocus")&&queueMicrotask(()=>{this._textarea?.focus()});return}this.isConnected&&this.requestRender()}get value(){return this.getAttribute("value")||""}set value(t){this.setAttribute("value",t||"")}_tryRegisterWithForm(){try{const t=this.closest?.("ui-form"),e=this.getAttribute("name");if(!t||typeof t.registerField!="function"||!e)return;this._formUnregister=t.registerField(e,{name:e,getValue:()=>this.value,setValue:i=>{this.value=i},validate:async()=>this._textarea?{valid:this._textarea.checkValidity(),message:this._textarea.validationMessage||void 0}:{valid:!0},setError:i=>{i?(this.setAttribute("validation","error"),this.setAttribute("data-error",i)):(this.removeAttribute("validation"),this.removeAttribute("data-error"))}})}catch{}}_detachListeners(){this._textarea&&(this._textarea.removeEventListener("input",this._onInput),this._textarea.removeEventListener("change",this._onChange)),this._clearBtn&&this._clearBtn.removeEventListener("click",this._onClear),this._clearBtn=null}_syncControlAttrs(){if(!this._textarea)return;const t=this.getAttribute("placeholder")||"",e=c(this.getAttribute("maxlength")),i=c(this.getAttribute("minlength")),s=b(this.getAttribute("rows"),4),a=this.hasAttribute("disabled"),u=this.hasAttribute("readonly"),o=this.hasAttribute("required"),d=this.getAttribute("name")||"",h=this.getAttribute("resize")||"vertical",m=this.getAttribute("validation"),p=this.getAttribute("color"),n=this.getAttribute("radius");this._textarea.placeholder=t,this._textarea.disabled=a,this._textarea.readOnly=u,this._textarea.required=o,this._textarea.rows=Math.max(1,s),this._textarea.name=d,this._textarea.style.resize=h,e!==null?this._textarea.maxLength=e:this._textarea.removeAttribute("maxlength"),i!==null?this._textarea.minLength=i:this._textarea.removeAttribute("minlength"),m==="error"?this._textarea.setAttribute("aria-invalid","true"):this._textarea.removeAttribute("aria-invalid"),p?this.style.setProperty("--ui-textarea-accent",p):this.style.removeProperty("--ui-textarea-accent"),n&&n!=="none"&&n!=="large"&&n!=="full"?this.style.setProperty("--ui-textarea-radius",n):this.style.removeProperty("--ui-textarea-radius");const l=[],f=!!(this.getAttribute("description")||this.querySelector('[slot="description"]')),v=!!(this.getAttribute("data-error")||this.querySelector('[slot="error"]'));f&&l.push(`${this._uid}-description`),v&&l.push(`${this._uid}-error`),(this.hasAttribute("show-count")||c(this.getAttribute("maxlength"))!==null)&&l.push(`${this._uid}-count`),!!(this.getAttribute("label")||this.querySelector('[slot="label"]'))?this._textarea.setAttribute("aria-labelledby",`${this._uid}-label`):this._textarea.removeAttribute("aria-labelledby"),l.length?this._textarea.setAttribute("aria-describedby",l.join(" ")):this._textarea.removeAttribute("aria-describedby")}_syncDynamicUi(){const t=this._textarea?.value||this.getAttribute("value")||"",e=c(this.getAttribute("maxlength")),i=this.hasAttribute("clearable");this._clearBtn&&(i&&t&&!this.hasAttribute("disabled")&&!this.hasAttribute("readonly")?this._clearBtn.removeAttribute("hidden"):this._clearBtn.setAttribute("hidden","")),this._countEl&&(this.hasAttribute("show-count")||e!==null?(this._countEl.removeAttribute("hidden"),e!==null?this._countEl.textContent=`${t.length} / ${e}`:this._countEl.textContent=`${t.length}`):this._countEl.setAttribute("hidden",""))}_applyAutosize(){if(!this._textarea)return;if(!this.hasAttribute("autosize")){this._textarea.style.height="",this._textarea.style.overflowY="";return}this._textarea.style.height="auto";const t=this._textarea.scrollHeight,e=b(this.getAttribute("max-rows"),0);if(e>0){const i=getComputedStyle(this._textarea),s=parseFloat(i.lineHeight||"20")||20,a=parseFloat(i.borderTopWidth||"0")||0,u=parseFloat(i.borderBottomWidth||"0")||0,o=parseFloat(i.paddingTop||"0")||0,d=parseFloat(i.paddingBottom||"0")||0,h=s*e+a+u+o+d;this._textarea.style.height=`${Math.min(t,h)}px`,this._textarea.style.overflowY=t>h?"auto":"hidden";return}this._textarea.style.height=`${t}px`,this._textarea.style.overflowY="hidden"}_emit(t,e){this.dispatchEvent(new CustomEvent(t,{detail:{value:e,length:e.length,name:this.getAttribute("name")||""},bubbles:!0,composed:!0}))}_onInput(t){const e=t.target.value;this.getAttribute("value")!==e&&this.setAttribute("value",e),this._syncDynamicUi(),this._applyAutosize(),this._emit("input",e);const i=b(this.getAttribute("debounce"),0);i>0?(this._debounceTimer&&clearTimeout(this._debounceTimer),this._debounceTimer=setTimeout(()=>{this._emit("debounced-input",e),this._debounceTimer=null},i)):this._emit("debounced-input",e)}_onChange(t){const e=t.target.value;this._emit("change",e)}_onClear(t){t.preventDefault(),!(this.hasAttribute("disabled")||this.hasAttribute("readonly"))&&(this.value="",this._textarea&&(this._textarea.value="",this._textarea.focus()),this._syncDynamicUi(),this._applyAutosize(),this._emit("input",""),this._emit("change",""),this.dispatchEvent(new CustomEvent("clear",{bubbles:!0,composed:!0})))}render(){const t=this.getAttribute("value")||"",e=this.getAttribute("label")||"",i=this.getAttribute("description")||"",s=this.getAttribute("data-error")||"",a=!!(e||i||this.querySelector('[slot="label"]')||this.querySelector('[slot="description"]')),o=this.hasAttribute("clearable")&&!!t&&!this.hasAttribute("disabled")&&!this.hasAttribute("readonly");this.setContent(`
+      <style>${A}</style>
       <div class="shell" part="shell">
-        <div class="meta" part="meta" ${r?"":"hidden"}>
-          <label id="${this._uid}-label" class="label" part="label"><slot name="label">${d(e)}</slot></label>
-          <div id="${this._uid}-description" class="description" part="description"><slot name="description">${d(i)}</slot></div>
+        <div class="meta" part="meta" ${a?"":"hidden"}>
+          <label id="${this._uid}-label" class="label" part="label"><slot name="label">${x(e)}</slot></label>
+          <div id="${this._uid}-description" class="description" part="description"><slot name="description">${x(i)}</slot></div>
         </div>
 
         <div class="field" part="field">
           <textarea part="textarea"></textarea>
-          <button type="button" part="clear" class="clear-btn" aria-label="Clear text" ${n?"":"hidden"}>${_}</button>
+          <button type="button" part="clear" class="clear-btn" aria-label="Clear text" ${o?"":"hidden"}>${y}</button>
         </div>
 
         <div class="footer" part="footer">
-          <div id="${this._uid}-error" class="error" part="error"><slot name="error">${d(a)}</slot></div>
+          <div id="${this._uid}-error" class="error" part="error"><slot name="error">${x(s)}</slot></div>
           <div id="${this._uid}-count" class="count" part="count" hidden></div>
         </div>
       </div>
-    `),this._detachListeners(),this._textarea=this.root.querySelector("textarea"),this._clearBtn=this.root.querySelector(".clear-btn"),this._countEl=this.root.querySelector(".count"),this._textarea&&(this._textarea.value=t,this._syncControlAttrs(),this._syncDynamicUi(),this._applyAutosize(),this._textarea.addEventListener("input",this._onInput),this._textarea.addEventListener("change",this._onChange),(o=this._clearBtn)==null||o.addEventListener("click",this._onClear),this.hasAttribute("autofocus")&&queueMicrotask(()=>{var s;(s=this._textarea)==null||s.focus()}))}shouldRenderOnAttributeChange(t,e,i){return t==="label"||t==="description"||t==="data-error"}}typeof customElements<"u"&&!customElements.get("ui-textarea")&&customElements.define("ui-textarea",p);exports.UITextarea=p;
+    `),this._detachListeners(),this._textarea=this.root.querySelector("textarea"),this._clearBtn=this.root.querySelector(".clear-btn"),this._countEl=this.root.querySelector(".count"),this._textarea&&(this._textarea.value=t,this._syncControlAttrs(),this._syncDynamicUi(),this._applyAutosize(),this._textarea.addEventListener("input",this._onInput),this._textarea.addEventListener("change",this._onChange),this._clearBtn?.addEventListener("click",this._onClear),this.hasAttribute("autofocus")&&queueMicrotask(()=>{this._textarea?.focus()}))}shouldRenderOnAttributeChange(t,e,i){return t==="label"||t==="description"||t==="data-error"}}typeof customElements<"u"&&!customElements.get("ui-textarea")&&customElements.define("ui-textarea",g);exports.UITextarea=g;

package/dist/textarea.esm.js

@@ -1,9 +1,9 @@
-import { E as f } from "./ElementBase-909688f3.mjs";
-const v = `
+import { E as v } from "./ElementBase-YlTLMsGk.mjs";
+const _ = `
   <svg viewBox="0 0 20 20" aria-hidden="true" focusable="false">
     <path d="m6 6 8 8M14 6l-8 8" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
   </svg>
-`, _ = `
+`, y = `
   :host {
     --ui-textarea-bg: var(--ui-color-surface, #ffffff);
     --ui-textarea-text: var(--ui-color-text, #0f172a);
@@ -310,14 +310,20 @@ const v = `
     }
   }
 `;
-function d(h) {
-  return h.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+function x(r) {
+  return r.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function x(h, t) {
-  const e = Number(h);
+function b(r, t) {
+  const e = Number(r);
   return Number.isFinite(e) ? e : t;
 }
-class y extends f {
+const A = 2147483647;
+function c(r) {
+  if (!r) return null;
+  const t = Number(r);
+  return !Number.isFinite(t) || t < 0 || t > A ? null : Math.trunc(t);
+}
+class z extends v {
   constructor() {
     super(), this._uid = `ui-textarea-${Math.random().toString(36).slice(2, 9)}`, this._textarea = null, this._clearBtn = null, this._countEl = null, this._debounceTimer = null, this._formUnregister = null, this._onInput = this._onInput.bind(this), this._onChange = this._onChange.bind(this), this._onClear = this._onClear.bind(this);
   }
@@ -359,11 +365,10 @@ class y extends f {
     this._detachListeners(), this._debounceTimer && (clearTimeout(this._debounceTimer), this._debounceTimer = null), this._formUnregister && (this._formUnregister(), this._formUnregister = null), super.disconnectedCallback();
   }
   attributeChangedCallback(t, e, i) {
-    if (e === i)
-      return;
+    if (e === i) return;
     if (t === "name" && this._tryRegisterWithForm(), t === "value" && this._textarea) {
-      const r = i || "";
-      this._textarea.value !== r && (this._textarea.value = r), this._syncDynamicUi(), this._applyAutosize();
+      const a = i || "";
+      this._textarea.value !== a && (this._textarea.value = a), this._syncDynamicUi(), this._applyAutosize();
       return;
     }
     if ((/* @__PURE__ */ new Set([
@@ -391,8 +396,7 @@ class y extends f {
       "autofocus"
     ])).has(t)) {
       this._syncControlAttrs(), this._syncDynamicUi(), this._applyAutosize(), t === "autofocus" && this.hasAttribute("autofocus") && queueMicrotask(() => {
-        var r;
-        (r = this._textarea) == null || r.focus();
+        this._textarea?.focus();
       });
       return;
     }
@@ -405,20 +409,18 @@ class y extends f {
     this.setAttribute("value", t || "");
   }
   _tryRegisterWithForm() {
-    var t;
     try {
-      const e = (t = this.closest) == null ? void 0 : t.call(this, "ui-form"), i = this.getAttribute("name");
-      if (!e || typeof e.registerField != "function" || !i)
-        return;
-      this._formUnregister = e.registerField(i, {
-        name: i,
+      const t = this.closest?.("ui-form"), e = this.getAttribute("name");
+      if (!t || typeof t.registerField != "function" || !e) return;
+      this._formUnregister = t.registerField(e, {
+        name: e,
         getValue: () => this.value,
-        setValue: (a) => {
-          this.value = a;
+        setValue: (i) => {
+          this.value = i;
         },
         validate: async () => this._textarea ? { valid: this._textarea.checkValidity(), message: this._textarea.validationMessage || void 0 } : { valid: !0 },
-        setError: (a) => {
-          a ? (this.setAttribute("validation", "error"), this.setAttribute("data-error", a)) : (this.removeAttribute("validation"), this.removeAttribute("data-error"));
+        setError: (i) => {
+          i ? (this.setAttribute("validation", "error"), this.setAttribute("data-error", i)) : (this.removeAttribute("validation"), this.removeAttribute("data-error"));
         }
       });
     } catch {
@@ -428,30 +430,27 @@ class y extends f {
     this._textarea && (this._textarea.removeEventListener("input", this._onInput), this._textarea.removeEventListener("change", this._onChange)), this._clearBtn && this._clearBtn.removeEventListener("click", this._onClear), this._clearBtn = null;
   }
   _syncControlAttrs() {
-    if (!this._textarea)
-      return;
-    const t = this.getAttribute("placeholder") || "", e = this.getAttribute("maxlength"), i = this.getAttribute("minlength"), a = x(this.getAttribute("rows"), 4), r = this.hasAttribute("disabled"), c = this.hasAttribute("readonly"), n = this.hasAttribute("required"), o = this.getAttribute("name") || "", s = this.getAttribute("resize") || "vertical", p = this.getAttribute("validation"), b = this.getAttribute("color"), l = this.getAttribute("radius");
-    this._textarea.placeholder = t, this._textarea.disabled = r, this._textarea.readOnly = c, this._textarea.required = n, this._textarea.rows = Math.max(1, a), this._textarea.name = o, this._textarea.style.resize = s, e && Number.isFinite(Number(e)) ? this._textarea.maxLength = Number(e) : this._textarea.removeAttribute("maxlength"), i && Number.isFinite(Number(i)) ? this._textarea.minLength = Number(i) : this._textarea.removeAttribute("minlength"), p === "error" ? this._textarea.setAttribute("aria-invalid", "true") : this._textarea.removeAttribute("aria-invalid"), b ? this.style.setProperty("--ui-textarea-accent", b) : this.style.removeProperty("--ui-textarea-accent"), l && l !== "none" && l !== "large" && l !== "full" ? this.style.setProperty("--ui-textarea-radius", l) : this.style.removeProperty("--ui-textarea-radius");
-    const u = [], g = !!(this.getAttribute("description") || this.querySelector('[slot="description"]')), m = !!(this.getAttribute("data-error") || this.querySelector('[slot="error"]'));
-    g && u.push(`${this._uid}-description`), m && u.push(`${this._uid}-error`), (this.hasAttribute("show-count") || this.hasAttribute("maxlength")) && u.push(`${this._uid}-count`), !!(this.getAttribute("label") || this.querySelector('[slot="label"]')) ? this._textarea.setAttribute("aria-labelledby", `${this._uid}-label`) : this._textarea.removeAttribute("aria-labelledby"), u.length ? this._textarea.setAttribute("aria-describedby", u.join(" ")) : this._textarea.removeAttribute("aria-describedby");
+    if (!this._textarea) return;
+    const t = this.getAttribute("placeholder") || "", e = c(this.getAttribute("maxlength")), i = c(this.getAttribute("minlength")), s = b(this.getAttribute("rows"), 4), a = this.hasAttribute("disabled"), u = this.hasAttribute("readonly"), o = this.hasAttribute("required"), d = this.getAttribute("name") || "", h = this.getAttribute("resize") || "vertical", g = this.getAttribute("validation"), p = this.getAttribute("color"), n = this.getAttribute("radius");
+    this._textarea.placeholder = t, this._textarea.disabled = a, this._textarea.readOnly = u, this._textarea.required = o, this._textarea.rows = Math.max(1, s), this._textarea.name = d, this._textarea.style.resize = h, e !== null ? this._textarea.maxLength = e : this._textarea.removeAttribute("maxlength"), i !== null ? this._textarea.minLength = i : this._textarea.removeAttribute("minlength"), g === "error" ? this._textarea.setAttribute("aria-invalid", "true") : this._textarea.removeAttribute("aria-invalid"), p ? this.style.setProperty("--ui-textarea-accent", p) : this.style.removeProperty("--ui-textarea-accent"), n && n !== "none" && n !== "large" && n !== "full" ? this.style.setProperty("--ui-textarea-radius", n) : this.style.removeProperty("--ui-textarea-radius");
+    const l = [], m = !!(this.getAttribute("description") || this.querySelector('[slot="description"]')), f = !!(this.getAttribute("data-error") || this.querySelector('[slot="error"]'));
+    m && l.push(`${this._uid}-description`), f && l.push(`${this._uid}-error`), (this.hasAttribute("show-count") || c(this.getAttribute("maxlength")) !== null) && l.push(`${this._uid}-count`), !!(this.getAttribute("label") || this.querySelector('[slot="label"]')) ? this._textarea.setAttribute("aria-labelledby", `${this._uid}-label`) : this._textarea.removeAttribute("aria-labelledby"), l.length ? this._textarea.setAttribute("aria-describedby", l.join(" ")) : this._textarea.removeAttribute("aria-describedby");
   }
   _syncDynamicUi() {
-    var a;
-    const t = ((a = this._textarea) == null ? void 0 : a.value) || this.getAttribute("value") || "", e = this.getAttribute("maxlength"), i = this.hasAttribute("clearable");
-    this._clearBtn && (i && t && !this.hasAttribute("disabled") && !this.hasAttribute("readonly") ? this._clearBtn.removeAttribute("hidden") : this._clearBtn.setAttribute("hidden", "")), this._countEl && (this.hasAttribute("show-count") || !!e ? (this._countEl.removeAttribute("hidden"), e && Number.isFinite(Number(e)) ? this._countEl.textContent = `${t.length} / ${Number(e)}` : this._countEl.textContent = `${t.length}`) : this._countEl.setAttribute("hidden", ""));
+    const t = this._textarea?.value || this.getAttribute("value") || "", e = c(this.getAttribute("maxlength")), i = this.hasAttribute("clearable");
+    this._clearBtn && (i && t && !this.hasAttribute("disabled") && !this.hasAttribute("readonly") ? this._clearBtn.removeAttribute("hidden") : this._clearBtn.setAttribute("hidden", "")), this._countEl && (this.hasAttribute("show-count") || e !== null ? (this._countEl.removeAttribute("hidden"), e !== null ? this._countEl.textContent = `${t.length} / ${e}` : this._countEl.textContent = `${t.length}`) : this._countEl.setAttribute("hidden", ""));
   }
   _applyAutosize() {
-    if (!this._textarea)
-      return;
+    if (!this._textarea) return;
     if (!this.hasAttribute("autosize")) {
       this._textarea.style.height = "", this._textarea.style.overflowY = "";
       return;
     }
     this._textarea.style.height = "auto";
-    const t = this._textarea.scrollHeight, e = x(this.getAttribute("max-rows"), 0);
+    const t = this._textarea.scrollHeight, e = b(this.getAttribute("max-rows"), 0);
     if (e > 0) {
-      const i = getComputedStyle(this._textarea), a = parseFloat(i.lineHeight || "20") || 20, r = parseFloat(i.borderTopWidth || "0") || 0, c = parseFloat(i.borderBottomWidth || "0") || 0, n = parseFloat(i.paddingTop || "0") || 0, o = parseFloat(i.paddingBottom || "0") || 0, s = a * e + r + c + n + o;
-      this._textarea.style.height = `${Math.min(t, s)}px`, this._textarea.style.overflowY = t > s ? "auto" : "hidden";
+      const i = getComputedStyle(this._textarea), s = parseFloat(i.lineHeight || "20") || 20, a = parseFloat(i.borderTopWidth || "0") || 0, u = parseFloat(i.borderBottomWidth || "0") || 0, o = parseFloat(i.paddingTop || "0") || 0, d = parseFloat(i.paddingBottom || "0") || 0, h = s * e + a + u + o + d;
+      this._textarea.style.height = `${Math.min(t, h)}px`, this._textarea.style.overflowY = t > h ? "auto" : "hidden";
       return;
     }
     this._textarea.style.height = `${t}px`, this._textarea.style.overflowY = "hidden";
@@ -472,7 +471,7 @@ class y extends f {
   _onInput(t) {
     const e = t.target.value;
     this.getAttribute("value") !== e && this.setAttribute("value", e), this._syncDynamicUi(), this._applyAutosize(), this._emit("input", e);
-    const i = x(this.getAttribute("debounce"), 0);
+    const i = b(this.getAttribute("debounce"), 0);
     i > 0 ? (this._debounceTimer && clearTimeout(this._debounceTimer), this._debounceTimer = setTimeout(() => {
       this._emit("debounced-input", e), this._debounceTimer = null;
     }, i)) : this._emit("debounced-input", e);
@@ -485,36 +484,34 @@ class y extends f {
     t.preventDefault(), !(this.hasAttribute("disabled") || this.hasAttribute("readonly")) && (this.value = "", this._textarea && (this._textarea.value = "", this._textarea.focus()), this._syncDynamicUi(), this._applyAutosize(), this._emit("input", ""), this._emit("change", ""), this.dispatchEvent(new CustomEvent("clear", { bubbles: !0, composed: !0 })));
   }
   render() {
-    var o;
-    const t = this.getAttribute("value") || "", e = this.getAttribute("label") || "", i = this.getAttribute("description") || "", a = this.getAttribute("data-error") || "", r = !!(e || i || this.querySelector('[slot="label"]') || this.querySelector('[slot="description"]')), n = this.hasAttribute("clearable") && !!t && !this.hasAttribute("disabled") && !this.hasAttribute("readonly");
+    const t = this.getAttribute("value") || "", e = this.getAttribute("label") || "", i = this.getAttribute("description") || "", s = this.getAttribute("data-error") || "", a = !!(e || i || this.querySelector('[slot="label"]') || this.querySelector('[slot="description"]')), o = this.hasAttribute("clearable") && !!t && !this.hasAttribute("disabled") && !this.hasAttribute("readonly");
     this.setContent(`
-      <style>${_}</style>
+      <style>${y}</style>
       <div class="shell" part="shell">
-        <div class="meta" part="meta" ${r ? "" : "hidden"}>
-          <label id="${this._uid}-label" class="label" part="label"><slot name="label">${d(e)}</slot></label>
-          <div id="${this._uid}-description" class="description" part="description"><slot name="description">${d(i)}</slot></div>
+        <div class="meta" part="meta" ${a ? "" : "hidden"}>
+          <label id="${this._uid}-label" class="label" part="label"><slot name="label">${x(e)}</slot></label>
+          <div id="${this._uid}-description" class="description" part="description"><slot name="description">${x(i)}</slot></div>
         </div>
 
         <div class="field" part="field">
           <textarea part="textarea"></textarea>
-          <button type="button" part="clear" class="clear-btn" aria-label="Clear text" ${n ? "" : "hidden"}>${v}</button>
+          <button type="button" part="clear" class="clear-btn" aria-label="Clear text" ${o ? "" : "hidden"}>${_}</button>
         </div>
 
         <div class="footer" part="footer">
-          <div id="${this._uid}-error" class="error" part="error"><slot name="error">${d(a)}</slot></div>
+          <div id="${this._uid}-error" class="error" part="error"><slot name="error">${x(s)}</slot></div>
           <div id="${this._uid}-count" class="count" part="count" hidden></div>
         </div>
       </div>
-    `), this._detachListeners(), this._textarea = this.root.querySelector("textarea"), this._clearBtn = this.root.querySelector(".clear-btn"), this._countEl = this.root.querySelector(".count"), this._textarea && (this._textarea.value = t, this._syncControlAttrs(), this._syncDynamicUi(), this._applyAutosize(), this._textarea.addEventListener("input", this._onInput), this._textarea.addEventListener("change", this._onChange), (o = this._clearBtn) == null || o.addEventListener("click", this._onClear), this.hasAttribute("autofocus") && queueMicrotask(() => {
-      var s;
-      (s = this._textarea) == null || s.focus();
+    `), this._detachListeners(), this._textarea = this.root.querySelector("textarea"), this._clearBtn = this.root.querySelector(".clear-btn"), this._countEl = this.root.querySelector(".count"), this._textarea && (this._textarea.value = t, this._syncControlAttrs(), this._syncDynamicUi(), this._applyAutosize(), this._textarea.addEventListener("input", this._onInput), this._textarea.addEventListener("change", this._onChange), this._clearBtn?.addEventListener("click", this._onClear), this.hasAttribute("autofocus") && queueMicrotask(() => {
+      this._textarea?.focus();
     }));
   }
   shouldRenderOnAttributeChange(t, e, i) {
     return t === "label" || t === "description" || t === "data-error";
   }
 }
-typeof customElements < "u" && !customElements.get("ui-textarea") && customElements.define("ui-textarea", y);
+typeof customElements < "u" && !customElements.get("ui-textarea") && customElements.define("ui-textarea", z);
 export {
-  y as UITextarea
+  z as UITextarea
 };

package/dist/time-field.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const T=require("./ElementBase-1b301e7f.js"),c=require("./date-time-utils-66480de4.js");require("./calendar-a8735e40.js");require("./scroll-lock-d7b0df21.js");require("./positioner-33529bb8.js");let M=0;const C=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const C=require("./ElementBase-EV6mVBUV.js"),c=require("./date-time-utils-Dmost5Ee.js");let T=0;const B=`
   :host {
     --ui-time-field-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
     --ui-time-field-border: 1px solid var(--ui-time-field-border-color);
@@ -127,8 +127,8 @@
   :host([readonly]) .segment {
     cursor: default;
   }
-`;function _(l,e){return c.parseTimeInput(l||"",!0)||null}function b(l){return{hour:l.hours%12||12,meridiem:l.hours>=12?"PM":"AM"}}function A(l,e){return e==="AM"?l===12?0:l:l===12?12:l+12}function I(l){return l==="meridiem"?"AM":l==="hour"?"HH":l==="minute"?"MM":"SS"}class p extends T.ElementBase{constructor(){super(),this._value=null,this._activeSegment="hour",this._segmentButtons=new Map,this._segmentsEl=null,this._shellEl=null,this._errorEl=null,this._formUnregister=null,this._bufferBySegment={hour:"",minute:"",second:""},this._bufferTimer=null,this._internals=null,this._uid=`ui-time-field-${++M}`,this._defaultValue=null;try{this._internals=typeof this.attachInternals=="function"?this.attachInternals():null}catch{this._internals=null}this._onSegmentKeyDown=this._onSegmentKeyDown.bind(this),this._onSegmentClick=this._onSegmentClick.bind(this),this._onFocusIn=this._onFocusIn.bind(this),this._onFocusOut=this._onFocusOut.bind(this)}static get observedAttributes(){return["value","min","max","format","seconds","label","description","data-error","required","disabled","readonly","name","locale"]}get value(){return this._value||""}set value(e){this._setValue(e||null,"api")}clearValue(){this._setValue(null,"clear")}formResetCallback(){this._setValue(this._defaultValue,"form")}connectedCallback(){super.connectedCallback(),this._defaultValue==null&&(this._defaultValue=this.getAttribute("value")),this._registerWithForm()}disconnectedCallback(){this._formUnregister&&(this._formUnregister(),this._formUnregister=null),this._bufferTimer!=null&&(window.clearTimeout(this._bufferTimer),this._bufferTimer=null),super.disconnectedCallback()}attributeChangedCallback(e,i,t){i!==t&&(e==="value"&&(this._value=this._normalizeTimeValue(t)),e==="name"&&this.isConnected&&this._registerWithForm(),this._shellEl&&this._syncUi())}shouldRenderOnAttributeChange(){return!1}render(){var e,i;this.setContent(`
-      <style>${C}</style>
+`;function b(l,e){return c.parseTimeInput(l||"")||null}function p(l){return{hour:l.hours%12||12,meridiem:l.hours>=12?"PM":"AM"}}function E(l,e){return e==="AM"?l===12?0:l:l===12?12:l+12}function V(l){return l==="meridiem"?"AM":l==="hour"?"HH":l==="minute"?"MM":"SS"}const g=class g extends C.ElementBase{constructor(){super(),this._value=null,this._activeSegment="hour",this._segmentButtons=new Map,this._segmentsEl=null,this._shellEl=null,this._errorEl=null,this._formUnregister=null,this._bufferBySegment={hour:"",minute:"",second:""},this._bufferTimer=null,this._internals=null,this._uid=`ui-time-field-${++T}`,this._defaultValue=null;try{this._internals=typeof this.attachInternals=="function"?this.attachInternals():null}catch{this._internals=null}this._onSegmentKeyDown=this._onSegmentKeyDown.bind(this),this._onSegmentClick=this._onSegmentClick.bind(this),this._onFocusIn=this._onFocusIn.bind(this),this._onFocusOut=this._onFocusOut.bind(this)}static get observedAttributes(){return["value","min","max","format","seconds","label","description","data-error","required","disabled","readonly","name","locale"]}get value(){return this._value||""}set value(e){this._setValue(e||null,"api")}clearValue(){this._setValue(null,"clear")}formResetCallback(){this._setValue(this._defaultValue,"form")}connectedCallback(){super.connectedCallback(),this._defaultValue==null&&(this._defaultValue=this.getAttribute("value")),this._registerWithForm()}disconnectedCallback(){this._formUnregister&&(this._formUnregister(),this._formUnregister=null),this._bufferTimer!=null&&(window.clearTimeout(this._bufferTimer),this._bufferTimer=null),super.disconnectedCallback()}attributeChangedCallback(e,i,t){i!==t&&(e==="value"&&(this._value=this._normalizeTimeValue(t)),e==="name"&&this.isConnected&&this._registerWithForm(),this._shellEl&&this._syncUi())}shouldRenderOnAttributeChange(){return!1}render(){this.setContent(`
+      <style>${B}</style>
       <div class="root">
         <div class="meta" hidden>
           <div class="label" hidden><span class="label-text"></span><span class="required" hidden>*</span></div>
@@ -139,4 +139,4 @@
         </div>
         <div class="error" part="error" hidden></div>
       </div>
-    `),this._segmentsEl=this.root.querySelector(".segments"),this._shellEl=this.root.querySelector(".shell"),this._errorEl=this.root.querySelector(".error"),(e=this._shellEl)==null||e.addEventListener("focusin",this._onFocusIn),(i=this._shellEl)==null||i.addEventListener("focusout",this._onFocusOut),this._value=this._normalizeTimeValue(this.getAttribute("value")),this._syncFormValue(),this._syncUi()}_showSeconds(){return this.hasAttribute("seconds")}_is12h(){return(this.getAttribute("format")||"").toLowerCase()==="12h"}_normalizeTimeValue(e){const i=c.parseTimeInput(e||"",!0);if(!i)return null;const t=c.formatTime(i,this._showSeconds()),r=this.getAttribute("min"),s=this.getAttribute("max");return c.clampTime(t,r,s)}_partsOrFallback(){return _(this._value,this._showSeconds())||_(this.getAttribute("min"),this._showSeconds())||{hours:9,minutes:0,seconds:0}}_order(){const e=["hour","minute"];return this._showSeconds()&&e.push("second"),this._is12h()&&e.push("meridiem"),e}_focusSegment(e){var i;this._activeSegment=e,this._syncUi(),(i=this._segmentButtons.get(e))==null||i.focus()}_moveSegmentFocus(e){const i=this._order(),t=i.indexOf(this._activeSegment),r=i[(t+e+i.length)%i.length];this._focusSegment(r)}_setBuffer(e,i){this._bufferBySegment[e]=i,this._bufferTimer!=null&&window.clearTimeout(this._bufferTimer),this._bufferTimer=window.setTimeout(()=>{this._bufferBySegment.hour="",this._bufferBySegment.minute="",this._bufferBySegment.second="",this._bufferTimer=null},900)}_applyParts(e,i){const t=this._normalizeTimeValue(c.formatTime(e,this._showSeconds()));this._setValue(t,i)}_setValue(e,i){const t=this._normalizeTimeValue(e);if(t===this._value){this._syncFormValue(),this._syncUi();return}const r=this._value;this._value=t,t?this.setAttribute("value",t):this.removeAttribute("value"),this._syncFormValue(),this._syncUi(),this.dispatchEvent(new CustomEvent("change",{detail:{value:t,previousValue:r,source:i},bubbles:!0,composed:!0}))}_syncFormValue(){var e;try{(e=this._internals)==null||e.setFormValue(this.value||"")}catch{}}_increment(e,i){const t=this._partsOrFallback();if(e==="meridiem"){t.hours=(t.hours+12)%24,this._applyParts(t,"keyboard");return}const u=(t.hours*3600+t.minutes*60+t.seconds+i*(e==="hour"?3600:e==="minute"?60:1)+86400)%86400,a={hours:Math.floor(u/3600),minutes:Math.floor(u%3600/60),seconds:u%60};this._applyParts(a,"keyboard")}_applyNumericInput(e,i){const t=`${this._bufferBySegment[e]}${i}`.slice(-2);if(this._setBuffer(e,t),t.length<2)return;const r=this._partsOrFallback(),s=Number(t);if(Number.isFinite(s)){if(e==="hour")if(this._is12h()){const{meridiem:u}=b(r),a=Math.min(Math.max(s,1),12);r.hours=A(a,u)}else r.hours=Math.min(Math.max(s,0),23);else e==="minute"?r.minutes=Math.min(Math.max(s,0),59):r.seconds=Math.min(Math.max(s,0),59);this._applyParts(r,"keyboard"),this._moveSegmentFocus(1)}}_onSegmentClick(e){const i=e.currentTarget.getAttribute("data-segment");i&&this._focusSegment(i)}_onSegmentKeyDown(e){if(this.hasAttribute("disabled")||this.hasAttribute("readonly"))return;const i=e.currentTarget.getAttribute("data-segment");if(i){if(e.key==="ArrowLeft"){e.preventDefault(),this._moveSegmentFocus(-1);return}if(e.key==="ArrowRight"){e.preventDefault(),this._moveSegmentFocus(1);return}if(e.key==="ArrowUp"||e.key==="ArrowDown"){e.preventDefault(),this._increment(i,e.key==="ArrowUp"?1:-1);return}if(e.key==="Backspace"||e.key==="Delete"){e.preventDefault(),this.clearValue();return}if(i==="meridiem"&&/^[ap]$/i.test(e.key)){e.preventDefault();const t=this._partsOrFallback(),r=e.key.toLowerCase()==="a"?"AM":"PM",s=b(t).hour;t.hours=A(s,r),this._applyParts(t,"keyboard");return}/^\d$/.test(e.key)&&i!=="meridiem"&&(e.preventDefault(),this._applyNumericInput(i,e.key))}}_registerWithForm(){var e;this._formUnregister&&(this._formUnregister(),this._formUnregister=null);try{const t=this.getRootNode().host,s=((e=t==null?void 0:t.closest)==null?void 0:e.call(t,"ui-form"))||null||this.closest("ui-form"),u=this.getAttribute("name");s&&typeof s.registerField=="function"&&u&&(this._formUnregister=s.registerField(u,{name:u,getValue:()=>this.value,setValue:a=>this._setValue(a?String(a):null,"form"),validate:async()=>this.hasAttribute("required")&&!this.value?{valid:!1,message:"Time is required"}:{valid:!0},setError:a=>{a?this.setAttribute("data-error",a):this.removeAttribute("data-error"),this._syncUi()}}))}catch{}}_onFocusIn(){var e;(e=this._shellEl)==null||e.setAttribute("data-focused","true")}_onFocusOut(e){var i,t;(i=this._shellEl)!=null&&i.contains(e.relatedTarget)||(t=this._shellEl)==null||t.setAttribute("data-focused","false")}_syncUi(){if(!this._segmentsEl||!this._shellEl||!this._errorEl)return;const e=this.root.activeElement,i=!!e&&this._segmentsEl.contains(e),t=(this.getAttribute("label")||"").trim(),r=(this.getAttribute("description")||"").trim(),s=(this.getAttribute("data-error")||"").trim(),u=this.root.querySelector(".meta"),a=this.root.querySelector(".label"),E=this.root.querySelector(".label-text"),k=this.root.querySelector(".required"),m=this.root.querySelector(".description"),g=`${this._uid}-label`,y=`${this._uid}-description`,v=`${this._uid}-error`;u.hidden=!t&&!r,a.hidden=!t,a.id=t?g:"",E.textContent=t,k.hidden=!this.hasAttribute("required"),m.hidden=!r,m.id=r?y:"",m.textContent=r,this._errorEl.hidden=!s,this._errorEl.id=s?v:"",this._errorEl.textContent=s,this._shellEl.setAttribute("data-invalid",s?"true":"false"),this._shellEl.setAttribute("role","group"),t?this._shellEl.setAttribute("aria-labelledby",g):this._shellEl.removeAttribute("aria-labelledby");const x=[r?y:null,s?v:null].filter(Boolean).join(" ");x?this._shellEl.setAttribute("aria-describedby",x):this._shellEl.removeAttribute("aria-describedby"),this._shellEl.setAttribute("aria-invalid",s?"true":"false"),this._shellEl.setAttribute("aria-required",this.hasAttribute("required")?"true":"false"),this._shellEl.setAttribute("aria-disabled",this.hasAttribute("disabled")?"true":"false"),this._shellEl.setAttribute("aria-readonly",this.hasAttribute("readonly")?"true":"false");const d=_(this._value,this._showSeconds()),w=this._order(),f=[];this._segmentButtons.clear();const S=d?b(d):null;if(w.forEach((n,F)=>{if(F>0){const h=document.createElement("span");h.className="literal",h.textContent=n==="meridiem"?" ":":",f.push(h)}const o=document.createElement("button");if(o.type="button",o.className="segment",o.setAttribute("data-segment",n),o.setAttribute("data-active",this._activeSegment===n?"true":"false"),o.setAttribute("data-empty",d?"false":"true"),o.setAttribute("aria-label",n==="hour"?"Hour":n==="minute"?"Minute":n==="second"?"Second":"AM or PM"),o.tabIndex=this._activeSegment===n?0:-1,o.disabled=this.hasAttribute("disabled"),o.addEventListener("click",this._onSegmentClick),o.addEventListener("keydown",this._onSegmentKeyDown),!d)o.textContent=I(n);else if(n==="hour"){const h=this._is12h()?S.hour:d.hours;o.textContent=String(h).padStart(2,"0")}else n==="minute"?o.textContent=String(d.minutes).padStart(2,"0"):n==="second"?o.textContent=String(d.seconds).padStart(2,"0"):o.textContent=S.meridiem;this._segmentButtons.set(n,o),f.push(o)}),this._segmentsEl.replaceChildren(...f),i){const n=this._segmentButtons.get(this._activeSegment);try{n==null||n.focus({preventScroll:!0})}catch{n==null||n.focus()}}}}p.formAssociated=!0;typeof customElements<"u"&&!customElements.get("ui-time-field")&&customElements.define("ui-time-field",p);exports.UITimeField=p;
+    `),this._segmentsEl=this.root.querySelector(".segments"),this._shellEl=this.root.querySelector(".shell"),this._errorEl=this.root.querySelector(".error"),this._shellEl?.addEventListener("focusin",this._onFocusIn),this._shellEl?.addEventListener("focusout",this._onFocusOut),this._value=this._normalizeTimeValue(this.getAttribute("value")),this._syncFormValue(),this._syncUi()}_showSeconds(){return this.hasAttribute("seconds")}_is12h(){return(this.getAttribute("format")||"").toLowerCase()==="12h"}_normalizeTimeValue(e){const i=c.parseTimeInput(e||"");if(!i)return null;const t=c.formatTime(i,this._showSeconds()),s=this.getAttribute("min"),r=this.getAttribute("max");return c.clampTime(t,s,r)}_partsOrFallback(){return b(this._value,this._showSeconds())||b(this.getAttribute("min"),this._showSeconds())||{hours:9,minutes:0,seconds:0}}_order(){const e=["hour","minute"];return this._showSeconds()&&e.push("second"),this._is12h()&&e.push("meridiem"),e}_focusSegment(e){this._activeSegment=e,this._syncUi(),this._segmentButtons.get(e)?.focus()}_moveSegmentFocus(e){const i=this._order(),t=i.indexOf(this._activeSegment),s=i[(t+e+i.length)%i.length];this._focusSegment(s)}_setBuffer(e,i){this._bufferBySegment[e]=i,this._bufferTimer!=null&&window.clearTimeout(this._bufferTimer),this._bufferTimer=window.setTimeout(()=>{this._bufferBySegment.hour="",this._bufferBySegment.minute="",this._bufferBySegment.second="",this._bufferTimer=null},900)}_applyParts(e,i){const t=this._normalizeTimeValue(c.formatTime(e,this._showSeconds()));this._setValue(t,i)}_setValue(e,i){const t=this._normalizeTimeValue(e);if(t===this._value){this._syncFormValue(),this._syncUi();return}const s=this._value;this._value=t,t?this.setAttribute("value",t):this.removeAttribute("value"),this._syncFormValue(),this._syncUi(),this.dispatchEvent(new CustomEvent("change",{detail:{value:t,previousValue:s,source:i},bubbles:!0,composed:!0}))}_syncFormValue(){try{this._internals?.setFormValue(this.value||"")}catch{}}_increment(e,i){const t=this._partsOrFallback();if(e==="meridiem"){t.hours=(t.hours+12)%24,this._applyParts(t,"keyboard");return}const a=(t.hours*3600+t.minutes*60+t.seconds+i*(e==="hour"?3600:e==="minute"?60:1)+86400)%86400,d={hours:Math.floor(a/3600),minutes:Math.floor(a%3600/60),seconds:a%60};this._applyParts(d,"keyboard")}_applyNumericInput(e,i){const t=`${this._bufferBySegment[e]}${i}`.slice(-2);if(this._setBuffer(e,t),t.length<2)return;const s=this._partsOrFallback(),r=Number(t);if(Number.isFinite(r)){if(e==="hour")if(this._is12h()){const{meridiem:a}=p(s),d=Math.min(Math.max(r,1),12);s.hours=E(d,a)}else s.hours=Math.min(Math.max(r,0),23);else e==="minute"?s.minutes=Math.min(Math.max(r,0),59):s.seconds=Math.min(Math.max(r,0),59);this._applyParts(s,"keyboard"),this._moveSegmentFocus(1)}}_onSegmentClick(e){const i=e.currentTarget.getAttribute("data-segment");i&&this._focusSegment(i)}_onSegmentKeyDown(e){if(this.hasAttribute("disabled")||this.hasAttribute("readonly"))return;const i=e.currentTarget.getAttribute("data-segment");if(i){if(e.key==="ArrowLeft"){e.preventDefault(),this._moveSegmentFocus(-1);return}if(e.key==="ArrowRight"){e.preventDefault(),this._moveSegmentFocus(1);return}if(e.key==="ArrowUp"||e.key==="ArrowDown"){e.preventDefault(),this._increment(i,e.key==="ArrowUp"?1:-1);return}if(e.key==="Backspace"||e.key==="Delete"){e.preventDefault(),this.clearValue();return}if(i==="meridiem"&&/^[ap]$/i.test(e.key)){e.preventDefault();const t=this._partsOrFallback(),s=e.key.toLowerCase()==="a"?"AM":"PM",r=p(t).hour;t.hours=E(r,s),this._applyParts(t,"keyboard");return}/^\d$/.test(e.key)&&i!=="meridiem"&&(e.preventDefault(),this._applyNumericInput(i,e.key))}}_registerWithForm(){this._formUnregister&&(this._formUnregister(),this._formUnregister=null);try{const s=this.getRootNode().host?.closest?.("ui-form")||null||this.closest("ui-form"),r=this.getAttribute("name");s&&typeof s.registerField=="function"&&r&&(this._formUnregister=s.registerField(r,{name:r,getValue:()=>this.value,setValue:a=>this._setValue(a?String(a):null,"form"),validate:async()=>this.hasAttribute("required")&&!this.value?{valid:!1,message:"Time is required"}:{valid:!0},setError:a=>{a?this.setAttribute("data-error",a):this.removeAttribute("data-error"),this._syncUi()}}))}catch{}}_onFocusIn(){this._shellEl?.setAttribute("data-focused","true")}_onFocusOut(e){this._shellEl?.contains(e.relatedTarget)||this._shellEl?.setAttribute("data-focused","false")}_syncUi(){if(!this._segmentsEl||!this._shellEl||!this._errorEl)return;const e=this.root.activeElement,i=!!e&&this._segmentsEl.contains(e),t=(this.getAttribute("label")||"").trim(),s=(this.getAttribute("description")||"").trim(),r=(this.getAttribute("data-error")||"").trim(),a=this.root.querySelector(".meta"),d=this.root.querySelector(".label"),k=this.root.querySelector(".label-text"),w=this.root.querySelector(".required"),f=this.root.querySelector(".description"),y=`${this._uid}-label`,v=`${this._uid}-description`,x=`${this._uid}-error`;a.hidden=!t&&!s,d.hidden=!t,d.id=t?y:"",k.textContent=t,w.hidden=!this.hasAttribute("required"),f.hidden=!s,f.id=s?v:"",f.textContent=s,this._errorEl.hidden=!r,this._errorEl.id=r?x:"",this._errorEl.textContent=r,this._shellEl.setAttribute("data-invalid",r?"true":"false"),this._shellEl.setAttribute("role","group"),t?this._shellEl.setAttribute("aria-labelledby",y):this._shellEl.removeAttribute("aria-labelledby");const S=[s?v:null,r?x:null].filter(Boolean).join(" ");S?this._shellEl.setAttribute("aria-describedby",S):this._shellEl.removeAttribute("aria-describedby"),this._shellEl.setAttribute("aria-invalid",r?"true":"false"),this._shellEl.setAttribute("aria-required",this.hasAttribute("required")?"true":"false"),this._shellEl.setAttribute("aria-disabled",this.hasAttribute("disabled")?"true":"false"),this._shellEl.setAttribute("aria-readonly",this.hasAttribute("readonly")?"true":"false");const u=b(this._value,this._showSeconds()),F=this._order(),_=[];this._segmentButtons.clear();const A=u?p(u):null;if(F.forEach((o,M)=>{if(M>0){const h=document.createElement("span");h.className="literal",h.textContent=o==="meridiem"?" ":":",_.push(h)}const n=document.createElement("button");if(n.type="button",n.className="segment",n.setAttribute("data-segment",o),n.setAttribute("data-active",this._activeSegment===o?"true":"false"),n.setAttribute("data-empty",u?"false":"true"),n.setAttribute("aria-label",o==="hour"?"Hour":o==="minute"?"Minute":o==="second"?"Second":"AM or PM"),n.tabIndex=this._activeSegment===o?0:-1,n.disabled=this.hasAttribute("disabled"),n.addEventListener("click",this._onSegmentClick),n.addEventListener("keydown",this._onSegmentKeyDown),!u)n.textContent=V(o);else if(o==="hour"){const h=this._is12h()?A.hour:u.hours;n.textContent=String(h).padStart(2,"0")}else o==="minute"?n.textContent=String(u.minutes).padStart(2,"0"):o==="second"?n.textContent=String(u.seconds).padStart(2,"0"):n.textContent=A.meridiem;this._segmentButtons.set(o,n),_.push(n)}),this._segmentsEl.replaceChildren(..._),i){const o=this._segmentButtons.get(this._activeSegment);try{o?.focus({preventScroll:!0})}catch{o?.focus()}}}};g.formAssociated=!0;let m=g;typeof customElements<"u"&&!customElements.get("ui-time-field")&&customElements.define("ui-time-field",m);exports.UITimeField=m;