@esportsplus/ui 0.55.0 → 0.56.2

package/build/components/reading-progress/index.js

@@ -0,0 +1,106 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { onCleanup } from '@esportsplus/reactivity';
+import './scss/index.scss';
+const template_1s6m76f2 = template_u1.template(`<div class='reading-progress'><div aria-valuemin='0' class='reading-progress-track' role='progressbar'><div class='reading-progress-fill'>`);
+const template_1s6m76f7 = template_u1.template(`<div aria-hidden='true' class='reading-progress-readout'><span class='reading-progress-sizer'><span class='reading-progress-check'></span><!--$--> · <!--$--> min </span><span class='reading-progress-remaining'><!--$--> min left </span><span class='reading-progress-done'><svg class='reading-progress-check' fill='none' viewBox='0 0 256 256'><polyline pathLength='1' points='216 72 104 184 48 128' /></svg><span class='reading-progress-label'><!--$--> · <!--$--> min `);
+class ReactiveObject_1s6m76f0 extends reactivity_u0.ReactiveObject {
+    #step = this[reactivity_u0.SIGNAL](0);
+    constructor() {
+        super(null);
+    }
+    get step() {
+        return reactivity_u0.read(this.#step);
+    }
+    set step(_v0) {
+        reactivity_u0.write(this.#step, _v0);
+    }
+}
+function clamp(value) {
+    if (!Number.isFinite(value) || value < 0) {
+        return 0;
+    }
+    return value > 1 ? 1 : value;
+}
+export default ({ doneLabel = 'End', label = 'Reading progress', scroller, steps = 24, target, words = 0, wordsPerMinute = 220, ...attributes }) => {
+    let dispose, frame = 0, state = new ReactiveObject_1s6m76f0(), total = words > 0 ? Math.max(1, Math.ceil(words / wordsPerMinute)) : 0;
+    function minutes() {
+        return Math.ceil(((1 - progress()) * words) / wordsPerMinute);
+    }
+    function progress() {
+        return steps > 0 ? state.step / steps : 1;
+    }
+    function read() {
+        frame = 0;
+        let container = scroller?.() ?? null, element = target?.() ?? null, ratio, travel, viewport = container ? container.clientHeight : window.innerHeight;
+        if (element) {
+            let rect = element.getBoundingClientRect();
+            travel = rect.height - viewport;
+            ratio = travel <= 0 ? 1 : ((container ? container.getBoundingClientRect().top : 0) - rect.top) / travel;
+        }
+        else if (container) {
+            travel = container.scrollHeight - container.clientHeight;
+            ratio = travel <= 0 ? 1 : container.scrollTop / travel;
+        }
+        else {
+            travel = document.documentElement.scrollHeight - viewport;
+            ratio = travel <= 0 ? 1 : window.scrollY / travel;
+        }
+        let step = Math.round(clamp(ratio) * steps);
+        if (state.step !== step) {
+            state.step = step;
+        }
+    }
+    function schedule() {
+        if (frame) {
+            return;
+        }
+        frame = requestAnimationFrame(read);
+    }
+    onCleanup(() => {
+        cancelAnimationFrame(frame);
+        dispose?.();
+    });
+    return (() => {
+        let root_1s6m76f1 = template_1s6m76f2(), element_1s6m76f3 = root_1s6m76f1.firstChild, element_1s6m76f4 = element_1s6m76f3.firstElementChild, element_1s6m76f5 = element_1s6m76f4.firstElementChild;
+        template_u1.setProperties(element_1s6m76f3, attributes);
+        template_u1.setList(element_1s6m76f3, 'class', () => state.step >= steps && '--complete');
+        template_u1.onconnect(element_1s6m76f3, () => {
+            frame = requestAnimationFrame(() => {
+                let container = scroller?.() ?? null, element = target?.() ?? null, observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(schedule), source = container ?? window;
+                source.addEventListener('scroll', schedule, { passive: true });
+                window.addEventListener('resize', schedule);
+                if (element) {
+                    observer?.observe(element);
+                }
+                if (container) {
+                    observer?.observe(container);
+                }
+                if (!element && !container) {
+                    observer?.observe(document.documentElement);
+                }
+                dispose = () => {
+                    source.removeEventListener('scroll', schedule);
+                    window.removeEventListener('resize', schedule);
+                    observer?.disconnect();
+                };
+                read();
+            });
+        });
+        template_u1.setProperty(element_1s6m76f4, 'aria-label', label);
+        template_u1.setProperty(element_1s6m76f4, 'aria-valuemax', steps);
+        template_u1.setProperty(element_1s6m76f4, 'aria-valuenow', () => state.step);
+        template_u1.setProperty(element_1s6m76f4, 'aria-valuetext', () => `${Math.round(progress() * 100)}% read${words > 0 ? `, ${minutes()} min left` : ''}`);
+        template_u1.setList(element_1s6m76f5, 'style', () => `--progress: ${state.step / Math.max(1, steps)}`);
+        template_u1.slot(element_1s6m76f3, words > 0 && (() => {
+            let root_1s6m76f6 = template_1s6m76f7(), element_1s6m76f8 = root_1s6m76f6.firstChild.firstElementChild.firstChild.nextSibling, element_1s6m76f9 = element_1s6m76f8.nextSibling.nextSibling, element_1s6m76fa = root_1s6m76f6.firstChild.firstElementChild.nextElementSibling.firstChild, element_1s6m76fb = root_1s6m76f6.firstChild.firstElementChild.nextElementSibling.nextElementSibling.firstElementChild.nextElementSibling.firstChild, element_1s6m76fc = element_1s6m76fb.nextSibling.nextSibling;
+            template_u1.slot(element_1s6m76f8, doneLabel);
+            template_u1.slot(element_1s6m76f9, total);
+            new template_u1.EffectSlot(element_1s6m76fa, () => minutes());
+            template_u1.slot(element_1s6m76fb, doneLabel);
+            template_u1.slot(element_1s6m76fc, total);
+            return root_1s6m76f6;
+        })(), 2);
+        return root_1s6m76f1;
+    })();
+};

package/build/components/reading-progress/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.reading-progress{--background:var(--color-grey-400);--box-shadow:inset 0 1px 2px oklch(0% 0 0/.07);--color:var(--color-text-300);--color-done:var(--color-text-500);--draw-delay:80ms;--draw-duration:.3s;--draw-timing-function:cubic-bezier(.23, 1, .32, 1);--fade-duration:.73s;--fade-timing-function:linear(0, .005 0.8%, .042 2.5%, .125 4.8%, .244 7.6%, .38 10.9%, .514 14.6%, .634 18.6%, .733 23.1%, .811 27.9%, .869 33%, .912 38.4%, .942 44.2%, .963 50.2%, .976 56.5%, .985 63.1%, .991 70%, .995 77.1%, .997 84.5%, .998 92.1%, 1);--fill:var(--color-blue-400);--fill-duration:.93s;--fill-timing-function:linear(0, .006 0.8%, .048 2.5%, .137 4.8%, .262 7.6%, .401 10.9%, .534 14.6%, .65 18.6%, .745 23.1%, .819 27.9%, .875 33%, .915 38.4%, .944 44.2%, .964 50.2%, .977 56.5%, .986 63.1%, .991 70%, .995 77.1%, .997 84.5%, .998 92.1%, 1);--font-family:ui-monospace, monospace;--font-size:10.5px;--gap:var(--size-300);--height:3px;--padding:2px;--shift:4px}.reading-progress-fill{--border-radius:var(--border-radius-100)}.reading-progress-track{--border-radius:var(--border-radius-200)}.reading-progress{align-items:center;gap:var(--gap);display:flex}.reading-progress-check{flex-shrink:0;width:12px;height:12px}.reading-progress-check polyline{stroke:currentColor;stroke-dasharray:1;stroke-dashoffset:1px;stroke-linecap:round;stroke-linejoin:round;stroke-width:16px;transition:stroke-dashoffset var(--draw-duration) var(--draw-timing-function) var(--draw-delay)}.reading-progress-done,.reading-progress-remaining,.reading-progress-sizer{white-space:nowrap;grid-area:1/1}.reading-progress-done,.reading-progress-sizer{align-items:center;gap:4px;display:flex}.reading-progress-done{color:var(--color-done);opacity:0}.reading-progress-done,.reading-progress-label,.reading-progress-remaining{transition:opacity var(--fade-duration) var(--fade-timing-function), translate var(--fade-duration) var(--fade-timing-function)}.reading-progress-fill{background:var(--fill);border-radius:var(--border-radius);height:var(--height);transform:scaleX(var(--progress,0));transform-origin:0;transition:transform var(--fill-duration) var(--fill-timing-function)}.reading-progress-label{translate:var(--shift) 0}.reading-progress-readout{color:var(--color);font-family:var(--font-family);font-size:var(--font-size);font-variant-numeric:tabular-nums;flex-shrink:0;justify-items:end;display:grid}.reading-progress-sizer{visibility:hidden}.reading-progress-track{background:var(--background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);min-width:0;padding:var(--padding);flex:1}.reading-progress.--complete .reading-progress-done{opacity:1}.reading-progress.--complete .reading-progress-label{translate:0}.reading-progress.--complete .reading-progress-remaining{opacity:0}.reading-progress.--complete polyline{stroke-dashoffset:0}@media (prefers-reduced-motion:reduce){.reading-progress-done,.reading-progress-fill,.reading-progress-label,.reading-progress-remaining,.reading-progress polyline{transition:none}}}
+/*$vite$:1*/

package/build/components/relative-time/index.d.ts

@@ -0,0 +1,25 @@
+import { type Attributes } from '@esportsplus/template';
+import '../tooltip/scss/index.scss';
+import './scss/index.scss';
+type A = Attributes & {
+    [RELATIVE_TIME_TOOLTIP]?: Attributes;
+    date: Value;
+    ondocumentvisibilitychange?: never;
+    onpointerenter?: never;
+    onpointerleave?: never;
+    state?: State;
+};
+type State = {
+    date: Value;
+    now: number | null;
+};
+type Value = Date | number | string | null;
+declare const RELATIVE_TIME_TOOLTIP: unique symbol;
+declare function template(this: {
+    attributes?: Partial<A>;
+} | void, { date, state, ...attributes }: A): DocumentFragment | Text;
+declare const _default: typeof template & {
+    readonly tooltip: typeof RELATIVE_TIME_TOOLTIP;
+};
+export default _default;
+export type { State as RelativeTimeState, Value as RelativeTimeValue };

package/build/components/relative-time/index.js

@@ -0,0 +1,283 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect, onCleanup } from '@esportsplus/reactivity';
+import '../tooltip/scss/index.scss';
+import './scss/index.scss';
+const template_0y6nu9v2 = template_u1.template(`<time class='relative-time tooltip  '><span class='relative-time-sr'></span><span aria-hidden='true' class='relative-time-roll '><span class='relative-time-digits'></span><span class='relative-time-rests'></span></span><span class='tooltip-message tooltip-message--n relative-time-tooltip' role='tooltip'>`);
+class ReactiveObject_0y6nu9v0 extends reactivity_u0.ReactiveObject {
+    #open = this[reactivity_u0.SIGNAL](false);
+    #tick = this[reactivity_u0.SIGNAL](0);
+    constructor() {
+        super(null);
+    }
+    get open() {
+        return reactivity_u0.read(this.#open);
+    }
+    set open(_v0) {
+        reactivity_u0.write(this.#open, _v0);
+    }
+    get tick() {
+        return reactivity_u0.read(this.#tick);
+    }
+    set tick(_v1) {
+        reactivity_u0.write(this.#tick, _v1);
+    }
+}
+const DAY = 24 * 60 * 60 * 1000;
+const ENTER = [
+    { filter: 'blur(3px)', opacity: 0, translate: '0 0.55em' },
+    { filter: 'blur(0px)', opacity: 1, translate: '0 0' }
+];
+const EXIT = [
+    { filter: 'blur(0px)', opacity: 1, translate: '0 0' },
+    { filter: 'blur(3px)', opacity: 0, translate: '0 -0.4em' }
+];
+const FADE_IN = [{ opacity: 0 }, { opacity: 1 }];
+const FADE_OUT = [{ opacity: 1 }, { opacity: 0 }];
+const HOUR = 60 * 60 * 1000;
+const MAX_TIMEOUT = 2 ** 31 - 1;
+const MIN = 60 * 1000;
+const OPEN_DELAY = 400;
+const RELATIVE_TIME_TOOLTIP = Symbol.for('@esportsplus/ui/relative-time.tooltip');
+const ROLL = { duration: 300, easing: 'cubic-bezier(0.32, 0.72, 0, 1)' };
+const SEC = 1000;
+const SETTLE = 20;
+const TOOLTIP = new Intl.DateTimeFormat(undefined, {
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+    month: 'short',
+    weekday: 'short',
+    year: 'numeric'
+});
+const VIEWPORT_GUTTER = 8;
+const WARM_FOR = 500;
+const WEEK = 7 * DAY;
+let closedAt = 0, uid = 0;
+function enter(element, reduce) {
+    element.animate(reduce ? FADE_IN : ENTER, ROLL);
+}
+function exit(element, reduce) {
+    element.style.left = `${element.offsetLeft}px`;
+    element.style.position = 'absolute';
+    element.style.top = `${element.offsetTop}px`;
+    element.animate(reduce ? FADE_OUT : EXIT, { ...ROLL, fill: 'forwards' }).onfinish = () => element.remove();
+}
+function label(diff, time) {
+    if (diff < 10 * SEC) {
+        return 'just now';
+    }
+    if (diff < MIN) {
+        return `${Math.floor(diff / SEC)} sec ago`;
+    }
+    if (diff < HOUR) {
+        return `${Math.floor(diff / MIN)} min ago`;
+    }
+    if (diff < DAY) {
+        return `${Math.floor(diff / HOUR)} hr ago`;
+    }
+    if (diff < 2 * DAY) {
+        return 'yesterday';
+    }
+    if (diff < WEEK) {
+        return `${Math.floor(diff / DAY)} days ago`;
+    }
+    return new Intl.DateTimeFormat(undefined, { day: 'numeric', month: 'short' }).format(time);
+}
+function reduced() {
+    return matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+function span(text, className) {
+    let element = document.createElement('span');
+    element.className = className;
+    element.textContent = text;
+    return element;
+}
+function timeOf(value) {
+    return value === null ? null : new Date(value).getTime();
+}
+function untilChange(diff) {
+    if (diff < 0) {
+        return -diff;
+    }
+    if (diff < 10 * SEC) {
+        return 10 * SEC - diff;
+    }
+    if (diff >= WEEK) {
+        return HOUR;
+    }
+    let unit = diff < MIN ? SEC : diff < HOUR ? MIN : diff < DAY ? HOUR : DAY;
+    return unit - (diff % unit);
+}
+function template({ date, state = reactivity_u0.reactive({ date, now: null }), ...attributes }) {
+    let clock = new ReactiveObject_0y6nu9v0(), digits, id = `relative-time-${++uid}`, instant = false, opener, rest, shown = null, stopRender, timer, tooltip;
+    function hide() {
+        clearTimeout(opener);
+        if (clock.open) {
+            closedAt = Date.now();
+        }
+        clock.open = false;
+    }
+    function nudge() {
+        if (!tooltip) {
+            return;
+        }
+        tooltip.style.right = '';
+        let box = tooltip.getBoundingClientRect(), max = document.documentElement.clientWidth - VIEWPORT_GUTTER, shift = box.left < VIEWPORT_GUTTER ? VIEWPORT_GUTTER - box.left : box.right > max ? max - box.right : 0;
+        if (shift) {
+            tooltip.style.right = `calc(50% - ${Math.round(shift)}px)`;
+        }
+    }
+    function open(delayed) {
+        clearTimeout(opener);
+        let warm = Date.now() - closedAt < WARM_FOR;
+        if (delayed && !warm) {
+            instant = false;
+            opener = setTimeout(() => {
+                nudge();
+                clock.open = true;
+            }, OPEN_DELAY);
+            return;
+        }
+        instant = warm;
+        nudge();
+        clock.open = true;
+    }
+    function render(text) {
+        let match = text.match(/^(\d+)(.*)$/), next = { digits: match ? match[1] : '', rest: match ? match[2] : text }, previous = shown, reduce = reduced();
+        shown = next;
+        if (!digits || !rest) {
+            return;
+        }
+        if (!previous) {
+            digits.replaceChildren(...[...next.digits].map((digit) => slot(digit)));
+            rest.replaceChildren(span(next.rest, 'relative-time-rest'));
+            return;
+        }
+        let slots = Array.from(digits.children).filter((element) => !element.style.position);
+        for (let key = 1, n = Math.max(slots.length, next.digits.length); key <= n; key++) {
+            let digit = next.digits[next.digits.length - key], element = slots[slots.length - key];
+            if (!element) {
+                let created = slot(digit);
+                digits.prepend(created);
+                enter(created, reduce);
+                continue;
+            }
+            if (digit === undefined) {
+                exit(element, reduce);
+                continue;
+            }
+            let current = Array.from(element.children).find((child) => !child.style.position);
+            if (current?.textContent === digit) {
+                continue;
+            }
+            let created = span(digit, 'relative-time-digit');
+            if (current) {
+                exit(current, reduce);
+            }
+            element.append(created);
+            enter(created, reduce);
+        }
+        if (previous.rest === next.rest) {
+            return;
+        }
+        let created = span(next.rest, 'relative-time-rest'), current = Array.from(rest.children).find((child) => !child.style.position);
+        if (current) {
+            exit(current, reduce);
+        }
+        rest.append(created);
+        enter(created, reduce);
+    }
+    function schedule() {
+        clearTimeout(timer);
+        let time = timeOf(state.date);
+        if (time === null || state.now !== null) {
+            return;
+        }
+        timer = setTimeout(() => {
+            clock.tick++;
+            schedule();
+        }, Math.min(untilChange(Date.now() - time) + SETTLE, MAX_TIMEOUT));
+    }
+    function slot(digit) {
+        let element = span('', 'relative-time-slot');
+        element.append(span(digit, 'relative-time-digit'));
+        return element;
+    }
+    function text() {
+        let time = timeOf(state.date);
+        clock.tick;
+        return time === null ? null : label((state.now ?? Date.now()) - time, time);
+    }
+    let stopSchedule = effect(() => {
+        state.date;
+        state.now;
+        schedule();
+    });
+    onCleanup(() => {
+        clearTimeout(opener);
+        clearTimeout(timer);
+        stopRender?.();
+        stopSchedule();
+    });
+    return (() => {
+        let root_0y6nu9v1 = template_0y6nu9v2(), element_0y6nu9v3 = root_0y6nu9v1.firstChild, element_0y6nu9v4 = element_0y6nu9v3.firstElementChild, element_0y6nu9v5 = element_0y6nu9v4.nextElementSibling, element_0y6nu9v6 = element_0y6nu9v5.nextElementSibling;
+        template_u1.setList(element_0y6nu9v3, 'class', () => clock.open && '--active');
+        template_u1.setList(element_0y6nu9v3, 'class', () => instant && clock.open && '--instant');
+        template_u1.setProperties(element_0y6nu9v3, this?.attributes);
+        template_u1.setProperties(element_0y6nu9v3, attributes);
+        template_u1.setProperty(element_0y6nu9v3, 'aria-describedby', () => clock.open ? id : '');
+        template_u1.setProperty(element_0y6nu9v3, 'datetime', () => {
+            let time = timeOf(state.date);
+            return time === null ? '' : new Date(time).toISOString();
+        });
+        template_u1.on(element_0y6nu9v3, 'blur', hide);
+        template_u1.onconnect(element_0y6nu9v3, (element) => {
+            digits = element.querySelector('.relative-time-digits') ?? undefined;
+            rest = element.querySelector('.relative-time-rests') ?? undefined;
+            stopRender = effect(() => {
+                let value = text();
+                if (value !== null) {
+                    render(value);
+                }
+            });
+        });
+        template_u1.ondisconnect(element_0y6nu9v3, () => {
+            stopRender?.();
+        });
+        template_u1.ondocument(element_0y6nu9v3, 'visibilitychange', () => {
+            if (document.visibilityState !== 'visible') {
+                return;
+            }
+            clock.tick++;
+            schedule();
+        });
+        template_u1.on(element_0y6nu9v3, 'focus', () => open(false));
+        template_u1.delegate(element_0y6nu9v3, 'keydown', (e) => {
+            if (e.key === 'Escape') {
+                hide();
+            }
+        });
+        template_u1.on(element_0y6nu9v3, 'pointerenter', (e) => {
+            if (e.pointerType !== 'touch') {
+                open(true);
+            }
+        });
+        template_u1.on(element_0y6nu9v3, 'pointerleave', hide);
+        template_u1.setProperty(element_0y6nu9v3, 'tabindex', () => state.date === null ? '' : '0');
+        new template_u1.EffectSlot(element_0y6nu9v4, () => text() ?? '', 1);
+        template_u1.setList(element_0y6nu9v5, 'class', () => state.date === null && '--placeholder');
+        template_u1.setProperty(element_0y6nu9v6, 'id', id);
+        template_u1.setProperties(element_0y6nu9v6, this?.attributes?.[RELATIVE_TIME_TOOLTIP]);
+        template_u1.setProperties(element_0y6nu9v6, attributes[RELATIVE_TIME_TOOLTIP]);
+        template_u1.onrender(element_0y6nu9v6, (element) => {
+            tooltip = element;
+        });
+        new template_u1.EffectSlot(element_0y6nu9v6, () => {
+            let time = timeOf(state.date);
+            return time === null ? '' : TOOLTIP.format(time);
+        }, 1);
+        return root_0y6nu9v1;
+    })();
+}
+export default Object.assign(template, { tooltip: RELATIVE_TIME_TOOLTIP });

package/build/components/relative-time/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.relative-time{--color-hover:var(--color-text-500);--focus-color:var(--color-text-500);--placeholder:"0 min ago"}.relative-time-tooltip.tooltip-message{--border-radius:var(--border-radius-300);--box-shadow:var(--box-shadow-200);--font-size:var(--font-size-300);--font-weight:var(--font-weight-500);--offset:3px;--padding-horizontal:var(--size-100);--padding-vertical:calc(var(--size-100) / 2);--scale:.9;--spacer:6px;--transition-duration:.1s;--transition-timing-function:cubic-bezier(.23, 1, .32, 1)}.relative-time.relative-time{border-radius:var(--border-radius-100);cursor:default;font-variant-numeric:tabular-nums;white-space:nowrap;outline:none;transition:color .15s ease-out;display:inline-flex}.relative-time.relative-time:focus-visible,.relative-time.relative-time:hover{color:var(--color-hover)}.relative-time.relative-time:focus-visible{outline:2px solid var(--focus-color);outline-offset:2px}.relative-time-digit,.relative-time-rest{white-space:pre;display:inline-block}.relative-time-digits,.relative-time-rests,.relative-time-roll,.relative-time-slot{display:inline-flex;position:relative}.relative-time-digits:empty{display:none}.relative-time-roll.--placeholder:before{content:var(--placeholder);visibility:hidden}.relative-time-sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.relative-time-tooltip.tooltip-message{filter:blur(2px);transform-origin:bottom;transition:filter var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function), scale var(--transition-duration) var(--transition-timing-function), translate var(--transition-duration) var(--transition-timing-function)}.relative-time.--active>.relative-time-tooltip.tooltip-message{--transition-duration:.16s;filter:blur()}.relative-time.--instant>.relative-time-tooltip.tooltip-message{transition:none}@media (prefers-reduced-motion:reduce){.relative-time-tooltip.tooltip-message{--offset:0px;--scale:1;filter:none}}}
+/*$vite$:1*/

package/build/components/root/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {:root{--border-radius-100:2px;--border-radius-200:4px;--border-radius-300:6px;--border-radius-400:8px;--border-radius-500:10px;--border-radius-600:12px;--border-radius-700:16px;--border-width-400:1px;--border-width-500:2px;--border-width-600:3px;--border-width-700:4px;--box-shadow-100:0 1px 2px 0 oklch(from var(--color-black-300) l c h/.2);--box-shadow-200:0 1px 3px 0 oklch(from var(--color-black-300) l c h/.2), 0 1px 2px -1px oklch(from var(--color-black-300) l c h/.2);--box-shadow-300:0 4px 6px -1px oklch(from var(--color-black-300) l c h/.2), 0 2px 4px -2px oklch(from var(--color-black-300) l c h/.2);--box-shadow-400:0 10px 15px -3px oklch(from var(--color-black-300) l c h/.2), 0 10px 15px -3px oklch(from var(--color-black-300) l c h/.2), 0 4px 6px -4px oklch(from var(--color-black-300) l c h/.2);--box-shadow-500:0 20px 25px -5px oklch(from var(--color-black-300) l c h/.2), 0 8px 10px -6px oklch(from var(--color-black-300) l c h/.2);--box-shadow-600:0 25px 50px -12px oklch(from var(--color-black-500) l c h/.2);--box-shadow-glow:0px 0px 128px 32px var(--box-shadow-color,#fff), 0px 0px 32px 8px var(--box-shadow-color,#fff), 0px 0px 8px 0px var(--box-shadow-color,#fff);--color-black-300:oklch(18.84% .0306 277.2);--color-black-400:oklch(11.47% .0361 268.9);--color-black-500:oklch(10.04% .0287 263.4);--color-blue-300:oklch(54.49% .2514 268.2);--color-blue-400:oklch(51.45% .2712 266.6);--color-blue-500:oklch(48.45% .2617 266.3);--color-border-300:oklch(92.9% .013 255.508);--color-border-400:oklch(86.9% .022 252.894);--color-border-500:oklch(70.4% .04 256.788);--color-green-300:oklch(87.03% .2708 144.9);--color-green-400:oklch(83.7% .2711 144);--color-green-500:oklch(78.97% .256 144);--color-grey-300:oklch(98.42% .0034 247.86);--color-grey-400:oklch(96.83% .0069 247.9);--color-grey-500:oklch(92.88% .0126 255.51);--color-purple-300:oklch(53.29% .2877 292.5);--color-purple-400:oklch(51.66% .2929 289.7);--color-purple-500:oklch(48.63% .2754 289.9);--color-red-300:oklch(64.46% .2412 23.8);--color-red-400:oklch(62.87% .2567 27.7);--color-red-500:oklch(59.1% .2413 27.6);--color-text-300:oklch(55.1% .027 264.364);--color-text-400:oklch(37.3% .034 259.733);--color-text-500:oklch(21% .034 264.665);--color-white-300:oklch(100% 0 0);--color-white-400:oklch(99.2% 0 0);--color-white-500:oklch(98.5% 0 0);--color-yellow-300:oklch(90.5% .182 98.1);--color-yellow-400:oklch(85.2% .199 91.9);--color-yellow-500:oklch(79.5% .184 86);--font-size-100:.486rem;--font-size-200:.618rem;--font-size-300:.786rem;--font-size-400:1rem;--font-size-500:1.272rem;--font-size-600:1.618rem;--font-size-700:2.058rem;--font-size-800:2.618rem;--font-size-900:3.33rem;--size-100:8px;--size-200:10px;--size-300:13px;--size-400:16px;--size-500:20px;--size-600:26px;--size-700:33px;--size-800:42px;--size-900:53px;--size-0px:0px;--spacer-100:58.31px;--spacer-200:74.17px;--spacer-300:94.34px;--spacer-400:120px;--spacer-500:152.64px;--spacer-600:194.16px;--spacer-700:246.97px;--background:var(--color-white-400);--color:var(--color-text-400);--font-size:var(--font-size-400);--font-weight:var(--font-weight-400);--min-width:320px;--transition-duration:.16s;--transition-timing-function:cubic-bezier(.4, 0, .2, 1)}*{--border-radius:calc(1em / 1.618);--gap:calc(1em / 1.618);--gap-horizontal:var(--gap);--gap-vertical:var(--gap);--letter-spacing:clamp(-.022em, calc(.060542rem - .051418em), 0em);--line-height:clamp(1.128em, calc(.95em + .668rem), 1.618em);--padding-horizontal:1em;--padding-vertical:calc(1em * 1.272 / (1.618 * 1.618))}b,strong,h1,h2,h3,h4{--color:var(--color-text-400);--font-weight:var(--font-weight-500)}h1{--font-size:var(--font-size-800)}h2{--font-size:var(--font-size-700)}h3{--font-size:var(--font-size-600)}h4{--font-size:var(--font-size-500)}h5{--font-size:var(--font-size-400)}section{--width:100%}body,html{width:100%;height:100%;overflow-x:hidden}h1,h2,h3,h4,h5,h6{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight-500);text-wrap:balance;word-wrap:break-word;width:100%;margin:0;padding:0;position:relative}h1 sub,h1 sup,h2 sub,h2 sup,h3 sub,h3 sup,h4 sub,h4 sup,h5 sub,h5 sup,h6 sub,h6 sup{font-size:.64em}b,strong{color:var(--color,inherit);font-weight:var(--font-weight)}sub,sup{font-size:.8em}body{background-color:var(--background);color:var(--color);font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight);min-width:var(--min-width);text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{letter-spacing:var(--letter-spacing);line-height:var(--line-height)}*,:after,:before{box-sizing:border-box;transition:inherit}a{color:var(--color,inherit);cursor:pointer;outline:none;text-decoration:none}p{word-wrap:break-word;width:100%;margin:0;padding:0}pre{overflow-wrap:break-word;white-space:break-spaces;width:100%;margin:0;padding:0}section{width:var(--width);flex-wrap:wrap;place-content:flex-start;display:flex;position:relative}sub{bottom:-.48em}sup{top:-.48em}}
+@layer components {:root{--border-radius-100:2px;--border-radius-200:4px;--border-radius-300:6px;--border-radius-400:8px;--border-radius-500:10px;--border-radius-600:12px;--border-radius-700:16px;--border-width-400:1px;--border-width-500:2px;--border-width-600:3px;--border-width-700:4px;--box-shadow-100:0 1px 2px 0 oklch(from var(--color-black-300) l c h/.2);--box-shadow-200:0 1px 3px 0 oklch(from var(--color-black-300) l c h/.2), 0 1px 2px -1px oklch(from var(--color-black-300) l c h/.2);--box-shadow-300:0 4px 6px -1px oklch(from var(--color-black-300) l c h/.2), 0 2px 4px -2px oklch(from var(--color-black-300) l c h/.2);--box-shadow-400:0 10px 15px -3px oklch(from var(--color-black-300) l c h/.2), 0 10px 15px -3px oklch(from var(--color-black-300) l c h/.2), 0 4px 6px -4px oklch(from var(--color-black-300) l c h/.2);--box-shadow-500:0 20px 25px -5px oklch(from var(--color-black-300) l c h/.2), 0 8px 10px -6px oklch(from var(--color-black-300) l c h/.2);--box-shadow-600:0 25px 50px -12px oklch(from var(--color-black-500) l c h/.2);--box-shadow-glow:0px 0px 128px 32px var(--box-shadow-color,#fff), 0px 0px 32px 8px var(--box-shadow-color,#fff), 0px 0px 8px 0px var(--box-shadow-color,#fff);--color-black-300:oklch(18.84% .0306 277.2);--color-black-400:oklch(11.47% .0361 268.9);--color-black-500:oklch(10.04% .0287 263.4);--color-blue-300:oklch(54.49% .2514 268.2);--color-blue-400:oklch(51.45% .2712 266.6);--color-blue-500:oklch(48.45% .2617 266.3);--color-border-300:oklch(92.9% .013 255.508);--color-border-400:oklch(86.9% .022 252.894);--color-border-500:oklch(70.4% .04 256.788);--color-green-300:oklch(87.03% .2708 144.9);--color-green-400:oklch(83.7% .2711 144);--color-green-500:oklch(78.97% .256 144);--color-grey-300:oklch(98.42% .0034 247.86);--color-grey-400:oklch(96.83% .0069 247.9);--color-grey-500:oklch(92.88% .0126 255.51);--color-purple-300:oklch(53.29% .2877 292.5);--color-purple-400:oklch(51.66% .2929 289.7);--color-purple-500:oklch(48.63% .2754 289.9);--color-red-300:oklch(64.46% .2412 23.8);--color-red-400:oklch(62.87% .2567 27.7);--color-red-500:oklch(59.1% .2413 27.6);--color-text-300:oklch(55.1% .027 264.364);--color-text-400:oklch(37.3% .034 259.733);--color-text-500:oklch(21% .034 264.665);--color-white-300:oklch(100% 0 0);--color-white-400:oklch(99.2% 0 0);--color-white-500:oklch(98.5% 0 0);--color-yellow-300:oklch(90.5% .182 98.1);--color-yellow-400:oklch(85.2% .199 91.9);--color-yellow-500:oklch(79.5% .184 86);--font-size-100:.486rem;--font-size-200:.618rem;--font-size-300:.786rem;--font-size-400:1rem;--font-size-500:1.272rem;--font-size-600:1.618rem;--font-size-700:2.058rem;--font-size-800:2.618rem;--font-size-900:3.33rem;--size-100:8px;--size-200:10px;--size-300:13px;--size-400:16px;--size-500:20px;--size-600:26px;--size-700:33px;--size-800:42px;--size-900:53px;--size-0px:0px;--spacer-100:58.31px;--spacer-200:74.17px;--spacer-300:94.34px;--spacer-400:120px;--spacer-500:152.64px;--spacer-600:194.16px;--spacer-700:246.97px;--background:var(--color-white-400);--color:var(--color-text-400);--font-size:var(--font-size-400);--font-weight:var(--font-weight-400);--min-width:320px;--transition-duration:.16s;--transition-timing-function:cubic-bezier(.4, 0, .2, 1)}*{--border-radius:calc(1em / 1.618);--gap:calc(1em / 1.618);--gap-horizontal:var(--gap);--gap-vertical:var(--gap);--letter-spacing:clamp(-.022em, calc(.060542rem - .051418em), 0em);--line-height:clamp(1.128em, calc(.95em + .668rem), 1.618em);--padding-horizontal:1em;--padding-vertical:calc(1em * 1.272 / (1.618 * 1.618))}b,strong,h1,h2,h3,h4{--color:var(--color-text-400);--font-weight:var(--font-weight-500)}h1{--font-size:var(--font-size-800)}h2{--font-size:var(--font-size-700)}h3{--font-size:var(--font-size-600)}h4{--font-size:var(--font-size-500)}h5{--font-size:var(--font-size-400)}section{--width:100%}body,html{width:100%;height:100%;overflow-x:hidden}h1,h2,h3,h4,h5,h6{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight-500);overflow-wrap:break-word;text-wrap:balance;width:100%;margin:0;padding:0;position:relative}h1 sub,h1 sup,h2 sub,h2 sup,h3 sub,h3 sup,h4 sub,h4 sup,h5 sub,h5 sup,h6 sub,h6 sup{font-size:.64em}b,strong{color:var(--color,inherit);font-weight:var(--font-weight)}sub,sup{font-size:.8em}body{background-color:var(--background);color:var(--color);font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight);min-width:var(--min-width);text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{letter-spacing:var(--letter-spacing);line-height:var(--line-height)}*,:after,:before{box-sizing:border-box;transition:inherit}a{color:var(--color,inherit);cursor:pointer;outline:none;text-decoration:none}p{overflow-wrap:break-word;width:100%;margin:0;padding:0}pre{overflow-wrap:break-word;white-space:break-spaces;width:100%;margin:0;padding:0}section{width:var(--width);flex-wrap:wrap;place-content:flex-start;display:flex;position:relative}sub{bottom:-.48em}sup{top:-.48em}}
 /*$vite$:1*/

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

@@ -0,0 +1,39 @@
+import * as template_u1 from '@esportsplus/template';
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & Options & {
+    auto?: boolean;
+    edges?: 'both' | 'bottom' | 'top';
+    scrollbar?: boolean;
+};
+type Edge = Attributes & Options & {
+    fixed?: boolean;
+    side?: 'bottom' | 'top';
+};
+type Options = {
+    blur?: number;
+    progressive?: boolean;
+    size?: number;
+};
+declare const _default: {
+    (): template_u1.Renderable<any>;
+    <T extends A>(attributes: T): template_u1.Renderable<any>;
+    <T extends template_u1.Renderable<any>>(content: T): template_u1.Renderable<any>;
+    (attributes: A, content?: template_u1.Renderable<any>): template_u1.Renderable<any>;
+    bind(context: {
+        attributes?: Partial<A> | undefined;
+        content?: template_u1.Renderable<any>;
+    }): any;
+} & {
+    edge: {
+        (): template_u1.Renderable<any>;
+        <T extends Edge>(attributes: T): template_u1.Renderable<any>;
+        <T extends template_u1.Renderable<any>>(content: T): template_u1.Renderable<any>;
+        (attributes: Edge, content?: template_u1.Renderable<any>): template_u1.Renderable<any>;
+        bind(context: {
+            attributes?: Partial<Edge> | undefined;
+            content?: template_u1.Renderable<any>;
+        }): any;
+    };
+};
+export default _default;

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

@@ -0,0 +1,104 @@
+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_1mnqqwz2 = template_u1.template(`<div class='scroll-fade-layer'>`);
+const template_1mnqqwz5 = template_u1.template(`<div aria-hidden='true' class='scroll-fade-edge   '>`);
+const template_1mnqqwz8 = template_u1.template(`<div class='scroll-fade'><!--$--><!--$--><div class='scroll-fade-viewport '>`);
+const template_1mnqqwze = template_u1.template(`<div aria-hidden='true' class='scroll-fade-edge scroll-fade-edge--top '>`);
+const template_1mnqqwzh = template_u1.template(`<div aria-hidden='true' class='scroll-fade-edge scroll-fade-edge--bottom '>`);
+class ReactiveObject_1mnqqwz0 extends reactivity_u0.ReactiveObject {
+    #end = this[reactivity_u0.SIGNAL](false);
+    #start = this[reactivity_u0.SIGNAL](true);
+    constructor() {
+        super(null);
+    }
+    get end() {
+        return reactivity_u0.read(this.#end);
+    }
+    set end(_v0) {
+        reactivity_u0.write(this.#end, _v0);
+    }
+    get start() {
+        return reactivity_u0.read(this.#start);
+    }
+    set start(_v1) {
+        reactivity_u0.write(this.#start, _v1);
+    }
+}
+const LAYERS = 4;
+function options({ blur, size }) {
+    return `${blur !== undefined ? `--blur: ${blur}px;` : ''}${size !== undefined ? ` --size: ${size}px;` : ''}`;
+}
+function layers(progressive) {
+    if (!progressive) {
+        return '';
+    }
+    return Array.from({ length: LAYERS }, (_, i) => {
+        let root_1mnqqwz1 = template_1mnqqwz2(), element_1mnqqwz3 = root_1mnqqwz1.firstChild;
+        template_u1.setList(element_1mnqqwz3, 'style', `--layer: ${i}`);
+        return root_1mnqqwz1;
+    });
+}
+const edge = component(function ({ blur, fixed = false, progressive = false, side = 'bottom', size, ...attributes }) {
+    return (() => {
+        let root_1mnqqwz4 = template_1mnqqwz5(), element_1mnqqwz6 = root_1mnqqwz4.firstChild;
+        template_u1.setList(element_1mnqqwz6, 'class', template_u1.interpolate(["scroll-fade-edge--", (side)]));
+        template_u1.setList(element_1mnqqwz6, 'class', fixed && 'scroll-fade-edge--fixed');
+        template_u1.setList(element_1mnqqwz6, 'class', progressive && 'scroll-fade-edge--progressive');
+        template_u1.setList(element_1mnqqwz6, 'style', options({ blur, size }));
+        template_u1.setProperties(element_1mnqqwz6, this?.attributes);
+        template_u1.setProperties(element_1mnqqwz6, attributes);
+        template_u1.slot(element_1mnqqwz6, layers(progressive), 1);
+        return root_1mnqqwz4;
+    })();
+});
+export default Object.assign(component(function ({ auto = false, blur, edges = 'both', progressive = false, scrollbar = false, size, ...attributes }, content) {
+    let observer, ui = new ReactiveObject_1mnqqwz0();
+    function measure(viewport) {
+        ui.start = viewport.scrollTop <= 1;
+        ui.end = viewport.scrollTop + viewport.clientHeight >= viewport.scrollHeight - 1;
+    }
+    return (() => {
+        let root_1mnqqwz7 = template_1mnqqwz8(), element_1mnqqwz9 = root_1mnqqwz7.firstChild, element_1mnqqwza = element_1mnqqwz9.firstChild, element_1mnqqwzb = element_1mnqqwza.nextSibling, element_1mnqqwzc = element_1mnqqwz9.firstElementChild;
+        template_u1.setList(element_1mnqqwz9, 'style', options({ blur, size }));
+        template_u1.setProperties(element_1mnqqwz9, this?.attributes);
+        template_u1.setProperties(element_1mnqqwz9, attributes);
+        template_u1.slot(element_1mnqqwza, edges !== 'bottom' && (() => {
+            let root_1mnqqwzd = template_1mnqqwze(), element_1mnqqwzf = root_1mnqqwzd.firstChild;
+            template_u1.setList(element_1mnqqwzf, 'class', progressive && 'scroll-fade-edge--progressive');
+            template_u1.setList(element_1mnqqwzf, 'class', () => auto && ui.start && '--hidden');
+            template_u1.slot(element_1mnqqwzf, layers(progressive), 1);
+            return root_1mnqqwzd;
+        })());
+        template_u1.slot(element_1mnqqwzb, edges !== 'top' && (() => {
+            let root_1mnqqwzg = template_1mnqqwzh(), element_1mnqqwzi = root_1mnqqwzg.firstChild;
+            template_u1.setList(element_1mnqqwzi, 'class', progressive && 'scroll-fade-edge--progressive');
+            template_u1.setList(element_1mnqqwzi, 'class', () => auto && ui.end && '--hidden');
+            template_u1.slot(element_1mnqqwzi, layers(progressive), 1);
+            return root_1mnqqwzg;
+        })());
+        template_u1.setList(element_1mnqqwzc, 'class', !scrollbar && '--no-scrollbar');
+        template_u1.onconnect(element_1mnqqwzc, (element) => {
+            if (!auto) {
+                return;
+            }
+            observer = new ResizeObserver(() => measure(element));
+            observer.observe(element);
+            for (let i = 0, n = element.children.length; i < n; i++) {
+                observer.observe(element.children[i]);
+            }
+            measure(element);
+        });
+        template_u1.ondisconnect(element_1mnqqwzc, () => {
+            observer?.disconnect();
+        });
+        template_u1.on(element_1mnqqwzc, 'scroll', function () {
+            if (auto) {
+                measure(this);
+            }
+        });
+        template_u1.slot(element_1mnqqwzc, content, 1);
+        return root_1mnqqwz7;
+    })();
+}), { edge });

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

@@ -0,0 +1,2 @@
+@layer components {.scroll-fade,.scroll-fade-edge:not(.scroll-fade>*){--blur:3px;--duration:.2s;--fade-color:var(--color-white-300);--size:110px;--stop:35%}.scroll-fade{flex-direction:column;display:flex;position:relative;overflow:hidden}.scroll-fade-edge{-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));background:linear-gradient(var(--direction), transparent, var(--fade-color));height:var(--size);-webkit-mask-image:linear-gradient(var(--mask-direction), #000 var(--stop), transparent);-webkit-mask-image:linear-gradient(var(--mask-direction), #000 var(--stop), transparent);mask-image:linear-gradient(var(--mask-direction), #000 var(--stop), transparent);pointer-events:none;transition:opacity var(--duration) ease-out;-webkit-user-select:none;user-select:none;z-index:30;position:absolute;inset-inline:0}.scroll-fade-edge--bottom{--direction:to bottom;--mask-direction:to top;bottom:0}.scroll-fade-edge--fixed{position:fixed}.scroll-fade-edge--progressive{-webkit-backdrop-filter:none;backdrop-filter:none;background:0 0;-webkit-mask-image:none;mask-image:none}.scroll-fade-edge--progressive:before{background:linear-gradient(var(--direction), transparent, var(--fade-color));content:"";-webkit-mask-image:linear-gradient(var(--mask-direction), #000 var(--stop), transparent);-webkit-mask-image:linear-gradient(var(--mask-direction), #000 var(--stop), transparent);mask-image:linear-gradient(var(--mask-direction), #000 var(--stop), transparent);position:absolute;inset:0}.scroll-fade-edge--progressive:before,.scroll-fade-edge--progressive .scroll-fade-layer{transition:opacity var(--duration) ease-out}.scroll-fade-edge--progressive.--hidden{opacity:1}.scroll-fade-edge--progressive.--hidden:before,.scroll-fade-edge--progressive.--hidden .scroll-fade-layer{opacity:0}.scroll-fade-edge--top{--direction:to top;--mask-direction:to bottom;top:0}.scroll-fade-edge.--hidden{opacity:0}.scroll-fade-layer{-webkit-mask-image:linear-gradient(var(--mask-direction), #000 calc(100% - (var(--layer) + 1) * 25%), transparent calc(100% - var(--layer) * 25%));-webkit-mask-image:linear-gradient(var(--mask-direction), #000 calc(100% - (var(--layer) + 1) * 25%), transparent calc(100% - var(--layer) * 25%));mask-image:linear-gradient(var(--mask-direction), #000 calc(100% - (var(--layer) + 1) * 25%), transparent calc(100% - var(--layer) * 25%));position:absolute;inset:0}.scroll-fade-layer:first-child{-webkit-backdrop-filter:blur(calc(var(--blur) * .25));backdrop-filter:blur(calc(var(--blur) * .25))}.scroll-fade-layer:nth-child(2){-webkit-backdrop-filter:blur(calc(var(--blur) * .5));backdrop-filter:blur(calc(var(--blur) * .5))}.scroll-fade-layer:nth-child(3){-webkit-backdrop-filter:blur(calc(var(--blur) * 1));backdrop-filter:blur(calc(var(--blur) * 1))}.scroll-fade-layer:nth-child(4){-webkit-backdrop-filter:blur(calc(var(--blur) * 2));backdrop-filter:blur(calc(var(--blur) * 2))}.scroll-fade-viewport{flex:1;min-height:0;overflow-y:auto}.scroll-fade-viewport.--no-scrollbar{scrollbar-width:none}.scroll-fade-viewport.--no-scrollbar::-webkit-scrollbar{display:none}}
+/*$vite$:1*/

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

@@ -0,0 +1,26 @@
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    [SCROLL_SPINE_BUTTON]?: Attributes;
+    height?: number;
+    items: Item[];
+    label?: string;
+    state?: State;
+    target?: HTMLElement | (() => HTMLElement | null | undefined);
+};
+type Item = {
+    id: string;
+    label: string;
+};
+type State = {
+    active: number;
+};
+declare const SCROLL_SPINE_BUTTON: unique symbol;
+declare function template(this: {
+    attributes?: Partial<A>;
+} | void, { height, items, label, state, target, ...attributes }: A): DocumentFragment | Text;
+declare const _default: typeof template & {
+    readonly button: typeof SCROLL_SPINE_BUTTON;
+};
+export default _default;
+export type { Item, State };