@dialpad/dialtone-vue 4.4.1 → 4.5.0

package/dist/lib/motion-text/motion-text-constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"motion-text-constants.js","names":[],"sources":["../../../components/MotionText/MotionTextConstants.js"],"sourcesContent":["// Animation mode options\nexport const MOTION_TEXT_ANIMATION_MODES = [\n  'gradient-in',\n  'fade-in',\n  'slide-in',\n  'gradient-sweep',\n  'shimmer',\n  'none',\n];\n\n// Speed options\nexport const MOTION_TEXT_SPEEDS = ['100', '200', '300', '400', '500'];\n\n// Timing presets based on speed\nexport const MOTION_TEXT_TIMING_PRESETS = {\n  100: {\n    characterDelay: 10,\n    wordDelay: 15,\n    duration: 300,\n  },\n  200: {\n    characterDelay: 20,\n    wordDelay: 30,\n    duration: 600,\n  },\n  300: {\n    characterDelay: 30,\n    wordDelay: 50,\n    duration: 1000,\n  },\n  400: {\n    characterDelay: 50,\n    wordDelay: 100,\n    duration: 1500,\n  },\n  500: {\n    characterDelay: 80,\n    wordDelay: 180,\n    duration: 2100,\n  },\n};\n\nexport default {\n  MOTION_TEXT_ANIMATION_MODES,\n  MOTION_TEXT_SPEEDS,\n  MOTION_TEXT_TIMING_PRESETS,\n};\n"],"mappings":";AACA,IAAa,IAA8B;CACzC;CACA;CACA;CACA;CACA;CACA;CACD,EAGY,IAAqB;CAAC;CAAO;CAAO;CAAO;CAAO;CAAM,EAGxD,IAA6B;CACxC,KAAK;EACH,gBAAgB;EAChB,WAAW;EACX,UAAU;EACX;CACD,KAAK;EACH,gBAAgB;EAChB,WAAW;EACX,UAAU;EACX;CACD,KAAK;EACH,gBAAgB;EAChB,WAAW;EACX,UAAU;EACX;CACD,KAAK;EACH,gBAAgB;EAChB,WAAW;EACX,UAAU;EACX;CACD,KAAK;EACH,gBAAgB;EAChB,WAAW;EACX,UAAU;EACX;CACF,EAED,IAAe;CACb;CACA;CACA;CACD"}
+{"version":3,"file":"motion-text-constants.js","names":[],"sources":["../../../components/MotionText/MotionTextConstants.js"],"sourcesContent":["// Animation mode options\nexport const MOTION_TEXT_ANIMATION_MODES = [\n  'gradient-in',\n  'fade-in',\n  'slide-in',\n  'slide-in-gradient',\n  'gradient-sweep',\n  'shimmer',\n  'none',\n];\n\n// Speed options\nexport const MOTION_TEXT_SPEEDS = ['100', '200', '300', '400', '500'];\n\n// Timing presets based on speed. `duration` relative to the 300 preset sets how much\n// every motion timing is scaled (300 plays the design spec as authored).\n// `characterDelay` and `wordDelay` are deprecated: unused since animation became word-level,\n// kept so code reading them doesn't break.\nexport const MOTION_TEXT_TIMING_PRESETS = {\n  100: { characterDelay: 10, wordDelay: 15, duration: 300 },\n  200: { characterDelay: 20, wordDelay: 30, duration: 600 },\n  300: { characterDelay: 30, wordDelay: 50, duration: 1000 },\n  400: { characterDelay: 50, wordDelay: 100, duration: 1500 },\n  500: { characterDelay: 80, wordDelay: 180, duration: 2100 },\n};\n\n// Per-word animation tracks in ms at speed 300, from the Motion Text design spec.\n// Word `i` starts at `delay + stagger * i` and runs for `duration`.\nexport const MOTION_TEXT_TRACKS = {\n  // Word fades in (and rises, for slide modes)\n  enter: { delay: 0, stagger: 60, duration: 300 },\n  // Text color fades in over the gradient\n  reveal: { delay: 250, stagger: 50, duration: 300 },\n  // Word fades to the gradient, holds, then fades back over `fade`\n  sweep: { delay: 350, stagger: 120, duration: 1400, fade: 250 },\n  // A dimmed band sweeps left to right across the whole text at once (the original shimmer)\n  shimmer: { delay: 0, stagger: 0, duration: 3000 },\n};\n\n// `loopHold` is the pause after the last word settles before a looped animation restarts.\n// `wholeText` modes animate the whole element, so the text and slot render as-is (markup and live\n// updates are kept) instead of being split into words.\n// With the six-word Figma sample it reproduces the 2000ms (reveal) and 2650ms (sweep) loops.\nexport const MOTION_TEXT_MODE_SETTINGS = {\n  'gradient-in': { tracks: ['enter', 'reveal'], gradient: true, loopHold: 1200 },\n  'fade-in': { tracks: ['enter'], gradient: false, loopHold: 1400 },\n  'slide-in': { tracks: ['enter'], gradient: false, loopHold: 1400 },\n  'slide-in-gradient': { tracks: ['enter', 'reveal'], gradient: true, loopHold: 1200 },\n  'gradient-sweep': { tracks: ['sweep'], gradient: true, loopHold: 300 },\n  // Loops back to back, as the band starts and ends off the text\n  shimmer: { tracks: ['shimmer'], gradient: false, loopHold: 0, wholeText: true },\n  // Renders the text at rest, without animation\n  none: { tracks: [], gradient: false, loopHold: 0 },\n};\n\nexport default {\n  MOTION_TEXT_ANIMATION_MODES,\n  MOTION_TEXT_SPEEDS,\n  MOTION_TEXT_TIMING_PRESETS,\n  MOTION_TEXT_TRACKS,\n  MOTION_TEXT_MODE_SETTINGS,\n};\n"],"mappings":";AACA,IAAa,IAA8B;CACzC;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EAGY,IAAqB;CAAC;CAAO;CAAO;CAAO;CAAO;CAAM,EAMxD,IAA6B;CACxC,KAAK;EAAE,gBAAgB;EAAI,WAAW;EAAI,UAAU;EAAK;CACzD,KAAK;EAAE,gBAAgB;EAAI,WAAW;EAAI,UAAU;EAAK;CACzD,KAAK;EAAE,gBAAgB;EAAI,WAAW;EAAI,UAAU;EAAM;CAC1D,KAAK;EAAE,gBAAgB;EAAI,WAAW;EAAK,UAAU;EAAM;CAC3D,KAAK;EAAE,gBAAgB;EAAI,WAAW;EAAK,UAAU;EAAM;CAC5D,EAIY,IAAqB;CAEhC,OAAO;EAAE,OAAO;EAAG,SAAS;EAAI,UAAU;EAAK;CAE/C,QAAQ;EAAE,OAAO;EAAK,SAAS;EAAI,UAAU;EAAK;CAElD,OAAO;EAAE,OAAO;EAAK,SAAS;EAAK,UAAU;EAAM,MAAM;EAAK;CAE9D,SAAS;EAAE,OAAO;EAAG,SAAS;EAAG,UAAU;EAAM;CAClD,EAMY,IAA4B;CACvC,eAAe;EAAE,QAAQ,CAAC,SAAS,SAAS;EAAE,UAAU;EAAM,UAAU;EAAM;CAC9E,WAAW;EAAE,QAAQ,CAAC,QAAQ;EAAE,UAAU;EAAO,UAAU;EAAM;CACjE,YAAY;EAAE,QAAQ,CAAC,QAAQ;EAAE,UAAU;EAAO,UAAU;EAAM;CAClE,qBAAqB;EAAE,QAAQ,CAAC,SAAS,SAAS;EAAE,UAAU;EAAM,UAAU;EAAM;CACpF,kBAAkB;EAAE,QAAQ,CAAC,QAAQ;EAAE,UAAU;EAAM,UAAU;EAAK;CAEtE,SAAS;EAAE,QAAQ,CAAC,UAAU;EAAE,UAAU;EAAO,UAAU;EAAG,WAAW;EAAM;CAE/E,MAAM;EAAE,QAAQ,EAAE;EAAE,UAAU;EAAO,UAAU;EAAG;CACnD,EAED,IAAe;CACb;CACA;CACA;CACA;CACA;CACD"}

