use-scroll-animate 8.8.0 → 9.0.0

package/dist/components/effects.d.cts

@@ -369,12 +369,12 @@ type DeepPartialTokens = {
  * ship with them: `neon-flicker`, `paper-fold`, `glass-shine`,
  * `retro-scanlines`, `brutal-shift`.
  *
- * - `applyTheme(name, root?)` — on `<html>` (default) it also makes the motion
+ * - `applyMotionTheme(name, root?)` — on `<html>` (default) it also makes the motion
  *   tokens active for `motionToken()`; on any other element the tokens are
  *   only written as variables there. Returns an undo.
  * - `themePreset(name, role)`, `playThemeEffect(el, role)` (theme of the
  *   closest `[data-usa-theme]`).
- * - `<usa-theme name="neon">` — scopes a theme to its subtree and binds the
+ * - `<usa-motion-theme name="neon">` — scopes a theme to its subtree and binds the
  *   presets to children with `data-theme-fx="click | hover | enter | attention"`.
  */
 
@@ -392,14 +392,14 @@ interface ThemePack {
         options?: Record<string, unknown>;
     }>;
 }
-declare const THEMES: Record<string, ThemePack>;
-declare const THEME_NAMES: string[];
+declare const MOTION_THEMES: Record<string, ThemePack>;
+declare const MOTION_THEME_NAMES: string[];
 /** The CSS custom properties of a theme (design + motion tokens). */
 declare function themeVars(t: string | ThemePack): Record<string, string>;
 /** A theme as a CSS rule (`selector` default `[data-usa-theme=<name>]`) — for SSR / static CSS. */
 declare function themeCss(t: string | ThemePack, selector?: string): string;
