@esportsplus/ui 0.55.0 → 0.56.2

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;