use-scroll-animate 4.0.1 → 4.1.0

package/dist/components/svelte.cjs

@@ -17,7 +17,7 @@ require('./click.cjs');
 require('./ui.cjs');
 require('./page.cjs');
 require('./timeline.cjs');
-require('../chunks/core-DXqZm5Il.cjs');
+require('../chunks/core-CLu8ZrC-.cjs');
 require('./gesture.cjs');
 require('../chunks/core-IaorbTdu.cjs');
 require('./svg.cjs');

package/dist/components/svelte.d.cts

@@ -1295,10 +1295,26 @@ interface TimelineStepOptions {
     stagger?: number;
 }
 interface ScrubOptions {
-    /** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts. */
+    /** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts (JS engine only). */
     offset?: number;
-    /** Smoothing 0–1 (0 = immediate, default 0). */
+    /** Smoothing 0–1 (0 = immediate, default 0). Smoothing needs the JS engine. */
     smooth?: number;
+    /**
+     * 4.1: which progress source drives the timeline.
+     * - `'view'` (default): `source` moving through the viewport (CSS `ViewTimeline`, range `cover`).
+     * - `'scroll'`: the scroll position of `source` itself (a scroll container; CSS `ScrollTimeline`).
+     */
+    source?: 'view' | 'scroll';
+    /** 4.1: `'auto'` (default) uses the browser's native scroll-driven animations when available, `'js'` forces the fallback. */
+    engine?: 'auto' | 'native' | 'js';
+    /** 4.1: scroll axis, `'block'` (default) · `'inline'` · `'x'` · `'y'`. */
+    axis?: 'block' | 'inline' | 'x' | 'y';
+}
+/** The function `scrub()` returns: call it to stop. `native` tells which engine runs it. */
+interface ScrubHandle {
+    (): void;
+    /** `true` when the browser's ScrollTimeline / ViewTimeline drives it (compositor, no JS per frame). */
+    readonly native: boolean;
 }
 interface Timeline {
     /** Total length in ms. */
@@ -1322,8 +1338,14 @@ interface Timeline {
     seek(to: TimelinePosition): Timeline;
     /** Get or set progress 0–1. */
     progress(p?: number): number;
-    /** Tie progress to the scroll position of `source` (it moves through the viewport). Returns a stop function. */
-    scrub(source: Element, options?: ScrubOptions): () => void;
+    /**
+     * Tie progress to scroll: `source` moving through the viewport (or, with
+     * `{ source: 'scroll' }`, a scroll container's own position). Runs on native
+     * ScrollTimeline / ViewTimeline when available (and no `smooth`, `offset`,
+     * `call()` cues or `onUpdate` need JS), else on a rAF-throttled listener.
+     * Returns a stop function with a `native` flag.
+     */
+    scrub(source: Element, options?: ScrubOptions): ScrubHandle;
     /** Stop and drop every animation (elements keep their last frame). */
     cancel(): void;
 }
@@ -1337,7 +1359,9 @@ interface Timeline {
  * Attributes: `trigger` (`view` default · `click` · `manual`), `scrub`
  * (progress follows scroll instead of playing), `overlap` (ms each step
  * overlaps the previous, default 0), `duration` (600), `stagger` (ms),
- * `repeat` (replay every time it enters the viewport). Methods: `play()`,
+ * `repeat` (replay every time it enters the viewport). 4.1: `scrub` runs on native
+ * ScrollTimeline / ViewTimeline when supported (`data-native` is set); `scrub="js"`,
+ * `scrub="scroll"` and `smooth` tune it. Methods: `play()`,
  * `reverse()`, `seek(t)`; property `timeline`. Event `usa:complete`.
  * Reduced motion: steps appear in their final state.
  */

package/dist/components/svelte.d.ts

@@ -1295,10 +1295,26 @@ interface TimelineStepOptions {
     stagger?: number;
 }
 interface ScrubOptions {
-    /** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts. */
+    /** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts (JS engine only). */
     offset?: number;
-    /** Smoothing 0–1 (0 = immediate, default 0). */
+    /** Smoothing 0–1 (0 = immediate, default 0). Smoothing needs the JS engine. */
     smooth?: number;
+    /**
+     * 4.1: which progress source drives the timeline.
+     * - `'view'` (default): `source` moving through the viewport (CSS `ViewTimeline`, range `cover`).
+     * - `'scroll'`: the scroll position of `source` itself (a scroll container; CSS `ScrollTimeline`).
+     */
+    source?: 'view' | 'scroll';
+    /** 4.1: `'auto'` (default) uses the browser's native scroll-driven animations when available, `'js'` forces the fallback. */
+    engine?: 'auto' | 'native' | 'js';
+    /** 4.1: scroll axis, `'block'` (default) · `'inline'` · `'x'` · `'y'`. */
+    axis?: 'block' | 'inline' | 'x' | 'y';
+}
+/** The function `scrub()` returns: call it to stop. `native` tells which engine runs it. */
+interface ScrubHandle {
+    (): void;
+    /** `true` when the browser's ScrollTimeline / ViewTimeline drives it (compositor, no JS per frame). */
+    readonly native: boolean;
 }
 interface Timeline {
     /** Total length in ms. */
@@ -1322,8 +1338,14 @@ interface Timeline {
     seek(to: TimelinePosition): Timeline;
     /** Get or set progress 0–1. */
     progress(p?: number): number;
-    /** Tie progress to the scroll position of `source` (it moves through the viewport). Returns a stop function. */
-    scrub(source: Element, options?: ScrubOptions): () => void;
+    /**
+     * Tie progress to scroll: `source` moving through the viewport (or, with
+     * `{ source: 'scroll' }`, a scroll container's own position). Runs on native
+     * ScrollTimeline / ViewTimeline when available (and no `smooth`, `offset`,
+     * `call()` cues or `onUpdate` need JS), else on a rAF-throttled listener.
+     * Returns a stop function with a `native` flag.
+     */
+    scrub(source: Element, options?: ScrubOptions): ScrubHandle;
     /** Stop and drop every animation (elements keep their last frame). */
     cancel(): void;
 }
@@ -1337,7 +1359,9 @@ interface Timeline {
  * Attributes: `trigger` (`view` default · `click` · `manual`), `scrub`
  * (progress follows scroll instead of playing), `overlap` (ms each step
  * overlaps the previous, default 0), `duration` (600), `stagger` (ms),
- * `repeat` (replay every time it enters the viewport). Methods: `play()`,
+ * `repeat` (replay every time it enters the viewport). 4.1: `scrub` runs on native
+ * ScrollTimeline / ViewTimeline when supported (`data-native` is set); `scrub="js"`,
+ * `scrub="scroll"` and `smooth` tune it. Methods: `play()`,
  * `reverse()`, `seek(t)`; property `timeline`. Event `usa:complete`.
  * Reduced motion: steps appear in their final state.
  */

package/dist/components/svelte.js

@@ -2,23 +2,23 @@ import { defineComponents } from '../components.js';
 import { b as bindUsa } from '../chunks/bind-B_CTL6Qn.js';
 export { u as usaEventName } from '../chunks/bind-B_CTL6Qn.js';
 import './reveal.js';
-import '../chunks/base-ZARFccur.js';
+import '../chunks/base-BPG5zvex.js';
 import './text.js';
 import './interaction.js';
 import './feedback.js';
 import './background.js';
-import '../chunks/variants-DvnxvRCM.js';
+import '../chunks/variants-BVYMcxRv.js';
 import './transitions.js';
 import './physics.js';
-import '../chunks/spring-E2ickYNI.js';
+import '../chunks/spring-BziPsW3r.js';
 import './cards.js';
 import './click.js';
 import './ui.js';
 import './page.js';
 import './timeline.js';
-import '../chunks/core-Co-6AL0h.js';
+import '../chunks/core-QTFk4kgO.js';
 import './gesture.js';
-import '../chunks/core-DKY-fVzR.js';
+import '../chunks/core-eXX8rB_b.js';
 import './svg.js';
 import './webgl.js';
 import './depth.js';

package/dist/components/svg.js

@@ -1,5 +1,5 @@
-import { d as clamp, m as motionScale, b as caf, p as prefersReducedMotion, n as now, r as raf, h as defineElement, i as EASE_OUT } from '../chunks/base-ZARFccur.js';
-export { a as configureComponents } from '../chunks/base-ZARFccur.js';
+import { b as clamp, m as motionScale, d as caf, p as prefersReducedMotion, n as now, r as raf, h as defineElement, i as EASE_OUT } from '../chunks/base-BPG5zvex.js';
+export { a as configureComponents } from '../chunks/base-BPG5zvex.js';
 
 const NUM = /-?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?/gi;
 /** `true` when two path strings share the same commands (so their numbers can be interpolated). */

package/dist/components/text.js

@@ -1,5 +1,5 @@
-import { h as defineElement, j as srText, b as caf, n as now, r as raf, i as EASE_OUT, E as EASE_SPRING, d as clamp } from '../chunks/base-ZARFccur.js';
-export { a as configureComponents, p as prefersReducedMotion } from '../chunks/base-ZARFccur.js';
+import { h as defineElement, j as srText, d as caf, n as now, r as raf, i as EASE_OUT, E as EASE_SPRING, b as clamp } from '../chunks/base-BPG5zvex.js';
+export { a as configureComponents, p as prefersReducedMotion } from '../chunks/base-BPG5zvex.js';
 
 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}}";
 

package/dist/components/timeline.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var base = require('../chunks/base-CXx7jZ-o.cjs');
-var core = require('../chunks/core-DXqZm5Il.cjs');
+var core = require('../chunks/core-CLu8ZrC-.cjs');
 
 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}}";
 
