@esportsplus/ui 0.55.0 → 0.56.3

package/build/components/scroll-spine/index.js

@@ -0,0 +1,204 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import './scss/index.scss';
+const template_100qcea2 = template_u1.template(`<nav class='scroll-spine'><div aria-hidden='true' class='scroll-spine-marker'></div><ol class='scroll-spine-list'></ol><div aria-hidden='true' class='scroll-spine-notch'>`);
+const template_100qcea6 = template_u1.template(`<li class='scroll-spine-item'><span aria-hidden='true' class='scroll-spine-band'><span class='scroll-spine-fill'></span></span><button class='scroll-spine-button ' type='button'><span class='scroll-spine-label'></span></button><span aria-hidden='true' class='scroll-spine-preview'>`);
+class ReactiveObject_100qcea0 extends reactivity_u0.ReactiveObject {
+    #active = this[reactivity_u0.SIGNAL](0);
+    constructor() {
+        super(null);
+    }
+    get active() {
+        return reactivity_u0.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_u0.write(this.#active, _v0);
+    }
+}
+const END_SLACK = 4;
+const GAP = 8;
+const INLINE_MIN = 120;
+const JUMP_OFFSET = 16;
+const LEAD = (2 * Math.PI) / (1.2 * 0.24);
+const MARK_PAD = 4;
+const MIN_BAND = 14;
+const MIN_BAND_LABELLED = 24;
+const READ_LINE = 0.3;
+const SCROLL_SPINE_BUTTON = Symbol.for('@esportsplus/ui/scroll-spine.button');
+const TRAIL = (2 * Math.PI) / (1.2 * 0.42);
+function reduced() {
+    return matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+function step(edge, dt) {
+    let decay = Math.exp(-edge.omega * dt), offset = edge.value - edge.target, slope = edge.velocity + edge.omega * offset;
+    edge.value = edge.target + (offset + slope * dt) * decay;
+    edge.velocity = (edge.velocity - edge.omega * slope * dt) * decay;
+    if (Math.abs(edge.value - edge.target) < 0.05 && Math.abs(edge.velocity) < 1) {
+        edge.value = edge.target;
+        edge.velocity = 0;
+        return false;
+    }
+    return true;
+}
+function template({ height = 320, items, label = 'On this page', state = new ReactiveObject_100qcea0(), target, ...attributes }) {
+    let bands = [], bottom = { omega: LEAD, target: 0, value: 0, velocity: 0 }, cleanup, end = 0, fills = [], frame = 0, inline = true, marker, motion = 0, nav, notch, offsets = [], placed = false, rows = [], scroller, time = 0, upper = { omega: TRAIL, target: 0, value: 0, velocity: 0 };
+    function animate(now) {
+        let dt = time ? Math.min((now - time) / 1000, 1 / 30) : 1 / 60, moving = step(upper, dt);
+        moving = step(bottom, dt) || moving;
+        time = now;
+        paint();
+        motion = moving ? requestAnimationFrame(animate) : 0;
+    }
+    function jump(i) {
+        let behavior = reduced() ? 'auto' : 'smooth', top = Math.max(0, offsets[i] - JUMP_OFFSET);
+        (scroller ?? window).scrollTo({ behavior, top });
+    }
+    function measure() {
+        let m = metrics(), minBand = inline ? MIN_BAND_LABELLED : MIN_BAND, free = height - GAP * (items.length - 1) - minBand * items.length, tops = items.map((item) => {
+            let el = document.getElementById(item.id);
+            return el ? m.offsetOf(el) : 0;
+        }), lengths = tops.map((top, i) => Math.max(1, (tops[i + 1] ?? m.height) - top)), total = lengths.reduce((a, b) => a + b, 0), y = 0;
+        end = m.height;
+        offsets = tops;
+        bands = lengths.map((length) => {
+            let band = { height: minBand + (free * length) / total, top: y };
+            y += band.height + GAP;
+            return band;
+        });
+        for (let i = 0, n = rows.length; i < n; i++) {
+            rows[i].style.height = `${bands[i].height}px`;
+            rows[i].style.top = `${bands[i].top}px`;
+        }
+        notch?.classList.add('--active');
+        move(true);
+        update();
+    }
+    function metrics() {
+        if (!scroller) {
+            return {
+                height: document.documentElement.scrollHeight,
+                offsetOf: (el) => el.getBoundingClientRect().top + scrollY,
+                scrollTop: scrollY,
+                viewport: innerHeight
+            };
+        }
+        let box = scroller, top = box.getBoundingClientRect().top;
+        return {
+            height: box.scrollHeight,
+            offsetOf: (el) => el.getBoundingClientRect().top - top + box.scrollTop,
+            scrollTop: box.scrollTop,
+            viewport: box.clientHeight
+        };
+    }
+    function move(snap = false) {
+        let band = bands[state.active];
+        if (!band) {
+            return;
+        }
+        let from = upper.target, to = band.top - MARK_PAD;
+        upper.target = to;
+        bottom.target = band.top + band.height + MARK_PAD;
+        if (!placed || snap || reduced()) {
+            placed = true;
+            bottom.value = bottom.target;
+            bottom.velocity = 0;
+            upper.value = upper.target;
+            upper.velocity = 0;
+            paint();
+            return;
+        }
+        let down = to >= from;
+        bottom.omega = down ? LEAD : TRAIL;
+        upper.omega = down ? TRAIL : LEAD;
+        if (!motion) {
+            time = 0;
+            motion = requestAnimationFrame(animate);
+        }
+    }
+    function onscroll() {
+        if (!frame) {
+            frame = requestAnimationFrame(update);
+        }
+    }
+    function paint() {
+        if (!marker) {
+            return;
+        }
+        marker.style.height = `${Math.max(0, bottom.value - upper.value)}px`;
+        marker.style.top = `${upper.value}px`;
+    }
+    function update() {
+        frame = 0;
+        if (!bands.length) {
+            return;
+        }
+        let m = metrics(), atEnd = m.scrollTop >= m.height - m.viewport - END_SLACK, i = 0, line = m.scrollTop + m.viewport * READ_LINE;
+        while (i < offsets.length - 1 && offsets[i + 1] <= line) {
+            i++;
+        }
+        if (atEnd) {
+            i = offsets.length - 1;
+        }
+        let band = bands[i], finish = offsets[i + 1] ?? end, start = offsets[i], within = atEnd ? 1 : Math.min(1, Math.max(0, (line - start) / (finish - start)));
+        if (band && notch) {
+            notch.style.transform = `translateY(${band.top + within * band.height}px)`;
+        }
+        for (let k = 0, n = fills.length; k < n; k++) {
+            fills[k].style.transform = `scaleY(${k < i ? 1 : k === i ? within : 0})`;
+        }
+        if (i !== state.active) {
+            state.active = i;
+            move();
+        }
+    }
+    return (() => {
+        let root_100qcea1 = template_100qcea2(), element_100qcea3 = root_100qcea1.firstChild, element_100qcea4 = element_100qcea3.firstElementChild.nextElementSibling;
+        template_u1.setProperty(element_100qcea3, 'aria-label', label);
+        template_u1.setList(element_100qcea3, 'style', `height: ${height}px;`);
+        template_u1.setProperties(element_100qcea3, this?.attributes);
+        template_u1.setProperties(element_100qcea3, attributes);
+        template_u1.onconnect(element_100qcea3, (el) => {
+            let source = typeof target === 'function' ? target() : target;
+            fills = [...el.querySelectorAll('.scroll-spine-fill')];
+            marker = el.querySelector('.scroll-spine-marker') ?? undefined;
+            nav = el;
+            notch = el.querySelector('.scroll-spine-notch') ?? undefined;
+            rows = [...el.querySelectorAll('.scroll-spine-item')];
+            scroller = source ?? undefined;
+            let width = new ResizeObserver(([entry]) => {
+                let next = entry.contentRect.width >= INLINE_MIN;
+                nav?.classList.toggle('--inline', next);
+                if (next !== inline || !bands.length) {
+                    inline = next;
+                    measure();
+                }
+            }), content = new ResizeObserver(() => measure());
+            width.observe(el);
+            content.observe(scroller ? (scroller.firstElementChild ?? scroller) : document.body);
+            (scroller ?? window).addEventListener('scroll', onscroll, { passive: true });
+            cleanup = () => {
+                content.disconnect();
+                width.disconnect();
+                (scroller ?? window).removeEventListener('scroll', onscroll);
+            };
+        });
+        template_u1.ondisconnect(element_100qcea3, () => {
+            cancelAnimationFrame(frame);
+            cancelAnimationFrame(motion);
+            cleanup?.();
+        });
+        template_u1.slot(element_100qcea4, items.map((item, i) => {
+            let root_100qcea5 = template_100qcea6(), element_100qcea7 = root_100qcea5.firstChild.firstElementChild.nextElementSibling, element_100qcea8 = element_100qcea7.firstElementChild, element_100qcea9 = element_100qcea7.nextElementSibling;
+            template_u1.setProperty(element_100qcea7, 'aria-current', () => state.active === i && 'location');
+            template_u1.setList(element_100qcea7, 'class', () => state.active === i && '--active');
+            template_u1.delegate(element_100qcea7, 'click', () => jump(i));
+            template_u1.setProperties(element_100qcea7, this?.attributes?.[SCROLL_SPINE_BUTTON]);
+            template_u1.setProperties(element_100qcea7, attributes[SCROLL_SPINE_BUTTON]);
+            template_u1.slot(element_100qcea8, item.label, 1);
+            template_u1.slot(element_100qcea9, item.label, 1);
+            return root_100qcea5;
+        }), 1);
+        return root_100qcea1;
+    })();
+}
+export default Object.assign(template, { button: SCROLL_SPINE_BUTTON });

package/build/components/scroll-spine/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.scroll-spine{--band-color:oklch(from var(--color) l c h / .12);--band-width:3px;--color:var(--color-text-500);--fill-color:var(--color);--focus-color:var(--color);--font-size:13px;--marker-color:oklch(from var(--color) l c h / .06);--marker-radius:var(--border-radius-400);--muted-color:var(--color-text-300);--notch-color:var(--color);--notch-ring-color:var(--color-grey-400);--notch-size:9px;--pressed-scale:.96;--preview-background:var(--color);--preview-color:var(--color-white-300);--preview-timing-function:cubic-bezier(.23, 1, .32, 1);--transition-duration:.15s;--transition-timing-function:ease-out;--width:180px;-webkit-user-select:none;user-select:none;width:var(--width);flex:none;position:relative}.scroll-spine-band{background:var(--band-color);width:var(--band-width);inset-block:0;border-radius:999px;position:absolute;left:50%;overflow:hidden;translate:-50%}.scroll-spine-button{border-radius:var(--border-radius-300);color:inherit;cursor:pointer;font:inherit;text-align:left;touch-action:manipulation;transition:scale var(--transition-duration) var(--transition-timing-function);background:0 0;border:0;outline:none;padding:0;position:absolute;inset:0}.scroll-spine-button:active{scale:var(--pressed-scale)}.scroll-spine-button:focus-visible{outline:var(--border-width-500) solid var(--focus-color)}.scroll-spine-fill{background:var(--fill-color);transform-origin:top;border-radius:999px;position:absolute;inset:0;transform:scaleY(0)}.scroll-spine-item{position:absolute;left:0;right:0}.scroll-spine-label{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;position:absolute;overflow:hidden}.scroll-spine-list{margin:0;padding:0;list-style:none;position:absolute;inset:0}.scroll-spine-marker{background:var(--marker-color);border-radius:var(--marker-radius);width:20px;position:absolute;left:50%;translate:-50%}.scroll-spine-notch{background:var(--notch-color);box-shadow:0 0 0 3px var(--notch-ring-color);height:var(--notch-size);margin:calc(var(--notch-size) / -2) 0 0 calc(var(--notch-size) / -2);opacity:0;pointer-events:none;width:var(--notch-size);border-radius:999px;position:absolute;top:0;left:50%}.scroll-spine-notch.--active{opacity:1}.scroll-spine-preview{background:var(--preview-background);color:var(--preview-color);filter:blur(2px);font-size:var(--font-size);font-weight:var(--font-weight-500);opacity:0;pointer-events:none;transition:filter .1s var(--preview-timing-function), opacity .1s var(--preview-timing-function), translate .1s var(--preview-timing-function);white-space:nowrap;z-index:10;border-radius:999px;margin-right:4px;padding:6px 12px;position:absolute;top:0;right:100%;translate:6px}.scroll-spine-button:focus-visible+.scroll-spine-preview{filter:none;opacity:1;transition-duration:.2s;translate:0}@media (hover:hover){.scroll-spine-button:hover+.scroll-spine-preview{filter:none;opacity:1;transition-duration:.2s;translate:0}}.scroll-spine.--inline .scroll-spine-band{left:0;translate:none}.scroll-spine.--inline .scroll-spine-button{padding-left:20px;left:-8px}.scroll-spine.--inline .scroll-spine-label{clip-path:none;color:var(--muted-color);font-size:var(--font-size);text-overflow:ellipsis;height:auto;transition:color var(--transition-duration) var(--transition-timing-function);width:auto;line-height:16px;display:block;position:static;overflow:hidden}.scroll-spine.--inline .scroll-spine-button.--active .scroll-spine-label{color:var(--color);font-weight:var(--font-weight-500)}.scroll-spine.--inline .scroll-spine-marker{width:auto;left:-8px;right:0;translate:none}.scroll-spine.--inline .scroll-spine-notch{left:calc(var(--band-width) / 2)}.scroll-spine.--inline .scroll-spine-preview{display:none}@media (hover:hover){.scroll-spine.--inline .scroll-spine-button:hover .scroll-spine-label{color:var(--color)}}@media (prefers-reduced-motion:reduce){.scroll-spine-button{transition:none}.scroll-spine-preview{translate:0}}}
+/*$vite$:1*/

package/build/components/scroll-velocity/index.d.ts

@@ -0,0 +1,22 @@
+import { type Attributes, type Renderable } from '@esportsplus/template';
+import './scss/index.scss';
+type Row = Attributes & {
+    content: string | (() => Renderable<unknown>);
+    direction?: 1 | -1;
+    reactivity?: boolean;
+    velocity?: number;
+};
+declare function row({ content, direction, reactivity, velocity, ...attributes }: Row): DocumentFragment | Text;
+declare const _default: {
+    (): Renderable<any>;
+    <T extends Attributes>(attributes: T): Renderable<any>;
+    <T extends Renderable<any>>(content: T): Renderable<any>;
+    (attributes: Attributes, content?: Renderable<any>): Renderable<any>;
+    bind(context: {
+        attributes?: Partial<Attributes> | undefined;
+        content?: Renderable<any>;
+    }): any;
+} & {
+    row: typeof row;
+};
+export default _default;

package/build/components/scroll-velocity/index.js

@@ -0,0 +1,160 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import './scss/index.scss';
+const template_0dijaac1 = template_u1.template(`<div class='scroll-velocity-row'><div class='scroll-velocity-strip'>`);
+const template_0dijaac5 = template_u1.template(`<div class='scroll-velocity-block'>`);
+const template_0dijaac8 = template_u1.template(`<div class='scroll-velocity'>`);
+const DAMPING = 50;
+const MAX_FACTOR = 5;
+const MIN_COPIES = 3;
+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;
+}
+function 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);
+}
+function track(target) {
+    let existing = trackers.get(target);
+    if (existing) {
+        existing.users++;
+        return existing;
+    }
+    let t = {
+        factor: 0,
+        position: offset(target),
+        release: () => {
+            if (--t.users > 0) {
+                return;
+            }
+            target.removeEventListener('scroll', scroll);
+            trackers.delete(target);
+        },
+        smooth: 0,
+        smoothRate: 0,
+        stepped: 0,
+        time: 0,
+        users: 1,
+        velocity: 0
+    };
+    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;
+    }
+    target.addEventListener('scroll', scroll, { passive: true });
+    trackers.set(target, t);
+    return t;
+}
+function wrap(max, value) {
+    return ((value % max) + max) % max;
+}
+function row({ content, direction = 1, reactivity = true, velocity = 5, ...attributes }) {
+    let base = direction >= 0 ? 1 : -1, copies = new reactivity_u0.ReactiveArray([0]), current = base, frame = 0, intersection, media, resize, tracker, visible = true, width = 0, x = 0;
+    function render() {
+        return typeof content === 'function' ? content() : content;
+    }
+    return (() => {
+        let root_0dijaac0 = template_0dijaac1(), element_0dijaac2 = root_0dijaac0.firstChild, element_0dijaac3 = element_0dijaac2.firstElementChild;
+        template_u1.setProperties(element_0dijaac2, attributes);
+        template_u1.onconnect(element_0dijaac2, (element) => {
+            let strip = element.firstElementChild, time = performance.now();
+            media = matchMedia('(prefers-reduced-motion: reduce)');
+            tracker = track(scroller(element));
+            function measure() {
+                let block = strip.firstElementChild;
+                width = block ? block.getBoundingClientRect().width : 0;
+                let next = width > 0 ? Math.max(MIN_COPIES, Math.ceil(element.offsetWidth / width) + 2) : 1;
+                while (copies.$length < next) {
+                    copies.push(copies.$length);
+                }
+                if (copies.$length > next) {
+                    copies.splice(next);
+                }
+            }
+            function tick(now) {
+                let dt = Math.min(0.1, (now - time) / 1000);
+                time = now;
+                frame = requestAnimationFrame(tick);
+                if (!visible || document.hidden || media.matches || width <= 0 || !tracker) {
+                    return;
+                }
+                let factor = 0;
+                if (reactivity) {
+                    step(tracker, now, dt);
+                    factor = tracker.factor;
+                }
+                let magnitude = Math.min(MAX_FACTOR, Math.abs(factor));
+                if (magnitude > 0.1) {
+                    current = base * (factor >= 0 ? 1 : -1);
+                }
+                x += current * ((width * velocity) / 100) * (1 + magnitude) * dt;
+                strip.style.transform = `translate3d(${-wrap(width, x)}px, 0, 0)`;
+            }
+            intersection = new IntersectionObserver((entries) => {
+                visible = entries[entries.length - 1].isIntersecting;
+            });
+            resize = new ResizeObserver(measure);
+            intersection.observe(element);
+            resize.observe(element);
+            if (strip.firstElementChild) {
+                resize.observe(strip.firstElementChild);
+            }
+            measure();
+            frame = requestAnimationFrame(tick);
+        });
+        template_u1.ondisconnect(element_0dijaac2, () => {
+            cancelAnimationFrame(frame);
+            intersection?.disconnect();
+            resize?.disconnect();
+            tracker?.release();
+            tracker = undefined;
+        });
+        element_0dijaac3.appendChild(new template_u1.ArraySlot(copies, (copy) => {
+            let root_0dijaac4 = template_0dijaac5(), element_0dijaac6 = root_0dijaac4.firstChild;
+            template_u1.setProperty(element_0dijaac6, 'aria-hidden', copy !== 0 && 'true');
+            template_u1.slot(element_0dijaac6, render(), 1);
+            return root_0dijaac4;
+        }, true).fragment);
+        return root_0dijaac0;
+    })();
+}
+export default Object.assign(component(function (attributes, content) {
+    return (() => {
+        let root_0dijaac7 = template_0dijaac8(), element_0dijaac9 = root_0dijaac7.firstChild;
+        template_u1.setProperties(element_0dijaac9, this?.attributes);
+        template_u1.setProperties(element_0dijaac9, attributes);
+        template_u1.slot(element_0dijaac9, content, 1);
+        return root_0dijaac7;
+    })();
+}), { row });

