number-flow 0.2.1 → 0.2.3

package/dist/index.d.ts

@@ -2,10 +2,6 @@ import { type PartitionedParts } from './formatter';
 import { ServerSafeHTMLElement } from './ssr';
 export { SlottedTag, slottedStyles, supportsAnimationComposition, supportsLinear } from './styles';
 export * from './formatter';
-export declare const defaultXTimingLinearDuration = 900;
-export declare const defaultXTimingLinearPoints: number[];
-export declare const defaultXTimingFallbackDuration = 900;
-export declare const defaultXTimingFallbackPoints: number[];
 export declare const defaultFadeTiming: EffectTiming;
 export declare const defaultXTiming: EffectTiming;
 export declare const defaultYTiming: EffectTiming;

package/dist/index.js

@@ -1 +1 @@
-"use strict";var St=Object.defineProperty;var et=n=>{throw TypeError(n)};var kt=(n,i,t)=>i in n?St(n,i,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[i]=t;var u=(n,i,t)=>kt(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},Ct=(n,i)=>{typeof Element.prototype.replaceChildren>"u"?(n.innerHTML="",i.forEach(t=>n.appendChild(t))):n.replaceChildren(...i)},vt=(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 $t(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 Rt(n,i){const t=i.formatToParts(n),s=[],e=[],a=[],l=[],f={},c=p=>(f[p]||(f[p]=0),`${p}:${f[p]++}`);let d="",b=!1,T=!1;for(const p of t){d+=p.value;const m=p.type==="minusSign"||p.type==="plusSign"?"sign":p.type;m==="integer"?(b=!0,e.push(...p.value.split("").map(Z=>({type:m,value:parseInt(Z)})))):m==="group"?e.push({type:m,value:p.value}):m==="decimal"?(T=!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)}))):(b||T?l:s).push({type:m,value:p.value,key:c(m)})}const x=[];for(let p=e.length-1;p>=0;p--)x.unshift({...e[p],key:c(e[p].type)});return{pre:s,integer:x,fraction:a,post:l,formatted:d}}const jt=V.BROWSER?HTMLElement:class{},Tt=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.15em)",E="var(--number-flow-mask-width, 0.5em)",G=`${E} * 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",Et={fontKerning:"none",display:"inline-block",lineHeight:dt,padding:`${g} 0`},ot=Tt`: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:${E};margin-right:calc(-1 * ${E});-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:${E};margin-left:calc(-1 * ${E});-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 Ut(n,i,t=60){const s=Math.trunc(n/1e3*t);return Array.from({length:s},(e,a)=>i(a/(s-1)))}function Mt(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=900,ut=[0,.0050235113985758065,.018768235438646315,.0394665067267097,.06561435806809059,.09593671402266707,.12935688367555642,.16496984329827014,.2020188582086,.2398750451603972,.2780195227408494,.316027838175776,.35355639522427323,.3903306400002338,.42613479005042487,.4608029172568362,.494211217479539,.5262713196397582,.5569245044497536,.5861367184830215,.6138942829733466,.6402002088371546,.6650710401106178,.688534157441182,.7106254816148533,.7313875244620506,.7508677409782638,.7691171422207626,.7861891335875677,.8021385475282429,.8170208436473976,.830891452602792,.8438052432253264,.8558160949464902,.8669765599529741,.8773376015362415,.8869483969005642,.8958561942662493,.9041062154819053,.9117415965639958,.9188033596342844,.9253304106443357,.9313595580771787,.9369255485137984,.9420611155589194,.9467970391476751,.9511622127120402,.9551837160819846,.9588868923388109,.9622954271337615,.9654314292396703,.9683155113223428,.9709668701061009,.9734033652684989,.9756415965361696,.9776969785701735,.9795838133278193,.9813153596710892,.9829039000616127,.9843608042404175,.985696589839041,.986920979908387,.9880429573842098,.989070816534304,.990012211453356,.9908742016877166,.9916632950848158,.9923854879711473,.9930463027692117,.9936508231680027,.994203726963899,.9947093166895601,.9951715481478591,.9955940569663103,.9959801832850321,.9963329946882337,.9966553074856583,.9969497064465007,.9972185630841328,.9974640525856172,.9976881694755444,.9978927420992383,.9980794460059083,.998249816307907,.9984052590879293,.998547061921768,.9986764035801687,.9987943629693811,.9989019273662413,1],mt=900,gt=[.32,.72,0,1],yt={duration:500,easing:"ease-out"},tt=ct?{duration:pt,easing:`linear(${ut.join(",")})`}:{duration:mt,easing:`cubic-bezier(${gt.join(",")})`},wt=tt;let q;var U,_,S,k,C;class At extends jt{constructor(){super(...arguments);u(this,"xTiming",tt);u(this,"yTiming",wt);u(this,"fadeTiming",yt);u(this,"root",!1);u(this,"manual",!1);r(this,U,!1);r(this,_);r(this,S);r(this,k);r(this,C)}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,_).update(s),o(this,S).update(e),o(this,k).update(a),o(this,C).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,_,new rt(this,s,{inert:!0,ariaHidden:"true",justify:"right"})),this.shadowRoot.appendChild(o(this,_).el),h(this,S,new lt(this,e,{inert:!0,ariaHidden:"true",justify:"right"})),this.shadowRoot.appendChild(o(this,S).el),h(this,k,new lt(this,a,{inert:!0,ariaHidden:"true",justify:"left"})),this.shadowRoot.appendChild(o(this,k).el),h(this,C,new rt(this,l,{inert:!0,ariaHidden:"true",justify:"left"})),this.shadowRoot.appendChild(o(this,C).el)}h(this,U,!0)}willUpdate(){const t=this.root?this.getBoundingClientRect():new DOMRect;o(this,_).willUpdate(t),o(this,S).willUpdate(t),o(this,k).willUpdate(t),o(this,C).willUpdate(t)}didUpdate(){const t=this.root?this.getBoundingClientRect():new DOMRect;o(this,_).didUpdate(t),o(this,S).didUpdate(t),o(this,k).didUpdate(t),o(this,C).didUpdate(t)}}U=new WeakMap,_=new WeakMap,S=new WeakMap,k=new WeakMap,C=new WeakMap;class bt{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 _t(this,i.type,t?0:i.value,{...s,onRemove:this.onCharRemove(i.key)}):new Bt(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]=`${vt(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";$t(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 v,M,A,B,L,N;class lt extends bt{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,v);r(this,M);r(this,A);r(this,B);r(this,L);r(this,N);h(this,v,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,v).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,v)),s.forEach(e=>{e instanceof _t&&e.update(0)}),this.pop(s)}didUpdate(t){var c,d,b,T;(c=o(this,B))==null||c.cancel(),(d=o(this,N))==null||d.cancel(),(b=o(this,L))==null||b.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,v).getBoundingClientRect();this.children.forEach(x=>x.didUpdate(f)),h(this,B,this.el.animate({transform:[`translateX(${a}px) scaleX(${l})`,"none"]},this.flow.xTiming)),l!==1&&(h(this,N,(T=o(this,v))==null?void 0:T.animate({transform:Ut(1e3,x=>`scaleX(${1/at(l,1,x)})`)},this.flow.xTiming)),h(this,L,this.el.animate(Mt(1e3,x=>({"--_number-flow-scale-x":at(l,1,x)})),this.flow.xTiming)))}}v=new WeakMap,M=new WeakMap,A=new WeakMap,B=new WeakMap,L=new WeakMap,N=new WeakMap;var P,X;class rt extends bt{constructor(){super(...arguments);r(this,P);r(this,X)}willUpdate(t){const s=this.el.getBoundingClientRect();h(this,P,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,X))==null||a.cancel();const s=this.el.getBoundingClientRect(),e=s[this.justify]-t[this.justify];this.children.forEach(l=>l.didUpdate(s)),h(this,X,this.el.animate({transform:[`translateX(${o(this,P)-e}px)`,"none"]},this.flow.xTiming))}}P=new WeakMap,X=new WeakMap;var R,W,j;class Q{constructor(i,t,{onRemove:s,animateIn:e=!1}={}){u(this,"flow");u(this,"el");r(this,R,!0);r(this,W);r(this,j);this.flow=i,this.el=t,e&&this.el.animate({opacity:["0","1"]},i.fadeTiming),h(this,W,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,W))==null||e.call(this)}),h(this,R,i)}}R=new WeakMap,W=new WeakMap,j=new WeakMap;class xt 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 $,H,O,D,F;class _t extends xt{constructor(t,s,e,a){super(t,e,y("span",{className:"digit",textContent:e+""}),a);r(this,$);r(this,H);r(this,O);r(this,D);r(this,F)}willUpdate(t){h(this,$,this.value);const s=this.el.getBoundingClientRect();h(this,H,s.y-t.y);const e=s[this.section.justify]-t[this.section.justify],a=s.width/2;h(this,O,this.section.justify==="left"?e+a:e-a)}update(t){this.value=t,o(this,$)!==t&&Ct(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,b;(d=o(this,D))==null||d.cancel(),o(this,$)!==this.value&&((b=o(this,F))==null||b.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,O)-l}px)`,c=`translateY(calc((100% + ${g}) * ${this.value-o(this,$)} + ${o(this,H)}px))`;h(this,D,this.el.animate({transform:[J?f:`${f} ${c}`,"none"]},{...this.flow.xTiming,composite:"accumulate"})),J&&o(this,$)!==this.value&&h(this,F,this.el.animate({transform:[c,"none"]},{...this.flow.yTiming,composite:"accumulate"}))}}$=new WeakMap,H=new WeakMap,O=new WeakMap,D=new WeakMap,F=new WeakMap;var w,z,I,Y;class Bt extends xt{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,z);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,z,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,z)-e}px)`,"none"]},this.flow.xTiming))}}w=new WeakMap,z=new WeakMap,I=new WeakMap,Y=new WeakMap;exports.NumberFlowLite=At;exports.SlottedTag=ft;exports.defaultFadeTiming=yt;exports.defaultXTiming=tt;exports.defaultXTimingFallbackDuration=mt;exports.defaultXTimingFallbackPoints=gt;exports.defaultXTimingLinearDuration=pt;exports.defaultXTimingLinearPoints=ut;exports.defaultYTiming=wt;exports.partitionParts=Rt;exports.slottedStyles=Et;exports.supportsAnimationComposition=J;exports.supportsLinear=ct;
+"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;

package/dist/index.mjs

@@ -20,7 +20,7 @@ function wt(n, i, { reverse: t = !1 } = {}) {
   for (let e = t ? s - 1 : 0; t ? e >= 0 : e < s; t ? e-- : e++)
     i(n[e], e);
 }
-function Nt(n, i) {
+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) {
@@ -49,17 +49,17 @@ if (rt)
     });
   } catch {
   }
