@esportsplus/ui 0.54.0 → 0.56.2

package/src/components/sparkline/scss/index.scss

@@ -0,0 +1,169 @@
+@use 'variables';
+
+.sparkline {
+    color: var(--color);
+    font-size: var(--font-size);
+    max-width: 100%;
+    width: var(--width);
+
+
+    &-area {
+        fill: var(--area-color);
+        opacity: 0;
+        transition: opacity var(--draw-duration) var(--draw-timing-function);
+    }
+
+    // Moves instantly: any easing would make the readout trail the pointer.
+    &-cursor {
+        background: var(--cursor-color);
+        height: 100%;
+        position: absolute;
+        top: 0;
+        translate: -50% 0;
+        width: 1px;
+    }
+
+    &-delta {
+        color: var(--muted-color);
+        white-space: nowrap;
+
+        &-value {
+            color: var(--color);
+            font-variant-numeric: tabular-nums;
+            font-weight: var(--font-weight-500);
+        }
+    }
+
+    &-dot {
+        background: var(--dot-color);
+        border-radius: 50%;
+        box-shadow: 0 0 0 2px var(--dot-ring-color);
+        height: var(--dot-size);
+        position: absolute;
+        translate: -50% -50%;
+        width: var(--dot-size);
+    }
+
+    &-header {
+        align-items: baseline;
+        display: flex;
+        gap: var(--size-400);
+        justify-content: space-between;
+    }
+
+    // The round cap would show as a dot before the draw starts, so the line also starts hidden.
+    &-line {
+        opacity: 0;
+        stroke: var(--line-color);
+        stroke-dasharray: 1;
+        stroke-dashoffset: 1;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        stroke-width: var(--line-width);
+        transition:
+            opacity 0.05s var(--draw-timing-function),
+            stroke-dashoffset var(--draw-duration) var(--draw-timing-function);
+    }
+
+    &-overlay {
+        inset: 0;
+        opacity: 0;
+        pointer-events: none;
+        position: absolute;
+        transition: opacity 0.15s ease-out;
+    }
+
+    &-plot {
+        aspect-ratio: 520 / 160;
+        border-radius: var(--border-radius-100);
+        margin-top: var(--plot-offset);
+        outline: none;
+        position: relative;
+        touch-action: pan-y;
+        user-select: none;
+        width: 100%;
+
+        &:focus-visible {
+            outline: 2px solid var(--focus-color);
+            outline-offset: 4px;
+        }
+
+        &.--active .sparkline-overlay {
+            opacity: 1;
+            transition-duration: 0.1s;
+        }
+
+        &.--shown {
+            .sparkline-area,
+            .sparkline-line {
+                opacity: 1;
+            }
+
+            .sparkline-line {
+                stroke-dashoffset: 0;
+            }
+        }
+    }
+
+    &-sr {
+        clip-path: inset(50%);
+        height: 1px;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+    }
+
+    &-svg {
+        display: block;
+        height: auto;
+        overflow: visible;
+        width: 100%;
+    }
+
+    &-tip {
+        align-items: baseline;
+        background: var(--tip-background);
+        border-radius: 999px;
+        bottom: 100%;
+        color: var(--tip-color);
+        display: flex;
+        font-size: var(--tip-font-size);
+        gap: var(--size-300);
+        margin-bottom: 10px;
+        padding: 6px 12px;
+        position: absolute;
+        translate: -50% 0;
+        white-space: nowrap;
+
+        &-label {
+            opacity: 0.7;
+        }
+
+        &-value {
+            font-variant-numeric: tabular-nums;
+            font-weight: var(--font-weight-600);
+        }
+    }
+
+    &-title {
+        color: var(--muted-color);
+    }
+
+    &-value {
+        font-size: var(--value-font-size);
+        font-variant-numeric: tabular-nums;
+        font-weight: var(--value-font-weight);
+        letter-spacing: -0.025em;
+        line-height: 1.2;
+    }
+
+
+    // Skips the draw and keeps only a fade.
+    @media (prefers-reduced-motion: reduce) {
+        &-line {
+            stroke-dashoffset: 0;
+            transition: opacity var(--draw-duration) var(--draw-timing-function);
+        }
+    }
+}

package/src/components/sparkline/scss/variables.scss

