@esportsplus/ui 0.56.3 → 0.57.0

package/build/components/header/index.js

@@ -1,281 +0,0 @@
-import * as reactivity_u0 from '@esportsplus/reactivity';
-import * as template_u1 from '@esportsplus/template';
-import { component } from '@esportsplus/template';
-import accordion from '../accordion/index.js';
-import './scss/index.scss';
-const template_0b7u5504 = template_u1.template(`<a class='header-brand'>`);
-const template_0b7u5506 = template_u1.template(`<svg class='header-chevron' aria-hidden='true' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' viewBox='0 0 24 24'><path d='m6 9 6 6 6-6' />`);
-const template_0b7u5508 = template_u1.template(`<a class='header-link '><!--$--><span class='header-link-body'><span class='header-link-title'>`);
-const template_0b7u550e = template_u1.template(`<span class='header-link-icon' aria-hidden='true'>`);
-const template_0b7u550h = template_u1.template(`<span class='header-link-description'>`);
-const template_0b7u550k = template_u1.template(`<header class='header'><div class='header-bar'><div class='header-container'><div class='header-row'><div class='header-rule' aria-hidden='true'></div><div class='header-start'><!--$--><nav class='header-nav' aria-label='Primary'><ul class='header-nav-list'></ul></nav><button class='header-toggle' type='button'><svg class='header-toggle-icon header-toggle-icon--open' aria-hidden='true' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'><path d='M4 6h16M4 12h16M4 18h16' /></svg><svg class='header-toggle-icon header-toggle-icon--close' aria-hidden='true' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'><path d='M18 6 6 18M6 6l12 12' /></svg></button></div><nav class='header-drawer' aria-label='Primary'></nav><div class='header-actions'></div></div><div class='header-viewport'>`);
-const template_0b7u550u = template_u1.template(`<li><a class='header-trigger'>`);
-const template_0b7u550x = template_u1.template(`<li><button class='header-trigger' type='button'><!--$-->`);
-const template_0b7u55011 = template_u1.template(`<a class='header-drawer-link'>`);
-const template_0b7u55014 = template_u1.template(`<div class='header-drawer-group'><button class='header-drawer-trigger' type='button'><!--$-->`);
-const template_0b7u55019 = template_u1.template(`<ul class='header-drawer-links'>`);
-const template_0b7u5501c = template_u1.template(`<li>`);
-const template_0b7u5501f = template_u1.template(`<div class='header-panel'>`);
-const template_0b7u5501i = template_u1.template(`<div class='header-section'><!--$--><!--$-->`);
-const template_0b7u5501n = template_u1.template(`<span class='header-section-title'>`);
-const template_0b7u5501q = template_u1.template(`<ul class='header-section-links'>`);
-class ReactiveObject_0b7u5500 extends reactivity_u0.ReactiveObject {
-    #active = this[reactivity_u0.SIGNAL](false);
-    #open;
-    constructor(_p0) {
-        super(null);
-        this.#open = this[reactivity_u0.SIGNAL](_p0);
-    }
-    get active() {
-        return reactivity_u0.read(this.#active);
-    }
-    set active(_v0) {
-        reactivity_u0.write(this.#active, _v0);
-    }
-    get open() {
-        return reactivity_u0.read(this.#open);
-    }
-    set open(_v1) {
-        reactivity_u0.write(this.#open, _v1);
-    }
-}
-class ReactiveObject_0b7u5501 extends reactivity_u0.ReactiveObject {
-    #height = this[reactivity_u0.SIGNAL](0);
-    #scrolled = this[reactivity_u0.SIGNAL](false);
-    constructor() {
-        super(null);
-    }
-    get height() {
-        return reactivity_u0.read(this.#height);
-    }
-    set height(_v0) {
-        reactivity_u0.write(this.#height, _v0);
-    }
-    get scrolled() {
-        return reactivity_u0.read(this.#scrolled);
-    }
-    set scrolled(_v1) {
-        reactivity_u0.write(this.#scrolled, _v1);
-    }
-}
-class ReactiveObject_0b7u5502 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 THRESHOLD = 50;
-function brandmark({ content, ...attributes }) {
-    return (() => {
-        let root_0b7u5503 = template_0b7u5504(), element_0b7u5505 = root_0b7u5503.firstChild;
-        template_u1.setProperties(element_0b7u5505, attributes);
-        template_u1.slot(element_0b7u5505, content, 1);
-        return root_0b7u5503;
-    })();
-}
-function chevron() {
-    return template_0b7u5506();
-}
-function link({ content, description, icon, ...attributes }, close) {
-    return (() => {
-        let root_0b7u5507 = template_0b7u5508(), element_0b7u5509 = root_0b7u5507.firstChild, element_0b7u550a = element_0b7u5509.firstChild, element_0b7u550b = element_0b7u5509.firstElementChild.firstElementChild, element_0b7u550c = element_0b7u5509.firstElementChild;
-        template_u1.setList(element_0b7u5509, 'class', description ? 'header-link--rich' : '');
-        template_u1.setProperties(element_0b7u5509, attributes);
-        template_u1.delegate(element_0b7u5509, 'click', close);
-        template_u1.slot(element_0b7u550a, icon ? (() => {
-            let root_0b7u550d = template_0b7u550e(), element_0b7u550f = root_0b7u550d.firstChild;
-            template_u1.slot(element_0b7u550f, icon, 1);
-            return root_0b7u550d;
-        })() : '');
-        template_u1.slot(element_0b7u550b, content, 1);
-        template_u1.slot(element_0b7u550c, description ? (() => {
-            let root_0b7u550g = template_0b7u550h(), element_0b7u550i = root_0b7u550g.firstChild;
-            template_u1.slot(element_0b7u550i, description, 1);
-            return root_0b7u550g;
-        })() : '', 2);
-        return root_0b7u5507;
-    })();
-}
-function scroller(element) {
-    for (let parent = element.parentElement; parent && parent !== document.body; parent = parent.parentElement) {
-        let overflow = getComputedStyle(parent).overflowY;
-        if (overflow === 'auto' || overflow === 'scroll') {
-            return parent;
-        }
-    }
-    return null;
-}
-export default component(function ({ brand, options, state = new ReactiveObject_0b7u5500(null), ...attributes }, content) {
-    let close = () => {
-        hovered = false;
-        state.active = false;
-        state.open = null;
-    }, hovered = false, local = new ReactiveObject_0b7u5501(), open = (trigger, index) => {
-        local.height = trigger.closest('.header')?.querySelector(`.header-panel[data-index='${index}']`)?.offsetHeight ?? 0;
-        state.open = index;
-    }, stop;
-    return (() => {
-        let root_0b7u550j = template_0b7u550k(), element_0b7u550l = root_0b7u550j.firstChild, element_0b7u550m = element_0b7u550l.firstElementChild, element_0b7u550n = element_0b7u550m.firstElementChild.firstElementChild.firstElementChild.nextElementSibling.firstChild, element_0b7u550o = element_0b7u550m.firstElementChild.firstElementChild.firstElementChild.nextElementSibling.firstElementChild.firstElementChild, element_0b7u550p = element_0b7u550m.firstElementChild.firstElementChild.firstElementChild.nextElementSibling.firstElementChild.nextElementSibling, element_0b7u550q = element_0b7u550m.firstElementChild.firstElementChild.firstElementChild.nextElementSibling.nextElementSibling, element_0b7u550r = element_0b7u550q.nextElementSibling, element_0b7u550s = element_0b7u550m.firstElementChild.firstElementChild.nextElementSibling;
-        template_u1.setProperties(element_0b7u550l, attributes);
-        template_u1.setList(element_0b7u550l, 'class', [
-            () => state.active && '--active',
-            () => state.open !== null && '--open',
-            () => local.scrolled && '--scrolled'
-        ]);
-        template_u1.ondocument(element_0b7u550l, 'click', function (event) {
-            if (state.open === null || !this?.isConnected) {
-                return;
-            }
-            if (!this.contains(event.target)) {
-                close();
-            }
-        });
-        template_u1.ondocument(element_0b7u550l, 'keydown', (event) => {
-            if (event.key === 'Escape') {
-                close();
-            }
-        });
-        template_u1.onconnect(element_0b7u550l, (element) => {
-            let target = scroller(element), host = target ?? window, listener = { capture: !target, passive: true }, update = () => {
-                local.scrolled = (target
-                    ? target.scrollTop
-                    : Math.max(document.body.scrollTop, document.documentElement.scrollTop)) > THRESHOLD;
-            };
-            host.addEventListener('scroll', update, listener);
-            stop = () => host.removeEventListener('scroll', update, listener);
-            update();
-        });
-        template_u1.ondisconnect(element_0b7u550l, () => {
-            stop?.();
-        });
-        template_u1.on(element_0b7u550m, 'mouseleave', () => {
-            if (hovered) {
-                close();
-            }
-        });
-        template_u1.setList(element_0b7u550m, 'style', () => `--viewport-height: ${local.height}px`);
-        template_u1.slot(element_0b7u550n, brand ? brandmark({ 'aria-label': 'home', href: '/', ...brand }) : '');
-        template_u1.slot(element_0b7u550o, options.map(({ content, sections, ...option }, index) => {
-            if (!sections) {
-                return (() => {
-                    let root_0b7u550t = template_0b7u550u(), element_0b7u550v = root_0b7u550t.firstChild.firstElementChild;
-                    template_u1.setProperties(element_0b7u550v, option);
-                    template_u1.delegate(element_0b7u550v, 'click', close);
-                    template_u1.delegate(element_0b7u550v, 'pointerover', (event) => {
-                        if (event.pointerType === 'mouse' && hovered) {
-                            state.open = null;
-                        }
-                    });
-                    template_u1.slot(element_0b7u550v, content, 1);
-                    return root_0b7u550t;
-                })();
-            }
-            return (() => {
-                let root_0b7u550w = template_0b7u550x(), element_0b7u550y = root_0b7u550w.firstChild.firstElementChild, element_0b7u550z = element_0b7u550y.firstChild;
-                template_u1.setProperties(element_0b7u550y, option);
-                template_u1.setProperty(element_0b7u550y, 'aria-expanded', () => String(state.open === index));
-                template_u1.setList(element_0b7u550y, 'class', () => state.open === index && '--active');
-                template_u1.delegate(element_0b7u550y, 'click', function () {
-                    if (hovered && state.open === index) {
-                        hovered = false;
-                    }
-                    else if (state.open === index) {
-                        state.open = null;
-                    }
-                    else {
-                        hovered = false;
-                        open(this, index);
-                    }
-                });
-                template_u1.delegate(element_0b7u550y, 'pointerover', function (event) {
-                    if (event.pointerType !== 'mouse' || state.open === index) {
-                        return;
-                    }
-                    hovered = true;
-                    open(this, index);
-                });
-                template_u1.slot(element_0b7u550z, content);
-                template_u1.slot(element_0b7u550y, chevron(), 2);
-                return root_0b7u550w;
-            })();
-        }), 1);
-        template_u1.setProperty(element_0b7u550p, 'aria-expanded', () => String(state.active));
-        template_u1.setProperty(element_0b7u550p, 'aria-label', () => state.active ? 'Close menu' : 'Open menu');
-        template_u1.delegate(element_0b7u550p, 'click', () => {
-            state.active = !state.active;
-        });
-        template_u1.setProperty(element_0b7u550q, 'inert', () => !state.active);
-        template_u1.slot(element_0b7u550q, options.map(({ content, sections, ...option }) => {
-            if (!sections) {
-                return (() => {
-                    let root_0b7u55010 = template_0b7u55011(), element_0b7u55012 = root_0b7u55010.firstChild;
-                    template_u1.setProperties(element_0b7u55012, option);
-                    template_u1.delegate(element_0b7u55012, 'click', close);
-                    template_u1.slot(element_0b7u55012, content, 1);
-                    return root_0b7u55010;
-                })();
-            }
-            let group = new ReactiveObject_0b7u5502();
-            return (() => {
-                let root_0b7u55013 = template_0b7u55014(), element_0b7u55015 = root_0b7u55013.firstChild, element_0b7u55016 = element_0b7u55015.firstElementChild, element_0b7u55017 = element_0b7u55016.firstChild;
-                template_u1.setList(element_0b7u55015, 'class', () => group.active && '--active');
-                template_u1.setProperty(element_0b7u55016, 'aria-expanded', () => String(group.active));
-                template_u1.delegate(element_0b7u55016, 'click', () => {
-                    group.active = !group.active;
-                });
-                template_u1.slot(element_0b7u55017, content);
-                template_u1.slot(element_0b7u55016, chevron(), 2);
-                template_u1.slot(element_0b7u55015, accordion({ state: group }, (() => {
-                    let root_0b7u55018 = template_0b7u55019(), element_0b7u5501a = root_0b7u55018.firstChild;
-                    template_u1.slot(element_0b7u5501a, sections.flatMap((section) => section.links ?? []).map((l) => {
-                        let root_0b7u5501b = template_0b7u5501c(), element_0b7u5501d = root_0b7u5501b.firstChild;
-                        template_u1.slot(element_0b7u5501d, link({ ...l, description: undefined }, close), 1);
-                        return root_0b7u5501b;
-                    }), 1);
-                    return root_0b7u55018;
-                })()), 2);
-                return root_0b7u55013;
-            })();
-        }), 1);
-        template_u1.slot(element_0b7u550r, content, 1);
-        template_u1.slot(element_0b7u550s, options.map(({ sections }, index) => sections ? (() => {
-            let root_0b7u5501e = template_0b7u5501f(), element_0b7u5501g = root_0b7u5501e.firstChild;
-            template_u1.setProperty(element_0b7u5501g, 'data-index', index);
-            template_u1.setList(element_0b7u5501g, 'class', () => {
-                if (state.open === null) {
-                    return;
-                }
-                return state.open === index ? '--active' : (index < state.open ? '--before' : '--after');
-            });
-            template_u1.setProperty(element_0b7u5501g, 'inert', () => state.open !== index);
-            template_u1.slot(element_0b7u5501g, sections.map((section) => {
-                let root_0b7u5501h = template_0b7u5501i(), element_0b7u5501j = root_0b7u5501h.firstChild, element_0b7u5501k = element_0b7u5501j.firstChild, element_0b7u5501l = element_0b7u5501k.nextSibling;
-                template_u1.setList(element_0b7u5501j, 'style', template_u1.interpolate(["--columns: ", (section.columns ?? 1)]));
-                template_u1.slot(element_0b7u5501k, section.title ? (() => {
-                    let root_0b7u5501m = template_0b7u5501n(), element_0b7u5501o = root_0b7u5501m.firstChild;
-                    template_u1.slot(element_0b7u5501o, section.title, 1);
-                    return root_0b7u5501m;
-                })() : '');
-                template_u1.slot(element_0b7u5501l, section.links ? (() => {
-                    let root_0b7u5501p = template_0b7u5501q(), element_0b7u5501r = root_0b7u5501p.firstChild;
-                    template_u1.slot(element_0b7u5501r, section.links.map((l) => {
-                        let root_0b7u5501s = template_0b7u5501c(), element_0b7u5501t = root_0b7u5501s.firstChild;
-                        template_u1.slot(element_0b7u5501t, link(l, close), 1);
-                        return root_0b7u5501s;
-                    }), 1);
-                    return root_0b7u5501p;
-                })() : '');
-                template_u1.slot(element_0b7u5501j, section.content ?? '', 2);
-                return root_0b7u5501h;
-            }), 1);
-            return root_0b7u5501e;
-        })() : ''), 1);
-        return root_0b7u550j;
-    })();
-});

package/build/components/header/scss/index.scss

@@ -1,2 +0,0 @@
-@layer components {.header{--backdrop:color-mix(in srgb, var(--canvas) 50%, transparent);--blur:8px;--border-color:color-mix(in srgb, var(--foreground) 5%, transparent);--canvas:var(--color-white-400);--color-link:var(--color-text-300);--color-link-active:var(--color-text-500);--divider:color-mix(in srgb, var(--foreground) 10%, transparent);--ease:cubic-bezier(.645, .045, .355, 1);--ease-out:cubic-bezier(.215, .61, .355, 1);--foreground:var(--color-text-500);--height:72px;--height-mobile:56px;--max-width:1152px;--muted:color-mix(in srgb, var(--foreground) 5%, transparent);--panel-enter:.2s;--panel-exit:.15s;--panel-shift:16px;--screen:100svh;--surface:color-mix(in srgb, var(--canvas) 75%, transparent);z-index:50;height:0;position:sticky;top:0;container:header/inline-size}.header:before{-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));background:var(--backdrop);content:"";height:var(--screen);opacity:0;pointer-events:none;transition:opacity .2s var(--ease), visibility 0s .2s;visibility:hidden;position:absolute;inset:0 0 auto}.header.--open:before{opacity:1;visibility:visible;transition-delay:0s}.header.--scrolled .header-bar{-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));background:var(--surface);border-bottom-color:var(--border-color)}@container header (width<1024px){.header.--active .header-actions{display:flex}.header.--active .header-bar{-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));background:var(--surface);height:var(--screen);overflow-y:auto}.header.--active .header-drawer{display:block}}.header.--active .header-toggle-icon--close{opacity:1;rotate:0deg;scale:1}.header.--active .header-toggle-icon--open{opacity:0;rotate:180deg;scale:0}.header-actions{gap:var(--size-300);margin-block:var(--size-600);flex-direction:column;width:100%;display:none}@container header (width>=640px){.header-actions{flex-direction:row}}.header-bar{border-bottom:var(--border-width-400) solid transparent;height:var(--height-mobile);transition:backdrop-filter .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), height .2s var(--ease);position:absolute;inset:0 0 auto;overflow:hidden}.header-brand{color:var(--foreground);align-items:center;gap:var(--size-100);text-decoration:none;display:flex}.header-brand svg{width:auto;height:20px}.header-chevron{opacity:.75;height:12px;transition:translate .15s var(--ease);width:12px;margin-left:6px;position:relative;top:1px}.header-container{max-width:var(--max-width);padding-inline:var(--size-600);margin-inline:auto}.header-drawer{width:100%;display:none}.header-drawer-group{border-bottom:var(--border-width-400) solid var(--divider)}.header-drawer-group.--active .header-chevron{rotate:180deg}.header-drawer-link,.header-drawer-trigger{color:var(--foreground);cursor:pointer;font-size:1.125rem;font-weight:var(--font-weight-500);padding:var(--size-300) 0;background:0 0;border:0;justify-content:space-between;align-items:center;width:100%;text-decoration:none;display:flex}.header-drawer-link{border-bottom:var(--border-width-400) solid var(--divider);padding-block:var(--size-400)}.header-drawer-links{padding-bottom:var(--size-500)}.header-drawer-links .header-link{padding:var(--size-100) 0;align-items:center}.header-drawer-links .header-link:hover{background:0 0}.header-drawer-links .header-link-title{font-size:var(--font-size-400);font-weight:var(--font-weight-400)}.header-link{border-radius:var(--border-radius-300);color:var(--foreground);gap:var(--size-200);padding:var(--size-100);transition:background-color .15s var(--ease);outline:none;grid-template-columns:auto 1fr;text-decoration:none;display:grid}.header-link:hover,.header-link:focus-visible{background:var(--muted)}.header-link--rich .header-link-icon{background:radial-gradient(circle, transparent, color-mix(in srgb, var(--foreground) 3%, transparent)), var(--canvas);border-radius:var(--border-radius-400);box-shadow:0 0 0 1px var(--divider), 0 1px 2px 0 color-mix(in srgb, var(--foreground) 5%, transparent);width:36px;height:36px}.header-link--rich .header-link-icon svg{filter:drop-shadow(0 1px 1px color-mix(in srgb, var(--foreground) 6.5%, transparent))}.header-link-body{gap:2px;min-width:0;display:grid}.header-link-description{color:var(--color-link);text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;overflow:hidden}.header-link-icon{justify-content:center;align-items:center;display:flex}.header-link-icon svg{width:16px;height:16px}.header-link-title{font-size:.875rem;font-weight:var(--font-weight-500)}.header-nav{display:none}.header-drawer-links,.header-nav-list,.header-section-links{margin:0;padding-left:0;list-style:none}.header-nav-list{align-items:center;gap:var(--size-300);display:flex}.header-panel{gap:var(--size-400);opacity:0;padding:var(--size-500) 88px var(--size-900) 0;transition:opacity var(--panel-exit) var(--ease-out), translate var(--panel-exit) var(--ease-out), visibility 0s var(--panel-exit);visibility:hidden;grid-template-columns:repeat(4,minmax(0,1fr));display:grid;position:absolute;inset:0 0 auto}.header-panel.--after{translate:var(--panel-shift) 0}.header-panel.--before{translate:calc(var(--panel-shift) * -1) 0}.header-panel.--active{opacity:1;transition:opacity var(--panel-enter) var(--ease-out), translate var(--panel-enter) var(--ease-out), visibility 0s;visibility:visible}.header-row{flex-wrap:wrap;justify-content:space-between;align-items:center;display:flex;position:relative}.header-rule{background:linear-gradient(90deg, var(--foreground) 1px, transparent 1px) 0 0/4px 1px repeat-x;opacity:.2;height:1px;display:none;position:absolute;inset:auto 0 0}.header-section{align-content:start;gap:var(--size-200);grid-column:span var(--columns);display:grid}.header-section+.header-section{border-left:var(--border-width-400) solid var(--divider);padding-left:var(--size-400)}.header-section-links{gap:var(--size-100);grid-template-columns:repeat(var(--columns), minmax(0, 1fr));display:grid}.header-section-title{color:var(--color-link);font-size:.75rem;font-weight:var(--font-weight-500);margin-left:var(--size-100);text-transform:uppercase}.header-start{border-bottom:var(--border-width-400) solid var(--divider);align-items:center;gap:var(--size-700);height:var(--height-mobile);justify-content:space-between;width:100%;display:flex}.header-toggle{color:var(--foreground);cursor:pointer;z-index:1;background:0 0;border:0;margin:-10px -12px -10px -10px;padding:10px;display:block;position:relative}.header-toggle-icon{height:20px;transition:opacity .2s var(--ease), rotate .2s var(--ease), scale .2s var(--ease);width:20px;margin:auto;display:block}.header-toggle-icon--close{opacity:0;position:absolute;inset:0;rotate:-180deg;scale:0}.header-trigger{border-radius:var(--border-radius-300);color:var(--color-link);cursor:pointer;font-size:.875rem;font-weight:var(--font-weight-500);height:32px;padding:4px var(--size-400);transition:background-color .15s var(--ease), color .15s var(--ease);white-space:nowrap;background:0 0;border:0;outline:none;justify-content:center;align-items:center;text-decoration:none;display:inline-flex}.header-trigger:hover,.header-trigger:focus-visible,.header-trigger.--active{background:var(--muted);color:var(--color-link-active)}.header-trigger:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb, var(--foreground) 15%, transparent)}.header-trigger.--active .header-chevron{translate:0 1px}.header-viewport{display:none}@container header (width>=1024px){.header.--open .header-bar{-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));background:var(--surface);border-bottom-color:var(--border-color);box-shadow:0 0 0 1px var(--border-color), 0 10px 15px -3px color-mix(in srgb, var(--color-black-400) 6.5%, transparent);height:calc(var(--height) + var(--viewport-height))}.header.--open .header-rule{display:block}.header-actions{width:auto;margin:0;display:flex}.header-bar{height:var(--height)}.header-container{padding-inline:var(--size-800)}.header-drawer,.header-toggle{display:none}.header-nav{width:fit-content;height:fit-content;margin:auto;display:block;position:absolute;inset:0}.header-row{padding-block:var(--size-500)}.header-start{border-bottom:0;width:auto;height:auto}.header-viewport{opacity:0;transform-origin:top;transition:opacity var(--panel-exit) var(--ease-out), transform var(--panel-exit) var(--ease-out);display:block;position:relative;transform:perspective(1200px)rotateX(-8deg)scale(.96)}.header.--open .header-viewport{opacity:1;transition:opacity var(--panel-enter) var(--ease-out), transform var(--panel-enter) var(--ease-out);transform:perspective(1200px)rotateX(0)scale(1)}}@media (prefers-reduced-motion:reduce){.header:before,.header-bar,.header-chevron,.header-panel,.header-toggle-icon,.header-viewport{transition:none}}}
-/*$vite$:1*/

