use-scroll-animate 3.2.0 → 3.3.0

package/CHANGELOG.md

@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [3.3.0] - 2026-10-07
+
+### Added
+- **SVG** — new category `use-scroll-animate/components/svg`:
+  - `<usa-draw>` — line drawing for every stroke of the SVG inside (normalised `pathLength`, no `getTotalLength()`): `trigger` (`view` · `hover` · `click` · `scrub`), `duration`, `stagger`, `fill`, `repeat`; `progress`, `play()`, `usa:complete`.
+  - `<usa-morph>` — path morph through `paths="A | B | C"` on `click` (keyboard accessible) · `hover` · `view` · `auto`; same-structure paths morph point by point, others switch at the midpoint.
+  - `<usa-mask-reveal>` — clip-path mask reveals: `circle`, `diamond`, `star`, `iris`, `wipe`, `wipe-up`, origin `at`, `trigger`, `repeat`.
+  - `<usa-anim-icon>` — animated stroke icons (`bell`, `heart`, `check`, `arrow`, `star`, `gear`, `search`, `download`) on hover / focus, click, view or loop; decorative unless `label` is set.
+  - Helpers: `morphTo()`, `interpolatePath()`, `pathsCompatible()`, `drawLines()`, `MASK_SHAPES`, `ANIM_ICONS`.
+- Reduced motion: drawings appear complete, morphs switch instantly (`auto` does not cycle), masks are not applied, icons stay still.
+- Showcase: new **SVG** gallery category (draw, morph, mask, icons, `morphTo()` demo).
+
 ## [3.2.0] - 2026-10-07
 
 ### Added

package/README.md

@@ -57,6 +57,7 @@ defineComponents(); // or per category: import { defineTextComponents } from 'us
 | **Page & app-wide** (`/components/page`) | `pageTransition()` (fade · slide · circle · blinds · pixel · zoom; SPA + MPA) · `themeTransition()` · `<usa-cursor>` · `smoothScroll()` · `<usa-fullpage>` · `<usa-loading-bar>` · `<usa-back-to-top>` · `<usa-ambient>` (particles · snow · stars · noise · gradient) · `<usa-splash>` · `<usa-auto-skeleton>` · `<usa-motion-switch>` / `setMotionIntensity()` |
 | **Timeline & choreography** (`/components/timeline`) | `timeline()` (chain · overlap · labels · seek · reverse · scrub) · `<usa-timeline>` (`data-tl` steps) |
 | **Gestures** (`/components/gesture`) | `gesture()` (pan · swipe · pinch · long-press · tap · double-tap → springs) · `<usa-swipeable>` · `<usa-pinch-zoom>` |
+| **SVG** (`/components/svg`) | `<usa-draw>` (line drawing) · `<usa-morph>` (path morph) · `<usa-mask-reveal>` · `<usa-anim-icon>` · `morphTo()` · `interpolatePath()` |
 
 Whole bundle ≈ 22 kB gzip (JS + CSS); one category 3.5–6.4 kB; a single component ≈ 2 kB. The scroll-animation core below is unaffected.
 

package/README_ja.md

@@ -47,6 +47,7 @@ defineComponents(); // カテゴリ単位: import { defineTextComponents } from
 | **ページ・アプリ全体**（`/components/page`） | `pageTransition()` · `themeTransition()` · `<usa-cursor>` · `smoothScroll()` · `<usa-fullpage>` · `<usa-loading-bar>` · `<usa-back-to-top>` · `<usa-ambient>` · `<usa-splash>` · `<usa-auto-skeleton>` · `<usa-motion-switch>` |
 | **タイムライン** (`/components/timeline`) | `timeline()`（連結 · 重ね · ラベル · シーク · 逆再生 · スクラブ）· `<usa-timeline>`（`data-tl` ステップ） |
 | **ジェスチャー** (`/components/gesture`) | `gesture()`（パン · スワイプ · ピンチ · 長押し · タップ → スプリング）· `<usa-swipeable>` · `<usa-pinch-zoom>` |
+| **SVG** (`/components/svg`) | `<usa-draw>`（線描画）· `<usa-morph>`（パスモーフ）· `<usa-mask-reveal>` · `<usa-anim-icon>` · `morphTo()` |
 
 ## ドキュメント
 

package/README_zh.md

@@ -56,6 +56,7 @@ defineComponents(); // 或按分类：import { defineTextComponents } from 'use-
 | **页面与全局效果**（`/components/page`） | `pageTransition()` 页面切换（淡入 · 滑动 · 圆形揭示 · 百叶窗 · 像素溶解，单页 + 多页）· `themeTransition()` 主题圆形切换 · `<usa-cursor>` 自定义光标 · `smoothScroll()` · `<usa-fullpage>` 整屏 · `<usa-loading-bar>` · `<usa-back-to-top>` · `<usa-ambient>` 雪花 / 星空 / 噪点 · `<usa-splash>` 启动屏 · `<usa-auto-skeleton>` 自动骨架屏 · `<usa-motion-switch>` 动效强度 |
 | **时间线与编排** (`/components/timeline`) | `timeline()`（串联 · 重叠 · 标签 · 跳转 · 倒放 · 滚动擦洗）· `<usa-timeline>`（`data-tl` 步骤） |
 | **手势** (`/components/gesture`) | `gesture()`（拖动 · 轻扫 · 捏合 · 长按 · 单击 · 双击 → 弹簧）· `<usa-swipeable>` · `<usa-pinch-zoom>` |
