@editora/ui-core 0.2.2 → 0.3.0

package/dist/navigation-menu.esm.js

@@ -1,4 +1,4 @@
-import { E as f } from "./ElementBase-BeZT54Hj.mjs";
+import { E as f } from "./ElementBase-D5QsC5Vw.mjs";
 const _ = `
   :host {
     display: block;

package/dist/number-attribute-BAF07JrU.mjs

@@ -0,0 +1,8 @@
+function u(t, e) {
+  if (t == null || t.trim() === "") return e;
+  const n = Number(t);
+  return Number.isFinite(n) ? n : e;
+}
+export {
+  u as n
+};

package/dist/number-attribute-C4Rrl7d3.js

@@ -0,0 +1 @@
+"use strict";function r(t,u){if(t==null||t.trim()==="")return u;const e=Number(t);return Number.isFinite(e)?e:u}exports.numberAttribute=r;

package/dist/number-field.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const D=require("./ElementBase-DxbvhLJs.js"),A=require("./control-name-BmoI1m3a.js"),N=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const N=require("./ElementBase-CbUsP3D6.js"),S=require("./form-control-B90_3kYN.js"),B=require("./implicit-submit-B6M5Uc56.js"),k=require("./control-name-BmoI1m3a.js"),q=`
   :host {
     --ui-number-field-padding: var(--ui-padding, 0);
     --ui-number-field-pad-x: calc(var(--ui-control-padding-inline-2, 12px) - 1px);
@@ -309,7 +309,7 @@
     --ui-number-field-color: #e2e8f0;
     --ui-number-field-muted: #94a3b8;
     --ui-number-field-border-color: #334155;
-    --ui-number-field-focus: #93c5fd;
+    --ui-number-field-focus: var(--ui-color-accent-on-dark, #93c5fd);
     --ui-number-field-placeholder: color-mix(in srgb, #e2e8f0 46%, transparent);
     --ui-number-field-shadow: 0 2px 8px rgba(2, 6, 23, 0.24);
   }
@@ -320,16 +320,16 @@
       transition: none !important;
     }
   }
