use-scroll-animate 3.4.0 → 3.5.0

package/dist/components/depth.d.cts

@@ -0,0 +1,121 @@
+/**
+ * use-scroll-animate/components — shared base for the `<usa-*>` custom elements.
+ *
+ * Everything here is lazy: nothing touches `window`, `document`,
+ * `HTMLElement` or `matchMedia` at import time, so the components can be
+ * imported during SSR (Next, Nuxt, Astro…) and in Electron/Tauri preload
+ * scripts. Classes are created the first time a `define*()` function runs.
+ */
+interface ComponentsConfig {
+    /**
+     * Inject each component's CSS when it is defined (default `true`). Uses a
+     * constructable stylesheet (`document.adoptedStyleSheets`, which a strict
+     * `style-src` CSP does not block) and falls back to a `<style>` tag. Set
+     * to `false` when you load `use-scroll-animate/components.css` yourself.
+     */
+    injectStyles?: boolean;
+    /**
+     * `'user'` (default) follows `prefers-reduced-motion`; `'reduce'` always
+     * uses the reduced variants (e.g. a kiosk / battery-saver mode);
+     * `'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';
+/** Change global component settings (call before `define*()` for `injectStyles`). */
+declare function configureComponents(options: ComponentsConfig): void;
+/** `true` when animations should be reduced (OS setting or `configureComponents`). */
+declare function prefersReducedMotion(): boolean;
+/**
+ * Members shared by every `<usa-*>` element. Attribute helpers, a cleanup
+ * bag that is emptied on disconnect, and motion helpers that degrade to the
+ * final state without WAAPI or under reduced motion.
+ */
+interface UsaElement extends HTMLElement {
+    /** `true` while reduced motion applies to this element. */
+    readonly reduced: boolean;
+}
+
+/**
+ * `<usa-cube>` — a CSS 3D cube whose up-to-six element children are its faces
+ * (front, right, back, left, top, bottom). Rotate with drag / swipe, arrow
+ * keys, `autoplay` (ms) or `show(face | index)`; spring-driven.
+ * Attributes: `size` (px, 200), `autoplay`, `perspective` (900).
+ * `usa:change` (`{ index, face }`). Reduced motion: instant face switch.
+ */
+interface UsaCubeElement extends UsaElement {
+    readonly index: number;
+    show(face: number | string): void;
+    next(): void;
+    prev(): void;
+}
+declare function defineCube(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-depth>` — depth parallax: children with `data-depth` (-1…1, 0 = the
+ * screen plane) move and scale by depth as the pointer moves, the device
+ * tilts (`orientation`) or the page scrolls (`scroll`).
+ * Attributes: `source` (`pointer` default · `orientation` · `scroll` ·
+ * space-separated mix), `strength` (px at depth 1, 40), `rotate` (max tilt
+ * of the whole scene in deg, 0). `requestPermission()` for iOS motion.
+ * Reduced motion: layers stay flat.
+ */
+interface UsaDepthElement extends UsaElement {
+    /** Current -1…1 input. */
+    readonly tilt: {
+        x: number;
+        y: number;
+    };
+    requestPermission(): Promise<boolean>;
+}
+declare function defineDepth(tag?: string): CustomElementConstructor | undefined;
+
+interface TiltReading {
+    /** Left/right tilt, -1…1. */
+    x: number;
+    /** Front/back tilt, -1…1. */
+    y: number;
+}
+/** Map a DeviceOrientation reading (beta/gamma degrees) to -1…1 tilt around a resting pose (pure). */
+declare function orientationToTilt(beta: number | null, gamma: number | null, range?: number, rest?: number): TiltReading;
+/** `true` when DeviceOrientation events exist. */
+declare const supportsOrientation: () => boolean;
+/**
+ * Ask for motion-sensor permission where required (iOS 13+; must run inside
+ * a user gesture). Resolves `true` when tilt events can be used.
+ */
+declare function requestOrientationPermission(): Promise<boolean>;
+/**
+ * Listen to device tilt (smoothed); falls back to nothing on desktops.
+ * Returns a stop function.
+ */
+declare function deviceTilt(cb: (t: TiltReading) => void, o?: {
+    range?: number;
+    smooth?: number;
+}): () => void;
+
+/**
+ * use-scroll-animate/components/depth — 3D (v3.5).
+ * `<usa-cube>` (CSS 3D cube), `<usa-depth>` (layered depth parallax driven by
+ * pointer, device orientation or scroll) and `deviceTilt()`. The 3D ring
+ * carousel is `<usa-carousel-3d>` in `components/cards`.
+ */
+
+/** Register every component of this category under its default tag. */
+declare function defineDepthComponents(): void;
+declare global {
+    interface HTMLElementTagNameMap {
+        'usa-cube': UsaCubeElement;
+        'usa-depth': UsaDepthElement;
+    }
+}
+
+export { configureComponents, defineCube, defineDepth, defineDepthComponents, deviceTilt, orientationToTilt, prefersReducedMotion, requestOrientationPermission, supportsOrientation };
+export type { ComponentsConfig, TiltReading, UsaCubeElement, UsaDepthElement, UsaElement };

package/dist/components/depth.d.ts

@@ -0,0 +1,121 @@
+/**
+ * use-scroll-animate/components — shared base for the `<usa-*>` custom elements.
+ *
+ * Everything here is lazy: nothing touches `window`, `document`,
+ * `HTMLElement` or `matchMedia` at import time, so the components can be
+ * imported during SSR (Next, Nuxt, Astro…) and in Electron/Tauri preload
+ * scripts. Classes are created the first time a `define*()` function runs.
+ */
+interface ComponentsConfig {
+    /**
+     * Inject each component's CSS when it is defined (default `true`). Uses a
+     * constructable stylesheet (`document.adoptedStyleSheets`, which a strict
+     * `style-src` CSP does not block) and falls back to a `<style>` tag. Set
+     * to `false` when you load `use-scroll-animate/components.css` yourself.
+     */
+    injectStyles?: boolean;
+    /**
+     * `'user'` (default) follows `prefers-reduced-motion`; `'reduce'` always
+     * uses the reduced variants (e.g. a kiosk / battery-saver mode);
+     * `'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';
+/** Change global component settings (call before `define*()` for `injectStyles`). */
+declare function configureComponents(options: ComponentsConfig): void;
+/** `true` when animations should be reduced (OS setting or `configureComponents`). */
+declare function prefersReducedMotion(): boolean;
+/**
+ * Members shared by every `<usa-*>` element. Attribute helpers, a cleanup
+ * bag that is emptied on disconnect, and motion helpers that degrade to the
+ * final state without WAAPI or under reduced motion.
+ */
+interface UsaElement extends HTMLElement {
+    /** `true` while reduced motion applies to this element. */
+    readonly reduced: boolean;
+}
+
+/**
+ * `<usa-cube>` — a CSS 3D cube whose up-to-six element children are its faces
+ * (front, right, back, left, top, bottom). Rotate with drag / swipe, arrow
+ * keys, `autoplay` (ms) or `show(face | index)`; spring-driven.
+ * Attributes: `size` (px, 200), `autoplay`, `perspective` (900).
+ * `usa:change` (`{ index, face }`). Reduced motion: instant face switch.
+ */
+interface UsaCubeElement extends UsaElement {
+    readonly index: number;
+    show(face: number | string): void;
+    next(): void;
+    prev(): void;
+}
+declare function defineCube(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-depth>` — depth parallax: children with `data-depth` (-1…1, 0 = the
+ * screen plane) move and scale by depth as the pointer moves, the device
+ * tilts (`orientation`) or the page scrolls (`scroll`).
+ * Attributes: `source` (`pointer` default · `orientation` · `scroll` ·
+ * space-separated mix), `strength` (px at depth 1, 40), `rotate` (max tilt
+ * of the whole scene in deg, 0). `requestPermission()` for iOS motion.
+ * Reduced motion: layers stay flat.
+ */
+interface UsaDepthElement extends UsaElement {
+    /** Current -1…1 input. */
+    readonly tilt: {
+        x: number;
+        y: number;
+    };
+    requestPermission(): Promise<boolean>;
+}
+declare function defineDepth(tag?: string): CustomElementConstructor | undefined;
+
+interface TiltReading {
+    /** Left/right tilt, -1…1. */
+    x: number;
+    /** Front/back tilt, -1…1. */
+    y: number;
+}
+/** Map a DeviceOrientation reading (beta/gamma degrees) to -1…1 tilt around a resting pose (pure). */
+declare function orientationToTilt(beta: number | null, gamma: number | null, range?: number, rest?: number): TiltReading;
+/** `true` when DeviceOrientation events exist. */
+declare const supportsOrientation: () => boolean;
+/**
+ * Ask for motion-sensor permission where required (iOS 13+; must run inside
+ * a user gesture). Resolves `true` when tilt events can be used.
+ */
+declare function requestOrientationPermission(): Promise<boolean>;
+/**
+ * Listen to device tilt (smoothed); falls back to nothing on desktops.
+ * Returns a stop function.
+ */
+declare function deviceTilt(cb: (t: TiltReading) => void, o?: {
+    range?: number;
+    smooth?: number;
+}): () => void;
+
+/**
+ * use-scroll-animate/components/depth — 3D (v3.5).
+ * `<usa-cube>` (CSS 3D cube), `<usa-depth>` (layered depth parallax driven by
+ * pointer, device orientation or scroll) and `deviceTilt()`. The 3D ring
+ * carousel is `<usa-carousel-3d>` in `components/cards`.
+ */
+
+/** Register every component of this category under its default tag. */
+declare function defineDepthComponents(): void;
+declare global {
+    interface HTMLElementTagNameMap {
+        'usa-cube': UsaCubeElement;
+        'usa-depth': UsaDepthElement;
+    }
+}
+
+export { configureComponents, defineCube, defineDepth, defineDepthComponents, deviceTilt, orientationToTilt, prefersReducedMotion, requestOrientationPermission, supportsOrientation };
+export type { ComponentsConfig, TiltReading, UsaCubeElement, UsaDepthElement, UsaElement };

package/dist/components/depth.js

@@ -0,0 +1,243 @@
+import { h as defineElement, b as clamp, r as raf, e as caf } from '../chunks/base-BpROOcey.js';
+export { a as configureComponents, p as prefersReducedMotion } from '../chunks/base-BpROOcey.js';
+import { c as createSpring } from '../chunks/spring-C-fw7_9f.js';
+import { g as gesture } from '../chunks/core-uxs3ETou.js';
+
+var css = "usa-cube{--usa-cube-size:200px;display:block;width:var(--usa-cube-size);height:var(--usa-cube-size);perspective:var(--usa-cube-perspective,900px);touch-action:pan-y;user-select:none;-webkit-user-select:none;position:relative}usa-cube>[data-face]{position:absolute;inset:0;backface-visibility:hidden;transform:translateZ(calc(var(--usa-cube-size) / -2)) rotateX(var(--usa-cube-rx,0deg)) rotateY(var(--usa-cube-ry,0deg)) var(--usa-face) translateZ(calc(var(--usa-cube-size) / 2));transform-origin:50% 50%}usa-cube>[data-face=\"front\"]{--usa-face:rotateY(0deg)}usa-cube>[data-face=\"right\"]{--usa-face:rotateY(90deg)}usa-cube>[data-face=\"back\"]{--usa-face:rotateY(180deg)}usa-cube>[data-face=\"left\"]{--usa-face:rotateY(-90deg)}usa-cube>[data-face=\"top\"]{--usa-face:rotateX(90deg)}usa-cube>[data-face=\"bottom\"]{--usa-face:rotateX(-90deg)}usa-cube:focus-visible{outline:2px solid currentColor;outline-offset:6px}usa-depth{display:block;position:relative;perspective:1000px}usa-depth>*{transform:var(--usa-depth-rot,none);transform-style:preserve-3d}usa-depth [data-depth]{will-change:transform;transition:transform 0.12s linear}@media (prefers-reduced-motion:reduce){usa-depth [data-depth]{transform:none !important}}";
+
+const FACES = ['front', 'right', 'back', 'left', 'top', 'bottom'];
+/** Rotation (deg) that brings each face to the front. */
+const ROT = { front: [0, 0], right: [0, -90], back: [0, -180], left: [0, 90], top: [-90, 0], bottom: [90, 0] };
+function defineCube(tag = 'usa-cube') {
+    return defineElement(tag, (Base) => class UsaCube extends Base {
+        constructor() {
+            super(...arguments);
+            this._i = 0;
+            this._base = [0, 0];
+        }
+        static get observedAttributes() {
+            return ['size', 'autoplay'];
+        }
+        get index() {
+            return this._i;
+        }
+        faces() {
+            return Array.from(this.children).filter((c) => c instanceof HTMLElement && !c.hasAttribute('slot')).slice(0, 6);
+        }
+        paint() {
+            this.style.setProperty('--usa-cube-rx', `${this._rx.value}deg`);
+            this.style.setProperty('--usa-cube-ry', `${this._ry.value}deg`);
+        }
+        show(face) {
+            const n = this.faces().length || 1;
+            const i = typeof face === 'number' ? ((face % n) + n) % n : Math.max(0, FACES.indexOf(face));
+            this._i = i;
+            const [rx, ry] = ROT[FACES[i]];
+            // take the shortest way round on Y
+            const cur = this._ry.target;
+            const ty = ry + Math.round((cur - ry) / 360) * 360;
+            this._base = [rx, ty];
+            if (this.reduced) {
+                this._rx.jump(rx);
+                this._ry.jump(ty);
+            }
+            else {
+                this._rx.set(rx);
+                this._ry.set(ty);
+            }
+            this.faces().forEach((f, j) => f.setAttribute('aria-hidden', String(j !== i)));
+            this.emit('change', { index: i, face: FACES[i] });
+        }
+        next() {
+            this.show(this._i + 1);
+        }
+        prev() {
+            this.show(this._i - 1);
+        }
+        mount() {
+            this.style.setProperty('--usa-cube-size', `${this.num('size', 200)}px`);
+            this.style.setProperty('--usa-cube-perspective', `${this.num('perspective', 900)}px`);
+            this.faces().forEach((f, j) => f.setAttribute('data-face', FACES[j]));
+            if (!this.hasAttribute('tabindex'))
+                this.tabIndex = 0;
+            if (!this.hasAttribute('role'))
+                this.setAttribute('role', 'region');
+            if (!this.hasAttribute('aria-roledescription'))
+                this.setAttribute('aria-roledescription', 'cube');
+            this._rx = createSpring({ spring: 'gentle', onUpdate: () => this.paint() });
+            this._ry = createSpring({ spring: 'gentle', onUpdate: () => this.paint() });
+            this.show(this._i);
+            this.paint();
+            this.onCleanup(gesture(this, {
+                onPan: ({ dx, dy, last }) => {
+                    if (this.reduced)
+                        return;
+                    if (!last) {
+                        this._ry.jump(this._base[1] + dx * 0.5);
+                        this._rx.jump(this._base[0] - dy * 0.5);
+                        return;
+                    }
+                    if (Math.abs(dx) > 40 && Math.abs(dx) >= Math.abs(dy))
+                        return dx < 0 ? this.next() : this.prev();
+                    if (Math.abs(dy) > 40 && this.faces().length > 4)
+                        return this.show(dy < 0 ? 'bottom' : 'top');
+                    this.show(this._i);
+                },
+            }));
+            this.listen(this, 'keydown', (e) => {
+                const k = { ArrowRight: () => this.next(), ArrowLeft: () => this.prev(), ArrowUp: () => this.show('bottom'), ArrowDown: () => this.show('top'), Home: () => this.show(0) };
+                if (!k[e.key] || ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && this.faces().length < 6))
+                    return;
+                e.preventDefault();
+                k[e.key]();
+            });
+            const ms = this.num('autoplay', 0);
+            if (ms > 0 && !this.reduced) {
+                let paused = false;
+                const id = setInterval(() => !paused && this.show((this._i + 1) % Math.min(4, this.faces().length || 1)), ms);
+                this.listen(this, 'pointerenter', () => (paused = true));
+                this.listen(this, 'pointerleave', () => (paused = false));
+                this.listen(this, 'focusin', () => (paused = true));
+                this.listen(this, 'focusout', () => (paused = false));
+                this.onCleanup(() => clearInterval(id));
+            }
+        }
+        unmount() {
+            this._rx?.stop();
+            this._ry?.stop();
+        }
+    }, { id: 'depth', text: css });
+}
+
+/** Map a DeviceOrientation reading (beta/gamma degrees) to -1…1 tilt around a resting pose (pure). */
+function orientationToTilt(beta, gamma, range = 30, rest = 45) {
+    return {
+        x: clamp((gamma ?? 0) / range, -1, 1),
+        y: clamp(((beta ?? rest) - rest) / range, -1, 1),
+    };
+}
+/** `true` when DeviceOrientation events exist. */
+const supportsOrientation = () => typeof window !== 'undefined' && 'DeviceOrientationEvent' in window;
+/**
+ * Ask for motion-sensor permission where required (iOS 13+; must run inside
+ * a user gesture). Resolves `true` when tilt events can be used.
+ */
+async function requestOrientationPermission() {
+    if (!supportsOrientation())
+        return false;
+    const D = window.DeviceOrientationEvent;
+    if (typeof D.requestPermission !== 'function')
+        return true;
+    try {
+        return (await D.requestPermission()) === 'granted';
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Listen to device tilt (smoothed); falls back to nothing on desktops.
+ * Returns a stop function.
+ */
+function deviceTilt(cb, o = {}) {
+    if (!supportsOrientation())
+        return () => { };
+    let cur = { x: 0, y: 0 };
+    const k = 1 - clamp(o.smooth ?? 0.2, 0, 0.95);
+    const on = (e) => {
+        const t = orientationToTilt(e.beta, e.gamma, o.range ?? 30);
+        cur = { x: cur.x + (t.x - cur.x) * k, y: cur.y + (t.y - cur.y) * k };
+        cb(cur);
+    };
+    window.addEventListener('deviceorientation', on);
+    return () => window.removeEventListener('deviceorientation', on);
+}
+
+function defineDepth(tag = 'usa-depth') {
+    return defineElement(tag, (Base) => class UsaDepth extends Base {
+        constructor() {
+            super(...arguments);
+            this._t = { x: 0, y: 0 };
+            this._id = 0;
+        }
+        static get observedAttributes() {
+            return ['source', 'strength', 'rotate'];
+        }
+        get tilt() {
+            return { ...this._t };
+        }
+        requestPermission() {
+            return requestOrientationPermission().then((ok) => {
+                if (ok) {
+                    this.changed('source');
+                }
+                return ok;
+            });
+        }
+        apply() {
+            this._id = 0;
+            const s = this.num('strength', 40);
+            const r = this.num('rotate', 0);
+            const { x, y } = this._t;
+            this.style.setProperty('--usa-depth-x', x.toFixed(4));
+            this.style.setProperty('--usa-depth-y', y.toFixed(4));
+            if (r)
+                this.style.setProperty('--usa-depth-rot', `rotateX(${(-y * r).toFixed(2)}deg) rotateY(${(x * r).toFixed(2)}deg)`);
+            this.querySelectorAll('[data-depth]').forEach((el) => {
+                const d = clamp(Number(el.dataset.depth) || 0, -1, 1);
+                el.style.transform = `translate3d(${(x * d * s).toFixed(2)}px, ${(y * d * s).toFixed(2)}px, 0) scale(${(1 + d * 0.04).toFixed(4)})`;
+            });
+        }
+        set(x, y) {
+            this._t = { x: clamp(x, -1, 1), y: clamp(y, -1, 1) };
+            if (!this._id)
+                this._id = raf(() => this.apply());
+        }
+        mount() {
+            if (this.reduced)
+                return;
+            const src = this.str('source', 'pointer').split(/\s+/);
+            if (src.includes('pointer')) {
+                this.listen(this, 'pointermove', (e) => {
+                    const r = this.getBoundingClientRect();
+                    this.set(((e.clientX - r.left) / (r.width || 1)) * 2 - 1, ((e.clientY - r.top) / (r.height || 1)) * 2 - 1);
+                });
+                this.listen(this, 'pointerleave', () => this.set(0, 0));
+            }
+            if (src.includes('orientation') && supportsOrientation())
+                this.onCleanup(deviceTilt((t) => this.set(t.x, t.y)));
+            if (src.includes('scroll')) {
+                const on = () => {
+                    const r = this.getBoundingClientRect();
+                    const vh = window.innerHeight || 1;
+                    this.set(this._t.x, clamp(((r.top + r.height / 2) / vh) * 2 - 1, -1, 1));
+                };
+                this.listen(window, 'scroll', on, { passive: true });
+                on();
+            }
+            this.onCleanup(() => {
+                caf(this._id);
+                this._id = 0;
+            });
+        }
+        unmount() {
+            this._t = { x: 0, y: 0 };
+            this.querySelectorAll('[data-depth]').forEach((el) => (el.style.transform = ''));
+        }
+    }, { id: 'depth', text: css });
+}
+
+/**
+ * use-scroll-animate/components/depth — 3D (v3.5).
+ * `<usa-cube>` (CSS 3D cube), `<usa-depth>` (layered depth parallax driven by
+ * pointer, device orientation or scroll) and `deviceTilt()`. The 3D ring
+ * carousel is `<usa-carousel-3d>` in `components/cards`.
+ */
+/** Register every component of this category under its default tag. */
+function defineDepthComponents() {
+    defineCube();
+    defineDepth();
+}
+
+export { defineCube, defineDepth, defineDepthComponents, deviceTilt, orientationToTilt, requestOrientationPermission, supportsOrientation };
+//# sourceMappingURL=depth.js.map

package/dist/components/depth.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"depth.js","sources":["../../src/components/depth/cube.ts","../../src/components/depth/core.ts","../../src/components/depth/depth-el.ts","../../src/components/depth/index.ts"],"sourcesContent":["import { defineElement, type UsaElement } from '../base';\nimport { createSpring, type SpringValue } from '../physics/spring';\nimport { gesture } from '../gesture/core';\nimport css from './depth.css?raw';\n\nconst FACES = ['front', 'right', 'back', 'left', 'top', 'bottom'] as const;\n/** Rotation (deg) that brings each face to the front. */\nconst ROT: Record<string, [number, number]> = { front: [0, 0], right: [0, -90], back: [0, -180], left: [0, 90], top: [-90, 0], bottom: [90, 0] };\n\n/**\n * `<usa-cube>` — a CSS 3D cube whose up-to-six element children are its faces\n * (front, right, back, left, top, bottom). Rotate with drag / swipe, arrow\n * keys, `autoplay` (ms) or `show(face | index)`; spring-driven.\n * Attributes: `size` (px, 200), `autoplay`, `perspective` (900).\n * `usa:change` (`{ index, face }`). Reduced motion: instant face switch.\n */\nexport interface UsaCubeElement extends UsaElement {\n  readonly index: number;\n  show(face: number | string): void;\n  next(): void;\n  prev(): void;\n}\n\nexport function defineCube(tag = 'usa-cube'): CustomElementConstructor | undefined {\n  return defineElement(\n    tag,\n    (Base) =>\n      class UsaCube extends Base {\n        static get observedAttributes(): string[] {\n          return ['size', 'autoplay'];\n        }\n        private _i = 0;\n        private _rx!: SpringValue;\n        private _ry!: SpringValue;\n        private _base: [number, number] = [0, 0];\n\n        get index(): number {\n          return this._i;\n        }\n\n        private faces(): HTMLElement[] {\n          return Array.from(this.children).filter((c) => c instanceof HTMLElement && !c.hasAttribute('slot')).slice(0, 6) as HTMLElement[];\n        }\n\n        private paint(): void {\n          this.style.setProperty('--usa-cube-rx', `${this._rx.value}deg`);\n          this.style.setProperty('--usa-cube-ry', `${this._ry.value}deg`);\n        }\n\n        show(face: number | string): void {\n          const n = this.faces().length || 1;\n          const i = typeof face === 'number' ? ((face % n) + n) % n : Math.max(0, FACES.indexOf(face as any));\n          this._i = i;\n          const [rx, ry] = ROT[FACES[i]];\n          // take the shortest way round on Y\n          const cur = this._ry.target;\n          const ty = ry + Math.round((cur - ry) / 360) * 360;\n          this._base = [rx, ty];\n          if (this.reduced) {\n            this._rx.jump(rx);\n            this._ry.jump(ty);\n          } else {\n            this._rx.set(rx);\n            this._ry.set(ty);\n          }\n          this.faces().forEach((f, j) => f.setAttribute('aria-hidden', String(j !== i)));\n          this.emit('change', { index: i, face: FACES[i] });\n        }\n\n        next(): void {\n          this.show(this._i + 1);\n        }\n\n        prev(): void {\n          this.show(this._i - 1);\n        }\n\n        mount(): void {\n          this.style.setProperty('--usa-cube-size', `${this.num('size', 200)}px`);\n          this.style.setProperty('--usa-cube-perspective', `${this.num('perspective', 900)}px`);\n          this.faces().forEach((f, j) => f.setAttribute('data-face', FACES[j]));\n          if (!this.hasAttribute('tabindex')) this.tabIndex = 0;\n          if (!this.hasAttribute('role')) this.setAttribute('role', 'region');\n          if (!this.hasAttribute('aria-roledescription')) this.setAttribute('aria-roledescription', 'cube');\n          this._rx = createSpring({ spring: 'gentle', onUpdate: () => this.paint() });\n          this._ry = createSpring({ spring: 'gentle', onUpdate: () => this.paint() });\n          this.show(this._i);\n          this.paint();\n          this.onCleanup(\n            gesture(this, {\n              onPan: ({ dx, dy, last }) => {\n                if (this.reduced) return;\n                if (!last) {\n                  this._ry.jump(this._base[1] + dx * 0.5);\n                  this._rx.jump(this._base[0] - dy * 0.5);\n                  return;\n                }\n                if (Math.abs(dx) > 40 && Math.abs(dx) >= Math.abs(dy)) return dx < 0 ? this.next() : this.prev();\n                if (Math.abs(dy) > 40 && this.faces().length > 4) return this.show(dy < 0 ? 'bottom' : 'top');\n                this.show(this._i);\n              },\n            })\n          );\n          this.listen(this, 'keydown', (e: KeyboardEvent) => {\n            const k: Record<string, () => void> = { ArrowRight: () => this.next(), ArrowLeft: () => this.prev(), ArrowUp: () => this.show('bottom'), ArrowDown: () => this.show('top'), Home: () => this.show(0) };\n            if (!k[e.key] || ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && this.faces().length < 6)) return;\n            e.preventDefault();\n            k[e.key]();\n          });\n          const ms = this.num('autoplay', 0);\n          if (ms > 0 && !this.reduced) {\n            let paused = false;\n            const id = setInterval(() => !paused && this.show((this._i + 1) % Math.min(4, this.faces().length || 1)), ms);\n            this.listen(this, 'pointerenter', () => (paused = true));\n            this.listen(this, 'pointerleave', () => (paused = false));\n            this.listen(this, 'focusin', () => (paused = true));\n            this.listen(this, 'focusout', () => (paused = false));\n            this.onCleanup(() => clearInterval(id));\n          }\n        }\n\n        unmount(): void {\n          this._rx?.stop();\n          this._ry?.stop();\n        }\n      },\n    { id: 'depth', text: css }\n  );\n}\n","import { clamp } from '../base';\n\nexport interface TiltReading {\n  /** Left/right tilt, -1…1. */\n  x: number;\n  /** Front/back tilt, -1…1. */\n  y: number;\n}\n\n/** Map a DeviceOrientation reading (beta/gamma degrees) to -1…1 tilt around a resting pose (pure). */\nexport function orientationToTilt(beta: number | null, gamma: number | null, range = 30, rest = 45): TiltReading {\n  return {\n    x: clamp((gamma ?? 0) / range, -1, 1),\n    y: clamp(((beta ?? rest) - rest) / range, -1, 1),\n  };\n}\n\n/** `true` when DeviceOrientation events exist. */\nexport const supportsOrientation = (): boolean => typeof window !== 'undefined' && 'DeviceOrientationEvent' in window;\n\n/**\n * Ask for motion-sensor permission where required (iOS 13+; must run inside\n * a user gesture). Resolves `true` when tilt events can be used.\n */\nexport async function requestOrientationPermission(): Promise<boolean> {\n  if (!supportsOrientation()) return false;\n  const D = (window as any).DeviceOrientationEvent;\n  if (typeof D.requestPermission !== 'function') return true;\n  try {\n    return (await D.requestPermission()) === 'granted';\n  } catch {\n    return false;\n  }\n}\n\n/**\n * Listen to device tilt (smoothed); falls back to nothing on desktops.\n * Returns a stop function.\n */\nexport function deviceTilt(cb: (t: TiltReading) => void, o: { range?: number; smooth?: number } = {}): () => void {\n  if (!supportsOrientation()) return () => {};\n  let cur: TiltReading = { x: 0, y: 0 };\n  const k = 1 - clamp(o.smooth ?? 0.2, 0, 0.95);\n  const on = (e: DeviceOrientationEvent) => {\n    const t = orientationToTilt(e.beta, e.gamma, o.range ?? 30);\n    cur = { x: cur.x + (t.x - cur.x) * k, y: cur.y + (t.y - cur.y) * k };\n    cb(cur);\n  };\n  window.addEventListener('deviceorientation', on);\n  return () => window.removeEventListener('deviceorientation', on);\n}\n","import { defineElement, raf, caf, clamp, type UsaElement } from '../base';\nimport { deviceTilt, requestOrientationPermission, supportsOrientation } from './core';\nimport css from './depth.css?raw';\n\n/**\n * `<usa-depth>` — depth parallax: children with `data-depth` (-1…1, 0 = the\n * screen plane) move and scale by depth as the pointer moves, the device\n * tilts (`orientation`) or the page scrolls (`scroll`).\n * Attributes: `source` (`pointer` default · `orientation` · `scroll` ·\n * space-separated mix), `strength` (px at depth 1, 40), `rotate` (max tilt\n * of the whole scene in deg, 0). `requestPermission()` for iOS motion.\n * Reduced motion: layers stay flat.\n */\nexport interface UsaDepthElement extends UsaElement {\n  /** Current -1…1 input. */\n  readonly tilt: { x: number; y: number };\n  requestPermission(): Promise<boolean>;\n}\n\nexport function defineDepth(tag = 'usa-depth'): CustomElementConstructor | undefined {\n  return defineElement(\n    tag,\n    (Base) =>\n      class UsaDepth extends Base {\n        static get observedAttributes(): string[] {\n          return ['source', 'strength', 'rotate'];\n        }\n        private _t = { x: 0, y: 0 };\n        private _id = 0;\n\n        get tilt(): { x: number; y: number } {\n          return { ...this._t };\n        }\n\n        requestPermission(): Promise<boolean> {\n          return requestOrientationPermission().then((ok) => {\n            if (ok) {\n              this.changed('source');\n            }\n            return ok;\n          });\n        }\n\n        private apply(): void {\n          this._id = 0;\n          const s = this.num('strength', 40);\n          const r = this.num('rotate', 0);\n          const { x, y } = this._t;\n          this.style.setProperty('--usa-depth-x', x.toFixed(4));\n          this.style.setProperty('--usa-depth-y', y.toFixed(4));\n          if (r) this.style.setProperty('--usa-depth-rot', `rotateX(${(-y * r).toFixed(2)}deg) rotateY(${(x * r).toFixed(2)}deg)`);\n          this.querySelectorAll<HTMLElement>('[data-depth]').forEach((el) => {\n            const d = clamp(Number(el.dataset.depth) || 0, -1, 1);\n            el.style.transform = `translate3d(${(x * d * s).toFixed(2)}px, ${(y * d * s).toFixed(2)}px, 0) scale(${(1 + d * 0.04).toFixed(4)})`;\n          });\n        }\n\n        private set(x: number, y: number): void {\n          this._t = { x: clamp(x, -1, 1), y: clamp(y, -1, 1) };\n          if (!this._id) this._id = raf(() => this.apply());\n        }\n\n        mount(): void {\n          if (this.reduced) return;\n          const src = this.str('source', 'pointer').split(/\\s+/);\n          if (src.includes('pointer')) {\n            this.listen(this, 'pointermove', (e: PointerEvent) => {\n              const r = this.getBoundingClientRect();\n              this.set(((e.clientX - r.left) / (r.width || 1)) * 2 - 1, ((e.clientY - r.top) / (r.height || 1)) * 2 - 1);\n            });\n            this.listen(this, 'pointerleave', () => this.set(0, 0));\n          }\n          if (src.includes('orientation') && supportsOrientation()) this.onCleanup(deviceTilt((t) => this.set(t.x, t.y)));\n          if (src.includes('scroll')) {\n            const on = () => {\n              const r = this.getBoundingClientRect();\n              const vh = window.innerHeight || 1;\n              this.set(this._t.x, clamp(((r.top + r.height / 2) / vh) * 2 - 1, -1, 1));\n            };\n            this.listen(window, 'scroll', on, { passive: true });\n            on();\n          }\n          this.onCleanup(() => {\n            caf(this._id);\n            this._id = 0;\n          });\n        }\n\n        unmount(): void {\n          this._t = { x: 0, y: 0 };\n          this.querySelectorAll<HTMLElement>('[data-depth]').forEach((el) => (el.style.transform = ''));\n        }\n      },\n    { id: 'depth', text: css }\n  );\n}\n","/**\n * use-scroll-animate/components/depth — 3D (v3.5).\n * `<usa-cube>` (CSS 3D cube), `<usa-depth>` (layered depth parallax driven by\n * pointer, device orientation or scroll) and `deviceTilt()`. The 3D ring\n * carousel is `<usa-carousel-3d>` in `components/cards`.\n */\nimport { defineCube, type UsaCubeElement } from './cube';\nimport { defineDepth, type UsaDepthElement } from './depth-el';\n\nexport { defineCube, defineDepth };\nexport { deviceTilt, orientationToTilt, requestOrientationPermission, supportsOrientation } from './core';\nexport type { TiltReading } from './core';\nexport type { UsaCubeElement, UsaDepthElement };\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 defineDepthComponents(): void {\n  defineCube();\n  defineDepth();\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'usa-cube': UsaCubeElement;\n    'usa-depth': UsaDepthElement;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/components/feedback.js

@@ -1,5 +1,5 @@
-import { h as defineElement, k as kindOf, i as EASE_OUT, f as clamp, F as FLUENT_DECELERATE, E as EASE_SPRING } from '../chunks/base-Cu-86Z31.js';
-export { a as configureComponents, p as prefersReducedMotion } from '../chunks/base-Cu-86Z31.js';
+import { h as defineElement, k as kindOf, i as EASE_OUT, b as clamp, F as FLUENT_DECELERATE, E as EASE_SPRING } from '../chunks/base-BpROOcey.js';
+export { a as configureComponents, p as prefersReducedMotion } from '../chunks/base-BpROOcey.js';
 
 var css$4 = "usa-spinner{--usa-spinner-size:32px;--usa-spinner-color:currentColor;position:relative;display:inline-block;vertical-align:middle;flex:none;width:var(--usa-spinner-size);height:var(--usa-spinner-size);color:var(--usa-spinner-color)}usa-spinner i{position:absolute;display:block}usa-spinner[paused] *,usa-spinner[paused] *::after{animation-play-state:paused !important}usa-spinner svg{width:100%;height:100%;animation:usa-spin 2s linear infinite;overflow:visible}usa-spinner svg circle{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:0.5 100;stroke-dashoffset:0;animation:usa-ring-arc 1.6s ease-in-out infinite}@keyframes usa-spin{to{transform:rotate(360deg)}}@keyframes usa-ring-arc{0%{stroke-dasharray:0.5 100;stroke-dashoffset:0}50%{stroke-dasharray:62 100;stroke-dashoffset:-20}100%{stroke-dasharray:0.5 100;stroke-dashoffset:-99}}usa-spinner[data-kind=\"windows\"] i{inset:0;opacity:0;animation:usa-orbit 5.5s infinite}usa-spinner[data-kind=\"windows\"] i::after{content:\"\";position:absolute;left:50%;top:0;width:12%;height:12%;margin-left:-6%;border-radius:50%;background:currentColor}usa-spinner[data-kind=\"windows\"] i:nth-child(2){animation-delay:240ms;--n:1}usa-spinner[data-kind=\"windows\"] i:nth-child(3){animation-delay:480ms;--n:2}usa-spinner[data-kind=\"windows\"] i:nth-child(4){animation-delay:720ms;--n:3}usa-spinner[data-kind=\"windows\"] i:nth-child(5){animation-delay:960ms;--n:4}@keyframes usa-orbit{0%{transform:rotate(225deg);opacity:1;animation-timing-function:ease-out}7%{transform:rotate(345deg);animation-timing-function:linear}30%{transform:rotate(455deg);animation-timing-function:ease-in-out}39%{transform:rotate(690deg);animation-timing-function:linear}70%{transform:rotate(815deg);opacity:1;animation-timing-function:ease-out}75%{transform:rotate(945deg);animation-timing-function:ease-out}76%,100%{transform:rotate(945deg);opacity:0}}usa-spinner[data-kind=\"ring\"] i{inset:0;border-radius:50%;border:calc(var(--usa-spinner-size) / 9) solid color-mix(in srgb,currentColor 20%,transparent);border-top-color:currentColor;animation:usa-spin 0.8s linear infinite}usa-spinner[data-kind=\"dots\"]{display:inline-flex;align-items:center;justify-content:space-between;height:calc(var(--usa-spinner-size) / 2.5)}usa-spinner[data-kind=\"dots\"] i{position:static;width:22%;aspect-ratio:1;border-radius:50%;background:currentColor;animation:usa-dot 1.2s ease-in-out infinite}usa-spinner[data-kind=\"dots\"] i:nth-child(2){animation-delay:0.15s}usa-spinner[data-kind=\"dots\"] i:nth-child(3){animation-delay:0.3s}@keyframes usa-dot{0%,60%,100%{transform:translateY(0);opacity:0.35}30%{transform:translateY(-70%);opacity:1}}usa-spinner[data-kind=\"pulse\"] i{inset:0;border-radius:50%;background:currentColor;opacity:0;animation:usa-pulse 1.6s cubic-bezier(0.22,1,0.36,1) infinite}usa-spinner[data-kind=\"pulse\"] i:nth-child(2){animation-delay:0.8s}@keyframes usa-pulse{from{transform:scale(0.1);opacity:0.8}to{transform:scale(1);opacity:0}}usa-spinner[data-kind=\"bars\"]{display:inline-flex;align-items:center;justify-content:space-between}usa-spinner[data-kind=\"bars\"] i{position:static;width:16%;height:100%;border-radius:2px;background:currentColor;transform:scaleY(0.35);animation:usa-bar 1s ease-in-out infinite}usa-spinner[data-kind=\"bars\"] i:nth-child(2){animation-delay:0.12s}usa-spinner[data-kind=\"bars\"] i:nth-child(3){animation-delay:0.24s}usa-spinner[data-kind=\"bars\"] i:nth-child(4){animation-delay:0.36s}@keyframes usa-bar{0%,100%{transform:scaleY(0.35)}40%{transform:scaleY(1)}}@media (prefers-reduced-motion:reduce){usa-spinner svg,usa-spinner i,usa-spinner i::after{animation:usa-calm 2.4s ease-in-out infinite !important}usa-spinner[data-kind=\"windows\"] i{transform:rotate(calc(var(--n,0) * 72deg))}usa-spinner svg circle{animation:none;stroke-dasharray:30 100}}@keyframes usa-calm{0%,100%{opacity:1}50%{opacity:0.4}}";