@esportsplus/ui 0.55.0 → 0.56.3

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

@@ -1,2 +1,2 @@
-@layer components {.range{--background:var(--background-default);--background-active:var(--background-default);--background-default:linear-gradient(to right, var(--thumb-background) var(--thumb-position), var(--color-black-300) var(--thumb-position));--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-width:var(--border-width-700);--height:var(--size-200);--margin-horizontal:0px;--margin-vertical:0px;--thumb-background:var(--color-white-400);--thumb-size:var(--size-400);--width:100%}.range label:not(.--active):not(.--active):hover,.range:not(.--active):not(.--active):hover{--background:var(--background-hover)}.range label:not(.--active):not(.--active):active,.range:not(.--active):not(.--active):active{--background:var(--background-pressed)}.range.--active{--background:var(--background-active)}.range{background:var(--background);height:var(--height);margin:calc(var(--margin-vertical) + (var(--thumb-size) - var(--height)) / 2) var(--margin-horizontal);transition:background var(--transition-duration) var(--transition-timing-function), border-color var(--transition-duration) var(--transition-timing-function), box-shadow var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function), transform var(--transition-duration) var(--transition-timing-function);width:var(--width);border:0;border-radius:240px}.range::-moz-range-thumb{background:var(--thumb-background);border:var(--border-width) solid var(--border-color);cursor:pointer;height:var(--thumb-size);width:var(--thumb-size);border-radius:100%}.range::-webkit-slider-thumb{background:var(--thumb-background);border:var(--border-width) solid var(--border-color);cursor:pointer;height:var(--thumb-size);width:var(--thumb-size);border-radius:100%}.range{appearance:none;outline:none}.range::-moz-range-thumb{appearance:none;outline:none}.range::-webkit-slider-thumb{appearance:none;outline:none}}
+@layer components {.range{--background:var(--background-default);--background-active:var(--background-default);--background-default:linear-gradient(to right, var(--thumb-background) var(--thumb-position), var(--color-black-300) var(--thumb-position));--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-width:var(--border-width-700);--height:var(--size-200);--margin-horizontal:0px;--margin-vertical:0px;--thumb-background:var(--color-white-400);--thumb-size:var(--size-400);--width:100%}.range label:not(.--active):not(.--active):hover,.range:not(.--active):not(.--active):hover{--background:var(--background-hover)}.range label:not(.--active):not(.--active):active,.range:not(.--active):not(.--active):active{--background:var(--background-pressed)}.range.--active{--background:var(--background-active)}.range{background:var(--background);height:var(--height);margin-block:calc(var(--margin-vertical) + (var(--thumb-size) - var(--height)) / 2);margin-inline:var(--margin-horizontal);transition:background var(--transition-duration) var(--transition-timing-function), border-color var(--transition-duration) var(--transition-timing-function), box-shadow var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function), transform var(--transition-duration) var(--transition-timing-function);width:var(--width);border:0;border-radius:240px}.range::-moz-range-thumb{background:var(--thumb-background);border:var(--border-width) solid var(--border-color);cursor:pointer;height:var(--thumb-size);width:var(--thumb-size);border-radius:100%}.range::-webkit-slider-thumb{background:var(--thumb-background);border:var(--border-width) solid var(--border-color);cursor:pointer;height:var(--thumb-size);width:var(--thumb-size);border-radius:100%}.range{appearance:none;outline:none}.range::-moz-range-thumb{appearance:none;outline:none}.range::-webkit-slider-thumb{appearance:none;outline:none}}
 /*$vite$:1*/

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

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

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

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

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

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

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

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