@esportsplus/ui 0.57.0 → 0.58.0

package/src/components/theme-picker/index.ts

@@ -0,0 +1,231 @@
+import { component, html, type Attributes } from '@esportsplus/template';
+import { flush, reactive } from '@esportsplus/reactivity';
+import faces from '~/components/button/faces';
+import dismiss from '~/shared/dismiss';
+import monitor from '@esportsplus/ui/svg/monitor.svg';
+import moon from '@esportsplus/ui/svg/moon.svg';
+import sun from '@esportsplus/ui/svg/sun.svg';
+import type { Mode, Preference } from '~/components/theme';
+import '~/components/button/scss/index.scss';
+import './scss/index.scss';
+
+
+const TOGGLE_OPTION = Symbol.for('@esportsplus/ui/theme-picker.toggle.option');
+
+const TOGGLE_TRIGGER = Symbol.for('@esportsplus/ui/theme-picker.toggle.trigger');
+
+
+type A = Attributes & {
+    mode: Theme;
+};
+
+type Choice = {
+    icon: string;
+    label: string;
+    value: Preference;
+};
+
+type T = A & {
+    [TOGGLE_OPTION]?: Attributes;
+    [TOGGLE_TRIGGER]?: Attributes;
+    onconnect?: never;
+    ondocumentclick?: never;
+    onkeydown?: never;
+    onpointerenter?: never;
+    onpointerleave?: never;
+};
+
+// The slice of a 'theme()' instance the pickers read and drive.
+type Theme = {
+    readonly mode: Mode;
+    readonly preference: Preference;
+    set(preference: Preference): void;
+};
+
+
+const CHOICES: Choice[] = [
+    { icon: sun, label: 'Light', value: 'light' },
+    { icon: moon, label: 'Dark', value: 'dark' },
+    { icon: monitor, label: 'System', value: 'system' }
+];
+
+
+function choice(mode: Theme) {
+    return CHOICES.find((choice) => choice.value === mode.preference) ?? CHOICES[2];
+}
+
+function icon(id: string) {
+    return html`<svg aria-hidden='true' class='theme-picker-icon'><use href='#${id}' /></svg>`;
+}
+
+// Chosen-ness lives in 'aria-checked' alone: '--active' on a tooltip trigger means its tooltip is showing.
+function radio(mode: Theme, choice: Choice) {
+    return {
+        'aria-checked': () => mode.preference === choice.value ? 'true' : 'false',
+        onclick: () => mode.set(choice.value),
+        role: 'radio',
+        type: 'button'
+    };
+}
+
+
+// Miniature pages, System split diagonally between the two.
+const cards = component(({ mode, ...attributes }: A) => html`
+    <div aria-label='Theme' class='theme-picker-cards' role='radiogroup' ${attributes}>
+        ${CHOICES.map((choice) => html`
+            <button class='theme-picker-cards-option' ${radio(mode, choice)}>
+                <span class='theme-picker-cards-preview theme-picker-cards-preview--${choice.value}'>
+                    <span class='theme-picker-cards-preview-bar'></span>
+                    <span class='theme-picker-cards-preview-line'></span>
+                    <span class='theme-picker-cards-preview-line theme-picker-cards-preview-line--short'></span>
+                </span>
+                <span class='theme-picker-cards-label'>${choice.label}</span>
+            </button>
+        `)}
+    </div>
+`);
+
+// Round swatches, System split down the middle.
+const swatches = component(({ mode, ...attributes }: A) => html`
+    <div aria-label='Theme' class='theme-picker-swatches' role='radiogroup' ${attributes}>
+        ${CHOICES.map((choice) => html`
+            <button class='theme-picker-swatches-option' ${radio(mode, choice)}>
+                <span class='theme-picker-swatches-circle theme-picker-swatches-circle--${choice.value}'></span>
+                <span class='theme-picker-swatches-label'>${choice.label}</span>
+            </button>
+        `)}
+    </div>
+`);
+
+// The current choice's icon. Hovering or clicking morphs it into a row of every choice laid over the button, the
+// current one where the button's icon was, the way a select menu opens over its value; picking one, clicking outside,
+// Escape or the pointer leaving closes it again.
+const toggle = component(({ mode, ...attributes }: T) => {
+    let options: HTMLElement[] = [],
+        state = reactive({ active: false }),
+        trigger: HTMLElement | undefined;
+
+    function close(focus = false) {
+        state.active = false;
+
+        if (focus) {
+            trigger?.focus();
+        }
+    }
+
+    // A keyboard open moves focus into the row once it is no longer inert.
+    function open(focus = false) {
+        state.active = true;
+
+        if (focus) {
+            flush();
+            options[CHOICES.indexOf(choice(mode))]?.focus();
+        }
+    }
+
+    return html`
+        <div
+            class='theme-picker-toggle'
+            ${attributes}
+            ${{
+                class: () => state.active && '--active',
+                ondocumentclick: dismiss(() => state.active, () => close()),
+                onkeydown: (event: KeyboardEvent) => {
+                    if (!state.active) {
+                        return;
+                    }
+
+                    if (event.key === 'Escape') {
+                        event.stopPropagation();
+                        close(true);
+                        return;
+                    }
+
+                    let step = event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0;
+
+                    if (!step) {
+                        return;
+                    }
+
+                    let i = options.indexOf(document.activeElement as HTMLElement),
+                        n = options.length;
+
+                    event.preventDefault();
+                    options[((i === -1 ? CHOICES.indexOf(choice(mode)) : i) + step + n) % n]?.focus();
+                },
+                // Touch has no hover to leave, so a tap opens through the click alone.
+                onpointerenter: (event: PointerEvent) => {
+                    if (event.pointerType !== 'touch') {
+                        open();
+                    }
+                },
+                onpointerleave: (event: PointerEvent) => {
+                    if (event.pointerType !== 'touch') {
+                        close();
+                    }
+                },
+                style: () => `--index: ${CHOICES.indexOf(choice(mode))};`
+            }}
+        >
+            <button
+                aria-haspopup='true'
+                class='button button--feedback theme-picker-toggle-trigger'
+                type='button'
+                ${attributes[TOGGLE_TRIGGER]}
+                ${{
+                    'aria-expanded': () => state.active ? 'true' : 'false',
+                    'aria-label': () => `Theme: ${choice(mode).label}`,
+                    onclick: (event: MouseEvent) => {
+                        if (state.active) {
+                            close();
+                        }
+                        else {
+                            open(event.detail === 0);
+                        }
+                    },
+                    onconnect: (element: HTMLElement) => {
+                        trigger = element;
+                    }
+                }}
+            >
+                ${faces(() => choice(mode).value, CHOICES.map((choice) => ({
+                    content: '',
+                    icon: () => icon(choice.icon),
+                    key: choice.value
+                })))}
+            </button>
+
+            <div
+                aria-label='Theme'
+                class='theme-picker-toggle-menu'
+                role='radiogroup'
+                ${{ inert: () => !state.active }}
+            >
+                ${CHOICES.map((choice, i) => html`
+                    <button
+                        aria-label='${choice.label}'
+                        class='theme-picker-toggle-option'
+                        title='${choice.label}'
+                        ${attributes[TOGGLE_OPTION]}
+                        ${radio(mode, choice)}
+                        ${{
+                            onclick: () => {
+                                mode.set(choice.value);
+                                close(true);
+                            },
+                            onconnect: (element: HTMLElement) => {
+                                options[i] = element;
+                            }
+                        }}
+                    >
+                        ${icon(choice.icon)}
+                    </button>
+                `)}
+            </div>
+        </div>
+    `;
+}, { option: TOGGLE_OPTION, trigger: TOGGLE_TRIGGER });
+
+
+export default { cards, swatches, toggle };
+export type { Theme };

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

