@esportsplus/ui 0.55.0 → 0.56.3

package/build/components/morphing-nav/index.js

@@ -0,0 +1,342 @@
+import * as template_u1 from '@esportsplus/template';
+import { on } from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect, onCleanup } from '@esportsplus/reactivity';
+import './scss/index.scss';
+const template_0v1vh5x2 = template_u1.template(`<nav class='morphing-nav'><div class='morphing-nav-bar'><!--$--><ul class='morphing-nav-list'></ul></div><div class='morphing-nav-popover'><div aria-hidden='true' class='morphing-nav-bridge'></div><svg aria-hidden='true' class='morphing-nav-caret' height='9' viewBox='0 0 16 9' width='16'><path d='M0 9 8 1l8 8' stroke-width='1' /></svg><div class='morphing-nav-panel'>`);
+const template_0v1vh5xa = template_u1.template(`<div class='morphing-nav-brand'>`);
+const template_0v1vh5xd = template_u1.template(`<li><button class='morphing-nav-trigger' type='button'><!--$--><svg aria-hidden='true' class='morphing-nav-chevron' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 12 12'><path d='m3 4.75 3 3 3-3' />`);
+const template_0v1vh5xh = template_u1.template(`<div class='morphing-nav-action'>`);
+const template_0v1vh5xk = template_u1.template(`<div class='morphing-nav-section '><ul class='morphing-nav-links'>`);
+const template_0v1vh5xo = template_u1.template(`<li><a class='morphing-nav-link'><span class='morphing-nav-icon'></span><span class='morphing-nav-text'><span class='morphing-nav-title'></span><span class='morphing-nav-description'>`);
+class ReactiveObject_0v1vh5x0 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 CARET = 16;
+const CARET_INSET = 12;
+const CLOSE_GRACE = 180;
+const EASE_OUT = 'cubic-bezier(0.23, 1, 0.32, 1)';
+const MORPHING_NAV_LINK = Symbol.for('@esportsplus/ui/morphing-nav.link');
+const MORPHING_NAV_PANEL = Symbol.for('@esportsplus/ui/morphing-nav.panel');
+const MORPHING_NAV_TRIGGER = Symbol.for('@esportsplus/ui/morphing-nav.trigger');
+const OPEN_INTENT = 80;
+const SLIDE = 48;
+let uid = 0;
+function reduced() {
+    return matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+const morphingNav = ({ action, brand, label = 'Main', onnavigate, sections, state, ...attributes }) => {
+    let after, closeTimer, current = -1, id = `morphing-nav-${++uid}`, layers = [], nav, observer, openTimer, panel, popover, running = new Map(), s = state ?? new ReactiveObject_0v1vh5x0(), triggers = [];
+    function animate(layer, keyframes, duration) {
+        running.get(layer)?.cancel();
+        running.set(layer, layer.animate(keyframes, { duration, easing: EASE_OUT }));
+    }
+    function center(index) {
+        let box = triggers[index]?.getBoundingClientRect(), rect = nav?.getBoundingClientRect();
+        return box && rect ? box.left - rect.left + box.width / 2 : 0;
+    }
+    function close(refocus = false) {
+        clearTimeout(openTimer);
+        clearTimeout(closeTimer);
+        let previous = current;
+        if (previous === -1) {
+            return;
+        }
+        current = -1;
+        s.active = -1;
+        popover?.classList.remove('--active');
+        if (refocus) {
+            triggers[previous]?.focus();
+        }
+    }
+    function links() {
+        return current === -1 ? [] : [...(layers[current]?.querySelectorAll('a') ?? [])];
+    }
+    function open(index) {
+        clearTimeout(openTimer);
+        clearTimeout(closeTimer);
+        let previous = current;
+        if (previous === index || !sections[index]) {
+            return;
+        }
+        current = index;
+        s.active = index;
+        swap(previous, index);
+        place(previous === -1);
+    }
+    function place(fresh) {
+        if (!nav || !panel || !popover || current === -1) {
+            return;
+        }
+        let layer = layers[current], max = nav.offsetWidth;
+        panel.style.setProperty('--nav-width', `${max}px`);
+        let middle = center(current), width = Math.min(layer.offsetWidth, max), x = Math.max(0, Math.min(middle - width / 2, max - width)), caret = Math.max(CARET_INSET, Math.min(middle - x - CARET / 2, width - CARET - CARET_INSET)), element = popover, style = element.style, update = () => {
+            style.height = `${layer.offsetHeight}px`;
+            style.setProperty('--caret-x', `${caret}px`);
+            style.transformOrigin = `${caret + CARET / 2}px 0`;
+            style.translate = `${x}px 0`;
+            style.width = `${width}px`;
+        };
+        if (!fresh) {
+            update();
+            return;
+        }
+        element.classList.add('--opening');
+        update();
+        element.getBoundingClientRect();
+        element.classList.remove('--opening');
+        element.classList.add('--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 === incoming || layer === outgoing) {
+                continue;
+            }
+            running.get(layer)?.cancel();
+            layer.classList.remove('--active');
+            layer.inert = true;
+        }
+        if (outgoing) {
+            outgoing.classList.remove('--active');
+            outgoing.inert = true;
+            animate(outgoing, reduce
+                ? [{ opacity: 1, visibility: 'visible' }, { opacity: 0, visibility: 'visible' }]
+                : [
+                    { filter: 'blur(0px)', opacity: 1, translate: '0 0', visibility: 'visible' },
+                    { filter: 'blur(4px)', opacity: 0, translate: `${-dir * SLIDE}px 0`, visibility: 'visible' }
+                ], reduce ? 150 : 180);
+        }
+        if (!incoming) {
+            return;
+        }
+        incoming.classList.add('--active');
+        incoming.inert = false;
+        if (!outgoing) {
+            running.get(incoming)?.cancel();
+            return;
+        }
+        animate(incoming, reduce
+            ? [{ opacity: 0 }, { opacity: 1 }]
+            : [
+                { filter: 'blur(4px)', opacity: 0, translate: `${dir * SLIDE}px 0` },
+                { filter: 'blur(0px)', opacity: 1, translate: '0 0' }
+            ], reduce ? 200 : 250);
+    }
+    function trigger(index, e) {
+        let key = e.key;
+        if (key === 'ArrowDown') {
+            e.preventDefault();
+            open(index);
+            links()[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 = links()[0];
+            if (first) {
+                e.preventDefault();
+                first.focus();
+            }
+        }
+    }
+    let stop = effect(() => s.active, (active) => {
+        if (active === current) {
+            return;
+        }
+        if (active === -1) {
+            close();
+        }
+        else {
+            open(active);
+        }
+    });
+    onCleanup(() => {
+        clearTimeout(closeTimer);
+        clearTimeout(openTimer);
+        observer?.disconnect();
+        stop();
+        for (let animation of running.values()) {
+            animation.cancel();
+        }
+    });
+    return (() => {
+        let root_0v1vh5x1 = template_0v1vh5x2(), element_0v1vh5x3 = root_0v1vh5x1.firstChild, element_0v1vh5x4 = element_0v1vh5x3.firstElementChild.firstChild, element_0v1vh5x5 = element_0v1vh5x3.firstElementChild.firstElementChild, element_0v1vh5x6 = element_0v1vh5x3.firstElementChild, element_0v1vh5x7 = element_0v1vh5x6.nextElementSibling, element_0v1vh5x8 = element_0v1vh5x7.firstElementChild.nextElementSibling.nextElementSibling;
+        template_u1.setProperties(element_0v1vh5x3, attributes);
+        template_u1.setProperty(element_0v1vh5x3, 'aria-label', label);
+        template_u1.ondocument(element_0v1vh5x3, 'pointerdown', (e) => {
+            if (current !== -1 && nav && !nav.contains(e.target)) {
+                close();
+            }
+        });
+        template_u1.onconnect(element_0v1vh5x3, (element) => {
+            nav = element;
+            observer = new ResizeObserver(() => place(false));
+            observer.observe(element);
+        });
+        template_u1.on(element_0v1vh5x3, 'focusout', (e) => {
+            if (!e.currentTarget.contains(e.relatedTarget)) {
+                close();
+            }
+        });
+        template_u1.on(element_0v1vh5x3, 'pointerenter', (e) => {
+            if (e.pointerType !== 'touch') {
+                clearTimeout(closeTimer);
+            }
+        });
+        template_u1.on(element_0v1vh5x3, 'pointerleave', (e) => {
+            if (e.pointerType === 'touch') {
+                return;
+            }
+            clearTimeout(openTimer);
+            if (current !== -1) {
+                clearTimeout(closeTimer);
+                closeTimer = setTimeout(() => close(), CLOSE_GRACE);
+            }
+        });
+        template_u1.slot(element_0v1vh5x4, brand && (() => {
+            let root_0v1vh5x9 = template_0v1vh5xa(), element_0v1vh5xb = root_0v1vh5x9.firstChild;
+            template_u1.slot(element_0v1vh5xb, brand, 1);
+            return root_0v1vh5x9;
+        })());
+        template_u1.slot(element_0v1vh5x5, sections.map((section, index) => {
+            let root_0v1vh5xc = template_0v1vh5xd(), element_0v1vh5xe = root_0v1vh5xc.firstChild.firstElementChild, element_0v1vh5xf = element_0v1vh5xe.firstChild;
+            template_u1.setProperties(element_0v1vh5xe, attributes[MORPHING_NAV_TRIGGER]);
+            template_u1.setProperty(element_0v1vh5xe, 'aria-controls', () => s.active === index && `${id}-panel`);
+            template_u1.setProperty(element_0v1vh5xe, 'aria-expanded', () => String(s.active === index));
+            template_u1.setList(element_0v1vh5xe, 'class', () => s.active === index && '--active');
+            template_u1.delegate(element_0v1vh5xe, 'click', (e) => {
+                if (current === index && (e.detail === 0 || e.pointerType === 'touch')) {
+                    close();
+                }
+                else {
+                    open(index);
+                }
+            });
+            template_u1.on(element_0v1vh5xe, 'focus', () => {
+                if (current !== -1 && current !== index) {
+                    open(index);
+                }
+            });
+            template_u1.delegate(element_0v1vh5xe, 'keydown', (e) => trigger(index, e));
+            template_u1.on(element_0v1vh5xe, 'pointerenter', (e) => {
+                if (e.pointerType === 'touch') {
+                    return;
+                }
+                clearTimeout(openTimer);
+                if (current !== -1) {
+                    open(index);
+                }
+                else {
+                    openTimer = setTimeout(() => open(index), OPEN_INTENT);
+                }
+            });
+            template_u1.on(element_0v1vh5xe, 'pointerleave', () => {
+                if (current === -1) {
+                    clearTimeout(openTimer);
+                }
+            });
+            template_u1.onrender(element_0v1vh5xe, (element) => {
+                triggers[index] = element;
+            });
+            template_u1.slot(element_0v1vh5xf, section.label);
+            return root_0v1vh5xc;
+        }), 1);
+        template_u1.slot(element_0v1vh5x6, action && (() => {
+            let root_0v1vh5xg = template_0v1vh5xh(), element_0v1vh5xi = root_0v1vh5xg.firstChild;
+            template_u1.onrender(element_0v1vh5xi, (element) => { after = element; });
+            template_u1.slot(element_0v1vh5xi, action, 1);
+            return root_0v1vh5xg;
+        })(), 2);
+        template_u1.onrender(element_0v1vh5x7, (element) => { popover = element; });
+        template_u1.setProperty(element_0v1vh5x8, 'id', template_u1.interpolate([(id), "-panel"]));
+        template_u1.setProperties(element_0v1vh5x8, attributes[MORPHING_NAV_PANEL]);
+        template_u1.delegate(element_0v1vh5x8, 'keydown', (e) => {
+            if (current === -1) {
+                return;
+            }
+            let list = links(), 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], target = after?.querySelector('a, button');
+                if (next) {
+                    e.preventDefault();
+                    next.focus();
+                }
+                else if (target) {
+                    e.preventDefault();
+                    close();
+                    target.focus();
+                }
+                else {
+                    close();
+                }
+            }
+        });
+        template_u1.onrender(element_0v1vh5x8, (element) => {
+            panel = element;
+        });
+        template_u1.slot(element_0v1vh5x8, sections.map((section, index) => {
+            let root_0v1vh5xj = template_0v1vh5xk(), element_0v1vh5xl = root_0v1vh5xj.firstChild, element_0v1vh5xm = element_0v1vh5xl.firstElementChild;
+            template_u1.setList(element_0v1vh5xl, 'class', section.columns === 2 && 'morphing-nav-section--columns');
+            template_u1.setProperty(element_0v1vh5xl, 'data-section', index);
+            template_u1.onrender(element_0v1vh5xl, (element) => {
+                element.inert = true;
+                layers[index] = element;
+            });
+            template_u1.slot(element_0v1vh5xm, section.links.map((link) => {
+                let root_0v1vh5xn = template_0v1vh5xo(), element_0v1vh5xp = root_0v1vh5xn.firstChild.firstElementChild, element_0v1vh5xq = element_0v1vh5xp.firstElementChild, element_0v1vh5xr = element_0v1vh5xq.nextElementSibling.firstElementChild, element_0v1vh5xs = element_0v1vh5xr.nextElementSibling;
+                template_u1.setProperty(element_0v1vh5xp, 'href', link.href ?? '#');
+                template_u1.setProperties(element_0v1vh5xp, attributes[MORPHING_NAV_LINK]);
+                template_u1.delegate(element_0v1vh5xp, 'click', () => close());
+                template_u1.onrender(element_0v1vh5xp, (element) => {
+                    on(element, 'click', (e) => {
+                        if (onnavigate) {
+                            e.preventDefault();
+                            onnavigate(link, section);
+                        }
+                        else if (!link.href) {
+                            e.preventDefault();
+                        }
+                    });
+                });
+                template_u1.slot(element_0v1vh5xq, link.icon, 1);
+                template_u1.slot(element_0v1vh5xr, link.title, 1);
+                template_u1.slot(element_0v1vh5xs, link.description, 1);
+                return root_0v1vh5xn;
+            }), 1);
+            return root_0v1vh5xj;
+        }), 1);
+        return root_0v1vh5x1;
+    })();
+};
+export default Object.assign(morphingNav, { link: MORPHING_NAV_LINK, panel: MORPHING_NAV_PANEL, trigger: MORPHING_NAV_TRIGGER });

