use-scroll-animate 3.0.0 → 3.2.0

package/dist/components/timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.js","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":[],"mappings":"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"}

package/dist/components/transitions.js

@@ -1,5 +1,5 @@
-import { f as defineElement, k as kindOf, s as shadowStyles, i as EASE_OUT, F as FLUENT_DECELERATE, p as prefersReducedMotion } from '../chunks/base-Co98Z2iM.js';
-export { a as configureComponents } from '../chunks/base-Co98Z2iM.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-Cu-86Z31.js';
+export { a as configureComponents } from '../chunks/base-Cu-86Z31.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 { f as defineElement, h as clamp, d as caf, r as raf } from '../chunks/base-Co98Z2iM.js';
-export { a as configureComponents, p as prefersReducedMotion } from '../chunks/base-Co98Z2iM.js';
-import { d as springEasing, c as createSpring, p as projectInertia, s as snapTo, a as rubberBand } from '../chunks/spring-YNUpez2g.js';
-import { a as adoptVariants } from '../chunks/variants-Dp_5lJ_J.js';
-export { V as VARIANTS, s as setVariant } from '../chunks/variants-Dp_5lJ_J.js';
+import { h as defineElement, f as clamp, d as caf, r as raf } from '../chunks/base-Cu-86Z31.js';
+export { a as configureComponents, p as prefersReducedMotion } from '../chunks/base-Cu-86Z31.js';
+import { d as springEasing, c as createSpring, p as projectInertia, s as snapTo, a as rubberBand } from '../chunks/spring-BV-cpTHC.js';
+import { a as adoptVariants } from '../chunks/variants-BQ3gCb5L.js';
+export { V as VARIANTS, s as setVariant } from '../chunks/variants-BQ3gCb5L.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

@@ -15,7 +15,9 @@ require('./cards.cjs');
 require('./click.cjs');
 require('./ui.cjs');
 require('./page.cjs');
