@esportsplus/ui 0.54.0 → 0.56.2

package/src/components/email-typo-fix/scss/index.scss

@@ -0,0 +1,213 @@
+@use 'variables';
+
+.email-typo-fix {
+    color: var(--color);
+    display: flex;
+    flex-direction: column;
+
+
+    &-accept,
+    &-dismiss {
+        background: transparent;
+        border: 0;
+        border-radius: var(--border-radius-400);
+        color: var(--muted-color);
+        cursor: pointer;
+        outline: none;
+        transition:
+            background-color var(--transition-duration) var(--transition-timing-function),
+            color var(--transition-duration) var(--transition-timing-function),
+            scale var(--transition-duration) var(--transition-timing-function);
+
+        &:hover {
+            background: var(--button-hover-background);
+        }
+
+        &:active {
+            scale: 0.96;
+        }
+
+        &:focus-visible {
+            outline: var(--border-width-500) solid var(--outline-color);
+        }
+    }
+
+    &-accept {
+        align-items: center;
+        display: flex;
+        flex: 1;
+        font: inherit;
+        font-size: var(--suggestion-font-size);
+        height: 40px;
+        line-height: 1.43;
+        margin-inline-start: -8px;
+        min-width: 0;
+        padding-inline: 8px;
+        text-align: start;
+
+        // Wraps to a second line on a phone rather than cutting off the one part that matters.
+        &-text {
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            display: -webkit-box;
+            overflow: hidden;
+            overflow-wrap: anywhere;
+        }
+    }
+
+    &-address {
+        color: var(--address-color);
+
+        &-fix {
+            font-weight: var(--font-weight-600);
+            text-decoration: underline;
+            text-decoration-color: var(--fix-underline-color);
+            text-decoration-thickness: 2px;
+            text-underline-offset: 3px;
+        }
+    }
+
+    &-control {
+        font-size: var(--font-size);
+        margin-top: 8px;
+        position: relative;
+    }
+
+    &-dismiss {
+        align-items: center;
+        display: flex;
+        flex-shrink: 0;
+        height: 36px;
+        justify-content: center;
+        padding: 0;
+        width: 36px;
+
+        &:hover {
+            color: var(--address-color);
+        }
+
+        svg {
+            height: 14px;
+            width: 14px;
+        }
+    }
+
+    // Kerning and ligatures off, here and in the overlay, so letters set one span at a time land exactly where the field draws them.
+    &-control > #{&}-field {
+        --background-default: var(--field-background);
+        --border-radius: var(--field-border-radius);
+        --color-default: currentColor;
+        font-kerning: none;
+        font-size: inherit;
+        font-variant-ligatures: none;
+        height: var(--field-height);
+        min-height: 0;
+        outline: none;
+        padding-block: 0;
+
+        &:focus-visible {
+            outline: var(--border-width-500) solid var(--outline-color);
+        }
+
+        &::placeholder {
+            color: var(--muted-color);
+        }
+
+        .email-typo-fix.--morphing & {
+            caret-color: transparent;
+            color: transparent;
+        }
+    }
+
+    &-hint,
+    &-suggest {
+        align-items: center;
+        display: flex;
+        filter: blur(2px);
+        inset: 0;
+        margin: 0;
+        opacity: 0;
+        position: absolute;
+        transition:
+            filter var(--panel-leave-duration) var(--transition-timing-function),
+            opacity var(--panel-leave-duration) var(--transition-timing-function);
+        visibility: hidden;
+
+        &.--active {
+            filter: none;
+            opacity: 1;
+            visibility: visible;
+        }
+    }
+
+    &-hint {
+        color: var(--muted-color);
+        font-size: var(--hint-font-size);
+
+        &-text {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+
+    &-label {
+        font-size: var(--label-font-size);
+        font-weight: var(--label-font-weight);
+    }
+
+    &-morph {
+        align-items: center;
+        color: var(--color);
+        display: flex;
+        font-kerning: none;
+        font-variant-ligatures: none;
+        inset: 0;
+        pointer-events: none;
+        position: absolute;
+        white-space: pre;
+
+        &-glyph {
+            display: inline-block;
+            position: relative;
+
+            &--leaving {
+                position: absolute;
+            }
+        }
+
+        &-underline {
+            background: var(--fix-underline-color);
+            border-radius: 999px;
+            bottom: -3px;
+            height: 2px;
+            inset-inline: 0;
+            opacity: 0;
+            position: absolute;
+        }
+    }
+
+    // One fixed-height slot for the hint, the suggestion and the sent note, so nothing below ever moves.
+    &-note {
+        gap: 4px;
+        height: var(--note-height);
+        margin-top: 8px;
+        position: relative;
+    }
+
+    &-suggest {
+        gap: 4px;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .email-typo-fix-accept:active,
+    .email-typo-fix-dismiss:active {
+        scale: 1;
+    }
+
+    .email-typo-fix-hint,
+    .email-typo-fix-suggest {
+        filter: none;
+    }
+}

package/src/components/email-typo-fix/scss/variables.scss

@@ -0,0 +1,18 @@
+.email-typo-fix {
+    --address-color: var(--color-text-500);
+    --button-hover-background: var(--color-grey-400);
+    --color: var(--color-text-500);
+    --field-background: var(--color-grey-400);
+    --field-border-radius: var(--border-radius-500);
+    --field-height: 44px;
+    --fix-underline-color: oklch(from var(--color-text-500) l c h / 0.4);
+    --font-size: var(--font-size-400);
+    --hint-font-size: var(--font-size-300);
+    --label-font-size: var(--font-size-300);
+    --label-font-weight: var(--font-weight-500);
+    --muted-color: var(--color-text-300);
+    --note-height: 40px;
+    --outline-color: var(--color-text-500);
+    --panel-leave-duration: 120ms;
+    --suggestion-font-size: var(--font-size-300);
+}

package/src/components/expanding-card/index.ts

@@ -0,0 +1,377 @@
+import { html, type Attributes } from '@esportsplus/template';
+import { effect, reactive } from '@esportsplus/reactivity';
+import modal from '~/components/modal';
+import './scss/index.scss';
+
+
+const EXPANDING_CARD_CARD = Symbol.for('@esportsplus/ui/expanding-card.card');
+
+
+type A = Attributes & {
+    [EXPANDING_CARD_CARD]?: Attributes;
+    items: Item[];
+    state?: State;
+};
+
+type Item = {
+    detail: string;
+    id: string;
+    meta: string;
+    summary: string;
+    title: string;
+};
+
+type State = {
+    open: string | null;
+};
+
+
+const EASE_OUT = 'cubic-bezier(0.23, 1, 0.32, 1)';
+
+// Critically damped spring: a card overshooting its own slot reads as a glitch, not play.
+const MORPH: KeyframeAnimationOptions = {
+    duration: 350,
+    easing: 'linear(0, 0.0575, 0.1803, 0.3208, 0.4551, 0.5729, 0.6711, 0.7501, 0.8122, 0.8601, 0.8966, 0.924, 0.9445, 0.9596, 0.9708, 0.9789, 0.9848, 0.9891, 0.9922, 0.9944, 0.996, 0.9972, 0.998, 0.9986, 1)'
+};
+
+const REDUCED = '(prefers-reduced-motion: reduce)';
+
+
+let uid = 0;
+
+
+function box(element: HTMLElement, rect: DOMRect) {
+    let style = element.style;
+
+    style.height = `${rect.height}px`;
+    style.left = `${rect.left}px`;
+    style.margin = '0';
+    style.top = `${rect.top}px`;
+    style.width = `${rect.width}px`;
+}
+
+// Text flies to its new spot by position only; scaling it with its box would squash the glyphs.
+function fly(element: Element | null, from: DOMRect | undefined, fromBox: DOMRect, toBox: DOMRect) {
+    if (!element || !from) {
+        return;
+    }
+
+    let to = element.getBoundingClientRect(),
+        x = (from.left - fromBox.left) - (to.left - toBox.left),
+        y = (from.top - fromBox.top) - (to.top - toBox.top);
+
+    element.animate([{ translate: `${x}px ${y}px` }, { translate: '0 0' }], MORPH);
+}
+
+function rect(root: ParentNode, selector: string) {
+    return root.querySelector(selector)?.getBoundingClientRect();
+}
+
+function unbox(element: HTMLElement) {
+    let style = element.style;
+
+    style.height = '';
+    style.left = '';
+    style.margin = '';
+    style.top = '';
+    style.width = '';
+}
+
+
+function template(this: { attributes?: Partial<A> } | void, { items, state = reactive({ open: null as string | null }), ...attributes }: A) {
+    let bound = this?.attributes,
+        bridge = {
+            get active() {
+                return visible.active;
+            },
+            set active(value: boolean) {
+                if (!value) {
+                    close();
+                }
+            }
+        },
+        closing = false,
+        current: string | null = null,
+        dialog: HTMLDialogElement | null = null,
+        id = `expanding-card-${++uid}`,
+        list: HTMLElement | null = null,
+        stop: VoidFunction | undefined,
+        view = reactive({ shown: null as string | null }),
+        visible = reactive({ active: false });
+
+    function card(key: string) {
+        return list?.querySelector<HTMLElement>(`[data-id="${CSS.escape(key)}"]`) ?? null;
+    }
+
+    // The modal owns Escape, backdrop clicks and its own close; its writes arrive through 'bridge', so the
+    // card flies home before the dialog actually closes.
+    function close() {
+        let origin = current === null ? null : card(current),
+            panel = current === null ? null : section(current);
+
+        if (!dialog || !origin || !panel || closing) {
+            return;
+        }
+
+        let element = dialog;
+
+        closing = true;
+        element.style.setProperty('--transition-duration', '0.15s');
+
+        if (matchMedia(REDUCED).matches) {
+            element.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 100, easing: EASE_OUT, fill: 'forwards' });
+            visible.active = false;
+            return;
+        }
+
+        let first = element.getBoundingClientRect(),
+            meta = rect(panel, '.expanding-card-dialog-face .expanding-card-meta'),
+            radius = getComputedStyle(element).borderRadius,
+            target = origin.getBoundingClientRect(),
+            title = rect(panel, '.expanding-card-dialog-face .expanding-card-title');
+
+        // Closing mid-open starts from wherever the morph had reached.
+        for (let animation of element.getAnimations({ subtree: true })) {
+            animation.cancel();
+        }
+
+        // On the way out the dialog swaps to the card's own face at the card's size, then morphs home.
+        element.classList.add('--returning', '--morphing');
+        box(element, target);
+        (panel.querySelector('.expanding-card-dialog-card') as HTMLElement).style.width = `${target.width}px`;
+
+        let last = element.getBoundingClientRect();
+
+        // Before the box starts moving, since text targets are measured against its resting place.
+        fly(panel.querySelector('.expanding-card-dialog-card .expanding-card-title'), title, first, last);
+        fly(panel.querySelector('.expanding-card-dialog-card .expanding-card-meta'), meta, first, last);
+
+        element.animate([
+            { borderRadius: radius, height: `${first.height}px`, translate: `${first.left - last.left}px ${first.top - last.top}px`, width: `${first.width}px` },
+            { borderRadius: getComputedStyle(origin).borderRadius, height: `${last.height}px`, translate: '0 0', width: `${last.width}px` }
+        ], { ...MORPH, fill: 'forwards' });
+
+        // Not shared with the dialog, so it comes into focus once the card has nearly landed.
+        panel.querySelector('.expanding-card-dialog-card .expanding-card-summary')?.animate(
+            [{ filter: 'blur(4px)', opacity: 0 }, { filter: 'blur(0)', opacity: 1 }],
+            { delay: 200, duration: 200, easing: EASE_OUT, fill: 'backwards' }
+        );
+
+        visible.active = false;
+    }
+
+    function face(item: Item) {
+        return html`
+            <span class='expanding-card-face'>
+                <span class='expanding-card-row'>
+                    <span class='expanding-card-title'>${item.title}</span>
+                    <span class='expanding-card-meta'>${item.meta}</span>
+                </span>
+                <span class='expanding-card-summary'>${item.summary}</span>
+            </span>
+        `;
+    }
+
+    function open(key: string) {
+        let origin = card(key),
+            panel = section(key);
+
+        if (!dialog || !origin || !panel || current !== null) {
+            return;
+        }
+
+        let element = dialog,
+            first = origin.getBoundingClientRect(),
+            meta = rect(origin, '.expanding-card-meta'),
+            radius = getComputedStyle(origin).borderRadius,
+            title = rect(origin, '.expanding-card-title');
+
+        current = key;
+        state.open = key;
+        view.shown = key;
+        visible.active = true;
+
+        for (let other of element.querySelectorAll<HTMLElement>('.expanding-card-panel')) {
+            other.hidden = other !== panel;
+        }
+
+        element.setAttribute('aria-labelledby', panel.querySelector('h2')!.id);
+        element.style.removeProperty('--transition-duration');
+
+        // Opened here rather than by the modal's own deferred effect, so the dialog can be measured now.
+        if (!element.open) {
+            element.showModal();
+        }
+
+        panel.querySelector<HTMLElement>('.expanding-card-close')?.focus({ preventScroll: true });
+
+        if (matchMedia(REDUCED).matches) {
+            element.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 150, easing: EASE_OUT });
+            return;
+        }
+
+        let last = element.getBoundingClientRect();
+
+        element.classList.add('--morphing');
+        box(element, last);
+        (panel.querySelector('.expanding-card-dialog-face') as HTMLElement).style.width = `${last.width}px`;
+
+        fly(panel.querySelector('.expanding-card-dialog-face .expanding-card-title'), title, first, last);
+        fly(panel.querySelector('.expanding-card-dialog-face .expanding-card-meta'), meta, first, last);
+
+        let animation = element.animate([
+            { borderRadius: radius, height: `${first.height}px`, translate: `${first.left - last.left}px ${first.top - last.top}px`, width: `${first.width}px` },
+            { borderRadius: getComputedStyle(element).borderRadius, height: `${last.height}px`, translate: '0 0', width: `${last.width}px` }
+        ], MORPH);
+
+        animation.onfinish = () => {
+            if (closing) {
+                return;
+            }
+
+            element.classList.remove('--morphing');
+            unbox(element);
+            (panel.querySelector('.expanding-card-dialog-face') as HTMLElement).style.width = '';
+        };
+
+        // Held until the morph has visibly settled, so nothing shows while its box is still growing; the
+        // blur makes it read as arriving rather than blinking on.
+        for (let delayed of panel.querySelectorAll('.expanding-card-delayed')) {
+            delayed.animate(
+                [{ filter: 'blur(4px)', opacity: 0, translate: '0 4px' }, { filter: 'blur(0)', opacity: 1, translate: '0 0' }],
+                { delay: 250, duration: 250, easing: EASE_OUT, fill: 'backwards' }
+            );
+        }
+    }
+
+    function section(key: string) {
+        return dialog?.querySelector<HTMLElement>(`[data-panel="${CSS.escape(key)}"]`) ?? null;
+    }
+
+    function settle() {
+        let element = dialog,
+            key = current;
+
+        if (!element) {
+            return;
+        }
+
+        for (let animation of element.getAnimations({ subtree: true })) {
+            animation.cancel();
+        }
+
+        element.classList.remove('--morphing', '--returning');
+        unbox(element);
+
+        for (let part of element.querySelectorAll<HTMLElement>('.expanding-card-dialog-card, .expanding-card-dialog-face')) {
+            part.style.width = '';
+        }
+
+        closing = false;
+        current = null;
+        visible.active = false;
+        view.shown = null;
+        state.open = null;
+
+        if (key !== null) {
+            card(key)?.focus({ preventScroll: true });
+        }
+    }
+
+    return html`
+        <div
+            class='expanding-card'
+            ${bound}
+            ${attributes}
+            ${{
+                onconnect: (element: HTMLElement) => {
+                    dialog = element.querySelector<HTMLDialogElement>('dialog');
+                    list = element.querySelector<HTMLElement>('.expanding-card-list');
+                    dialog?.addEventListener('close', settle);
+
+                    // Callers may open or close a card by writing 'state.open'; clicks write it too, but
+                    // by then 'current' already matches.
+                    stop = effect(() => {
+                        let key = state.open;
+
+                        if (key === current) {
+                            return;
+                        }
+
+                        queueMicrotask(() => {
+                            if (key === null) {
+                                close();
+                            }
+                            else {
+                                open(key);
+                            }
+                        });
+                    });
+                },
+                ondisconnect: () => {
+                    dialog?.removeEventListener('close', settle);
+                    stop?.();
+                }
+            }}
+        >
+            <ul class='expanding-card-list'>
+                ${items.map((item) => html`
+                    <li>
+                        <button
+                            aria-haspopup='dialog'
+                            class='expanding-card-card ${() => view.shown === item.id && '--open'}'
+                            data-id='${item.id}'
+                            type='button'
+                            ${bound?.[EXPANDING_CARD_CARD]}
+                            ${attributes[EXPANDING_CARD_CARD]}
+                            ${{
+                                onclick: () => open(item.id)
+                            }}
+                        >
+                            ${face(item)}
+                        </button>
+                    </li>
+                `)}
+            </ul>
+
+            ${modal(
+                {
+                    class: 'expanding-card-dialog',
+                    state: bridge
+                },
+                html`
+                    ${items.map((item, i) => html`
+                        <div class='expanding-card-panel' data-panel='${item.id}' hidden>
+                            <div class='expanding-card-dialog-face'>
+                                <div class='expanding-card-header'>
+                                    <div class='expanding-card-heading'>
+                                        <h2 class='expanding-card-title' id='${`${id}-${i}`}'>${item.title}</h2>
+                                        <p class='expanding-card-meta'>${item.meta}</p>
+                                    </div>
+                                    <div class='expanding-card-delayed'>
+                                        <button aria-label='Close' class='expanding-card-close' type='button' onclick='${close}'>
+                                            <svg aria-hidden='true' fill='none' stroke='currentColor' stroke-linecap='round' stroke-width='1.5' viewBox='0 0 16 16'>
+                                                <path d='m4.5 4.5 7 7M11.5 4.5l-7 7' />
+                                            </svg>
+                                        </button>
+                                    </div>
+                                </div>
+                                <div class='expanding-card-body expanding-card-delayed'>
+                                    <p class='expanding-card-summary-full'>${item.summary}</p>
+                                    <p class='expanding-card-detail'>${item.detail}</p>
+                                </div>
+                            </div>
+                            <div aria-hidden='true' class='expanding-card-dialog-card'>
+                                ${face(item)}
+                            </div>
+                        </div>
+                    `)}
+                `
+            )}
+        </div>
+    `;
+}
+
+
+export default Object.assign(template, { card: EXPANDING_CARD_CARD } as const);
+export type { Item as ExpandingCardItem, State as ExpandingCardState };