@esportsplus/ui 0.54.0 → 0.56.2

package/build/components/breadcrumb/separator.js

@@ -0,0 +1,11 @@
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import icon from '../icon/index.js';
+import chevron from './svg/chevron.svg';
+const template_13f2xn11 = template_u1.template(`<li aria-hidden='true' class='breadcrumb-separator' role='presentation'>`);
+export default component((attributes, content) => {
+    let root_13f2xn10 = template_13f2xn11(), element_13f2xn12 = root_13f2xn10.firstChild;
+    template_u1.setProperties(element_13f2xn12, attributes);
+    template_u1.slot(element_13f2xn12, content ?? icon(chevron), 1);
+    return root_13f2xn10;
+});

package/build/components/breadcrumb/svg/caret.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>

package/build/components/breadcrumb/svg/chevron.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>

package/build/components/breadcrumb/svg/more.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>

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

@@ -0,0 +1,27 @@
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    [BREADCRUMBS_LINK]?: Attributes;
+    [BREADCRUMBS_MENU]?: Attributes;
+    items: Crumb[];
+    label?: string;
+    onnavigate?: (item: Crumb, index: number) => void;
+    state?: State;
+};
+type Crumb = {
+    href: string;
+    label: string;
+};
+type State = {
+    active: boolean;
+    hidden: number;
+};
+declare const BREADCRUMBS_LINK: unique symbol;
+declare const BREADCRUMBS_MENU: unique symbol;
+declare const breadcrumbs: ({ items, label, onnavigate, state, ...attributes }: A) => DocumentFragment | Text;
+declare const _default: typeof breadcrumbs & {
+    readonly link: typeof BREADCRUMBS_LINK;
+    readonly menu: typeof BREADCRUMBS_MENU;
+};
+export default _default;
+export type { Crumb, State };

package/build/components/breadcrumbs/index.js

