@esportsplus/ui 0.56.2 → 0.56.4

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

@@ -1,2 +1,2 @@
-@layer components {.bento-grid{--background:var(--color-white-300);--border-radius:12px;--box-shadow:0 0 0 1px oklch(from var(--color-black-300) l c h / .03), 0 2px 4px oklch(from var(--color-black-300) l c h / .05), 0 12px 24px oklch(from var(--color-black-300) l c h / .05);--description-color:var(--color-text-300);--duration:.3s;--ease:cubic-bezier(.4, 0, .2, 1);--focus-color:oklch(from var(--color-text-500) l c h / .38);--gap:16px;--icon-color:var(--color-text-400);--icon-size:48px;--link-color:var(--color-text-500);--link-font-size:calc(var(--font-size-400) * .875);--name-color:var(--color-text-400);--name-font-size:var(--font-size-500);--overlay-hover:oklch(from var(--color-black-300) l c h / .03);--padding:16px;--row-height:22rem;gap:var(--gap);grid-auto-rows:var(--row-height);grid-template-columns:repeat(3,minmax(0,1fr));width:100%;display:grid;container-type:inline-size}.bento-grid-arrow{height:16px;transition:translate var(--duration) var(--ease);flex-shrink:0;width:16px}.bento-grid-background{pointer-events:none;position:absolute;inset:0}.bento-grid-background>*{pointer-events:auto}.bento-grid-body{padding:var(--padding);z-index:1;margin-top:auto;position:relative}.bento-grid-card{background:var(--background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);flex-direction:column;grid-column:span 3;justify-content:space-between;display:flex;position:relative;overflow:hidden}.bento-grid-content{pointer-events:none;transition:translate var(--duration) var(--ease);flex-direction:column;gap:4px;display:flex}.bento-grid-cta{padding:0 var(--padding) var(--padding);z-index:1;display:flex;position:relative}.bento-grid-description{color:var(--description-color);max-width:32rem;margin:0}.bento-grid-icon{color:var(--icon-color);height:var(--icon-size);transform-origin:0;transition:scale var(--duration) var(--ease);width:var(--icon-size);display:flex}.bento-grid-icon svg{width:100%;height:100%}.bento-grid-link{color:var(--link-color);font-size:var(--link-font-size);font-weight:var(--font-weight-500);outline:0 solid var(--focus-color);outline-offset:2px;text-underline-offset:4px;border-radius:4px;align-items:center;gap:8px;text-decoration:none;display:inline-flex}.bento-grid-link:focus-visible{outline-width:2px}.bento-grid-link:hover{text-decoration:underline}.bento-grid-link:hover .bento-grid-arrow{translate:2px}.bento-grid-name{color:var(--name-color);font-size:var(--name-font-size);font-weight:var(--font-weight-600);margin:0}.bento-grid-overlay{pointer-events:none;transition:background-color var(--duration) var(--ease);position:absolute;inset:0}.bento-grid-card:hover .bento-grid-overlay{background:var(--overlay-hover)}.bento-grid-card:hover .bento-grid-icon,.bento-grid-card:focus-within .bento-grid-icon{scale:.75}@container (width>=720px){.bento-grid-card{grid-column:span var(--span)}.bento-grid-cta{opacity:0;padding:var(--padding);transition:opacity var(--duration) var(--ease), translate var(--duration) var(--ease);bottom:0;position:absolute;inset-inline:0;translate:0 40px}.bento-grid-card:hover .bento-grid-content,.bento-grid-card:focus-within .bento-grid-content{translate:0 -40px}.bento-grid-card:hover .bento-grid-cta,.bento-grid-card:focus-within .bento-grid-cta{opacity:1;translate:0}}@media (prefers-reduced-motion:reduce){.bento-grid-arrow,.bento-grid-content,.bento-grid-icon{transition:none}.bento-grid-cta{translate:0!important}}}
+@layer components {.bento-grid{--background:var(--color-white-300);--border-radius:12px;--box-shadow:0 0 0 1px oklch(from var(--color-black-300) l c h / .03), 0 2px 4px oklch(from var(--color-black-300) l c h / .05), 0 12px 24px oklch(from var(--color-black-300) l c h / .05);--description-color:var(--color-text-300);--duration:.3s;--ease:cubic-bezier(.4, 0, .2, 1);--focus-color:oklch(from var(--color-text-500) l c h / .38);--gap:16px;--icon-color:var(--color-text-400);--icon-size:48px;--link-color:var(--color-text-500);--link-font-size:calc(var(--font-size-400) * .875);--name-color:var(--color-text-400);--name-font-size:var(--font-size-500);--overlay-hover:oklch(from var(--color-black-300) l c h / .03);--padding:16px;--row-height:22rem;gap:var(--gap);grid-auto-rows:var(--row-height);grid-template-columns:repeat(3,minmax(0,1fr));width:100%;display:grid;container-type:inline-size}.bento-grid-arrow{height:16px;transition:translate var(--duration) var(--ease);flex-shrink:0;width:16px}.bento-grid-background{pointer-events:none;position:absolute;inset:0}.bento-grid-background>*{pointer-events:auto}.bento-grid-body{padding:var(--padding);z-index:1;margin-top:auto;position:relative}.bento-grid-card{background:var(--background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);flex-direction:column;grid-column:span 3;justify-content:space-between;display:flex;position:relative;overflow:hidden}.bento-grid-content{pointer-events:none;transition:translate var(--duration) var(--ease);flex-direction:column;gap:4px;display:flex}.bento-grid-cta{padding:0 var(--padding) var(--padding);z-index:1;display:flex;position:relative}.bento-grid-description{color:var(--description-color);max-width:32rem;margin:0}.bento-grid-icon{color:var(--icon-color);height:var(--icon-size);transform-origin:0;transition:scale var(--duration) var(--ease);width:var(--icon-size);display:flex}.bento-grid-icon svg{width:100%;height:100%}.bento-grid-link{color:var(--link-color);font-size:var(--link-font-size);font-weight:var(--font-weight-500);outline:0 solid var(--focus-color);outline-offset:2px;text-underline-offset:4px;border-radius:4px;align-items:center;gap:8px;text-decoration:none;display:inline-flex}.bento-grid-link:focus-visible{outline-width:2px}.bento-grid-link:hover{text-decoration:underline}.bento-grid-link:hover .bento-grid-arrow{translate:2px}.bento-grid-name{color:var(--name-color);font-size:var(--name-font-size);font-weight:var(--font-weight-600);margin:0}.bento-grid-overlay{pointer-events:none;transition:background-color var(--duration) var(--ease);position:absolute;inset:0}.bento-grid-card:hover .bento-grid-overlay{background:var(--overlay-hover)}.bento-grid-card:hover .bento-grid-icon,.bento-grid-card:focus-within .bento-grid-icon{scale:.75}@container (width>=560px){.bento-grid-card{grid-column:span var(--span)}.bento-grid-cta{opacity:0;padding:var(--padding);transition:opacity var(--duration) var(--ease), translate var(--duration) var(--ease);bottom:0;position:absolute;inset-inline:0;translate:0 40px}.bento-grid-card:hover .bento-grid-content,.bento-grid-card:focus-within .bento-grid-content{translate:0 -40px}.bento-grid-card:hover .bento-grid-cta,.bento-grid-card:focus-within .bento-grid-cta{opacity:1;translate:0}}@media (prefers-reduced-motion:reduce){.bento-grid-arrow,.bento-grid-content,.bento-grid-icon{transition:none}.bento-grid-cta{translate:0!important}}}
 /*$vite$:1*/