@@ -44,7 +44,13 @@ function defineTimeline(tag = 'usa-timeline') {
                 return;
             }
             if (this.flag('scrub')) {
-                this.onCleanup(tl.scrub(this, { smooth: 0.2 }));
+                // 4.1: native ScrollTimeline / ViewTimeline when available; `smooth`
+                // (0–0.95) or `scrub="js"` opt into the JS engine, `scrub="scroll"`
+                // follows this element's own scroll position.
+                const v = this.str('scrub');
+                const stop = tl.scrub(this, { smooth: this.num('smooth', 0), engine: v === 'js' ? 'js' : 'auto', source: v === 'scroll' ? 'scroll' : 'view' });
+                this.toggleAttribute('data-native', stop.native);
+                this.onCleanup(stop);
                 return;
             }
             const trigger = this.str('trigger', 'view');
@@ -97,6 +103,7 @@ exports.configureComponents = base.configureComponents;
 exports.prefersReducedMotion = base.prefersReducedMotion;
 exports.TIMELINE_PRESETS = core.TIMELINE_PRESETS;
 exports.resolvePosition = core.resolvePosition;
+exports.supportsNativeScrub = core.supportsNativeScrub;
 exports.timeline = core.timeline;
 exports.defineTimeline = defineTimeline;
 exports.defineTimelineComponents = defineTimelineComponents;