-const ct = "var(--number-flow-char-height, 1em)", g = "var(--number-flow-mask-height, 0.15em)", 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%", kt = "span", Bt = {
+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 = {
   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(${kt}){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 Ct(n, i, t = 60) {
+}, 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 $t(n, i, t = 60) {
+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) => ({
@@ -71,29 +71,29 @@ function $t(n, i, t = 60) {
     offset: 0
   }), e;
 }
-const ot = (n, i, t) => n + (i - n) * t, vt = 900, St = [0, 0.0050235113985758065, 0.018768235438646315, 0.0394665067267097, 0.06561435806809059, 0.09593671402266707, 0.12935688367555642, 0.16496984329827014, 0.2020188582086, 0.2398750451603972, 0.2780195227408494, 0.316027838175776, 0.35355639522427323, 0.3903306400002338, 0.42613479005042487, 0.4608029172568362, 0.494211217479539, 0.5262713196397582, 0.5569245044497536, 0.5861367184830215, 0.6138942829733466, 0.6402002088371546, 0.6650710401106178, 0.688534157441182, 0.7106254816148533, 0.7313875244620506, 0.7508677409782638, 0.7691171422207626, 0.7861891335875677, 0.8021385475282429, 0.8170208436473976, 0.830891452602792, 0.8438052432253264, 0.8558160949464902, 0.8669765599529741, 0.8773376015362415, 0.8869483969005642, 0.8958561942662493, 0.9041062154819053, 0.9117415965639958, 0.9188033596342844, 0.9253304106443357, 0.9313595580771787, 0.9369255485137984, 0.9420611155589194, 0.9467970391476751, 0.9511622127120402, 0.9551837160819846, 0.9588868923388109, 0.9622954271337615, 0.9654314292396703, 0.9683155113223428, 0.9709668701061009, 0.9734033652684989, 0.9756415965361696, 0.9776969785701735, 0.9795838133278193, 0.9813153596710892, 0.9829039000616127, 0.9843608042404175, 0.985696589839041, 0.986920979908387, 0.9880429573842098, 0.989070816534304, 0.990012211453356, 0.9908742016877166, 0.9916632950848158, 0.9923854879711473, 0.9930463027692117, 0.9936508231680027, 0.994203726963899, 0.9947093166895601, 0.9951715481478591, 0.9955940569663103, 0.9959801832850321, 0.9963329946882337, 0.9966553074856583, 0.9969497064465007, 0.9972185630841328, 0.9974640525856172, 0.9976881694755444, 0.9978927420992383, 0.9980794460059083, 0.998249816307907, 0.9984052590879293, 0.998547061921768, 0.9986764035801687, 0.9987943629693811, 0.9989019273662413, 1], jt = 900, Rt = [0.32, 0.72, 0, 1], Ut = { duration: 500, easing: "ease-out" }, ht = bt ? {
-  duration: vt,
-  easing: `linear(${St.join(",")})`
+const ot = (n, i, t) => n + (i - n) * t, $t = { duration: 500, easing: "ease-out" }, ht = bt ? {
+  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: jt,
+  duration: 900,
   // Spring-like cubic-bezier stolen from Vaul: https://vaul.emilkowal.ski/
-  easing: `cubic-bezier(${Rt.join(",")})`
-}, Et = ht;
+  easing: "cubic-bezier(.32,.72,0,1)"
+}, St = ht;
 let G;
-var T, b, k, C, $;
-class Lt extends xt {
+var T, b, C, k, v;
+class Mt extends xt {
   constructor() {
     super(...arguments);
     u(this, "xTiming", ht);
-    u(this, "yTiming", Et);
-    u(this, "fadeTiming", Ut);
+    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, k);
     r(this, C);
-    r(this, $);
+    r(this, k);
+    r(this, v);
   }
   static define() {
     Y && customElements.define("number-flow", this);
@@ -103,7 +103,7 @@ class Lt extends xt {
       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, k).update(e), o(this, C).update(a), o(this, $).update(l), this.manual || this.didUpdate();
+      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];
@@ -116,35 +116,35 @@ class Lt extends xt {
         inert: !0,
         ariaHidden: "true",
         justify: "right"
-      })), this.shadowRoot.appendChild(o(this, b).el), h(this, k, new at(this, e, {
+      })), this.shadowRoot.appendChild(o(this, b).el), h(this, C, new at(this, e, {
         // part: 'integer',
         inert: !0,
         ariaHidden: "true",
         justify: "right"
-      })), this.shadowRoot.appendChild(o(this, k).el), h(this, C, new at(this, a, {
+      })), this.shadowRoot.appendChild(o(this, C).el), h(this, k, new at(this, a, {
         // part: 'fraction',
         inert: !0,
         ariaHidden: "true",
         justify: "left"
-      })), this.shadowRoot.appendChild(o(this, C).el), h(this, $, new lt(this, l, {
+      })), 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, $).el);
+      })), this.shadowRoot.appendChild(o(this, v).el);
     }
     h(this, T, !0);
   }
   willUpdate() {
     const t = this.root ? this.getBoundingClientRect() : new DOMRect();
-    o(this, b).willUpdate(t), o(this, k).willUpdate(t), o(this, C).willUpdate(t), o(this, $).willUpdate(t);
+    o(this, b).willUpdate(t), o(this, C).willUpdate(t), o(this, k).willUpdate(t), o(this, v).willUpdate(t);
   }
   didUpdate() {
     const t = this.root ? this.getBoundingClientRect() : new DOMRect();
-    o(this, b).didUpdate(t), o(this, k).didUpdate(t), o(this, C).didUpdate(t), o(this, $).didUpdate(t);
+    o(this, b).didUpdate(t), o(this, C).didUpdate(t), o(this, k).didUpdate(t), o(this, v).didUpdate(t);
   }
 }