@@ -0,0 +1,324 @@
+import * as template_u1 from '@esportsplus/template';
+import { on } from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect, onCleanup } from '@esportsplus/reactivity';
+import tooltip from '../tooltip/index.js';
+import './scss/index.scss';
+const template_0yqko6f1 = template_u1.template(`<svg aria-hidden='true' class='breadcrumbs-separator' fill='none' stroke='currentColor' stroke-linecap='round' stroke-width='1.5' viewBox='0 0 16 16'><path d='M10 3 6 13' />`);
+const template_0yqko6f3 = template_u1.template(`<nav class='breadcrumbs'><ol aria-hidden='true' class='breadcrumbs-ruler' inert><!--$--><li class='breadcrumbs-segment'><!--$--><span class='breadcrumbs-space'></span></li></ol><ol class='breadcrumbs-list'>`);
+const template_0yqko6fa = template_u1.template(`<li class='breadcrumbs-segment'><!--$--><span class='breadcrumbs-text '>`);
+const template_0yqko6fe = template_u1.template(`<li class='breadcrumbs-segment '><!--$--></li><!--$-->`);
+const template_0yqko6fj = template_u1.template(`<span aria-current='page' class='breadcrumbs-current'>`);
+const template_0yqko6fm = template_u1.template(`<a class='breadcrumbs-link'>`);
+const template_0yqko6fp = template_u1.template(`<li class='breadcrumbs-segment breadcrumbs-fold --hidden'><!--$-->`);
+const template_0yqko6ft = template_u1.template(`<button aria-haspopup='menu' class='breadcrumbs-trigger' type='button'><svg aria-hidden='true' fill='currentColor' viewBox='0 0 16 16'><circle cx='3.5' cy='8' r='1.25' /><circle cx='8' cy='8' r='1.25' /><circle cx='12.5' cy='8' r='1.25' /></svg></button><div aria-label='Hidden folders' class='breadcrumbs-menu tooltip-content tooltip-content--sw' role='menu' tabindex='-1'>`);
+const template_0yqko6fx = template_u1.template(`<a class='breadcrumbs-option' role='menuitem' tabindex='-1'><svg aria-hidden='true' fill='none' stroke='currentColor' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 16 16'><path d='M2.25 4.5c0-.69.56-1.25 1.25-1.25h2.6l1.4 1.5h5c.69 0 1.25.56 1.25 1.25v5.5c0 .69-.56 1.25-1.25 1.25h-9c-.69 0-1.25-.56-1.25-1.25Z' /></svg><span>`);
+class ReactiveObject_0yqko6f0 extends reactivity_u0.ReactiveObject {
+    #active = this[reactivity_u0.SIGNAL](false);
+    #hidden = this[reactivity_u0.SIGNAL](0);
+    constructor() {
+        super(null);
+    }
+    get active() {
+        return reactivity_u0.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_u0.write(this.#active, _v0);
+    }
+    get hidden() {
+        return reactivity_u0.read(this.#hidden);
+    }
+    set hidden(_v1) {
+        reactivity_u0.write(this.#hidden, _v1);
+    }
+}
+const BREADCRUMBS_LINK = Symbol.for('@esportsplus/ui/breadcrumbs.link');
+const BREADCRUMBS_MENU = Symbol.for('@esportsplus/ui/breadcrumbs.menu');
+const EASE_OUT = 'cubic-bezier(0.23, 1, 0.32, 1)';
+const ENTER = 200;
+const EXIT = 120;
+const SLIDE = 310;
+const SPRING = 'linear(0, 0.0432 4.2%, 0.1402 8.3%, 0.2575 12.5%, 0.3764 16.7%, 0.4867 20.8%, 0.584 25%, 0.667 29.2%, 0.7361 33.3%, 0.7925 37.5%, 0.838 41.7%, 0.8743 45.8%, 0.9029 50%, 0.9254 54.2%, 0.9428 58.3%, 0.9564 62.5%, 0.9668 66.7%, 0.9748 70.8%, 0.9809 75%, 0.9856 79.2%, 0.9892 83.3%, 0.9918 87.5%, 0.9939 91.7%, 0.9954 95.8%, 1)';
+let uid = 0;
+function reduced() {
+    return matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+function separator() {
+    return template_0yqko6f1();
+}
+const breadcrumbs = ({ items, label = 'Breadcrumb', onnavigate, state, ...attributes }) => {
+    let alive = true, exiting = new Map(), fold, folded = 1, id = `breadcrumbs-${++uid}`, keyboard = false, last = items.length - 1, list, menu, options = [], observer, root, ruler, s = state ?? new ReactiveObject_0yqko6f0(), segments = [], slides = new Map(), trigger;
+    function apply(next, animate) {
+        if (!list || !fold) {
+            return;
+        }
+        for (let cleanup of [...exiting.values()]) {
+            cleanup();
+        }
+        let base = list.getBoundingClientRect(), before = new Map(), elements = [segments[0], fold, ...segments.slice(1)], reduce = reduced();
+        for (let i = 0, n = elements.length; i < n; i++) {
+            let element = elements[i];
+            if (element && !element.classList.contains('--hidden')) {
+                before.set(element, element.getBoundingClientRect());
+            }
+        }
+        for (let animation of slides.values()) {
+            animation.cancel();
+        }
+        slides.clear();
+        folded = next;
+        s.hidden = next - 1;
+        if (next <= 1) {
+            s.active = false;
+        }
+        for (let i = 1; i < last; i++) {
+            segments[i]?.classList.toggle('--hidden', i < next);
+        }
+        fold.classList.toggle('--hidden', next <= 1);
+        if (!animate) {
+            return;
+        }
+        for (let i = 0, n = elements.length; i < n; i++) {
+            let element = elements[i];
+            if (!element) {
+                continue;
+            }
+            let shown = !element.classList.contains('--hidden'), was = before.get(element);
+            if (was && shown) {
+                let dx = was.left - element.getBoundingClientRect().left;
+                if (dx && !reduce) {
+                    slides.set(element, element.animate([{ translate: `${dx}px 0` }, { translate: '0 0' }], { duration: SLIDE, easing: SPRING }));
+                }
+            }
+            else if (shown) {
+                element.animate([
+                    { filter: reduce ? 'blur(0px)' : 'blur(4px)', opacity: 0 },
+                    { filter: 'blur(0px)', opacity: 1 }
+                ], { duration: ENTER, easing: EASE_OUT });
+            }
+            else if (was) {
+                exit(element, was, base);
+            }
+        }
+    }
+    function close(refocus) {
+        s.active = false;
+        if (refocus) {
+            trigger?.focus({ preventScroll: true });
+        }
+    }
+    function exit(element, rect, base) {
+        let style = element.style;
+        element.classList.remove('--hidden');
+        style.left = `${rect.left - base.left}px`;
+        style.pointerEvents = 'none';
+        style.position = 'absolute';
+        style.top = `${rect.top - base.top}px`;
+        let animation = element.animate([{ opacity: 1 }, { opacity: 0 }], { duration: EXIT, easing: EASE_OUT, fill: 'forwards' }), cleanup = () => {
+            animation.cancel();
+            exiting.delete(element);
+            element.classList.add('--hidden');
+            style.removeProperty('left');
+            style.removeProperty('pointer-events');
+            style.removeProperty('position');
+            style.removeProperty('top');
+        };
+        animation.onfinish = cleanup;
+        exiting.set(element, cleanup);
+    }
+    function fit(animate) {
+        if (!root || !ruler) {
+            return;
+        }
+        let widths = [];
+        for (let child of ruler.children) {
+            widths.push(child.getBoundingClientRect().width);
+        }
+        let space = widths.pop() ?? 0, available = root.clientWidth, n = widths.length, next = Math.max(n - 1, 1), tail = 0;
+        for (let i = 1; i < n; i++) {
+            tail += widths[i];
+        }
+        for (let k = 1; k < n; k++) {
+            if (widths[0] + (k > 1 ? space : 0) + tail <= available + 0.5) {
+                next = k;
+                break;
+            }
+            tail -= widths[k];
+        }
+        next = Math.min(next, Math.max(last, 1));
+        if (next !== folded) {
+            apply(next, animate);
+        }
+    }
+    function focus(index) {
+        let visible = options.slice(0, s.hidden), n = visible.length;
+        visible[((index % n) + n) % n]?.focus({ preventScroll: true });
+    }
+    function move(step) {
+        let at = options.indexOf(document.activeElement);
+        focus(at === -1 ? (step > 0 ? 0 : -1) : at + step);
+    }
+    function navigate(e, item, index) {
+        if (!onnavigate) {
+            return;
+        }
+        e.preventDefault();
+        onnavigate(item, index);
+    }
+    let stop = effect(() => s.active, (active) => {
+        if (!menu) {
+            return;
+        }
+        menu.inert = !active;
+        if (!active) {
+            return;
+        }
+        if (keyboard) {
+            focus(0);
+        }
+        else {
+            menu.focus({ preventScroll: true });
+        }
+    });
+    onCleanup(() => {
+        alive = false;
+        observer?.disconnect();
+        stop();
+        for (let cleanup of [...exiting.values()]) {
+            cleanup();
+        }
+    });
+    return (() => {
+        let root_0yqko6f2 = template_0yqko6f3(), element_0yqko6f4 = root_0yqko6f2.firstChild, element_0yqko6f5 = element_0yqko6f4.firstElementChild, element_0yqko6f6 = element_0yqko6f5.firstChild, element_0yqko6f7 = element_0yqko6f5.firstElementChild.firstChild, element_0yqko6f8 = element_0yqko6f5.nextElementSibling;
+        template_u1.setProperties(element_0yqko6f4, attributes);
+        template_u1.setProperty(element_0yqko6f4, 'aria-label', label);
+        template_u1.onconnect(element_0yqko6f4, (element) => {
+            root = element;
+            fit(false);
+            observer = new ResizeObserver(() => fit(true));
+            observer.observe(element);
+            if (ruler) {
+                observer.observe(ruler);
+            }
+            void document.fonts?.ready.then(() => {
+                if (alive) {
+                    fit(true);
+                }
+            });
+        });
+        template_u1.onrender(element_0yqko6f5, (element) => { ruler = element; });
+        template_u1.slot(element_0yqko6f6, items.map((item, index) => {
+            let root_0yqko6f9 = template_0yqko6fa(), element_0yqko6fb = root_0yqko6f9.firstChild.firstChild, element_0yqko6fc = root_0yqko6f9.firstChild.firstElementChild;
+            template_u1.slot(element_0yqko6fb, index > 0 && separator());
+            template_u1.setList(element_0yqko6fc, 'class', index === last && 'breadcrumbs-text--current');
+            template_u1.slot(element_0yqko6fc, item.label, 1);
+            return root_0yqko6f9;
+        }));
+        template_u1.slot(element_0yqko6f7, separator());
+        template_u1.onrender(element_0yqko6f8, (element) => { list = element; });
+        template_u1.slot(element_0yqko6f8, items.map((item, index) => {
+            let root_0yqko6fd = template_0yqko6fe(), element_0yqko6ff = root_0yqko6fd.firstChild, element_0yqko6fg = element_0yqko6ff.firstChild, element_0yqko6fh = element_0yqko6ff.nextSibling;
+            template_u1.setList(element_0yqko6ff, 'class', index === last && 'breadcrumbs-segment--current');
+            template_u1.onrender(element_0yqko6ff, (element) => { segments[index] = element; });
+            template_u1.slot(element_0yqko6fg, index > 0 && separator());
+            element_0yqko6ff.appendChild(index === last
+                ? (() => {
+                    let root_0yqko6fi = template_0yqko6fj(), element_0yqko6fk = root_0yqko6fi.firstChild;
+                    template_u1.slot(element_0yqko6fk, item.label, 1);
+                    return root_0yqko6fi;
+                })()
+                : (() => {
+                    let root_0yqko6fl = template_0yqko6fm(), element_0yqko6fn = root_0yqko6fl.firstChild;
+                    template_u1.setProperty(element_0yqko6fn, 'href', item.href);
+                    template_u1.setProperties(element_0yqko6fn, attributes[BREADCRUMBS_LINK]);
+                    template_u1.onrender(element_0yqko6fn, (element) => {
+                        on(element, 'click', (e) => navigate(e, item, index));
+                    });
+                    template_u1.slot(element_0yqko6fn, item.label, 1);
+                    return root_0yqko6fl;
+                })());
+            template_u1.slot(element_0yqko6fh, index === 0 && (() => {
+                let root_0yqko6fo = template_0yqko6fp(), element_0yqko6fq = root_0yqko6fo.firstChild, element_0yqko6fr = element_0yqko6fq.firstChild;
+                template_u1.on(element_0yqko6fq, 'focusout', (e) => {
+                    if (s.active && !e.currentTarget.contains(e.relatedTarget)) {
+                        close(false);
+                    }
+                });
+                template_u1.onrender(element_0yqko6fq, (element) => { fold = element; });
+                template_u1.slot(element_0yqko6fr, separator());
+                template_u1.slot(element_0yqko6fq, tooltip.onclick({ class: 'breadcrumbs-menu-root', state: s, toggle: true }, (() => {
+                    let root_0yqko6fs = template_0yqko6ft(), element_0yqko6fu = root_0yqko6fs.firstChild, element_0yqko6fv = element_0yqko6fu.nextSibling;
+                    template_u1.setProperty(element_0yqko6fu, 'aria-controls', `${id}-menu`);
+                    template_u1.setProperty(element_0yqko6fu, 'aria-expanded', () => String(s.active));
+                    template_u1.setProperty(element_0yqko6fu, 'aria-label', () => `Show ${s.hidden} hidden ${s.hidden === 1 ? 'folder' : 'folders'}`);
+                    template_u1.delegate(element_0yqko6fu, 'keydown', (e) => {
+                        keyboard = true;
+                        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+                            e.preventDefault();
+                            s.active = true;
+                        }
+                    });
+                    template_u1.delegate(element_0yqko6fu, 'pointerdown', () => {
+                        keyboard = false;
+                    });
+                    template_u1.onrender(element_0yqko6fu, (element) => { trigger = element; });
+                    template_u1.setProperty(element_0yqko6fv, 'id', template_u1.interpolate([(id), "-menu"]));
+                    template_u1.setProperties(element_0yqko6fv, attributes[BREADCRUMBS_MENU]);
+                    template_u1.delegate(element_0yqko6fv, 'keydown', (e) => {
+                        switch (e.key) {
+                            case 'ArrowDown':
+                                e.preventDefault();
+                                move(1);
+                                return;
+                            case 'ArrowUp':
+                                e.preventDefault();
+                                move(-1);
+                                return;
+                            case 'End':
+                                e.preventDefault();
+                                focus(-1);
+                                return;
+                            case 'Escape':
+                                e.preventDefault();
+                                close(true);
+                                return;
+                            case 'Home':
+                                e.preventDefault();
+                                focus(0);
+                                return;
+                            case 'Tab':
+                                close(false);
+                        }
+                    });
+                    template_u1.onrender(element_0yqko6fv, (element) => {
+                        element.inert = true;
+                        menu = element;
+                    });
+                    template_u1.slot(element_0yqko6fv, items.slice(1, last).map((item, i) => {
+                        let root_0yqko6fw = template_0yqko6fx(), element_0yqko6fy = root_0yqko6fw.firstChild, element_0yqko6fz = element_0yqko6fy.firstElementChild.nextElementSibling;
+                        template_u1.setProperty(element_0yqko6fy, 'href', item.href);
+                        template_u1.setProperty(element_0yqko6fy, 'hidden', () => i >= s.hidden);
+                        template_u1.delegate(element_0yqko6fy, 'click', () => close(true));
+                        template_u1.delegate(element_0yqko6fy, 'pointermove', (e) => {
+                            let element = e.currentTarget;
+                            if (e.pointerType !== 'touch' && document.activeElement !== element) {
+                                element.focus({ preventScroll: true });
+                            }
+                        });
+                        template_u1.onrender(element_0yqko6fy, (element) => {
+                            on(element, 'click', (e) => navigate(e, item, i + 1));
+                            options[i] = element;
+                        });
+                        template_u1.slot(element_0yqko6fz, item.label, 1);
+                        return root_0yqko6fw;
+                    }), 1);
+                    return root_0yqko6fs;
+                })()), 2);
+                return root_0yqko6fo;
+            })());
+            return root_0yqko6fd;
+        }), 1);
+        return root_0yqko6f2;
+    })();
+};
+export default Object.assign(breadcrumbs, { link: BREADCRUMBS_LINK, menu: BREADCRUMBS_MENU });

package/build/components/breadcrumbs/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.breadcrumbs{--color:var(--color-text-300);--color-active:var(--color-text-500);--focus-color:var(--color-text-500);--font-size:var(--font-size-400);--font-weight-current:var(--font-weight-500);--height:36px;--hover-background:oklch(from var(--color-text-500) l c h / .06);--link-padding:6px;--link-radius:var(--border-radius-300);--menu-background:var(--color-grey-400);--menu-box-shadow:0 0 0 var(--border-width-400) var(--color-border-300), var(--box-shadow-300);--menu-duration-in:.18s;--menu-duration-out:.1s;--menu-radius:var(--border-radius-600);--menu-width:192px;--separator-color:oklch(from var(--color-text-300) l c h / .5);--separator-size:16px;--trigger-width:36px;--underline-color:oklch(from var(--color-text-500) l c h / .4)}.breadcrumbs--compact{--font-size:var(--font-size-300);--height:28px;--link-padding:4px;--separator-size:14px;--trigger-width:28px}.breadcrumbs{font-size:var(--font-size);width:100%;min-width:0;position:relative}.breadcrumbs-current{color:var(--color-active);font-weight:var(--font-weight-current);padding-inline:var(--link-padding);text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.breadcrumbs-link{border-radius:var(--link-radius);color:var(--color);height:var(--height);padding-inline:var(--link-padding);text-underline-offset:4px;touch-action:manipulation;-webkit-user-select:none;user-select:none;white-space:nowrap;outline:none;align-items:center;-webkit-text-decoration:underline #0000;text-decoration:underline #0000;transition:color .15s ease-out,scale .15s ease-out,text-decoration-color .15s ease-out;display:inline-flex}.breadcrumbs-link:active{scale:.96}.breadcrumbs-link:focus-visible{outline:2px solid var(--focus-color)}.breadcrumbs-link:hover{color:var(--color-active);-webkit-text-decoration-color:var(--underline-color);-webkit-text-decoration-color:var(--underline-color);text-decoration-color:var(--underline-color)}.breadcrumbs-list{height:var(--height);align-items:center;min-width:0;margin:0;padding:0;list-style:none;display:flex;position:relative}.breadcrumbs-menu.tooltip-content{--background-default:var(--menu-background);--border-radius:var(--menu-radius);--box-shadow:var(--menu-box-shadow);--offset:0px;--scale:.95;--spacer:6px;--transition-duration:var(--menu-duration-out);--transition-timing-function:cubic-bezier(.23, 1, .32, 1);transform-origin:calc(var(--trigger-width) / 2) 0;width:var(--menu-width);outline:none;flex-direction:column;padding:4px;display:flex}.tooltip.--active>.breadcrumbs-menu.tooltip-content{--transition-duration:var(--menu-duration-in)}.breadcrumbs-menu-root.tooltip{cursor:default;display:flex}.breadcrumbs-option{border-radius:var(--border-radius-400);color:var(--color-active);cursor:default;-webkit-user-select:none;user-select:none;outline:none;flex-shrink:0;align-items:center;gap:10px;height:36px;padding-inline:8px;text-decoration:none;display:flex}.breadcrumbs-option:focus{background:var(--hover-background)}.breadcrumbs-option[hidden]{display:none}.breadcrumbs-option span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.breadcrumbs-option svg{color:var(--color);flex-shrink:0;width:16px;height:16px}.breadcrumbs-ruler{pointer-events:none;visibility:hidden;white-space:nowrap;margin:0;padding:0;list-style:none;display:flex;position:absolute;top:0;left:0}.breadcrumbs-segment{flex-shrink:0;align-items:center;display:flex}.breadcrumbs-segment--current{flex-shrink:1;min-width:0}.breadcrumbs-segment.--hidden{display:none}.breadcrumbs-separator{color:var(--separator-color);height:var(--separator-size);width:var(--separator-size);flex-shrink:0}.breadcrumbs-space{width:var(--trigger-width);display:block}.breadcrumbs-text{padding-inline:var(--link-padding)}.breadcrumbs-text--current{font-weight:var(--font-weight-current)}.breadcrumbs-trigger{border-radius:var(--link-radius);color:var(--color);cursor:pointer;height:calc(var(--height) - 4px);touch-action:manipulation;-webkit-user-select:none;user-select:none;width:var(--trigger-width);background:0 0;border:0;outline:none;justify-content:center;align-items:center;padding:0;transition:background-color .15s ease-out,color .15s ease-out,scale .15s ease-out;display:flex}.breadcrumbs-trigger:active{scale:.96}.breadcrumbs-trigger:focus-visible{outline:2px solid var(--focus-color)}.breadcrumbs-trigger:hover,.tooltip.--active>.breadcrumbs-trigger{background:var(--hover-background);color:var(--color-active)}.breadcrumbs-trigger svg{width:16px;height:16px}@media (prefers-reduced-motion:reduce){.breadcrumbs-link{transition:color .15s ease-out,text-decoration-color .15s ease-out}.breadcrumbs-menu.tooltip-content{--scale:1}.breadcrumbs-trigger{transition:background-color .15s ease-out,color .15s ease-out}}}
+/*$vite$:1*/

package/build/components/button/copy.d.ts

@@ -0,0 +1,21 @@
+import * as template_u1 from '@esportsplus/template';
+import { type Attributes } from '@esportsplus/template';
+type A = Attributes & {
+    error?: string;
+    onclick?: never;
+    ondisconnect?: never;
+    success?: string;
+    timeout?: number;
+    value: string;
+};
+declare const _default: {
+    (): template_u1.Renderable<any>;
+    <T extends A>(attributes: T): template_u1.Renderable<any>;
+    <T extends string>(content: T): template_u1.Renderable<any>;
+    (attributes: A, content?: string | undefined): template_u1.Renderable<any>;
+    bind(context: {
+        attributes?: Partial<A> | undefined;
+        content?: string | undefined;
+    }): any;
+};
+export default _default;

package/build/components/button/copy.js

@@ -0,0 +1,48 @@
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { check, copy, cross } from './icons.js';
+import write from '../clipboard/write.js';
+import faces from './faces.js';
+const template_07so7b42 = template_u1.template(`<button class='button button--feedback' type='button'></button><span class='button-status' role='status' aria-live='polite'>`);
+class ReactiveObject_07so7b40 extends reactivity_u0.ReactiveObject {
+    #status;
+    constructor(_p0) {
+        super(null);
+        this.#status = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get status() {
+        return reactivity_u0.read(this.#status);
+    }
+    set status(_v0) {
+        reactivity_u0.write(this.#status, _v0);
+    }
+}
+export default component(({ error = 'Failed', success = 'Copied', timeout = 2000, value, ...attributes }, content = 'Copy') => {
+    let state = new ReactiveObject_07so7b40('idle'), reset = () => {
+        clearTimeout(timer);
+        state.status = 'idle';
+    }, timer;
+    return (() => {
+        let root_07so7b41 = template_07so7b42(), element_07so7b43 = root_07so7b41.firstChild, element_07so7b44 = element_07so7b43.nextSibling;
+        template_u1.setProperties(element_07so7b43, attributes);
+        template_u1.ondisconnect(element_07so7b43, reset);
+        template_u1.delegate(element_07so7b43, 'click', async (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            if (!value) {
+                return;
+            }
+            reset();
+            state.status = await write(value) ? 'success' : 'error';
+            timer = setTimeout(reset, timeout);
+        });
+        template_u1.slot(element_07so7b43, faces(() => state.status, [
+            { content, icon: copy, key: 'idle' },
+            { content: success, icon: check, key: 'success', tone: 'success' },
+            { content: error, icon: cross, key: 'error', tone: 'error' }
+        ]), 1);
+        new template_u1.EffectSlot(element_07so7b44, () => state.status === 'success' ? success : state.status === 'error' ? error : '', 1);
+        return root_07so7b41;
+    })();
+});

package/build/components/button/faces.d.ts

@@ -0,0 +1,10 @@
+import { type Renderable } from '@esportsplus/template';
+type Face = {
+    content: Renderable<unknown>;
+    icon?: () => Renderable<unknown>;
+    key: string;
+    tone?: 'error' | 'success';
+};
+export default _default;
+declare function _default(status: () => string, faces: Face[]): DocumentFragment | Text;
+export type { Face };

package/build/components/button/faces.js

@@ -0,0 +1,16 @@
+import * as template_u1 from '@esportsplus/template';
+const template_14galg91 = template_u1.template(`<span class='button-faces'>`);
+const template_14galg94 = template_u1.template(`<span class='button-face'><!--$-->`);
+export default (status, faces) => {
+    let root_14galg90 = template_14galg91(), element_14galg92 = root_14galg90.firstChild;
+    template_u1.slot(element_14galg92, faces.map(({ content, icon, key, tone }, index) => {
+        let root_14galg93 = template_14galg94(), element_14galg95 = root_14galg93.firstChild, element_14galg96 = element_14galg95.firstChild;
+        template_u1.setProperty(element_14galg95, 'aria-hidden', index === 0 ? 'false' : 'true');
+        template_u1.setProperty(element_14galg95, 'data-tone', tone);
+        template_u1.setList(element_14galg95, 'class', () => status() === key && '--active');
+        template_u1.slot(element_14galg96, icon?.());
+        template_u1.slot(element_14galg95, content, 2);
+        return root_14galg93;
+    }), 1);
+    return root_14galg90;
+};

package/build/components/button/fan.d.ts

@@ -0,0 +1,24 @@
+import * as template_u1 from '@esportsplus/template';
+import { type Attributes, type Renderable } from '@esportsplus/template';
+declare const FAN_OPTION: unique symbol;
+declare const FAN_TRIGGER: unique symbol;
+type A = Attributes & {
+    [FAN_OPTION]?: Attributes;
+    [FAN_TRIGGER]?: Attributes;
+    closeOnSelect?: boolean;
+    direction?: Direction;
+    ondocumentclick?: never;
+    onkeydown?: never;
+    options: (Attributes & {
+        content: Renderable<unknown>;
+    })[];
+    state?: {
+        active: boolean;
+    };
+};
+type Direction = 'e' | 'n' | 's' | 'w';
+declare const _default: template_u1.Factory<A, Renderable<any>, Renderable<any>, {
+    readonly option: typeof FAN_OPTION;
+    readonly trigger: typeof FAN_TRIGGER;
+}>;
+export default _default;

package/build/components/button/fan.js

@@ -0,0 +1,117 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+const template_07imo942 = template_u1.template(`<div class='button-fan '><button aria-haspopup='menu' class='button button--fan' type='button'></button><div class='button-fan-options' role='menu'>`);
+const template_07imo947 = template_u1.template(`<a class='button button-fan-option' role='menuitem'>`);
+const template_07imo94a = template_u1.template(`<button class='button button-fan-option' role='menuitem' type='button'>`);
+class ReactiveObject_07imo940 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 FAN_OPTION = Symbol.for('@esportsplus/ui/button.fan.option');
+const FAN_TRIGGER = Symbol.for('@esportsplus/ui/button.fan.trigger');
+const CLOSE_DELAY = 150;
+const KEYS = {
+    e: { ArrowLeft: -1, ArrowRight: 1 },
+    n: { ArrowDown: -1, ArrowUp: 1 },
+    s: { ArrowDown: 1, ArrowUp: -1 },
+    w: { ArrowLeft: 1, ArrowRight: -1 }
+};
+const OPTIONS = ':scope > .button-fan-options > .button-fan-option';
+function close(fan, state) {
+    state.active = false;
+    fan?.querySelector(':scope > .button--fan')?.focus();
+}
+function focus(fan) {
+    requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+            fan?.querySelector(OPTIONS)?.focus();
+        });
+    });
+}
+export default component(({ closeOnSelect = true, direction = 'e', options, state = new ReactiveObject_07imo940(), ...attributes }, content) => {
+    let root_07imo941 = template_07imo942(), element_07imo943 = root_07imo941.firstChild, element_07imo944 = element_07imo943.firstElementChild, element_07imo945 = element_07imo944.nextElementSibling;
+    template_u1.setList(element_07imo943, 'class', `button-fan--${direction}`);
+    template_u1.setProperties(element_07imo943, attributes);
+    template_u1.setList(element_07imo943, 'class', () => state.active && '--active');
+    template_u1.ondocument(element_07imo943, 'click', function (event) {
+        if (!this?.isConnected || !state.active) {
+            return;
+        }
+        if (!this.contains(event.target)) {
+            state.active = false;
+        }
+    });
+    template_u1.delegate(element_07imo943, 'keydown', function (event) {
+        if (!state.active) {
+            return;
+        }
+        if (event.key === 'Escape') {
+            event.stopPropagation();
+            close(this, state);
+            return;
+        }
+        let step = KEYS[direction][event.key];
+        if (step === undefined) {
+            return;
+        }
+        let nodes = [...this.querySelectorAll(OPTIONS)], i = nodes.indexOf(document.activeElement), n = nodes.length;
+        if (n === 0) {
+            return;
+        }
+        event.preventDefault();
+        nodes[i === -1 ? (step === 1 ? 0 : n - 1) : (i + step + n) % n].focus();
+    });
+    template_u1.setProperties(element_07imo944, attributes[FAN_TRIGGER]);
+    template_u1.setProperty(element_07imo944, 'aria-expanded', () => state.active ? 'true' : 'false');
+    template_u1.delegate(element_07imo944, 'click', function () {
+        state.active = !state.active;
+        if (state.active) {
+            focus(this.parentElement);
+        }
+    });
+    template_u1.slot(element_07imo944, content, 1);
+    template_u1.setList(element_07imo945, 'style', `--n: ${options.length};`);
+    template_u1.setProperty(element_07imo945, 'inert', () => !state.active);
+    template_u1.slot(element_07imo945, options.map(({ content, onclick, ...o }, i) => {
+        let select = {
+            onclick: function (event) {
+                onclick?.call(this, event);
+                if (!closeOnSelect) {
+                    return;
+                }
+                let fan = this.closest('.button-fan');
+                setTimeout(() => close(fan, state), CLOSE_DELAY);
+            }
+        }, style = `--i: ${i};`;
+        if (o.href) {
+            return (() => {
+                let root_07imo946 = template_07imo947(), element_07imo948 = root_07imo946.firstChild;
+                template_u1.setList(element_07imo948, 'style', style);
+                template_u1.setProperties(element_07imo948, o);
+                template_u1.setProperties(element_07imo948, attributes[FAN_OPTION]);
+                template_u1.setProperties(element_07imo948, select);
+                template_u1.slot(element_07imo948, content, 1);
+                return root_07imo946;
+            })();
+        }
+        return (() => {
+            let root_07imo949 = template_07imo94a(), element_07imo94b = root_07imo949.firstChild;
+            template_u1.setList(element_07imo94b, 'style', style);
+            template_u1.setProperties(element_07imo94b, o);
+            template_u1.setProperties(element_07imo94b, attributes[FAN_OPTION]);
+            template_u1.setProperties(element_07imo94b, select);
+            template_u1.slot(element_07imo94b, content, 1);
+            return root_07imo949;
+        })();
+    }), 1);
+    return root_07imo941;
+}, { option: FAN_OPTION, trigger: FAN_TRIGGER });

package/build/components/button/hold.d.ts

@@ -0,0 +1,31 @@
+import * as template_u1 from '@esportsplus/template';
+import { type Attributes } from '@esportsplus/template';
+type A = Attributes & {
+    action: () => unknown;
+    disabled?: boolean;
+    duration?: number;
+    onblur?: never;
+    oncontextmenu?: never;
+    ondisconnect?: never;
+    onkeydown?: never;
+    onkeyup?: never;
+    onpointercancel?: never;
+    onpointerdown?: never;
+    onpointermove?: never;
+    onpointerup?: never;
+    release?: number;
+    success?: string;
+    timeout?: number;
+    tolerance?: number;
+};
+declare const _default: {
+    (): template_u1.Renderable<any>;
+    <T extends A>(attributes: T): template_u1.Renderable<any>;
+    <T extends string>(content: T): template_u1.Renderable<any>;
+    (attributes: A, content?: string | undefined): template_u1.Renderable<any>;
+    bind(context: {
+        attributes?: Partial<A> | undefined;
+        content?: string | undefined;
+    }): any;
+};
+export default _default;