@esportsplus/ui 0.54.0 → 0.56.2

package/src/components/color-picker/scss/index.scss

@@ -0,0 +1,345 @@
+@use 'variables';
+
+@mixin thumb {
+    background: var(--thumb);
+    border: var(--thumb-border);
+    border-radius: 50%;
+    box-shadow: var(--thumb-shadow);
+    box-sizing: border-box;
+    cursor: pointer;
+    height: var(--thumb-size);
+    transition: scale var(--transition-duration) var(--transition-timing-function);
+    width: var(--thumb-size);
+}
+
+@mixin track {
+    background: var(--track);
+    border-radius: 999px;
+    box-shadow: var(--hairline);
+    height: var(--track-height);
+}
+
+.color-picker {
+    background: var(--background);
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow);
+    color: var(--color);
+    display: flex;
+    flex-direction: column;
+    font-size: var(--font-size);
+    gap: var(--spacing);
+    padding: var(--padding);
+    width: var(--width);
+
+    &-alpha {
+        align-items: center;
+        border: 1px solid var(--border-color);
+        border-radius: var(--control-border-radius);
+        color: var(--color-muted);
+        display: flex;
+        flex: 0 0 56px;
+        font-family: var(--font-family-mono);
+        font-variant-numeric: tabular-nums;
+        height: var(--control-height);
+        justify-content: center;
+        user-select: none;
+    }
+
+    // Sized by the native range, whose thumb already stops half its width short of each end.
+    .color-picker-channel {
+        appearance: none;
+        background: none;
+        border: 0;
+        border-radius: 999px;
+        cursor: pointer;
+        display: block;
+        height: 28px;
+        margin: 0;
+        outline: none;
+        touch-action: none;
+        width: 100%;
+
+        &:focus-visible {
+            outline: var(--focus-width) solid var(--color);
+            outline-offset: 1px;
+        }
+
+        &::-webkit-slider-runnable-track {
+            @include track;
+        }
+
+        &::-moz-range-track {
+            @include track;
+        }
+
+        &::-webkit-slider-thumb {
+            @include thumb;
+            appearance: none;
+            margin-top: calc((var(--track-height) - var(--thumb-size)) / 2);
+        }
+
+        &::-moz-range-thumb {
+            @include thumb;
+        }
+
+        // Grows a touch while held so you can tell you've got hold of it.
+        &:active::-webkit-slider-thumb {
+            scale: 1.1;
+        }
+
+        &:active::-moz-range-thumb {
+            scale: 1.1;
+        }
+
+        &--alpha {
+            --thumb: linear-gradient(rgb(var(--rgb) / var(--alpha)), rgb(var(--rgb) / var(--alpha))), var(--checker);
+            --track: linear-gradient(to right, rgb(var(--rgb) / 0), rgb(var(--rgb))), var(--checker);
+        }
+
+        // Pure hues on purpose: the rail is the color math, not a theme surface.
+        &--hue {
+            --thumb: hsl(var(--hue) 100% 50%);
+            --track: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
+        }
+    }
+
+    &-channels {
+        align-items: center;
+        display: flex;
+        gap: var(--spacing);
+    }
+
+    &-fields {
+        display: flex;
+        gap: var(--size-100);
+    }
+
+    &-hash {
+        color: var(--color-muted);
+        transition: color var(--transition-duration) var(--transition-timing-function);
+        user-select: none;
+    }
+
+    &-hex {
+        align-items: center;
+        background: var(--background);
+        border: 1px solid var(--border-color);
+        border-radius: var(--control-border-radius);
+        cursor: text;
+        display: flex;
+        flex: 1;
+        font-family: var(--font-family-mono);
+        height: var(--control-height);
+        min-width: 0;
+        padding: 0 10px;
+        transition: border-color var(--transition-duration) var(--transition-timing-function);
+
+        &:focus-within {
+            outline: var(--focus-width) solid var(--color);
+            outline-offset: -1px;
+        }
+
+        &.--invalid {
+            border-color: var(--color-invalid);
+
+            &:focus-within {
+                outline-color: var(--color-invalid);
+            }
+
+            .color-picker-hash {
+                color: var(--color-invalid);
+            }
+        }
+
+        .input {
+            --background-default: transparent;
+            --color-default: var(--color-text-500);
+            --font-size: inherit;
+            --padding-horizontal: 0px;
+            --padding-vertical: 0px;
+            --size: 0px;
+            flex: 1;
+            font-family: inherit;
+            min-width: 0;
+            outline: none;
+            padding-left: 2px;
+            text-transform: uppercase;
+        }
+    }
+
+    // Pure black and white on purpose: the gradients are the color math, not a theme surface.
+    &-pad {
+        background-color: hsl(var(--hue) 100% 50%);
+        background-image: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent);
+        border-radius: var(--control-border-radius);
+        cursor: crosshair;
+        height: var(--pad-height);
+        outline: none;
+        position: relative;
+        touch-action: none;
+        user-select: none;
+
+        &::after {
+            border-radius: inherit;
+            box-shadow: var(--hairline);
+            content: '';
+            inset: 0;
+            pointer-events: none;
+            position: absolute;
+        }
+
+        &:focus-visible {
+            outline: var(--focus-width) solid var(--color);
+            outline-offset: 2px;
+        }
+
+        &:active .color-picker-thumb {
+            scale: 1.1;
+        }
+    }
+
+    &-preview {
+        background: linear-gradient(rgb(var(--rgb) / var(--alpha)), rgb(var(--rgb) / var(--alpha))), var(--checker);
+        border-radius: var(--control-border-radius);
+        box-shadow: var(--hairline);
+        flex: 0 0 auto;
+        height: var(--preview-size);
+        width: var(--preview-size);
+    }
+
+    &-recent {
+        border-top: 1px solid var(--border-color);
+        padding-top: var(--spacing);
+
+        &-label {
+            color: var(--color-muted);
+            font-size: var(--font-size-300);
+            margin: 0 0 var(--size-100);
+            user-select: none;
+        }
+    }
+
+    &-sliders {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        gap: 4px;
+        min-width: 0;
+    }
+
+    &-status {
+        clip-path: inset(50%);
+        height: 1px;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+    }
+
+    &-swatch {
+        background: linear-gradient(var(--swatch), var(--swatch)), var(--checker);
+        border: 0;
+        border-radius: 50%;
+        box-shadow:
+            var(--hairline),
+            0 0 0 0 var(--background),
+            0 0 0 0 var(--color);
+        cursor: pointer;
+        flex: 0 0 auto;
+        height: var(--swatch-size);
+        margin: 0;
+        outline: none;
+        padding: 0;
+        position: relative;
+        touch-action: manipulation;
+        transition:
+            box-shadow var(--transition-duration) var(--transition-timing-function),
+            scale var(--transition-duration) var(--transition-timing-function);
+        user-select: none;
+        width: var(--swatch-size);
+
+        // A larger hit area; with the gap, neighbours meet but never overlap.
+        &::after {
+            border-radius: 50%;
+            content: '';
+            inset: -4px;
+            position: absolute;
+        }
+
+        &:active {
+            scale: 0.96;
+        }
+
+        &:focus-visible {
+            outline: var(--focus-width) solid var(--color);
+            outline-offset: 4px;
+        }
+
+        &.--active {
+            box-shadow:
+                var(--hairline),
+                0 0 0 2px var(--background),
+                0 0 0 4px var(--color);
+        }
+
+        &.--leaving {
+            pointer-events: none;
+            position: absolute;
+        }
+    }
+
+    &-swatches {
+        display: flex;
+        gap: var(--size-100);
+        height: var(--swatch-size);
+        position: relative;
+    }
+
+    &-thumb {
+        background: rgb(var(--rgb));
+        border: var(--thumb-border);
+        border-radius: 50%;
+        box-shadow: var(--thumb-shadow);
+        box-sizing: border-box;
+        height: var(--thumb-size);
+        pointer-events: none;
+        position: absolute;
+        transition: scale var(--transition-duration) var(--transition-timing-function);
+        translate: -50% -50%;
+        width: var(--thumb-size);
+        z-index: 1;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .color-picker-channel {
+            &::-webkit-slider-thumb {
+                transition: none;
+            }
+
+            &::-moz-range-thumb {
+                transition: none;
+            }
+
+            &:active::-webkit-slider-thumb {
+                scale: 1;
+            }
+
+            &:active::-moz-range-thumb {
+                scale: 1;
+            }
+        }
+
+        &-pad:active .color-picker-thumb,
+        &-swatch:active {
+            scale: 1;
+        }
+
+        &-swatch {
+            transition: box-shadow var(--transition-duration) var(--transition-timing-function);
+        }
+
+        &-thumb {
+            transition: none;
+        }
+    }
+}

