@editora/ui-core 0.1.24 → 0.2.0

package/dist/tags-input.esm.js

@@ -3,9 +3,9 @@ import { s as A, a as S } from "./control-name-Bpj7F34X.mjs";
 const k = `
   :host {
     --ui-tags-input-padding: 10px 12px;
-    --ui-tags-input-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
+    --ui-tags-input-border-color: var(--ui-color-line, var(--ui-color-border, #cbd5e1));
     --ui-tags-input-border: 1px solid var(--ui-tags-input-border-color);
-    --ui-tags-input-radius: var(--ui-radius, 12px);
+    --ui-tags-input-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     --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, #526175);
@@ -14,7 +14,8 @@ const k = `
     --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;
+    --ui-tags-input-min-height: var(--ui-control-height-2, 32px);
+    --ui-tags-input-font-size: var(--ui-control-font-size-2, 14px);
     display: block;
     inline-size: 100%;
     max-inline-size: 100%;
@@ -24,6 +25,26 @@ const k = `
     color-scheme: light dark;
   }
 
+  :host([size="sm"]),
+  :host([size="1"]) {
+    --ui-tags-input-min-height: var(--ui-control-height-1, 24px);
+    --ui-tags-input-font-size: var(--ui-control-font-size-1, 12px);
+    --ui-tags-input-radius: var(--ui-control-radius-1, var(--ui-radius, 6px));
+    --ui-tags-input-pad-y: 0px;
+    --ui-tags-input-pad-x: calc(var(--ui-control-padding-inline-1, 8px) - 1px);
+    --ui-tags-input-chip-pad-y: 0px;
+  }
+
+  :host([size="lg"]),
+  :host([size="3"]) {
+    --ui-tags-input-min-height: var(--ui-control-height-3, 40px);
+    --ui-tags-input-font-size: var(--ui-control-font-size-3, 16px);
+    --ui-tags-input-radius: var(--ui-control-radius-3, var(--ui-radius, 6px));
+    --ui-tags-input-pad-y: 5px;
+    --ui-tags-input-pad-x: calc(var(--ui-control-padding-inline-3, 16px) - 1px);
+    --ui-tags-input-chip-pad-y: 4px;
+  }
+
   .root {
     display: grid;
     gap: 8px;
@@ -77,7 +98,7 @@ const k = `
     gap: 8px;
     min-block-size: var(--ui-tags-input-min-height);
     box-sizing: border-box;
-    padding: 8px 10px;
+    padding: var(--ui-tags-input-pad-y, 3px) var(--ui-tags-input-pad-x, calc(var(--ui-control-padding-inline-2, 12px) - 1px));
     border: var(--ui-tags-input-border);
     border-radius: var(--ui-tags-input-radius);
     background: var(--ui-tags-input-bg);
@@ -85,13 +106,18 @@ const k = `
   }
 
   .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);
+    border-color: var(--ui-ring-color, var(--ui-tags-input-focus));
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-tags-input-focus));
+    outline-offset: -1px;
+  }
+
+  .shell:hover:not([data-focused="true"]) {
+    border-color: var(--ui-color-line-strong, var(--ui-tags-input-border-color));
   }
 
   .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);
+    box-shadow: 0 0 0 1px var(--ui-tags-input-danger);
   }
 
   .chips {
@@ -104,7 +130,7 @@ const k = `
     gap: 6px;
     min-inline-size: 0;
     max-inline-size: 100%;
-    padding: 6px 8px 6px 10px;
+    padding: var(--ui-tags-input-chip-pad-y, 2px) 4px var(--ui-tags-input-chip-pad-y, 2px) 10px;
     border-radius: 999px;
     background: var(--ui-tags-input-chip-bg);
     color: var(--ui-tags-input-chip-text);
