@esportsplus/ui 0.54.0 → 0.56.2

package/build/components/inline-edit/index.js

@@ -0,0 +1,108 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import input from '../input/index.js';
+import textarea from '../textarea/index.js';
+import './scss/index.scss';
+const template_13ikqx12 = template_u1.template(`<div class='inline-edit'><button class='inline-edit-display' type='button'><span class='inline-edit-label'>Edit <!--$-->: </span></button><!--$--><span aria-hidden='true' class='inline-edit-icon'><svg class='inline-edit-icon-pencil' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 16 16'><path d='M9.75 3.75 12.25 6.25M3.25 12.75l.6-2.6 6.9-6.9a1.25 1.25 0 0 1 1.77 0l.73.73a1.25 1.25 0 0 1 0 1.77l-6.9 6.9Z' /></svg><svg class='inline-edit-icon-check' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 16 16'><path d='m3.5 8.5 3 3 6-7' />`);
+class ReactiveObject_13ikqx10 extends reactivity_u0.ReactiveObject {
+    #draft = this[reactivity_u0.SIGNAL]('');
+    constructor() {
+        super(null);
+    }
+    get draft() {
+        return reactivity_u0.read(this.#draft);
+    }
+    set draft(_v0) {
+        reactivity_u0.write(this.#draft, _v0);
+    }
+}
+const INLINE_EDIT_DISPLAY = Symbol.for('@esportsplus/ui/inline-edit.display');
+const INLINE_EDIT_FIELD = Symbol.for('@esportsplus/ui/inline-edit.field');
+const SAVED_FOR = 1600;
+function template({ label, multiline = false, onsave, placeholder = '', value = '', state = reactivity_u0.reactive({ editing: false, saved: false, value }), ...attributes }) {
+    let display, draft = '', local = new ReactiveObject_13ikqx10(), parts = { ...this?.attributes?.[INLINE_EDIT_FIELD], ...attributes[INLINE_EDIT_FIELD] }, timer;
+    function field() {
+        let own = {
+            'aria-label': label,
+            class: 'inline-edit-field',
+            onblur: () => finish(true, false),
+            onconnect: (element) => {
+                element.focus();
+                element.setSelectionRange(element.value.length, element.value.length);
+            },
+            oninput: (e) => {
+                local.draft = e.currentTarget.value;
+            },
+            onkeydown: (e) => {
+                if (e.key === 'Enter' && !(multiline && e.shiftKey)) {
+                    e.preventDefault();
+                    finish(true, true);
+                }
+                else if (e.key === 'Escape') {
+                    e.preventDefault();
+                    finish(false, true);
+                }
+            },
+            placeholder,
+            value: draft
+        };
+        if (multiline) {
+            return textarea.bind({ attributes: parts })({ ...own, rows: 1 });
+        }
+        return input.call({ attributes: parts }, own);
+    }
+    function finish(commit, keyboard) {
+        if (!state.editing) {
+            return;
+        }
+        state.editing = false;
+        if (keyboard) {
+            requestAnimationFrame(() => requestAnimationFrame(() => display?.focus()));
+        }
+        let next = multiline ? local.draft.trim() : local.draft.replace(/\s+/g, ' ').trim();
+        if (!commit || next === state.value) {
+            return;
+        }
+        state.value = next;
+        state.saved = true;
+        onsave?.(next);
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+            state.saved = false;
+        }, SAVED_FOR);
+    }
+    return (() => {
+        let root_13ikqx11 = template_13ikqx12(), element_13ikqx13 = root_13ikqx11.firstChild, element_13ikqx14 = element_13ikqx13.firstElementChild, element_13ikqx15 = element_13ikqx14.firstElementChild.firstChild.nextSibling, element_13ikqx16 = element_13ikqx13.firstChild.nextSibling;
+        template_u1.setProperties(element_13ikqx13, this?.attributes);
+        template_u1.setProperties(element_13ikqx13, attributes);
+        template_u1.setList(element_13ikqx13, 'class', [
+            multiline && 'inline-edit--multiline',
+            () => state.editing && '--active',
+            () => state.saved && '--saved',
+            () => state.value.trim() === '' && '--empty'
+        ]);
+        template_u1.ondisconnect(element_13ikqx13, () => {
+            clearTimeout(timer);
+        });
+        template_u1.setProperties(element_13ikqx14, this?.attributes?.[INLINE_EDIT_DISPLAY]);
+        template_u1.setProperties(element_13ikqx14, attributes[INLINE_EDIT_DISPLAY]);
+        template_u1.delegate(element_13ikqx14, 'click', () => {
+            draft = state.value;
+            local.draft = draft;
+            state.editing = true;
+        });
+        template_u1.onrender(element_13ikqx14, (element) => {
+            display = element;
+        });
+        template_u1.slot(element_13ikqx15, label);
+        new template_u1.EffectSlot(element_13ikqx14, () => {
+            if (state.editing) {
+                return `${local.draft} `;
+            }
+            return state.value.trim() === '' ? placeholder : state.value;
+        }, 2);
+        new template_u1.EffectSlot(element_13ikqx16, () => state.editing ? field() : '');
+        return root_13ikqx11;
+    })();
+}
+export default Object.assign(template, { display: INLINE_EDIT_DISPLAY, field: INLINE_EDIT_FIELD });

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