+| **SVG 动画** (`/components/svg`) | `<usa-draw>`（线条描绘）· `<usa-morph>`（路径变形）· `<usa-mask-reveal>` · `<usa-anim-icon>` · `morphTo()` · `interpolatePath()` |
 
 完整包约 22 kB gzip（JS + CSS）；单个分类 3.5–6.4 kB；单个组件约 2 kB。下方的滚动动画核心不受影响。
 

package/dist/chunks/{index-tags-DCTX4F9b.cjs → index-tags-Cz4iTBEK.cjs}

@@ -16,7 +16,8 @@ const COMPONENT_CATEGORIES = {
     page: ['usa-cursor', 'usa-fullpage', 'usa-loading-bar', 'usa-back-to-top', 'usa-ambient', 'usa-splash', 'usa-auto-skeleton', 'usa-motion-switch'],
     timeline: ['usa-timeline'],
     gesture: ['usa-swipeable', 'usa-pinch-zoom'],
+    svg: ['usa-draw', 'usa-morph', 'usa-mask-reveal', 'usa-anim-icon'],
 };
 
 exports.COMPONENT_CATEGORIES = COMPONENT_CATEGORIES;
-//# sourceMappingURL=index-tags-DCTX4F9b.cjs.map
+//# sourceMappingURL=index-tags-Cz4iTBEK.cjs.map

package/dist/chunks/{index-tags-DCTX4F9b.cjs.map → index-tags-Cz4iTBEK.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"index-tags-DCTX4F9b.cjs","sources":["../../src/components/index-tags.ts"],"sourcesContent":["// The component categories and their default tags (no imports: safe for lazy loaders).\n/** The component categories and their default tags. */\nexport const COMPONENT_CATEGORIES = {\n  reveal: ['usa-reveal', 'usa-stagger', 'usa-scroll-progress', 'usa-scrolly'],\n  text: ['usa-typewriter', 'usa-split-text', 'usa-scramble', 'usa-counter', 'usa-shimmer-text', 'usa-text-rotate', 'usa-wave-text', 'usa-glitch', 'usa-gradient-text', 'usa-handwriting', 'usa-scroll-highlight'],\n  interaction: ['usa-ripple', 'usa-magnetic', 'usa-tilt', 'usa-spotlight', 'usa-press', 'usa-toggle'],\n  feedback: ['usa-spinner', 'usa-skeleton', 'usa-progress', 'usa-toaster', 'usa-check'],\n  background: ['usa-aurora', 'usa-particles', 'usa-grain', 'usa-marquee', 'usa-acrylic', 'usa-grid-glow', 'usa-blobs', 'usa-water-ripple', 'usa-dot-network'],\n  transitions: ['usa-dialog', 'usa-accordion', 'usa-flip-list', 'usa-view-switch'],\n  physics: ['usa-spring', 'usa-draggable', 'usa-overscroll'],\n  cards: ['usa-card', 'usa-card-stack', 'usa-sticky-stack', 'usa-carousel-3d'],\n  click: ['usa-click', 'usa-button', 'usa-icon-morph', 'usa-like', 'usa-hold', 'usa-double-tap', 'usa-checkbox'],\n  ui: ['usa-tabs', 'usa-drawer', 'usa-bottom-sheet', 'usa-pull-refresh', 'usa-fab', 'usa-navbar', 'usa-slider', 'usa-rating', 'usa-tooltip', 'usa-popover', 'usa-badge', 'usa-avatar-stack'],\n  page: ['usa-cursor', 'usa-fullpage', 'usa-loading-bar', 'usa-back-to-top', 'usa-ambient', 'usa-splash', 'usa-auto-skeleton', 'usa-motion-switch'],\n  timeline: ['usa-timeline'],\n  gesture: ['usa-swipeable', 'usa-pinch-zoom'],\n} as const;\n\nexport type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;\n"],"names":[],"mappings":";;AAAA;AACA;AACO,MAAM,oBAAoB,GAAG;IAClC,MAAM,EAAE,CAAC,YAAY,EAAE,aAAa,EAAE,qBAAqB,EAAE,aAAa,CAAC;IAC3E,IAAI,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,EAAE,cAAc,EAAE,aAAa,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,eAAe,EAAE,YAAY,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,sBAAsB,CAAC;AAC/M,IAAA,WAAW,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,eAAe,EAAE,WAAW,EAAE,YAAY,CAAC;IACnG,QAAQ,EAAE,CAAC,aAAa,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,WAAW,CAAC;AACrF,IAAA,UAAU,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,EAAE,eAAe,EAAE,WAAW,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;IAC3J,WAAW,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,iBAAiB,CAAC;AAChF,IAAA,OAAO,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,gBAAgB,CAAC;IAC1D,KAAK,EAAE,CAAC,UAAU,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;AAC5E,IAAA,KAAK,EAAE,CAAC,WAAW,EAAE,YAAY,EAAE,gBAAgB,EAAE,UAAU,EAAE,UAAU,EAAE,gBAAgB,EAAE,cAAc,CAAC;IAC9G,EAAE,EAAE,CAAC,UAAU,EAAE,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,SAAS,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,kBAAkB,CAAC;AAC1L,IAAA,IAAI,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,aAAa,EAAE,YAAY,EAAE,mBAAmB,EAAE,mBAAmB,CAAC;IACjJ,QAAQ,EAAE,CAAC,cAAc,CAAC;AAC1B,IAAA,OAAO,EAAE,CAAC,eAAe,EAAE,gBAAgB,CAAC;;;;;"}
+{"version":3,"file":"index-tags-Cz4iTBEK.cjs","sources":["../../src/components/index-tags.ts"],"sourcesContent":["// The component categories and their default tags (no imports: safe for lazy loaders).\n/** The component categories and their default tags. */\nexport const COMPONENT_CATEGORIES = {\n  reveal: ['usa-reveal', 'usa-stagger', 'usa-scroll-progress', 'usa-scrolly'],\n  text: ['usa-typewriter', 'usa-split-text', 'usa-scramble', 'usa-counter', 'usa-shimmer-text', 'usa-text-rotate', 'usa-wave-text', 'usa-glitch', 'usa-gradient-text', 'usa-handwriting', 'usa-scroll-highlight'],\n  interaction: ['usa-ripple', 'usa-magnetic', 'usa-tilt', 'usa-spotlight', 'usa-press', 'usa-toggle'],\n  feedback: ['usa-spinner', 'usa-skeleton', 'usa-progress', 'usa-toaster', 'usa-check'],\n  background: ['usa-aurora', 'usa-particles', 'usa-grain', 'usa-marquee', 'usa-acrylic', 'usa-grid-glow', 'usa-blobs', 'usa-water-ripple', 'usa-dot-network'],\n  transitions: ['usa-dialog', 'usa-accordion', 'usa-flip-list', 'usa-view-switch'],\n  physics: ['usa-spring', 'usa-draggable', 'usa-overscroll'],\n  cards: ['usa-card', 'usa-card-stack', 'usa-sticky-stack', 'usa-carousel-3d'],\n  click: ['usa-click', 'usa-button', 'usa-icon-morph', 'usa-like', 'usa-hold', 'usa-double-tap', 'usa-checkbox'],\n  ui: ['usa-tabs', 'usa-drawer', 'usa-bottom-sheet', 'usa-pull-refresh', 'usa-fab', 'usa-navbar', 'usa-slider', 'usa-rating', 'usa-tooltip', 'usa-popover', 'usa-badge', 'usa-avatar-stack'],\n  page: ['usa-cursor', 'usa-fullpage', 'usa-loading-bar', 'usa-back-to-top', 'usa-ambient', 'usa-splash', 'usa-auto-skeleton', 'usa-motion-switch'],\n  timeline: ['usa-timeline'],\n  gesture: ['usa-swipeable', 'usa-pinch-zoom'],\n  svg: ['usa-draw', 'usa-morph', 'usa-mask-reveal', 'usa-anim-icon'],\n} as const;\n\nexport type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;\n"],"names":[],"mappings":";;AAAA;AACA;AACO,MAAM,oBAAoB,GAAG;IAClC,MAAM,EAAE,CAAC,YAAY,EAAE,aAAa,EAAE,qBAAqB,EAAE,aAAa,CAAC;IAC3E,IAAI,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,EAAE,cAAc,EAAE,aAAa,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,eAAe,EAAE,YAAY,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,sBAAsB,CAAC;AAC/M,IAAA,WAAW,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,eAAe,EAAE,WAAW,EAAE,YAAY,CAAC;IACnG,QAAQ,EAAE,CAAC,aAAa,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,WAAW,CAAC;AACrF,IAAA,UAAU,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,EAAE,eAAe,EAAE,WAAW,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;IAC3J,WAAW,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,iBAAiB,CAAC;AAChF,IAAA,OAAO,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,gBAAgB,CAAC;IAC1D,KAAK,EAAE,CAAC,UAAU,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;AAC5E,IAAA,KAAK,EAAE,CAAC,WAAW,EAAE,YAAY,EAAE,gBAAgB,EAAE,UAAU,EAAE,UAAU,EAAE,gBAAgB,EAAE,cAAc,CAAC;IAC9G,EAAE,EAAE,CAAC,UAAU,EAAE,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,SAAS,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,kBAAkB,CAAC;AAC1L,IAAA,IAAI,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,aAAa,EAAE,YAAY,EAAE,mBAAmB,EAAE,mBAAmB,CAAC;IACjJ,QAAQ,EAAE,CAAC,cAAc,CAAC;AAC1B,IAAA,OAAO,EAAE,CAAC,eAAe,EAAE,gBAAgB,CAAC;IAC5C,GAAG,EAAE,CAAC,UAAU,EAAE,WAAW,EAAE,iBAAiB,EAAE,eAAe,CAAC;;;;;"}