-/** Apply a theme to `root` (default `<html>`). Returns an undo. */
-declare function applyTheme(t: string | ThemePack, root?: HTMLElement): () => void;
+/** Apply a 5.8 motion theme to `root` (default `<html>`). Returns an undo (8.9). */
+declare function applyMotionTheme(t: string | ThemePack, root?: HTMLElement): () => void;
 /** The effect preset of a theme for a role. */
 declare function themePreset(t: string | ThemePack, role: ThemeRole): {
     effect: string;
@@ -412,7 +412,7 @@ interface UsaThemeElement extends UsaElement {
     readonly theme: string;
 }
 /** `<usa-theme name="neon | paper | glass | retro | brutalist">` — a themed subtree. */
-declare function defineTheme(tag?: string): CustomElementConstructor | undefined;
+declare function defineMotionTheme(tag?: string): CustomElementConstructor | undefined;
 
 interface AnimationTrack {
     /** Selector inside the player (`:scope` = the player). */
@@ -541,5 +541,5 @@ declare function defineEffectElements(): void;
 /** Register the built-ins and every pack (idempotent). */
 declare function registerAllEffects(): void;
 
-export { ANIMATION_FORMAT, AUDIO_FX, CARD_FX, CLICK_FX, CURSOR_FX, EFFECT_PACKS, GENERATIVE_FX, GESTURES, MICRO_FX, PAGE_FX, PHYSICS_FX, STORY_TEMPLATES, THEMES, THEME_FX, THEME_NAMES, THEME_ROLES, angleDelta, applyTheme, bindBeat, bindGesture, bounceKeyframes, bumpCount, canvasBackground, createBeatDetector, createPlayer, defineAudio, defineEffectElements, defineGestureFx, definePlayer, defineStory, defineTheme, disableAudio, enableAudio, flingVelocity, formatCount, fxLayer, getAudio, hexRgb, noise2, normalizeAnimation, onBeat, playThemeEffect, registerAllEffects, registerAudioEffects, registerCardClickEffects, registerCursorEffects, registerGenerativeEffects, registerMicroEffects, registerPageEffects, registerPhysicsEffects, solveSpring, springKeyframes, storyProgress, swapLabel, themeCss, themePreset, themeVars, togglePressed };
+export { ANIMATION_FORMAT, AUDIO_FX, CARD_FX, CLICK_FX, CURSOR_FX, EFFECT_PACKS, GENERATIVE_FX, GESTURES, MICRO_FX, MOTION_THEMES, MOTION_THEME_NAMES, PAGE_FX, PHYSICS_FX, STORY_TEMPLATES, THEME_FX, THEME_ROLES, angleDelta, applyMotionTheme, bindBeat, bindGesture, bounceKeyframes, bumpCount, canvasBackground, createBeatDetector, createPlayer, defineAudio, defineEffectElements, defineGestureFx, defineMotionTheme, definePlayer, defineStory, disableAudio, enableAudio, flingVelocity, formatCount, fxLayer, getAudio, hexRgb, noise2, normalizeAnimation, onBeat, playThemeEffect, registerAllEffects, registerAudioEffects, registerCardClickEffects, registerCursorEffects, registerGenerativeEffects, registerMicroEffects, registerPageEffects, registerPhysicsEffects, solveSpring, springKeyframes, storyProgress, swapLabel, themeCss, themePreset, themeVars, togglePressed };
 export type { AnimationJSON, AnimationTrack, AudioInput, AudioReactive, AudioSample, BeatOptions, GenFrame, GenerativeSpec, GestureDetail, GestureFxOptions, GestureName, Player, SpringOptions, StoryTemplate, ThemePack, ThemeRole, UsaAudioElement, UsaGestureFxElement, UsaPlayerElement, UsaStoryElement, UsaThemeElement };

package/dist/components/effects.d.ts

@@ -369,12 +369,12 @@ type DeepPartialTokens = {
  * ship with them: `neon-flicker`, `paper-fold`, `glass-shine`,
  * `retro-scanlines`, `brutal-shift`.
  *
- * - `applyTheme(name, root?)` — on `<html>` (default) it also makes the motion
+ * - `applyMotionTheme(name, root?)` — on `<html>` (default) it also makes the motion
  *   tokens active for `motionToken()`; on any other element the tokens are
  *   only written as variables there. Returns an undo.
  * - `themePreset(name, role)`, `playThemeEffect(el, role)` (theme of the
  *   closest `[data-usa-theme]`).
- * - `<usa-theme name="neon">` — scopes a theme to its subtree and binds the
+ * - `<usa-motion-theme name="neon">` — scopes a theme to its subtree and binds the
  *   presets to children with `data-theme-fx="click | hover | enter | attention"`.
  */
 
@@ -392,14 +392,14 @@ interface ThemePack {
         options?: Record<string, unknown>;
     }>;
 }
-declare const THEMES: Record<string, ThemePack>;
-declare const THEME_NAMES: string[];
+declare const MOTION_THEMES: Record<string, ThemePack>;
+declare const MOTION_THEME_NAMES: string[];
 /** The CSS custom properties of a theme (design + motion tokens). */
 declare function themeVars(t: string | ThemePack): Record<string, string>;
 /** A theme as a CSS rule (`selector` default `[data-usa-theme=<name>]`) — for SSR / static CSS. */
 declare function themeCss(t: string | ThemePack, selector?: string): string;
-/** Apply a theme to `root` (default `<html>`). Returns an undo. */
-declare function applyTheme(t: string | ThemePack, root?: HTMLElement): () => void;
+/** Apply a 5.8 motion theme to `root` (default `<html>`). Returns an undo (8.9). */
+declare function applyMotionTheme(t: string | ThemePack, root?: HTMLElement): () => void;
 /** The effect preset of a theme for a role. */
 declare function themePreset(t: string | ThemePack, role: ThemeRole): {
     effect: string;
@@ -412,7 +412,7 @@ interface UsaThemeElement extends UsaElement {
     readonly theme: string;
 }
 /** `<usa-theme name="neon | paper | glass | retro | brutalist">` — a themed subtree. */
-declare function defineTheme(tag?: string): CustomElementConstructor | undefined;
+declare function defineMotionTheme(tag?: string): CustomElementConstructor | undefined;
 
 interface AnimationTrack {
     /** Selector inside the player (`:scope` = the player). */
@@ -541,5 +541,5 @@ declare function defineEffectElements(): void;
 /** Register the built-ins and every pack (idempotent). */
 declare function registerAllEffects(): void;
 
-export { ANIMATION_FORMAT, AUDIO_FX, CARD_FX, CLICK_FX, CURSOR_FX, EFFECT_PACKS, GENERATIVE_FX, GESTURES, MICRO_FX, PAGE_FX, PHYSICS_FX, STORY_TEMPLATES, THEMES, THEME_FX, THEME_NAMES, THEME_ROLES, angleDelta, applyTheme, bindBeat, bindGesture, bounceKeyframes, bumpCount, canvasBackground, createBeatDetector, createPlayer, defineAudio, defineEffectElements, defineGestureFx, definePlayer, defineStory, defineTheme, disableAudio, enableAudio, flingVelocity, formatCount, fxLayer, getAudio, hexRgb, noise2, normalizeAnimation, onBeat, playThemeEffect, registerAllEffects, registerAudioEffects, registerCardClickEffects, registerCursorEffects, registerGenerativeEffects, registerMicroEffects, registerPageEffects, registerPhysicsEffects, solveSpring, springKeyframes, storyProgress, swapLabel, themeCss, themePreset, themeVars, togglePressed };
+export { ANIMATION_FORMAT, AUDIO_FX, CARD_FX, CLICK_FX, CURSOR_FX, EFFECT_PACKS, GENERATIVE_FX, GESTURES, MICRO_FX, MOTION_THEMES, MOTION_THEME_NAMES, PAGE_FX, PHYSICS_FX, STORY_TEMPLATES, THEME_FX, THEME_ROLES, angleDelta, applyMotionTheme, bindBeat, bindGesture, bounceKeyframes, bumpCount, canvasBackground, createBeatDetector, createPlayer, defineAudio, defineEffectElements, defineGestureFx, defineMotionTheme, definePlayer, defineStory, disableAudio, enableAudio, flingVelocity, formatCount, fxLayer, getAudio, hexRgb, noise2, normalizeAnimation, onBeat, playThemeEffect, registerAllEffects, registerAudioEffects, registerCardClickEffects, registerCursorEffects, registerGenerativeEffects, registerMicroEffects, registerPageEffects, registerPhysicsEffects, solveSpring, springKeyframes, storyProgress, swapLabel, themeCss, themePreset, themeVars, togglePressed };
 export type { AnimationJSON, AnimationTrack, AudioInput, AudioReactive, AudioSample, BeatOptions, GenFrame, GenerativeSpec, GestureDetail, GestureFxOptions, GestureName, Player, SpringOptions, StoryTemplate, ThemePack, ThemeRole, UsaAudioElement, UsaGestureFxElement, UsaPlayerElement, UsaStoryElement, UsaThemeElement };

package/dist/components/effects.js

@@ -1125,7 +1125,7 @@ const P = (enter, hover, click, attention, background) => ({
     attention: { effect: attention },
     background: { effect: background },
 });
-const THEMES = {
+const MOTION_THEMES = {
     neon: {
         name: 'neon',
         vars: { bg: '#07070c', fg: '#e8e8ff', accent: '#22d3ee', 'accent-2': '#ff2bd6', surface: '#11111c', border: '1px solid #22d3ee', radius: '10px', shadow: '0 0 18px #22d3ee66, inset 0 0 12px #ff2bd622', font: 'ui-monospace, SFMono-Regular, Menlo, monospace' },
@@ -1157,15 +1157,15 @@ const THEMES = {
         presets: P('drop-bounce', 'jelly', 'brutal-shift', 'shake', 'voronoi'),
     },
 };
-const THEME_NAMES = Object.keys(THEMES);
+const MOTION_THEME_NAMES = Object.keys(MOTION_THEMES);
 const BASE_CSS = `[data-usa-theme]{background:var(--usa-theme-bg);color:var(--usa-theme-fg);font-family:var(--usa-theme-font)}
 [data-usa-theme] .usa-surface{background:var(--usa-theme-surface);border:var(--usa-theme-border);border-radius:var(--usa-theme-radius);box-shadow:var(--usa-theme-shadow)}
 [data-usa-theme] .usa-accent{color:var(--usa-theme-accent)}
 [data-usa-theme=glass] .usa-surface{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}`;
 const pack = (t) => {
-    const p = typeof t === 'string' ? THEMES[t] : t;
+    const p = typeof t === 'string' ? MOTION_THEMES[t] : t;
     if (!p)
-        throw new Error(`[motionary] unknown theme "${String(t)}" — ${THEME_NAMES.join(', ')}`);
+        throw new Error(`[motionary] unknown theme "${String(t)}" — ${MOTION_THEME_NAMES.join(', ')}`);
     return p;
 };
 /** The CSS custom properties of a theme (design + motion tokens). */
@@ -1181,8 +1181,8 @@ function themeCss(t, selector) {
     const p = pack(t);
     return `${selector || `[data-usa-theme=${p.name}]`}{${Object.entries(themeVars(p)).map(([k, v]) => `${k}:${v}`).join(';')}}`;
 }
-/** Apply a theme to `root` (default `<html>`). Returns an undo. */
-function applyTheme(t, root) {
+/** Apply a 5.8 motion theme to `root` (default `<html>`). Returns an undo (8.9). */
+function applyMotionTheme(t, root) {
     const p = pack(t);
     const el = root || document.documentElement;
     adoptStyles('usa-theme', BASE_CSS);
@@ -1271,17 +1271,17 @@ const THEME_FX = [
     },
 ];
 /** `<usa-theme name="neon | paper | glass | retro | brutalist">` — a themed subtree. */
-function defineTheme(tag = 'usa-theme') {
+function defineMotionTheme(tag = 'usa-motion-theme') {
     return defineElement(tag, (Base) => class UsaTheme extends Base {
         static get observedAttributes() {
             return ['name'];
         }
         get theme() {
             const n = this.str('name', 'neon');
-            return THEMES[n] ? n : 'neon';
+            return MOTION_THEMES[n] ? n : 'neon';
         }
         mount() {
-            this.onCleanup(applyTheme(this.theme, this));
+            this.onCleanup(applyMotionTheme(this.theme, this));
             this.querySelectorAll('[data-theme-fx]').forEach((el) => {
                 const role = (el.dataset.themeFx || 'click');
                 if (!THEME_ROLES.includes(role))
@@ -1356,7 +1356,7 @@ function defineEffectElements() {
     defineStory();
     defineAudio();
     defineGestureFx();
-    defineTheme();
+    defineMotionTheme();
     definePlayer();
 }
 /** Register the built-ins and every pack (idempotent). */
@@ -1366,5 +1366,5 @@ function registerAllEffects() {
         registerEffects(defs);
 }
 
-export { AUDIO_FX, CARD_FX, CLICK_FX, CURSOR_FX, EFFECT_PACKS, GENERATIVE_FX, GESTURES, MICRO_FX, PAGE_FX, PHYSICS_FX, THEMES, THEME_FX, THEME_NAMES, THEME_ROLES, angleDelta, applyTheme, bindGesture, bounceKeyframes, bumpCount, canvasBackground, defineAudio, defineEffectElements, defineGestureFx, definePlayer, defineStory, defineTheme, flingVelocity, fxLayer, hexRgb, playThemeEffect, registerAllEffects, registerAudioEffects, registerCardClickEffects, registerCursorEffects, registerGenerativeEffects, registerMicroEffects, registerPageEffects, registerPhysicsEffects, solveSpring, springKeyframes, swapLabel, themeCss, themePreset, themeVars, togglePressed };
+export { AUDIO_FX, CARD_FX, CLICK_FX, CURSOR_FX, EFFECT_PACKS, GENERATIVE_FX, GESTURES, MICRO_FX, MOTION_THEMES, MOTION_THEME_NAMES, PAGE_FX, PHYSICS_FX, THEME_FX, THEME_ROLES, angleDelta, applyMotionTheme, bindGesture, bounceKeyframes, bumpCount, canvasBackground, defineAudio, defineEffectElements, defineGestureFx, defineMotionTheme, definePlayer, defineStory, flingVelocity, fxLayer, hexRgb, playThemeEffect, registerAllEffects, registerAudioEffects, registerCardClickEffects, registerCursorEffects, registerGenerativeEffects, registerMicroEffects, registerPageEffects, registerPhysicsEffects, solveSpring, springKeyframes, swapLabel, themeCss, themePreset, themeVars, togglePressed };
 //# sourceMappingURL=effects.js.map