@editora/ui-core 0.2.1 → 0.3.0

package/dist/inline-edit.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("./ElementBase-DxbvhLJs.js"),v=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("./ElementBase-CbUsP3D6.js"),v=`
   :host {
     --ui-inline-edit-bg: transparent;
     --ui-inline-edit-border: 1px dashed transparent;

package/dist/inline-edit.esm.js

@@ -1,4 +1,4 @@
-import { E as h } from "./ElementBase-BeZT54Hj.mjs";
+import { E as h } from "./ElementBase-D5QsC5Vw.mjs";
 const b = `
   :host {
     --ui-inline-edit-bg: transparent;

package/dist/input.cjs.js

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const $=require("./ElementBase-DxbvhLJs.js"),S=require("./control-name-BmoI1m3a.js"),q=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const L=require("./ElementBase-CbUsP3D6.js"),q=require("./slotted-input-BVq2QQg2.js"),T=require("./implicit-submit-B6M5Uc56.js"),I=require("./control-name-BmoI1m3a.js"),V=`
   <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=`
+`,D=`
   :host {
     --ui-input-action-size: 24px;
     --ui-input-padding: var(--ui-padding, 0);
@@ -69,6 +69,28 @@
     transform: translateY(-0.5px);
   }
 
+  /* description-position="below": the hint goes under the field (DOM order, and so what a
+     screen reader reads, stays label, description, field). */
+  :host([description-position="below"]) .meta:not([hidden]) {
+    display: contents;
+  }
+
+  :host([description-position="below"]) .label {
+    order: 0;
+  }
+
+  :host([description-position="below"]) .shell {
+    order: 1;
+  }
+
+  :host([description-position="below"]) .description {
+    order: 2;
+  }
+
+  :host([description-position="below"]) .footer {
+    order: 3;
+  }
+
   .description {
     margin: 0;
     color: var(--ui-description-color);
@@ -197,6 +219,25 @@
     color: var(--ui-input-placeholder);
   }
 
+  /* <input slot="input">: the author's own input (password managers, autofill), styled the same. */
+  ::slotted(input[slot="input"]) {
+    inline-size: 100%;
+    min-inline-size: 0;
+    box-sizing: border-box;
+    border: none;
+    background: transparent;
+    color: inherit;
+    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;
+    outline: none;
+  }
+
+  .control[data-slotted-input] > input {
+    display: none;
+  }
+
   input::-webkit-search-cancel-button {
     display: none;
   }
@@ -354,7 +395,7 @@
     --ui-label-color: #cbd5e1;
     --ui-description-color: #93a4bd;
     --ui-input-border-color: #334155;
-    --ui-input-focus-ring: #93c5fd;
+    --ui-input-focus-ring: var(--ui-color-accent-on-dark, #93c5fd);
     --ui-input-placeholder: color-mix(in srgb, #e2e8f0 46%, transparent);
     --ui-input-shadow: 0 2px 8px rgba(2, 6, 23, 0.24);
   }
@@ -488,16 +529,16 @@
       box-shadow: none;
     }
   }
