@esportsplus/ui 0.55.0 → 0.56.3

package/src/components/inline-edit/scss/index.scss

@@ -0,0 +1,152 @@
+@use 'variables';
+
+// Pulled out by its own padding, so the text lines up with the surrounding content while the tint still has room.
+.inline-edit {
+    color: var(--color);
+    display: grid;
+    margin-inline: calc(var(--box-padding-start) * -1);
+    position: relative;
+
+
+    &-display,
+    & > #{&}-field {
+        border-radius: var(--box-border-radius);
+        grid-area: 1 / 1;
+        overflow: hidden;
+        padding: var(--box-padding-block) var(--box-padding-end) var(--box-padding-block) var(--box-padding-start);
+        text-align: start;
+        text-overflow: ellipsis;
+        white-space: pre;
+        width: 100%;
+    }
+
+    &--multiline > #{&}-display,
+    &--multiline > #{&}-field {
+        overflow-wrap: break-word;
+        text-overflow: clip;
+        white-space: pre-wrap;
+    }
+
+    // Stays in the cell while editing (hidden), so the field inherits its exact width and starting height.
+    &-display {
+        background: transparent;
+        border: 0;
+        color: inherit;
+        cursor: text;
+        display: block;
+        font: inherit;
+        letter-spacing: inherit;
+        line-height: inherit;
+        outline: none;
+        transition: background-color var(--transition-duration) var(--transition-timing-function);
+
+        &:hover {
+            background: var(--background-hover);
+        }
+
+        &:focus-visible {
+            outline: var(--border-width-500) solid var(--outline-color);
+        }
+
+        .inline-edit.--active > & {
+            visibility: hidden;
+        }
+
+        .inline-edit.--empty:not(.--active) > & {
+            color: var(--placeholder-color);
+        }
+    }
+
+    // Qualified by the root so it wins over the reused input/textarea styles regardless of stylesheet order.
+    & > #{&}-field {
+        --background-default: var(--field-background);
+        --color-default: currentColor;
+        box-shadow: var(--field-ring);
+        display: block;
+        font-size: inherit;
+        font-weight: inherit;
+        height: 100%;
+        letter-spacing: inherit;
+        line-height: inherit;
+        min-height: 0;
+        outline: none;
+        resize: none;
+        transition: none;
+
+        &::placeholder {
+            color: var(--placeholder-color);
+        }
+    }
+
+    // Pinned to the first line's height so it stays put as the text grows.
+    &-icon {
+        color: var(--icon-color);
+        display: grid;
+        height: 24px;
+        inset-block-start: 4px;
+        inset-inline-end: 6px;
+        place-items: center;
+        pointer-events: none;
+        position: absolute;
+        width: 24px;
+
+        svg {
+            grid-area: 1 / 1;
+            height: var(--icon-size);
+            transition:
+                filter var(--icon-swap-duration) var(--icon-swap-timing-function),
+                opacity var(--icon-swap-duration) var(--icon-swap-timing-function),
+                scale var(--icon-swap-duration) var(--icon-swap-timing-function);
+            width: var(--icon-size);
+        }
+
+        &-check {
+            color: var(--icon-color-saved);
+            filter: blur(4px);
+            opacity: 0;
+            scale: 0.25;
+        }
+
+        // The pencil only shows on hover or keyboard focus.
+        &-pencil {
+            opacity: 0;
+        }
+
+        .inline-edit:hover &-pencil,
+        .inline-edit:has(:focus-visible) &-pencil {
+            opacity: 1;
+        }
+
+        .inline-edit.--saved &-check {
+            filter: blur(0);
+            opacity: 1;
+            scale: 1;
+        }
+
+        .inline-edit.--saved &-pencil {
+            filter: blur(4px);
+            opacity: 0;
+            scale: 0.25;
+        }
+
+        .inline-edit.--active > & {
+            visibility: hidden;
+        }
+    }
+
+    &-label {
+        clip-path: inset(50%);
+        height: 1px;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .inline-edit-icon svg {
+        filter: none !important;
+        scale: 1 !important;
+    }
+}

package/src/components/inline-edit/scss/variables.scss

