@esportsplus/ui 0.55.0 → 0.56.2

package/src/components/button/icons.ts

@@ -0,0 +1,38 @@
+import { html } from '@esportsplus/template';
+
+
+const alert = () => html`
+    <svg class='button-icon' fill='none' stroke='currentColor' stroke-linecap='round' stroke-width='1.5' viewBox='0 0 12 12'>
+        <circle cx='6' cy='6' r='4.75' />
+        <path d='M6 3.75V6.25M6 8.25V8.26' />
+    </svg>
+`;
+
+const check = () => html`
+    <svg class='button-icon button-icon--draw' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 12 12'>
+        <path d='M2.5 6.25L4.75 8.5L9.5 3.5' pathLength='1' />
+    </svg>
+`;
+
+const copy = () => html`
+    <svg class='button-icon' fill='none' stroke='currentColor' stroke-linejoin='round' stroke-width='1.25' viewBox='0 0 12 12'>
+        <rect height='6.75' rx='1.25' width='6.75' x='4' y='4' />
+        <path d='M8 2.5V2.25C8 1.56 7.44 1 6.75 1H2.25C1.56 1 1 1.56 1 2.25V6.75C1 7.44 1.56 8 2.25 8H2.5' />
+    </svg>
+`;
+
+const cross = () => html`
+    <svg class='button-icon button-icon--draw' fill='none' stroke='currentColor' stroke-linecap='round' stroke-width='1.5' viewBox='0 0 12 12'>
+        <path d='M3.5 3.5L8.5 8.5M8.5 3.5L3.5 8.5' pathLength='1' />
+    </svg>
+`;
+
+const spinner = () => html`
+    <svg class='button-icon button-icon--spin' fill='none' stroke='currentColor' stroke-linecap='round' stroke-width='1.5' viewBox='0 0 12 12'>
+        <circle cx='6' cy='6' opacity='0.2' r='4.75' />
+        <path d='M10.75 6A4.75 4.75 0 0 0 6 1.25' />
+    </svg>
+`;
+
+
+export { alert, check, copy, cross, spinner };

package/src/components/button/index.ts

@@ -0,0 +1,12 @@
+import copy from './copy';
+import fan from './fan';
+import hold from './hold';
+import kbd from './kbd';
+import loading from './loading';
+import './scss/index.scss';
+
+
+const button: { copy: typeof copy, fan: typeof fan, hold: typeof hold, kbd: typeof kbd, loading: typeof loading } = { copy, fan, hold, kbd, loading };
+
+
+export default button;

package/src/components/button/kbd.ts