package/dist/chunks/{index-tags-DZ-gjMZc.js → index-tags-Dc_Z4yAY.js}

@@ -14,7 +14,8 @@ const COMPONENT_CATEGORIES = {
     page: ['usa-cursor', 'usa-fullpage', 'usa-loading-bar', 'usa-back-to-top', 'usa-ambient', 'usa-splash', 'usa-auto-skeleton', 'usa-motion-switch'],
     timeline: ['usa-timeline'],
     gesture: ['usa-swipeable', 'usa-pinch-zoom'],
+    svg: ['usa-draw', 'usa-morph', 'usa-mask-reveal', 'usa-anim-icon'],
 };
 
 export { COMPONENT_CATEGORIES as C };
-//# sourceMappingURL=index-tags-DZ-gjMZc.js.map
+//# sourceMappingURL=index-tags-Dc_Z4yAY.js.map

package/dist/chunks/{index-tags-DZ-gjMZc.js.map → index-tags-Dc_Z4yAY.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index-tags-DZ-gjMZc.js","sources":["../../src/components/index-tags.ts"],"sourcesContent":["// The component categories and their default tags (no imports: safe for lazy loaders).\n/** The component categories and their default tags. */\nexport const COMPONENT_CATEGORIES = {\n  reveal: ['usa-reveal', 'usa-stagger', 'usa-scroll-progress', 'usa-scrolly'],\n  text: ['usa-typewriter', 'usa-split-text', 'usa-scramble', 'usa-counter', 'usa-shimmer-text', 'usa-text-rotate', 'usa-wave-text', 'usa-glitch', 'usa-gradient-text', 'usa-handwriting', 'usa-scroll-highlight'],\n  interaction: ['usa-ripple', 'usa-magnetic', 'usa-tilt', 'usa-spotlight', 'usa-press', 'usa-toggle'],\n  feedback: ['usa-spinner', 'usa-skeleton', 'usa-progress', 'usa-toaster', 'usa-check'],\n  background: ['usa-aurora', 'usa-particles', 'usa-grain', 'usa-marquee', 'usa-acrylic', 'usa-grid-glow', 'usa-blobs', 'usa-water-ripple', 'usa-dot-network'],\n  transitions: ['usa-dialog', 'usa-accordion', 'usa-flip-list', 'usa-view-switch'],\n  physics: ['usa-spring', 'usa-draggable', 'usa-overscroll'],\n  cards: ['usa-card', 'usa-card-stack', 'usa-sticky-stack', 'usa-carousel-3d'],\n  click: ['usa-click', 'usa-button', 'usa-icon-morph', 'usa-like', 'usa-hold', 'usa-double-tap', 'usa-checkbox'],\n  ui: ['usa-tabs', 'usa-drawer', 'usa-bottom-sheet', 'usa-pull-refresh', 'usa-fab', 'usa-navbar', 'usa-slider', 'usa-rating', 'usa-tooltip', 'usa-popover', 'usa-badge', 'usa-avatar-stack'],\n  page: ['usa-cursor', 'usa-fullpage', 'usa-loading-bar', 'usa-back-to-top', 'usa-ambient', 'usa-splash', 'usa-auto-skeleton', 'usa-motion-switch'],\n  timeline: ['usa-timeline'],\n  gesture: ['usa-swipeable', 'usa-pinch-zoom'],\n} as const;\n\nexport type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;\n"],"names":[],"mappings":"AAAA;AACA;AACO,MAAM,oBAAoB,GAAG;IAClC,MAAM,EAAE,CAAC,YAAY,EAAE,aAAa,EAAE,qBAAqB,EAAE,aAAa,CAAC;IAC3E,IAAI,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,EAAE,cAAc,EAAE,aAAa,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,eAAe,EAAE,YAAY,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,sBAAsB,CAAC;AAC/M,IAAA,WAAW,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,eAAe,EAAE,WAAW,EAAE,YAAY,CAAC;IACnG,QAAQ,EAAE,CAAC,aAAa,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,WAAW,CAAC;AACrF,IAAA,UAAU,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,EAAE,eAAe,EAAE,WAAW,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;IAC3J,WAAW,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,iBAAiB,CAAC;AAChF,IAAA,OAAO,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,gBAAgB,CAAC;IAC1D,KAAK,EAAE,CAAC,UAAU,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;AAC5E,IAAA,KAAK,EAAE,CAAC,WAAW,EAAE,YAAY,EAAE,gBAAgB,EAAE,UAAU,EAAE,UAAU,EAAE,gBAAgB,EAAE,cAAc,CAAC;IAC9G,EAAE,EAAE,CAAC,UAAU,EAAE,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,SAAS,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,kBAAkB,CAAC;AAC1L,IAAA,IAAI,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,aAAa,EAAE,YAAY,EAAE,mBAAmB,EAAE,mBAAmB,CAAC;IACjJ,QAAQ,EAAE,CAAC,cAAc,CAAC;AAC1B,IAAA,OAAO,EAAE,CAAC,eAAe,EAAE,gBAAgB,CAAC;;;;;"}
+{"version":3,"file":"index-tags-Dc_Z4yAY.js","sources":["../../src/components/index-tags.ts"],"sourcesContent":["// The component categories and their default tags (no imports: safe for lazy loaders).\n/** The component categories and their default tags. */\nexport const COMPONENT_CATEGORIES = {\n  reveal: ['usa-reveal', 'usa-stagger', 'usa-scroll-progress', 'usa-scrolly'],\n  text: ['usa-typewriter', 'usa-split-text', 'usa-scramble', 'usa-counter', 'usa-shimmer-text', 'usa-text-rotate', 'usa-wave-text', 'usa-glitch', 'usa-gradient-text', 'usa-handwriting', 'usa-scroll-highlight'],\n  interaction: ['usa-ripple', 'usa-magnetic', 'usa-tilt', 'usa-spotlight', 'usa-press', 'usa-toggle'],\n  feedback: ['usa-spinner', 'usa-skeleton', 'usa-progress', 'usa-toaster', 'usa-check'],\n  background: ['usa-aurora', 'usa-particles', 'usa-grain', 'usa-marquee', 'usa-acrylic', 'usa-grid-glow', 'usa-blobs', 'usa-water-ripple', 'usa-dot-network'],\n  transitions: ['usa-dialog', 'usa-accordion', 'usa-flip-list', 'usa-view-switch'],\n  physics: ['usa-spring', 'usa-draggable', 'usa-overscroll'],\n  cards: ['usa-card', 'usa-card-stack', 'usa-sticky-stack', 'usa-carousel-3d'],\n  click: ['usa-click', 'usa-button', 'usa-icon-morph', 'usa-like', 'usa-hold', 'usa-double-tap', 'usa-checkbox'],\n  ui: ['usa-tabs', 'usa-drawer', 'usa-bottom-sheet', 'usa-pull-refresh', 'usa-fab', 'usa-navbar', 'usa-slider', 'usa-rating', 'usa-tooltip', 'usa-popover', 'usa-badge', 'usa-avatar-stack'],\n  page: ['usa-cursor', 'usa-fullpage', 'usa-loading-bar', 'usa-back-to-top', 'usa-ambient', 'usa-splash', 'usa-auto-skeleton', 'usa-motion-switch'],\n  timeline: ['usa-timeline'],\n  gesture: ['usa-swipeable', 'usa-pinch-zoom'],\n  svg: ['usa-draw', 'usa-morph', 'usa-mask-reveal', 'usa-anim-icon'],\n} as const;\n\nexport type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;\n"],"names":[],"mappings":"AAAA;AACA;AACO,MAAM,oBAAoB,GAAG;IAClC,MAAM,EAAE,CAAC,YAAY,EAAE,aAAa,EAAE,qBAAqB,EAAE,aAAa,CAAC;IAC3E,IAAI,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,EAAE,cAAc,EAAE,aAAa,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,eAAe,EAAE,YAAY,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,sBAAsB,CAAC;AAC/M,IAAA,WAAW,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,eAAe,EAAE,WAAW,EAAE,YAAY,CAAC;IACnG,QAAQ,EAAE,CAAC,aAAa,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,WAAW,CAAC;AACrF,IAAA,UAAU,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,EAAE,eAAe,EAAE,WAAW,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;IAC3J,WAAW,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,iBAAiB,CAAC;AAChF,IAAA,OAAO,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,gBAAgB,CAAC;IAC1D,KAAK,EAAE,CAAC,UAAU,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;AAC5E,IAAA,KAAK,EAAE,CAAC,WAAW,EAAE,YAAY,EAAE,gBAAgB,EAAE,UAAU,EAAE,UAAU,EAAE,gBAAgB,EAAE,cAAc,CAAC;IAC9G,EAAE,EAAE,CAAC,UAAU,EAAE,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,SAAS,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,kBAAkB,CAAC;AAC1L,IAAA,IAAI,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,aAAa,EAAE,YAAY,EAAE,mBAAmB,EAAE,mBAAmB,CAAC;IACjJ,QAAQ,EAAE,CAAC,cAAc,CAAC;AAC1B,IAAA,OAAO,EAAE,CAAC,eAAe,EAAE,gBAAgB,CAAC;IAC5C,GAAG,EAAE,CAAC,UAAU,EAAE,WAAW,EAAE,iBAAiB,EAAE,eAAe,CAAC;;;;;"}

package/dist/components/jsx.d.cts

@@ -13,6 +13,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"];
 };
 
 /**

package/dist/components/jsx.d.ts

@@ -13,6 +13,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"];
 };
 
 /**

package/dist/components/lazy.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var indexTags = require('../chunks/index-tags-DCTX4F9b.cjs');
+var indexTags = require('../chunks/index-tags-Cz4iTBEK.cjs');
 
 /**
  * use-scroll-animate/components/lazy — lazy, per-category registration (v2.9).
@@ -29,6 +29,7 @@ const LOADERS = {
     page: () => Promise.resolve().then(function () { return require('./page.cjs'); }),
     timeline: () => Promise.resolve().then(function () { return require('./timeline.cjs'); }),
     gesture: () => Promise.resolve().then(function () { return require('./gesture.cjs'); }),
+    svg: () => Promise.resolve().then(function () { return require('./svg.cjs'); }),
 };
 const TAG_TO_CAT = new Map();
 for (const [cat, tags] of Object.entries(indexTags.COMPONENT_CATEGORIES))

package/dist/components/lazy.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"lazy.cjs","sources":["../../src/components/lazy.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/lazy — lazy, per-category registration (v2.9).\n *\n * `lazyDefine()` scans the page (and watches it with a MutationObserver) for\n * `<usa-*>` tags that are not registered yet and dynamically imports only the\n * categories they belong to. Bundlers split each category into its own chunk,\n * so a page that only uses `<usa-button>` loads just the click category.\n *\n * ```js\n * import { lazyDefine } from 'use-scroll-animate/components/lazy';\n * lazyDefine(); // returns a stop() function\n * ```\n */\nimport { COMPONENT_CATEGORIES, type ComponentCategory } from './index-tags';\n\nconst LOADERS: Record<ComponentCategory, () => Promise<Record<string, any>>> = {\n  reveal: () => import('./reveal/index'),\n  text: () => import('./text/index'),\n  interaction: () => import('./interaction/index'),\n  feedback: () => import('./feedback/index'),\n  background: () => import('./background/index'),\n  transitions: () => import('./transitions/index'),\n  physics: () => import('./physics/index'),\n  cards: () => import('./cards/index'),\n  click: () => import('./click/index'),\n  ui: () => import('./ui/index'),\n  page: () => import('./page/index'),\n  timeline: () => import('./timeline/index'),\n  gesture: () => import('./gesture/index'),\n};\n\nconst TAG_TO_CAT = new Map<string, ComponentCategory>();\nfor (const [cat, tags] of Object.entries(COMPONENT_CATEGORIES)) for (const t of tags) TAG_TO_CAT.set(t, cat as ComponentCategory);\nconst loaded = new Map<ComponentCategory, Promise<void>>();\n\n/** Category of a tag (`usa-button` → `click`), or `null`. */\nexport const categoryOfTag = (tag: string): ComponentCategory | null => TAG_TO_CAT.get(tag.toLowerCase()) ?? null;\n\n/** Load and register one category (once). */\nexport function loadCategory(cat: ComponentCategory): Promise<void> {\n  let p = loaded.get(cat);\n  if (!p) {\n    p = LOADERS[cat]().then((m) => {\n      const fn = Object.keys(m).find((k) => /^define[A-Z]\\w*Components$/.test(k));\n      if (fn) m[fn]();\n    });\n    loaded.set(cat, p);\n  }\n  return p;\n}\n\n/** Register the categories needed by the `<usa-*>` tags under `root`. Resolves when they are defined. */\nexport async function defineUsed(root: ParentNode = document): Promise<ComponentCategory[]> {\n  if (typeof customElements === 'undefined') return [];\n  const cats = new Set<ComponentCategory>();\n  const scan = (el: Element) => {\n    const c = el.localName.startsWith('usa-') && !customElements.get(el.localName) ? categoryOfTag(el.localName) : null;\n    if (c) cats.add(c);\n  };\n  if ((root as Element).localName) scan(root as Element);\n  root.querySelectorAll('*').forEach(scan);\n  await Promise.all([...cats].map(loadCategory));\n  return [...cats];\n}\n\n/** `defineUsed()` now and whenever new `<usa-*>` elements are added. Returns a stop function. */\nexport function lazyDefine(root: ParentNode = typeof document !== 'undefined' ? document : (undefined as any)): () => void {\n  if (!root || typeof MutationObserver === 'undefined') return () => undefined;\n  defineUsed(root);\n  const mo = new MutationObserver((records) => {\n    for (const r of records) r.addedNodes.forEach((n) => n.nodeType === 1 && defineUsed(n as Element));\n  });\n  mo.observe(root as Node, { childList: true, subtree: true });\n  return () => mo.disconnect();\n}\n"],"names":["COMPONENT_CATEGORIES"],"mappings":"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"}
+{"version":3,"file":"lazy.cjs","sources":["../../src/components/lazy.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/lazy — lazy, per-category registration (v2.9).\n *\n * `lazyDefine()` scans the page (and watches it with a MutationObserver) for\n * `<usa-*>` tags that are not registered yet and dynamically imports only the\n * categories they belong to. Bundlers split each category into its own chunk,\n * so a page that only uses `<usa-button>` loads just the click category.\n *\n * ```js\n * import { lazyDefine } from 'use-scroll-animate/components/lazy';\n * lazyDefine(); // returns a stop() function\n * ```\n */\nimport { COMPONENT_CATEGORIES, type ComponentCategory } from './index-tags';\n\nconst LOADERS: Record<ComponentCategory, () => Promise<Record<string, any>>> = {\n  reveal: () => import('./reveal/index'),\n  text: () => import('./text/index'),\n  interaction: () => import('./interaction/index'),\n  feedback: () => import('./feedback/index'),\n  background: () => import('./background/index'),\n  transitions: () => import('./transitions/index'),\n  physics: () => import('./physics/index'),\n  cards: () => import('./cards/index'),\n  click: () => import('./click/index'),\n  ui: () => import('./ui/index'),\n  page: () => import('./page/index'),\n  timeline: () => import('./timeline/index'),\n  gesture: () => import('./gesture/index'),\n  svg: () => import('./svg/index'),\n};\n\nconst TAG_TO_CAT = new Map<string, ComponentCategory>();\nfor (const [cat, tags] of Object.entries(COMPONENT_CATEGORIES)) for (const t of tags) TAG_TO_CAT.set(t, cat as ComponentCategory);\nconst loaded = new Map<ComponentCategory, Promise<void>>();\n\n/** Category of a tag (`usa-button` → `click`), or `null`. */\nexport const categoryOfTag = (tag: string): ComponentCategory | null => TAG_TO_CAT.get(tag.toLowerCase()) ?? null;\n\n/** Load and register one category (once). */\nexport function loadCategory(cat: ComponentCategory): Promise<void> {\n  let p = loaded.get(cat);\n  if (!p) {\n    p = LOADERS[cat]().then((m) => {\n      const fn = Object.keys(m).find((k) => /^define[A-Z]\\w*Components$/.test(k));\n      if (fn) m[fn]();\n    });\n    loaded.set(cat, p);\n  }\n  return p;\n}\n\n/** Register the categories needed by the `<usa-*>` tags under `root`. Resolves when they are defined. */\nexport async function defineUsed(root: ParentNode = document): Promise<ComponentCategory[]> {\n  if (typeof customElements === 'undefined') return [];\n  const cats = new Set<ComponentCategory>();\n  const scan = (el: Element) => {\n    const c = el.localName.startsWith('usa-') && !customElements.get(el.localName) ? categoryOfTag(el.localName) : null;\n    if (c) cats.add(c);\n  };\n  if ((root as Element).localName) scan(root as Element);\n  root.querySelectorAll('*').forEach(scan);\n  await Promise.all([...cats].map(loadCategory));\n  return [...cats];\n}\n\n/** `defineUsed()` now and whenever new `<usa-*>` elements are added. Returns a stop function. */\nexport function lazyDefine(root: ParentNode = typeof document !== 'undefined' ? document : (undefined as any)): () => void {\n  if (!root || typeof MutationObserver === 'undefined') return () => undefined;\n  defineUsed(root);\n  const mo = new MutationObserver((records) => {\n    for (const r of records) r.addedNodes.forEach((n) => n.nodeType === 1 && defineUsed(n as Element));\n  });\n  mo.observe(root as Node, { childList: true, subtree: true });\n  return () => mo.disconnect();\n}\n"],"names":["COMPONENT_CATEGORIES"],"mappings":"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"}

