@esportsplus/ui 0.55.0 → 0.56.3

package/src/components/breadcrumbs/scss/index.scss

@@ -0,0 +1,235 @@
+@use '/tokens';
+@use 'variables';
+
+.breadcrumbs {
+    font-size: var(--font-size);
+    min-width: 0;
+    position: relative;
+    width: 100%;
+
+
+    &-current {
+        color: var(--color-active);
+        display: block;
+        font-weight: var(--font-weight-current);
+        overflow: hidden;
+        padding-inline: var(--link-padding);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &-link {
+        align-items: center;
+        border-radius: var(--link-radius);
+        color: var(--color);
+        display: inline-flex;
+        height: var(--height);
+        outline: none;
+        padding-inline: var(--link-padding);
+        text-decoration: underline;
+        text-decoration-color: transparent;
+        text-underline-offset: 4px;
+        touch-action: manipulation;
+        transition:
+            color 0.15s ease-out,
+            scale 0.15s ease-out,
+            text-decoration-color 0.15s ease-out;
+        user-select: none;
+        white-space: nowrap;
+
+        &:active {
+            scale: 0.96;
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--focus-color);
+        }
+
+        &:hover {
+            color: var(--color-active);
+            text-decoration-color: var(--underline-color);
+        }
+    }
+
+    &-list {
+        align-items: center;
+        display: flex;
+        height: var(--height);
+        list-style: none;
+        margin: 0;
+        min-width: 0;
+        padding: 0;
+        position: relative;
+    }
+
+    &-menu.tooltip-content {
+        --background-default: var(--menu-background);
+        --border-radius: var(--menu-radius);
+        --box-shadow: var(--menu-box-shadow);
+        --offset: 0px;
+        --scale: 0.95;
+        --spacer: 6px;
+        --transition-duration: var(--menu-duration-out);
+        --transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+        display: flex;
+        flex-direction: column;
+        outline: none;
+        padding: 4px;
+        // Grows out of the dots.
+        transform-origin: calc(var(--trigger-width) / 2) 0;
+        width: var(--menu-width);
+
+        .tooltip.--active > & {
+            --transition-duration: var(--menu-duration-in);
+        }
+    }
+
+    &-menu-root.tooltip {
+        cursor: default;
+        display: flex;
+    }
+
+    // No transition on the highlight: it follows every hover, so any easing reads as lag.
+    &-option {
+        align-items: center;
+        border-radius: var(--border-radius-400);
+        color: var(--color-active);
+        cursor: default;
+        display: flex;
+        flex-shrink: 0;
+        gap: 10px;
+        height: 36px;
+        outline: none;
+        padding-inline: 8px;
+        text-decoration: none;
+        user-select: none;
+
+        &:focus {
+            background: var(--hover-background);
+        }
+
+        &[hidden] {
+            display: none;
+        }
+
+        span {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        svg {
+            color: var(--color);
+            flex-shrink: 0;
+            height: 16px;
+            width: 16px;
+        }
+    }
+
+    &-ruler {
+        display: flex;
+        left: 0;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        pointer-events: none;
+        position: absolute;
+        top: 0;
+        visibility: hidden;
+        white-space: nowrap;
+    }
+
+    &-segment {
+        align-items: center;
+        display: flex;
+        flex-shrink: 0;
+
+        &--current {
+            flex-shrink: 1;
+            min-width: 0;
+        }
+
+        &.--hidden {
+            display: none;
+        }
+    }
+
+    &-separator {
+        color: var(--separator-color);
+        flex-shrink: 0;
+        height: var(--separator-size);
+        width: var(--separator-size);
+    }
+
+    &-space {
+        display: block;
+        width: var(--trigger-width);
+    }
+
+    &-text {
+        padding-inline: var(--link-padding);
+
+        &--current {
+            font-weight: var(--font-weight-current);
+        }
+    }
+
+    &-trigger {
+        align-items: center;
+        background: transparent;
+        border: 0;
+        border-radius: var(--link-radius);
+        color: var(--color);
+        cursor: pointer;
+        display: flex;
+        height: calc(var(--height) - 4px);
+        justify-content: center;
+        outline: none;
+        padding: 0;
+        touch-action: manipulation;
+        transition:
+            background-color 0.15s ease-out,
+            color 0.15s ease-out,
+            scale 0.15s ease-out;
+        user-select: none;
+        width: var(--trigger-width);
+
+        &:active {
+            scale: 0.96;
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--focus-color);
+        }
+
+        &:hover,
+        .tooltip.--active > & {
+            background: var(--hover-background);
+            color: var(--color-active);
+        }
+
+        svg {
+            height: 16px;
+            width: 16px;
+        }
+    }
+
+
+    @media (prefers-reduced-motion: reduce) {
+        &-link {
+            transition:
+                color 0.15s ease-out,
+                text-decoration-color 0.15s ease-out;
+        }
+
+        &-menu.tooltip-content {
+            --scale: 1;
+        }
+
+        &-trigger {
+            transition:
+                background-color 0.15s ease-out,
+                color 0.15s ease-out;
+        }
+    }
+}

