@esportsplus/ui 0.55.0 → 0.56.3

package/src/components/lightbox/scss/index.scss

@@ -0,0 +1,194 @@
+@use '/lib';
+@use '/tokens';
+@use 'variables';
+
+.lightbox {
+    @include tokens.state(active) {
+        .lightbox {
+            &-chrome {
+                opacity: 1;
+                transition: opacity 0.4s var(--ease);
+            }
+
+            &-veil {
+                opacity: 1;
+                transition: opacity 0.4s var(--ease);
+            }
+        }
+    }
+
+
+    &-actions {
+        align-items: center;
+        display: flex;
+        gap: 8px;
+        pointer-events: auto;
+    }
+
+    &-assistive {
+        clip-path: inset(50%);
+        height: 1px;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+    }
+
+    &-button {
+        background: var(--button-background);
+        border: 1px solid var(--button-border-color);
+        border-radius: var(--button-radius);
+        color: var(--button-color);
+        cursor: pointer;
+        display: grid;
+        height: var(--button-size);
+        outline: none;
+        padding: 0;
+        place-items: center;
+        transition:
+            border-color 0.15s ease,
+            box-shadow 0.15s ease,
+            color 0.15s ease;
+        width: var(--button-size);
+
+        &-plus {
+            transition: opacity 0.15s ease;
+        }
+
+        &.--zoomed &-plus {
+            opacity: 0;
+        }
+
+        &:focus-visible {
+            border-color: var(--focus-color);
+            box-shadow: 0 10px 20px -14px var(--focus-color);
+        }
+
+        &:hover {
+            border-color: var(--button-border-color-hover);
+            color: var(--button-color-hover);
+        }
+
+        svg {
+            fill: none;
+            height: 15px;
+            stroke: currentColor;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+            stroke-width: 16;
+            width: 15px;
+        }
+    }
+
+    &-caption {
+        background: var(--button-background);
+        border: 1px solid var(--button-border-color);
+        border-radius: var(--button-radius);
+        color: var(--button-color-hover);
+        font-size: var(--caption-font-size);
+        margin: 0;
+        max-width: 65%;
+        overflow: hidden;
+        padding: 6px 10px;
+        pointer-events: auto;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        width: auto;
+    }
+
+    &-chrome {
+        @include lib.position(absolute, full);
+        align-items: flex-start;
+        display: flex;
+        gap: 12px;
+        justify-content: space-between;
+        opacity: 0;
+        padding: var(--chrome-padding);
+        pointer-events: none;
+        transition: opacity 0.2s var(--exit-timing-function);
+    }
+
+    &-frame {
+        @include lib.position(absolute, full);
+        -webkit-touch-callout: none;
+        cursor: zoom-in;
+        outline: none;
+        overflow: hidden;
+        touch-action: none;
+        user-select: none;
+
+        &.--zoomed {
+            cursor: grab;
+
+            &:active {
+                cursor: grabbing;
+            }
+        }
+
+        &:focus-visible {
+            box-shadow: inset 0 0 0 1px var(--focus-color);
+        }
+    }
+
+    // Both axes auto so the max caps scale the box proportionally; the attributes' own size would
+    // distort it, leaving the rounded corners outside the letterboxed picture.
+    &-image {
+        height: auto;
+        max-height: 100%;
+        max-width: 100%;
+        width: auto;
+    }
+
+    &-stage {
+        @include lib.position(absolute, full);
+        align-items: center;
+        display: flex;
+        filter: blur(4px);
+        justify-content: center;
+        padding: var(--padding);
+        transition: filter 0.5s var(--ease);
+
+        @include tokens.state(active) {
+            filter: blur(0px);
+            transition: filter 0.35s var(--ease);
+        }
+    }
+
+    &-veil {
+        @include lib.position(absolute, full);
+        background: var(--backdrop);
+        opacity: 0;
+        transition: opacity 0.3s var(--ease);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &-button-plus,
+        &-chrome,
+        &-stage,
+        &-veil {
+            transition: none !important;
+        }
+    }
+}
+
+// Zero specificity so the UA dialog reset stays overridable.
+:where(dialog.lightbox) {
+    background: transparent;
+    border: 0;
+    color: inherit;
+    height: 100%;
+    margin: 0;
+    max-height: 100%;
+    max-width: 100%;
+    overflow: hidden;
+    padding: 0;
+    width: 100%;
+}
+
+dialog.lightbox {
+    @include lib.position(fixed, full);
+
+    &::backdrop {
+        background: transparent;
+    }
+}

package/src/components/lightbox/scss/variables.scss

