number-flow 0.3.7 → 0.3.8

package/dist/formatter.d.ts

@@ -1,4 +1,4 @@
-type NumberPartType = Exclude<Intl.NumberFormatPartTypes, 'minusSign' | 'plusSign'> | 'sign';
+export type NumberPartType = Exclude<Intl.NumberFormatPartTypes, 'minusSign' | 'plusSign'> | 'sign' | 'prefix' | 'suffix';
 type IntegerPart = {
     type: NumberPartType & 'integer';
     value: number;
@@ -25,13 +25,13 @@ export type Format = Omit<Intl.NumberFormatOptions, 'notation'> & {
     notation?: Exclude<Intl.NumberFormatOptions['notation'], 'scientific' | 'engineering'>;
 };
 export type Value = Exclude<Parameters<typeof Intl.NumberFormat.prototype.formatToParts>[0], bigint>;
-export declare function partitionParts(value: Value, formatter: Intl.NumberFormat): {
+export declare function formatToData(value: Value, formatter: Intl.NumberFormat, prefix?: string, suffix?: string): {
     pre: KeyedNumberPart[];
     integer: KeyedNumberPart[];
     fraction: KeyedNumberPart[];
     post: KeyedNumberPart[];
-    formatted: string;
+    valueAsString: string;
     value: number;
 };
-export type PartitionedParts = ReturnType<typeof partitionParts>;
+export type Data = ReturnType<typeof formatToData>;
 export {};

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { type PartitionedParts } from './formatter';
+import { type Data } from './formatter';
 import { ServerSafeHTMLElement } from './ssr';
 export { define } from './util/dom';
 export { prefersReducedMotion } from './styles';
@@ -37,7 +37,7 @@ export declare class NumberFlowLite extends ServerSafeHTMLElement implements Pro
     get startingPlace(): number | null | undefined;
     get computedAnimated(): boolean;
     manual: boolean;
-    set parts(parts: PartitionedParts | undefined);
+    set data(data: Data | undefined);
     willUpdate(): void;
     didUpdate(): void;
 }

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function s(a,t,e,i){if(e==="a"&&!i)throw new TypeError("Private accessor was defined without a getter");if(typeof t=="function"?a!==t||!i:!t.has(a))throw new TypeError("Cannot read private member from an object whose class did not declare it");return e==="m"?i:e==="a"?i.call(a):i?i.value:t.get(a)}function h(a,t,e,i,n){if(i==="m")throw new TypeError("Private method is not writable");if(i==="a"&&!n)throw new TypeError("Private accessor was defined without a setter");if(typeof t=="function"?a!==t||!n:!t.has(a))throw new TypeError("Cannot write private member to an object whose class did not declare it");return i==="a"?n.call(a,e):n?n.value=e:t.set(a,e),e}const D=typeof window<"u",w=(a,t,e)=>{const i=document.createElement(a),[n,r]=Array.isArray(t)?[void 0,t]:[t,e];return n&&Object.assign(i,n),r==null||r.forEach(l=>i.appendChild(l)),i},mt=(a,t)=>{var e;return t==="left"?a.offsetLeft:(((e=a.offsetParent instanceof HTMLElement?a.offsetParent:null)==null?void 0:e.offsetWidth)??0)-a.offsetWidth-a.offsetLeft},gt=a=>a.offsetWidth>0&&a.offsetHeight>0,wt=(a,t)=>{if(!(!D||customElements.get(a)===t))return customElements.define(a,t)};function yt(a,t,{reverse:e=!1}={}){const i=a.length;for(let n=e?i-1:0;e?n>=0:n<i;e?n--:n++)t(a[n],n)}function vt(a,t){const e=t.formatToParts(a),i=[],n=[],r=[],l=[],o={},u=c=>{const f=o[c]==null?o[c]=0:++o[c];return`${c}:${f}`};let p="",m=!1,P=!1;for(const c of e){p+=c.value;const f=c.type==="minusSign"||c.type==="plusSign"?"sign":c.type;f==="integer"?(m=!0,n.push(...c.value.split("").map(Q=>({type:f,value:parseInt(Q)})))):f==="group"?n.push({type:f,value:c.value}):f==="decimal"?(P=!0,r.push({type:f,value:c.value,key:u(f)})):f==="fraction"?r.push(...c.value.split("").map(Q=>({type:f,value:parseInt(Q),key:u(f),place:-1-o[f]}))):(m||P?l:i).push({type:f,value:c.value,key:u(f)})}const d=[];for(let c=n.length-1;c>=0;c--){const f=n[c];d.unshift(f.type==="integer"?{...f,key:u(f.type),place:o[f.type]}:{...f,key:u(f.type)})}return{pre:i,integer:d,fraction:r,post:l,formatted:p,value:typeof a=="string"?parseFloat(a):a}}const _t=String.raw,bt=D&&typeof CSS<"u"&&CSS.supports&&CSS.supports("animation-timing-function","linear(1,2)"),St=D&&typeof CSS<"u"&&CSS.supports&&CSS.supports("line-height","mod(1,1)"),H=D&&matchMedia?matchMedia("(prefers-reduced-motion: reduce)"):null,q="--_number-flow-d-opacity",nt="--_number-flow-d-width",J="--_number-flow-dx",at="--_number-flow-d",kt=(()=>{try{return CSS.registerProperty({name:q,syntax:"<number>",inherits:!1,initialValue:"0"}),CSS.registerProperty({name:J,syntax:"<length>",inherits:!0,initialValue:"0px"}),CSS.registerProperty({name:nt,syntax:"<number>",inherits:!1,initialValue:"0"}),CSS.registerProperty({name:at,syntax:"<number>",inherits:!0,initialValue:"0"}),!0}catch{return!1}})(),ht="var(--number-flow-char-height, 1em)",g="var(--number-flow-mask-height, 0.25em)",C=`calc(${g} / 2)`,tt="var(--number-flow-mask-width, 0.5em)",S=`calc(${tt} / var(--scale-x))`,O="#000 0, transparent 71%",et="span",ot=_t`:host{display:inline-flex;align-items:baseline;direction:ltr;white-space:nowrap;position:relative;line-height:${ht} !important;isolation:isolate;}::slotted(${et}){position:absolute;left:0;top:0;color:transparent !important;will-change:unset !important;z-index:-5;}:host > .number,:host > .section{pointer-events:none;user-select:none;}.number,.number__inner{display:inline-flex;align-items:baseline;transform-origin:left top;}:host([data-will-change]) .number,:host([data-will-change]) .number__inner{will-change:transform;}.number{--scale-x:calc(1 + var(${nt}) / var(--width));transform:translateX(var(${J})) scaleX(var(--scale-x));margin:0 calc(-1 * ${tt});position:relative;z-index:-1;overflow:clip;-webkit-mask-image:linear-gradient( to right,transparent 0,#000 ${S},#000 calc(100% - ${S}),transparent ),linear-gradient( to bottom,transparent 0,#000 ${g},#000 calc(100% - ${g}),transparent 100% ),radial-gradient(at bottom right,${O}),radial-gradient(at bottom left,${O}),radial-gradient(at top left,${O}),radial-gradient(at top right,${O});-webkit-mask-size:100% calc(100% - ${g} * 2),calc(100% - ${S} * 2) 100%,${S} ${g},${S} ${g},${S} ${g},${S} ${g};-webkit-mask-position:center,center,top left,top right,bottom right,bottom left;-webkit-mask-repeat:no-repeat;}.number__inner{padding:0 ${tt};transform:scaleX(calc(1 / var(--scale-x))) translateX(calc(-1 * var(${J})));}.section{display:inline-flex;align-items:baseline;padding-bottom:${C};padding-top:${C};position:relative;isolation:isolate;}.section::after{content:'\200b';display:block;padding:${C} 0;}:host([data-will-change]) .section{will-change:transform;}.section--justify-left{transform-origin:center left;}.section--justify-right{transform-origin:center right;}.section__exiting{position:absolute !important;z-index:-1;}.digit{display:block;position:relative;--c:var(--current) + var(${at});}:host([data-will-change]) .digit,:host([data-will-change]) .digit__num{will-change:transform;}.digit__num{display:block;padding:${C} 0;--offset-raw:mod(10 + var(--n) - mod(var(--c),10),10);--offset:calc(var(--offset-raw) - 10 * round(down,var(--offset-raw) / 5,1));--y:clamp(-100%,var(--offset) * 100%,100%);transform:translateY(var(--y));}.digit__num:not(.is-current){position:absolute;top:0;left:50%;transform:translateX(-50%) translateY(var(--y));}.digit:not(.is-spinning) .digit__num:not(.is-current){display:none;}.symbol{display:inline-flex;align-items:baseline;position:relative;isolation:isolate;padding:${C} 0;}:host([data-will-change]) .symbol{will-change:transform;}.symbol__value{display:block;white-space:pre;}.symbol__exiting{position:absolute;z-index:-1;}.section--justify-left .symbol__exiting{left:0;}.section--justify-right .symbol__exiting{right:0;}.animate-presence{opacity:calc(1 + var(${q}));}`,$t=D?HTMLElement:class{},xt=({formatted:a,willChange:t})=>`<${et} style="font-kerning: none; display: inline-block; line-height: ${ht}; padding: ${g} 0;${t?"will-change: transform":""}">${a}</${et}>`,Mt=(a,t)=>a!=null&&t==null?a:a==null&&t!=null?t:a!=null&&t!=null?Math.max(a,t):null;var N,U,k,$,x,y,L,R,j,W,V,M,E,X,z,I,T,G,A,F,v,Y,it,_,K,Z;const ct=St&&bt&&kt;var b;(function(a){a[a.UP=1]="UP",a[a.DOWN=-1]="DOWN",a[a.NONE=0]="NONE"})(b||(b={}));let B;class ft extends $t{constructor(){super(...arguments),this.transformTiming=this.constructor.defaultProps.transformTiming,this.spinTiming=this.constructor.defaultProps.spinTiming,this.opacityTiming=this.constructor.defaultProps.opacityTiming,this.respectMotionPreference=this.constructor.defaultProps.respectMotionPreference,this.trend=this.constructor.defaultProps.trend,this.continuous=this.constructor.defaultProps.continuous,N.set(this,this.constructor.defaultProps.animated),U.set(this,!1),k.set(this,void 0),$.set(this,void 0),x.set(this,void 0),y.set(this,void 0),L.set(this,void 0),R.set(this,s(this,N,"f")),j.set(this,void 0),this.manual=!1,W.set(this,void 0)}get animated(){return s(this,N,"f")}set animated(t){var e;this.animated!==t&&(h(this,N,t,"f"),(e=this.shadowRoot)==null||e.getAnimations().forEach(i=>i.finish()))}get created(){return s(this,U,"f")}get computedTrend(){return s(this,y,"f")}get startingPlace(){return s(this,L,"f")}get computedAnimated(){return s(this,R,"f")}set parts(t){if(t==null)return;const{pre:e,integer:i,fraction:n,post:r,value:l}=t;if(s(this,U,"f")){const o=s(this,j,"f");if(h(this,j,t,"f"),this.trend===!0?h(this,y,Math.sign(l-o.value),"f"):this.trend==="increasing"?h(this,y,b.UP,"f"):this.trend==="decreasing"?h(this,y,b.DOWN,"f"):h(this,y,b.NONE,"f"),h(this,L,void 0,"f"),s(this,y,"f")!==b.NONE&&this.continuous){const u=o.integer.concat(o.fraction).filter(d=>d.type==="integer"||d.type==="fraction"),p=t.integer.concat(t.fraction).filter(d=>d.type==="integer"||d.type==="fraction"),m=u.find(d=>!p.find(c=>c.place===d.place&&c.value===d.value)),P=p.find(d=>!u.find(c=>d.place===c.place&&d.value===c.value));h(this,L,Mt(m==null?void 0:m.place,P==null?void 0:P.place),"f")}h(this,R,ct&&s(this,N,"f")&&(!this.respectMotionPreference||!(H!=null&&H.matches))&&gt(this),"f"),this.manual||this.willUpdate(),s(this,k,"f").update(e),s(this,$,"f").update({integer:i,fraction:n}),s(this,x,"f").update(r),this.manual||this.didUpdate()}else{if(h(this,j,t,"f"),this.attachShadow({mode:"open"}),typeof CSSStyleSheet<"u"&&this.shadowRoot.adoptedStyleSheets)B||(B=new CSSStyleSheet,B.replaceSync(ot)),this.shadowRoot.adoptedStyleSheets=[B];else{const o=document.createElement("style");o.textContent=ot,this.shadowRoot.appendChild(o)}this.shadowRoot.appendChild(w("slot")),h(this,k,new lt(this,e,{inert:!0,ariaHidden:"true",justify:"right"}),"f"),this.shadowRoot.appendChild(s(this,k,"f").el),h(this,$,new Et(this,i,n,{inert:!0,ariaHidden:"true"}),"f"),this.shadowRoot.appendChild(s(this,$,"f").el),h(this,x,new lt(this,r,{inert:!0,ariaHidden:"true",justify:"left"}),"f"),this.shadowRoot.appendChild(s(this,x,"f").el)}h(this,U,!0,"f")}willUpdate(){s(this,k,"f").willUpdate(),s(this,$,"f").willUpdate(),s(this,x,"f").willUpdate()}didUpdate(){if(!s(this,R,"f"))return;s(this,W,"f")?s(this,W,"f").abort():this.dispatchEvent(new Event("animationsstart")),s(this,k,"f").didUpdate(),s(this,$,"f").didUpdate(),s(this,x,"f").didUpdate();const t=new AbortController;Promise.all(this.shadowRoot.getAnimations().map(e=>e.finished)).then(()=>{t.signal.aborted||(this.dispatchEvent(new Event("animationsfinish")),h(this,W,void 0,"f"))}),h(this,W,t,"f")}}N=new WeakMap,U=new WeakMap,k=new WeakMap,$=new WeakMap,x=new WeakMap,y=new WeakMap,L=new WeakMap,R=new WeakMap,j=new WeakMap,W=new WeakMap;ft.defaultProps={transformTiming:{duration:900,easing:"linear(0,.005,.019,.039,.066,.096,.129,.165,.202,.24,.278,.316,.354,.39,.426,.461,.494,.526,.557,.586,.614,.64,.665,.689,.711,.731,.751,.769,.786,.802,.817,.831,.844,.856,.867,.877,.887,.896,.904,.912,.919,.925,.931,.937,.942,.947,.951,.955,.959,.962,.965,.968,.971,.973,.976,.978,.98,.981,.983,.984,.986,.987,.988,.989,.99,.991,.992,.992,.993,.994,.994,.995,.995,.996,.996,.9963,.9967,.9969,.9972,.9975,.9977,.9979,.9981,.9982,.9984,.9985,.9987,.9988,.9989,1)"},spinTiming:void 0,opacityTiming:{duration:450,easing:"ease-out"},animated:!0,trend:!0,continuous:!1,respectMotionPreference:!0};class Et{constructor(t,e,i,{className:n,...r}={}){this.flow=t,V.set(this,void 0),M.set(this,void 0),E.set(this,void 0),X.set(this,void 0),z.set(this,void 0),h(this,M,new rt(t,e,{justify:"right"}),"f"),h(this,E,new rt(t,i,{justify:"left"}),"f"),h(this,V,w("span",{className:"number__inner"},[s(this,M,"f").el,s(this,E,"f").el]),"f"),this.el=w("span",{...r,className:`number ${n??""}`},[s(this,V,"f")])}willUpdate(){h(this,X,this.el.offsetWidth,"f"),h(this,z,this.el.getBoundingClientRect().left,"f"),s(this,M,"f").willUpdate(),s(this,E,"f").willUpdate()}update({integer:t,fraction:e}){s(this,M,"f").update(t),s(this,E,"f").update(e)}didUpdate(){const t=this.el.getBoundingClientRect();s(this,M,"f").didUpdate(),s(this,E,"f").didUpdate();const e=s(this,z,"f")-t.left,i=this.el.offsetWidth,n=s(this,X,"f")-i;this.el.style.setProperty("--width",String(i)),this.el.animate({[J]:[`${e}px`,"0px"],[nt]:[n,0]},{...this.flow.transformTiming,composite:"accumulate"})}}V=new WeakMap,M=new WeakMap,E=new WeakMap,X=new WeakMap,z=new WeakMap;class dt{constructor(t,e,{justify:i,className:n,...r},l){this.flow=t,this.children=new Map,this.onCharRemove=u=>()=>{this.children.delete(u)},I.set(this,void 0),this.justify=i;const o=e.map(u=>this.addChar(u).el);this.el=w("span",{...r,className:`section section--justify-${i} ${n??""}`},l?l(o):o)}addChar(t,{startDigitsAtZero:e=!1,...i}={}){const n=t.type==="integer"||t.type==="fraction"?new pt(this,t.type,e?0:t.value,t.place,{...i,onRemove:this.onCharRemove(t.key)}):new Pt(this,t.type,t.value,{...i,onRemove:this.onCharRemove(t.key)});return this.children.set(t.key,n),n}unpop(t){t.el.classList.remove("section__exiting"),t.el.style[this.justify]=""}pop(t){t.forEach(e=>{e.el.style[this.justify]=`${mt(e.el,this.justify)}px`}),t.forEach(e=>{e.el.classList.add("section__exiting"),e.present=!1})}addNewAndUpdateExisting(t){const e=new Map,i=new Map,n=this.justify==="left",r=n?"prepend":"append";if(yt(t,l=>{let o;this.children.has(l.key)?(o=this.children.get(l.key),i.set(l,o),this.unpop(o),o.present=!0):(o=this.addChar(l,{startDigitsAtZero:!0,animateIn:!0}),e.set(l,o)),this.el[r](o.el)},{reverse:n}),this.flow.computedAnimated){const l=this.el.getBoundingClientRect();e.forEach(o=>{o.willUpdate(l)})}e.forEach((l,o)=>{l.update(o.value)}),i.forEach((l,o)=>{l.update(o.value)})}willUpdate(){const t=this.el.getBoundingClientRect();h(this,I,t[this.justify],"f"),this.children.forEach(e=>e.willUpdate(t))}didUpdate(){const t=this.el.getBoundingClientRect();this.children.forEach(n=>n.didUpdate(t));const e=t[this.justify],i=s(this,I,"f")-e;this.el.animate({transform:[`translateX(${i}px)`,"none"]},{...this.flow.transformTiming,composite:"accumulate"})}}I=new WeakMap;class rt extends dt{update(t){const e=new Map;this.children.forEach((i,n)=>{t.find(r=>r.key===n)||e.set(n,i),this.unpop(i)}),this.addNewAndUpdateExisting(t),e.forEach(i=>{i instanceof pt&&i.update(0)}),this.pop(e)}}class lt extends dt{update(t){const e=new Map;this.children.forEach((i,n)=>{t.find(r=>r.key===n)||e.set(n,i)}),this.pop(e),this.addNewAndUpdateExisting(t)}}class st{constructor(t,e,{onRemove:i,animateIn:n=!1}={}){this.flow=t,this.el=e,T.set(this,!0),G.set(this,void 0),A.set(this,()=>{var r;this.el.remove(),(r=s(this,G,"f"))==null||r.call(this)}),this.el.classList.add("animate-presence"),this.flow.computedAnimated&&n&&this.el.animate({[q]:[-.9999,0]},{...this.flow.opacityTiming,composite:"accumulate"}),h(this,G,i,"f")}get present(){return s(this,T,"f")}set present(t){if(s(this,T,"f")!==t){if(h(this,T,t,"f"),!this.flow.computedAnimated){t||s(this,A,"f").call(this);return}this.el.style.setProperty("--_number-flow-d-opacity",t?"0":"-.999"),this.el.animate({[q]:t?[-.9999,0]:[.999,0]},{...this.flow.opacityTiming,composite:"accumulate"}),t?this.flow.removeEventListener("animationsfinish",s(this,A,"f")):this.flow.addEventListener("animationsfinish",s(this,A,"f"),{once:!0})}}}T=new WeakMap,G=new WeakMap,A=new WeakMap;class ut extends st{constructor(t,e,i,n){super(t.flow,i,n),this.section=t,this.value=e,this.el=i}}class pt extends ut{constructor(t,e,i,n,r){const l=Array.from({length:10}).map((u,p)=>{const m=w("span",{className:`digit__num${p===i?" is-current":""}`},[document.createTextNode(String(p))]);return m.style.setProperty("--n",String(p)),m}),o=w("span",{className:"digit"},l);o.style.setProperty("--current",String(i)),super(t,i,o,r),this.place=n,F.set(this,void 0),v.set(this,void 0),Y.set(this,void 0),it.set(this,()=>{this.el.classList.remove("is-spinning")}),h(this,F,l,"f")}willUpdate(t){const e=this.el.getBoundingClientRect();h(this,v,this.value,"f");const i=e[this.section.justify]-t[this.section.justify],n=e.width/2;h(this,Y,this.section.justify==="left"?i+n:i-n,"f")}update(t){var e,i;(e=s(this,F,"f")[this.value])==null||e.classList.remove("is-current"),this.el.style.setProperty("--current",String(t)),(i=s(this,F,"f")[t])==null||i.classList.add("is-current"),this.value=t}didUpdate(t){const e=this.el.getBoundingClientRect(),i=e[this.section.justify]-t[this.section.justify],n=e.width/2,r=this.section.justify==="left"?i+n:i-n;this.el.animate({transform:[`translateX(${s(this,Y,"f")-r}px)`,"none"]},{...this.flow.transformTiming,composite:"accumulate"});const l=this.diff;l&&(this.el.classList.add("is-spinning"),this.el.animate({[at]:[-l,0]},{...this.flow.spinTiming??this.flow.transformTiming,composite:"accumulate"}),this.flow.addEventListener("animationsfinish",s(this,it,"f"),{once:!0}))}get diff(){let t=this.flow.computedTrend;const e=this.value-s(this,v,"f");return!e&&this.flow.startingPlace!=null&&this.flow.startingPlace>=this.place?10*t:(t||(t=Math.sign(e)),t===b.DOWN&&this.value>s(this,v,"f")?this.value-10-s(this,v,"f"):t===b.UP&&this.value<s(this,v,"f")?10-s(this,v,"f")+this.value:e)}}F=new WeakMap,v=new WeakMap,Y=new WeakMap,it=new WeakMap;class Pt extends ut{constructor(t,e,i,n){const r=w("span",{className:"symbol__value",textContent:i});super(t,i,w("span",{className:"symbol"},[r]),n),this.type=e,_.set(this,new Map),K.set(this,void 0),Z.set(this,l=>()=>{s(this,_,"f").delete(l)}),s(this,_,"f").set(i,new st(this.flow,r,{onRemove:s(this,Z,"f").call(this,i)}))}willUpdate(t){if(this.type==="decimal")return;const e=this.el.getBoundingClientRect();h(this,K,e[this.section.justify]-t[this.section.justify],"f")}update(t){if(this.value!==t){const e=s(this,_,"f").get(this.value);if(e.present=!1,e.el.classList.add("symbol__exiting"),s(this,_,"f").has(t)){const i=s(this,_,"f").get(t);i.present=!0,i.el.classList.remove("symbol__exiting")}else{const i=w("span",{className:"symbol__value",textContent:t});this.el.appendChild(i),s(this,_,"f").set(t,new st(this.flow,i,{animateIn:!0,onRemove:s(this,Z,"f").call(this,t)}))}}this.value=t}didUpdate(t){if(this.type==="decimal")return;const i=this.el.getBoundingClientRect()[this.section.justify]-t[this.section.justify];this.el.animate({transform:[`translateX(${s(this,K,"f")-i}px)`,"none"]},{...this.flow.transformTiming,composite:"accumulate"})}}_=new WeakMap,K=new WeakMap,Z=new WeakMap;exports.NumberFlowLite=ft;exports.canAnimate=ct;exports.define=wt;exports.partitionParts=vt;exports.prefersReducedMotion=H;exports.render=xt;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function s(a,t,e,i){if(e==="a"&&!i)throw new TypeError("Private accessor was defined without a getter");if(typeof t=="function"?a!==t||!i:!t.has(a))throw new TypeError("Cannot read private member from an object whose class did not declare it");return e==="m"?i:e==="a"?i.call(a):i?i.value:t.get(a)}function h(a,t,e,i,n){if(i==="m")throw new TypeError("Private method is not writable");if(i==="a"&&!n)throw new TypeError("Private accessor was defined without a setter");if(typeof t=="function"?a!==t||!n:!t.has(a))throw new TypeError("Cannot write private member to an object whose class did not declare it");return i==="a"?n.call(a,e):n?n.value=e:t.set(a,e),e}const O=typeof window<"u",w=(a,t,e)=>{const i=document.createElement(a),[n,l]=Array.isArray(t)?[void 0,t]:[t,e];return n&&Object.assign(i,n),l==null||l.forEach(r=>i.appendChild(r)),i},wt=(a,t)=>{var e;return t==="left"?a.offsetLeft:(((e=a.offsetParent instanceof HTMLElement?a.offsetParent:null)==null?void 0:e.offsetWidth)??0)-a.offsetWidth-a.offsetLeft},yt=a=>a.offsetWidth>0&&a.offsetHeight>0,vt=(a,t)=>{if(!(!O||customElements.get(a)===t))return customElements.define(a,t)};function _t(a,t,{reverse:e=!1}={}){const i=a.length;for(let n=e?i-1:0;e?n>=0:n<i;e?n--:n++)t(a[n],n)}function bt(a,t,e,i){const n=t.formatToParts(a);e&&n.unshift({type:"prefix",value:e}),i&&n.push({type:"suffix",value:i});const l=[],r=[],o=[],m=[],u={},p=f=>`${f}:${u[f]=(u[f]??-1)+1}`;let P="",d=!1,y=!1;for(const f of n){P+=f.value;const c=f.type==="minusSign"||f.type==="plusSign"?"sign":f.type;c==="integer"?(d=!0,r.push(...f.value.split("").map(tt=>({type:c,value:parseInt(tt)})))):c==="group"?r.push({type:c,value:f.value}):c==="decimal"?(y=!0,o.push({type:c,value:f.value,key:p(c)})):c==="fraction"?o.push(...f.value.split("").map(tt=>({type:c,value:parseInt(tt),key:p(c),place:-1-u[c]}))):(d||y?m:l).push({type:c,value:f.value,key:p(c)})}const rt=[];for(let f=r.length-1;f>=0;f--){const c=r[f];rt.unshift(c.type==="integer"?{...c,key:p(c.type),place:u[c.type]}:{...c,key:p(c.type)})}return{pre:l,integer:rt,fraction:o,post:m,valueAsString:P,value:typeof a=="string"?parseFloat(a):a}}const St=String.raw,xt=O&&typeof CSS<"u"&&CSS.supports&&CSS.supports("animation-timing-function","linear(1,2)"),kt=O&&typeof CSS<"u"&&CSS.supports&&CSS.supports("line-height","mod(1,1)"),V=O&&matchMedia?matchMedia("(prefers-reduced-motion: reduce)"):null,J="--_number-flow-d-opacity",at="--_number-flow-d-width",Q="--_number-flow-dx",ot="--_number-flow-d",$t=(()=>{try{return CSS.registerProperty({name:J,syntax:"<number>",inherits:!1,initialValue:"0"}),CSS.registerProperty({name:Q,syntax:"<length>",inherits:!0,initialValue:"0px"}),CSS.registerProperty({name:at,syntax:"<number>",inherits:!1,initialValue:"0"}),CSS.registerProperty({name:ot,syntax:"<number>",inherits:!0,initialValue:"0"}),!0}catch{return!1}})(),ft="var(--number-flow-char-height, 1em)",g="var(--number-flow-mask-height, 0.25em)",U=`calc(${g} / 2)`,et="var(--number-flow-mask-width, 0.5em)",x=`calc(${et} / var(--scale-x))`,B="#000 0, transparent 71%",it="span",lt=St`:host{display:inline-flex;align-items:baseline;direction:ltr;white-space:nowrap;position:relative;line-height:${ft} !important;isolation:isolate;}::slotted(${it}){position:absolute;left:0;top:0;color:transparent !important;will-change:unset !important;z-index:-5;}:host > .number,:host > .section{pointer-events:none;user-select:none;}.number,.number__inner{display:inline-flex;align-items:baseline;transform-origin:left top;}:host([data-will-change]) .number,:host([data-will-change]) .number__inner{will-change:transform;}.number{--scale-x:calc(1 + var(${at}) / var(--width));transform:translateX(var(${Q})) scaleX(var(--scale-x));margin:0 calc(-1 * ${et});position:relative;z-index:-1;overflow:clip;-webkit-mask-image:linear-gradient( to right,transparent 0,#000 ${x},#000 calc(100% - ${x}),transparent ),linear-gradient( to bottom,transparent 0,#000 ${g},#000 calc(100% - ${g}),transparent 100% ),radial-gradient(at bottom right,${B}),radial-gradient(at bottom left,${B}),radial-gradient(at top left,${B}),radial-gradient(at top right,${B});-webkit-mask-size:100% calc(100% - ${g} * 2),calc(100% - ${x} * 2) 100%,${x} ${g},${x} ${g},${x} ${g},${x} ${g};-webkit-mask-position:center,center,top left,top right,bottom right,bottom left;-webkit-mask-repeat:no-repeat;}.number__inner{padding:0 ${et};transform:scaleX(calc(1 / var(--scale-x))) translateX(calc(-1 * var(${Q})));}.section{display:inline-flex;align-items:baseline;padding-bottom:${U};padding-top:${U};position:relative;isolation:isolate;}.section::after{content:'\200b';display:block;padding:${U} 0;}:host([data-will-change]) .section{will-change:transform;}.section--justify-left{transform-origin:center left;}.section--justify-right{transform-origin:center right;}.section__exiting{position:absolute !important;z-index:-1;}.digit{display:block;position:relative;--c:var(--current) + var(${ot});}:host([data-will-change]) .digit,:host([data-will-change]) .digit__num{will-change:transform;}.digit__num{display:block;padding:${U} 0;--offset-raw:mod(10 + var(--n) - mod(var(--c),10),10);--offset:calc(var(--offset-raw) - 10 * round(down,var(--offset-raw) / 5,1));--y:clamp(-100%,var(--offset) * 100%,100%);transform:translateY(var(--y));}.digit__num:not(.is-current){position:absolute;top:0;left:50%;transform:translateX(-50%) translateY(var(--y));}.digit:not(.is-spinning) .digit__num:not(.is-current){display:none;}.symbol{display:inline-flex;align-items:baseline;position:relative;isolation:isolate;padding:${U} 0;}:host([data-will-change]) .symbol{will-change:transform;}.symbol__value{display:block;mix-blend-mode:plus-lighter;white-space:pre;}.symbol__exiting{position:absolute;z-index:-1;}.section--justify-left .symbol__exiting{left:0;}.section--justify-right .symbol__exiting{right:0;}.animate-presence{opacity:calc(1 + var(${J}));}`,Mt=O?HTMLElement:class{},Et=({valueAsString:a,willChange:t})=>`<${it} style="font-kerning: none; display: inline-block; line-height: ${ft}; padding: ${g} 0;${t?"will-change: transform":""}">${a}</${it}>`,Nt=(a,t)=>a!=null&&t==null?a:a==null&&t!=null?t:a!=null&&t!=null?Math.max(a,t):null;var W,L,k,$,M,v,R,T,j,C,X,E,N,z,I,G,A,Y,F,D,_,K,st,b,Z,q;const dt=kt&&xt&&$t;var S;(function(a){a[a.UP=1]="UP",a[a.DOWN=-1]="DOWN",a[a.NONE=0]="NONE"})(S||(S={}));let H;class pt extends Mt{constructor(){super(...arguments),this.transformTiming=this.constructor.defaultProps.transformTiming,this.spinTiming=this.constructor.defaultProps.spinTiming,this.opacityTiming=this.constructor.defaultProps.opacityTiming,this.respectMotionPreference=this.constructor.defaultProps.respectMotionPreference,this.trend=this.constructor.defaultProps.trend,this.continuous=this.constructor.defaultProps.continuous,W.set(this,this.constructor.defaultProps.animated),L.set(this,!1),k.set(this,void 0),$.set(this,void 0),M.set(this,void 0),v.set(this,void 0),R.set(this,void 0),T.set(this,s(this,W,"f")),j.set(this,void 0),this.manual=!1,C.set(this,void 0)}get animated(){return s(this,W,"f")}set animated(t){var e;this.animated!==t&&(h(this,W,t,"f"),(e=this.shadowRoot)==null||e.getAnimations().forEach(i=>i.finish()))}get created(){return s(this,L,"f")}get computedTrend(){return s(this,v,"f")}get startingPlace(){return s(this,R,"f")}get computedAnimated(){return s(this,T,"f")}set data(t){if(t==null)return;const{pre:e,integer:i,fraction:n,post:l,value:r}=t;if(s(this,L,"f")){const o=s(this,j,"f");if(h(this,j,t,"f"),this.trend===!0?h(this,v,Math.sign(r-o.value),"f"):this.trend==="increasing"?h(this,v,S.UP,"f"):this.trend==="decreasing"?h(this,v,S.DOWN,"f"):h(this,v,S.NONE,"f"),h(this,R,void 0,"f"),s(this,v,"f")!==S.NONE&&this.continuous){const m=o.integer.concat(o.fraction).filter(d=>d.type==="integer"||d.type==="fraction"),u=t.integer.concat(t.fraction).filter(d=>d.type==="integer"||d.type==="fraction"),p=m.find(d=>!u.find(y=>y.place===d.place&&y.value===d.value)),P=u.find(d=>!m.find(y=>d.place===y.place&&d.value===y.value));h(this,R,Nt(p==null?void 0:p.place,P==null?void 0:P.place),"f")}h(this,T,dt&&s(this,W,"f")&&(!this.respectMotionPreference||!(V!=null&&V.matches))&&yt(this),"f"),this.manual||this.willUpdate(),s(this,k,"f").update(e),s(this,$,"f").update({integer:i,fraction:n}),s(this,M,"f").update(l),this.manual||this.didUpdate()}else{if(h(this,j,t,"f"),this.attachShadow({mode:"open"}),typeof CSSStyleSheet<"u"&&this.shadowRoot.adoptedStyleSheets)H||(H=new CSSStyleSheet,H.replaceSync(lt)),this.shadowRoot.adoptedStyleSheets=[H];else{const o=document.createElement("style");o.textContent=lt,this.shadowRoot.appendChild(o)}this.shadowRoot.appendChild(w("slot")),h(this,k,new ct(this,e,{inert:!0,ariaHidden:"true",justify:"right"}),"f"),this.shadowRoot.appendChild(s(this,k,"f").el),h(this,$,new Pt(this,i,n,{inert:!0,ariaHidden:"true"}),"f"),this.shadowRoot.appendChild(s(this,$,"f").el),h(this,M,new ct(this,l,{inert:!0,ariaHidden:"true",justify:"left"}),"f"),this.shadowRoot.appendChild(s(this,M,"f").el)}h(this,L,!0,"f")}willUpdate(){s(this,k,"f").willUpdate(),s(this,$,"f").willUpdate(),s(this,M,"f").willUpdate()}didUpdate(){if(!s(this,T,"f"))return;s(this,C,"f")?s(this,C,"f").abort():this.dispatchEvent(new Event("animationsstart")),s(this,k,"f").didUpdate(),s(this,$,"f").didUpdate(),s(this,M,"f").didUpdate();const t=new AbortController;Promise.all(this.shadowRoot.getAnimations().map(e=>e.finished)).then(()=>{t.signal.aborted||(this.dispatchEvent(new Event("animationsfinish")),h(this,C,void 0,"f"))}),h(this,C,t,"f")}}W=new WeakMap,L=new WeakMap,k=new WeakMap,$=new WeakMap,M=new WeakMap,v=new WeakMap,R=new WeakMap,T=new WeakMap,j=new WeakMap,C=new WeakMap;pt.defaultProps={transformTiming:{duration:900,easing:"linear(0,.005,.019,.039,.066,.096,.129,.165,.202,.24,.278,.316,.354,.39,.426,.461,.494,.526,.557,.586,.614,.64,.665,.689,.711,.731,.751,.769,.786,.802,.817,.831,.844,.856,.867,.877,.887,.896,.904,.912,.919,.925,.931,.937,.942,.947,.951,.955,.959,.962,.965,.968,.971,.973,.976,.978,.98,.981,.983,.984,.986,.987,.988,.989,.99,.991,.992,.992,.993,.994,.994,.995,.995,.996,.996,.9963,.9967,.9969,.9972,.9975,.9977,.9979,.9981,.9982,.9984,.9985,.9987,.9988,.9989,1)"},spinTiming:void 0,opacityTiming:{duration:450,easing:"ease-out"},animated:!0,trend:!0,continuous:!1,respectMotionPreference:!0};class Pt{constructor(t,e,i,{className:n,...l}={}){this.flow=t,X.set(this,void 0),E.set(this,void 0),N.set(this,void 0),z.set(this,void 0),I.set(this,void 0),h(this,E,new ht(t,e,{justify:"right"}),"f"),h(this,N,new ht(t,i,{justify:"left"}),"f"),h(this,X,w("span",{className:"number__inner"},[s(this,E,"f").el,s(this,N,"f").el]),"f"),this.el=w("span",{...l,className:`number ${n??""}`},[s(this,X,"f")])}willUpdate(){h(this,z,this.el.offsetWidth,"f"),h(this,I,this.el.getBoundingClientRect().left,"f"),s(this,E,"f").willUpdate(),s(this,N,"f").willUpdate()}update({integer:t,fraction:e}){s(this,E,"f").update(t),s(this,N,"f").update(e)}didUpdate(){const t=this.el.getBoundingClientRect();s(this,E,"f").didUpdate(),s(this,N,"f").didUpdate();const e=s(this,I,"f")-t.left,i=this.el.offsetWidth,n=s(this,z,"f")-i;this.el.style.setProperty("--width",String(i)),this.el.animate({[Q]:[`${e}px`,"0px"],[at]:[n,0]},{...this.flow.transformTiming,composite:"accumulate"})}}X=new WeakMap,E=new WeakMap,N=new WeakMap,z=new WeakMap,I=new WeakMap;class ut{constructor(t,e,{justify:i,className:n,...l},r){this.flow=t,this.children=new Map,this.onCharRemove=m=>()=>{this.children.delete(m)},G.set(this,void 0),this.justify=i;const o=e.map(m=>this.addChar(m).el);this.el=w("span",{...l,className:`section section--justify-${i} ${n??""}`},r?r(o):o)}addChar(t,{startDigitsAtZero:e=!1,...i}={}){const n=t.type==="integer"||t.type==="fraction"?new gt(this,t.type,e?0:t.value,t.place,{...i,onRemove:this.onCharRemove(t.key)}):new Wt(this,t.type,t.value,{...i,onRemove:this.onCharRemove(t.key)});return this.children.set(t.key,n),n}unpop(t){t.el.classList.remove("section__exiting"),t.el.style[this.justify]=""}pop(t){t.forEach(e=>{e.el.style[this.justify]=`${wt(e.el,this.justify)}px`}),t.forEach(e=>{e.el.classList.add("section__exiting"),e.present=!1})}addNewAndUpdateExisting(t){const e=new Map,i=new Map,n=this.justify==="left",l=n?"prepend":"append";if(_t(t,r=>{let o;this.children.has(r.key)?(o=this.children.get(r.key),i.set(r,o),this.unpop(o),o.present=!0):(o=this.addChar(r,{startDigitsAtZero:!0,animateIn:!0}),e.set(r,o)),this.el[l](o.el)},{reverse:n}),this.flow.computedAnimated){const r=this.el.getBoundingClientRect();e.forEach(o=>{o.willUpdate(r)})}e.forEach((r,o)=>{r.update(o.value)}),i.forEach((r,o)=>{r.update(o.value)})}willUpdate(){const t=this.el.getBoundingClientRect();h(this,G,t[this.justify],"f"),this.children.forEach(e=>e.willUpdate(t))}didUpdate(){const t=this.el.getBoundingClientRect();this.children.forEach(n=>n.didUpdate(t));const e=t[this.justify],i=s(this,G,"f")-e;i&&this.children.size&&this.el.animate({transform:[`translateX(${i}px)`,"none"]},{...this.flow.transformTiming,composite:"accumulate"})}}G=new WeakMap;class ht extends ut{update(t){const e=new Map;this.children.forEach((i,n)=>{t.find(l=>l.key===n)||e.set(n,i),this.unpop(i)}),this.addNewAndUpdateExisting(t),e.forEach(i=>{i instanceof gt&&i.update(0)}),this.pop(e)}}class ct extends ut{update(t){const e=new Map;this.children.forEach((i,n)=>{t.find(l=>l.key===n)||e.set(n,i)}),this.pop(e),this.addNewAndUpdateExisting(t)}}class nt{constructor(t,e,{onRemove:i,animateIn:n=!1}={}){this.flow=t,this.el=e,A.set(this,!0),Y.set(this,void 0),F.set(this,()=>{var l;this.el.remove(),(l=s(this,Y,"f"))==null||l.call(this)}),this.el.classList.add("animate-presence"),this.flow.computedAnimated&&n&&this.el.animate({[J]:[-.9999,0]},{...this.flow.opacityTiming,composite:"accumulate"}),h(this,Y,i,"f")}get present(){return s(this,A,"f")}set present(t){if(s(this,A,"f")!==t){if(h(this,A,t,"f"),!this.flow.computedAnimated){t||s(this,F,"f").call(this);return}this.el.style.setProperty("--_number-flow-d-opacity",t?"0":"-.999"),this.el.animate({[J]:t?[-.9999,0]:[.999,0]},{...this.flow.opacityTiming,composite:"accumulate"}),t?this.flow.removeEventListener("animationsfinish",s(this,F,"f")):this.flow.addEventListener("animationsfinish",s(this,F,"f"),{once:!0})}}}A=new WeakMap,Y=new WeakMap,F=new WeakMap;class mt extends nt{constructor(t,e,i,n){super(t.flow,i,n),this.section=t,this.value=e,this.el=i}}class gt extends mt{constructor(t,e,i,n,l){const r=Array.from({length:10}).map((m,u)=>{const p=w("span",{className:`digit__num${u===i?" is-current":""}`},[document.createTextNode(String(u))]);return p.style.setProperty("--n",String(u)),p}),o=w("span",{className:"digit"},r);o.style.setProperty("--current",String(i)),super(t,i,o,l),this.place=n,D.set(this,void 0),_.set(this,void 0),K.set(this,void 0),st.set(this,()=>{this.el.classList.remove("is-spinning")}),h(this,D,r,"f")}willUpdate(t){const e=this.el.getBoundingClientRect();h(this,_,this.value,"f");const i=e[this.section.justify]-t[this.section.justify],n=e.width/2;h(this,K,this.section.justify==="left"?i+n:i-n,"f")}update(t){var e,i;(e=s(this,D,"f")[this.value])==null||e.classList.remove("is-current"),this.el.style.setProperty("--current",String(t)),(i=s(this,D,"f")[t])==null||i.classList.add("is-current"),this.value=t}didUpdate(t){const e=this.el.getBoundingClientRect(),i=e[this.section.justify]-t[this.section.justify],n=e.width/2,l=this.section.justify==="left"?i+n:i-n,r=s(this,K,"f")-l;r&&this.el.animate({transform:[`translateX(${r}px)`,"none"]},{...this.flow.transformTiming,composite:"accumulate"});const o=this.diff;o&&(this.el.classList.add("is-spinning"),this.el.animate({[ot]:[-o,0]},{...this.flow.spinTiming??this.flow.transformTiming,composite:"accumulate"}),this.flow.addEventListener("animationsfinish",s(this,st,"f"),{once:!0}))}get diff(){let t=this.flow.computedTrend;const e=this.value-s(this,_,"f");return!e&&this.flow.startingPlace!=null&&this.flow.startingPlace>=this.place?10*t:(t||(t=Math.sign(e)),t===S.DOWN&&this.value>s(this,_,"f")?this.value-10-s(this,_,"f"):t===S.UP&&this.value<s(this,_,"f")?10-s(this,_,"f")+this.value:e)}}D=new WeakMap,_=new WeakMap,K=new WeakMap,st=new WeakMap;class Wt extends mt{constructor(t,e,i,n){const l=w("span",{className:"symbol__value",textContent:i});super(t,i,w("span",{className:"symbol"},[l]),n),this.type=e,b.set(this,new Map),Z.set(this,void 0),q.set(this,r=>()=>{s(this,b,"f").delete(r)}),s(this,b,"f").set(i,new nt(this.flow,l,{onRemove:s(this,q,"f").call(this,i)}))}willUpdate(t){if(this.type==="decimal")return;const e=this.el.getBoundingClientRect();h(this,Z,e[this.section.justify]-t[this.section.justify],"f")}update(t){if(this.value!==t){const e=s(this,b,"f").get(this.value);if(e.present=!1,e.el.classList.add("symbol__exiting"),s(this,b,"f").has(t)){const i=s(this,b,"f").get(t);i.present=!0,i.el.classList.remove("symbol__exiting")}else{const i=w("span",{className:"symbol__value",textContent:t});this.el.appendChild(i),s(this,b,"f").set(t,new nt(this.flow,i,{animateIn:!0,onRemove:s(this,q,"f").call(this,t)}))}}this.value=t}didUpdate(t){if(this.type==="decimal")return;const i=this.el.getBoundingClientRect()[this.section.justify]-t[this.section.justify],n=s(this,Z,"f")-i;n&&this.el.animate({transform:[`translateX(${n}px)`,"none"]},{...this.flow.transformTiming,composite:"accumulate"})}}b=new WeakMap,Z=new WeakMap,q=new WeakMap;exports.NumberFlowLite=pt;exports.canAnimate=dt;exports.define=vt;exports.formatToData=bt;exports.prefersReducedMotion=V;exports.render=Et;

package/dist/index.mjs

@@ -9,81 +9,80 @@ function h(a, t, e, i, n) {
   if (typeof t == "function" ? a !== t || !n : !t.has(a)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
   return i === "a" ? n.call(a, e) : n ? n.value = e : t.set(a, e), e;
 }
-const D = typeof window < "u", w = (a, t, e) => {
-  const i = document.createElement(a), [n, r] = Array.isArray(t) ? [void 0, t] : [t, e];
-  return n && Object.assign(i, n), r == null || r.forEach((l) => i.appendChild(l)), i;
-}, pt = (a, t) => {
+const O = typeof window < "u", w = (a, t, e) => {
+  const i = document.createElement(a), [n, l] = Array.isArray(t) ? [void 0, t] : [t, e];
+  return n && Object.assign(i, n), l == null || l.forEach((r) => i.appendChild(r)), i;
+}, mt = (a, t) => {
   var e;
   return t === "left" ? a.offsetLeft : (((e = a.offsetParent instanceof HTMLElement ? a.offsetParent : null) == null ? void 0 : e.offsetWidth) ?? 0) - a.offsetWidth - a.offsetLeft;
-}, ut = (a) => a.offsetWidth > 0 && a.offsetHeight > 0, Et = (a, t) => {
-  if (!(!D || customElements.get(a) === t))
+}, gt = (a) => a.offsetWidth > 0 && a.offsetHeight > 0, Nt = (a, t) => {
+  if (!(!O || customElements.get(a) === t))
     return customElements.define(a, t);
 };
-function mt(a, t, { reverse: e = !1 } = {}) {
+function wt(a, t, { reverse: e = !1 } = {}) {
   const i = a.length;
   for (let n = e ? i - 1 : 0; e ? n >= 0 : n < i; e ? n-- : n++)
     t(a[n], n);
 }
-function Mt(a, t) {
-  const e = t.formatToParts(a), i = [], n = [], r = [], l = [], o = {}, p = (c) => {
-    const f = o[c] == null ? o[c] = 0 : ++o[c];
-    return `${c}:${f}`;
-  };
-  let u = "", m = !1, N = !1;
-  for (const c of e) {
-    u += c.value;
-    const f = c.type === "minusSign" || c.type === "plusSign" ? "sign" : c.type;
-    f === "integer" ? (m = !0, n.push(...c.value.split("").map((J) => ({ type: f, value: parseInt(J) })))) : f === "group" ? n.push({ type: f, value: c.value }) : f === "decimal" ? (N = !0, r.push({ type: f, value: c.value, key: p(f) })) : f === "fraction" ? r.push(...c.value.split("").map((J) => ({
-      type: f,
-      value: parseInt(J),
-      key: p(f),
-      place: -1 - o[f]
-    }))) : (m || N ? l : i).push({
-      type: f,
-      value: c.value,
-      key: p(f)
+function Pt(a, t, e, i) {
+  const n = t.formatToParts(a);
+  e && n.unshift({ type: "prefix", value: e }), i && n.push({ type: "suffix", value: i });
+  const l = [], r = [], o = [], m = [], u = {}, p = (f) => `${f}:${u[f] = (u[f] ?? -1) + 1}`;
+  let P = "", d = !1, y = !1;
+  for (const f of n) {
+    P += f.value;
+    const c = f.type === "minusSign" || f.type === "plusSign" ? "sign" : f.type;
+    c === "integer" ? (d = !0, r.push(...f.value.split("").map((Q) => ({ type: c, value: parseInt(Q) })))) : c === "group" ? r.push({ type: c, value: f.value }) : c === "decimal" ? (y = !0, o.push({ type: c, value: f.value, key: p(c) })) : c === "fraction" ? o.push(...f.value.split("").map((Q) => ({
+      type: c,
+      value: parseInt(Q),
+      key: p(c),
+      place: -1 - u[c]
+    }))) : (d || y ? m : l).push({
+      type: c,
+      value: f.value,
+      key: p(c)
     });
   }
-  const d = [];
-  for (let c = n.length - 1; c >= 0; c--) {
-    const f = n[c];
-    d.unshift(f.type === "integer" ? {
-      ...f,
-      key: p(f.type),
-      place: o[f.type]
+  const rt = [];
+  for (let f = r.length - 1; f >= 0; f--) {
+    const c = r[f];
+    rt.unshift(c.type === "integer" ? {
+      ...c,
+      key: p(c.type),
+      place: u[c.type]
     } : {
-      ...f,
-      key: p(f.type)
+      ...c,
+      key: p(c.type)
     });
   }
   return {
-    pre: i,
-    integer: d,
-    fraction: r,
-    post: l,
-    formatted: u,
+    pre: l,
+    integer: rt,
+    fraction: o,
+    post: m,
+    valueAsString: P,
     value: typeof a == "string" ? parseFloat(a) : a
   };
 }
-const gt = String.raw, wt = D && typeof CSS < "u" && CSS.supports && CSS.supports("animation-timing-function", "linear(1,2)"), yt = D && typeof CSS < "u" && CSS.supports && CSS.supports("line-height", "mod(1,1)"), Q = D && matchMedia ? matchMedia("(prefers-reduced-motion: reduce)") : null, Z = "--_number-flow-d-opacity", nt = "--_number-flow-d-width", q = "--_number-flow-dx", at = "--_number-flow-d", _t = (() => {
+const yt = String.raw, vt = O && typeof CSS < "u" && CSS.supports && CSS.supports("animation-timing-function", "linear(1,2)"), _t = O && typeof CSS < "u" && CSS.supports && CSS.supports("line-height", "mod(1,1)"), tt = O && matchMedia ? matchMedia("(prefers-reduced-motion: reduce)") : null, q = "--_number-flow-d-opacity", at = "--_number-flow-d-width", J = "--_number-flow-dx", ot = "--_number-flow-d", bt = (() => {
   try {
     return CSS.registerProperty({
-      name: Z,
+      name: q,
       syntax: "<number>",
       inherits: !1,
       initialValue: "0"
     }), CSS.registerProperty({
-      name: q,
+      name: J,
       syntax: "<length>",
       inherits: !0,
       initialValue: "0px"
     }), CSS.registerProperty({
-      name: nt,
+      name: at,
       syntax: "<number>",
       inherits: !1,
       initialValue: "0"
     }), CSS.registerProperty({
-      name: at,
+      name: ot,
       syntax: "<number>",
       inherits: !0,
       initialValue: "0"
@@ -91,87 +90,87 @@ const gt = String.raw, wt = D && typeof CSS < "u" && CSS.supports && CSS.support
   } catch {
     return !1;
   }
-})(), ht = "var(--number-flow-char-height, 1em)", g = "var(--number-flow-mask-height, 0.25em)", C = `calc(${g} / 2)`, tt = "var(--number-flow-mask-width, 0.5em)", S = `calc(${tt} / var(--scale-x))`, O = "#000 0, transparent 71%", et = "span", ot = gt`:host{display:inline-flex;align-items:baseline;direction:ltr;white-space:nowrap;position:relative;line-height:${ht} !important;isolation:isolate;}::slotted(${et}){position:absolute;left:0;top:0;color:transparent !important;will-change:unset !important;z-index:-5;}:host > .number,:host > .section{pointer-events:none;user-select:none;}.number,.number__inner{display:inline-flex;align-items:baseline;transform-origin:left top;}:host([data-will-change]) .number,:host([data-will-change]) .number__inner{will-change:transform;}.number{--scale-x:calc(1 + var(${nt}) / var(--width));transform:translateX(var(${q})) scaleX(var(--scale-x));margin:0 calc(-1 * ${tt});position:relative;z-index:-1;overflow:clip;-webkit-mask-image:linear-gradient( to right,transparent 0,#000 ${S},#000 calc(100% - ${S}),transparent ),linear-gradient( to bottom,transparent 0,#000 ${g},#000 calc(100% - ${g}),transparent 100% ),radial-gradient(at bottom right,${O}),radial-gradient(at bottom left,${O}),radial-gradient(at top left,${O}),radial-gradient(at top right,${O});-webkit-mask-size:100% calc(100% - ${g} * 2),calc(100% - ${S} * 2) 100%,${S} ${g},${S} ${g},${S} ${g},${S} ${g};-webkit-mask-position:center,center,top left,top right,bottom right,bottom left;-webkit-mask-repeat:no-repeat;}.number__inner{padding:0 ${tt};transform:scaleX(calc(1 / var(--scale-x))) translateX(calc(-1 * var(${q})));}.section{display:inline-flex;align-items:baseline;padding-bottom:${C};padding-top:${C};position:relative;isolation:isolate;}.section::after{content:'\200b';display:block;padding:${C} 0;}:host([data-will-change]) .section{will-change:transform;}.section--justify-left{transform-origin:center left;}.section--justify-right{transform-origin:center right;}.section__exiting{position:absolute !important;z-index:-1;}.digit{display:block;position:relative;--c:var(--current) + var(${at});}:host([data-will-change]) .digit,:host([data-will-change]) .digit__num{will-change:transform;}.digit__num{display:block;padding:${C} 0;--offset-raw:mod(10 + var(--n) - mod(var(--c),10),10);--offset:calc(var(--offset-raw) - 10 * round(down,var(--offset-raw) / 5,1));--y:clamp(-100%,var(--offset) * 100%,100%);transform:translateY(var(--y));}.digit__num:not(.is-current){position:absolute;top:0;left:50%;transform:translateX(-50%) translateY(var(--y));}.digit:not(.is-spinning) .digit__num:not(.is-current){display:none;}.symbol{display:inline-flex;align-items:baseline;position:relative;isolation:isolate;padding:${C} 0;}:host([data-will-change]) .symbol{will-change:transform;}.symbol__value{display:block;white-space:pre;}.symbol__exiting{position:absolute;z-index:-1;}.section--justify-left .symbol__exiting{left:0;}.section--justify-right .symbol__exiting{right:0;}.animate-presence{opacity:calc(1 + var(${Z}));}`, vt = D ? HTMLElement : class {
-}, Nt = ({ formatted: a, willChange: t }) => `<${et} style="font-kerning: none; display: inline-block; line-height: ${ht}; padding: ${g} 0;${t ? "will-change: transform" : ""}">${a}</${et}>`, bt = (a, t) => a != null && t == null ? a : a == null && t != null ? t : a != null && t != null ? Math.max(a, t) : null;
-var P, U, k, x, $, y, L, R, j, W, H, E, M, V, X, z, T, I, A, F, _, G, it, v, Y, K;
-const St = yt && wt && _t;
-var b;
+})(), ft = "var(--number-flow-char-height, 1em)", g = "var(--number-flow-mask-height, 0.25em)", U = `calc(${g} / 2)`, et = "var(--number-flow-mask-width, 0.5em)", x = `calc(${et} / var(--scale-x))`, B = "#000 0, transparent 71%", it = "span", lt = yt`:host{display:inline-flex;align-items:baseline;direction:ltr;white-space:nowrap;position:relative;line-height:${ft} !important;isolation:isolate;}::slotted(${it}){position:absolute;left:0;top:0;color:transparent !important;will-change:unset !important;z-index:-5;}:host > .number,:host > .section{pointer-events:none;user-select:none;}.number,.number__inner{display:inline-flex;align-items:baseline;transform-origin:left top;}:host([data-will-change]) .number,:host([data-will-change]) .number__inner{will-change:transform;}.number{--scale-x:calc(1 + var(${at}) / var(--width));transform:translateX(var(${J})) scaleX(var(--scale-x));margin:0 calc(-1 * ${et});position:relative;z-index:-1;overflow:clip;-webkit-mask-image:linear-gradient( to right,transparent 0,#000 ${x},#000 calc(100% - ${x}),transparent ),linear-gradient( to bottom,transparent 0,#000 ${g},#000 calc(100% - ${g}),transparent 100% ),radial-gradient(at bottom right,${B}),radial-gradient(at bottom left,${B}),radial-gradient(at top left,${B}),radial-gradient(at top right,${B});-webkit-mask-size:100% calc(100% - ${g} * 2),calc(100% - ${x} * 2) 100%,${x} ${g},${x} ${g},${x} ${g},${x} ${g};-webkit-mask-position:center,center,top left,top right,bottom right,bottom left;-webkit-mask-repeat:no-repeat;}.number__inner{padding:0 ${et};transform:scaleX(calc(1 / var(--scale-x))) translateX(calc(-1 * var(${J})));}.section{display:inline-flex;align-items:baseline;padding-bottom:${U};padding-top:${U};position:relative;isolation:isolate;}.section::after{content:'\200b';display:block;padding:${U} 0;}:host([data-will-change]) .section{will-change:transform;}.section--justify-left{transform-origin:center left;}.section--justify-right{transform-origin:center right;}.section__exiting{position:absolute !important;z-index:-1;}.digit{display:block;position:relative;--c:var(--current) + var(${ot});}:host([data-will-change]) .digit,:host([data-will-change]) .digit__num{will-change:transform;}.digit__num{display:block;padding:${U} 0;--offset-raw:mod(10 + var(--n) - mod(var(--c),10),10);--offset:calc(var(--offset-raw) - 10 * round(down,var(--offset-raw) / 5,1));--y:clamp(-100%,var(--offset) * 100%,100%);transform:translateY(var(--y));}.digit__num:not(.is-current){position:absolute;top:0;left:50%;transform:translateX(-50%) translateY(var(--y));}.digit:not(.is-spinning) .digit__num:not(.is-current){display:none;}.symbol{display:inline-flex;align-items:baseline;position:relative;isolation:isolate;padding:${U} 0;}:host([data-will-change]) .symbol{will-change:transform;}.symbol__value{display:block;mix-blend-mode:plus-lighter;white-space:pre;}.symbol__exiting{position:absolute;z-index:-1;}.section--justify-left .symbol__exiting{left:0;}.section--justify-right .symbol__exiting{right:0;}.animate-presence{opacity:calc(1 + var(${q}));}`, St = O ? HTMLElement : class {
+}, Wt = ({ valueAsString: a, willChange: t }) => `<${it} style="font-kerning: none; display: inline-block; line-height: ${ft}; padding: ${g} 0;${t ? "will-change: transform" : ""}">${a}</${it}>`, xt = (a, t) => a != null && t == null ? a : a == null && t != null ? t : a != null && t != null ? Math.max(a, t) : null;
+var W, L, k, $, E, v, R, j, T, C, V, M, N, X, z, I, A, G, F, D, _, Y, st, b, K, Z;
+const kt = _t && vt && bt;
+var S;
 (function(a) {
   a[a.UP = 1] = "UP", a[a.DOWN = -1] = "DOWN", a[a.NONE = 0] = "NONE";
-})(b || (b = {}));
-let B;
-class kt extends vt {
+})(S || (S = {}));
+let H;
+class $t extends St {
   constructor() {
-    super(...arguments), this.transformTiming = this.constructor.defaultProps.transformTiming, this.spinTiming = this.constructor.defaultProps.spinTiming, this.opacityTiming = this.constructor.defaultProps.opacityTiming, this.respectMotionPreference = this.constructor.defaultProps.respectMotionPreference, this.trend = this.constructor.defaultProps.trend, this.continuous = this.constructor.defaultProps.continuous, P.set(this, this.constructor.defaultProps.animated), U.set(this, !1), k.set(this, void 0), x.set(this, void 0), $.set(this, void 0), y.set(this, void 0), L.set(this, void 0), R.set(this, s(this, P, "f")), j.set(this, void 0), this.manual = !1, W.set(this, void 0);
+    super(...arguments), this.transformTiming = this.constructor.defaultProps.transformTiming, this.spinTiming = this.constructor.defaultProps.spinTiming, this.opacityTiming = this.constructor.defaultProps.opacityTiming, this.respectMotionPreference = this.constructor.defaultProps.respectMotionPreference, this.trend = this.constructor.defaultProps.trend, this.continuous = this.constructor.defaultProps.continuous, W.set(this, this.constructor.defaultProps.animated), L.set(this, !1), k.set(this, void 0), $.set(this, void 0), E.set(this, void 0), v.set(this, void 0), R.set(this, void 0), j.set(this, s(this, W, "f")), T.set(this, void 0), this.manual = !1, C.set(this, void 0);
   }
   get animated() {
-    return s(this, P, "f");
+    return s(this, W, "f");
   }
   set animated(t) {
     var e;
-    this.animated !== t && (h(this, P, t, "f"), (e = this.shadowRoot) == null || e.getAnimations().forEach((i) => i.finish()));
+    this.animated !== t && (h(this, W, t, "f"), (e = this.shadowRoot) == null || e.getAnimations().forEach((i) => i.finish()));
   }
   get created() {
-    return s(this, U, "f");
+    return s(this, L, "f");
   }
   get computedTrend() {
-    return s(this, y, "f");
+    return s(this, v, "f");
   }
   get startingPlace() {
-    return s(this, L, "f");
+    return s(this, R, "f");
   }
   get computedAnimated() {
-    return s(this, R, "f");
+    return s(this, j, "f");
   }
-  set parts(t) {
+  set data(t) {
     if (t == null)
       return;
-    const { pre: e, integer: i, fraction: n, post: r, value: l } = t;
-    if (s(this, U, "f")) {
-      const o = s(this, j, "f");
-      if (h(this, j, t, "f"), this.trend === !0 ? h(this, y, Math.sign(l - o.value), "f") : this.trend === "increasing" ? h(this, y, b.UP, "f") : this.trend === "decreasing" ? h(this, y, b.DOWN, "f") : h(this, y, b.NONE, "f"), h(this, L, void 0, "f"), s(this, y, "f") !== b.NONE && this.continuous) {
-        const p = o.integer.concat(o.fraction).filter((d) => d.type === "integer" || d.type === "fraction"), u = t.integer.concat(t.fraction).filter((d) => d.type === "integer" || d.type === "fraction"), m = p.find((d) => !u.find((c) => c.place === d.place && c.value === d.value)), N = u.find((d) => !p.find((c) => d.place === c.place && d.value === c.value));
-        h(this, L, bt(m == null ? void 0 : m.place, N == null ? void 0 : N.place), "f");
+    const { pre: e, integer: i, fraction: n, post: l, value: r } = t;
+    if (s(this, L, "f")) {
+      const o = s(this, T, "f");
+      if (h(this, T, t, "f"), this.trend === !0 ? h(this, v, Math.sign(r - o.value), "f") : this.trend === "increasing" ? h(this, v, S.UP, "f") : this.trend === "decreasing" ? h(this, v, S.DOWN, "f") : h(this, v, S.NONE, "f"), h(this, R, void 0, "f"), s(this, v, "f") !== S.NONE && this.continuous) {
+        const m = o.integer.concat(o.fraction).filter((d) => d.type === "integer" || d.type === "fraction"), u = t.integer.concat(t.fraction).filter((d) => d.type === "integer" || d.type === "fraction"), p = m.find((d) => !u.find((y) => y.place === d.place && y.value === d.value)), P = u.find((d) => !m.find((y) => d.place === y.place && d.value === y.value));
+        h(this, R, xt(p == null ? void 0 : p.place, P == null ? void 0 : P.place), "f");
       }
-      h(this, R, St && s(this, P, "f") && (!this.respectMotionPreference || !(Q != null && Q.matches)) && // https://github.com/barvian/number-flow/issues/9
-      ut(this), "f"), this.manual || this.willUpdate(), s(this, k, "f").update(e), s(this, x, "f").update({ integer: i, fraction: n }), s(this, $, "f").update(r), this.manual || this.didUpdate();
+      h(this, j, kt && s(this, W, "f") && (!this.respectMotionPreference || !(tt != null && tt.matches)) && // https://github.com/barvian/number-flow/issues/9
+      gt(this), "f"), this.manual || this.willUpdate(), s(this, k, "f").update(e), s(this, $, "f").update({ integer: i, fraction: n }), s(this, E, "f").update(l), this.manual || this.didUpdate();
     } else {
-      if (h(this, j, t, "f"), this.attachShadow({ mode: "open" }), typeof CSSStyleSheet < "u" && this.shadowRoot.adoptedStyleSheets)
-        B || (B = new CSSStyleSheet(), B.replaceSync(ot)), this.shadowRoot.adoptedStyleSheets = [B];
+      if (h(this, T, t, "f"), this.attachShadow({ mode: "open" }), typeof CSSStyleSheet < "u" && this.shadowRoot.adoptedStyleSheets)
+        H || (H = new CSSStyleSheet(), H.replaceSync(lt)), this.shadowRoot.adoptedStyleSheets = [H];
       else {
         const o = document.createElement("style");
-        o.textContent = ot, this.shadowRoot.appendChild(o);
+        o.textContent = lt, this.shadowRoot.appendChild(o);
       }
-      this.shadowRoot.appendChild(w("slot")), h(this, k, new lt(this, e, {
+      this.shadowRoot.appendChild(w("slot")), h(this, k, new ct(this, e, {
         inert: !0,
         ariaHidden: "true",
         justify: "right"
-      }), "f"), this.shadowRoot.appendChild(s(this, k, "f").el), h(this, x, new xt(this, i, n, {
+      }), "f"), this.shadowRoot.appendChild(s(this, k, "f").el), h(this, $, new Et(this, i, n, {
         inert: !0,
         ariaHidden: "true"
-      }), "f"), this.shadowRoot.appendChild(s(this, x, "f").el), h(this, $, new lt(this, r, {
+      }), "f"), this.shadowRoot.appendChild(s(this, $, "f").el), h(this, E, new ct(this, l, {
         inert: !0,
         ariaHidden: "true",
         justify: "left"
-      }), "f"), this.shadowRoot.appendChild(s(this, $, "f").el);
+      }), "f"), this.shadowRoot.appendChild(s(this, E, "f").el);
     }
-    h(this, U, !0, "f");
+    h(this, L, !0, "f");
   }
   willUpdate() {
-    s(this, k, "f").willUpdate(), s(this, x, "f").willUpdate(), s(this, $, "f").willUpdate();
+    s(this, k, "f").willUpdate(), s(this, $, "f").willUpdate(), s(this, E, "f").willUpdate();
   }
   didUpdate() {
-    if (!s(this, R, "f"))
+    if (!s(this, j, "f"))
       return;
-    s(this, W, "f") ? s(this, W, "f").abort() : this.dispatchEvent(new Event("animationsstart")), s(this, k, "f").didUpdate(), s(this, x, "f").didUpdate(), s(this, $, "f").didUpdate();
+    s(this, C, "f") ? s(this, C, "f").abort() : this.dispatchEvent(new Event("animationsstart")), s(this, k, "f").didUpdate(), s(this, $, "f").didUpdate(), s(this, E, "f").didUpdate();
     const t = new AbortController();
     Promise.all(this.shadowRoot.getAnimations().map((e) => e.finished)).then(() => {
-      t.signal.aborted || (this.dispatchEvent(new Event("animationsfinish")), h(this, W, void 0, "f"));
-    }), h(this, W, t, "f");
+      t.signal.aborted || (this.dispatchEvent(new Event("animationsfinish")), h(this, C, void 0, "f"));
+    }), h(this, C, t, "f");
   }
 }
-P = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), x = /* @__PURE__ */ new WeakMap(), $ = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), L = /* @__PURE__ */ new WeakMap(), R = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new WeakMap();
-kt.defaultProps = {
+W = /* @__PURE__ */ new WeakMap(), L = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), $ = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), v = /* @__PURE__ */ new WeakMap(), R = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new WeakMap(), C = /* @__PURE__ */ new WeakMap();
+$t.defaultProps = {
   transformTiming: {
     duration: 900,
     // Make sure to keep this minified:
@@ -184,55 +183,55 @@ kt.defaultProps = {
   continuous: !1,
   respectMotionPreference: !0
 };
-class xt {
-  constructor(t, e, i, { className: n, ...r } = {}) {
-    this.flow = t, H.set(this, void 0), E.set(this, void 0), M.set(this, void 0), V.set(this, void 0), X.set(this, void 0), h(this, E, new rt(t, e, {
+class Et {
+  constructor(t, e, i, { className: n, ...l } = {}) {
+    this.flow = t, V.set(this, void 0), M.set(this, void 0), N.set(this, void 0), X.set(this, void 0), z.set(this, void 0), h(this, M, new ht(t, e, {
       justify: "right"
-    }), "f"), h(this, M, new rt(t, i, {
+    }), "f"), h(this, N, new ht(t, i, {
       justify: "left"
-    }), "f"), h(this, H, w("span", {
+    }), "f"), h(this, V, w("span", {
       className: "number__inner"
-    }, [s(this, E, "f").el, s(this, M, "f").el]), "f"), this.el = w("span", {
-      ...r,
+    }, [s(this, M, "f").el, s(this, N, "f").el]), "f"), this.el = w("span", {
+      ...l,
       className: `number ${n ?? ""}`
-    }, [s(this, H, "f")]);
+    }, [s(this, V, "f")]);
   }
   willUpdate() {
-    h(this, V, this.el.offsetWidth, "f"), h(this, X, this.el.getBoundingClientRect().left, "f"), s(this, E, "f").willUpdate(), s(this, M, "f").willUpdate();
+    h(this, X, this.el.offsetWidth, "f"), h(this, z, this.el.getBoundingClientRect().left, "f"), s(this, M, "f").willUpdate(), s(this, N, "f").willUpdate();
   }
   update({ integer: t, fraction: e }) {
-    s(this, E, "f").update(t), s(this, M, "f").update(e);
+    s(this, M, "f").update(t), s(this, N, "f").update(e);
   }
   didUpdate() {
     const t = this.el.getBoundingClientRect();
-    s(this, E, "f").didUpdate(), s(this, M, "f").didUpdate();
-    const e = s(this, X, "f") - t.left, i = this.el.offsetWidth, n = s(this, V, "f") - i;
+    s(this, M, "f").didUpdate(), s(this, N, "f").didUpdate();
+    const e = s(this, z, "f") - t.left, i = this.el.offsetWidth, n = s(this, X, "f") - i;
     this.el.style.setProperty("--width", String(i)), this.el.animate({
-      [q]: [`${e}px`, "0px"],
-      [nt]: [n, 0]
+      [J]: [`${e}px`, "0px"],
+      [at]: [n, 0]
     }, {
       ...this.flow.transformTiming,
       composite: "accumulate"
     });
   }
 }
-H = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), V = /* @__PURE__ */ new WeakMap(), X = /* @__PURE__ */ new WeakMap();
-class ct {
-  constructor(t, e, { justify: i, className: n, ...r }, l) {
-    this.flow = t, this.children = /* @__PURE__ */ new Map(), this.onCharRemove = (p) => () => {
-      this.children.delete(p);
-    }, z.set(this, void 0), this.justify = i;
-    const o = e.map((p) => this.addChar(p).el);
+V = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), N = /* @__PURE__ */ new WeakMap(), X = /* @__PURE__ */ new WeakMap(), z = /* @__PURE__ */ new WeakMap();
+class dt {
+  constructor(t, e, { justify: i, className: n, ...l }, r) {
+    this.flow = t, this.children = /* @__PURE__ */ new Map(), this.onCharRemove = (m) => () => {
+      this.children.delete(m);
+    }, I.set(this, void 0), this.justify = i;
+    const o = e.map((m) => this.addChar(m).el);
     this.el = w("span", {
-      ...r,
+      ...l,
       className: `section section--justify-${i} ${n ?? ""}`
-    }, l ? l(o) : o);
+    }, r ? r(o) : o);
   }
   addChar(t, { startDigitsAtZero: e = !1, ...i } = {}) {
-    const n = t.type === "integer" || t.type === "fraction" ? new dt(this, t.type, e ? 0 : t.value, t.place, {
+    const n = t.type === "integer" || t.type === "fraction" ? new ut(this, t.type, e ? 0 : t.value, t.place, {
       ...i,
       onRemove: this.onCharRemove(t.key)
-    }) : new $t(this, t.type, t.value, {
+    }) : new Mt(this, t.type, t.value, {
       ...i,
       onRemove: this.onCharRemove(t.key)
     });
@@ -243,37 +242,37 @@ class ct {
   }
   pop(t) {
     t.forEach((e) => {
-      e.el.style[this.justify] = `${pt(e.el, this.justify)}px`;
+      e.el.style[this.justify] = `${mt(e.el, this.justify)}px`;
     }), t.forEach((e) => {
       e.el.classList.add("section__exiting"), e.present = !1;
     });
   }
   addNewAndUpdateExisting(t) {
-    const e = /* @__PURE__ */ new Map(), i = /* @__PURE__ */ new Map(), n = this.justify === "left", r = n ? "prepend" : "append";
-    if (mt(t, (l) => {
+    const e = /* @__PURE__ */ new Map(), i = /* @__PURE__ */ new Map(), n = this.justify === "left", l = n ? "prepend" : "append";
+    if (wt(t, (r) => {
       let o;
-      this.children.has(l.key) ? (o = this.children.get(l.key), i.set(l, o), this.unpop(o), o.present = !0) : (o = this.addChar(l, { startDigitsAtZero: !0, animateIn: !0 }), e.set(l, o)), this.el[r](o.el);
+      this.children.has(r.key) ? (o = this.children.get(r.key), i.set(r, o), this.unpop(o), o.present = !0) : (o = this.addChar(r, { startDigitsAtZero: !0, animateIn: !0 }), e.set(r, o)), this.el[l](o.el);
     }, { reverse: n }), this.flow.computedAnimated) {
-      const l = this.el.getBoundingClientRect();
+      const r = this.el.getBoundingClientRect();
       e.forEach((o) => {
-        o.willUpdate(l);
+        o.willUpdate(r);
       });
     }
-    e.forEach((l, o) => {
-      l.update(o.value);
-    }), i.forEach((l, o) => {
-      l.update(o.value);
+    e.forEach((r, o) => {
+      r.update(o.value);
+    }), i.forEach((r, o) => {
+      r.update(o.value);
     });
   }
   willUpdate() {
     const t = this.el.getBoundingClientRect();
-    h(this, z, t[this.justify], "f"), this.children.forEach((e) => e.willUpdate(t));
+    h(this, I, t[this.justify], "f"), this.children.forEach((e) => e.willUpdate(t));
   }
   didUpdate() {
     const t = this.el.getBoundingClientRect();
     this.children.forEach((n) => n.didUpdate(t));
-    const e = t[this.justify], i = s(this, z, "f") - e;
-    this.el.animate({
+    const e = t[this.justify], i = s(this, I, "f") - e;
+    i && this.children.size && this.el.animate({
       transform: [`translateX(${i}px)`, "none"]
     }, {
       ...this.flow.transformTiming,
@@ -281,142 +280,142 @@ class ct {
     });
   }
 }
-z = /* @__PURE__ */ new WeakMap();
-class rt extends ct {
+I = /* @__PURE__ */ new WeakMap();
+class ht extends dt {
   update(t) {
     const e = /* @__PURE__ */ new Map();
     this.children.forEach((i, n) => {
-      t.find((r) => r.key === n) || e.set(n, i), this.unpop(i);
+      t.find((l) => l.key === n) || e.set(n, i), this.unpop(i);
     }), this.addNewAndUpdateExisting(t), e.forEach((i) => {
-      i instanceof dt && i.update(0);
+      i instanceof ut && i.update(0);
     }), this.pop(e);
   }
 }
-class lt extends ct {
+class ct extends dt {
   update(t) {
     const e = /* @__PURE__ */ new Map();
     this.children.forEach((i, n) => {
-      t.find((r) => r.key === n) || e.set(n, i);
+      t.find((l) => l.key === n) || e.set(n, i);
     }), this.pop(e), this.addNewAndUpdateExisting(t);
   }
 }
-class st {
+class nt {
   constructor(t, e, { onRemove: i, animateIn: n = !1 } = {}) {
-    this.flow = t, this.el = e, T.set(this, !0), I.set(this, void 0), A.set(this, () => {
-      var r;
-      this.el.remove(), (r = s(this, I, "f")) == null || r.call(this);
+    this.flow = t, this.el = e, A.set(this, !0), G.set(this, void 0), F.set(this, () => {
+      var l;
+      this.el.remove(), (l = s(this, G, "f")) == null || l.call(this);
     }), this.el.classList.add("animate-presence"), this.flow.computedAnimated && n && this.el.animate({
-      [Z]: [-0.9999, 0]
+      [q]: [-0.9999, 0]
     }, {
       ...this.flow.opacityTiming,
       composite: "accumulate"
-    }), h(this, I, i, "f");
+    }), h(this, G, i, "f");
   }
   get present() {
-    return s(this, T, "f");
+    return s(this, A, "f");
   }
   set present(t) {
-    if (s(this, T, "f") !== t) {
-      if (h(this, T, t, "f"), !this.flow.computedAnimated) {
-        t || s(this, A, "f").call(this);
+    if (s(this, A, "f") !== t) {
+      if (h(this, A, t, "f"), !this.flow.computedAnimated) {
+        t || s(this, F, "f").call(this);
         return;
       }
       this.el.style.setProperty("--_number-flow-d-opacity", t ? "0" : "-.999"), this.el.animate({
-        [Z]: t ? [-0.9999, 0] : [0.999, 0]
+        [q]: t ? [-0.9999, 0] : [0.999, 0]
       }, {
         ...this.flow.opacityTiming,
         composite: "accumulate"
-      }), t ? this.flow.removeEventListener("animationsfinish", s(this, A, "f")) : this.flow.addEventListener("animationsfinish", s(this, A, "f"), {
+      }), t ? this.flow.removeEventListener("animationsfinish", s(this, F, "f")) : this.flow.addEventListener("animationsfinish", s(this, F, "f"), {
         once: !0
       });
     }
   }
 }
-T = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap();
-class ft extends st {
+A = /* @__PURE__ */ new WeakMap(), G = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap();
+class pt extends nt {
   constructor(t, e, i, n) {
     super(t.flow, i, n), this.section = t, this.value = e, this.el = i;
   }
 }
-class dt extends ft {
-  constructor(t, e, i, n, r) {
-    const l = Array.from({ length: 10 }).map((p, u) => {
-      const m = w("span", { className: `digit__num${u === i ? " is-current" : ""}` }, [document.createTextNode(String(u))]);
-      return m.style.setProperty("--n", String(u)), m;
+class ut extends pt {
+  constructor(t, e, i, n, l) {
+    const r = Array.from({ length: 10 }).map((m, u) => {
+      const p = w("span", { className: `digit__num${u === i ? " is-current" : ""}` }, [document.createTextNode(String(u))]);
+      return p.style.setProperty("--n", String(u)), p;
     }), o = w("span", {
       className: "digit"
-    }, l);
-    o.style.setProperty("--current", String(i)), super(t, i, o, r), this.place = n, F.set(this, void 0), _.set(this, void 0), G.set(this, void 0), it.set(this, () => {
+    }, r);
+    o.style.setProperty("--current", String(i)), super(t, i, o, l), this.place = n, D.set(this, void 0), _.set(this, void 0), Y.set(this, void 0), st.set(this, () => {
       this.el.classList.remove("is-spinning");
-    }), h(this, F, l, "f");
+    }), h(this, D, r, "f");
   }
   willUpdate(t) {
     const e = this.el.getBoundingClientRect();
     h(this, _, this.value, "f");
     const i = e[this.section.justify] - t[this.section.justify], n = e.width / 2;
-    h(this, G, this.section.justify === "left" ? i + n : i - n, "f");
+    h(this, Y, this.section.justify === "left" ? i + n : i - n, "f");
   }
   update(t) {
     var e, i;
-    (e = s(this, F, "f")[this.value]) == null || e.classList.remove("is-current"), this.el.style.setProperty("--current", String(t)), (i = s(this, F, "f")[t]) == null || i.classList.add("is-current"), this.value = t;
+    (e = s(this, D, "f")[this.value]) == null || e.classList.remove("is-current"), this.el.style.setProperty("--current", String(t)), (i = s(this, D, "f")[t]) == null || i.classList.add("is-current"), this.value = t;
   }
   didUpdate(t) {
-    const e = this.el.getBoundingClientRect(), i = e[this.section.justify] - t[this.section.justify], n = e.width / 2, r = this.section.justify === "left" ? i + n : i - n;
-    this.el.animate({
-      transform: [`translateX(${s(this, G, "f") - r}px)`, "none"]
+    const e = this.el.getBoundingClientRect(), i = e[this.section.justify] - t[this.section.justify], n = e.width / 2, l = this.section.justify === "left" ? i + n : i - n, r = s(this, Y, "f") - l;
+    r && this.el.animate({
+      transform: [`translateX(${r}px)`, "none"]
     }, {
       ...this.flow.transformTiming,
       composite: "accumulate"
     });
-    const l = this.diff;
-    l && (this.el.classList.add("is-spinning"), this.el.animate({
-      [at]: [-l, 0]
+    const o = this.diff;
+    o && (this.el.classList.add("is-spinning"), this.el.animate({
+      [ot]: [-o, 0]
     }, {
       ...this.flow.spinTiming ?? this.flow.transformTiming,
       composite: "accumulate"
-    }), this.flow.addEventListener("animationsfinish", s(this, it, "f"), { once: !0 }));
+    }), this.flow.addEventListener("animationsfinish", s(this, st, "f"), { once: !0 }));
   }
   get diff() {
     let t = this.flow.computedTrend;
     const e = this.value - s(this, _, "f");
-    return !e && this.flow.startingPlace != null && this.flow.startingPlace >= this.place ? 10 * t : (t || (t = Math.sign(e)), t === b.DOWN && this.value > s(this, _, "f") ? this.value - 10 - s(this, _, "f") : t === b.UP && this.value < s(this, _, "f") ? 10 - s(this, _, "f") + this.value : e);
+    return !e && this.flow.startingPlace != null && this.flow.startingPlace >= this.place ? 10 * t : (t || (t = Math.sign(e)), t === S.DOWN && this.value > s(this, _, "f") ? this.value - 10 - s(this, _, "f") : t === S.UP && this.value < s(this, _, "f") ? 10 - s(this, _, "f") + this.value : e);
   }
 }
-F = /* @__PURE__ */ new WeakMap(), _ = /* @__PURE__ */ new WeakMap(), G = /* @__PURE__ */ new WeakMap(), it = /* @__PURE__ */ new WeakMap();
-class $t extends ft {
+D = /* @__PURE__ */ new WeakMap(), _ = /* @__PURE__ */ new WeakMap(), Y = /* @__PURE__ */ new WeakMap(), st = /* @__PURE__ */ new WeakMap();
+class Mt extends pt {
   constructor(t, e, i, n) {
-    const r = w("span", {
+    const l = w("span", {
       className: "symbol__value",
       textContent: i
     });
     super(t, i, w("span", {
       className: "symbol"
-    }, [r]), n), this.type = e, v.set(this, /* @__PURE__ */ new Map()), Y.set(this, void 0), K.set(this, (l) => () => {
-      s(this, v, "f").delete(l);
-    }), s(this, v, "f").set(i, new st(this.flow, r, {
-      onRemove: s(this, K, "f").call(this, i)
+    }, [l]), n), this.type = e, b.set(this, /* @__PURE__ */ new Map()), K.set(this, void 0), Z.set(this, (r) => () => {
+      s(this, b, "f").delete(r);
+    }), s(this, b, "f").set(i, new nt(this.flow, l, {
+      onRemove: s(this, Z, "f").call(this, i)
     }));
   }
   willUpdate(t) {
     if (this.type === "decimal")
       return;
     const e = this.el.getBoundingClientRect();
-    h(this, Y, e[this.section.justify] - t[this.section.justify], "f");
+    h(this, K, e[this.section.justify] - t[this.section.justify], "f");
   }
   update(t) {
     if (this.value !== t) {
-      const e = s(this, v, "f").get(this.value);
-      if (e.present = !1, e.el.classList.add("symbol__exiting"), s(this, v, "f").has(t)) {
-        const i = s(this, v, "f").get(t);
+      const e = s(this, b, "f").get(this.value);
+      if (e.present = !1, e.el.classList.add("symbol__exiting"), s(this, b, "f").has(t)) {
+        const i = s(this, b, "f").get(t);
         i.present = !0, i.el.classList.remove("symbol__exiting");
       } else {
         const i = w("span", {
           className: "symbol__value",
           textContent: t
         });
-        this.el.appendChild(i), s(this, v, "f").set(t, new st(this.flow, i, {
+        this.el.appendChild(i), s(this, b, "f").set(t, new nt(this.flow, i, {
           animateIn: !0,
-          onRemove: s(this, K, "f").call(this, t)
+          onRemove: s(this, Z, "f").call(this, t)
         }));
       }
     }
@@ -425,18 +424,18 @@ class $t extends ft {
   didUpdate(t) {
     if (this.type === "decimal")
       return;
-    const i = this.el.getBoundingClientRect()[this.section.justify] - t[this.section.justify];
-    this.el.animate({
-      transform: [`translateX(${s(this, Y, "f") - i}px)`, "none"]
+    const i = this.el.getBoundingClientRect()[this.section.justify] - t[this.section.justify], n = s(this, K, "f") - i;
+    n && this.el.animate({
+      transform: [`translateX(${n}px)`, "none"]
     }, { ...this.flow.transformTiming, composite: "accumulate" });
   }
 }
-v = /* @__PURE__ */ new WeakMap(), Y = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap();
+b = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), Z = /* @__PURE__ */ new WeakMap();
 export {
-  kt as NumberFlowLite,
-  St as canAnimate,
-  Et as define,
-  Mt as partitionParts,
-  Q as prefersReducedMotion,
-  Nt as render
+  $t as NumberFlowLite,
+  kt as canAnimate,
+  Nt as define,
+  Pt as formatToData,
+  tt as prefersReducedMotion,
+  Wt as render
 };

package/dist/ssr.d.ts

@@ -1,10 +1,9 @@
-import type { PartitionedParts } from './formatter';
+import type { Data } from './formatter';
 export declare const ServerSafeHTMLElement: {
     new (): HTMLElement;
     prototype: HTMLElement;
 };
-export type RenderProps = {
-    formatted: PartitionedParts['formatted'];
+export type RenderProps = Pick<Data, 'valueAsString'> & {
     willChange?: boolean;
 };
-export declare const render: ({ formatted, willChange }: RenderProps) => string;
+export declare const render: ({ valueAsString, willChange }: RenderProps) => string;

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.3.7",
+  "version": "0.3.8",
   "author": {
     "name": "Maxwell Barvian",
     "email": "max@barvian.me",