@esportsplus/ui 0.55.0 → 0.56.2

package/src/components/sticky-header/index.ts

@@ -0,0 +1,127 @@
+import { reactive } from '@esportsplus/reactivity';
+import { component, html, type Attributes, type Renderable } from '@esportsplus/template';
+import './scss/index.scss';
+
+
+const DAMPING = 44;
+const MASS = 0.6;
+const REST = 0.0005;
+const STEP = 1 / 120;
+const STIFFNESS = 240;
+
+
+export default component<Attributes & {
+    actions?: Renderable<unknown>;
+    leading?: Renderable<unknown>;
+    subtitle?: string;
+    title: string;
+}>(
+    function({ actions, leading, subtitle, title, ...attributes }, content) {
+        let frame = 0,
+            last = 0,
+            position = 0,
+            range = 0,
+            root: HTMLElement | undefined,
+            state = reactive({ condensed: false }),
+            target = 0,
+            velocity = 0;
+
+        function measure(bar: HTMLElement) {
+            let travel = Math.max(1, bar.offsetHeight - parseFloat(getComputedStyle(bar).minHeight));
+
+            // Condense over at least 64px so short headers don't snap shut on the first wheel tick.
+            range = Math.max(64, travel * 3);
+        }
+
+        function render(progress: number) {
+            root?.style.setProperty('--progress', `${progress}`);
+        }
+
+        function tick(now: number) {
+            let elapsed = Math.min((now - last) / 1000, 1 / 30);
+
+            last = now;
+
+            // Fixed substeps keep the overdamped spring stable when frames drop.
+            for (let i = 0, n = Math.ceil(elapsed / STEP); i < n; i++) {
+                velocity += ((-STIFFNESS * (position - target)) - (DAMPING * velocity)) / MASS * STEP;
+                position += velocity * STEP;
+            }
+
+            if (Math.abs(position - target) < REST && Math.abs(velocity) < REST) {
+                frame = 0;
+                position = target;
+                velocity = 0;
+            }
+            else {
+                frame = requestAnimationFrame(tick);
+            }
+
+            render(position);
+        }
+
+        return html`
+            <div
+                class='sticky-header'
+                ${attributes}
+                ${{
+                    class: () => state.condensed && '--condensed',
+                    onconnect: (element: HTMLElement) => {
+                        root = element;
+                        measure(element.querySelector('.sticky-header-bar') as HTMLElement);
+                    },
+                    ondisconnect: () => {
+                        cancelAnimationFrame(frame);
+                        frame = 0;
+                    }
+                }}
+            >
+                <div
+                    aria-label='${title}'
+                    class='sticky-header-scroll'
+                    role='region'
+                    tabindex='0'
+                    onscroll='${(event: Event) => {
+                        target = Math.min(1, Math.max(0, (event.currentTarget as HTMLElement).scrollTop / range));
+                        state.condensed = target >= 1;
+
+                        if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
+                            position = target;
+                            velocity = 0;
+                            render(position);
+                        }
+                        else if (!frame) {
+                            last = performance.now();
+                            frame = requestAnimationFrame(tick);
+                        }
+                    }}'
+                >
+                    <div aria-hidden='true' class='sticky-header-spacer'></div>
+                    ${content}
+                    <div aria-hidden='true' class='sticky-header-fade'></div>
+                </div>
+
+                <header class='sticky-header-bar'>
+                    <div aria-hidden='true' class='sticky-header-plate'></div>
+                    <div aria-hidden='true' class='sticky-header-edge sticky-header-edge--shadow'></div>
+                    <div aria-hidden='true' class='sticky-header-edge sticky-header-edge--fade'></div>
+                    <div aria-hidden='true' class='sticky-header-edge sticky-header-edge--line'></div>
+
+                    <div class='sticky-header-row'>
+                        ${leading ? html`<div class='sticky-header-slot'>${leading}</div>` : ''}
+
+                        <div class='sticky-header-titles'>
+                            <div class='sticky-header-expanded'>
+                                <h2 class='sticky-header-title'>${title}</h2>
+                                ${subtitle ? html`<p class='sticky-header-subtitle'>${subtitle}</p>` : ''}
+                            </div>
+                            <span aria-hidden='true' class='sticky-header-compact'>${title}</span>
+                        </div>
+
+                        ${actions ? html`<div class='sticky-header-slot sticky-header-slot--actions'>${actions}</div>` : ''}
+                    </div>
+                </header>
+            </div>
+        `;
+    }
+);

