@esportsplus/ui 0.56.3 → 0.57.0

package/build/components/radio-cards/scss/index.scss

@@ -1,2 +0,0 @@
-@layer components {.radio-cards{--amount-font-size:calc(var(--font-size-400) * 1.125);--background:var(--background-default);--background-default:var(--color-white-300);--background-hover:var(--color-grey-400);--badge-background:var(--color-grey-400);--badge-background-hover:var(--color-white-300);--box-shadow:0 0 0 1px 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);--card-border-radius:var(--border-radius-700);--card-gap:var(--size-300);--check-color:var(--color-white-300);--check-size:12px;--check-stroke-width:2.25;--color:var(--color-text-500);--color-muted:var(--color-text-300);--description-font-size:calc(var(--font-size-400) * .875);--description-line-height:1.43;--dot-border-width:1.5px;--dot-size:var(--size-500);--focus-width:var(--border-width-500);--padding:var(--size-400);--press-scale:.98;--ring-color:var(--color);--ring-width:var(--border-width-500);--title-line-height:1.4;--transition-duration:.15s;--transition-timing-function:ease-out;--width:min(480px, 100%);color:var(--color);min-width:0;width:var(--width);border:0;margin:0;padding:0}.radio-cards-amount{color:var(--color);font-size:var(--amount-font-size);font-variant-numeric:tabular-nums;font-weight:var(--font-weight-500)}.radio-cards-badge{background:var(--badge-background);color:var(--color-muted);font-size:var(--font-size-300);font-weight:var(--font-weight-400);padding:2px var(--size-200);transition:background var(--transition-duration) var(--transition-timing-function);border-radius:999px;line-height:1.4}.radio-cards-card{background:var(--background);border-radius:var(--card-border-radius);box-shadow:var(--box-shadow);cursor:pointer;align-items:center;gap:var(--padding);padding:var(--padding);touch-action:manipulation;transition:background var(--transition-duration) var(--transition-timing-function), scale var(--transition-duration) var(--transition-timing-function);-webkit-user-select:none;user-select:none;display:flex;position:relative}.radio-cards-card:hover{--background:var(--background-hover);--badge-background:var(--badge-background-hover)}.radio-cards-card:active{scale:var(--press-scale)}.radio-cards-card:has(input:checked){z-index:1}.radio-cards-card:has(input:focus-visible){outline:var(--focus-width) solid var(--color);outline-offset:2px}.radio-cards-check{color:var(--check-color);filter:blur(4px);height:var(--check-size);opacity:0;pointer-events:none;stroke-width:var(--check-stroke-width);transition:filter .3s linear(0, .058, .18, .321, .455, .573, .671, .75, .812, .86, .897, .924, .944, .96, .971, .979, .985, .989, .992, .994, .996, .997, .998, .999, 1), opacity .3s linear(0, .058, .18, .321, .455, .573, .671, .75, .812, .86, .897, .924, .944, .96, .971, .979, .985, .989, .992, .994, .996, .997, .998, .999, 1), scale .3s linear(0, .058, .18, .321, .455, .573, .671, .75, .812, .86, .897, .924, .944, .96, .971, .979, .985, .989, .992, .994, .996, .997, .998, .999, 1);width:var(--check-size);margin:auto;position:absolute;inset:0;scale:.25}.radio-cards-content{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.radio-cards-description{color:var(--color-muted);font-size:var(--description-font-size);line-height:var(--description-line-height);text-wrap:pretty}.radio-cards-dot{flex:none;display:grid;position:relative}.radio-cards-dot .checkbox{--background-active:transparent;--border-color-active:var(--color);--border-color-default:color-mix(in oklch, var(--color) 25%, transparent);--border-color-hover:color-mix(in oklch, var(--color) 45%, transparent);--border-width:var(--dot-border-width);--border-width-offset-hover:0px;--box-shadow-active:none;--focus-width:0px;--indicator-color-default:var(--color);--scale-active:1;--scale-default:.5;--scale-hover:.5;--scale-pressed:.5;--size:var(--dot-size);--transition-duration:.15s;--transition-timing-function:ease-out}.radio-cards-dot .checkbox:before{--box-shadow:none;--height:calc(100% + var(--dot-border-width) * 2);--width:calc(100% + var(--dot-border-width) * 2);inset:calc(var(--dot-border-width) * -1);opacity:0;border-radius:50%;transition:opacity .15s cubic-bezier(.23,1,.32,1),scale .15s cubic-bezier(.23,1,.32,1)}.radio-cards-dot .checkbox:has(input:checked):before{opacity:1;transition:opacity .35s linear(0, .077, .251, .456, .649, .809, .927, 1.004, 1.048, 1.066, 1.067, 1.058, 1.045, 1.031, 1.019, 1.009, 1.002, .998, .996, .995, .996, .996, .997, .998, 1), scale .35s linear(0, .077, .251, .456, .649, .809, .927, 1.004, 1.048, 1.066, 1.067, 1.058, 1.045, 1.031, 1.019, 1.009, 1.002, .998, .996, .995, .996, .996, .997, .998, 1)}.radio-cards-dot:has(input:checked) .radio-cards-check{filter:blur();opacity:1;scale:1}.radio-cards-grid{gap:var(--card-gap);grid-auto-rows:1fr;display:grid}.radio-cards-heading{align-items:center;gap:var(--size-200);display:flex}.radio-cards-legend{color:var(--color);font-size:var(--font-size-400);font-weight:var(--font-weight-400);margin-bottom:var(--card-gap);padding:0}.radio-cards-period{color:var(--color-muted);font-size:var(--font-size-300)}.radio-cards-price{flex:none;align-items:baseline;gap:2px;display:flex}.radio-cards-ring{border:var(--ring-width) solid var(--ring-color);border-radius:inherit;opacity:0;pointer-events:none;position:absolute;inset:0}.radio-cards-card:has(input:checked) .radio-cards-ring{opacity:1}.radio-cards-title{color:var(--color);font-size:var(--font-size-400);font-weight:var(--font-weight-500);line-height:var(--title-line-height)}@media (prefers-reduced-motion:reduce){.radio-cards-card{transition:background var(--transition-duration) var(--transition-timing-function)}.radio-cards-card:active{scale:1}.radio-cards-check{filter:none;transition:opacity .15s cubic-bezier(.23,1,.32,1);scale:1}.radio-cards-dot .checkbox{--scale-default:1;--scale-hover:1;--scale-pressed:1}.radio-cards-dot .checkbox:before{transition:opacity .15s cubic-bezier(.23,1,.32,1)}.radio-cards-dot .checkbox:has(input:checked):before{transition:opacity .15s cubic-bezier(.23,1,.32,1)}}}
-/*$vite$:1*/

