use-scroll-animate 3.9.0 → 4.0.1

package/dist/components/solid.cjs

@@ -1,30 +1,32 @@
 'use strict';
 
+var solidJs = require('solid-js');
 var components = require('../components.cjs');
 var bind = require('../chunks/bind-Ui43-n2d.cjs');
 require('./reveal.cjs');
-require('../chunks/base-Dm6ee5ug.cjs');
+require('../chunks/base-CXx7jZ-o.cjs');
 require('./text.cjs');
 require('./interaction.cjs');
 require('./feedback.cjs');
 require('./background.cjs');
-require('../chunks/variants-_dC-ey6R.cjs');
+require('../chunks/variants-BNIrn4ch.cjs');
 require('./transitions.cjs');
 require('./physics.cjs');
-require('../chunks/spring-Dp5BllPB.cjs');
+require('../chunks/spring-2OTnYCzm.cjs');
 require('./cards.cjs');
 require('./click.cjs');
 require('./ui.cjs');
 require('./page.cjs');
 require('./timeline.cjs');
+require('../chunks/core-DXqZm5Il.cjs');
 require('./gesture.cjs');
-require('../chunks/core-CHAtivHV.cjs');
+require('../chunks/core-IaorbTdu.cjs');
 require('./svg.cjs');
 require('./webgl.cjs');
 require('./depth.cjs');
 require('./layout.cjs');
 require('./packs.cjs');
-require('../chunks/index-tags-DYYsgbba.cjs');
+require('../chunks/index-tags-BQh_uGqH.cjs');
 
 /**
  * use-scroll-animate/components/solid — Solid integration (v3.8).
@@ -43,12 +45,26 @@ require('../chunks/index-tags-DYYsgbba.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

@@ -622,19 +622,6 @@ interface UsaAccordionElement extends UsaElement {
     toggleItem(details: HTMLDetailsElement, open?: boolean): Promise<void>;
 }
 
-/**
- * `<usa-flip-list>` — animates its children to their new places whenever
- * they are added, removed or reordered (FLIP: transforms only). Works with
- * any rendering: plain DOM, React keyed lists, Vue `v-for`, Svelte `{#each}`.
- *
- * Attributes: `duration` (ms, 420), `easing`, `disabled`.
- * Method: `flip(mutate)` for explicit changes (also measures resizes).
- * Reduced motion: no animation.
- */
-interface UsaFlipListElement extends UsaElement {
-    flip(mutate: () => void | Promise<void>): Promise<void>;
-}
-
 /**
  * `<usa-view-switch>` — shows one of its children at a time (tabs, wizard
  * steps, app pages) and animates between them. Children are views; name
@@ -654,15 +641,15 @@ interface UsaViewSwitchElement extends UsaElement {
 
 /**
  * use-scroll-animate/components/transitions — view & layout transitions.
- * `<usa-dialog>`, `<usa-accordion>`, `<usa-flip-list>`, `<usa-view-switch>`
- * and the `viewTransition()`, `flip()`, `connectedAnimation()` helpers.
+ * `<usa-dialog>`, `<usa-accordion>`, `<usa-view-switch>`
+ * and the `viewTransition()` and `flip()` helpers (4.0: `<usa-flip-list>` → `<usa-auto-animate>`,
+ * `connectedAnimation()` → `sharedTransition()`, both in `components/layout`).
  */
 
 declare global {
     interface HTMLElementTagNameMap {
         'usa-dialog': UsaDialogElement;
         'usa-accordion': UsaAccordionElement;
-        'usa-flip-list': UsaFlipListElement;
         'usa-view-switch': UsaViewSwitchElement;
     }
 }