-T = new WeakMap(), b = new WeakMap(), k = new WeakMap(), C = new WeakMap(), $ = new WeakMap();
+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");
@@ -166,7 +166,7 @@ class dt {
     const e = i.type === "integer" || i.type === "fraction" ? new pt(this, i.type, t ? 0 : i.value, {
       ...s,
       onRemove: this.onCharRemove(i.key)
-    }) : new Tt(this, i.type, i.value, {
+    }) : new jt(this, i.type, i.value, {
       ...s,
       onRemove: this.onCharRemove(i.key)
     });
@@ -198,7 +198,7 @@ class dt {
     });
   }
 }
-var v, M, A, N, B, L;
+var $, M, A, N, B, L;
 class at extends dt {
   constructor(t, s, { className: e, ...a }) {
     let l;
@@ -210,53 +210,53 @@ class at extends dt {
         className: "section__inner"
       }, f)
     ]);
-    r(this, v);
+    r(this, $);
     r(this, M);
     r(this, A);
     r(this, N);
     r(this, B);
     r(this, L);
-    h(this, v, l);
+    h(this, $, 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, v).getBoundingClientRect();
+    const e = o(this, $).getBoundingClientRect();
     this.children.forEach((a) => a.willUpdate(e));
   }
   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, v)), s.forEach((e) => {
+    }), this.addNewAndUpdateExisting(t, o(this, $)), s.forEach((e) => {
       e instanceof pt && e.update(0);
     }), this.pop(s);
   }
   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, v).getBoundingClientRect();
