@esportsplus/ui 0.54.0 → 0.56.2

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

@@ -0,0 +1,284 @@
+@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

@@ -0,0 +1,36 @@
+.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

@@ -0,0 +1,368 @@
+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 };