@@ -144,13 +170,13 @@ const k = `
     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;
+    font: 500 var(--ui-tags-input-font-size)/1.4 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    padding: 2px 2px;
     margin: 0;
   }
 
   .input::placeholder {
-    color: color-mix(in srgb, var(--ui-tags-input-text) 42%, transparent);
+    color: var(--ui-color-placeholder, color-mix(in srgb, var(--ui-tags-input-text) 62%, transparent));
   }
 
   .assist {
@@ -184,7 +210,7 @@ const k = `
     pointer-events: none;
   }
 `;
-function f(r, t) {
+function m(r, t) {
   return r.length === t.length && r.every((i, e) => i === t[e]);
 }
 function d(r) {
@@ -200,17 +226,17 @@ function d(r) {
     }
   return t.split(",").map((i) => i.trim()).filter(Boolean);
 }
-function C(r) {
+function z(r) {
   return r.length ? r.some((t) => t.includes(",") || t.includes(`
 `)) ? JSON.stringify(r) : r.join(", ") : "";
 }
-function c(r) {
+function p(r) {
   return r.replace(/\s+/g, " ").trim();
 }
-let T = 0;
-class U extends E {
+let C = 0;
+class T extends E {
   constructor() {
-    super(), this._tags = [], this._draft = "", this._suppressValueAttr = !1, this._formUnregister = null, this._rootEl = null, this._shellEl = null, this._chipsEl = null, this._inputEl = null, this._uid = `ui-tags-input-${++T}`, this._labelEl = null, this._descriptionEl = null, this._errorEl = null, this._assistEl = null, this._counterEl = null, this._focused = !1, this._onInput = this._onInput.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onFocusIn = this._onFocusIn.bind(this), this._onFocusOut = this._onFocusOut.bind(this), this._onPaste = this._onPaste.bind(this), this._onShellClick = this._onShellClick.bind(this), this._onChipClick = this._onChipClick.bind(this);
+    super(), this._tags = [], this._draft = "", this._suppressValueAttr = !1, this._formUnregister = null, this._rootEl = null, this._shellEl = null, this._chipsEl = null, this._inputEl = null, this._uid = `ui-tags-input-${++C}`, 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 [
@@ -234,7 +260,7 @@ class U extends E {
     return [...this._tags];
   }
   set value(t) {
-    const i = Array.isArray(t) ? t.map((e) => c(String(e))).filter(Boolean) : d(String(t ?? ""));
+    const i = Array.isArray(t) ? t.map((e) => p(String(e))).filter(Boolean) : d(String(t ?? ""));
     this._applyTags(i, "api");
   }
   addTag(t) {
@@ -265,7 +291,7 @@ class U extends E {
     if (i !== e) {
       if (t === "name" && this.isConnected && this._registerWithForm(), t === "value" && !this._suppressValueAttr) {
         const s = d(e);
-        f(s, this._tags) || (this._tags = s);
+        m(s, this._tags) || (this._tags = s);
       }
       this._rootEl && this._syncUi();
     }
@@ -312,7 +338,7 @@ class U extends E {
     this.dispatchEvent(new CustomEvent(t, { detail: i, bubbles: !0, composed: !0 }));
   }
   _setValueAttr(t) {
-    const i = C(t);
+    const i = z(t);
     this._suppressValueAttr = !0;
     try {
       i ? this.getAttribute("value") !== i && this.setAttribute("value", i) : this.removeAttribute("value");
@@ -321,29 +347,29 @@ class U extends E {
     }
   }
   _applyTags(t, i) {
-    const e = t.map((l) => c(l)).filter(Boolean), s = this._allowDuplicates() ? e : e.filter((l, o) => e.indexOf(l) === o), n = this._maxTags() != null ? s.slice(0, this._maxTags()) : s;
-    if (f(n, this._tags))
+    const e = t.map((l) => p(l)).filter(Boolean), s = this._allowDuplicates() ? e : e.filter((l, o) => e.indexOf(l) === o), a = this._maxTags() != null ? s.slice(0, this._maxTags()) : s;
+    if (m(a, this._tags))
       return this._syncUi(), !1;
-    const a = [...this._tags];
-    return this._tags = [...n], this._setValueAttr(this._tags), this._syncUi(), this._emit("change", { value: [...this._tags], previousValue: a, source: i }), !0;
+    const n = [...this._tags];
+    return this._tags = [...a], this._setValueAttr(this._tags), this._syncUi(), this._emit("change", { value: [...this._tags], previousValue: n, source: i }), !0;
   }
   _addTag(t, i) {
     if (this._disabled() || this._readOnly()) return !1;
-    const e = c(t);
+    const e = p(t);
     if (!e) return !1;
     if (!this._allowDuplicates() && this._tags.includes(e))
       return this._syncUi("Duplicate tag"), !1;
     const s = this._maxTags();
     if (s != null && this._tags.length >= s)
       return this._syncUi(`Maximum ${s} tags`), !1;
-    const n = this._applyTags([...this._tags, e], i);
-    return n && this._emit("tag-add", { tag: e, value: [...this._tags], source: i }), n;
+    const a = this._applyTags([...this._tags, e], i);
+    return a && this._emit("tag-add", { tag: e, value: [...this._tags], source: i }), a;
   }
   _removeTagAt(t, i) {
     if (this._disabled() || this._readOnly()) return;
     const e = this._tags[t];
     if (!e) return;
-    const s = this._tags.filter((a, l) => l !== t);
+    const s = this._tags.filter((n, l) => l !== t);
     this._applyTags(s, i) && this._emit("tag-remove", { tag: e, index: t, value: [...this._tags], source: i });
   }
   _commitDraft(t) {
@@ -352,35 +378,35 @@ class U extends E {
   }
   _syncUi(t) {
     if (!this._shellEl || !this._chipsEl || !this._inputEl || !this._labelEl || !this._descriptionEl || !this._errorEl || !this._assistEl || !this._counterEl) return;
-    const i = (this.getAttribute("label") || "").trim(), e = (this.getAttribute("description") || "").trim(), s = (this.getAttribute("data-error") || "").trim(), n = this.hasAttribute("required"), a = this._disabled(), l = this._readOnly(), o = this._maxTags(), b = this.hasAttribute("counter") || o != null, v = !!s || !!t || n && this._tags.length === 0 && this.hasAttribute("invalid");
-    this._labelEl.hidden = !i, this._labelEl.querySelector(".label-text").textContent = i, this._labelEl.querySelector(".required").hidden = !n, this._descriptionEl.hidden = !e, this._descriptionEl.textContent = e, this.root.querySelector(".meta").hidden = !i && !e, A(this._inputEl, this, i ? `${this._uid}-label` : null), this._shellEl.setAttribute("data-focused", this._focused ? "true" : "false"), this._shellEl.setAttribute("data-invalid", v ? "true" : "false"), this._inputEl.disabled = a, this._inputEl.readOnly = l, this._inputEl.placeholder = this._tags.length === 0 ? this.getAttribute("placeholder") || "Add tags" : "", this._inputEl.value = this._draft;
-    const y = a || o != null && this._tags.length >= o;
-    this._inputEl.setAttribute("aria-disabled", y ? "true" : "false"), this._chipsEl.replaceChildren(...this._tags.map((m, x) => {
+    const i = (this.getAttribute("label") || "").trim(), e = (this.getAttribute("description") || "").trim(), s = (this.getAttribute("data-error") || "").trim(), a = this.hasAttribute("required"), n = this._disabled(), l = this._readOnly(), o = this._maxTags(), b = this.hasAttribute("counter") || o != null, v = !!s || !!t || a && this._tags.length === 0 && this.hasAttribute("invalid");
+    this._labelEl.hidden = !i, this._labelEl.querySelector(".label-text").textContent = i, this._labelEl.querySelector(".required").hidden = !a, this._descriptionEl.hidden = !e, this._descriptionEl.textContent = e, this.root.querySelector(".meta").hidden = !i && !e, A(this._inputEl, this, i ? `${this._uid}-label` : null), this._shellEl.setAttribute("data-focused", this._focused ? "true" : "false"), this._shellEl.setAttribute("data-invalid", v ? "true" : "false"), this._inputEl.disabled = n, this._inputEl.readOnly = l, this._inputEl.placeholder = this._tags.length === 0 ? this.getAttribute("placeholder") || "Add tags" : "", this._inputEl.value = this._draft;
+    const y = n || o != null && this._tags.length >= o;
+    this._inputEl.setAttribute("aria-disabled", y ? "true" : "false"), this._chipsEl.replaceChildren(...this._tags.map((f, x) => {
       const h = document.createElement("span");
       h.className = "chip", h.setAttribute("part", "chip");
       const _ = document.createElement("span");
-      _.className = "chip-label", _.textContent = m;
+      _.className = "chip-label", _.textContent = f;
       const u = document.createElement("button");
-      return u.type = "button", u.className = "chip-remove", u.setAttribute("data-index", String(x)), u.setAttribute("aria-label", `Remove ${m}`), u.textContent = "×", u.disabled = a || l, h.append(_, u), h;
+      return u.type = "button", u.className = "chip-remove", u.setAttribute("data-index", String(x)), u.setAttribute("aria-label", `Remove ${f}`), u.textContent = "×", u.disabled = n || l, h.append(_, u), h;
     }));
-    const p = t || s;
-    this._errorEl.hidden = !p, this._errorEl.textContent = p;
+    const c = t || s;
+    this._errorEl.hidden = !c, this._errorEl.textContent = c;
     const g = [];
-    e && g.push(`${this._uid}-description`), p && g.push(`${this._uid}-error`), S(this._inputEl, this, this._uid, g), this._assistEl.hidden = !b, this._counterEl.textContent = o != null ? `${this._tags.length}/${o}` : String(this._tags.length);
+    e && g.push(`${this._uid}-description`), c && g.push(`${this._uid}-error`), S(this._inputEl, this, this._uid, g), this._assistEl.hidden = !b, this._counterEl.textContent = o != null ? `${this._tags.length}/${o}` : String(this._tags.length);
   }
   _registerWithForm() {
     this._formUnregister && (this._formUnregister(), this._formUnregister = null);
     try {
-      const s = this.getRootNode().host?.closest?.("ui-form") || null || this.closest("ui-form"), n = this.getAttribute("name");
-      s && typeof s.registerField == "function" && n && (this._formUnregister = s.registerField(n, {
-        name: n,
+      const s = this.getRootNode().host?.closest?.("ui-form") || null || this.closest("ui-form"), a = this.getAttribute("name");
+      s && typeof s.registerField == "function" && a && (this._formUnregister = s.registerField(a, {
+        name: a,
         getValue: () => [...this._tags],
-        setValue: (a) => {
-          Array.isArray(a) ? this._applyTags(a.map((l) => String(l)), "form") : this._applyTags(d(String(a ?? "")), "form");
+        setValue: (n) => {
+          Array.isArray(n) ? this._applyTags(n.map((l) => String(l)), "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: (a) => {
-          a ? this.setAttribute("data-error", a) : this.removeAttribute("data-error"), this._syncUi();
+        setError: (n) => {
+          n ? this.setAttribute("data-error", n) : this.removeAttribute("data-error"), this._syncUi();
         }
       }));
     } catch {
@@ -401,7 +427,7 @@ class U extends E {
     const i = t.clipboardData?.getData("text") || "";
     if (!/[,\n]/.test(i)) return;
     t.preventDefault();
-    const e = i.split(/[,\n]+/).map(c).filter(Boolean);
+    const e = i.split(/[,\n]+/).map(p).filter(Boolean);
     e.length && (this._draft = "", this._inputEl && (this._inputEl.value = ""), this._applyTags([...this._tags, ...e], "paste"));
   }
   _onFocusIn() {
@@ -420,7 +446,7 @@ class U extends E {
     Number.isFinite(s) && this._removeTagAt(s, "remove-button");
   }
 }
-typeof customElements < "u" && !customElements.get("ui-tags-input") && customElements.define("ui-tags-input", U);
+typeof customElements < "u" && !customElements.get("ui-tags-input") && customElements.define("ui-tags-input", T);
 export {
-  U as UITagsInput
+  T as UITagsInput
 };

package/dist/textarea.cjs.js

@@ -1,20 +1,21 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const A=require("./ElementBase-DxbvhLJs.js"),g=require("./control-name-BmoI1m3a.js"),z=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const A=require("./ElementBase-DxbvhLJs.js"),g=require("./control-name-BmoI1m3a.js"),w=`
   <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>
