@esportsplus/ui 0.55.0 → 0.56.3

package/src/components/pagination/index.ts

@@ -0,0 +1,129 @@
+import { html, type Attributes } from '@esportsplus/template';
+import { effect, onCleanup, reactive, untrack } from '@esportsplus/reactivity';
+import icon from '~/components/icon';
+import next from './svg/arrow-right.svg';
+import previous from './svg/arrow-left.svg';
+import './scss/index.scss';
+
+
+// Sentinel page number rendered as an overflow ellipsis.
+const DOTS = 0;
+
+
+function range(start: number, end: number) {
+    let values: number[] = [];
+
+    for (let i = start; i <= end; i++) {
+        values.push(i);
+    }
+
+    return values;
+}
+
+// First, last, current, two ellipses and the siblings on each side of current.
+function pages(page: number, siblings: number, total: number) {
+    let slots = siblings * 2 + 5;
+
+    if (total <= slots) {
+        return range(1, total);
+    }
+
+    let edge = slots - 2,
+        left = Math.max(page - siblings, 1),
+        right = Math.min(page + siblings, total);
+
+    if (left <= 3) {
+        return [...range(1, edge), DOTS, total];
+    }
+
+    if (right >= total - 2) {
+        return [1, DOTS, ...range(total - edge + 1, total)];
+    }
+
+    return [1, DOTS, ...range(left, right), DOTS, total];
+}
+
+
+export default ({ onchange, siblings = 1, state: api = reactive({ page: 1 }), total, ...attributes }: Attributes & {
+    onchange?: (page: number) => void;
+    siblings?: number;
+    state?: { page: number };
+    total: number;
+}) => {
+    let render = reactive([] as { value: number }[]),
+        stop = effect(() => {
+            let values = pages(api.page, siblings, total);
+
+            untrack(() => {
+                // Reuse cells in place so only the changed labels re-render.
+                for (let i = 0, n = values.length; i < n; i++) {
+                    if (render[i]) {
+                        render[i].value = values[i];
+                    }
+                    else {
+                        let cell = reactive({ value: values[i] });
+
+                        render[i] = cell;
+                    }
+                }
+
+                if (render.length > values.length) {
+                    render.splice(values.length);
+                }
+            });
+        });
+
+    function go(page: number) {
+        page = Math.min(Math.max(page, 1), total);
+
+        if (page === api.page) {
+            return;
+        }
+
+        api.page = page;
+        onchange?.(page);
+    }
+
+    onCleanup(stop);
+
+    return html`
+        <nav aria-label='Pagination' class='pagination' ${attributes}>
+            <button
+                aria-disabled='${() => String(api.page <= 1)}'
+                class='button pagination-control ${() => api.page <= 1 ? '--disabled' : ''}'
+                onclick='${() => go(api.page - 1)}'
+                type='button'
+            >
+                ${icon({ 'aria-hidden': 'true' }, previous)}
+                Previous
+            </button>
+
+            <div class='pagination-pages'>
+                ${html.reactive(render, function (cell) {
+                    return html`
+                        <button
+                            aria-current='${() => cell.value === api.page ? 'page' : 'false'}'
+                            aria-hidden='${() => String(cell.value === DOTS)}'
+                            class='button pagination-page ${() => cell.value === DOTS ? 'pagination-page--dots' : cell.value === api.page ? '--active' : ''}'
+                            onclick='${() => cell.value !== DOTS && go(cell.value)}'
+                            tabindex='${() => cell.value === DOTS ? -1 : 0}'
+                            type='button'
+                        >
+                            ${() => cell.value === DOTS ? '...' : cell.value}
+                        </button>
+                    `;
+                })}
+            </div>
+
+            <button
+                aria-disabled='${() => String(api.page >= total)}'
+                class='button pagination-control ${() => api.page >= total ? '--disabled' : ''}'
+                onclick='${() => go(api.page + 1)}'
+                type='button'
+            >
+                Next
+                ${icon({ 'aria-hidden': 'true' }, next)}
+            </button>
+        </nav>
+    `;
+};

package/src/components/pagination/scss/index.scss

