use-scroll-animate 4.0.0 → 4.0.1

package/CHANGELOG.md

@@ -7,6 +7,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [4.0.1] - 2026-10-08
+
+### Fixed
+- **`<usa-mask-reveal>` never revealed in Chromium** (trigger `view`): Chromium's IntersectionObserver honours the target's own `clip-path`, so a fully clipped element never reported as intersecting. It now waits hidden with `opacity: 0`, and the clip-path animation uses `fill: 'both'` so the closed mask also covers the `delay`.
+- **`<usa-timeline trigger="click">` was invisible until first clicked** — it now shows the finished composition and replays from the start on click, `Enter` or `Space` (focusable by default).
+- **WebGL elements (`<usa-shader>`, `<usa-distort>`, `<usa-liquid>`)** only resized their canvas on window resize; they now follow their own size with a `ResizeObserver` (grid reflow, card expand, sidebars).
+- **`<usa-handwriting>`** keeps its intrinsic size when a page has a global `svg { width: … }` icon rule.
+- **Solid:** the `use:usa` directive (`components/solid`) and the `use:scrollAnimate` directive (`/solid`) now track their accessor with `createRenderEffect` — signals update props / options / handlers without calling `refresh()`; listeners are removed on cleanup.
+- **Showcase (checked in headless Chromium at 1280 px and 390 px):** demo SVGs (line drawing, handwriting, `morphTo()`) were squashed to 20 px by the showcase's global icon rule; the pinch-zoom and mask-reveal demos used undefined CSS classes (text overflowed the tile); the header hid the Playground / Store links on phones; deep links to `#c-carousel-3d` (ids with digits) did not resolve; the playground's copy / share buttons threw an unhandled rejection when clipboard access was denied and gave no feedback; stale “v2” / “v3.0” kickers and a Chinese phrase in the English category text.
+
+### Tests
+- New `test/fixes-4-0-1.test.ts` regression suite; `<usa-mask-reveal>` and Solid adapter tests updated.
+
 ## [4.0.0] - 2026-10-07
 
 4.0 completes the 3.x release train by consolidating overlapping APIs. Every removal has a drop-in replacement that shipped during 3.x — see **[Upgrading to 4.0](./docs/upgrading-4.md)** (run your app on 3.9 first: it warns once wherever removed APIs are used).

package/dist/components/solid.cjs

@@ -1,5 +1,6 @@
 'use strict';
 
+var solidJs = require('solid-js');
 var components = require('../components.cjs');
 var bind = require('../chunks/bind-Ui43-n2d.cjs');
 require('./reveal.cjs');
