@esportsplus/ui 0.55.0 → 0.56.3

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

@@ -0,0 +1,25 @@
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    disabled?: boolean;
+    format?: (value: number) => string;
+    label?: string;
+    largeStep?: number;
+    max?: number;
+    min?: number;
+    name?: string;
+    orientation?: 'horizontal' | 'vertical';
+    output?: boolean;
+    state?: State;
+    step?: number;
+    value?: number | [number, number];
+};
+type State = {
+    value: number;
+} | {
+    high: number;
+    low: number;
+};
+export default _default;
+declare function _default({ disabled, format, label, largeStep, max, min, name, orientation, output, state, step, value, ...attributes }: A): DocumentFragment | Text;
+export type { State as SliderState };

package/build/components/slider/index.js

@@ -0,0 +1,188 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import * as template_u1 from '@esportsplus/template';
+import './scss/index.scss';
+const template_15qth6c3 = template_u1.template(`<div class='slider  '><!--$--><div class='slider-control'><div class='slider-track'><div class='slider-indicator '>`);
+const template_15qth6ca = template_u1.template(`<div class='slider-header'><!--$-->`);
+const template_15qth6ce = template_u1.template(`<span class='slider-label'>`);
+const template_15qth6ch = template_u1.template(`<output class='slider-output'>`);
+const template_15qth6ck = template_u1.template(`<div class='slider-thumb' role='slider'>`);
+const template_15qth6cn = template_u1.template(`<input type='hidden' />`);
+class ReactiveObject_15qth6c0 extends reactivity_u0.ReactiveObject {
+    #high;
+    #low;
+    #value;
+    constructor(_p0, _p1, _p2) {
+        super(null);
+        this.#high = this[reactivity_u0.SIGNAL](_p0);
+        this.#low = this[reactivity_u0.SIGNAL](_p1);
+        this.#value = this[reactivity_u0.SIGNAL](_p2);
+    }
+    get high() {
+        return reactivity_u0.read(this.#high);
+    }
+    set high(_v0) {
+        reactivity_u0.write(this.#high, _v0);
+    }
+    get low() {
+        return reactivity_u0.read(this.#low);
+    }
+    set low(_v1) {
+        reactivity_u0.write(this.#low, _v1);
+    }
+    get value() {
+        return reactivity_u0.read(this.#value);
+    }
+    set value(_v2) {
+        reactivity_u0.write(this.#value, _v2);
+    }
+}
+class ReactiveObject_15qth6c1 extends reactivity_u0.ReactiveObject {
+    #dragging = this[reactivity_u0.SIGNAL](-1);
+    constructor() {
+        super(null);
+    }
+    get dragging() {
+        return reactivity_u0.read(this.#dragging);
+    }
+    set dragging(_v0) {
+        reactivity_u0.write(this.#dragging, _v0);
+    }
+}
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+export default ({ disabled = false, format = String, label, largeStep = 10, max = 100, min = 0, name, orientation = 'horizontal', output = false, state, step = 1, value, ...attributes }) => {
+    let range = Array.isArray(value) || (!!state && 'low' in state), keys = range ? ['low', 'high'] : ['value'], s = (state ?? new ReactiveObject_15qth6c0(Array.isArray(value) ? value[1] : max, Array.isArray(value) ? value[0] : min, Array.isArray(value) ? min : (value ?? min))), control, decimals = (String(step).split('.')[1] || '').length, drag = -1, span = max - min || 1, thumbs = [], ui = new ReactiveObject_15qth6c1(), vertical = orientation === 'vertical';
+    function commit(index, raw) {
+        let next = Number((Math.round((clamp(raw, min, max) - min) / step) * step + min).toFixed(decimals));
+        if (range) {
+            next = index === 0 ? Math.min(next, s.high) : Math.max(next, s.low);
+        }
+        s[keys[index]] = next;
+    }
+    function fraction(event) {
+        if (!control) {
+            return 0;
+        }
+        let rect = control.getBoundingClientRect(), size = parseFloat(getComputedStyle(control).getPropertyValue('--thumb-size')) || 0, f = vertical
+            ? (rect.bottom - size / 2 - event.clientY) / (rect.height - size)
+            : (event.clientX - rect.left - size / 2) / (rect.width - size);
+        if (!vertical && getComputedStyle(control).direction === 'rtl') {
+            f = 1 - f;
+        }
+        return clamp(f, 0, 1);
+    }
+    function keydown(index, event) {
+        let big = largeStep, delta = {
+            ArrowDown: -(event.shiftKey ? big : step),
+            ArrowLeft: -(event.shiftKey ? big : step),
+            ArrowRight: event.shiftKey ? big : step,
+            ArrowUp: event.shiftKey ? big : step,
+            End: Infinity,
+            Home: -Infinity,
+            PageDown: -big,
+            PageUp: big
+        };
+        if (!(event.key in delta)) {
+            return;
+        }
+        event.preventDefault();
+        commit(index, clamp(s[keys[index]] + delta[event.key], min, max));
+    }
+    function percent(key) {
+        return (s[key] - min) / span;
+    }
+    function readout() {
+        return keys.map((key) => format(s[key])).join(' – ');
+    }
+    function release() {
+        drag = -1;
+        ui.dragging = -1;
+    }
+    return (() => {
+        let root_15qth6c2 = template_15qth6c3(), element_15qth6c4 = root_15qth6c2.firstChild, element_15qth6c5 = element_15qth6c4.firstChild, element_15qth6c6 = element_15qth6c4.firstElementChild, element_15qth6c7 = element_15qth6c6.firstElementChild.firstElementChild, element_15qth6c8 = element_15qth6c6.firstElementChild;
+        template_u1.setProperty(element_15qth6c4, 'aria-disabled', disabled && 'true');
+        template_u1.setList(element_15qth6c4, 'class', template_u1.interpolate(["slider--", (orientation)]));
+        template_u1.setList(element_15qth6c4, 'class', disabled && '--disabled');
+        template_u1.setProperties(element_15qth6c4, attributes);
+        template_u1.setList(element_15qth6c4, 'class', () => ui.dragging !== -1 && '--dragging');
+        template_u1.slot(element_15qth6c5, (label || output) && (() => {
+            let root_15qth6c9 = template_15qth6ca(), element_15qth6cb = root_15qth6c9.firstChild.firstChild, element_15qth6cc = root_15qth6c9.firstChild;
+            template_u1.slot(element_15qth6cb, label && (() => {
+                let root_15qth6cd = template_15qth6ce(), element_15qth6cf = root_15qth6cd.firstChild;
+                template_u1.slot(element_15qth6cf, label, 1);
+                return root_15qth6cd;
+            })());
+            template_u1.slot(element_15qth6cc, output && (() => {
+                let root_15qth6cg = template_15qth6ch(), element_15qth6ci = root_15qth6cg.firstChild;
+                new template_u1.EffectSlot(element_15qth6ci, readout, 1);
+                return root_15qth6cg;
+            })(), 2);
+            return root_15qth6c9;
+        })());
+        template_u1.delegate(element_15qth6c6, 'lostpointercapture', release);
+        template_u1.delegate(element_15qth6c6, 'pointercancel', release);
+        template_u1.delegate(element_15qth6c6, 'pointerdown', (event) => {
+            if (disabled || event.button !== 0 || !control) {
+                return;
+            }
+            let f = fraction(event), grabbed = event.target.closest('[data-thumb]'), index = 0;
+            if (grabbed) {
+                index = Number(grabbed.dataset.thumb);
+            }
+            else if (range) {
+                let high = percent('high'), low = percent('low');
+                index = Math.abs(f - low) === Math.abs(f - high) ? (f < low ? 0 : 1) : (Math.abs(f - low) < Math.abs(f - high) ? 0 : 1);
+            }
+            event.preventDefault();
+            thumbs[index]?.focus({ preventScroll: true });
+            control.setPointerCapture(event.pointerId);
+            drag = index;
+            ui.dragging = index;
+            commit(index, min + f * span);
+        });
+        template_u1.delegate(element_15qth6c6, 'pointermove', (event) => {
+            if (drag === -1) {
+                return;
+            }
+            commit(drag, min + fraction(event) * span);
+        });
+        template_u1.delegate(element_15qth6c6, 'pointerup', release);
+        template_u1.onrender(element_15qth6c6, (element) => {
+            control = element;
+        });
+        template_u1.setList(element_15qth6c7, 'class', !range && 'slider-indicator--single');
+        template_u1.setList(element_15qth6c7, 'style', () => range
+            ? `--end: ${percent('high')}; --start: ${percent('low')};`
+            : `--end: ${percent('value')};`);
+        template_u1.slot(element_15qth6c8, keys.map((key, index) => {
+            let root_15qth6cj = template_15qth6ck(), element_15qth6cl = root_15qth6cj.firstChild;
+            template_u1.setProperty(element_15qth6cl, 'aria-label', range ? `${index === 0 ? 'Minimum' : 'Maximum'}${label ? ` ${label.toLowerCase()}` : ''}` : (label ?? 'Value'));
+            template_u1.setProperty(element_15qth6cl, 'aria-orientation', orientation);
+            template_u1.setProperty(element_15qth6cl, 'aria-valuemax', max);
+            template_u1.setProperty(element_15qth6cl, 'aria-valuemin', min);
+            template_u1.setProperty(element_15qth6cl, 'data-thumb', index);
+            template_u1.setProperty(element_15qth6cl, 'tabindex', disabled ? -1 : 0);
+            template_u1.setProperty(element_15qth6cl, 'aria-valuenow', () => s[key]);
+            template_u1.setProperty(element_15qth6cl, 'aria-valuetext', () => format(s[key]));
+            template_u1.setList(element_15qth6cl, 'class', () => ui.dragging === index && '--active');
+            template_u1.delegate(element_15qth6cl, 'keydown', (event) => {
+                if (!disabled) {
+                    keydown(index, event);
+                }
+            });
+            template_u1.onrender(element_15qth6cl, (element) => {
+                thumbs[index] = element;
+            });
+            template_u1.setList(element_15qth6cl, 'style', () => `--position: ${percent(key)}`);
+            return root_15qth6cj;
+        }), 2);
+        template_u1.slot(element_15qth6c4, name && keys.map((key) => {
+            let root_15qth6cm = template_15qth6cn(), element_15qth6co = root_15qth6cm.firstChild;
+            template_u1.setProperty(element_15qth6co, 'name', name);
+            template_u1.setProperty(element_15qth6co, 'value', () => String(s[key]));
+            return root_15qth6cm;
+        }), 2);
+        return root_15qth6c2;
+    })();
+};

package/build/components/slider/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.slider{--color:var(--color-text-500);--end:0;--font-size:calc(var(--font-size-400) * .875);--indicator-color:var(--color-text-500);--rail-inset:2px;--ring:oklch(from var(--color-text-500) l c h / .24);--start:0;--thumb-background:var(--color-white-300);--thumb-border:var(--color-border-300);--thumb-shadow:0 1px 2px oklch(from var(--color-black-300) l c h / .05), 0 1px oklch(from var(--color-black-300) l c h / .04);--thumb-size:16px;--track-color:var(--color-border-300);--track-size:4px;color:var(--color);font-size:var(--font-size);flex-direction:column;gap:8px;display:flex}.slider-control{touch-action:none;-webkit-user-select:none;user-select:none;display:flex;position:relative}.slider-header{justify-content:space-between;align-items:center;gap:4px;display:flex}.slider-indicator{background:var(--indicator-color);border-radius:999px;transition:none;position:absolute}.slider-label{font-weight:var(--font-weight-500)}.slider-output{font-variant-numeric:tabular-nums;margin-inline-start:auto}.slider-thumb{background:var(--thumb-background);border:1px solid var(--thumb-border);box-shadow:var(--thumb-shadow);cursor:grab;height:var(--thumb-size);width:var(--thumb-size);border-radius:50%;outline:none;transition:box-shadow .15s ease-out,scale .15s ease-out;position:absolute}.slider-thumb:focus-visible{box-shadow:0 0 0 3px var(--ring)}.slider-thumb.--active{box-shadow:none;cursor:grabbing;scale:1.2}.slider-track{flex-grow:1;position:relative}.slider-track:before{background:var(--track-color);content:"";border-radius:999px;position:absolute}.slider--horizontal{width:100%}.slider--horizontal .slider-control{min-height:var(--thumb-size);align-items:center;width:100%;min-width:176px}.slider--horizontal .slider-indicator{inset-block:0;inset-inline-start:calc(var(--thumb-size) / 2 + var(--start) * (100% - var(--thumb-size)));inset-inline-end:calc(100% - (var(--thumb-size) / 2 + var(--end) * (100% - var(--thumb-size))))}.slider--horizontal .slider-indicator--single{inset-inline-start:var(--rail-inset)}.slider--horizontal .slider-thumb{inset-inline-start:calc(var(--thumb-size) / 2 + var(--position) * (100% - var(--thumb-size)));top:50%;translate:-50% -50%}.slider--horizontal .slider-thumb:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){translate:50% -50%}.slider--horizontal .slider-track{height:var(--track-size)}.slider--horizontal .slider-track:before{inset:0 var(--rail-inset)}.slider--vertical{align-items:center;height:100%}.slider--vertical .slider-control{flex-direction:column;justify-content:center;height:100%;min-height:176px}.slider--vertical .slider-indicator{bottom:calc(var(--thumb-size) / 2 + var(--start) * (100% - var(--thumb-size)));inset-inline:0;top:calc(100% - (var(--thumb-size) / 2 + var(--end) * (100% - var(--thumb-size))))}.slider--vertical .slider-indicator--single{bottom:var(--rail-inset)}.slider--vertical .slider-thumb{bottom:calc(var(--thumb-size) / 2 + var(--position) * (100% - var(--thumb-size)));left:50%;translate:-50% 50%}.slider--vertical .slider-track{width:var(--track-size)}.slider--vertical .slider-track:before{inset:var(--rail-inset) 0}.slider.--disabled{opacity:.64}.slider.--disabled .slider-control{pointer-events:none}@media (pointer:coarse){.slider{--thumb-size:20px}}@media (prefers-reduced-motion:reduce){.slider-thumb{transition:box-shadow .15s ease-out}.slider-thumb.--active{scale:1}}}
+/*$vite$:1*/

package/build/components/sliding-tabs/index.d.ts

@@ -0,0 +1,28 @@
+import { type Attributes, type Renderable } from '@esportsplus/template';
+import '../tabs/scss/index.scss';
+import './scss/index.scss';
+type A = Attributes & {
+    [SLIDING_TABS_PANEL]?: Attributes;
+    [SLIDING_TABS_TAB]?: Attributes;
+    label: string;
+    selected?: string;
+    state?: State;
+    tabs: Tab[];
+};
+type State = {
+    selected: string;
+};
+type Tab = {
+    content: Renderable<unknown>;
+    id: string;
+    label: string;
+};
+declare const SLIDING_TABS_PANEL: unique symbol;
+declare const SLIDING_TABS_TAB: unique symbol;
+declare const slidingTabs: ({ label, selected, state, tabs, ...attributes }: A) => DocumentFragment | Text;
+declare const _default: typeof slidingTabs & {
+    readonly panel: typeof SLIDING_TABS_PANEL;
+    readonly tab: typeof SLIDING_TABS_TAB;
+};
+export default _default;
+export type { State, Tab };

package/build/components/sliding-tabs/index.js

@@ -0,0 +1,188 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect, onCleanup, untrack } from '@esportsplus/reactivity';
+import '../tabs/scss/index.scss';
+import './scss/index.scss';
+const template_08qtvcs2 = template_u1.template(`<div class='sliding-tabs'><div class='sliding-tabs-list' role='tablist'><span aria-hidden='true' class='sliding-tabs-hover'></span><!--$--><span aria-hidden='true' class='sliding-tabs-underline'></span></div><div class='sliding-tabs-panels tabs'>`);
+const template_08qtvcsa = template_u1.template(`<button class='sliding-tabs-tab' role='tab' type='button'><span class='sliding-tabs-label'>`);
+const template_08qtvcse = template_u1.template(`<div class='sliding-tabs-panel tabs-content ' role='tabpanel' tabindex='0'>`);
+class ReactiveObject_08qtvcs0 extends reactivity_u0.ReactiveObject {
+    #selected;
+    constructor(_p0) {
+        super(null);
+        this.#selected = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get selected() {
+        return reactivity_u0.read(this.#selected);
+    }
+    set selected(_v0) {
+        reactivity_u0.write(this.#selected, _v0);
+    }
+}
+const EASE_OUT = 'cubic-bezier(0.23, 1, 0.32, 1)';
+const SLIDING_TABS_PANEL = Symbol.for('@esportsplus/ui/sliding-tabs.panel');
+const SLIDING_TABS_TAB = Symbol.for('@esportsplus/ui/sliding-tabs.tab');
+let uid = 0;
+function instant(element, update) {
+    element.classList.add('--instant');
+    update();
+    getComputedStyle(element).opacity;
+    element.classList.remove('--instant');
+}
+function reduced() {
+    return matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+const slidingTabs = ({ label, selected, state, tabs, ...attributes }) => {
+    let applied = '', hover, id = `sliding-tabs-${++uid}`, initial = '', list, observer, panels = new Map(), running = new Map(), s = state ?? new ReactiveObject_08qtvcs0(selected ?? tabs[0]?.id ?? ''), tabRefs = new Map(), underline;
+    initial = untrack(() => s.selected);
+    function animate(panel, keyframes, duration) {
+        running.get(panel)?.cancel();
+        let animation = panel.animate(keyframes, { duration, easing: EASE_OUT });
+        running.set(panel, animation);
+        return animation;
+    }
+    function apply(next) {
+        let previous = applied, target = measure(next);
+        if (!list || !underline || !target || previous === next) {
+            return;
+        }
+        applied = next;
+        let from = index(previous), to = index(next), dir = to > from ? 1 : -1, reduce = reduced();
+        underline.classList.toggle('--forward', target[1] > parseFloat(getComputedStyle(underline).getPropertyValue('--sliding-tabs-right')));
+        place(target);
+        let incoming = panels.get(next), outgoing = panels.get(previous);
+        if (outgoing) {
+            outgoing.classList.remove('--active');
+            outgoing.classList.add('--leaving');
+            outgoing.inert = true;
+            animate(outgoing, [
+                { opacity: 1, translate: '0 0' },
+                { opacity: 0, translate: `${reduce ? 0 : dir * -6}px 0` }
+            ], 150).onfinish = () => {
+                outgoing.classList.remove('--leaving');
+                outgoing.inert = false;
+            };
+        }
+        if (incoming) {
+            incoming.classList.remove('--leaving');
+            incoming.classList.add('--active');
+            incoming.inert = false;
+            animate(incoming, [
+                { filter: reduce ? 'blur(0px)' : 'blur(4px)', opacity: 0, translate: `${reduce ? 0 : dir * 8}px 0` },
+                { filter: 'blur(0px)', opacity: 1, translate: '0 0' }
+            ], 250);
+        }
+    }
+    function enter(tab, e) {
+        let element = tabRefs.get(tab);
+        if (e.pointerType === 'touch' || !hover || !element) {
+            return;
+        }
+        let pill = hover, update = () => {
+            pill.style.translate = `${element.offsetLeft}px 0`;
+            pill.style.width = `${element.offsetWidth}px`;
+        };
+        if (pill.classList.contains('--active')) {
+            update();
+        }
+        else {
+            instant(pill, update);
+            pill.classList.add('--active');
+        }
+    }
+    function index(tab) {
+        return tabs.findIndex((t) => t.id === tab);
+    }
+    function measure(tab) {
+        let element = tabRefs.get(tab);
+        return element ? [element.offsetLeft, element.offsetLeft + element.offsetWidth] : null;
+    }
+    function place(target) {
+        underline.style.setProperty('--sliding-tabs-left', `${target[0]}px`);
+        underline.style.setProperty('--sliding-tabs-right', `${target[1]}px`);
+    }
+    function select(tab) {
+        s.selected = tab;
+    }
+    let stop = effect(() => {
+        apply(s.selected);
+    });
+    onCleanup(() => {
+        observer?.disconnect();
+        stop();
+        for (let animation of running.values()) {
+            animation.cancel();
+        }
+    });
+    return (() => {
+        let root_08qtvcs1 = template_08qtvcs2(), element_08qtvcs3 = root_08qtvcs1.firstChild, element_08qtvcs4 = element_08qtvcs3.firstElementChild, element_08qtvcs5 = element_08qtvcs4.firstElementChild, element_08qtvcs6 = element_08qtvcs4.firstChild.nextSibling, element_08qtvcs7 = element_08qtvcs5.nextElementSibling, element_08qtvcs8 = element_08qtvcs4.nextElementSibling;
+        template_u1.setProperties(element_08qtvcs3, attributes);
+        template_u1.setProperty(element_08qtvcs4, 'aria-label', label);
+        template_u1.onconnect(element_08qtvcs4, (element) => {
+            let target = measure(s.selected);
+            list = element;
+            applied = s.selected;
+            if (target && underline) {
+                instant(underline, () => place(target));
+            }
+            element.classList.add('--ready');
+            observer = new ResizeObserver(() => {
+                let target = measure(applied);
+                if (target && underline) {
+                    instant(underline, () => place(target));
+                }
+            });
+            observer.observe(element);
+        });
+        template_u1.delegate(element_08qtvcs4, 'keydown', (e) => {
+            let current = index(s.selected), target = {
+                ArrowLeft: current - 1,
+                ArrowRight: current + 1,
+                End: tabs.length - 1,
+                Home: 0
+            }[e.key];
+            if (target === undefined) {
+                return;
+            }
+            e.preventDefault();
+            let next = tabs[(target + tabs.length) % tabs.length].id;
+            select(next);
+            tabRefs.get(next)?.focus();
+        });
+        template_u1.on(element_08qtvcs4, 'pointerleave', () => {
+            hover?.classList.remove('--active');
+        });
+        template_u1.onrender(element_08qtvcs5, (element) => { hover = element; });
+        template_u1.slot(element_08qtvcs6, tabs.map((tab) => {
+            let root_08qtvcs9 = template_08qtvcsa(), element_08qtvcsb = root_08qtvcs9.firstChild, element_08qtvcsc = element_08qtvcsb.firstElementChild;
+            template_u1.setProperty(element_08qtvcsb, 'id', template_u1.interpolate([(id), "-tab-", (tab.id)]));
+            template_u1.setProperties(element_08qtvcsb, attributes[SLIDING_TABS_TAB]);
+            template_u1.setProperty(element_08qtvcsb, 'aria-controls', `${id}-panel-${tab.id}`);
+            template_u1.setProperty(element_08qtvcsb, 'aria-selected', () => String(s.selected === tab.id));
+            template_u1.setList(element_08qtvcsb, 'class', () => s.selected === tab.id && '--active');
+            template_u1.delegate(element_08qtvcsb, 'click', () => select(tab.id));
+            template_u1.on(element_08qtvcsb, 'pointerenter', (e) => enter(tab.id, e));
+            template_u1.onrender(element_08qtvcsb, (element) => {
+                tabRefs.set(tab.id, element);
+            });
+            template_u1.setProperty(element_08qtvcsb, 'tabindex', () => s.selected === tab.id ? 0 : -1);
+            template_u1.slot(element_08qtvcsc, tab.label, 1);
+            return root_08qtvcs9;
+        }));
+        template_u1.onrender(element_08qtvcs7, (element) => { underline = element; });
+        template_u1.slot(element_08qtvcs8, tabs.map((tab) => {
+            let root_08qtvcsd = template_08qtvcse(), element_08qtvcsf = root_08qtvcsd.firstChild;
+            template_u1.setList(element_08qtvcsf, 'class', tab.id === initial && '--active');
+            template_u1.setProperty(element_08qtvcsf, 'id', template_u1.interpolate([(id), "-panel-", (tab.id)]));
+            template_u1.setProperties(element_08qtvcsf, attributes[SLIDING_TABS_PANEL]);
+            template_u1.setProperty(element_08qtvcsf, 'aria-labelledby', `${id}-tab-${tab.id}`);
+            template_u1.onrender(element_08qtvcsf, (element) => {
+                panels.set(tab.id, element);
+            });
+            template_u1.slot(element_08qtvcsf, tab.content, 1);
+            return root_08qtvcsd;
+        }), 1);
+        return root_08qtvcs1;
+    })();
+};
+export default Object.assign(slidingTabs, { panel: SLIDING_TABS_PANEL, tab: SLIDING_TABS_TAB });

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

@@ -0,0 +1,2 @@
+@layer components {.sliding-tabs{--border-color:var(--color-border-300);--color:var(--color-text-300);--color-active:var(--color-text-500);--focus-color:var(--color-text-500);--font-size:var(--font-size-400);--font-weight:var(--font-weight-500);--hover-background:var(--color-grey-400);--hover-duration:.19s;--hover-duration-in:.15s;--hover-duration-out:.1s;--hover-inset:6px;--lead-duration:.25s;--panel-color:var(--color-text-300);--panel-padding:20px var(--size-400) 4px;--radius:var(--border-radius-400);--spring:linear(0, .0432 4.2%, .1402 8.3%, .2575 12.5%, .3764 16.7%, .4867 20.8%, .584 25%, .667 29.2%, .7361 33.3%, .7925 37.5%, .838 41.7%, .8743 45.8%, .9029 50%, .9254 54.2%, .9428 58.3%, .9564 62.5%, .9668 66.7%, .9748 70.8%, .9809 75%, .9856 79.2%, .9892 83.3%, .9918 87.5%, .9939 91.7%, .9954 95.8%, 1);--tab-height:44px;--tab-padding:var(--size-400);--tail-duration:.425s;--underline-color:var(--color-text-500);--underline-height:2px}.sliding-tabs--accent{--underline-color:var(--color-blue-400)}.sliding-tabs--snappy{--lead-duration:.2s;--tail-duration:.2s}@property --sliding-tabs-left{syntax:"<length>";inherits:false;initial-value:0}@property --sliding-tabs-right{syntax:"<length>";inherits:false;initial-value:0}.sliding-tabs{flex-direction:column;min-width:0;display:flex}.sliding-tabs-hover{background:var(--hover-background);border-radius:calc(var(--radius) - 2px);height:calc(var(--tab-height) - var(--hover-inset) * 2);opacity:0;pointer-events:none;left:0;top:var(--hover-inset);transition:opacity var(--hover-duration-out) cubic-bezier(.23, 1, .32, 1), translate var(--hover-duration) var(--spring), width var(--hover-duration) var(--spring);position:absolute}.sliding-tabs-hover.--active{opacity:1;transition-duration:var(--hover-duration-in), var(--hover-duration), var(--hover-duration)}.sliding-tabs-label{transition:scale .15s ease-out;position:relative}.sliding-tabs-list{border-bottom:var(--border-width-400) solid var(--border-color);gap:2px;padding-inline:2px;display:flex;position:relative}.sliding-tabs-panel{border-radius:var(--radius);color:var(--panel-color);font-size:var(--font-size);padding:var(--panel-padding);text-wrap:pretty;outline:none;grid-area:1/1;line-height:1.625}.sliding-tabs-panel.--active,.sliding-tabs-panel.--leaving{display:block}.sliding-tabs-panel.--leaving{pointer-events:none}.sliding-tabs-panel:focus-visible{outline:2px solid var(--focus-color)}.sliding-tabs-panels{display:grid}.sliding-tabs-tab{border-radius:var(--radius);color:var(--color);cursor:pointer;font-size:var(--font-size);font-weight:var(--font-weight);height:var(--tab-height);padding-inline:var(--tab-padding);touch-action:manipulation;-webkit-user-select:none;user-select:none;white-space:nowrap;background:0 0;border:0;outline:none;align-items:center;transition:color .15s ease-out;display:flex;position:relative}.sliding-tabs-tab:active .sliding-tabs-label{scale:.96}.sliding-tabs-tab:focus-visible{outline:2px solid var(--focus-color);outline-offset:-4px}.sliding-tabs-tab:hover,.sliding-tabs-tab.--active{color:var(--color-active)}.sliding-tabs-underline{background:var(--underline-color);bottom:calc(var(--border-width-400) * -1);clip-path:inset(0 calc(100% - var(--sliding-tabs-right)) 0 var(--sliding-tabs-left) round 1px);height:var(--underline-height);pointer-events:none;transition:--sliding-tabs-left var(--lead-duration) var(--spring), --sliding-tabs-right var(--tail-duration) var(--spring);display:none;position:absolute;inset-inline:0}.sliding-tabs-underline.--forward{transition:--sliding-tabs-left var(--tail-duration) var(--spring), --sliding-tabs-right var(--lead-duration) var(--spring)}.sliding-tabs-list.--ready>.sliding-tabs-underline{display:block}.sliding-tabs-hover.--instant,.sliding-tabs-underline.--instant{transition:none}.sliding-tabs-list:not(.--ready) .sliding-tabs-tab.--active:after{background:var(--underline-color);bottom:calc(var(--border-width-400) * -1);content:"";height:var(--underline-height);border-radius:1px;position:absolute;inset-inline:0}@media (width<=639px){.sliding-tabs{--tab-padding:10px}}@media (prefers-reduced-motion:reduce){.sliding-tabs{--hover-duration:0s;--lead-duration:0s;--tail-duration:0s}.sliding-tabs-label{transition:none}}}
+/*$vite$:1*/

package/build/components/snap-carousel/index.d.ts

@@ -0,0 +1,30 @@
+import { type Attributes, type Renderable } from '@esportsplus/template';
+import './scss/index.scss';
+declare const SNAP_CAROUSEL_ARROW: unique symbol;
+declare const SNAP_CAROUSEL_CARD: unique symbol;
+type A = Attributes & {
+    [SNAP_CAROUSEL_ARROW]?: Attributes;
+    [SNAP_CAROUSEL_CARD]?: Attributes;
+    label?: string;
+    slides: Slide[];
+    state?: State;
+};
+type Slide = {
+    text: Renderable<unknown>;
+    title: Renderable<unknown>;
+    visual?: Renderable<unknown>;
+};
+type State = {
+    active: number;
+    end: boolean;
+    start: boolean;
+};
+declare function template(this: {
+    attributes?: Partial<A>;
+} | void, { label, slides, state, ...attributes }: A): DocumentFragment | Text;
+declare const _default: typeof template & {
+    readonly arrow: typeof SNAP_CAROUSEL_ARROW;
+    readonly card: typeof SNAP_CAROUSEL_CARD;
+};
+export default _default;
+export type { Slide as SnapCarouselSlide, State as SnapCarouselState };