@@ -0,0 +1,264 @@
+@use 'css-utilities/surface';
+
+
+
+%theme-picker-reset {
+    background: transparent;
+    border: 0;
+    color: inherit;
+    cursor: pointer;
+    font: inherit;
+    padding: 0;
+
+    &:focus-visible {
+        outline: 2px solid var(--color-blue-400);
+        outline-offset: calc(var(--size-100) / 4);
+    }
+}
+
+
+.theme-picker {
+    &-cards {
+        display: flex;
+        gap: var(--size-300);
+
+        &-label {
+            color: var(--color-text-300);
+            font-size: var(--font-size-200);
+        }
+
+        &-option {
+            @extend %theme-picker-reset;
+            display: grid;
+            gap: var(--size-200);
+            justify-items: center;
+
+            &[aria-checked='true'] .theme-picker-cards-label {
+                --font-weight: var(--font-weight-500);
+                color: var(--color-text-500);
+                font-weight: var(--font-weight);
+            }
+
+            &[aria-checked='true'] .theme-picker-cards-preview {
+                outline: 2px solid var(--color-blue-400);
+                outline-offset: calc(var(--size-100) / 4);
+            }
+        }
+
+        &-preview {
+            border: 1px solid var(--surface-border-default);
+            border-radius: var(--border-radius-300);
+            display: grid;
+            gap: calc(var(--size-200) / 2);
+            height: 48px;
+            overflow: hidden;
+            padding: 7px;
+            width: 64px;
+
+            &--dark {
+                --bar: var(--color-white-300);
+                background: var(--color-black-400);
+            }
+
+            &--light {
+                --bar: var(--color-black-300);
+                background: var(--color-white-300);
+            }
+
+            &--system {
+                --bar: color-mix(in oklab, var(--color-white-300), var(--color-black-400));
+                background: linear-gradient(135deg, var(--color-white-300) 50%, var(--color-black-400) 50%);
+            }
+
+            &-bar {
+                background: var(--bar);
+                border-radius: var(--border-radius-100);
+                height: 6px;
+                opacity: 0.8;
+                width: 60%;
+            }
+
+            &-line {
+                background: var(--bar);
+                border-radius: var(--border-radius-100);
+                height: 4px;
+                opacity: 0.35;
+
+                &--short {
+                    width: 70%;
+                }
+            }
+        }
+    }
+
+    &-icon {
+        display: block;
+        fill: none;
+        flex-shrink: 0;
+        height: var(--size-400);
+        stroke: currentColor;
+        width: var(--size-400);
+    }
+
+    &-swatches {
+        display: flex;
+        gap: var(--size-500);
+
+        &-circle {
+            border: 1px solid var(--surface-border-hover);
+            border-radius: 50%;
+            display: block;
+            height: 36px;
+            width: 36px;
+
+            &--dark {
+                background: var(--color-black-400);
+            }
+
+            &--light {
+                background: var(--color-white-300);
+            }
+
+            &--system {
+                background: linear-gradient(90deg, var(--color-white-300) 50%, var(--color-black-400) 50%);
+            }
+        }
+
+        &-label {
+            color: var(--color-text-300);
+            font-size: var(--font-size-200);
+        }
+
+        &-option {
+            @extend %theme-picker-reset;
+            display: grid;
+            gap: var(--size-200);
+            justify-items: center;
+
+            &[aria-checked='true'] .theme-picker-swatches-circle {
+                box-shadow:
+                    0 0 0 2px var(--surface-background-default),
+                    0 0 0 4px var(--color-blue-400);
+            }
+
+            &[aria-checked='true'] .theme-picker-swatches-label {
+                --font-weight: var(--font-weight-500);
+                color: var(--color-text-500);
+                font-weight: var(--font-weight);
+            }
+        }
+    }
+
+    // The menu sits with the current option's centre on the trigger's.
+    &-toggle {
+        --trigger-size: 36px;
+        display: inline-flex;
+        position: relative;
+
+        // Every length the menu's width and the current option's centre are built from, so the closed clip can
+        // match the trigger's own box and opening reads as the button growing into the row. A surface, opening a
+        // level above whatever holds the toggle.
+        &-menu {
+            @extend %surface-raised-level;
+            --border-width: var(--border-width-400);
+            --center: calc(
+                var(--border-width) + var(--padding) + var(--index) * (var(--option-size) + var(--gap)) +
+                var(--option-size) / 2
+            );
+            --count: 3;
+            --gap: calc(var(--size-100) / 4);
+            --option-size: 28px;
+            --padding: calc(var(--size-300) / 4);
+            --width: calc(
+                var(--count) * var(--option-size) + (var(--count) - 1) * var(--gap) +
+                2 * (var(--padding) + var(--border-width))
+            );
+            background: var(--surface-background-default);
+            border: var(--border-width) solid var(--surface-border-default);
+            border-radius: 999px;
+            box-shadow: var(--surface-shadow-default);
+            clip-path: inset(
+                0
+                calc(var(--width) - var(--center) - var(--trigger-size) / 2)
+                0
+                calc(var(--center) - var(--trigger-size) / 2)
+                round var(--border-radius-400)
+            );
+            display: flex;
+            gap: var(--gap);
+            left: calc(var(--trigger-size) / 2 - var(--center));
+            opacity: 0;
+            padding: var(--padding);
+            position: absolute;
+            top: calc((var(--trigger-size) - var(--option-size)) / 2 - var(--padding) - var(--border-width));
+            transition:
+                clip-path var(--duration-moderate-exit) var(--easing-spring),
+                opacity var(--duration-fast) var(--easing-spring),
+                visibility 0s linear var(--duration-moderate-exit);
+            visibility: hidden;
+            width: var(--width);
+            z-index: 10;
+
+            .theme-picker-toggle.--active > & {
+                clip-path: inset(0 round 999px);
+                opacity: 1;
+                transition:
+                    clip-path var(--duration-moderate) var(--easing-spring),
+                    opacity var(--duration-fast-exit) var(--easing-spring);
+                visibility: visible;
+            }
+
+            @media (prefers-reduced-motion: reduce) {
+                &,
+                .theme-picker-toggle.--active > & {
+                    transition: opacity var(--duration-fast) var(--easing-spring), visibility 0s linear var(--duration-fast);
+                }
+            }
+        }
+
+        // The current choice takes the filled active background rather than a check.
+        &-option {
+            @extend %theme-picker-reset;
+            align-items: center;
+            border-radius: 999px;
+            color: var(--color-text-300);
+            display: flex;
+            flex: 0 0 var(--option-size);
+            height: var(--option-size);
+            justify-content: center;
+            transition:
+                background-color var(--duration-fast) var(--easing-spring),
+                color var(--duration-fast) var(--easing-spring);
+
+            &:hover,
+            &[aria-checked='true'] {
+                color: var(--color-text-500);
+            }
+
+            &[aria-checked='true'] {
+                background: var(--surface-background-active);
+            }
+        }
+
+        // The button's faces carry the blur swap; this only sizes and frames it, fading under the open menu.
+        &-trigger.button {
+            --background-hover: var(--surface-background-hover);
+            --border-color-default: var(--surface-border-default);
+            --border-radius: var(--border-radius-400);
+            --border-width: var(--border-width-400);
+            --color-default: var(--color-text-400);
+            --color-hover: var(--color-text-500);
+            --icon-size: var(--size-400);
+            --padding-horizontal: 0px;
+            --padding-vertical: 0px;
+            border: var(--border-width) solid var(--border-color);
+            height: var(--trigger-size);
+            transition: opacity var(--duration-fast) var(--easing-spring);
+            width: var(--trigger-size);
+
+            .theme-picker-toggle.--active > & {
+                opacity: 0;
+            }
+        }
+    }
+}