@@ -0,0 +1,156 @@
+import { reactive } from '@esportsplus/reactivity';
+import { component, html, type Attributes } from '@esportsplus/template';
+import icon from '~/components/icon';
+import plus from './svg/plus.svg';
+
+
+const KBD_KEY = Symbol.for('@esportsplus/ui/button.kbd.key');
+
+
+type A = Attributes & {
+    [KBD_KEY]?: Attributes,
+    keys: string[],
+    ontrigger?: () => void,
+    onwindowblur?: never,
+    onwindowkeydown?: never,
+    onwindowkeyup?: never
+};
+
+type Key = { code: string, key: string, keyboard: boolean, legend: string, pointer: boolean };
+
+
+const KEYS: Record<string, [key: string, legend: string]> = {
+    alt: ['alt', '⌥'],
+    ctrl: ['control', '⌃'],
+    down: ['arrowdown', '↓'],
+    enter: ['enter', '↵'],
+    escape: ['escape', 'esc'],
+    left: ['arrowleft', '←'],
+    meta: ['meta', '⌘'],
+    right: ['arrowright', '→'],
+    shift: ['shift', '⇧'],
+    space: [' ', '␣'],
+    up: ['arrowup', '↑']
+};
+
+
+function held(keys: Key[]) {
+    for (let i = 0, n = keys.length; i < n; i++) {
+        if (!keys[i].keyboard && !keys[i].pointer) {
+            return false;
+        }
+    }
+
+    return true;
+}
+
+function parse(name: string): Key {
+    let [key, legend] = KEYS[name.toLowerCase()] ?? [name.toLowerCase(), name.length === 1 ? name.toUpperCase() : name];
+
+    return reactive({ code: '', key, keyboard: false, legend, pointer: false });
+}
+
+
+export default component(
+    ({ keys: names, ontrigger, ...attributes }: A) => {
+        let keys = names.map(parse);
+
+        // Only a key going from up to down can complete the combo, so holding it fires once.
+        const press = (key: Key, source: 'keyboard' | 'pointer') => {
+            let down = key.keyboard || key.pointer;
+
+            key[source] = true;
+
+            if (down || !held(keys)) {
+                return false;
+            }
+
+            ontrigger?.();
+
+            return true;
+        };
+
+        const release = () => {
+            for (let i = 0, n = keys.length; i < n; i++) {
+                keys[i].keyboard = false;
+            }
+        };
+
+        return html`
+            <kbd
+                class='button-kbd'
+                ${attributes}
+                ${{
+                    onwindowblur: release,
+                    onwindowkeydown: (e: KeyboardEvent) => {
+                        if (!e.key) {
+                            return;
+                        }
+
+                        let name = e.key.toLowerCase();
+
+                        for (let i = 0, n = keys.length; i < n; i++) {
+                            let key = keys[i];
+
+                            if (key.key !== name) {
+                                continue;
+                            }
+
+                            key.code = e.code;
+
+                            if (press(key, 'keyboard')) {
+                                e.preventDefault();
+                            }
+
+                            break;
+                        }
+                    },
+                    onwindowkeyup: (e: KeyboardEvent) => {
+                        let name = e.key?.toLowerCase();
+
+                        // macOS drops the keyup of every key released while Meta is held.
+                        if (name === 'meta') {
+                            release();
+                            return;
+                        }
+
+                        // Modifiers change 'key' mid-press (shift + '/' is '?'), 'code' is stable.
+                        for (let i = 0, n = keys.length; i < n; i++) {
+                            let key = keys[i];
+
+                            if (key.code === e.code || key.key === name) {
+                                key.keyboard = false;
+                            }
+                        }
+                    }
+                }}
+            >
+                ${keys.map((key, i) => html`
+                    ${i > 0 && icon({ 'aria-hidden': true, class: 'button-kbd-plus' }, plus)}
+                    <kbd
+                        class='button button--kbd'
+                        ${attributes[KBD_KEY]}
+                        ${{
+                            class: () => key.keyboard || key.pointer ? '--active' : '',
+                            onpointercancel: () => {
+                                key.pointer = false;
+                            },
+                            onpointerdown: () => {
+                                press(key, 'pointer');
+                            },
+                            onpointerleave: () => {
+                                key.pointer = false;
+                            },
+                            onpointerup: () => {
+                                key.pointer = false;
+                            }
+                        }}
+                    >
+                        ${key.legend}
+                    </kbd>
+                `)}
+            </kbd>
+        `;
+    },
+    { key: KBD_KEY }
+);

package/src/components/button/loading.ts

@@ -0,0 +1,77 @@
+import { component, html, type Attributes } from '@esportsplus/template';
+import { reactive } from '@esportsplus/reactivity';
+import { alert, check, spinner } from './icons';
+import faces from './faces';
+
+
+type A = Attributes & {
+    action: () => unknown;
+    error?: string;
+    onclick?: never;
+    ondisconnect?: never;
+    pending?: string;
+    success?: string;
+    timeout?: number;
+};
+
+
+export default component<A, string>(
+    ({ action, error = 'Try again', pending, success = 'Done', timeout = 1400, ...attributes }, content) => {
+        let run = 0,
+            state = reactive({ status: 'idle' as 'error' | 'idle' | 'pending' | 'success' }),
+            timer: ReturnType<typeof setTimeout> | undefined;
+
+        return html`
+            <button
+                class='button button--feedback'
+                type='button'
+                ${attributes}
+                ${{
+                    'aria-busy': () => state.status === 'pending' && 'true',
+                    'aria-disabled': () => state.status === 'pending' && 'true',
+                    ondisconnect: () => {
+                        clearTimeout(timer);
+                        run++;
+                    },
+                    onclick: async (e) => {
+                        e.preventDefault();
+
+                        if (state.status === 'pending') {
+                            return;
+                        }
+
+                        let id = ++run,
+                            status: 'error' | 'success' = 'success';
+
+                        clearTimeout(timer);
+                        state.status = 'pending';
+
+                        try {
+                            await action();
+                        }
+                        catch {
+                            status = 'error';
+                        }
+
+                        if (id !== run) {
+                            return;
+                        }
+
+                        state.status = status;
+                        timer = setTimeout(() => state.status = 'idle', timeout);
+                    }
+                }}
+            >
+                ${faces(() => state.status, [
+                    { content, key: 'idle' },
+                    { content: pending ?? content, icon: spinner, key: 'pending' },
+                    { content: success, icon: check, key: 'success', tone: 'success' },
+                    { content: error, icon: alert, key: 'error', tone: 'error' }
+                ])}
+            </button>
+            <span class='button-status' role='status' aria-live='polite'>
+                ${() => state.status === 'success' ? success : state.status === 'error' ? error : ''}
+            </span>
+        `;
+    }
+);