package/build/components/morphing-nav/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.morphing-nav{--background:var(--color-white-300);--bar-height:52px;--bar-padding:6px;--bar-radius:calc(var(--trigger-radius) + var(--bar-padding));--box-shadow:0 0 0 var(--border-width-400) var(--color-border-300), var(--box-shadow-300);--caret-stroke:oklch(from var(--color-black-300) l c h / .08);--close-duration:.15s;--color:var(--color-text-300);--color-active:var(--color-text-500);--description-font-size:var(--font-size-300);--fade-duration:.2s;--focus-color:var(--color-text-500);--font-size:var(--font-size-400);--gap:12px;--link-radius:var(--border-radius-400);--morph-duration:.3s;--morph-timing-function: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);--muted:var(--color-text-300);--panel-padding:8px;--panel-radius:calc(var(--link-radius) + var(--panel-padding));--surface:var(--color-grey-400);--trigger-height:40px;--trigger-padding:12px;--trigger-radius:10px}.morphing-nav--flat{--box-shadow:0 0 0 var(--border-width-400) var(--color-border-300);--caret-stroke:var(--color-border-300)}.morphing-nav{font-size:var(--font-size);position:relative}.morphing-nav-action,.morphing-nav-brand{flex-shrink:0;align-items:center;display:flex}.morphing-nav-bar{background:var(--background);border-radius:var(--bar-radius);box-shadow:var(--box-shadow);height:var(--bar-height);padding:var(--bar-padding);align-items:center;gap:4px;display:flex}.morphing-nav-brand{padding-inline:10px}.morphing-nav-bridge{height:var(--gap);inset-inline:0;top:calc(var(--gap) * -1);position:absolute}.morphing-nav-caret{fill:var(--background);stroke:var(--caret-stroke);transition:translate var(--morph-duration) var(--morph-timing-function);translate:var(--caret-x,0px) 0;z-index:1;position:absolute;top:-8px;left:0}.morphing-nav-chevron{flex-shrink:0;width:12px;height:12px;transition:rotate .2s cubic-bezier(.23,1,.32,1)}.morphing-nav-description{color:var(--muted);font-size:var(--description-font-size);text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.morphing-nav-icon{color:var(--muted);flex-shrink:0;width:18px;height:18px;margin-top:2px;display:flex}.morphing-nav-icon svg{width:100%;height:100%}.morphing-nav-link{border-radius:var(--link-radius);color:inherit;outline:none;align-items:flex-start;gap:12px;padding:12px 16px 12px 12px;text-decoration:none;transition:background-color .15s ease-out;display:flex}.morphing-nav-link:focus-visible{outline:2px solid var(--focus-color);outline-offset:-2px}.morphing-nav-link:hover{background:var(--surface)}.morphing-nav-links{padding:var(--panel-padding);gap:2px;margin:0;list-style:none;display:grid}.morphing-nav-links li{min-width:0}.morphing-nav-list{flex:auto;align-items:center;gap:2px;min-width:0;margin:0;padding:0;list-style:none;display:flex}.morphing-nav-panel{background:var(--background);border-radius:var(--panel-radius);box-shadow:var(--box-shadow);width:100%;height:100%;position:relative;overflow:hidden}.morphing-nav-popover{opacity:0;pointer-events:none;left:0;top:calc(100% + var(--gap));transition:opacity var(--close-duration) cubic-bezier(.23, 1, .32, 1), scale var(--close-duration) cubic-bezier(.23, 1, .32, 1), visibility 0s linear var(--close-duration);visibility:hidden;z-index:10;position:absolute;scale:.98}.morphing-nav-popover.--active{opacity:1;pointer-events:auto;transition:height var(--morph-duration) var(--morph-timing-function), opacity var(--fade-duration) cubic-bezier(.23, 1, .32, 1), scale var(--fade-duration) cubic-bezier(.23, 1, .32, 1), translate var(--morph-duration) var(--morph-timing-function), width var(--morph-duration) var(--morph-timing-function);visibility:visible;scale:1}.morphing-nav-popover.--opening{opacity:0;scale:.97}.morphing-nav-popover.--opening,.morphing-nav-popover.--opening .morphing-nav-caret{transition:none}.morphing-nav-section{max-width:var(--nav-width,none);visibility:hidden;width:max-content;position:absolute;top:0;left:0}.morphing-nav-section.--active{visibility:visible}.morphing-nav-section--columns .morphing-nav-links{grid-template-columns:repeat(2,minmax(0,1fr))}.morphing-nav-text{min-width:0;display:block}.morphing-nav-title{color:var(--color-active);font-weight:var(--font-weight-500);display:block}.morphing-nav-trigger{border-radius:var(--trigger-radius);color:var(--color);cursor:pointer;font-size:inherit;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;outline:none;align-items:center;gap:4px;transition:background-color .15s ease-out,color .15s ease-out,scale .15s ease-out;display:flex}.morphing-nav-trigger:active{scale:.96}.morphing-nav-trigger:focus-visible{outline:2px solid var(--focus-color)}.morphing-nav-trigger:hover{color:var(--color-active)}.morphing-nav-trigger.--active{background:var(--surface);color:var(--color-active)}.morphing-nav-trigger.--active .morphing-nav-chevron{rotate:180deg}@media (width<=639px){.morphing-nav{--trigger-padding:10px}.morphing-nav-action,.morphing-nav-brand,.morphing-nav-chevron{display:none}.morphing-nav-section--columns .morphing-nav-links{grid-template-columns:minmax(0,1fr)}}@media (prefers-reduced-motion:reduce){.morphing-nav{--morph-duration:0s}.morphing-nav-chevron{transition:none}.morphing-nav-popover,.morphing-nav-popover.--opening{scale:1}.morphing-nav-trigger{transition:background-color .15s ease-out,color .15s ease-out}}}
+/*$vite$:1*/

package/build/components/multi-step-form/index.d.ts

@@ -0,0 +1,32 @@
+import { type Attributes } from '@esportsplus/template';
+import input from '../input/index.js';
+import './scss/index.scss';
+type A = Attributes & {
+    [MULTI_STEP_FORM_INPUT]?: Parameters<typeof input>[0];
+    oncreate?: (value: {
+        name: string;
+        plan: string;
+    }) => void;
+    plans?: Plan[];
+    state?: State;
+};
+type Plan = {
+    id: string;
+    name: string;
+    note: string;
+    price: string;
+};
+type State = {
+    name: string;
+    panel: number;
+    plan: string;
+};
+declare const MULTI_STEP_FORM_INPUT: unique symbol;
+declare function template(this: {
+    attributes?: Partial<A>;
+} | void, { oncreate, plans, state, ...attributes }?: A): DocumentFragment | Text;
+declare const _default: typeof template & {
+    readonly input: typeof MULTI_STEP_FORM_INPUT;
+};
+export default _default;
+export type { Plan, State };