@esportsplus/ui 0.55.0 → 0.56.3

package/src/components/bookmark-button/index.ts

@@ -0,0 +1,174 @@
+import { html, type Attributes } from '@esportsplus/template';
+import { effect, reactive } from '@esportsplus/reactivity';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    [BOOKMARK_BUTTON_ICON]?: Attributes;
+    count?: number;
+    label?: string;
+    onclick?: never;
+    onconnect?: never;
+    ondisconnect?: never;
+    onsave?: (saved: boolean) => void;
+    savedLabel?: string;
+    state?: State;
+};
+
+type State = { saved: boolean };
+
+
+const BOOKMARK_BUTTON_ICON = Symbol.for('@esportsplus/ui/bookmark-button.icon');
+
+const EASE_OUT = 'cubic-bezier(0.23, 1, 0.32, 1)';
+
+// Lifts and stretches, then lands with a squash as the fill tops out; kept
+// within 0.95 to 1.05 so it reads as weight, not rubber.
+const LAND: Keyframe[] = [
+    { easing: 'ease-out', scale: '1 1', translate: '0 0' },
+    { easing: 'ease-in', offset: 0.35, scale: '0.97 1.04', translate: '0 -2px' },
+    { easing: 'ease-out', offset: 0.65, scale: '1.04 0.95', translate: '0 1px' },
+    { scale: '1 1', translate: '0 0' }
+];
+
+const SPRING = 'linear(0, 0.057, 0.18, 0.321, 0.455, 0.573, 0.671, 0.75, 0.812, 0.86, 0.896, 0.924, 0.944, 0.96, 0.971, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1)';
+
+
+let uid = 0;
+
+
+function reduced() {
+    return matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
+function roll(container: HTMLElement, value: number, previous: number) {
+    let blur = reduced() ? 'blur(0px)' : 'blur(4px)',
+        direction = value > previous ? 1 : -1,
+        next = document.createElement('span'),
+        shift = reduced() ? 0 : 6;
+
+    for (let child of [...container.children] as HTMLElement[]) {
+        child.classList.add('bookmark-button-count-value--leaving');
+        child.animate(
+            [{}, { filter: blur, opacity: 0, translate: `0 ${(-direction * shift) / 2}px` }],
+            { duration: 120, easing: EASE_OUT, fill: 'forwards' }
+        ).finished.then(() => child.remove(), () => child.remove());
+    }
+
+    next.className = 'bookmark-button-count-value';
+    next.textContent = String(value);
+    container.append(next);
+    next.animate(
+        [{ filter: blur, opacity: 0, translate: `0 ${direction * shift}px` }, { filter: 'blur(0px)', opacity: 1, translate: '0 0' }],
+        { duration: 300, easing: SPRING }
+    );
+}
+
+
+export default Object.assign(
+    function(this: { attributes?: A } | void, { count, label = 'Save', onsave, savedLabel = 'Saved', state = reactive({ saved: false }), ...attributes }: A = {}) {
+        let icon: Animation | undefined,
+            id = `bookmark-button-${++uid}`,
+            live = reactive({ note: '' }),
+            stop: VoidFunction | undefined,
+            total = () => (count ?? 0) + (state.saved ? 1 : 0);
+
+        function toggle(this: HTMLElement) {
+            let element = this.querySelector<HTMLElement>('.bookmark-button-icon'),
+                next = !state.saved;
+
+            state.saved = next;
+            live.note = next ? 'Saved' : 'Removed from saved';
+            onsave?.(next);
+
+            if (!element || reduced()) {
+                return;
+            }
+
+            if (next) {
+                icon?.cancel();
+                icon = element.animate(LAND, { duration: 400 });
+                return;
+            }
+
+            // Unsaving cancels any bounce still in flight and settles fast.
+            let { scale, translate } = getComputedStyle(element);
+
+            icon?.cancel();
+            icon = element.animate(
+                [{ scale, translate }, { scale: '1 1', translate: '0 0' }],
+                { duration: 150, easing: EASE_OUT }
+            );
+        }
+
+        return html`
+            <button
+                class='button bookmark-button'
+                type='button'
+                ${this?.attributes}
+                ${attributes}
+                ${{
+                    'aria-describedby': count === undefined ? undefined : `${id}-count`,
+                    'aria-label': label,
+                    'aria-pressed': () => state.saved ? 'true' : 'false',
+                    class: () => state.saved && '--active',
+                    onclick: toggle,
+                    onconnect: (element: HTMLElement) => {
+                        let container = element.querySelector<HTMLElement>('.bookmark-button-count-values'),
+                            previous = total();
+
+                        if (!container) {
+                            return;
+                        }
+
+                        stop = effect(() => {
+                            let value = total();
+
+                            if (value !== previous) {
+                                roll(container, value, previous);
+                                previous = value;
+                            }
+                        });
+                    },
+                    ondisconnect: () => {
+                        icon?.cancel();
+                        stop?.();
+                    }
+                }}
+            >
+                <span
+                    aria-hidden='true'
+                    class='bookmark-button-icon'
+                    ${this?.attributes?.[BOOKMARK_BUTTON_ICON]}
+                    ${attributes[BOOKMARK_BUTTON_ICON]}
+                >
+                    <svg class='bookmark-button-outline' viewBox='0 0 24 24'>
+                        <path d='M6.5 4.75A1.75 1.75 0 0 1 8.25 3h7.5a1.75 1.75 0 0 1 1.75 1.75v15.07a.5.5 0 0 1-.79.41L12 16.75l-4.71 3.48a.5.5 0 0 1-.79-.41Z' />
+                    </svg>
+                    <svg class='bookmark-button-fill' viewBox='0 0 24 24'>
+                        <path d='M6.5 4.75A1.75 1.75 0 0 1 8.25 3h7.5a1.75 1.75 0 0 1 1.75 1.75v15.07a.5.5 0 0 1-.79.41L12 16.75l-4.71 3.48a.5.5 0 0 1-.79-.41Z' />
+                    </svg>
+                </span>
+
+                ${count === undefined
+                    ? html`
+                        <span aria-hidden='true' class='bookmark-button-labels'>
+                            <span class='bookmark-button-label bookmark-button-label--idle'>${label}</span>
+                            <span class='bookmark-button-label bookmark-button-label--saved'>${savedLabel}</span>
+                        </span>
+                    `
+                    : html`
+                        <span class='bookmark-button-count'>
+                            <span class='bookmark-button-live' id='${id}-count'>${() => `${total()} saves`}</span>
+                            <span aria-hidden='true' class='bookmark-button-count-values'>
+                                <span class='bookmark-button-count-value'>${total()}</span>
+                            </span>
+                        </span>
+                    `}
+
+                <span aria-live='polite' class='bookmark-button-live'>${() => live.note}</span>
+            </button>
+        `;
+    },
+    { icon: BOOKMARK_BUTTON_ICON } as const
+);

package/src/components/bookmark-button/scss/index.scss

@@ -0,0 +1,162 @@
+@use '/tokens';
+@use 'variables';
+
+.bookmark-button {
+    // Compound selector so these win over `.button` regardless of stylesheet order.
+    &.button {
+        --background-default: var(--bookmark-button-background);
+        --background-hover: var(--bookmark-button-background-hover);
+        --box-shadow-default: var(--bookmark-button-box-shadow);
+        --color-default: var(--bookmark-button-color);
+        --font-size: var(--bookmark-button-font-size);
+        --font-weight: var(--font-weight-500);
+        --line-height: 20px;
+
+        border: 0;
+        display: inline-flex;
+        gap: var(--bookmark-button-gap);
+        height: var(--bookmark-button-height);
+        outline: none;
+        padding-inline: calc(var(--padding-horizontal) - 4px) var(--padding-horizontal);
+        touch-action: manipulation;
+        transition:
+            background-color 150ms ease-out,
+            scale 150ms ease-out;
+        user-select: none;
+    }
+
+    &:active {
+        scale: var(--bookmark-button-scale-pressed);
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--bookmark-button-focus-color);
+        outline-offset: 2px;
+    }
+
+
+    &-count {
+        color: var(--bookmark-button-count-color);
+        display: inline-flex;
+        font-variant-numeric: tabular-nums;
+        justify-content: flex-end;
+        position: relative;
+
+        &-values {
+            display: inline-flex;
+            justify-content: flex-end;
+            position: relative;
+        }
+
+        &-value {
+            display: inline-block;
+
+            &--leaving {
+                position: absolute;
+                right: 0;
+                top: 0;
+            }
+        }
+    }
+
+    &-fill,
+    &-outline {
+        grid-area: 1 / 1;
+        height: var(--bookmark-button-icon-size);
+        width: var(--bookmark-button-icon-size);
+    }
+
+    // The shape spans 12.5% to 84% of its box, so the clip runs between those
+    // edges instead of wasting the transition on empty space.
+    &-fill {
+        clip-path: inset(85% 0 0 0);
+        fill: currentColor;
+        transition: clip-path var(--bookmark-button-unfill-duration) ease-out;
+    }
+
+    &-icon {
+        display: grid;
+        transform-origin: bottom;
+    }
+
+    &-label {
+        filter: blur(4px);
+        grid-area: 1 / 1;
+        opacity: 0;
+        transition:
+            filter 100ms var(--bookmark-button-ease),
+            opacity 100ms var(--bookmark-button-ease),
+            translate 100ms var(--bookmark-button-ease);
+        translate: 0 2px;
+
+        &--idle {
+            filter: blur(0px);
+            opacity: 1;
+            transition-duration: 200ms;
+            translate: 0 0;
+        }
+    }
+
+    &-labels {
+        display: grid;
+    }
+
+    &-live {
+        clip-path: inset(50%);
+        height: 1px;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+    }
+
+    &-outline {
+        fill: none;
+        stroke: currentColor;
+        stroke-linejoin: round;
+        stroke-width: 1.75;
+    }
+
+
+    @include tokens.state(active) {
+        .bookmark-button-fill {
+            clip-path: inset(12% 0 0 0);
+            transition: clip-path var(--bookmark-button-fill-duration) var(--bookmark-button-ease);
+        }
+
+        .bookmark-button-label--idle {
+            filter: blur(4px);
+            opacity: 0;
+            transition-duration: 100ms;
+            translate: 0 2px;
+        }
+
+        .bookmark-button-label--saved {
+            filter: blur(0px);
+            opacity: 1;
+            transition-duration: 200ms;
+            translate: 0 0;
+        }
+    }
+
+
+    @media (prefers-reduced-motion: reduce) {
+        &.button {
+            transition: background-color 150ms ease-out;
+        }
+
+        &:active {
+            scale: 1;
+        }
+
+        .bookmark-button-fill {
+            transition: none;
+        }
+
+        .bookmark-button-label {
+            filter: none;
+            transition-property: opacity;
+            translate: 0 0;
+        }
+    }
+}