@@ -0,0 +1,46 @@
+@use '/tokens';
+// Before variables: the button sheet re-emits its defaults, which would otherwise override ours.
+@use '../../button/scss/index';
+@use 'variables';
+
+.pagination {
+    align-items: center;
+    display: flex;
+    gap: var(--gap);
+    justify-content: space-between;
+    width: 100%;
+
+    &-control,
+    &-page {
+        border: var(--border-width) solid var(--border-color);
+        height: var(--size);
+    }
+
+    &-control {
+        gap: var(--size-100);
+
+        .icon {
+            --size: var(--size-400);
+        }
+    }
+
+    &-page {
+        font-variant: tabular-nums;
+        min-width: var(--size);
+
+        @include tokens.state(active) {
+            --box-shadow: var(--box-shadow-100);
+        }
+
+        &--dots {
+            cursor: default;
+            pointer-events: none;
+        }
+    }
+
+    &-pages {
+        align-items: center;
+        display: flex;
+        gap: var(--size-100);
+    }
+}

package/src/components/pagination/scss/variables.scss

@@ -0,0 +1,40 @@
+.pagination {
+    --gap: var(--size-300);
+    --size: 32px;
+
+    &-control,
+    &-page {
+        --background-hover: var(--color-grey-400);
+        --background-pressed: var(--color-grey-500);
+        --border-color-default: var(--color-border-300);
+        --border-radius: var(--border-radius-400);
+        --border-width: var(--border-width-400);
+        --color-default: var(--color-text-300);
+        --color-hover: var(--color-text-500);
+        --font-size: var(--font-size-300);
+        --font-weight: var(--font-weight-500);
+        --padding-horizontal: var(--size-300);
+        --padding-vertical: 0px;
+        --width: auto;
+    }
+
+    &-control {
+        --background-default: var(--color-white-300);
+        --box-shadow-default: var(--box-shadow-100);
+        --color-default: var(--color-text-500);
+    }
+
+    &-page {
+        --background-active: var(--color-white-300);
+        --border-color-active: var(--color-border-300);
+        --border-color-default: transparent;
+        --color-active: var(--color-text-500);
+        --padding-horizontal: 0px;
+
+        &--dots {
+            --background-hover: transparent;
+            --background-pressed: transparent;
+            --color-hover: var(--color-default);
+        }
+    }
+}

package/src/components/pagination/svg/arrow-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m10 4-4 4 4 4M6 8h8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/components/pagination/svg/arrow-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m6 4 4 4-4 4M2 8h8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/components/password/constants.ts

@@ -0,0 +1,4 @@
+const PASSWORD_INPUT = Symbol.for('@esportsplus/ui/password.input');
+
+
+export { PASSWORD_INPUT };

package/src/components/password/index.ts

