use-scroll-animate 4.2.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.
Files changed (143) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/chunks/{base-BPG5zvex.js → base-BtJDNCB6.js} +45 -5
  3. package/dist/chunks/base-BtJDNCB6.js.map +1 -0
  4. package/dist/chunks/{base-CXx7jZ-o.cjs → base-DE2yzxE7.cjs} +47 -4
  5. package/dist/chunks/base-DE2yzxE7.cjs.map +1 -0
  6. package/dist/chunks/{core-BRIIoKeS.cjs → core-BC9S2osy.cjs} +2 -2
  7. package/dist/chunks/{core-BRIIoKeS.cjs.map → core-BC9S2osy.cjs.map} +1 -1
  8. package/dist/chunks/{core-IaorbTdu.cjs → core-DPYjLqA0.cjs} +2 -2
  9. package/dist/chunks/{core-IaorbTdu.cjs.map → core-DPYjLqA0.cjs.map} +1 -1
  10. package/dist/chunks/{core-LkGRmgES.js → core-DS1nrx5L.js} +2 -2
  11. package/dist/chunks/{core-LkGRmgES.js.map → core-DS1nrx5L.js.map} +1 -1
  12. package/dist/chunks/{core-eXX8rB_b.js → core-DX6pdOoY.js} +2 -2
  13. package/dist/chunks/{core-eXX8rB_b.js.map → core-DX6pdOoY.js.map} +1 -1
  14. package/dist/chunks/{spring-BziPsW3r.js → spring-CxRz49Wk.js} +2 -2
  15. package/dist/chunks/{spring-BziPsW3r.js.map → spring-CxRz49Wk.js.map} +1 -1
  16. package/dist/chunks/{spring-2OTnYCzm.cjs → spring-hsmgd7ml.cjs} +2 -2
  17. package/dist/chunks/{spring-2OTnYCzm.cjs.map → spring-hsmgd7ml.cjs.map} +1 -1
  18. package/dist/chunks/{variants-BNIrn4ch.cjs → variants-CM2zaG8v.cjs} +2 -2
  19. package/dist/chunks/{variants-BNIrn4ch.cjs.map → variants-CM2zaG8v.cjs.map} +1 -1
  20. package/dist/chunks/{variants-BVYMcxRv.js → variants-dD6SbUMR.js} +2 -2
  21. package/dist/chunks/{variants-BVYMcxRv.js.map → variants-dD6SbUMR.js.map} +1 -1
  22. package/dist/components/a11y.cjs +239 -0
  23. package/dist/components/a11y.cjs.map +1 -0
  24. package/dist/components/a11y.d.cts +120 -0
  25. package/dist/components/a11y.d.ts +120 -0
  26. package/dist/components/a11y.js +224 -0
  27. package/dist/components/a11y.js.map +1 -0
  28. package/dist/components/angular.cjs +7 -6
  29. package/dist/components/angular.cjs.map +1 -1
  30. package/dist/components/angular.d.cts +80 -76
  31. package/dist/components/angular.d.ts +80 -76
  32. package/dist/components/angular.js +7 -6
  33. package/dist/components/angular.js.map +1 -1
  34. package/dist/components/background.cjs +2 -2
  35. package/dist/components/background.d.cts +10 -0
  36. package/dist/components/background.d.ts +10 -0
  37. package/dist/components/background.js +3 -3
  38. package/dist/components/cards.cjs +2 -2
  39. package/dist/components/cards.d.cts +10 -0
  40. package/dist/components/cards.d.ts +10 -0
  41. package/dist/components/cards.js +3 -3
  42. package/dist/components/click.cjs +2 -2
  43. package/dist/components/click.d.cts +10 -0
  44. package/dist/components/click.d.ts +10 -0
  45. package/dist/components/click.js +3 -3
  46. package/dist/components/depth.cjs +3 -3
  47. package/dist/components/depth.d.cts +10 -0
  48. package/dist/components/depth.d.ts +10 -0
  49. package/dist/components/depth.js +4 -4
  50. package/dist/components/feedback.cjs +1 -1
  51. package/dist/components/feedback.d.cts +10 -0
  52. package/dist/components/feedback.d.ts +10 -0
  53. package/dist/components/feedback.js +2 -2
  54. package/dist/components/gesture.cjs +3 -3
  55. package/dist/components/gesture.d.cts +10 -0
  56. package/dist/components/gesture.d.ts +10 -0
  57. package/dist/components/gesture.js +5 -5
  58. package/dist/components/interaction.cjs +1 -1
  59. package/dist/components/interaction.d.cts +10 -0
  60. package/dist/components/interaction.d.ts +10 -0
  61. package/dist/components/interaction.js +2 -2
  62. package/dist/components/layout.cjs +1 -1
  63. package/dist/components/layout.d.cts +10 -0
  64. package/dist/components/layout.d.ts +10 -0
  65. package/dist/components/layout.js +2 -2
  66. package/dist/components/packs.cjs +1 -1
  67. package/dist/components/packs.d.cts +10 -0
  68. package/dist/components/packs.d.ts +10 -0
  69. package/dist/components/packs.js +2 -2
  70. package/dist/components/page.cjs +6 -3
  71. package/dist/components/page.cjs.map +1 -1
  72. package/dist/components/page.d.cts +10 -0
  73. package/dist/components/page.d.ts +10 -0
  74. package/dist/components/page.js +7 -4
  75. package/dist/components/page.js.map +1 -1
  76. package/dist/components/physics.cjs +2 -2
  77. package/dist/components/physics.d.cts +10 -0
  78. package/dist/components/physics.d.ts +10 -0
  79. package/dist/components/physics.js +4 -4
  80. package/dist/components/reveal.cjs +1 -1
  81. package/dist/components/reveal.d.cts +10 -0
  82. package/dist/components/reveal.d.ts +10 -0
  83. package/dist/components/reveal.js +2 -2
  84. package/dist/components/solid.cjs +7 -6
  85. package/dist/components/solid.cjs.map +1 -1
  86. package/dist/components/solid.d.cts +80 -76
  87. package/dist/components/solid.d.ts +80 -76
  88. package/dist/components/solid.js +7 -6
  89. package/dist/components/solid.js.map +1 -1
  90. package/dist/components/svelte.cjs +7 -6
  91. package/dist/components/svelte.cjs.map +1 -1
  92. package/dist/components/svelte.d.cts +80 -76
  93. package/dist/components/svelte.d.ts +80 -76
  94. package/dist/components/svelte.js +7 -6
  95. package/dist/components/svelte.js.map +1 -1
  96. package/dist/components/svg.cjs +1 -1
  97. package/dist/components/svg.d.cts +10 -0
  98. package/dist/components/svg.d.ts +10 -0
  99. package/dist/components/svg.js +2 -2
  100. package/dist/components/text.cjs +284 -11
  101. package/dist/components/text.cjs.map +1 -1
  102. package/dist/components/text.d.cts +166 -3
  103. package/dist/components/text.d.ts +166 -3
  104. package/dist/components/text.js +280 -13
  105. package/dist/components/text.js.map +1 -1
  106. package/dist/components/timeline.cjs +2 -2
  107. package/dist/components/timeline.d.cts +10 -0
  108. package/dist/components/timeline.d.ts +10 -0
  109. package/dist/components/timeline.js +4 -4
  110. package/dist/components/transitions.cjs +1 -1
  111. package/dist/components/transitions.d.cts +10 -0
  112. package/dist/components/transitions.d.ts +10 -0
  113. package/dist/components/transitions.js +2 -2
  114. package/dist/components/ui.cjs +3 -3
  115. package/dist/components/ui.d.cts +10 -0
  116. package/dist/components/ui.d.ts +10 -0
  117. package/dist/components/ui.js +5 -5
  118. package/dist/components/vue.cjs +7 -6
  119. package/dist/components/vue.cjs.map +1 -1
  120. package/dist/components/vue.d.cts +80 -76
  121. package/dist/components/vue.d.ts +80 -76
  122. package/dist/components/vue.js +7 -6
  123. package/dist/components/vue.js.map +1 -1
  124. package/dist/components/webgl.cjs +1 -1
  125. package/dist/components/webgl.d.cts +10 -0
  126. package/dist/components/webgl.d.ts +10 -0
  127. package/dist/components/webgl.js +2 -2
  128. package/dist/components.cjs +27 -5
  129. package/dist/components.cjs.map +1 -1
  130. package/dist/components.d.cts +289 -108
  131. package/dist/components.d.ts +289 -108
  132. package/dist/components.js +9 -8
  133. package/dist/components.js.map +1 -1
  134. package/dist/components.umd.js +2 -2
  135. package/dist/components.umd.js.map +1 -1
  136. package/dist/index.cjs +2 -2
  137. package/dist/index.js +2 -2
  138. package/dist/index.umd.js.map +1 -1
  139. package/docs/ROADMAP.md +2 -2
  140. package/docs/accessibility.md +28 -0
  141. package/package.json +11 -1
  142. package/dist/chunks/base-BPG5zvex.js.map +0 -1
  143. package/dist/chunks/base-CXx7jZ-o.cjs.map +0 -1
