@esportsplus/ui 0.55.0 → 0.56.2

package/src/components/log/scss/index.scss

@@ -0,0 +1,269 @@
+@use 'variables';
+
+// Registered so the reveal's bottom fade can be interpolated.
+@property --log-fade {
+    inherits: false;
+    initial-value: 0px;
+    syntax: '<length>';
+}
+
+.log {
+    color: var(--text-secondary);
+    font-size: var(--font-size);
+    width: 100%;
+
+    button {
+        background: none;
+        border: 0;
+        color: inherit;
+        cursor: pointer;
+        font: inherit;
+        margin: 0;
+        padding: 0;
+        text-align: start;
+    }
+
+    ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+}
+
+
+.log-bridge {
+    background: var(--guide-color);
+    height: var(--height);
+    left: var(--offset);
+    pointer-events: none;
+    position: absolute;
+    scale: 1 0;
+    top: calc(var(--height) * -1);
+    transform-origin: top;
+    transition: scale 0.12s linear;
+    width: 1px;
+
+    &.--active {
+        scale: 1;
+    }
+}
+
+.log-chevron {
+    color: var(--text-tertiary);
+    flex-shrink: 0;
+    height: 16px;
+    transition: color 0.15s ease, rotate 0.3s ease;
+    width: 16px;
+
+    [aria-expanded='true'] > & {
+        rotate: 180deg;
+    }
+
+    :hover > & {
+        color: var(--text-secondary);
+    }
+}
+
+.log-guide {
+    color: var(--guide-color);
+    inset-block: 0;
+    inset-inline-start: 0;
+    pointer-events: none;
+    position: absolute;
+    width: 12px;
+
+    svg {
+        inset-inline-start: 0;
+        position: absolute;
+        top: 0;
+    }
+
+    path {
+        stroke-dasharray: 1;
+        stroke-dashoffset: 1;
+        transition: stroke-dashoffset 0.14s linear 0.12s;
+    }
+
+    &-line {
+        background: currentColor;
+        bottom: 0;
+        inset-inline-start: 0;
+        position: absolute;
+        scale: 1 0;
+        top: 8px;
+        transform-origin: top;
+        transition: scale 0.12s linear;
+        width: 1px;
+    }
+}
+
+// Each row draws its curve; the line down to the next row only exists once that row has landed.
+.log-row {
+    padding-inline-start: 16px;
+    position: relative;
+
+    &:first-child .log-guide path {
+        transition-delay: 0s;
+    }
+
+    &.--active .log-guide path {
+        stroke-dashoffset: 0;
+    }
+
+    &.--active:has(+ .log-row.--active) .log-guide-line {
+        scale: 1;
+    }
+}
+
+.log-shimmer {
+    animation: log-shimmer 3.4s linear infinite;
+    background-clip: text;
+    background-image: linear-gradient(
+        100deg,
+        var(--shimmer-color) 16%,
+        var(--shimmer-color) 38%,
+        var(--shimmer-highlight) 50%,
+        var(--shimmer-color) 62%,
+        var(--shimmer-color) 84%
+    );
+    background-position: 200%;
+    background-size: 300% 100%;
+    color: transparent;
+    will-change: background-position;
+}
+
+.log-unit {
+    --log-fade: 22px;
+
+    display: grid;
+    filter: blur(6px);
+    grid-template-rows: 0fr;
+    mask-image: linear-gradient(to bottom, #000 calc(100% - var(--log-fade)), transparent calc(100% + 1px));
+    opacity: 0;
+    overflow: hidden;
+    transition:
+        --log-fade 0.44s var(--soft),
+        filter 0.42s var(--soft),
+        grid-template-rows 0.38s var(--soft),
+        opacity 0.42s var(--soft),
+        translate 0.42s var(--soft);
+    translate: 0 4px;
+
+    &.--active {
+        --log-fade: 0px;
+
+        filter: blur(0);
+        grid-template-rows: 1fr;
+        opacity: 1;
+        translate: 0;
+    }
+
+    &-content {
+        min-height: 0;
+        min-width: 0;
+    }
+}
+
+.log-working {
+    color: var(--working-color);
+
+    &-content {
+        align-items: center;
+        display: flex;
+        gap: 10px;
+        padding-block: 4px;
+    }
+
+    &-label {
+        animation: log-shimmer 2.6s linear infinite;
+        background-clip: text;
+        background-image: linear-gradient(
+            100deg,
+            color-mix(in oklab, var(--working-color) 55%, transparent) 30%,
+            var(--working-color) 50%,
+            color-mix(in oklab, var(--working-color) 55%, transparent) 70%
+        );
+        background-position: 200%;
+        background-size: 300% 100%;
+        color: transparent;
+        font-weight: var(--font-weight-500);
+        will-change: background-position;
+    }
+
+    &-star {
+        animation: log-star 1.4s ease-in-out var(--delay) infinite;
+        height: var(--size);
+        margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
+        position: absolute;
+        scale: 0;
+        width: var(--size);
+    }
+
+    &-stars {
+        color: color-mix(in oklab, currentColor 75%, transparent);
+        display: block;
+        flex-shrink: 0;
+        height: 21px;
+        position: relative;
+        width: 21px;
+    }
+
+    &-timer {
+        color: var(--text-tertiary);
+        font-family: var(--font-family-mono);
+        font-size: var(--font-size-small);
+        font-variant-numeric: tabular-nums;
+    }
+}
+
+
+@media (prefers-reduced-motion: reduce) {
+    .log-bridge,
+    .log-chevron,
+    .log-guide path,
+    .log-guide-line,
+    .log-unit {
+        transition: none;
+    }
+
+    .log-shimmer,
+    .log-working-label {
+        animation: none;
+        background: none;
+        color: inherit;
+    }
+
+    .log-working-star {
+        animation: none;
+        opacity: 0.7;
+        scale: 1;
+    }
+}
+
+
+@keyframes log-shimmer {
+    0% {
+        background-position: 200%;
+    }
+
+    100% {
+        background-position: -100%;
+    }
+}
+
+@keyframes log-star {
+    0%, 100% {
+        opacity: 0;
+        scale: 0;
+    }
+
+    40% {
+        opacity: 1;
+        scale: 1;
+    }
+
+    60% {
+        opacity: 0.9;
+        scale: 0.8;
+    }
+}

package/src/components/log/scss/variables.scss

@@ -0,0 +1,19 @@
+.log {
+    --font-family-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
+    --font-size: var(--font-size-300);
+    --font-size-small: var(--font-size-200);
+    --guide-color: var(--color-border-400);
+    --shimmer-color: var(--color-text-400);
+    --shimmer-highlight: var(--color-text-500);
+    --soft: cubic-bezier(0.22, 1, 0.36, 1);
+    --text-primary: var(--color-text-500);
+    --text-secondary: var(--color-text-400);
+    --text-tertiary: var(--color-text-300);
+    --working-color: var(--color-text-300);
+
+    // Rows are drawn on a 20px line (at 14px type); the guide curves assume it.
+    &,
+    * {
+        --line-height: calc(20 / 14);
+    }
+}

package/src/components/long-press/bind.ts

@@ -0,0 +1,159 @@
+import { reactive } from '@esportsplus/reactivity';
+import type { Attributes } from '@esportsplus/template';
+
+
+type LongPress = {
+    attributes: Attributes<HTMLElement>;
+    state: { fired: boolean; holding: boolean; step: number };
+    steps: number;
+};
+
+type Options = {
+    disabled?: boolean;
+    duration?: number;
+    haptic?: boolean;
+    moveTolerance?: number;
+    onlongpress: VoidFunction;
+    onlongpresscancel?: VoidFunction;
+    steps?: number;
+};
+
+
+// Hold on the filled state briefly so the confirmation registers before resetting.
+const SETTLE = 260;
+
+
+export default ({ disabled = false, duration = 550, haptic = true, moveTolerance = 8, onlongpress, onlongpresscancel, steps = 12 }: Options): LongPress => {
+    let cells = Math.max(1, Math.round(steps)),
+        frame = 0,
+        origin: { x: number; y: number } | null = null,
+        phase: 'fired' | 'holding' | 'idle' = 'idle',
+        settle: ReturnType<typeof setTimeout> | undefined,
+        startedAt = 0,
+        state = reactive({ fired: false, holding: false, step: 0 });
+
+    function begin(point?: { x: number; y: number }) {
+        if (disabled || phase !== 'idle') {
+            return;
+        }
+
+        phase = 'holding';
+        origin = point ?? null;
+        startedAt = performance.now();
+        state.holding = true;
+        state.step = 0;
+
+        frame = requestAnimationFrame(tick);
+    }
+
+    function end() {
+        if (phase !== 'holding') {
+            return;
+        }
+
+        reset();
+        onlongpresscancel?.();
+    }
+
+    function reset() {
+        cancelAnimationFrame(frame);
+        clearTimeout(settle);
+
+        frame = 0;
+        origin = null;
+        phase = 'idle';
+        state.fired = false;
+        state.holding = false;
+        state.step = 0;
+    }
+
+    function tick(now: number) {
+        let progress = Math.min(1, (now - startedAt) / duration),
+            step = Math.floor(progress * cells);
+
+        if (state.step !== step) {
+            state.step = step;
+        }
+
+        if (progress < 1) {
+            frame = requestAnimationFrame(tick);
+            return;
+        }
+
+        frame = 0;
+        phase = 'fired';
+        state.fired = true;
+        state.holding = false;
+        state.step = cells;
+
+        if (haptic) {
+            navigator.vibrate?.(12);
+        }
+
+        onlongpress();
+
+        settle = setTimeout(() => {
+            if (phase === 'fired') {
+                reset();
+            }
+        }, SETTLE);
+    }
+
+    return {
+        attributes: {
+            onblur: end,
+            // Swallow the click that trails a completed hold so it can't double-fire a parent handler.
+            onclick: (e: MouseEvent) => {
+                if (phase === 'fired') {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+            },
+            oncontextmenu: (e: MouseEvent) => e.preventDefault(),
+            ondisconnect: reset,
+            ondocumentvisibilitychange: () => {
+                if (document.hidden) {
+                    end();
+                }
+            },
+            onkeydown: (e: KeyboardEvent) => {
+                if (e.repeat) {
+                    return;
+                }
+
+                if (e.key === ' ' || e.key === 'Enter') {
+                    e.preventDefault();
+                    begin();
+                }
+            },
+            onkeyup: (e: KeyboardEvent) => {
+                if (e.key === ' ' || e.key === 'Enter' || e.key === 'Escape') {
+                    end();
+                }
+            },
+            onpointercancel: end,
+            onpointerdown: (e: PointerEvent) => {
+                if (e.button !== 0 && e.pointerType === 'mouse') {
+                    return;
+                }
+
+                (e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId);
+                begin({ x: e.clientX, y: e.clientY });
+            },
+            onpointerleave: end,
+            onpointermove: (e: PointerEvent) => {
+                if (phase !== 'holding' || !origin) {
+                    return;
+                }
+
+                if (Math.hypot(e.clientX - origin.x, e.clientY - origin.y) > moveTolerance) {
+                    end();
+                }
+            },
+            onpointerup: end,
+            onwindowblur: end
+        },
+        state,
+        steps: cells
+    };
+};

package/src/components/long-press/button.ts

@@ -0,0 +1,46 @@
+import { component, html, type Attributes } from '@esportsplus/template';
+import bind from './bind';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    disabled?: boolean;
+    duration?: number;
+    onlongpress: VoidFunction;
+    onlongpresscancel?: VoidFunction;
+    steps?: number;
+};
+
+
+let uid = 0;
+
+
+export default component<A, string>(
+    ({ disabled = false, duration = 550, onlongpress, onlongpresscancel, steps = 12, ...attributes }, label) => {
+        let id = `long-press-${++uid}`,
+            press = bind({ disabled, duration, onlongpress, onlongpresscancel, steps });
+
+        // The fill layer duplicates the label, so the accessible name points at the base layer only.
+        return html`
+            <button
+                aria-describedby='${id}-hint'
+                aria-disabled='${disabled}'
+                aria-labelledby='${id}-label'
+                class='button long-press'
+                data-state='${() => press.state.fired ? 'fired' : press.state.holding ? 'holding' : 'idle'}'
+                style='${() => `--progress: ${press.state.step / press.steps}`}'
+                type='button'
+                ${attributes}
+                ${press.attributes}
+            >
+                <span class='long-press-label'>
+                    <span class='long-press-label-base' id='${id}-label'>${label}</span>
+                    <span aria-hidden='true' class='long-press-label-fill'>${label}</span>
+                </span>
+                <span class='long-press-hint' id='${id}-hint'>
+                    Press and hold for ${Math.round(duration / 100) / 10} seconds to confirm
+                </span>
+            </button>
+        `;
+    }
+);

package/src/components/long-press/index.ts

@@ -0,0 +1,6 @@
+import bind from './bind';
+import button from './button';
+
+
+export default { bind, button };
+export { bind, button };

package/src/components/long-press/scss/index.scss

@@ -0,0 +1,60 @@
+@use 'variables';
+
+.long-press {
+    -webkit-touch-callout: none;
+    touch-action: manipulation;
+    user-select: none;
+
+    &-hint {
+        clip-path: inset(50%);
+        height: 1px;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+    }
+
+    &-label {
+        display: grid;
+
+        > * {
+            grid-area: 1 / 1;
+            white-space: nowrap;
+        }
+
+        &-fill {
+            clip-path: inset(0 calc((1 - var(--progress)) * 100%) 0 0);
+            color: var(--fill-color);
+            transition: clip-path var(--progress-duration) var(--progress-timing-function);
+        }
+    }
+
+    &[aria-disabled='true'] {
+        cursor: not-allowed;
+        opacity: 0.5;
+    }
+
+    &[data-state='fired'] {
+        animation: long-press--pop var(--pop-duration) var(--pop-timing-function);
+    }
+
+    &[data-state='holding'] {
+        translate: 0 1px;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &[data-state='fired'] {
+            animation: none;
+        }
+
+        &-label-fill {
+            transition: none;
+        }
+    }
+}
+
+@keyframes long-press--pop {
+    50% {
+        scale: var(--pop-scale);
+    }
+}

package/src/components/long-press/scss/variables.scss

@@ -0,0 +1,9 @@
+.long-press {
+    --fill-color: var(--color-primary-400);
+    --pop-duration: 0.32s;
+    --pop-scale: 1.045;
+    --pop-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --progress: 0;
+    --progress-duration: 0.18s;
+    --progress-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+}