package/build/components/hover-card/index.d.ts

@@ -1,47 +0,0 @@
-import { type Attributes, type Renderable } from '@esportsplus/template';
-import './scss/index.scss';
-type A = Attributes & {
-    [HOVER_CARD_CONTENT]?: Attributes;
-    [HOVER_CARD_TRIGGER]?: Attributes;
-    card: Renderable<unknown>;
-    group?: Group;
-    label?: string;
-    ondocumentpointerdown?: never;
-    onfocusin?: never;
-    onfocusout?: never;
-    onkeydown?: never;
-    onpointerout?: never;
-    onpointerover?: never;
-    state?: {
-        active: boolean;
-    };
-};
-type Card = {
-    close: (instant: boolean) => void;
-    open: (instant: boolean, from?: DOMRect) => void;
-    rect: () => DOMRect | undefined;
-};
-type Group = {
-    close: VoidFunction;
-    release: (card: Card) => void;
-    request: (card: Card, immediate?: boolean) => void;
-};
-declare const HOVER_CARD_CONTENT: unique symbol;
-declare const HOVER_CARD_TRIGGER: unique symbol;
-declare function group(): Group;
-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;
-} & {
-    readonly content: typeof HOVER_CARD_CONTENT;
-    readonly group: typeof group;
-    readonly trigger: typeof HOVER_CARD_TRIGGER;
-};
-export default _default;
-export type { Group };