package/dist/components/timeline.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"timeline.cjs","sources":["../../src/components/timeline/timeline-el.ts","../../src/components/timeline/index.ts"],"sourcesContent":["import { defineElement, type UsaElement } from '../base';\nimport { timeline, TIMELINE_PRESETS, type Timeline } from './core';\nimport css from './timeline.css?raw';\n\n/**\n * `<usa-timeline>` — declarative choreography. Every descendant with\n * `data-tl=\"<preset>\"` becomes a step, in document order; `data-at`\n * (`'-=200'`, `'<'`, `'label+=100'`, ms), `data-duration` and `data-label`\n * fine-tune it.\n *\n * Attributes: `trigger` (`view` default · `click` · `manual`), `scrub`\n * (progress follows scroll instead of playing), `overlap` (ms each step\n * overlaps the previous, default 0), `duration` (600), `stagger` (ms),\n * `repeat` (replay every time it enters the viewport). Methods: `play()`,\n * `reverse()`, `seek(t)`; property `timeline`. Event `usa:complete`.\n * Reduced motion: steps appear in their final state.\n */\nexport interface UsaTimelineElement extends UsaElement {\n  readonly timeline: Timeline | null;\n  play(): Promise<void>;\n  reverse(): Promise<void>;\n  seek(to: number | string): void;\n}\n\nexport function defineTimeline(tag = 'usa-timeline'): CustomElementConstructor | undefined {\n  return defineElement(\n    tag,\n    (Base) =>\n      class UsaTimeline extends Base {\n        static get observedAttributes(): string[] {\n          return ['scrub', 'trigger', 'overlap'];\n        }\n        private _tl: Timeline | null = null;\n\n        get timeline(): Timeline | null {\n          return this._tl;\n        }\n\n        play(): Promise<void> {\n          return this._tl ? this._tl.play(0).then(() => void this.emit('complete')) : Promise.resolve();\n        }\n\n        reverse(): Promise<void> {\n          return this._tl ? this._tl.reverse() : Promise.resolve();\n        }\n\n        seek(to: number | string): void {\n          this._tl?.seek(to);\n        }\n\n        mount(): void {\n          const overlap = this.num('overlap', 0);\n          const tl = (this._tl = timeline({ defaults: { duration: this.num('duration', 600), stagger: this.num('stagger', 0) } }));\n          this.querySelectorAll<HTMLElement>('[data-tl]').forEach((el, i) => {\n            if (el.dataset.label) tl.label(el.dataset.label);\n            const name = el.dataset.tl || 'fade';\n            tl.to(el, TIMELINE_PRESETS[name] ? name : 'fade', {\n              at: el.dataset.at ?? (i && overlap ? `-=${overlap}` : undefined),\n              duration: el.dataset.duration ? Number(el.dataset.duration) : undefined,\n            });\n          });\n          this.onCleanup(() => tl.cancel());\n          if (this.reduced) {\n            tl.seek(tl.duration);\n            return;\n          }\n          if (this.flag('scrub')) {\n            this.onCleanup(tl.scrub(this, { smooth: 0.2 }));\n            return;\n          }\n          const trigger = this.str('trigger', 'view');\n          if (trigger === 'click') {\n            // 4.0.1: show the finished composition until the first click\n            // (it used to sit invisible at t=0); Enter / Space replay it too.\n            tl.seek(tl.duration);\n            this.listen(this, 'click', () => void this.play());\n            this.listen(this, 'keydown', (e: KeyboardEvent) => {\n              if (e.target === this && (e.key === 'Enter' || e.key === ' ')) {\n                e.preventDefault();\n                void this.play();\n              }\n            });\n            if (!this.hasAttribute('tabindex')) this.tabIndex = 0;\n            return;\n          }\n          tl.seek(0);\n          if (trigger === 'view') {\n            let played = false;\n            this.inView((v) => {\n              if (v && (!played || this.flag('repeat'))) {\n                played = true;\n                void this.play();\n              } else if (!v && this.flag('repeat')) tl.seek(0);\n            }, { threshold: 0.2 });\n          }\n        }\n\n        unmount(): void {\n          this._tl = null;\n        }\n      },\n    { id: 'timeline', text: css }\n  );\n}\n","/**\n * use-scroll-animate/components/timeline — choreography (v3.1).\n * `timeline()` chains, overlaps, labels, seeks, reverses and scroll-scrubs\n * WAAPI animations on one playhead; `<usa-timeline>` builds one from\n * `data-tl` children.\n */\nimport { defineTimeline, type UsaTimelineElement } from './timeline-el';\n\nexport { defineTimeline };\nexport { timeline, resolvePosition, TIMELINE_PRESETS } from './core';\nexport type { Timeline, TimelineOptions, TimelineStepOptions, TimelinePosition, ScrubOptions } from './core';\nexport type { UsaTimelineElement };\nexport { configureComponents, prefersReducedMotion } from '../base';\nexport type { ComponentsConfig, UsaElement } from '../base';\n\n/** Register every component of this category under its default tag. */\nexport function defineTimelineComponents(): void {\n  defineTimeline();\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'usa-timeline': UsaTimelineElement;\n  }\n}\n"],"names":["defineElement","timeline","TIMELINE_PRESETS"],"mappings":"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"}
+{"version":3,"file":"timeline.cjs","sources":["../../src/components/timeline/timeline-el.ts","../../src/components/timeline/index.ts"],"sourcesContent":["import { defineElement, type UsaElement } from '../base';\nimport { timeline, TIMELINE_PRESETS, type Timeline } from './core';\nimport css from './timeline.css?raw';\n\n/**\n * `<usa-timeline>` — declarative choreography. Every descendant with\n * `data-tl=\"<preset>\"` becomes a step, in document order; `data-at`\n * (`'-=200'`, `'<'`, `'label+=100'`, ms), `data-duration` and `data-label`\n * fine-tune it.\n *\n * Attributes: `trigger` (`view` default · `click` · `manual`), `scrub`\n * (progress follows scroll instead of playing), `overlap` (ms each step\n * overlaps the previous, default 0), `duration` (600), `stagger` (ms),\n * `repeat` (replay every time it enters the viewport). 4.1: `scrub` runs on native\n * ScrollTimeline / ViewTimeline when supported (`data-native` is set); `scrub=\"js\"`,\n * `scrub=\"scroll\"` and `smooth` tune it. Methods: `play()`,\n * `reverse()`, `seek(t)`; property `timeline`. Event `usa:complete`.\n * Reduced motion: steps appear in their final state.\n */\nexport interface UsaTimelineElement extends UsaElement {\n  readonly timeline: Timeline | null;\n  play(): Promise<void>;\n  reverse(): Promise<void>;\n  seek(to: number | string): void;\n}\n\nexport function defineTimeline(tag = 'usa-timeline'): CustomElementConstructor | undefined {\n  return defineElement(\n    tag,\n    (Base) =>\n      class UsaTimeline extends Base {\n        static get observedAttributes(): string[] {\n          return ['scrub', 'trigger', 'overlap'];\n        }\n        private _tl: Timeline | null = null;\n\n        get timeline(): Timeline | null {\n          return this._tl;\n        }\n\n        play(): Promise<void> {\n          return this._tl ? this._tl.play(0).then(() => void this.emit('complete')) : Promise.resolve();\n        }\n\n        reverse(): Promise<void> {\n          return this._tl ? this._tl.reverse() : Promise.resolve();\n        }\n\n        seek(to: number | string): void {\n          this._tl?.seek(to);\n        }\n\n        mount(): void {\n          const overlap = this.num('overlap', 0);\n          const tl = (this._tl = timeline({ defaults: { duration: this.num('duration', 600), stagger: this.num('stagger', 0) } }));\n          this.querySelectorAll<HTMLElement>('[data-tl]').forEach((el, i) => {\n            if (el.dataset.label) tl.label(el.dataset.label);\n            const name = el.dataset.tl || 'fade';\n            tl.to(el, TIMELINE_PRESETS[name] ? name : 'fade', {\n              at: el.dataset.at ?? (i && overlap ? `-=${overlap}` : undefined),\n              duration: el.dataset.duration ? Number(el.dataset.duration) : undefined,\n            });\n          });\n          this.onCleanup(() => tl.cancel());\n          if (this.reduced) {\n            tl.seek(tl.duration);\n            return;\n          }\n          if (this.flag('scrub')) {\n            // 4.1: native ScrollTimeline / ViewTimeline when available; `smooth`\n            // (0–0.95) or `scrub=\"js\"` opt into the JS engine, `scrub=\"scroll\"`\n            // follows this element's own scroll position.\n            const v = this.str('scrub');\n            const stop = tl.scrub(this, { smooth: this.num('smooth', 0), engine: v === 'js' ? 'js' : 'auto', source: v === 'scroll' ? 'scroll' : 'view' });\n            this.toggleAttribute('data-native', stop.native);\n            this.onCleanup(stop);\n            return;\n          }\n          const trigger = this.str('trigger', 'view');\n          if (trigger === 'click') {\n            // 4.0.1: show the finished composition until the first click\n            // (it used to sit invisible at t=0); Enter / Space replay it too.\n            tl.seek(tl.duration);\n            this.listen(this, 'click', () => void this.play());\n            this.listen(this, 'keydown', (e: KeyboardEvent) => {\n              if (e.target === this && (e.key === 'Enter' || e.key === ' ')) {\n                e.preventDefault();\n                void this.play();\n              }\n            });\n            if (!this.hasAttribute('tabindex')) this.tabIndex = 0;\n            return;\n          }\n          tl.seek(0);\n          if (trigger === 'view') {\n            let played = false;\n            this.inView((v) => {\n              if (v && (!played || this.flag('repeat'))) {\n                played = true;\n                void this.play();\n              } else if (!v && this.flag('repeat')) tl.seek(0);\n            }, { threshold: 0.2 });\n          }\n        }\n\n        unmount(): void {\n          this._tl = null;\n        }\n      },\n    { id: 'timeline', text: css }\n  );\n}\n","/**\n * use-scroll-animate/components/timeline — choreography (v3.1).\n * `timeline()` chains, overlaps, labels, seeks, reverses and scroll-scrubs\n * WAAPI animations on one playhead; `<usa-timeline>` builds one from\n * `data-tl` children.\n */\nimport { defineTimeline, type UsaTimelineElement } from './timeline-el';\n\nexport { defineTimeline };\nexport { timeline, resolvePosition, TIMELINE_PRESETS, supportsNativeScrub } from './core';\nexport type { Timeline, TimelineOptions, TimelineStepOptions, TimelinePosition, ScrubOptions, ScrubHandle } from './core';\nexport type { UsaTimelineElement };\nexport { configureComponents, prefersReducedMotion } from '../base';\nexport type { ComponentsConfig, UsaElement } from '../base';\n\n/** Register every component of this category under its default tag. */\nexport function defineTimelineComponents(): void {\n  defineTimeline();\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'usa-timeline': UsaTimelineElement;\n  }\n}\n"],"names":["defineElement","timeline","TIMELINE_PRESETS"],"mappings":"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"}

