@esportsplus/ui 0.56.4 → 0.57.0

package/build/components/input/scrub.js

@@ -0,0 +1,221 @@
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { swallow } from '../../shared/press.js';
+import input from './field.js';
+const template_0589z482 = template_u1.template(`<div class='input-scrub'><span aria-hidden='true' class='input-scrub-tape'><span class='input-scrub-ticks'></span><span class='input-scrub-needle'></span></span><span class='input-scrub-label'>`);
+class ReactiveObject_0589z480 extends reactivity_u0.ReactiveObject {
+    #draft;
+    #scrubbing = this[reactivity_u0.SIGNAL](false);
+    constructor(_p0) {
+        super(null);
+        this.#draft = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get draft() {
+        return reactivity_u0.read(this.#draft);
+    }
+    set draft(_v0) {
+        reactivity_u0.write(this.#draft, _v0);
+    }
+    get scrubbing() {
+        return reactivity_u0.read(this.#scrubbing);
+    }
+    set scrubbing(_v1) {
+        reactivity_u0.write(this.#scrubbing, _v1);
+    }
+}
+const DRAG_THRESHOLD = 3;
+const INPUT_SCRUB_FIELD = Symbol.for('@esportsplus/ui/input.scrub.field');
+const INPUT_SCRUB_LABEL = Symbol.for('@esportsplus/ui/input.scrub.label');
+const TICK = 6;
+function decimals(n) {
+    let s = String(n), dot = s.indexOf('.');
+    return dot < 0 ? 0 : s.length - dot - 1;
+}
+function gear(e) {
+    return e.shiftKey ? 10 : e.altKey ? 0.1 : 1;
+}
+export default component(function ({ label, lockPointer = false, max = Infinity, min = -Infinity, pixelsPerStep = 1, step = 1, precision = decimals(step) + 1, suffix = '', value = 0, state = reactivity_u0.reactive({ active: false, error: '', value }), ...attributes }, content) {
+    let field, local = new ReactiveObject_0589z480(null), period = TICK * 5, scrub = null, skip = false;
+    function clamp(n) {
+        return Math.min(Math.max(n, min), max);
+    }
+    function commit() {
+        if (local.draft === null) {
+            return state.value;
+        }
+        let next = parse(local.draft);
+        if (next !== null && next !== state.value) {
+            state.value = next;
+        }
+        return next ?? state.value;
+    }
+    function end() {
+        if (document.pointerLockElement) {
+            document.exitPointerLock();
+        }
+        document.documentElement.style.removeProperty('cursor');
+        if (scrub?.moved) {
+            swallow();
+        }
+        scrub = null;
+        local.scrubbing = false;
+    }
+    function format(n) {
+        return `${round(n)}${suffix}`;
+    }
+    function parse(text) {
+        let trimmed = (suffix ? text.replace(suffix, '') : text).trim(), n = Number(trimmed);
+        return trimmed === '' || Number.isNaN(n) ? null : clamp(round(n));
+    }
+    function round(n) {
+        return Number(n.toFixed(precision));
+    }
+    function show(field, text) {
+        local.draft = text;
+        field.value = text;
+        field.select();
+    }
+    return (() => {
+        let root_0589z481 = template_0589z482(), element_0589z483 = root_0589z481.firstChild, element_0589z484 = element_0589z483.firstElementChild.firstElementChild, element_0589z485 = element_0589z483.firstElementChild.nextElementSibling;
+        template_u1.slot(element_0589z485, content, 1);
+        template_u1.slot(element_0589z483, input.call({ attributes: { ...this?.attributes?.[INPUT_SCRUB_FIELD], ...attributes[INPUT_SCRUB_FIELD] } }, {
+            'aria-label': label,
+            'aria-valuemax': Number.isFinite(max) && max,
+            'aria-valuemin': Number.isFinite(min) && min,
+            'aria-valuenow': () => state.value,
+            'aria-valuetext': () => format(state.value),
+            autocomplete: 'off',
+            class: 'input-scrub-field',
+            inputmode: 'decimal',
+            onblur: () => {
+                if (!skip) {
+                    commit();
+                }
+                skip = false;
+                local.draft = null;
+            },
+            onconnect: (element) => {
+                field = element;
+            },
+            onfocus: (e) => {
+                show(e.currentTarget, format(state.value));
+            },
+            oninput: (e) => {
+                local.draft = e.currentTarget.value;
+            },
+            onkeydown: (e) => {
+                let field = e.currentTarget;
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    show(field, format(commit()));
+                }
+                else if (e.key === 'Escape') {
+                    skip = true;
+                    field.blur();
+                }
+                else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+                    e.preventDefault();
+                    let base = local.draft === null ? state.value : (parse(local.draft) ?? state.value), next = clamp(round(base + (e.key === 'ArrowUp' ? step : -step) * gear(e)));
+                    if (next !== state.value) {
+                        state.value = next;
+                    }
+                    show(field, format(next));
+                }
+            },
+            role: 'spinbutton',
+            spellcheck: false,
+            state,
+            value: () => local.draft ?? format(state.value)
+        }), 2);
+        template_u1.setProperties(element_0589z485, this?.attributes?.[INPUT_SCRUB_LABEL]);
+        template_u1.setProperties(element_0589z485, attributes[INPUT_SCRUB_LABEL]);
+        template_u1.delegate(element_0589z485, 'click', () => {
+            field?.focus();
+        });
+        template_u1.delegate(element_0589z485, 'lostpointercapture', (e) => {
+            if (scrub?.id === e.pointerId) {
+                end();
+            }
+        });
+        template_u1.delegate(element_0589z485, 'pointercancel', (e) => {
+            if (scrub?.id === e.pointerId) {
+                end();
+            }
+        });
+        template_u1.delegate(element_0589z485, 'pointerdown', (e) => {
+            if (e.button !== 0 || scrub) {
+                return;
+            }
+            e.preventDefault();
+            let element = e.currentTarget, start = state.value;
+            if (field && document.activeElement === field) {
+                start = commit();
+                skip = true;
+                field.blur();
+            }
+            element.setPointerCapture(e.pointerId);
+            scrub = {
+                id: e.pointerId,
+                lastX: e.clientX,
+                moved: false,
+                raw: start,
+                sent: start,
+                start,
+                startX: e.clientX
+            };
+        });
+        template_u1.delegate(element_0589z485, 'pointermove', (e) => {
+            let s = scrub;
+            if (!s || e.pointerId !== s.id) {
+                return;
+            }
+            let element = e.currentTarget;
+            if (!s.moved) {
+                if (Math.abs(e.clientX - s.startX) < DRAG_THRESHOLD) {
+                    return;
+                }
+                s.moved = true;
+                local.scrubbing = true;
+                document.documentElement.style.cursor = 'ew-resize';
+                if (lockPointer && e.pointerType === 'mouse') {
+                    Promise.resolve(element.requestPointerLock?.()).catch(() => { });
+                }
+            }
+            let dx = document.pointerLockElement === element ? e.movementX : e.clientX - s.lastX;
+            s.lastX = e.clientX;
+            s.raw = clamp(s.raw + (dx / pixelsPerStep) * step * gear(e));
+            let next = round(s.raw);
+            if (next === s.sent) {
+                return;
+            }
+            s.sent = next;
+            state.value = next;
+        });
+        template_u1.delegate(element_0589z485, 'pointerup', (e) => {
+            if (scrub?.id === e.pointerId) {
+                end();
+            }
+        });
+        template_u1.setList(element_0589z484, 'style', () => {
+            let offset = ((((state.value / step) * pixelsPerStep) % period) + period) % period;
+            return `--offset: ${offset}px`;
+        });
+        template_u1.setProperties(element_0589z483, this?.attributes);
+        template_u1.setProperties(element_0589z483, attributes);
+        template_u1.setList(element_0589z483, 'class', () => local.scrubbing && '--active');
+        template_u1.ondisconnect(element_0589z483, () => {
+            if (scrub) {
+                end();
+            }
+        });
+        template_u1.ondocument(element_0589z483, 'keydown', (e) => {
+            if (e.key !== 'Escape' || !scrub) {
+                return;
+            }
+            state.value = scrub.start;
+            end();
+        });
+        return root_0589z481;
+    })();
+}, { field: INPUT_SCRUB_FIELD, label: INPUT_SCRUB_LABEL });

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-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}}
+@layer components{.input-scrub-tape{position:absolute;inset:auto 0 0}.input-tag-chip-body,.input-scrub-ticks{position:absolute;inset:0}.input{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default)}.--active.input{--background:var(--background-active)}.input:not(.--active):hover{--background:var(--background-hover)}.input:not(.--active):active{--background:var(--background-pressed)}.input{--border-color:var(--border-color-default);--border-color-active:var(--border-color-default);--border-color-default:transparent;--border-color-hover:var(--border-color-default);--border-color-pressed:var(--border-color-default)}.--active.input{--border-color:var(--border-color-active)}.input:not(.--active):hover{--border-color:var(--border-color-hover)}.input:not(.--active):active{--border-color:var(--border-color-pressed)}.input{--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)}.--active.input{--color:var(--color-active)}.input:not(.--active):hover{--color:var(--color-hover)}.input:not(.--active):active{--color:var(--color-pressed)}.input-tag-live{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.input-tag-list{margin:0;padding:0;list-style:none}.input-tag-chip-text{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.input-scrub{background:var(--background);border-radius:var(--border-radius);color:var(--color);height:var(--height);align-items:center;display:flex;position:relative;overflow:hidden}.input-scrub:has(.input-scrub-field:focus-visible){outline:var(--outline-width) solid var(--outline-color)}.input-scrub>.input-scrub-field{font-variant-numeric:tabular-nums;height:100%;min-height:0;outline:none;padding-inline-end:var(--field-padding)}.input-scrub-label{color:var(--label-color);cursor:ew-resize;font-size:var(--font-size);touch-action:none;height:100%;transition:color var(--transition-duration) var(--transition-timing-function);-webkit-user-select:none;user-select:none;width:var(--label-width);flex-shrink:0;justify-content:center;align-items:center;display:flex}.input-scrub-label:hover{color:var(--label-color-active)}.input-scrub-label svg{width:16px;height:16px}.input-scrub-needle{background:var(--needle-color);height:var(--tape-height);width:1px;position:absolute;bottom:0;left:50%;translate:-50%}.input-scrub-tape{color:var(--tape-color);height:var(--tape-height);opacity:var(--tape-opacity);pointer-events:none;transition:opacity var(--tape-duration) var(--tape-timing-function), translate var(--tape-duration) var(--tape-timing-function);translate:var(--tape-translate);-webkit-mask-image:linear-gradient(90deg,#0000,#000 30% 70%,#0000);mask-image:linear-gradient(90deg,#0000,#000 30% 70%,#0000)}.input-scrub-ticks{background-image:linear-gradient(90deg,currentColor 1px,#0000 1px),linear-gradient(90deg,currentColor 1px,#0000 1px);background-position-x:calc(50% - var(--offset,0px));background-position-y:bottom;background-repeat:repeat-x;background-size:var(--tick) var(--tape-minor-height), calc(var(--tick) * 5) var(--tape-major-height)}@media (prefers-reduced-motion:reduce){.input-scrub-tape{translate:0}}.input-tag{color:var(--color);width:var(--width);flex-direction:column;gap:8px;display:flex}.input-tag-box{background:var(--box-background);border-radius:var(--box-border-radius);box-shadow:var(--box-shadow);cursor:text;outline-offset:2px;padding:var(--box-padding)}.input-tag-box:has(.input-tag-field:focus-visible){outline:var(--border-width-500) solid var(--outline-color)}.input-tag-chip{color:var(--chip-color);font-size:var(--font-size);height:var(--chip-height);max-width:100%;padding-inline:var(--text-inset) 4px;transition:color var(--transition-duration) var(--transition-timing-function);align-items:center;gap:2px;display:flex;position:relative}.input-tag-chip.--active{color:var(--chip-color-active)}.input-tag-chip-body{background:var(--chip-background);border-radius:var(--chip-border-radius);box-shadow:var(--chip-shadow);transition:background-color var(--transition-duration) var(--transition-timing-function), box-shadow var(--transition-duration) var(--transition-timing-function)}.input-tag-chip-button{border-radius:var(--border-radius-300);color:var(--chip-remove-color);cursor:pointer;height:24px;transition:background-color var(--transition-duration) var(--transition-timing-function), color var(--transition-duration) var(--transition-timing-function), scale var(--transition-duration) var(--transition-timing-function);background:0 0;border:0;outline:none;flex-shrink:0;justify-content:center;align-items:center;width:24px;padding:0;display:flex;position:relative}.input-tag-chip-button:after{content:"";position:absolute;inset:-4px}.input-tag-chip-button:hover{background:var(--chip-remove-hover-background);color:var(--chip-remove-color-hover)}.input-tag-chip-button:active{scale:.96}.input-tag-chip-button:focus-visible{outline:var(--border-width-500) solid var(--outline-color)}.input-tag-chip-icon{width:14px;height:14px}.input-tag-chip-remove{display:flex;position:relative}.input-tag-chip-text{position:relative}.input-tag-entry{font-size:var(--font-size);min-width:var(--entry-min-width);flex:1;display:flex}.input-tag-entry>.input-tag-field{font-size:inherit;height:var(--chip-height);min-width:0;min-height:0;padding:0 8px 0 var(--text-inset);outline:none}.input-tag-entry>.input-tag-field::placeholder{color:var(--placeholder-color)}.input-tag-ghost{pointer-events:none;position:absolute}.input-tag-hint{color:var(--hint-color);font-size:var(--hint-font-size);margin:0}.input-tag-label{font-size:var(--label-font-size);font-weight:var(--label-font-weight)}.input-tag-list{gap:var(--gap);flex-wrap:wrap;display:flex;position:relative}@media (prefers-reduced-motion:reduce){.input-tag-chip-button:active{scale:1}}.input{--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;--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{--box-shadow:var(--box-shadow-hover)}.input:not(.--active):not(.--active):active{--box-shadow:var(--box-shadow-pressed)}.input.--active{--box-shadow:var(--box-shadow-active)}.input-scrub{--background:var(--color-white-300);--border-radius:var(--border-radius-400);--color:var(--color-text-500);--field-padding:10px;--font-size:var(--font-size-300);--height:40px;--label-color:var(--color-text-300);--label-color-active:var(--color-text-500);--label-width:36px;--needle-color:var(--color-text-500);--outline-color:var(--color-text-500);--outline-width:var(--border-width-500);--tape-color:var(--color-text-300);--tape-duration:var(--tape-leave-duration);--tape-enter-duration:.15s;--tape-height:8px;--tape-leave-duration:.2s;--tape-major-height:6px;--tape-minor-height:3px;--tape-opacity:0;--tape-timing-function:cubic-bezier(.23, 1, .32, 1);--tape-translate:0 4px;--tick:6px}.input-scrub.--active{--label-color:var(--label-color-active);--tape-duration:var(--tape-enter-duration);--tape-opacity:1;--tape-translate:0 0}.input-scrub>.input-scrub-field{--color-default:currentColor;--font-size:inherit;--padding-horizontal:0px;--padding-vertical:0px}.input-tag{--box-background:var(--color-grey-400);--box-border-radius:14px;--box-padding:6px;--box-shadow:var(--box-shadow-200);--chip-background:var(--color-white-300);--chip-background-active:var(--color-text-500);--chip-blur:4px;--chip-border-radius:var(--border-radius-400);--chip-color:var(--color-text-500);--chip-color-active:var(--color-white-300);--chip-height:32px;--chip-remove-color:var(--color-text-300);--chip-remove-color-hover:var(--color-text-500);--chip-remove-hover-background:oklch(from var(--color-text-500) l c h / .06);--chip-remove-scale:.25;--chip-scale:.9;--chip-shadow:var(--box-shadow-100);--chip-shake:4px;--chip-shake-opacity:1;--chip-slide-duration:.41s;--chip-slide-easing:linear(0, .038, .116, .219, .326, .43, .518, .602, .674, .731, .782, .825, .858, .886, .91, .928, .942, .955, .964, .971, .977, .982, .986, .989, .991, .993, .995, .996, .997, .997, 1);--color:var(--color-text-500);--entry-min-width:120px;--font-size:var(--font-size-300);--gap:6px;--hint-color:var(--color-text-300);--hint-font-size:var(--font-size-200);--label-font-size:var(--font-size-300);--label-font-weight:var(--font-weight-500);--outline-color:var(--color-text-500);--placeholder-color:var(--color-text-300);--text-inset:10px;--width:min(440px, 100%)}@media (prefers-reduced-motion:reduce){.input-tag{--chip-blur:0px;--chip-remove-scale:1;--chip-scale:1;--chip-shake:0px;--chip-shake-opacity:.4;--chip-slide-duration:0s}}.input-tag-chip.--active{--chip-background:var(--chip-background-active);--chip-remove-color:oklch(from var(--chip-color-active) l c h / .7);--chip-remove-color-hover:var(--chip-color-active);--chip-remove-hover-background:transparent;--chip-shadow:none}.input-tag-entry>.input-tag-field{--color-default:currentColor}.input{min-height:calc(var(--padding-vertical) * 2 + var(--size));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;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-width:0;padding-block:max(0px, var(--padding-vertical) - var(--border-width));padding-inline:max(0px, var(--padding-horizontal) - var(--border-width));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/input/tag.d.ts

@@ -0,0 +1,24 @@
+import * as template_u1 from '@esportsplus/template';
+import { type Attributes, type Renderable } from '@esportsplus/template';
+import { type Reactive } from '@esportsplus/reactivity';
+import input from './field.js';
+type A = Attributes & {
+    [INPUT_TAG_FIELD]?: Field;
+    hint?: Renderable<unknown>;
+    label: string;
+    name?: string;
+    placeholder?: string;
+    state?: State;
+    tags?: string[];
+};
+type Field = Parameters<typeof input>[0];
+type State = {
+    active: boolean;
+    error: string;
+    tags: Reactive<string[]>;
+};
+declare const INPUT_TAG_FIELD: unique symbol;
+declare const _default: template_u1.Factory<A, Renderable<any>, Renderable<any>, {
+    readonly field: typeof INPUT_TAG_FIELD;
+}>;
+export default _default;

package/build/components/input/tag.js

@@ -0,0 +1,288 @@
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { ReactiveArray } from '@esportsplus/reactivity';
+import close from '@esportsplus/ui/svg/close.svg';
+import { measure, slides, timing } from '../../shared/animation.js';
+import input from './field.js';
+const template_0vbj7wx3 = template_u1.template(`<li class='input-tag-chip '><span aria-hidden='true' class='input-tag-chip-body'></span><span class='input-tag-chip-text'></span><span class='input-tag-chip-remove'><button class='input-tag-chip-button' type='button'><svg aria-hidden='true' class='input-tag-chip-icon'><use />`);
+const template_0vbj7wx9 = template_u1.template(`<input type='hidden' />`);
+const template_0vbj7wxc = template_u1.template(`<li aria-hidden='true' class='input-tag-chip input-tag-ghost' inert style=';;;;'><span aria-hidden='true' class='input-tag-chip-body'></span><span class='input-tag-chip-text'></span><span class='input-tag-chip-remove'><span class='input-tag-chip-button'><svg aria-hidden='true' class='input-tag-chip-icon'><use />`);
+const template_0vbj7wxh = template_u1.template(`<div class='input-tag'><label class='input-tag-label'></label><div class='input-tag-box'><ul class='input-tag-list'><!--$--><!--$--><li class='input-tag-entry' role='none'></li></ul></div><!--$--><span aria-live='polite' class='input-tag-live'>`);
+const template_0vbj7wxs = template_u1.template(`<p class='input-tag-hint'>`);
+class ReactiveObject_0vbj7wx0 extends reactivity_u0.ReactiveObject {
+    #active = this[reactivity_u0.SIGNAL](false);
+    #error = this[reactivity_u0.SIGNAL]('');
+    #tags;
+    constructor(_p0) {
+        super(null);
+        this.#tags = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get active() {
+        return reactivity_u0.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_u0.write(this.#active, _v0);
+    }
+    get error() {
+        return reactivity_u0.read(this.#error);
+    }
+    set error(_v1) {
+        reactivity_u0.write(this.#error, _v1);
+    }
+    get tags() {
+        return reactivity_u0.read(this.#tags);
+    }
+    set tags(_v2) {
+        reactivity_u0.write(this.#tags, _v2);
+    }
+}
+class ReactiveObject_0vbj7wx1 extends reactivity_u0.ReactiveObject {
+    #announcement = this[reactivity_u0.SIGNAL]('');
+    #armed = this[reactivity_u0.SIGNAL]('');
+    constructor() {
+        super(null);
+    }
+    get announcement() {
+        return reactivity_u0.read(this.#announcement);
+    }
+    set announcement(_v0) {
+        reactivity_u0.write(this.#announcement, _v0);
+    }
+    get armed() {
+        return reactivity_u0.read(this.#armed);
+    }
+    set armed(_v1) {
+        reactivity_u0.write(this.#armed, _v1);
+    }
+}
+const TAG_SEPARATORS = /[,\n]/;
+const LEAVE = { duration: 150, easing: 'cubic-bezier(0.23, 1, 0.32, 1)' };
+const POP = {
+    duration: 380,
+    easing: 'linear(0, 0.035, 0.107, 0.208, 0.31, 0.42, 0.524, 0.61, 0.692, 0.757, 0.815, 0.863, 0.898, 0.928, 0.95, 0.968, 0.981, 0.989, 0.996, 1, 1.003, 1.004, 1.005, 1.005, 1.005, 1.005, 1.004, 1.004, 1.003, 1.003, 1)'
+};
+const SHAKE = { duration: 300, easing: 'cubic-bezier(0.23, 1, 0.32, 1)' };
+const SHAKING = Symbol();
+const SWAP = { delay: 60, duration: 300, fill: 'backwards' };
+const INPUT_TAG_FIELD = Symbol.for('@esportsplus/ui/input.tag.field');
+let uid = 0;
+function key(tag) {
+    return tag.toLowerCase();
+}
+function motion(element) {
+    let computed = getComputedStyle(element);
+    return {
+        blur: parseFloat(computed.getPropertyValue('--chip-blur')) || 0,
+        dim: parseFloat(computed.getPropertyValue('--chip-shake-opacity')) || 1,
+        grow: parseFloat(computed.getPropertyValue('--chip-remove-scale')) || 1,
+        scale: parseFloat(computed.getPropertyValue('--chip-scale')) || 1,
+        settle: computed.getPropertyValue('--chip-slide-easing').trim() || 'ease',
+        shake: parseFloat(computed.getPropertyValue('--chip-shake')) || 0,
+        slide: timing(computed, 'chip-slide')
+    };
+}
+export default component(function ({ hint, label, name, placeholder = 'Add a tag', tags = [], state = new ReactiveObject_0vbj7wx0(new ReactiveArray(tags)), ...attributes }) {
+    let chips = new Map(), field, ghosts = new ReactiveArray(), id = `input-tag-${++uid}`, list, local = new ReactiveObject_0vbj7wx1(), slot = new template_u1.ArraySlot(state.tags, (tag) => {
+        let root_0vbj7wx2 = template_0vbj7wx3(), element_0vbj7wx4 = root_0vbj7wx2.firstChild, element_0vbj7wx5 = element_0vbj7wx4.firstElementChild.nextElementSibling, element_0vbj7wx6 = element_0vbj7wx5.nextElementSibling.firstElementChild, element_0vbj7wx7 = element_0vbj7wx6.firstElementChild.firstElementChild;
+        template_u1.slot(element_0vbj7wx5, tag, 1);
+        template_u1.slot(element_0vbj7wx4, name && (() => {
+            let root_0vbj7wx8 = template_0vbj7wx9(), element_0vbj7wxa = root_0vbj7wx8.firstChild;
+            template_u1.setProperty(element_0vbj7wxa, 'name', template_u1.interpolate([(name), "[]"]));
+            template_u1.setProperty(element_0vbj7wxa, 'value', tag);
+            return root_0vbj7wx8;
+        })(), 2);
+        template_u1.setProperty(element_0vbj7wx7, 'href', template_u1.interpolate(["#", (close)]));
+        template_u1.setProperty(element_0vbj7wx6, 'aria-label', template_u1.interpolate(["Remove ", (tag)]));
+        template_u1.delegate(element_0vbj7wx6, 'click', () => {
+            remove(key(tag));
+            field?.focus();
+        });
+        template_u1.delegate(element_0vbj7wx6, 'pointerdown', (e) => {
+            e.preventDefault();
+        });
+        template_u1.setList(element_0vbj7wx4, 'class', () => local.armed === key(tag) && '--active');
+        template_u1.onconnect(element_0vbj7wx4, (element) => {
+            chips.set(key(tag), element);
+        });
+        template_u1.ondisconnect(element_0vbj7wx4, (element) => {
+            if (chips.get(key(tag)) === element) {
+                chips.delete(key(tag));
+            }
+        });
+        return root_0vbj7wx2;
+    }), stand = new template_u1.ArraySlot(ghosts, (ghost) => {
+        let root_0vbj7wxb = template_0vbj7wxc(), element_0vbj7wxd = root_0vbj7wxb.firstChild, element_0vbj7wxe = element_0vbj7wxd.firstElementChild.nextElementSibling, element_0vbj7wxf = element_0vbj7wxe.nextElementSibling.firstElementChild.firstElementChild.firstElementChild;
+        template_u1.slot(element_0vbj7wxe, ghost.tag, 1);
+        template_u1.setProperty(element_0vbj7wxf, 'href', template_u1.interpolate(["#", (close)]));
+        template_u1.setList(element_0vbj7wxd, 'style', template_u1.interpolate(["height: ", (ghost.height), "px"]));
+        template_u1.setList(element_0vbj7wxd, 'style', template_u1.interpolate([" left: ", (ghost.left), "px"]));
+        template_u1.setList(element_0vbj7wxd, 'style', template_u1.interpolate([" top: ", (ghost.top), "px"]));
+        template_u1.setList(element_0vbj7wxd, 'style', template_u1.interpolate([" width: ", (ghost.width), "px"]));
+        template_u1.onconnect(element_0vbj7wxd, (element) => {
+            let { blur, scale } = motion(element);
+            element.animate({ filter: ['blur(0)', `blur(${blur / 2}px)`], opacity: [1, 0], scale: [1, scale] }, { ...LEAVE, fill: 'forwards' }).finished.then(() => {
+                let at = ghosts.indexOf(ghost);
+                if (at !== -1) {
+                    ghosts.splice(at, 1);
+                }
+            }, () => { });
+        });
+        return root_0vbj7wxb;
+    });
+    function add(raw, typed) {
+        let added = [], seen = new Map();
+        for (let i = 0, n = state.tags.$length; i < n; i++) {
+            let k = key(state.tags[i]);
+            if (!seen.has(k)) {
+                seen.set(k, state.tags[i]);
+            }
+        }
+        for (let i = 0, n = raw.length; i < n; i++) {
+            let tag = raw[i].trim();
+            if (!tag) {
+                continue;
+            }
+            let k = key(tag);
+            if (seen.has(k)) {
+                nudge(k);
+                local.announcement = `${seen.get(k) ?? tag} is already added`;
+                continue;
+            }
+            seen.set(k, undefined);
+            added.push(tag);
+        }
+        if (field) {
+            field.value = '';
+        }
+        local.armed = '';
+        if (!added.length) {
+            return;
+        }
+        let formed = typed && added.length === 1 ? key(added[0]) : '';
+        mutate(() => state.tags.push(...added), formed ? form : pop);
+        local.announcement = `Added ${added.join(', ')}`;
+    }
+    function form(chip) {
+        let body = chip.querySelector('.input-tag-chip-body'), remove = chip.querySelector('.input-tag-chip-remove'), { blur, grow, scale, settle } = motion(chip);
+        body?.animate({ opacity: [0, 1], scale: [scale, 1] }, POP);
+        remove?.animate({ filter: [`blur(${blur}px)`, 'blur(0)'], opacity: [0, 1], scale: [grow, 1] }, { ...SWAP, easing: settle });
+    }
+    function mutate(change, enter) {
+        if (!list) {
+            change();
+            return;
+        }
+        let children = list.children, shift = motion(list).slide;
+        measure(children);
+        change();
+        slot.flush();
+        slides([...children].filter((child) => !child.classList.contains('input-tag-ghost')), shift, enter);
+    }
+    function nudge(k) {
+        let element = chips.get(k);
+        if (!element) {
+            return;
+        }
+        let { dim, shake } = motion(element);
+        element[SHAKING]?.cancel();
+        element[SHAKING] = element.animate({ opacity: [1, dim, 1], translate: ['0', `${-shake}px`, `${shake}px`, `${shake * -0.75}px`, `${shake / 2}px`, '0'] }, SHAKE);
+    }
+    function pop(chip) {
+        let { blur, scale } = motion(chip);
+        chip.animate({ filter: [`blur(${blur}px)`, 'blur(0)'], opacity: [0, 1], scale: [scale, 1] }, POP);
+    }
+    function remove(k) {
+        let index = state.tags.findIndex((t) => key(t) === k);
+        if (index === -1) {
+            return;
+        }
+        let element = chips.get(k), tag = state.tags[index];
+        if (element && list) {
+            let origin = list.getBoundingClientRect(), rect = element.getBoundingClientRect();
+            ghosts.push({ height: rect.height, left: rect.left - origin.left, tag, top: rect.top - origin.top, width: rect.width });
+        }
+        mutate(() => state.tags.splice(index, 1));
+        local.announcement = `Removed ${tag}`;
+        local.armed = '';
+    }
+    return (() => {
+        let root_0vbj7wxg = template_0vbj7wxh(), element_0vbj7wxi = root_0vbj7wxg.firstChild, element_0vbj7wxj = element_0vbj7wxi.firstElementChild, element_0vbj7wxk = element_0vbj7wxj.nextElementSibling, element_0vbj7wxl = element_0vbj7wxk.firstElementChild, element_0vbj7wxm = element_0vbj7wxl.firstChild, element_0vbj7wxn = element_0vbj7wxm.nextSibling, element_0vbj7wxo = element_0vbj7wxl.firstElementChild, element_0vbj7wxp = element_0vbj7wxi.firstChild.nextSibling.nextSibling, element_0vbj7wxq = element_0vbj7wxk.nextElementSibling;
+        template_u1.slot(element_0vbj7wxj, label, 1);
+        template_u1.slot(element_0vbj7wxm, slot);
+        template_u1.slot(element_0vbj7wxn, stand);
+        template_u1.slot(element_0vbj7wxo, input.call({ attributes: { ...this?.attributes?.[INPUT_TAG_FIELD], ...attributes[INPUT_TAG_FIELD] } }, {
+            autocomplete: 'off',
+            class: 'input-tag-field',
+            enterkeyhint: 'enter',
+            id,
+            onblur: () => {
+                local.armed = '';
+            },
+            onconnect: (element) => {
+                field = element;
+            },
+            oninput: (e) => {
+                let value = e.currentTarget.value;
+                if (value.includes(',')) {
+                    add(value.split(','), true);
+                }
+                else {
+                    local.armed = '';
+                }
+            },
+            onkeydown: (e) => {
+                let element = e.currentTarget;
+                if (e.key === 'Enter' || e.key === ',') {
+                    e.preventDefault();
+                    add([element.value], true);
+                }
+                else if (e.key === 'Backspace' && element.value === '' && state.tags.$length) {
+                    e.preventDefault();
+                    let last = key(state.tags[state.tags.$length - 1]);
+                    if (local.armed === last) {
+                        remove(last);
+                    }
+                    else {
+                        local.armed = last;
+                    }
+                }
+                else if (e.key === 'Escape') {
+                    local.armed = '';
+                }
+            },
+            onpaste: (e) => {
+                let text = e.clipboardData?.getData('text') ?? '';
+                if (!TAG_SEPARATORS.test(text)) {
+                    return;
+                }
+                e.preventDefault();
+                add((e.currentTarget.value + text).split(TAG_SEPARATORS), false);
+            },
+            placeholder,
+            state
+        }), 1);
+        template_u1.slot(element_0vbj7wxp, !!hint && (() => {
+            let root_0vbj7wxr = template_0vbj7wxs(), element_0vbj7wxt = root_0vbj7wxr.firstChild;
+            template_u1.slot(element_0vbj7wxt, hint, 1);
+            return root_0vbj7wxr;
+        })());
+        new template_u1.EffectSlot(element_0vbj7wxq, () => local.announcement, 1);
+        template_u1.setProperty(element_0vbj7wxl, 'aria-label', () => `${label}, ${slot.length} added`);
+        template_u1.onconnect(element_0vbj7wxl, (element) => {
+            list = element;
+        });
+        template_u1.delegate(element_0vbj7wxk, 'pointerdown', (e) => {
+            let target = e.target;
+            if (target !== e.currentTarget && target !== list) {
+                return;
+            }
+            e.preventDefault();
+            field?.focus();
+        });
+        template_u1.setProperty(element_0vbj7wxj, 'for', id);
+        template_u1.setProperties(element_0vbj7wxi, this?.attributes);
+        template_u1.setProperties(element_0vbj7wxi, attributes);
+        return root_0vbj7wxg;
+    })();
+}, { field: INPUT_TAG_FIELD });

package/build/components/json/download.js

@@ -1,8 +1,9 @@
 export default (content, name) => {
-    let link = document.createElement('a');
+    let link = document.createElement('a'), url = URL.createObjectURL(new Blob([JSON.stringify(content)], { type: 'application/json' }));
     link.download = name + '.json';
-    link.href = window.URL.createObjectURL(new Blob([JSON.stringify(content)], { type: 'application/json' }));
+    link.href = url;
     document.body.appendChild(link);
     link.click();
-    document.body.removeChild(link);
+    link.remove();
+    setTimeout(() => URL.revokeObjectURL(url));
 };

package/build/components/link/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.link{--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-active:var(--border-color-default);--border-color-default:var(--background);--border-color-hover:var(--border-color-default);--border-color-pressed:var(--border-color-default);--padding-horizontal:0px}.link.--active{--background:var(--background-active);--border-color:var(--border-color-active);--color:var(--color-active)}.link:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--color:var(--color-hover)}.link:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--color:var(--color-pressed)}.text,.link{--border-width:0px;--color:var(--color-default,inherit);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--width:auto;color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);gap:var(--gap-vertical) var(--gap-horizontal);transition:color var(--transition-duration) var(--transition-timing-function);width:var(--width);display:flex;position:relative}.text.--text-truncate,.--text-truncate.link{display:block}.link{background:var(--background);cursor:pointer;padding-block:max(0px, var(--padding-vertical) - var(--border-width));padding-inline:max(0px, var(--padding-horizontal) - var(--border-width));transition:background var(--transition-duration) var(--transition-timing-function), border-color var(--transition-duration) var(--transition-timing-function), color var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function);flex-wrap:wrap;place-content:center flex-start;position:relative}}
+@layer components{.link{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default)}.--active.link{--background:var(--background-active)}.link:not(.--active):hover{--background:var(--background-hover)}.link:not(.--active):active{--background:var(--background-pressed)}.link{--border-color:var(--border-color-default);--border-color-active:var(--border-color-default);--border-color-default:transparent;--border-color-hover:var(--border-color-default);--border-color-pressed:var(--border-color-default)}.--active.link{--border-color:var(--border-color-active)}.link:not(.--active):hover{--border-color:var(--border-color-hover)}.link:not(.--active):active{--border-color:var(--border-color-pressed)}.link{--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)}.--active.link{--color:var(--color-active)}.link:not(.--active):hover{--color:var(--color-hover)}.link:not(.--active):active{--color:var(--color-pressed)}.link{--border-width:0px;--color:var(--color-default,inherit);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--width:auto;color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);gap:var(--gap-vertical) var(--gap-horizontal);line-height:var(--line-height);transition:color var(--transition-duration) var(--transition-timing-function);width:var(--width);display:flex;position:relative}.--text-truncate.link{display:block}.link{--border-color-default:var(--background);--padding-horizontal:0px;background:var(--background);cursor:pointer;padding-block:max(0px, var(--padding-vertical) - var(--border-width));padding-inline:max(0px, var(--padding-horizontal) - var(--border-width));transition:background var(--transition-duration) var(--transition-timing-function), border-color var(--transition-duration) var(--transition-timing-function), color var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function);flex-wrap:wrap;place-content:center flex-start;position:relative}:where(.link) :where(.icon){transition:color var(--transition-duration) var(--transition-timing-function)}}
 /*$vite$:1*/

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

@@ -1,4 +1,4 @@
-import { Attributes } from '@esportsplus/template';
+import { type Attributes } from '@esportsplus/template';
 import './scss/index.scss';
 export default _default;
 declare function _default(attributes?: Attributes): DocumentFragment | Text;

package/build/components/loading/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.loading{--animation-duration:.64s;--border-color:var(--color);--border-width:var(--border-width-400);--color:var(--color-black-400);--size:var(--size-400);--timing-function:cubic-bezier(.5, 0, .5, 1);--track-color:color-mix(in srgb, var(--border-color), transparent 90%)}.loading--bar{--animation-duration:.8s;--height:var(--border-width);--width:100%}.loading--tail{--animation-duration:.8s;--tail:120deg}.loading{animation:loading var(--animation-duration) linear infinite;border:var(--border-width) solid var(--track-color);border-left-color:var(--border-color);height:var(--size);width:var(--size);border-radius:100%}.loading--bar{background:var(--track-color);border-radius:var(--border-width);height:var(--height);width:var(--width);border:0;animation:none;position:relative;overflow:hidden}.loading--bar:before{animation:loading--bar var(--animation-duration) var(--timing-function) infinite;background:var(--border-color);border-radius:inherit;content:"";width:40%;position:absolute;inset:0 auto 0 0}.loading--tail{background:conic-gradient(transparent calc(360deg - var(--tail)), var(--border-color));-webkit-mask:radial-gradient(farthest-side, transparent calc(100% - var(--border-width)), #000 calc(100% - var(--border-width) + .5px));-webkit-mask:radial-gradient(farthest-side, transparent calc(100% - var(--border-width)), #000 calc(100% - var(--border-width) + .5px));mask:radial-gradient(farthest-side, transparent calc(100% - var(--border-width)), #000 calc(100% - var(--border-width) + .5px));border:0;position:relative}.loading--tail:after{background:var(--border-color);content:"";height:var(--border-width);width:var(--border-width);border-radius:100%;position:absolute;top:0;left:50%;translate:-50%}@keyframes loading{0%{rotate:0deg}to{rotate:360deg}}@keyframes loading--bar{0%{translate:-100%}to{translate:250%}}}
+@layer components{.loading--bar:before{position:absolute;inset:0 auto 0 0}.loading{--animation-duration:.64s;--border-color:var(--color);--border-width:var(--border-width-400);--color:var(--color-black-400);--size:var(--size-400);--timing-function:cubic-bezier(.5, 0, .5, 1);--track-color:color-mix(in srgb, var(--border-color), transparent 90%)}.loading--bar{--animation-duration:.8s;--height:var(--border-width);--width:100%}.loading--tail{--animation-duration:.8s;--tail:120deg}.loading{animation:loading var(--animation-duration) linear infinite;border:var(--border-width) solid var(--track-color);border-left-color:var(--border-color);height:var(--size);width:var(--size);border-radius:100%}.loading--bar{background:var(--track-color);border-radius:var(--border-width);height:var(--height);width:var(--width);border:0;animation:none;position:relative;overflow:hidden}.loading--bar:before{animation:loading--bar var(--animation-duration) var(--timing-function) infinite;background:var(--border-color);border-radius:inherit;content:"";width:40%}.loading--tail{background:conic-gradient(transparent calc(360deg - var(--tail)), var(--border-color));-webkit-mask:radial-gradient(farthest-side, transparent calc(100% - var(--border-width)), #000 calc(100% - var(--border-width) + .5px));-webkit-mask:radial-gradient(farthest-side, transparent calc(100% - var(--border-width)), #000 calc(100% - var(--border-width) + .5px));mask:radial-gradient(farthest-side, transparent calc(100% - var(--border-width)), #000 calc(100% - var(--border-width) + .5px));border:0;position:relative}.loading--tail:after{background:var(--border-color);content:"";height:var(--border-width);width:var(--border-width);border-radius:100%;position:absolute;top:0;left:50%;translate:-50%}@keyframes loading{to{rotate:360deg}}@keyframes loading--bar{0%{translate:-100%}to{translate:250%}}}
 /*$vite$:1*/

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

@@ -7,14 +7,23 @@ type Item = {
     mark?: () => Renderable<unknown>;
 };
 export default _default;
-declare function _default({ direction, gap, items, label, select, speed, state, ...attributes }: Attributes & {
+declare function _default({ direction, gap, items, label, select, speed, state, velocity, ...attributes }: Attributes & {
     direction?: 'left' | 'right';
     gap?: number;
     items: Item[];
     label?: string;
+    onfocusin?: never;
+    onfocusout?: never;
+    onpointercancel?: never;
+    onpointerdown?: never;
+    onpointerenter?: never;
+    onpointerleave?: never;
+    onpointerup?: never;
+    onwindowblur?: never;
     select?: (item: Item) => void;
     speed?: number;
     state?: {
         paused: boolean;
     };
+    velocity?: boolean;
 }): DocumentFragment | Text;