@esportsplus/ui 0.55.0 → 0.56.3

package/build/components/file-tree/index.js

@@ -0,0 +1,208 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import * as template_u1 from '@esportsplus/template';
+import './scss/index.scss';
+const template_08cyswu3 = template_u1.template(`<button class='file-tree-trigger file-tree-file ' type='button'><!--$--><span class='file-tree-name'>`);
+const template_08cyswu8 = template_u1.template(`<div class='file-tree-folder'><button class='file-tree-trigger ' type='button'><!--$--><span class='file-tree-name'></span></button><div class='file-tree-content '><div class='file-tree-clip'><!--$--><div class='file-tree-group' role='group'>`);
+const template_08cyswuf = template_u1.template(`<div aria-hidden='true' class='file-tree-indicator'>`);
+const template_08cyswug = template_u1.template(`<svg aria-hidden='true' class='file-tree-icon' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'><path d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z' />`);
+const template_08cyswuh = template_u1.template(`<svg aria-hidden='true' class='file-tree-icon' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'><path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z' /><path d='M14 2v4a2 2 0 0 0 2 2h4' />`);
+const template_08cyswui = template_u1.template(`<svg aria-hidden='true' class='file-tree-icon' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'><path d='m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2' />`);
+const template_08cyswuk = template_u1.template(`<div class='file-tree'><div class='file-tree-viewport'><div class='file-tree-group'>`);
+const template_08cyswuo = template_u1.template(`<button class='file-tree-toggle' type='button'>`);
+class ReactiveObject_08cyswu0 extends reactivity_u0.ReactiveObject {
+    #selected;
+    constructor(_p0) {
+        super(null);
+        this.#selected = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get selected() {
+        return reactivity_u0.read(this.#selected);
+    }
+    set selected(_v0) {
+        reactivity_u0.write(this.#selected, _v0);
+    }
+}
+class ReactiveObject_08cyswu1 extends reactivity_u0.ReactiveObject {
+    #any;
+    constructor(_p0) {
+        super(null);
+        this.#any = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get any() {
+        return reactivity_u0.read(this.#any);
+    }
+    set any(_v0) {
+        reactivity_u0.write(this.#any, _v0);
+    }
+}
+const collator = new Intl.Collator('en', { numeric: true, sensitivity: 'base' });
+function arrange(elements, sort) {
+    let compare = sort === 'none' ? undefined : sort === 'default' ? byDefault : sort, next = elements.map((element) => element.children ? { ...element, children: arrange(element.children, sort) } : element);
+    return compare ? next.sort(compare) : next;
+}
+function byDefault(a, b) {
+    let x = folder(a), y = folder(b);
+    if (x !== y) {
+        return x ? -1 : 1;
+    }
+    return collator.compare(a.name, b.name);
+}
+function folder(element) {
+    return element.type ? element.type === 'folder' : Array.isArray(element.children);
+}
+function folders(elements, out = []) {
+    for (let i = 0, n = elements.length; i < n; i++) {
+        let element = elements[i];
+        if (folder(element)) {
+            out.push(element);
+            folders(element.children ?? [], out);
+        }
+    }
+    return out;
+}
+function path(elements, id, trail = []) {
+    for (let i = 0, n = elements.length; i < n; i++) {
+        let element = elements[i], next = [...trail, element.id];
+        if (element.id === id) {
+            return element.selectable === false ? trail : next;
+        }
+        if (element.children) {
+            let found = path(element.children, id, next);
+            if (found) {
+                return found;
+            }
+        }
+    }
+    return null;
+}
+const ICONS = {
+    close: () => template_08cyswug(),
+    file: () => template_08cyswuh(),
+    open: () => template_08cyswui()
+};
+export default ({ elements, expanded = [], icons = {}, indicator = true, select, selected, sort = 'default', state = new ReactiveObject_08cyswu0(selected ?? ''), toggle, ...attributes }) => {
+    let all = folders(elements), initial = new Set([...expanded, ...(state.selected ? path(elements, state.selected) ?? [] : [])]), close = icons.close ?? ICONS.close, file = icons.file ?? ICONS.file, open = reactivity_u0.reactive(Object.fromEntries(all.map((element) => [element.id, initial.has(element.id)]))), opened = icons.open ?? ICONS.open, root, ui = new ReactiveObject_08cyswu1(initial.size > 0);
+    function choose(element) {
+        state.selected = element.id;
+        select?.(element.id);
+    }
+    function flip(id, value) {
+        open[id] = value;
+        ui.any = all.some((element) => open[element.id]);
+    }
+    function render(elements) {
+        return elements.map((element) => {
+            let disabled = element.selectable === false, id = element.id;
+            if (!folder(element)) {
+                return (() => {
+                    let root_08cyswu2 = template_08cyswu3(), element_08cyswu4 = root_08cyswu2.firstChild, element_08cyswu5 = element_08cyswu4.firstChild, element_08cyswu6 = element_08cyswu4.firstElementChild;
+                    template_u1.setList(element_08cyswu4, 'class', () => state.selected === id && '--active');
+                    template_u1.setProperty(element_08cyswu4, 'data-id', id);
+                    template_u1.setProperty(element_08cyswu4, 'disabled', disabled);
+                    template_u1.delegate(element_08cyswu4, 'click', () => choose(element));
+                    template_u1.setProperty(element_08cyswu4, 'aria-current', () => state.selected === id && 'true');
+                    template_u1.slot(element_08cyswu5, file());
+                    template_u1.slot(element_08cyswu6, element.name, 1);
+                    return root_08cyswu2;
+                })();
+            }
+            return (() => {
+                let root_08cyswu7 = template_08cyswu8(), element_08cyswu9 = root_08cyswu7.firstChild.firstElementChild, element_08cyswua = element_08cyswu9.firstChild, element_08cyswub = element_08cyswu9.firstElementChild, element_08cyswuc = element_08cyswu9.nextElementSibling, element_08cyswud = element_08cyswuc.firstElementChild.firstChild, element_08cyswue = element_08cyswuc.firstElementChild.firstElementChild;
+                template_u1.setList(element_08cyswu9, 'class', () => state.selected === id && '--active');
+                template_u1.setProperty(element_08cyswu9, 'data-id', id);
+                template_u1.setProperty(element_08cyswu9, 'disabled', disabled);
+                template_u1.delegate(element_08cyswu9, 'click', () => {
+                    choose(element);
+                    flip(id, !open[id]);
+                });
+                template_u1.setProperty(element_08cyswu9, 'aria-current', () => state.selected === id && 'true');
+                template_u1.setProperty(element_08cyswu9, 'aria-expanded', () => open[id] ? 'true' : 'false');
+                new template_u1.EffectSlot(element_08cyswua, () => open[id] ? opened() : close());
+                template_u1.slot(element_08cyswub, element.name, 1);
+                template_u1.setList(element_08cyswuc, 'class', () => open[id] && '--active');
+                template_u1.setProperty(element_08cyswuc, 'inert', () => !open[id]);
+                template_u1.slot(element_08cyswud, indicator && template_08cyswuf());
+                template_u1.slot(element_08cyswue, render(element.children ?? []), 1);
+                return root_08cyswu7;
+            })();
+        });
+    }
+    function reachable() {
+        if (!root) {
+            return [];
+        }
+        return Array.from(root.querySelectorAll('.file-tree-trigger'))
+            .filter((button) => !button.disabled && !button.closest('[inert]'));
+    }
+    return (() => {
+        let root_08cyswuj = template_08cyswuk(), element_08cyswul = root_08cyswuj.firstChild, element_08cyswum = element_08cyswul.firstElementChild.firstElementChild;
+        template_u1.setProperties(element_08cyswul, attributes);
+        template_u1.delegate(element_08cyswul, 'keydown', (event) => {
+            let current = event.target.closest('.file-tree-trigger');
+            if (!current) {
+                return;
+            }
+            let buttons = reachable(), id = current.dataset.id, index = buttons.indexOf(current), target;
+            switch (event.key) {
+                case 'ArrowDown':
+                    target = buttons[index + 1];
+                    break;
+                case 'ArrowUp':
+                    target = buttons[index - 1];
+                    break;
+                case 'End':
+                    target = buttons[buttons.length - 1];
+                    break;
+                case 'Home':
+                    target = buttons[0];
+                    break;
+                case 'ArrowLeft':
+                case 'ArrowRight': {
+                    let rtl = getComputedStyle(current).direction === 'rtl', inward = (event.key === 'ArrowRight') !== rtl;
+                    if (id in open && inward) {
+                        if (open[id]) {
+                            target = buttons[index + 1];
+                        }
+                        else {
+                            flip(id, true);
+                        }
+                    }
+                    else if (id in open && open[id]) {
+                        flip(id, false);
+                    }
+                    else if (!inward) {
+                        target = current.parentElement?.closest('.file-tree-folder')?.querySelector(':scope > .file-tree-trigger') ?? undefined;
+                    }
+                    break;
+                }
+                default:
+                    return;
+            }
+            event.preventDefault();
+            target?.focus();
+        });
+        template_u1.onrender(element_08cyswul, (element) => {
+            root = element;
+        });
+        template_u1.slot(element_08cyswum, render(arrange(elements, sort)), 1);
+        template_u1.slot(element_08cyswul, toggle && (() => {
+            let root_08cyswun = template_08cyswuo(), element_08cyswup = root_08cyswun.firstChild;
+            template_u1.delegate(element_08cyswup, 'click', () => {
+                let value = !ui.any;
+                for (let i = 0, n = all.length; i < n; i++) {
+                    let element = all[i];
+                    if (element.selectable !== false && element.children?.length) {
+                        open[element.id] = value;
+                    }
+                    else if (!value) {
+                        open[element.id] = false;
+                    }
+                }
+                ui.any = all.some((element) => open[element.id]);
+            });
+            new template_u1.EffectSlot(element_08cyswup, () => ui.any ? 'Collapse all' : 'Expand all', 1);
+            return root_08cyswun;
+        })(), 2);
+        return root_08cyswuj;
+    })();
+};

package/build/components/file-tree/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.file-tree{--active-background:var(--color-grey-500);--border-radius:6px;--color:var(--color-text-500);--duration:.2s;--ease:cubic-bezier(.23, 1, .32, 1);--focus-color:oklch(from var(--color-text-500) l c h / .38);--font-size:calc(var(--font-size-400) * .875);--gap:4px;--icon-size:16px;--indent:20px;--indicator-color:var(--color-grey-500);--indicator-hover:var(--color-border-500);--indicator-offset:6px;--padding:8px;--padding-end:4px;--row-gap:4px;color:var(--color);font-size:var(--font-size);width:100%;height:100%;position:relative}.file-tree-content{transition:grid-template-rows var(--duration) var(--ease);grid-template-rows:0fr;display:grid}.file-tree-content.--active{grid-template-rows:1fr}.file-tree-clip{min-height:0;position:relative;overflow:hidden}.file-tree-folder{position:relative}.file-tree-group{gap:var(--row-gap);flex-direction:column;display:flex}.file-tree-clip>.file-tree-group{padding-block:var(--row-gap);margin-inline-start:var(--indent)}.file-tree-icon{height:var(--icon-size);width:var(--icon-size);flex-shrink:0}.file-tree-indicator{background:var(--indicator-color);width:1px;height:100%;border-radius:6px;transition:background-color .3s ease-in-out;position:absolute;inset-inline-start:var(--indicator-offset)}.file-tree-indicator:hover{background:var(--indicator-hover)}.file-tree-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.file-tree-toggle{border-radius:var(--border-radius);color:inherit;cursor:pointer;font:inherit;outline:0 solid var(--focus-color);outline-offset:2px;bottom:4px;background:0 0;border:0;height:32px;padding:0 8px;transition:background-color .15s ease-out;position:absolute;inset-inline-end:8px}.file-tree-toggle:focus-visible{outline-width:2px}.file-tree-toggle:hover{background:var(--active-background)}.file-tree-trigger{border-radius:var(--border-radius);color:inherit;cursor:pointer;font:inherit;align-items:center;gap:var(--gap);outline:0 solid var(--focus-color);outline-offset:1px;text-align:start;width:fit-content;max-width:100%;padding:0;background:0 0;border:0;padding-inline-end:var(--padding-end);transition:background-color .2s ease-in-out;display:flex}.file-tree-trigger:disabled{cursor:not-allowed;opacity:.5}.file-tree-trigger:focus-visible{outline-width:2px}.file-tree-trigger.--active:not(:disabled){background:var(--active-background)}.file-tree-viewport{height:100%;padding-inline:var(--padding);position:relative;overflow:auto}@media (prefers-reduced-motion:reduce){.file-tree-content{transition:none}}}
+/*$vite$:1*/

package/build/components/filter-grid/index.d.ts

@@ -0,0 +1,23 @@
+import { type Attributes, type Renderable } from '@esportsplus/template';
+import './scss/index.scss';
+type Filter<T> = {
+    id: string;
+    label: string;
+    match: (item: T) => boolean;
+};
+export default _default;
+declare function _default<T>({ columns, emptyLabel, filters, gap, items, label, maxRows, render, rowHeight, state, ...attributes }: Attributes & {
+    columns?: number;
+    emptyLabel?: string;
+    filters: Filter<T>[];
+    gap?: number;
+    items: T[];
+    label: string;
+    maxRows?: number;
+    render: (item: T) => Renderable<unknown>;
+    rowHeight?: number;
+    state?: {
+        active: string;
+    };
+}): DocumentFragment | Text;
+export type { Filter };

package/build/components/filter-grid/index.js

@@ -0,0 +1,240 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect, onCleanup, untrack } from '@esportsplus/reactivity';
+import './scss/index.scss';
+const template_13mqa5i3 = template_u1.template(`<div class='filter-grid'><div class='filter-grid-filters' role='radiogroup'><span class='filter-grid-thumb' aria-hidden='true'></span></div><div class='filter-grid-body'><ul class='filter-grid-items ' tabindex='-1' style=';;;;'></ul><div class='filter-grid-empty '></div></div><p class='--hidden-offcanvas' aria-live='polite'>`);
+const template_13mqa5ia = template_u1.template(`<button class='filter-grid-filter ' type='button' role='radio'><!--$--><span class='filter-grid-count'>`);
+const template_13mqa5if = template_u1.template(`<li class='filter-grid-item'>`);
+class ReactiveObject_13mqa5i0 extends reactivity_u0.ReactiveObject {
+    #active;
+    constructor(_p0) {
+        super(null);
+        this.#active = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get active() {
+        return reactivity_u0.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_u0.write(this.#active, _v0);
+    }
+}
+class ReactiveObject_13mqa5i1 extends reactivity_u0.ReactiveObject {
+    #visible = this[reactivity_u0.SIGNAL](0);
+    constructor() {
+        super(null);
+    }
+    get visible() {
+        return reactivity_u0.read(this.#visible);
+    }
+    set visible(_v0) {
+        reactivity_u0.write(this.#visible, _v0);
+    }
+}
+const ENTER = { duration: 200, easing: 'cubic-bezier(0.23, 1, 0.32, 1)' };
+const LEAVE = { duration: 140, easing: 'cubic-bezier(0.4, 0, 1, 1)' };
+const MOVE = { duration: 420, easing: 'cubic-bezier(0.22, 1, 0.36, 1)' };
+let instance = 0;
+function reduced() {
+    return matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+export default ({ columns = 3, emptyLabel = 'Nothing matches this filter', filters, gap = 8, items, label, maxRows = 4, render, rowHeight = 72, state = new ReactiveObject_13mqa5i0(filters[0]?.id ?? ''), ...attributes }) => {
+    let cols = Math.max(1, Math.floor(columns)), counts = {}, elements = [], group, heldFocus = false, id = `filter-grid-${++instance}`, leaving = new Set(), list, observer, rows = Math.min(Math.max(1, Math.ceil(items.length / cols)), Math.max(1, maxRows)), status = new ReactiveObject_13mqa5i1(), thumb;
+    for (let i = 0, n = filters.length; i < n; i++) {
+        let count = 0, filter = filters[i];
+        for (let j = 0, m = items.length; j < m; j++) {
+            if (filter.match(items[j])) {
+                count++;
+            }
+        }
+        counts[filter.id] = count;
+    }
+    function current() {
+        return filters.find((filter) => filter.id === state.active) ?? filters[0];
+    }
+    function keydown(event, index) {
+        let n = filters.length, next;
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'ArrowRight':
+                next = index + 1;
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                next = index - 1;
+                break;
+            case 'End':
+                next = n - 1;
+                break;
+            case 'Home':
+                next = 0;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        next = (next + n) % n;
+        group?.querySelectorAll('.filter-grid-filter')[next]?.focus();
+        select(filters[next].id);
+    }
+    function place(animate) {
+        let chip = group?.querySelectorAll('.filter-grid-filter')[Math.max(0, filters.indexOf(current()))];
+        if (!chip || !thumb) {
+            return;
+        }
+        if (!animate) {
+            thumb.style.transition = 'none';
+        }
+        thumb.style.setProperty('--height', `${chip.offsetHeight}px`);
+        thumb.style.setProperty('--width', `${chip.offsetWidth}px`);
+        thumb.style.setProperty('--x', `${chip.offsetLeft}px`);
+        thumb.style.setProperty('--y', `${chip.offsetTop}px`);
+        if (!animate) {
+            thumb.offsetWidth;
+            thumb.style.transition = '';
+        }
+    }
+    function select(key) {
+        heldFocus = !!list && list !== document.activeElement && list.contains(document.activeElement);
+        state.active = key;
+    }
+    function settle() {
+        if (!heldFocus || !list) {
+            return;
+        }
+        heldFocus = false;
+        if (!list.contains(document.activeElement)) {
+            list.focus({ preventScroll: true });
+        }
+    }
+    function update(animate) {
+        if (!list) {
+            return;
+        }
+        let bounds = list.getBoundingClientRect(), filter = current(), first = new Map(), visible = 0;
+        for (let i = 0, n = elements.length; i < n; i++) {
+            let element = elements[i];
+            if (!element.hidden) {
+                first.set(element, element.getBoundingClientRect());
+            }
+        }
+        for (let i = 0, n = elements.length; i < n; i++) {
+            let element = elements[i];
+            if (!filter || filter.match(items[i])) {
+                visible++;
+                for (let animation of element.getAnimations()) {
+                    animation.cancel();
+                }
+                element.classList.remove('--leaving');
+                element.hidden = false;
+                element.removeAttribute('style');
+                leaving.delete(element);
+                continue;
+            }
+            if (leaving.has(element)) {
+                continue;
+            }
+            let rect = first.get(element);
+            if (!animate || !rect) {
+                element.hidden = true;
+                continue;
+            }
+            for (let animation of element.getAnimations()) {
+                animation.cancel();
+            }
+            element.classList.add('--leaving');
+            element.style.height = `${rect.height}px`;
+            element.style.left = `${rect.left - bounds.left - list.clientLeft + list.scrollLeft}px`;
+            element.style.top = `${rect.top - bounds.top - list.clientTop + list.scrollTop}px`;
+            element.style.width = `${rect.width}px`;
+            leaving.add(element);
+            element.animate([{ opacity: 1, transform: 'scale(1)' }, { opacity: 0, transform: 'scale(0.98)' }], LEAVE).onfinish = () => {
+                element.classList.remove('--leaving');
+                element.hidden = true;
+                element.removeAttribute('style');
+                leaving.delete(element);
+                if (leaving.size === 0) {
+                    settle();
+                }
+            };
+        }
+        status.visible = visible;
+        if (leaving.size === 0) {
+            settle();
+        }
+        if (!animate) {
+            return;
+        }
+        for (let i = 0, n = elements.length; i < n; i++) {
+            let element = elements[i];
+            if (element.hidden || leaving.has(element)) {
+                continue;
+            }
+            let last = element.getBoundingClientRect(), rect = first.get(element);
+            if (!rect) {
+                element.animate([{ opacity: 0, transform: 'scale(0.97)' }, { opacity: 1, transform: 'scale(1)' }], ENTER);
+                continue;
+            }
+            let x = rect.left - last.left, y = rect.top - last.top;
+            if (x !== 0 || y !== 0) {
+                element.animate([{ transform: `translate(${x}px, ${y}px)` }, { transform: 'none' }], MOVE);
+            }
+        }
+    }
+    let stop = effect(() => {
+        state.active;
+        untrack(() => {
+            let animate = !reduced();
+            place(animate);
+            update(animate);
+        });
+    });
+    onCleanup(() => {
+        observer?.disconnect();
+        stop();
+    });
+    return (() => {
+        let root_13mqa5i2 = template_13mqa5i3(), element_13mqa5i4 = root_13mqa5i2.firstChild, element_13mqa5i5 = element_13mqa5i4.firstElementChild, element_13mqa5i6 = element_13mqa5i5.nextElementSibling.firstElementChild, element_13mqa5i7 = element_13mqa5i6.nextElementSibling, element_13mqa5i8 = element_13mqa5i5.nextElementSibling.nextElementSibling;
+        template_u1.setProperties(element_13mqa5i4, attributes);
+        template_u1.setProperty(element_13mqa5i5, 'aria-controls', id);
+        template_u1.setProperty(element_13mqa5i5, 'aria-label', label);
+        template_u1.onconnect(element_13mqa5i5, (element) => {
+            group = element;
+            thumb = element.querySelector('.filter-grid-thumb') ?? undefined;
+            place(false);
+            observer = new ResizeObserver(() => place(false));
+            observer.observe(element);
+        });
+        template_u1.slot(element_13mqa5i5, filters.map((filter, index) => {
+            let root_13mqa5i9 = template_13mqa5ia(), element_13mqa5ib = root_13mqa5i9.firstChild, element_13mqa5ic = element_13mqa5ib.firstChild, element_13mqa5id = element_13mqa5ib.firstElementChild;
+            template_u1.setList(element_13mqa5ib, 'class', () => state.active === filter.id ? '--active' : '');
+            template_u1.setProperty(element_13mqa5ib, 'aria-checked', () => String(state.active === filter.id));
+            template_u1.setProperty(element_13mqa5ib, 'aria-label', template_u1.interpolate([(filter.label), ", ", (counts[filter.id]), " of ", (items.length)]));
+            template_u1.setProperty(element_13mqa5ib, 'tabindex', () => state.active === filter.id ? 0 : -1);
+            template_u1.delegate(element_13mqa5ib, 'click', () => select(filter.id));
+            template_u1.delegate(element_13mqa5ib, 'keydown', (event) => keydown(event, index));
+            template_u1.slot(element_13mqa5ic, filter.label);
+            template_u1.slot(element_13mqa5id, counts[filter.id], 1);
+            return root_13mqa5i9;
+        }), 2);
+        template_u1.setList(element_13mqa5i6, 'class', Math.ceil(items.length / cols) > Math.max(1, maxRows) ? 'filter-grid-items--capped' : '');
+        template_u1.setProperty(element_13mqa5i6, 'id', id);
+        template_u1.setList(element_13mqa5i6, 'style', template_u1.interpolate(["--columns: ", (cols)]));
+        template_u1.setList(element_13mqa5i6, 'style', template_u1.interpolate([" --gap: ", (gap), "px"]));
+        template_u1.setList(element_13mqa5i6, 'style', template_u1.interpolate([" --row-height: ", (rowHeight), "px"]));
+        template_u1.setList(element_13mqa5i6, 'style', template_u1.interpolate([" --rows: ", (rows)]));
+        template_u1.onconnect(element_13mqa5i6, (element) => {
+            elements = Array.from(element.children).filter((child) => child instanceof HTMLLIElement);
+            list = element;
+            update(false);
+        });
+        template_u1.slot(element_13mqa5i6, items.map((item) => {
+            let root_13mqa5ie = template_13mqa5if(), element_13mqa5ig = root_13mqa5ie.firstChild;
+            template_u1.slot(element_13mqa5ig, render(item), 1);
+            return root_13mqa5ie;
+        }), 1);
+        template_u1.setList(element_13mqa5i7, 'class', () => status.visible === 0 ? '--active' : '');
+        template_u1.slot(element_13mqa5i7, emptyLabel, 1);
+        new template_u1.EffectSlot(element_13mqa5i8, () => `${current()?.label ?? ''}: ${status.visible} of ${items.length} shown`, 1);
+        return root_13mqa5i2;
+    })();
+};

package/build/components/filter-grid/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.filter-grid{--empty-color:var(--color-text-300);--spacer:var(--size-300)}.filter-grid-count{--opacity:1}.filter-grid-filter{--border-color:var(--color-border-400);--border-color-focus:var(--color-blue-400);--border-radius:var(--border-radius-300);--color:var(--color-text-400);--color-active:var(--color-white-400);--count-color:var(--color-text-300);--font-size:var(--font-size-300);--font-weight:var(--font-weight-500);--height:var(--size-700);--padding-horizontal:var(--size-300);--transition-duration:.16s}.filter-grid-filters{--gap:var(--size-100)}.filter-grid-item{--background:var(--color-white-300);--border-color:var(--color-border-300);--border-radius:var(--border-radius-600);--box-shadow:var(--box-shadow-200);--padding:var(--size-300)}.filter-grid-thumb{--background:var(--color-black-400);--border-radius:var(--border-radius-300);--timing-function:cubic-bezier(.23, 1, .32, 1);--transition-duration:.28s}.filter-grid{width:100%;min-width:0}.filter-grid-body{margin-top:var(--spacer);position:relative}.filter-grid-count{font-variant:tabular-nums;opacity:var(--opacity);font-size:.84em}.filter-grid-empty{color:var(--empty-color);font-size:var(--font-size-300);opacity:0;pointer-events:none;place-items:center;transition:opacity .2s cubic-bezier(.23,1,.32,1);display:grid;position:absolute;inset:0}.filter-grid-empty.--active{opacity:1}.filter-grid-filter{border:var(--border-width-400) solid var(--border-color);border-radius:var(--border-radius);color:var(--color);cursor:pointer;font-size:var(--font-size);font-weight:var(--font-weight);align-items:center;gap:var(--size-200);height:var(--height);padding:0 var(--padding-horizontal);touch-action:manipulation;transition:border-color var(--transition-duration), color var(--transition-duration);-webkit-user-select:none;user-select:none;white-space:nowrap;background:0 0;outline:none;display:inline-flex;position:relative}.filter-grid-filter:focus-visible{border-color:var(--border-color-focus)}.filter-grid-filter.--active{--count-color:currentColor;--opacity:.7;color:var(--color-active);border-color:#0000}.filter-grid-filter .filter-grid-count{color:var(--count-color)}.filter-grid-filters{align-items:center;gap:var(--gap);isolation:isolate;flex-wrap:wrap;display:flex;position:relative}.filter-grid-item{background:var(--background);border:var(--border-width-400) solid var(--border-color);border-radius:var(--border-radius);box-shadow:var(--box-shadow);min-width:0;padding:var(--padding);overflow:hidden}.filter-grid-item.--leaving{pointer-events:none;position:absolute}.filter-grid-item[hidden]{display:none}.filter-grid-items{gap:var(--gap);grid-auto-rows:var(--row-height);grid-template-columns:repeat(var(--columns), minmax(0, 1fr));height:calc(var(--rows) * var(--row-height) + (var(--rows) - 1) * var(--gap));overscroll-behavior:contain;outline:none;margin:0;padding:0;list-style:none;display:grid;position:relative;overflow-y:auto}.filter-grid-items--capped{scrollbar-gutter:stable}.filter-grid-thumb{background:var(--background);border-radius:var(--border-radius);height:var(--height,0px);pointer-events:none;transition:height var(--transition-duration) var(--timing-function), translate var(--transition-duration) var(--timing-function), width var(--transition-duration) var(--timing-function);translate:var(--x,0px) var(--y,0px);width:var(--width,0px);z-index:-1;position:absolute;top:0;left:0}@media (prefers-reduced-motion:reduce){.filter-grid-empty,.filter-grid-filter,.filter-grid-thumb{transition:none}}}
+/*$vite$:1*/

package/build/components/form/action.js

@@ -1,7 +1,7 @@
 import response from '@esportsplus/action';
-import * as template_u0 from '@esportsplus/template';
+import * as template_u1 from '@esportsplus/template';
 import input from './input.js';
-const template_u14 = template_u0.template(`<form class='form' >`);
+const template_1ajnoyj1 = template_u1.template(`<form class='form'>`);
 function parse(input) {
     let data = {};
     for (let [path, value] of input) {
@@ -26,9 +26,9 @@ function parse(input) {
 ;
 export default ({ action, state, ...attributes }, content) => {
     return (() => {
-        let root_u13 = template_u14(), element_u15 = root_u13.firstChild;
-        template_u0.setProperties(element_u15, attributes);
-        template_u0.delegate(element_u15, 'click', function (event) {
+        let root_1ajnoyj0 = template_1ajnoyj1(), element_1ajnoyj2 = root_1ajnoyj0.firstChild;
+        template_u1.setProperties(element_1ajnoyj2, attributes);
+        template_u1.delegate(element_1ajnoyj2, 'click', function (event) {
             let trigger = event.target;
             if (trigger?.type !== 'submit') {
                 return;
@@ -36,7 +36,7 @@ export default ({ action, state, ...attributes }, content) => {
             event.preventDefault();
             this.dispatchEvent(new SubmitEvent('submit', { cancelable: true, bubbles: true, submitter: trigger }));
         });
-        template_u0.on(element_u15, 'submit', async function (event) {
+        template_u1.on(element_1ajnoyj2, 'submit', async function (event) {
             event.preventDefault();
             if (state) {
                 state.processing = true;
@@ -56,7 +56,7 @@ export default ({ action, state, ...attributes }, content) => {
                 state.processing = false;
             }
         });
-        template_u0.slot(element_u15, content, 1);
-        return root_u13;
+        template_u1.slot(element_1ajnoyj2, content, 1);
+        return root_1ajnoyj0;
     })();
 };

package/build/components/form/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.form{--gap-horizontal:0px;--gap-vertical:0px;--margin-horizontal:0px;--margin-vertical:0px;gap:var(--gap-vertical) var(--gap-horizontal);margin:var(--margin-vertical) var(--margin-horizontal);flex-wrap:wrap;justify-content:flex-start;display:flex;position:relative}}
+@layer components {.form{--gap-horizontal:0px;--gap-vertical:0px;--margin-horizontal:0px;--margin-vertical:0px;gap:var(--gap-vertical) var(--gap-horizontal);margin-block:var(--margin-vertical);margin-inline:var(--margin-horizontal);flex-wrap:wrap;justify-content:flex-start;display:flex;position:relative}}
 /*$vite$:1*/

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

@@ -0,0 +1,19 @@
+import * as template_u1 from '@esportsplus/template';
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    from?: string;
+    speed?: number;
+    to?: string;
+};
+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/gradient-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_0vtowoh1 = template_u1.template(`<span class='gradient-text'>`);
+export default component(function ({ from, speed = 1, to, ...attributes }, content) {
+    return (() => {
+        let root_0vtowoh0 = template_0vtowoh1(), element_0vtowoh2 = root_0vtowoh0.firstChild;
+        template_u1.setList(element_0vtowoh2, 'style', `--background-size: ${speed * 300}%;${from ? ` --color-from: ${from};` : ''}${to ? ` --color-to: ${to};` : ''}`);
+        template_u1.setProperties(element_0vtowoh2, this?.attributes);
+        template_u1.setProperties(element_0vtowoh2, attributes);
+        template_u1.slot(element_0vtowoh2, content, 1);
+        return root_0vtowoh0;
+    })();
+});

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

@@ -0,0 +1,2 @@
+@layer components {.gradient-text{--background-size:300%;--color-from:#ffaa40;--color-to:#9c40ff;--duration:8s;animation:gradient-text var(--duration) linear infinite;-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(to right, var(--color-from), var(--color-to), var(--color-from));background-size:var(--background-size) 100%;color:#0000}@media (prefers-reduced-motion:reduce){.gradient-text{animation:none}}@keyframes gradient-text{to{background-position:var(--background-size) 0}}}
+/*$vite$:1*/

package/build/components/grid/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.grid{--gap-horizontal:var(--size-400);--gap-vertical:var(--size-400);--max-width:1fr;--min-width:200px;grid-gap:var(--gap-vertical) var(--gap-horizontal);grid-template-columns:repeat(auto-fit, minmax(var(--min-width), var(--max-width)));display:grid;position:relative}.grid .grid-item{width:100%}}
+@layer components {.grid{--gap-horizontal:var(--size-400);--gap-vertical:var(--size-400);--max-width:1fr;--min-width:200px;gap:var(--gap-vertical) var(--gap-horizontal);grid-template-columns:repeat(auto-fit, minmax(var(--min-width), var(--max-width)));display:grid;position:relative}.grid .grid-item{width:100%}}
 /*$vite$:1*/

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

@@ -0,0 +1,41 @@
+import { type Attributes, type Renderable } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    brand?: Option;
+    onconnect?: never;
+    ondisconnect?: never;
+    options: Item[];
+    state?: {
+        active: boolean;
+        open: number | null;
+    };
+};
+type Item = Option & {
+    onclick?: never;
+    sections?: Section[];
+};
+type Link = Option & {
+    description?: Renderable<unknown>;
+    icon?: Renderable<unknown>;
+    onclick?: never;
+};
+type Option = Attributes & {
+    content: Renderable<unknown>;
+};
+type Section = {
+    columns?: number;
+    content?: Renderable<unknown>;
+    links?: Link[];
+    title?: Renderable<unknown>;
+};
+declare const _default: {
+    (): Renderable<any>;
+    <T extends A>(attributes: T): Renderable<any>;
+    <T extends Renderable<any>>(content: T): Renderable<any>;
+    (attributes: A, content?: Renderable<any>): Renderable<any>;
+    bind(context: {
+        attributes?: Partial<A> | undefined;
+        content?: Renderable<any>;
+    }): any;
+};
+export default _default;