@esportsplus/ui 0.56.3 → 0.57.0

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

@@ -1,284 +0,0 @@
-@use '/tokens';
-@use 'variables';
-
-.morphing-nav {
-    font-size: var(--font-size);
-    position: relative;
-
-
-    &-action,
-    &-brand {
-        align-items: center;
-        display: flex;
-        flex-shrink: 0;
-    }
-
-    &-bar {
-        align-items: center;
-        background: var(--background);
-        border-radius: var(--bar-radius);
-        box-shadow: var(--box-shadow);
-        display: flex;
-        gap: 4px;
-        height: var(--bar-height);
-        padding: var(--bar-padding);
-    }
-
-    &-brand {
-        padding-inline: 10px;
-    }
-
-    // Invisible bridge over the gap, so the cursor never "leaves" on its way down from the bar.
-    &-bridge {
-        height: var(--gap);
-        inset-inline: 0;
-        position: absolute;
-        top: calc(var(--gap) * -1);
-    }
-
-    // Overlaps the panel by 1px to hide its ring under the caret.
-    &-caret {
-        fill: var(--background);
-        left: 0;
-        position: absolute;
-        stroke: var(--caret-stroke);
-        top: -8px;
-        transition: translate var(--morph-duration) var(--morph-timing-function);
-        translate: var(--caret-x, 0px) 0;
-        z-index: 1;
-    }
-
-    &-chevron {
-        flex-shrink: 0;
-        height: 12px;
-        transition: rotate 0.2s cubic-bezier(0.23, 1, 0.32, 1);
-        width: 12px;
-    }
-
-    &-description {
-        color: var(--muted);
-        display: block;
-        font-size: var(--description-font-size);
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    &-icon {
-        color: var(--muted);
-        display: flex;
-        flex-shrink: 0;
-        height: 18px;
-        // Nudged down to sit on the title's first line, not above it.
-        margin-top: 2px;
-        width: 18px;
-
-        svg {
-            height: 100%;
-            width: 100%;
-        }
-    }
-
-    &-link {
-        align-items: flex-start;
-        border-radius: var(--link-radius);
-        color: inherit;
-        display: flex;
-        gap: 12px;
-        outline: none;
-        padding: 12px 16px 12px 12px;
-        text-decoration: none;
-        transition: background-color 0.15s ease-out;
-
-        &:focus-visible {
-            outline: 2px solid var(--focus-color);
-            outline-offset: -2px;
-        }
-
-        &:hover {
-            background: var(--surface);
-        }
-    }
-
-    &-links {
-        display: grid;
-        gap: 2px;
-        list-style: none;
-        margin: 0;
-        padding: var(--panel-padding);
-
-        li {
-            min-width: 0;
-        }
-    }
-
-    &-list {
-        align-items: center;
-        display: flex;
-        flex: 1 1 auto;
-        gap: 2px;
-        list-style: none;
-        margin: 0;
-        min-width: 0;
-        padding: 0;
-    }
-
-    &-panel {
-        background: var(--background);
-        border-radius: var(--panel-radius);
-        box-shadow: var(--box-shadow);
-        height: 100%;
-        overflow: hidden;
-        position: relative;
-        width: 100%;
-    }
-
-    // Size, position and caret share one spring; the panel only fades and scales on open and close.
-    // Leaves faster and smaller than it came: the exit shouldn't hold the eye.
-    &-popover {
-        left: 0;
-        opacity: 0;
-        pointer-events: none;
-        position: absolute;
-        scale: 0.98;
-        top: calc(100% + var(--gap));
-        transition:
-            opacity var(--close-duration) cubic-bezier(0.23, 1, 0.32, 1),
-            scale var(--close-duration) cubic-bezier(0.23, 1, 0.32, 1),
-            visibility 0s linear var(--close-duration);
-        visibility: hidden;
-        z-index: 10;
-
-        @include tokens.state(active) {
-            opacity: 1;
-            pointer-events: auto;
-            scale: 1;
-            transition:
-                height var(--morph-duration) var(--morph-timing-function),
-                opacity var(--fade-duration) cubic-bezier(0.23, 1, 0.32, 1),
-                scale var(--fade-duration) cubic-bezier(0.23, 1, 0.32, 1),
-                translate var(--morph-duration) var(--morph-timing-function),
-                width var(--morph-duration) var(--morph-timing-function);
-            visibility: visible;
-        }
-
-        &.--opening {
-            opacity: 0;
-            scale: 0.97;
-
-            &,
-            .morphing-nav-caret {
-                transition: none;
-            }
-        }
-    }
-
-    // Pinned to its natural width, so text never reflows while the panel morphs around it.
-    &-section {
-        left: 0;
-        max-width: var(--nav-width, none);
-        position: absolute;
-        top: 0;
-        visibility: hidden;
-        width: max-content;
-
-        @include tokens.state(active) {
-            visibility: visible;
-        }
-
-        &--columns .morphing-nav-links {
-            grid-template-columns: repeat(2, minmax(0, 1fr));
-        }
-    }
-
-    &-text {
-        display: block;
-        min-width: 0;
-    }
-
-    &-title {
-        color: var(--color-active);
-        display: block;
-        font-weight: var(--font-weight-500);
-    }
-
-    &-trigger {
-        align-items: center;
-        background: transparent;
-        border: 0;
-        border-radius: var(--trigger-radius);
-        color: var(--color);
-        cursor: pointer;
-        display: flex;
-        font-size: inherit;
-        gap: 4px;
-        height: var(--trigger-height);
-        outline: none;
-        padding-inline: var(--trigger-padding);
-        touch-action: manipulation;
-        transition:
-            background-color 0.15s ease-out,
-            color 0.15s ease-out,
-            scale 0.15s ease-out;
-        user-select: none;
-        white-space: nowrap;
-
-        &:active {
-            scale: 0.96;
-        }
-
-        &:focus-visible {
-            outline: 2px solid var(--focus-color);
-        }
-
-        &:hover {
-            color: var(--color-active);
-        }
-
-        @include tokens.state(active) {
-            background: var(--surface);
-            color: var(--color-active);
-
-            .morphing-nav-chevron {
-                rotate: 180deg;
-            }
-        }
-    }
-
-
-    @media (max-width: 639px) {
-        --trigger-padding: 10px;
-
-        &-action,
-        &-brand,
-        &-chevron {
-            display: none;
-        }
-
-        &-section--columns .morphing-nav-links {
-            grid-template-columns: minmax(0, 1fr);
-        }
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-        --morph-duration: 0s;
-
-        &-chevron {
-            transition: none;
-        }
-
-        &-popover {
-            scale: 1;
-
-            &.--opening {
-                scale: 1;
-            }
-        }
-
-        &-trigger {
-            transition:
-                background-color 0.15s ease-out,
-                color 0.15s ease-out;
-        }
-    }
-}

package/src/components/morphing-nav/scss/variables.scss

@@ -1,36 +0,0 @@
-.morphing-nav {
-    --background: var(--color-white-300);
-    --bar-height: 52px;
-    --bar-padding: 6px;
-    // Concentric corners: trigger radius plus the bar padding.
-    --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 / 0.08);
-    --close-duration: 0.15s;
-    --color: var(--color-text-300);
-    --color-active: var(--color-text-500);
-    --description-font-size: var(--font-size-300);
-    --fade-duration: 0.2s;
-    --focus-color: var(--color-text-500);
-    --font-size: var(--font-size-400);
-    --gap: 12px;
-    --link-radius: var(--border-radius-400);
-    // One spring drives size, position and caret, so they arrive together; no bounce, since an overshooting
-    // panel would uncover empty space.
-    --morph-duration: 0.3s;
-    --morph-timing-function: linear(0, 0.0432 4.2%, 0.1402 8.3%, 0.2575 12.5%, 0.3764 16.7%, 0.4867 20.8%, 0.584 25%, 0.667 29.2%, 0.7361 33.3%, 0.7925 37.5%, 0.838 41.7%, 0.8743 45.8%, 0.9029 50%, 0.9254 54.2%, 0.9428 58.3%, 0.9564 62.5%, 0.9668 66.7%, 0.9748 70.8%, 0.9809 75%, 0.9856 79.2%, 0.9892 83.3%, 0.9918 87.5%, 0.9939 91.7%, 0.9954 95.8%, 1);
-    --muted: var(--color-text-300);
-    --panel-padding: 8px;
-    // Concentric corners: link radius plus the panel padding.
-    --panel-radius: calc(var(--link-radius) + var(--panel-padding));
-    --surface: var(--color-grey-400);
-    --trigger-height: 40px;
-    --trigger-padding: 12px;
-    --trigger-radius: 10px;
-
-
-    &--flat {
-        --box-shadow: 0 0 0 var(--border-width-400) var(--color-border-300);
-        --caret-stroke: var(--color-border-300);
-    }
-}