package/src/components/bookmark-button/scss/variables.scss

@@ -0,0 +1,28 @@
+.bookmark-button {
+    --bookmark-button-background: var(--color-grey-400);
+    --bookmark-button-background-hover: var(--color-white-300);
+    --bookmark-button-box-shadow:
+        0 0 0 1px color-mix(in oklab, var(--color-black-300) 6%, transparent),
+        0 1px 2px color-mix(in oklab, var(--color-black-300) 6%, transparent),
+        0 6px 16px -6px color-mix(in oklab, var(--color-black-300) 12%, transparent);
+    --bookmark-button-color: var(--color-text-500);
+    --bookmark-button-count-color: var(--color-text-500);
+    --bookmark-button-ease: cubic-bezier(0.23, 1, 0.32, 1);
+    --bookmark-button-fill-duration: 260ms;
+    --bookmark-button-focus-color: color-mix(in oklab, var(--color-text-500) 38%, transparent);
+    --bookmark-button-font-size: 14px;
+    --bookmark-button-gap: var(--size-100);
+    --bookmark-button-height: 40px;
+    --bookmark-button-icon-size: 20px;
+    --bookmark-button-scale-pressed: 0.96;
+    --bookmark-button-unfill-duration: 150ms;
+    --border-radius: 999px;
+    --padding-horizontal: 16px;
+    --padding-vertical: 0px;
+
+
+    &--white {
+        --bookmark-button-background: var(--color-white-300);
+        --bookmark-button-background-hover: color-mix(in oklab, var(--color-white-300) 60%, transparent);
+    }
+}