package/src/components/breadcrumbs/scss/variables.scss

@@ -0,0 +1,30 @@
+.breadcrumbs {
+    --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-current: var(--font-weight-500);
+    --height: 36px;
+    --hover-background: oklch(from var(--color-text-500) l c h / 0.06);
+    --link-padding: 6px;
+    --link-radius: var(--border-radius-300);
+    --menu-background: var(--color-grey-400);
+    --menu-box-shadow: 0 0 0 var(--border-width-400) var(--color-border-300), var(--box-shadow-300);
+    --menu-duration-in: 0.18s;
+    --menu-duration-out: 0.1s;
+    --menu-radius: var(--border-radius-600);
+    --menu-width: 192px;
+    --separator-color: oklch(from var(--color-text-300) l c h / 0.5);
+    --separator-size: 16px;
+    --trigger-width: 36px;
+    --underline-color: oklch(from var(--color-text-500) l c h / 0.4);
+
+
+    &--compact {
+        --font-size: var(--font-size-300);
+        --height: 28px;
+        --link-padding: 4px;
+        --separator-size: 14px;
+        --trigger-width: 28px;
+    }
+}

package/src/components/button/copy.ts

@@ -0,0 +1,59 @@
+import { component, html, type Attributes } from '@esportsplus/template';
+import { reactive } from '@esportsplus/reactivity';
+import { check, copy, cross } from './icons';
+import write from '../clipboard/write';
+import faces from './faces';
+
+
+type A = Attributes & {
+    error?: string;
+    onclick?: never;
+    ondisconnect?: never;
+    success?: string;
+    timeout?: number;
+    value: string;
+};
+
+
+export default component<A, string>(
+    ({ error = 'Failed', success = 'Copied', timeout = 2000, value, ...attributes }, content = 'Copy') => {
+        let state = reactive({ status: 'idle' as 'error' | 'idle' | 'success' }),
+            reset = () => {
+                clearTimeout(timer);
+                state.status = 'idle';
+            },
+            timer: ReturnType<typeof setTimeout> | undefined;
+
+        return html`
+            <button
+                class='button button--feedback'
+                type='button'
+                ${attributes}
+                ${{
+                    ondisconnect: reset,
+                    onclick: async (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+
+                        if (!value) {
+                            return;
+                        }
+
+                        reset();
+                        state.status = await write(value) ? 'success' : 'error';
+                        timer = setTimeout(reset, timeout);
+                    }
+                }}
+            >
+                ${faces(() => state.status, [
+                    { content, icon: copy, key: 'idle' },
+                    { content: success, icon: check, key: 'success', tone: 'success' },
+                    { content: error, icon: cross, key: 'error', tone: 'error' }
+                ])}
+            </button>
+            <span class='button-status' role='status' aria-live='polite'>
+                ${() => state.status === 'success' ? success : state.status === 'error' ? error : ''}
+            </span>
+        `;
+    }
+);

package/src/components/button/faces.ts

@@ -0,0 +1,29 @@
+import { html, type Renderable } from '@esportsplus/template';
+
+
+type Face = {
+    content: Renderable<unknown>;
+    icon?: () => Renderable<unknown>;
+    key: string;
+    tone?: 'error' | 'success';
+};
+
+
+// Every face shares one grid cell so the widest label reserves the width and state swaps never shift layout.
+// Only the resting face stays in the accessibility tree; it is the button's fixed accessible name.
+export default (status: () => string, faces: Face[]) => html`
+    <span class='button-faces'>
+        ${faces.map(({ content, icon, key, tone }, index) => html`
+            <span
+                aria-hidden='${index === 0 ? 'false' : 'true'}'
+                class='button-face'
+                data-tone='${tone}'
+                ${{ class: () => status() === key && '--active' }}
+            >
+                ${icon?.()}
+                ${content}
+            </span>
+        `)}
+    </span>
+`;
+export type { Face };

package/src/components/button/fan.ts

