@esportsplus/ui 0.56.3 → 0.57.0

package/src/components/chat-minimap/spy.ts

@@ -0,0 +1,151 @@
+import type { Attributes } from '@esportsplus/template';
+import { span, type Range } from './range';
+
+
+// Lights every turn in view as a thread scrolls: 'root' goes on the scrolling element, 'turn(item)' on each turn in it,
+// and 'scrollTo' is the minimap's 'onnavigate'. 'turns' is the thread's own list, so indexes follow it as it grows.
+const spy = <T>({ state, turns }: { state: Range, turns: readonly T[] }) => {
+    let elements = new Map<T, HTMLElement>(),
+        items = new Map<Element, T>(),
+        observer: IntersectionObserver | undefined,
+        // A turn asked for before it was rendered, as one just pushed is; it scrolls there once it connects.
+        pending: T | undefined,
+        // Each turn's last known index: turns are appended, so it almost never has to be looked up again.
+        positions = new Map<T, number>(),
+        root: HTMLElement | undefined,
+        visible = new Set<Element>();
+
+    function measure() {
+        let indexes: number[] = [];
+
+        for (let element of visible) {
+            let item = items.get(element);
+
+            if (item !== undefined) {
+                indexes.push(position(item));
+            }
+        }
+
+        // Between two turns nothing intersects; the last range holds until the next one arrives.
+        let range = span(indexes);
+
+        if (!range) {
+            return;
+        }
+
+        if (state.start !== range.start) {
+            state.start = range.start;
+        }
+
+        if (state.end !== range.end) {
+            state.end = range.end;
+        }
+    }
+
+    function position(item: T) {
+        let hint = positions.get(item);
+
+        if (hint !== undefined && turns[hint] === item) {
+            return hint;
+        }
+
+        let index = turns.indexOf(item);
+
+        positions.set(item, index);
+
+        return index;
+    }
+
+    function reveal(element: HTMLElement) {
+        if (!root) {
+            return;
+        }
+
+        root.scrollTo({
+            behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'instant' : 'smooth',
+            top: root.scrollTop + element.getBoundingClientRect().top - root.getBoundingClientRect().top - (parseFloat(getComputedStyle(root).scrollPaddingTop) || 0)
+        });
+    }
+
+    function scrollTo(index: number) {
+        let item = turns[index],
+            element = elements.get(item);
+
+        pending = undefined;
+
+        if (element) {
+            reveal(element);
+        }
+        else if (index >= 0 && index < turns.length) {
+            pending = item;
+        }
+    }
+
+    function turn(item: T): Attributes {
+        return {
+            onconnect: (element: HTMLElement) => {
+                elements.set(item, element);
+                items.set(element, item);
+                observer?.observe(element);
+
+                if (pending === item) {
+                    pending = undefined;
+                    reveal(element);
+                }
+            },
+            ondisconnect: (element: HTMLElement) => {
+                if (elements.get(item) === element) {
+                    elements.delete(item);
+                    positions.delete(item);
+                }
+
+                items.delete(element);
+                observer?.unobserve(element);
+
+                if (visible.delete(element)) {
+                    measure();
+                }
+            }
+        };
+    }
+
+    return {
+        root: {
+            onconnect: (element: HTMLElement) => {
+                root = element;
+                // A pixel in from each edge, so the turn just scrolled past, sitting flush against the top, is out.
+                observer = new IntersectionObserver((entries) => {
+                    for (let i = 0, n = entries.length; i < n; i++) {
+                        let entry = entries[i];
+
+                        if (entry.isIntersecting) {
+                            visible.add(entry.target);
+                        }
+                        else {
+                            visible.delete(entry.target);
+                        }
+                    }
+
+                    measure();
+                }, { root: element, rootMargin: '-1px 0px' });
+
+                // Turns can connect before the thread holding them.
+                for (let target of items.keys()) {
+                    observer.observe(target);
+                }
+            },
+            ondisconnect: () => {
+                observer?.disconnect();
+                observer = undefined;
+                pending = undefined;
+                root = undefined;
+                visible.clear();
+            }
+        } satisfies Attributes,
+        scrollTo,
+        turn
+    };
+};
+
+
+export default spy;

package/src/components/checkbox/group.ts

