@esportsplus/ui 0.56.3 → 0.57.0

package/build/components/stat-counter/index.js

@@ -1,216 +0,0 @@
-import * as template_u1 from '@esportsplus/template';
-import * as reactivity_u0 from '@esportsplus/reactivity';
-import { effect, onCleanup } from '@esportsplus/reactivity';
-import counter from '../counter/index.js';
-import './scss/index.scss';
-const template_0dcajw63 = template_u1.template(`<div class='stat-counter-card  '><dt class='stat-counter-label'></dt><dd class='stat-counter-body'><span class='stat-counter-sr'></span><span aria-hidden='true' class='stat-counter-value'><span class='stat-counter-affix'></span><!--$--><span class='stat-counter-affix'></span></span><span aria-hidden='true' class='stat-counter-chips'><span class='stat-counter-chip stat-counter-trend   '><svg class='stat-counter-arrow' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 12 12'><path d='M6 9.5v-7M3 5.5l3-3 3 3' /></svg><span></span></span><span class='stat-counter-chip stat-counter-when '></span></span><div aria-valuemin='0' class='stat-counter-slider' role='slider' tabindex='0'><div aria-hidden='true' class='stat-counter-spark'><svg class='stat-counter-line' preserveAspectRatio='none' viewBox='0 0 120 32'><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' vector-effect='non-scaling-stroke' /></svg><svg class='stat-counter-line stat-counter-line--past' preserveAspectRatio='none' viewBox='0 0 120 32'><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' vector-effect='non-scaling-stroke' /></svg><span class='stat-counter-cursor'></span><span class='stat-counter-dot'>`);
-const template_0dcajw6k = template_u1.template(`<div class='stat-counter'><dl class='stat-counter-list'>`);
-class ReactiveObject_0dcajw60 extends reactivity_u0.ReactiveObject {
-    #value;
-    constructor(_p0) {
-        super(null);
-        this.#value = this[reactivity_u0.SIGNAL](_p0);
-    }
-    get value() {
-        return reactivity_u0.read(this.#value);
-    }
-    set value(_v0) {
-        reactivity_u0.write(this.#value, _v0);
-    }
-}
-class ReactiveObject_0dcajw61 extends reactivity_u0.ReactiveObject {
-    #scrub;
-    constructor(_p0) {
-        super(null);
-        this.#scrub = this[reactivity_u0.SIGNAL](_p0);
-    }
-    get scrub() {
-        return reactivity_u0.read(this.#scrub);
-    }
-    set scrub(_v0) {
-        reactivity_u0.write(this.#scrub, _v0);
-    }
-}
-const HEIGHT = 32;
-const STAT_COUNTER_CARD = Symbol.for('@esportsplus/ui/stat-counter.card');
-const STAT_COUNTER_SLIDER = Symbol.for('@esportsplus/ui/stat-counter.slider');
-const TREND = new Intl.NumberFormat('en-US', {
-    maximumFractionDigits: 1,
-    signDisplay: 'exceptZero',
-    style: 'percent'
-});
-const WIDTH = 120;
-function ago(days) {
-    return days === 0 ? 'Today' : days === 1 ? 'Yesterday' : `${days} days ago`;
-}
-function format(stat, value) {
-    let decimals = stat.decimals ?? 0;
-    return `${stat.prefix ?? ''}${value.toLocaleString('en-US', { maximumFractionDigits: decimals, minimumFractionDigits: decimals })}${stat.suffix ?? ''}`;
-}
-function path(series) {
-    return points(series).map((point, i) => `${i ? 'L' : 'M'}${point.x.toFixed(1)} ${point.y.toFixed(1)}`).join(' ');
-}
-function points(series) {
-    let max = Math.max(...series), min = Math.min(...series), span = max - min || 1;
-    return series.map((value, i) => ({
-        x: (i / (series.length - 1)) * WIDTH,
-        y: 2 + (1 - (value - min) / span) * (HEIGHT - 4)
-    }));
-}
-function trendOf(stat) {
-    let series = stat.series;
-    return stat.trend ?? valueOf(stat) / series[series.length - 2] - 1;
-}
-function valueOf(stat) {
-    return stat.value ?? stat.series[stat.series.length - 1];
-}
-function template({ state, stats, ...attributes }) {
-    let inherited = this?.attributes, observer, s = state ?? reactivity_u0.reactive({ stats });
-    function card(index) {
-        let initial = s.stats[index], number = new ReactiveObject_0dcajw60(valueOf(initial)), previous = '', text, view = new ReactiveObject_0dcajw61(null);
-        function current() {
-            return s.stats[index];
-        }
-        function last() {
-            return current().series.length - 1;
-        }
-        function pick(e) {
-            let box = e.currentTarget.getBoundingClientRect(), t = Math.min(Math.max((e.clientX - box.left) / box.width, 0), 1);
-            view.scrub = Math.round(t * last());
-        }
-        function point() {
-            let scrub = view.scrub;
-            return scrub === null ? null : points(current().series)[scrub];
-        }
-        function shown() {
-            let scrub = view.scrub;
-            return scrub === null ? valueOf(current()) : current().series[scrub];
-        }
-        function up() {
-            return trendOf(current()) >= 0;
-        }
-        let stopNumber = effect(() => {
-            number.value = shown();
-        });
-        let stopTrend = effect(() => {
-            let next = TREND.format(trendOf(current()));
-            if (previous && previous !== next) {
-                text?.animate([{ filter: 'blur(4px)', opacity: 0 }, { filter: 'blur(0px)', opacity: 1 }], { duration: 200, easing: 'ease-out' });
-            }
-            previous = next;
-        });
-        onCleanup(() => {
-            stopNumber();
-            stopTrend();
-        });
-        return (() => {
-            let root_0dcajw62 = template_0dcajw63(), element_0dcajw64 = root_0dcajw62.firstChild, element_0dcajw65 = element_0dcajw64.firstElementChild, element_0dcajw66 = element_0dcajw65.nextElementSibling.firstElementChild, element_0dcajw67 = element_0dcajw66.nextElementSibling.firstElementChild, element_0dcajw68 = element_0dcajw66.nextElementSibling.firstChild.nextSibling, element_0dcajw69 = element_0dcajw67.nextElementSibling, element_0dcajw6a = element_0dcajw66.nextElementSibling.nextElementSibling.firstElementChild, element_0dcajw6b = element_0dcajw6a.firstElementChild.nextElementSibling, element_0dcajw6c = element_0dcajw6a.nextElementSibling, element_0dcajw6d = element_0dcajw66.nextElementSibling.nextElementSibling.nextElementSibling, element_0dcajw6e = element_0dcajw6d.firstElementChild.firstElementChild.firstElementChild, element_0dcajw6f = element_0dcajw6d.firstElementChild.firstElementChild.nextElementSibling, element_0dcajw6g = element_0dcajw6f.firstElementChild, element_0dcajw6h = element_0dcajw6f.nextElementSibling, element_0dcajw6i = element_0dcajw6h.nextElementSibling;
-            template_u1.setList(element_0dcajw64, 'class', () => view.scrub !== null && '--scrubbing');
-            template_u1.setList(element_0dcajw64, 'class', () => view.scrub !== null && view.scrub !== last() && '--past');
-            template_u1.setList(element_0dcajw64, 'style', template_u1.interpolate(["--index: ", (index)]));
-            template_u1.setProperties(element_0dcajw64, inherited?.[STAT_COUNTER_CARD]);
-            template_u1.setProperties(element_0dcajw64, attributes[STAT_COUNTER_CARD]);
-            new template_u1.EffectSlot(element_0dcajw65, () => current().label, 1);
-            new template_u1.EffectSlot(element_0dcajw66, () => `${format(current(), valueOf(current()))}, ${TREND.format(trendOf(current()))}`, 1);
-            new template_u1.EffectSlot(element_0dcajw67, () => current().prefix ?? '', 1);
-            template_u1.slot(element_0dcajw68, counter({
-                class: 'counter--ticker stat-counter-counter',
-                currency: 'IGNORE',
-                decimals: initial.decimals ?? 0,
-                delay: 0,
-                startOnView: true,
-                state: number,
-                value: valueOf(initial)
-            }));
-            new template_u1.EffectSlot(element_0dcajw69, () => current().suffix ?? '', 1);
-            template_u1.setList(element_0dcajw6a, 'class', () => up() !== ((current().goodWhen ?? 'up') === 'up') && '--bad');
-            template_u1.setList(element_0dcajw6a, 'class', () => !up() && '--down');
-            template_u1.setList(element_0dcajw6a, 'class', () => view.scrub !== null && '--hidden');
-            template_u1.onrender(element_0dcajw6b, (element) => { text = element; });
-            new template_u1.EffectSlot(element_0dcajw6b, () => TREND.format(trendOf(current())), 1);
-            template_u1.setList(element_0dcajw6c, 'class', () => view.scrub === null && '--hidden');
-            new template_u1.EffectSlot(element_0dcajw6c, () => ago(last() - (view.scrub ?? last())), 1);
-            template_u1.setProperties(element_0dcajw6d, inherited?.[STAT_COUNTER_SLIDER]);
-            template_u1.setProperties(element_0dcajw6d, attributes[STAT_COUNTER_SLIDER]);
-            template_u1.setProperty(element_0dcajw6d, 'aria-label', () => `${current().label} history`);
-            template_u1.setProperty(element_0dcajw6d, 'aria-valuemax', () => String(last()));
-            template_u1.setProperty(element_0dcajw6d, 'aria-valuenow', () => String(view.scrub ?? last()));
-            template_u1.setProperty(element_0dcajw6d, 'aria-valuetext', () => `${format(current(), shown())}, ${ago(last() - (view.scrub ?? last()))}`);
-            template_u1.on(element_0dcajw6d, 'blur', () => {
-                view.scrub = null;
-            });
-            template_u1.delegate(element_0dcajw6d, 'keydown', (e) => {
-                let end = last(), now = view.scrub ?? end, next = {
-                    ArrowLeft: now - 1,
-                    ArrowRight: now + 1,
-                    End: end,
-                    Escape: end,
-                    Home: 0
-                }[e.key];
-                if (next === undefined) {
-                    return;
-                }
-                e.preventDefault();
-                next = Math.min(Math.max(next, 0), end);
-                view.scrub = next === end ? null : next;
-            });
-            template_u1.delegate(element_0dcajw6d, 'pointercancel', () => {
-                view.scrub = null;
-            });
-            template_u1.delegate(element_0dcajw6d, 'pointerdown', (e) => {
-                e.currentTarget.setPointerCapture(e.pointerId);
-                pick(e);
-            });
-            template_u1.on(element_0dcajw6d, 'pointerleave', (e) => {
-                if (!e.currentTarget.hasPointerCapture(e.pointerId)) {
-                    view.scrub = null;
-                }
-            });
-            template_u1.delegate(element_0dcajw6d, 'pointermove', (e) => {
-                if (e.pointerType === 'mouse' || e.buttons) {
-                    pick(e);
-                }
-            });
-            template_u1.delegate(element_0dcajw6d, 'pointerup', (e) => {
-                if (e.pointerType !== 'mouse') {
-                    view.scrub = null;
-                }
-            });
-            template_u1.setProperty(element_0dcajw6e, 'd', () => path(current().series));
-            template_u1.setList(element_0dcajw6e, 'style', () => `d: path('${path(current().series)}')`);
-            template_u1.setList(element_0dcajw6f, 'style', () => {
-                let scrub = view.scrub;
-                return `clip-path: inset(-4px ${scrub === null ? 0 : (1 - scrub / last()) * 100}% -4px -4px)`;
-            });
-            template_u1.setProperty(element_0dcajw6g, 'd', () => path(current().series));
-            template_u1.setList(element_0dcajw6g, 'style', () => `d: path('${path(current().series)}')`);
-            template_u1.setList(element_0dcajw6h, 'style', () => `left: ${((point()?.x ?? WIDTH) / WIDTH) * 100}%`);
-            template_u1.setList(element_0dcajw6i, 'style', () => {
-                let at = point();
-                return `left: ${((at?.x ?? WIDTH) / WIDTH) * 100}%; top: ${((at?.y ?? HEIGHT / 2) / HEIGHT) * 100}%`;
-            });
-            return root_0dcajw62;
-        })();
-    }
-    onCleanup(() => {
-        observer?.disconnect();
-    });
-    return (() => {
-        let root_0dcajw6j = template_0dcajw6k(), element_0dcajw6l = root_0dcajw6j.firstChild, element_0dcajw6m = element_0dcajw6l.firstElementChild;
-        template_u1.setProperties(element_0dcajw6l, inherited);
-        template_u1.setProperties(element_0dcajw6l, attributes);
-        template_u1.onconnect(element_0dcajw6m, (element) => {
-            observer = new IntersectionObserver((entries) => {
-                if (!entries.some((entry) => entry.isIntersecting)) {
-                    return;
-                }
-                observer?.disconnect();
-                element.classList.add('--started');
-            }, { threshold: 0.5 });
-            observer.observe(element);
-        });
-        template_u1.slot(element_0dcajw6m, stats.map((_, index) => card(index)), 1);
-        return root_0dcajw6j;
-    })();
-}
-export default Object.assign(template, { card: STAT_COUNTER_CARD, slider: STAT_COUNTER_SLIDER });

package/build/components/stat-counter/scss/index.scss

@@ -1,2 +0,0 @@
-@layer components {.stat-counter{--bad-color:var(--color-red-500);--card-background:var(--color-grey-400);--card-padding:var(--size-400);--card-radius:var(--border-radius-700);--chip-background:var(--color-white-300);--color:var(--color-text-500);--count-duration:.7s;--ease-out:cubic-bezier(.23, 1, .32, 1);--focus-color:var(--color-text-500);--grid-gap:12px;--label-font-size:var(--font-size-300);--line-color:color-mix(in oklab, var(--color-text-500) 60%, transparent);--muted-color:var(--color-text-300);--scrub-duration:.3s;--stagger:50ms;--value-font-size:var(--font-size-600);--value-font-weight:var(--font-weight-600);--width:600px;--wipe-duration:.5s;color:var(--color);max-width:100%;width:var(--width);container-type:inline-size}.stat-counter-affix{white-space:pre}.stat-counter-arrow{height:12px;transition:rotate .2s var(--ease-out);width:12px}.stat-counter-body{gap:var(--grid-gap);flex-direction:column;min-width:0;margin:0;display:flex}.stat-counter-card{background:var(--card-background);border-radius:var(--card-radius);min-width:0;padding:var(--card-padding);flex-direction:column;gap:4px;display:flex}.stat-counter-chip{background:var(--chip-background);font-size:var(--font-size-300);font-variant-numeric:tabular-nums;font-weight:var(--font-weight-500);white-space:nowrap;border-radius:999px;grid-area:1/1;align-self:start;align-items:center;gap:4px;padding-inline:8px;line-height:24px;transition:filter .2s ease-out,opacity .2s ease-out;display:inline-flex}.stat-counter-chip.--hidden{filter:blur(4px);opacity:0;transition-duration:.1s}.stat-counter-chips{align-self:start;height:24px;display:grid}.stat-counter .stat-counter-counter{--font-weight:var(--value-font-weight);--stagger:0s;--transition-duration:var(--count-duration);--timing-function:cubic-bezier(.22, 1, .36, 1)}.stat-counter-card.--scrubbing .stat-counter-counter{--transition-duration:var(--scrub-duration)}.stat-counter-cursor{background:color-mix(in oklab, var(--color-text-500) 20%, transparent);opacity:0;pointer-events:none;width:1px;transition:left .15s ease-out,opacity .15s ease-out;position:absolute;inset-block:0}.stat-counter-dot{background:var(--color);box-shadow:0 0 0 2px var(--card-background);opacity:0;pointer-events:none;border-radius:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;transition:left .15s ease-out,opacity .15s ease-out,scale .15s ease-out,top .15s ease-out;position:absolute;scale:.5}.stat-counter-label{color:var(--muted-color);font-size:var(--label-font-size)}.stat-counter-line{color:var(--line-color);width:100%;height:100%;transition:opacity .15s ease-out;position:absolute;inset:0;overflow:visible}.stat-counter-line path{transition:d .5s var(--ease-out)}.stat-counter-line--past{opacity:0;transition:clip-path .15s ease-out,opacity .15s ease-out}.stat-counter-list{gap:var(--grid-gap);grid-template-columns:repeat(2,minmax(0,1fr));margin:0;display:grid}@container (width>=560px){.stat-counter-list{grid-template-columns:repeat(4,minmax(0,1fr))}}.stat-counter-list.--started .stat-counter-spark{clip-path:inset(-4px)}.stat-counter-slider{border-radius:var(--border-radius-400);cursor:ew-resize;touch-action:pan-y;-webkit-user-select:none;user-select:none;outline:none;margin:-4px;padding:4px}.stat-counter-slider:focus-visible{outline:2px solid var(--focus-color)}.stat-counter-spark{clip-path:inset(-4px 100% -4px -4px);height:32px;transition:clip-path var(--wipe-duration) var(--ease-out) calc(var(--index) * var(--stagger));width:100%;position:relative}.stat-counter-sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.stat-counter-trend.--bad{color:var(--bad-color)}.stat-counter-trend.--down .stat-counter-arrow{rotate:180deg}.stat-counter-value{font-size:var(--value-font-size);font-variant-numeric:tabular-nums;font-weight:var(--value-font-weight);letter-spacing:-.025em;white-space:nowrap;line-height:1.25;transition:color .15s ease-out;display:flex;overflow:hidden}.stat-counter-card.--past .stat-counter-value,.stat-counter-when{color:var(--muted-color)}.stat-counter-card.--scrubbing .stat-counter-cursor{opacity:1}.stat-counter-card.--scrubbing .stat-counter-dot{opacity:1;scale:1}.stat-counter-card.--scrubbing .stat-counter-line{opacity:.3}.stat-counter-card.--scrubbing .stat-counter-line--past{opacity:1}@media (prefers-reduced-motion:reduce){.stat-counter-arrow,.stat-counter-line path,.stat-counter-spark{transition:none}}}
-/*$vite$:1*/

package/build/components/status-picker/index.d.ts

@@ -1,32 +0,0 @@
-import { type Attributes } from '@esportsplus/template';
-import './scss/index.scss';
-type A = Attributes & {
-    [STATUS_PICKER_MENU]?: Attributes;
-    [STATUS_PICKER_TRIGGER]?: Attributes;
-    initials: string;
-    name: string;
-    state?: {
-        active: boolean;
-        highlight: number;
-        status: Status;
-    };
-    status?: Status;
-    statuses?: Option[];
-};
-type Option = {
-    hint?: string;
-    id: Status;
-    label: string;
-};
-type Status = 'away' | 'dnd' | 'invisible' | 'online';
-declare const STATUS_PICKER_MENU: unique symbol;
-declare const STATUS_PICKER_TRIGGER: unique symbol;
-declare function template(this: {
-    attributes?: Pick<A, typeof STATUS_PICKER_MENU | typeof STATUS_PICKER_TRIGGER>;
-} | void, { initials, name, status, statuses, state, ...attributes }: A): DocumentFragment | Text;
-declare const _default: typeof template & {
-    readonly menu: typeof STATUS_PICKER_MENU;
-    readonly trigger: typeof STATUS_PICKER_TRIGGER;
-};
-export default _default;
-export type { Option, Status };

package/build/components/status-picker/index.js

@@ -1,198 +0,0 @@
-import * as template_u1 from '@esportsplus/template';
-import * as reactivity_u0 from '@esportsplus/reactivity';
-import { effect, onCleanup } from '@esportsplus/reactivity';
-import './scss/index.scss';
-const template_18fhz980 = template_u1.template(`<svg aria-hidden='true' class='status-picker-icon status-picker-icon--away' viewBox='0 0 12 12'><path d='M6.6 1.05A5 5 0 1 0 10.95 5.4 4 4 0 0 1 6.6 1.05Z' />`);
-const template_18fhz981 = template_u1.template(`<svg aria-hidden='true' class='status-picker-icon status-picker-icon--dnd' viewBox='0 0 12 12'><circle cx='6' cy='6' r='5' /><rect height='1.8' rx='0.9' width='6' x='3' y='5.1' />`);
-const template_18fhz982 = template_u1.template(`<svg aria-hidden='true' class='status-picker-icon status-picker-icon--invisible' viewBox='0 0 12 12'><circle cx='6' cy='6' r='3.9' />`);
-const template_18fhz983 = template_u1.template(`<svg aria-hidden='true' class='status-picker-icon status-picker-icon--online' viewBox='0 0 12 12'><circle cx='6' cy='6' r='5' />`);
-const template_18fhz985 = template_u1.template(`<div class='status-picker'><button aria-haspopup='menu' class='status-picker-trigger' type='button'><span class='status-picker-avatar'><span class='status-picker-initials'></span><span class='status-picker-slot'></span></span><span class='status-picker-text'><span class='status-picker-name'></span><span class='status-picker-status'></span></span></button><div aria-label='Set status' class='status-picker-menu' role='menu'>`);
-const template_18fhz98e = template_u1.template(`<span class='status-picker-badge'>`);
-const template_18fhz98h = template_u1.template(`<span class='status-picker-status-label'>`);
-const template_18fhz98k = template_u1.template(`<button class='status-picker-item' role='menuitemradio' type='button'><span class='status-picker-item-badge'></span><span class='status-picker-item-text'><span class='status-picker-item-label'></span></span><svg aria-hidden='true' class='status-picker-check' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'><path d='M3.5 8.25l3 3 6-6.5' />`);
-const template_18fhz98q = template_u1.template(`<span class='status-picker-item-hint'>`);
-const FADE = {
-    duration: 200,
-    easing: 'cubic-bezier(0.23, 1, 0.32, 1)'
-};
-const STATUSES = [
-    { id: 'online', label: 'Online' },
-    { id: 'away', label: 'Away' },
-    { hint: 'Mutes notifications', id: 'dnd', label: 'Do not disturb' },
-    { hint: 'Appear offline', id: 'invisible', label: 'Invisible' }
-];
-const STATUS_PICKER_MENU = Symbol.for('@esportsplus/ui/status-picker.menu');
-const STATUS_PICKER_TRIGGER = Symbol.for('@esportsplus/ui/status-picker.trigger');
-const TURN = {
-    duration: 450,
-    easing: 'linear(0, 0.063, 0.204, 0.374, 0.54, 0.685, 0.801, 0.889, 0.95, 0.99, 1.013, 1.025, 1.028, 1.027, 1.023, 1.019, 1.014, 1.01, 1.006, 1.003, 1.002, 1, 1, 0.999, 1)'
-};
-let uid = 0;
-function badge(status) {
-    switch (status) {
-        case 'away':
-            return template_18fhz980();
-        case 'dnd':
-            return template_18fhz981();
-        case 'invisible':
-            return template_18fhz982();
-        default:
-            return template_18fhz983();
-    }
-}
-function template({ initials, name, status = 'online', statuses = STATUSES, state = reactivity_u0.reactive({ active: false, highlight: 0, status }), ...attributes }) {
-    let badges = new Map(), id = `status-picker-${++uid}`, items = [], keys = false, labels = new Map(), previous = state.status, trigger;
-    function choose(next) {
-        state.status = next;
-        hide();
-    }
-    function current() {
-        return statuses.find((option) => option.id === state.status) ?? statuses[0];
-    }
-    function hide() {
-        state.active = false;
-        if (keys) {
-            trigger?.focus();
-        }
-    }
-    function move(e) {
-        if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') {
-            return false;
-        }
-        let n = statuses.length;
-        e.preventDefault();
-        state.highlight = (state.highlight + (e.key === 'ArrowDown' ? 1 : -1) + n) % n;
-        items[state.highlight]?.focus();
-        return true;
-    }
-    function show() {
-        let index = Math.max(0, statuses.findIndex((option) => option.id === state.status));
-        state.highlight = index;
-        state.active = true;
-        if (keys) {
-            requestAnimationFrame(() => items[index]?.focus());
-        }
-    }
-    let dispose = effect(() => {
-        let next = state.status;
-        if (next === previous) {
-            return;
-        }
-        previous = next;
-        if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
-            return;
-        }
-        badges.get(next)?.animate([
-            { opacity: 0, rotate: '120deg', scale: '0.3' },
-            { opacity: 1, rotate: '0deg', scale: '1' }
-        ], TURN);
-        labels.get(next)?.animate([
-            { filter: 'blur(3px)', opacity: 0, translate: '0 4px' },
-            { filter: 'blur(0px)', opacity: 1, translate: '0 0' }
-        ], FADE);
-    });
-    onCleanup(dispose);
-    return (() => {
-        let root_18fhz984 = template_18fhz985(), element_18fhz986 = root_18fhz984.firstChild, element_18fhz987 = element_18fhz986.firstElementChild, element_18fhz988 = element_18fhz987.firstElementChild.firstElementChild, element_18fhz989 = element_18fhz988.nextElementSibling, element_18fhz98a = element_18fhz987.firstElementChild.nextElementSibling.firstElementChild, element_18fhz98b = element_18fhz98a.nextElementSibling, element_18fhz98c = element_18fhz987.nextElementSibling;
-        template_u1.setProperties(element_18fhz986, this?.attributes);
-        template_u1.setProperties(element_18fhz986, attributes);
-        template_u1.setList(element_18fhz986, 'class', () => state.active && '--active');
-        template_u1.ondocument(element_18fhz986, 'pointerdown', function (e) {
-            if (state.active && !this.contains(e.target)) {
-                state.active = false;
-            }
-        });
-        template_u1.setProperty(element_18fhz987, 'aria-controls', template_u1.interpolate([(id), "-menu"]));
-        template_u1.setProperties(element_18fhz987, this?.attributes?.[STATUS_PICKER_TRIGGER]);
-        template_u1.setProperties(element_18fhz987, attributes[STATUS_PICKER_TRIGGER]);
-        template_u1.setProperty(element_18fhz987, 'aria-expanded', () => state.active ? 'true' : 'false');
-        template_u1.setProperty(element_18fhz987, 'aria-label', () => `${name}, ${current().label}. Change status`);
-        template_u1.delegate(element_18fhz987, 'click', (e) => {
-            keys = e.detail === 0;
-            if (state.active) {
-                hide();
-            }
-            else {
-                show();
-            }
-        });
-        template_u1.delegate(element_18fhz987, 'keydown', (e) => {
-            keys = true;
-            if (state.active) {
-                if (!move(e) && e.key === 'Escape') {
-                    e.preventDefault();
-                    hide();
-                }
-            }
-            else if (e.key === 'ArrowDown') {
-                e.preventDefault();
-                show();
-            }
-        });
-        template_u1.onrender(element_18fhz987, (element) => {
-            trigger = element;
-        });
-        template_u1.slot(element_18fhz988, initials, 1);
-        template_u1.slot(element_18fhz989, statuses.map((option) => {
-            let root_18fhz98d = template_18fhz98e(), element_18fhz98f = root_18fhz98d.firstChild;
-            template_u1.setList(element_18fhz98f, 'class', () => state.status === option.id && '--active');
-            template_u1.onrender(element_18fhz98f, (element) => {
-                badges.set(option.id, element);
-            });
-            template_u1.slot(element_18fhz98f, badge(option.id), 1);
-            return root_18fhz98d;
-        }), 1);
-        template_u1.slot(element_18fhz98a, name, 1);
-        template_u1.slot(element_18fhz98b, statuses.map((option) => {
-            let root_18fhz98g = template_18fhz98h(), element_18fhz98i = root_18fhz98g.firstChild;
-            template_u1.setList(element_18fhz98i, 'class', () => state.status === option.id && '--active');
-            template_u1.onrender(element_18fhz98i, (element) => {
-                labels.set(option.id, element);
-            });
-            template_u1.slot(element_18fhz98i, option.label, 1);
-            return root_18fhz98g;
-        }), 1);
-        template_u1.setProperty(element_18fhz98c, 'id', template_u1.interpolate([(id), "-menu"]));
-        template_u1.setProperties(element_18fhz98c, this?.attributes?.[STATUS_PICKER_MENU]);
-        template_u1.setProperties(element_18fhz98c, attributes[STATUS_PICKER_MENU]);
-        template_u1.setProperty(element_18fhz98c, 'inert', () => !state.active);
-        template_u1.delegate(element_18fhz98c, 'keydown', (e) => {
-            keys = true;
-            if (move(e)) {
-                return;
-            }
-            if (e.key === 'Escape' || e.key === 'Tab') {
-                e.preventDefault();
-                hide();
-            }
-        });
-        template_u1.slot(element_18fhz98c, statuses.map((option, index) => {
-            let root_18fhz98j = template_18fhz98k(), element_18fhz98l = root_18fhz98j.firstChild, element_18fhz98m = element_18fhz98l.firstElementChild, element_18fhz98n = element_18fhz98m.nextElementSibling.firstElementChild, element_18fhz98o = element_18fhz98m.nextElementSibling;
-            template_u1.setProperty(element_18fhz98l, 'aria-checked', () => state.status === option.id ? 'true' : 'false');
-            template_u1.setList(element_18fhz98l, 'class', () => state.highlight === index && '--highlighted');
-            template_u1.delegate(element_18fhz98l, 'click', (e) => {
-                keys = e.detail === 0;
-                choose(option.id);
-            });
-            template_u1.delegate(element_18fhz98l, 'pointermove', () => {
-                if (state.highlight !== index) {
-                    state.highlight = index;
-                }
-            });
-            template_u1.onrender(element_18fhz98l, (element) => {
-                items[index] = element;
-            });
-            template_u1.setProperty(element_18fhz98l, 'tabIndex', () => state.highlight === index ? 0 : -1);
-            template_u1.slot(element_18fhz98m, badge(option.id), 1);
-            template_u1.slot(element_18fhz98n, option.label, 1);
-            template_u1.slot(element_18fhz98o, option.hint ? (() => {
-                let root_18fhz98p = template_18fhz98q(), element_18fhz98r = root_18fhz98p.firstChild;
-                template_u1.slot(element_18fhz98r, option.hint, 1);
-                return root_18fhz98p;
-            })() : '', 2);
-            return root_18fhz98j;
-        }), 1);
-        return root_18fhz984;
-    })();
-}
-export default Object.assign(template, { menu: STATUS_PICKER_MENU, trigger: STATUS_PICKER_TRIGGER });

package/build/components/status-picker/scss/index.scss

@@ -1,2 +0,0 @@
-@layer components {.status-picker{--avatar-background:var(--color-text-500);--avatar-color:var(--color-white-300);--avatar-size:40px;--away-color:var(--color-yellow-500);--background:var(--color-white-300);--background-hover:var(--color-grey-400);--badge-size:12px;--box-shadow:0 0 0 1px oklch(from var(--color-black-500) l c h / .06), 0 1px 2px oklch(from var(--color-black-500) l c h / .06), 0 6px 16px -6px oklch(from var(--color-black-500) l c h / .12);--color:var(--color-text-500);--color-muted:var(--color-text-300);--dnd-color:var(--color-red-400);--focus-width:var(--border-width-500);--font-size:calc(var(--font-size-400) * .875);--invisible-color:var(--color-text-300);--item-border-radius:var(--border-radius-600);--menu-border-radius:var(--border-radius-700);--menu-padding:6px;--menu-width:240px;--online-color:var(--color-green-500);--press-scale:.98;--slot-size:18px;--transition-duration:.15s;--transition-timing-function:ease-out;--trigger-border-radius:var(--border-radius-700);color:var(--color);font-size:var(--font-size);display:inline-block;position:relative}.status-picker-avatar{flex:none;position:relative}.status-picker-badge{opacity:0;grid-area:1/1;place-items:center;transition:opacity .15s cubic-bezier(.23,1,.32,1),rotate .15s cubic-bezier(.23,1,.32,1),scale .15s cubic-bezier(.23,1,.32,1);display:grid;rotate:-120deg;scale:.3}.status-picker-badge.--active{opacity:1;transition:none;rotate:0deg;scale:1}.status-picker-check{color:var(--color);stroke-width:1.5px;flex:none;width:16px;height:16px;display:none}[aria-checked=true]>.status-picker-check{display:block}.status-picker-icon{height:var(--badge-size);width:var(--badge-size);display:block}.status-picker-icon--away{fill:var(--away-color)}.status-picker-icon--dnd circle{fill:var(--dnd-color)}.status-picker-icon--dnd rect{fill:var(--color-white-300)}.status-picker-icon--invisible{fill:none;stroke:var(--invisible-color);stroke-width:2.2px}.status-picker-icon--online{fill:var(--online-color)}.status-picker-initials{background:var(--avatar-background);color:var(--avatar-color);font-size:var(--font-size-300);font-weight:var(--font-weight-500);height:var(--avatar-size);width:var(--avatar-size);border-radius:50%;place-items:center;display:grid}.status-picker-item{border-radius:var(--item-border-radius);color:var(--color);cursor:pointer;font:inherit;align-items:center;gap:var(--size-300);padding:var(--size-100) var(--size-300);text-align:left;background:0 0;border:0;outline:none;width:100%;margin:0;transition:background .1s;display:flex}.status-picker-item.--highlighted{background:var(--background-hover)}.status-picker-item-badge{flex:none;place-items:center;width:16px;height:16px;display:grid}.status-picker-item-hint{color:var(--color-muted);font-size:var(--font-size-300);display:block}.status-picker-item-label{color:var(--color);display:block}.status-picker-item-text{flex:1;min-width:0}.status-picker-menu{background:var(--background);border-radius:var(--menu-border-radius);box-shadow:var(--box-shadow);margin-top:var(--size-100);opacity:0;padding:var(--menu-padding);transform-origin:24px 0;visibility:hidden;width:var(--menu-width);z-index:10;transition:opacity .12s cubic-bezier(.23,1,.32,1),scale .12s cubic-bezier(.23,1,.32,1),translate .12s cubic-bezier(.23,1,.32,1),visibility 0s linear .12s;position:absolute;top:100%;left:0;translate:0 -2px;scale:.98}.status-picker.--active>.status-picker-menu{opacity:1;visibility:visible;transition:none;animation:.2s cubic-bezier(.23,1,.32,1) status-picker-menu;translate:0;scale:1}.status-picker-name{color:var(--color);font-weight:var(--font-weight-400);display:block}.status-picker-slot{background:var(--background);height:var(--slot-size);width:var(--slot-size);border-radius:50%;place-items:center;display:grid;position:absolute;bottom:-2px;right:-2px;overflow:hidden}.status-picker-status{color:var(--color-muted);font-size:calc(var(--font-size-400) * .8125);height:18px;display:block;position:relative}.status-picker-status-label{filter:blur(3px);opacity:0;white-space:nowrap;transition:filter .12s cubic-bezier(.23,1,.32,1),opacity .12s cubic-bezier(.23,1,.32,1),translate .12s cubic-bezier(.23,1,.32,1);position:absolute;top:0;left:0;translate:0 -4px}.status-picker-status-label.--active{filter:none;opacity:1;transition:none;display:block;position:relative;translate:0}.status-picker-text{min-width:0}.status-picker-trigger{border-radius:var(--trigger-border-radius);color:inherit;cursor:pointer;font:inherit;align-items:center;gap:var(--size-300);padding:var(--size-100) var(--size-400) var(--size-100) var(--size-100);text-align:left;transition:background var(--transition-duration) var(--transition-timing-function), scale var(--transition-duration) var(--transition-timing-function);background:0 0;border:0;outline:none;margin:0;display:flex}.status-picker-trigger:hover,.status-picker.--active>.status-picker-trigger{background:var(--background-hover)}.status-picker-trigger:active{scale:var(--press-scale)}.status-picker-trigger:focus-visible{outline:var(--focus-width) solid var(--color)}@media (prefers-reduced-motion:reduce){.status-picker-badge,.status-picker-status-label{transition:none}.status-picker-menu{transition:visibility}.status-picker.--active>.status-picker-menu{animation:none}.status-picker-trigger{transition:background var(--transition-duration) var(--transition-timing-function)}.status-picker-trigger:active{scale:1}}@keyframes status-picker-menu{0%{filter:blur(4px);opacity:0;translate:0 -4px;scale:.96}}}
-/*$vite$:1*/

package/build/components/sticky-stack/index.d.ts

@@ -1,33 +0,0 @@
-import { type Attributes, type Renderable } from '@esportsplus/template';
-import './scss/index.scss';
-type A = Attributes & {
-    [STICKY_STACK_CARD]?: Attributes;
-    [STICKY_STACK_DOT]?: Attributes;
-    items: Item[];
-    label: string;
-    state?: State;
-};
-type Item = {
-    text: Renderable<unknown>;
-    title: string;
-};
-type State = {
-    active: number;
-};
-declare const STICKY_STACK_CARD: unique symbol;
-declare const STICKY_STACK_DOT: unique symbol;
-declare const _default: {
-    (): Renderable<any>;
-    <T extends A>(attributes: T): Renderable<any>;
-    <T extends Renderable<unknown>>(content: T): Renderable<any>;
-    (attributes: A, content?: Renderable<unknown>): Renderable<any>;
-    bind(context: {
-        attributes?: Partial<A> | undefined;
-        content?: Renderable<unknown>;
-    }): any;
-} & {
-    readonly card: typeof STICKY_STACK_CARD;
-    readonly dot: typeof STICKY_STACK_DOT;
-};
-export default _default;
-export type { Item, State };