@@ -0,0 +1,30 @@
+.sparkline {
+    --area-color: color-mix(in oklab, var(--line-color) 8%, transparent);
+    --color: var(--color-text-500);
+    --cursor-color: color-mix(in oklab, var(--color-text-300) 40%, transparent);
+    // Long for a UI animation on purpose: the draw introduces the shape once, and a faster line reads as a flicker.
+    --draw-duration: 0.7s;
+    --draw-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+    --dot-color: var(--line-color);
+    --dot-ring-color: var(--color-white-300);
+    --dot-size: 12px;
+    --focus-color: var(--color-text-500);
+    --font-size: var(--font-size-400);
+    --line-color: var(--color-text-500);
+    --line-width: 2.5;
+    --muted-color: var(--color-text-300);
+    --plot-offset: 48px;
+    --tip-background: var(--color-text-500);
+    --tip-color: var(--color-white-300);
+    --tip-font-size: var(--font-size-300);
+    --value-font-size: var(--font-size-700);
+    --value-font-weight: var(--font-weight-600);
+    --width: 520px;
+
+
+    &--accent {
+        --dot-color: var(--color-blue-400);
+        --line-color: var(--color-blue-400);
+        --tip-background: var(--color-blue-400);
+    }
+}

package/src/components/stacked-drawer/index.ts