@@ -0,0 +1,2 @@
+@layer components {.inline-edit{--background-hover:oklch(from var(--color-text-500) l c h / .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 / .25);--icon-color:var(--color-text-300);--icon-color-saved:var(--color-text-500);--icon-size:16px;--icon-swap-duration:.3s;--icon-swap-timing-function:linear(0, .035, .118, .216, .319, .424, .515, .6, .669, .728, .781, .822, .856, .885, .908, .927, .942, .954, .964, .971, .977, .982, .986, .989, .991, .993, .995, .996, .997, .997, 1);--outline-color:var(--color-text-500);--placeholder-color:var(--color-text-300);color:var(--color);margin-inline:calc(var(--box-padding-start) * -1);display:grid;position:relative}.inline-edit-display,.inline-edit>.inline-edit-field{border-radius:var(--box-border-radius);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;grid-area:1/1;width:100%;overflow:hidden}.inline-edit--multiline>.inline-edit-display,.inline-edit--multiline>.inline-edit-field{overflow-wrap:break-word;text-overflow:clip;white-space:pre-wrap}.inline-edit-display{color:inherit;cursor:text;font:inherit;letter-spacing:inherit;line-height:inherit;transition:background-color var(--transition-duration) var(--transition-timing-function);background:0 0;border:0;outline:none;display:block}.inline-edit-display:hover{background:var(--background-hover)}.inline-edit-display:focus-visible{outline:var(--border-width-500) solid var(--outline-color)}.inline-edit.--active>.inline-edit-display{visibility:hidden}.inline-edit.--empty:not(.--active)>.inline-edit-display{color:var(--placeholder-color)}.inline-edit>.inline-edit-field{--background-default:var(--field-background);--color-default:currentColor;box-shadow:var(--field-ring);font-size:inherit;font-weight:inherit;height:100%;letter-spacing:inherit;line-height:inherit;resize:none;outline:none;min-height:0;transition:none;display:block}.inline-edit>.inline-edit-field::placeholder{color:var(--placeholder-color)}.inline-edit-icon{color:var(--icon-color);pointer-events:none;place-items:center;width:24px;height:24px;display:grid;position:absolute;inset-block-start:4px;inset-inline-end:6px}.inline-edit-icon svg{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);grid-area:1/1}.inline-edit-icon-check{color:var(--icon-color-saved);filter:blur(4px);opacity:0;scale:.25}.inline-edit-icon-pencil{opacity:0}.inline-edit:hover .inline-edit-icon-pencil{opacity:1}.inline-edit:has(:focus-visible) .inline-edit-icon-pencil{opacity:1}.inline-edit.--saved .inline-edit-icon-check{filter:blur();opacity:1;scale:1}.inline-edit.--saved .inline-edit-icon-pencil{filter:blur(4px);opacity:0;scale:.25}.inline-edit.--active>.inline-edit-icon{visibility:hidden}.inline-edit-label{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){.inline-edit-icon svg{filter:none!important;scale:1!important}}}
+/*$vite$:1*/

