@esportsplus/ui 0.55.0 → 0.56.2

package/src/components/swipe-deck/scss/variables.scss

@@ -0,0 +1,24 @@
+.swipe-deck {
+    --accent: var(--color-blue-400);
+    --background: var(--color-white-400);
+    --border-color: var(--color-border-300);
+    --border-radius: 14px;
+    --box-shadow: 0 1px 2px oklch(from var(--color-black-300) l c h / 0.05), 0 6px 14px -12px oklch(from var(--color-black-300) l c h / 0.4);
+    --box-shadow-active: 0 1px 2px oklch(from var(--color-black-300) l c h / 0.06), 0 16px 32px -18px oklch(from var(--color-black-300) l c h / 0.55);
+    --color: var(--color-text-400);
+    --color-muted: var(--color-text-300);
+    --drag-scale: 1.03;
+    --empty-background: var(--color-grey-400);
+    --height: 180px;
+    --inset: 20px;
+    --offset: 10px;
+    --shrink: 0.045;
+
+    // Springs sampled from the motion configs the component was cloned from (stiffness / damping / mass).
+    // 520 / 34 / 0.45
+    --spring-cell: 387ms linear(0, 0.104, 0.286, 0.465, 0.606, 0.714, 0.793, 0.852, 0.895, 0.925, 0.946, 0.962, 0.973, 0.981, 0.986, 0.99, 0.993, 0.995, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1);
+    // 260 / 34 / 0.8
+    --spring-crossfade: 730ms linear(0, 0.102, 0.279, 0.444, 0.582, 0.688, 0.769, 0.829, 0.874, 0.906, 0.931, 0.949, 0.962, 0.972, 0.979, 0.985, 0.989, 0.992, 0.994, 0.995, 0.997, 0.998, 0.998, 0.999, 1);
+    // 260 / 34 / 1
+    --spring-settle: 673ms linear(0, 0.076, 0.226, 0.383, 0.524, 0.641, 0.732, 0.802, 0.854, 0.893, 0.922, 0.943, 0.959, 0.97, 0.978, 0.984, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.998, 0.999, 1);
+}

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

