use-scroll-animate 2.1.0 → 2.3.0

package/dist/components/reveal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reveal.js","sources":["../../src/components/reveal/effects.ts","../../src/components/reveal/reveal.ts","../../src/components/reveal/stagger.ts","../../src/components/reveal/scroll-progress.ts","../../src/components/reveal/scrolly.ts","../../src/components/reveal/index.ts"],"sourcesContent":["/** Entrance effects shared by `<usa-reveal>` and `<usa-stagger>` (transform / opacity / filter only). */\n\nexport const REVEAL_EFFECTS = [\n  'fade',\n  'fade-up',\n  'fade-down',\n  'fade-left',\n  'fade-right',\n  'zoom-in',\n  'zoom-out',\n  'blur',\n  'blur-up',\n  'flip-up',\n  'flip-left',\n  'rise',\n] as const;\n\nexport type RevealEffect = (typeof REVEAL_EFFECTS)[number];\n\n/** The \"from\" keyframe of an effect; the \"to\" keyframe is the element's natural state. */\nexport function revealFrom(effect: string, distance = 32): Keyframe {\n  const d = `${distance}px`;\n  switch (effect) {\n    case 'fade':\n      return { opacity: 0 };\n    case 'fade-down':\n      return { opacity: 0, transform: `translate3d(0,-${d},0)` };\n    case 'fade-left':\n      return { opacity: 0, transform: `translate3d(-${d},0,0)` };\n    case 'fade-right':\n      return { opacity: 0, transform: `translate3d(${d},0,0)` };\n    case 'zoom-in':\n      return { opacity: 0, transform: 'scale(0.86)' };\n    case 'zoom-out':\n      return { opacity: 0, transform: 'scale(1.14)' };\n    case 'blur':\n      return { opacity: 0, filter: 'blur(12px)' };\n    case 'blur-up':\n      return { opacity: 0, filter: 'blur(10px)', transform: `translate3d(0,${d},0)` };\n    case 'flip-up':\n      return { opacity: 0, transform: 'perspective(800px) rotateX(-55deg)', transformOrigin: '50% 100%' };\n    case 'flip-left':\n      return { opacity: 0, transform: 'perspective(800px) rotateY(55deg)', transformOrigin: '0% 50%' };\n    case 'rise':\n      return { opacity: 0, transform: `translate3d(0,${distance * 1.5}px,0) scale(0.96)` };\n    case 'fade-up':\n    default:\n      return { opacity: 0, transform: `translate3d(0,${d},0)` };\n  }\n}\n\n/** Keyframes from the effect to the natural state. */\nexport function revealKeyframes(effect: string, distance?: number): Keyframe[] {\n  const from = revealFrom(effect, distance);\n  const to: Keyframe = {};\n  for (const k of Object.keys(from)) {\n    if (k === 'opacity') to.opacity = 1;\n    else if (k === 'transform') to.transform = 'none';\n    else if (k === 'filter') to.filter = 'none';\n    else if (k === 'transformOrigin') to.transformOrigin = from.transformOrigin;\n  }\n  return [from, to];\n}\n","import { defineElement, EASE_OUT, type UsaElement } from '../base';\nimport { revealKeyframes, type RevealEffect } from './effects';\nimport css from './reveal.css?raw';\n\n/**\n * `<usa-reveal>` — reveals its content when it scrolls into view.\n *\n * Attributes: `effect` (see {@link RevealEffect}, default `fade-up`),\n * `duration` (ms, 700), `delay` (ms, 0), `distance` (px, 32), `easing`,\n * `threshold` (0–1, 0.15), `root-margin`, `repeat` (hide again when it\n * leaves, replay on re-entry). Events: `usa:enter`, `usa:leave`, `usa:complete`.\n */\nexport interface UsaRevealElement extends UsaElement {\n  effect: RevealEffect | string;\n  /** Play the entrance now (also called automatically on enter). */\n  reveal(): Promise<void>;\n  /** Hide again so the next `reveal()` replays the entrance. */\n  reset(): void;\n  readonly revealed: boolean;\n}\n\nexport function defineReveal(tag = 'usa-reveal'): CustomElementConstructor | undefined {\n  return defineElement(\n    tag,\n    (Base) =>\n      class UsaReveal extends Base {\n        static get observedAttributes(): string[] {\n          return ['effect', 'distance', 'repeat', 'threshold', 'root-margin'];\n        }\n\n        private _anim: Animation | null = null;\n\n        get effect(): string {\n          return this.str('effect', 'fade-up');\n        }\n        set effect(v: string) {\n          this.setAttribute('effect', v);\n        }\n        get revealed(): boolean {\n          return this.getAttribute('data-state') !== 'hidden';\n        }\n\n        mount(): void {\n          if (this.reduced) {\n            this.setAttribute('data-state', 'shown');\n            return;\n          }\n          if (this.getAttribute('data-state') !== 'shown') this.setAttribute('data-state', 'hidden');\n          this.inView(\n            (visible) => {\n              if (visible) {\n                this.emit('enter');\n                if (!this.revealed) this.reveal();\n              } else {\n                this.emit('leave');\n                if (this.flag('repeat') && this.revealed) this.reset();\n              }\n            },\n            { threshold: this.num('threshold', 0.15), rootMargin: this.str('root-margin', '0px') }\n          );\n        }\n\n        unmount(): void {\n          this._anim?.cancel();\n          this._anim = null;\n        }\n\n        reveal(): Promise<void> {\n          this._anim?.cancel();\n          this.setAttribute('data-state', 'shown');\n          if (this.reduced) return Promise.resolve();\n          const a = this.motion(this, revealKeyframes(this.effect, this.num('distance', 32)), {\n            duration: this.num('duration', 700),\n            delay: this.num('delay', 0),\n            easing: this.str('easing', EASE_OUT),\n            fill: 'backwards',\n          });\n          this._anim = a;\n          return new Promise((resolve) => {\n            const done = () => {\n              if (this._anim === a) this._anim = null;\n              this.emit('complete');\n              resolve();\n            };\n            if (!a) done();\n            else a.onfinish = done;\n          });\n        }\n\n        reset(): void {\n          this._anim?.cancel();\n          this._anim = null;\n          if (!this.reduced) this.setAttribute('data-state', 'hidden');\n        }\n      },\n    { id: 'reveal', text: css }\n  );\n}\n","import { defineElement, EASE_OUT, type UsaElement } from '../base';\nimport { revealKeyframes } from './effects';\nimport css from './reveal.css?raw';\n\n/**\n * `<usa-stagger>` — reveals its direct children one after another when the\n * list scrolls into view.\n *\n * Attributes: `effect` (default `fade-up`), `interval` (ms between children,\n * 70), `duration` (600), `delay` (0), `distance` (24), `easing`,\n * `threshold` (0.1), `repeat`. Events: `usa:enter`, `usa:complete`.\n */\nexport interface UsaStaggerElement extends UsaElement {\n  reveal(): Promise<void>;\n  reset(): void;\n}\n\nexport function defineStagger(tag = 'usa-stagger'): CustomElementConstructor | undefined {\n  return defineElement(\n    tag,\n    (Base) =>\n      class UsaStagger extends Base {\n        static get observedAttributes(): string[] {\n          return ['effect', 'repeat', 'threshold'];\n        }\n\n        private _anims: Animation[] = [];\n\n        mount(): void {\n          if (this.reduced) {\n            this.setAttribute('data-state', 'shown');\n            return;\n          }\n          if (this.getAttribute('data-state') !== 'shown') this.setAttribute('data-state', 'hidden');\n          this.inView(\n            (visible) => {\n              if (visible && this.getAttribute('data-state') === 'hidden') {\n                this.emit('enter');\n                this.reveal();\n              } else if (!visible && this.flag('repeat')) this.reset();\n            },\n            { threshold: this.num('threshold', 0.1) }\n          );\n        }\n\n        unmount(): void {\n          this.cancel();\n        }\n\n        private cancel(): void {\n          this._anims.splice(0).forEach((a) => a.cancel());\n        }\n\n        reveal(): Promise<void> {\n          this.cancel();\n          this.setAttribute('data-state', 'shown');\n          const kids = Array.from(this.children) as HTMLElement[];\n          if (this.reduced || !kids.length) return Promise.resolve();\n          const frames = revealKeyframes(this.str('effect', 'fade-up'), this.num('distance', 24));\n          const interval = this.num('interval', 70);\n          const base = this.num('delay', 0);\n          const duration = this.num('duration', 600);\n          const easing = this.str('easing', EASE_OUT);\n          const anims = kids\n            .map((kid, i) => this.motion(kid, frames, { duration, easing, delay: base + i * interval, fill: 'backwards' }))\n            .filter((a): a is Animation => !!a);\n          this._anims = anims;\n          const last = anims[anims.length - 1];\n          return new Promise((resolve) => {\n            const done = () => {\n              this.emit('complete');\n              resolve();\n            };\n            if (!last) done();\n            else last.onfinish = done;\n          });\n        }\n\n        reset(): void {\n          this.cancel();\n          if (!this.reduced) this.setAttribute('data-state', 'hidden');\n        }\n      },\n    { id: 'reveal', text: css }\n  );\n}\n","import { defineElement, raf, caf, clamp, type UsaElement } from '../base';\nimport css from './scroll-progress.css?raw';\n\n/**\n * `<usa-scroll-progress>` — a reading-progress bar.\n *\n * Attributes: `target` (CSS selector of an article to track; default the\n * whole page), `position` (`top` | `bottom` | `inline`, default `top`),\n * `label` (accessible name, default \"Reading progress\"). Style with\n * `--usa-progress-color`, `--usa-progress-height`, `--usa-progress-track`.\n * Exposes the progress (0–1) as `--usa-progress` on the element and as the\n * `progress` property. Event: `usa:progress` (`detail.progress`).\n *\n * Writes only `transform: scaleX()` (compositor-friendly); reads layout\n * once per animation frame, and only while scrolling.\n */\nexport interface UsaScrollProgressElement extends UsaElement {\n  readonly progress: number;\n  /** Re-measure (e.g. after content loaded). */\n  update(): void;\n}\n\n/** Progress (0–1) of `target` scrolling through the viewport, or of the page. */\nexport function readScrollProgress(target?: Element | null): number {\n  if (typeof window === 'undefined') return 0;\n  const vh = window.innerHeight || document.documentElement.clientHeight;\n  if (target) {\n    const r = target.getBoundingClientRect();\n    const total = r.height - vh;\n    return total <= 0 ? (r.top <= 0 ? 1 : 0) : clamp(-r.top / total, 0, 1);\n  }\n  const doc = document.documentElement;\n  const max = doc.scrollHeight - vh;\n  return max <= 0 ? 0 : clamp((window.scrollY || doc.scrollTop) / max, 0, 1);\n}\n\nexport function defineScrollProgress(tag = 'usa-scroll-progress'): CustomElementConstructor | undefined {\n  return defineElement(\n    tag,\n    (Base) =>\n      class UsaScrollProgress extends Base {\n        static get observedAttributes(): string[] {\n          return ['target', 'label'];\n        }\n\n        private _bar: HTMLElement | null = null;\n        private _p = -1;\n        private _frame = 0;\n\n        get progress(): number {\n          return Math.max(0, this._p);\n        }\n\n        mount(): void {\n          if (!this._bar) {\n            this._bar = document.createElement('span');\n            this._bar.className = 'usa-progress-fill';\n            this.replaceChildren(this._bar);\n          }\n          this.setAttribute('role', 'progressbar');\n          this.setAttribute('aria-valuemin', '0');\n          this.setAttribute('aria-valuemax', '100');\n          if (!this.hasAttribute('aria-label')) this.setAttribute('aria-label', this.str('label', 'Reading progress'));\n          const schedule = () => {\n            if (!this._frame) this._frame = raf(() => ((this._frame = 0), this.update()));\n          };\n          this.listen(window, 'scroll', schedule, { passive: true });\n          this.listen(window, 'resize', schedule, { passive: true });\n          this.update();\n        }\n\n        unmount(): void {\n          caf(this._frame);\n          this._frame = 0;\n        }\n\n        update(): void {\n          const sel = this.getAttribute('target');\n          const target = sel ? document.querySelector(sel) : null;\n          const p = readScrollProgress(target);\n          if (Math.abs(p - this._p) < 0.0005) return;\n          this._p = p;\n          if (this._bar) this._bar.style.transform = `scaleX(${p})`;\n          this.style.setProperty('--usa-progress', String(p));\n          const pct = String(Math.round(p * 100));\n          if (this.getAttribute('aria-valuenow') !== pct) this.setAttribute('aria-valuenow', pct);\n          this.emit('progress', { progress: p });\n        }\n      },\n    { id: 'scroll-progress', text: css }\n  );\n}\n","import { defineElement, clamp, type UsaElement } from '../base';\nimport css from './scrolly.css?raw';\n\n/**\n * `<usa-scrolly>` — sticky scrollytelling. A child marked `data-sticky`\n * stays pinned while the `[data-step]` children scroll past; the step that\n * crosses the trigger line becomes active.\n *\n * Attributes: `offset` (trigger line as a fraction of the viewport height,\n * default 0.5), `active` (reflected index of the active step). The active\n * step gets `data-active`; the host gets `--usa-step` and `data-step-name`\n * (the step's `data-step` value). Event: `usa:step` (`detail.index`,\n * `detail.step`, `detail.name`).\n */\nexport interface UsaScrollyElement extends UsaElement {\n  readonly active: number;\n  readonly steps: HTMLElement[];\n}\n\nexport function defineScrolly(tag = 'usa-scrolly'): CustomElementConstructor | undefined {\n  return defineElement(\n    tag,\n    (Base) =>\n      class UsaScrolly extends Base {\n        static get observedAttributes(): string[] {\n          return ['offset'];\n        }\n\n        private _active = -1;\n\n        get active(): number {\n          return this._active;\n        }\n        get steps(): HTMLElement[] {\n          return Array.from(this.querySelectorAll<HTMLElement>('[data-step]'));\n        }\n\n        mount(): void {\n          const steps = this.steps;\n          if (!steps.length) return;\n          const offset = clamp(this.num('offset', 0.5), 0, 1);\n          // A thin trigger band `offset` down the viewport\n          const top = Math.min(99, Math.round(offset * 100));\n          const rootMargin = `-${top}% 0px -${Math.max(0, 99 - top)}% 0px`;\n          if (typeof IntersectionObserver === 'undefined') {\n            this.activate(0);\n            return;\n          }\n          const io = new IntersectionObserver(\n            (entries) => {\n              for (const e of entries) if (e.isIntersecting) this.activate(steps.indexOf(e.target as HTMLElement));\n            },\n            { rootMargin }\n          );\n          steps.forEach((s) => io.observe(s));\n          this.onCleanup(() => io.disconnect());\n          if (this._active < 0) this.activate(0, true);\n        }\n\n        activate(index: number, silent = false): void {\n          const steps = this.steps;\n          if (index < 0 || index >= steps.length || index === this._active) return;\n          this._active = index;\n          steps.forEach((s, i) => s.toggleAttribute('data-active', i === index));\n          const step = steps[index];\n          this.setAttribute('active', String(index));\n          this.style.setProperty('--usa-step', String(index));\n          this.setAttribute('data-step-name', step.dataset.step || String(index));\n          if (!silent) this.emit('step', { index, step, name: step.dataset.step || '' });\n        }\n      },\n    { id: 'scrolly', text: css }\n  );\n}\n","/**\n * use-scroll-animate/components/reveal — entrance & scroll reveal components.\n * `<usa-reveal>`, `<usa-stagger>`, `<usa-scroll-progress>`, `<usa-scrolly>`.\n */\nimport { defineReveal, type UsaRevealElement } from './reveal';\nimport { defineStagger, type UsaStaggerElement } from './stagger';\nimport { defineScrollProgress, type UsaScrollProgressElement } from './scroll-progress';\nimport { defineScrolly, type UsaScrollyElement } from './scrolly';\n\nexport { defineReveal, defineStagger, defineScrollProgress, defineScrolly };\nexport { readScrollProgress } from './scroll-progress';\nexport { REVEAL_EFFECTS, revealKeyframes } from './effects';\nexport type { RevealEffect } from './effects';\nexport type { UsaRevealElement, UsaStaggerElement, UsaScrollProgressElement, UsaScrollyElement };\nexport { configureComponents, prefersReducedMotion } from '../base';\nexport type { ComponentsConfig, UsaElement } from '../base';\n\n/** Register every component of this category under its default tag. */\nexport function defineRevealComponents(): void {\n  defineReveal();\n  defineStagger();\n  defineScrollProgress();\n  defineScrolly();\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'usa-reveal': UsaRevealElement;\n    'usa-stagger': UsaStaggerElement;\n    'usa-scroll-progress': UsaScrollProgressElement;\n    'usa-scrolly': UsaScrollyElement;\n  }\n}\n"],"names":["css"],"mappings":"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"}

package/dist/components/text.cjs

@@ -0,0 +1,528 @@
+'use strict';
+
+var base = require('../chunks/base-CJ7XfidP.cjs');
+
+var css$4 = "usa-typewriter{white-space:pre-wrap}usa-typewriter .usa-tw-caret{display:inline-block;width:var(--usa-caret-width,0.08em);height:1.05em;margin-left:0.06em;vertical-align:-0.12em;background:var(--usa-caret-color,currentColor);animation:usa-caret 1.06s steps(1) infinite}usa-typewriter[data-typing] .usa-tw-caret{animation:none}usa-typewriter[data-no-cursor] .usa-tw-caret{display:none}@keyframes usa-caret{50%{opacity:0}}@media (prefers-reduced-motion:reduce){usa-typewriter .usa-tw-caret,usa-shimmer-text{animation:none}}";
+
+function defineTypewriter(tag = 'usa-typewriter') {
+    return base.defineElement(tag, (Base) => class UsaTypewriter extends Base {
+        constructor() {
+            super(...arguments);
+            this._source = null;
+            this._out = null;
+            this._timer = 0;
+            this._running = false;
+        }
+        static get observedAttributes() {
+            return ['text', 'words'];
+        }
+        get phrases() {
+            const words = this.getAttribute('words');
+            if (words)
+                return words.split('|').map((w) => w.trim()).filter(Boolean);
+            return [this.getAttribute('text') ?? this._source ?? ''];
+        }
+        mount() {
+            if (this._source === null)
+                this._source = (this.textContent || '').trim();
+            const phrases = this.phrases;
+            const sr = base.srText(phrases.join(', '));
+            this._out = document.createElement('span');
+            this._out.className = 'usa-tw-text';
+            this._out.setAttribute('aria-hidden', 'true');
+            const caret = document.createElement('span');
+            caret.className = 'usa-tw-caret';
+            caret.setAttribute('aria-hidden', 'true');
+            this.replaceChildren(sr, this._out, caret);
+            this.toggleAttribute('data-no-cursor', this.getAttribute('cursor') === 'false');
+            if (this.reduced) {
+                this._out.textContent = phrases[0] || '';
+                return;
+            }
+            const start = this.str('start', 'view');
+            if (start === 'load')
+                this.start();
+            else if (start === 'view') {
+                this.inView((visible) => {
+                    if (visible && !this._running && !this._out?.textContent)
+                        this.start();
+                });
+            }
+        }
+        unmount() {
+            this.stop();
+        }
+        stop() {
+            clearTimeout(this._timer);
+            this._timer = 0;
+            this._running = false;
+            this.removeAttribute('data-typing');
+        }
+        restart() {
+            this.stop();
+            if (this._out)
+                this._out.textContent = '';
+            this.start();
+        }
+        start() {
+            if (this._running || !this._out)
+                return;
+            const out = this._out;
+            const phrases = this.phrases;
+            if (this.reduced) {
+                out.textContent = phrases[0] || '';
+                return;
+            }
+            this._running = true;
+            const speed = this.num('speed', 55);
+            const del = this.num('delete-speed', 30);
+            const pause = this.num('pause', 1400);
+            const loop = this.flag('loop') || phrases.length > 1;
+            let p = 0;
+            let i = 0;
+            let deleting = false;
+            const tick = () => {
+                const word = phrases[p] || '';
+                if (!deleting) {
+                    i++;
+                    out.textContent = word.slice(0, i);
+                    this.setAttribute('data-typing', '');
+                    if (i >= word.length) {
+                        this.removeAttribute('data-typing');
+                        const last = p === phrases.length - 1;
+                        if (last)
+                            this.emit('complete');
+                        if (!loop && last) {
+                            this._running = false;
+                            return;
+                        }
+                        deleting = true;
+                        this._timer = setTimeout(tick, pause);
+                        return;
+                    }
+                    this._timer = setTimeout(tick, speed * (0.6 + Math.random() * 0.8));
+                }
+                else {
+                    i--;
+                    out.textContent = word.slice(0, Math.max(0, i));
+                    if (i <= 0) {
+                        deleting = false;
+                        p = (p + 1) % phrases.length;
+                        this._timer = setTimeout(tick, speed * 4);
+                        return;
+                    }
+                    this._timer = setTimeout(tick, del);
+                }
+            };
+            this._timer = setTimeout(tick, this.num('delay', 0));
+        }
+    }, { id: 'typewriter', text: css$4 });
+}
+
+var css$3 = "usa-split-text .usa-split-word{display:inline-block;white-space:nowrap}usa-split-text .usa-split-unit{display:inline-block;white-space:pre}usa-split-text[data-state=\"hidden\"] .usa-split-unit{opacity:0}usa-split-text[data-state=\"play\"] .usa-split-unit{animation:usa-split-rise var(--usa-split-duration,620ms) cubic-bezier(0.22,1,0.36,1) both;animation-delay:calc(var(--usa-split-delay,0ms) + var(--i,0) * var(--usa-split-stagger,28ms))}usa-split-text[effect=\"fade\"][data-state=\"play\"] .usa-split-unit{animation-name:usa-split-fade}usa-split-text[effect=\"blur\"][data-state=\"play\"] .usa-split-unit{animation-name:usa-split-blur}usa-split-text[effect=\"flip\"][data-state=\"play\"] .usa-split-unit{animation-name:usa-split-flip;transform-origin:50% 100%}usa-split-text[effect=\"pop\"][data-state=\"play\"] .usa-split-unit{animation-name:usa-split-pop;animation-timing-function:cubic-bezier(0.34,1.56,0.64,1)}@keyframes usa-split-rise{from{opacity:0;transform:translate3d(0,0.6em,0)}to{opacity:1;transform:none}}@keyframes usa-split-fade{from{opacity:0}to{opacity:1}}@keyframes usa-split-blur{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:none}}@keyframes usa-split-flip{from{opacity:0;transform:perspective(500px) rotateX(-80deg)}to{opacity:1;transform:none}}@keyframes usa-split-pop{from{opacity:0;transform:scale(0.3)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){usa-split-text .usa-split-unit{animation:none !important;opacity:1 !important}}";
+
+function defineSplitText(tag = 'usa-split-text') {
+    return base.defineElement(tag, (Base) => class UsaSplitText extends Base {
+        constructor() {
+            super(...arguments);
+            this._source = null;
+            this._timer = 0;
+        }
+        static get observedAttributes() {
+            return ['by', 'text'];
+        }
+        get units() {
+            return Array.from(this.querySelectorAll('.usa-split-unit'));
+        }
+        mount() {
+            if (this._source === null)
+                this._source = this.getAttribute('text') ?? (this.textContent || '').replace(/\s+/g, ' ').trim();
+            const text = this.getAttribute('text') ?? this._source;
+            const byWords = this.str('by', 'chars') === 'words';
+            const frag = document.createDocumentFragment();
+            frag.append(base.srText(text));
+            let i = 0;
+            text.split(' ').forEach((word, w) => {
+                if (w > 0)
+                    frag.append(' ');
+                const wordEl = document.createElement('span');
+                wordEl.className = 'usa-split-word';
+                wordEl.setAttribute('aria-hidden', 'true');
+                const parts = byWords ? [word] : Array.from(word);
+                for (const part of parts) {
+                    const u = document.createElement('span');
+                    u.className = 'usa-split-unit';
+                    u.textContent = part;
+                    u.style.setProperty('--i', String(i++));
+                    wordEl.append(u);
+                }
+                frag.append(wordEl);
+            });
+            this.replaceChildren(frag);
+            this.style.setProperty('--usa-split-stagger', `${this.num('stagger', byWords ? 70 : 28)}ms`);
+            this.style.setProperty('--usa-split-duration', `${this.num('duration', 620)}ms`);
+            this.style.setProperty('--usa-split-delay', `${this.num('delay', 0)}ms`);
+            this.style.setProperty('--usa-split-count', String(i));
+            if (this.reduced) {
+                this.setAttribute('data-state', 'shown');
+                return;
+            }
+            this.setAttribute('data-state', 'hidden');
+            const trigger = this.str('trigger', 'view');
+            if (trigger === 'load')
+                this.play();
+            else if (trigger === 'view') {
+                this.inView((visible) => {
+                    if (visible && this.getAttribute('data-state') === 'hidden')
+                        this.play();
+                    else if (!visible && this.flag('repeat'))
+                        this.reset();
+                }, { threshold: 0.2 });
+            }
+        }
+        unmount() {
+            clearTimeout(this._timer);
+        }
+        play() {
+            clearTimeout(this._timer);
+            if (this.reduced) {
+                this.setAttribute('data-state', 'shown');
+                return;
+            }
+            // Restart the CSS animations
+            this.setAttribute('data-state', 'hidden');
+            void this.offsetWidth;
+            this.setAttribute('data-state', 'play');
+            const n = this.units.length;
+            const total = this.num('delay', 0) + this.num('duration', 620) + Math.max(0, n - 1) * this.num('stagger', this.str('by') === 'words' ? 70 : 28);
+            this._timer = setTimeout(() => {
+                this.setAttribute('data-state', 'shown');
+                this.emit('complete');
+            }, total);
+        }
+        reset() {
+            clearTimeout(this._timer);
+            this.setAttribute('data-state', this.reduced ? 'shown' : 'hidden');
+        }
+    }, { id: 'split-text', text: css$3 });
+}
+
+const GLYPHS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#%&*+=<>/\\?!';
+/** One frame of the scramble: the first `progress` share is resolved. */
+function scrambleFrame(text, progress, glyphs = GLYPHS, rnd = Math.random) {
+    const done = Math.floor(text.length * progress);
+    let out = '';
+    for (let i = 0; i < text.length; i++) {
+        const ch = text[i];
+        out += i < done || /\s|[.,:;!?'"()\-–—]/.test(ch) ? ch : glyphs[Math.floor(rnd() * glyphs.length)];
+    }
+    return out;
+}
+function defineScramble(tag = 'usa-scramble') {
+    return base.defineElement(tag, (Base) => class UsaScramble extends Base {
+        constructor() {
+            super(...arguments);
+            this._source = null;
+            this._out = null;
+            this._frame = 0;
+        }
+        static get observedAttributes() {
+            return ['text'];
+        }
+        get text() {
+            return this.getAttribute('text') ?? this._source ?? '';
+        }
+        mount() {
+            if (this._source === null)
+                this._source = (this.textContent || '').trim();
+            this._out = document.createElement('span');
+            this._out.setAttribute('aria-hidden', 'true');
+            this._out.textContent = this.text;
+            this.replaceChildren(base.srText(this.text), this._out);
+            if (this.reduced)
+                return;
+            const trigger = this.str('trigger', 'view');
+            if (trigger === 'load')
+                this.play();
+            else if (trigger === 'hover') {
+                this.listen(this, 'pointerenter', () => this.play());
+                this.listen(this, 'focusin', () => this.play());
+            }
+            else if (trigger === 'view') {
+                let played = false;
+                this.inView((v) => {
+                    if (v && !played) {
+                        played = true;
+                        this.play();
+                    }
+                });
+            }
+        }
+        unmount() {
+            base.caf(this._frame);
+            this._frame = 0;
+        }
+        play() {
+            base.caf(this._frame);
+            const out = this._out;
+            const text = this.text;
+            if (!out || this.reduced) {
+                if (out)
+                    out.textContent = text;
+                return Promise.resolve();
+            }
+            const duration = this.num('duration', 900);
+            const glyphs = this.str('chars', GLYPHS) || GLYPHS;
+            const t0 = base.now();
+            let last = -1;
+            return new Promise((resolve) => {
+                const step = () => {
+                    const p = Math.min(1, Math.max(0, base.now() - t0) / duration);
+                    // ~30 fps glyph churn is plenty and halves DOM writes
+                    const bucket = Math.floor(p * duration / 33);
+                    if (bucket !== last || p === 1) {
+                        last = bucket;
+                        out.textContent = p === 1 ? text : scrambleFrame(text, p, glyphs);
+                    }
+                    if (p < 1)
+                        this._frame = base.raf(step);
+                    else {
+                        this._frame = 0;
+                        this.emit('complete');
+                        resolve();
+                    }
+                };
+                this._frame = base.raf(step);
+            });
+        }
+    }, undefined);
+}
+
+var css$2 = "usa-counter{font-variant-numeric:tabular-nums}";
+
+/** easeOutExpo */
+const easeOutExpo = (t) => (t >= 1 ? 1 : 1 - Math.pow(2, -10 * t));
+function defineCounter(tag = 'usa-counter') {
+    return base.defineElement(tag, (Base) => class UsaCounter extends Base {
+        constructor() {
+            super(...arguments);
+            this._current = NaN;
+            this._target = NaN;
+            this._frame = 0;
+            this._fmt = null;
+        }
+        static get observedAttributes() {
+            return ['to', 'decimals', 'locale', 'prefix', 'suffix', 'grouping'];
+        }
+        get value() {
+            return Number.isNaN(this._target) ? this.num('to', 0) : this._target;
+        }
+        set value(v) {
+            this.play(Number(v));
+        }
+        format(n) {
+            if (!this._fmt) {
+                const d = Math.max(0, Math.min(20, this.num('decimals', 0)));
+                const locale = this.getAttribute('locale') || (typeof document !== 'undefined' && document.documentElement.lang) || undefined;
+                try {
+                    this._fmt = new Intl.NumberFormat(locale, { minimumFractionDigits: d, maximumFractionDigits: d, useGrouping: this.getAttribute('grouping') !== 'false' });
+                }
+                catch {
+                    this._fmt = new Intl.NumberFormat(undefined, { minimumFractionDigits: d, maximumFractionDigits: d });
+                }
+            }
+            return `${this.str('prefix')}${this._fmt.format(n)}${this.str('suffix')}`;
+        }
+        render(n) {
+            this._current = n;
+            this.textContent = this.format(n);
+        }
+        changed(name) {
+            this._fmt = null;
+            if (name === 'to')
+                this.play();
+            else
+                this.render(Number.isNaN(this._current) ? this.num('from', 0) : this._current);
+        }
+        mount() {
+            this._fmt = null;
+            const to = this.num('to', 0);
+            if (this.reduced) {
+                this._target = to;
+                this.render(to);
+                return;
+            }
+            if (Number.isNaN(this._current))
+                this.render(this.num('from', 0));
+            const start = this.str('start', 'view');
+            if (start === 'load')
+                this.play();
+            else if (start === 'view') {
+                let done = false;
+                this.inView((v) => {
+                    if (v && !done) {
+                        done = true;
+                        this.play();
+                    }
+                }, { threshold: 0.4 });
+            }
+        }
+        unmount() {
+            base.caf(this._frame);
+            this._frame = 0;
+        }
+        play(to = this.num('to', 0)) {
+            base.caf(this._frame);
+            this._target = to;
+            const from = Number.isNaN(this._current) ? this.num('from', 0) : this._current;
+            if (this.reduced || from === to || !this.isConnected) {
+                this.render(to);
+                this.emit('complete', { value: to });
+                return Promise.resolve();
+            }
+            const duration = this.num('duration', 1600);
+            const t0 = base.now();
+            return new Promise((resolve) => {
+                const step = () => {
+                    const t = Math.min(1, Math.max(0, base.now() - t0) / duration);
+                    this.render(from + (to - from) * easeOutExpo(t));
+                    if (t < 1)
+                        this._frame = base.raf(step);
+                    else {
+                        this._frame = 0;
+                        this.render(to);
+                        this.emit('complete', { value: to });
+                        resolve();
+                    }
+                };
+                this._frame = base.raf(step);
+            });
+        }
+    }, { id: 'counter', text: css$2 });
+}
+
+var css$1 = "usa-shimmer-text{--usa-shimmer-color:currentColor;--usa-shimmer-shine:#fff;background:linear-gradient(var(--usa-shimmer-angle,110deg),var(--usa-shimmer-color) 35%,var(--usa-shimmer-shine) 50%,var(--usa-shimmer-color) 65%) 0 0 / 250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:usa-shimmer var(--usa-shimmer-duration,2600ms) linear infinite}@keyframes usa-shimmer{from{background-position:100% 0}to{background-position:-150% 0}}";
+
+function defineShimmerText(tag = 'usa-shimmer-text') {
+    return base.defineElement(tag, (Base) => class UsaShimmerText extends Base {
+        static get observedAttributes() {
+            return ['duration', 'color', 'shine', 'angle'];
+        }
+        mount() {
+            const set = (attr, prop, unit = '') => {
+                const v = this.getAttribute(attr);
+                if (v !== null)
+                    this.style.setProperty(prop, v + unit);
+                else
+                    this.style.removeProperty(prop);
+            };
+            set('duration', '--usa-shimmer-duration', 'ms');
+            set('color', '--usa-shimmer-color');
+            set('shine', '--usa-shimmer-shine');
+            set('angle', '--usa-shimmer-angle', 'deg');
+        }
+    }, { id: 'shimmer-text', text: css$1 });
+}
+
+var css = "usa-text-rotate{display:inline-grid;vertical-align:bottom;overflow:hidden;padding-block:0.08em}usa-text-rotate .usa-rotate-word{grid-area:1 / 1;white-space:nowrap}usa-text-rotate .usa-rotate-word[data-hidden]{opacity:0}";
+
+function defineTextRotate(tag = 'usa-text-rotate') {
+    return base.defineElement(tag, (Base) => class UsaTextRotate extends Base {
+        constructor() {
+            super(...arguments);
+            this._source = null;
+            this._index = 0;
+            this._timer = 0;
+            this._visible = true;
+        }
+        static get observedAttributes() {
+            return ['words', 'interval', 'paused'];
+        }
+        get index() {
+            return this._index;
+        }
+        get words() {
+            return (this.getAttribute('words') ?? this._source ?? '').split('|').map((w) => w.trim()).filter(Boolean);
+        }
+        mount() {
+            if (this._source === null)
+                this._source = (this.textContent || '').trim();
+            const words = this.words;
+            this.replaceChildren(base.srText(words.join(', ')), ...words.map((w, i) => {
+                const s = document.createElement('span');
+                s.className = 'usa-rotate-word';
+                s.textContent = w;
+                s.setAttribute('aria-hidden', 'true');
+                if (i !== this._index)
+                    s.setAttribute('data-hidden', '');
+                return s;
+            }));
+            if (this._index >= words.length)
+                this._index = 0;
+            if (words.length < 2)
+                return;
+            this.inView((v) => (this._visible = v));
+            if (!this.flag('paused')) {
+                this._timer = setInterval(() => {
+                    if (this._visible && !(typeof document !== 'undefined' && document.hidden))
+                        this.next();
+                }, Math.max(400, this.num('interval', 2200)));
+            }
+        }
+        unmount() {
+            clearInterval(this._timer);
+            this._timer = 0;
+        }
+        next() {
+            const els = Array.from(this.querySelectorAll('.usa-rotate-word'));
+            if (els.length < 2)
+                return;
+            const prev = els[this._index];
+            this._index = (this._index + 1) % els.length;
+            const cur = els[this._index];
+            prev.setAttribute('data-hidden', '');
+            cur.removeAttribute('data-hidden');
+            const effect = this.reduced ? 'fade' : this.str('effect', 'slide');
+            const [inFrom, outTo] = effect === 'fade'
+                ? [{ opacity: 0 }, { opacity: 0 }]
+                : effect === 'flip'
+                    ? [{ opacity: 0, transform: 'perspective(400px) rotateX(-90deg)' }, { opacity: 0, transform: 'perspective(400px) rotateX(90deg)' }]
+                    : effect === 'blur'
+                        ? [{ opacity: 0, filter: 'blur(8px)' }, { opacity: 0, filter: 'blur(8px)' }]
+                        : [{ opacity: 0, transform: 'translateY(0.8em)' }, { opacity: 0, transform: 'translateY(-0.8em)' }];
+            const neutral = { opacity: 1, transform: 'none', filter: 'none' };
+            const pick = (f) => Object.fromEntries(Object.keys(f).map((k) => [k, neutral[k]]));
+            this.motion(prev, [{ ...pick(outTo) }, outTo], { duration: 380, easing: base.EASE_OUT });
+            this.motion(cur, [inFrom, pick(inFrom)], { duration: 520, easing: effect === 'slide' ? base.EASE_SPRING : base.EASE_OUT });
+            this.emit('change', { index: this._index, word: cur.textContent });
+        }
+    }, { id: 'text-rotate', text: css });
+}
+
+/**
+ * use-scroll-animate/components/text — text effects.
+ * `<usa-typewriter>`, `<usa-split-text>`, `<usa-scramble>`, `<usa-counter>`,
+ * `<usa-shimmer-text>`, `<usa-text-rotate>`.
+ */
+/** Register every component of this category under its default tag. */
+function defineTextComponents() {
+    defineTypewriter();
+    defineSplitText();
+    defineScramble();
+    defineCounter();
+    defineShimmerText();
+    defineTextRotate();
+}
+
+exports.configureComponents = base.configureComponents;
+exports.prefersReducedMotion = base.prefersReducedMotion;
+exports.defineCounter = defineCounter;
+exports.defineScramble = defineScramble;
+exports.defineShimmerText = defineShimmerText;
+exports.defineSplitText = defineSplitText;
+exports.defineTextComponents = defineTextComponents;
+exports.defineTextRotate = defineTextRotate;
+exports.defineTypewriter = defineTypewriter;
+exports.easeOutExpo = easeOutExpo;
+exports.scrambleFrame = scrambleFrame;
+//# sourceMappingURL=text.cjs.map