@esportsplus/ui 0.55.0 → 0.56.2

package/src/components/marquee/index.ts

@@ -0,0 +1,300 @@
+import { html, type Attributes, type Renderable } from '@esportsplus/template';
+import { reactive } from '@esportsplus/reactivity';
+import './scss/index.scss';
+
+
+type Item = {
+    href?: string;
+    id?: string;
+    label: string;
+    // Called once per copy since a node can only be mounted in one place.
+    mark?: () => Renderable<unknown>;
+};
+
+
+// Seconds to ramp speed up/down when pausing and resuming.
+const RAMP = 0.19;
+
+// Seconds to settle a focus nudge that brings an item into view.
+const SETTLE = 0.16;
+
+const MAX_COPIES = 14;
+
+const MIN_COPIES = 4;
+
+
+function clamp(x: number, min: number, max: number) {
+    return x < min ? min : x > max ? max : x;
+}
+
+// Wraps the offset into (-loop, 0] so the track never runs out of copies.
+function fold(x: number, loop: number) {
+    let m = x % loop;
+
+    return m > 0 ? m - loop : m;
+}
+
+
+export default ({ direction = 'left', gap = 40, items, label = 'Logos', select, speed = 44, state = reactive({ paused: false }), ...attributes }: Attributes & {
+    direction?: 'left' | 'right';
+    gap?: number;
+    items: Item[];
+    label?: string;
+    select?: (item: Item) => void;
+    speed?: number;
+    state?: { paused: boolean };
+}) => {
+    let cleanup: VoidFunction[] = [],
+        copies = reactive(Array.from({ length: MIN_COPIES }, (_, i) => i)),
+        frame = 0,
+        held = false,
+        near = false,
+        nudge = 0,
+        offset = 0,
+        rate = 0,
+        reduced = false,
+        sign = direction === 'right' ? 1 : -1,
+        span = 0;
+
+    function face(item: Item) {
+        if (!item.mark) {
+            return item.label;
+        }
+
+        return html`
+            <span aria-hidden='true' class='marquee-mark'>${item.mark()}</span>
+            <span class='marquee-label'>${item.label}</span>
+        `;
+    }
+
+    function link(item: Item) {
+        if (item.href) {
+            return html`<a class='marquee-item marquee-item--link' href='${item.href}'>${face(item)}</a>`;
+        }
+
+        if (select) {
+            return html`<button class='marquee-item marquee-item--link' onclick='${() => select(item)}' type='button'>${face(item)}</button>`;
+        }
+
+        return html`<span class='marquee-item'>${face(item)}</span>`;
+    }
+
+    function listen<T extends EventTarget>(target: T, type: string, listener: (e: any) => void, options?: boolean | AddEventListenerOptions) {
+        target.addEventListener(type, listener, options);
+        cleanup.push(() => target.removeEventListener(type, listener, options));
+    }
+
+    return html`
+        <section
+            aria-label='${label}'
+            class='marquee'
+            style='--item-gap: ${gap}px'
+            ${attributes}
+            ${{
+                onconnect: (element: HTMLElement) => {
+                    let group = element.querySelector('.marquee-group:not(.marquee-group--copy)') as HTMLElement,
+                        media = matchMedia('(prefers-reduced-motion: reduce)'),
+                        track = element.querySelector('.marquee-track') as HTMLElement,
+                        viewport = element.querySelector('.marquee-viewport') as HTMLElement;
+
+                    function measure() {
+                        // Read back the rendered gap so a CSS override of --item-gap still loops seamlessly.
+                        let width = group.getBoundingClientRect().width,
+                            loop = width > 0 ? width + parseFloat(getComputedStyle(track).columnGap) : 0,
+                            room = viewport.getBoundingClientRect().width;
+
+                        span = loop;
+                        offset = loop > 0 ? clamp(offset, -loop, loop) : 0;
+                        paint();
+
+                        let next = reduced || loop <= 0
+                            ? MIN_COPIES
+                            : clamp(Math.ceil(room / loop) + 3, MIN_COPIES, MAX_COPIES);
+
+                        while (copies.length < next) {
+                            copies.push(copies.length);
+                        }
+
+                        if (copies.length > next) {
+                            copies.splice(next);
+                        }
+                    }
+
+                    function motion() {
+                        reduced = media.matches;
+
+                        if (reduced) {
+                            viewport.setAttribute('tabindex', '0');
+                        }
+                        else {
+                            viewport.removeAttribute('tabindex');
+                        }
+
+                        measure();
+                        run();
+                    }
+
+                    function paint() {
+                        track.style.transform = `translate3d(${(reduced ? 0 : offset - span).toFixed(2)}px, 0, 0)`;
+                    }
+
+                    // Nudges a focused item fully into view, keeping the track within one loop of rest.
+                    function reveal(node: HTMLElement) {
+                        let loop = span;
+
+                        if (reduced || loop <= 0 || node === viewport) {
+                            return;
+                        }
+
+                        let box = node.getBoundingClientRect(),
+                            delta = 0,
+                            pad = 12,
+                            view = viewport.getBoundingClientRect();
+
+                        if (box.left < view.left + pad) {
+                            delta = view.left + pad - box.left;
+                        }
+                        else if (box.right > view.right - pad) {
+                            delta = view.right - pad - box.right;
+                        }
+
+                        if (delta !== 0) {
+                            nudge = clamp(offset + nudge + delta, -loop, loop) - offset;
+                        }
+                    }
+
+                    function run() {
+                        cancelAnimationFrame(frame);
+                        frame = 0;
+
+                        if (reduced || !near) {
+                            return;
+                        }
+
+                        let last = 0;
+
+                        function tick(now: number) {
+                            frame = requestAnimationFrame(tick);
+
+                            let dt = last ? Math.min((now - last) / 1000, 0.05) : 0,
+                                loop = span;
+
+                            last = now;
+
+                            if (loop <= 0) {
+                                return;
+                            }
+
+                            rate += ((held || state.paused ? 0 : 1) - rate) * (1 - Math.exp(-dt / RAMP));
+
+                            let pull = nudge * (1 - Math.exp(-dt / SETTLE));
+
+                            nudge -= pull;
+
+                            let x = offset + sign * speed * rate * dt + pull;
+
+                            // Only wrap once a nudge has settled, otherwise the item being revealed would jump.
+                            if (rate > 0.002 && Math.abs(nudge) < 0.25) {
+                                nudge = 0;
+                                x = fold(x, loop);
+                            }
+                            else {
+                                x = clamp(x, -loop, loop);
+                            }
+
+                            offset = x;
+                            paint();
+                        }
+
+                        frame = requestAnimationFrame(tick);
+                    }
+
+                    let resize = new ResizeObserver(measure);
+
+                    resize.observe(viewport);
+                    resize.observe(group);
+                    cleanup.push(() => resize.disconnect());
+
+                    if (typeof IntersectionObserver === 'undefined') {
+                        near = true;
+                    }
+                    else {
+                        let intersection = new IntersectionObserver((entries) => {
+                            let entry = entries[entries.length - 1];
+
+                            if (entry && entry.isIntersecting !== near) {
+                                near = entry.isIntersecting;
+                                run();
+                            }
+                        }, { rootMargin: '96px' });
+
+                        intersection.observe(viewport);
+                        cleanup.push(() => intersection.disconnect());
+                    }
+
+                    listen(element, 'blur', () => held = false, true);
+                    listen(element, 'focus', (e: FocusEvent) => {
+                        held = true;
+                        reveal(e.target as HTMLElement);
+                    }, true);
+                    listen(element, 'pointercancel', () => held = false);
+                    listen(element, 'pointerdown', () => held = true);
+                    listen(element, 'pointerenter', (e: PointerEvent) => {
+                        if (e.pointerType !== 'touch') {
+                            held = true;
+                        }
+                    });
+                    listen(element, 'pointerleave', () => held = false);
+                    listen(element, 'pointerup', (e: PointerEvent) => {
+                        if (e.pointerType === 'touch') {
+                            held = false;
+                        }
+                    });
+                    listen(media, 'change', motion);
+                    // Focus can scroll the clipped viewport natively; pin it so only the transform moves.
+                    listen(viewport, 'scroll', () => {
+                        if (reduced) {
+                            return;
+                        }
+
+                        viewport.scrollLeft = 0;
+                        viewport.scrollTop = 0;
+                    }, { passive: true });
+                    listen(window, 'blur', () => held = false);
+
+                    motion();
+                },
+                ondisconnect: () => {
+                    cancelAnimationFrame(frame);
+
+                    for (let i = 0, n = cleanup.length; i < n; i++) {
+                        cleanup[i]();
+                    }
+
+                    cleanup.length = 0;
+                }
+            }}
+        >
+            <div class='marquee-viewport'>
+                <div class='marquee-track'>
+                    ${html.reactive(copies, (copy) => {
+                        // Copy 1 is the live group; copies are only ever trimmed from the end so it survives resizes.
+                        if (copy === 1) {
+                            return html`
+                                <ul class='marquee-group'>
+                                    ${items.map((item) => html`<li>${link(item)}</li>`)}
+                                </ul>
+                            `;
+                        }
+
+                        return html`
+                            <ul aria-hidden='true' class='marquee-group marquee-group--copy'>
+                                ${items.map((item) => html`<li><span class='marquee-item'>${item.mark ? item.mark() : item.label}</span></li>`)}
+                            </ul>
+                        `;
+                    })}
+                </div>
+            </div>
+        </section>
+    `;
+};