+    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, v)) == null ? void 0 : U.animate({
+    }, 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: Ct(1e3, (_) => `scaleX(${1 / ot(l, 1, _)})`)
-    }, this.flow.xTiming)), h(this, B, this.el.animate($t(1e3, (_) => ({
+      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)));
   }
 }
-v = new WeakMap(), M = new WeakMap(), A = new WeakMap(), N = new WeakMap(), B = new WeakMap(), L = new WeakMap();
-var P, H;
+$ = 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, P);
     r(this, H);
+    r(this, P);
   }
   willUpdate(t) {
     const s = this.el.getBoundingClientRect();
-    h(this, P, s[this.justify] - t[this.justify]), this.children.forEach((e) => e.willUpdate(s));
+    h(this, H, s[this.justify] - t[this.justify]), this.children.forEach((e) => e.willUpdate(s));
   }
   update(t) {
     const s = /* @__PURE__ */ new Map();
@@ -266,25 +266,25 @@ class lt extends dt {
   }
   didUpdate(t) {
     var a;
-    (a = o(this, H)) == null || a.cancel();
+    (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, H, this.el.animate({
-      transform: [`translateX(${o(this, P) - e}px)`, "none"]
+    this.children.forEach((l) => l.didUpdate(s)), h(this, P, this.el.animate({
+      transform: [`translateX(${o(this, H) - e}px)`, "none"]
     }, this.flow.xTiming));
   }
 }
-P = new WeakMap(), H = new WeakMap();
-var j, X, R;
+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, X);
+    r(this, W);
     r(this, R);
     this.flow = i, this.el = t, e && this.el.animate({
       opacity: ["0", "1"]
-    }, i.fadeTiming), h(this, X, s);
+    }, i.fadeTiming), h(this, W, s);
   }
   get present() {
     return o(this, j);
@@ -298,11 +298,11 @@ class J {
       opacity: [t, i ? "1" : "0"]
     }, this.flow.fadeTiming)), i || (o(this, R).onfinish = () => {
       var e;
-      this.el.remove(), (e = o(this, X)) == null || e.call(this);
+      this.el.remove(), (e = o(this, W)) == null || e.call(this);
     }), h(this, j, i);
   }
 }
