@esportsplus/ui 0.55.0 → 0.56.3

package/src/components/range-slider/scss/index.scss

@@ -0,0 +1,234 @@
+@use '/tokens';
+@use 'variables';
+
+.range-slider {
+    color: var(--color);
+    display: flex;
+    flex-direction: column;
+    font-size: var(--font-size);
+    gap: 12px;
+    width: var(--width);
+
+
+    &-dash {
+        background: var(--background);
+        flex-shrink: 0;
+        height: 1px;
+        width: 12px;
+    }
+
+    &-field {
+        align-items: center;
+        background: var(--field-background);
+        border-radius: var(--border-radius-400);
+        box-shadow: var(--box-shadow);
+        cursor: text;
+        display: flex;
+        flex: 1 1 0;
+        gap: 6px;
+        height: var(--field-height);
+        min-width: 0;
+        outline: 0 solid var(--focus-color);
+        outline-offset: 2px;
+        padding-inline: 12px;
+
+        &:has(:focus-visible) {
+            outline-width: 2px;
+        }
+
+        &-label {
+            color: var(--color-muted);
+        }
+
+        &-prefix {
+            color: var(--color-muted);
+            margin-inline-start: auto;
+        }
+
+        .range-slider-input {
+            --background-default: transparent;
+            --color-default: currentColor;
+            --font-size: inherit;
+            --padding-horizontal: 0px;
+            --padding-vertical: 0px;
+            flex: 0 1 64px;
+            font-variant-numeric: tabular-nums;
+            margin-inline-start: auto;
+            min-height: 0;
+            outline: none;
+            text-align: right;
+            width: 64px;
+        }
+
+        &-prefix + .range-slider-input {
+            margin-inline-start: 0;
+        }
+    }
+
+    &-fields {
+        align-items: center;
+        display: flex;
+        gap: 12px;
+    }
+
+    &-fill {
+        background: var(--fill);
+        height: 100%;
+        transform: translateX(calc(var(--low) * 100%)) scaleX(calc(var(--high) - var(--low)));
+        transform-origin: left;
+        transition: transform var(--glide-duration) var(--glide-timing-function);
+    }
+
+    &-handle {
+        inset: 0;
+        pointer-events: none;
+        position: absolute;
+        transition: translate var(--glide-duration) var(--glide-timing-function);
+        translate: calc(var(--position) * 100%) 0;
+
+        &--high {
+            --position: var(--high);
+        }
+
+        &--low {
+            --position: var(--low);
+        }
+
+        &.--raised {
+            z-index: 1;
+        }
+    }
+
+    &-header {
+        align-items: baseline;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    &-label {
+        font-weight: var(--font-weight-500);
+    }
+
+    &-rail {
+        background: var(--background);
+        border-radius: 999px;
+        height: var(--height);
+        inset-inline: 0;
+        overflow: hidden;
+        position: absolute;
+        top: 50%;
+        translate: 0 -50%;
+    }
+
+    &-summary {
+        color: var(--color-muted);
+        font-variant-numeric: tabular-nums;
+    }
+
+    &-thumb {
+        background: var(--thumb-background);
+        border-radius: 50%;
+        box-shadow: var(--box-shadow);
+        height: var(--thumb-size);
+        left: 0;
+        outline: 0 solid var(--focus-color);
+        outline-offset: 2px;
+        pointer-events: auto;
+        position: absolute;
+        top: 50%;
+        touch-action: none;
+        transition: scale 150ms ease-out;
+        translate: -50% -50%;
+        width: var(--thumb-size);
+
+        &::after,
+        &::before {
+            border-radius: 50%;
+            content: '';
+            position: absolute;
+        }
+
+        &::after {
+            inset: calc((var(--thumb-size) - var(--hit-size)) / 2);
+        }
+
+        &::before {
+            background: var(--thumb-dot);
+            inset: calc((var(--thumb-size) - var(--thumb-dot-size)) / 2);
+        }
+
+        &:focus-visible {
+            outline-width: 2px;
+        }
+
+        @include tokens.state(active) {
+            scale: var(--thumb-scale-active);
+        }
+    }
+
+    // In over 150ms, out in 100ms, so it never lingers behind the thumb.
+    &-tooltip {
+        background: var(--tooltip-background);
+        border-radius: 999px;
+        bottom: 100%;
+        color: var(--tooltip-color);
+        font-size: var(--font-size-300);
+        font-variant-numeric: tabular-nums;
+        font-weight: var(--font-weight-500);
+        left: 50%;
+        line-height: 1.33;
+        margin-bottom: var(--tooltip-offset);
+        opacity: 0;
+        padding: 4px 8px;
+        pointer-events: none;
+        position: absolute;
+        scale: 0.97;
+        transform-origin: bottom;
+        transition:
+            opacity 100ms var(--tooltip-ease),
+            scale 100ms var(--tooltip-ease),
+            translate 100ms var(--tooltip-ease);
+        translate: -50% 4px;
+        white-space: nowrap;
+
+        .range-slider-thumb.--active > &,
+        .range-slider-thumb:focus-visible > & {
+            opacity: 1;
+            scale: 1;
+            transition-duration: 150ms;
+            translate: -50% 0;
+        }
+    }
+
+    &-track {
+        cursor: pointer;
+        height: var(--hit-size);
+        margin-top: 32px;
+        position: relative;
+        touch-action: none;
+        user-select: none;
+    }
+
+
+    // Dragging a thumb directly follows the pointer 1:1; only track clicks, keys and typed values glide.
+    &.--dragging {
+        .range-slider-fill,
+        .range-slider-handle {
+            transition: none;
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &-fill,
+        &-handle,
+        &-thumb {
+            transition: none;
+        }
+
+        &-tooltip {
+            scale: 1;
+            transition: opacity 100ms var(--tooltip-ease);
+            translate: -50% 0;
+        }
+    }
+}

package/src/components/range-slider/scss/variables.scss

@@ -0,0 +1,26 @@
+.range-slider {
+    --background: var(--color-border-300);
+    --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: var(--color-text-500);
+    --color-muted: var(--color-text-300);
+    --field-background: var(--color-grey-400);
+    --field-height: 40px;
+    --fill: var(--color-text-500);
+    --focus-color: oklch(from var(--color-text-500) l c h / 0.38);
+    --font-size: calc(var(--font-size-400) * 0.875);
+    --glide-duration: 300ms;
+    // Critically damped spring, so a drag that starts on the track keeps retargeting the thumb without a restart jolt.
+    --glide-timing-function: linear(0, 0.12, 0.328, 0.514, 0.663, 0.776, 0.851, 0.905, 0.938, 0.96, 0.975, 0.984, 0.99, 0.994, 1);
+    --height: 6px;
+    --hit-size: 44px;
+    --thumb-background: var(--color-white-300);
+    --thumb-dot: var(--color-text-500);
+    --thumb-dot-size: 8px;
+    --thumb-scale-active: 0.96;
+    --thumb-size: var(--size-500);
+    --tooltip-background: var(--color-text-500);
+    --tooltip-color: var(--color-white-300);
+    --tooltip-ease: cubic-bezier(0.23, 1, 0.32, 1);
+    --tooltip-offset: 10px;
+    --width: min(440px, 100%);
+}

package/src/components/reading-progress/index.ts

@@ -0,0 +1,160 @@
+import { html, type Attributes } from '@esportsplus/template';
+import { onCleanup, reactive } from '@esportsplus/reactivity';
+import './scss/index.scss';
+
+
+type Ref = () => HTMLElement | null | undefined;
+
+
+function clamp(value: number) {
+    if (!Number.isFinite(value) || value < 0) {
+        return 0;
+    }
+
+    return value > 1 ? 1 : value;
+}
+
+
+export default ({ doneLabel = 'End', label = 'Reading progress', scroller, steps = 24, target, words = 0, wordsPerMinute = 220, ...attributes }: Attributes & {
+    doneLabel?: string;
+    label?: string;
+    // Scroll container, when the article lives in a pane rather than the document.
+    scroller?: Ref;
+    // Quantizes the scroll, capping how many renders a full scroll can cost.
+    steps?: number;
+    // Article element; progress runs from its top edge to its last visible line.
+    target?: Ref;
+    words?: number;
+    wordsPerMinute?: number;
+}) => {
+    let dispose: VoidFunction | undefined,
+        frame = 0,
+        state = reactive({ step: 0 }),
+        total = words > 0 ? Math.max(1, Math.ceil(words / wordsPerMinute)) : 0;
+
+    function minutes() {
+        return Math.ceil(((1 - progress()) * words) / wordsPerMinute);
+    }
+
+    function progress() {
+        return steps > 0 ? state.step / steps : 1;
+    }
+
+    function read() {
+        frame = 0;
+
+        let container = scroller?.() ?? null,
+            element = target?.() ?? null,
+            ratio: number,
+            travel: number,
+            viewport = container ? container.clientHeight : window.innerHeight;
+
+        if (element) {
+            let rect = element.getBoundingClientRect();
+
+            travel = rect.height - viewport;
+            ratio = travel <= 0 ? 1 : ((container ? container.getBoundingClientRect().top : 0) - rect.top) / travel;
+        }
+        else if (container) {
+            travel = container.scrollHeight - container.clientHeight;
+            ratio = travel <= 0 ? 1 : container.scrollTop / travel;
+        }
+        else {
+            travel = document.documentElement.scrollHeight - viewport;
+            ratio = travel <= 0 ? 1 : window.scrollY / travel;
+        }
+
+        let step = Math.round(clamp(ratio) * steps);
+
+        if (state.step !== step) {
+            state.step = step;
+        }
+    }
+
+    function schedule() {
+        if (frame) {
+            return;
+        }
+
+        frame = requestAnimationFrame(read);
+    }
+
+    onCleanup(() => {
+        cancelAnimationFrame(frame);
+        dispose?.();
+    });
+
+    return html`
+        <div
+            class='reading-progress'
+            ${attributes}
+            ${{
+                class: () => state.step >= steps && '--complete',
+                // Refs resolve a frame after connect so elements rendered later in the same template exist.
+                onconnect: () => {
+                    frame = requestAnimationFrame(() => {
+                        let container = scroller?.() ?? null,
+                            element = target?.() ?? null,
+                            observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(schedule),
+                            source: EventTarget = container ?? window;
+
+                        source.addEventListener('scroll', schedule, { passive: true });
+                        window.addEventListener('resize', schedule);
+
+                        if (element) {
+                            observer?.observe(element);
+                        }
+
+                        if (container) {
+                            observer?.observe(container);
+                        }
+
+                        if (!element && !container) {
+                            observer?.observe(document.documentElement);
+                        }
+
+                        dispose = () => {
+                            source.removeEventListener('scroll', schedule);
+                            window.removeEventListener('resize', schedule);
+                            observer?.disconnect();
+                        };
+
+                        read();
+                    });
+                }
+            }}
+        >
+            <div
+                aria-label='${label}'
+                aria-valuemax='${steps}'
+                aria-valuemin='0'
+                aria-valuenow='${() => state.step}'
+                aria-valuetext='${() => `${Math.round(progress() * 100)}% read${words > 0 ? `, ${minutes()} min left` : ''}`}'
+                class='reading-progress-track'
+                role='progressbar'
+            >
+                <div class='reading-progress-fill' style='${() => `--progress: ${state.step / Math.max(1, steps)}`}'></div>
+            </div>
+
+            ${words > 0 && html`
+                <div aria-hidden='true' class='reading-progress-readout'>
+                    <span class='reading-progress-sizer'>
+                        <span class='reading-progress-check'></span>
+                        ${doneLabel} · ${total} min
+                    </span>
+                    <span class='reading-progress-remaining'>
+                        ${() => minutes()} min left
+                    </span>
+                    <span class='reading-progress-done'>
+                        <svg class='reading-progress-check' fill='none' viewBox='0 0 256 256'>
+                            <polyline pathLength='1' points='216 72 104 184 48 128' />
+                        </svg>
+                        <span class='reading-progress-label'>
+                            ${doneLabel} · ${total} min
+                        </span>
+                    </span>
+                </div>
+            `}
+        </div>
+    `;
+};

package/src/components/reading-progress/scss/index.scss

@@ -0,0 +1,115 @@
+@use 'variables';
+
+.reading-progress {
+    align-items: center;
+    display: flex;
+    gap: var(--gap);
+
+    &-check {
+        flex-shrink: 0;
+        height: 12px;
+        width: 12px;
+
+        polyline {
+            stroke: currentColor;
+            stroke-dasharray: 1;
+            stroke-dashoffset: 1;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+            stroke-width: 16;
+            transition: stroke-dashoffset var(--draw-duration) var(--draw-timing-function) var(--draw-delay);
+        }
+    }
+
+    &-done,
+    &-remaining,
+    &-sizer {
+        grid-area: 1 / 1;
+        white-space: nowrap;
+    }
+
+    &-done,
+    &-sizer {
+        align-items: center;
+        display: flex;
+        gap: 4px;
+    }
+
+    &-done {
+        color: var(--color-done);
+        opacity: 0;
+    }
+
+    &-done,
+    &-label,
+    &-remaining {
+        transition:
+            opacity var(--fade-duration) var(--fade-timing-function),
+            translate var(--fade-duration) var(--fade-timing-function);
+    }
+
+    &-fill {
+        background: var(--fill);
+        border-radius: var(--border-radius);
+        height: var(--height);
+        transform: scaleX(var(--progress, 0));
+        transform-origin: left;
+        transition: transform var(--fill-duration) var(--fill-timing-function);
+    }
+
+    &-label {
+        translate: var(--shift) 0;
+    }
+
+    // Sizer reserves the widest state so the bar never reflows when the readout swaps.
+    &-readout {
+        color: var(--color);
+        display: grid;
+        flex-shrink: 0;
+        font-family: var(--font-family);
+        font-size: var(--font-size);
+        font-variant-numeric: tabular-nums;
+        justify-items: end;
+    }
+
+    &-sizer {
+        visibility: hidden;
+    }
+
+    &-track {
+        background: var(--background);
+        border-radius: var(--border-radius);
+        box-shadow: var(--box-shadow);
+        flex: 1;
+        min-width: 0;
+        padding: var(--padding);
+    }
+
+    &.--complete {
+        .reading-progress-done {
+            opacity: 1;
+        }
+
+        .reading-progress-label {
+            translate: 0 0;
+        }
+
+        .reading-progress-remaining {
+            opacity: 0;
+        }
+
+        polyline {
+            stroke-dashoffset: 0;
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &-done,
+        &-fill,
+        &-label,
+        &-remaining,
+        polyline {
+            transition: none;
+        }
+    }
+}

package/src/components/reading-progress/scss/variables.scss

@@ -0,0 +1,31 @@
+.reading-progress {
+    --background: var(--color-grey-400);
+    --box-shadow: inset 0 1px 2px oklch(0% 0 0 / 0.07);
+    --color: var(--color-text-300);
+    --color-done: var(--color-text-500);
+    --draw-delay: 0.08s;
+    --draw-duration: 0.3s;
+    --draw-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+    // Overdamped spring: stiffness 260, damping 34, mass 0.8.
+    --fade-duration: 0.73s;
+    --fade-timing-function: linear(0, 0.005 0.8%, 0.042 2.5%, 0.125 4.8%, 0.244 7.6%, 0.38 10.9%, 0.514 14.6%, 0.634 18.6%, 0.733 23.1%, 0.811 27.9%, 0.869 33%, 0.912 38.4%, 0.942 44.2%, 0.963 50.2%, 0.976 56.5%, 0.985 63.1%, 0.991 70%, 0.995 77.1%, 0.997 84.5%, 0.998 92.1%, 1);
+    --fill: var(--color-blue-400);
+    // Overdamped spring: stiffness 210, damping 34, mass 0.9.
+    --fill-duration: 0.93s;
+    --fill-timing-function: linear(0, 0.006 0.8%, 0.048 2.5%, 0.137 4.8%, 0.262 7.6%, 0.401 10.9%, 0.534 14.6%, 0.65 18.6%, 0.745 23.1%, 0.819 27.9%, 0.875 33%, 0.915 38.4%, 0.944 44.2%, 0.964 50.2%, 0.977 56.5%, 0.986 63.1%, 0.991 70%, 0.995 77.1%, 0.997 84.5%, 0.998 92.1%, 1);
+    --font-family: ui-monospace, monospace;
+    --font-size: 10.5px;
+    --gap: var(--size-300);
+    --height: 3px;
+    --padding: 2px;
+    --shift: 4px;
+
+    // Root `*` redeclares --border-radius on every element, so it can't inherit from the block.
+    &-fill {
+        --border-radius: var(--border-radius-100);
+    }
+
+    &-track {
+        --border-radius: var(--border-radius-200);
+    }
+}