@dialpad/dialtone-vue 4.4.1 → 4.6.0

package/dist/lib/loader/loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"loader.js","names":[],"sources":["../../../components/Loader/Loader.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-loader\"\n    :aria-label=\"ariaLabel || 'loading'\"\n    data-qa=\"dt-loader\"\n  >\n    <svg\n      :class=\"['d-icon', `d-icon--size-${size}`, 'd-loader__icon-track']\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"\n          M12 0.0180664C18.6175 0.0180664 23.9819 5.38305 23.9819\n          12.0005C23.9819 18.6177 18.6175 23.9819 12 23.9819C5.38281\n          23.9819 0.0180664 18.6177 0.0180664 12.0005C0.0180664\n          5.38305 5.38281 0.0180664 12 0.0180664ZM12 3.26807C7.17773\n          3.26807 3.26807 7.17797 3.26807 12.0005C3.26807 16.8228\n          7.17773 20.7319 12 20.7319C16.8223 20.7319 20.7319 16.8228\n          20.7319 12.0005C20.7319 7.17797 16.8223 3.26807 12 3.26807Z\n        \"\n      />\n    </svg>\n    <svg\n      :class=\"['d-icon', `d-icon--size-${size}`, 'd-loader__icon']\"\n      data-qa=\"dt-loader-icon\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"\n          M0.0180664 12.0005\n          C0.0180664 5.38305 5.38305 0.0180664 12.0005 0.0180664\n          C12.8977 0.0183302 13.6255 0.745766 13.6255 1.64307\n          C13.6255 2.54037 12.8977 3.2678 12.0005 3.26807\n          C7.17797 3.26807 3.26807 7.17797 3.26807 12.0005\n          C3.26833 16.8228 7.17814 20.7319 12.0005 20.7319\n          C16.8226 20.7317 20.7317 16.8226 20.7319 12.0005\n          C20.7319 11.103 21.4595 10.3755 22.3569 10.3755\n          C23.2544 10.3755 23.9819 11.103 23.9819 12.0005\n          C23.9817 18.6175 18.6175 23.9817 12.0005 23.9819\n          C5.38321 23.9819 0.0183303 18.6177 0.0180664 12.0005Z\n        \"\n      />\n    </svg>\n  </div>\n</template>\n\n<script>\nimport { ICON_SIZE_MODIFIERS } from '@/components/Icon';\nimport { ordinalSizeValidator } from '@/common/validators';\n\nexport default {\n  name: 'DtLoader',\n\n  props: {\n    /**\n     * The label of the loader as read out by a screen reader.\n     * Default is \"loading\"\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The size of the icon.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: [String, Number],\n      default: 500,\n      validator: ordinalSizeValidator(ICON_SIZE_MODIFIERS),\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;AAwDA,IAAK,IAAU;CACb,MAAM;CAEN,OAAO;EAKL,WAAW;GACT,MAAM;GACN,SAAS;GACV;EAMD,MAAM;GACJ,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACT,WAAW,EAAqB,EAAoB;GACrD;EACF;CACF;;aA9EC,EAgDM,OAAA;EA/CJ,OAAM;EACL,cAAY,EAAA,aAAS;EACtB,WAAQ;WAER,EAkBM,OAAA;EAjBH,OAAK,EAAA;GAAA;GAAA,gBAA6B,EAAA;GAAI;GAAA,CAAA;EACvC,SAAQ;EACR,MAAK;EACL,OAAM;EACN,eAAY;yBAEZ,EAUE,QAAA,EATA,GAAE,8eAQD,EAAA,MAAA,GAAA,CAAA,EAAA,EAAA,EAAA,IAAA,GAAA,EAGL,EAuBM,OAAA;EAtBH,OAAK,EAAA;GAAA;GAAA,gBAA6B,EAAA;GAAI;GAAA,CAAA;EACvC,WAAQ;EACR,SAAQ;EACR,MAAK;EACL,OAAM;EACN,eAAY;yBAEZ,EAcE,QAAA,EAbA,GAAE,+oBAYD,EAAA,MAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,GAAA,EAAA"}
+{"version":3,"file":"loader.js","names":[],"sources":["../../../components/Loader/Loader.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"['d-loader', loaderKindClass]\"\n    :aria-label=\"ariaLabel || 'loading'\"\n    data-qa=\"dt-loader\"\n  >\n    <template v-if=\"isSpinner\">\n      <svg\n        :class=\"['d-icon', `d-icon--size-${size}`, 'd-loader__icon-track']\"\n        data-qa=\"dt-loader-icon-track\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"\n            M12 0.0180664C18.6175 0.0180664 23.9819 5.38305 23.9819\n            12.0005C23.9819 18.6177 18.6175 23.9819 12 23.9819C5.38281\n            23.9819 0.0180664 18.6177 0.0180664 12.0005C0.0180664\n            5.38305 5.38281 0.0180664 12 0.0180664ZM12 3.26807C7.17773\n            3.26807 3.26807 7.17797 3.26807 12.0005C3.26807 16.8228\n            7.17773 20.7319 12 20.7319C16.8223 20.7319 20.7319 16.8228\n            20.7319 12.0005C20.7319 7.17797 16.8223 3.26807 12 3.26807Z\n          \"\n        />\n      </svg>\n      <svg\n        :class=\"['d-icon', `d-icon--size-${size}`, 'd-loader__icon']\"\n        data-qa=\"dt-loader-icon\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"\n            M0.0180664 12.0005\n            C0.0180664 5.38305 5.38305 0.0180664 12.0005 0.0180664\n            C12.8977 0.0183302 13.6255 0.745766 13.6255 1.64307\n            C13.6255 2.54037 12.8977 3.2678 12.0005 3.26807\n            C7.17797 3.26807 3.26807 7.17797 3.26807 12.0005\n            C3.26833 16.8228 7.17814 20.7319 12.0005 20.7319\n            C16.8226 20.7317 20.7317 16.8226 20.7319 12.0005\n            C20.7319 11.103 21.4595 10.3755 22.3569 10.3755\n            C23.2544 10.3755 23.9819 11.103 23.9819 12.0005\n            C23.9817 18.6175 18.6175 23.9817 12.0005 23.9819\n            C5.38321 23.9819 0.0183303 18.6177 0.0180664 12.0005Z\n          \"\n        />\n      </svg>\n    </template>\n    <svg\n      v-else\n      :class=\"['d-icon', `d-icon--size-${size}`, 'd-loader__icon']\"\n      data-qa=\"dt-loader-icon\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n    >\n      <!--\n        Rest positions and radii in the 24-unit viewBox. They must stay in sync\n        with the keyframes in loader.less, which include a 5% outward spread and\n        a 0.9655 scale on top of the Figma spec.\n      -->\n      <circle\n        class=\"d-loader__dot d-loader__dot--1\"\n        data-qa=\"dt-loader-dot\"\n        cx=\"14.843\"\n        cy=\"9.471\"\n        r=\"2.410\"\n      />\n      <circle\n        class=\"d-loader__dot d-loader__dot--2\"\n        data-qa=\"dt-loader-dot\"\n        cx=\"9.156\"\n        cy=\"15.199\"\n        r=\"2.410\"\n      />\n      <circle\n        class=\"d-loader__dot d-loader__dot--3\"\n        data-qa=\"dt-loader-dot\"\n        cx=\"15.469\"\n        cy=\"15.743\"\n        r=\"3.647\"\n      />\n      <circle\n        class=\"d-loader__dot d-loader__dot--4\"\n        data-qa=\"dt-loader-dot\"\n        cx=\"8.539\"\n        cy=\"8.915\"\n        r=\"3.647\"\n      />\n    </svg>\n  </div>\n</template>\n\n<script>\nimport { ICON_SIZE_MODIFIERS } from '@/components/Icon';\nimport { ordinalSizeValidator } from '@/common/validators';\nimport { LOADER_KIND_MODIFIERS } from './LoaderConstants';\n\nexport default {\n  name: 'DtLoader',\n\n  props: {\n    /**\n     * The label of the loader as read out by a screen reader.\n     * Default is \"loading\"\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The visual style of the loader: the four-dot loader, or the circular spinner.\n     * @values dots, spinner\n     */\n    kind: {\n      type: String,\n      default: 'dots',\n      validator: (kind) => Object.keys(LOADER_KIND_MODIFIERS).includes(kind),\n    },\n\n    /**\n     * The size of the icon.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: [String, Number],\n      default: 500,\n      validator: ordinalSizeValidator(ICON_SIZE_MODIFIERS),\n    },\n  },\n\n  computed: {\n    isSpinner () {\n      return this.kind === 'spinner';\n    },\n\n    loaderKindClass () {\n      return this.isSpinner ? LOADER_KIND_MODIFIERS.spinner : LOADER_KIND_MODIFIERS.dots;\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;;AAsGA,IAAK,IAAU;CACb,MAAM;CAEN,OAAO;EAKL,WAAW;GACT,MAAM;GACN,SAAS;GACV;EAMD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,MAAS,OAAO,KAAK,EAAsB,CAAC,SAAS,EAAK;GACvE;EAMD,MAAM;GACJ,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACT,WAAW,EAAqB,EAAoB;GACrD;EACF;CAED,UAAU;EACR,YAAa;AACX,UAAO,KAAK,SAAS;;EAGvB,kBAAmB;AACjB,UAAO,KAAK,YAAY,EAAsB,UAAU,EAAsB;;EAEjF;CACF;;aAhJC,EA6FM,OAAA;EA5FH,OAAK,EAAA,CAAA,YAAe,EAAA,gBAAe,CAAA;EACnC,cAAY,EAAA,aAAS;EACtB,WAAQ;KAEQ,EAAA,aAAA,GAAA,EAAhB,EA6CW,GAAA,EAAA,KAAA,GAAA,EAAA,EAAA,GAAA,EA5CT,EAmBM,OAAA;EAlBH,OAAK,EAAA;GAAA;GAAA,gBAA6B,EAAA;GAAI;GAAA,CAAA;EACvC,WAAQ;EACR,SAAQ;EACR,MAAK;EACL,OAAM;EACN,eAAY;yBAEZ,EAUE,QAAA,EATA,GAAE,8fAQD,EAAA,MAAA,GAAA,CAAA,EAAA,EAAA,EAAA,IAAA,GAAA,EAGL,EAuBM,OAAA;EAtBH,OAAK,EAAA;GAAA;GAAA,gBAA6B,EAAA;GAAI;GAAA,CAAA;EACvC,WAAQ;EACR,SAAQ;EACR,MAAK;EACL,OAAM;EACN,eAAY;yBAEZ,EAcE,QAAA,EAbA,GAAE,uqBAYD,EAAA,MAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,GAAA,KAAA,GAAA,EAIP,EAyCM,OAAA;;EAvCH,OAAK,EAAA;GAAA;GAAA,gBAA6B,EAAA;GAAI;GAAA,CAAA;EACvC,WAAQ;EACR,SAAQ;EACR,OAAM;EACN,eAAY;;EAOZ,EAME,UAAA;GALA,OAAM;GACN,WAAQ;GACR,IAAG;GACH,IAAG;GACH,GAAE;;EAEJ,EAME,UAAA;GALA,OAAM;GACN,WAAQ;GACR,IAAG;GACH,IAAG;GACH,GAAE;;EAEJ,EAME,UAAA;GALA,OAAM;GACN,WAAQ;GACR,IAAG;GACH,IAAG;GACH,GAAE;;EAEJ,EAME,UAAA;GALA,OAAM;GACN,WAAQ;GACR,IAAG;GACH,IAAG;GACH,GAAE"}

package/dist/lib/mode-island/mode-island.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(`./utils.cjs`),n=require(`./mode-island-constants.cjs`),r=require(`./validators.cjs`);let i=require(`vue`);var a={name:`DtModeIsland`,provide(){return{dtModeIslandMode:()=>this.computedMode}},inject:{parentModeIslandMode:{from:`dtModeIslandMode`,default:null}},props:{as:{type:String,default:`div`},mode:{type:String,default:n.DT_MODE_ISLAND_TYPES.INVERTED,validator:r.modeValidator}},data(){return{currentContrast:t.getRootContrast(),currentMaterial:t.getRootMaterial(),contrastObserver:null,materialObserver:null,modeObserver:null,elementRef:null,calculatedMode:null}},computed:{isInverted(){return this.mode===n.DT_MODE_ISLAND_TYPES.INVERTED},invertedAttribute(){return this.isInverted?``:null},computedMode(){return this.mode===n.DT_MODE_ISLAND_TYPES.LIGHT||this.mode===n.DT_MODE_ISLAND_TYPES.DARK?this.mode:this.mode===n.DT_MODE_ISLAND_TYPES.INVERTED&&this.calculatedMode?this.calculatedMode:this.calculateInvertedMode()}},beforeCreate(){if(this.$attrs&&this.$attrs[`data-dt-brand`])throw Error(`[DtModeIsland] The data-dt-brand attribute is not allowed on mode islands. Brand should only be set at the root level.`)},mounted(){this.elementRef=this.$el,this.setupContrastObserver(),this.setupMaterialObserver(),this.isInverted&&(this.calculatedMode=this.calculateInvertedMode(),this.setupModeObserver()),this.currentContrast=t.getRootContrast(),this.currentMaterial=t.getRootMaterial()},beforeUnmount(){this.contrastObserver&&(this.contrastObserver.disconnect(),this.contrastObserver=null),this.materialObserver&&(this.materialObserver.disconnect(),this.materialObserver=null),this.modeObserver&&(this.modeObserver.disconnect(),this.modeObserver=null)},methods:{calculateInvertedMode(){return this.parentModeIslandMode?t.getOppositeMode(typeof this.parentModeIslandMode==`function`?this.parentModeIslandMode():this.parentModeIslandMode):this.elementRef?t.getOppositeMode(t.findParentMode(this.elementRef)):t.getOppositeMode(t.getRootMode())},setupContrastObserver(){this.contrastObserver=new MutationObserver(e=>{for(let n of e)n.type===`attributes`&&n.attributeName===`data-dt-contrast`&&(this.currentContrast=t.getRootContrast())}),this.contrastObserver.observe(document.documentElement,{attributes:!0,attributeFilter:[`data-dt-contrast`]})},setupMaterialObserver(){this.materialObserver=new MutationObserver(e=>{for(let n of e)n.type===`attributes`&&n.attributeName===`data-dt-material`&&(this.currentMaterial=t.getRootMaterial())}),this.materialObserver.observe(document.documentElement,{attributes:!0,attributeFilter:[`data-dt-material`]})},setupModeObserver(){let e={attributes:!0,attributeFilter:[`data-dt-mode`],subtree:!1};this.modeObserver=new MutationObserver(e=>{for(let t of e)t.type===`attributes`&&t.attributeName===`data-dt-mode`&&(this.calculatedMode=this.calculateInvertedMode())}),this.modeObserver.observe(document.documentElement,e);let t=this.elementRef?.parentElement;for(;t;)t.hasAttribute(`data-dt-mode`)&&this.modeObserver.observe(t,e),t=t.parentElement}}};function o(e,t,n,r,a,o){return(0,i.openBlock)(),(0,i.createBlock)((0,i.resolveDynamicComponent)(n.as),{class:`d-mode-island`,"data-dt-mode":o.computedMode,"data-mode-island-inverted":o.invertedAttribute,"data-dt-contrast":a.currentContrast,"data-dt-material":a.currentMaterial},{default:(0,i.withCtx)(()=>[(0,i.renderSlot)(e.$slots,`default`)]),_:3},8,[`data-dt-mode`,`data-mode-island-inverted`,`data-dt-contrast`,`data-dt-material`])}var s=e.t(a,[[`render`,o]]);exports.default=s;
+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(`./utils.cjs`),n=require(`./mode-island-constants.cjs`),r=require(`./validators.cjs`);let i=require(`vue`);var a={name:`DtModeIsland`,provide(){return{dtModeIslandMode:()=>this.computedMode}},inject:{parentModeIslandMode:{from:`dtModeIslandMode`,default:null}},props:{as:{type:String,default:`div`},mode:{type:String,default:n.DT_MODE_ISLAND_TYPES.INVERTED,validator:r.modeValidator}},data(){return{currentContrast:t.getRootContrast(),currentMaterial:t.getRootMaterial(),contrastObserver:null,materialObserver:null,modeObserver:null,elementRef:null,calculatedMode:null}},computed:{isInverted(){return this.mode===n.DT_MODE_ISLAND_TYPES.INVERTED},invertedAttribute(){return this.isInverted?``:null},computedMode(){return this.mode===n.DT_MODE_ISLAND_TYPES.LIGHT||this.mode===n.DT_MODE_ISLAND_TYPES.DARK?this.mode:this.mode===n.DT_MODE_ISLAND_TYPES.INVERTED&&this.calculatedMode?this.calculatedMode:this.calculateInvertedMode()}},beforeCreate(){if(this.$attrs&&this.$attrs[`data-dt-brand`])throw Error(`[DtModeIsland] The data-dt-brand attribute is not allowed on mode islands. Brand should only be set at the root level.`)},mounted(){this.elementRef=this.$el,this.setupContrastObserver(),this.setupMaterialObserver(),this.isInverted&&(this.calculatedMode=this.calculateInvertedMode(),this.setupModeObserver()),this.currentContrast=t.getRootContrast(),this.currentMaterial=t.getRootMaterial()},beforeUnmount(){this.contrastObserver&&(this.contrastObserver.disconnect(),this.contrastObserver=null),this.materialObserver&&(this.materialObserver.disconnect(),this.materialObserver=null),this.modeObserver&&(this.modeObserver.disconnect(),this.modeObserver=null)},methods:{calculateInvertedMode(){return this.parentModeIslandMode?t.getOppositeMode(typeof this.parentModeIslandMode==`function`?this.parentModeIslandMode():this.parentModeIslandMode):this.elementRef?t.getOppositeMode(t.findParentMode(this.elementRef)):t.getOppositeMode(t.getRootMode())},setupContrastObserver(){this.contrastObserver=new MutationObserver(e=>{for(let n of e)n.type===`attributes`&&n.attributeName===`data-dt-contrast`&&(this.currentContrast=t.getRootContrast())}),this.contrastObserver.observe(document.documentElement,{attributes:!0,attributeFilter:[`data-dt-contrast`]})},setupMaterialObserver(){this.materialObserver=new MutationObserver(e=>{for(let n of e)n.type===`attributes`&&n.attributeName===`data-dt-material`&&(this.currentMaterial=t.getRootMaterial())}),this.materialObserver.observe(document.documentElement,{attributes:!0,attributeFilter:[`data-dt-material`]})},setupModeObserver(){let e={attributes:!0,attributeFilter:[`data-dt-mode`],subtree:!1};this.modeObserver=new MutationObserver(e=>{for(let t of e)t.type===`attributes`&&t.attributeName===`data-dt-mode`&&(this.calculatedMode=this.calculateInvertedMode())}),this.modeObserver.observe(document.documentElement,e);let t=this.elementRef?.parentElement;for(;t;)t.hasAttribute(`data-dt-mode`)&&this.modeObserver.observe(t,e),t=t.parentElement}}};function o(e,t,n,r,a,o){return(0,i.openBlock)(),(0,i.createBlock)((0,i.resolveDynamicComponent)(n.as),{class:`d-mode-island`,"data-qa":`dt-mode-island`,"data-dt-mode":o.computedMode,"data-mode-island-inverted":o.invertedAttribute,"data-dt-contrast":a.currentContrast,"data-dt-material":a.currentMaterial},{default:(0,i.withCtx)(()=>[(0,i.renderSlot)(e.$slots,`default`)]),_:3},8,[`data-dt-mode`,`data-mode-island-inverted`,`data-dt-contrast`,`data-dt-material`])}var s=e.t(a,[[`render`,o]]);exports.default=s;
 //# sourceMappingURL=mode-island.cjs.map

package/dist/lib/mode-island/mode-island.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"mode-island.cjs","names":[],"sources":["../../../components/ModeIsland/ModeIsland.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    class=\"d-mode-island\"\n    :data-dt-mode=\"computedMode\"\n    :data-mode-island-inverted=\"invertedAttribute\"\n    :data-dt-contrast=\"currentContrast\"\n    :data-dt-material=\"currentMaterial\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_MODE_ISLAND_TYPES } from './ModeIslandConstants';\nimport { modeValidator } from './Validators';\nimport {\n  getOppositeMode,\n  getRootMode,\n  getRootContrast,\n  getRootMaterial,\n  findParentMode,\n} from './Utils';\n\n/**\n * Prefer the v-dt-mode directive for local color-mode scoping.\n * DtModeIsland renders a container with the active mode's primary surface background.\n * Use it when that container and automatic surface are wanted together, or when\n * the current directive plugin cannot be installed. Its mode prop uses \"inverted\";\n * the directive uses \"invert\". See the usage guide for server-rendering considerations.\n * @see https://dialtone.dialpad.com/components/mode-island.html\n */\nexport default {\n  name: 'DtModeIsland',\n\n  provide () {\n    return {\n      dtModeIslandMode: () => this.computedMode,\n    };\n  },\n\n  inject: {\n    parentModeIslandMode: {\n      from: 'dtModeIslandMode',\n      default: null,\n    },\n  },\n\n  props: {\n    /**\n     * Set this prop to render the mode island as a specific HTML element.\n     * @type {String}\n     * @values div, section, nav, article, aside, header, footer, main\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The mode to apply to the island.\n     * - 'inverted': Opposite of parent or root mode\n     * - 'light': Always light mode\n     * - 'dark': Always dark mode\n     * @type {String}\n     * @values inverted, light, dark\n     */\n    mode: {\n      type: String,\n      default: DT_MODE_ISLAND_TYPES.INVERTED,\n      validator: modeValidator,\n    },\n  },\n\n  data () {\n    return {\n      currentContrast: getRootContrast(),\n      currentMaterial: getRootMaterial(),\n      contrastObserver: null,\n      materialObserver: null,\n      modeObserver: null,\n      elementRef: null,\n      calculatedMode: null, // Store calculated mode as reactive data\n    };\n  },\n\n  computed: {\n    isInverted () {\n      return this.mode === DT_MODE_ISLAND_TYPES.INVERTED;\n    },\n\n    invertedAttribute () {\n      return this.isInverted ? '' : null;\n    },\n\n    computedMode () {\n      // If mode is explicitly light or dark, use it directly\n      if (this.mode === DT_MODE_ISLAND_TYPES.LIGHT || this.mode === DT_MODE_ISLAND_TYPES.DARK) {\n        return this.mode;\n      }\n\n      // If mode is inverted, use the calculated mode if available\n      if (this.mode === DT_MODE_ISLAND_TYPES.INVERTED && this.calculatedMode) {\n        return this.calculatedMode;\n      }\n\n      // Otherwise calculate it now\n      return this.calculateInvertedMode();\n    },\n  },\n\n  beforeCreate () {\n    // Throw error if data-dt-brand is manually set\n    if (this.$attrs && this.$attrs['data-dt-brand']) {\n      throw new Error('[DtModeIsland] The data-dt-brand attribute is not allowed on mode islands. Brand should only be set at the root level.');\n    }\n  },\n\n  mounted () {\n    // Store element reference\n    this.elementRef = this.$el;\n\n    // Setup MutationObserver to watch for contrast changes on root\n    this.setupContrastObserver();\n\n    // Setup MutationObserver to watch for material changes on root\n    this.setupMaterialObserver();\n\n    // Setup MutationObserver to watch for mode changes (only if inverted)\n    if (this.isInverted) {\n      // Initialize the calculated mode\n      this.calculatedMode = this.calculateInvertedMode();\n      this.setupModeObserver();\n    }\n\n    // Initial values\n    this.currentContrast = getRootContrast();\n    this.currentMaterial = getRootMaterial();\n  },\n\n  beforeUnmount () {\n    // Cleanup observers\n    if (this.contrastObserver) {\n      this.contrastObserver.disconnect();\n      this.contrastObserver = null;\n    }\n    if (this.materialObserver) {\n      this.materialObserver.disconnect();\n      this.materialObserver = null;\n    }\n    if (this.modeObserver) {\n      this.modeObserver.disconnect();\n      this.modeObserver = null;\n    }\n  },\n\n  methods: {\n    calculateInvertedMode () {\n      // First check if there's a parent mode island\n      if (this.parentModeIslandMode) {\n        const parentMode = typeof this.parentModeIslandMode === 'function'\n          ? this.parentModeIslandMode()\n          : this.parentModeIslandMode;\n        return getOppositeMode(parentMode);\n      }\n\n      // Otherwise, find the nearest parent with data-dt-mode\n      if (this.elementRef) {\n        const parentMode = findParentMode(this.elementRef);\n        return getOppositeMode(parentMode);\n      }\n\n      // Default fallback\n      return getOppositeMode(getRootMode());\n    },\n\n    setupContrastObserver () {\n      this.contrastObserver = new MutationObserver((mutationsList) => {\n        for (const mutation of mutationsList) {\n          if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-contrast') {\n            this.currentContrast = getRootContrast();\n          }\n        }\n      });\n\n      this.contrastObserver.observe(document.documentElement, {\n        attributes: true,\n        attributeFilter: ['data-dt-contrast'],\n      });\n    },\n\n    setupMaterialObserver () {\n      this.materialObserver = new MutationObserver((mutationsList) => {\n        for (const mutation of mutationsList) {\n          if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-material') {\n            this.currentMaterial = getRootMaterial();\n          }\n        }\n      });\n\n      this.materialObserver.observe(document.documentElement, {\n        attributes: true,\n        attributeFilter: ['data-dt-material'],\n      });\n    },\n\n    setupModeObserver () {\n      const config = {\n        attributes: true,\n        attributeFilter: ['data-dt-mode'],\n        subtree: false,\n      };\n\n      this.modeObserver = new MutationObserver((mutationsList) => {\n        for (const mutation of mutationsList) {\n          if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-mode') {\n            // Recalculate and update the reactive data property\n            this.calculatedMode = this.calculateInvertedMode();\n          }\n        }\n      });\n\n      // Observe root element\n      this.modeObserver.observe(document.documentElement, config);\n\n      // Also observe all parent elements with data-dt-mode\n      let parent = this.elementRef?.parentElement;\n      while (parent) {\n        if (parent.hasAttribute('data-dt-mode')) {\n          this.modeObserver.observe(parent, config);\n        }\n        parent = parent.parentElement;\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"mode-island.cjs","names":[],"sources":["../../../components/ModeIsland/ModeIsland.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    class=\"d-mode-island\"\n    data-qa=\"dt-mode-island\"\n    :data-dt-mode=\"computedMode\"\n    :data-mode-island-inverted=\"invertedAttribute\"\n    :data-dt-contrast=\"currentContrast\"\n    :data-dt-material=\"currentMaterial\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_MODE_ISLAND_TYPES } from './ModeIslandConstants';\nimport { modeValidator } from './Validators';\nimport {\n  getOppositeMode,\n  getRootMode,\n  getRootContrast,\n  getRootMaterial,\n  findParentMode,\n} from './Utils';\n\n/**\n * Prefer the v-dt-mode directive for local color-mode scoping.\n * DtModeIsland renders a container with the active mode's primary surface background.\n * Use it when that container and automatic surface are wanted together, or when\n * the current directive plugin cannot be installed. Its mode prop uses \"inverted\";\n * the directive uses \"invert\". See the usage guide for server-rendering considerations.\n * @see https://dialtone.dialpad.com/components/mode-island.html\n */\nexport default {\n  name: 'DtModeIsland',\n\n  provide () {\n    return {\n      dtModeIslandMode: () => this.computedMode,\n    };\n  },\n\n  inject: {\n    parentModeIslandMode: {\n      from: 'dtModeIslandMode',\n      default: null,\n    },\n  },\n\n  props: {\n    /**\n     * Set this prop to render the mode island as a specific HTML element.\n     * @type {String}\n     * @values div, section, nav, article, aside, header, footer, main\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The mode to apply to the island.\n     * - 'inverted': Opposite of parent or root mode\n     * - 'light': Always light mode\n     * - 'dark': Always dark mode\n     * @type {String}\n     * @values inverted, light, dark\n     */\n    mode: {\n      type: String,\n      default: DT_MODE_ISLAND_TYPES.INVERTED,\n      validator: modeValidator,\n    },\n  },\n\n  data () {\n    return {\n      currentContrast: getRootContrast(),\n      currentMaterial: getRootMaterial(),\n      contrastObserver: null,\n      materialObserver: null,\n      modeObserver: null,\n      elementRef: null,\n      calculatedMode: null, // Store calculated mode as reactive data\n    };\n  },\n\n  computed: {\n    isInverted () {\n      return this.mode === DT_MODE_ISLAND_TYPES.INVERTED;\n    },\n\n    invertedAttribute () {\n      return this.isInverted ? '' : null;\n    },\n\n    computedMode () {\n      // If mode is explicitly light or dark, use it directly\n      if (this.mode === DT_MODE_ISLAND_TYPES.LIGHT || this.mode === DT_MODE_ISLAND_TYPES.DARK) {\n        return this.mode;\n      }\n\n      // If mode is inverted, use the calculated mode if available\n      if (this.mode === DT_MODE_ISLAND_TYPES.INVERTED && this.calculatedMode) {\n        return this.calculatedMode;\n      }\n\n      // Otherwise calculate it now\n      return this.calculateInvertedMode();\n    },\n  },\n\n  beforeCreate () {\n    // Throw error if data-dt-brand is manually set\n    if (this.$attrs && this.$attrs['data-dt-brand']) {\n      throw new Error('[DtModeIsland] The data-dt-brand attribute is not allowed on mode islands. Brand should only be set at the root level.');\n    }\n  },\n\n  mounted () {\n    // Store element reference\n    this.elementRef = this.$el;\n\n    // Setup MutationObserver to watch for contrast changes on root\n    this.setupContrastObserver();\n\n    // Setup MutationObserver to watch for material changes on root\n    this.setupMaterialObserver();\n\n    // Setup MutationObserver to watch for mode changes (only if inverted)\n    if (this.isInverted) {\n      // Initialize the calculated mode\n      this.calculatedMode = this.calculateInvertedMode();\n      this.setupModeObserver();\n    }\n\n    // Initial values\n    this.currentContrast = getRootContrast();\n    this.currentMaterial = getRootMaterial();\n  },\n\n  beforeUnmount () {\n    // Cleanup observers\n    if (this.contrastObserver) {\n      this.contrastObserver.disconnect();\n      this.contrastObserver = null;\n    }\n    if (this.materialObserver) {\n      this.materialObserver.disconnect();\n      this.materialObserver = null;\n    }\n    if (this.modeObserver) {\n      this.modeObserver.disconnect();\n      this.modeObserver = null;\n    }\n  },\n\n  methods: {\n    calculateInvertedMode () {\n      // First check if there's a parent mode island\n      if (this.parentModeIslandMode) {\n        const parentMode = typeof this.parentModeIslandMode === 'function'\n          ? this.parentModeIslandMode()\n          : this.parentModeIslandMode;\n        return getOppositeMode(parentMode);\n      }\n\n      // Otherwise, find the nearest parent with data-dt-mode\n      if (this.elementRef) {\n        const parentMode = findParentMode(this.elementRef);\n        return getOppositeMode(parentMode);\n      }\n\n      // Default fallback\n      return getOppositeMode(getRootMode());\n    },\n\n    setupContrastObserver () {\n      this.contrastObserver = new MutationObserver((mutationsList) => {\n        for (const mutation of mutationsList) {\n          if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-contrast') {\n            this.currentContrast = getRootContrast();\n          }\n        }\n      });\n\n      this.contrastObserver.observe(document.documentElement, {\n        attributes: true,\n        attributeFilter: ['data-dt-contrast'],\n      });\n    },\n\n    setupMaterialObserver () {\n      this.materialObserver = new MutationObserver((mutationsList) => {\n        for (const mutation of mutationsList) {\n          if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-material') {\n            this.currentMaterial = getRootMaterial();\n          }\n        }\n      });\n\n      this.materialObserver.observe(document.documentElement, {\n        attributes: true,\n        attributeFilter: ['data-dt-material'],\n      });\n    },\n\n    setupModeObserver () {\n      const config = {\n        attributes: true,\n        attributeFilter: ['data-dt-mode'],\n        subtree: false,\n      };\n\n      this.modeObserver = new MutationObserver((mutationsList) => {\n        for (const mutation of mutationsList) {\n          if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-mode') {\n            // Recalculate and update the reactive data property\n            this.calculatedMode = this.calculateInvertedMode();\n          }\n        }\n      });\n\n      // Observe root element\n      this.modeObserver.observe(document.documentElement, config);\n\n      // Also observe all parent elements with data-dt-mode\n      let parent = this.elementRef?.parentElement;\n      while (parent) {\n        if (parent.hasAttribute('data-dt-mode')) {\n          this.modeObserver.observe(parent, config);\n        }\n        parent = parent.parentElement;\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/mode-island/mode-island.js

@@ -92,6 +92,7 @@ var p = {
 function m(e, t, n, r, i, a) {
 	return l(), c(d(n.as), {
 		class: "d-mode-island",
+		"data-qa": "dt-mode-island",
 		"data-dt-mode": a.computedMode,
 		"data-mode-island-inverted": a.invertedAttribute,
 		"data-dt-contrast": i.currentContrast,

package/dist/lib/mode-island/mode-island.js.map

@@ -1 +1 @@
-{"version":3,"file":"mode-island.js","names":[],"sources":["../../../components/ModeIsland/ModeIsland.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    class=\"d-mode-island\"\n    :data-dt-mode=\"computedMode\"\n    :data-mode-island-inverted=\"invertedAttribute\"\n    :data-dt-contrast=\"currentContrast\"\n    :data-dt-material=\"currentMaterial\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_MODE_ISLAND_TYPES } from './ModeIslandConstants';\nimport { modeValidator } from './Validators';\nimport {\n  getOppositeMode,\n  getRootMode,\n  getRootContrast,\n  getRootMaterial,\n  findParentMode,\n} from './Utils';\n\n/**\n * Prefer the v-dt-mode directive for local color-mode scoping.\n * DtModeIsland renders a container with the active mode's primary surface background.\n * Use it when that container and automatic surface are wanted together, or when\n * the current directive plugin cannot be installed. Its mode prop uses \"inverted\";\n * the directive uses \"invert\". See the usage guide for server-rendering considerations.\n * @see https://dialtone.dialpad.com/components/mode-island.html\n */\nexport default {\n  name: 'DtModeIsland',\n\n  provide () {\n    return {\n      dtModeIslandMode: () => this.computedMode,\n    };\n  },\n\n  inject: {\n    parentModeIslandMode: {\n      from: 'dtModeIslandMode',\n      default: null,\n    },\n  },\n\n  props: {\n    /**\n     * Set this prop to render the mode island as a specific HTML element.\n     * @type {String}\n     * @values div, section, nav, article, aside, header, footer, main\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The mode to apply to the island.\n     * - 'inverted': Opposite of parent or root mode\n     * - 'light': Always light mode\n     * - 'dark': Always dark mode\n     * @type {String}\n     * @values inverted, light, dark\n     */\n    mode: {\n      type: String,\n      default: DT_MODE_ISLAND_TYPES.INVERTED,\n      validator: modeValidator,\n    },\n  },\n\n  data () {\n    return {\n      currentContrast: getRootContrast(),\n      currentMaterial: getRootMaterial(),\n      contrastObserver: null,\n      materialObserver: null,\n      modeObserver: null,\n      elementRef: null,\n      calculatedMode: null, // Store calculated mode as reactive data\n    };\n  },\n\n  computed: {\n    isInverted () {\n      return this.mode === DT_MODE_ISLAND_TYPES.INVERTED;\n    },\n\n    invertedAttribute () {\n      return this.isInverted ? '' : null;\n    },\n\n    computedMode () {\n      // If mode is explicitly light or dark, use it directly\n      if (this.mode === DT_MODE_ISLAND_TYPES.LIGHT || this.mode === DT_MODE_ISLAND_TYPES.DARK) {\n        return this.mode;\n      }\n\n      // If mode is inverted, use the calculated mode if available\n      if (this.mode === DT_MODE_ISLAND_TYPES.INVERTED && this.calculatedMode) {\n        return this.calculatedMode;\n      }\n\n      // Otherwise calculate it now\n      return this.calculateInvertedMode();\n    },\n  },\n\n  beforeCreate () {\n    // Throw error if data-dt-brand is manually set\n    if (this.$attrs && this.$attrs['data-dt-brand']) {\n      throw new Error('[DtModeIsland] The data-dt-brand attribute is not allowed on mode islands. Brand should only be set at the root level.');\n    }\n  },\n\n  mounted () {\n    // Store element reference\n    this.elementRef = this.$el;\n\n    // Setup MutationObserver to watch for contrast changes on root\n    this.setupContrastObserver();\n\n    // Setup MutationObserver to watch for material changes on root\n    this.setupMaterialObserver();\n\n    // Setup MutationObserver to watch for mode changes (only if inverted)\n    if (this.isInverted) {\n      // Initialize the calculated mode\n      this.calculatedMode = this.calculateInvertedMode();\n      this.setupModeObserver();\n    }\n\n    // Initial values\n    this.currentContrast = getRootContrast();\n    this.currentMaterial = getRootMaterial();\n  },\n\n  beforeUnmount () {\n    // Cleanup observers\n    if (this.contrastObserver) {\n      this.contrastObserver.disconnect();\n      this.contrastObserver = null;\n    }\n    if (this.materialObserver) {\n      this.materialObserver.disconnect();\n      this.materialObserver = null;\n    }\n    if (this.modeObserver) {\n      this.modeObserver.disconnect();\n      this.modeObserver = null;\n    }\n  },\n\n  methods: {\n    calculateInvertedMode () {\n      // First check if there's a parent mode island\n      if (this.parentModeIslandMode) {\n        const parentMode = typeof this.parentModeIslandMode === 'function'\n          ? this.parentModeIslandMode()\n          : this.parentModeIslandMode;\n        return getOppositeMode(parentMode);\n      }\n\n      // Otherwise, find the nearest parent with data-dt-mode\n      if (this.elementRef) {\n        const parentMode = findParentMode(this.elementRef);\n        return getOppositeMode(parentMode);\n      }\n\n      // Default fallback\n      return getOppositeMode(getRootMode());\n    },\n\n    setupContrastObserver () {\n      this.contrastObserver = new MutationObserver((mutationsList) => {\n        for (const mutation of mutationsList) {\n          if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-contrast') {\n            this.currentContrast = getRootContrast();\n          }\n        }\n      });\n\n      this.contrastObserver.observe(document.documentElement, {\n        attributes: true,\n        attributeFilter: ['data-dt-contrast'],\n      });\n    },\n\n    setupMaterialObserver () {\n      this.materialObserver = new MutationObserver((mutationsList) => {\n        for (const mutation of mutationsList) {\n          if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-material') {\n            this.currentMaterial = getRootMaterial();\n          }\n        }\n      });\n\n      this.materialObserver.observe(document.documentElement, {\n        attributes: true,\n        attributeFilter: ['data-dt-material'],\n      });\n    },\n\n    setupModeObserver () {\n      const config = {\n        attributes: true,\n        attributeFilter: ['data-dt-mode'],\n        subtree: false,\n      };\n\n      this.modeObserver = new MutationObserver((mutationsList) => {\n        for (const mutation of mutationsList) {\n          if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-mode') {\n            // Recalculate and update the reactive data property\n            this.calculatedMode = this.calculateInvertedMode();\n          }\n        }\n      });\n\n      // Observe root element\n      this.modeObserver.observe(document.documentElement, config);\n\n      // Also observe all parent elements with data-dt-mode\n      let parent = this.elementRef?.parentElement;\n      while (parent) {\n        if (parent.hasAttribute('data-dt-mode')) {\n          this.modeObserver.observe(parent, config);\n        }\n        parent = parent.parentElement;\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"mode-island.js","names":[],"sources":["../../../components/ModeIsland/ModeIsland.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    class=\"d-mode-island\"\n    data-qa=\"dt-mode-island\"\n    :data-dt-mode=\"computedMode\"\n    :data-mode-island-inverted=\"invertedAttribute\"\n    :data-dt-contrast=\"currentContrast\"\n    :data-dt-material=\"currentMaterial\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_MODE_ISLAND_TYPES } from './ModeIslandConstants';\nimport { modeValidator } from './Validators';\nimport {\n  getOppositeMode,\n  getRootMode,\n  getRootContrast,\n  getRootMaterial,\n  findParentMode,\n} from './Utils';\n\n/**\n * Prefer the v-dt-mode directive for local color-mode scoping.\n * DtModeIsland renders a container with the active mode's primary surface background.\n * Use it when that container and automatic surface are wanted together, or when\n * the current directive plugin cannot be installed. Its mode prop uses \"inverted\";\n * the directive uses \"invert\". See the usage guide for server-rendering considerations.\n * @see https://dialtone.dialpad.com/components/mode-island.html\n */\nexport default {\n  name: 'DtModeIsland',\n\n  provide () {\n    return {\n      dtModeIslandMode: () => this.computedMode,\n    };\n  },\n\n  inject: {\n    parentModeIslandMode: {\n      from: 'dtModeIslandMode',\n      default: null,\n    },\n  },\n\n  props: {\n    /**\n     * Set this prop to render the mode island as a specific HTML element.\n     * @type {String}\n     * @values div, section, nav, article, aside, header, footer, main\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The mode to apply to the island.\n     * - 'inverted': Opposite of parent or root mode\n     * - 'light': Always light mode\n     * - 'dark': Always dark mode\n     * @type {String}\n     * @values inverted, light, dark\n     */\n    mode: {\n      type: String,\n      default: DT_MODE_ISLAND_TYPES.INVERTED,\n      validator: modeValidator,\n    },\n  },\n\n  data () {\n    return {\n      currentContrast: getRootContrast(),\n      currentMaterial: getRootMaterial(),\n      contrastObserver: null,\n      materialObserver: null,\n      modeObserver: null,\n      elementRef: null,\n      calculatedMode: null, // Store calculated mode as reactive data\n    };\n  },\n\n  computed: {\n    isInverted () {\n      return this.mode === DT_MODE_ISLAND_TYPES.INVERTED;\n    },\n\n    invertedAttribute () {\n      return this.isInverted ? '' : null;\n    },\n\n    computedMode () {\n      // If mode is explicitly light or dark, use it directly\n      if (this.mode === DT_MODE_ISLAND_TYPES.LIGHT || this.mode === DT_MODE_ISLAND_TYPES.DARK) {\n        return this.mode;\n      }\n\n      // If mode is inverted, use the calculated mode if available\n      if (this.mode === DT_MODE_ISLAND_TYPES.INVERTED && this.calculatedMode) {\n        return this.calculatedMode;\n      }\n\n      // Otherwise calculate it now\n      return this.calculateInvertedMode();\n    },\n  },\n\n  beforeCreate () {\n    // Throw error if data-dt-brand is manually set\n    if (this.$attrs && this.$attrs['data-dt-brand']) {\n      throw new Error('[DtModeIsland] The data-dt-brand attribute is not allowed on mode islands. Brand should only be set at the root level.');\n    }\n  },\n\n  mounted () {\n    // Store element reference\n    this.elementRef = this.$el;\n\n    // Setup MutationObserver to watch for contrast changes on root\n    this.setupContrastObserver();\n\n    // Setup MutationObserver to watch for material changes on root\n    this.setupMaterialObserver();\n\n    // Setup MutationObserver to watch for mode changes (only if inverted)\n    if (this.isInverted) {\n      // Initialize the calculated mode\n      this.calculatedMode = this.calculateInvertedMode();\n      this.setupModeObserver();\n    }\n\n    // Initial values\n    this.currentContrast = getRootContrast();\n    this.currentMaterial = getRootMaterial();\n  },\n\n  beforeUnmount () {\n    // Cleanup observers\n    if (this.contrastObserver) {\n      this.contrastObserver.disconnect();\n      this.contrastObserver = null;\n    }\n    if (this.materialObserver) {\n      this.materialObserver.disconnect();\n      this.materialObserver = null;\n    }\n    if (this.modeObserver) {\n      this.modeObserver.disconnect();\n      this.modeObserver = null;\n    }\n  },\n\n  methods: {\n    calculateInvertedMode () {\n      // First check if there's a parent mode island\n      if (this.parentModeIslandMode) {\n        const parentMode = typeof this.parentModeIslandMode === 'function'\n          ? this.parentModeIslandMode()\n          : this.parentModeIslandMode;\n        return getOppositeMode(parentMode);\n      }\n\n      // Otherwise, find the nearest parent with data-dt-mode\n      if (this.elementRef) {\n        const parentMode = findParentMode(this.elementRef);\n        return getOppositeMode(parentMode);\n      }\n\n      // Default fallback\n      return getOppositeMode(getRootMode());\n    },\n\n    setupContrastObserver () {\n      this.contrastObserver = new MutationObserver((mutationsList) => {\n        for (const mutation of mutationsList) {\n          if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-contrast') {\n            this.currentContrast = getRootContrast();\n          }\n        }\n      });\n\n      this.contrastObserver.observe(document.documentElement, {\n        attributes: true,\n        attributeFilter: ['data-dt-contrast'],\n      });\n    },\n\n    setupMaterialObserver () {\n      this.materialObserver = new MutationObserver((mutationsList) => {\n        for (const mutation of mutationsList) {\n          if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-material') {\n            this.currentMaterial = getRootMaterial();\n          }\n        }\n      });\n\n      this.materialObserver.observe(document.documentElement, {\n        attributes: true,\n        attributeFilter: ['data-dt-material'],\n      });\n    },\n\n    setupModeObserver () {\n      const config = {\n        attributes: true,\n        attributeFilter: ['data-dt-mode'],\n        subtree: false,\n      };\n\n      this.modeObserver = new MutationObserver((mutationsList) => {\n        for (const mutation of mutationsList) {\n          if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-mode') {\n            // Recalculate and update the reactive data property\n            this.calculatedMode = this.calculateInvertedMode();\n          }\n        }\n      });\n\n      // Observe root element\n      this.modeObserver.observe(document.documentElement, config);\n\n      // Also observe all parent elements with data-dt-mode\n      let parent = this.elementRef?.parentElement;\n      while (parent) {\n        if (parent.hasAttribute('data-dt-mode')) {\n          this.modeObserver.observe(parent, config);\n        }\n        parent = parent.parentElement;\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}

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

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./motion-text-constants.cjs`),t=require(`./motion-text.cjs`);exports.DtMotionText=t.default,exports.MOTION_TEXT_ANIMATION_MODES=e.MOTION_TEXT_ANIMATION_MODES,exports.MOTION_TEXT_SPEEDS=e.MOTION_TEXT_SPEEDS,exports.MOTION_TEXT_TIMING_PRESETS=e.MOTION_TEXT_TIMING_PRESETS;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./motion-text-constants.cjs`),t=require(`./motion-text.cjs`);exports.DtMotionText=t.default,exports.MOTION_TEXT_ANIMATION_MODES=e.MOTION_TEXT_ANIMATION_MODES,exports.MOTION_TEXT_MODE_SETTINGS=e.MOTION_TEXT_MODE_SETTINGS,exports.MOTION_TEXT_SPEEDS=e.MOTION_TEXT_SPEEDS,exports.MOTION_TEXT_TIMING_PRESETS=e.MOTION_TEXT_TIMING_PRESETS,exports.MOTION_TEXT_TRACKS=e.MOTION_TEXT_TRACKS;

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

@@ -1,3 +1,3 @@
-import { MOTION_TEXT_ANIMATION_MODES as e, MOTION_TEXT_SPEEDS as t, MOTION_TEXT_TIMING_PRESETS as n } from "./motion-text-constants.js";
-import r from "./motion-text.js";
-export { r as DtMotionText, e as MOTION_TEXT_ANIMATION_MODES, t as MOTION_TEXT_SPEEDS, n as MOTION_TEXT_TIMING_PRESETS };
+import { MOTION_TEXT_ANIMATION_MODES as e, MOTION_TEXT_MODE_SETTINGS as t, MOTION_TEXT_SPEEDS as n, MOTION_TEXT_TIMING_PRESETS as r, MOTION_TEXT_TRACKS as i } from "./motion-text-constants.js";
+import a from "./motion-text.js";
+export { a as DtMotionText, e as MOTION_TEXT_ANIMATION_MODES, t as MOTION_TEXT_MODE_SETTINGS, n as MOTION_TEXT_SPEEDS, r as MOTION_TEXT_TIMING_PRESETS, i as MOTION_TEXT_TRACKS };

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

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e=[`gradient-in`,`fade-in`,`slide-in`,`gradient-sweep`,`shimmer`,`none`],t=[`100`,`200`,`300`,`400`,`500`],n={100:{characterDelay:10,wordDelay:15,duration:300},200:{characterDelay:20,wordDelay:30,duration:600},300:{characterDelay:30,wordDelay:50,duration:1e3},400:{characterDelay:50,wordDelay:100,duration:1500},500:{characterDelay:80,wordDelay:180,duration:2100}},r={MOTION_TEXT_ANIMATION_MODES:e,MOTION_TEXT_SPEEDS:t,MOTION_TEXT_TIMING_PRESETS:n};exports.MOTION_TEXT_ANIMATION_MODES=e,exports.MOTION_TEXT_SPEEDS=t,exports.MOTION_TEXT_TIMING_PRESETS=n,exports.default=r;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e=[`gradient-in`,`fade-in`,`slide-in`,`slide-in-gradient`,`gradient-sweep`,`shimmer`,`none`],t=[`100`,`200`,`300`,`400`,`500`],n={100:{characterDelay:10,wordDelay:15,duration:300},200:{characterDelay:20,wordDelay:30,duration:600},300:{characterDelay:30,wordDelay:50,duration:1e3},400:{characterDelay:50,wordDelay:100,duration:1500},500:{characterDelay:80,wordDelay:180,duration:2100}},r={enter:{delay:0,stagger:60,duration:300},reveal:{delay:250,stagger:50,duration:300},sweep:{delay:350,stagger:120,duration:1400,fade:250},shimmer:{delay:0,stagger:0,duration:3e3}},i={"gradient-in":{tracks:[`enter`,`reveal`],gradient:!0,loopHold:1200},"fade-in":{tracks:[`enter`],gradient:!1,loopHold:1400},"slide-in":{tracks:[`enter`],gradient:!1,loopHold:1400},"slide-in-gradient":{tracks:[`enter`,`reveal`],gradient:!0,loopHold:1200},"gradient-sweep":{tracks:[`sweep`],gradient:!0,loopHold:300},shimmer:{tracks:[`shimmer`],gradient:!1,loopHold:0,wholeText:!0},none:{tracks:[],gradient:!1,loopHold:0}},a={MOTION_TEXT_ANIMATION_MODES:e,MOTION_TEXT_SPEEDS:t,MOTION_TEXT_TIMING_PRESETS:n,MOTION_TEXT_TRACKS:r,MOTION_TEXT_MODE_SETTINGS:i};exports.MOTION_TEXT_ANIMATION_MODES=e,exports.MOTION_TEXT_MODE_SETTINGS=i,exports.MOTION_TEXT_SPEEDS=t,exports.MOTION_TEXT_TIMING_PRESETS=n,exports.MOTION_TEXT_TRACKS=r,exports.default=a;
 //# sourceMappingURL=motion-text-constants.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"motion-text-constants.cjs","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":"+FACA,IAAa,EAA8B,CACzC,cACA,UACA,WACA,iBACA,UACA,OACD,CAGY,EAAqB,CAAC,MAAO,MAAO,MAAO,MAAO,MAAM,CAGxD,EAA6B,CACxC,IAAK,CACH,eAAgB,GAChB,UAAW,GACX,SAAU,IACX,CACD,IAAK,CACH,eAAgB,GAChB,UAAW,GACX,SAAU,IACX,CACD,IAAK,CACH,eAAgB,GAChB,UAAW,GACX,SAAU,IACX,CACD,IAAK,CACH,eAAgB,GAChB,UAAW,IACX,SAAU,KACX,CACD,IAAK,CACH,eAAgB,GAChB,UAAW,IACX,SAAU,KACX,CACF,CAED,EAAe,CACb,8BACA,qBACA,6BACD"}
+{"version":3,"file":"motion-text-constants.cjs","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":"+FACA,IAAa,EAA8B,CACzC,cACA,UACA,WACA,oBACA,iBACA,UACA,OACD,CAGY,EAAqB,CAAC,MAAO,MAAO,MAAO,MAAO,MAAM,CAMxD,EAA6B,CACxC,IAAK,CAAE,eAAgB,GAAI,UAAW,GAAI,SAAU,IAAK,CACzD,IAAK,CAAE,eAAgB,GAAI,UAAW,GAAI,SAAU,IAAK,CACzD,IAAK,CAAE,eAAgB,GAAI,UAAW,GAAI,SAAU,IAAM,CAC1D,IAAK,CAAE,eAAgB,GAAI,UAAW,IAAK,SAAU,KAAM,CAC3D,IAAK,CAAE,eAAgB,GAAI,UAAW,IAAK,SAAU,KAAM,CAC5D,CAIY,EAAqB,CAEhC,MAAO,CAAE,MAAO,EAAG,QAAS,GAAI,SAAU,IAAK,CAE/C,OAAQ,CAAE,MAAO,IAAK,QAAS,GAAI,SAAU,IAAK,CAElD,MAAO,CAAE,MAAO,IAAK,QAAS,IAAK,SAAU,KAAM,KAAM,IAAK,CAE9D,QAAS,CAAE,MAAO,EAAG,QAAS,EAAG,SAAU,IAAM,CAClD,CAMY,EAA4B,CACvC,cAAe,CAAE,OAAQ,CAAC,QAAS,SAAS,CAAE,SAAU,GAAM,SAAU,KAAM,CAC9E,UAAW,CAAE,OAAQ,CAAC,QAAQ,CAAE,SAAU,GAAO,SAAU,KAAM,CACjE,WAAY,CAAE,OAAQ,CAAC,QAAQ,CAAE,SAAU,GAAO,SAAU,KAAM,CAClE,oBAAqB,CAAE,OAAQ,CAAC,QAAS,SAAS,CAAE,SAAU,GAAM,SAAU,KAAM,CACpF,iBAAkB,CAAE,OAAQ,CAAC,QAAQ,CAAE,SAAU,GAAM,SAAU,IAAK,CAEtE,QAAS,CAAE,OAAQ,CAAC,UAAU,CAAE,SAAU,GAAO,SAAU,EAAG,UAAW,GAAM,CAE/E,KAAM,CAAE,OAAQ,EAAE,CAAE,SAAU,GAAO,SAAU,EAAG,CACnD,CAED,EAAe,CACb,8BACA,qBACA,6BACA,qBACA,4BACD"}

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

@@ -3,6 +3,7 @@ var e = [
 	"gradient-in",
 	"fade-in",
 	"slide-in",
+	"slide-in-gradient",
 	"gradient-sweep",
 	"shimmer",
 	"none"
@@ -39,11 +40,72 @@ var e = [
 		duration: 2100
 	}
 }, r = {
+	enter: {
+		delay: 0,
+		stagger: 60,
+		duration: 300
+	},
+	reveal: {
+		delay: 250,
+		stagger: 50,
+		duration: 300
+	},
+	sweep: {
+		delay: 350,
+		stagger: 120,
+		duration: 1400,
+		fade: 250
+	},
+	shimmer: {
+		delay: 0,
+		stagger: 0,
+		duration: 3e3
+	}
+}, i = {
+	"gradient-in": {
+		tracks: ["enter", "reveal"],
+		gradient: !0,
+		loopHold: 1200
+	},
+	"fade-in": {
+		tracks: ["enter"],
+		gradient: !1,
+		loopHold: 1400
+	},
+	"slide-in": {
+		tracks: ["enter"],
+		gradient: !1,
+		loopHold: 1400
+	},
+	"slide-in-gradient": {
+		tracks: ["enter", "reveal"],
+		gradient: !0,
+		loopHold: 1200
+	},
+	"gradient-sweep": {
+		tracks: ["sweep"],
+		gradient: !0,
+		loopHold: 300
+	},
+	shimmer: {
+		tracks: ["shimmer"],
+		gradient: !1,
+		loopHold: 0,
+		wholeText: !0
+	},
+	none: {
+		tracks: [],
+		gradient: !1,
+		loopHold: 0
+	}
+}, a = {
 	MOTION_TEXT_ANIMATION_MODES: e,
 	MOTION_TEXT_SPEEDS: t,
-	MOTION_TEXT_TIMING_PRESETS: n
+	MOTION_TEXT_TIMING_PRESETS: n,
+	MOTION_TEXT_TRACKS: r,
+	MOTION_TEXT_MODE_SETTINGS: i
 };
 //#endregion
-export { e as MOTION_TEXT_ANIMATION_MODES, t as MOTION_TEXT_SPEEDS, n as MOTION_TEXT_TIMING_PRESETS, r as default };
+export { e as MOTION_TEXT_ANIMATION_MODES, i as MOTION_TEXT_MODE_SETTINGS, t as MOTION_TEXT_SPEEDS, n as MOTION_TEXT_TIMING_PRESETS, r as MOTION_TEXT_TRACKS, a as default };
 
 //# sourceMappingURL=motion-text-constants.js.map

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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"}