@esportsplus/ui 0.54.0 → 0.56.2

package/src/components/selection-toolbar/scss/index.scss

@@ -0,0 +1,221 @@
+@use '/tokens';
+@use 'variables';
+
+.selection-toolbar {
+    position: relative;
+
+
+    &-button.button {
+        --background-default: transparent;
+        --background-hover: color-mix(in oklab, var(--selection-toolbar-color) 6%, transparent);
+        --border-radius: var(--border-radius-400);
+        --color-default: var(--selection-toolbar-color-muted);
+        --color-hover: var(--selection-toolbar-color);
+        --padding-horizontal: 0px;
+        --padding-vertical: 0px;
+
+        border: 0;
+        height: var(--selection-toolbar-button-size);
+        outline: none;
+        touch-action: manipulation;
+        transition:
+            background-color 150ms ease-out,
+            color 150ms ease-out,
+            scale 150ms ease-out;
+        user-select: none;
+        width: var(--selection-toolbar-button-size);
+
+        &:active {
+            scale: 0.96;
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--selection-toolbar-focus-color);
+        }
+
+        &[aria-pressed='true'] {
+            --background-default: color-mix(in oklab, var(--selection-toolbar-color) 8%, transparent);
+            --background-hover: color-mix(in oklab, var(--selection-toolbar-color) 10%, transparent);
+            --color-default: var(--selection-toolbar-color);
+        }
+    }
+
+    &-divider {
+        background: var(--selection-toolbar-divider-color);
+        height: 20px;
+        margin-inline: 4px;
+        width: 1px;
+    }
+
+    &-editor {
+        border-radius: var(--border-radius-400);
+        caret-color: var(--selection-toolbar-color);
+        color: var(--selection-toolbar-color-muted);
+        font-size: var(--selection-toolbar-font-size);
+        height: 100%;
+        line-height: 1.625;
+        outline: none;
+        overflow-y: auto;
+        text-wrap: pretty;
+
+        &:focus-visible {
+            outline: 2px solid var(--selection-toolbar-focus-color);
+            outline-offset: 4px;
+        }
+
+        ::selection {
+            background: var(--selection-toolbar-mark);
+            color: var(--selection-toolbar-color);
+        }
+
+        a {
+            color: var(--selection-toolbar-color);
+            text-decoration: underline;
+            text-decoration-color: color-mix(in oklab, var(--selection-toolbar-color) 40%, transparent);
+            text-underline-offset: 4px;
+        }
+
+        em {
+            color: var(--selection-toolbar-color);
+        }
+
+        mark {
+            background: var(--selection-toolbar-mark);
+            border-radius: var(--border-radius-100);
+            color: var(--selection-toolbar-color);
+        }
+
+        p {
+            margin: 0;
+        }
+
+        p + p {
+            margin-top: 12px;
+        }
+
+        strong {
+            color: var(--selection-toolbar-color);
+            font-weight: var(--font-weight-600);
+        }
+    }
+
+    &-icon {
+        fill: none;
+        grid-area: 1 / 1;
+        height: var(--selection-toolbar-icon-size);
+        stroke: currentColor;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        stroke-width: 1.5;
+        width: var(--selection-toolbar-icon-size);
+
+        &--check,
+        &--copy {
+            transition:
+                filter 300ms var(--selection-toolbar-spring),
+                opacity 300ms var(--selection-toolbar-spring),
+                scale 300ms var(--selection-toolbar-spring);
+        }
+
+        &--check {
+            filter: blur(4px);
+            opacity: 0;
+            scale: 0.25;
+        }
+    }
+
+    &-live {
+        clip-path: inset(50%);
+        height: 1px;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+    }
+
+    &-swap {
+        display: grid;
+    }
+
+    // 12px radius around 4px padding keeps the 8px buttons concentric.
+    &-toolbar {
+        align-items: center;
+        background: var(--selection-toolbar-background);
+        border-radius: var(--border-radius-600);
+        box-shadow: var(--selection-toolbar-box-shadow);
+        display: flex;
+        gap: 2px;
+        left: 0;
+        opacity: 0;
+        padding: 4px;
+        pointer-events: none;
+        position: absolute;
+        scale: 0.96;
+        top: 0;
+        transition:
+            opacity 100ms var(--selection-toolbar-ease),
+            scale 100ms var(--selection-toolbar-ease),
+            translate var(--selection-toolbar-follow-duration) var(--selection-toolbar-follow);
+        z-index: 10;
+
+        @include tokens.state(active) {
+            opacity: 1;
+            pointer-events: auto;
+            scale: 1;
+            transition:
+                opacity 180ms var(--selection-toolbar-ease),
+                scale 180ms var(--selection-toolbar-ease),
+                translate var(--selection-toolbar-follow-duration) var(--selection-toolbar-follow);
+        }
+
+        // Typing hides the toolbar at once; every other close fades.
+        &--instant,
+        &--jump {
+            transition: none;
+        }
+    }
+
+
+    .selection-toolbar-button.--active {
+        .selection-toolbar-icon--check {
+            filter: blur(0px);
+            opacity: 1;
+            scale: 1;
+        }
+
+        .selection-toolbar-icon--copy {
+            filter: blur(4px);
+            opacity: 0;
+            scale: 0.25;
+        }
+    }
+
+
+    @media (prefers-reduced-motion: reduce) {
+        &-button.button {
+            transition:
+                background-color 150ms ease-out,
+                color 150ms ease-out;
+
+            &:active {
+                scale: 1;
+            }
+        }
+
+        &-icon--check,
+        &-icon--copy {
+            transition-property: opacity;
+        }
+
+        &-toolbar,
+        &-toolbar.--active {
+            scale: 1;
+            transition-property: opacity;
+        }
+
+        .selection-toolbar-button.--active .selection-toolbar-icon {
+            filter: none;
+            scale: 1;
+        }
+    }
+}