@@ -0,0 +1,97 @@
+import { html, type Attributes } from '@esportsplus/template';
+import { reactive } from '@esportsplus/reactivity';
+import input from '~/components/input';
+import { PASSWORD_INPUT } from './constants';
+import './scss/index.scss';
+
+
+type A = Attributes & { [PASSWORD_INPUT]?: Omit<Parameters<typeof input>[0], 'state'> };
+
+type State = { active: boolean, capslock: boolean, error: string, visible: boolean };
+
+
+function template(
+    this: { attributes?: A } | void,
+    {
+        state = reactive({
+            active: false,
+            capslock: false,
+            error: '',
+            visible: false
+        }),
+        ...attributes
+    }: A & { state?: State } = {}
+) {
+    // Every key and pointer event carries the lock state, including the Caps Lock
+    // key's own events, so the field stays right without polling
+    let read = (e: KeyboardEvent | PointerEvent) => {
+            state.capslock = e.getModifierState('CapsLock');
+        },
+        warning = () => state.active && state.capslock;
+
+    return html`
+        <div
+            class='password'
+            ${this?.attributes}
+            ${attributes}
+            ${{
+                class: [
+                    () => state.active && '--active',
+                    () => warning() && '--capslock'
+                ],
+                onkeydown: read,
+                onkeyup: read,
+                onpointerdown: read
+            }}
+        >
+            <div class='password-field'>
+                ${input.call({ attributes: this?.attributes?.[PASSWORD_INPUT] }, {
+                    autocomplete: 'current-password',
+                    ...attributes[PASSWORD_INPUT],
+                    state,
+                    type: () => state.visible ? 'text' : 'password'
+                })}
+                <div class='password-key' aria-hidden='true'>
+                    <span class='password-key-light'></span>
+                    <svg viewBox='0 0 12 10'>
+                        <path d='M6 1 2 5h2v1.5h4V5h2L6 1Z' />
+                        <path d='M4 8.75h4' />
+                    </svg>
+                </div>
+                <button
+                    class='password-toggle'
+                    type='button'
+                    ${{
+                        'aria-label': () => state.visible ? 'Hide password' : 'Show password',
+                        'aria-pressed': () => String(state.visible),
+                        class: () => state.visible && '--visible',
+                        onclick: () => {
+                            state.visible = !state.visible;
+                        },
+                        // Keeps focus in the field so the caret and caps lock state survive
+                        onpointerdown: (e: PointerEvent) => {
+                            e.preventDefault();
+                        }
+                    }}
+                >
+                    <svg class='password-toggle-show' viewBox='0 0 16 16' aria-hidden='true'>
+                        <path d='M1.5 8S4 3.5 8 3.5 14.5 8 14.5 8 12 12.5 8 12.5 1.5 8 1.5 8Z' />
+                        <circle cx='8' cy='8' r='2' />
+                    </svg>
+                    <svg class='password-toggle-hide' viewBox='0 0 16 16' aria-hidden='true'>
+                        <path d='M1.5 8S4 3.5 8 3.5 14.5 8 14.5 8 12 12.5 8 12.5 1.5 8 1.5 8Z' />
+                        <circle cx='8' cy='8' r='2' />
+                        <path d='m2.5 2.5 11 11' />
+                    </svg>
+                </button>
+            </div>
+            <div class='password-warning'>
+                <span aria-hidden='true'>Caps Lock is on</span>
+                <span class='password-warning-live' aria-live='polite'>${() => warning() ? 'Caps Lock is on' : ''}</span>
+            </div>
+        </div>
+    `;
+}
+
+
+export default Object.assign(template, { input: PASSWORD_INPUT } as const);

package/src/components/password/scss/index.scss