package/src/components/sticky-header/scss/index.scss

@@ -0,0 +1,149 @@
+@use '/lib';
+@use 'variables';
+
+.sticky-header {
+    --lifted: clamp(0, var(--progress) / 0.12, 1);
+    --offset: calc(var(--travel) * var(--progress));
+
+    background: var(--background);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow);
+    overflow: hidden;
+    position: relative;
+
+
+    &-bar {
+        @include lib.position(absolute, top);
+        height: var(--expanded-height);
+        min-height: var(--compact-height);
+        pointer-events: none;
+    }
+
+    &-compact {
+        --reveal: clamp(0, (var(--progress) - 0.55) / 0.35, 1);
+
+        color: var(--title-compact-color);
+        font-size: var(--title-compact-font-size);
+        font-weight: var(--font-weight-500);
+        inset: 3px 0 auto 0;
+        line-height: 1.4;
+        opacity: var(--reveal);
+        overflow: hidden;
+        position: absolute;
+        text-overflow: ellipsis;
+        translate: 0 calc((1 - var(--reveal)) * 6px);
+        white-space: nowrap;
+    }
+
+    // Edges ride the bottom of the shrinking bar and only appear once content slides underneath.
+    &-edge {
+        @include lib.position(absolute, top);
+        opacity: var(--lifted);
+        translate: 0 calc(var(--expanded-height) - var(--offset));
+
+        &--fade {
+            background: linear-gradient(var(--background), transparent);
+            height: 20px;
+        }
+
+        &--line {
+            background: var(--border-color);
+            height: 1px;
+        }
+
+        &--shadow {
+            box-shadow: var(--edge-shadow);
+            height: 1px;
+        }
+    }
+
+    &-expanded {
+        opacity: clamp(0, 1 - var(--progress) / 0.45, 1);
+        scale: calc(1 - 0.05 * var(--progress));
+        transform-origin: left top;
+        translate: 0 calc(var(--offset) * -1);
+    }
+
+    &-fade {
+        background: linear-gradient(transparent, var(--background));
+        bottom: 0;
+        height: 24px;
+        margin-top: -24px;
+        pointer-events: none;
+        position: sticky;
+    }
+
+    // Sliding a solid plate up reads the same as scaling it, without the per-frame raster.
+    &-plate {
+        @include lib.position(absolute, top);
+        background: var(--background);
+        height: var(--expanded-height);
+        translate: 0 calc(var(--offset) * -1);
+    }
+
+    &-row {
+        @include lib.position(absolute, top);
+        align-items: flex-start;
+        display: flex;
+        gap: 10px;
+        padding: var(--padding-top) var(--padding-horizontal) 0;
+    }
+
+    &-scroll {
+        max-height: var(--max-height);
+        outline: none;
+        overflow-y: auto;
+        overscroll-behavior-y: contain;
+        scroll-padding-top: calc(var(--compact-height) + 10px);
+        scrollbar-gutter: stable;
+
+        &:focus-visible {
+            background: oklch(from var(--focus-color) l c h / 0.06);
+            box-shadow: inset 0 0 0 1px var(--focus-color);
+        }
+    }
+
+    &-slot {
+        align-items: center;
+        display: flex;
+        flex-shrink: 0;
+        height: var(--slot-height);
+        pointer-events: auto;
+
+        &--actions {
+            gap: 6px;
+        }
+    }
+
+    &-spacer {
+        height: var(--expanded-height);
+    }
+
+    &-subtitle {
+        color: var(--subtitle-color);
+        font-size: var(--subtitle-font-size);
+        line-height: 1.35;
+        margin-top: 2px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &-title {
+        color: var(--title-color);
+        font-size: var(--title-font-size);
+        font-weight: var(--font-weight-500);
+        letter-spacing: -0.03em;
+        line-height: 1.2;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &-titles {
+        flex: 1;
+        min-width: 0;
+        position: relative;
+    }
+}

package/src/components/sticky-header/scss/variables.scss

@@ -0,0 +1,22 @@
+.sticky-header {
+    --background: var(--color-white-300);
+    --border-color: var(--color-border-300);
+    --border-radius: var(--border-radius-600);
+    --box-shadow: 0 1px 2px oklch(from var(--color-black-300) l c h / 0.06), 0 4px 10px -8px oklch(from var(--color-black-300) l c h / 0.45);
+    --compact-height: 48px;
+    --edge-shadow: 0 6px 16px -10px oklch(from var(--color-black-300) l c h / 0.4);
+    --expanded-height: 68px;
+    --focus-color: var(--color-blue-300);
+    --max-height: 320px;
+    --padding-horizontal: var(--size-400);
+    --padding-top: 12px;
+    --progress: 0;
+    --slot-height: 24px;
+    --subtitle-color: var(--color-text-300);
+    --subtitle-font-size: 11.5px;
+    --title-color: var(--color-text-500);
+    --title-compact-color: var(--color-text-400);
+    --title-compact-font-size: 13px;
+    --title-font-size: 20px;
+    --travel: calc(var(--expanded-height) - var(--compact-height));
+}

package/src/components/sticky-stack/index.ts

@@ -0,0 +1,313 @@
+import { component, html, type Attributes, type Renderable } from '@esportsplus/template';
+import { reactive } from '@esportsplus/reactivity';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    [STICKY_STACK_CARD]?: Attributes;
+    [STICKY_STACK_DOT]?: Attributes;
+    items: Item[];
+    label: string;
+    state?: State;
+};
+
+type Item = {
+    text: Renderable<unknown>;
+    title: string;
+};
+
+type Layout = {
+    card: number;
+    dim: number;
+    first: number;
+    gap: number;
+    header: number;
+    max: number;
+    scale: number;
+    step: number;
+};
+
+type State = {
+    // Index of the card currently on top of the stack.
+    active: number;
+};
+
+
+const STICKY_STACK_CARD = Symbol.for('@esportsplus/ui/sticky-stack.card');
+
+const STICKY_STACK_DOT = Symbol.for('@esportsplus/ui/sticky-stack.dot');
+
+
+// How far card i + 1 has slid over card i, 0 to 1: from its top edge meeting card i's bottom edge until it sticks.
+function covered(layout: Layout, i: number, s: number) {
+    let [start, end] = cover(layout, i);
+
+    return Math.min(Math.max((s - start) / (end - start), 0), 1);
+}
+
+function cover(layout: Layout, i: number) {
+    return [
+        natural(layout, i + 1) - top(layout, i) - layout.card,
+        natural(layout, i + 1) - top(layout, i + 1)
+    ];
+}
+
+function depth(layout: Layout, i: number, last: number, s: number) {
+    let value = 0;
+
+    for (let j = i; j < last; j++) {
+        value += covered(layout, j, s);
+    }
+
+    return value;
+}
+
+// Layout is fixed in px so every scroll position can be computed instead of measured: sticky elements report their
+// stuck position, not their natural one, so measuring them mid-scroll would be wrong anyway.
+function measure(root: HTMLElement): Layout {
+    let computed = getComputedStyle(root),
+        read = (name: string) => parseFloat(computed.getPropertyValue(name));
+
+    return {
+        card: read('--card-height'),
+        dim: read('--dim-per-card'),
+        first: read('--first-top'),
+        gap: read('--card-gap'),
+        header: read('--header-height'),
+        max: read('--max-dim'),
+        scale: read('--scale-per-card'),
+        step: read('--step')
+    };
+}
+
+function natural(layout: Layout, i: number) {
+    return layout.header + i * (layout.card + layout.gap);
+}
+
+function reduced() {
+    return matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
+// Everything between two breakpoints is linear in scroll position, so keyframes at the breakpoints reproduce the
+// scroll-listener math exactly on the compositor.
+function timeline(
+    element: Element,
+    points: number[],
+    range: number,
+    source: ScrollTimeline,
+    frame: (s: number) => Keyframe
+) {
+    let offsets = [...new Set([0, range, ...points].map((s) => Math.min(Math.max(s, 0), range)))].sort((a, b) => a - b);
+
+    return element.animate(
+        offsets.map((s) => ({ ...frame(s), offset: s / range })),
+        { fill: 'both', timeline: source }
+    );
+}
+
+function top(layout: Layout, i: number) {
+    return layout.first + i * layout.step;
+}
+
+
+export default Object.assign(component<A, Renderable<unknown>>(
+    function(
+        this: { attributes?: Partial<A> },
+        { items, label, state = reactive({ active: 0 }), ...attributes }: A,
+        heading
+    ) {
+        let animations: Animation[] = [],
+            cards: HTMLElement[] = [],
+            dots: HTMLElement[] = [],
+            fills: HTMLElement[] = [],
+            frame = 0,
+            last = items.length - 1,
+            layout: Layout | undefined,
+            scroller: HTMLElement | undefined,
+            shades: HTMLElement[] = [];
+
+        function goTo(i: number) {
+            if (!layout || !scroller) {
+                return;
+            }
+
+            scroller.scrollTo({
+                behavior: reduced() ? 'auto' : 'smooth',
+                top: i === 0 ? 0 : natural(layout, i) - top(layout, i)
+            });
+        }
+
+        function onscroll() {
+            if (!frame) {
+                frame = requestAnimationFrame(update);
+            }
+        }
+
+        function scrollDriven() {
+            if (!layout || !scroller || typeof ScrollTimeline !== 'function') {
+                return;
+            }
+
+            let range = scroller.scrollHeight - scroller.clientHeight;
+
+            if (range <= 0) {
+                return;
+            }
+
+            let l = layout,
+                motion = !reduced(),
+                source = new ScrollTimeline({ axis: 'block', source: scroller });
+
+            for (let i = 0; i <= last; i++) {
+                if (i > 0) {
+                    animations.push(
+                        timeline(fills[i], cover(l, i - 1), range, source, (s) => ({ transform: `scaleY(${covered(l, i - 1, s)})` }))
+                    );
+                }
+
+                if (!motion) {
+                    continue;
+                }
+
+                let cap = l.max / l.dim,
+                    points: number[] = [];
+
+                for (let j = i; j < last; j++) {
+                    points.push(...cover(l, j));
+                }
+
+                // The shade stops darkening partway through a cover; that kink needs its own keyframe.
+                let j = i + Math.floor(cap);
+
+                if (j < last) {
+                    let [start, end] = cover(l, j);
+
+                    points.push(start + (cap % 1) * (end - start));
+                }
+
+                animations.push(
+                    timeline(cards[i], points, range, source, (s) => ({ transform: `scale(${1 - depth(l, i, last, s) * l.scale})` })),
+                    timeline(shades[i], points, range, source, (s) => ({ opacity: Math.min(depth(l, i, last, s) * l.dim, l.max) }))
+                );
+            }
+        }
+
+        // One read and a batch of transform and opacity writes per frame, nothing that triggers layout.
+        function update() {
+            frame = 0;
+
+            if (!layout || !scroller) {
+                return;
+            }
+
+            let front = 0,
+                s = scroller.scrollTop;
+
+            for (let i = 0; i < last; i++) {
+                if (covered(layout, i, s) >= 0.5) {
+                    front++;
+                }
+            }
+
+            if (front !== state.active) {
+                dots[state.active]?.removeAttribute('aria-current');
+                state.active = front;
+            }
+
+            dots[front]?.setAttribute('aria-current', 'step');
+
+            if (animations.length) {
+                return;
+            }
+
+            let motion = !reduced();
+
+            for (let i = 0; i <= last; i++) {
+                let d = depth(layout, i, last, s);
+
+                cards[i].style.transform = motion ? `scale(${1 - d * layout.scale})` : '';
+                fills[i].style.transform = `scaleY(${i === 0 ? 1 : covered(layout, i - 1, s)})`;
+                shades[i].style.opacity = motion ? String(Math.min(d * layout.dim, layout.max)) : '0';
+            }
+        }
+
+        return html`
+            <div
+                class='sticky-stack'
+                ${this?.attributes}
+                ${attributes}
+                ${{
+                    onconnect: (root: HTMLElement) => {
+                        cards = [...root.querySelectorAll<HTMLElement>('.sticky-stack-card')];
+                        dots = [...root.querySelectorAll<HTMLElement>('.sticky-stack-dot')];
+                        fills = [...root.querySelectorAll<HTMLElement>('.sticky-stack-fill')];
+                        layout = measure(root);
+                        shades = [...root.querySelectorAll<HTMLElement>('.sticky-stack-shade')];
+
+                        scrollDriven();
+                        update();
+                    },
+                    ondisconnect: () => {
+                        cancelAnimationFrame(frame);
+
+                        for (let i = 0, n = animations.length; i < n; i++) {
+                            animations[i].cancel();
+                        }
+
+                        animations = [];
+                    }
+                }}
+            >
+                <div
+                    aria-label='${label}'
+                    class='sticky-stack-scroller'
+                    role='region'
+                    tabindex='0'
+                    ${{
+                        onrender: (el: HTMLElement) => {
+                            scroller = el;
+                        },
+                        onscroll
+                    }}
+                >
+                    <div class='sticky-stack-track' style='${`--last: ${last};`}'>
+                        <div class='sticky-stack-header'>${heading}</div>
+                        ${items.map((item, i) => html`
+                            <article
+                                class='sticky-stack-card'
+                                style='${`--index: ${i};`}'
+                                ${this?.attributes?.[STICKY_STACK_CARD]}
+                                ${attributes[STICKY_STACK_CARD]}
+                            >
+                                <span class='sticky-stack-number'>${String(i + 1).padStart(2, '0')}</span>
+                                <div class='sticky-stack-body'>
+                                    <h3 class='sticky-stack-title'>${item.title}</h3>
+                                    <p class='sticky-stack-text'>${item.text}</p>
+                                </div>
+                                <div aria-hidden='true' class='sticky-stack-shade'></div>
+                            </article>
+                        `)}
+                    </div>
+                </div>
+                <nav aria-label='Jump to card' class='sticky-stack-nav'>
+                    ${items.map((item, i) => html`
+                        <button
+                            aria-label='${`${i + 1}. ${item.title}`}'
+                            class='sticky-stack-dot'
+                            onclick='${() => goTo(i)}'
+                            type='button'
+                            ${this?.attributes?.[STICKY_STACK_DOT]}
+                            ${attributes[STICKY_STACK_DOT]}
+                        >
+                            <span class='sticky-stack-bar'>
+                                <span class='sticky-stack-fill' style='${`transform: scaleY(${i === 0 ? 1 : 0});`}'></span>
+                            </span>
+                        </button>
+                    `)}
+                </nav>
+            </div>
+        `;
+    }
+), { card: STICKY_STACK_CARD, dot: STICKY_STACK_DOT } as const);
+
+export type { Item, State };