@esportsplus/ui 0.56.3 → 0.57.0

package/src/components/sparkline/index.ts

@@ -1,234 +0,0 @@
-import { html, type Attributes } from '@esportsplus/template';
-import { reactive } from '@esportsplus/reactivity';
-import './scss/index.scss';
-
-
-type A = Attributes & {
-    [SPARKLINE_PLOT]?: Attributes;
-    data: Point[];
-    format?: (value: number) => string;
-    state?: State;
-    title: string;
-};
-
-type Point = {
-    label: string;
-    value: number;
-};
-
-type State = {
-    active: boolean;
-    index: number;
-};
-
-
-const HEIGHT = 160;
-
-const KEYS: Record<string, (index: number, last: number) => number> = {
-    ArrowLeft: (index) => index - 1,
-    ArrowRight: (index) => index + 1,
-    End: (_, last) => last,
-    Home: () => 0
-};
-
-// Room for the scrub dot and its ring at the extremes.
-const PAD_X = 8;
-
-const PAD_Y = 10;
-
-const SPARKLINE_PLOT = Symbol.for('@esportsplus/ui/sparkline.plot');
-
-// Keeps the tooltip inside the chart near either edge.
-const TIP_INSET = 72;
-
-const WIDTH = 520;
-
-
-function percent(value: number, of: number) {
-    return `${(value / of) * 100}%`;
-}
-
-
-function template(this: { attributes?: Partial<A> } | void, { data, format = String, state = reactive({ active: false, index: data.length - 1 }), title, ...attributes }: A) {
-    let first = data[0],
-        last = data[data.length - 1],
-        max = -Infinity,
-        min = Infinity,
-        observer: IntersectionObserver | undefined,
-        plot: HTMLElement | undefined,
-        view = reactive({ announcement: '', shown: false });
-
-    for (let i = 0, n = data.length; i < n; i++) {
-        max = Math.max(max, data[i].value);
-        min = Math.min(min, data[i].value);
-    }
-
-    let delta = last.value - first.value,
-        span = max - min || 1,
-        step = (WIDTH - PAD_X * 2) / Math.max(data.length - 1, 1);
-
-    function describe(index: number) {
-        return `${data[index].label}: ${format(data[index].value)}`;
-    }
-
-    function nearest(clientX: number) {
-        if (!plot) {
-            return state.index;
-        }
-
-        let box = plot.getBoundingClientRect(),
-            x = ((clientX - box.left) / box.width) * WIDTH;
-
-        return Math.min(Math.max(Math.round((x - PAD_X) / step), 0), data.length - 1);
-    }
-
-    function x(index: number) {
-        return PAD_X + index * step;
-    }
-
-    function y(value: number) {
-        return PAD_Y + (1 - (value - min) / span) * (HEIGHT - PAD_Y * 2);
-    }
-
-    let line = data.map((point, i) => `${i ? 'L' : 'M'}${x(i).toFixed(1)} ${y(point.value).toFixed(1)}`).join(' '),
-        area = `${line} L${x(data.length - 1)} ${HEIGHT} L${x(0)} ${HEIGHT} Z`;
-
-    return html`
-        <div class='sparkline' ${this?.attributes} ${attributes}>
-            <div class='sparkline-header'>
-                <div>
-                    <div class='sparkline-title'>${title}</div>
-                    <div class='sparkline-value'>${format(last.value)}</div>
-                </div>
-                <div class='sparkline-delta'>
-                    <span class='sparkline-delta-value'>${`${delta > 0 ? '+' : delta < 0 ? '-' : ''}${format(Math.abs(delta))}`}</span>
-                    vs ${first.label}
-                </div>
-            </div>
-
-            <div
-                aria-roledescription='line chart'
-                class='sparkline-plot'
-                role='group'
-                tabindex='0'
-                ${this?.attributes?.[SPARKLINE_PLOT]}
-                ${attributes[SPARKLINE_PLOT]}
-                ${{
-                    'aria-label': `${title}, ${data.length} points. Use arrow keys to read values.`,
-                    class: () => `${state.active ? '--active' : ''} ${view.shown ? '--shown' : ''}`,
-                    onblur: () => {
-                        state.active = false;
-                    },
-                    onconnect: (element: HTMLElement) => {
-                        plot = element;
-                        observer = new IntersectionObserver((entries) => {
-                            if (!entries.some((entry) => entry.isIntersecting)) {
-                                return;
-                            }
-
-                            observer?.disconnect();
-                            view.shown = true;
-                        });
-                        observer.observe(element);
-                    },
-                    ondisconnect: () => {
-                        observer?.disconnect();
-                    },
-                    onfocus: () => {
-                        state.active = true;
-                        view.announcement = describe(state.index);
-                    },
-                    onkeydown: (e: KeyboardEvent) => {
-                        let key = KEYS[e.key];
-
-                        if (!key) {
-                            return;
-                        }
-
-                        e.preventDefault();
-
-                        let index = Math.min(Math.max(key(state.index, data.length - 1), 0), data.length - 1);
-
-                        state.active = true;
-                        state.index = index;
-                        view.announcement = describe(index);
-                    },
-                    onpointercancel: () => {
-                        state.active = false;
-                    },
-                    onpointerdown: (e: PointerEvent) => {
-                        if (e.pointerType !== 'touch') {
-                            return;
-                        }
-
-                        state.index = nearest(e.clientX);
-                        state.active = true;
-                    },
-                    onpointerleave: (e: PointerEvent) => {
-                        if (e.pointerType !== 'touch') {
-                            state.active = false;
-                        }
-                    },
-                    onpointermove: (e: PointerEvent) => {
-                        if (e.pointerType === 'touch' && !state.active) {
-                            return;
-                        }
-
-                        state.index = nearest(e.clientX);
-                        state.active = true;
-                    },
-                    onpointerup: (e: PointerEvent) => {
-                        if (e.pointerType === 'touch') {
-                            state.active = false;
-                        }
-                    }
-                }}
-            >
-                <svg aria-hidden='true' class='sparkline-svg' viewBox='0 0 ${WIDTH} ${HEIGHT}'>
-                    <path class='sparkline-area' d='${area}' />
-                    <path class='sparkline-line' d='${line}' fill='none' pathLength='1' />
-                </svg>
-
-                <div aria-hidden='true' class='sparkline-overlay'>
-                    <div class='sparkline-cursor' style='${() => `left: ${percent(x(state.index), WIDTH)}`}'></div>
-                    <div
-                        class='sparkline-dot'
-                        style='${() => `left: ${percent(x(state.index), WIDTH)}; top: ${percent(y(data[state.index].value), HEIGHT)}`}'
-                    ></div>
-                    <div
-                        class='sparkline-tip'
-                        style='${() => `left: ${percent(Math.min(Math.max(x(state.index), TIP_INSET), WIDTH - TIP_INSET), WIDTH)}`}'
-                    >
-                        <span class='sparkline-tip-value'>${() => format(data[state.index].value)}</span>
-                        <span class='sparkline-tip-label'>${() => data[state.index].label}</span>
-                    </div>
-                </div>
-            </div>
-
-            <span aria-live='polite' class='sparkline-sr'>${() => view.announcement}</span>
-            <div class='sparkline-sr'>
-                <table>
-                    <caption>${title}</caption>
-                    <thead>
-                        <tr>
-                            <th scope='col'>Day</th>
-                            <th scope='col'>Value</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        ${data.map((point) => html`
-                            <tr>
-                                <th scope='row'>${point.label}</th>
-                                <td>${format(point.value)}</td>
-                            </tr>
-                        `)}
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    `;
-}
-
-
-export default Object.assign(template, { plot: SPARKLINE_PLOT } as const);
-export type { Point as SparklinePoint, State as SparklineState };

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

@@ -1,169 +0,0 @@
-@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

@@ -1,30 +0,0 @@
-.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

@@ -1,272 +0,0 @@
-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>
-        `;
-    }
-);