package/src/components/button/scss/_fan.scss

@@ -0,0 +1,125 @@
+@use '/tokens';
+
+.button-fan {
+    align-items: center;
+    display: inline-flex;
+    position: relative;
+
+    @include tokens.state(active) {
+        z-index: 9;
+
+        > .button-fan-options > .button-fan-option {
+            --delay: calc(var(--i) * var(--stagger));
+            opacity: 1;
+            pointer-events: auto;
+            scale: 1;
+            translate: 0 0;
+
+            &:active {
+                scale: var(--option-pressed-scale);
+            }
+        }
+
+        > .button--fan .button-fan-swap {
+            > :first-child {
+                opacity: 0;
+                rotate: var(--swap-rotate);
+            }
+
+            > :last-child {
+                opacity: 1;
+                rotate: 0deg;
+            }
+        }
+    }
+
+
+    &-options {
+        align-items: center;
+        display: flex;
+        gap: var(--spacer);
+        pointer-events: none;
+        position: absolute;
+        z-index: 0;
+    }
+
+    &-swap {
+        display: inline-grid;
+        place-items: center;
+
+        > * {
+            grid-area: 1 / 1;
+            transition:
+                opacity var(--swap-spring-duration) var(--swap-spring),
+                rotate var(--swap-spring-duration) var(--swap-spring);
+        }
+
+        > :last-child {
+            opacity: 0;
+            rotate: calc(var(--swap-rotate) * -1);
+        }
+    }
+
+    // Chained through the root so the `.button` transition can't override the stagger
+    > .button-fan-options > .button-fan-option {
+        --delay: calc((var(--n) - 1 - var(--i)) * var(--stagger));
+        opacity: 0;
+        scale: var(--option-scale);
+        transform-origin: var(--origin);
+        transition:
+            opacity var(--option-opacity-duration) ease-out var(--delay),
+            scale var(--option-spring-duration) var(--option-spring) var(--delay),
+            translate var(--option-spring-duration) var(--option-spring) var(--delay);
+        translate:
+            calc((100% + var(--spacer)) * (var(--i) + 1) * var(--direction-x))
+            calc((100% + var(--spacer)) * (var(--i) + 1) * var(--direction-y));
+    }
+
+    > .button-fan-options > .button-fan-option,
+    > .button--fan {
+        &:focus-visible {
+            outline: var(--focus-width) solid var(--focus-color);
+            outline-offset: var(--focus-offset);
+        }
+    }
+
+
+    &--e > .button-fan-options {
+        flex-direction: row;
+        inset: 0 auto 0 100%;
+        padding-left: var(--spacer);
+    }
+
+    &--n > .button-fan-options {
+        flex-direction: column-reverse;
+        inset: auto 0 100% 0;
+        padding-bottom: var(--spacer);
+    }
+
+    &--s > .button-fan-options {
+        flex-direction: column;
+        inset: 100% 0 auto 0;
+        padding-top: var(--spacer);
+    }
+
+    &--w > .button-fan-options {
+        flex-direction: row-reverse;
+        inset: 0 100% 0 auto;
+        padding-right: var(--spacer);
+    }
+
+
+    @media (prefers-reduced-motion: reduce) {
+        --swap-rotate: 0deg;
+
+        > .button-fan-options > .button-fan-option {
+            scale: 1;
+            transition: opacity 0.15s ease-out;
+            translate: none;
+        }
+
+        .button-fan-swap > * {
+            transition: opacity 0.15s ease-out;
+        }
+    }
+}

