@esportsplus/ui 0.55.0 → 0.56.2

package/build/components/shortcut-recorder/index.js

@@ -0,0 +1,230 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect, onCleanup, untrack } from '@esportsplus/reactivity';
+import './scss/index.scss';
+const template_1mccfik2 = template_u1.template(`<div class='shortcut-recorder'><div class='shortcut-recorder-label'><!--$--><div class='shortcut-recorder-status' role='status'></div></div><button class='shortcut-recorder-field' type='button'><!--$-->`);
+const template_1mccfik9 = template_u1.template(`<span class='shortcut-recorder-error'>`);
+const template_1mccfikc = template_u1.template(`<kbd class='shortcut-recorder-key '>`);
+const template_1mccfikf = template_u1.template(`<span class='shortcut-recorder-placeholder '>`);
+const template_1mccfikh = template_u1.template(`<span class='shortcut-recorder-dot' aria-hidden='true'></span>Press keys`);
+class ReactiveObject_1mccfik0 extends reactivity_u0.ReactiveObject {
+    #error = this[reactivity_u0.SIGNAL]('');
+    #recording = this[reactivity_u0.SIGNAL](false);
+    #shake = this[reactivity_u0.SIGNAL](0);
+    constructor() {
+        super(null);
+    }
+    get error() {
+        return reactivity_u0.read(this.#error);
+    }
+    set error(_v0) {
+        reactivity_u0.write(this.#error, _v0);
+    }
+    get recording() {
+        return reactivity_u0.read(this.#recording);
+    }
+    set recording(_v1) {
+        reactivity_u0.write(this.#recording, _v1);
+    }
+    get shake() {
+        return reactivity_u0.read(this.#shake);
+    }
+    set shake(_v2) {
+        reactivity_u0.write(this.#shake, _v2);
+    }
+}
+const ARROWS = {
+    ArrowDown: '↓',
+    ArrowLeft: '←',
+    ArrowRight: '→',
+    ArrowUp: '↑'
+};
+const ERROR_DURATION = 2200;
+const FUNCTION_KEY = /^F\d{1,2}$/;
+const MODIFIER_KEYS = new Set(['Alt', 'Control', 'Meta', 'OS', 'Shift']);
+const SEPARATOR = /\+(?=.)/;
+function glyph(token, mac) {
+    if (token === 'Alt') {
+        return mac ? '⌥' : 'Alt';
+    }
+    if (token === 'Ctrl') {
+        return '⌃';
+    }
+    if (token === 'Mod') {
+        return mac ? '⌘' : 'Ctrl';
+    }
+    if (token === 'Shift') {
+        return mac ? '⇧' : 'Shift';
+    }
+    return token;
+}
+function keyName(e) {
+    if (e.code.startsWith('Key')) {
+        return e.code.slice(3);
+    }
+    if (e.code.startsWith('Digit')) {
+        return e.code.slice(5);
+    }
+    if (e.key in ARROWS) {
+        return ARROWS[e.key];
+    }
+    if (e.key === ' ') {
+        return 'Space';
+    }
+    if (e.key === 'Enter') {
+        return '↵';
+    }
+    if (e.key.length === 1) {
+        return e.key.toUpperCase();
+    }
+    return e.key;
+}
+function modifiers(e, mac) {
+    let tokens = mac
+        ? [e.ctrlKey && 'Ctrl', e.altKey && 'Alt', e.shiftKey && 'Shift', e.metaKey && 'Mod']
+        : [e.ctrlKey && 'Mod', e.altKey && 'Alt', e.shiftKey && 'Shift'];
+    return tokens.filter((token) => !!token);
+}
+function parse(value) {
+    return value ? value.split(SEPARATOR) : [];
+}
+export default ({ label, taken, value = '', state = reactivity_u0.reactive({ value }), ...attributes }) => {
+    let connected = false, field, keys = new reactivity_u0.ReactiveArray(), listeners, mac = /Mac|iPhone|iPad/.test(navigator.platform), status = new ReactiveObject_1mccfik0(), sync = effect(() => {
+        let tokens = status.recording ? [] : parse(state.value);
+        untrack(() => show(tokens, connected ? 'settle' : ''));
+    }), timer;
+    function fail(text) {
+        clearTimeout(timer);
+        status.error = text;
+        status.shake = status.shake === 1 ? 2 : 1;
+        timer = setTimeout(() => status.error = '', ERROR_DURATION);
+    }
+    function onaway(e) {
+        if (e.type === 'blur' || !field?.contains(e.target)) {
+            stop();
+        }
+    }
+    function onkeydown(e) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        let held = modifiers(e, mac);
+        if (MODIFIER_KEYS.has(e.key)) {
+            show(held, 'enter');
+            return;
+        }
+        if (!held.length && e.key === 'Escape') {
+            stop();
+            return;
+        }
+        if (!held.length && (e.key === 'Backspace' || e.key === 'Delete')) {
+            state.value = '';
+            stop();
+            return;
+        }
+        let key = keyName(e);
+        if (!held.length && !FUNCTION_KEY.test(key)) {
+            fail(`Add ${mac ? '⌘, ⌥ or ⇧' : 'Ctrl, Alt or Shift'}`);
+            return;
+        }
+        let shortcut = [...held, key].join('+'), owner = shortcut === state.value ? null : taken?.(shortcut);
+        if (owner) {
+            fail(`Used by ${owner}`);
+            return;
+        }
+        state.value = shortcut;
+        stop();
+    }
+    function onkeyup(e) {
+        e.stopImmediatePropagation();
+        show(modifiers(e, mac), 'enter');
+    }
+    function show(tokens, animation) {
+        if (animation !== 'enter') {
+            keys.splice(0, keys.$length, ...tokens.map((token, index) => ({ animation, index, token })));
+            return;
+        }
+        for (let i = keys.$length - 1; i >= 0; i--) {
+            if (!tokens.includes(keys[i].token)) {
+                keys.splice(i, 1);
+            }
+        }
+        for (let i = 0, n = tokens.length; i < n; i++) {
+            if (keys[i]?.token !== tokens[i]) {
+                keys.splice(i, 0, { animation, index: i, token: tokens[i] });
+            }
+        }
+        if (keys.$length > tokens.length) {
+            keys.splice(tokens.length);
+        }
+    }
+    function start() {
+        clearTimeout(timer);
+        status.error = '';
+        status.recording = true;
+        listeners?.abort();
+        listeners = new AbortController();
+        let signal = listeners.signal;
+        document.addEventListener('pointerdown', onaway, { signal });
+        window.addEventListener('blur', onaway, { signal });
+        window.addEventListener('keydown', onkeydown, { capture: true, signal });
+        window.addEventListener('keyup', onkeyup, { capture: true, signal });
+    }
+    function stop() {
+        clearTimeout(timer);
+        listeners?.abort();
+        status.error = '';
+        status.recording = false;
+    }
+    onCleanup(() => {
+        clearTimeout(timer);
+        listeners?.abort();
+        sync();
+    });
+    return (() => {
+        let root_1mccfik1 = template_1mccfik2(), element_1mccfik3 = root_1mccfik1.firstChild, element_1mccfik4 = element_1mccfik3.firstElementChild.firstChild, element_1mccfik5 = element_1mccfik3.firstElementChild.firstElementChild, element_1mccfik6 = element_1mccfik3.firstElementChild.nextElementSibling, element_1mccfik7 = element_1mccfik6.firstChild;
+        template_u1.setProperties(element_1mccfik3, attributes);
+        template_u1.slot(element_1mccfik4, label);
+        new template_u1.EffectSlot(element_1mccfik5, () => status.error && (() => {
+            let root_1mccfik8 = template_1mccfik9(), element_1mccfika = root_1mccfik8.firstChild;
+            template_u1.slot(element_1mccfika, status.error, 1);
+            return root_1mccfik8;
+        })(), 1);
+        template_u1.setProperty(element_1mccfik6, 'aria-label', () => `${label} shortcut: ${state.value ? parse(state.value).map((token) => glyph(token, mac)).join(' ') : 'none'}. ${status.recording ? 'Recording, press the new keys, Escape to cancel, Backspace to clear.' : 'Press to change.'}`);
+        template_u1.setProperty(element_1mccfik6, 'aria-pressed', () => status.recording ? 'true' : 'false');
+        template_u1.setProperty(element_1mccfik6, 'data-shake', () => status.shake);
+        template_u1.setList(element_1mccfik6, 'class', () => status.recording && '--active');
+        template_u1.delegate(element_1mccfik6, 'click', function () {
+            field = this;
+            if (status.recording) {
+                stop();
+            }
+            else {
+                start();
+            }
+        });
+        template_u1.onconnect(element_1mccfik6, () => {
+            connected = true;
+        });
+        element_1mccfik7.parentNode.insertBefore(new template_u1.ArraySlot(keys, (key) => {
+            let root_1mccfikb = template_1mccfikc(), element_1mccfikd = root_1mccfikb.firstChild;
+            template_u1.setList(element_1mccfikd, 'class', key.animation && `shortcut-recorder-key--${key.animation}`);
+            template_u1.setList(element_1mccfikd, 'style', template_u1.interpolate(["--index: ", (key.index)]));
+            template_u1.slot(element_1mccfikd, glyph(key.token, mac), 1);
+            return root_1mccfikb;
+        }).fragment, element_1mccfik7);
+        new template_u1.EffectSlot(element_1mccfik6, () => {
+            if (keys.$length) {
+                return '';
+            }
+            return (() => {
+                let root_1mccfike = template_1mccfikf(), element_1mccfikg = root_1mccfike.firstChild;
+                template_u1.setList(element_1mccfikg, 'class', connected && 'shortcut-recorder-placeholder--fade');
+                template_u1.slot(element_1mccfikg, status.recording
+                    ? template_1mccfikh()
+                    : 'None', 1);
+                return root_1mccfike;
+            })();
+        }, 2);
+        return root_1mccfik1;
+    })();
+};

package/build/components/shortcut-recorder/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.shortcut-recorder{--color:var(--color-text-500);--color-error:var(--color-red-400);--color-muted:var(--color-text-300);--font-size:var(--font-size-400);--font-size-small:var(--font-size-300);--gap:var(--size-400);--timing-function-out:cubic-bezier(.23, 1, .32, 1);--timing-function-spring:cubic-bezier(.34, 1.56, .64, 1)}.shortcut-recorder-field{--background:var(--background-default);--background-active:var(--color-white-300);--background-default:var(--color-grey-400);--background-hover:var(--color-white-300);--border-color:var(--border-color-default);--border-color-active:var(--color-text-500);--border-color-default:var(--color-border-400);--border-color-hover:var(--border-color-default);--border-radius:var(--border-radius-500);--border-width:var(--border-width-default);--border-width-active:1.5px;--border-width-default:1px;--focus-color:var(--color-text-500);--focus-offset:2px;--focus-width:2px;--gap:4px;--height:36px;--min-width:96px;--padding-horizontal:6px;--transition-duration:.15s}.shortcut-recorder-field:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover)}.shortcut-recorder-field.--active{--background:var(--background-active);--border-color:var(--border-color-active);--border-width:var(--border-width-active)}.shortcut-recorder-key{--background:var(--color-white-300);--border-color:var(--color-border-400);--border-radius:var(--border-radius-300);--padding-horizontal:6px;--size:24px}.shortcut-recorder{color:var(--color);font-size:var(--font-size);align-items:center;gap:var(--gap);justify-content:space-between;display:flex}.shortcut-recorder-dot{background:var(--color-error);border-radius:50%;width:6px;height:6px;animation:1.1s ease-in-out infinite shortcut-recorder-blink}.shortcut-recorder-error{animation:shortcut-recorder-reveal .18s var(--timing-function-out);color:var(--color-error);font-size:var(--font-size-small);text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.shortcut-recorder-field{background:var(--background);border-radius:var(--border-radius);box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:inherit;cursor:pointer;font:inherit;align-items:center;gap:var(--gap);height:var(--height);min-width:var(--min-width);padding:0 var(--padding-horizontal);transition:background var(--transition-duration) var(--timing-function-out), box-shadow var(--transition-duration) var(--timing-function-out);border:0;outline:none;flex-shrink:0;justify-content:flex-end;display:flex}.shortcut-recorder-field:not(.--active):focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset)}.shortcut-recorder-field[data-shake="1"]{animation:.32s ease-out shortcut-recorder-shake-1}.shortcut-recorder-field[data-shake="2"]{animation:.32s ease-out shortcut-recorder-shake-2}.shortcut-recorder-key{background:var(--background);border-radius:var(--border-radius);box-shadow:inset 0 0 0 1px var(--border-color), 0 1px 0 var(--border-color);font-family:inherit;font-size:var(--font-size-small);font-weight:var(--font-weight-500);height:var(--size);min-width:var(--size);padding:0 var(--padding-horizontal);place-items:center;display:grid}.shortcut-recorder-key--enter{animation:shortcut-recorder-enter .3s var(--timing-function-spring) backwards}.shortcut-recorder-key--settle{animation:shortcut-recorder-settle .3s var(--timing-function-spring) calc(var(--index) * 30ms) backwards}.shortcut-recorder-label{flex:auto;min-width:0;position:relative}.shortcut-recorder-placeholder{color:var(--color-muted);font-size:var(--font-size-small);align-items:center;gap:6px;padding:0 6px;display:flex}.shortcut-recorder-placeholder--fade{animation:shortcut-recorder-fade .18s var(--timing-function-out)}.shortcut-recorder-status{padding-top:2px;position:absolute;inset:100% 0 auto}@media (prefers-reduced-motion:reduce){.shortcut-recorder-dot,.shortcut-recorder-error,.shortcut-recorder-field,.shortcut-recorder-key,.shortcut-recorder-placeholder{transition:none;animation:none}}@keyframes shortcut-recorder-blink{50%{opacity:.25}}@keyframes shortcut-recorder-enter{0%{filter:blur(3px);opacity:0;scale:.8}}@keyframes shortcut-recorder-fade{0%{opacity:0}}@keyframes shortcut-recorder-reveal{0%{filter:blur(3px);opacity:0;translate:0 -2px}}@keyframes shortcut-recorder-settle{0%{opacity:.6;translate:0 -3px;scale:1.08}}@keyframes shortcut-recorder-shake-1{20%{translate:-4px}40%{translate:4px}60%{translate:-3px}80%{translate:3px}}@keyframes shortcut-recorder-shake-2{20%{translate:-4px}40%{translate:4px}60%{translate:-3px}80%{translate:3px}}}
+/*$vite$:1*/

package/build/components/shortcut-sheet/index.d.ts

@@ -0,0 +1,48 @@
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    [SHORTCUT_SHEET_DIALOG]?: Dialog;
+    [SHORTCUT_SHEET_INPUT]?: Field;
+    [SHORTCUT_SHEET_ROW]?: Attributes;
+    [SHORTCUT_SHEET_TRIGGER]?: Attributes;
+    label?: string;
+    shortcuts: Shortcut[];
+    state?: State;
+};
+type Dialog = Attributes<HTMLDialogElement> & {
+    oncancel?: never;
+    onclick?: never;
+    onclose?: never;
+    onconnect?: never;
+    ondisconnect?: never;
+};
+type Field = Attributes & {
+    onfocusin?: never;
+    onfocusout?: never;
+    onrender?: never;
+};
+type Shortcut = {
+    group: string;
+    id: string;
+    keys: string[];
+    label: string;
+};
+type State = {
+    active: boolean;
+    flash: string;
+    query: string;
+};
+declare const SHORTCUT_SHEET_DIALOG: unique symbol;
+declare const SHORTCUT_SHEET_INPUT: unique symbol;
+declare const SHORTCUT_SHEET_ROW: unique symbol;
+declare const SHORTCUT_SHEET_TRIGGER: unique symbol;
+declare const _default: ((this: {
+    attributes?: A;
+} | void, { label, shortcuts, state, ...attributes }: A) => DocumentFragment | Text) & {
+    readonly dialog: typeof SHORTCUT_SHEET_DIALOG;
+    readonly input: typeof SHORTCUT_SHEET_INPUT;
+    readonly row: typeof SHORTCUT_SHEET_ROW;
+    readonly trigger: typeof SHORTCUT_SHEET_TRIGGER;
+};
+export default _default;
+export type { Shortcut, State };