@@ -0,0 +1,173 @@
+import { reactive } from '@esportsplus/reactivity';
+import { component, html, type Attributes, type Renderable } from '@esportsplus/template';
+
+
+const FAN_OPTION = Symbol.for('@esportsplus/ui/button.fan.option');
+
+const FAN_TRIGGER = Symbol.for('@esportsplus/ui/button.fan.trigger');
+
+
+type A = Attributes & {
+    [FAN_OPTION]?: Attributes,
+    [FAN_TRIGGER]?: Attributes,
+    closeOnSelect?: boolean,
+    direction?: Direction,
+    ondocumentclick?: never,
+    onkeydown?: never,
+    options: (Attributes & { content: Renderable<unknown> })[],
+    state?: { active: boolean }
+};
+
+type Direction = 'e' | 'n' | 's' | 'w';
+
+
+const CLOSE_DELAY = 150;
+
+const KEYS: Record<Direction, Record<string, number>> = {
+    e: { ArrowLeft: -1, ArrowRight: 1 },
+    n: { ArrowDown: -1, ArrowUp: 1 },
+    s: { ArrowDown: 1, ArrowUp: -1 },
+    w: { ArrowLeft: 1, ArrowRight: -1 }
+};
+
+const OPTIONS = ':scope > .button-fan-options > .button-fan-option';
+
+
+function close(fan: Element | null, state: { active: boolean }) {
+    state.active = false;
+    fan?.querySelector<HTMLElement>(':scope > .button--fan')?.focus();
+}
+
+function focus(fan: Element | null) {
+    // Options stay inert until the attribute frame scheduled after the state write runs
+    requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+            fan?.querySelector<HTMLElement>(OPTIONS)?.focus();
+        });
+    });
+}
+
+
+export default component(
+    ({ closeOnSelect = true, direction = 'e', options, state = reactive({ active: false }), ...attributes }: A, content) => html`
+        <div
+            class='button-fan ${`button-fan--${direction}`}'
+            ${attributes}
+            ${{
+                class: () => state.active && '--active',
+                ondocumentclick: function(this, event) {
+                    if (!this?.isConnected || !state.active) {
+                        return;
+                    }
+
+                    if (!this.contains(event.target as Node | null)) {
+                        state.active = false;
+                    }
+                },
+                onkeydown: function(this, event) {
+                    if (!state.active) {
+                        return;
+                    }
+
+                    if (event.key === 'Escape') {
+                        event.stopPropagation();
+                        close(this, state);
+                        return;
+                    }
+
+                    let step = KEYS[direction][event.key];
+
+                    if (step === undefined) {
+                        return;
+                    }
+
+                    let nodes = [...this.querySelectorAll<HTMLElement>(OPTIONS)],
+                        i = nodes.indexOf(document.activeElement as HTMLElement),
+                        n = nodes.length;
+
+                    if (n === 0) {
+                        return;
+                    }
+
+                    event.preventDefault();
+                    nodes[i === -1 ? (step === 1 ? 0 : n - 1) : (i + step + n) % n].focus();
+                }
+            }}
+        >
+            <button
+                aria-haspopup='menu'
+                class='button button--fan'
+                type='button'
+                ${attributes[FAN_TRIGGER]}
+                ${{
+                    'aria-expanded': () => state.active ? 'true' : 'false',
+                    onclick: function(this) {
+                        state.active = !state.active;
+
+                        if (state.active) {
+                            focus(this.parentElement);
+                        }
+                    }
+                }}
+            >
+                ${content}
+            </button>
+
+            <div
+                class='button-fan-options'
+                role='menu'
+                style='${`--n: ${options.length};`}'
+                ${{
+                    inert: () => !state.active
+                }}
+            >
+                ${options.map(({ content, onclick, ...o }, i) => {
+                    let select = {
+                            onclick: function(this: HTMLElement, event: PointerEvent) {
+                                onclick?.call(this, event);
+
+                                if (!closeOnSelect) {
+                                    return;
+                                }
+
+                                let fan = this.closest('.button-fan');
+
+                                setTimeout(() => close(fan, state), CLOSE_DELAY);
+                            }
+                        },
+                        style = `--i: ${i};`;
+
+                    if (o.href) {
+                        return html`
+                            <a
+                                class='button button-fan-option'
+                                role='menuitem'
+                                style='${style}'
+                                ${o}
+                                ${attributes[FAN_OPTION]}
+                                ${select}
+                            >
+                                ${content}
+                            </a>
+                        `;
+                    }
+
+                    return html`
+                        <button
+                            class='button button-fan-option'
+                            role='menuitem'
+                            style='${style}'
+                            type='button'
+                            ${o}
+                            ${attributes[FAN_OPTION]}
+                            ${select}
+                        >
+                            ${content}
+                        </button>
+                    `;
+                })}
+            </div>
+        </div>
+    `,
+    { option: FAN_OPTION, trigger: FAN_TRIGGER }
+);

package/src/components/button/hold.ts