package/build/components/input/index.d.ts

@@ -1,10 +1,16 @@
 import { type Attributes } from '@esportsplus/template';
 import './scss/index.scss';
+type A = Attributes & {
+    onfocusin?: never;
+    onfocusout?: never;
+    onrender?: never;
+};
 export default function (this: {
-    attributes?: Attributes;
-} | void, attributes: Attributes & {
+    attributes?: A;
+} | void, { state, ...attributes }?: A & {
     state?: {
         active: boolean;
         error: string;
     };
 }): DocumentFragment | Text;
+export {};

package/build/components/input/index.js

@@ -1,8 +1,8 @@
-import * as template_u0 from '@esportsplus/template';
+import * as template_u1 from '@esportsplus/template';
 import * as reactivity_u0 from '@esportsplus/reactivity';
 import form from '../form/index.js';
 import './scss/index.scss';
-const template_u1b = template_u0.template(`<input class='input' />`);
+const template_0j57g2t2 = template_u1.template(`<input class='input' />`);
 class ReactiveObject_0j57g2t0 extends reactivity_u0.ReactiveObject {
     #active = this[reactivity_u0.SIGNAL](false);
     #error = this[reactivity_u0.SIGNAL]('');
@@ -22,22 +22,21 @@ class ReactiveObject_0j57g2t0 extends reactivity_u0.ReactiveObject {
         reactivity_u0.write(this.#error, _v1);
     }
 }
-export default function (attributes) {
-    let state = attributes.state || new ReactiveObject_0j57g2t0();
+export default function ({ state = new ReactiveObject_0j57g2t0(), ...attributes } = {}) {
+    attributes.type ??= 'text';
     return (() => {
-        let root_u1a = template_u1b(), element_u1c = root_u1a.firstChild;
-        template_u0.setProperties(element_u1c, this?.attributes);
-        template_u0.setProperties(element_u1c, attributes);
-        template_u0.setList(element_u1c, 'class', () => state.active && '--active');
-        template_u0.on(element_u1c, 'focusin', () => {
+        let root_0j57g2t1 = template_0j57g2t2(), element_0j57g2t3 = root_0j57g2t1.firstChild;
+        template_u1.setProperties(element_0j57g2t3, this?.attributes);
+        template_u1.setProperties(element_0j57g2t3, attributes);
+        template_u1.setList(element_0j57g2t3, 'class', () => state.active && '--active');
+        template_u1.on(element_0j57g2t3, 'focusin', () => {
             state.active = true;
         });
-        template_u0.on(element_u1c, 'focusout', () => {
+        template_u1.on(element_0j57g2t3, 'focusout', () => {
             state.active = false;
         });
-        template_u0.onrender(element_u1c, form.input.onrender(state));
-        template_u0.setProperty(element_u1c, 'type', (attributes.type || 'text'));
-        return root_u1a;
+        template_u1.onrender(element_0j57g2t3, form.input.onrender(state));
+        return root_0j57g2t1;
     })();
 }
 ;

package/build/components/input/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.input{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-default:var(--background);--border-radius:var(--border-radius-400);--border-style:solid;--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--color:var(--color-default);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--font-size:var(--font-size-400);--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400);--size:var(--size-400)}.input:not(.--active):not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover)}.input:not(.--active):not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed)}.input.--active{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--color:var(--color-active)}.input{background:var(--background);border:var(--border-width) var(--border-style) var(--border-color);border-radius:var(--border-radius);color:var(--color);cursor:text;font-size:var(--font-size);min-height:calc(var(--padding-vertical) * 2 + var(--size));min-width:0;padding:max(0px, var(--padding-vertical) - var(--border-width)) max(0px, var(--padding-horizontal) - var(--border-width));text-overflow:ellipsis;transition:background var(--transition-duration) var(--transition-timing-function), border-color var(--transition-duration) var(--transition-timing-function), box-shadow var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function), transform var(--transition-duration) var(--transition-timing-function);white-space:nowrap;flex-wrap:wrap;flex:auto;align-items:center;width:100%;display:flex;position:relative;overflow:hidden}.input:invalid,.input:required{box-shadow:none}.input[type=number]{appearance:textfield}}
+@layer components {.input{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-default:var(--background);--border-radius:var(--border-radius-400);--border-style:solid;--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--color:var(--color-default);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--font-size:var(--font-size-400);--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400);--size:var(--size-400)}.input:not(.--active):not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover)}.input:not(.--active):not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed)}.input.--active{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--color:var(--color-active)}.input{background:var(--background);border:var(--border-width) var(--border-style) var(--border-color);border-radius:var(--border-radius);color:var(--color);cursor:text;font-size:var(--font-size);min-height:calc(var(--padding-vertical) * 2 + var(--size));min-width:0;padding-block:max(0px, var(--padding-vertical) - var(--border-width));padding-inline:max(0px, var(--padding-horizontal) - var(--border-width));text-overflow:ellipsis;transition:background var(--transition-duration) var(--transition-timing-function), border-color var(--transition-duration) var(--transition-timing-function), box-shadow var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function), transform var(--transition-duration) var(--transition-timing-function);white-space:nowrap;flex-wrap:wrap;flex:auto;align-items:center;width:100%;display:flex;position:relative;overflow:hidden}.input:invalid,.input:required{box-shadow:none}.input[type=number]{appearance:textfield}}
 /*$vite$:1*/