package/dist/components/timeline.d.cts

@@ -73,11 +73,29 @@ interface TimelineOptions {
     onUpdate?: (progress: number) => void;
 }
 interface ScrubOptions {
-    /** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts. */
+    /** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts (JS engine only). */
     offset?: number;
-    /** Smoothing 0–1 (0 = immediate, default 0). */
+    /** Smoothing 0–1 (0 = immediate, default 0). Smoothing needs the JS engine. */
     smooth?: number;
+    /**
+     * 4.1: which progress source drives the timeline.
+     * - `'view'` (default): `source` moving through the viewport (CSS `ViewTimeline`, range `cover`).
+     * - `'scroll'`: the scroll position of `source` itself (a scroll container; CSS `ScrollTimeline`).
+     */
+    source?: 'view' | 'scroll';
+    /** 4.1: `'auto'` (default) uses the browser's native scroll-driven animations when available, `'js'` forces the fallback. */
+    engine?: 'auto' | 'native' | 'js';
+    /** 4.1: scroll axis, `'block'` (default) · `'inline'` · `'x'` · `'y'`. */
+    axis?: 'block' | 'inline' | 'x' | 'y';
+}
+/** The function `scrub()` returns: call it to stop. `native` tells which engine runs it. */
+interface ScrubHandle {
+    (): void;
+    /** `true` when the browser's ScrollTimeline / ViewTimeline drives it (compositor, no JS per frame). */
+    readonly native: boolean;
 }
+/** 4.1: whether `scrub()` can use native ScrollTimeline / ViewTimeline here. */
+declare function supportsNativeScrub(source?: 'view' | 'scroll'): boolean;
 interface Timeline {
     /** Total length in ms. */
     readonly duration: number;
@@ -100,8 +118,14 @@ interface Timeline {
     seek(to: TimelinePosition): Timeline;
     /** Get or set progress 0–1. */
     progress(p?: number): number;
-    /** Tie progress to the scroll position of `source` (it moves through the viewport). Returns a stop function. */
-    scrub(source: Element, options?: ScrubOptions): () => void;
+    /**
+     * Tie progress to scroll: `source` moving through the viewport (or, with
+     * `{ source: 'scroll' }`, a scroll container's own position). Runs on native
+     * ScrollTimeline / ViewTimeline when available (and no `smooth`, `offset`,
+     * `call()` cues or `onUpdate` need JS), else on a rAF-throttled listener.
+     * Returns a stop function with a `native` flag.
+     */
+    scrub(source: Element, options?: ScrubOptions): ScrubHandle;
     /** Stop and drop every animation (elements keep their last frame). */
     cancel(): void;
 }
@@ -133,7 +157,9 @@ declare function timeline(options?: TimelineOptions): Timeline;
  * Attributes: `trigger` (`view` default · `click` · `manual`), `scrub`
  * (progress follows scroll instead of playing), `overlap` (ms each step
  * overlaps the previous, default 0), `duration` (600), `stagger` (ms),
- * `repeat` (replay every time it enters the viewport). Methods: `play()`,
+ * `repeat` (replay every time it enters the viewport). 4.1: `scrub` runs on native
+ * ScrollTimeline / ViewTimeline when supported (`data-native` is set); `scrub="js"`,
+ * `scrub="scroll"` and `smooth` tune it. Methods: `play()`,
  * `reverse()`, `seek(t)`; property `timeline`. Event `usa:complete`.
  * Reduced motion: steps appear in their final state.
  */
@@ -160,5 +186,5 @@ declare global {
     }
 }
 
