@esportsplus/ui 0.56.4 → 0.57.0

package/src/components/overlay/scss/variables.scss

@@ -0,0 +1,117 @@
+// The same curve run backwards, so an exit plays its entrance in reverse.
+@function reversed($x1, $y1, $x2, $y2) {
+    @return cubic-bezier(1 - $x2, 1 - $y2, 1 - $x1, 1 - $y1);
+}
+
+
+.overlay {
+    --backdrop: color-mix(in srgb, var(--color-black-500) 64%, transparent);
+    // Read by JS: the longest a dragged-away overlay is thrown for.
+    --fling-duration: 500ms;
+    --handle-color: var(--color-border-300);
+    --handle-length: 40px;
+    --handle-offset: var(--size-200);
+    --handle-thickness: 6px;
+    --margin-horizontal: 0px;
+    --margin-vertical: 0px;
+    --max-width: 480px;
+    --scale: 1;
+    --stack-dim: 0.2;
+    --stack-peek: 18px;
+    --stack-scale: 0.94;
+    // Covered layers scale about their anchor, so the far edge moves back by '--stack-span' of the size before it
+    // peeks.
+    --stack-shift: calc(var(--depth, 0) * var(--stack-peek) + (1 - pow(var(--stack-scale), var(--depth, 0))) * var(--stack-span));
+    --width-closed: 64px;
+
+    // Dragged away, it fades where it was let go.
+    @media (prefers-reduced-motion: reduce) {
+        --fling-duration: 0s;
+    }
+
+    // The root curve, reversed.
+    &:where(:not(.--active)) {
+        --transition-timing-function: #{reversed(0.4, 0, 0.2, 1)};
+    }
+
+    &--e,
+    &--n,
+    &--ne,
+    &--nw,
+    &--s,
+    &--se,
+    &--sw,
+    &--w {
+        --close-duration: 0.3s;
+        // The iOS drawer curve: fast out of the gate, long gentle settle.
+        --ease: cubic-bezier(0.32, 0.72, 0, 1);
+        --open-duration: 0.5s;
+        --transition-duration: var(--open-duration);
+        --transition-timing-function: var(--ease);
+
+        // Exits get out of the way faster than entrances arrive.
+        &:where(:not(.--active)) {
+            --transition-duration: var(--close-duration);
+        }
+    }
+
+    &--e,
+    &--w {
+        --max-width: 320px;
+    }
+
+    &--floating {
+        --margin-horizontal: var(--size-100);
+        --margin-vertical: var(--size-100);
+    }
+
+    // Motion modifiers follow placement so they win when paired with an edge.
+    &--alert {
+        --backdrop: rgb(0 0 0 / 10%);
+        --blur: 4px;
+        --opacity: 0;
+        --scale: 0.95;
+        --transition-duration: 100ms;
+        --transition-timing-function: ease;
+        --translate: 0px;
+
+        &:where(:not(.--active)) {
+            --transition-timing-function: #{reversed(0.25, 0.1, 0.25, 1)};
+        }
+    }
+
+    &--blur {
+        --backdrop: color-mix(in srgb, var(--color-black-500) 32%, transparent);
+        --blur: 8px;
+    }
+
+    &--fade {
+        --opacity: 0;
+        --translate: 0px;
+    }
+
+    &--scale {
+        --opacity: 0;
+        --scale: 0.92;
+        --translate: 0px;
+    }
+
+    &--spring {
+        --opacity: 0;
+        --scale: 0.8;
+        --transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
+        --translate: 0px;
+
+        &:where(:not(.--active)) {
+            --transition-timing-function: #{reversed(0.34, 1.56, 0.64, 1)};
+        }
+    }
+}
+
+.overlay-page {
+    --dim: 0.2;
+    --peek: 18px;
+    --scale: 0.94;
+    --transition-duration: 0.5s;
+    --transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
+}

package/src/components/pagination/dots.ts