package/build/components/hover-card/index.js

@@ -1,197 +0,0 @@
-import * as reactivity_u0 from '@esportsplus/reactivity';
-import * as template_u1 from '@esportsplus/template';
-import { component } from '@esportsplus/template';
-import './scss/index.scss';
-const template_05z96jq2 = template_u1.template(`<span class='hover-card'><button class='hover-card-trigger' type='button'></button><span class='hover-card-content hover-card-content--s' role='group'><span class='hover-card-body'>`);
-class ReactiveObject_05z96jq0 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 CLOSE_GRACE = 150;
-const DEVELOP = { duration: 220, easing: 'cubic-bezier(0.23, 1, 0.32, 1)' };
-const EDGE = 12;
-const GAP = 8;
-const HOVER_CARD_CONTENT = Symbol.for('@esportsplus/ui/hover-card.content');
-const HOVER_CARD_TRIGGER = Symbol.for('@esportsplus/ui/hover-card.trigger');
-const OPEN_DELAY = 500;
-const SKIP_DELAY_FOR = 300;
-const TRAVEL = { duration: 260, easing: 'cubic-bezier(0.32, 0.72, 0, 1)' };
-let uid = 0;
-function group() {
-    let closeTimer, closedAt = -Infinity, current = null, last = null, openTimer;
-    function commit(next, instant = false, from) {
-        let previous = current;
-        if (previous && previous !== next) {
-            if (!next) {
-                closedAt = performance.now();
-                last = previous.rect() ?? null;
-            }
-            previous.close(next !== null);
-        }
-        current = next;
-        next?.open(instant, from);
-    }
-    return {
-        close: () => {
-            clearTimeout(closeTimer);
-            clearTimeout(openTimer);
-            if (current) {
-                commit(null);
-            }
-        },
-        release: (card) => {
-            clearTimeout(openTimer);
-            if (current !== card) {
-                return;
-            }
-            clearTimeout(closeTimer);
-            closeTimer = setTimeout(() => commit(null), CLOSE_GRACE);
-        },
-        request: (card, immediate) => {
-            clearTimeout(closeTimer);
-            if (current === card) {
-                return;
-            }
-            clearTimeout(openTimer);
-            let recent = performance.now() - closedAt < SKIP_DELAY_FOR;
-            if (current) {
-                commit(card, true, current.rect());
-            }
-            else if (recent && last) {
-                commit(card, true, last);
-            }
-            else if (immediate || recent) {
-                commit(card, false);
-            }
-            else {
-                openTimer = setTimeout(() => commit(card, false), OPEN_DELAY);
-            }
-        }
-    };
-}
-function place(element, root, trigger) {
-    let rect = trigger.getBoundingClientRect(), below = innerHeight - rect.bottom, south = below >= element.offsetHeight + GAP + EDGE || below >= rect.top, width = Math.min(element.offsetWidth, innerWidth - EDGE * 2), left = Math.min(Math.max(rect.left + rect.width / 2 - width / 2, EDGE), innerWidth - EDGE - width);
-    element.classList.toggle('hover-card-content--n', !south);
-    element.classList.toggle('hover-card-content--s', south);
-    element.style.left = `${left - root.getBoundingClientRect().left}px`;
-    element.style.transformOrigin = `${rect.left + rect.width / 2 - left}px ${south ? '0%' : '100%'}`;
-}
-function reduced() {
-    return matchMedia('(prefers-reduced-motion: reduce)').matches;
-}
-export default Object.assign(component(function ({ card, group: shared, label, state = new ReactiveObject_05z96jq0(), ...attributes }, content) {
-    let animations = [], body, element, id = `hover-card-${++uid}`, owner = shared ?? group(), pointer = 'mouse', root, self = {
-        close: (instant) => {
-            if (!element) {
-                return;
-            }
-            element.classList.toggle('--instant', instant);
-            element.classList.remove('--active');
-            state.active = false;
-        },
-        open: (instant, from) => {
-            if (!element || !body || !root || !trigger) {
-                return;
-            }
-            for (let i = 0, n = animations.length; i < n; i++) {
-                animations[i].cancel();
-            }
-            animations = [];
-            place(element, root, trigger);
-            element.classList.toggle('--instant', instant);
-            element.classList.add('--active');
-            state.active = true;
-            if (!from) {
-                return;
-            }
-            let to = element.getBoundingClientRect(), dx = from.left - to.left, dy = from.top - to.top, still = reduced();
-            if (!still && (dx || dy)) {
-                animations.push(element.animate({ translate: [`${dx}px ${dy}px`, '0 0'] }, TRAVEL));
-            }
-            animations.push(body.animate(still ? { opacity: [0, 1] } : { filter: ['blur(4px)', 'blur(0px)'], opacity: [0, 1] }, DEVELOP));
-        },
-        rect: () => element?.isConnected ? element.getBoundingClientRect() : undefined
-    }, trigger;
-    return (() => {
-        let root_05z96jq1 = template_05z96jq2(), element_05z96jq3 = root_05z96jq1.firstChild, element_05z96jq4 = element_05z96jq3.firstElementChild, element_05z96jq5 = element_05z96jq4.nextElementSibling, element_05z96jq6 = element_05z96jq5.firstElementChild;
-        template_u1.setProperties(element_05z96jq3, this?.attributes);
-        template_u1.setProperties(element_05z96jq3, attributes);
-        template_u1.ondocument(element_05z96jq3, 'pointerdown', (e) => {
-            if (state.active && root && !root.contains(e.target)) {
-                owner.close();
-            }
-        });
-        template_u1.on(element_05z96jq3, 'focusin', (e) => {
-            if (e.target === trigger && trigger?.matches(':focus-visible')) {
-                owner.request(self, true);
-            }
-        });
-        template_u1.on(element_05z96jq3, 'focusout', (e) => {
-            if (!root?.contains(e.relatedTarget)) {
-                owner.release(self);
-            }
-        });
-        template_u1.delegate(element_05z96jq3, 'keydown', (e) => {
-            if (e.key !== 'Escape' || !state.active) {
-                return;
-            }
-            owner.close();
-            trigger?.focus();
-        });
-        template_u1.delegate(element_05z96jq3, 'pointerout', (e) => {
-            if (e.pointerType === 'touch' || root?.contains(e.relatedTarget)) {
-                return;
-            }
-            owner.release(self);
-        });
-        template_u1.delegate(element_05z96jq3, 'pointerover', (e) => {
-            if (e.pointerType === 'touch' || root?.contains(e.relatedTarget)) {
-                return;
-            }
-            owner.request(self);
-        });
-        template_u1.onrender(element_05z96jq3, (el) => {
-            root = el;
-        });
-        template_u1.setProperties(element_05z96jq4, this?.attributes?.[HOVER_CARD_TRIGGER]);
-        template_u1.setProperties(element_05z96jq4, attributes[HOVER_CARD_TRIGGER]);
-        template_u1.setProperty(element_05z96jq4, 'aria-controls', () => state.active ? id : undefined);
-        template_u1.setProperty(element_05z96jq4, 'aria-expanded', () => state.active ? 'true' : 'false');
-        template_u1.delegate(element_05z96jq4, 'click', (e) => {
-            if (state.active && (e.detail === 0 || pointer === 'touch')) {
-                owner.close();
-            }
-            else {
-                owner.request(self, true);
-            }
-        });
-        template_u1.delegate(element_05z96jq4, 'pointerdown', (e) => {
-            pointer = e.pointerType;
-        });
-        template_u1.onrender(element_05z96jq4, (el) => {
-            trigger = el;
-        });
-        template_u1.slot(element_05z96jq4, content, 1);
-        template_u1.setProperty(element_05z96jq5, 'aria-label', label ?? '');
-        template_u1.setProperty(element_05z96jq5, 'id', id);
-        template_u1.setProperties(element_05z96jq5, this?.attributes?.[HOVER_CARD_CONTENT]);
-        template_u1.setProperties(element_05z96jq5, attributes[HOVER_CARD_CONTENT]);
-        template_u1.ondisconnect(element_05z96jq5, () => {
-            owner.release(self);
-        });
-        template_u1.onrender(element_05z96jq5, (el) => {
-            element = el;
-        });
-        template_u1.onrender(element_05z96jq6, (el) => { body = el; });
-        template_u1.slot(element_05z96jq6, card, 1);
-        return root_05z96jq1;
-    })();
-}), { content: HOVER_CARD_CONTENT, group, trigger: HOVER_CARD_TRIGGER });

