@esportsplus/ui 0.56.4 → 0.57.0

package/src/components/file-tree/scss/index.scss

@@ -1,138 +0,0 @@
-@use 'variables';
-
-.file-tree {
-    color: var(--color);
-    font-size: var(--font-size);
-    height: 100%;
-    position: relative;
-    width: 100%;
-
-    // Opens by animating the row track from 0fr to 1fr, so the folder grows to its real height without measuring.
-    &-content {
-        display: grid;
-        grid-template-rows: 0fr;
-        transition: grid-template-rows var(--duration) var(--ease);
-
-        &.--active {
-            grid-template-rows: 1fr;
-        }
-    }
-
-    &-clip {
-        min-height: 0;
-        overflow: hidden;
-        position: relative;
-    }
-
-    &-folder {
-        position: relative;
-    }
-
-    &-group {
-        display: flex;
-        flex-direction: column;
-        gap: var(--row-gap);
-
-        .file-tree-clip > & {
-            margin-inline-start: var(--indent);
-            padding-block: var(--row-gap);
-        }
-    }
-
-    &-icon {
-        flex-shrink: 0;
-        height: var(--icon-size);
-        width: var(--icon-size);
-    }
-
-    &-indicator {
-        background: var(--indicator-color);
-        border-radius: 6px;
-        height: 100%;
-        inset-inline-start: var(--indicator-offset);
-        position: absolute;
-        transition: background-color 300ms ease-in-out;
-        width: 1px;
-
-        &:hover {
-            background: var(--indicator-hover);
-        }
-    }
-
-    &-name {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    &-toggle {
-        background: transparent;
-        border: 0;
-        border-radius: var(--border-radius);
-        bottom: 4px;
-        color: inherit;
-        cursor: pointer;
-        font: inherit;
-        height: 32px;
-        inset-inline-end: 8px;
-        outline: 0 solid var(--focus-color);
-        outline-offset: 2px;
-        padding: 0 8px;
-        position: absolute;
-        transition: background-color 150ms ease-out;
-
-        &:focus-visible {
-            outline-width: 2px;
-        }
-
-        &:hover {
-            background: var(--active-background);
-        }
-    }
-
-    &-trigger {
-        align-items: center;
-        background: transparent;
-        border: 0;
-        border-radius: var(--border-radius);
-        color: inherit;
-        cursor: pointer;
-        display: flex;
-        font: inherit;
-        gap: var(--gap);
-        max-width: 100%;
-        outline: 0 solid var(--focus-color);
-        outline-offset: 1px;
-        padding: 0;
-        padding-inline-end: var(--padding-end);
-        text-align: start;
-        transition: background-color 200ms ease-in-out;
-        width: fit-content;
-
-        &:disabled {
-            cursor: not-allowed;
-            opacity: 0.5;
-        }
-
-        &:focus-visible {
-            outline-width: 2px;
-        }
-
-        &.--active:not(:disabled) {
-            background: var(--active-background);
-        }
-    }
-
-    &-viewport {
-        height: 100%;
-        overflow: auto;
-        padding-inline: var(--padding);
-        position: relative;
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-        &-content {
-            transition: none;
-        }
-    }
-}

package/src/components/file-tree/scss/variables.scss

@@ -1,18 +0,0 @@
-.file-tree {
-    --active-background: var(--color-grey-500);
-    --border-radius: 6px;
-    --color: var(--color-text-500);
-    --duration: 200ms;
-    --ease: cubic-bezier(0.23, 1, 0.32, 1);
-    --focus-color: oklch(from var(--color-text-500) l c h / 0.38);
-    --font-size: calc(var(--font-size-400) * 0.875);
-    --gap: 4px;
-    --icon-size: 16px;
-    --indent: 20px;
-    --indicator-color: var(--color-grey-500);
-    --indicator-hover: var(--color-border-500);
-    --indicator-offset: 6px;
-    --padding: 8px;
-    --padding-end: 4px;
-    --row-gap: 4px;
-}

package/src/components/filter-grid/index.ts

@@ -1,344 +0,0 @@
-import { html, type Attributes, type Renderable } from '@esportsplus/template';
-import { effect, onCleanup, reactive, untrack } from '@esportsplus/reactivity';
-import './scss/index.scss';
-
-
-type Filter<T> = {
-    id: string;
-    label: string;
-    match: (item: T) => boolean;
-};
-
-
-const ENTER: KeyframeAnimationOptions = { duration: 200, easing: 'cubic-bezier(0.23, 1, 0.32, 1)' };
-
-const LEAVE: KeyframeAnimationOptions = { duration: 140, easing: 'cubic-bezier(0.4, 0, 1, 1)' };
-
-const MOVE: KeyframeAnimationOptions = { duration: 420, easing: 'cubic-bezier(0.22, 1, 0.36, 1)' };
-
-
-let instance = 0;
-
-
-function reduced() {
-    return matchMedia('(prefers-reduced-motion: reduce)').matches;
-}
-
-
-export default <T>({
-    columns = 3,
-    emptyLabel = 'Nothing matches this filter',
-    filters,
-    gap = 8,
-    items,
-    label,
-    maxRows = 4,
-    render,
-    rowHeight = 72,
-    state = reactive({ active: filters[0]?.id ?? '' }),
-    ...attributes
-}: Attributes & {
-    columns?: number;
-    emptyLabel?: string;
-    filters: Filter<T>[];
-    gap?: number;
-    items: T[];
-    label: string;
-    maxRows?: number;
-    render: (item: T) => Renderable<unknown>;
-    rowHeight?: number;
-    state?: { active: string };
-}) => {
-    let cols = Math.max(1, Math.floor(columns)),
-        counts: Record<string, number> = {},
-        elements: HTMLElement[] = [],
-        group: HTMLElement | undefined,
-        heldFocus = false,
-        id = `filter-grid-${++instance}`,
-        leaving = new Set<HTMLElement>(),
-        list: HTMLElement | undefined,
-        observer: ResizeObserver | undefined,
-        rows = Math.min(Math.max(1, Math.ceil(items.length / cols)), Math.max(1, maxRows)),
-        status = reactive({ visible: 0 }),
-        thumb: HTMLElement | undefined;
-
-    for (let i = 0, n = filters.length; i < n; i++) {
-        let count = 0,
-            filter = filters[i];
-
-        for (let j = 0, m = items.length; j < m; j++) {
-            if (filter.match(items[j])) {
-                count++;
-            }
-        }
-
-        counts[filter.id] = count;
-    }
-
-    function current() {
-        return filters.find((filter) => filter.id === state.active) ?? filters[0];
-    }
-
-    function keydown(event: KeyboardEvent, index: number) {
-        let n = filters.length,
-            next: number;
-
-        switch (event.key) {
-            case 'ArrowDown':
-            case 'ArrowRight':
-                next = index + 1;
-                break;
-            case 'ArrowLeft':
-            case 'ArrowUp':
-                next = index - 1;
-                break;
-            case 'End':
-                next = n - 1;
-                break;
-            case 'Home':
-                next = 0;
-                break;
-            default:
-                return;
-        }
-
-        event.preventDefault();
-        next = (next + n) % n;
-
-        group?.querySelectorAll<HTMLElement>('.filter-grid-filter')[next]?.focus();
-        select(filters[next].id);
-    }
-
-    function place(animate: boolean) {
-        // Look up by index; the chip's --active class binding may not have flushed yet.
-        let chip = group?.querySelectorAll<HTMLElement>('.filter-grid-filter')[Math.max(0, filters.indexOf(current()))];
-
-        if (!chip || !thumb) {
-            return;
-        }
-
-        if (!animate) {
-            thumb.style.transition = 'none';
-        }
-
-        thumb.style.setProperty('--height', `${chip.offsetHeight}px`);
-        thumb.style.setProperty('--width', `${chip.offsetWidth}px`);
-        thumb.style.setProperty('--x', `${chip.offsetLeft}px`);
-        thumb.style.setProperty('--y', `${chip.offsetTop}px`);
-
-        if (!animate) {
-            thumb.offsetWidth;
-            thumb.style.transition = '';
-        }
-    }
-
-    function select(key: string) {
-        heldFocus = !!list && list !== document.activeElement && list.contains(document.activeElement);
-        state.active = key;
-    }
-
-    function settle() {
-        if (!heldFocus || !list) {
-            return;
-        }
-
-        heldFocus = false;
-
-        if (!list.contains(document.activeElement)) {
-            list.focus({ preventScroll: true });
-        }
-    }
-
-    // FLIP: measure, reflow into the new filter, then animate each card from where it was.
-    function update(animate: boolean) {
-        if (!list) {
-            return;
-        }
-
-        let bounds = list.getBoundingClientRect(),
-            filter = current(),
-            first = new Map<HTMLElement, DOMRect>(),
-            visible = 0;
-
-        for (let i = 0, n = elements.length; i < n; i++) {
-            let element = elements[i];
-
-            if (!element.hidden) {
-                first.set(element, element.getBoundingClientRect());
-            }
-        }
-
-        for (let i = 0, n = elements.length; i < n; i++) {
-            let element = elements[i];
-
-            if (!filter || filter.match(items[i])) {
-                visible++;
-
-                for (let animation of element.getAnimations()) {
-                    animation.cancel();
-                }
-
-                element.classList.remove('--leaving');
-                element.hidden = false;
-                element.removeAttribute('style');
-                leaving.delete(element);
-                continue;
-            }
-
-            // Already fading out from a previous change; let it finish.
-            if (leaving.has(element)) {
-                continue;
-            }
-
-            let rect = first.get(element);
-
-            if (!animate || !rect) {
-                element.hidden = true;
-                continue;
-            }
-
-            for (let animation of element.getAnimations()) {
-                animation.cancel();
-            }
-
-            // Pop out of flow at its current spot so the remaining cards can close the gap.
-            element.classList.add('--leaving');
-            element.style.height = `${rect.height}px`;
-            element.style.left = `${rect.left - bounds.left - list.clientLeft + list.scrollLeft}px`;
-            element.style.top = `${rect.top - bounds.top - list.clientTop + list.scrollTop}px`;
-            element.style.width = `${rect.width}px`;
-            leaving.add(element);
-
-            element.animate(
-                [{ opacity: 1, transform: 'scale(1)' }, { opacity: 0, transform: 'scale(0.98)' }],
-                LEAVE
-            ).onfinish = () => {
-                element.classList.remove('--leaving');
-                element.hidden = true;
-                element.removeAttribute('style');
-                leaving.delete(element);
-
-                if (leaving.size === 0) {
-                    settle();
-                }
-            };
-        }
-
-        status.visible = visible;
-
-        if (leaving.size === 0) {
-            settle();
-        }
-
-        if (!animate) {
-            return;
-        }
-
-        for (let i = 0, n = elements.length; i < n; i++) {
-            let element = elements[i];
-
-            if (element.hidden || leaving.has(element)) {
-                continue;
-            }
-
-            let last = element.getBoundingClientRect(),
-                rect = first.get(element);
-
-            if (!rect) {
-                element.animate([{ opacity: 0, transform: 'scale(0.97)' }, { opacity: 1, transform: 'scale(1)' }], ENTER);
-                continue;
-            }
-
-            let x = rect.left - last.left,
-                y = rect.top - last.top;
-
-            if (x !== 0 || y !== 0) {
-                element.animate([{ transform: `translate(${x}px, ${y}px)` }, { transform: 'none' }], MOVE);
-            }
-        }
-    }
-
-    let stop = effect(() => {
-        state.active;
-
-        untrack(() => {
-            let animate = !reduced();
-
-            place(animate);
-            update(animate);
-        });
-    });
-
-    onCleanup(() => {
-        observer?.disconnect();
-        stop();
-    });
-
-    return html`
-        <div class='filter-grid' ${attributes}>
-            <div
-                class='filter-grid-filters'
-                role='radiogroup'
-                aria-controls='${id}'
-                aria-label='${label}'
-                ${{
-                    onconnect: (element: HTMLElement) => {
-                        group = element;
-                        thumb = element.querySelector<HTMLElement>('.filter-grid-thumb') ?? undefined;
-                        place(false);
-
-                        // Chips can wrap onto new lines as the container resizes.
-                        observer = new ResizeObserver(() => place(false));
-                        observer.observe(element);
-                    }
-                }}
-            >
-                <span class='filter-grid-thumb' aria-hidden='true'></span>
-                ${filters.map((filter, index) => html`
-                    <button
-                        class='filter-grid-filter ${() => state.active === filter.id ? '--active' : ''}'
-                        type='button'
-                        role='radio'
-                        aria-checked='${() => String(state.active === filter.id)}'
-                        aria-label='${filter.label}, ${counts[filter.id]} of ${items.length}'
-                        tabindex='${() => state.active === filter.id ? 0 : -1}'
-                        onclick='${() => select(filter.id)}'
-                        onkeydown='${(event: KeyboardEvent) => keydown(event, index)}'
-                    >
-                        ${filter.label}
-                        <span class='filter-grid-count'>${counts[filter.id]}</span>
-                    </button>
-                `)}
-            </div>
-
-            <div class='filter-grid-body'>
-                <ul
-                    class='filter-grid-items ${Math.ceil(items.length / cols) > Math.max(1, maxRows) ? 'filter-grid-items--capped' : ''}'
-                    id='${id}'
-                    tabindex='-1'
-                    style='--columns: ${cols}; --gap: ${gap}px; --row-height: ${rowHeight}px; --rows: ${rows};'
-                    ${{
-                        onconnect: (element: HTMLElement) => {
-                            elements = Array.from(element.children).filter((child): child is HTMLElement => child instanceof HTMLLIElement);
-                            list = element;
-                            update(false);
-                        }
-                    }}
-                >
-                    ${items.map((item) => html`<li class='filter-grid-item'>${render(item)}</li>`)}
-                </ul>
-
-                <div class='filter-grid-empty ${() => status.visible === 0 ? '--active' : ''}'>
-                    ${emptyLabel}
-                </div>
-            </div>
-
-            <p class='--hidden-offcanvas' aria-live='polite'>
-                ${() => `${current()?.label ?? ''}: ${status.visible} of ${items.length} shown`}
-            </p>
-        </div>
-    `;
-};
-
-
-export type { Filter };

package/src/components/filter-grid/scss/index.scss

@@ -1,142 +0,0 @@
-@use '/tokens';
-@use 'variables';
-
-.filter-grid {
-    min-width: 0;
-    width: 100%;
-
-    &-body {
-        margin-top: var(--spacer);
-        position: relative;
-    }
-
-    &-count {
-        font-size: 0.84em;
-        font-variant: tabular-nums;
-        opacity: var(--opacity);
-    }
-
-    &-empty {
-        color: var(--empty-color);
-        display: grid;
-        font-size: var(--font-size-300);
-        inset: 0;
-        opacity: 0;
-        place-items: center;
-        pointer-events: none;
-        position: absolute;
-        transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1);
-
-        @include tokens.state(active) {
-            opacity: 1;
-        }
-    }
-
-    &-filter {
-        align-items: center;
-        background: transparent;
-        border: var(--border-width-400) solid var(--border-color);
-        border-radius: var(--border-radius);
-        color: var(--color);
-        cursor: pointer;
-        display: inline-flex;
-        font-size: var(--font-size);
-        font-weight: var(--font-weight);
-        gap: var(--size-200);
-        height: var(--height);
-        outline: none;
-        padding: 0 var(--padding-horizontal);
-        position: relative;
-        touch-action: manipulation;
-        transition: border-color var(--transition-duration), color var(--transition-duration);
-        user-select: none;
-        white-space: nowrap;
-
-        &:focus-visible {
-            border-color: var(--border-color-focus);
-        }
-
-        @include tokens.state(active) {
-            --count-color: currentColor;
-            --opacity: 0.7;
-            border-color: transparent;
-            color: var(--color-active);
-        }
-
-        .filter-grid-count {
-            color: var(--count-color);
-        }
-    }
-
-    &-filters {
-        align-items: center;
-        display: flex;
-        flex-wrap: wrap;
-        gap: var(--gap);
-        isolation: isolate;
-        position: relative;
-    }
-
-    &-item {
-        background: var(--background);
-        border: var(--border-width-400) solid var(--border-color);
-        border-radius: var(--border-radius);
-        box-shadow: var(--box-shadow);
-        min-width: 0;
-        overflow: hidden;
-        padding: var(--padding);
-
-        &.--leaving {
-            pointer-events: none;
-            position: absolute;
-        }
-
-        &[hidden] {
-            display: none;
-        }
-    }
-
-    &-items {
-        display: grid;
-        gap: var(--gap);
-        grid-auto-rows: var(--row-height);
-        grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
-        height: calc(var(--rows) * var(--row-height) + (var(--rows) - 1) * var(--gap));
-        list-style: none;
-        margin: 0;
-        outline: none;
-        overflow-y: auto;
-        overscroll-behavior: contain;
-        padding: 0;
-        position: relative;
-
-        &--capped {
-            scrollbar-gutter: stable;
-        }
-    }
-
-    &-thumb {
-        background: var(--background);
-        border-radius: var(--border-radius);
-        height: var(--height, 0px);
-        left: 0;
-        pointer-events: none;
-        position: absolute;
-        top: 0;
-        transition:
-            height var(--transition-duration) var(--timing-function),
-            translate var(--transition-duration) var(--timing-function),
-            width var(--transition-duration) var(--timing-function);
-        translate: var(--x, 0px) var(--y, 0px);
-        width: var(--width, 0px);
-        z-index: -1;
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-        &-empty,
-        &-filter,
-        &-thumb {
-            transition: none;
-        }
-    }
-}