@@ -0,0 +1,132 @@
+import { component, html, type Attributes } from '@esportsplus/template';
+import { effect, onCleanup, reactive } from '@esportsplus/reactivity';
+
+
+type A = Attributes & {
+    [DOTS_DOT]?: Attributes;
+    // Milliseconds the pill takes to fill while 'state.running'; omitted for plain dots.
+    autoplay?: number;
+    count: number;
+    onelapsed?: (active: number) => void;
+    onpage?: (index: number) => void;
+    state?: State;
+};
+
+type State = {
+    active: number;
+    // Continuous page index (1.5 is halfway between the second and third page) so the dots follow a scroll or drag frame by frame.
+    progress: number;
+    running: boolean;
+};
+
+
+const DOTS_DOT = Symbol.for('@esportsplus/ui/pagination.dots.dot');
+
+// Paused partway, the fill eases back to full rather than snapping, so a paused pill reads as solid, not half done.
+const SETTLE: KeyframeAnimationOptions = { duration: 200, easing: 'cubic-bezier(0.23, 1, 0.32, 1)' };
+
+
+function template(
+    this: { attributes?: Partial<A> } | void,
+    { autoplay, count, onelapsed, onpage, state = reactive({ active: 0, progress: 0, running: false }), ...attributes }: A
+) {
+    let fill: HTMLElement | undefined,
+        local = reactive({ connected: false }),
+        settle: Animation | undefined;
+
+    effect(() => {
+        let active = Math.min(Math.max(Math.round(state.progress), 0), count - 1);
+
+        if (state.active !== active) {
+            state.active = active;
+        }
+    });
+
+    effect((cleanup) => {
+        // Read before any early return so every input stays a dependency.
+        let active = state.active,
+            running = local.connected && state.running;
+
+        if (!autoplay || !fill || !running) {
+            return;
+        }
+
+        let target = fill;
+
+        settle?.cancel();
+
+        // The countdown is the timer: when the fill finishes, the page advances.
+        let countdown = target.animate(
+            [{ transform: 'scaleX(0)' }, { transform: 'scaleX(1)' }],
+            { duration: autoplay, easing: 'linear' }
+        );
+
+        countdown.onfinish = () => onelapsed?.(active);
+
+        cleanup(() => {
+            countdown.onfinish = null;
+
+            if (countdown.playState !== 'running') {
+                return;
+            }
+
+            // Detached means the dots are going. No settle then: a nested disposal runs this after the owner's cleanup,
+            // so nothing would cancel it.
+            if (!target.isConnected) {
+                countdown.cancel();
+                return;
+            }
+
+            let from = getComputedStyle(target).transform;
+
+            countdown.cancel();
+            settle = target.animate([{ transform: from }, { transform: 'scaleX(1)' }], SETTLE);
+        });
+    });
+
+    // A pause just before the dots go leaves a settle running, which must not outlive them.
+    onCleanup(() => settle?.cancel());
+
+    return html`
+        <div
+            aria-label='Pages'
+            class='pagination pagination--dots ${autoplay && 'pagination--dots-autoplay'}'
+            role='group'
+            style='${() => `--count: ${count}; --progress: ${state.progress};`}'
+            ${this?.attributes}
+            ${attributes}
+            ${{
+                onconnect: () => {
+                    local.connected = true;
+                },
+                ondisconnect: () => {
+                    local.connected = false;
+                }
+            }}
+        >
+            ${Array.from({ length: count }, (_, i) => html`
+                <button
+                    aria-current='${() => state.active === i && 'page'}'
+                    aria-label='${`Page ${i + 1} of ${count}`}'
+                    class='pagination-dot'
+                    onclick='${() => onpage?.(i)}'
+                    style='${`--index: ${i};`}'
+                    type='button'
+                    ${this?.attributes?.[DOTS_DOT]}
+                    ${attributes[DOTS_DOT]}
+                >
+                    <span class='pagination-mark'></span>
+                </button>
+            `)}
+            <span aria-hidden='true' class='pagination-pill'>
+                ${autoplay && html`
+                    <span class='pagination-fill' onconnect='${(el: HTMLElement) => { fill = el; }}'></span>
+                `}
+            </span>
+        </div>
+    `;
+}
+
+
+export default component(template, { dot: DOTS_DOT });
+export type { State };

package/src/components/pagination/index.ts

@@ -1,8 +1,10 @@
 import { html, type Attributes } from '@esportsplus/template';
-import { effect, onCleanup, reactive, untrack } from '@esportsplus/reactivity';
+import { effect, reactive } from '@esportsplus/reactivity';
 import icon from '~/components/icon';
-import next from './svg/arrow-right.svg';
-import previous from './svg/arrow-left.svg';
+import next from '@esportsplus/ui/svg/arrow-right.svg';
+import previous from '@esportsplus/ui/svg/arrow-left.svg';
+import dots from './dots';
+import '~/components/button/scss/index.scss';
 import './scss/index.scss';
 
 
@@ -20,7 +22,8 @@ function range(start: number, end: number) {
     return values;
 }
 