@@ -0,0 +1,24 @@
+@use '/lib';
+
+.lightbox {
+    --backdrop: color-mix(in srgb, var(--color-black-500) 80%, transparent);
+    --border-radius: 14px;
+    --button-background: var(--color-white-300);
+    --button-border-color: var(--color-border-300);
+    --button-border-color-hover: var(--color-border-400);
+    --button-color: var(--color-text-300);
+    --button-color-hover: var(--color-text-500);
+    --button-radius: 9px;
+    --button-size: 32px;
+    --caption-font-size: 12.5px;
+    --chrome-padding: 12px;
+    --ease: cubic-bezier(0.23, 1, 0.32, 1);
+    --exit-timing-function: cubic-bezier(0.4, 0, 1, 1);
+    --focus-color: var(--color-blue-300);
+    --padding: 16px;
+
+    @include lib.breakpoint(min-width, 639px) {
+        --chrome-padding: 16px;
+        --padding: 56px;
+    }
+}

package/src/components/lightbox/spring.ts

@@ -0,0 +1,118 @@
+type Motion = {
+    done?: VoidFunction;
+    precision: number;
+    spring: Spring;
+    target: number;
+    value: number;
+    velocity: number;
+};
+
+type Spring = {
+    damping: number;
+    mass: number;
+    stiffness: number;
+};
+
+type Value = {
+    get: () => number;
+    set: (value: number) => void;
+    to: (target: number, spring: Spring) => Promise<void>;
+};
+
+
+// Fixed substep keeps stiff springs stable regardless of the display's frame rate.
+const STEP = 1 / 240;
+
+
+// Integrates every running value in one frame, then calls 'paint' once so writes are batched.
+function animator(paint: VoidFunction) {
+    let frame = 0,
+        last = 0,
+        running = new Set<Motion>();
+
+    function request() {
+        if (frame) {
+            return;
+        }
+
+        last = performance.now();
+        frame = requestAnimationFrame(tick);
+    }
+
+    function settle(motion: Motion) {
+        let done = motion.done;
+
+        motion.done = undefined;
+        motion.velocity = 0;
+        running.delete(motion);
+        done?.();
+    }
+
+    function tick(now: number) {
+        // Clamped so a backgrounded tab resumes where it left off instead of jumping.
+        let dt = Math.min(Math.max(0, (now - last) / 1000), 1 / 15);
+
+        last = now;
+
+        for (let motion of running) {
+            let { damping, mass, stiffness } = motion.spring;
+
+            for (let t = 0; t < dt; t += STEP) {
+                let h = Math.min(STEP, dt - t);
+
+                motion.velocity += ((-stiffness * (motion.value - motion.target) - damping * motion.velocity) / mass) * h;
+                motion.value += motion.velocity * h;
+            }
+
+            if (Math.abs(motion.value - motion.target) < motion.precision && Math.abs(motion.velocity) < motion.precision * 10) {
+                motion.value = motion.target;
+                settle(motion);
+            }
+        }
+
+        paint();
+        frame = running.size ? requestAnimationFrame(tick) : 0;
+    }
+
+    return {
+        stop: () => {
+            cancelAnimationFrame(frame);
+            frame = 0;
+
+            for (let motion of running) {
+                settle(motion);
+            }
+        },
+        value: (initial: number, precision: number): Value => {
+            let motion: Motion = {
+                    precision,
+                    spring: { damping: 1, mass: 1, stiffness: 1 },
+                    target: initial,
+                    value: initial,
+                    velocity: 0
+                };
+
+            return {
+                get: () => motion.value,
+                set: (value) => {
+                    motion.target = motion.value = value;
+                    settle(motion);
+                    request();
+                },
+                // Retargeting keeps the current velocity, so interrupted motion carries its momentum.
+                to: (target, spring) => new Promise((resolve) => {
+                    motion.done?.();
+                    motion.done = resolve;
+                    motion.spring = spring;
+                    motion.target = target;
+                    running.add(motion);
+                    request();
+                })
+            };
+        }
+    };
+}
+
+
+export { animator };
+export type { Spring, Value };

package/src/components/line-shadow-text/index.ts

@@ -0,0 +1,24 @@
+import { component, html, type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    color?: string;
+};
+
+
+export default component<A, string>(
+    function(this, { color, ...attributes }, content) {
+        return html`
+            <span
+                class='line-shadow-text'
+                data-text='${content}'
+                style='${color ? `--shadow-color: ${color}` : ''}'
+                ${this?.attributes}
+                ${attributes}
+            >
+                ${content}
+            </span>
+        `;
+    }
+);

package/src/components/line-shadow-text/scss/index.scss