package/src/components/toast/index.ts

@@ -80,37 +80,35 @@ const UNPLACED: Edge = { x: 1, y: -1 };
 function row(toast: Toast, layout: () => Layout, remove: (toast: Toast) => void) {
     let element: HTMLElement | undefined,
         frontmost = 0,
-        // 'swipe' is where a swipe holds it, 'thrown' the way a dismissing swipe flings it on.
-        local = reactive({ swipe: null as { x: number, y: number } | null, swiping: false, thrown: null as Fling | null });
-
-    // Layout height, unaffected by the collapsed scale.
-    let size = observeSize(({ height }) => {
-        toast.measured.height = height;
-    });
-
-    let gesture = drag({
-        // Swiped back toward the edges the stack is pinned to.
-        begin: (e, element) => e.button === 0 ? toward(edge(element.closest('.toaster') ?? element, 'toaster') ?? UNPLACED) : null,
-        capture: () => {
-            local.swiping = true;
-        },
-        move: (_, { x, y }) => {
-            local.swipe = { x, y };
-        },
-        // Dismissing, it is thrown on from where the pointer let go until it has left the screen; under reduced
-        // motion it fades there like any other exit.
-        release: (element, drag, dismiss) => {
-            local.swiping = false;
-            local.thrown = dismiss ? fling(element, drag) : null;
-
-            if (dismiss) {
-                toast.state.active = false;
-                return;
-            }
+        gesture = drag({
+            // Swiped back toward the edges the stack is pinned to.
+            begin: (e, element) => e.button === 0 ? toward(edge(element.closest('.toaster') ?? element, 'toaster') ?? UNPLACED) : null,
+            capture: () => {
+                local.swiping = true;
+            },
+            move: (_, { x, y }) => {
+                local.swipe = { x, y };
+            },
+            // Dismissing, it is thrown on from where the pointer let go until it has left the screen; under reduced
+            // motion it fades there like any other exit.
+            release: (element, drag, dismiss) => {
+                local.swiping = false;
+                local.thrown = dismiss ? fling(element, drag) : null;
+
+                if (dismiss) {
+                    toast.state.active = false;
+                    return;
+                }
 
-            local.swipe = null;
-        }
-    });
+                local.swipe = null;
+            }
+        }),
+        // 'swipe' is where a swipe holds it, 'thrown' the way a dismissing swipe flings it on.
+        local = reactive({ swipe: null as { x: number, y: number } | null, swiping: false, thrown: null as Fling | null }),
+        // Layout height, unaffected by the collapsed scale.
+        size = observeSize(({ height }) => {
+            toast.measured.height = height;
+        });
 
     return html`
         <div