@esportsplus/ui 0.56.3 → 0.57.0

package/build/components/marquee/index.js

@@ -1,15 +1,21 @@
 import * as template_u1 from '@esportsplus/template';
 import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect, onCleanup, untrack } from '@esportsplus/reactivity';
+import { clamp } from '../../shared/clamp.js';
+import { observer } from '../../shared/resize.js';
+import { ticker } from '../../shared/ticker.js';
+import { observeIntersection } from '../../shared/visible.js';
+import * as scroll from './velocity.js';
 import './scss/index.scss';
-const template_1hvk8592 = template_u1.template(`<span aria-hidden='true' class='marquee-mark'></span><span class='marquee-label'>`);
-const template_1hvk8596 = template_u1.template(`<a class='marquee-item marquee-item--link'>`);
-const template_1hvk8599 = template_u1.template(`<button class='marquee-item marquee-item--link' type='button'>`);
-const template_1hvk859c = template_u1.template(`<span class='marquee-item'>`);
-const template_1hvk859f = template_u1.template(`<section class='marquee'><div class='marquee-viewport'><div class='marquee-track'>`);
-const template_1hvk859j = template_u1.template(`<ul class='marquee-group'>`);
-const template_1hvk859m = template_u1.template(`<li>`);
-const template_1hvk859p = template_u1.template(`<ul aria-hidden='true' class='marquee-group marquee-group--copy'>`);
-const template_1hvk859s = template_u1.template(`<li><span class='marquee-item'>`);
+const template_1hvk8593 = template_u1.template(`<span aria-hidden='true' class='marquee-mark'></span><span class='marquee-label'>`);
+const template_1hvk8597 = template_u1.template(`<a class='marquee-item marquee-item--link'>`);
+const template_1hvk859a = template_u1.template(`<button class='marquee-item marquee-item--link' type='button'>`);
+const template_1hvk859d = template_u1.template(`<span class='marquee-item'>`);
+const template_1hvk859g = template_u1.template(`<section class='marquee'><div class='marquee-viewport'><div class='marquee-track'>`);
+const template_1hvk859l = template_u1.template(`<ul class='marquee-group'>`);
+const template_1hvk859o = template_u1.template(`<li class='marquee-entry'>`);
+const template_1hvk859r = template_u1.template(`<ul aria-hidden='true' class='marquee-group marquee-group--copy'>`);
+const template_1hvk859u = template_u1.template(`<li class='marquee-entry'><span class='marquee-item'>`);
 class ReactiveObject_1hvk8590 extends reactivity_u0.ReactiveObject {
     #paused = this[reactivity_u0.SIGNAL](false);
     constructor() {
@@ -22,215 +28,275 @@ class ReactiveObject_1hvk8590 extends reactivity_u0.ReactiveObject {
         reactivity_u0.write(this.#paused, _v0);
     }
 }
+class ReactiveObject_1hvk8591 extends reactivity_u0.ReactiveObject {
+    #still = this[reactivity_u0.SIGNAL](false);
+    #x = this[reactivity_u0.SIGNAL](0);
+    constructor() {
+        super(null);
+    }
+    get still() {
+        return reactivity_u0.read(this.#still);
+    }
+    set still(_v0) {
+        reactivity_u0.write(this.#still, _v0);
+    }
+    get x() {
+        return reactivity_u0.read(this.#x);
+    }
+    set x(_v1) {
+        reactivity_u0.write(this.#x, _v1);
+    }
+}
 const RAMP = 0.19;
 const SETTLE = 0.16;
 const MAX_COPIES = 14;
 const MIN_COPIES = 4;
-function clamp(x, min, max) {
-    return x < min ? min : x > max ? max : x;
-}
 function fold(x, loop) {
     let m = x % loop;
     return m > 0 ? m - loop : m;
 }
-export default ({ direction = 'left', gap = 40, items, label = 'Logos', select, speed = 44, state = new ReactiveObject_1hvk8590(), ...attributes }) => {
-    let cleanup = [], copies = reactivity_u0.reactive(Array.from({ length: MIN_COPIES }, (_, i) => i)), frame = 0, held = false, near = false, nudge = 0, offset = 0, rate = 0, reduced = false, sign = direction === 'right' ? 1 : -1, span = 0;
+export default ({ direction = 'left', gap = 40, items, label = 'Logos', select, speed = 44, state = new ReactiveObject_1hvk8590(), velocity = false, ...attributes }) => {
+    let copies = reactivity_u0.reactive(Array.from({ length: MIN_COPIES }, (_, i) => i)), drift = 0, group, held = false, near = false, nudge = 0, offset = 0, rate = 0, sign = direction === 'right' ? 1 : -1, span = 0, stage = new ReactiveObject_1hvk8591(), stop, track, tracker, viewport;
     function face(item) {
         if (!item.mark) {
             return item.label;
         }
         return (() => {
-            let root_1hvk8591 = template_1hvk8592(), element_1hvk8593 = root_1hvk8591.firstChild, element_1hvk8594 = element_1hvk8593.nextSibling;
-            template_u1.slot(element_1hvk8593, item.mark(), 1);
-            template_u1.slot(element_1hvk8594, item.label, 1);
-            return root_1hvk8591;
+            let root_1hvk8592 = template_1hvk8593(), element_1hvk8594 = root_1hvk8592.firstChild, element_1hvk8595 = element_1hvk8594.nextSibling;
+            template_u1.slot(element_1hvk8594, item.mark(), 1);
+            template_u1.slot(element_1hvk8595, item.label, 1);
+            return root_1hvk8592;
         })();
     }
     function link(item) {
         if (item.href) {
             return (() => {
-                let root_1hvk8595 = template_1hvk8596(), element_1hvk8597 = root_1hvk8595.firstChild;
-                template_u1.setProperty(element_1hvk8597, 'href', item.href);
-                template_u1.slot(element_1hvk8597, face(item), 1);
-                return root_1hvk8595;
+                let root_1hvk8596 = template_1hvk8597(), element_1hvk8598 = root_1hvk8596.firstChild;
+                template_u1.slot(element_1hvk8598, face(item), 1);
+                template_u1.setProperty(element_1hvk8598, 'href', item.href);
+                return root_1hvk8596;
             })();
         }
         if (select) {
             return (() => {
-                let root_1hvk8598 = template_1hvk8599(), element_1hvk859a = root_1hvk8598.firstChild;
-                template_u1.delegate(element_1hvk859a, 'click', () => select(item));
-                template_u1.slot(element_1hvk859a, face(item), 1);
-                return root_1hvk8598;
+                let root_1hvk8599 = template_1hvk859a(), element_1hvk859b = root_1hvk8599.firstChild;
+                template_u1.slot(element_1hvk859b, face(item), 1);
+                template_u1.delegate(element_1hvk859b, 'click', () => select(item));
+                return root_1hvk8599;
             })();
         }
         return (() => {
-            let root_1hvk859b = template_1hvk859c(), element_1hvk859d = root_1hvk859b.firstChild;
-            template_u1.slot(element_1hvk859d, face(item), 1);
-            return root_1hvk859b;
+            let root_1hvk859c = template_1hvk859d(), element_1hvk859e = root_1hvk859c.firstChild;
+            template_u1.slot(element_1hvk859e, face(item), 1);
+            return root_1hvk859c;
         })();
     }
-    function listen(target, type, listener, options) {
-        target.addEventListener(type, listener, options);
-        cleanup.push(() => target.removeEventListener(type, listener, options));
+    function measure() {
+        if (!group || !track || !viewport) {
+            return;
+        }
+        let width = group.getBoundingClientRect().width, loop = width > 0 ? width + parseFloat(getComputedStyle(track).columnGap) : 0, room = viewport.getBoundingClientRect().width;
+        span = loop;
+        offset = loop > 0 ? clamp(offset, -loop, loop) : 0;
+        paint();
+        wake();
+        let next = stage.still || loop <= 0
+            ? MIN_COPIES
+            : clamp(Math.ceil(room / loop) + 3, MIN_COPIES, MAX_COPIES);
+        while (copies.$length < next) {
+            copies.push(copies.$length);
+        }
+        if (copies.$length > next) {
+            copies.splice(next);
+        }
     }
-    return (() => {
-        let root_1hvk859e = template_1hvk859f(), element_1hvk859g = root_1hvk859e.firstChild, element_1hvk859h = element_1hvk859g.firstElementChild.firstElementChild;
-        template_u1.setProperty(element_1hvk859g, 'aria-label', label);
-        template_u1.setList(element_1hvk859g, 'style', template_u1.interpolate(["--item-gap: ", (gap), "px"]));
-        template_u1.setProperties(element_1hvk859g, attributes);
-        template_u1.onconnect(element_1hvk859g, (element) => {
-            let group = element.querySelector('.marquee-group:not(.marquee-group--copy)'), media = matchMedia('(prefers-reduced-motion: reduce)'), track = element.querySelector('.marquee-track'), viewport = element.querySelector('.marquee-viewport');
-            function measure() {
-                let width = group.getBoundingClientRect().width, loop = width > 0 ? width + parseFloat(getComputedStyle(track).columnGap) : 0, room = viewport.getBoundingClientRect().width;
-                span = loop;
-                offset = loop > 0 ? clamp(offset, -loop, loop) : 0;
-                paint();
-                let next = reduced || loop <= 0
-                    ? MIN_COPIES
-                    : clamp(Math.ceil(room / loop) + 3, MIN_COPIES, MAX_COPIES);
-                while (copies.$length < next) {
-                    copies.push(copies.$length);
-                }
-                if (copies.$length > next) {
-                    copies.splice(next);
-                }
-            }
-            function motion() {
-                reduced = media.matches;
-                if (reduced) {
-                    viewport.setAttribute('tabindex', '0');
-                }
-                else {
-                    viewport.removeAttribute('tabindex');
-                }
-                measure();
-                run();
-            }
-            function paint() {
-                track.style.transform = `translate3d(${(reduced ? 0 : offset - span).toFixed(2)}px, 0, 0)`;
-            }
-            function reveal(node) {
-                let loop = span;
-                if (reduced || loop <= 0 || node === viewport) {
-                    return;
-                }
-                let box = node.getBoundingClientRect(), delta = 0, pad = 12, view = viewport.getBoundingClientRect();
-                if (box.left < view.left + pad) {
-                    delta = view.left + pad - box.left;
-                }
-                else if (box.right > view.right - pad) {
-                    delta = view.right - pad - box.right;
-                }
-                if (delta !== 0) {
-                    nudge = clamp(offset + nudge + delta, -loop, loop) - offset;
-                }
+    function motion() {
+        if (!track) {
+            return;
+        }
+        drift = parseFloat(getComputedStyle(track).getPropertyValue('--drift')) || 0;
+        stage.still = drift <= 0;
+        measure();
+        run();
+    }
+    function paint() {
+        stage.x = stage.still ? 0 : offset - span;
+    }
+    function reveal(node) {
+        let loop = span;
+        if (stage.still || loop <= 0 || !viewport || node === viewport) {
+            return;
+        }
+        let box = node.getBoundingClientRect(), delta = 0, pad = 12, view = viewport.getBoundingClientRect();
+        if (box.left < view.left + pad) {
+            delta = view.left + pad - box.left;
+        }
+        else if (box.right > view.right - pad) {
+            delta = view.right - pad - box.right;
+        }
+        if (delta !== 0) {
+            nudge = clamp(offset + nudge + delta, -loop, loop) - offset;
+            wake();
+        }
+    }
+    function run() {
+        sleep();
+        if (stage.still || !near) {
+            return;
+        }
+        let last = 0;
+        stop = ticker((now) => {
+            let dt = last ? Math.min((now - last) / 1000, 0.05) : 0, goal = held || state.paused ? 0 : 1, loop = span;
+            last = now;
+            if (loop <= 0) {
+                sleep();
+                return;
             }
-            function run() {
-                cancelAnimationFrame(frame);
-                frame = 0;
-                if (reduced || !near) {
-                    return;
-                }
-                let last = 0;
-                function tick(now) {
-                    frame = requestAnimationFrame(tick);
-                    let dt = last ? Math.min((now - last) / 1000, 0.05) : 0, loop = span;
-                    last = now;
-                    if (loop <= 0) {
-                        return;
-                    }
-                    rate += ((held || state.paused ? 0 : 1) - rate) * (1 - Math.exp(-dt / RAMP));
-                    let pull = nudge * (1 - Math.exp(-dt / SETTLE));
-                    nudge -= pull;
-                    let x = offset + sign * speed * rate * dt + pull;
-                    if (rate > 0.002 && Math.abs(nudge) < 0.25) {
-                        nudge = 0;
-                        x = fold(x, loop);
-                    }
-                    else {
-                        x = clamp(x, -loop, loop);
-                    }
-                    offset = x;
-                    paint();
+            rate += (goal - rate) * (1 - Math.exp(-dt / RAMP));
+            let pull = nudge * (1 - Math.exp(-dt / SETTLE));
+            nudge -= pull;
+            let boost = 0;
+            if (tracker) {
+                scroll.step(tracker, now, dt);
+                boost = Math.min(scroll.MAX_FACTOR, Math.abs(tracker.factor));
+                if (boost > 0.1) {
+                    sign = (direction === 'right' ? 1 : -1) * Math.sign(tracker.factor);
                 }
-                frame = requestAnimationFrame(tick);
             }
-            let resize = new ResizeObserver(measure);
-            resize.observe(viewport);
-            resize.observe(group);
-            cleanup.push(() => resize.disconnect());
-            if (typeof IntersectionObserver === 'undefined') {
-                near = true;
+            let x = offset + sign * speed * drift * rate * (1 + boost) * dt + pull;
+            if (rate > 0.002 && Math.abs(nudge) < 0.25) {
+                nudge = 0;
+                x = fold(x, loop);
             }
             else {
-                let intersection = new IntersectionObserver((entries) => {
-                    let entry = entries[entries.length - 1];
-                    if (entry && entry.isIntersecting !== near) {
-                        near = entry.isIntersecting;
-                        run();
-                    }
-                }, { rootMargin: '96px' });
-                intersection.observe(viewport);
-                cleanup.push(() => intersection.disconnect());
+                x = clamp(x, -loop, loop);
             }
-            listen(element, 'blur', () => held = false, true);
-            listen(element, 'focus', (e) => {
-                held = true;
-                reveal(e.target);
-            }, true);
-            listen(element, 'pointercancel', () => held = false);
-            listen(element, 'pointerdown', () => held = true);
-            listen(element, 'pointerenter', (e) => {
-                if (e.pointerType !== 'touch') {
-                    held = true;
-                }
-            });
-            listen(element, 'pointerleave', () => held = false);
-            listen(element, 'pointerup', (e) => {
-                if (e.pointerType === 'touch') {
-                    held = false;
-                }
-            });
-            listen(media, 'change', motion);
-            listen(viewport, 'scroll', () => {
-                if (reduced) {
-                    return;
-                }
-                viewport.scrollLeft = 0;
-                viewport.scrollTop = 0;
-            }, { passive: true });
-            listen(window, 'blur', () => held = false);
-            motion();
-        });
-        template_u1.ondisconnect(element_1hvk859g, () => {
-            cancelAnimationFrame(frame);
-            for (let i = 0, n = cleanup.length; i < n; i++) {
-                cleanup[i]();
+            offset = x;
+            paint();
+            if (!goal && rate < 0.002 && Math.abs(nudge) < 0.25 && (!tracker || scroll.settled(tracker, now))) {
+                sleep();
             }
-            cleanup.length = 0;
         });
-        element_1hvk859h.appendChild(new template_u1.ArraySlot(copies, (copy) => {
+    }
+    function sleep() {
+        stop?.();
+        stop = undefined;
+    }
+    function unhold() {
+        held = false;
+        wake();
+    }
+    function wake() {
+        if (!stop) {
+            run();
+        }
+    }
+    effect(() => {
+        if (!state.paused) {
+            untrack(wake);
+        }
+    });
+    return (() => {
+        let root_1hvk859f = template_1hvk859g(), element_1hvk859h = root_1hvk859f.firstChild, element_1hvk859i = element_1hvk859h.firstElementChild, element_1hvk859j = element_1hvk859i.firstElementChild;
+        element_1hvk859j.appendChild(new template_u1.ArraySlot(copies, (copy) => {
             if (copy === 1) {
                 return (() => {
-                    let root_1hvk859i = template_1hvk859j(), element_1hvk859k = root_1hvk859i.firstChild;
-                    template_u1.slot(element_1hvk859k, items.map((item) => {
-                        let root_1hvk859l = template_1hvk859m(), element_1hvk859n = root_1hvk859l.firstChild;
-                        template_u1.slot(element_1hvk859n, link(item), 1);
-                        return root_1hvk859l;
+                    let root_1hvk859k = template_1hvk859l(), element_1hvk859m = root_1hvk859k.firstChild;
+                    template_u1.slot(element_1hvk859m, items.map((item) => {
+                        let root_1hvk859n = template_1hvk859o(), element_1hvk859p = root_1hvk859n.firstChild;
+                        template_u1.slot(element_1hvk859p, link(item), 1);
+                        return root_1hvk859n;
                     }), 1);
-                    return root_1hvk859i;
+                    template_u1.onconnect(element_1hvk859m, (element) => {
+                        group = element;
+                    });
+                    return root_1hvk859k;
                 })();
             }
             return (() => {
-                let root_1hvk859o = template_1hvk859p(), element_1hvk859q = root_1hvk859o.firstChild;
-                template_u1.slot(element_1hvk859q, items.map((item) => {
-                    let root_1hvk859r = template_1hvk859s(), element_1hvk859t = root_1hvk859r.firstChild.firstElementChild;
-                    template_u1.slot(element_1hvk859t, item.mark ? item.mark() : item.label, 1);
-                    return root_1hvk859r;
+                let root_1hvk859q = template_1hvk859r(), element_1hvk859s = root_1hvk859q.firstChild;
+                template_u1.slot(element_1hvk859s, items.map((item) => {
+                    let root_1hvk859t = template_1hvk859u(), element_1hvk859v = root_1hvk859t.firstChild.firstElementChild;
+                    template_u1.slot(element_1hvk859v, item.mark ? item.mark() : item.label, 1);
+                    return root_1hvk859t;
                 }), 1);
-                return root_1hvk859o;
+                return root_1hvk859q;
             })();
         }, true).fragment);
-        return root_1hvk859e;
+        template_u1.onconnect(element_1hvk859j, (element) => {
+            track = element;
+        });
+        template_u1.delegate(element_1hvk859j, 'transitionend', (e) => {
+            if (e.target === e.currentTarget && e.propertyName === '--drift') {
+                motion();
+            }
+        });
+        template_u1.setList(element_1hvk859j, 'style', () => `transform: translate3d(${stage.x.toFixed(2)}px, 0, 0)`);
+        template_u1.onconnect(element_1hvk859i, (element) => {
+            viewport = element;
+        });
+        template_u1.on(element_1hvk859i, 'scroll', () => {
+            if (stage.still || !viewport) {
+                return;
+            }
+            viewport.scrollLeft = 0;
+            viewport.scrollTop = 0;
+        });
+        template_u1.setProperty(element_1hvk859i, 'tabindex', () => stage.still && '0');
+        template_u1.setProperty(element_1hvk859h, 'aria-label', label);
+        template_u1.setList(element_1hvk859h, 'style', template_u1.interpolate(["--item-gap: ", (gap), "px"]));
+        template_u1.setProperties(element_1hvk859h, attributes);
+        template_u1.setList(element_1hvk859h, 'class', () => stage.still && 'marquee--still');
+        template_u1.onconnect(element_1hvk859h, (element) => {
+            if (!group || !viewport) {
+                return;
+            }
+            let resize = observer(measure);
+            resize.observe(viewport);
+            resize.observe(group);
+            onCleanup(resize.disconnect);
+            if (velocity) {
+                let t = scroll.track(element, wake);
+                tracker = t;
+                onCleanup(() => {
+                    t.release(wake);
+                    tracker = undefined;
+                });
+            }
+            onCleanup(observeIntersection(viewport, (entries) => {
+                let entry = entries[entries.length - 1];
+                if (entry && entry.isIntersecting !== near) {
+                    near = entry.isIntersecting;
+                    run();
+                }
+            }, { rootMargin: '96px' }));
+            onCleanup(() => {
+                near = false;
+                sleep();
+            });
+            motion();
+        });
+        template_u1.on(element_1hvk859h, 'focusin', (e) => {
+            held = true;
+            reveal(e.target);
+        });
+        template_u1.on(element_1hvk859h, 'focusout', unhold);
+        template_u1.delegate(element_1hvk859h, 'pointercancel', unhold);
+        template_u1.delegate(element_1hvk859h, 'pointerdown', () => {
+            held = true;
+        });
+        template_u1.on(element_1hvk859h, 'pointerenter', (e) => {
+            if (e.pointerType !== 'touch') {
+                held = true;
+            }
+        });
+        template_u1.on(element_1hvk859h, 'pointerleave', unhold);
+        template_u1.delegate(element_1hvk859h, 'pointerup', (e) => {
+            if (e.pointerType === 'touch') {
+                unhold();
+            }
+        });
+        template_u1.onwindow(element_1hvk859h, 'blur', unhold);
+        return root_1hvk859f;
     })();
 };

package/build/components/marquee/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.marquee{--color:var(--color-text-300);--color-hover:var(--color-text-400);--fade:var(--size-700);--focus-color:var(--color-blue-400);--font-size:var(--font-size-300);--font-weight:var(--font-weight-500);--item-border-radius:var(--border-radius-300);--item-gap:40px;--item-height:40px;--item-padding-horizontal:var(--size-300);--transition-duration:.15s}.marquee-viewport{--padding-vertical:var(--size-200)}.marquee{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);isolation:isolate;width:100%;min-width:0;max-width:100%;position:relative;overflow:hidden}.marquee-group{align-items:center;gap:var(--item-gap);width:max-content;margin:0;padding:0;list-style:none;display:flex}.marquee-group li{flex-shrink:0}.marquee-item{border-radius:var(--item-border-radius);color:inherit;align-items:center;gap:var(--size-200);height:var(--item-height);letter-spacing:-.01em;padding:0 var(--item-padding-horizontal);white-space:nowrap;flex-shrink:0;text-decoration:none;display:inline-flex}.marquee-item--link{cursor:pointer;font:inherit;transition:background-color var(--transition-duration), box-shadow var(--transition-duration), color var(--transition-duration);background:0 0;border:0;outline:none}.marquee-item--link:focus-visible{background:color-mix(in srgb, var(--focus-color) 8%, transparent);box-shadow:inset 0 0 0 1px var(--focus-color)}.marquee-item--link:focus-visible,.marquee-item--link:hover{color:var(--color-hover)}.marquee-label{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.marquee-mark{display:contents}.marquee-track{align-items:center;gap:var(--item-gap);will-change:transform;width:max-content;transition:none;display:flex}.marquee-viewport{-webkit-mask:linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);-webkit-mask:linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);mask:linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);padding:var(--padding-vertical) 0;outline:none;overflow:hidden}.marquee-viewport:focus-visible{box-shadow:inset 0 0 0 1px var(--focus-color)}@media (prefers-reduced-motion:reduce){.marquee-group--copy{display:none}.marquee-track{will-change:auto}.marquee-viewport{overflow-x:auto}}}
+@layer components{.marquee-label{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.marquee-group{margin:0;padding:0;list-style:none}.marquee{--color:var(--color-text-300);--color-hover:var(--color-text-400);--copy-display:flex;--drift:1;--fade:var(--size-700);--focus-color:var(--color-blue-400);--font-size:var(--font-size-300);--font-weight:var(--font-weight-500);--item-border-radius:var(--border-radius-300);--item-gap:40px;--item-height:40px;--item-padding-horizontal:var(--size-300);--track-will-change:transform;--transition-duration:.15s;--viewport-overflow-x:hidden}@media (prefers-reduced-motion:reduce){.marquee{--drift:0}}.marquee--still{--copy-display:none;--track-will-change:auto;--viewport-overflow-x:auto}.marquee-viewport{--padding-vertical:var(--size-200)}@property --drift{syntax:"<number>";inherits:true;initial-value:1}.marquee{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);isolation:isolate;width:100%;min-width:0;max-width:100%;position:relative;overflow:hidden}.marquee-entry{flex-shrink:0}.marquee-group{align-items:center;gap:var(--item-gap);width:max-content;display:flex}.marquee-group--copy{display:var(--copy-display)}.marquee-item{border-radius:var(--item-border-radius);color:inherit;align-items:center;gap:var(--size-200);height:var(--item-height);letter-spacing:-.01em;padding:0 var(--item-padding-horizontal);white-space:nowrap;flex-shrink:0;text-decoration:none;display:inline-flex}.marquee-item--link{cursor:pointer;font:inherit;transition:background-color var(--transition-duration), box-shadow var(--transition-duration), color var(--transition-duration);background:0 0;border:0;outline:none}.marquee-item--link:focus-visible{background:color-mix(in srgb, var(--focus-color) 8%, transparent);box-shadow:inset 0 0 0 1px var(--focus-color)}.marquee-item--link:focus-visible,.marquee-item--link:hover{color:var(--color-hover)}.marquee-mark{display:contents}.marquee-track{align-items:center;gap:var(--item-gap);will-change:var(--track-will-change);width:max-content;transition:--drift 1ms;display:flex}.marquee-viewport{-webkit-mask:linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);-webkit-mask:linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);mask:linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);overflow:hidden;overflow-x:var(--viewport-overflow-x);padding:var(--padding-vertical) 0;outline:none}.marquee-viewport:focus-visible{box-shadow:inset 0 0 0 1px var(--focus-color)}}
 /*$vite$:1*/

package/build/components/marquee/velocity.d.ts

@@ -0,0 +1,17 @@
+type Tracker = {
+    factor: number;
+    position: number;
+    release: (wake: VoidFunction) => void;
+    smooth: number;
+    smoothRate: number;
+    stepped: number;
+    time: number;
+    velocity: number;
+    wakes: Set<VoidFunction>;
+};
+declare const MAX_FACTOR = 5;
+declare const settled: (t: Tracker, now: number) => boolean;
+declare const step: (t: Tracker, now: number, dt: number) => void;
+declare const track: (element: HTMLElement, wake: VoidFunction) => Tracker;
+export { MAX_FACTOR, settled, step, track };
+export type { Tracker };

package/build/components/marquee/velocity.js

@@ -0,0 +1,78 @@
+const DAMPING = 50;
+const MAX_FACTOR = 5;
+const SETTLE = 50;
+const STIFFNESS = 400;
+const SUBSTEP = 1 / 240;
+let trackers = new Map();
+function offset(scroller) {
+    return scroller instanceof Element ? scroller.scrollTop : window.scrollY;
+}
+function scroller(element) {
+    let node = element.parentElement;
+    while (node && node !== document.body && node !== document.documentElement) {
+        let overflow = getComputedStyle(node).overflowY;
+        if (overflow === 'auto' || overflow === 'scroll' || overflow === 'overlay') {
+            return node;
+        }
+        node = node.parentElement;
+    }
+    let overflow = getComputedStyle(document.body).overflowY;
+    if (overflow === 'auto' || overflow === 'scroll') {
+        return document.body;
+    }
+    return window;
+}
+const settled = (t, now) => {
+    return now - t.time > SETTLE && Math.abs(t.smooth) < 1 && Math.abs(t.smoothRate) < 1;
+};
+const step = (t, now, dt) => {
+    if (t.stepped === now) {
+        return;
+    }
+    let target = now - t.time > SETTLE ? 0 : t.velocity;
+    t.stepped = now;
+    for (let remaining = dt; remaining > 0; remaining -= SUBSTEP) {
+        let h = Math.min(remaining, SUBSTEP);
+        t.smoothRate += (STIFFNESS * (target - t.smooth) - DAMPING * t.smoothRate) * h;
+        t.smooth += t.smoothRate * h;
+    }
+    t.factor = Math.sign(t.smooth) * Math.min(MAX_FACTOR, (Math.abs(t.smooth) / 1000) * MAX_FACTOR);
+};
+const track = (element, wake) => {
+    let target = scroller(element), existing = trackers.get(target);
+    if (existing) {
+        existing.wakes.add(wake);
+        return existing;
+    }
+    let t = {
+        factor: 0,
+        position: offset(target),
+        release: (wake) => {
+            t.wakes.delete(wake);
+            if (t.wakes.size > 0) {
+                return;
+            }
+            target.removeEventListener('scroll', scroll);
+            trackers.delete(target);
+        },
+        smooth: 0,
+        smoothRate: 0,
+        stepped: 0,
+        time: 0,
+        velocity: 0,
+        wakes: new Set([wake])
+    };
+    function scroll() {
+        let now = performance.now(), position = offset(target), dt = now - t.time;
+        t.velocity = dt > 0 && dt < 200 ? ((position - t.position) / dt) * 1000 : 0;
+        t.position = position;
+        t.time = now;
+        for (let wake of t.wakes) {
+            wake();
+        }
+    }
+    target.addEventListener('scroll', scroll, { passive: true });
+    trackers.set(target, t);
+    return t;
+};
+export { MAX_FACTOR, settled, step, track };

package/build/components/metric/flash.d.ts

@@ -0,0 +1,11 @@
+import { type Attributes } from '@esportsplus/template';
+export default _default;
+declare function _default({ announceAfter, format, hold, label, state: api, ...attributes }: Attributes & {
+    announceAfter?: number;
+    format?: (value: number) => string;
+    hold?: number;
+    label?: string;
+    state: {
+        value: number;
+    };
+}): DocumentFragment | Text;