package/src/components/multi-step-form/index.ts

@@ -1,368 +0,0 @@
-import { html, type Attributes } from '@esportsplus/template';
-import { reactive } from '@esportsplus/reactivity';
-import { factory } from '~/components/checkbox';
-import form from '~/components/form';
-import input from '~/components/input';
-import radio from '~/components/radio';
-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 };
-
-
-const DEFAULT_PLANS: Plan[] = [
-    { 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)';
-
-// Far enough to read as direction, short enough to stay a nudge, not a pan.
-const SHIFT = 36;
-
-const STEPS = ['Name', 'Plan', 'Review'];
-
-
-function check() {
-    return html`<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' /></svg>`;
-}
-
-function template(
-    this: { attributes?: Partial<A> } | void,
-    { oncreate, plans = DEFAULT_PLANS, state, ...attributes }: A = {}
-) {
-    let body: HTMLElement | undefined,
-        defaults = this?.attributes,
-        elements: HTMLElement[] = [],
-        observer: ResizeObserver | undefined,
-        prefix = `multi-step-form-${Math.random().toString(36).slice(2, 8)}`,
-        s = state || reactive({ name: '', panel: 0, plan: '' });
-
-    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: boolean) {
-        return html`
-            <div class='multi-step-form-footer'>
-                <button
-                    class='button multi-step-form-back'
-                    type='button'
-                    ${{
-                        disabled: () => ghost || s.panel === 0 || s.panel === 3,
-                        onclick: () => {
-                            if (s.panel === 1 || s.panel === 2) {
-                                go(s.panel - 1, -1);
-                            }
-                        }
-                    }}
-                >
-                    Back
-                </button>
-                <button class='button multi-step-form-submit' type='submit' ${{ disabled: () => ghost || !valid() }}>
-                    <span class='multi-step-form-labels'>
-                        ${LABELS.map((label) => html`
-                            <span
-                                class='multi-step-form-label'
-                                ${{
-                                    'aria-hidden': () => String(label !== primary()),
-                                    class: () => label === primary() && '--active'
-                                }}
-                            >
-                                ${label}
-                            </span>
-                        `)}
-                    </span>
-                </button>
-            </div>
-        `;
-    }
-
-    function go(next: number, direction: 1 | -1) {
-        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 }
-        );
-
-        // Move focus into the new step so keyboard and screen reader users land where the change happened, once it is displayed.
-        requestAnimationFrame(() => {
-            (to.querySelector<HTMLElement>('input:checked, [data-autofocus]') ?? to.querySelector<HTMLElement>('input'))?.focus({ preventScroll: true });
-        });
-    }
-
-    function header() {
-        return html`
-            <div class='multi-step-form-header'>
-                <span class='multi-step-form-step'>${() => s.panel < 3 ? `Step ${s.panel + 1} of 3` : 'Complete'}</span>
-                <div class='multi-step-form-progress' aria-hidden='true'>
-                    ${STEPS.map((_, i) => html`
-                        <span class='multi-step-form-bar' ${{ class: () => i <= s.panel && '--active' }}></span>
-                    `)}
-                </div>
-            </div>
-        `;
-    }
-
-    function heading(title: string, note: string, focusable = false) {
-        return html`
-            <div class='multi-step-form-heading'>
-                <h3 class='multi-step-form-title' ${focusable ? { 'data-autofocus': '', tabindex: '-1' } : {}}>${title}</h3>
-                <p class='multi-step-form-note'>${note}</p>
-            </div>
-        `;
-    }
-
-    function name() {
-        return s.name.trim() || 'Untitled';
-    }
-
-    function panel(index: number, ghost: boolean) {
-        let content;
-
-        if (index === 0) {
-            content = html`
-                ${heading('Name your workspace', 'You can change this later.')}
-                ${input({
-                    'aria-label': 'Workspace name',
-                    autocomplete: 'organization',
-                    class: 'multi-step-form-input',
-                    'data-autofocus': '',
-                    name: 'name',
-                    oninput: (e: Event) => {
-                        s.name = (e.target as HTMLInputElement).value;
-                    },
-                    placeholder: 'Acme Inc',
-                    value: () => s.name,
-                    ...defaults?.[MULTI_STEP_FORM_INPUT],
-                    ...attributes[MULTI_STEP_FORM_INPUT]
-                })}
-            `;
-        }
-        else if (index === 1) {
-            content = html`
-                ${heading('Choose a plan', 'Switch any time from settings.')}
-                <div aria-label='Plan' class='multi-step-form-plans' role='radiogroup'>
-                    ${plans.map((plan) => html`
-                        <label class='multi-step-form-plan' ${{ class: () => s.plan === plan.id && '--active' }}>
-                            ${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
-                                }
-                            })}
-                            <span class='multi-step-form-plan-text'>
-                                <span class='multi-step-form-plan-name'>${plan.name}</span>
-                                <span class='multi-step-form-plan-note'>${plan.note}</span>
-                            </span>
-                            <span class='multi-step-form-plan-price'>${plan.price}</span>
-                        </label>
-                    `)}
-                </div>
-            `;
-        }
-        else if (index === 2) {
-            content = html`
-                ${heading('Review', 'Check the details, then create.', true)}
-                <dl class='multi-step-form-review'>
-                    ${[
-                        ['Name', name],
-                        ['Plan', () => selected()?.name ?? 'None'],
-                        ['Billed', () => selected()?.price ?? 'Free']
-                    ].map(([term, value]) => html`
-                        <div class='multi-step-form-review-row'>
-                            <dt>${term}</dt>
-                            <dd>${value}</dd>
-                        </div>
-                    `)}
-                </dl>
-            `;
-        }
-        else {
-            content = html`
-                ${check()}
-                <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'>${() => `${name()} is ready on ${selected()?.name ?? 'Hobby'}.`}</p>
-                </div>
-            `;
-        }
-
-        return html`
-            <div
-                class='multi-step-form-panel ${index === 3 && 'multi-step-form-panel--done'}'
-                ${ghost ? {} : {
-                    class: () => s.panel === index && '--active',
-                    onrender: (element: HTMLElement) => {
-                        elements[index] = element;
-                    }
-                }}
-            >
-                ${content}
-            </div>
-        `;
-    }
-
-    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;
-    }
-
-    // The card grows up from a fixed bottom so Back and Continue never move under the cursor; the invisible copy holding every step reserves the tallest height.
-    return html`
-        <div class='multi-step-form' ${defaults} ${attributes}>
-            <div class='multi-step-form-ghost' aria-hidden='true' inert>
-                ${header()}
-                <div class='multi-step-form-stack'>
-                    ${[0, 1, 2, 3].map((index) => panel(index, true))}
-                </div>
-                ${footer(true)}
-            </div>
-
-            ${form.action({
-                action: () => {
-                    advance();
-
-                    return { errors: [] };
-                },
-                'aria-label': 'Create a workspace',
-                class: 'multi-step-form-card',
-                novalidate: true,
-                onkeydown: (e: KeyboardEvent) => {
-                    // Enter submits the step from any field, radios included, which browsers disagree on; buttons keep their own Enter.
-                    if (e.key !== 'Enter' || e.isComposing || (e.target as HTMLElement).tagName === 'BUTTON') {
-                        return;
-                    }
-
-                    e.preventDefault();
-                    advance();
-                }
-            }, html`
-                ${header()}
-                <div
-                    class='multi-step-form-body'
-                    ${{
-                        onrender: (element: HTMLElement) => {
-                            body = element;
-                        }
-                    }}
-                >
-                    <div
-                        class='multi-step-form-inner'
-                        ${{
-                            onconnect: (element: HTMLElement) => {
-                                // Measured rather than scaled, so the height is right even when text wraps differently.
-                                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);
-                            },
-                            ondisconnect: () => {
-                                observer?.disconnect();
-                            }
-                        }}
-                    >
-                        ${[0, 1, 2, 3].map((index) => panel(index, false))}
-                    </div>
-                </div>
-                ${footer(false)}
-                <span aria-live='polite' class='multi-step-form-live'>
-                    ${() => s.panel === 3 ? 'Workspace created' : `Step ${s.panel + 1} of 3, ${STEPS[s.panel]}`}
-                </span>
-            `)}
-        </div>
-    `;
-}
-
-
-export default Object.assign(template, { input: MULTI_STEP_FORM_INPUT } as const);
-export type { Plan, State };