@editora/ui-core 0.1.24 → 0.2.0

package/dist/number-field.cjs.js

@@ -1,13 +1,15 @@
-"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));
@@ -18,7 +20,7 @@
     --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,15 +1,17 @@
-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));
@@ -20,7 +22,7 @@ const N = `
     --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/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;
 
@@ -292,9 +292,9 @@
       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),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 p;try{p=new Intl.NumberFormat(r,y).formatToParts(t)}catch{p=new Intl.NumberFormat(void 0,y).formatToParts(t)}const d=[];for(const a of p){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 g="literal";a.type==="group"?g="group":a.type==="decimal"?g="decimal":a.type==="currency"||a.type==="percentSign"||a.type==="unit"?g="symbol":(a.type==="minusSign"||a.type==="plusSign")&&(g="sign"),d.push({kind:"text",value:f,textType:g})}}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 p="value-display",d="";t==="digital"?(p+=" 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"&&(p+=" 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="${p}" 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,g=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`
+          ${u.tokens.map(_=>{if(_.kind==="digit"){const z=g.map(T=>`<span class="digit-value" aria-hidden="true">${T}</span>`).join("");return`
                   <span class="digit" part="digit" aria-hidden="true">
                     <span class="digit-track" style="--ui-odometer-offset: ${j(_.value,f)}%;">
                       ${z}

package/dist/odometer.esm.js

@@ -16,10 +16,10 @@ const D = `
     --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;
 

package/dist/orbiter.cjs.js

@@ -7,40 +7,23 @@
     --ui-orbiter-center-size: ${w};
     --ui-orbiter-ring-gap: ${E};
     --ui-orbiter-padding: ${$};
-    --ui-orbiter-radius: 28px;
+    --ui-orbiter-radius: calc(var(--ui-radius, 6px) + 4px);
     --ui-orbiter-stage-size:
       calc((2 * var(--ui-orbiter-farthest-radius, ${A})) + var(--ui-orbiter-item-size));
     --ui-orbiter-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
-    --ui-orbiter-bg:
-      radial-gradient(
-        circle at 50% 50%,
-        color-mix(in srgb, var(--ui-color-surface-elevated, #f8fafc) 92%, transparent) 0%,
-        color-mix(in srgb, var(--ui-color-surface, #ffffff) 98%, transparent) 64%,
-        color-mix(in srgb, var(--ui-color-surface, #ffffff) 84%, transparent) 100%
-      );
+    --ui-orbiter-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
     --ui-orbiter-color: var(--ui-color-text, #0f172a);
-    --ui-orbiter-border-color:
-      color-mix(in srgb, var(--ui-color-border, rgba(15, 23, 42, 0.16)) 86%, transparent);
+    --ui-orbiter-border-color: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent));
     --ui-orbiter-border: 1px solid var(--ui-orbiter-border-color);
-    --ui-orbiter-shadow:
-      0 1px 3px rgba(15, 23, 42, 0.06),
-      0 24px 44px rgba(15, 23, 42, 0.12);
+    --ui-orbiter-shadow: none;
     --ui-orbiter-backdrop: none;
     --ui-orbiter-path-color:
       color-mix(in srgb, var(--ui-orbiter-accent) 16%, var(--ui-orbiter-border-color));
     --ui-orbiter-path-opacity: 0.95;
-    --ui-orbiter-item-bg:
-      linear-gradient(
-        180deg,
-        color-mix(in srgb, #ffffff 96%, transparent),
-        color-mix(in srgb, var(--ui-orbiter-accent) 8%, rgba(255, 255, 255, 0.9))
-      );
+    --ui-orbiter-item-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
     --ui-orbiter-item-color: var(--ui-orbiter-color);
-    --ui-orbiter-item-border:
-      1px solid color-mix(in srgb, var(--ui-orbiter-accent) 12%, rgba(255, 255, 255, 0.82));
-    --ui-orbiter-item-shadow:
-      0 8px 14px rgba(15, 23, 42, 0.08),
-      0 1px 2px rgba(15, 23, 42, 0.05);
+    --ui-orbiter-item-border: 1px solid var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent));
+    --ui-orbiter-item-shadow: none;
     --ui-orbiter-item-backdrop: none;
     --ui-orbiter-center-bg:
       radial-gradient(
@@ -366,7 +349,7 @@
     outline: none;
     border-color: color-mix(in srgb, var(--ui-orbiter-focus-ring) 30%, transparent);
     box-shadow:
-      0 0 0 3px color-mix(in srgb, var(--ui-orbiter-focus-ring) 20%, transparent),
+      0 0 0 2px var(--ui-ring-color, var(--ui-orbiter-focus-ring)),
       var(--ui-orbiter-item-shadow);
   }
 
@@ -434,7 +417,7 @@
     outline: none;
     border-color: color-mix(in srgb, var(--ui-orbiter-focus-ring) 24%, transparent);
     box-shadow:
-      0 0 0 3px color-mix(in srgb, var(--ui-orbiter-focus-ring) 18%, transparent),
+      0 0 0 2px var(--ui-ring-color, var(--ui-orbiter-focus-ring)),
       var(--ui-orbiter-shadow);
   }
 
@@ -479,7 +462,7 @@
       forced-color-adjust: none;
     }
   }
-`;function h(i,t){if(i==null||i==="")return t;const e=i.trim();if(!e)return t;const s=e.split(/\s+/).filter(Boolean);if(!s.length)return t;const b=s.map(a=>/^-?\d+(\.\d+)?$/.test(a)?`${a}px`:/^-?\d*\.?\d+(px|rem|em|%|vh|vw|ch|ex|vmin|vmax)$/.test(a)?a:null);return b.some(a=>a===null)?t:b.join(" ")}function N(i,t){if(i==null||i==="")return t;const e=i.trim();return e?/^-?\d+(\.\d+)?(ms|s)$/i.test(e)?e:/^-?\d+(\.\d+)?$/i.test(e)?`${e}s`:t:t}function F(i,t){if(i==null||i==="")return t;const e=i.trim();return e?/^-?\d+(\.\d+)?ms$/i.test(e)?Number.parseFloat(e):/^-?\d+(\.\d+)?s$/i.test(e)||/^-?\d+(\.\d+)?$/i.test(e)?Number.parseFloat(e)*1e3:t:t}function g(i,t){if(i==null||i==="")return t;const e=Number.parseFloat(i);return Number.isFinite(e)?e:t}function S(i,t){const e=g(i,t);return Number.isFinite(e)&&e>0?e:t}function q(i,t){if(i==null)return t;const e=i.trim().toLowerCase();return e?e==="false"||e==="0"||e==="off"||e==="no"?!1:e==="true"||e==="1"||e==="on"||e==="yes"?!0:t:!0}function v(i,t){return`translate(-50%, -50%) rotate(${i}deg) translateX(${t}) rotate(${-i}deg)`}function z(i){const t=Math.round(g(i,1));return Math.min(X,Math.max(1,t||1))}class D extends B.ElementBase{constructor(){super(),this._itemSlot=null,this._centerSlot=null,this._pathsEl=null,this._items=[],this._centerNodes=[],this._animations=new Map,this._hovering=!1,this._itemHovering=!1,this._focusWithin=!1,this._itemHoverHandlers=new WeakMap,this._boundSlotChange=this._handleSlotChange.bind(this),this._boundPointerEnter=()=>{this._hovering=!0,this._syncState()},this._boundPointerLeave=()=>{this._hovering=!1,this._syncState()},this._boundFocusIn=()=>{this._focusWithin=!0,this._syncState()},this._boundFocusOut=()=>{this._focusWithin=this.matches(":focus-within"),this._syncState()},this.addEventListener("pointerenter",this._boundPointerEnter),this.addEventListener("pointerleave",this._boundPointerLeave),this.addEventListener("focusin",this._boundFocusIn),this.addEventListener("focusout",this._boundFocusOut)}static get observedAttributes(){return["duration","delay","speed","reverse","radius","orbit-radius","icon-size","item-size","center-size","ring-gap","rings","start-angle","direction","animation","variant","tone","size","surface-radius","elevation","padding","path","show-paths","pause-on-hover","pause-on-item-hover","pause-on-focus","paused"]}play(){this.hasAttribute("paused")&&this.removeAttribute("paused"),this._syncState()}pause(){this.hasAttribute("paused")||this.setAttribute("paused",""),this._syncState()}refresh(){this._syncRuntimeStyles(),this._syncItems(),this._renderPaths(),this._syncAnimations(),this._syncState()}disconnectedCallback(){this._cancelAllAnimations(),this._hovering=!1,this._itemHovering=!1,this._focusWithin=!1,super.disconnectedCallback()}render(){this.setContent(`
+`;function h(i,t){if(i==null||i==="")return t;const e=i.trim();if(!e)return t;const s=e.split(/\s+/).filter(Boolean);if(!s.length)return t;const c=s.map(a=>/^-?\d+(\.\d+)?$/.test(a)?`${a}px`:/^-?\d*\.?\d+(px|rem|em|%|vh|vw|ch|ex|vmin|vmax)$/.test(a)?a:null);return c.some(a=>a===null)?t:c.join(" ")}function N(i,t){if(i==null||i==="")return t;const e=i.trim();return e?/^-?\d+(\.\d+)?(ms|s)$/i.test(e)?e:/^-?\d+(\.\d+)?$/i.test(e)?`${e}s`:t:t}function F(i,t){if(i==null||i==="")return t;const e=i.trim();return e?/^-?\d+(\.\d+)?ms$/i.test(e)?Number.parseFloat(e):/^-?\d+(\.\d+)?s$/i.test(e)||/^-?\d+(\.\d+)?$/i.test(e)?Number.parseFloat(e)*1e3:t:t}function g(i,t){if(i==null||i==="")return t;const e=Number.parseFloat(i);return Number.isFinite(e)?e:t}function S(i,t){const e=g(i,t);return Number.isFinite(e)&&e>0?e:t}function q(i,t){if(i==null)return t;const e=i.trim().toLowerCase();return e?e==="false"||e==="0"||e==="off"||e==="no"?!1:e==="true"||e==="1"||e==="on"||e==="yes"?!0:t:!0}function v(i,t){return`translate(-50%, -50%) rotate(${i}deg) translateX(${t}) rotate(${-i}deg)`}function z(i){const t=Math.round(g(i,1));return Math.min(X,Math.max(1,t||1))}class D extends B.ElementBase{constructor(){super(),this._itemSlot=null,this._centerSlot=null,this._pathsEl=null,this._items=[],this._centerNodes=[],this._animations=new Map,this._hovering=!1,this._itemHovering=!1,this._focusWithin=!1,this._itemHoverHandlers=new WeakMap,this._boundSlotChange=this._handleSlotChange.bind(this),this._boundPointerEnter=()=>{this._hovering=!0,this._syncState()},this._boundPointerLeave=()=>{this._hovering=!1,this._syncState()},this._boundFocusIn=()=>{this._focusWithin=!0,this._syncState()},this._boundFocusOut=()=>{this._focusWithin=this.matches(":focus-within"),this._syncState()},this.addEventListener("pointerenter",this._boundPointerEnter),this.addEventListener("pointerleave",this._boundPointerLeave),this.addEventListener("focusin",this._boundFocusIn),this.addEventListener("focusout",this._boundFocusOut)}static get observedAttributes(){return["duration","delay","speed","reverse","radius","orbit-radius","icon-size","item-size","center-size","ring-gap","rings","start-angle","direction","animation","variant","tone","size","surface-radius","elevation","padding","path","show-paths","pause-on-hover","pause-on-item-hover","pause-on-focus","paused"]}play(){this.hasAttribute("paused")&&this.removeAttribute("paused"),this._syncState()}pause(){this.hasAttribute("paused")||this.setAttribute("paused",""),this._syncState()}refresh(){this._syncRuntimeStyles(),this._syncItems(),this._renderPaths(),this._syncAnimations(),this._syncState()}disconnectedCallback(){this._cancelAllAnimations(),this._hovering=!1,this._itemHovering=!1,this._focusWithin=!1,super.disconnectedCallback()}render(){this.setContent(`
       <style>${Q}</style>
       <div class="root" part="root">
         <div class="surface" part="surface">
@@ -492,4 +475,4 @@
           </div>
         </div>
       </div>
-    `),this._itemSlot=this.root.querySelector("slot:not([name])"),this._centerSlot=this.root.querySelector('slot[name="center"]'),this._pathsEl=this.root.querySelector(".paths"),this._itemSlot?.addEventListener("slotchange",this._boundSlotChange),this._centerSlot?.addEventListener("slotchange",this._boundSlotChange),this._syncRuntimeStyles(),this._syncItems(),this._renderPaths(),this._syncAnimations(),this._syncState()}shouldRenderOnAttributeChange(){return!1}attributeChangedCallback(t,e,s){if(!(e===s||!this.isConnected)){if(t==="paused"){this._syncState();return}this._syncRuntimeStyles(),t==="orbit-radius"||t==="radius"||t==="icon-size"||t==="item-size"||t==="center-size"||t==="ring-gap"||t==="rings"||t==="start-angle"||t==="direction"||t==="reverse"||t==="size"?(this._syncItems(),this._renderPaths(),this._syncAnimations()):(t==="duration"||t==="delay"||t==="speed"||t==="animation")&&this._syncAnimations(),this._syncState()}}_handleSlotChange(){this._syncItems(),this._renderPaths(),this._syncAnimations(),this._syncState()}_itemsFromSlot(){return this._itemSlot?this._itemSlot.assignedElements({flatten:!0}).filter(t=>t instanceof HTMLElement):[]}_centerFromSlot(){return this._centerSlot?this._centerSlot.assignedElements({flatten:!0}).filter(t=>t instanceof HTMLElement):[]}_syncItems(){const t=this._itemsFromSlot(),e=this._centerFromSlot(),s=new Set(t),b=new Set(e);for(const r of this._items)s.has(r)||(this._unbindItemHover(r),this._cancelAnimation(r),r.removeAttribute("data-ui-orbiter-managed"),r.removeAttribute("data-ui-orbit-runtime"),r.style.removeProperty("--ui-orbit-index"),r.style.removeProperty("--ui-orbit-ring"),r.style.removeProperty("--ui-orbit-radius"),r.style.removeProperty("--ui-orbit-start-angle"),r.style.removeProperty("--ui-orbit-quarter-angle"),r.style.removeProperty("--ui-orbit-half-angle"),r.style.removeProperty("--ui-orbit-three-quarter-angle"),r.style.removeProperty("--ui-orbit-end-angle"),r.style.removeProperty("--ui-orbit-start-angle-inverse"),r.style.removeProperty("--ui-orbit-quarter-angle-inverse"),r.style.removeProperty("--ui-orbit-half-angle-inverse"),r.style.removeProperty("--ui-orbit-three-quarter-angle-inverse"),r.style.removeProperty("--ui-orbit-end-angle-inverse"),r.style.removeProperty("--ui-orbit-duration"),r.style.removeProperty("--ui-orbit-duration-scale"),r.style.removeProperty("animation"),r.style.removeProperty("transform"),r.hasAttribute("data-ui-orbiter-owned")&&(r.removeAttribute("data-ui-orbiter-item"),r.removeAttribute("data-ui-orbiter-owned")));for(const r of this._centerNodes)b.has(r)||(r.removeAttribute("data-ui-orbiter-managed"),r.hasAttribute("data-ui-orbiter-owned")&&(r.removeAttribute("data-ui-orbiter-center"),r.removeAttribute("data-ui-orbiter-owned")));e.forEach(r=>{r.setAttribute("data-ui-orbiter-managed",""),r.hasAttribute("data-ui-orbiter-center")||(r.setAttribute("data-ui-orbiter-center",""),r.setAttribute("data-ui-orbiter-owned","")),r.setAttribute("slot","center")});const a=z(this.getAttribute("rings")),u=h(this._orbitRadiusValue(),this._sizePreset().orbitRadius),o=h(this.getAttribute("ring-gap"),this._sizePreset().ringGap),l=g(this.getAttribute("start-angle"),C),d=Array.from({length:a},()=>[]);t.forEach((r,c)=>{r.setAttribute("data-ui-orbiter-managed",""),r.hasAttribute("data-ui-orbiter-item")||(r.setAttribute("data-ui-orbiter-item",""),r.setAttribute("data-ui-orbiter-owned","")),this._bindItemHover(r),d[c%a].push({item:r,index:c})}),d.forEach((r,c)=>{const f=r.length?360/r.length:360,y=r.length>1&&c%2===1?f/2:0,p=c===0?u:`calc(${u} + ${c} * ${o})`,x=360*this._directionSign(c);r.forEach(({item:n,index:G},U)=>{const m=l+y+U*f,R=m+x,k=m+x*.25,I=m+x*.5,L=m+x*.75,H=1+c*.14;n.style.setProperty("--ui-orbit-index",String(G)),n.style.setProperty("--ui-orbit-ring",String(c)),n.style.setProperty("--ui-orbit-radius",p),n.style.setProperty("--ui-orbit-duration",`calc(var(--ui-orbiter-duration) * ${H})`),n.style.setProperty("--ui-orbit-duration-scale",String(H)),n.style.setProperty("--ui-orbit-start-angle",`${m}deg`),n.style.setProperty("--ui-orbit-quarter-angle",`${k}deg`),n.style.setProperty("--ui-orbit-half-angle",`${I}deg`),n.style.setProperty("--ui-orbit-three-quarter-angle",`${L}deg`),n.style.setProperty("--ui-orbit-end-angle",`${R}deg`),n.style.setProperty("--ui-orbit-start-angle-inverse",`${-m}deg`),n.style.setProperty("--ui-orbit-quarter-angle-inverse",`${-k}deg`),n.style.setProperty("--ui-orbit-half-angle-inverse",`${-I}deg`),n.style.setProperty("--ui-orbit-three-quarter-angle-inverse",`${-L}deg`),n.style.setProperty("--ui-orbit-end-angle-inverse",`${-R}deg`),n.style.setProperty("transform",v(m,p))})}),this._items=t,this._centerNodes=e,this._itemHovering=this._items.some(r=>r.matches(":hover")),this.setAttribute("data-item-count",String(this._items.length)),this.setAttribute("data-center-count",String(this._centerNodes.length)),this.setAttribute("data-ring-count",String(a))}_renderPaths(){if(!this._pathsEl)return;const t=z(this.getAttribute("rings")),e=h(this._orbitRadiusValue(),this._sizePreset().orbitRadius),s=h(this.getAttribute("ring-gap"),this._sizePreset().ringGap),b=Array.from({length:t},(a,u)=>{const o=u===0?e:`calc(${e} + ${u} * ${s})`;return`<div class="path" part="path path-${u+1}" style="inline-size:calc(2 * (${o}));block-size:calc(2 * (${o}));"></div>`}).join("");this._pathsEl.innerHTML=b,this._pathsEl.toggleAttribute("hidden",!this._pathVisible())}_bindItemHover(t){if(this._itemHoverHandlers.has(t))return;const e=()=>{this._itemHovering=!0,this._syncState()},s=b=>{const u=(b.relatedTarget instanceof HTMLElement?b.relatedTarget:null)?.closest("[data-ui-orbiter-item]");this._itemHovering=u instanceof HTMLElement?this._items.includes(u):!1,this._syncState()};t.addEventListener("pointerenter",e),t.addEventListener("pointerleave",s),this._itemHoverHandlers.set(t,{enter:e,leave:s})}_unbindItemHover(t){const e=this._itemHoverHandlers.get(t);e&&(t.removeEventListener("pointerenter",e.enter),t.removeEventListener("pointerleave",e.leave),this._itemHoverHandlers.delete(t))}_sizePreset(){switch(this.getAttribute("size")){case"xs":case"0":return _.xs;case"sm":case"1":return _.sm;case"lg":case"3":return _.lg;case"xl":case"4":return _.xl;default:return _.md}}_motionPreset(){const t=this.getAttribute("animation");return t&&Z.has(t)?M[t]:M.smooth}_direction(){const t=this.getAttribute("direction");return t&&j.has(t)?t:"clockwise"}_directionSign(t){const e=this._direction();let s=e==="counterclockwise"||e==="alternate"&&t%2===1?-1:1;return q(this.getAttribute("reverse"),this.hasAttribute("reverse"))&&(s*=-1),s}_pathVisible(){const t=this.getAttribute("path");return t!=null?q(t,!0):(this.hasAttribute("show-paths"),!0)}_orbitRadiusValue(){return this.getAttribute("radius")??this.getAttribute("orbit-radius")}_iconSizeValue(){return this.getAttribute("icon-size")??this.getAttribute("item-size")}_syncRuntimeStyles(){const t=this._sizePreset(),e=this._motionPreset(),s=N(this.getAttribute("duration"),O),b=N(this.getAttribute("delay"),V),a=h(this._orbitRadiusValue(),t.orbitRadius),u=h(this._iconSizeValue(),t.itemSize),o=h(this.getAttribute("center-size"),t.centerSize),l=h(this.getAttribute("ring-gap"),t.ringGap),d=h(this.getAttribute("padding"),t.padding),r=z(this.getAttribute("rings")),c=S(this.getAttribute("speed"),1),f=r<=1?a:`calc(${a} + ${r-1} * ${l})`,y=`calc((2 * (${f})) + ${u})`;this.style.setProperty("--ui-orbiter-duration",`calc((${s}) * ${e.durationScale} / ${c})`),this.style.setProperty("--ui-orbiter-delay",b),this.style.setProperty("--ui-orbiter-orbit-radius",a),this.style.setProperty("--ui-orbiter-item-size",u),this.style.setProperty("--ui-orbiter-center-size",o),this.style.setProperty("--ui-orbiter-ring-gap",l),this.style.setProperty("--ui-orbiter-padding",d),this.style.setProperty("--ui-orbiter-farthest-radius",f),this.style.setProperty("--ui-orbiter-stage-size",y),this.style.setProperty("--ui-orbiter-path-opacity",String(e.accentOpacity>.18?1:.95));const p=this.getAttribute("surface-radius");!p||W.has(p.trim())?this.style.removeProperty("--ui-orbiter-radius"):this.style.setProperty("--ui-orbiter-radius",h(p,t.panelRadius))}_syncAnimations(){const t=this._items,e=new Set(t);for(const[o,l]of this._animations.entries())e.has(o)||(l.cancel(),this._animations.delete(o));if(typeof window<"u"&&window.matchMedia?.("(prefers-reduced-motion: reduce)").matches){this._cancelAllAnimations(),t.forEach(o=>o.removeAttribute("data-ui-orbit-runtime"));return}if(typeof HTMLElement>"u"||typeof HTMLElement.prototype.animate!="function"){t.forEach(o=>o.removeAttribute("data-ui-orbit-runtime"));return}const s=this._motionPreset(),b=F(this.getAttribute("duration"),18e3),a=F(this.getAttribute("delay"),0),u=S(this.getAttribute("speed"),1);for(const o of t){const l=o.style.getPropertyValue("--ui-orbit-radius")||"var(--ui-orbiter-orbit-radius)",d=g(o.style.getPropertyValue("--ui-orbit-start-angle"),C),r=g(o.style.getPropertyValue("--ui-orbit-quarter-angle"),d+90),c=g(o.style.getPropertyValue("--ui-orbit-half-angle"),d+180),f=g(o.style.getPropertyValue("--ui-orbit-three-quarter-angle"),d+270),y=g(o.style.getPropertyValue("--ui-orbit-end-angle"),d+360),p=S(o.style.getPropertyValue("--ui-orbit-duration-scale"),1),T=b*s.durationScale*p/u;this._animations.get(o)?.cancel(),o.setAttribute("data-ui-orbit-runtime","");const n=o.animate([{transform:v(d,l),offset:0},{transform:v(r,l),offset:.25},{transform:v(c,l),offset:.5},{transform:v(f,l),offset:.75},{transform:v(y,l),offset:1}],{duration:Math.max(1,T),delay:Math.max(0,a),easing:"linear",iterations:Number.POSITIVE_INFINITY,fill:"both"});this._animations.set(o,n)}}_cancelAnimation(t){const e=this._animations.get(t);t.removeAttribute("data-ui-orbit-runtime"),e&&(e.cancel(),this._animations.delete(t))}_cancelAllAnimations(){for(const t of this._animations.values())t.cancel();this._animations.clear(),this._items.forEach(t=>{t.removeAttribute("data-ui-orbit-runtime"),this._unbindItemHover(t)})}_effectivePaused(){return!!(this.hasAttribute("paused")||this.hasAttribute("pause-on-hover")&&this._hovering||this.hasAttribute("pause-on-item-hover")&&this._itemHovering||this.hasAttribute("pause-on-focus")&&this._focusWithin)}_syncState(){const t=this._effectivePaused()?"paused":"running";this.setAttribute("data-state",t),this.setAttribute("data-path-visible",this._pathVisible()?"true":"false"),this.setAttribute("data-item-hovered",this._itemHovering?"true":"false");for(const e of this._animations.values())t==="paused"?e.pause():e.play()}}typeof customElements<"u"&&!customElements.get("ui-orbiter")&&customElements.define("ui-orbiter",D);exports.UIOrbiter=D;
+    `),this._itemSlot=this.root.querySelector("slot:not([name])"),this._centerSlot=this.root.querySelector('slot[name="center"]'),this._pathsEl=this.root.querySelector(".paths"),this._itemSlot?.addEventListener("slotchange",this._boundSlotChange),this._centerSlot?.addEventListener("slotchange",this._boundSlotChange),this._syncRuntimeStyles(),this._syncItems(),this._renderPaths(),this._syncAnimations(),this._syncState()}shouldRenderOnAttributeChange(){return!1}attributeChangedCallback(t,e,s){if(!(e===s||!this.isConnected)){if(t==="paused"){this._syncState();return}this._syncRuntimeStyles(),t==="orbit-radius"||t==="radius"||t==="icon-size"||t==="item-size"||t==="center-size"||t==="ring-gap"||t==="rings"||t==="start-angle"||t==="direction"||t==="reverse"||t==="size"?(this._syncItems(),this._renderPaths(),this._syncAnimations()):(t==="duration"||t==="delay"||t==="speed"||t==="animation")&&this._syncAnimations(),this._syncState()}}_handleSlotChange(){this._syncItems(),this._renderPaths(),this._syncAnimations(),this._syncState()}_itemsFromSlot(){return this._itemSlot?this._itemSlot.assignedElements({flatten:!0}).filter(t=>t instanceof HTMLElement):[]}_centerFromSlot(){return this._centerSlot?this._centerSlot.assignedElements({flatten:!0}).filter(t=>t instanceof HTMLElement):[]}_syncItems(){const t=this._itemsFromSlot(),e=this._centerFromSlot(),s=new Set(t),c=new Set(e);for(const r of this._items)s.has(r)||(this._unbindItemHover(r),this._cancelAnimation(r),r.removeAttribute("data-ui-orbiter-managed"),r.removeAttribute("data-ui-orbit-runtime"),r.style.removeProperty("--ui-orbit-index"),r.style.removeProperty("--ui-orbit-ring"),r.style.removeProperty("--ui-orbit-radius"),r.style.removeProperty("--ui-orbit-start-angle"),r.style.removeProperty("--ui-orbit-quarter-angle"),r.style.removeProperty("--ui-orbit-half-angle"),r.style.removeProperty("--ui-orbit-three-quarter-angle"),r.style.removeProperty("--ui-orbit-end-angle"),r.style.removeProperty("--ui-orbit-start-angle-inverse"),r.style.removeProperty("--ui-orbit-quarter-angle-inverse"),r.style.removeProperty("--ui-orbit-half-angle-inverse"),r.style.removeProperty("--ui-orbit-three-quarter-angle-inverse"),r.style.removeProperty("--ui-orbit-end-angle-inverse"),r.style.removeProperty("--ui-orbit-duration"),r.style.removeProperty("--ui-orbit-duration-scale"),r.style.removeProperty("animation"),r.style.removeProperty("transform"),r.hasAttribute("data-ui-orbiter-owned")&&(r.removeAttribute("data-ui-orbiter-item"),r.removeAttribute("data-ui-orbiter-owned")));for(const r of this._centerNodes)c.has(r)||(r.removeAttribute("data-ui-orbiter-managed"),r.hasAttribute("data-ui-orbiter-owned")&&(r.removeAttribute("data-ui-orbiter-center"),r.removeAttribute("data-ui-orbiter-owned")));e.forEach(r=>{r.setAttribute("data-ui-orbiter-managed",""),r.hasAttribute("data-ui-orbiter-center")||(r.setAttribute("data-ui-orbiter-center",""),r.setAttribute("data-ui-orbiter-owned","")),r.setAttribute("slot","center")});const a=z(this.getAttribute("rings")),u=h(this._orbitRadiusValue(),this._sizePreset().orbitRadius),o=h(this.getAttribute("ring-gap"),this._sizePreset().ringGap),l=g(this.getAttribute("start-angle"),C),d=Array.from({length:a},()=>[]);t.forEach((r,b)=>{r.setAttribute("data-ui-orbiter-managed",""),r.hasAttribute("data-ui-orbiter-item")||(r.setAttribute("data-ui-orbiter-item",""),r.setAttribute("data-ui-orbiter-owned","")),this._bindItemHover(r),d[b%a].push({item:r,index:b})}),d.forEach((r,b)=>{const f=r.length?360/r.length:360,y=r.length>1&&b%2===1?f/2:0,p=b===0?u:`calc(${u} + ${b} * ${o})`,x=360*this._directionSign(b);r.forEach(({item:n,index:G},U)=>{const m=l+y+U*f,R=m+x,k=m+x*.25,I=m+x*.5,L=m+x*.75,H=1+b*.14;n.style.setProperty("--ui-orbit-index",String(G)),n.style.setProperty("--ui-orbit-ring",String(b)),n.style.setProperty("--ui-orbit-radius",p),n.style.setProperty("--ui-orbit-duration",`calc(var(--ui-orbiter-duration) * ${H})`),n.style.setProperty("--ui-orbit-duration-scale",String(H)),n.style.setProperty("--ui-orbit-start-angle",`${m}deg`),n.style.setProperty("--ui-orbit-quarter-angle",`${k}deg`),n.style.setProperty("--ui-orbit-half-angle",`${I}deg`),n.style.setProperty("--ui-orbit-three-quarter-angle",`${L}deg`),n.style.setProperty("--ui-orbit-end-angle",`${R}deg`),n.style.setProperty("--ui-orbit-start-angle-inverse",`${-m}deg`),n.style.setProperty("--ui-orbit-quarter-angle-inverse",`${-k}deg`),n.style.setProperty("--ui-orbit-half-angle-inverse",`${-I}deg`),n.style.setProperty("--ui-orbit-three-quarter-angle-inverse",`${-L}deg`),n.style.setProperty("--ui-orbit-end-angle-inverse",`${-R}deg`),n.style.setProperty("transform",v(m,p))})}),this._items=t,this._centerNodes=e,this._itemHovering=this._items.some(r=>r.matches(":hover")),this.setAttribute("data-item-count",String(this._items.length)),this.setAttribute("data-center-count",String(this._centerNodes.length)),this.setAttribute("data-ring-count",String(a))}_renderPaths(){if(!this._pathsEl)return;const t=z(this.getAttribute("rings")),e=h(this._orbitRadiusValue(),this._sizePreset().orbitRadius),s=h(this.getAttribute("ring-gap"),this._sizePreset().ringGap),c=Array.from({length:t},(a,u)=>{const o=u===0?e:`calc(${e} + ${u} * ${s})`;return`<div class="path" part="path path-${u+1}" style="inline-size:calc(2 * (${o}));block-size:calc(2 * (${o}));"></div>`}).join("");this._pathsEl.innerHTML=c,this._pathsEl.toggleAttribute("hidden",!this._pathVisible())}_bindItemHover(t){if(this._itemHoverHandlers.has(t))return;const e=()=>{this._itemHovering=!0,this._syncState()},s=c=>{const u=(c.relatedTarget instanceof HTMLElement?c.relatedTarget:null)?.closest("[data-ui-orbiter-item]");this._itemHovering=u instanceof HTMLElement?this._items.includes(u):!1,this._syncState()};t.addEventListener("pointerenter",e),t.addEventListener("pointerleave",s),this._itemHoverHandlers.set(t,{enter:e,leave:s})}_unbindItemHover(t){const e=this._itemHoverHandlers.get(t);e&&(t.removeEventListener("pointerenter",e.enter),t.removeEventListener("pointerleave",e.leave),this._itemHoverHandlers.delete(t))}_sizePreset(){switch(this.getAttribute("size")){case"xs":case"0":return _.xs;case"sm":case"1":return _.sm;case"lg":case"3":return _.lg;case"xl":case"4":return _.xl;default:return _.md}}_motionPreset(){const t=this.getAttribute("animation");return t&&Z.has(t)?M[t]:M.smooth}_direction(){const t=this.getAttribute("direction");return t&&j.has(t)?t:"clockwise"}_directionSign(t){const e=this._direction();let s=e==="counterclockwise"||e==="alternate"&&t%2===1?-1:1;return q(this.getAttribute("reverse"),this.hasAttribute("reverse"))&&(s*=-1),s}_pathVisible(){const t=this.getAttribute("path");return t!=null?q(t,!0):(this.hasAttribute("show-paths"),!0)}_orbitRadiusValue(){return this.getAttribute("radius")??this.getAttribute("orbit-radius")}_iconSizeValue(){return this.getAttribute("icon-size")??this.getAttribute("item-size")}_syncRuntimeStyles(){const t=this._sizePreset(),e=this._motionPreset(),s=N(this.getAttribute("duration"),O),c=N(this.getAttribute("delay"),V),a=h(this._orbitRadiusValue(),t.orbitRadius),u=h(this._iconSizeValue(),t.itemSize),o=h(this.getAttribute("center-size"),t.centerSize),l=h(this.getAttribute("ring-gap"),t.ringGap),d=h(this.getAttribute("padding"),t.padding),r=z(this.getAttribute("rings")),b=S(this.getAttribute("speed"),1),f=r<=1?a:`calc(${a} + ${r-1} * ${l})`,y=`calc((2 * (${f})) + ${u})`;this.style.setProperty("--ui-orbiter-duration",`calc((${s}) * ${e.durationScale} / ${b})`),this.style.setProperty("--ui-orbiter-delay",c),this.style.setProperty("--ui-orbiter-orbit-radius",a),this.style.setProperty("--ui-orbiter-item-size",u),this.style.setProperty("--ui-orbiter-center-size",o),this.style.setProperty("--ui-orbiter-ring-gap",l),this.style.setProperty("--ui-orbiter-padding",d),this.style.setProperty("--ui-orbiter-farthest-radius",f),this.style.setProperty("--ui-orbiter-stage-size",y),this.style.setProperty("--ui-orbiter-path-opacity",String(e.accentOpacity>.18?1:.95));const p=this.getAttribute("surface-radius");!p||W.has(p.trim())?this.style.removeProperty("--ui-orbiter-radius"):this.style.setProperty("--ui-orbiter-radius",h(p,t.panelRadius))}_syncAnimations(){const t=this._items,e=new Set(t);for(const[o,l]of this._animations.entries())e.has(o)||(l.cancel(),this._animations.delete(o));if(typeof window<"u"&&window.matchMedia?.("(prefers-reduced-motion: reduce)").matches){this._cancelAllAnimations(),t.forEach(o=>o.removeAttribute("data-ui-orbit-runtime"));return}if(typeof HTMLElement>"u"||typeof HTMLElement.prototype.animate!="function"){t.forEach(o=>o.removeAttribute("data-ui-orbit-runtime"));return}const s=this._motionPreset(),c=F(this.getAttribute("duration"),18e3),a=F(this.getAttribute("delay"),0),u=S(this.getAttribute("speed"),1);for(const o of t){const l=o.style.getPropertyValue("--ui-orbit-radius")||"var(--ui-orbiter-orbit-radius)",d=g(o.style.getPropertyValue("--ui-orbit-start-angle"),C),r=g(o.style.getPropertyValue("--ui-orbit-quarter-angle"),d+90),b=g(o.style.getPropertyValue("--ui-orbit-half-angle"),d+180),f=g(o.style.getPropertyValue("--ui-orbit-three-quarter-angle"),d+270),y=g(o.style.getPropertyValue("--ui-orbit-end-angle"),d+360),p=S(o.style.getPropertyValue("--ui-orbit-duration-scale"),1),T=c*s.durationScale*p/u;this._animations.get(o)?.cancel(),o.setAttribute("data-ui-orbit-runtime","");const n=o.animate([{transform:v(d,l),offset:0},{transform:v(r,l),offset:.25},{transform:v(b,l),offset:.5},{transform:v(f,l),offset:.75},{transform:v(y,l),offset:1}],{duration:Math.max(1,T),delay:Math.max(0,a),easing:"linear",iterations:Number.POSITIVE_INFINITY,fill:"both"});this._animations.set(o,n)}}_cancelAnimation(t){const e=this._animations.get(t);t.removeAttribute("data-ui-orbit-runtime"),e&&(e.cancel(),this._animations.delete(t))}_cancelAllAnimations(){for(const t of this._animations.values())t.cancel();this._animations.clear(),this._items.forEach(t=>{t.removeAttribute("data-ui-orbit-runtime"),this._unbindItemHover(t)})}_effectivePaused(){return!!(this.hasAttribute("paused")||this.hasAttribute("pause-on-hover")&&this._hovering||this.hasAttribute("pause-on-item-hover")&&this._itemHovering||this.hasAttribute("pause-on-focus")&&this._focusWithin)}_syncState(){const t=this._effectivePaused()?"paused":"running";this.setAttribute("data-state",t),this.setAttribute("data-path-visible",this._pathVisible()?"true":"false"),this.setAttribute("data-item-hovered",this._itemHovering?"true":"false");for(const e of this._animations.values())t==="paused"?e.pause():e.play()}}typeof customElements<"u"&&!customElements.get("ui-orbiter")&&customElements.define("ui-orbiter",D);exports.UIOrbiter=D;