@@ -0,0 +1,216 @@
+import { component, html, type Attributes, type Renderable } from '@esportsplus/template';
+import { computed, reactive, read } from '@esportsplus/reactivity';
+import icon from '~/components/icon';
+import dash from '@esportsplus/ui/svg/dash.svg';
+import options, { type Attr } from './options';
+
+
+type A = Attributes & {
+    label: string;
+    name?: string;
+};
+
+type Builder<T extends Type> = { [K in T]: (attributes: Option) => Renderable<unknown> } & {
+    header: (attributes?: Header) => Renderable<unknown>;
+    hint: (attributes?: Attributes) => Renderable<unknown>;
+    selected: () => string[];
+};
+
+type Context = {
+    anchor: number | null;
+    control: (attributes: Attr, content?: Renderable<unknown>) => Renderable<unknown>;
+    group: { total: number };
+    id: string;
+    label: string;
+    name?: string;
+    options: { checked: boolean, id: string }[];
+    shift: boolean;
+    type: Type;
+};
+
+type Header = Attributes & { counter?: boolean };
+
+type Option = Attr & {
+    checked?: boolean;
+    value: string;
+};
+
+type Type = 'checkbox' | 'switch';
+
+
+let uid = 0;
+
+
+function all(ctx: Context) {
+    return ctx.group.total > 0 && count(ctx) === ctx.group.total;
+}
+
+function count(ctx: Context) {
+    let n = 0;
+
+    for (let i = 0, o = ctx.group.total; i < o; i++) {
+        if (ctx.options[i].checked) {
+            n++;
+        }
+    }
+
+    return n;
+}
+
+function fill(ctx: Context, a: number, b: number, checked: boolean) {
+    for (let i = Math.min(a, b), n = Math.max(a, b); i <= n; i++) {
+        ctx.options[i].checked = checked;
+    }
+}
+
+function header(ctx: Context, { counter = false, ...attributes }: Header = {}): Renderable<unknown> {
+    let tally = computed(() => count(ctx));
+
+    return html`
+        <label class='checkbox-group-header' ${attributes}>
+            ${ctx.control(
+                {
+                    style: () => `--progress: ${ctx.group.total && read(tally) / ctx.group.total}`,
+                    [options.checkbox.input]: {
+                        'aria-controls': () => ctx.options.slice(0, ctx.group.total).map((option) => `${ctx.id}-${option.id}`).join(' '),
+                        checked: () => {
+                            let n = read(tally);
+
+                            return n > 0 && n === ctx.group.total;
+                        },
+                        disabled: () => ctx.group.total === 0,
+                        indeterminate: () => {
+                            let n = read(tally);
+
+                            return n > 0 && n < ctx.group.total;
+                        },
+                        onchange: () => {
+                            ctx.anchor = null;
+                            ctx.shift = false;
+                            fill(ctx, 0, ctx.group.total - 1, !all(ctx));
+                        }
+                    }
+                },
+                ctx.type === 'checkbox' && icon({ 'aria-hidden': true, class: 'checkbox-group-dash' }, dash)
+            )}
+            <span class='checkbox-group-label'>
+                ${ctx.label}
+            </span>
+            ${counter && html`
+                <span class='checkbox-group-counter'>
+                    ${() => read(tally)} of ${() => ctx.group.total}
+                </span>
+            `}
+        </label>
+    `;
+}
+
+function hint(attributes?: Attributes) {
+    return html`
+        <p class='checkbox-group-hint' ${attributes}>
+            <kbd class='checkbox-group-hint-key'>Shift</kbd> click to select a range
+        </p>
+    `;
+}
+
+// A label click forwards a second click to its input, and browsers disagree on whether that one carries the
+// modifier, so remember it from whichever event saw it.
+function onclick(ctx: Context, e: MouseEvent) {
+    if (e.shiftKey) {
+        ctx.shift = true;
+    }
+}
+
+function onkeydown(ctx: Context, e: KeyboardEvent) {
+    if (e.key === ' ') {
+        ctx.shift = e.shiftKey;
+    }
+}
+
+function option(ctx: Context, { checked = false, value, [options.checkbox.input]: input, ...attributes }: Option): Renderable<unknown> {
+    let index = ctx.options.length,
+        state = reactive({ checked, id: value });
+
+    ctx.options.push(state);
+
+    // Write-only, so registering inside a parent effect never subscribes it to the total.
+    ctx.group.total = ctx.options.length;
+
+    return ctx.control({
+        ...attributes,
+        [options.checkbox.input]: {
+            ...input,
+            checked: () => state.checked,
+            id: `${ctx.id}-${value}`,
+            name: ctx.name,
+            onchange: function(this: HTMLInputElement) {
+                toggle(ctx, index, this.checked);
+            },
+            value
+        }
+    });
+}
+
+function selected(ctx: Context) {
+    let ids: string[] = [];
+
+    for (let i = 0, n = ctx.group.total; i < n; i++) {
+        if (ctx.options[i].checked) {
+            ids.push(ctx.options[i].id);
+        }
+    }
+
+    return ids;
+}
+
+function toggle(ctx: Context, index: number, checked: boolean) {
+    fill(ctx, ctx.shift && ctx.anchor !== null ? ctx.anchor : index, index, checked);
+    ctx.anchor = index;
+    ctx.shift = false;
+}
+
+
+const group = <T extends Type>(type: T) => {
+    return component(function (
+        this: { attributes?: Partial<A> } | void,
+        { label, name, ...attributes }: A,
+        content: (builder: Builder<T>) => Renderable<unknown>
+    ) {
+        let ctx: Context = {
+                anchor: null,
+                control: type === 'switch' ? options.switch : options.checkbox,
+                group: reactive({ total: 0 }),
+                id: `checkbox-group-${++uid}`,
+                label,
+                name,
+                options: [],
+                shift: false,
+                type
+            };
+
+        return html`
+            <div
+                aria-label='${label}'
+                class='checkbox-group'
+                role='group'
+                ${this?.attributes}
+                ${attributes}
+                ${{
+                    onclick: (e) => onclick(ctx, e),
+                    onkeydown: (e) => onkeydown(ctx, e)
+                }}
+            >
+                ${content({
+                    [type]: (attributes: Option) => option(ctx, attributes),
+                    header: (attributes?: Header) => header(ctx, attributes),
+                    hint,
+                    selected: () => selected(ctx)
+                } as Builder<T>)}
+            </div>
+        `;
+    });
+}
+
+
+export { group };
+export type { Builder };

