@esportsplus/ui 0.55.0 → 0.56.2

package/src/components/tasklist/scss/variables.scss

@@ -0,0 +1,83 @@
+@use '/tokens';
+
+.tasklist {
+    --background: transparent;
+    --border-radius: var(--border-radius-300);
+    --check-duration: 280ms;
+    --description-color: var(--color-text-300);
+    --description-color-checked: var(--color-border-500);
+    --description-font-size: var(--font-size-300);
+    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+    --font-size: var(--font-size-400);
+    --gap: var(--size-100);
+    --gap-horizontal: var(--size-300);
+    --label-color: var(--color-text-500);
+    --label-color-checked: var(--color-text-300);
+    --line-height: var(--size-500);
+    // Spring with stiffness 320 and damping 30, sampled across its 500ms settle
+    --move-duration: 500ms;
+    --move-timing-function: linear(0, 0.109, 0.322, 0.536, 0.71, 0.835, 0.916, 0.965, 0.991, 1.003, 1.007, 1.008, 1.006, 1.005, 1.003, 1.002, 1);
+    --nudge-distance: 8px;
+    --nudge-duration: 300ms;
+    --padding-horizontal: var(--size-200);
+    --padding-vertical: var(--size-100);
+    --pop-duration: 340ms;
+    --pop-scale: 1.08;
+    --strike-duration: 380ms;
+    --strike-color: currentColor;
+    --strike-width: 1.5px;
+
+
+    .tasklist-checkbox {
+        --background-active: var(--color-primary-400);
+        --border-color-active: var(--color-primary-400);
+        --border-color-default: var(--color-border-500);
+        --border-width: var(--border-width-400);
+        --size: var(--line-height);
+        --transition-duration: var(--check-duration);
+    }
+
+    &--plan {
+        --background-hover: color-mix(in oklch, var(--color-text-500) 3%, transparent);
+        --border-radius: var(--border-radius-400);
+        --check-duration: 150ms;
+        --description-font-size: var(--font-size-100);
+        --font-size: var(--font-size-200);
+        --gap: 2px;
+        --gap-horizontal: 10px;
+        --grip-color: var(--color-border-300);
+        --grip-size: 12px;
+        --hover-duration: 150ms;
+        --index-color: var(--color-border-500);
+        --index-font-family: 'Geist Mono', ui-monospace, monospace;
+        --index-font-size: var(--font-size-100);
+        --label-font-weight: var(--font-weight-500);
+        --nudge-distance: 0px;
+        --off-opacity: 0.45;
+        --padding-horizontal: var(--size-100);
+        --pop-scale: 1;
+        --strike-color: var(--color-border-400);
+        --strike-duration: 200ms;
+        --strike-width: 1px;
+
+        .tasklist-checkbox {
+            --background-active: var(--color-text-500);
+            --border-color-active: var(--color-text-500);
+            --border-color-default: var(--color-border-400);
+            --border-radius: 5px;
+            --border-width: 1px;
+            --border-width-offset-hover: 0px;
+            --box-shadow-active: none;
+            --size: 16px;
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        --check-duration: 0ms;
+        --move-duration: 0ms;
+        --nudge-duration: 0ms;
+        --pop-duration: 0ms;
+        --strike-duration: 0ms;
+    }
+}

package/src/components/text-animate/index.ts

@@ -0,0 +1,142 @@
+import { reactive } from '@esportsplus/reactivity';
+import { component, html, type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    // Label the whole text once for assistive tech and hide the pieces; off when the text is decorative.
+    accessible?: boolean;
+    animation?: Animation;
+    by?: By;
+    // Seconds before the first segment starts.
+    delay?: number;
+    // Seconds the stagger is spread across, however many segments there are.
+    duration?: number;
+    // Stays shown after the first reveal instead of hiding again whenever it scrolls out.
+    once?: boolean;
+    // Waits until the text scrolls into view; otherwise it plays as soon as it is mounted.
+    startOnView?: boolean;
+    state?: State;
+};
+
+type Animation =
+    | 'blurIn'
+    | 'blurInDown'
+    | 'blurInUp'
+    | 'fadeIn'
+    | 'scaleDown'
+    | 'scaleUp'
+    | 'slideDown'
+    | 'slideLeft'
+    | 'slideRight'
+    | 'slideUp';
+
+type By = 'character' | 'line' | 'text' | 'word';
+
+type State = {
+    show: boolean;
+};
+
+
+// Letters of a word share a no-wrap group, otherwise a line could break mid-word between two letters. Spaces still
+// count toward the stagger but render as plain text so lines can break there.
+function characters(text: string) {
+    let i = 0;
+
+    return segments(text, 'word').map((part) => {
+        // Spread keeps surrogate pairs (emoji) together.
+        let chars = [...part];
+
+        if (!part.trim()) {
+            i += chars.length;
+            return part;
+        }
+
+        return html`<span class='text-animate-word'>${chars.map((char) => segment(char, i++))}</span>`;
+    });
+}
+
+function segment(text: string, i: number) {
+    return html`<span class='text-animate-segment' style='${`--i: ${i}`}'>${text}</span>`;
+}
+
+function segments(text: string, by: By) {
+    if (by === 'line') {
+        return text.split('\n');
+    }
+
+    if (by === 'text') {
+        return [text];
+    }
+
+    // Whitespace stays its own segment so spacing survives inline-block layout.
+    return text.split(/(\s+)/).filter(Boolean);
+}
+
+
+export default component<A, string>(
+    function(this, {
+        accessible = true,
+        animation = 'fadeIn',
+        by = 'word',
+        delay = 0,
+        duration = 0.3,
+        once = false,
+        startOnView = true,
+        state = reactive({ show: false }),
+        ...attributes
+    }, content) {
+        let frame = 0,
+            observer: IntersectionObserver | undefined,
+            parts = by === 'character' ? [] : segments(content, by),
+            total = by === 'character' ? [...content].length : parts.length;
+
+        return html`
+            <span
+                class='text-animate text-animate--${animation} text-animate--${by}'
+                style='${`--delay: ${delay}s; --segments: ${total}; --stagger: ${duration / Math.max(1, total)}s;`}'
+                ${this?.attributes}
+                ${attributes}
+                ${{
+                    class: () => state.show && '--show',
+                    onconnect: (element: HTMLElement) => {
+                        // Stay hidden for one frame first, so the first reveal transitions instead of snapping.
+                        if (!startOnView) {
+                            frame = requestAnimationFrame(() => {
+                                frame = requestAnimationFrame(() => state.show = true);
+                            });
+                            return;
+                        }
+
+                        observer = new IntersectionObserver((entries) => {
+                            let entry = entries[entries.length - 1];
+
+                            if (entry.isIntersecting) {
+                                state.show = true;
+
+                                if (once) {
+                                    observer?.disconnect();
+                                }
+                            }
+                            else if (!once) {
+                                state.show = false;
+                            }
+                        });
+                        observer.observe(element);
+                    },
+                    ondisconnect: () => {
+                        cancelAnimationFrame(frame);
+                        observer?.disconnect();
+                    }
+                }}
+            >
+                ${accessible && html`<span class='text-animate-sr'>${content}</span>`}
+                <span aria-hidden='${accessible && 'true'}' class='text-animate-segments'>
+                    ${by === 'character' ? characters(content) : parts.map(segment)}
+                </span>
+            </span>
+        `;
+    }
+);
+
+export type { Animation as TextAnimateAnimation, By as TextAnimateBy, State as TextAnimateState };

package/src/components/text-animate/scss/index.scss

@@ -0,0 +1,106 @@
+@use 'variables';
+
+// Segments enter in reading order and leave in reverse, so the last one in is the first one out.
+.text-animate {
+    display: block;
+    white-space: pre-wrap;
+
+    &-segment {
+        display: inline-block;
+        filter: var(--hidden-filter);
+        opacity: 0;
+        scale: var(--hidden-scale);
+        transition:
+            filter var(--filter-duration) var(--ease),
+            opacity var(--opacity-duration) var(--ease),
+            scale var(--scale-duration) var(--scale-ease),
+            translate var(--translate-duration) var(--ease);
+        transition-delay: calc((var(--segments) - 1 - var(--i)) * var(--stagger));
+        translate: var(--hidden-x) var(--hidden-y);
+        white-space: pre;
+    }
+
+    &-sr {
+        clip-path: inset(50%);
+        height: 1px;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+    }
+
+    &-word {
+        display: inline-block;
+        white-space: nowrap;
+    }
+
+
+    &--blurIn {
+        --hidden-filter: blur(var(--blur));
+    }
+
+    &--blurInDown {
+        --hidden-filter: blur(var(--blur));
+        --hidden-y: calc(var(--distance) * -1);
+        --opacity-duration: 400ms;
+    }
+
+    &--blurInUp {
+        --hidden-filter: blur(var(--blur));
+        --hidden-y: var(--distance);
+        --opacity-duration: 400ms;
+    }
+
+    &--fadeIn,
+    &--slideUp {
+        --hidden-y: var(--distance);
+    }
+
+    &--line &-segment {
+        display: block;
+    }
+
+    &--scaleDown {
+        --hidden-scale: 1.5;
+    }
+
+    &--scaleDown,
+    &--scaleUp {
+        --scale-duration: 950ms;
+        // Underdamped spring (stiffness 300, damping 15), so the letters overshoot and settle.
+        --scale-ease: linear(0, 0.133, 0.422, 0.739, 0.996, 1.153, 1.217, 1.204, 1.148, 1.078, 1.017, 0.975, 0.955, 0.953, 0.963, 0.978, 0.992, 1.003, 1.009, 1.011, 1.009, 1.006, 1.003, 1, 0.998, 0.998, 0.998, 0.998, 0.999, 1, 1);
+    }
+
+    &--scaleUp {
+        --hidden-scale: 0.5;
+    }
+
+    &--slideDown {
+        --hidden-y: calc(var(--distance) * -1);
+    }
+
+    &--slideLeft {
+        --hidden-x: var(--distance);
+    }
+
+    &--slideRight {
+        --hidden-x: calc(var(--distance) * -1);
+    }
+
+    &.--show &-segment {
+        filter: blur(0);
+        opacity: 1;
+        scale: 1;
+        transition-delay: calc(var(--delay) + var(--i) * var(--stagger));
+        translate: 0 0;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &-segment {
+            filter: none;
+            scale: 1;
+            transition: opacity var(--opacity-duration) var(--ease);
+            translate: 0 0;
+        }
+    }
+}

package/src/components/text-animate/scss/variables.scss

@@ -0,0 +1,17 @@
+.text-animate {
+    --blur: 10px;
+    --delay: 0s;
+    --distance: 20px;
+    --ease: cubic-bezier(0.23, 1, 0.32, 1);
+    --filter-duration: 300ms;
+    --hidden-filter: blur(0);
+    --hidden-scale: 1;
+    --hidden-x: 0;
+    --hidden-y: 0;
+    --opacity-duration: 300ms;
+    --scale-duration: 300ms;
+    --scale-ease: var(--ease);
+    --segments: 1;
+    --stagger: 0s;
+    --translate-duration: 300ms;
+}

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

@@ -0,0 +1,170 @@
+import { html, type Attributes } from '@esportsplus/template';
+import { effect, reactive } from '@esportsplus/reactivity';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    doneLabel?: string;
+    label: string;
+    state?: State;
+};
+
+type State = {
+    // 0 to 100.
+    value: number;
+};
+
+
+const DAMPING = 20;
+
+const DIGITS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+
+const REST = 0.01;
+
+const STIFFNESS = 90;
+
+// The tens column starts blank, so 7% never reads as 07%.
+const TENS = [' ', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+
+
+function clamp(value: number) {
+    return Math.min(100, Math.max(0, value));
+}
+
+function clip(value: number) {
+    return `inset(0 ${Math.max(0, 100 - value).toFixed(2)}% 0 0)`;
+}
+
+function reduced() {
+    return matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
+function roll(strip: string[], index: () => number) {
+    return html`
+        <span class='text-progress-roll'>
+            <span class='text-progress-strip' style='${() => `translate: 0 ${-index() * 10}%`}'>
+                ${strip.map((digit) => html`<span>${digit}</span>`)}
+            </span>
+        </span>
+    `;
+}
+
+
+export default ({ doneLabel = 'Done', label, state = reactive({ value: 0 }), ...attributes }: A) => {
+    let frame = 0,
+        ink: HTMLElement | undefined,
+        position = clamp(state.value),
+        stop: VoidFunction | undefined,
+        target = position,
+        time = 0,
+        velocity = 0;
+
+    function done() {
+        return percent() >= 100;
+    }
+
+    function percent() {
+        return Math.round(clamp(state.value));
+    }
+
+    // Progress arrives in uneven jumps; a spring turns them into one steady pour of ink and keeps its speed when
+    // the next jump lands mid-glide.
+    function step(now: number) {
+        let elapsed = Math.min(64, now - time);
+
+        time = now;
+
+        for (let i = 0; i < elapsed; i++) {
+            velocity += (STIFFNESS * (target - position) - DAMPING * velocity) / 1000;
+            position += velocity / 1000;
+        }
+
+        if (Math.abs(velocity) < REST && Math.abs(target - position) < REST) {
+            frame = 0;
+            position = target;
+            velocity = 0;
+        }
+        else {
+            frame = requestAnimationFrame(step);
+        }
+
+        if (ink) {
+            ink.style.clipPath = clip(position);
+        }
+    }
+
+    return html`
+        <div
+            aria-label='${label}'
+            aria-valuemax='100'
+            aria-valuemin='0'
+            aria-valuenow='${percent}'
+            aria-valuetext='${() => done() ? doneLabel : `${percent()}%`}'
+            class='text-progress ${() => done() && '--done'}'
+            role='progressbar'
+            ${attributes}
+            ${{
+                onconnect: (element: HTMLElement) => {
+                    ink = element.querySelector<HTMLElement>('.text-progress-ink') ?? undefined;
+                    stop = effect(() => {
+                        target = clamp(state.value);
+
+                        if (reduced()) {
+                            cancelAnimationFrame(frame);
+                            frame = 0;
+                            position = target;
+                            velocity = 0;
+
+                            if (ink) {
+                                ink.style.clipPath = clip(position);
+                            }
+
+                            return;
+                        }
+
+                        if (!frame) {
+                            time = performance.now();
+                            frame = requestAnimationFrame(step);
+                        }
+                    });
+                },
+                ondisconnect: () => {
+                    cancelAnimationFrame(frame);
+                    frame = 0;
+                    stop?.();
+                }
+            }}
+        >
+            <span aria-hidden='true' class='text-progress-labels'>
+                <span class='text-progress-label'>
+                    <span class='text-progress-track'>${label}</span>
+                    <span class='text-progress-ink' style='${`clip-path: ${clip(position)}`}'>${label}</span>
+                </span>
+                <span class='text-progress-done'>
+                    <svg class='text-progress-check' fill='none' viewBox='0 0 16 16'>
+                        <path
+                            d='m3.5 8.5 3 3 6-7'
+                            pathLength='1'
+                            stroke='currentColor'
+                            stroke-dasharray='1'
+                            stroke-linecap='round'
+                            stroke-linejoin='round'
+                            stroke-width='2'
+                        />
+                    </svg>
+                    ${doneLabel}
+                </span>
+            </span>
+
+            <span aria-hidden='true' class='text-progress-percent'>
+                ${roll(TENS, () => Math.floor((percent() % 100) / 10))}
+                ${roll(DIGITS, () => percent() % 10)}
+                <span>%</span>
+            </span>
+
+            <span aria-live='polite' class='text-progress-sr'>${() => done() ? doneLabel : ''}</span>
+        </div>
+    `;
+};
+
+export type { State as TextProgressState };

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

@@ -0,0 +1,148 @@
+@use 'variables';
+
+// Every part is exactly one line tall, so centring lines them up; baseline alignment breaks on the clipped digit
+// columns.
+.text-progress {
+    align-items: center;
+    color: var(--color);
+    display: inline-flex;
+    font-size: var(--font-size);
+    font-weight: var(--font-weight);
+    gap: var(--part-gap);
+    line-height: var(--part-height);
+    position: relative;
+
+    &-check {
+        flex-shrink: 0;
+        height: var(--check-size);
+        width: var(--check-size);
+
+        path {
+            stroke-dashoffset: 1;
+            transition: stroke-dashoffset 0s var(--ease-in-out) 150ms;
+        }
+    }
+
+    &-done {
+        align-items: center;
+        display: flex;
+        filter: blur(4px);
+        gap: var(--done-gap);
+        grid-area: 1 / 1;
+        opacity: 0;
+        pointer-events: none;
+        transition:
+            filter 150ms var(--ease-out),
+            opacity 150ms var(--ease-out),
+            translate 150ms var(--ease-out);
+        translate: 0 4px;
+        white-space: nowrap;
+    }
+
+    &-ink {
+        inset: 0;
+        position: absolute;
+    }
+
+    &-label {
+        grid-area: 1 / 1;
+        position: relative;
+        transition:
+            filter 300ms var(--ease-out),
+            opacity 300ms var(--ease-out),
+            translate 300ms var(--ease-out);
+        white-space: nowrap;
+    }
+
+    &-labels {
+        display: grid;
+    }
+
+    &-percent {
+        color: var(--muted-color);
+        display: flex;
+        font-variant-numeric: tabular-nums;
+        transition:
+            filter 300ms var(--ease-out),
+            opacity 300ms var(--ease-out);
+    }
+
+    &-roll {
+        display: inline-block;
+        height: 1lh;
+        overflow: hidden;
+        position: relative;
+        width: 1ch;
+    }
+
+    &-sr {
+        clip-path: inset(50%);
+        height: 1px;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+    }
+
+    &-strip {
+        display: flex;
+        flex-direction: column;
+        inset-inline: 0;
+        position: absolute;
+        top: 0;
+        transition: translate 300ms var(--ease-out);
+        white-space: pre;
+
+        span {
+            height: 1lh;
+        }
+    }
+
+    &-track {
+        color: var(--track-color);
+    }
+
+    &.--done {
+        .text-progress-check path {
+            stroke-dashoffset: 0;
+            transition-duration: 300ms;
+        }
+
+        .text-progress-done {
+            filter: none;
+            opacity: 1;
+            pointer-events: auto;
+            transition:
+                filter 300ms var(--ease-out) 100ms,
+                opacity 300ms var(--ease-out) 100ms,
+                translate 300ms var(--ease-out) 100ms;
+            translate: 0 0;
+        }
+
+        .text-progress-label {
+            filter: blur(4px);
+            opacity: 0;
+            transition-duration: 200ms;
+            translate: 0 -4px;
+        }
+
+        .text-progress-percent {
+            filter: blur(4px);
+            opacity: 0;
+            transition-duration: 200ms;
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &-check path,
+        &-strip,
+        &.--done &-check path {
+            transition: none;
+        }
+
+        &-done,
+        &.--done &-label {
+            translate: 0 0;
+        }
+    }
+}

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

@@ -0,0 +1,26 @@
+.text-progress {
+    --check-size: 16px;
+    --color: var(--color-text-500);
+    --done-gap: 6px;
+    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+    --font-size: var(--font-size-400);
+    --font-weight: var(--font-weight-500);
+    --muted-color: var(--color-text-300);
+    --part-gap: 10px;
+    --part-height: 24px;
+    --track-color: oklch(from var(--color-text-500) l c h / 0.2);
+
+    &--blue {
+        --color: var(--color-blue-400);
+        --track-color: oklch(from var(--color-blue-400) l c h / 0.2);
+    }
+
+    &--large {
+        --check-size: 22px;
+        --done-gap: 8px;
+        --font-size: var(--font-size-600);
+        --part-gap: 14px;
+        --part-height: 32px;
+    }
+}