@esportsplus/ui 0.55.0 → 0.56.3

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

@@ -0,0 +1,24 @@
+import { type Attributes, type Renderable } from '@esportsplus/template';
+import '../tooltip/index.js';
+import './scss/index.scss';
+type A = Attributes & {
+    [DOCK_BUTTON]?: Attributes;
+    items: Item[];
+    label?: string;
+    onlaunch?: (label: string) => void;
+};
+type Item = {
+    icon: Renderable<unknown>;
+    label: string;
+    running?: boolean;
+    state?: {
+        running: boolean;
+    };
+};
+declare const DOCK_BUTTON: unique symbol;
+declare const dock: ({ items, label, onlaunch, ...attributes }: A) => DocumentFragment | Text;
+declare const _default: typeof dock & {
+    readonly button: typeof DOCK_BUTTON;
+};
+export default _default;
+export type { Item };

package/build/components/dock/index.js

@@ -0,0 +1,200 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { onCleanup } from '@esportsplus/reactivity';
+import '../tooltip/index.js';
+import './scss/index.scss';
+const template_11yw5fm3 = template_u1.template(`<nav class='dock'>`);
+const template_11yw5fm6 = template_u1.template(`<span class='dock-item tooltip '><button class='dock-button' type='button'></button><span aria-hidden='true' class='dock-label tooltip-message tooltip-message--n '></span><span aria-hidden='true' class='dock-light '>`);
+class ReactiveObject_11yw5fm0 extends reactivity_u0.ReactiveObject {
+    #instant = this[reactivity_u0.SIGNAL](false);
+    #label = this[reactivity_u0.SIGNAL]('');
+    constructor() {
+        super(null);
+    }
+    get instant() {
+        return reactivity_u0.read(this.#instant);
+    }
+    set instant(_v0) {
+        reactivity_u0.write(this.#instant, _v0);
+    }
+    get label() {
+        return reactivity_u0.read(this.#label);
+    }
+    set label(_v1) {
+        reactivity_u0.write(this.#label, _v1);
+    }
+}
+class ReactiveObject_11yw5fm1 extends reactivity_u0.ReactiveObject {
+    #running;
+    constructor(_p0) {
+        super(null);
+        this.#running = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get running() {
+        return reactivity_u0.read(this.#running);
+    }
+    set running(_v0) {
+        reactivity_u0.write(this.#running, _v0);
+    }
+}
+const DOCK_BUTTON = Symbol.for('@esportsplus/ui/dock.button');
+const EASE_IN = 'cubic-bezier(0.42, 0, 1, 1)';
+const EASE_OUT = 'cubic-bezier(0, 0, 0.58, 1)';
+const HOP = [
+    { easing: EASE_OUT, offset: 0, translate: '0 0' },
+    { easing: EASE_IN, offset: 0.3, translate: '0 -22px' },
+    { easing: EASE_OUT, offset: 0.55, translate: '0 0' },
+    { easing: EASE_IN, offset: 0.78, translate: '0 -9px' },
+    { offset: 1, translate: '0 0' }
+];
+const HOP_DURATION = 700;
+const REACH = 140;
+const SPRING = { damping: 12, mass: 0.1, stiffness: 170 };
+const SQUASH = [
+    { offset: 0, scale: '1 1' },
+    { offset: 0.3, scale: '0.97 1.04' },
+    { offset: 0.55, scale: '1.08 0.9' },
+    { offset: 0.7, scale: '0.99 1.02' },
+    { offset: 0.8, scale: '1.03 0.96' },
+    { offset: 1, scale: '1 1' }
+];
+const STEP = 1 / 240;
+const TOOLTIP_DELAY = 300;
+function reduced() {
+    return matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+const dock = ({ items, label = 'Dock', onlaunch, ...attributes }) => {
+    let frame = 0, hops = new Map(), peak = 72, rest = 40, springs = [], time = 0, timer, tip = new ReactiveObject_11yw5fm0();
+    function hide() {
+        clearTimeout(timer);
+        tip.label = '';
+    }
+    function launch(item, state, button) {
+        if (state.running) {
+            return;
+        }
+        state.running = true;
+        onlaunch?.(item.label);
+        if (reduced()) {
+            return;
+        }
+        for (let animation of hops.get(button) ?? []) {
+            animation.cancel();
+        }
+        hops.set(button, [
+            button.animate(HOP, { duration: HOP_DURATION }),
+            button.animate(SQUASH, { duration: HOP_DURATION, easing: 'ease-in-out' })
+        ]);
+    }
+    function pull(x) {
+        for (let i = 0, n = springs.length; i < n; i++) {
+            let spring = springs[i], box = spring.button.getBoundingClientRect(), distance = Math.min(Math.abs(x - box.left - box.width / 2), REACH);
+            spring.target = peak - (peak - rest) * (distance / REACH);
+        }
+        if (!frame) {
+            time = 0;
+            frame = requestAnimationFrame(tick);
+        }
+    }
+    function show(label) {
+        clearTimeout(timer);
+        if (tip.label) {
+            tip.instant = true;
+            tip.label = label;
+            return;
+        }
+        timer = setTimeout(() => {
+            tip.instant = false;
+            tip.label = label;
+        }, TOOLTIP_DELAY);
+    }
+    function tick(now) {
+        let dt = time ? Math.min((now - time) / 1000, 1 / 30) : 1 / 60, moving = false;
+        time = now;
+        for (let i = 0, n = springs.length; i < n; i++) {
+            let spring = springs[i];
+            for (let t = 0; t < dt; t += STEP) {
+                let h = Math.min(STEP, dt - t);
+                spring.velocity += ((SPRING.stiffness * (spring.target - spring.size) - SPRING.damping * spring.velocity) / SPRING.mass) * h;
+                spring.size += spring.velocity * h;
+            }
+            if (Math.abs(spring.target - spring.size) < 0.01 && Math.abs(spring.velocity) < 0.01) {
+                spring.size = spring.target;
+                spring.velocity = 0;
+            }
+            else {
+                moving = true;
+            }
+            spring.button.style.setProperty('--size', `${spring.size}px`);
+        }
+        frame = moving ? requestAnimationFrame(tick) : 0;
+    }
+    onCleanup(() => {
+        cancelAnimationFrame(frame);
+        clearTimeout(timer);
+        for (let animations of hops.values()) {
+            for (let animation of animations) {
+                animation.cancel();
+            }
+        }
+    });
+    return (() => {
+        let root_11yw5fm2 = template_11yw5fm3(), element_11yw5fm4 = root_11yw5fm2.firstChild;
+        template_u1.setProperties(element_11yw5fm4, attributes);
+        template_u1.setProperty(element_11yw5fm4, 'aria-label', label);
+        template_u1.onconnect(element_11yw5fm4, (element) => {
+            let style = getComputedStyle(element);
+            peak = parseFloat(style.getPropertyValue('--size-peak')) || peak;
+            rest = parseFloat(style.getPropertyValue('--size-rest')) || rest;
+            for (let i = 0, n = springs.length; i < n; i++) {
+                springs[i].size = springs[i].target = rest;
+            }
+        });
+        template_u1.on(element_11yw5fm4, 'pointerleave', () => {
+            hide();
+            pull(Infinity);
+        });
+        template_u1.delegate(element_11yw5fm4, 'pointermove', (e) => {
+            if (e.pointerType === 'touch' || reduced()) {
+                return;
+            }
+            pull(e.clientX);
+        });
+        template_u1.slot(element_11yw5fm4, items.map((item) => {
+            let button, state = item.state ?? new ReactiveObject_11yw5fm1(item.running ?? false);
+            return (() => {
+                let root_11yw5fm5 = template_11yw5fm6(), element_11yw5fm7 = root_11yw5fm5.firstChild, element_11yw5fm8 = element_11yw5fm7.firstElementChild, element_11yw5fm9 = element_11yw5fm8.nextElementSibling, element_11yw5fma = element_11yw5fm9.nextElementSibling;
+                template_u1.setList(element_11yw5fm7, 'class', () => tip.label === item.label && '--active');
+                template_u1.setProperties(element_11yw5fm8, attributes[DOCK_BUTTON]);
+                template_u1.setProperty(element_11yw5fm8, 'aria-label', () => state.running ? `${item.label}, running` : item.label);
+                template_u1.on(element_11yw5fm8, 'blur', hide);
+                template_u1.delegate(element_11yw5fm8, 'click', () => {
+                    if (button) {
+                        launch(item, state, button);
+                    }
+                });
+                template_u1.on(element_11yw5fm8, 'focus', () => {
+                    clearTimeout(timer);
+                    tip.instant = false;
+                    tip.label = item.label;
+                });
+                template_u1.on(element_11yw5fm8, 'pointerenter', (e) => {
+                    if (e.pointerType !== 'touch') {
+                        show(item.label);
+                    }
+                });
+                template_u1.onrender(element_11yw5fm8, (element) => {
+                    button = element;
+                    springs.push({ button: element, size: rest, target: rest, velocity: 0 });
+                });
+                template_u1.slot(element_11yw5fm8, item.icon, 1);
+                template_u1.setList(element_11yw5fm9, 'class', () => tip.instant && tip.label === item.label && '--instant');
+                template_u1.slot(element_11yw5fm9, item.label, 1);
+                template_u1.setList(element_11yw5fma, 'class', () => state.running && '--active');
+                return root_11yw5fm5;
+            })();
+        }), 1);
+        return root_11yw5fm2;
+    })();
+};
+export default Object.assign(dock, { button: DOCK_BUTTON });

package/build/components/dock/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.dock{--background:var(--color-grey-400);--box-shadow:0 0 0 var(--border-width-400) var(--color-border-300), var(--box-shadow-200);--gap:8px;--height:64px;--icon-ratio:.45;--item-background:var(--color-white-300);--item-box-shadow:0 0 0 var(--border-width-400) var(--color-border-300), var(--box-shadow-100);--item-color:var(--color-text-500);--item-radius:999px;--light-color:var(--color-text-500);--light-delay:.385s;--light-size:4px;--padding:12px;--radius:999px;--size-peak:72px;--size-rest:40px}.dock--square{--item-radius:var(--border-radius-600);--radius:var(--border-radius-700)}.dock--subtle{--size-peak:54px}.dock{background:var(--background);border-radius:var(--radius);box-shadow:var(--box-shadow);align-items:flex-end;gap:var(--gap);height:var(--height);padding:0 var(--padding) var(--padding);display:flex}.dock-button{--size:var(--size-rest);background:var(--item-background);border-radius:var(--item-radius);box-shadow:var(--item-box-shadow);color:var(--item-color);cursor:pointer;height:var(--size);transform-origin:50% 100%;width:var(--size);border:0;outline:none;flex-shrink:0;justify-content:center;align-items:center;transition:scale .15s ease-out;display:flex;position:relative}.dock-button:active{scale:.96}.dock-button:focus-visible{outline:2px solid var(--item-color);outline-offset:2px}.dock-button svg{height:calc(var(--size) * var(--icon-ratio));width:calc(var(--size) * var(--icon-ratio))}.dock-item.tooltip{cursor:default;flex-shrink:0;display:flex}.dock-label.tooltip-message{--border-radius:var(--border-radius-300);--box-shadow:none;--font-weight:var(--font-weight-500);--offset:4px;--padding-horizontal:8px;--padding-vertical:4px;--spacer:12px;--transition-duration:.15s;--transition-timing-function:ease-out}.dock-label.tooltip-message.--instant{transition:none}.dock-light{background:var(--light-color);height:var(--light-size);margin:4px 0 0 calc(var(--light-size) / -2);opacity:0;pointer-events:none;width:var(--light-size);border-radius:50%;transition:opacity .15s cubic-bezier(.23,1,.32,1),scale .15s cubic-bezier(.23,1,.32,1);position:absolute;top:100%;left:50%;scale:.5}.dock-light.--active{opacity:1;transition-delay:var(--light-delay);transition-duration:.2s;scale:1}@media (prefers-reduced-motion:reduce){.dock{--light-delay:0s}}}
+/*$vite$:1*/

package/build/components/dynamic-island/index.d.ts

@@ -0,0 +1,23 @@
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+declare const DYNAMIC_ISLAND_TOGGLE: unique symbol;
+type A = Attributes & {
+    [DYNAMIC_ISLAND_TOGGLE]?: Attributes;
+    state?: State;
+};
+type Mode = 'idle' | 'music' | 'ring' | 'timer';
+type State = {
+    artist: string;
+    elapsed: number;
+    mode: Mode;
+    playing: boolean;
+    title: string;
+};
+declare function template(this: {
+    attributes?: Partial<A>;
+} | void, { state, ...attributes }?: A): DocumentFragment | Text;
+declare const _default: typeof template & {
+    readonly toggle: typeof DYNAMIC_ISLAND_TOGGLE;
+};
+export default _default;
+export type { Mode as DynamicIslandMode, State as DynamicIslandState };

package/build/components/dynamic-island/index.js

@@ -0,0 +1,179 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect, untrack } from '@esportsplus/reactivity';
+import './scss/index.scss';
+const template_1hsoevc3 = template_u1.template(`<div class='dynamic-island-content dynamic-island-content--idle '>`);
+const template_1hsoevc6 = template_u1.template(`<div class='dynamic-island-content dynamic-island-content--music '>`);
+const template_1hsoevc9 = template_u1.template(`<div class='dynamic-island-content dynamic-island-content--ring '>`);
+const template_1hsoevcc = template_u1.template(`<div class='dynamic-island-content dynamic-island-content--timer '>`);
+const template_1hsoevcf = template_u1.template(`<div class='dynamic-island-content  '>`);
+const template_1hsoevci = template_u1.template(`<div class='dynamic-island '><div class='dynamic-island-pill'><!--$--><!--$--><!--$--></div><span aria-live='polite' class='dynamic-island-sr'>`);
+const template_1hsoevcp = template_u1.template(`<span class='dynamic-island-lens'>`);
+const template_1hsoevcr = template_u1.template(`<svg aria-hidden='true' class='dynamic-island-icon' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 16 16'><circle cx='8' cy='9' r='5.25' /><path d='M8 6.5V9l1.5 1.25M6.5 1.75h3' /></svg><span class='dynamic-island-time'>`);
+const template_1hsoevct = template_u1.template(`<svg aria-hidden='true' class='dynamic-island-icon dynamic-island-bell' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 16 16'><path d='M4 11.25V7.5a4 4 0 0 1 8 0v3.75l1 1H3Z' /><path d='M6.75 13.75a1.25 1.25 0 0 0 2.5 0' /></svg><span class='dynamic-island-label'>Ringer on`);
+const template_1hsoevcv = template_u1.template(`<div class='dynamic-island-track'><span class='dynamic-island-title'></span><span class='dynamic-island-artist'></span></div><span aria-hidden='true' class='dynamic-island-eq '></span><button class='dynamic-island-toggle ' type='button'><svg aria-hidden='true' class='dynamic-island-play' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 16 16'><path d='M5.5 3.5v9l7-4.5Z' fill='currentColor' /></svg><svg aria-hidden='true' class='dynamic-island-pause' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 16 16'><path d='M5 3.5v9M11 3.5v9' />`);
+const template_1hsoevc11 = template_u1.template(`<span>`);
+class ReactiveObject_1hsoevc0 extends reactivity_u0.ReactiveObject {
+    #artist = this[reactivity_u0.SIGNAL]('M83');
+    #elapsed = this[reactivity_u0.SIGNAL](0);
+    #mode;
+    #playing = this[reactivity_u0.SIGNAL](true);
+    #title = this[reactivity_u0.SIGNAL]('Midnight City');
+    constructor(_p0) {
+        super(null);
+        this.#mode = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get artist() {
+        return reactivity_u0.read(this.#artist);
+    }
+    set artist(_v0) {
+        reactivity_u0.write(this.#artist, _v0);
+    }
+    get elapsed() {
+        return reactivity_u0.read(this.#elapsed);
+    }
+    set elapsed(_v1) {
+        reactivity_u0.write(this.#elapsed, _v1);
+    }
+    get mode() {
+        return reactivity_u0.read(this.#mode);
+    }
+    set mode(_v2) {
+        reactivity_u0.write(this.#mode, _v2);
+    }
+    get playing() {
+        return reactivity_u0.read(this.#playing);
+    }
+    set playing(_v3) {
+        reactivity_u0.write(this.#playing, _v3);
+    }
+    get title() {
+        return reactivity_u0.read(this.#title);
+    }
+    set title(_v4) {
+        reactivity_u0.write(this.#title, _v4);
+    }
+}
+class ReactiveObject_1hsoevc1 extends reactivity_u0.ReactiveObject {
+    #announcement = this[reactivity_u0.SIGNAL]('');
+    constructor() {
+        super(null);
+    }
+    get announcement() {
+        return reactivity_u0.read(this.#announcement);
+    }
+    set announcement(_v0) {
+        reactivity_u0.write(this.#announcement, _v0);
+    }
+}
+const DYNAMIC_ISLAND_TOGGLE = Symbol.for('@esportsplus/ui/dynamic-island.toggle');
+const BARS = [
+    { delay: -120, duration: 520, rest: 0.55 },
+    { delay: -400, duration: 760, rest: 0.9 },
+    { delay: -250, duration: 610, rest: 0.4 },
+    { delay: -600, duration: 840, rest: 0.7 }
+];
+function describe(mode, playing, elapsed, title) {
+    if (mode === 'timer') {
+        return `Timer, ${Math.floor(elapsed / 60)}:${pad(elapsed % 60)}`;
+    }
+    if (mode === 'music') {
+        return `${playing ? 'Playing' : 'Paused'}, ${title}`;
+    }
+    if (mode === 'ring') {
+        return 'Ringer on';
+    }
+    return 'Idle';
+}
+function format(seconds) {
+    return `${pad(Math.floor(seconds / 60))}:${pad(seconds % 60)}`;
+}
+function pad(value) {
+    return String(value).padStart(2, '0');
+}
+function template({ state = new ReactiveObject_1hsoevc0('idle'), ...attributes } = {}) {
+    let bound = this?.attributes, stop, view = new ReactiveObject_1hsoevc1();
+    function content(mode, children) {
+        return (mode === "idle" ? (() => {
+            let root_1hsoevc2 = template_1hsoevc3(), element_1hsoevc4 = root_1hsoevc2.firstChild;
+            template_u1.setList(element_1hsoevc4, 'class', () => state.mode === mode && '--active');
+            template_u1.setProperty(element_1hsoevc4, 'inert', () => state.mode !== mode);
+            template_u1.slot(element_1hsoevc4, children, 1);
+            return root_1hsoevc2;
+        })() : mode === "music" ? (() => {
+            let root_1hsoevc5 = template_1hsoevc6(), element_1hsoevc7 = root_1hsoevc5.firstChild;
+            template_u1.setList(element_1hsoevc7, 'class', () => state.mode === mode && '--active');
+            template_u1.setProperty(element_1hsoevc7, 'inert', () => state.mode !== mode);
+            template_u1.slot(element_1hsoevc7, children, 1);
+            return root_1hsoevc5;
+        })() : mode === "ring" ? (() => {
+            let root_1hsoevc8 = template_1hsoevc9(), element_1hsoevca = root_1hsoevc8.firstChild;
+            template_u1.setList(element_1hsoevca, 'class', () => state.mode === mode && '--active');
+            template_u1.setProperty(element_1hsoevca, 'inert', () => state.mode !== mode);
+            template_u1.slot(element_1hsoevca, children, 1);
+            return root_1hsoevc8;
+        })() : mode === "timer" ? (() => {
+            let root_1hsoevcb = template_1hsoevcc(), element_1hsoevcd = root_1hsoevcb.firstChild;
+            template_u1.setList(element_1hsoevcd, 'class', () => state.mode === mode && '--active');
+            template_u1.setProperty(element_1hsoevcd, 'inert', () => state.mode !== mode);
+            template_u1.slot(element_1hsoevcd, children, 1);
+            return root_1hsoevcb;
+        })() : (() => {
+            let root_1hsoevce = template_1hsoevcf(), element_1hsoevcg = root_1hsoevce.firstChild;
+            template_u1.setList(element_1hsoevcg, 'class', template_u1.interpolate(["dynamic-island-content--", (mode)]));
+            template_u1.setList(element_1hsoevcg, 'class', () => state.mode === mode && '--active');
+            template_u1.setProperty(element_1hsoevcg, 'inert', () => state.mode !== mode);
+            template_u1.slot(element_1hsoevcg, children, 1);
+            return root_1hsoevce;
+        })());
+    }
+    return (() => {
+        let root_1hsoevch = template_1hsoevci(), element_1hsoevcj = root_1hsoevch.firstChild, element_1hsoevck = element_1hsoevcj.firstElementChild.firstChild, element_1hsoevcl = element_1hsoevck.nextSibling, element_1hsoevcm = element_1hsoevcl.nextSibling, element_1hsoevcn = element_1hsoevcj.firstElementChild, element_1hsoevco = element_1hsoevcn.nextElementSibling;
+        template_u1.setList(element_1hsoevcj, 'class', () => `dynamic-island--${state.mode}`);
+        template_u1.setProperties(element_1hsoevcj, bound);
+        template_u1.setProperties(element_1hsoevcj, attributes);
+        template_u1.onconnect(element_1hsoevcj, () => {
+            let initial = true;
+            stop = effect(() => {
+                let mode = state.mode, playing = state.playing;
+                if (initial) {
+                    initial = false;
+                    return;
+                }
+                view.announcement = untrack(() => describe(mode, playing, state.elapsed, state.title));
+            });
+        });
+        template_u1.ondisconnect(element_1hsoevcj, () => {
+            stop?.();
+        });
+        template_u1.slot(element_1hsoevck, content('idle', template_1hsoevcp()));
+        template_u1.slot(element_1hsoevcl, content('timer', (() => {
+            let root_1hsoevcq = template_1hsoevcr(), element_1hsoevcs = root_1hsoevcq.firstChild.nextSibling;
+            new template_u1.EffectSlot(element_1hsoevcs, () => format(state.elapsed), 1);
+            return root_1hsoevcq;
+        })()));
+        template_u1.slot(element_1hsoevcm, content('ring', template_1hsoevct()));
+        template_u1.slot(element_1hsoevcn, content('music', (() => {
+            let root_1hsoevcu = template_1hsoevcv(), element_1hsoevcw = root_1hsoevcu.firstChild.firstElementChild, element_1hsoevcx = element_1hsoevcw.nextElementSibling, element_1hsoevcy = root_1hsoevcu.firstChild.nextSibling, element_1hsoevcz = element_1hsoevcy.nextSibling;
+            new template_u1.EffectSlot(element_1hsoevcw, () => state.title, 1);
+            new template_u1.EffectSlot(element_1hsoevcx, () => state.artist, 1);
+            template_u1.setList(element_1hsoevcy, 'class', () => !state.playing && '--paused');
+            template_u1.slot(element_1hsoevcy, BARS.map((bar) => {
+                let root_1hsoevc10 = template_1hsoevc11(), element_1hsoevc12 = root_1hsoevc10.firstChild;
+                template_u1.setList(element_1hsoevc12, 'style', `--rest: ${bar.rest}; animation-delay: ${bar.delay}ms; animation-duration: ${bar.duration}ms;`);
+                return root_1hsoevc10;
+            }), 1);
+            template_u1.setProperty(element_1hsoevcz, 'aria-label', () => state.playing ? 'Pause' : 'Play');
+            template_u1.setList(element_1hsoevcz, 'class', () => state.playing && '--playing');
+            template_u1.setProperties(element_1hsoevcz, bound?.[DYNAMIC_ISLAND_TOGGLE]);
+            template_u1.setProperties(element_1hsoevcz, attributes[DYNAMIC_ISLAND_TOGGLE]);
+            template_u1.delegate(element_1hsoevcz, 'click', () => {
+                state.playing = !state.playing;
+            });
+            return root_1hsoevcu;
+        })()), 2);
+        new template_u1.EffectSlot(element_1hsoevco, () => view.announcement, 1);
+        return root_1hsoevch;
+    })();
+}
+export default Object.assign(template, { toggle: DYNAMIC_ISLAND_TOGGLE });

package/build/components/dynamic-island/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.dynamic-island{--background:var(--color-text-500);--color:var(--color-white-300);--content-delay:80ms;--content-duration:.25s;--content-exit-duration:.12s;--ease-out:cubic-bezier(.23, 1, .32, 1);--focus-ring-color:var(--color-white-300);--idle-height:42px;--idle-radius:21px;--idle-width:156px;--max-width:calc(100vw - 2rem);--morph-duration:.7s;--morph-easing:linear(0, .0234, .0831, .1661, .2617, .3622, .4617, .5561, .6426, .7198, .7869, .8439, .8913, .9297, .96, .9833, 1.0005, 1.0127, 1.0208, 1.0257, 1.0279, 1.0283, 1.0273, 1.0254, 1.023, 1.0202, 1.0173, 1.0145, 1.0119, 1.0095, 1.0074, 1.0056, 1.004, 1.0028, 1.0017, 1.0009, 1.0003, .9999, .9996, .9994, 1);--music-height:100px;--music-radius:36px;--music-width:390px;--ring-height:46px;--ring-radius:23px;--ring-width:220px;--shape-height:var(--idle-height);--shape-radius:var(--idle-radius);--shape-width:var(--idle-width);--spring:linear(0, .0575, .1803, .3208, .4551, .5729, .6711, .7501, .8122, .8601, .8966, .924, .9445, .9596, .9708, .9789, .9848, .9891, .9922, .9944, .996, .9972, .998, .9986, 1);--timer-height:46px;--timer-radius:23px;--timer-width:260px}.dynamic-island--idle{--shape-height:var(--idle-height);--shape-radius:var(--idle-radius);--shape-width:var(--idle-width)}.dynamic-island--music{--shape-height:var(--music-height);--shape-radius:var(--music-radius);--shape-width:var(--music-width)}.dynamic-island--ring{--shape-height:var(--ring-height);--shape-radius:var(--ring-radius);--shape-width:var(--ring-width)}.dynamic-island--timer{--shape-height:var(--timer-height);--shape-radius:var(--timer-radius);--shape-width:var(--timer-width)}.dynamic-island{height:max(var(--idle-height), var(--music-height), var(--ring-height), var(--timer-height));justify-content:center;width:100%;display:flex;position:relative}.dynamic-island-artist{color:oklch(from var(--color) l c h/.6);text-overflow:ellipsis;white-space:nowrap;font-size:14px;overflow:hidden}.dynamic-island-bell{transform-origin:50% 15%}.dynamic-island-content{box-sizing:border-box;filter:blur(4px);height:var(--height);max-width:var(--max-width);opacity:0;pointer-events:none;transition:filter var(--content-exit-duration) var(--ease-out), opacity var(--content-exit-duration) var(--ease-out), scale 0s var(--content-exit-duration), visibility 0s var(--content-exit-duration);visibility:hidden;width:var(--width);align-items:center;gap:16px;margin:0 auto;padding:0 18px;display:flex;position:absolute;top:0;left:0;right:0;scale:.95}.dynamic-island-content--idle{--height:var(--idle-height);--width:var(--idle-width)}.dynamic-island-content--music{--height:var(--music-height);--width:var(--music-width)}.dynamic-island-content--ring{--height:var(--ring-height);--width:var(--ring-width)}.dynamic-island-content--timer{--height:var(--timer-height);--width:var(--timer-width)}.dynamic-island-content--music{padding:0 24px}.dynamic-island-content.--active{filter:blur();opacity:1;pointer-events:auto;transition:filter var(--content-duration) var(--ease-out) var(--content-delay), opacity var(--content-duration) var(--ease-out) var(--content-delay), scale var(--content-duration) var(--ease-out) var(--content-delay);visibility:visible;scale:1}.dynamic-island-content--ring.--active .dynamic-island-bell{animation:.6s ease-in-out .15s dynamic-island-bell}.dynamic-island-eq{align-items:flex-end;gap:4px;height:20px;display:flex}.dynamic-island-eq span{background:var(--color);height:100%;scale:1 var(--rest);transform-origin:bottom;border-radius:999px;width:4px;animation:ease-in-out infinite alternate dynamic-island-eq}.dynamic-island-eq.--paused span{animation-play-state:paused}.dynamic-island-icon{flex-shrink:0;width:20px;height:20px}.dynamic-island-label{margin-left:auto;font-size:14px;font-weight:500}.dynamic-island-lens{background:oklch(from var(--color) l c h/.15);border-radius:999px;width:12px;height:12px;margin-left:auto}.dynamic-island-pause,.dynamic-island-play{height:20px;transition:filter .3s var(--spring), opacity .3s var(--spring), scale .3s var(--spring);grid-area:1/1;width:20px}.dynamic-island-pause,.dynamic-island-toggle.--playing .dynamic-island-play{filter:blur(4px);opacity:0;scale:.25}.dynamic-island-toggle.--playing .dynamic-island-pause{filter:blur();opacity:1;scale:1}.dynamic-island-pill{background:var(--background);border-radius:var(--shape-radius);color:var(--color);height:var(--shape-height);max-width:var(--max-width);transition:border-radius var(--morph-duration) var(--morph-easing), height var(--morph-duration) var(--morph-easing), width var(--morph-duration) var(--morph-easing);width:var(--shape-width);position:relative;overflow:hidden}.dynamic-island-sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.dynamic-island-time{font-variant-numeric:tabular-nums;margin-left:auto;font-size:15px;font-weight:600}.dynamic-island-title{text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:600;overflow:hidden}.dynamic-island-toggle{color:inherit;cursor:pointer;touch-action:manipulation;background:0 0;border:0;border-radius:999px;outline:none;flex-shrink:0;place-items:center;width:44px;height:44px;margin-right:-6px;padding:0;transition:background-color .15s ease-out,scale .15s ease-out;display:grid}.dynamic-island-toggle:active{scale:.96}.dynamic-island-toggle:focus-visible{outline:2px solid var(--focus-ring-color)}.dynamic-island-toggle:hover{background:oklch(from var(--color) l c h/.1)}.dynamic-island-track{flex-direction:column;flex:1;min-width:0;display:flex}@media (prefers-reduced-motion:reduce){.dynamic-island{--morph-duration:.3s;--morph-easing:var(--spring)}.dynamic-island-content,.dynamic-island-content.--active,.dynamic-island-pause,.dynamic-island-toggle.--playing .dynamic-island-play{filter:none;scale:1}.dynamic-island-content--ring.--active .dynamic-island-bell,.dynamic-island-eq span{animation:none}.dynamic-island-toggle{transition:background-color .15s ease-out}}@keyframes dynamic-island-bell{0%,to{rotate:0deg}20%{rotate:-16deg}40%{rotate:13deg}60%{rotate:-9deg}80%{rotate:5deg}}@keyframes dynamic-island-eq{0%{scale:1 .3}to{scale:1}}}
+/*$vite$:1*/

package/build/components/email-typo-fix/index.d.ts

@@ -0,0 +1,28 @@
+import { type Attributes, type Renderable } from '@esportsplus/template';
+import input from '../input/index.js';
+import './scss/index.scss';
+type A = Attributes & {
+    [EMAIL_TYPO_FIX_FIELD]?: Field;
+    hint?: Renderable<unknown>;
+    label?: Renderable<unknown>;
+    placeholder?: string;
+    state?: State;
+    value?: string;
+};
+type D = Attributes & Pick<A, typeof EMAIL_TYPO_FIX_FIELD>;
+type Field = Parameters<typeof input>[0];
+type State = {
+    active: boolean;
+    error: string;
+    sent: string;
+    value: string;
+};
+declare const EMAIL_TYPO_FIX_FIELD: unique symbol;
+declare function suggest(email: string): string | null;
+declare const _default: ((this: {
+    attributes?: D;
+} | void, { hint, label, placeholder, value, state, ...attributes }: A) => DocumentFragment | Text) & {
+    readonly field: typeof EMAIL_TYPO_FIX_FIELD;
+    readonly suggest: typeof suggest;
+};
+export default _default;