@@ -0,0 +1,272 @@
+import { effect, reactive } from '@esportsplus/reactivity';
+import { component, html, type Attributes, type Renderable } from '@esportsplus/template';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    onconnect?: never;
+    ondisconnect?: never;
+    ondocumentkeydown?: never;
+    sheets: (Attributes & { content: Renderable<unknown> })[];
+    state?: { depth: number };
+};
+
+type Pointer = {
+    active: boolean;
+    from: number;
+    height: number;
+    id: number;
+    index: number;
+    limit: number;
+    start: number;
+    time: number;
+    velocity: number;
+    y: number;
+};
+
+
+// Fraction of the sheet's height, or downward px/s, past which a release dismisses instead of settling.
+const DISMISS_DISTANCE = 0.3;
+
+const DISMISS_VELOCITY = 500;
+
+const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+// Upward drags approach the overscroll limit asymptotically; this is the distance to reach half of it.
+const RESISTANCE = 120;
+
+// A release this long after the last move is a hold, not a flick.
+const STALE = 100;
+
+// Movement before a press becomes a drag, so taps still reach the sheet's buttons.
+const THRESHOLD = 4;
+
+
+function rubberband(y: number, limit: number) {
+    return y < 0 ? -(limit * (1 - 1 / (1 + -y / RESISTANCE))) : y;
+}
+
+
+export default component<A>(
+    function(this, { sheets, state = reactive({ depth: 0 }), ...attributes }, content) {
+        let drag = reactive({ index: -1, progress: 1, y: 0 }),
+            elements: HTMLElement[] = [],
+            frame = 0,
+            openers: (HTMLElement | null)[] = [],
+            pointer: Pointer | undefined,
+            stop: VoidFunction | undefined;
+
+        function covered(index: number) {
+            return drag.index === index ? drag.progress : Number(index < state.depth);
+        }
+
+        function release(e: PointerEvent) {
+            if (!pointer || e.pointerId !== pointer.id) {
+                return;
+            }
+
+            let { active, height, index, time, velocity } = pointer;
+
+            pointer = undefined;
+
+            if (!active) {
+                return;
+            }
+
+            if (e.timeStamp - time > STALE) {
+                velocity = 0;
+            }
+
+            if (drag.y > height * DISMISS_DISTANCE || velocity > DISMISS_VELOCITY) {
+                state.depth = index;
+            }
+
+            drag.index = -1;
+            drag.progress = 1;
+            drag.y = 0;
+        }
+
+        return html`
+            <div
+                class='stacked-drawer'
+                ${this?.attributes}
+                ${attributes}
+                ${{
+                    class: () => drag.index !== -1 && '--dragging',
+                    onconnect: (element: HTMLElement) => {
+                        let previous = state.depth;
+
+                        stop = effect(() => {
+                            let depth = state.depth;
+
+                            if (depth === previous) {
+                                return;
+                            }
+
+                            let opening = depth > previous;
+
+                            if (opening) {
+                                for (let i = previous; i < depth; i++) {
+                                    openers[i] = document.activeElement as HTMLElement | null;
+                                }
+                            }
+
+                            previous = depth;
+
+                            // The 'inert' bindings settle in the same batch as this effect, and an inert target refuses focus.
+                            cancelAnimationFrame(frame);
+                            frame = requestAnimationFrame(() => {
+                                if (opening) {
+                                    elements[depth - 1]?.focus({ preventScroll: true });
+                                    return;
+                                }
+
+                                let active = document.activeElement;
+
+                                if (!active || active === document.body || element.contains(active)) {
+                                    openers[depth]?.focus({ preventScroll: true });
+                                }
+                            });
+                        });
+                    },
+                    ondisconnect: () => {
+                        cancelAnimationFrame(frame);
+                        stop?.();
+                    },
+                    ondocumentkeydown: function(e) {
+                        if (!state.depth || !this.contains(document.activeElement)) {
+                            return;
+                        }
+
+                        if (e.key === 'Escape') {
+                            e.preventDefault();
+                            state.depth--;
+                            return;
+                        }
+
+                        if (e.key !== 'Tab') {
+                            return;
+                        }
+
+                        let sheet = elements[state.depth - 1],
+                            focusable = sheet.querySelectorAll<HTMLElement>(FOCUSABLE);
+
+                        if (!focusable.length) {
+                            e.preventDefault();
+                            sheet.focus();
+                            return;
+                        }
+
+                        let active = document.activeElement,
+                            first = focusable[0],
+                            last = focusable[focusable.length - 1];
+
+                        if (e.shiftKey && (active === first || active === sheet)) {
+                            e.preventDefault();
+                            last.focus();
+                        }
+                        else if (!e.shiftKey && active === last) {
+                            e.preventDefault();
+                            first.focus();
+                        }
+                    }
+                }}
+            >
+                <div
+                    class='stacked-drawer-page'
+                    ${{
+                        class: () => state.depth > 0 && '--covered',
+                        inert: () => state.depth > 0,
+                        style: () => `--covered: ${covered(0)};`
+                    }}
+                >
+                    ${content}
+                </div>
+
+                ${sheets.map(({ content, ...sheet }, index) => html`
+                    <div
+                        aria-modal='true'
+                        class='stacked-drawer-sheet'
+                        role='dialog'
+                        tabindex='-1'
+                        ${sheet}
+                        ${{
+                            class: [
+                                () => index < state.depth && '--active',
+                                () => index + 1 < state.depth && '--covered'
+                            ],
+                            inert: () => index !== state.depth - 1,
+                            onconnect: (element: HTMLElement) => {
+                                elements[index] = element;
+                            },
+                            onpointercancel: release,
+                            onpointerdown: (e) => {
+                                if (pointer || index !== state.depth - 1 || (e.pointerType === 'mouse' && e.button !== 0)) {
+                                    return;
+                                }
+
+                                pointer = {
+                                    active: false,
+                                    from: 0,
+                                    height: 0,
+                                    id: e.pointerId,
+                                    index,
+                                    limit: 0,
+                                    start: e.clientY,
+                                    time: e.timeStamp,
+                                    velocity: 0,
+                                    y: 0
+                                };
+                            },
+                            onpointermove: (e) => {
+                                if (!pointer || e.pointerId !== pointer.id) {
+                                    return;
+                                }
+
+                                let element = e.currentTarget as HTMLElement;
+
+                                if (!pointer.active) {
+                                    if (Math.abs(e.clientY - pointer.start) < THRESHOLD) {
+                                        return;
+                                    }
+
+                                    let limit = parseFloat(getComputedStyle(element).paddingBottom) || 0,
+                                        parent = element.offsetParent;
+
+                                    // Grabbing a sheet mid-transition continues from where it is drawn, not from its target.
+                                    pointer.active = true;
+                                    pointer.from = parent ? element.getBoundingClientRect().top - parent.getBoundingClientRect().top - element.offsetTop : 0;
+                                    pointer.height = element.offsetHeight - limit;
+                                    pointer.limit = limit;
+                                    pointer.start = e.clientY;
+                                    pointer.y = pointer.from;
+
+                                    element.setPointerCapture(e.pointerId);
+                                    drag.index = index;
+                                }
+
+                                let y = rubberband(pointer.from + e.clientY - pointer.start, pointer.limit),
+                                    elapsed = e.timeStamp - pointer.time;
+
+                                if (elapsed > 0) {
+                                    pointer.velocity = (y - pointer.y) / elapsed * 1000;
+                                }
+
+                                pointer.time = e.timeStamp;
+                                pointer.y = y;
+
+                                drag.progress = Math.min(Math.max(1 - y / pointer.height, 0), 1);
+                                drag.y = y;
+                            },
+                            onpointerup: release,
+                            style: () => `--covered: ${covered(index + 1)}; --index: ${index}; --offset: ${drag.index === index ? drag.y : 0}px;`
+                        }}
+                    >
+                        <div aria-hidden='true' class='stacked-drawer-handle'></div>
+                        ${content}
+                    </div>
+                `)}
+            </div>
+        `;
+    }
+);

