motionary 7.9.0 → 8.1.0

package/dist/components/lite.cjs

@@ -9,6 +9,7 @@ var _documentCurrentScript = typeof document !== 'undefined' ? document.currentS
  * imported during SSR (Next, Nuxt, Astro…) and in Electron/Tauri preload
  * scripts. Classes are created the first time a `define*()` function runs.
  */
+var _a$1;
 const MOTION_SENSITIVITY_LEVELS = ['full', 'gentle', 'minimal', 'static'];
 const MOTION_SCALE = { low: 0.6, normal: 1, high: 1.25 };
 const config = { injectStyles: true, reducedMotion: 'user', motionIntensity: 'normal', motionSensitivity: 'full' };
@@ -251,6 +252,7 @@ function animateWithMotion(el, keyframes, options) {
     if (k !== 1 && k > 0 && typeof options.duration === 'number')
         options = { ...options, duration: options.duration * k, delay: (options.delay || 0) * k };
     const a = el.animate(keyframes, options);
+    trackAnimation(a);
     if (options.iterations !== Infinity) {
         active$1++;
         let done = false;
@@ -327,9 +329,14 @@ function flushFrame(t) {
             error ?? (error = e);
         }
     }
-    frameListeners.forEach((fn) => fn(t, dt));
-    if (frameListeners.size)
-        requestFlush();
+    // 8.0: loops run on the unified motion clock — dt scaled by its rate, frozen while paused
+    if (!clockState.paused) {
+        const cdt = dt * clockState.rate;
+        clockState.time += cdt;
+        frameListeners.forEach((fn) => fn(t, cdt));
+        if (frameListeners.size)
+            requestFlush();
+    }
     if (error)
         throw error;
 }
@@ -356,13 +363,42 @@ const caf = (id) => {
 /** Run `fn(time, dt)` every frame on the shared scheduler until the returned function is called. */
 function onFrame(fn) {
     frameListeners.add(fn);
-    requestFlush();
+    if (!clockState.paused)
+        requestFlush();
     return () => frameListeners.delete(fn);
 }
 /** Scheduler counters: frames flushed, callbacks run, peak callbacks in one frame, pending now. */
 function schedulerStats() {
     return { frames: frameStats.frames, callbacks: frameStats.callbacks, peak: frameStats.peak, pending: frameQueue.size, loops: frameListeners.size };
 }
+const CLOCK_KEY = Symbol.for('motionary.clock');
+const clockState = ((_a$1 = globalThis)[CLOCK_KEY] || (_a$1[CLOCK_KEY] = { rate: 1, paused: false, time: 0, anims: new Set(), subs: new Set() }));
+function applyClock(a) {
+    try {
+        if (typeof a.updatePlaybackRate === 'function')
+            a.updatePlaybackRate(clockState.rate);
+        else if (clockState.rate !== 1 || a.playbackRate !== undefined)
+            a.playbackRate = clockState.rate;
+        if (clockState.paused)
+            a.pause?.();
+        else if (a.playState === 'paused' && a._usaClockPaused)
+            a.play?.();
+        a._usaClockPaused = clockState.paused;
+    }
+    catch {
+        /* finished / detached animation */
+    }
+}
+/** Put an animation on the shared motion clock (animateWithMotion does this for every component / effect animation). */
+function trackAnimation(a) {
+    if (!a)
+        return;
+    if (clockState.rate !== 1 || clockState.paused)
+        applyClock(a);
+    clockState.anims.add(a);
+    const drop = () => clockState.anims.delete(a);
+    a.finished?.then(drop, drop);
+}
 // --- active animation budget (4.5) ---------------------------------------------
 let active$1 = 0;
 let maxActive = Infinity;
@@ -415,7 +451,7 @@ const COMPONENT_CATEGORIES = {
     physics: ['usa-spring', 'usa-draggable', 'usa-overscroll'],
     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-popover', 'usa-badge', 'usa-avatar-stack'],
+    ui: ['usa-tabs', 'usa-drawer', 'usa-bottom-sheet', 'usa-pull-refresh', 'usa-fab', 'usa-navbar', 'usa-slider', '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'],
     timeline: ['usa-timeline'],
     gesture: ['usa-swipeable', 'usa-pinch-zoom'],
@@ -598,7 +634,7 @@ function revealKeyframes(effect, distance) {
     return [from, to];
 }
 
-var css$14 = "";
+var css$13 = "";
 
 function defineReveal(tag = 'usa-reveal') {
     return defineElement(tag, (Base) => class UsaReveal extends Base {
@@ -673,7 +709,7 @@ function defineReveal(tag = 'usa-reveal') {
             if (!this.reduced)
                 this.setAttribute('data-state', 'hidden');
         }
-    }, { id: 'reveal', text: css$14 });
+    }, { id: 'reveal', text: css$13 });
 }
 
 function defineStagger(tag = 'usa-stagger') {
@@ -739,10 +775,10 @@ function defineStagger(tag = 'usa-stagger') {
             if (!this.reduced)
                 this.setAttribute('data-state', 'hidden');
         }
-    }, { id: 'reveal', text: css$14 });
+    }, { id: 'reveal', text: css$13 });
 }
 