package/src/components/filter-grid/scss/variables.scss

@@ -1,41 +0,0 @@
-.filter-grid {
-    --empty-color: var(--color-text-300);
-    --spacer: var(--size-300);
-
-    &-count {
-        --opacity: 1;
-    }
-
-    &-filter {
-        --border-color: var(--color-border-400);
-        --border-color-focus: var(--color-blue-400);
-        --border-radius: var(--border-radius-300);
-        --color: var(--color-text-400);
-        --color-active: var(--color-white-400);
-        --count-color: var(--color-text-300);
-        --font-size: var(--font-size-300);
-        --font-weight: var(--font-weight-500);
-        --height: var(--size-700);
-        --padding-horizontal: var(--size-300);
-        --transition-duration: 0.16s;
-    }
-
-    &-filters {
-        --gap: var(--size-100);
-    }
-
-    &-item {
-        --background: var(--color-white-300);
-        --border-color: var(--color-border-300);
-        --border-radius: var(--border-radius-600);
-        --box-shadow: var(--box-shadow-200);
-        --padding: var(--size-300);
-    }
-
-    &-thumb {
-        --background: var(--color-black-400);
-        --border-radius: var(--border-radius-300);
-        --timing-function: cubic-bezier(0.23, 1, 0.32, 1);
-        --transition-duration: 0.28s;
-    }
-}

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

@@ -1,26 +0,0 @@
-import { component, html, type Attributes } from '@esportsplus/template';
-import './scss/index.scss';
-
-
-type A = Attributes & {
-    from?: string;
-    // Multiplies how far the gradient travels per loop; 2 sweeps twice the distance in the same time.
-    speed?: number;
-    to?: string;
-};
-
-
-export default component<A>(
-    function(this, { from, speed = 1, to, ...attributes }, content) {
-        return html`
-            <span
-                class='gradient-text'
-                style='${`--background-size: ${speed * 300}%;${from ? ` --color-from: ${from};` : ''}${to ? ` --color-to: ${to};` : ''}`}'
-                ${this?.attributes}
-                ${attributes}
-            >
-                ${content}
-            </span>
-        `;
-    }
-);