@@ -27,11 +27,30 @@ 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';
41
+ declare const MOTION_SENSITIVITY_LEVELS: readonly MotionSensitivity[];
31
42
  type MotionIntensity = 'off' | 'low' | 'normal' | 'high';
32
43
  declare const MOTION_SCALE: Record<MotionIntensity, number>;
33
44
  /** Change global component settings (call before `define*()` for `injectStyles`). */
34
45
  declare function configureComponents(options: ComponentsConfig): void;
46
+ /** The current motion-sensitivity level (v4.4). */
47
+ declare function getMotionSensitivity(): MotionSensitivity;
48
+ /**
49
+ * Adapt keyframes to the sensitivity level: `gentle` drops transforms that
50
+ * spin, zoom or skew (and 3D), `minimal` keeps opacity only, `static` keeps
51
+ * just the final frame. `full` returns them unchanged.
52
+ */
53
+ declare function adaptKeyframes(frames: Keyframe[], level?: MotionSensitivity): Keyframe[];
35
54
  /** The current global motion intensity. */
36
55
  declare function getMotionIntensity(): MotionIntensity;
37
56
  /** `true` when animations should be reduced (OS setting or `configureComponents`). */
@@ -165,7 +184,11 @@ declare function defineTypewriter(tag?: string): CustomElementConstructor | unde
165
184
  * them in a cascade (pure CSS animation per unit, transform / opacity /
166
185
  * filter only). Words never break across lines.
167
186
  *
168
- * Attributes: `by` (`chars` | `words`, default `chars`), `effect`
187
+ * 4.3: `Intl.Segmenter`-aware (emoji, CJK words), Arabic-script words are
188
+ * never split below the word, `by="lines"` reveals line by line, and `from`
189
+ * (`start` · `end` · `center` · `edges` · `random`) sets the cascade order.
190
+ *
191
+ * Attributes: `by` (`chars` | `words` | `lines`, default `chars`), `effect`
169
192
  * (`rise` | `fade` | `blur` | `flip` | `pop`, default `rise`), `stagger`
170
193
  * (ms between units, 28 for chars / 70 for words), `duration` (ms, 620),
171
194
  * `delay` (ms, 0), `trigger` (`view` | `load` | `manual`, default `view`),
@@ -292,6 +315,185 @@ interface UsaScrollHighlightElement extends UsaElement {
292
315
  }
293
316
  declare function defineScrollHighlight(tag?: string): CustomElementConstructor | undefined;
294
317
 
