@esportsplus/ui 0.54.0 → 0.56.2

package/src/components/onboarding-checklist/scss/index.scss

@@ -0,0 +1,414 @@
+@use '/tokens';
+@use 'variables';
+
+.onboarding-checklist {
+    background: var(--background);
+    border-radius: var(--radius);
+    box-shadow: var(--box-shadow);
+    color: var(--foreground);
+    display: block;
+    font-size: var(--font-size);
+    overflow: hidden;
+    width: var(--width);
+
+
+    &-action {
+        --background-default: var(--accent);
+        --color-default: var(--accent-contrast);
+        --padding-horizontal: 16px;
+        --padding-vertical: 0px;
+        border-radius: 999px;
+        display: grid;
+        font-size: var(--font-size);
+        font-weight: var(--font-weight-500);
+        height: 36px;
+        outline: 0 solid var(--focus-ring);
+        outline-offset: 2px;
+        user-select: none;
+
+        &:focus-visible {
+            outline-width: 2px;
+        }
+
+        &:active {
+            scale: 0.96;
+        }
+
+        .--done & {
+            --background-default: var(--pressed);
+            --color-default: var(--color-muted);
+            cursor: default;
+            scale: 1;
+        }
+
+        // Both labels share a cell so the button keeps its width.
+        &-label {
+            align-items: center;
+            display: flex;
+            gap: 6px;
+            grid-area: 1 / 1;
+            justify-content: center;
+            transition:
+                filter 200ms ease-out,
+                opacity 200ms ease-out;
+
+            .--done & {
+                filter: blur(4px);
+                opacity: 0;
+            }
+
+            &--done {
+                filter: blur(4px);
+                opacity: 0;
+
+                .--done & {
+                    filter: none;
+                    opacity: 1;
+                }
+
+                .onboarding-checklist-icon {
+                    filter: blur(4px);
+                    opacity: 0;
+                    scale: 0.25;
+                    transition:
+                        filter 300ms var(--ease),
+                        opacity 300ms var(--ease),
+                        scale 300ms var(--ease);
+
+                    .--done & {
+                        filter: none;
+                        opacity: 1;
+                        scale: 1;
+                    }
+                }
+            }
+        }
+    }
+
+    &-body {
+        align-items: flex-start;
+        display: flex;
+        filter: blur(4px);
+        flex-direction: column;
+        gap: 12px;
+        opacity: 0;
+        padding: 0 12px 16px 44px;
+        transition:
+            filter 150ms ease-out,
+            opacity 150ms ease-out,
+            translate 150ms ease-out;
+        translate: 0 -4px;
+
+        .accordion.--active > .accordion-content > & {
+            filter: none;
+            opacity: 1;
+            transition-duration: 250ms;
+            translate: 0;
+        }
+    }
+
+    &-celebration {
+        align-items: flex-start;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        padding: 4px 20px 20px;
+
+        &-actions {
+            margin-top: 12px;
+        }
+
+        &-note {
+            color: var(--color-muted);
+            line-height: 20px;
+            text-wrap: pretty;
+        }
+
+        &-title {
+            color: var(--foreground);
+            font-size: calc(var(--font-size-400) * 1.0625);
+            font-weight: var(--font-weight-600);
+            letter-spacing: -0.01em;
+        }
+
+        // A rare, one-time moment, so it gets a gentle staggered entrance: heading, note, then the button.
+        .--celebrating & > * {
+            animation: onboarding-checklist-enter 400ms var(--ease) both;
+
+            &:nth-child(2) {
+                animation-delay: 200ms;
+            }
+
+            &:nth-child(3) {
+                animation-delay: 280ms;
+            }
+        }
+
+        .--celebrating & > :first-child {
+            animation-delay: 120ms;
+        }
+    }
+
+    &-checkbox {
+        --background-active: var(--accent);
+        --border-color-active: var(--accent);
+        --border-color-default: oklch(from var(--color-muted) l c h / 0.6);
+        --border-color-hover: var(--color-muted);
+        --border-radius: 6px;
+        --border-width: 1.5px;
+        --border-width-offset-hover: 0px;
+        --box-shadow-active: none;
+        --check-size: 75%;
+        --check-stroke-width: 3;
+        --focus-color: var(--focus-ring);
+        --indicator-color-default: var(--accent-contrast);
+        --size: 20px;
+        --transition-duration: 150ms;
+        --transition-timing-function: ease-out;
+        transition-property: background, border-color, scale;
+
+        .onboarding-checklist-toggle:active & {
+            scale: 0.96;
+        }
+    }
+
+    &-chevron {
+        color: var(--color-muted);
+        flex-shrink: 0;
+        height: 16px;
+        transition: rotate 200ms var(--ease);
+        width: 16px;
+
+        .--open & {
+            rotate: 180deg;
+        }
+    }
+
+    // The list and the finished state swap by collapsing one and opening the other, so only the space below the header moves.
+    &-collapse,
+    &-details {
+        transition: grid-template-rows 200ms var(--ease);
+
+        @include tokens.state(active) {
+            transition-duration: 300ms;
+        }
+    }
+
+    &-description {
+        color: var(--color-muted);
+        line-height: 20px;
+        text-wrap: pretty;
+    }
+
+    &-details {
+        @include tokens.state(active) {
+            transition-duration: 250ms;
+        }
+    }
+
+    &-header {
+        align-items: center;
+        display: flex;
+        gap: 16px;
+        justify-content: space-between;
+        padding: 20px 20px 12px;
+    }
+
+    &-heading {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        min-width: 0;
+
+        &-count {
+            color: var(--color-muted);
+            font-variant-numeric: tabular-nums;
+        }
+
+        &-title {
+            color: var(--foreground);
+            font-size: calc(var(--font-size-400) * 1.125);
+            font-weight: var(--font-weight-600);
+            letter-spacing: -0.01em;
+        }
+    }
+
+    &-list {
+        list-style: none;
+        margin: 0;
+        padding: 0 8px 8px;
+    }
+
+    &-live {
+        clip-path: inset(50%);
+        height: 1px;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+    }
+
+    &-icon {
+        height: 16px;
+        width: 16px;
+    }
+
+    &-ring {
+        display: grid;
+        flex-shrink: 0;
+        height: 48px;
+        place-items: center;
+        position: relative;
+        width: 48px;
+
+        svg {
+            inset: 0;
+            position: absolute;
+            rotate: -90deg;
+        }
+
+        &-fill {
+            stroke: var(--accent);
+            stroke-dasharray: 1;
+            stroke-dashoffset: calc(1 - var(--progress));
+        }
+
+        &-track {
+            stroke: var(--ring-track);
+        }
+
+        &-value {
+            font-size: calc(var(--font-size-400) * 0.6875);
+            font-variant-numeric: tabular-nums;
+            font-weight: var(--font-weight-500);
+            position: relative;
+
+            span {
+                color: var(--color-muted);
+            }
+        }
+    }
+
+    &-row {
+        align-items: center;
+        display: flex;
+    }
+
+    // Draws left to right when checked and retracts faster when unchecked: slow where it rewards, quick where it undoes.
+    &-strike {
+        background: currentColor;
+        height: 1px;
+        left: 0;
+        position: absolute;
+        scale: 0 1;
+        top: 50%;
+        transform-origin: left;
+        transition: scale 150ms var(--ease);
+        width: 100%;
+
+        .--done & {
+            scale: 1;
+            transition-duration: 300ms;
+        }
+    }
+
+    &-summary {
+        align-items: center;
+        background: transparent;
+        border: 0;
+        border-radius: 10px;
+        color: inherit;
+        cursor: pointer;
+        display: flex;
+        flex: 1 1 0;
+        font: inherit;
+        gap: 12px;
+        height: 48px;
+        justify-content: space-between;
+        min-width: 0;
+        outline: 0 solid var(--focus-ring);
+        padding: 0 12px 0 4px;
+        text-align: left;
+        transition: background-color 150ms ease-out;
+
+        &:active {
+            background: var(--pressed);
+        }
+
+        &:focus-visible {
+            outline-width: 2px;
+        }
+
+        @media (hover: hover) {
+            &:hover:not(:active) {
+                background: var(--hover);
+            }
+        }
+    }
+
+    &-title {
+        color: var(--foreground);
+        font-size: var(--font-size-title);
+        min-width: 0;
+        overflow: hidden;
+        position: relative;
+        text-overflow: ellipsis;
+        transition: color 200ms ease-out;
+        white-space: nowrap;
+
+        .--done & {
+            color: var(--color-muted);
+        }
+    }
+
+    // A 40px hit area around the 20px box.
+    &-toggle {
+        cursor: pointer;
+        display: grid;
+        flex-shrink: 0;
+        height: 40px;
+        place-items: center;
+        position: relative;
+        width: 40px;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &-action-label--done .onboarding-checklist-icon,
+        &-body {
+            filter: none;
+            scale: 1;
+            translate: 0;
+        }
+
+        &-chevron,
+        &-collapse,
+        &-details,
+        &-strike {
+            transition: none;
+        }
+
+        &-celebration {
+            .--celebrating & > * {
+                animation-name: onboarding-checklist-fade;
+            }
+        }
+
+        &-checkbox {
+            transition-property: background, border-color;
+        }
+    }
+}
+
+@keyframes onboarding-checklist-enter {
+    from {
+        filter: blur(4px);
+        opacity: 0;
+        translate: 0 6px;
+    }
+}
+
+@keyframes onboarding-checklist-fade {
+    from {
+        opacity: 0;
+    }
+}