package/src/components/checkbox/index.ts

@@ -1,45 +1,7 @@
-import { component, html, type Attributes } from '@esportsplus/template';
-import { reactive } from '@esportsplus/reactivity';
-import form from '~/components/form';
-import icon from '~/components/icon';
-import check from './svg/check.svg';
-import './scss/index.scss';
+import options from './options';
 
 
-type A = Attributes & { onrender?: never, type?: never };
+const checkbox: typeof options.checkbox = options.checkbox;
 
-type Attr = A & { [CHECKBOX_INPUT]?: A };
 
-
-const CHECKBOX_INPUT = Symbol.for('@esportsplus/ui/checkbox.input');
-
-
-const factory = Object.assign((type: 'checkbox' | 'radio' | 'switch') => component(
-    function(
-        this: { attributes?: Attr } | void,
-        { state = reactive({ error: '' }), ...attributes }: Attr & { state?: { error: string } }
-    ) {
-        return html`
-            <div
-                class='checkbox ${(type === 'radio' || type === 'switch') && `checkbox--${type}`}'
-                ${this?.attributes}
-                ${attributes}
-            >
-                <input
-                    class='checkbox-tag'
-                    onrender=${form.input.onrender(state)}
-                    type=${type === 'radio' ? 'radio' : 'checkbox'}
-                    value='1'
-                    ${this?.attributes?.[CHECKBOX_INPUT]}
-                    ${attributes[CHECKBOX_INPUT]}
-                >
-                ${type === 'checkbox' && icon({ 'aria-hidden': true, class: 'checkbox-check' }, check)}
-            </div>
-        `;
-    },
-    { input: CHECKBOX_INPUT }
-), { input: CHECKBOX_INPUT } as const);
-
-
-export default factory('checkbox');
-export { factory };
+export default checkbox;

package/src/components/checkbox/options.ts

