use-scroll-animate 4.2.0 → 4.4.0

package/dist/components/solid.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"solid.cjs","sources":["../../src/components/frameworks/solid.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/solid — Solid integration (v3.8).\n * Solid renders custom elements natively: set properties with `prop:` and\n * listen with `on:` (`<usa-toggle prop:checked={on()} on:usa:change={…}>`).\n * This entry adds `defineUsa()` (client only, SolidStart-safe), a `usa`\n * directive for `use:usa={{ props, on }}`, and JSX types.\n *\n * ```tsx\n * import { defineUsa, usa } from 'use-scroll-animate/components/solid';\n * import type {} from 'use-scroll-animate/components/solid'; // JSX types\n * onMount(() => defineUsa());\n * false && usa; // keep the directive import (Solid convention)\n * <usa-card use:usa={{ on: { flip: (e) => console.log(e.detail) } }} effect=\"flip\">…</usa-card>\n * ```\n */\nimport { createRenderEffect, onCleanup } from 'solid-js';\nimport { defineComponents, type ComponentCategory } from '../index';\nimport { bindUsa, type UsaBinding } from './bind';\nimport type { UsaIntrinsicElements } from './jsx';\n\nexport { bindUsa, usaEventName } from './bind';\nexport type { UsaBinding } from './bind';\n\n/**\n * Solid directive (`use:usa`). Solid calls it with the element and an\n * accessor; since 4.0.1 the binding is tracked with `createRenderEffect`, so\n * signals read inside `{{ props, on }}` update the element automatically and\n * the listeners are removed on cleanup. `refresh()` is kept for code that\n * calls the directive outside a reactive owner.\n */\nexport function usa(el: HTMLElement, accessor: () => UsaBinding | undefined): { refresh(): void; destroy(): void } {\n  let b: ReturnType<typeof bindUsa> | null = null;\n  const run = () => {\n    const v = accessor() || {};\n    if (b) b.update(v);\n    else b = bindUsa(el, v);\n  };\n  createRenderEffect(run);\n  if (!b) run();\n  const destroy = () => b?.destroy();\n  onCleanup(destroy);\n  return { refresh: run, destroy };\n}\n\n/** Register the elements (all, or some categories) — call from `onMount` in SSR apps. */\nexport function defineUsa(categories?: ComponentCategory[]): void {\n  if (typeof window !== 'undefined') defineComponents(categories);\n}\n\n/** JSX intrinsic elements for Solid (same attribute types as the React/Preact ones). */\nexport type SolidUsaIntrinsicElements = UsaIntrinsicElements;\n"],"names":["bindUsa","createRenderEffect","onCleanup","defineComponents"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;AAcG;AASH;;;;;;AAMG;AACG,SAAU,GAAG,CAAC,EAAe,EAAE,QAAsC,EAAA;IACzE,IAAI,CAAC,GAAsC,IAAI;IAC/C,MAAM,GAAG,GAAG,MAAK;AACf,QAAA,MAAM,CAAC,GAAG,QAAQ,EAAE,IAAI,EAAE;AAC1B,QAAA,IAAI,CAAC;AAAE,YAAA,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;;AACb,YAAA,CAAC,GAAGA,YAAO,CAAC,EAAE,EAAE,CAAC,CAAC;AACzB,IAAA,CAAC;IACDC,0BAAkB,CAAC,GAAG,CAAC;AACvB,IAAA,IAAI,CAAC,CAAC;AAAE,QAAA,GAAG,EAAE;IACb,MAAM,OAAO,GAAG,MAAM,CAAC,EAAE,OAAO,EAAE;IAClCC,iBAAS,CAAC,OAAO,CAAC;AAClB,IAAA,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE;AAClC;AAEA;AACM,SAAU,SAAS,CAAC,UAAgC,EAAA;IACxD,IAAI,OAAO,MAAM,KAAK,WAAW;QAAEC,2BAAgB,CAAC,UAAU,CAAC;AACjE;;;;;;;"}
+{"version":3,"file":"solid.cjs","sources":["../../src/components/frameworks/solid.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/solid — Solid integration (v3.8).\n * Solid renders custom elements natively: set properties with `prop:` and\n * listen with `on:` (`<usa-toggle prop:checked={on()} on:usa:change={…}>`).\n * This entry adds `defineUsa()` (client only, SolidStart-safe), a `usa`\n * directive for `use:usa={{ props, on }}`, and JSX types.\n *\n * ```tsx\n * import { defineUsa, usa } from 'use-scroll-animate/components/solid';\n * import type {} from 'use-scroll-animate/components/solid'; // JSX types\n * onMount(() => defineUsa());\n * false && usa; // keep the directive import (Solid convention)\n * <usa-card use:usa={{ on: { flip: (e) => console.log(e.detail) } }} effect=\"flip\">…</usa-card>\n * ```\n */\nimport { createRenderEffect, onCleanup } from 'solid-js';\nimport { defineComponents, type ComponentCategory } from '../index';\nimport { bindUsa, type UsaBinding } from './bind';\nimport type { UsaIntrinsicElements } from './jsx';\n\nexport { bindUsa, usaEventName } from './bind';\nexport type { UsaBinding } from './bind';\n\n/**\n * Solid directive (`use:usa`). Solid calls it with the element and an\n * accessor; since 4.0.1 the binding is tracked with `createRenderEffect`, so\n * signals read inside `{{ props, on }}` update the element automatically and\n * the listeners are removed on cleanup. `refresh()` is kept for code that\n * calls the directive outside a reactive owner.\n */\nexport function usa(el: HTMLElement, accessor: () => UsaBinding | undefined): { refresh(): void; destroy(): void } {\n  let b: ReturnType<typeof bindUsa> | null = null;\n  const run = () => {\n    const v = accessor() || {};\n    if (b) b.update(v);\n    else b = bindUsa(el, v);\n  };\n  createRenderEffect(run);\n  if (!b) run();\n  const destroy = () => b?.destroy();\n  onCleanup(destroy);\n  return { refresh: run, destroy };\n}\n\n/** Register the elements (all, or some categories) — call from `onMount` in SSR apps. */\nexport function defineUsa(categories?: ComponentCategory[]): void {\n  if (typeof window !== 'undefined') defineComponents(categories);\n}\n\n/** JSX intrinsic elements for Solid (same attribute types as the React/Preact ones). */\nexport type SolidUsaIntrinsicElements = UsaIntrinsicElements;\n"],"names":["bindUsa","createRenderEffect","onCleanup","defineComponents"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;AAcG;AASH;;;;;;AAMG;AACG,SAAU,GAAG,CAAC,EAAe,EAAE,QAAsC,EAAA;IACzE,IAAI,CAAC,GAAsC,IAAI;IAC/C,MAAM,GAAG,GAAG,MAAK;AACf,QAAA,MAAM,CAAC,GAAG,QAAQ,EAAE,IAAI,EAAE;AAC1B,QAAA,IAAI,CAAC;AAAE,YAAA,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;;AACb,YAAA,CAAC,GAAGA,YAAO,CAAC,EAAE,EAAE,CAAC,CAAC;AACzB,IAAA,CAAC;IACDC,0BAAkB,CAAC,GAAG,CAAC;AACvB,IAAA,IAAI,CAAC,CAAC;AAAE,QAAA,GAAG,EAAE;IACb,MAAM,OAAO,GAAG,MAAM,CAAC,EAAE,OAAO,EAAE;IAClCC,iBAAS,CAAC,OAAO,CAAC;AAClB,IAAA,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE;AAClC;AAEA;AACM,SAAU,SAAS,CAAC,UAAgC,EAAA;IACxD,IAAI,OAAO,MAAM,KAAK,WAAW;QAAEC,2BAAgB,CAAC,UAAU,CAAC;AACjE;;;;;;;"}

package/dist/components/solid.d.cts

@@ -117,7 +117,11 @@ interface UsaTypewriterElement extends UsaElement {
  * them in a cascade (pure CSS animation per unit, transform / opacity /
  * filter only). Words never break across lines.
  *
- * Attributes: `by` (`chars` | `words`, default `chars`), `effect`
+ * 4.3: `Intl.Segmenter`-aware (emoji, CJK words), Arabic-script words are
+ * never split below the word, `by="lines"` reveals line by line, and `from`
+ * (`start` · `end` · `center` · `edges` · `random`) sets the cascade order.
+ *
+ * Attributes: `by` (`chars` | `words` | `lines`, default `chars`), `effect`
  * (`rise` | `fade` | `blur` | `flip` | `pop`, default `rise`), `stagger`
  * (ms between units, 28 for chars / 70 for words), `duration` (ms, 620),
  * `delay` (ms, 0), `trigger` (`view` | `load` | `manual`, default `view`),
@@ -230,6 +234,81 @@ interface UsaScrollHighlightElement extends UsaElement {
     readonly progress: number;
 }
 
+/**
+ * Where a step starts on a timeline:
+ * - a number: absolute time in ms
+ * - `'>'` (default): when the previous step ends · `'<'`: when it starts
+ * - `'+=200'` / `'-=200'`: after / overlapping the previous end
+ * - `'<+=100'`: 100ms after the previous step's start
+ * - `'intro'` / `'intro+=150'`: at (or relative to) a label
+ */
+type TimelinePosition = number | string;
+interface TimelineStepOptions {
+    /** Duration in ms or a motion token name (`'fast'`, `'slow'`…; 4.2). Default: timeline default, 600. */
+    duration?: number | string;
+    /** CSS easing or a motion token name (`'emphasized'`, `'spring'`…; 4.2). Default `cubic-bezier(0.22, 1, 0.36, 1)`. */
+    easing?: string;
+    /** Start position, see `TimelinePosition`. */
+    at?: TimelinePosition;
+    /** ms between targets when the selector matches several elements. */
+    stagger?: number;
+}
+interface ScrubOptions {
+    /** 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 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. */
+    readonly duration: number;
+    /** Label positions in ms. */
+    readonly labels: Readonly<Record<string, number>>;
+    /** Current playhead in ms. */
+    readonly time: number;
+    /** Add a step: animate `target` with keyframes or a preset name (`fade-up`, `scale`…). */
+    to(target: string | Element | Element[] | NodeList, frames: Keyframe[] | string, options?: TimelineStepOptions): Timeline;
+    /** Name a position (default: the current end). */
+    label(name: string, at?: TimelinePosition): Timeline;
+    /** Run `fn` when the playhead passes `at`. */
+    call(fn: () => void, at?: TimelinePosition): Timeline;
+    /** Play forwards from the playhead (from 0 when at the end). Resolves at the end. */
+    play(from?: TimelinePosition): Promise<void>;
+    /** Play backwards to 0. */
+    reverse(): Promise<void>;
+    pause(): Timeline;
+    /** Jump to a time (ms) or label. */
+    seek(to: TimelinePosition): Timeline;
+    /** Get or set progress 0–1. */
+    progress(p?: number): number;
+    /**
+     * 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;
+}
+
 /**
  * use-scroll-animate/components/text — text effects.
  * `<usa-typewriter>`, `<usa-split-text>`, `<usa-scramble>`, `<usa-counter>`,
@@ -1275,81 +1354,6 @@ declare global {
     }
 }
 
-/**
- * Where a step starts on a timeline:
- * - a number: absolute time in ms
- * - `'>'` (default): when the previous step ends · `'<'`: when it starts
- * - `'+=200'` / `'-=200'`: after / overlapping the previous end
- * - `'<+=100'`: 100ms after the previous step's start
- * - `'intro'` / `'intro+=150'`: at (or relative to) a label
- */
-type TimelinePosition = number | string;
-interface TimelineStepOptions {
-    /** Duration in ms or a motion token name (`'fast'`, `'slow'`…; 4.2). Default: timeline default, 600. */
-    duration?: number | string;
-    /** CSS easing or a motion token name (`'emphasized'`, `'spring'`…; 4.2). Default `cubic-bezier(0.22, 1, 0.36, 1)`. */
-    easing?: string;
-    /** Start position, see `TimelinePosition`. */
-    at?: TimelinePosition;
-    /** ms between targets when the selector matches several elements. */
-    stagger?: number;
-}
-interface ScrubOptions {
-    /** 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 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. */
-    readonly duration: number;
-    /** Label positions in ms. */
-    readonly labels: Readonly<Record<string, number>>;
-    /** Current playhead in ms. */
-    readonly time: number;
-    /** Add a step: animate `target` with keyframes or a preset name (`fade-up`, `scale`…). */
-    to(target: string | Element | Element[] | NodeList, frames: Keyframe[] | string, options?: TimelineStepOptions): Timeline;
-    /** Name a position (default: the current end). */
-    label(name: string, at?: TimelinePosition): Timeline;
-    /** Run `fn` when the playhead passes `at`. */
-    call(fn: () => void, at?: TimelinePosition): Timeline;
-    /** Play forwards from the playhead (from 0 when at the end). Resolves at the end. */
-    play(from?: TimelinePosition): Promise<void>;
-    /** Play backwards to 0. */
-    reverse(): Promise<void>;
-    pause(): Timeline;
-    /** Jump to a time (ms) or label. */
-    seek(to: TimelinePosition): Timeline;
-    /** Get or set progress 0–1. */
-    progress(p?: number): number;
-    /**
-     * 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;
-}
-
 /**
  * `<usa-timeline>` — declarative choreography. Every descendant with
  * `data-tl="<preset>"` becomes a step, in document order; `data-at`

package/dist/components/solid.d.ts

@@ -117,7 +117,11 @@ interface UsaTypewriterElement extends UsaElement {
  * them in a cascade (pure CSS animation per unit, transform / opacity /
  * filter only). Words never break across lines.
  *
- * Attributes: `by` (`chars` | `words`, default `chars`), `effect`
+ * 4.3: `Intl.Segmenter`-aware (emoji, CJK words), Arabic-script words are
+ * never split below the word, `by="lines"` reveals line by line, and `from`
+ * (`start` · `end` · `center` · `edges` · `random`) sets the cascade order.
+ *
+ * Attributes: `by` (`chars` | `words` | `lines`, default `chars`), `effect`
  * (`rise` | `fade` | `blur` | `flip` | `pop`, default `rise`), `stagger`
  * (ms between units, 28 for chars / 70 for words), `duration` (ms, 620),
  * `delay` (ms, 0), `trigger` (`view` | `load` | `manual`, default `view`),
@@ -230,6 +234,81 @@ interface UsaScrollHighlightElement extends UsaElement {
     readonly progress: number;
 }
 
+/**
+ * Where a step starts on a timeline:
+ * - a number: absolute time in ms
+ * - `'>'` (default): when the previous step ends · `'<'`: when it starts
+ * - `'+=200'` / `'-=200'`: after / overlapping the previous end
+ * - `'<+=100'`: 100ms after the previous step's start
+ * - `'intro'` / `'intro+=150'`: at (or relative to) a label
+ */
+type TimelinePosition = number | string;
+interface TimelineStepOptions {
+    /** Duration in ms or a motion token name (`'fast'`, `'slow'`…; 4.2). Default: timeline default, 600. */
+    duration?: number | string;
+    /** CSS easing or a motion token name (`'emphasized'`, `'spring'`…; 4.2). Default `cubic-bezier(0.22, 1, 0.36, 1)`. */
+    easing?: string;
+    /** Start position, see `TimelinePosition`. */
+    at?: TimelinePosition;
+    /** ms between targets when the selector matches several elements. */
+    stagger?: number;
+}
+interface ScrubOptions {
+    /** 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 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. */
+    readonly duration: number;
+    /** Label positions in ms. */
+    readonly labels: Readonly<Record<string, number>>;
+    /** Current playhead in ms. */
+    readonly time: number;
+    /** Add a step: animate `target` with keyframes or a preset name (`fade-up`, `scale`…). */
+    to(target: string | Element | Element[] | NodeList, frames: Keyframe[] | string, options?: TimelineStepOptions): Timeline;
+    /** Name a position (default: the current end). */
+    label(name: string, at?: TimelinePosition): Timeline;
+    /** Run `fn` when the playhead passes `at`. */
+    call(fn: () => void, at?: TimelinePosition): Timeline;
+    /** Play forwards from the playhead (from 0 when at the end). Resolves at the end. */
+    play(from?: TimelinePosition): Promise<void>;
+    /** Play backwards to 0. */
+    reverse(): Promise<void>;
+    pause(): Timeline;
+    /** Jump to a time (ms) or label. */
+    seek(to: TimelinePosition): Timeline;
+    /** Get or set progress 0–1. */
+    progress(p?: number): number;
+    /**
+     * 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;
+}
+
 /**
  * use-scroll-animate/components/text — text effects.
  * `<usa-typewriter>`, `<usa-split-text>`, `<usa-scramble>`, `<usa-counter>`,
@@ -1275,81 +1354,6 @@ declare global {
     }
 }
 
-/**
- * Where a step starts on a timeline:
- * - a number: absolute time in ms
- * - `'>'` (default): when the previous step ends · `'<'`: when it starts
- * - `'+=200'` / `'-=200'`: after / overlapping the previous end
- * - `'<+=100'`: 100ms after the previous step's start
- * - `'intro'` / `'intro+=150'`: at (or relative to) a label
- */
-type TimelinePosition = number | string;
-interface TimelineStepOptions {
-    /** Duration in ms or a motion token name (`'fast'`, `'slow'`…; 4.2). Default: timeline default, 600. */
-    duration?: number | string;
-    /** CSS easing or a motion token name (`'emphasized'`, `'spring'`…; 4.2). Default `cubic-bezier(0.22, 1, 0.36, 1)`. */
-    easing?: string;
-    /** Start position, see `TimelinePosition`. */
-    at?: TimelinePosition;
-    /** ms between targets when the selector matches several elements. */
-    stagger?: number;
-}
-interface ScrubOptions {
-    /** 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 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. */
-    readonly duration: number;
-    /** Label positions in ms. */
-    readonly labels: Readonly<Record<string, number>>;
-    /** Current playhead in ms. */
-    readonly time: number;
-    /** Add a step: animate `target` with keyframes or a preset name (`fade-up`, `scale`…). */
-    to(target: string | Element | Element[] | NodeList, frames: Keyframe[] | string, options?: TimelineStepOptions): Timeline;
-    /** Name a position (default: the current end). */
-    label(name: string, at?: TimelinePosition): Timeline;
-    /** Run `fn` when the playhead passes `at`. */
-    call(fn: () => void, at?: TimelinePosition): Timeline;
-    /** Play forwards from the playhead (from 0 when at the end). Resolves at the end. */
-    play(from?: TimelinePosition): Promise<void>;
-    /** Play backwards to 0. */
-    reverse(): Promise<void>;
-    pause(): Timeline;
-    /** Jump to a time (ms) or label. */
-    seek(to: TimelinePosition): Timeline;
-    /** Get or set progress 0–1. */
-    progress(p?: number): number;
-    /**
-     * 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;
-}
-
 /**
  * `<usa-timeline>` — declarative choreography. Every descendant with
  * `data-tl="<preset>"` becomes a step, in document order; `data-at`

package/dist/components/solid.js

@@ -3,29 +3,30 @@ 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-BPG5zvex.js';
+import '../chunks/base-BtJDNCB6.js';
 import './text.js';
+import '../chunks/core-DS1nrx5L.js';
+import './tokens.js';
 import './interaction.js';
 import './feedback.js';
 import './background.js';
-import '../chunks/variants-BVYMcxRv.js';
+import '../chunks/variants-dD6SbUMR.js';
 import './transitions.js';
 import './physics.js';
-import '../chunks/spring-BziPsW3r.js';
+import '../chunks/spring-CxRz49Wk.js';
 import './cards.js';
 import './click.js';
 import './ui.js';
 import './page.js';
 import './timeline.js';
-import '../chunks/core-LkGRmgES.js';
-import './tokens.js';
 import './gesture.js';
-import '../chunks/core-eXX8rB_b.js';
+import '../chunks/core-DX6pdOoY.js';
 import './svg.js';
 import './webgl.js';
 import './depth.js';
 import './layout.js';
 import './packs.js';
+import './a11y.js';
 import '../chunks/index-tags-43Xtd01A.js';
 
 /**

package/dist/components/solid.js.map

@@ -1 +1 @@
-{"version":3,"file":"solid.js","sources":["../../src/components/frameworks/solid.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/solid — Solid integration (v3.8).\n * Solid renders custom elements natively: set properties with `prop:` and\n * listen with `on:` (`<usa-toggle prop:checked={on()} on:usa:change={…}>`).\n * This entry adds `defineUsa()` (client only, SolidStart-safe), a `usa`\n * directive for `use:usa={{ props, on }}`, and JSX types.\n *\n * ```tsx\n * import { defineUsa, usa } from 'use-scroll-animate/components/solid';\n * import type {} from 'use-scroll-animate/components/solid'; // JSX types\n * onMount(() => defineUsa());\n * false && usa; // keep the directive import (Solid convention)\n * <usa-card use:usa={{ on: { flip: (e) => console.log(e.detail) } }} effect=\"flip\">…</usa-card>\n * ```\n */\nimport { createRenderEffect, onCleanup } from 'solid-js';\nimport { defineComponents, type ComponentCategory } from '../index';\nimport { bindUsa, type UsaBinding } from './bind';\nimport type { UsaIntrinsicElements } from './jsx';\n\nexport { bindUsa, usaEventName } from './bind';\nexport type { UsaBinding } from './bind';\n\n/**\n * Solid directive (`use:usa`). Solid calls it with the element and an\n * accessor; since 4.0.1 the binding is tracked with `createRenderEffect`, so\n * signals read inside `{{ props, on }}` update the element automatically and\n * the listeners are removed on cleanup. `refresh()` is kept for code that\n * calls the directive outside a reactive owner.\n */\nexport function usa(el: HTMLElement, accessor: () => UsaBinding | undefined): { refresh(): void; destroy(): void } {\n  let b: ReturnType<typeof bindUsa> | null = null;\n  const run = () => {\n    const v = accessor() || {};\n    if (b) b.update(v);\n    else b = bindUsa(el, v);\n  };\n  createRenderEffect(run);\n  if (!b) run();\n  const destroy = () => b?.destroy();\n  onCleanup(destroy);\n  return { refresh: run, destroy };\n}\n\n/** Register the elements (all, or some categories) — call from `onMount` in SSR apps. */\nexport function defineUsa(categories?: ComponentCategory[]): void {\n  if (typeof window !== 'undefined') defineComponents(categories);\n}\n\n/** JSX intrinsic elements for Solid (same attribute types as the React/Preact ones). */\nexport type SolidUsaIntrinsicElements = UsaIntrinsicElements;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;AAcG;AASH;;;;;;AAMG;AACG,SAAU,GAAG,CAAC,EAAe,EAAE,QAAsC,EAAA;IACzE,IAAI,CAAC,GAAsC,IAAI;IAC/C,MAAM,GAAG,GAAG,MAAK;AACf,QAAA,MAAM,CAAC,GAAG,QAAQ,EAAE,IAAI,EAAE;AAC1B,QAAA,IAAI,CAAC;AAAE,YAAA,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;;AACb,YAAA,CAAC,GAAG,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC;AACzB,IAAA,CAAC;IACD,kBAAkB,CAAC,GAAG,CAAC;AACvB,IAAA,IAAI,CAAC,CAAC;AAAE,QAAA,GAAG,EAAE;IACb,MAAM,OAAO,GAAG,MAAM,CAAC,EAAE,OAAO,EAAE;IAClC,SAAS,CAAC,OAAO,CAAC;AAClB,IAAA,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE;AAClC;AAEA;AACM,SAAU,SAAS,CAAC,UAAgC,EAAA;IACxD,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,gBAAgB,CAAC,UAAU,CAAC;AACjE;;;;"}
+{"version":3,"file":"solid.js","sources":["../../src/components/frameworks/solid.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/solid — Solid integration (v3.8).\n * Solid renders custom elements natively: set properties with `prop:` and\n * listen with `on:` (`<usa-toggle prop:checked={on()} on:usa:change={…}>`).\n * This entry adds `defineUsa()` (client only, SolidStart-safe), a `usa`\n * directive for `use:usa={{ props, on }}`, and JSX types.\n *\n * ```tsx\n * import { defineUsa, usa } from 'use-scroll-animate/components/solid';\n * import type {} from 'use-scroll-animate/components/solid'; // JSX types\n * onMount(() => defineUsa());\n * false && usa; // keep the directive import (Solid convention)\n * <usa-card use:usa={{ on: { flip: (e) => console.log(e.detail) } }} effect=\"flip\">…</usa-card>\n * ```\n */\nimport { createRenderEffect, onCleanup } from 'solid-js';\nimport { defineComponents, type ComponentCategory } from '../index';\nimport { bindUsa, type UsaBinding } from './bind';\nimport type { UsaIntrinsicElements } from './jsx';\n\nexport { bindUsa, usaEventName } from './bind';\nexport type { UsaBinding } from './bind';\n\n/**\n * Solid directive (`use:usa`). Solid calls it with the element and an\n * accessor; since 4.0.1 the binding is tracked with `createRenderEffect`, so\n * signals read inside `{{ props, on }}` update the element automatically and\n * the listeners are removed on cleanup. `refresh()` is kept for code that\n * calls the directive outside a reactive owner.\n */\nexport function usa(el: HTMLElement, accessor: () => UsaBinding | undefined): { refresh(): void; destroy(): void } {\n  let b: ReturnType<typeof bindUsa> | null = null;\n  const run = () => {\n    const v = accessor() || {};\n    if (b) b.update(v);\n    else b = bindUsa(el, v);\n  };\n  createRenderEffect(run);\n  if (!b) run();\n  const destroy = () => b?.destroy();\n  onCleanup(destroy);\n  return { refresh: run, destroy };\n}\n\n/** Register the elements (all, or some categories) — call from `onMount` in SSR apps. */\nexport function defineUsa(categories?: ComponentCategory[]): void {\n  if (typeof window !== 'undefined') defineComponents(categories);\n}\n\n/** JSX intrinsic elements for Solid (same attribute types as the React/Preact ones). */\nexport type SolidUsaIntrinsicElements = UsaIntrinsicElements;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;AAcG;AASH;;;;;;AAMG;AACG,SAAU,GAAG,CAAC,EAAe,EAAE,QAAsC,EAAA;IACzE,IAAI,CAAC,GAAsC,IAAI;IAC/C,MAAM,GAAG,GAAG,MAAK;AACf,QAAA,MAAM,CAAC,GAAG,QAAQ,EAAE,IAAI,EAAE;AAC1B,QAAA,IAAI,CAAC;AAAE,YAAA,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;;AACb,YAAA,CAAC,GAAG,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC;AACzB,IAAA,CAAC;IACD,kBAAkB,CAAC,GAAG,CAAC;AACvB,IAAA,IAAI,CAAC,CAAC;AAAE,QAAA,GAAG,EAAE;IACb,MAAM,OAAO,GAAG,MAAM,CAAC,EAAE,OAAO,EAAE;IAClC,SAAS,CAAC,OAAO,CAAC;AAClB,IAAA,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE;AAClC;AAEA;AACM,SAAU,SAAS,CAAC,UAAgC,EAAA;IACxD,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,gBAAgB,CAAC,UAAU,CAAC;AACjE;;;;"}

package/dist/components/svelte.cjs

@@ -3,29 +3,30 @@
 var components = require('../components.cjs');
 var bind = require('../chunks/bind-Ui43-n2d.cjs');
 require('./reveal.cjs');
-require('../chunks/base-CXx7jZ-o.cjs');
+require('../chunks/base-DE2yzxE7.cjs');
 require('./text.cjs');
+require('../chunks/core-BC9S2osy.cjs');
+require('./tokens.cjs');
 require('./interaction.cjs');
 require('./feedback.cjs');
 require('./background.cjs');
-require('../chunks/variants-BNIrn4ch.cjs');
+require('../chunks/variants-CM2zaG8v.cjs');
 require('./transitions.cjs');
 require('./physics.cjs');
-require('../chunks/spring-2OTnYCzm.cjs');
+require('../chunks/spring-hsmgd7ml.cjs');
 require('./cards.cjs');
 require('./click.cjs');
 require('./ui.cjs');
 require('./page.cjs');
 require('./timeline.cjs');
-require('../chunks/core-BRIIoKeS.cjs');
-require('./tokens.cjs');
 require('./gesture.cjs');
-require('../chunks/core-IaorbTdu.cjs');
+require('../chunks/core-DPYjLqA0.cjs');
 require('./svg.cjs');
 require('./webgl.cjs');
 require('./depth.cjs');
 require('./layout.cjs');
 require('./packs.cjs');
+require('./a11y.cjs');
 require('../chunks/index-tags-BQh_uGqH.cjs');
 
 /**

package/dist/components/svelte.cjs.map

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

package/dist/components/svelte.d.cts

@@ -117,7 +117,11 @@ interface UsaTypewriterElement extends UsaElement {
  * them in a cascade (pure CSS animation per unit, transform / opacity /
  * filter only). Words never break across lines.
  *
- * Attributes: `by` (`chars` | `words`, default `chars`), `effect`
+ * 4.3: `Intl.Segmenter`-aware (emoji, CJK words), Arabic-script words are
+ * never split below the word, `by="lines"` reveals line by line, and `from`
+ * (`start` · `end` · `center` · `edges` · `random`) sets the cascade order.
+ *
+ * Attributes: `by` (`chars` | `words` | `lines`, default `chars`), `effect`
  * (`rise` | `fade` | `blur` | `flip` | `pop`, default `rise`), `stagger`
  * (ms between units, 28 for chars / 70 for words), `duration` (ms, 620),
  * `delay` (ms, 0), `trigger` (`view` | `load` | `manual`, default `view`),
@@ -230,6 +234,81 @@ interface UsaScrollHighlightElement extends UsaElement {
     readonly progress: number;
 }
 
+/**
+ * Where a step starts on a timeline:
+ * - a number: absolute time in ms
+ * - `'>'` (default): when the previous step ends · `'<'`: when it starts
+ * - `'+=200'` / `'-=200'`: after / overlapping the previous end
+ * - `'<+=100'`: 100ms after the previous step's start
+ * - `'intro'` / `'intro+=150'`: at (or relative to) a label
+ */
+type TimelinePosition = number | string;
+interface TimelineStepOptions {
+    /** Duration in ms or a motion token name (`'fast'`, `'slow'`…; 4.2). Default: timeline default, 600. */
+    duration?: number | string;
+    /** CSS easing or a motion token name (`'emphasized'`, `'spring'`…; 4.2). Default `cubic-bezier(0.22, 1, 0.36, 1)`. */
+    easing?: string;
+    /** Start position, see `TimelinePosition`. */
+    at?: TimelinePosition;
+    /** ms between targets when the selector matches several elements. */
+    stagger?: number;
+}
+interface ScrubOptions {
+    /** 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 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. */
+    readonly duration: number;
+    /** Label positions in ms. */
+    readonly labels: Readonly<Record<string, number>>;
+    /** Current playhead in ms. */
+    readonly time: number;
+    /** Add a step: animate `target` with keyframes or a preset name (`fade-up`, `scale`…). */
+    to(target: string | Element | Element[] | NodeList, frames: Keyframe[] | string, options?: TimelineStepOptions): Timeline;
+    /** Name a position (default: the current end). */
+    label(name: string, at?: TimelinePosition): Timeline;
+    /** Run `fn` when the playhead passes `at`. */
+    call(fn: () => void, at?: TimelinePosition): Timeline;
+    /** Play forwards from the playhead (from 0 when at the end). Resolves at the end. */
+    play(from?: TimelinePosition): Promise<void>;
+    /** Play backwards to 0. */
+    reverse(): Promise<void>;
+    pause(): Timeline;
+    /** Jump to a time (ms) or label. */
+    seek(to: TimelinePosition): Timeline;
+    /** Get or set progress 0–1. */
+    progress(p?: number): number;
+    /**
+     * 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;
+}
+
 /**
  * use-scroll-animate/components/text — text effects.
  * `<usa-typewriter>`, `<usa-split-text>`, `<usa-scramble>`, `<usa-counter>`,
@@ -1275,81 +1354,6 @@ declare global {
     }
 }
 
-/**
- * Where a step starts on a timeline:
- * - a number: absolute time in ms
- * - `'>'` (default): when the previous step ends · `'<'`: when it starts
- * - `'+=200'` / `'-=200'`: after / overlapping the previous end
- * - `'<+=100'`: 100ms after the previous step's start
- * - `'intro'` / `'intro+=150'`: at (or relative to) a label
- */
-type TimelinePosition = number | string;
-interface TimelineStepOptions {
-    /** Duration in ms or a motion token name (`'fast'`, `'slow'`…; 4.2). Default: timeline default, 600. */
-    duration?: number | string;
-    /** CSS easing or a motion token name (`'emphasized'`, `'spring'`…; 4.2). Default `cubic-bezier(0.22, 1, 0.36, 1)`. */
-    easing?: string;
-    /** Start position, see `TimelinePosition`. */
-    at?: TimelinePosition;
-    /** ms between targets when the selector matches several elements. */
-    stagger?: number;
-}
-interface ScrubOptions {
-    /** 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 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. */
-    readonly duration: number;
-    /** Label positions in ms. */
-    readonly labels: Readonly<Record<string, number>>;
-    /** Current playhead in ms. */
-    readonly time: number;
-    /** Add a step: animate `target` with keyframes or a preset name (`fade-up`, `scale`…). */
-    to(target: string | Element | Element[] | NodeList, frames: Keyframe[] | string, options?: TimelineStepOptions): Timeline;
-    /** Name a position (default: the current end). */
-    label(name: string, at?: TimelinePosition): Timeline;
-    /** Run `fn` when the playhead passes `at`. */
-    call(fn: () => void, at?: TimelinePosition): Timeline;
-    /** Play forwards from the playhead (from 0 when at the end). Resolves at the end. */
-    play(from?: TimelinePosition): Promise<void>;
-    /** Play backwards to 0. */
-    reverse(): Promise<void>;
-    pause(): Timeline;
-    /** Jump to a time (ms) or label. */
-    seek(to: TimelinePosition): Timeline;
-    /** Get or set progress 0–1. */
-    progress(p?: number): number;
-    /**
-     * 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;
-}
-
 /**
  * `<usa-timeline>` — declarative choreography. Every descendant with
  * `data-tl="<preset>"` becomes a step, in document order; `data-at`