use-scroll-animate 3.9.0 → 4.0.1

package/dist/components/timeline.cjs

@@ -1,220 +1,7 @@
 'use strict';
 
-var base = require('../chunks/base-Dm6ee5ug.cjs');
-
-/** Keyframe presets usable by name in `to()` and `data-tl`. */
-const TIMELINE_PRESETS = {
-    fade: [{ opacity: 0 }, { opacity: 1 }],
-    'fade-up': [{ opacity: 0, transform: 'translateY(24px)' }, { opacity: 1, transform: 'none' }],
-    'fade-down': [{ opacity: 0, transform: 'translateY(-24px)' }, { opacity: 1, transform: 'none' }],
-    'fade-left': [{ opacity: 0, transform: 'translateX(24px)' }, { opacity: 1, transform: 'none' }],
-    'fade-right': [{ opacity: 0, transform: 'translateX(-24px)' }, { opacity: 1, transform: 'none' }],
-    scale: [{ opacity: 0, transform: 'scale(0.85)' }, { opacity: 1, transform: 'none' }],
-    blur: [{ opacity: 0, filter: 'blur(12px)' }, { opacity: 1, filter: 'blur(0)' }],
-    rotate: [{ opacity: 0, transform: 'rotate(-12deg) scale(0.9)' }, { opacity: 1, transform: 'none' }],
-    'clip-up': [{ clipPath: 'inset(100% 0 0 0)' }, { clipPath: 'inset(0 0 0 0)' }],
-    'clip-right': [{ clipPath: 'inset(0 100% 0 0)' }, { clipPath: 'inset(0 0 0 0)' }],
-};
-/** Resolve a position against the previous step and labels (pure). */
-function resolvePosition(pos, end, prevStart, labels = {}) {
-    if (pos === undefined || pos === '' || pos === '>')
-        return end;
-    if (typeof pos === 'number')
-        return Math.max(0, pos);
-    const s = String(pos).trim();
-    if (/^-?\d+(\.\d+)?$/.test(s))
-        return Math.max(0, Number(s));
-    const m = /^(<|>|[A-Za-z_][\w-]*)?\s*(?:([+-])=\s*(\d+(?:\.\d+)?))?$/.exec(s);
-    if (!m)
-        return end;
-    const base = m[1] === '<' ? prevStart : m[1] === '>' || !m[1] ? end : labels[m[1]] ?? end;
-    const delta = m[2] ? (m[2] === '-' ? -1 : 1) * Number(m[3]) : 0;
-    return Math.max(0, base + delta);
-}
-const toEls = (t) => typeof t === 'string' ? (typeof document === 'undefined' ? [] : Array.from(document.querySelectorAll(t))) : t instanceof Element ? [t] : Array.from(t);
-/**
- * Choreograph animations on one clock: chain, overlap, label, seek, reverse and
- * scrub them with scroll. Built on WAAPI (paused animations driven by one
- * playhead); without WAAPI or under reduced motion it jumps to the end state.
- *
- * @example
- * const tl = timeline({ defaults: { duration: 500 } })
- *   .to('.title', 'fade-up')
- *   .label('cards')
- *   .to('.card', 'scale', { stagger: 80, at: '-=200' })
- *   .to('.cta', [{ opacity: 0 }, { opacity: 1 }], { at: 'cards+=400' });
- * tl.play();             // or tl.scrub(document.querySelector('.hero'))
- */
-function timeline(options = {}) {
-    const d = { duration: 600, easing: 'cubic-bezier(0.22, 1, 0.36, 1)', stagger: 0, ...options.defaults };
-    const steps = [];
-    const cues = [];
-    const labels = {};
-    let end = 0;
-    let prevStart = 0;
-    let t = 0;
-    let frame = 0;
-    let dir = 1;
-    let settle;
-    let built = false;
-    const total = () => Math.max(end, ...cues.map((c) => c.at), 0);
-    const build = () => {
-        if (built)
-            return;
-        built = true;
-        for (const s of steps) {
-            if (typeof s.el.animate !== 'function') {
-                s.anim = null;
-                continue;
-            }
-            s.anim = s.el.animate(s.frames, { duration: s.duration, delay: s.start, easing: s.easing, fill: 'both' });
-            s.anim.pause();
-        }
-    };
-    const render = (to, from) => {
-        build();
-        t = base.clamp(to, 0, total());
-        for (const s of steps) {
-            if (s.anim)
-                s.anim.currentTime = t;
-            else
-                base.applyFrame(s.el, s.frames[t >= s.start ? s.frames.length - 1 : 0]);
-        }
-        for (const c of cues)
-            if ((from < c.at && t >= c.at) || (from > c.at && t <= c.at))
-                c.fn();
-        options.onUpdate?.(total() ? t / total() : 1);
-    };
-    const stop = () => {
-        if (frame)
-            base.caf(frame);
-        frame = 0;
-    };
-    const run = (direction) => {
-        stop();
-        settle?.();
-        dir = direction;
-        const target = dir > 0 ? total() : 0;
-        const k = base.motionScale();
-        if (base.prefersReducedMotion() || k === 0 || !total()) {
-            render(target, t);
-            options.onComplete?.();
-            return Promise.resolve();
-        }
-        const rate = (options.speed ?? 1) / k;
-        return new Promise((resolve) => {
-            settle = () => { settle = undefined; resolve(); };
-            let last = base.now();
-            const loop = () => {
-                const n = base.now();
-                const next = t + (n - last) * rate * dir;
-                last = n;
-                render(next, t);
-                if ((dir > 0 && t >= target) || (dir < 0 && t <= 0)) {
-                    frame = 0;
-                    options.onComplete?.();
-                    settle?.();
-                    return;
-                }
-                frame = base.raf(loop);
-            };
-            frame = base.raf(loop);
-        });
-    };
-    const api = {
-        get duration() { return total(); },
-        get labels() { return { ...labels }; },
-        get time() { return t; },
-        to(target, frames, o = {}) {
-            const kf = typeof frames === 'string' ? TIMELINE_PRESETS[frames] || TIMELINE_PRESETS.fade : frames;
-            const start = resolvePosition(o.at, end, prevStart, labels);
-            const duration = o.duration ?? d.duration;
-            const stagger = o.stagger ?? d.stagger;
-            let last = start;
-            toEls(target).forEach((el, i) => {
-                const s = start + i * stagger;
-                steps.push({ el, frames: kf, start: s, duration, easing: o.easing ?? d.easing });
-                last = Math.max(last, s + duration);
-            });
-            prevStart = start;
-            end = Math.max(end, last);
-            built = false;
-            steps.forEach((s) => s.anim?.cancel());
-            return api;
-        },
-        label(name, at) {
-            labels[name] = resolvePosition(at, end, prevStart, labels);
-            return api;
-        },
-        call(fn, at) {
-            cues.push({ fn, at: resolvePosition(at, end, prevStart, labels) });
-            return api;
-        },
-        play(from) {
-            if (from !== undefined)
-                render(resolvePosition(from, 0, 0, labels), t);
-            else if (t >= total())
-                render(0, -1);
-            return run(1);
-        },
-        reverse() {
-            return run(-1);
-        },
-        pause() {
-            stop();
-            return api;
-        },
-        seek(to) {
-            stop();
-            render(resolvePosition(to, 0, 0, labels), t);
-            return api;
-        },
-        progress(p) {
-            if (p !== undefined)
-                api.seek(base.clamp(p, 0, 1) * total());
-            return total() ? t / total() : 0;
-        },
-        scrub(source, o = {}) {
-            stop();
-            if (base.prefersReducedMotion() || typeof window === 'undefined') {
-                render(total(), t);
-                return () => { };
-            }
-            let id = 0;
-            let cur = t;
-            const update = () => {
-                id = 0;
-                const r = source.getBoundingClientRect();
-                const vh = window.innerHeight || 1;
-                const p = base.clamp((vh + (o.offset ?? 0) - r.top) / (vh + r.height || 1), 0, 1);
-                const goal = p * total();
-                const sm = base.clamp(o.smooth ?? 0, 0, 0.95);
-                cur = sm ? cur + (goal - cur) * (1 - sm) : goal;
-                render(cur, t);
-                if (sm && Math.abs(goal - cur) > 0.5)
-                    id = base.raf(update);
-            };
-            const onScroll = () => { if (!id)
-                id = base.raf(update); };
-            window.addEventListener('scroll', onScroll, { passive: true });
-            window.addEventListener('resize', onScroll, { passive: true });
-            update();
-            return () => {
-                window.removeEventListener('scroll', onScroll);
-                window.removeEventListener('resize', onScroll);
-                if (id)
-                    base.caf(id);
-            };
-        },
-        cancel() {
-            stop();
-            settle?.();
-            steps.forEach((s) => s.anim?.cancel());
-            built = false;
-        },
-    };
-    return api;
-}
+var base = require('../chunks/base-CXx7jZ-o.cjs');
+var core = require('../chunks/core-DXqZm5Il.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}}";
 
@@ -241,12 +28,12 @@ function defineTimeline(tag = 'usa-timeline') {
         }
         mount() {
             const overlap = this.num('overlap', 0);
-            const tl = (this._tl = timeline({ defaults: { duration: this.num('duration', 600), stagger: this.num('stagger', 0) } }));
+            const tl = (this._tl = core.timeline({ defaults: { duration: this.num('duration', 600), stagger: this.num('stagger', 0) } }));
             this.querySelectorAll('[data-tl]').forEach((el, i) => {
                 if (el.dataset.label)
                     tl.label(el.dataset.label);
                 const name = el.dataset.tl || 'fade';
-                tl.to(el, TIMELINE_PRESETS[name] ? name : 'fade', {
+                tl.to(el, core.TIMELINE_PRESETS[name] ? name : 'fade', {
                     at: el.dataset.at ?? (i && overlap ? `-=${overlap}` : undefined),
                     duration: el.dataset.duration ? Number(el.dataset.duration) : undefined,
                 });
@@ -260,11 +47,24 @@ function defineTimeline(tag = 'usa-timeline') {
                 this.onCleanup(tl.scrub(this, { smooth: 0.2 }));
                 return;
             }
-            tl.seek(0);
             const trigger = this.str('trigger', 'view');
-            if (trigger === 'click')
+            if (trigger === 'click') {
+                // 4.0.1: show the finished composition until the first click
+                // (it used to sit invisible at t=0); Enter / Space replay it too.
+                tl.seek(tl.duration);
                 this.listen(this, 'click', () => void this.play());
-            else if (trigger === 'view') {
+                this.listen(this, 'keydown', (e) => {
+                    if (e.target === this && (e.key === 'Enter' || e.key === ' ')) {
+                        e.preventDefault();
+                        void this.play();
+                    }
+                });
+                if (!this.hasAttribute('tabindex'))
+                    this.tabIndex = 0;
+                return;
+            }
+            tl.seek(0);
+            if (trigger === 'view') {
                 let played = false;
                 this.inView((v) => {
                     if (v && (!played || this.flag('repeat'))) {
@@ -295,9 +95,9 @@ function defineTimelineComponents() {
 
 exports.configureComponents = base.configureComponents;
 exports.prefersReducedMotion = base.prefersReducedMotion;
-exports.TIMELINE_PRESETS = TIMELINE_PRESETS;
+exports.TIMELINE_PRESETS = core.TIMELINE_PRESETS;
+exports.resolvePosition = core.resolvePosition;
+exports.timeline = core.timeline;
 exports.defineTimeline = defineTimeline;
 exports.defineTimelineComponents = defineTimelineComponents;
-exports.resolvePosition = resolvePosition;
-exports.timeline = timeline;
 //# sourceMappingURL=timeline.cjs.map

package/dist/components/timeline.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"timeline.cjs","sources":["../../src/components/timeline/core.ts","../../src/components/timeline/timeline-el.ts","../../src/components/timeline/index.ts"],"sourcesContent":["import { prefersReducedMotion, motionScale, applyFrame, raf, caf, now, clamp } from '../base';\n\n/**\n * Where a step starts on a timeline:\n * - a number: absolute time in ms\n * - `'>'` (default): when the previous step ends · `'<'`: when it starts\n * - `'+=200'` / `'-=200'`: after / overlapping the previous end\n * - `'<+=100'`: 100ms after the previous step's start\n * - `'intro'` / `'intro+=150'`: at (or relative to) a label\n */\nexport type TimelinePosition = number | string;\n\nexport interface TimelineStepOptions {\n  /** Duration in ms (default: timeline default, 600). */\n  duration?: number;\n  /** CSS easing (default `cubic-bezier(0.22, 1, 0.36, 1)`). */\n  easing?: string;\n  /** Start position, see `TimelinePosition`. */\n  at?: TimelinePosition;\n  /** ms between targets when the selector matches several elements. */\n  stagger?: number;\n}\n\nexport interface TimelineOptions {\n  /** Defaults for every step. */\n  defaults?: Pick<TimelineStepOptions, 'duration' | 'easing' | 'stagger'>;\n  /** Playback rate (1 = normal). */\n  speed?: number;\n  /** Called after `play()` reaches the end (or the start when reversed). */\n  onComplete?: () => void;\n  /** Called on every frame with progress 0–1. */\n  onUpdate?: (progress: number) => void;\n}\n\nexport interface ScrubOptions {\n  /** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts. */\n  offset?: number;\n  /** Smoothing 0–1 (0 = immediate, default 0). */\n  smooth?: number;\n}\n\nexport interface Timeline {\n  /** Total length in ms. */\n  readonly duration: number;\n  /** Label positions in ms. */\n  readonly labels: Readonly<Record<string, number>>;\n  /** Current playhead in ms. */\n  readonly time: number;\n  /** Add a step: animate `target` with keyframes or a preset name (`fade-up`, `scale`…). */\n  to(target: string | Element | Element[] | NodeList, frames: Keyframe[] | string, options?: TimelineStepOptions): Timeline;\n  /** Name a position (default: the current end). */\n  label(name: string, at?: TimelinePosition): Timeline;\n  /** Run `fn` when the playhead passes `at`. */\n  call(fn: () => void, at?: TimelinePosition): Timeline;\n  /** Play forwards from the playhead (from 0 when at the end). Resolves at the end. */\n  play(from?: TimelinePosition): Promise<void>;\n  /** Play backwards to 0. */\n  reverse(): Promise<void>;\n  pause(): Timeline;\n  /** Jump to a time (ms) or label. */\n  seek(to: TimelinePosition): Timeline;\n  /** Get or set progress 0–1. */\n  progress(p?: number): number;\n  /** Tie progress to the scroll position of `source` (it moves through the viewport). Returns a stop function. */\n  scrub(source: Element, options?: ScrubOptions): () => void;\n  /** Stop and drop every animation (elements keep their last frame). */\n  cancel(): void;\n}\n\n/** Keyframe presets usable by name in `to()` and `data-tl`. */\nexport const TIMELINE_PRESETS: Record<string, Keyframe[]> = {\n  fade: [{ opacity: 0 }, { opacity: 1 }],\n  'fade-up': [{ opacity: 0, transform: 'translateY(24px)' }, { opacity: 1, transform: 'none' }],\n  'fade-down': [{ opacity: 0, transform: 'translateY(-24px)' }, { opacity: 1, transform: 'none' }],\n  'fade-left': [{ opacity: 0, transform: 'translateX(24px)' }, { opacity: 1, transform: 'none' }],\n  'fade-right': [{ opacity: 0, transform: 'translateX(-24px)' }, { opacity: 1, transform: 'none' }],\n  scale: [{ opacity: 0, transform: 'scale(0.85)' }, { opacity: 1, transform: 'none' }],\n  blur: [{ opacity: 0, filter: 'blur(12px)' }, { opacity: 1, filter: 'blur(0)' }],\n  rotate: [{ opacity: 0, transform: 'rotate(-12deg) scale(0.9)' }, { opacity: 1, transform: 'none' }],\n  'clip-up': [{ clipPath: 'inset(100% 0 0 0)' }, { clipPath: 'inset(0 0 0 0)' }],\n  'clip-right': [{ clipPath: 'inset(0 100% 0 0)' }, { clipPath: 'inset(0 0 0 0)' }],\n};\n\n/** Resolve a position against the previous step and labels (pure). */\nexport function resolvePosition(\n  pos: TimelinePosition | undefined,\n  end: number,\n  prevStart: number,\n  labels: Record<string, number> = {}\n): number {\n  if (pos === undefined || pos === '' || pos === '>') return end;\n  if (typeof pos === 'number') return Math.max(0, pos);\n  const s = String(pos).trim();\n  if (/^-?\\d+(\\.\\d+)?$/.test(s)) return Math.max(0, Number(s));\n  const m = /^(<|>|[A-Za-z_][\\w-]*)?\\s*(?:([+-])=\\s*(\\d+(?:\\.\\d+)?))?$/.exec(s);\n  if (!m) return end;\n  const base = m[1] === '<' ? prevStart : m[1] === '>' || !m[1] ? end : labels[m[1]] ?? end;\n  const delta = m[2] ? (m[2] === '-' ? -1 : 1) * Number(m[3]) : 0;\n  return Math.max(0, base + delta);\n}\n\nconst toEls = (t: string | Element | Element[] | NodeList): Element[] =>\n  typeof t === 'string' ? (typeof document === 'undefined' ? [] : Array.from(document.querySelectorAll(t))) : t instanceof Element ? [t] : Array.from(t as ArrayLike<Element>);\n\ninterface Step { el: Element; frames: Keyframe[]; start: number; duration: number; easing: string; anim?: Animation | null }\ninterface Cue { fn: () => void; at: number }\n\n/**\n * Choreograph animations on one clock: chain, overlap, label, seek, reverse and\n * scrub them with scroll. Built on WAAPI (paused animations driven by one\n * playhead); without WAAPI or under reduced motion it jumps to the end state.\n *\n * @example\n * const tl = timeline({ defaults: { duration: 500 } })\n *   .to('.title', 'fade-up')\n *   .label('cards')\n *   .to('.card', 'scale', { stagger: 80, at: '-=200' })\n *   .to('.cta', [{ opacity: 0 }, { opacity: 1 }], { at: 'cards+=400' });\n * tl.play();             // or tl.scrub(document.querySelector('.hero'))\n */\nexport function timeline(options: TimelineOptions = {}): Timeline {\n  const d = { duration: 600, easing: 'cubic-bezier(0.22, 1, 0.36, 1)', stagger: 0, ...options.defaults };\n  const steps: Step[] = [];\n  const cues: Cue[] = [];\n  const labels: Record<string, number> = {};\n  let end = 0;\n  let prevStart = 0;\n  let t = 0;\n  let frame = 0;\n  let dir = 1;\n  let settle: (() => void) | undefined;\n  let built = false;\n\n  const total = () => Math.max(end, ...cues.map((c) => c.at), 0);\n  const build = () => {\n    if (built) return;\n    built = true;\n    for (const s of steps) {\n      if (typeof (s.el as HTMLElement).animate !== 'function') { s.anim = null; continue; }\n      s.anim = (s.el as HTMLElement).animate(s.frames, { duration: s.duration, delay: s.start, easing: s.easing, fill: 'both' });\n      s.anim.pause();\n    }\n  };\n  const render = (to: number, from: number) => {\n    build();\n    t = clamp(to, 0, total());\n    for (const s of steps) {\n      if (s.anim) s.anim.currentTime = t;\n      else applyFrame(s.el as HTMLElement, s.frames[t >= s.start ? s.frames.length - 1 : 0]);\n    }\n    for (const c of cues) if ((from < c.at && t >= c.at) || (from > c.at && t <= c.at)) c.fn();\n    options.onUpdate?.(total() ? t / total() : 1);\n  };\n  const stop = () => {\n    if (frame) caf(frame);\n    frame = 0;\n  };\n  const run = (direction: number): Promise<void> => {\n    stop();\n    settle?.();\n    dir = direction;\n    const target = dir > 0 ? total() : 0;\n    const k = motionScale();\n    if (prefersReducedMotion() || k === 0 || !total()) {\n      render(target, t);\n      options.onComplete?.();\n      return Promise.resolve();\n    }\n    const rate = (options.speed ?? 1) / k;\n    return new Promise<void>((resolve) => {\n      settle = () => { settle = undefined; resolve(); };\n      let last = now();\n      const loop = () => {\n        const n = now();\n        const next = t + (n - last) * rate * dir;\n        last = n;\n        render(next, t);\n        if ((dir > 0 && t >= target) || (dir < 0 && t <= 0)) {\n          frame = 0;\n          options.onComplete?.();\n          settle?.();\n          return;\n        }\n        frame = raf(loop);\n      };\n      frame = raf(loop);\n    });\n  };\n\n  const api: Timeline = {\n    get duration() { return total(); },\n    get labels() { return { ...labels }; },\n    get time() { return t; },\n    to(target, frames, o = {}) {\n      const kf = typeof frames === 'string' ? TIMELINE_PRESETS[frames] || TIMELINE_PRESETS.fade : frames;\n      const start = resolvePosition(o.at, end, prevStart, labels);\n      const duration = o.duration ?? d.duration;\n      const stagger = o.stagger ?? d.stagger;\n      let last = start;\n      toEls(target).forEach((el, i) => {\n        const s = start + i * stagger;\n        steps.push({ el, frames: kf, start: s, duration, easing: o.easing ?? d.easing });\n        last = Math.max(last, s + duration);\n      });\n      prevStart = start;\n      end = Math.max(end, last);\n      built = false;\n      steps.forEach((s) => s.anim?.cancel());\n      return api;\n    },\n    label(name, at) {\n      labels[name] = resolvePosition(at, end, prevStart, labels);\n      return api;\n    },\n    call(fn, at) {\n      cues.push({ fn, at: resolvePosition(at, end, prevStart, labels) });\n      return api;\n    },\n    play(from) {\n      if (from !== undefined) render(resolvePosition(from, 0, 0, labels), t);\n      else if (t >= total()) render(0, -1);\n      return run(1);\n    },\n    reverse() {\n      return run(-1);\n    },\n    pause() {\n      stop();\n      return api;\n    },\n    seek(to) {\n      stop();\n      render(resolvePosition(to, 0, 0, labels), t);\n      return api;\n    },\n    progress(p) {\n      if (p !== undefined) api.seek(clamp(p, 0, 1) * total());\n      return total() ? t / total() : 0;\n    },\n    scrub(source, o = {}) {\n      stop();\n      if (prefersReducedMotion() || typeof window === 'undefined') {\n        render(total(), t);\n        return () => {};\n      }\n      let id = 0;\n      let cur = t;\n      const update = () => {\n        id = 0;\n        const r = source.getBoundingClientRect();\n        const vh = window.innerHeight || 1;\n        const p = clamp((vh + (o.offset ?? 0) - r.top) / (vh + r.height || 1), 0, 1);\n        const goal = p * total();\n        const sm = clamp(o.smooth ?? 0, 0, 0.95);\n        cur = sm ? cur + (goal - cur) * (1 - sm) : goal;\n        render(cur, t);\n        if (sm && Math.abs(goal - cur) > 0.5) id = raf(update);\n      };\n      const onScroll = () => { if (!id) id = raf(update); };\n      window.addEventListener('scroll', onScroll, { passive: true });\n      window.addEventListener('resize', onScroll, { passive: true });\n      update();\n      return () => {\n        window.removeEventListener('scroll', onScroll);\n        window.removeEventListener('resize', onScroll);\n        if (id) caf(id);\n      };\n    },\n    cancel() {\n      stop();\n      settle?.();\n      steps.forEach((s) => s.anim?.cancel());\n      built = false;\n    },\n  };\n  return api;\n}\n","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          tl.seek(0);\n          const trigger = this.str('trigger', 'view');\n          if (trigger === 'click') this.listen(this, 'click', () => void this.play());\n          else 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":["clamp","applyFrame","caf","motionScale","prefersReducedMotion","now","raf","defineElement"],"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). 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":";;;;;;;AAwBM,SAAU,cAAc,CAAC,GAAG,GAAG,cAAc,EAAA;AACjD,IAAA,OAAOA,kBAAa,CAClB,GAAG,EACH,CAAC,IAAI,KACH,MAAM,WAAY,SAAQ,IAAI,CAAA;AAA9B,QAAA,WAAA,GAAA;;YAIU,IAAA,CAAA,GAAG,GAAoB,IAAI;QAoErC;AAvEE,QAAA,WAAW,kBAAkB,GAAA;AAC3B,YAAA,OAAO,CAAC,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC;QACxC;AAGA,QAAA,IAAI,QAAQ,GAAA;YACV,OAAO,IAAI,CAAC,GAAG;QACjB;QAEA,IAAI,GAAA;AACF,YAAA,OAAO,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,OAAO,CAAC,OAAO,EAAE;QAC/F;QAEA,OAAO,GAAA;AACL,YAAA,OAAO,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,OAAO,CAAC,OAAO,EAAE;QAC1D;AAEA,QAAA,IAAI,CAAC,EAAmB,EAAA;AACtB,YAAA,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,EAAE,CAAC;QACpB;QAEA,KAAK,GAAA;YACH,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,CAAC,CAAC;AACtC,YAAA,MAAM,EAAE,IAAI,IAAI,CAAC,GAAG,GAAGC,aAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,GAAG,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;AACxH,YAAA,IAAI,CAAC,gBAAgB,CAAc,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,CAAC,KAAI;AAChE,gBAAA,IAAI,EAAE,CAAC,OAAO,CAAC,KAAK;oBAAE,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC;gBAChD,MAAM,IAAI,GAAG,EAAE,CAAC,OAAO,CAAC,EAAE,IAAI,MAAM;AACpC,gBAAA,EAAE,CAAC,EAAE,CAAC,EAAE,EAAEC,qBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,MAAM,EAAE;oBAChD,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,IAAI,OAAO,GAAG,CAAA,EAAA,EAAK,OAAO,EAAE,GAAG,SAAS,CAAC;oBAChE,QAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,QAAQ,GAAG,MAAM,CAAC,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,SAAS;AACxE,iBAAA,CAAC;AACJ,YAAA,CAAC,CAAC;YACF,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,CAAC;AACjC,YAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAChB,gBAAA,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC;gBACpB;YACF;AACA,YAAA,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;AACtB,gBAAA,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;gBAC/C;YACF;YACA,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,MAAM,CAAC;AAC3C,YAAA,IAAI,OAAO,KAAK,OAAO,EAAE;;;AAGvB,gBAAA,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC;AACpB,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;gBAClD,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,EAAE,CAAC,CAAgB,KAAI;oBAChD,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,KAAK,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE;wBAC7D,CAAC,CAAC,cAAc,EAAE;AAClB,wBAAA,KAAK,IAAI,CAAC,IAAI,EAAE;oBAClB;AACF,gBAAA,CAAC,CAAC;AACF,gBAAA,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC;AAAE,oBAAA,IAAI,CAAC,QAAQ,GAAG,CAAC;gBACrD;YACF;AACA,YAAA,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;AACV,YAAA,IAAI,OAAO,KAAK,MAAM,EAAE;gBACtB,IAAI,MAAM,GAAG,KAAK;AAClB,gBAAA,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAI;AAChB,oBAAA,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,EAAE;wBACzC,MAAM,GAAG,IAAI;AACb,wBAAA,KAAK,IAAI,CAAC,IAAI,EAAE;oBAClB;yBAAO,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;AAAE,wBAAA,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;AAClD,gBAAA,CAAC,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC;YACxB;QACF;QAEA,OAAO,GAAA;AACL,YAAA,IAAI,CAAC,GAAG,GAAG,IAAI;QACjB;KACD,EACH,EAAE,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,CAC9B;AACH;;ACvGA;;;;;AAKG;AAUH;SACgB,wBAAwB,GAAA;AACtC,IAAA,cAAc,EAAE;AAClB;;;;;;;;;;"}

package/dist/components/timeline.js

@@ -1,219 +1,7 @@
-import { p as prefersReducedMotion, e as caf, b as clamp, d as applyFrame, r as raf, m as motionScale, n as now, i as defineElement } from '../chunks/base-BRIPyPtX.js';
-export { a as configureComponents } from '../chunks/base-BRIPyPtX.js';
-
-/** Keyframe presets usable by name in `to()` and `data-tl`. */
-const TIMELINE_PRESETS = {
-    fade: [{ opacity: 0 }, { opacity: 1 }],
-    'fade-up': [{ opacity: 0, transform: 'translateY(24px)' }, { opacity: 1, transform: 'none' }],
-    'fade-down': [{ opacity: 0, transform: 'translateY(-24px)' }, { opacity: 1, transform: 'none' }],
-    'fade-left': [{ opacity: 0, transform: 'translateX(24px)' }, { opacity: 1, transform: 'none' }],
-    'fade-right': [{ opacity: 0, transform: 'translateX(-24px)' }, { opacity: 1, transform: 'none' }],
-    scale: [{ opacity: 0, transform: 'scale(0.85)' }, { opacity: 1, transform: 'none' }],
-    blur: [{ opacity: 0, filter: 'blur(12px)' }, { opacity: 1, filter: 'blur(0)' }],
-    rotate: [{ opacity: 0, transform: 'rotate(-12deg) scale(0.9)' }, { opacity: 1, transform: 'none' }],
-    'clip-up': [{ clipPath: 'inset(100% 0 0 0)' }, { clipPath: 'inset(0 0 0 0)' }],
-    'clip-right': [{ clipPath: 'inset(0 100% 0 0)' }, { clipPath: 'inset(0 0 0 0)' }],
-};
-/** Resolve a position against the previous step and labels (pure). */
-function resolvePosition(pos, end, prevStart, labels = {}) {
-    if (pos === undefined || pos === '' || pos === '>')
-        return end;
-    if (typeof pos === 'number')
-        return Math.max(0, pos);
-    const s = String(pos).trim();
-    if (/^-?\d+(\.\d+)?$/.test(s))
-        return Math.max(0, Number(s));
-    const m = /^(<|>|[A-Za-z_][\w-]*)?\s*(?:([+-])=\s*(\d+(?:\.\d+)?))?$/.exec(s);
-    if (!m)
-        return end;
-    const base = m[1] === '<' ? prevStart : m[1] === '>' || !m[1] ? end : labels[m[1]] ?? end;
-    const delta = m[2] ? (m[2] === '-' ? -1 : 1) * Number(m[3]) : 0;
-    return Math.max(0, base + delta);
-}
-const toEls = (t) => typeof t === 'string' ? (typeof document === 'undefined' ? [] : Array.from(document.querySelectorAll(t))) : t instanceof Element ? [t] : Array.from(t);
-/**
- * Choreograph animations on one clock: chain, overlap, label, seek, reverse and
- * scrub them with scroll. Built on WAAPI (paused animations driven by one
- * playhead); without WAAPI or under reduced motion it jumps to the end state.
- *
- * @example
- * const tl = timeline({ defaults: { duration: 500 } })
- *   .to('.title', 'fade-up')
- *   .label('cards')
- *   .to('.card', 'scale', { stagger: 80, at: '-=200' })
- *   .to('.cta', [{ opacity: 0 }, { opacity: 1 }], { at: 'cards+=400' });
- * tl.play();             // or tl.scrub(document.querySelector('.hero'))
- */
-function timeline(options = {}) {
-    const d = { duration: 600, easing: 'cubic-bezier(0.22, 1, 0.36, 1)', stagger: 0, ...options.defaults };
-    const steps = [];
-    const cues = [];
-    const labels = {};
-    let end = 0;
-    let prevStart = 0;
-    let t = 0;
-    let frame = 0;
-    let dir = 1;
-    let settle;
-    let built = false;
-    const total = () => Math.max(end, ...cues.map((c) => c.at), 0);
-    const build = () => {
-        if (built)
-            return;
-        built = true;
-        for (const s of steps) {
-            if (typeof s.el.animate !== 'function') {
-                s.anim = null;
-                continue;
-            }
-            s.anim = s.el.animate(s.frames, { duration: s.duration, delay: s.start, easing: s.easing, fill: 'both' });
-            s.anim.pause();
-        }
-    };
-    const render = (to, from) => {
-        build();
-        t = clamp(to, 0, total());
-        for (const s of steps) {
-            if (s.anim)
-                s.anim.currentTime = t;
-            else
-                applyFrame(s.el, s.frames[t >= s.start ? s.frames.length - 1 : 0]);
-        }
-        for (const c of cues)
-            if ((from < c.at && t >= c.at) || (from > c.at && t <= c.at))
-                c.fn();
-        options.onUpdate?.(total() ? t / total() : 1);
-    };
-    const stop = () => {
-        if (frame)
-            caf(frame);
-        frame = 0;
-    };
-    const run = (direction) => {
-        stop();
-        settle?.();
-        dir = direction;
-        const target = dir > 0 ? total() : 0;
-        const k = motionScale();
-        if (prefersReducedMotion() || k === 0 || !total()) {
-            render(target, t);
-            options.onComplete?.();
-            return Promise.resolve();
-        }
-        const rate = (options.speed ?? 1) / k;
-        return new Promise((resolve) => {
-            settle = () => { settle = undefined; resolve(); };
-            let last = now();
-            const loop = () => {
-                const n = now();
-                const next = t + (n - last) * rate * dir;
-                last = n;
-                render(next, t);
-                if ((dir > 0 && t >= target) || (dir < 0 && t <= 0)) {
-                    frame = 0;
-                    options.onComplete?.();
-                    settle?.();
-                    return;
-                }
-                frame = raf(loop);
-            };
-            frame = raf(loop);
-        });
-    };
-    const api = {
-        get duration() { return total(); },
-        get labels() { return { ...labels }; },
-        get time() { return t; },
-        to(target, frames, o = {}) {
-            const kf = typeof frames === 'string' ? TIMELINE_PRESETS[frames] || TIMELINE_PRESETS.fade : frames;
-            const start = resolvePosition(o.at, end, prevStart, labels);
-            const duration = o.duration ?? d.duration;
-            const stagger = o.stagger ?? d.stagger;
-            let last = start;
-            toEls(target).forEach((el, i) => {
-                const s = start + i * stagger;
-                steps.push({ el, frames: kf, start: s, duration, easing: o.easing ?? d.easing });
-                last = Math.max(last, s + duration);
-            });
-            prevStart = start;
-            end = Math.max(end, last);
-            built = false;
-            steps.forEach((s) => s.anim?.cancel());
-            return api;
-        },
-        label(name, at) {
-            labels[name] = resolvePosition(at, end, prevStart, labels);
-            return api;
-        },
-        call(fn, at) {
-            cues.push({ fn, at: resolvePosition(at, end, prevStart, labels) });
-            return api;
-        },
-        play(from) {
-            if (from !== undefined)
-                render(resolvePosition(from, 0, 0, labels), t);
-            else if (t >= total())
-                render(0, -1);
-            return run(1);
-        },
-        reverse() {
-            return run(-1);
-        },
-        pause() {
-            stop();
-            return api;
-        },
-        seek(to) {
-            stop();
-            render(resolvePosition(to, 0, 0, labels), t);
-            return api;
-        },
-        progress(p) {
-            if (p !== undefined)
-                api.seek(clamp(p, 0, 1) * total());
-            return total() ? t / total() : 0;
-        },
-        scrub(source, o = {}) {
-            stop();
-            if (prefersReducedMotion() || typeof window === 'undefined') {
-                render(total(), t);
-                return () => { };
-            }
-            let id = 0;
-            let cur = t;
-            const update = () => {
-                id = 0;
-                const r = source.getBoundingClientRect();
-                const vh = window.innerHeight || 1;
-                const p = clamp((vh + (o.offset ?? 0) - r.top) / (vh + r.height || 1), 0, 1);
-                const goal = p * total();
-                const sm = clamp(o.smooth ?? 0, 0, 0.95);
-                cur = sm ? cur + (goal - cur) * (1 - sm) : goal;
-                render(cur, t);
-                if (sm && Math.abs(goal - cur) > 0.5)
-                    id = raf(update);
-            };
-            const onScroll = () => { if (!id)
-                id = raf(update); };
-            window.addEventListener('scroll', onScroll, { passive: true });
-            window.addEventListener('resize', onScroll, { passive: true });
-            update();
-            return () => {
-                window.removeEventListener('scroll', onScroll);
-                window.removeEventListener('resize', onScroll);
-                if (id)
-                    caf(id);
-            };
-        },
-        cancel() {
-            stop();
-            settle?.();
-            steps.forEach((s) => s.anim?.cancel());
-            built = false;
-        },
-    };
-    return api;
-}
+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';
 
 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}}";
 
@@ -259,11 +47,24 @@ function defineTimeline(tag = 'usa-timeline') {
                 this.onCleanup(tl.scrub(this, { smooth: 0.2 }));
                 return;
             }
-            tl.seek(0);
             const trigger = this.str('trigger', 'view');
-            if (trigger === 'click')
+            if (trigger === 'click') {
+                // 4.0.1: show the finished composition until the first click
+                // (it used to sit invisible at t=0); Enter / Space replay it too.
+                tl.seek(tl.duration);
                 this.listen(this, 'click', () => void this.play());
-            else if (trigger === 'view') {
+                this.listen(this, 'keydown', (e) => {
+                    if (e.target === this && (e.key === 'Enter' || e.key === ' ')) {
+                        e.preventDefault();
+                        void this.play();
+                    }
+                });
+                if (!this.hasAttribute('tabindex'))
+                    this.tabIndex = 0;
+                return;
+            }
+            tl.seek(0);
+            if (trigger === 'view') {
                 let played = false;
                 this.inView((v) => {
                     if (v && (!played || this.flag('repeat'))) {
@@ -292,5 +93,5 @@ function defineTimelineComponents() {
     defineTimeline();
 }
 
-export { TIMELINE_PRESETS, defineTimeline, defineTimelineComponents, prefersReducedMotion, resolvePosition, timeline };
+export { TIMELINE_PRESETS, defineTimeline, defineTimelineComponents, timeline };
 //# sourceMappingURL=timeline.js.map