@editora/ui-core 0.2.2 → 0.3.0

package/dist/password-field.cjs.js

@@ -1,19 +1,19 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const q=require("./ElementBase-DxbvhLJs.js"),p=require("./control-name-BmoI1m3a.js"),B=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const L=require("./ElementBase-CbUsP3D6.js"),E=require("./slotted-input-BVq2QQg2.js"),M=require("./form-control-B90_3kYN.js"),F=require("./implicit-submit-B6M5Uc56.js"),g=require("./control-name-BmoI1m3a.js"),$=`
   <svg viewBox="0 0 20 20" aria-hidden="true" focusable="false">
     <path d="m6 6 8 8M14 6l-8 8" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
   </svg>
-`,C=`
+`,q=`
   <svg viewBox="0 0 20 20" aria-hidden="true" focusable="false">
     <path d="M2.4 10c1.5-3 4.3-5 7.6-5s6.1 2 7.6 5c-1.5 3-4.3 5-7.6 5s-6.1-2-7.6-5Z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
     <circle cx="10" cy="10" r="2.5" fill="none" stroke="currentColor" stroke-width="1.6"/>
   </svg>
-`,N=`
+`,U=`
   <svg viewBox="0 0 20 20" aria-hidden="true" focusable="false">
     <path d="M3 3l14 14" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
     <path d="M6.1 6.1A9.3 9.3 0 0 1 10 5c3.3 0 6.1 2 7.6 5-.5 1-1.2 1.9-2 2.7M8.2 8.2A2.5 2.5 0 0 1 11.8 12" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
     <path d="M4.4 7.1C3.6 7.9 3 8.9 2.4 10c1.5 3 4.3 5 7.6 5 1.2 0 2.4-.3 3.4-.7" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
   </svg>
-`,M=`
+`,D=`
   :host {
     --ui-input-action-size: 24px;
     --ui-input-padding: var(--ui-padding, 0);
@@ -208,6 +208,25 @@
     color: var(--ui-input-placeholder);
   }
 
+  /* <input slot="input">: the author's own input, so password managers can fill it. */
+  ::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)/1.4 "Inter", "IBM Plex Sans", -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;
+  }
+
   .actions {
     flex: 0 0 auto;
     display: inline-flex;
@@ -451,7 +470,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);
     --ui-password-field-toggle-hover-bg: color-mix(in srgb, #e2e8f0 12%, transparent);
@@ -578,16 +597,16 @@
       box-shadow: none;
     }
   }
-`,I=["value","placeholder","disabled","clearable","debounce","validation","size","minlength","maxlength","readonly","autofocus","counter","floating-label","name","required","pattern","autocomplete","spellcheck","variant","tone","density","shape","color","radius","label","description","data-error"];function u(o){return o.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function g(o){if(!o)return!1;const t=o.assignedNodes({flatten:!0});return t.length?t.some(e=>e.nodeType===Node.TEXT_NODE?!!e.textContent?.trim():e.nodeType===Node.ELEMENT_NODE):!1}function c(o,t){const e=o.getAttribute(t);if(e==null)return!1;const i=String(e).trim().toLowerCase();return i!=="false"&&i!=="0"}function U(o){return o==="none"||o==="large"||o==="full"}function L(o){let t=0;switch(o.length>=8&&(t+=1),/[a-z]/.test(o)&&/[A-Z]/.test(o)&&(t+=1),/\d/.test(o)&&(t+=1),(/[^A-Za-z0-9]/.test(o)||o.length>=14)&&(t+=1),Math.max(1,Math.min(4,t||1))){case 1:return{score:1,label:"Weak",caption:"Use more characters and mix case, numbers, or symbols."};case 2:return{score:2,label:"Fair",caption:"Add numbers or symbols to reduce guessability."};case 3:return{score:3,label:"Good",caption:"Solid baseline. Longer passphrases are even better."};default:return{score:4,label:"Strong",caption:"Strong password shape for production accounts."}}}class z extends q.ElementBase{constructor(){super(),this._input=null,this._clearBtn=null,this._toggleBtn=null,this._debounceTimer=null,this._formUnregister=null,this._uid=Math.random().toString(36).slice(2,9),this._autofocusApplied=!1,this._revealed=!1,this._lastStrengthKey="",this.strengthEvaluator=null,this._onNativeInput=this._onNativeInput.bind(this),this._onNativeChange=this._onNativeChange.bind(this),this._onClearClick=this._onClearClick.bind(this),this._onToggleClick=this._onToggleClick.bind(this),this._onSlotChange=this._onSlotChange.bind(this)}static get observedAttributes(){return[...I,"aria-label","aria-description","aria-describedby","show-strength","revealable"]}get value(){return this.getAttribute("value")||""}set value(t){t?this.setAttribute("value",t):this.removeAttribute("value")}get revealed(){return this._revealed}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()}attributeChangedCallback(t,e,i){if(e!==i&&(t==="name"&&this.isConnected&&this._registerWithForm(),t==="autofocus"&&!this.hasAttribute("autofocus")&&(this._autofocusApplied=!1),!(!this.isConnected||!this._input))){if(t==="value"){this._syncInputValue(this.value),this._syncStrengthUi();return}this._syncUi(),t==="autofocus"&&this.hasAttribute("autofocus")&&!this._autofocusApplied&&(this._autofocusApplied=!0,queueMicrotask(()=>{if(this.isConnected)try{this._input?.focus({preventScroll:!0})}catch{this._input?.focus()}}))}}shouldRenderOnAttributeChange(){return!1}focus(t){if(this._input){this._input.focus(t);return}super.focus(t)}blur(){this._input?.blur()}select(){this._input?.select()}toggleVisibility(t){if(c(this,"disabled")||this.hasAttribute("readonly")||this.getAttribute("revealable")==="false")return;const e=typeof t=="boolean"?t:!this._revealed;if(e===this._revealed)return;const i=this._input?.selectionStart??null,r=this._input?.selectionEnd??null;this._revealed=e,this._syncToggleUi(),this.dispatchEvent(new CustomEvent("visibility-change",{detail:{revealed:this._revealed},bubbles:!0,composed:!0})),queueMicrotask(()=>{const s=this._input;if(s){try{s.focus({preventScroll:!0})}catch{s.focus()}if(i!=null&&r!=null&&typeof s.setSelectionRange=="function")try{s.setSelectionRange(i,r)}catch{}}})}render(){const t=this.value,e=this.getAttribute("label")||"",i=this.getAttribute("description")||"",r=this.getAttribute("data-error")||"",s=this.getAttribute("placeholder")||"",n=this.hasAttribute("required")?'<span class="required" aria-hidden="true">*</span>':"",a=this.hasAttribute("floating-label");this.setContent(`
-      <style>${M}</style>
+`,V=["value","placeholder","disabled","clearable","debounce","validation","size","minlength","maxlength","readonly","autofocus","counter","floating-label","name","required","pattern","autocomplete","spellcheck","variant","tone","density","shape","color","radius","label","description","data-error"];function h(o){return o.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function b(o){if(!o)return!1;const t=o.assignedNodes({flatten:!0});return t.length?t.some(e=>e.nodeType===Node.TEXT_NODE?!!e.textContent?.trim():e.nodeType===Node.ELEMENT_NODE):!1}function c(o,t){const e=o.getAttribute(t);if(e==null)return!1;const i=String(e).trim().toLowerCase();return i!=="false"&&i!=="0"}function K(o){return o==="none"||o==="large"||o==="full"}function O(o){let t=0;switch(o.length>=8&&(t+=1),/[a-z]/.test(o)&&/[A-Z]/.test(o)&&(t+=1),/\d/.test(o)&&(t+=1),(/[^A-Za-z0-9]/.test(o)||o.length>=14)&&(t+=1),Math.max(1,Math.min(4,t||1))){case 1:return{score:1,label:"Weak",caption:"Use more characters and mix case, numbers, or symbols."};case 2:return{score:2,label:"Fair",caption:"Add numbers or symbols to reduce guessability."};case 3:return{score:3,label:"Good",caption:"Solid baseline. Longer passphrases are even better."};default:return{score:4,label:"Strong",caption:"Strong password shape for production accounts."}}}const m=class m extends L.ElementBase{constructor(){super(),this._slottedInput=null,this._formControl=new M.FormControl(this,{getValue:()=>this._slottedInput?null:this.value,getValidity:()=>({control:this._slottedInput?null:this._input}),defaultAttribute:"value",onFormDisabled:t=>{this._input&&(this._input.disabled=t||this.hasAttribute("disabled"))}}),this._input=null,this._clearBtn=null,this._toggleBtn=null,this._debounceTimer=null,this._formUnregister=null,this._uid=Math.random().toString(36).slice(2,9),this._autofocusApplied=!1,this._revealed=!1,this._lastStrengthKey="",this.strengthEvaluator=null,this._onLabelClick=t=>{t.target?.closest?.(".label")&&this._input?.focus()},this._onNativeInput=this._onNativeInput.bind(this),this._onNativeChange=this._onNativeChange.bind(this),this._onNativeKeyDown=this._onNativeKeyDown.bind(this),this._onClearClick=this._onClearClick.bind(this),this._onToggleClick=this._onToggleClick.bind(this),this._onSlotChange=this._onSlotChange.bind(this)}static get observedAttributes(){return[...V,"aria-label","aria-description","aria-describedby","show-strength","revealable"]}get value(){return this.getAttribute("value")||""}set value(t){t?this.setAttribute("value",t):this.removeAttribute("value")}get revealed(){return this._revealed}formResetCallback(){this._formControl.formResetCallback()}formDisabledCallback(t){this._formControl.formDisabledCallback(t)}get form(){return this._formControl.form}connectedCallback(){super.connectedCallback(),this._formControl.connect(),this.root.addEventListener("slotchange",this._onSlotChange),this.root.addEventListener("click",this._onLabelClick),this._registerWithForm()}disconnectedCallback(){this._formControl.disconnect(),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()}attributeChangedCallback(t,e,i){if(e!==i&&(t==="name"&&this.isConnected&&this._registerWithForm(),t==="autofocus"&&!this.hasAttribute("autofocus")&&(this._autofocusApplied=!1),!(!this.isConnected||!this._input))){if(t==="value"){this._syncInputValue(this.value),this._syncStrengthUi();return}this._syncUi(),t==="autofocus"&&this.hasAttribute("autofocus")&&!this._autofocusApplied&&(this._autofocusApplied=!0,queueMicrotask(()=>{if(this.isConnected)try{this._input?.focus({preventScroll:!0})}catch{this._input?.focus()}}))}}shouldRenderOnAttributeChange(){return!1}focus(t){if(this._input){this._input.focus(t);return}super.focus(t)}blur(){this._input?.blur()}select(){this._input?.select()}toggleVisibility(t){if(c(this,"disabled")||this.hasAttribute("readonly")||this.getAttribute("revealable")==="false")return;const e=typeof t=="boolean"?t:!this._revealed;if(e===this._revealed)return;const i=this._input?.selectionStart??null,r=this._input?.selectionEnd??null;this._revealed=e,this._syncToggleUi(),this.dispatchEvent(new CustomEvent("visibility-change",{detail:{revealed:this._revealed},bubbles:!0,composed:!0})),queueMicrotask(()=>{const s=this._input;if(s){try{s.focus({preventScroll:!0})}catch{s.focus()}if(i!=null&&r!=null&&typeof s.setSelectionRange=="function")try{s.setSelectionRange(i,r)}catch{}}})}render(){const t=this.value,e=this.getAttribute("label")||"",i=this.getAttribute("description")||"",r=this.getAttribute("data-error")||"",s=this.getAttribute("placeholder")||"",n=this.hasAttribute("required")?'<span class="required" aria-hidden="true">*</span>':"",a=this.hasAttribute("floating-label");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">${u(e)}</slot>
+            <slot name="label">${h(e)}</slot>
             ${n}
           </label>
           <p class="description" id="${this._uid}-description" part="description">
-            <slot name="description">${u(i)}</slot>
+            <slot name="description">${h(i)}</slot>
           </p>
         </div>
 
@@ -595,25 +614,26 @@
           <span class="prefix" part="prefix"><slot name="prefix"></slot></span>
 
           <div class="control" part="control">
+            <slot name="input"></slot>
             <input
               part="input"
               type="password"
-              value="${u(t)}"
-              placeholder="${u(s)}"
+              value="${h(t)}"
+              placeholder="${h(s)}"
             />
-            ${a?`<span class="floating-label" part="floating-label">${u(e||s||"Password")}</span>`:""}
+            ${a?`<span class="floating-label" part="floating-label">${h(e||s||"Password")}</span>`:""}
           </div>
 
           <div class="actions" part="actions">
-            <button class="clear-btn" part="clear" type="button" aria-label="Clear" hidden>${B}</button>
+            <button class="clear-btn" part="clear" type="button" aria-label="Clear" hidden>${$}</button>
             <span class="suffix-slot" part="suffix"><slot name="suffix"></slot></span>
-            <button class="toggle-btn" part="toggle" type="button" aria-label="Show password">${C}</button>
+            <button class="toggle-btn" part="toggle" type="button" aria-label="Show password">${q}</button>
           </div>
         </div>
 
         <div class="footer" part="footer">
           <p class="error" id="${this._uid}-error" part="error" aria-live="polite">
-            <slot name="error">${u(r)}</slot>
+            <slot name="error">${h(r)}</slot>
           </p>
           <p class="counter" part="counter"></p>
         </div>
@@ -628,4 +648,4 @@
           </div>
         </div>
       </div>
-    `),this._detachListeners(),this._input=this.root.querySelector("input"),this._clearBtn=this.root.querySelector(".clear-btn"),this._toggleBtn=this.root.querySelector(".toggle-btn"),this._input?.addEventListener("input",this._onNativeInput),this._input?.addEventListener("change",this._onNativeChange),this._clearBtn?.addEventListener("click",this._onClearClick),this._toggleBtn?.addEventListener("click",this._onToggleClick),this._syncUi()}_detachListeners(){this._input?.removeEventListener("input",this._onNativeInput),this._input?.removeEventListener("change",this._onNativeChange),this._clearBtn?.removeEventListener("click",this._onClearClick),this._toggleBtn?.removeEventListener("click",this._onToggleClick),this._clearBtn=null,this._toggleBtn=null}_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&&!U(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=c(this,"disabled"),e=this.hasAttribute("required"),i=this.hasAttribute("readonly"),r=this.getAttribute("maxlength")||"",s=this.getAttribute("minlength")||"",n=this.getAttribute("pattern")||"",a=this.getAttribute("autocomplete")||"current-password",l=this.getAttribute("spellcheck")||"",h=this.getAttribute("placeholder")||"",d=this.getAttribute("name")||"";this._input.disabled=t,this._input.required=e,this._input.readOnly=i,this._input.placeholder=h,this._input.name=d,this._input.type=this._revealed?"text":"password",this._input.setAttribute("autocomplete",a),n?this._input.setAttribute("pattern",n):this._input.removeAttribute("pattern"),l?this._input.setAttribute("spellcheck",l):this._input.removeAttribute("spellcheck"),r&&Number.isFinite(Number(r))?this._input.setAttribute("maxlength",r):this._input.removeAttribute("maxlength"),s&&Number.isFinite(Number(s))?this._input.setAttribute("minlength",s):this._input.removeAttribute("minlength")}_syncInputValue(t){this._input&&this._input.value!==t&&(this._input.value=t);const e=this.root.querySelector(".shell");e&&e.setAttribute("data-has-value",t?"true":"false"),this._clearBtn&&(c(this,"clearable")&&t.length>0&&!c(this,"disabled")&&!this.hasAttribute("readonly")?this._clearBtn.removeAttribute("hidden"):this._clearBtn.setAttribute("hidden",""));const i=this.root.querySelector(".counter");if(i&&this.hasAttribute("counter")){const r=this.getAttribute("maxlength");i.textContent=r?`${t.length}/${r}`:String(t.length)}else i&&(i.textContent="")}_syncToggleUi(){if(!this._toggleBtn||!this._input)return;this._input.type=this._revealed?"text":"password";const t=this.getAttribute("revealable")!=="false",e=c(this,"disabled")||this.hasAttribute("readonly");this._toggleBtn.hidden=!t,this._toggleBtn.disabled=e,this._toggleBtn.setAttribute("aria-pressed",this._revealed?"true":"false"),this._toggleBtn.setAttribute("aria-label",this._revealed?"Hide password":"Show password");const i=this._revealed?"revealed":"hidden";this._toggleBtn.dataset.iconState!==i&&(this._toggleBtn.dataset.iconState=i,this._toggleBtn.innerHTML=this._revealed?N:C)}_syncStrengthUi(){const t=this.root.querySelector(".strength"),e=this.root.querySelector(".strength-label"),i=this.root.querySelector(".strength-caption");if(!t||!e||!i)return;const r=this.value,s=this.hasAttribute("show-strength")&&r.length>0;if(t.hidden=!s,!s){delete t.dataset.score,e.textContent="",i.textContent="",this._lastStrengthKey="";return}const n=(this.strengthEvaluator||L)(r);t.dataset.score=String(n.score),e.textContent=n.label,i.textContent=n.caption;const a=`${r}|${n.score}|${n.label}|${n.caption}`;a!==this._lastStrengthKey&&(this._lastStrengthKey=a,this.dispatchEvent(new CustomEvent("strength-change",{detail:{value:r,score:n.score,label:n.label,caption:n.caption},bubbles:!0,composed:!0})))}_syncDerivedState(){const t=this.root.querySelector('slot[name="label"]'),e=this.root.querySelector('slot[name="description"]'),i=this.root.querySelector('slot[name="error"]'),r=this.root.querySelector('slot[name="prefix"]'),s=this.root.querySelector('slot[name="suffix"]'),n=(this.getAttribute("label")||"").trim(),a=(this.getAttribute("description")||"").trim(),l=(this.getAttribute("data-error")||"").trim(),h=!!n||g(t),d=!!a||g(e),b=!!l||g(i),E=g(r),T=g(s),v=this.root.querySelector(".label"),m=this.root.querySelector(".description"),x=this.root.querySelector(".prefix"),_=this.root.querySelector(".suffix-slot"),y=this.root.querySelector(".meta"),w=this.root.querySelector(".footer"),A=this.root.querySelector(".error"),k=this.root.querySelector(".counter");p.syncSlotFallbackText(t,n),p.syncSlotFallbackText(e,a),p.syncSlotFallbackText(i,l),v&&v.toggleAttribute("hidden",!h),m&&m.toggleAttribute("hidden",!d),x&&x.toggleAttribute("hidden",!E),_&&_.toggleAttribute("hidden",!T),y&&y.toggleAttribute("hidden",!h&&!d);const S=this.hasAttribute("counter");if(k&&k.toggleAttribute("hidden",!S),A&&A.toggleAttribute("hidden",!b),w&&w.toggleAttribute("hidden",!b&&!S),!this._input)return;p.syncControlName(this._input,this,h?`${this._uid}-label`:null);const f=[];d&&f.push(`${this._uid}-description`),b&&f.push(`${this._uid}-error`),p.syncControlDescription(this._input,this,this._uid,f),this.getAttribute("validation")==="error"||!!l?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")}_syncUi(){this._syncControlAttrs(),this._syncInputValue(this.value),this._syncDerivedState(),this._syncToggleUi(),this._syncStrengthUi(),this.hasAttribute("autofocus")&&!this._autofocusApplied&&(this._autofocusApplied=!0,queueMicrotask(()=>{if(this.isConnected)try{this._input?.focus({preventScroll:!0})}catch{this._input?.focus()}}))}_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 r=this.getRootNode().host?.closest?.("ui-form")||null||this.closest("ui-form"),s=this.getAttribute("name");r&&typeof r.registerField=="function"&&s&&(this._formUnregister=r.registerField(s,{name:s,getValue:()=>this.value,setValue:n=>{this.value=String(n??"")},validate:async()=>this._input?{valid:this._input.checkValidity(),message:this._input.validationMessage||void 0}:{valid:!0},setError:n=>{n?(this.setAttribute("validation","error"),this.setAttribute("data-error",n)):(this.removeAttribute("validation"),this.removeAttribute("data-error")),this._syncUi()}}))}catch{}}_onSlotChange(){this._syncDerivedState()}_onNativeInput(t){const e=t.target.value;this.getAttribute("value")!==e?e?this.setAttribute("value",e):this.removeAttribute("value"):(this._syncInputValue(e),this._syncStrengthUi()),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(),!(c(this,"disabled")||this.hasAttribute("readonly"))&&this._input){this.value="",this._input.value="",this._input.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this._input.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("clear",{bubbles:!0,composed:!0}));try{this._input.focus({preventScroll:!0})}catch{this._input.focus()}}}_onToggleClick(t){t.preventDefault(),t.stopPropagation(),this.toggleVisibility()}}typeof customElements<"u"&&!customElements.get("ui-password-field")&&customElements.define("ui-password-field",z);exports.UIPasswordField=z;
+    `),this._detachListeners(),this._bindInput(),this._clearBtn=this.root.querySelector(".clear-btn"),this._toggleBtn=this.root.querySelector(".toggle-btn"),this._clearBtn?.addEventListener("click",this._onClearClick),this._toggleBtn?.addEventListener("click",this._onToggleClick),this._syncUi()}_bindInput(){this._input?.removeEventListener("input",this._onNativeInput),this._input?.removeEventListener("change",this._onNativeChange),this._input?.removeEventListener("keydown",this._onNativeKeyDown);const t=E.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?.addEventListener("input",this._onNativeInput),this._input?.addEventListener("change",this._onNativeChange),t||this._input?.addEventListener("keydown",this._onNativeKeyDown)}_detachListeners(){this._input?.removeEventListener("input",this._onNativeInput),this._input?.removeEventListener("change",this._onNativeChange),this._input?.removeEventListener("keydown",this._onNativeKeyDown),this._clearBtn?.removeEventListener("click",this._onClearClick),this._toggleBtn?.removeEventListener("click",this._onToggleClick),this._clearBtn=null,this._toggleBtn=null}_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&&!K(e)?this.style.setProperty("--ui-input-border-radius",e):this.style.removeProperty("--ui-input-border-radius")}_syncControlAttrs(){if(this._syncHostTokens(),!this._input)return;if(this._slottedInput){const l=this._slottedInput;(this.hasAttribute("disabled")||this._formControl.disabledByForm)&&(l.disabled=c(this,"disabled")||this._formControl.disabledByForm),this.hasAttribute("required")&&(l.required=!0),this.hasAttribute("readonly")&&(l.readOnly=!0),l.type=this._revealed?"text":"password";return}const t=c(this,"disabled"),e=this.hasAttribute("required"),i=this.hasAttribute("readonly"),r=this.getAttribute("maxlength")||"",s=this.getAttribute("minlength")||"",n=this.getAttribute("pattern")||"",a=this.getAttribute("autocomplete")||"current-password",u=this.getAttribute("spellcheck")||"",d=this.getAttribute("placeholder")||"",p=this.getAttribute("name")||"";this._input.disabled=t||this._formControl.disabledByForm,this._input.required=e,this._input.readOnly=i,this._input.placeholder=d,this._input.name=p,this._input.type=this._revealed?"text":"password",this._input.setAttribute("autocomplete",a),n?this._input.setAttribute("pattern",n):this._input.removeAttribute("pattern"),u?this._input.setAttribute("spellcheck",u):this._input.removeAttribute("spellcheck"),r&&Number.isFinite(Number(r))?this._input.setAttribute("maxlength",r):this._input.removeAttribute("maxlength"),s&&Number.isFinite(Number(s))?this._input.setAttribute("minlength",s):this._input.removeAttribute("minlength")}_syncInputValue(t){this._input&&this._input.value!==t&&(this._input.value=t);const e=this.root.querySelector(".shell");e&&e.setAttribute("data-has-value",t?"true":"false"),this._clearBtn&&(c(this,"clearable")&&t.length>0&&!c(this,"disabled")&&!this.hasAttribute("readonly")?this._clearBtn.removeAttribute("hidden"):this._clearBtn.setAttribute("hidden",""));const i=this.root.querySelector(".counter");if(i&&this.hasAttribute("counter")){const r=this.getAttribute("maxlength");i.textContent=r?`${t.length}/${r}`:String(t.length)}else i&&(i.textContent="")}_syncToggleUi(){if(!this._toggleBtn||!this._input)return;this._input.type=this._revealed?"text":"password";const t=this.getAttribute("revealable")!=="false",e=c(this,"disabled")||this.hasAttribute("readonly");this._toggleBtn.hidden=!t,this._toggleBtn.disabled=e,this._toggleBtn.setAttribute("aria-pressed",this._revealed?"true":"false"),this._toggleBtn.setAttribute("aria-label",this._revealed?"Hide password":"Show password");const i=this._revealed?"revealed":"hidden";this._toggleBtn.dataset.iconState!==i&&(this._toggleBtn.dataset.iconState=i,this._toggleBtn.innerHTML=this._revealed?U:q)}_syncStrengthUi(){const t=this.root.querySelector(".strength"),e=this.root.querySelector(".strength-label"),i=this.root.querySelector(".strength-caption");if(!t||!e||!i)return;const r=this.value,s=this.hasAttribute("show-strength")&&r.length>0;if(t.hidden=!s,!s){delete t.dataset.score,e.textContent="",i.textContent="",this._lastStrengthKey="";return}const n=(this.strengthEvaluator||O)(r);t.dataset.score=String(n.score),e.textContent=n.label,i.textContent=n.caption;const a=`${r}|${n.score}|${n.label}|${n.caption}`;a!==this._lastStrengthKey&&(this._lastStrengthKey=a,this.dispatchEvent(new CustomEvent("strength-change",{detail:{value:r,score:n.score,label:n.label,caption:n.caption},bubbles:!0,composed:!0})))}_syncDerivedState(){const t=this.root.querySelector('slot[name="label"]'),e=this.root.querySelector('slot[name="description"]'),i=this.root.querySelector('slot[name="error"]'),r=this.root.querySelector('slot[name="prefix"]'),s=this.root.querySelector('slot[name="suffix"]'),n=(this.getAttribute("label")||"").trim(),a=(this.getAttribute("description")||"").trim(),u=(this.getAttribute("data-error")||"").trim(),d=!!n||b(t),p=!!a||b(e),l=!!u||b(i),I=b(r),T=b(s),_=this.root.querySelector(".label"),x=this.root.querySelector(".description"),y=this.root.querySelector(".prefix"),A=this.root.querySelector(".suffix-slot"),w=this.root.querySelector(".meta"),k=this.root.querySelector(".footer"),C=this.root.querySelector(".error"),S=this.root.querySelector(".counter");g.syncSlotFallbackText(t,n),g.syncSlotFallbackText(e,a),g.syncSlotFallbackText(i,u),_&&_.toggleAttribute("hidden",!d),x&&x.toggleAttribute("hidden",!p),y&&y.toggleAttribute("hidden",!I),A&&A.toggleAttribute("hidden",!T),w&&w.toggleAttribute("hidden",!d&&!p);const z=this.hasAttribute("counter");if(S&&S.toggleAttribute("hidden",!z),C&&C.toggleAttribute("hidden",!l),k&&k.toggleAttribute("hidden",!l&&!z),!this._input)return;if(this._slottedInput){const B=(this.getAttribute("label")||this.getAttribute("aria-label")||"").trim();E.nameSlottedInput(this._slottedInput,B,(this.getAttribute("description")||"").trim());const N=this.getAttribute("validation")==="error"||!!u;this._slottedInput.toggleAttribute("aria-invalid",N);return}g.syncControlName(this._input,this,d?`${this._uid}-label`:null);const v=[];p&&v.push(`${this._uid}-description`),l&&v.push(`${this._uid}-error`),g.syncControlDescription(this._input,this,this._uid,v),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")}_syncUi(){this._syncControlAttrs(),this._syncInputValue(this.value),this._syncDerivedState(),this._syncToggleUi(),this._syncStrengthUi(),this.hasAttribute("autofocus")&&!this._autofocusApplied&&(this._autofocusApplied=!0,queueMicrotask(()=>{if(this.isConnected)try{this._input?.focus({preventScroll:!0})}catch{this._input?.focus()}}))}_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 r=this.getRootNode().host?.closest?.("ui-form")||null||this.closest("ui-form"),s=this.getAttribute("name");r&&typeof r.registerField=="function"&&s&&(this._formUnregister=r.registerField(s,{name:s,getValue:()=>this.value,setValue:n=>{this.value=String(n??"")},validate:async()=>this._input?{valid:this._input.checkValidity(),message:this._input.validationMessage||void 0}:{valid:!0},setError:n=>{n?(this.setAttribute("validation","error"),this.setAttribute("data-error",n)):(this.removeAttribute("validation"),this.removeAttribute("data-error")),this._syncUi()}}))}catch{}}_onSlotChange(t){t?.target?.name==="input"&&(this._bindInput(),this._syncControlAttrs()),this._syncDerivedState()}_onNativeInput(t){const e=t.target.value;this.getAttribute("value")!==e?e?this.setAttribute("value",e):this.removeAttribute("value"):(this._syncInputValue(e),this._syncStrengthUi()),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)}_onNativeKeyDown(t){F.scheduleImplicitSubmit(t,this)}_onNativeChange(t){const e=t.target.value;this._emitValueEvent("change",e)}_onClearClick(t){if(t.preventDefault(),!(c(this,"disabled")||this.hasAttribute("readonly"))&&this._input){this.value="",this._input.value="",this._input.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this._input.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("clear",{bubbles:!0,composed:!0}));try{this._input.focus({preventScroll:!0})}catch{this._input.focus()}}}_onToggleClick(t){t.preventDefault(),t.stopPropagation(),this.toggleVisibility()}};m.formAssociated=!0;let f=m;typeof customElements<"u"&&!customElements.get("ui-password-field")&&customElements.define("ui-password-field",f);exports.UIPasswordField=f;

package/dist/password-field.esm.js

@@ -1,21 +1,24 @@
-import { E as T } from "./ElementBase-BeZT54Hj.mjs";
-import { b as f, s as q, a as B } from "./control-name-Bpj7F34X.mjs";
-const N = `
+import { E as N } from "./ElementBase-D5QsC5Vw.mjs";
+import { f as L, n as M } from "./slotted-input-atWznLfm.mjs";
+import { F as $ } from "./form-control-D9wWUMBl.mjs";
+import { s as F } from "./implicit-submit-Lr0-q2LR.mjs";
+import { b as f, s as U, a as D } from "./control-name-Bpj7F34X.mjs";
+const 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>
-`, S = `
+`, E = `
   <svg viewBox="0 0 20 20" aria-hidden="true" focusable="false">
     <path d="M2.4 10c1.5-3 4.3-5 7.6-5s6.1 2 7.6 5c-1.5 3-4.3 5-7.6 5s-6.1-2-7.6-5Z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
     <circle cx="10" cy="10" r="2.5" fill="none" stroke="currentColor" stroke-width="1.6"/>
   </svg>
-`, M = `
+`, K = `
   <svg viewBox="0 0 20 20" aria-hidden="true" focusable="false">
     <path d="M3 3l14 14" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
     <path d="M6.1 6.1A9.3 9.3 0 0 1 10 5c3.3 0 6.1 2 7.6 5-.5 1-1.2 1.9-2 2.7M8.2 8.2A2.5 2.5 0 0 1 11.8 12" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
     <path d="M4.4 7.1C3.6 7.9 3 8.9 2.4 10c1.5 3 4.3 5 7.6 5 1.2 0 2.4-.3 3.4-.7" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
   </svg>
-`, I = `
+`, O = `
   :host {
     --ui-input-action-size: 24px;
     --ui-input-padding: var(--ui-padding, 0);
@@ -210,6 +213,25 @@ const N = `
     color: var(--ui-input-placeholder);
   }
 
+  /* <input slot="input">: the author's own input, so password managers can fill it. */
+  ::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)/1.4 "Inter", "IBM Plex Sans", -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;
+  }
+
   .actions {
     flex: 0 0 auto;
     display: inline-flex;
@@ -453,7 +475,7 @@ const N = `
     --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);
     --ui-password-field-toggle-hover-bg: color-mix(in srgb, #e2e8f0 12%, transparent);
@@ -580,7 +602,7 @@ const N = `
       box-shadow: none;
     }
   }