-export { TIMELINE_PRESETS, configureComponents, defineTimeline, defineTimelineComponents, prefersReducedMotion, resolvePosition, timeline };
-export type { ComponentsConfig, ScrubOptions, Timeline, TimelineOptions, TimelinePosition, TimelineStepOptions, UsaElement, UsaTimelineElement };
+export { TIMELINE_PRESETS, configureComponents, defineTimeline, defineTimelineComponents, prefersReducedMotion, resolvePosition, supportsNativeScrub, timeline };
+export type { ComponentsConfig, ScrubHandle, ScrubOptions, Timeline, TimelineOptions, TimelinePosition, TimelineStepOptions, UsaElement, UsaTimelineElement };

package/dist/components/timeline.d.ts

@@ -73,11 +73,29 @@ interface TimelineOptions {
     onUpdate?: (progress: number) => void;
 }
 interface ScrubOptions {
-    /** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts. */
+    /** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts (JS engine only). */
     offset?: number;
-    /** Smoothing 0–1 (0 = immediate, default 0). */
+    /** Smoothing 0–1 (0 = immediate, default 0). Smoothing needs the JS engine. */
     smooth?: number;
+    /**
+     * 4.1: which progress source drives the timeline.
+     * - `'view'` (default): `source` moving through the viewport (CSS `ViewTimeline`, range `cover`).
+     * - `'scroll'`: the scroll position of `source` itself (a scroll container; CSS `ScrollTimeline`).
+     */
+    source?: 'view' | 'scroll';
+    /** 4.1: `'auto'` (default) uses the browser's native scroll-driven animations when available, `'js'` forces the fallback. */
+    engine?: 'auto' | 'native' | 'js';
+    /** 4.1: scroll axis, `'block'` (default) · `'inline'` · `'x'` · `'y'`. */
+    axis?: 'block' | 'inline' | 'x' | 'y';
+}
+/** The function `scrub()` returns: call it to stop. `native` tells which engine runs it. */
+interface ScrubHandle {
+    (): void;
+    /** `true` when the browser's ScrollTimeline / ViewTimeline drives it (compositor, no JS per frame). */
+    readonly native: boolean;
 }
+/** 4.1: whether `scrub()` can use native ScrollTimeline / ViewTimeline here. */
+declare function supportsNativeScrub(source?: 'view' | 'scroll'): boolean;
 interface Timeline {
     /** Total length in ms. */
     readonly duration: number;
@@ -100,8 +118,14 @@ interface Timeline {
     seek(to: TimelinePosition): Timeline;
     /** Get or set progress 0–1. */
     progress(p?: number): number;
-    /** Tie progress to the scroll position of `source` (it moves through the viewport). Returns a stop function. */
-    scrub(source: Element, options?: ScrubOptions): () => void;
+    /**
+     * Tie progress to scroll: `source` moving through the viewport (or, with
+     * `{ source: 'scroll' }`, a scroll container's own position). Runs on native
+     * ScrollTimeline / ViewTimeline when available (and no `smooth`, `offset`,
+     * `call()` cues or `onUpdate` need JS), else on a rAF-throttled listener.
+     * Returns a stop function with a `native` flag.
+     */
+    scrub(source: Element, options?: ScrubOptions): ScrubHandle;
     /** Stop and drop every animation (elements keep their last frame). */
     cancel(): void;
 }
@@ -133,7 +157,9 @@ declare function timeline(options?: TimelineOptions): Timeline;
  * Attributes: `trigger` (`view` default · `click` · `manual`), `scrub`
  * (progress follows scroll instead of playing), `overlap` (ms each step
  * overlaps the previous, default 0), `duration` (600), `stagger` (ms),
- * `repeat` (replay every time it enters the viewport). Methods: `play()`,
+ * `repeat` (replay every time it enters the viewport). 4.1: `scrub` runs on native
+ * ScrollTimeline / ViewTimeline when supported (`data-native` is set); `scrub="js"`,
+ * `scrub="scroll"` and `smooth` tune it. Methods: `play()`,
  * `reverse()`, `seek(t)`; property `timeline`. Event `usa:complete`.
  * Reduced motion: steps appear in their final state.
  */
@@ -160,5 +186,5 @@ declare global {
     }
 }
 
-export { TIMELINE_PRESETS, configureComponents, defineTimeline, defineTimelineComponents, prefersReducedMotion, resolvePosition, timeline };
-export type { ComponentsConfig, ScrubOptions, Timeline, TimelineOptions, TimelinePosition, TimelineStepOptions, UsaElement, UsaTimelineElement };
+export { TIMELINE_PRESETS, configureComponents, defineTimeline, defineTimelineComponents, prefersReducedMotion, resolvePosition, supportsNativeScrub, timeline };
+export type { ComponentsConfig, ScrubHandle, ScrubOptions, Timeline, TimelineOptions, TimelinePosition, TimelineStepOptions, UsaElement, UsaTimelineElement };

package/dist/components/timeline.js

@@ -1,7 +1,7 @@
-import { h as defineElement } from '../chunks/base-ZARFccur.js';
-export { a as configureComponents, p as prefersReducedMotion } from '../chunks/base-ZARFccur.js';
-import { t as timeline, T as TIMELINE_PRESETS } from '../chunks/core-Co-6AL0h.js';
-export { r as resolvePosition } from '../chunks/core-Co-6AL0h.js';
+import { h as defineElement } from '../chunks/base-BPG5zvex.js';
+export { a as configureComponents, p as prefersReducedMotion } from '../chunks/base-BPG5zvex.js';
+import { t as timeline, T as TIMELINE_PRESETS } from '../chunks/core-QTFk4kgO.js';
+export { r as resolvePosition, s as supportsNativeScrub } from '../chunks/core-QTFk4kgO.js';
 
 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}}";
 
@@ -44,7 +44,13 @@ function defineTimeline(tag = 'usa-timeline') {
                 return;
             }
             if (this.flag('scrub')) {
-                this.onCleanup(tl.scrub(this, { smooth: 0.2 }));
+                // 4.1: native ScrollTimeline / ViewTimeline when available; `smooth`
+                // (0–0.95) or `scrub="js"` opt into the JS engine, `scrub="scroll"`
+                // follows this element's own scroll position.
+                const v = this.str('scrub');
+                const stop = tl.scrub(this, { smooth: this.num('smooth', 0), engine: v === 'js' ? 'js' : 'auto', source: v === 'scroll' ? 'scroll' : 'view' });
+                this.toggleAttribute('data-native', stop.native);
+                this.onCleanup(stop);
                 return;
             }
             const trigger = this.str('trigger', 'view');