-var css$13 = "";
+var css$12 = "";
 
 /** Progress (0–1) of `target` scrolling through the viewport, or of the page. */
 function readScrollProgress(target) {
@@ -810,10 +846,10 @@ function defineScrollProgress(tag = 'usa-scroll-progress') {
                 this.setAttribute('aria-valuenow', pct);
             this.emit('progress', { progress: p });
         }
-    }, { id: 'scroll-progress', text: css$13 });
+    }, { id: 'scroll-progress', text: css$12 });
 }
 
-var css$12 = "";
+var css$11 = "";
 
 function defineScrolly(tag = 'usa-scrolly') {
     return defineElement(tag, (Base) => class UsaScrolly extends Base {
@@ -865,7 +901,7 @@ function defineScrolly(tag = 'usa-scrolly') {
             if (!silent)
                 this.emit('step', { index, step, name: step.dataset.step || '' });
         }
-    }, { id: 'scrolly', text: css$12 });
+    }, { id: 'scrolly', text: css$11 });
 }
 
 /**
@@ -880,7 +916,7 @@ function defineRevealComponents() {
     defineScrolly();
 }
 
-var css$11 = "";
+var css$10 = "";
 
 function defineTypewriter(tag = 'usa-typewriter') {
     return defineElement(tag, (Base) => class UsaTypewriter extends Base {
@@ -994,10 +1030,10 @@ function defineTypewriter(tag = 'usa-typewriter') {
             };
             this._timer = setTimeout(tick, this.num('delay', 0));
         }
-    }, { id: 'typewriter', text: css$11 });
+    }, { id: 'typewriter', text: css$10 });
 }
 
-var css$10 = "";
+var css$$ = "";
 
 /**
  * motionary/components/tokens — motion design tokens (4.2).
@@ -1811,7 +1847,7 @@ function defineSplitText(tag = 'usa-split-text') {
             clearTimeout(this._timer);
             this.setAttribute('data-state', this.reduced ? 'shown' : 'hidden');
         }
-    }, { id: 'split-text', text: css$10 });
+    }, { id: 'split-text', text: css$$ });
 }
 
 const GLYPHS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#%&*+=<>/\\?!';
@@ -1905,7 +1941,7 @@ function defineScramble(tag = 'usa-scramble') {
     }, undefined);
 }
 
-var css$$ = "";
+var css$_ = "";
 
 /** easeOutExpo */
 const easeOutExpo = (t) => (t >= 1 ? 1 : 1 - Math.pow(2, -10 * t));
@@ -2005,10 +2041,10 @@ function defineCounter(tag = 'usa-counter') {
                 this._frame = raf(step);
             });
         }
-    }, { id: 'counter', text: css$$ });
+    }, { id: 'counter', text: css$_ });
 }
 
-var css$_ = "";
+var css$Z = "";
 
 function defineShimmerText(tag = 'usa-shimmer-text') {
     return defineElement(tag, (Base) => class UsaShimmerText extends Base {
@@ -2028,10 +2064,10 @@ function defineShimmerText(tag = 'usa-shimmer-text') {
             set('shine', '--usa-shimmer-shine');
             set('angle', '--usa-shimmer-angle', 'deg');
         }
-    }, { id: 'shimmer-text', text: css$_ });
+    }, { id: 'shimmer-text', text: css$Z });
 }
 
-var css$Z = "";
+var css$Y = "";
 
 function defineTextRotate(tag = 'usa-text-rotate') {
     return defineElement(tag, (Base) => class UsaTextRotate extends Base {
@@ -2103,10 +2139,10 @@ function defineTextRotate(tag = 'usa-text-rotate') {
             this.motion(cur, [inFrom, pick(inFrom)], { duration: 520, easing: effect === 'slide' ? EASE_SPRING : EASE_OUT });
             this.emit('change', { index: this._index, word: cur.textContent });
         }
-    }, { id: 'text-rotate', text: css$Z });
+    }, { id: 'text-rotate', text: css$Y });
 }
 