@@ -0,0 +1,17 @@
+.inline-edit {
+    --background-hover: oklch(from var(--color-text-500) l c h / 0.04);
+    --box-border-radius: var(--border-radius-400);
+    --box-padding-block: 4px;
+    --box-padding-end: 36px;
+    --box-padding-start: 8px;
+    --color: var(--color-text-500);
+    --field-background: var(--color-white-300);
+    --field-ring: 0 0 0 1.5px oklch(from var(--color-text-500) l c h / 0.25);
+    --icon-color: var(--color-text-300);
+    --icon-color-saved: var(--color-text-500);
+    --icon-size: 16px;
+    --icon-swap-duration: 300ms;
+    --icon-swap-timing-function: linear(0, 0.035, 0.118, 0.216, 0.319, 0.424, 0.515, 0.6, 0.669, 0.728, 0.781, 0.822, 0.856, 0.885, 0.908, 0.927, 0.942, 0.954, 0.964, 0.971, 0.977, 0.982, 0.986, 0.989, 0.991, 0.993, 0.995, 0.996, 0.997, 0.997, 1);
+    --outline-color: var(--color-text-500);
+    --placeholder-color: var(--color-text-300);
+}

package/src/components/input/index.ts

@@ -4,15 +4,22 @@ import form from '~/components/form';
 import './scss/index.scss';
 
 