package/src/components/breadcrumb/ellipsis.ts

@@ -0,0 +1,17 @@
+import { component, html } from '@esportsplus/template';
+import icon from '~/components/icon';
+import more from './svg/more.svg';
+
+
+export default component(
+    (attributes) => html`
+        <span
+            aria-hidden='true'
+            class='breadcrumb-ellipsis'
+            role='presentation'
+            ${attributes}
+        >
+            ${icon(more)}
+        </span>
+    `
+);

package/src/components/breadcrumb/index.ts

@@ -0,0 +1,32 @@
+import { component, html } from '@esportsplus/template';
+import ellipsis from './ellipsis';
+import item from './item';
+import link from './link';
+import list from './list';
+import menu from './menu';
+import page from './page';
+import separator from './separator';
+import './scss/index.scss';
+
+
+let root = component(
+    (attributes, content) => html`
+        <nav aria-label='breadcrumb' class='breadcrumb' ${attributes}>
+            ${content}
+        </nav>
+    `
+);
+
+
+const breadcrumb: typeof root & {
+    ellipsis: typeof ellipsis,
+    item: typeof item,
+    link: typeof link,
+    list: typeof list,
+    menu: typeof menu,
+    page: typeof page,
+    separator: typeof separator
+} = Object.assign(root, { ellipsis, item, link, list, menu, page, separator });
+
+
+export default breadcrumb;

package/src/components/breadcrumb/item.ts

@@ -0,0 +1,10 @@
+import { component, html } from '@esportsplus/template';
+
+
+export default component(
+    (attributes, content) => html`
+        <li class='breadcrumb-item' ${attributes}>
+            ${content}
+        </li>
+    `
+);

package/src/components/breadcrumb/link.ts