@@ -0,0 +1,55 @@
+import { component, html, type Attributes, type Renderable } from '@esportsplus/template';
+import { reactive } from '@esportsplus/reactivity';
+import form from '~/components/form';
+import icon from '~/components/icon';
+import check from '@esportsplus/ui/svg/check.svg';
+import { group } from './group';
+import './scss/index.scss';
+
+
+type A = Attributes & { type?: never };
+
+type Attr = A & { [CHECKBOX_INPUT]?: A };
+
+
+const CHECKBOX_INPUT = Symbol.for('@esportsplus/ui/checkbox.input');
+
+
+function factory<const P extends Record<PropertyKey, unknown> = {}>(type: 'checkbox' | 'radio' | 'switch', properties?: P) {
+    return component(
+        function(
+            this: { attributes?: Attr } | void,
+            { state = reactive({ error: '' }), ...attributes }: Attr & { state?: { error: string } },
+            content?: Renderable<unknown>
+        ) {
+            return html`
+                <div
+                    class='checkbox ${type !== 'checkbox' && `checkbox--${type}`}'
+                    ${this?.attributes}
+                    ${attributes}
+                >
+                    <input
+                        class='checkbox-tag'
+                        onconnect=${form.input.onconnect(state)}
+                        type=${type === 'radio' ? 'radio' : 'checkbox'}
+                        value='1'
+                        ${this?.attributes?.[CHECKBOX_INPUT]}
+                        ${attributes[CHECKBOX_INPUT]}
+                    >
+                    ${type === 'checkbox' && icon({ 'aria-hidden': true, class: 'checkbox-check' }, check)}
+                    ${content}
+                </div>
+            `;
+        },
+        { ...properties as P, input: CHECKBOX_INPUT }
+    );
+}
+
+
+// Every component built from the template is created here, beside the input symbol, so their types stay inferred.
+export default {
+    checkbox: factory('checkbox', { group: group('checkbox') }),
+    radio: factory('radio'),
+    switch: factory('switch', { group: group('switch') })
+};
+export type { Attr };

package/src/components/checkbox/scss/index.scss

@@ -1,4 +1,4 @@
-@use '/lib';
+@use '/shared';
 @use '/tokens';
 @use 'variables';
 