package/src/components/button/scss/_kbd.scss

@@ -0,0 +1,10 @@
+.button-kbd {
+    align-items: center;
+    display: inline-flex;
+    gap: var(--gap);
+
+    .button-kbd-plus {
+        --size: var(--plus-size);
+        color: var(--plus-color);
+    }
+}

package/src/components/button/scss/index.scss

@@ -1,5 +1,7 @@
 @use '/lib';
 @use '/tokens';
+@use 'fan';
+@use 'kbd';
 @use 'variables';
 @use '../../text/scss/index';
 
@@ -12,9 +14,8 @@
     cursor: pointer;
     flex-wrap: nowrap;
     justify-content: center;
-    padding:
-        max(0px, calc(var(--padding-vertical) - var(--border-width)))
-        max(0px, calc(var(--padding-horizontal) - var(--border-width)));
+    padding-block: max(0px, calc(var(--padding-vertical) - var(--border-width)));
+    padding-inline: max(0px, calc(var(--padding-horizontal) - var(--border-width)));
     transition: all var(--transition-duration) var(--transition-timing-function);
     white-space: nowrap;
     translate: 0;
@@ -34,12 +35,38 @@
     }
 
 
+    // Stacks above the options so they reveal from behind it
+    &--fan {
+        z-index: 1;
+
+        @include tokens.state(pressed) {
+            scale: var(--trigger-pressed-scale);
+        }
+    }
+
+    &--feedback {
+        -webkit-touch-callout: none;
+        touch-action: manipulation;
+        user-select: none;
+    }
+
     &--flat {
         &::after {
             display: none;
         }
     }
 
+    &--hold {
+        isolation: isolate;
+        overflow: hidden;
+    }
+
+    &--kbd {
+        @include tokens.state(active pressed) {
+            translate: 0 1px;
+        }
+    }
+
     &--processing {
         color: transparent;
         pointer-events: none;
@@ -63,10 +90,10 @@
 
         @keyframes button--processing {
             0% {
-                transform: translate(50%, 50%) rotate(0deg);
+                rotate: 0deg;
             }
             100% {
-                transform: translate(50%, 50%) rotate(359deg);
+                rotate: 360deg;
             }
         }
     }
@@ -117,4 +144,89 @@
             text-decoration: underline;
         }
     }
+
+    &-face {
+        align-items: center;
+        display: inline-flex;
+        filter: blur(var(--face-blur));
+        gap: var(--face-gap);
+        grid-area: 1 / 1;
+        opacity: 0;
+        transition:
+            filter var(--face-duration) var(--face-timing-function),
+            opacity var(--face-duration) var(--face-timing-function),
+            translate var(--face-duration) var(--face-timing-function);
+        translate: 0 var(--face-offset);
+
+        &.--active {
+            filter: blur(0);
+            opacity: 1;
+            translate: 0;
+
+            .button-icon--draw path {
+                stroke-dashoffset: 0;
+            }
+        }
+
+        &[data-tone='error'] .button-icon {
+            color: var(--error-color);
+        }
+
+        &[data-tone='success'] .button-icon {
+            color: var(--success-color);
+        }
+    }
+
+    &-faces {
+        display: grid;
+        place-items: center;
+    }
+
+    &-fill {
+        @include lib.position(absolute, full);
+        background: var(--fill-background);
+        border-radius: inherit;
+        clip-path: inset(0 100% 0 0);
+        color: var(--fill-color);
+        display: grid;
+        place-items: center;
+        pointer-events: none;
+    }
+
+    &-icon {
+        flex-shrink: 0;
+        height: var(--icon-size);
+        width: var(--icon-size);
+
+        &--draw path {
+            stroke-dasharray: 1;
+            stroke-dashoffset: 1;
+            transition: stroke-dashoffset var(--draw-duration) var(--draw-timing-function);
+        }
+
+        &--spin {
+            animation: button--processing var(--spin-duration) infinite linear;
+        }
+    }
+
+    &-status {
+        clip-path: inset(50%);
+        height: 1px;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &--skeleton,
+        &-icon--spin {
+            animation: none;
+        }
+
+        &-face,
+        &-icon--draw path {
+            transition: none;
+        }
+    }
 }