-`;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>
+`;function r(a){return a.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function k(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 m(a,t){const e=a.getAttribute(t);if(e==null)return!1;const i=String(e).trim().toLowerCase();return i!=="false"&&i!=="0"}function M(a){return a==="none"||a==="large"||a==="full"}const E=class E extends L.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._internals=null,this._defaultValue=null,this._formDisabled=!1,this._slottedInput=null,this._dirty=!1,this._onLabelClick=t=>{t.target?.closest?.(".label")&&this._input?.focus()};try{this._internals=typeof this.attachInternals=="function"?this.attachInternals():null}catch{this._internals=null}this._onNativeKeyDown=this._onNativeKeyDown.bind(this),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(){this._dirty||(this._defaultValue=this.getAttribute("value")||""),super.connectedCallback(),this.root.addEventListener("slotchange",this._onSlotChange),this.root.addEventListener("click",this._onLabelClick),this._registerWithForm()}get form(){try{return this._internals?.form??null}catch{return null}}formResetCallback(){this._dirty=!1,this.value=this._defaultValue||""}formDisabledCallback(t){this._formDisabled=t,this._input&&(this._input.disabled=t||m(this,"disabled"))}_syncFormState(){const t=this._internals;if(t)try{if(this._slottedInput){t.setFormValue?.(null),t.setValidity?.({});return}t.setFormValue?.(this.value);const e=this._input;e&&typeof t.setValidity=="function"&&(e.validity&&!e.validity.valid?t.setValidity(e.validity,e.validationMessage,e):t.setValidity({}))}catch{}}_onNativeKeyDown(t){T.scheduleImplicitSubmit(t,this,()=>this.form)}disconnectedCallback(){this.root.removeEventListener("slotchange",this._onSlotChange),this.root.removeEventListener("click",this._onLabelClick),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&&!M(e)?this.style.setProperty("--ui-input-border-radius",e):this.style.removeProperty("--ui-input-border-radius")}_bindInput(){this._input&&(this._input.removeEventListener("input",this._onNativeInput),this._input.removeEventListener("change",this._onNativeChange),this._input.removeEventListener("keydown",this._onNativeKeyDown));const t=q.findSlottedInput(this);this._slottedInput=t;const e=this.root.querySelector(".control");t?e?.setAttribute("data-slotted-input",""):e?.removeAttribute("data-slotted-input"),this._input=t||this.root.querySelector(".control > input"),t&&!this.hasAttribute("value")&&t.value&&this.setAttribute("value",t.value),this._input&&(this._input.addEventListener("input",this._onNativeInput),this._input.addEventListener("change",this._onNativeChange),t||this._input.addEventListener("keydown",this._onNativeKeyDown))}_syncSlottedInputAttrs(t){const e=m(this,"disabled")||this._formDisabled;(this.hasAttribute("disabled")||this._formDisabled)&&(t.disabled=e),this.hasAttribute("required")&&(t.required=!0),this.hasAttribute("readonly")&&(t.readOnly=!0)}_syncControlAttrs(){if(this._syncHostTokens(),!this._input)return;if(this._slottedInput){this._syncSlottedInputAttrs(this._slottedInput);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")||"",g=this.getAttribute("autocomplete")||"",u=this.getAttribute("min")||"",l=this.getAttribute("max")||"",c=this.getAttribute("step")||"",d=this.getAttribute("spellcheck")||"",p=this.getAttribute("maxlength")||"",h=this.getAttribute("minlength")||"",b=m(this,"disabled"),f=this.hasAttribute("required"),v=this.hasAttribute("readonly");try{t.type=e}catch{t.type="text"}t.placeholder=i,t.disabled=b||this._formDisabled,t.required=f,t.readOnly=v,t.name=n,o?t.setAttribute("pattern",o):t.removeAttribute("pattern"),s?t.setAttribute("inputmode",s):t.removeAttribute("inputmode"),g?t.setAttribute("autocomplete",g):t.removeAttribute("autocomplete"),u?t.setAttribute("min",u):t.removeAttribute("min"),l?t.setAttribute("max",l):t.removeAttribute("max"),c?t.setAttribute("step",c):t.removeAttribute("step"),d?t.setAttribute("spellcheck",d):t.removeAttribute("spellcheck"),p&&Number.isFinite(Number(p))?t.setAttribute("maxlength",p):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._dirty||(this._defaultValue=i||""),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._input.removeEventListener("keydown",this._onNativeKeyDown)),this._clearBtn&&this._clearBtn.removeEventListener("click",this._onClearClick),this._clearBtn=null}_syncInputValue(t){this._input&&this._input.value!==t&&(this._input.value=t),this._syncFormState(),this._clearBtn&&(m(this,"clearable")&&t.length>0&&!m(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(t){t?.target?.name==="input"&&(this._bindInput(),this._syncControlAttrs(),this._syncInputValue(this.value)),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(),g=(this.getAttribute("description")||"").trim(),u=(this.getAttribute("data-error")||"").trim(),l=!!s||k(t),c=!!g||k(e),d=!!u||k(i),p=k(n),h=k(o),b=this.root.querySelector(".label"),f=this.root.querySelector(".description"),v=this.root.querySelector(".prefix"),_=this.root.querySelector(".suffix"),y=this.root.querySelector(".meta"),w=this.root.querySelector(".footer"),A=this.root.querySelector(".error"),C=this.root.querySelector(".counter");b&&(l?b.removeAttribute("hidden"):b.setAttribute("hidden","")),f&&(c?f.removeAttribute("hidden"):f.setAttribute("hidden","")),v&&(p?v.removeAttribute("hidden"):v.setAttribute("hidden","")),_&&(h?_.removeAttribute("hidden"):_.setAttribute("hidden","")),y&&(l||c?y.removeAttribute("hidden"):y.setAttribute("hidden",""));const z=this.hasAttribute("counter");if(C&&(z?C.removeAttribute("hidden"):C.setAttribute("hidden","")),A&&(d?A.removeAttribute("hidden"):A.setAttribute("hidden","")),w&&(d||z?w.removeAttribute("hidden"):w.setAttribute("hidden","")),this._slottedInput){const x=(this.getAttribute("label")||t?.assignedNodes({flatten:!0}).map(N=>N.textContent||"").join(" ")||this.getAttribute("aria-label")||"").trim(),$=(this.getAttribute("description")||"").trim();q.nameSlottedInput(this._slottedInput,x,$),this.getAttribute("validation")==="error"||!!u?this._slottedInput.setAttribute("aria-invalid","true"):this._slottedInput.removeAttribute("aria-invalid")}else if(this._input){I.syncControlName(this._input,this,l?`${this._uid}-label`:null);const x=[];c&&x.push(`${this._uid}-description`),d&&x.push(`${this._uid}-error`),I.syncControlDescription(this._input,this,this._uid,x),this.getAttribute("validation")==="error"||!!u?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._dirty=!0,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(),!(m(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=m(this,"disabled"),n=m(this,"clearable"),o=this.getAttribute("type")||"text",s=this.getAttribute("name")||"",g=this.hasAttribute("required"),u=this.getAttribute("pattern")||"",l=this.getAttribute("inputmode")||"",c=this.getAttribute("autocomplete")||"",d=this.getAttribute("min")||"",p=this.getAttribute("max")||"",h=this.getAttribute("step")||"",b=this.getAttribute("spellcheck")||"",f=this.getAttribute("maxlength")||"",v=this.getAttribute("minlength")||"",_=this.hasAttribute("readonly"),y=this.getAttribute("label")||"",w=this.getAttribute("description")||"",A=this.getAttribute("data-error")||"",C=this.getAttribute("validation")||"",z=this.hasAttribute("floating-label"),x=g?'<span class="required" aria-hidden="true">*</span>':"";this._syncHostTokens(),this.setContent(`
+      <style>${D}</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>
-            ${z}
+            <slot name="label">${r(y)}</slot>
+            ${x}
           </label>
           <p class="description" id="${this._uid}-description" part="description">
-            <slot name="description">${r(y)}</slot>
+            <slot name="description">${r(w)}</slot>
           </p>
         </div>
 
@@ -505,38 +546,39 @@
           <span class="prefix" part="prefix"><slot name="prefix"></slot></span>
 
           <div class="control" part="control">
+            <slot name="input"></slot>
             <input
               part="input"
-              type="${r(s)}"
-              name="${r(o)}"
+              type="${r(o)}"
+              name="${r(s)}"
               value="${r(t)}"
               placeholder="${r(e)}"
               ${g?"required":""}
-              ${p?`pattern="${r(p)}"`:""}
-              ${u?`inputmode="${r(u)}"`:""}
-              ${l?`autocomplete="${r(l)}"`:""}
-              ${c?`min="${r(c)}"`:""}
-              ${d?`max="${r(d)}"`:""}
+              ${u?`pattern="${r(u)}"`:""}
+              ${l?`inputmode="${r(l)}"`:""}
+              ${c?`autocomplete="${r(c)}"`:""}
+              ${d?`min="${r(d)}"`:""}
+              ${p?`max="${r(p)}"`:""}
               ${h?`step="${r(h)}"`:""}
               ${b?`spellcheck="${r(b)}"`:""}
               ${f?`maxlength="${r(f)}"`:""}
               ${v?`minlength="${r(v)}"`:""}
               ${i?"disabled":""}
-              ${m?"readonly":""}
+              ${_?"readonly":""}
             />
-            ${k?`<span class="floating-label" part="floating-label">${r(x||e||o||"Input")}</span>`:""}
+            ${z?`<span class="floating-label" part="floating-label">${r(y||e||s||"Input")}</span>`:""}
           </div>
 
-          <button class="clear-btn" part="clear" aria-label="Clear" ${n&&t&&!i&&!m?"":"hidden"}>${q}</button>
+          <button class="clear-btn" part="clear" aria-label="Clear" ${n&&t&&!i&&!_?"":"hidden"}>${V}</button>
 
           <span class="suffix" part="suffix"><slot name="suffix"></slot></span>
         </div>
 
         <div class="footer" part="footer">
           <p class="error" id="${this._uid}-error" part="error" aria-live="polite">
-            ${_?r(_):'<slot name="error"></slot>'}
+            ${A?r(A):'<slot name="error"></slot>'}
           </p>
           <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)),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",E);exports.UIInput=E;
+    `),this._detachListeners(),this._bindInput(),this._clearBtn=this.root.querySelector("button.clear-btn"),this._clearBtn?.addEventListener("click",this._onClearClick),this._syncControlAttrs(),this._syncInputValue(this._slottedInput?this.value: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"}};E.formAssociated=!0;let S=E;typeof customElements<"u"&&!customElements.get("ui-input")&&customElements.define("ui-input",S);exports.UIInput=S;

package/dist/input.esm.js

@@ -1,10 +1,12 @@
-import { E as S } from "./ElementBase-BeZT54Hj.mjs";
-import { s as E, a as $ } from "./control-name-Bpj7F34X.mjs";
-const q = `
+import { E as N } from "./ElementBase-D5QsC5Vw.mjs";
+import { f as I, n as L } from "./slotted-input-atWznLfm.mjs";
+import { s as T } from "./implicit-submit-Lr0-q2LR.mjs";
+import { s as V, a as D } from "./control-name-Bpj7F34X.mjs";
+const F = `
   <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 = `
+`, B = `
   :host {
     --ui-input-action-size: 24px;
     --ui-input-padding: var(--ui-padding, 0);
@@ -71,6 +73,28 @@ const q = `
     transform: translateY(-0.5px);
   }
 
+  /* description-position="below": the hint goes under the field (DOM order, and so what a
+     screen reader reads, stays label, description, field). */
+  :host([description-position="below"]) .meta:not([hidden]) {
+    display: contents;
+  }
+
+  :host([description-position="below"]) .label {
+    order: 0;
+  }
+
+  :host([description-position="below"]) .shell {
+    order: 1;
+  }
+
+  :host([description-position="below"]) .description {
+    order: 2;
+  }
+
+  :host([description-position="below"]) .footer {
+    order: 3;
+  }
+
   .description {
     margin: 0;
     color: var(--ui-description-color);
@@ -199,6 +223,25 @@ const q = `
     color: var(--ui-input-placeholder);
   }
 
+  /* <input slot="input">: the author's own input (password managers, autofill), styled the same. */
+  ::slotted(input[slot="input"]) {
+    inline-size: 100%;
+    min-inline-size: 0;
+    box-sizing: border-box;
+    border: none;
+    background: transparent;
+    color: inherit;
+    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;
+    outline: none;
+  }
+
+  .control[data-slotted-input] > input {
+    display: none;
+  }
+
   input::-webkit-search-cancel-button {
     display: none;
   }
@@ -356,7 +399,7 @@ const q = `
     --ui-label-color: #cbd5e1;
     --ui-description-color: #93a4bd;
     --ui-input-border-color: #334155;
-    --ui-input-focus-ring: #93c5fd;
+    --ui-input-focus-ring: var(--ui-color-accent-on-dark, #93c5fd);
     --ui-input-placeholder: color-mix(in srgb, #e2e8f0 46%, transparent);
     --ui-input-shadow: 0 2px 8px rgba(2, 6, 23, 0.24);
   }
@@ -494,23 +537,31 @@ const q = `
 function r(a) {
   return a.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function w(a) {
+function k(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) {
+function m(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) {
+function M(a) {
   return a === "none" || a === "large" || a === "full";
 }
-class L extends S {
+const E = class E extends N {
   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);
+    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._internals = null, this._defaultValue = null, this._formDisabled = !1, this._slottedInput = null, this._dirty = !1, this._onLabelClick = (t) => {
+      t.target?.closest?.(".label") && this._input?.focus();
+    };
+    try {
+      this._internals = typeof this.attachInternals == "function" ? this.attachInternals() : null;
+    } catch {
+      this._internals = null;
+    }
+    this._onNativeKeyDown = this._onNativeKeyDown.bind(this), 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 [
@@ -553,31 +604,80 @@ class L extends S {
     ];
   }
   connectedCallback() {
-    super.connectedCallback(), this.root.addEventListener("slotchange", this._onSlotChange), this._registerWithForm();
+    this._dirty || (this._defaultValue = this.getAttribute("value") || ""), super.connectedCallback(), this.root.addEventListener("slotchange", this._onSlotChange), this.root.addEventListener("click", this._onLabelClick), this._registerWithForm();
+  }
+  /** The `<form>` this field belongs to, if any. */
+  get form() {
+    try {
+      return this._internals?.form ?? null;
+    } catch {
+      return null;
+    }
+  }
+  formResetCallback() {
+    this._dirty = !1, this.value = this._defaultValue || "";
+  }
+  formDisabledCallback(t) {
+    this._formDisabled = t, this._input && (this._input.disabled = t || m(this, "disabled"));
+  }
+  _syncFormState() {
+    const t = this._internals;
+    if (t)
+      try {
+        if (this._slottedInput) {
+          t.setFormValue?.(null), t.setValidity?.({});
+          return;
+        }
+        t.setFormValue?.(this.value);
+        const e = this._input;
+        e && typeof t.setValidity == "function" && (e.validity && !e.validity.valid ? t.setValidity(e.validity, e.validationMessage, e) : t.setValidity({}));
+      } catch {
+      }
+  }
+  _onNativeKeyDown(t) {
+    T(t, this, () => this.form);
   }
   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();
+    this.root.removeEventListener("slotchange", this._onSlotChange), this.root.removeEventListener("click", this._onLabelClick), 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");
+    e && !M(e) ? this.style.setProperty("--ui-input-border-radius", e) : this.style.removeProperty("--ui-input-border-radius");
+  }
+  /** The control: the author's <input slot="input"> when there is one, else the inner input. */
+  _bindInput() {
+    this._input && (this._input.removeEventListener("input", this._onNativeInput), this._input.removeEventListener("change", this._onNativeChange), this._input.removeEventListener("keydown", this._onNativeKeyDown));
+    const t = I(this);
+    this._slottedInput = t;
+    const e = this.root.querySelector(".control");
+    t ? e?.setAttribute("data-slotted-input", "") : e?.removeAttribute("data-slotted-input"), this._input = t || this.root.querySelector(".control > input"), t && !this.hasAttribute("value") && t.value && this.setAttribute("value", t.value), this._input && (this._input.addEventListener("input", this._onNativeInput), this._input.addEventListener("change", this._onNativeChange), t || this._input.addEventListener("keydown", this._onNativeKeyDown));
+  }
+  // The author's input keeps its own type, name, autocomplete, placeholder...: only the states the
+  // host was given are passed on, so the component never undoes what password managers rely on.
+  _syncSlottedInputAttrs(t) {
+    const e = m(this, "disabled") || this._formDisabled;
+    (this.hasAttribute("disabled") || this._formDisabled) && (t.disabled = e), this.hasAttribute("required") && (t.required = !0), this.hasAttribute("readonly") && (t.readOnly = !0);
   }
   _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");
+    if (this._slottedInput) {
+      this._syncSlottedInputAttrs(this._slottedInput);
+      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") || "", g = this.getAttribute("autocomplete") || "", u = this.getAttribute("min") || "", l = this.getAttribute("max") || "", c = this.getAttribute("step") || "", d = this.getAttribute("spellcheck") || "", p = this.getAttribute("maxlength") || "", h = this.getAttribute("minlength") || "", b = m(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");
+    t.placeholder = i, t.disabled = b || this._formDisabled, t.required = f, t.readOnly = v, t.name = n, o ? t.setAttribute("pattern", o) : t.removeAttribute("pattern"), s ? t.setAttribute("inputmode", s) : t.removeAttribute("inputmode"), g ? t.setAttribute("autocomplete", g) : t.removeAttribute("autocomplete"), u ? t.setAttribute("min", u) : t.removeAttribute("min"), l ? t.setAttribute("max", l) : t.removeAttribute("max"), c ? t.setAttribute("step", c) : t.removeAttribute("step"), d ? t.setAttribute("spellcheck", d) : t.removeAttribute("spellcheck"), p && Number.isFinite(Number(p)) ? t.setAttribute("maxlength", p) : 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 || "");
+      this._dirty || (this._defaultValue = i || ""), this._syncInputValue(i || "");
       return;
     }
     if (t === "name" && this._registerWithForm(), t === "autofocus" && !this.hasAttribute("autofocus") && (this._autofocusApplied = !1), (/* @__PURE__ */ new Set([
@@ -656,50 +756,53 @@ class L extends S {
   _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,
+      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 {
     }
   }
   _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;
+    this._input && (this._input.removeEventListener("input", this._onNativeInput), this._input.removeEventListener("change", this._onNativeChange), this._input.removeEventListener("keydown", this._onNativeKeyDown)), 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", ""));
+    this._input && this._input.value !== t && (this._input.value = t), this._syncFormState(), this._clearBtn && (m(this, "clearable") && t.length > 0 && !m(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 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();
+  _onSlotChange(t) {
+    t?.target?.name === "input" && (this._bindInput(), this._syncControlAttrs(), this._syncInputValue(this.value)), 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) {
-      E(this._input, this, u ? `${this._uid}-label` : null);
-      const z = [];
-      l && z.push(`${this._uid}-description`), c && z.push(`${this._uid}-error`), $(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");
+    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(), g = (this.getAttribute("description") || "").trim(), u = (this.getAttribute("data-error") || "").trim(), l = !!s || k(t), c = !!g || k(e), d = !!u || k(i), p = k(n), h = k(o), b = this.root.querySelector(".label"), f = this.root.querySelector(".description"), v = this.root.querySelector(".prefix"), _ = this.root.querySelector(".suffix"), y = this.root.querySelector(".meta"), w = this.root.querySelector(".footer"), A = this.root.querySelector(".error"), C = this.root.querySelector(".counter");
+    b && (l ? b.removeAttribute("hidden") : b.setAttribute("hidden", "")), f && (c ? f.removeAttribute("hidden") : f.setAttribute("hidden", "")), v && (p ? v.removeAttribute("hidden") : v.setAttribute("hidden", "")), _ && (h ? _.removeAttribute("hidden") : _.setAttribute("hidden", "")), y && (l || c ? y.removeAttribute("hidden") : y.setAttribute("hidden", ""));
+    const z = this.hasAttribute("counter");
+    if (C && (z ? C.removeAttribute("hidden") : C.setAttribute("hidden", "")), A && (d ? A.removeAttribute("hidden") : A.setAttribute("hidden", "")), w && (d || z ? w.removeAttribute("hidden") : w.setAttribute("hidden", "")), this._slottedInput) {
+      const x = (this.getAttribute("label") || t?.assignedNodes({ flatten: !0 }).map((q) => q.textContent || "").join(" ") || this.getAttribute("aria-label") || "").trim(), $ = (this.getAttribute("description") || "").trim();
+      L(this._slottedInput, x, $), this.getAttribute("validation") === "error" || !!u ? this._slottedInput.setAttribute("aria-invalid", "true") : this._slottedInput.removeAttribute("aria-invalid");
+    } else if (this._input) {
+      V(this._input, this, l ? `${this._uid}-label` : null);
+      const x = [];
+      c && x.push(`${this._uid}-description`), d && x.push(`${this._uid}-error`), D(this._input, this, this._uid, x), this.getAttribute("validation") === "error" || !!u ? 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);
+    this._dirty = !0, 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;
@@ -710,7 +813,7 @@ class L extends S {
     this._emitValueEvent("change", e);
   }
   _onClearClick(t) {
-    if (t.preventDefault(), !(A(this, "disabled") || this.hasAttribute("readonly")) && this._input) {
+    if (t.preventDefault(), !(m(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 });
@@ -720,17 +823,17 @@ class L extends S {
     }
   }
   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>' : "";
+    const t = this.getAttribute("value") || "", e = this.getAttribute("placeholder") || "", i = m(this, "disabled"), n = m(this, "clearable"), o = this.getAttribute("type") || "text", s = this.getAttribute("name") || "", g = this.hasAttribute("required"), u = this.getAttribute("pattern") || "", l = this.getAttribute("inputmode") || "", c = this.getAttribute("autocomplete") || "", d = this.getAttribute("min") || "", p = this.getAttribute("max") || "", h = this.getAttribute("step") || "", b = this.getAttribute("spellcheck") || "", f = this.getAttribute("maxlength") || "", v = this.getAttribute("minlength") || "", _ = this.hasAttribute("readonly"), y = this.getAttribute("label") || "", w = this.getAttribute("description") || "", A = this.getAttribute("data-error") || "", C = this.getAttribute("validation") || "", z = this.hasAttribute("floating-label"), x = g ? '<span class="required" aria-hidden="true">*</span>' : "";
     this._syncHostTokens(), this.setContent(`
-      <style>${N}</style>
+      <style>${B}</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>
-            ${z}
+            <slot name="label">${r(y)}</slot>
+            ${x}
           </label>
           <p class="description" id="${this._uid}-description" part="description">
-            <slot name="description">${r(y)}</slot>
+            <slot name="description">${r(w)}</slot>
           </p>
         </div>
 
@@ -738,41 +841,42 @@ class L extends S {
           <span class="prefix" part="prefix"><slot name="prefix"></slot></span>
 
           <div class="control" part="control">
+            <slot name="input"></slot>
             <input
               part="input"
-              type="${r(s)}"
-              name="${r(o)}"
+              type="${r(o)}"
+              name="${r(s)}"
               value="${r(t)}"
               placeholder="${r(e)}"
               ${g ? "required" : ""}
-              ${p ? `pattern="${r(p)}"` : ""}
-              ${u ? `inputmode="${r(u)}"` : ""}
-              ${l ? `autocomplete="${r(l)}"` : ""}
-              ${c ? `min="${r(c)}"` : ""}
-              ${d ? `max="${r(d)}"` : ""}
+              ${u ? `pattern="${r(u)}"` : ""}
+              ${l ? `inputmode="${r(l)}"` : ""}
+              ${c ? `autocomplete="${r(c)}"` : ""}
+              ${d ? `min="${r(d)}"` : ""}
+              ${p ? `max="${r(p)}"` : ""}
               ${h ? `step="${r(h)}"` : ""}
               ${b ? `spellcheck="${r(b)}"` : ""}
               ${f ? `maxlength="${r(f)}"` : ""}
               ${v ? `minlength="${r(v)}"` : ""}
               ${i ? "disabled" : ""}
-              ${m ? "readonly" : ""}
+              ${_ ? "readonly" : ""}
             />
-            ${k ? `<span class="floating-label" part="floating-label">${r(x || e || o || "Input")}</span>` : ""}
+            ${z ? `<span class="floating-label" part="floating-label">${r(y || e || s || "Input")}</span>` : ""}
           </div>
 
-          <button class="clear-btn" part="clear" aria-label="Clear" ${n && t && !i && !m ? "" : "hidden"}>${q}</button>
+          <button class="clear-btn" part="clear" aria-label="Clear" ${n && t && !i && !_ ? "" : "hidden"}>${F}</button>
 
           <span class="suffix" part="suffix"><slot name="suffix"></slot></span>
         </div>
 
         <div class="footer" part="footer">
           <p class="error" id="${this._uid}-error" part="error" aria-live="polite">
-            ${_ ? r(_) : '<slot name="error"></slot>'}
+            ${A ? r(A) : '<slot name="error"></slot>'}
           </p>
           <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)), this._clearBtn?.addEventListener("click", this._onClearClick), this._syncControlAttrs(), this._syncInputValue(t), this._syncDerivedState(), this.hasAttribute("autofocus") && !this._autofocusApplied && (this._autofocusApplied = !0, queueMicrotask(() => {
+    `), this._detachListeners(), this._bindInput(), this._clearBtn = this.root.querySelector("button.clear-btn"), this._clearBtn?.addEventListener("click", this._onClearClick), this._syncControlAttrs(), this._syncInputValue(this._slottedInput ? this.value : t), this._syncDerivedState(), this.hasAttribute("autofocus") && !this._autofocusApplied && (this._autofocusApplied = !0, queueMicrotask(() => {
       if (this.isConnected)
         try {
           this._input?.focus({ preventScroll: !0 });
@@ -784,8 +888,10 @@ class L extends S {
   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", L);
+};
+E.formAssociated = !0;
+let S = E;
+typeof customElements < "u" && !customElements.get("ui-input") && customElements.define("ui-input", S);
 export {
-  L as UIInput
+  S as UIInput
 };