-require('../chunks/index-tags-BEM98giN.cjs');
+require('./timeline.cjs');
+require('./gesture.cjs');
+require('../chunks/index-tags-DCTX4F9b.cjs');
 
 /**
  * use-scroll-animate/components/vue — Vue integration (v2.9).

package/dist/components/vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"vue.cjs","sources":["../../src/components/frameworks/vue.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/vue — Vue integration (v2.9).\n *\n * ```js\n * // vite.config.js\n * import vue from '@vitejs/plugin-vue';\n * import { isUsaElement } from 'use-scroll-animate/components/vue';\n * export default { plugins: [vue({ template: { compilerOptions: { isCustomElement: isUsaElement } } })] };\n *\n * // main.js\n * import { UsaPlugin } from 'use-scroll-animate/components/vue';\n * app.use(UsaPlugin, { categories: ['click', 'cards'] });\n * ```\n * In templates, listen with `@usa:change=\"…\"` and bind properties with\n * `.prop`: `<usa-toggle :checked.prop=\"on\" @usa:change=\"on = $event.detail.checked\">`.\n */\nimport { defineComponents, type ComponentCategory } from '../index';\n\n/** `compilerOptions.isCustomElement` predicate for every `<usa-*>` tag. */\nexport const isUsaElement = (tag: string): boolean => tag.startsWith('usa-');\n\nexport interface UsaPluginOptions {\n  /** Only register these categories (default: all). */\n  categories?: ComponentCategory[];\n}\n\n/** Vue plugin: registers the `<usa-*>` elements (client only) and sets `isCustomElement` at runtime. */\nexport const UsaPlugin = {\n  install(app: { config: { compilerOptions?: { isCustomElement?: (t: string) => boolean } } }, options: UsaPluginOptions = {}): void {\n    const co = (app.config.compilerOptions ||= {});\n    const prev = co.isCustomElement;\n    co.isCustomElement = (t: string) => isUsaElement(t) || !!prev?.(t);\n    defineComponents(options.categories);\n  },\n};\n"],"names":["defineComponents"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;AAeG;AAGH;AACO,MAAM,YAAY,GAAG,CAAC,GAAW,KAAc,GAAG,CAAC,UAAU,CAAC,MAAM;AAO3E;AACO,MAAM,SAAS,GAAG;AACvB,IAAA,OAAO,CAAC,GAAmF,EAAE,OAAA,GAA4B,EAAE,EAAA;;AACzH,QAAA,MAAM,EAAE,IAAG,CAAA,EAAA,GAAC,GAAG,CAAC,MAAM,EAAC,eAAe,KAAA,EAAA,CAAf,eAAe,GAAK,EAAE,EAAC;AAC9C,QAAA,MAAM,IAAI,GAAG,EAAE,CAAC,eAAe;QAC/B,EAAE,CAAC,eAAe,GAAG,CAAC,CAAS,KAAK,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC;AAClE,QAAAA,2BAAgB,CAAC,OAAO,CAAC,UAAU,CAAC;IACtC,CAAC;;;;;;"}
+{"version":3,"file":"vue.cjs","sources":["../../src/components/frameworks/vue.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/vue — Vue integration (v2.9).\n *\n * ```js\n * // vite.config.js\n * import vue from '@vitejs/plugin-vue';\n * import { isUsaElement } from 'use-scroll-animate/components/vue';\n * export default { plugins: [vue({ template: { compilerOptions: { isCustomElement: isUsaElement } } })] };\n *\n * // main.js\n * import { UsaPlugin } from 'use-scroll-animate/components/vue';\n * app.use(UsaPlugin, { categories: ['click', 'cards'] });\n * ```\n * In templates, listen with `@usa:change=\"…\"` and bind properties with\n * `.prop`: `<usa-toggle :checked.prop=\"on\" @usa:change=\"on = $event.detail.checked\">`.\n */\nimport { defineComponents, type ComponentCategory } from '../index';\n\n/** `compilerOptions.isCustomElement` predicate for every `<usa-*>` tag. */\nexport const isUsaElement = (tag: string): boolean => tag.startsWith('usa-');\n\nexport interface UsaPluginOptions {\n  /** Only register these categories (default: all). */\n  categories?: ComponentCategory[];\n}\n\n/** Vue plugin: registers the `<usa-*>` elements (client only) and sets `isCustomElement` at runtime. */\nexport const UsaPlugin = {\n  install(app: { config: { compilerOptions?: { isCustomElement?: (t: string) => boolean } } }, options: UsaPluginOptions = {}): void {\n    const co = (app.config.compilerOptions ||= {});\n    const prev = co.isCustomElement;\n    co.isCustomElement = (t: string) => isUsaElement(t) || !!prev?.(t);\n    defineComponents(options.categories);\n  },\n};\n"],"names":["defineComponents"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;AAeG;AAGH;AACO,MAAM,YAAY,GAAG,CAAC,GAAW,KAAc,GAAG,CAAC,UAAU,CAAC,MAAM;AAO3E;AACO,MAAM,SAAS,GAAG;AACvB,IAAA,OAAO,CAAC,GAAmF,EAAE,OAAA,GAA4B,EAAE,EAAA;;AACzH,QAAA,MAAM,EAAE,IAAG,CAAA,EAAA,GAAC,GAAG,CAAC,MAAM,EAAC,eAAe,KAAA,EAAA,CAAf,eAAe,GAAK,EAAE,EAAC;AAC9C,QAAA,MAAM,IAAI,GAAG,EAAE,CAAC,eAAe;QAC/B,EAAE,CAAC,eAAe,GAAG,CAAC,CAAS,KAAK,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC;AAClE,QAAAA,2BAAgB,CAAC,OAAO,CAAC,UAAU,CAAC;IACtC,CAAC;;;;;;"}

package/dist/components/vue.d.cts

@@ -1288,6 +1288,139 @@ 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 (default: timeline default, 600). */
+    duration?: number;
+    /** CSS easing (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. */
+    offset?: number;
+    /** Smoothing 0–1 (0 = immediate, default 0). */
+    smooth?: number;
+}
+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 the scroll position of `source` (it moves through the viewport). Returns a stop function. */
+    scrub(source: Element, options?: ScrubOptions): () => void;
+    /** 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`
+ * (`'-=200'`, `'<'`, `'label+=100'`, ms), `data-duration` and `data-label`
+ * fine-tune it.
+ *
+ * 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()`,
+ * `reverse()`, `seek(t)`; property `timeline`. Event `usa:complete`.
+ * Reduced motion: steps appear in their final state.
+ */
+interface UsaTimelineElement extends UsaElement {
+    readonly timeline: Timeline | null;
+    play(): Promise<void>;
+    reverse(): Promise<void>;
+    seek(to: number | string): void;
+}
+
+/**
+ * use-scroll-animate/components/timeline — choreography (v3.1).
+ * `timeline()` chains, overlaps, labels, seeks, reverses and scroll-scrubs
+ * WAAPI animations on one playhead; `<usa-timeline>` builds one from
+ * `data-tl` children.
+ */
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'usa-timeline': UsaTimelineElement;
+    }
+}
+
+type SwipeDirection = 'left' | 'right' | 'up' | 'down';
+
+/**
+ * `<usa-swipeable>` — swipe-to-dismiss / swipe actions. The content follows
+ * the finger (rubber-banded past `distance`), flies out on a swipe or a drag
+ * past `distance`, otherwise springs home with the release velocity.
+ *
+ * Attributes: `axis` (`x` default · `y`), `distance` (px, 120), `preset`
+ * (spring), `dismiss` (remove the element after flying out), `disabled`.
+ * Keyboard: Delete/Backspace dismisses, ←/→ swipe. Events `usa:swipe`
+ * (`{ direction }`, cancelable), `usa:dismiss`. Methods `swipe(dir)`, `reset()`.
+ * Reduced motion: no follow / fly-out animation, events still fire.
+ */
+interface UsaSwipeableElement extends UsaElement {
+    swipe(direction: SwipeDirection): void;
+    reset(): void;
+    readonly offset: number;
+}
+
+/**
+ * `<usa-pinch-zoom>` — pinch (two fingers or Ctrl/⌘ + wheel / trackpad
+ * pinch) to zoom its content, pan while zoomed, double-tap to toggle zoom;
+ * scale and position spring back inside the bounds on release.
+ *
+ * Attributes: `min` (1), `max` (4), `double-tap` (zoom level, 2), `preset`.
+ * Keyboard: `+` / `-` / `0`. Property `scale`, method `zoomTo(scale)`.
+ * Event `usa:zoom` (`{ scale }`). Reduced motion: zoom changes instantly.
+ */
+interface UsaPinchZoomElement extends UsaElement {
+    readonly scale: number;
+    zoomTo(scale: number): void;
+}
+
+/**
+ * use-scroll-animate/components/gesture — unified gestures (v3.2).
+ * `gesture()` recognises pan, swipe, pinch, long-press, tap and double-tap
+ * with release velocities for springs; `<usa-swipeable>` (swipe-to-dismiss)
+ * and `<usa-pinch-zoom>` are built on it.
+ */
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'usa-swipeable': UsaSwipeableElement;
+        'usa-pinch-zoom': UsaPinchZoomElement;
+    }
+}
+
 /** The component categories and their default tags. */
 declare const COMPONENT_CATEGORIES: {
     readonly reveal: readonly ["usa-reveal", "usa-stagger", "usa-scroll-progress", "usa-scrolly"];
@@ -1301,6 +1434,8 @@ declare const COMPONENT_CATEGORIES: {
     readonly click: readonly ["usa-click", "usa-button", "usa-icon-morph", "usa-like", "usa-hold", "usa-double-tap", "usa-checkbox"];
     readonly ui: readonly ["usa-tabs", "usa-drawer", "usa-bottom-sheet", "usa-pull-refresh", "usa-fab", "usa-navbar", "usa-slider", "usa-rating", "usa-tooltip", "usa-popover", "usa-badge", "usa-avatar-stack"];
     readonly page: readonly ["usa-cursor", "usa-fullpage", "usa-loading-bar", "usa-back-to-top", "usa-ambient", "usa-splash", "usa-auto-skeleton", "usa-motion-switch"];
+    readonly timeline: readonly ["usa-timeline"];
+    readonly gesture: readonly ["usa-swipeable", "usa-pinch-zoom"];
 };
 type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
 

package/dist/components/vue.d.ts

@@ -1288,6 +1288,139 @@ 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 (default: timeline default, 600). */
+    duration?: number;
+    /** CSS easing (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. */
+    offset?: number;
+    /** Smoothing 0–1 (0 = immediate, default 0). */
+    smooth?: number;
+}
+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 the scroll position of `source` (it moves through the viewport). Returns a stop function. */
+    scrub(source: Element, options?: ScrubOptions): () => void;
+    /** 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`
+ * (`'-=200'`, `'<'`, `'label+=100'`, ms), `data-duration` and `data-label`
+ * fine-tune it.
+ *
+ * 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()`,
+ * `reverse()`, `seek(t)`; property `timeline`. Event `usa:complete`.
+ * Reduced motion: steps appear in their final state.
+ */
+interface UsaTimelineElement extends UsaElement {
+    readonly timeline: Timeline | null;
+    play(): Promise<void>;
+    reverse(): Promise<void>;
+    seek(to: number | string): void;
+}
+
+/**
+ * use-scroll-animate/components/timeline — choreography (v3.1).
+ * `timeline()` chains, overlaps, labels, seeks, reverses and scroll-scrubs
+ * WAAPI animations on one playhead; `<usa-timeline>` builds one from
+ * `data-tl` children.
+ */
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'usa-timeline': UsaTimelineElement;
+    }
+}
+
+type SwipeDirection = 'left' | 'right' | 'up' | 'down';
+
+/**
+ * `<usa-swipeable>` — swipe-to-dismiss / swipe actions. The content follows
+ * the finger (rubber-banded past `distance`), flies out on a swipe or a drag
+ * past `distance`, otherwise springs home with the release velocity.
+ *
+ * Attributes: `axis` (`x` default · `y`), `distance` (px, 120), `preset`
+ * (spring), `dismiss` (remove the element after flying out), `disabled`.
+ * Keyboard: Delete/Backspace dismisses, ←/→ swipe. Events `usa:swipe`
+ * (`{ direction }`, cancelable), `usa:dismiss`. Methods `swipe(dir)`, `reset()`.
+ * Reduced motion: no follow / fly-out animation, events still fire.
+ */
+interface UsaSwipeableElement extends UsaElement {
+    swipe(direction: SwipeDirection): void;
+    reset(): void;
+    readonly offset: number;
+}
+
+/**
+ * `<usa-pinch-zoom>` — pinch (two fingers or Ctrl/⌘ + wheel / trackpad
+ * pinch) to zoom its content, pan while zoomed, double-tap to toggle zoom;
+ * scale and position spring back inside the bounds on release.
+ *
+ * Attributes: `min` (1), `max` (4), `double-tap` (zoom level, 2), `preset`.
+ * Keyboard: `+` / `-` / `0`. Property `scale`, method `zoomTo(scale)`.
+ * Event `usa:zoom` (`{ scale }`). Reduced motion: zoom changes instantly.
+ */
+interface UsaPinchZoomElement extends UsaElement {
+    readonly scale: number;
+    zoomTo(scale: number): void;
+}
+
+/**
+ * use-scroll-animate/components/gesture — unified gestures (v3.2).
+ * `gesture()` recognises pan, swipe, pinch, long-press, tap and double-tap
+ * with release velocities for springs; `<usa-swipeable>` (swipe-to-dismiss)
+ * and `<usa-pinch-zoom>` are built on it.
+ */
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'usa-swipeable': UsaSwipeableElement;
+        'usa-pinch-zoom': UsaPinchZoomElement;
+    }
+}
+
 /** The component categories and their default tags. */
 declare const COMPONENT_CATEGORIES: {
     readonly reveal: readonly ["usa-reveal", "usa-stagger", "usa-scroll-progress", "usa-scrolly"];
@@ -1301,6 +1434,8 @@ declare const COMPONENT_CATEGORIES: {
     readonly click: readonly ["usa-click", "usa-button", "usa-icon-morph", "usa-like", "usa-hold", "usa-double-tap", "usa-checkbox"];
     readonly ui: readonly ["usa-tabs", "usa-drawer", "usa-bottom-sheet", "usa-pull-refresh", "usa-fab", "usa-navbar", "usa-slider", "usa-rating", "usa-tooltip", "usa-popover", "usa-badge", "usa-avatar-stack"];
     readonly page: readonly ["usa-cursor", "usa-fullpage", "usa-loading-bar", "usa-back-to-top", "usa-ambient", "usa-splash", "usa-auto-skeleton", "usa-motion-switch"];
+    readonly timeline: readonly ["usa-timeline"];
+    readonly gesture: readonly ["usa-swipeable", "usa-pinch-zoom"];
 };
 type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
 

package/dist/components/vue.js

@@ -1,19 +1,21 @@
 import { defineComponents } from '../components.js';
 import './reveal.js';
-import '../chunks/base-Co98Z2iM.js';
+import '../chunks/base-Cu-86Z31.js';
 import './text.js';
 import './interaction.js';
 import './feedback.js';
 import './background.js';
-import '../chunks/variants-Dp_5lJ_J.js';
+import '../chunks/variants-BQ3gCb5L.js';
 import './transitions.js';
 import './physics.js';
-import '../chunks/spring-YNUpez2g.js';
+import '../chunks/spring-BV-cpTHC.js';
 import './cards.js';
 import './click.js';
 import './ui.js';
 import './page.js';
-import '../chunks/index-tags-f37txHmb.js';
+import './timeline.js';
+import './gesture.js';
+import '../chunks/index-tags-DZ-gjMZc.js';
 
 /**
  * use-scroll-animate/components/vue — Vue integration (v2.9).

package/dist/components/vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"vue.js","sources":["../../src/components/frameworks/vue.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/vue — Vue integration (v2.9).\n *\n * ```js\n * // vite.config.js\n * import vue from '@vitejs/plugin-vue';\n * import { isUsaElement } from 'use-scroll-animate/components/vue';\n * export default { plugins: [vue({ template: { compilerOptions: { isCustomElement: isUsaElement } } })] };\n *\n * // main.js\n * import { UsaPlugin } from 'use-scroll-animate/components/vue';\n * app.use(UsaPlugin, { categories: ['click', 'cards'] });\n * ```\n * In templates, listen with `@usa:change=\"…\"` and bind properties with\n * `.prop`: `<usa-toggle :checked.prop=\"on\" @usa:change=\"on = $event.detail.checked\">`.\n */\nimport { defineComponents, type ComponentCategory } from '../index';\n\n/** `compilerOptions.isCustomElement` predicate for every `<usa-*>` tag. */\nexport const isUsaElement = (tag: string): boolean => tag.startsWith('usa-');\n\nexport interface UsaPluginOptions {\n  /** Only register these categories (default: all). */\n  categories?: ComponentCategory[];\n}\n\n/** Vue plugin: registers the `<usa-*>` elements (client only) and sets `isCustomElement` at runtime. */\nexport const UsaPlugin = {\n  install(app: { config: { compilerOptions?: { isCustomElement?: (t: string) => boolean } } }, options: UsaPluginOptions = {}): void {\n    const co = (app.config.compilerOptions ||= {});\n    const prev = co.isCustomElement;\n    co.isCustomElement = (t: string) => isUsaElement(t) || !!prev?.(t);\n    defineComponents(options.categories);\n  },\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;AAeG;AAGH;AACO,MAAM,YAAY,GAAG,CAAC,GAAW,KAAc,GAAG,CAAC,UAAU,CAAC,MAAM;AAO3E;AACO,MAAM,SAAS,GAAG;AACvB,IAAA,OAAO,CAAC,GAAmF,EAAE,OAAA,GAA4B,EAAE,EAAA;;AACzH,QAAA,MAAM,EAAE,IAAG,CAAA,EAAA,GAAC,GAAG,CAAC,MAAM,EAAC,eAAe,KAAA,EAAA,CAAf,eAAe,GAAK,EAAE,EAAC;AAC9C,QAAA,MAAM,IAAI,GAAG,EAAE,CAAC,eAAe;QAC/B,EAAE,CAAC,eAAe,GAAG,CAAC,CAAS,KAAK,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC;AAClE,QAAA,gBAAgB,CAAC,OAAO,CAAC,UAAU,CAAC;IACtC,CAAC;;;;;"}
+{"version":3,"file":"vue.js","sources":["../../src/components/frameworks/vue.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/vue — Vue integration (v2.9).\n *\n * ```js\n * // vite.config.js\n * import vue from '@vitejs/plugin-vue';\n * import { isUsaElement } from 'use-scroll-animate/components/vue';\n * export default { plugins: [vue({ template: { compilerOptions: { isCustomElement: isUsaElement } } })] };\n *\n * // main.js\n * import { UsaPlugin } from 'use-scroll-animate/components/vue';\n * app.use(UsaPlugin, { categories: ['click', 'cards'] });\n * ```\n * In templates, listen with `@usa:change=\"…\"` and bind properties with\n * `.prop`: `<usa-toggle :checked.prop=\"on\" @usa:change=\"on = $event.detail.checked\">`.\n */\nimport { defineComponents, type ComponentCategory } from '../index';\n\n/** `compilerOptions.isCustomElement` predicate for every `<usa-*>` tag. */\nexport const isUsaElement = (tag: string): boolean => tag.startsWith('usa-');\n\nexport interface UsaPluginOptions {\n  /** Only register these categories (default: all). */\n  categories?: ComponentCategory[];\n}\n\n/** Vue plugin: registers the `<usa-*>` elements (client only) and sets `isCustomElement` at runtime. */\nexport const UsaPlugin = {\n  install(app: { config: { compilerOptions?: { isCustomElement?: (t: string) => boolean } } }, options: UsaPluginOptions = {}): void {\n    const co = (app.config.compilerOptions ||= {});\n    const prev = co.isCustomElement;\n    co.isCustomElement = (t: string) => isUsaElement(t) || !!prev?.(t);\n    defineComponents(options.categories);\n  },\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;AAeG;AAGH;AACO,MAAM,YAAY,GAAG,CAAC,GAAW,KAAc,GAAG,CAAC,UAAU,CAAC,MAAM;AAO3E;AACO,MAAM,SAAS,GAAG;AACvB,IAAA,OAAO,CAAC,GAAmF,EAAE,OAAA,GAA4B,EAAE,EAAA;;AACzH,QAAA,MAAM,EAAE,IAAG,CAAA,EAAA,GAAC,GAAG,CAAC,MAAM,EAAC,eAAe,KAAA,EAAA,CAAf,eAAe,GAAK,EAAE,EAAC;AAC9C,QAAA,MAAM,IAAI,GAAG,EAAE,CAAC,eAAe;QAC/B,EAAE,CAAC,eAAe,GAAG,CAAC,CAAS,KAAK,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC;AAClE,QAAA,gBAAgB,CAAC,OAAO,CAAC,UAAU,CAAC;IACtC,CAAC;;;;;"}

package/dist/components.cjs

@@ -11,9 +11,11 @@ var components_cards = require('./components/cards.cjs');
 var components_click = require('./components/click.cjs');
 var components_ui = require('./components/ui.cjs');
 var components_page = require('./components/page.cjs');
+var components_timeline = require('./components/timeline.cjs');
+var components_gesture = require('./components/gesture.cjs');
 var variants = require('./chunks/variants-BNIrn4ch.cjs');
 var base = require('./chunks/base-CXx7jZ-o.cjs');
-var indexTags = require('./chunks/index-tags-BEM98giN.cjs');
+var indexTags = require('./chunks/index-tags-DCTX4F9b.cjs');
 var spring = require('./chunks/spring-2OTnYCzm.cjs');
 
 /**
@@ -48,6 +50,8 @@ const BY_CATEGORY = {
     click: components_click.defineClickComponents,
     ui: components_ui.defineUiComponents,
     page: components_page.definePageComponents,
+    timeline: components_timeline.defineTimelineComponents,
+    gesture: components_gesture.defineGestureComponents,
 };
 /**
  * Register every `<usa-*>` component (or only the given categories).
@@ -177,6 +181,17 @@ exports.setMotionIntensity = components_page.setMotionIntensity;
 exports.smoothScroll = components_page.smoothScroll;
 exports.supportsViewTransitions = components_page.supportsViewTransitions;
 exports.themeTransition = components_page.themeTransition;
+exports.TIMELINE_PRESETS = components_timeline.TIMELINE_PRESETS;
+exports.defineTimeline = components_timeline.defineTimeline;
+exports.defineTimelineComponents = components_timeline.defineTimelineComponents;
+exports.resolvePosition = components_timeline.resolvePosition;
+exports.timeline = components_timeline.timeline;
+exports.defineGestureComponents = components_gesture.defineGestureComponents;
+exports.definePinchZoom = components_gesture.definePinchZoom;
+exports.defineSwipeable = components_gesture.defineSwipeable;
+exports.gesture = components_gesture.gesture;
+exports.pinchScale = components_gesture.pinchScale;
+exports.swipeDirection = components_gesture.swipeDirection;
 exports.VARIANTS = variants.VARIANTS;
 exports.adoptVariants = variants.adoptVariants;
 exports.setVariant = variants.setVariant;

package/dist/components.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"components.cjs","sources":["../src/components/index.ts"],"sourcesContent":["/**\n * use-scroll-animate/components\n *\n * Framework-agnostic, dependency-free animated UI components built on\n * Custom Elements + CSS + the Web Animations API. They run in any browser\n * and in Windows desktop apps that render with a web view: Electron, Tauri\n * (WebView2), WinUI 3 / WPF / WinForms with WebView2, and installed PWAs.\n *\n * ```js\n * import { defineComponents } from 'use-scroll-animate/components';\n * defineComponents(); // registers every <usa-*> element\n * // or only what you use (tree-shakable):\n * import { defineTypewriter } from 'use-scroll-animate/components/text';\n * ```\n *\n * Importing has no side effects and is SSR-safe; nothing is registered\n * until a `define*()` function runs in a browser.\n *\n * @license MIT\n */\nimport { defineRevealComponents } from './reveal/index';\nimport { defineTextComponents } from './text/index';\nimport { defineInteractionComponents } from './interaction/index';\nimport { defineFeedbackComponents } from './feedback/index';\nimport { defineBackgroundComponents } from './background/index';\nimport { defineTransitionComponents } from './transitions/index';\nimport { definePhysicsComponents } from './physics/index';\nimport { defineCardComponents } from './cards/index';\nimport { defineClickComponents } from './click/index';\nimport { defineUiComponents } from './ui/index';\nimport { definePageComponents } from './page/index';\nimport { adoptVariants } from './ui/variants';\nimport { canDefine } from './base';\n\nexport * from './reveal/index';\nexport * from './text/index';\nexport * from './interaction/index';\nexport * from './feedback/index';\nexport * from './background/index';\nexport * from './transitions/index';\nexport * from './physics/index';\nexport * from './cards/index';\nexport * from './click/index';\nexport * from './ui/index';\nexport * from './page/index';\n\nexport { COMPONENT_CATEGORIES } from './index-tags';\nexport type { ComponentCategory } from './index-tags';\nimport { COMPONENT_CATEGORIES, type ComponentCategory } from './index-tags';\n\nconst BY_CATEGORY: Record<ComponentCategory, () => void> = {\n  reveal: defineRevealComponents,\n  text: defineTextComponents,\n  interaction: defineInteractionComponents,\n  feedback: defineFeedbackComponents,\n  background: defineBackgroundComponents,\n  transitions: defineTransitionComponents,\n  physics: definePhysicsComponents,\n  cards: defineCardComponents,\n  click: defineClickComponents,\n  ui: defineUiComponents,\n  page: definePageComponents,\n};\n\n/**\n * Register every `<usa-*>` component (or only the given categories).\n * Safe to call more than once and on the server (no-op without DOM).\n */\nexport function defineComponents(categories?: ComponentCategory[]): void {\n  if (canDefine()) adoptVariants();\n  (categories || (Object.keys(BY_CATEGORY) as ComponentCategory[])).forEach((c) => BY_CATEGORY[c]?.());\n}\n"],"names":["defineRevealComponents","defineTextComponents","defineInteractionComponents","defineFeedbackComponents","defineBackgroundComponents","defineTransitionComponents","definePhysicsComponents","defineCardComponents","defineClickComponents","defineUiComponents","definePageComponents","canDefine","adoptVariants"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;AAmBG;AA+BH,MAAM,WAAW,GAA0C;AACzD,IAAA,MAAM,EAAEA,wCAAsB;AAC9B,IAAA,IAAI,EAAEC,oCAAoB;AAC1B,IAAA,WAAW,EAAEC,kDAA2B;AACxC,IAAA,QAAQ,EAAEC,4CAAwB;AAClC,IAAA,UAAU,EAAEC,gDAA0B;AACtC,IAAA,WAAW,EAAEC,iDAA0B;AACvC,IAAA,OAAO,EAAEC,0CAAuB;AAChC,IAAA,KAAK,EAAEC,qCAAoB;AAC3B,IAAA,KAAK,EAAEC,sCAAqB;AAC5B,IAAA,EAAE,EAAEC,gCAAkB;AACtB,IAAA,IAAI,EAAEC,oCAAoB;CAC3B;AAED;;;AAGG;AACG,SAAU,gBAAgB,CAAC,UAAgC,EAAA;AAC/D,IAAA,IAAIC,cAAS,EAAE;AAAE,QAAAC,sBAAa,EAAE;IAChC,CAAC,UAAU,IAAK,MAAM,CAAC,IAAI,CAAC,WAAW,CAAyB,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC;AACtG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"components.cjs","sources":["../src/components/index.ts"],"sourcesContent":["/**\n * use-scroll-animate/components\n *\n * Framework-agnostic, dependency-free animated UI components built on\n * Custom Elements + CSS + the Web Animations API. They run in any browser\n * and in Windows desktop apps that render with a web view: Electron, Tauri\n * (WebView2), WinUI 3 / WPF / WinForms with WebView2, and installed PWAs.\n *\n * ```js\n * import { defineComponents } from 'use-scroll-animate/components';\n * defineComponents(); // registers every <usa-*> element\n * // or only what you use (tree-shakable):\n * import { defineTypewriter } from 'use-scroll-animate/components/text';\n * ```\n *\n * Importing has no side effects and is SSR-safe; nothing is registered\n * until a `define*()` function runs in a browser.\n *\n * @license MIT\n */\nimport { defineRevealComponents } from './reveal/index';\nimport { defineTextComponents } from './text/index';\nimport { defineInteractionComponents } from './interaction/index';\nimport { defineFeedbackComponents } from './feedback/index';\nimport { defineBackgroundComponents } from './background/index';\nimport { defineTransitionComponents } from './transitions/index';\nimport { definePhysicsComponents } from './physics/index';\nimport { defineCardComponents } from './cards/index';\nimport { defineClickComponents } from './click/index';\nimport { defineUiComponents } from './ui/index';\nimport { definePageComponents } from './page/index';\nimport { defineTimelineComponents } from './timeline/index';\nimport { defineGestureComponents } from './gesture/index';\nimport { adoptVariants } from './ui/variants';\nimport { canDefine } from './base';\n\nexport * from './reveal/index';\nexport * from './text/index';\nexport * from './interaction/index';\nexport * from './feedback/index';\nexport * from './background/index';\nexport * from './transitions/index';\nexport * from './physics/index';\nexport * from './cards/index';\nexport * from './click/index';\nexport * from './ui/index';\nexport * from './page/index';\nexport * from './timeline/index';\nexport * from './gesture/index';\n\nexport { COMPONENT_CATEGORIES } from './index-tags';\nexport type { ComponentCategory } from './index-tags';\nimport { COMPONENT_CATEGORIES, type ComponentCategory } from './index-tags';\n\nconst BY_CATEGORY: Record<ComponentCategory, () => void> = {\n  reveal: defineRevealComponents,\n  text: defineTextComponents,\n  interaction: defineInteractionComponents,\n  feedback: defineFeedbackComponents,\n  background: defineBackgroundComponents,\n  transitions: defineTransitionComponents,\n  physics: definePhysicsComponents,\n  cards: defineCardComponents,\n  click: defineClickComponents,\n  ui: defineUiComponents,\n  page: definePageComponents,\n  timeline: defineTimelineComponents,\n  gesture: defineGestureComponents,\n};\n\n/**\n * Register every `<usa-*>` component (or only the given categories).\n * Safe to call more than once and on the server (no-op without DOM).\n */\nexport function defineComponents(categories?: ComponentCategory[]): void {\n  if (canDefine()) adoptVariants();\n  (categories || (Object.keys(BY_CATEGORY) as ComponentCategory[])).forEach((c) => BY_CATEGORY[c]?.());\n}\n"],"names":["defineRevealComponents","defineTextComponents","defineInteractionComponents","defineFeedbackComponents","defineBackgroundComponents","defineTransitionComponents","definePhysicsComponents","defineCardComponents","defineClickComponents","defineUiComponents","definePageComponents","defineTimelineComponents","defineGestureComponents","canDefine","adoptVariants"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;AAmBG;AAmCH,MAAM,WAAW,GAA0C;AACzD,IAAA,MAAM,EAAEA,wCAAsB;AAC9B,IAAA,IAAI,EAAEC,oCAAoB;AAC1B,IAAA,WAAW,EAAEC,kDAA2B;AACxC,IAAA,QAAQ,EAAEC,4CAAwB;AAClC,IAAA,UAAU,EAAEC,gDAA0B;AACtC,IAAA,WAAW,EAAEC,iDAA0B;AACvC,IAAA,OAAO,EAAEC,0CAAuB;AAChC,IAAA,KAAK,EAAEC,qCAAoB;AAC3B,IAAA,KAAK,EAAEC,sCAAqB;AAC5B,IAAA,EAAE,EAAEC,gCAAkB;AACtB,IAAA,IAAI,EAAEC,oCAAoB;AAC1B,IAAA,QAAQ,EAAEC,4CAAwB;AAClC,IAAA,OAAO,EAAEC,0CAAuB;CACjC;AAED;;;AAGG;AACG,SAAU,gBAAgB,CAAC,UAAgC,EAAA;AAC/D,IAAA,IAAIC,cAAS,EAAE;AAAE,QAAAC,sBAAa,EAAE;IAChC,CAAC,UAAU,IAAK,MAAM,CAAC,IAAI,CAAC,WAAW,CAAyB,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC;AACtG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components.css

@@ -66,3 +66,5 @@ usa-loading-bar{--usa-loading:0;--usa-loading-h:3px;--usa-loading-color:var(--us
 usa-motion-switch{--usa-motion-i:2;position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:3px;border-radius:999px;background:color-mix(in srgb,currentColor 9%,transparent);isolation:isolate}usa-motion-switch button{position:relative;z-index:1;padding:6px 12px;border:0;background:none;color:inherit;font:inherit;font-size:0.85em;border-radius:999px;cursor:pointer}usa-motion-switch button[aria-checked="true"]{color:var(--usa-accent-text,#fff)}usa-motion-switch button:focus-visible{outline:2px solid var(--usa-accent,#7c5cff);outline-offset:1px}usa-motion-switch .usa-motion-thumb{position:absolute;z-index:0;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / 4);border-radius:999px;background:var(--usa-accent,#7c5cff);transform:translateX(calc(var(--usa-motion-i) * 100%));transition:transform 0.4s cubic-bezier(0.34,1.4,0.64,1)}@media (prefers-reduced-motion:reduce){usa-motion-switch .usa-motion-thumb{transition:none}}
 usa-splash{position:fixed;inset:0;z-index:2147483400;display:grid;place-items:center;background:var(--usa-splash-bg,var(--usa-surface,#0b0d12));color:var(--usa-text,#fff)}usa-splash[hidden]{display:none}
 ::view-transition-group(root){animation-duration:var(--usa-pt-duration,600ms)}html[data-usa-pt] ::view-transition-old(root),html[data-usa-pt] ::view-transition-new(root){animation-duration:var(--usa-pt-duration,600ms);animation-timing-function:cubic-bezier(0.22,1,0.36,1);mix-blend-mode:normal}html[data-usa-pt="slide"] ::view-transition-old(root),html[data-usa-pt="slide-left"] ::view-transition-old(root){animation-name:usa-pt-out-left}html[data-usa-pt="slide"] ::view-transition-new(root),html[data-usa-pt="slide-left"] ::view-transition-new(root){animation-name:usa-pt-in-right}html[data-usa-pt="slide-right"] ::view-transition-old(root){animation-name:usa-pt-out-right}html[data-usa-pt="slide-right"] ::view-transition-new(root){animation-name:usa-pt-in-left}html[data-usa-pt="slide-up"] ::view-transition-old(root){animation-name:usa-pt-out-up}html[data-usa-pt="slide-up"] ::view-transition-new(root){animation-name:usa-pt-in-up}html[data-usa-pt="zoom"] ::view-transition-old(root){animation-name:usa-pt-zoom-out}html[data-usa-pt="zoom"] ::view-transition-new(root){animation-name:usa-pt-zoom-in}html[data-usa-pt="circle"] ::view-transition-old(root){animation:none}html[data-usa-pt="circle"] ::view-transition-new(root){animation-name:usa-pt-circle}html[data-usa-pt="blinds"] ::view-transition-old(root){animation:none}html[data-usa-pt="blinds"] ::view-transition-new(root){animation-name:usa-pt-blinds;-webkit-mask-image:repeating-linear-gradient(to bottom,#000 0 var(--usa-blind),transparent var(--usa-blind) 10vh);mask-image:repeating-linear-gradient(to bottom,#000 0 var(--usa-blind),transparent var(--usa-blind) 10vh)}html[data-usa-pt="pixel"] ::view-transition-old(root){animation-name:usa-pt-pixel-out;animation-timing-function:steps(10,end)}html[data-usa-pt="pixel"] ::view-transition-new(root){animation-name:usa-pt-pixel-in;animation-timing-function:steps(10,end)}@property --usa-blind{syntax:"<length-percentage>";inherits:false;initial-value:0vh}@keyframes usa-pt-out-left{to{transform:translateX(-30%);opacity:0}}@keyframes usa-pt-in-right{from{transform:translateX(30%);opacity:0}}@keyframes usa-pt-out-right{to{transform:translateX(30%);opacity:0}}@keyframes usa-pt-in-left{from{transform:translateX(-30%);opacity:0}}@keyframes usa-pt-out-up{to{transform:translateY(-12%);opacity:0}}@keyframes usa-pt-in-up{from{transform:translateY(12%);opacity:0}}@keyframes usa-pt-zoom-out{to{transform:scale(0.92);opacity:0}}@keyframes usa-pt-zoom-in{from{transform:scale(1.08);opacity:0}}@keyframes usa-pt-circle{from{clip-path:circle(0 at var(--usa-pt-x,50%) var(--usa-pt-y,50%))}to{clip-path:circle(var(--usa-pt-r,150vmax) at var(--usa-pt-x,50%) var(--usa-pt-y,50%))}}@keyframes usa-pt-blinds{from{--usa-blind:0vh}to{--usa-blind:10vh}}@keyframes usa-pt-pixel-out{to{opacity:0;filter:blur(6px) contrast(1.4)}}@keyframes usa-pt-pixel-in{from{opacity:0;filter:blur(6px) contrast(1.4)}}@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}}
+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}}
+usa-swipeable{display:block;touch-action:pan-y;user-select:none;-webkit-user-select:none}usa-swipeable[axis="y"]{touch-action:pan-x}usa-swipeable>*{transform:translate3d(var(--usa-swipe,0px),0,0);opacity:calc(1 - var(--usa-swipe-p,0) * 0.5)}usa-swipeable[axis="y"]>*{transform:translate3d(0,var(--usa-swipe,0px),0)}usa-swipeable:focus-visible{outline:2px solid currentColor;outline-offset:2px}usa-pinch-zoom{display:block;overflow:hidden;touch-action:none;position:relative}usa-pinch-zoom>*{transform:translate3d(var(--usa-zoom-x,0px),var(--usa-zoom-y,0px),0) scale(var(--usa-zoom,1));transform-origin:50% 50%}usa-pinch-zoom[data-zoomed]{cursor:grab}usa-pinch-zoom:focus-visible{outline:2px solid currentColor;outline-offset:2px}