@esportsplus/ui 0.55.0 → 0.56.2

package/build/components/sparkline/index.js

@@ -0,0 +1,173 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import './scss/index.scss';
+const template_1msnkro3 = template_u1.template(`<div class='sparkline'><div class='sparkline-header'><div><div class='sparkline-title'></div><div class='sparkline-value'></div></div><div class='sparkline-delta'><span class='sparkline-delta-value'></span> vs </div></div><div aria-roledescription='line chart' class='sparkline-plot' role='group' tabindex='0'><svg aria-hidden='true' class='sparkline-svg' viewBox='0 0 520 160'><path class='sparkline-area' /><path class='sparkline-line' fill='none' pathLength='1' /></svg><div aria-hidden='true' class='sparkline-overlay'><div class='sparkline-cursor'></div><div class='sparkline-dot'></div><div class='sparkline-tip'><span class='sparkline-tip-value'></span><span class='sparkline-tip-label'></span></div></div></div><span aria-live='polite' class='sparkline-sr'></span><div class='sparkline-sr'><table><caption></caption><thead><tr><th scope='col'>Day</th><th scope='col'>Value</th></tr></thead><tbody>`);
+const template_1msnkrol = template_u1.template(`<tr><th scope='row'></th><td>`);
+class ReactiveObject_1msnkro0 extends reactivity_u0.ReactiveObject {
+    #active = this[reactivity_u0.SIGNAL](false);
+    #index;
+    constructor(_p0) {
+        super(null);
+        this.#index = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get active() {
+        return reactivity_u0.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_u0.write(this.#active, _v0);
+    }
+    get index() {
+        return reactivity_u0.read(this.#index);
+    }
+    set index(_v1) {
+        reactivity_u0.write(this.#index, _v1);
+    }
+}
+class ReactiveObject_1msnkro1 extends reactivity_u0.ReactiveObject {
+    #announcement = this[reactivity_u0.SIGNAL]('');
+    #shown = this[reactivity_u0.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get announcement() {
+        return reactivity_u0.read(this.#announcement);
+    }
+    set announcement(_v0) {
+        reactivity_u0.write(this.#announcement, _v0);
+    }
+    get shown() {
+        return reactivity_u0.read(this.#shown);
+    }
+    set shown(_v1) {
+        reactivity_u0.write(this.#shown, _v1);
+    }
+}
+const HEIGHT = 160;
+const KEYS = {
+    ArrowLeft: (index) => index - 1,
+    ArrowRight: (index) => index + 1,
+    End: (_, last) => last,
+    Home: () => 0
+};
+const PAD_X = 8;
+const PAD_Y = 10;
+const SPARKLINE_PLOT = Symbol.for('@esportsplus/ui/sparkline.plot');
+const TIP_INSET = 72;
+const WIDTH = 520;
+function percent(value, of) {
+    return `${(value / of) * 100}%`;
+}
+function template({ data, format = String, state = new ReactiveObject_1msnkro0(data.length - 1), title, ...attributes }) {
+    let first = data[0], last = data[data.length - 1], max = -Infinity, min = Infinity, observer, plot, view = new ReactiveObject_1msnkro1();
+    for (let i = 0, n = data.length; i < n; i++) {
+        max = Math.max(max, data[i].value);
+        min = Math.min(min, data[i].value);
+    }
+    let delta = last.value - first.value, span = max - min || 1, step = (WIDTH - PAD_X * 2) / Math.max(data.length - 1, 1);
+    function describe(index) {
+        return `${data[index].label}: ${format(data[index].value)}`;
+    }
+    function nearest(clientX) {
+        if (!plot) {
+            return state.index;
+        }
+        let box = plot.getBoundingClientRect(), x = ((clientX - box.left) / box.width) * WIDTH;
+        return Math.min(Math.max(Math.round((x - PAD_X) / step), 0), data.length - 1);
+    }
+    function x(index) {
+        return PAD_X + index * step;
+    }
+    function y(value) {
+        return PAD_Y + (1 - (value - min) / span) * (HEIGHT - PAD_Y * 2);
+    }
+    let line = data.map((point, i) => `${i ? 'L' : 'M'}${x(i).toFixed(1)} ${y(point.value).toFixed(1)}`).join(' '), area = `${line} L${x(data.length - 1)} ${HEIGHT} L${x(0)} ${HEIGHT} Z`;
+    return (() => {
+        let root_1msnkro2 = template_1msnkro3(), element_1msnkro4 = root_1msnkro2.firstChild, element_1msnkro5 = element_1msnkro4.firstElementChild.firstElementChild.firstElementChild, element_1msnkro6 = element_1msnkro5.nextElementSibling, element_1msnkro7 = element_1msnkro4.firstElementChild.firstElementChild.nextElementSibling.firstElementChild, element_1msnkro8 = element_1msnkro4.firstElementChild.firstElementChild.nextElementSibling, element_1msnkro9 = element_1msnkro4.firstElementChild.nextElementSibling, element_1msnkroa = element_1msnkro9.firstElementChild.firstElementChild, element_1msnkrob = element_1msnkroa.nextElementSibling, element_1msnkroc = element_1msnkro9.firstElementChild.nextElementSibling.firstElementChild, element_1msnkrod = element_1msnkroc.nextElementSibling, element_1msnkroe = element_1msnkrod.nextElementSibling, element_1msnkrof = element_1msnkroe.firstElementChild, element_1msnkrog = element_1msnkrof.nextElementSibling, element_1msnkroh = element_1msnkro9.nextElementSibling, element_1msnkroi = element_1msnkroh.nextElementSibling.firstElementChild.firstElementChild, element_1msnkroj = element_1msnkroi.nextElementSibling.nextElementSibling;
+        template_u1.setProperties(element_1msnkro4, this?.attributes);
+        template_u1.setProperties(element_1msnkro4, attributes);
+        template_u1.slot(element_1msnkro5, title, 1);
+        template_u1.slot(element_1msnkro6, format(last.value), 1);
+        element_1msnkro7.appendChild(template_u1.text(`${delta > 0 ? '+' : delta < 0 ? '-' : ''}${format(Math.abs(delta))}`));
+        template_u1.slot(element_1msnkro8, first.label, 2);
+        template_u1.setProperties(element_1msnkro9, this?.attributes?.[SPARKLINE_PLOT]);
+        template_u1.setProperties(element_1msnkro9, attributes[SPARKLINE_PLOT]);
+        template_u1.setProperty(element_1msnkro9, 'aria-label', `${title}, ${data.length} points. Use arrow keys to read values.`);
+        template_u1.setList(element_1msnkro9, 'class', () => `${state.active ? '--active' : ''} ${view.shown ? '--shown' : ''}`);
+        template_u1.on(element_1msnkro9, 'blur', () => {
+            state.active = false;
+        });
+        template_u1.onconnect(element_1msnkro9, (element) => {
+            plot = element;
+            observer = new IntersectionObserver((entries) => {
+                if (!entries.some((entry) => entry.isIntersecting)) {
+                    return;
+                }
+                observer?.disconnect();
+                view.shown = true;
+            });
+            observer.observe(element);
+        });
+        template_u1.ondisconnect(element_1msnkro9, () => {
+            observer?.disconnect();
+        });
+        template_u1.on(element_1msnkro9, 'focus', () => {
+            state.active = true;
+            view.announcement = describe(state.index);
+        });
+        template_u1.delegate(element_1msnkro9, 'keydown', (e) => {
+            let key = KEYS[e.key];
+            if (!key) {
+                return;
+            }
+            e.preventDefault();
+            let index = Math.min(Math.max(key(state.index, data.length - 1), 0), data.length - 1);
+            state.active = true;
+            state.index = index;
+            view.announcement = describe(index);
+        });
+        template_u1.delegate(element_1msnkro9, 'pointercancel', () => {
+            state.active = false;
+        });
+        template_u1.delegate(element_1msnkro9, 'pointerdown', (e) => {
+            if (e.pointerType !== 'touch') {
+                return;
+            }
+            state.index = nearest(e.clientX);
+            state.active = true;
+        });
+        template_u1.on(element_1msnkro9, 'pointerleave', (e) => {
+            if (e.pointerType !== 'touch') {
+                state.active = false;
+            }
+        });
+        template_u1.delegate(element_1msnkro9, 'pointermove', (e) => {
+            if (e.pointerType === 'touch' && !state.active) {
+                return;
+            }
+            state.index = nearest(e.clientX);
+            state.active = true;
+        });
+        template_u1.delegate(element_1msnkro9, 'pointerup', (e) => {
+            if (e.pointerType === 'touch') {
+                state.active = false;
+            }
+        });
+        template_u1.setProperty(element_1msnkroa, 'd', area);
+        template_u1.setProperty(element_1msnkrob, 'd', line);
+        template_u1.setList(element_1msnkroc, 'style', () => `left: ${percent(x(state.index), WIDTH)}`);
+        template_u1.setList(element_1msnkrod, 'style', () => `left: ${percent(x(state.index), WIDTH)}; top: ${percent(y(data[state.index].value), HEIGHT)}`);
+        template_u1.setList(element_1msnkroe, 'style', () => `left: ${percent(Math.min(Math.max(x(state.index), TIP_INSET), WIDTH - TIP_INSET), WIDTH)}`);
+        new template_u1.EffectSlot(element_1msnkrof, () => format(data[state.index].value), 1);
+        new template_u1.EffectSlot(element_1msnkrog, () => data[state.index].label, 1);
+        new template_u1.EffectSlot(element_1msnkroh, () => view.announcement, 1);
+        template_u1.slot(element_1msnkroi, title, 1);
+        template_u1.slot(element_1msnkroj, data.map((point) => {
+            let root_1msnkrok = template_1msnkrol(), element_1msnkrom = root_1msnkrok.firstChild.firstElementChild, element_1msnkron = element_1msnkrom.nextElementSibling;
+            template_u1.slot(element_1msnkrom, point.label, 1);
+            template_u1.slot(element_1msnkron, format(point.value), 1);
+            return root_1msnkrok;
+        }), 1);
+        return root_1msnkro2;
+    })();
+}
+export default Object.assign(template, { plot: SPARKLINE_PLOT });

package/build/components/sparkline/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.sparkline{--area-color:color-mix(in oklab, var(--line-color) 8%, transparent);--color:var(--color-text-500);--cursor-color:color-mix(in oklab, var(--color-text-300) 40%, transparent);--draw-duration:.7s;--draw-timing-function:cubic-bezier(.23, 1, .32, 1);--dot-color:var(--line-color);--dot-ring-color:var(--color-white-300);--dot-size:12px;--focus-color:var(--color-text-500);--font-size:var(--font-size-400);--line-color:var(--color-text-500);--line-width:2.5;--muted-color:var(--color-text-300);--plot-offset:48px;--tip-background:var(--color-text-500);--tip-color:var(--color-white-300);--tip-font-size:var(--font-size-300);--value-font-size:var(--font-size-700);--value-font-weight:var(--font-weight-600);--width:520px}.sparkline--accent{--dot-color:var(--color-blue-400);--line-color:var(--color-blue-400);--tip-background:var(--color-blue-400)}.sparkline{color:var(--color);font-size:var(--font-size);max-width:100%;width:var(--width)}.sparkline-area{fill:var(--area-color);opacity:0;transition:opacity var(--draw-duration) var(--draw-timing-function)}.sparkline-cursor{background:var(--cursor-color);width:1px;height:100%;position:absolute;top:0;translate:-50%}.sparkline-delta{color:var(--muted-color);white-space:nowrap}.sparkline-delta-value{color:var(--color);font-variant-numeric:tabular-nums;font-weight:var(--font-weight-500)}.sparkline-dot{background:var(--dot-color);box-shadow:0 0 0 2px var(--dot-ring-color);height:var(--dot-size);width:var(--dot-size);border-radius:50%;position:absolute;translate:-50% -50%}.sparkline-header{align-items:baseline;gap:var(--size-400);justify-content:space-between;display:flex}.sparkline-line{opacity:0;stroke:var(--line-color);stroke-dasharray:1;stroke-dashoffset:1px;stroke-linecap:round;stroke-linejoin:round;stroke-width:var(--line-width);transition:opacity 50ms var(--draw-timing-function), stroke-dashoffset var(--draw-duration) var(--draw-timing-function)}.sparkline-overlay{opacity:0;pointer-events:none;transition:opacity .15s ease-out;position:absolute;inset:0}.sparkline-plot{aspect-ratio:520/160;border-radius:var(--border-radius-100);margin-top:var(--plot-offset);touch-action:pan-y;-webkit-user-select:none;user-select:none;outline:none;width:100%;position:relative}.sparkline-plot:focus-visible{outline:2px solid var(--focus-color);outline-offset:4px}.sparkline-plot.--active .sparkline-overlay{opacity:1;transition-duration:.1s}.sparkline-plot.--shown .sparkline-area,.sparkline-plot.--shown .sparkline-line{opacity:1}.sparkline-plot.--shown .sparkline-line{stroke-dashoffset:0}.sparkline-sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.sparkline-svg{width:100%;height:auto;display:block;overflow:visible}.sparkline-tip{background:var(--tip-background);color:var(--tip-color);font-size:var(--tip-font-size);align-items:baseline;gap:var(--size-300);white-space:nowrap;border-radius:999px;margin-bottom:10px;padding:6px 12px;display:flex;position:absolute;bottom:100%;translate:-50%}.sparkline-tip-label{opacity:.7}.sparkline-tip-value{font-variant-numeric:tabular-nums;font-weight:var(--font-weight-600)}.sparkline-title{color:var(--muted-color)}.sparkline-value{font-size:var(--value-font-size);font-variant-numeric:tabular-nums;font-weight:var(--value-font-weight);letter-spacing:-.025em;line-height:1.2}@media (prefers-reduced-motion:reduce){.sparkline-line{stroke-dashoffset:0;transition:opacity var(--draw-duration) var(--draw-timing-function)}}}
+/*$vite$:1*/

package/build/components/stacked-drawer/index.d.ts

@@ -0,0 +1,24 @@
+import { type Attributes, type Renderable } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    onconnect?: never;
+    ondisconnect?: never;
+    ondocumentkeydown?: never;
+    sheets: (Attributes & {
+        content: Renderable<unknown>;
+    })[];
+    state?: {
+        depth: number;
+    };
+};
+declare const _default: {
+    (): Renderable<any>;
+    <T extends A>(attributes: T): Renderable<any>;
+    <T extends Renderable<any>>(content: T): Renderable<any>;
+    (attributes: A, content?: Renderable<any>): Renderable<any>;
+    bind(context: {
+        attributes?: Partial<A> | undefined;
+        content?: Renderable<any>;
+    }): any;
+};
+export default _default;

package/build/components/stacked-drawer/index.js

@@ -0,0 +1,211 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect } from '@esportsplus/reactivity';
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import './scss/index.scss';
+const template_0ei34lo3 = template_u1.template(`<div class='stacked-drawer'><div class='stacked-drawer-page'>`);
+const template_0ei34lo7 = template_u1.template(`<div aria-modal='true' class='stacked-drawer-sheet' role='dialog' tabindex='-1'><div aria-hidden='true' class='stacked-drawer-handle'>`);
+class ReactiveObject_0ei34lo0 extends reactivity_u0.ReactiveObject {
+    #depth = this[reactivity_u0.SIGNAL](0);
+    constructor() {
+        super(null);
+    }
+    get depth() {
+        return reactivity_u0.read(this.#depth);
+    }
+    set depth(_v0) {
+        reactivity_u0.write(this.#depth, _v0);
+    }
+}
+class ReactiveObject_0ei34lo1 extends reactivity_u0.ReactiveObject {
+    #index = this[reactivity_u0.SIGNAL](-1);
+    #progress = this[reactivity_u0.SIGNAL](1);
+    #y = this[reactivity_u0.SIGNAL](0);
+    constructor() {
+        super(null);
+    }
+    get index() {
+        return reactivity_u0.read(this.#index);
+    }
+    set index(_v0) {
+        reactivity_u0.write(this.#index, _v0);
+    }
+    get progress() {
+        return reactivity_u0.read(this.#progress);
+    }
+    set progress(_v1) {
+        reactivity_u0.write(this.#progress, _v1);
+    }
+    get y() {
+        return reactivity_u0.read(this.#y);
+    }
+    set y(_v2) {
+        reactivity_u0.write(this.#y, _v2);
+    }
+}
+const DISMISS_DISTANCE = 0.3;
+const DISMISS_VELOCITY = 500;
+const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+const RESISTANCE = 120;
+const STALE = 100;
+const THRESHOLD = 4;
+function rubberband(y, limit) {
+    return y < 0 ? -(limit * (1 - 1 / (1 + -y / RESISTANCE))) : y;
+}
+export default component(function ({ sheets, state = new ReactiveObject_0ei34lo0(), ...attributes }, content) {
+    let drag = new ReactiveObject_0ei34lo1(), elements = [], frame = 0, openers = [], pointer, stop;
+    function covered(index) {
+        return drag.index === index ? drag.progress : Number(index < state.depth);
+    }
+    function release(e) {
+        if (!pointer || e.pointerId !== pointer.id) {
+            return;
+        }
+        let { active, height, index, time, velocity } = pointer;
+        pointer = undefined;
+        if (!active) {
+            return;
+        }
+        if (e.timeStamp - time > STALE) {
+            velocity = 0;
+        }
+        if (drag.y > height * DISMISS_DISTANCE || velocity > DISMISS_VELOCITY) {
+            state.depth = index;
+        }
+        drag.index = -1;
+        drag.progress = 1;
+        drag.y = 0;
+    }
+    return (() => {
+        let root_0ei34lo2 = template_0ei34lo3(), element_0ei34lo4 = root_0ei34lo2.firstChild, element_0ei34lo5 = element_0ei34lo4.firstElementChild;
+        template_u1.setProperties(element_0ei34lo4, this?.attributes);
+        template_u1.setProperties(element_0ei34lo4, attributes);
+        template_u1.setList(element_0ei34lo4, 'class', () => drag.index !== -1 && '--dragging');
+        template_u1.onconnect(element_0ei34lo4, (element) => {
+            let previous = state.depth;
+            stop = effect(() => {
+                let depth = state.depth;
+                if (depth === previous) {
+                    return;
+                }
+                let opening = depth > previous;
+                if (opening) {
+                    for (let i = previous; i < depth; i++) {
+                        openers[i] = document.activeElement;
+                    }
+                }
+                previous = depth;
+                cancelAnimationFrame(frame);
+                frame = requestAnimationFrame(() => {
+                    if (opening) {
+                        elements[depth - 1]?.focus({ preventScroll: true });
+                        return;
+                    }
+                    let active = document.activeElement;
+                    if (!active || active === document.body || element.contains(active)) {
+                        openers[depth]?.focus({ preventScroll: true });
+                    }
+                });
+            });
+        });
+        template_u1.ondisconnect(element_0ei34lo4, () => {
+            cancelAnimationFrame(frame);
+            stop?.();
+        });
+        template_u1.ondocument(element_0ei34lo4, 'keydown', function (e) {
+            if (!state.depth || !this.contains(document.activeElement)) {
+                return;
+            }
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                state.depth--;
+                return;
+            }
+            if (e.key !== 'Tab') {
+                return;
+            }
+            let sheet = elements[state.depth - 1], focusable = sheet.querySelectorAll(FOCUSABLE);
+            if (!focusable.length) {
+                e.preventDefault();
+                sheet.focus();
+                return;
+            }
+            let active = document.activeElement, first = focusable[0], last = focusable[focusable.length - 1];
+            if (e.shiftKey && (active === first || active === sheet)) {
+                e.preventDefault();
+                last.focus();
+            }
+            else if (!e.shiftKey && active === last) {
+                e.preventDefault();
+                first.focus();
+            }
+        });
+        template_u1.setList(element_0ei34lo5, 'class', () => state.depth > 0 && '--covered');
+        template_u1.setProperty(element_0ei34lo5, 'inert', () => state.depth > 0);
+        template_u1.setList(element_0ei34lo5, 'style', () => `--covered: ${covered(0)};`);
+        template_u1.slot(element_0ei34lo5, content, 1);
+        template_u1.slot(element_0ei34lo4, sheets.map(({ content, ...sheet }, index) => {
+            let root_0ei34lo6 = template_0ei34lo7(), element_0ei34lo8 = root_0ei34lo6.firstChild;
+            template_u1.setProperties(element_0ei34lo8, sheet);
+            template_u1.setList(element_0ei34lo8, 'class', [
+                () => index < state.depth && '--active',
+                () => index + 1 < state.depth && '--covered'
+            ]);
+            template_u1.setProperty(element_0ei34lo8, 'inert', () => index !== state.depth - 1);
+            template_u1.onconnect(element_0ei34lo8, (element) => {
+                elements[index] = element;
+            });
+            template_u1.delegate(element_0ei34lo8, 'pointercancel', release);
+            template_u1.delegate(element_0ei34lo8, 'pointerdown', (e) => {
+                if (pointer || index !== state.depth - 1 || (e.pointerType === 'mouse' && e.button !== 0)) {
+                    return;
+                }
+                pointer = {
+                    active: false,
+                    from: 0,
+                    height: 0,
+                    id: e.pointerId,
+                    index,
+                    limit: 0,
+                    start: e.clientY,
+                    time: e.timeStamp,
+                    velocity: 0,
+                    y: 0
+                };
+            });
+            template_u1.delegate(element_0ei34lo8, 'pointermove', (e) => {
+                if (!pointer || e.pointerId !== pointer.id) {
+                    return;
+                }
+                let element = e.currentTarget;
+                if (!pointer.active) {
+                    if (Math.abs(e.clientY - pointer.start) < THRESHOLD) {
+                        return;
+                    }
+                    let limit = parseFloat(getComputedStyle(element).paddingBottom) || 0, parent = element.offsetParent;
+                    pointer.active = true;
+                    pointer.from = parent ? element.getBoundingClientRect().top - parent.getBoundingClientRect().top - element.offsetTop : 0;
+                    pointer.height = element.offsetHeight - limit;
+                    pointer.limit = limit;
+                    pointer.start = e.clientY;
+                    pointer.y = pointer.from;
+                    element.setPointerCapture(e.pointerId);
+                    drag.index = index;
+                }
+                let y = rubberband(pointer.from + e.clientY - pointer.start, pointer.limit), elapsed = e.timeStamp - pointer.time;
+                if (elapsed > 0) {
+                    pointer.velocity = (y - pointer.y) / elapsed * 1000;
+                }
+                pointer.time = e.timeStamp;
+                pointer.y = y;
+                drag.progress = Math.min(Math.max(1 - y / pointer.height, 0), 1);
+                drag.y = y;
+            });
+            template_u1.delegate(element_0ei34lo8, 'pointerup', release);
+            template_u1.setList(element_0ei34lo8, 'style', () => `--covered: ${covered(index + 1)}; --index: ${index}; --offset: ${drag.index === index ? drag.y : 0}px;`);
+            template_u1.slot(element_0ei34lo8, content, 2);
+            return root_0ei34lo6;
+        }), 2);
+        return root_0ei34lo2;
+    })();
+});

package/build/components/stacked-drawer/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.stacked-drawer{--background:var(--color-border-400);--border-radius:40px;--dim:.2;--dim-color:var(--color-black-500);--duration-close:.32s;--duration-open:.45s;--handle-color:var(--color-border-400);--height:100%;--inset:40px;--overscroll:36px;--page-background:var(--color-grey-300);--peek:18px;--scale:.94;--sheet-background:var(--color-white-300);--sheet-border-radius:28px;--sheet-box-shadow:var(--box-shadow-400);--timing-function:cubic-bezier(.32, .72, 0, 1);--width:100%;background:var(--background);border-radius:var(--border-radius);height:var(--height);isolation:isolate;max-width:100%;width:var(--width);position:relative;overflow:hidden}.stacked-drawer.--dragging{cursor:grabbing}.stacked-drawer.--dragging .stacked-drawer-page,.stacked-drawer.--dragging .stacked-drawer-sheet,.stacked-drawer.--dragging .stacked-drawer-page:after,.stacked-drawer.--dragging .stacked-drawer-sheet:after{transition:none}.stacked-drawer-handle{background:var(--handle-color);border-radius:9999px;flex-shrink:0;width:44px;height:6px;margin:10px auto 0}.stacked-drawer-page,.stacked-drawer-sheet{--duration-covered:var(--duration-close);scale:calc(1 - var(--covered) * (1 - var(--scale)));transform-origin:top;flex-direction:column;display:flex}.stacked-drawer-page:after,.stacked-drawer-sheet:after{background:var(--dim-color);border-radius:inherit;content:"";opacity:calc(var(--covered) * var(--dim));pointer-events:none;transition:opacity var(--duration-covered) var(--timing-function);position:absolute;inset:0}.stacked-drawer-page.--covered,.stacked-drawer-sheet.--covered{--duration-covered:var(--duration-open)}.stacked-drawer-page{background:var(--page-background);border-radius:inherit;transition:scale var(--duration-covered) var(--timing-function), translate var(--duration-covered) var(--timing-function);translate:0 calc(var(--covered) * var(--peek));position:absolute;inset:0}.stacked-drawer-sheet{--duration-translate:var(--duration-close);background:var(--sheet-background);border-radius:var(--sheet-border-radius) var(--sheet-border-radius) 0 0;box-shadow:var(--sheet-box-shadow);inset:calc(var(--inset) + var(--peek) * var(--index)) 0 calc(var(--overscroll) * -1) 0;padding-bottom:var(--overscroll);touch-action:none;transition:scale var(--duration-covered) var(--timing-function), translate var(--duration-translate) var(--timing-function);-webkit-user-select:none;user-select:none;outline:none;position:absolute;translate:0 100%}.stacked-drawer-sheet.--active{--duration-translate:var(--duration-open);translate:0 var(--offset)}.stacked-drawer-sheet.--active:not(.--covered){cursor:grab}@media (prefers-reduced-motion:reduce){.stacked-drawer-page,.stacked-drawer-sheet{translate:none;scale:none}.stacked-drawer-sheet{opacity:0;translate:0 var(--offset);transition:opacity .2s cubic-bezier(.23,1,.32,1)}.stacked-drawer-sheet.--active{opacity:1}}}
+/*$vite$:1*/

package/build/components/stat-counter/index.d.ts

@@ -0,0 +1,32 @@
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    [STAT_COUNTER_CARD]?: Attributes;
+    [STAT_COUNTER_SLIDER]?: Attributes;
+    state?: State;
+    stats: Stat[];
+};
+type Stat = {
+    decimals?: number;
+    goodWhen?: 'down' | 'up';
+    label: string;
+    prefix?: string;
+    series: number[];
+    suffix?: string;
+    trend?: number;
+    value?: number;
+};
+type State = {
+    stats: Stat[];
+};
+declare const STAT_COUNTER_CARD: unique symbol;
+declare const STAT_COUNTER_SLIDER: unique symbol;
+declare function template(this: {
+    attributes?: Partial<A>;
+} | void, { state, stats, ...attributes }: A): DocumentFragment | Text;
+declare const _default: typeof template & {
+    readonly card: typeof STAT_COUNTER_CARD;
+    readonly slider: typeof STAT_COUNTER_SLIDER;
+};
+export default _default;
+export type { Stat as StatCounterStat, State as StatCounterState };