@@ -0,0 +1,188 @@
+@use 'variables';
+
+.password {
+    display: grid;
+    gap: var(--size-100);
+    min-width: 0;
+    width: 100%;
+
+    &-field {
+        background: var(--background);
+        border: var(--border-width) var(--border-style) var(--border-color);
+        border-radius: var(--border-radius);
+        box-shadow: var(--box-shadow);
+        position: relative;
+        transition:
+            background var(--transition-duration) ease-out,
+            border-color var(--transition-duration) ease-out,
+            box-shadow var(--transition-duration) ease-out;
+
+        .input {
+            --background: transparent;
+            --border-width: 0px;
+            outline: none;
+            // Reserved for both the key and the toggle so text never shifts when the key arrives
+            padding-right: calc(var(--toggle-size) + var(--key-width) + var(--size-300));
+        }
+    }
+
+    &-key {
+        background: var(--key-background);
+        border: 1px solid var(--key-border-color);
+        border-radius: 5px;
+        box-shadow: 0 2px 0 0 var(--key-border-color);
+        display: flex;
+        filter: blur(3px);
+        flex-direction: column;
+        height: var(--key-height);
+        inset: 0 calc(var(--toggle-size) + 8px) 0 auto;
+        justify-content: space-between;
+        margin: auto 0;
+        opacity: 0;
+        padding: 3px 4px;
+        pointer-events: none;
+        position: absolute;
+        transform: translateX(8px);
+        transition:
+            filter var(--transition-duration) var(--transition-timing-function),
+            opacity var(--transition-duration) var(--transition-timing-function),
+            transform var(--transition-duration) var(--transition-timing-function);
+        width: var(--key-width);
+
+        svg {
+            align-self: center;
+            color: var(--key-color);
+            fill: none;
+            height: 9px;
+            stroke: currentColor;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+            stroke-width: 1.1;
+            width: 11px;
+        }
+
+        &-light {
+            background: var(--key-light-color);
+            border-radius: 50%;
+            height: 4px;
+            transition:
+                background-color 300ms ease-out,
+                box-shadow 300ms ease-out;
+            width: 4px;
+        }
+    }
+
+    &-toggle {
+        align-items: center;
+        border-radius: calc(var(--border-radius) - 2px);
+        color: var(--toggle-color);
+        cursor: pointer;
+        display: grid;
+        height: var(--toggle-size);
+        inset: 0 4px 0 auto;
+        justify-items: center;
+        margin: auto 0;
+        position: absolute;
+        touch-action: manipulation;
+        transition:
+            background-color var(--transition-duration) ease-out,
+            color var(--transition-duration) ease-out,
+            scale var(--transition-duration) ease-out;
+        width: var(--toggle-size);
+
+        &:hover {
+            background: var(--toggle-background-hover);
+            color: var(--toggle-color-hover);
+        }
+
+        &:active {
+            scale: 0.96;
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--toggle-color-hover);
+        }
+
+        svg {
+            fill: none;
+            grid-area: 1 / 1;
+            height: 16px;
+            stroke: currentColor;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+            stroke-width: 1.5;
+            transition:
+                filter 300ms var(--transition-timing-function),
+                opacity 300ms var(--transition-timing-function),
+                scale 300ms var(--transition-timing-function);
+            width: 16px;
+        }
+
+        &:not(.--visible) .password-toggle-hide,
+        &.--visible .password-toggle-show {
+            filter: blur(4px);
+            opacity: 0;
+            scale: 0.25;
+        }
+    }
+
+    // Fixed height so surrounding layout never jumps when the warning appears
+    &-warning {
+        color: var(--warning-color);
+        font-size: var(--warning-font-size);
+        height: var(--warning-height);
+        line-height: var(--warning-height);
+        position: relative;
+
+        > span:first-child {
+            filter: blur(2px);
+            inset: 0;
+            opacity: 0;
+            position: absolute;
+            transform: translateY(-2px);
+            transition:
+                filter var(--transition-duration) var(--transition-timing-function),
+                opacity var(--transition-duration) var(--transition-timing-function),
+                transform var(--transition-duration) var(--transition-timing-function);
+        }
+
+        &-live {
+            clip-path: inset(50%);
+            height: 1px;
+            overflow: hidden;
+            position: absolute;
+            white-space: nowrap;
+            width: 1px;
+        }
+    }
+
+    &.--capslock {
+        .password-key {
+            filter: none;
+            opacity: 1;
+            transform: none;
+            transition-duration: 350ms;
+            transition-timing-function: var(--transition-timing-function-spring);
+
+            // Lit hardware reads as "on" in any theme, like a real keyboard light
+            &-light {
+                box-shadow: 0 0 4px 1px color-mix(in oklch, var(--key-light-color) 55%, transparent);
+            }
+        }
+
+        .password-warning > span:first-child {
+            filter: none;
+            opacity: 1;
+            transform: none;
+            transition-duration: 200ms;
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .password-key,
+        .password-toggle svg,
+        .password-warning > span:first-child {
+            transition-property: opacity;
+        }
+    }
+}

package/src/components/password/scss/variables.scss

@@ -0,0 +1,50 @@
+.password {
+    --background: var(--background-default);
+    --background-active: var(--background-default);
+    --background-default: transparent;
+    --background-hover: var(--background-default);
+    --border-color: var(--border-color-default);
+    --border-color-active: var(--border-color-default);
+    --border-color-default: var(--background);
+    --border-color-hover: var(--border-color-default);
+    --border-radius: var(--border-radius-400);
+    --border-style: solid;
+    --border-width: 0px;
+    --box-shadow: var(--box-shadow-default);
+    --box-shadow-active: var(--box-shadow-default);
+    --box-shadow-default: none;
+    --box-shadow-hover: var(--box-shadow-default);
+    --key-background: var(--color-white-400);
+    --key-border-color: var(--color-border-400);
+    --key-color: var(--color-text-300);
+    --key-height: 22px;
+    --key-light-color: var(--key-border-color);
+    --key-light-color-active: var(--color-green-400);
+    --key-width: 30px;
+    --toggle-background-hover: var(--color-grey-400);
+    --toggle-color: var(--color-text-300);
+    --toggle-color-hover: var(--color-text-500);
+    --toggle-size: 32px;
+    --transition-duration: 150ms;
+    --transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+    --transition-timing-function-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
+    --warning-color: var(--color-text-300);
+    --warning-font-size: var(--font-size-300);
+    --warning-height: 20px;
+
+    &:not(.--active):hover {
+        --background: var(--background-hover);
+        --border-color: var(--border-color-hover);
+        --box-shadow: var(--box-shadow-hover);
+    }
+
+    &.--active {
+        --background: var(--background-active);
+        --border-color: var(--border-color-active);
+        --box-shadow: var(--box-shadow-active);
+    }
+
+    &.--capslock {
+        --key-light-color: var(--key-light-color-active);
+    }
+}

