use-scroll-animate 3.2.0 → 3.3.0

package/dist/components/svg.js

@@ -0,0 +1,342 @@
+import { f as clamp, m as motionScale, d as caf, p as prefersReducedMotion, n as now, r as raf, h as defineElement, i as EASE_OUT } from '../chunks/base-Cu-86Z31.js';
+export { a as configureComponents } from '../chunks/base-Cu-86Z31.js';
+
+const NUM = /-?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?/gi;
+/** `true` when two path strings share the same commands (so their numbers can be interpolated). */
+function pathsCompatible(a, b) {
+    return a.replace(NUM, '#').replace(/[\s,]+/g, ' ').trim() === b.replace(NUM, '#').replace(/[\s,]+/g, ' ').trim();
+}
+/**
+ * Path data between `a` and `b` at `t` (0–1). Paths with the same command
+ * structure morph number-by-number; others switch at the midpoint.
+ */
+function interpolatePath(a, b, t) {
+    if (t <= 0)
+        return a;
+    if (t >= 1)
+        return b;
+    if (!pathsCompatible(a, b))
+        return t < 0.5 ? a : b;
+    const nb = b.match(NUM) || [];
+    let i = 0;
+    return a.replace(NUM, (n) => {
+        const v = Number(n) + (Number(nb[i++]) - Number(n)) * t;
+        return String(Math.round(v * 1000) / 1000);
+    });
+}
+const ease = (t) => 1 - Math.pow(1 - t, 3);
+/** Animate a `<path>`'s `d` to `to`. Resolves when done; instant under reduced motion. */
+function morphTo(path, to, o = {}) {
+    const from = path.getAttribute('d') || to;
+    const dur = (o.duration ?? 500) * motionScale();
+    const prev = path.__usaMorph;
+    if (prev)
+        caf(prev);
+    if (prefersReducedMotion() || dur <= 0 || from === to) {
+        path.setAttribute('d', to);
+        return Promise.resolve();
+    }
+    const fn = o.easing || ease;
+    const t0 = now();
+    return new Promise((resolve) => {
+        const step = () => {
+            const t = clamp((now() - t0) / dur, 0, 1);
+            path.setAttribute('d', interpolatePath(from, to, fn(t)));
+            if (t < 1)
+                path.__usaMorph = raf(step);
+            else {
+                path.__usaMorph = 0;
+                resolve();
+            }
+        };
+        path.__usaMorph = raf(step);
+    });
+}
+const DRAWABLE = 'path, line, polyline, polygon, circle, ellipse, rect';
+/**
+ * Prepare every stroke in `root` for line drawing (normalised `pathLength=1`,
+ * so no `getTotalLength()` is needed) and return a function that sets
+ * progress 0–1, optionally staggered between shapes.
+ */
+function drawLines(root, o = {}) {
+    const shapes = Array.from(root.querySelectorAll(DRAWABLE));
+    shapes.forEach((s) => {
+        s.setAttribute('pathLength', '1');
+        s.style.strokeDasharray = '1 1';
+    });
+    const st = clamp(o.stagger ?? 0, 0, 0.9);
+    return (p) => {
+        const n = shapes.length;
+        shapes.forEach((s, i) => {
+            const start = n > 1 ? (i / (n - 1)) * st : 0;
+            const local = clamp((p - start) / (1 - st || 1), 0, 1);
+            s.style.strokeDashoffset = String(1 - local);
+        });
+    };
+}
+
+var css = "usa-draw{display:inline-block}usa-draw svg :is(path,line,polyline,polygon,circle,ellipse,rect){transition:fill-opacity 0.6s ease}usa-draw[fill]:not([data-drawn]) svg :is(path,polygon,circle,ellipse,rect){fill-opacity:0}usa-morph{display:inline-block;line-height:0}usa-morph svg{width:100%;height:100%;fill:currentColor}usa-morph[role=\"button\"]{cursor:pointer}usa-mask-reveal{display:block}usa-mask-reveal[data-state=\"visible\"]{clip-path:none !important}usa-anim-icon{display:inline-flex;line-height:0;vertical-align:middle}usa-anim-icon svg{overflow:visible}@media (prefers-reduced-motion:reduce){usa-mask-reveal{clip-path:none !important}usa-draw svg *{stroke-dashoffset:0 !important}}";
+
+function defineDraw(tag = 'usa-draw') {
+    return defineElement(tag, (Base) => class UsaDraw extends Base {
+        constructor() {
+            super(...arguments);
+            this._set = () => { };
+            this._p = 0;
+            this._id = 0;
+        }
+        get progress() {
+            return this._p;
+        }
+        set progress(p) {
+            this._p = clamp(p, 0, 1);
+            this._set(this._p);
+            this.toggleAttribute('data-drawn', this._p >= 1);
+        }
+        play() {
+            caf(this._id);
+            if (this.reduced) {
+                this.progress = 1;
+                return void this.emit('complete');
+            }
+            const dur = this.num('duration', 1600) * motionScale();
+            const t0 = now();
+            this.progress = 0;
+            const step = () => {
+                this.progress = (now() - t0) / dur;
+                if (this._p < 1)
+                    this._id = raf(step);
+                else
+                    this.emit('complete');
+            };
+            this._id = raf(step);
+        }
+        mount() {
+            this._set = drawLines(this, { stagger: this.num('stagger', 0.2) });
+            const trigger = this.str('trigger', 'view');
+            if (this.reduced) {
+                this.progress = 1;
+                return;
+            }
+            this.progress = 0;
+            if (trigger === 'scrub') {
+                const update = () => {
+                    const r = this.getBoundingClientRect();
+                    const vh = window.innerHeight || 1;
+                    this.progress = (vh - r.top) / (vh * 0.6 + r.height * 0.4 || 1);
+                };
+                this.listen(window, 'scroll', update, { passive: true });
+                update();
+            }
+            else if (trigger === 'hover')
+                this.listen(this, 'pointerenter', () => this.play());
+            else if (trigger === 'click')
+                this.listen(this, 'click', () => this.play());
+            else {
+                let done = false;
+                this.inView((v) => {
+                    if (v && (!done || this.flag('repeat'))) {
+                        done = true;
+                        this.play();
+                    }
+                    else if (!v && this.flag('repeat'))
+                        this.progress = 0;
+                }, { threshold: 0.3 });
+            }
+            this.onCleanup(() => caf(this._id));
+        }
+    }, { id: 'svg', text: css });
+}
+
+function defineMorph(tag = 'usa-morph') {
+    return defineElement(tag, (Base) => class UsaMorph extends Base {
+        constructor() {
+            super(...arguments);
+            this._i = 0;
+            this._path = null;
+        }
+        static get observedAttributes() {
+            return ['paths', 'trigger'];
+        }
+        get index() {
+            return this._i;
+        }
+        list() {
+            return this.str('paths').split('|').map((s) => s.trim()).filter(Boolean);
+        }
+        next() {
+            const l = this.list();
+            if (!this._path || l.length < 2)
+                return Promise.resolve();
+            this._i = (this._i + 1) % l.length;
+            this.emit('change', { index: this._i });
+            return morphTo(this._path, l[this._i], { duration: this.num('duration', 600) });
+        }
+        mount() {
+            let path = this.querySelector('path');
+            if (!path) {
+                this.innerHTML = '<svg viewBox="0 0 100 100" aria-hidden="true"><path></path></svg>';
+                path = this.querySelector('path');
+            }
+            this._path = path;
+            const l = this.list();
+            if (l[0])
+                this._path.setAttribute('d', l[this._i % l.length]);
+            const t = this.str('trigger', 'click');
+            if (t === 'hover') {
+                this.listen(this, 'pointerenter', () => void this.next());
+                this.listen(this, 'pointerleave', () => void this.next());
+            }
+            else if (t === 'auto' || t === 'view') {
+                let timer;
+                this.inView((v) => {
+                    clearInterval(timer);
+                    if (!v || this.reduced)
+                        return;
+                    if (t === 'view')
+                        return void this.next();
+                    timer = setInterval(() => void this.next(), this.num('interval', 2000));
+                });
+                this.onCleanup(() => clearInterval(timer));
+            }
+            else {
+                if (!this.hasAttribute('tabindex'))
+                    this.tabIndex = 0;
+                if (!this.hasAttribute('role'))
+                    this.setAttribute('role', 'button');
+                this.listen(this, 'click', () => void this.next());
+                this.listen(this, 'keydown', (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        void this.next();
+                    }
+                });
+            }
+        }
+    }, { id: 'svg', text: css });
+}
+
+/** Clip-path start / end frames for each reveal shape. */
+const MASK_SHAPES = {
+    circle: ['circle(0% at 50% 50%)', 'circle(75% at 50% 50%)'],
+    diamond: ['polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)', 'polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%)'],
+    wipe: ['inset(0 100% 0 0)', 'inset(0 0% 0 0)'],
+    'wipe-up': ['inset(100% 0 0 0)', 'inset(0% 0 0 0)'],
+    iris: ['inset(50% 50% 50% 50% round 50%)', 'inset(0% 0% 0% 0% round 0%)'],
+    star: [
+        'polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%)',
+        'polygon(50% -60%, 80% 20%, 160% 30%, 95% 85%, 115% 170%, 50% 125%, -15% 170%, 5% 85%, -60% 30%, 20% 20%)',
+    ],
+};
+function defineMaskReveal(tag = 'usa-mask-reveal') {
+    return defineElement(tag, (Base) => class UsaMaskReveal extends Base {
+        frames() {
+            const s = MASK_SHAPES[this.str('shape', 'circle')] || MASK_SHAPES.circle;
+            const at = this.str('at');
+            return at && s[0].startsWith('circle') ? [s[0].replace('50% 50%', at), s[1].replace('50% 50%', at)] : s;
+        }
+        reveal() {
+            const [a, b] = this.frames();
+            this.setAttribute('data-state', 'revealing');
+            const anim = this.motion(this, [{ clipPath: a }, { clipPath: b }], { duration: this.num('duration', 900), delay: this.num('delay', 0), easing: EASE_OUT, fill: 'forwards' });
+            const done = () => {
+                this.setAttribute('data-state', 'visible');
+                this.emit('complete');
+            };
+            if (!anim)
+                return Promise.resolve(done());
+            return anim.finished.then(done, () => { });
+        }
+        mount() {
+            if (this.reduced) {
+                this.setAttribute('data-state', 'visible');
+                return;
+            }
+            this.setAttribute('data-state', 'hidden');
+            this.style.clipPath = this.frames()[0];
+            this.onCleanup(() => (this.style.clipPath = ''));
+            const t = this.str('trigger', 'view');
+            if (t === 'hover')
+                this.listen(this, 'pointerenter', () => void this.reveal());
+            else if (t === 'click')
+                this.listen(this, 'click', () => void this.reveal());
+            else {
+                let done = false;
+                this.inView((v) => {
+                    if (v && (!done || this.flag('repeat'))) {
+                        done = true;
+                        void this.reveal();
+                    }
+                    else if (!v && this.flag('repeat')) {
+                        this.getAnimations?.().forEach((x) => x.cancel());
+                        this.style.clipPath = this.frames()[0];
+                        this.setAttribute('data-state', 'hidden');
+                    }
+                }, { threshold: 0.25 });
+            }
+        }
+    }, { id: 'svg', text: css });
+}
+
+/** Built-in animated icons (24×24 strokes) and the motion each one plays. */
+const ANIM_ICONS = {
+    bell: { d: 'M6 16V11a6 6 0 0 1 12 0v5l2 2H4l2-2M10 20a2 2 0 0 0 4 0', duration: 800, origin: '50% 10%', frames: [{ rotate: '0deg' }, { rotate: '18deg' }, { rotate: '-14deg' }, { rotate: '9deg' }, { rotate: '-5deg' }, { rotate: '0deg' }] },
+    heart: { d: 'M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z', duration: 600, frames: [{ scale: 1 }, { scale: 1.3 }, { scale: 0.92 }, { scale: 1.12 }, { scale: 1 }] },
+    check: { d: 'M4 12.5l5 5L20 6.5', duration: 600, frames: [{ strokeDashoffset: 1 }, { strokeDashoffset: 0 }] },
+    arrow: { d: 'M4 12h15M13 6l6 6-6 6', duration: 600, frames: [{ translate: '0 0' }, { translate: '5px 0' }, { translate: '0 0' }] },
+    star: { d: 'M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z', duration: 700, frames: [{ rotate: '0deg', scale: 1 }, { rotate: '72deg', scale: 1.2 }, { rotate: '144deg', scale: 1 }] },
+    gear: { d: 'M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1L7 17M17 7l2.1-2.1', duration: 900, frames: [{ rotate: '0deg' }, { rotate: '180deg' }] },
+    search: { d: 'M10.5 4a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zM15.5 15.5L20 20', duration: 700, frames: [{ rotate: '0deg' }, { rotate: '-15deg' }, { rotate: '10deg' }, { rotate: '0deg' }] },
+    download: { d: 'M12 4v11M7 10l5 5 5-5M5 20h14', duration: 700, frames: [{ translate: '0 0' }, { translate: '0 3px' }, { translate: '0 0' }] },
+};
+function defineAnimIcon(tag = 'usa-anim-icon') {
+    return defineElement(tag, (Base) => class UsaAnimIcon extends Base {
+        static get observedAttributes() {
+            return ['name', 'size', 'label'];
+        }
+        icon() {
+            return ANIM_ICONS[this.str('name', 'heart')] || ANIM_ICONS.heart;
+        }
+        play() {
+            if (this.reduced)
+                return;
+            const svg = this.querySelector('svg');
+            const i = this.icon();
+            const target = i.frames[0].strokeDashoffset !== undefined ? this.querySelector('path') : svg;
+            if (target)
+                this.motion(target, i.frames, { duration: i.duration, easing: 'ease-in-out', iterations: this.str('trigger') === 'loop' ? Infinity : 1 });
+        }
+        mount() {
+            const i = this.icon();
+            const size = this.num('size', 24);
+            const label = this.str('label');
+            this.innerHTML = `<svg viewBox="0 0 24 24" width="${size}" height="${size}" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="transform-origin:${i.origin || '50% 50%'}"${label ? ` role="img" aria-label="${label.replace(/"/g, '&quot;')}"` : ' aria-hidden="true"'}><path d="${i.d}"${i.frames[0].strokeDashoffset !== undefined ? ' pathLength="1" stroke-dasharray="1"' : ''}></path></svg>`;
+            const t = this.str('trigger', 'hover');
+            if (t === 'click')
+                this.listen(this, 'click', () => this.play());
+            else if (t === 'view' || t === 'loop')
+                this.inView((v) => v && this.play(), { threshold: 0.5 });
+            else {
+                this.listen(this, 'pointerenter', () => this.play());
+                this.listen(this, 'focusin', () => this.play());
+            }
+        }
+    }, { id: 'svg', text: css });
+}
+
+/**
+ * use-scroll-animate/components/svg — SVG animation (v3.3).
+ * `<usa-draw>` (line drawing), `<usa-morph>` (path morph), `<usa-mask-reveal>`
+ * (mask / clip-path reveals) and `<usa-anim-icon>` (animated icons), plus
+ * `interpolatePath()`, `morphTo()`, `drawLines()`.
+ */
+/** Register every component of this category under its default tag. */
+function defineSvgComponents() {
+    defineDraw();
+    defineMorph();
+    defineMaskReveal();
+    defineAnimIcon();
+}
+
+export { ANIM_ICONS, MASK_SHAPES, defineAnimIcon, defineDraw, defineMaskReveal, defineMorph, defineSvgComponents, drawLines, interpolatePath, morphTo, pathsCompatible, prefersReducedMotion };
+//# sourceMappingURL=svg.js.map

