number-flow 0.2.3 → 0.3.0

package/dist/formatter.d.ts

@@ -23,13 +23,14 @@ export type KeyedNumberPart = KeyedDigitPart | KeyedSymbolPart;
 export type Format = Omit<Intl.NumberFormatOptions, 'notation'> & {
     notation?: Exclude<Intl.NumberFormatOptions['notation'], 'scientific' | 'engineering'>;
 };
-export type Value = Parameters<typeof Intl.NumberFormat.prototype.formatToParts>[0];
+export type Value = Exclude<Parameters<typeof Intl.NumberFormat.prototype.formatToParts>[0], bigint>;
 export declare function partitionParts(value: Value, formatter: Intl.NumberFormat): {
     pre: KeyedNumberPart[];
     integer: KeyedNumberPart[];
     fraction: KeyedNumberPart[];
     post: KeyedNumberPart[];
     formatted: string;
+    value: number;
 };
 export type PartitionedParts = ReturnType<typeof partitionParts>;
 export {};

package/dist/index.d.ts

@@ -1,19 +1,30 @@
 import { type PartitionedParts } from './formatter';
 import { ServerSafeHTMLElement } from './ssr';
-export { SlottedTag, slottedStyles, supportsAnimationComposition, supportsLinear } from './styles';
+export { SlottedTag, slottedStyles, prefersReducedMotion } from './styles';
 export * from './formatter';
-export declare const defaultFadeTiming: EffectTiming;
-export declare const defaultXTiming: EffectTiming;
-export declare const defaultYTiming: EffectTiming;
+export declare const canAnimate: boolean;
+type RawTrend = boolean | 'increasing' | 'decreasing';
+export { type RawTrend as Trend };
+declare enum Trend {
+    UP = 1,
+    DOWN = -1,
+    NONE = 0
+}
+export declare const defaultOpacityTiming: EffectTiming;
+export declare const defaultTransformTiming: EffectTiming;
 export declare class NumberFlowLite extends ServerSafeHTMLElement {
     #private;
     static define(): void;
-    xTiming: EffectTiming;
-    yTiming: EffectTiming;
-    fadeTiming: EffectTiming;
-    root: boolean;
+    transformTiming: EffectTiming;
+    spinTiming?: EffectTiming;
+    opacityTiming: EffectTiming;
     manual: boolean;
+    respectMotionPreference: boolean;
+    trend: RawTrend;
+    getComputedTrend(): Trend | undefined;
     set parts(newVal: PartitionedParts | undefined);
     willUpdate(): void;
     didUpdate(): void;
+    get animated(): boolean;
+    set animated(val: boolean);
 }

package/dist/index.js

