@esportsplus/ui 0.56.4 → 0.57.0

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

@@ -1,106 +0,0 @@
-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

@@ -1,2 +0,0 @@
-@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/scroll-fade/index.d.ts

@@ -1,39 +0,0 @@
-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

@@ -1,104 +0,0 @@
-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

@@ -1,2 +0,0 @@
-@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

@@ -1,26 +0,0 @@
-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 };

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

@@ -1,204 +0,0 @@
-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

@@ -1,2 +0,0 @@
-@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

@@ -1,22 +0,0 @@
-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;