@esportsplus/ui 0.54.0 → 0.56.2

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

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

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

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

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

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