package/src/components/color-picker/scss/variables.scss

@@ -0,0 +1,33 @@
+.color-picker {
+    --background: var(--color-white-300);
+    --border-color: var(--color-border-300);
+    --border-radius: 20px;
+    --box-shadow:
+        0 0 0 1px oklch(from var(--color-black-500) l c h / 0.06),
+        0 1px 2px oklch(from var(--color-black-500) l c h / 0.06),
+        0 6px 16px -6px oklch(from var(--color-black-500) l c h / 0.12);
+    --checker: repeating-conic-gradient(var(--color-border-300) 0 25%, var(--color-white-300) 0 50%) 0 0 / 8px 8px;
+    --color: var(--color-text-500);
+    --color-invalid: var(--color-red-400);
+    --color-muted: var(--color-text-300);
+    --control-border-radius: var(--border-radius-400);
+    --control-height: 36px;
+    --focus-width: var(--border-width-500);
+    --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    --font-size: calc(var(--font-size-400) * 0.875);
+    --hairline: inset 0 0 0 1px color-mix(in oklch, var(--color) 10%, transparent);
+    --pad-height: 176px;
+    --padding: 12px;
+    --preview-size: 44px;
+    --spacing: 12px;
+    --swatch-size: 28px;
+    --thumb-border: 2px solid var(--color-white-300);
+    --thumb-shadow:
+        0 0 0 1px oklch(from var(--color-black-500) l c h / 0.12),
+        0 1px 3px oklch(from var(--color-black-500) l c h / 0.3);
+    --thumb-size: 20px;
+    --track-height: 12px;
+    --transition-duration: 150ms;
+    --transition-timing-function: ease-out;
+    --width: min(320px, 100%);
+}