package/dist/lib/motion-text/motion-text.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`./motion-text-constants.cjs`);let n=require(`vue`);var r={name:`DtMotionText`,props:{text:{type:String,default:``},animationMode:{type:String,default:`gradient-in`,validator:e=>t.MOTION_TEXT_ANIMATION_MODES.includes(e)},speed:{type:[String,Number],default:300,validator:e=>t.MOTION_TEXT_SPEEDS.includes(String(e))},autoStart:{type:Boolean,default:!0},loop:{type:Boolean,default:!1},respectsReducedMotion:{type:Boolean,default:!0},screenReaderText:{type:String,default:``}},emits:[`start`,`complete`,`progress`,`pause`,`resume`],data(){return{words:[],visibleWordCount:0,visibleCharsPerWord:[],isAnimating:!1,isPaused:!1,isLooped:!1,animationTimeouts:[],prefersReducedMotion:!1,animationKey:0}},computed:{timing(){return t.MOTION_TEXT_TIMING_PRESETS[String(this.speed)]},componentStyles(){return{"--d-motion-text-duration":`${this.timing.duration}ms`,"--d-motion-text-char-duration":`${this.timing.duration}ms`,"--d-motion-text-word-duration":`${this.timing.duration*2}ms`}},isStaticAnimationMode(){return this.animationMode===`gradient-sweep`||this.animationMode===`shimmer`},motionTextClasses(){return[`d-motion-text`,`d-motion-text--${this.animationMode}`,{"d-motion-text--animating":this.isAnimating,"d-motion-text--paused":this.isPaused,"d-motion-text--looped":this.isLooped}]}},watch:{text(){this.reset(),this.initializeContent()},loop:{handler(e){this.isLooped=e},immediate:!0}},mounted(){this.checkReducedMotion(),this.initializeContent()},beforeUnmount(){this.clearTimeouts()},methods:{processTextToChars(e){let t=[],n=(e,r=0)=>{if(e.nodeType===Node.TEXT_NODE){let n=e.textContent?.match(/\S+\s*/g)||[];return t.push(...n.map((e,t)=>({text:e,chars:e.split(``),index:r+t}))),r+n.length}else if(e.nodeType===Node.ELEMENT_NODE){let t=r;return Array.from(e.childNodes).forEach(e=>{t=n(e,t)}),t}return r};return n(e),t},processDirectText(e){return e?(e.match(/\S+\s*/g)||[]).map((e,t)=>({text:e,chars:e.split(``),index:t})):[]},checkReducedMotion(){typeof window<`u`&&window.matchMedia&&(this.prefersReducedMotion=window.matchMedia(`(prefers-reduced-motion: reduce)`).matches)},clearTimeouts(){this.animationTimeouts.forEach(e=>clearTimeout(e)),this.animationTimeouts=[]},start(){if(!this.isAnimating){if(this.isAnimating=!0,this.isPaused=!1,this.$emit(`start`),this.respectsReducedMotion&&this.prefersReducedMotion){this.showAllContent();return}if(this.animationMode===`none`){this.showAllContent();return}this.isStaticAnimationMode||this.showNextWord()}},pause(){!this.isAnimating||this.isPaused||(this.isPaused=!0,this.clearTimeouts(),this.$emit(`pause`))},resume(){this.isPaused&&(this.isPaused=!1,this.$emit(`resume`),this.showNextWord())},reset(){this.clearTimeouts(),this.isAnimating=!1,this.isPaused=!1,this.visibleWordCount=0,this.visibleCharsPerWord=Array(this.words.length).fill(0),this.animationKey++},skipToEnd(){this.showAllContent()},showAllContent(){this.visibleWordCount=this.words.length,this.visibleCharsPerWord=this.words.map(e=>e.chars.length),setTimeout(()=>{this.isAnimating=!1,this.$emit(`complete`)},0)},showNextWord(){if(this.isPaused||this.visibleWordCount>=this.words.length){this.visibleWordCount>=this.words.length&&this.completeAnimation();return}let e=setTimeout(()=>{this.visibleWordCount++,this.$emit(`progress`,{wordsComplete:this.visibleWordCount,totalWords:this.words.length,progress:this.visibleWordCount/this.words.length}),this.animateCharsForWord(this.visibleWordCount-1)},this.timing.wordDelay);this.animationTimeouts.push(e)},animateCharsForWord(e){if(this.isPaused||e>=this.words.length)return;this.visibleCharsPerWord[e]=0;let t=this.words[e].chars.length,n=()=>{if(this.isPaused||this.visibleCharsPerWord[e]>=t){this.visibleCharsPerWord[e]>=t&&this.showNextWord();return}this.visibleCharsPerWord[e]++;let r=setTimeout(n,this.timing.characterDelay);this.animationTimeouts.push(r)};n()},completeAnimation(){if(this.isAnimating=!1,this.clearTimeouts(),this.$emit(`complete`),this.loop){let e=setTimeout(()=>{this.reset(),this.$nextTick(()=>{this.start()})},500);this.animationTimeouts.push(e)}},initializeContent(){if(this.isStaticAnimationMode){this.autoStart&&this.$nextTick(()=>this.start());return}this.text?this.words=this.processDirectText(this.text):this.$refs.contentRef&&(this.words=this.processTextToChars(this.$refs.contentRef)),this.visibleCharsPerWord=Array(this.words.length).fill(0),this.visibleWordCount=0,this.autoStart&&this.words.length>0&&this.$nextTick(()=>this.start())}}},i=[`data-text-content`,`aria-live`,`aria-label`],a={key:0,class:`d-motion-text__sr-only`},o=[`aria-hidden`],s=[`data-text-content`],c={key:3,class:`d-motion-text__fallback`};function l(e,t,r,l,u,d){return(0,n.openBlock)(),(0,n.createElementBlock)(`span`,{ref:`contentRef`,class:(0,n.normalizeClass)(d.motionTextClasses),style:(0,n.normalizeStyle)(d.componentStyles),"data-text-content":d.isStaticAnimationMode?r.text:void 0,"aria-live":u.isAnimating?`polite`:`off`,"aria-label":r.screenReaderText||void 0},[r.screenReaderText?((0,n.openBlock)(),(0,n.createElementBlock)(`span`,a,(0,n.toDisplayString)(r.screenReaderText),1)):(0,n.createCommentVNode)(``,!0),d.isStaticAnimationMode?((0,n.openBlock)(),(0,n.createElementBlock)(n.Fragment,{key:1},[(0,n.createTextVNode)((0,n.toDisplayString)(r.text)+` `,1),r.text?(0,n.createCommentVNode)(``,!0):(0,n.renderSlot)(e.$slots,`default`,{key:0})],64)):((0,n.openBlock)(),(0,n.createElementBlock)(`span`,{key:u.animationKey,class:`d-motion-text__content`,"aria-hidden":u.isAnimating},[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(u.words,(e,t)=>((0,n.openBlock)(),(0,n.createBlock)(n.Transition,{key:`${u.animationKey}-${t}`,name:`d-motion-text-word-${r.animationMode}`},{default:(0,n.withCtx)(()=>[t<u.visibleWordCount?((0,n.openBlock)(),(0,n.createElementBlock)(`span`,{key:0,class:`d-motion-text__word`,"data-text-content":e.text,style:(0,n.normalizeStyle)({"--word-index":t})},[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(e.chars,(e,i)=>((0,n.openBlock)(),(0,n.createBlock)(n.Transition,{key:`${u.animationKey}-${t}-${i}`,name:`d-motion-text-char-${r.animationMode}`},{default:(0,n.withCtx)(()=>[i<u.visibleCharsPerWord[t]?((0,n.openBlock)(),(0,n.createElementBlock)(`span`,{key:0,class:`d-motion-text__char`,style:(0,n.normalizeStyle)({"--char-index":i,"--char-delay":`${i*d.timing.characterDelay}ms`})},(0,n.toDisplayString)(e),5)):(0,n.createCommentVNode)(``,!0)]),_:2},1032,[`name`]))),128))],12,s)):(0,n.createCommentVNode)(``,!0)]),_:2},1032,[`name`]))),128))],8,o)),!u.words.length&&!r.text&&!d.isStaticAnimationMode?((0,n.openBlock)(),(0,n.createElementBlock)(`span`,c,[(0,n.renderSlot)(e.$slots,`default`)])):(0,n.createCommentVNode)(``,!0)],14,i)}var u=e.t(r,[[`render`,l]]);exports.default=u;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`./motion-text-constants.cjs`),n=require(`./utils.cjs`);let r=require(`vue`);var i=t.MOTION_TEXT_TIMING_PRESETS[300],a={tracks:[],gradient:!1,loopHold:0},o={name:`DtMotionText`,props:{text:{type:String,default:``},animationMode:{type:String,default:`gradient-in`,validator:e=>t.MOTION_TEXT_ANIMATION_MODES.includes(e)},speed:{type:[String,Number],default:300,validator:e=>t.MOTION_TEXT_SPEEDS.includes(String(e))},autoStart:{type:Boolean,default:!0},loop:{type:Boolean,default:!1},respectsReducedMotion:{type:Boolean,default:!0},screenReaderText:{type:String,default:``}},emits:[`start`,`complete`,`progress`,`pause`,`resume`],data(){return{words:n.splitWords(this.text),wordWidths:[],isRtl:!1,isAnimating:!1,isPaused:!1,isComplete:!1,isRestarting:!1,isLooped:!1,isUnmounted:!1,animationTimeouts:[],timelineStartedAt:0,timelineElapsed:0,prefersReducedMotion:!1,animationKey:0,cssIterations:1}},computed:{modeSettings(){return t.MOTION_TEXT_MODE_SETTINGS[this.animationMode]??a},isWholeText(){return!!this.modeSettings.wholeText},speedScale(){return(t.MOTION_TEXT_TIMING_PRESETS[String(this.speed)]??i).duration/i.duration},componentStyles(){let e={};return this.modeSettings.tracks.forEach(n=>{Object.entries(t.MOTION_TEXT_TRACKS[n]).forEach(([t,r])=>{e[`--d-motion-text-${n}-${t}`]=`${Math.round(r*this.speedScale)}ms`})}),e},wordStyles(){let e=this.modeSettings.gradient?n.getGradientSlices(this.wordWidths,this.isRtl):[];return this.words.map((t,n)=>{let r=e[n];return{"--d-motion-text-word-index":n,...r&&{"--d-motion-text-gradient-size":r.size,"--d-motion-text-gradient-position":r.position}}})},wordEndTimes(){return this.words.map((e,n)=>{let r=this.modeSettings.tracks.map(e=>{let{delay:r,stagger:i,duration:a}=t.MOTION_TEXT_TRACKS[e];return r+i*n+a});return Math.max(0,...r)*this.speedScale})},cycleDuration(){if(!this.isWholeText)return Math.max(0,...this.wordEndTimes);let e=this.modeSettings.tracks.map(e=>{let{delay:n,duration:r}=t.MOTION_TEXT_TRACKS[e];return n+r});return Math.max(0,...e)*this.speedScale*this.cssIterations},motionTextClasses(){return[`d-motion-text`,`d-motion-text--${this.animationMode}`,{"d-motion-text--animating":this.isAnimating,"d-motion-text--paused":this.isPaused,"d-motion-text--complete":this.isComplete,"d-motion-text--restarting":this.isRestarting,"d-motion-text--looped":this.isLooped,"d-motion-text--respects-reduced-motion":this.respectsReducedMotion}]}},watch:{text(){if(this.isWholeText){this.words=n.splitWords(this.text),this.isComplete&&this.autoStart&&!this.loop&&(this.reset(),this.$nextTick(()=>this.start()));return}if(this.reset(),this.text){this.initializeContent();return}this.words=[],this.$nextTick(()=>this.initializeContent())},animationMode(e,r){let i=!!t.MOTION_TEXT_MODE_SETTINGS[r]?.wholeText;if(!this.text&&i!==this.isWholeText){let e=this.isAnimating;this.reset(),this.words=[],this.$nextTick(()=>{this.words=n.splitWords(this.getSlotText()),this.wordWidths=[],e&&this.$nextTick(()=>this.start())});return}this.restartIfAnimating()},autoStart(e){e&&!this.isAnimating&&(this.isWholeText||this.words.length)&&this.$nextTick(()=>this.start())},speed(){this.restartIfAnimating()},loop:{handler(e){this.isLooped=e,this.isAnimating&&!this.isPaused&&(this.timelineElapsed=Date.now()-this.timelineStartedAt,this.clearTimeouts(),this.runTimeline())},immediate:!0}},mounted(){this.initWatchReducedMotion(),this.initializeContent(),document.fonts?.ready.then(()=>{!this.isUnmounted&&this.isAnimating&&this.measureWords()})},beforeUnmount(){this.isUnmounted=!0,this.clearTimeouts(),this.stopWatchingReducedMotion?.()},methods:{getSlotText(){return this.$refs.slotRef?.textContent||``},initWatchReducedMotion(){if(typeof window>`u`||!window.matchMedia)return;let e=window.matchMedia(`(prefers-reduced-motion: reduce)`),t=e=>{this.prefersReducedMotion=e.matches,e.matches&&this.respectsReducedMotion&&this.isAnimating&&this.skipToEnd()};this.prefersReducedMotion=e.matches,e.addEventListener?.(`change`,t),this.stopWatchingReducedMotion=()=>e.removeEventListener?.(`change`,t)},measureWords(){if(!this.modeSettings.gradient)return;let e=this.$refs.contentRef?.querySelectorAll(`.d-motion-text__word`)||[],t=Array.from(e,e=>e.getBoundingClientRect().width);this.isRtl=window.getComputedStyle(this.$el).direction===`rtl`,this.wordWidths=t.length===this.words.length&&t.every(e=>e>0)?t:this.words.map(e=>e.text.length)},clearTimeouts(){this.animationTimeouts.forEach(e=>clearTimeout(e)),this.animationTimeouts=[]},schedule(e,t){this.animationTimeouts.push(setTimeout(t,Math.max(0,e)))},runTimeline(){let e=this.timelineElapsed,t=this.words.length,n=this.cycleDuration;if(this.timelineStartedAt=Date.now()-e,(this.isWholeText?[]:this.wordEndTimes).forEach((n,r)=>{n<=e||this.schedule(n-e,()=>{this.$emit(`progress`,{wordsComplete:r+1,totalWords:t,progress:(r+1)/t})})}),n>e&&this.schedule(n-e,()=>this.completeAnimation()),this.loop){let t=n+this.modeSettings.loopHold*this.speedScale;this.schedule(t-e,()=>this.restartCycle())}else n<=e&&this.finishAnimation()},start(){if(!(this.isAnimating||this.isUnmounted)){if(this.clearTimeouts(),this.isAnimating=!0,this.isPaused=!1,this.isComplete=!1,this.$emit(`start`),this.respectsReducedMotion&&this.prefersReducedMotion){this.showAllContent();return}if(!this.modeSettings.tracks.length||!this.isWholeText&&!this.words.length){this.showAllContent();return}this.measureWords(),this.cssIterations=this.readCssIterations(),this.timelineElapsed=0,this.runTimeline()}},readCssIterations(){if(!this.isWholeText||this.loop)return 1;let e=parseFloat(window.getComputedStyle(this.$el).animationIterationCount);return Number.isFinite(e)&&e>1?e:1},pause(){!this.isAnimating||this.isPaused||(this.timelineElapsed=Date.now()-this.timelineStartedAt,this.clearTimeouts(),this.isPaused=!0,this.$emit(`pause`))},resume(){this.isPaused&&(this.isPaused=!1,this.$emit(`resume`),this.runTimeline())},reset(){this.clearTimeouts(),this.isAnimating=!1,this.isPaused=!1,this.isComplete=!1,this.timelineElapsed=0,this.animationKey++,this.replayAnimations()},skipToEnd(){this.showAllContent()},showAllContent(){this.finishAnimation(),this.isPaused=!1,this.schedule(0,()=>this.$emit(`complete`))},finishAnimation(){this.clearTimeouts(),this.isAnimating=!1,this.isComplete=!0},restartIfAnimating(){this.isAnimating&&(this.reset(),this.$nextTick(()=>this.start()))},completeAnimation(){this.$emit(`complete`),this.loop||this.finishAnimation()},replayAnimations(e){this.isRestarting=!0,this.$nextTick(()=>{this.$el?.getBoundingClientRect?.(),this.isRestarting=!1,e?.()})},restartCycle(){this.isUnmounted||(this.clearTimeouts(),this.replayAnimations(()=>{this.measureWords(),this.timelineElapsed=0,this.$emit(`start`),this.runTimeline()}))},initializeContent(){this.words=n.splitWords(this.text||this.getSlotText()),this.wordWidths=[],this.autoStart&&(this.isWholeText||this.words.length>0)&&this.$nextTick(()=>this.start())}}},s=[`aria-live`,`aria-label`],c={key:0,"data-qa":`dt-motion-text-sr-only`,class:`d-motion-text__sr-only`},l=[`aria-hidden`],u=[`aria-hidden`],d={key:3,ref:`slotRef`,class:`d-motion-text__fallback`};function f(e,t,n,i,a,o){return(0,r.openBlock)(),(0,r.createElementBlock)(`span`,{"data-qa":`dt-motion-text`,class:(0,r.normalizeClass)(o.motionTextClasses),style:(0,r.normalizeStyle)(o.componentStyles),"aria-live":a.isAnimating?`polite`:`off`,"aria-label":n.screenReaderText||void 0},[n.screenReaderText?((0,r.openBlock)(),(0,r.createElementBlock)(`span`,c,(0,r.toDisplayString)(n.screenReaderText),1)):(0,r.createCommentVNode)(``,!0),o.isWholeText?((0,r.openBlock)(),(0,r.createElementBlock)(`span`,{key:1,ref:`slotRef`,"data-qa":`dt-motion-text-content`,class:`d-motion-text__content`,"aria-hidden":n.screenReaderText?`true`:void 0},[(0,r.createTextVNode)((0,r.toDisplayString)(n.text),1),n.text?(0,r.createCommentVNode)(``,!0):(0,r.renderSlot)(e.$slots,`default`,{key:0})],8,l)):a.words.length?((0,r.openBlock)(),(0,r.createElementBlock)(`span`,{ref:`contentRef`,key:a.animationKey,"data-qa":`dt-motion-text-content`,class:`d-motion-text__content`,"aria-hidden":n.screenReaderText?`true`:void 0},[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(a.words,(e,t)=>((0,r.openBlock)(),(0,r.createElementBlock)(r.Fragment,{key:`${a.animationKey}-${t}`},[(0,r.createElementVNode)(`span`,{"data-qa":`dt-motion-text-word`,class:`d-motion-text__word`,style:(0,r.normalizeStyle)(o.wordStyles[t])},(0,r.toDisplayString)(e.text),5),(0,r.createTextVNode)((0,r.toDisplayString)(e.space),1)],64))),128))],8,u)):((0,r.openBlock)(),(0,r.createElementBlock)(`span`,d,[(0,r.renderSlot)(e.$slots,`default`)],512))],14,s)}var p=e.t(o,[[`render`,f]]);exports.default=p;
 //# sourceMappingURL=motion-text.cjs.map