package/build/components/range-filter/index.d.ts

@@ -1,20 +0,0 @@
-import { type Attributes } from '@esportsplus/template';
-import './scss/index.scss';
-type A = Attributes & {
-    format?: (value: number) => string;
-    label?: string;
-    max?: number;
-    min?: number;
-    prefix?: string;
-    state?: State;
-    step?: number;
-    ticks?: number;
-    value?: [number, number];
-};
-type State = {
-    high: number;
-    low: number;
-};
-export default _default;
-declare function _default({ format, label, max, min, prefix, state, step, ticks, value, ...attributes }: A): DocumentFragment | Text;
-export type { State as RangeFilterState };

package/build/components/range-filter/index.js

@@ -1,216 +0,0 @@
-import * as reactivity_u0 from '@esportsplus/reactivity';
-import * as template_u1 from '@esportsplus/template';
-import './scss/index.scss';
-const template_07v3z3x3 = template_u1.template(`<span class='range-filter-number'><span class='range-filter-sr'></span><span aria-hidden='true' class='range-filter-columns'>`);
-const template_07v3z3x7 = template_u1.template(`<span class='range-filter-column'><span class='range-filter-strip'></span><span class='range-filter-symbol'>`);
-const template_07v3z3xc = template_u1.template(`<span>`);
-const template_07v3z3xf = template_u1.template(`<div class='range-filter'><div class='range-filter-header'><div><p class='range-filter-label'></p><div class='range-filter-values'><span class='range-filter-value'><!--$--></span><span class='range-filter-dash'>–</span><span class='range-filter-value'><!--$--></span></div></div><button class='range-filter-clear' type='button'><svg aria-hidden='true' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'><path d='M18 6 6 18M6 6l12 12' /></svg> Clear </button></div><div class='range-filter-body'><div class='range-filter-root' role='group'><div class='range-filter-track'><div class='range-filter-range'></div></div><div aria-hidden='true' class='range-filter-ghost'></div></div><div aria-hidden='true' class='range-filter-ticks'>`);
-const template_07v3z3xs = template_u1.template(`<div class='range-filter-thumb' role='slider' tabindex='0'>`);
-const template_07v3z3xv = template_u1.template(`<span><!--$-->`);
-class ReactiveObject_07v3z3x0 extends reactivity_u0.ReactiveObject {
-    #high;
-    #low;
-    constructor(_p0, _p1) {
-        super(null);
-        this.#high = this[reactivity_u0.SIGNAL](_p0);
-        this.#low = this[reactivity_u0.SIGNAL](_p1);
-    }
-    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);
-    }
-}
-class ReactiveObject_07v3z3x1 extends reactivity_u0.ReactiveObject {
-    #dragging = this[reactivity_u0.SIGNAL](-1);
-    #preview = 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);
-    }
-    get preview() {
-        return reactivity_u0.read(this.#preview);
-    }
-    set preview(_v1) {
-        reactivity_u0.write(this.#preview, _v1);
-    }
-}
-const DIGITS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
-const KEYS = ['low', 'high'];
-function clamp(value, min, max) {
-    return Math.min(Math.max(value, min), max);
-}
-function snap(value, min, step) {
-    return Math.round((value - min) / step) * step + min;
-}
-export default ({ format = (value) => value.toLocaleString('en-US'), label = 'Price Range', max = 1000, min = 0, prefix = '$', state, step = 10, ticks = 5, value, ...attributes }) => {
-    let span = max - min || 1, s = state ?? new ReactiveObject_07v3z3x0(value?.[1] ?? clamp(snap(min + span * 0.65, min, step), min, max), value?.[0] ?? clamp(snap(min + span * 0.15, min, step), min, max)), drag = -1, labels = [], root, thumbs = [], ui = new ReactiveObject_07v3z3x1();
-    for (let i = 0; i < ticks; i++) {
-        let tick = snap(min + (i * span) / Math.max(1, ticks - 1), min, step);
-        if (!labels.includes(tick)) {
-            labels.push(tick);
-        }
-    }
-    function commit(index, raw) {
-        let next = clamp(snap(raw, min, step), min, max);
-        s[KEYS[index]] = index === 0 ? Math.min(next, s.high) : Math.max(next, s.low);
-    }
-    function at(x) {
-        if (!root) {
-            return min;
-        }
-        let rect = root.getBoundingClientRect();
-        return clamp(snap(((x - rect.left) / rect.width) * span + min, min, step), min, max);
-    }
-    function keydown(index, event) {
-        let big = step * 10, 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 pct(value) {
-        return ((value - min) / span) * 100;
-    }
-    function release() {
-        drag = -1;
-        ui.dragging = -1;
-    }
-    function roll(key) {
-        let width = format(max).length;
-        function char(i) {
-            let text = format(s[key]), pad = width - text.length;
-            return i < pad ? '' : text[i - pad];
-        }
-        return (() => {
-            let root_07v3z3x2 = template_07v3z3x3(), element_07v3z3x4 = root_07v3z3x2.firstChild.firstElementChild, element_07v3z3x5 = element_07v3z3x4.nextElementSibling;
-            new template_u1.EffectSlot(element_07v3z3x4, () => format(s[key]), 1);
-            template_u1.slot(element_07v3z3x5, Array.from({ length: width }, (_, i) => {
-                let root_07v3z3x6 = template_07v3z3x7(), element_07v3z3x8 = root_07v3z3x6.firstChild, element_07v3z3x9 = element_07v3z3x8.firstElementChild, element_07v3z3xa = element_07v3z3x9.nextElementSibling;
-                template_u1.setList(element_07v3z3x8, 'class', () => {
-                    let c = char(i);
-                    return c === '' ? '--empty' : DIGITS.includes(c) ? '--digit' : '--symbol';
-                });
-                template_u1.setList(element_07v3z3x9, 'style', () => `--digit: ${DIGITS.includes(char(i)) ? char(i) : 0}`);
-                template_u1.slot(element_07v3z3x9, DIGITS.map((digit) => {
-                    let root_07v3z3xb = template_07v3z3xc(), element_07v3z3xd = root_07v3z3xb.firstChild;
-                    template_u1.slot(element_07v3z3xd, digit, 1);
-                    return root_07v3z3xb;
-                }), 1);
-                new template_u1.EffectSlot(element_07v3z3xa, () => DIGITS.includes(char(i)) ? '' : char(i), 1);
-                return root_07v3z3x6;
-            }), 1);
-            return root_07v3z3x2;
-        })();
-    }
-    return (() => {
-        let root_07v3z3xe = template_07v3z3xf(), element_07v3z3xg = root_07v3z3xe.firstChild, element_07v3z3xh = element_07v3z3xg.firstElementChild.firstElementChild.firstElementChild, element_07v3z3xi = element_07v3z3xh.nextElementSibling.firstElementChild.firstChild, element_07v3z3xj = element_07v3z3xh.nextElementSibling.firstElementChild, element_07v3z3xk = element_07v3z3xj.nextElementSibling.nextElementSibling.firstChild, element_07v3z3xl = element_07v3z3xj.nextElementSibling.nextElementSibling, element_07v3z3xm = element_07v3z3xg.firstElementChild.firstElementChild.nextElementSibling, element_07v3z3xn = element_07v3z3xg.firstElementChild.nextElementSibling.firstElementChild, element_07v3z3xo = element_07v3z3xn.firstElementChild.firstElementChild, element_07v3z3xp = element_07v3z3xn.firstElementChild.nextElementSibling, element_07v3z3xq = element_07v3z3xn.nextElementSibling;
-        template_u1.setProperties(element_07v3z3xg, attributes);
-        template_u1.slot(element_07v3z3xh, label, 1);
-        template_u1.slot(element_07v3z3xi, prefix);
-        template_u1.slot(element_07v3z3xj, roll('low'), 2);
-        template_u1.slot(element_07v3z3xk, prefix);
-        template_u1.slot(element_07v3z3xl, roll('high'), 2);
-        template_u1.delegate(element_07v3z3xm, 'click', () => {
-            s.low = min;
-            s.high = max;
-        });
-        template_u1.setProperty(element_07v3z3xm, 'disabled', () => s.low === min && s.high === max);
-        template_u1.setProperty(element_07v3z3xn, 'aria-label', label);
-        template_u1.setList(element_07v3z3xn, 'class', () => ui.dragging !== -1 && '--dragging');
-        template_u1.delegate(element_07v3z3xn, 'lostpointercapture', release);
-        template_u1.delegate(element_07v3z3xn, 'pointercancel', release);
-        template_u1.delegate(element_07v3z3xn, 'pointerdown', (event) => {
-            if (event.button !== 0 || !root) {
-                return;
-            }
-            let grabbed = event.target.closest('[data-thumb]'), v = at(event.clientX), index;
-            if (grabbed) {
-                index = Number(grabbed.dataset.thumb);
-            }
-            else {
-                let toHigh = Math.abs(v - s.high), toLow = Math.abs(v - s.low);
-                index = toLow === toHigh ? (v < s.low ? 0 : 1) : (toLow < toHigh ? 0 : 1);
-            }
-            event.preventDefault();
-            thumbs[index]?.focus({ preventScroll: true });
-            root.setPointerCapture(event.pointerId);
-            drag = index;
-            ui.dragging = index;
-            ui.preview = -1;
-            commit(index, v);
-        });
-        template_u1.on(element_07v3z3xn, 'pointerleave', () => {
-            ui.preview = -1;
-        });
-        template_u1.delegate(element_07v3z3xn, 'pointermove', (event) => {
-            if (drag !== -1) {
-                commit(drag, at(event.clientX));
-                return;
-            }
-            if (event.pointerType === 'mouse') {
-                ui.preview = at(event.clientX);
-            }
-        });
-        template_u1.delegate(element_07v3z3xn, 'pointerup', release);
-        template_u1.onrender(element_07v3z3xn, (element) => {
-            root = element;
-        });
-        template_u1.setList(element_07v3z3xo, 'style', () => `left: ${pct(s.low)}%; right: ${100 - pct(s.high)}%;`);
-        template_u1.setList(element_07v3z3xp, 'class', () => (ui.preview !== -1 && (ui.preview < s.low || ui.preview > s.high)) && '--active');
-        template_u1.setList(element_07v3z3xp, 'style', () => {
-            let p = ui.preview;
-            if (p === -1 || (p >= s.low && p <= s.high)) {
-                return '';
-            }
-            return p < s.low
-                ? `left: ${pct(p)}%; width: ${pct(s.low) - pct(p)}%;`
-                : `left: ${pct(s.high)}%; width: ${pct(p) - pct(s.high)}%;`;
-        });
-        template_u1.slot(element_07v3z3xn, KEYS.map((key, index) => {
-            let root_07v3z3xr = template_07v3z3xs(), element_07v3z3xt = root_07v3z3xr.firstChild;
-            template_u1.setProperty(element_07v3z3xt, 'aria-label', `${index === 0 ? 'Minimum' : 'Maximum'} ${label.toLowerCase()}`);
-            template_u1.setProperty(element_07v3z3xt, 'aria-valuemax', max);
-            template_u1.setProperty(element_07v3z3xt, 'aria-valuemin', min);
-            template_u1.setProperty(element_07v3z3xt, 'data-thumb', index);
-            template_u1.setProperty(element_07v3z3xt, 'aria-valuenow', () => s[key]);
-            template_u1.setProperty(element_07v3z3xt, 'aria-valuetext', () => `${prefix}${format(s[key])}`);
-            template_u1.setList(element_07v3z3xt, 'class', () => ui.dragging === index && '--active');
-            template_u1.delegate(element_07v3z3xt, 'keydown', (event) => keydown(index, event));
-            template_u1.onrender(element_07v3z3xt, (element) => {
-                thumbs[index] = element;
-            });
-            template_u1.setList(element_07v3z3xt, 'style', () => `--position: ${pct(s[key]) / 100}; z-index: ${ui.dragging === index || (index === 0 && s.low === max) ? 3 : 2};`);
-            return root_07v3z3xr;
-        }), 2);
-        template_u1.slot(element_07v3z3xq, labels.map((tick) => {
-            let root_07v3z3xu = template_07v3z3xv(), element_07v3z3xw = root_07v3z3xu.firstChild.firstChild, element_07v3z3xx = root_07v3z3xu.firstChild;
-            template_u1.slot(element_07v3z3xw, prefix);
-            template_u1.slot(element_07v3z3xx, format(tick), 2);
-            return root_07v3z3xu;
-        }), 1);
-        return root_07v3z3xe;
-    })();
-};

package/build/components/range-filter/scss/index.scss

@@ -1,2 +0,0 @@
-@layer components {.range-filter{--clear-background:var(--color-white-300);--clear-border:var(--color-border-300);--clear-hover:var(--color-grey-400);--color:var(--color-text-500);--focus-color:oklch(from var(--color-text-500) l c h / .3);--ghost-color:oklch(from var(--color-text-500) l c h / .3);--muted-color:var(--color-text-300);--range-color:var(--color-text-500);--roll-duration:.5s;--roll-ease:cubic-bezier(.23, 1, .32, 1);--thumb-background:var(--color-white-300);--thumb-border:var(--color-text-500);--thumb-size:20px;--tick-color:oklch(from var(--color-text-300) l c h / .6);--track-color:var(--color-grey-500);--track-height:8px;--value-font-size:var(--font-size-500);--width:384px;color:var(--color);max-width:100%;width:var(--width);flex-direction:column;gap:20px;margin-inline:auto;display:flex}.range-filter-body{flex-direction:column;gap:8px;display:flex}.range-filter-clear{background:var(--clear-background);border:1px solid var(--clear-border);box-shadow:0 1px 2px oklch(from var(--color-black-300) l c h/.05);color:var(--muted-color);cursor:pointer;font:inherit;font-size:12px;font-weight:var(--font-weight-500);outline:0 solid var(--focus-color);outline-offset:2px;border-radius:6px;flex-shrink:0;align-items:center;gap:4px;height:24px;padding:0 8px;transition:background-color .15s ease-out,color .15s ease-out,opacity .15s ease-out;display:inline-flex}.range-filter-clear:disabled{cursor:default;opacity:.5}.range-filter-clear:focus-visible{outline-width:2px}.range-filter-clear:not(:disabled):hover{background:var(--clear-hover);color:var(--color)}.range-filter-clear svg{width:12px;height:12px}.range-filter-column{text-align:center;max-width:1ch;height:1lh;transition:max-width var(--roll-duration) var(--roll-ease), opacity var(--roll-duration) var(--roll-ease);vertical-align:bottom;display:inline-block;position:relative;overflow:hidden}.range-filter-column.--digit{width:1ch}.range-filter-column.--symbol{white-space:pre;max-width:1.5em}.range-filter-column.--empty{opacity:0;max-width:0}.range-filter-column.--symbol .range-filter-strip,.range-filter-column:not(.--symbol) .range-filter-symbol{display:none}.range-filter-columns{display:inline-flex}.range-filter-dash{color:var(--muted-color)}.range-filter-ghost{background:var(--ghost-color);height:var(--track-height);opacity:0;pointer-events:none;z-index:1;border-radius:999px;transition:left 75ms ease-out,opacity .1s ease-out,width 75ms ease-out;position:absolute;top:50%;translate:0 -50%}.range-filter-ghost.--active{opacity:1}.range-filter-header{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.range-filter-label{color:var(--muted-color);font-size:12px;font-weight:var(--font-weight-500);letter-spacing:.05em;text-transform:uppercase;margin:0 0 4px}.range-filter-number{display:inline-flex}.range-filter-range{background:var(--range-color);transition:none;position:absolute;inset-block:0}.range-filter-root{cursor:pointer;height:var(--thumb-size);touch-action:none;-webkit-user-select:none;user-select:none;align-items:center;width:100%;display:flex;position:relative}.range-filter-sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.range-filter-strip{transition:translate var(--roll-duration) var(--roll-ease);translate:0 calc(var(--digit,0) * -10%);flex-direction:column;display:flex;position:absolute;top:0;left:0;right:0}.range-filter-strip span{height:1lh}.range-filter-thumb{background:var(--thumb-background);border:2px solid var(--thumb-border);box-shadow:0 4px 6px -1px oklch(from var(--color-black-300) l c h/.1), 0 2px 4px -2px oklch(from var(--color-black-300) l c h/.1);height:var(--thumb-size);left:calc(var(--thumb-size) / 2 + var(--position) * (100% - var(--thumb-size)));outline:0 solid var(--focus-color);outline-offset:2px;width:var(--thumb-size);border-radius:50%;transition:scale .15s ease-out;position:absolute;top:50%;translate:-50% -50%}.range-filter-thumb:focus-visible{outline-width:3px}.range-filter-thumb:hover,.range-filter-thumb.--active{scale:1.25}.range-filter-ticks{color:var(--tick-color);font-size:11px;font-weight:var(--font-weight-500);-webkit-user-select:none;user-select:none;justify-content:space-between;display:flex}.range-filter-track{background:var(--track-color);height:var(--track-height);border-radius:999px;width:100%;position:relative;overflow:hidden}.range-filter-value{font-size:var(--value-font-size);font-variant-numeric:tabular-nums;font-weight:var(--font-weight-700,700);align-items:center;display:inline-flex}.range-filter-values{align-items:center;gap:6px;display:flex}@media (prefers-reduced-motion:reduce){.range-filter-column,.range-filter-ghost,.range-filter-strip,.range-filter-thumb{transition:none}.range-filter-thumb:hover,.range-filter-thumb.--active{scale:1}}}
-/*$vite$:1*/

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

@@ -1,30 +0,0 @@
-import { type Attributes } from '@esportsplus/template';
-import input from '../input/index.js';
-import './scss/index.scss';
-type A = Attributes & {
-    [RANGE_SLIDER_INPUT]?: Parameters<typeof input>[0];
-    [RANGE_SLIDER_THUMB]?: Attributes;
-    format?: (value: number) => string;
-    label: string;
-    max?: number;
-    min?: number;
-    prefix?: string;
-    state?: State;
-    step?: number;
-    value?: [number, number];
-};
-type State = {
-    high: number;
-    low: number;
-};
-declare const RANGE_SLIDER_INPUT: unique symbol;
-declare const RANGE_SLIDER_THUMB: unique symbol;
-declare function template(this: {
-    attributes?: Partial<A>;
-} | void, { format, label, max, min, prefix, state, step, value, ...attributes }: A): DocumentFragment | Text;
-declare const _default: typeof template & {
-    readonly input: typeof RANGE_SLIDER_INPUT;
-    readonly thumb: typeof RANGE_SLIDER_THUMB;
-};
-export default _default;
-export type { State };

package/build/components/range-slider/index.js

@@ -1,287 +0,0 @@
-import * as template_u1 from '@esportsplus/template';
-import * as reactivity_u0 from '@esportsplus/reactivity';
-import input from '../input/index.js';
-import './scss/index.scss';
-const template_0uvwels4 = template_u1.template(`<label class='range-slider-field'><span class='range-slider-field-label'>Min</span><!--$-->`);
-const template_0uvwels8 = template_u1.template(`<span class='range-slider-field-prefix' aria-hidden='true'>`);
-const template_0uvwelsb = template_u1.template(`<label class='range-slider-field'><span class='range-slider-field-label'>Max</span><!--$-->`);
-const template_0uvwelsh = template_u1.template(`<label class='range-slider-field'><span class='range-slider-field-label'></span><!--$-->`);
-const template_0uvwelso = template_u1.template(`<div class='range-slider-handle '><div class='range-slider-thumb' role='slider' tabindex='0'><span class='range-slider-tooltip' aria-hidden='true'>`);
-const template_0uvwelst = template_u1.template(`<div class='range-slider'><div class='range-slider-header'><span class='range-slider-label'></span><span class='range-slider-summary'></span></div><div class='range-slider-track' role='group'><div class='range-slider-rail'><div class='range-slider-fill'></div></div><!--$--></div><div class='range-slider-fields'><!--$--><span class='range-slider-dash' aria-hidden='true'>`);
-class ReactiveObject_0uvwels0 extends reactivity_u0.ReactiveObject {
-    #high;
-    #low;
-    constructor(_p0, _p1) {
-        super(null);
-        this.#high = this[reactivity_u0.SIGNAL](_p0);
-        this.#low = this[reactivity_u0.SIGNAL](_p1);
-    }
-    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);
-    }
-}
-class ReactiveObject_0uvwels1 extends reactivity_u0.ReactiveObject {
-    #dragging = this[reactivity_u0.SIGNAL](-1);
-    #gliding = this[reactivity_u0.SIGNAL](false);
-    constructor() {
-        super(null);
-    }
-    get dragging() {
-        return reactivity_u0.read(this.#dragging);
-    }
-    set dragging(_v0) {
-        reactivity_u0.write(this.#dragging, _v0);
-    }
-    get gliding() {
-        return reactivity_u0.read(this.#gliding);
-    }
-    set gliding(_v1) {
-        reactivity_u0.write(this.#gliding, _v1);
-    }
-}
-class ReactiveObject_0uvwels2 extends reactivity_u0.ReactiveObject {
-    #value;
-    constructor(_p0) {
-        super(null);
-        this.#value = this[reactivity_u0.SIGNAL](_p0);
-    }
-    get value() {
-        return reactivity_u0.read(this.#value);
-    }
-    set value(_v0) {
-        reactivity_u0.write(this.#value, _v0);
-    }
-}
-const KEYS = ['low', 'high'];
-const RANGE_SLIDER_INPUT = Symbol.for('@esportsplus/ui/range-slider.input');
-const RANGE_SLIDER_THUMB = Symbol.for('@esportsplus/ui/range-slider.thumb');
-function clamp(value, lo, hi) {
-    return Math.min(Math.max(value, lo), hi);
-}
-function template({ format = String, label, max = 100, min = 0, prefix = '', state, step = 1, value, ...attributes }) {
-    let decimals = (String(step).split('.')[1] || '').length, defaults = this?.attributes, drag = null, name = label.toLowerCase(), s = state || new ReactiveObject_0uvwels0(value?.[1] ?? max, value?.[0] ?? min), span = max - min, thumbs = [], track, ui = new ReactiveObject_0uvwels1();
-    function commit(thumb, raw) {
-        let next = Number((Math.round((raw - min) / step) * step + min).toFixed(decimals)), bounded = thumb === 0 ? clamp(next, min, s.high - step) : clamp(next, s.low + step, max);
-        if (bounded === s[KEYS[thumb]]) {
-            return;
-        }
-        s[KEYS[thumb]] = bounded;
-    }
-    function end() {
-        drag = null;
-        ui.dragging = -1;
-        ui.gliding = false;
-    }
-    function field(thumb) {
-        let draft = new ReactiveObject_0uvwels2(null), key = KEYS[thumb];
-        function save() {
-            if (draft.value === null) {
-                return;
-            }
-            let parsed = Number(draft.value.replace(/[^\d.]/g, ''));
-            if (draft.value.trim() !== '' && Number.isFinite(parsed)) {
-                commit(thumb, parsed);
-            }
-            draft.value = null;
-        }
-        return (thumb === 0 ? (() => {
-            let root_0uvwels3 = template_0uvwels4(), element_0uvwels5 = root_0uvwels3.firstChild.firstChild.nextSibling, element_0uvwels6 = root_0uvwels3.firstChild;
-            template_u1.slot(element_0uvwels5, prefix && (() => {
-                let root_0uvwels7 = template_0uvwels8(), element_0uvwels9 = root_0uvwels7.firstChild;
-                template_u1.slot(element_0uvwels9, prefix, 1);
-                return root_0uvwels7;
-            })());
-            template_u1.slot(element_0uvwels6, input({
-                'aria-label': `${thumb === 0 ? 'Minimum' : 'Maximum'} ${name}`,
-                autocomplete: 'off',
-                class: 'range-slider-input',
-                inputmode: 'numeric',
-                onblur: save,
-                oninput: (e) => {
-                    draft.value = e.target.value;
-                },
-                onkeydown: (e) => {
-                    if (e.key === 'Enter') {
-                        save();
-                    }
-                    else if (e.key === 'Escape') {
-                        draft.value = null;
-                    }
-                },
-                value: () => draft.value ?? String(s[key]),
-                ...defaults?.[RANGE_SLIDER_INPUT],
-                ...attributes[RANGE_SLIDER_INPUT]
-            }), 2);
-            return root_0uvwels3;
-        })() : thumb === 1 ? (() => {
-            let root_0uvwelsa = template_0uvwelsb(), element_0uvwelsc = root_0uvwelsa.firstChild.firstChild.nextSibling, element_0uvwelsd = root_0uvwelsa.firstChild;
-            template_u1.slot(element_0uvwelsc, prefix && (() => {
-                let root_0uvwelse = template_0uvwels8(), element_0uvwelsf = root_0uvwelse.firstChild;
-                template_u1.slot(element_0uvwelsf, prefix, 1);
-                return root_0uvwelse;
-            })());
-            template_u1.slot(element_0uvwelsd, input({
-                'aria-label': `${thumb === 0 ? 'Minimum' : 'Maximum'} ${name}`,
-                autocomplete: 'off',
-                class: 'range-slider-input',
-                inputmode: 'numeric',
-                onblur: save,
-                oninput: (e) => {
-                    draft.value = e.target.value;
-                },
-                onkeydown: (e) => {
-                    if (e.key === 'Enter') {
-                        save();
-                    }
-                    else if (e.key === 'Escape') {
-                        draft.value = null;
-                    }
-                },
-                value: () => draft.value ?? String(s[key]),
-                ...defaults?.[RANGE_SLIDER_INPUT],
-                ...attributes[RANGE_SLIDER_INPUT]
-            }), 2);
-            return root_0uvwelsa;
-        })() : (() => {
-            let root_0uvwelsg = template_0uvwelsh(), element_0uvwelsi = root_0uvwelsg.firstChild.firstElementChild, element_0uvwelsj = root_0uvwelsg.firstChild.firstChild.nextSibling, element_0uvwelsk = root_0uvwelsg.firstChild;
-            element_0uvwelsi.appendChild(template_u1.text(thumb === 0 ? 'Min' : 'Max'));
-            template_u1.slot(element_0uvwelsj, prefix && (() => {
-                let root_0uvwelsl = template_0uvwels8(), element_0uvwelsm = root_0uvwelsl.firstChild;
-                template_u1.slot(element_0uvwelsm, prefix, 1);
-                return root_0uvwelsl;
-            })());
-            template_u1.slot(element_0uvwelsk, input({
-                'aria-label': `${thumb === 0 ? 'Minimum' : 'Maximum'} ${name}`,
-                autocomplete: 'off',
-                class: 'range-slider-input',
-                inputmode: 'numeric',
-                onblur: save,
-                oninput: (e) => {
-                    draft.value = e.target.value;
-                },
-                onkeydown: (e) => {
-                    if (e.key === 'Enter') {
-                        save();
-                    }
-                    else if (e.key === 'Escape') {
-                        draft.value = null;
-                    }
-                },
-                value: () => draft.value ?? String(s[key]),
-                ...defaults?.[RANGE_SLIDER_INPUT],
-                ...attributes[RANGE_SLIDER_INPUT]
-            }), 2);
-            return root_0uvwelsg;
-        })());
-    }
-    function fraction(x) {
-        if (!track) {
-            return 0;
-        }
-        let box = track.getBoundingClientRect();
-        return clamp((x - box.left) / box.width, 0, 1);
-    }
-    function handle(thumb) {
-        let key = KEYS[thumb];
-        return (() => {
-            let root_0uvwelsn = template_0uvwelso(), element_0uvwelsp = root_0uvwelsn.firstChild, element_0uvwelsq = element_0uvwelsp.firstElementChild, element_0uvwelsr = element_0uvwelsq.firstElementChild;
-            template_u1.setList(element_0uvwelsp, 'class', template_u1.interpolate(["range-slider-handle--", (key)]));
-            template_u1.setList(element_0uvwelsp, 'class', () => (ui.dragging === -1 ? (thumb === 0) === (s.low > (min + max) / 2) : ui.dragging === thumb) && '--raised');
-            template_u1.setProperty(element_0uvwelsq, 'aria-label', `${thumb === 0 ? 'Minimum' : 'Maximum'} ${name}`);
-            template_u1.setProperty(element_0uvwelsq, 'aria-valuemax', max);
-            template_u1.setProperty(element_0uvwelsq, 'aria-valuemin', min);
-            template_u1.setProperty(element_0uvwelsq, 'data-thumb', thumb);
-            template_u1.setProperties(element_0uvwelsq, defaults?.[RANGE_SLIDER_THUMB]);
-            template_u1.setProperties(element_0uvwelsq, attributes[RANGE_SLIDER_THUMB]);
-            template_u1.setProperty(element_0uvwelsq, 'aria-valuenow', () => s[key]);
-            template_u1.setProperty(element_0uvwelsq, 'aria-valuetext', () => format(s[key]));
-            template_u1.setList(element_0uvwelsq, 'class', () => ui.dragging === thumb && '--active');
-            template_u1.delegate(element_0uvwelsq, 'keydown', (e) => keydown(thumb, e));
-            template_u1.onrender(element_0uvwelsq, (element) => {
-                thumbs[thumb] = element;
-            });
-            new template_u1.EffectSlot(element_0uvwelsr, () => format(s[key]), 1);
-            return root_0uvwelsn;
-        })();
-    }
-    function keydown(thumb, e) {
-        let big = step * 10, delta = {
-            ArrowDown: e.shiftKey ? -big : -step,
-            ArrowLeft: e.shiftKey ? -big : -step,
-            ArrowRight: e.shiftKey ? big : step,
-            ArrowUp: e.shiftKey ? big : step,
-            End: Infinity,
-            Home: -Infinity,
-            PageDown: -big,
-            PageUp: big
-        };
-        if (!(e.key in delta)) {
-            return;
-        }
-        e.preventDefault();
-        commit(thumb, clamp(s[KEYS[thumb]] + delta[e.key], min, max));
-    }
-    return (() => {
-        let root_0uvwelss = template_0uvwelst(), element_0uvwelsu = root_0uvwelss.firstChild, element_0uvwelsv = element_0uvwelsu.firstElementChild.firstElementChild, element_0uvwelsw = element_0uvwelsv.nextElementSibling, element_0uvwelsx = element_0uvwelsu.firstElementChild.nextElementSibling, element_0uvwelsy = element_0uvwelsx.firstChild.nextSibling, element_0uvwelsz = element_0uvwelsx.nextElementSibling.firstChild, element_0uvwels10 = element_0uvwelsx.nextElementSibling;
-        template_u1.setProperties(element_0uvwelsu, defaults);
-        template_u1.setProperties(element_0uvwelsu, attributes);
-        template_u1.setList(element_0uvwelsu, 'class', () => ui.dragging !== -1 && !ui.gliding && '--dragging');
-        template_u1.setList(element_0uvwelsu, 'style', () => `--high: ${(s.high - min) / span}; --low: ${(s.low - min) / span};`);
-        template_u1.slot(element_0uvwelsv, label, 1);
-        new template_u1.EffectSlot(element_0uvwelsw, () => `${format(s.low)} to ${format(s.high)}`, 1);
-        template_u1.setProperty(element_0uvwelsx, 'aria-label', label);
-        template_u1.delegate(element_0uvwelsx, 'lostpointercapture', end);
-        template_u1.delegate(element_0uvwelsx, 'pointercancel', end);
-        template_u1.delegate(element_0uvwelsx, 'pointerdown', (e) => {
-            if (e.button !== 0 || !track) {
-                return;
-            }
-            let f = fraction(e.clientX), grabbed = e.target.closest('[data-thumb]'), thumb;
-            if (grabbed) {
-                thumb = Number(grabbed.dataset.thumb);
-            }
-            else {
-                let high = (s.high - min) / span, low = (s.low - min) / span, toHigh = Math.abs(f - high), toLow = Math.abs(f - low);
-                thumb = toLow === toHigh ? (f < low ? 0 : 1) : (toLow < toHigh ? 0 : 1);
-            }
-            e.preventDefault();
-            thumbs[thumb]?.focus({ preventScroll: true });
-            track.setPointerCapture(e.pointerId);
-            drag = {
-                gliding: !grabbed,
-                offset: grabbed ? f - (s[KEYS[thumb]] - min) / span : 0,
-                thumb
-            };
-            ui.dragging = thumb;
-            ui.gliding = !grabbed;
-            if (!grabbed) {
-                commit(thumb, min + f * span);
-            }
-        });
-        template_u1.delegate(element_0uvwelsx, 'pointermove', (e) => {
-            if (!drag) {
-                return;
-            }
-            commit(drag.thumb, min + (fraction(e.clientX) - drag.offset) * span);
-        });
-        template_u1.delegate(element_0uvwelsx, 'pointerup', end);
-        template_u1.onrender(element_0uvwelsx, (element) => {
-            track = element;
-        });
-        template_u1.slot(element_0uvwelsy, handle(0));
-        template_u1.slot(element_0uvwelsx, handle(1), 2);
-        template_u1.slot(element_0uvwelsz, field(0));
-        template_u1.slot(element_0uvwels10, field(1), 2);
-        return root_0uvwelss;
-    })();
-}
-export default Object.assign(template, { input: RANGE_SLIDER_INPUT, thumb: RANGE_SLIDER_THUMB });

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

@@ -1,2 +0,0 @@
-@layer components {.range-slider{--background:var(--color-border-300);--box-shadow:0 0 0 1px oklch(from var(--color-black-300) l c h / .06), 0 1px 2px oklch(from var(--color-black-300) l c h / .06), 0 6px 16px -6px oklch(from var(--color-black-300) l c h / .12);--color:var(--color-text-500);--color-muted:var(--color-text-300);--field-background:var(--color-grey-400);--field-height:40px;--fill:var(--color-text-500);--focus-color:oklch(from var(--color-text-500) l c h / .38);--font-size:calc(var(--font-size-400) * .875);--glide-duration:.3s;--glide-timing-function:linear(0, .12, .328, .514, .663, .776, .851, .905, .938, .96, .975, .984, .99, .994, 1);--height:6px;--hit-size:44px;--thumb-background:var(--color-white-300);--thumb-dot:var(--color-text-500);--thumb-dot-size:8px;--thumb-scale-active:.96;--thumb-size:var(--size-500);--tooltip-background:var(--color-text-500);--tooltip-color:var(--color-white-300);--tooltip-ease:cubic-bezier(.23, 1, .32, 1);--tooltip-offset:10px;--width:min(440px, 100%);color:var(--color);font-size:var(--font-size);width:var(--width);flex-direction:column;gap:12px;display:flex}.range-slider-dash{background:var(--background);flex-shrink:0;width:12px;height:1px}.range-slider-field{background:var(--field-background);border-radius:var(--border-radius-400);box-shadow:var(--box-shadow);cursor:text;height:var(--field-height);outline:0 solid var(--focus-color);outline-offset:2px;flex:1 1 0;align-items:center;gap:6px;min-width:0;padding-inline:12px;display:flex}.range-slider-field:has(:focus-visible){outline-width:2px}.range-slider-field-label{color:var(--color-muted)}.range-slider-field-prefix{color:var(--color-muted);margin-inline-start:auto}.range-slider-field .range-slider-input{--background-default:transparent;--color-default:currentColor;--font-size:inherit;--padding-horizontal:0px;--padding-vertical:0px;font-variant-numeric:tabular-nums;text-align:right;outline:none;flex:0 64px;width:64px;min-height:0;margin-inline-start:auto}.range-slider-field-prefix+.range-slider-input{margin-inline-start:0}.range-slider-fields{align-items:center;gap:12px;display:flex}.range-slider-fill{background:var(--fill);height:100%;transform:translateX(calc(var(--low) * 100%)) scaleX(calc(var(--high) - var(--low)));transform-origin:0;transition:transform var(--glide-duration) var(--glide-timing-function)}.range-slider-handle{pointer-events:none;transition:translate var(--glide-duration) var(--glide-timing-function);translate:calc(var(--position) * 100%) 0;position:absolute;inset:0}.range-slider-handle--high{--position:var(--high)}.range-slider-handle--low{--position:var(--low)}.range-slider-handle.--raised{z-index:1}.range-slider-header{justify-content:space-between;align-items:baseline;display:flex}.range-slider-label{font-weight:var(--font-weight-500)}.range-slider-rail{background:var(--background);height:var(--height);inset-inline:0;border-radius:999px;position:absolute;top:50%;overflow:hidden;translate:0 -50%}.range-slider-summary{color:var(--color-muted);font-variant-numeric:tabular-nums}.range-slider-thumb{background:var(--thumb-background);box-shadow:var(--box-shadow);height:var(--thumb-size);outline:0 solid var(--focus-color);outline-offset:2px;pointer-events:auto;touch-action:none;width:var(--thumb-size);border-radius:50%;transition:scale .15s ease-out;position:absolute;top:50%;left:0;translate:-50% -50%}.range-slider-thumb:after,.range-slider-thumb:before{content:"";border-radius:50%;position:absolute}.range-slider-thumb:after{inset:calc((var(--thumb-size) - var(--hit-size)) / 2)}.range-slider-thumb:before{background:var(--thumb-dot);inset:calc((var(--thumb-size) - var(--thumb-dot-size)) / 2)}.range-slider-thumb:focus-visible{outline-width:2px}.range-slider-thumb.--active{scale:var(--thumb-scale-active)}.range-slider-tooltip{background:var(--tooltip-background);color:var(--tooltip-color);font-size:var(--font-size-300);font-variant-numeric:tabular-nums;font-weight:var(--font-weight-500);margin-bottom:var(--tooltip-offset);opacity:0;pointer-events:none;transform-origin:bottom;transition:opacity .1s var(--tooltip-ease), scale .1s var(--tooltip-ease), translate .1s var(--tooltip-ease);white-space:nowrap;border-radius:999px;padding:4px 8px;line-height:1.33;position:absolute;bottom:100%;left:50%;translate:-50% 4px;scale:.97}.range-slider-thumb.--active>.range-slider-tooltip,.range-slider-thumb:focus-visible>.range-slider-tooltip{opacity:1;transition-duration:.15s;translate:-50%;scale:1}.range-slider-track{cursor:pointer;height:var(--hit-size);touch-action:none;-webkit-user-select:none;user-select:none;margin-top:32px;position:relative}.range-slider.--dragging .range-slider-fill,.range-slider.--dragging .range-slider-handle{transition:none}@media (prefers-reduced-motion:reduce){.range-slider-fill,.range-slider-handle,.range-slider-thumb{transition:none}.range-slider-tooltip{transition:opacity .1s var(--tooltip-ease);translate:-50%;scale:1}}}
-/*$vite$:1*/

package/build/components/reading-progress/index.d.ts

@@ -1,13 +0,0 @@
-import { type Attributes } from '@esportsplus/template';
-import './scss/index.scss';
-type Ref = () => HTMLElement | null | undefined;
-export default _default;
-declare function _default({ doneLabel, label, scroller, steps, target, words, wordsPerMinute, ...attributes }: Attributes & {
-    doneLabel?: string;
-    label?: string;
-    scroller?: Ref;
-    steps?: number;
-    target?: Ref;
-    words?: number;
-    wordsPerMinute?: number;
-}): DocumentFragment | Text;