package/dist/components/lazy.d.cts

@@ -13,6 +13,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/lazy.d.ts

@@ -13,6 +13,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/lazy.js

@@ -1,4 +1,4 @@
-import { C as COMPONENT_CATEGORIES } from '../chunks/index-tags-DZ-gjMZc.js';
+import { C as COMPONENT_CATEGORIES } from '../chunks/index-tags-Dc_Z4yAY.js';
 
 /**
  * use-scroll-animate/components/lazy — lazy, per-category registration (v2.9).
@@ -27,6 +27,7 @@ const LOADERS = {
     page: () => import('./page.js'),
     timeline: () => import('./timeline.js'),
     gesture: () => import('./gesture.js'),
+    svg: () => import('./svg.js'),
 };
 const TAG_TO_CAT = new Map();
 for (const [cat, tags] of Object.entries(COMPONENT_CATEGORIES))

package/dist/components/lazy.js.map

@@ -1 +1 @@
-{"version":3,"file":"lazy.js","sources":["../../src/components/lazy.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/lazy — lazy, per-category registration (v2.9).\n *\n * `lazyDefine()` scans the page (and watches it with a MutationObserver) for\n * `<usa-*>` tags that are not registered yet and dynamically imports only the\n * categories they belong to. Bundlers split each category into its own chunk,\n * so a page that only uses `<usa-button>` loads just the click category.\n *\n * ```js\n * import { lazyDefine } from 'use-scroll-animate/components/lazy';\n * lazyDefine(); // returns a stop() function\n * ```\n */\nimport { COMPONENT_CATEGORIES, type ComponentCategory } from './index-tags';\n\nconst LOADERS: Record<ComponentCategory, () => Promise<Record<string, any>>> = {\n  reveal: () => import('./reveal/index'),\n  text: () => import('./text/index'),\n  interaction: () => import('./interaction/index'),\n  feedback: () => import('./feedback/index'),\n  background: () => import('./background/index'),\n  transitions: () => import('./transitions/index'),\n  physics: () => import('./physics/index'),\n  cards: () => import('./cards/index'),\n  click: () => import('./click/index'),\n  ui: () => import('./ui/index'),\n  page: () => import('./page/index'),\n  timeline: () => import('./timeline/index'),\n  gesture: () => import('./gesture/index'),\n};\n\nconst TAG_TO_CAT = new Map<string, ComponentCategory>();\nfor (const [cat, tags] of Object.entries(COMPONENT_CATEGORIES)) for (const t of tags) TAG_TO_CAT.set(t, cat as ComponentCategory);\nconst loaded = new Map<ComponentCategory, Promise<void>>();\n\n/** Category of a tag (`usa-button` → `click`), or `null`. */\nexport const categoryOfTag = (tag: string): ComponentCategory | null => TAG_TO_CAT.get(tag.toLowerCase()) ?? null;\n\n/** Load and register one category (once). */\nexport function loadCategory(cat: ComponentCategory): Promise<void> {\n  let p = loaded.get(cat);\n  if (!p) {\n    p = LOADERS[cat]().then((m) => {\n      const fn = Object.keys(m).find((k) => /^define[A-Z]\\w*Components$/.test(k));\n      if (fn) m[fn]();\n    });\n    loaded.set(cat, p);\n  }\n  return p;\n}\n\n/** Register the categories needed by the `<usa-*>` tags under `root`. Resolves when they are defined. */\nexport async function defineUsed(root: ParentNode = document): Promise<ComponentCategory[]> {\n  if (typeof customElements === 'undefined') return [];\n  const cats = new Set<ComponentCategory>();\n  const scan = (el: Element) => {\n    const c = el.localName.startsWith('usa-') && !customElements.get(el.localName) ? categoryOfTag(el.localName) : null;\n    if (c) cats.add(c);\n  };\n  if ((root as Element).localName) scan(root as Element);\n  root.querySelectorAll('*').forEach(scan);\n  await Promise.all([...cats].map(loadCategory));\n  return [...cats];\n}\n\n/** `defineUsed()` now and whenever new `<usa-*>` elements are added. Returns a stop function. */\nexport function lazyDefine(root: ParentNode = typeof document !== 'undefined' ? document : (undefined as any)): () => void {\n  if (!root || typeof MutationObserver === 'undefined') return () => undefined;\n  defineUsed(root);\n  const mo = new MutationObserver((records) => {\n    for (const r of records) r.addedNodes.forEach((n) => n.nodeType === 1 && defineUsed(n as Element));\n  });\n  mo.observe(root as Node, { childList: true, subtree: true });\n  return () => mo.disconnect();\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"lazy.js","sources":["../../src/components/lazy.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/lazy — lazy, per-category registration (v2.9).\n *\n * `lazyDefine()` scans the page (and watches it with a MutationObserver) for\n * `<usa-*>` tags that are not registered yet and dynamically imports only the\n * categories they belong to. Bundlers split each category into its own chunk,\n * so a page that only uses `<usa-button>` loads just the click category.\n *\n * ```js\n * import { lazyDefine } from 'use-scroll-animate/components/lazy';\n * lazyDefine(); // returns a stop() function\n * ```\n */\nimport { COMPONENT_CATEGORIES, type ComponentCategory } from './index-tags';\n\nconst LOADERS: Record<ComponentCategory, () => Promise<Record<string, any>>> = {\n  reveal: () => import('./reveal/index'),\n  text: () => import('./text/index'),\n  interaction: () => import('./interaction/index'),\n  feedback: () => import('./feedback/index'),\n  background: () => import('./background/index'),\n  transitions: () => import('./transitions/index'),\n  physics: () => import('./physics/index'),\n  cards: () => import('./cards/index'),\n  click: () => import('./click/index'),\n  ui: () => import('./ui/index'),\n  page: () => import('./page/index'),\n  timeline: () => import('./timeline/index'),\n  gesture: () => import('./gesture/index'),\n  svg: () => import('./svg/index'),\n};\n\nconst TAG_TO_CAT = new Map<string, ComponentCategory>();\nfor (const [cat, tags] of Object.entries(COMPONENT_CATEGORIES)) for (const t of tags) TAG_TO_CAT.set(t, cat as ComponentCategory);\nconst loaded = new Map<ComponentCategory, Promise<void>>();\n\n/** Category of a tag (`usa-button` → `click`), or `null`. */\nexport const categoryOfTag = (tag: string): ComponentCategory | null => TAG_TO_CAT.get(tag.toLowerCase()) ?? null;\n\n/** Load and register one category (once). */\nexport function loadCategory(cat: ComponentCategory): Promise<void> {\n  let p = loaded.get(cat);\n  if (!p) {\n    p = LOADERS[cat]().then((m) => {\n      const fn = Object.keys(m).find((k) => /^define[A-Z]\\w*Components$/.test(k));\n      if (fn) m[fn]();\n    });\n    loaded.set(cat, p);\n  }\n  return p;\n}\n\n/** Register the categories needed by the `<usa-*>` tags under `root`. Resolves when they are defined. */\nexport async function defineUsed(root: ParentNode = document): Promise<ComponentCategory[]> {\n  if (typeof customElements === 'undefined') return [];\n  const cats = new Set<ComponentCategory>();\n  const scan = (el: Element) => {\n    const c = el.localName.startsWith('usa-') && !customElements.get(el.localName) ? categoryOfTag(el.localName) : null;\n    if (c) cats.add(c);\n  };\n  if ((root as Element).localName) scan(root as Element);\n  root.querySelectorAll('*').forEach(scan);\n  await Promise.all([...cats].map(loadCategory));\n  return [...cats];\n}\n\n/** `defineUsed()` now and whenever new `<usa-*>` elements are added. Returns a stop function. */\nexport function lazyDefine(root: ParentNode = typeof document !== 'undefined' ? document : (undefined as any)): () => void {\n  if (!root || typeof MutationObserver === 'undefined') return () => undefined;\n  defineUsed(root);\n  const mo = new MutationObserver((records) => {\n    for (const r of records) r.addedNodes.forEach((n) => n.nodeType === 1 && defineUsed(n as Element));\n  });\n  mo.observe(root as Node, { childList: true, subtree: true });\n  return () => mo.disconnect();\n}\n"],"names":[],"mappings":"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"}