package/dist/lib/motion-text/motion-text.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"motion-text.cjs","names":[],"sources":["../../../components/MotionText/MotionText.vue"],"sourcesContent":["<template>\n  <span\n    ref=\"contentRef\"\n    :class=\"motionTextClasses\"\n    :style=\"componentStyles\"\n    :data-text-content=\"isStaticAnimationMode ? text : undefined\"\n    :aria-live=\"isAnimating ? 'polite' : 'off'\"\n    :aria-label=\"screenReaderText || undefined\"\n  >\n    <!-- Screen reader content -->\n    <span\n      v-if=\"screenReaderText\"\n      class=\"d-motion-text__sr-only\"\n    >\n      {{ screenReaderText }}\n    </span>\n\n    <!-- Gradient-sweep and shimmer modes: Simple static text with gradient animation -->\n    <template v-if=\"isStaticAnimationMode\">\n      {{ text }}\n      <slot v-if=\"!text\" />\n    </template>\n\n    <!-- Character-by-character animated content for other modes -->\n    <span\n      v-else\n      :key=\"animationKey\"\n      class=\"d-motion-text__content\"\n      :aria-hidden=\"isAnimating\"\n    >\n      <template\n        v-for=\"(word, wordIdx) in words\"\n        :key=\"`${animationKey}-${wordIdx}`\"\n      >\n        <Transition\n          :name=\"`d-motion-text-word-${animationMode}`\"\n        >\n          <span\n            v-if=\"wordIdx < visibleWordCount\"\n            class=\"d-motion-text__word\"\n            :data-text-content=\"word.text\"\n            :style=\"{ '--word-index': wordIdx }\"\n          >\n            <template\n              v-for=\"(char, charIdx) in word.chars\"\n              :key=\"`${animationKey}-${wordIdx}-${charIdx}`\"\n            >\n              <Transition\n                :name=\"`d-motion-text-char-${animationMode}`\"\n              >\n                <span\n                  v-if=\"charIdx < visibleCharsPerWord[wordIdx]\"\n                  class=\"d-motion-text__char\"\n                  :style=\"{\n                    '--char-index': charIdx,\n                    '--char-delay': `${charIdx * timing.characterDelay}ms`,\n                  }\"\n                >{{ char }}</span>\n              </Transition>\n            </template>\n          </span>\n        </Transition>\n      </template>\n    </span>\n\n    <!-- Fallback slot content -->\n    <span\n      v-if=\"!words.length && !text && !isStaticAnimationMode\"\n      class=\"d-motion-text__fallback\"\n    >\n      <slot />\n    </span>\n  </span>\n</template>\n\n<script>\nimport { MOTION_TEXT_ANIMATION_MODES, MOTION_TEXT_SPEEDS, MOTION_TEXT_TIMING_PRESETS } from './MotionTextConstants';\n\nexport default {\n  name: 'DtMotionText',\n\n  props: {\n    /**\n     * The text content to animate.\n     * @type {string}\n     */\n    text: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The animation mode to use for the text reveal.\n     * @values gradient-in, fade-in, slide-in, gradient-sweep, shimmer, none\n     */\n    animationMode: {\n      type: String,\n      default: 'gradient-in',\n      validator: (value) => MOTION_TEXT_ANIMATION_MODES.includes(value),\n    },\n\n    /**\n     * Animation speed.\n     * @values 100, 200, 300, 400, 500\n     */\n    speed: {\n      type: [String, Number],\n      default: 300,\n      validator: (value) => MOTION_TEXT_SPEEDS.includes(String(value)),\n    },\n\n    /**\n     * Whether to start animation automatically when component is mounted.\n     * @values true, false\n     */\n    autoStart: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Whether to loop the animation continuously.\n     * @values true, false\n     */\n    loop: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether to respect the user's prefers-reduced-motion system setting.\n     * @values true, false\n     */\n    respectsReducedMotion: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Alternative text for screen readers. If provided, this will be announced\n     * instead of the animated text.\n     * @type {string}\n     */\n    screenReaderText: {\n      type: String,\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when the animation starts.\n     * @event start\n     */\n    'start',\n\n    /**\n     * Emitted when the animation completes.\n     * @event complete\n     */\n    'complete',\n\n    /**\n     * Emitted during animation progress.\n     * @event progress\n     * @type {{ wordsComplete: number, totalWords: number, progress: number }}\n     */\n    'progress',\n\n    /**\n     * Emitted when the animation is paused.\n     * @event pause\n     */\n    'pause',\n\n    /**\n     * Emitted when the animation resumes.\n     * @event resume\n     */\n    'resume',\n  ],\n\n  data () {\n    return {\n      words: [],\n      visibleWordCount: 0,\n      visibleCharsPerWord: [],\n      isAnimating: false,\n      isPaused: false,\n      isLooped: false,\n      animationTimeouts: [],\n      prefersReducedMotion: false,\n      animationKey: 0,\n    };\n  },\n\n  computed: {\n    /**\n     * Get timing preset based on speed prop\n     */\n    timing () {\n      return MOTION_TEXT_TIMING_PRESETS[String(this.speed)];\n    },\n\n    /**\n     * Computed styles with timing CSS variables\n     */\n    componentStyles () {\n      return {\n        '--d-motion-text-duration': `${this.timing.duration}ms`,\n        '--d-motion-text-char-duration': `${this.timing.duration}ms`,\n        '--d-motion-text-word-duration': `${this.timing.duration * 2}ms`,\n      };\n    },\n\n    /**\n     * Check if current animation mode is static (gradient-sweep or shimmer)\n     */\n    isStaticAnimationMode () {\n      return this.animationMode === 'gradient-sweep' || this.animationMode === 'shimmer';\n    },\n\n    /**\n     * Computed classes for the motion text element\n     */\n    motionTextClasses () {\n      return [\n        'd-motion-text',\n        `d-motion-text--${this.animationMode}`,\n        {\n          'd-motion-text--animating': this.isAnimating,\n          'd-motion-text--paused': this.isPaused,\n          'd-motion-text--looped': this.isLooped,\n        },\n      ];\n    },\n  },\n\n  watch: {\n    text () {\n      this.reset();\n      this.initializeContent();\n    },\n\n    loop: {\n      handler (newVal) {\n        this.isLooped = newVal;\n      },\n\n      immediate: true,\n    },\n  },\n\n  mounted () {\n    this.checkReducedMotion();\n    this.initializeContent();\n  },\n\n  beforeUnmount () {\n    this.clearTimeouts();\n  },\n\n  methods: {\n    /**\n     * Self-contained text processing from DOM nodes\n     */\n    processTextToChars (node) {\n      const words = [];\n\n      const processNode = (node, index = 0) => {\n        if (node.nodeType === Node.TEXT_NODE) {\n          const matches = node.textContent?.match(/\\S+\\s*/g) || [];\n          words.push(...matches.map((text, i) => ({\n            text,\n            chars: text.split(''),\n            index: index + i,\n          })));\n          return index + matches.length;\n        } else if (node.nodeType === Node.ELEMENT_NODE) {\n          let currentIdx = index;\n          Array.from(node.childNodes).forEach(child => {\n            currentIdx = processNode(child, currentIdx);\n          });\n          return currentIdx;\n        }\n        return index;\n      };\n\n      processNode(node);\n      return words;\n    },\n\n    /**\n     * Process direct text prop into word/character data\n     */\n    processDirectText (text) {\n      if (!text) return [];\n\n      const matches = text.match(/\\S+\\s*/g) || [];\n      return matches.map((wordText, i) => ({\n        text: wordText,\n        chars: wordText.split(''),\n        index: i,\n      }));\n    },\n\n    /**\n     * Check for reduced motion preference\n     */\n    checkReducedMotion () {\n      if (typeof window !== 'undefined' && window.matchMedia) {\n        this.prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n      }\n    },\n\n    /**\n     * Clear all animation timeouts\n     */\n    clearTimeouts () {\n      this.animationTimeouts.forEach(timeout => clearTimeout(timeout));\n      this.animationTimeouts = [];\n    },\n\n    /**\n     * Start the animation\n     * @public\n     */\n    start () {\n      if (this.isAnimating) return;\n\n      this.isAnimating = true;\n      this.isPaused = false;\n      this.$emit('start');\n\n      // Skip animation if reduced motion is preferred and enabled\n      if (this.respectsReducedMotion && this.prefersReducedMotion) {\n        this.showAllContent();\n        return;\n      }\n\n      if (this.animationMode === 'none') {\n        this.showAllContent();\n        return;\n      }\n\n      // For gradient-sweep and shimmer modes, just mark as animating (CSS handles the animation)\n      if (this.isStaticAnimationMode) {\n        return;\n      }\n\n      // Start the word-by-word animation for \"-in\" modes\n      this.showNextWord();\n    },\n\n    /**\n     * Pause the animation\n     * @public\n     */\n    pause () {\n      if (!this.isAnimating || this.isPaused) return;\n\n      this.isPaused = true;\n      this.clearTimeouts();\n      this.$emit('pause');\n    },\n\n    /**\n     * Resume the animation\n     * @public\n     */\n    resume () {\n      if (!this.isPaused) return;\n\n      this.isPaused = false;\n      this.$emit('resume');\n      this.showNextWord();\n    },\n\n    /**\n     * Reset the animation to initial state\n     * @public\n     */\n    reset () {\n      this.clearTimeouts();\n      this.isAnimating = false;\n      this.isPaused = false;\n      this.visibleWordCount = 0;\n      this.visibleCharsPerWord = Array(this.words.length).fill(0);\n      this.animationKey++;\n    },\n\n    /**\n     * Skip to the end of the animation\n     * @public\n     */\n    skipToEnd () {\n      this.showAllContent();\n    },\n\n    /**\n     * Show all content immediately\n     */\n    showAllContent () {\n      this.visibleWordCount = this.words.length;\n      this.visibleCharsPerWord = this.words.map(word => word.chars.length);\n      setTimeout(() => {\n        this.isAnimating = false;\n        this.$emit('complete');\n      }, 0);\n    },\n\n    /**\n     * Show next word in sequence\n     */\n    showNextWord () {\n      if (this.isPaused || this.visibleWordCount >= this.words.length) {\n        if (this.visibleWordCount >= this.words.length) {\n          this.completeAnimation();\n        }\n        return;\n      }\n\n      const timeout = setTimeout(() => {\n        this.visibleWordCount++;\n        this.$emit('progress', {\n          wordsComplete: this.visibleWordCount,\n          totalWords: this.words.length,\n          progress: this.visibleWordCount / this.words.length,\n        });\n\n        this.animateCharsForWord(this.visibleWordCount - 1);\n      }, this.timing.wordDelay);\n\n      this.animationTimeouts.push(timeout);\n    },\n\n    /**\n     * Animate characters for a specific word\n     */\n    animateCharsForWord (wordIdx) {\n      if (this.isPaused || wordIdx >= this.words.length) return;\n\n      this.visibleCharsPerWord[wordIdx] = 0;\n      const chars = this.words[wordIdx].chars.length;\n\n      const revealChar = () => {\n        if (this.isPaused || this.visibleCharsPerWord[wordIdx] >= chars) {\n          if (this.visibleCharsPerWord[wordIdx] >= chars) {\n            this.showNextWord();\n          }\n          return;\n        }\n\n        this.visibleCharsPerWord[wordIdx]++;\n        const timeout = setTimeout(revealChar, this.timing.characterDelay);\n        this.animationTimeouts.push(timeout);\n      };\n\n      revealChar();\n    },\n\n    /**\n     * Complete the animation\n     */\n    completeAnimation () {\n      this.isAnimating = false;\n      this.clearTimeouts();\n\n      this.$emit('complete');\n\n      if (this.loop) {\n        const timeout = setTimeout(() => {\n          this.reset();\n          this.$nextTick(() => {\n            this.start();\n          });\n        }, 500);\n\n        this.animationTimeouts.push(timeout);\n      }\n    },\n\n    /**\n     * Initialize content based on text prop or slot content\n     */\n    initializeContent () {\n      // For gradient-sweep and shimmer modes, skip word/character processing\n      if (this.isStaticAnimationMode) {\n        if (this.autoStart) {\n          this.$nextTick(() => this.start());\n        }\n        return;\n      }\n\n      if (this.text) {\n        this.words = this.processDirectText(this.text);\n      } else if (this.$refs.contentRef) {\n        this.words = this.processTextToChars(this.$refs.contentRef);\n      }\n\n      this.visibleCharsPerWord = Array(this.words.length).fill(0);\n      this.visibleWordCount = 0;\n\n      if (this.autoStart && this.words.length > 0) {\n        this.$nextTick(() => this.start());\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"motion-text.cjs","names":[],"sources":["../../../components/MotionText/MotionText.vue"],"sourcesContent":["<template>\n  <span\n    data-qa=\"dt-motion-text\"\n    :class=\"motionTextClasses\"\n    :style=\"componentStyles\"\n    :aria-live=\"isAnimating ? 'polite' : 'off'\"\n    :aria-label=\"screenReaderText || undefined\"\n  >\n    <!-- Screen reader content -->\n    <span\n      v-if=\"screenReaderText\"\n      data-qa=\"dt-motion-text-sr-only\"\n      class=\"d-motion-text__sr-only\"\n    >\n      {{ screenReaderText }}\n    </span>\n\n    <!-- Whole-text modes animate the root, so the text and slot render as-is and stay live -->\n    <span\n      v-if=\"isWholeText\"\n      ref=\"slotRef\"\n      data-qa=\"dt-motion-text-content\"\n      class=\"d-motion-text__content\"\n      :aria-hidden=\"screenReaderText ? 'true' : undefined\"\n    >{{ text }}<slot v-if=\"!text\" /></span>\n\n    <!-- Word-by-word animated content -->\n    <span\n      v-else-if=\"words.length\"\n      ref=\"contentRef\"\n      :key=\"animationKey\"\n      data-qa=\"dt-motion-text-content\"\n      class=\"d-motion-text__content\"\n      :aria-hidden=\"screenReaderText ? 'true' : undefined\"\n    >\n      <template\n        v-for=\"(word, wordIdx) in words\"\n        :key=\"`${animationKey}-${wordIdx}`\"\n      >\n        <span\n          data-qa=\"dt-motion-text-word\"\n          class=\"d-motion-text__word\"\n          :style=\"wordStyles[wordIdx]\"\n        >{{ word.text }}</span>{{ word.space }}\n      </template>\n    </span>\n\n    <!-- Slot content, rendered until its text has been split into words -->\n    <span\n      v-else\n      ref=\"slotRef\"\n      class=\"d-motion-text__fallback\"\n    >\n      <slot />\n    </span>\n  </span>\n</template>\n\n\n<script>\nimport {\n  MOTION_TEXT_ANIMATION_MODES,\n  MOTION_TEXT_MODE_SETTINGS,\n  MOTION_TEXT_SPEEDS,\n  MOTION_TEXT_TIMING_PRESETS,\n  MOTION_TEXT_TRACKS,\n} from './MotionTextConstants';\nimport { getGradientSlices, splitWords } from './utils';\n\nconst DEFAULT_PRESET = MOTION_TEXT_TIMING_PRESETS['300'];\n// Unsupported modes render the text at rest, like 'none'\nconst RESTING_SETTINGS = { tracks: [], gradient: false, loopHold: 0 };\n\nexport default {\n  name: 'DtMotionText',\n\n  props: {\n    /**\n     * The text content to animate.\n     * @type {string}\n     */\n    text: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The animation mode to use for the text reveal. `none` renders the text without animation.\n     * @values gradient-in, fade-in, slide-in, slide-in-gradient, gradient-sweep, shimmer, none\n     */\n    animationMode: {\n      type: String,\n      default: 'gradient-in',\n      validator: (value) => MOTION_TEXT_ANIMATION_MODES.includes(value),\n    },\n\n    /**\n     * Animation speed. 300 plays the motion spec as designed; lower values are faster.\n     * @values 100, 200, 300, 400, 500\n     */\n    speed: {\n      type: [String, Number],\n      default: 300,\n      validator: (value) => MOTION_TEXT_SPEEDS.includes(String(value)),\n    },\n\n    /**\n     * Whether to start animation automatically when component is mounted.\n     * @values true, false\n     */\n    autoStart: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Whether to loop the animation continuously.\n     * @values true, false\n     */\n    loop: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether to respect the user's prefers-reduced-motion system setting.\n     * @values true, false\n     */\n    respectsReducedMotion: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Alternative text for screen readers. If provided, this will be announced\n     * instead of the animated text.\n     * @type {string}\n     */\n    screenReaderText: {\n      type: String,\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when the animation starts, and at the start of each looped cycle.\n     * @event start\n     */\n    'start',\n\n    /**\n     * Emitted when the animation completes, and at the end of each looped cycle.\n     * @event complete\n     */\n    'complete',\n\n    /**\n     * Emitted as each word finishes animating.\n     * @event progress\n     * @type {{ wordsComplete: number, totalWords: number, progress: number }}\n     */\n    'progress',\n\n    /**\n     * Emitted when the animation is paused.\n     * @event pause\n     */\n    'pause',\n\n    /**\n     * Emitted when the animation resumes.\n     * @event resume\n     */\n    'resume',\n  ],\n\n  data () {\n    return {\n      words: splitWords(this.text),\n      wordWidths: [],\n      isRtl: false,\n      isAnimating: false,\n      isPaused: false,\n      isComplete: false,\n      isRestarting: false,\n      isLooped: false,\n      isUnmounted: false,\n      animationTimeouts: [],\n      timelineStartedAt: 0,\n      timelineElapsed: 0,\n      prefersReducedMotion: false,\n      animationKey: 0,\n      cssIterations: 1,\n    };\n  },\n\n  computed: {\n    modeSettings () {\n      return MOTION_TEXT_MODE_SETTINGS[this.animationMode] ?? RESTING_SETTINGS;\n    },\n\n    isWholeText () {\n      return Boolean(this.modeSettings.wholeText);\n    },\n\n    /**\n     * Multiplier applied to every motion timing for the current speed.\n     */\n    speedScale () {\n      const preset = MOTION_TEXT_TIMING_PRESETS[String(this.speed)] ?? DEFAULT_PRESET;\n      return preset.duration / DEFAULT_PRESET.duration;\n    },\n\n    /**\n     * Track timings for the current mode as CSS variables, e.g. --d-motion-text-enter-stagger\n     */\n    componentStyles () {\n      const styles = {};\n      this.modeSettings.tracks.forEach(track => {\n        Object.entries(MOTION_TEXT_TRACKS[track]).forEach(([key, value]) => {\n          styles[`--d-motion-text-${track}-${key}`] = `${Math.round(value * this.speedScale)}ms`;\n        });\n      });\n      return styles;\n    },\n\n    /**\n     * Per-word index (drives the stagger) and, in gradient modes, the slice of the shared gradient\n     * each word shows so it reads as one continuous gradient across the text.\n     */\n    wordStyles () {\n      const slices = this.modeSettings.gradient ? getGradientSlices(this.wordWidths, this.isRtl) : [];\n\n      return this.words.map((word, index) => {\n        const slice = slices[index];\n        return {\n          '--d-motion-text-word-index': index,\n          ...(slice && {\n            '--d-motion-text-gradient-size': slice.size,\n            '--d-motion-text-gradient-position': slice.position,\n          }),\n        };\n      });\n    },\n\n    /**\n     * Time (ms) at which each word finishes its last track\n     */\n    wordEndTimes () {\n      return this.words.map((word, index) => {\n        const ends = this.modeSettings.tracks.map(track => {\n          const { delay, stagger, duration } = MOTION_TEXT_TRACKS[track];\n          return delay + stagger * index + duration;\n        });\n        return Math.max(0, ...ends) * this.speedScale;\n      });\n    },\n\n    /**\n     * Time (ms) at which one cycle of the animation ends\n     */\n    cycleDuration () {\n      if (!this.isWholeText) return Math.max(0, ...this.wordEndTimes);\n\n      const ends = this.modeSettings.tracks.map(track => {\n        const { delay, duration } = MOTION_TEXT_TRACKS[track];\n        return delay + duration;\n      });\n      return Math.max(0, ...ends) * this.speedScale * this.cssIterations;\n    },\n\n    motionTextClasses () {\n      return [\n        'd-motion-text',\n        `d-motion-text--${this.animationMode}`,\n        {\n          'd-motion-text--animating': this.isAnimating,\n          'd-motion-text--paused': this.isPaused,\n          'd-motion-text--complete': this.isComplete,\n          'd-motion-text--restarting': this.isRestarting,\n          'd-motion-text--looped': this.isLooped,\n          'd-motion-text--respects-reduced-motion': this.respectsReducedMotion,\n        },\n      ];\n    },\n  },\n\n  watch: {\n    text () {\n      // Whole-text modes render the text live and keep animating, as they always have\n      if (this.isWholeText) {\n        this.words = splitWords(this.text);\n\n        // A finished single play runs again for the new text; a loop stopped with skipToEnd() stays at rest\n        if (this.isComplete && this.autoStart && !this.loop) {\n          this.reset();\n          this.$nextTick(() => this.start());\n        }\n        return;\n      }\n\n      this.reset();\n\n      if (this.text) {\n        this.initializeContent();\n        return;\n      }\n\n      // Slot content only renders once the words are cleared, so read it on the next tick\n      this.words = [];\n      this.$nextTick(() => this.initializeContent());\n    },\n\n    animationMode (mode, oldMode) {\n      const wasWholeText = Boolean(MOTION_TEXT_MODE_SETTINGS[oldMode]?.wholeText);\n\n      // Whole-text modes render the slot live, so read it again when switching to or from word mode\n      if (!this.text && wasWholeText !== this.isWholeText) {\n        const wasAnimating = this.isAnimating;\n        this.reset();\n        this.words = [];\n        this.$nextTick(() => {\n          this.words = splitWords(this.getSlotText());\n          this.wordWidths = [];\n          if (wasAnimating) this.$nextTick(() => this.start());\n        });\n        return;\n      }\n\n      this.restartIfAnimating();\n    },\n\n    autoStart (value) {\n      if (value && !this.isAnimating && (this.isWholeText || this.words.length)) {\n        this.$nextTick(() => this.start());\n      }\n    },\n\n    speed () {\n      this.restartIfAnimating();\n    },\n\n    loop: {\n      handler (newVal) {\n        this.isLooped = newVal;\n\n        // Reschedule so the current cycle ends (or restarts) according to the new value\n        if (this.isAnimating && !this.isPaused) {\n          this.timelineElapsed = Date.now() - this.timelineStartedAt;\n          this.clearTimeouts();\n          this.runTimeline();\n        }\n      },\n\n      immediate: true,\n    },\n  },\n\n  mounted () {\n    this.initWatchReducedMotion();\n    this.initializeContent();\n\n    // Word widths change once web fonts load, which would misalign the gradient slices\n    document.fonts?.ready.then(() => {\n      if (!this.isUnmounted && this.isAnimating) this.measureWords();\n    });\n  },\n\n  beforeUnmount () {\n    this.isUnmounted = true;\n    this.clearTimeouts();\n    this.stopWatchingReducedMotion?.();\n  },\n\n  methods: {\n    /**\n     * Collect the text of slot content, ignoring markup\n     */\n    getSlotText () {\n      return this.$refs.slotRef?.textContent || '';\n    },\n\n    /**\n     * Track the reduced motion preference, finishing any running animation if it turns on\n     */\n    initWatchReducedMotion () {\n      if (typeof window === 'undefined' || !window.matchMedia) return;\n\n      const query = window.matchMedia('(prefers-reduced-motion: reduce)');\n      const onChange = (event) => {\n        this.prefersReducedMotion = event.matches;\n        if (event.matches && this.respectsReducedMotion && this.isAnimating) this.skipToEnd();\n      };\n\n      this.prefersReducedMotion = query.matches;\n      query.addEventListener?.('change', onChange);\n      this.stopWatchingReducedMotion = () => query.removeEventListener?.('change', onChange);\n    },\n\n    /**\n     * Measure rendered word widths so each word can show its slice of the gradient.\n     * Falls back to character counts when layout is unavailable (e.g. not yet rendered).\n     */\n    measureWords () {\n      if (!this.modeSettings.gradient) return;\n\n      const wordEls = this.$refs.contentRef?.querySelectorAll('.d-motion-text__word') || [];\n      const widths = Array.from(wordEls, el => el.getBoundingClientRect().width);\n\n      this.isRtl = window.getComputedStyle(this.$el).direction === 'rtl';\n      this.wordWidths = widths.length === this.words.length && widths.every(width => width > 0)\n        ? widths\n        : this.words.map(word => word.text.length);\n    },\n\n    /**\n     * Clear all animation timeouts\n     */\n    clearTimeouts () {\n      this.animationTimeouts.forEach(timeout => clearTimeout(timeout));\n      this.animationTimeouts = [];\n    },\n\n    schedule (delay, callback) {\n      this.animationTimeouts.push(setTimeout(callback, Math.max(0, delay)));\n    },\n\n    /**\n     * Schedule progress, completion and (when looping) restart events for the remainder\n     * of the current cycle. CSS runs the animation itself; this keeps events in step with it.\n     */\n    runTimeline () {\n      const elapsed = this.timelineElapsed;\n      const totalWords = this.words.length;\n      const cycleEnd = this.cycleDuration;\n\n      this.timelineStartedAt = Date.now() - elapsed;\n\n      // Whole-text modes have no per-word progress\n      const wordEnds = this.isWholeText ? [] : this.wordEndTimes;\n      wordEnds.forEach((end, index) => {\n        if (end <= elapsed) return;\n        this.schedule(end - elapsed, () => {\n          this.$emit('progress', {\n            wordsComplete: index + 1,\n            totalWords,\n            progress: (index + 1) / totalWords,\n          });\n        });\n      });\n\n      if (cycleEnd > elapsed) {\n        this.schedule(cycleEnd - elapsed, () => this.completeAnimation());\n      }\n\n      if (this.loop) {\n        const restartAt = cycleEnd + this.modeSettings.loopHold * this.speedScale;\n        this.schedule(restartAt - elapsed, () => this.restartCycle());\n      } else if (cycleEnd <= elapsed) {\n        // The cycle already ended while looping (e.g. loop turned off during the hold)\n        this.finishAnimation();\n      }\n    },\n\n    /**\n     * Start the animation\n     * @public\n     */\n    start () {\n      if (this.isAnimating || this.isUnmounted) return;\n\n      this.clearTimeouts();\n      this.isAnimating = true;\n      this.isPaused = false;\n      this.isComplete = false;\n      this.$emit('start');\n\n      // Skip animation if reduced motion is preferred and enabled\n      if (this.respectsReducedMotion && this.prefersReducedMotion) {\n        this.showAllContent();\n        return;\n      }\n\n      if (!this.modeSettings.tracks.length || (!this.isWholeText && !this.words.length)) {\n        this.showAllContent();\n        return;\n      }\n\n      this.measureWords();\n      this.cssIterations = this.readCssIterations();\n      this.timelineElapsed = 0;\n      this.runTimeline();\n    },\n\n    /**\n     * Whole-text animations honor a consumer's animation-iteration-count override (e.g. 2 sweeps)\n     */\n    readCssIterations () {\n      if (!this.isWholeText || this.loop) return 1;\n\n      const count = parseFloat(window.getComputedStyle(this.$el).animationIterationCount);\n      return Number.isFinite(count) && count > 1 ? count : 1;\n    },\n\n    /**\n     * Pause the animation\n     * @public\n     */\n    pause () {\n      if (!this.isAnimating || this.isPaused) return;\n\n      this.timelineElapsed = Date.now() - this.timelineStartedAt;\n      this.clearTimeouts();\n      this.isPaused = true;\n      this.$emit('pause');\n    },\n\n    /**\n     * Resume the animation\n     * @public\n     */\n    resume () {\n      if (!this.isPaused) return;\n\n      this.isPaused = false;\n      this.$emit('resume');\n      this.runTimeline();\n    },\n\n    /**\n     * Reset the animation to initial state\n     * @public\n     */\n    reset () {\n      this.clearTimeouts();\n      this.isAnimating = false;\n      this.isPaused = false;\n      this.isComplete = false;\n      this.timelineElapsed = 0;\n      this.animationKey++;\n      // Whole-text modes animate the root, which re-keying the words doesn't reset\n      this.replayAnimations();\n    },\n\n    /**\n     * Skip to the end of the animation\n     * @public\n     */\n    skipToEnd () {\n      this.showAllContent();\n    },\n\n    /**\n     * Show all content immediately in its resting state\n     */\n    showAllContent () {\n      this.finishAnimation();\n      this.isPaused = false;\n      this.schedule(0, () => this.$emit('complete'));\n    },\n\n    finishAnimation () {\n      this.clearTimeouts();\n      this.isAnimating = false;\n      this.isComplete = true;\n    },\n\n    restartIfAnimating () {\n      if (!this.isAnimating) return;\n\n      this.reset();\n      this.$nextTick(() => this.start());\n    },\n\n    /**\n     * End of a cycle. Looped animations keep animating through the hold before restarting.\n     */\n    completeAnimation () {\n      this.$emit('complete');\n      if (!this.loop) this.finishAnimation();\n    },\n\n    /**\n     * Drop the CSS animations for one style pass so they replay from their first frame on the same\n     * elements, keeping text selection and not re-inserting anything into the aria-live region.\n     */\n    replayAnimations (callback) {\n      this.isRestarting = true;\n\n      this.$nextTick(() => {\n        // Flush styles while the animations are removed\n        this.$el?.getBoundingClientRect?.();\n        this.isRestarting = false;\n        callback?.();\n      });\n    },\n\n    /**\n     * Restart a looped animation: everything returns to its starting state at once\n     */\n    restartCycle () {\n      if (this.isUnmounted) return;\n\n      this.clearTimeouts();\n      this.replayAnimations(() => {\n        this.measureWords();\n        this.timelineElapsed = 0;\n        this.$emit('start');\n        this.runTimeline();\n      });\n    },\n\n    /**\n     * Initialize content based on text prop or slot content\n     */\n    initializeContent () {\n      this.words = splitWords(this.text || this.getSlotText());\n      this.wordWidths = [];\n\n      // Whole-text modes start even while empty, e.g. a slot that streams its content in\n      if (this.autoStart && (this.isWholeText || this.words.length > 0)) {\n        this.$nextTick(() => this.start());\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/motion-text/motion-text.js

@@ -1,8 +1,13 @@
 import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
-import { MOTION_TEXT_ANIMATION_MODES as t, MOTION_TEXT_SPEEDS as n, MOTION_TEXT_TIMING_PRESETS as r } from "./motion-text-constants.js";
-import { Fragment as i, Transition as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createTextVNode as l, normalizeClass as u, normalizeStyle as d, openBlock as f, renderList as p, renderSlot as m, toDisplayString as h, withCtx as g } from "vue";
+import { MOTION_TEXT_ANIMATION_MODES as t, MOTION_TEXT_MODE_SETTINGS as n, MOTION_TEXT_SPEEDS as r, MOTION_TEXT_TIMING_PRESETS as i, MOTION_TEXT_TRACKS as a } from "./motion-text-constants.js";
+import { getGradientSlices as o, splitWords as s } from "./utils.js";
+import { Fragment as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, normalizeClass as p, normalizeStyle as m, openBlock as h, renderList as g, renderSlot as _, toDisplayString as v } from "vue";
 //#region components/MotionText/MotionText.vue
-var _ = {
+var y = i[300], b = {
+	tracks: [],
+	gradient: !1,
+	loopHold: 0
+}, x = {
 	name: "DtMotionText",
 	props: {
 		text: {
@@ -17,7 +22,7 @@ var _ = {
 		speed: {
 			type: [String, Number],
 			default: 300,
-			validator: (e) => n.includes(String(e))
+			validator: (e) => r.includes(String(e))
 		},
 		autoStart: {
 			type: Boolean,
@@ -45,30 +50,70 @@ var _ = {
 	],
 	data() {
 		return {
-			words: [],
-			visibleWordCount: 0,
-			visibleCharsPerWord: [],
+			words: s(this.text),
+			wordWidths: [],
+			isRtl: !1,
 			isAnimating: !1,
 			isPaused: !1,
+			isComplete: !1,
+			isRestarting: !1,
 			isLooped: !1,
+			isUnmounted: !1,
 			animationTimeouts: [],
+			timelineStartedAt: 0,
+			timelineElapsed: 0,
 			prefersReducedMotion: !1,
-			animationKey: 0
+			animationKey: 0,
+			cssIterations: 1
 		};
 	},
 	computed: {
-		timing() {
-			return r[String(this.speed)];
+		modeSettings() {
+			return n[this.animationMode] ?? b;
+		},
+		isWholeText() {
+			return !!this.modeSettings.wholeText;
+		},
+		speedScale() {
+			return (i[String(this.speed)] ?? y).duration / y.duration;
 		},
 		componentStyles() {
-			return {
-				"--d-motion-text-duration": `${this.timing.duration}ms`,
-				"--d-motion-text-char-duration": `${this.timing.duration}ms`,
-				"--d-motion-text-word-duration": `${this.timing.duration * 2}ms`
-			};
+			let e = {};
+			return this.modeSettings.tracks.forEach((t) => {
+				Object.entries(a[t]).forEach(([n, r]) => {
+					e[`--d-motion-text-${t}-${n}`] = `${Math.round(r * this.speedScale)}ms`;
+				});
+			}), e;
+		},
+		wordStyles() {
+			let e = this.modeSettings.gradient ? o(this.wordWidths, this.isRtl) : [];
+			return this.words.map((t, n) => {
+				let r = e[n];
+				return {
+					"--d-motion-text-word-index": n,
+					...r && {
+						"--d-motion-text-gradient-size": r.size,
+						"--d-motion-text-gradient-position": r.position
+					}
+				};
+			});
+		},
+		wordEndTimes() {
+			return this.words.map((e, t) => {
+				let n = this.modeSettings.tracks.map((e) => {
+					let { delay: n, stagger: r, duration: i } = a[e];
+					return n + r * t + i;
+				});
+				return Math.max(0, ...n) * this.speedScale;
+			});
 		},
-		isStaticAnimationMode() {
-			return this.animationMode === "gradient-sweep" || this.animationMode === "shimmer";
+		cycleDuration() {
+			if (!this.isWholeText) return Math.max(0, ...this.wordEndTimes);
+			let e = this.modeSettings.tracks.map((e) => {
+				let { delay: t, duration: n } = a[e];
+				return t + n;
+			});
+			return Math.max(0, ...e) * this.speedScale * this.cssIterations;
 		},
 		motionTextClasses() {
 			return [
@@ -77,192 +122,187 @@ var _ = {
 				{
 					"d-motion-text--animating": this.isAnimating,
 					"d-motion-text--paused": this.isPaused,
-					"d-motion-text--looped": this.isLooped
+					"d-motion-text--complete": this.isComplete,
+					"d-motion-text--restarting": this.isRestarting,
+					"d-motion-text--looped": this.isLooped,
+					"d-motion-text--respects-reduced-motion": this.respectsReducedMotion
 				}
 			];
 		}
 	},
 	watch: {
 		text() {
-			this.reset(), this.initializeContent();
+			if (this.isWholeText) {
+				this.words = s(this.text), this.isComplete && this.autoStart && !this.loop && (this.reset(), this.$nextTick(() => this.start()));
+				return;
+			}
+			if (this.reset(), this.text) {
+				this.initializeContent();
+				return;
+			}
+			this.words = [], this.$nextTick(() => this.initializeContent());
+		},
+		animationMode(e, t) {
+			let r = !!n[t]?.wholeText;
+			if (!this.text && r !== this.isWholeText) {
+				let e = this.isAnimating;
+				this.reset(), this.words = [], this.$nextTick(() => {
+					this.words = s(this.getSlotText()), this.wordWidths = [], e && this.$nextTick(() => this.start());
+				});
+				return;
+			}
+			this.restartIfAnimating();
+		},
+		autoStart(e) {
+			e && !this.isAnimating && (this.isWholeText || this.words.length) && this.$nextTick(() => this.start());
+		},
+		speed() {
+			this.restartIfAnimating();
 		},
 		loop: {
 			handler(e) {
-				this.isLooped = e;
+				this.isLooped = e, this.isAnimating && !this.isPaused && (this.timelineElapsed = Date.now() - this.timelineStartedAt, this.clearTimeouts(), this.runTimeline());
 			},
 			immediate: !0
 		}
 	},
 	mounted() {
-		this.checkReducedMotion(), this.initializeContent();
+		this.initWatchReducedMotion(), this.initializeContent(), document.fonts?.ready.then(() => {
+			!this.isUnmounted && this.isAnimating && this.measureWords();
+		});
 	},
 	beforeUnmount() {
-		this.clearTimeouts();
+		this.isUnmounted = !0, this.clearTimeouts(), this.stopWatchingReducedMotion?.();
 	},
 	methods: {
-		processTextToChars(e) {
-			let t = [], n = (e, r = 0) => {
-				if (e.nodeType === Node.TEXT_NODE) {
-					let n = e.textContent?.match(/\S+\s*/g) || [];
-					return t.push(...n.map((e, t) => ({
-						text: e,
-						chars: e.split(""),
-						index: r + t
-					}))), r + n.length;
-				} else if (e.nodeType === Node.ELEMENT_NODE) {
-					let t = r;
-					return Array.from(e.childNodes).forEach((e) => {
-						t = n(e, t);
-					}), t;
-				}
-				return r;
-			};
-			return n(e), t;
+		getSlotText() {
+			return this.$refs.slotRef?.textContent || "";
 		},
-		processDirectText(e) {
-			return e ? (e.match(/\S+\s*/g) || []).map((e, t) => ({
-				text: e,
-				chars: e.split(""),
-				index: t
-			})) : [];
+		initWatchReducedMotion() {
+			if (typeof window > "u" || !window.matchMedia) return;
+			let e = window.matchMedia("(prefers-reduced-motion: reduce)"), t = (e) => {
+				this.prefersReducedMotion = e.matches, e.matches && this.respectsReducedMotion && this.isAnimating && this.skipToEnd();
+			};
+			this.prefersReducedMotion = e.matches, e.addEventListener?.("change", t), this.stopWatchingReducedMotion = () => e.removeEventListener?.("change", t);
 		},
-		checkReducedMotion() {
-			typeof window < "u" && window.matchMedia && (this.prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches);
+		measureWords() {
+			if (!this.modeSettings.gradient) return;
+			let e = this.$refs.contentRef?.querySelectorAll(".d-motion-text__word") || [], t = Array.from(e, (e) => e.getBoundingClientRect().width);
+			this.isRtl = window.getComputedStyle(this.$el).direction === "rtl", this.wordWidths = t.length === this.words.length && t.every((e) => e > 0) ? t : this.words.map((e) => e.text.length);
 		},
 		clearTimeouts() {
 			this.animationTimeouts.forEach((e) => clearTimeout(e)), this.animationTimeouts = [];
 		},
+		schedule(e, t) {
+			this.animationTimeouts.push(setTimeout(t, Math.max(0, e)));
+		},
+		runTimeline() {
+			let e = this.timelineElapsed, t = this.words.length, n = this.cycleDuration;
+			if (this.timelineStartedAt = Date.now() - e, (this.isWholeText ? [] : this.wordEndTimes).forEach((n, r) => {
+				n <= e || this.schedule(n - e, () => {
+					this.$emit("progress", {
+						wordsComplete: r + 1,
+						totalWords: t,
+						progress: (r + 1) / t
+					});
+				});
+			}), n > e && this.schedule(n - e, () => this.completeAnimation()), this.loop) {
+				let t = n + this.modeSettings.loopHold * this.speedScale;
+				this.schedule(t - e, () => this.restartCycle());
+			} else n <= e && this.finishAnimation();
+		},
 		start() {
-			if (!this.isAnimating) {
-				if (this.isAnimating = !0, this.isPaused = !1, this.$emit("start"), this.respectsReducedMotion && this.prefersReducedMotion) {
+			if (!(this.isAnimating || this.isUnmounted)) {
+				if (this.clearTimeouts(), this.isAnimating = !0, this.isPaused = !1, this.isComplete = !1, this.$emit("start"), this.respectsReducedMotion && this.prefersReducedMotion) {
 					this.showAllContent();
 					return;
 				}
-				if (this.animationMode === "none") {
+				if (!this.modeSettings.tracks.length || !this.isWholeText && !this.words.length) {
 					this.showAllContent();
 					return;
 				}
-				this.isStaticAnimationMode || this.showNextWord();
+				this.measureWords(), this.cssIterations = this.readCssIterations(), this.timelineElapsed = 0, this.runTimeline();
 			}
 		},
+		readCssIterations() {
+			if (!this.isWholeText || this.loop) return 1;
+			let e = parseFloat(window.getComputedStyle(this.$el).animationIterationCount);
+			return Number.isFinite(e) && e > 1 ? e : 1;
+		},
 		pause() {
-			!this.isAnimating || this.isPaused || (this.isPaused = !0, this.clearTimeouts(), this.$emit("pause"));
+			!this.isAnimating || this.isPaused || (this.timelineElapsed = Date.now() - this.timelineStartedAt, this.clearTimeouts(), this.isPaused = !0, this.$emit("pause"));
 		},
 		resume() {
-			this.isPaused && (this.isPaused = !1, this.$emit("resume"), this.showNextWord());
+			this.isPaused && (this.isPaused = !1, this.$emit("resume"), this.runTimeline());
 		},
 		reset() {
-			this.clearTimeouts(), this.isAnimating = !1, this.isPaused = !1, this.visibleWordCount = 0, this.visibleCharsPerWord = Array(this.words.length).fill(0), this.animationKey++;
+			this.clearTimeouts(), this.isAnimating = !1, this.isPaused = !1, this.isComplete = !1, this.timelineElapsed = 0, this.animationKey++, this.replayAnimations();
 		},
 		skipToEnd() {
 			this.showAllContent();
 		},
 		showAllContent() {
-			this.visibleWordCount = this.words.length, this.visibleCharsPerWord = this.words.map((e) => e.chars.length), setTimeout(() => {
-				this.isAnimating = !1, this.$emit("complete");
-			}, 0);
+			this.finishAnimation(), this.isPaused = !1, this.schedule(0, () => this.$emit("complete"));
 		},
-		showNextWord() {
-			if (this.isPaused || this.visibleWordCount >= this.words.length) {
-				this.visibleWordCount >= this.words.length && this.completeAnimation();
-				return;
-			}
-			let e = setTimeout(() => {
-				this.visibleWordCount++, this.$emit("progress", {
-					wordsComplete: this.visibleWordCount,
-					totalWords: this.words.length,
-					progress: this.visibleWordCount / this.words.length
-				}), this.animateCharsForWord(this.visibleWordCount - 1);
-			}, this.timing.wordDelay);
-			this.animationTimeouts.push(e);
-		},
-		animateCharsForWord(e) {
-			if (this.isPaused || e >= this.words.length) return;
-			this.visibleCharsPerWord[e] = 0;
-			let t = this.words[e].chars.length, n = () => {
-				if (this.isPaused || this.visibleCharsPerWord[e] >= t) {
-					this.visibleCharsPerWord[e] >= t && this.showNextWord();
-					return;
-				}
-				this.visibleCharsPerWord[e]++;
-				let r = setTimeout(n, this.timing.characterDelay);
-				this.animationTimeouts.push(r);
-			};
-			n();
+		finishAnimation() {
+			this.clearTimeouts(), this.isAnimating = !1, this.isComplete = !0;
+		},
+		restartIfAnimating() {
+			this.isAnimating && (this.reset(), this.$nextTick(() => this.start()));
 		},
 		completeAnimation() {
-			if (this.isAnimating = !1, this.clearTimeouts(), this.$emit("complete"), this.loop) {
-				let e = setTimeout(() => {
-					this.reset(), this.$nextTick(() => {
-						this.start();
-					});
-				}, 500);
-				this.animationTimeouts.push(e);
-			}
+			this.$emit("complete"), this.loop || this.finishAnimation();
+		},
+		replayAnimations(e) {
+			this.isRestarting = !0, this.$nextTick(() => {
+				this.$el?.getBoundingClientRect?.(), this.isRestarting = !1, e?.();
+			});
+		},
+		restartCycle() {
+			this.isUnmounted || (this.clearTimeouts(), this.replayAnimations(() => {
+				this.measureWords(), this.timelineElapsed = 0, this.$emit("start"), this.runTimeline();
+			}));
 		},
 		initializeContent() {
-			if (this.isStaticAnimationMode) {
-				this.autoStart && this.$nextTick(() => this.start());
-				return;
-			}
-			this.text ? this.words = this.processDirectText(this.text) : this.$refs.contentRef && (this.words = this.processTextToChars(this.$refs.contentRef)), this.visibleCharsPerWord = Array(this.words.length).fill(0), this.visibleWordCount = 0, this.autoStart && this.words.length > 0 && this.$nextTick(() => this.start());
+			this.words = s(this.text || this.getSlotText()), this.wordWidths = [], this.autoStart && (this.isWholeText || this.words.length > 0) && this.$nextTick(() => this.start());
 		}
 	}
-}, v = [
-	"data-text-content",
-	"aria-live",
-	"aria-label"
-], y = {
+}, S = ["aria-live", "aria-label"], C = {
 	key: 0,
+	"data-qa": "dt-motion-text-sr-only",
 	class: "d-motion-text__sr-only"
-}, b = ["aria-hidden"], x = ["data-text-content"], S = {
+}, w = ["aria-hidden"], T = ["aria-hidden"], E = {
 	key: 3,
+	ref: "slotRef",
 	class: "d-motion-text__fallback"
 };
-function C(e, t, n, r, _, C) {
-	return f(), c("span", {
-		ref: "contentRef",
-		class: u(C.motionTextClasses),
-		style: d(C.componentStyles),
-		"data-text-content": C.isStaticAnimationMode ? n.text : void 0,
-		"aria-live": _.isAnimating ? "polite" : "off",
+function D(e, t, n, r, i, a) {
+	return h(), u("span", {
+		"data-qa": "dt-motion-text",
+		class: p(a.motionTextClasses),
+		style: m(a.componentStyles),
+		"aria-live": i.isAnimating ? "polite" : "off",
 		"aria-label": n.screenReaderText || void 0
-	}, [
-		n.screenReaderText ? (f(), c("span", y, h(n.screenReaderText), 1)) : s("", !0),
-		C.isStaticAnimationMode ? (f(), c(i, { key: 1 }, [l(h(n.text) + " ", 1), n.text ? s("", !0) : m(e.$slots, "default", { key: 0 })], 64)) : (f(), c("span", {
-			key: _.animationKey,
-			class: "d-motion-text__content",
-			"aria-hidden": _.isAnimating
-		}, [(f(!0), c(i, null, p(_.words, (e, t) => (f(), o(a, {
-			key: `${_.animationKey}-${t}`,
-			name: `d-motion-text-word-${n.animationMode}`
-		}, {
-			default: g(() => [t < _.visibleWordCount ? (f(), c("span", {
-				key: 0,
-				class: "d-motion-text__word",
-				"data-text-content": e.text,
-				style: d({ "--word-index": t })
-			}, [(f(!0), c(i, null, p(e.chars, (e, r) => (f(), o(a, {
-				key: `${_.animationKey}-${t}-${r}`,
-				name: `d-motion-text-char-${n.animationMode}`
-			}, {
-				default: g(() => [r < _.visibleCharsPerWord[t] ? (f(), c("span", {
-					key: 0,
-					class: "d-motion-text__char",
-					style: d({
-						"--char-index": r,
-						"--char-delay": `${r * C.timing.characterDelay}ms`
-					})
-				}, h(e), 5)) : s("", !0)]),
-				_: 2
-			}, 1032, ["name"]))), 128))], 12, x)) : s("", !0)]),
-			_: 2
-		}, 1032, ["name"]))), 128))], 8, b)),
-		!_.words.length && !n.text && !C.isStaticAnimationMode ? (f(), c("span", S, [m(e.$slots, "default")])) : s("", !0)
-	], 14, v);
+	}, [n.screenReaderText ? (h(), u("span", C, v(n.screenReaderText), 1)) : l("", !0), a.isWholeText ? (h(), u("span", {
+		key: 1,
+		ref: "slotRef",
+		"data-qa": "dt-motion-text-content",
+		class: "d-motion-text__content",
+		"aria-hidden": n.screenReaderText ? "true" : void 0
+	}, [f(v(n.text), 1), n.text ? l("", !0) : _(e.$slots, "default", { key: 0 })], 8, w)) : i.words.length ? (h(), u("span", {
+		ref: "contentRef",
+		key: i.animationKey,
+		"data-qa": "dt-motion-text-content",
+		class: "d-motion-text__content",
+		"aria-hidden": n.screenReaderText ? "true" : void 0
+	}, [(h(!0), u(c, null, g(i.words, (e, t) => (h(), u(c, { key: `${i.animationKey}-${t}` }, [d("span", {
+		"data-qa": "dt-motion-text-word",
+		class: "d-motion-text__word",
+		style: m(a.wordStyles[t])
+	}, v(e.text), 5), f(v(e.space), 1)], 64))), 128))], 8, T)) : (h(), u("span", E, [_(e.$slots, "default")], 512))], 14, S);
 }
-var w = /* @__PURE__ */ e(_, [["render", C]]);
+var O = /* @__PURE__ */ e(x, [["render", D]]);
 //#endregion
-export { w as default };
+export { O as default };
 
 //# sourceMappingURL=motion-text.js.map