package/src/components/onboarding-checklist/scss/variables.scss

@@ -0,0 +1,17 @@
+.onboarding-checklist {
+    --accent: var(--color-text-500);
+    --accent-contrast: var(--color-white-300);
+    --background: var(--color-grey-400);
+    --box-shadow: 0 0 0 1px oklch(from var(--color-black-300) l c h / 0.06), 0 1px 2px oklch(from var(--color-black-300) l c h / 0.06), 0 6px 16px -6px oklch(from var(--color-black-300) l c h / 0.12);
+    --color-muted: var(--color-text-300);
+    --ease: cubic-bezier(0.23, 1, 0.32, 1);
+    --focus-ring: oklch(from var(--color-text-500) l c h / 0.38);
+    --font-size: calc(var(--font-size-400) * 0.875);
+    --font-size-title: calc(var(--font-size-400) * 0.9375);
+    --foreground: var(--color-text-500);
+    --hover: oklch(from var(--color-text-500) l c h / 0.04);
+    --pressed: oklch(from var(--color-text-500) l c h / 0.06);
+    --radius: 20px;
+    --ring-track: oklch(from var(--color-text-500) l c h / 0.1);
+    --width: min(400px, 100%);
+}

package/src/components/page-dots/index.ts

@@ -0,0 +1,137 @@
+import { html, type Attributes } from '@esportsplus/template';
+import { effect, onCleanup, reactive } from '@esportsplus/reactivity';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    [PAGE_DOTS_DOT]?: Attributes;
+    // Milliseconds the pill takes to fill while 'state.running'; omitted for plain dots.
+    autoplay?: number;
+    count: number;
+    onelapsed?: (active: number) => void;
+    onpage?: (index: number) => void;
+    state?: State;
+};
+
+type State = {
+    active: number;
+    // Continuous page index (1.5 is halfway between the second and third page) so the dots follow a scroll or drag frame by frame.
+    progress: number;
+    running: boolean;
+};
+
+
+const PAGE_DOTS_DOT = Symbol.for('@esportsplus/ui/page-dots.dot');
+
+// Paused partway, the fill eases back to full rather than snapping, so a paused pill reads as solid, not half done.
+const SETTLE: KeyframeAnimationOptions = { duration: 200, easing: 'cubic-bezier(0.23, 1, 0.32, 1)' };
+
+
+function template(
+    this: { attributes?: Partial<A> } | void,
+    { autoplay, count, onelapsed, onpage, state = reactive({ active: 0, progress: 0, running: false }), ...attributes }: A
+) {
+    let element: HTMLElement | undefined,
+        fill: HTMLElement | undefined,
+        local = reactive({ connected: false }),
+        settle: Animation | undefined,
+        stops = [
+            effect(() => {
+                let active = Math.min(Math.max(Math.round(state.progress), 0), count - 1);
+
+                element?.style.setProperty('--progress', String(state.progress));
+
+                if (state.active !== active) {
+                    state.active = active;
+                }
+            }),
+            effect((cleanup) => {
+                // Read before any early return so every input stays a dependency.
+                let active = state.active,
+                    running = local.connected && state.running;
+
+                if (!autoplay || !fill || !running) {
+                    return;
+                }
+
+                let target = fill;
+
+                settle?.cancel();
+
+                // The countdown is the timer: when the fill finishes, the page advances.
+                let countdown = target.animate(
+                    [{ transform: 'scaleX(0)' }, { transform: 'scaleX(1)' }],
+                    { duration: autoplay, easing: 'linear' }
+                );
+
+                countdown.onfinish = () => onelapsed?.(active);
+
+                cleanup(() => {
+                    countdown.onfinish = null;
+
+                    if (countdown.playState !== 'running') {
+                        return;
+                    }
+
+                    let from = getComputedStyle(target).transform;
+
+                    countdown.cancel();
+                    settle = target.animate([{ transform: from }, { transform: 'scaleX(1)' }], SETTLE);
+                });
+            })
+        ];
+
+    onCleanup(() => {
+        settle?.cancel();
+
+        for (let i = 0, n = stops.length; i < n; i++) {
+            stops[i]();
+        }
+    });
+
+    return html`
+        <div
+            aria-label='Pages'
+            class='page-dots ${autoplay && 'page-dots--autoplay'}'
+            role='group'
+            style='${`--count: ${count}; --progress: ${state.progress};`}'
+            ${this?.attributes}
+            ${attributes}
+            ${{
+                onconnect: () => {
+                    local.connected = true;
+                },
+                ondisconnect: () => {
+                    local.connected = false;
+                },
+                onrender: (el: HTMLElement) => {
+                    element = el;
+                }
+            }}
+        >
+            ${Array.from({ length: count }, (_, i) => html`
+                <button
+                    aria-current='${() => state.active === i && 'page'}'
+                    aria-label='${`Page ${i + 1} of ${count}`}'
+                    class='page-dots-dot'
+                    onclick='${() => onpage?.(i)}'
+                    style='${`--index: ${i};`}'
+                    type='button'
+                    ${this?.attributes?.[PAGE_DOTS_DOT]}
+                    ${attributes[PAGE_DOTS_DOT]}
+                >
+                    <span class='page-dots-mark'></span>
+                </button>
+            `)}
+            <span aria-hidden='true' class='page-dots-pill'>
+                ${autoplay && html`
+                    <span class='page-dots-fill' onrender='${(el: HTMLElement) => { fill = el; }}'></span>
+                `}
+            </span>
+        </div>
+    `;
+}
+
+
+export default Object.assign(template, { dot: PAGE_DOTS_DOT } as const);
+export type { State };

