@esportsplus/ui 0.54.0 → 0.56.2

package/build/components/multi-step-form/index.js

@@ -0,0 +1,305 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { factory } from '../checkbox/index.js';
+import form from '../form/index.js';
+import input from '../input/index.js';
+import radio from '../radio/index.js';
+import './scss/index.scss';
+const template_0qasxyk2 = template_u1.template(`<div class='multi-step-form-footer'><button class='button multi-step-form-back' type='button'> Back </button><button class='button multi-step-form-submit' type='submit'><span class='multi-step-form-labels'>`);
+const template_0qasxyk7 = template_u1.template(`<span class='multi-step-form-label'>`);
+const template_0qasxyka = template_u1.template(`<div class='multi-step-form-header'><span class='multi-step-form-step'></span><div class='multi-step-form-progress' aria-hidden='true'>`);
+const template_0qasxyke = template_u1.template(`<span class='multi-step-form-bar'>`);
+const template_0qasxykh = template_u1.template(`<div class='multi-step-form-heading'><h3 class='multi-step-form-title'></h3><p class='multi-step-form-note'>`);
+const template_0qasxykl = template_u1.template(`<!--$--><!--$-->`);
+const template_0qasxykp = template_u1.template(`<!--$--><div aria-label='Plan' class='multi-step-form-plans' role='radiogroup'>`);
+const template_0qasxykt = template_u1.template(`<label class='multi-step-form-plan'><!--$--><span class='multi-step-form-plan-text'><span class='multi-step-form-plan-name'></span><span class='multi-step-form-plan-note'></span></span><span class='multi-step-form-plan-price'>`);
+const template_0qasxyk10 = template_u1.template(`<!--$--><dl class='multi-step-form-review'>`);
+const template_0qasxyk14 = template_u1.template(`<div class='multi-step-form-review-row'><dt></dt><dd>`);
+const template_0qasxyk18 = template_u1.template(`<!--$--><div class='multi-step-form-done-text'><h3 class='multi-step-form-title' data-autofocus tabindex='-1'>Workspace created</h3><p class='multi-step-form-note'>`);
+const template_0qasxyk1c = template_u1.template(`<div class='multi-step-form-panel '>`);
+const template_0qasxyk1e = template_u1.template(`<svg aria-hidden='true' class='multi-step-form-done-icon' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 16 16'><path d='m3.5 8.5 3 3 6-7' />`);
+const template_0qasxyk1g = template_u1.template(`<div class='multi-step-form'><div class='multi-step-form-ghost' aria-hidden='true' inert><!--$--><div class='multi-step-form-stack'>`);
+const template_0qasxyk1m = template_u1.template(`<!--$--><div class='multi-step-form-body'><div class='multi-step-form-inner'></div></div><!--$--><span aria-live='polite' class='multi-step-form-live'>`);
+class ReactiveObject_0qasxyk0 extends reactivity_u0.ReactiveObject {
+    #name = this[reactivity_u0.SIGNAL]('');
+    #panel = this[reactivity_u0.SIGNAL](0);
+    #plan = this[reactivity_u0.SIGNAL]('');
+    constructor() {
+        super(null);
+    }
+    get name() {
+        return reactivity_u0.read(this.#name);
+    }
+    set name(_v0) {
+        reactivity_u0.write(this.#name, _v0);
+    }
+    get panel() {
+        return reactivity_u0.read(this.#panel);
+    }
+    set panel(_v1) {
+        reactivity_u0.write(this.#panel, _v1);
+    }
+    get plan() {
+        return reactivity_u0.read(this.#plan);
+    }
+    set plan(_v2) {
+        reactivity_u0.write(this.#plan, _v2);
+    }
+}
+const DEFAULT_PLANS = [
+    { id: 'hobby', name: 'Hobby', note: 'One project, community support', price: 'Free' },
+    { id: 'pro', name: 'Pro', note: 'Unlimited projects, analytics', price: '$12/mo' },
+    { id: 'team', name: 'Team', note: 'Shared billing and roles', price: '$36/mo' }
+];
+const EASE_OUT = 'cubic-bezier(0.23, 1, 0.32, 1)';
+const LABELS = ['Continue', 'Create', 'Start over'];
+const MULTI_STEP_FORM_INPUT = Symbol.for('@esportsplus/ui/multi-step-form.input');
+const REDUCED_MOTION = '(prefers-reduced-motion: reduce)';
+const SHIFT = 36;
+const STEPS = ['Name', 'Plan', 'Review'];
+function check() {
+    return template_0qasxyk1e();
+}
+function template({ oncreate, plans = DEFAULT_PLANS, state, ...attributes } = {}) {
+    let body, defaults = this?.attributes, elements = [], observer, prefix = `multi-step-form-${Math.random().toString(36).slice(2, 8)}`, s = state || new ReactiveObject_0qasxyk0();
+    function advance() {
+        if (!valid()) {
+            return;
+        }
+        if (s.panel < 2) {
+            go(s.panel + 1, 1);
+        }
+        else if (s.panel === 2) {
+            go(3, 1);
+            oncreate?.({ name: s.name.trim(), plan: s.plan });
+        }
+        else {
+            s.name = '';
+            s.plan = '';
+            go(0, -1);
+        }
+    }
+    function footer(ghost) {
+        return (() => {
+            let root_0qasxyk1 = template_0qasxyk2(), element_0qasxyk3 = root_0qasxyk1.firstChild.firstElementChild, element_0qasxyk4 = element_0qasxyk3.nextElementSibling, element_0qasxyk5 = element_0qasxyk4.firstElementChild;
+            template_u1.setProperty(element_0qasxyk3, 'disabled', () => ghost || s.panel === 0 || s.panel === 3);
+            template_u1.delegate(element_0qasxyk3, 'click', () => {
+                if (s.panel === 1 || s.panel === 2) {
+                    go(s.panel - 1, -1);
+                }
+            });
+            template_u1.setProperty(element_0qasxyk4, 'disabled', () => ghost || !valid());
+            template_u1.slot(element_0qasxyk5, LABELS.map((label) => {
+                let root_0qasxyk6 = template_0qasxyk7(), element_0qasxyk8 = root_0qasxyk6.firstChild;
+                template_u1.setProperty(element_0qasxyk8, 'aria-hidden', () => String(label !== primary()));
+                template_u1.setList(element_0qasxyk8, 'class', () => label === primary() && '--active');
+                template_u1.slot(element_0qasxyk8, label, 1);
+                return root_0qasxyk6;
+            }), 1);
+            return root_0qasxyk1;
+        })();
+    }
+    function go(next, direction) {
+        let from = elements[s.panel], reduce = matchMedia(REDUCED_MOTION).matches, to = elements[next];
+        s.panel = next;
+        if (from && from !== to) {
+            for (let animation of from.getAnimations()) {
+                animation.cancel();
+            }
+            from.dataset.exiting = '';
+            from.inert = true;
+            let exit = from.animate(reduce
+                ? { opacity: [1, 0] }
+                : { filter: ['blur(0px)', 'blur(4px)'], opacity: [1, 0], transform: ['none', `translateX(${direction * -SHIFT * 0.7}px)`] }, { duration: reduce ? 120 : 150, easing: EASE_OUT, fill: 'forwards' });
+            exit.onfinish = () => {
+                delete from.dataset.exiting;
+                exit.cancel();
+            };
+        }
+        if (!to) {
+            return;
+        }
+        for (let animation of to.getAnimations()) {
+            animation.cancel();
+        }
+        delete to.dataset.exiting;
+        to.inert = false;
+        to.animate(reduce
+            ? { opacity: [0, 1] }
+            : { filter: ['blur(4px)', 'blur(0px)'], opacity: [0, 1], transform: [`translateX(${direction * SHIFT}px)`, 'none'] }, { duration: reduce ? 200 : 300, easing: EASE_OUT });
+        requestAnimationFrame(() => {
+            (to.querySelector('input:checked, [data-autofocus]') ?? to.querySelector('input'))?.focus({ preventScroll: true });
+        });
+    }
+    function header() {
+        return (() => {
+            let root_0qasxyk9 = template_0qasxyka(), element_0qasxykb = root_0qasxyk9.firstChild.firstElementChild, element_0qasxykc = element_0qasxykb.nextElementSibling;
+            new template_u1.EffectSlot(element_0qasxykb, () => s.panel < 3 ? `Step ${s.panel + 1} of 3` : 'Complete', 1);
+            template_u1.slot(element_0qasxykc, STEPS.map((_, i) => {
+                let root_0qasxykd = template_0qasxyke(), element_0qasxykf = root_0qasxykd.firstChild;
+                template_u1.setList(element_0qasxykf, 'class', () => i <= s.panel && '--active');
+                return root_0qasxykd;
+            }), 1);
+            return root_0qasxyk9;
+        })();
+    }
+    function heading(title, note, focusable = false) {
+        return (() => {
+            let root_0qasxykg = template_0qasxykh(), element_0qasxyki = root_0qasxykg.firstChild.firstElementChild, element_0qasxykj = element_0qasxyki.nextElementSibling;
+            template_u1.setProperties(element_0qasxyki, focusable ? { 'data-autofocus': '', tabindex: '-1' } : {});
+            template_u1.slot(element_0qasxyki, title, 1);
+            template_u1.slot(element_0qasxykj, note, 1);
+            return root_0qasxykg;
+        })();
+    }
+    function name() {
+        return s.name.trim() || 'Untitled';
+    }
+    function panel(index, ghost) {
+        let content;
+        if (index === 0) {
+            content = (() => {
+                let root_0qasxykk = template_0qasxykl(), element_0qasxykm = root_0qasxykk.firstChild, element_0qasxykn = element_0qasxykm.nextSibling;
+                template_u1.slot(element_0qasxykm, heading('Name your workspace', 'You can change this later.'));
+                template_u1.slot(element_0qasxykn, input({
+                    'aria-label': 'Workspace name',
+                    autocomplete: 'organization',
+                    class: 'multi-step-form-input',
+                    'data-autofocus': '',
+                    name: 'name',
+                    oninput: (e) => {
+                        s.name = e.target.value;
+                    },
+                    placeholder: 'Acme Inc',
+                    value: () => s.name,
+                    ...defaults?.[MULTI_STEP_FORM_INPUT],
+                    ...attributes[MULTI_STEP_FORM_INPUT]
+                }));
+                return root_0qasxykk;
+            })();
+        }
+        else if (index === 1) {
+            content = (() => {
+                let root_0qasxyko = template_0qasxykp(), element_0qasxykq = root_0qasxyko.firstChild, element_0qasxykr = element_0qasxykq.nextSibling;
+                template_u1.slot(element_0qasxykq, heading('Choose a plan', 'Switch any time from settings.'));
+                template_u1.slot(element_0qasxykr, plans.map((plan) => {
+                    let root_0qasxyks = template_0qasxykt(), element_0qasxyku = root_0qasxyks.firstChild, element_0qasxykv = element_0qasxyku.firstChild, element_0qasxykw = element_0qasxyku.firstElementChild.firstElementChild, element_0qasxykx = element_0qasxykw.nextElementSibling, element_0qasxyky = element_0qasxyku.firstElementChild.nextElementSibling;
+                    template_u1.setList(element_0qasxyku, 'class', () => s.plan === plan.id && '--active');
+                    template_u1.slot(element_0qasxykv, radio({
+                        class: 'multi-step-form-radio',
+                        [factory.input]: {
+                            checked: () => s.plan === plan.id,
+                            name: `${prefix}${ghost ? '-ghost' : ''}-plan`,
+                            onchange: () => {
+                                s.plan = plan.id;
+                            },
+                            value: plan.id
+                        }
+                    }));
+                    template_u1.slot(element_0qasxykw, plan.name, 1);
+                    template_u1.slot(element_0qasxykx, plan.note, 1);
+                    template_u1.slot(element_0qasxyky, plan.price, 1);
+                    return root_0qasxyks;
+                }), 1);
+                return root_0qasxyko;
+            })();
+        }
+        else if (index === 2) {
+            content = (() => {
+                let root_0qasxykz = template_0qasxyk10(), element_0qasxyk11 = root_0qasxykz.firstChild, element_0qasxyk12 = element_0qasxyk11.nextSibling;
+                template_u1.slot(element_0qasxyk11, heading('Review', 'Check the details, then create.', true));
+                template_u1.slot(element_0qasxyk12, [
+                    ['Name', name],
+                    ['Plan', () => selected()?.name ?? 'None'],
+                    ['Billed', () => selected()?.price ?? 'Free']
+                ].map(([term, value]) => {
+                    let root_0qasxyk13 = template_0qasxyk14(), element_0qasxyk15 = root_0qasxyk13.firstChild.firstElementChild, element_0qasxyk16 = element_0qasxyk15.nextElementSibling;
+                    template_u1.slot(element_0qasxyk15, term, 1);
+                    template_u1.slot(element_0qasxyk16, value, 1);
+                    return root_0qasxyk13;
+                }), 1);
+                return root_0qasxykz;
+            })();
+        }
+        else {
+            content = (() => {
+                let root_0qasxyk17 = template_0qasxyk18(), element_0qasxyk19 = root_0qasxyk17.firstChild, element_0qasxyk1a = element_0qasxyk19.nextSibling.firstElementChild.nextElementSibling;
+                template_u1.slot(element_0qasxyk19, check());
+                new template_u1.EffectSlot(element_0qasxyk1a, () => `${name()} is ready on ${selected()?.name ?? 'Hobby'}.`, 1);
+                return root_0qasxyk17;
+            })();
+        }
+        return (() => {
+            let root_0qasxyk1b = template_0qasxyk1c(), element_0qasxyk1d = root_0qasxyk1b.firstChild;
+            template_u1.setList(element_0qasxyk1d, 'class', index === 3 && 'multi-step-form-panel--done');
+            template_u1.setProperties(element_0qasxyk1d, ghost ? {} : {
+                class: () => s.panel === index && '--active',
+                onrender: (element) => {
+                    elements[index] = element;
+                }
+            });
+            template_u1.slot(element_0qasxyk1d, content, 1);
+            return root_0qasxyk1b;
+        })();
+    }
+    function primary() {
+        return s.panel === 2 ? LABELS[1] : s.panel === 3 ? LABELS[2] : LABELS[0];
+    }
+    function selected() {
+        return plans.find((plan) => plan.id === s.plan);
+    }
+    function valid() {
+        return s.panel === 0 ? s.name.trim().length >= 2 : s.panel === 1 ? !!selected() : true;
+    }
+    return (() => {
+        let root_0qasxyk1f = template_0qasxyk1g(), element_0qasxyk1h = root_0qasxyk1f.firstChild, element_0qasxyk1i = element_0qasxyk1h.firstElementChild.firstChild, element_0qasxyk1j = element_0qasxyk1h.firstElementChild.firstElementChild, element_0qasxyk1k = element_0qasxyk1h.firstElementChild;
+        template_u1.setProperties(element_0qasxyk1h, defaults);
+        template_u1.setProperties(element_0qasxyk1h, attributes);
+        template_u1.slot(element_0qasxyk1i, header());
+        template_u1.slot(element_0qasxyk1j, [0, 1, 2, 3].map((index) => panel(index, true)), 1);
+        template_u1.slot(element_0qasxyk1k, footer(true), 2);
+        template_u1.slot(element_0qasxyk1h, form.action({
+            action: () => {
+                advance();
+                return { errors: [] };
+            },
+            'aria-label': 'Create a workspace',
+            class: 'multi-step-form-card',
+            novalidate: true,
+            onkeydown: (e) => {
+                if (e.key !== 'Enter' || e.isComposing || e.target.tagName === 'BUTTON') {
+                    return;
+                }
+                e.preventDefault();
+                advance();
+            }
+        }, (() => {
+            let root_0qasxyk1l = template_0qasxyk1m(), element_0qasxyk1n = root_0qasxyk1l.firstChild, element_0qasxyk1o = element_0qasxyk1n.nextSibling, element_0qasxyk1p = element_0qasxyk1o.firstElementChild, element_0qasxyk1q = element_0qasxyk1o.nextSibling, element_0qasxyk1r = element_0qasxyk1q.nextSibling;
+            template_u1.slot(element_0qasxyk1n, header());
+            template_u1.onrender(element_0qasxyk1o, (element) => {
+                body = element;
+            });
+            template_u1.onconnect(element_0qasxyk1p, (element) => {
+                observer = new ResizeObserver(() => {
+                    if (!body) {
+                        return;
+                    }
+                    body.style.height = `${element.offsetHeight}px`;
+                    if (!body.hasAttribute('data-measured')) {
+                        requestAnimationFrame(() => body?.setAttribute('data-measured', ''));
+                    }
+                });
+                observer.observe(element);
+            });
+            template_u1.ondisconnect(element_0qasxyk1p, () => {
+                observer?.disconnect();
+            });
+            template_u1.slot(element_0qasxyk1p, [0, 1, 2, 3].map((index) => panel(index, false)), 1);
+            template_u1.slot(element_0qasxyk1q, footer(false));
+            new template_u1.EffectSlot(element_0qasxyk1r, () => s.panel === 3 ? 'Workspace created' : `Step ${s.panel + 1} of 3, ${STEPS[s.panel]}`, 1);
+            return root_0qasxyk1l;
+        })()), 2);
+        return root_0qasxyk1f;
+    })();
+}
+export default Object.assign(template, { input: MULTI_STEP_FORM_INPUT });

package/build/components/multi-step-form/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.multi-step-form{--accent:var(--color-text-500);--accent-contrast:var(--color-white-300);--background:var(--color-grey-400);--border:var(--color-border-300);--box-shadow:0 0 0 1px oklch(from var(--color-black-300) l c h / .06), 0 1px 2px oklch(from var(--color-black-300) l c h / .06), 0 6px 16px -6px oklch(from var(--color-black-300) l c h / .12);--color-muted:var(--color-text-300);--ease:cubic-bezier(.23, 1, .32, 1);--field-background:var(--color-white-300);--focus-ring:oklch(from var(--color-text-500) l c h / .38);--font-size:calc(var(--font-size-400) * .9375);--font-size-small:calc(var(--font-size-400) * .875);--font-size-title:calc(var(--font-size-400) * 1.25);--foreground:var(--color-text-500);--height-duration:.446s;--height-timing-function:linear(0, .118, .319, .509, .657, .769, .848, .901, .937, .96, .975, .984, .99, .994, 1);--radius:20px;--spring-duration:.446s;--track:oklch(from var(--color-text-500) l c h / .15);--width:420px;color:var(--foreground);font-size:var(--font-size);max-width:100%;width:var(--width);display:grid}.multi-step-form-back,.multi-step-form-submit{--padding-vertical:0px;font-size:var(--font-size);font-weight:var(--font-weight-500);outline:0 solid var(--focus-ring);outline-offset:2px;touch-action:manipulation;-webkit-user-select:none;user-select:none;border-radius:999px;height:44px}.multi-step-form-back:focus-visible,.multi-step-form-submit:focus-visible{outline-width:2px}.multi-step-form-back:not(:disabled):active,.multi-step-form-submit:not(:disabled):active{scale:.96}.multi-step-form-back{--color-default:var(--color-muted);--color-hover:var(--foreground);--background-hover:var(--field-background);--padding-horizontal:16px;outline-offset:0}.multi-step-form-back:disabled{opacity:0;pointer-events:none}.multi-step-form-bar{background:var(--track);border-radius:999px;width:32px;height:6px;overflow:hidden}.multi-step-form-bar:before{background:var(--accent);border-radius:inherit;content:"";transform-origin:100%;height:100%;transition:scale .3s var(--ease);display:block;scale:0 1}.multi-step-form-bar.--active:before{transform-origin:0;scale:1}.multi-step-form-body{overflow:hidden}.multi-step-form-body[data-measured]{transition:height var(--height-duration) var(--height-timing-function)}.multi-step-form-card{background:var(--background);border-radius:var(--radius);box-shadow:var(--box-shadow);flex-flow:column;grid-area:1/1;align-self:end;overflow:hidden}.multi-step-form-card .multi-step-form-panel:not(.--active):not([data-exiting]){display:none}.multi-step-form-done-icon{color:var(--foreground);width:24px;height:24px}.multi-step-form-card .--active>.multi-step-form-done-icon{animation:multi-step-form-pop var(--spring-duration) var(--height-timing-function) 80ms both}.multi-step-form-done-text{flex-direction:column;gap:6px;width:100%;min-width:0;display:flex}.multi-step-form-done-text .multi-step-form-note{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.multi-step-form-footer{border-top:1px solid var(--border);justify-content:space-between;align-items:center;padding:16px;display:flex}.multi-step-form-ghost{visibility:hidden;flex-direction:column;grid-area:1/1;display:flex}.multi-step-form-header{justify-content:space-between;align-items:center;gap:16px;padding:24px 24px 0;display:flex}.multi-step-form-heading{flex-direction:column;gap:6px;display:flex}.multi-step-form-inner{position:relative}.multi-step-form-input{--background-default:var(--field-background);--color-default:var(--foreground);--font-size:var(--font-size);--padding-horizontal:14px;--padding-vertical:0px;box-shadow:var(--box-shadow);outline:0 solid var(--focus-ring);border-radius:12px;flex:none;height:44px;min-height:0}.multi-step-form-input::placeholder{color:var(--color-muted)}.multi-step-form-input:focus-visible{outline-width:2px}.multi-step-form-label{filter:blur(4px);opacity:0;grid-area:1/1;transition:filter .2s ease-out,opacity .2s ease-out}.multi-step-form-label.--active{filter:none;opacity:1}.multi-step-form-labels{display:grid}.multi-step-form-live{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.multi-step-form-note{color:var(--color-muted)}.multi-step-form-panel{flex-direction:column;gap:16px;padding:24px;display:flex}.multi-step-form-panel--done{text-align:center;align-items:center;padding-block:36px}.multi-step-form-panel[data-exiting]{pointer-events:none;position:absolute;inset:0 0 auto}.multi-step-form-plan{background:var(--field-background);box-shadow:var(--box-shadow);cursor:pointer;outline:0 solid var(--focus-ring);-webkit-user-select:none;user-select:none;border-radius:12px;align-items:center;gap:14px;padding:12px 16px;transition:box-shadow .15s ease-out,scale .15s ease-out;display:flex}.multi-step-form-plan:active{scale:.98}.multi-step-form-plan:has(:focus-visible){outline-width:2px}.multi-step-form-plan.--active{box-shadow:0 0 0 1.5px var(--accent)}.multi-step-form-plan-name{color:var(--foreground);font-weight:var(--font-weight-500)}.multi-step-form-plan-note{color:var(--color-muted);font-size:var(--font-size-small);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.multi-step-form-plan-price{color:var(--color-muted);font-size:var(--font-size-small);font-variant-numeric:tabular-nums}.multi-step-form-plan-text{flex-direction:column;flex:1 1 0;min-width:0;display:flex}.multi-step-form-plans{flex-direction:column;gap:8px;display:flex}.multi-step-form-progress{gap:6px;display:flex}.multi-step-form-radio{--border-color-active:var(--accent);--border-color-default:var(--color-border-400);--border-color-hover:var(--color-muted);--border-width:1.5px;--border-width-offset-hover:0px;--box-shadow-active:none;--focus-width:0px;--indicator-color-default:var(--accent);--size:20px;--transition-duration:.15s;--transition-timing-function:ease-out}.multi-step-form-review{background:var(--field-background);box-shadow:var(--box-shadow);border-radius:12px;flex-direction:column;gap:10px;margin:0;padding:12px 16px;display:flex}.multi-step-form-review-row{justify-content:space-between;align-items:center;gap:16px;display:flex}.multi-step-form-review-row dd{color:var(--foreground);font-weight:var(--font-weight-500);text-overflow:ellipsis;white-space:nowrap;min-width:0;margin:0;overflow:hidden}.multi-step-form-review-row dt{color:var(--color-muted)}.multi-step-form-stack{display:grid}.multi-step-form-stack>.multi-step-form-panel{grid-area:1/1}.multi-step-form-step{color:var(--color-muted);font-size:var(--font-size-small);font-variant-numeric:tabular-nums}.multi-step-form-submit{--background-default:var(--accent);--color-default:var(--accent-contrast);--padding-horizontal:20px}.multi-step-form-submit:disabled{cursor:not-allowed;opacity:.4}.multi-step-form-title{color:var(--foreground);font-size:var(--font-size-title);font-weight:var(--font-weight-500);outline:none}@media (prefers-reduced-motion:reduce){.multi-step-form-bar:before,.multi-step-form-body[data-measured]{transition:none}.multi-step-form-card .--active>.multi-step-form-done-icon{animation-name:multi-step-form-fade}}@keyframes multi-step-form-fade{0%{opacity:0}}@keyframes multi-step-form-pop{0%{filter:blur(4px);opacity:0;scale:.25}}}
+/*$vite$:1*/

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

@@ -0,0 +1,27 @@
+import * as template_u1 from '@esportsplus/template';
+import { type Attributes, type Renderable } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    [NESTED_MENU_TRIGGER]?: Attributes;
+    animate?: boolean;
+    items: Item[];
+    onselect?: (item: Item) => void;
+    state?: {
+        active: boolean;
+    };
+};
+type Item = {
+    danger?: boolean;
+    disabled?: boolean;
+    hint?: string;
+    icon?: () => Renderable<unknown>;
+    items?: Item[];
+    label: string;
+    onselect?: (item: Item) => void;
+};
+declare const NESTED_MENU_TRIGGER: unique symbol;
+declare const _default: template_u1.Factory<A, Renderable<any>, Renderable<any>, {
+    readonly trigger: typeof NESTED_MENU_TRIGGER;
+}>;
+export default _default;
+export type { Item };