package/src/components/command/constants.ts

@@ -0,0 +1,6 @@
+const COMMAND_INPUT = Symbol.for('@esportsplus/ui/command.input');
+
+const COMMAND_ITEM = Symbol.for('@esportsplus/ui/command.item');
+
+
+export { COMMAND_INPUT, COMMAND_ITEM };

package/src/components/command/index.ts

@@ -0,0 +1,282 @@
+import { component, html, type Attributes, type Renderable } from '@esportsplus/template';
+import { effect, reactive, root } from '@esportsplus/reactivity';
+import input from '~/components/input';
+import modal from '~/components/modal';
+import { COMMAND_INPUT, COMMAND_ITEM } from './constants';
+import './scss/index.scss';
+
+
+type A = Parameters<typeof modal>[0] & {
+    [COMMAND_INPUT]?: Parameters<typeof input>[0];
+    [COMMAND_ITEM]?: Attributes;
+    groups: Group[];
+    placeholder?: string;
+    state?: { active: boolean, query: string };
+};
+
+type D = Parameters<typeof modal>[0] & Pick<A, typeof COMMAND_INPUT | typeof COMMAND_ITEM>;
+
+type Group = {
+    items: Item[];
+    label: string;
+};
+
+type Item = Attributes & {
+    icon?: Renderable<unknown>;
+    label: string;
+};
+
+type Row = {
+    index: number;
+    item: Item;
+};
+
+type Section = {
+    label: string;
+    rows: Row[];
+};
+
+
+let dialog = modal.bind({ attributes: { class: 'card command' } }),
+    uid = 0;
+
+
+function filter(sections: Section[], needle: string) {
+    if (!needle) {
+        return sections;
+    }
+
+    let filtered: Section[] = [];
+
+    for (let i = 0, n = sections.length; i < n; i++) {
+        let rows = sections[i].rows.filter(({ item }) => item.label.toLowerCase().includes(needle));
+
+        if (rows.length) {
+            filtered.push({ label: sections[i].label, rows });
+        }
+    }
+
+    return filtered;
+}
+
+function highlight(label: string, needle: string) {
+    let start = needle ? label.toLowerCase().indexOf(needle) : -1;
+
+    if (start === -1) {
+        return label;
+    }
+
+    let end = start + needle.length;
+
+    return html`${label.slice(0, start)}<mark class='command-match'>${label.slice(start, end)}</mark>${label.slice(end)}`;
+}
+
+
+export default component(
+    function(
+        this: { attributes?: D },
+        {
+            groups,
+            placeholder = 'Search…',
+            state = reactive({ active: false, query: '' }),
+            ...attributes
+        }: A
+    ) {
+        let defaults = this?.attributes,
+            id = `command-${++uid}`,
+            index = 0,
+            sections: Section[] = groups.map(({ items, label }) => ({
+                label,
+                rows: items.map((item) => ({ index: index++, item }))
+            }));
+
+        function palette() {
+            let highlighted = reactive(-1),
+                needle = reactive(() => state.query.trim().toLowerCase()),
+                visible = reactive(() => filter(sections, needle)),
+                rows = reactive(() => visible.flatMap((section) => section.rows)),
+                // Highlight follows item identity; when the highlighted item is
+                // filtered away it falls back to the first visible row.
+                active = reactive(() => {
+                    let list = rows,
+                        target = highlighted;
+
+                    for (let i = 0, n = list.length; i < n; i++) {
+                        if (list[i].index === target) {
+                            return target;
+                        }
+                    }
+
+                    return list.length ? list[0].index : -1;
+                });
+
+            // The modal also closes itself (Esc, backdrop), so the reset lives here
+            // rather than in a close handler.
+            effect(() => {
+                if (!state.active) {
+                    state.query = '';
+                    highlighted = -1;
+                }
+            });
+
+            function move(step: number) {
+                let current = active,
+                    list = rows,
+                    n = list.length;
+
+                if (!n) {
+                    return;
+                }
+
+                let next = list[(list.findIndex((row) => row.index === current) + step + n) % n].index;
+
+                highlighted = next;
+                document.getElementById(`${id}-${next}`)?.scrollIntoView({ block: 'nearest' });
+            }
+
+            // Rows and group labels have fixed heights, so the highlight position is
+            // derived from counts instead of measuring the DOM after each filter.
+            function position() {
+                let current = active,
+                    r = 0,
+                    sections = visible;
+
+                for (let g = 0, n = sections.length; g < n; g++) {
+                    let items = sections[g].rows;
+
+                    for (let i = 0, m = items.length; i < m; i++, r++) {
+                        if (items[i].index === current) {
+                            return `--group: ${g + 1}; --row: ${r};`;
+                        }
+                    }
+                }
+
+                return '';
+            }
+
+            function row({ index, item: { icon, label, onclick, ...item } }: Row) {
+                return html`
+                    <a
+                        class='command-item'
+                        id='${id}-${index}'
+                        role='option'
+                        ${defaults?.[COMMAND_ITEM]}
+                        ${attributes[COMMAND_ITEM]}
+                        ${item}
+                        ${{
+                            'aria-selected': () => active === index ? 'true' : 'false',
+                            class: () => active === index && '--active',
+                            onclick: function(this: HTMLElement, event: PointerEvent) {
+                                if (typeof onclick === 'function') {
+                                    onclick.call(this, event);
+                                }
+
+                                state.active = false;
+                            },
+                            onmousemove: () => {
+                                highlighted = index;
+                            }
+                        }}
+                    >
+                        <span class='command-item-icon'>${icon ?? '→'}</span>
+                        <span class='command-item-label'>${highlight(label, needle)}</span>
+                    </a>
+                `;
+            }
+
+            return dialog(
+                {
+                    ...defaults,
+                    ...attributes,
+                    onkeydown: (event: KeyboardEvent) => {
+                        if (event.isComposing) {
+                            return;
+                        }
+
+                        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                            event.preventDefault();
+                            move(event.key === 'ArrowDown' ? 1 : -1);
+                        }
+                        else if (event.key === 'Enter') {
+                            event.preventDefault();
+                            document.getElementById(`${id}-${active}`)?.click();
+                        }
+                    },
+                    state
+                },
+                html`
+                    <label class='command-search'>
+                        <span class='command-search-icon' aria-hidden='true'></span>
+
+                        ${input({
+                            'aria-activedescendant': () => active === -1 ? '' : `${id}-${active}`,
+                            'aria-autocomplete': 'list',
+                            'aria-controls': `${id}-listbox`,
+                            'aria-expanded': 'true',
+                            autocomplete: 'off',
+                            autofocus: true,
+                            class: 'command-input',
+                            oninput: (event: Event) => {
+                                state.query = (event.target as HTMLInputElement).value;
+                            },
+                            placeholder,
+                            role: 'combobox',
+                            spellcheck: false,
+                            type: 'text',
+                            value: () => state.query,
+                            ...defaults?.[COMMAND_INPUT],
+                            ...attributes[COMMAND_INPUT]
+                        })}
+                    </label>
+
+                    <div class='command-results' id='${id}-listbox' role='listbox'>
+                        <div class='command-list' ${{ onmouseleave: () => { highlighted = -1; } }}>
+                            <span
+                                class='command-highlight'
+                                aria-hidden='true'
+                                ${{
+                                    class: () => active !== -1 && '--active',
+                                    style: position
+                                }}
+                            ></span>
+
+                            ${() => {
+                                if (!visible.length) {
+                                    return html`
+                                        <div class='command-empty'>
+                                            No results for <b>“${state.query}”</b>
+                                        </div>
+                                    `;
+                                }
+
+                                return visible.map((section) => html`
+                                    <div class='command-group' role='group' aria-label='${section.label}'>
+                                        <div class='command-group-label' aria-hidden='true'>${section.label}</div>
+                                        ${section.rows.map(row)}
+                                    </div>
+                                `);
+                            }}
+                        </div>
+                    </div>
+
+                    <div class='command-footer' aria-hidden='true'>
+                        <kbd>↑</kbd>
+                        <kbd>↓</kbd>
+                        <span>Navigate</span>
+                        <kbd>↵</kbd>
+                        <span>Select</span>
+                        <kbd>esc</kbd>
+                        <span>Close</span>
+                    </div>
+                `
+            );
+        }
+
+        // Declaring the dispose parameter makes root() open an owned scope, so the
+        // palette's computeds and effects live and die with the caller without the
+        // caller subscribing to them.
+        return root((_dispose) => palette());
+    },
+    { input: COMMAND_INPUT, item: COMMAND_ITEM }
+);
+export type { Group, Item };