-// First, last, current, two ellipses and the siblings on each side of current.
+// First, last, current, two ellipses and the siblings on each side of current; always the same count for a total, so
+// the cells are rendered once and only relabelled.
 function pages(page: number, siblings: number, total: number) {
     let slots = siblings * 2 + 5;
 
@@ -44,34 +47,19 @@ function pages(page: number, siblings: number, total: number) {
 }
 
 
-export default ({ onchange, siblings = 1, state: api = reactive({ page: 1 }), total, ...attributes }: Attributes & {
+const plain = ({ onchange, siblings = 1, state: api = reactive({ page: 1 }), total, ...attributes }: Attributes & {
     onchange?: (page: number) => void;
     siblings?: number;
     state?: { page: number };
     total: number;
 }) => {
-    let render = reactive([] as { value: number }[]),
-        stop = effect(() => {
-            let values = pages(api.page, siblings, total);
-
-            untrack(() => {
-                // Reuse cells in place so only the changed labels re-render.
-                for (let i = 0, n = values.length; i < n; i++) {
-                    if (render[i]) {
-                        render[i].value = values[i];
-                    }
-                    else {
-                        let cell = reactive({ value: values[i] });
-
-                        render[i] = cell;
-                    }
-                }
-
-                if (render.length > values.length) {
-                    render.splice(values.length);
-                }
-            });
-        });
+    let cells = pages(api.page, siblings, total).map((value) => reactive({ value }));
+
+    effect(() => pages(api.page, siblings, total), (values) => {
+        for (let i = 0, n = values.length; i < n; i++) {
+            cells[i].value = values[i];
+        }
+    });
 
     function go(page: number) {
         page = Math.min(Math.max(page, 1), total);
@@ -84,13 +72,11 @@ export default ({ onchange, siblings = 1, state: api = reactive({ page: 1 }), to
         onchange?.(page);
     }
 
-    onCleanup(stop);
-
     return html`
         <nav aria-label='Pagination' class='pagination' ${attributes}>
             <button
                 aria-disabled='${() => String(api.page <= 1)}'
-                class='button pagination-control ${() => api.page <= 1 ? '--disabled' : ''}'
+                class='button pagination-control ${() => api.page <= 1 && '--disabled'}'
                 onclick='${() => go(api.page - 1)}'
                 type='button'
             >
@@ -99,25 +85,23 @@ export default ({ onchange, siblings = 1, state: api = reactive({ page: 1 }), to
             </button>
 
             <div class='pagination-pages'>
-                ${html.reactive(render, function (cell) {
-                    return html`
-                        <button
-                            aria-current='${() => cell.value === api.page ? 'page' : 'false'}'
-                            aria-hidden='${() => String(cell.value === DOTS)}'
-                            class='button pagination-page ${() => cell.value === DOTS ? 'pagination-page--dots' : cell.value === api.page ? '--active' : ''}'
-                            onclick='${() => cell.value !== DOTS && go(cell.value)}'
-                            tabindex='${() => cell.value === DOTS ? -1 : 0}'
-                            type='button'
-                        >
-                            ${() => cell.value === DOTS ? '...' : cell.value}
-                        </button>
-                    `;
-                })}
+                ${cells.map((cell) => html`
+                    <button
+                        aria-current='${() => cell.value === api.page ? 'page' : 'false'}'
+                        aria-hidden='${() => String(cell.value === DOTS)}'
+                        class='button pagination-page ${() => cell.value === DOTS ? 'pagination-page--dots' : cell.value === api.page && '--active'}'
+                        onclick='${() => cell.value !== DOTS && go(cell.value)}'
+                        tabindex='${() => cell.value === DOTS ? -1 : 0}'
+                        type='button'
+                    >
+                        ${() => cell.value === DOTS ? '...' : cell.value}
+                    </button>
+                `)}
             </div>
 
             <button
                 aria-disabled='${() => String(api.page >= total)}'
-                class='button pagination-control ${() => api.page >= total ? '--disabled' : ''}'
+                class='button pagination-control ${() => api.page >= total && '--disabled'}'
                 onclick='${() => go(api.page + 1)}'
                 type='button'
             >
@@ -127,3 +111,8 @@ export default ({ onchange, siblings = 1, state: api = reactive({ page: 1 }), to
         </nav>
     `;
 };
+
+const pagination: typeof plain & { dots: typeof dots } = Object.assign(plain, { dots });
+
+
+export default pagination;

package/src/components/pagination/scss/_dots.scss

@@ -0,0 +1,67 @@
+@use '/shared';
+@use 'variables';
+
+.pagination {
+    // Each dot swells toward pill width as its page approaches, so the row makes room for the pill and every gap stays even mid-scroll.
+    &-dot {
+        align-items: center;
+        background: none;
+        border: 0;
+        border-radius: 999px;
+        box-sizing: content-box;
+        cursor: pointer;
+        display: flex;
+        inset-block: 0;
+        left: calc(var(--index) * var(--step) + (var(--pill-width) - var(--dot-size)) * clamp(0, var(--index) - var(--progress), 1));
+        // Reaches half the gap past each side of its dot, so the hit areas tile the row with no dead space between them.
+        margin: 0 0 0 calc(var(--dot-gap) / -2);
+        outline: none;
+        padding: 0 calc(var(--dot-gap) / 2);
+        position: absolute;
+        touch-action: manipulation;
+        width: calc(var(--dot-size) + (var(--pill-width) - var(--dot-size)) * var(--near));
+
+        &:focus-visible {
+            outline: var(--border-width-500) solid var(--focus-color);
+        }
+    }
+
+    &-fill {
+        @extend %absolute-full;
+        background: var(--pill-color);
+        transform-origin: left;
+    }
+
+    &-mark {
+        background: var(--dot-color);
+        border-radius: 999px;
+        height: var(--dot-size);
+        scale: var(--mark-scale);
+        transition:
+            background-color var(--transition-duration) var(--transition-timing-function),
+            scale var(--transition-duration) var(--transition-timing-function);
+        width: 100%;
+    }
+
+    // Spans the two pages it sits between: the leading edge travels in the first 60% of the move and the trailing edge in the
+    // last 60%, so the pill stretches toward the next dot, then pulls its tail in after it, like a worm.
+    &-pill {
+        background: var(--track-color);
+        border-radius: 999px;
+        height: var(--dot-size);
+        left: 0;
+        overflow: hidden;
+        pointer-events: none;
+        position: absolute;
+        top: 50%;
+        translate: calc(var(--k) * var(--step) + var(--step) * var(--trail)) -50%;
+        width: calc(var(--pill-width) + var(--step) * (var(--lead) - var(--trail)));
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &-mark {
+            scale: none;
+            transition: background-color var(--transition-duration) var(--transition-timing-function);
+        }
+    }
+}

package/src/components/pagination/scss/index.scss

@@ -1,6 +1,5 @@
 @use '/tokens';
-// Before variables: the button sheet re-emits its defaults, which would otherwise override ours.
-@use '../../button/scss/index';
+@use 'dots';
 @use 'variables';
 
 .pagination {
@@ -10,6 +9,17 @@
     justify-content: space-between;
     width: 100%;
 
+    // Geometry is derived from '--progress' alone, so a scroll or drag only rewrites one custom property per frame.
+    &--dots {
+        contain: layout;
+        display: block;
+        flex: none;
+        height: var(--height);
+        position: relative;
+        // Never changes width: the active slot is always one pill wide, whichever dot owns it.
+        width: calc((var(--count) - 1) * var(--step) + var(--pill-width));
+    }
+
     &-control,
     &-page {
         border: var(--border-width) solid var(--border-color);
@@ -19,8 +29,9 @@
     &-control {
         gap: var(--size-100);
 
-        .icon {
-            --size: var(--size-400);
+        @include tokens.state(disabled) {
+            opacity: 0.64;
+            pointer-events: none;
         }
     }
 
@@ -28,10 +39,6 @@
         font-variant: tabular-nums;
         min-width: var(--size);
 
-        @include tokens.state(active) {
-            --box-shadow: var(--box-shadow-100);
-        }
-
         &--dots {
             cursor: default;
             pointer-events: none;

package/src/components/pagination/scss/variables.scss

@@ -1,7 +1,37 @@
+@use '/tokens';
+
 .pagination {
     --gap: var(--size-300);
     --size: 32px;
 
+    &--dots {
+        --color: var(--color-text-500);
+        --dot-color: oklch(from var(--color) l c h / 0.2);
+        --dot-color-hover: oklch(from var(--color) l c h / 0.35);
+        --dot-gap: 6px;
+        --dot-size: 6px;
+        --focus-color: var(--color);
+        --height: 32px;
+        --pill-color: var(--color);
+        --pill-width: 20px;
+        --pressed-scale: 0.96;
+        --step: calc(var(--dot-size) + var(--dot-gap));
+        --track-color: var(--pill-color);
+        --transition-duration: 0.15s;
+        --transition-timing-function: ease-out;
+    }
+
+    // Twice the dots' tint, so the pill still reads as the active slot before its countdown fills it.
+    &--dots-autoplay {
+        --track-color: oklch(from var(--pill-color) l c h / 0.4);
+    }
+
+    &--dots-large {
+        --dot-gap: 8px;
+        --dot-size: 8px;
+        --pill-width: 28px;
+    }
+
     &-control,
     &-page {
         --background-hover: var(--color-grey-400);
@@ -24,6 +54,21 @@
         --color-default: var(--color-text-500);
     }
 
+    &-dot {
+        --mark-scale: none;
+        --near: clamp(0, 1 - max(var(--progress) - var(--index), var(--index) - var(--progress)), 1);
+
+        &:active {
+            --mark-scale: var(--pressed-scale);
+        }
+
+        @media (hover: hover) {
+            &:hover {
+                --dot-color: var(--dot-color-hover);
+            }
+        }
+    }
+
     &-page {
         --background-active: var(--color-white-300);
         --border-color-active: var(--color-border-300);
@@ -31,10 +76,24 @@
         --color-active: var(--color-text-500);
         --padding-horizontal: 0px;
 
+        @include tokens.state(active) {
+            --box-shadow: var(--box-shadow-100);
+        }
+
         &--dots {
             --background-hover: transparent;
             --background-pressed: transparent;
             --color-hover: var(--color-default);
         }
     }
+
+    // The leading edge travels in the first 60% of the move and the trailing edge in the last 60%.
+    &-pill {
+        --k: clamp(0, round(down, var(--progress), 1), max(var(--count) - 2, 0));
+        --t: clamp(0, var(--progress) - var(--k), 1);
+        --lead-t: clamp(0, var(--t) / 0.6, 1);
+        --trail-t: clamp(0, (var(--t) - 0.4) / 0.6, 1);
+        --lead: calc(var(--lead-t) * var(--lead-t) * (3 - 2 * var(--lead-t)));
+        --trail: calc(var(--trail-t) * var(--trail-t) * (3 - 2 * var(--trail-t)));
+    }
 }

package/src/components/progress/index.ts

@@ -1,5 +1,6 @@
 import { reactive } from '@esportsplus/reactivity';
 import { html, type Attributes } from '@esportsplus/template';
+import text from './text';
 import './scss/index.scss';
 
 
@@ -23,15 +24,18 @@ function clamp(value: number) {
 }
 
 
-export default ({ label, percent = true, state, status, value = 0, ...attributes }: A) => {
-    let s = state ?? reactive({ value });
+function bar({ label, percent = true, state, status, value = 0, ...attributes }: A) {
+    state ??= reactive({ value });
+
+    let current = () => clamp(state.value),
+        rounded = () => Math.round(current());
 
     return html`
         <div class='progress' ${attributes}>
             ${label && html`
                 <div class='progress-header'>
                     <span class='progress-label'>${label}</span>
-                    ${percent && html`<span class='progress-percent'>${() => `${Math.round(clamp(s.value))}%`}</span>`}
+                    ${percent && html`<span class='progress-percent'>${() => `${rounded()}%`}</span>`}
                 </div>
             `}
 
@@ -42,16 +46,22 @@ export default ({ label, percent = true, state, status, value = 0, ...attributes
                 class='progress-track'
                 role='progressbar'
                 ${{
-                    'aria-valuenow': () => Math.round(clamp(s.value)),
-                    'aria-valuetext': () => status ? status(clamp(s.value)) : `${Math.round(clamp(s.value))}%`
+                    'aria-valuenow': rounded,
+                    'aria-valuetext': () => status ? status(current()) : `${rounded()}%`
                 }}
             >
-                <div class='progress-indicator' style='${() => `translate: ${clamp(s.value) - 100}% 0`}'></div>
+                <div class='progress-indicator' style='${() => `translate: ${current() - 100}% 0`}'></div>
             </div>
 
-            ${status && html`<div class='progress-status'>${() => status(clamp(s.value))}</div>`}
+            ${status && html`<div class='progress-status'>${() => status(current())}</div>`}
         </div>
     `;
-};
+}
+
+
+const progress: typeof bar & { text: typeof text } = Object.assign(bar, { text });
+
 
+export default progress;
 export type { State as ProgressState };
+export type { ProgressTextState } from './text';