-var css$Y = "";
+var css$X = "";
 
 /** Split `text` into per-character spans (words never break). The animated copy is aria-hidden. */
 function splitChars(host, text) {
@@ -2143,7 +2179,7 @@ function defineWaveText(tag = 'usa-wave-text') {
             this.style.setProperty('--usa-wave-s', `${this.num('speed', 1.6)}s`);
             this.style.setProperty('--usa-wave-d', `${this.num('stagger', 0.06)}s`);
         }
-    }, { id: 'text-fx', text: css$Y });
+    }, { id: 'text-fx', text: css$X });
 }
 function defineGlitch(tag = 'usa-glitch') {
     return defineElement(tag, (Base) => class extends Base {
@@ -2155,7 +2191,7 @@ function defineGlitch(tag = 'usa-glitch') {
             if (!this.firstChild)
                 this.textContent = t;
         }
-    }, { id: 'text-fx', text: css$Y });
+    }, { id: 'text-fx', text: css$X });
 }
 function defineGradientText(tag = 'usa-gradient-text') {
     return defineElement(tag, (Base) => class extends Base {
@@ -2165,7 +2201,7 @@ function defineGradientText(tag = 'usa-gradient-text') {
             this.style.setProperty('--usa-grad', `linear-gradient(${this.num('angle', 90)}deg, ${[...c, c[0]].join(', ')})`);
             this.style.setProperty('--usa-grad-s', `${this.num('speed', 6)}s`);
         }
-    }, { id: 'text-fx', text: css$Y });
+    }, { id: 'text-fx', text: css$X });
 }
 function defineHandwriting(tag = 'usa-handwriting') {
     return defineElement(tag, (Base) => class extends Base {
@@ -2198,7 +2234,7 @@ function defineHandwriting(tag = 'usa-handwriting') {
                 this.emit('complete');
             }, this.reduced ? 0 : this.num('duration', 2400));
         }
-    }, { id: 'text-fx', text: css$Y });
+    }, { id: 'text-fx', text: css$X });
 }
 function defineScrollHighlight(tag = 'usa-scroll-highlight') {
     return defineElement(tag, (Base) => class extends Base {
@@ -2262,7 +2298,7 @@ function defineScrollHighlight(tag = 'usa-scroll-highlight') {
             caf(this._f);
             this._f = 0;
         }
-    }, { id: 'text-fx', text: css$Y });
+    }, { id: 'text-fx', text: css$X });
 }
 
 /**
@@ -2285,7 +2321,7 @@ function defineTextComponents() {
     defineScrollHighlight();
 }
 
-var css$X = "";
+var css$W = "";
 
 function defineRipple(tag = 'usa-ripple') {
     return defineElement(tag, (Base) => class UsaRipple extends Base {
@@ -2332,10 +2368,10 @@ function defineRipple(tag = 'usa-ripple') {
             else
                 setTimeout(() => wave.remove(), 0);
         }
-    }, { id: 'ripple', text: css$X });
+    }, { id: 'ripple', text: css$W });
 }
 
-var css$W = "";
+var css$V = "";
 
 function defineMagnetic(tag = 'usa-magnetic') {
     return defineElement(tag, (Base) => class UsaMagnetic extends Base {
@@ -2392,10 +2428,10 @@ function defineMagnetic(tag = 'usa-magnetic') {
             this._frame = 0;
             this.release();
         }
-    }, { id: 'magnetic', text: css$W });
+    }, { id: 'magnetic', text: css$V });
 }
 
-var css$V = "";
+var css$U = "";
 
 function defineTilt(tag = 'usa-tilt') {
     return defineElement(tag, (Base) => class UsaTilt extends Base {
@@ -2464,10 +2500,10 @@ function defineTilt(tag = 'usa-tilt') {
         unmount() {
             this.reset();
         }
-    }, { id: 'tilt', text: css$V });
+    }, { id: 'tilt', text: css$U });
 }
 
-var css$U = "";
+var css$T = "";
 
 function defineSpotlight(tag = 'usa-spotlight') {
     return defineElement(tag, (Base) => class UsaSpotlight extends Base {
@@ -2529,10 +2565,10 @@ function defineSpotlight(tag = 'usa-spotlight') {
             this._frame = 0;
             this.removeAttribute('data-lit');
         }
-    }, { id: 'spotlight', text: css$U });
+    }, { id: 'spotlight', text: css$T });
 }
 
-var css$T = "";
+var css$S = "";
 
 function definePress(tag = 'usa-press') {
     return defineElement(tag, (Base) => class UsaPress extends Base {
@@ -2598,7 +2634,7 @@ function definePress(tag = 'usa-press') {
             this._anim = null;
             this._down = false;
         }
-    }, { id: 'press', text: css$T });
+    }, { id: 'press', text: css$S });
 }
 
 /**
@@ -2615,7 +2651,7 @@ function defineInteractionComponents() {
     definePress();
 }
 
-var css$S = "";
+var css$R = "";
 
 const SPINNER_VARIANTS = ['fluent', 'windows', 'ring', 'dots', 'pulse', 'bars'];
 function markup(variant) {
@@ -2661,10 +2697,10 @@ function defineSpinner(tag = 'usa-spinner') {
             if (!this.hasAttribute('aria-label') || this.hasAttribute('label'))
                 this.setAttribute('aria-label', this.str('label', 'Loading'));
         }
-    }, { id: 'spinner', text: css$S });
+    }, { id: 'spinner', text: css$R });
 }
 
-var css$R = "";
+var css$Q = "";
 
 function defineSkeleton(tag = 'usa-skeleton') {
     return defineElement(tag, (Base) => class UsaSkeleton extends Base {
@@ -2744,10 +2780,10 @@ function defineSkeleton(tag = 'usa-skeleton') {
             }
             this.emit('loaded');
         }
-    }, { id: 'skeleton', text: css$R });
+    }, { id: 'skeleton', text: css$Q });
 }
 
-var css$Q = "";
+var css$P = "";
 
 function defineProgress(tag = 'usa-progress') {
     return defineElement(tag, (Base) => class UsaProgress extends Base {
@@ -2810,10 +2846,10 @@ function defineProgress(tag = 'usa-progress') {
             if (ratio === 1)
                 this.emit('complete');
         }
-    }, { id: 'progress', text: css$Q });
+    }, { id: 'progress', text: css$P });
 }
 
-var css$P = "";
+var css$O = "";
 
 const ICONS = {
     info: '<path d="M12 8h.01M11 12h1v5h1"/>',
@@ -2929,7 +2965,7 @@ function defineToaster(tag = 'usa-toaster') {
         clear() {
             this.querySelectorAll('.usa-toast').forEach((t) => t._close?.());
         }
-    }, { id: 'toast', text: css$P });
+    }, { id: 'toast', text: css$O });
 }
 /**
  * Show a toast. Defines `<usa-toaster>` and adds one to `<body>` if the
@@ -2950,7 +2986,7 @@ function toast(message, options = {}) {
     return host.show(message, options);
 }
 
-var css$O = "";
+var css$N = "";
 
 const PATHS = {
     success: 'M15 27 l7 7 l14 -15',
@@ -3027,7 +3063,7 @@ function defineCheck(tag = 'usa-check') {
                     done();
             });
         }
-    }, { id: 'check', text: css$O });
+    }, { id: 'check', text: css$N });
 }
 
 /**
@@ -3044,7 +3080,7 @@ function defineFeedbackComponents() {
     defineCheck();
 }
 
-var css$N = "";
+var css$M = "";
 
 function defineAurora(tag = 'usa-aurora') {
     return defineElement(tag, (Base) => class UsaAurora extends Base {
@@ -3072,10 +3108,10 @@ function defineAurora(tag = 'usa-aurora') {
             this.style.setProperty('--usa-aurora-opacity', String(this.num('intensity', 0.7)));
             this.inView((v) => this.toggleAttribute('data-offscreen', !v));
         }
-    }, { id: 'aurora', text: css$N });
+    }, { id: 'aurora', text: css$M });
 }
 
-var css$M = "";
+var css$L = "";
 
 function defineParticles(tag = 'usa-particles') {
     return defineElement(tag, (Base) => class UsaParticles extends Base {
@@ -3234,10 +3270,10 @@ function defineParticles(tag = 'usa-particles') {
             }
             ctx.globalAlpha = 1;
         }
-    }, { id: 'particles', text: css$M });
+    }, { id: 'particles', text: css$L });
 }
 
-var css$L = "";
+var css$K = "";
 
 const noise = (freq) => `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='${freq}' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1.6 -0.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`;
 function defineGrain(tag = 'usa-grain') {
@@ -3262,10 +3298,10 @@ function defineGrain(tag = 'usa-grain') {
             s.opacity = String(this.num('opacity', 0.12));
             s.mixBlendMode = this.str('blend', 'overlay');
         }
-    }, { id: 'grain', text: css$L });
+    }, { id: 'grain', text: css$K });
 }
 
-var css$K = "";
+var css$J = "";
 
 function defineMarquee(tag = 'usa-marquee') {
     return defineElement(tag, (Base) => class UsaMarquee extends Base {
@@ -3385,10 +3421,10 @@ function defineMarquee(tag = 'usa-marquee') {
             else
                 super.changed(name);
         }
-    }, { id: 'marquee', text: css$K });
+    }, { id: 'marquee', text: css$J });
 }
 
-var css$J = "";
+var css$I = "";
 
 function defineAcrylic(tag = 'usa-acrylic') {
     return defineElement(tag, (Base) => class UsaAcrylic extends Base {
@@ -3409,10 +3445,10 @@ function defineAcrylic(tag = 'usa-acrylic') {
                 this.setAttribute('data-shine', '');
             }
         }
-    }, { id: 'acrylic', text: css$J });
+    }, { id: 'acrylic', text: css$I });
 }
 
-var css$I = "";
+var css$H = "";
 
 /** Shared canvas setup: DPR ≤ 2, resize with the host, run only while visible & tab shown. */
 function canvasLoop(host, draw, still) {
@@ -3487,7 +3523,7 @@ function defineGridGlow(tag = 'usa-grid-glow') {
             });
             this.onCleanup(() => caf(f));
         }