@@ -39,18 +39,17 @@
 
     &--radio {
         &::before {
+            @extend %absolute-full;
             border-radius: calc(var(--border-radius) - (var(--height) / 2));
             height: var(--height);
-            inset: 0;
             margin: auto;
-            position: absolute;
             scale: var(--scale);
         }
     }
 
     &--switch {
         &::before {
-            @include lib.position(absolute, var(--padding-vertical) null null var(--padding-horizontal));
+            @include shared.position(absolute, var(--padding-vertical) null null var(--padding-horizontal));
             border-radius: calc(var(--border-radius) - var(--padding-vertical) / 1.5);
             height: calc(var(--height) - (var(--border-width) * 2) - (var(--padding-vertical) * 2));
             scale: var(--scale);
@@ -59,39 +58,91 @@
     }
 
 
-    &:has(input:checked) .checkbox-check svg {
-        stroke-dashoffset: 0;
-    }
-
-    &:has(> .checkbox-tag:focus-visible, > .radio-tag:focus-visible, > .switch-tag:focus-visible) {
+    &:has(> .checkbox-tag:focus-visible) {
         outline: var(--focus-width) solid var(--focus-color);
         outline-offset: var(--focus-offset);
     }
 
-    .checkbox-check {
+    // The group header's dash draws with the same variables and timing as the checkmark it replaces. Qualified by the
+    // root so both win over the reused icon styles regardless of stylesheet order.
+    .checkbox-check,
+    .checkbox-group-dash {
+        @extend %absolute-full;
         height: var(--check-size);
-        inset: 0 0 0 1px;
         margin: auto;
         pointer-events: none;
-        position: absolute;
         width: var(--check-size);
 
         svg {
+            @extend %icon-stroke-draw;
             fill: none;
             stroke: var(--indicator-color);
-            stroke-width: var(--check-stroke-width);
             stroke-linecap: var(--check-linecap);
             stroke-linejoin: var(--check-linejoin);
-            stroke-dasharray: 1;
-            stroke-dashoffset: 1;
+            stroke-width: var(--check-stroke-width);
             transition: stroke-dashoffset var(--transition-duration) var(--check-timing-function);
         }
     }
 
+    .checkbox-check {
+        left: 1px;
+
+        svg {
+            stroke-dashoffset: var(--check-offset);
+        }
+    }
+
+    .checkbox-group-dash svg {
+        stroke-dashoffset: var(--dash-offset);
+    }
+
+    &-group {
+        color: var(--color);
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap-vertical) 0px;
+
+        &-counter {
+            color: var(--color-muted);
+            flex: 0 0 auto;
+            font-size: var(--font-size-300);
+            font-variant-numeric: tabular-nums;
+        }
+
+        &-header {
+            align-items: center;
+            cursor: pointer;
+            display: flex;
+            gap: var(--gap-horizontal);
+            user-select: none;
+        }
+
+        &-hint {
+            color: var(--color-muted);
+            font-size: var(--font-size-300);
+            margin: 0;
+            user-select: none;
+
+            &-key {
+                border: 1px solid var(--border-color);
+                border-radius: 4px;
+                font-family: inherit;
+                font-size: inherit;
+                padding: 1px 4px;
+            }
+        }
+
+        &-label {
+            flex: 1;
+            font-weight: var(--font-weight-500);
+            min-width: 0;
+        }
+    }
+
     // Keep the native input interactive while the SVG supplies its appearance.
     // TODO: Pointer events none on parent and default here?
     &-tag {
-        @include lib.position(absolute, full);
+        @extend %absolute-full;
         cursor: inherit;
         height: 100%;
         margin: 0;
@@ -104,7 +155,8 @@
     @media (prefers-reduced-motion: reduce) {
         &,
         &::before,
-        .checkbox-check svg {
+        .checkbox-check svg,
+        .checkbox-group-dash svg {
             transition: none;
         }
     }

package/src/components/checkbox/scss/variables.scss

@@ -23,9 +23,11 @@
     --box-shadow-pressed: var(--box-shadow-default);
     --check-linecap: round;
     --check-linejoin: round;
+    --check-offset: 1;
     --check-size: 80%;
     --check-stroke-width: 4;
     --check-timing-function: ease;
+    --dash-offset: 1;
     --focus-color: var(--border-color-active);
     --focus-offset: 2px;
     --focus-width: 2px;
@@ -59,8 +61,8 @@
         --scale-hover: 0;
 
         &::before {
-            --height: var(--size-200);
-            --width: var(--size-200);
+            --height: var(--size-100);
+            --width: var(--height);
         }
     }
 
@@ -70,21 +72,31 @@
         --focus-color: var(--background-active);
         --padding-horizontal: 2px;
         --padding-vertical: 2px;
+        --progress: 0;
+        --translateX-active: calc(var(--width-rail) - (var(--border-width) * 2) - var(--height) - (var(--padding-horizontal) * 2));
         --width: var(--width-rail);
         --width-rail: calc(var(--height) * 1.8);
 
         &::before {
-            --translateX: 0px;
+            --translateX: calc(var(--translateX-active) * var(--progress));
             --width: var(--height);
         }
 
-        &:has(input:checked)::before {
-            --translateX: calc(var(--width-rail) - (var(--border-width) * 2) - var(--height) - (var(--padding-horizontal) * 2));
+        &:has(input:checked) {
+            --progress: 1;
         }
     }
 
+    &-group {
+        --border-color: var(--color-border-300);
+        --color: var(--color-text-500);
+        --color-muted: var(--color-text-300);
+        --gap-horizontal: var(--size-300);
+        --gap-vertical: 0px;
+    }
+
 
-    &:not(:has(input:checked)) {
+    &:not(:has(input:checked, input:indeterminate)) {
         &:hover,
         label:hover & {
             --background: var(--background-hover);
@@ -105,11 +117,20 @@
         }
     }
 
-    &:has(input:checked) {
+    &:has(input:checked, input:indeterminate) {
         --background: var(--background-active);
         --border-color: var(--border-color-active);
         --box-shadow: var(--box-shadow-active);
         --indicator-color: var(--indicator-color-active);
         --scale: var(--scale-active);
     }
+
+    &:has(input:checked) {
+        --check-offset: 0;
+    }
+
+    // The group header's dash, drawn while some but not all of its options are checked.
+    &:has(input:indeterminate) {
+        --dash-offset: 0;
+    }
 }