@editora/ui-core 0.1.25 → 0.2.0

package/dist/inline-edit.esm.js

@@ -3,7 +3,7 @@ const h = `
   :host {
     --ui-inline-edit-bg: transparent;
     --ui-inline-edit-border: 1px dashed transparent;
-    --ui-inline-edit-radius: 12px;
+    --ui-inline-edit-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     --ui-inline-edit-text: var(--ui-color-text, #0f172a);
     --ui-inline-edit-muted: var(--ui-color-muted, #526175);
     --ui-inline-edit-focus: var(--ui-color-focus-ring, #2563eb);
@@ -36,8 +36,8 @@ const h = `
   }
 
   .display:hover {
-    border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
-    background: color-mix(in srgb, var(--ui-color-surface, #ffffff) 92%, transparent);
+    border-color: transparent;
+    background: var(--ui-color-fill-hover, color-mix(in srgb, currentColor 6%, transparent));
   }
 
   .value {
@@ -56,14 +56,37 @@ const h = `
   .save-btn,
   .cancel-btn {
     appearance: none;
-    border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
+    border: 1px solid var(--ui-color-line, #cbd5e1);
     background: var(--ui-inline-edit-surface);
     color: var(--ui-inline-edit-text);
-    border-radius: 10px;
-    min-height: 34px;
-    padding: 0 12px;
+    border-radius: var(--ui-inline-edit-radius);
+    min-height: var(--ui-control-height-1, 24px);
+    padding: 0 10px;
     cursor: pointer;
-    font: 600 12px/1.2 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    font: 500 13px/1.2 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    transition: background-color 120ms ease, border-color 120ms ease;
+  }
+
+  .edit-btn:hover:not(:disabled),
+  .cancel-btn:hover:not(:disabled) {
+    background: var(--ui-color-fill-hover, color-mix(in srgb, currentColor 6%, transparent));
+  }
+
+  .save-btn {
+    border-color: transparent;
+    background: var(--ui-color-primary, #2563eb);
+    color: var(--ui-color-foreground-on-primary, #ffffff);
+  }
+
+  .save-btn:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--ui-color-primary, #2563eb) 88%, #000);
+  }
+
+  .edit-btn:focus-visible,
+  .save-btn:focus-visible,
+  .cancel-btn:focus-visible {
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-inline-edit-focus));
+    outline-offset: var(--ui-ring-offset, 1px);
   }
 
   .edit-btn:disabled,
@@ -82,18 +105,23 @@ const h = `
     width: 100%;
     min-width: 0;
     box-sizing: border-box;
-    border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent);
-    border-radius: 12px;
+    border: 1px solid var(--ui-color-line, #cbd5e1);
+    border-radius: var(--ui-inline-edit-radius);
     background: var(--ui-inline-edit-surface);
     color: var(--ui-inline-edit-text);
-    padding: 10px 12px;
-    font: 500 14px/1.45 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    padding: 6px 10px;
+    font: 400 14px/1.45 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     outline: none;
   }
 
+  .field:hover:not(:focus-visible) {
+    border-color: var(--ui-color-line-strong, #94a3b8);
+  }
+
   .field:focus-visible {
-    border-color: color-mix(in srgb, var(--ui-inline-edit-focus) 62%, transparent);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-inline-edit-focus) 22%, transparent);
+    border-color: var(--ui-ring-color, var(--ui-inline-edit-focus));
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-inline-edit-focus));
+    outline-offset: -1px;
   }
 
   .actions {
@@ -115,13 +143,13 @@ class b extends c {
   get value() {
     return this.getAttribute("value") || "";
   }
-  set value(t) {
-    t ? this.setAttribute("value", t) : this.removeAttribute("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 t = this.root.querySelector(".field");
-      t?.focus(), t?.select?.();
+      const e = this.root.querySelector(".field");
+      e?.focus(), e?.select?.();
     }), this.dispatchEvent(new CustomEvent("editing-change", { detail: { editing: !0 }, bubbles: !0, composed: !0 })));
   }
   cancelEditing() {
@@ -133,8 +161,8 @@ class b extends c {
       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();
+    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();
@@ -142,23 +170,23 @@ class b extends c {
   disconnectedCallback() {
     this._formUnregister && this._formUnregister(), super.disconnectedCallback();
   }
-  attributeChangedCallback(t, a, s) {
-    a !== s && (t === "name" && this.isConnected && this._registerWithForm(), t === "value" && !this.hasAttribute("editing") && (this._draft = s || ""), this.isConnected && this.requestRender());
+  attributeChangedCallback(e, a, r) {
+    a !== r && (e === "name" && this.isConnected && this._registerWithForm(), e === "value" && !this.hasAttribute("editing") && (this._draft = r || ""), this.isConnected && this.requestRender());
   }
   render() {
-    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");
+    const e = this.hasAttribute("editing") ? this._draft : this.value, a = this.getAttribute("placeholder") || "Add value", r = this.hasAttribute("multiline"), s = this.hasAttribute("editing"), n = !this.value, t = this.hasAttribute("disabled") || this.hasAttribute("readonly");
     this.setContent(`
       <style>${h}</style>
       <div class="root">
-        <div class="display"${r ? " hidden" : ""}>
+        <div class="display"${s ? " hidden" : ""}>
           <div class="value" data-empty="${n}">${o(n ? a : this.value)}</div>
-          <button class="edit-btn" type="button"${e ? " disabled" : ""}>Edit</button>
+          <button class="edit-btn" type="button"${t ? " disabled" : ""}>Edit</button>
         </div>
-        <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="editor"${s ? "" : " hidden"}>
+          ${r ? `<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"${e ? " disabled" : ""}>Cancel</button>
-            <button class="save-btn" type="button"${e ? " 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>
@@ -168,30 +196,30 @@ class b extends c {
       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());
+      i.key === "Escape" && (i.preventDefault(), this.cancelEditing()), !r && 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, {
+      const s = this.getRootNode().host?.closest?.("ui-form") || null || this.closest("ui-form"), n = this.getAttribute("name");
+      s && typeof s.registerField == "function" && n && (this._formUnregister = s.registerField(n, {
         name: n,
         getValue: () => this.value,
-        setValue: (e) => {
-          e == null || e === "" ? this.removeAttribute("value") : this.setAttribute("value", String(e));
+        setValue: (t) => {
+          t == null || t === "" ? this.removeAttribute("value") : this.setAttribute("value", String(t));
         }
       }));
     } catch {
     }
   }
   _restoreFocus() {
-    const t = this._lastFocusTarget && this._lastFocusTarget.isConnected ? this._lastFocusTarget : this.root.querySelector(".edit-btn");
-    t && (queueMicrotask(() => {
+    const e = this._lastFocusTarget && this._lastFocusTarget.isConnected ? this._lastFocusTarget : this.root.querySelector(".edit-btn");
+    e && (queueMicrotask(() => {
       try {
-        t.focus({ preventScroll: !0 });
+        e.focus({ preventScroll: !0 });
       } catch {
-        t.focus();
+        e.focus();
       }
     }), this._lastFocusTarget = null);
   }

package/dist/input.cjs.js

@@ -4,13 +4,16 @@
   </svg>
 `,N=`
   :host {
-    --ui-input-padding: var(--ui-padding, 10px 12px);
-    --ui-input-border-color: var(--ui-color-border, var(--ui-border-color, #cbd5e1));
+    --ui-input-action-size: 24px;
+    --ui-input-padding: var(--ui-padding, 0);
+    --ui-input-pad-x: calc(var(--ui-control-padding-inline-2, 12px) - 1px);
+    --ui-input-font-size: var(--ui-control-font-size-2, 14px);
+    --ui-input-border-color: var(--ui-color-line, var(--ui-color-border, var(--ui-border-color, #cbd5e1)));
     --ui-input-border-width: 1px;
     --ui-input-border-style: solid;
     --ui-input-border: var(--base-input-border, var(--ui-input-border-width) var(--ui-input-border-style) var(--ui-input-border-color));
-    --ui-input-border-radius: var(--ui-radius, 4px);
-    --ui-input-min-height: var(--ui-min-height, var(--base-input-height-md, 40px));
+    --ui-input-border-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    --ui-input-min-height: var(--ui-min-height, var(--base-input-height-md, var(--ui-control-height-2, 32px)));
     --ui-input-width: 100%;
     --ui-input-bg: var(--base-input-bg, var(--ui-color-surface, var(--ui-surface, #ffffff)));
     --ui-input-color: var(--ui-color-text, var(--ui-text, #0f172a));
@@ -25,7 +28,7 @@
     --ui-input-gap: var(--ui-default-gap, 8px);
     --ui-input-meta-gap: 4px;
     --ui-input-shell-gap: var(--ui-default-gap, 8px);
-    --ui-input-placeholder: color-mix(in srgb, var(--ui-input-color) 40%, transparent);
+    --ui-input-placeholder: var(--ui-color-placeholder, color-mix(in srgb, var(--ui-input-color) 62%, transparent));
     color-scheme: light dark;
     display: block;
     inline-size: var(--ui-input-width);
@@ -94,7 +97,7 @@
     gap: var(--ui-input-shell-gap);
     box-sizing: border-box;
     min-block-size: var(--ui-input-min-height);
-    padding-inline: 10px;
+    padding-inline: var(--ui-input-pad-x);
     border: var(--ui-input-border);
     border-radius: var(--ui-input-border-radius);
     background: var(--ui-input-bg);
@@ -103,8 +106,14 @@
   }
 
   .shell:focus-within {
-    border-color: color-mix(in srgb, var(--ui-input-focus-ring) 56%, var(--ui-input-border-color));
-    box-shadow: var(--base-input-focus-ring, 0 0 0 3px color-mix(in srgb, var(--ui-input-focus-ring) 24%, transparent));
+    border-color: var(--ui-ring-color, var(--ui-input-focus-ring));
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-input-focus-ring));
+    outline-offset: -1px;
+    box-shadow: var(--base-input-focus-ring, none);
+  }
+
+  .shell:hover:not(:focus-within) {
+    border-color: var(--ui-color-line-strong, var(--ui-input-border-color));
   }
 
   .prefix,
@@ -177,7 +186,7 @@
     border: none;
     background: transparent;
     color: inherit;
-    font: 500 var(--ui-default-font-size, var(--font-size-2, 14px))/var(--ui-default-line-height, var(--line-height-2, 20px)) var(--ui-font-family, var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif));
+    font: 500 var(--ui-input-font-size)/var(--ui-default-line-height, var(--line-height-2, 20px)) var(--ui-font-family, var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif));
     padding: var(--ui-input-padding);
     min-block-size: calc(var(--ui-input-min-height) - 2px);
     margin: 0;
@@ -197,9 +206,10 @@
     border: none;
     outline: none;
     cursor: pointer;
-    inline-size: 22px;
-    block-size: 22px;
-    border-radius: var(--ui-radius, 4px);
+    inline-size: var(--ui-input-action-size);
+    block-size: var(--ui-input-action-size);
+    margin-block: var(--ui-input-action-bleed, 0px);
+    border-radius: var(--ui-radius, 6px);
     display: inline-grid;
     place-items: center;
     background: color-mix(in srgb, var(--ui-input-color) 8%, transparent);
@@ -267,30 +277,27 @@
     pointer-events: none;
   }
 
-  :host([size="sm"]),
+    :host([size="sm"]),
   :host([size="1"]) {
-    --ui-input-min-height: 34px;
-    --ui-input-padding: 7px 8px;
+    --ui-input-min-height: var(--ui-min-height, var(--base-input-height-sm, var(--ui-control-height-1, 24px)));
+    --ui-input-pad-x: calc(var(--ui-control-padding-inline-1, 8px) - 1px);
+    --ui-input-font-size: var(--ui-control-font-size-1, 12px);
+    --ui-input-border-radius: var(--ui-control-radius-1, var(--ui-radius, 6px));
+    --ui-input-action-size: 24px;
+    --ui-input-action-bleed: -1px;
     --ui-input-shell-gap: 6px;
   }
 
-  :host([size="sm"]) input,
-  :host([size="1"]) input {
-    font-size: 12px;
-  }
-
   :host([size="lg"]),
   :host([size="3"]) {
-    --ui-input-min-height: 46px;
-    --ui-input-padding: 11px 14px;
+    --ui-input-min-height: var(--ui-min-height, var(--base-input-height-lg, var(--ui-control-height-3, 40px)));
+    --ui-input-pad-x: calc(var(--ui-control-padding-inline-3, 16px) - 1px);
+    --ui-input-font-size: var(--ui-control-font-size-3, 16px);
+    --ui-input-border-radius: var(--ui-control-radius-3, var(--ui-radius, 6px));
+    --ui-input-action-size: 28px;
     --ui-input-shell-gap: 10px;
   }
 
-  :host([size="lg"]) input,
-  :host([size="3"]) input {
-    font-size: 16px;
-  }
-
   :host([variant="classic"]),
   :host([variant="outlined"]) {
     --ui-input-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
@@ -390,7 +397,7 @@
   }
 
   :host([validation="error"]) .shell {
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-input-error) 20%, transparent);
+    box-shadow: 0 0 0 1px var(--ui-input-error);
   }
 
   :host([radius="none"]) {
@@ -481,13 +488,13 @@
       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=>e.nodeType===Node.TEXT_NODE?!!e.textContent?.trim():e.nodeType===Node.ELEMENT_NODE):!1}function A(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 E extends $.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","aria-label","aria-description","aria-describedby","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=A(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","aria-label","aria-description","aria-describedby"]).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&&(A(this,"clearable")&&t.length>0&&!A(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"),y=this.root.querySelector(".footer"),_=this.root.querySelector(".error"),C=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(C&&(k?C.removeAttribute("hidden"):C.setAttribute("hidden","")),_&&(c?_.removeAttribute("hidden"):_.setAttribute("hidden","")),y&&(c||k?y.removeAttribute("hidden"):y.setAttribute("hidden","")),this._input){S.syncControlName(this._input,this,u?`${this._uid}-label`:null);const w=[];l&&w.push(`${this._uid}-description`),c&&w.push(`${this._uid}-error`),S.syncControlDescription(this._input,this,this._uid,w),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(),!(A(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=A(this,"disabled"),n=A(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")||"",y=this.getAttribute("description")||"",_=this.getAttribute("data-error")||"",C=this.getAttribute("validation")||"",k=this.hasAttribute("floating-label"),w=m?'<span class="required" aria-hidden="true">*</span>':"";this._syncHostTokens(),this.setContent(`
+`;function r(a){return a.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function w(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 A(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 E extends $.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","aria-label","aria-description","aria-describedby","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")||"",s=this.getAttribute("pattern")||"",o=this.getAttribute("inputmode")||"",g=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=A(this,"disabled"),f=this.hasAttribute("required"),v=this.hasAttribute("readonly");try{t.type=e}catch{t.type="text"}t.placeholder=i,t.disabled=b,t.required=f,t.readOnly=v,t.name=n,s?t.setAttribute("pattern",s):t.removeAttribute("pattern"),o?t.setAttribute("inputmode",o):t.removeAttribute("inputmode"),g?t.setAttribute("autocomplete",g):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","aria-label","aria-description","aria-describedby"]).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"),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&&(A(this,"clearable")&&t.length>0&&!A(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"),s=n?`${t.length}/${n}`:String(t.length);e.textContent=s}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"]'),s=this.root.querySelector('slot[name="suffix"]'),o=(this.getAttribute("label")||"").trim(),g=(this.getAttribute("description")||"").trim(),p=(this.getAttribute("data-error")||"").trim(),u=!!o||w(t),l=!!g||w(e),c=!!p||w(i),d=w(n),h=w(s),b=this.root.querySelector(".label"),f=this.root.querySelector(".description"),v=this.root.querySelector(".prefix"),m=this.root.querySelector(".suffix"),x=this.root.querySelector(".meta"),y=this.root.querySelector(".footer"),_=this.root.querySelector(".error"),C=this.root.querySelector(".counter");b&&(u?b.removeAttribute("hidden"):b.setAttribute("hidden","")),f&&(l?f.removeAttribute("hidden"):f.setAttribute("hidden","")),v&&(d?v.removeAttribute("hidden"):v.setAttribute("hidden","")),m&&(h?m.removeAttribute("hidden"):m.setAttribute("hidden","")),x&&(u||l?x.removeAttribute("hidden"):x.setAttribute("hidden",""));const k=this.hasAttribute("counter");if(C&&(k?C.removeAttribute("hidden"):C.setAttribute("hidden","")),_&&(c?_.removeAttribute("hidden"):_.setAttribute("hidden","")),y&&(c||k?y.removeAttribute("hidden"):y.setAttribute("hidden","")),this._input){S.syncControlName(this._input,this,u?`${this._uid}-label`:null);const z=[];l&&z.push(`${this._uid}-description`),c&&z.push(`${this._uid}-error`),S.syncControlDescription(this._input,this,this._uid,z),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(),!(A(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=A(this,"disabled"),n=A(this,"clearable"),s=this.getAttribute("type")||"text",o=this.getAttribute("name")||"",g=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")||"",v=this.getAttribute("minlength")||"",m=this.hasAttribute("readonly"),x=this.getAttribute("label")||"",y=this.getAttribute("description")||"",_=this.getAttribute("data-error")||"",C=this.getAttribute("validation")||"",k=this.hasAttribute("floating-label"),z=g?'<span class="required" aria-hidden="true">*</span>':"";this._syncHostTokens(),this.setContent(`
       <style>${N}</style>
       <div class="root" part="root">
         <div class="meta" part="meta">
           <label class="label" id="${this._uid}-label" part="label">
             <slot name="label">${r(x)}</slot>
-            ${w}
+            ${z}
           </label>
           <p class="description" id="${this._uid}-description" part="description">
             <slot name="description">${r(y)}</slot>
@@ -500,11 +507,11 @@
           <div class="control" part="control">
             <input
               part="input"
-              type="${r(o)}"
-              name="${r(s)}"
+              type="${r(s)}"
+              name="${r(o)}"
               value="${r(t)}"
               placeholder="${r(e)}"
-              ${m?"required":""}
+              ${g?"required":""}
               ${p?`pattern="${r(p)}"`:""}
               ${u?`inputmode="${r(u)}"`:""}
               ${l?`autocomplete="${r(l)}"`:""}
@@ -513,14 +520,14 @@
               ${h?`step="${r(h)}"`:""}
               ${b?`spellcheck="${r(b)}"`:""}
               ${f?`maxlength="${r(f)}"`:""}
-              ${g?`minlength="${r(g)}"`:""}
+              ${v?`minlength="${r(v)}"`:""}
               ${i?"disabled":""}
-              ${v?"readonly":""}
+              ${m?"readonly":""}
             />
-            ${k?`<span class="floating-label" part="floating-label">${r(x||e||s||"Input")}</span>`:""}
+            ${k?`<span class="floating-label" part="floating-label">${r(x||e||o||"Input")}</span>`:""}
           </div>
 
-          <button class="clear-btn" part="clear" aria-label="Clear" ${n&&t&&!i&&!v?"":"hidden"}>${q}</button>
+          <button class="clear-btn" part="clear" aria-label="Clear" ${n&&t&&!i&&!m?"":"hidden"}>${q}</button>
 
           <span class="suffix" part="suffix"><slot name="suffix"></slot></span>
         </div>