package/dist/components/svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svg.js","sources":["../../src/components/svg/core.ts","../../src/components/svg/draw.ts","../../src/components/svg/morph.ts","../../src/components/svg/mask-reveal.ts","../../src/components/svg/anim-icon.ts","../../src/components/svg/index.ts"],"sourcesContent":["import { prefersReducedMotion, motionScale, raf, caf, now, clamp } from '../base';\n\nconst NUM = /-?(?:\\d+\\.?\\d*|\\.\\d+)(?:e[-+]?\\d+)?/gi;\n\n/** `true` when two path strings share the same commands (so their numbers can be interpolated). */\nexport function pathsCompatible(a: string, b: string): boolean {\n  return a.replace(NUM, '#').replace(/[\\s,]+/g, ' ').trim() === b.replace(NUM, '#').replace(/[\\s,]+/g, ' ').trim();\n}\n\n/**\n * Path data between `a` and `b` at `t` (0–1). Paths with the same command\n * structure morph number-by-number; others switch at the midpoint.\n */\nexport function interpolatePath(a: string, b: string, t: number): string {\n  if (t <= 0) return a;\n  if (t >= 1) return b;\n  if (!pathsCompatible(a, b)) return t < 0.5 ? a : b;\n  const nb = b.match(NUM) || [];\n  let i = 0;\n  return a.replace(NUM, (n) => {\n    const v = Number(n) + (Number(nb[i++]) - Number(n)) * t;\n    return String(Math.round(v * 1000) / 1000);\n  });\n}\n\nconst ease = (t: number) => 1 - Math.pow(1 - t, 3);\n\nexport interface MorphOptions {\n  duration?: number;\n  easing?: (t: number) => number;\n}\n\n/** Animate a `<path>`'s `d` to `to`. Resolves when done; instant under reduced motion. */\nexport function morphTo(path: SVGPathElement | Element, to: string, o: MorphOptions = {}): Promise<void> {\n  const from = path.getAttribute('d') || to;\n  const dur = (o.duration ?? 500) * motionScale();\n  const prev = (path as any).__usaMorph as number | undefined;\n  if (prev) caf(prev);\n  if (prefersReducedMotion() || dur <= 0 || from === to) {\n    path.setAttribute('d', to);\n    return Promise.resolve();\n  }\n  const fn = o.easing || ease;\n  const t0 = now();\n  return new Promise((resolve) => {\n    const step = () => {\n      const t = clamp((now() - t0) / dur, 0, 1);\n      path.setAttribute('d', interpolatePath(from, to, fn(t)));\n      if (t < 1) (path as any).__usaMorph = raf(step);\n      else {\n        (path as any).__usaMorph = 0;\n        resolve();\n      }\n    };\n    (path as any).__usaMorph = raf(step);\n  });\n}\n\nconst DRAWABLE = 'path, line, polyline, polygon, circle, ellipse, rect';\n\n/**\n * Prepare every stroke in `root` for line drawing (normalised `pathLength=1`,\n * so no `getTotalLength()` is needed) and return a function that sets\n * progress 0–1, optionally staggered between shapes.\n */\nexport function drawLines(root: Element, o: { stagger?: number } = {}): (progress: number) => void {\n  const shapes = Array.from(root.querySelectorAll(DRAWABLE)) as SVGElement[];\n  shapes.forEach((s) => {\n    s.setAttribute('pathLength', '1');\n    s.style.strokeDasharray = '1 1';\n  });\n  const st = clamp(o.stagger ?? 0, 0, 0.9);\n  return (p: number) => {\n    const n = shapes.length;\n    shapes.forEach((s, i) => {\n      const start = n > 1 ? (i / (n - 1)) * st : 0;\n      const local = clamp((p - start) / (1 - st || 1), 0, 1);\n      s.style.strokeDashoffset = String(1 - local);\n    });\n  };\n}\n","import { defineElement, raf, caf, now, clamp, motionScale, type UsaElement } from '../base';\nimport { drawLines } from './core';\nimport css from './svg.css?raw';\n\n/**\n * `<usa-draw>` — line drawing: every stroke of the SVG inside draws itself.\n * Attributes: `trigger` (`view` default · `hover` · `click` · `scrub`),\n * `duration` (1600), `stagger` (0–0.9 share of the timeline, 0.2), `fill`\n * (fade the fill in after drawing), `repeat`. Method `play()`, property\n * `progress`, event `usa:complete`. Reduced motion: drawn immediately.\n */\nexport interface UsaDrawElement extends UsaElement {\n  play(): void;\n  progress: number;\n}\n\nexport function defineDraw(tag = 'usa-draw'): CustomElementConstructor | undefined {\n  return defineElement(\n    tag,\n    (Base) =>\n      class UsaDraw extends Base {\n        private _set: (p: number) => void = () => {};\n        private _p = 0;\n        private _id = 0;\n\n        get progress(): number {\n          return this._p;\n        }\n        set progress(p: number) {\n          this._p = clamp(p, 0, 1);\n          this._set(this._p);\n          this.toggleAttribute('data-drawn', this._p >= 1);\n        }\n\n        play(): void {\n          caf(this._id);\n          if (this.reduced) {\n            this.progress = 1;\n            return void this.emit('complete');\n          }\n          const dur = this.num('duration', 1600) * motionScale();\n          const t0 = now();\n          this.progress = 0;\n          const step = () => {\n            this.progress = (now() - t0) / dur;\n            if (this._p < 1) this._id = raf(step);\n            else this.emit('complete');\n          };\n          this._id = raf(step);\n        }\n\n        mount(): void {\n          this._set = drawLines(this, { stagger: this.num('stagger', 0.2) });\n          const trigger = this.str('trigger', 'view');\n          if (this.reduced) {\n            this.progress = 1;\n            return;\n          }\n          this.progress = 0;\n          if (trigger === 'scrub') {\n            const update = () => {\n              const r = this.getBoundingClientRect();\n              const vh = window.innerHeight || 1;\n              this.progress = (vh - r.top) / (vh * 0.6 + r.height * 0.4 || 1);\n            };\n            this.listen(window, 'scroll', update, { passive: true });\n            update();\n          } else if (trigger === 'hover') this.listen(this, 'pointerenter', () => this.play());\n          else if (trigger === 'click') this.listen(this, 'click', () => this.play());\n          else {\n            let done = false;\n            this.inView((v) => {\n              if (v && (!done || this.flag('repeat'))) {\n                done = true;\n                this.play();\n              } else if (!v && this.flag('repeat')) this.progress = 0;\n            }, { threshold: 0.3 });\n          }\n          this.onCleanup(() => caf(this._id));\n        }\n      },\n    { id: 'svg', text: css }\n  );\n}\n","import { defineElement, type UsaElement } from '../base';\nimport { morphTo } from './core';\nimport css from './svg.css?raw';\n\n/**\n * `<usa-morph>` — morphs an SVG path through a list of shapes.\n * Put a `<svg><path></path></svg>` inside (one is created otherwise) and set\n * `paths=\"M… | M… | M…\"` (same command structure morphs smoothly, others\n * switch at the midpoint). Attributes: `trigger` (`click` default · `hover`\n * · `auto` · `view`), `interval` (ms for auto, 2000), `duration` (600).\n * Property `index`, method `next()`, event `usa:change`.\n * Reduced motion: shapes switch without animating; `auto` does not cycle.\n */\nexport interface UsaMorphElement extends UsaElement {\n  readonly index: number;\n  next(): Promise<void>;\n}\n\nexport function defineMorph(tag = 'usa-morph'): CustomElementConstructor | undefined {\n  return defineElement(\n    tag,\n    (Base) =>\n      class UsaMorph extends Base {\n        static get observedAttributes(): string[] {\n          return ['paths', 'trigger'];\n        }\n        private _i = 0;\n        private _path: SVGPathElement | null = null;\n\n        get index(): number {\n          return this._i;\n        }\n\n        private list(): string[] {\n          return this.str('paths').split('|').map((s) => s.trim()).filter(Boolean);\n        }\n\n        next(): Promise<void> {\n          const l = this.list();\n          if (!this._path || l.length < 2) return Promise.resolve();\n          this._i = (this._i + 1) % l.length;\n          this.emit('change', { index: this._i });\n          return morphTo(this._path, l[this._i], { duration: this.num('duration', 600) });\n        }\n\n        mount(): void {\n          let path = this.querySelector('path');\n          if (!path) {\n            this.innerHTML = '<svg viewBox=\"0 0 100 100\" aria-hidden=\"true\"><path></path></svg>';\n            path = this.querySelector('path');\n          }\n          this._path = path as SVGPathElement;\n          const l = this.list();\n          if (l[0]) this._path.setAttribute('d', l[this._i % l.length]);\n          const t = this.str('trigger', 'click');\n          if (t === 'hover') {\n            this.listen(this, 'pointerenter', () => void this.next());\n            this.listen(this, 'pointerleave', () => void this.next());\n          } else if (t === 'auto' || t === 'view') {\n            let timer: ReturnType<typeof setInterval> | undefined;\n            this.inView((v) => {\n              clearInterval(timer);\n              if (!v || this.reduced) return;\n              if (t === 'view') return void this.next();\n              timer = setInterval(() => void this.next(), this.num('interval', 2000));\n            });\n            this.onCleanup(() => clearInterval(timer));\n          } else {\n            if (!this.hasAttribute('tabindex')) this.tabIndex = 0;\n            if (!this.hasAttribute('role')) this.setAttribute('role', 'button');\n            this.listen(this, 'click', () => void this.next());\n            this.listen(this, 'keydown', (e: KeyboardEvent) => {\n              if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                void this.next();\n              }\n            });\n          }\n        }\n      },\n    { id: 'svg', text: css }\n  );\n}\n","import { defineElement, EASE_OUT, type UsaElement } from '../base';\nimport css from './svg.css?raw';\n\n/** Clip-path start / end frames for each reveal shape. */\nexport const MASK_SHAPES: Record<string, [string, string]> = {\n  circle: ['circle(0% at 50% 50%)', 'circle(75% at 50% 50%)'],\n  diamond: ['polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)', 'polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%)'],\n  wipe: ['inset(0 100% 0 0)', 'inset(0 0% 0 0)'],\n  'wipe-up': ['inset(100% 0 0 0)', 'inset(0% 0 0 0)'],\n  iris: ['inset(50% 50% 50% 50% round 50%)', 'inset(0% 0% 0% 0% round 0%)'],\n  star: [\n    'polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%)',\n    'polygon(50% -60%, 80% 20%, 160% 30%, 95% 85%, 115% 170%, 50% 125%, -15% 170%, 5% 85%, -60% 30%, 20% 20%)',\n  ],\n};\n\n/**\n * `<usa-mask-reveal>` — reveals its content through a growing mask shape.\n * Attributes: `shape` (`circle` default · `diamond` · `wipe` · `wipe-up` ·\n * `iris` · `star`), `duration` (900), `delay`, `trigger` (`view` · `hover`\n * · `click`), `repeat`, `at` (`x% y%` origin for circle). Event\n * `usa:complete`. Reduced motion: content is shown without the mask.\n */\nexport interface UsaMaskRevealElement extends UsaElement {\n  reveal(): Promise<void>;\n}\n\nexport function defineMaskReveal(tag = 'usa-mask-reveal'): CustomElementConstructor | undefined {\n  return defineElement(\n    tag,\n    (Base) =>\n      class UsaMaskReveal extends Base {\n        private frames(): [string, string] {\n          const s = MASK_SHAPES[this.str('shape', 'circle')] || MASK_SHAPES.circle;\n          const at = this.str('at');\n          return at && s[0].startsWith('circle') ? [s[0].replace('50% 50%', at), s[1].replace('50% 50%', at)] : s;\n        }\n\n        reveal(): Promise<void> {\n          const [a, b] = this.frames();\n          this.setAttribute('data-state', 'revealing');\n          const anim = this.motion(this, [{ clipPath: a }, { clipPath: b }], { duration: this.num('duration', 900), delay: this.num('delay', 0), easing: EASE_OUT, fill: 'forwards' });\n          const done = () => {\n            this.setAttribute('data-state', 'visible');\n            this.emit('complete');\n          };\n          if (!anim) return Promise.resolve(done());\n          return anim.finished.then(done, () => {});\n        }\n\n        mount(): void {\n          if (this.reduced) {\n            this.setAttribute('data-state', 'visible');\n            return;\n          }\n          this.setAttribute('data-state', 'hidden');\n          this.style.clipPath = this.frames()[0];\n          this.onCleanup(() => (this.style.clipPath = ''));\n          const t = this.str('trigger', 'view');\n          if (t === 'hover') this.listen(this, 'pointerenter', () => void this.reveal());\n          else if (t === 'click') this.listen(this, 'click', () => void this.reveal());\n          else {\n            let done = false;\n            this.inView((v) => {\n              if (v && (!done || this.flag('repeat'))) {\n                done = true;\n                void this.reveal();\n              } else if (!v && this.flag('repeat')) {\n                this.getAnimations?.().forEach((x) => x.cancel());\n                this.style.clipPath = this.frames()[0];\n                this.setAttribute('data-state', 'hidden');\n              }\n            }, { threshold: 0.25 });\n          }\n        }\n      },\n    { id: 'svg', text: css }\n  );\n}\n","import { defineElement, type UsaElement } from '../base';\nimport css from './svg.css?raw';\n\ntype Icon = { d: string; frames: Keyframe[]; duration: number; origin?: string };\n\n/** Built-in animated icons (24×24 strokes) and the motion each one plays. */\nexport const ANIM_ICONS: Record<string, Icon> = {\n  bell: { d: 'M6 16V11a6 6 0 0 1 12 0v5l2 2H4l2-2M10 20a2 2 0 0 0 4 0', duration: 800, origin: '50% 10%', frames: [{ rotate: '0deg' }, { rotate: '18deg' }, { rotate: '-14deg' }, { rotate: '9deg' }, { rotate: '-5deg' }, { rotate: '0deg' }] },\n  heart: { d: 'M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z', duration: 600, frames: [{ scale: 1 }, { scale: 1.3 }, { scale: 0.92 }, { scale: 1.12 }, { scale: 1 }] },\n  check: { d: 'M4 12.5l5 5L20 6.5', duration: 600, frames: [{ strokeDashoffset: 1 }, { strokeDashoffset: 0 }] },\n  arrow: { d: 'M4 12h15M13 6l6 6-6 6', duration: 600, frames: [{ translate: '0 0' }, { translate: '5px 0' }, { translate: '0 0' }] },\n  star: { d: 'M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z', duration: 700, frames: [{ rotate: '0deg', scale: 1 }, { rotate: '72deg', scale: 1.2 }, { rotate: '144deg', scale: 1 }] },\n  gear: { d: 'M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1L7 17M17 7l2.1-2.1', duration: 900, frames: [{ rotate: '0deg' }, { rotate: '180deg' }] },\n  search: { d: 'M10.5 4a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zM15.5 15.5L20 20', duration: 700, frames: [{ rotate: '0deg' }, { rotate: '-15deg' }, { rotate: '10deg' }, { rotate: '0deg' }] },\n  download: { d: 'M12 4v11M7 10l5 5 5-5M5 20h14', duration: 700, frames: [{ translate: '0 0' }, { translate: '0 3px' }, { translate: '0 0' }] },\n};\n\n/**\n * `<usa-anim-icon name=\"bell\">` — an animated stroke icon that plays its\n * motion on `trigger` (`hover` default · `click` · `view` · `loop`).\n * Attributes: `name` (see `ANIM_ICONS`), `size` (24), `label` (accessible\n * name; decorative when absent). Method `play()`. Reduced motion: static.\n */\nexport interface UsaAnimIconElement extends UsaElement {\n  play(): void;\n}\n\nexport function defineAnimIcon(tag = 'usa-anim-icon'): CustomElementConstructor | undefined {\n  return defineElement(\n    tag,\n    (Base) =>\n      class UsaAnimIcon extends Base {\n        static get observedAttributes(): string[] {\n          return ['name', 'size', 'label'];\n        }\n        private icon(): Icon {\n          return ANIM_ICONS[this.str('name', 'heart')] || ANIM_ICONS.heart;\n        }\n\n        play(): void {\n          if (this.reduced) return;\n          const svg = this.querySelector('svg');\n          const i = this.icon();\n          const target = i.frames[0].strokeDashoffset !== undefined ? this.querySelector('path') : svg;\n          if (target) this.motion(target, i.frames, { duration: i.duration, easing: 'ease-in-out', iterations: this.str('trigger') === 'loop' ? Infinity : 1 });\n        }\n\n        mount(): void {\n          const i = this.icon();\n          const size = this.num('size', 24);\n          const label = this.str('label');\n          this.innerHTML = `<svg viewBox=\"0 0 24 24\" width=\"${size}\" height=\"${size}\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"transform-origin:${i.origin || '50% 50%'}\"${label ? ` role=\"img\" aria-label=\"${label.replace(/\"/g, '&quot;')}\"` : ' aria-hidden=\"true\"'}><path d=\"${i.d}\"${i.frames[0].strokeDashoffset !== undefined ? ' pathLength=\"1\" stroke-dasharray=\"1\"' : ''}></path></svg>`;\n          const t = this.str('trigger', 'hover');\n          if (t === 'click') this.listen(this, 'click', () => this.play());\n          else if (t === 'view' || t === 'loop') this.inView((v) => v && this.play(), { threshold: 0.5 });\n          else {\n            this.listen(this, 'pointerenter', () => this.play());\n            this.listen(this, 'focusin', () => this.play());\n          }\n        }\n      },\n    { id: 'svg', text: css }\n  );\n}\n","/**\n * use-scroll-animate/components/svg — SVG animation (v3.3).\n * `<usa-draw>` (line drawing), `<usa-morph>` (path morph), `<usa-mask-reveal>`\n * (mask / clip-path reveals) and `<usa-anim-icon>` (animated icons), plus\n * `interpolatePath()`, `morphTo()`, `drawLines()`.\n */\nimport { defineDraw, type UsaDrawElement } from './draw';\nimport { defineMorph, type UsaMorphElement } from './morph';\nimport { defineMaskReveal, type UsaMaskRevealElement } from './mask-reveal';\nimport { defineAnimIcon, type UsaAnimIconElement } from './anim-icon';\n\nexport { defineDraw, defineMorph, defineMaskReveal, defineAnimIcon };\nexport { interpolatePath, pathsCompatible, morphTo, drawLines } from './core';\nexport type { MorphOptions } from './core';\nexport { MASK_SHAPES } from './mask-reveal';\nexport { ANIM_ICONS } from './anim-icon';\nexport type { UsaDrawElement, UsaMorphElement, UsaMaskRevealElement, UsaAnimIconElement };\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 defineSvgComponents(): void {\n  defineDraw();\n  defineMorph();\n  defineMaskReveal();\n  defineAnimIcon();\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'usa-draw': UsaDrawElement;\n    'usa-morph': UsaMorphElement;\n    'usa-mask-reveal': UsaMaskRevealElement;\n    'usa-anim-icon': UsaAnimIconElement;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/components/vue.cjs

@@ -17,7 +17,8 @@ require('./ui.cjs');
 require('./page.cjs');
 require('./timeline.cjs');
 require('./gesture.cjs');
-require('../chunks/index-tags-DCTX4F9b.cjs');
+require('./svg.cjs');
+require('../chunks/index-tags-Cz4iTBEK.cjs');
 
 /**
  * use-scroll-animate/components/vue — Vue integration (v2.9).

package/dist/components/vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"vue.cjs","sources":["../../src/components/frameworks/vue.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/vue — Vue integration (v2.9).\n *\n * ```js\n * // vite.config.js\n * import vue from '@vitejs/plugin-vue';\n * import { isUsaElement } from 'use-scroll-animate/components/vue';\n * export default { plugins: [vue({ template: { compilerOptions: { isCustomElement: isUsaElement } } })] };\n *\n * // main.js\n * import { UsaPlugin } from 'use-scroll-animate/components/vue';\n * app.use(UsaPlugin, { categories: ['click', 'cards'] });\n * ```\n * In templates, listen with `@usa:change=\"…\"` and bind properties with\n * `.prop`: `<usa-toggle :checked.prop=\"on\" @usa:change=\"on = $event.detail.checked\">`.\n */\nimport { defineComponents, type ComponentCategory } from '../index';\n\n/** `compilerOptions.isCustomElement` predicate for every `<usa-*>` tag. */\nexport const isUsaElement = (tag: string): boolean => tag.startsWith('usa-');\n\nexport interface UsaPluginOptions {\n  /** Only register these categories (default: all). */\n  categories?: ComponentCategory[];\n}\n\n/** Vue plugin: registers the `<usa-*>` elements (client only) and sets `isCustomElement` at runtime. */\nexport const UsaPlugin = {\n  install(app: { config: { compilerOptions?: { isCustomElement?: (t: string) => boolean } } }, options: UsaPluginOptions = {}): void {\n    const co = (app.config.compilerOptions ||= {});\n    const prev = co.isCustomElement;\n    co.isCustomElement = (t: string) => isUsaElement(t) || !!prev?.(t);\n    defineComponents(options.categories);\n  },\n};\n"],"names":["defineComponents"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;AAeG;AAGH;AACO,MAAM,YAAY,GAAG,CAAC,GAAW,KAAc,GAAG,CAAC,UAAU,CAAC,MAAM;AAO3E;AACO,MAAM,SAAS,GAAG;AACvB,IAAA,OAAO,CAAC,GAAmF,EAAE,OAAA,GAA4B,EAAE,EAAA;;AACzH,QAAA,MAAM,EAAE,IAAG,CAAA,EAAA,GAAC,GAAG,CAAC,MAAM,EAAC,eAAe,KAAA,EAAA,CAAf,eAAe,GAAK,EAAE,EAAC;AAC9C,QAAA,MAAM,IAAI,GAAG,EAAE,CAAC,eAAe;QAC/B,EAAE,CAAC,eAAe,GAAG,CAAC,CAAS,KAAK,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC;AAClE,QAAAA,2BAAgB,CAAC,OAAO,CAAC,UAAU,CAAC;IACtC,CAAC;;;;;;"}
+{"version":3,"file":"vue.cjs","sources":["../../src/components/frameworks/vue.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/vue — Vue integration (v2.9).\n *\n * ```js\n * // vite.config.js\n * import vue from '@vitejs/plugin-vue';\n * import { isUsaElement } from 'use-scroll-animate/components/vue';\n * export default { plugins: [vue({ template: { compilerOptions: { isCustomElement: isUsaElement } } })] };\n *\n * // main.js\n * import { UsaPlugin } from 'use-scroll-animate/components/vue';\n * app.use(UsaPlugin, { categories: ['click', 'cards'] });\n * ```\n * In templates, listen with `@usa:change=\"…\"` and bind properties with\n * `.prop`: `<usa-toggle :checked.prop=\"on\" @usa:change=\"on = $event.detail.checked\">`.\n */\nimport { defineComponents, type ComponentCategory } from '../index';\n\n/** `compilerOptions.isCustomElement` predicate for every `<usa-*>` tag. */\nexport const isUsaElement = (tag: string): boolean => tag.startsWith('usa-');\n\nexport interface UsaPluginOptions {\n  /** Only register these categories (default: all). */\n  categories?: ComponentCategory[];\n}\n\n/** Vue plugin: registers the `<usa-*>` elements (client only) and sets `isCustomElement` at runtime. */\nexport const UsaPlugin = {\n  install(app: { config: { compilerOptions?: { isCustomElement?: (t: string) => boolean } } }, options: UsaPluginOptions = {}): void {\n    const co = (app.config.compilerOptions ||= {});\n    const prev = co.isCustomElement;\n    co.isCustomElement = (t: string) => isUsaElement(t) || !!prev?.(t);\n    defineComponents(options.categories);\n  },\n};\n"],"names":["defineComponents"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;AAeG;AAGH;AACO,MAAM,YAAY,GAAG,CAAC,GAAW,KAAc,GAAG,CAAC,UAAU,CAAC,MAAM;AAO3E;AACO,MAAM,SAAS,GAAG;AACvB,IAAA,OAAO,CAAC,GAAmF,EAAE,OAAA,GAA4B,EAAE,EAAA;;AACzH,QAAA,MAAM,EAAE,IAAG,CAAA,EAAA,GAAC,GAAG,CAAC,MAAM,EAAC,eAAe,KAAA,EAAA,CAAf,eAAe,GAAK,EAAE,EAAC;AAC9C,QAAA,MAAM,IAAI,GAAG,EAAE,CAAC,eAAe;QAC/B,EAAE,CAAC,eAAe,GAAG,CAAC,CAAS,KAAK,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC;AAClE,QAAAA,2BAAgB,CAAC,OAAO,CAAC,UAAU,CAAC;IACtC,CAAC;;;;;;"}

package/dist/components/vue.d.cts

@@ -1421,6 +1421,69 @@ declare global {
     }
 }
 
+/**
+ * `<usa-draw>` — line drawing: every stroke of the SVG inside draws itself.
+ * Attributes: `trigger` (`view` default · `hover` · `click` · `scrub`),
+ * `duration` (1600), `stagger` (0–0.9 share of the timeline, 0.2), `fill`
+ * (fade the fill in after drawing), `repeat`. Method `play()`, property
+ * `progress`, event `usa:complete`. Reduced motion: drawn immediately.
+ */
+interface UsaDrawElement extends UsaElement {
+    play(): void;
+    progress: number;
+}
+
+/**
+ * `<usa-morph>` — morphs an SVG path through a list of shapes.
+ * Put a `<svg><path></path></svg>` inside (one is created otherwise) and set
+ * `paths="M… | M… | M…"` (same command structure morphs smoothly, others
+ * switch at the midpoint). Attributes: `trigger` (`click` default · `hover`
+ * · `auto` · `view`), `interval` (ms for auto, 2000), `duration` (600).
+ * Property `index`, method `next()`, event `usa:change`.
+ * Reduced motion: shapes switch without animating; `auto` does not cycle.
+ */
+interface UsaMorphElement extends UsaElement {
+    readonly index: number;
+    next(): Promise<void>;
+}
+
+/**
+ * `<usa-mask-reveal>` — reveals its content through a growing mask shape.
+ * Attributes: `shape` (`circle` default · `diamond` · `wipe` · `wipe-up` ·
+ * `iris` · `star`), `duration` (900), `delay`, `trigger` (`view` · `hover`
+ * · `click`), `repeat`, `at` (`x% y%` origin for circle). Event
+ * `usa:complete`. Reduced motion: content is shown without the mask.
+ */
+interface UsaMaskRevealElement extends UsaElement {
+    reveal(): Promise<void>;
+}
+
+/**
+ * `<usa-anim-icon name="bell">` — an animated stroke icon that plays its
+ * motion on `trigger` (`hover` default · `click` · `view` · `loop`).
+ * Attributes: `name` (see `ANIM_ICONS`), `size` (24), `label` (accessible
+ * name; decorative when absent). Method `play()`. Reduced motion: static.
+ */
+interface UsaAnimIconElement extends UsaElement {
+    play(): void;
+}
+
+/**
+ * use-scroll-animate/components/svg — SVG animation (v3.3).
+ * `<usa-draw>` (line drawing), `<usa-morph>` (path morph), `<usa-mask-reveal>`
+ * (mask / clip-path reveals) and `<usa-anim-icon>` (animated icons), plus
+ * `interpolatePath()`, `morphTo()`, `drawLines()`.
+ */
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'usa-draw': UsaDrawElement;
+        'usa-morph': UsaMorphElement;
+        'usa-mask-reveal': UsaMaskRevealElement;
+        'usa-anim-icon': UsaAnimIconElement;
+    }
+}
+
 /** The component categories and their default tags. */
 declare const COMPONENT_CATEGORIES: {
     readonly reveal: readonly ["usa-reveal", "usa-stagger", "usa-scroll-progress", "usa-scrolly"];
@@ -1436,6 +1499,7 @@ declare const COMPONENT_CATEGORIES: {
     readonly page: readonly ["usa-cursor", "usa-fullpage", "usa-loading-bar", "usa-back-to-top", "usa-ambient", "usa-splash", "usa-auto-skeleton", "usa-motion-switch"];
     readonly timeline: readonly ["usa-timeline"];
     readonly gesture: readonly ["usa-swipeable", "usa-pinch-zoom"];
+    readonly svg: readonly ["usa-draw", "usa-morph", "usa-mask-reveal", "usa-anim-icon"];
 };
 type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
 

package/dist/components/vue.d.ts

@@ -1421,6 +1421,69 @@ declare global {
     }
 }
 
+/**
+ * `<usa-draw>` — line drawing: every stroke of the SVG inside draws itself.
+ * Attributes: `trigger` (`view` default · `hover` · `click` · `scrub`),
+ * `duration` (1600), `stagger` (0–0.9 share of the timeline, 0.2), `fill`
+ * (fade the fill in after drawing), `repeat`. Method `play()`, property
+ * `progress`, event `usa:complete`. Reduced motion: drawn immediately.
+ */
+interface UsaDrawElement extends UsaElement {
+    play(): void;
+    progress: number;
+}
+
+/**
+ * `<usa-morph>` — morphs an SVG path through a list of shapes.
+ * Put a `<svg><path></path></svg>` inside (one is created otherwise) and set
+ * `paths="M… | M… | M…"` (same command structure morphs smoothly, others
+ * switch at the midpoint). Attributes: `trigger` (`click` default · `hover`
+ * · `auto` · `view`), `interval` (ms for auto, 2000), `duration` (600).
+ * Property `index`, method `next()`, event `usa:change`.
+ * Reduced motion: shapes switch without animating; `auto` does not cycle.
+ */
+interface UsaMorphElement extends UsaElement {
+    readonly index: number;
+    next(): Promise<void>;
+}
+
+/**
+ * `<usa-mask-reveal>` — reveals its content through a growing mask shape.
+ * Attributes: `shape` (`circle` default · `diamond` · `wipe` · `wipe-up` ·
+ * `iris` · `star`), `duration` (900), `delay`, `trigger` (`view` · `hover`
+ * · `click`), `repeat`, `at` (`x% y%` origin for circle). Event
+ * `usa:complete`. Reduced motion: content is shown without the mask.
+ */
+interface UsaMaskRevealElement extends UsaElement {
+    reveal(): Promise<void>;
+}
+
+/**
+ * `<usa-anim-icon name="bell">` — an animated stroke icon that plays its
+ * motion on `trigger` (`hover` default · `click` · `view` · `loop`).
+ * Attributes: `name` (see `ANIM_ICONS`), `size` (24), `label` (accessible
+ * name; decorative when absent). Method `play()`. Reduced motion: static.
+ */
+interface UsaAnimIconElement extends UsaElement {
+    play(): void;
+}
+
+/**
+ * use-scroll-animate/components/svg — SVG animation (v3.3).
+ * `<usa-draw>` (line drawing), `<usa-morph>` (path morph), `<usa-mask-reveal>`
+ * (mask / clip-path reveals) and `<usa-anim-icon>` (animated icons), plus
+ * `interpolatePath()`, `morphTo()`, `drawLines()`.
+ */
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'usa-draw': UsaDrawElement;
+        'usa-morph': UsaMorphElement;
+        'usa-mask-reveal': UsaMaskRevealElement;
+        'usa-anim-icon': UsaAnimIconElement;
+    }
+}
+
 /** The component categories and their default tags. */
 declare const COMPONENT_CATEGORIES: {
     readonly reveal: readonly ["usa-reveal", "usa-stagger", "usa-scroll-progress", "usa-scrolly"];
@@ -1436,6 +1499,7 @@ declare const COMPONENT_CATEGORIES: {
     readonly page: readonly ["usa-cursor", "usa-fullpage", "usa-loading-bar", "usa-back-to-top", "usa-ambient", "usa-splash", "usa-auto-skeleton", "usa-motion-switch"];
     readonly timeline: readonly ["usa-timeline"];
     readonly gesture: readonly ["usa-swipeable", "usa-pinch-zoom"];
+    readonly svg: readonly ["usa-draw", "usa-morph", "usa-mask-reveal", "usa-anim-icon"];
 };
 type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
 

package/dist/components/vue.js

@@ -15,7 +15,8 @@ import './ui.js';
 import './page.js';
 import './timeline.js';
 import './gesture.js';
-import '../chunks/index-tags-DZ-gjMZc.js';
+import './svg.js';
+import '../chunks/index-tags-Dc_Z4yAY.js';
 
 /**
  * use-scroll-animate/components/vue — Vue integration (v2.9).

package/dist/components/vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"vue.js","sources":["../../src/components/frameworks/vue.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/vue — Vue integration (v2.9).\n *\n * ```js\n * // vite.config.js\n * import vue from '@vitejs/plugin-vue';\n * import { isUsaElement } from 'use-scroll-animate/components/vue';\n * export default { plugins: [vue({ template: { compilerOptions: { isCustomElement: isUsaElement } } })] };\n *\n * // main.js\n * import { UsaPlugin } from 'use-scroll-animate/components/vue';\n * app.use(UsaPlugin, { categories: ['click', 'cards'] });\n * ```\n * In templates, listen with `@usa:change=\"…\"` and bind properties with\n * `.prop`: `<usa-toggle :checked.prop=\"on\" @usa:change=\"on = $event.detail.checked\">`.\n */\nimport { defineComponents, type ComponentCategory } from '../index';\n\n/** `compilerOptions.isCustomElement` predicate for every `<usa-*>` tag. */\nexport const isUsaElement = (tag: string): boolean => tag.startsWith('usa-');\n\nexport interface UsaPluginOptions {\n  /** Only register these categories (default: all). */\n  categories?: ComponentCategory[];\n}\n\n/** Vue plugin: registers the `<usa-*>` elements (client only) and sets `isCustomElement` at runtime. */\nexport const UsaPlugin = {\n  install(app: { config: { compilerOptions?: { isCustomElement?: (t: string) => boolean } } }, options: UsaPluginOptions = {}): void {\n    const co = (app.config.compilerOptions ||= {});\n    const prev = co.isCustomElement;\n    co.isCustomElement = (t: string) => isUsaElement(t) || !!prev?.(t);\n    defineComponents(options.categories);\n  },\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;AAeG;AAGH;AACO,MAAM,YAAY,GAAG,CAAC,GAAW,KAAc,GAAG,CAAC,UAAU,CAAC,MAAM;AAO3E;AACO,MAAM,SAAS,GAAG;AACvB,IAAA,OAAO,CAAC,GAAmF,EAAE,OAAA,GAA4B,EAAE,EAAA;;AACzH,QAAA,MAAM,EAAE,IAAG,CAAA,EAAA,GAAC,GAAG,CAAC,MAAM,EAAC,eAAe,KAAA,EAAA,CAAf,eAAe,GAAK,EAAE,EAAC;AAC9C,QAAA,MAAM,IAAI,GAAG,EAAE,CAAC,eAAe;QAC/B,EAAE,CAAC,eAAe,GAAG,CAAC,CAAS,KAAK,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC;AAClE,QAAA,gBAAgB,CAAC,OAAO,CAAC,UAAU,CAAC;IACtC,CAAC;;;;;"}
+{"version":3,"file":"vue.js","sources":["../../src/components/frameworks/vue.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/vue — Vue integration (v2.9).\n *\n * ```js\n * // vite.config.js\n * import vue from '@vitejs/plugin-vue';\n * import { isUsaElement } from 'use-scroll-animate/components/vue';\n * export default { plugins: [vue({ template: { compilerOptions: { isCustomElement: isUsaElement } } })] };\n *\n * // main.js\n * import { UsaPlugin } from 'use-scroll-animate/components/vue';\n * app.use(UsaPlugin, { categories: ['click', 'cards'] });\n * ```\n * In templates, listen with `@usa:change=\"…\"` and bind properties with\n * `.prop`: `<usa-toggle :checked.prop=\"on\" @usa:change=\"on = $event.detail.checked\">`.\n */\nimport { defineComponents, type ComponentCategory } from '../index';\n\n/** `compilerOptions.isCustomElement` predicate for every `<usa-*>` tag. */\nexport const isUsaElement = (tag: string): boolean => tag.startsWith('usa-');\n\nexport interface UsaPluginOptions {\n  /** Only register these categories (default: all). */\n  categories?: ComponentCategory[];\n}\n\n/** Vue plugin: registers the `<usa-*>` elements (client only) and sets `isCustomElement` at runtime. */\nexport const UsaPlugin = {\n  install(app: { config: { compilerOptions?: { isCustomElement?: (t: string) => boolean } } }, options: UsaPluginOptions = {}): void {\n    const co = (app.config.compilerOptions ||= {});\n    const prev = co.isCustomElement;\n    co.isCustomElement = (t: string) => isUsaElement(t) || !!prev?.(t);\n    defineComponents(options.categories);\n  },\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;AAeG;AAGH;AACO,MAAM,YAAY,GAAG,CAAC,GAAW,KAAc,GAAG,CAAC,UAAU,CAAC,MAAM;AAO3E;AACO,MAAM,SAAS,GAAG;AACvB,IAAA,OAAO,CAAC,GAAmF,EAAE,OAAA,GAA4B,EAAE,EAAA;;AACzH,QAAA,MAAM,EAAE,IAAG,CAAA,EAAA,GAAC,GAAG,CAAC,MAAM,EAAC,eAAe,KAAA,EAAA,CAAf,eAAe,GAAK,EAAE,EAAC;AAC9C,QAAA,MAAM,IAAI,GAAG,EAAE,CAAC,eAAe;QAC/B,EAAE,CAAC,eAAe,GAAG,CAAC,CAAS,KAAK,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC;AAClE,QAAA,gBAAgB,CAAC,OAAO,CAAC,UAAU,CAAC;IACtC,CAAC;;;;;"}