-    }, { id: 'bg-fx', text: css$I });
+    }, { id: 'bg-fx', text: css$H });
 }
 function defineBlobs(tag = 'usa-blobs') {
     return defineElement(tag, (Base) => class extends Base {
@@ -3502,7 +3538,7 @@ function defineBlobs(tag = 'usa-blobs') {
             this.style.setProperty('--usa-blobs-speed', String(this.num('speed', 1)));
             this.style.setProperty('--usa-blobs-blur', `${this.num('blur', 60)}px`);
         }
-    }, { id: 'bg-fx', text: css$I });
+    }, { id: 'bg-fx', text: css$H });
 }
 function defineWaterRipple(tag = 'usa-water-ripple') {
     return defineElement(tag, (Base) => class extends Base {
@@ -3564,7 +3600,7 @@ function defineWaterRipple(tag = 'usa-water-ripple') {
                 this.drop(e.clientX - r.left, e.clientY - r.top, 1.5);
             });
         }
-    }, { id: 'bg-fx', text: css$I });
+    }, { id: 'bg-fx', text: css$H });
 }
 function defineDotNetwork(tag = 'usa-dot-network') {
     return defineElement(tag, (Base) => class extends Base {
@@ -3607,10 +3643,10 @@ function defineDotNetwork(tag = 'usa-dot-network') {
                 }
             }, this.reduced);
         }
-    }, { id: 'bg-fx', text: css$I });
+    }, { id: 'bg-fx', text: css$H });
 }
 