package/dist/components/timeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline.js","sources":["../../src/components/timeline/timeline-el.ts","../../src/components/timeline/index.ts"],"sourcesContent":["import { defineElement, type UsaElement } from '../base';\nimport { timeline, TIMELINE_PRESETS, type Timeline } from './core';\nimport css from './timeline.css?raw';\n\n/**\n * `<usa-timeline>` — declarative choreography. Every descendant with\n * `data-tl=\"<preset>\"` becomes a step, in document order; `data-at`\n * (`'-=200'`, `'<'`, `'label+=100'`, ms), `data-duration` and `data-label`\n * fine-tune it.\n *\n * Attributes: `trigger` (`view` default · `click` · `manual`), `scrub`\n * (progress follows scroll instead of playing), `overlap` (ms each step\n * overlaps the previous, default 0), `duration` (600), `stagger` (ms),\n * `repeat` (replay every time it enters the viewport). Methods: `play()`,\n * `reverse()`, `seek(t)`; property `timeline`. Event `usa:complete`.\n * Reduced motion: steps appear in their final state.\n */\nexport interface UsaTimelineElement extends UsaElement {\n  readonly timeline: Timeline | null;\n  play(): Promise<void>;\n  reverse(): Promise<void>;\n  seek(to: number | string): void;\n}\n\nexport function defineTimeline(tag = 'usa-timeline'): CustomElementConstructor | undefined {\n  return defineElement(\n    tag,\n    (Base) =>\n      class UsaTimeline extends Base {\n        static get observedAttributes(): string[] {\n          return ['scrub', 'trigger', 'overlap'];\n        }\n        private _tl: Timeline | null = null;\n\n        get timeline(): Timeline | null {\n          return this._tl;\n        }\n\n        play(): Promise<void> {\n          return this._tl ? this._tl.play(0).then(() => void this.emit('complete')) : Promise.resolve();\n        }\n\n        reverse(): Promise<void> {\n          return this._tl ? this._tl.reverse() : Promise.resolve();\n        }\n\n        seek(to: number | string): void {\n          this._tl?.seek(to);\n        }\n\n        mount(): void {\n          const overlap = this.num('overlap', 0);\n          const tl = (this._tl = timeline({ defaults: { duration: this.num('duration', 600), stagger: this.num('stagger', 0) } }));\n          this.querySelectorAll<HTMLElement>('[data-tl]').forEach((el, i) => {\n            if (el.dataset.label) tl.label(el.dataset.label);\n            const name = el.dataset.tl || 'fade';\n            tl.to(el, TIMELINE_PRESETS[name] ? name : 'fade', {\n              at: el.dataset.at ?? (i && overlap ? `-=${overlap}` : undefined),\n              duration: el.dataset.duration ? Number(el.dataset.duration) : undefined,\n            });\n          });\n          this.onCleanup(() => tl.cancel());\n          if (this.reduced) {\n            tl.seek(tl.duration);\n            return;\n          }\n          if (this.flag('scrub')) {\n            this.onCleanup(tl.scrub(this, { smooth: 0.2 }));\n            return;\n          }\n          const trigger = this.str('trigger', 'view');\n          if (trigger === 'click') {\n            // 4.0.1: show the finished composition until the first click\n            // (it used to sit invisible at t=0); Enter / Space replay it too.\n            tl.seek(tl.duration);\n            this.listen(this, 'click', () => void this.play());\n            this.listen(this, 'keydown', (e: KeyboardEvent) => {\n              if (e.target === this && (e.key === 'Enter' || e.key === ' ')) {\n                e.preventDefault();\n                void this.play();\n              }\n            });\n            if (!this.hasAttribute('tabindex')) this.tabIndex = 0;\n            return;\n          }\n          tl.seek(0);\n          if (trigger === 'view') {\n            let played = false;\n            this.inView((v) => {\n              if (v && (!played || this.flag('repeat'))) {\n                played = true;\n                void this.play();\n              } else if (!v && this.flag('repeat')) tl.seek(0);\n            }, { threshold: 0.2 });\n          }\n        }\n\n        unmount(): void {\n          this._tl = null;\n        }\n      },\n    { id: 'timeline', text: css }\n  );\n}\n","/**\n * use-scroll-animate/components/timeline — choreography (v3.1).\n * `timeline()` chains, overlaps, labels, seeks, reverses and scroll-scrubs\n * WAAPI animations on one playhead; `<usa-timeline>` builds one from\n * `data-tl` children.\n */\nimport { defineTimeline, type UsaTimelineElement } from './timeline-el';\n\nexport { defineTimeline };\nexport { timeline, resolvePosition, TIMELINE_PRESETS } from './core';\nexport type { Timeline, TimelineOptions, TimelineStepOptions, TimelinePosition, ScrubOptions } from './core';\nexport type { UsaTimelineElement };\nexport { configureComponents, prefersReducedMotion } from '../base';\nexport type { ComponentsConfig, UsaElement } from '../base';\n\n/** Register every component of this category under its default tag. */\nexport function defineTimelineComponents(): void {\n  defineTimeline();\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'usa-timeline': UsaTimelineElement;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"timeline.js","sources":["../../src/components/timeline/timeline-el.ts","../../src/components/timeline/index.ts"],"sourcesContent":["import { defineElement, type UsaElement } from '../base';\nimport { timeline, TIMELINE_PRESETS, type Timeline } from './core';\nimport css from './timeline.css?raw';\n\n/**\n * `<usa-timeline>` — declarative choreography. Every descendant with\n * `data-tl=\"<preset>\"` becomes a step, in document order; `data-at`\n * (`'-=200'`, `'<'`, `'label+=100'`, ms), `data-duration` and `data-label`\n * fine-tune it.\n *\n * Attributes: `trigger` (`view` default · `click` · `manual`), `scrub`\n * (progress follows scroll instead of playing), `overlap` (ms each step\n * overlaps the previous, default 0), `duration` (600), `stagger` (ms),\n * `repeat` (replay every time it enters the viewport). 4.1: `scrub` runs on native\n * ScrollTimeline / ViewTimeline when supported (`data-native` is set); `scrub=\"js\"`,\n * `scrub=\"scroll\"` and `smooth` tune it. Methods: `play()`,\n * `reverse()`, `seek(t)`; property `timeline`. Event `usa:complete`.\n * Reduced motion: steps appear in their final state.\n */\nexport interface UsaTimelineElement extends UsaElement {\n  readonly timeline: Timeline | null;\n  play(): Promise<void>;\n  reverse(): Promise<void>;\n  seek(to: number | string): void;\n}\n\nexport function defineTimeline(tag = 'usa-timeline'): CustomElementConstructor | undefined {\n  return defineElement(\n    tag,\n    (Base) =>\n      class UsaTimeline extends Base {\n        static get observedAttributes(): string[] {\n          return ['scrub', 'trigger', 'overlap'];\n        }\n        private _tl: Timeline | null = null;\n\n        get timeline(): Timeline | null {\n          return this._tl;\n        }\n\n        play(): Promise<void> {\n          return this._tl ? this._tl.play(0).then(() => void this.emit('complete')) : Promise.resolve();\n        }\n\n        reverse(): Promise<void> {\n          return this._tl ? this._tl.reverse() : Promise.resolve();\n        }\n\n        seek(to: number | string): void {\n          this._tl?.seek(to);\n        }\n\n        mount(): void {\n          const overlap = this.num('overlap', 0);\n          const tl = (this._tl = timeline({ defaults: { duration: this.num('duration', 600), stagger: this.num('stagger', 0) } }));\n          this.querySelectorAll<HTMLElement>('[data-tl]').forEach((el, i) => {\n            if (el.dataset.label) tl.label(el.dataset.label);\n            const name = el.dataset.tl || 'fade';\n            tl.to(el, TIMELINE_PRESETS[name] ? name : 'fade', {\n              at: el.dataset.at ?? (i && overlap ? `-=${overlap}` : undefined),\n              duration: el.dataset.duration ? Number(el.dataset.duration) : undefined,\n            });\n          });\n          this.onCleanup(() => tl.cancel());\n          if (this.reduced) {\n            tl.seek(tl.duration);\n            return;\n          }\n          if (this.flag('scrub')) {\n            // 4.1: native ScrollTimeline / ViewTimeline when available; `smooth`\n            // (0–0.95) or `scrub=\"js\"` opt into the JS engine, `scrub=\"scroll\"`\n            // follows this element's own scroll position.\n            const v = this.str('scrub');\n            const stop = tl.scrub(this, { smooth: this.num('smooth', 0), engine: v === 'js' ? 'js' : 'auto', source: v === 'scroll' ? 'scroll' : 'view' });\n            this.toggleAttribute('data-native', stop.native);\n            this.onCleanup(stop);\n            return;\n          }\n          const trigger = this.str('trigger', 'view');\n          if (trigger === 'click') {\n            // 4.0.1: show the finished composition until the first click\n            // (it used to sit invisible at t=0); Enter / Space replay it too.\n            tl.seek(tl.duration);\n            this.listen(this, 'click', () => void this.play());\n            this.listen(this, 'keydown', (e: KeyboardEvent) => {\n              if (e.target === this && (e.key === 'Enter' || e.key === ' ')) {\n                e.preventDefault();\n                void this.play();\n              }\n            });\n            if (!this.hasAttribute('tabindex')) this.tabIndex = 0;\n            return;\n          }\n          tl.seek(0);\n          if (trigger === 'view') {\n            let played = false;\n            this.inView((v) => {\n              if (v && (!played || this.flag('repeat'))) {\n                played = true;\n                void this.play();\n              } else if (!v && this.flag('repeat')) tl.seek(0);\n            }, { threshold: 0.2 });\n          }\n        }\n\n        unmount(): void {\n          this._tl = null;\n        }\n      },\n    { id: 'timeline', text: css }\n  );\n}\n","/**\n * use-scroll-animate/components/timeline — choreography (v3.1).\n * `timeline()` chains, overlaps, labels, seeks, reverses and scroll-scrubs\n * WAAPI animations on one playhead; `<usa-timeline>` builds one from\n * `data-tl` children.\n */\nimport { defineTimeline, type UsaTimelineElement } from './timeline-el';\n\nexport { defineTimeline };\nexport { timeline, resolvePosition, TIMELINE_PRESETS, supportsNativeScrub } from './core';\nexport type { Timeline, TimelineOptions, TimelineStepOptions, TimelinePosition, ScrubOptions, ScrubHandle } from './core';\nexport type { UsaTimelineElement };\nexport { configureComponents, prefersReducedMotion } from '../base';\nexport type { ComponentsConfig, UsaElement } from '../base';\n\n/** Register every component of this category under its default tag. */\nexport function defineTimelineComponents(): void {\n  defineTimeline();\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'usa-timeline': UsaTimelineElement;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/components/transitions.js

@@ -1,5 +1,5 @@
-import { h as defineElement, k as kindOf, s as shadowStyles, i as EASE_OUT, F as FLUENT_DECELERATE, p as prefersReducedMotion } from '../chunks/base-ZARFccur.js';
-export { a as configureComponents } from '../chunks/base-ZARFccur.js';
+import { h as defineElement, k as kindOf, s as shadowStyles, i as EASE_OUT, F as FLUENT_DECELERATE, p as prefersReducedMotion } from '../chunks/base-BPG5zvex.js';
+export { a as configureComponents } from '../chunks/base-BPG5zvex.js';
 
 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)}";
 

package/dist/components/ui.js

@@ -1,8 +1,8 @@
-import { h as defineElement, d as clamp, b as caf, r as raf } from '../chunks/base-ZARFccur.js';
-export { a as configureComponents, p as prefersReducedMotion } from '../chunks/base-ZARFccur.js';
-import { d as springEasing, c as createSpring, p as projectInertia, s as snapTo, a as rubberBand } from '../chunks/spring-E2ickYNI.js';
-import { a as adoptVariants } from '../chunks/variants-DvnxvRCM.js';
-export { V as VARIANTS, s as setVariant } from '../chunks/variants-DvnxvRCM.js';
+import { h as defineElement, b as clamp, d as caf, r as raf } from '../chunks/base-BPG5zvex.js';
+export { a as configureComponents, p as prefersReducedMotion } from '../chunks/base-BPG5zvex.js';
+import { d as springEasing, c as createSpring, p as projectInertia, s as snapTo, a as rubberBand } from '../chunks/spring-BziPsW3r.js';
+import { a as adoptVariants } from '../chunks/variants-BVYMcxRv.js';
+export { V as VARIANTS, s as setVariant } from '../chunks/variants-BVYMcxRv.js';
 
 /** Position a fixed `floating` element next to `anchor`, flipping when it would leave the viewport. */
 function place(floating, anchor, placement = 'top', gap = 8) {

package/dist/components/vue.cjs

@@ -16,7 +16,7 @@ require('./click.cjs');
 require('./ui.cjs');
 require('./page.cjs');
 require('./timeline.cjs');
-require('../chunks/core-DXqZm5Il.cjs');
+require('../chunks/core-CLu8ZrC-.cjs');
 require('./gesture.cjs');
 require('../chunks/core-IaorbTdu.cjs');
 require('./svg.cjs');

package/dist/components/vue.d.cts

@@ -1295,10 +1295,26 @@ interface TimelineStepOptions {
     stagger?: number;
 }
 interface ScrubOptions {
-    /** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts. */
+    /** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts (JS engine only). */
     offset?: number;
-    /** Smoothing 0–1 (0 = immediate, default 0). */
+    /** Smoothing 0–1 (0 = immediate, default 0). Smoothing needs the JS engine. */
     smooth?: number;
+    /**
+     * 4.1: which progress source drives the timeline.
+     * - `'view'` (default): `source` moving through the viewport (CSS `ViewTimeline`, range `cover`).
+     * - `'scroll'`: the scroll position of `source` itself (a scroll container; CSS `ScrollTimeline`).
+     */
+    source?: 'view' | 'scroll';
+    /** 4.1: `'auto'` (default) uses the browser's native scroll-driven animations when available, `'js'` forces the fallback. */
+    engine?: 'auto' | 'native' | 'js';
+    /** 4.1: scroll axis, `'block'` (default) · `'inline'` · `'x'` · `'y'`. */
+    axis?: 'block' | 'inline' | 'x' | 'y';
+}
+/** The function `scrub()` returns: call it to stop. `native` tells which engine runs it. */
+interface ScrubHandle {
+    (): void;
+    /** `true` when the browser's ScrollTimeline / ViewTimeline drives it (compositor, no JS per frame). */
+    readonly native: boolean;
 }
 interface Timeline {
     /** Total length in ms. */
@@ -1322,8 +1338,14 @@ interface Timeline {
     seek(to: TimelinePosition): Timeline;
     /** Get or set progress 0–1. */
     progress(p?: number): number;
-    /** Tie progress to the scroll position of `source` (it moves through the viewport). Returns a stop function. */
-    scrub(source: Element, options?: ScrubOptions): () => void;
+    /**
+     * Tie progress to scroll: `source` moving through the viewport (or, with
+     * `{ source: 'scroll' }`, a scroll container's own position). Runs on native
+     * ScrollTimeline / ViewTimeline when available (and no `smooth`, `offset`,
+     * `call()` cues or `onUpdate` need JS), else on a rAF-throttled listener.
+     * Returns a stop function with a `native` flag.
+     */
+    scrub(source: Element, options?: ScrubOptions): ScrubHandle;
     /** Stop and drop every animation (elements keep their last frame). */
     cancel(): void;
 }
@@ -1337,7 +1359,9 @@ interface Timeline {
  * Attributes: `trigger` (`view` default · `click` · `manual`), `scrub`
  * (progress follows scroll instead of playing), `overlap` (ms each step
  * overlaps the previous, default 0), `duration` (600), `stagger` (ms),
- * `repeat` (replay every time it enters the viewport). Methods: `play()`,
+ * `repeat` (replay every time it enters the viewport). 4.1: `scrub` runs on native
+ * ScrollTimeline / ViewTimeline when supported (`data-native` is set); `scrub="js"`,
+ * `scrub="scroll"` and `smooth` tune it. Methods: `play()`,
  * `reverse()`, `seek(t)`; property `timeline`. Event `usa:complete`.
  * Reduced motion: steps appear in their final state.
  */

package/dist/components/vue.d.ts

@@ -1295,10 +1295,26 @@ interface TimelineStepOptions {
     stagger?: number;
 }
 interface ScrubOptions {
-    /** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts. */
+    /** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts (JS engine only). */
     offset?: number;
-    /** Smoothing 0–1 (0 = immediate, default 0). */
+    /** Smoothing 0–1 (0 = immediate, default 0). Smoothing needs the JS engine. */
     smooth?: number;
+    /**
+     * 4.1: which progress source drives the timeline.
+     * - `'view'` (default): `source` moving through the viewport (CSS `ViewTimeline`, range `cover`).
+     * - `'scroll'`: the scroll position of `source` itself (a scroll container; CSS `ScrollTimeline`).
+     */
+    source?: 'view' | 'scroll';
+    /** 4.1: `'auto'` (default) uses the browser's native scroll-driven animations when available, `'js'` forces the fallback. */
+    engine?: 'auto' | 'native' | 'js';
+    /** 4.1: scroll axis, `'block'` (default) · `'inline'` · `'x'` · `'y'`. */
+    axis?: 'block' | 'inline' | 'x' | 'y';
+}
+/** The function `scrub()` returns: call it to stop. `native` tells which engine runs it. */
+interface ScrubHandle {
+    (): void;
+    /** `true` when the browser's ScrollTimeline / ViewTimeline drives it (compositor, no JS per frame). */
+    readonly native: boolean;
 }
 interface Timeline {
     /** Total length in ms. */
@@ -1322,8 +1338,14 @@ interface Timeline {
     seek(to: TimelinePosition): Timeline;
     /** Get or set progress 0–1. */
     progress(p?: number): number;
-    /** Tie progress to the scroll position of `source` (it moves through the viewport). Returns a stop function. */
-    scrub(source: Element, options?: ScrubOptions): () => void;
+    /**
+     * Tie progress to scroll: `source` moving through the viewport (or, with
+     * `{ source: 'scroll' }`, a scroll container's own position). Runs on native
+     * ScrollTimeline / ViewTimeline when available (and no `smooth`, `offset`,
+     * `call()` cues or `onUpdate` need JS), else on a rAF-throttled listener.
+     * Returns a stop function with a `native` flag.
+     */
+    scrub(source: Element, options?: ScrubOptions): ScrubHandle;
     /** Stop and drop every animation (elements keep their last frame). */
     cancel(): void;
 }
@@ -1337,7 +1359,9 @@ interface Timeline {
  * Attributes: `trigger` (`view` default · `click` · `manual`), `scrub`
  * (progress follows scroll instead of playing), `overlap` (ms each step
  * overlaps the previous, default 0), `duration` (600), `stagger` (ms),
- * `repeat` (replay every time it enters the viewport). Methods: `play()`,
+ * `repeat` (replay every time it enters the viewport). 4.1: `scrub` runs on native
+ * ScrollTimeline / ViewTimeline when supported (`data-native` is set); `scrub="js"`,
+ * `scrub="scroll"` and `smooth` tune it. Methods: `play()`,
  * `reverse()`, `seek(t)`; property `timeline`. Event `usa:complete`.
  * Reduced motion: steps appear in their final state.
  */