package/build/components/index.d.ts

@@ -50,6 +50,7 @@ export { default as modal } from './modal/index.js';
 export { default as morphingButton } from './morphing-button/index.js';
 export { default as morphingNav } from './morphing-nav/index.js';
 export { default as multiStepForm } from './multi-step-form/index.js';
+export { default as navigationMenu } from './navigation-menu/index.js';
 export { default as nestedMenu } from './nested-menu/index.js';
 export { default as notificationBell } from './notification-bell/index.js';
 export { default as number } from './number/index.js';
@@ -58,6 +59,7 @@ export { default as overlay } from './overlay/index.js';
 export { default as pageDots } from './page-dots/index.js';
 export { default as pagination } from './pagination/index.js';
 export { default as password } from './password/index.js';
+export { default as planCard } from './plan-card/index.js';
 export { default as progress } from './progress/index.js';
 export { default as pullToRefresh } from './pull-to-refresh/index.js';
 export { default as radio } from './radio/index.js';
@@ -92,6 +94,7 @@ export { default as statusPicker } from './status-picker/index.js';
 export { default as stickyHeader } from './sticky-header/index.js';
 export { default as stickyStack } from './sticky-stack/index.js';
 export { default as storyProgress } from './story-progress/index.js';
+export { default as surfaceField } from './surface-field/index.js';
 export { default as swipeDeck } from './swipe-deck/index.js';
 export { default as switch } from './switch/index.js';
 export { default as tagInput } from './tag-input/index.js';