-var css$H = "";
+var css$G = "";
 
 /**
  * Style variants (v2.6): `variant="minimal | neon | glass | brutalist |
@@ -3628,7 +3664,7 @@ var css$H = "";
 const VARIANTS = ['minimal', 'neon', 'glass', 'brutalist', 'fluent', 'material'];
 /** Inject the variant token sheet (done automatically by every `ui` component). */
 function adoptVariants() {
-    adoptStyles('variants', css$H);
+    adoptStyles('variants', css$G);
 }
 /** Apply a variant to the whole page (or `root`); `null` removes it. */
 function setVariant(variant, root = typeof document !== 'undefined' ? document.documentElement : null) {
@@ -3641,7 +3677,7 @@ function setVariant(variant, root = typeof document !== 'undefined' ? document.d
         root.removeAttribute('data-usa-variant');
 }
 
-var css$G = "";
+var css$F = "";
 
 /**
  * Windows 11 **Fluent preset** (v2.8): applies the `fluent` variant
@@ -3656,7 +3692,7 @@ function fluentPreset(options = {}) {
     if (typeof document === 'undefined')
         return () => undefined;
     const root = options.root || document.documentElement;
-    adoptStyles('fluent-preset', css$G);
+    adoptStyles('fluent-preset', css$F);
     setVariant('fluent', root);
     root.classList.add('usa-fluent');
     if (options.mica !== false)
@@ -3719,7 +3755,7 @@ function defineBackgroundComponents() {
 
 var shadowCss = ":host{display:contents}dialog{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:inherit;overflow:hidden}dialog:not([open]){display:none}dialog::backdrop{background:transparent}[part=\"backdrop\"]{position:absolute;inset:0;background:var(--usa-dialog-backdrop,rgb(0 0 0 / 0.42))}[part=\"panel\"]{position:absolute;left:50%;top:50%;translate:-50% -50%;box-sizing:border-box;width:min(var(--usa-dialog-width,480px),calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;padding:var(--usa-dialog-padding,24px);border-radius:var(--usa-dialog-radius,12px);background:var(--usa-dialog-bg,Canvas);color:var(--usa-dialog-fg,CanvasText);box-shadow:0 32px 64px -12px rgb(0 0 0 / 0.45),0 0 0 1px rgb(127 127 127 / 0.18)}dialog[data-kind^=\"drawer\"] [part=\"panel\"]{top:0;bottom:0;translate:none;max-height:none;height:100%;border-radius:0;width:min(var(--usa-dialog-width,380px),88vw)}dialog[data-kind=\"drawer-start\"] [part=\"panel\"]{left:0}dialog[data-kind=\"drawer-end\"] [part=\"panel\"]{left:auto;right:0}dialog[data-kind=\"drawer-bottom\"] [part=\"panel\"],dialog[data-kind=\"sheet\"] [part=\"panel\"]{top:auto;bottom:0;left:0;right:0;translate:none;width:100%;height:auto;max-height:85vh;border-radius:var(--usa-dialog-radius,16px) var(--usa-dialog-radius,16px) 0 0}dialog[data-kind=\"sheet\"] [part=\"panel\"]{left:50%;translate:-50% 0;width:min(var(--usa-dialog-width,560px),100vw)}";
 
-var css$F = "";
+var css$E = "";
 
 const FROM = {
     modal: 'scale(0.94)',
@@ -3874,10 +3910,10 @@ function defineDialog(tag = 'usa-dialog') {
             const b = this._backdrop ? this.motion(this._backdrop, backdrop, { duration, easing: 'linear', fill }) : null;
             return Promise.all([a?.finished, b?.finished].map((p) => p?.catch(() => undefined))).then(() => undefined);
         }
-    }, { id: 'dialog', text: css$F });
+    }, { id: 'dialog', text: css$E });
 }
 
-var css$E = "";
+var css$D = "";
 
 function defineAccordion(tag = 'usa-accordion') {
     return defineElement(tag, (Base) => class UsaAccordion extends Base {
@@ -3943,10 +3979,10 @@ function defineAccordion(tag = 'usa-accordion') {
                 d.removeAttribute('data-closing');
             }
         }
-    }, { id: 'accordion', text: css$E });
+    }, { id: 'accordion', text: css$D });
 }
 
-var css$D = "";
+var css$C = "";
 
 function defineViewSwitch(tag = 'usa-view-switch') {
     return defineElement(tag, (Base) => class UsaViewSwitch extends Base {
@@ -4039,7 +4075,7 @@ function defineViewSwitch(tag = 'usa-view-switch') {
                 this.setVisible(from, false);
             a?.cancel();
         }
-    }, { id: 'view-switch', text: css$D });
+    }, { id: 'view-switch', text: css$C });
 }
 
 /**
@@ -4351,7 +4387,7 @@ function rubberBand(distance, dimension, constant = 0.55) {
     return sign * (1 - 1 / ((d * constant) / dimension + 1)) * dimension;
 }
 
-var css$C = "";
+var css$B = "";
 
 const SPRING_EFFECTS = ['bounce-in', 'pop', 'drop', 'jelly', 'rubber-band'];
 /** Entrance effects start hidden; attention effects (jelly, rubber-band) play on visible content. */
@@ -4466,10 +4502,10 @@ function defineSpring(tag = 'usa-spring') {
             this.setAttribute('data-state', 'done');
             this.emit('complete', { effect });
         }
-    }, { id: 'spring', text: css$C });
+    }, { id: 'spring', text: css$B });
 }
 