package/src/components/selection-toolbar/scss/variables.scss

@@ -0,0 +1,24 @@
+.selection-toolbar {
+    --selection-toolbar-background: var(--color-grey-400);
+    --selection-toolbar-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);
+    --selection-toolbar-button-size: 36px;
+    --selection-toolbar-color: var(--color-text-500);
+    --selection-toolbar-color-muted: var(--color-text-300);
+    --selection-toolbar-divider-color: var(--color-border-300);
+    --selection-toolbar-ease: cubic-bezier(0.23, 1, 0.32, 1);
+    --selection-toolbar-focus-color: color-mix(in oklab, var(--color-text-500) 38%, transparent);
+    --selection-toolbar-follow: 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);
+    --selection-toolbar-follow-duration: 410ms;
+    --selection-toolbar-font-size: 15px;
+    --selection-toolbar-icon-size: 16px;
+    --selection-toolbar-mark: color-mix(in oklab, var(--color-text-500) 15%, transparent);
+    --selection-toolbar-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);
+
+
+    &--white {
+        --selection-toolbar-background: var(--color-white-300);
+    }
+}

package/src/components/settings/index.ts

@@ -0,0 +1,184 @@
+import { effect, reactive } from '@esportsplus/reactivity';
+import { component, html, type Attributes, type Renderable } from '@esportsplus/template';
+import icon from '~/components/icon';
+import modal from '~/components/modal';
+import close from './svg/close.svg';
+import saved from './svg/saved.svg';
+import './scss/index.scss';
+
+
+type A = Attributes<HTMLDialogElement> & {
+    groups: Group[];
+    labels?: { close?: string, saved?: string, title?: string };
+    oncancel?: never;
+    onclick?: never;
+    onclose?: never;
+    onconnect?: never;
+    ondisconnect?: never;
+    state?: State;
+};
+
+type Group = {
+    items: Item[];
+    label: Renderable<unknown>;
+};
+
+type Item = Attributes & {
+    content: Renderable<unknown>;
+    icon?: string;
+    id?: string;
+    onclick?: never;
+    render?: () => Renderable<unknown>;
+};
+
+type State = {
+    active: boolean;
+    saved: boolean;
+    selected?: string;
+};
+
+
+const SAVED_DURATION = 2000;
+
+const SAVED_EXIT = 220;
+
+
+export default component<A>(
+    function({ groups, labels = {}, state, ...attributes }) {
+        let pages: Record<string, Item> = {};
+
+        for (let i = 0, n = groups.length; i < n; i++) {
+            let items = groups[i].items;
+
+            for (let j = 0, m = items.length; j < m; j++) {
+                let item = items[j];
+
+                if (item.id !== undefined && item.render) {
+                    pages[item.id] ??= item;
+                }
+            }
+        }
+
+        let local = reactive({ saved: 'hidden', scrolled: false }),
+            s = state ?? reactive<State>({ active: false, saved: false, selected: Object.keys(pages)[0] }),
+            stop: VoidFunction | undefined,
+            timer: ReturnType<typeof setTimeout> | undefined,
+            title = labels.title ?? 'Settings';
+
+        return modal.call(
+            { attributes: { class: 'settings' } },
+            { 'aria-label': title, ...attributes, state: s },
+            html`
+                <div
+                    class='settings-panel'
+                    ${{
+                        onconnect: () => {
+                            stop = effect(() => {
+                                if (!s.active) {
+                                    clearTimeout(timer);
+                                    local.saved = 'hidden';
+                                    return;
+                                }
+
+                                if (!s.saved) {
+                                    return;
+                                }
+
+                                s.saved = false;
+                                local.saved = 'shown';
+
+                                clearTimeout(timer);
+                                timer = setTimeout(() => {
+                                    local.saved = 'leaving';
+                                    // Re-arm below the edge once faded so the next save rises in again.
+                                    timer = setTimeout(() => local.saved = 'hidden', SAVED_EXIT);
+                                }, SAVED_DURATION);
+                            });
+                        },
+                        ondisconnect: () => {
+                            clearTimeout(timer);
+                            stop?.();
+                        }
+                    }}
+                >
+                    <nav class='settings-nav --scrollbar' aria-label='${title} sections'>
+                        ${groups.map(({ items, label }) => html`
+                            <div class='settings-group'>
+                                <div class='settings-group-label'>${label}</div>
+
+                                ${items.map(({ content, icon: href, id, render, ...item }) => html`
+                                    <button
+                                        class='settings-item'
+                                        type='button'
+                                        ${item}
+                                        ${{
+                                            'aria-current': () => render && s.selected === id && 'page',
+                                            class: () => render && s.selected === id && '--active',
+                                            onclick: () => {
+                                                if (!render || id === undefined) {
+                                                    return;
+                                                }
+
+                                                local.scrolled = false;
+                                                s.selected = id;
+                                            }
+                                        }}
+                                    >
+                                        ${href && icon({ 'aria-hidden': 'true', class: 'settings-item-icon' }, href)}
+                                        <span class='settings-item-label'>${content}</span>
+                                    </button>
+                                `)}
+                            </div>
+                        `)}
+                    </nav>
+
+                    <div class='settings-main'>
+                        <div class='settings-header'>
+                            <h2 class='settings-title'>${() => pages[s.selected!]?.content}</h2>
+
+                            <button
+                                class='settings-close'
+                                type='button'
+                                ${{
+                                    'aria-label': labels.close ?? `Close ${title.toLowerCase()}`,
+                                    onclick: () => {
+                                        s.active = false;
+                                    }
+                                }}
+                            >
+                                ${icon({ 'aria-hidden': 'true' }, close)}
+                            </button>
+                        </div>
+
+                        <div class='settings-body'>
+                            ${() => {
+                                let id = s.selected!;
+
+                                return html`
+                                    <div
+                                        class='settings-content --scrollbar'
+                                        data-page='${id}'
+                                        ${{
+                                            onscroll: (e: Event) => {
+                                                local.scrolled = (e.currentTarget as HTMLElement).scrollTop > 0;
+                                            }
+                                        }}
+                                    >
+                                        ${pages[id]?.render?.()}
+                                    </div>
+                                `;
+                            }}
+
+                            <div class='settings-fade ${() => local.scrolled && '--active'}' aria-hidden='true'></div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class='settings-saved ${() => `--${local.saved}`}' aria-live='polite'>
+                    ${icon({ 'aria-hidden': 'true', class: 'settings-saved-icon' }, saved)}
+                    ${labels.saved ?? 'Saved'}
+                </div>
+            `
+        );
+    }
+);