-j = new WeakMap(), X = new WeakMap(), R = new WeakMap();
+j = new WeakMap(), W = new WeakMap(), R = new WeakMap();
 class ft extends J {
   constructor(t, s, e, a) {
     super(t.flow, e, a);
@@ -312,7 +312,7 @@ class ft extends J {
     this.section = t, this.value = s, this.el = e;
   }
 }
-var S, W, D, z, O;
+var S, X, z, O, D;
 class pt extends ft {
   constructor(t, s, e, a) {
     super(t, e, y("span", {
@@ -322,17 +322,17 @@ class pt extends ft {
     }), a);
     r(this, S);
     // Relative to parent:
-    r(this, W);
-    r(this, D);
+    r(this, X);
     r(this, z);
     r(this, O);
+    r(this, D);
   }
   willUpdate(t) {
     h(this, S, this.value);
     const s = this.el.getBoundingClientRect();
-    h(this, W, s.y - t.y);
+    h(this, X, s.y - t.y);
     const e = s[this.section.justify] - t[this.section.justify], a = s.width / 2;
-    h(this, D, this.section.justify === "left" ? e + a : e - a);
+    h(this, z, this.section.justify === "left" ? e + a : e - a);
   }
   update(t) {
     this.value = t, o(this, S) !== t && gt(this.el, [
@@ -347,15 +347,15 @@ class pt extends ft {
   }
   didUpdate(t) {
     var d, x;
-    (d = o(this, z)) == null || d.cancel(), o(this, S) !== this.value && ((x = o(this, O)) == 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, D) - l}px)`, c = `translateY(calc((100% + ${g}) * ${this.value - o(this, S)} + ${o(this, W)}px))`;
-    h(this, z, this.el.animate({
+    (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"]
     }, {
       ...this.flow.xTiming,
       composite: "accumulate"
       // in case there's an in-flight y animation
-    })), et && o(this, S) !== this.value && h(this, O, this.el.animate({
+    })), et && o(this, S) !== this.value && h(this, D, this.el.animate({
       transform: [c, "none"]
     }, {
       ...this.flow.yTiming,
@@ -363,9 +363,9 @@ class pt extends ft {
     }));
   }
 }
-S = new WeakMap(), W = new WeakMap(), D = new WeakMap(), z = new WeakMap(), O = new WeakMap();
-var w, F, I, V;
-class Tt extends ft {
+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", {
       className: "symbol__value",
@@ -376,20 +376,20 @@ class Tt extends ft {
     }, [l]), a);
     u(this, "type");
     r(this, w, /* @__PURE__ */ new Map());
-    r(this, F);
-    r(this, I, (t) => () => {
+    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, I).call(this, e)
+      onRemove: o(this, F).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]);
+    h(this, I, s[this.section.justify] - t[this.section.justify]);
   }
   update(t) {
     if (this.value !== t) {
@@ -404,7 +404,7 @@ class Tt extends ft {
         });
         this.el.appendChild(e), o(this, w).set(t, new J(this.flow, e, {
           animateIn: !0,
-          onRemove: o(this, I).call(this, t)
+          onRemove: o(this, F).call(this, t)
         }));
       }
     }
@@ -417,23 +417,19 @@ class Tt extends ft {
     (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, F) - e}px)`, "none"]
+      transform: [`translateX(${o(this, I) - e}px)`, "none"]
     }, this.flow.xTiming));
   }
 }