@@ -1 +1 @@
-"use strict";var wt=Object.defineProperty;var et=n=>{throw TypeError(n)};var xt=(n,i,t)=>i in n?wt(n,i,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[i]=t;var u=(n,i,t)=>xt(n,typeof i!="symbol"?i+"":i,t),it=(n,i,t)=>i.has(n)||et("Cannot "+t);var o=(n,i,t)=>(it(n,i,"read from private field"),t?t.call(n):i.get(n)),r=(n,i,t)=>i.has(n)?et("Cannot add the same private member more than once"):i instanceof WeakSet?i.add(n):i.set(n,t),h=(n,i,t,s)=>(it(n,i,"write to private field"),s?s.call(n,t):i.set(n,t),t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const V=require("esm-env"),y=(n,i,t)=>{const s=document.createElement(n),[e,a]=Array.isArray(i)?[void 0,i]:[i,t];return e&&Object.assign(s,e),a==null||a.forEach(l=>s.appendChild(l)),s},_t=(n,i)=>{typeof Element.prototype.replaceChildren>"u"?(n.innerHTML="",i.forEach(t=>n.appendChild(t))):n.replaceChildren(...i)},bt=(n,i)=>{var t;return i==="left"?n.offsetLeft:(((t=n.offsetParent instanceof HTMLElement?n.offsetParent:null)==null?void 0:t.offsetWidth)??0)-n.offsetWidth-n.offsetLeft};function St(n,i,{reverse:t=!1}={}){const s=n.length;for(let e=t?s-1:0;t?e>=0:e<s;t?e--:e++)i(n[e],e)}function Ct(n,i){const t=i.formatToParts(n),s=[],e=[],a=[],l=[],f={},c=p=>(f[p]||(f[p]=0),`${p}:${f[p]++}`);let d="",x=!1,E=!1;for(const p of t){d+=p.value;const m=p.type==="minusSign"||p.type==="plusSign"?"sign":p.type;m==="integer"?(x=!0,e.push(...p.value.split("").map(Z=>({type:m,value:parseInt(Z)})))):m==="group"?e.push({type:m,value:p.value}):m==="decimal"?(E=!0,a.push({type:m,value:p.value,key:c(m)})):m==="fraction"?a.push(...p.value.split("").map(Z=>({type:m,value:parseInt(Z),key:c(m)}))):(x||E?l:s).push({type:m,value:p.value,key:c(m)})}const _=[];for(let p=e.length-1;p>=0;p--)_.unshift({...e[p],key:c(e[p].type)});return{pre:s,integer:_,fraction:a,post:l,formatted:d}}const vt=V.BROWSER?HTMLElement:class{},kt=String.raw,ct=V.BROWSER&&typeof CSS<"u"&&CSS.supports("transition-timing-function","linear(1, 2)"),ht=V.BROWSER&&typeof CSS<"u"&&typeof CSS.registerProperty<"u",J=V.BROWSER&&typeof CSS<"u"&&typeof CSS.supports("animation-composition","accumulate")<"u";if(ht)try{CSS.registerProperty({name:"--_number-flow-scale-x",syntax:"<number>",inherits:!1,initialValue:"1"})}catch{}const dt="var(--number-flow-char-height, 1em)",g="var(--number-flow-mask-height, 0.25em)",T="var(--number-flow-mask-width, 0.5em)",G=`${T} * 1/var(--_number-flow-scale-x)`,st=`calc(${G})`,nt=`linear-gradient(to bottom, transparent 0, #000 ${g}, #000 calc(100% - ${g}), transparent 100%)`,K="#000 0, transparent 71%",ft="span",$t={fontKerning:"none",display:"inline-block",lineHeight:dt,padding:`${g} 0`},ot=kt`:host{display:inline-block;direction:ltr;user-select:none;pointer-events:none;white-space:nowrap;position:relative;line-height:${dt} !important;isolation:isolate;}::slotted(${ft}){position:absolute;left:0;top:0;color:transparent !important;z-index:-1;user-select:text;pointer-events:auto;}.section{display:inline-block;padding-bottom:${g};padding-top:${g};vertical-align:top;user-select:none;}.section:not(.section--masked),.section--masked .section__inner{position:relative;isolation:isolate;}.section__inner{display:inline-block;transform-origin:inherit;}.section--justify-left{transform-origin:center left;}.section--justify-right{transform-origin:center right;}.section--masked{overflow:clip;position:relative;z-index:-1;--_number-flow-scale-x:1;-webkit-mask-repeat:no-repeat;-webkit-mask-size:calc(100% - ${G}) 100%,100% calc(100% - ${g} * 2),${st} ${g},${st} ${g};}.section--masked.section--justify-left{padding-right:${T};margin-right:calc(-1 * ${T});-webkit-mask-image:${nt},linear-gradient(to right,#000 0,#000 calc(100% - ${G}),transparent 100%),radial-gradient(at bottom left,${K}),radial-gradient(at top left,${K});-webkit-mask-position:left,center,right top,right bottom;}.section--masked.section--justify-right{padding-left:${T};margin-left:calc(-1 * ${T});-webkit-mask-image:${nt},linear-gradient(to left,#000 0,#000 calc(100% - ${G}),transparent 100%),radial-gradient(at bottom right,${K}),radial-gradient(at top right,${K});-webkit-mask-position:right,center,left top,left bottom;}.section__exiting{position:absolute !important;z-index:-1;}.digit{display:inline-block;position:relative;}.digit__stack{display:flex;flex-direction:column;align-items:center;gap:${g};position:absolute;width:100%;}.digit__stack > *{display:inline-block;}.digit__lt{bottom:calc(100% + ${g});}.digit__gt{top:calc(100% + ${g});}.symbol{display:inline-block;position:relative;isolation:isolate;}.symbol__value{display:inline-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;}`;function Rt(n,i,t=60){const s=Math.trunc(n/1e3*t);return Array.from({length:s},(e,a)=>i(a/(s-1)))}function jt(n,i,t=60){if(ht)return[i(0),i(1)];const s=Math.max(Math.trunc(n/1e3*t),0),e=Array.from({length:s},(a,l)=>({...i(l/s),offset:(l+.5)/s}));return e.unshift({...i(0),offset:0}),e}const at=(n,i,t)=>n+(i-n)*t,pt={duration:500,easing:"ease-out"},tt=ct?{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)"}:{duration:900,easing:"cubic-bezier(.32,.72,0,1)"},ut=tt;let q;var U,b,S,C,v;class Et extends vt{constructor(){super(...arguments);u(this,"xTiming",tt);u(this,"yTiming",ut);u(this,"fadeTiming",pt);u(this,"root",!1);u(this,"manual",!1);r(this,U,!1);r(this,b);r(this,S);r(this,C);r(this,v)}static define(){V.BROWSER&&customElements.define("number-flow",this)}set parts(t){if(t==null)return;const{pre:s,integer:e,fraction:a,post:l}=t;if(o(this,U))this.manual||this.willUpdate(),o(this,b).update(s),o(this,S).update(e),o(this,C).update(a),o(this,v).update(l),this.manual||this.didUpdate();else{if(this.attachShadow({mode:"open"}),typeof CSSStyleSheet<"u"&&this.shadowRoot.adoptedStyleSheets)q||(q=new CSSStyleSheet,q.replaceSync(ot)),this.shadowRoot.adoptedStyleSheets=[q];else{const f=document.createElement("style");f.textContent=ot,this.shadowRoot.appendChild(f)}this.shadowRoot.appendChild(y("slot")),h(this,b,new rt(this,s,{inert:!0,ariaHidden:"true",justify:"right"})),this.shadowRoot.appendChild(o(this,b).el),h(this,S,new lt(this,e,{inert:!0,ariaHidden:"true",justify:"right"})),this.shadowRoot.appendChild(o(this,S).el),h(this,C,new lt(this,a,{inert:!0,ariaHidden:"true",justify:"left"})),this.shadowRoot.appendChild(o(this,C).el),h(this,v,new rt(this,l,{inert:!0,ariaHidden:"true",justify:"left"})),this.shadowRoot.appendChild(o(this,v).el)}h(this,U,!0)}willUpdate(){const t=this.root?this.getBoundingClientRect():new DOMRect;o(this,b).willUpdate(t),o(this,S).willUpdate(t),o(this,C).willUpdate(t),o(this,v).willUpdate(t)}didUpdate(){const t=this.root?this.getBoundingClientRect():new DOMRect;o(this,b).didUpdate(t),o(this,S).didUpdate(t),o(this,C).didUpdate(t),o(this,v).didUpdate(t)}}U=new WeakMap,b=new WeakMap,S=new WeakMap,C=new WeakMap,v=new WeakMap;class mt{constructor(i,t,{justify:s,className:e,...a},l){u(this,"flow");u(this,"el");u(this,"justify");u(this,"children",new Map);u(this,"onCharRemove",i=>()=>{this.children.delete(i)});this.flow=i,this.justify=s;const f=t.map(c=>this.addChar(c).el);f.push(document.createTextNode("​")),this.el=y("span",{...a,className:`section section--justify-${s} ${e??""}`},l?l(f):f)}addChar(i,{startDigitsAtZero:t=!1,...s}={}){const e=i.type==="integer"||i.type==="fraction"?new yt(this,i.type,t?0:i.value,{...s,onRemove:this.onCharRemove(i.key)}):new Tt(this,i.type,i.value,{...s,onRemove:this.onCharRemove(i.key)});return this.children.set(i.key,e),e}unpop(i){i.el.classList.remove("section__exiting"),i.el.style[this.justify]=""}pop(i){i.forEach(t=>{t.el.style[this.justify]=`${bt(t.el,this.justify)}px`}),i.forEach(t=>{t.el.classList.add("section__exiting"),t.present=!1})}addNewAndUpdateExisting(i,t=this.el){const s=new Map,e=new Map,a=this.justify==="left",l=a?"prepend":"append";St(i,c=>{let d;this.children.has(c.key)?(d=this.children.get(c.key),e.set(c,d),this.unpop(d),d.present=!0):(d=this.addChar(c,{startDigitsAtZero:!0,animateIn:!0}),s.set(c,d)),t[l](d.el)},{reverse:a});const f=t.getBoundingClientRect();s.forEach(c=>{c.willUpdate(f)}),s.forEach((c,d)=>{c.update(d.value)}),e.forEach((c,d)=>{c.update(d.value)})}}var k,M,A,B,N,L;class lt extends mt{constructor(t,s,{className:e,...a}){let l;super(t,s,{...a,className:`${e??""} section--masked`},f=>[l=y("span",{className:"section__inner"},f)]);r(this,k);r(this,M);r(this,A);r(this,B);r(this,N);r(this,L);h(this,k,l)}willUpdate(t){const s=this.el.getBoundingClientRect();h(this,M,s.width),h(this,A,s[this.justify]-t[this.justify]);const e=o(this,k).getBoundingClientRect();this.children.forEach(a=>a.willUpdate(e))}update(t){const s=new Map;this.children.forEach((e,a)=>{t.find(l=>l.key===a)||s.set(a,e),this.unpop(e)}),this.addNewAndUpdateExisting(t,o(this,k)),s.forEach(e=>{e instanceof yt&&e.update(0)}),this.pop(s)}didUpdate(t){var c,d,x,E;(c=o(this,B))==null||c.cancel(),(d=o(this,L))==null||d.cancel(),(x=o(this,N))==null||x.cancel();const s=this.el.getBoundingClientRect(),e=s[this.justify]-t[this.justify],a=o(this,A)-e,l=Math.max(o(this,M),.01)/Math.max(s.width,.01),f=o(this,k).getBoundingClientRect();this.children.forEach(_=>_.didUpdate(f)),h(this,B,this.el.animate({transform:[`translateX(${a}px) scaleX(${l})`,"none"]},this.flow.xTiming)),l!==1&&(h(this,L,(E=o(this,k))==null?void 0:E.animate({transform:Rt(1e3,_=>`scaleX(${1/at(l,1,_)})`)},this.flow.xTiming)),h(this,N,this.el.animate(jt(1e3,_=>({"--_number-flow-scale-x":at(l,1,_)})),this.flow.xTiming)))}}k=new WeakMap,M=new WeakMap,A=new WeakMap,B=new WeakMap,N=new WeakMap,L=new WeakMap;var W,P;class rt extends mt{constructor(){super(...arguments);r(this,W);r(this,P)}willUpdate(t){const s=this.el.getBoundingClientRect();h(this,W,s[this.justify]-t[this.justify]),this.children.forEach(e=>e.willUpdate(s))}update(t){const s=new Map;this.children.forEach((e,a)=>{t.find(l=>l.key===a)||s.set(a,e)}),this.pop(s),this.addNewAndUpdateExisting(t)}didUpdate(t){var a;(a=o(this,P))==null||a.cancel();const s=this.el.getBoundingClientRect(),e=s[this.justify]-t[this.justify];this.children.forEach(l=>l.didUpdate(s)),h(this,P,this.el.animate({transform:[`translateX(${o(this,W)-e}px)`,"none"]},this.flow.xTiming))}}W=new WeakMap,P=new WeakMap;var R,H,j;class Q{constructor(i,t,{onRemove:s,animateIn:e=!1}={}){u(this,"flow");u(this,"el");r(this,R,!0);r(this,H);r(this,j);this.flow=i,this.el=t,e&&this.el.animate({opacity:["0","1"]},i.fadeTiming),h(this,H,s)}get present(){return o(this,R)}set present(i){var s;if(o(this,R)===i)return;const t=getComputedStyle(this.el).getPropertyValue("opacity");(s=o(this,j))==null||s.cancel(),h(this,j,this.el.animate({opacity:[t,i?"1":"0"]},this.flow.fadeTiming)),i||(o(this,j).onfinish=()=>{var e;this.el.remove(),(e=o(this,H))==null||e.call(this)}),h(this,R,i)}}R=new WeakMap,H=new WeakMap,j=new WeakMap;class gt extends Q{constructor(t,s,e,a){super(t.flow,e,a);u(this,"section");u(this,"value");u(this,"el");this.section=t,this.value=s,this.el=e}}var $,O,X,z,D;class yt extends gt{constructor(t,s,e,a){super(t,e,y("span",{className:"digit",textContent:e+""}),a);r(this,$);r(this,O);r(this,X);r(this,z);r(this,D)}willUpdate(t){h(this,$,this.value);const s=this.el.getBoundingClientRect();h(this,O,s.y-t.y);const e=s[this.section.justify]-t[this.section.justify],a=s.width/2;h(this,X,this.section.justify==="left"?e+a:e-a)}update(t){this.value=t,o(this,$)!==t&&_t(this.el,[...t===0?[]:[y("span",{className:"digit__stack digit__lt"},Array.from({length:t},(s,e)=>y("span",{textContent:e+""})))],document.createTextNode(t+""),...t===9?[]:[y("span",{className:"digit__stack digit__gt"},Array.from({length:9-t},(s,e)=>y("span",{textContent:t+e+1+""})))]])}didUpdate(t){var d,x;(d=o(this,z))==null||d.cancel(),o(this,$)!==this.value&&((x=o(this,D))==null||x.cancel());const s=this.el.getBoundingClientRect(),e=s[this.section.justify]-t[this.section.justify],a=s.width/2,l=this.section.justify==="left"?e+a:e-a,f=`translateX(${o(this,X)-l}px)`,c=`translateY(calc((100% + ${g}) * ${this.value-o(this,$)} + ${o(this,O)}px))`;h(this,z,this.el.animate({transform:[J?f:`${f} ${c}`,"none"]},{...this.flow.xTiming,composite:"accumulate"})),J&&o(this,$)!==this.value&&h(this,D,this.el.animate({transform:[c,"none"]},{...this.flow.yTiming,composite:"accumulate"}))}}$=new WeakMap,O=new WeakMap,X=new WeakMap,z=new WeakMap,D=new WeakMap;var w,F,I,Y;class Tt extends gt{constructor(t,s,e,a){const l=y("span",{className:"symbol__value",textContent:e});super(t,e,y("span",{className:"symbol"},[l]),a);u(this,"type");r(this,w,new Map);r(this,F);r(this,I,t=>()=>{o(this,w).delete(t)});r(this,Y);this.type=s,o(this,w).set(e,new Q(this.flow,l,{onRemove:o(this,I).call(this,e)}))}willUpdate(t){if(this.type==="decimal")return;const s=this.el.getBoundingClientRect();h(this,F,s[this.section.justify]-t[this.section.justify])}update(t){if(this.value!==t){const s=o(this,w).get(this.value);if(s.present=!1,s.el.classList.add("symbol__exiting"),o(this,w).has(t)){const e=o(this,w).get(t);e.present=!0,e.el.classList.remove("symbol__exiting")}else{const e=y("span",{className:"symbol__value",textContent:t});this.el.appendChild(e),o(this,w).set(t,new Q(this.flow,e,{animateIn:!0,onRemove:o(this,I).call(this,t)}))}}this.value=t}didUpdate(t){var a;if(this.type==="decimal")return;(a=o(this,Y))==null||a.cancel();const e=this.el.getBoundingClientRect()[this.section.justify]-t[this.section.justify];h(this,Y,this.el.animate({transform:[`translateX(${o(this,F)-e}px)`,"none"]},this.flow.xTiming))}}w=new WeakMap,F=new WeakMap,I=new WeakMap,Y=new WeakMap;exports.NumberFlowLite=Et;exports.SlottedTag=ft;exports.defaultFadeTiming=pt;exports.defaultXTiming=tt;exports.defaultYTiming=ut;exports.partitionParts=Ct;exports.slottedStyles=$t;exports.supportsAnimationComposition=J;exports.supportsLinear=ct;
+"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;

package/dist/index.mjs

@@ -1,435 +1,416 @@
-var ut = Object.defineProperty;
-var Q = (n) => {
-  throw TypeError(n);
-};
-var mt = (n, i, t) => i in n ? ut(n, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[i] = t;
-var u = (n, i, t) => mt(n, typeof i != "symbol" ? i + "" : i, t), tt = (n, i, t) => i.has(n) || Q("Cannot " + t);
-var o = (n, i, t) => (tt(n, i, "read from private field"), t ? t.call(n) : i.get(n)), r = (n, i, t) => i.has(n) ? Q("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(n) : i.set(n, t), h = (n, i, t, s) => (tt(n, i, "write to private field"), s ? s.call(n, t) : i.set(n, t), t);
-import { BROWSER as Y } from "esm-env";
-const y = (n, i, t) => {
-  const s = document.createElement(n), [e, a] = Array.isArray(i) ? [void 0, i] : [i, t];
-  return e && Object.assign(s, e), a == null || a.forEach((l) => s.appendChild(l)), s;
-}, gt = (n, i) => {
-  typeof Element.prototype.replaceChildren > "u" ? (n.innerHTML = "", i.forEach((t) => n.appendChild(t))) : n.replaceChildren(...i);
-}, yt = (n, i) => {
-  var t;
-  return i === "left" ? n.offsetLeft : (((t = n.offsetParent instanceof HTMLElement ? n.offsetParent : null) == null ? void 0 : t.offsetWidth) ?? 0) - n.offsetWidth - n.offsetLeft;
+import { BROWSER as I } 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");
+  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;
+}, 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;
 };
-function wt(n, i, { reverse: t = !1 } = {}) {
-  const s = n.length;
-  for (let e = t ? s - 1 : 0; t ? e >= 0 : e < s; t ? e-- : e++)
-    i(n[e], e);
+function dt(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 Et(n, i) {
-  const t = i.formatToParts(n), s = [], e = [], a = [], l = [], f = {}, c = (p) => (f[p] || (f[p] = 0), `${p}:${f[p]++}`);
-  let d = "", x = !1, U = !1;
-  for (const p of t) {
-    d += p.value;
-    const m = p.type === "minusSign" || p.type === "plusSign" ? "sign" : p.type;
-    m === "integer" ? (x = !0, e.push(...p.value.split("").map((q) => ({ type: m, value: parseInt(q) })))) : m === "group" ? e.push({ type: m, value: p.value }) : m === "decimal" ? (U = !0, a.push({ type: m, value: p.value, key: c(m) })) : m === "fraction" ? a.push(...p.value.split("").map((q) => ({ type: m, value: parseInt(q), key: c(m) }))) : (x || U ? l : s).push({
-      type: m,
-      value: p.value,
-      key: c(m)
+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;
+  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,
+      value: c.value,
+      key: f(d)
     });
   }
-  const _ = [];
-  for (let p = e.length - 1; p >= 0; p--)
-    _.unshift({ ...e[p], key: c(e[p].type) });
-  return { pre: s, integer: _, fraction: a, post: l, formatted: 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: E,
+    value: typeof a == "string" ? parseFloat(a) : a
+  };
 }
-const xt = Y ? HTMLElement : class {
-}, _t = String.raw, bt = Y && typeof CSS < "u" && CSS.supports("transition-timing-function", "linear(1, 2)"), rt = Y && typeof CSS < "u" && typeof CSS.registerProperty < "u", et = Y && typeof CSS < "u" && typeof CSS.supports("animation-composition", "accumulate") < "u";
-if (rt)
+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 = (() => {
   try {
-    CSS.registerProperty({
-      name: "--_number-flow-scale-x",
+    return CSS.registerProperty({
+      name: X,
       syntax: "<number>",
       inherits: !1,
-      initialValue: "1"
-    });
+      initialValue: "0"
+    }), CSS.registerProperty({
+      name: z,
+      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;
   }
-const ct = "var(--number-flow-char-height, 1em)", g = "var(--number-flow-mask-height, 0.25em)", E = "var(--number-flow-mask-width, 0.5em)", Z = `${E} * 1/var(--_number-flow-scale-x)`, it = `calc(${Z})`, st = `linear-gradient(to bottom, transparent 0, #000 ${g}, #000 calc(100% - ${g}), transparent 100%)`, K = "#000 0, transparent 71%", Ct = "span", Tt = {
+})(), 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 }) => ({
   fontKerning: "none",
   display: "inline-block",
-  lineHeight: ct,
-  padding: `${g} 0`
-}, nt = _t`:host{display:inline-block;direction:ltr;user-select:none;pointer-events:none;white-space:nowrap;position:relative;line-height:${ct} !important;isolation:isolate;}::slotted(${Ct}){position:absolute;left:0;top:0;color:transparent !important;z-index:-1;user-select:text;pointer-events:auto;}.section{display:inline-block;padding-bottom:${g};padding-top:${g};vertical-align:top;user-select:none;}.section:not(.section--masked),.section--masked .section__inner{position:relative;isolation:isolate;}.section__inner{display:inline-block;transform-origin:inherit;}.section--justify-left{transform-origin:center left;}.section--justify-right{transform-origin:center right;}.section--masked{overflow:clip;position:relative;z-index:-1;--_number-flow-scale-x:1;-webkit-mask-repeat:no-repeat;-webkit-mask-size:calc(100% - ${Z}) 100%,100% calc(100% - ${g} * 2),${it} ${g},${it} ${g};}.section--masked.section--justify-left{padding-right:${E};margin-right:calc(-1 * ${E});-webkit-mask-image:${st},linear-gradient(to right,#000 0,#000 calc(100% - ${Z}),transparent 100%),radial-gradient(at bottom left,${K}),radial-gradient(at top left,${K});-webkit-mask-position:left,center,right top,right bottom;}.section--masked.section--justify-right{padding-left:${E};margin-left:calc(-1 * ${E});-webkit-mask-image:${st},linear-gradient(to left,#000 0,#000 calc(100% - ${Z}),transparent 100%),radial-gradient(at bottom right,${K}),radial-gradient(at top right,${K});-webkit-mask-position:right,center,left top,left bottom;}.section__exiting{position:absolute !important;z-index:-1;}.digit{display:inline-block;position:relative;}.digit__stack{display:flex;flex-direction:column;align-items:center;gap:${g};position:absolute;width:100%;}.digit__stack > *{display:inline-block;}.digit__lt{bottom:calc(100% + ${g});}.digit__gt{top:calc(100% + ${g});}.symbol{display:inline-block;position:relative;isolation:isolate;}.symbol__value{display:inline-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;}`;
-function kt(n, i, t = 60) {
-  const s = Math.trunc(n / 1e3 * t);
-  return Array.from({ length: s }, (e, a) => i(a / (s - 1)));
-}
-function vt(n, i, t = 60) {
-  if (rt)
-    return [i(0), i(1)];
-  const s = Math.max(Math.trunc(n / 1e3 * t), 0), e = Array.from({ length: s }, (a, l) => ({
-    ...i(l / s),
-    offset: (l + 0.5) / s
-  }));
-  return e.unshift({
-    ...i(0),
-    offset: 0
-  }), e;
-}
-const ot = (n, i, t) => n + (i - n) * t, $t = { duration: 500, easing: "ease-out" }, ht = bt ? {
+  lineHeight: ot,
+  padding: `${m} 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;
+(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 = {
   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)"
-} : {
-  duration: 900,
-  // Spring-like cubic-bezier stolen from Vaul: https://vaul.emilkowal.ski/
-  easing: "cubic-bezier(.32,.72,0,1)"
-}, St = ht;
-let G;
-var T, b, C, k, v;
-class Mt extends xt {
+};
+let j;
+class Et extends pt {
   constructor() {
-    super(...arguments);
-    u(this, "xTiming", ht);
-    u(this, "yTiming", St);
-    u(this, "fadeTiming", $t);
-    u(this, "root", !1);
-    u(this, "manual", !1);
-    r(this, T, !1);
-    r(this, b);
-    r(this, C);
-    r(this, k);
-    r(this, v);
+    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);
   }
   static define() {
-    Y && customElements.define("number-flow", this);
+    I && customElements.define("number-flow", this);
+  }
+  getComputedTrend() {
+    return n(this, S, "f");
   }
   set parts(t) {
     if (t == null)
       return;
-    const { pre: s, integer: e, fraction: a, post: l } = t;
-    if (o(this, T))
-      this.manual || this.willUpdate(), o(this, b).update(s), o(this, C).update(e), o(this, k).update(a), o(this, v).update(l), this.manual || this.didUpdate();
-    else {
-      if (this.attachShadow({ mode: "open" }), typeof CSSStyleSheet < "u" && this.shadowRoot.adoptedStyleSheets)
-        G || (G = new CSSStyleSheet(), G.replaceSync(nt)), this.shadowRoot.adoptedStyleSheets = [G];
+    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();
+    } 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];
       else {
-        const f = document.createElement("style");
-        f.textContent = nt, this.shadowRoot.appendChild(f);
+        const l = document.createElement("style");
+        l.textContent = st, this.shadowRoot.appendChild(l);
       }
-      this.shadowRoot.appendChild(y("slot")), h(this, b, new lt(this, s, {
-        // part: 'pre',
+      this.shadowRoot.appendChild(g("slot")), h(this, _, new at(this, e, {
         inert: !0,
         ariaHidden: "true",
         justify: "right"
-      })), this.shadowRoot.appendChild(o(this, b).el), h(this, C, new at(this, e, {
-        // part: 'integer',
+      }), "f"), this.shadowRoot.appendChild(n(this, _, "f").el), h(this, v, new bt(this, i, s, {
         inert: !0,
-        ariaHidden: "true",
-        justify: "right"
-      })), this.shadowRoot.appendChild(o(this, C).el), h(this, k, new at(this, a, {
-        // part: 'fraction',
+        ariaHidden: "true"
+      }), "f"), this.shadowRoot.appendChild(n(this, v, "f").el), h(this, b, new at(this, o, {
         inert: !0,
         ariaHidden: "true",
         justify: "left"
-      })), this.shadowRoot.appendChild(o(this, k).el), h(this, v, new lt(this, l, {
-        // part: 'post',
-        inert: !0,
-        ariaHidden: "true",
-        justify: "left"
-      })), this.shadowRoot.appendChild(o(this, v).el);
+      }), "f"), this.shadowRoot.appendChild(n(this, b, "f").el);
     }
-    h(this, T, !0);
+    h(this, L, !0, "f");
   }
   willUpdate() {
-    const t = this.root ? this.getBoundingClientRect() : new DOMRect();
-    o(this, b).willUpdate(t), o(this, C).willUpdate(t), o(this, k).willUpdate(t), o(this, v).willUpdate(t);
+    this.animated && (n(this, _, "f").willUpdate(), n(this, v, "f").willUpdate(), n(this, b, "f").willUpdate());
   }
   didUpdate() {
-    const t = this.root ? this.getBoundingClientRect() : new DOMRect();
-    o(this, b).didUpdate(t), o(this, C).didUpdate(t), o(this, k).didUpdate(t), o(this, v).didUpdate(t);
+    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();
+    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");
+  }
+  get animated() {
+    return yt && n(this, R, "f") && (!this.respectMotionPreference || !(K != null && K.matches));
+  }
+  set animated(t) {
+    var e;
+    this.animated !== t && (h(this, R, t, "f"), (e = this.shadowRoot) == null || e.getAnimations().forEach((i) => i.finish()));
   }
 }
-T = new WeakMap(), b = new WeakMap(), C = new WeakMap(), k = new WeakMap(), v = new WeakMap();
-class dt {
-  constructor(i, t, { justify: s, className: e, ...a }, l) {
-    u(this, "flow");
-    u(this, "el");
-    u(this, "justify");
-    // All children in the DOM:
-    u(this, "children", /* @__PURE__ */ new Map());
-    u(this, "onCharRemove", (i) => () => {
-      this.children.delete(i);
-    });
-    this.flow = i, this.justify = s;
-    const f = t.map((c) => this.addChar(c).el);
-    f.push(document.createTextNode("​")), this.el = y("span", {
-      ...a,
-      className: `section section--justify-${s} ${e ?? ""}`
-    }, l ? l(f) : f);
-  }
-  addChar(i, { startDigitsAtZero: t = !1, ...s } = {}) {
-    const e = i.type === "integer" || i.type === "fraction" ? new pt(this, i.type, t ? 0 : i.value, {
-      ...s,
-      onRemove: this.onCharRemove(i.key)
-    }) : new jt(this, i.type, i.value, {
-      ...s,
-      onRemove: this.onCharRemove(i.key)
-    });
-    return this.children.set(i.key, e), e;
+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, {
+      justify: "right"
+    }), "f"), h(this, k, new nt(t, i, {
+      justify: "left"
+    }), "f"), h(this, T, g("span", {
+      className: "number__inner"
+    }, [n(this, x, "f").el, n(this, k, "f").el]), "f"), this.el = g("span", {
+      ...o,
+      className: `number ${s ?? ""}`
+    }, [n(this, T, "f")]);
   }
-  unpop(i) {
-    i.el.classList.remove("section__exiting"), i.el.style[this.justify] = "";
+  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();
   }
-  pop(i) {
-    i.forEach((t) => {
-      t.el.style[this.justify] = `${yt(t.el, this.justify)}px`;
-    }), i.forEach((t) => {
-      t.el.classList.add("section__exiting"), t.present = !1;
-    });
+  update({ integer: t, fraction: e }) {
+    n(this, x, "f").update(t), n(this, k, "f").update(e);
   }
-  addNewAndUpdateExisting(i, t = this.el) {
-    const s = /* @__PURE__ */ new Map(), e = /* @__PURE__ */ new Map(), a = this.justify === "left", l = a ? "prepend" : "append";
-    wt(i, (c) => {
-      let d;
-      this.children.has(c.key) ? (d = this.children.get(c.key), e.set(c, d), this.unpop(d), d.present = !0) : (d = this.addChar(c, { startDigitsAtZero: !0, animateIn: !0 }), s.set(c, d)), t[l](d.el);
-    }, { reverse: a });
-    const f = t.getBoundingClientRect();
-    s.forEach((c) => {
-      c.willUpdate(f);
-    }), s.forEach((c, d) => {
-      c.update(d.value);
-    }), e.forEach((c, d) => {
-      c.update(d.value);
+  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;
+    this.el.style.setProperty("--width", String(i)), this.el.animate({
+      [z]: [`${e}px`, "0px"],
+      [J]: [s, 0]
+    }, {
+      ...this.flow.transformTiming,
+      composite: "accumulate"
     });
   }
 }
-var $, M, A, N, B, L;
-class at extends dt {
-  constructor(t, s, { className: e, ...a }) {
-    let l;
-    super(t, s, {
-      ...a,
-      className: `${e ?? ""} section--masked`
-    }, (f) => [
-      l = y("span", {
-        className: "section__inner"
-      }, f)
-    ]);
-    r(this, $);
-    r(this, M);
-    r(this, A);
-    r(this, N);
-    r(this, B);
-    r(this, L);
-    h(this, $, l);
+T = /* @__PURE__ */ new WeakMap(), x = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), D = /* @__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,
+      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 ct(this, t.type, e ? 0 : t.value, {
+      ...i,
+      onRemove: this.onCharRemove(t.key)
+    }) : new St(this, t.type, t.value, {
+      ...i,
+      onRemove: this.onCharRemove(t.key)
+    });
+    return this.children.set(t.key, s), s;
   }
-  willUpdate(t) {
-    const s = this.el.getBoundingClientRect();
-    h(this, M, s.width), h(this, A, s[this.justify] - t[this.justify]);
-    const e = o(this, $).getBoundingClientRect();
-    this.children.forEach((a) => a.willUpdate(e));
+  unpop(t) {
+    t.el.classList.remove("section__exiting"), t.el.style[this.justify] = "";
   }
-  update(t) {
-    const s = /* @__PURE__ */ new Map();
-    this.children.forEach((e, a) => {
-      t.find((l) => l.key === a) || s.set(a, e), this.unpop(e);
-    }), this.addNewAndUpdateExisting(t, o(this, $)), s.forEach((e) => {
-      e instanceof pt && e.update(0);
-    }), this.pop(s);
+  pop(t) {
+    t.forEach((e) => {
+      e.el.style[this.justify] = `${ft(e.el, this.justify)}px`;
+    }), t.forEach((e) => {
+      e.el.classList.add("section__exiting"), e.present = !1;
+    });
   }
-  didUpdate(t) {
-    var c, d, x, U;
-    (c = o(this, N)) == null || c.cancel(), (d = o(this, L)) == null || d.cancel(), (x = o(this, B)) == null || x.cancel();
-    const s = this.el.getBoundingClientRect(), e = s[this.justify] - t[this.justify], a = o(this, A) - e, l = Math.max(o(this, M), 0.01) / Math.max(s.width, 0.01), f = o(this, $).getBoundingClientRect();
-    this.children.forEach((_) => _.didUpdate(f)), h(this, N, this.el.animate({
-      transform: [`translateX(${a}px) scaleX(${l})`, "none"]
-    }, this.flow.xTiming)), l !== 1 && (h(this, L, (U = o(this, $)) == null ? void 0 : U.animate({
-      // 1/x isn't linear so we need to do sampling:
-      transform: kt(1e3, (_) => `scaleX(${1 / ot(l, 1, _)})`)
-    }, this.flow.xTiming)), h(this, B, this.el.animate(vt(1e3, (_) => ({
-      "--_number-flow-scale-x": ot(l, 1, _)
-    })), this.flow.xTiming)));
+  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);
+    }, { 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);
+    });
   }
-}
-$ = new WeakMap(), M = new WeakMap(), A = new WeakMap(), N = new WeakMap(), B = new WeakMap(), L = new WeakMap();
-var H, P;
-class lt extends dt {
-  constructor() {
-    super(...arguments);
-    r(this, H);
-    r(this, P);
+  willUpdate() {
+    const t = this.el.getBoundingClientRect();
+    h(this, F, t[this.justify], "f"), this.children.forEach((e) => e.willUpdate(t));
   }
-  willUpdate(t) {
-    const s = this.el.getBoundingClientRect();
-    h(this, H, s[this.justify] - t[this.justify]), this.children.forEach((e) => e.willUpdate(s));
+  didUpdate() {
+    const t = this.el.getBoundingClientRect();
+    this.children.forEach((s) => s.didUpdate(t));
+    const e = t[this.justify], i = n(this, F, "f") - e;
+    this.el.animate({
+      transform: [`translateX(${i}px)`, "none"]
+    }, {
+      ...this.flow.transformTiming,
+      composite: "accumulate"
+    });
   }
+}
+F = /* @__PURE__ */ new WeakMap();
+class nt extends lt {
   update(t) {
-    const s = /* @__PURE__ */ new Map();
-    this.children.forEach((e, a) => {
-      t.find((l) => l.key === a) || s.set(a, e);
-    }), this.pop(s), this.addNewAndUpdateExisting(t);
+    const e = /* @__PURE__ */ 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 ct && i.update(0);
+    }), this.pop(e);
   }
-  didUpdate(t) {
-    var a;
-    (a = o(this, P)) == null || a.cancel();
-    const s = this.el.getBoundingClientRect(), e = s[this.justify] - t[this.justify];
-    this.children.forEach((l) => l.didUpdate(s)), h(this, P, this.el.animate({
-      transform: [`translateX(${o(this, H) - e}px)`, "none"]
-    }, this.flow.xTiming));
+}
+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.pop(e), this.addNewAndUpdateExisting(t);
   }
 }
-H = new WeakMap(), P = new WeakMap();
-var j, W, R;
-class J {
-  constructor(i, t, { onRemove: s, animateIn: e = !1 } = {}) {
-    u(this, "flow");
-    u(this, "el");
-    r(this, j, !0);
-    r(this, W);
-    r(this, R);
-    this.flow = i, this.el = t, e && this.el.animate({
-      opacity: ["0", "1"]
-    }, i.fadeTiming), h(this, W, s);
+class q {
+  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.el.classList.add("animate-presence"), this.flow.animated && s && this.el.animate({
+      [X]: [-0.9999, 0]
+    }, {
+      ...this.flow.opacityTiming,
+      composite: "accumulate"
+    }), h(this, O, i, "f");
   }
   get present() {
-    return o(this, j);
+    return n(this, W, "f");
   }
-  set present(i) {
-    var s;
-    if (o(this, j) === i)
-      return;
-    const t = getComputedStyle(this.el).getPropertyValue("opacity");
-    (s = o(this, R)) == null || s.cancel(), h(this, R, this.el.animate({
-      opacity: [t, i ? "1" : "0"]
-    }, this.flow.fadeTiming)), i || (o(this, R).onfinish = () => {
-      var e;
-      this.el.remove(), (e = o(this, W)) == null || e.call(this);
-    }), h(this, j, i);
+  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);
+        return;
+      }
+      this.el.style.setProperty("--_number-flow-d-opacity", t ? "0" : "-.999"), this.el.animate({
+        [X]: 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"), {
+        once: !0
+      });
+    }
   }
 }
-j = new WeakMap(), W = new WeakMap(), R = new WeakMap();
-class ft extends J {
-  constructor(t, s, e, a) {
-    super(t.flow, e, a);
-    u(this, "section");
-    u(this, "value");
-    u(this, "el");
-    this.section = t, this.value = s, this.el = e;
+W = /* @__PURE__ */ new WeakMap(), O = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap();
+class ht extends q {
+  constructor(t, e, i, s) {
+    super(t.flow, i, s), this.section = t, this.value = e, this.el = i;
   }
 }
-var S, X, z, O, D;
-class pt extends ft {
-  constructor(t, s, e, a) {
-    super(t, e, y("span", {
-      className: "digit",
-      // part: `digit ${type} ${value}`,
-      textContent: e + ""
-    }), a);
-    r(this, S);
-    // Relative to parent:
-    r(this, X);
-    r(this, z);
-    r(this, O);
-    r(this, D);
+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", {
+      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, () => {
+      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;
   }
   willUpdate(t) {
-    h(this, S, this.value);
-    const s = this.el.getBoundingClientRect();
-    h(this, X, s.y - t.y);
-    const e = s[this.section.justify] - t[this.section.justify], a = s.width / 2;
-    h(this, z, this.section.justify === "left" ? e + a : e - a);
+    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, B, this.section.justify === "left" ? i + s : i - s, "f");
   }
   update(t) {
-    this.value = t, o(this, S) !== t && gt(this.el, [
-      ...t === 0 ? [] : [
-        y("span", { className: "digit__stack digit__lt" }, Array.from({ length: t }, (s, e) => y("span", { textContent: e + "" })))
-      ],
-      document.createTextNode(t + ""),
-      ...t === 9 ? [] : [
-        y("span", { className: "digit__stack digit__gt" }, Array.from({ length: 9 - t }, (s, e) => y("span", { textContent: t + e + 1 + "" })))
-      ]
-    ]);
+    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;
   }
   didUpdate(t) {
-    var d, x;
-    (d = o(this, O)) == null || d.cancel(), o(this, S) !== this.value && ((x = o(this, D)) == null || x.cancel());
-    const s = this.el.getBoundingClientRect(), e = s[this.section.justify] - t[this.section.justify], a = s.width / 2, l = this.section.justify === "left" ? e + a : e - a, f = `translateX(${o(this, z) - l}px)`, c = `translateY(calc((100% + ${g}) * ${this.value - o(this, S)} + ${o(this, X)}px))`;
-    h(this, O, this.el.animate({
-      transform: [et ? f : `${f} ${c}`, "none"]
+    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"]
     }, {
-      ...this.flow.xTiming,
+      ...this.flow.transformTiming,
       composite: "accumulate"
-      // in case there's an in-flight y animation
-    })), et && o(this, S) !== this.value && h(this, D, this.el.animate({
-      transform: [c, "none"]
+    }), 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.yTiming,
+      ...this.flow.spinTiming ?? this.flow.transformTiming,
       composite: "accumulate"
-    }));
+    }), this.flow.addEventListener("animationsfinish", n(this, Z, "f"), { once: !0 });
   }
 }
-S = new WeakMap(), X = new WeakMap(), z = new WeakMap(), O = new WeakMap(), D = new WeakMap();
-var w, I, F, V;
-class jt extends ft {
-  constructor(t, s, e, a) {
-    const l = y("span", {
+U = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), Z = /* @__PURE__ */ new WeakMap();
+class St extends ht {
+  constructor(t, e, i, s) {
+    const o = g("span", {
       className: "symbol__value",
-      textContent: e
+      textContent: i
     });
-    super(t, e, y("span", {
+    super(t, i, g("span", {
       className: "symbol"
-    }, [l]), a);
-    u(this, "type");
-    r(this, w, /* @__PURE__ */ new Map());
-    r(this, I);
-    r(this, F, (t) => () => {
-      o(this, w).delete(t);
-    });
-    r(this, V);
-    this.type = s, o(this, w).set(e, new J(this.flow, l, {
-      onRemove: o(this, F).call(this, e)
+    }, [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)
     }));
   }
   willUpdate(t) {
     if (this.type === "decimal")
       return;
-    const s = this.el.getBoundingClientRect();
-    h(this, I, s[this.section.justify] - t[this.section.justify]);
+    const e = this.el.getBoundingClientRect();
+    h(this, H, e[this.section.justify] - t[this.section.justify], "f");
   }
   update(t) {
     if (this.value !== t) {
-      const s = o(this, w).get(this.value);
-      if (s.present = !1, s.el.classList.add("symbol__exiting"), o(this, w).has(t)) {
-        const e = o(this, w).get(t);
-        e.present = !0, e.el.classList.remove("symbol__exiting");
+      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 e = y("span", {
+        const i = g("span", {
           className: "symbol__value",
           textContent: t
         });
-        this.el.appendChild(e), o(this, w).set(t, new J(this.flow, e, {
+        this.el.appendChild(i), n(this, w, "f").set(t, new q(this.flow, i, {
           animateIn: !0,
-          onRemove: o(this, F).call(this, t)
+          onRemove: n(this, V, "f").call(this, t)
         }));
       }
     }
     this.value = t;
   }
   didUpdate(t) {
-    var a;
     if (this.type === "decimal")
       return;
-    (a = o(this, V)) == null || a.cancel();
-    const e = this.el.getBoundingClientRect()[this.section.justify] - t[this.section.justify];
-    h(this, V, this.el.animate({
-      transform: [`translateX(${o(this, I) - e}px)`, "none"]
-    }, this.flow.xTiming));
+    const i = this.el.getBoundingClientRect()[this.section.justify] - t[this.section.justify];
+    this.el.animate({
+      transform: [`translateX(${n(this, H, "f") - i}px)`, "none"]
+    }, { ...this.flow.transformTiming, composite: "accumulate" });
   }
 }
-w = new WeakMap(), I = new WeakMap(), F = new WeakMap(), V = new WeakMap();
+w = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap(), V = /* @__PURE__ */ new WeakMap();
 export {
-  Mt as NumberFlowLite,
-  Ct as SlottedTag,
-  $t as defaultFadeTiming,
-  ht as defaultXTiming,
-  St as defaultYTiming,
-  Et as partitionParts,
-  Tt as slottedStyles,
-  et as supportsAnimationComposition,
-  bt as supportsLinear
+  Et as NumberFlowLite,
+  wt as SlottedTag,
+  yt as canAnimate,
+  _t as defaultOpacityTiming,
+  vt as defaultTransformTiming,
+  kt as partitionParts,
+  K as prefersReducedMotion,
+  $t as slottedStyles
 };

package/dist/styles.d.ts

@@ -1,14 +1,21 @@
-export declare const supportsLinear: boolean;
+export declare const supportsMod: boolean;
+export declare const prefersReducedMotion: MediaQueryList | null;
+export declare const opacityDeltaVar = "--_number-flow-d-opacity";
+export declare const widthDeltaVar = "--_number-flow-d-width";
+export declare const dxVar = "--_number-flow-dx";
+export declare const deltaVar = "--_number-flow-d";
 export declare const supportsAtProperty: boolean;
-export declare const supportsAnimationComposition: boolean;
 export declare const charHeight = "var(--number-flow-char-height, 1em)";
 export declare const maskHeight = "var(--number-flow-mask-height, 0.25em)";
 export declare const SlottedTag = "span";
-export declare const slottedStyles: {
+export declare const slottedStyles: ({ willChange }: {
+    willChange?: boolean;
+}) => {
     readonly fontKerning: "none";
     readonly display: "inline-block";
     readonly lineHeight: "var(--number-flow-char-height, 1em)";
     readonly padding: "var(--number-flow-mask-height, 0.25em) 0";
+    readonly willChange: "transform" | undefined;
 };
 declare const styles: string;
 export default styles;

package/dist/util/dom.d.ts

@@ -5,7 +5,6 @@ export type HTMLProps<K extends keyof HTMLElementTagNameMap> = Partial<ExcludeRe
     part: string;
 }>;
 export declare const createElement: <K extends keyof HTMLElementTagNameMap>(tagName: K, optionsOrChildren?: HTMLProps<K> | Node[], _children?: Node[]) => HTMLElementTagNameMap[K];
-export declare const replaceChildren: (el: HTMLElement, children: Node[]) => void;
 export type Justify = 'left' | 'right';
 export declare const offset: (el: HTMLElement, justify: Justify) => number;
 export {};

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.3",
+  "version": "0.3.0",
   "author": {
     "name": "Maxwell Barvian",
     "email": "max@barvian.me",
@@ -44,18 +44,23 @@
   },
   "devDependencies": {
     "@rollup/plugin-typescript": "^12.1.0",
+    "@testing-library/dom": "^10.4.0",
+    "@vitest/browser": "^2.1.2",
     "babel-plugin-styled-components": "^2.1.4",
     "magic-string": "^0.30.11",
     "parse-literals": "^1.2.1",
-    "vite": "^5.4.3",
+    "playwright": "^1.48.0",
+    "tslib": "^2.7.0",
     "typescript": "^5.6.2",
-    "tslib": "^2.7.0"
+    "vite": "^5.4.3",
+    "vitest": "^2.1.2"
   },
   "dependencies": {
     "esm-env": "^1.0.0"
   },
   "scripts": {
     "build": "vite build --mode production",
-    "dev": "vite build --mode development --watch"
+    "dev": "vite build --mode development --watch",
+    "test:unit": "vitest"
   }
 }

package/dist/util/animate.d.ts

@@ -1,6 +0,0 @@
-export declare function frames<F extends string | (number | null)>(durationMs: number, frame: (t: number) => F, fps?: number): F[];
-export type CustomPropertyKeyframes = {
-    [property: `--${string}`]: string | number | null | undefined;
-};
-export declare function customPropertyFrames(durationMs: number, frame: (t: number) => CustomPropertyKeyframes, fps?: number): CustomPropertyKeyframes[];
-export declare const lerp: (min: number, max: number, weight: number) => number;