number-flow 0.3.0 → 0.3.2

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Maxwell Barvian
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/formatter.d.ts

@@ -12,12 +12,13 @@ type SymbolPart = {
     type: Exclude<NumberPartType, 'integer' | 'fraction'>;
     value: string;
 };
-export type NumberPart = DigitPart | SymbolPart;
 export type NumberPartKey = string;
 type KeyedPart = {
     key: NumberPartKey;
 };
-export type KeyedDigitPart = DigitPart & KeyedPart;
+export type KeyedDigitPart = DigitPart & KeyedPart & {
+    place: number;
+};
 export type KeyedSymbolPart = SymbolPart & KeyedPart;
 export type KeyedNumberPart = KeyedDigitPart | KeyedSymbolPart;
 export type Format = Omit<Intl.NumberFormatOptions, 'notation'> & {

package/dist/index.d.ts

@@ -21,8 +21,10 @@ export declare class NumberFlowLite extends ServerSafeHTMLElement {
     manual: boolean;
     respectMotionPreference: boolean;
     trend: RawTrend;
-    getComputedTrend(): Trend | undefined;
-    set parts(newVal: PartitionedParts | undefined);
+    continuous: boolean;
+    get startingPlace(): number | null | undefined;
+    get computedTrend(): Trend | undefined;
+    set parts(parts: PartitionedParts | undefined);
     willUpdate(): void;
     didUpdate(): void;
     get animated(): boolean;

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G=require("esm-env");function n(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,s){if(i==="m")throw new TypeError("Private method is not writable");if(i==="a"&&!s)throw new TypeError("Private accessor was defined without a setter");if(typeof t=="function"?a!==t||!s:!t.has(a))throw new TypeError("Cannot write private member to an object whose class did not declare it");return i==="a"?s.call(a,e):s?s.value=e:t.set(a,e),e}const g=(a,t,e)=>{const i=document.createElement(a),[s,o]=Array.isArray(t)?[void 0,t]:[t,e];return s&&Object.assign(i,s),o==null||o.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};function gt(a,t,{reverse:e=!1}={}){const i=a.length;for(let s=e?i-1:0;e?s>=0:s<i;e?s--:s++)t(a[s],s)}function wt(a,t){const e=t.formatToParts(a),i=[],s=[],o=[],r=[],l={},f=c=>(l[c]||(l[c]=0),`${c}:${l[c]++}`);let $="",tt=!1,et=!1;for(const c of e){$+=c.value;const d=c.type==="minusSign"||c.type==="plusSign"?"sign":c.type;d==="integer"?(tt=!0,s.push(...c.value.split("").map(K=>({type:d,value:parseInt(K)})))):d==="group"?s.push({type:d,value:c.value}):d==="decimal"?(et=!0,o.push({type:d,value:c.value,key:f(d)})):d==="fraction"?o.push(...c.value.split("").map(K=>({type:d,value:parseInt(K),key:f(d)}))):(tt||et?r:i).push({type:d,value:c.value,key:f(d)})}const it=[];for(let c=s.length-1;c>=0;c--)it.unshift({...s[c],key:f(s[c].type)});return{pre:i,integer:it,fraction:o,post:r,formatted:$,value:typeof a=="string"?parseFloat(a):a}}const yt=G.BROWSER?HTMLElement:class{},_t=String.raw,vt=G.BROWSER&&typeof CSS<"u"&&CSS.supports("line-height","mod(1,1)"),T=G.BROWSER?matchMedia("(prefers-reduced-motion: reduce)"):null,z="--_number-flow-d-opacity",J="--_number-flow-d-width",I="--_number-flow-dx",Q="--_number-flow-d",bt=(()=>{try{return CSS.registerProperty({name:z,syntax:"<number>",inherits:!1,initialValue:"0"}),CSS.registerProperty({name:I,syntax:"<length>",inherits:!0,initialValue:"0px"}),CSS.registerProperty({name:J,syntax:"<number>",inherits:!1,initialValue:"0"}),CSS.registerProperty({name:Q,syntax:"<number>",inherits:!0,initialValue:"0"}),!0}catch{return!1}})(),ot="var(--number-flow-char-height, 1em)",m="var(--number-flow-mask-height, 0.25em)",N=`calc(${m} / 2)`,Y="var(--number-flow-mask-width, 0.5em)",y=`calc(${Y} / var(--scale-x))`,P="#000 0, transparent 71%",rt="span",St=({willChange:a})=>({fontKerning:"none",display:"inline-block",lineHeight:ot,padding:`${m} 0`,willChange:a?"transform":void 0}),st=_t`:host{display:inline-flex;align-items:baseline;direction:ltr;white-space:nowrap;position:relative;line-height:${ot} !important;isolation:isolate;}::slotted(${rt}){position:absolute;left:0;top:0;color:transparent !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(${J}) / var(--width));transform:translateX(var(${I})) scaleX(var(--scale-x));margin:0 calc(-1 * ${Y});position:relative;z-index:-1;overflow:clip;-webkit-mask-image:linear-gradient( to right,transparent 0,#000 ${y},#000 calc(100% - ${y}),transparent ),linear-gradient( to bottom,transparent 0,#000 ${m},#000 calc(100% - ${m}),transparent 100% ),radial-gradient(at bottom right,${P}),radial-gradient(at bottom left,${P}),radial-gradient(at top left,${P}),radial-gradient(at top right,${P});-webkit-mask-size:100% calc(100% - ${m} * 2),calc(100% - ${y} * 2) 100%,${y} ${m},${y} ${m},${y} ${m},${y} ${m};-webkit-mask-position:center,center,top left,top right,bottom right,bottom left;-webkit-mask-repeat:no-repeat;}.number__inner{padding:0 ${Y};transform:scaleX(calc(1 / var(--scale-x))) translateX(calc(-1 * var(${I})));}.section{display:inline-flex;align-items:baseline;padding-bottom:${N};padding-top:${N};position:relative;isolation:isolate;}.section::after{content:'\200b';display:block;padding:${N} 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(${Q});}:host([data-will-change]) .digit,:host([data-will-change]) .digit__num{will-change:transform;}.digit__num{display:block;padding:${N} 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:${N} 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}));}`;var j,L,_,v,b,S,W,x,A,E,k,O,F,D,C,B,M,R,u,H,q,w,V,X;const lt=vt&&bt;var p;(function(a){a[a.UP=1]="UP",a[a.DOWN=-1]="DOWN",a[a.NONE=0]="NONE"})(p||(p={}));const ht=(a,t)=>{if(t!=null)return a>t?p.UP:a<t?p.DOWN:p.NONE},ct={duration:450,easing:"ease-out"},ft={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)"};let U;class Et extends yt{constructor(){super(...arguments),this.transformTiming=ft,this.opacityTiming=ct,j.set(this,!0),this.manual=!1,this.respectMotionPreference=!0,L.set(this,!1),_.set(this,void 0),v.set(this,void 0),b.set(this,void 0),this.trend=!0,S.set(this,void 0),W.set(this,void 0),x.set(this,void 0)}static define(){G.BROWSER&&customElements.define("number-flow",this)}getComputedTrend(){return n(this,S,"f")}set parts(t){if(t==null)return;const{pre:e,integer:i,fraction:s,post:o,value:r}=t;if(n(this,L,"f")){const l=n(this,W,"f");h(this,W,r,"f"),this.trend===!0?h(this,S,ht(r,l),"f"):this.trend==="increasing"?h(this,S,p.UP,"f"):this.trend==="decreasing"?h(this,S,p.DOWN,"f"):h(this,S,p.NONE,"f"),this.manual||this.willUpdate(),n(this,_,"f").update(e),n(this,v,"f").update({integer:i,fraction:s}),n(this,b,"f").update(o),this.manual||this.didUpdate()}else{if(h(this,W,r,"f"),this.attachShadow({mode:"open"}),typeof CSSStyleSheet<"u"&&this.shadowRoot.adoptedStyleSheets)U||(U=new CSSStyleSheet,U.replaceSync(st)),this.shadowRoot.adoptedStyleSheets=[U];else{const l=document.createElement("style");l.textContent=st,this.shadowRoot.appendChild(l)}this.shadowRoot.appendChild(g("slot")),h(this,_,new at(this,e,{inert:!0,ariaHidden:"true",justify:"right"}),"f"),this.shadowRoot.appendChild(n(this,_,"f").el),h(this,v,new kt(this,i,s,{inert:!0,ariaHidden:"true"}),"f"),this.shadowRoot.appendChild(n(this,v,"f").el),h(this,b,new at(this,o,{inert:!0,ariaHidden:"true",justify:"left"}),"f"),this.shadowRoot.appendChild(n(this,b,"f").el)}h(this,L,!0,"f")}willUpdate(){this.animated&&(n(this,_,"f").willUpdate(),n(this,v,"f").willUpdate(),n(this,b,"f").willUpdate())}didUpdate(){if(!this.animated)return;n(this,x,"f")?n(this,x,"f").abort():this.dispatchEvent(new Event("animationsstart")),n(this,_,"f").didUpdate(),n(this,v,"f").didUpdate(),n(this,b,"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,x,void 0,"f"))}),h(this,x,t,"f")}get animated(){return lt&&n(this,j,"f")&&(!this.respectMotionPreference||!(T!=null&&T.matches))}set animated(t){var e;this.animated!==t&&(h(this,j,t,"f"),(e=this.shadowRoot)==null||e.getAnimations().forEach(i=>i.finish()))}}j=new WeakMap,L=new WeakMap,_=new WeakMap,v=new WeakMap,b=new WeakMap,S=new WeakMap,W=new WeakMap,x=new WeakMap;class kt{constructor(t,e,i,{className:s,...o}={}){this.flow=t,A.set(this,void 0),E.set(this,void 0),k.set(this,void 0),O.set(this,void 0),F.set(this,void 0),h(this,E,new nt(t,e,{justify:"right"}),"f"),h(this,k,new nt(t,i,{justify:"left"}),"f"),h(this,A,g("span",{className:"number__inner"},[n(this,E,"f").el,n(this,k,"f").el]),"f"),this.el=g("span",{...o,className:`number ${s??""}`},[n(this,A,"f")])}willUpdate(){h(this,O,this.el.offsetWidth,"f"),h(this,F,this.el.getBoundingClientRect().left,"f"),n(this,E,"f").willUpdate(),n(this,k,"f").willUpdate()}update({integer:t,fraction:e}){n(this,E,"f").update(t),n(this,k,"f").update(e)}didUpdate(){const t=this.el.getBoundingClientRect();n(this,E,"f").didUpdate(),n(this,k,"f").didUpdate();const e=n(this,F,"f")-t.left,i=this.el.offsetWidth,s=n(this,O,"f")-i;this.el.style.setProperty("--width",String(i)),this.el.animate({[I]:[`${e}px`,"0px"],[J]:[s,0]},{...this.flow.transformTiming,composite:"accumulate"})}}A=new WeakMap,E=new WeakMap,k=new WeakMap,O=new WeakMap,F=new WeakMap;class dt{constructor(t,e,{justify:i,className:s,...o},r){this.flow=t,this.children=new Map,this.onCharRemove=f=>()=>{this.children.delete(f)},D.set(this,void 0),this.justify=i;const l=e.map(f=>this.addChar(f).el);this.el=g("span",{...o,className:`section section--justify-${i} ${s??""}`},r?r(l):l)}addChar(t,{startDigitsAtZero:e=!1,...i}={}){const s=t.type==="integer"||t.type==="fraction"?new ut(this,t.type,e?0:t.value,{...i,onRemove:this.onCharRemove(t.key)}):new xt(this,t.type,t.value,{...i,onRemove:this.onCharRemove(t.key)});return this.children.set(t.key,s),s}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,s=this.justify==="left",o=s?"prepend":"append";if(gt(t,r=>{let l;this.children.has(r.key)?(l=this.children.get(r.key),i.set(r,l),this.unpop(l),l.present=!0):(l=this.addChar(r,{startDigitsAtZero:!0,animateIn:!0}),e.set(r,l)),this.el[o](l.el)},{reverse:s}),this.flow.animated){const r=this.el.getBoundingClientRect();e.forEach(l=>{l.willUpdate(r)})}e.forEach((r,l)=>{r.update(l.value)}),i.forEach((r,l)=>{r.update(l.value)})}willUpdate(){const t=this.el.getBoundingClientRect();h(this,D,t[this.justify],"f"),this.children.forEach(e=>e.willUpdate(t))}didUpdate(){const t=this.el.getBoundingClientRect();this.children.forEach(s=>s.didUpdate(t));const e=t[this.justify],i=n(this,D,"f")-e;this.el.animate({transform:[`translateX(${i}px)`,"none"]},{...this.flow.transformTiming,composite:"accumulate"})}}D=new WeakMap;class nt extends dt{update(t){const e=new Map;this.children.forEach((i,s)=>{t.find(o=>o.key===s)||e.set(s,i),this.unpop(i)}),this.addNewAndUpdateExisting(t),e.forEach(i=>{i instanceof ut&&i.update(0)}),this.pop(e)}}class at extends dt{update(t){const e=new Map;this.children.forEach((i,s)=>{t.find(o=>o.key===s)||e.set(s,i)}),this.pop(e),this.addNewAndUpdateExisting(t)}}class Z{constructor(t,e,{onRemove:i,animateIn:s=!1}={}){this.flow=t,this.el=e,C.set(this,!0),B.set(this,void 0),M.set(this,()=>{var o;this.el.remove(),(o=n(this,B,"f"))==null||o.call(this)}),this.el.classList.add("animate-presence"),this.flow.animated&&s&&this.el.animate({[z]:[-.9999,0]},{...this.flow.opacityTiming,composite:"accumulate"}),h(this,B,i,"f")}get present(){return n(this,C,"f")}set present(t){if(n(this,C,"f")!==t){if(h(this,C,t,"f"),!this.flow.animated){t||n(this,M,"f").call(this);return}this.el.style.setProperty("--_number-flow-d-opacity",t?"0":"-.999"),this.el.animate({[z]:t?[-.9999,0]:[.999,0]},{...this.flow.opacityTiming,composite:"accumulate"}),t?this.flow.removeEventListener("animationsfinish",n(this,M,"f")):this.flow.addEventListener("animationsfinish",n(this,M,"f"),{once:!0})}}}C=new WeakMap,B=new WeakMap,M=new WeakMap;class pt extends Z{constructor(t,e,i,s){super(t.flow,i,s),this.section=t,this.value=e,this.el=i}}class ut extends pt{constructor(t,e,i,s){const o=Array.from({length:10}).map((l,f)=>{const $=g("span",{className:`digit__num${f===i?" is-current":""}`},[document.createTextNode(String(f))]);return $.style.setProperty("--n",String(f)),$}),r=g("span",{className:"digit"},o);r.style.setProperty("--current",String(i)),super(t,i,r,s),R.set(this,void 0),u.set(this,void 0),H.set(this,void 0),q.set(this,()=>{this.el.classList.remove("is-spinning")}),h(this,R,o,"f")}get trend(){const t=this.flow.getComputedTrend();return t===p.NONE?ht(this.value,n(this,u,"f")):t}willUpdate(t){const e=this.el.getBoundingClientRect();h(this,u,this.value,"f");const i=e[this.section.justify]-t[this.section.justify],s=e.width/2;h(this,H,this.section.justify==="left"?i+s:i-s,"f")}update(t){var e,i;(e=n(this,R,"f")[this.value])==null||e.classList.remove("is-current"),this.el.style.setProperty("--current",String(t)),(i=n(this,R,"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],s=e.width/2,o=this.section.justify==="left"?i+s:i-s;if(this.el.animate({transform:[`translateX(${n(this,H,"f")-o}px)`,"none"]},{...this.flow.transformTiming,composite:"accumulate"}),this.value===n(this,u,"f"))return;const r=this.trend;let l=this.value-n(this,u,"f");r===p.DOWN&&this.value>n(this,u,"f")&&(l=this.value-10-n(this,u,"f")),r===p.UP&&this.value<n(this,u,"f")&&(l=10-n(this,u,"f")+this.value),this.el.classList.add("is-spinning"),this.el.animate({[Q]:[-l,0]},{...this.flow.spinTiming??this.flow.transformTiming,composite:"accumulate"}),this.flow.addEventListener("animationsfinish",n(this,q,"f"),{once:!0})}}R=new WeakMap,u=new WeakMap,H=new WeakMap,q=new WeakMap;class xt extends pt{constructor(t,e,i,s){const o=g("span",{className:"symbol__value",textContent:i});super(t,i,g("span",{className:"symbol"},[o]),s),this.type=e,w.set(this,new Map),V.set(this,void 0),X.set(this,r=>()=>{n(this,w,"f").delete(r)}),n(this,w,"f").set(i,new Z(this.flow,o,{onRemove:n(this,X,"f").call(this,i)}))}willUpdate(t){if(this.type==="decimal")return;const e=this.el.getBoundingClientRect();h(this,V,e[this.section.justify]-t[this.section.justify],"f")}update(t){if(this.value!==t){const e=n(this,w,"f").get(this.value);if(e.present=!1,e.el.classList.add("symbol__exiting"),n(this,w,"f").has(t)){const i=n(this,w,"f").get(t);i.present=!0,i.el.classList.remove("symbol__exiting")}else{const i=g("span",{className:"symbol__value",textContent:t});this.el.appendChild(i),n(this,w,"f").set(t,new Z(this.flow,i,{animateIn:!0,onRemove:n(this,X,"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(${n(this,V,"f")-i}px)`,"none"]},{...this.flow.transformTiming,composite:"accumulate"})}}w=new WeakMap,V=new WeakMap,X=new WeakMap;exports.NumberFlowLite=Et;exports.SlottedTag=rt;exports.canAnimate=lt;exports.defaultOpacityTiming=ct;exports.defaultTransformTiming=ft;exports.partitionParts=wt;exports.prefersReducedMotion=T;exports.slottedStyles=St;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("esm-env");function n(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,s){if(i==="m")throw new TypeError("Private method is not writable");if(i==="a"&&!s)throw new TypeError("Private accessor was defined without a setter");if(typeof t=="function"?a!==t||!s:!t.has(a))throw new TypeError("Cannot write private member to an object whose class did not declare it");return i==="a"?s.call(a,e):s?s.value=e:t.set(a,e),e}const w=(a,t,e)=>{const i=document.createElement(a),[s,r]=Array.isArray(t)?[void 0,t]:[t,e];return s&&Object.assign(i,s),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};function gt(a,t,{reverse:e=!1}={}){const i=a.length;for(let s=e?i-1:0;e?s>=0:s<i;e?s--:s++)t(a[s],s)}function wt(a,t){const e=t.formatToParts(a),i=[],s=[],r=[],l=[],o={},p=c=>{const f=o[c]==null?o[c]=0:++o[c];return`${c}:${f}`};let u="",m=!1,W=!1;for(const c of e){u+=c.value;const f=c.type==="minusSign"||c.type==="plusSign"?"sign":c.type;f==="integer"?(m=!0,s.push(...c.value.split("").map(J=>({type:f,value:parseInt(J)})))):f==="group"?s.push({type:f,value:c.value}):f==="decimal"?(W=!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||W?l:i).push({type:f,value:c.value,key:p(f)})}const d=[];for(let c=s.length-1;c>=0;c--){const f=s[c];d.unshift(f.type==="integer"?{...f,key:p(f.type),place:o[f.type]}:{...f,key:p(f.type)})}return{pre:i,integer:d,fraction:r,post:l,formatted:u,value:typeof a=="string"?parseFloat(a):a}}const yt=T.BROWSER?HTMLElement:class{},vt=String.raw,_t=T.BROWSER&&typeof CSS<"u"&&CSS.supports("animation-timing-function","linear(1,2)"),bt=T.BROWSER&&typeof CSS<"u"&&CSS.supports("line-height","mod(1,1)"),F=T.BROWSER?matchMedia("(prefers-reduced-motion: reduce)"):null,q="--_number-flow-d-opacity",it="--_number-flow-d-width",Z="--_number-flow-dx",st="--_number-flow-d",St=(()=>{try{return CSS.registerProperty({name:q,syntax:"<number>",inherits:!1,initialValue:"0"}),CSS.registerProperty({name:Z,syntax:"<length>",inherits:!0,initialValue:"0px"}),CSS.registerProperty({name:it,syntax:"<number>",inherits:!1,initialValue:"0"}),CSS.registerProperty({name:st,syntax:"<number>",inherits:!0,initialValue:"0"}),!0}catch{return!1}})(),rt="var(--number-flow-char-height, 1em)",g="var(--number-flow-mask-height, 0.25em)",C=`calc(${g} / 2)`,Q="var(--number-flow-mask-width, 0.5em)",S=`calc(${Q} / var(--scale-x))`,A="#000 0, transparent 71%",lt="span",kt=({willChange:a})=>({fontKerning:"none",display:"inline-block",lineHeight:rt,padding:`${g} 0`,willChange:a?"transform":void 0}),nt=vt`:host{display:inline-flex;align-items:baseline;direction:ltr;white-space:nowrap;position:relative;line-height:${rt} !important;isolation:isolate;}::slotted(${lt}){position:absolute;left:0;top:0;color:transparent !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(${it}) / var(--width));transform:translateX(var(${Z})) scaleX(var(--scale-x));margin:0 calc(-1 * ${Q});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,${A}),radial-gradient(at bottom left,${A}),radial-gradient(at top left,${A}),radial-gradient(at top right,${A});-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 ${Q};transform:scaleX(calc(1 / var(--scale-x))) translateX(calc(-1 * var(${Z})));}.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(${st});}: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}));}`,xt=(a,t)=>a!=null&&t==null?a:a==null&&t!=null?t:a!=null&&t!=null?Math.max(a,t):null;var B,D,k,x,E,y,R,P,N,H,$,M,V,X,z,U,I,L,j,v,G,tt,_,K,Y;const ht=bt&&_t&&St;var b;(function(a){a[a.UP=1]="UP",a[a.DOWN=-1]="DOWN",a[a.NONE=0]="NONE"})(b||(b={}));const ct={duration:450,easing:"ease-out"},ft={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)"};let O;class Et extends yt{constructor(){super(...arguments),this.transformTiming=ft,this.opacityTiming=ct,B.set(this,!0),this.manual=!1,this.respectMotionPreference=!0,D.set(this,!1),k.set(this,void 0),x.set(this,void 0),E.set(this,void 0),this.trend=!0,y.set(this,void 0),this.continuous=!1,R.set(this,void 0),P.set(this,void 0),N.set(this,void 0)}static define(){T.BROWSER&&customElements.define("number-flow",this)}get startingPlace(){return n(this,R,"f")}get computedTrend(){return n(this,y,"f")}set parts(t){if(t==null)return;const{pre:e,integer:i,fraction:s,post:r,value:l}=t;if(n(this,D,"f")){const o=n(this,P,"f");if(h(this,P,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,R,void 0,"f"),n(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)),W=u.find(d=>!p.find(c=>d.place===c.place&&d.value===c.value));h(this,R,xt(m==null?void 0:m.place,W==null?void 0:W.place),"f")}this.manual||this.willUpdate(),n(this,k,"f").update(e),n(this,x,"f").update({integer:i,fraction:s}),n(this,E,"f").update(r),this.manual||this.didUpdate()}else{if(h(this,P,t,"f"),this.attachShadow({mode:"open"}),typeof CSSStyleSheet<"u"&&this.shadowRoot.adoptedStyleSheets)O||(O=new CSSStyleSheet,O.replaceSync(nt)),this.shadowRoot.adoptedStyleSheets=[O];else{const o=document.createElement("style");o.textContent=nt,this.shadowRoot.appendChild(o)}this.shadowRoot.appendChild(w("slot")),h(this,k,new ot(this,e,{inert:!0,ariaHidden:"true",justify:"right"}),"f"),this.shadowRoot.appendChild(n(this,k,"f").el),h(this,x,new $t(this,i,s,{inert:!0,ariaHidden:"true"}),"f"),this.shadowRoot.appendChild(n(this,x,"f").el),h(this,E,new ot(this,r,{inert:!0,ariaHidden:"true",justify:"left"}),"f"),this.shadowRoot.appendChild(n(this,E,"f").el)}h(this,D,!0,"f")}willUpdate(){this.animated&&(n(this,k,"f").willUpdate(),n(this,x,"f").willUpdate(),n(this,E,"f").willUpdate())}didUpdate(){if(!this.animated)return;n(this,N,"f")?n(this,N,"f").abort():this.dispatchEvent(new Event("animationsstart")),n(this,k,"f").didUpdate(),n(this,x,"f").didUpdate(),n(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,N,void 0,"f"))}),h(this,N,t,"f")}get animated(){return ht&&n(this,B,"f")&&(!this.respectMotionPreference||!(F!=null&&F.matches))}set animated(t){var e;this.animated!==t&&(h(this,B,t,"f"),(e=this.shadowRoot)==null||e.getAnimations().forEach(i=>i.finish()))}}B=new WeakMap,D=new WeakMap,k=new WeakMap,x=new WeakMap,E=new WeakMap,y=new WeakMap,R=new WeakMap,P=new WeakMap,N=new WeakMap;class $t{constructor(t,e,i,{className:s,...r}={}){this.flow=t,H.set(this,void 0),$.set(this,void 0),M.set(this,void 0),V.set(this,void 0),X.set(this,void 0),h(this,$,new at(t,e,{justify:"right"}),"f"),h(this,M,new at(t,i,{justify:"left"}),"f"),h(this,H,w("span",{className:"number__inner"},[n(this,$,"f").el,n(this,M,"f").el]),"f"),this.el=w("span",{...r,className:`number ${s??""}`},[n(this,H,"f")])}willUpdate(){h(this,V,this.el.offsetWidth,"f"),h(this,X,this.el.getBoundingClientRect().left,"f"),n(this,$,"f").willUpdate(),n(this,M,"f").willUpdate()}update({integer:t,fraction:e}){n(this,$,"f").update(t),n(this,M,"f").update(e)}didUpdate(){const t=this.el.getBoundingClientRect();n(this,$,"f").didUpdate(),n(this,M,"f").didUpdate();const e=n(this,X,"f")-t.left,i=this.el.offsetWidth,s=n(this,V,"f")-i;this.el.style.setProperty("--width",String(i)),this.el.animate({[Z]:[`${e}px`,"0px"],[it]:[s,0]},{...this.flow.transformTiming,composite:"accumulate"})}}H=new WeakMap,$=new WeakMap,M=new WeakMap,V=new WeakMap,X=new WeakMap;class dt{constructor(t,e,{justify:i,className:s,...r},l){this.flow=t,this.children=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);this.el=w("span",{...r,className:`section section--justify-${i} ${s??""}`},l?l(o):o)}addChar(t,{startDigitsAtZero:e=!1,...i}={}){const s=t.type==="integer"||t.type==="fraction"?new ut(this,t.type,e?0:t.value,t.place,{...i,onRemove:this.onCharRemove(t.key)}):new Mt(this,t.type,t.value,{...i,onRemove:this.onCharRemove(t.key)});return this.children.set(t.key,s),s}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,s=this.justify==="left",r=s?"prepend":"append";if(gt(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:s}),this.flow.animated){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,z,t[this.justify],"f"),this.children.forEach(e=>e.willUpdate(t))}didUpdate(){const t=this.el.getBoundingClientRect();this.children.forEach(s=>s.didUpdate(t));const e=t[this.justify],i=n(this,z,"f")-e;this.el.animate({transform:[`translateX(${i}px)`,"none"]},{...this.flow.transformTiming,composite:"accumulate"})}}z=new WeakMap;class at extends dt{update(t){const e=new Map;this.children.forEach((i,s)=>{t.find(r=>r.key===s)||e.set(s,i),this.unpop(i)}),this.addNewAndUpdateExisting(t),e.forEach(i=>{i instanceof ut&&i.update(0)}),this.pop(e)}}class ot extends dt{update(t){const e=new Map;this.children.forEach((i,s)=>{t.find(r=>r.key===s)||e.set(s,i)}),this.pop(e),this.addNewAndUpdateExisting(t)}}class et{constructor(t,e,{onRemove:i,animateIn:s=!1}={}){this.flow=t,this.el=e,U.set(this,!0),I.set(this,void 0),L.set(this,()=>{var r;this.el.remove(),(r=n(this,I,"f"))==null||r.call(this)}),this.el.classList.add("animate-presence"),this.flow.animated&&s&&this.el.animate({[q]:[-.9999,0]},{...this.flow.opacityTiming,composite:"accumulate"}),h(this,I,i,"f")}get present(){return n(this,U,"f")}set present(t){if(n(this,U,"f")!==t){if(h(this,U,t,"f"),!this.flow.animated){t||n(this,L,"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",n(this,L,"f")):this.flow.addEventListener("animationsfinish",n(this,L,"f"),{once:!0})}}}U=new WeakMap,I=new WeakMap,L=new WeakMap;class pt extends et{constructor(t,e,i,s){super(t.flow,i,s),this.section=t,this.value=e,this.el=i}}class ut extends pt{constructor(t,e,i,s,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}),o=w("span",{className:"digit"},l);o.style.setProperty("--current",String(i)),super(t,i,o,r),this.place=s,j.set(this,void 0),v.set(this,void 0),G.set(this,void 0),tt.set(this,()=>{this.el.classList.remove("is-spinning")}),h(this,j,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],s=e.width/2;h(this,G,this.section.justify==="left"?i+s:i-s,"f")}update(t){var e,i;(e=n(this,j,"f")[this.value])==null||e.classList.remove("is-current"),this.el.style.setProperty("--current",String(t)),(i=n(this,j,"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],s=e.width/2,r=this.section.justify==="left"?i+s:i-s;this.el.animate({transform:[`translateX(${n(this,G,"f")-r}px)`,"none"]},{...this.flow.transformTiming,composite:"accumulate"});const l=this.diff;l&&(this.el.classList.add("is-spinning"),this.el.animate({[st]:[-l,0]},{...this.flow.spinTiming??this.flow.transformTiming,composite:"accumulate"}),this.flow.addEventListener("animationsfinish",n(this,tt,"f"),{once:!0}))}get diff(){let t=this.flow.computedTrend;const e=this.value-n(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>n(this,v,"f")?this.value-10-n(this,v,"f"):t===b.UP&&this.value<n(this,v,"f")?10-n(this,v,"f")+this.value:e)}}j=new WeakMap,v=new WeakMap,G=new WeakMap,tt=new WeakMap;class Mt extends pt{constructor(t,e,i,s){const r=w("span",{className:"symbol__value",textContent:i});super(t,i,w("span",{className:"symbol"},[r]),s),this.type=e,_.set(this,new Map),K.set(this,void 0),Y.set(this,l=>()=>{n(this,_,"f").delete(l)}),n(this,_,"f").set(i,new et(this.flow,r,{onRemove:n(this,Y,"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=n(this,_,"f").get(this.value);if(e.present=!1,e.el.classList.add("symbol__exiting"),n(this,_,"f").has(t)){const i=n(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),n(this,_,"f").set(t,new et(this.flow,i,{animateIn:!0,onRemove:n(this,Y,"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(${n(this,K,"f")-i}px)`,"none"]},{...this.flow.transformTiming,composite:"accumulate"})}}_=new WeakMap,K=new WeakMap,Y=new WeakMap;exports.NumberFlowLite=Et;exports.SlottedTag=lt;exports.canAnimate=ht;exports.defaultOpacityTiming=ct;exports.defaultTransformTiming=ft;exports.partitionParts=wt;exports.prefersReducedMotion=F;exports.slottedStyles=kt;

package/dist/index.mjs

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

package/dist/styles.d.ts

@@ -1,3 +1,4 @@
+export declare const supportsLinear: boolean;
 export declare const supportsMod: boolean;
 export declare const prefersReducedMotion: MediaQueryList | null;
 export declare const opacityDeltaVar = "--_number-flow-d-opacity";

package/dist/util/math.d.ts

@@ -0,0 +1 @@
+export declare const max: (n1?: number, n2?: number) => number | null;

package/package.json

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