motionary 0.0.0-stage → 6.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +803 -0
- package/LICENSE +21 -0
- package/README.md +218 -2
- package/README_ja.md +219 -0
- package/README_zh.md +219 -0
- package/bin/usa-codemod-5.mjs +79 -0
- package/bin/usa-codemod-6.mjs +146 -0
- package/dist/chunks/base-BaQV-2ha.cjs +436 -0
- package/dist/chunks/base-BaQV-2ha.cjs.map +1 -0
- package/dist/chunks/base-C_3cAoRz.js +404 -0
- package/dist/chunks/base-C_3cAoRz.js.map +1 -0
- package/dist/chunks/bind-B_CTL6Qn.js +22 -0
- package/dist/chunks/bind-B_CTL6Qn.js.map +1 -0
- package/dist/chunks/bind-Ui43-n2d.cjs +25 -0
- package/dist/chunks/bind-Ui43-n2d.cjs.map +1 -0
- package/dist/chunks/core-B5T0dhFH.cjs +920 -0
- package/dist/chunks/core-B5T0dhFH.cjs.map +1 -0
- package/dist/chunks/core-BGAyaY6L.cjs +265 -0
- package/dist/chunks/core-BGAyaY6L.cjs.map +1 -0
- package/dist/chunks/core-D7cVumUu.js +909 -0
- package/dist/chunks/core-D7cVumUu.js.map +1 -0
- package/dist/chunks/core-VEBw36QK.js +260 -0
- package/dist/chunks/core-VEBw36QK.js.map +1 -0
- package/dist/chunks/core-ps8uvYuN.js +181 -0
- package/dist/chunks/core-ps8uvYuN.js.map +1 -0
- package/dist/chunks/core-zq17EeCI.cjs +185 -0
- package/dist/chunks/core-zq17EeCI.cjs.map +1 -0
- package/dist/chunks/fx-Bs6IrV4Q.js +109 -0
- package/dist/chunks/fx-Bs6IrV4Q.js.map +1 -0
- package/dist/chunks/fx-lBGVtQO1.cjs +114 -0
- package/dist/chunks/fx-lBGVtQO1.cjs.map +1 -0
- package/dist/chunks/generative-D2YyhaeO.js +336 -0
- package/dist/chunks/generative-D2YyhaeO.js.map +1 -0
- package/dist/chunks/generative-DzIZq-_g.cjs +348 -0
- package/dist/chunks/generative-DzIZq-_g.cjs.map +1 -0
- package/dist/chunks/gpu-Bu7qwugO.js +380 -0
- package/dist/chunks/gpu-Bu7qwugO.js.map +1 -0
- package/dist/chunks/gpu-CenK2l6b.cjs +387 -0
- package/dist/chunks/gpu-CenK2l6b.cjs.map +1 -0
- package/dist/chunks/index-tags-DucKMQr_.js +26 -0
- package/dist/chunks/index-tags-DucKMQr_.js.map +1 -0
- package/dist/chunks/index-tags-wv0R_vkO.cjs +28 -0
- package/dist/chunks/index-tags-wv0R_vkO.cjs.map +1 -0
- package/dist/chunks/presets-BYBVJVeP.js +226 -0
- package/dist/chunks/presets-BYBVJVeP.js.map +1 -0
- package/dist/chunks/presets-CUHys3sK.cjs +233 -0
- package/dist/chunks/presets-CUHys3sK.cjs.map +1 -0
- package/dist/chunks/registry-CKNLQpwd.js +121 -0
- package/dist/chunks/registry-CKNLQpwd.js.map +1 -0
- package/dist/chunks/registry-DehBVRDV.cjs +131 -0
- package/dist/chunks/registry-DehBVRDV.cjs.map +1 -0
- package/dist/chunks/spring-CbvHfVtP.js +219 -0
- package/dist/chunks/spring-CbvHfVtP.js.map +1 -0
- package/dist/chunks/spring-Dgx187Vh.cjs +232 -0
- package/dist/chunks/spring-Dgx187Vh.cjs.map +1 -0
- package/dist/chunks/stagger-CCFyhzSw.cjs +86 -0
- package/dist/chunks/stagger-CCFyhzSw.cjs.map +1 -0
- package/dist/chunks/stagger-DtMKo2SK.js +84 -0
- package/dist/chunks/stagger-DtMKo2SK.js.map +1 -0
- package/dist/chunks/variants-BhjyddG8.cjs +39 -0
- package/dist/chunks/variants-BhjyddG8.cjs.map +1 -0
- package/dist/chunks/variants-DRlKVHvu.js +35 -0
- package/dist/chunks/variants-DRlKVHvu.js.map +1 -0
- package/dist/components/a11y.cjs +276 -0
- package/dist/components/a11y.cjs.map +1 -0
- package/dist/components/a11y.d.cts +131 -0
- package/dist/components/a11y.d.ts +131 -0
- package/dist/components/a11y.js +259 -0
- package/dist/components/a11y.js.map +1 -0
- package/dist/components/angular.cjs +76 -0
- package/dist/components/angular.cjs.map +1 -0
- package/dist/components/angular.d.cts +1734 -0
- package/dist/components/angular.d.ts +1734 -0
- package/dist/components/angular.js +70 -0
- package/dist/components/angular.js.map +1 -0
- package/dist/components/background.cjs +659 -0
- package/dist/components/background.cjs.map +1 -0
- package/dist/components/background.css +9 -0
- package/dist/components/background.d.cts +166 -0
- package/dist/components/background.d.ts +166 -0
- package/dist/components/background.js +647 -0
- package/dist/components/background.js.map +1 -0
- package/dist/components/bridge.cjs +154 -0
- package/dist/components/bridge.cjs.map +1 -0
- package/dist/components/bridge.d.cts +63 -0
- package/dist/components/bridge.d.ts +63 -0
- package/dist/components/bridge.js +147 -0
- package/dist/components/bridge.js.map +1 -0
- package/dist/components/cards.cjs +561 -0
- package/dist/components/cards.cjs.map +1 -0
- package/dist/components/cards.css +6 -0
- package/dist/components/cards.d.cts +115 -0
- package/dist/components/cards.d.ts +115 -0
- package/dist/components/cards.js +554 -0
- package/dist/components/cards.js.map +1 -0
- package/dist/components/click.cjs +877 -0
- package/dist/components/click.cjs.map +1 -0
- package/dist/components/click.css +9 -0
- package/dist/components/click.d.cts +218 -0
- package/dist/components/click.d.ts +218 -0
- package/dist/components/click.js +863 -0
- package/dist/components/click.js.map +1 -0
- package/dist/components/depth.cjs +250 -0
- package/dist/components/depth.cjs.map +1 -0
- package/dist/components/depth.css +3 -0
- package/dist/components/depth.d.cts +86 -0
- package/dist/components/depth.d.ts +86 -0
- package/dist/components/depth.js +242 -0
- package/dist/components/depth.js.map +1 -0
- package/dist/components/effects.cjs +2258 -0
- package/dist/components/effects.cjs.map +1 -0
- package/dist/components/effects.d.cts +545 -0
- package/dist/components/effects.d.ts +545 -0
- package/dist/components/effects.js +2200 -0
- package/dist/components/effects.js.map +1 -0
- package/dist/components/feedback.cjs +442 -0
- package/dist/components/feedback.cjs.map +1 -0
- package/dist/components/feedback.css +7 -0
- package/dist/components/feedback.d.cts +144 -0
- package/dist/components/feedback.d.ts +144 -0
- package/dist/components/feedback.js +433 -0
- package/dist/components/feedback.js.map +1 -0
- package/dist/components/fx-gpu.cjs +12 -0
- package/dist/components/fx-gpu.cjs.map +1 -0
- package/dist/components/fx-gpu.d.cts +63 -0
- package/dist/components/fx-gpu.d.ts +63 -0
- package/dist/components/fx-gpu.js +5 -0
- package/dist/components/fx-gpu.js.map +1 -0
- package/dist/components/fx.cjs +169 -0
- package/dist/components/fx.cjs.map +1 -0
- package/dist/components/fx.css +3 -0
- package/dist/components/fx.d.cts +114 -0
- package/dist/components/fx.d.ts +114 -0
- package/dist/components/fx.js +156 -0
- package/dist/components/fx.js.map +1 -0
- package/dist/components/fx2.cjs +25 -0
- package/dist/components/fx2.cjs.map +1 -0
- package/dist/components/fx2.d.cts +136 -0
- package/dist/components/fx2.d.ts +136 -0
- package/dist/components/fx2.js +17 -0
- package/dist/components/fx2.js.map +1 -0
- package/dist/components/gesture.cjs +209 -0
- package/dist/components/gesture.cjs.map +1 -0
- package/dist/components/gesture.css +3 -0
- package/dist/components/gesture.d.cts +134 -0
- package/dist/components/gesture.d.ts +134 -0
- package/dist/components/gesture.js +203 -0
- package/dist/components/gesture.js.map +1 -0
- package/dist/components/interaction.cjs +424 -0
- package/dist/components/interaction.cjs.map +1 -0
- package/dist/components/interaction.css +8 -0
- package/dist/components/interaction.d.cts +115 -0
- package/dist/components/interaction.d.ts +115 -0
- package/dist/components/interaction.js +416 -0
- package/dist/components/interaction.js.map +1 -0
- package/dist/components/jsx.cjs +3 -0
- package/dist/components/jsx.cjs.map +1 -0
- package/dist/components/jsx.d.cts +53 -0
- package/dist/components/jsx.d.ts +53 -0
- package/dist/components/jsx.js +2 -0
- package/dist/components/jsx.js.map +1 -0
- package/dist/components/layout.cjs +257 -0
- package/dist/components/layout.cjs.map +1 -0
- package/dist/components/layout.css +3 -0
- package/dist/components/layout.d.cts +99 -0
- package/dist/components/layout.d.ts +99 -0
- package/dist/components/layout.js +249 -0
- package/dist/components/layout.js.map +1 -0
- package/dist/components/lazy.cjs +92 -0
- package/dist/components/lazy.cjs.map +1 -0
- package/dist/components/lazy.d.cts +48 -0
- package/dist/components/lazy.d.ts +48 -0
- package/dist/components/lazy.js +87 -0
- package/dist/components/lazy.js.map +1 -0
- package/dist/components/lite.cjs +11095 -0
- package/dist/components/lite.cjs.map +1 -0
- package/dist/components/lite.d.cts +4 -0
- package/dist/components/lite.d.ts +4 -0
- package/dist/components/lite.js +10827 -0
- package/dist/components/lite.js.map +1 -0
- package/dist/components/packs.cjs +192 -0
- package/dist/components/packs.cjs.map +1 -0
- package/dist/components/packs.css +3 -0
- package/dist/components/packs.d.cts +72 -0
- package/dist/components/packs.d.ts +72 -0
- package/dist/components/packs.js +184 -0
- package/dist/components/packs.js.map +1 -0
- package/dist/components/page.cjs +824 -0
- package/dist/components/page.cjs.map +1 -0
- package/dist/components/page.css +11 -0
- package/dist/components/page.d.cts +249 -0
- package/dist/components/page.d.ts +249 -0
- package/dist/components/page.js +799 -0
- package/dist/components/page.js.map +1 -0
- package/dist/components/perf.cjs +120 -0
- package/dist/components/perf.cjs.map +1 -0
- package/dist/components/perf.d.cts +98 -0
- package/dist/components/perf.d.ts +98 -0
- package/dist/components/perf.js +110 -0
- package/dist/components/perf.js.map +1 -0
- package/dist/components/physics.cjs +448 -0
- package/dist/components/physics.cjs.map +1 -0
- package/dist/components/physics.css +5 -0
- package/dist/components/physics.d.cts +189 -0
- package/dist/components/physics.d.ts +189 -0
- package/dist/components/physics.js +430 -0
- package/dist/components/physics.js.map +1 -0
- package/dist/components/react.cjs +96 -0
- package/dist/components/react.cjs.map +1 -0
- package/dist/components/react.d.cts +18 -0
- package/dist/components/react.d.ts +18 -0
- package/dist/components/react.js +91 -0
- package/dist/components/react.js.map +1 -0
- package/dist/components/reveal.cjs +362 -0
- package/dist/components/reveal.cjs.map +1 -0
- package/dist/components/reveal.css +5 -0
- package/dist/components/reveal.d.cts +105 -0
- package/dist/components/reveal.d.ts +105 -0
- package/dist/components/reveal.js +353 -0
- package/dist/components/reveal.js.map +1 -0
- package/dist/components/solid.cjs +86 -0
- package/dist/components/solid.cjs.map +1 -0
- package/dist/components/solid.d.cts +1751 -0
- package/dist/components/solid.d.ts +1751 -0
- package/dist/components/solid.js +82 -0
- package/dist/components/solid.js.map +1 -0
- package/dist/components/svelte.cjs +68 -0
- package/dist/components/svelte.cjs.map +1 -0
- package/dist/components/svelte.d.cts +1733 -0
- package/dist/components/svelte.d.ts +1733 -0
- package/dist/components/svelte.js +64 -0
- package/dist/components/svelte.js.map +1 -0
- package/dist/components/svg.cjs +359 -0
- package/dist/components/svg.cjs.map +1 -0
- package/dist/components/svg.css +3 -0
- package/dist/components/svg.d.cts +113 -0
- package/dist/components/svg.d.ts +113 -0
- package/dist/components/svg.js +347 -0
- package/dist/components/svg.js.map +1 -0
- package/dist/components/text.cjs +968 -0
- package/dist/components/text.cjs.map +1 -0
- package/dist/components/text.css +8 -0
- package/dist/components/text.d.cts +342 -0
- package/dist/components/text.d.ts +342 -0
- package/dist/components/text.js +947 -0
- package/dist/components/text.js.map +1 -0
- package/dist/components/timeline.cjs +109 -0
- package/dist/components/timeline.cjs.map +1 -0
- package/dist/components/timeline.css +3 -0
- package/dist/components/timeline.d.cts +155 -0
- package/dist/components/timeline.d.ts +155 -0
- package/dist/components/timeline.js +103 -0
- package/dist/components/timeline.js.map +1 -0
- package/dist/components/tokens.cjs +226 -0
- package/dist/components/tokens.cjs.map +1 -0
- package/dist/components/tokens.d.cts +74 -0
- package/dist/components/tokens.d.ts +74 -0
- package/dist/components/tokens.js +211 -0
- package/dist/components/tokens.js.map +1 -0
- package/dist/components/transitions.cjs +430 -0
- package/dist/components/transitions.cjs.map +1 -0
- package/dist/components/transitions.css +5 -0
- package/dist/components/transitions.d.cts +126 -0
- package/dist/components/transitions.d.ts +126 -0
- package/dist/components/transitions.js +423 -0
- package/dist/components/transitions.js.map +1 -0
- package/dist/components/ui.cjs +1050 -0
- package/dist/components/ui.cjs.map +1 -0
- package/dist/components/ui.css +14 -0
- package/dist/components/ui.d.cts +224 -0
- package/dist/components/ui.d.ts +224 -0
- package/dist/components/ui.js +1034 -0
- package/dist/components/ui.js.map +1 -0
- package/dist/components/vue.cjs +67 -0
- package/dist/components/vue.cjs.map +1 -0
- package/dist/components/vue.d.cts +1722 -0
- package/dist/components/vue.d.ts +1722 -0
- package/dist/components/vue.js +64 -0
- package/dist/components/vue.js.map +1 -0
- package/dist/components/webgl.cjs +459 -0
- package/dist/components/webgl.cjs.map +1 -0
- package/dist/components/webgl.css +3 -0
- package/dist/components/webgl.d.cts +133 -0
- package/dist/components/webgl.d.ts +133 -0
- package/dist/components/webgl.js +442 -0
- package/dist/components/webgl.js.map +1 -0
- package/dist/components/widgets.cjs +591 -0
- package/dist/components/widgets.cjs.map +1 -0
- package/dist/components/widgets.d.cts +110 -0
- package/dist/components/widgets.d.ts +110 -0
- package/dist/components/widgets.js +581 -0
- package/dist/components/widgets.js.map +1 -0
- package/dist/components.cjs +351 -0
- package/dist/components.cjs.map +1 -0
- package/dist/components.css +75 -0
- package/dist/components.d.cts +2997 -0
- package/dist/components.d.ts +2997 -0
- package/dist/components.js +106 -0
- package/dist/components.js.map +1 -0
- package/dist/components.umd.js +23 -0
- package/dist/components.umd.js.map +1 -0
- package/dist/element.cjs +97 -0
- package/dist/element.cjs.map +1 -0
- package/dist/element.d.cts +215 -0
- package/dist/element.d.ts +215 -0
- package/dist/element.js +95 -0
- package/dist/element.js.map +1 -0
- package/dist/element.umd.js +2 -0
- package/dist/element.umd.js.map +1 -0
- package/dist/index.cjs +149 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +425 -0
- package/dist/index.d.ts +425 -0
- package/dist/index.js +131 -0
- package/dist/index.js.map +1 -0
- package/dist/index.umd.js +15 -0
- package/dist/index.umd.js.map +1 -0
- package/dist/presets/extended.cjs +243 -0
- package/dist/presets/extended.cjs.map +1 -0
- package/dist/presets/extended.d.cts +37 -0
- package/dist/presets/extended.d.ts +37 -0
- package/dist/presets/extended.js +239 -0
- package/dist/presets/extended.js.map +1 -0
- package/dist/presets-extended.umd.js +2 -0
- package/dist/presets-extended.umd.js.map +1 -0
- package/dist/react.cjs +68 -0
- package/dist/react.cjs.map +1 -0
- package/dist/react.d.cts +158 -0
- package/dist/react.d.ts +158 -0
- package/dist/react.js +65 -0
- package/dist/react.js.map +1 -0
- package/dist/solid.cjs +93 -0
- package/dist/solid.cjs.map +1 -0
- package/dist/solid.d.cts +249 -0
- package/dist/solid.d.ts +249 -0
- package/dist/solid.js +89 -0
- package/dist/solid.js.map +1 -0
- package/dist/svelte.cjs +66 -0
- package/dist/svelte.cjs.map +1 -0
- package/dist/svelte.d.cts +243 -0
- package/dist/svelte.d.ts +243 -0
- package/dist/svelte.js +63 -0
- package/dist/svelte.js.map +1 -0
- package/dist/vue.cjs +62 -0
- package/dist/vue.cjs.map +1 -0
- package/dist/vue.d.cts +158 -0
- package/dist/vue.d.ts +158 -0
- package/dist/vue.js +60 -0
- package/dist/vue.js.map +1 -0
- package/dist/widgets.umd.js +2 -0
- package/dist/widgets.umd.js.map +1 -0
- package/docs/API.md +147 -0
- package/docs/ROADMAP.md +14 -0
- package/docs/accessibility.md +60 -0
- package/docs/components.md +564 -0
- package/docs/deprecations.md +30 -0
- package/docs/frameworks-ssr.md +100 -0
- package/docs/hybrid-apps.md +145 -0
- package/docs/images/showcase-detail.png +0 -0
- package/docs/images/showcase-grid.png +0 -0
- package/docs/images/showcase-mobile.png +0 -0
- package/docs/migration-from-aos.md +67 -0
- package/docs/migration-from-gsap-scrolltrigger.md +80 -0
- package/docs/motion-tokens.css +31 -0
- package/docs/motion-tokens.md +46 -0
- package/docs/motion.tokens.json +132 -0
- package/docs/performance.md +24 -0
- package/docs/presets.md +310 -0
- package/docs/upgrading-3.md +21 -0
- package/docs/upgrading-4.md +65 -0
- package/docs/upgrading-5.md +31 -0
- package/docs/upgrading-6.md +32 -0
- package/docs/windows-apps.md +119 -0
- package/package.json +562 -4
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { defineComponents } from '../components.js';
|
|
2
|
+
import { b as bindUsa } from '../chunks/bind-B_CTL6Qn.js';
|
|
3
|
+
export { u as usaEventName } from '../chunks/bind-B_CTL6Qn.js';
|
|
4
|
+
import './reveal.js';
|
|
5
|
+
import '../chunks/base-C_3cAoRz.js';
|
|
6
|
+
import './text.js';
|
|
7
|
+
import '../chunks/core-VEBw36QK.js';
|
|
8
|
+
import './tokens.js';
|
|
9
|
+
import './interaction.js';
|
|
10
|
+
import './feedback.js';
|
|
11
|
+
import './background.js';
|
|
12
|
+
import '../chunks/variants-DRlKVHvu.js';
|
|
13
|
+
import './transitions.js';
|
|
14
|
+
import './physics.js';
|
|
15
|
+
import '../chunks/spring-CbvHfVtP.js';
|
|
16
|
+
import './cards.js';
|
|
17
|
+
import './click.js';
|
|
18
|
+
import '../chunks/fx-Bs6IrV4Q.js';
|
|
19
|
+
import './ui.js';
|
|
20
|
+
import './page.js';
|
|
21
|
+
import './timeline.js';
|
|
22
|
+
import './gesture.js';
|
|
23
|
+
import '../chunks/core-ps8uvYuN.js';
|
|
24
|
+
import './svg.js';
|
|
25
|
+
import './webgl.js';
|
|
26
|
+
import './depth.js';
|
|
27
|
+
import './layout.js';
|
|
28
|
+
import './packs.js';
|
|
29
|
+
import './fx.js';
|
|
30
|
+
import '../chunks/registry-CKNLQpwd.js';
|
|
31
|
+
import './a11y.js';
|
|
32
|
+
import '../chunks/index-tags-DucKMQr_.js';
|
|
33
|
+
import './perf.js';
|
|
34
|
+
import './bridge.js';
|
|
35
|
+
|
|
36
|
+
/**
|
|
37
|
+
* motionary/components/svelte — Svelte integration (v3.8).
|
|
38
|
+
* Svelte (3, 4, 5) renders `<usa-*>` tags natively; `use:usa` sets
|
|
39
|
+
* **properties** and `usa:*` listeners in one place, and `defineUsa()`
|
|
40
|
+
* registers the elements on the client only (safe in SvelteKit SSR).
|
|
41
|
+
*
|
|
42
|
+
* ```svelte
|
|
43
|
+
* <script>
|
|
44
|
+
* import { usa, defineUsa } from 'motionary/components/svelte';
|
|
45
|
+
* import { onMount } from 'svelte';
|
|
46
|
+
* onMount(() => defineUsa(['click', 'ui']));
|
|
47
|
+
* let on = false;
|
|
48
|
+
* </script>
|
|
49
|
+
* <usa-toggle use:usa={{ props: { checked: on }, on: { change: (e) => (on = e.detail.checked) } }}></usa-toggle>
|
|
50
|
+
* ```
|
|
51
|
+
* Plain `on:usa:change` does not compile in Svelte 3/4 (colon); use the action or `onusa:change` in Svelte 5.
|
|
52
|
+
*/
|
|
53
|
+
/** Svelte action: `use:usa={{ props, on }}`. */
|
|
54
|
+
function usa(node, binding = {}) {
|
|
55
|
+
return bindUsa(node, binding);
|
|
56
|
+
}
|
|
57
|
+
/** Register the elements (all, or some categories) — call from `onMount` for SSR apps. */
|
|
58
|
+
function defineUsa(categories) {
|
|
59
|
+
if (typeof window !== 'undefined')
|
|
60
|
+
defineComponents(categories);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
export { bindUsa, defineUsa, usa };
|
|
64
|
+
//# sourceMappingURL=svelte.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"svelte.js","sources":["../../src/components/frameworks/svelte.ts"],"sourcesContent":["/**\n * motionary/components/svelte — Svelte integration (v3.8).\n * Svelte (3, 4, 5) renders `<usa-*>` tags natively; `use:usa` sets\n * **properties** and `usa:*` listeners in one place, and `defineUsa()`\n * registers the elements on the client only (safe in SvelteKit SSR).\n *\n * ```svelte\n * <script>\n * import { usa, defineUsa } from 'motionary/components/svelte';\n * import { onMount } from 'svelte';\n * onMount(() => defineUsa(['click', 'ui']));\n * let on = false;\n * </script>\n * <usa-toggle use:usa={{ props: { checked: on }, on: { change: (e) => (on = e.detail.checked) } }}></usa-toggle>\n * ```\n * Plain `on:usa:change` does not compile in Svelte 3/4 (colon); use the action or `onusa:change` in Svelte 5.\n */\nimport { defineComponents, type ComponentCategory } from '../index';\nimport { bindUsa, type UsaBinding } from './bind';\n\nexport { bindUsa, usaEventName } from './bind';\nexport type { UsaBinding } from './bind';\n\n/** Svelte action: `use:usa={{ props, on }}`. */\nexport function usa(node: HTMLElement, binding: UsaBinding = {}): { update(b: UsaBinding): void; destroy(): void } {\n return bindUsa(node, binding);\n}\n\n/** Register the elements (all, or some categories) — call from `onMount` for SSR apps. */\nexport function defineUsa(categories?: ComponentCategory[]): void {\n if (typeof window !== 'undefined') defineComponents(categories);\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;AAgBG;AAOH;SACgB,GAAG,CAAC,IAAiB,EAAE,UAAsB,EAAE,EAAA;AAC7D,IAAA,OAAO,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC;AAC/B;AAEA;AACM,SAAU,SAAS,CAAC,UAAgC,EAAA;IACxD,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,gBAAgB,CAAC,UAAU,CAAC;AACjE;;;;"}
|
|
@@ -0,0 +1,359 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var base = require('../chunks/base-BaQV-2ha.cjs');
|
|
4
|
+
|
|
5
|
+
const NUM = /-?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?/gi;
|
|
6
|
+
/** `true` when two path strings share the same commands (so their numbers can be interpolated). */
|
|
7
|
+
function pathsCompatible(a, b) {
|
|
8
|
+
return a.replace(NUM, '#').replace(/[\s,]+/g, ' ').trim() === b.replace(NUM, '#').replace(/[\s,]+/g, ' ').trim();
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* Path data between `a` and `b` at `t` (0–1). Paths with the same command
|
|
12
|
+
* structure morph number-by-number; others switch at the midpoint.
|
|
13
|
+
*/
|
|
14
|
+
function interpolatePath(a, b, t) {
|
|
15
|
+
if (t <= 0)
|
|
16
|
+
return a;
|
|
17
|
+
if (t >= 1)
|
|
18
|
+
return b;
|
|
19
|
+
if (!pathsCompatible(a, b))
|
|
20
|
+
return t < 0.5 ? a : b;
|
|
21
|
+
const nb = b.match(NUM) || [];
|
|
22
|
+
let i = 0;
|
|
23
|
+
return a.replace(NUM, (n) => {
|
|
24
|
+
const v = Number(n) + (Number(nb[i++]) - Number(n)) * t;
|
|
25
|
+
return String(Math.round(v * 1000) / 1000);
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
const ease = (t) => 1 - Math.pow(1 - t, 3);
|
|
29
|
+
/** Animate a `<path>`'s `d` to `to`. Resolves when done; instant under reduced motion. */
|
|
30
|
+
function morphTo(path, to, o = {}) {
|
|
31
|
+
const from = path.getAttribute('d') || to;
|
|
32
|
+
const dur = (o.duration ?? 500) * base.motionScale();
|
|
33
|
+
const prev = path.__usaMorph;
|
|
34
|
+
if (prev)
|
|
35
|
+
base.caf(prev);
|
|
36
|
+
if (base.prefersReducedMotion() || dur <= 0 || from === to) {
|
|
37
|
+
path.setAttribute('d', to);
|
|
38
|
+
return Promise.resolve();
|
|
39
|
+
}
|
|
40
|
+
const fn = o.easing || ease;
|
|
41
|
+
const t0 = base.now();
|
|
42
|
+
return new Promise((resolve) => {
|
|
43
|
+
const step = () => {
|
|
44
|
+
const t = base.clamp((base.now() - t0) / dur, 0, 1);
|
|
45
|
+
path.setAttribute('d', interpolatePath(from, to, fn(t)));
|
|
46
|
+
if (t < 1)
|
|
47
|
+
path.__usaMorph = base.raf(step);
|
|
48
|
+
else {
|
|
49
|
+
path.__usaMorph = 0;
|
|
50
|
+
resolve();
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
path.__usaMorph = base.raf(step);
|
|
54
|
+
});
|
|
55
|
+
}
|
|
56
|
+
const DRAWABLE = 'path, line, polyline, polygon, circle, ellipse, rect';
|
|
57
|
+
/**
|
|
58
|
+
* Prepare every stroke in `root` for line drawing (normalised `pathLength=1`,
|
|
59
|
+
* so no `getTotalLength()` is needed) and return a function that sets
|
|
60
|
+
* progress 0–1, optionally staggered between shapes.
|
|
61
|
+
*/
|
|
62
|
+
function drawLines(root, o = {}) {
|
|
63
|
+
const shapes = Array.from(root.querySelectorAll(DRAWABLE));
|
|
64
|
+
shapes.forEach((s) => {
|
|
65
|
+
s.setAttribute('pathLength', '1');
|
|
66
|
+
s.style.strokeDasharray = '1 1';
|
|
67
|
+
});
|
|
68
|
+
const st = base.clamp(o.stagger ?? 0, 0, 0.9);
|
|
69
|
+
return (p) => {
|
|
70
|
+
const n = shapes.length;
|
|
71
|
+
shapes.forEach((s, i) => {
|
|
72
|
+
const start = n > 1 ? (i / (n - 1)) * st : 0;
|
|
73
|
+
const local = base.clamp((p - start) / (1 - st || 1), 0, 1);
|
|
74
|
+
s.style.strokeDashoffset = String(1 - local);
|
|
75
|
+
});
|
|
76
|
+
};
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
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-mask-reveal[data-state=\"hidden\"]{opacity:0}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;opacity:1 !important}usa-draw svg *{stroke-dashoffset:0 !important}}";
|
|
80
|
+
|
|
81
|
+
function defineDraw(tag = 'usa-draw') {
|
|
82
|
+
return base.defineElement(tag, (Base) => class UsaDraw extends Base {
|
|
83
|
+
constructor() {
|
|
84
|
+
super(...arguments);
|
|
85
|
+
this._set = () => { };
|
|
86
|
+
this._p = 0;
|
|
87
|
+
this._id = 0;
|
|
88
|
+
}
|
|
89
|
+
get progress() {
|
|
90
|
+
return this._p;
|
|
91
|
+
}
|
|
92
|
+
set progress(p) {
|
|
93
|
+
this._p = base.clamp(p, 0, 1);
|
|
94
|
+
this._set(this._p);
|
|
95
|
+
this.toggleAttribute('data-drawn', this._p >= 1);
|
|
96
|
+
}
|
|
97
|
+
play() {
|
|
98
|
+
base.caf(this._id);
|
|
99
|
+
if (this.reduced) {
|
|
100
|
+
this.progress = 1;
|
|
101
|
+
return void this.emit('complete');
|
|
102
|
+
}
|
|
103
|
+
const dur = this.num('duration', 1600) * base.motionScale();
|
|
104
|
+
const t0 = base.now();
|
|
105
|
+
this.progress = 0;
|
|
106
|
+
const step = () => {
|
|
107
|
+
this.progress = (base.now() - t0) / dur;
|
|
108
|
+
if (this._p < 1)
|
|
109
|
+
this._id = base.raf(step);
|
|
110
|
+
else
|
|
111
|
+
this.emit('complete');
|
|
112
|
+
};
|
|
113
|
+
this._id = base.raf(step);
|
|
114
|
+
}
|
|
115
|
+
mount() {
|
|
116
|
+
this._set = drawLines(this, { stagger: this.num('stagger', 0.2) });
|
|
117
|
+
const trigger = this.str('trigger', 'view');
|
|
118
|
+
if (this.reduced) {
|
|
119
|
+
this.progress = 1;
|
|
120
|
+
return;
|
|
121
|
+
}
|
|
122
|
+
this.progress = 0;
|
|
123
|
+
if (trigger === 'scrub') {
|
|
124
|
+
const update = () => {
|
|
125
|
+
const r = this.getBoundingClientRect();
|
|
126
|
+
const vh = window.innerHeight || 1;
|
|
127
|
+
this.progress = (vh - r.top) / (vh * 0.6 + r.height * 0.4 || 1);
|
|
128
|
+
};
|
|
129
|
+
this.listen(window, 'scroll', update, { passive: true });
|
|
130
|
+
update();
|
|
131
|
+
}
|
|
132
|
+
else if (trigger === 'hover')
|
|
133
|
+
this.listen(this, 'pointerenter', () => this.play());
|
|
134
|
+
else if (trigger === 'click')
|
|
135
|
+
this.listen(this, 'click', () => this.play());
|
|
136
|
+
else {
|
|
137
|
+
let done = false;
|
|
138
|
+
this.inView((v) => {
|
|
139
|
+
if (v && (!done || this.flag('repeat'))) {
|
|
140
|
+
done = true;
|
|
141
|
+
this.play();
|
|
142
|
+
}
|
|
143
|
+
else if (!v && this.flag('repeat'))
|
|
144
|
+
this.progress = 0;
|
|
145
|
+
}, { threshold: 0.3 });
|
|
146
|
+
}
|
|
147
|
+
this.onCleanup(() => base.caf(this._id));
|
|
148
|
+
}
|
|
149
|
+
}, { id: 'svg', text: css });
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
function defineMorph(tag = 'usa-morph') {
|
|
153
|
+
return base.defineElement(tag, (Base) => class UsaMorph extends Base {
|
|
154
|
+
constructor() {
|
|
155
|
+
super(...arguments);
|
|
156
|
+
this._i = 0;
|
|
157
|
+
this._path = null;
|
|
158
|
+
}
|
|
159
|
+
static get observedAttributes() {
|
|
160
|
+
return ['paths', 'trigger'];
|
|
161
|
+
}
|
|
162
|
+
get index() {
|
|
163
|
+
return this._i;
|
|
164
|
+
}
|
|
165
|
+
list() {
|
|
166
|
+
return this.str('paths').split('|').map((s) => s.trim()).filter(Boolean);
|
|
167
|
+
}
|
|
168
|
+
next() {
|
|
169
|
+
const l = this.list();
|
|
170
|
+
if (!this._path || l.length < 2)
|
|
171
|
+
return Promise.resolve();
|
|
172
|
+
this._i = (this._i + 1) % l.length;
|
|
173
|
+
this.emit('change', { index: this._i });
|
|
174
|
+
return morphTo(this._path, l[this._i], { duration: this.num('duration', 600) });
|
|
175
|
+
}
|
|
176
|
+
mount() {
|
|
177
|
+
let path = this.querySelector('path');
|
|
178
|
+
if (!path) {
|
|
179
|
+
this.innerHTML = '<svg viewBox="0 0 100 100" aria-hidden="true"><path></path></svg>';
|
|
180
|
+
path = this.querySelector('path');
|
|
181
|
+
}
|
|
182
|
+
this._path = path;
|
|
183
|
+
const l = this.list();
|
|
184
|
+
if (l[0])
|
|
185
|
+
this._path.setAttribute('d', l[this._i % l.length]);
|
|
186
|
+
const t = this.str('trigger', 'click');
|
|
187
|
+
if (t === 'hover') {
|
|
188
|
+
this.listen(this, 'pointerenter', () => void this.next());
|
|
189
|
+
this.listen(this, 'pointerleave', () => void this.next());
|
|
190
|
+
}
|
|
191
|
+
else if (t === 'auto' || t === 'view') {
|
|
192
|
+
let timer;
|
|
193
|
+
this.inView((v) => {
|
|
194
|
+
clearInterval(timer);
|
|
195
|
+
if (!v || this.reduced)
|
|
196
|
+
return;
|
|
197
|
+
if (t === 'view')
|
|
198
|
+
return void this.next();
|
|
199
|
+
timer = setInterval(() => void this.next(), this.num('interval', 2000));
|
|
200
|
+
});
|
|
201
|
+
this.onCleanup(() => clearInterval(timer));
|
|
202
|
+
}
|
|
203
|
+
else {
|
|
204
|
+
if (!this.hasAttribute('tabindex'))
|
|
205
|
+
this.tabIndex = 0;
|
|
206
|
+
if (!this.hasAttribute('role'))
|
|
207
|
+
this.setAttribute('role', 'button');
|
|
208
|
+
this.listen(this, 'click', () => void this.next());
|
|
209
|
+
this.listen(this, 'keydown', (e) => {
|
|
210
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
211
|
+
e.preventDefault();
|
|
212
|
+
void this.next();
|
|
213
|
+
}
|
|
214
|
+
});
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
}, { id: 'svg', text: css });
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
/** Clip-path start / end frames for each reveal shape. */
|
|
221
|
+
const MASK_SHAPES = {
|
|
222
|
+
circle: ['circle(0% at 50% 50%)', 'circle(75% at 50% 50%)'],
|
|
223
|
+
diamond: ['polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)', 'polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%)'],
|
|
224
|
+
wipe: ['inset(0 100% 0 0)', 'inset(0 0% 0 0)'],
|
|
225
|
+
'wipe-up': ['inset(100% 0 0 0)', 'inset(0% 0 0 0)'],
|
|
226
|
+
iris: ['inset(50% 50% 50% 50% round 50%)', 'inset(0% 0% 0% 0% round 0%)'],
|
|
227
|
+
star: [
|
|
228
|
+
'polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%)',
|
|
229
|
+
'polygon(50% -60%, 80% 20%, 160% 30%, 95% 85%, 115% 170%, 50% 125%, -15% 170%, 5% 85%, -60% 30%, 20% 20%)',
|
|
230
|
+
],
|
|
231
|
+
};
|
|
232
|
+
function defineMaskReveal(tag = 'usa-mask-reveal') {
|
|
233
|
+
return base.defineElement(tag, (Base) => class UsaMaskReveal extends Base {
|
|
234
|
+
frames() {
|
|
235
|
+
const s = MASK_SHAPES[this.str('shape', 'circle')] || MASK_SHAPES.circle;
|
|
236
|
+
const at = this.str('at');
|
|
237
|
+
return at && s[0].startsWith('circle') ? [s[0].replace('50% 50%', at), s[1].replace('50% 50%', at)] : s;
|
|
238
|
+
}
|
|
239
|
+
reveal() {
|
|
240
|
+
const [a, b] = this.frames();
|
|
241
|
+
this.setAttribute('data-state', 'revealing');
|
|
242
|
+
// fill 'both' keeps the closed mask applied during `delay`
|
|
243
|
+
const anim = this.motion(this, [{ clipPath: a }, { clipPath: b }], { duration: this.num('duration', 900), delay: this.num('delay', 0), easing: base.EASE_OUT, fill: 'both' });
|
|
244
|
+
this.style.opacity = '';
|
|
245
|
+
const done = () => {
|
|
246
|
+
this.setAttribute('data-state', 'visible');
|
|
247
|
+
this.emit('complete');
|
|
248
|
+
};
|
|
249
|
+
if (!anim)
|
|
250
|
+
return Promise.resolve(done());
|
|
251
|
+
return anim.finished.then(done, () => { });
|
|
252
|
+
}
|
|
253
|
+
mount() {
|
|
254
|
+
if (this.reduced) {
|
|
255
|
+
this.setAttribute('data-state', 'visible');
|
|
256
|
+
return;
|
|
257
|
+
}
|
|
258
|
+
// 4.0.1: hide with opacity, not the closed clip-path — Chromium's
|
|
259
|
+
// IntersectionObserver honours the target's own clip-path, so a fully
|
|
260
|
+
// clipped element never reports as intersecting and never revealed.
|
|
261
|
+
const hide = () => {
|
|
262
|
+
this.getAnimations?.().forEach((x) => x.cancel());
|
|
263
|
+
this.style.opacity = '0';
|
|
264
|
+
this.setAttribute('data-state', 'hidden');
|
|
265
|
+
};
|
|
266
|
+
hide();
|
|
267
|
+
this.onCleanup(() => ((this.style.opacity = ''), (this.style.clipPath = '')));
|
|
268
|
+
const t = this.str('trigger', 'view');
|
|
269
|
+
if (t === 'hover')
|
|
270
|
+
this.listen(this, 'pointerenter', () => void this.reveal());
|
|
271
|
+
else if (t === 'click')
|
|
272
|
+
this.listen(this, 'click', () => void this.reveal());
|
|
273
|
+
else {
|
|
274
|
+
let done = false;
|
|
275
|
+
this.inView((v) => {
|
|
276
|
+
if (v && (!done || this.flag('repeat'))) {
|
|
277
|
+
done = true;
|
|
278
|
+
void this.reveal();
|
|
279
|
+
}
|
|
280
|
+
else if (!v && this.flag('repeat'))
|
|
281
|
+
hide();
|
|
282
|
+
}, { threshold: 0.25 });
|
|
283
|
+
}
|
|
284
|
+
}
|
|
285
|
+
}, { id: 'svg', text: css });
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
/** Built-in animated icons (24×24 strokes) and the motion each one plays. */
|
|
289
|
+
const ANIM_ICONS = {
|
|
290
|
+
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' }] },
|
|
291
|
+
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 }] },
|
|
292
|
+
check: { d: 'M4 12.5l5 5L20 6.5', duration: 600, frames: [{ strokeDashoffset: 1 }, { strokeDashoffset: 0 }] },
|
|
293
|
+
arrow: { d: 'M4 12h15M13 6l6 6-6 6', duration: 600, frames: [{ translate: '0 0' }, { translate: '5px 0' }, { translate: '0 0' }] },
|
|
294
|
+
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 }] },
|
|
295
|
+
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' }] },
|
|
296
|
+
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' }] },
|
|
297
|
+
download: { d: 'M12 4v11M7 10l5 5 5-5M5 20h14', duration: 700, frames: [{ translate: '0 0' }, { translate: '0 3px' }, { translate: '0 0' }] },
|
|
298
|
+
};
|
|
299
|
+
function defineAnimIcon(tag = 'usa-anim-icon') {
|
|
300
|
+
return base.defineElement(tag, (Base) => class UsaAnimIcon extends Base {
|
|
301
|
+
static get observedAttributes() {
|
|
302
|
+
return ['name', 'size', 'label'];
|
|
303
|
+
}
|
|
304
|
+
icon() {
|
|
305
|
+
return ANIM_ICONS[this.str('name', 'heart')] || ANIM_ICONS.heart;
|
|
306
|
+
}
|
|
307
|
+
play() {
|
|
308
|
+
if (this.reduced)
|
|
309
|
+
return;
|
|
310
|
+
const svg = this.querySelector('svg');
|
|
311
|
+
const i = this.icon();
|
|
312
|
+
const target = i.frames[0].strokeDashoffset !== undefined ? this.querySelector('path') : svg;
|
|
313
|
+
if (target)
|
|
314
|
+
this.motion(target, i.frames, { duration: i.duration, easing: 'ease-in-out', iterations: this.str('trigger') === 'loop' ? Infinity : 1 });
|
|
315
|
+
}
|
|
316
|
+
mount() {
|
|
317
|
+
const i = this.icon();
|
|
318
|
+
const size = this.num('size', 24);
|
|
319
|
+
const label = this.str('label');
|
|
320
|
+
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, '"')}"` : ' aria-hidden="true"'}><path d="${i.d}"${i.frames[0].strokeDashoffset !== undefined ? ' pathLength="1" stroke-dasharray="1"' : ''}></path></svg>`;
|
|
321
|
+
const t = this.str('trigger', 'hover');
|
|
322
|
+
if (t === 'click')
|
|
323
|
+
this.listen(this, 'click', () => this.play());
|
|
324
|
+
else if (t === 'view' || t === 'loop')
|
|
325
|
+
this.inView((v) => v && this.play(), { threshold: 0.5 });
|
|
326
|
+
else {
|
|
327
|
+
this.listen(this, 'pointerenter', () => this.play());
|
|
328
|
+
this.listen(this, 'focusin', () => this.play());
|
|
329
|
+
}
|
|
330
|
+
}
|
|
331
|
+
}, { id: 'svg', text: css });
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
/**
|
|
335
|
+
* motionary/components/svg — SVG animation (v3.3).
|
|
336
|
+
* `<usa-draw>` (line drawing), `<usa-morph>` (path morph), `<usa-mask-reveal>`
|
|
337
|
+
* (mask / clip-path reveals) and `<usa-anim-icon>` (animated icons), plus
|
|
338
|
+
* `interpolatePath()`, `morphTo()`, `drawLines()`.
|
|
339
|
+
*/
|
|
340
|
+
/** Register every component of this category under its default tag. */
|
|
341
|
+
function defineSvgComponents() {
|
|
342
|
+
defineDraw();
|
|
343
|
+
defineMorph();
|
|
344
|
+
defineMaskReveal();
|
|
345
|
+
defineAnimIcon();
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
exports.ANIM_ICONS = ANIM_ICONS;
|
|
349
|
+
exports.MASK_SHAPES = MASK_SHAPES;
|
|
350
|
+
exports.defineAnimIcon = defineAnimIcon;
|
|
351
|
+
exports.defineDraw = defineDraw;
|
|
352
|
+
exports.defineMaskReveal = defineMaskReveal;
|
|
353
|
+
exports.defineMorph = defineMorph;
|
|
354
|
+
exports.defineSvgComponents = defineSvgComponents;
|
|
355
|
+
exports.drawLines = drawLines;
|
|
356
|
+
exports.interpolatePath = interpolatePath;
|
|
357
|
+
exports.morphTo = morphTo;
|
|
358
|
+
exports.pathsCompatible = pathsCompatible;
|
|
359
|
+
//# sourceMappingURL=svg.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"svg.cjs","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 // fill 'both' keeps the closed mask applied during `delay`\n const anim = this.motion(this, [{ clipPath: a }, { clipPath: b }], { duration: this.num('duration', 900), delay: this.num('delay', 0), easing: EASE_OUT, fill: 'both' });\n this.style.opacity = '';\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 // 4.0.1: hide with opacity, not the closed clip-path — Chromium's\n // IntersectionObserver honours the target's own clip-path, so a fully\n // clipped element never reports as intersecting and never revealed.\n const hide = () => {\n this.getAnimations?.().forEach((x) => x.cancel());\n this.style.opacity = '0';\n this.setAttribute('data-state', 'hidden');\n };\n hide();\n this.onCleanup(() => ((this.style.opacity = ''), (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')) hide();\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, '"')}\"` : ' 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 * motionary/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 };\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":["motionScale","caf","prefersReducedMotion","now","clamp","raf","defineElement","EASE_OUT"],"mappings":"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"}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
/* motionary/components/svg */
|
|
2
|
+
.usa-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
|
|
3
|
+
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-mask-reveal[data-state="hidden"]{opacity:0}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;opacity:1 !important}usa-draw svg *{stroke-dashoffset:0 !important}}
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Members shared by every `<usa-*>` element. Attribute helpers, a cleanup
|
|
3
|
+
* bag that is emptied on disconnect, and motion helpers that degrade to the
|
|
4
|
+
* final state without WAAPI or under reduced motion.
|
|
5
|
+
*/
|
|
6
|
+
interface UsaElement extends HTMLElement {
|
|
7
|
+
/** `true` while reduced motion applies to this element. */
|
|
8
|
+
readonly reduced: boolean;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* `<usa-draw>` — line drawing: every stroke of the SVG inside draws itself.
|
|
13
|
+
* Attributes: `trigger` (`view` default · `hover` · `click` · `scrub`),
|
|
14
|
+
* `duration` (1600), `stagger` (0–0.9 share of the timeline, 0.2), `fill`
|
|
15
|
+
* (fade the fill in after drawing), `repeat`. Method `play()`, property
|
|
16
|
+
* `progress`, event `usa:complete`. Reduced motion: drawn immediately.
|
|
17
|
+
*/
|
|
18
|
+
interface UsaDrawElement extends UsaElement {
|
|
19
|
+
play(): void;
|
|
20
|
+
progress: number;
|
|
21
|
+
}
|
|
22
|
+
declare function defineDraw(tag?: string): CustomElementConstructor | undefined;
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* `<usa-morph>` — morphs an SVG path through a list of shapes.
|
|
26
|
+
* Put a `<svg><path></path></svg>` inside (one is created otherwise) and set
|
|
27
|
+
* `paths="M… | M… | M…"` (same command structure morphs smoothly, others
|
|
28
|
+
* switch at the midpoint). Attributes: `trigger` (`click` default · `hover`
|
|
29
|
+
* · `auto` · `view`), `interval` (ms for auto, 2000), `duration` (600).
|
|
30
|
+
* Property `index`, method `next()`, event `usa:change`.
|
|
31
|
+
* Reduced motion: shapes switch without animating; `auto` does not cycle.
|
|
32
|
+
*/
|
|
33
|
+
interface UsaMorphElement extends UsaElement {
|
|
34
|
+
readonly index: number;
|
|
35
|
+
next(): Promise<void>;
|
|
36
|
+
}
|
|
37
|
+
declare function defineMorph(tag?: string): CustomElementConstructor | undefined;
|
|
38
|
+
|
|
39
|
+
/** Clip-path start / end frames for each reveal shape. */
|
|
40
|
+
declare const MASK_SHAPES: Record<string, [string, string]>;
|
|
41
|
+
/**
|
|
42
|
+
* `<usa-mask-reveal>` — reveals its content through a growing mask shape.
|
|
43
|
+
* Attributes: `shape` (`circle` default · `diamond` · `wipe` · `wipe-up` ·
|
|
44
|
+
* `iris` · `star`), `duration` (900), `delay`, `trigger` (`view` · `hover`
|
|
45
|
+
* · `click`), `repeat`, `at` (`x% y%` origin for circle). Event
|
|
46
|
+
* `usa:complete`. Reduced motion: content is shown without the mask.
|
|
47
|
+
*/
|
|
48
|
+
interface UsaMaskRevealElement extends UsaElement {
|
|
49
|
+
reveal(): Promise<void>;
|
|
50
|
+
}
|
|
51
|
+
declare function defineMaskReveal(tag?: string): CustomElementConstructor | undefined;
|
|
52
|
+
|
|
53
|
+
type Icon = {
|
|
54
|
+
d: string;
|
|
55
|
+
frames: Keyframe[];
|
|
56
|
+
duration: number;
|
|
57
|
+
origin?: string;
|
|
58
|
+
};
|
|
59
|
+
/** Built-in animated icons (24×24 strokes) and the motion each one plays. */
|
|
60
|
+
declare const ANIM_ICONS: Record<string, Icon>;
|
|
61
|
+
/**
|
|
62
|
+
* `<usa-anim-icon name="bell">` — an animated stroke icon that plays its
|
|
63
|
+
* motion on `trigger` (`hover` default · `click` · `view` · `loop`).
|
|
64
|
+
* Attributes: `name` (see `ANIM_ICONS`), `size` (24), `label` (accessible
|
|
65
|
+
* name; decorative when absent). Method `play()`. Reduced motion: static.
|
|
66
|
+
*/
|
|
67
|
+
interface UsaAnimIconElement extends UsaElement {
|
|
68
|
+
play(): void;
|
|
69
|
+
}
|
|
70
|
+
declare function defineAnimIcon(tag?: string): CustomElementConstructor | undefined;
|
|
71
|
+
|
|
72
|
+
/** `true` when two path strings share the same commands (so their numbers can be interpolated). */
|
|
73
|
+
declare function pathsCompatible(a: string, b: string): boolean;
|
|
74
|
+
/**
|
|
75
|
+
* Path data between `a` and `b` at `t` (0–1). Paths with the same command
|
|
76
|
+
* structure morph number-by-number; others switch at the midpoint.
|
|
77
|
+
*/
|
|
78
|
+
declare function interpolatePath(a: string, b: string, t: number): string;
|
|
79
|
+
interface MorphOptions {
|
|
80
|
+
duration?: number;
|
|
81
|
+
easing?: (t: number) => number;
|
|
82
|
+
}
|
|
83
|
+
/** Animate a `<path>`'s `d` to `to`. Resolves when done; instant under reduced motion. */
|
|
84
|
+
declare function morphTo(path: SVGPathElement | Element, to: string, o?: MorphOptions): Promise<void>;
|
|
85
|
+
/**
|
|
86
|
+
* Prepare every stroke in `root` for line drawing (normalised `pathLength=1`,
|
|
87
|
+
* so no `getTotalLength()` is needed) and return a function that sets
|
|
88
|
+
* progress 0–1, optionally staggered between shapes.
|
|
89
|
+
*/
|
|
90
|
+
declare function drawLines(root: Element, o?: {
|
|
91
|
+
stagger?: number;
|
|
92
|
+
}): (progress: number) => void;
|
|
93
|
+
|
|
94
|
+
/**
|
|
95
|
+
* motionary/components/svg — SVG animation (v3.3).
|
|
96
|
+
* `<usa-draw>` (line drawing), `<usa-morph>` (path morph), `<usa-mask-reveal>`
|
|
97
|
+
* (mask / clip-path reveals) and `<usa-anim-icon>` (animated icons), plus
|
|
98
|
+
* `interpolatePath()`, `morphTo()`, `drawLines()`.
|
|
99
|
+
*/
|
|
100
|
+
|
|
101
|
+
/** Register every component of this category under its default tag. */
|
|
102
|
+
declare function defineSvgComponents(): void;
|
|
103
|
+
declare global {
|
|
104
|
+
interface HTMLElementTagNameMap {
|
|
105
|
+
'usa-draw': UsaDrawElement;
|
|
106
|
+
'usa-morph': UsaMorphElement;
|
|
107
|
+
'usa-mask-reveal': UsaMaskRevealElement;
|
|
108
|
+
'usa-anim-icon': UsaAnimIconElement;
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
export { ANIM_ICONS, MASK_SHAPES, defineAnimIcon, defineDraw, defineMaskReveal, defineMorph, defineSvgComponents, drawLines, interpolatePath, morphTo, pathsCompatible };
|
|
113
|
+
export type { MorphOptions, UsaAnimIconElement, UsaDrawElement, UsaMaskRevealElement, UsaMorphElement };
|