@esportsplus/ui 0.55.0 → 0.56.3

package/build/components/swipe-deck/index.js

@@ -0,0 +1,300 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import './scss/index.scss';
+const template_0s4b6kr2 = template_u1.template(`<span aria-hidden='true' class='swipe-deck-badge swipe-deck-badge--left  '>`);
+const template_0s4b6kr5 = template_u1.template(`<span aria-hidden='true' class='swipe-deck-badge swipe-deck-badge--right  '>`);
+const template_0s4b6kr8 = template_u1.template(`<span aria-hidden='true' class='swipe-deck-badge   '>`);
+const template_0s4b6krb = template_u1.template(`<div class='swipe-deck-card' role='group'><!--$--><!--$-->`);
+const template_0s4b6krg = template_u1.template(`<div class='swipe-deck'><div aria-description='Left and right arrow keys decide the top card. Backspace brings the last one back.' aria-keyshortcuts='ArrowLeft ArrowRight Backspace Delete' aria-roledescription='card deck' class='swipe-deck-stage' role='group' tabindex='0'><div class='swipe-deck-viewport'><div class='swipe-deck-empty '></div></div></div><div class='swipe-deck-controls'><button class='swipe-deck-control swipe-deck-control--left ' type='button'><svg aria-hidden='true' fill='none' height='12' viewBox='0 0 256 256' width='12'><line stroke='currentColor' stroke-linecap='round' stroke-width='16' x1='200' x2='56' y1='56' y2='200' /><line stroke='currentColor' stroke-linecap='round' stroke-width='16' x1='200' x2='56' y1='200' y2='56' /></svg><span></span></button><span class='swipe-deck-status'><span aria-hidden='true' class='swipe-deck-count'><span class='swipe-deck-count-reserve'></span><span></span></span><span aria-hidden='true'>left</span><button class='swipe-deck-undo ' type='button'><svg aria-hidden='true' fill='none' height='12' viewBox='0 0 256 256' width='12'><polyline points='72 104 24 104 24 56' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' /><path d='M67.6,192.1a88,88,0,1,0,0-128.2L24,104' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' /></svg><span></span></button></span><button class='swipe-deck-control swipe-deck-control--right ' type='button'><span></span><svg aria-hidden='true' fill='none' height='12' viewBox='0 0 256 256' width='12'><polyline points='216 72 104 184 48 128' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' /></svg></button></div><p aria-atomic='true' aria-live='polite' class='swipe-deck-announcer'>`);
+class ReactiveObject_0s4b6kr0 extends reactivity_u0.ReactiveObject {
+    #dir = this[reactivity_u0.SIGNAL](0);
+    #index = this[reactivity_u0.SIGNAL](0);
+    #step = this[reactivity_u0.SIGNAL](0);
+    constructor() {
+        super(null);
+    }
+    get dir() {
+        return reactivity_u0.read(this.#dir);
+    }
+    set dir(_v0) {
+        reactivity_u0.write(this.#dir, _v0);
+    }
+    get index() {
+        return reactivity_u0.read(this.#index);
+    }
+    set index(_v1) {
+        reactivity_u0.write(this.#index, _v1);
+    }
+    get step() {
+        return reactivity_u0.read(this.#step);
+    }
+    set step(_v2) {
+        reactivity_u0.write(this.#step, _v2);
+    }
+}
+const DISTANCE = 560;
+const LOCK = 6;
+const SAMPLE = 100;
+export default ({ emptyLabel = 'Deck cleared', flick = 520, itemLabel, items, label = 'Card deck', leftLabel = 'Skip', onDecide, onUndo, peek = 3, rightLabel = 'Keep', steps = 6, threshold = 92, undoLabel = 'Undo', ...attributes }, content) => {
+    let cards = new reactivity_u0.ReactiveArray(), decisions = [], drag = null, grain = Math.max(1, Math.floor(steps)), reach = Math.max(1, threshold), span = Math.max(1, Math.floor(peek)), state = new ReactiveObject_0s4b6kr0(), total = items.length;
+    function active(card) {
+        return card.depth === 0 && card.phase === 'idle';
+    }
+    function clear() {
+        if (drag) {
+            drag.card.dragging = false;
+            drag.card.x = 0;
+            drag = null;
+        }
+        state.dir = 0;
+        state.step = 0;
+    }
+    function decide(choice) {
+        if (state.index >= total) {
+            return;
+        }
+        let at = state.index, card = find(at);
+        decisions.push(choice);
+        drag = null;
+        state.dir = 0;
+        state.index++;
+        state.step = 0;
+        if (card) {
+            card.dragging = false;
+            card.phase = 'leave';
+            card.x = (choice === 'right' ? 1 : -1) * DISTANCE;
+        }
+        layout();
+        onDecide?.(items[at], choice);
+    }
+    function find(index) {
+        for (let i = 0, n = cards.$length; i < n; i++) {
+            if (cards[i].index === index) {
+                return cards[i];
+            }
+        }
+    }
+    function layout(entry = 0) {
+        let end = Math.min(state.index + span, total);
+        for (let i = 0, n = cards.$length; i < n; i++) {
+            let card = cards[i];
+            if (card.phase === 'idle' && (card.index < state.index || card.index >= end)) {
+                card.phase = 'drop';
+            }
+        }
+        for (let index = state.index; index < end; index++) {
+            let card = find(index);
+            if (card) {
+                card.depth = index - state.index;
+                card.phase = 'idle';
+                card.x = 0;
+                continue;
+            }
+            card = reactivity_u0.reactive({ depth: index - state.index, dragging: false, index, phase: 'idle', x: 0 });
+            if (index === state.index && entry) {
+                card.x = entry * DISTANCE;
+                cards.unshift(card);
+            }
+            else {
+                cards.push(card);
+            }
+        }
+        if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
+            for (let i = cards.$length - 1; i >= 0; i--) {
+                if (cards[i].phase !== 'idle') {
+                    cards.splice(i, 1);
+                }
+            }
+        }
+    }
+    function release(dx, vx) {
+        let far = Math.abs(dx) >= reach, fast = Math.abs(vx) >= flick && Math.abs(dx) >= reach * 0.35;
+        if (!far && !fast) {
+            clear();
+            return;
+        }
+        decide((far ? dx : vx) > 0 ? 'right' : 'left');
+    }
+    function remove(card) {
+        let i = cards.indexOf(card);
+        if (i !== -1) {
+            cards.splice(i, 1);
+        }
+    }
+    function report(dx) {
+        let step = Math.min(grain, Math.round((Math.abs(dx) / reach) * grain));
+        state.dir = step === 0 ? 0 : dx > 0 ? 1 : -1;
+        state.step = step;
+    }
+    function undo() {
+        if (state.index === 0) {
+            return;
+        }
+        let choice = decisions.pop();
+        clear();
+        state.index--;
+        layout(choice === 'right' ? 1 : -1);
+        onUndo?.(items[state.index]);
+    }
+    layout();
+    let badge = (card, side, text) => (side === -1 ? (() => {
+        let root_0s4b6kr1 = template_0s4b6kr2(), element_0s4b6kr3 = root_0s4b6kr1.firstChild;
+        template_u1.setList(element_0s4b6kr3, 'class', () => active(card) && state.dir === side && '--visible');
+        template_u1.setList(element_0s4b6kr3, 'class', () => active(card) && state.dir === side && state.step >= grain && '--active');
+        template_u1.setList(element_0s4b6kr3, 'style', () => `--intent: ${active(card) && state.dir === side ? state.step / grain : 0}`);
+        template_u1.slot(element_0s4b6kr3, text, 1);
+        return root_0s4b6kr1;
+    })() : side === 1 ? (() => {
+        let root_0s4b6kr4 = template_0s4b6kr5(), element_0s4b6kr6 = root_0s4b6kr4.firstChild;
+        template_u1.setList(element_0s4b6kr6, 'class', () => active(card) && state.dir === side && '--visible');
+        template_u1.setList(element_0s4b6kr6, 'class', () => active(card) && state.dir === side && state.step >= grain && '--active');
+        template_u1.setList(element_0s4b6kr6, 'style', () => `--intent: ${active(card) && state.dir === side ? state.step / grain : 0}`);
+        template_u1.slot(element_0s4b6kr6, text, 1);
+        return root_0s4b6kr4;
+    })() : (() => {
+        let root_0s4b6kr7 = template_0s4b6kr8(), element_0s4b6kr9 = root_0s4b6kr7.firstChild;
+        template_u1.setList(element_0s4b6kr9, 'class', template_u1.interpolate(["swipe-deck-badge--", (side === 1 ? 'right' : 'left')]));
+        template_u1.setList(element_0s4b6kr9, 'class', () => active(card) && state.dir === side && '--visible');
+        template_u1.setList(element_0s4b6kr9, 'class', () => active(card) && state.dir === side && state.step >= grain && '--active');
+        template_u1.setList(element_0s4b6kr9, 'style', () => `--intent: ${active(card) && state.dir === side ? state.step / grain : 0}`);
+        template_u1.slot(element_0s4b6kr9, text, 1);
+        return root_0s4b6kr7;
+    })()), render = (card) => {
+        let item = items[card.index];
+        function settle(e) {
+            if (e.target !== this) {
+                return;
+            }
+            if ((card.phase === 'drop' && e.propertyName === 'opacity') ||
+                (card.phase === 'leave' && e.propertyName === '--x')) {
+                remove(card);
+            }
+        }
+        return (() => {
+            let root_0s4b6kra = template_0s4b6krb(), element_0s4b6krc = root_0s4b6kra.firstChild, element_0s4b6krd = element_0s4b6krc.firstChild, element_0s4b6kre = element_0s4b6krd.nextSibling;
+            template_u1.setProperty(element_0s4b6krc, 'aria-label', itemLabel(item));
+            template_u1.setProperty(element_0s4b6krc, 'aria-hidden', () => String(!active(card)));
+            template_u1.setList(element_0s4b6krc, 'class', [
+                () => active(card) && '--active',
+                () => card.dragging && '--dragging',
+                () => card.phase === 'drop' && '--dropping',
+                () => card.phase === 'leave' && '--leaving'
+            ]);
+            template_u1.setProperty(element_0s4b6krc, 'inert', () => !active(card));
+            template_u1.onconnect(element_0s4b6krc, (element) => {
+                if (card.x === 0 || card.phase !== 'idle') {
+                    return;
+                }
+                element.getBoundingClientRect();
+                card.x = 0;
+            });
+            template_u1.delegate(element_0s4b6krc, 'pointercancel', () => {
+                if (drag?.card === card) {
+                    clear();
+                }
+            });
+            template_u1.delegate(element_0s4b6krc, 'pointerdown', (e) => {
+                if (!active(card) || e.button !== 0) {
+                    return;
+                }
+                drag = { card, locked: false, pointer: e.pointerId, samples: [[e.timeStamp, 0]], x: e.clientX, y: e.clientY };
+            });
+            template_u1.delegate(element_0s4b6krc, 'pointermove', function (e) {
+                if (drag?.card !== card || drag.pointer !== e.pointerId) {
+                    return;
+                }
+                let dx = e.clientX - drag.x, dy = e.clientY - drag.y;
+                if (!drag.locked) {
+                    if (Math.hypot(dx, dy) < LOCK) {
+                        return;
+                    }
+                    if (Math.abs(dy) > Math.abs(dx)) {
+                        drag = null;
+                        return;
+                    }
+                    card.dragging = true;
+                    drag.locked = true;
+                    this.setPointerCapture(e.pointerId);
+                }
+                drag.samples.push([e.timeStamp, dx]);
+                while (drag.samples.length > 2 && e.timeStamp - drag.samples[0][0] > SAMPLE) {
+                    drag.samples.shift();
+                }
+                card.x = dx;
+                report(dx);
+            });
+            template_u1.delegate(element_0s4b6krc, 'pointerup', (e) => {
+                if (drag?.card !== card || drag.pointer !== e.pointerId) {
+                    return;
+                }
+                if (!drag.locked) {
+                    drag = null;
+                    return;
+                }
+                let [time, x] = drag.samples[0], dx = e.clientX - drag.x, elapsed = e.timeStamp - time;
+                release(dx, elapsed > 0 ? ((dx - x) / elapsed) * 1000 : 0);
+            });
+            template_u1.delegate(element_0s4b6krc, 'transitioncancel', settle);
+            template_u1.delegate(element_0s4b6krc, 'transitionend', settle);
+            template_u1.setList(element_0s4b6krc, 'style', () => {
+                let depth = card.depth === 1 ? 1 - state.step / grain : card.depth;
+                return `--depth: ${depth}; --x: ${card.x}; z-index: ${card.phase === 'leave' ? 12 : 10 - card.depth};`;
+            });
+            template_u1.slot(element_0s4b6krd, content(item));
+            template_u1.slot(element_0s4b6kre, badge(card, -1, leftLabel));
+            template_u1.slot(element_0s4b6krc, badge(card, 1, rightLabel), 2);
+            return root_0s4b6kra;
+        })();
+    };
+    return (() => {
+        let root_0s4b6krf = template_0s4b6krg(), element_0s4b6krh = root_0s4b6krf.firstChild, element_0s4b6kri = element_0s4b6krh.firstElementChild, element_0s4b6krj = element_0s4b6kri.firstElementChild.firstElementChild, element_0s4b6krk = element_0s4b6kri.firstElementChild, element_0s4b6krl = element_0s4b6kri.nextElementSibling.firstElementChild, element_0s4b6krm = element_0s4b6krl.firstElementChild.nextElementSibling, element_0s4b6krn = element_0s4b6krl.nextElementSibling.firstElementChild.firstElementChild, element_0s4b6kro = element_0s4b6krn.nextElementSibling, element_0s4b6krp = element_0s4b6krl.nextElementSibling.firstElementChild.nextElementSibling.nextElementSibling, element_0s4b6krq = element_0s4b6krp.firstElementChild.nextElementSibling, element_0s4b6krr = element_0s4b6krl.nextElementSibling.nextElementSibling, element_0s4b6krs = element_0s4b6krr.firstElementChild, element_0s4b6krt = element_0s4b6kri.nextElementSibling.nextElementSibling;
+        template_u1.setProperties(element_0s4b6krh, attributes);
+        template_u1.setProperty(element_0s4b6kri, 'aria-label', label);
+        template_u1.ondocument(element_0s4b6kri, 'visibilitychange', () => {
+            if (document.hidden) {
+                clear();
+            }
+        });
+        template_u1.delegate(element_0s4b6kri, 'keydown', function (e) {
+            if (e.target !== this) {
+                return;
+            }
+            if (e.key === 'ArrowLeft') {
+                e.preventDefault();
+                decide('left');
+            }
+            else if (e.key === 'ArrowRight') {
+                e.preventDefault();
+                decide('right');
+            }
+            else if (e.key === 'Backspace' || e.key === 'Delete') {
+                e.preventDefault();
+                undo();
+            }
+            else if (e.key === 'Escape') {
+                clear();
+            }
+        });
+        template_u1.onwindow(element_0s4b6kri, 'blur', clear);
+        template_u1.setList(element_0s4b6krj, 'class', () => state.index >= total && '--active');
+        template_u1.setProperty(element_0s4b6krj, 'aria-hidden', () => String(state.index < total));
+        template_u1.slot(element_0s4b6krj, emptyLabel, 1);
+        element_0s4b6krk.appendChild(new template_u1.ArraySlot(cards, render).fragment);
+        template_u1.setList(element_0s4b6krl, 'class', () => state.index >= total && '--spent');
+        template_u1.delegate(element_0s4b6krl, 'click', () => decide('left'));
+        template_u1.setProperty(element_0s4b6krl, 'inert', () => state.index >= total);
+        template_u1.slot(element_0s4b6krm, leftLabel, 1);
+        template_u1.slot(element_0s4b6krn, total, 1);
+        new template_u1.EffectSlot(element_0s4b6kro, () => total - state.index, 1);
+        template_u1.setList(element_0s4b6krp, 'class', () => state.index === 0 && '--spent');
+        template_u1.delegate(element_0s4b6krp, 'click', undo);
+        template_u1.setProperty(element_0s4b6krp, 'inert', () => state.index === 0);
+        template_u1.slot(element_0s4b6krq, undoLabel, 1);
+        template_u1.setList(element_0s4b6krr, 'class', () => state.index >= total && '--spent');
+        template_u1.delegate(element_0s4b6krr, 'click', () => decide('right'));
+        template_u1.setProperty(element_0s4b6krr, 'inert', () => state.index >= total);
+        template_u1.slot(element_0s4b6krs, rightLabel, 1);
+        new template_u1.EffectSlot(element_0s4b6krt, () => state.index >= total ? emptyLabel : `${itemLabel(items[state.index])}. Card ${state.index + 1} of ${total}.`, 1);
+        return root_0s4b6krf;
+    })();
+};

package/build/components/swipe-deck/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.swipe-deck{--accent:var(--color-blue-400);--background:var(--color-white-400);--border-color:var(--color-border-300);--border-radius:14px;--box-shadow:0 1px 2px oklch(from var(--color-black-300) l c h / .05), 0 6px 14px -12px oklch(from var(--color-black-300) l c h / .4);--box-shadow-active:0 1px 2px oklch(from var(--color-black-300) l c h / .06), 0 16px 32px -18px oklch(from var(--color-black-300) l c h / .55);--color:var(--color-text-400);--color-muted:var(--color-text-300);--drag-scale:1.03;--empty-background:var(--color-grey-400);--height:180px;--inset:20px;--offset:10px;--shrink:.045;--spring-cell:.387s linear(0, .104, .286, .465, .606, .714, .793, .852, .895, .925, .946, .962, .973, .981, .986, .99, .993, .995, .996, .997, .998, .999, .999, .999, 1);--spring-crossfade:.73s linear(0, .102, .279, .444, .582, .688, .769, .829, .874, .906, .931, .949, .962, .972, .979, .985, .989, .992, .994, .995, .997, .998, .998, .999, 1);--spring-settle:.673s linear(0, .076, .226, .383, .524, .641, .732, .802, .854, .893, .922, .943, .959, .97, .978, .984, .989, .992, .994, .996, .997, .998, .998, .999, 1)}@property --depth{syntax:"<number>";inherits:false;initial-value:0}@property --lift{syntax:"<number>";inherits:false;initial-value:1}@property --x{syntax:"<number>";inherits:false;initial-value:0}.swipe-deck{width:100%}.swipe-deck-announcer{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.swipe-deck-badge{background:var(--background);border:1px solid var(--color-border-400);color:var(--color);font-size:var(--font-size-200);font-weight:var(--font-weight-500);letter-spacing:.08em;opacity:var(--intent);pointer-events:none;text-transform:uppercase;transition:border-color .15s, color .15s, opacity var(--spring-cell), scale var(--spring-cell);white-space:nowrap;border-radius:6px;padding:4px 8px;position:absolute;top:12px;scale:.94}.swipe-deck-badge--left{left:12px}.swipe-deck-badge--right{right:12px}.swipe-deck-badge.--active{border-color:var(--accent);color:var(--accent)}.swipe-deck-badge.--visible{scale:1}.swipe-deck-card{background:var(--background);border:1px solid var(--border-color);border-radius:var(--border-radius);box-shadow:var(--box-shadow);color:var(--color);height:var(--height);inset-inline:var(--inset);opacity:clamp(0, (340 - max(var(--x), -1 * var(--x))) / 190, 1);rotate:calc(var(--x) * .04deg);scale:calc((1 - var(--depth) * var(--shrink)) * var(--lift));touch-action:pan-y;transform-origin:50% 100%;transition:--depth var(--spring-crossfade), --lift var(--spring-cell), --x var(--spring-settle);translate:calc(var(--x) * 1px) calc(var(--depth) * var(--offset));-webkit-user-select:none;user-select:none;position:absolute;top:0;overflow:hidden}.swipe-deck-card.--active{box-shadow:var(--box-shadow-active);cursor:grab;transition:--depth var(--spring-crossfade) .1s, --lift var(--spring-cell), --x var(--spring-settle)}.swipe-deck-card.--dragging{--lift:var(--drag-scale);cursor:grabbing;transition:--depth var(--spring-crossfade), --lift var(--spring-cell)}.swipe-deck-card.--dropping{opacity:0;transition:--depth var(--spring-crossfade), opacity var(--spring-crossfade)}.swipe-deck-card.--leaving{border-color:#0000;transition:--x .3s cubic-bezier(.4,0,1,1),border-color .1s linear}.swipe-deck-control{background:var(--background);border:1px solid var(--border-color);font-size:var(--font-size-300);font-weight:var(--font-weight-500);border-radius:9px;gap:6px;height:32px;padding-inline:10px}.swipe-deck-control--left{justify-self:start}.swipe-deck-control--right{justify-self:end}.swipe-deck-control:focus-visible{border-color:var(--accent)}.swipe-deck-control:hover{background:var(--empty-background)}.swipe-deck-control,.swipe-deck-undo{color:var(--color);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);outline:none;align-items:center;display:inline-flex}.swipe-deck-control.--spent,.swipe-deck-undo.--spent{opacity:0}.swipe-deck-controls{grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;height:32px;margin-top:12px;display:grid}.swipe-deck-count{justify-items:end;display:inline-grid}.swipe-deck-count-reserve{visibility:hidden}.swipe-deck-count>span{grid-area:1/1}.swipe-deck-empty{background:var(--empty-background);border-radius:var(--border-radius);box-shadow:inset 0 1px 2px oklch(from var(--color-black-300) l c h/.07);color:var(--color-muted);font-size:var(--font-size-300);height:var(--height);inset-inline:var(--inset);opacity:0;text-align:center;transition:opacity var(--spring-crossfade);z-index:0;place-items:center;padding-inline:16px;display:grid;position:absolute;top:0}.swipe-deck-empty.--active{opacity:1}.swipe-deck-stage{border-radius:var(--border-radius);height:calc(var(--height) + 26px);outline:none;width:100%;position:relative;overflow:hidden}.swipe-deck-stage:focus-visible{box-shadow:0 0 0 1px var(--accent)}.swipe-deck-status{color:var(--color-muted);font-family:ui-monospace,monospace;font-size:var(--font-size-200);font-variant-numeric:tabular-nums;align-items:center;gap:8px;display:flex}.swipe-deck-undo{border-radius:5px;gap:4px;padding:2px 4px}.swipe-deck-undo:focus-visible{background:oklch(from var(--accent) l c h/.06);box-shadow:inset 0 0 0 1px var(--accent)}.swipe-deck-undo:hover{background:var(--empty-background)}.swipe-deck-viewport{position:absolute;inset:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000,#000 20px calc(100% - 20px),#0000);mask-image:linear-gradient(90deg,#0000,#000 20px calc(100% - 20px),#0000)}@media (prefers-reduced-motion:reduce){.swipe-deck-badge,.swipe-deck-card,.swipe-deck-card.--active,.swipe-deck-card.--dragging,.swipe-deck-card.--dropping,.swipe-deck-card.--leaving,.swipe-deck-empty{transition:none}}}
+/*$vite$:1*/

package/build/components/tabs/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.tabs{--i:0;--opacity:.4;min-width:0}.tabs-content{cursor:default;flex-wrap:wrap;justify-content:flex-start;width:100%;min-width:100%;max-width:100%;display:none;position:relative}.tabs-content.--active{display:flex}.tabs--slide,.tabs--scroll{gap:var(--gap-vertical) var(--gap-horizontal);transition:transform var(--transition-duration) var(--transition-timing-function);display:flex}.tabs--slide>.tabs-content,.tabs--scroll>.tabs-content{flex-shrink:0;display:flex}.tabs--slide>.tabs-content:not(.--active),.tabs--scroll>.tabs-content:not(.--active){opacity:var(--opacity);pointer-events:none}.tabs--slide{transform:translateX(calc(var(--i) * (100% + var(--gap-horizontal))))}.tabs--scroll{height:100%;transform:translateY(calc(var(--i) * (100% + var(--gap-vertical))));flex-direction:column}.tabs--scroll>.tabs-content{flex-basis:100%;min-height:100%}@media (prefers-reduced-motion:reduce){.tabs--slide,.tabs--scroll{transition:none}}}
+@layer components {.tabs{--i:0;--opacity:.4;min-width:0}.tabs-content{cursor:default;flex-wrap:wrap;justify-content:flex-start;width:100%;min-width:100%;max-width:100%;display:none;position:relative}.tabs-content.--active{display:flex}.tabs--slide,.tabs--scroll{gap:var(--gap-vertical) var(--gap-horizontal);transition:translate var(--transition-duration) var(--transition-timing-function);display:flex}.tabs--slide>.tabs-content,.tabs--scroll>.tabs-content{flex-shrink:0;display:flex}.tabs--slide>.tabs-content:not(.--active),.tabs--scroll>.tabs-content:not(.--active){opacity:var(--opacity);pointer-events:none}.tabs--slide{translate:calc(var(--i) * (100% + var(--gap-horizontal)))}.tabs--scroll{height:100%;translate:0 calc(var(--i) * (100% + var(--gap-vertical)));flex-direction:column}.tabs--scroll>.tabs-content{flex-basis:100%;min-height:100%}@media (prefers-reduced-motion:reduce){.tabs--slide,.tabs--scroll{transition:none}}}
 /*$vite$:1*/

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

@@ -0,0 +1,27 @@
+import { type Attributes, type Renderable } from '@esportsplus/template';
+import { type Reactive } from '@esportsplus/reactivity';
+import input from '../input/index.js';
+import './scss/index.scss';
+type A = Attributes & {
+    [TAG_INPUT_FIELD]?: Field;
+    hint?: Renderable<unknown>;
+    label: string;
+    name?: string;
+    placeholder?: string;
+    state?: State;
+    tags?: string[];
+};
+type D = Attributes & Pick<A, typeof TAG_INPUT_FIELD>;
+type Field = Parameters<typeof input>[0];
+type State = {
+    active: boolean;
+    error: string;
+    tags: Reactive<string[]>;
+};
+declare const TAG_INPUT_FIELD: unique symbol;
+declare const _default: ((this: {
+    attributes?: D;
+} | void, { hint, label, name, placeholder, tags, state, ...attributes }: A) => DocumentFragment | Text) & {
+    readonly field: typeof TAG_INPUT_FIELD;
+};
+export default _default;

package/build/components/tag-input/index.js

@@ -0,0 +1,309 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { ReactiveArray } from '@esportsplus/reactivity';
+import input from '../input/index.js';
+import './scss/index.scss';
+const template_0a9saz23 = template_u1.template(`<li class='tag-input-chip '><span aria-hidden='true' class='tag-input-chip-body'></span><span class='tag-input-chip-text'></span><span class='tag-input-chip-remove'><button class='tag-input-chip-button' 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' />`);
+const template_0a9saz28 = template_u1.template(`<input type='hidden' />`);
+const template_0a9saz2b = template_u1.template(`<div class='tag-input'><label class='tag-input-label'></label><div class='tag-input-box'><ul class='tag-input-list'><!--$--><li class='tag-input-entry' role='none'></li></ul></div><!--$--><span aria-live='polite' class='tag-input-live'>`);
+const template_0a9saz2l = template_u1.template(`<p class='tag-input-hint'>`);
+class ReactiveObject_0a9saz20 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_0a9saz21 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 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 SLIDE = {
+    duration: 410,
+    easing: 'linear(0, 0.038, 0.116, 0.219, 0.326, 0.43, 0.518, 0.602, 0.674, 0.731, 0.782, 0.825, 0.858, 0.886, 0.91, 0.928, 0.942, 0.955, 0.964, 0.971, 0.977, 0.982, 0.986, 0.989, 0.991, 0.993, 0.995, 0.996, 0.997, 0.997, 1)'
+};
+const SWAP = { ...SLIDE, delay: 60, duration: 300, fill: 'backwards' };
+const TAG_INPUT_FIELD = Symbol.for('@esportsplus/ui/tag-input.field');
+let uid = 0;
+function key(tag) {
+    return tag.toLowerCase();
+}
+export default Object.assign(function ({ hint, label, name, placeholder = 'Add a tag', tags = [], state = new ReactiveObject_0a9saz20(new ReactiveArray(tags)), ...attributes }) {
+    let flips = new Map(), id = `tag-input-${++uid}`, list, local = new ReactiveObject_0a9saz21(), reduced = matchMedia('(prefers-reduced-motion: reduce)'), shakes = new Map(), slot = new template_u1.ArraySlot(state.tags, (tag) => {
+        let root_0a9saz22 = template_0a9saz23(), element_0a9saz24 = root_0a9saz22.firstChild, element_0a9saz25 = element_0a9saz24.firstElementChild.nextElementSibling, element_0a9saz26 = element_0a9saz25.nextElementSibling.firstElementChild;
+        template_u1.setList(element_0a9saz24, 'class', () => local.armed === key(tag) && '--active');
+        template_u1.setProperty(element_0a9saz24, 'data-key', key(tag));
+        template_u1.slot(element_0a9saz25, tag, 1);
+        template_u1.setProperty(element_0a9saz26, 'aria-label', template_u1.interpolate(["Remove ", (tag)]));
+        template_u1.delegate(element_0a9saz26, 'click', () => {
+            remove(key(tag));
+            field()?.focus();
+        });
+        template_u1.delegate(element_0a9saz26, 'pointerdown', (e) => {
+            e.preventDefault();
+        });
+        template_u1.slot(element_0a9saz24, name ? (() => {
+            let root_0a9saz27 = template_0a9saz28(), element_0a9saz29 = root_0a9saz27.firstChild;
+            template_u1.setProperty(element_0a9saz29, 'name', template_u1.interpolate([(name), "[]"]));
+            template_u1.setProperty(element_0a9saz29, 'value', tag);
+            return root_0a9saz27;
+        })() : '', 2);
+        return root_0a9saz22;
+    });
+    function add(raw, typed) {
+        let added = [], seen = new Set(state.tags.map(key));
+        for (let i = 0, n = raw.length; i < n; i++) {
+            let tag = raw[i].trim();
+            if (!tag) {
+                continue;
+            }
+            if (seen.has(key(tag))) {
+                let existing = state.tags.find((t) => key(t) === key(tag)) ?? tag;
+                nudge(key(tag));
+                local.announcement = `${existing} is already added`;
+                continue;
+            }
+            seen.add(key(tag));
+            added.push(tag);
+        }
+        let input = field();
+        if (input) {
+            input.value = '';
+        }
+        local.armed = '';
+        if (!added.length) {
+            return;
+        }
+        let formed = typed && added.length === 1 ? key(added[0]) : '';
+        mutate(() => state.tags.push(...added), (chip) => {
+            if (chip.dataset.key === formed) {
+                form(chip);
+            }
+            else {
+                pop(chip);
+            }
+        });
+        local.announcement = `Added ${added.join(', ')}`;
+    }
+    function chip(k) {
+        let children = list?.children ?? [];
+        for (let i = 0, n = children.length; i < n; i++) {
+            let child = children[i];
+            if (child.dataset.key === k && !child.classList.contains('tag-input-ghost')) {
+                return child;
+            }
+        }
+        return undefined;
+    }
+    function field() {
+        return list?.querySelector('.tag-input-field');
+    }
+    function form(chip) {
+        let body = chip.querySelector('.tag-input-chip-body'), remove = chip.querySelector('.tag-input-chip-remove');
+        if (reduced.matches) {
+            body?.animate({ opacity: [0, 1] }, POP);
+            remove?.animate({ opacity: [0, 1] }, SWAP);
+            return;
+        }
+        body?.animate({ opacity: [0, 1], scale: [0.9, 1] }, POP);
+        remove?.animate({ filter: ['blur(4px)', 'blur(0)'], opacity: [0, 1], scale: [0.25, 1] }, SWAP);
+    }
+    function mutate(change, enter) {
+        if (!list) {
+            change();
+            return;
+        }
+        let before = new Map(), children = list.children;
+        for (let i = 0, n = children.length; i < n; i++) {
+            before.set(children[i], children[i].getBoundingClientRect());
+        }
+        change();
+        slot.flush();
+        for (let [element, animation] of flips) {
+            animation.cancel();
+            flips.delete(element);
+        }
+        for (let i = 0, n = children.length; i < n; i++) {
+            let child = children[i];
+            if (child.classList.contains('tag-input-ghost')) {
+                continue;
+            }
+            let first = before.get(child);
+            if (!first) {
+                enter?.(child);
+                continue;
+            }
+            if (reduced.matches) {
+                continue;
+            }
+            let last = child.getBoundingClientRect(), dx = first.left - last.left, dy = first.top - last.top;
+            if (!dx && !dy) {
+                continue;
+            }
+            let animation = child.animate({ transform: [`translate(${dx}px, ${dy}px)`, 'none'] }, SLIDE);
+            animation.onfinish = () => flips.delete(child);
+            flips.set(child, animation);
+        }
+    }
+    function nudge(k) {
+        let element = chip(k);
+        if (!element) {
+            return;
+        }
+        shakes.get(element)?.cancel();
+        shakes.set(element, reduced.matches
+            ? element.animate({ opacity: [1, 0.4, 1] }, SHAKE)
+            : element.animate({ translate: ['0', '-4px', '4px', '-3px', '2px', '0'] }, SHAKE));
+    }
+    function pop(chip) {
+        if (reduced.matches) {
+            chip.animate({ opacity: [0, 1] }, POP);
+            return;
+        }
+        chip.animate({ filter: ['blur(4px)', 'blur(0)'], opacity: [0, 1], scale: [0.9, 1] }, POP);
+    }
+    function remove(k) {
+        let index = state.tags.findIndex((t) => key(t) === k);
+        if (index === -1) {
+            return;
+        }
+        let element = chip(k), tag = state.tags[index];
+        if (element && list) {
+            let ghost = element.cloneNode(true), origin = list.getBoundingClientRect(), rect = element.getBoundingClientRect();
+            ghost.classList.add('tag-input-ghost');
+            ghost.classList.remove('--active');
+            ghost.inert = true;
+            ghost.removeAttribute('data-key');
+            ghost.style.cssText = `height: ${rect.height}px; left: ${rect.left - origin.left}px; top: ${rect.top - origin.top}px; width: ${rect.width}px;`;
+            list.append(ghost);
+            ghost.animate(reduced.matches
+                ? { opacity: [1, 0] }
+                : { filter: ['blur(0)', 'blur(2px)'], opacity: [1, 0], scale: [1, 0.9] }, { ...LEAVE, fill: 'forwards' }).onfinish = () => ghost.remove();
+        }
+        mutate(() => state.tags.splice(index, 1));
+        local.announcement = `Removed ${tag}`;
+        local.armed = '';
+    }
+    return (() => {
+        let root_0a9saz2a = template_0a9saz2b(), element_0a9saz2c = root_0a9saz2a.firstChild, element_0a9saz2d = element_0a9saz2c.firstElementChild, element_0a9saz2e = element_0a9saz2d.nextElementSibling, element_0a9saz2f = element_0a9saz2e.firstElementChild, element_0a9saz2g = element_0a9saz2f.firstChild, element_0a9saz2h = element_0a9saz2f.firstElementChild, element_0a9saz2i = element_0a9saz2c.firstChild.nextSibling.nextSibling, element_0a9saz2j = element_0a9saz2e.nextElementSibling;
+        template_u1.setProperties(element_0a9saz2c, this?.attributes);
+        template_u1.setProperties(element_0a9saz2c, attributes);
+        template_u1.ondisconnect(element_0a9saz2c, () => {
+            for (let [, animation] of shakes) {
+                animation.cancel();
+            }
+            shakes.clear();
+        });
+        template_u1.setProperty(element_0a9saz2d, 'for', id);
+        template_u1.slot(element_0a9saz2d, label, 1);
+        template_u1.delegate(element_0a9saz2e, 'pointerdown', (e) => {
+            let target = e.target;
+            if (target !== e.currentTarget && target !== list) {
+                return;
+            }
+            e.preventDefault();
+            field()?.focus();
+        });
+        template_u1.setProperty(element_0a9saz2f, 'aria-label', () => `${label}, ${slot.length} added`);
+        template_u1.onrender(element_0a9saz2f, (element) => {
+            list = element;
+        });
+        template_u1.slot(element_0a9saz2g, slot);
+        template_u1.slot(element_0a9saz2h, input.call({ attributes: { ...this?.attributes?.[TAG_INPUT_FIELD], ...attributes[TAG_INPUT_FIELD] } }, {
+            autocomplete: 'off',
+            class: 'tag-input-field',
+            enterkeyhint: 'enter',
+            id,
+            onblur: () => {
+                local.armed = '';
+            },
+            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 (!/[,\n]/.test(text)) {
+                    return;
+                }
+                e.preventDefault();
+                add((e.currentTarget.value + text).split(/[,\n]/), false);
+            },
+            placeholder,
+            state
+        }), 1);
+        template_u1.slot(element_0a9saz2i, hint ? (() => {
+            let root_0a9saz2k = template_0a9saz2l(), element_0a9saz2m = root_0a9saz2k.firstChild;
+            template_u1.slot(element_0a9saz2m, hint, 1);
+            return root_0a9saz2k;
+        })() : '');
+        new template_u1.EffectSlot(element_0a9saz2j, () => local.announcement, 1);
+        return root_0a9saz2a;
+    })();
+}, { field: TAG_INPUT_FIELD });