package/dist/components/react.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var indexTags = require('../chunks/index-tags-DCTX4F9b.cjs');
+var indexTags = require('../chunks/index-tags-Cz4iTBEK.cjs');
 
 /**
  * use-scroll-animate/components/react — React wrappers for every `<usa-*>`

package/dist/components/react.js

@@ -1,4 +1,4 @@
-import { C as COMPONENT_CATEGORIES } from '../chunks/index-tags-DZ-gjMZc.js';
+import { C as COMPONENT_CATEGORIES } from '../chunks/index-tags-Dc_Z4yAY.js';
 
 /**
  * use-scroll-animate/components/react — React wrappers for every `<usa-*>`

package/dist/components/svg.cjs

@@ -0,0 +1,355 @@
+'use strict';
+
+var base = require('../chunks/base-CXx7jZ-o.cjs');
+
+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) * base.motionScale();
+    const prev = path.__usaMorph;
+    if (prev)
+        base.caf(prev);
+    if (base.prefersReducedMotion() || dur <= 0 || from === to) {
+        path.setAttribute('d', to);
+        return Promise.resolve();
+    }
+    const fn = o.easing || ease;
+    const t0 = base.now();
+    return new Promise((resolve) => {
+        const step = () => {
+            const t = base.clamp((base.now() - t0) / dur, 0, 1);
+            path.setAttribute('d', interpolatePath(from, to, fn(t)));
+            if (t < 1)
+                path.__usaMorph = base.raf(step);
+            else {
+                path.__usaMorph = 0;
+                resolve();
+            }
+        };
+        path.__usaMorph = base.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 = base.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 = base.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 base.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 = base.clamp(p, 0, 1);
+            this._set(this._p);
+            this.toggleAttribute('data-drawn', this._p >= 1);
+        }
+        play() {
+            base.caf(this._id);
+            if (this.reduced) {
+                this.progress = 1;
+                return void this.emit('complete');
+            }
+            const dur = this.num('duration', 1600) * base.motionScale();
+            const t0 = base.now();
+            this.progress = 0;
+            const step = () => {
+                this.progress = (base.now() - t0) / dur;
+                if (this._p < 1)
+                    this._id = base.raf(step);
+                else
+                    this.emit('complete');
+            };
+            this._id = base.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(() => base.caf(this._id));
+        }
+    }, { id: 'svg', text: css });
+}
+
+function defineMorph(tag = 'usa-morph') {
+    return base.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 base.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: base.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 base.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();
+}
+
+exports.configureComponents = base.configureComponents;
+exports.prefersReducedMotion = base.prefersReducedMotion;
+exports.ANIM_ICONS = ANIM_ICONS;
+exports.MASK_SHAPES = MASK_SHAPES;
+exports.defineAnimIcon = defineAnimIcon;
+exports.defineDraw = defineDraw;
+exports.defineMaskReveal = defineMaskReveal;
+exports.defineMorph = defineMorph;
+exports.defineSvgComponents = defineSvgComponents;
+exports.drawLines = drawLines;
+exports.interpolatePath = interpolatePath;
+exports.morphTo = morphTo;
+exports.pathsCompatible = pathsCompatible;
+//# sourceMappingURL=svg.cjs.map