package/src/components/stacked-drawer/scss/index.scss

@@ -0,0 +1,122 @@
+@use '/lib';
+@use '/tokens';
+@use 'variables';
+
+.stacked-drawer {
+    background: var(--background);
+    border-radius: var(--border-radius);
+    height: var(--height);
+    isolation: isolate;
+    max-width: 100%;
+    overflow: hidden;
+    position: relative;
+    width: var(--width);
+
+
+    // Following the finger: the layer below tracks the drag too, so neither may ease.
+    &.--dragging {
+        cursor: grabbing;
+
+        .stacked-drawer-page,
+        .stacked-drawer-sheet {
+            transition: none;
+
+            &::after {
+                transition: none;
+            }
+        }
+    }
+
+
+    &-handle {
+        background: var(--handle-color);
+        border-radius: 9999px;
+        flex-shrink: 0;
+        height: 6px;
+        margin: 10px auto 0;
+        width: 44px;
+    }
+
+    // '--covered' is how far the layer above has opened, from 0 to 1.
+    &-page,
+    &-sheet {
+        --duration-covered: var(--duration-close);
+
+        display: flex;
+        flex-direction: column;
+        scale: calc(1 - var(--covered) * (1 - var(--scale)));
+        transform-origin: top;
+
+        &::after {
+            @include lib.position(absolute, full);
+            background: var(--dim-color);
+            border-radius: inherit;
+            content: '';
+            opacity: calc(var(--covered) * var(--dim));
+            pointer-events: none;
+            transition: opacity var(--duration-covered) var(--timing-function);
+        }
+
+        &.--covered {
+            --duration-covered: var(--duration-open);
+        }
+    }
+
+    &-page {
+        @include lib.position(absolute, full);
+        background: var(--page-background);
+        border-radius: inherit;
+        transition:
+            scale var(--duration-covered) var(--timing-function),
+            translate var(--duration-covered) var(--timing-function);
+        translate: 0 calc(var(--covered) * var(--peek));
+    }
+
+    // Extends past the bottom edge by '--overscroll' so an upward drag never reveals a gap beneath it.
+    &-sheet {
+        --duration-translate: var(--duration-close);
+
+        background: var(--sheet-background);
+        border-radius: var(--sheet-border-radius) var(--sheet-border-radius) 0 0;
+        box-shadow: var(--sheet-box-shadow);
+        inset: calc(var(--inset) + (var(--peek) * var(--index))) 0 calc(var(--overscroll) * -1) 0;
+        outline: none;
+        padding-bottom: var(--overscroll);
+        position: absolute;
+        touch-action: none;
+        transition:
+            scale var(--duration-covered) var(--timing-function),
+            translate var(--duration-translate) var(--timing-function);
+        translate: 0 100%;
+        user-select: none;
+
+        @include tokens.state(active) {
+            --duration-translate: var(--duration-open);
+
+            translate: 0 var(--offset);
+
+            &:not(.--covered) {
+                cursor: grab;
+            }
+        }
+    }
+
+
+    @media (prefers-reduced-motion: reduce) {
+        &-page,
+        &-sheet {
+            scale: none;
+            translate: none;
+        }
+
+        &-sheet {
+            opacity: 0;
+            transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1);
+            translate: 0 var(--offset);
+
+            @include tokens.state(active) {
+                opacity: 1;
+            }
+        }
+    }
+}

package/src/components/stacked-drawer/scss/variables.scss

@@ -0,0 +1,20 @@
+.stacked-drawer {
+    --background: var(--color-border-400);
+    --border-radius: 40px;
+    --dim: 0.2;
+    --dim-color: var(--color-black-500);
+    --duration-close: 0.32s;
+    --duration-open: 0.45s;
+    --handle-color: var(--color-border-400);
+    --height: 100%;
+    --inset: 40px;
+    --overscroll: 36px;
+    --page-background: var(--color-grey-300);
+    --peek: 18px;
+    --scale: 0.94;
+    --sheet-background: var(--color-white-300);
+    --sheet-border-radius: 28px;
+    --sheet-box-shadow: var(--box-shadow-400);
+    --timing-function: cubic-bezier(0.32, 0.72, 0, 1);
+    --width: 100%;
+}