@@ -44,12 +45,26 @@ require('../chunks/index-tags-BQh_uGqH.cjs');
  */
 /**
  * Solid directive (`use:usa`). Solid calls it with the element and an
- * accessor; the binding is read once on mount and re-read whenever
- * `refresh()` on the returned handle is called (or wrap it in `createEffect`).
+ * accessor; since 4.0.1 the binding is tracked with `createRenderEffect`, so
+ * signals read inside `{{ props, on }}` update the element automatically and
+ * the listeners are removed on cleanup. `refresh()` is kept for code that
+ * calls the directive outside a reactive owner.
  */
 function usa(el, accessor) {
-    const b = bind.bindUsa(el, accessor() || {});
-    return { refresh: () => b.update(accessor() || {}), destroy: b.destroy };
+    let b = null;
+    const run = () => {
+        const v = accessor() || {};
+        if (b)
+            b.update(v);
+        else
+            b = bind.bindUsa(el, v);
+    };
+    solidJs.createRenderEffect(run);
+    if (!b)
+        run();
+    const destroy = () => b?.destroy();
+    solidJs.onCleanup(destroy);
+    return { refresh: run, destroy };
 }
 /** Register the elements (all, or some categories) — call from `onMount` in SSR apps. */
 function defineUsa(categories) {

package/dist/components/solid.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"solid.cjs","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 once on mount and re-read whenever\n * `refresh()` on the returned handle is called (or wrap it in `createEffect`).\n */\nexport function usa(el: HTMLElement, accessor: () => UsaBinding | undefined): { refresh(): void; destroy(): void } {\n  const b = bindUsa(el, accessor() || {});\n  return { refresh: () => b.update(accessor() || {}), destroy: b.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":["bindUsa","defineComponents"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;AAcG;AAQH;;;;AAIG;AACG,SAAU,GAAG,CAAC,EAAe,EAAE,QAAsC,EAAA;IACzE,MAAM,CAAC,GAAGA,YAAO,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IACvC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,OAAO,EAAE;AAC1E;AAEA;AACM,SAAU,SAAS,CAAC,UAAgC,EAAA;IACxD,IAAI,OAAO,MAAM,KAAK,WAAW;QAAEC,2BAAgB,CAAC,UAAU,CAAC;AACjE;;;;;;;"}
+{"version":3,"file":"solid.cjs","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":["bindUsa","createRenderEffect","onCleanup","defineComponents"],"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,GAAGA,YAAO,CAAC,EAAE,EAAE,CAAC,CAAC;AACzB,IAAA,CAAC;IACDC,0BAAkB,CAAC,GAAG,CAAC;AACvB,IAAA,IAAI,CAAC,CAAC;AAAE,QAAA,GAAG,EAAE;IACb,MAAM,OAAO,GAAG,MAAM,CAAC,EAAE,OAAO,EAAE;IAClCC,iBAAS,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;QAAEC,2BAAgB,CAAC,UAAU,CAAC;AACjE;;;;;;;"}

package/dist/components/solid.d.cts

@@ -1671,26 +1671,12 @@ type UsaIntrinsicElements = {
     [K in Tags]: UsaAttributes;
 };
 
-/**
- * use-scroll-animate/components/solid — Solid integration (v3.8).
- * Solid renders custom elements natively: set properties with `prop:` and
- * listen with `on:` (`<usa-toggle prop:checked={on()} on:usa:change={…}>`).
- * This entry adds `defineUsa()` (client only, SolidStart-safe), a `usa`
- * directive for `use:usa={{ props, on }}`, and JSX types.
- *
- * ```tsx
- * import { defineUsa, usa } from 'use-scroll-animate/components/solid';
- * import type {} from 'use-scroll-animate/components/solid'; // JSX types
- * onMount(() => defineUsa());
- * false && usa; // keep the directive import (Solid convention)
- * <usa-card use:usa={{ on: { flip: (e) => console.log(e.detail) } }} effect="flip">…</usa-card>
- * ```
- */
-
 /**
  * Solid directive (`use:usa`). Solid calls it with the element and an
- * accessor; the binding is read once on mount and re-read whenever
- * `refresh()` on the returned handle is called (or wrap it in `createEffect`).
+ * accessor; since 4.0.1 the binding is tracked with `createRenderEffect`, so
+ * signals read inside `{{ props, on }}` update the element automatically and
+ * the listeners are removed on cleanup. `refresh()` is kept for code that
+ * calls the directive outside a reactive owner.
  */
 declare function usa(el: HTMLElement, accessor: () => UsaBinding | undefined): {
     refresh(): void;

package/dist/components/solid.d.ts

@@ -1671,26 +1671,12 @@ type UsaIntrinsicElements = {
     [K in Tags]: UsaAttributes;
 };
 
-/**
- * use-scroll-animate/components/solid — Solid integration (v3.8).
- * Solid renders custom elements natively: set properties with `prop:` and
- * listen with `on:` (`<usa-toggle prop:checked={on()} on:usa:change={…}>`).
- * This entry adds `defineUsa()` (client only, SolidStart-safe), a `usa`
- * directive for `use:usa={{ props, on }}`, and JSX types.
- *
- * ```tsx
- * import { defineUsa, usa } from 'use-scroll-animate/components/solid';
- * import type {} from 'use-scroll-animate/components/solid'; // JSX types
- * onMount(() => defineUsa());
- * false && usa; // keep the directive import (Solid convention)
- * <usa-card use:usa={{ on: { flip: (e) => console.log(e.detail) } }} effect="flip">…</usa-card>
- * ```
- */
-
 /**
  * Solid directive (`use:usa`). Solid calls it with the element and an
- * accessor; the binding is read once on mount and re-read whenever
- * `refresh()` on the returned handle is called (or wrap it in `createEffect`).
+ * accessor; since 4.0.1 the binding is tracked with `createRenderEffect`, so
+ * signals read inside `{{ props, on }}` update the element automatically and
+ * the listeners are removed on cleanup. `refresh()` is kept for code that
+ * calls the directive outside a reactive owner.
  */
 declare function usa(el: HTMLElement, accessor: () => UsaBinding | undefined): {
     refresh(): void;

package/dist/components/solid.js

@@ -1,3 +1,4 @@
+import { createRenderEffect, onCleanup } from 'solid-js';
 import { defineComponents } from '../components.js';
 import { b as bindUsa } from '../chunks/bind-B_CTL6Qn.js';
 export { u as usaEventName } from '../chunks/bind-B_CTL6Qn.js';
@@ -43,12 +44,26 @@ import '../chunks/index-tags-43Xtd01A.js';
  */
 /**
  * Solid directive (`use:usa`). Solid calls it with the element and an
- * accessor; the binding is read once on mount and re-read whenever
- * `refresh()` on the returned handle is called (or wrap it in `createEffect`).
+ * accessor; since 4.0.1 the binding is tracked with `createRenderEffect`, so
+ * signals read inside `{{ props, on }}` update the element automatically and
+ * the listeners are removed on cleanup. `refresh()` is kept for code that
+ * calls the directive outside a reactive owner.
  */
 function usa(el, accessor) {
-    const b = bindUsa(el, accessor() || {});
-    return { refresh: () => b.update(accessor() || {}), destroy: b.destroy };
+    let b = null;
+    const run = () => {
+        const v = accessor() || {};
+        if (b)
+            b.update(v);
+        else
+            b = bindUsa(el, v);
+    };
+    createRenderEffect(run);
+    if (!b)
+        run();
+    const destroy = () => b?.destroy();
+    onCleanup(destroy);
+    return { refresh: run, destroy };
 }
 /** Register the elements (all, or some categories) — call from `onMount` in SSR apps. */
 function defineUsa(categories) {

package/dist/components/solid.js.map

@@ -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 once on mount and re-read whenever\n * `refresh()` on the returned handle is called (or wrap it in `createEffect`).\n */\nexport function usa(el: HTMLElement, accessor: () => UsaBinding | undefined): { refresh(): void; destroy(): void } {\n  const b = bindUsa(el, accessor() || {});\n  return { refresh: () => b.update(accessor() || {}), destroy: b.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;AAQH;;;;AAIG;AACG,SAAU,GAAG,CAAC,EAAe,EAAE,QAAsC,EAAA;IACzE,MAAM,CAAC,GAAG,OAAO,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IACvC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,OAAO,EAAE;AAC1E;AAEA;AACM,SAAU,SAAS,CAAC,UAAgC,EAAA;IACxD,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,gBAAgB,CAAC,UAAU,CAAC;AACjE;;;;"}
+{"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;;;;"}

package/dist/components/svg.cjs

@@ -76,7 +76,7 @@ function drawLines(root, o = {}) {
     };
 }
 
-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}}";
+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}}";
 
 function defineDraw(tag = 'usa-draw') {
     return base.defineElement(tag, (Base) => class UsaDraw extends Base {
@@ -239,7 +239,9 @@ function defineMaskReveal(tag = 'usa-mask-reveal') {
         reveal() {
             const [a, b] = this.frames();
             this.setAttribute('data-state', 'revealing');
-            const anim = this.motion(this, [{ clipPath: a }, { clipPath: b }], { duration: this.num('duration', 900), delay: this.num('delay', 0), easing: base.EASE_OUT, fill: 'forwards' });
+            // fill 'both' keeps the closed mask applied during `delay`
+            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' });
+            this.style.opacity = '';
             const done = () => {
                 this.setAttribute('data-state', 'visible');
                 this.emit('complete');
@@ -253,9 +255,16 @@ function defineMaskReveal(tag = 'usa-mask-reveal') {
                 this.setAttribute('data-state', 'visible');
                 return;
             }
-            this.setAttribute('data-state', 'hidden');
-            this.style.clipPath = this.frames()[0];
-            this.onCleanup(() => (this.style.clipPath = ''));
+            // 4.0.1: hide with opacity, not the closed clip-path — Chromium's
+            // IntersectionObserver honours the target's own clip-path, so a fully
+            // clipped element never reports as intersecting and never revealed.
+            const hide = () => {
+                this.getAnimations?.().forEach((x) => x.cancel());
+                this.style.opacity = '0';
+                this.setAttribute('data-state', 'hidden');
+            };
+            hide();
+            this.onCleanup(() => ((this.style.opacity = ''), (this.style.clipPath = '')));
             const t = this.str('trigger', 'view');
             if (t === 'hover')
                 this.listen(this, 'pointerenter', () => void this.reveal());
@@ -268,11 +277,8 @@ function defineMaskReveal(tag = 'usa-mask-reveal') {
                         done = true;
                         void this.reveal();
                     }
-                    else if (!v && this.flag('repeat')) {
-                        this.getAnimations?.().forEach((x) => x.cancel());
-                        this.style.clipPath = this.frames()[0];
-                        this.setAttribute('data-state', 'hidden');
-                    }
+                    else if (!v && this.flag('repeat'))
+                        hide();
                 }, { threshold: 0.25 });
             }
         }

package/dist/components/svg.cjs.map

@@ -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, '&quot;')}\"` : ' aria-hidden=\"true\"'}><path d=\"${i.d}\"${i.frames[0].strokeDashoffset !== undefined ? ' pathLength=\"1\" stroke-dasharray=\"1\"' : ''}></path></svg>`;\n          const t = this.str('trigger', 'hover');\n          if (t === 'click') this.listen(this, 'click', () => this.play());\n          else if (t === 'view' || t === 'loop') this.inView((v) => v && this.play(), { threshold: 0.5 });\n          else {\n            this.listen(this, 'pointerenter', () => this.play());\n            this.listen(this, 'focusin', () => this.play());\n          }\n        }\n      },\n    { id: 'svg', text: css }\n  );\n}\n","/**\n * use-scroll-animate/components/svg — SVG animation (v3.3).\n * `<usa-draw>` (line drawing), `<usa-morph>` (path morph), `<usa-mask-reveal>`\n * (mask / clip-path reveals) and `<usa-anim-icon>` (animated icons), plus\n * `interpolatePath()`, `morphTo()`, `drawLines()`.\n */\nimport { defineDraw, type UsaDrawElement } from './draw';\nimport { defineMorph, type UsaMorphElement } from './morph';\nimport { defineMaskReveal, type UsaMaskRevealElement } from './mask-reveal';\nimport { defineAnimIcon, type UsaAnimIconElement } from './anim-icon';\n\nexport { defineDraw, defineMorph, defineMaskReveal, defineAnimIcon };\nexport { interpolatePath, pathsCompatible, morphTo, drawLines } from './core';\nexport type { MorphOptions } from './core';\nexport { MASK_SHAPES } from './mask-reveal';\nexport { ANIM_ICONS } from './anim-icon';\nexport type { UsaDrawElement, UsaMorphElement, UsaMaskRevealElement, UsaAnimIconElement };\nexport { configureComponents, prefersReducedMotion } from '../base';\nexport type { ComponentsConfig, UsaElement } from '../base';\n\n/** Register every component of this category under its default tag. */\nexport function defineSvgComponents(): void {\n  defineDraw();\n  defineMorph();\n  defineMaskReveal();\n  defineAnimIcon();\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'usa-draw': UsaDrawElement;\n    'usa-morph': UsaMorphElement;\n    'usa-mask-reveal': UsaMaskRevealElement;\n    'usa-anim-icon': UsaAnimIconElement;\n  }\n}\n"],"names":["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;YAC5C,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,UAAU,EAAE,CAAC;YAC5K,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;AACA,YAAA,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC;AACzC,YAAA,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;AACtC,YAAA,IAAI,CAAC,SAAS,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC,CAAC;YAChD,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,EAAE;AACpC,wBAAA,IAAI,CAAC,aAAa,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,EAAE,CAAC;AACjD,wBAAA,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;AACtC,wBAAA,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC;oBAC3C;AACF,gBAAA,CAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;YACzB;QACF;KACD,EACH,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,CACzB;AACH;;ACzEA;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;;;;;;;;;;;;;;;;"}
+{"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, '&quot;')}\"` : ' aria-hidden=\"true\"'}><path d=\"${i.d}\"${i.frames[0].strokeDashoffset !== undefined ? ' pathLength=\"1\" stroke-dasharray=\"1\"' : ''}></path></svg>`;\n          const t = this.str('trigger', 'hover');\n          if (t === 'click') this.listen(this, 'click', () => this.play());\n          else if (t === 'view' || t === 'loop') this.inView((v) => v && this.play(), { threshold: 0.5 });\n          else {\n            this.listen(this, 'pointerenter', () => this.play());\n            this.listen(this, 'focusin', () => this.play());\n          }\n        }\n      },\n    { id: 'svg', text: css }\n  );\n}\n","/**\n * use-scroll-animate/components/svg — SVG animation (v3.3).\n * `<usa-draw>` (line drawing), `<usa-morph>` (path morph), `<usa-mask-reveal>`\n * (mask / clip-path reveals) and `<usa-anim-icon>` (animated icons), plus\n * `interpolatePath()`, `morphTo()`, `drawLines()`.\n */\nimport { defineDraw, type UsaDrawElement } from './draw';\nimport { defineMorph, type UsaMorphElement } from './morph';\nimport { defineMaskReveal, type UsaMaskRevealElement } from './mask-reveal';\nimport { defineAnimIcon, type UsaAnimIconElement } from './anim-icon';\n\nexport { defineDraw, defineMorph, defineMaskReveal, defineAnimIcon };\nexport { interpolatePath, pathsCompatible, morphTo, drawLines } from './core';\nexport type { MorphOptions } from './core';\nexport { MASK_SHAPES } from './mask-reveal';\nexport { ANIM_ICONS } from './anim-icon';\nexport type { UsaDrawElement, UsaMorphElement, UsaMaskRevealElement, UsaAnimIconElement };\nexport { configureComponents, prefersReducedMotion } from '../base';\nexport type { ComponentsConfig, UsaElement } from '../base';\n\n/** Register every component of this category under its default tag. */\nexport function defineSvgComponents(): void {\n  defineDraw();\n  defineMorph();\n  defineMaskReveal();\n  defineAnimIcon();\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'usa-draw': UsaDrawElement;\n    'usa-morph': UsaMorphElement;\n    'usa-mask-reveal': UsaMaskRevealElement;\n    'usa-anim-icon': UsaAnimIconElement;\n  }\n}\n"],"names":["motionScale","caf","prefersReducedMotion","now","clamp","raf","defineElement","EASE_OUT"],"mappings":"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"}