-`, L = [
+`, R = [
   "value",
   "placeholder",
   "disabled",
@@ -609,10 +631,10 @@ const N = `
   "description",
   "data-error"
 ];
-function u(o) {
+function h(o) {
   return o.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function p(o) {
+function g(o) {
   if (!o) return !1;
   const t = o.assignedNodes({ flatten: !0 });
   return t.length ? t.some((e) => e.nodeType === Node.TEXT_NODE ? !!e.textContent?.trim() : e.nodeType === Node.ELEMENT_NODE) : !1;
@@ -623,10 +645,10 @@ function c(o, t) {
   const i = String(e).trim().toLowerCase();
   return i !== "false" && i !== "0";
 }
-function U(o) {
+function P(o) {
   return o === "none" || o === "large" || o === "full";
 }
-function $(o) {
+function H(o) {
   let t = 0;
   switch (o.length >= 8 && (t += 1), /[a-z]/.test(o) && /[A-Z]/.test(o) && (t += 1), /\d/.test(o) && (t += 1), (/[^A-Za-z0-9]/.test(o) || o.length >= 14) && (t += 1), Math.max(1, Math.min(4, t || 1))) {
     case 1:
@@ -639,12 +661,22 @@ function $(o) {
       return { score: 4, label: "Strong", caption: "Strong password shape for production accounts." };
   }
 }
-class F extends T {
+const m = class m extends N {
   constructor() {
-    super(), this._input = null, this._clearBtn = null, this._toggleBtn = null, this._debounceTimer = null, this._formUnregister = null, this._uid = Math.random().toString(36).slice(2, 9), this._autofocusApplied = !1, this._revealed = !1, this._lastStrengthKey = "", this.strengthEvaluator = null, this._onNativeInput = this._onNativeInput.bind(this), this._onNativeChange = this._onNativeChange.bind(this), this._onClearClick = this._onClearClick.bind(this), this._onToggleClick = this._onToggleClick.bind(this), this._onSlotChange = this._onSlotChange.bind(this);
+    super(), this._slottedInput = null, this._formControl = new $(this, {
+      // With the author's own input, that native input is the form field (no second entry).
+      getValue: () => this._slottedInput ? null : this.value,
+      getValidity: () => ({ control: this._slottedInput ? null : this._input }),
+      defaultAttribute: "value",
+      onFormDisabled: (t) => {
+        this._input && (this._input.disabled = t || this.hasAttribute("disabled"));
+      }
+    }), this._input = null, this._clearBtn = null, this._toggleBtn = null, this._debounceTimer = null, this._formUnregister = null, this._uid = Math.random().toString(36).slice(2, 9), this._autofocusApplied = !1, this._revealed = !1, this._lastStrengthKey = "", this.strengthEvaluator = null, this._onLabelClick = (t) => {
+      t.target?.closest?.(".label") && this._input?.focus();
+    }, this._onNativeInput = this._onNativeInput.bind(this), this._onNativeChange = this._onNativeChange.bind(this), this._onNativeKeyDown = this._onNativeKeyDown.bind(this), this._onClearClick = this._onClearClick.bind(this), this._onToggleClick = this._onToggleClick.bind(this), this._onSlotChange = this._onSlotChange.bind(this);
   }
   static get observedAttributes() {
-    return [...L, "aria-label", "aria-description", "aria-describedby", "show-strength", "revealable"];
+    return [...R, "aria-label", "aria-description", "aria-describedby", "show-strength", "revealable"];
   }
   get value() {
     return this.getAttribute("value") || "";
@@ -655,11 +687,21 @@ class F extends T {
   get revealed() {
     return this._revealed;
   }
+  formResetCallback() {
+    this._formControl.formResetCallback();
+  }
+  formDisabledCallback(t) {
+    this._formControl.formDisabledCallback(t);
+  }
+  /** The `<form>` this field belongs to, if any. */
+  get form() {
+    return this._formControl.form;
+  }
   connectedCallback() {
-    super.connectedCallback(), this.root.addEventListener("slotchange", this._onSlotChange), this._registerWithForm();
+    super.connectedCallback(), this._formControl.connect(), this.root.addEventListener("slotchange", this._onSlotChange), this.root.addEventListener("click", this._onLabelClick), 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();
+    this._formControl.disconnect(), 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();
   }
   attributeChangedCallback(t, e, i) {
     if (e !== i && (t === "name" && this.isConnected && this._registerWithForm(), t === "autofocus" && !this.hasAttribute("autofocus") && (this._autofocusApplied = !1), !(!this.isConnected || !this._input))) {
@@ -723,15 +765,15 @@ class F extends T {
   render() {
     const t = this.value, e = this.getAttribute("label") || "", i = this.getAttribute("description") || "", r = this.getAttribute("data-error") || "", s = this.getAttribute("placeholder") || "", n = this.hasAttribute("required") ? '<span class="required" aria-hidden="true">*</span>' : "", a = this.hasAttribute("floating-label");
     this.setContent(`
-      <style>${I}</style>
+      <style>${O}</style>
       <div class="root" part="root">
         <div class="meta" part="meta">
           <label class="label" id="${this._uid}-label" part="label">
-            <slot name="label">${u(e)}</slot>
+            <slot name="label">${h(e)}</slot>
             ${n}
           </label>
           <p class="description" id="${this._uid}-description" part="description">
-            <slot name="description">${u(i)}</slot>
+            <slot name="description">${h(i)}</slot>
           </p>
         </div>
 
@@ -739,25 +781,26 @@ class F extends T {
           <span class="prefix" part="prefix"><slot name="prefix"></slot></span>
 
           <div class="control" part="control">
+            <slot name="input"></slot>
             <input
               part="input"
               type="password"
-              value="${u(t)}"
-              placeholder="${u(s)}"
+              value="${h(t)}"
+              placeholder="${h(s)}"
             />
-            ${a ? `<span class="floating-label" part="floating-label">${u(e || s || "Password")}</span>` : ""}
+            ${a ? `<span class="floating-label" part="floating-label">${h(e || s || "Password")}</span>` : ""}
           </div>
 
           <div class="actions" part="actions">
-            <button class="clear-btn" part="clear" type="button" aria-label="Clear" hidden>${N}</button>
+            <button class="clear-btn" part="clear" type="button" aria-label="Clear" hidden>${V}</button>
             <span class="suffix-slot" part="suffix"><slot name="suffix"></slot></span>
-            <button class="toggle-btn" part="toggle" type="button" aria-label="Show password">${S}</button>
+            <button class="toggle-btn" part="toggle" type="button" aria-label="Show password">${E}</button>
           </div>
         </div>
 
         <div class="footer" part="footer">
           <p class="error" id="${this._uid}-error" part="error" aria-live="polite">
-            <slot name="error">${u(r)}</slot>
+            <slot name="error">${h(r)}</slot>
           </p>
           <p class="counter" part="counter"></p>
         </div>
@@ -772,21 +815,34 @@ class F extends T {
           </div>
         </div>
       </div>
-    `), this._detachListeners(), this._input = this.root.querySelector("input"), this._clearBtn = this.root.querySelector(".clear-btn"), this._toggleBtn = this.root.querySelector(".toggle-btn"), this._input?.addEventListener("input", this._onNativeInput), this._input?.addEventListener("change", this._onNativeChange), this._clearBtn?.addEventListener("click", this._onClearClick), this._toggleBtn?.addEventListener("click", this._onToggleClick), this._syncUi();
+    `), this._detachListeners(), this._bindInput(), this._clearBtn = this.root.querySelector(".clear-btn"), this._toggleBtn = this.root.querySelector(".toggle-btn"), this._clearBtn?.addEventListener("click", this._onClearClick), this._toggleBtn?.addEventListener("click", this._onToggleClick), this._syncUi();
+  }
+  /** The control: the author's <input slot="input"> when there is one, else the inner input. */
+  _bindInput() {
+    this._input?.removeEventListener("input", this._onNativeInput), this._input?.removeEventListener("change", this._onNativeChange), this._input?.removeEventListener("keydown", this._onNativeKeyDown);
+    const t = L(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?.addEventListener("input", this._onNativeInput), this._input?.addEventListener("change", this._onNativeChange), t || this._input?.addEventListener("keydown", this._onNativeKeyDown);
   }
   _detachListeners() {
-    this._input?.removeEventListener("input", this._onNativeInput), this._input?.removeEventListener("change", this._onNativeChange), this._clearBtn?.removeEventListener("click", this._onClearClick), this._toggleBtn?.removeEventListener("click", this._onToggleClick), this._clearBtn = null, this._toggleBtn = null;
+    this._input?.removeEventListener("input", this._onNativeInput), this._input?.removeEventListener("change", this._onNativeChange), this._input?.removeEventListener("keydown", this._onNativeKeyDown), this._clearBtn?.removeEventListener("click", this._onClearClick), this._toggleBtn?.removeEventListener("click", this._onToggleClick), this._clearBtn = null, this._toggleBtn = null;
   }
   _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 && !U(e) ? this.style.setProperty("--ui-input-border-radius", e) : this.style.removeProperty("--ui-input-border-radius");
+    e && !P(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 = c(this, "disabled"), e = this.hasAttribute("required"), i = this.hasAttribute("readonly"), r = this.getAttribute("maxlength") || "", s = this.getAttribute("minlength") || "", n = this.getAttribute("pattern") || "", a = this.getAttribute("autocomplete") || "current-password", l = this.getAttribute("spellcheck") || "", h = this.getAttribute("placeholder") || "", d = this.getAttribute("name") || "";
-    this._input.disabled = t, this._input.required = e, this._input.readOnly = i, this._input.placeholder = h, this._input.name = d, this._input.type = this._revealed ? "text" : "password", this._input.setAttribute("autocomplete", a), n ? this._input.setAttribute("pattern", n) : this._input.removeAttribute("pattern"), l ? this._input.setAttribute("spellcheck", l) : this._input.removeAttribute("spellcheck"), r && Number.isFinite(Number(r)) ? this._input.setAttribute("maxlength", r) : this._input.removeAttribute("maxlength"), s && Number.isFinite(Number(s)) ? this._input.setAttribute("minlength", s) : this._input.removeAttribute("minlength");
+    if (this._slottedInput) {
+      const l = this._slottedInput;
+      (this.hasAttribute("disabled") || this._formControl.disabledByForm) && (l.disabled = c(this, "disabled") || this._formControl.disabledByForm), this.hasAttribute("required") && (l.required = !0), this.hasAttribute("readonly") && (l.readOnly = !0), l.type = this._revealed ? "text" : "password";
+      return;
+    }
+    const t = c(this, "disabled"), e = this.hasAttribute("required"), i = this.hasAttribute("readonly"), r = this.getAttribute("maxlength") || "", s = this.getAttribute("minlength") || "", n = this.getAttribute("pattern") || "", a = this.getAttribute("autocomplete") || "current-password", u = this.getAttribute("spellcheck") || "", d = this.getAttribute("placeholder") || "", p = this.getAttribute("name") || "";
+    this._input.disabled = t || this._formControl.disabledByForm, this._input.required = e, this._input.readOnly = i, this._input.placeholder = d, this._input.name = p, this._input.type = this._revealed ? "text" : "password", this._input.setAttribute("autocomplete", a), n ? this._input.setAttribute("pattern", n) : this._input.removeAttribute("pattern"), u ? this._input.setAttribute("spellcheck", u) : this._input.removeAttribute("spellcheck"), r && Number.isFinite(Number(r)) ? this._input.setAttribute("maxlength", r) : this._input.removeAttribute("maxlength"), s && Number.isFinite(Number(s)) ? this._input.setAttribute("minlength", s) : this._input.removeAttribute("minlength");
   }
   _syncInputValue(t) {
     this._input && this._input.value !== t && (this._input.value = t);
@@ -804,7 +860,7 @@ class F extends T {
     const t = this.getAttribute("revealable") !== "false", e = c(this, "disabled") || this.hasAttribute("readonly");
     this._toggleBtn.hidden = !t, this._toggleBtn.disabled = e, this._toggleBtn.setAttribute("aria-pressed", this._revealed ? "true" : "false"), this._toggleBtn.setAttribute("aria-label", this._revealed ? "Hide password" : "Show password");
     const i = this._revealed ? "revealed" : "hidden";
-    this._toggleBtn.dataset.iconState !== i && (this._toggleBtn.dataset.iconState = i, this._toggleBtn.innerHTML = this._revealed ? M : S);
+    this._toggleBtn.dataset.iconState !== i && (this._toggleBtn.dataset.iconState = i, this._toggleBtn.innerHTML = this._revealed ? K : E);
   }
   _syncStrengthUi() {
     const t = this.root.querySelector(".strength"), e = this.root.querySelector(".strength-label"), i = this.root.querySelector(".strength-caption");
@@ -814,7 +870,7 @@ class F extends T {
       delete t.dataset.score, e.textContent = "", i.textContent = "", this._lastStrengthKey = "";
       return;
     }
-    const n = (this.strengthEvaluator || $)(r);
+    const n = (this.strengthEvaluator || H)(r);
     t.dataset.score = String(n.score), e.textContent = n.label, i.textContent = n.caption;
     const a = `${r}|${n.score}|${n.label}|${n.caption}`;
     a !== this._lastStrengthKey && (this._lastStrengthKey = a, this.dispatchEvent(
@@ -831,13 +887,20 @@ class F extends T {
     ));
   }
   _syncDerivedState() {
-    const t = this.root.querySelector('slot[name="label"]'), e = this.root.querySelector('slot[name="description"]'), i = this.root.querySelector('slot[name="error"]'), r = this.root.querySelector('slot[name="prefix"]'), s = this.root.querySelector('slot[name="suffix"]'), n = (this.getAttribute("label") || "").trim(), a = (this.getAttribute("description") || "").trim(), l = (this.getAttribute("data-error") || "").trim(), h = !!n || p(t), d = !!a || p(e), g = !!l || p(i), z = p(r), E = p(s), v = this.root.querySelector(".label"), m = this.root.querySelector(".description"), x = this.root.querySelector(".prefix"), _ = this.root.querySelector(".suffix-slot"), y = this.root.querySelector(".meta"), w = this.root.querySelector(".footer"), A = this.root.querySelector(".error"), k = this.root.querySelector(".counter");
-    f(t, n), f(e, a), f(i, l), v && v.toggleAttribute("hidden", !h), m && m.toggleAttribute("hidden", !d), x && x.toggleAttribute("hidden", !z), _ && _.toggleAttribute("hidden", !E), y && y.toggleAttribute("hidden", !h && !d);
-    const C = this.hasAttribute("counter");
-    if (k && k.toggleAttribute("hidden", !C), A && A.toggleAttribute("hidden", !g), w && w.toggleAttribute("hidden", !g && !C), !this._input) return;
-    q(this._input, this, h ? `${this._uid}-label` : null);
+    const t = this.root.querySelector('slot[name="label"]'), e = this.root.querySelector('slot[name="description"]'), i = this.root.querySelector('slot[name="error"]'), r = this.root.querySelector('slot[name="prefix"]'), s = this.root.querySelector('slot[name="suffix"]'), n = (this.getAttribute("label") || "").trim(), a = (this.getAttribute("description") || "").trim(), u = (this.getAttribute("data-error") || "").trim(), d = !!n || g(t), p = !!a || g(e), l = !!u || g(i), q = g(r), I = g(s), _ = this.root.querySelector(".label"), x = this.root.querySelector(".description"), y = this.root.querySelector(".prefix"), A = this.root.querySelector(".suffix-slot"), w = this.root.querySelector(".meta"), k = this.root.querySelector(".footer"), C = this.root.querySelector(".error"), S = this.root.querySelector(".counter");
+    f(t, n), f(e, a), f(i, u), _ && _.toggleAttribute("hidden", !d), x && x.toggleAttribute("hidden", !p), y && y.toggleAttribute("hidden", !q), A && A.toggleAttribute("hidden", !I), w && w.toggleAttribute("hidden", !d && !p);
+    const z = this.hasAttribute("counter");
+    if (S && S.toggleAttribute("hidden", !z), C && C.toggleAttribute("hidden", !l), k && k.toggleAttribute("hidden", !l && !z), !this._input) return;
+    if (this._slottedInput) {
+      const B = (this.getAttribute("label") || this.getAttribute("aria-label") || "").trim();
+      M(this._slottedInput, B, (this.getAttribute("description") || "").trim());
+      const T = this.getAttribute("validation") === "error" || !!u;
+      this._slottedInput.toggleAttribute("aria-invalid", T);
+      return;
+    }
+    U(this._input, this, d ? `${this._uid}-label` : null);
     const b = [];
-    d && b.push(`${this._uid}-description`), g && b.push(`${this._uid}-error`), B(this._input, this, this._uid, b), this.getAttribute("validation") === "error" || !!l ? 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");
+    p && b.push(`${this._uid}-description`), l && b.push(`${this._uid}-error`), D(this._input, this, this._uid, b), 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");
   }
   _syncUi() {
     this._syncControlAttrs(), this._syncInputValue(this.value), this._syncDerivedState(), this._syncToggleUi(), this._syncStrengthUi(), this.hasAttribute("autofocus") && !this._autofocusApplied && (this._autofocusApplied = !0, queueMicrotask(() => {
@@ -876,8 +939,8 @@ class F extends T {
     } catch {
     }
   }
-  _onSlotChange() {
-    this._syncDerivedState();
+  _onSlotChange(t) {
+    t?.target?.name === "input" && (this._bindInput(), this._syncControlAttrs()), this._syncDerivedState();
   }
   _onNativeInput(t) {
     const e = t.target.value;
@@ -887,6 +950,10 @@ class F extends T {
       this._emitValueEvent("debounced-input", e), this._debounceTimer = null;
     }, i)) : this._emitValueEvent("debounced-input", e);
   }
+  // Enter submits the surrounding form, as it would from a native password input.
+  _onNativeKeyDown(t) {
+    F(t, this);
+  }
   _onNativeChange(t) {
     const e = t.target.value;
     this._emitValueEvent("change", e);
@@ -904,8 +971,10 @@ class F extends T {
   _onToggleClick(t) {
     t.preventDefault(), t.stopPropagation(), this.toggleVisibility();
   }
-}
-typeof customElements < "u" && !customElements.get("ui-password-field") && customElements.define("ui-password-field", F);
+};
+m.formAssociated = !0;
+let v = m;
+typeof customElements < "u" && !customElements.get("ui-password-field") && customElements.define("ui-password-field", v);
 export {
-  F as UIPasswordField
+  v as UIPasswordField
 };

package/dist/pin-input.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const A=require("./ElementBase-DxbvhLJs.js"),E=require("./control-name-BmoI1m3a.js");let I=0;const w=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const A=require("./ElementBase-CbUsP3D6.js"),E=require("./control-name-BmoI1m3a.js");let I=0;const w=`
   :host {
     --ui-pin-gap: 8px;
     --ui-pin-slot-width: 40px;

package/dist/pin-input.esm.js

@@ -1,4 +1,4 @@
-import { E as x } from "./ElementBase-BeZT54Hj.mjs";
+import { E as x } from "./ElementBase-D5QsC5Vw.mjs";
 import { c as A } from "./control-name-Bpj7F34X.mjs";
 let E = 0;
 const I = `

package/dist/placement-grid.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={sm:"var(--ui-breakpoint-sm, 640px)",md:"var(--ui-breakpoint-md, 768px)",lg:"var(--ui-breakpoint-lg, 1024px)",xl:"var(--ui-breakpoint-xl, 1280px)"},p=["display","columns","rows","gap","rowgap","columngap","autoflow","autorows","autocolumns","align","justify","place","aligncontent","justifycontent","placecontent"],w={xs:"var(--ui-space-xs, 4px)",sm:"var(--ui-space-sm, 8px)",md:"var(--ui-space-md, 12px)",lg:"var(--ui-space-lg, 20px)",xl:"var(--ui-space-xl, 28px)"},I=["data-row","data-column","data-row-span","data-column-span","data-value","data-selected","data-disabled","hidden"],A=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("./ElementBase-CbUsP3D6.js"),v={sm:"var(--ui-breakpoint-sm, 640px)",md:"var(--ui-breakpoint-md, 768px)",lg:"var(--ui-breakpoint-lg, 1024px)",xl:"var(--ui-breakpoint-xl, 1280px)"},p=["display","columns","rows","gap","rowgap","columngap","autoflow","autorows","autocolumns","align","justify","place","aligncontent","justifycontent","placecontent"],w={xs:"var(--ui-space-xs, 4px)",sm:"var(--ui-space-sm, 8px)",md:"var(--ui-space-md, 12px)",lg:"var(--ui-space-lg, 20px)",xl:"var(--ui-space-xl, 28px)"},I=["data-row","data-column","data-row-span","data-column-span","data-value","data-selected","data-disabled","hidden"],A=`
   :host {
     --ui-placement-display: grid;
     --ui-placement-columns: 1fr;

package/dist/placement-grid.esm.js

@@ -1,4 +1,4 @@
-import { E as _ } from "./ElementBase-BeZT54Hj.mjs";
+import { E as _ } from "./ElementBase-D5QsC5Vw.mjs";
 const b = {
   sm: "var(--ui-breakpoint-sm, 640px)",
   md: "var(--ui-breakpoint-md, 768px)",

package/dist/plugin-panel.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("./ElementBase-DxbvhLJs.js"),o=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("./ElementBase-CbUsP3D6.js"),o=`
   :host {
     position: fixed;
     display: block;

package/dist/plugin-panel.esm.js

@@ -1,4 +1,4 @@
-import { E as a } from "./ElementBase-BeZT54Hj.mjs";
+import { E as a } from "./ElementBase-D5QsC5Vw.mjs";
 const s = `
   :host {
     position: fixed;