package/src/components/marquee/scss/index.scss

@@ -0,0 +1,109 @@
+@use 'variables';
+
+.marquee {
+    color: var(--color);
+    font-size: var(--font-size);
+    font-weight: var(--font-weight);
+    isolation: isolate;
+    max-width: 100%;
+    min-width: 0;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+
+    &-group {
+        align-items: center;
+        display: flex;
+        gap: var(--item-gap);
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        width: max-content;
+
+        li {
+            flex-shrink: 0;
+        }
+    }
+
+    &-item {
+        align-items: center;
+        border-radius: var(--item-border-radius);
+        color: inherit;
+        display: inline-flex;
+        flex-shrink: 0;
+        gap: var(--size-200);
+        height: var(--item-height);
+        letter-spacing: -0.01em;
+        padding: 0 var(--item-padding-horizontal);
+        text-decoration: none;
+        white-space: nowrap;
+
+        &--link {
+            background: none;
+            border: 0;
+            cursor: pointer;
+            font: inherit;
+            outline: none;
+            transition: background-color var(--transition-duration), box-shadow var(--transition-duration), color var(--transition-duration);
+
+            &:focus-visible {
+                background: color-mix(in srgb, var(--focus-color) 8%, transparent);
+                box-shadow: inset 0 0 0 1px var(--focus-color);
+            }
+
+            &:focus-visible,
+            &:hover {
+                color: var(--color-hover);
+            }
+        }
+    }
+
+    &-label {
+        clip-path: inset(50%);
+        height: 1px;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+    }
+
+    // Lets the mark's children join the item's flex layout, matching the unwrapped aria-hidden copies.
+    &-mark {
+        display: contents;
+    }
+
+    &-track {
+        align-items: center;
+        display: flex;
+        gap: var(--item-gap);
+        // Root transitions transform on every element; that would lag each frame and animate the loop wrap.
+        transition: none;
+        width: max-content;
+        will-change: transform;
+    }
+
+    &-viewport {
+        mask: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
+        outline: none;
+        overflow: hidden;
+        padding: var(--padding-vertical) 0;
+
+        &:focus-visible {
+            box-shadow: inset 0 0 0 1px var(--focus-color);
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &-group--copy {
+            display: none;
+        }
+
+        &-track {
+            will-change: auto;
+        }
+
+        &-viewport {
+            overflow-x: auto;
+        }
+    }
+}

package/src/components/marquee/scss/variables.scss

@@ -0,0 +1,18 @@
+.marquee {
+    --color: var(--color-text-300);
+    --color-hover: var(--color-text-400);
+    --fade: var(--size-700);
+    --focus-color: var(--color-blue-400);
+    --font-size: var(--font-size-300);
+    --font-weight: var(--font-weight-500);
+    --item-border-radius: var(--border-radius-300);
+    --item-gap: 40px;
+    --item-height: 40px;
+    --item-padding-horizontal: var(--size-300);
+    --transition-duration: 0.15s;
+
+    // Children re-declare --padding-* via root's `*` rule, so it has to be set here rather than inherited.
+    &-viewport {
+        --padding-vertical: var(--size-200);
+    }
+}

package/src/components/modal/index.ts

@@ -0,0 +1,91 @@
+import { effect, reactive } from '@esportsplus/reactivity';
+import { component, html, type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+
+
+type A = Attributes<HTMLDialogElement> & {
+    oncancel?: never;
+    onclick?: never;
+    onclose?: never;
+    onconnect?: never;
+    ondisconnect?: never;
+    state?: { active: boolean };
+};
+
+
+async function finished(element: HTMLElement) {
+    let animations = element.getAnimations();
+
+    for (let i = 0, n = animations.length; i < n; i++) {
+        // Reopening mid-close cancels the transition, which rejects 'finished'.
+        await animations[i].finished.catch(() => {});
+    }
+}
+
+function outside(element: HTMLElement, e: MouseEvent) {
+    let rect = element.getBoundingClientRect();
+
+    return e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom;
+}
+
+
+export default component<A>(
+    function(this, { state = reactive({ active: false }), ...attributes }, content) {
+        let stop: VoidFunction | undefined;
+
+        return html`
+            <dialog
+                class='modal'
+                ${this?.attributes}
+                ${attributes}
+                ${{
+                    oncancel: (e) => {
+                        e.preventDefault();
+                        state.active = false;
+                    },
+                    onclick: (e) => {
+                        let element = e.currentTarget as HTMLDialogElement;
+
+                        if (e.target === element && outside(element, e)) {
+                            state.active = false;
+                        }
+                    },
+                    onclose: () => {
+                        state.active = false;
+                    },
+                    onconnect: (element: HTMLDialogElement) => {
+                        stop = effect(() => {
+                            if (state.active) {
+                                if (!element.open) {
+                                    element.showModal();
+                                    // Commit the closed styles first so adding '--active' transitions in.
+                                    element.getBoundingClientRect();
+                                }
+
+                                element.classList.add('--active');
+                                return;
+                            }
+
+                            element.classList.remove('--active');
+
+                            if (!element.open) {
+                                return;
+                            }
+
+                            void finished(element).then(() => {
+                                if (!state.active) {
+                                    element.close();
+                                }
+                            });
+                        });
+                    },
+                    ondisconnect: () => {
+                        stop?.();
+                    }
+                }}
+            >
+                ${content}
+            </dialog>
+        `;
+    }
+);

package/src/components/modal/scss/index.scss

@@ -2,25 +2,65 @@
 @use '/tokens';
 @use 'variables';
 
+// Zero specificity so paired classes (e.g. '.card') still win over the dialog UA reset.
+:where(dialog.modal) {
+    background: transparent;
+    border: 0;
+    color: inherit;
+    max-height: 100%;
+    max-width: 100%;
+    padding: 0;
+}
+
+// Outranks pairings like '.card { position: relative }' that would unpin the dialog from the viewport.
+dialog.modal {
+    position: fixed;
+}
+
 .modal {
     margin: auto;
     transition:
         opacity var(--transition-duration) var(--transition-timing-function),
-        transform var(--transition-duration) var(--transition-timing-function);
+        scale var(--transition-duration) var(--transition-timing-function),
+        translate var(--transition-duration) var(--transition-timing-function);
     transform-origin: center;
     width: min(var(--max-width), calc(100% - (var(--margin-horizontal) * 2)));
-    z-index: 9;
 
     @include tokens.state(inactive) {
         opacity: 0;
         pointer-events: none;
-        transform: translateY(var(--translateY));
+        scale: var(--scale);
+        translate: 0 var(--translateY);
+
+        &::backdrop {
+            opacity: 0;
+        }
 
         input[type='password'] {
             display: none;
         }
     }
 
+    &::backdrop {
+        background: var(--backdrop);
+        transition: opacity var(--transition-duration) var(--transition-timing-function);
+    }
+
+
+    &--alert::backdrop,
+    &--blur::backdrop {
+        backdrop-filter: blur(var(--blur));
+    }
+
+    &--sheet {
+        margin-block-end: 0;
+        transform-origin: bottom;
+
+        @include tokens.state(inactive) {
+            opacity: 1;
+        }
+    }
+
     &-frame {
         transition:
             opacity var(--transition-duration) var(--transition-timing-function),
@@ -31,4 +71,11 @@
             display: none;
         }
     }
-}
+
+    @media (prefers-reduced-motion: reduce) {
+        &,
+        &::backdrop {
+            transition: none;
+        }
+    }
+}

package/src/components/modal/scss/variables.scss

@@ -1,6 +1,42 @@
 .modal {
+    --backdrop: color-mix(in srgb, var(--color-black-500) 64%, transparent);
     --margin-horizontal: 0px;
     --margin-vertical: 0px;
     --max-width: 480px;
+    --scale: 1;
     --translateY: var(--margin-vertical);
+
+    &--alert {
+        --backdrop: rgb(0 0 0 / 10%);
+        --blur: 4px;
+        --scale: 0.95;
+        --transition-duration: 100ms;
+        --transition-timing-function: ease;
+        --translateY: 0px;
+    }
+
+    &--blur {
+        --backdrop: color-mix(in srgb, var(--color-black-500) 32%, transparent);
+        --blur: 8px;
+    }
+
+    &--fade {
+        --translateY: 0px;
+    }
+
+    &--scale {
+        --scale: 0.92;
+        --translateY: 0px;
+    }
+
+    &--sheet {
+        --translateY: 100%;
+    }
+
+    &--spring {
+        --scale: 0.8;
+        // --transition-duration: 0.48s;
+        --transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
+        --translateY: 0px;
+    }
 }