-var css$B = "";
+var css$A = "";
 
 const parseSnap = (s) => {
     if (!s.trim())
@@ -4666,10 +4702,10 @@ function defineDraggable(tag = 'usa-draggable') {
         reset() {
             this.go(0, 0);
         }
-    }, { id: 'draggable', text: css$B });
+    }, { id: 'draggable', text: css$A });
 }
 
-var css$A = "";
+var css$z = "";
 
 function defineOverscroll(tag = 'usa-overscroll') {
     return defineElement(tag, (Base) => class UsaOverscroll extends Base {
@@ -4758,7 +4794,7 @@ function defineOverscroll(tag = 'usa-overscroll') {
             this._spring?.stop();
             this.set(0);
         }
-    }, { id: 'overscroll', text: css$A });
+    }, { id: 'overscroll', text: css$z });
 }
 
 /**
@@ -4775,7 +4811,7 @@ function definePhysicsComponents() {
     defineOverscroll();
 }
 
-var css$z = "";
+var css$y = "";
 
 const CARD_EFFECTS = ['flip', 'holo', 'glass', 'border-glow', 'conic-border', 'lift', 'spotlight', 'sheen', 'parallax-layers', 'expand'];
 /** Effects that follow the pointer (they share one rAF-throttled tracker). */
@@ -4980,7 +5016,7 @@ function defineCard(tag = 'usa-card') {
             const a = this.motion(this, [{ transformOrigin: '0 0', transform: `translate(${dx}px, ${dy}px) scale(${sx}, ${sy})` }, { transformOrigin: '0 0', transform: 'none' }], { duration: Math.min(duration, 900), easing: easing || EASE_OUT });
             await a?.finished.catch(() => undefined);
         }
-    }, { id: 'card', text: css$z });
+    }, { id: 'card', text: css$y });
 }
 function deco(cls) {
     const s = document.createElement('span');
@@ -4994,7 +5030,7 @@ function interactive(t, host) {
     return !!el && el !== host && host.contains(el);
 }
 
-var css$y = "";
+var css$x = "";
 
 function defineCardStack(tag = 'usa-card-stack') {
     return defineElement(tag, (Base) => class UsaCardStack extends Base {
@@ -5117,10 +5153,10 @@ function defineCardStack(tag = 'usa-card-stack') {
             if (!this.top)
                 this.emit('empty');
         }
-    }, { id: 'card-stack', text: css$y });
+    }, { id: 'card-stack', text: css$x });
 }
 
-var css$x = "";
+var css$w = "";
 
 function defineStickyStack(tag = 'usa-sticky-stack') {
     return defineElement(tag, (Base) => class UsaStickyStack extends Base {
@@ -5184,10 +5220,10 @@ function defineStickyStack(tag = 'usa-sticky-stack') {
                 c.style.filter = covered > 0.001 ? `brightness(${(1 - Math.min(0.35, covered * 0.12)).toFixed(3)})` : '';
             });
         }
-    }, { id: 'sticky-stack', text: css$x });
+    }, { id: 'sticky-stack', text: css$w });
 }
 
