@esportsplus/ui 0.55.0 → 0.56.3

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

@@ -0,0 +1,138 @@
+@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

@@ -0,0 +1,18 @@
+.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

@@ -0,0 +1,344 @@
+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

@@ -0,0 +1,142 @@
+@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

@@ -0,0 +1,41 @@
+.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/form/scss/index.scss

@@ -5,6 +5,7 @@
     flex-wrap: wrap;
     gap: var(--gap-vertical) var(--gap-horizontal);
     justify-content: flex-start;
-    margin: var(--margin-vertical) var(--margin-horizontal);
+    margin-block: var(--margin-vertical);
+    margin-inline: var(--margin-horizontal);
     position: relative;
 }