use-scroll-animate 4.3.0 → 4.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +15 -0
- package/dist/chunks/{base-BPG5zvex.js → base-BtJDNCB6.js} +45 -5
- package/dist/chunks/base-BtJDNCB6.js.map +1 -0
- package/dist/chunks/{base-CXx7jZ-o.cjs → base-DE2yzxE7.cjs} +47 -4
- package/dist/chunks/base-DE2yzxE7.cjs.map +1 -0
- package/dist/chunks/{core-BRIIoKeS.cjs → core-BC9S2osy.cjs} +2 -2
- package/dist/chunks/{core-BRIIoKeS.cjs.map → core-BC9S2osy.cjs.map} +1 -1
- package/dist/chunks/{core-IaorbTdu.cjs → core-DPYjLqA0.cjs} +2 -2
- package/dist/chunks/{core-IaorbTdu.cjs.map → core-DPYjLqA0.cjs.map} +1 -1
- package/dist/chunks/{core-LkGRmgES.js → core-DS1nrx5L.js} +2 -2
- package/dist/chunks/{core-LkGRmgES.js.map → core-DS1nrx5L.js.map} +1 -1
- package/dist/chunks/{core-eXX8rB_b.js → core-DX6pdOoY.js} +2 -2
- package/dist/chunks/{core-eXX8rB_b.js.map → core-DX6pdOoY.js.map} +1 -1
- package/dist/chunks/{spring-BziPsW3r.js → spring-CxRz49Wk.js} +2 -2
- package/dist/chunks/{spring-BziPsW3r.js.map → spring-CxRz49Wk.js.map} +1 -1
- package/dist/chunks/{spring-2OTnYCzm.cjs → spring-hsmgd7ml.cjs} +2 -2
- package/dist/chunks/{spring-2OTnYCzm.cjs.map → spring-hsmgd7ml.cjs.map} +1 -1
- package/dist/chunks/{variants-BNIrn4ch.cjs → variants-CM2zaG8v.cjs} +2 -2
- package/dist/chunks/{variants-BNIrn4ch.cjs.map → variants-CM2zaG8v.cjs.map} +1 -1
- package/dist/chunks/{variants-BVYMcxRv.js → variants-dD6SbUMR.js} +2 -2
- package/dist/chunks/{variants-BVYMcxRv.js.map → variants-dD6SbUMR.js.map} +1 -1
- package/dist/components/a11y.cjs +239 -0
- package/dist/components/a11y.cjs.map +1 -0
- package/dist/components/a11y.d.cts +120 -0
- package/dist/components/a11y.d.ts +120 -0
- package/dist/components/a11y.js +224 -0
- package/dist/components/a11y.js.map +1 -0
- package/dist/components/angular.cjs +6 -5
- package/dist/components/angular.cjs.map +1 -1
- package/dist/components/angular.js +6 -5
- package/dist/components/angular.js.map +1 -1
- package/dist/components/background.cjs +2 -2
- package/dist/components/background.d.cts +10 -0
- package/dist/components/background.d.ts +10 -0
- package/dist/components/background.js +3 -3
- package/dist/components/cards.cjs +2 -2
- package/dist/components/cards.d.cts +10 -0
- package/dist/components/cards.d.ts +10 -0
- package/dist/components/cards.js +3 -3
- package/dist/components/click.cjs +2 -2
- package/dist/components/click.d.cts +10 -0
- package/dist/components/click.d.ts +10 -0
- package/dist/components/click.js +3 -3
- package/dist/components/depth.cjs +3 -3
- package/dist/components/depth.d.cts +10 -0
- package/dist/components/depth.d.ts +10 -0
- package/dist/components/depth.js +4 -4
- package/dist/components/feedback.cjs +1 -1
- package/dist/components/feedback.d.cts +10 -0
- package/dist/components/feedback.d.ts +10 -0
- package/dist/components/feedback.js +2 -2
- package/dist/components/gesture.cjs +3 -3
- package/dist/components/gesture.d.cts +10 -0
- package/dist/components/gesture.d.ts +10 -0
- package/dist/components/gesture.js +5 -5
- package/dist/components/interaction.cjs +1 -1
- package/dist/components/interaction.d.cts +10 -0
- package/dist/components/interaction.d.ts +10 -0
- package/dist/components/interaction.js +2 -2
- package/dist/components/layout.cjs +1 -1
- package/dist/components/layout.d.cts +10 -0
- package/dist/components/layout.d.ts +10 -0
- package/dist/components/layout.js +2 -2
- package/dist/components/packs.cjs +1 -1
- package/dist/components/packs.d.cts +10 -0
- package/dist/components/packs.d.ts +10 -0
- package/dist/components/packs.js +2 -2
- package/dist/components/page.cjs +6 -3
- package/dist/components/page.cjs.map +1 -1
- package/dist/components/page.d.cts +10 -0
- package/dist/components/page.d.ts +10 -0
- package/dist/components/page.js +7 -4
- package/dist/components/page.js.map +1 -1
- package/dist/components/physics.cjs +2 -2
- package/dist/components/physics.d.cts +10 -0
- package/dist/components/physics.d.ts +10 -0
- package/dist/components/physics.js +4 -4
- package/dist/components/reveal.cjs +1 -1
- package/dist/components/reveal.d.cts +10 -0
- package/dist/components/reveal.d.ts +10 -0
- package/dist/components/reveal.js +2 -2
- package/dist/components/solid.cjs +6 -5
- package/dist/components/solid.cjs.map +1 -1
- package/dist/components/solid.js +6 -5
- package/dist/components/solid.js.map +1 -1
- package/dist/components/svelte.cjs +6 -5
- package/dist/components/svelte.cjs.map +1 -1
- package/dist/components/svelte.js +6 -5
- package/dist/components/svelte.js.map +1 -1
- package/dist/components/svg.cjs +1 -1
- package/dist/components/svg.d.cts +10 -0
- package/dist/components/svg.d.ts +10 -0
- package/dist/components/svg.js +2 -2
- package/dist/components/text.cjs +2 -2
- package/dist/components/text.d.cts +10 -0
- package/dist/components/text.d.ts +10 -0
- package/dist/components/text.js +3 -3
- package/dist/components/timeline.cjs +2 -2
- package/dist/components/timeline.d.cts +10 -0
- package/dist/components/timeline.d.ts +10 -0
- package/dist/components/timeline.js +4 -4
- package/dist/components/transitions.cjs +1 -1
- package/dist/components/transitions.d.cts +10 -0
- package/dist/components/transitions.d.ts +10 -0
- package/dist/components/transitions.js +2 -2
- package/dist/components/ui.cjs +3 -3
- package/dist/components/ui.d.cts +10 -0
- package/dist/components/ui.d.ts +10 -0
- package/dist/components/ui.js +5 -5
- package/dist/components/vue.cjs +6 -5
- package/dist/components/vue.cjs.map +1 -1
- package/dist/components/vue.js +6 -5
- package/dist/components/vue.js.map +1 -1
- package/dist/components/webgl.cjs +1 -1
- package/dist/components/webgl.d.cts +10 -0
- package/dist/components/webgl.d.ts +10 -0
- package/dist/components/webgl.js +2 -2
- package/dist/components.cjs +21 -5
- package/dist/components.cjs.map +1 -1
- package/dist/components.d.cts +105 -2
- package/dist/components.d.ts +105 -2
- package/dist/components.js +8 -7
- package/dist/components.js.map +1 -1
- package/dist/components.umd.js +2 -2
- package/dist/components.umd.js.map +1 -1
- package/dist/index.cjs +2 -2
- package/dist/index.js +2 -2
- package/dist/index.umd.js.map +1 -1
- package/docs/ROADMAP.md +1 -1
- package/docs/accessibility.md +28 -0
- package/package.json +11 -1
- package/dist/chunks/base-BPG5zvex.js.map +0 -1
- package/dist/chunks/base-CXx7jZ-o.cjs.map +0 -1
|
@@ -3,29 +3,30 @@
|
|
|
3
3
|
var components = require('../components.cjs');
|
|
4
4
|
var bind = require('../chunks/bind-Ui43-n2d.cjs');
|
|
5
5
|
require('./reveal.cjs');
|
|
6
|
-
require('../chunks/base-
|
|
6
|
+
require('../chunks/base-DE2yzxE7.cjs');
|
|
7
7
|
require('./text.cjs');
|
|
8
|
-
require('../chunks/core-
|
|
8
|
+
require('../chunks/core-BC9S2osy.cjs');
|
|
9
9
|
require('./tokens.cjs');
|
|
10
10
|
require('./interaction.cjs');
|
|
11
11
|
require('./feedback.cjs');
|
|
12
12
|
require('./background.cjs');
|
|
13
|
-
require('../chunks/variants-
|
|
13
|
+
require('../chunks/variants-CM2zaG8v.cjs');
|
|
14
14
|
require('./transitions.cjs');
|
|
15
15
|
require('./physics.cjs');
|
|
16
|
-
require('../chunks/spring-
|
|
16
|
+
require('../chunks/spring-hsmgd7ml.cjs');
|
|
17
17
|
require('./cards.cjs');
|
|
18
18
|
require('./click.cjs');
|
|
19
19
|
require('./ui.cjs');
|
|
20
20
|
require('./page.cjs');
|
|
21
21
|
require('./timeline.cjs');
|
|
22
22
|
require('./gesture.cjs');
|
|
23
|
-
require('../chunks/core-
|
|
23
|
+
require('../chunks/core-DPYjLqA0.cjs');
|
|
24
24
|
require('./svg.cjs');
|
|
25
25
|
require('./webgl.cjs');
|
|
26
26
|
require('./depth.cjs');
|
|
27
27
|
require('./layout.cjs');
|
|
28
28
|
require('./packs.cjs');
|
|
29
|
+
require('./a11y.cjs');
|
|
29
30
|
require('../chunks/index-tags-BQh_uGqH.cjs');
|
|
30
31
|
|
|
31
32
|
/**
|
|
@@ -1 +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":"
|
|
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;;;;;;;"}
|
|
@@ -2,29 +2,30 @@ import { defineComponents } from '../components.js';
|
|
|
2
2
|
import { b as bindUsa } from '../chunks/bind-B_CTL6Qn.js';
|
|
3
3
|
export { u as usaEventName } from '../chunks/bind-B_CTL6Qn.js';
|
|
4
4
|
import './reveal.js';
|
|
5
|
-
import '../chunks/base-
|
|
5
|
+
import '../chunks/base-BtJDNCB6.js';
|
|
6
6
|
import './text.js';
|
|
7
|
-
import '../chunks/core-
|
|
7
|
+
import '../chunks/core-DS1nrx5L.js';
|
|
8
8
|
import './tokens.js';
|
|
9
9
|
import './interaction.js';
|
|
10
10
|
import './feedback.js';
|
|
11
11
|
import './background.js';
|
|
12
|
-
import '../chunks/variants-
|
|
12
|
+
import '../chunks/variants-dD6SbUMR.js';
|
|
13
13
|
import './transitions.js';
|
|
14
14
|
import './physics.js';
|
|
15
|
-
import '../chunks/spring-
|
|
15
|
+
import '../chunks/spring-CxRz49Wk.js';
|
|
16
16
|
import './cards.js';
|
|
17
17
|
import './click.js';
|
|
18
18
|
import './ui.js';
|
|
19
19
|
import './page.js';
|
|
20
20
|
import './timeline.js';
|
|
21
21
|
import './gesture.js';
|
|
22
|
-
import '../chunks/core-
|
|
22
|
+
import '../chunks/core-DX6pdOoY.js';
|
|
23
23
|
import './svg.js';
|
|
24
24
|
import './webgl.js';
|
|
25
25
|
import './depth.js';
|
|
26
26
|
import './layout.js';
|
|
27
27
|
import './packs.js';
|
|
28
|
+
import './a11y.js';
|
|
28
29
|
import '../chunks/index-tags-43Xtd01A.js';
|
|
29
30
|
|
|
30
31
|
/**
|
|
@@ -1 +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":"
|
|
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;;;;"}
|
package/dist/components/svg.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var base = require('../chunks/base-
|
|
3
|
+
var base = require('../chunks/base-DE2yzxE7.cjs');
|
|
4
4
|
|
|
5
5
|
const NUM = /-?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?/gi;
|
|
6
6
|
/** `true` when two path strings share the same commands (so their numbers can be interpolated). */
|
|
@@ -27,7 +27,17 @@ interface ComponentsConfig {
|
|
|
27
27
|
* 1.25) on `<html>` for your own CSS. See `setMotionIntensity()`.
|
|
28
28
|
*/
|
|
29
29
|
motionIntensity?: MotionIntensity;
|
|
30
|
+
/**
|
|
31
|
+
* Motion-sensitivity level (v4.4), finer than reduced motion:
|
|
32
|
+
* `'full'` (default) · `'gentle'` (no spins, zooms, skews or parallax —
|
|
33
|
+
* translations and fades only, safe for vestibular disorders) ·
|
|
34
|
+
* `'minimal'` (fades only; components use their reduced-motion variants) ·
|
|
35
|
+
* `'static'` (no animation: every component shows its static alternative).
|
|
36
|
+
* See `setMotionSensitivity()` in `use-scroll-animate/components/a11y`.
|
|
37
|
+
*/
|
|
38
|
+
motionSensitivity?: MotionSensitivity;
|
|
30
39
|
}
|
|
40
|
+
type MotionSensitivity = 'full' | 'gentle' | 'minimal' | 'static';
|
|
31
41
|
type MotionIntensity = 'off' | 'low' | 'normal' | 'high';
|
|
32
42
|
/** Change global component settings (call before `define*()` for `injectStyles`). */
|
|
33
43
|
declare function configureComponents(options: ComponentsConfig): void;
|
package/dist/components/svg.d.ts
CHANGED
|
@@ -27,7 +27,17 @@ interface ComponentsConfig {
|
|
|
27
27
|
* 1.25) on `<html>` for your own CSS. See `setMotionIntensity()`.
|
|
28
28
|
*/
|
|
29
29
|
motionIntensity?: MotionIntensity;
|
|
30
|
+
/**
|
|
31
|
+
* Motion-sensitivity level (v4.4), finer than reduced motion:
|
|
32
|
+
* `'full'` (default) · `'gentle'` (no spins, zooms, skews or parallax —
|
|
33
|
+
* translations and fades only, safe for vestibular disorders) ·
|
|
34
|
+
* `'minimal'` (fades only; components use their reduced-motion variants) ·
|
|
35
|
+
* `'static'` (no animation: every component shows its static alternative).
|
|
36
|
+
* See `setMotionSensitivity()` in `use-scroll-animate/components/a11y`.
|
|
37
|
+
*/
|
|
38
|
+
motionSensitivity?: MotionSensitivity;
|
|
30
39
|
}
|
|
40
|
+
type MotionSensitivity = 'full' | 'gentle' | 'minimal' | 'static';
|
|
31
41
|
type MotionIntensity = 'off' | 'low' | 'normal' | 'high';
|
|
32
42
|
/** Change global component settings (call before `define*()` for `injectStyles`). */
|
|
33
43
|
declare function configureComponents(options: ComponentsConfig): void;
|
package/dist/components/svg.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export {
|
|
1
|
+
import { f as clamp, m as motionScale, h as caf, p as prefersReducedMotion, n as now, r as raf, k as defineElement, l as EASE_OUT } from '../chunks/base-BtJDNCB6.js';
|
|
2
|
+
export { d as configureComponents } from '../chunks/base-BtJDNCB6.js';
|
|
3
3
|
|
|
4
4
|
const NUM = /-?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?/gi;
|
|
5
5
|
/** `true` when two path strings share the same commands (so their numbers can be interpolated). */
|
package/dist/components/text.cjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var base = require('../chunks/base-
|
|
4
|
-
var core = require('../chunks/core-
|
|
3
|
+
var base = require('../chunks/base-DE2yzxE7.cjs');
|
|
4
|
+
var core = require('../chunks/core-BC9S2osy.cjs');
|
|
5
5
|
require('./tokens.cjs');
|
|
6
6
|
|
|
7
7
|
var css$5 = "usa-typewriter{white-space:pre-wrap}usa-typewriter .usa-tw-caret{display:inline-block;width:var(--usa-caret-width,0.08em);height:1.05em;margin-left:0.06em;vertical-align:-0.12em;background:var(--usa-caret-color,currentColor);animation:usa-caret 1.06s steps(1) infinite}usa-typewriter[data-typing] .usa-tw-caret{animation:none}usa-typewriter[data-no-cursor] .usa-tw-caret{display:none}@keyframes usa-caret{50%{opacity:0}}@media (prefers-reduced-motion:reduce){usa-typewriter .usa-tw-caret,usa-shimmer-text{animation:none}}";
|
|
@@ -27,7 +27,17 @@ interface ComponentsConfig {
|
|
|
27
27
|
* 1.25) on `<html>` for your own CSS. See `setMotionIntensity()`.
|
|
28
28
|
*/
|
|
29
29
|
motionIntensity?: MotionIntensity;
|
|
30
|
+
/**
|
|
31
|
+
* Motion-sensitivity level (v4.4), finer than reduced motion:
|
|
32
|
+
* `'full'` (default) · `'gentle'` (no spins, zooms, skews or parallax —
|
|
33
|
+
* translations and fades only, safe for vestibular disorders) ·
|
|
34
|
+
* `'minimal'` (fades only; components use their reduced-motion variants) ·
|
|
35
|
+
* `'static'` (no animation: every component shows its static alternative).
|
|
36
|
+
* See `setMotionSensitivity()` in `use-scroll-animate/components/a11y`.
|
|
37
|
+
*/
|
|
38
|
+
motionSensitivity?: MotionSensitivity;
|
|
30
39
|
}
|
|
40
|
+
type MotionSensitivity = 'full' | 'gentle' | 'minimal' | 'static';
|
|
31
41
|
type MotionIntensity = 'off' | 'low' | 'normal' | 'high';
|
|
32
42
|
/** Change global component settings (call before `define*()` for `injectStyles`). */
|
|
33
43
|
declare function configureComponents(options: ComponentsConfig): void;
|
|
@@ -27,7 +27,17 @@ interface ComponentsConfig {
|
|
|
27
27
|
* 1.25) on `<html>` for your own CSS. See `setMotionIntensity()`.
|
|
28
28
|
*/
|
|
29
29
|
motionIntensity?: MotionIntensity;
|
|
30
|
+
/**
|
|
31
|
+
* Motion-sensitivity level (v4.4), finer than reduced motion:
|
|
32
|
+
* `'full'` (default) · `'gentle'` (no spins, zooms, skews or parallax —
|
|
33
|
+
* translations and fades only, safe for vestibular disorders) ·
|
|
34
|
+
* `'minimal'` (fades only; components use their reduced-motion variants) ·
|
|
35
|
+
* `'static'` (no animation: every component shows its static alternative).
|
|
36
|
+
* See `setMotionSensitivity()` in `use-scroll-animate/components/a11y`.
|
|
37
|
+
*/
|
|
38
|
+
motionSensitivity?: MotionSensitivity;
|
|
30
39
|
}
|
|
40
|
+
type MotionSensitivity = 'full' | 'gentle' | 'minimal' | 'static';
|
|
31
41
|
type MotionIntensity = 'off' | 'low' | 'normal' | 'high';
|
|
32
42
|
/** Change global component settings (call before `define*()` for `injectStyles`). */
|
|
33
43
|
declare function configureComponents(options: ComponentsConfig): void;
|
package/dist/components/text.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export {
|
|
3
|
-
import { t as timeline } from '../chunks/core-
|
|
1
|
+
import { k as defineElement, q as srText, h as caf, n as now, r as raf, l as EASE_OUT, E as EASE_SPRING, f as clamp } from '../chunks/base-BtJDNCB6.js';
|
|
2
|
+
export { d as configureComponents, p as prefersReducedMotion } from '../chunks/base-BtJDNCB6.js';
|
|
3
|
+
import { t as timeline } from '../chunks/core-DS1nrx5L.js';
|
|
4
4
|
import './tokens.js';
|
|
5
5
|
|
|
6
6
|
var css$5 = "usa-typewriter{white-space:pre-wrap}usa-typewriter .usa-tw-caret{display:inline-block;width:var(--usa-caret-width,0.08em);height:1.05em;margin-left:0.06em;vertical-align:-0.12em;background:var(--usa-caret-color,currentColor);animation:usa-caret 1.06s steps(1) infinite}usa-typewriter[data-typing] .usa-tw-caret{animation:none}usa-typewriter[data-no-cursor] .usa-tw-caret{display:none}@keyframes usa-caret{50%{opacity:0}}@media (prefers-reduced-motion:reduce){usa-typewriter .usa-tw-caret,usa-shimmer-text{animation:none}}";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var base = require('../chunks/base-
|
|
4
|
-
var core = require('../chunks/core-
|
|
3
|
+
var base = require('../chunks/base-DE2yzxE7.cjs');
|
|
4
|
+
var core = require('../chunks/core-BC9S2osy.cjs');
|
|
5
5
|
require('./tokens.cjs');
|
|
6
6
|
|
|
7
7
|
var css = "usa-timeline{display:block}usa-timeline[scrub]{position:relative}@media (prefers-reduced-motion:reduce){usa-timeline [data-tl]{opacity:1 !important;transform:none !important;filter:none !important;clip-path:none !important}}";
|
|
@@ -27,7 +27,17 @@ interface ComponentsConfig {
|
|
|
27
27
|
* 1.25) on `<html>` for your own CSS. See `setMotionIntensity()`.
|
|
28
28
|
*/
|
|
29
29
|
motionIntensity?: MotionIntensity;
|
|
30
|
+
/**
|
|
31
|
+
* Motion-sensitivity level (v4.4), finer than reduced motion:
|
|
32
|
+
* `'full'` (default) · `'gentle'` (no spins, zooms, skews or parallax —
|
|
33
|
+
* translations and fades only, safe for vestibular disorders) ·
|
|
34
|
+
* `'minimal'` (fades only; components use their reduced-motion variants) ·
|
|
35
|
+
* `'static'` (no animation: every component shows its static alternative).
|
|
36
|
+
* See `setMotionSensitivity()` in `use-scroll-animate/components/a11y`.
|
|
37
|
+
*/
|
|
38
|
+
motionSensitivity?: MotionSensitivity;
|
|
30
39
|
}
|
|
40
|
+
type MotionSensitivity = 'full' | 'gentle' | 'minimal' | 'static';
|
|
31
41
|
type MotionIntensity = 'off' | 'low' | 'normal' | 'high';
|
|
32
42
|
/** Change global component settings (call before `define*()` for `injectStyles`). */
|
|
33
43
|
declare function configureComponents(options: ComponentsConfig): void;
|
|
@@ -27,7 +27,17 @@ interface ComponentsConfig {
|
|
|
27
27
|
* 1.25) on `<html>` for your own CSS. See `setMotionIntensity()`.
|
|
28
28
|
*/
|
|
29
29
|
motionIntensity?: MotionIntensity;
|
|
30
|
+
/**
|
|
31
|
+
* Motion-sensitivity level (v4.4), finer than reduced motion:
|
|
32
|
+
* `'full'` (default) · `'gentle'` (no spins, zooms, skews or parallax —
|
|
33
|
+
* translations and fades only, safe for vestibular disorders) ·
|
|
34
|
+
* `'minimal'` (fades only; components use their reduced-motion variants) ·
|
|
35
|
+
* `'static'` (no animation: every component shows its static alternative).
|
|
36
|
+
* See `setMotionSensitivity()` in `use-scroll-animate/components/a11y`.
|
|
37
|
+
*/
|
|
38
|
+
motionSensitivity?: MotionSensitivity;
|
|
30
39
|
}
|
|
40
|
+
type MotionSensitivity = 'full' | 'gentle' | 'minimal' | 'static';
|
|
31
41
|
type MotionIntensity = 'off' | 'low' | 'normal' | 'high';
|
|
32
42
|
/** Change global component settings (call before `define*()` for `injectStyles`). */
|
|
33
43
|
declare function configureComponents(options: ComponentsConfig): void;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export {
|
|
3
|
-
import { t as timeline, T as TIMELINE_PRESETS } from '../chunks/core-
|
|
4
|
-
export { r as resolvePosition, s as supportsNativeScrub } from '../chunks/core-
|
|
1
|
+
import { k as defineElement } from '../chunks/base-BtJDNCB6.js';
|
|
2
|
+
export { d as configureComponents, p as prefersReducedMotion } from '../chunks/base-BtJDNCB6.js';
|
|
3
|
+
import { t as timeline, T as TIMELINE_PRESETS } from '../chunks/core-DS1nrx5L.js';
|
|
4
|
+
export { r as resolvePosition, s as supportsNativeScrub } from '../chunks/core-DS1nrx5L.js';
|
|
5
5
|
import './tokens.js';
|
|
6
6
|
|
|
7
7
|
var css = "usa-timeline{display:block}usa-timeline[scrub]{position:relative}@media (prefers-reduced-motion:reduce){usa-timeline [data-tl]{opacity:1 !important;transform:none !important;filter:none !important;clip-path:none !important}}";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var base = require('../chunks/base-
|
|
3
|
+
var base = require('../chunks/base-DE2yzxE7.cjs');
|
|
4
4
|
|
|
5
5
|
var shadowCss = ":host{display:contents}dialog{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:inherit;overflow:hidden}dialog:not([open]){display:none}dialog::backdrop{background:transparent}[part=\"backdrop\"]{position:absolute;inset:0;background:var(--usa-dialog-backdrop,rgb(0 0 0 / 0.42))}[part=\"panel\"]{position:absolute;left:50%;top:50%;translate:-50% -50%;box-sizing:border-box;width:min(var(--usa-dialog-width,480px),calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;padding:var(--usa-dialog-padding,24px);border-radius:var(--usa-dialog-radius,12px);background:var(--usa-dialog-bg,Canvas);color:var(--usa-dialog-fg,CanvasText);box-shadow:0 32px 64px -12px rgb(0 0 0 / 0.45),0 0 0 1px rgb(127 127 127 / 0.18)}dialog[data-kind^=\"drawer\"] [part=\"panel\"]{top:0;bottom:0;translate:none;max-height:none;height:100%;border-radius:0;width:min(var(--usa-dialog-width,380px),88vw)}dialog[data-kind=\"drawer-start\"] [part=\"panel\"]{left:0}dialog[data-kind=\"drawer-end\"] [part=\"panel\"]{left:auto;right:0}dialog[data-kind=\"drawer-bottom\"] [part=\"panel\"],dialog[data-kind=\"sheet\"] [part=\"panel\"]{top:auto;bottom:0;left:0;right:0;translate:none;width:100%;height:auto;max-height:85vh;border-radius:var(--usa-dialog-radius,16px) var(--usa-dialog-radius,16px) 0 0}dialog[data-kind=\"sheet\"] [part=\"panel\"]{left:50%;translate:-50% 0;width:min(var(--usa-dialog-width,560px),100vw)}";
|
|
6
6
|
|
|
@@ -27,7 +27,17 @@ interface ComponentsConfig {
|
|
|
27
27
|
* 1.25) on `<html>` for your own CSS. See `setMotionIntensity()`.
|
|
28
28
|
*/
|
|
29
29
|
motionIntensity?: MotionIntensity;
|
|
30
|
+
/**
|
|
31
|
+
* Motion-sensitivity level (v4.4), finer than reduced motion:
|
|
32
|
+
* `'full'` (default) · `'gentle'` (no spins, zooms, skews or parallax —
|
|
33
|
+
* translations and fades only, safe for vestibular disorders) ·
|
|
34
|
+
* `'minimal'` (fades only; components use their reduced-motion variants) ·
|
|
35
|
+
* `'static'` (no animation: every component shows its static alternative).
|
|
36
|
+
* See `setMotionSensitivity()` in `use-scroll-animate/components/a11y`.
|
|
37
|
+
*/
|
|
38
|
+
motionSensitivity?: MotionSensitivity;
|
|
30
39
|
}
|
|
40
|
+
type MotionSensitivity = 'full' | 'gentle' | 'minimal' | 'static';
|
|
31
41
|
type MotionIntensity = 'off' | 'low' | 'normal' | 'high';
|
|
32
42
|
/** Change global component settings (call before `define*()` for `injectStyles`). */
|
|
33
43
|
declare function configureComponents(options: ComponentsConfig): void;
|
|
@@ -27,7 +27,17 @@ interface ComponentsConfig {
|
|
|
27
27
|
* 1.25) on `<html>` for your own CSS. See `setMotionIntensity()`.
|
|
28
28
|
*/
|
|
29
29
|
motionIntensity?: MotionIntensity;
|
|
30
|
+
/**
|
|
31
|
+
* Motion-sensitivity level (v4.4), finer than reduced motion:
|
|
32
|
+
* `'full'` (default) · `'gentle'` (no spins, zooms, skews or parallax —
|
|
33
|
+
* translations and fades only, safe for vestibular disorders) ·
|
|
34
|
+
* `'minimal'` (fades only; components use their reduced-motion variants) ·
|
|
35
|
+
* `'static'` (no animation: every component shows its static alternative).
|
|
36
|
+
* See `setMotionSensitivity()` in `use-scroll-animate/components/a11y`.
|
|
37
|
+
*/
|
|
38
|
+
motionSensitivity?: MotionSensitivity;
|
|
30
39
|
}
|
|
40
|
+
type MotionSensitivity = 'full' | 'gentle' | 'minimal' | 'static';
|
|
31
41
|
type MotionIntensity = 'off' | 'low' | 'normal' | 'high';
|
|
32
42
|
/** Change global component settings (call before `define*()` for `injectStyles`). */
|
|
33
43
|
declare function configureComponents(options: ComponentsConfig): void;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export {
|
|
1
|
+
import { k as defineElement, o as kindOf, s as shadowStyles, l as EASE_OUT, F as FLUENT_DECELERATE, p as prefersReducedMotion } from '../chunks/base-BtJDNCB6.js';
|
|
2
|
+
export { d as configureComponents } from '../chunks/base-BtJDNCB6.js';
|
|
3
3
|
|
|
4
4
|
var shadowCss = ":host{display:contents}dialog{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:inherit;overflow:hidden}dialog:not([open]){display:none}dialog::backdrop{background:transparent}[part=\"backdrop\"]{position:absolute;inset:0;background:var(--usa-dialog-backdrop,rgb(0 0 0 / 0.42))}[part=\"panel\"]{position:absolute;left:50%;top:50%;translate:-50% -50%;box-sizing:border-box;width:min(var(--usa-dialog-width,480px),calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;padding:var(--usa-dialog-padding,24px);border-radius:var(--usa-dialog-radius,12px);background:var(--usa-dialog-bg,Canvas);color:var(--usa-dialog-fg,CanvasText);box-shadow:0 32px 64px -12px rgb(0 0 0 / 0.45),0 0 0 1px rgb(127 127 127 / 0.18)}dialog[data-kind^=\"drawer\"] [part=\"panel\"]{top:0;bottom:0;translate:none;max-height:none;height:100%;border-radius:0;width:min(var(--usa-dialog-width,380px),88vw)}dialog[data-kind=\"drawer-start\"] [part=\"panel\"]{left:0}dialog[data-kind=\"drawer-end\"] [part=\"panel\"]{left:auto;right:0}dialog[data-kind=\"drawer-bottom\"] [part=\"panel\"],dialog[data-kind=\"sheet\"] [part=\"panel\"]{top:auto;bottom:0;left:0;right:0;translate:none;width:100%;height:auto;max-height:85vh;border-radius:var(--usa-dialog-radius,16px) var(--usa-dialog-radius,16px) 0 0}dialog[data-kind=\"sheet\"] [part=\"panel\"]{left:50%;translate:-50% 0;width:min(var(--usa-dialog-width,560px),100vw)}";
|
|
5
5
|
|
package/dist/components/ui.cjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var base = require('../chunks/base-
|
|
4
|
-
var spring = require('../chunks/spring-
|
|
5
|
-
var variants = require('../chunks/variants-
|
|
3
|
+
var base = require('../chunks/base-DE2yzxE7.cjs');
|
|
4
|
+
var spring = require('../chunks/spring-hsmgd7ml.cjs');
|
|
5
|
+
var variants = require('../chunks/variants-CM2zaG8v.cjs');
|
|
6
6
|
|
|
7
7
|
/** Position a fixed `floating` element next to `anchor`, flipping when it would leave the viewport. */
|
|
8
8
|
function place(floating, anchor, placement = 'top', gap = 8) {
|
package/dist/components/ui.d.cts
CHANGED
|
@@ -27,7 +27,17 @@ interface ComponentsConfig {
|
|
|
27
27
|
* 1.25) on `<html>` for your own CSS. See `setMotionIntensity()`.
|
|
28
28
|
*/
|
|
29
29
|
motionIntensity?: MotionIntensity;
|
|
30
|
+
/**
|
|
31
|
+
* Motion-sensitivity level (v4.4), finer than reduced motion:
|
|
32
|
+
* `'full'` (default) · `'gentle'` (no spins, zooms, skews or parallax —
|
|
33
|
+
* translations and fades only, safe for vestibular disorders) ·
|
|
34
|
+
* `'minimal'` (fades only; components use their reduced-motion variants) ·
|
|
35
|
+
* `'static'` (no animation: every component shows its static alternative).
|
|
36
|
+
* See `setMotionSensitivity()` in `use-scroll-animate/components/a11y`.
|
|
37
|
+
*/
|
|
38
|
+
motionSensitivity?: MotionSensitivity;
|
|
30
39
|
}
|
|
40
|
+
type MotionSensitivity = 'full' | 'gentle' | 'minimal' | 'static';
|
|
31
41
|
type MotionIntensity = 'off' | 'low' | 'normal' | 'high';
|
|
32
42
|
/** Change global component settings (call before `define*()` for `injectStyles`). */
|
|
33
43
|
declare function configureComponents(options: ComponentsConfig): void;
|
package/dist/components/ui.d.ts
CHANGED
|
@@ -27,7 +27,17 @@ interface ComponentsConfig {
|
|
|
27
27
|
* 1.25) on `<html>` for your own CSS. See `setMotionIntensity()`.
|
|
28
28
|
*/
|
|
29
29
|
motionIntensity?: MotionIntensity;
|
|
30
|
+
/**
|
|
31
|
+
* Motion-sensitivity level (v4.4), finer than reduced motion:
|
|
32
|
+
* `'full'` (default) · `'gentle'` (no spins, zooms, skews or parallax —
|
|
33
|
+
* translations and fades only, safe for vestibular disorders) ·
|
|
34
|
+
* `'minimal'` (fades only; components use their reduced-motion variants) ·
|
|
35
|
+
* `'static'` (no animation: every component shows its static alternative).
|
|
36
|
+
* See `setMotionSensitivity()` in `use-scroll-animate/components/a11y`.
|
|
37
|
+
*/
|
|
38
|
+
motionSensitivity?: MotionSensitivity;
|
|
30
39
|
}
|
|
40
|
+
type MotionSensitivity = 'full' | 'gentle' | 'minimal' | 'static';
|
|
31
41
|
type MotionIntensity = 'off' | 'low' | 'normal' | 'high';
|
|
32
42
|
/** Change global component settings (call before `define*()` for `injectStyles`). */
|
|
33
43
|
declare function configureComponents(options: ComponentsConfig): void;
|
package/dist/components/ui.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export {
|
|
3
|
-
import { d as springEasing, c as createSpring, p as projectInertia, s as snapTo, a as rubberBand } from '../chunks/spring-
|
|
4
|
-
import { a as adoptVariants } from '../chunks/variants-
|
|
5
|
-
export { V as VARIANTS, s as setVariant } from '../chunks/variants-
|
|
1
|
+
import { k as defineElement, f as clamp, h as caf, r as raf } from '../chunks/base-BtJDNCB6.js';
|
|
2
|
+
export { d as configureComponents, p as prefersReducedMotion } from '../chunks/base-BtJDNCB6.js';
|
|
3
|
+
import { d as springEasing, c as createSpring, p as projectInertia, s as snapTo, a as rubberBand } from '../chunks/spring-CxRz49Wk.js';
|
|
4
|
+
import { a as adoptVariants } from '../chunks/variants-dD6SbUMR.js';
|
|
5
|
+
export { V as VARIANTS, s as setVariant } from '../chunks/variants-dD6SbUMR.js';
|
|
6
6
|
|
|
7
7
|
/** Position a fixed `floating` element next to `anchor`, flipping when it would leave the viewport. */
|
|
8
8
|
function place(floating, anchor, placement = 'top', gap = 8) {
|
package/dist/components/vue.cjs
CHANGED
|
@@ -2,29 +2,30 @@
|
|
|
2
2
|
|
|
3
3
|
var components = require('../components.cjs');
|
|
4
4
|
require('./reveal.cjs');
|
|
5
|
-
require('../chunks/base-
|
|
5
|
+
require('../chunks/base-DE2yzxE7.cjs');
|
|
6
6
|
require('./text.cjs');
|
|
7
|
-
require('../chunks/core-
|
|
7
|
+
require('../chunks/core-BC9S2osy.cjs');
|
|
8
8
|
require('./tokens.cjs');
|
|
9
9
|
require('./interaction.cjs');
|
|
10
10
|
require('./feedback.cjs');
|
|
11
11
|
require('./background.cjs');
|
|
12
|
-
require('../chunks/variants-
|
|
12
|
+
require('../chunks/variants-CM2zaG8v.cjs');
|
|
13
13
|
require('./transitions.cjs');
|
|
14
14
|
require('./physics.cjs');
|
|
15
|
-
require('../chunks/spring-
|
|
15
|
+
require('../chunks/spring-hsmgd7ml.cjs');
|
|
16
16
|
require('./cards.cjs');
|
|
17
17
|
require('./click.cjs');
|
|
18
18
|
require('./ui.cjs');
|
|
19
19
|
require('./page.cjs');
|
|
20
20
|
require('./timeline.cjs');
|
|
21
21
|
require('./gesture.cjs');
|
|
22
|
-
require('../chunks/core-
|
|
22
|
+
require('../chunks/core-DPYjLqA0.cjs');
|
|
23
23
|
require('./svg.cjs');
|
|
24
24
|
require('./webgl.cjs');
|
|
25
25
|
require('./depth.cjs');
|
|
26
26
|
require('./layout.cjs');
|
|
27
27
|
require('./packs.cjs');
|
|
28
|
+
require('./a11y.cjs');
|
|
28
29
|
require('../chunks/index-tags-BQh_uGqH.cjs');
|
|
29
30
|
|
|
30
31
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vue.cjs","sources":["../../src/components/frameworks/vue.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/vue — Vue integration (v2.9).\n *\n * ```js\n * // vite.config.js\n * import vue from '@vitejs/plugin-vue';\n * import { isUsaElement } from 'use-scroll-animate/components/vue';\n * export default { plugins: [vue({ template: { compilerOptions: { isCustomElement: isUsaElement } } })] };\n *\n * // main.js\n * import { UsaPlugin } from 'use-scroll-animate/components/vue';\n * app.use(UsaPlugin, { categories: ['click', 'cards'] });\n * ```\n * In templates, listen with `@usa:change=\"…\"` and bind properties with\n * `.prop`: `<usa-toggle :checked.prop=\"on\" @usa:change=\"on = $event.detail.checked\">`.\n */\nimport { defineComponents, type ComponentCategory } from '../index';\n\n/** `compilerOptions.isCustomElement` predicate for every `<usa-*>` tag. */\nexport const isUsaElement = (tag: string): boolean => tag.startsWith('usa-');\n\nexport interface UsaPluginOptions {\n /** Only register these categories (default: all). */\n categories?: ComponentCategory[];\n}\n\n/** Vue plugin: registers the `<usa-*>` elements (client only) and sets `isCustomElement` at runtime. */\nexport const UsaPlugin = {\n install(app: { config: { compilerOptions?: { isCustomElement?: (t: string) => boolean } } }, options: UsaPluginOptions = {}): void {\n const co = (app.config.compilerOptions ||= {});\n const prev = co.isCustomElement;\n co.isCustomElement = (t: string) => isUsaElement(t) || !!prev?.(t);\n defineComponents(options.categories);\n },\n};\n"],"names":["defineComponents"],"mappings":"
|
|
1
|
+
{"version":3,"file":"vue.cjs","sources":["../../src/components/frameworks/vue.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/vue — Vue integration (v2.9).\n *\n * ```js\n * // vite.config.js\n * import vue from '@vitejs/plugin-vue';\n * import { isUsaElement } from 'use-scroll-animate/components/vue';\n * export default { plugins: [vue({ template: { compilerOptions: { isCustomElement: isUsaElement } } })] };\n *\n * // main.js\n * import { UsaPlugin } from 'use-scroll-animate/components/vue';\n * app.use(UsaPlugin, { categories: ['click', 'cards'] });\n * ```\n * In templates, listen with `@usa:change=\"…\"` and bind properties with\n * `.prop`: `<usa-toggle :checked.prop=\"on\" @usa:change=\"on = $event.detail.checked\">`.\n */\nimport { defineComponents, type ComponentCategory } from '../index';\n\n/** `compilerOptions.isCustomElement` predicate for every `<usa-*>` tag. */\nexport const isUsaElement = (tag: string): boolean => tag.startsWith('usa-');\n\nexport interface UsaPluginOptions {\n /** Only register these categories (default: all). */\n categories?: ComponentCategory[];\n}\n\n/** Vue plugin: registers the `<usa-*>` elements (client only) and sets `isCustomElement` at runtime. */\nexport const UsaPlugin = {\n install(app: { config: { compilerOptions?: { isCustomElement?: (t: string) => boolean } } }, options: UsaPluginOptions = {}): void {\n const co = (app.config.compilerOptions ||= {});\n const prev = co.isCustomElement;\n co.isCustomElement = (t: string) => isUsaElement(t) || !!prev?.(t);\n defineComponents(options.categories);\n },\n};\n"],"names":["defineComponents"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;AAeG;AAGH;AACO,MAAM,YAAY,GAAG,CAAC,GAAW,KAAc,GAAG,CAAC,UAAU,CAAC,MAAM;AAO3E;AACO,MAAM,SAAS,GAAG;AACvB,IAAA,OAAO,CAAC,GAAmF,EAAE,OAAA,GAA4B,EAAE,EAAA;;AACzH,QAAA,MAAM,EAAE,IAAG,CAAA,EAAA,GAAC,GAAG,CAAC,MAAM,EAAC,eAAe,KAAA,EAAA,CAAf,eAAe,GAAK,EAAE,EAAC;AAC9C,QAAA,MAAM,IAAI,GAAG,EAAE,CAAC,eAAe;QAC/B,EAAE,CAAC,eAAe,GAAG,CAAC,CAAS,KAAK,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC;AAClE,QAAAA,2BAAgB,CAAC,OAAO,CAAC,UAAU,CAAC;IACtC,CAAC;;;;;;"}
|
package/dist/components/vue.js
CHANGED
|
@@ -1,28 +1,29 @@
|
|
|
1
1
|
import { defineComponents } from '../components.js';
|
|
2
2
|
import './reveal.js';
|
|
3
|
-
import '../chunks/base-
|
|
3
|
+
import '../chunks/base-BtJDNCB6.js';
|
|
4
4
|
import './text.js';
|
|
5
|
-
import '../chunks/core-
|
|
5
|
+
import '../chunks/core-DS1nrx5L.js';
|
|
6
6
|
import './tokens.js';
|
|
7
7
|
import './interaction.js';
|
|
8
8
|
import './feedback.js';
|
|
9
9
|
import './background.js';
|
|
10
|
-
import '../chunks/variants-
|
|
10
|
+
import '../chunks/variants-dD6SbUMR.js';
|
|
11
11
|
import './transitions.js';
|
|
12
12
|
import './physics.js';
|
|
13
|
-
import '../chunks/spring-
|
|
13
|
+
import '../chunks/spring-CxRz49Wk.js';
|
|
14
14
|
import './cards.js';
|
|
15
15
|
import './click.js';
|
|
16
16
|
import './ui.js';
|
|
17
17
|
import './page.js';
|
|
18
18
|
import './timeline.js';
|
|
19
19
|
import './gesture.js';
|
|
20
|
-
import '../chunks/core-
|
|
20
|
+
import '../chunks/core-DX6pdOoY.js';
|
|
21
21
|
import './svg.js';
|
|
22
22
|
import './webgl.js';
|
|
23
23
|
import './depth.js';
|
|
24
24
|
import './layout.js';
|
|
25
25
|
import './packs.js';
|
|
26
|
+
import './a11y.js';
|
|
26
27
|
import '../chunks/index-tags-43Xtd01A.js';
|
|
27
28
|
|
|
28
29
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vue.js","sources":["../../src/components/frameworks/vue.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/vue — Vue integration (v2.9).\n *\n * ```js\n * // vite.config.js\n * import vue from '@vitejs/plugin-vue';\n * import { isUsaElement } from 'use-scroll-animate/components/vue';\n * export default { plugins: [vue({ template: { compilerOptions: { isCustomElement: isUsaElement } } })] };\n *\n * // main.js\n * import { UsaPlugin } from 'use-scroll-animate/components/vue';\n * app.use(UsaPlugin, { categories: ['click', 'cards'] });\n * ```\n * In templates, listen with `@usa:change=\"…\"` and bind properties with\n * `.prop`: `<usa-toggle :checked.prop=\"on\" @usa:change=\"on = $event.detail.checked\">`.\n */\nimport { defineComponents, type ComponentCategory } from '../index';\n\n/** `compilerOptions.isCustomElement` predicate for every `<usa-*>` tag. */\nexport const isUsaElement = (tag: string): boolean => tag.startsWith('usa-');\n\nexport interface UsaPluginOptions {\n /** Only register these categories (default: all). */\n categories?: ComponentCategory[];\n}\n\n/** Vue plugin: registers the `<usa-*>` elements (client only) and sets `isCustomElement` at runtime. */\nexport const UsaPlugin = {\n install(app: { config: { compilerOptions?: { isCustomElement?: (t: string) => boolean } } }, options: UsaPluginOptions = {}): void {\n const co = (app.config.compilerOptions ||= {});\n const prev = co.isCustomElement;\n co.isCustomElement = (t: string) => isUsaElement(t) || !!prev?.(t);\n defineComponents(options.categories);\n },\n};\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"vue.js","sources":["../../src/components/frameworks/vue.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/vue — Vue integration (v2.9).\n *\n * ```js\n * // vite.config.js\n * import vue from '@vitejs/plugin-vue';\n * import { isUsaElement } from 'use-scroll-animate/components/vue';\n * export default { plugins: [vue({ template: { compilerOptions: { isCustomElement: isUsaElement } } })] };\n *\n * // main.js\n * import { UsaPlugin } from 'use-scroll-animate/components/vue';\n * app.use(UsaPlugin, { categories: ['click', 'cards'] });\n * ```\n * In templates, listen with `@usa:change=\"…\"` and bind properties with\n * `.prop`: `<usa-toggle :checked.prop=\"on\" @usa:change=\"on = $event.detail.checked\">`.\n */\nimport { defineComponents, type ComponentCategory } from '../index';\n\n/** `compilerOptions.isCustomElement` predicate for every `<usa-*>` tag. */\nexport const isUsaElement = (tag: string): boolean => tag.startsWith('usa-');\n\nexport interface UsaPluginOptions {\n /** Only register these categories (default: all). */\n categories?: ComponentCategory[];\n}\n\n/** Vue plugin: registers the `<usa-*>` elements (client only) and sets `isCustomElement` at runtime. */\nexport const UsaPlugin = {\n install(app: { config: { compilerOptions?: { isCustomElement?: (t: string) => boolean } } }, options: UsaPluginOptions = {}): void {\n const co = (app.config.compilerOptions ||= {});\n const prev = co.isCustomElement;\n co.isCustomElement = (t: string) => isUsaElement(t) || !!prev?.(t);\n defineComponents(options.categories);\n },\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;AAeG;AAGH;AACO,MAAM,YAAY,GAAG,CAAC,GAAW,KAAc,GAAG,CAAC,UAAU,CAAC,MAAM;AAO3E;AACO,MAAM,SAAS,GAAG;AACvB,IAAA,OAAO,CAAC,GAAmF,EAAE,OAAA,GAA4B,EAAE,EAAA;;AACzH,QAAA,MAAM,EAAE,IAAG,CAAA,EAAA,GAAC,GAAG,CAAC,MAAM,EAAC,eAAe,KAAA,EAAA,CAAf,eAAe,GAAK,EAAE,EAAC;AAC9C,QAAA,MAAM,IAAI,GAAG,EAAE,CAAC,eAAe;QAC/B,EAAE,CAAC,eAAe,GAAG,CAAC,CAAS,KAAK,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC;AAClE,QAAA,gBAAgB,CAAC,OAAO,CAAC,UAAU,CAAC;IACtC,CAAC;;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var base = require('../chunks/base-
|
|
3
|
+
var base = require('../chunks/base-DE2yzxE7.cjs');
|
|
4
4
|
|
|
5
5
|
/** Minimal WebGL runner: one full-canvas quad, one fragment shader, optional image texture. */
|
|
6
6
|
const VERTEX = 'attribute vec2 p;varying vec2 v_uv;void main(){v_uv=p*.5+.5;gl_Position=vec4(p,0.,1.);}';
|
|
@@ -27,7 +27,17 @@ interface ComponentsConfig {
|
|
|
27
27
|
* 1.25) on `<html>` for your own CSS. See `setMotionIntensity()`.
|
|
28
28
|
*/
|
|
29
29
|
motionIntensity?: MotionIntensity;
|
|
30
|
+
/**
|
|
31
|
+
* Motion-sensitivity level (v4.4), finer than reduced motion:
|
|
32
|
+
* `'full'` (default) · `'gentle'` (no spins, zooms, skews or parallax —
|
|
33
|
+
* translations and fades only, safe for vestibular disorders) ·
|
|
34
|
+
* `'minimal'` (fades only; components use their reduced-motion variants) ·
|
|
35
|
+
* `'static'` (no animation: every component shows its static alternative).
|
|
36
|
+
* See `setMotionSensitivity()` in `use-scroll-animate/components/a11y`.
|
|
37
|
+
*/
|
|
38
|
+
motionSensitivity?: MotionSensitivity;
|
|
30
39
|
}
|
|
40
|
+
type MotionSensitivity = 'full' | 'gentle' | 'minimal' | 'static';
|
|
31
41
|
type MotionIntensity = 'off' | 'low' | 'normal' | 'high';
|
|
32
42
|
/** Change global component settings (call before `define*()` for `injectStyles`). */
|
|
33
43
|
declare function configureComponents(options: ComponentsConfig): void;
|
|
@@ -27,7 +27,17 @@ interface ComponentsConfig {
|
|
|
27
27
|
* 1.25) on `<html>` for your own CSS. See `setMotionIntensity()`.
|
|
28
28
|
*/
|
|
29
29
|
motionIntensity?: MotionIntensity;
|
|
30
|
+
/**
|
|
31
|
+
* Motion-sensitivity level (v4.4), finer than reduced motion:
|
|
32
|
+
* `'full'` (default) · `'gentle'` (no spins, zooms, skews or parallax —
|
|
33
|
+
* translations and fades only, safe for vestibular disorders) ·
|
|
34
|
+
* `'minimal'` (fades only; components use their reduced-motion variants) ·
|
|
35
|
+
* `'static'` (no animation: every component shows its static alternative).
|
|
36
|
+
* See `setMotionSensitivity()` in `use-scroll-animate/components/a11y`.
|
|
37
|
+
*/
|
|
38
|
+
motionSensitivity?: MotionSensitivity;
|
|
30
39
|
}
|
|
40
|
+
type MotionSensitivity = 'full' | 'gentle' | 'minimal' | 'static';
|
|
31
41
|
type MotionIntensity = 'off' | 'low' | 'normal' | 'high';
|
|
32
42
|
/** Change global component settings (call before `define*()` for `injectStyles`). */
|
|
33
43
|
declare function configureComponents(options: ComponentsConfig): void;
|
package/dist/components/webgl.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export {
|
|
1
|
+
import { k as defineElement, n as now, h as caf, f as clamp, r as raf } from '../chunks/base-BtJDNCB6.js';
|
|
2
|
+
export { d as configureComponents, p as prefersReducedMotion } from '../chunks/base-BtJDNCB6.js';
|
|
3
3
|
|
|
4
4
|
/** Minimal WebGL runner: one full-canvas quad, one fragment shader, optional image texture. */
|
|
5
5
|
const VERTEX = 'attribute vec2 p;varying vec2 v_uv;void main(){v_uv=p*.5+.5;gl_Position=vec4(p,0.,1.);}';
|