package/src/components/page-dots/scss/index.scss

@@ -0,0 +1,95 @@
+@use 'variables';
+
+// Geometry is derived from '--progress' alone, so a scroll or drag only rewrites one custom property per frame.
+.page-dots {
+    --step: calc(var(--dot-size) + var(--dot-gap));
+    contain: layout;
+    flex: none;
+    height: var(--height);
+    position: relative;
+    // Never changes width: the active slot is always one pill wide, whichever dot owns it.
+    width: calc((var(--count) - 1) * var(--step) + var(--pill-width));
+
+    // Each dot swells toward pill width as its page approaches, so the row makes room for the pill and every gap stays even mid-scroll.
+    &-dot {
+        --near: clamp(0, 1 - max(var(--progress) - var(--index), var(--index) - var(--progress)), 1);
+        align-items: center;
+        background: none;
+        border: 0;
+        border-radius: 999px;
+        box-sizing: content-box;
+        cursor: pointer;
+        display: flex;
+        inset-block: 0;
+        left: calc(var(--index) * var(--step) + (var(--pill-width) - var(--dot-size)) * clamp(0, var(--index) - var(--progress), 1));
+        // Reaches half the gap past each side of its dot, so the hit areas tile the row with no dead space between them.
+        margin: 0 0 0 calc(var(--dot-gap) / -2);
+        outline: none;
+        padding: 0 calc(var(--dot-gap) / 2);
+        position: absolute;
+        touch-action: manipulation;
+        width: calc(var(--dot-size) + (var(--pill-width) - var(--dot-size)) * var(--near));
+
+        &:focus-visible {
+            outline: var(--border-width-500) solid var(--focus-color);
+        }
+
+        &:active .page-dots-mark {
+            scale: var(--pressed-scale);
+        }
+
+        @media (hover: hover) {
+            &:hover .page-dots-mark {
+                background: var(--dot-color-hover);
+            }
+        }
+    }
+
+    &-fill {
+        background: var(--pill-color);
+        inset: 0;
+        position: absolute;
+        transform-origin: left;
+    }
+
+    &-mark {
+        background: var(--dot-color);
+        border-radius: 999px;
+        height: var(--dot-size);
+        transition:
+            background-color var(--transition-duration) var(--transition-timing-function),
+            scale var(--transition-duration) var(--transition-timing-function);
+        width: 100%;
+    }
+
+    // Spans the two pages it sits between: the leading edge travels in the first 60% of the move and the trailing edge in the
+    // last 60%, so the pill stretches toward the next dot, then pulls its tail in after it, like a worm.
+    &-pill {
+        --k: clamp(0, round(down, var(--progress), 1), max(var(--count) - 2, 0));
+        --t: clamp(0, var(--progress) - var(--k), 1);
+        --lead-t: clamp(0, var(--t) / 0.6, 1);
+        --trail-t: clamp(0, (var(--t) - 0.4) / 0.6, 1);
+        --lead: calc(var(--lead-t) * var(--lead-t) * (3 - 2 * var(--lead-t)));
+        --trail: calc(var(--trail-t) * var(--trail-t) * (3 - 2 * var(--trail-t)));
+        background: var(--track-color);
+        border-radius: 999px;
+        height: var(--dot-size);
+        left: 0;
+        overflow: hidden;
+        pointer-events: none;
+        position: absolute;
+        top: 50%;
+        translate: calc(var(--k) * var(--step) + var(--step) * var(--trail)) -50%;
+        width: calc(var(--pill-width) + var(--step) * (var(--lead) - var(--trail)));
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &-mark {
+            transition: background-color var(--transition-duration) var(--transition-timing-function);
+        }
+
+        &-dot:active .page-dots-mark {
+            scale: none;
+        }
+    }
+}

package/src/components/page-dots/scss/variables.scss

@@ -0,0 +1,26 @@
+.page-dots {
+    --color: var(--color-text-500);
+    --dot-color: oklch(from var(--color) l c h / 0.2);
+    --dot-color-hover: oklch(from var(--color) l c h / 0.35);
+    --dot-gap: 6px;
+    --dot-size: 6px;
+    --focus-color: var(--color);
+    --height: 32px;
+    --pill-color: var(--color);
+    --pill-width: 20px;
+    --pressed-scale: 0.96;
+    --track-color: var(--pill-color);
+    --transition-duration: 0.15s;
+    --transition-timing-function: ease-out;
+
+    // Twice the dots' tint, so the pill still reads as the active slot before its countdown fills it.
+    &--autoplay {
+        --track-color: oklch(from var(--pill-color) l c h / 0.4);
+    }
+
+    &--large {
+        --dot-gap: 8px;
+        --dot-size: 8px;
+        --pill-width: 28px;
+    }
+}