package/build/components/scroll-velocity/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.scroll-velocity{--gap:.25em;width:100%;position:relative}.scroll-velocity-block{flex-shrink:0;align-items:center;padding-inline-end:var(--gap,.25em);display:inline-flex}.scroll-velocity-row{white-space:nowrap;width:100%;overflow:hidden}.scroll-velocity-strip{-webkit-user-select:none;user-select:none;will-change:transform;align-items:center;transition:none;display:inline-flex}}
+/*$vite$:1*/

package/build/components/scrub-input/index.d.ts

@@ -0,0 +1,39 @@
+import { type Attributes, type Renderable } from '@esportsplus/template';
+import input from '../input/index.js';
+import './scss/index.scss';
+type A = Attributes & {
+    [SCRUB_INPUT_FIELD]?: Field;
+    [SCRUB_INPUT_LABEL]?: Attributes;
+    label: string;
+    lockPointer?: boolean;
+    max?: number;
+    min?: number;
+    pixelsPerStep?: number;
+    precision?: number;
+    state?: State;
+    step?: number;
+    suffix?: string;
+    value?: number;
+};
+type Field = Parameters<typeof input>[0];
+type State = {
+    active: boolean;
+    error: string;
+    value: number;
+};
+declare const SCRUB_INPUT_FIELD: unique symbol;
+declare const SCRUB_INPUT_LABEL: unique symbol;
+declare const _default: {
+    (): Renderable<any>;
+    <T extends A>(attributes: T): Renderable<any>;
+    <T extends Renderable<unknown>>(content: T): Renderable<any>;
+    (attributes: A, content?: Renderable<unknown>): Renderable<any>;
+    bind(context: {
+        attributes?: Partial<A> | undefined;
+        content?: Renderable<unknown>;
+    }): any;
+} & {
+    readonly field: typeof SCRUB_INPUT_FIELD;
+    readonly label: typeof SCRUB_INPUT_LABEL;
+};
+export default _default;

