@esportsplus/ui 0.55.0 → 0.56.3

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

@@ -0,0 +1,182 @@
+@use 'variables';
+
+// Edge alignment: thumb centres travel from half a thumb in at one end to half a thumb in at the other, so a thumb
+// at min or max never hangs past the track.
+$travel: 'var(--thumb-size) / 2 + var(--position) * (100% - var(--thumb-size))';
+
+.slider {
+    color: var(--color);
+    display: flex;
+    flex-direction: column;
+    font-size: var(--font-size);
+    gap: 8px;
+
+    &-control {
+        display: flex;
+        position: relative;
+        touch-action: none;
+        user-select: none;
+    }
+
+    &-header {
+        align-items: center;
+        display: flex;
+        gap: 4px;
+        justify-content: space-between;
+    }
+
+    &-indicator {
+        background: var(--indicator-color);
+        border-radius: 999px;
+        position: absolute;
+        transition: none;
+    }
+
+    &-label {
+        font-weight: var(--font-weight-500);
+    }
+
+    &-output {
+        font-variant-numeric: tabular-nums;
+        margin-inline-start: auto;
+    }
+
+    &-thumb {
+        background: var(--thumb-background);
+        border: 1px solid var(--thumb-border);
+        border-radius: 50%;
+        box-shadow: var(--thumb-shadow);
+        cursor: grab;
+        height: var(--thumb-size);
+        outline: none;
+        position: absolute;
+        transition:
+            box-shadow 150ms ease-out,
+            scale 150ms ease-out;
+        width: var(--thumb-size);
+
+        &:focus-visible {
+            box-shadow: 0 0 0 3px var(--ring);
+        }
+
+        &.--active {
+            box-shadow: none;
+            cursor: grabbing;
+            scale: 1.2;
+        }
+    }
+
+    &-track {
+        flex-grow: 1;
+        position: relative;
+
+        // The visible rail stops a hair short of each end, so its rounded caps sit under the thumbs at min and max.
+        &::before {
+            background: var(--track-color);
+            border-radius: 999px;
+            content: '';
+            position: absolute;
+        }
+    }
+
+
+    &--horizontal {
+        width: 100%;
+
+        .slider-control {
+            align-items: center;
+            min-height: var(--thumb-size);
+            min-width: 176px;
+            width: 100%;
+        }
+
+        .slider-indicator {
+            inset-block: 0;
+            inset-inline-end: calc(100% - (var(--thumb-size) / 2 + var(--end) * (100% - var(--thumb-size))));
+            inset-inline-start: calc(var(--thumb-size) / 2 + var(--start) * (100% - var(--thumb-size)));
+
+            &--single {
+                inset-inline-start: var(--rail-inset);
+            }
+        }
+
+        .slider-thumb {
+            inset-inline-start: calc(#{$travel});
+            top: 50%;
+            translate: -50% -50%;
+
+            &:dir(rtl) {
+                translate: 50% -50%;
+            }
+        }
+
+        .slider-track {
+            height: var(--track-size);
+
+            &::before {
+                inset: 0 var(--rail-inset);
+            }
+        }
+    }
+
+    &--vertical {
+        align-items: center;
+        height: 100%;
+
+        .slider-control {
+            flex-direction: column;
+            height: 100%;
+            justify-content: center;
+            min-height: 176px;
+        }
+
+        .slider-indicator {
+            bottom: calc(var(--thumb-size) / 2 + var(--start) * (100% - var(--thumb-size)));
+            inset-inline: 0;
+            top: calc(100% - (var(--thumb-size) / 2 + var(--end) * (100% - var(--thumb-size))));
+
+            &--single {
+                bottom: var(--rail-inset);
+            }
+        }
+
+        .slider-thumb {
+            bottom: calc(#{$travel});
+            left: 50%;
+            translate: -50% 50%;
+        }
+
+        .slider-track {
+            width: var(--track-size);
+
+            &::before {
+                inset: var(--rail-inset) 0;
+            }
+        }
+    }
+
+    &.--disabled {
+        opacity: 0.64;
+
+        .slider-control {
+            pointer-events: none;
+        }
+    }
+
+    // A thumb under a finger gets a larger target.
+    @media (pointer: coarse) {
+        & {
+            --thumb-size: 20px;
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &-thumb {
+            transition: box-shadow 150ms ease-out;
+
+            &.--active {
+                scale: 1;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,15 @@
+.slider {
+    --color: var(--color-text-500);
+    --end: 0;
+    --font-size: calc(var(--font-size-400) * 0.875);
+    --indicator-color: var(--color-text-500);
+    --rail-inset: 2px;
+    --ring: oklch(from var(--color-text-500) l c h / 0.24);
+    --start: 0;
+    --thumb-background: var(--color-white-300);
+    --thumb-border: var(--color-border-300);
+    --thumb-shadow: 0 1px 2px oklch(from var(--color-black-300) l c h / 0.05), 0 1px oklch(from var(--color-black-300) l c h / 0.04);
+    --thumb-size: 16px;
+    --track-color: var(--color-border-300);
+    --track-size: 4px;
+}

package/src/components/sliding-tabs/index.ts

@@ -0,0 +1,291 @@
+import { html, type Attributes, type Renderable } from '@esportsplus/template';
+import { effect, onCleanup, reactive, untrack } from '@esportsplus/reactivity';
+import '~/components/tabs/scss/index.scss';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    [SLIDING_TABS_PANEL]?: Attributes;
+    [SLIDING_TABS_TAB]?: Attributes;
+    label: string;
+    selected?: string;
+    state?: State;
+    tabs: Tab[];
+};
+
+type State = {
+    selected: string;
+};
+
+type Tab = {
+    content: Renderable<unknown>;
+    id: string;
+    label: string;
+};
+
+
+const EASE_OUT = 'cubic-bezier(0.23, 1, 0.32, 1)';
+
+const SLIDING_TABS_PANEL = Symbol.for('@esportsplus/ui/sliding-tabs.panel');
+
+const SLIDING_TABS_TAB = Symbol.for('@esportsplus/ui/sliding-tabs.tab');
+
+
+let uid = 0;
+
+
+function instant(element: HTMLElement, update: VoidFunction) {
+    element.classList.add('--instant');
+    update();
+    getComputedStyle(element).opacity;
+    element.classList.remove('--instant');
+}
+
+function reduced() {
+    return matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
+
+const slidingTabs = ({ label, selected, state, tabs, ...attributes }: A) => {
+    let applied = '',
+        hover: HTMLElement | undefined,
+        id = `sliding-tabs-${++uid}`,
+        initial = '',
+        list: HTMLElement | undefined,
+        observer: ResizeObserver | undefined,
+        panels = new Map<string, HTMLElement>(),
+        running = new Map<HTMLElement, Animation>(),
+        s = state ?? reactive({ selected: selected ?? tabs[0]?.id ?? '' }),
+        tabRefs = new Map<string, HTMLElement>(),
+        underline: HTMLElement | undefined;
+
+    initial = untrack(() => s.selected);
+
+    function animate(panel: HTMLElement, keyframes: Keyframe[], duration: number) {
+        running.get(panel)?.cancel();
+
+        let animation = panel.animate(keyframes, { duration, easing: EASE_OUT });
+
+        running.set(panel, animation);
+
+        return animation;
+    }
+
+    function apply(next: string) {
+        let previous = applied,
+            target = measure(next);
+
+        if (!list || !underline || !target || previous === next) {
+            return;
+        }
+
+        applied = next;
+
+        let from = index(previous),
+            to = index(next),
+            dir = to > from ? 1 : -1,
+            reduce = reduced();
+
+        underline.classList.toggle('--forward', target[1] > parseFloat(getComputedStyle(underline).getPropertyValue('--sliding-tabs-right')));
+        place(target);
+
+        let incoming = panels.get(next),
+            outgoing = panels.get(previous);
+
+        if (outgoing) {
+            outgoing.classList.remove('--active');
+            outgoing.classList.add('--leaving');
+            outgoing.inert = true;
+
+            // Softer and faster than the entrance, so the old panel is gone before the new one draws the eye.
+            animate(outgoing, [
+                { opacity: 1, translate: '0 0' },
+                { opacity: 0, translate: `${reduce ? 0 : dir * -6}px 0` }
+            ], 150).onfinish = () => {
+                outgoing.classList.remove('--leaving');
+                outgoing.inert = false;
+            };
+        }
+
+        if (incoming) {
+            incoming.classList.remove('--leaving');
+            incoming.classList.add('--active');
+            incoming.inert = false;
+
+            animate(incoming, [
+                { filter: reduce ? 'blur(0px)' : 'blur(4px)', opacity: 0, translate: `${reduce ? 0 : dir * 8}px 0` },
+                { filter: 'blur(0px)', opacity: 1, translate: '0 0' }
+            ], 250);
+        }
+    }
+
+    function enter(tab: string, e: PointerEvent) {
+        let element = tabRefs.get(tab);
+
+        if (e.pointerType === 'touch' || !hover || !element) {
+            return;
+        }
+
+        let pill = hover,
+            update = () => {
+                pill.style.translate = `${element.offsetLeft}px 0`;
+                pill.style.width = `${element.offsetWidth}px`;
+            };
+
+        // Fresh entries fade in where the pointer is instead of sliding over from where it last left.
+        if (pill.classList.contains('--active')) {
+            update();
+        }
+        else {
+            instant(pill, update);
+            pill.classList.add('--active');
+        }
+    }
+
+    function index(tab: string) {
+        return tabs.findIndex((t) => t.id === tab);
+    }
+
+    function measure(tab: string) {
+        let element = tabRefs.get(tab);
+
+        return element ? [element.offsetLeft, element.offsetLeft + element.offsetWidth] as const : null;
+    }
+
+    function place(target: readonly [number, number]) {
+        underline!.style.setProperty('--sliding-tabs-left', `${target[0]}px`);
+        underline!.style.setProperty('--sliding-tabs-right', `${target[1]}px`);
+    }
+
+    function select(tab: string) {
+        s.selected = tab;
+    }
+
+    let stop = effect(() => {
+        apply(s.selected);
+    });
+
+    onCleanup(() => {
+        observer?.disconnect();
+        stop();
+
+        for (let animation of running.values()) {
+            animation.cancel();
+        }
+    });
+
+    return html`
+        <div class='sliding-tabs' ${attributes}>
+            <div
+                class='sliding-tabs-list'
+                role='tablist'
+                ${{
+                    'aria-label': label,
+                    onconnect: (element: HTMLElement) => {
+                        let target = measure(s.selected);
+
+                        list = element;
+                        applied = s.selected;
+
+                        if (target && underline) {
+                            instant(underline, () => place(target));
+                        }
+
+                        element.classList.add('--ready');
+
+                        // Tabs change width with the viewport, so the underline re-fits without animating.
+                        observer = new ResizeObserver(() => {
+                            let target = measure(applied);
+
+                            if (target && underline) {
+                                instant(underline, () => place(target));
+                            }
+                        });
+                        observer.observe(element);
+                    },
+                    onkeydown: (e: KeyboardEvent) => {
+                        let current = index(s.selected),
+                            target = ({
+                                ArrowLeft: current - 1,
+                                ArrowRight: current + 1,
+                                End: tabs.length - 1,
+                                Home: 0
+                            } as Record<string, number>)[e.key];
+
+                        if (target === undefined) {
+                            return;
+                        }
+
+                        e.preventDefault();
+
+                        // Automatic activation: arrows select as well as focus.
+                        let next = tabs[(target + tabs.length) % tabs.length].id;
+
+                        select(next);
+                        tabRefs.get(next)?.focus();
+                    },
+                    onpointerleave: () => {
+                        hover?.classList.remove('--active');
+                    }
+                }}
+            >
+                <span
+                    aria-hidden='true'
+                    class='sliding-tabs-hover'
+                    ${{ onrender: (element: HTMLElement) => { hover = element; } }}
+                ></span>
+                ${tabs.map((tab) => html`
+                    <button
+                        class='sliding-tabs-tab'
+                        id='${id}-tab-${tab.id}'
+                        role='tab'
+                        type='button'
+                        ${attributes[SLIDING_TABS_TAB]}
+                        ${{
+                            'aria-controls': `${id}-panel-${tab.id}`,
+                            'aria-selected': () => String(s.selected === tab.id),
+                            class: () => s.selected === tab.id && '--active',
+                            onclick: () => select(tab.id),
+                            onpointerenter: (e: PointerEvent) => enter(tab.id, e),
+                            onrender: (element: HTMLElement) => {
+                                tabRefs.set(tab.id, element);
+                            },
+                            tabindex: () => s.selected === tab.id ? 0 : -1
+                        }}
+                    >
+                        <span class='sliding-tabs-label'>${tab.label}</span>
+                    </button>
+                `)}
+                <span
+                    aria-hidden='true'
+                    class='sliding-tabs-underline'
+                    ${{ onrender: (element: HTMLElement) => { underline = element; } }}
+                ></span>
+            </div>
+
+            <div class='sliding-tabs-panels tabs'>
+                ${tabs.map((tab) => html`
+                    <div
+                        class='sliding-tabs-panel tabs-content ${tab.id === initial && '--active'}'
+                        id='${id}-panel-${tab.id}'
+                        role='tabpanel'
+                        tabindex='0'
+                        ${attributes[SLIDING_TABS_PANEL]}
+                        ${{
+                            'aria-labelledby': `${id}-tab-${tab.id}`,
+                            onrender: (element: HTMLElement) => {
+                                panels.set(tab.id, element);
+                            }
+                        }}
+                    >
+                        ${tab.content}
+                    </div>
+                `)}
+            </div>
+        </div>
+    `;
+};
+
+
+export default Object.assign(slidingTabs, { panel: SLIDING_TABS_PANEL, tab: SLIDING_TABS_TAB } as const);
+export type { State, Tab };

package/src/components/sliding-tabs/scss/index.scss

@@ -0,0 +1,174 @@
+@use '/tokens';
+@use 'variables';
+
+// Registered so the two ends of the underline can transition independently.
+@property --sliding-tabs-left {
+    inherits: false;
+    initial-value: 0px;
+    syntax: '<length>';
+}
+
+@property --sliding-tabs-right {
+    inherits: false;
+    initial-value: 0px;
+    syntax: '<length>';
+}
+
+.sliding-tabs {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+
+
+    &-hover {
+        background: var(--hover-background);
+        border-radius: calc(var(--radius) - 2px);
+        height: calc(var(--tab-height) - var(--hover-inset) * 2);
+        left: 0;
+        opacity: 0;
+        pointer-events: none;
+        position: absolute;
+        top: var(--hover-inset);
+        transition:
+            opacity var(--hover-duration-out) cubic-bezier(0.23, 1, 0.32, 1),
+            translate var(--hover-duration) var(--spring),
+            width var(--hover-duration) var(--spring);
+
+        @include tokens.state(active) {
+            opacity: 1;
+            transition-duration: var(--hover-duration-in), var(--hover-duration), var(--hover-duration);
+        }
+    }
+
+    &-label {
+        position: relative;
+        transition: scale 0.15s ease-out;
+    }
+
+    &-list {
+        border-bottom: var(--border-width-400) solid var(--border-color);
+        display: flex;
+        gap: 2px;
+        padding-inline: 2px;
+        position: relative;
+    }
+
+    &-panel {
+        border-radius: var(--radius);
+        color: var(--panel-color);
+        font-size: var(--font-size);
+        grid-area: 1 / 1;
+        line-height: 1.625;
+        outline: none;
+        padding: var(--panel-padding);
+        text-wrap: pretty;
+
+        &.--active,
+        &.--leaving {
+            display: block;
+        }
+
+        &.--leaving {
+            pointer-events: none;
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--focus-color);
+        }
+    }
+
+    &-panels {
+        display: grid;
+    }
+
+    &-tab {
+        align-items: center;
+        background: transparent;
+        border: 0;
+        border-radius: var(--radius);
+        color: var(--color);
+        cursor: pointer;
+        display: flex;
+        font-size: var(--font-size);
+        font-weight: var(--font-weight);
+        height: var(--tab-height);
+        outline: none;
+        padding-inline: var(--tab-padding);
+        position: relative;
+        touch-action: manipulation;
+        transition: color 0.15s ease-out;
+        user-select: none;
+        white-space: nowrap;
+
+        // Only the label presses in; scaling the tab would skew the box the underline is measured from.
+        &:active .sliding-tabs-label {
+            scale: 0.96;
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--focus-color);
+            outline-offset: -4px;
+        }
+
+        &:hover,
+        &.--active {
+            color: var(--color-active);
+        }
+    }
+
+    // One full-width line clipped down to the tab, so the stretch costs no layout.
+    &-underline {
+        background: var(--underline-color);
+        bottom: calc(var(--border-width-400) * -1);
+        clip-path: inset(0 calc(100% - var(--sliding-tabs-right)) 0 var(--sliding-tabs-left) round 1px);
+        display: none;
+        height: var(--underline-height);
+        inset-inline: 0;
+        pointer-events: none;
+        position: absolute;
+        transition:
+            --sliding-tabs-left var(--lead-duration) var(--spring),
+            --sliding-tabs-right var(--tail-duration) var(--spring);
+
+        &.--forward {
+            transition:
+                --sliding-tabs-left var(--tail-duration) var(--spring),
+                --sliding-tabs-right var(--lead-duration) var(--spring);
+        }
+
+        .sliding-tabs-list.--ready > & {
+            display: block;
+        }
+    }
+
+    &-hover.--instant,
+    &-underline.--instant {
+        transition: none;
+    }
+
+    // Shown until the clipped underline has been measured.
+    &-list:not(.--ready) &-tab.--active::after {
+        background: var(--underline-color);
+        border-radius: 1px;
+        bottom: calc(var(--border-width-400) * -1);
+        content: '';
+        height: var(--underline-height);
+        inset-inline: 0;
+        position: absolute;
+    }
+
+
+    @media (max-width: 639px) {
+        --tab-padding: 10px;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        --hover-duration: 0s;
+        --lead-duration: 0s;
+        --tail-duration: 0s;
+
+        &-label {
+            transition: none;
+        }
+    }
+}

package/src/components/sliding-tabs/scss/variables.scss

@@ -0,0 +1,34 @@
+.sliding-tabs {
+    --border-color: var(--color-border-300);
+    --color: var(--color-text-300);
+    --color-active: var(--color-text-500);
+    --focus-color: var(--color-text-500);
+    --font-size: var(--font-size-400);
+    --font-weight: var(--font-weight-500);
+    --hover-background: var(--color-grey-400);
+    --hover-duration: 0.19s;
+    --hover-duration-in: 0.15s;
+    --hover-duration-out: 0.1s;
+    --hover-inset: 6px;
+    // The edge facing the new tab leads; the far edge lets go later and catches up, stretching the line.
+    --lead-duration: 0.25s;
+    --panel-color: var(--color-text-300);
+    --panel-padding: 20px var(--size-400) 4px;
+    --radius: var(--border-radius-400);
+    --spring: linear(0, 0.0432 4.2%, 0.1402 8.3%, 0.2575 12.5%, 0.3764 16.7%, 0.4867 20.8%, 0.584 25%, 0.667 29.2%, 0.7361 33.3%, 0.7925 37.5%, 0.838 41.7%, 0.8743 45.8%, 0.9029 50%, 0.9254 54.2%, 0.9428 58.3%, 0.9564 62.5%, 0.9668 66.7%, 0.9748 70.8%, 0.9809 75%, 0.9856 79.2%, 0.9892 83.3%, 0.9918 87.5%, 0.9939 91.7%, 0.9954 95.8%, 1);
+    --tab-height: 44px;
+    --tab-padding: var(--size-400);
+    --tail-duration: 0.425s;
+    --underline-color: var(--color-text-500);
+    --underline-height: 2px;
+
+
+    &--accent {
+        --underline-color: var(--color-blue-400);
+    }
+
+    &--snappy {
+        --lead-duration: 0.2s;
+        --tail-duration: 0.2s;
+    }
+}