+type A = Attributes & {
+    onfocusin?: never;
+    onfocusout?: never;
+    onrender?: never;
+};
+
+
 export default function (
-    this: { attributes?: Attributes } | void,
+    this: { attributes?: A } | void,
     {
         state = reactive({
             active: false,
             error: ''
         }),
         ...attributes
-    }: Attributes & { state?: { active: boolean, error: string } }
+    }: A & { state?: { active: boolean, error: string } } = {}
 ) {
     attributes.type ??= 'text';
 

package/src/components/input/scss/index.scss

@@ -16,9 +16,8 @@
     min-height: calc((var(--padding-vertical) * 2) + var(--size));
     min-width: 0;
     overflow: hidden;
-    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;
     text-overflow: ellipsis;
     transition:

package/src/components/kanban-board/index.ts

@@ -0,0 +1,326 @@
+import { reactive } from '@esportsplus/reactivity';
+import { html, type Attributes } from '@esportsplus/template';
+import counter from '~/components/counter';
+import sortable from '~/components/sortable';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    columns: Column[];
+    label?: string;
+    onfocusin?: never;
+    onfocusout?: never;
+    onkeydown?: never;
+    onpointerdown?: never;
+    onsort?: (columns: Column[]) => void;
+};
+
+type Card = {
+    id: string;
+    title: string;
+};
+
+type Column = {
+    cards: Card[];
+    id: string;
+    title: string;
+};
+
+type Held = {
+    before: Element[][];
+    item: HTMLElement;
+};
+
+
+const FLIP: KeyframeAnimationOptions = { duration: 300, easing: 'cubic-bezier(0.2, 0, 0, 1)' };
+
+
+function button(item: Element) {
+    return item.querySelector<HTMLElement>('.kanban-board-card')!;
+}
+
+// Cards moved from the keyboard glide to their new slot, and their neighbours make room the same way.
+function flip(board: HTMLElement, mutate: VoidFunction) {
+    let first = new Map<HTMLElement, DOMRect>(),
+        items = board.querySelectorAll<HTMLElement>('.kanban-board-item');
+
+    for (let i = 0, n = items.length; i < n; i++) {
+        first.set(items[i], items[i].getBoundingClientRect());
+    }
+
+    mutate();
+
+    if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
+        return;
+    }
+
+    for (let [item, start] of first) {
+        let rect = item.getBoundingClientRect(),
+            x = start.left - rect.left,
+            y = start.top - rect.top;
+
+        if (x || y) {
+            item.animate([{ translate: `${x}px ${y}px` }, { translate: '0px 0px' }], FLIP);
+        }
+    }
+}
+
+
+export default ({ columns, label = 'Board', onsort, ...attributes }: A) => {
+    let board: HTMLElement | undefined,
+        cards = new Map(columns.flatMap((column) => column.cards.map((card) => [card.id, card] as const))),
+        counts = columns.map((column) => reactive({ value: column.cards.length })),
+        first = columns.flatMap((column) => column.cards)[0]?.id,
+        frame = 0,
+        group = `kanban-board-${Math.random().toString(36).slice(2)}`,
+        held: Held | null = null,
+        state = reactive({ announcement: '' });
+
+    function cancel() {
+        if (!held) {
+            return;
+        }
+
+        let { before, item } = held,
+            all = lists();
+
+        held = null;
+        flip(board!, () => {
+            for (let i = 0, n = all.length; i < n; i++) {
+                all[i].append(...before[i]);
+            }
+        });
+        release(item);
+        focus(item);
+        sync();
+        state.announcement = `Cancelled. ${title(item)} returned to ${where(item)}.`;
+    }
+
+    function drop() {
+        if (!held) {
+            return;
+        }
+
+        let item = held.item;
+
+        held = null;
+        release(item);
+        state.announcement = `Dropped ${title(item)} in ${where(item)}.`;
+    }
+
+    function focus(item: Element) {
+        let target = button(item);
+
+        if (document.activeElement !== target) {
+            target.focus({ preventScroll: true });
+        }
+    }
+
+    function lists() {
+        return Array.from(board!.querySelectorAll<HTMLElement>('.kanban-board-list'));
+    }
+
+    function release(item: HTMLElement) {
+        item.classList.remove('--held');
+        button(item).removeAttribute('aria-pressed');
+    }
+
+    function sync() {
+        let all = lists(),
+            next = columns.map((column, i) => ({
+                ...column,
+                cards: Array.from(all[i].children, (item) => cards.get((item as HTMLElement).dataset.id!)!)
+            }));
+
+        for (let i = 0, n = next.length; i < n; i++) {
+            counts[i].value = next[i].cards.length;
+        }
+
+        onsort?.(next);
+    }
+
+    function title(item: HTMLElement) {
+        return cards.get(item.dataset.id!)?.title ?? '';
+    }
+
+    function where(item: HTMLElement) {
+        let list = item.parentElement!;
+
+        return `${columns[lists().indexOf(list)].title}, position ${Array.prototype.indexOf.call(list.children, item) + 1} of ${list.children.length}`;
+    }
+
+    return html`
+        <div
+            class='kanban-board'
+            aria-label='${label}'
+            role='group'
+            ${attributes}
+            ${{
+                onconnect: (element: HTMLElement) => {
+                    board = element;
+                },
+                ondisconnect: () => {
+                    cancelAnimationFrame(frame);
+                },
+                onfocusin: (e: FocusEvent) => {
+                    let target = (e.target as Element).closest?.('.kanban-board-card');
+
+                    if (!target) {
+                        return;
+                    }
+
+                    let buttons = board!.querySelectorAll<HTMLElement>('.kanban-board-card');
+
+                    for (let i = 0, n = buttons.length; i < n; i++) {
+                        buttons[i].tabIndex = buttons[i] === target ? 0 : -1;
+                    }
+                },
+                // A card moved between columns is re-inserted and briefly loses focus, so wait a frame
+                // before treating the blur as tabbing or clicking away.
+                onfocusout: () => {
+                    cancelAnimationFrame(frame);
+                    frame = requestAnimationFrame(() => {
+                        if (held && document.activeElement !== button(held.item)) {
+                            drop();
+                        }
+                    });
+                },
+                onkeydown: (e: KeyboardEvent) => {
+                    let target = (e.target as Element).closest?.('.kanban-board-card');
+
+                    if (!target || board!.querySelector('.sortable.--active')) {
+                        return;
+                    }
+
+                    let item = target.parentElement as HTMLElement,
+                        list = item.parentElement!,
+                        all = lists(),
+                        column = all.indexOf(list),
+                        index = Array.prototype.indexOf.call(list.children, item),
+                        isHeld = held?.item === item;
+
+                    function across(step: number) {
+                        for (let i = column + step; i >= 0 && i < all.length; i += step) {
+                            let children = all[i].children;
+
+                            if (children.length) {
+                                focus(children[Math.min(index, children.length - 1)]);
+                                return;
+                            }
+                        }
+                    }
+
+                    function move(to: number, position: number) {
+                        if (to < 0 || to >= all.length) {
+                            return;
+                        }
+
+                        let others = Array.from(all[to].children).filter((child) => child !== item),
+                            slot = Math.min(Math.max(position, 0), others.length);
+
+                        if (to === column && slot === index) {
+                            return;
+                        }
+
+                        flip(board!, () => all[to].insertBefore(item, others[slot] ?? null));
+                        focus(item);
+                        sync();
+                        state.announcement = `Moved to ${where(item)}.`;
+                    }
+
+                    function toggle() {
+                        if (isHeld) {
+                            drop();
+                            return;
+                        }
+
+                        drop();
+                        held = { before: all.map((list) => Array.from(list.children)), item };
+                        item.classList.add('--held');
+                        target!.setAttribute('aria-pressed', 'true');
+                        state.announcement = `Picked up ${title(item)}, ${where(item)}.`;
+                    }
+
+                    function within(step: number) {
+                        let sibling = list.children[index + step];
+
+                        if (sibling) {
+                            focus(sibling);
+                        }
+                    }
+
+                    let keys: Record<string, VoidFunction | undefined> = {
+                            ' ': toggle,
+                            ArrowDown: () => isHeld ? move(column, index + 1) : within(1),
+                            ArrowLeft: () => isHeld ? move(column - 1, index) : across(-1),
+                            ArrowRight: () => isHeld ? move(column + 1, index) : across(1),
+                            ArrowUp: () => isHeld ? move(column, index - 1) : within(-1),
+                            Enter: toggle,
+                            Escape: isHeld ? cancel : undefined
+                        },
+                        run = keys[e.key];
+
+                    if (!run) {
+                        return;
+                    }
+
+                    e.preventDefault();
+                    run();
+                },
+                onpointerdown: () => {
+                    drop();
+                }
+            }}
+        >
+            ${columns.map((column, i) => html`
+                <div class='kanban-board-column'>
+                    <div class='kanban-board-header' aria-hidden='true'>
+                        <span>${column.title}</span>
+                        ${counter({
+                            class: 'kanban-board-count counter--ticker',
+                            currency: 'IGNORE',
+                            decimals: 0,
+                            delay: 0,
+                            state: counts[i],
+                            value: column.cards.length
+                        })}
+                    </div>
+
+                    <ul
+                        class='kanban-board-list'
+                        aria-label='${column.title}'
+                        ${sortable({
+                            group,
+                            onsort: (item) => {
+                                sync();
+                                state.announcement = `Dropped ${title(item)} to ${where(item)}.`;
+                            }
+                        })}
+                    >
+                        ${column.cards.map((card) => html`
+                            <li class='kanban-board-item' data-id='${card.id}'>
+                                <button
+                                    class='kanban-board-card'
+                                    aria-describedby='${group}-instructions'
+                                    tabindex='${card.id === first ? 0 : -1}'
+                                    type='button'
+                                >
+                                    <span class='kanban-board-card-title'>${card.title}</span>
+                                </button>
+                            </li>
+                        `)}
+                    </ul>
+                </div>
+            `)}
+
+            <p class='kanban-board-sr' id='${group}-instructions'>
+                Press Space to pick up. While holding, use the arrow keys to move within or between columns,
+                Space to drop, or Escape to cancel.
+            </p>
+            <p class='kanban-board-sr' aria-atomic='true' aria-live='assertive'>${() => state.announcement}</p>
+        </div>
+    `;
+};
+
+
+export type { Card, Column };