-`;function f(r){return r.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function d(r){if(!r)return!1;const e=r.assignedNodes({flatten:!0});return e.length?e.some(t=>t.nodeType===Node.TEXT_NODE?!!t.textContent?.trim():t.nodeType===Node.ELEMENT_NODE):!1}function p(r,e){const t=r.getAttribute(e);if(t==null)return!1;const i=String(t).trim().toLowerCase();return i!=="false"&&i!=="0"}function g(r){if(r==null||r.trim()==="")return null;const e=Number(r);return Number.isFinite(e)?e:null}function B(r){const e=String(r),t=e.match(/e-(\d+)$/i);if(t)return Number(t[1]);const i=e.split(".")[1];return i?i.length:0}function m(r,e){if(e==null||e<0)return r;const t=10**e;return Math.round((r+Number.EPSILON)*t)/t}function w(r,e,t){return e!=null&&r<e?e:t!=null&&r>t?t:r}function C(r){return r??0}function q(r,e,t,i){if(e==null||e<=0)return!0;const s=m((r-t)/e,i!=null?i+2:8);return Math.abs(s-Math.round(s))<1e-7}function F(r){const e=new Intl.NumberFormat(r).formatToParts(12345.6);return{group:e.find(t=>t.type==="group")?.value||",",decimal:e.find(t=>t.type==="decimal")?.value||"."}}function v(r,e){const t=r.trim();if(!t)return null;const{group:i,decimal:s}=F(e);let n=t.replace(/[\s\u00a0\u202f]/g,"");if(n=n.split(i).join(""),s!=="."&&(n=n.split(s).join(".")),n=n.replace(/[−–]/g,"-"),!/^[+-]?(?:\d+\.?\d*|\.\d+)$/.test(n))return null;const l=Number(n);return Number.isFinite(l)?l:null}function L(r,e){return e!=null&&e>=0?r.toFixed(e):String(r)}class S extends D.ElementBase{constructor(){super(),this._input=null,this._formUnregister=null,this._uid=Math.random().toString(36).slice(2,9),this._rawValue="",this._isEditing=!1,this._internalInvalidReason=null,this._onInput=this._onInput.bind(this),this._onBlur=this._onBlur.bind(this),this._onFocus=this._onFocus.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onWheel=this._onWheel.bind(this),this._onSlotChange=this._onSlotChange.bind(this),this._onClick=this._onClick.bind(this)}static get observedAttributes(){return["value","min","max","step","precision","locale","format","name","placeholder","disabled","readonly","required","invalid","allow-wheel","show-steppers","clamp-on-blur","autocomplete","inputmode","label","aria-label","aria-description","aria-describedby","description","data-error","size","variant"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("slotchange",this._onSlotChange),this.addEventListener("click",this._onClick),this._registerWithForm()}disconnectedCallback(){this.root.removeEventListener("slotchange",this._onSlotChange),this.removeEventListener("click",this._onClick),this._detachListeners(),this._formUnregister&&(this._formUnregister(),this._formUnregister=null),super.disconnectedCallback()}shouldRenderOnAttributeChange(e){return e==="label"||e==="description"||e==="data-error"}attributeChangedCallback(e,t,i){if(t!==i){if(e==="value"){this._rawValue=i||"",this._clearInternalInvalid(),this._syncDisplayValue(),this._syncAria();return}if(e==="name"&&this._registerWithForm(),e==="min"||e==="max"||e==="step"||e==="precision"||e==="locale"||e==="format"||e==="placeholder"||e==="disabled"||e==="readonly"||e==="required"||e==="allow-wheel"||e==="show-steppers"||e==="clamp-on-blur"||e==="autocomplete"||e==="inputmode"||e==="size"||e==="variant"||e==="invalid"||e==="aria-label"||e==="aria-description"||e==="aria-describedby"){this._syncControlAttrs(),this._syncDisplayValue(),this._syncDerivedState(),this._syncAria();return}super.attributeChangedCallback(e,t,i)}}get value(){return this.getAttribute("value")||""}set value(e){e?this.setAttribute("value",e):this.removeAttribute("value")}get valueAsNumber(){return g(this.getAttribute("value"))}get rawValue(){return this._rawValue}set rawValue(e){this._rawValue=String(e??""),this._input&&(this._input.value=this._rawValue),this._syncAria()}focus(e){if(this._input){this._input.focus(e);return}super.focus(e)}blur(){this._input?.blur()}select(){this._input?.select()}stepUp(e=1){this._stepBy(Math.max(1,Number(e)||1),"step")}stepDown(e=1){this._stepBy(-Math.max(1,Number(e)||1),"step")}_locale(){return this.getAttribute("locale")||Intl.NumberFormat().resolvedOptions().locale||"en-US"}_precision(){const e=this.getAttribute("precision");if(e==null||e.trim()==="")return null;const t=Number(e);return Number.isInteger(t)&&t>=0?t:null}_step(){const e=this.getAttribute("step");if(e==null||e===""||e==="any")return null;const t=Number(e);return Number.isFinite(t)&&t>0?t:null}_effectivePrecision(){const e=this._precision();if(e!=null)return e;const t=this._step();return t!=null?B(t):null}_min(){return g(this.getAttribute("min"))}_max(){return g(this.getAttribute("max"))}_formatNumber(e){const t=this._effectivePrecision(),i=this.getAttribute("format")!=="plain";return new Intl.NumberFormat(this._locale(),{useGrouping:i,minimumFractionDigits:t??0,maximumFractionDigits:t??20}).format(e)}_displayStringForValue(){if(this._isEditing)return this._rawValue;const e=this.valueAsNumber;return e==null?this._rawValue:this._formatNumber(e)}_syncDisplayValue(){if(!this._input)return;const e=this._displayStringForValue();this._input.value!==e&&(this._input.value=e);const t=this.root.querySelector(".shell");t&&t.setAttribute("data-has-value",e?"true":"false")}_syncControlAttrs(){if(!this._input)return;this._input.placeholder=this.getAttribute("placeholder")||"",this._input.disabled=p(this,"disabled"),this._input.disabled?this.root.querySelector(".shell")?.setAttribute("aria-disabled","true"):this.root.querySelector(".shell")?.removeAttribute("aria-disabled"),this._input.readOnly=this.hasAttribute("readonly"),this._input.required=this.hasAttribute("required"),this._input.name=this.getAttribute("name")||"",this._input.setAttribute("inputmode",this.getAttribute("inputmode")||"decimal");const e=this.getAttribute("autocomplete");e?this._input.setAttribute("autocomplete",e):this._input.removeAttribute("autocomplete")}_syncAria(){if(!this._input)return;const e=this.valueAsNumber;this._input.setAttribute("role","spinbutton"),this._input.setAttribute("aria-valuetext",this._input.value||"");const t=this._min(),i=this._max();t!=null?this._input.setAttribute("aria-valuemin",String(t)):this._input.removeAttribute("aria-valuemin"),i!=null?this._input.setAttribute("aria-valuemax",String(i)):this._input.removeAttribute("aria-valuemax"),e!=null?this._input.setAttribute("aria-valuenow",String(e)):this._input.removeAttribute("aria-valuenow");const s=this.root.querySelector('slot[name="label"]'),n=this.root.querySelector('slot[name="description"]'),l=this.root.querySelector('slot[name="error"]'),u=!!(this.getAttribute("label")||"").trim()||d(s),a=!!(this.getAttribute("description")||"").trim()||d(n),o=!!(this.getAttribute("data-error")||"").trim()||d(l);A.syncControlName(this._input,this,u?`${this._uid}-label`:null);const c=[];a&&c.push(`${this._uid}-description`),o&&c.push(`${this._uid}-error`),A.syncControlDescription(this._input,this,this._uid,c),this.hasAttribute("required")?this._input.setAttribute("aria-required","true"):this._input.removeAttribute("aria-required"),this.hasAttribute("invalid")||this._internalInvalidReason!=null||o?this._input.setAttribute("aria-invalid","true"):this._input.removeAttribute("aria-invalid")}_syncDerivedState(){const e=this.root.querySelector('slot[name="label"]'),t=this.root.querySelector('slot[name="description"]'),i=this.root.querySelector('slot[name="error"]'),s=this.root.querySelector('slot[name="prefix"]'),n=this.root.querySelector('slot[name="suffix"]'),l=this.root.querySelector('slot[name="increment-trigger"]'),u=this.root.querySelector('slot[name="decrement-trigger"]'),a=!!(this.getAttribute("label")||"").trim()||d(e),o=!!(this.getAttribute("description")||"").trim()||d(t),c=!!(this.getAttribute("data-error")||"").trim()||d(i),_=d(s),V=d(n),k=d(l),E=d(u),y=p(this,"show-steppers")||k||E,h=(z,I)=>{const b=this.root.querySelector(z);b&&(I?b.removeAttribute("hidden"):b.setAttribute("hidden",""))};h(".meta",a||o),h(".label",a),h(".description",o),h(".prefix",_),h(".suffix",V),h(".footer",c),h(".error",c),h(".steppers",y);const x=this.root.querySelector(".shell");x&&x.setAttribute("data-show-steppers",y?"true":"false")}_emitValueEvent(e,t,i,s){this.dispatchEvent(new CustomEvent(e,{detail:{value:t,previousValue:i,source:s},bubbles:!0,composed:!0}))}_emitInvalid(e){this._internalInvalidReason=e,this.setAttribute("data-internal-invalid",e),this._syncAria(),this.dispatchEvent(new CustomEvent("invalid",{detail:{reason:e},bubbles:!0,composed:!0}))}_clearInternalInvalid(){this._internalInvalidReason=null,this.removeAttribute("data-internal-invalid"),this._syncAria()}_commitValue(e,t){const i=this.valueAsNumber;if(e==null){if(i==null&&!this.value){this._rawValue="",this._syncDisplayValue();return}this._emitValueEvent("before-value-change",null,i,t),this.removeAttribute("value"),this._rawValue="",this._clearInternalInvalid(),this._syncDisplayValue(),this._syncAria(),this._emitValueEvent("value-change",null,i,t);return}const s=this._effectivePrecision(),n=L(m(e,s),s),l=Number(n);if(i!=null&&l===i&&this.value===n){this._rawValue=n,this._clearInternalInvalid(),this._syncDisplayValue();return}this._emitValueEvent("before-value-change",l,i,t),this.setAttribute("value",n),this._rawValue=n,this._clearInternalInvalid(),this._syncDisplayValue(),this._syncAria(),this._emitValueEvent("value-change",l,i,t)}_commitRaw(e){const t=this._rawValue.trim();if(!t){this._commitValue(null,e);return}const i=v(t,this._locale());if(i==null){this._emitInvalid("parse"),this._syncDisplayValue();return}const s=this._min(),n=this._max(),l=this._effectivePrecision(),u=m(i,l),a=p(this,"clamp-on-blur"),o=a?w(u,s,n):u;if(!a&&s!=null&&o<s){this._emitInvalid("min"),this._syncDisplayValue();return}if(!a&&n!=null&&o>n){this._emitInvalid("max"),this._syncDisplayValue();return}const c=this._step();if(!q(o,c,C(s),l)){this._emitInvalid("step"),this._syncDisplayValue();return}this._commitValue(o,e)}_stepBy(e,t){if(p(this,"disabled")||this.hasAttribute("readonly"))return;const i=this._step()??1,s=this._effectivePrecision(),n=this._min(),l=this._max(),a=(this._isEditing?v(this._rawValue,this._locale()):this.valueAsNumber)??n??0,o=w(m(a+i*e,s),n,l);this._commitValue(o,t),this._isEditing&&this._input&&(this._input.value=this._rawValue)}_registerWithForm(){this._formUnregister&&(this._formUnregister(),this._formUnregister=null);try{const s=this.getRootNode().host?.closest?.("ui-form")||null||this.closest("ui-form"),n=this.getAttribute("name");s&&typeof s.registerField=="function"&&n&&(this._formUnregister=s.registerField(n,{name:n,getValue:()=>this.value,setValue:l=>{l==null||l===""?this.removeAttribute("value"):this.setAttribute("value",String(l))},validate:async()=>{const l=this.valueAsNumber,u=this._min(),a=this._max();return this.hasAttribute("required")&&l==null?{valid:!1,message:"A value is required."}:l!=null&&u!=null&&l<u?{valid:!1,message:`Value must be at least ${u}.`}:l!=null&&a!=null&&l>a?{valid:!1,message:`Value must be at most ${a}.`}:{valid:this._internalInvalidReason==null,message:void 0}},setError:l=>{l?(this.setAttribute("data-error",l),this.toggleAttribute("invalid",!0)):(this.removeAttribute("data-error"),this._internalInvalidReason==null&&this.removeAttribute("invalid")),this._syncDerivedState(),this._syncAria()}}))}catch{}}_detachListeners(){this._input&&(this._input.removeEventListener("input",this._onInput),this._input.removeEventListener("focus",this._onFocus),this._input.removeEventListener("blur",this._onBlur),this._input.removeEventListener("keydown",this._onKeyDown),this._input.removeEventListener("wheel",this._onWheel))}_bindInput(){this._input&&(this._detachListeners(),this._input.addEventListener("input",this._onInput),this._input.addEventListener("focus",this._onFocus),this._input.addEventListener("blur",this._onBlur),this._input.addEventListener("keydown",this._onKeyDown),this._input.addEventListener("wheel",this._onWheel,{passive:!1}))}_onInput(e){this._rawValue=e.target.value,this._syncDisplayValue(),this._syncAria();const t=v(this._rawValue,this._locale());this.dispatchEvent(new CustomEvent("input",{detail:{rawValue:this._rawValue,value:t,source:"input"},bubbles:!0,composed:!0}))}_onFocus(){this._isEditing=!0,this._rawValue=this.value||this._rawValue,this._syncDisplayValue(),this._syncAria()}_onBlur(){this._isEditing=!1,this._commitRaw("blur")}_onKeyDown(e){if(e.key==="ArrowUp"){e.preventDefault(),this._stepBy(1,"keyboard");return}if(e.key==="ArrowDown"){e.preventDefault(),this._stepBy(-1,"keyboard");return}if(e.key==="PageUp"){e.preventDefault(),this._stepBy(10,"keyboard");return}if(e.key==="PageDown"){e.preventDefault(),this._stepBy(-10,"keyboard");return}if(e.key==="Home"){const t=this._min();if(t==null)return;e.preventDefault(),this._commitValue(t,"keyboard");return}if(e.key==="End"){const t=this._max();if(t==null)return;e.preventDefault(),this._commitValue(t,"keyboard");return}if(e.key==="Enter"){e.preventDefault(),this._isEditing=!1,this._commitRaw("keyboard");return}e.key==="Escape"&&(this._isEditing=!1,this._rawValue=this.value,this._clearInternalInvalid(),this._syncDisplayValue())}_onWheel(e){p(this,"allow-wheel")&&(!this._input||this.root.activeElement!==this._input||(e.preventDefault(),this._stepBy(e.deltaY<0?1:-1,"wheel")))}_onClick(e){const i=e.composedPath().find(s=>s instanceof HTMLElement?s.dataset.stepAction==="up"||s.dataset.stepAction==="down"||s.getAttribute("slot")==="increment-trigger"||s.getAttribute("slot")==="decrement-trigger":!1);if(i){if(i.dataset.stepAction==="up"||i.getAttribute("slot")==="increment-trigger"){e.preventDefault(),this._stepBy(1,"step");return}(i.dataset.stepAction==="down"||i.getAttribute("slot")==="decrement-trigger")&&(e.preventDefault(),this._stepBy(-1,"step"))}}_onSlotChange(){this._syncDerivedState(),this._syncAria()}render(){const e=this.getAttribute("label")||"",t=this.getAttribute("description")||"",i=this.getAttribute("data-error")||"";this.setContent(`
-      <style>${N}</style>
+`;function g(s){return s.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function d(s){if(!s)return!1;const e=s.assignedNodes({flatten:!0});return e.length?e.some(t=>t.nodeType===Node.TEXT_NODE?!!t.textContent?.trim():t.nodeType===Node.ELEMENT_NODE):!1}function p(s,e){const t=s.getAttribute(e);if(t==null)return!1;const i=String(t).trim().toLowerCase();return i!=="false"&&i!=="0"}function v(s){if(s==null||s.trim()==="")return null;const e=Number(s);return Number.isFinite(e)?e:null}function F(s){const e=String(s),t=e.match(/e-(\d+)$/i);if(t)return Number(t[1]);const i=e.split(".")[1];return i?i.length:0}function m(s,e){if(e==null||e<0)return s;const t=10**e;return Math.round((s+Number.EPSILON)*t)/t}function V(s,e,t){return e!=null&&s<e?e:t!=null&&s>t?t:s}function L(s){return s??0}function M(s,e,t,i){if(e==null||e<=0)return!0;const r=m((s-t)/e,i!=null?i+2:8);return Math.abs(r-Math.round(r))<1e-7}function P(s){const e=new Intl.NumberFormat(s).formatToParts(12345.6);return{group:e.find(t=>t.type==="group")?.value||",",decimal:e.find(t=>t.type==="decimal")?.value||"."}}function _(s,e){const t=s.trim();if(!t)return null;const{group:i,decimal:r}=P(e);let n=t.replace(/[\s\u00a0\u202f]/g,"");if(n=n.split(i).join(""),r!=="."&&(n=n.split(r).join(".")),n=n.replace(/[−–]/g,"-"),!/^[+-]?(?:\d+\.?\d*|\.\d+)$/.test(n))return null;const l=Number(n);return Number.isFinite(l)?l:null}function U(s,e){return e!=null&&e>=0?s.toFixed(e):String(s)}const y=class y extends N.ElementBase{constructor(){super(),this._formControl=new S.FormControl(this,{getValue:()=>this.value,getValidity:()=>({valueMissing:S.isRequired(this)&&!this.value,anchor:this._input}),defaultAttribute:"value",onFormDisabled:e=>{this._input&&(this._input.disabled=e||p(this,"disabled"))}}),this._input=null,this._formUnregister=null,this._uid=Math.random().toString(36).slice(2,9),this._rawValue="",this._isEditing=!1,this._internalInvalidReason=null,this._onInput=this._onInput.bind(this),this._onBlur=this._onBlur.bind(this),this._onFocus=this._onFocus.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onWheel=this._onWheel.bind(this),this._onSlotChange=this._onSlotChange.bind(this),this._onClick=this._onClick.bind(this)}static get observedAttributes(){return["value","min","max","step","precision","locale","format","name","placeholder","disabled","readonly","required","invalid","allow-wheel","show-steppers","clamp-on-blur","autocomplete","inputmode","label","aria-label","aria-description","aria-describedby","description","data-error","size","variant"]}formResetCallback(){this._formControl.formResetCallback()}formDisabledCallback(e){this._formControl.formDisabledCallback(e)}get form(){return this._formControl.form}connectedCallback(){super.connectedCallback(),this._formControl.connect(),this.root.addEventListener("slotchange",this._onSlotChange),this.addEventListener("click",this._onClick),this._registerWithForm()}disconnectedCallback(){this._formControl.disconnect(),this.root.removeEventListener("slotchange",this._onSlotChange),this.removeEventListener("click",this._onClick),this._detachListeners(),this._formUnregister&&(this._formUnregister(),this._formUnregister=null),super.disconnectedCallback()}shouldRenderOnAttributeChange(e){return e==="label"||e==="description"||e==="data-error"}attributeChangedCallback(e,t,i){if(t!==i){if(e==="value"){this._rawValue=i||"",this._clearInternalInvalid(),this._syncDisplayValue(),this._syncAria();return}if(e==="name"&&this._registerWithForm(),e==="min"||e==="max"||e==="step"||e==="precision"||e==="locale"||e==="format"||e==="placeholder"||e==="disabled"||e==="readonly"||e==="required"||e==="allow-wheel"||e==="show-steppers"||e==="clamp-on-blur"||e==="autocomplete"||e==="inputmode"||e==="size"||e==="variant"||e==="invalid"||e==="aria-label"||e==="aria-description"||e==="aria-describedby"){this._syncControlAttrs(),this._syncDisplayValue(),this._syncDerivedState(),this._syncAria();return}super.attributeChangedCallback(e,t,i)}}get value(){return this.getAttribute("value")||""}set value(e){e?this.setAttribute("value",e):this.removeAttribute("value")}get valueAsNumber(){return v(this.getAttribute("value"))}get rawValue(){return this._rawValue}set rawValue(e){this._rawValue=String(e??""),this._input&&(this._input.value=this._rawValue),this._syncAria()}focus(e){if(this._input){this._input.focus(e);return}super.focus(e)}blur(){this._input?.blur()}select(){this._input?.select()}stepUp(e=1){this._stepBy(Math.max(1,Number(e)||1),"step")}stepDown(e=1){this._stepBy(-Math.max(1,Number(e)||1),"step")}_locale(){return this.getAttribute("locale")||Intl.NumberFormat().resolvedOptions().locale||"en-US"}_precision(){const e=this.getAttribute("precision");if(e==null||e.trim()==="")return null;const t=Number(e);return Number.isInteger(t)&&t>=0?t:null}_step(){const e=this.getAttribute("step");if(e==null||e===""||e==="any")return null;const t=Number(e);return Number.isFinite(t)&&t>0?t:null}_effectivePrecision(){const e=this._precision();if(e!=null)return e;const t=this._step();return t!=null?F(t):null}_min(){return v(this.getAttribute("min"))}_max(){return v(this.getAttribute("max"))}_formatNumber(e){const t=this._effectivePrecision(),i=this.getAttribute("format")!=="plain";return new Intl.NumberFormat(this._locale(),{useGrouping:i,minimumFractionDigits:t??0,maximumFractionDigits:t??20}).format(e)}_displayStringForValue(){if(this._isEditing)return this._rawValue;const e=this.valueAsNumber;return e==null?this._rawValue:this._formatNumber(e)}_syncDisplayValue(){if(!this._input)return;const e=this._displayStringForValue();this._input.value!==e&&(this._input.value=e);const t=this.root.querySelector(".shell");t&&t.setAttribute("data-has-value",e?"true":"false")}_syncControlAttrs(){if(!this._input)return;this._input.placeholder=this.getAttribute("placeholder")||"",this._input.disabled=p(this,"disabled")||this._formControl.disabledByForm,this._input.disabled?this.root.querySelector(".shell")?.setAttribute("aria-disabled","true"):this.root.querySelector(".shell")?.removeAttribute("aria-disabled"),this._input.readOnly=this.hasAttribute("readonly"),this._input.required=this.hasAttribute("required"),this._input.name=this.getAttribute("name")||"",this._input.setAttribute("inputmode",this.getAttribute("inputmode")||"decimal");const e=this.getAttribute("autocomplete");e?this._input.setAttribute("autocomplete",e):this._input.removeAttribute("autocomplete")}_syncAria(){if(!this._input)return;const e=this.valueAsNumber;this._input.setAttribute("role","spinbutton"),this._input.setAttribute("aria-valuetext",this._input.value||"");const t=this._min(),i=this._max();t!=null?this._input.setAttribute("aria-valuemin",String(t)):this._input.removeAttribute("aria-valuemin"),i!=null?this._input.setAttribute("aria-valuemax",String(i)):this._input.removeAttribute("aria-valuemax"),e!=null?this._input.setAttribute("aria-valuenow",String(e)):this._input.removeAttribute("aria-valuenow");const r=this.root.querySelector('slot[name="label"]'),n=this.root.querySelector('slot[name="description"]'),l=this.root.querySelector('slot[name="error"]'),u=!!(this.getAttribute("label")||"").trim()||d(r),o=!!(this.getAttribute("description")||"").trim()||d(n),a=!!(this.getAttribute("data-error")||"").trim()||d(l);k.syncControlName(this._input,this,u?`${this._uid}-label`:null);const c=[];o&&c.push(`${this._uid}-description`),a&&c.push(`${this._uid}-error`),k.syncControlDescription(this._input,this,this._uid,c),this.hasAttribute("required")?this._input.setAttribute("aria-required","true"):this._input.removeAttribute("aria-required"),this.hasAttribute("invalid")||this._internalInvalidReason!=null||a?this._input.setAttribute("aria-invalid","true"):this._input.removeAttribute("aria-invalid")}_syncDerivedState(){const e=this.root.querySelector('slot[name="label"]'),t=this.root.querySelector('slot[name="description"]'),i=this.root.querySelector('slot[name="error"]'),r=this.root.querySelector('slot[name="prefix"]'),n=this.root.querySelector('slot[name="suffix"]'),l=this.root.querySelector('slot[name="increment-trigger"]'),u=this.root.querySelector('slot[name="decrement-trigger"]'),o=!!(this.getAttribute("label")||"").trim()||d(e),a=!!(this.getAttribute("description")||"").trim()||d(t),c=!!(this.getAttribute("data-error")||"").trim()||d(i),x=d(r),E=d(n),z=d(l),C=d(u),A=p(this,"show-steppers")||z||C,h=(D,I)=>{const f=this.root.querySelector(D);f&&(I?f.removeAttribute("hidden"):f.setAttribute("hidden",""))};h(".meta",o||a),h(".label",o),h(".description",a),h(".prefix",x),h(".suffix",E),h(".footer",c),h(".error",c),h(".steppers",A);const w=this.root.querySelector(".shell");w&&w.setAttribute("data-show-steppers",A?"true":"false")}_emitValueEvent(e,t,i,r){this.dispatchEvent(new CustomEvent(e,{detail:{value:t,previousValue:i,source:r},bubbles:!0,composed:!0}))}_emitInvalid(e){this._internalInvalidReason=e,this.setAttribute("data-internal-invalid",e),this._syncAria(),this.dispatchEvent(new CustomEvent("invalid",{detail:{reason:e},bubbles:!0,composed:!0}))}_clearInternalInvalid(){this._internalInvalidReason=null,this.removeAttribute("data-internal-invalid"),this._syncAria()}_commitValue(e,t){const i=this.valueAsNumber;if(e==null){if(i==null&&!this.value){this._rawValue="",this._syncDisplayValue();return}this._emitValueEvent("before-value-change",null,i,t),this.removeAttribute("value"),this._rawValue="",this._clearInternalInvalid(),this._syncDisplayValue(),this._syncAria(),this._emitValueEvent("value-change",null,i,t);return}const r=this._effectivePrecision(),n=U(m(e,r),r),l=Number(n);if(i!=null&&l===i&&this.value===n){this._rawValue=n,this._clearInternalInvalid(),this._syncDisplayValue();return}this._emitValueEvent("before-value-change",l,i,t),this.setAttribute("value",n),this._rawValue=n,this._clearInternalInvalid(),this._syncDisplayValue(),this._syncAria(),this._emitValueEvent("value-change",l,i,t)}_commitRaw(e){const t=this._rawValue.trim();if(!t){this._commitValue(null,e);return}const i=_(t,this._locale());if(i==null){this._emitInvalid("parse"),this._syncDisplayValue();return}const r=this._min(),n=this._max(),l=this._effectivePrecision(),u=m(i,l),o=p(this,"clamp-on-blur"),a=o?V(u,r,n):u;if(!o&&r!=null&&a<r){this._emitInvalid("min"),this._syncDisplayValue();return}if(!o&&n!=null&&a>n){this._emitInvalid("max"),this._syncDisplayValue();return}const c=this._step();if(!M(a,c,L(r),l)){this._emitInvalid("step"),this._syncDisplayValue();return}this._commitValue(a,e)}_stepBy(e,t){if(p(this,"disabled")||this.hasAttribute("readonly"))return;const i=this._step()??1,r=this._effectivePrecision(),n=this._min(),l=this._max(),o=(this._isEditing?_(this._rawValue,this._locale()):this.valueAsNumber)??n??0,a=V(m(o+i*e,r),n,l);this._commitValue(a,t),this._isEditing&&this._input&&(this._input.value=this._rawValue)}_registerWithForm(){this._formUnregister&&(this._formUnregister(),this._formUnregister=null);try{const r=this.getRootNode().host?.closest?.("ui-form")||null||this.closest("ui-form"),n=this.getAttribute("name");r&&typeof r.registerField=="function"&&n&&(this._formUnregister=r.registerField(n,{name:n,getValue:()=>this.value,setValue:l=>{l==null||l===""?this.removeAttribute("value"):this.setAttribute("value",String(l))},validate:async()=>{const l=this.valueAsNumber,u=this._min(),o=this._max();return this.hasAttribute("required")&&l==null?{valid:!1,message:"A value is required."}:l!=null&&u!=null&&l<u?{valid:!1,message:`Value must be at least ${u}.`}:l!=null&&o!=null&&l>o?{valid:!1,message:`Value must be at most ${o}.`}:{valid:this._internalInvalidReason==null,message:void 0}},setError:l=>{l?(this.setAttribute("data-error",l),this.toggleAttribute("invalid",!0)):(this.removeAttribute("data-error"),this._internalInvalidReason==null&&this.removeAttribute("invalid")),this._syncDerivedState(),this._syncAria()}}))}catch{}}_detachListeners(){this._input&&(this._input.removeEventListener("input",this._onInput),this._input.removeEventListener("focus",this._onFocus),this._input.removeEventListener("blur",this._onBlur),this._input.removeEventListener("keydown",this._onKeyDown),this._input.removeEventListener("wheel",this._onWheel))}_bindInput(){this._input&&(this._detachListeners(),this._input.addEventListener("input",this._onInput),this._input.addEventListener("focus",this._onFocus),this._input.addEventListener("blur",this._onBlur),this._input.addEventListener("keydown",this._onKeyDown),this._input.addEventListener("wheel",this._onWheel,{passive:!1}))}_onInput(e){this._rawValue=e.target.value,this._syncDisplayValue(),this._syncAria();const t=_(this._rawValue,this._locale());this.dispatchEvent(new CustomEvent("input",{detail:{rawValue:this._rawValue,value:t,source:"input"},bubbles:!0,composed:!0}))}_onFocus(){this._isEditing=!0,this._rawValue=this.value||this._rawValue,this._syncDisplayValue(),this._syncAria()}_onBlur(){this._isEditing=!1,this._commitRaw("blur")}_onKeyDown(e){if(e.key==="ArrowUp"){e.preventDefault(),this._stepBy(1,"keyboard");return}if(e.key==="ArrowDown"){e.preventDefault(),this._stepBy(-1,"keyboard");return}if(e.key==="PageUp"){e.preventDefault(),this._stepBy(10,"keyboard");return}if(e.key==="PageDown"){e.preventDefault(),this._stepBy(-10,"keyboard");return}if(e.key==="Home"){const t=this._min();if(t==null)return;e.preventDefault(),this._commitValue(t,"keyboard");return}if(e.key==="End"){const t=this._max();if(t==null)return;e.preventDefault(),this._commitValue(t,"keyboard");return}if(e.key==="Enter"){e.preventDefault(),this._isEditing=!1,this._commitRaw("keyboard"),e.isComposing||B.submitImplicitly(this);return}e.key==="Escape"&&(this._isEditing=!1,this._rawValue=this.value,this._clearInternalInvalid(),this._syncDisplayValue())}_onWheel(e){p(this,"allow-wheel")&&(!this._input||this.root.activeElement!==this._input||(e.preventDefault(),this._stepBy(e.deltaY<0?1:-1,"wheel")))}_onClick(e){const i=e.composedPath().find(r=>r instanceof HTMLElement?r.dataset.stepAction==="up"||r.dataset.stepAction==="down"||r.getAttribute("slot")==="increment-trigger"||r.getAttribute("slot")==="decrement-trigger":!1);if(i){if(i.dataset.stepAction==="up"||i.getAttribute("slot")==="increment-trigger"){e.preventDefault(),this._stepBy(1,"step");return}(i.dataset.stepAction==="down"||i.getAttribute("slot")==="decrement-trigger")&&(e.preventDefault(),this._stepBy(-1,"step"))}}_onSlotChange(){this._syncDerivedState(),this._syncAria()}render(){const e=this.getAttribute("label")||"",t=this.getAttribute("description")||"",i=this.getAttribute("data-error")||"";this.setContent(`
+      <style>${q}</style>
       <div class="root">
         <div class="meta">
           <label class="label" id="${this._uid}-label">
