@editora/ui-core 0.1.25 → 0.2.1

package/dist/number-field.cjs.js

@@ -1,24 +1,26 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const z=require("./ElementBase-DxbvhLJs.js"),A=require("./control-name-BmoI1m3a.js"),N=`
+"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=`
   :host {
-    --ui-number-field-padding: var(--ui-padding, 10px 12px);
-    --ui-number-field-border-color: var(--ui-color-border, var(--ui-border-color, #cbd5e1));
+    --ui-number-field-padding: var(--ui-padding, 0);
+    --ui-number-field-pad-x: calc(var(--ui-control-padding-inline-2, 12px) - 1px);
+    --ui-number-field-font-size: var(--ui-control-font-size-2, 14px);
+    --ui-number-field-border-color: var(--ui-color-line, var(--ui-color-border, var(--ui-border-color, #cbd5e1)));
     --ui-number-field-border-width: 1px;
     --ui-number-field-border-style: solid;
     --ui-number-field-border:
       var(--ui-number-field-border-width) var(--ui-number-field-border-style) var(--ui-number-field-border-color);
-    --ui-number-field-radius: var(--ui-radius, 10px);
-    --ui-number-field-min-height: var(--ui-min-height, 40px);
+    --ui-number-field-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    --ui-number-field-min-height: var(--ui-min-height, var(--base-input-height-md, var(--ui-control-height-2, 32px)));
     --ui-number-field-width: 100%;
     --ui-number-field-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
     --ui-number-field-color: var(--ui-color-text, var(--ui-text, #0f172a));
     --ui-number-field-muted: var(--ui-color-muted, var(--ui-muted, #526175));
     --ui-number-field-focus: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
-    --ui-number-field-danger: var(--ui-color-danger, var(--ui-error, #dc2626));
+    --ui-number-field-danger: var(--ui-color-danger-text, var(--ui-color-danger, var(--ui-error, #dc2626)));
     --ui-number-field-shadow: none;
     --ui-number-field-gap: 8px;
     --ui-number-field-shell-gap: 8px;
     --ui-number-field-meta-gap: 4px;
-    --ui-number-field-placeholder: color-mix(in srgb, var(--ui-number-field-color) 40%, transparent);
+    --ui-number-field-placeholder: var(--ui-color-placeholder, color-mix(in srgb, var(--ui-number-field-color) 62%, transparent));
     color-scheme: light dark;
     display: block;
     inline-size: var(--ui-number-field-width);
@@ -94,7 +96,7 @@
     gap: var(--ui-number-field-shell-gap);
     box-sizing: border-box;
     min-block-size: var(--ui-number-field-min-height);
-    padding-inline: 10px;
+    padding-inline: var(--ui-number-field-pad-x);
     border: var(--ui-number-field-border);
     border-radius: var(--ui-number-field-radius);
     background: var(--ui-number-field-bg);
@@ -107,8 +109,13 @@
   }
 
   .shell:focus-within {
-    border-color: color-mix(in srgb, var(--ui-number-field-focus) 56%, var(--ui-number-field-border-color));
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-number-field-focus) 24%, transparent);
+    border-color: var(--ui-ring-color, var(--ui-number-field-focus));
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-number-field-focus));
+    outline-offset: -1px;
+  }
+
+  .shell:hover:not(:focus-within) {
+    border-color: var(--ui-color-line-strong, var(--ui-number-field-border-color));
   }
 
   .prefix,
@@ -136,7 +143,7 @@
     border: none;
     background: transparent;
     color: inherit;
-    font: 500 14px/1.4 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    font: 500 var(--ui-number-field-font-size)/1.4 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     padding: var(--ui-number-field-padding);
     min-block-size: calc(var(--ui-number-field-min-height) - 2px);
     margin: 0;
@@ -251,12 +258,14 @@
 
   :host([invalid]) .shell,
   :host([data-internal-invalid]) .shell {
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-number-field-danger) 20%, transparent);
+    box-shadow: 0 0 0 1px var(--ui-number-field-danger);
   }
 
   :host([size="sm"]) {
-    --ui-number-field-min-height: 34px;
-    --ui-number-field-padding: 7px 8px;
+    --ui-number-field-min-height: var(--ui-min-height, var(--base-input-height-sm, var(--ui-control-height-1, 24px)));
+    --ui-number-field-pad-x: calc(var(--ui-control-padding-inline-1, 8px) - 1px);
+    --ui-number-field-font-size: var(--ui-control-font-size-1, 12px);
+    --ui-number-field-radius: var(--ui-control-radius-1, var(--ui-radius, 6px));
     --ui-number-field-shell-gap: 6px;
   }
 
@@ -270,8 +279,10 @@
   }
 
   :host([size="lg"]) {
-    --ui-number-field-min-height: 46px;
-    --ui-number-field-padding: 11px 14px;
+    --ui-number-field-min-height: var(--ui-min-height, var(--base-input-height-lg, var(--ui-control-height-3, 40px)));
+    --ui-number-field-pad-x: calc(var(--ui-control-padding-inline-3, 16px) - 1px);
+    --ui-number-field-font-size: var(--ui-control-font-size-3, 16px);
+    --ui-number-field-radius: var(--ui-control-radius-3, var(--ui-radius, 6px));
     --ui-number-field-shell-gap: 10px;
   }
 
@@ -309,7 +320,7 @@
       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 _(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 z.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),v=d(s),V=d(n),k=d(l),E=d(u),y=p(this,"show-steppers")||k||E,h=(I,D)=>{const b=this.root.querySelector(I);b&&(D?b.removeAttribute("hidden"):b.setAttribute("hidden",""))};h(".meta",a||o),h(".label",a),h(".description",o),h(".prefix",v),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=_(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?_(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=_(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(`
+`;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>
       <div class="root">
         <div class="meta">

package/dist/number-field.esm.js

@@ -1,26 +1,28 @@
-import { E as I } from "./ElementBase-BeZT54Hj.mjs";
-import { s as D, a as z } from "./control-name-Bpj7F34X.mjs";
+import { E as z } from "./ElementBase-BeZT54Hj.mjs";
+import { s as I, a as D } from "./control-name-Bpj7F34X.mjs";
 const N = `
   :host {
-    --ui-number-field-padding: var(--ui-padding, 10px 12px);
-    --ui-number-field-border-color: var(--ui-color-border, var(--ui-border-color, #cbd5e1));
+    --ui-number-field-padding: var(--ui-padding, 0);
+    --ui-number-field-pad-x: calc(var(--ui-control-padding-inline-2, 12px) - 1px);
+    --ui-number-field-font-size: var(--ui-control-font-size-2, 14px);
+    --ui-number-field-border-color: var(--ui-color-line, var(--ui-color-border, var(--ui-border-color, #cbd5e1)));
     --ui-number-field-border-width: 1px;
     --ui-number-field-border-style: solid;
     --ui-number-field-border:
       var(--ui-number-field-border-width) var(--ui-number-field-border-style) var(--ui-number-field-border-color);
-    --ui-number-field-radius: var(--ui-radius, 10px);
-    --ui-number-field-min-height: var(--ui-min-height, 40px);
+    --ui-number-field-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    --ui-number-field-min-height: var(--ui-min-height, var(--base-input-height-md, var(--ui-control-height-2, 32px)));
     --ui-number-field-width: 100%;
     --ui-number-field-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
     --ui-number-field-color: var(--ui-color-text, var(--ui-text, #0f172a));
     --ui-number-field-muted: var(--ui-color-muted, var(--ui-muted, #526175));
     --ui-number-field-focus: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
-    --ui-number-field-danger: var(--ui-color-danger, var(--ui-error, #dc2626));
+    --ui-number-field-danger: var(--ui-color-danger-text, var(--ui-color-danger, var(--ui-error, #dc2626)));
     --ui-number-field-shadow: none;
     --ui-number-field-gap: 8px;
     --ui-number-field-shell-gap: 8px;
     --ui-number-field-meta-gap: 4px;
-    --ui-number-field-placeholder: color-mix(in srgb, var(--ui-number-field-color) 40%, transparent);
+    --ui-number-field-placeholder: var(--ui-color-placeholder, color-mix(in srgb, var(--ui-number-field-color) 62%, transparent));
     color-scheme: light dark;
     display: block;
     inline-size: var(--ui-number-field-width);
@@ -96,7 +98,7 @@ const N = `
     gap: var(--ui-number-field-shell-gap);
     box-sizing: border-box;
     min-block-size: var(--ui-number-field-min-height);
-    padding-inline: 10px;
+    padding-inline: var(--ui-number-field-pad-x);
     border: var(--ui-number-field-border);
     border-radius: var(--ui-number-field-radius);
     background: var(--ui-number-field-bg);
@@ -109,8 +111,13 @@ const N = `
   }
 
   .shell:focus-within {
-    border-color: color-mix(in srgb, var(--ui-number-field-focus) 56%, var(--ui-number-field-border-color));
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-number-field-focus) 24%, transparent);
+    border-color: var(--ui-ring-color, var(--ui-number-field-focus));
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-number-field-focus));
+    outline-offset: -1px;
+  }
+
+  .shell:hover:not(:focus-within) {
+    border-color: var(--ui-color-line-strong, var(--ui-number-field-border-color));
   }
 
   .prefix,
@@ -138,7 +145,7 @@ const N = `
     border: none;
     background: transparent;
     color: inherit;
-    font: 500 14px/1.4 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    font: 500 var(--ui-number-field-font-size)/1.4 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     padding: var(--ui-number-field-padding);
     min-block-size: calc(var(--ui-number-field-min-height) - 2px);
     margin: 0;
@@ -253,12 +260,14 @@ const N = `
 
   :host([invalid]) .shell,
   :host([data-internal-invalid]) .shell {
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-number-field-danger) 20%, transparent);
+    box-shadow: 0 0 0 1px var(--ui-number-field-danger);
   }
 
   :host([size="sm"]) {
-    --ui-number-field-min-height: 34px;
-    --ui-number-field-padding: 7px 8px;
+    --ui-number-field-min-height: var(--ui-min-height, var(--base-input-height-sm, var(--ui-control-height-1, 24px)));
+    --ui-number-field-pad-x: calc(var(--ui-control-padding-inline-1, 8px) - 1px);
+    --ui-number-field-font-size: var(--ui-control-font-size-1, 12px);
+    --ui-number-field-radius: var(--ui-control-radius-1, var(--ui-radius, 6px));
     --ui-number-field-shell-gap: 6px;
   }
 
@@ -272,8 +281,10 @@ const N = `
   }
 
   :host([size="lg"]) {
-    --ui-number-field-min-height: 46px;
-    --ui-number-field-padding: 11px 14px;
+    --ui-number-field-min-height: var(--ui-min-height, var(--base-input-height-lg, var(--ui-control-height-3, 40px)));
+    --ui-number-field-pad-x: calc(var(--ui-control-padding-inline-3, 16px) - 1px);
+    --ui-number-field-font-size: var(--ui-control-font-size-3, 16px);
+    --ui-number-field-radius: var(--ui-control-radius-3, var(--ui-radius, 6px));
     --ui-number-field-shell-gap: 10px;
   }
 
@@ -360,7 +371,7 @@ function q(r) {
     decimal: e.find((t) => t.type === "decimal")?.value || "."
   };
 }
-function _(r, e) {
+function v(r, e) {
   const t = r.trim();
   if (!t) return null;
   const { group: i, decimal: s } = q(e);
@@ -372,7 +383,7 @@ function _(r, e) {
 function L(r, e) {
   return e != null && e >= 0 ? r.toFixed(e) : String(r);
 }
-class M extends I {
+class M extends z {
   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);
   }
@@ -522,16 +533,16 @@ class M extends I {
     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);
-    D(this._input, this, u ? `${this._uid}-label` : null);
+    I(this._input, this, u ? `${this._uid}-label` : null);
     const c = [];
-    a && c.push(`${this._uid}-description`), o && c.push(`${this._uid}-error`), z(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");
+    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");
   }
   _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), v = d(s), w = d(n), S = d(l), V = d(u), y = p(this, "show-steppers") || S || V, h = (k, E) => {
+    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", ""));
     };
-    h(".meta", a || o), h(".label", a), h(".description", o), h(".prefix", v), h(".suffix", w), h(".footer", c), h(".error", c), h(".steppers", y);
+    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");
   }
@@ -579,7 +590,7 @@ class M extends I {
       this._commitValue(null, e);
       return;
     }
-    const i = _(t, this._locale());
+    const i = v(t, this._locale());
     if (i == null) {
       this._emitInvalid("parse"), this._syncDisplayValue();
       return;
@@ -602,7 +613,7 @@ class M extends I {
   }
   _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 ? _(this._rawValue, this._locale()) : this.valueAsNumber) ?? n ?? 0, o = A(m(a + i * e, s), n, l);
+    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);
   }
   _registerWithForm() {
@@ -634,7 +645,7 @@ class M extends I {
   }
   _onInput(e) {
     this._rawValue = e.target.value, this._syncDisplayValue(), this._syncAria();
-    const t = _(this._rawValue, this._locale());
+    const t = v(this._rawValue, this._locale());
     this.dispatchEvent(
       new CustomEvent("input", {
         detail: { rawValue: this._rawValue, value: t, source: "input" },

package/dist/number-ticker.cjs.js

@@ -54,19 +54,19 @@
   }
 
   :host([tone="info"]) {
-    --ui-number-ticker-color: var(--ui-color-info, #0e7490);
+    --ui-number-ticker-color: var(--ui-color-info-text, var(--ui-color-info, #0e7490));
   }
 
   :host([tone="success"]) {
-    --ui-number-ticker-color: var(--ui-color-success, #15803d);
+    --ui-number-ticker-color: var(--ui-color-success-text, var(--ui-color-success, #15803d));
   }
 
   :host([tone="warning"]) {
-    --ui-number-ticker-color: var(--ui-color-warning, #b45309);
+    --ui-number-ticker-color: var(--ui-color-warning-text, var(--ui-color-warning, #b45309));
   }
 
   :host([tone="danger"]) {
-    --ui-number-ticker-color: var(--ui-color-danger, #dc2626);
+    --ui-number-ticker-color: var(--ui-color-danger-text, var(--ui-color-danger, #dc2626));
   }
 
   :host([align="left"]),

package/dist/number-ticker.esm.js

@@ -84,19 +84,19 @@ const y = 1200, v = 0, I = "ease-out", O = "decimal", A = 0, S = 0.4, F = 6, L =
   }
 
   :host([tone="info"]) {
-    --ui-number-ticker-color: var(--ui-color-info, #0e7490);
+    --ui-number-ticker-color: var(--ui-color-info-text, var(--ui-color-info, #0e7490));
   }
 
   :host([tone="success"]) {
-    --ui-number-ticker-color: var(--ui-color-success, #15803d);
+    --ui-number-ticker-color: var(--ui-color-success-text, var(--ui-color-success, #15803d));
   }
 
   :host([tone="warning"]) {
-    --ui-number-ticker-color: var(--ui-color-warning, #b45309);
+    --ui-number-ticker-color: var(--ui-color-warning-text, var(--ui-color-warning, #b45309));
   }
 
   :host([tone="danger"]) {
-    --ui-number-ticker-color: var(--ui-color-danger, #dc2626);
+    --ui-number-ticker-color: var(--ui-color-danger-text, var(--ui-color-danger, #dc2626));
   }
 
   :host([align="left"]),
@@ -384,7 +384,7 @@ class W extends M {
       this._renderValue(this._animationFrom), this._setState("running"), this._frame = this._requestFrame(this._tick);
       return;
     }
-    const n = c((i - this._animationDelay) / Math.max(this._animationDuration, 1), 0, 1), r = nt(x(this.getAttribute("easing")), n), s = this._animationFrom + (this._animationTo - this._animationFrom) * r;
+    const n = c((i - this._animationDelay) / Math.max(this._animationDuration, 1), 0, 1), r = nt(k(this.getAttribute("easing")), n), s = this._animationFrom + (this._animationTo - this._animationFrom) * r;
     if (this._currentValue = s, this._renderValue(s), n >= 1) {
       this._animationPrepared = !1, this._animationStartTime = 0, this._pausedElapsed = 0, this._currentValue = this._animationTo, this._renderValue(this._animationTo), this._setState("completed");
       return;
@@ -436,7 +436,7 @@ class W extends M {
             prefix: i,
             suffix: n,
             locale: this.getAttribute("locale") || void 0,
-            formatStyle: k(this.getAttribute("format-style")),
+            formatStyle: x(this.getAttribute("format-style")),
             currency: this.getAttribute("currency") || void 0,
             notation: w(this.getAttribute("notation")),
             signDisplay: z(this.getAttribute("sign-display")),
@@ -453,7 +453,7 @@ class W extends M {
     return s;
   }
   _createFormatter() {
-    const t = k(this.getAttribute("format-style")), i = this.getAttribute("locale") || void 0, n = D(
+    const t = x(this.getAttribute("format-style")), i = this.getAttribute("locale") || void 0, n = D(
       this.getAttribute("fraction-digits"),
       this.getAttribute("value"),
       this.getAttribute("from")
@@ -485,7 +485,7 @@ class W extends M {
     this.style.setProperty(
       "--ui-number-ticker-roll-duration",
       `${Math.round(c(this._animationDuration * 0.55, 180, 900))}ms`
-    ), this.style.setProperty("--ui-number-ticker-roll-ease", at(x(this.getAttribute("easing"))));
+    ), this.style.setProperty("--ui-number-ticker-roll-ease", at(k(this.getAttribute("easing"))));
   }
   _resolvedTargetValue() {
     return b(this.getAttribute("value"), 0);
@@ -562,7 +562,7 @@ class W extends M {
     window.clearTimeout(t);
   }
 }
-function k(e) {
+function x(e) {
   return e != null && N.has(e) ? e : O;
 }
 function j(e) {
@@ -574,7 +574,7 @@ function m(e) {
 function Z(e) {
   return e != null && q.has(e) ? e : "start";
 }
-function x(e) {
+function k(e) {
   return e != null && L.has(e) ? e : I;
 }
 function K(e) {

package/dist/odometer.cjs.js

@@ -15,10 +15,10 @@
     --ui-odometer-container-bg: transparent;
     --ui-odometer-container-border: none;
     --ui-odometer-container-radius: 999px;
-    --ui-odometer-digit-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(226, 232, 240, 0.9));
-    --ui-odometer-digit-border: 1px solid rgba(148, 163, 184, 0.35);
+    --ui-odometer-digit-bg: var(--ui-color-fill, #f0f0f0);
+    --ui-odometer-digit-border: 1px solid var(--ui-color-line-subtle, rgba(148, 163, 184, 0.35));
     --ui-odometer-digit-radius: 0.18em;
-    --ui-odometer-digit-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 1px 2px rgba(15, 23, 42, 0.12);
+    --ui-odometer-digit-shadow: none;
     --ui-odometer-separator-opacity: 0.7;
     --ui-odometer-affix-opacity: 0.82;
 
@@ -52,19 +52,19 @@
   }
 
   :host([tone="brand"]) {
-    --ui-odometer-color: var(--ui-color-primary, #2563eb);
+    --ui-odometer-color: var(--ui-color-accent-text, var(--ui-color-primary, #2563eb));
   }
 
   :host([tone="success"]) {
-    --ui-odometer-color: var(--ui-color-success, #15803d);
+    --ui-odometer-color: var(--ui-color-success-text, var(--ui-color-success, #15803d));
   }
 
   :host([tone="warning"]) {
-    --ui-odometer-color: var(--ui-color-warning, #b45309);
+    --ui-odometer-color: var(--ui-color-warning-text, var(--ui-color-warning, #b45309));
   }
 
   :host([tone="danger"]) {
-    --ui-odometer-color: var(--ui-color-danger, #dc2626);
+    --ui-odometer-color: var(--ui-color-danger-text, var(--ui-color-danger, #dc2626));
   }
 
   :host([theme="dark"]) {
@@ -75,7 +75,7 @@
   }
 
   :host([theme="brand"]) {
-    --ui-odometer-color: var(--ui-color-primary, #2563eb);
+    --ui-odometer-color: var(--ui-color-accent-text, var(--ui-color-primary, #2563eb));
     --ui-odometer-digit-bg: linear-gradient(180deg, rgba(219, 234, 254, 0.98), rgba(191, 219, 254, 0.94));
     --ui-odometer-digit-border: 1px solid rgba(37, 99, 235, 0.22);
   }
@@ -292,7 +292,7 @@
       will-change: auto;
     }
   }
-`;function V(e){return e!==null&&e.toLowerCase()!=="false"&&e!=="0"}function n(e,t){const i=e.getAttribute(t);if(i!=null)return i;const r=e[t];return typeof r=="string"&&r.length>0?r:null}function l(e,t){const i=e.getAttribute(t);if(i!=null){const o=parseFloat(i);return Number.isNaN(o)?null:o}const r=e[t];if(typeof r=="number")return Number.isNaN(r)?null:r;if(typeof r=="string"){const o=parseFloat(r);return Number.isNaN(o)?null:o}return null}function w(e,t){const i=e.getAttribute(t);if(i!=null)return V(i);const r=e[t];return typeof r=="boolean"?r:typeof r=="string"?V(r):!1}function x(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function F(e,t,i){let r=e;return t!==null&&r<t&&(r=t),i!==null&&r>i&&(r=i),r}function k(e){return e==="inline"||e==="digital"||e==="odometer"||e==="analog"?e:"inline"}function C(e){return e==="currency"||e==="percent"||e==="number"||e==="decimal"?e:"decimal"}function N(e){return e==="compact"?"compact":"standard"}function A(e){return e==="up"||e==="down"||e==="auto"?e:"auto"}function S(e){const t=l(e,"decimals"),i=l(e,"minimum-fraction-digits"),r=l(e,"maximum-fraction-digits");return i!=null||r!=null?{minimumFractionDigits:i??void 0,maximumFractionDigits:r??void 0}:t!=null?{minimumFractionDigits:t,maximumFractionDigits:t}:{}}function P(e,t){const i=C(n(e,"format")),r=n(e,"locale")||void 0,o=n(e,"currency")||void 0,u=N(n(e,"notation")),m=n(e,"decimal-separator"),c=n(e,"group-separator"),s=S(e),y={style:i==="currency"&&o?"currency":i==="percent"?"percent":"decimal",currency:i==="currency"&&o?o:void 0,notation:u,useGrouping:!0,numberingSystem:"latn",minimumFractionDigits:s.minimumFractionDigits,maximumFractionDigits:s.maximumFractionDigits};let g;try{g=new Intl.NumberFormat(r,y).formatToParts(t)}catch{g=new Intl.NumberFormat(void 0,y).formatToParts(t)}const d=[];for(const a of g){const v=a.type==="decimal"&&m!=null?m:a.type==="group"&&c!=null?c:a.value;for(const f of v){if(/[0-9]/.test(f)){d.push({kind:"digit",value:f});continue}let p="literal";a.type==="group"?p="group":a.type==="decimal"?p="decimal":a.type==="currency"||a.type==="percentSign"||a.type==="unit"?p="symbol":(a.type==="minusSign"||a.type==="plusSign")&&(p="sign"),d.push({kind:"text",value:f,textType:p})}}return{tokens:d,text:d.map(a=>a.value).join("")}}function q(e){return e==="down"?["9","8","7","6","5","4","3","2","1","0"]:["0","1","2","3","4","5","6","7","8","9"]}function j(e,t){const i=parseInt(e,10);return Number.isNaN(i)?0:t==="down"?-(9-i)*100:-i*100}function R(e,t){return e==="linear"?t:e==="ease-in"?t*t*t:e==="ease-out"?1-Math.pow(1-t,3):e==="ease-in-out"?t<.5?4*t*t*t:1-Math.pow(-2*t+2,3)/2:e==="spring"?t===0||t===1?t:Math.min(1,1-Math.cos(t*Math.PI*4)*Math.exp(-t*6)):t*t*(3-2*t)}class $ extends M.ElementBase{constructor(){super(...arguments),this._currentValue=0,this._targetValue=0,this._startValue=0,this._startTime=null,this._animationFrame=null,this._initialized=!1,this._animationProgress=1,this._motionDirection="none"}static get observedAttributes(){return["value","variant","size","tone","theme","format","locale","currency","notation","decimals","minimum-fraction-digits","maximum-fraction-digits","duration","animation","direction","prefix","suffix","decimal-separator","group-separator","separator","animate","animate-on-mount","count-up","min","max","auto-format","label"]}connectedCallback(){if(super.connectedCallback(),this._initialized)return;const t=this._readClampedValue();if(this._targetValue=t,this._shouldAnimateOnMount()&&t!==this._getMountStartValue()){this._currentValue=this._getMountStartValue(),this._initialized=!0,this.requestRender(),this._animateToValue(t);return}this._currentValue=t,this._initialized=!0,this.requestRender()}disconnectedCallback(){super.disconnectedCallback(),this._stopAnimation()}attributeChangedCallback(t,i,r){if(i!==r){if(t==="value"){const o=this._readClampedValue(r);if(!this.isConnected){this._currentValue=o,this._targetValue=o;return}if(!this._initialized){this._currentValue=o,this._targetValue=o,this._initialized=!0,this.requestRender();return}this._animateToValue(o);return}super.attributeChangedCallback(t,i,r)}}_readClampedValue(t){const i=t!=null?(()=>{const r=parseFloat(t);return Number.isNaN(r)?0:r})():l(this,"value")??0;return F(i,l(this,"min"),l(this,"max"))}_getMountStartValue(){return F(0,l(this,"min"),l(this,"max"))}_shouldAnimate(){return w(this,"animate")&&!this._isReducedMotion()}_shouldAnimateOnMount(){return(w(this,"animate-on-mount")||w(this,"count-up"))&&this._shouldAnimate()}_stopAnimation(){this._animationFrame!==null&&(cancelAnimationFrame(this._animationFrame),this._animationFrame=null),this._startTime=null,this._animationProgress=1}_animateToValue(t){if(!this._shouldAnimate()){const i=this._currentValue;this._stopAnimation(),this._currentValue=t,this._targetValue=t,this._motionDirection=t>i?"up":t<i?"down":"none",this.requestRender();return}this._stopAnimation(),this._startValue=this._currentValue,this._targetValue=t,this._startTime=null,this._animationProgress=0,this._motionDirection=t>this._startValue?"up":t<this._startValue?"down":"none",this._animationFrame=requestAnimationFrame(i=>this._animate(i))}_animate(t){this._startTime===null&&(this._startTime=t);const i=Math.max(1,l(this,"duration")??800),r=n(this,"animation")||"spring",o=t-this._startTime,u=Math.min(1,o/i),m=R(r,u);if(this._animationProgress=u,this._currentValue=this._startValue+(this._targetValue-this._startValue)*m,this.requestRender(),u<1){this._animationFrame=requestAnimationFrame(c=>this._animate(c));return}this._currentValue=this._targetValue,this._animationFrame=null,this._startTime=null,this._animationProgress=1,this.requestRender(),this._emitComplete()}_emitComplete(){this.dispatchEvent(new CustomEvent("complete",{detail:{value:this._currentValue},bubbles:!0,composed:!0}))}_isReducedMotion(){return typeof window<"u"&&window.matchMedia?window.matchMedia("(prefers-reduced-motion: reduce)").matches:!1}render(){const t=k(n(this,"variant")),i=n(this,"prefix")||"",r=n(this,"suffix")||"",o=n(this,"label"),u=P(this,this._currentValue),m=o||`${i}${u.text}${r}`,c=this._animationFrame!==null,s=c?1-this._animationProgress:0,y=this._motionDirection==="down"?-1:this._motionDirection==="up"?1:0;let g="value-display",d="";t==="digital"?(g+=" digital-display",d=[`--ui-odometer-motion-intensity: ${s.toFixed(3)}`,`--ui-odometer-digital-shift-y: ${(y*s*.16).toFixed(3)}em`,`--ui-odometer-digital-scale-y: ${(1+s*.08).toFixed(3)}`].join("; ")):t==="analog"&&(g+=" analog-display",d=[`--ui-odometer-motion-intensity: ${s.toFixed(3)}`,`--ui-odometer-analog-shift-x: ${(y*s*.08).toFixed(3)}em`,`--ui-odometer-analog-shift-y: ${(-s*.05).toFixed(3)}em`,`--ui-odometer-analog-scale: ${(1+s*.03).toFixed(3)}`,`--ui-odometer-analog-blur: ${(s*.035).toFixed(3)}em`].join("; "));let a=`<span class="${g}" part="value" aria-hidden="true"${d?` style="${d}"`:""}>${x(u.text)}</span>`;if(t==="odometer"){const v=A(n(this,"direction")),f=v==="auto"?this._targetValue>=this._startValue?"up":"down":v,p=q(f);a=`
+`;function V(e){return e!==null&&e.toLowerCase()!=="false"&&e!=="0"}function n(e,t){const i=e.getAttribute(t);if(i!=null)return i;const r=e[t];return typeof r=="string"&&r.length>0?r:null}function l(e,t){const i=e.getAttribute(t);if(i!=null){const o=parseFloat(i);return Number.isNaN(o)?null:o}const r=e[t];if(typeof r=="number")return Number.isNaN(r)?null:r;if(typeof r=="string"){const o=parseFloat(r);return Number.isNaN(o)?null:o}return null}function w(e,t){const i=e.getAttribute(t);if(i!=null)return V(i);const r=e[t];return typeof r=="boolean"?r:typeof r=="string"?V(r):!1}function x(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function F(e,t,i){let r=e;return t!==null&&r<t&&(r=t),i!==null&&r>i&&(r=i),r}function k(e){return e==="inline"||e==="digital"||e==="odometer"||e==="analog"?e:"inline"}function C(e){return e==="currency"||e==="percent"||e==="number"||e==="decimal"?e:"decimal"}function N(e){return e==="compact"?"compact":"standard"}function A(e){return e==="up"||e==="down"||e==="auto"?e:"auto"}function S(e){const t=l(e,"decimals"),i=l(e,"minimum-fraction-digits"),r=l(e,"maximum-fraction-digits");return i!=null||r!=null?{minimumFractionDigits:i??void 0,maximumFractionDigits:r??void 0}:t!=null?{minimumFractionDigits:t,maximumFractionDigits:t}:{}}function P(e,t){const i=C(n(e,"format")),r=n(e,"locale")||void 0,o=n(e,"currency")||void 0,u=N(n(e,"notation")),m=n(e,"decimal-separator"),c=n(e,"group-separator"),s=S(e),v={style:i==="currency"&&o?"currency":i==="percent"?"percent":"decimal",currency:i==="currency"&&o?o:void 0,notation:u,useGrouping:!0,numberingSystem:"latn",minimumFractionDigits:s.minimumFractionDigits,maximumFractionDigits:s.maximumFractionDigits};let g;try{g=new Intl.NumberFormat(r,v).formatToParts(t)}catch{g=new Intl.NumberFormat(void 0,v).formatToParts(t)}const d=[];for(const a of g){const y=a.type==="decimal"&&m!=null?m:a.type==="group"&&c!=null?c:a.value;for(const f of y){if(/[0-9]/.test(f)){d.push({kind:"digit",value:f});continue}let p="literal";a.type==="group"?p="group":a.type==="decimal"?p="decimal":a.type==="currency"||a.type==="percentSign"||a.type==="unit"?p="symbol":(a.type==="minusSign"||a.type==="plusSign")&&(p="sign"),d.push({kind:"text",value:f,textType:p})}}return{tokens:d,text:d.map(a=>a.value).join("")}}function q(e){return e==="down"?["9","8","7","6","5","4","3","2","1","0"]:["0","1","2","3","4","5","6","7","8","9"]}function j(e,t){const i=parseInt(e,10);return Number.isNaN(i)?0:t==="down"?-(9-i)*100:-i*100}function R(e,t){return e==="linear"?t:e==="ease-in"?t*t*t:e==="ease-out"?1-Math.pow(1-t,3):e==="ease-in-out"?t<.5?4*t*t*t:1-Math.pow(-2*t+2,3)/2:e==="spring"?t===0||t===1?t:Math.min(1,1-Math.cos(t*Math.PI*4)*Math.exp(-t*6)):t*t*(3-2*t)}class $ extends M.ElementBase{constructor(){super(...arguments),this._currentValue=0,this._targetValue=0,this._startValue=0,this._startTime=null,this._animationFrame=null,this._initialized=!1,this._animationProgress=1,this._motionDirection="none"}static get observedAttributes(){return["value","variant","size","tone","theme","format","locale","currency","notation","decimals","minimum-fraction-digits","maximum-fraction-digits","duration","animation","direction","prefix","suffix","decimal-separator","group-separator","separator","animate","animate-on-mount","count-up","min","max","auto-format","label"]}connectedCallback(){if(super.connectedCallback(),this._initialized)return;const t=this._readClampedValue();if(this._targetValue=t,this._shouldAnimateOnMount()&&t!==this._getMountStartValue()){this._currentValue=this._getMountStartValue(),this._initialized=!0,this.requestRender(),this._animateToValue(t);return}this._currentValue=t,this._initialized=!0,this.requestRender()}disconnectedCallback(){super.disconnectedCallback(),this._stopAnimation()}attributeChangedCallback(t,i,r){if(i!==r){if(t==="value"){const o=this._readClampedValue(r);if(!this.isConnected){this._currentValue=o,this._targetValue=o;return}if(!this._initialized){this._currentValue=o,this._targetValue=o,this._initialized=!0,this.requestRender();return}this._animateToValue(o);return}super.attributeChangedCallback(t,i,r)}}_readClampedValue(t){const i=t!=null?(()=>{const r=parseFloat(t);return Number.isNaN(r)?0:r})():l(this,"value")??0;return F(i,l(this,"min"),l(this,"max"))}_getMountStartValue(){return F(0,l(this,"min"),l(this,"max"))}_shouldAnimate(){return w(this,"animate")&&!this._isReducedMotion()}_shouldAnimateOnMount(){return(w(this,"animate-on-mount")||w(this,"count-up"))&&this._shouldAnimate()}_stopAnimation(){this._animationFrame!==null&&(cancelAnimationFrame(this._animationFrame),this._animationFrame=null),this._startTime=null,this._animationProgress=1}_animateToValue(t){if(!this._shouldAnimate()){const i=this._currentValue;this._stopAnimation(),this._currentValue=t,this._targetValue=t,this._motionDirection=t>i?"up":t<i?"down":"none",this.requestRender();return}this._stopAnimation(),this._startValue=this._currentValue,this._targetValue=t,this._startTime=null,this._animationProgress=0,this._motionDirection=t>this._startValue?"up":t<this._startValue?"down":"none",this._animationFrame=requestAnimationFrame(i=>this._animate(i))}_animate(t){this._startTime===null&&(this._startTime=t);const i=Math.max(1,l(this,"duration")??800),r=n(this,"animation")||"spring",o=t-this._startTime,u=Math.min(1,o/i),m=R(r,u);if(this._animationProgress=u,this._currentValue=this._startValue+(this._targetValue-this._startValue)*m,this.requestRender(),u<1){this._animationFrame=requestAnimationFrame(c=>this._animate(c));return}this._currentValue=this._targetValue,this._animationFrame=null,this._startTime=null,this._animationProgress=1,this.requestRender(),this._emitComplete()}_emitComplete(){this.dispatchEvent(new CustomEvent("complete",{detail:{value:this._currentValue},bubbles:!0,composed:!0}))}_isReducedMotion(){return typeof window<"u"&&window.matchMedia?window.matchMedia("(prefers-reduced-motion: reduce)").matches:!1}render(){const t=k(n(this,"variant")),i=n(this,"prefix")||"",r=n(this,"suffix")||"",o=n(this,"label"),u=P(this,this._currentValue),m=o||`${i}${u.text}${r}`,c=this._animationFrame!==null,s=c?1-this._animationProgress:0,v=this._motionDirection==="down"?-1:this._motionDirection==="up"?1:0;let g="value-display",d="";t==="digital"?(g+=" digital-display",d=[`--ui-odometer-motion-intensity: ${s.toFixed(3)}`,`--ui-odometer-digital-shift-y: ${(v*s*.16).toFixed(3)}em`,`--ui-odometer-digital-scale-y: ${(1+s*.08).toFixed(3)}`].join("; ")):t==="analog"&&(g+=" analog-display",d=[`--ui-odometer-motion-intensity: ${s.toFixed(3)}`,`--ui-odometer-analog-shift-x: ${(v*s*.08).toFixed(3)}em`,`--ui-odometer-analog-shift-y: ${(-s*.05).toFixed(3)}em`,`--ui-odometer-analog-scale: ${(1+s*.03).toFixed(3)}`,`--ui-odometer-analog-blur: ${(s*.035).toFixed(3)}em`].join("; "));let a=`<span class="${g}" part="value" aria-hidden="true"${d?` style="${d}"`:""}>${x(u.text)}</span>`;if(t==="odometer"){const y=A(n(this,"direction")),f=y==="auto"?this._targetValue>=this._startValue?"up":"down":y,p=q(f);a=`
         <span class="digits" part="digits" role="img" aria-label="${x(m)}">
           ${u.tokens.map(_=>{if(_.kind==="digit"){const z=p.map(T=>`<span class="digit-value" aria-hidden="true">${T}</span>`).join("");return`
                   <span class="digit" part="digit" aria-hidden="true">