@editora/ui-core 0.1.19 → 0.1.21

package/dist/inline-edit.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("./ElementBase-1b301e7f.js"),g=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("./ElementBase-EV6mVBUV.js"),b=`
   :host {
     --ui-inline-edit-bg: transparent;
     --ui-inline-edit-border: 1px dashed transparent;
@@ -100,19 +100,19 @@
     gap: 8px;
     justify-content: flex-end;
   }
-`;function o(u){return u.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}class v extends p.ElementBase{constructor(){super(...arguments),this._draft="",this._formUnregister=null,this._lastFocusTarget=null}static get observedAttributes(){return["value","placeholder","editing","multiline","disabled","readonly","name"]}get value(){return this.getAttribute("value")||""}set value(t){t?this.setAttribute("value",t):this.removeAttribute("value")}startEditing(){this.hasAttribute("disabled")||this.hasAttribute("readonly")||(this._lastFocusTarget=document.activeElement||this,this._draft=this.value,this.setAttribute("editing",""),queueMicrotask(()=>{var n;const t=this.root.querySelector(".field");t==null||t.focus(),(n=t==null?void 0:t.select)==null||n.call(t)}),this.dispatchEvent(new CustomEvent("editing-change",{detail:{editing:!0},bubbles:!0,composed:!0})))}cancelEditing(){this.removeAttribute("editing"),this._draft=this.value,this.dispatchEvent(new CustomEvent("cancel",{detail:{value:this.value},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("editing-change",{detail:{editing:!1},bubbles:!0,composed:!0})),this._restoreFocus()}saveEditing(){if(this.hasAttribute("disabled")||this.hasAttribute("readonly"))return;if(this.hasAttribute("required")&&!this._draft.trim()){this.setAttribute("invalid","");return}const t=this.value;this._draft?this.setAttribute("value",this._draft):this.removeAttribute("value"),this.removeAttribute("invalid"),this.removeAttribute("editing"),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value,previousValue:t,source:"save"},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("save",{detail:{value:this.value,previousValue:t},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("editing-change",{detail:{editing:!1},bubbles:!0,composed:!0})),this._restoreFocus()}connectedCallback(){super.connectedCallback(),this._draft=this.value,this._registerWithForm()}disconnectedCallback(){this._formUnregister&&this._formUnregister(),super.disconnectedCallback()}attributeChangedCallback(t,n,e){n!==e&&(t==="name"&&this.isConnected&&this._registerWithForm(),t==="value"&&!this.hasAttribute("editing")&&(this._draft=e||""),this.isConnected&&this.requestRender())}render(){var c,h,b;const t=this.hasAttribute("editing")?this._draft:this.value,n=this.getAttribute("placeholder")||"Add value",e=this.hasAttribute("multiline"),l=this.hasAttribute("editing"),a=!this.value,s=this.hasAttribute("disabled")||this.hasAttribute("readonly");this.setContent(`
-      <style>${g}</style>
+`;function o(d){return d.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}class c extends h.ElementBase{constructor(){super(...arguments),this._draft="",this._formUnregister=null,this._lastFocusTarget=null}static get observedAttributes(){return["value","placeholder","editing","multiline","disabled","readonly","name"]}get value(){return this.getAttribute("value")||""}set value(e){e?this.setAttribute("value",e):this.removeAttribute("value")}startEditing(){this.hasAttribute("disabled")||this.hasAttribute("readonly")||(this._lastFocusTarget=document.activeElement||this,this._draft=this.value,this.setAttribute("editing",""),queueMicrotask(()=>{const e=this.root.querySelector(".field");e?.focus(),e?.select?.()}),this.dispatchEvent(new CustomEvent("editing-change",{detail:{editing:!0},bubbles:!0,composed:!0})))}cancelEditing(){this.removeAttribute("editing"),this._draft=this.value,this.dispatchEvent(new CustomEvent("cancel",{detail:{value:this.value},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("editing-change",{detail:{editing:!1},bubbles:!0,composed:!0})),this._restoreFocus()}saveEditing(){if(this.hasAttribute("disabled")||this.hasAttribute("readonly"))return;if(this.hasAttribute("required")&&!this._draft.trim()){this.setAttribute("invalid","");return}const e=this.value;this._draft?this.setAttribute("value",this._draft):this.removeAttribute("value"),this.removeAttribute("invalid"),this.removeAttribute("editing"),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value,previousValue:e,source:"save"},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("save",{detail:{value:this.value,previousValue:e},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("editing-change",{detail:{editing:!1},bubbles:!0,composed:!0})),this._restoreFocus()}connectedCallback(){super.connectedCallback(),this._draft=this.value,this._registerWithForm()}disconnectedCallback(){this._formUnregister&&this._formUnregister(),super.disconnectedCallback()}attributeChangedCallback(e,a,s){a!==s&&(e==="name"&&this.isConnected&&this._registerWithForm(),e==="value"&&!this.hasAttribute("editing")&&(this._draft=s||""),this.isConnected&&this.requestRender())}render(){const e=this.hasAttribute("editing")?this._draft:this.value,a=this.getAttribute("placeholder")||"Add value",s=this.hasAttribute("multiline"),r=this.hasAttribute("editing"),n=!this.value,t=this.hasAttribute("disabled")||this.hasAttribute("readonly");this.setContent(`
+      <style>${b}</style>
       <div class="root">
-        <div class="display"${l?" hidden":""}>
-          <div class="value" data-empty="${a}">${o(a?n:this.value)}</div>
-          <button class="edit-btn" type="button"${s?" disabled":""}>Edit</button>
+        <div class="display"${r?" hidden":""}>
+          <div class="value" data-empty="${n}">${o(n?a:this.value)}</div>
+          <button class="edit-btn" type="button"${t?" disabled":""}>Edit</button>
         </div>
-        <div class="editor"${l?"":" hidden"}>
-          ${e?`<textarea class="field" rows="4"${s?" disabled":""}>${o(t)}</textarea>`:`<input class="field" type="text" value="${o(t)}"${s?" disabled":""} />`}
+        <div class="editor"${r?"":" hidden"}>
+          ${s?`<textarea class="field" rows="4"${t?" disabled":""}>${o(e)}</textarea>`:`<input class="field" type="text" value="${o(e)}"${t?" disabled":""} />`}
           <div class="actions">
-            <button class="cancel-btn" type="button"${s?" disabled":""}>Cancel</button>
-            <button class="save-btn" type="button"${s?" disabled":""}>Save</button>
+            <button class="cancel-btn" type="button"${t?" disabled":""}>Cancel</button>
+            <button class="save-btn" type="button"${t?" disabled":""}>Save</button>
           </div>
         </div>
       </div>
-    `);const i=this.root.querySelector(".field");i==null||i.addEventListener("input",d=>{this._draft=d.target.value}),i==null||i.addEventListener("keydown",d=>{const r=d;r.key==="Escape"&&(r.preventDefault(),this.cancelEditing()),!e&&r.key==="Enter"&&(r.preventDefault(),this.saveEditing()),(r.metaKey||r.ctrlKey)&&r.key==="Enter"&&(r.preventDefault(),this.saveEditing())}),(c=this.root.querySelector(".edit-btn"))==null||c.addEventListener("click",()=>this.startEditing()),(h=this.root.querySelector(".cancel-btn"))==null||h.addEventListener("click",()=>this.cancelEditing()),(b=this.root.querySelector(".save-btn"))==null||b.addEventListener("click",()=>this.saveEditing())}_registerWithForm(){var t;this._formUnregister&&(this._formUnregister(),this._formUnregister=null);try{const e=this.getRootNode().host,a=((t=e==null?void 0:e.closest)==null?void 0:t.call(e,"ui-form"))||null||this.closest("ui-form"),s=this.getAttribute("name");a&&typeof a.registerField=="function"&&s&&(this._formUnregister=a.registerField(s,{name:s,getValue:()=>this.value,setValue:i=>{i==null||i===""?this.removeAttribute("value"):this.setAttribute("value",String(i))}}))}catch{}}_restoreFocus(){const t=this._lastFocusTarget&&this._lastFocusTarget.isConnected?this._lastFocusTarget:this.root.querySelector(".edit-btn");t&&(queueMicrotask(()=>{try{t.focus({preventScroll:!0})}catch{t.focus()}}),this._lastFocusTarget=null)}}typeof customElements<"u"&&!customElements.get("ui-inline-edit")&&customElements.define("ui-inline-edit",v);exports.UIInlineEdit=v;
+    `);const u=this.root.querySelector(".field");u?.addEventListener("input",l=>{this._draft=l.target.value}),u?.addEventListener("keydown",l=>{const i=l;i.key==="Escape"&&(i.preventDefault(),this.cancelEditing()),!s&&i.key==="Enter"&&(i.preventDefault(),this.saveEditing()),(i.metaKey||i.ctrlKey)&&i.key==="Enter"&&(i.preventDefault(),this.saveEditing())}),this.root.querySelector(".edit-btn")?.addEventListener("click",()=>this.startEditing()),this.root.querySelector(".cancel-btn")?.addEventListener("click",()=>this.cancelEditing()),this.root.querySelector(".save-btn")?.addEventListener("click",()=>this.saveEditing())}_registerWithForm(){this._formUnregister&&(this._formUnregister(),this._formUnregister=null);try{const r=this.getRootNode().host?.closest?.("ui-form")||null||this.closest("ui-form"),n=this.getAttribute("name");r&&typeof r.registerField=="function"&&n&&(this._formUnregister=r.registerField(n,{name:n,getValue:()=>this.value,setValue:t=>{t==null||t===""?this.removeAttribute("value"):this.setAttribute("value",String(t))}}))}catch{}}_restoreFocus(){const e=this._lastFocusTarget&&this._lastFocusTarget.isConnected?this._lastFocusTarget:this.root.querySelector(".edit-btn");e&&(queueMicrotask(()=>{try{e.focus({preventScroll:!0})}catch{e.focus()}}),this._lastFocusTarget=null)}}typeof customElements<"u"&&!customElements.get("ui-inline-edit")&&customElements.define("ui-inline-edit",c);exports.UIInlineEdit=c;

package/dist/inline-edit.esm.js

@@ -1,5 +1,5 @@
-import { E as v } from "./ElementBase-909688f3.mjs";
-const p = `
+import { E as c } from "./ElementBase-YlTLMsGk.mjs";
+const h = `
   :host {
     --ui-inline-edit-bg: transparent;
     --ui-inline-edit-border: 1px dashed transparent;
@@ -102,10 +102,10 @@ const p = `
     justify-content: flex-end;
   }
 `;
-function o(u) {
-  return u.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+function o(d) {
+  return d.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-class g extends v {
+class b extends c {
   constructor() {
     super(...arguments), this._draft = "", this._formUnregister = null, this._lastFocusTarget = null;
   }
@@ -120,17 +120,15 @@ class g extends v {
   }
   startEditing() {
     this.hasAttribute("disabled") || this.hasAttribute("readonly") || (this._lastFocusTarget = document.activeElement || this, this._draft = this.value, this.setAttribute("editing", ""), queueMicrotask(() => {
-      var n;
       const t = this.root.querySelector(".field");
-      t == null || t.focus(), (n = t == null ? void 0 : t.select) == null || n.call(t);
+      t?.focus(), t?.select?.();
     }), this.dispatchEvent(new CustomEvent("editing-change", { detail: { editing: !0 }, bubbles: !0, composed: !0 })));
   }
   cancelEditing() {
     this.removeAttribute("editing"), this._draft = this.value, this.dispatchEvent(new CustomEvent("cancel", { detail: { value: this.value }, bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("editing-change", { detail: { editing: !1 }, bubbles: !0, composed: !0 })), this._restoreFocus();
   }
   saveEditing() {
-    if (this.hasAttribute("disabled") || this.hasAttribute("readonly"))
-      return;
+    if (this.hasAttribute("disabled") || this.hasAttribute("readonly")) return;
     if (this.hasAttribute("required") && !this._draft.trim()) {
       this.setAttribute("invalid", "");
       return;
@@ -144,46 +142,44 @@ class g extends v {
   disconnectedCallback() {
     this._formUnregister && this._formUnregister(), super.disconnectedCallback();
   }
-  attributeChangedCallback(t, n, e) {
-    n !== e && (t === "name" && this.isConnected && this._registerWithForm(), t === "value" && !this.hasAttribute("editing") && (this._draft = e || ""), this.isConnected && this.requestRender());
+  attributeChangedCallback(t, a, s) {
+    a !== s && (t === "name" && this.isConnected && this._registerWithForm(), t === "value" && !this.hasAttribute("editing") && (this._draft = s || ""), this.isConnected && this.requestRender());
   }
   render() {
-    var c, h, b;
-    const t = this.hasAttribute("editing") ? this._draft : this.value, n = this.getAttribute("placeholder") || "Add value", e = this.hasAttribute("multiline"), l = this.hasAttribute("editing"), a = !this.value, s = this.hasAttribute("disabled") || this.hasAttribute("readonly");
+    const t = this.hasAttribute("editing") ? this._draft : this.value, a = this.getAttribute("placeholder") || "Add value", s = this.hasAttribute("multiline"), r = this.hasAttribute("editing"), n = !this.value, e = this.hasAttribute("disabled") || this.hasAttribute("readonly");
     this.setContent(`
-      <style>${p}</style>
+      <style>${h}</style>
       <div class="root">
-        <div class="display"${l ? " hidden" : ""}>
-          <div class="value" data-empty="${a}">${o(a ? n : this.value)}</div>
-          <button class="edit-btn" type="button"${s ? " disabled" : ""}>Edit</button>
+        <div class="display"${r ? " hidden" : ""}>
+          <div class="value" data-empty="${n}">${o(n ? a : this.value)}</div>
+          <button class="edit-btn" type="button"${e ? " disabled" : ""}>Edit</button>
         </div>
-        <div class="editor"${l ? "" : " hidden"}>
-          ${e ? `<textarea class="field" rows="4"${s ? " disabled" : ""}>${o(t)}</textarea>` : `<input class="field" type="text" value="${o(t)}"${s ? " disabled" : ""} />`}
+        <div class="editor"${r ? "" : " hidden"}>
+          ${s ? `<textarea class="field" rows="4"${e ? " disabled" : ""}>${o(t)}</textarea>` : `<input class="field" type="text" value="${o(t)}"${e ? " disabled" : ""} />`}
           <div class="actions">
-            <button class="cancel-btn" type="button"${s ? " disabled" : ""}>Cancel</button>
-            <button class="save-btn" type="button"${s ? " disabled" : ""}>Save</button>
+            <button class="cancel-btn" type="button"${e ? " disabled" : ""}>Cancel</button>
+            <button class="save-btn" type="button"${e ? " disabled" : ""}>Save</button>
           </div>
         </div>
       </div>
     `);
-    const i = this.root.querySelector(".field");
-    i == null || i.addEventListener("input", (d) => {
-      this._draft = d.target.value;
-    }), i == null || i.addEventListener("keydown", (d) => {
-      const r = d;
-      r.key === "Escape" && (r.preventDefault(), this.cancelEditing()), !e && r.key === "Enter" && (r.preventDefault(), this.saveEditing()), (r.metaKey || r.ctrlKey) && r.key === "Enter" && (r.preventDefault(), this.saveEditing());
-    }), (c = this.root.querySelector(".edit-btn")) == null || c.addEventListener("click", () => this.startEditing()), (h = this.root.querySelector(".cancel-btn")) == null || h.addEventListener("click", () => this.cancelEditing()), (b = this.root.querySelector(".save-btn")) == null || b.addEventListener("click", () => this.saveEditing());
+    const u = this.root.querySelector(".field");
+    u?.addEventListener("input", (l) => {
+      this._draft = l.target.value;
+    }), u?.addEventListener("keydown", (l) => {
+      const i = l;
+      i.key === "Escape" && (i.preventDefault(), this.cancelEditing()), !s && i.key === "Enter" && (i.preventDefault(), this.saveEditing()), (i.metaKey || i.ctrlKey) && i.key === "Enter" && (i.preventDefault(), this.saveEditing());
+    }), this.root.querySelector(".edit-btn")?.addEventListener("click", () => this.startEditing()), this.root.querySelector(".cancel-btn")?.addEventListener("click", () => this.cancelEditing()), this.root.querySelector(".save-btn")?.addEventListener("click", () => this.saveEditing());
   }
   _registerWithForm() {
-    var t;
     this._formUnregister && (this._formUnregister(), this._formUnregister = null);
     try {
-      const e = this.getRootNode().host, a = ((t = e == null ? void 0 : e.closest) == null ? void 0 : t.call(e, "ui-form")) || null || this.closest("ui-form"), s = this.getAttribute("name");
-      a && typeof a.registerField == "function" && s && (this._formUnregister = a.registerField(s, {
-        name: s,
+      const r = this.getRootNode().host?.closest?.("ui-form") || null || this.closest("ui-form"), n = this.getAttribute("name");
+      r && typeof r.registerField == "function" && n && (this._formUnregister = r.registerField(n, {
+        name: n,
         getValue: () => this.value,
-        setValue: (i) => {
-          i == null || i === "" ? this.removeAttribute("value") : this.setAttribute("value", String(i));
+        setValue: (e) => {
+          e == null || e === "" ? this.removeAttribute("value") : this.setAttribute("value", String(e));
         }
       }));
     } catch {
@@ -200,7 +196,7 @@ class g extends v {
     }), this._lastFocusTarget = null);
   }
 }
-typeof customElements < "u" && !customElements.get("ui-inline-edit") && customElements.define("ui-inline-edit", g);
+typeof customElements < "u" && !customElements.get("ui-inline-edit") && customElements.define("ui-inline-edit", b);
 export {
-  g as UIInlineEdit
+  b as UIInlineEdit
 };

package/dist/input.cjs.js

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const T=require("./ElementBase-1b301e7f.js"),N=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const E=require("./ElementBase-EV6mVBUV.js"),$=`
   <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>
-`,L=`
+`,q=`
   :host {
     --ui-input-padding: var(--ui-padding, 10px 12px);
     --ui-input-border-color: var(--ui-color-border, var(--ui-border-color, #cbd5e1));
@@ -481,8 +481,8 @@
       box-shadow: none;
     }
   }
-`;function r(a){return a.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function z(a){if(!a)return!1;const t=a.assignedNodes({flatten:!0});return t.length?t.some(e=>{var i;return e.nodeType===Node.TEXT_NODE?!!((i=e.textContent)!=null&&i.trim()):e.nodeType===Node.ELEMENT_NODE}):!1}function y(a,t){const e=a.getAttribute(t);if(e==null)return!1;const i=String(e).trim().toLowerCase();return i!=="false"&&i!=="0"}function I(a){return a==="none"||a==="large"||a==="full"}class q extends T.ElementBase{constructor(){super(),this._input=null,this._clearBtn=null,this._debounceTimer=null,this._formUnregister=null,this._uid=Math.random().toString(36).slice(2,9),this._autofocusApplied=!1,this._onNativeInput=this._onNativeInput.bind(this),this._onNativeChange=this._onNativeChange.bind(this),this._onClearClick=this._onClearClick.bind(this),this._onSlotChange=this._onSlotChange.bind(this)}static get observedAttributes(){return["value","placeholder","disabled","clearable","size","validation","debounce","maxlength","minlength","readonly","autofocus","counter","floating-label","headless","type","name","required","pattern","inputmode","autocomplete","min","max","step","spellcheck","variant","tone","density","shape","color","radius","label","description","data-error"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("slotchange",this._onSlotChange),this._registerWithForm()}disconnectedCallback(){this.root.removeEventListener("slotchange",this._onSlotChange),this._detachListeners(),this._debounceTimer&&(clearTimeout(this._debounceTimer),this._debounceTimer=null),this._formUnregister&&(this._formUnregister(),this._formUnregister=null),this._autofocusApplied=!1,super.disconnectedCallback()}_syncHostTokens(){const t=this.getAttribute("color");t?this.style.setProperty("--ui-input-accent",t):this.style.removeProperty("--ui-input-accent");const e=this.getAttribute("radius")||"";e&&!I(e)?this.style.setProperty("--ui-input-border-radius",e):this.style.removeProperty("--ui-input-border-radius")}_syncControlAttrs(){if(this._syncHostTokens(),!this._input)return;const t=this._input,e=this.getAttribute("type")||"text",i=this.getAttribute("placeholder")||"",u=this.getAttribute("name")||"",n=this.getAttribute("pattern")||"",s=this.getAttribute("inputmode")||"",o=this.getAttribute("autocomplete")||"",d=this.getAttribute("min")||"",l=this.getAttribute("max")||"",c=this.getAttribute("step")||"",p=this.getAttribute("spellcheck")||"",h=this.getAttribute("maxlength")||"",b=this.getAttribute("minlength")||"",f=y(this,"disabled"),g=this.hasAttribute("required"),m=this.hasAttribute("readonly");try{t.type=e}catch{t.type="text"}t.placeholder=i,t.disabled=f,t.required=g,t.readOnly=m,t.name=u,n?t.setAttribute("pattern",n):t.removeAttribute("pattern"),s?t.setAttribute("inputmode",s):t.removeAttribute("inputmode"),o?t.setAttribute("autocomplete",o):t.removeAttribute("autocomplete"),d?t.setAttribute("min",d):t.removeAttribute("min"),l?t.setAttribute("max",l):t.removeAttribute("max"),c?t.setAttribute("step",c):t.removeAttribute("step"),p?t.setAttribute("spellcheck",p):t.removeAttribute("spellcheck"),h&&Number.isFinite(Number(h))?t.setAttribute("maxlength",h):t.removeAttribute("maxlength"),b&&Number.isFinite(Number(b))?t.setAttribute("minlength",b):t.removeAttribute("minlength")}attributeChangedCallback(t,e,i){if(e===i)return;if(t==="value"){this._syncInputValue(i||"");return}if(t==="name"&&this._registerWithForm(),t==="autofocus"&&!this.hasAttribute("autofocus")&&(this._autofocusApplied=!1),new Set(["placeholder","disabled","clearable","size","validation","debounce","maxlength","minlength","readonly","autofocus","counter","headless","type","name","required","pattern","inputmode","autocomplete","min","max","step","spellcheck","variant","tone","density","shape","color","radius"]).has(t)){this._syncControlAttrs(),this._syncInputValue(this.value),this._syncDerivedState(),t==="autofocus"&&this.hasAttribute("autofocus")&&!this._autofocusApplied&&(this._autofocusApplied=!0,queueMicrotask(()=>{var n,s;if(this.isConnected)try{(n=this._input)==null||n.focus({preventScroll:!0})}catch{(s=this._input)==null||s.focus()}}));return}this.isConnected&&this.requestRender()}get value(){return this.getAttribute("value")||""}set value(t){this.setAttribute("value",t||"")}focus(t){if(this._input){this._input.focus(t);return}super.focus(t)}blur(){var t;(t=this._input)==null||t.blur()}select(){var t;(t=this._input)==null||t.select()}_emitValueEvent(t,e){this.dispatchEvent(new CustomEvent(t,{detail:{value:e},bubbles:!0,composed:!0}))}_registerWithForm(){var t;this._formUnregister&&(this._formUnregister(),this._formUnregister=null);try{const i=this.getRootNode().host,n=((t=i==null?void 0:i.closest)==null?void 0:t.call(i,"ui-form"))||null||this.closest("ui-form"),s=this.getAttribute("name");n&&typeof n.registerField=="function"&&s&&(this._formUnregister=n.registerField(s,{name:s,getValue:()=>this.value,setValue:o=>{this.value=String(o??"")},validate:async()=>this._input?{valid:this._input.checkValidity(),message:this._input.validationMessage||void 0}:{valid:!0},setError:o=>{o?(this.setAttribute("validation","error"),this.setAttribute("data-error",o)):(this.removeAttribute("validation"),this.removeAttribute("data-error"))}}))}catch{}}_detachListeners(){this._input&&(this._input.removeEventListener("input",this._onNativeInput),this._input.removeEventListener("change",this._onNativeChange)),this._clearBtn&&this._clearBtn.removeEventListener("click",this._onClearClick),this._clearBtn=null}_syncInputValue(t){this._input&&this._input.value!==t&&(this._input.value=t),this._clearBtn&&(y(this,"clearable")&&t.length>0&&!y(this,"disabled")&&!this.hasAttribute("readonly")?this._clearBtn.removeAttribute("hidden"):this._clearBtn.setAttribute("hidden",""));const e=this.root.querySelector(".counter");if(e&&this.hasAttribute("counter")){const u=this.getAttribute("maxlength"),n=u?`${t.length}/${u}`:String(t.length);e.textContent=n}const i=this.root.querySelector(".shell");i&&i.setAttribute("data-has-value",t?"true":"false")}_onSlotChange(){this._syncDerivedState()}_syncDerivedState(){const t=this.root.querySelector('slot[name="label"]'),e=this.root.querySelector('slot[name="description"]'),i=this.root.querySelector('slot[name="error"]'),u=this.root.querySelector('slot[name="prefix"]'),n=this.root.querySelector('slot[name="suffix"]'),s=(this.getAttribute("label")||"").trim(),o=(this.getAttribute("description")||"").trim(),d=(this.getAttribute("data-error")||"").trim(),l=!!s||z(t),c=!!o||z(e),p=!!d||z(i),h=z(u),b=z(n),f=this.root.querySelector(".label"),g=this.root.querySelector(".description"),m=this.root.querySelector(".prefix"),v=this.root.querySelector(".suffix"),x=this.root.querySelector(".meta"),C=this.root.querySelector(".footer"),_=this.root.querySelector(".error"),w=this.root.querySelector(".counter");f&&(l?f.removeAttribute("hidden"):f.setAttribute("hidden","")),g&&(c?g.removeAttribute("hidden"):g.setAttribute("hidden","")),m&&(h?m.removeAttribute("hidden"):m.setAttribute("hidden","")),v&&(b?v.removeAttribute("hidden"):v.setAttribute("hidden","")),x&&(l||c?x.removeAttribute("hidden"):x.setAttribute("hidden",""));const k=this.hasAttribute("counter");if(w&&(k?w.removeAttribute("hidden"):w.setAttribute("hidden","")),_&&(p?_.removeAttribute("hidden"):_.setAttribute("hidden","")),C&&(p||k?C.removeAttribute("hidden"):C.setAttribute("hidden","")),this._input){l?this._input.setAttribute("aria-labelledby",`${this._uid}-label`):this._input.removeAttribute("aria-labelledby");const A=[];c&&A.push(`${this._uid}-description`),p&&A.push(`${this._uid}-error`),A.length?this._input.setAttribute("aria-describedby",A.join(" ")):this._input.removeAttribute("aria-describedby"),this.getAttribute("validation")==="error"||!!d?this._input.setAttribute("aria-invalid","true"):this._input.removeAttribute("aria-invalid"),this.hasAttribute("required")?this._input.setAttribute("aria-required","true"):this._input.removeAttribute("aria-required")}}_onNativeInput(t){const e=t.target.value;this.getAttribute("value")!==e?this.setAttribute("value",e):this._syncInputValue(e),this._emitValueEvent("input",e);const i=Number(this.getAttribute("debounce")||0);i>0?(this._debounceTimer&&clearTimeout(this._debounceTimer),this._debounceTimer=setTimeout(()=>{this._emitValueEvent("debounced-input",e),this._debounceTimer=null},i)):this._emitValueEvent("debounced-input",e)}_onNativeChange(t){const e=t.target.value;this._emitValueEvent("change",e)}_onClearClick(t){if(t.preventDefault(),!(y(this,"disabled")||this.hasAttribute("readonly"))&&this._input){this.value="",this._input.value="",this._input.dispatchEvent(new Event("input",{bubbles:!0})),this._input.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new CustomEvent("clear",{bubbles:!0,composed:!0}));try{this._input.focus({preventScroll:!0})}catch{this._input.focus()}}}render(){var S;const t=this.getAttribute("value")||"",e=this.getAttribute("placeholder")||"",i=y(this,"disabled"),u=y(this,"clearable"),n=this.getAttribute("type")||"text",s=this.getAttribute("name")||"",o=this.hasAttribute("required"),d=this.getAttribute("pattern")||"",l=this.getAttribute("inputmode")||"",c=this.getAttribute("autocomplete")||"",p=this.getAttribute("min")||"",h=this.getAttribute("max")||"",b=this.getAttribute("step")||"",f=this.getAttribute("spellcheck")||"",g=this.getAttribute("maxlength")||"",m=this.getAttribute("minlength")||"",v=this.hasAttribute("readonly"),x=this.getAttribute("label")||"",C=this.getAttribute("description")||"",_=this.getAttribute("data-error")||"",w=this.getAttribute("validation")||"",k=this.hasAttribute("floating-label"),A=o?'<span class="required" aria-hidden="true">*</span>':"";this._syncHostTokens(),this.setContent(`
-      <style>${L}</style>
+`;function r(a){return a.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function z(a){if(!a)return!1;const t=a.assignedNodes({flatten:!0});return t.length?t.some(e=>e.nodeType===Node.TEXT_NODE?!!e.textContent?.trim():e.nodeType===Node.ELEMENT_NODE):!1}function y(a,t){const e=a.getAttribute(t);if(e==null)return!1;const i=String(e).trim().toLowerCase();return i!=="false"&&i!=="0"}function T(a){return a==="none"||a==="large"||a==="full"}class S extends E.ElementBase{constructor(){super(),this._input=null,this._clearBtn=null,this._debounceTimer=null,this._formUnregister=null,this._uid=Math.random().toString(36).slice(2,9),this._autofocusApplied=!1,this._onNativeInput=this._onNativeInput.bind(this),this._onNativeChange=this._onNativeChange.bind(this),this._onClearClick=this._onClearClick.bind(this),this._onSlotChange=this._onSlotChange.bind(this)}static get observedAttributes(){return["value","placeholder","disabled","clearable","size","validation","debounce","maxlength","minlength","readonly","autofocus","counter","floating-label","headless","type","name","required","pattern","inputmode","autocomplete","min","max","step","spellcheck","variant","tone","density","shape","color","radius","label","description","data-error"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("slotchange",this._onSlotChange),this._registerWithForm()}disconnectedCallback(){this.root.removeEventListener("slotchange",this._onSlotChange),this._detachListeners(),this._debounceTimer&&(clearTimeout(this._debounceTimer),this._debounceTimer=null),this._formUnregister&&(this._formUnregister(),this._formUnregister=null),this._autofocusApplied=!1,super.disconnectedCallback()}_syncHostTokens(){const t=this.getAttribute("color");t?this.style.setProperty("--ui-input-accent",t):this.style.removeProperty("--ui-input-accent");const e=this.getAttribute("radius")||"";e&&!T(e)?this.style.setProperty("--ui-input-border-radius",e):this.style.removeProperty("--ui-input-border-radius")}_syncControlAttrs(){if(this._syncHostTokens(),!this._input)return;const t=this._input,e=this.getAttribute("type")||"text",i=this.getAttribute("placeholder")||"",n=this.getAttribute("name")||"",o=this.getAttribute("pattern")||"",s=this.getAttribute("inputmode")||"",m=this.getAttribute("autocomplete")||"",p=this.getAttribute("min")||"",u=this.getAttribute("max")||"",l=this.getAttribute("step")||"",c=this.getAttribute("spellcheck")||"",d=this.getAttribute("maxlength")||"",h=this.getAttribute("minlength")||"",b=y(this,"disabled"),f=this.hasAttribute("required"),g=this.hasAttribute("readonly");try{t.type=e}catch{t.type="text"}t.placeholder=i,t.disabled=b,t.required=f,t.readOnly=g,t.name=n,o?t.setAttribute("pattern",o):t.removeAttribute("pattern"),s?t.setAttribute("inputmode",s):t.removeAttribute("inputmode"),m?t.setAttribute("autocomplete",m):t.removeAttribute("autocomplete"),p?t.setAttribute("min",p):t.removeAttribute("min"),u?t.setAttribute("max",u):t.removeAttribute("max"),l?t.setAttribute("step",l):t.removeAttribute("step"),c?t.setAttribute("spellcheck",c):t.removeAttribute("spellcheck"),d&&Number.isFinite(Number(d))?t.setAttribute("maxlength",d):t.removeAttribute("maxlength"),h&&Number.isFinite(Number(h))?t.setAttribute("minlength",h):t.removeAttribute("minlength")}attributeChangedCallback(t,e,i){if(e===i)return;if(t==="value"){this._syncInputValue(i||"");return}if(t==="name"&&this._registerWithForm(),t==="autofocus"&&!this.hasAttribute("autofocus")&&(this._autofocusApplied=!1),new Set(["placeholder","disabled","clearable","size","validation","debounce","maxlength","minlength","readonly","autofocus","counter","headless","type","name","required","pattern","inputmode","autocomplete","min","max","step","spellcheck","variant","tone","density","shape","color","radius"]).has(t)){this._syncControlAttrs(),this._syncInputValue(this.value),this._syncDerivedState(),t==="autofocus"&&this.hasAttribute("autofocus")&&!this._autofocusApplied&&(this._autofocusApplied=!0,queueMicrotask(()=>{if(this.isConnected)try{this._input?.focus({preventScroll:!0})}catch{this._input?.focus()}}));return}this.isConnected&&this.requestRender()}get value(){return this.getAttribute("value")||""}set value(t){this.setAttribute("value",t||"")}focus(t){if(this._input){this._input.focus(t);return}super.focus(t)}blur(){this._input?.blur()}select(){this._input?.select()}_emitValueEvent(t,e){this.dispatchEvent(new CustomEvent(t,{detail:{value:e},bubbles:!0,composed:!0}))}_registerWithForm(){this._formUnregister&&(this._formUnregister(),this._formUnregister=null);try{const n=this.getRootNode().host?.closest?.("ui-form")||null||this.closest("ui-form"),o=this.getAttribute("name");n&&typeof n.registerField=="function"&&o&&(this._formUnregister=n.registerField(o,{name:o,getValue:()=>this.value,setValue:s=>{this.value=String(s??"")},validate:async()=>this._input?{valid:this._input.checkValidity(),message:this._input.validationMessage||void 0}:{valid:!0},setError:s=>{s?(this.setAttribute("validation","error"),this.setAttribute("data-error",s)):(this.removeAttribute("validation"),this.removeAttribute("data-error"))}}))}catch{}}_detachListeners(){this._input&&(this._input.removeEventListener("input",this._onNativeInput),this._input.removeEventListener("change",this._onNativeChange)),this._clearBtn&&this._clearBtn.removeEventListener("click",this._onClearClick),this._clearBtn=null}_syncInputValue(t){this._input&&this._input.value!==t&&(this._input.value=t),this._clearBtn&&(y(this,"clearable")&&t.length>0&&!y(this,"disabled")&&!this.hasAttribute("readonly")?this._clearBtn.removeAttribute("hidden"):this._clearBtn.setAttribute("hidden",""));const e=this.root.querySelector(".counter");if(e&&this.hasAttribute("counter")){const n=this.getAttribute("maxlength"),o=n?`${t.length}/${n}`:String(t.length);e.textContent=o}const i=this.root.querySelector(".shell");i&&i.setAttribute("data-has-value",t?"true":"false")}_onSlotChange(){this._syncDerivedState()}_syncDerivedState(){const t=this.root.querySelector('slot[name="label"]'),e=this.root.querySelector('slot[name="description"]'),i=this.root.querySelector('slot[name="error"]'),n=this.root.querySelector('slot[name="prefix"]'),o=this.root.querySelector('slot[name="suffix"]'),s=(this.getAttribute("label")||"").trim(),m=(this.getAttribute("description")||"").trim(),p=(this.getAttribute("data-error")||"").trim(),u=!!s||z(t),l=!!m||z(e),c=!!p||z(i),d=z(n),h=z(o),b=this.root.querySelector(".label"),f=this.root.querySelector(".description"),g=this.root.querySelector(".prefix"),v=this.root.querySelector(".suffix"),x=this.root.querySelector(".meta"),C=this.root.querySelector(".footer"),_=this.root.querySelector(".error"),w=this.root.querySelector(".counter");b&&(u?b.removeAttribute("hidden"):b.setAttribute("hidden","")),f&&(l?f.removeAttribute("hidden"):f.setAttribute("hidden","")),g&&(d?g.removeAttribute("hidden"):g.setAttribute("hidden","")),v&&(h?v.removeAttribute("hidden"):v.setAttribute("hidden","")),x&&(u||l?x.removeAttribute("hidden"):x.setAttribute("hidden",""));const k=this.hasAttribute("counter");if(w&&(k?w.removeAttribute("hidden"):w.setAttribute("hidden","")),_&&(c?_.removeAttribute("hidden"):_.setAttribute("hidden","")),C&&(c||k?C.removeAttribute("hidden"):C.setAttribute("hidden","")),this._input){u?this._input.setAttribute("aria-labelledby",`${this._uid}-label`):this._input.removeAttribute("aria-labelledby");const A=[];l&&A.push(`${this._uid}-description`),c&&A.push(`${this._uid}-error`),A.length?this._input.setAttribute("aria-describedby",A.join(" ")):this._input.removeAttribute("aria-describedby"),this.getAttribute("validation")==="error"||!!p?this._input.setAttribute("aria-invalid","true"):this._input.removeAttribute("aria-invalid"),this.hasAttribute("required")?this._input.setAttribute("aria-required","true"):this._input.removeAttribute("aria-required")}}_onNativeInput(t){const e=t.target.value;this.getAttribute("value")!==e?this.setAttribute("value",e):this._syncInputValue(e),this._emitValueEvent("input",e);const i=Number(this.getAttribute("debounce")||0);i>0?(this._debounceTimer&&clearTimeout(this._debounceTimer),this._debounceTimer=setTimeout(()=>{this._emitValueEvent("debounced-input",e),this._debounceTimer=null},i)):this._emitValueEvent("debounced-input",e)}_onNativeChange(t){const e=t.target.value;this._emitValueEvent("change",e)}_onClearClick(t){if(t.preventDefault(),!(y(this,"disabled")||this.hasAttribute("readonly"))&&this._input){this.value="",this._input.value="",this._input.dispatchEvent(new Event("input",{bubbles:!0})),this._input.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new CustomEvent("clear",{bubbles:!0,composed:!0}));try{this._input.focus({preventScroll:!0})}catch{this._input.focus()}}}render(){const t=this.getAttribute("value")||"",e=this.getAttribute("placeholder")||"",i=y(this,"disabled"),n=y(this,"clearable"),o=this.getAttribute("type")||"text",s=this.getAttribute("name")||"",m=this.hasAttribute("required"),p=this.getAttribute("pattern")||"",u=this.getAttribute("inputmode")||"",l=this.getAttribute("autocomplete")||"",c=this.getAttribute("min")||"",d=this.getAttribute("max")||"",h=this.getAttribute("step")||"",b=this.getAttribute("spellcheck")||"",f=this.getAttribute("maxlength")||"",g=this.getAttribute("minlength")||"",v=this.hasAttribute("readonly"),x=this.getAttribute("label")||"",C=this.getAttribute("description")||"",_=this.getAttribute("data-error")||"",w=this.getAttribute("validation")||"",k=this.hasAttribute("floating-label"),A=m?'<span class="required" aria-hidden="true">*</span>':"";this._syncHostTokens(),this.setContent(`
+      <style>${q}</style>
       <div class="root" part="root">
         <div class="meta" part="meta">
           <label class="label" id="${this._uid}-label" part="label">
@@ -500,27 +500,27 @@
           <div class="control" part="control">
             <input
               part="input"
-              type="${r(n)}"
+              type="${r(o)}"
               name="${r(s)}"
               value="${r(t)}"
               placeholder="${r(e)}"
-              ${o?"required":""}
-              ${d?`pattern="${r(d)}"`:""}
-              ${l?`inputmode="${r(l)}"`:""}
-              ${c?`autocomplete="${r(c)}"`:""}
-              ${p?`min="${r(p)}"`:""}
-              ${h?`max="${r(h)}"`:""}
-              ${b?`step="${r(b)}"`:""}
-              ${f?`spellcheck="${r(f)}"`:""}
-              ${g?`maxlength="${r(g)}"`:""}
-              ${m?`minlength="${r(m)}"`:""}
+              ${m?"required":""}
+              ${p?`pattern="${r(p)}"`:""}
+              ${u?`inputmode="${r(u)}"`:""}
+              ${l?`autocomplete="${r(l)}"`:""}
+              ${c?`min="${r(c)}"`:""}
+              ${d?`max="${r(d)}"`:""}
+              ${h?`step="${r(h)}"`:""}
+              ${b?`spellcheck="${r(b)}"`:""}
+              ${f?`maxlength="${r(f)}"`:""}
+              ${g?`minlength="${r(g)}"`:""}
               ${i?"disabled":""}
               ${v?"readonly":""}
             />
             ${k?`<span class="floating-label" part="floating-label">${r(x||e||s||"Input")}</span>`:""}
           </div>
 
-          <button class="clear-btn" part="clear" aria-label="Clear" ${u&&t&&!i&&!v?"":"hidden"}>${N}</button>
+          <button class="clear-btn" part="clear" aria-label="Clear" ${n&&t&&!i&&!v?"":"hidden"}>${$}</button>
 
           <span class="suffix" part="suffix"><slot name="suffix"></slot></span>
         </div>
@@ -532,4 +532,4 @@
           <p class="counter" part="counter"></p>
         </div>
       </div>
-    `),this._detachListeners(),this._input=this.root.querySelector("input"),this._clearBtn=this.root.querySelector("button.clear-btn"),this._input&&(this._input.addEventListener("input",this._onNativeInput),this._input.addEventListener("change",this._onNativeChange)),(S=this._clearBtn)==null||S.addEventListener("click",this._onClearClick),this._syncControlAttrs(),this._syncInputValue(t),this._syncDerivedState(),this.hasAttribute("autofocus")&&!this._autofocusApplied&&(this._autofocusApplied=!0,queueMicrotask(()=>{var E,$;if(this.isConnected)try{(E=this._input)==null||E.focus({preventScroll:!0})}catch{($=this._input)==null||$.focus()}}))}shouldRenderOnAttributeChange(t,e,i){return t==="label"||t==="description"||t==="data-error"||t==="floating-label"}}typeof customElements<"u"&&!customElements.get("ui-input")&&customElements.define("ui-input",q);exports.UIInput=q;
+    `),this._detachListeners(),this._input=this.root.querySelector("input"),this._clearBtn=this.root.querySelector("button.clear-btn"),this._input&&(this._input.addEventListener("input",this._onNativeInput),this._input.addEventListener("change",this._onNativeChange)),this._clearBtn?.addEventListener("click",this._onClearClick),this._syncControlAttrs(),this._syncInputValue(t),this._syncDerivedState(),this.hasAttribute("autofocus")&&!this._autofocusApplied&&(this._autofocusApplied=!0,queueMicrotask(()=>{if(this.isConnected)try{this._input?.focus({preventScroll:!0})}catch{this._input?.focus()}}))}shouldRenderOnAttributeChange(t,e,i){return t==="label"||t==="description"||t==="data-error"||t==="floating-label"}}typeof customElements<"u"&&!customElements.get("ui-input")&&customElements.define("ui-input",S);exports.UIInput=S;

package/dist/input.esm.js

@@ -1,9 +1,9 @@
-import { E as q } from "./ElementBase-909688f3.mjs";
-const T = `
+import { E as S } from "./ElementBase-YlTLMsGk.mjs";
+const E = `
   <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>
-`, N = `
+`, $ = `
   :host {
     --ui-input-padding: var(--ui-padding, 10px 12px);
     --ui-input-border-color: var(--ui-color-border, var(--ui-border-color, #cbd5e1));
@@ -487,25 +487,20 @@ function r(a) {
   return a.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
 function z(a) {
-  if (!a)
-    return !1;
+  if (!a) return !1;
   const t = a.assignedNodes({ flatten: !0 });
-  return t.length ? t.some((e) => {
-    var i;
-    return e.nodeType === Node.TEXT_NODE ? !!((i = e.textContent) != null && i.trim()) : e.nodeType === Node.ELEMENT_NODE;
-  }) : !1;
+  return t.length ? t.some((e) => e.nodeType === Node.TEXT_NODE ? !!e.textContent?.trim() : e.nodeType === Node.ELEMENT_NODE) : !1;
 }
 function y(a, t) {
   const e = a.getAttribute(t);
-  if (e == null)
-    return !1;
+  if (e == null) return !1;
   const i = String(e).trim().toLowerCase();
   return i !== "false" && i !== "0";
 }
-function L(a) {
+function q(a) {
   return a === "none" || a === "large" || a === "full";
 }
-class I extends q {
+class T extends S {
   constructor() {
     super(), this._input = null, this._clearBtn = null, this._debounceTimer = null, this._formUnregister = null, this._uid = Math.random().toString(36).slice(2, 9), this._autofocusApplied = !1, this._onNativeInput = this._onNativeInput.bind(this), this._onNativeChange = this._onNativeChange.bind(this), this._onClearClick = this._onClearClick.bind(this), this._onSlotChange = this._onSlotChange.bind(this);
   }
@@ -556,22 +551,20 @@ class I extends q {
     const t = this.getAttribute("color");
     t ? this.style.setProperty("--ui-input-accent", t) : this.style.removeProperty("--ui-input-accent");
     const e = this.getAttribute("radius") || "";
-    e && !L(e) ? this.style.setProperty("--ui-input-border-radius", e) : this.style.removeProperty("--ui-input-border-radius");
+    e && !q(e) ? this.style.setProperty("--ui-input-border-radius", e) : this.style.removeProperty("--ui-input-border-radius");
   }
   _syncControlAttrs() {
-    if (this._syncHostTokens(), !this._input)
-      return;
-    const t = this._input, e = this.getAttribute("type") || "text", i = this.getAttribute("placeholder") || "", u = this.getAttribute("name") || "", n = this.getAttribute("pattern") || "", s = this.getAttribute("inputmode") || "", o = this.getAttribute("autocomplete") || "", d = this.getAttribute("min") || "", l = this.getAttribute("max") || "", c = this.getAttribute("step") || "", p = this.getAttribute("spellcheck") || "", h = this.getAttribute("maxlength") || "", b = this.getAttribute("minlength") || "", f = y(this, "disabled"), g = this.hasAttribute("required"), m = this.hasAttribute("readonly");
+    if (this._syncHostTokens(), !this._input) return;
+    const t = this._input, e = this.getAttribute("type") || "text", i = this.getAttribute("placeholder") || "", n = this.getAttribute("name") || "", o = this.getAttribute("pattern") || "", s = this.getAttribute("inputmode") || "", m = this.getAttribute("autocomplete") || "", p = this.getAttribute("min") || "", u = this.getAttribute("max") || "", l = this.getAttribute("step") || "", c = this.getAttribute("spellcheck") || "", d = this.getAttribute("maxlength") || "", h = this.getAttribute("minlength") || "", b = y(this, "disabled"), f = this.hasAttribute("required"), g = this.hasAttribute("readonly");
     try {
       t.type = e;
     } catch {
       t.type = "text";
     }
-    t.placeholder = i, t.disabled = f, t.required = g, t.readOnly = m, t.name = u, n ? t.setAttribute("pattern", n) : t.removeAttribute("pattern"), s ? t.setAttribute("inputmode", s) : t.removeAttribute("inputmode"), o ? t.setAttribute("autocomplete", o) : t.removeAttribute("autocomplete"), d ? t.setAttribute("min", d) : t.removeAttribute("min"), l ? t.setAttribute("max", l) : t.removeAttribute("max"), c ? t.setAttribute("step", c) : t.removeAttribute("step"), p ? t.setAttribute("spellcheck", p) : t.removeAttribute("spellcheck"), h && Number.isFinite(Number(h)) ? t.setAttribute("maxlength", h) : t.removeAttribute("maxlength"), b && Number.isFinite(Number(b)) ? t.setAttribute("minlength", b) : t.removeAttribute("minlength");
+    t.placeholder = i, t.disabled = b, t.required = f, t.readOnly = g, t.name = n, o ? t.setAttribute("pattern", o) : t.removeAttribute("pattern"), s ? t.setAttribute("inputmode", s) : t.removeAttribute("inputmode"), m ? t.setAttribute("autocomplete", m) : t.removeAttribute("autocomplete"), p ? t.setAttribute("min", p) : t.removeAttribute("min"), u ? t.setAttribute("max", u) : t.removeAttribute("max"), l ? t.setAttribute("step", l) : t.removeAttribute("step"), c ? t.setAttribute("spellcheck", c) : t.removeAttribute("spellcheck"), d && Number.isFinite(Number(d)) ? t.setAttribute("maxlength", d) : t.removeAttribute("maxlength"), h && Number.isFinite(Number(h)) ? t.setAttribute("minlength", h) : t.removeAttribute("minlength");
   }
   attributeChangedCallback(t, e, i) {
-    if (e === i)
-      return;
+    if (e === i) return;
     if (t === "value") {
       this._syncInputValue(i || "");
       return;
@@ -607,12 +600,11 @@ class I extends q {
       "radius"
     ])).has(t)) {
       this._syncControlAttrs(), this._syncInputValue(this.value), this._syncDerivedState(), t === "autofocus" && this.hasAttribute("autofocus") && !this._autofocusApplied && (this._autofocusApplied = !0, queueMicrotask(() => {
-        var n, s;
         if (this.isConnected)
           try {
-            (n = this._input) == null || n.focus({ preventScroll: !0 });
+            this._input?.focus({ preventScroll: !0 });
           } catch {
-            (s = this._input) == null || s.focus();
+            this._input?.focus();
           }
       }));
       return;
@@ -633,12 +625,10 @@ class I extends q {
     super.focus(t);
   }
   blur() {
-    var t;
-    (t = this._input) == null || t.blur();
+    this._input?.blur();
   }
   select() {
-    var t;
-    (t = this._input) == null || t.select();
+    this._input?.select();
   }
   _emitValueEvent(t, e) {
     this.dispatchEvent(
@@ -650,19 +640,18 @@ class I extends q {
     );
   }
   _registerWithForm() {
-    var t;
     this._formUnregister && (this._formUnregister(), this._formUnregister = null);
     try {
-      const i = this.getRootNode().host, n = ((t = i == null ? void 0 : i.closest) == null ? void 0 : t.call(i, "ui-form")) || null || this.closest("ui-form"), s = this.getAttribute("name");
-      n && typeof n.registerField == "function" && s && (this._formUnregister = n.registerField(s, {
-        name: s,
+      const n = this.getRootNode().host?.closest?.("ui-form") || null || this.closest("ui-form"), o = this.getAttribute("name");
+      n && typeof n.registerField == "function" && o && (this._formUnregister = n.registerField(o, {
+        name: o,
         getValue: () => this.value,
-        setValue: (o) => {
-          this.value = String(o ?? "");
+        setValue: (s) => {
+          this.value = String(s ?? "");
         },
         validate: async () => this._input ? { valid: this._input.checkValidity(), message: this._input.validationMessage || void 0 } : { valid: !0 },
-        setError: (o) => {
-          o ? (this.setAttribute("validation", "error"), this.setAttribute("data-error", o)) : (this.removeAttribute("validation"), this.removeAttribute("data-error"));
+        setError: (s) => {
+          s ? (this.setAttribute("validation", "error"), this.setAttribute("data-error", s)) : (this.removeAttribute("validation"), this.removeAttribute("data-error"));
         }
       }));
     } catch {
@@ -675,8 +664,8 @@ class I extends q {
     this._input && this._input.value !== t && (this._input.value = t), this._clearBtn && (y(this, "clearable") && t.length > 0 && !y(this, "disabled") && !this.hasAttribute("readonly") ? this._clearBtn.removeAttribute("hidden") : this._clearBtn.setAttribute("hidden", ""));
     const e = this.root.querySelector(".counter");
     if (e && this.hasAttribute("counter")) {
-      const u = this.getAttribute("maxlength"), n = u ? `${t.length}/${u}` : String(t.length);
-      e.textContent = n;
+      const n = this.getAttribute("maxlength"), o = n ? `${t.length}/${n}` : String(t.length);
+      e.textContent = o;
     }
     const i = this.root.querySelector(".shell");
     i && i.setAttribute("data-has-value", t ? "true" : "false");
@@ -685,13 +674,13 @@ class I extends q {
     this._syncDerivedState();
   }
   _syncDerivedState() {
-    const t = this.root.querySelector('slot[name="label"]'), e = this.root.querySelector('slot[name="description"]'), i = this.root.querySelector('slot[name="error"]'), u = this.root.querySelector('slot[name="prefix"]'), n = this.root.querySelector('slot[name="suffix"]'), s = (this.getAttribute("label") || "").trim(), o = (this.getAttribute("description") || "").trim(), d = (this.getAttribute("data-error") || "").trim(), l = !!s || z(t), c = !!o || z(e), p = !!d || z(i), h = z(u), b = z(n), f = this.root.querySelector(".label"), g = this.root.querySelector(".description"), m = this.root.querySelector(".prefix"), v = this.root.querySelector(".suffix"), x = this.root.querySelector(".meta"), C = this.root.querySelector(".footer"), _ = this.root.querySelector(".error"), w = this.root.querySelector(".counter");
-    f && (l ? f.removeAttribute("hidden") : f.setAttribute("hidden", "")), g && (c ? g.removeAttribute("hidden") : g.setAttribute("hidden", "")), m && (h ? m.removeAttribute("hidden") : m.setAttribute("hidden", "")), v && (b ? v.removeAttribute("hidden") : v.setAttribute("hidden", "")), x && (l || c ? x.removeAttribute("hidden") : x.setAttribute("hidden", ""));
+    const t = this.root.querySelector('slot[name="label"]'), e = this.root.querySelector('slot[name="description"]'), i = this.root.querySelector('slot[name="error"]'), n = this.root.querySelector('slot[name="prefix"]'), o = this.root.querySelector('slot[name="suffix"]'), s = (this.getAttribute("label") || "").trim(), m = (this.getAttribute("description") || "").trim(), p = (this.getAttribute("data-error") || "").trim(), u = !!s || z(t), l = !!m || z(e), c = !!p || z(i), d = z(n), h = z(o), b = this.root.querySelector(".label"), f = this.root.querySelector(".description"), g = this.root.querySelector(".prefix"), v = this.root.querySelector(".suffix"), x = this.root.querySelector(".meta"), C = this.root.querySelector(".footer"), _ = this.root.querySelector(".error"), w = this.root.querySelector(".counter");
+    b && (u ? b.removeAttribute("hidden") : b.setAttribute("hidden", "")), f && (l ? f.removeAttribute("hidden") : f.setAttribute("hidden", "")), g && (d ? g.removeAttribute("hidden") : g.setAttribute("hidden", "")), v && (h ? v.removeAttribute("hidden") : v.setAttribute("hidden", "")), x && (u || l ? x.removeAttribute("hidden") : x.setAttribute("hidden", ""));
     const k = this.hasAttribute("counter");
-    if (w && (k ? w.removeAttribute("hidden") : w.setAttribute("hidden", "")), _ && (p ? _.removeAttribute("hidden") : _.setAttribute("hidden", "")), C && (p || k ? C.removeAttribute("hidden") : C.setAttribute("hidden", "")), this._input) {
-      l ? this._input.setAttribute("aria-labelledby", `${this._uid}-label`) : this._input.removeAttribute("aria-labelledby");
+    if (w && (k ? w.removeAttribute("hidden") : w.setAttribute("hidden", "")), _ && (c ? _.removeAttribute("hidden") : _.setAttribute("hidden", "")), C && (c || k ? C.removeAttribute("hidden") : C.setAttribute("hidden", "")), this._input) {
+      u ? this._input.setAttribute("aria-labelledby", `${this._uid}-label`) : this._input.removeAttribute("aria-labelledby");
       const A = [];
-      c && A.push(`${this._uid}-description`), p && A.push(`${this._uid}-error`), A.length ? this._input.setAttribute("aria-describedby", A.join(" ")) : this._input.removeAttribute("aria-describedby"), this.getAttribute("validation") === "error" || !!d ? this._input.setAttribute("aria-invalid", "true") : this._input.removeAttribute("aria-invalid"), this.hasAttribute("required") ? this._input.setAttribute("aria-required", "true") : this._input.removeAttribute("aria-required");
+      l && A.push(`${this._uid}-description`), c && A.push(`${this._uid}-error`), A.length ? this._input.setAttribute("aria-describedby", A.join(" ")) : this._input.removeAttribute("aria-describedby"), this.getAttribute("validation") === "error" || !!p ? this._input.setAttribute("aria-invalid", "true") : this._input.removeAttribute("aria-invalid"), this.hasAttribute("required") ? this._input.setAttribute("aria-required", "true") : this._input.removeAttribute("aria-required");
     }
   }
   _onNativeInput(t) {
@@ -717,10 +706,9 @@ class I extends q {
     }
   }
   render() {
-    var S;
-    const t = this.getAttribute("value") || "", e = this.getAttribute("placeholder") || "", i = y(this, "disabled"), u = y(this, "clearable"), n = this.getAttribute("type") || "text", s = this.getAttribute("name") || "", o = this.hasAttribute("required"), d = this.getAttribute("pattern") || "", l = this.getAttribute("inputmode") || "", c = this.getAttribute("autocomplete") || "", p = this.getAttribute("min") || "", h = this.getAttribute("max") || "", b = this.getAttribute("step") || "", f = this.getAttribute("spellcheck") || "", g = this.getAttribute("maxlength") || "", m = this.getAttribute("minlength") || "", v = this.hasAttribute("readonly"), x = this.getAttribute("label") || "", C = this.getAttribute("description") || "", _ = this.getAttribute("data-error") || "", w = this.getAttribute("validation") || "", k = this.hasAttribute("floating-label"), A = o ? '<span class="required" aria-hidden="true">*</span>' : "";
+    const t = this.getAttribute("value") || "", e = this.getAttribute("placeholder") || "", i = y(this, "disabled"), n = y(this, "clearable"), o = this.getAttribute("type") || "text", s = this.getAttribute("name") || "", m = this.hasAttribute("required"), p = this.getAttribute("pattern") || "", u = this.getAttribute("inputmode") || "", l = this.getAttribute("autocomplete") || "", c = this.getAttribute("min") || "", d = this.getAttribute("max") || "", h = this.getAttribute("step") || "", b = this.getAttribute("spellcheck") || "", f = this.getAttribute("maxlength") || "", g = this.getAttribute("minlength") || "", v = this.hasAttribute("readonly"), x = this.getAttribute("label") || "", C = this.getAttribute("description") || "", _ = this.getAttribute("data-error") || "", w = this.getAttribute("validation") || "", k = this.hasAttribute("floating-label"), A = m ? '<span class="required" aria-hidden="true">*</span>' : "";
     this._syncHostTokens(), this.setContent(`
-      <style>${N}</style>
+      <style>${$}</style>
       <div class="root" part="root">
         <div class="meta" part="meta">
           <label class="label" id="${this._uid}-label" part="label">
@@ -738,27 +726,27 @@ class I extends q {
           <div class="control" part="control">
             <input
               part="input"
-              type="${r(n)}"
+              type="${r(o)}"
               name="${r(s)}"
               value="${r(t)}"
               placeholder="${r(e)}"
-              ${o ? "required" : ""}
-              ${d ? `pattern="${r(d)}"` : ""}
-              ${l ? `inputmode="${r(l)}"` : ""}
-              ${c ? `autocomplete="${r(c)}"` : ""}
-              ${p ? `min="${r(p)}"` : ""}
-              ${h ? `max="${r(h)}"` : ""}
-              ${b ? `step="${r(b)}"` : ""}
-              ${f ? `spellcheck="${r(f)}"` : ""}
-              ${g ? `maxlength="${r(g)}"` : ""}
-              ${m ? `minlength="${r(m)}"` : ""}
+              ${m ? "required" : ""}
+              ${p ? `pattern="${r(p)}"` : ""}
+              ${u ? `inputmode="${r(u)}"` : ""}
+              ${l ? `autocomplete="${r(l)}"` : ""}
+              ${c ? `min="${r(c)}"` : ""}
+              ${d ? `max="${r(d)}"` : ""}
+              ${h ? `step="${r(h)}"` : ""}
+              ${b ? `spellcheck="${r(b)}"` : ""}
+              ${f ? `maxlength="${r(f)}"` : ""}
+              ${g ? `minlength="${r(g)}"` : ""}
               ${i ? "disabled" : ""}
               ${v ? "readonly" : ""}
             />
             ${k ? `<span class="floating-label" part="floating-label">${r(x || e || s || "Input")}</span>` : ""}
           </div>
 
-          <button class="clear-btn" part="clear" aria-label="Clear" ${u && t && !i && !v ? "" : "hidden"}>${T}</button>
+          <button class="clear-btn" part="clear" aria-label="Clear" ${n && t && !i && !v ? "" : "hidden"}>${E}</button>
 
           <span class="suffix" part="suffix"><slot name="suffix"></slot></span>
         </div>
@@ -770,13 +758,12 @@ class I extends q {
           <p class="counter" part="counter"></p>
         </div>
       </div>
-    `), this._detachListeners(), this._input = this.root.querySelector("input"), this._clearBtn = this.root.querySelector("button.clear-btn"), this._input && (this._input.addEventListener("input", this._onNativeInput), this._input.addEventListener("change", this._onNativeChange)), (S = this._clearBtn) == null || S.addEventListener("click", this._onClearClick), this._syncControlAttrs(), this._syncInputValue(t), this._syncDerivedState(), this.hasAttribute("autofocus") && !this._autofocusApplied && (this._autofocusApplied = !0, queueMicrotask(() => {
-      var E, $;
+    `), this._detachListeners(), this._input = this.root.querySelector("input"), this._clearBtn = this.root.querySelector("button.clear-btn"), this._input && (this._input.addEventListener("input", this._onNativeInput), this._input.addEventListener("change", this._onNativeChange)), this._clearBtn?.addEventListener("click", this._onClearClick), this._syncControlAttrs(), this._syncInputValue(t), this._syncDerivedState(), this.hasAttribute("autofocus") && !this._autofocusApplied && (this._autofocusApplied = !0, queueMicrotask(() => {
       if (this.isConnected)
         try {
-          (E = this._input) == null || E.focus({ preventScroll: !0 });
+          this._input?.focus({ preventScroll: !0 });
         } catch {
-          ($ = this._input) == null || $.focus();
+          this._input?.focus();
         }
     }));
   }
@@ -784,7 +771,7 @@ class I extends q {
     return t === "label" || t === "description" || t === "data-error" || t === "floating-label";
   }
 }
-typeof customElements < "u" && !customElements.get("ui-input") && customElements.define("ui-input", I);
+typeof customElements < "u" && !customElements.get("ui-input") && customElements.define("ui-input", T);
 export {
-  I as UIInput
+  T as UIInput
 };

package/dist/label.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("./ElementBase-1b301e7f.js"),u=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("./ElementBase-EV6mVBUV.js"),u=`
   :host {
     --ui-label-color: var(--ui-color-text, var(--ui-text, #0f172a));
     --ui-label-muted: var(--ui-color-muted, var(--ui-muted, #64748b));
@@ -181,7 +181,7 @@
       box-shadow: none;
     }
   }
-`;function a(i){return i.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function c(i){if(!i)return!1;const e=i.assignedNodes({flatten:!0});return e.length?e.some(o=>{var t;return o.nodeType===Node.TEXT_NODE?!!((t=o.textContent)!=null&&t.trim()):o.nodeType===Node.ELEMENT_NODE}):!1}function l(i){if(i.hasAttribute("disabled")||i.getAttribute("aria-disabled")==="true")return!1;const e=window.getComputedStyle(i);return!(e.display==="none"||e.visibility==="hidden")}class s extends n.ElementBase{constructor(){super(),this._uid=Math.random().toString(36).slice(2,9),this._onRootClick=this._onRootClick.bind(this),this._onRootFocusIn=this._onRootFocusIn.bind(this),this._onRootFocusOut=this._onRootFocusOut.bind(this),this._onSlotChange=this._onSlotChange.bind(this)}static get observedAttributes(){return["for","required","description","variant","tone","size","density","shape","disabled","headless"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onRootClick),this.root.addEventListener("focusin",this._onRootFocusIn),this.root.addEventListener("focusout",this._onRootFocusOut),this.root.addEventListener("slotchange",this._onSlotChange),this._syncDescriptionVisibility()}disconnectedCallback(){this.root.removeEventListener("click",this._onRootClick),this.root.removeEventListener("focusin",this._onRootFocusIn),this.root.removeEventListener("focusout",this._onRootFocusOut),this.root.removeEventListener("slotchange",this._onSlotChange),super.disconnectedCallback()}_resolveControl(){const e=this.getAttribute("for");if(e){const t=document.getElementById(e);if(t instanceof HTMLElement&&l(t))return t}const o=[this.nextElementSibling,this.parentElement,this.closest('[role="group"], form, ui-form, fieldset, .field, [data-field]')];for(const t of o){if(!t)continue;const r=t.querySelector('ui-input, ui-textarea, ui-select, ui-combobox, input, textarea, select, button, [tabindex]:not([tabindex="-1"])');if(r&&l(r))return r}return null}_focusControl(){const e=this._resolveControl();if(e)try{e.focus({preventScroll:!0})}catch{e.focus()}}_onRootClick(e){if(this.hasAttribute("disabled"))return;const o=e.composedPath(),t=this.root.querySelector(".label");!t||!o.includes(t)||(this._focusControl(),this.dispatchEvent(new CustomEvent("click",{bubbles:!0})))}_onRootFocusIn(){this.dispatchEvent(new CustomEvent("focus",{bubbles:!0}))}_onRootFocusOut(){this.dispatchEvent(new CustomEvent("blur",{bubbles:!0}))}_onSlotChange(){this._syncDescriptionVisibility()}_syncDescriptionVisibility(){const e=(this.getAttribute("description")||"").trim(),o=this.root.querySelector('slot[name="description"]'),t=!!e||c(o),r=this.root.querySelector(".description");r&&(t?r.removeAttribute("hidden"):r.setAttribute("hidden",""))}render(){const e=this.getAttribute("for")||"",o=this.getAttribute("description")||"",t=this.hasAttribute("required");this.setContent(`
+`;function a(i){return i.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function c(i){if(!i)return!1;const e=i.assignedNodes({flatten:!0});return e.length?e.some(o=>o.nodeType===Node.TEXT_NODE?!!o.textContent?.trim():o.nodeType===Node.ELEMENT_NODE):!1}function l(i){if(i.hasAttribute("disabled")||i.getAttribute("aria-disabled")==="true")return!1;const e=window.getComputedStyle(i);return!(e.display==="none"||e.visibility==="hidden")}class s extends n.ElementBase{constructor(){super(),this._uid=Math.random().toString(36).slice(2,9),this._onRootClick=this._onRootClick.bind(this),this._onRootFocusIn=this._onRootFocusIn.bind(this),this._onRootFocusOut=this._onRootFocusOut.bind(this),this._onSlotChange=this._onSlotChange.bind(this)}static get observedAttributes(){return["for","required","description","variant","tone","size","density","shape","disabled","headless"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onRootClick),this.root.addEventListener("focusin",this._onRootFocusIn),this.root.addEventListener("focusout",this._onRootFocusOut),this.root.addEventListener("slotchange",this._onSlotChange),this._syncDescriptionVisibility()}disconnectedCallback(){this.root.removeEventListener("click",this._onRootClick),this.root.removeEventListener("focusin",this._onRootFocusIn),this.root.removeEventListener("focusout",this._onRootFocusOut),this.root.removeEventListener("slotchange",this._onSlotChange),super.disconnectedCallback()}_resolveControl(){const e=this.getAttribute("for");if(e){const t=document.getElementById(e);if(t instanceof HTMLElement&&l(t))return t}const o=[this.nextElementSibling,this.parentElement,this.closest('[role="group"], form, ui-form, fieldset, .field, [data-field]')];for(const t of o){if(!t)continue;const r=t.querySelector('ui-input, ui-textarea, ui-select, ui-combobox, input, textarea, select, button, [tabindex]:not([tabindex="-1"])');if(r&&l(r))return r}return null}_focusControl(){const e=this._resolveControl();if(e)try{e.focus({preventScroll:!0})}catch{e.focus()}}_onRootClick(e){if(this.hasAttribute("disabled"))return;const o=e.composedPath(),t=this.root.querySelector(".label");!t||!o.includes(t)||(this._focusControl(),this.dispatchEvent(new CustomEvent("click",{bubbles:!0})))}_onRootFocusIn(){this.dispatchEvent(new CustomEvent("focus",{bubbles:!0}))}_onRootFocusOut(){this.dispatchEvent(new CustomEvent("blur",{bubbles:!0}))}_onSlotChange(){this._syncDescriptionVisibility()}_syncDescriptionVisibility(){const e=(this.getAttribute("description")||"").trim(),o=this.root.querySelector('slot[name="description"]'),t=!!e||c(o),r=this.root.querySelector(".description");r&&(t?r.removeAttribute("hidden"):r.setAttribute("hidden",""))}render(){const e=this.getAttribute("for")||"",o=this.getAttribute("description")||"",t=this.hasAttribute("required");this.setContent(`
       <style>${u}</style>
       <div class="root" part="root">
         <label class="label" id="${this._uid}-label" part="label" ${e?`for="${a(e)}"`:""}>