package/src/components/button/scss/variables.scss

@@ -34,6 +34,39 @@
     }
 
 
+    &--feedback {
+        --draw-duration: 0.26s;
+        --draw-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+        --error-color: var(--color-red-400);
+        --face-blur: 3px;
+        // Stands in for an overdamped spring (stiffness 260, damping 34, mass 0.8), which never overshoots.
+        --face-duration: 0.4s;
+        --face-gap: 0.375em;
+        --face-offset: 3px;
+        --face-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+        --icon-size: 0.875em;
+        --spin-duration: 0.85s;
+        --success-color: var(--color-green-500);
+    }
+
+    &--hold {
+        // Inverts the button as the sweep passes; buttons with a transparent background must set --fill-color.
+        --fill-background: var(--color);
+        --fill-color: var(--background);
+    }
+
+    // The bottom shadow is the cap's side wall; pressing sinks the cap 1px into it.
+    &--kbd {
+        --box-shadow-default: 0 var(--kbd-depth) 0 var(--kbd-shadow-color);
+        --kbd-depth: 2px;
+        --kbd-shadow-color: color-mix(in srgb, var(--background-default) 60%, black);
+
+        @include tokens.state(active pressed) {
+            --background: var(--background-active);
+            --box-shadow: 0 calc(var(--kbd-depth) - 1px) 0 var(--kbd-shadow-color);
+        }
+    }
+
     &--processing {
         --animation-duration: 0.64s;
         --border-width: var(--border-width-400);
@@ -45,3 +78,51 @@
         --animation-duration: 6.4s;
     }
 }
+
+.button-fan {
+    --focus-color: currentColor;
+    --focus-offset: 2px;
+    --focus-width: 2px;
+    --option-opacity-duration: 0.2s;
+    --option-pressed-scale: 0.92;
+    --option-scale: 0.5;
+    --option-spring: linear(0, 0.067, 0.221, 0.406, 0.586, 0.741, 0.862, 0.949, 1.006, 1.037, 1.051, 1.053, 1.047, 1.038, 1.028, 1.019, 1.011, 1.006, 1.002, 0.999, 0.998, 0.997, 0.997, 0.998, 1);
+    --option-spring-duration: 0.6s;
+    --spacer: var(--size-300);
+    --stagger: 30ms;
+    --swap-rotate: 90deg;
+    --swap-spring: linear(0, 0.07, 0.228, 0.418, 0.602, 0.759, 0.88, 0.965, 1.019, 1.047, 1.058, 1.056, 1.048, 1.038, 1.027, 1.017, 1.009, 1.003, 1, 0.998, 0.997, 0.997, 0.997, 0.998, 1);
+    --swap-spring-duration: 0.44s;
+    --trigger-pressed-scale: 0.94;
+
+
+    &--e {
+        --direction-x: -1;
+        --direction-y: 0;
+        --origin: left center;
+    }
+
+    &--n {
+        --direction-x: 0;
+        --direction-y: 1;
+        --origin: center bottom;
+    }
+
+    &--s {
+        --direction-x: 0;
+        --direction-y: -1;
+        --origin: center top;
+    }
+
+    &--w {
+        --direction-x: 1;
+        --direction-y: 0;
+        --origin: right center;
+    }
+}
+
+.button-kbd {
+    --gap: var(--size-200);
+    --plus-color: color-mix(in srgb, currentColor 60%, transparent);
+    --plus-size: var(--size-300);
+}

package/src/components/button/svg/plus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>

package/src/components/card/scss/index.scss

@@ -5,9 +5,8 @@
 .card {
     background: var(--background);
     border-radius: var(--border-radius);
-    padding:
-        max(0px, calc(var(--padding-vertical) - var(--border-width)))
-        max(0px, calc(var(--padding-horizontal) - var(--border-width)));
+    padding-block: max(0px, calc(var(--padding-vertical) - var(--border-width)));
+    padding-inline: max(0px, calc(var(--padding-horizontal) - var(--border-width)));
     position: relative;
     transition:
         background var(--transition-duration) var(--transition-timing-function),