@@ -0,0 +1,45 @@
+@use 'variables';
+
+.line-shadow-text {
+    display: inline-flex;
+    position: relative;
+    z-index: 0;
+
+    // A copy of the text, nudged down-right and filled with fine diagonal hatching that drifts, like a printed drop
+    // shadow.
+    &::after {
+        animation: line-shadow-text var(--duration) linear infinite;
+        background-clip: text;
+        background-image: linear-gradient(
+            45deg,
+            transparent 45%,
+            var(--shadow-color) 45%,
+            var(--shadow-color) 55%,
+            transparent 0
+        );
+        background-size: var(--line-size) var(--line-size);
+        color: transparent;
+        content: attr(data-text);
+        left: var(--offset);
+        pointer-events: none;
+        position: absolute;
+        top: var(--offset);
+        z-index: -1;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &::after {
+            animation: none;
+        }
+    }
+}
+
+@keyframes line-shadow-text {
+    0% {
+        background-position: 0 0;
+    }
+
+    100% {
+        background-position: 100% -100%;
+    }
+}

package/src/components/line-shadow-text/scss/variables.scss

@@ -0,0 +1,6 @@
+.line-shadow-text {
+    --duration: 15s;
+    --line-size: 0.06em;
+    --offset: 0.04em;
+    --shadow-color: var(--color-text-500);
+}

package/src/components/link/scss/index.scss

@@ -10,9 +10,8 @@
     cursor: pointer;
     flex-wrap: wrap;
     justify-content: flex-start;
-    padding:
-        max(0px, calc(var(--padding-vertical) - var(--border-width)))
-        max(0px, calc(var(--padding-horizontal) - var(--border-width)));
+    padding-block: max(0px, calc(var(--padding-vertical) - var(--border-width)));
+    padding-inline: max(0px, calc(var(--padding-horizontal) - var(--border-width)));
     position: relative;
     transition:
         background var(--transition-duration) var(--transition-timing-function),

package/src/components/loading/index.ts

@@ -2,13 +2,6 @@ import { html, Attributes } from '@esportsplus/template';
 import './scss/index.scss';
 
 
-export default (attributes?: Attributes) => {
-    return html`
-        <div
-            class='loading --border-width-700 --size-800'
-            style='--border-color: var(--color-border-500);'
-            ${attributes}
-        >
-        </div>
-    `;
-};
+export default (attributes?: Attributes) => html`
+    <div class='loading' ${attributes}></div>
+`;

package/src/components/loading/scss/index.scss

@@ -2,18 +2,69 @@
 
 .loading {
     animation: loading var(--animation-duration) linear infinite;
-    border: var(--border-width) solid color-mix(in srgb, var(--border-color), transparent 90%);
+    border: var(--border-width) solid var(--track-color);
     border-left-color: var(--border-color);
     border-radius: 100%;
     height: var(--size);
     width: var(--size);
+
+
+    &--bar {
+        animation: none;
+        background: var(--track-color);
+        border: 0;
+        border-radius: var(--border-width);
+        height: var(--height);
+        overflow: hidden;
+        position: relative;
+        width: var(--width);
+
+        &::before {
+            animation: loading--bar var(--animation-duration) var(--timing-function) infinite;
+            background: var(--border-color);
+            border-radius: inherit;
+            content: '';
+            inset: 0 auto 0 0;
+            position: absolute;
+            width: 40%;
+        }
+    }
+
+    // Conic sweep from transparent to solid, masked down to a ring; the cap rounds the leading edge.
+    &--tail {
+        background: conic-gradient(transparent calc(360deg - var(--tail)), var(--border-color));
+        border: 0;
+        mask: radial-gradient(farthest-side, transparent calc(100% - var(--border-width)), #000 calc(100% - var(--border-width) + 0.5px));
+        position: relative;
+
+        &::after {
+            background: var(--border-color);
+            border-radius: 100%;
+            content: '';
+            height: var(--border-width);
+            left: 50%;
+            position: absolute;
+            top: 0;
+            translate: -50%;
+            width: var(--border-width);
+        }
+    }
 }
 
 @keyframes loading {
     0% {
-        transform: rotate(0deg)
+        rotate: 0deg;
     }
     100% {
-        transform: rotate(360deg)
+        rotate: 360deg;
     }
-}
+}
+
+@keyframes loading--bar {
+    0% {
+        translate: -100%;
+    }
+    100% {
+        translate: 250%;
+    }
+}

package/src/components/loading/scss/variables.scss

@@ -2,5 +2,19 @@
     --animation-duration: 0.64s;
     --border-color: var(--color);
     --border-width: var(--border-width-400);
+    --color: var(--color-black-400);
     --size: var(--size-400);
-}
+    --timing-function: cubic-bezier(0.5, 0, 0.5, 1);
+    --track-color: color-mix(in srgb, var(--border-color), transparent 90%);
+
+    &--bar {
+        --animation-duration: 0.8s;
+        --height: var(--border-width);
+        --width: 100%;
+    }
+
+    &--tail {
+        --animation-duration: 0.8s;
+        --tail: 120deg;
+    }
+}