package/build/components/shortcut-sheet/index.js

@@ -0,0 +1,304 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect } from '@esportsplus/reactivity';
+import * as template_u1 from '@esportsplus/template';
+import input from '../input/index.js';
+import modal from '../modal/index.js';
+import './scss/index.scss';
+const template_0xyou7j1 = template_u1.template(`<svg aria-hidden='true' class='shortcut-sheet-search-icon' fill='none' stroke='currentColor' stroke-linecap='round' stroke-width='1.5' viewBox='0 0 16 16'><circle cx='7' cy='7' r='4.25' /><path d='m10.25 10.25 3 3' />`);
+const template_0xyou7j3 = template_u1.template(`<div class='shortcut-sheet'><button aria-haspopup='dialog' aria-keyshortcuts='?' class='shortcut-sheet-trigger' type='button'><!--$--><kbd class='shortcut-sheet-kbd'>?`);
+const template_0xyou7j8 = template_u1.template(`<div class='shortcut-sheet-panel'><div class='shortcut-sheet-header'><h2 class='shortcut-sheet-title'></h2><button aria-label='Close' class='shortcut-sheet-close' type='button'><svg aria-hidden='true' fill='none' stroke='currentColor' stroke-linecap='round' stroke-width='1.5' viewBox='0 0 16 16'><path d='m4.5 4.5 7 7M11.5 4.5l-7 7' /></svg></button></div><div class='shortcut-sheet-search'><!--$--></div><p aria-live='polite' class='shortcut-sheet-sr'></p><div aria-label='Shortcuts' class='shortcut-sheet-list' role='region' tabindex='0'><!--$-->`);
+const template_0xyou7ji = template_u1.template(`<section class='shortcut-sheet-group'><h3 class='shortcut-sheet-group-label'></h3><ul class='shortcut-sheet-rows'>`);
+const template_0xyou7jn = template_u1.template(`<li class='shortcut-sheet-row '><span class='shortcut-sheet-label'></span><span class='shortcut-sheet-sr'></span><span aria-hidden='true' class='shortcut-sheet-keys'>`);
+const template_0xyou7jt = template_u1.template(`<kbd class='shortcut-sheet-kbd'>`);
+const template_0xyou7jw = template_u1.template(`<p class='shortcut-sheet-empty'>No shortcuts match “<!--$-->”`);
+class ReactiveObject_0xyou7j0 extends reactivity_u0.ReactiveObject {
+    #active = this[reactivity_u0.SIGNAL](false);
+    #flash = this[reactivity_u0.SIGNAL]('');
+    #query = this[reactivity_u0.SIGNAL]('');
+    constructor() {
+        super(null);
+    }
+    get active() {
+        return reactivity_u0.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_u0.write(this.#active, _v0);
+    }
+    get flash() {
+        return reactivity_u0.read(this.#flash);
+    }
+    set flash(_v1) {
+        reactivity_u0.write(this.#flash, _v1);
+    }
+    get query() {
+        return reactivity_u0.read(this.#query);
+    }
+    set query(_v2) {
+        reactivity_u0.write(this.#query, _v2);
+    }
+}
+const FLASH = 600;
+const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])';
+const GLYPHS = {
+    Alt: '⌥',
+    Mod: '⌘',
+    Shift: '⇧'
+};
+const SHORTCUT_SHEET_DIALOG = Symbol.for('@esportsplus/ui/shortcut-sheet.dialog');
+const SHORTCUT_SHEET_INPUT = Symbol.for('@esportsplus/ui/shortcut-sheet.input');
+const SHORTCUT_SHEET_ROW = Symbol.for('@esportsplus/ui/shortcut-sheet.row');
+const SHORTCUT_SHEET_TRIGGER = Symbol.for('@esportsplus/ui/shortcut-sheet.trigger');
+const SPOKEN = {
+    '-': 'minus',
+    '=': 'equals',
+    '?': 'question mark',
+    '[': 'left bracket',
+    ']': 'right bracket'
+};
+let uid = 0;
+function editable(target) {
+    return target instanceof HTMLElement && (target.isContentEditable || target.closest('input, textarea, select, [contenteditable]') !== null);
+}
+function filter(shortcuts, query) {
+    let count = 0, groups = [], keys = new Map(), q = query.trim().toLowerCase();
+    for (let i = 0, n = shortcuts.length; i < n; i++) {
+        let shortcut = shortcuts[i];
+        if (q && !shortcut.label.toLowerCase().includes(q) && !shortcut.group.toLowerCase().includes(q)) {
+            continue;
+        }
+        let group = keys.get(shortcut.group);
+        if (!group) {
+            group = { group: shortcut.group, items: [] };
+            groups.push(group);
+            keys.set(shortcut.group, group);
+        }
+        group.items.push(shortcut);
+        count++;
+    }
+    return { count, groups };
+}
+function glyph(key, mac) {
+    if (key === 'Mod') {
+        return mac ? '⌘' : 'Ctrl';
+    }
+    return (mac && GLYPHS[key]) || key;
+}
+function matches(e, keys, mac) {
+    let key = keys[keys.length - 1], mod = mac ? e.metaKey : e.ctrlKey, other = mac ? e.ctrlKey : e.metaKey;
+    if (other || mod !== keys.includes('Mod') || e.altKey !== keys.includes('Alt')) {
+        return false;
+    }
+    if (key === '?') {
+        return e.key === '?';
+    }
+    if (e.shiftKey !== keys.includes('Shift')) {
+        return false;
+    }
+    return e.key.toLowerCase() === key.toLowerCase();
+}
+function restore(e) {
+    e.currentTarget.classList.remove('--leaving');
+}
+function search() {
+    return template_0xyou7j1();
+}
+function spoken(keys, mac) {
+    let words = [];
+    for (let i = 0, n = keys.length; i < n; i++) {
+        let key = keys[i];
+        words.push(key === 'Mod' ? (mac ? 'Command' : 'Control') : (SPOKEN[key] ?? key));
+    }
+    return words.join(' ');
+}
+export default Object.assign(function ({ label = 'Keyboard shortcuts', shortcuts, state = new ReactiveObject_0xyou7j0(), ...attributes }) {
+    let id = `shortcut-sheet-${++uid}`, mac = /Mac|iPhone|iPad/.test(navigator.platform), overflow = '', padding = '', release, results = reactivity_u0.computed(() => filter(shortcuts, state.query)), stop, timer, trigger;
+    function lock() {
+        let body = document.body, gap = innerWidth - document.documentElement.clientWidth;
+        overflow = body.style.overflow;
+        padding = body.style.paddingRight;
+        if (gap > 0) {
+            body.style.paddingRight = `${(parseFloat(getComputedStyle(body).paddingRight) || 0) + gap}px`;
+        }
+        body.style.overflow = 'hidden';
+    }
+    function onkeydown(e) {
+        if (e.defaultPrevented) {
+            return;
+        }
+        let typing = editable(e.target);
+        if (!state.active) {
+            if (e.key !== '?' || e.metaKey || e.ctrlKey || e.altKey || e.repeat || typing || !trigger?.isConnected || trigger.closest('[inert]')) {
+                return;
+            }
+            e.preventDefault();
+            show();
+            return;
+        }
+        if (e.key === '?' && !typing && !e.metaKey && !e.ctrlKey) {
+            e.preventDefault();
+            state.active = false;
+            return;
+        }
+        let hit, groups = reactivity_u0.read(results).groups;
+        for (let i = 0, n = groups.length; i < n && !hit; i++) {
+            hit = groups[i].items.find((s) => matches(e, s.keys, mac));
+        }
+        if (!hit || (typing && !hit.keys.includes('Mod'))) {
+            return;
+        }
+        if (!(typing && /^[zZ]$/.test(e.key))) {
+            e.preventDefault();
+        }
+        e.stopPropagation();
+        clearTimeout(timer);
+        state.flash = hit.id;
+        timer = setTimeout(() => {
+            state.flash = '';
+        }, FLASH);
+        document.getElementById(`${id}-${hit.id}`)?.scrollIntoView({ block: 'nearest' });
+    }
+    function show() {
+        state.flash = '';
+        state.query = '';
+        state.active = true;
+    }
+    function unlock() {
+        document.body.style.overflow = overflow;
+        document.body.style.paddingRight = padding;
+    }
+    return (() => {
+        let root_0xyou7j2 = template_0xyou7j3(), element_0xyou7j4 = root_0xyou7j2.firstChild, element_0xyou7j5 = element_0xyou7j4.firstElementChild, element_0xyou7j6 = element_0xyou7j5.firstChild;
+        template_u1.setProperties(element_0xyou7j4, this?.attributes);
+        template_u1.setProperties(element_0xyou7j4, attributes);
+        template_u1.setProperties(element_0xyou7j5, this?.attributes?.[SHORTCUT_SHEET_TRIGGER]);
+        template_u1.setProperties(element_0xyou7j5, attributes[SHORTCUT_SHEET_TRIGGER]);
+        template_u1.setProperty(element_0xyou7j5, 'aria-expanded', () => state.active ? 'true' : 'false');
+        template_u1.delegate(element_0xyou7j5, 'click', show);
+        template_u1.onconnect(element_0xyou7j5, (element) => {
+            let locked = false;
+            trigger = element;
+            addEventListener('keydown', onkeydown, true);
+            stop = effect(() => {
+                if (state.active === locked) {
+                    return;
+                }
+                locked = state.active;
+                if (locked) {
+                    lock();
+                }
+                else {
+                    clearTimeout(timer);
+                    unlock();
+                }
+            });
+        });
+        template_u1.ondisconnect(element_0xyou7j5, () => {
+            clearTimeout(timer);
+            removeEventListener('keydown', onkeydown, true);
+            stop?.();
+            if (state.active) {
+                unlock();
+            }
+        });
+        template_u1.slot(element_0xyou7j6, label);
+        template_u1.slot(element_0xyou7j4, modal({
+            'aria-labelledby': `${id}-title`,
+            state,
+            ...this?.attributes?.[SHORTCUT_SHEET_DIALOG],
+            ...attributes[SHORTCUT_SHEET_DIALOG],
+            class: ['shortcut-sheet-dialog', this?.attributes?.[SHORTCUT_SHEET_DIALOG]?.class, attributes[SHORTCUT_SHEET_DIALOG]?.class].flat()
+        }, (() => {
+            let root_0xyou7j7 = template_0xyou7j8(), element_0xyou7j9 = root_0xyou7j7.firstChild, element_0xyou7ja = element_0xyou7j9.firstElementChild.firstElementChild, element_0xyou7jb = element_0xyou7ja.nextElementSibling, element_0xyou7jc = element_0xyou7j9.firstElementChild.nextElementSibling.firstChild, element_0xyou7jd = element_0xyou7j9.firstElementChild.nextElementSibling, element_0xyou7je = element_0xyou7jd.nextElementSibling, element_0xyou7jf = element_0xyou7je.nextElementSibling, element_0xyou7jg = element_0xyou7jf.firstChild;
+            template_u1.onconnect(element_0xyou7j9, (element) => {
+                let dialog = element.parentElement, stop = effect(() => {
+                    if (!state.active && dialog.hasAttribute('open')) {
+                        dialog.classList.add('--leaving');
+                    }
+                });
+                dialog.addEventListener('close', restore);
+                release = () => {
+                    dialog.removeEventListener('close', restore);
+                    stop();
+                };
+            });
+            template_u1.ondisconnect(element_0xyou7j9, () => {
+                release?.();
+            });
+            template_u1.delegate(element_0xyou7j9, 'keydown', (e) => {
+                if (e.key !== 'Tab') {
+                    return;
+                }
+                let items = Array.from(e.currentTarget.querySelectorAll(FOCUSABLE))
+                    .filter((element) => element.getClientRects().length > 0);
+                if (!items.length) {
+                    return;
+                }
+                let first = items[0], last = items[items.length - 1];
+                if (e.shiftKey && document.activeElement === first) {
+                    e.preventDefault();
+                    last.focus();
+                }
+                else if (!e.shiftKey && document.activeElement === last) {
+                    e.preventDefault();
+                    first.focus();
+                }
+            });
+            template_u1.setProperty(element_0xyou7ja, 'id', template_u1.interpolate([(id), "-title"]));
+            template_u1.slot(element_0xyou7ja, label, 1);
+            template_u1.delegate(element_0xyou7jb, 'click', () => state.active = false);
+            template_u1.slot(element_0xyou7jc, search());
+            template_u1.slot(element_0xyou7jd, input({
+                'aria-controls': `${id}-list`,
+                'aria-label': 'Search shortcuts',
+                autocomplete: 'off',
+                autofocus: true,
+                class: 'shortcut-sheet-input',
+                oninput: (e) => {
+                    state.query = e.target.value;
+                },
+                placeholder: 'Search shortcuts',
+                spellcheck: false,
+                type: 'search',
+                value: () => state.query,
+                ...this?.attributes?.[SHORTCUT_SHEET_INPUT],
+                ...attributes[SHORTCUT_SHEET_INPUT]
+            }), 2);
+            new template_u1.EffectSlot(element_0xyou7je, () => state.query ? `${reactivity_u0.read(results).count} ${reactivity_u0.read(results).count === 1 ? 'shortcut' : 'shortcuts'}` : '', 1);
+            template_u1.setProperty(element_0xyou7jf, 'id', template_u1.interpolate([(id), "-list"]));
+            new template_u1.EffectSlot(element_0xyou7jg, () => reactivity_u0.read(results).groups.map(({ group, items }, g) => {
+                let root_0xyou7jh = template_0xyou7ji(), element_0xyou7jj = root_0xyou7jh.firstChild, element_0xyou7jk = element_0xyou7jj.firstElementChild, element_0xyou7jl = element_0xyou7jk.nextElementSibling;
+                template_u1.setProperty(element_0xyou7jj, 'aria-labelledby', template_u1.interpolate([(id), "-group-", (g)]));
+                template_u1.setProperty(element_0xyou7jk, 'id', template_u1.interpolate([(id), "-group-", (g)]));
+                template_u1.slot(element_0xyou7jk, group, 1);
+                template_u1.slot(element_0xyou7jl, items.map((shortcut) => {
+                    let root_0xyou7jm = template_0xyou7jn(), element_0xyou7jo = root_0xyou7jm.firstChild, element_0xyou7jp = element_0xyou7jo.firstElementChild, element_0xyou7jq = element_0xyou7jp.nextElementSibling, element_0xyou7jr = element_0xyou7jq.nextElementSibling;
+                    template_u1.setList(element_0xyou7jo, 'class', () => state.flash === shortcut.id && '--active');
+                    template_u1.setProperty(element_0xyou7jo, 'id', template_u1.interpolate([(id), "-", (shortcut.id)]));
+                    template_u1.setProperties(element_0xyou7jo, this?.attributes?.[SHORTCUT_SHEET_ROW]);
+                    template_u1.setProperties(element_0xyou7jo, attributes[SHORTCUT_SHEET_ROW]);
+                    template_u1.slot(element_0xyou7jp, shortcut.label, 1);
+                    template_u1.slot(element_0xyou7jq, spoken(shortcut.keys, mac), 1);
+                    template_u1.slot(element_0xyou7jr, shortcut.keys.map((key) => {
+                        let root_0xyou7js = template_0xyou7jt(), element_0xyou7ju = root_0xyou7js.firstChild;
+                        template_u1.slot(element_0xyou7ju, glyph(key, mac), 1);
+                        return root_0xyou7js;
+                    }), 1);
+                    return root_0xyou7jm;
+                }), 1);
+                return root_0xyou7jh;
+            }));
+            new template_u1.EffectSlot(element_0xyou7jf, () => !reactivity_u0.read(results).count && (() => {
+                let root_0xyou7jv = template_0xyou7jw(), element_0xyou7jx = root_0xyou7jv.firstChild.firstChild.nextSibling;
+                template_u1.slot(element_0xyou7jx, state.query.trim());
+                return root_0xyou7jv;
+            })(), 2);
+            return root_0xyou7j7;
+        })()), 2);
+        return root_0xyou7j2;
+    })();
+}, {
+    dialog: SHORTCUT_SHEET_DIALOG,
+    input: SHORTCUT_SHEET_INPUT,
+    row: SHORTCUT_SHEET_ROW,
+    trigger: SHORTCUT_SHEET_TRIGGER
+});

package/build/components/shortcut-sheet/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.shortcut-sheet{--close-duration:.1s;--color:var(--color-text-500);--color-muted:var(--color-text-300);--dialog-backdrop:color-mix(in srgb, var(--color-text-500) 10%, transparent);--dialog-background:var(--color-white-300);--dialog-height:min(480px, calc(100dvh - (var(--size-400) * 2)));--dialog-radius:var(--size-500);--dialog-scale:.98;--dialog-width:520px;--flash-duration:.5s;--font-size:calc(var(--font-size-400) * .875);--input-font-size:calc(var(--font-size-400) * .9375);--kbd-background:var(--color-white-300);--kbd-border-color:var(--color-border-300);--kbd-duration:.3s;--kbd-font-size:calc(var(--font-size-300) * .95);--kbd-pressed-background:var(--color-text-500);--kbd-pressed-color:var(--color-white-300);--kbd-size:24px;--open-duration:.15s;--raised:0 0 0 1px oklch(from var(--color-black-300) l c h / .06), 0 1px 2px oklch(from var(--color-black-300) l c h / .06), 0 6px 16px -6px oklch(from var(--color-black-300) l c h / .12);--row-background:var(--color-grey-400);--row-height:40px;--surface:var(--color-grey-400);--timing-function:cubic-bezier(.23, 1, .32, 1);--title-font-size:calc(var(--font-size-400) * .9375)}.shortcut-sheet--blur{--dialog-backdrop:color-mix(in srgb, var(--color-black-500) 24%, transparent)}.shortcut-sheet{display:contents}.shortcut-sheet--blur .shortcut-sheet-dialog.modal::backdrop{-webkit-backdrop-filter:blur(var(--size-100));backdrop-filter:blur(var(--size-100))}.shortcut-sheet-close{color:var(--color-muted);cursor:pointer;touch-action:manipulation;height:36px;transition:background-color var(--open-duration) ease-out, color var(--open-duration) ease-out, scale var(--open-duration) ease-out;background:0 0;border:0;border-radius:50%;outline:none;flex-shrink:0;justify-content:center;align-items:center;width:36px;display:flex}.shortcut-sheet-close:active{scale:.96}.shortcut-sheet-close:focus-visible{outline:var(--border-width-500) solid var(--color)}.shortcut-sheet-close:hover{background:var(--surface);color:var(--color)}.shortcut-sheet-close svg{height:var(--size-400);width:var(--size-400)}.shortcut-sheet-dialog.modal{--backdrop:var(--dialog-backdrop);--margin-horizontal:var(--size-400);--max-width:var(--dialog-width);--scale:var(--dialog-scale);--transition-duration:var(--open-duration);--transition-timing-function:var(--timing-function);--translateY:0px;background:var(--dialog-background);border-radius:var(--dialog-radius);box-shadow:var(--raised);color:var(--color);overflow:hidden}.shortcut-sheet-dialog.modal:not(.--active){--transition-duration:var(--close-duration)}.shortcut-sheet-dialog.modal.--leaving{--scale:1}.shortcut-sheet-empty{color:var(--color-muted);font-size:var(--font-size);padding:var(--size-600) var(--size-100);text-align:center}.shortcut-sheet-group{width:100%;display:block}.shortcut-sheet-group-label{--font-size:var(--font-size-300);color:var(--color-muted);font-weight:var(--font-weight-500);padding:var(--size-400) var(--size-100) calc(var(--size-100) / 2)}.shortcut-sheet-header{height:56px;padding-inline:var(--size-500) 10px;flex-shrink:0;justify-content:space-between;align-items:center;display:flex}.shortcut-sheet-input.input{--background-default:var(--surface);--border-radius:var(--border-radius-400);--color-default:var(--color);--font-size:var(--input-font-size);--padding-horizontal:var(--size-300);--padding-vertical:0px;--size:40px;outline:none;height:40px;padding-inline-start:36px}.shortcut-sheet-input.input:focus-visible{outline:var(--border-width-500) solid var(--color)}.shortcut-sheet-input.input::placeholder{color:var(--color-muted)}.shortcut-sheet-input.input::-webkit-search-cancel-button{display:none}.shortcut-sheet-kbd{background:var(--kbd-background);border-radius:var(--border-radius-300);box-shadow:0 0 0 var(--border-width-400) var(--kbd-border-color), inset 0 calc(var(--border-width-400) * -1) 0 var(--kbd-border-color);color:var(--color-muted);font-family:inherit;font-size:var(--kbd-font-size);height:var(--kbd-size);min-width:var(--kbd-size);transition:background-color var(--kbd-duration) ease-out, box-shadow var(--kbd-duration) ease-out, color var(--kbd-duration) ease-out, translate var(--kbd-duration) ease-out;justify-content:center;align-items:center;padding-inline:6px;line-height:1;display:flex}.--active>*>.shortcut-sheet-kbd{background:var(--kbd-pressed-background);box-shadow:none;color:var(--kbd-pressed-color);transition-duration:0s;translate:0 1px}.shortcut-sheet-keys{gap:calc(var(--size-100) / 2);flex-shrink:0;display:flex}.shortcut-sheet-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.shortcut-sheet-list{border-radius:0 0 var(--dialog-radius) var(--dialog-radius);overscroll-behavior:contain;min-height:0;padding:0 var(--size-300) var(--size-300);outline:none;flex:auto;overflow-y:auto}.shortcut-sheet-list:focus-visible{outline:var(--border-width-500) solid var(--color);outline-offset:calc(var(--border-width-500) * -1)}.shortcut-sheet-panel{height:var(--dialog-height);flex-direction:column;display:flex}.shortcut-sheet-row{border-radius:var(--border-radius-400);color:var(--color);font-size:var(--font-size);align-items:center;gap:var(--size-400);height:var(--row-height);padding-inline:var(--size-100);transition:background-color var(--flash-duration) ease-out;justify-content:space-between;display:flex}.shortcut-sheet-row.--active{background:var(--row-background);transition-duration:0s}.shortcut-sheet-rows{margin:0;padding:0;list-style:none}.shortcut-sheet-search{color:var(--color-muted);margin-inline:var(--size-300);flex-shrink:0;position:relative}.shortcut-sheet-search-icon{height:var(--size-400);left:var(--size-300);pointer-events:none;width:var(--size-400);z-index:1;position:absolute;top:50%;translate:0 -50%}.shortcut-sheet-sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.shortcut-sheet-title{--font-size:var(--title-font-size);color:var(--color);font-weight:var(--font-weight-600,var(--font-weight-500));width:auto}.shortcut-sheet-trigger{background:var(--surface);box-shadow:var(--raised);color:var(--color);cursor:pointer;font:inherit;font-size:var(--font-size);font-weight:var(--font-weight-500);height:40px;padding-inline:var(--size-400) var(--size-100);touch-action:manipulation;transition:scale var(--open-duration) ease-out;-webkit-user-select:none;user-select:none;border:0;border-radius:999px;outline:none;align-items:center;gap:10px;display:flex}.shortcut-sheet-trigger:active{scale:.96}.shortcut-sheet-trigger:focus-visible{outline:var(--border-width-500) solid var(--color);outline-offset:var(--border-width-500)}@media (prefers-reduced-motion:reduce){.shortcut-sheet-close:active,.shortcut-sheet-trigger:active{scale:1}.shortcut-sheet-dialog.modal{--scale:1;transition:opacity var(--transition-duration) var(--transition-timing-function)}.shortcut-sheet-dialog.modal::backdrop{transition:opacity var(--transition-duration) var(--transition-timing-function)}.shortcut-sheet-kbd{transition:background-color var(--kbd-duration) ease-out, color var(--kbd-duration) ease-out}.--active>*>.shortcut-sheet-kbd{translate:none}}}
+/*$vite$:1*/

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

@@ -1,4 +1,13 @@
-import * as template_u0 from '@esportsplus/template';
+import * as template_u1 from '@esportsplus/template';
 import './scss/index.scss';
-declare const _default: template_u0.Factory<template_u0.Attributes, template_u0.Renderable<any>, template_u0.Renderable<any>>;
+declare const _default: {
+    (): template_u1.Renderable<any>;
+    <T extends template_u1.Attributes>(attributes: T): template_u1.Renderable<any>;
+    <T extends template_u1.Renderable<any>>(content: T): template_u1.Renderable<any>;
+    (attributes: template_u1.Attributes, content?: template_u1.Renderable<any>): template_u1.Renderable<any>;
+    bind(context: {
+        attributes?: Partial<template_u1.Attributes> | undefined;
+        content?: template_u1.Renderable<any>;
+    }): any;
+};
 export default _default;

package/build/components/sidebar/index.js

@@ -1,13 +1,13 @@
-import * as template_u0 from '@esportsplus/template';
+import * as template_u1 from '@esportsplus/template';
 import { component } from '@esportsplus/template';
 import './scss/index.scss';
-const template_u1z = template_u0.template(`<div class='sidebar --flex-column --scrollbar' >`);
+const template_1dvlyft1 = template_u1.template(`<div class='sidebar --flex-column --scrollbar'>`);
 export default component(function (attributes, content) {
     return (() => {
-        let root_u1y = template_u1z(), element_u20 = root_u1y.firstChild;
-        template_u0.setProperties(element_u20, this?.attributes);
-        template_u0.setProperties(element_u20, attributes);
-        template_u0.slot(element_u20, content, 1);
-        return root_u1y;
+        let root_1dvlyft0 = template_1dvlyft1(), element_1dvlyft2 = root_1dvlyft0.firstChild;
+        template_u1.setProperties(element_1dvlyft2, this?.attributes);
+        template_u1.setProperties(element_1dvlyft2, attributes);
+        template_u1.slot(element_1dvlyft2, content, 1);
+        return root_1dvlyft0;
     })();
 });

package/build/components/sidebar/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.sidebar{--margin-horizontal:0px;--margin-vertical:0px;--width:var(--width-default);--width-closed:var(--width-default);--width-default:320px}.sidebar:not(.--active):not(:hover){--width:var(--width-closed)}.sidebar--floating{--margin-horizontal:var(--size-100);--margin-vertical:var(--size-100)}.sidebar{top:var(--margin-vertical);bottom:var(--margin-vertical);cursor:default;height:calc(100% - var(--margin-vertical) * 2);transition:max-width var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function), transform var(--transition-duration) var(--transition-timing-function);width:min(var(--width), 100% - var(--margin-horizontal) * 2);z-index:9;position:absolute}.sidebar:not(.--active) input[type=password]{display:none}.sidebar--e{right:var(--margin-horizontal)}.sidebar--e.sidebar--offscreen:not(.--active){transform:translateX(var(--width))}.sidebar--w{left:var(--margin-horizontal)}.sidebar--w.sidebar--offscreen:not(.--active){transform:translateX(calc(var(--width) * -1))}.sidebar-content{flex:0 0 var(--width-default);width:var(--width-default)}}
+@layer components {.sidebar{--margin-horizontal:0px;--margin-vertical:0px;--width:var(--width-default);--width-closed:var(--width-default);--width-default:320px}.sidebar:not(.--active):not(:hover){--width:var(--width-closed)}.sidebar--floating{--margin-horizontal:var(--size-100);--margin-vertical:var(--size-100)}.sidebar{top:var(--margin-vertical);bottom:var(--margin-vertical);cursor:default;height:calc(100% - var(--margin-vertical) * 2);transition:max-width var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function), translate var(--transition-duration) var(--transition-timing-function);width:min(var(--width), 100% - var(--margin-horizontal) * 2);z-index:9;position:absolute}.sidebar:not(.--active) input[type=password]{display:none}.sidebar--e{right:var(--margin-horizontal)}.sidebar--e.sidebar--offscreen:not(.--active){translate:var(--width)}.sidebar--w{left:var(--margin-horizontal)}.sidebar--w.sidebar--offscreen:not(.--active){translate:calc(var(--width) * -1)}.sidebar-content{flex:0 0 var(--width-default);width:var(--width-default)}}
 /*$vite$:1*/