@esportsplus/ui 0.54.0 → 0.56.2

package/build/components/settings/index.js

@@ -0,0 +1,147 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect } from '@esportsplus/reactivity';
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import icon from '../icon/index.js';
+import modal from '../modal/index.js';
+import close from './svg/close.svg';
+import saved from './svg/saved.svg';
+import './scss/index.scss';
+const template_1x2e5bs3 = template_u1.template(`<div class='settings-panel'><nav class='settings-nav --scrollbar'></nav><div class='settings-main'><div class='settings-header'><h2 class='settings-title'></h2><button class='settings-close' type='button'></button></div><div class='settings-body'><!--$--><div class='settings-fade ' aria-hidden='true'></div></div></div></div><div class='settings-saved ' aria-live='polite'><!--$-->`);
+const template_1x2e5bsd = template_u1.template(`<div class='settings-group'><div class='settings-group-label'>`);
+const template_1x2e5bsh = template_u1.template(`<button class='settings-item' type='button'><!--$--><span class='settings-item-label'>`);
+const template_1x2e5bsm = template_u1.template(`<div class='settings-content --scrollbar'>`);
+class ReactiveObject_1x2e5bs0 extends reactivity_u0.ReactiveObject {
+    #saved = this[reactivity_u0.SIGNAL]('hidden');
+    #scrolled = this[reactivity_u0.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get saved() {
+        return reactivity_u0.read(this.#saved);
+    }
+    set saved(_v0) {
+        reactivity_u0.write(this.#saved, _v0);
+    }
+    get scrolled() {
+        return reactivity_u0.read(this.#scrolled);
+    }
+    set scrolled(_v1) {
+        reactivity_u0.write(this.#scrolled, _v1);
+    }
+}
+class ReactiveObject_1x2e5bs1 extends reactivity_u0.ReactiveObject {
+    #active;
+    #saved;
+    #selected;
+    constructor(_p0, _p1, _p2) {
+        super(null);
+        this.#active = this[reactivity_u0.SIGNAL](_p0);
+        this.#saved = this[reactivity_u0.SIGNAL](_p1);
+        this.#selected = this[reactivity_u0.SIGNAL](_p2);
+    }
+    get active() {
+        return reactivity_u0.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_u0.write(this.#active, _v0);
+    }
+    get saved() {
+        return reactivity_u0.read(this.#saved);
+    }
+    set saved(_v1) {
+        reactivity_u0.write(this.#saved, _v1);
+    }
+    get selected() {
+        return reactivity_u0.read(this.#selected);
+    }
+    set selected(_v2) {
+        reactivity_u0.write(this.#selected, _v2);
+    }
+}
+const SAVED_DURATION = 2000;
+const SAVED_EXIT = 220;
+export default component(function ({ groups, labels = {}, state, ...attributes }) {
+    let pages = {};
+    for (let i = 0, n = groups.length; i < n; i++) {
+        let items = groups[i].items;
+        for (let j = 0, m = items.length; j < m; j++) {
+            let item = items[j];
+            if (item.id !== undefined && item.render) {
+                pages[item.id] ??= item;
+            }
+        }
+    }
+    let local = new ReactiveObject_1x2e5bs0(), s = state ?? new ReactiveObject_1x2e5bs1(false, false, Object.keys(pages)[0]), stop, timer, title = labels.title ?? 'Settings';
+    return modal.call({ attributes: { class: 'settings' } }, { 'aria-label': title, ...attributes, state: s }, (() => {
+        let root_1x2e5bs2 = template_1x2e5bs3(), element_1x2e5bs4 = root_1x2e5bs2.firstChild, element_1x2e5bs5 = element_1x2e5bs4.firstElementChild, element_1x2e5bs6 = element_1x2e5bs5.nextElementSibling.firstElementChild.firstElementChild, element_1x2e5bs7 = element_1x2e5bs6.nextElementSibling, element_1x2e5bs8 = element_1x2e5bs5.nextElementSibling.firstElementChild.nextElementSibling.firstChild, element_1x2e5bs9 = element_1x2e5bs5.nextElementSibling.firstElementChild.nextElementSibling.firstElementChild, element_1x2e5bsa = element_1x2e5bs4.nextSibling, element_1x2e5bsb = element_1x2e5bsa.firstChild;
+        template_u1.onconnect(element_1x2e5bs4, () => {
+            stop = effect(() => {
+                if (!s.active) {
+                    clearTimeout(timer);
+                    local.saved = 'hidden';
+                    return;
+                }
+                if (!s.saved) {
+                    return;
+                }
+                s.saved = false;
+                local.saved = 'shown';
+                clearTimeout(timer);
+                timer = setTimeout(() => {
+                    local.saved = 'leaving';
+                    timer = setTimeout(() => local.saved = 'hidden', SAVED_EXIT);
+                }, SAVED_DURATION);
+            });
+        });
+        template_u1.ondisconnect(element_1x2e5bs4, () => {
+            clearTimeout(timer);
+            stop?.();
+        });
+        template_u1.setProperty(element_1x2e5bs5, 'aria-label', template_u1.interpolate([(title), " sections"]));
+        template_u1.slot(element_1x2e5bs5, groups.map(({ items, label }) => {
+            let root_1x2e5bsc = template_1x2e5bsd(), element_1x2e5bse = root_1x2e5bsc.firstChild.firstElementChild, element_1x2e5bsf = root_1x2e5bsc.firstChild;
+            template_u1.slot(element_1x2e5bse, label, 1);
+            template_u1.slot(element_1x2e5bsf, items.map(({ content, icon: href, id, render, ...item }) => {
+                let root_1x2e5bsg = template_1x2e5bsh(), element_1x2e5bsi = root_1x2e5bsg.firstChild, element_1x2e5bsj = element_1x2e5bsi.firstChild, element_1x2e5bsk = element_1x2e5bsi.firstElementChild;
+                template_u1.setProperties(element_1x2e5bsi, item);
+                template_u1.setProperty(element_1x2e5bsi, 'aria-current', () => render && s.selected === id && 'page');
+                template_u1.setList(element_1x2e5bsi, 'class', () => render && s.selected === id && '--active');
+                template_u1.delegate(element_1x2e5bsi, 'click', () => {
+                    if (!render || id === undefined) {
+                        return;
+                    }
+                    local.scrolled = false;
+                    s.selected = id;
+                });
+                template_u1.slot(element_1x2e5bsj, href && icon({ 'aria-hidden': 'true', class: 'settings-item-icon' }, href));
+                template_u1.slot(element_1x2e5bsk, content, 1);
+                return root_1x2e5bsg;
+            }), 2);
+            return root_1x2e5bsc;
+        }), 1);
+        new template_u1.EffectSlot(element_1x2e5bs6, () => pages[s.selected]?.content, 1);
+        template_u1.setProperty(element_1x2e5bs7, 'aria-label', labels.close ?? `Close ${title.toLowerCase()}`);
+        template_u1.delegate(element_1x2e5bs7, 'click', () => {
+            s.active = false;
+        });
+        template_u1.slot(element_1x2e5bs7, icon({ 'aria-hidden': 'true' }, close), 1);
+        new template_u1.EffectSlot(element_1x2e5bs8, () => {
+            let id = s.selected;
+            return (() => {
+                let root_1x2e5bsl = template_1x2e5bsm(), element_1x2e5bsn = root_1x2e5bsl.firstChild;
+                template_u1.setProperty(element_1x2e5bsn, 'data-page', id);
+                template_u1.on(element_1x2e5bsn, 'scroll', (e) => {
+                    local.scrolled = e.currentTarget.scrollTop > 0;
+                });
+                template_u1.slot(element_1x2e5bsn, pages[id]?.render?.(), 1);
+                return root_1x2e5bsl;
+            })();
+        });
+        template_u1.setList(element_1x2e5bs9, 'class', () => local.scrolled && '--active');
+        template_u1.setList(element_1x2e5bsa, 'class', () => `--${local.saved}`);
+        template_u1.slot(element_1x2e5bsb, icon({ 'aria-hidden': 'true', class: 'settings-saved-icon' }, saved));
+        template_u1.slot(element_1x2e5bsa, labels.saved ?? 'Saved', 2);
+        return root_1x2e5bs2;
+    })());
+});

package/build/components/settings/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.settings{--backdrop:color-mix(in srgb, var(--color-black-500) 50%, transparent);--blur:4px;--font-size-small:13px;--height:614px;--margin-horizontal:var(--size-400);--max-width:871px;--padding:32px;--rail-width:274px;--radius:24px;--saved:oklch(64.8% .2 131.684);--scale:.85;--separator:var(--color-border-300);--surface:var(--color-white-300);--surface-muted:var(--color-grey-500);--surface-rail:var(--color-grey-400);--text:var(--color-text-500);--text-muted:var(--color-text-300);--transition-duration:.3s;--transition-timing-function:cubic-bezier(.32, .72, 0, 1);--translateY:0px}.settings-panel{--font-size:14px;--transition-duration:.16s;--transition-timing-function:cubic-bezier(.4, 0, .2, 1)}.settings-card{--background:var(--surface-rail);--border-radius:var(--border-radius-700)}.settings-field{--background:var(--surface-muted);--border-radius:var(--border-radius-500);--width:202px}.settings-item{--background:transparent;--background-active:var(--surface-muted);--background-hover:color-mix(in srgb, var(--surface-muted) 60%, transparent);--border-radius:var(--border-radius-500)}dialog.settings{overflow:visible}.settings{filter:blur();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)}.settings:not(.--active){filter:blur(var(--blur))}.settings-body{flex:auto;min-height:0;position:relative}.settings-card{background:var(--background);border-radius:var(--border-radius);flex-direction:column;width:100%;padding-left:12px;display:flex}.settings-close{background:var(--surface-muted);color:var(--text-muted);cursor:pointer;height:24px;transition:background var(--transition-duration) var(--transition-timing-function);border:0;border-radius:100%;outline:none;flex:none;justify-content:center;align-items:center;width:24px;padding:0;display:flex}.settings-close .icon{--size:16px}.settings-close:hover{background:var(--color-border-300)}.settings-close:focus-visible{box-shadow:0 0 0 2px var(--color-primary-400,var(--color-blue-400))}.settings-content{height:100%;padding:0 var(--padding) var(--padding);overflow-y:auto}.settings-fade{background:linear-gradient(to bottom, var(--surface), transparent);opacity:0;pointer-events:none;height:40px;transition:opacity .2s ease-out;position:absolute;inset:0 0 auto}.settings-fade.--active{opacity:1}.settings-field{background:var(--background);border-radius:var(--border-radius);color:var(--text);text-overflow:ellipsis;white-space:nowrap;height:32px;width:var(--width);flex:none;padding:0 6px 0 10px;line-height:32px;overflow:hidden}.settings-field--muted{color:var(--text-muted)}.settings-group{flex-direction:column;gap:4px;padding-top:4px;display:flex}.settings-group-label{color:var(--text-muted);font-weight:var(--font-weight-500);margin-bottom:2px;padding-left:8px}.settings-header{padding:var(--padding) var(--padding) 12px;flex:none;justify-content:space-between;align-items:center;display:flex}.settings-item{background:var(--background);border-radius:var(--border-radius);color:var(--text-muted);cursor:pointer;font:inherit;font-weight:var(--font-weight-500);text-align:left;transition:background var(--transition-duration) var(--transition-timing-function), color var(--transition-duration) var(--transition-timing-function);border:0;outline:none;align-items:center;gap:8px;width:100%;padding:8px;display:flex}.settings-item.--active{--background:var(--background-active);color:var(--text)}.settings-item:not(.--active):hover{--background:var(--background-hover)}.settings-item:focus-visible{box-shadow:inset 0 0 0 2px var(--color-primary-400,var(--color-blue-400))}.settings-item-icon{--size:20px;color:var(--text-muted)}.settings-item-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.settings-main{flex-direction:column;flex:auto;min-width:0;display:flex}.settings-nav{background:var(--surface-rail);border-right:var(--border-width-400) solid var(--separator);flex:0 0 var(--rail-width);flex-direction:column;gap:20px;padding:10px;display:flex;overflow-y:auto}.settings-page{flex-direction:column;gap:24px;width:100%;display:flex}.settings-panel{background:var(--surface);border-radius:var(--radius);box-shadow:var(--box-shadow-100);color:var(--text);font-size:var(--font-size);height:var(--height);max-height:calc(100dvh - var(--margin-horizontal) * 2);outline:none;width:100%;line-height:1.43;display:flex;overflow:clip}.settings-row{border-bottom:var(--border-width-400) solid var(--separator);justify-content:space-between;align-items:center;gap:16px;width:100%;min-height:52px;padding:10px 10px 10px 0;display:flex}.settings-row:last-child{border-bottom:0}.settings-row-description{color:var(--text-muted);font-size:var(--font-size-small)}.settings-row-label{color:var(--text);flex-direction:column;min-width:0;display:flex}.settings-saved{background:var(--surface);border:var(--border-width-400) solid var(--separator);box-shadow:var(--box-shadow-300);color:var(--text);font-size:var(--font-size-small);font-weight:var(--font-weight-500);pointer-events:none;white-space:nowrap;z-index:1;border-radius:999px;align-items:center;gap:4px;padding:4px 10px 4px 6px;transition:filter .2s ease-out,opacity .2s ease-out,scale .2s ease-out,translate .2s ease-out;display:flex;position:absolute;bottom:0;left:50%}.settings-saved.--hidden,.settings-saved.--leaving{filter:blur(2px);opacity:0;scale:.9}.settings-saved.--hidden{translate:-50% calc(50% + 12px)}.settings-saved.--leaving{translate:-50% calc(50% - 10px)}.settings-saved.--shown{translate:-50% 50%}.settings-saved-icon{--size:16px;color:var(--saved)}.settings-section{flex-direction:column;gap:8px;width:100%;display:flex}.settings-section-description{color:var(--color-text-300);font-size:var(--font-size-small);opacity:.8;padding:0 12px}.settings-section-label{color:var(--text-muted);font-size:var(--font-size-small);font-weight:var(--font-weight-500);padding:0 12px}.settings-title{--font-size:20px;--font-weight:var(--font-weight-500);color:var(--text);font-size:var(--font-size);font-weight:var(--font-weight);margin:0;line-height:1.4}@media (prefers-reduced-motion:reduce){.settings,.settings-fade,.settings-saved{transition:none}}}
+/*$vite$:1*/

package/build/components/settings/svg/close.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"/></svg>

package/build/components/settings/svg/saved.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM17.4571 9.45711L11 15.9142L6.79289 11.7071L8.20711 10.2929L11 13.0858L16.0429 8.04289L17.4571 9.45711Z"/></svg>

package/build/components/share-button/index.d.ts

@@ -0,0 +1,29 @@
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    [SHARE_BUTTON_TARGET]?: Attributes;
+    [SHARE_BUTTON_TRIGGER]?: Attributes;
+    onconnect?: never;
+    ondisconnect?: never;
+    ondocumentkeydown?: never;
+    ondocumentpointerdown?: never;
+    onkeydown?: never;
+    onpointerdown?: never;
+    state?: State;
+    text?: string;
+    title: string;
+    url: string;
+};
+type State = {
+    copied: boolean;
+    open: boolean;
+};
+declare const SHARE_BUTTON_TARGET: unique symbol;
+declare const SHARE_BUTTON_TRIGGER: unique symbol;
+declare const _default: ((this: {
+    attributes?: Partial<A>;
+} | void, { state, text, title, url, ...attributes }: A) => DocumentFragment | Text) & {
+    readonly target: typeof SHARE_BUTTON_TARGET;
+    readonly trigger: typeof SHARE_BUTTON_TRIGGER;
+};
+export default _default;

package/build/components/share-button/index.js

@@ -0,0 +1,191 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect } from '@esportsplus/reactivity';
+import { write } from '../clipboard/index.js';
+import './scss/index.scss';
+const template_0ttrset2 = template_u1.template(`<div class='share-button'><button aria-expanded='false' class='button share-button-face share-button-trigger' type='button'><svg class='share-button-icon' viewBox='0 0 16 16'><path d='M8 9.5V2.5M5.25 5.25 8 2.5l2.75 2.75M3.5 8v4.5a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V8' /></svg></button><div class='share-button-face share-button-targets' role='group'><button class='button share-button-target share-button-copy ' type='button'><span class='share-button-swap'><svg class='share-button-icon share-button-icon--link' viewBox='0 0 16 16'><path d='M6.25 9.75l3.5-3.5M7 4.25l1.05-1.05a3.25 3.25 0 0 1 4.6 4.6L11.6 8.85M9 11.75l-1.05 1.05a3.25 3.25 0 0 1-4.6-4.6L4.4 7.15' /></svg><svg class='share-button-icon share-button-icon--check' viewBox='0 0 16 16'><path d='M3.5 8.25l3 3 6-6.5' /></svg></span><span class='share-button-copied' hidden>Copied</span></button><a aria-label='Post on X' class='button share-button-target' rel='noreferrer' target='_blank'><svg class='share-button-icon share-button-icon--x' viewBox='0 0 24 24'><path d='M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z' /></svg></a><a aria-label='Email' class='button share-button-target'><svg class='share-button-icon' viewBox='0 0 16 16'><rect x='2.25' y='3.75' width='11.5' height='8.5' rx='1.75' /><path d='M2.75 5.25 8 9l5.25-3.75' /></svg></a><!--$--><span aria-hidden='true' class='share-button-divider'></span><button aria-label='Close' class='button share-button-target share-button-close' type='button'><svg class='share-button-icon' viewBox='0 0 16 16'><path d='M4.5 4.5l7 7M11.5 4.5l-7 7' /></svg></button></div><span aria-live='polite' class='share-button-live'>`);
+const template_0ttrsetd = template_u1.template(`<button aria-label='More ways to share' class='button share-button-target' type='button'><svg class='share-button-icon' viewBox='0 0 16 16'><path d='M3.75 8h.01M8 8h.01M12.25 8h.01' stroke-width='2.25' />`);
+class ReactiveObject_0ttrset0 extends reactivity_u0.ReactiveObject {
+    #copied = this[reactivity_u0.SIGNAL](false);
+    #open = this[reactivity_u0.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get copied() {
+        return reactivity_u0.read(this.#copied);
+    }
+    set copied(_v0) {
+        reactivity_u0.write(this.#copied, _v0);
+    }
+    get open() {
+        return reactivity_u0.read(this.#open);
+    }
+    set open(_v1) {
+        reactivity_u0.write(this.#open, _v1);
+    }
+}
+const COPIED_FOR = 1800;
+const EASE_OUT = 'cubic-bezier(0.23, 1, 0.32, 1)';
+const SHARE_BUTTON_TARGET = Symbol.for('@esportsplus/ui/share-button.target');
+const SHARE_BUTTON_TRIGGER = Symbol.for('@esportsplus/ui/share-button.trigger');
+const SPRING = 'linear(0, 0.057, 0.18, 0.321, 0.455, 0.573, 0.671, 0.75, 0.812, 0.86, 0.896, 0.924, 0.944, 0.96, 0.971, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1)';
+function reduced() {
+    return matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+export default Object.assign(function ({ state = new ReactiveObject_0ttrset0(), text = 'Share', title, url, ...attributes }) {
+    let animations = [], encodedTitle = encodeURIComponent(title), encodedUrl = encodeURIComponent(url), keys = false, native = typeof navigator !== 'undefined' && typeof navigator.share === 'function', stop, timer;
+    function copied(element, value) {
+        let word = element.querySelector('.share-button-copied');
+        if (!word) {
+            return;
+        }
+        let from = word.hidden ? '0px' : getComputedStyle(word).width;
+        word.getAnimations().forEach((animation) => animation.cancel());
+        word.hidden = false;
+        let to = value ? `${word.scrollWidth}px` : '0px';
+        if (reduced()) {
+            word.hidden = !value;
+            return;
+        }
+        let animation = word.animate([
+            { filter: value ? 'blur(4px)' : 'blur(0px)', opacity: value ? 0 : 1, width: from },
+            { filter: value ? 'blur(0px)' : 'blur(4px)', opacity: value ? 1 : 0, width: to }
+        ], { duration: 400, easing: SPRING });
+        if (!value) {
+            animation.finished.then(() => {
+                word.hidden = true;
+            }, () => { });
+        }
+    }
+    async function copy() {
+        if (!(await write(url))) {
+            return;
+        }
+        clearTimeout(timer);
+        state.copied = true;
+        timer = setTimeout(() => {
+            state.copied = false;
+        }, COPIED_FOR);
+    }
+    function reshape(root, open) {
+        let enter = root.querySelector(open ? '.share-button-targets' : '.share-button-trigger'), from = getComputedStyle(root).width, leave = root.querySelector(open ? '.share-button-trigger' : '.share-button-targets');
+        if (!enter || !leave) {
+            return;
+        }
+        for (let animation of animations) {
+            animation.cancel();
+        }
+        animations = [];
+        enter.classList.remove('share-button-face--leaving');
+        enter.hidden = false;
+        enter.inert = false;
+        leave.inert = true;
+        if (reduced()) {
+            leave.hidden = true;
+            return;
+        }
+        leave.classList.add('share-button-face--leaving');
+        let fade = leave.animate([{}, { filter: 'blur(4px)', opacity: 0 }], { duration: 100, easing: EASE_OUT, fill: 'forwards' }), to = getComputedStyle(root).width;
+        fade.finished.then(() => {
+            leave.classList.remove('share-button-face--leaving');
+            leave.hidden = true;
+            fade.cancel();
+        }, () => { });
+        animations.push(fade, enter.animate([{ filter: 'blur(4px)', opacity: 0 }, { filter: 'blur(0px)', opacity: 1 }], { delay: open ? 60 : 80, duration: 200, easing: EASE_OUT, fill: 'backwards' }), root.animate([{ width: from }, { width: to }], { duration: 400, easing: SPRING }));
+    }
+    function toggle(root, open) {
+        clearTimeout(timer);
+        state.copied = false;
+        state.open = open;
+        if (!keys) {
+            return;
+        }
+        requestAnimationFrame(() => {
+            root.querySelector(open ? '.share-button-target' : '.share-button-trigger')?.focus();
+        });
+    }
+    return (() => {
+        let root_0ttrset1 = template_0ttrset2(), element_0ttrset3 = root_0ttrset1.firstChild, element_0ttrset4 = element_0ttrset3.firstElementChild, element_0ttrset5 = element_0ttrset4.nextElementSibling, element_0ttrset6 = element_0ttrset5.firstElementChild, element_0ttrset7 = element_0ttrset6.nextElementSibling, element_0ttrset8 = element_0ttrset7.nextElementSibling, element_0ttrset9 = element_0ttrset5.firstChild.nextSibling.nextSibling.nextSibling, element_0ttrseta = element_0ttrset8.nextElementSibling.nextElementSibling, element_0ttrsetb = element_0ttrset5.nextElementSibling;
+        template_u1.setProperties(element_0ttrset3, this?.attributes);
+        template_u1.setProperties(element_0ttrset3, attributes);
+        template_u1.onconnect(element_0ttrset3, (element) => {
+            let open = state.open, wasCopied = state.copied;
+            stop = effect(() => {
+                if (state.open !== open) {
+                    open = state.open;
+                    reshape(element, open);
+                }
+                if (state.copied !== wasCopied) {
+                    wasCopied = state.copied;
+                    copied(element, wasCopied);
+                }
+            });
+        });
+        template_u1.ondisconnect(element_0ttrset3, () => {
+            clearTimeout(timer);
+            stop?.();
+            for (let animation of animations) {
+                animation.cancel();
+            }
+        });
+        template_u1.ondocument(element_0ttrset3, 'keydown', function (e) {
+            if (e.key !== 'Escape' || !state.open) {
+                return;
+            }
+            keys = true;
+            toggle(this, false);
+        });
+        template_u1.ondocument(element_0ttrset3, 'pointerdown', function (e) {
+            if (!state.open || this.contains(e.target)) {
+                return;
+            }
+            toggle(this, false);
+        });
+        template_u1.delegate(element_0ttrset3, 'keydown', () => {
+            keys = true;
+        });
+        template_u1.delegate(element_0ttrset3, 'pointerdown', () => {
+            keys = false;
+        });
+        template_u1.setProperty(element_0ttrset4, 'hidden', state.open);
+        template_u1.delegate(element_0ttrset4, 'click', function () {
+            let root = this.closest('.share-button');
+            if (root) {
+                toggle(root, true);
+            }
+        });
+        template_u1.setProperties(element_0ttrset4, this?.attributes?.[SHARE_BUTTON_TRIGGER]);
+        template_u1.setProperties(element_0ttrset4, attributes[SHARE_BUTTON_TRIGGER]);
+        template_u1.slot(element_0ttrset4, text, 2);
+        template_u1.setProperty(element_0ttrset5, 'aria-label', template_u1.interpolate(["Share ", (title)]));
+        template_u1.setProperty(element_0ttrset5, 'hidden', !state.open);
+        template_u1.setList(element_0ttrset6, 'class', () => state.copied && '--active');
+        template_u1.setProperty(element_0ttrset6, 'aria-label', () => state.copied ? 'Link copied' : 'Copy link');
+        template_u1.delegate(element_0ttrset6, 'click', copy);
+        template_u1.setProperties(element_0ttrset6, this?.attributes?.[SHARE_BUTTON_TARGET]);
+        template_u1.setProperties(element_0ttrset6, attributes[SHARE_BUTTON_TARGET]);
+        template_u1.setProperty(element_0ttrset7, 'href', template_u1.interpolate(["https://x.com/intent/post?text=", (encodedTitle), "&url=", (encodedUrl)]));
+        template_u1.setProperties(element_0ttrset7, this?.attributes?.[SHARE_BUTTON_TARGET]);
+        template_u1.setProperties(element_0ttrset7, attributes[SHARE_BUTTON_TARGET]);
+        template_u1.setProperty(element_0ttrset8, 'href', template_u1.interpolate(["mailto:?subject=", (encodedTitle), "&body=", (encodedUrl)]));
+        template_u1.setProperties(element_0ttrset8, this?.attributes?.[SHARE_BUTTON_TARGET]);
+        template_u1.setProperties(element_0ttrset8, attributes[SHARE_BUTTON_TARGET]);
+        template_u1.slot(element_0ttrset9, native && (() => {
+            let root_0ttrsetc = template_0ttrsetd(), element_0ttrsete = root_0ttrsetc.firstChild;
+            template_u1.delegate(element_0ttrsete, 'click', () => {
+                navigator.share({ title, url }).catch(() => { });
+            });
+            template_u1.setProperties(element_0ttrsete, this?.attributes?.[SHARE_BUTTON_TARGET]);
+            template_u1.setProperties(element_0ttrsete, attributes[SHARE_BUTTON_TARGET]);
+            return root_0ttrsetc;
+        })());
+        template_u1.delegate(element_0ttrseta, 'click', function () {
+            let root = this.closest('.share-button');
+            if (root) {
+                toggle(root, false);
+            }
+        });
+        new template_u1.EffectSlot(element_0ttrsetb, () => state.copied ? 'Link copied' : '', 1);
+        return root_0ttrset1;
+    })();
+}, { target: SHARE_BUTTON_TARGET, trigger: SHARE_BUTTON_TRIGGER });

package/build/components/share-button/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.share-button{--share-button-background:var(--color-white-300);--share-button-box-shadow:0 0 0 1px color-mix(in oklab, var(--color-black-300) 6%, transparent), 0 1px 2px color-mix(in oklab, var(--color-black-300) 6%, transparent), 0 6px 16px -6px color-mix(in oklab, var(--color-black-300) 12%, transparent);--share-button-color:var(--color-text-500);--share-button-color-muted:var(--color-text-300);--share-button-divider-color:var(--color-border-300);--share-button-ease:cubic-bezier(.23, 1, .32, 1);--share-button-focus-color:color-mix(in oklab, var(--color-text-500) 38%, transparent);--share-button-font-size:14px;--share-button-height:44px;--share-button-icon-size:16px;--share-button-scale-pressed:.96;--share-button-target-background-hover:var(--color-grey-400);--share-button-target-size:36px}.share-button--surface{--share-button-background:var(--color-grey-400);--share-button-target-background-hover:var(--color-white-300)}.share-button{background:var(--share-button-background);box-shadow:var(--share-button-box-shadow);height:var(--share-button-height);border-radius:999px;align-items:center;display:inline-flex;position:relative;overflow:hidden}.share-button-copied{font-size:13px;font-weight:var(--font-weight-500);white-space:nowrap;overflow:hidden}.share-button-close.button{--color-default:var(--share-button-color-muted);--color-hover:var(--share-button-color)}.share-button-divider{background:var(--share-button-divider-color);flex-shrink:0;width:1px;height:20px;margin-inline:4px}.share-button-face{flex-shrink:0}.share-button-face[hidden][hidden]{display:none}.share-button-face--leaving{position:absolute;top:0;left:0}.share-button-icon{fill:none;height:var(--share-button-icon-size);stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.4px;width:var(--share-button-icon-size);flex-shrink:0}.share-button-icon--check,.share-button-icon--link{transition:filter .2s var(--share-button-ease), opacity .2s var(--share-button-ease), scale .2s var(--share-button-ease);grid-area:1/1}.share-button-icon--check{filter:blur(4px);opacity:0;scale:.25}.share-button-icon--x{fill:currentColor;stroke:none;width:14px;height:14px}.share-button-live{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.share-button-swap{height:var(--share-button-icon-size);width:var(--share-button-icon-size);place-items:center;display:grid}.share-button-target.button,.share-button-trigger.button{--background-default:transparent;--border-radius:999px;--color-default:var(--share-button-color);--font-size:var(--share-button-font-size);--font-weight:var(--font-weight-500);--line-height:20px;--padding-vertical:0px;border:0;outline:none;flex-shrink:0;text-decoration:none;transition:background-color .15s ease-out,color .15s ease-out,scale .15s ease-out;display:inline-flex}.share-button-target.button:active,.share-button-trigger.button:active{scale:var(--share-button-scale-pressed)}.share-button-target.button:focus-visible,.share-button-trigger.button:focus-visible{outline:2px solid var(--share-button-focus-color);outline-offset:-2px}.share-button-target.button{--background-hover:var(--share-button-target-background-hover);--padding-horizontal:0px;height:var(--share-button-target-size);min-width:var(--share-button-target-size)}.share-button-targets{align-items:center;gap:2px;padding:4px;display:flex}.share-button-target.share-button-copy{--padding-horizontal:10px;gap:6px;width:auto}.share-button-trigger.button{--padding-horizontal:20px;height:var(--share-button-height);gap:8px}.share-button-copy.--active .share-button-icon--check{filter:blur();opacity:1;scale:1}.share-button-copy.--active .share-button-icon--link{filter:blur(4px);opacity:0;scale:.25}@media (prefers-reduced-motion:reduce){.share-button-icon--check,.share-button-icon--link{transition:none}.share-button-target.button,.share-button-trigger.button{transition:background-color .15s ease-out,color .15s ease-out}.share-button-target.button:active,.share-button-trigger.button:active{scale:1}}}
+/*$vite$:1*/

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

@@ -0,0 +1,33 @@
+import * as template_u1 from '@esportsplus/template';
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes<HTMLDialogElement> & {
+    [SHEET_HANDLE]?: Attributes;
+    label?: string;
+    oncancel?: never;
+    onclick?: never;
+    onclose?: never;
+    onconnect?: never;
+    ondisconnect?: never;
+    onpointercancel?: never;
+    onpointerdown?: never;
+    onpointermove?: never;
+    onpointerup?: never;
+    state?: {
+        active: boolean;
+    };
+};
+declare const SHEET_HANDLE: unique symbol;
+declare const _default: {
+    (): template_u1.Renderable<any>;
+    <T extends A>(attributes: T): template_u1.Renderable<any>;
+    <T extends template_u1.Renderable<any>>(content: T): template_u1.Renderable<any>;
+    (attributes: A, content?: template_u1.Renderable<any>): template_u1.Renderable<any>;
+    bind(context: {
+        attributes?: Partial<A> | undefined;
+        content?: template_u1.Renderable<any>;
+    }): any;
+} & {
+    readonly handle: typeof SHEET_HANDLE;
+};
+export default _default;

package/build/components/sheet/index.js

@@ -0,0 +1,110 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect } from '@esportsplus/reactivity';
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import modal from '../modal/index.js';
+import './scss/index.scss';
+const template_0si2o402 = template_u1.template(`<div aria-hidden='true' class='sheet-handle'></div><!--$-->`);
+class ReactiveObject_0si2o400 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 DISMISS_DISTANCE = 0.25;
+const FLICK_VELOCITY = 0.11;
+const SHEET_HANDLE = Symbol.for('@esportsplus/ui/sheet.handle');
+const base = modal.bind({ attributes: { class: 'sheet modal--sheet', tabindex: -1 } });
+const THRESHOLD = 4;
+function inside(element, e) {
+    let rect = element.getBoundingClientRect();
+    return e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom;
+}
+function swallow(e) {
+    e.preventDefault();
+    e.stopPropagation();
+}
+export default Object.assign(component(function ({ label, state = new ReactiveObject_0si2o400(), ...attributes }, content) {
+    let drag = null, stop;
+    function settle(element, close) {
+        element.classList.remove('--dragging');
+        element.style.removeProperty('--progress');
+        element.style.removeProperty('translate');
+        if (close) {
+            state.active = false;
+        }
+    }
+    return base({
+        'aria-label': label,
+        state,
+        ...this?.attributes,
+        ...attributes,
+        class: [this?.attributes?.class, attributes.class].flat(),
+        onpointercancel: (e) => {
+            if (!drag || e.pointerId !== drag.pointer) {
+                return;
+            }
+            drag = null;
+            settle(e.currentTarget, false);
+        },
+        onpointerdown: (e) => {
+            let element = e.currentTarget;
+            if (e.button !== 0 || !state.active || !inside(element, e)) {
+                return;
+            }
+            if (e.target.closest('a, button, input, select, textarea, [contenteditable]')) {
+                return;
+            }
+            drag = { dy: 0, pointer: e.pointerId, start: performance.now(), y: e.clientY };
+            element.setPointerCapture(e.pointerId);
+            element.classList.add('--dragging');
+        },
+        onpointermove: (e) => {
+            if (!drag || e.pointerId !== drag.pointer) {
+                return;
+            }
+            let element = e.currentTarget, dy = e.clientY - drag.y;
+            if (dy < 0) {
+                dy = -Math.pow(-dy, 0.7);
+            }
+            drag.dy = dy;
+            element.style.setProperty('--progress', String(Math.max(dy, 0) / element.offsetHeight));
+            element.style.translate = `0 ${dy}px`;
+        },
+        onpointerup: (e) => {
+            if (!drag || e.pointerId !== drag.pointer) {
+                return;
+            }
+            let element = e.currentTarget, { dy, start } = drag, velocity = dy / (performance.now() - start);
+            drag = null;
+            if (Math.abs(dy) > THRESHOLD) {
+                addEventListener('click', swallow, true);
+                setTimeout(() => removeEventListener('click', swallow, true));
+            }
+            settle(element, dy > element.offsetHeight * DISMISS_DISTANCE || velocity > FLICK_VELOCITY);
+        }
+    }, (() => {
+        let root_0si2o401 = template_0si2o402(), element_0si2o403 = root_0si2o401.firstChild, element_0si2o404 = element_0si2o403.nextSibling;
+        template_u1.setProperties(element_0si2o403, this?.attributes?.[SHEET_HANDLE]);
+        template_u1.setProperties(element_0si2o403, attributes[SHEET_HANDLE]);
+        template_u1.onconnect(element_0si2o403, (element) => {
+            let dialog = element.parentElement;
+            stop = effect(() => {
+                if (state.active) {
+                    queueMicrotask(() => dialog.focus({ preventScroll: true }));
+                }
+            });
+        });
+        template_u1.ondisconnect(element_0si2o403, () => {
+            stop?.();
+        });
+        template_u1.slot(element_0si2o404, content);
+        return root_0si2o401;
+    })());
+}), { handle: SHEET_HANDLE });

package/build/components/sheet/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.sheet{--background:var(--color-white-300);--backdrop-color:color-mix(in srgb, var(--color-black-500) 40%, transparent);--box-shadow:0 0 0 var(--border-width-400) var(--color-border-300), 0 -8px 40px oklch(from var(--color-black-500) l c h / .15);--close-duration:.3s;--color:var(--color-text-500);--edge-color:var(--color-border-300);--ease:cubic-bezier(.32, .72, 0, 1);--handle-color:var(--color-border-300);--handle-height:6px;--handle-margin:var(--size-500);--handle-width:40px;--open-duration:.5s;--padding-bottom:var(--size-700);--padding-sides:calc(var(--size-400) * 1.5);--padding-top:var(--size-300);--radius:28px;--width:448px}.sheet--full{--radius:var(--border-radius-700);--width:100%}.sheet.modal{--backdrop:var(--backdrop-color);--margin-horizontal:0px;--max-width:var(--width);--transition-duration:var(--open-duration);--transition-timing-function:var(--ease);background:var(--background);border-radius:var(--radius) var(--radius) 0 0;box-shadow:var(--box-shadow);color:var(--color);cursor:grab;padding:var(--padding-top) var(--padding-sides) var(--padding-bottom);touch-action:none;-webkit-user-select:none;user-select:none;outline:none;overflow:visible}.sheet.modal:not(.--active){--transition-duration:var(--close-duration)}.sheet.modal.--active::backdrop{opacity:calc(1 - var(--progress,0))}.sheet.modal.--dragging{cursor:grabbing}.sheet.modal.--dragging,.sheet.modal.--dragging::backdrop{transition:none}.sheet.modal:after{background:inherit;box-shadow:var(--border-width-400) 0 0 var(--edge-color), calc(var(--border-width-400) * -1) 0 0 var(--edge-color);content:"";pointer-events:none;inset-inline:0;height:50vh;position:absolute;top:100%}@media (prefers-reduced-motion:reduce){.sheet.modal::backdrop{transition:opacity var(--transition-duration) var(--transition-timing-function)}}.sheet-handle{background:var(--handle-color);border-radius:var(--handle-height);height:var(--handle-height);margin:0 auto var(--handle-margin);width:var(--handle-width)}}
+/*$vite$:1*/

package/build/components/shiny-text/index.d.ts

@@ -0,0 +1,17 @@
+import * as template_u1 from '@esportsplus/template';
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    width?: number;
+};
+declare const _default: {
+    (): template_u1.Renderable<any>;
+    <T extends A>(attributes: T): template_u1.Renderable<any>;
+    <T extends template_u1.Renderable<any>>(content: T): template_u1.Renderable<any>;
+    (attributes: A, content?: template_u1.Renderable<any>): template_u1.Renderable<any>;
+    bind(context: {
+        attributes?: Partial<A> | undefined;
+        content?: template_u1.Renderable<any>;
+    }): any;
+};
+export default _default;

package/build/components/shiny-text/index.js

@@ -0,0 +1,14 @@
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import './scss/index.scss';
+const template_10y1frs1 = template_u1.template(`<span class='shiny-text'>`);
+export default component(function ({ width = 100, ...attributes }, content) {
+    return (() => {
+        let root_10y1frs0 = template_10y1frs1(), element_10y1frs2 = root_10y1frs0.firstChild;
+        template_u1.setList(element_10y1frs2, 'style', `--shine-width: ${width}px`);
+        template_u1.setProperties(element_10y1frs2, this?.attributes);
+        template_u1.setProperties(element_10y1frs2, attributes);
+        template_u1.slot(element_10y1frs2, content, 1);
+        return root_10y1frs0;
+    })();
+});

package/build/components/shiny-text/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.shiny-text{--color:oklch(from var(--color-text-300) l c h / .7);--duration:8s;--shine-color:oklch(from var(--color-black-300) l c h / .8);--shine-width:100px;--transition-duration:.3s;animation:shiny-text var(--duration) infinite;-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(to right, transparent, var(--shine-color) 50%, transparent);background-position:0 0;background-repeat:no-repeat;background-size:var(--shine-width) 100%;color:var(--color);transition:color var(--transition-duration) ease-out}@media (prefers-reduced-motion:reduce){.shiny-text{background-image:none;animation:none}}@keyframes shiny-text{0%,90%,to{background-position:calc(-100% - var(--shine-width)) 0}30%,60%{background-position:calc(100% + var(--shine-width)) 0}}}
+/*$vite$:1*/

package/build/components/shortcut-recorder/index.d.ts

@@ -0,0 +1,12 @@
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    label: string;
+    state?: {
+        value: string;
+    };
+    taken?: (shortcut: string) => string | null | undefined;
+    value?: string;
+};
+export default _default;
+declare function _default({ label, taken, value, state, ...attributes }: A): DocumentFragment | Text;