use-scroll-animate 4.0.0 → 4.1.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 +26 -0
- package/dist/chunks/{base-ZARFccur.js → base-BPG5zvex.js} +2 -2
- package/dist/chunks/{base-ZARFccur.js.map → base-BPG5zvex.js.map} +1 -1
- package/dist/chunks/{core-DXqZm5Il.cjs → core-CLu8ZrC-.cjs} +52 -10
- package/dist/chunks/core-CLu8ZrC-.cjs.map +1 -0
- package/dist/chunks/{core-Co-6AL0h.js → core-QTFk4kgO.js} +53 -12
- package/dist/chunks/core-QTFk4kgO.js.map +1 -0
- package/dist/chunks/{core-DKY-fVzR.js → core-eXX8rB_b.js} +2 -2
- package/dist/chunks/{core-DKY-fVzR.js.map → core-eXX8rB_b.js.map} +1 -1
- package/dist/chunks/{spring-E2ickYNI.js → spring-BziPsW3r.js} +2 -2
- package/dist/chunks/{spring-E2ickYNI.js.map → spring-BziPsW3r.js.map} +1 -1
- package/dist/chunks/{variants-DvnxvRCM.js → variants-BVYMcxRv.js} +2 -2
- package/dist/chunks/{variants-DvnxvRCM.js.map → variants-BVYMcxRv.js.map} +1 -1
- package/dist/components/angular.cjs +1 -1
- package/dist/components/angular.d.cts +29 -5
- package/dist/components/angular.d.ts +29 -5
- package/dist/components/angular.js +5 -5
- package/dist/components/background.js +3 -3
- package/dist/components/cards.js +3 -3
- package/dist/components/click.js +3 -3
- package/dist/components/depth.js +4 -4
- package/dist/components/feedback.js +2 -2
- package/dist/components/gesture.js +5 -5
- package/dist/components/interaction.js +2 -2
- package/dist/components/layout.js +2 -2
- package/dist/components/packs.js +2 -2
- package/dist/components/page.js +3 -3
- package/dist/components/physics.js +4 -4
- package/dist/components/reveal.js +2 -2
- package/dist/components/solid.cjs +20 -5
- package/dist/components/solid.cjs.map +1 -1
- package/dist/components/solid.d.cts +33 -23
- package/dist/components/solid.d.ts +33 -23
- package/dist/components/solid.js +24 -9
- package/dist/components/solid.js.map +1 -1
- package/dist/components/svelte.cjs +1 -1
- package/dist/components/svelte.d.cts +29 -5
- package/dist/components/svelte.d.ts +29 -5
- package/dist/components/svelte.js +5 -5
- package/dist/components/svg.cjs +16 -10
- package/dist/components/svg.cjs.map +1 -1
- package/dist/components/svg.css +1 -1
- package/dist/components/svg.js +18 -12
- package/dist/components/svg.js.map +1 -1
- package/dist/components/text.cjs +1 -1
- package/dist/components/text.css +1 -1
- package/dist/components/text.js +3 -3
- package/dist/components/timeline.cjs +25 -5
- package/dist/components/timeline.cjs.map +1 -1
- package/dist/components/timeline.d.cts +33 -7
- package/dist/components/timeline.d.ts +33 -7
- package/dist/components/timeline.js +27 -8
- package/dist/components/timeline.js.map +1 -1
- package/dist/components/transitions.js +2 -2
- package/dist/components/ui.js +5 -5
- package/dist/components/vue.cjs +1 -1
- package/dist/components/vue.d.cts +29 -5
- package/dist/components/vue.d.ts +29 -5
- package/dist/components/vue.js +5 -5
- package/dist/components/webgl.cjs +10 -0
- package/dist/components/webgl.cjs.map +1 -1
- package/dist/components/webgl.js +12 -2
- package/dist/components/webgl.js.map +1 -1
- package/dist/components.cjs +2 -1
- package/dist/components.cjs.map +1 -1
- package/dist/components.css +2 -2
- package/dist/components.d.cts +34 -8
- package/dist/components.d.ts +34 -8
- package/dist/components.js +7 -7
- package/dist/components.umd.js +2 -2
- package/dist/components.umd.js.map +1 -1
- package/dist/index.cjs +2 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +30 -6
- package/dist/index.d.ts +30 -6
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/index.umd.js +2 -2
- package/dist/index.umd.js.map +1 -1
- package/dist/solid.cjs +38 -8
- package/dist/solid.cjs.map +1 -1
- package/dist/solid.d.cts +6 -1
- package/dist/solid.d.ts +6 -1
- package/dist/solid.js +39 -9
- package/dist/solid.js.map +1 -1
- package/docs/API.md +3 -1
- package/docs/ROADMAP.md +1 -1
- package/package.json +1 -1
- package/dist/chunks/core-Co-6AL0h.js.map +0 -1
- package/dist/chunks/core-DXqZm5Il.cjs.map +0 -1
|
@@ -1295,10 +1295,26 @@ interface TimelineStepOptions {
|
|
|
1295
1295
|
stagger?: number;
|
|
1296
1296
|
}
|
|
1297
1297
|
interface ScrubOptions {
|
|
1298
|
-
/** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts. */
|
|
1298
|
+
/** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts (JS engine only). */
|
|
1299
1299
|
offset?: number;
|
|
1300
|
-
/** Smoothing 0–1 (0 = immediate, default 0). */
|
|
1300
|
+
/** Smoothing 0–1 (0 = immediate, default 0). Smoothing needs the JS engine. */
|
|
1301
1301
|
smooth?: number;
|
|
1302
|
+
/**
|
|
1303
|
+
* 4.1: which progress source drives the timeline.
|
|
1304
|
+
* - `'view'` (default): `source` moving through the viewport (CSS `ViewTimeline`, range `cover`).
|
|
1305
|
+
* - `'scroll'`: the scroll position of `source` itself (a scroll container; CSS `ScrollTimeline`).
|
|
1306
|
+
*/
|
|
1307
|
+
source?: 'view' | 'scroll';
|
|
1308
|
+
/** 4.1: `'auto'` (default) uses the browser's native scroll-driven animations when available, `'js'` forces the fallback. */
|
|
1309
|
+
engine?: 'auto' | 'native' | 'js';
|
|
1310
|
+
/** 4.1: scroll axis, `'block'` (default) · `'inline'` · `'x'` · `'y'`. */
|
|
1311
|
+
axis?: 'block' | 'inline' | 'x' | 'y';
|
|
1312
|
+
}
|
|
1313
|
+
/** The function `scrub()` returns: call it to stop. `native` tells which engine runs it. */
|
|
1314
|
+
interface ScrubHandle {
|
|
1315
|
+
(): void;
|
|
1316
|
+
/** `true` when the browser's ScrollTimeline / ViewTimeline drives it (compositor, no JS per frame). */
|
|
1317
|
+
readonly native: boolean;
|
|
1302
1318
|
}
|
|
1303
1319
|
interface Timeline {
|
|
1304
1320
|
/** Total length in ms. */
|
|
@@ -1322,8 +1338,14 @@ interface Timeline {
|
|
|
1322
1338
|
seek(to: TimelinePosition): Timeline;
|
|
1323
1339
|
/** Get or set progress 0–1. */
|
|
1324
1340
|
progress(p?: number): number;
|
|
1325
|
-
/**
|
|
1326
|
-
|
|
1341
|
+
/**
|
|
1342
|
+
* Tie progress to scroll: `source` moving through the viewport (or, with
|
|
1343
|
+
* `{ source: 'scroll' }`, a scroll container's own position). Runs on native
|
|
1344
|
+
* ScrollTimeline / ViewTimeline when available (and no `smooth`, `offset`,
|
|
1345
|
+
* `call()` cues or `onUpdate` need JS), else on a rAF-throttled listener.
|
|
1346
|
+
* Returns a stop function with a `native` flag.
|
|
1347
|
+
*/
|
|
1348
|
+
scrub(source: Element, options?: ScrubOptions): ScrubHandle;
|
|
1327
1349
|
/** Stop and drop every animation (elements keep their last frame). */
|
|
1328
1350
|
cancel(): void;
|
|
1329
1351
|
}
|
|
@@ -1337,7 +1359,9 @@ interface Timeline {
|
|
|
1337
1359
|
* Attributes: `trigger` (`view` default · `click` · `manual`), `scrub`
|
|
1338
1360
|
* (progress follows scroll instead of playing), `overlap` (ms each step
|
|
1339
1361
|
* overlaps the previous, default 0), `duration` (600), `stagger` (ms),
|
|
1340
|
-
* `repeat` (replay every time it enters the viewport).
|
|
1362
|
+
* `repeat` (replay every time it enters the viewport). 4.1: `scrub` runs on native
|
|
1363
|
+
* ScrollTimeline / ViewTimeline when supported (`data-native` is set); `scrub="js"`,
|
|
1364
|
+
* `scrub="scroll"` and `smooth` tune it. Methods: `play()`,
|
|
1341
1365
|
* `reverse()`, `seek(t)`; property `timeline`. Event `usa:complete`.
|
|
1342
1366
|
* Reduced motion: steps appear in their final state.
|
|
1343
1367
|
*/
|
|
@@ -1671,26 +1695,12 @@ type UsaIntrinsicElements = {
|
|
|
1671
1695
|
[K in Tags]: UsaAttributes;
|
|
1672
1696
|
};
|
|
1673
1697
|
|
|
1674
|
-
/**
|
|
1675
|
-
* use-scroll-animate/components/solid — Solid integration (v3.8).
|
|
1676
|
-
* Solid renders custom elements natively: set properties with `prop:` and
|
|
1677
|
-
* listen with `on:` (`<usa-toggle prop:checked={on()} on:usa:change={…}>`).
|
|
1678
|
-
* This entry adds `defineUsa()` (client only, SolidStart-safe), a `usa`
|
|
1679
|
-
* directive for `use:usa={{ props, on }}`, and JSX types.
|
|
1680
|
-
*
|
|
1681
|
-
* ```tsx
|
|
1682
|
-
* import { defineUsa, usa } from 'use-scroll-animate/components/solid';
|
|
1683
|
-
* import type {} from 'use-scroll-animate/components/solid'; // JSX types
|
|
1684
|
-
* onMount(() => defineUsa());
|
|
1685
|
-
* false && usa; // keep the directive import (Solid convention)
|
|
1686
|
-
* <usa-card use:usa={{ on: { flip: (e) => console.log(e.detail) } }} effect="flip">…</usa-card>
|
|
1687
|
-
* ```
|
|
1688
|
-
*/
|
|
1689
|
-
|
|
1690
1698
|
/**
|
|
1691
1699
|
* Solid directive (`use:usa`). Solid calls it with the element and an
|
|
1692
|
-
* accessor; the binding is
|
|
1693
|
-
*
|
|
1700
|
+
* accessor; since 4.0.1 the binding is tracked with `createRenderEffect`, so
|
|
1701
|
+
* signals read inside `{{ props, on }}` update the element automatically and
|
|
1702
|
+
* the listeners are removed on cleanup. `refresh()` is kept for code that
|
|
1703
|
+
* calls the directive outside a reactive owner.
|
|
1694
1704
|
*/
|
|
1695
1705
|
declare function usa(el: HTMLElement, accessor: () => UsaBinding | undefined): {
|
|
1696
1706
|
refresh(): void;
|
package/dist/components/solid.js
CHANGED
|
@@ -1,24 +1,25 @@
|
|
|
1
|
+
import { createRenderEffect, onCleanup } from 'solid-js';
|
|
1
2
|
import { defineComponents } from '../components.js';
|
|
2
3
|
import { b as bindUsa } from '../chunks/bind-B_CTL6Qn.js';
|
|
3
4
|
export { u as usaEventName } from '../chunks/bind-B_CTL6Qn.js';
|
|
4
5
|
import './reveal.js';
|
|
5
|
-
import '../chunks/base-
|
|
6
|
+
import '../chunks/base-BPG5zvex.js';
|
|
6
7
|
import './text.js';
|
|
7
8
|
import './interaction.js';
|
|
8
9
|
import './feedback.js';
|
|
9
10
|
import './background.js';
|
|
10
|
-
import '../chunks/variants-
|
|
11
|
+
import '../chunks/variants-BVYMcxRv.js';
|
|
11
12
|
import './transitions.js';
|
|
12
13
|
import './physics.js';
|
|
13
|
-
import '../chunks/spring-
|
|
14
|
+
import '../chunks/spring-BziPsW3r.js';
|
|
14
15
|
import './cards.js';
|
|
15
16
|
import './click.js';
|
|
16
17
|
import './ui.js';
|
|
17
18
|
import './page.js';
|
|
18
19
|
import './timeline.js';
|
|
19
|
-
import '../chunks/core-
|
|
20
|
+
import '../chunks/core-QTFk4kgO.js';
|
|
20
21
|
import './gesture.js';
|
|
21
|
-
import '../chunks/core-
|
|
22
|
+
import '../chunks/core-eXX8rB_b.js';
|
|
22
23
|
import './svg.js';
|
|
23
24
|
import './webgl.js';
|
|
24
25
|
import './depth.js';
|
|
@@ -43,12 +44,26 @@ import '../chunks/index-tags-43Xtd01A.js';
|
|
|
43
44
|
*/
|
|
44
45
|
/**
|
|
45
46
|
* Solid directive (`use:usa`). Solid calls it with the element and an
|
|
46
|
-
* accessor; the binding is
|
|
47
|
-
*
|
|
47
|
+
* accessor; since 4.0.1 the binding is tracked with `createRenderEffect`, so
|
|
48
|
+
* signals read inside `{{ props, on }}` update the element automatically and
|
|
49
|
+
* the listeners are removed on cleanup. `refresh()` is kept for code that
|
|
50
|
+
* calls the directive outside a reactive owner.
|
|
48
51
|
*/
|
|
49
52
|
function usa(el, accessor) {
|
|
50
|
-
|
|
51
|
-
|
|
53
|
+
let b = null;
|
|
54
|
+
const run = () => {
|
|
55
|
+
const v = accessor() || {};
|
|
56
|
+
if (b)
|
|
57
|
+
b.update(v);
|
|
58
|
+
else
|
|
59
|
+
b = bindUsa(el, v);
|
|
60
|
+
};
|
|
61
|
+
createRenderEffect(run);
|
|
62
|
+
if (!b)
|
|
63
|
+
run();
|
|
64
|
+
const destroy = () => b?.destroy();
|
|
65
|
+
onCleanup(destroy);
|
|
66
|
+
return { refresh: run, destroy };
|
|
52
67
|
}
|
|
53
68
|
/** Register the elements (all, or some categories) — call from `onMount` in SSR apps. */
|
|
54
69
|
function defineUsa(categories) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"solid.js","sources":["../../src/components/frameworks/solid.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/solid — Solid integration (v3.8).\n * Solid renders custom elements natively: set properties with `prop:` and\n * listen with `on:` (`<usa-toggle prop:checked={on()} on:usa:change={…}>`).\n * This entry adds `defineUsa()` (client only, SolidStart-safe), a `usa`\n * directive for `use:usa={{ props, on }}`, and JSX types.\n *\n * ```tsx\n * import { defineUsa, usa } from 'use-scroll-animate/components/solid';\n * import type {} from 'use-scroll-animate/components/solid'; // JSX types\n * onMount(() => defineUsa());\n * false && usa; // keep the directive import (Solid convention)\n * <usa-card use:usa={{ on: { flip: (e) => console.log(e.detail) } }} effect=\"flip\">…</usa-card>\n * ```\n */\nimport { defineComponents, type ComponentCategory } from '../index';\nimport { bindUsa, type UsaBinding } from './bind';\nimport type { UsaIntrinsicElements } from './jsx';\n\nexport { bindUsa, usaEventName } from './bind';\nexport type { UsaBinding } from './bind';\n\n/**\n * Solid directive (`use:usa`). Solid calls it with the element and an\n * accessor; the binding is read
|
|
1
|
+
{"version":3,"file":"solid.js","sources":["../../src/components/frameworks/solid.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/solid — Solid integration (v3.8).\n * Solid renders custom elements natively: set properties with `prop:` and\n * listen with `on:` (`<usa-toggle prop:checked={on()} on:usa:change={…}>`).\n * This entry adds `defineUsa()` (client only, SolidStart-safe), a `usa`\n * directive for `use:usa={{ props, on }}`, and JSX types.\n *\n * ```tsx\n * import { defineUsa, usa } from 'use-scroll-animate/components/solid';\n * import type {} from 'use-scroll-animate/components/solid'; // JSX types\n * onMount(() => defineUsa());\n * false && usa; // keep the directive import (Solid convention)\n * <usa-card use:usa={{ on: { flip: (e) => console.log(e.detail) } }} effect=\"flip\">…</usa-card>\n * ```\n */\nimport { createRenderEffect, onCleanup } from 'solid-js';\nimport { defineComponents, type ComponentCategory } from '../index';\nimport { bindUsa, type UsaBinding } from './bind';\nimport type { UsaIntrinsicElements } from './jsx';\n\nexport { bindUsa, usaEventName } from './bind';\nexport type { UsaBinding } from './bind';\n\n/**\n * Solid directive (`use:usa`). Solid calls it with the element and an\n * accessor; since 4.0.1 the binding is tracked with `createRenderEffect`, so\n * signals read inside `{{ props, on }}` update the element automatically and\n * the listeners are removed on cleanup. `refresh()` is kept for code that\n * calls the directive outside a reactive owner.\n */\nexport function usa(el: HTMLElement, accessor: () => UsaBinding | undefined): { refresh(): void; destroy(): void } {\n let b: ReturnType<typeof bindUsa> | null = null;\n const run = () => {\n const v = accessor() || {};\n if (b) b.update(v);\n else b = bindUsa(el, v);\n };\n createRenderEffect(run);\n if (!b) run();\n const destroy = () => b?.destroy();\n onCleanup(destroy);\n return { refresh: run, destroy };\n}\n\n/** Register the elements (all, or some categories) — call from `onMount` in SSR apps. */\nexport function defineUsa(categories?: ComponentCategory[]): void {\n if (typeof window !== 'undefined') defineComponents(categories);\n}\n\n/** JSX intrinsic elements for Solid (same attribute types as the React/Preact ones). */\nexport type SolidUsaIntrinsicElements = UsaIntrinsicElements;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;AAcG;AASH;;;;;;AAMG;AACG,SAAU,GAAG,CAAC,EAAe,EAAE,QAAsC,EAAA;IACzE,IAAI,CAAC,GAAsC,IAAI;IAC/C,MAAM,GAAG,GAAG,MAAK;AACf,QAAA,MAAM,CAAC,GAAG,QAAQ,EAAE,IAAI,EAAE;AAC1B,QAAA,IAAI,CAAC;AAAE,YAAA,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;;AACb,YAAA,CAAC,GAAG,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC;AACzB,IAAA,CAAC;IACD,kBAAkB,CAAC,GAAG,CAAC;AACvB,IAAA,IAAI,CAAC,CAAC;AAAE,QAAA,GAAG,EAAE;IACb,MAAM,OAAO,GAAG,MAAM,CAAC,EAAE,OAAO,EAAE;IAClC,SAAS,CAAC,OAAO,CAAC;AAClB,IAAA,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE;AAClC;AAEA;AACM,SAAU,SAAS,CAAC,UAAgC,EAAA;IACxD,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,gBAAgB,CAAC,UAAU,CAAC;AACjE;;;;"}
|
|
@@ -17,7 +17,7 @@ require('./click.cjs');
|
|
|
17
17
|
require('./ui.cjs');
|
|
18
18
|
require('./page.cjs');
|
|
19
19
|
require('./timeline.cjs');
|
|
20
|
-
require('../chunks/core-
|
|
20
|
+
require('../chunks/core-CLu8ZrC-.cjs');
|
|
21
21
|
require('./gesture.cjs');
|
|
22
22
|
require('../chunks/core-IaorbTdu.cjs');
|
|
23
23
|
require('./svg.cjs');
|
|
@@ -1295,10 +1295,26 @@ interface TimelineStepOptions {
|
|
|
1295
1295
|
stagger?: number;
|
|
1296
1296
|
}
|
|
1297
1297
|
interface ScrubOptions {
|
|
1298
|
-
/** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts. */
|
|
1298
|
+
/** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts (JS engine only). */
|
|
1299
1299
|
offset?: number;
|
|
1300
|
-
/** Smoothing 0–1 (0 = immediate, default 0). */
|
|
1300
|
+
/** Smoothing 0–1 (0 = immediate, default 0). Smoothing needs the JS engine. */
|
|
1301
1301
|
smooth?: number;
|
|
1302
|
+
/**
|
|
1303
|
+
* 4.1: which progress source drives the timeline.
|
|
1304
|
+
* - `'view'` (default): `source` moving through the viewport (CSS `ViewTimeline`, range `cover`).
|
|
1305
|
+
* - `'scroll'`: the scroll position of `source` itself (a scroll container; CSS `ScrollTimeline`).
|
|
1306
|
+
*/
|
|
1307
|
+
source?: 'view' | 'scroll';
|
|
1308
|
+
/** 4.1: `'auto'` (default) uses the browser's native scroll-driven animations when available, `'js'` forces the fallback. */
|
|
1309
|
+
engine?: 'auto' | 'native' | 'js';
|
|
1310
|
+
/** 4.1: scroll axis, `'block'` (default) · `'inline'` · `'x'` · `'y'`. */
|
|
1311
|
+
axis?: 'block' | 'inline' | 'x' | 'y';
|
|
1312
|
+
}
|
|
1313
|
+
/** The function `scrub()` returns: call it to stop. `native` tells which engine runs it. */
|
|
1314
|
+
interface ScrubHandle {
|
|
1315
|
+
(): void;
|
|
1316
|
+
/** `true` when the browser's ScrollTimeline / ViewTimeline drives it (compositor, no JS per frame). */
|
|
1317
|
+
readonly native: boolean;
|
|
1302
1318
|
}
|
|
1303
1319
|
interface Timeline {
|
|
1304
1320
|
/** Total length in ms. */
|
|
@@ -1322,8 +1338,14 @@ interface Timeline {
|
|
|
1322
1338
|
seek(to: TimelinePosition): Timeline;
|
|
1323
1339
|
/** Get or set progress 0–1. */
|
|
1324
1340
|
progress(p?: number): number;
|
|
1325
|
-
/**
|
|
1326
|
-
|
|
1341
|
+
/**
|
|
1342
|
+
* Tie progress to scroll: `source` moving through the viewport (or, with
|
|
1343
|
+
* `{ source: 'scroll' }`, a scroll container's own position). Runs on native
|
|
1344
|
+
* ScrollTimeline / ViewTimeline when available (and no `smooth`, `offset`,
|
|
1345
|
+
* `call()` cues or `onUpdate` need JS), else on a rAF-throttled listener.
|
|
1346
|
+
* Returns a stop function with a `native` flag.
|
|
1347
|
+
*/
|
|
1348
|
+
scrub(source: Element, options?: ScrubOptions): ScrubHandle;
|
|
1327
1349
|
/** Stop and drop every animation (elements keep their last frame). */
|
|
1328
1350
|
cancel(): void;
|
|
1329
1351
|
}
|
|
@@ -1337,7 +1359,9 @@ interface Timeline {
|
|
|
1337
1359
|
* Attributes: `trigger` (`view` default · `click` · `manual`), `scrub`
|
|
1338
1360
|
* (progress follows scroll instead of playing), `overlap` (ms each step
|
|
1339
1361
|
* overlaps the previous, default 0), `duration` (600), `stagger` (ms),
|
|
1340
|
-
* `repeat` (replay every time it enters the viewport).
|
|
1362
|
+
* `repeat` (replay every time it enters the viewport). 4.1: `scrub` runs on native
|
|
1363
|
+
* ScrollTimeline / ViewTimeline when supported (`data-native` is set); `scrub="js"`,
|
|
1364
|
+
* `scrub="scroll"` and `smooth` tune it. Methods: `play()`,
|
|
1341
1365
|
* `reverse()`, `seek(t)`; property `timeline`. Event `usa:complete`.
|
|
1342
1366
|
* Reduced motion: steps appear in their final state.
|
|
1343
1367
|
*/
|
|
@@ -1295,10 +1295,26 @@ interface TimelineStepOptions {
|
|
|
1295
1295
|
stagger?: number;
|
|
1296
1296
|
}
|
|
1297
1297
|
interface ScrubOptions {
|
|
1298
|
-
/** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts. */
|
|
1298
|
+
/** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts (JS engine only). */
|
|
1299
1299
|
offset?: number;
|
|
1300
|
-
/** Smoothing 0–1 (0 = immediate, default 0). */
|
|
1300
|
+
/** Smoothing 0–1 (0 = immediate, default 0). Smoothing needs the JS engine. */
|
|
1301
1301
|
smooth?: number;
|
|
1302
|
+
/**
|
|
1303
|
+
* 4.1: which progress source drives the timeline.
|
|
1304
|
+
* - `'view'` (default): `source` moving through the viewport (CSS `ViewTimeline`, range `cover`).
|
|
1305
|
+
* - `'scroll'`: the scroll position of `source` itself (a scroll container; CSS `ScrollTimeline`).
|
|
1306
|
+
*/
|
|
1307
|
+
source?: 'view' | 'scroll';
|
|
1308
|
+
/** 4.1: `'auto'` (default) uses the browser's native scroll-driven animations when available, `'js'` forces the fallback. */
|
|
1309
|
+
engine?: 'auto' | 'native' | 'js';
|
|
1310
|
+
/** 4.1: scroll axis, `'block'` (default) · `'inline'` · `'x'` · `'y'`. */
|
|
1311
|
+
axis?: 'block' | 'inline' | 'x' | 'y';
|
|
1312
|
+
}
|
|
1313
|
+
/** The function `scrub()` returns: call it to stop. `native` tells which engine runs it. */
|
|
1314
|
+
interface ScrubHandle {
|
|
1315
|
+
(): void;
|
|
1316
|
+
/** `true` when the browser's ScrollTimeline / ViewTimeline drives it (compositor, no JS per frame). */
|
|
1317
|
+
readonly native: boolean;
|
|
1302
1318
|
}
|
|
1303
1319
|
interface Timeline {
|
|
1304
1320
|
/** Total length in ms. */
|
|
@@ -1322,8 +1338,14 @@ interface Timeline {
|
|
|
1322
1338
|
seek(to: TimelinePosition): Timeline;
|
|
1323
1339
|
/** Get or set progress 0–1. */
|
|
1324
1340
|
progress(p?: number): number;
|
|
1325
|
-
/**
|
|
1326
|
-
|
|
1341
|
+
/**
|
|
1342
|
+
* Tie progress to scroll: `source` moving through the viewport (or, with
|
|
1343
|
+
* `{ source: 'scroll' }`, a scroll container's own position). Runs on native
|
|
1344
|
+
* ScrollTimeline / ViewTimeline when available (and no `smooth`, `offset`,
|
|
1345
|
+
* `call()` cues or `onUpdate` need JS), else on a rAF-throttled listener.
|
|
1346
|
+
* Returns a stop function with a `native` flag.
|
|
1347
|
+
*/
|
|
1348
|
+
scrub(source: Element, options?: ScrubOptions): ScrubHandle;
|
|
1327
1349
|
/** Stop and drop every animation (elements keep their last frame). */
|
|
1328
1350
|
cancel(): void;
|
|
1329
1351
|
}
|
|
@@ -1337,7 +1359,9 @@ interface Timeline {
|
|
|
1337
1359
|
* Attributes: `trigger` (`view` default · `click` · `manual`), `scrub`
|
|
1338
1360
|
* (progress follows scroll instead of playing), `overlap` (ms each step
|
|
1339
1361
|
* overlaps the previous, default 0), `duration` (600), `stagger` (ms),
|
|
1340
|
-
* `repeat` (replay every time it enters the viewport).
|
|
1362
|
+
* `repeat` (replay every time it enters the viewport). 4.1: `scrub` runs on native
|
|
1363
|
+
* ScrollTimeline / ViewTimeline when supported (`data-native` is set); `scrub="js"`,
|
|
1364
|
+
* `scrub="scroll"` and `smooth` tune it. Methods: `play()`,
|
|
1341
1365
|
* `reverse()`, `seek(t)`; property `timeline`. Event `usa:complete`.
|
|
1342
1366
|
* Reduced motion: steps appear in their final state.
|
|
1343
1367
|
*/
|
|
@@ -2,23 +2,23 @@ import { defineComponents } from '../components.js';
|
|
|
2
2
|
import { b as bindUsa } from '../chunks/bind-B_CTL6Qn.js';
|
|
3
3
|
export { u as usaEventName } from '../chunks/bind-B_CTL6Qn.js';
|
|
4
4
|
import './reveal.js';
|
|
5
|
-
import '../chunks/base-
|
|
5
|
+
import '../chunks/base-BPG5zvex.js';
|
|
6
6
|
import './text.js';
|
|
7
7
|
import './interaction.js';
|
|
8
8
|
import './feedback.js';
|
|
9
9
|
import './background.js';
|
|
10
|
-
import '../chunks/variants-
|
|
10
|
+
import '../chunks/variants-BVYMcxRv.js';
|
|
11
11
|
import './transitions.js';
|
|
12
12
|
import './physics.js';
|
|
13
|
-
import '../chunks/spring-
|
|
13
|
+
import '../chunks/spring-BziPsW3r.js';
|
|
14
14
|
import './cards.js';
|
|
15
15
|
import './click.js';
|
|
16
16
|
import './ui.js';
|
|
17
17
|
import './page.js';
|
|
18
18
|
import './timeline.js';
|
|
19
|
-
import '../chunks/core-
|
|
19
|
+
import '../chunks/core-QTFk4kgO.js';
|
|
20
20
|
import './gesture.js';
|
|
21
|
-
import '../chunks/core-
|
|
21
|
+
import '../chunks/core-eXX8rB_b.js';
|
|
22
22
|
import './svg.js';
|
|
23
23
|
import './webgl.js';
|
|
24
24
|
import './depth.js';
|
package/dist/components/svg.cjs
CHANGED
|
@@ -76,7 +76,7 @@ function drawLines(root, o = {}) {
|
|
|
76
76
|
};
|
|
77
77
|
}
|
|
78
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-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}}";
|
|
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
80
|
|
|
81
81
|
function defineDraw(tag = 'usa-draw') {
|
|
82
82
|
return base.defineElement(tag, (Base) => class UsaDraw extends Base {
|
|
@@ -239,7 +239,9 @@ function defineMaskReveal(tag = 'usa-mask-reveal') {
|
|
|
239
239
|
reveal() {
|
|
240
240
|
const [a, b] = this.frames();
|
|
241
241
|
this.setAttribute('data-state', 'revealing');
|
|
242
|
-
|
|
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 = '';
|
|
243
245
|
const done = () => {
|
|
244
246
|
this.setAttribute('data-state', 'visible');
|
|
245
247
|
this.emit('complete');
|
|
@@ -253,9 +255,16 @@ function defineMaskReveal(tag = 'usa-mask-reveal') {
|
|
|
253
255
|
this.setAttribute('data-state', 'visible');
|
|
254
256
|
return;
|
|
255
257
|
}
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
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 = '')));
|
|
259
268
|
const t = this.str('trigger', 'view');
|
|
260
269
|
if (t === 'hover')
|
|
261
270
|
this.listen(this, 'pointerenter', () => void this.reveal());
|
|
@@ -268,11 +277,8 @@ function defineMaskReveal(tag = 'usa-mask-reveal') {
|
|
|
268
277
|
done = true;
|
|
269
278
|
void this.reveal();
|
|
270
279
|
}
|
|
271
|
-
else if (!v && this.flag('repeat'))
|
|
272
|
-
|
|
273
|
-
this.style.clipPath = this.frames()[0];
|
|
274
|
-
this.setAttribute('data-state', 'hidden');
|
|
275
|
-
}
|
|
280
|
+
else if (!v && this.flag('repeat'))
|
|
281
|
+
hide();
|
|
276
282
|
}, { threshold: 0.25 });
|
|
277
283
|
}
|
|
278
284
|
}
|
|
@@ -1 +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 const anim = this.motion(this, [{ clipPath: a }, { clipPath: b }], { duration: this.num('duration', 900), delay: this.num('delay', 0), easing: EASE_OUT, fill: 'forwards' });\n const done = () => {\n this.setAttribute('data-state', 'visible');\n this.emit('complete');\n };\n if (!anim) return Promise.resolve(done());\n return anim.finished.then(done, () => {});\n }\n\n mount(): void {\n if (this.reduced) {\n this.setAttribute('data-state', 'visible');\n return;\n }\n this.setAttribute('data-state', 'hidden');\n this.style.clipPath = this.frames()[0];\n this.onCleanup(() => (this.style.clipPath = ''));\n const t = this.str('trigger', 'view');\n if (t === 'hover') this.listen(this, 'pointerenter', () => void this.reveal());\n else if (t === 'click') this.listen(this, 'click', () => void this.reveal());\n else {\n let done = false;\n this.inView((v) => {\n if (v && (!done || this.flag('repeat'))) {\n done = true;\n void this.reveal();\n } else if (!v && this.flag('repeat')) {\n this.getAnimations?.().forEach((x) => x.cancel());\n this.style.clipPath = this.frames()[0];\n this.setAttribute('data-state', 'hidden');\n }\n }, { threshold: 0.25 });\n }\n }\n },\n { id: 'svg', text: css }\n );\n}\n","import { defineElement, type UsaElement } from '../base';\nimport css from './svg.css?raw';\n\ntype Icon = { d: string; frames: Keyframe[]; duration: number; origin?: string };\n\n/** Built-in animated icons (24×24 strokes) and the motion each one plays. */\nexport const ANIM_ICONS: Record<string, Icon> = {\n bell: { d: 'M6 16V11a6 6 0 0 1 12 0v5l2 2H4l2-2M10 20a2 2 0 0 0 4 0', duration: 800, origin: '50% 10%', frames: [{ rotate: '0deg' }, { rotate: '18deg' }, { rotate: '-14deg' }, { rotate: '9deg' }, { rotate: '-5deg' }, { rotate: '0deg' }] },\n heart: { d: 'M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z', duration: 600, frames: [{ scale: 1 }, { scale: 1.3 }, { scale: 0.92 }, { scale: 1.12 }, { scale: 1 }] },\n check: { d: 'M4 12.5l5 5L20 6.5', duration: 600, frames: [{ strokeDashoffset: 1 }, { strokeDashoffset: 0 }] },\n arrow: { d: 'M4 12h15M13 6l6 6-6 6', duration: 600, frames: [{ translate: '0 0' }, { translate: '5px 0' }, { translate: '0 0' }] },\n star: { d: 'M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z', duration: 700, frames: [{ rotate: '0deg', scale: 1 }, { rotate: '72deg', scale: 1.2 }, { rotate: '144deg', scale: 1 }] },\n gear: { d: 'M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1L7 17M17 7l2.1-2.1', duration: 900, frames: [{ rotate: '0deg' }, { rotate: '180deg' }] },\n search: { d: 'M10.5 4a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zM15.5 15.5L20 20', duration: 700, frames: [{ rotate: '0deg' }, { rotate: '-15deg' }, { rotate: '10deg' }, { rotate: '0deg' }] },\n download: { d: 'M12 4v11M7 10l5 5 5-5M5 20h14', duration: 700, frames: [{ translate: '0 0' }, { translate: '0 3px' }, { translate: '0 0' }] },\n};\n\n/**\n * `<usa-anim-icon name=\"bell\">` — an animated stroke icon that plays its\n * motion on `trigger` (`hover` default · `click` · `view` · `loop`).\n * Attributes: `name` (see `ANIM_ICONS`), `size` (24), `label` (accessible\n * name; decorative when absent). Method `play()`. Reduced motion: static.\n */\nexport interface UsaAnimIconElement extends UsaElement {\n play(): void;\n}\n\nexport function defineAnimIcon(tag = 'usa-anim-icon'): CustomElementConstructor | undefined {\n return defineElement(\n tag,\n (Base) =>\n class UsaAnimIcon extends Base {\n static get observedAttributes(): string[] {\n return ['name', 'size', 'label'];\n }\n private icon(): Icon {\n return ANIM_ICONS[this.str('name', 'heart')] || ANIM_ICONS.heart;\n }\n\n play(): void {\n if (this.reduced) return;\n const svg = this.querySelector('svg');\n const i = this.icon();\n const target = i.frames[0].strokeDashoffset !== undefined ? this.querySelector('path') : svg;\n if (target) this.motion(target, i.frames, { duration: i.duration, easing: 'ease-in-out', iterations: this.str('trigger') === 'loop' ? Infinity : 1 });\n }\n\n mount(): void {\n const i = this.icon();\n const size = this.num('size', 24);\n const label = this.str('label');\n this.innerHTML = `<svg viewBox=\"0 0 24 24\" width=\"${size}\" height=\"${size}\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"transform-origin:${i.origin || '50% 50%'}\"${label ? ` role=\"img\" aria-label=\"${label.replace(/\"/g, '"')}\"` : ' aria-hidden=\"true\"'}><path d=\"${i.d}\"${i.frames[0].strokeDashoffset !== undefined ? ' pathLength=\"1\" stroke-dasharray=\"1\"' : ''}></path></svg>`;\n const t = this.str('trigger', 'hover');\n if (t === 'click') this.listen(this, 'click', () => this.play());\n else if (t === 'view' || t === 'loop') this.inView((v) => v && this.play(), { threshold: 0.5 });\n else {\n this.listen(this, 'pointerenter', () => this.play());\n this.listen(this, 'focusin', () => this.play());\n }\n }\n },\n { id: 'svg', text: css }\n );\n}\n","/**\n * use-scroll-animate/components/svg — SVG animation (v3.3).\n * `<usa-draw>` (line drawing), `<usa-morph>` (path morph), `<usa-mask-reveal>`\n * (mask / clip-path reveals) and `<usa-anim-icon>` (animated icons), plus\n * `interpolatePath()`, `morphTo()`, `drawLines()`.\n */\nimport { defineDraw, type UsaDrawElement } from './draw';\nimport { defineMorph, type UsaMorphElement } from './morph';\nimport { defineMaskReveal, type UsaMaskRevealElement } from './mask-reveal';\nimport { defineAnimIcon, type UsaAnimIconElement } from './anim-icon';\n\nexport { defineDraw, defineMorph, defineMaskReveal, defineAnimIcon };\nexport { interpolatePath, pathsCompatible, morphTo, drawLines } from './core';\nexport type { MorphOptions } from './core';\nexport { MASK_SHAPES } from './mask-reveal';\nexport { ANIM_ICONS } from './anim-icon';\nexport type { UsaDrawElement, UsaMorphElement, UsaMaskRevealElement, UsaAnimIconElement };\nexport { configureComponents, prefersReducedMotion } from '../base';\nexport type { ComponentsConfig, UsaElement } from '../base';\n\n/** Register every component of this category under its default tag. */\nexport function defineSvgComponents(): void {\n defineDraw();\n defineMorph();\n defineMaskReveal();\n defineAnimIcon();\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'usa-draw': UsaDrawElement;\n 'usa-morph': UsaMorphElement;\n 'usa-mask-reveal': UsaMaskRevealElement;\n 'usa-anim-icon': UsaAnimIconElement;\n }\n}\n"],"names":["motionScale","caf","prefersReducedMotion","now","clamp","raf","defineElement","EASE_OUT"],"mappings":"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"}
|
|
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 * use-scroll-animate/components/svg — SVG animation (v3.3).\n * `<usa-draw>` (line drawing), `<usa-morph>` (path morph), `<usa-mask-reveal>`\n * (mask / clip-path reveals) and `<usa-anim-icon>` (animated icons), plus\n * `interpolatePath()`, `morphTo()`, `drawLines()`.\n */\nimport { defineDraw, type UsaDrawElement } from './draw';\nimport { defineMorph, type UsaMorphElement } from './morph';\nimport { defineMaskReveal, type UsaMaskRevealElement } from './mask-reveal';\nimport { defineAnimIcon, type UsaAnimIconElement } from './anim-icon';\n\nexport { defineDraw, defineMorph, defineMaskReveal, defineAnimIcon };\nexport { interpolatePath, pathsCompatible, morphTo, drawLines } from './core';\nexport type { MorphOptions } from './core';\nexport { MASK_SHAPES } from './mask-reveal';\nexport { ANIM_ICONS } from './anim-icon';\nexport type { UsaDrawElement, UsaMorphElement, UsaMaskRevealElement, UsaAnimIconElement };\nexport { configureComponents, prefersReducedMotion } from '../base';\nexport type { ComponentsConfig, UsaElement } from '../base';\n\n/** Register every component of this category under its default tag. */\nexport function defineSvgComponents(): void {\n defineDraw();\n defineMorph();\n defineMaskReveal();\n defineAnimIcon();\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'usa-draw': UsaDrawElement;\n 'usa-morph': UsaMorphElement;\n 'usa-mask-reveal': UsaMaskRevealElement;\n 'usa-anim-icon': UsaAnimIconElement;\n }\n}\n"],"names":["motionScale","caf","prefersReducedMotion","now","clamp","raf","defineElement","EASE_OUT"],"mappings":";;;;AAEA,MAAM,GAAG,GAAG,uCAAuC;AAEnD;AACM,SAAU,eAAe,CAAC,CAAS,EAAE,CAAS,EAAA;AAClD,IAAA,OAAO,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE;AAClH;AAEA;;;AAGG;SACa,eAAe,CAAC,CAAS,EAAE,CAAS,EAAE,CAAS,EAAA;IAC7D,IAAI,CAAC,IAAI,CAAC;AAAE,QAAA,OAAO,CAAC;IACpB,IAAI,CAAC,IAAI,CAAC;AAAE,QAAA,OAAO,CAAC;AACpB,IAAA,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC;QAAE,OAAO,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC;IAClD,MAAM,EAAE,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,EAAE;IAC7B,IAAI,CAAC,GAAG,CAAC;IACT,OAAO,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,KAAI;QAC1B,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC;AACvD,QAAA,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;AAC5C,IAAA,CAAC,CAAC;AACJ;AAEA,MAAM,IAAI,GAAG,CAAC,CAAS,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;AAOlD;AACM,SAAU,OAAO,CAAC,IAA8B,EAAE,EAAU,EAAE,IAAkB,EAAE,EAAA;IACtF,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,EAAE;AACzC,IAAA,MAAM,GAAG,GAAG,CAAC,CAAC,CAAC,QAAQ,IAAI,GAAG,IAAIA,gBAAW,EAAE;AAC/C,IAAA,MAAM,IAAI,GAAI,IAAY,CAAC,UAAgC;AAC3D,IAAA,IAAI,IAAI;QAAEC,QAAG,CAAC,IAAI,CAAC;IACnB,IAAIC,yBAAoB,EAAE,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,KAAK,EAAE,EAAE;AACrD,QAAA,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,EAAE,CAAC;AAC1B,QAAA,OAAO,OAAO,CAAC,OAAO,EAAE;IAC1B;AACA,IAAA,MAAM,EAAE,GAAG,CAAC,CAAC,MAAM,IAAI,IAAI;AAC3B,IAAA,MAAM,EAAE,GAAGC,QAAG,EAAE;AAChB,IAAA,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,KAAI;QAC7B,MAAM,IAAI,GAAG,MAAK;AAChB,YAAA,MAAM,CAAC,GAAGC,UAAK,CAAC,CAACD,QAAG,EAAE,GAAG,EAAE,IAAI,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC;AACzC,YAAA,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,eAAe,CAAC,IAAI,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;YACxD,IAAI,CAAC,GAAG,CAAC;AAAG,gBAAA,IAAY,CAAC,UAAU,GAAGE,QAAG,CAAC,IAAI,CAAC;iBAC1C;AACF,gBAAA,IAAY,CAAC,UAAU,GAAG,CAAC;AAC5B,gBAAA,OAAO,EAAE;YACX;AACF,QAAA,CAAC;AACA,QAAA,IAAY,CAAC,UAAU,GAAGA,QAAG,CAAC,IAAI,CAAC;AACtC,IAAA,CAAC,CAAC;AACJ;AAEA,MAAM,QAAQ,GAAG,sDAAsD;AAEvE;;;;AAIG;SACa,SAAS,CAAC,IAAa,EAAE,IAA0B,EAAE,EAAA;AACnE,IAAA,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAiB;AAC1E,IAAA,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,KAAI;AACnB,QAAA,CAAC,CAAC,YAAY,CAAC,YAAY,EAAE,GAAG,CAAC;AACjC,QAAA,CAAC,CAAC,KAAK,CAAC,eAAe,GAAG,KAAK;AACjC,IAAA,CAAC,CAAC;AACF,IAAA,MAAM,EAAE,GAAGD,UAAK,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC;IACxC,OAAO,CAAC,CAAS,KAAI;AACnB,QAAA,MAAM,CAAC,GAAG,MAAM,CAAC,MAAM;QACvB,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,KAAI;YACtB,MAAM,KAAK,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,CAAC;YAC5C,MAAM,KAAK,GAAGA,UAAK,CAAC,CAAC,CAAC,GAAG,KAAK,KAAK,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;YACtD,CAAC,CAAC,KAAK,CAAC,gBAAgB,GAAG,MAAM,CAAC,CAAC,GAAG,KAAK,CAAC;AAC9C,QAAA,CAAC,CAAC;AACJ,IAAA,CAAC;AACH;;;;AChEM,SAAU,UAAU,CAAC,GAAG,GAAG,UAAU,EAAA;AACzC,IAAA,OAAOE,kBAAa,CAClB,GAAG,EACH,CAAC,IAAI,KACH,MAAM,OAAQ,SAAQ,IAAI,CAAA;AAA1B,QAAA,WAAA,GAAA;;AACU,YAAA,IAAA,CAAA,IAAI,GAAwB,MAAK,EAAE,CAAC;YACpC,IAAA,CAAA,EAAE,GAAG,CAAC;YACN,IAAA,CAAA,GAAG,GAAG,CAAC;QAyDjB;AAvDE,QAAA,IAAI,QAAQ,GAAA;YACV,OAAO,IAAI,CAAC,EAAE;QAChB;QACA,IAAI,QAAQ,CAAC,CAAS,EAAA;YACpB,IAAI,CAAC,EAAE,GAAGF,UAAK,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACxB,YAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;YAClB,IAAI,CAAC,eAAe,CAAC,YAAY,EAAE,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC;QAClD;QAEA,IAAI,GAAA;AACF,YAAAH,QAAG,CAAC,IAAI,CAAC,GAAG,CAAC;AACb,YAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAChB,gBAAA,IAAI,CAAC,QAAQ,GAAG,CAAC;AACjB,gBAAA,OAAO,KAAK,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC;YACnC;AACA,YAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,IAAI,CAAC,GAAGD,gBAAW,EAAE;AACtD,YAAA,MAAM,EAAE,GAAGG,QAAG,EAAE;AAChB,YAAA,IAAI,CAAC,QAAQ,GAAG,CAAC;YACjB,MAAM,IAAI,GAAG,MAAK;gBAChB,IAAI,CAAC,QAAQ,GAAG,CAACA,QAAG,EAAE,GAAG,EAAE,IAAI,GAAG;AAClC,gBAAA,IAAI,IAAI,CAAC,EAAE,GAAG,CAAC;AAAE,oBAAA,IAAI,CAAC,GAAG,GAAGE,QAAG,CAAC,IAAI,CAAC;;AAChC,oBAAA,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC;AAC5B,YAAA,CAAC;AACD,YAAA,IAAI,CAAC,GAAG,GAAGA,QAAG,CAAC,IAAI,CAAC;QACtB;QAEA,KAAK,GAAA;YACH,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,GAAG,CAAC,EAAE,CAAC;YAClE,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,MAAM,CAAC;AAC3C,YAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAChB,gBAAA,IAAI,CAAC,QAAQ,GAAG,CAAC;gBACjB;YACF;AACA,YAAA,IAAI,CAAC,QAAQ,GAAG,CAAC;AACjB,YAAA,IAAI,OAAO,KAAK,OAAO,EAAE;gBACvB,MAAM,MAAM,GAAG,MAAK;AAClB,oBAAA,MAAM,CAAC,GAAG,IAAI,CAAC,qBAAqB,EAAE;AACtC,oBAAA,MAAM,EAAE,GAAG,MAAM,CAAC,WAAW,IAAI,CAAC;oBAClC,IAAI,CAAC,QAAQ,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,KAAK,EAAE,GAAG,GAAG,GAAG,CAAC,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,CAAC;AACjE,gBAAA,CAAC;AACD,gBAAA,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACxD,gBAAA,MAAM,EAAE;YACV;iBAAO,IAAI,OAAO,KAAK,OAAO;AAAE,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,cAAc,EAAE,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;iBAC/E,IAAI,OAAO,KAAK,OAAO;AAAE,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;iBACtE;gBACH,IAAI,IAAI,GAAG,KAAK;AAChB,gBAAA,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAI;AAChB,oBAAA,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,EAAE;wBACvC,IAAI,GAAG,IAAI;wBACX,IAAI,CAAC,IAAI,EAAE;oBACb;yBAAO,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;AAAE,wBAAA,IAAI,CAAC,QAAQ,GAAG,CAAC;AACzD,gBAAA,CAAC,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC;YACxB;AACA,YAAA,IAAI,CAAC,SAAS,CAAC,MAAMJ,QAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACrC;KACD,EACH,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,CACzB;AACH;;ACjEM,SAAU,WAAW,CAAC,GAAG,GAAG,WAAW,EAAA;AAC3C,IAAA,OAAOK,kBAAa,CAClB,GAAG,EACH,CAAC,IAAI,KACH,MAAM,QAAS,SAAQ,IAAI,CAAA;AAA3B,QAAA,WAAA,GAAA;;YAIU,IAAA,CAAA,EAAE,GAAG,CAAC;YACN,IAAA,CAAA,KAAK,GAA0B,IAAI;QAoD7C;AAxDE,QAAA,WAAW,kBAAkB,GAAA;AAC3B,YAAA,OAAO,CAAC,OAAO,EAAE,SAAS,CAAC;QAC7B;AAIA,QAAA,IAAI,KAAK,GAAA;YACP,OAAO,IAAI,CAAC,EAAE;QAChB;QAEQ,IAAI,GAAA;AACV,YAAA,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;QAC1E;QAEA,IAAI,GAAA;AACF,YAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE;YACrB,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,MAAM,GAAG,CAAC;AAAE,gBAAA,OAAO,OAAO,CAAC,OAAO,EAAE;AACzD,YAAA,IAAI,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC,MAAM;AAClC,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC;YACvC,OAAO,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,GAAG,CAAC,EAAE,CAAC;QACjF;QAEA,KAAK,GAAA;YACH,IAAI,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC;YACrC,IAAI,CAAC,IAAI,EAAE;AACT,gBAAA,IAAI,CAAC,SAAS,GAAG,mEAAmE;AACpF,gBAAA,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC;YACnC;AACA,YAAA,IAAI,CAAC,KAAK,GAAG,IAAsB;AACnC,YAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE;YACrB,IAAI,CAAC,CAAC,CAAC,CAAC;AAAE,gBAAA,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC;YAC7D,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,OAAO,CAAC;AACtC,YAAA,IAAI,CAAC,KAAK,OAAO,EAAE;AACjB,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;AACzD,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;YAC3D;iBAAO,IAAI,CAAC,KAAK,MAAM,IAAI,CAAC,KAAK,MAAM,EAAE;AACvC,gBAAA,IAAI,KAAiD;AACrD,gBAAA,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAI;oBAChB,aAAa,CAAC,KAAK,CAAC;AACpB,oBAAA,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,OAAO;wBAAE;oBACxB,IAAI,CAAC,KAAK,MAAM;AAAE,wBAAA,OAAO,KAAK,IAAI,CAAC,IAAI,EAAE;oBACzC,KAAK,GAAG,WAAW,CAAC,MAAM,KAAK,IAAI,CAAC,IAAI,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;AACzE,gBAAA,CAAC,CAAC;gBACF,IAAI,CAAC,SAAS,CAAC,MAAM,aAAa,CAAC,KAAK,CAAC,CAAC;YAC5C;iBAAO;AACL,gBAAA,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC;AAAE,oBAAA,IAAI,CAAC,QAAQ,GAAG,CAAC;AACrD,gBAAA,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;AAAE,oBAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC;AACnE,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;gBAClD,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,EAAE,CAAC,CAAgB,KAAI;AAChD,oBAAA,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE;wBACtC,CAAC,CAAC,cAAc,EAAE;AAClB,wBAAA,KAAK,IAAI,CAAC,IAAI,EAAE;oBAClB;AACF,gBAAA,CAAC,CAAC;YACJ;QACF;KACD,EACH,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,CACzB;AACH;;AC/EA;AACO,MAAM,WAAW,GAAqC;AAC3D,IAAA,MAAM,EAAE,CAAC,uBAAuB,EAAE,wBAAwB,CAAC;AAC3D,IAAA,OAAO,EAAE,CAAC,6CAA6C,EAAE,iDAAiD,CAAC;AAC3G,IAAA,IAAI,EAAE,CAAC,mBAAmB,EAAE,iBAAiB,CAAC;AAC9C,IAAA,SAAS,EAAE,CAAC,mBAAmB,EAAE,iBAAiB,CAAC;AACnD,IAAA,IAAI,EAAE,CAAC,kCAAkC,EAAE,6BAA6B,CAAC;AACzE,IAAA,IAAI,EAAE;QACJ,mGAAmG;QACnG,0GAA0G;AAC3G,KAAA;;AAcG,SAAU,gBAAgB,CAAC,GAAG,GAAG,iBAAiB,EAAA;AACtD,IAAA,OAAOA,kBAAa,CAClB,GAAG,EACH,CAAC,IAAI,KACH,MAAM,aAAc,SAAQ,IAAI,CAAA;QACtB,MAAM,GAAA;AACZ,YAAA,MAAM,CAAC,GAAG,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,IAAI,WAAW,CAAC,MAAM;YACxE,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC;AACzB,YAAA,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC;QACzG;QAEA,MAAM,GAAA;YACJ,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE;AAC5B,YAAA,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,WAAW,CAAC;;YAE5C,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE,MAAM,EAAEC,aAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACxK,YAAA,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE;YACvB,MAAM,IAAI,GAAG,MAAK;AAChB,gBAAA,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,SAAS,CAAC;AAC1C,gBAAA,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC;AACvB,YAAA,CAAC;AACD,YAAA,IAAI,CAAC,IAAI;AAAE,gBAAA,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;AACzC,YAAA,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,MAAK,EAAE,CAAC,CAAC;QAC3C;QAEA,KAAK,GAAA;AACH,YAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAChB,gBAAA,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,SAAS,CAAC;gBAC1C;YACF;;;;YAIA,MAAM,IAAI,GAAG,MAAK;AAChB,gBAAA,IAAI,CAAC,aAAa,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,EAAE,CAAC;AACjD,gBAAA,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG;AACxB,gBAAA,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC;AAC3C,YAAA,CAAC;AACD,YAAA,IAAI,EAAE;AACN,YAAA,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC,CAAC,CAAC;YAC7E,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,MAAM,CAAC;YACrC,IAAI,CAAC,KAAK,OAAO;AAAE,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC,MAAM,EAAE,CAAC;iBACzE,IAAI,CAAC,KAAK,OAAO;AAAE,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC,MAAM,EAAE,CAAC;iBACvE;gBACH,IAAI,IAAI,GAAG,KAAK;AAChB,gBAAA,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAI;AAChB,oBAAA,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,EAAE;wBACvC,IAAI,GAAG,IAAI;AACX,wBAAA,KAAK,IAAI,CAAC,MAAM,EAAE;oBACpB;yBAAO,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;AAAE,wBAAA,IAAI,EAAE;AAC9C,gBAAA,CAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;YACzB;QACF;KACD,EACH,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,CACzB;AACH;;AC9EA;AACO,MAAM,UAAU,GAAyB;IAC9C,IAAI,EAAE,EAAE,CAAC,EAAE,yDAAyD,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,EAAE;AAC9O,IAAA,KAAK,EAAE,EAAE,CAAC,EAAE,qEAAqE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE;IAC1L,KAAK,EAAE,EAAE,CAAC,EAAE,oBAAoB,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE,gBAAgB,EAAE,CAAC,EAAE,EAAE,EAAE,gBAAgB,EAAE,CAAC,EAAE,CAAC,EAAE;AAC7G,IAAA,KAAK,EAAE,EAAE,CAAC,EAAE,uBAAuB,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,EAAE;AAClI,IAAA,IAAI,EAAE,EAAE,CAAC,EAAE,wEAAwE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE;IAC7M,IAAI,EAAE,EAAE,CAAC,EAAE,2HAA2H,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,EAAE;AAC3M,IAAA,MAAM,EAAE,EAAE,CAAC,EAAE,gEAAgE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,EAAE;AAC3L,IAAA,QAAQ,EAAE,EAAE,CAAC,EAAE,+BAA+B,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,EAAE;;AAazI,SAAU,cAAc,CAAC,GAAG,GAAG,eAAe,EAAA;AAClD,IAAA,OAAOD,kBAAa,CAClB,GAAG,EACH,CAAC,IAAI,KACH,MAAM,WAAY,SAAQ,IAAI,CAAA;AAC5B,QAAA,WAAW,kBAAkB,GAAA;AAC3B,YAAA,OAAO,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC;QAClC;QACQ,IAAI,GAAA;AACV,YAAA,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,IAAI,UAAU,CAAC,KAAK;QAClE;QAEA,IAAI,GAAA;YACF,IAAI,IAAI,CAAC,OAAO;gBAAE;YAClB,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;AACrC,YAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE;YACrB,MAAM,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,gBAAgB,KAAK,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,GAAG,GAAG;AAC5F,YAAA,IAAI,MAAM;AAAE,gBAAA,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,QAAQ,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,KAAK,MAAM,GAAG,QAAQ,GAAG,CAAC,EAAE,CAAC;QACvJ;QAEA,KAAK,GAAA;AACH,YAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE;YACrB,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,EAAE,CAAC;YACjC,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC;YAC/B,IAAI,CAAC,SAAS,GAAG,CAAA,gCAAA,EAAmC,IAAI,CAAA,UAAA,EAAa,IAAI,CAAA,4HAAA,EAA+H,CAAC,CAAC,MAAM,IAAI,SAAS,IAAI,KAAK,GAAG,CAAA,wBAAA,EAA2B,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAA,CAAA,CAAG,GAAG,qBAAqB,CAAA,UAAA,EAAa,CAAC,CAAC,CAAC,CAAA,CAAA,EAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,gBAAgB,KAAK,SAAS,GAAG,sCAAsC,GAAG,EAAE,CAAA,cAAA,CAAgB;YACxb,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,OAAO,CAAC;YACtC,IAAI,CAAC,KAAK,OAAO;AAAE,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;AAC3D,iBAAA,IAAI,CAAC,KAAK,MAAM,IAAI,CAAC,KAAK,MAAM;gBAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC;iBAC1F;AACH,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,cAAc,EAAE,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;AACpD,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,EAAE,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;YACjD;QACF;KACD,EACH,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,CACzB;AACH;;AC/DA;;;;;AAKG;AAeH;SACgB,mBAAmB,GAAA;AACjC,IAAA,UAAU,EAAE;AACZ,IAAA,WAAW,EAAE;AACb,IAAA,gBAAgB,EAAE;AAClB,IAAA,cAAc,EAAE;AAClB;;;;;;;;;;;;;;;;"}
|
package/dist/components/svg.css
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
/* use-scroll-animate/components/svg */
|
|
2
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-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}}
|
|
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}}
|