@@ -24,7 +24,7 @@
     &--scroll {
         display: flex;
         gap: var(--gap-vertical) var(--gap-horizontal);
-        transition: transform var(--transition-duration) var(--transition-timing-function);
+        transition: translate var(--transition-duration) var(--transition-timing-function);
 
         > .tabs-content {
             display: flex;
@@ -38,14 +38,14 @@
     }
 
     &--slide {
-        transform: translateX(calc(var(--i) * (100% + var(--gap-horizontal))));
+        translate: calc(var(--i) * (100% + var(--gap-horizontal)));
     }
 
     // The track needs a definite height from its clipping parent.
     &--scroll {
         flex-direction: column;
         height: 100%;
-        transform: translateY(calc(var(--i) * (100% + var(--gap-vertical))));
+        translate: 0 calc(var(--i) * (100% + var(--gap-vertical)));
 
         > .tabs-content {
             flex-basis: 100%;

package/src/components/tag-input/index.ts

@@ -0,0 +1,415 @@
+import { html, type Attributes, type Renderable } from '@esportsplus/template';
+import { reactive, ReactiveArray, type Reactive } from '@esportsplus/reactivity';
+import input from '~/components/input';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    [TAG_INPUT_FIELD]?: Field;
+    hint?: Renderable<unknown>;
+    label: string;
+    name?: string;
+    placeholder?: string;
+    state?: State;
+    tags?: string[];
+};
+
+type D = Attributes & Pick<A, typeof TAG_INPUT_FIELD>;
+
+type Field = Parameters<typeof input>[0];
+
+type State = {
+    active: boolean;
+    error: string;
+    tags: Reactive<string[]>;
+};
+
+
+// Exits are quicker than the pop, so removing never holds the eye.
+const LEAVE: KeyframeAnimationOptions = { duration: 150, easing: 'cubic-bezier(0.23, 1, 0.32, 1)' };
+
+// A chip is a small physical thing, so it lands with the faintest settle.
+const POP: KeyframeAnimationOptions = {
+    duration: 380,
+    easing: 'linear(0, 0.035, 0.107, 0.208, 0.31, 0.42, 0.524, 0.61, 0.692, 0.757, 0.815, 0.863, 0.898, 0.928, 0.95, 0.968, 0.981, 0.989, 0.996, 1, 1.003, 1.004, 1.005, 1.005, 1.005, 1.005, 1.004, 1.004, 1.003, 1.003, 1)'
+};
+
+// Decaying swings say "already here" without reading as an error.
+const SHAKE: KeyframeAnimationOptions = { duration: 300, easing: 'cubic-bezier(0.23, 1, 0.32, 1)' };
+
+// No bounce on the slide: the row closing up should read as settled.
+const SLIDE: KeyframeAnimationOptions = {
+    duration: 410,
+    easing: 'linear(0, 0.038, 0.116, 0.219, 0.326, 0.43, 0.518, 0.602, 0.674, 0.731, 0.782, 0.825, 0.858, 0.886, 0.91, 0.928, 0.942, 0.955, 0.964, 0.971, 0.977, 0.982, 0.986, 0.989, 0.991, 0.993, 0.995, 0.996, 0.997, 0.997, 1)'
+};
+
+const SWAP: KeyframeAnimationOptions = { ...SLIDE, delay: 60, duration: 300, fill: 'backwards' };
+
+const TAG_INPUT_FIELD = Symbol.for('@esportsplus/ui/tag-input.field');
+
+
+let uid = 0;
+
+
+function key(tag: string) {
+    return tag.toLowerCase();
+}
+
+
+export default Object.assign(
+    function(
+        this: { attributes?: D } | void,
+        {
+            hint,
+            label,
+            name,
+            placeholder = 'Add a tag',
+            tags = [],
+            state = reactive({ active: false, error: '', tags: new ReactiveArray<string>(tags) }),
+            ...attributes
+        }: A
+    ) {
+        let flips = new Map<Element, Animation>(),
+            id = `tag-input-${++uid}`,
+            list: HTMLElement | undefined,
+            local = reactive({ announcement: '', armed: '' }),
+            reduced = matchMedia('(prefers-reduced-motion: reduce)'),
+            shakes = new Map<Element, Animation>(),
+            slot = html.reactive(state.tags, (tag) => html`
+                <li
+                    class='tag-input-chip ${() => local.armed === key(tag) && '--active'}'
+                    data-key='${key(tag)}'
+                >
+                    <span aria-hidden='true' class='tag-input-chip-body'></span>
+                    <span class='tag-input-chip-text'>${tag}</span>
+                    <span class='tag-input-chip-remove'>
+                        <button
+                            aria-label='Remove ${tag}'
+                            class='tag-input-chip-button'
+                            type='button'
+                            ${{
+                                onclick: () => {
+                                    remove(key(tag));
+                                    field()?.focus();
+                                },
+                                // Keeps focus in the field, so typing carries straight on.
+                                onpointerdown: (e: PointerEvent) => {
+                                    e.preventDefault();
+                                }
+                            }}
+                        >
+                            <svg aria-hidden='true' fill='none' stroke='currentColor' stroke-linecap='round' stroke-width='1.5' viewBox='0 0 16 16'>
+                                <path d='m4.5 4.5 7 7M11.5 4.5l-7 7' />
+                            </svg>
+                        </button>
+                    </span>
+                    ${name ? html`<input name='${name}[]' type='hidden' value='${tag}' />` : ''}
+                </li>
+            `);
+
+        function add(raw: string[], typed: boolean) {
+            let added: string[] = [],
+                seen = new Set<string>(state.tags.map(key));
+
+            for (let i = 0, n = raw.length; i < n; i++) {
+                let tag = raw[i].trim();
+
+                if (!tag) {
+                    continue;
+                }
+
+                if (seen.has(key(tag))) {
+                    let existing = state.tags.find((t) => key(t) === key(tag)) ?? tag;
+
+                    nudge(key(tag));
+                    local.announcement = `${existing} is already added`;
+                    continue;
+                }
+
+                seen.add(key(tag));
+                added.push(tag);
+            }
+
+            let input = field();
+
+            if (input) {
+                input.value = '';
+            }
+
+            local.armed = '';
+
+            if (!added.length) {
+                return;
+            }
+
+            // Only a single typed tag forms in place around its letters; pasted lists pop in, since most land away from the caret.
+            let formed = typed && added.length === 1 ? key(added[0]) : '';
+
+            mutate(() => state.tags.push(...added), (chip) => {
+                if (chip.dataset.key === formed) {
+                    form(chip);
+                }
+                else {
+                    pop(chip);
+                }
+            });
+            local.announcement = `Added ${added.join(', ')}`;
+        }
+
+        function chip(k: string) {
+            let children = list?.children ?? [];
+
+            for (let i = 0, n = children.length; i < n; i++) {
+                let child = children[i] as HTMLElement;
+
+                if (child.dataset.key === k && !child.classList.contains('tag-input-ghost')) {
+                    return child;
+                }
+            }
+
+            return undefined;
+        }
+
+        function field() {
+            return list?.querySelector<HTMLInputElement>('.tag-input-field');
+        }
+
+        // Its letters are already on screen where the field was, so only the chip's body and remove button form around them.
+        function form(chip: HTMLElement) {
+            let body = chip.querySelector('.tag-input-chip-body'),
+                remove = chip.querySelector('.tag-input-chip-remove');
+
+            if (reduced.matches) {
+                body?.animate({ opacity: [0, 1] }, POP);
+                remove?.animate({ opacity: [0, 1] }, SWAP);
+                return;
+            }
+
+            body?.animate({ opacity: [0, 1], scale: [0.9, 1] }, POP);
+            remove?.animate({ filter: ['blur(4px)', 'blur(0)'], opacity: [0, 1], scale: [0.25, 1] }, SWAP);
+        }
+
+        // Records every item's box, applies the change, then slides each survivor from its old box to its new one.
+        function mutate(change: () => void, enter?: (chip: HTMLElement) => void) {
+            if (!list) {
+                change();
+                return;
+            }
+
+            let before = new Map<Element, DOMRect>(),
+                children = list.children;
+
+            for (let i = 0, n = children.length; i < n; i++) {
+                before.set(children[i], children[i].getBoundingClientRect());
+            }
+
+            change();
+            slot.flush();
+
+            for (let [element, animation] of flips) {
+                animation.cancel();
+                flips.delete(element);
+            }
+
+            for (let i = 0, n = children.length; i < n; i++) {
+                let child = children[i] as HTMLElement;
+
+                if (child.classList.contains('tag-input-ghost')) {
+                    continue;
+                }
+
+                let first = before.get(child);
+
+                if (!first) {
+                    enter?.(child);
+                    continue;
+                }
+
+                if (reduced.matches) {
+                    continue;
+                }
+
+                let last = child.getBoundingClientRect(),
+                    dx = first.left - last.left,
+                    dy = first.top - last.top;
+
+                if (!dx && !dy) {
+                    continue;
+                }
+
+                let animation = child.animate({ transform: [`translate(${dx}px, ${dy}px)`, 'none'] }, SLIDE);
+
+                animation.onfinish = () => flips.delete(child);
+                flips.set(child, animation);
+            }
+        }
+
+        function nudge(k: string) {
+            let element = chip(k);
+
+            if (!element) {
+                return;
+            }
+
+            shakes.get(element)?.cancel();
+            shakes.set(
+                element,
+                reduced.matches
+                    ? element.animate({ opacity: [1, 0.4, 1] }, SHAKE)
+                    : element.animate({ translate: ['0', '-4px', '4px', '-3px', '2px', '0'] }, SHAKE)
+            );
+        }
+
+        function pop(chip: HTMLElement) {
+            if (reduced.matches) {
+                chip.animate({ opacity: [0, 1] }, POP);
+                return;
+            }
+
+            chip.animate({ filter: ['blur(4px)', 'blur(0)'], opacity: [0, 1], scale: [0.9, 1] }, POP);
+        }
+
+        function remove(k: string) {
+            let index = state.tags.findIndex((t) => key(t) === k);
+
+            if (index === -1) {
+                return;
+            }
+
+            let element = chip(k),
+                tag = state.tags[index];
+
+            // Leaves a ghost in its place to fade out, while the real chip leaves the flow at once and the rest close up.
+            if (element && list) {
+                let ghost = element.cloneNode(true) as HTMLElement,
+                    origin = list.getBoundingClientRect(),
+                    rect = element.getBoundingClientRect();
+
+                ghost.classList.add('tag-input-ghost');
+                ghost.classList.remove('--active');
+                ghost.inert = true;
+                ghost.removeAttribute('data-key');
+                ghost.style.cssText = `height: ${rect.height}px; left: ${rect.left - origin.left}px; top: ${rect.top - origin.top}px; width: ${rect.width}px;`;
+                list.append(ghost);
+                ghost.animate(
+                    reduced.matches
+                        ? { opacity: [1, 0] }
+                        : { filter: ['blur(0)', 'blur(2px)'], opacity: [1, 0], scale: [1, 0.9] },
+                    { ...LEAVE, fill: 'forwards' }
+                ).onfinish = () => ghost.remove();
+            }
+
+            mutate(() => state.tags.splice(index, 1));
+            local.announcement = `Removed ${tag}`;
+            local.armed = '';
+        }
+
+        return html`
+            <div
+                class='tag-input'
+                ${this?.attributes}
+                ${attributes}
+                ${{
+                    ondisconnect: () => {
+                        for (let [, animation] of shakes) {
+                            animation.cancel();
+                        }
+
+                        shakes.clear();
+                    }
+                }}
+            >
+                <label class='tag-input-label' for='${id}'>${label}</label>
+                <div
+                    class='tag-input-box'
+                    ${{
+                        // Pressing the field's empty space types into it, like a real input.
+                        onpointerdown: (e: PointerEvent) => {
+                            let target = e.target as HTMLElement;
+
+                            if (target !== e.currentTarget && target !== list) {
+                                return;
+                            }
+
+                            e.preventDefault();
+                            field()?.focus();
+                        }
+                    }}
+                >
+                    <ul
+                        class='tag-input-list'
+                        ${{
+                            'aria-label': () => `${label}, ${slot.length} added`,
+                            onrender: (element: HTMLElement) => {
+                                list = element;
+                            }
+                        }}
+                    >
+                        ${slot}
+                        <li class='tag-input-entry' role='none'>
+                            ${input.call({ attributes: { ...this?.attributes?.[TAG_INPUT_FIELD], ...attributes[TAG_INPUT_FIELD] } }, {
+                                autocomplete: 'off',
+                                class: 'tag-input-field',
+                                enterkeyhint: 'enter',
+                                id,
+                                onblur: () => {
+                                    local.armed = '';
+                                },
+                                oninput: (e: Event) => {
+                                    let value = (e.currentTarget as HTMLInputElement).value;
+
+                                    // Mobile keyboards often never fire a comma keydown.
+                                    if (value.includes(',')) {
+                                        add(value.split(','), true);
+                                    }
+                                    else {
+                                        local.armed = '';
+                                    }
+                                },
+                                onkeydown: (e: KeyboardEvent) => {
+                                    let element = e.currentTarget as HTMLInputElement;
+
+                                    if (e.key === 'Enter' || e.key === ',') {
+                                        e.preventDefault();
+                                        add([element.value], true);
+                                    }
+                                    else if (e.key === 'Backspace' && element.value === '' && state.tags.length) {
+                                        e.preventDefault();
+
+                                        // The first Backspace arms the last chip; the second removes it.
+                                        let last = key(state.tags[state.tags.length - 1]);
+
+                                        if (local.armed === last) {
+                                            remove(last);
+                                        }
+                                        else {
+                                            local.armed = last;
+                                        }
+                                    }
+                                    else if (e.key === 'Escape') {
+                                        local.armed = '';
+                                    }
+                                },
+                                onpaste: (e: ClipboardEvent) => {
+                                    let text = e.clipboardData?.getData('text') ?? '';
+
+                                    if (!/[,\n]/.test(text)) {
+                                        return;
+                                    }
+
+                                    e.preventDefault();
+                                    add(((e.currentTarget as HTMLInputElement).value + text).split(/[,\n]/), false);
+                                },
+                                placeholder,
+                                state
+                            })}
+                        </li>
+                    </ul>
+                </div>
+                ${hint ? html`<p class='tag-input-hint'>${hint}</p>` : ''}
+                <span aria-live='polite' class='tag-input-live'>${() => local.announcement}</span>
+            </div>
+        `;
+    },
+    { field: TAG_INPUT_FIELD } as const
+);

package/src/components/tag-input/scss/index.scss

@@ -0,0 +1,186 @@
+@use 'variables';
+
+.tag-input {
+    color: var(--color);
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: var(--width);
+
+
+    &-box {
+        background: var(--box-background);
+        border-radius: var(--box-border-radius);
+        box-shadow: var(--box-shadow);
+        cursor: text;
+        outline-offset: 2px;
+        padding: var(--box-padding);
+
+        &:has(.tag-input-field:focus-visible) {
+            outline: var(--border-width-500) solid var(--outline-color);
+        }
+    }
+
+    &-chip {
+        align-items: center;
+        color: var(--chip-color);
+        display: flex;
+        font-size: var(--font-size);
+        gap: 2px;
+        height: var(--chip-height);
+        max-width: 100%;
+        padding-inline: var(--text-inset) 4px;
+        position: relative;
+        transition: color var(--transition-duration) var(--transition-timing-function);
+
+        &.--active {
+            color: var(--chip-color-active);
+        }
+
+        &-body {
+            background: var(--chip-background);
+            border-radius: var(--chip-border-radius);
+            box-shadow: var(--chip-shadow);
+            inset: 0;
+            position: absolute;
+            transition:
+                background-color var(--transition-duration) var(--transition-timing-function),
+                box-shadow var(--transition-duration) var(--transition-timing-function);
+
+            .tag-input-chip.--active > & {
+                background: var(--chip-background-active);
+                box-shadow: none;
+            }
+        }
+
+        &-button {
+            align-items: center;
+            background: transparent;
+            border: 0;
+            border-radius: var(--border-radius-300);
+            color: var(--chip-remove-color);
+            cursor: pointer;
+            display: flex;
+            flex-shrink: 0;
+            height: 24px;
+            justify-content: center;
+            outline: none;
+            padding: 0;
+            position: relative;
+            transition:
+                background-color var(--transition-duration) var(--transition-timing-function),
+                color var(--transition-duration) var(--transition-timing-function),
+                scale var(--transition-duration) var(--transition-timing-function);
+            width: 24px;
+
+            // Grows the hit area to 32px without growing the icon.
+            &::after {
+                content: '';
+                inset: -4px;
+                position: absolute;
+            }
+
+            &:hover {
+                background: var(--chip-remove-hover-background);
+                color: var(--chip-remove-color-hover);
+            }
+
+            &:active {
+                scale: 0.96;
+            }
+
+            &:focus-visible {
+                outline: var(--border-width-500) solid var(--outline-color);
+            }
+
+            svg {
+                height: 14px;
+                width: 14px;
+            }
+
+            .tag-input-chip.--active & {
+                color: oklch(from var(--chip-color-active) l c h / 0.7);
+
+                &:hover {
+                    background: transparent;
+                    color: var(--chip-color-active);
+                }
+            }
+        }
+
+        &-remove {
+            display: flex;
+            position: relative;
+        }
+
+        &-text {
+            overflow: hidden;
+            position: relative;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+
+    &-entry {
+        display: flex;
+        flex: 1;
+        font-size: var(--font-size);
+        min-width: var(--entry-min-width);
+    }
+
+    // Qualified so it wins over the reused input styles regardless of stylesheet order.
+    &-entry > #{&}-field {
+        --color-default: currentColor;
+        font-size: inherit;
+        height: var(--chip-height);
+        min-height: 0;
+        min-width: 0;
+        outline: none;
+        padding: 0 8px 0 var(--text-inset);
+
+        &::placeholder {
+            color: var(--placeholder-color);
+        }
+    }
+
+    &-ghost {
+        pointer-events: none;
+        position: absolute;
+    }
+
+    &-hint {
+        color: var(--hint-color);
+        font-size: var(--hint-font-size);
+        margin: 0;
+    }
+
+    &-label {
+        font-size: var(--label-font-size);
+        font-weight: var(--label-font-weight);
+    }
+
+    &-list {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--gap);
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        position: relative;
+    }
+
+    &-live {
+        clip-path: inset(50%);
+        height: 1px;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .tag-input-chip-button:active {
+        scale: 1;
+    }
+}

package/src/components/tag-input/scss/variables.scss

@@ -0,0 +1,30 @@
+.tag-input {
+    --box-background: var(--color-grey-400);
+    --box-border-radius: 14px;
+    --box-padding: 6px;
+    --box-shadow: var(--box-shadow-200);
+    --chip-background: var(--color-white-300);
+    --chip-background-active: var(--color-text-500);
+    // 8px inside 6px of box padding keeps the 14px box concentric.
+    --chip-border-radius: var(--border-radius-400);
+    --chip-color: var(--color-text-500);
+    --chip-color-active: var(--color-white-300);
+    --chip-height: 32px;
+    --chip-remove-color: var(--color-text-300);
+    --chip-remove-color-hover: var(--color-text-500);
+    --chip-remove-hover-background: oklch(from var(--color-text-500) l c h / 0.06);
+    --chip-shadow: var(--box-shadow-100);
+    --color: var(--color-text-500);
+    --entry-min-width: 120px;
+    --font-size: var(--font-size-300);
+    --gap: 6px;
+    --hint-color: var(--color-text-300);
+    --hint-font-size: var(--font-size-200);
+    --label-font-size: var(--font-size-300);
+    --label-font-weight: var(--font-weight-500);
+    --outline-color: var(--color-text-500);
+    --placeholder-color: var(--color-text-300);
+    // Shared by a chip's text and the field, so a typed tag becomes a chip without its letters shifting.
+    --text-inset: 10px;
+    --width: min(440px, 100%);
+}