use-scroll-animate 2.6.0 → 2.7.0

package/dist/components.css

@@ -54,3 +54,12 @@ usa-slider{--usa-slider:0;position:relative;display:block;height:28px;min-width:
 usa-tabs{display:block;font-family:var(--usa-font)}usa-tabs .usa-tabs-list{position:relative;display:flex;gap:4px;border-bottom:1px solid color-mix(in srgb,currentColor 14%,transparent)}usa-tabs [role="tab"]{position:relative;z-index:1;padding:10px 14px;border:0;background:none;color:inherit;font:inherit;cursor:pointer;opacity:0.7;transition:opacity 0.2s ease,color 0.2s ease;border-radius:calc(var(--usa-radius,14px) / 2)}usa-tabs [role="tab"][aria-selected="true"]{opacity:1;color:var(--usa-accent,#7c5cff)}usa-tabs [role="tab"]:focus-visible{outline:2px solid var(--usa-accent,#7c5cff);outline-offset:-2px}usa-tabs .usa-tabs-indicator{position:absolute;left:0;bottom:-1px;height:3px;width:0;border-radius:3px;background:var(--usa-accent,#7c5cff);pointer-events:none}usa-tabs[indicator="pill"] .usa-tabs-list{border-bottom:0;padding:4px;border-radius:999px;background:color-mix(in srgb,currentColor 8%,transparent)}usa-tabs[indicator="pill"] .usa-tabs-indicator{top:4px;bottom:4px;height:auto;border-radius:999px;opacity:0.18}usa-tabs [role="tabpanel"]{padding:14px 2px}usa-tabs [role="tabpanel"]:focus-visible{outline:2px solid var(--usa-accent,#7c5cff);outline-offset:2px;border-radius:6px}
 usa-tooltip{display:inline-block}usa-tooltip .usa-tooltip-bubble{position:fixed;z-index:2000;max-width:260px;padding:6px 10px;font-size:0.85rem;line-height:1.4;pointer-events:none;--usa-radius:8px;white-space:normal}usa-tooltip .usa-tooltip-bubble[hidden]{display:none}
 :root{--usa-accent:#7c5cff;--usa-accent-text:#fff;--usa-surface:#1b1e27;--usa-text:inherit;--usa-radius:14px;--usa-border:1px solid rgb(127 127 127 / 0.25);--usa-shadow:0 10px 30px -12px rgb(0 0 0 / 0.45);--usa-blur:0px;--usa-font:inherit}:where([variant="minimal"],[data-usa-variant="minimal"]){--usa-accent:currentColor;--usa-accent-text:Canvas;--usa-surface:transparent;--usa-radius:6px;--usa-border:1px solid color-mix(in srgb,currentColor 22%,transparent);--usa-shadow:none;--usa-blur:0px}:where([variant="neon"],[data-usa-variant="neon"]){--usa-accent:#00f0ff;--usa-accent-text:#04121a;--usa-surface:#0a0b14;--usa-text:#e6fbff;--usa-radius:10px;--usa-border:1px solid #00f0ff;--usa-shadow:0 0 6px #00f0ff,0 0 22px rgb(0 240 255 / 0.45);--usa-blur:0px}:where([variant="glass"],[data-usa-variant="glass"]){--usa-accent:#a78bfa;--usa-accent-text:#fff;--usa-surface:rgb(255 255 255 / 0.12);--usa-radius:18px;--usa-border:1px solid rgb(255 255 255 / 0.28);--usa-shadow:0 12px 40px -12px rgb(0 0 0 / 0.35);--usa-blur:16px}:where([variant="brutalist"],[data-usa-variant="brutalist"]){--usa-accent:#ff3d00;--usa-accent-text:#000;--usa-surface:#fff;--usa-text:#000;--usa-radius:0px;--usa-border:3px solid #000;--usa-shadow:5px 5px 0 #000;--usa-blur:0px;--usa-font:ui-monospace,"SFMono-Regular",Menlo,monospace}:where([variant="fluent"],[data-usa-variant="fluent"]){--usa-accent:#0067c0;--usa-accent-text:#fff;--usa-surface:rgb(249 249 249 / 0.82);--usa-text:#1a1a1a;--usa-radius:8px;--usa-border:1px solid rgb(0 0 0 / 0.08);--usa-shadow:0 2px 4px rgb(0 0 0 / 0.14),0 0 2px rgb(0 0 0 / 0.12);--usa-blur:30px;--usa-font:"Segoe UI Variable","Segoe UI",system-ui,sans-serif}:where([variant="material"],[data-usa-variant="material"]){--usa-accent:#6750a4;--usa-accent-text:#fff;--usa-surface:#fffbfe;--usa-text:#1c1b1f;--usa-radius:20px;--usa-border:0 solid transparent;--usa-shadow:0 1px 3px rgb(0 0 0 / 0.3),0 4px 8px 3px rgb(0 0 0 / 0.15);--usa-blur:0px;--usa-font:Roboto,system-ui,sans-serif}@media (prefers-color-scheme:dark){:where([variant="fluent"],[data-usa-variant="fluent"]){--usa-accent:#4cc2ff;--usa-accent-text:#000;--usa-surface:rgb(44 44 44 / 0.8);--usa-text:#fff;--usa-border:1px solid rgb(255 255 255 / 0.08)}:where([variant="material"],[data-usa-variant="material"]){--usa-accent:#d0bcff;--usa-accent-text:#381e72;--usa-surface:#1c1b1f;--usa-text:#e6e1e5}}.usa-surface{background:var(--usa-surface);color:var(--usa-text);border:var(--usa-border);border-radius:var(--usa-radius);box-shadow:var(--usa-shadow);font-family:var(--usa-font);-webkit-backdrop-filter:blur(var(--usa-blur));backdrop-filter:blur(var(--usa-blur))}@media (prefers-reduced-transparency:reduce){.usa-surface{-webkit-backdrop-filter:none;backdrop-filter:none}}
+usa-ambient{--usa-ambient-opacity:0.6;--usa-ambient-p:0;position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--usa-ambient-opacity);contain:strict}usa-ambient[layer="front"]{z-index:2147483000}usa-ambient canvas{display:block}usa-ambient[effect="noise"]{opacity:calc(var(--usa-ambient-opacity) * 0.25);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:usa-ambient-grain 0.6s steps(4) infinite;mix-blend-mode:overlay}@keyframes usa-ambient-grain{25%{background-position:-40px 20px}50%{background-position:30px -50px}75%{background-position:-20px -30px}}usa-ambient[effect="gradient"]{background:linear-gradient(135deg,hsl(calc(250 + var(--usa-ambient-p) * 140) 85% 60%),hsl(calc(190 + var(--usa-ambient-p) * 160) 85% 55%) 50%,hsl(calc(320 + var(--usa-ambient-p) * 90) 85% 62%))}@media (prefers-reduced-motion:reduce){usa-ambient[effect="noise"]{animation:none}}
+usa-auto-skeleton{display:block;--usa-skel-base:color-mix(in srgb,currentColor 10%,transparent);--usa-skel-shine:color-mix(in srgb,currentColor 18%,transparent)}usa-auto-skeleton[loading] :is(h1,h2,h3,h4,h5,h6,p,li,span,a,button,label,img,svg,video,input,select,textarea,td,th,figcaption,blockquote,[data-skeleton]):not([data-no-skeleton]):not(:has(:is(h1,h2,h3,h4,h5,h6,p,li,img,button,input))){color:transparent !important;border-color:transparent !important;box-shadow:none !important;user-select:none;pointer-events:none;background:linear-gradient(90deg,var(--usa-skel-base) 25%,var(--usa-skel-shine) 50%,var(--usa-skel-base) 75%) 0 0 / 300% 100% !important;border-radius:6px;animation:usa-skel-shimmer 1.4s ease-in-out infinite}usa-auto-skeleton[loading] :is(img,svg,video){opacity:0}usa-auto-skeleton[loading] :is(img,svg,video):not([data-no-skeleton]){opacity:1;object-position:-9999px}@keyframes usa-skel-shimmer{from{background-position:100% 0}to{background-position:0 0}}@media (prefers-reduced-motion:reduce){usa-auto-skeleton[loading] *{animation:none !important}}
+usa-back-to-top{--usa-btt:0;position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:850;opacity:0;transform:translateY(16px) scale(0.8);pointer-events:none;transition:opacity 0.25s ease,transform 0.4s cubic-bezier(0.34,1.56,0.64,1)}usa-back-to-top[position="bottom-left"]{right:auto;left:max(20px,env(safe-area-inset-left))}usa-back-to-top[data-visible]{opacity:1;transform:none;pointer-events:auto}usa-back-to-top button{width:48px;height:48px;padding:0;border:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;color:var(--usa-accent,#7c5cff);background:var(--usa-surface,#1b1e27);box-shadow:var(--usa-shadow,0 8px 24px -10px rgb(0 0 0 / 0.5))}usa-back-to-top svg{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}usa-back-to-top circle{stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--usa-btt) * 100);transform:rotate(-90deg);transform-origin:50% 50%;opacity:0.85}usa-back-to-top button:focus-visible{outline:2px solid var(--usa-accent,#7c5cff);outline-offset:3px}@media (prefers-reduced-motion:reduce){usa-back-to-top{transition:opacity 0.2s ease;transform:none}}
+usa-cursor{--usa-cursor-color:var(--usa-accent,#7c5cff);--usa-cursor-size:28px;position:fixed;inset:0;pointer-events:none;z-index:2147483600;opacity:0;transition:opacity 0.2s ease;contain:strict}usa-cursor[data-active]{opacity:1}usa-cursor .usa-cursor-ring{position:absolute;left:0;top:0;width:var(--usa-cursor-size);height:var(--usa-cursor-size);margin:calc(var(--usa-cursor-size) / -2) 0 0 calc(var(--usa-cursor-size) / -2);border:1.5px solid var(--usa-cursor-color);border-radius:999px;box-sizing:border-box;transition:width 0.25s cubic-bezier(0.34,1.56,0.64,1),height 0.25s cubic-bezier(0.34,1.56,0.64,1),margin 0.25s ease,border-radius 0.25s ease,background-color 0.2s ease;will-change:transform}usa-cursor[mode="trail"] .usa-cursor-ring{border:0;background:var(--usa-cursor-color);width:calc(var(--usa-cursor-size) * (0.45 - var(--i) * 0.04));height:calc(var(--usa-cursor-size) * (0.45 - var(--i) * 0.04));margin:calc(var(--usa-cursor-size) * (0.45 - var(--i) * 0.04) / -2) 0 0 calc(var(--usa-cursor-size) * (0.45 - var(--i) * 0.04) / -2);opacity:calc(1 - var(--i) * 0.11)}usa-cursor[data-hover] .usa-cursor-ring:first-child{width:calc(var(--usa-cursor-size) * 1.6);height:calc(var(--usa-cursor-size) * 1.6);margin:calc(var(--usa-cursor-size) * -0.8) 0 0 calc(var(--usa-cursor-size) * -0.8);background:color-mix(in srgb,var(--usa-cursor-color) 15%,transparent)}usa-cursor[data-snapped] .usa-cursor-ring{border-radius:12px;background:color-mix(in srgb,var(--usa-cursor-color) 12%,transparent);translate:-50% -50%;margin:0}usa-cursor[data-down] .usa-cursor-ring:first-child{scale:0.8}usa-cursor .usa-cursor-dot{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--usa-cursor-color)}usa-cursor[data-snapped] .usa-cursor-dot{opacity:0}usa-cursor .usa-cursor-glow{position:absolute;left:-200px;top:-200px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--usa-cursor-color) 35%,transparent),transparent 65%);mix-blend-mode:screen}.usa-cursor-none,.usa-cursor-none *{cursor:none !important}@media (pointer:coarse),(prefers-reduced-motion:reduce){usa-cursor{display:none}.usa-cursor-none,.usa-cursor-none *{cursor:auto !important}}
+usa-fullpage{position:relative;display:block;height:100vh;height:100dvh;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;outline:none}usa-fullpage[axis="x"]{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory}usa-fullpage .usa-fullpage-section{box-sizing:border-box;min-height:100%;scroll-snap-align:start;scroll-snap-stop:always}usa-fullpage[axis="x"] .usa-fullpage-section{flex:0 0 100%}usa-fullpage .usa-fullpage-dots{position:sticky;float:right;top:50%;margin-right:16px;transform:translateY(-50%);display:grid;gap:10px;z-index:5}usa-fullpage .usa-fullpage-dots button{width:10px;height:10px;padding:0;border-radius:50%;border:0;cursor:pointer;background:color-mix(in srgb,currentColor 35%,transparent);transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1),background-color 0.2s ease}usa-fullpage .usa-fullpage-dots button[aria-current]{background:var(--usa-accent,#7c5cff);transform:scale(1.5)}
+usa-loading-bar{--usa-loading:0;--usa-loading-h:3px;--usa-loading-color:var(--usa-accent,#7c5cff);position:fixed;left:0;right:0;top:0;height:var(--usa-loading-h);z-index:2147483500;pointer-events:none;opacity:0;transition:opacity 0.3s ease}usa-loading-bar[position="bottom"]{top:auto;bottom:0}usa-loading-bar[data-active]{opacity:1}usa-loading-bar .usa-loading-bar-fill{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--usa-loading));background:var(--usa-loading-color);box-shadow:0 0 10px var(--usa-loading-color);transition:transform 0.2s ease-out}@media (prefers-reduced-motion:reduce){usa-loading-bar .usa-loading-bar-fill{transition:none}}
+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}}

package/dist/components.d.cts

@@ -20,9 +20,20 @@ interface ComponentsConfig {
      * `'no-preference'` ignores the OS setting (only for demos — respect your users).
      */
     reducedMotion?: 'user' | 'reduce' | 'no-preference';
+    /**
+     * Global motion intensity (v2.7): `'off'` (same as reduced motion),
+     * `'low'` (shorter, calmer), `'normal'` (default) or `'high'`. Scales every
+     * component animation's duration and sets `--usa-motion` (0 / 0.6 / 1 /
+     * 1.25) on `<html>` for your own CSS. See `setMotionIntensity()`.
+     */
+    motionIntensity?: MotionIntensity;
 }
+type MotionIntensity = 'off' | 'low' | 'normal' | 'high';
+declare const MOTION_SCALE: Record<MotionIntensity, number>;
 /** Change global component settings (call before `define*()` for `injectStyles`). */
 declare function configureComponents(options: ComponentsConfig): void;
+/** The current global motion intensity. */
+declare function getMotionIntensity(): MotionIntensity;
 /** `true` when animations should be reduced (OS setting or `configureComponents`). */
 declare function prefersReducedMotion(): boolean;
 /**
@@ -1424,6 +1435,231 @@ declare global {
     }
 }
 
+declare const CURSOR_MODES: readonly ["dot", "trail", "magnetic", "glow"];
+type CursorMode = (typeof CURSOR_MODES)[number];
+/**
+ * `<usa-cursor mode="dot | trail | magnetic | glow">` — a custom cursor for
+ * the page (place it once, e.g. at the end of `<body>`).
+ * - `dot` — a ring that follows with spring lag around the real pointer;
+ * - `trail` — a comet tail of dots;
+ * - `magnetic` — the ring snaps onto and wraps hovered targets (`a`,
+ *   `button`, `[data-cursor]`);
+ * - `glow` — a large soft light following the pointer (great on dark UIs).
+ * Attributes: `mode`, `color`, `size` (px, 28), `hide-native` (hide the
+ * system cursor), `targets` (selector, magnetic). Only for fine pointers
+ * (mouse / pen); never on touch. Reduced motion: not rendered.
+ */
+interface UsaCursorElement extends UsaElement {
+    readonly active: boolean;
+}
+declare function defineCursor(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-fullpage>` — full-screen sections (its element children) that snap
+ * one at a time (CSS scroll snap), with keyboard paging (PageUp/PageDown,
+ * arrows, Home/End), optional dot navigation and the current section in
+ * `aria-current` + `usa:section`.
+ * Attributes: `dots` (show the dot nav), `axis` (`y` default, `x`).
+ * Methods: `go(i)`, `next()`, `prev()`. Reduced motion: snapping stays,
+ * jumps are instant.
+ */
+interface UsaFullpageElement extends UsaElement {
+    readonly index: number;
+    go(i: number): void;
+    next(): void;
+    prev(): void;
+}
+declare function defineFullpage(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-loading-bar>` — a slim top loading bar for route changes and fetches
+ * (NProgress-style): `start()` trickles towards 90 %, `done()` completes and
+ * fades out, `set(0–1)` for real progress. `loadingBar` drives the first bar
+ * on the page (created on demand). `role="progressbar"`, `aria-busy`.
+ * Attributes: `color`, `height` (px, 3), `position` (`top` default, `bottom`).
+ * Reduced motion: no trickle animation — the bar shows / hides.
+ */
+interface UsaLoadingBarElement extends UsaElement {
+    readonly progress: number;
+    start(): void;
+    set(p: number): void;
+    done(): void;
+}
+declare function defineLoadingBar(tag?: string): CustomElementConstructor | undefined;
+/** Drive the page's `<usa-loading-bar>` (created on first use). */
+declare const loadingBar: {
+    start: () => void;
+    set: (p: number) => void;
+    done: () => void;
+    /** Run `task` with the bar shown; resolves with its result. */
+    track<T>(task: Promise<T> | (() => Promise<T>)): Promise<T>;
+};
+
+/**
+ * `<usa-back-to-top>` — a floating button that appears after `offset` px
+ * (300) of scrolling, shows page progress as a ring and springs the page
+ * back to the top (then focuses `focus-target`, default `#main` / `body`).
+ * Attributes: `offset`, `label` ("Back to top"), `focus-target`, `position`
+ * (`bottom-right` default, `bottom-left`). Reduced motion: instant jump.
+ */
+interface UsaBackToTopElement extends UsaElement {
+    readonly visible: boolean;
+}
+declare function defineBackToTop(tag?: string): CustomElementConstructor | undefined;
+
+declare const AMBIENT_EFFECTS: readonly ["particles", "snow", "stars", "noise", "gradient"];
+type AmbientEffect = (typeof AMBIENT_EFFECTS)[number];
+/**
+ * `<usa-ambient effect="particles | snow | stars | noise | gradient">` — a
+ * fixed, page-wide ambient layer behind (or, with `layer="front"`, over)
+ * the content, never catching the pointer.
+ * - `particles` — slow drifting dots; `snow` — falling flakes with sway;
+ *   `stars` — twinkling starfield (canvas, paused in hidden tabs, DPR ≤ 2);
+ * - `noise` — animated film grain (CSS, SVG turbulence);
+ * - `gradient` — a gradient whose hue shifts with the scroll position.
+ * Attributes: `effect`, `density` (0.2–3, 1), `color`, `opacity` (0.6),
+ * `layer` (`back` default, `front`), `speed` (1). Reduced motion: one
+ * static frame (no falling, twinkling or grain flicker).
+ */
+interface UsaAmbientElement extends UsaElement {
+}
+declare function defineAmbient(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-splash>` — an app splash / launch screen: shows its content (logo,
+ * spinner) over the page, then leaves with `exit` (`fade` default, `scale`,
+ * `slide-up`, `circle`) once the page has loaded (or when you call
+ * `done()`), but never sooner than `min` ms (600) — no flash.
+ * Attributes: `min`, `exit`, `manual` (wait for `done()`), `label`.
+ * Events: `usa:done`. The page underneath is `aria-busy` until then.
+ * Reduced motion: fades.
+ */
+interface UsaSplashElement extends UsaElement {
+    done(): Promise<void>;
+}
+declare function defineSplash(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-auto-skeleton loading>` — automatic skeletons: while `loading` is
+ * set, every text block, image, button and input inside is drawn as a
+ * shimmering placeholder of its own size — no separate skeleton markup.
+ * Remove `loading` (or set `.loading = false`) and the content fades in.
+ * `aria-busy` while loading. Opt elements out with `data-no-skeleton`.
+ * Reduced motion: static placeholders, no shimmer or fade.
+ */
+interface UsaAutoSkeletonElement extends UsaElement {
+    loading: boolean;
+}
+declare function defineAutoSkeleton(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * Set the global motion intensity for every `<usa-*>` component:
+ * `'off'` (like reduced motion), `'low'`, `'normal'` (default), `'high'`.
+ * Sets `--usa-motion` and `data-usa-motion` on `<html>`; with `persist`
+ * the choice is remembered (localStorage) and restored by `restoreMotionIntensity()`.
+ */
+declare function setMotionIntensity(level: MotionIntensity, persist?: boolean): void;
+/** Re-apply a persisted intensity (call early on page load). Returns it. */
+declare function restoreMotionIntensity(): MotionIntensity;
+/**
+ * `<usa-motion-switch>` — a segmented control letting users choose the
+ * app's motion intensity (Off · Low · Normal · High), persisted.
+ * `role="radiogroup"`; arrow keys move. Attributes: `labels` (comma list),
+ * `label` ("Motion"). Events: `usa:change` (`{ level }`).
+ */
+interface UsaMotionSwitchElement extends UsaElement {
+    value: MotionIntensity;
+}
+declare function defineMotionSwitch(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * Page & app-wide transitions (v2.7), built on the View Transitions API
+ * (Chromium: Chrome, Edge, Electron, WebView2) with graceful fallbacks.
+ *
+ * - `pageTransition(update, { effect })` — SPA route changes: `fade`,
+ *   `slide` (`slide-left` / `slide-right` / `slide-up`), `circle` (reveal
+ *   from `x`, `y`), `blinds`, `pixel` (stepped dissolve), `zoom`.
+ * - `enableMpaTransitions(effect)` — the same effects for multi-page sites
+ *   (`@view-transition { navigation: auto }`); call it on every page.
+ * - `themeTransition(apply, { x, y })` — a circle-reveal theme switch.
+ *
+ * Without View Transitions (Firefox, older Safari) or under reduced motion
+ * the update runs immediately (`fade` falls back to a short cross-fade of
+ * `fallback` when given).
+ */
+declare const PAGE_EFFECTS: readonly ["fade", "slide", "slide-left", "slide-right", "slide-up", "circle", "blinds", "pixel", "zoom"];
+type PageEffect = (typeof PAGE_EFFECTS)[number];
+interface PageTransitionOptions {
+    effect?: PageEffect;
+    /** Circle origin in client px (default: viewport centre / last pointer). */
+    x?: number;
+    y?: number;
+    /** Duration in ms (default 600). */
+    duration?: number;
+    /** Element to cross-fade when View Transitions are unavailable. */
+    fallback?: Element | null;
+}
+/** `true` when `document.startViewTransition` exists. */
+declare const supportsViewTransitions: () => boolean;
+/** Run `update` (sync or async) as an animated page transition. Resolves when it is done. */
+declare function pageTransition(update: () => unknown, options?: PageTransitionOptions): Promise<void>;
+/** Opt a multi-page site into cross-document view transitions with `effect`. */
+declare function enableMpaTransitions(effect?: PageEffect, duration?: number): void;
+/**
+ * Switch theme with a circle reveal from (`x`, `y`) (default: last pointer).
+ * `apply` flips your theme (e.g. toggles a class / `data-theme`).
+ */
+declare function themeTransition(apply: () => unknown, options?: Omit<PageTransitionOptions, 'effect'>): Promise<void>;
+
+/**
+ * `smoothScroll()` — inertial wheel smoothing for the page (or a scroll
+ * container): wheel deltas are eased with a lerp each frame. Touch and
+ * keyboard scrolling stay native. Returns a function that turns it off.
+ * No-op under reduced motion, on touch-only devices and on the server.
+ */
+interface SmoothScrollOptions {
+    /** Scroll container (default: the page). */
+    target?: HTMLElement | null;
+    /** 0–1, lower = smoother / longer glide (default 0.12). */
+    lerp?: number;
+    /** Wheel multiplier (default 1). */
+    wheelMultiplier?: number;
+}
+declare function smoothScroll(options?: SmoothScrollOptions): () => void;
+/**
+ * Scroll to a y position, element or selector with spring timing (or
+ * instantly under reduced motion). Resolves when done.
+ */
+declare function scrollToTarget(to: number | Element | string, options?: {
+    offset?: number;
+    target?: HTMLElement | null;
+    preset?: string;
+}): Promise<void>;
+
+/**
+ * use-scroll-animate/components/page — page & app-wide effects (v2.7).
+ * Page transitions (`pageTransition()`, `enableMpaTransitions()`,
+ * `themeTransition()`), `<usa-cursor>`, `smoothScroll()` / `scrollToTarget()`,
+ * `<usa-fullpage>`, `<usa-loading-bar>` + `loadingBar`, `<usa-back-to-top>`,
+ * `<usa-ambient>`, `<usa-splash>`, `<usa-auto-skeleton>` and the global motion
+ * intensity (`setMotionIntensity()`, `<usa-motion-switch>`).
+ */
+
+/** Register every component of this category under its default tag. */
+declare function definePageComponents(): void;
+declare global {
+    interface HTMLElementTagNameMap {
+        'usa-cursor': UsaCursorElement;
+        'usa-fullpage': UsaFullpageElement;
+        'usa-loading-bar': UsaLoadingBarElement;
+        'usa-back-to-top': UsaBackToTopElement;
+        'usa-ambient': UsaAmbientElement;
+        'usa-splash': UsaSplashElement;
+        'usa-auto-skeleton': UsaAutoSkeletonElement;
+        'usa-motion-switch': UsaMotionSwitchElement;
+    }
+}
+
 /** The component categories and their default tags. */
 declare const COMPONENT_CATEGORIES: {
     readonly reveal: readonly ["usa-reveal", "usa-stagger", "usa-scroll-progress", "usa-scrolly"];
@@ -1436,6 +1672,7 @@ declare const COMPONENT_CATEGORIES: {
     readonly cards: readonly ["usa-card", "usa-card-stack", "usa-sticky-stack", "usa-carousel-3d"];
     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"];
 };
 type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
 /**
@@ -1444,5 +1681,5 @@ type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
  */
 declare function defineComponents(categories?: ComponentCategory[]): void;
 
-export { BUTTON_DEFORMS, CARD_EFFECTS, CLICK_EFFECTS, COMPONENT_CATEGORIES, MORPH_ICONS, REVEAL_EFFECTS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, VARIANTS, adoptVariants, burst, confetti, configureComponents, connectedAnimation, createSpring, defineAccordion, defineAcrylic, defineAurora, defineAvatarStack, defineBackgroundComponents, defineBadge, defineBottomSheet, defineButton, defineCard, defineCardComponents, defineCardStack, defineCarousel3d, defineCheck, defineCheckbox, defineClick, defineClickComponents, defineComponents, defineCounter, defineDialog, defineDoubleTap, defineDraggable, defineDrawer, defineFab, defineFeedbackComponents, defineFlipList, defineGrain, defineHold, defineIconMorph, defineInteractionComponents, defineLike, defineMagnetic, defineMarquee, defineNavbar, defineOverscroll, defineParticles, definePhysicsComponents, definePopover, definePress, defineProgress, definePullRefresh, defineRating, defineReveal, defineRevealComponents, defineRipple, defineScramble, defineScrollProgress, defineScrolly, defineShimmerText, defineSkeleton, defineSlider, defineSpinner, defineSplitText, defineSpotlight, defineSpring, defineStagger, defineStickyStack, defineTabs, defineTextComponents, defineTextRotate, defineTilt, defineToaster, defineToggle, defineTooltip, defineTransitionComponents, defineTypewriter, defineUiComponents, defineViewSwitch, easeOutExpo, flip, haptic, linearEasing, morphPath, prefersReducedMotion, projectInertia, readScrollProgress, resolveSpring, revealKeyframes, rubberBand, scrambleFrame, setVariant, shake, snapTo, spring, springEasing, springEffectKeyframes, springSamples, stepSpring, supportsLinearEasing, toast, viewTransition };
-export type { BurstOptions, ButtonDeform, ButtonShape, ButtonState, CardEffect, ClickEffect, ComponentCategory, ComponentsConfig, ConfettiOptions, ConnectedOptions, DialogVariant, FlipOptions, Placement, RevealEffect, SpinnerVariant, SpringConfig, SpringEffect, SpringInput, SpringPreset, SpringValue, SpringValueOptions, ToastHandle, ToastOptions, ToastType, UsaAccordionElement, UsaAcrylicElement, UsaAuroraElement, UsaAvatarStackElement, UsaBadgeElement, UsaBottomSheetElement, UsaButtonElement, UsaCardElement, UsaCardStackElement, UsaCarousel3dElement, UsaCheckElement, UsaCheckboxElement, UsaClickElement, UsaCounterElement, UsaDialogElement, UsaDoubleTapElement, UsaDraggableElement, UsaDrawerElement, UsaElement, UsaFabElement, UsaFlipListElement, UsaGrainElement, UsaHoldElement, UsaIconMorphElement, UsaLikeElement, UsaMagneticElement, UsaMarqueeElement, UsaNavbarElement, UsaOverscrollElement, UsaParticlesElement, UsaPopoverElement, UsaPressElement, UsaProgressElement, UsaPullRefreshElement, UsaRatingElement, UsaRevealElement, UsaRippleElement, UsaScrambleElement, UsaScrollProgressElement, UsaScrollyElement, UsaShimmerTextElement, UsaSkeletonElement, UsaSliderElement, UsaSpinnerElement, UsaSplitTextElement, UsaSpotlightElement, UsaSpringElement, UsaStaggerElement, UsaStickyStackElement, UsaTabsElement, UsaTextRotateElement, UsaTiltElement, UsaToasterElement, UsaToggleElement, UsaTooltipElement, UsaTypewriterElement, UsaViewSwitchElement, Variant, ViewTransitionOptions };
+export { AMBIENT_EFFECTS, BUTTON_DEFORMS, CARD_EFFECTS, CLICK_EFFECTS, COMPONENT_CATEGORIES, CURSOR_MODES, MORPH_ICONS, MOTION_SCALE, PAGE_EFFECTS, REVEAL_EFFECTS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, VARIANTS, adoptVariants, burst, confetti, configureComponents, connectedAnimation, createSpring, defineAccordion, defineAcrylic, defineAmbient, defineAurora, defineAutoSkeleton, defineAvatarStack, defineBackToTop, defineBackgroundComponents, defineBadge, defineBottomSheet, defineButton, defineCard, defineCardComponents, defineCardStack, defineCarousel3d, defineCheck, defineCheckbox, defineClick, defineClickComponents, defineComponents, defineCounter, defineCursor, defineDialog, defineDoubleTap, defineDraggable, defineDrawer, defineFab, defineFeedbackComponents, defineFlipList, defineFullpage, defineGrain, defineHold, defineIconMorph, defineInteractionComponents, defineLike, defineLoadingBar, defineMagnetic, defineMarquee, defineMotionSwitch, defineNavbar, defineOverscroll, definePageComponents, defineParticles, definePhysicsComponents, definePopover, definePress, defineProgress, definePullRefresh, defineRating, defineReveal, defineRevealComponents, defineRipple, defineScramble, defineScrollProgress, defineScrolly, defineShimmerText, defineSkeleton, defineSlider, defineSpinner, defineSplash, defineSplitText, defineSpotlight, defineSpring, defineStagger, defineStickyStack, defineTabs, defineTextComponents, defineTextRotate, defineTilt, defineToaster, defineToggle, defineTooltip, defineTransitionComponents, defineTypewriter, defineUiComponents, defineViewSwitch, easeOutExpo, enableMpaTransitions, flip, getMotionIntensity, haptic, linearEasing, loadingBar, morphPath, pageTransition, prefersReducedMotion, projectInertia, readScrollProgress, resolveSpring, restoreMotionIntensity, revealKeyframes, rubberBand, scrambleFrame, scrollToTarget, setMotionIntensity, setVariant, shake, smoothScroll, snapTo, spring, springEasing, springEffectKeyframes, springSamples, stepSpring, supportsLinearEasing, supportsViewTransitions, themeTransition, toast, viewTransition };
+export type { AmbientEffect, BurstOptions, ButtonDeform, ButtonShape, ButtonState, CardEffect, ClickEffect, ComponentCategory, ComponentsConfig, ConfettiOptions, ConnectedOptions, CursorMode, DialogVariant, FlipOptions, MotionIntensity, PageEffect, PageTransitionOptions, Placement, RevealEffect, SmoothScrollOptions, SpinnerVariant, SpringConfig, SpringEffect, SpringInput, SpringPreset, SpringValue, SpringValueOptions, ToastHandle, ToastOptions, ToastType, UsaAccordionElement, UsaAcrylicElement, UsaAmbientElement, UsaAuroraElement, UsaAutoSkeletonElement, UsaAvatarStackElement, UsaBackToTopElement, UsaBadgeElement, UsaBottomSheetElement, UsaButtonElement, UsaCardElement, UsaCardStackElement, UsaCarousel3dElement, UsaCheckElement, UsaCheckboxElement, UsaClickElement, UsaCounterElement, UsaCursorElement, UsaDialogElement, UsaDoubleTapElement, UsaDraggableElement, UsaDrawerElement, UsaElement, UsaFabElement, UsaFlipListElement, UsaFullpageElement, UsaGrainElement, UsaHoldElement, UsaIconMorphElement, UsaLikeElement, UsaLoadingBarElement, UsaMagneticElement, UsaMarqueeElement, UsaMotionSwitchElement, UsaNavbarElement, UsaOverscrollElement, UsaParticlesElement, UsaPopoverElement, UsaPressElement, UsaProgressElement, UsaPullRefreshElement, UsaRatingElement, UsaRevealElement, UsaRippleElement, UsaScrambleElement, UsaScrollProgressElement, UsaScrollyElement, UsaShimmerTextElement, UsaSkeletonElement, UsaSliderElement, UsaSpinnerElement, UsaSplashElement, UsaSplitTextElement, UsaSpotlightElement, UsaSpringElement, UsaStaggerElement, UsaStickyStackElement, UsaTabsElement, UsaTextRotateElement, UsaTiltElement, UsaToasterElement, UsaToggleElement, UsaTooltipElement, UsaTypewriterElement, UsaViewSwitchElement, Variant, ViewTransitionOptions };

package/dist/components.d.ts

@@ -20,9 +20,20 @@ interface ComponentsConfig {
      * `'no-preference'` ignores the OS setting (only for demos — respect your users).
      */
     reducedMotion?: 'user' | 'reduce' | 'no-preference';
+    /**
+     * Global motion intensity (v2.7): `'off'` (same as reduced motion),
+     * `'low'` (shorter, calmer), `'normal'` (default) or `'high'`. Scales every
+     * component animation's duration and sets `--usa-motion` (0 / 0.6 / 1 /
+     * 1.25) on `<html>` for your own CSS. See `setMotionIntensity()`.
+     */
+    motionIntensity?: MotionIntensity;
 }
+type MotionIntensity = 'off' | 'low' | 'normal' | 'high';
+declare const MOTION_SCALE: Record<MotionIntensity, number>;
 /** Change global component settings (call before `define*()` for `injectStyles`). */
 declare function configureComponents(options: ComponentsConfig): void;
+/** The current global motion intensity. */
+declare function getMotionIntensity(): MotionIntensity;
 /** `true` when animations should be reduced (OS setting or `configureComponents`). */
 declare function prefersReducedMotion(): boolean;
 /**
@@ -1424,6 +1435,231 @@ declare global {
     }
 }
 
+declare const CURSOR_MODES: readonly ["dot", "trail", "magnetic", "glow"];
+type CursorMode = (typeof CURSOR_MODES)[number];
+/**
+ * `<usa-cursor mode="dot | trail | magnetic | glow">` — a custom cursor for
+ * the page (place it once, e.g. at the end of `<body>`).
+ * - `dot` — a ring that follows with spring lag around the real pointer;
+ * - `trail` — a comet tail of dots;
+ * - `magnetic` — the ring snaps onto and wraps hovered targets (`a`,
+ *   `button`, `[data-cursor]`);
+ * - `glow` — a large soft light following the pointer (great on dark UIs).
+ * Attributes: `mode`, `color`, `size` (px, 28), `hide-native` (hide the
+ * system cursor), `targets` (selector, magnetic). Only for fine pointers
+ * (mouse / pen); never on touch. Reduced motion: not rendered.
+ */
+interface UsaCursorElement extends UsaElement {
+    readonly active: boolean;
+}
+declare function defineCursor(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-fullpage>` — full-screen sections (its element children) that snap
+ * one at a time (CSS scroll snap), with keyboard paging (PageUp/PageDown,
+ * arrows, Home/End), optional dot navigation and the current section in
+ * `aria-current` + `usa:section`.
+ * Attributes: `dots` (show the dot nav), `axis` (`y` default, `x`).
+ * Methods: `go(i)`, `next()`, `prev()`. Reduced motion: snapping stays,
+ * jumps are instant.
+ */
+interface UsaFullpageElement extends UsaElement {
+    readonly index: number;
+    go(i: number): void;
+    next(): void;
+    prev(): void;
+}
+declare function defineFullpage(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-loading-bar>` — a slim top loading bar for route changes and fetches
+ * (NProgress-style): `start()` trickles towards 90 %, `done()` completes and
+ * fades out, `set(0–1)` for real progress. `loadingBar` drives the first bar
+ * on the page (created on demand). `role="progressbar"`, `aria-busy`.
+ * Attributes: `color`, `height` (px, 3), `position` (`top` default, `bottom`).
+ * Reduced motion: no trickle animation — the bar shows / hides.
+ */
+interface UsaLoadingBarElement extends UsaElement {
+    readonly progress: number;
+    start(): void;
+    set(p: number): void;
+    done(): void;
+}
+declare function defineLoadingBar(tag?: string): CustomElementConstructor | undefined;
+/** Drive the page's `<usa-loading-bar>` (created on first use). */
+declare const loadingBar: {
+    start: () => void;
+    set: (p: number) => void;
+    done: () => void;
+    /** Run `task` with the bar shown; resolves with its result. */
+    track<T>(task: Promise<T> | (() => Promise<T>)): Promise<T>;
+};
+
+/**
+ * `<usa-back-to-top>` — a floating button that appears after `offset` px
+ * (300) of scrolling, shows page progress as a ring and springs the page
+ * back to the top (then focuses `focus-target`, default `#main` / `body`).
+ * Attributes: `offset`, `label` ("Back to top"), `focus-target`, `position`
+ * (`bottom-right` default, `bottom-left`). Reduced motion: instant jump.
+ */
+interface UsaBackToTopElement extends UsaElement {
+    readonly visible: boolean;
+}
+declare function defineBackToTop(tag?: string): CustomElementConstructor | undefined;
+
+declare const AMBIENT_EFFECTS: readonly ["particles", "snow", "stars", "noise", "gradient"];
+type AmbientEffect = (typeof AMBIENT_EFFECTS)[number];
+/**
+ * `<usa-ambient effect="particles | snow | stars | noise | gradient">` — a
+ * fixed, page-wide ambient layer behind (or, with `layer="front"`, over)
+ * the content, never catching the pointer.
+ * - `particles` — slow drifting dots; `snow` — falling flakes with sway;
+ *   `stars` — twinkling starfield (canvas, paused in hidden tabs, DPR ≤ 2);
+ * - `noise` — animated film grain (CSS, SVG turbulence);
+ * - `gradient` — a gradient whose hue shifts with the scroll position.
+ * Attributes: `effect`, `density` (0.2–3, 1), `color`, `opacity` (0.6),
+ * `layer` (`back` default, `front`), `speed` (1). Reduced motion: one
+ * static frame (no falling, twinkling or grain flicker).
+ */
+interface UsaAmbientElement extends UsaElement {
+}
+declare function defineAmbient(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-splash>` — an app splash / launch screen: shows its content (logo,
+ * spinner) over the page, then leaves with `exit` (`fade` default, `scale`,
+ * `slide-up`, `circle`) once the page has loaded (or when you call
+ * `done()`), but never sooner than `min` ms (600) — no flash.
+ * Attributes: `min`, `exit`, `manual` (wait for `done()`), `label`.
+ * Events: `usa:done`. The page underneath is `aria-busy` until then.
+ * Reduced motion: fades.
+ */
+interface UsaSplashElement extends UsaElement {
+    done(): Promise<void>;
+}
+declare function defineSplash(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-auto-skeleton loading>` — automatic skeletons: while `loading` is
+ * set, every text block, image, button and input inside is drawn as a
+ * shimmering placeholder of its own size — no separate skeleton markup.
+ * Remove `loading` (or set `.loading = false`) and the content fades in.
+ * `aria-busy` while loading. Opt elements out with `data-no-skeleton`.
+ * Reduced motion: static placeholders, no shimmer or fade.
+ */
+interface UsaAutoSkeletonElement extends UsaElement {
+    loading: boolean;
+}
+declare function defineAutoSkeleton(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * Set the global motion intensity for every `<usa-*>` component:
+ * `'off'` (like reduced motion), `'low'`, `'normal'` (default), `'high'`.
+ * Sets `--usa-motion` and `data-usa-motion` on `<html>`; with `persist`
+ * the choice is remembered (localStorage) and restored by `restoreMotionIntensity()`.
+ */
+declare function setMotionIntensity(level: MotionIntensity, persist?: boolean): void;
+/** Re-apply a persisted intensity (call early on page load). Returns it. */
+declare function restoreMotionIntensity(): MotionIntensity;
+/**
+ * `<usa-motion-switch>` — a segmented control letting users choose the
+ * app's motion intensity (Off · Low · Normal · High), persisted.
+ * `role="radiogroup"`; arrow keys move. Attributes: `labels` (comma list),
+ * `label` ("Motion"). Events: `usa:change` (`{ level }`).
+ */
+interface UsaMotionSwitchElement extends UsaElement {
+    value: MotionIntensity;
+}
+declare function defineMotionSwitch(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * Page & app-wide transitions (v2.7), built on the View Transitions API
+ * (Chromium: Chrome, Edge, Electron, WebView2) with graceful fallbacks.
+ *
+ * - `pageTransition(update, { effect })` — SPA route changes: `fade`,
+ *   `slide` (`slide-left` / `slide-right` / `slide-up`), `circle` (reveal
+ *   from `x`, `y`), `blinds`, `pixel` (stepped dissolve), `zoom`.
+ * - `enableMpaTransitions(effect)` — the same effects for multi-page sites
+ *   (`@view-transition { navigation: auto }`); call it on every page.
+ * - `themeTransition(apply, { x, y })` — a circle-reveal theme switch.
+ *
+ * Without View Transitions (Firefox, older Safari) or under reduced motion
+ * the update runs immediately (`fade` falls back to a short cross-fade of
+ * `fallback` when given).
+ */
+declare const PAGE_EFFECTS: readonly ["fade", "slide", "slide-left", "slide-right", "slide-up", "circle", "blinds", "pixel", "zoom"];
+type PageEffect = (typeof PAGE_EFFECTS)[number];
+interface PageTransitionOptions {
+    effect?: PageEffect;
+    /** Circle origin in client px (default: viewport centre / last pointer). */
+    x?: number;
+    y?: number;
+    /** Duration in ms (default 600). */
+    duration?: number;
+    /** Element to cross-fade when View Transitions are unavailable. */
+    fallback?: Element | null;
+}
+/** `true` when `document.startViewTransition` exists. */
+declare const supportsViewTransitions: () => boolean;
+/** Run `update` (sync or async) as an animated page transition. Resolves when it is done. */
+declare function pageTransition(update: () => unknown, options?: PageTransitionOptions): Promise<void>;
+/** Opt a multi-page site into cross-document view transitions with `effect`. */
+declare function enableMpaTransitions(effect?: PageEffect, duration?: number): void;
+/**
+ * Switch theme with a circle reveal from (`x`, `y`) (default: last pointer).
+ * `apply` flips your theme (e.g. toggles a class / `data-theme`).
+ */
+declare function themeTransition(apply: () => unknown, options?: Omit<PageTransitionOptions, 'effect'>): Promise<void>;
+
+/**
+ * `smoothScroll()` — inertial wheel smoothing for the page (or a scroll
+ * container): wheel deltas are eased with a lerp each frame. Touch and
+ * keyboard scrolling stay native. Returns a function that turns it off.
+ * No-op under reduced motion, on touch-only devices and on the server.
+ */
+interface SmoothScrollOptions {
+    /** Scroll container (default: the page). */
+    target?: HTMLElement | null;
+    /** 0–1, lower = smoother / longer glide (default 0.12). */
+    lerp?: number;
+    /** Wheel multiplier (default 1). */
+    wheelMultiplier?: number;
+}
+declare function smoothScroll(options?: SmoothScrollOptions): () => void;
+/**
+ * Scroll to a y position, element or selector with spring timing (or
+ * instantly under reduced motion). Resolves when done.
+ */
+declare function scrollToTarget(to: number | Element | string, options?: {
+    offset?: number;
+    target?: HTMLElement | null;
+    preset?: string;
+}): Promise<void>;
+
+/**
+ * use-scroll-animate/components/page — page & app-wide effects (v2.7).
+ * Page transitions (`pageTransition()`, `enableMpaTransitions()`,
+ * `themeTransition()`), `<usa-cursor>`, `smoothScroll()` / `scrollToTarget()`,
+ * `<usa-fullpage>`, `<usa-loading-bar>` + `loadingBar`, `<usa-back-to-top>`,
+ * `<usa-ambient>`, `<usa-splash>`, `<usa-auto-skeleton>` and the global motion
+ * intensity (`setMotionIntensity()`, `<usa-motion-switch>`).
+ */
+
+/** Register every component of this category under its default tag. */
+declare function definePageComponents(): void;
+declare global {
+    interface HTMLElementTagNameMap {
+        'usa-cursor': UsaCursorElement;
+        'usa-fullpage': UsaFullpageElement;
+        'usa-loading-bar': UsaLoadingBarElement;
+        'usa-back-to-top': UsaBackToTopElement;
+        'usa-ambient': UsaAmbientElement;
+        'usa-splash': UsaSplashElement;
+        'usa-auto-skeleton': UsaAutoSkeletonElement;
+        'usa-motion-switch': UsaMotionSwitchElement;
+    }
+}
+
 /** The component categories and their default tags. */
 declare const COMPONENT_CATEGORIES: {
     readonly reveal: readonly ["usa-reveal", "usa-stagger", "usa-scroll-progress", "usa-scrolly"];
@@ -1436,6 +1672,7 @@ declare const COMPONENT_CATEGORIES: {
     readonly cards: readonly ["usa-card", "usa-card-stack", "usa-sticky-stack", "usa-carousel-3d"];
     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"];
 };
 type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
 /**
@@ -1444,5 +1681,5 @@ type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
  */
 declare function defineComponents(categories?: ComponentCategory[]): void;
 
-export { BUTTON_DEFORMS, CARD_EFFECTS, CLICK_EFFECTS, COMPONENT_CATEGORIES, MORPH_ICONS, REVEAL_EFFECTS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, VARIANTS, adoptVariants, burst, confetti, configureComponents, connectedAnimation, createSpring, defineAccordion, defineAcrylic, defineAurora, defineAvatarStack, defineBackgroundComponents, defineBadge, defineBottomSheet, defineButton, defineCard, defineCardComponents, defineCardStack, defineCarousel3d, defineCheck, defineCheckbox, defineClick, defineClickComponents, defineComponents, defineCounter, defineDialog, defineDoubleTap, defineDraggable, defineDrawer, defineFab, defineFeedbackComponents, defineFlipList, defineGrain, defineHold, defineIconMorph, defineInteractionComponents, defineLike, defineMagnetic, defineMarquee, defineNavbar, defineOverscroll, defineParticles, definePhysicsComponents, definePopover, definePress, defineProgress, definePullRefresh, defineRating, defineReveal, defineRevealComponents, defineRipple, defineScramble, defineScrollProgress, defineScrolly, defineShimmerText, defineSkeleton, defineSlider, defineSpinner, defineSplitText, defineSpotlight, defineSpring, defineStagger, defineStickyStack, defineTabs, defineTextComponents, defineTextRotate, defineTilt, defineToaster, defineToggle, defineTooltip, defineTransitionComponents, defineTypewriter, defineUiComponents, defineViewSwitch, easeOutExpo, flip, haptic, linearEasing, morphPath, prefersReducedMotion, projectInertia, readScrollProgress, resolveSpring, revealKeyframes, rubberBand, scrambleFrame, setVariant, shake, snapTo, spring, springEasing, springEffectKeyframes, springSamples, stepSpring, supportsLinearEasing, toast, viewTransition };
-export type { BurstOptions, ButtonDeform, ButtonShape, ButtonState, CardEffect, ClickEffect, ComponentCategory, ComponentsConfig, ConfettiOptions, ConnectedOptions, DialogVariant, FlipOptions, Placement, RevealEffect, SpinnerVariant, SpringConfig, SpringEffect, SpringInput, SpringPreset, SpringValue, SpringValueOptions, ToastHandle, ToastOptions, ToastType, UsaAccordionElement, UsaAcrylicElement, UsaAuroraElement, UsaAvatarStackElement, UsaBadgeElement, UsaBottomSheetElement, UsaButtonElement, UsaCardElement, UsaCardStackElement, UsaCarousel3dElement, UsaCheckElement, UsaCheckboxElement, UsaClickElement, UsaCounterElement, UsaDialogElement, UsaDoubleTapElement, UsaDraggableElement, UsaDrawerElement, UsaElement, UsaFabElement, UsaFlipListElement, UsaGrainElement, UsaHoldElement, UsaIconMorphElement, UsaLikeElement, UsaMagneticElement, UsaMarqueeElement, UsaNavbarElement, UsaOverscrollElement, UsaParticlesElement, UsaPopoverElement, UsaPressElement, UsaProgressElement, UsaPullRefreshElement, UsaRatingElement, UsaRevealElement, UsaRippleElement, UsaScrambleElement, UsaScrollProgressElement, UsaScrollyElement, UsaShimmerTextElement, UsaSkeletonElement, UsaSliderElement, UsaSpinnerElement, UsaSplitTextElement, UsaSpotlightElement, UsaSpringElement, UsaStaggerElement, UsaStickyStackElement, UsaTabsElement, UsaTextRotateElement, UsaTiltElement, UsaToasterElement, UsaToggleElement, UsaTooltipElement, UsaTypewriterElement, UsaViewSwitchElement, Variant, ViewTransitionOptions };
+export { AMBIENT_EFFECTS, BUTTON_DEFORMS, CARD_EFFECTS, CLICK_EFFECTS, COMPONENT_CATEGORIES, CURSOR_MODES, MORPH_ICONS, MOTION_SCALE, PAGE_EFFECTS, REVEAL_EFFECTS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, VARIANTS, adoptVariants, burst, confetti, configureComponents, connectedAnimation, createSpring, defineAccordion, defineAcrylic, defineAmbient, defineAurora, defineAutoSkeleton, defineAvatarStack, defineBackToTop, defineBackgroundComponents, defineBadge, defineBottomSheet, defineButton, defineCard, defineCardComponents, defineCardStack, defineCarousel3d, defineCheck, defineCheckbox, defineClick, defineClickComponents, defineComponents, defineCounter, defineCursor, defineDialog, defineDoubleTap, defineDraggable, defineDrawer, defineFab, defineFeedbackComponents, defineFlipList, defineFullpage, defineGrain, defineHold, defineIconMorph, defineInteractionComponents, defineLike, defineLoadingBar, defineMagnetic, defineMarquee, defineMotionSwitch, defineNavbar, defineOverscroll, definePageComponents, defineParticles, definePhysicsComponents, definePopover, definePress, defineProgress, definePullRefresh, defineRating, defineReveal, defineRevealComponents, defineRipple, defineScramble, defineScrollProgress, defineScrolly, defineShimmerText, defineSkeleton, defineSlider, defineSpinner, defineSplash, defineSplitText, defineSpotlight, defineSpring, defineStagger, defineStickyStack, defineTabs, defineTextComponents, defineTextRotate, defineTilt, defineToaster, defineToggle, defineTooltip, defineTransitionComponents, defineTypewriter, defineUiComponents, defineViewSwitch, easeOutExpo, enableMpaTransitions, flip, getMotionIntensity, haptic, linearEasing, loadingBar, morphPath, pageTransition, prefersReducedMotion, projectInertia, readScrollProgress, resolveSpring, restoreMotionIntensity, revealKeyframes, rubberBand, scrambleFrame, scrollToTarget, setMotionIntensity, setVariant, shake, smoothScroll, snapTo, spring, springEasing, springEffectKeyframes, springSamples, stepSpring, supportsLinearEasing, supportsViewTransitions, themeTransition, toast, viewTransition };
+export type { AmbientEffect, BurstOptions, ButtonDeform, ButtonShape, ButtonState, CardEffect, ClickEffect, ComponentCategory, ComponentsConfig, ConfettiOptions, ConnectedOptions, CursorMode, DialogVariant, FlipOptions, MotionIntensity, PageEffect, PageTransitionOptions, Placement, RevealEffect, SmoothScrollOptions, SpinnerVariant, SpringConfig, SpringEffect, SpringInput, SpringPreset, SpringValue, SpringValueOptions, ToastHandle, ToastOptions, ToastType, UsaAccordionElement, UsaAcrylicElement, UsaAmbientElement, UsaAuroraElement, UsaAutoSkeletonElement, UsaAvatarStackElement, UsaBackToTopElement, UsaBadgeElement, UsaBottomSheetElement, UsaButtonElement, UsaCardElement, UsaCardStackElement, UsaCarousel3dElement, UsaCheckElement, UsaCheckboxElement, UsaClickElement, UsaCounterElement, UsaCursorElement, UsaDialogElement, UsaDoubleTapElement, UsaDraggableElement, UsaDrawerElement, UsaElement, UsaFabElement, UsaFlipListElement, UsaFullpageElement, UsaGrainElement, UsaHoldElement, UsaIconMorphElement, UsaLikeElement, UsaLoadingBarElement, UsaMagneticElement, UsaMarqueeElement, UsaMotionSwitchElement, UsaNavbarElement, UsaOverscrollElement, UsaParticlesElement, UsaPopoverElement, UsaPressElement, UsaProgressElement, UsaPullRefreshElement, UsaRatingElement, UsaRevealElement, UsaRippleElement, UsaScrambleElement, UsaScrollProgressElement, UsaScrollyElement, UsaShimmerTextElement, UsaSkeletonElement, UsaSliderElement, UsaSpinnerElement, UsaSplashElement, UsaSplitTextElement, UsaSpotlightElement, UsaSpringElement, UsaStaggerElement, UsaStickyStackElement, UsaTabsElement, UsaTextRotateElement, UsaTiltElement, UsaToasterElement, UsaToggleElement, UsaTooltipElement, UsaTypewriterElement, UsaViewSwitchElement, Variant, ViewTransitionOptions };

package/dist/components.js

@@ -18,9 +18,11 @@ import { defineClickComponents } from './components/click.js';
 export { BUTTON_DEFORMS, CLICK_EFFECTS, MORPH_ICONS, burst, confetti, defineButton, defineCheckbox, defineClick, defineDoubleTap, defineHold, defineIconMorph, defineLike, haptic, morphPath, shake } from './components/click.js';
 import { adoptVariants, defineUiComponents } from './components/ui.js';
 export { VARIANTS, defineAvatarStack, defineBadge, defineBottomSheet, defineDrawer, defineFab, defineNavbar, definePopover, definePullRefresh, defineRating, defineSlider, defineTabs, defineTooltip, setVariant } from './components/ui.js';
-import { c as canDefine } from './chunks/base-08OYzphB.js';
-export { a as configureComponents, p as prefersReducedMotion } from './chunks/base-08OYzphB.js';
-export { S as SPRING_PRESETS, c as createSpring, l as linearEasing, p as projectInertia, r as resolveSpring, a as rubberBand, s as snapTo, b as spring, d as springEasing, e as springSamples, f as stepSpring, g as supportsLinearEasing } from './chunks/spring-CpeFkxNd.js';
+import { definePageComponents } from './components/page.js';
+export { AMBIENT_EFFECTS, CURSOR_MODES, PAGE_EFFECTS, defineAmbient, defineAutoSkeleton, defineBackToTop, defineCursor, defineFullpage, defineLoadingBar, defineMotionSwitch, defineSplash, enableMpaTransitions, loadingBar, pageTransition, restoreMotionIntensity, scrollToTarget, setMotionIntensity, smoothScroll, supportsViewTransitions, themeTransition } from './components/page.js';
+import { c as canDefine } from './chunks/base-D6zLiNGH.js';
+export { M as MOTION_SCALE, a as configureComponents, g as getMotionIntensity, p as prefersReducedMotion } from './chunks/base-D6zLiNGH.js';
+export { S as SPRING_PRESETS, c as createSpring, l as linearEasing, p as projectInertia, r as resolveSpring, a as rubberBand, s as snapTo, b as spring, d as springEasing, e as springSamples, f as stepSpring, g as supportsLinearEasing } from './chunks/spring-C2Megtcf.js';
 
 /**
  * use-scroll-animate/components
@@ -54,6 +56,7 @@ const COMPONENT_CATEGORIES = {
     cards: ['usa-card', 'usa-card-stack', 'usa-sticky-stack', 'usa-carousel-3d'],
     click: ['usa-click', 'usa-button', 'usa-icon-morph', 'usa-like', 'usa-hold', 'usa-double-tap', 'usa-checkbox'],
     ui: ['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'],
+    page: ['usa-cursor', 'usa-fullpage', 'usa-loading-bar', 'usa-back-to-top', 'usa-ambient', 'usa-splash', 'usa-auto-skeleton', 'usa-motion-switch'],
 };
 const BY_CATEGORY = {
     reveal: defineRevealComponents,
@@ -66,6 +69,7 @@ const BY_CATEGORY = {
     cards: defineCardComponents,
     click: defineClickComponents,
     ui: defineUiComponents,
+    page: definePageComponents,
 };
 /**
  * Register every `<usa-*>` component (or only the given categories).
@@ -77,5 +81,5 @@ function defineComponents(categories) {
     (categories || Object.keys(BY_CATEGORY)).forEach((c) => BY_CATEGORY[c]?.());
 }
 
-export { COMPONENT_CATEGORIES, adoptVariants, defineBackgroundComponents, defineCardComponents, defineClickComponents, defineComponents, defineFeedbackComponents, defineInteractionComponents, definePhysicsComponents, defineRevealComponents, defineTextComponents, defineTransitionComponents, defineUiComponents };
+export { COMPONENT_CATEGORIES, adoptVariants, defineBackgroundComponents, defineCardComponents, defineClickComponents, defineComponents, defineFeedbackComponents, defineInteractionComponents, definePageComponents, definePhysicsComponents, defineRevealComponents, defineTextComponents, defineTransitionComponents, defineUiComponents };
 //# sourceMappingURL=components.js.map