-var css$w = "";
+var css$v = "";
 
 function defineCarousel3d(tag = 'usa-carousel-3d') {
     return defineElement(tag, (Base) => class UsaCarousel3d extends Base {
@@ -5306,7 +5342,7 @@ function defineCarousel3d(tag = 'usa-carousel-3d') {
         prev() {
             this.goTo(this._i - 1);
         }
-    }, { id: 'carousel-3d', text: css$w });
+    }, { id: 'carousel-3d', text: css$v });
 }
 
 /**
@@ -5429,7 +5465,7 @@ function haptic(pattern = 10) {
     }
 }
 
-var css$v = "";
+var css$u = "";
 
 const CLICK_EFFECTS = ['ripple', 'burst', 'confetti', 'squish', 'press-spring', 'shake'];
 function defineClick(tag = 'usa-click') {
@@ -5553,10 +5589,10 @@ function defineClick(tag = 'usa-click') {
                 : [{ transform: from }, { transform: 'none' }];
             this._press = this.motion(this, frames, fx.includes('squish') ? { duration: 520, easing: 'ease-out' } : springEasing('bouncy'));
         }
-    }, { id: 'click', text: css$v });
+    }, { id: 'click', text: css$u });
 }
 
-var css$u = "";
+var css$t = "";
 
 const BUTTON_DEFORMS = ['squash', 'wobble', 'gooey', 'dent'];
 let gooInjected = false;
@@ -5823,10 +5859,10 @@ function defineButton(tag = 'usa-button') {
             }
             this.emit('state', { state: s });
         }
-    }, { id: 'button', text: css$u });
+    }, { id: 'button', text: css$t });
 }
 
-var css$t = "";
+var css$s = "";
 
 const C = [[12, 12], [12, 12], [12, 12], [12, 12]];
 /**
@@ -5934,10 +5970,10 @@ function defineIconMorph(tag = 'usa-icon-morph') {
         next() {
             this.show(this._i + 1);
         }
-    }, { id: 'icon-morph', text: css$t });
+    }, { id: 'icon-morph', text: css$s });
 }
 
-var css$s = "";
+var css$r = "";
 
 const HEART = 'M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 4.5 6.7 4.5c2.1 0 3.6 1.2 5.3 3.2 1.7-2 3.2-3.2 5.3-3.2 3.7 0 5.8 3.9 4.3 7.3C19.5 16.4 12 21 12 21z';
 function defineLike(tag = 'usa-like') {
@@ -6013,10 +6049,10 @@ function defineLike(tag = 'usa-like') {
             this.dispatchEvent(new Event('change', { bubbles: true }));
             this.emit('change', { liked: next, count: this.count });
         }
-    }, { id: 'like', text: css$s });
+    }, { id: 'like', text: css$r });
 }
 
-var css$r = "";
+var css$q = "";
 
 function defineHold(tag = 'usa-hold') {
     return defineElement(tag, (Base) => class UsaHold extends Base {
@@ -6127,10 +6163,10 @@ function defineHold(tag = 'usa-hold') {
         cancel() {
             this.stop();
         }
-    }, { id: 'hold', text: css$r });
+    }, { id: 'hold', text: css$q });
 }
 
-var css$q = "";
+var css$p = "";
 
 function defineDoubleTap(tag = 'usa-double-tap') {
     return defineElement(tag, (Base) => class UsaDoubleTap extends Base {
@@ -6188,10 +6224,10 @@ function defineDoubleTap(tag = 'usa-double-tap') {
                 haptic(15);
             this.emit('double-tap', { x: x - r.left, y: y - r.top });
         }
-    }, { id: 'double-tap', text: css$q });
+    }, { id: 'double-tap', text: css$p });
 }
 
-var css$p = "";
+var css$o = "";
 
 function defineCheckbox(tag = 'usa-checkbox') {
     return defineElement(tag, (Base) => {
@@ -6263,7 +6299,7 @@ function defineCheckbox(tag = 'usa-checkbox') {
         }
         UsaCheckbox.formAssociated = true;
         return UsaCheckbox;
-    }, { id: 'checkbox', text: css$p });
+    }, { id: 'checkbox', text: css$o });
 }
 
 /**
@@ -6318,7 +6354,7 @@ function place(floating, anchor, placement = 'top', gap = 8) {
 let uid = 0;
 const nextId = (prefix) => `${prefix}-${++uid}`;
 
-var css$o = "";
+var css$n = "";
 
 function defineTabs(tag = 'usa-tabs') {
     adoptVariants();
@@ -6421,10 +6457,10 @@ function defineTabs(tag = 'usa-tabs') {
                 this.motion(p, [{ opacity: 0, transform: `translateX(${i > prev ? 16 : -16}px)` }, { opacity: 1, transform: 'none' }], { duration: 280, easing: 'cubic-bezier(0.22, 1, 0.36, 1)' });
             this.emit('change', { index: i });
         }
-    }, { id: 'tabs', text: css$o });
+    }, { id: 'tabs', text: css$n });
 }
 
-var css$n = "";
+var css$m = "";
 
 /** Shared machinery of `<usa-drawer>` and `<usa-bottom-sheet>`: backdrop, focus, Esc, drag-to-dismiss. */
 function makePanel(Base, kind) {
@@ -6581,7 +6617,7 @@ function makePanel(Base, kind) {
 }
 function defineDrawer(tag = 'usa-drawer') {
     adoptVariants();
-    return defineElement(tag, (Base) => makePanel(Base, 'drawer'), { id: 'sheet', text: css$n });
+    return defineElement(tag, (Base) => makePanel(Base, 'drawer'), { id: 'sheet', text: css$m });
 }
 function defineBottomSheet(tag = 'usa-bottom-sheet') {
     adoptVariants();
@@ -6624,10 +6660,10 @@ function defineBottomSheet(tag = 'usa-bottom-sheet') {
                 super.render(v);
             }
         };
-    }, { id: 'sheet', text: css$n });
+    }, { id: 'sheet', text: css$m });
 }
 
-var css$m = "";
+var css$l = "";
 
 function definePullRefresh(tag = 'usa-pull-refresh') {
     adoptVariants();
@@ -6726,10 +6762,10 @@ function definePullRefresh(tag = 'usa-pull-refresh') {
                     Promise.resolve(fn(ev)).then(done, done);
             });
         }
-    }, { id: 'pull-refresh', text: css$m });
+    }, { id: 'pull-refresh', text: css$l });
 }
 
-var css$l = "";
+var css$k = "";
 
 function defineFab(tag = 'usa-fab') {
     adoptVariants();
@@ -6815,10 +6851,10 @@ function defineFab(tag = 'usa-fab') {
             this.apply(true);
             this.emit('toggle', { open: next });
         }
-    }, { id: 'fab', text: css$l });
+    }, { id: 'fab', text: css$k });
 }
 
-var css$k = "";
+var css$j = "";
 
 function defineNavbar(tag = 'usa-navbar') {
     adoptVariants();
@@ -6871,10 +6907,10 @@ function defineNavbar(tag = 'usa-navbar') {
             this.removeAttribute('data-hidden');
             this.emit('show');
         }
-    }, { id: 'navbar', text: css$k });
+    }, { id: 'navbar', text: css$j });
 }
 