-`,w=`
+`,z=`
   :host {
-    --ui-textarea-bg: var(--ui-color-surface, #ffffff);
+    --ui-textarea-bg: var(--base-input-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
     --ui-textarea-text: var(--ui-color-text, #0f172a);
     --ui-textarea-muted: var(--ui-color-muted, #526175);
-    --ui-textarea-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent);
+    --ui-textarea-border: var(--ui-color-line, var(--ui-color-border, #cbd5e1));
     --ui-textarea-focus: var(--ui-color-focus-ring, #2563eb);
     --ui-textarea-accent: var(--ui-color-primary, #2563eb);
     --ui-textarea-danger: var(--ui-color-danger, #dc2626);
     --ui-textarea-success: var(--ui-color-success, #15803d);
-    --ui-textarea-radius: 12px;
-    --ui-textarea-padding-x: 12px;
-    --ui-textarea-padding-y: 10px;
+    --ui-textarea-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    --ui-textarea-padding-x: calc(var(--ui-control-padding-inline-2, 12px) - 1px);
+    --ui-textarea-padding-y: 6px;
+    --ui-textarea-font-size: var(--ui-control-font-size-2, 14px);
     --ui-textarea-min-height: 110px;
     --ui-textarea-shadow: none;
 
@@ -69,10 +70,14 @@
   }
 
   .field:focus-within {
-    border-color: color-mix(in srgb, var(--ui-textarea-focus) 72%, transparent);
-    box-shadow:
-      0 0 0 3px color-mix(in srgb, var(--ui-textarea-focus) 22%, transparent),
-      var(--ui-textarea-shadow);
+    border-color: var(--ui-ring-color, var(--ui-textarea-focus));
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-textarea-focus));
+    outline-offset: -1px;
+    box-shadow: var(--ui-textarea-shadow);
+  }
+
+  .field:hover:not(:focus-within) {
+    border-color: var(--ui-color-line-strong, var(--ui-textarea-border));
   }
 
   textarea {
@@ -85,13 +90,13 @@
     color: var(--ui-textarea-text);
     resize: vertical;
     outline: none;
-    font: 500 14px/1.45 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    font: 500 var(--ui-textarea-font-size)/1.45 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     padding: var(--ui-textarea-padding-y) var(--ui-textarea-padding-x);
     border-radius: inherit;
   }
 
   textarea::placeholder {
-    color: color-mix(in srgb, var(--ui-textarea-muted) 76%, transparent);
+    color: var(--ui-color-placeholder, color-mix(in srgb, var(--ui-textarea-muted) 90%, transparent));
   }
 
   textarea[readonly] {
@@ -168,26 +173,20 @@
 
   :host([size="sm"]),
   :host([size="1"]) {
-    --ui-textarea-padding-x: 10px;
-    --ui-textarea-padding-y: 8px;
+    --ui-textarea-padding-x: calc(var(--ui-control-padding-inline-1, 8px) - 1px);
+    --ui-textarea-padding-y: 4px;
     --ui-textarea-min-height: 84px;
-  }
-
-  :host([size="sm"]) textarea,
-  :host([size="1"]) textarea {
-    font-size: 13px;
+    --ui-textarea-font-size: var(--ui-control-font-size-1, 12px);
+    --ui-textarea-radius: var(--ui-control-radius-1, var(--ui-radius, 6px));
   }
 
   :host([size="lg"]),
   :host([size="3"]) {
-    --ui-textarea-padding-x: 14px;
-    --ui-textarea-padding-y: 12px;
+    --ui-textarea-padding-x: calc(var(--ui-control-padding-inline-3, 16px) - 1px);
+    --ui-textarea-padding-y: 8px;
     --ui-textarea-min-height: 140px;
-  }
-
-  :host([size="lg"]) textarea,
-  :host([size="3"]) textarea {
-    font-size: 15px;
+    --ui-textarea-font-size: var(--ui-control-font-size-3, 16px);
+    --ui-textarea-radius: var(--ui-control-radius-3, var(--ui-radius, 6px));
   }
 
   :host([density="compact"]) {
@@ -242,7 +241,7 @@
 
   :host([validation="error"]) .field {
     border-color: color-mix(in srgb, var(--ui-textarea-danger) 74%, transparent);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-textarea-danger) 22%, transparent);
+    box-shadow: 0 0 0 1px var(--ui-textarea-danger);
   }
 
   :host([validation="success"]) .field {
@@ -308,17 +307,17 @@
       color: CanvasText;
     }
   }
-`;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 C=2147483647;function h(r){if(!r)return null;const t=Number(r);return!Number.isFinite(t)||t<0||t>C?null:Math.trunc(t)}class m extends A.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","aria-label","aria-description","aria-describedby","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","aria-label","aria-description","aria-describedby"]).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=h(this.getAttribute("maxlength")),i=h(this.getAttribute("minlength")),s=b(this.getAttribute("rows"),4),a=this.hasAttribute("disabled"),l=this.hasAttribute("readonly"),o=this.hasAttribute("required"),d=this.getAttribute("name")||"",u=this.getAttribute("resize")||"vertical",f=this.getAttribute("validation"),p=this.getAttribute("color"),n=this.getAttribute("radius");this._textarea.placeholder=t,this._textarea.disabled=a,this._textarea.readOnly=l,this._textarea.required=o,this._textarea.rows=Math.max(1,s),this._textarea.name=d,this._textarea.style.resize=u,e!==null?this._textarea.maxLength=e:this._textarea.removeAttribute("maxlength"),i!==null?this._textarea.minLength=i:this._textarea.removeAttribute("minlength"),f==="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 c=[],v=!!(this.getAttribute("description")||this.querySelector('[slot="description"]')),_=!!(this.getAttribute("data-error")||this.querySelector('[slot="error"]'));v&&c.push(`${this._uid}-description`),_&&c.push(`${this._uid}-error`),(this.hasAttribute("show-count")||h(this.getAttribute("maxlength"))!==null)&&c.push(`${this._uid}-count`);const y=!!(this.getAttribute("label")||this.querySelector('[slot="label"]'));g.syncControlName(this._textarea,this,y?`${this._uid}-label`:null),g.syncControlDescription(this._textarea,this,this._uid,c)}_syncDynamicUi(){const t=this._textarea?.value||this.getAttribute("value")||"",e=h(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,l=parseFloat(i.borderBottomWidth||"0")||0,o=parseFloat(i.paddingTop||"0")||0,d=parseFloat(i.paddingBottom||"0")||0,u=s*e+a+l+o+d;this._textarea.style.height=`${Math.min(t,u)}px`,this._textarea.style.overflowY=t>u?"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>${w}</style>
+`;function x(a){return a.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function b(a,t){const e=Number(a);return Number.isFinite(e)?e:t}const C=2147483647;function d(a){if(!a)return null;const t=Number(a);return!Number.isFinite(t)||t<0||t>C?null:Math.trunc(t)}class v extends A.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","aria-label","aria-description","aria-describedby","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","aria-label","aria-description","aria-describedby"]).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=d(this.getAttribute("maxlength")),i=d(this.getAttribute("minlength")),s=b(this.getAttribute("rows"),4),r=this.hasAttribute("disabled"),l=this.hasAttribute("readonly"),o=this.hasAttribute("required"),h=this.getAttribute("name")||"",u=this.getAttribute("resize")||"vertical",f=this.getAttribute("validation"),p=this.getAttribute("color"),n=this.getAttribute("radius");this._textarea.placeholder=t,this._textarea.disabled=r,this._textarea.readOnly=l,this._textarea.required=o,this._textarea.rows=Math.max(1,s),this._textarea.name=h,this._textarea.style.resize=u,e!==null?this._textarea.maxLength=e:this._textarea.removeAttribute("maxlength"),i!==null?this._textarea.minLength=i:this._textarea.removeAttribute("minlength"),f==="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 c=[],m=!!(this.getAttribute("description")||this.querySelector('[slot="description"]')),_=!!(this.getAttribute("data-error")||this.querySelector('[slot="error"]'));m&&c.push(`${this._uid}-description`),_&&c.push(`${this._uid}-error`),(this.hasAttribute("show-count")||d(this.getAttribute("maxlength"))!==null)&&c.push(`${this._uid}-count`);const y=!!(this.getAttribute("label")||this.querySelector('[slot="label"]'));g.syncControlName(this._textarea,this,y?`${this._uid}-label`:null),g.syncControlDescription(this._textarea,this,this._uid,c)}_syncDynamicUi(){const t=this._textarea?.value||this.getAttribute("value")||"",e=d(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,r=parseFloat(i.borderTopWidth||"0")||0,l=parseFloat(i.borderBottomWidth||"0")||0,o=parseFloat(i.paddingTop||"0")||0,h=parseFloat(i.paddingBottom||"0")||0,u=s*e+r+l+o+h;this._textarea.style.height=`${Math.min(t,u)}px`,this._textarea.style.overflowY=t>u?"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")||"",r=!!(e||i||this.querySelector('[slot="label"]')||this.querySelector('[slot="description"]')),o=this.hasAttribute("clearable")&&!!t&&!this.hasAttribute("disabled")&&!this.hasAttribute("readonly");this.setContent(`
+      <style>${z}</style>
       <div class="shell" part="shell">
-        <div class="meta" part="meta" ${a?"":"hidden"}>
+        <div class="meta" part="meta" ${r?"":"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" ${o?"":"hidden"}>${z}</button>
+          <button type="button" part="clear" class="clear-btn" aria-label="Clear text" ${o?"":"hidden"}>${w}</button>
         </div>
 
         <div class="footer" part="footer">
@@ -326,4 +325,4 @@
           <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),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",m);exports.UITextarea=m;
+    `),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",v);exports.UITextarea=v;

package/dist/textarea.esm.js

@@ -1,22 +1,23 @@
 import { E as _ } from "./ElementBase-BeZT54Hj.mjs";
 import { s as y, a as A } from "./control-name-Bpj7F34X.mjs";
-const z = `
+const w = `
   <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>
-`, w = `
+`, z = `
   :host {
-    --ui-textarea-bg: var(--ui-color-surface, #ffffff);
+    --ui-textarea-bg: var(--base-input-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
     --ui-textarea-text: var(--ui-color-text, #0f172a);
     --ui-textarea-muted: var(--ui-color-muted, #526175);
-    --ui-textarea-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent);
+    --ui-textarea-border: var(--ui-color-line, var(--ui-color-border, #cbd5e1));
     --ui-textarea-focus: var(--ui-color-focus-ring, #2563eb);
     --ui-textarea-accent: var(--ui-color-primary, #2563eb);
     --ui-textarea-danger: var(--ui-color-danger, #dc2626);
     --ui-textarea-success: var(--ui-color-success, #15803d);
-    --ui-textarea-radius: 12px;
-    --ui-textarea-padding-x: 12px;
-    --ui-textarea-padding-y: 10px;
+    --ui-textarea-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    --ui-textarea-padding-x: calc(var(--ui-control-padding-inline-2, 12px) - 1px);
+    --ui-textarea-padding-y: 6px;
+    --ui-textarea-font-size: var(--ui-control-font-size-2, 14px);
     --ui-textarea-min-height: 110px;
     --ui-textarea-shadow: none;
 
@@ -71,10 +72,14 @@ const z = `
   }
 
   .field:focus-within {
-    border-color: color-mix(in srgb, var(--ui-textarea-focus) 72%, transparent);
-    box-shadow:
-      0 0 0 3px color-mix(in srgb, var(--ui-textarea-focus) 22%, transparent),
-      var(--ui-textarea-shadow);
+    border-color: var(--ui-ring-color, var(--ui-textarea-focus));
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-textarea-focus));
+    outline-offset: -1px;
+    box-shadow: var(--ui-textarea-shadow);
+  }
+
+  .field:hover:not(:focus-within) {
+    border-color: var(--ui-color-line-strong, var(--ui-textarea-border));
   }
 
   textarea {
@@ -87,13 +92,13 @@ const z = `
     color: var(--ui-textarea-text);
     resize: vertical;
     outline: none;
-    font: 500 14px/1.45 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    font: 500 var(--ui-textarea-font-size)/1.45 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     padding: var(--ui-textarea-padding-y) var(--ui-textarea-padding-x);
     border-radius: inherit;
   }
 
   textarea::placeholder {
-    color: color-mix(in srgb, var(--ui-textarea-muted) 76%, transparent);
+    color: var(--ui-color-placeholder, color-mix(in srgb, var(--ui-textarea-muted) 90%, transparent));
   }
 
   textarea[readonly] {
@@ -170,26 +175,20 @@ const z = `
 
   :host([size="sm"]),
   :host([size="1"]) {
-    --ui-textarea-padding-x: 10px;
-    --ui-textarea-padding-y: 8px;
+    --ui-textarea-padding-x: calc(var(--ui-control-padding-inline-1, 8px) - 1px);
+    --ui-textarea-padding-y: 4px;
     --ui-textarea-min-height: 84px;
-  }
-
-  :host([size="sm"]) textarea,
-  :host([size="1"]) textarea {
-    font-size: 13px;
+    --ui-textarea-font-size: var(--ui-control-font-size-1, 12px);
+    --ui-textarea-radius: var(--ui-control-radius-1, var(--ui-radius, 6px));
   }
 
   :host([size="lg"]),
   :host([size="3"]) {
-    --ui-textarea-padding-x: 14px;
-    --ui-textarea-padding-y: 12px;
+    --ui-textarea-padding-x: calc(var(--ui-control-padding-inline-3, 16px) - 1px);
+    --ui-textarea-padding-y: 8px;
     --ui-textarea-min-height: 140px;
-  }
-
-  :host([size="lg"]) textarea,
-  :host([size="3"]) textarea {
-    font-size: 15px;
+    --ui-textarea-font-size: var(--ui-control-font-size-3, 16px);
+    --ui-textarea-radius: var(--ui-control-radius-3, var(--ui-radius, 6px));
   }
 
   :host([density="compact"]) {
@@ -244,7 +243,7 @@ const z = `
 
   :host([validation="error"]) .field {
     border-color: color-mix(in srgb, var(--ui-textarea-danger) 74%, transparent);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-textarea-danger) 22%, transparent);
+    box-shadow: 0 0 0 1px var(--ui-textarea-danger);
   }
 
   :host([validation="success"]) .field {
@@ -319,7 +318,7 @@ function b(r, t) {
   return Number.isFinite(e) ? e : t;
 }
 const C = 2147483647;
-function c(r) {
+function d(r) {
   if (!r) return null;
   const t = Number(r);
   return !Number.isFinite(t) || t < 0 || t > C ? null : Math.trunc(t);
@@ -438,15 +437,15 @@ class k extends _ {
   }
   _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"), l = this.hasAttribute("readonly"), o = this.hasAttribute("required"), d = this.getAttribute("name") || "", u = 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 = l, this._textarea.required = o, this._textarea.rows = Math.max(1, s), this._textarea.name = d, this._textarea.style.resize = u, 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 h = [], m = !!(this.getAttribute("description") || this.querySelector('[slot="description"]')), f = !!(this.getAttribute("data-error") || this.querySelector('[slot="error"]'));
-    m && h.push(`${this._uid}-description`), f && h.push(`${this._uid}-error`), (this.hasAttribute("show-count") || c(this.getAttribute("maxlength")) !== null) && h.push(`${this._uid}-count`);
-    const v = !!(this.getAttribute("label") || this.querySelector('[slot="label"]'));
-    y(this._textarea, this, v ? `${this._uid}-label` : null), A(this._textarea, this, this._uid, h);
+    const t = this.getAttribute("placeholder") || "", e = d(this.getAttribute("maxlength")), i = d(this.getAttribute("minlength")), s = b(this.getAttribute("rows"), 4), a = this.hasAttribute("disabled"), l = this.hasAttribute("readonly"), o = this.hasAttribute("required"), h = this.getAttribute("name") || "", u = 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 = l, this._textarea.required = o, this._textarea.rows = Math.max(1, s), this._textarea.name = h, this._textarea.style.resize = u, 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 c = [], v = !!(this.getAttribute("description") || this.querySelector('[slot="description"]')), f = !!(this.getAttribute("data-error") || this.querySelector('[slot="error"]'));
+    v && c.push(`${this._uid}-description`), f && c.push(`${this._uid}-error`), (this.hasAttribute("show-count") || d(this.getAttribute("maxlength")) !== null) && c.push(`${this._uid}-count`);
+    const m = !!(this.getAttribute("label") || this.querySelector('[slot="label"]'));
+    y(this._textarea, this, m ? `${this._uid}-label` : null), A(this._textarea, this, this._uid, c);
   }
   _syncDynamicUi() {
-    const t = this._textarea?.value || this.getAttribute("value") || "", e = c(this.getAttribute("maxlength")), i = this.hasAttribute("clearable");
+    const t = this._textarea?.value || this.getAttribute("value") || "", e = d(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() {
@@ -458,7 +457,7 @@ class k extends _ {
     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, l = parseFloat(i.borderBottomWidth || "0") || 0, o = parseFloat(i.paddingTop || "0") || 0, d = parseFloat(i.paddingBottom || "0") || 0, u = s * e + a + l + o + d;
+      const i = getComputedStyle(this._textarea), s = parseFloat(i.lineHeight || "20") || 20, a = parseFloat(i.borderTopWidth || "0") || 0, l = parseFloat(i.borderBottomWidth || "0") || 0, o = parseFloat(i.paddingTop || "0") || 0, h = parseFloat(i.paddingBottom || "0") || 0, u = s * e + a + l + o + h;
       this._textarea.style.height = `${Math.min(t, u)}px`, this._textarea.style.overflowY = t > u ? "auto" : "hidden";
       return;
     }
@@ -495,7 +494,7 @@ class k extends _ {
   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>${w}</style>
+      <style>${z}</style>
       <div class="shell" part="shell">
         <div class="meta" part="meta" ${a ? "" : "hidden"}>
           <label id="${this._uid}-label" class="label" part="label"><slot name="label">${x(e)}</slot></label>
@@ -504,7 +503,7 @@ class k extends _ {
 
         <div class="field" part="field">
           <textarea part="textarea"></textarea>
-          <button type="button" part="clear" class="clear-btn" aria-label="Clear text" ${o ? "" : "hidden"}>${z}</button>
+          <button type="button" part="clear" class="clear-btn" aria-label="Clear text" ${o ? "" : "hidden"}>${w}</button>
         </div>
 
         <div class="footer" part="footer">