package/build/components/index.js

@@ -50,6 +50,7 @@ export { default as modal } from './modal/index.js';
 export { default as morphingButton } from './morphing-button/index.js';
 export { default as morphingNav } from './morphing-nav/index.js';
 export { default as multiStepForm } from './multi-step-form/index.js';
+export { default as navigationMenu } from './navigation-menu/index.js';
 export { default as nestedMenu } from './nested-menu/index.js';
 export { default as notificationBell } from './notification-bell/index.js';
 export { default as number } from './number/index.js';
@@ -58,6 +59,7 @@ export { default as overlay } from './overlay/index.js';
 export { default as pageDots } from './page-dots/index.js';
 export { default as pagination } from './pagination/index.js';
 export { default as password } from './password/index.js';
+export { default as planCard } from './plan-card/index.js';
 export { default as progress } from './progress/index.js';
 export { default as pullToRefresh } from './pull-to-refresh/index.js';
 export { default as radio } from './radio/index.js';
@@ -92,6 +94,7 @@ export { default as statusPicker } from './status-picker/index.js';
 export { default as stickyHeader } from './sticky-header/index.js';
 export { default as stickyStack } from './sticky-stack/index.js';
 export { default as storyProgress } from './story-progress/index.js';
+export { default as surfaceField } from './surface-field/index.js';
 export { default as swipeDeck } from './swipe-deck/index.js';
 export { default as switch } from './switch/index.js';
 export { default as tagInput } from './tag-input/index.js';

package/build/components/navigation-menu/index.d.ts

@@ -0,0 +1,28 @@
+import { type Attributes, type Renderable } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    [NAVIGATION_MENU_POPUP]?: Attributes;
+    [NAVIGATION_MENU_TRIGGER]?: Attributes;
+    align?: Align;
+    items: Item[];
+    label?: string;
+    state?: State;
+};
+type Align = 'center' | 'end' | 'start';
+type Item = {
+    content?: Renderable<unknown>;
+    href?: string;
+    label: string;
+};
+type State = {
+    active: number;
+};
+declare const NAVIGATION_MENU_POPUP: unique symbol;
+declare const NAVIGATION_MENU_TRIGGER: unique symbol;
+declare const navigationMenu: ({ align, items, label, state, ...attributes }: A) => DocumentFragment | Text;
+declare const _default: typeof navigationMenu & {
+    readonly popup: typeof NAVIGATION_MENU_POPUP;
+    readonly trigger: typeof NAVIGATION_MENU_TRIGGER;
+};
+export default _default;
+export type { Align, Item, State };

package/build/components/navigation-menu/index.js