package/build/components/hover-card/scss/index.scss

@@ -1,2 +0,0 @@
-@layer components {.hover-card{--card-background:var(--color-white-300);--card-color:var(--color-text-500);--card-font-size:calc(var(--font-size-400) * .875);--card-gap:8px;--card-line-height:20px;--card-padding:var(--size-400);--card-radius:var(--size-500);--card-shadow:0 0 0 1px oklch(from var(--color-black-300) l c h / .06), 0 1px 2px oklch(from var(--color-black-300) l c h / .06), 0 6px 16px -6px oklch(from var(--color-black-300) l c h / .12);--card-width:300px;--close-duration:.1s;--open-duration:.15s;--scale:.96;--timing-function:cubic-bezier(.23, 1, .32, 1);--trigger-color:var(--color-text-500);--trigger-decoration:color-mix(in srgb, var(--color-text-500) 25%, transparent);--trigger-decoration-active:var(--color-text-500)}.hover-card--fade{--scale:1}.hover-card{display:inline-block;position:relative}.hover-card-body{display:block}.hover-card-content{background:var(--card-background);border-radius:var(--card-radius);box-shadow:var(--card-shadow);color:var(--card-color);font-size:var(--card-font-size);font-weight:var(--font-weight-400);line-height:var(--card-line-height);opacity:0;max-width:calc(100vw - 24px);padding:var(--card-padding);pointer-events:none;scale:var(--scale);text-align:left;transition:opacity var(--close-duration) var(--timing-function), scale var(--close-duration) var(--timing-function), visibility 0s linear var(--close-duration);visibility:hidden;white-space:normal;width:var(--card-width);z-index:50;display:block;position:absolute}.hover-card-content:before{content:"";height:calc(var(--card-gap) + 4px);position:absolute;inset-inline:0}.hover-card-content--n{margin-bottom:var(--card-gap);bottom:100%}.hover-card-content--n:before{bottom:calc((var(--card-gap) + 4px) * -1)}.hover-card-content--s{margin-top:var(--card-gap);top:100%}.hover-card-content--s:before{top:calc((var(--card-gap) + 4px) * -1)}.hover-card-content.--active{opacity:1;pointer-events:auto;transition:opacity var(--open-duration) var(--timing-function), scale var(--open-duration) var(--timing-function), visibility 0s;visibility:visible;scale:1}.hover-card-content.--instant,.hover-card-content.--instant.--active{transition:none}.hover-card-trigger{border-radius:var(--border-radius-200);color:var(--trigger-color);cursor:pointer;font:inherit;font-weight:var(--font-weight-500);text-decoration:underline;-webkit-text-decoration-color:var(--trigger-decoration);-webkit-text-decoration-color:var(--trigger-decoration);text-decoration-color:var(--trigger-decoration);text-underline-offset:4px;transition:text-decoration-color var(--open-duration) ease-out;white-space:nowrap;background:0 0;border:0;outline:none;padding:0;text-decoration-thickness:1px}.hover-card-trigger:focus-visible{outline:var(--border-width-500) solid var(--trigger-color);outline-offset:var(--border-width-500)}.hover-card-trigger:hover,.hover-card-trigger[aria-expanded=true]{-webkit-text-decoration-color:var(--trigger-decoration-active);-webkit-text-decoration-color:var(--trigger-decoration-active);text-decoration-color:var(--trigger-decoration-active)}@media (prefers-reduced-motion:reduce){.hover-card-content{scale:1}}}
-/*$vite$:1*/

package/build/components/kanban-board/index.d.ts

@@ -1,23 +0,0 @@
-import { type Attributes } from '@esportsplus/template';
-import './scss/index.scss';
-type A = Attributes & {
-    columns: Column[];
-    label?: string;
-    onfocusin?: never;
-    onfocusout?: never;
-    onkeydown?: never;
-    onpointerdown?: never;
-    onsort?: (columns: Column[]) => void;
-};
-type Card = {
-    id: string;
-    title: string;
-};
-type Column = {
-    cards: Card[];
-    id: string;
-    title: string;
-};
-export default _default;
-declare function _default({ columns, label, onsort, ...attributes }: A): DocumentFragment | Text;
-export type { Card, Column };