package/src/components/log/index.ts

@@ -0,0 +1,156 @@
+import { effect, onCleanup, reactive, untrack } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+import './scss/index.scss';
+
+
+type Progress = { revealed: number };
+
+
+const STARS = [
+    { scale: 1, x: 50, y: 46 },
+    { scale: 0.55, x: 18, y: 22 },
+    { scale: 0.45, x: 82, y: 26 },
+    { scale: 0.55, x: 78, y: 76 },
+    { scale: 0.4, x: 22, y: 78 }
+];
+
+
+const bridge = (active: () => boolean, height: number, offset: number) => html`
+    <span
+        class='log-bridge ${() => active() && '--active'}'
+        aria-hidden='true'
+        style='--height: ${height}px; --offset: ${offset}px;'
+    ></span>
+`;
+
+const chevron = () => html`
+    <svg class='log-chevron' aria-hidden='true' viewBox='0 0 24 24'>
+        <path d='M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z' fill='currentColor' />
+    </svg>
+`;
+
+const guide = () => html`
+    <span class='log-guide' aria-hidden='true'>
+        <svg width='12' height='15' viewBox='0 0 12 15' fill='none'>
+            <path d='M0.5 0 V8 Q0.5 14 6.5 14 H11.5' pathLength='1' stroke='currentColor' stroke-width='1' />
+        </svg>
+        <span class='log-guide-line'></span>
+    </span>
+`;
+
+// Without `state` the log paces itself and holds one extra unit after the last
+// step, so the final step shimmers for a beat before the run completes. With
+// `state` the caller owns `revealed` and the run completes on the last unit.
+const progress = ({ delay, onComplete, state, units }: {
+    delay: (index: number) => number;
+    onComplete?: VoidFunction;
+    state?: Progress;
+    units: number;
+}) => {
+    let completed = false,
+        controlled = state !== undefined,
+        counter = state ?? reactive({ revealed: 0 }),
+        timer: ReturnType<typeof setTimeout> | undefined,
+        total = units + (controlled ? 0 : 1);
+
+    let revealed = () => Math.max(0, Math.min(counter.revealed, total)),
+        stop = effect(() => {
+            if (total === 0 || revealed() < total) {
+                completed = false;
+                return;
+            }
+
+            if (!completed) {
+                completed = true;
+                untrack(() => onComplete?.());
+            }
+        });
+
+    function advance() {
+        if (counter.revealed >= total) {
+            return;
+        }
+
+        timer = setTimeout(() => {
+            counter.revealed++;
+            advance();
+        }, delay(counter.revealed));
+    }
+
+    onCleanup(() => {
+        clearTimeout(timer);
+        stop();
+    });
+
+    return {
+        revealed,
+        start: () => {
+            if (controlled) {
+                return;
+            }
+
+            clearTimeout(timer);
+            advance();
+        },
+        total
+    };
+};
+
+const working = (label: string, active: () => boolean) => {
+    let clock = reactive({ elapsed: 0 }),
+        interval: ReturnType<typeof setInterval> | undefined;
+
+    let stop = effect(() => {
+        if (!active()) {
+            clearInterval(interval);
+            interval = undefined;
+            return;
+        }
+
+        if (interval !== undefined) {
+            return;
+        }
+
+        let start = performance.now();
+
+        clock.elapsed = 0;
+        interval = setInterval(() => {
+            clock.elapsed = (performance.now() - start) / 1000;
+        }, 100);
+    });
+
+    onCleanup(() => {
+        clearInterval(interval);
+        stop();
+    });
+
+    return html`
+        <div
+            class='log-unit log-working ${() => active() && '--active'}'
+            role='status'
+            ${{ inert: () => !active() }}
+        >
+            <div class='log-unit-content'>
+                <div class='log-working-content'>
+                    <span class='log-working-stars' aria-hidden='true'>
+                        ${STARS.map(({ scale, x, y }, i) => html`
+                            <svg
+                                class='log-working-star'
+                                viewBox='0 0 24 24'
+                                style='--delay: ${(1.4 * i * 0.7) / 5}s; --size: ${14 * scale}px; left: ${x}%; top: ${y}%;'
+                            >
+                                <path d='M12 0C13 7 17 11 24 12C17 13 13 17 12 24C11 17 7 13 0 12C7 11 11 7 12 0Z' fill='currentColor' />
+                            </svg>
+                        `)}
+                    </span>
+                    <span class='log-working-label'>${label}</span>
+                    <span class='log-working-timer'>${() => clock.elapsed.toFixed(1)}s</span>
+                </div>
+            </div>
+        </div>
+    `;
+};
+
+
+export { bridge, chevron, guide, progress, working };
+export type { Progress };