-            <slot name="label">${f(e)}</slot>
+            <slot name="label">${g(e)}</slot>
             <span class="required" ${this.hasAttribute("required")?"":"hidden"}>*</span>
           </label>
           <p class="description" id="${this._uid}-description">
-            <slot name="description">${f(t)}</slot>
+            <slot name="description">${g(t)}</slot>
           </p>
         </div>
         <div class="shell">
@@ -353,8 +353,8 @@
         </div>
         <div class="footer">
           <p class="error" id="${this._uid}-error">
-            <slot name="error">${f(i)}</slot>
+            <slot name="error">${g(i)}</slot>
           </p>
         </div>
       </div>
-    `),this._input=this.root.querySelector("input"),this._rawValue=this.value||this._rawValue,this._bindInput(),this._syncControlAttrs(),this._syncDerivedState(),this._syncDisplayValue(),this._syncAria()}}typeof customElements<"u"&&!customElements.get("ui-number-field")&&customElements.define("ui-number-field",S);exports.UINumberField=S;
+    `),this._input=this.root.querySelector("input"),this._rawValue=this.value||this._rawValue,this._bindInput(),this._syncControlAttrs(),this._syncDerivedState(),this._syncDisplayValue(),this._syncAria()}};y.formAssociated=!0;let b=y;typeof customElements<"u"&&!customElements.get("ui-number-field")&&customElements.define("ui-number-field",b);exports.UINumberField=b;