318
+ /**
319
+ * Where a step starts on a timeline:
320
+ * - a number: absolute time in ms
321
+ * - `'>'` (default): when the previous step ends · `'<'`: when it starts
322
+ * - `'+=200'` / `'-=200'`: after / overlapping the previous end
323
+ * - `'<+=100'`: 100ms after the previous step's start
324
+ * - `'intro'` / `'intro+=150'`: at (or relative to) a label
325
+ */
326
+ type TimelinePosition = number | string;
327
+ interface TimelineStepOptions {
328
+ /** Duration in ms or a motion token name (`'fast'`, `'slow'`…; 4.2). Default: timeline default, 600. */
329
+ duration?: number | string;
330
+ /** CSS easing or a motion token name (`'emphasized'`, `'spring'`…; 4.2). Default `cubic-bezier(0.22, 1, 0.36, 1)`. */
331
+ easing?: string;
332
+ /** Start position, see `TimelinePosition`. */
333
+ at?: TimelinePosition;
334
+ /** ms between targets when the selector matches several elements. */
335
+ stagger?: number;
336
+ }
337
+ interface TimelineOptions {
338
+ /** Defaults for every step. */
339
+ defaults?: Pick<TimelineStepOptions, 'duration' | 'easing' | 'stagger'>;
340
+ /** Playback rate (1 = normal). */
341
+ speed?: number;
342
+ /** Called after `play()` reaches the end (or the start when reversed). */
343
+ onComplete?: () => void;
344
+ /** Called on every frame with progress 0–1. */
345
+ onUpdate?: (progress: number) => void;
346
+ }
347
+ interface ScrubOptions {
348
+ /** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts (JS engine only). */
349
+ offset?: number;
350
+ /** Smoothing 0–1 (0 = immediate, default 0). Smoothing needs the JS engine. */
351
+ smooth?: number;
352
+ /**
353
+ * 4.1: which progress source drives the timeline.
354
+ * - `'view'` (default): `source` moving through the viewport (CSS `ViewTimeline`, range `cover`).
355
+ * - `'scroll'`: the scroll position of `source` itself (a scroll container; CSS `ScrollTimeline`).
356
+ */
357
+ source?: 'view' | 'scroll';
358
+ /** 4.1: `'auto'` (default) uses the browser's native scroll-driven animations when available, `'js'` forces the fallback. */
359
+ engine?: 'auto' | 'native' | 'js';
360
+ /** 4.1: scroll axis, `'block'` (default) · `'inline'` · `'x'` · `'y'`. */
361
+ axis?: 'block' | 'inline' | 'x' | 'y';
362
+ }
363
+ /** The function `scrub()` returns: call it to stop. `native` tells which engine runs it. */
364
+ interface ScrubHandle {
365
+ (): void;
366
+ /** `true` when the browser's ScrollTimeline / ViewTimeline drives it (compositor, no JS per frame). */
367
+ readonly native: boolean;
368
+ }
369
+ /** 4.1: whether `scrub()` can use native ScrollTimeline / ViewTimeline here. */
370
+ declare function supportsNativeScrub(source?: 'view' | 'scroll'): boolean;
371
+ interface Timeline {
372
+ /** Total length in ms. */
373
+ readonly duration: number;
374
+ /** Label positions in ms. */
375
+ readonly labels: Readonly<Record<string, number>>;
376
+ /** Current playhead in ms. */
377
+ readonly time: number;
378
+ /** Add a step: animate `target` with keyframes or a preset name (`fade-up`, `scale`…). */
379
+ to(target: string | Element | Element[] | NodeList, frames: Keyframe[] | string, options?: TimelineStepOptions): Timeline;
380
+ /** Name a position (default: the current end). */
381
+ label(name: string, at?: TimelinePosition): Timeline;
382
+ /** Run `fn` when the playhead passes `at`. */
383
+ call(fn: () => void, at?: TimelinePosition): Timeline;
384
+ /** Play forwards from the playhead (from 0 when at the end). Resolves at the end. */
385
+ play(from?: TimelinePosition): Promise<void>;
386
+ /** Play backwards to 0. */
387
+ reverse(): Promise<void>;
388
+ pause(): Timeline;
389
+ /** Jump to a time (ms) or label. */
390
+ seek(to: TimelinePosition): Timeline;
391
+ /** Get or set progress 0–1. */
392
+ progress(p?: number): number;
393
+ /**
394
+ * Tie progress to scroll: `source` moving through the viewport (or, with
395
+ * `{ source: 'scroll' }`, a scroll container's own position). Runs on native
396
+ * ScrollTimeline / ViewTimeline when available (and no `smooth`, `offset`,
397
+ * `call()` cues or `onUpdate` need JS), else on a rAF-throttled listener.
398
+ * Returns a stop function with a `native` flag.
399
+ */
400
+ scrub(source: Element, options?: ScrubOptions): ScrubHandle;
401
+ /** Stop and drop every animation (elements keep their last frame). */
402
+ cancel(): void;
403
+ }
404
+ /** Keyframe presets usable by name in `to()` and `data-tl`. */
405
+ declare const TIMELINE_PRESETS: Record<string, Keyframe[]>;
406
+ /** Resolve a position against the previous step and labels (pure). */
407
+ declare function resolvePosition(pos: TimelinePosition | undefined, end: number, prevStart: number, labels?: Record<string, number>): number;
408
+ /**
409
+ * Choreograph animations on one clock: chain, overlap, label, seek, reverse and
410
+ * scrub them with scroll. Built on WAAPI (paused animations driven by one
411
+ * playhead); without WAAPI or under reduced motion it jumps to the end state.
412
+ *
413
+ * @example
414
+ * const tl = timeline({ defaults: { duration: 500 } })
415
+ * .to('.title', 'fade-up')
416
+ * .label('cards')
417
+ * .to('.card', 'scale', { stagger: 80, at: '-=200' })
418
+ * .to('.cta', [{ opacity: 0 }, { opacity: 1 }], { at: 'cards+=400' });
419
+ * tl.play(); // or tl.scrub(document.querySelector('.hero'))
420
+ */
421
+ declare function timeline(options?: TimelineOptions): Timeline;
422
+
423
+ /**
424
+ * `splitText()` (4.3) — split an element's text into characters, words and / or
425
+ * lines, ready for per-unit choreography with `timeline()`.
426
+ *
427
+ * - Grapheme- and word-aware via `Intl.Segmenter` when available: emoji and
428
+ * combining marks stay whole; Chinese / Japanese / Korean text is split into
429
+ * real words (or one unit per character without `Segmenter`).
430
+ * - RTL aware: Arabic-script text (cursive, letters join) is never split
431
+ * below the word, so shaping is preserved; Hebrew and other RTL scripts
432
+ * split per character. Units stay in logical (reading) order.
433
+ * - Nested inline markup (`<em>`, `<a>`, `<br>`) is preserved.
434
+ * - Accessible: the original text stays available to assistive tech via a
435
+ * visually hidden copy; the split spans are `aria-hidden`.
436
+ */
437
+ type SplitBy = 'char' | 'word' | 'line';
438
+ interface SplitTextOptions {
439
+ /** What to split into: `'char'`, `'word'`, `'line'` or several, e.g. `['word', 'line']`. Default `'char'` (words are always wrapped too). */
440
+ by?: SplitBy | SplitBy[] | string;
441
+ /** Locale for `Intl.Segmenter` (default: the element's `lang`, else the document's). */
442
+ locale?: string;
443
+ /** Class prefix (default `usa-split`): units get `usa-split-char` / `-word` / `-line`. */
444
+ className?: string;
445
+ }
446
+ interface SplitResult {
447
+ chars: HTMLElement[];
448
+ words: HTMLElement[];
449
+ lines: HTMLElement[];
450
+ /** `'rtl'` or `'ltr'` — the direction the split ran in. */
451
+ direction: 'ltr' | 'rtl';
452
+ /** Re-measure lines (call after a resize or font load). */
453
+ relayout(): HTMLElement[];
454
+ /** Restore the original markup. */
455
+ revert(): void;
456
+ }
457
+ /** Scripts whose letters join (splitting them would break shaping). */
458
+ declare const JOINING_SCRIPT: RegExp;
459
+ /** Grapheme clusters of `s` (emoji / combining marks stay whole). */
460
+ declare function graphemes(s: string, locale?: string): string[];
461
+ /**
462
+ * Word-ish tokens of `s`, whitespace kept as separate tokens. CJK text is
463
+ * segmented into words with `Intl.Segmenter`, or per character without it.
464
+ */
465
+ declare function words(s: string, locale?: string): string[];
466
+ declare function splitText(el: HTMLElement, options?: SplitTextOptions): SplitResult;
467
+ type SplitFrom = 'start' | 'end' | 'center' | 'edges' | 'random';
468
+ /** Order indices `0…n-1` by choreography: from the start, end, center outwards, edges inwards, or random (seeded). */
469
+ declare function splitOrder(n: number, from?: SplitFrom, seed?: number): number[];
470
+ interface SplitTimelineOptions extends SplitTextOptions {
471
+ /** Which units to animate (default: the finest in `by`). */
472
+ unit?: 'char' | 'word' | 'line';
473
+ /** Timeline preset name or keyframes (default `'fade-up'`). */
474
+ preset?: string | Keyframe[];
475
+ /** ms between units (default 30 for chars, 80 for words, 140 for lines). */
476
+ stagger?: number;
477
+ /** Duration per unit in ms or a motion token name (default 500). */
478
+ duration?: number | string;
479
+ easing?: string;
480
+ /** Choreography order (default `'start'` — reading order, also for RTL). */
481
+ from?: SplitFrom;
482
+ }
483
+ /**
484
+ * Split `el` and build a `timeline()` with one step per unit — play it,
485
+ * `scrub()` it with scroll, `reverse()` or `seek()` it.
486
+ *
487
+ * ```ts
488
+ * const { timeline: tl } = splitTimeline(h1, { by: 'char', preset: 'blur', from: 'center' });
489
+ * tl.play();
490
+ * ```
491
+ */
492
+ declare function splitTimeline(el: HTMLElement, options?: SplitTimelineOptions): {
493
+ split: SplitResult;
494
+ timeline: Timeline;
495
+ };
496
+
295
497
  /**
296
498
  * use-scroll-animate/components/text — text effects.
297
499
  * `<usa-typewriter>`, `<usa-split-text>`, `<usa-scramble>`, `<usa-counter>`,
@@ -1747,111 +1949,6 @@ declare global {
1747
1949
  }
1748
1950
  }
1749
1951
 
1750
- /**
1751
- * Where a step starts on a timeline:
1752
- * - a number: absolute time in ms
1753
- * - `'>'` (default): when the previous step ends · `'<'`: when it starts
1754
- * - `'+=200'` / `'-=200'`: after / overlapping the previous end
1755
- * - `'<+=100'`: 100ms after the previous step's start
1756
- * - `'intro'` / `'intro+=150'`: at (or relative to) a label
1757
- */
1758
- type TimelinePosition = number | string;
1759
- interface TimelineStepOptions {
1760
- /** Duration in ms or a motion token name (`'fast'`, `'slow'`…; 4.2). Default: timeline default, 600. */
1761
- duration?: number | string;
1762
- /** CSS easing or a motion token name (`'emphasized'`, `'spring'`…; 4.2). Default `cubic-bezier(0.22, 1, 0.36, 1)`. */
1763
- easing?: string;
1764
- /** Start position, see `TimelinePosition`. */
1765
- at?: TimelinePosition;
1766
- /** ms between targets when the selector matches several elements. */
1767
- stagger?: number;
1768
- }
1769
- interface TimelineOptions {
1770
- /** Defaults for every step. */
1771
- defaults?: Pick<TimelineStepOptions, 'duration' | 'easing' | 'stagger'>;
1772
- /** Playback rate (1 = normal). */
1773
- speed?: number;
1774
- /** Called after `play()` reaches the end (or the start when reversed). */
1775
- onComplete?: () => void;
1776
- /** Called on every frame with progress 0–1. */
1777
- onUpdate?: (progress: number) => void;
1778
- }
1779
- interface ScrubOptions {
1780
- /** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts (JS engine only). */
1781
- offset?: number;
1782
- /** Smoothing 0–1 (0 = immediate, default 0). Smoothing needs the JS engine. */
1783
- smooth?: number;
1784
- /**
1785
- * 4.1: which progress source drives the timeline.
1786
- * - `'view'` (default): `source` moving through the viewport (CSS `ViewTimeline`, range `cover`).
1787
- * - `'scroll'`: the scroll position of `source` itself (a scroll container; CSS `ScrollTimeline`).
1788
- */
1789
- source?: 'view' | 'scroll';
1790
- /** 4.1: `'auto'` (default) uses the browser's native scroll-driven animations when available, `'js'` forces the fallback. */
1791
- engine?: 'auto' | 'native' | 'js';
1792
- /** 4.1: scroll axis, `'block'` (default) · `'inline'` · `'x'` · `'y'`. */
1793
- axis?: 'block' | 'inline' | 'x' | 'y';
1794
- }
1795
- /** The function `scrub()` returns: call it to stop. `native` tells which engine runs it. */
1796
- interface ScrubHandle {
1797
- (): void;
1798
- /** `true` when the browser's ScrollTimeline / ViewTimeline drives it (compositor, no JS per frame). */
1799
- readonly native: boolean;
1800
- }
1801
- /** 4.1: whether `scrub()` can use native ScrollTimeline / ViewTimeline here. */
1802
- declare function supportsNativeScrub(source?: 'view' | 'scroll'): boolean;
1803
- interface Timeline {
1804
- /** Total length in ms. */
1805
- readonly duration: number;
1806
- /** Label positions in ms. */
1807
- readonly labels: Readonly<Record<string, number>>;
1808
- /** Current playhead in ms. */
1809
- readonly time: number;
1810
- /** Add a step: animate `target` with keyframes or a preset name (`fade-up`, `scale`…). */
1811
- to(target: string | Element | Element[] | NodeList, frames: Keyframe[] | string, options?: TimelineStepOptions): Timeline;
1812
- /** Name a position (default: the current end). */
1813
- label(name: string, at?: TimelinePosition): Timeline;
1814
- /** Run `fn` when the playhead passes `at`. */
1815
- call(fn: () => void, at?: TimelinePosition): Timeline;
1816
- /** Play forwards from the playhead (from 0 when at the end). Resolves at the end. */
1817
- play(from?: TimelinePosition): Promise<void>;
1818
- /** Play backwards to 0. */
1819
- reverse(): Promise<void>;
1820
- pause(): Timeline;
1821
- /** Jump to a time (ms) or label. */
1822
- seek(to: TimelinePosition): Timeline;
1823
- /** Get or set progress 0–1. */
1824
- progress(p?: number): number;
1825
- /**
1826
- * Tie progress to scroll: `source` moving through the viewport (or, with
1827
- * `{ source: 'scroll' }`, a scroll container's own position). Runs on native
1828
- * ScrollTimeline / ViewTimeline when available (and no `smooth`, `offset`,
1829
- * `call()` cues or `onUpdate` need JS), else on a rAF-throttled listener.
1830
- * Returns a stop function with a `native` flag.
1831
- */
1832
- scrub(source: Element, options?: ScrubOptions): ScrubHandle;
1833
- /** Stop and drop every animation (elements keep their last frame). */
1834
- cancel(): void;
1835
- }
1836
- /** Keyframe presets usable by name in `to()` and `data-tl`. */
1837
- declare const TIMELINE_PRESETS: Record<string, Keyframe[]>;
1838
- /** Resolve a position against the previous step and labels (pure). */
1839
- declare function resolvePosition(pos: TimelinePosition | undefined, end: number, prevStart: number, labels?: Record<string, number>): number;
1840
- /**
1841
- * Choreograph animations on one clock: chain, overlap, label, seek, reverse and
1842
- * scrub them with scroll. Built on WAAPI (paused animations driven by one
1843
- * playhead); without WAAPI or under reduced motion it jumps to the end state.
1844
- *
1845
- * @example
1846
- * const tl = timeline({ defaults: { duration: 500 } })
1847
- * .to('.title', 'fade-up')
1848
- * .label('cards')
1849
- * .to('.card', 'scale', { stagger: 80, at: '-=200' })
1850
- * .to('.cta', [{ opacity: 0 }, { opacity: 1 }], { at: 'cards+=400' });
1851
- * tl.play(); // or tl.scrub(document.querySelector('.hero'))
1852
- */
1853
- declare function timeline(options?: TimelineOptions): Timeline;
1854
-
1855
1952
  /**
1856
1953
  * `<usa-timeline>` — declarative choreography. Every descendant with
1857
1954
  * `data-tl="<preset>"` becomes a step, in document order; `data-at`
@@ -2496,11 +2593,95 @@ declare const COMPONENT_CATEGORIES: {
2496
2593
  };
2497
2594
  type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
2498
2595
 
2596
+ /**
2597
+ * use-scroll-animate/components/a11y — accessibility toolkit (4.4).
2598
+ *
2599
+ * - Motion-sensitivity levels: `setMotionSensitivity('full' | 'gentle' | 'minimal' | 'static')`.
2600
+ * - Static alternatives: what every component shows when motion is off, and
2601
+ * `staticAlternative(root)` to freeze any subtree at its final state.
2602
+ * - `aria-live` conventions: one shared polite and one assertive region,
2603
+ * `announce(message, { politeness })`.
2604
+ * - `auditMotionA11y(root)`: the rules the automated regression tests run
2605
+ * over every `<usa-*>` element — usable in your own tests too.
2606
+ *
2607
+ * ```ts
2608
+ * import { setMotionSensitivity, announce, auditMotionA11y } from 'use-scroll-animate/components/a11y';
2609
+ * setMotionSensitivity('gentle', true); // no spins / zooms / parallax, remembered
2610
+ * announce('3 items added to cart'); // polite live region
2611
+ * expect(auditMotionA11y(document.body).errors).toEqual([]);
2612
+ * ```
2613
+ */
2614
+
2615
+ /** What each level allows, for docs and settings UIs. */
2616
+ declare const MOTION_SENSITIVITY: Record<MotionSensitivity, {
2617
+ en: string;
2618
+ zh: string;
2619
+ allows: string[];
2620
+ }>;
2621
+ /** CSS applied at the `static` / `minimal` / `gentle` levels (also stops your own CSS animations under `static`). */
2622
+ declare const SENSITIVITY_CSS: string;
2623
+ /**
2624
+ * Set the motion-sensitivity level for every `<usa-*>` component and the page:
2625
+ * sets `data-usa-sensitivity` on `<html>`, adapts component keyframes, and
2626
+ * with `persist` remembers the choice (`restoreMotionSensitivity()`).
2627
+ * Dispatches `usa:sensitivity` on `document`.
2628
+ */
2629
+ declare function setMotionSensitivity(level: MotionSensitivity, persist?: boolean): void;
2630
+ /** Re-apply a persisted level (call early on page load). Returns the active level. */
2631
+ declare function restoreMotionSensitivity(): MotionSensitivity;
2632
+ /** `true` when the current level allows a kind of motion (`'rotate'`, `'parallax'`, `'loop'`…). */
2633
+ declare function motionAllowed(kind: string, level?: MotionSensitivity): boolean;
2634
+ /** The static alternative of each category: what its elements show without motion. */
2635
+ declare const STATIC_ALTERNATIVES: Record<ComponentCategory, string>;
2636
+ /**
2637
+ * Freeze a subtree at its static alternative: finishes running animations
2638
+ * (`finish()`, so content lands on its final state), marks the root with
2639
+ * `data-usa-static` and returns an undo that removes the mark.
2640
+ */
2641
+ declare function staticAlternative(root: Element): () => void;
2642
+ type Politeness = 'polite' | 'assertive';
2643
+ /** The ids of the shared live regions. */
2644
+ declare const LIVE_REGION_IDS: Record<Politeness, string>;
2645
+ /** The shared live region (created once, visually hidden, `role="status"` / `role="alert"`). */
2646
+ declare function liveRegion(politeness?: Politeness): HTMLElement | null;
2647
+ /**
2648
+ * Announce a message through the shared live region. Conventions: `polite`
2649
+ * for results of the user's own actions (added, saved, copied), `assertive`
2650
+ * only for errors that block them. Identical messages within `dedupe` ms
2651
+ * (default 500) are dropped; the region is cleared first so repeats are read.
2652
+ */
2653
+ declare function announce(message: string, options?: {
2654
+ politeness?: Politeness;
2655
+ dedupe?: number;
2656
+ }): boolean;
2657
+ interface A11yIssue {
2658
+ rule: string;
2659
+ level: 'error' | 'warning';
2660
+ element: Element;
2661
+ message: string;
2662
+ }
2663
+ /**
2664
+ * Check a subtree against the library's motion-a11y rules:
2665
+ * - `aria-hidden-focusable` (error): focusable content inside `aria-hidden`.
2666
+ * - `role-name` (error): a widget role without an accessible name.
2667
+ * - `range-value` (error): a slider / determinate progressbar without `aria-valuenow`.
2668
+ * - `img-alt` (error): an `<img>` without `alt`.
2669
+ * - `assertive-live` (warning): `aria-live="assertive"` outside `role="alert"`.
2670
+ * - `infinite-no-control` (warning, WCAG 2.2.2): an endless animation on a
2671
+ * page with no way to pause motion (`<usa-motion-switch>` or `[data-usa-pause]`).
2672
+ */
2673
+ declare function auditMotionA11y(root: Element | Document): {
2674
+ errors: A11yIssue[];
2675
+ warnings: A11yIssue[];
2676
+ };
2677
+ /** Every `<usa-*>` tag, for sweeping audits. */
2678
+ declare const ALL_TAGS: string[];
2679
+
2499
2680
  /**
2500
2681
  * Register every `<usa-*>` component (or only the given categories).
2501
2682
  * Safe to call more than once and on the server (no-op without DOM).
2502
2683
  */
