@esportsplus/ui 0.55.0 → 0.56.3

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

@@ -0,0 +1,374 @@
+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_088vkti4 = template_u1.template(`<div class='nested-menu-entry'><button class='nested-menu-item ' role='menuitem' tabindex='-1' type='button'><!--$--><span class='nested-menu-label'></span><!--$-->`);
+const template_088vktib = template_u1.template(`<span class='nested-menu-icon'>`);
+const template_088vktie = template_u1.template(`<span class='nested-menu-hint'>`);
+const template_088vktig = template_u1.template(`<span class='nested-menu-chevron'>`);
+const template_088vktii = template_u1.template(`<div class='nested-menu-panel' role='menu'><!--$-->`);
+const template_088vktim = template_u1.template(`<div class='nested-menu-header'><!--$--><span class='nested-menu-title'><span class='nested-menu-title-regular'></span><span aria-hidden='true' class='nested-menu-title-bold'></span></span><span class='nested-menu-chevron'>`);
+const template_088vktit = template_u1.template(`<div class='nested-menu '><button aria-haspopup='menu' class='nested-menu-trigger' type='button'>`);
+class ReactiveObject_088vkti0 extends reactivity_u0.ReactiveObject {
+    #open = this[reactivity_u0.SIGNAL](false);
+    #render = this[reactivity_u0.SIGNAL](false);
+    #settled = this[reactivity_u0.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get open() {
+        return reactivity_u0.read(this.#open);
+    }
+    set open(_v0) {
+        reactivity_u0.write(this.#open, _v0);
+    }
+    get render() {
+        return reactivity_u0.read(this.#render);
+    }
+    set render(_v1) {
+        reactivity_u0.write(this.#render, _v1);
+    }
+    get settled() {
+        return reactivity_u0.read(this.#settled);
+    }
+    set settled(_v2) {
+        reactivity_u0.write(this.#settled, _v2);
+    }
+}
+class ReactiveObject_088vkti1 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);
+    }
+}
+class ReactiveObject_088vkti2 extends reactivity_u0.ReactiveObject {
+    #open = this[reactivity_u0.SIGNAL](true);
+    #render = this[reactivity_u0.SIGNAL](true);
+    #settled = this[reactivity_u0.SIGNAL](true);
+    constructor() {
+        super(null);
+    }
+    get open() {
+        return reactivity_u0.read(this.#open);
+    }
+    set open(_v0) {
+        reactivity_u0.write(this.#open, _v0);
+    }
+    get render() {
+        return reactivity_u0.read(this.#render);
+    }
+    set render(_v1) {
+        reactivity_u0.write(this.#render, _v1);
+    }
+    get settled() {
+        return reactivity_u0.read(this.#settled);
+    }
+    set settled(_v2) {
+        reactivity_u0.write(this.#settled, _v2);
+    }
+}
+const NESTED_MENU_TRIGGER = Symbol.for('@esportsplus/ui/nested-menu.trigger');
+const VIEWPORT_MARGIN = 8;
+function covered(node) {
+    for (let i = 0, n = node.children.length; i < n; i++) {
+        if (node.children[i].state.open) {
+            return true;
+        }
+    }
+    return false;
+}
+function enabled(node) {
+    if (!node.panel) {
+        return [];
+    }
+    return Array.from(node.panel.querySelectorAll(':scope > .nested-menu-entry > .nested-menu-item:not(:disabled)'));
+}
+function later(fn) {
+    requestAnimationFrame(() => requestAnimationFrame(fn));
+}
+function tree(items, parent) {
+    let nodes = [];
+    for (let i = 0, n = items.length; i < n; i++) {
+        let node = {
+            children: [],
+            item: items[i],
+            parent,
+            state: new ReactiveObject_088vkti0()
+        };
+        node.children = tree(items[i].items ?? [], node);
+        nodes.push(node);
+    }
+    return nodes;
+}
+export default component(({ animate = true, items, onselect, state = new ReactiveObject_088vkti1(), ...attributes }, content) => {
+    let elements = new WeakMap(), root = { children: [], state: new ReactiveObject_088vkti2() }, stack = [root], trigger;
+    root.children = tree(items, root);
+    function close(focus) {
+        state.active = false;
+        if (!animate) {
+            reset();
+        }
+        if (focus) {
+            trigger?.focus();
+        }
+    }
+    function drill(node) {
+        if (!node.children.length || node.item?.disabled) {
+            return;
+        }
+        stack.push(node);
+        if (node.state.render) {
+            expand(node);
+            return;
+        }
+        node.state.render = true;
+        later(() => {
+            if (stack.includes(node)) {
+                expand(node);
+            }
+        });
+    }
+    function entry(node) {
+        let branch = node.children.length > 0, { danger, disabled, hint, icon, label } = node.item;
+        return (() => {
+            let root_088vkti3 = template_088vkti4(), element_088vkti5 = root_088vkti3.firstChild, element_088vkti6 = element_088vkti5.firstElementChild, element_088vkti7 = element_088vkti6.firstChild, element_088vkti8 = element_088vkti6.firstElementChild, element_088vkti9 = element_088vkti7.nextSibling.nextSibling;
+            template_u1.setList(element_088vkti5, 'class', () => node.state.open && '--open');
+            template_u1.setList(element_088vkti6, 'class', danger ? '--danger' : '');
+            template_u1.setProperty(element_088vkti6, 'aria-expanded', branch ? () => String(node.state.open) : undefined);
+            template_u1.setProperty(element_088vkti6, 'aria-haspopup', branch ? 'menu' : undefined);
+            template_u1.setProperty(element_088vkti6, 'disabled', disabled === true);
+            template_u1.onconnect(element_088vkti6, (element) => {
+                elements.set(element, node);
+                node.button = element;
+            });
+            template_u1.slot(element_088vkti7, icon ? (() => {
+                let root_088vktia = template_088vktib(), element_088vktic = root_088vktia.firstChild;
+                template_u1.slot(element_088vktic, icon(), 1);
+                return root_088vktia;
+            })() : '');
+            template_u1.slot(element_088vkti8, label, 1);
+            template_u1.slot(element_088vkti9, hint ? (() => {
+                let root_088vktid = template_088vktie(), element_088vktif = root_088vktid.firstChild;
+                template_u1.slot(element_088vktif, hint, 1);
+                return root_088vktid;
+            })() : '');
+            template_u1.slot(element_088vkti6, branch ? template_088vktig() : '', 2);
+            new template_u1.EffectSlot(element_088vkti5, () => branch && node.state.render ? panel(node) : '', 2);
+            return root_088vkti3;
+        })();
+    }
+    function expand(node) {
+        node.state.settled = node.state.open || instant();
+        node.state.open = true;
+        later(() => enabled(node)[0]?.focus());
+    }
+    function instant() {
+        return !root.panel || parseFloat(getComputedStyle(root.panel).getPropertyValue('--open-duration')) === 0;
+    }
+    function open() {
+        reset();
+        state.active = true;
+        shift();
+        later(() => enabled(root)[0]?.focus());
+    }
+    function panel(node) {
+        let item = node.item;
+        return (() => {
+            let root_088vktih = template_088vktii(), element_088vktij = root_088vktih.firstChild, element_088vktik = element_088vktij.firstChild;
+            template_u1.setList(element_088vktij, 'class', () => {
+                let active = node === root ? state.active : node.state.open;
+                return `${active ? '--active' : ''} ${covered(node) ? '--covered' : ''} ${node.state.settled ? '--settled' : ''}`;
+            });
+            template_u1.setProperty(element_088vktij, 'inert', () => node === root && !state.active);
+            template_u1.onconnect(element_088vktij, (element) => {
+                elements.set(element, node);
+                node.panel = element;
+            });
+            template_u1.delegate(element_088vktij, 'transitionend', (e) => {
+                if (e.target !== node.panel) {
+                    return;
+                }
+                if (node === root) {
+                    if (e.propertyName === 'opacity' && !state.active) {
+                        reset();
+                    }
+                }
+                else if (e.propertyName === 'clip-path' && node.state.open) {
+                    node.state.settled = true;
+                }
+            });
+            template_u1.slot(element_088vktik, item ? (() => {
+                let root_088vktil = template_088vktim(), element_088vktin = root_088vktil.firstChild.firstChild, element_088vktio = root_088vktil.firstChild.firstElementChild.firstElementChild, element_088vktip = element_088vktio.nextElementSibling;
+                template_u1.slot(element_088vktin, item.icon ? (() => {
+                    let root_088vktiq = template_088vktib(), element_088vktir = root_088vktiq.firstChild;
+                    template_u1.slot(element_088vktir, item.icon(), 1);
+                    return root_088vktiq;
+                })() : '');
+                template_u1.slot(element_088vktio, item.label, 1);
+                template_u1.slot(element_088vktip, item.label, 1);
+                return root_088vktil;
+            })() : '');
+            template_u1.slot(element_088vktij, node.children.map(entry), 2);
+            return root_088vktih;
+        })();
+    }
+    function pop() {
+        if (stack.length < 2) {
+            return;
+        }
+        let node = stack.pop();
+        node.state.settled = false;
+        node.button?.focus();
+        later(() => {
+            if (!stack.includes(node)) {
+                node.state.open = false;
+            }
+        });
+    }
+    function popTo(node) {
+        while (stack.length > 1 && stack[stack.length - 1] !== node) {
+            pop();
+        }
+    }
+    function reset() {
+        while (stack.length > 1) {
+            let node = stack.pop();
+            node.state.open = false;
+            node.state.settled = false;
+        }
+    }
+    function select(node) {
+        let item = node.item;
+        if (item.disabled) {
+            return;
+        }
+        close(true);
+        item.onselect?.(item);
+        onselect?.(item);
+    }
+    function shift() {
+        let element = root.panel;
+        if (!element) {
+            return;
+        }
+        let current = parseFloat(element.style.getPropertyValue('--shift-x')) || 0, rect = element.getBoundingClientRect(), left = rect.left - current, right = rect.right - current, x = 0;
+        if (right > window.innerWidth - VIEWPORT_MARGIN) {
+            x = window.innerWidth - VIEWPORT_MARGIN - right;
+        }
+        if (left + x < VIEWPORT_MARGIN) {
+            x = VIEWPORT_MARGIN - left;
+        }
+        element.style.setProperty('--shift-x', `${x}px`);
+    }
+    return (() => {
+        let root_088vktis = template_088vktit(), element_088vktiu = root_088vktis.firstChild, element_088vktiv = element_088vktiu.firstElementChild;
+        template_u1.setList(element_088vktiu, 'class', animate ? '' : '--instant');
+        template_u1.setProperties(element_088vktiu, attributes);
+        template_u1.setList(element_088vktiu, 'class', () => state.active && '--active');
+        template_u1.delegate(element_088vktiu, 'click', (e) => {
+            let target = e.target.closest('.nested-menu-header, .nested-menu-item, .nested-menu-panel, .nested-menu-trigger');
+            if (!target) {
+                return;
+            }
+            if (target === trigger) {
+                if (state.active) {
+                    close(false);
+                }
+                else {
+                    open();
+                }
+                return;
+            }
+            if (target.classList.contains('nested-menu-header')) {
+                pop();
+                return;
+            }
+            let node = elements.get(target);
+            if (!node) {
+                return;
+            }
+            if (target.classList.contains('nested-menu-item')) {
+                if (node.children.length) {
+                    drill(node);
+                }
+                else {
+                    select(node);
+                }
+            }
+            else if (node !== stack[stack.length - 1]) {
+                popTo(node);
+            }
+        });
+        template_u1.ondocument(element_088vktiu, 'click', function (e) {
+            if (!state.active || !this?.isConnected) {
+                return;
+            }
+            if (!this.contains(e.target)) {
+                close(false);
+            }
+        });
+        template_u1.delegate(element_088vktiu, 'keydown', (e) => {
+            if (!state.active) {
+                if (e.key === 'ArrowDown' && e.target === trigger) {
+                    e.preventDefault();
+                    open();
+                }
+                return;
+            }
+            let top = stack[stack.length - 1], buttons = enabled(top), index = buttons.indexOf(document.activeElement), n = buttons.length;
+            switch (e.key) {
+                case 'ArrowDown':
+                    buttons[(index + 1) % n]?.focus();
+                    break;
+                case 'ArrowUp':
+                    buttons[index < 1 ? n - 1 : index - 1]?.focus();
+                    break;
+                case 'ArrowLeft':
+                case 'Backspace':
+                    pop();
+                    break;
+                case 'ArrowRight': {
+                    let node = index === -1 ? undefined : elements.get(buttons[index]);
+                    if (node) {
+                        drill(node);
+                    }
+                    break;
+                }
+                case 'End':
+                    buttons[n - 1]?.focus();
+                    break;
+                case 'Escape':
+                    if (stack.length > 1) {
+                        pop();
+                    }
+                    else {
+                        close(true);
+                    }
+                    break;
+                case 'Home':
+                    buttons[0]?.focus();
+                    break;
+                case 'Tab':
+                    close(true);
+                    break;
+                default:
+                    return;
+            }
+            e.preventDefault();
+        });
+        template_u1.setProperties(element_088vktiv, attributes[NESTED_MENU_TRIGGER]);
+        template_u1.setProperty(element_088vktiv, 'aria-expanded', () => String(state.active));
+        template_u1.onconnect(element_088vktiv, (element) => {
+            trigger = element;
+        });
+        template_u1.slot(element_088vktiv, content, 1);
+        template_u1.slot(element_088vktiu, panel(root), 2);
+        return root_088vktis;
+    })();
+}, { trigger: NESTED_MENU_TRIGGER });

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

@@ -0,0 +1,2 @@
+@layer components {.nested-menu{--background:var(--color-white-400);--background-hover:var(--color-grey-500);--border-radius:var(--border-radius-600);--box-shadow:var(--box-shadow-500);--close-duration:.12s;--color:var(--color-text-500);--color-danger:var(--color-red-400);--color-disabled:var(--color-text-300);--color-hint:var(--color-text-300);--font-size:.875rem;--gap:var(--size-200);--item-border-radius:var(--border-radius-400);--item-height:36px;--item-padding:var(--size-200);--offset:var(--size-200);--open-duration:.28s;--open-timing-function:cubic-bezier(.2, 0, 0, 1);--padding:4px;--scrim:oklch(from var(--color-black-400) l c h / .08);--width:17rem}@media (pointer:coarse){.nested-menu{--item-height:44px}}.nested-menu{display:inline-block;position:relative}.nested-menu-chevron{opacity:.6;height:6px;transition:rotate var(--open-duration) var(--open-timing-function);border:1.5px solid;border-width:0 1.5px 1.5px 0;flex-shrink:0;width:6px;margin-inline:2px;rotate:-45deg}.nested-menu-entry{position:relative}.nested-menu-entry.--open{z-index:2}.nested-menu-header,.nested-menu-item{border-radius:var(--item-border-radius);align-items:center;gap:var(--gap);min-height:var(--item-height);padding-inline:var(--item-padding);display:flex}.nested-menu-header{cursor:pointer}.nested-menu-header .nested-menu-chevron{rotate:45deg}.nested-menu-hint{color:var(--color-hint);font-size:.75rem}.nested-menu-icon{flex-shrink:0;display:inline-flex}.nested-menu-item{appearance:none;color:inherit;cursor:pointer;font:inherit;text-align:start;transition:background var(--close-duration) var(--open-timing-function);background:0 0;border:0;outline:none;width:100%}.nested-menu-item:focus,.nested-menu-item:hover{background:var(--background-hover)}.nested-menu-item.--danger{color:var(--color-danger)}.nested-menu-item:disabled{color:var(--color-disabled);cursor:not-allowed;background:0 0}.nested-menu-label,.nested-menu-title{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.nested-menu-panel{background:var(--background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);color:var(--color);font-size:var(--font-size);isolation:isolate;padding:var(--padding);width:var(--width);position:absolute}.nested-menu-panel:after{background:var(--scrim);border-radius:inherit;content:"";opacity:0;pointer-events:none;transition:opacity var(--open-duration) var(--open-timing-function);z-index:1;position:absolute;inset:0}.nested-menu-panel.--covered:after{cursor:pointer;opacity:1;pointer-events:auto}.nested-menu>.nested-menu-panel{opacity:0;left:0;top:calc(100% + var(--offset));transition:opacity var(--close-duration) var(--open-timing-function), visibility 0s linear var(--close-duration);translate:var(--shift-x,0px) 0;visibility:hidden;z-index:9}.nested-menu>.nested-menu-panel.--active{opacity:1;transition:opacity var(--close-duration) var(--open-timing-function);visibility:visible}.nested-menu-entry>.nested-menu-panel{clip-path:inset(var(--padding) var(--padding) calc(100% - var(--padding) - var(--item-height)) var(--padding) round var(--item-border-radius));inset-inline:calc(var(--padding) * -1);pointer-events:none;top:calc(var(--padding) * -1);transition:clip-path var(--close-duration) var(--open-timing-function), visibility 0s linear var(--close-duration);visibility:hidden;z-index:2;width:auto}.nested-menu-entry>.nested-menu-panel.--active{clip-path:inset(-48px round calc(var(--border-radius) + 48px));pointer-events:auto;transition:clip-path var(--open-duration) var(--open-timing-function);visibility:visible}.nested-menu-entry>.nested-menu-panel.--active.--settled{clip-path:none}.nested-menu-title{display:grid}.nested-menu-title-bold,.nested-menu-title-regular{text-overflow:ellipsis;transition:opacity var(--open-duration) var(--open-timing-function);grid-area:1/1;overflow:hidden}.nested-menu-title-bold{opacity:0;font-weight:600}.nested-menu-panel.--active>.nested-menu-header .nested-menu-title-bold{opacity:1}.nested-menu-panel.--active>.nested-menu-header .nested-menu-title-regular{opacity:0}.nested-menu-trigger{cursor:pointer}.nested-menu.--instant{--close-duration:0s;--open-duration:0s}@media (prefers-reduced-motion:reduce){.nested-menu{--close-duration:0s;--open-duration:0s}}}
+/*$vite$:1*/

package/build/components/notification-bell/index.d.ts

@@ -0,0 +1,13 @@
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+declare const notificationBell: ({ 'aria-label': label, count, dot, max, ring, state: api, ...attributes }: Attributes & {
+    'aria-label'?: string;
+    count?: number;
+    dot?: boolean;
+    max?: number;
+    ring?: boolean;
+    state?: {
+        count: number;
+    };
+}) => DocumentFragment | Text;
+export default notificationBell;

package/build/components/notification-bell/index.js

@@ -0,0 +1,87 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect, onCleanup, untrack } from '@esportsplus/reactivity';
+import icon from '../icon/index.js';
+import bell from './svg/bell.svg';
+import './scss/index.scss';
+const template_0wndgbo2 = template_u1.template(`<button class='notification-bell' type='button'><!--$--><span aria-hidden='true' class='notification-bell-badge '>`);
+const template_0wndgbo7 = template_u1.template(`<span class='notification-bell-character'>`);
+const template_0wndgboa = template_u1.template(`<span class='notification-bell-character'><span class='notification-bell-character-track'>`);
+const template_0wndgbod = template_u1.template(`<span>`);
+class ReactiveObject_0wndgbo0 extends reactivity_u0.ReactiveObject {
+    #ring;
+    constructor(_p0) {
+        super(null);
+        this.#ring = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get ring() {
+        return reactivity_u0.read(this.#ring);
+    }
+    set ring(_v0) {
+        reactivity_u0.write(this.#ring, _v0);
+    }
+}
+const notificationBell = ({ 'aria-label': label = 'Notifications', count = 0, dot = false, max = 99, ring = false, state: api = reactivity_u0.reactive({ count }), ...attributes }) => {
+    let previous = api.count, render = new reactivity_u0.ReactiveArray(), state = new ReactiveObject_0wndgbo0(ring ? 1 : 0), stop = effect(() => {
+        let count = api.count;
+        untrack(() => {
+            if (count > previous) {
+                state.ring = state.ring === 1 ? 2 : 1;
+            }
+            previous = count;
+            if (count <= 0 || dot) {
+                return;
+            }
+            let values = (count > max ? `${max}+` : `${count}`).split('');
+            for (let i = 0, n = values.length; i < n; i++) {
+                let value = values[i], digit = value !== '+';
+                if (render[i]?.digit === digit) {
+                    render[i].value = value;
+                }
+                else {
+                    let character = reactivity_u0.reactive({ digit, value });
+                    render.$set(i, character);
+                }
+            }
+            if (render.$length > values.length) {
+                render.splice(values.length);
+            }
+        });
+    });
+    onCleanup(stop);
+    return (() => {
+        let root_0wndgbo1 = template_0wndgbo2(), element_0wndgbo3 = root_0wndgbo1.firstChild, element_0wndgbo4 = element_0wndgbo3.firstChild, element_0wndgbo5 = element_0wndgbo3.firstElementChild;
+        template_u1.setProperty(element_0wndgbo3, 'aria-label', () => api.count > 0 ? `${label}, ${api.count} unread` : label);
+        template_u1.setProperty(element_0wndgbo3, 'data-ring', () => state.ring || '');
+        template_u1.delegate(element_0wndgbo3, 'animationend', (e) => {
+            if (e.animationName.startsWith('notification-bell-ring')) {
+                state.ring = 0;
+            }
+        });
+        template_u1.setProperties(element_0wndgbo3, attributes);
+        template_u1.slot(element_0wndgbo4, icon({ 'aria-hidden': true, class: 'notification-bell-icon' }, bell));
+        template_u1.setList(element_0wndgbo5, 'class', dot && 'notification-bell-badge--dot');
+        template_u1.setList(element_0wndgbo5, 'class', () => api.count > 0 && '--active');
+        template_u1.slot(element_0wndgbo5, !dot && new template_u1.ArraySlot(render, function (character) {
+            if (!character.digit) {
+                return (() => {
+                    let root_0wndgbo6 = template_0wndgbo7(), element_0wndgbo8 = root_0wndgbo6.firstChild;
+                    new template_u1.EffectSlot(element_0wndgbo8, () => character.value, 1);
+                    return root_0wndgbo6;
+                })();
+            }
+            return (() => {
+                let root_0wndgbo9 = template_0wndgboa(), element_0wndgbob = root_0wndgbo9.firstChild.firstElementChild;
+                template_u1.setList(element_0wndgbob, 'style', () => `--value: ${character.value}`);
+                template_u1.slot(element_0wndgbob, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((value) => {
+                    let root_0wndgboc = template_0wndgbod(), element_0wndgboe = root_0wndgboc.firstChild;
+                    template_u1.slot(element_0wndgboe, value, 1);
+                    return root_0wndgboc;
+                }), 1);
+                return root_0wndgbo9;
+            })();
+        }), 1);
+        return root_0wndgbo1;
+    })();
+};
+export default notificationBell;

package/build/components/notification-bell/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.notification-bell{--background:var(--background-default);--background-default:transparent;--background-hover:color-mix(in srgb, currentColor 8%, transparent);--background-pressed:color-mix(in srgb, currentColor 14%, transparent);--badge-background:var(--color-red-400);--badge-color:var(--color-white-400);--badge-font-size:calc(var(--size) * .26);--badge-font-weight:var(--font-weight-500);--badge-inset:calc(var(--size) * .12);--badge-outline-color:var(--color-white-400);--badge-outline-width:2px;--badge-size:calc(var(--size) * .42);--badge-timing-function:cubic-bezier(.34, 1.56, .64, 1);--badge-transition-duration:.28s;--border-radius:50%;--color:var(--color-text-400);--dot-size:calc(var(--size) * .24);--focus-color:currentColor;--focus-offset:2px;--focus-width:2px;--icon-size:50%;--icon-stroke-width:2;--ring-angle:14deg;--ring-duration:.8s;--roll-duration:.4s;--roll-timing-function:cubic-bezier(.22, 1, .36, 1);--size:var(--size-800);--transition-duration:.16s;--transition-timing-function:ease}.notification-bell:not(.--active):hover{--background:var(--background-hover)}.notification-bell:not(.--active):active{--background:var(--background-pressed)}.notification-bell{background:var(--background);border-radius:var(--border-radius);color:var(--color);cursor:pointer;flex:0 0 var(--size);height:var(--size);transition:background var(--transition-duration) var(--transition-timing-function);width:var(--size);border:0;justify-content:center;align-items:center;padding:0;display:inline-flex;position:relative}.notification-bell:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset)}.notification-bell[data-ring="1"] .notification-bell-icon{animation:notification-bell-ring-1 var(--ring-duration) ease-in-out}.notification-bell[data-ring="2"] .notification-bell-icon{animation:notification-bell-ring-2 var(--ring-duration) ease-in-out}.notification-bell-badge{background:var(--badge-background);border-radius:calc(var(--badge-size) / 2);box-shadow:0 0 0 var(--badge-outline-width) var(--badge-outline-color);color:var(--badge-color);font-size:var(--badge-font-size);font-variant-numeric:tabular-nums;font-weight:var(--badge-font-weight);height:var(--badge-size);left:calc(100% - var(--badge-inset));line-height:var(--badge-size);min-width:var(--badge-size);padding:0 calc(var(--badge-size) * .25);pointer-events:none;top:var(--badge-inset);transition:transform var(--badge-transition-duration) var(--badge-timing-function);justify-content:center;align-items:center;display:flex;position:absolute;transform:translate(-50%,-50%)scale(0)}.notification-bell-badge.--active{transform:translate(-50%,-50%)scale(1)}.notification-bell-badge--dot{height:var(--dot-size);min-width:0;width:var(--dot-size);padding:0}.notification-bell-character{height:1lh;display:grid;overflow:hidden}.notification-bell-character-track{transition:translate var(--roll-duration) var(--roll-timing-function);translate:0 calc(var(--value) * -1lh);display:grid}.notification-bell-character-track span{text-align:center;height:1lh}.notification-bell .notification-bell-icon{--size:var(--icon-size);transform-origin:50% 8%}.notification-bell .notification-bell-icon svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:var(--icon-stroke-width)}@media (prefers-reduced-motion:reduce){.notification-bell,.notification-bell-badge,.notification-bell-character-track{transition:none}.notification-bell[data-ring="1"] .notification-bell-icon,.notification-bell[data-ring="2"] .notification-bell-icon{animation:none}}@keyframes notification-bell-ring-1{0%,to{rotate:0deg}15%{rotate:var(--ring-angle)}30%{rotate:calc(var(--ring-angle) * -.85)}45%{rotate:calc(var(--ring-angle) * .6)}60%{rotate:calc(var(--ring-angle) * -.4)}75%{rotate:calc(var(--ring-angle) * .2)}}@keyframes notification-bell-ring-2{0%,to{rotate:0deg}15%{rotate:var(--ring-angle)}30%{rotate:calc(var(--ring-angle) * -.85)}45%{rotate:calc(var(--ring-angle) * .6)}60%{rotate:calc(var(--ring-angle) * -.4)}75%{rotate:calc(var(--ring-angle) * .2)}}}
+/*$vite$:1*/

package/build/components/notification-bell/svg/bell.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>

package/build/components/onboarding-checklist/index.d.ts

@@ -0,0 +1,29 @@
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    [ONBOARDING_CHECKLIST_TASK]?: Attributes;
+    done?: string[];
+    ondismiss?: VoidFunction;
+    open?: string[];
+    state?: State;
+    tasks: Task[];
+};
+type State = {
+    celebrating: boolean;
+    count: number;
+};
+type Task = {
+    action: string;
+    description: string;
+    id: string;
+    title: string;
+};
+declare const ONBOARDING_CHECKLIST_TASK: unique symbol;
+declare function template(this: {
+    attributes?: Partial<A>;
+} | void, { done, ondismiss, open, state, tasks, ...attributes }: A): DocumentFragment | Text;
+declare const _default: typeof template & {
+    readonly task: typeof ONBOARDING_CHECKLIST_TASK;
+};
+export default _default;
+export type { State, Task };