@esportsplus/ui 0.54.0 → 0.56.2

package/build/components/header/index.js

@@ -0,0 +1,281 @@
+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

@@ -0,0 +1,2 @@
+@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/highlight/index.d.ts

@@ -0,0 +1,25 @@
+import * as template_u1 from '@esportsplus/template';
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    onconnect?: never;
+    ondisconnect?: never;
+    ondocumentfocusin?: never;
+    ondocumentfocusout?: never;
+    ondocumentpointercancel?: never;
+    ondocumentpointerdown?: never;
+    ondocumentpointerout?: never;
+    ondocumentpointerover?: never;
+    ondocumentpointerup?: never;
+};
+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/highlight/index.js

@@ -0,0 +1,218 @@
+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_0k38r592 = template_u1.template(`<div aria-hidden='true' class='highlight'>`);
+class ReactiveObject_0k38r590 extends reactivity_u0.ReactiveObject {
+    #height = this[reactivity_u0.SIGNAL](0);
+    #radius = this[reactivity_u0.SIGNAL]('0px');
+    #variant = this[reactivity_u0.SIGNAL]('');
+    #visible = this[reactivity_u0.SIGNAL](false);
+    #width = this[reactivity_u0.SIGNAL](0);
+    #x = this[reactivity_u0.SIGNAL](0);
+    #y = this[reactivity_u0.SIGNAL](0);
+    constructor() {
+        super(null);
+    }
+    get height() {
+        return reactivity_u0.read(this.#height);
+    }
+    set height(_v0) {
+        reactivity_u0.write(this.#height, _v0);
+    }
+    get radius() {
+        return reactivity_u0.read(this.#radius);
+    }
+    set radius(_v1) {
+        reactivity_u0.write(this.#radius, _v1);
+    }
+    get variant() {
+        return reactivity_u0.read(this.#variant);
+    }
+    set variant(_v2) {
+        reactivity_u0.write(this.#variant, _v2);
+    }
+    get visible() {
+        return reactivity_u0.read(this.#visible);
+    }
+    set visible(_v3) {
+        reactivity_u0.write(this.#visible, _v3);
+    }
+    get width() {
+        return reactivity_u0.read(this.#width);
+    }
+    set width(_v4) {
+        reactivity_u0.write(this.#width, _v4);
+    }
+    get x() {
+        return reactivity_u0.read(this.#x);
+    }
+    set x(_v5) {
+        reactivity_u0.write(this.#x, _v5);
+    }
+    get y() {
+        return reactivity_u0.read(this.#y);
+    }
+    set y(_v6) {
+        reactivity_u0.write(this.#y, _v6);
+    }
+}
+function active(parent, self) {
+    let children = parent.children;
+    for (let i = 0, n = children.length; i < n; i++) {
+        let child = children[i];
+        if (child !== self && child.classList.contains('--active')) {
+            return child;
+        }
+    }
+    return null;
+}
+function sibling(parent, self, node) {
+    let element = node instanceof Element ? node : null;
+    while (element && element.parentElement !== parent) {
+        element = element.parentElement;
+    }
+    if (!element || element === self || element.classList.contains('--disabled')) {
+        return null;
+    }
+    return element;
+}
+export default component((attributes) => {
+    let focused = null, hovered = null, mutations, parent = null, pressed = false, resize, self = null, state = new ReactiveObject_0k38r590();
+    function release() {
+        if (pressed) {
+            pressed = false;
+            update();
+        }
+    }
+    function update() {
+        if (!parent || !self) {
+            return;
+        }
+        if (hovered?.parentElement !== parent) {
+            hovered = null;
+        }
+        if (focused?.parentElement !== parent) {
+            focused = null;
+        }
+        let target = hovered || focused || active(parent, self);
+        if (!target) {
+            state.visible = false;
+            return;
+        }
+        let box = parent.getBoundingClientRect(), rect = target.getBoundingClientRect();
+        state.height = rect.height;
+        state.radius = getComputedStyle(target).borderRadius;
+        state.variant = target.classList.contains('--active')
+            ? '--active'
+            : pressed && target === hovered ? '--pressed' : '--hover';
+        state.visible = true;
+        state.width = rect.width;
+        state.x = rect.left - box.left - parent.clientLeft + parent.scrollLeft;
+        state.y = rect.top - box.top - parent.clientTop + parent.scrollTop;
+    }
+    return (() => {
+        let root_0k38r591 = template_0k38r592(), element_0k38r593 = root_0k38r591.firstChild;
+        template_u1.setProperties(element_0k38r593, attributes);
+        template_u1.setList(element_0k38r593, 'class', () => `${state.variant}${state.visible ? ' --visible' : ''}`);
+        template_u1.onconnect(element_0k38r593, (element) => {
+            let container = element.parentElement;
+            if (!container) {
+                return;
+            }
+            parent = container;
+            self = element;
+            mutations = new MutationObserver((records) => {
+                let changed = false;
+                for (let i = 0, n = records.length; i < n; i++) {
+                    let record = records[i];
+                    if (record.target === element) {
+                        continue;
+                    }
+                    changed = true;
+                    for (let node of record.addedNodes) {
+                        if (node instanceof Element) {
+                            resize?.observe(node);
+                        }
+                    }
+                    for (let node of record.removedNodes) {
+                        if (node instanceof Element) {
+                            resize?.unobserve(node);
+                        }
+                    }
+                }
+                if (changed) {
+                    update();
+                }
+            });
+            mutations.observe(container, { attributeFilter: ['class'], attributes: true, childList: true, subtree: true });
+            resize = new ResizeObserver(update);
+            resize.observe(container);
+            for (let child of container.children) {
+                if (child !== element) {
+                    resize.observe(child);
+                }
+            }
+            update();
+        });
+        template_u1.ondisconnect(element_0k38r593, () => {
+            mutations?.disconnect();
+            mutations = undefined;
+            resize?.disconnect();
+            resize = undefined;
+            focused = null;
+            hovered = null;
+            parent = null;
+            self = null;
+        });
+        template_u1.ondocument(element_0k38r593, 'focusin', (e) => {
+            if (!parent || !self || !parent.contains(e.target)) {
+                return;
+            }
+            focused = e.target.matches(':focus-visible') ? sibling(parent, self, e.target) : null;
+            update();
+        });
+        template_u1.ondocument(element_0k38r593, 'focusout', (e) => {
+            if (!parent?.contains(e.target) || parent.contains(e.relatedTarget)) {
+                return;
+            }
+            focused = null;
+            update();
+        });
+        template_u1.ondocument(element_0k38r593, 'pointercancel', release);
+        template_u1.ondocument(element_0k38r593, 'pointerdown', (e) => {
+            let target = parent && self ? sibling(parent, self, e.target) : null;
+            if (!target) {
+                return;
+            }
+            hovered = target;
+            pressed = true;
+            update();
+        });
+        template_u1.ondocument(element_0k38r593, 'pointerout', (e) => {
+            if (!parent?.contains(e.target) || parent.contains(e.relatedTarget)) {
+                return;
+            }
+            hovered = null;
+            pressed = false;
+            update();
+        });
+        template_u1.ondocument(element_0k38r593, 'pointerover', (e) => {
+            let target = parent && self ? sibling(parent, self, e.target) : null;
+            if (!target || target === hovered) {
+                return;
+            }
+            hovered = target;
+            update();
+        });
+        template_u1.ondocument(element_0k38r593, 'pointerup', release);
+        template_u1.setList(element_0k38r593, 'style', () => `
+                        --border-radius: ${state.radius};
+                        --height: ${state.height}px;
+                        --width: ${state.width}px;
+                        --x: ${state.x}px;
+                        --y: ${state.y}px;
+                    `);
+        return root_0k38r591;
+    })();
+});

package/build/components/highlight/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.highlight{--background:var(--background-default);--background-active:color-mix(in srgb, currentColor 10%, transparent);--background-default:color-mix(in srgb, currentColor 6%, transparent);--background-hover:var(--background-default);--background-pressed:color-mix(in srgb, currentColor 14%, transparent);--fade-duration:.2s;--glide-duration:.6s;--glide-timing-function:linear(0, .035, .123, .239, .367, .494, .611, .715, .803, .874, .929, .971, 1, 1.02, 1.032, 1.037, 1.038, 1.037, 1.033, 1.028, 1.024, 1.019, 1.014, 1.01, 1);--scale-hidden:.92}.highlight.--active{--background:var(--background-active)}.highlight.--hover{--background:var(--background-hover)}.highlight.--pressed{--background:var(--background-pressed)}.highlight{background:var(--background);border-radius:var(--border-radius);height:var(--height);opacity:0;pointer-events:none;scale:var(--scale-hidden);transition:background var(--transition-duration) var(--transition-timing-function), border-radius var(--glide-duration) var(--glide-timing-function), display var(--fade-duration) allow-discrete, height var(--glide-duration) var(--glide-timing-function), opacity var(--fade-duration) var(--transition-timing-function), scale var(--fade-duration) var(--transition-timing-function), translate var(--glide-duration) var(--glide-timing-function), width var(--glide-duration) var(--glide-timing-function);translate:var(--x) var(--y);width:var(--width);z-index:-1;display:none;position:absolute;top:0;left:0}.highlight.--visible{opacity:1;display:block;scale:1}@starting-style{.highlight.--visible{opacity:0;scale:var(--scale-hidden)}}@media (prefers-reduced-motion:reduce){.highlight{transition:background var(--transition-duration) var(--transition-timing-function)}}:where(:has(>.highlight)){isolation:isolate;position:relative}}
+/*$vite$:1*/

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

@@ -0,0 +1,47 @@
+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 };