@esportsplus/ui 0.56.3 → 0.57.0

package/build/components/announcement/index.js

@@ -0,0 +1,35 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import overlay from '../overlay/index.js';
+import './scss/index.scss';
+const template_11coa5y2 = template_u1.template(`<div class='announcement'>`);
+class ReactiveObject_11coa5y0 extends reactivity_u0.ReactiveObject {
+    #active = this[reactivity_u0.SIGNAL](true);
+    constructor() {
+        super(null);
+    }
+    get active() {
+        return reactivity_u0.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_u0.write(this.#active, _v0);
+    }
+}
+export default component(function ({ state = new ReactiveObject_11coa5y0(), ...attributes }, content) {
+    return (() => {
+        let root_11coa5y1 = template_11coa5y2(), element_11coa5y3 = root_11coa5y1.firstChild;
+        template_u1.slot(element_11coa5y3, overlay({
+            class: 'announcement-content overlay--n',
+            flow: true,
+            role: 'presentation',
+            state,
+            [overlay.handle]: { hidden: true }
+        }, content), 1);
+        template_u1.setProperties(element_11coa5y3, this?.attributes);
+        template_u1.setProperties(element_11coa5y3, attributes);
+        template_u1.setList(element_11coa5y3, 'class', () => state.active && '--active');
+        template_u1.setProperty(element_11coa5y3, 'inert', () => !state.active);
+        return root_11coa5y1;
+    })();
+});

package/build/components/announcement/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components{.announcement{--announcement-drawer:cubic-bezier(.32, .72, 0, 1);--announcement-ease:cubic-bezier(.23, 1, .32, 1)}.announcement-content.overlay{--close-duration:.24s;--ease:var(--announcement-drawer);--fade-duration:.12s;--open-duration:.28s}.announcement-content.overlay.--active{--fade-duration:.2s}@media (prefers-reduced-motion:reduce){.announcement-content.overlay{--close-duration:0s;--open-duration:0s}}.announcement{transition:grid-template-rows .24s var(--announcement-drawer);grid-template-rows:0fr;display:grid;overflow:hidden}.announcement-content.overlay{filter:blur(2px);transition:filter var(--fade-duration) var(--announcement-ease), opacity var(--fade-duration) var(--announcement-ease), transform var(--transition-duration) var(--announcement-drawer), translate var(--transition-duration) var(--announcement-drawer)}.announcement-content.overlay.--active{filter:blur()}.announcement-content.overlay.overlay--dragging{transition:none}.announcement.--active{transition:grid-template-rows .28s var(--announcement-drawer);grid-template-rows:1fr}@media (prefers-reduced-motion:reduce){.announcement,.announcement.--active{transition:none}.announcement-content.overlay,.announcement-content.overlay.--active{filter:none;transition:opacity .2s var(--announcement-ease)}}}
+/*$vite$:1*/

package/build/components/banner/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.banner--blur{--blur:24px}.banner--gradient{--from:#03001352;--to:var(--color-black-500)}.banner{z-index:-1;background-position:50%;background-size:cover;position:absolute;inset:0}.banner--backdrop{background-position:bottom;height:80svh}.banner--blur{filter:blur(var(--blur));top:-2svh;left:-2svh;right:-2svh}.banner--blur.banner--backdrop{height:90svh}.banner--fixed{position:fixed}.banner--gradient:before{background:radial-gradient(circle at top, transparent 64%, var(--to) 88%), linear-gradient(to bottom, var(--from) 0%, var(--to) 100%);content:"";z-index:0;position:absolute;inset:0}}
+@layer components{.banner,.banner--gradient:before{position:absolute;inset:0}.banner--backdrop{--backdrop-height:80svh}.banner--blur{--backdrop-height:90svh;--blur:24px}.banner--gradient{--from:#03001352;--to:var(--color-black-500)}.banner{z-index:-1;background-position:50%;background-size:cover}.banner--backdrop{height:var(--backdrop-height);background-position:bottom}.banner--blur{filter:blur(var(--blur));top:-2svh;left:-2svh;right:-2svh}.banner--fixed{position:fixed}.banner--gradient:before{background:radial-gradient(circle at top, transparent 64%, var(--to) 88%), linear-gradient(to bottom, var(--from) 0%, var(--to) 100%);content:"";z-index:0}}
 /*$vite$:1*/

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

@@ -1,29 +1,29 @@
 import * as template_u1 from '@esportsplus/template';
-import ellipsis from './ellipsis.js';
-import item from './item.js';
-import link from './link.js';
-import list from './list.js';
-import menu from './menu.js';
-import page from './page.js';
-import separator from './separator.js';
+import { type Attributes } from '@esportsplus/template';
 import './scss/index.scss';
-declare let root: {
-    (): template_u1.Renderable<any>;
-    <T extends template_u1.Attributes>(attributes: T): template_u1.Renderable<any>;
-    <T extends template_u1.Renderable<any>>(content: T): template_u1.Renderable<any>;
-    (attributes: template_u1.Attributes, content?: template_u1.Renderable<any>): template_u1.Renderable<any>;
-    bind(context: {
-        attributes?: Partial<template_u1.Attributes> | undefined;
-        content?: template_u1.Renderable<any>;
-    }): any;
+type A = Attributes & {
+    [BREADCRUMB_LINK]?: Attributes;
+    [BREADCRUMB_MENU]?: Attributes;
+    items: Crumb[];
+    label?: string;
+    onnavigate?: (item: Crumb, index: number) => void;
+    separator?: Separator;
+    state?: State;
 };
-declare const breadcrumb: typeof root & {
-    ellipsis: typeof ellipsis;
-    item: typeof item;
-    link: typeof link;
-    list: typeof list;
-    menu: typeof menu;
-    page: typeof page;
-    separator: typeof separator;
+type Crumb = {
+    href: string;
+    label: string;
 };
-export default breadcrumb;
+type Separator = 'chevron' | 'slash';
+type State = {
+    active: boolean;
+    hidden: number;
+};
+declare const BREADCRUMB_LINK: unique symbol;
+declare const BREADCRUMB_MENU: unique symbol;
+declare const _default: template_u1.Factory<A, template_u1.Renderable<any>, template_u1.Renderable<any>, {
+    readonly link: typeof BREADCRUMB_LINK;
+    readonly menu: typeof BREADCRUMB_MENU;
+}>;
+export default _default;
+export type { Crumb, Separator, State };

package/build/components/breadcrumb/index.js

@@ -1,19 +1,191 @@
 import * as template_u1 from '@esportsplus/template';
-import { component } from '@esportsplus/template';
-import ellipsis from './ellipsis.js';
-import item from './item.js';
-import link from './link.js';
-import list from './list.js';
-import menu from './menu.js';
-import page from './page.js';
-import separator from './separator.js';
+import { component, on } from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { onCleanup } from '@esportsplus/reactivity';
+import tooltip from '../tooltip/index.js';
+import { observer } from '../../shared/resize.js';
+import chevron from '@esportsplus/ui/svg/chevron-right.svg';
+import dots from '@esportsplus/ui/svg/dots.svg';
+import folder from '@esportsplus/ui/svg/folder.svg';
+import slash from '@esportsplus/ui/svg/slash.svg';
 import './scss/index.scss';
-const template_1iy9n1s1 = template_u1.template(`<nav aria-label='breadcrumb' class='breadcrumb'>`);
-let root = component((attributes, content) => {
-    let root_1iy9n1s0 = template_1iy9n1s1(), element_1iy9n1s2 = root_1iy9n1s0.firstChild;
-    template_u1.setProperties(element_1iy9n1s2, attributes);
-    template_u1.slot(element_1iy9n1s2, content, 1);
-    return root_1iy9n1s0;
-});
-const breadcrumb = Object.assign(root, { ellipsis, item, link, list, menu, page, separator });
-export default breadcrumb;
+const template_1iy9n1s3 = template_u1.template(`<svg aria-hidden='true' class='breadcrumb-separator'><use />`);
+const template_1iy9n1s6 = template_u1.template(`<nav class='breadcrumb'><ol aria-hidden='true' class='breadcrumb-ruler' inert><!--$--><li class='breadcrumb-ruler-segment'><!--$--><span class='breadcrumb-space'></span></li></ol><ol class='breadcrumb-list'>`);
+const template_1iy9n1sd = template_u1.template(`<li class='breadcrumb-ruler-segment'><!--$--><span class='breadcrumb-text '>`);
+const template_1iy9n1sh = template_u1.template(`<li class='breadcrumb-segment  '><div class='breadcrumb-segment-body'><!--$--></div></li><!--$-->`);
+const template_1iy9n1sn = template_u1.template(`<span aria-current='page' class='breadcrumb-current'>`);
+const template_1iy9n1sq = template_u1.template(`<a class='breadcrumb-link'>`);
+const template_1iy9n1st = template_u1.template(`<li class='breadcrumb-segment breadcrumb-fold '><div class='breadcrumb-segment-body'><!--$-->`);
+const template_1iy9n1sy = template_u1.template(`<svg aria-hidden='true' class='breadcrumb-option-icon'><use />`);
+const template_1iy9n1s11 = template_u1.template(`<svg aria-hidden='true' class='breadcrumb-trigger-icon'><use />`);
+class ReactiveObject_1iy9n1s0 extends reactivity_u0.ReactiveObject {
+    #active = this[reactivity_u0.SIGNAL](false);
+    #hidden = this[reactivity_u0.SIGNAL](0);
+    constructor() {
+        super(null);
+    }
+    get active() {
+        return reactivity_u0.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_u0.write(this.#active, _v0);
+    }
+    get hidden() {
+        return reactivity_u0.read(this.#hidden);
+    }
+    set hidden(_v1) {
+        reactivity_u0.write(this.#hidden, _v1);
+    }
+}
+class ReactiveObject_1iy9n1s1 extends reactivity_u0.ReactiveObject {
+    #instant = this[reactivity_u0.SIGNAL](true);
+    constructor() {
+        super(null);
+    }
+    get instant() {
+        return reactivity_u0.read(this.#instant);
+    }
+    set instant(_v0) {
+        reactivity_u0.write(this.#instant, _v0);
+    }
+}
+const BREADCRUMB_LINK = Symbol.for('@esportsplus/ui/breadcrumb.link');
+const BREADCRUMB_MENU = Symbol.for('@esportsplus/ui/breadcrumb.menu');
+const SEPARATORS = { chevron, slash };
+let uid = 0;
+function separator(kind) {
+    return (() => {
+        let root_1iy9n1s2 = template_1iy9n1s3(), element_1iy9n1s4 = root_1iy9n1s2.firstChild.firstElementChild;
+        template_u1.setProperty(element_1iy9n1s4, 'href', template_u1.interpolate(["#", (SEPARATORS[kind])]));
+        return root_1iy9n1s2;
+    })();
+}
+const breadcrumb = ({ items, label = 'Breadcrumb', onnavigate, separator: kind = 'slash', state, ...attributes }) => {
+    let id = `breadcrumb-${++uid}`, last = items.length - 1, root, ruler, s = state ?? new ReactiveObject_1iy9n1s0(), view = new ReactiveObject_1iy9n1s1();
+    function fit() {
+        if (!root || !ruler) {
+            return;
+        }
+        let widths = [];
+        for (let child of ruler.children) {
+            widths.push(child.getBoundingClientRect().width);
+        }
+        let space = widths.pop() ?? 0, available = root.clientWidth, n = widths.length, next = Math.max(n - 1, 1), tail = 0;
+        for (let i = 1; i < n; i++) {
+            tail += widths[i];
+        }
+        for (let k = 1; k < n; k++) {
+            if (widths[0] + (k > 1 ? space : 0) + tail <= available + 0.5) {
+                next = k;
+                break;
+            }
+            tail -= widths[k];
+        }
+        next = Math.min(next, Math.max(last, 1));
+        if (next === s.hidden + 1) {
+            return;
+        }
+        s.hidden = next - 1;
+        if (next <= 1) {
+            s.active = false;
+        }
+    }
+    function navigate(e, item, index) {
+        if (!onnavigate) {
+            return;
+        }
+        e.preventDefault();
+        onnavigate(item, index);
+    }
+    return (() => {
+        let root_1iy9n1s5 = template_1iy9n1s6(), element_1iy9n1s7 = root_1iy9n1s5.firstChild, element_1iy9n1s8 = element_1iy9n1s7.firstElementChild, element_1iy9n1s9 = element_1iy9n1s8.firstChild, element_1iy9n1sa = element_1iy9n1s8.firstElementChild.firstChild, element_1iy9n1sb = element_1iy9n1s8.nextElementSibling;
+        template_u1.slot(element_1iy9n1s9, items.map((item, index) => {
+            let root_1iy9n1sc = template_1iy9n1sd(), element_1iy9n1se = root_1iy9n1sc.firstChild.firstChild, element_1iy9n1sf = root_1iy9n1sc.firstChild.firstElementChild;
+            template_u1.slot(element_1iy9n1se, index > 0 && separator(kind));
+            template_u1.slot(element_1iy9n1sf, item.label, 1);
+            template_u1.setList(element_1iy9n1sf, 'class', index === last && 'breadcrumb-text--current');
+            return root_1iy9n1sc;
+        }));
+        template_u1.slot(element_1iy9n1sa, separator(kind));
+        template_u1.slot(element_1iy9n1sb, items.map((item, index) => {
+            let root_1iy9n1sg = template_1iy9n1sh(), element_1iy9n1si = root_1iy9n1sg.firstChild, element_1iy9n1sj = element_1iy9n1si.firstElementChild.firstChild, element_1iy9n1sk = element_1iy9n1si.firstElementChild, element_1iy9n1sl = element_1iy9n1si.nextSibling;
+            template_u1.slot(element_1iy9n1sj, index > 0 && separator(kind));
+            element_1iy9n1sk.appendChild(index === last
+                ? (() => {
+                    let root_1iy9n1sm = template_1iy9n1sn(), element_1iy9n1so = root_1iy9n1sm.firstChild;
+                    template_u1.slot(element_1iy9n1so, item.label, 1);
+                    return root_1iy9n1sm;
+                })()
+                : (() => {
+                    let root_1iy9n1sp = template_1iy9n1sq(), element_1iy9n1sr = root_1iy9n1sp.firstChild;
+                    template_u1.slot(element_1iy9n1sr, item.label, 1);
+                    template_u1.setProperty(element_1iy9n1sr, 'href', item.href);
+                    template_u1.setProperties(element_1iy9n1sr, attributes[BREADCRUMB_LINK]);
+                    template_u1.onconnect(element_1iy9n1sr, (element) => {
+                        on(element, 'click', (e) => navigate(e, item, index));
+                    });
+                    return root_1iy9n1sp;
+                })());
+            template_u1.slot(element_1iy9n1sl, index === 0 && (() => {
+                let root_1iy9n1ss = template_1iy9n1st(), element_1iy9n1su = root_1iy9n1ss.firstChild, element_1iy9n1sv = element_1iy9n1su.firstElementChild.firstChild, element_1iy9n1sw = element_1iy9n1su.firstElementChild;
+                template_u1.slot(element_1iy9n1sv, separator(kind));
+                template_u1.slot(element_1iy9n1sw, tooltip.menu({
+                    class: 'breadcrumb-menu-root',
+                    items: items.slice(1, last).map((item, i) => ({
+                        label: item.label,
+                        icon: () => {
+                            let root_1iy9n1sx = template_1iy9n1sy(), element_1iy9n1sz = root_1iy9n1sx.firstChild.firstElementChild;
+                            template_u1.setProperty(element_1iy9n1sz, 'href', template_u1.interpolate(["#", (folder)]));
+                            return root_1iy9n1sx;
+                        },
+                        hidden: () => i >= s.hidden,
+                        href: item.href,
+                        onselect: (_item, event) => navigate(event, item, i + 1),
+                        target: '_self'
+                    })),
+                    state: s,
+                    [tooltip.menu.item]: { class: 'breadcrumb-option link' },
+                    [tooltip.menu.trigger]: {
+                        'aria-controls': `${id}-menu`,
+                        'aria-label': () => `Show ${s.hidden} hidden ${s.hidden === 1 ? 'folder' : 'folders'}`,
+                        class: 'breadcrumb-trigger'
+                    },
+                    [tooltip.menu.panel]: {
+                        ...attributes[BREADCRUMB_MENU],
+                        'aria-label': 'Hidden folders',
+                        class: ['breadcrumb-menu', attributes[BREADCRUMB_MENU]?.class ?? []].flat(),
+                        id: `${id}-menu`
+                    }
+                }, (() => {
+                    let root_1iy9n1s10 = template_1iy9n1s11(), element_1iy9n1s12 = root_1iy9n1s10.firstChild.firstElementChild;
+                    template_u1.setProperty(element_1iy9n1s12, 'href', template_u1.interpolate(["#", (dots)]));
+                    return root_1iy9n1s10;
+                })()), 2);
+                template_u1.setList(element_1iy9n1su, 'class', () => s.hidden <= 0 && 'breadcrumb-segment--hidden');
+                return root_1iy9n1ss;
+            })());
+            template_u1.setList(element_1iy9n1si, 'class', index === last && 'breadcrumb-segment--current');
+            template_u1.setList(element_1iy9n1si, 'class', () => index > 0 && index < last && index <= s.hidden && 'breadcrumb-segment--hidden');
+            return root_1iy9n1sg;
+        }), 1);
+        template_u1.onconnect(element_1iy9n1s8, (element) => { ruler = element; });
+        template_u1.setProperties(element_1iy9n1s7, attributes);
+        template_u1.setProperty(element_1iy9n1s7, 'aria-label', label);
+        template_u1.setList(element_1iy9n1s7, 'class', () => view.instant && 'breadcrumb--instant');
+        template_u1.onconnect(element_1iy9n1s7, (element) => {
+            let resize = observer(fit);
+            root = element;
+            fit();
+            resize.observe(element);
+            if (ruler) {
+                resize.observe(ruler);
+            }
+            onCleanup(resize.disconnect);
+        });
+        template_u1.onfirstpaint(element_1iy9n1s7, () => {
+            view.instant = false;
+        });
+        return root_1iy9n1s5;
+    })();
+};
+export default component(breadcrumb, { link: BREADCRUMB_LINK, menu: BREADCRUMB_MENU });

package/build/components/breadcrumb/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.breadcrumb{--color:var(--color-default);--color-active:var(--color-text-500);--color-default:var(--color-text-300);--color-hover:var(--color-text-500);--font-size:var(--font-size-300)}.breadcrumb-ellipsis{--size:var(--size-500)}.breadcrumb-menu-caret.icon,.breadcrumb-separator .icon{--size:var(--size-300)}.breadcrumb{color:var(--color);font-size:var(--font-size)}.breadcrumb-ellipsis{height:var(--size);width:var(--size);justify-content:center;align-items:center;display:flex}.breadcrumb-item{align-items:center;gap:var(--gap);display:inline-flex}.breadcrumb-link{color:var(--color);transition:color var(--transition-duration) var(--transition-timing-function)}.breadcrumb-link:not(.--active):hover{--color:var(--color-hover)}.breadcrumb-list{align-items:center;gap:var(--gap);overflow-wrap:break-word;flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.breadcrumb-menu{align-items:center;gap:calc(var(--gap) / 2);display:flex}.breadcrumb-menu.--active{--color:var(--color-hover)}.breadcrumb-menu.--active .breadcrumb-menu-caret{transform:rotate(180deg)}.breadcrumb-menu-caret{transition:transform var(--transition-duration) var(--transition-timing-function)}.breadcrumb-page{color:var(--color-active)}.breadcrumb-separator{align-items:center;display:flex}[dir=rtl] .breadcrumb-separator .icon{transform:scaleX(-1)}}
+@layer components{.breadcrumb-list,.breadcrumb-ruler{margin:0;padding:0;list-style:none}.breadcrumb-current{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.breadcrumb{--color:var(--color-text-300);--color-active:var(--color-text-500);--ease-out:cubic-bezier(.23, 1, .32, 1);--enter-duration:.2s;--exit-duration:.12s;--focus-color:var(--color-text-500);--font-size:var(--font-size-300);--font-weight-current:var(--font-weight-500);--height:36px;--hover-background:oklch(from var(--color-text-500) l c h / .06);--link-padding:6px;--link-radius:var(--border-radius-300);--menu-background:var(--color-grey-400);--menu-box-shadow:0 0 0 var(--border-width-400) var(--color-border-300), var(--box-shadow-300);--menu-duration-in:.18s;--menu-duration-out:.1s;--menu-radius:var(--border-radius-600);--menu-width:192px;--option-color:var(--color-active);--option-icon-color:var(--color);--separator-color:oklch(from var(--color-text-300) l c h / .5);--separator-size:16px;--slide-duration:.31s;--slide-easing:linear(0, .0432 4.2%, .1402 8.3%, .2575 12.5%, .3764 16.7%, .4867 20.8%, .584 25%, .667 29.2%, .7361 33.3%, .7925 37.5%, .838 41.7%, .8743 45.8%, .9029 50%, .9254 54.2%, .9428 58.3%, .9564 62.5%, .9668 66.7%, .9748 70.8%, .9809 75%, .9856 79.2%, .9892 83.3%, .9918 87.5%, .9939 91.7%, .9954 95.8%, 1);--trigger-width:36px;--underline-color:oklch(from var(--color-text-500) l c h / .4)}.breadcrumb--compact{--height:28px;--link-padding:4px;--separator-size:14px;--trigger-width:28px}.breadcrumb--instant{--enter-duration:0s;--exit-duration:0s;--slide-duration:0s}.breadcrumb-menu.tooltip-content{--background-default:var(--menu-background);--border-radius:var(--menu-radius);--box-shadow:var(--menu-box-shadow);--offset:0px;--scale:.95;--spacer:6px;--transition-duration:var(--menu-duration-out);--transition-timing-function:cubic-bezier(.23, 1, .32, 1)}.breadcrumb-menu.tooltip-content.--active{--transition-duration:var(--menu-duration-in)}.breadcrumb-segment{--body-overflow:visible;--body-transition:overflow 0s linear var(--slide-duration) allow-discrete}.breadcrumb-segment--hidden{--body-overflow:hidden;--body-transition:none}@media (prefers-reduced-motion:reduce){.breadcrumb-menu.tooltip-content{--scale:1}}.breadcrumb{font-size:var(--font-size);width:100%;min-width:0;position:relative}.breadcrumb-current{color:var(--color-active);font-weight:var(--font-weight-current);padding-inline:var(--link-padding);display:block}.breadcrumb-link{border-radius:var(--link-radius);color:var(--color);height:var(--height);padding-inline:var(--link-padding);text-underline-offset:4px;touch-action:manipulation;-webkit-user-select:none;user-select:none;white-space:nowrap;outline:none;align-items:center;-webkit-text-decoration:underline #0000;text-decoration:underline #0000;transition:color .15s ease-out,scale .15s ease-out,text-decoration-color .15s ease-out;display:inline-flex}.breadcrumb-link:active{scale:.96}.breadcrumb-link:focus-visible{outline:2px solid var(--focus-color)}.breadcrumb-link:hover{color:var(--color-active);-webkit-text-decoration-color:var(--underline-color);-webkit-text-decoration-color:var(--underline-color);text-decoration-color:var(--underline-color)}.breadcrumb-list{height:var(--height);align-items:center;min-width:0;display:flex;position:relative}.breadcrumb-menu.tooltip-menu-panel{transform-origin:calc(var(--trigger-width) / 2) 0;width:var(--menu-width);outline:none;flex-direction:column;padding:4px;display:flex}.breadcrumb-menu-root.tooltip{cursor:default;display:flex}.breadcrumb-option-icon{color:var(--option-icon-color);flex-shrink:0;width:16px;height:16px}.breadcrumb-option.link{border-radius:var(--border-radius-400);color:var(--option-color);cursor:default;-webkit-user-select:none;user-select:none;background:0 0;outline:none;flex-wrap:nowrap;flex-shrink:0;align-items:center;gap:10px;height:36px;padding:0 8px;text-decoration:none;transition:none;display:flex}.breadcrumb-option.link:focus{background:var(--hover-background)}.breadcrumb-option.link[hidden]{display:none}.breadcrumb-ruler{pointer-events:none;visibility:hidden;white-space:nowrap;display:flex;position:absolute;top:0;left:0}.breadcrumb-ruler-segment{flex-shrink:0;align-items:center;display:flex}.breadcrumb-segment{transition:filter var(--enter-duration) var(--ease-out), grid-template-columns var(--slide-duration) var(--slide-easing), opacity var(--enter-duration) var(--ease-out);flex-shrink:0;grid-template-columns:1fr;align-items:center;display:grid}.breadcrumb-segment--current{flex-shrink:1;min-width:0}.breadcrumb-segment--hidden{filter:blur(4px);opacity:0;transition:filter 0s linear var(--exit-duration), grid-template-columns var(--slide-duration) var(--slide-easing), opacity var(--exit-duration) var(--ease-out), visibility 0s linear var(--slide-duration);visibility:hidden;grid-template-columns:0fr}.breadcrumb-segment-body{min-width:0;overflow:var(--body-overflow);transition:var(--body-transition);align-items:center;display:flex}.breadcrumb-separator{color:var(--separator-color);height:var(--separator-size);width:var(--separator-size);flex-shrink:0}.breadcrumb-space{width:var(--trigger-width);display:block}.breadcrumb-text{padding-inline:var(--link-padding)}.breadcrumb-text--current{font-weight:var(--font-weight-current)}.breadcrumb-trigger{border-radius:var(--link-radius);color:var(--color);cursor:pointer;height:calc(var(--height) - 4px);touch-action:manipulation;-webkit-user-select:none;user-select:none;width:var(--trigger-width);background:0 0;border:0;outline:none;justify-content:center;align-items:center;padding:0;transition:background-color .15s ease-out,color .15s ease-out,scale .15s ease-out;display:flex}.breadcrumb-trigger:active{scale:.96}.breadcrumb-trigger:focus-visible{outline:2px solid var(--focus-color)}.breadcrumb-trigger:hover,.breadcrumb-trigger[aria-expanded=true]{background:var(--hover-background);color:var(--color-active)}.breadcrumb-trigger-icon{width:16px;height:16px}@media (prefers-reduced-motion:reduce){.breadcrumb-link{transition:color .15s ease-out,text-decoration-color .15s ease-out}.breadcrumb-segment{filter:none;transition:opacity var(--enter-duration) var(--ease-out)}.breadcrumb-segment--hidden{transition:opacity var(--exit-duration) var(--ease-out), visibility 0s linear var(--exit-duration)}.breadcrumb-segment-body{transition-delay:0s}.breadcrumb-trigger{transition:background-color .15s ease-out,color .15s ease-out}}}
 /*$vite$:1*/

package/build/components/button/copy.js

@@ -25,6 +25,12 @@ export default component(({ error = 'Failed', success = 'Copied', timeout = 2000
     }, timer;
     return (() => {
         let root_07so7b41 = template_07so7b42(), element_07so7b43 = root_07so7b41.firstChild, element_07so7b44 = element_07so7b43.nextSibling;
+        template_u1.slot(element_07so7b43, faces(() => state.status, [
+            { content, icon: copy, key: 'idle' },
+            { content: success, icon: check, key: 'success', tone: 'success' },
+            { content: error, icon: cross, key: 'error', tone: 'error' }
+        ]), 1);
+        new template_u1.EffectSlot(element_07so7b44, () => state.status === 'success' ? success : state.status === 'error' && error, 1);
         template_u1.setProperties(element_07so7b43, attributes);
         template_u1.ondisconnect(element_07so7b43, reset);
         template_u1.delegate(element_07so7b43, 'click', async (e) => {
@@ -37,12 +43,6 @@ export default component(({ error = 'Failed', success = 'Copied', timeout = 2000
             state.status = await write(value) ? 'success' : 'error';
             timer = setTimeout(reset, timeout);
         });
-        template_u1.slot(element_07so7b43, faces(() => state.status, [
-            { content, icon: copy, key: 'idle' },
-            { content: success, icon: check, key: 'success', tone: 'success' },
-            { content: error, icon: cross, key: 'error', tone: 'error' }
-        ]), 1);
-        new template_u1.EffectSlot(element_07so7b44, () => state.status === 'success' ? success : state.status === 'error' ? error : '', 1);
         return root_07so7b41;
     })();
 });

package/build/components/button/faces.js

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

package/build/components/button/fan.js

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

package/build/components/button/hold.js

@@ -19,6 +19,10 @@ class ReactiveObject_05dwb0w0 extends reactivity_u0.ReactiveObject {
 }
 export default component(({ action, disabled = false, duration = 1800, release = 2.5, success = 'Confirmed', timeout = 1600, tolerance = 10, ...attributes }, content) => {
     let animation, fill, origin, state = new ReactiveObject_05dwb0w0('idle'), timer;
+    let label = () => faces(() => state.status === 'success' ? 'success' : 'idle', [
+        { content, key: 'idle' },
+        { content: success, icon: check, key: 'success' }
+    ]);
     function commit() {
         state.status = 'success';
         navigator.vibrate?.(14);
@@ -65,6 +69,10 @@ export default component(({ action, disabled = false, duration = 1800, release =
     }
     return (() => {
         let root_05dwb0w1 = template_05dwb0w2(), element_05dwb0w3 = root_05dwb0w1.firstChild, element_05dwb0w4 = element_05dwb0w3.firstChild, element_05dwb0w5 = element_05dwb0w3.firstElementChild, element_05dwb0w6 = element_05dwb0w3.nextSibling;
+        template_u1.slot(element_05dwb0w4, label());
+        template_u1.slot(element_05dwb0w5, label(), 1);
+        new template_u1.EffectSlot(element_05dwb0w6, () => state.status === 'success' && success, 1);
+        template_u1.onconnect(element_05dwb0w5, (element) => fill = element);
         template_u1.setProperty(element_05dwb0w3, 'aria-description', `Press and hold for ${duration / 1000} seconds to confirm`);
         template_u1.setProperties(element_05dwb0w3, attributes);
         template_u1.setProperty(element_05dwb0w3, 'aria-disabled', () => (disabled || state.status === 'success') && 'true');
@@ -102,16 +110,6 @@ export default component(({ action, disabled = false, duration = 1800, release =
             }
         });
         template_u1.delegate(element_05dwb0w3, 'pointerup', drain);
-        template_u1.slot(element_05dwb0w4, faces(() => state.status === 'success' ? 'success' : 'idle', [
-            { content, key: 'idle' },
-            { content: success, icon: check, key: 'success' }
-        ]));
-        template_u1.onconnect(element_05dwb0w5, (element) => fill = element);
-        template_u1.slot(element_05dwb0w5, faces(() => state.status === 'success' ? 'success' : 'idle', [
-            { content, key: 'idle' },
-            { content: success, icon: check, key: 'success' }
-        ]), 1);
-        new template_u1.EffectSlot(element_05dwb0w6, () => state.status === 'success' ? success : '', 1);
         return root_05dwb0w1;
     })();
 });