@esportsplus/ui 0.56.3 → 0.57.0

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

@@ -1,300 +0,0 @@
-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

@@ -1,2 +0,0 @@
-@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 +0,0 @@
-@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

@@ -1,27 +0,0 @@
-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

@@ -1,309 +0,0 @@
-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 });