@esportsplus/ui 0.54.0 → 0.56.2

package/src/components/shortcut-sheet/scss/index.scss

@@ -0,0 +1,306 @@
+@use 'variables';
+
+.shortcut-sheet {
+    display: contents;
+
+
+    &--blur &-dialog.modal::backdrop {
+        backdrop-filter: blur(var(--size-100));
+    }
+
+    &-close {
+        align-items: center;
+        background: transparent;
+        border: 0;
+        border-radius: 50%;
+        color: var(--color-muted);
+        cursor: pointer;
+        display: flex;
+        flex-shrink: 0;
+        height: 36px;
+        justify-content: center;
+        outline: none;
+        touch-action: manipulation;
+        transition:
+            background-color var(--open-duration) ease-out,
+            color var(--open-duration) ease-out,
+            scale var(--open-duration) ease-out;
+        width: 36px;
+
+        &:active {
+            scale: 0.96;
+        }
+
+        &:focus-visible {
+            outline: var(--border-width-500) solid var(--color);
+        }
+
+        &:hover {
+            background: var(--surface);
+            color: var(--color);
+        }
+
+        svg {
+            height: var(--size-400);
+            width: var(--size-400);
+        }
+    }
+
+    &-dialog.modal {
+        --backdrop: var(--dialog-backdrop);
+        --margin-horizontal: var(--size-400);
+        --max-width: var(--dialog-width);
+        --scale: var(--dialog-scale);
+        --transition-duration: var(--open-duration);
+        --transition-timing-function: var(--timing-function);
+        --translateY: 0px;
+        background: var(--dialog-background);
+        border-radius: var(--dialog-radius);
+        box-shadow: var(--raised);
+        color: var(--color);
+        overflow: hidden;
+
+        &:not(.--active) {
+            --transition-duration: var(--close-duration);
+        }
+
+        &.--leaving {
+            --scale: 1;
+        }
+    }
+
+    &-empty {
+        color: var(--color-muted);
+        font-size: var(--font-size);
+        padding: var(--size-600) var(--size-100);
+        text-align: center;
+    }
+
+    &-group {
+        display: block;
+        width: 100%;
+    }
+
+    &-group-label {
+        --font-size: var(--font-size-300);
+        color: var(--color-muted);
+        font-weight: var(--font-weight-500);
+        padding: var(--size-400) var(--size-100) calc(var(--size-100) / 2);
+    }
+
+    &-header {
+        align-items: center;
+        display: flex;
+        flex-shrink: 0;
+        height: 56px;
+        justify-content: space-between;
+        padding-inline: var(--size-500) 10px;
+    }
+
+    &-input.input {
+        --background-default: var(--surface);
+        --border-radius: var(--border-radius-400);
+        --color-default: var(--color);
+        --font-size: var(--input-font-size);
+        --padding-horizontal: var(--size-300);
+        --padding-vertical: 0px;
+        --size: 40px;
+        height: 40px;
+        outline: none;
+        padding-inline-start: 36px;
+
+        &:focus-visible {
+            outline: var(--border-width-500) solid var(--color);
+        }
+
+        &::placeholder {
+            color: var(--color-muted);
+        }
+
+        &::-webkit-search-cancel-button {
+            display: none;
+        }
+    }
+
+    &-kbd {
+        align-items: center;
+        background: var(--kbd-background);
+        border-radius: var(--border-radius-300);
+        box-shadow:
+            0 0 0 var(--border-width-400) var(--kbd-border-color),
+            inset 0 calc(var(--border-width-400) * -1) 0 var(--kbd-border-color);
+        color: var(--color-muted);
+        display: flex;
+        font-family: inherit;
+        font-size: var(--kbd-font-size);
+        height: var(--kbd-size);
+        justify-content: center;
+        line-height: 1;
+        min-width: var(--kbd-size);
+        padding-inline: 6px;
+        // The inset bottom edge gives the keycap its depth; pressing drops the cap by that edge.
+        transition:
+            background-color var(--kbd-duration) ease-out,
+            box-shadow var(--kbd-duration) ease-out,
+            color var(--kbd-duration) ease-out,
+            translate var(--kbd-duration) ease-out;
+
+        .--active > * > & {
+            background: var(--kbd-pressed-background);
+            box-shadow: none;
+            color: var(--kbd-pressed-color);
+            transition-duration: 0s;
+            translate: 0 1px;
+        }
+    }
+
+    &-keys {
+        display: flex;
+        flex-shrink: 0;
+        gap: calc(var(--size-100) / 2);
+    }
+
+    &-label {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &-list {
+        border-radius: 0 0 var(--dialog-radius) var(--dialog-radius);
+        flex: 1 1 auto;
+        min-height: 0;
+        outline: none;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        // Inset plus the row radius equals the dialog's corners.
+        padding: 0 var(--size-300) var(--size-300);
+
+        &:focus-visible {
+            outline: var(--border-width-500) solid var(--color);
+            outline-offset: calc(var(--border-width-500) * -1);
+        }
+    }
+
+    &-panel {
+        display: flex;
+        flex-direction: column;
+        height: var(--dialog-height);
+    }
+
+    &-row {
+        align-items: center;
+        border-radius: var(--border-radius-400);
+        color: var(--color);
+        display: flex;
+        font-size: var(--font-size);
+        gap: var(--size-400);
+        height: var(--row-height);
+        justify-content: space-between;
+        padding-inline: var(--size-100);
+        transition: background-color var(--flash-duration) ease-out;
+
+        &.--active {
+            background: var(--row-background);
+            transition-duration: 0s;
+        }
+    }
+
+    &-rows {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    &-search {
+        color: var(--color-muted);
+        flex-shrink: 0;
+        margin-inline: var(--size-300);
+        position: relative;
+
+        &-icon {
+            height: var(--size-400);
+            left: var(--size-300);
+            pointer-events: none;
+            position: absolute;
+            top: 50%;
+            translate: 0 -50%;
+            width: var(--size-400);
+            z-index: 1;
+        }
+    }
+
+    &-sr {
+        clip-path: inset(50%);
+        height: 1px;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+    }
+
+    &-title {
+        --font-size: var(--title-font-size);
+        color: var(--color);
+        font-weight: var(--font-weight-600, var(--font-weight-500));
+        width: auto;
+    }
+
+    &-trigger {
+        align-items: center;
+        background: var(--surface);
+        border: 0;
+        border-radius: 999px;
+        box-shadow: var(--raised);
+        color: var(--color);
+        cursor: pointer;
+        display: flex;
+        font: inherit;
+        font-size: var(--font-size);
+        font-weight: var(--font-weight-500);
+        gap: 10px;
+        height: 40px;
+        outline: none;
+        padding-inline: var(--size-400) var(--size-100);
+        touch-action: manipulation;
+        transition: scale var(--open-duration) ease-out;
+        user-select: none;
+
+        &:active {
+            scale: 0.96;
+        }
+
+        &:focus-visible {
+            outline: var(--border-width-500) solid var(--color);
+            outline-offset: var(--border-width-500);
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &-close,
+        &-trigger {
+            &:active {
+                scale: 1;
+            }
+        }
+
+        &-dialog.modal {
+            --scale: 1;
+            transition: opacity var(--transition-duration) var(--transition-timing-function);
+
+            &::backdrop {
+                transition: opacity var(--transition-duration) var(--transition-timing-function);
+            }
+        }
+
+        &-kbd {
+            transition:
+                background-color var(--kbd-duration) ease-out,
+                color var(--kbd-duration) ease-out;
+
+            .--active > * > & {
+                translate: none;
+            }
+        }
+    }
+}

package/src/components/shortcut-sheet/scss/variables.scss

@@ -0,0 +1,36 @@
+.shortcut-sheet {
+    --close-duration: 0.1s;
+    --color: var(--color-text-500);
+    --color-muted: var(--color-text-300);
+    --dialog-backdrop: color-mix(in srgb, var(--color-text-500) 10%, transparent);
+    --dialog-background: var(--color-white-300);
+    --dialog-height: min(480px, calc(100dvh - (var(--size-400) * 2)));
+    --dialog-radius: var(--size-500);
+    --dialog-scale: 0.98;
+    --dialog-width: 520px;
+    // Lights instantly, then fades like an afterglow; the slow fade is what reads as "that key worked".
+    --flash-duration: 0.5s;
+    --font-size: calc(var(--font-size-400) * 0.875);
+    --input-font-size: calc(var(--font-size-400) * 0.9375);
+    --kbd-background: var(--color-white-300);
+    --kbd-border-color: var(--color-border-300);
+    --kbd-duration: 0.3s;
+    --kbd-font-size: calc(var(--font-size-300) * 0.95);
+    --kbd-pressed-background: var(--color-text-500);
+    --kbd-pressed-color: var(--color-white-300);
+    --kbd-size: 24px;
+    --open-duration: 0.15s;
+    --raised:
+        0 0 0 1px oklch(from var(--color-black-300) l c h / 0.06),
+        0 1px 2px oklch(from var(--color-black-300) l c h / 0.06),
+        0 6px 16px -6px oklch(from var(--color-black-300) l c h / 0.12);
+    --row-background: var(--color-grey-400);
+    --row-height: 40px;
+    --surface: var(--color-grey-400);
+    --timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+    --title-font-size: calc(var(--font-size-400) * 0.9375);
+
+    &--blur {
+        --dialog-backdrop: color-mix(in srgb, var(--color-black-500) 24%, transparent);
+    }
+}

package/src/components/sidebar/scss/index.scss

@@ -9,7 +9,7 @@
     transition:
         max-width var(--transition-duration) var(--transition-timing-function),
         opacity var(--transition-duration) var(--transition-timing-function),
-        transform var(--transition-duration) var(--transition-timing-function);
+        translate var(--transition-duration) var(--transition-timing-function);
     width: min(var(--width), calc(100% - (var(--margin-horizontal) * 2)));
     z-index: 9;
 
@@ -26,7 +26,7 @@
 
         &.sidebar--offscreen {
             @include tokens.state(inactive) {
-                transform: translateX(var(--width));
+                translate: var(--width);
             }
         }
     }
@@ -36,7 +36,7 @@
 
         &.sidebar--offscreen {
             @include tokens.state(inactive) {
-                transform: translateX(calc(var(--width) * -1));
+                translate: calc(var(--width) * -1);
             }
         }
     }

package/src/components/slider/index.ts

@@ -0,0 +1,232 @@
+import { reactive } from '@esportsplus/reactivity';
+import { html, type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    disabled?: boolean;
+    format?: (value: number) => string;
+    label?: string;
+    // Step for PageUp/PageDown and Shift+Arrow.
+    largeStep?: number;
+    max?: number;
+    min?: number;
+    // Submits each value as a hidden field; ranges submit two fields under the same name.
+    name?: string;
+    orientation?: 'horizontal' | 'vertical';
+    // Shows the current value (or range) beside the label.
+    output?: boolean;
+    state?: State;
+    step?: number;
+    value?: number | [number, number];
+};
+
+type Key = 'high' | 'low' | 'value';
+
+type State = { value: number } | { high: number; low: number };
+
+
+function clamp(value: number, min: number, max: number) {
+    return Math.min(Math.max(value, min), max);
+}
+
+
+export default ({
+    disabled = false,
+    format = String,
+    label,
+    largeStep = 10,
+    max = 100,
+    min = 0,
+    name,
+    orientation = 'horizontal',
+    output = false,
+    state,
+    step = 1,
+    value,
+    ...attributes
+}: A) => {
+    let range = Array.isArray(value) || (!!state && 'low' in state),
+        keys: Key[] = range ? ['low', 'high'] : ['value'],
+        // Holds every key so one literal serves both shapes; only the keys in use are read.
+        s = (state ?? reactive({
+            high: Array.isArray(value) ? value[1] : max,
+            low: Array.isArray(value) ? value[0] : min,
+            value: Array.isArray(value) ? min : (value ?? min)
+        })) as Record<Key, number>,
+        control: HTMLElement | undefined,
+        decimals = (String(step).split('.')[1] || '').length,
+        drag = -1,
+        span = max - min || 1,
+        thumbs: HTMLElement[] = [],
+        ui = reactive({ dragging: -1 }),
+        vertical = orientation === 'vertical';
+
+    function commit(index: number, raw: number) {
+        let next = Number((Math.round((clamp(raw, min, max) - min) / step) * step + min).toFixed(decimals));
+
+        // Thumbs meet but never pass each other, so each keeps the bound it started as.
+        if (range) {
+            next = index === 0 ? Math.min(next, s.high) : Math.max(next, s.low);
+        }
+
+        s[keys[index]] = next;
+    }
+
+    function fraction(event: PointerEvent) {
+        if (!control) {
+            return 0;
+        }
+
+        let rect = control.getBoundingClientRect(),
+            size = parseFloat(getComputedStyle(control).getPropertyValue('--thumb-size')) || 0,
+            // Edge alignment: the thumb centre travels between half a thumb in from each end, never past the track.
+            f = vertical
+                ? (rect.bottom - size / 2 - event.clientY) / (rect.height - size)
+                : (event.clientX - rect.left - size / 2) / (rect.width - size);
+
+        if (!vertical && getComputedStyle(control).direction === 'rtl') {
+            f = 1 - f;
+        }
+
+        return clamp(f, 0, 1);
+    }
+
+    function keydown(index: number, event: KeyboardEvent) {
+        let big = largeStep,
+            delta: Record<string, number> = {
+                ArrowDown: -(event.shiftKey ? big : step),
+                ArrowLeft: -(event.shiftKey ? big : step),
+                ArrowRight: event.shiftKey ? big : step,
+                ArrowUp: event.shiftKey ? big : step,
+                End: Infinity,
+                Home: -Infinity,
+                PageDown: -big,
+                PageUp: big
+            };
+
+        if (!(event.key in delta)) {
+            return;
+        }
+
+        event.preventDefault();
+        commit(index, clamp(s[keys[index]] + delta[event.key], min, max));
+    }
+
+    function percent(key: Key) {
+        return (s[key] - min) / span;
+    }
+
+    function readout() {
+        return keys.map((key) => format(s[key])).join(' – ');
+    }
+
+    function release() {
+        drag = -1;
+        ui.dragging = -1;
+    }
+
+    return html`
+        <div
+            aria-disabled='${disabled && 'true'}'
+            class='slider slider--${orientation} ${disabled && '--disabled'}'
+            ${attributes}
+            ${{
+                class: () => ui.dragging !== -1 && '--dragging'
+            }}
+        >
+            ${(label || output) && html`
+                <div class='slider-header'>
+                    ${label && html`<span class='slider-label'>${label}</span>`}
+                    ${output && html`<output class='slider-output'>${readout}</output>`}
+                </div>
+            `}
+
+            <div
+                class='slider-control'
+                ${{
+                    onlostpointercapture: release,
+                    onpointercancel: release,
+                    onpointerdown: (event: PointerEvent) => {
+                        if (disabled || event.button !== 0 || !control) {
+                            return;
+                        }
+
+                        let f = fraction(event),
+                            grabbed = (event.target as HTMLElement).closest<HTMLElement>('[data-thumb]'),
+                            index = 0;
+
+                        if (grabbed) {
+                            index = Number(grabbed.dataset.thumb);
+                        }
+                        else if (range) {
+                            let high = percent('high'),
+                                low = percent('low');
+
+                            // Stacked thumbs tie, so the side of the press decides which one moves.
+                            index = Math.abs(f - low) === Math.abs(f - high) ? (f < low ? 0 : 1) : (Math.abs(f - low) < Math.abs(f - high) ? 0 : 1);
+                        }
+
+                        event.preventDefault();
+                        thumbs[index]?.focus({ preventScroll: true });
+                        control.setPointerCapture(event.pointerId);
+                        drag = index;
+                        ui.dragging = index;
+                        commit(index, min + f * span);
+                    },
+                    onpointermove: (event: PointerEvent) => {
+                        if (drag === -1) {
+                            return;
+                        }
+
+                        commit(drag, min + fraction(event) * span);
+                    },
+                    onpointerup: release,
+                    onrender: (element: HTMLElement) => {
+                        control = element;
+                    }
+                }}
+            >
+                <div class='slider-track'>
+                    <div
+                        class='slider-indicator ${!range && 'slider-indicator--single'}'
+                        style='${() => range
+                            ? `--end: ${percent('high')}; --start: ${percent('low')};`
+                            : `--end: ${percent('value')};`}'
+                    ></div>
+
+                    ${keys.map((key, index) => html`
+                        <div
+                            aria-label='${range ? `${index === 0 ? 'Minimum' : 'Maximum'}${label ? ` ${label.toLowerCase()}` : ''}` : (label ?? 'Value')}'
+                            aria-orientation='${orientation}'
+                            aria-valuemax='${max}'
+                            aria-valuemin='${min}'
+                            class='slider-thumb'
+                            data-thumb='${index}'
+                            role='slider'
+                            tabindex='${disabled ? -1 : 0}'
+                            ${{
+                                'aria-valuenow': () => s[key],
+                                'aria-valuetext': () => format(s[key]),
+                                class: () => ui.dragging === index && '--active',
+                                onkeydown: (event: KeyboardEvent) => {
+                                    if (!disabled) {
+                                        keydown(index, event);
+                                    }
+                                },
+                                onrender: (element: HTMLElement) => {
+                                    thumbs[index] = element;
+                                },
+                                style: () => `--position: ${percent(key)}`
+                            }}
+                        ></div>
+                    `)}
+                </div>
+            </div>
+
+            ${name && keys.map((key) => html`<input name='${name}' type='hidden' ${{ value: () => String(s[key]) }} />`)}
+        </div>
+    `;
+};
+
+export type { State as SliderState };