@@ -1621,7 +1608,7 @@ declare const COMPONENT_CATEGORIES: {
     readonly interaction: readonly ["usa-ripple", "usa-magnetic", "usa-tilt", "usa-spotlight", "usa-press", "usa-toggle"];
     readonly feedback: readonly ["usa-spinner", "usa-skeleton", "usa-progress", "usa-toaster", "usa-check"];
     readonly background: readonly ["usa-aurora", "usa-particles", "usa-grain", "usa-marquee", "usa-acrylic", "usa-grid-glow", "usa-blobs", "usa-water-ripple", "usa-dot-network"];
-    readonly transitions: readonly ["usa-dialog", "usa-accordion", "usa-flip-list", "usa-view-switch"];
+    readonly transitions: readonly ["usa-dialog", "usa-accordion", "usa-view-switch"];
     readonly physics: readonly ["usa-spring", "usa-draggable", "usa-overscroll"];
     readonly cards: readonly ["usa-card", "usa-card-stack", "usa-sticky-stack", "usa-carousel-3d"];
     readonly click: readonly ["usa-click", "usa-button", "usa-icon-morph", "usa-like", "usa-hold", "usa-double-tap", "usa-checkbox"];
@@ -1684,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

@@ -622,19 +622,6 @@ interface UsaAccordionElement extends UsaElement {
     toggleItem(details: HTMLDetailsElement, open?: boolean): Promise<void>;
 }
 
-/**
- * `<usa-flip-list>` — animates its children to their new places whenever
- * they are added, removed or reordered (FLIP: transforms only). Works with
- * any rendering: plain DOM, React keyed lists, Vue `v-for`, Svelte `{#each}`.
- *
- * Attributes: `duration` (ms, 420), `easing`, `disabled`.
- * Method: `flip(mutate)` for explicit changes (also measures resizes).
- * Reduced motion: no animation.
- */
-interface UsaFlipListElement extends UsaElement {
-    flip(mutate: () => void | Promise<void>): Promise<void>;
-}
-
 /**
  * `<usa-view-switch>` — shows one of its children at a time (tabs, wizard
  * steps, app pages) and animates between them. Children are views; name
@@ -654,15 +641,15 @@ interface UsaViewSwitchElement extends UsaElement {
 
 /**
  * use-scroll-animate/components/transitions — view & layout transitions.
- * `<usa-dialog>`, `<usa-accordion>`, `<usa-flip-list>`, `<usa-view-switch>`
- * and the `viewTransition()`, `flip()`, `connectedAnimation()` helpers.
+ * `<usa-dialog>`, `<usa-accordion>`, `<usa-view-switch>`
+ * and the `viewTransition()` and `flip()` helpers (4.0: `<usa-flip-list>` → `<usa-auto-animate>`,
+ * `connectedAnimation()` → `sharedTransition()`, both in `components/layout`).
  */
 
 declare global {
     interface HTMLElementTagNameMap {
         'usa-dialog': UsaDialogElement;
         'usa-accordion': UsaAccordionElement;
-        'usa-flip-list': UsaFlipListElement;
         'usa-view-switch': UsaViewSwitchElement;
     }
 }
@@ -1621,7 +1608,7 @@ declare const COMPONENT_CATEGORIES: {
     readonly interaction: readonly ["usa-ripple", "usa-magnetic", "usa-tilt", "usa-spotlight", "usa-press", "usa-toggle"];
     readonly feedback: readonly ["usa-spinner", "usa-skeleton", "usa-progress", "usa-toaster", "usa-check"];
     readonly background: readonly ["usa-aurora", "usa-particles", "usa-grain", "usa-marquee", "usa-acrylic", "usa-grid-glow", "usa-blobs", "usa-water-ripple", "usa-dot-network"];
-    readonly transitions: readonly ["usa-dialog", "usa-accordion", "usa-flip-list", "usa-view-switch"];
+    readonly transitions: readonly ["usa-dialog", "usa-accordion", "usa-view-switch"];
     readonly physics: readonly ["usa-spring", "usa-draggable", "usa-overscroll"];
     readonly cards: readonly ["usa-card", "usa-card-stack", "usa-sticky-stack", "usa-carousel-3d"];
     readonly click: readonly ["usa-click", "usa-button", "usa-icon-morph", "usa-like", "usa-hold", "usa-double-tap", "usa-checkbox"];
@@ -1684,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,29 +1,31 @@
+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';
 import './reveal.js';
-import '../chunks/base-BRIPyPtX.js';
+import '../chunks/base-ZARFccur.js';
 import './text.js';
 import './interaction.js';
 import './feedback.js';
 import './background.js';
-import '../chunks/variants-DTypaOH3.js';
+import '../chunks/variants-DvnxvRCM.js';
 import './transitions.js';
 import './physics.js';
-import '../chunks/spring-UBPhrh1X.js';
+import '../chunks/spring-E2ickYNI.js';
 import './cards.js';
 import './click.js';
 import './ui.js';
 import './page.js';
 import './timeline.js';
+import '../chunks/core-Co-6AL0h.js';
 import './gesture.js';
-import '../chunks/core-CYozf_E-.js';
+import '../chunks/core-DKY-fVzR.js';
 import './svg.js';
 import './webgl.js';
 import './depth.js';
 import './layout.js';
 import './packs.js';
-import '../chunks/index-tags-BmQR17Sb.js';
+import '../chunks/index-tags-43Xtd01A.js';
 
 /**
  * use-scroll-animate/components/solid — Solid integration (v3.8).
@@ -42,12 +44,26 @@ import '../chunks/index-tags-BmQR17Sb.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/svelte.cjs

@@ -3,28 +3,29 @@
 var components = require('../components.cjs');
 var bind = require('../chunks/bind-Ui43-n2d.cjs');
 require('./reveal.cjs');
-require('../chunks/base-Dm6ee5ug.cjs');
+require('../chunks/base-CXx7jZ-o.cjs');
 require('./text.cjs');
 require('./interaction.cjs');
 require('./feedback.cjs');
 require('./background.cjs');
-require('../chunks/variants-_dC-ey6R.cjs');
+require('../chunks/variants-BNIrn4ch.cjs');
 require('./transitions.cjs');
 require('./physics.cjs');
-require('../chunks/spring-Dp5BllPB.cjs');
+require('../chunks/spring-2OTnYCzm.cjs');
 require('./cards.cjs');
 require('./click.cjs');
 require('./ui.cjs');
 require('./page.cjs');
 require('./timeline.cjs');
+require('../chunks/core-DXqZm5Il.cjs');
 require('./gesture.cjs');
-require('../chunks/core-CHAtivHV.cjs');
+require('../chunks/core-IaorbTdu.cjs');
 require('./svg.cjs');
 require('./webgl.cjs');
 require('./depth.cjs');
 require('./layout.cjs');
 require('./packs.cjs');
-require('../chunks/index-tags-DYYsgbba.cjs');
+require('../chunks/index-tags-BQh_uGqH.cjs');
 
 /**
  * use-scroll-animate/components/svelte — Svelte integration (v3.8).

package/dist/components/svelte.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"svelte.cjs","sources":["../../src/components/frameworks/svelte.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/svelte — Svelte integration (v3.8).\n * Svelte (3, 4, 5) renders `<usa-*>` tags natively; `use:usa` sets\n * **properties** and `usa:*` listeners in one place, and `defineUsa()`\n * registers the elements on the client only (safe in SvelteKit SSR).\n *\n * ```svelte\n * <script>\n *   import { usa, defineUsa } from 'use-scroll-animate/components/svelte';\n *   import { onMount } from 'svelte';\n *   onMount(() => defineUsa(['click', 'ui']));\n *   let on = false;\n * </script>\n * <usa-toggle use:usa={{ props: { checked: on }, on: { change: (e) => (on = e.detail.checked) } }}></usa-toggle>\n * ```\n * Plain `on:usa:change` does not compile in Svelte 3/4 (colon); use the action or `onusa:change` in Svelte 5.\n */\nimport { defineComponents, type ComponentCategory } from '../index';\nimport { bindUsa, type UsaBinding } from './bind';\n\nexport { bindUsa, usaEventName } from './bind';\nexport type { UsaBinding } from './bind';\n\n/** Svelte action: `use:usa={{ props, on }}`. */\nexport function usa(node: HTMLElement, binding: UsaBinding = {}): { update(b: UsaBinding): void; destroy(): void } {\n  return bindUsa(node, binding);\n}\n\n/** Register the elements (all, or some categories) — call from `onMount` for SSR apps. */\nexport function defineUsa(categories?: ComponentCategory[]): void {\n  if (typeof window !== 'undefined') defineComponents(categories);\n}\n"],"names":["bindUsa","defineComponents"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;AAgBG;AAOH;SACgB,GAAG,CAAC,IAAiB,EAAE,UAAsB,EAAE,EAAA;AAC7D,IAAA,OAAOA,YAAO,CAAC,IAAI,EAAE,OAAO,CAAC;AAC/B;AAEA;AACM,SAAU,SAAS,CAAC,UAAgC,EAAA;IACxD,IAAI,OAAO,MAAM,KAAK,WAAW;QAAEC,2BAAgB,CAAC,UAAU,CAAC;AACjE;;;;;;;"}
+{"version":3,"file":"svelte.cjs","sources":["../../src/components/frameworks/svelte.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/svelte — Svelte integration (v3.8).\n * Svelte (3, 4, 5) renders `<usa-*>` tags natively; `use:usa` sets\n * **properties** and `usa:*` listeners in one place, and `defineUsa()`\n * registers the elements on the client only (safe in SvelteKit SSR).\n *\n * ```svelte\n * <script>\n *   import { usa, defineUsa } from 'use-scroll-animate/components/svelte';\n *   import { onMount } from 'svelte';\n *   onMount(() => defineUsa(['click', 'ui']));\n *   let on = false;\n * </script>\n * <usa-toggle use:usa={{ props: { checked: on }, on: { change: (e) => (on = e.detail.checked) } }}></usa-toggle>\n * ```\n * Plain `on:usa:change` does not compile in Svelte 3/4 (colon); use the action or `onusa:change` in Svelte 5.\n */\nimport { defineComponents, type ComponentCategory } from '../index';\nimport { bindUsa, type UsaBinding } from './bind';\n\nexport { bindUsa, usaEventName } from './bind';\nexport type { UsaBinding } from './bind';\n\n/** Svelte action: `use:usa={{ props, on }}`. */\nexport function usa(node: HTMLElement, binding: UsaBinding = {}): { update(b: UsaBinding): void; destroy(): void } {\n  return bindUsa(node, binding);\n}\n\n/** Register the elements (all, or some categories) — call from `onMount` for SSR apps. */\nexport function defineUsa(categories?: ComponentCategory[]): void {\n  if (typeof window !== 'undefined') defineComponents(categories);\n}\n"],"names":["bindUsa","defineComponents"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;AAgBG;AAOH;SACgB,GAAG,CAAC,IAAiB,EAAE,UAAsB,EAAE,EAAA;AAC7D,IAAA,OAAOA,YAAO,CAAC,IAAI,EAAE,OAAO,CAAC;AAC/B;AAEA;AACM,SAAU,SAAS,CAAC,UAAgC,EAAA;IACxD,IAAI,OAAO,MAAM,KAAK,WAAW;QAAEC,2BAAgB,CAAC,UAAU,CAAC;AACjE;;;;;;;"}

package/dist/components/svelte.d.cts

@@ -622,19 +622,6 @@ interface UsaAccordionElement extends UsaElement {
     toggleItem(details: HTMLDetailsElement, open?: boolean): Promise<void>;
 }
 
-/**
- * `<usa-flip-list>` — animates its children to their new places whenever
- * they are added, removed or reordered (FLIP: transforms only). Works with
- * any rendering: plain DOM, React keyed lists, Vue `v-for`, Svelte `{#each}`.
- *
- * Attributes: `duration` (ms, 420), `easing`, `disabled`.
- * Method: `flip(mutate)` for explicit changes (also measures resizes).
- * Reduced motion: no animation.
- */
-interface UsaFlipListElement extends UsaElement {
-    flip(mutate: () => void | Promise<void>): Promise<void>;
-}
-
 /**
  * `<usa-view-switch>` — shows one of its children at a time (tabs, wizard
  * steps, app pages) and animates between them. Children are views; name
@@ -654,15 +641,15 @@ interface UsaViewSwitchElement extends UsaElement {
 
 /**
  * use-scroll-animate/components/transitions — view & layout transitions.
- * `<usa-dialog>`, `<usa-accordion>`, `<usa-flip-list>`, `<usa-view-switch>`
- * and the `viewTransition()`, `flip()`, `connectedAnimation()` helpers.
+ * `<usa-dialog>`, `<usa-accordion>`, `<usa-view-switch>`
+ * and the `viewTransition()` and `flip()` helpers (4.0: `<usa-flip-list>` → `<usa-auto-animate>`,
+ * `connectedAnimation()` → `sharedTransition()`, both in `components/layout`).
  */
 
 declare global {
     interface HTMLElementTagNameMap {
         'usa-dialog': UsaDialogElement;
         'usa-accordion': UsaAccordionElement;
-        'usa-flip-list': UsaFlipListElement;
         'usa-view-switch': UsaViewSwitchElement;
     }
 }
@@ -1621,7 +1608,7 @@ declare const COMPONENT_CATEGORIES: {
     readonly interaction: readonly ["usa-ripple", "usa-magnetic", "usa-tilt", "usa-spotlight", "usa-press", "usa-toggle"];
     readonly feedback: readonly ["usa-spinner", "usa-skeleton", "usa-progress", "usa-toaster", "usa-check"];
     readonly background: readonly ["usa-aurora", "usa-particles", "usa-grain", "usa-marquee", "usa-acrylic", "usa-grid-glow", "usa-blobs", "usa-water-ripple", "usa-dot-network"];
-    readonly transitions: readonly ["usa-dialog", "usa-accordion", "usa-flip-list", "usa-view-switch"];
+    readonly transitions: readonly ["usa-dialog", "usa-accordion", "usa-view-switch"];
     readonly physics: readonly ["usa-spring", "usa-draggable", "usa-overscroll"];
     readonly cards: readonly ["usa-card", "usa-card-stack", "usa-sticky-stack", "usa-carousel-3d"];
     readonly click: readonly ["usa-click", "usa-button", "usa-icon-morph", "usa-like", "usa-hold", "usa-double-tap", "usa-checkbox"];

package/dist/components/svelte.d.ts

@@ -622,19 +622,6 @@ interface UsaAccordionElement extends UsaElement {
     toggleItem(details: HTMLDetailsElement, open?: boolean): Promise<void>;
 }
 
-/**
- * `<usa-flip-list>` — animates its children to their new places whenever
- * they are added, removed or reordered (FLIP: transforms only). Works with
- * any rendering: plain DOM, React keyed lists, Vue `v-for`, Svelte `{#each}`.
- *
- * Attributes: `duration` (ms, 420), `easing`, `disabled`.
- * Method: `flip(mutate)` for explicit changes (also measures resizes).
- * Reduced motion: no animation.
- */
-interface UsaFlipListElement extends UsaElement {
-    flip(mutate: () => void | Promise<void>): Promise<void>;
-}
-
 /**
  * `<usa-view-switch>` — shows one of its children at a time (tabs, wizard
  * steps, app pages) and animates between them. Children are views; name
@@ -654,15 +641,15 @@ interface UsaViewSwitchElement extends UsaElement {
 
 /**
  * use-scroll-animate/components/transitions — view & layout transitions.
- * `<usa-dialog>`, `<usa-accordion>`, `<usa-flip-list>`, `<usa-view-switch>`
- * and the `viewTransition()`, `flip()`, `connectedAnimation()` helpers.
+ * `<usa-dialog>`, `<usa-accordion>`, `<usa-view-switch>`
+ * and the `viewTransition()` and `flip()` helpers (4.0: `<usa-flip-list>` → `<usa-auto-animate>`,
+ * `connectedAnimation()` → `sharedTransition()`, both in `components/layout`).
  */
 
 declare global {
     interface HTMLElementTagNameMap {
         'usa-dialog': UsaDialogElement;
         'usa-accordion': UsaAccordionElement;
-        'usa-flip-list': UsaFlipListElement;
         'usa-view-switch': UsaViewSwitchElement;
     }
 }
@@ -1621,7 +1608,7 @@ declare const COMPONENT_CATEGORIES: {
     readonly interaction: readonly ["usa-ripple", "usa-magnetic", "usa-tilt", "usa-spotlight", "usa-press", "usa-toggle"];
     readonly feedback: readonly ["usa-spinner", "usa-skeleton", "usa-progress", "usa-toaster", "usa-check"];
     readonly background: readonly ["usa-aurora", "usa-particles", "usa-grain", "usa-marquee", "usa-acrylic", "usa-grid-glow", "usa-blobs", "usa-water-ripple", "usa-dot-network"];
-    readonly transitions: readonly ["usa-dialog", "usa-accordion", "usa-flip-list", "usa-view-switch"];
+    readonly transitions: readonly ["usa-dialog", "usa-accordion", "usa-view-switch"];
     readonly physics: readonly ["usa-spring", "usa-draggable", "usa-overscroll"];
     readonly cards: readonly ["usa-card", "usa-card-stack", "usa-sticky-stack", "usa-carousel-3d"];
     readonly click: readonly ["usa-click", "usa-button", "usa-icon-morph", "usa-like", "usa-hold", "usa-double-tap", "usa-checkbox"];

package/dist/components/svelte.js

@@ -2,28 +2,29 @@ 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';
 import './reveal.js';
-import '../chunks/base-BRIPyPtX.js';
+import '../chunks/base-ZARFccur.js';
 import './text.js';
 import './interaction.js';
 import './feedback.js';
 import './background.js';
-import '../chunks/variants-DTypaOH3.js';
+import '../chunks/variants-DvnxvRCM.js';
 import './transitions.js';
 import './physics.js';
-import '../chunks/spring-UBPhrh1X.js';
+import '../chunks/spring-E2ickYNI.js';
 import './cards.js';
 import './click.js';
 import './ui.js';
 import './page.js';
 import './timeline.js';
+import '../chunks/core-Co-6AL0h.js';
 import './gesture.js';
-import '../chunks/core-CYozf_E-.js';
+import '../chunks/core-DKY-fVzR.js';
 import './svg.js';
 import './webgl.js';
 import './depth.js';
 import './layout.js';
 import './packs.js';
-import '../chunks/index-tags-BmQR17Sb.js';
+import '../chunks/index-tags-43Xtd01A.js';
 
 /**
  * use-scroll-animate/components/svelte — Svelte integration (v3.8).

package/dist/components/svelte.js.map

@@ -1 +1 @@
-{"version":3,"file":"svelte.js","sources":["../../src/components/frameworks/svelte.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/svelte — Svelte integration (v3.8).\n * Svelte (3, 4, 5) renders `<usa-*>` tags natively; `use:usa` sets\n * **properties** and `usa:*` listeners in one place, and `defineUsa()`\n * registers the elements on the client only (safe in SvelteKit SSR).\n *\n * ```svelte\n * <script>\n *   import { usa, defineUsa } from 'use-scroll-animate/components/svelte';\n *   import { onMount } from 'svelte';\n *   onMount(() => defineUsa(['click', 'ui']));\n *   let on = false;\n * </script>\n * <usa-toggle use:usa={{ props: { checked: on }, on: { change: (e) => (on = e.detail.checked) } }}></usa-toggle>\n * ```\n * Plain `on:usa:change` does not compile in Svelte 3/4 (colon); use the action or `onusa:change` in Svelte 5.\n */\nimport { defineComponents, type ComponentCategory } from '../index';\nimport { bindUsa, type UsaBinding } from './bind';\n\nexport { bindUsa, usaEventName } from './bind';\nexport type { UsaBinding } from './bind';\n\n/** Svelte action: `use:usa={{ props, on }}`. */\nexport function usa(node: HTMLElement, binding: UsaBinding = {}): { update(b: UsaBinding): void; destroy(): void } {\n  return bindUsa(node, binding);\n}\n\n/** Register the elements (all, or some categories) — call from `onMount` for SSR apps. */\nexport function defineUsa(categories?: ComponentCategory[]): void {\n  if (typeof window !== 'undefined') defineComponents(categories);\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;AAgBG;AAOH;SACgB,GAAG,CAAC,IAAiB,EAAE,UAAsB,EAAE,EAAA;AAC7D,IAAA,OAAO,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC;AAC/B;AAEA;AACM,SAAU,SAAS,CAAC,UAAgC,EAAA;IACxD,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,gBAAgB,CAAC,UAAU,CAAC;AACjE;;;;"}
+{"version":3,"file":"svelte.js","sources":["../../src/components/frameworks/svelte.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/svelte — Svelte integration (v3.8).\n * Svelte (3, 4, 5) renders `<usa-*>` tags natively; `use:usa` sets\n * **properties** and `usa:*` listeners in one place, and `defineUsa()`\n * registers the elements on the client only (safe in SvelteKit SSR).\n *\n * ```svelte\n * <script>\n *   import { usa, defineUsa } from 'use-scroll-animate/components/svelte';\n *   import { onMount } from 'svelte';\n *   onMount(() => defineUsa(['click', 'ui']));\n *   let on = false;\n * </script>\n * <usa-toggle use:usa={{ props: { checked: on }, on: { change: (e) => (on = e.detail.checked) } }}></usa-toggle>\n * ```\n * Plain `on:usa:change` does not compile in Svelte 3/4 (colon); use the action or `onusa:change` in Svelte 5.\n */\nimport { defineComponents, type ComponentCategory } from '../index';\nimport { bindUsa, type UsaBinding } from './bind';\n\nexport { bindUsa, usaEventName } from './bind';\nexport type { UsaBinding } from './bind';\n\n/** Svelte action: `use:usa={{ props, on }}`. */\nexport function usa(node: HTMLElement, binding: UsaBinding = {}): { update(b: UsaBinding): void; destroy(): void } {\n  return bindUsa(node, binding);\n}\n\n/** Register the elements (all, or some categories) — call from `onMount` for SSR apps. */\nexport function defineUsa(categories?: ComponentCategory[]): void {\n  if (typeof window !== 'undefined') defineComponents(categories);\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;AAgBG;AAOH;SACgB,GAAG,CAAC,IAAiB,EAAE,UAAsB,EAAE,EAAA;AAC7D,IAAA,OAAO,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC;AAC/B;AAEA;AACM,SAAU,SAAS,CAAC,UAAgC,EAAA;IACxD,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,gBAAgB,CAAC,UAAU,CAAC;AACjE;;;;"}

package/dist/components/svg.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var base = require('../chunks/base-Dm6ee5ug.cjs');
+var base = require('../chunks/base-CXx7jZ-o.cjs');
 
 const NUM = /-?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?/gi;
 /** `true` when two path strings share the same commands (so their numbers can be interpolated). */
@@ -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 });
             }
         }