@esportsplus/ui 0.54.0 → 0.56.2

package/build/components/snap-carousel/index.js

@@ -0,0 +1,233 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import './scss/index.scss';
+const template_0qdl3e23 = template_u1.template(`<button class='snap-carousel-arrow ' type='button'><svg aria-hidden='true' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 16 16'><path />`);
+const template_0qdl3e27 = template_u1.template(`<div class='snap-carousel '><div class='snap-carousel-viewport'><div aria-roledescription='carousel' class='snap-carousel-track' role='region' tabindex='0'></div></div><div class='snap-carousel-controls'><!--$-->`);
+const template_0qdl3e2d = template_u1.template(`<div aria-roledescription='slide' class='snap-carousel-slide ' role='group'><div class='snap-carousel-card'><!--$--><p class='snap-carousel-title'></p><p class='snap-carousel-text'>`);
+const template_0qdl3e2k = template_u1.template(`<div aria-hidden='true' class='snap-carousel-visual'>`);
+class ReactiveObject_0qdl3e20 extends reactivity_u0.ReactiveObject {
+    #active = this[reactivity_u0.SIGNAL](0);
+    #end = this[reactivity_u0.SIGNAL](false);
+    #start = this[reactivity_u0.SIGNAL](true);
+    constructor() {
+        super(null);
+    }
+    get active() {
+        return reactivity_u0.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_u0.write(this.#active, _v0);
+    }
+    get end() {
+        return reactivity_u0.read(this.#end);
+    }
+    set end(_v1) {
+        reactivity_u0.write(this.#end, _v1);
+    }
+    get start() {
+        return reactivity_u0.read(this.#start);
+    }
+    set start(_v2) {
+        reactivity_u0.write(this.#start, _v2);
+    }
+}
+class ReactiveObject_0qdl3e21 extends reactivity_u0.ReactiveObject {
+    #visible = this[reactivity_u0.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get visible() {
+        return reactivity_u0.read(this.#visible);
+    }
+    set visible(_v0) {
+        reactivity_u0.write(this.#visible, _v0);
+    }
+}
+const SNAP_CAROUSEL_ARROW = Symbol.for('@esportsplus/ui/snap-carousel.arrow');
+const SNAP_CAROUSEL_CARD = Symbol.for('@esportsplus/ui/snap-carousel.card');
+const COAST = 280;
+const FLICK = 0.3;
+const NEXT = 'M6 3.5 10.5 8 6 12.5';
+const PREVIOUS = 'M10 3.5 5.5 8l4.5 4.5';
+const SAMPLES = 80;
+const SETTLE = 700;
+const SLOP = 4;
+function behavior() {
+    return matchMedia('(prefers-reduced-motion: reduce)').matches ? 'instant' : 'smooth';
+}
+function nearest(targets, position) {
+    let best = 0;
+    for (let i = 1, n = targets.length; i < n; i++) {
+        if (Math.abs(targets[i] - position) < Math.abs(targets[best] - position)) {
+            best = i;
+        }
+    }
+    return best;
+}
+function targets(track) {
+    let max = track.scrollWidth - track.clientWidth;
+    return Array.from(track.children, (slide) => Math.min(max, Math.max(0, slide.offsetLeft + slide.offsetWidth / 2 - track.clientWidth / 2)));
+}
+function template({ label = 'Carousel', slides, state = new ReactiveObject_0qdl3e20(), ...attributes }) {
+    let bound = this?.attributes, centered, drag = null, onscreen, resize, settle = null, suppress = false, track = null, view = new ReactiveObject_0qdl3e21();
+    function arrow(direction) {
+        let disabled = () => direction === -1 ? state.start : state.end;
+        return (() => {
+            let root_0qdl3e22 = template_0qdl3e23(), element_0qdl3e24 = root_0qdl3e22.firstChild, element_0qdl3e25 = element_0qdl3e24.firstElementChild.firstElementChild;
+            template_u1.setProperty(element_0qdl3e24, 'aria-disabled', () => String(disabled()));
+            template_u1.setProperty(element_0qdl3e24, 'aria-label', direction === -1 ? 'Previous card' : 'Next card');
+            template_u1.setList(element_0qdl3e24, 'class', () => disabled() && '--disabled');
+            template_u1.setProperties(element_0qdl3e24, bound?.[SNAP_CAROUSEL_ARROW]);
+            template_u1.setProperties(element_0qdl3e24, attributes[SNAP_CAROUSEL_ARROW]);
+            template_u1.delegate(element_0qdl3e24, 'click', () => {
+                if (!disabled()) {
+                    step(direction);
+                }
+            });
+            template_u1.setProperty(element_0qdl3e25, 'd', direction === -1 ? PREVIOUS : NEXT);
+            return root_0qdl3e22;
+        })();
+    }
+    function release(e) {
+        if (!drag || drag.id !== e.pointerId || !track) {
+            return;
+        }
+        let { samples, startScroll } = drag, element = track, first = samples[0], last = samples[samples.length - 1], velocity = e.type === 'pointerup' && e.timeStamp - last.t < SAMPLES && last.t > first.t
+            ? -(last.x - first.x) / (last.t - first.t)
+            : 0;
+        drag = null;
+        element.classList.remove('--dragging');
+        let points = targets(element), from = nearest(points, startScroll), index = nearest(points, element.scrollLeft + velocity * COAST);
+        if (index === from && Math.abs(velocity) > FLICK) {
+            index = Math.min(points.length - 1, Math.max(0, from + Math.sign(velocity)));
+        }
+        element.scrollTo({ behavior: behavior(), left: points[index] });
+        let fallback = setTimeout(restore, SETTLE);
+        function restore() {
+            settle = null;
+            clearTimeout(fallback);
+            element.removeEventListener('scrollend', restore);
+            element.style.scrollBehavior = '';
+            element.style.scrollSnapType = '';
+        }
+        element.addEventListener('scrollend', restore);
+        settle = restore;
+    }
+    function step(direction) {
+        if (!track || !track.firstElementChild) {
+            return;
+        }
+        track.scrollBy({
+            behavior: behavior(),
+            left: direction * (track.firstElementChild.offsetWidth + parseFloat(getComputedStyle(track).columnGap || '0'))
+        });
+    }
+    function sync() {
+        if (!track) {
+            return;
+        }
+        state.end = track.scrollLeft >= track.scrollWidth - track.clientWidth - 1;
+        state.start = track.scrollLeft <= 1;
+    }
+    return (() => {
+        let root_0qdl3e26 = template_0qdl3e27(), element_0qdl3e28 = root_0qdl3e26.firstChild, element_0qdl3e29 = element_0qdl3e28.firstElementChild.firstElementChild, element_0qdl3e2a = element_0qdl3e28.firstElementChild.nextElementSibling.firstChild, element_0qdl3e2b = element_0qdl3e28.firstElementChild.nextElementSibling;
+        template_u1.setList(element_0qdl3e28, 'class', () => view.visible && '--visible');
+        template_u1.setProperties(element_0qdl3e28, bound);
+        template_u1.setProperties(element_0qdl3e28, attributes);
+        template_u1.onconnect(element_0qdl3e28, (element) => {
+            centered = new IntersectionObserver((entries) => {
+                for (let entry of entries) {
+                    let index = Array.prototype.indexOf.call(track.children, entry.target);
+                    if (entry.intersectionRatio >= 0.9) {
+                        state.active = index;
+                    }
+                    else if (state.active === index) {
+                        state.active = -1;
+                    }
+                }
+            }, { root: track, threshold: [0, 0.9] });
+            onscreen = new IntersectionObserver((entries) => {
+                view.visible = entries[entries.length - 1].isIntersecting;
+            });
+            resize = new ResizeObserver(sync);
+            for (let slide of track.children) {
+                centered.observe(slide);
+            }
+            onscreen.observe(element);
+            resize.observe(track);
+        });
+        template_u1.ondisconnect(element_0qdl3e28, () => {
+            centered?.disconnect();
+            onscreen?.disconnect();
+            resize?.disconnect();
+            settle?.();
+        });
+        template_u1.setProperty(element_0qdl3e29, 'aria-label', label);
+        template_u1.delegate(element_0qdl3e29, 'click', (e) => {
+            if (!suppress) {
+                return;
+            }
+            suppress = false;
+            e.preventDefault();
+        });
+        template_u1.delegate(element_0qdl3e29, 'dragstart', (e) => {
+            e.preventDefault();
+        });
+        template_u1.delegate(element_0qdl3e29, 'pointercancel', release);
+        template_u1.delegate(element_0qdl3e29, 'pointerdown', (e) => {
+            if (e.pointerType !== 'mouse' || e.button !== 0 || !track) {
+                return;
+            }
+            settle?.();
+            track.setPointerCapture(e.pointerId);
+            track.style.scrollBehavior = 'auto';
+            track.style.scrollSnapType = 'none';
+            track.classList.add('--dragging');
+            drag = {
+                id: e.pointerId,
+                samples: [{ t: e.timeStamp, x: e.clientX }],
+                startScroll: track.scrollLeft,
+                startX: e.clientX
+            };
+            suppress = false;
+        });
+        template_u1.delegate(element_0qdl3e29, 'pointermove', (e) => {
+            if (!drag || drag.id !== e.pointerId || !track) {
+                return;
+            }
+            let dx = e.clientX - drag.startX;
+            if (Math.abs(dx) > SLOP) {
+                suppress = true;
+            }
+            track.scrollLeft = drag.startScroll - dx;
+            drag.samples.push({ t: e.timeStamp, x: e.clientX });
+            while (drag.samples.length > 2 && e.timeStamp - drag.samples[0].t > SAMPLES) {
+                drag.samples.shift();
+            }
+        });
+        template_u1.delegate(element_0qdl3e29, 'pointerup', release);
+        template_u1.onrender(element_0qdl3e29, (element) => {
+            track = element;
+        });
+        template_u1.on(element_0qdl3e29, 'scroll', sync);
+        template_u1.slot(element_0qdl3e29, slides.map((slide, i) => {
+            let root_0qdl3e2c = template_0qdl3e2d(), element_0qdl3e2e = root_0qdl3e2c.firstChild, element_0qdl3e2f = element_0qdl3e2e.firstElementChild, element_0qdl3e2g = element_0qdl3e2f.firstChild, element_0qdl3e2h = element_0qdl3e2f.firstElementChild, element_0qdl3e2i = element_0qdl3e2h.nextElementSibling;
+            template_u1.setProperty(element_0qdl3e2e, 'aria-label', `${i + 1} of ${slides.length}`);
+            template_u1.setList(element_0qdl3e2e, 'class', () => state.active === i && '--active');
+            template_u1.setProperties(element_0qdl3e2f, bound?.[SNAP_CAROUSEL_CARD]);
+            template_u1.setProperties(element_0qdl3e2f, attributes[SNAP_CAROUSEL_CARD]);
+            template_u1.slot(element_0qdl3e2g, slide.visual ? (() => {
+                let root_0qdl3e2j = template_0qdl3e2k(), element_0qdl3e2l = root_0qdl3e2j.firstChild;
+                template_u1.slot(element_0qdl3e2l, slide.visual, 1);
+                return root_0qdl3e2j;
+            })() : '');
+            template_u1.slot(element_0qdl3e2h, slide.title, 1);
+            template_u1.slot(element_0qdl3e2i, slide.text, 1);
+            return root_0qdl3e2c;
+        }), 1);
+        template_u1.slot(element_0qdl3e2a, arrow(-1));
+        template_u1.slot(element_0qdl3e2b, arrow(1), 2);
+        return root_0qdl3e26;
+    })();
+}
+export default Object.assign(template, { arrow: SNAP_CAROUSEL_ARROW, card: SNAP_CAROUSEL_CARD });

package/build/components/snap-carousel/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.snap-carousel{--arrow-background:var(--color-grey-400);--arrow-box-shadow:var(--shadow-raised);--arrow-color:var(--color-text-500);--arrow-disabled-opacity:.4;--arrow-pressed-scale:.96;--arrow-size:40px;--card-background:var(--color-grey-400);--card-border-radius:24px;--card-box-shadow:var(--shadow-raised);--card-gap:var(--size-400);--card-height:200px;--card-padding:24px;--card-width:280px;--fade:32px;--focus-opacity:.5;--focus-ring-color:oklch(from var(--color-text-500) l c h / .38);--focus-scale:.9;--max-width:520px;--shadow-raised:0 0 0 var(--border-width-400) oklch(from var(--color-black-500) l c h / .06), 0 1px 2px oklch(from var(--color-black-500) l c h / .06), 0 6px 16px -6px oklch(from var(--color-black-500) l c h / .12);--text-color:var(--color-text-300);--text-font-size:14px;--title-color:var(--color-text-500);--title-font-size:15px;--title-font-weight:500;--visual-height:68px;max-width:100%;width:var(--max-width);flex-direction:column;align-items:center;gap:12px;display:flex}.snap-carousel-arrow{background:var(--arrow-background);box-shadow:var(--arrow-box-shadow);color:var(--arrow-color);cursor:pointer;height:var(--arrow-size);touch-action:manipulation;-webkit-user-select:none;user-select:none;width:var(--arrow-size);border:0;border-radius:999px;outline:none;justify-content:center;align-items:center;padding:0;transition:opacity .15s ease-out,scale .15s ease-out;display:flex}.snap-carousel-arrow svg{width:20px;height:20px}.snap-carousel-arrow:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:2px}.snap-carousel-arrow:not(.--disabled):active{scale:var(--arrow-pressed-scale)}.snap-carousel-arrow.--disabled{cursor:default;opacity:var(--arrow-disabled-opacity)}.snap-carousel-card{background:var(--card-background);border-radius:var(--card-border-radius);box-shadow:var(--card-box-shadow);box-sizing:border-box;height:var(--card-height);padding:var(--card-padding);width:var(--card-width);flex-direction:column;justify-content:flex-end;gap:6px;display:flex}.snap-carousel-controls{gap:12px;display:flex}.snap-carousel-slide{scroll-snap-align:center;flex-shrink:0}.snap-carousel-text{color:var(--text-color);font-size:var(--text-font-size);text-wrap:pretty;margin:0;line-height:22px}.snap-carousel-title{color:var(--title-color);font-size:var(--title-font-size);font-weight:var(--title-font-weight);margin:0}.snap-carousel-track{cursor:grab;gap:var(--card-gap);-webkit-mask-image:linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);-webkit-mask-image:linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);mask-image:linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);overscroll-behavior-x:contain;padding:var(--size-400) calc((100% - var(--card-width)) / 2);scroll-snap-type:x mandatory;scrollbar-width:none;outline:none;display:flex;position:relative;overflow-x:auto}.snap-carousel-track::-webkit-scrollbar{display:none}.snap-carousel-track.--dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.snap-carousel-viewport{border-radius:var(--card-border-radius);width:100%}.snap-carousel-viewport:has(:focus-visible){outline:2px solid var(--focus-ring-color);outline-offset:2px}.snap-carousel-visual{height:var(--visual-height);width:100%;margin-bottom:auto;position:relative}.snap-carousel-visual *{animation-play-state:paused}.snap-carousel.--visible .snap-carousel-slide.--active .snap-carousel-visual *{animation-play-state:running}@supports (animation-timeline:view()){.snap-carousel-card{animation:linear both snap-carousel-focus;animation-timeline:view(inline)}}@media (prefers-reduced-motion:reduce){.snap-carousel{--focus-scale:1}.snap-carousel-arrow{transition:opacity .15s ease-out}.snap-carousel-visual *{animation:none!important}}@keyframes snap-carousel-focus{0%,to{opacity:var(--focus-opacity);scale:var(--focus-scale)}50%{opacity:1;scale:1}}}
+/*$vite$:1*/

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

@@ -0,0 +1,9 @@
+import type { Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+type Options = {
+    group?: string;
+    handle?: string;
+    onsort?: (item: HTMLElement, from: number, to: number, source: HTMLElement, target: HTMLElement) => void;
+};
+export default _default;
+declare function _default({ group, handle, onsort }?: Options): Attributes;

package/build/components/sortable/index.js

@@ -0,0 +1,302 @@
+import './scss/index.scss';
+const DELAY = 180;
+const DROP = { duration: 260, easing: 'cubic-bezier(0.34, 1.3, 0.64, 1)', fill: 'forwards' };
+const ENTER = 0.15;
+const HANG = 0.5;
+const SHIFT = { composite: 'add', duration: 220, easing: 'cubic-bezier(0.2, 0, 0, 1)' };
+const SMOOTHING = 0.04;
+const THRESHOLD = 4;
+function child(container, node) {
+    while (node && node.parentNode !== container) {
+        node = node.parentNode;
+    }
+    return node instanceof HTMLElement ? node : null;
+}
+function drag(container, item, e, { group, onsort }) {
+    let animations = new Map(), baseLeft = 0, baseTop = 0, containers = group
+        ? Array.from(document.querySelectorAll(`.sortable[data-sortable-group="${CSS.escape(group)}"]`))
+        : [container], cssText = '', frame = 0, from = index(item), layout = new Map(), originX = e.clientX, originY = e.clientY, placeholder = null, pointer = e.pointerId, previousX = e.clientX, previousY = e.clientY, reduced = matchMedia('(prefers-reduced-motion: reduce)').matches, swing = null, time = 0, touch = e.pointerType === 'touch', timer = touch ? setTimeout(activate, DELAY) : undefined, x = e.clientX, y = e.clientY;
+    function activate() {
+        clearTimeout(timer);
+        let rect = item.getBoundingClientRect(), computed = getComputedStyle(item), style = item.style;
+        placeholder = document.createElement('div');
+        placeholder.className = 'sortable-placeholder';
+        placeholder.style.cssText = `
+            --radius: ${computed.borderRadius};
+            grid-column: ${computed.gridColumn};
+            grid-row: ${computed.gridRow};
+            height: ${rect.height}px;
+            margin: ${computed.margin};
+            width: ${rect.width}px;
+        `;
+        baseLeft = rect.left;
+        baseTop = rect.top;
+        cssText = style.cssText;
+        swing = reduced ? null : inertia(computed, rect, originX - rect.left, originY - rect.top);
+        reflow(() => {
+            item.before(placeholder);
+            style.boxSizing = 'border-box';
+            style.height = `${rect.height}px`;
+            style.left = `${rect.left}px`;
+            style.margin = '0';
+            style.position = 'fixed';
+            style.top = `${rect.top}px`;
+            style.transformOrigin = `${originX - rect.left}px ${originY - rect.top}px`;
+            style.width = `${rect.width}px`;
+            let moved = item.getBoundingClientRect();
+            style.left = `${rect.left * 2 - moved.left}px`;
+            style.top = `${rect.top * 2 - moved.top}px`;
+            for (let i = 0, n = containers.length; i < n; i++) {
+                containers[i].classList.add('--active');
+            }
+            item.classList.add('--dragging');
+        });
+        getSelection()?.removeAllRanges();
+        frame = requestAnimationFrame(tick);
+    }
+    function cleanup() {
+        cancelAnimationFrame(frame);
+        clearTimeout(timer);
+        document.removeEventListener('contextmenu', prevent);
+        document.removeEventListener('dragstart', prevent);
+        document.removeEventListener('pointercancel', release);
+        document.removeEventListener('pointermove', move);
+        document.removeEventListener('pointerup', release);
+        document.removeEventListener('selectstart', prevent);
+        document.removeEventListener('touchmove', scroll);
+    }
+    function drop() {
+        let slot = placeholder, style = item.style;
+        cleanup();
+        animations.get(slot)?.finish();
+        let { rotate, scale, translate } = getComputedStyle(item), target = slot.getBoundingClientRect();
+        item.classList.add('--dropping');
+        let animation = item.animate([
+            { rotate, scale, transform: style.transform, translate },
+            { rotate: '0deg', scale: '1', transform: `translate3d(${target.left - baseLeft}px, ${target.top - baseTop}px, 0)`, translate: '0px 0px' }
+        ], DROP);
+        animation.onfinish = () => {
+            style.cssText = cssText;
+            slot.replaceWith(item);
+            item.classList.remove('--dragging', '--dropping');
+            animation.cancel();
+            for (let i = 0, n = containers.length; i < n; i++) {
+                containers[i].classList.remove('--active');
+            }
+            let target = item.parentElement, to = index(item);
+            if (onsort && (to !== from || target !== container)) {
+                onsort(item, from, to, container, target);
+            }
+        };
+        addEventListener('click', swallow, true);
+        setTimeout(() => removeEventListener('click', swallow, true));
+    }
+    function enter(target) {
+        let distance = Infinity, nearest = null;
+        for (let element of target.children) {
+            if (element === item || element === placeholder) {
+                continue;
+            }
+            let rect = element.getBoundingClientRect(), d = Math.hypot(Math.max(rect.left - x, 0, x - rect.right), Math.max(rect.top - y, 0, y - rect.bottom));
+            if (d < distance) {
+                distance = d;
+                nearest = element;
+            }
+        }
+        if (!nearest) {
+            target.append(placeholder);
+            return;
+        }
+        let rect = nearest.getBoundingClientRect(), row = false;
+        for (let element of target.children) {
+            if (element === item || element === nearest || element === placeholder) {
+                continue;
+            }
+            let other = element.getBoundingClientRect();
+            if (other.top < rect.bottom && other.bottom > rect.top) {
+                row = true;
+                break;
+            }
+        }
+        if (row ? x > rect.left + rect.width / 2 : y > rect.top + rect.height / 2) {
+            nearest.after(placeholder);
+        }
+        else {
+            nearest.before(placeholder);
+        }
+    }
+    function move(e) {
+        if (e.pointerId !== pointer) {
+            return;
+        }
+        x = e.clientX;
+        y = e.clientY;
+        if (placeholder || Math.hypot(x - originX, y - originY) < THRESHOLD) {
+            return;
+        }
+        if (touch) {
+            cleanup();
+        }
+        else {
+            activate();
+        }
+    }
+    function over() {
+        if (containers.length === 1) {
+            return container;
+        }
+        for (let i = 0, n = containers.length; i < n; i++) {
+            let rect = containers[i].getBoundingClientRect();
+            if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
+                return containers[i];
+            }
+        }
+        return null;
+    }
+    function reflow(mutate) {
+        let first = new Map();
+        for (let i = 0, n = containers.length; i < n; i++) {
+            for (let element of containers[i].children) {
+                if (element !== item) {
+                    first.set(element, element.getBoundingClientRect());
+                }
+            }
+        }
+        mutate();
+        for (let animation of animations.values()) {
+            animation.cancel();
+        }
+        animations.clear();
+        layout.clear();
+        for (let i = 0, n = containers.length; i < n; i++) {
+            let parent = containers[i], bounds = parent.getBoundingClientRect(), left = bounds.left - parent.scrollLeft, top = bounds.top - parent.scrollTop;
+            for (let element of parent.children) {
+                if (element === item || !(element instanceof HTMLElement)) {
+                    continue;
+                }
+                let rect = element.getBoundingClientRect(), start = first.get(element);
+                layout.set(element, {
+                    bottom: rect.bottom - top,
+                    container: parent,
+                    left: rect.left - left,
+                    right: rect.right - left,
+                    top: rect.top - top
+                });
+                if (!start || reduced || (start.left === rect.left && start.top === rect.top)) {
+                    continue;
+                }
+                animations.set(element, element.animate([
+                    { translate: `${start.left - rect.left}px ${start.top - rect.top}px` },
+                    { translate: '0px 0px' }
+                ], SHIFT));
+            }
+        }
+    }
+    function release(e) {
+        if (e.pointerId !== pointer) {
+            return;
+        }
+        if (placeholder) {
+            drop();
+        }
+        else {
+            cleanup();
+        }
+    }
+    function scroll(e) {
+        if (placeholder) {
+            e.preventDefault();
+        }
+    }
+    function sort() {
+        let slot = layout.get(placeholder), target = over();
+        if (!slot || !target) {
+            return;
+        }
+        if (target !== slot.container) {
+            reflow(() => enter(target));
+            return;
+        }
+        let bounds = target.getBoundingClientRect(), left = x - bounds.left + target.scrollLeft, top = y - bounds.top + target.scrollTop;
+        for (let [element, rect] of layout) {
+            if (element === placeholder ||
+                rect.container !== target ||
+                left < rect.left ||
+                left > rect.right ||
+                top < rect.top ||
+                top > rect.bottom) {
+                continue;
+            }
+            let row = rect.top < slot.bottom && rect.bottom > slot.top, depth = row
+                ? (rect.left > slot.left ? left - rect.left : rect.right - left)
+                : (rect.top > slot.top ? top - rect.top : rect.bottom - top), size = row ? rect.right - rect.left : rect.bottom - rect.top;
+            if (depth > Math.max(0, (size - (row ? slot.right - slot.left : slot.bottom - slot.top)) / 2) + size * ENTER) {
+                reflow(() => {
+                    if (placeholder.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_FOLLOWING) {
+                        element.after(placeholder);
+                    }
+                    else {
+                        element.before(placeholder);
+                    }
+                });
+            }
+            return;
+        }
+    }
+    function tick(now) {
+        frame = requestAnimationFrame(tick);
+        let dt = time ? Math.min((now - time) / 1000, 1 / 30) : 0, angle = swing ? swing(x - previousX, y - previousY, dt) : 0;
+        previousX = x;
+        previousY = y;
+        time = now;
+        item.style.transform = `translate3d(${x - originX}px, ${y - originY}px, 0) rotate(${angle}deg)`;
+        sort();
+    }
+    document.addEventListener('contextmenu', prevent);
+    document.addEventListener('dragstart', prevent);
+    document.addEventListener('pointercancel', release);
+    document.addEventListener('pointermove', move);
+    document.addEventListener('pointerup', release);
+    document.addEventListener('selectstart', prevent);
+    document.addEventListener('touchmove', scroll, { passive: false });
+}
+function index(element) {
+    return Array.prototype.indexOf.call(element.parentElement.children, element);
+}
+function inertia(computed, rect, grabX, grabY) {
+    let angle = 0, damping = parseFloat(computed.getPropertyValue('--swing-damping')), max = parseFloat(computed.getPropertyValue('--swing-angle')), size = Math.max(rect.width, rect.height), leverX = (rect.width / 2 - grabX) / size, leverY = (rect.height / 2 - grabY) / size + HANG, spin = 0, stiffness = parseFloat(computed.getPropertyValue('--swing-stiffness')), strength = parseFloat(computed.getPropertyValue('--swing-strength')), vx = 0, vy = 0;
+    return (dx, dy, dt) => {
+        if (dt <= 0) {
+            return angle;
+        }
+        let smoothing = 1 - Math.exp(-dt / SMOOTHING);
+        vx += (dx / dt - vx) * smoothing;
+        vy += (dy / dt - vy) * smoothing;
+        let lean = Math.max(-max, Math.min(max, (leverY * vx - leverX * vy) * strength));
+        spin += (stiffness * (lean - angle) - damping * spin) * dt;
+        angle += spin * dt;
+        return angle;
+    };
+}
+function prevent(e) {
+    e.preventDefault();
+}
+function swallow(e) {
+    e.preventDefault();
+    e.stopPropagation();
+}
+export default ({ group, handle, onsort } = {}) => ({
+    class: 'sortable',
+    ...(group && { 'data-sortable-group': group }),
+    onpointerdown: (e) => {
+        let container = e.currentTarget;
+        if (e.button !== 0 || !e.isPrimary || container.classList.contains('--active')) {
+            return;
+        }
+        let item = child(container, e.target);
+        if (!item || (handle && !item.contains(e.target.closest(handle)))) {
+            return;
+        }
+        drag(container, item, e, { group, onsort });
+    }
+});

package/build/components/sortable/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.sortable{--drag-animation:none;--drag-box-shadow:var(--box-shadow-400);--drag-scale:1.06;--drag-z-index:9999;--overlay-transition-duration:.16s;--placeholder-background:transparent;--placeholder-border-color:var(--color-border-500);--placeholder-border-width:var(--border-width-400);--swing-angle:8deg;--swing-damping:11;--swing-stiffness:260;--swing-strength:.006}.sortable--bouncy{--swing-angle:10deg;--swing-damping:6;--swing-stiffness:300;--swing-strength:.007}.sortable--damped{--swing-angle:6deg;--swing-damping:32;--swing-stiffness:260;--swing-strength:.006}.sortable--floppy{--swing-angle:14deg;--swing-damping:4;--swing-stiffness:120;--swing-strength:.01}.sortable--heavy{--swing-angle:10deg;--swing-damping:7;--swing-stiffness:90;--swing-strength:.007}.sortable--rigid{--swing-angle:0deg;--swing-damping:11;--swing-stiffness:260;--swing-strength:0}.sortable--snappy{--swing-angle:6deg;--swing-damping:18;--swing-stiffness:600;--swing-strength:.005}.sortable--subtle{--swing-angle:4deg;--swing-damping:16;--swing-stiffness:300;--swing-strength:.003}.sortable--wobbly{--swing-angle:8deg;--swing-damping:5;--swing-stiffness:700;--swing-strength:.006}.sortable--breathe{--drag-animation:sortable-breathe 1.8s ease-in-out infinite alternate}.sortable--drift{--drag-animation:sortable-sway 1.9s ease-in-out infinite alternate, sortable-float 1.3s ease-in-out infinite alternate}.sortable--float{--drag-animation:sortable-float 1.6s ease-in-out infinite alternate}.sortable--heartbeat{--drag-animation:sortable-heartbeat 1.4s ease-in-out infinite}.sortable--jelly{--drag-animation:sortable-jelly .5s ease-in-out infinite alternate}.sortable--jiggle{--drag-animation:sortable-jiggle .28s linear infinite}.sortable--orbit{--drag-animation:sortable-orbit 1.6s linear infinite}.sortable--pop{--drag-animation:sortable-pop .45s cubic-bezier(.3, 0, .3, 1)}.sortable--settle{--drag-animation:sortable-settle .9s ease-out}.sortable--shimmy{--drag-animation:sortable-shimmy 90ms linear infinite alternate}.sortable--sway{--drag-animation:sortable-sway 1.4s ease-in-out infinite alternate}.sortable--tremble{--drag-animation:sortable-tremble .4s linear infinite}.sortable--wiggle{--drag-animation:sortable-wiggle .16s ease-in-out infinite alternate}.sortable>*{-webkit-touch-callout:none}.sortable>.--dragging{cursor:grabbing;transition:box-shadow var(--transition-duration) var(--transition-timing-function), scale var(--transition-duration) var(--transition-timing-function);will-change:transform;z-index:var(--drag-z-index)}.sortable>.--dragging:not(.--dropping){animation:var(--drag-animation);box-shadow:var(--drag-box-shadow);scale:var(--drag-scale)}.sortable.--active{-webkit-user-select:none;user-select:none}.sortable-overlay{background:inherit;border-radius:inherit;opacity:0;pointer-events:none;transition:display var(--overlay-transition-duration) allow-discrete, opacity var(--overlay-transition-duration) var(--transition-timing-function);z-index:1;justify-content:center;align-items:center;display:none;position:absolute;inset:0}.sortable>.--dragging .sortable-overlay{opacity:1;display:flex}@starting-style{.sortable>.--dragging .sortable-overlay{opacity:0}}.sortable>.--dropping .sortable-overlay{opacity:0}.sortable-placeholder{background:var(--placeholder-background);border:var(--placeholder-border-width) dashed var(--placeholder-border-color);border-radius:var(--radius);box-sizing:border-box;pointer-events:none;transition:opacity var(--transition-duration) var(--transition-timing-function), scale var(--transition-duration) var(--transition-timing-function);flex:none}@starting-style{.sortable-placeholder{opacity:0;scale:.9}}@keyframes sortable-breathe{0%{scale:var(--drag-scale)}to{scale:calc(var(--drag-scale) * 1.025)}}@keyframes sortable-float{0%{translate:0}to{translate:0 -2px}}@keyframes sortable-heartbeat{0%,28%,70%,to{scale:var(--drag-scale)}14%,42%{scale:calc(var(--drag-scale) * 1.03)}}@keyframes sortable-jelly{0%{scale:calc(var(--drag-scale) * 1.02) calc(var(--drag-scale) * .98)}to{scale:calc(var(--drag-scale) * .98) calc(var(--drag-scale) * 1.02)}}@keyframes sortable-jiggle{0%,to{translate:0 .3px;rotate:-.7deg}25%{translate:.3px;rotate:.5deg}50%{translate:0 -.3px;rotate:.7deg}75%{translate:-.3px;rotate:-.5deg}}@keyframes sortable-orbit{0%,to{translate:1.2px}12.5%{translate:.85px .85px}25%{translate:0 1.2px}37.5%{translate:-.85px .85px}50%{translate:-1.2px}62.5%{translate:-.85px -.85px}75%{translate:0 -1.2px}87.5%{translate:.85px -.85px}}@keyframes sortable-pop{0%{scale:1}45%{scale:calc(var(--drag-scale) * 1.06)}75%{scale:calc(var(--drag-scale) * .98)}to{scale:var(--drag-scale)}}@keyframes sortable-settle{0%,to{rotate:0deg}15%{rotate:3deg}30%{rotate:-2deg}45%{rotate:1.2deg}60%{rotate:-.6deg}75%{rotate:.25deg}}@keyframes sortable-shimmy{0%{translate:-.6px}to{translate:.6px}}@keyframes sortable-sway{0%{rotate:-1.2deg}to{rotate:1.2deg}}@keyframes sortable-tremble{0%,to{translate:0;rotate:0deg}20%{translate:-.4px .3px;rotate:-.3deg}40%{translate:.5px -.2px;rotate:.2deg}60%{translate:-.2px -.4px;rotate:-.1deg}80%{translate:.3px .4px;rotate:.3deg}}@keyframes sortable-wiggle{0%{rotate:-.6deg}to{rotate:.6deg}}@media (prefers-reduced-motion:reduce){.sortable>.--dragging:not(.--dropping){animation:none}}}
+/*$vite$:1*/

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

@@ -0,0 +1,26 @@
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    [SPARKLINE_PLOT]?: Attributes;
+    data: Point[];
+    format?: (value: number) => string;
+    state?: State;
+    title: string;
+};
+type Point = {
+    label: string;
+    value: number;
+};
+type State = {
+    active: boolean;
+    index: number;
+};
+declare const SPARKLINE_PLOT: unique symbol;
+declare function template(this: {
+    attributes?: Partial<A>;
+} | void, { data, format, state, title, ...attributes }: A): DocumentFragment | Text;
+declare const _default: typeof template & {
+    readonly plot: typeof SPARKLINE_PLOT;
+};
+export default _default;
+export type { Point as SparklinePoint, State as SparklineState };