package/dist/number-field.esm.js

@@ -1,6 +1,8 @@
-import { E as z } from "./ElementBase-BeZT54Hj.mjs";
-import { s as I, a as D } from "./control-name-Bpj7F34X.mjs";
-const N = `
+import { E as C } from "./ElementBase-D5QsC5Vw.mjs";
+import { F as I, i as N } from "./form-control-D9wWUMBl.mjs";
+import { a as B } from "./implicit-submit-Lr0-q2LR.mjs";
+import { s as F, a as q } from "./control-name-Bpj7F34X.mjs";
+const L = `
   :host {
     --ui-number-field-padding: var(--ui-padding, 0);
     --ui-number-field-pad-x: calc(var(--ui-control-padding-inline-2, 12px) - 1px);
@@ -311,7 +313,7 @@ const N = `
     --ui-number-field-color: #e2e8f0;
     --ui-number-field-muted: #94a3b8;
     --ui-number-field-border-color: #334155;
-    --ui-number-field-focus: #93c5fd;
+    --ui-number-field-focus: var(--ui-color-accent-on-dark, #93c5fd);
     --ui-number-field-placeholder: color-mix(in srgb, #e2e8f0 46%, transparent);
     --ui-number-field-shadow: 0 2px 8px rgba(2, 6, 23, 0.24);
   }
@@ -323,69 +325,76 @@ const N = `
     }
   }
 `;
-function f(r) {
-  return r.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+function f(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function d(r) {
-  if (!r) return !1;
-  const e = r.assignedNodes({ flatten: !0 });
+function d(s) {
+  if (!s) return !1;
+  const e = s.assignedNodes({ flatten: !0 });
   return e.length ? e.some((t) => t.nodeType === Node.TEXT_NODE ? !!t.textContent?.trim() : t.nodeType === Node.ELEMENT_NODE) : !1;
 }
-function p(r, e) {
-  const t = r.getAttribute(e);
+function p(s, e) {
+  const t = s.getAttribute(e);
   if (t == null) return !1;
   const i = String(t).trim().toLowerCase();
   return i !== "false" && i !== "0";
 }
-function g(r) {
-  if (r == null || r.trim() === "") return null;
-  const e = Number(r);
+function g(s) {
+  if (s == null || s.trim() === "") return null;
+  const e = Number(s);
   return Number.isFinite(e) ? e : null;
 }
-function C(r) {
-  const e = String(r), t = e.match(/e-(\d+)$/i);
+function M(s) {
+  const e = String(s), t = e.match(/e-(\d+)$/i);
   if (t) return Number(t[1]);
   const i = e.split(".")[1];
   return i ? i.length : 0;
 }
-function m(r, e) {
-  if (e == null || e < 0) return r;
+function m(s, e) {
+  if (e == null || e < 0) return s;
   const t = 10 ** e;
-  return Math.round((r + Number.EPSILON) * t) / t;
+  return Math.round((s + Number.EPSILON) * t) / t;
 }
-function A(r, e, t) {
-  return e != null && r < e ? e : t != null && r > t ? t : r;
+function S(s, e, t) {
+  return e != null && s < e ? e : t != null && s > t ? t : s;
 }
-function B(r) {
-  return r ?? 0;
+function P(s) {
+  return s ?? 0;
 }
-function F(r, e, t, i) {
+function $(s, e, t, i) {
   if (e == null || e <= 0) return !0;
-  const s = m((r - t) / e, i != null ? i + 2 : 8);
-  return Math.abs(s - Math.round(s)) < 1e-7;
+  const r = m((s - t) / e, i != null ? i + 2 : 8);
+  return Math.abs(r - Math.round(r)) < 1e-7;
 }
-function q(r) {
-  const e = new Intl.NumberFormat(r).formatToParts(12345.6);
+function R(s) {
+  const e = new Intl.NumberFormat(s).formatToParts(12345.6);
   return {
     group: e.find((t) => t.type === "group")?.value || ",",
     decimal: e.find((t) => t.type === "decimal")?.value || "."
   };
 }
-function v(r, e) {
-  const t = r.trim();
+function v(s, e) {
+  const t = s.trim();
   if (!t) return null;
-  const { group: i, decimal: s } = q(e);
+  const { group: i, decimal: r } = R(e);
   let n = t.replace(/[\s\u00a0\u202f]/g, "");
-  if (n = n.split(i).join(""), s !== "." && (n = n.split(s).join(".")), n = n.replace(/[−–]/g, "-"), !/^[+-]?(?:\d+\.?\d*|\.\d+)$/.test(n)) return null;
+  if (n = n.split(i).join(""), r !== "." && (n = n.split(r).join(".")), n = n.replace(/[−–]/g, "-"), !/^[+-]?(?:\d+\.?\d*|\.\d+)$/.test(n)) return null;
   const l = Number(n);
   return Number.isFinite(l) ? l : null;
 }
-function L(r, e) {
-  return e != null && e >= 0 ? r.toFixed(e) : String(r);
+function U(s, e) {
+  return e != null && e >= 0 ? s.toFixed(e) : String(s);
 }
-class M extends z {
+const y = class y extends C {
   constructor() {
-    super(), this._input = null, this._formUnregister = null, this._uid = Math.random().toString(36).slice(2, 9), this._rawValue = "", this._isEditing = !1, this._internalInvalidReason = null, this._onInput = this._onInput.bind(this), this._onBlur = this._onBlur.bind(this), this._onFocus = this._onFocus.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onWheel = this._onWheel.bind(this), this._onSlotChange = this._onSlotChange.bind(this), this._onClick = this._onClick.bind(this);
+    super(), this._formControl = new I(this, {
+      getValue: () => this.value,
+      getValidity: () => ({ valueMissing: N(this) && !this.value, anchor: this._input }),
+      defaultAttribute: "value",
+      onFormDisabled: (e) => {
+        this._input && (this._input.disabled = e || p(this, "disabled"));
+      }
+    }), this._input = null, this._formUnregister = null, this._uid = Math.random().toString(36).slice(2, 9), this._rawValue = "", this._isEditing = !1, this._internalInvalidReason = null, this._onInput = this._onInput.bind(this), this._onBlur = this._onBlur.bind(this), this._onFocus = this._onFocus.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onWheel = this._onWheel.bind(this), this._onSlotChange = this._onSlotChange.bind(this), this._onClick = this._onClick.bind(this);
   }
   static get observedAttributes() {
     return [
@@ -417,11 +426,21 @@ class M extends z {
       "variant"
     ];
   }
+  formResetCallback() {
+    this._formControl.formResetCallback();
+  }
+  formDisabledCallback(e) {
+    this._formControl.formDisabledCallback(e);
+  }
+  /** The `<form>` this field belongs to, if any. */
+  get form() {
+    return this._formControl.form;
+  }
   connectedCallback() {
-    super.connectedCallback(), this.root.addEventListener("slotchange", this._onSlotChange), this.addEventListener("click", this._onClick), this._registerWithForm();
+    super.connectedCallback(), this._formControl.connect(), this.root.addEventListener("slotchange", this._onSlotChange), this.addEventListener("click", this._onClick), this._registerWithForm();
   }
   disconnectedCallback() {
-    this.root.removeEventListener("slotchange", this._onSlotChange), this.removeEventListener("click", this._onClick), this._detachListeners(), this._formUnregister && (this._formUnregister(), this._formUnregister = null), super.disconnectedCallback();
+    this._formControl.disconnect(), this.root.removeEventListener("slotchange", this._onSlotChange), this.removeEventListener("click", this._onClick), this._detachListeners(), this._formUnregister && (this._formUnregister(), this._formUnregister = null), super.disconnectedCallback();
   }
   shouldRenderOnAttributeChange(e) {
     return e === "label" || e === "description" || e === "data-error";
@@ -492,7 +511,7 @@ class M extends z {
     const e = this._precision();
     if (e != null) return e;
     const t = this._step();
-    return t != null ? C(t) : null;
+    return t != null ? M(t) : null;
   }
   _min() {
     return g(this.getAttribute("min"));
@@ -522,7 +541,7 @@ class M extends z {
   }
   _syncControlAttrs() {
     if (!this._input) return;
-    this._input.placeholder = this.getAttribute("placeholder") || "", this._input.disabled = p(this, "disabled"), this._input.disabled ? this.root.querySelector(".shell")?.setAttribute("aria-disabled", "true") : this.root.querySelector(".shell")?.removeAttribute("aria-disabled"), this._input.readOnly = this.hasAttribute("readonly"), this._input.required = this.hasAttribute("required"), this._input.name = this.getAttribute("name") || "", this._input.setAttribute("inputmode", this.getAttribute("inputmode") || "decimal");
+    this._input.placeholder = this.getAttribute("placeholder") || "", this._input.disabled = p(this, "disabled") || this._formControl.disabledByForm, this._input.disabled ? this.root.querySelector(".shell")?.setAttribute("aria-disabled", "true") : this.root.querySelector(".shell")?.removeAttribute("aria-disabled"), this._input.readOnly = this.hasAttribute("readonly"), this._input.required = this.hasAttribute("required"), this._input.name = this.getAttribute("name") || "", this._input.setAttribute("inputmode", this.getAttribute("inputmode") || "decimal");
     const e = this.getAttribute("autocomplete");
     e ? this._input.setAttribute("autocomplete", e) : this._input.removeAttribute("autocomplete");
   }
@@ -532,24 +551,24 @@ class M extends z {
     this._input.setAttribute("role", "spinbutton"), this._input.setAttribute("aria-valuetext", this._input.value || "");
     const t = this._min(), i = this._max();
     t != null ? this._input.setAttribute("aria-valuemin", String(t)) : this._input.removeAttribute("aria-valuemin"), i != null ? this._input.setAttribute("aria-valuemax", String(i)) : this._input.removeAttribute("aria-valuemax"), e != null ? this._input.setAttribute("aria-valuenow", String(e)) : this._input.removeAttribute("aria-valuenow");
-    const s = this.root.querySelector('slot[name="label"]'), n = this.root.querySelector('slot[name="description"]'), l = this.root.querySelector('slot[name="error"]'), u = !!(this.getAttribute("label") || "").trim() || d(s), a = !!(this.getAttribute("description") || "").trim() || d(n), o = !!(this.getAttribute("data-error") || "").trim() || d(l);
-    I(this._input, this, u ? `${this._uid}-label` : null);
+    const r = this.root.querySelector('slot[name="label"]'), n = this.root.querySelector('slot[name="description"]'), l = this.root.querySelector('slot[name="error"]'), u = !!(this.getAttribute("label") || "").trim() || d(r), o = !!(this.getAttribute("description") || "").trim() || d(n), a = !!(this.getAttribute("data-error") || "").trim() || d(l);
+    F(this._input, this, u ? `${this._uid}-label` : null);
     const c = [];
-    a && c.push(`${this._uid}-description`), o && c.push(`${this._uid}-error`), D(this._input, this, this._uid, c), this.hasAttribute("required") ? this._input.setAttribute("aria-required", "true") : this._input.removeAttribute("aria-required"), this.hasAttribute("invalid") || this._internalInvalidReason != null || o ? this._input.setAttribute("aria-invalid", "true") : this._input.removeAttribute("aria-invalid");
+    o && c.push(`${this._uid}-description`), a && c.push(`${this._uid}-error`), q(this._input, this, this._uid, c), this.hasAttribute("required") ? this._input.setAttribute("aria-required", "true") : this._input.removeAttribute("aria-required"), this.hasAttribute("invalid") || this._internalInvalidReason != null || a ? this._input.setAttribute("aria-invalid", "true") : this._input.removeAttribute("aria-invalid");
   }
   _syncDerivedState() {
-    const e = this.root.querySelector('slot[name="label"]'), t = this.root.querySelector('slot[name="description"]'), i = this.root.querySelector('slot[name="error"]'), s = this.root.querySelector('slot[name="prefix"]'), n = this.root.querySelector('slot[name="suffix"]'), l = this.root.querySelector('slot[name="increment-trigger"]'), u = this.root.querySelector('slot[name="decrement-trigger"]'), a = !!(this.getAttribute("label") || "").trim() || d(e), o = !!(this.getAttribute("description") || "").trim() || d(t), c = !!(this.getAttribute("data-error") || "").trim() || d(i), _ = d(s), w = d(n), S = d(l), V = d(u), y = p(this, "show-steppers") || S || V, h = (k, E) => {
-      const b = this.root.querySelector(k);
-      b && (E ? b.removeAttribute("hidden") : b.setAttribute("hidden", ""));
+    const e = this.root.querySelector('slot[name="label"]'), t = this.root.querySelector('slot[name="description"]'), i = this.root.querySelector('slot[name="error"]'), r = this.root.querySelector('slot[name="prefix"]'), n = this.root.querySelector('slot[name="suffix"]'), l = this.root.querySelector('slot[name="increment-trigger"]'), u = this.root.querySelector('slot[name="decrement-trigger"]'), o = !!(this.getAttribute("label") || "").trim() || d(e), a = !!(this.getAttribute("description") || "").trim() || d(t), c = !!(this.getAttribute("data-error") || "").trim() || d(i), x = d(r), k = d(n), V = d(l), E = d(u), A = p(this, "show-steppers") || V || E, h = (z, D) => {
+      const b = this.root.querySelector(z);
+      b && (D ? b.removeAttribute("hidden") : b.setAttribute("hidden", ""));
     };
-    h(".meta", a || o), h(".label", a), h(".description", o), h(".prefix", _), h(".suffix", w), h(".footer", c), h(".error", c), h(".steppers", y);
-    const x = this.root.querySelector(".shell");
-    x && x.setAttribute("data-show-steppers", y ? "true" : "false");
+    h(".meta", o || a), h(".label", o), h(".description", a), h(".prefix", x), h(".suffix", k), h(".footer", c), h(".error", c), h(".steppers", A);
+    const w = this.root.querySelector(".shell");
+    w && w.setAttribute("data-show-steppers", A ? "true" : "false");
   }
-  _emitValueEvent(e, t, i, s) {
+  _emitValueEvent(e, t, i, r) {
     this.dispatchEvent(
       new CustomEvent(e, {
-        detail: { value: t, previousValue: i, source: s },
+        detail: { value: t, previousValue: i, source: r },
         bubbles: !0,
         composed: !0
       })
@@ -577,7 +596,7 @@ class M extends z {
       this._emitValueEvent("before-value-change", null, i, t), this.removeAttribute("value"), this._rawValue = "", this._clearInternalInvalid(), this._syncDisplayValue(), this._syncAria(), this._emitValueEvent("value-change", null, i, t);
       return;
     }
-    const s = this._effectivePrecision(), n = L(m(e, s), s), l = Number(n);
+    const r = this._effectivePrecision(), n = U(m(e, r), r), l = Number(n);
     if (i != null && l === i && this.value === n) {
       this._rawValue = n, this._clearInternalInvalid(), this._syncDisplayValue();
       return;
@@ -595,40 +614,40 @@ class M extends z {
       this._emitInvalid("parse"), this._syncDisplayValue();
       return;
     }
-    const s = this._min(), n = this._max(), l = this._effectivePrecision(), u = m(i, l), a = p(this, "clamp-on-blur"), o = a ? A(u, s, n) : u;
-    if (!a && s != null && o < s) {
+    const r = this._min(), n = this._max(), l = this._effectivePrecision(), u = m(i, l), o = p(this, "clamp-on-blur"), a = o ? S(u, r, n) : u;
+    if (!o && r != null && a < r) {
       this._emitInvalid("min"), this._syncDisplayValue();
       return;
     }
-    if (!a && n != null && o > n) {
+    if (!o && n != null && a > n) {
       this._emitInvalid("max"), this._syncDisplayValue();
       return;
     }
     const c = this._step();
-    if (!F(o, c, B(s), l)) {
+    if (!$(a, c, P(r), l)) {
       this._emitInvalid("step"), this._syncDisplayValue();
       return;
     }
-    this._commitValue(o, e);
+    this._commitValue(a, e);
   }
   _stepBy(e, t) {
     if (p(this, "disabled") || this.hasAttribute("readonly")) return;
-    const i = this._step() ?? 1, s = this._effectivePrecision(), n = this._min(), l = this._max(), a = (this._isEditing ? v(this._rawValue, this._locale()) : this.valueAsNumber) ?? n ?? 0, o = A(m(a + i * e, s), n, l);
-    this._commitValue(o, t), this._isEditing && this._input && (this._input.value = this._rawValue);
+    const i = this._step() ?? 1, r = this._effectivePrecision(), n = this._min(), l = this._max(), o = (this._isEditing ? v(this._rawValue, this._locale()) : this.valueAsNumber) ?? n ?? 0, a = S(m(o + i * e, r), n, l);
+    this._commitValue(a, t), this._isEditing && this._input && (this._input.value = this._rawValue);
   }
   _registerWithForm() {
     this._formUnregister && (this._formUnregister(), this._formUnregister = null);
     try {
-      const s = this.getRootNode().host?.closest?.("ui-form") || null || this.closest("ui-form"), n = this.getAttribute("name");
-      s && typeof s.registerField == "function" && n && (this._formUnregister = s.registerField(n, {
+      const r = this.getRootNode().host?.closest?.("ui-form") || null || this.closest("ui-form"), n = this.getAttribute("name");
+      r && typeof r.registerField == "function" && n && (this._formUnregister = r.registerField(n, {
         name: n,
         getValue: () => this.value,
         setValue: (l) => {
           l == null || l === "" ? this.removeAttribute("value") : this.setAttribute("value", String(l));
         },
         validate: async () => {
-          const l = this.valueAsNumber, u = this._min(), a = this._max();
-          return this.hasAttribute("required") && l == null ? { valid: !1, message: "A value is required." } : l != null && u != null && l < u ? { valid: !1, message: `Value must be at least ${u}.` } : l != null && a != null && l > a ? { valid: !1, message: `Value must be at most ${a}.` } : { valid: this._internalInvalidReason == null, message: void 0 };
+          const l = this.valueAsNumber, u = this._min(), o = this._max();
+          return this.hasAttribute("required") && l == null ? { valid: !1, message: "A value is required." } : l != null && u != null && l < u ? { valid: !1, message: `Value must be at least ${u}.` } : l != null && o != null && l > o ? { valid: !1, message: `Value must be at most ${o}.` } : { valid: this._internalInvalidReason == null, message: void 0 };
         },
         setError: (l) => {
           l ? (this.setAttribute("data-error", l), this.toggleAttribute("invalid", !0)) : (this.removeAttribute("data-error"), this._internalInvalidReason == null && this.removeAttribute("invalid")), this._syncDerivedState(), this._syncAria();
@@ -690,7 +709,7 @@ class M extends z {
       return;
     }
     if (e.key === "Enter") {
-      e.preventDefault(), this._isEditing = !1, this._commitRaw("keyboard");
+      e.preventDefault(), this._isEditing = !1, this._commitRaw("keyboard"), e.isComposing || B(this);
       return;
     }
     e.key === "Escape" && (this._isEditing = !1, this._rawValue = this.value, this._clearInternalInvalid(), this._syncDisplayValue());
@@ -699,7 +718,7 @@ class M extends z {
     p(this, "allow-wheel") && (!this._input || this.root.activeElement !== this._input || (e.preventDefault(), this._stepBy(e.deltaY < 0 ? 1 : -1, "wheel")));
   }
   _onClick(e) {
-    const i = e.composedPath().find((s) => s instanceof HTMLElement ? s.dataset.stepAction === "up" || s.dataset.stepAction === "down" || s.getAttribute("slot") === "increment-trigger" || s.getAttribute("slot") === "decrement-trigger" : !1);
+    const i = e.composedPath().find((r) => r instanceof HTMLElement ? r.dataset.stepAction === "up" || r.dataset.stepAction === "down" || r.getAttribute("slot") === "increment-trigger" || r.getAttribute("slot") === "decrement-trigger" : !1);
     if (i) {
       if (i.dataset.stepAction === "up" || i.getAttribute("slot") === "increment-trigger") {
         e.preventDefault(), this._stepBy(1, "step");
@@ -714,7 +733,7 @@ class M extends z {
   render() {
     const e = this.getAttribute("label") || "", t = this.getAttribute("description") || "", i = this.getAttribute("data-error") || "";
     this.setContent(`