2503
2684
  declare function defineComponents(categories?: ComponentCategory[]): void;
2504
2685
 
2505
- export { AMBIENT_EFFECTS, ANIM_ICONS, BUTTON_DEFORMS, CARD_EFFECTS, CLICK_EFFECTS, COMPONENT_CATEGORIES, CURSOR_MODES, MASK_SHAPES, MORPH_ICONS, MOTION_SCALE, MOTION_TOKENS, PACKS, PACK_PRIMITIVES, PAGE_EFFECTS, REVEAL_EFFECTS, SHADERS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, TIMELINE_PRESETS, VARIANTS, adoptVariants, applyMotionTokens, applyPack, autoAnimate, burst, confetti, configureComponents, countUp, createSpring, defineAccordion, defineAcrylic, defineAmbient, defineAnimIcon, defineAurora, defineAutoAnimate, defineAutoSkeleton, defineAvatarStack, defineBackToTop, defineBackgroundComponents, defineBadge, defineBlobs, defineBottomSheet, defineButton, defineCard, defineCardComponents, defineCardStack, defineCarousel3d, defineCheck, defineCheckbox, defineClick, defineClickComponents, defineComponents, defineCounter, defineCube, defineCursor, defineDepth, defineDepthComponents, defineDialog, defineDistort, defineDotNetwork, defineDoubleTap, defineDraggable, defineDraw, defineDrawer, defineFab, defineFeedbackComponents, defineFullpage, defineGestureComponents, defineGlitch, defineGradientText, defineGrain, defineGridGlow, defineHandwriting, defineHold, defineIconMorph, defineInteractionComponents, defineLayoutComponents, defineLike, defineLiquid, defineLoadingBar, defineMagnetic, defineMarquee, defineMaskReveal, defineMasonry, defineMorph, defineMotionSwitch, defineNavbar, defineOverscroll, definePack, definePacksComponents, definePageComponents, defineParticles, definePhysicsComponents, definePinchZoom, definePopover, definePress, defineProgress, definePullRefresh, defineRating, defineReveal, defineRevealComponents, defineRipple, defineScramble, defineScrollHighlight, defineScrollProgress, defineScrolly, defineShader, defineShimmerText, defineSkeleton, defineSlider, defineSpinner, defineSplash, defineSplitText, defineSpotlight, defineSpring, defineStagger, defineStickyStack, defineSvgComponents, defineSwipeable, defineTabs, defineTextComponents, defineTextRotate, defineTilt, defineTimeline, defineTimelineComponents, defineToaster, defineToggle, defineTooltip, defineTransitionComponents, defineTypewriter, defineUiComponents, defineViewSwitch, defineWaterRipple, defineWaveText, defineWebglComponents, deviceTilt, drawLines, easeOutExpo, enableMpaTransitions, flip, flipFrames, fluentPreset, flyToCart, fragmentSource, gesture, getMotionIntensity, getMotionTokens, glQuad, haptic, importMotionTokens, interpolatePath, linearEasing, loadingBar, masonryLayout, mergeMotionTokens, morphPath, morphTo, motionToken, motionTokensToCss, motionTokensToJSON, motionTokensToVars, motionVar, orientationToTilt, pageTransition, parseDuration, parseEasing, pathsCompatible, pinchScale, prefersReducedMotion, projectInertia, readScrollProgress, requestOrientationPermission, resolveDurationToken, resolveEasingToken, resolvePosition, resolveSpring, restoreMotionIntensity, revealKeyframes, rubberBand, scrambleFrame, scrollToTarget, setMotionIntensity, setVariant, shake, sharedTransition, smoothScroll, snapTo, spring, springEasing, springEffectKeyframes, springSamples, stepSpring, supportsLinearEasing, supportsNativeScrub, supportsOrientation, supportsViewTransitions, supportsWebGL, swipeDirection, themeTransition, timeline, toast, viewTransition };
2506
- export type { AmbientEffect, AutoAnimateOptions, BurstOptions, ButtonDeform, ButtonShape, ButtonState, CardEffect, ClickEffect, ComponentCategory, ComponentsConfig, ConfettiOptions, CursorMode, DeepPartialTokens, DialogVariant, FlipOptions, FluentPresetOptions, GLQuad, GestureHandlers, GestureOptions, MorphOptions, MotionIntensity, MotionTokenGroup, MotionTokens, PackContext, PackName, PageEffect, PageTransitionOptions, PanState, PinchState, Placement, PressState, RevealEffect, ScrubHandle, ScrubOptions, SharedOptions, SmoothScrollOptions, SpinnerVariant, SpringConfig, SpringEffect, SpringInput, SpringPreset, SpringToken, SpringValue, SpringValueOptions, SwipeDirection, SwipeState, TiltReading, Timeline, TimelineOptions, TimelinePosition, TimelineStepOptions, ToastHandle, ToastOptions, ToastType, UsaAccordionElement, UsaAcrylicElement, UsaAmbientElement, UsaAnimIconElement, UsaAuroraElement, UsaAutoAnimateElement, UsaAutoSkeletonElement, UsaAvatarStackElement, UsaBackToTopElement, UsaBadgeElement, UsaBlobsElement, UsaBottomSheetElement, UsaButtonElement, UsaCardElement, UsaCardStackElement, UsaCarousel3dElement, UsaCheckElement, UsaCheckboxElement, UsaClickElement, UsaCounterElement, UsaCubeElement, UsaCursorElement, UsaDepthElement, UsaDialogElement, UsaDotNetworkElement, UsaDoubleTapElement, UsaDraggableElement, UsaDrawElement, UsaDrawerElement, UsaElement, UsaFabElement, UsaFullpageElement, UsaGLElement, UsaGlitchElement, UsaGradientTextElement, UsaGrainElement, UsaGridGlowElement, UsaHandwritingElement, UsaHoldElement, UsaIconMorphElement, UsaLikeElement, UsaLoadingBarElement, UsaMagneticElement, UsaMarqueeElement, UsaMaskRevealElement, UsaMasonryElement, UsaMorphElement, UsaMotionSwitchElement, UsaNavbarElement, UsaOverscrollElement, UsaPackElement, UsaParticlesElement, UsaPinchZoomElement, UsaPopoverElement, UsaPressElement, UsaProgressElement, UsaPullRefreshElement, UsaRatingElement, UsaRevealElement, UsaRippleElement, UsaScrambleElement, UsaScrollHighlightElement, UsaScrollProgressElement, UsaScrollyElement, UsaShimmerTextElement, UsaSkeletonElement, UsaSliderElement, UsaSpinnerElement, UsaSplashElement, UsaSplitTextElement, UsaSpotlightElement, UsaSpringElement, UsaStaggerElement, UsaStickyStackElement, UsaSwipeableElement, UsaTabsElement, UsaTextRotateElement, UsaTiltElement, UsaTimelineElement, UsaToasterElement, UsaToggleElement, UsaTooltipElement, UsaTypewriterElement, UsaViewSwitchElement, UsaWaterRippleElement, UsaWaveTextElement, Variant, ViewTransitionOptions };
2686
+ export { ALL_TAGS, AMBIENT_EFFECTS, ANIM_ICONS, BUTTON_DEFORMS, CARD_EFFECTS, CLICK_EFFECTS, COMPONENT_CATEGORIES, CURSOR_MODES, JOINING_SCRIPT, LIVE_REGION_IDS, MASK_SHAPES, MORPH_ICONS, MOTION_SCALE, MOTION_SENSITIVITY, MOTION_SENSITIVITY_LEVELS, MOTION_TOKENS, PACKS, PACK_PRIMITIVES, PAGE_EFFECTS, REVEAL_EFFECTS, SENSITIVITY_CSS, SHADERS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, STATIC_ALTERNATIVES, TIMELINE_PRESETS, VARIANTS, adaptKeyframes, adoptVariants, announce, applyMotionTokens, applyPack, auditMotionA11y, autoAnimate, burst, confetti, configureComponents, countUp, createSpring, defineAccordion, defineAcrylic, defineAmbient, defineAnimIcon, defineAurora, defineAutoAnimate, defineAutoSkeleton, defineAvatarStack, defineBackToTop, defineBackgroundComponents, defineBadge, defineBlobs, defineBottomSheet, defineButton, defineCard, defineCardComponents, defineCardStack, defineCarousel3d, defineCheck, defineCheckbox, defineClick, defineClickComponents, defineComponents, defineCounter, defineCube, defineCursor, defineDepth, defineDepthComponents, defineDialog, defineDistort, defineDotNetwork, defineDoubleTap, defineDraggable, defineDraw, defineDrawer, defineFab, defineFeedbackComponents, defineFullpage, defineGestureComponents, defineGlitch, defineGradientText, defineGrain, defineGridGlow, defineHandwriting, defineHold, defineIconMorph, defineInteractionComponents, defineLayoutComponents, defineLike, defineLiquid, defineLoadingBar, defineMagnetic, defineMarquee, defineMaskReveal, defineMasonry, defineMorph, defineMotionSwitch, defineNavbar, defineOverscroll, definePack, definePacksComponents, definePageComponents, defineParticles, definePhysicsComponents, definePinchZoom, definePopover, definePress, defineProgress, definePullRefresh, defineRating, defineReveal, defineRevealComponents, defineRipple, defineScramble, defineScrollHighlight, defineScrollProgress, defineScrolly, defineShader, defineShimmerText, defineSkeleton, defineSlider, defineSpinner, defineSplash, defineSplitText, defineSpotlight, defineSpring, defineStagger, defineStickyStack, defineSvgComponents, defineSwipeable, defineTabs, defineTextComponents, defineTextRotate, defineTilt, defineTimeline, defineTimelineComponents, defineToaster, defineToggle, defineTooltip, defineTransitionComponents, defineTypewriter, defineUiComponents, defineViewSwitch, defineWaterRipple, defineWaveText, defineWebglComponents, deviceTilt, drawLines, easeOutExpo, enableMpaTransitions, flip, flipFrames, fluentPreset, flyToCart, fragmentSource, gesture, getMotionIntensity, getMotionSensitivity, getMotionTokens, glQuad, graphemes, haptic, importMotionTokens, interpolatePath, linearEasing, liveRegion, loadingBar, masonryLayout, mergeMotionTokens, morphPath, morphTo, motionAllowed, motionToken, motionTokensToCss, motionTokensToJSON, motionTokensToVars, motionVar, orientationToTilt, pageTransition, parseDuration, parseEasing, pathsCompatible, pinchScale, prefersReducedMotion, projectInertia, readScrollProgress, requestOrientationPermission, resolveDurationToken, resolveEasingToken, resolvePosition, resolveSpring, restoreMotionIntensity, restoreMotionSensitivity, revealKeyframes, rubberBand, scrambleFrame, scrollToTarget, setMotionIntensity, setMotionSensitivity, setVariant, shake, sharedTransition, smoothScroll, snapTo, splitOrder, splitText, splitTimeline, words as splitWords, spring, springEasing, springEffectKeyframes, springSamples, staticAlternative, stepSpring, supportsLinearEasing, supportsNativeScrub, supportsOrientation, supportsViewTransitions, supportsWebGL, swipeDirection, themeTransition, timeline, toast, viewTransition };
2687
+ export type { A11yIssue, AmbientEffect, AutoAnimateOptions, BurstOptions, ButtonDeform, ButtonShape, ButtonState, CardEffect, ClickEffect, ComponentCategory, ComponentsConfig, ConfettiOptions, CursorMode, DeepPartialTokens, DialogVariant, FlipOptions, FluentPresetOptions, GLQuad, GestureHandlers, GestureOptions, MorphOptions, MotionIntensity, MotionSensitivity, MotionTokenGroup, MotionTokens, PackContext, PackName, PageEffect, PageTransitionOptions, PanState, PinchState, Placement, Politeness, PressState, RevealEffect, ScrubHandle, ScrubOptions, SharedOptions, SmoothScrollOptions, SpinnerVariant, SplitBy, SplitFrom, SplitResult, SplitTextOptions, SplitTimelineOptions, SpringConfig, SpringEffect, SpringInput, SpringPreset, SpringToken, SpringValue, SpringValueOptions, SwipeDirection, SwipeState, TiltReading, Timeline, TimelineOptions, TimelinePosition, TimelineStepOptions, ToastHandle, ToastOptions, ToastType, UsaAccordionElement, UsaAcrylicElement, UsaAmbientElement, UsaAnimIconElement, UsaAuroraElement, UsaAutoAnimateElement, UsaAutoSkeletonElement, UsaAvatarStackElement, UsaBackToTopElement, UsaBadgeElement, UsaBlobsElement, UsaBottomSheetElement, UsaButtonElement, UsaCardElement, UsaCardStackElement, UsaCarousel3dElement, UsaCheckElement, UsaCheckboxElement, UsaClickElement, UsaCounterElement, UsaCubeElement, UsaCursorElement, UsaDepthElement, UsaDialogElement, UsaDotNetworkElement, UsaDoubleTapElement, UsaDraggableElement, UsaDrawElement, UsaDrawerElement, UsaElement, UsaFabElement, UsaFullpageElement, UsaGLElement, UsaGlitchElement, UsaGradientTextElement, UsaGrainElement, UsaGridGlowElement, UsaHandwritingElement, UsaHoldElement, UsaIconMorphElement, UsaLikeElement, UsaLoadingBarElement, UsaMagneticElement, UsaMarqueeElement, UsaMaskRevealElement, UsaMasonryElement, UsaMorphElement, UsaMotionSwitchElement, UsaNavbarElement, UsaOverscrollElement, UsaPackElement, UsaParticlesElement, UsaPinchZoomElement, UsaPopoverElement, UsaPressElement, UsaProgressElement, UsaPullRefreshElement, UsaRatingElement, UsaRevealElement, UsaRippleElement, UsaScrambleElement, UsaScrollHighlightElement, UsaScrollProgressElement, UsaScrollyElement, UsaShimmerTextElement, UsaSkeletonElement, UsaSliderElement, UsaSpinnerElement, UsaSplashElement, UsaSplitTextElement, UsaSpotlightElement, UsaSpringElement, UsaStaggerElement, UsaStickyStackElement, UsaSwipeableElement, UsaTabsElement, UsaTextRotateElement, UsaTiltElement, UsaTimelineElement, UsaToasterElement, UsaToggleElement, UsaTooltipElement, UsaTypewriterElement, UsaViewSwitchElement, UsaWaterRippleElement, UsaWaveTextElement, Variant, ViewTransitionOptions };