-var css$j = "";
+var css$i = "";
 
 function defineSlider(tag = 'usa-slider') {
     adoptVariants();
@@ -6995,96 +7031,7 @@ function defineSlider(tag = 'usa-slider') {
         }
         UsaSlider.formAssociated = true;
         return UsaSlider;
-    }, { id: 'slider', text: css$j });
-}
-
-var css$i = "";
-
-function defineRating(tag = 'usa-rating') {
-    adoptVariants();
-    return defineElement(tag, (Base) => {
-        class UsaRating extends Base {
-            static get observedAttributes() {
-                return ['max', 'icon', 'readonly'];
-            }
-            constructor() {
-                super();
-                this._internals = null;
-                try {
-                    this._internals = this.attachInternals?.() ?? null;
-                }
-                catch {
-                    this._internals = null;
-                }
-            }
-            get value() {
-                return clamp(this.num('value', 0), 0, this.num('max', 5));
-            }
-            set value(v) {
-                this.setAttribute('value', String(clamp(Math.round(v), 0, this.num('max', 5))));
-                this.sync();
-            }
-            mount() {
-                deprecate('usa-rating', '<usa-rating> is deprecated and removed in 8.0 — use <usa-star-rating> (same value / max / readonly / label / name; icon="heart"). Run `npx usa-codemod-8 --write src`.');
-                const max = this.num('max', 5);
-                this.innerHTML = Array.from({ length: max }, (_, i) => `<span class="usa-rating-star" data-i="${i + 1}" aria-hidden="true">${this.str('icon', '★')}</span>`).join('');
-                this.setAttribute('role', 'slider');
-                this.setAttribute('aria-valuemin', '0');
-                this.setAttribute('aria-valuemax', String(max));
-                this.setAttribute('aria-label', this.str('label', 'Rating'));
-                if (this.flag('readonly'))
-                    this.setAttribute('aria-readonly', 'true');
-                else if (!this.hasAttribute('tabindex'))
-                    this.tabIndex = 0;
-                this.sync();
-                if (this.flag('readonly'))
-                    return;
-                this.listen(this, 'pointerover', (e) => {
-                    const s = e.target.closest?.('[data-i]');
-                    if (s)
-                        this.preview(Number(s.dataset.i));
-                });
-                this.listen(this, 'pointerleave', () => this.preview(0));
-                this.listen(this, 'click', (e) => {
-                    const s = e.target.closest?.('[data-i]');
-                    if (s)
-                        this.choose(Number(s.dataset.i) === this.value ? 0 : Number(s.dataset.i));
-                });
-                this.listen(this, 'keydown', (e) => {
-                    const v = this.value;
-                    const map = { ArrowRight: v + 1, ArrowUp: v + 1, ArrowLeft: v - 1, ArrowDown: v - 1, Home: 0, End: max };
-                    const n = /^[0-9]$/.test(e.key) ? Number(e.key) : map[e.key];
-                    if (n === undefined)
-                        return;
-                    e.preventDefault();
-                    this.choose(clamp(n, 0, max));
-                });
-            }
-            preview(n) {
-                this.querySelectorAll('[data-i]').forEach((s) => s.toggleAttribute('data-preview', n > 0 && Number(s.dataset.i) <= n));
-                this.toggleAttribute('data-previewing', n > 0);
-            }
-            sync() {
-                const v = this.value;
-                this.setAttribute('aria-valuenow', String(v));
-                this.setAttribute('aria-valuetext', `${v} of ${this.num('max', 5)}`);
-                this._internals?.setFormValue?.(String(v));
-                this.querySelectorAll('[data-i]').forEach((s) => s.toggleAttribute('data-on', Number(s.dataset.i) <= v));
-            }
-            choose(n) {
-                if (n === this.value)
-                    return;
-                this.value = n;
-                const star = this.querySelector(`[data-i="${n}"]`);
-                if (star && !this.reduced)
-                    this.motion(star, [{ transform: 'scale(0.5) rotate(-20deg)' }, { transform: 'scale(1) rotate(0)' }], springEasing('bouncy'));
-                this.dispatchEvent(new Event('change', { bubbles: true }));
-                this.emit('change', { value: n });
-            }
-        }
-        UsaRating.formAssociated = true;
-        return UsaRating;
-    }, { id: 'rating', text: css$i });
+    }, { id: 'slider', text: css$i });
 }
 
 var css$h = "";
@@ -7237,7 +7184,7 @@ function defineAvatarStack(tag = 'usa-avatar-stack') {
 /**
  * motionary/components/ui — animated UI components + style variants (v2.6).
  * `<usa-tabs>`, `<usa-drawer>`, `<usa-bottom-sheet>`, `<usa-pull-refresh>`,
- * `<usa-fab>`, `<usa-navbar>`, `<usa-slider>`, `<usa-rating>`,
+ * `<usa-fab>`, `<usa-navbar>`, `<usa-slider>`,
  * `<usa-popover>`, `<usa-badge>`, `<usa-avatar-stack>`,
  * and `variant="minimal | neon | glass | brutalist | fluent | material"`
  * design tokens (`setVariant()`, `VARIANTS`).
@@ -7251,7 +7198,6 @@ function defineUiComponents() {
     defineFab();
     defineNavbar();
     defineSlider();
-    defineRating();
     definePopover();
     defineBadge();
     defineAvatarStack();
@@ -10815,7 +10761,6 @@ exports.definePostFx = definePostFx;
 exports.definePress = definePress;
 exports.defineProgress = defineProgress;
 exports.definePullRefresh = definePullRefresh;
-exports.defineRating = defineRating;
 exports.defineReveal = defineReveal;
 exports.defineRevealComponents = defineRevealComponents;
 exports.defineRipple = defineRipple;