@@ -0,0 +1,154 @@
+import { component, html, type Attributes } from '@esportsplus/template';
+import { reactive } from '@esportsplus/reactivity';
+import { check } from './icons';
+import faces from './faces';
+
+
+type A = Attributes & {
+    action: () => unknown;
+    disabled?: boolean;
+    duration?: number;
+    onblur?: never;
+    oncontextmenu?: never;
+    ondisconnect?: never;
+    onkeydown?: never;
+    onkeyup?: never;
+    onpointercancel?: never;
+    onpointerdown?: never;
+    onpointermove?: never;
+    onpointerup?: never;
+    release?: number;
+    success?: string;
+    timeout?: number;
+    tolerance?: number;
+};
+
+
+export default component<A, string>(
+    ({ action, disabled = false, duration = 1800, release = 2.5, success = 'Confirmed', timeout = 1600, tolerance = 10, ...attributes }, content) => {
+        let animation: Animation | undefined,
+            fill: HTMLElement | undefined,
+            origin: { x: number, y: number } | undefined,
+            state = reactive({ status: 'idle' as 'holding' | 'idle' | 'releasing' | 'success' }),
+            timer: ReturnType<typeof setTimeout> | undefined;
+
+        function commit() {
+            state.status = 'success';
+            navigator.vibrate?.(14);
+            action();
+
+            if (timeout > 0) {
+                timer = setTimeout(reset, timeout);
+            }
+        }
+
+        function drain() {
+            origin = undefined;
+
+            if (state.status !== 'holding' || !animation) {
+                return;
+            }
+
+            state.status = 'releasing';
+            animation.updatePlaybackRate(-release);
+        }
+
+        function press() {
+            if (disabled || !fill || state.status === 'holding' || state.status === 'success') {
+                return;
+            }
+
+            if (!animation) {
+                animation = fill.animate(
+                    [{ clipPath: 'inset(0 100% 0 0)' }, { clipPath: 'inset(0 0 0 0)' }],
+                    { duration, easing: 'linear', fill: 'both' }
+                );
+                animation.onfinish = () => {
+                    if (state.status === 'holding') {
+                        commit();
+                    }
+                    else if (state.status === 'releasing') {
+                        reset();
+                    }
+                };
+            }
+            else {
+                animation.updatePlaybackRate(1);
+                animation.play();
+            }
+
+            state.status = 'holding';
+        }
+
+        function reset() {
+            animation?.cancel();
+            animation = undefined;
+            clearTimeout(timer);
+            origin = undefined;
+            state.status = 'idle';
+        }
+
+        return html`
+            <button
+                aria-description='${`Press and hold for ${duration / 1000} seconds to confirm`}'
+                class='button button--feedback button--hold'
+                type='button'
+                ${attributes}
+                ${{
+                    'aria-disabled': () => (disabled || state.status === 'success') && 'true',
+                    onblur: drain,
+                    oncontextmenu: (e) => e.preventDefault(),
+                    ondisconnect: reset,
+                    onkeydown: (e) => {
+                        if (e.key === 'Escape') {
+                            drain();
+                            return;
+                        }
+
+                        if (e.repeat || (e.key !== ' ' && e.key !== 'Enter')) {
+                            return;
+                        }
+
+                        e.preventDefault();
+                        press();
+                    },
+                    onkeyup: (e) => {
+                        if (e.key === ' ' || e.key === 'Enter') {
+                            drain();
+                        }
+                    },
+                    onpointercancel: drain,
+                    onpointerdown: function (e) {
+                        if (e.button !== 0) {
+                            return;
+                        }
+
+                        this.setPointerCapture(e.pointerId);
+                        origin = { x: e.clientX, y: e.clientY };
+                        press();
+                    },
+                    onpointermove: (e) => {
+                        if (origin && Math.hypot(e.clientX - origin.x, e.clientY - origin.y) > tolerance) {
+                            drain();
+                        }
+                    },
+                    onpointerup: drain
+                }}
+            >
+                ${faces(() => state.status === 'success' ? 'success' : 'idle', [
+                    { content, key: 'idle' },
+                    { content: success, icon: check, key: 'success' }
+                ])}
+                <span aria-hidden='true' class='button-fill' ${{ onconnect: (element: HTMLElement) => fill = element }}>
+                    ${faces(() => state.status === 'success' ? 'success' : 'idle', [
+                        { content, key: 'idle' },
+                        { content: success, icon: check, key: 'success' }
+                    ])}
+                </span>
+            </button>
+            <span class='button-status' role='status' aria-live='polite'>
+                ${() => state.status === 'success' ? success : ''}
+            </span>
+        `;
+    }
+);