package/dist/components/svg.css

@@ -1,3 +1,3 @@
 /* use-scroll-animate/components/svg */
 .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}
-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}}
+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}}

package/dist/components/svg.js

@@ -75,7 +75,7 @@ function drawLines(root, o = {}) {
     };
 }
 
-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}}";
+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}}";
 
 function defineDraw(tag = 'usa-draw') {
     return defineElement(tag, (Base) => class UsaDraw extends Base {
@@ -238,7 +238,9 @@ function defineMaskReveal(tag = 'usa-mask-reveal') {
         reveal() {
             const [a, b] = this.frames();
             this.setAttribute('data-state', 'revealing');
-            const anim = this.motion(this, [{ clipPath: a }, { clipPath: b }], { duration: this.num('duration', 900), delay: this.num('delay', 0), easing: EASE_OUT, fill: 'forwards' });
+            // fill 'both' keeps the closed mask applied during `delay`
+            const anim = this.motion(this, [{ clipPath: a }, { clipPath: b }], { duration: this.num('duration', 900), delay: this.num('delay', 0), easing: EASE_OUT, fill: 'both' });
+            this.style.opacity = '';
             const done = () => {
                 this.setAttribute('data-state', 'visible');
                 this.emit('complete');
@@ -252,9 +254,16 @@ function defineMaskReveal(tag = 'usa-mask-reveal') {
                 this.setAttribute('data-state', 'visible');
                 return;
             }
-            this.setAttribute('data-state', 'hidden');
-            this.style.clipPath = this.frames()[0];
-            this.onCleanup(() => (this.style.clipPath = ''));
+            // 4.0.1: hide with opacity, not the closed clip-path — Chromium's
+            // IntersectionObserver honours the target's own clip-path, so a fully
+            // clipped element never reports as intersecting and never revealed.
+            const hide = () => {
+                this.getAnimations?.().forEach((x) => x.cancel());
+                this.style.opacity = '0';
+                this.setAttribute('data-state', 'hidden');
+            };
+            hide();
+            this.onCleanup(() => ((this.style.opacity = ''), (this.style.clipPath = '')));
             const t = this.str('trigger', 'view');
             if (t === 'hover')
                 this.listen(this, 'pointerenter', () => void this.reveal());
@@ -267,11 +276,8 @@ function defineMaskReveal(tag = 'usa-mask-reveal') {
                         done = true;
                         void this.reveal();
                     }
-                    else if (!v && this.flag('repeat')) {
-                        this.getAnimations?.().forEach((x) => x.cancel());
-                        this.style.clipPath = this.frames()[0];
-                        this.setAttribute('data-state', 'hidden');
-                    }
+                    else if (!v && this.flag('repeat'))
+                        hide();
                 }, { threshold: 0.25 });
             }
         }