package/build/components/scrub-input/index.js

@@ -0,0 +1,221 @@
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import input from '../input/index.js';
+import './scss/index.scss';
+const template_15armzf2 = template_u1.template(`<div class='scrub-input'><span aria-hidden='true' class='scrub-input-tape'><span class='scrub-input-ticks'></span><span class='scrub-input-needle'></span></span><span class='scrub-input-label'>`);
+class ReactiveObject_15armzf0 extends reactivity_u0.ReactiveObject {
+    #draft;
+    #scrubbing = this[reactivity_u0.SIGNAL](false);
+    constructor(_p0) {
+        super(null);
+        this.#draft = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get draft() {
+        return reactivity_u0.read(this.#draft);
+    }
+    set draft(_v0) {
+        reactivity_u0.write(this.#draft, _v0);
+    }
+    get scrubbing() {
+        return reactivity_u0.read(this.#scrubbing);
+    }
+    set scrubbing(_v1) {
+        reactivity_u0.write(this.#scrubbing, _v1);
+    }
+}
+const DRAG_THRESHOLD = 3;
+const SCRUB_INPUT_FIELD = Symbol.for('@esportsplus/ui/scrub-input.field');
+const SCRUB_INPUT_LABEL = Symbol.for('@esportsplus/ui/scrub-input.label');
+const TICK = 6;
+function decimals(n) {
+    let s = String(n), dot = s.indexOf('.');
+    return dot < 0 ? 0 : s.length - dot - 1;
+}
+function gear(e) {
+    return e.shiftKey ? 10 : e.altKey ? 0.1 : 1;
+}
+export default Object.assign(component(function ({ label, lockPointer = false, max = Infinity, min = -Infinity, pixelsPerStep = 1, step = 1, precision = decimals(step) + 1, suffix = '', value = 0, state = reactivity_u0.reactive({ active: false, error: '', value }), ...attributes }, content) {
+    let local = new ReactiveObject_15armzf0(null), period = TICK * 5, scrub = null, skip = false, suppress = false;
+    function clamp(n) {
+        return Math.min(Math.max(n, min), max);
+    }
+    function commit() {
+        if (local.draft === null) {
+            return state.value;
+        }
+        let next = parse(local.draft);
+        if (next !== null && next !== state.value) {
+            state.value = next;
+        }
+        return next ?? state.value;
+    }
+    function end() {
+        if (document.pointerLockElement) {
+            document.exitPointerLock();
+        }
+        document.documentElement.style.removeProperty('cursor');
+        suppress = scrub?.moved ?? false;
+        scrub = null;
+        local.scrubbing = false;
+    }
+    function format(n) {
+        return `${round(n)}${suffix}`;
+    }
+    function parse(text) {
+        let trimmed = (suffix ? text.replace(suffix, '') : text).trim(), n = Number(trimmed);
+        return trimmed === '' || Number.isNaN(n) ? null : clamp(round(n));
+    }
+    function round(n) {
+        return Number(n.toFixed(precision));
+    }
+    function show(field, text) {
+        local.draft = text;
+        field.value = text;
+        field.select();
+    }
+    return (() => {
+        let root_15armzf1 = template_15armzf2(), element_15armzf3 = root_15armzf1.firstChild, element_15armzf4 = element_15armzf3.firstElementChild.firstElementChild, element_15armzf5 = element_15armzf3.firstElementChild.nextElementSibling;
+        template_u1.setProperties(element_15armzf3, this?.attributes);
+        template_u1.setProperties(element_15armzf3, attributes);
+        template_u1.setList(element_15armzf3, 'class', () => local.scrubbing && '--active');
+        template_u1.ondisconnect(element_15armzf3, () => {
+            if (scrub) {
+                end();
+            }
+        });
+        template_u1.ondocument(element_15armzf3, 'keydown', (e) => {
+            if (e.key !== 'Escape' || !scrub) {
+                return;
+            }
+            state.value = scrub.start;
+            end();
+        });
+        template_u1.setList(element_15armzf4, 'style', () => {
+            let offset = ((((state.value / step) * pixelsPerStep) % period) + period) % period;
+            return `--offset: ${offset}px`;
+        });
+        template_u1.setProperties(element_15armzf5, this?.attributes?.[SCRUB_INPUT_LABEL]);
+        template_u1.setProperties(element_15armzf5, attributes[SCRUB_INPUT_LABEL]);
+        template_u1.delegate(element_15armzf5, 'click', (e) => {
+            let s = suppress;
+            suppress = false;
+            if (s) {
+                return;
+            }
+            e.currentTarget.parentElement?.querySelector('.scrub-input-field')?.focus();
+        });
+        template_u1.delegate(element_15armzf5, 'lostpointercapture', (e) => {
+            if (scrub?.id === e.pointerId) {
+                end();
+            }
+        });
+        template_u1.delegate(element_15armzf5, 'pointercancel', (e) => {
+            if (scrub?.id === e.pointerId) {
+                end();
+            }
+        });
+        template_u1.delegate(element_15armzf5, 'pointerdown', (e) => {
+            if (e.button !== 0 || scrub) {
+                return;
+            }
+            e.preventDefault();
+            let element = e.currentTarget, field = element.parentElement?.querySelector('.scrub-input-field'), start = state.value;
+            if (field && document.activeElement === field) {
+                start = commit();
+                skip = true;
+                field.blur();
+            }
+            element.setPointerCapture(e.pointerId);
+            scrub = {
+                id: e.pointerId,
+                lastX: e.clientX,
+                moved: false,
+                raw: start,
+                sent: start,
+                start,
+                startX: e.clientX
+            };
+        });
+        template_u1.delegate(element_15armzf5, 'pointermove', (e) => {
+            let s = scrub;
+            if (!s || e.pointerId !== s.id) {
+                return;
+            }
+            let element = e.currentTarget;
+            if (!s.moved) {
+                if (Math.abs(e.clientX - s.startX) < DRAG_THRESHOLD) {
+                    return;
+                }
+                s.moved = true;
+                local.scrubbing = true;
+                document.documentElement.style.cursor = 'ew-resize';
+                if (lockPointer && e.pointerType === 'mouse') {
+                    Promise.resolve(element.requestPointerLock?.()).catch(() => { });
+                }
+            }
+            let dx = document.pointerLockElement === element ? e.movementX : e.clientX - s.lastX;
+            s.lastX = e.clientX;
+            s.raw = clamp(s.raw + (dx / pixelsPerStep) * step * gear(e));
+            let next = round(s.raw);
+            if (next === s.sent) {
+                return;
+            }
+            s.sent = next;
+            state.value = next;
+        });
+        template_u1.delegate(element_15armzf5, 'pointerup', (e) => {
+            if (scrub?.id === e.pointerId) {
+                end();
+            }
+        });
+        template_u1.slot(element_15armzf5, content, 1);
+        template_u1.slot(element_15armzf3, input.call({ attributes: { ...this?.attributes?.[SCRUB_INPUT_FIELD], ...attributes[SCRUB_INPUT_FIELD] } }, {
+            'aria-label': label,
+            'aria-valuemax': Number.isFinite(max) ? max : undefined,
+            'aria-valuemin': Number.isFinite(min) ? min : undefined,
+            'aria-valuenow': () => state.value,
+            'aria-valuetext': () => format(state.value),
+            autocomplete: 'off',
+            class: 'scrub-input-field',
+            inputmode: 'decimal',
+            onblur: () => {
+                if (!skip) {
+                    commit();
+                }
+                skip = false;
+                local.draft = null;
+            },
+            onfocus: (e) => {
+                show(e.currentTarget, format(state.value));
+            },
+            oninput: (e) => {
+                local.draft = e.currentTarget.value;
+            },
+            onkeydown: (e) => {
+                let field = e.currentTarget;
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    show(field, format(commit()));
+                }
+                else if (e.key === 'Escape') {
+                    skip = true;
+                    field.blur();
+                }
+                else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+                    e.preventDefault();
+                    let base = local.draft === null ? state.value : (parse(local.draft) ?? state.value), next = clamp(round(base + (e.key === 'ArrowUp' ? step : -step) * gear(e)));
+                    if (next !== state.value) {
+                        state.value = next;
+                    }
+                    show(field, format(next));
+                }
+            },
+            role: 'spinbutton',
+            spellcheck: false,
+            state,
+            value: () => local.draft ?? format(state.value)
+        }), 2);
+        return root_15armzf1;
+    })();
+}), { field: SCRUB_INPUT_FIELD, label: SCRUB_INPUT_LABEL });

package/build/components/scrub-input/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.scrub-input{--background:var(--color-white-300);--border-radius:var(--border-radius-400);--color:var(--color-text-500);--field-padding:10px;--font-size:var(--font-size-300);--height:40px;--label-color:var(--color-text-300);--label-color-active:var(--color-text-500);--label-width:36px;--needle-color:var(--color-text-500);--outline-color:var(--color-text-500);--outline-width:var(--border-width-500);--tape-color:var(--color-text-300);--tape-enter-duration:.15s;--tape-height:8px;--tape-leave-duration:.2s;--tape-major-height:6px;--tape-minor-height:3px;--tape-timing-function:cubic-bezier(.23, 1, .32, 1);--tick:6px;background:var(--background);border-radius:var(--border-radius);color:var(--color);height:var(--height);align-items:center;display:flex;position:relative;overflow:hidden}.scrub-input:has(.scrub-input-field:focus-visible){outline:var(--outline-width) solid var(--outline-color)}.scrub-input>.scrub-input-field{--color-default:currentColor;--font-size:inherit;--padding-horizontal:0px;--padding-vertical:0px;font-variant-numeric:tabular-nums;height:100%;min-height:0;outline:none;padding-inline-end:var(--field-padding)}.scrub-input-label{color:var(--label-color);cursor:ew-resize;font-size:var(--font-size);touch-action:none;height:100%;transition:color var(--transition-duration) var(--transition-timing-function);-webkit-user-select:none;user-select:none;width:var(--label-width);flex-shrink:0;justify-content:center;align-items:center;display:flex}.scrub-input-label svg{width:16px;height:16px}.scrub-input-label:hover,.scrub-input.--active .scrub-input-label{color:var(--label-color-active)}.scrub-input-needle{background:var(--needle-color);height:var(--tape-height);width:1px;position:absolute;bottom:0;left:50%;translate:-50%}.scrub-input-tape{color:var(--tape-color);height:var(--tape-height);opacity:0;pointer-events:none;transition:opacity var(--tape-leave-duration) var(--tape-timing-function), translate var(--tape-leave-duration) var(--tape-timing-function);bottom:0;position:absolute;inset-inline:0;translate:0 4px;-webkit-mask-image:linear-gradient(90deg,#0000,#000 30% 70%,#0000);mask-image:linear-gradient(90deg,#0000,#000 30% 70%,#0000)}.scrub-input.--active>.scrub-input-tape{opacity:1;transition-duration:var(--tape-enter-duration);translate:0}.scrub-input-ticks{background-image:linear-gradient(90deg,currentColor 1px,#0000 1px),linear-gradient(90deg,currentColor 1px,#0000 1px);background-position-x:calc(50% - var(--offset,0px));background-position-y:bottom;background-repeat:repeat-x;background-size:var(--tick) var(--tape-minor-height), calc(var(--tick) * 5) var(--tape-major-height);position:absolute;inset:0}@media (prefers-reduced-motion:reduce){.scrub-input-tape{translate:0}}}
+/*$vite$:1*/