@@ -0,0 +1,419 @@
+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_064zmt32 = template_u1.template(`<nav class='navigation-menu'><ul class='navigation-menu-list'><li aria-hidden='true' class='navigation-menu-pill'></li></ul><div class='navigation-menu-popup'><div class='navigation-menu-viewport'>`);
+const template_064zmt39 = template_u1.template(`<li class='navigation-menu-item'>`);
+const template_064zmt3c = template_u1.template(`<button class='navigation-menu-trigger' type='button'><!--$--><svg aria-hidden='true' class='navigation-menu-chevron' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'><path d='m8 9 4-4 4 4M16 15l-4 4-4-4' />`);
+const template_064zmt3g = template_u1.template(`<a class='navigation-menu-trigger navigation-menu-trigger--link'>`);
+const template_064zmt3j = template_u1.template(`<div class='navigation-menu-content'>`);
+class ReactiveObject_064zmt30 extends reactivity_u0.ReactiveObject {
+    #active = this[reactivity_u0.SIGNAL](-1);
+    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 COLLISION_PADDING = 16;
+const CONTENT_EASE = 'cubic-bezier(0.32, 0.72, 0, 1)';
+const EASE_OUT = 'cubic-bezier(0.23, 1, 0.32, 1)';
+const FOCUSABLE = 'a[href], button:not([disabled])';
+const NAVIGATION_MENU_POPUP = Symbol.for('@esportsplus/ui/navigation-menu.popup');
+const NAVIGATION_MENU_TRIGGER = Symbol.for('@esportsplus/ui/navigation-menu.trigger');
+const OPEN_INTENT = 50;
+const SIDE_OFFSET = 8;
+const SLIDE = 32;
+let uid = 0;
+function reduced() {
+    return matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+const navigationMenu = ({ align = 'start', items, label = 'Main', state, ...attributes }) => {
+    let closeTimer, current = -1, hiding, id = `navigation-menu-${++uid}`, inside = false, layers = [], list, nav, observer, openTimer, pill, popup, running = new Map(), s = state ?? new ReactiveObject_064zmt30(), triggers = [];
+    function animate(element, keyframes, duration, easing = CONTENT_EASE) {
+        running.get(element)?.cancel();
+        let animation = element.animate(keyframes, { duration, easing });
+        running.set(element, animation);
+        return animation;
+    }
+    function close(refocus = false) {
+        clearTimeout(openTimer);
+        clearTimeout(closeTimer);
+        let previous = current;
+        if (previous === -1) {
+            return;
+        }
+        current = -1;
+        s.active = -1;
+        hide();
+        if (refocus) {
+            triggers[previous]?.focus();
+        }
+        if (!inside) {
+            settle();
+        }
+    }
+    function focusables() {
+        let layer = current === -1 ? undefined : layers[current];
+        return layer ? [...layer.querySelectorAll(FOCUSABLE)] : [];
+    }
+    function hide() {
+        let element = popup;
+        if (!element) {
+            return;
+        }
+        hiding?.cancel();
+        let animation = element.animate([{}, reduced() ? { opacity: 0 } : { opacity: 0, transform: 'scale(0.96)' }], { duration: 160, easing: EASE_OUT, fill: 'forwards' });
+        hiding = animation;
+        animation.finished.then(() => {
+            element.classList.remove('--active');
+            animation.cancel();
+            for (let layer of layers) {
+                if (layer) {
+                    layer.classList.remove('--active', '--leaving');
+                    layer.inert = true;
+                }
+            }
+        }, () => { });
+    }
+    function open(index) {
+        clearTimeout(openTimer);
+        clearTimeout(closeTimer);
+        let previous = current;
+        if (previous === index || !layers[index]) {
+            return;
+        }
+        current = index;
+        s.active = index;
+        swap(previous, index);
+        place(previous === -1);
+        if (!inside) {
+            settle();
+        }
+    }
+    function pillTo(item) {
+        if (!list || !pill) {
+            return;
+        }
+        let bounds = list.getBoundingClientRect(), box = item.getBoundingClientRect(), element = pill, style = element.style;
+        style.height = `${box.height}px`;
+        style.top = `${box.top - bounds.top}px`;
+        style.translate = `${box.left - bounds.left}px 0`;
+        style.width = `${box.width}px`;
+        if (!element.classList.contains('--active')) {
+            element.getBoundingClientRect();
+            element.classList.add('--active');
+        }
+    }
+    function place(fresh) {
+        if (!nav || !popup || current === -1) {
+            return;
+        }
+        let layer = layers[current], trigger = triggers[current];
+        if (!layer || !trigger) {
+            return;
+        }
+        let box = trigger.getBoundingClientRect(), height = layer.offsetHeight, rect = nav.getBoundingClientRect(), viewport = document.documentElement.clientWidth, width = layer.offsetWidth, x = align === 'start'
+            ? box.left
+            : align === 'end'
+                ? box.right - width
+                : box.left + (box.width - width) / 2;
+        x = Math.max(COLLISION_PADDING, Math.min(x, viewport - COLLISION_PADDING - width));
+        let element = popup, style = element.style, update = () => {
+            style.height = `${height}px`;
+            style.transformOrigin = `${box.left + box.width / 2 - x}px ${-SIDE_OFFSET}px`;
+            style.translate = `${x - rect.left}px ${box.bottom - rect.top + SIDE_OFFSET}px`;
+            style.width = `${width}px`;
+        };
+        if (!fresh) {
+            update();
+            return;
+        }
+        hiding?.cancel();
+        hiding = undefined;
+        element.classList.add('--instant');
+        update();
+        element.getBoundingClientRect();
+        element.classList.remove('--instant');
+        element.classList.add('--active');
+        if (reduced()) {
+            animate(element, [{ opacity: 0 }, { opacity: 1 }], 160, EASE_OUT);
+            return;
+        }
+        running.get(element)?.cancel();
+        running.set(element, element.animate([
+            { opacity: 0, offset: 0, transform: 'perspective(600px) rotateX(-20deg) scale(0.94)' },
+            { opacity: 1, offset: 0.53 },
+            { opacity: 1, transform: 'none' }
+        ], { duration: 300, easing: EASE_OUT }));
+    }
+    function settle() {
+        let trigger = current === -1 ? undefined : triggers[current];
+        if (trigger) {
+            pillTo(trigger);
+        }
+        else {
+            pill?.classList.remove('--active');
+        }
+    }
+    function swap(previous, next) {
+        let dir = next > previous ? 1 : -1, incoming = layers[next], outgoing = previous === -1 ? undefined : layers[previous], reduce = reduced();
+        for (let i = 0, n = layers.length; i < n; i++) {
+            let layer = layers[i];
+            if (!layer || layer === incoming || layer === outgoing) {
+                continue;
+            }
+            running.get(layer)?.cancel();
+            layer.classList.remove('--active', '--leaving');
+            layer.inert = true;
+        }
+        if (outgoing) {
+            let layer = outgoing;
+            layer.classList.remove('--active');
+            layer.classList.add('--leaving');
+            layer.inert = true;
+            animate(layer, [
+                { opacity: 1, translate: '0 0' },
+                { opacity: 0, translate: `${reduce ? 0 : -dir * SLIDE}px 0` }
+            ], 200).onfinish = () => layer.classList.remove('--leaving');
+        }
+        if (!incoming) {
+            return;
+        }
+        incoming.classList.remove('--leaving');
+        incoming.classList.add('--active');
+        incoming.inert = false;
+        if (!outgoing) {
+            running.get(incoming)?.cancel();
+            return;
+        }
+        animate(incoming, [
+            { opacity: 0, translate: `${reduce ? 0 : dir * SLIDE}px 0` },
+            { opacity: 1, translate: '0 0' }
+        ], 200);
+    }
+    function trigger(index, e) {
+        let key = e.key;
+        if (key === 'ArrowDown' && layers[index]) {
+            e.preventDefault();
+            open(index);
+            focusables()[0]?.focus();
+        }
+        else if (key === 'ArrowLeft' || key === 'ArrowRight') {
+            let n = triggers.length;
+            e.preventDefault();
+            triggers[(index + (key === 'ArrowRight' ? 1 : -1) + n) % n]?.focus();
+        }
+        else if (key === 'Escape' && current !== -1) {
+            e.preventDefault();
+            close();
+        }
+        else if (key === 'Tab' && !e.shiftKey && current === index) {
+            let first = focusables()[0];
+            if (first) {
+                e.preventDefault();
+                first.focus();
+            }
+        }
+    }
+    let stop = effect(() => {
+        let active = s.active;
+        untrack(() => {
+            if (active === current) {
+                return;
+            }
+            if (active === -1) {
+                close();
+            }
+            else {
+                open(active);
+            }
+        });
+    });
+    onCleanup(() => {
+        clearTimeout(closeTimer);
+        clearTimeout(openTimer);
+        hiding?.cancel();
+        observer?.disconnect();
+        stop();
+        for (let animation of running.values()) {
+            animation.cancel();
+        }
+    });
+    return (() => {
+        let root_064zmt31 = template_064zmt32(), element_064zmt33 = root_064zmt31.firstChild, element_064zmt34 = element_064zmt33.firstElementChild, element_064zmt35 = element_064zmt34.firstElementChild, element_064zmt36 = element_064zmt34.nextElementSibling, element_064zmt37 = element_064zmt36.firstElementChild;
+        template_u1.setProperties(element_064zmt33, attributes);
+        template_u1.setProperty(element_064zmt33, 'aria-label', label);
+        template_u1.ondocument(element_064zmt33, 'pointerdown', (e) => {
+            if (current !== -1 && nav && !nav.contains(e.target)) {
+                close();
+            }
+        });
+        template_u1.onconnect(element_064zmt33, (element) => {
+            nav = element;
+            observer = new ResizeObserver(() => place(false));
+            observer.observe(element);
+            for (let layer of layers) {
+                if (layer) {
+                    observer.observe(layer);
+                }
+            }
+        });
+        template_u1.on(element_064zmt33, 'focusout', (e) => {
+            if (!e.currentTarget.contains(e.relatedTarget)) {
+                close();
+            }
+        });
+        template_u1.on(element_064zmt33, 'pointerenter', (e) => {
+            if (e.pointerType !== 'touch') {
+                clearTimeout(closeTimer);
+            }
+        });
+        template_u1.on(element_064zmt33, 'pointerleave', (e) => {
+            if (e.pointerType === 'touch') {
+                return;
+            }
+            clearTimeout(openTimer);
+            if (current !== -1) {
+                clearTimeout(closeTimer);
+                closeTimer = setTimeout(() => close(), CLOSE_GRACE);
+            }
+        });
+        template_u1.on(element_064zmt34, 'pointerleave', () => {
+            inside = false;
+            settle();
+        });
+        template_u1.onrender(element_064zmt34, (element) => {
+            list = element;
+        });
+        template_u1.onrender(element_064zmt35, (element) => { pill = element; });
+        template_u1.slot(element_064zmt34, items.map((item, index) => {
+            let root_064zmt38 = template_064zmt39(), element_064zmt3a = root_064zmt38.firstChild;
+            element_064zmt3a.appendChild(item.content
+                ? (() => {
+                    let root_064zmt3b = template_064zmt3c(), element_064zmt3d = root_064zmt3b.firstChild, element_064zmt3e = element_064zmt3d.firstChild;
+                    template_u1.setProperties(element_064zmt3d, attributes[NAVIGATION_MENU_TRIGGER]);
+                    template_u1.setProperty(element_064zmt3d, 'aria-controls', () => s.active === index && `${id}-popup`);
+                    template_u1.setProperty(element_064zmt3d, 'aria-expanded', () => String(s.active === index));
+                    template_u1.setList(element_064zmt3d, 'class', () => s.active === index && '--active');
+                    template_u1.delegate(element_064zmt3d, 'click', (e) => {
+                        if (current === index && (e.detail === 0 || e.pointerType === 'touch')) {
+                            close();
+                        }
+                        else {
+                            open(index);
+                        }
+                    });
+                    template_u1.on(element_064zmt3d, 'focus', (e) => {
+                        pillTo(e.currentTarget);
+                        if (current !== -1 && current !== index) {
+                            open(index);
+                        }
+                    });
+                    template_u1.delegate(element_064zmt3d, 'keydown', (e) => trigger(index, e));
+                    template_u1.on(element_064zmt3d, 'pointerenter', (e) => {
+                        if (e.pointerType === 'touch') {
+                            return;
+                        }
+                        inside = true;
+                        pillTo(e.currentTarget);
+                        clearTimeout(openTimer);
+                        if (current !== -1) {
+                            open(index);
+                        }
+                        else {
+                            openTimer = setTimeout(() => open(index), OPEN_INTENT);
+                        }
+                    });
+                    template_u1.on(element_064zmt3d, 'pointerleave', () => {
+                        if (current === -1) {
+                            clearTimeout(openTimer);
+                        }
+                    });
+                    template_u1.onrender(element_064zmt3d, (element) => {
+                        triggers[index] = element;
+                    });
+                    template_u1.slot(element_064zmt3e, item.label);
+                    return root_064zmt3b;
+                })()
+                : (() => {
+                    let root_064zmt3f = template_064zmt3g(), element_064zmt3h = root_064zmt3f.firstChild;
+                    template_u1.setProperty(element_064zmt3h, 'href', item.href ?? '#');
+                    template_u1.setProperties(element_064zmt3h, attributes[NAVIGATION_MENU_TRIGGER]);
+                    template_u1.on(element_064zmt3h, 'focus', (e) => pillTo(e.currentTarget));
+                    template_u1.delegate(element_064zmt3h, 'keydown', (e) => trigger(index, e));
+                    template_u1.on(element_064zmt3h, 'pointerenter', (e) => {
+                        if (e.pointerType === 'touch') {
+                            return;
+                        }
+                        inside = true;
+                        pillTo(e.currentTarget);
+                        clearTimeout(openTimer);
+                        if (current !== -1) {
+                            clearTimeout(closeTimer);
+                            closeTimer = setTimeout(() => close(), CLOSE_GRACE);
+                        }
+                    });
+                    template_u1.onrender(element_064zmt3h, (element) => {
+                        triggers[index] = element;
+                    });
+                    template_u1.slot(element_064zmt3h, item.label, 1);
+                    return root_064zmt3f;
+                })());
+            return root_064zmt38;
+        }), 2);
+        template_u1.setProperty(element_064zmt36, 'id', template_u1.interpolate([(id), "-popup"]));
+        template_u1.setProperties(element_064zmt36, attributes[NAVIGATION_MENU_POPUP]);
+        template_u1.delegate(element_064zmt36, 'click', (e) => {
+            if (e.target.closest('a')) {
+                close();
+            }
+        });
+        template_u1.delegate(element_064zmt36, 'keydown', (e) => {
+            if (current === -1) {
+                return;
+            }
+            let list = focusables(), at = list.indexOf(document.activeElement), key = e.key;
+            if (key === 'Escape') {
+                e.preventDefault();
+                close(true);
+            }
+            else if (key === 'ArrowDown' || key === 'ArrowUp') {
+                let n = list.length;
+                e.preventDefault();
+                list[(at + (key === 'ArrowDown' ? 1 : -1) + n) % n]?.focus();
+            }
+            else if (key === 'Tab' && e.shiftKey && at === 0) {
+                e.preventDefault();
+                triggers[current]?.focus();
+            }
+            else if (key === 'Tab' && !e.shiftKey && at === list.length - 1) {
+                let next = triggers[current + 1];
+                close();
+                if (next) {
+                    e.preventDefault();
+                    next.focus();
+                }
+            }
+        });
+        template_u1.onrender(element_064zmt36, (element) => {
+            popup = element;
+        });
+        template_u1.slot(element_064zmt37, items.map((item, index) => item.content && (() => {
+            let root_064zmt3i = template_064zmt3j(), element_064zmt3k = root_064zmt3i.firstChild;
+            template_u1.onrender(element_064zmt3k, (element) => {
+                element.inert = true;
+                layers[index] = element;
+            });
+            template_u1.slot(element_064zmt3k, item.content, 1);
+            return root_064zmt3i;
+        })()), 1);
+        return root_064zmt31;
+    })();
+};
+export default Object.assign(navigationMenu, { popup: NAVIGATION_MENU_POPUP, trigger: NAVIGATION_MENU_TRIGGER });

package/build/components/navigation-menu/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.navigation-menu{--background:var(--color-white-300);--box-shadow:0 0 0 var(--border-width-400) oklch(from var(--color-black-300) l c h / .1), var(--box-shadow-300);--color:var(--color-text-500);--description-color:var(--color-text-300);--description-font-size:.875rem;--focus-color:var(--color-text-500);--font-size:.875rem;--gap:8px;--hover-background:oklch(94.5% 0 0);--link-radius:8px;--pill-duration:.25s;--pill-timing-function:cubic-bezier(.22, 1, .36, 1);--popup-duration:.2s;--popup-radius:12px;--title-font-size:.9375rem;--trigger-height:36px;--trigger-padding:12px}.navigation-menu--muted{--hover-background:var(--color-grey-400)}.navigation-menu{font-size:var(--font-size);width:max-content;max-width:100%;display:flex;position:relative}.navigation-menu-chevron{flex-shrink:0;width:12px;height:12px;margin-left:4px;position:relative;top:1px}.navigation-menu-content{visibility:hidden;width:max-content;max-width:calc(100vw - 32px);padding:4px;position:absolute;top:0;left:0}.navigation-menu-content.--active,.navigation-menu-content.--leaving{visibility:visible}.navigation-menu-content.--leaving{pointer-events:none}.navigation-menu-item{position:relative}.navigation-menu-link{border-radius:var(--link-radius);color:var(--color);text-align:left;outline:none;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 12px 8px 16px;text-decoration:none;transition:background-color .15s ease-out;display:flex}.navigation-menu-link:focus-visible{outline:2px solid var(--focus-color);outline-offset:-2px}.navigation-menu-link:hover,.navigation-menu-link:focus-visible{background:var(--hover-background)}.navigation-menu-link--compact{color:var(--description-color);flex-direction:row;align-items:center;gap:6px;padding:4px 8px}.navigation-menu-link--compact:hover{color:var(--color)}.navigation-menu-link-description{color:var(--description-color);font-size:var(--description-font-size);line-height:1.625}.navigation-menu-link-title{font-size:var(--title-font-size);font-weight:var(--font-weight-600)}.navigation-menu-list{align-items:center;gap:var(--gap);flex-wrap:wrap;justify-content:center;margin:0;padding:0;list-style:none;display:flex;position:relative}.navigation-menu-pill{background:var(--hover-background);opacity:0;pointer-events:none;transition:opacity .15s var(--pill-timing-function);border-radius:999px;position:absolute;top:0;left:0}.navigation-menu-pill.--active{opacity:1;transition:opacity var(--pill-duration) var(--pill-timing-function), translate var(--pill-duration) var(--pill-timing-function), width var(--pill-duration) var(--pill-timing-function)}.navigation-menu-popup{background:var(--background);border-radius:var(--popup-radius);box-shadow:var(--box-shadow);color:var(--color);opacity:0;pointer-events:none;transition:height var(--popup-duration) cubic-bezier(.23, 1, .32, 1), translate var(--popup-duration) cubic-bezier(.23, 1, .32, 1), width var(--popup-duration) cubic-bezier(.23, 1, .32, 1);visibility:hidden;z-index:50;position:absolute;top:0;left:0}.navigation-menu-popup:before{content:"";inset-inline:0;height:10px;position:absolute;top:-10px}.navigation-menu-popup.--active{opacity:1;pointer-events:auto;visibility:visible}.navigation-menu-popup.--instant{transition:none}.navigation-menu-trigger{color:var(--color);cursor:pointer;font-size:inherit;font-weight:var(--font-weight-500);height:var(--trigger-height);padding-inline:var(--trigger-padding);touch-action:manipulation;-webkit-user-select:none;user-select:none;white-space:nowrap;background:0 0;border:0;border-radius:999px;outline:none;justify-content:center;align-items:center;text-decoration:none;display:inline-flex;position:relative}.navigation-menu-trigger:focus-visible{outline:2px solid var(--focus-color)}.navigation-menu-trigger.--active:after{content:"";inset-block:0;inset-inline:calc(var(--gap) * -1);position:absolute}.navigation-menu-trigger--link{padding-inline:10px}.navigation-menu-viewport{width:100%;height:100%;position:relative;overflow:hidden}@media (prefers-reduced-motion:reduce){.navigation-menu{--pill-duration:0s;--popup-duration:0s}}}
+/*$vite$:1*/

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

@@ -0,0 +1,36 @@
+import { type Attributes, type Renderable } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    [PLAN_CARD_APPROVE]?: Attributes;
+    [PLAN_CARD_VIEW]?: Attributes;
+    autoApprove?: number;
+    description?: Renderable<unknown>;
+    icon?: Renderable<unknown>;
+    onapprove?: (auto: boolean) => void;
+    ondownload?: VoidFunction;
+    onexpand?: VoidFunction;
+    onkeydown?: never;
+    onview?: VoidFunction;
+    peek?: number;
+    state?: State;
+    title: string;
+    todos: Todo[];
+};
+type State = {
+    approved: boolean;
+    countdown: number;
+    expanded: boolean;
+};
+type Todo = {
+    done?: boolean;
+    label: string;
+};
+declare const PLAN_CARD_APPROVE: unique symbol;
+declare const PLAN_CARD_VIEW: unique symbol;
+declare const planCard: ({ autoApprove, description, icon, onapprove, ondownload, onexpand, onview, peek, state, title, todos, ...attributes }: A) => DocumentFragment | Text;
+declare const _default: typeof planCard & {
+    readonly approve: typeof PLAN_CARD_APPROVE;
+    readonly view: typeof PLAN_CARD_VIEW;
+};
+export default _default;
+export type { State, Todo };