package/src/components/kanban-board/scss/index.scss

@@ -0,0 +1,126 @@
+@use 'variables';
+
+.kanban-board {
+    display: grid;
+    gap: var(--gap);
+    grid-auto-columns: minmax(0, 1fr);
+    grid-auto-flow: column;
+    height: var(--height);
+    max-width: 100%;
+    position: relative;
+    width: var(--width);
+
+    &-card {
+        align-items: center;
+        background: var(--card-background);
+        border: 0;
+        border-radius: var(--card-border-radius);
+        box-shadow: var(--card-box-shadow);
+        color: var(--card-color);
+        cursor: grab;
+        display: flex;
+        font: inherit;
+        font-size: var(--card-font-size);
+        height: 100%;
+        outline: none;
+        padding: 0 var(--card-padding-horizontal);
+        position: relative;
+        text-align: start;
+        touch-action: none;
+        transition:
+            box-shadow var(--transition-duration) var(--transition-timing-function),
+            scale 150ms ease-out;
+        user-select: none;
+        width: 100%;
+
+        &:active {
+            scale: var(--press-scale);
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--focus-ring);
+            outline-offset: 1px;
+        }
+
+        &-title {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+
+    &-column {
+        background: var(--column-background);
+        border-radius: calc(var(--card-border-radius) + var(--column-padding));
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+        padding: var(--column-padding);
+    }
+
+    &-count {
+        font-size: var(--count-font-size);
+        font-variant-numeric: tabular-nums;
+    }
+
+    &-header {
+        align-items: center;
+        color: var(--header-color);
+        display: flex;
+        flex-shrink: 0;
+        font-size: var(--header-font-size);
+        font-weight: var(--font-weight-500);
+        height: var(--header-height);
+        justify-content: space-between;
+        padding: 0 8px;
+    }
+
+    &-item {
+        border-radius: var(--card-border-radius);
+        flex-shrink: 0;
+        height: var(--card-height);
+        list-style: none;
+
+        // Pressing a card that is already lifted shouldn't shrink it under the lift.
+        &.--dragging .kanban-board-card,
+        &.--held .kanban-board-card {
+            scale: 1;
+        }
+
+        &.--held {
+            outline: 1px dashed oklch(0 0 0 / 0.2);
+            outline-offset: -1px;
+
+            .kanban-board-card {
+                box-shadow: var(--card-lifted-box-shadow);
+                scale: var(--lift-scale);
+                z-index: 1;
+            }
+        }
+    }
+
+    &-list {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        gap: var(--column-gap);
+        margin: 0;
+        min-height: 0;
+        padding: 0;
+    }
+
+    &-sr {
+        clip-path: inset(50%);
+        height: 1px;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &-card {
+            transition: none;
+        }
+    }
+}

package/src/components/kanban-board/scss/variables.scss

@@ -0,0 +1,39 @@
+.kanban-board {
+    --card-background: var(--color-white-300);
+    --card-border-radius: 10px;
+    --card-box-shadow:
+        0 0 0 1px oklch(0 0 0 / 0.06),
+        0 1px 2px oklch(0 0 0 / 0.06),
+        0 6px 16px -6px oklch(0 0 0 / 0.12);
+    --card-color: var(--color-text-500);
+    --card-font-size: var(--font-size-300);
+    --card-height: 44px;
+    --card-lifted-box-shadow:
+        0 0 0 1px oklch(0 0 0 / 0.06),
+        0 2px 4px oklch(0 0 0 / 0.06),
+        0 12px 24px -6px oklch(0 0 0 / 0.2);
+    --card-padding-horizontal: 12px;
+    --column-background: var(--color-grey-400);
+    --column-gap: 8px;
+    --column-padding: 8px;
+    --count-font-size: var(--font-size-200);
+    --focus-ring: oklch(0.2 0 0 / 0.38);
+    --gap: 12px;
+    --header-color: var(--color-text-300);
+    --header-font-size: var(--font-size-300);
+    --header-height: 36px;
+    --height: 380px;
+    --lift-scale: 1.03;
+    --press-scale: 0.96;
+    --width: 600px;
+
+    .sortable {
+        --drag-box-shadow: var(--card-lifted-box-shadow);
+        --drag-scale: var(--lift-scale);
+        --placeholder-background: oklch(0 0 0 / 0.03);
+        --placeholder-border-color: oklch(0 0 0 / 0.2);
+        --placeholder-border-width: 1px;
+        --swing-angle: 2deg;
+        --swing-strength: 0.002;
+    }
+}