package/src/components/progress/index.ts

@@ -0,0 +1,57 @@
+import { reactive } from '@esportsplus/reactivity';
+import { html, type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    label?: string;
+    // Shows the rounded percentage beside the label.
+    percent?: boolean;
+    state?: State;
+    // A line under the bar describing the current stage, derived from the value.
+    status?: (value: number) => string;
+    value?: number;
+};
+
+type State = {
+    value: number;
+};
+
+
+function clamp(value: number) {
+    return Math.min(100, Math.max(0, value || 0));
+}
+
+
+export default ({ label, percent = true, state, status, value = 0, ...attributes }: A) => {
+    let s = state ?? reactive({ value });
+
+    return html`
+        <div class='progress' ${attributes}>
+            ${label && html`
+                <div class='progress-header'>
+                    <span class='progress-label'>${label}</span>
+                    ${percent && html`<span class='progress-percent'>${() => `${Math.round(clamp(s.value))}%`}</span>`}
+                </div>
+            `}
+
+            <div
+                aria-label='${label ?? 'Progress'}'
+                aria-valuemax='100'
+                aria-valuemin='0'
+                class='progress-track'
+                role='progressbar'
+                ${{
+                    'aria-valuenow': () => Math.round(clamp(s.value)),
+                    'aria-valuetext': () => status ? status(clamp(s.value)) : `${Math.round(clamp(s.value))}%`
+                }}
+            >
+                <div class='progress-indicator' style='${() => `translate: ${clamp(s.value) - 100}% 0`}'></div>
+            </div>
+
+            ${status && html`<div class='progress-status'>${() => status(clamp(s.value))}</div>`}
+        </div>
+    `;
+};
+
+export type { State as ProgressState };

package/src/components/progress/scss/index.scss

@@ -0,0 +1,49 @@
+@use 'variables';
+
+.progress {
+    color: var(--color);
+    display: flex;
+    flex-direction: column;
+    font-size: var(--font-size);
+    gap: 8px;
+    width: 100%;
+
+    &-header {
+        align-items: baseline;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    // The bar is full width and slides in from the left, so it moves on the compositor instead of re-laying out.
+    &-indicator {
+        background: var(--indicator-color);
+        height: 100%;
+        transition: translate var(--duration) var(--ease);
+        width: 100%;
+    }
+
+    &-percent {
+        color: var(--muted-color);
+        font-variant-numeric: tabular-nums;
+    }
+
+    &-status {
+        color: var(--muted-color);
+        font-size: var(--status-font-size);
+    }
+
+    &-track {
+        background: var(--track-color);
+        border-radius: 999px;
+        height: var(--height);
+        overflow: hidden;
+        position: relative;
+        width: 100%;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &-indicator {
+            transition: none;
+        }
+    }
+}

package/src/components/progress/scss/variables.scss

@@ -0,0 +1,11 @@
+.progress {
+    --color: var(--color-text-500);
+    --duration: 150ms;
+    --ease: cubic-bezier(0.4, 0, 0.2, 1);
+    --font-size: calc(var(--font-size-400) * 0.875);
+    --height: 6px;
+    --indicator-color: var(--color-text-500);
+    --muted-color: var(--color-text-300);
+    --status-font-size: 12px;
+    --track-color: var(--color-grey-500);
+}