@esportsplus/ui 0.56.4 → 0.57.0

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

@@ -1,48 +1,75 @@
 import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
 import * as reactivity_u0 from '@esportsplus/reactivity';
-import { effect, onCleanup } from '@esportsplus/reactivity';
-import '../tooltip/scss/index.scss';
+import { ReactiveArray, computed, effect, onCleanup, read, untrack } from '@esportsplus/reactivity';
+import tooltip from '../tooltip/index.js';
+import { deadline } from '../../shared/deadline.js';
+import { viewport } from '../../shared/viewport.js';
 import './scss/index.scss';
-const template_0y6nu9v2 = template_u1.template(`<time class='relative-time tooltip  '><span class='relative-time-sr'></span><span aria-hidden='true' class='relative-time-roll '><span class='relative-time-digits'></span><span class='relative-time-rests'></span></span><span class='tooltip-message tooltip-message--n relative-time-tooltip' role='tooltip'>`);
+const template_0y6nu9v4 = template_u1.template(`<span class=' '>`);
+const template_0y6nu9v7 = template_u1.template(`<time class='relative-time tooltip'><span class='relative-time-sr'></span><span aria-hidden='true' class='relative-time-roll '><span class='relative-time-digits'></span><span class='relative-time-rests'></span></span><span class='tooltip-message tooltip-message--n relative-time-tooltip' role='tooltip'>`);
+const template_0y6nu9vf = template_u1.template(`<span class='relative-time-slot '>`);
 class ReactiveObject_0y6nu9v0 extends reactivity_u0.ReactiveObject {
-    #open = this[reactivity_u0.SIGNAL](false);
-    #tick = this[reactivity_u0.SIGNAL](0);
+    #exiting = this[reactivity_u0.SIGNAL](false);
+    #left = this[reactivity_u0.SIGNAL](0);
+    #top = this[reactivity_u0.SIGNAL](0);
     constructor() {
         super(null);
     }
-    get open() {
-        return reactivity_u0.read(this.#open);
+    get exiting() {
+        return reactivity_u0.read(this.#exiting);
+    }
+    set exiting(_v0) {
+        reactivity_u0.write(this.#exiting, _v0);
+    }
+    get left() {
+        return reactivity_u0.read(this.#left);
+    }
+    set left(_v1) {
+        reactivity_u0.write(this.#left, _v1);
+    }
+    get top() {
+        return reactivity_u0.read(this.#top);
     }
-    set open(_v0) {
-        reactivity_u0.write(this.#open, _v0);
+    set top(_v2) {
+        reactivity_u0.write(this.#top, _v2);
+    }
+}
+class ReactiveObject_0y6nu9v1 extends reactivity_u0.ReactiveObject {
+    #tick = this[reactivity_u0.SIGNAL](0);
+    constructor() {
+        super(null);
     }
     get tick() {
         return reactivity_u0.read(this.#tick);
     }
-    set tick(_v1) {
-        reactivity_u0.write(this.#tick, _v1);
+    set tick(_v0) {
+        reactivity_u0.write(this.#tick, _v0);
+    }
+}
+class ReactiveObject_0y6nu9v2 extends reactivity_u0.ReactiveObject {
+    #active = this[reactivity_u0.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get active() {
+        return reactivity_u0.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_u0.write(this.#active, _v0);
     }
 }
+const LEADING_DIGITS = /^(\d+)(.*)$/;
+const DATE_FORMAT = new Intl.DateTimeFormat(undefined, { day: 'numeric', month: 'short' });
 const DAY = 24 * 60 * 60 * 1000;
-const ENTER = [
-    { filter: 'blur(3px)', opacity: 0, translate: '0 0.55em' },
-    { filter: 'blur(0px)', opacity: 1, translate: '0 0' }
-];
-const EXIT = [
-    { filter: 'blur(0px)', opacity: 1, translate: '0 0' },
-    { filter: 'blur(3px)', opacity: 0, translate: '0 -0.4em' }
-];
-const FADE_IN = [{ opacity: 0 }, { opacity: 1 }];
-const FADE_OUT = [{ opacity: 1 }, { opacity: 0 }];
 const HOUR = 60 * 60 * 1000;
-const MAX_TIMEOUT = 2 ** 31 - 1;
+const ITEM = Symbol();
 const MIN = 60 * 1000;
-const OPEN_DELAY = 400;
 const RELATIVE_TIME_TOOLTIP = Symbol.for('@esportsplus/ui/relative-time.tooltip');
-const ROLL = { duration: 300, easing: 'cubic-bezier(0.32, 0.72, 0, 1)' };
 const SEC = 1000;
 const SETTLE = 20;
-const TOOLTIP = new Intl.DateTimeFormat(undefined, {
+const TOOLTIP_DELAY = 400;
+const TOOLTIP_FORMAT = new Intl.DateTimeFormat(undefined, {
     day: 'numeric',
     hour: 'numeric',
     minute: '2-digit',
@@ -51,17 +78,36 @@ const TOOLTIP = new Intl.DateTimeFormat(undefined, {
     year: 'numeric'
 });
 const VIEWPORT_GUTTER = 8;
-const WARM_FOR = 500;
 const WEEK = 7 * DAY;
-let closedAt = 0, uid = 0;
-function enter(element, reduce) {
-    element.animate(reduce ? FADE_IN : ENTER, ROLL);
+let uid = 0;
+function bind(item, block) {
+    return {
+        class: () => item.state.exiting && `${block}--exiting`,
+        onconnect: (element) => {
+            element[ITEM] = item;
+            item.element = element;
+        },
+        style: () => item.state.exiting && `left: ${item.state.left}px; top: ${item.state.top}px;`
+    };
 }
-function exit(element, reduce) {
-    element.style.left = `${element.offsetLeft}px`;
-    element.style.position = 'absolute';
-    element.style.top = `${element.offsetTop}px`;
-    element.animate(reduce ? FADE_OUT : EXIT, { ...ROLL, fill: 'forwards' }).onfinish = () => element.remove();
+function digit(text, entering, slots) {
+    let glyphs = new ReactiveArray(), slot = item('', entering, slots);
+    glyphs.push(item(text, false, glyphs));
+    slot.glyphs = glyphs;
+    return slot;
+}
+function glyph(item, block) {
+    return (() => {
+        let root_0y6nu9v3 = template_0y6nu9v4(), element_0y6nu9v5 = root_0y6nu9v3.firstChild;
+        template_u1.slot(element_0y6nu9v5, item.text, 1);
+        template_u1.setList(element_0y6nu9v5, 'class', block);
+        template_u1.setList(element_0y6nu9v5, 'class', item.entering && `${block}--entering`);
+        template_u1.setProperties(element_0y6nu9v5, bind(item, block));
+        return root_0y6nu9v3;
+    })();
+}
+function item(text, entering, list) {
+    return { entering, list, state: new ReactiveObject_0y6nu9v0(), text };
 }
 function label(diff, time) {
     if (diff < 10 * SEC) {
@@ -82,16 +128,70 @@ function label(diff, time) {
     if (diff < WEEK) {
         return `${Math.floor(diff / DAY)} days ago`;
     }
-    return new Intl.DateTimeFormat(undefined, { day: 'numeric', month: 'short' }).format(time);
+    return DATE_FORMAT.format(time);
+}
+function leave(items) {
+    let offsets = items.map(({ element }) => [element?.offsetLeft ?? 0, element?.offsetTop ?? 0]);
+    for (let i = 0, n = items.length; i < n; i++) {
+        let state = items[i].state;
+        state.exiting = true;
+        state.left = offsets[i][0];
+        state.top = offsets[i][1];
+    }
+}
+function render(slots, rests, text) {
+    let match = text.match(LEADING_DIGITS), next = match ? match[1] : '', suffix = match ? match[2] : text;
+    if (!rests.$length) {
+        for (let i = 0, n = next.length; i < n; i++) {
+            slots.push(digit(next[i], false, slots));
+        }
+        rests.push(item(suffix, false, rests));
+        return;
+    }
+    let current = settled(slots), leaving = [];
+    for (let key = 1, n = Math.max(current.length, next.length); key <= n; key++) {
+        let char = next[next.length - key], slot = current[current.length - key];
+        if (!slot) {
+            slots.unshift(digit(char, true, slots));
+        }
+        else if (char === undefined) {
+            leaving.push(slot);
+        }
+        else {
+            swap(slot.glyphs, char, leaving);
+        }
+    }
+    swap(rests, suffix, leaving);
+    leave(leaving);
 }
-function reduced() {
-    return matchMedia('(prefers-reduced-motion: reduce)').matches;
+function retire(e) {
+    let item = e.target[ITEM];
+    if (e.animationName !== 'relative-time-exit' || !item) {
+        return;
+    }
+    let index = item.list.indexOf(item);
+    if (index !== -1) {
+        item.list.splice(index, 1);
+    }
+}
+function settled(list) {
+    let out = [];
+    for (let i = 0, n = list.$length; i < n; i++) {
+        if (!list[i].state.exiting) {
+            out.push(list[i]);
+        }
+    }
+    return out;
 }
-function span(text, className) {
-    let element = document.createElement('span');
-    element.className = className;
-    element.textContent = text;
-    return element;
+function swap(list, text, leaving) {
+    let current = settled(list)[0];
+    if (current?.text === text) {
+        return;
+    }
+    if (current) {
+        leaving.push(current);
+    }
+    list.push(item(text, true, list));
 }
 function timeOf(value) {
     return value === null ? null : new Date(value).getTime();
@@ -110,174 +210,87 @@ function untilChange(diff) {
     return unit - (diff % unit);
 }
 function template({ date, state = reactivity_u0.reactive({ date, now: null }), ...attributes }) {
-    let clock = new ReactiveObject_0y6nu9v0(), digits, id = `relative-time-${++uid}`, instant = false, opener, rest, shown = null, stopRender, timer, tooltip;
-    function hide() {
-        clearTimeout(opener);
-        if (clock.open) {
-            closedAt = Date.now();
-        }
-        clock.open = false;
-    }
+    let cancel, clock = new ReactiveObject_0y6nu9v1(), id = `relative-time-${++uid}`, message, rests = new ReactiveArray(), slots = new ReactiveArray(), time = computed(() => timeOf(state.date)), text = computed(() => {
+        let value = read(time);
+        clock.tick;
+        return value === null ? null : label((state.now ?? Date.now()) - value, value);
+    }), tip = new ReactiveObject_0y6nu9v2();
     function nudge() {
-        if (!tooltip) {
+        if (!message) {
             return;
         }
-        tooltip.style.right = '';
-        let box = tooltip.getBoundingClientRect(), max = document.documentElement.clientWidth - VIEWPORT_GUTTER, shift = box.left < VIEWPORT_GUTTER ? VIEWPORT_GUTTER - box.left : box.right > max ? max - box.right : 0;
+        message.style.right = '';
+        let box = message.getBoundingClientRect(), max = viewport().width - VIEWPORT_GUTTER, shift = box.left < VIEWPORT_GUTTER ? VIEWPORT_GUTTER - box.left : box.right > max ? max - box.right : 0;
         if (shift) {
-            tooltip.style.right = `calc(50% - ${Math.round(shift)}px)`;
+            message.style.right = `calc(50% - ${Math.round(shift)}px)`;
         }
     }
-    function open(delayed) {
-        clearTimeout(opener);
-        let warm = Date.now() - closedAt < WARM_FOR;
-        if (delayed && !warm) {
-            instant = false;
-            opener = setTimeout(() => {
-                nudge();
-                clock.open = true;
-            }, OPEN_DELAY);
-            return;
-        }
-        instant = warm;
-        nudge();
-        clock.open = true;
-    }
-    function render(text) {
-        let match = text.match(/^(\d+)(.*)$/), next = { digits: match ? match[1] : '', rest: match ? match[2] : text }, previous = shown, reduce = reduced();
-        shown = next;
-        if (!digits || !rest) {
-            return;
-        }
-        if (!previous) {
-            digits.replaceChildren(...[...next.digits].map((digit) => slot(digit)));
-            rest.replaceChildren(span(next.rest, 'relative-time-rest'));
-            return;
-        }
-        let slots = Array.from(digits.children).filter((element) => !element.style.position);
-        for (let key = 1, n = Math.max(slots.length, next.digits.length); key <= n; key++) {
-            let digit = next.digits[next.digits.length - key], element = slots[slots.length - key];
-            if (!element) {
-                let created = slot(digit);
-                digits.prepend(created);
-                enter(created, reduce);
-                continue;
-            }
-            if (digit === undefined) {
-                exit(element, reduce);
-                continue;
-            }
-            let current = Array.from(element.children).find((child) => !child.style.position);
-            if (current?.textContent === digit) {
-                continue;
-            }
-            let created = span(digit, 'relative-time-digit');
-            if (current) {
-                exit(current, reduce);
-            }
-            element.append(created);
-            enter(created, reduce);
-        }
-        if (previous.rest === next.rest) {
-            return;
-        }
-        let created = span(next.rest, 'relative-time-rest'), current = Array.from(rest.children).find((child) => !child.style.position);
-        if (current) {
-            exit(current, reduce);
-        }
-        rest.append(created);
-        enter(created, reduce);
-    }
     function schedule() {
-        clearTimeout(timer);
-        let time = timeOf(state.date);
-        if (time === null || state.now !== null) {
+        cancel?.();
+        cancel = undefined;
+        let value = read(time);
+        if (value === null || state.now !== null) {
             return;
         }
-        timer = setTimeout(() => {
-            clock.tick++;
-            schedule();
-        }, Math.min(untilChange(Date.now() - time) + SETTLE, MAX_TIMEOUT));
-    }
-    function slot(digit) {
-        let element = span('', 'relative-time-slot');
-        element.append(span(digit, 'relative-time-digit'));
-        return element;
-    }
-    function text() {
-        let time = timeOf(state.date);
-        clock.tick;
-        return time === null ? null : label((state.now ?? Date.now()) - time, time);
+        let now = Date.now();
+        cancel = deadline(now + untilChange(now - value) + SETTLE, tick);
     }
-    let stopSchedule = effect(() => {
-        state.date;
-        state.now;
+    function tick() {
+        clock.tick++;
         schedule();
+    }
+    effect(() => {
+        if (tip.active) {
+            nudge();
+        }
     });
-    onCleanup(() => {
-        clearTimeout(opener);
-        clearTimeout(timer);
-        stopRender?.();
-        stopSchedule();
+    effect(() => {
+        let value = read(text);
+        if (value !== null) {
+            untrack(() => render(slots, rests, value));
+        }
     });
+    effect(schedule);
+    onCleanup(() => cancel?.());
     return (() => {
-        let root_0y6nu9v1 = template_0y6nu9v2(), element_0y6nu9v3 = root_0y6nu9v1.firstChild, element_0y6nu9v4 = element_0y6nu9v3.firstElementChild, element_0y6nu9v5 = element_0y6nu9v4.nextElementSibling, element_0y6nu9v6 = element_0y6nu9v5.nextElementSibling;
-        template_u1.setList(element_0y6nu9v3, 'class', () => clock.open && '--active');
-        template_u1.setList(element_0y6nu9v3, 'class', () => instant && clock.open && '--instant');
-        template_u1.setProperties(element_0y6nu9v3, this?.attributes);
-        template_u1.setProperties(element_0y6nu9v3, attributes);
-        template_u1.setProperty(element_0y6nu9v3, 'aria-describedby', () => clock.open ? id : '');
-        template_u1.setProperty(element_0y6nu9v3, 'datetime', () => {
-            let time = timeOf(state.date);
-            return time === null ? '' : new Date(time).toISOString();
-        });
-        template_u1.on(element_0y6nu9v3, 'blur', hide);
-        template_u1.onconnect(element_0y6nu9v3, (element) => {
-            digits = element.querySelector('.relative-time-digits') ?? undefined;
-            rest = element.querySelector('.relative-time-rests') ?? undefined;
-            stopRender = effect(() => {
-                let value = text();
-                if (value !== null) {
-                    render(value);
-                }
-            });
-        });
-        template_u1.ondisconnect(element_0y6nu9v3, () => {
-            stopRender?.();
-        });
-        template_u1.ondocument(element_0y6nu9v3, 'visibilitychange', () => {
-            if (document.visibilityState !== 'visible') {
-                return;
-            }
-            clock.tick++;
-            schedule();
+        let root_0y6nu9v6 = template_0y6nu9v7(), element_0y6nu9v8 = root_0y6nu9v6.firstChild, element_0y6nu9v9 = element_0y6nu9v8.firstElementChild, element_0y6nu9va = element_0y6nu9v9.nextElementSibling, element_0y6nu9vb = element_0y6nu9va.firstElementChild, element_0y6nu9vc = element_0y6nu9vb.nextElementSibling, element_0y6nu9vd = element_0y6nu9va.nextElementSibling;
+        new template_u1.EffectSlot(element_0y6nu9v9, () => read(text) ?? '', 1);
+        element_0y6nu9vb.appendChild(new template_u1.ArraySlot(slots, (slot) => {
+            let root_0y6nu9ve = template_0y6nu9vf(), element_0y6nu9vg = root_0y6nu9ve.firstChild;
+            element_0y6nu9vg.appendChild(new template_u1.ArraySlot(slot.glyphs, (item) => glyph(item, 'relative-time-digit'), true).fragment);
+            template_u1.setList(element_0y6nu9vg, 'class', slot.entering && 'relative-time-slot--entering');
+            template_u1.setProperties(element_0y6nu9vg, bind(slot, 'relative-time-slot'));
+            return root_0y6nu9ve;
+        }, true).fragment);
+        element_0y6nu9vc.appendChild(new template_u1.ArraySlot(rests, (item) => glyph(item, 'relative-time-rest'), true).fragment);
+        new template_u1.EffectSlot(element_0y6nu9vd, () => {
+            let value = read(time);
+            return value !== null && TOOLTIP_FORMAT.format(value);
+        }, 1);
+        template_u1.setProperty(element_0y6nu9vd, 'id', id);
+        template_u1.setProperties(element_0y6nu9vd, this?.attributes?.[RELATIVE_TIME_TOOLTIP]);
+        template_u1.setProperties(element_0y6nu9vd, attributes[RELATIVE_TIME_TOOLTIP]);
+        template_u1.onconnect(element_0y6nu9vd, (element) => {
+            message = element;
         });
-        template_u1.on(element_0y6nu9v3, 'focus', () => open(false));
-        template_u1.delegate(element_0y6nu9v3, 'keydown', (e) => {
-            if (e.key === 'Escape') {
-                hide();
-            }
+        template_u1.setList(element_0y6nu9va, 'class', () => state.date === null && 'relative-time-roll--placeholder');
+        template_u1.delegate(element_0y6nu9va, 'animationcancel', retire);
+        template_u1.delegate(element_0y6nu9va, 'animationend', retire);
+        template_u1.setProperties(element_0y6nu9v8, this?.attributes);
+        template_u1.setProperties(element_0y6nu9v8, attributes);
+        template_u1.setProperties(element_0y6nu9v8, tooltip.onhover.trigger({ delay: { open: TOOLTIP_DELAY }, state: tip }));
+        template_u1.setProperty(element_0y6nu9v8, 'aria-describedby', () => tip.active && id);
+        template_u1.setProperty(element_0y6nu9v8, 'datetime', () => {
+            let value = read(time);
+            return value !== null && new Date(value).toISOString();
         });
-        template_u1.on(element_0y6nu9v3, 'pointerenter', (e) => {
-            if (e.pointerType !== 'touch') {
-                open(true);
+        template_u1.ondocument(element_0y6nu9v8, 'visibilitychange', () => {
+            if (document.visibilityState === 'visible') {
+                tick();
             }
         });
-        template_u1.on(element_0y6nu9v3, 'pointerleave', hide);
-        template_u1.setProperty(element_0y6nu9v3, 'tabindex', () => state.date === null ? '' : '0');
-        new template_u1.EffectSlot(element_0y6nu9v4, () => text() ?? '', 1);
-        template_u1.setList(element_0y6nu9v5, 'class', () => state.date === null && '--placeholder');
-        template_u1.setProperty(element_0y6nu9v6, 'id', id);
-        template_u1.setProperties(element_0y6nu9v6, this?.attributes?.[RELATIVE_TIME_TOOLTIP]);
-        template_u1.setProperties(element_0y6nu9v6, attributes[RELATIVE_TIME_TOOLTIP]);
-        template_u1.onrender(element_0y6nu9v6, (element) => {
-            tooltip = element;
-        });
-        new template_u1.EffectSlot(element_0y6nu9v6, () => {
-            let time = timeOf(state.date);
-            return time === null ? '' : TOOLTIP.format(time);
-        }, 1);
-        return root_0y6nu9v1;
+        template_u1.setProperty(element_0y6nu9v8, 'tabindex', () => state.date !== null && '0');
+        return root_0y6nu9v6;
     })();
 }
-export default Object.assign(template, { tooltip: RELATIVE_TIME_TOOLTIP });
+export default component(template, { tooltip: RELATIVE_TIME_TOOLTIP });

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

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

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

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

package/build/components/select/index.d.ts

@@ -1,16 +1,30 @@
 import * as template_u1 from '@esportsplus/template';
 import { type Attributes, type Renderable } from '@esportsplus/template';
 import './scss/index.scss';
-declare const SELECT_ARROW: unique symbol;
-declare const SELECT_OPTION: unique symbol;
-declare const SELECT_TOOLTIP_CONTENT: unique symbol;
-type A = {
+type State = {
+    active: boolean;
+    error: string;
+    render?: boolean;
+    selected?: number | string;
+};
+type A = Attributes & {
+    onanimationcancel?: never;
+    onanimationend?: never;
+    onanimationstart?: never;
+    onclick?: never;
+    ondocumentclick?: never;
+    ontransitioncancel?: never;
+    ontransitionend?: never;
+    ontransitionrun?: never;
     [SELECT_ARROW]?: Attributes;
     [SELECT_OPTION]?: Attributes;
     [SELECT_TOOLTIP_CONTENT]?: Attributes & {
         direction?: string;
     };
-    options: Record<number | string, Renderable<unknown> | {
+    [SELECT_TRIGGER]?: Attributes;
+    label?: string;
+    name?: string;
+    options: Option[] | Record<number | string, Renderable<unknown> | {
         content: Renderable<unknown>;
         selected: Renderable<unknown>;
     }>;
@@ -19,19 +33,24 @@ type A = {
     state?: never;
 } | {
     selected?: never;
-    state: {
-        active: boolean;
-        error: string;
-        render: boolean;
-        selected?: number | string;
-    };
-}) & Attributes;
-declare const _default: template_u1.Factory<A, (state: {
-    active: boolean;
-    selected?: string | number;
-}) => Renderable<unknown>, Renderable<any>, {
+    state: State;
+});
+type Option = {
+    detail?: string;
+    label: Renderable<unknown>;
+    selected?: Renderable<unknown>;
+    text?: string;
+    value: string;
+};
+declare const SELECT_OPTION: unique symbol;
+declare const SELECT_ARROW: unique symbol;
+declare const SELECT_TOOLTIP_CONTENT: unique symbol;
+declare const SELECT_TRIGGER: unique symbol;
+declare const _default: template_u1.Factory<A, (state: State) => Renderable<unknown>, Renderable<any>, {
     readonly arrow: typeof SELECT_ARROW;
     readonly option: typeof SELECT_OPTION;
     readonly tooltipContent: typeof SELECT_TOOLTIP_CONTENT;
+    readonly trigger: typeof SELECT_TRIGGER;
 }>;
 export default _default;
+export type { Option };