-      <style>${N}</style>
+      <style>${L}</style>
       <div class="root">
         <div class="meta">
           <label class="label" id="${this._uid}-label">
@@ -752,8 +771,10 @@ class M extends z {
       </div>
     `), this._input = this.root.querySelector("input"), this._rawValue = this.value || this._rawValue, this._bindInput(), this._syncControlAttrs(), this._syncDerivedState(), this._syncDisplayValue(), this._syncAria();
   }
-}
-typeof customElements < "u" && !customElements.get("ui-number-field") && customElements.define("ui-number-field", M);
+};
+y.formAssociated = !0;
+let _ = y;
+typeof customElements < "u" && !customElements.get("ui-number-field") && customElements.define("ui-number-field", _);
 export {
-  M as UINumberField
+  _ as UINumberField
 };

package/dist/number-ticker.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const I=require("./ElementBase-DxbvhLJs.js"),y=1200,v=0,O="ease-out",L="decimal",A=0,S=.4,F=6,N=new Set(["linear","ease-in","ease-out","ease-in-out","spring","bounce","overshoot"]),$=new Set(["decimal","currency"]),R=new Set(["symbol","narrowSymbol","code","name"]),G=new Set(["standard","compact"]),U=new Set(["short","long"]),H=new Set(["auto","always","exceptZero","never"]),Q=new Set(["interpolate","odometer"]),q=new Set(["immediate","visible"]),B=new Set(["start","end","center"]),a={sm:{fontSize:"14px",letterSpacing:"-0.02em",lineHeight:"1"},md:{fontSize:"22px",letterSpacing:"-0.04em",lineHeight:"0.98"},lg:{fontSize:"36px",letterSpacing:"-0.05em",lineHeight:"0.94"},xl:{fontSize:"56px",letterSpacing:"-0.06em",lineHeight:"0.9"}},Y=["0","1","2","3","4","5","6","7","8","9"],j=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const I=require("./ElementBase-CbUsP3D6.js"),y=1200,v=0,O="ease-out",L="decimal",A=0,S=.4,F=6,N=new Set(["linear","ease-in","ease-out","ease-in-out","spring","bounce","overshoot"]),$=new Set(["decimal","currency"]),R=new Set(["symbol","narrowSymbol","code","name"]),G=new Set(["standard","compact"]),U=new Set(["short","long"]),H=new Set(["auto","always","exceptZero","never"]),Q=new Set(["interpolate","odometer"]),q=new Set(["immediate","visible"]),B=new Set(["start","end","center"]),a={sm:{fontSize:"14px",letterSpacing:"-0.02em",lineHeight:"1"},md:{fontSize:"22px",letterSpacing:"-0.04em",lineHeight:"0.98"},lg:{fontSize:"36px",letterSpacing:"-0.05em",lineHeight:"0.94"},xl:{fontSize:"56px",letterSpacing:"-0.06em",lineHeight:"0.9"}},Y=["0","1","2","3","4","5","6","7","8","9"],j=`
   :host {
     --ui-number-ticker-color: var(--ui-color-text, var(--ui-text, #0f172a));
     --ui-number-ticker-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));

package/dist/number-ticker.esm.js

@@ -1,4 +1,4 @@
-import { E as M } from "./ElementBase-BeZT54Hj.mjs";
+import { E as M } from "./ElementBase-D5QsC5Vw.mjs";
 const y = 1200, v = 0, I = "ease-out", O = "decimal", A = 0, S = 0.4, F = 6, L = /* @__PURE__ */ new Set([
   "linear",
   "ease-in",

package/dist/odometer.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const M=require("./ElementBase-DxbvhLJs.js"),D=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const M=require("./ElementBase-CbUsP3D6.js"),D=`
   :host {
     --ui-odometer-font-family: var(--ui-font-family-mono, var(--font-mono, ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace));
     --ui-odometer-font-size: var(--font-size-4, 1.25rem);

package/dist/odometer.esm.js

@@ -1,4 +1,4 @@
-import { E as T } from "./ElementBase-BeZT54Hj.mjs";
+import { E as T } from "./ElementBase-D5QsC5Vw.mjs";
 const D = `
   :host {
     --ui-odometer-font-family: var(--ui-font-family-mono, var(--font-mono, ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace));

package/dist/orbiter.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const B=require("./ElementBase-DxbvhLJs.js"),O="18s",V="0s",A="88px",P="44px",w="128px",E="28px",$="20px",C=-90,X=6,W=new Set(["none","sm","md","lg","full"]),j=new Set(["clockwise","counterclockwise","alternate"]),Z=new Set(["calm","smooth","snappy","bouncy"]),_={xs:{orbitRadius:"54px",itemSize:"30px",centerSize:"80px",ringGap:"16px",padding:"12px",panelRadius:"22px"},sm:{orbitRadius:"68px",itemSize:"36px",centerSize:"96px",ringGap:"20px",padding:"14px",panelRadius:"24px"},md:{orbitRadius:A,itemSize:P,centerSize:w,ringGap:E,padding:$,panelRadius:"28px"},lg:{orbitRadius:"108px",itemSize:"52px",centerSize:"148px",ringGap:"32px",padding:"24px",panelRadius:"32px"},xl:{orbitRadius:"132px",itemSize:"64px",centerSize:"172px",ringGap:"38px",padding:"28px",panelRadius:"36px"}},M={calm:{durationScale:1.28,accentOpacity:.12},smooth:{durationScale:1,accentOpacity:.16},snappy:{durationScale:.82,accentOpacity:.18},bouncy:{durationScale:.92,accentOpacity:.22}},Q=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const B=require("./ElementBase-CbUsP3D6.js"),O="18s",V="0s",A="88px",P="44px",w="128px",E="28px",$="20px",C=-90,X=6,W=new Set(["none","sm","md","lg","full"]),j=new Set(["clockwise","counterclockwise","alternate"]),Z=new Set(["calm","smooth","snappy","bouncy"]),_={xs:{orbitRadius:"54px",itemSize:"30px",centerSize:"80px",ringGap:"16px",padding:"12px",panelRadius:"22px"},sm:{orbitRadius:"68px",itemSize:"36px",centerSize:"96px",ringGap:"20px",padding:"14px",panelRadius:"24px"},md:{orbitRadius:A,itemSize:P,centerSize:w,ringGap:E,padding:$,panelRadius:"28px"},lg:{orbitRadius:"108px",itemSize:"52px",centerSize:"148px",ringGap:"32px",padding:"24px",panelRadius:"32px"},xl:{orbitRadius:"132px",itemSize:"64px",centerSize:"172px",ringGap:"38px",padding:"28px",panelRadius:"36px"}},M={calm:{durationScale:1.28,accentOpacity:.12},smooth:{durationScale:1,accentOpacity:.16},snappy:{durationScale:.82,accentOpacity:.18},bouncy:{durationScale:.92,accentOpacity:.22}},Q=`
   :host {
     --ui-orbiter-duration: ${O};
     --ui-orbiter-delay: ${V};

package/dist/orbiter.esm.js

@@ -1,4 +1,4 @@
-import { E as U } from "./ElementBase-BeZT54Hj.mjs";
+import { E as U } from "./ElementBase-D5QsC5Vw.mjs";
 const O = "18s", V = "0s", A = "88px", P = "44px", w = "128px", E = "28px", $ = "20px", C = -90, X = 6, B = /* @__PURE__ */ new Set(["none", "sm", "md", "lg", "full"]), W = /* @__PURE__ */ new Set(["clockwise", "counterclockwise", "alternate"]), j = /* @__PURE__ */ new Set(["calm", "smooth", "snappy", "bouncy"]), _ = {
   xs: {
     orbitRadius: "54px",