package/build/components/kanban-board/index.d.ts

@@ -0,0 +1,23 @@
+import { type Attributes } from '@esportsplus/template';
+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;
+};
+export default _default;
+declare function _default({ columns, label, onsort, ...attributes }: A): DocumentFragment | Text;
+export type { Card, Column };

package/build/components/kanban-board/index.js

@@ -0,0 +1,235 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import * as template_u1 from '@esportsplus/template';
+import counter from '../counter/index.js';
+import sortable from '../sortable/index.js';
+import './scss/index.scss';
+const template_1rg575x3 = template_u1.template(`<div class='kanban-board' role='group'><!--$--><p class='kanban-board-sr'> 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'>`);
+const template_1rg575x9 = template_u1.template(`<div class='kanban-board-column'><div class='kanban-board-header' aria-hidden='true'><span></span></div><ul class='kanban-board-list'>`);
+const template_1rg575xe = template_u1.template(`<li class='kanban-board-item'><button class='kanban-board-card' type='button'><span class='kanban-board-card-title'>`);
+class ReactiveObject_1rg575x0 extends reactivity_u0.ReactiveObject {
+    #value;
+    constructor(_p0) {
+        super(null);
+        this.#value = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get value() {
+        return reactivity_u0.read(this.#value);
+    }
+    set value(_v0) {
+        reactivity_u0.write(this.#value, _v0);
+    }
+}
+class ReactiveObject_1rg575x1 extends reactivity_u0.ReactiveObject {
+    #announcement = this[reactivity_u0.SIGNAL]('');
+    constructor() {
+        super(null);
+    }
+    get announcement() {
+        return reactivity_u0.read(this.#announcement);
+    }
+    set announcement(_v0) {
+        reactivity_u0.write(this.#announcement, _v0);
+    }
+}
+const FLIP = { duration: 300, easing: 'cubic-bezier(0.2, 0, 0, 1)' };
+function button(item) {
+    return item.querySelector('.kanban-board-card');
+}
+function flip(board, mutate) {
+    let first = new Map(), items = board.querySelectorAll('.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 }) => {
+    let board, cards = new Map(columns.flatMap((column) => column.cards.map((card) => [card.id, card]))), counts = columns.map((column) => new ReactiveObject_1rg575x0(column.cards.length)), first = columns.flatMap((column) => column.cards)[0]?.id, frame = 0, group = `kanban-board-${Math.random().toString(36).slice(2)}`, held = null, state = new ReactiveObject_1rg575x1();
+    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) {
+        let target = button(item);
+        if (document.activeElement !== target) {
+            target.focus({ preventScroll: true });
+        }
+    }
+    function lists() {
+        return Array.from(board.querySelectorAll('.kanban-board-list'));
+    }
+    function release(item) {
+        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.dataset.id))
+        }));
+        for (let i = 0, n = next.length; i < n; i++) {
+            counts[i].value = next[i].cards.length;
+        }
+        onsort?.(next);
+    }
+    function title(item) {
+        return cards.get(item.dataset.id)?.title ?? '';
+    }
+    function where(item) {
+        let list = item.parentElement;
+        return `${columns[lists().indexOf(list)].title}, position ${Array.prototype.indexOf.call(list.children, item) + 1} of ${list.children.length}`;
+    }
+    return (() => {
+        let root_1rg575x2 = template_1rg575x3(), element_1rg575x4 = root_1rg575x2.firstChild, element_1rg575x5 = element_1rg575x4.firstChild, element_1rg575x6 = element_1rg575x4.firstElementChild, element_1rg575x7 = element_1rg575x6.nextElementSibling;
+        template_u1.setProperty(element_1rg575x4, 'aria-label', label);
+        template_u1.setProperties(element_1rg575x4, attributes);
+        template_u1.onconnect(element_1rg575x4, (element) => {
+            board = element;
+        });
+        template_u1.ondisconnect(element_1rg575x4, () => {
+            cancelAnimationFrame(frame);
+        });
+        template_u1.on(element_1rg575x4, 'focusin', (e) => {
+            let target = e.target.closest?.('.kanban-board-card');
+            if (!target) {
+                return;
+            }
+            let buttons = board.querySelectorAll('.kanban-board-card');
+            for (let i = 0, n = buttons.length; i < n; i++) {
+                buttons[i].tabIndex = buttons[i] === target ? 0 : -1;
+            }
+        });
+        template_u1.on(element_1rg575x4, 'focusout', () => {
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(() => {
+                if (held && document.activeElement !== button(held.item)) {
+                    drop();
+                }
+            });
+        });
+        template_u1.delegate(element_1rg575x4, 'keydown', (e) => {
+            let target = e.target.closest?.('.kanban-board-card');
+            if (!target || board.querySelector('.sortable.--active')) {
+                return;
+            }
+            let item = target.parentElement, list = item.parentElement, all = lists(), column = all.indexOf(list), index = Array.prototype.indexOf.call(list.children, item), isHeld = held?.item === item;
+            function across(step) {
+                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, position) {
+                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) {
+                let sibling = list.children[index + step];
+                if (sibling) {
+                    focus(sibling);
+                }
+            }
+            let keys = {
+                ' ': 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();
+        });
+        template_u1.delegate(element_1rg575x4, 'pointerdown', () => {
+            drop();
+        });
+        template_u1.slot(element_1rg575x5, columns.map((column, i) => {
+            let root_1rg575x8 = template_1rg575x9(), element_1rg575xa = root_1rg575x8.firstChild.firstElementChild.firstElementChild, element_1rg575xb = root_1rg575x8.firstChild.firstElementChild, element_1rg575xc = element_1rg575xb.nextElementSibling;
+            template_u1.slot(element_1rg575xa, column.title, 1);
+            template_u1.slot(element_1rg575xb, counter({
+                class: 'kanban-board-count counter--ticker',
+                currency: 'IGNORE',
+                decimals: 0,
+                delay: 0,
+                state: counts[i],
+                value: column.cards.length
+            }), 2);
+            template_u1.setProperty(element_1rg575xc, 'aria-label', column.title);
+            template_u1.setProperties(element_1rg575xc, sortable({
+                group,
+                onsort: (item) => {
+                    sync();
+                    state.announcement = `Dropped ${title(item)} to ${where(item)}.`;
+                }
+            }));
+            template_u1.slot(element_1rg575xc, column.cards.map((card) => {
+                let root_1rg575xd = template_1rg575xe(), element_1rg575xf = root_1rg575xd.firstChild, element_1rg575xg = element_1rg575xf.firstElementChild, element_1rg575xh = element_1rg575xg.firstElementChild;
+                template_u1.setProperty(element_1rg575xf, 'data-id', card.id);
+                template_u1.setProperty(element_1rg575xg, 'aria-describedby', template_u1.interpolate([(group), "-instructions"]));
+                template_u1.setProperty(element_1rg575xg, 'tabindex', card.id === first ? 0 : -1);
+                template_u1.slot(element_1rg575xh, card.title, 1);
+                return root_1rg575xd;
+            }), 1);
+            return root_1rg575x8;
+        }));
+        template_u1.setProperty(element_1rg575x6, 'id', template_u1.interpolate([(group), "-instructions"]));
+        new template_u1.EffectSlot(element_1rg575x7, () => state.announcement, 1);
+        return root_1rg575x2;
+    })();
+};

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