@@ -0,0 +1,21 @@
+import { component, html, type Attribute, type Attributes, type Renderable } from '@esportsplus/template';
+
+
+type A = Attributes & {
+    render?: (attributes: Attributes, content: Renderable<unknown>) => Renderable<unknown>;
+};
+
+
+export default component<A>(
+    ({ render, ...attributes }, content) => {
+        if (render) {
+            return render({ ...attributes, class: (['breadcrumb-link'] as Attribute[]).concat(attributes.class ?? []) }, content);
+        }
+
+        return html`
+            <a class='breadcrumb-link' ${attributes}>
+                ${content}
+            </a>
+        `;
+    }
+);

package/src/components/breadcrumb/list.ts

@@ -0,0 +1,10 @@
+import { component, html } from '@esportsplus/template';
+
+
+export default component(
+    (attributes, content) => html`
+        <ol class='breadcrumb-list' ${attributes}>
+            ${content}
+        </ol>
+    `
+);

package/src/components/breadcrumb/menu.ts

@@ -0,0 +1,20 @@
+import { component, html, type Attribute } from '@esportsplus/template';
+import icon from '~/components/icon';
+import tooltip from '~/components/tooltip';
+import caret from './svg/caret.svg';
+import type { A } from '~/components/tooltip/menu';
+
+
+export default component<A>(
+    (attributes, content) => tooltip.menu(
+        {
+            ...attributes,
+            class: (['breadcrumb-link', 'breadcrumb-menu'] as Attribute[]).concat(attributes.class ?? []),
+            [tooltip.menu.tooltipContent]: { direction: 'sw', ...attributes[tooltip.menu.tooltipContent] }
+        },
+        html`
+            ${content}
+            ${icon({ class: 'breadcrumb-menu-caret' }, caret)}
+        `
+    )
+);

package/src/components/breadcrumb/page.ts

@@ -0,0 +1,16 @@
+import { component, html } from '@esportsplus/template';
+
+
+export default component(
+    (attributes, content) => html`
+        <span
+            aria-current='page'
+            aria-disabled='true'
+            class='breadcrumb-page'
+            role='link'
+            ${attributes}
+        >
+            ${content}
+        </span>
+    `
+);

package/src/components/breadcrumb/scss/index.scss

@@ -0,0 +1,74 @@
+@use '/tokens';
+@use 'variables';
+
+.breadcrumb {
+    color: var(--color);
+    font-size: var(--font-size);
+
+
+    &-ellipsis {
+        align-items: center;
+        display: flex;
+        height: var(--size);
+        justify-content: center;
+        width: var(--size);
+    }
+
+    &-item {
+        align-items: center;
+        display: inline-flex;
+        gap: var(--gap);
+    }
+
+    &-link {
+        color: var(--color);
+        transition: color var(--transition-duration) var(--transition-timing-function);
+
+        @include tokens.state(hover) {
+            --color: var(--color-hover);
+        }
+    }
+
+    &-list {
+        align-items: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--gap);
+        list-style: none;
+        margin: 0;
+        overflow-wrap: break-word;
+        padding: 0;
+    }
+
+    &-menu {
+        align-items: center;
+        display: flex;
+        gap: calc(var(--gap) / 2);
+
+        @include tokens.state(active) {
+            --color: var(--color-hover);
+
+            .breadcrumb-menu-caret {
+                transform: rotate(180deg);
+            }
+        }
+
+
+        &-caret {
+            transition: transform var(--transition-duration) var(--transition-timing-function);
+        }
+    }
+
+    &-page {
+        color: var(--color-active);
+    }
+
+    &-separator {
+        align-items: center;
+        display: flex;
+
+        [dir='rtl'] & .icon {
+            transform: scaleX(-1);
+        }
+    }
+}

package/src/components/breadcrumb/scss/variables.scss

@@ -0,0 +1,17 @@
+.breadcrumb {
+    --color: var(--color-default);
+    --color-active: var(--color-text-500);
+    --color-default: var(--color-text-300);
+    --color-hover: var(--color-text-500);
+    --font-size: var(--font-size-300);
+
+
+    &-ellipsis {
+        --size: var(--size-500);
+    }
+
+    &-menu-caret.icon,
+    &-separator .icon {
+        --size: var(--size-300);
+    }
+}

package/src/components/breadcrumb/separator.ts

@@ -0,0 +1,17 @@
+import { component, html } from '@esportsplus/template';
+import icon from '~/components/icon';
+import chevron from './svg/chevron.svg';
+
+
+export default component(
+    (attributes, content) => html`
+        <li
+            aria-hidden='true'
+            class='breadcrumb-separator'
+            role='presentation'
+            ${attributes}
+        >
+            ${content ?? icon(chevron)}
+        </li>
+    `
+);

package/src/components/breadcrumb/svg/caret.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>

package/src/components/breadcrumb/svg/chevron.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>

package/src/components/breadcrumb/svg/more.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>