-w = new WeakMap(), F = new WeakMap(), I = new WeakMap(), V = new WeakMap();
+w = new WeakMap(), I = new WeakMap(), F = new WeakMap(), V = new WeakMap();
 export {
-  Lt as NumberFlowLite,
-  kt as SlottedTag,
-  Ut as defaultFadeTiming,
+  Mt as NumberFlowLite,
+  Ct as SlottedTag,
+  $t as defaultFadeTiming,
   ht as defaultXTiming,
-  jt as defaultXTimingFallbackDuration,
-  Rt as defaultXTimingFallbackPoints,
-  vt as defaultXTimingLinearDuration,
-  St as defaultXTimingLinearPoints,
-  Et as defaultYTiming,
-  Nt as partitionParts,
-  Bt as slottedStyles,
+  St as defaultYTiming,
+  Et as partitionParts,
+  Tt as slottedStyles,
   et as supportsAnimationComposition,
   bt as supportsLinear
 };

package/dist/styles.d.ts

@@ -2,13 +2,13 @@ export declare const supportsLinear: boolean;
 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.15em)";
+export declare const maskHeight = "var(--number-flow-mask-height, 0.25em)";
 export declare const SlottedTag = "span";
 export declare const slottedStyles: {
     readonly fontKerning: "none";
     readonly display: "inline-block";
     readonly lineHeight: "var(--number-flow-char-height, 1em)";
-    readonly padding: "var(--number-flow-mask-height, 0.15em) 0";
+    readonly padding: "var(--number-flow-mask-height, 0.25em) 0";
 };
 declare const styles: string;
 export default styles;

package/package.json

@@ -3,13 +3,13 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.1",
+  "version": "0.2.3",
   "author": {
     "name": "Maxwell Barvian",
     "email": "max@barvian.me",
     "url": "https://barvian.me"
   },
-  "description": "A lightweight component to transition and format numbers.",
+  "description": "A component to transition and format numbers.",
   "license": "MIT",
   "homepage": "https://number-flow.barvian.me/",
   "repository": {