@@ -0,0 +1,2 @@
+@layer components {.kanban-board{--card-background:var(--color-white-300);--card-border-radius:10px;--card-box-shadow:0 0 0 1px oklch(0% 0 0/.06), 0 1px 2px oklch(0% 0 0/.06), 0 6px 16px -6px oklch(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/.06), 0 2px 4px oklch(0% 0 0/.06), 0 12px 24px -6px oklch(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(20% 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:.96;--width:600px}.kanban-board .sortable{--drag-box-shadow:var(--card-lifted-box-shadow);--drag-scale:var(--lift-scale);--placeholder-background:oklch(0% 0 0/.03);--placeholder-border-color:oklch(0% 0 0/.2);--placeholder-border-width:1px;--swing-angle:2deg;--swing-strength:.002}.kanban-board{gap:var(--gap);height:var(--height);max-width:100%;width:var(--width);grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;display:grid;position:relative}.kanban-board-card{background:var(--card-background);border-radius:var(--card-border-radius);box-shadow:var(--card-box-shadow);color:var(--card-color);cursor:grab;font:inherit;font-size:var(--card-font-size);height:100%;padding:0 var(--card-padding-horizontal);text-align:start;touch-action:none;transition:box-shadow var(--transition-duration) var(--transition-timing-function), scale .15s ease-out;-webkit-user-select:none;user-select:none;border:0;outline:none;align-items:center;width:100%;display:flex;position:relative}.kanban-board-card:active{scale:var(--press-scale)}.kanban-board-card:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}.kanban-board-card-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kanban-board-column{background:var(--column-background);border-radius:calc(var(--card-border-radius) + var(--column-padding));min-width:0;padding:var(--column-padding);flex-direction:column;display:flex}.kanban-board-count{font-size:var(--count-font-size);font-variant-numeric:tabular-nums}.kanban-board-header{color:var(--header-color);font-size:var(--header-font-size);font-weight:var(--font-weight-500);height:var(--header-height);flex-shrink:0;justify-content:space-between;align-items:center;padding:0 8px;display:flex}.kanban-board-item{border-radius:var(--card-border-radius);height:var(--card-height);flex-shrink:0;list-style:none}.kanban-board-item.--dragging .kanban-board-card,.kanban-board-item.--held .kanban-board-card{scale:1}.kanban-board-item.--held{outline-offset:-1px;outline:1px dashed oklch(0% 0 0/.2)}.kanban-board-item.--held .kanban-board-card{box-shadow:var(--card-lifted-box-shadow);scale:var(--lift-scale);z-index:1}.kanban-board-list{gap:var(--column-gap);flex-direction:column;flex:1;min-height:0;margin:0;padding:0;display:flex}.kanban-board-sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){.kanban-board-card{transition:none}}}
+/*$vite$:1*/

package/build/components/lightbox/index.d.ts

@@ -0,0 +1,32 @@
+import * as template_u1 from '@esportsplus/template';
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes<HTMLDialogElement> & {
+    alt: Text;
+    caption?: Text;
+    height?: number;
+    maxScale?: number;
+    oncancel?: never;
+    onclose?: never;
+    onconnect?: never;
+    ondisconnect?: never;
+    onkeydown?: never;
+    origin?: () => HTMLElement | null | undefined;
+    src: Text;
+    state?: {
+        active: boolean;
+    };
+    width?: number;
+};
+type Text = string | (() => string);
+declare const _default: {
+    (): template_u1.Renderable<any>;
+    <T extends A>(attributes: T): template_u1.Renderable<any>;
+    <T extends template_u1.Renderable<any>>(content: T): template_u1.Renderable<any>;
+    (attributes: A, content?: template_u1.Renderable<any>): template_u1.Renderable<any>;
+    bind(context: {
+        attributes?: Partial<A> | undefined;
+        content?: template_u1.Renderable<any>;
+    }): any;
+};
+export default _default;