@esportsplus/ui 0.56.3 → 0.57.0

package/build/components/range/filter.js

@@ -0,0 +1,322 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { computed, read } from '@esportsplus/reactivity';
+import * as template_u1 from '@esportsplus/template';
+import { clamp } from '../../shared/clamp.js';
+import { keystep } from '../../shared/keystep.js';
+import input from '../input/index.js';
+import close from '@esportsplus/ui/svg/close.svg';
+const template_1np98yq4 = template_u1.template(`<label class='range-filter-field'><span class='range-filter-field-label'></span><!--$-->`);
+const template_1np98yq9 = template_u1.template(`<span aria-hidden='true' class='range-filter-field-prefix'>`);
+const template_1np98yqc = template_u1.template(`<span class='range-filter-number'><span class='range-filter-sr'></span><span aria-hidden='true' class='range-filter-columns'>`);
+const template_1np98yqg = template_u1.template(`<span class='range-filter-column'><span class='range-filter-strip'></span><span class='range-filter-symbol'>`);
+const template_1np98yql = template_u1.template(`<span class='range-filter-digit'>`);
+const template_1np98yqo = template_u1.template(`<div class='range-filter  '><div class='range-filter-header'><div class='range-filter-heading'><p class='range-filter-label'></p><div class='range-filter-values'><!--$--><span class='range-filter-value'><!--$--></span></div></div><button class='range-filter-clear' type='button'><svg aria-hidden='true' class='range-filter-clear-icon'><use /></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_1np98yq13 = template_u1.template(`<span class='range-filter-value'><!--$--></span><span class='range-filter-dash'>–`);
+const template_1np98yq17 = template_u1.template(`<div class='range-filter-thumb ' role='slider'>`);
+const template_1np98yq1a = template_u1.template(`<span><!--$-->`);
+const template_1np98yq1e = template_u1.template(`<div class='range-filter-fields'>`);
+const template_1np98yq1h = template_u1.template(`<!--$--><span aria-hidden='true' class='range-filter-separator'></span><!--$-->`);
+class ReactiveObject_1np98yq0 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_1np98yq1 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);
+    }
+}
+class ReactiveObject_1np98yq2 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 NON_NUMERIC_CHARACTERS = /[^\d.-]/g;
+const DIGITS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+const INDEX = Symbol();
+const KEYS = ['low', 'high'];
+function snap(value, min, step, decimals) {
+    return Number((Math.round((value - min) / step) * step + min).toFixed(decimals));
+}
+export default ({ disabled = false, fields = false, format = (value) => value.toLocaleString('en-US'), label = 'Price Range', max = 1000, min = 0, orientation = 'horizontal', prefix = '$', state, step = 10, ticks = 5, value, ...attributes }) => {
+    let decimals = (String(step).split('.')[1] || '').length, vertical = orientation === 'vertical', single = typeof value === 'number', span = max - min || 1, s = state ?? new ReactiveObject_1np98yq0(typeof value === 'number' ? value : value?.[1] ?? clamp(snap(min + span * 0.65, min, step, decimals), min, max), typeof value === 'number' ? min : value?.[0] ?? clamp(snap(min + span * 0.15, min, step, decimals), min, max)), indices = single ? [1] : [0, 1], labels = [], pointer = -1, root, thumbs = [], ui = new ReactiveObject_1np98yq1(), width = Math.max(...[min, max, min + step, max - step].map((v) => format(snap(v, min, step, decimals)).length));
+    for (let i = 0; i < ticks; i++) {
+        let tick = snap(min + (i * span) / Math.max(1, ticks - 1), min, step, decimals);
+        if (!labels.includes(tick)) {
+            labels.push(tick);
+        }
+    }
+    function commit(index, raw) {
+        let next = clamp(snap(raw, min, step, decimals), min, max);
+        s[KEYS[index]] = index === 0 ? Math.min(next, s.high) : Math.max(next, s.low);
+    }
+    function at(event) {
+        if (!root) {
+            return min;
+        }
+        let rect = root.getBoundingClientRect(), thumb = vertical ? thumbs[indices[0]]?.offsetHeight ?? 0 : 0, fraction = vertical
+            ? (rect.bottom - event.clientY - thumb / 2) / Math.max(1, rect.height - thumb)
+            : (event.clientX - rect.left) / rect.width;
+        return clamp(snap(fraction * span + min, min, step, decimals), min, max);
+    }
+    function field(index) {
+        let draft = new ReactiveObject_1np98yq2(null), key = KEYS[index];
+        function save() {
+            if (draft.value === null) {
+                return;
+            }
+            let parsed = Number(draft.value.replace(NON_NUMERIC_CHARACTERS, ''));
+            if (draft.value.trim() !== '' && Number.isFinite(parsed)) {
+                commit(index, parsed);
+            }
+            draft.value = null;
+        }
+        return (() => {
+            let root_1np98yq3 = template_1np98yq4(), element_1np98yq5 = root_1np98yq3.firstChild.firstElementChild, element_1np98yq6 = root_1np98yq3.firstChild.firstChild.nextSibling, element_1np98yq7 = root_1np98yq3.firstChild;
+            element_1np98yq5.appendChild(template_u1.text(single ? 'Value' : index === 0 ? 'Min' : 'Max'));
+            template_u1.slot(element_1np98yq6, prefix && (() => {
+                let root_1np98yq8 = template_1np98yq9(), element_1np98yqa = root_1np98yq8.firstChild;
+                template_u1.slot(element_1np98yqa, prefix, 1);
+                return root_1np98yq8;
+            })());
+            template_u1.slot(element_1np98yq7, input({
+                'aria-label': single ? label : `${index === 0 ? 'Minimum' : 'Maximum'} ${label.toLowerCase()}`,
+                autocomplete: 'off',
+                class: 'range-filter-input',
+                disabled,
+                inputmode: 'decimal',
+                onblur: save,
+                oninput: (event) => {
+                    draft.value = event.target.value;
+                },
+                onkeydown: (event) => {
+                    if (event.key === 'Enter') {
+                        save();
+                    }
+                    else if (event.key === 'Escape') {
+                        draft.value = null;
+                    }
+                },
+                value: () => draft.value ?? String(s[key])
+            }), 2);
+            return root_1np98yq3;
+        })();
+    }
+    function keydown(index, event) {
+        if (disabled) {
+            return;
+        }
+        let delta = keystep(event, step);
+        if (delta === null) {
+            return;
+        }
+        event.preventDefault();
+        commit(index, clamp(s[KEYS[index]] + delta, min, max));
+    }
+    function pct(value) {
+        return ((value - min) / span) * 100;
+    }
+    function release(event) {
+        if (event.pointerId !== pointer) {
+            return;
+        }
+        pointer = -1;
+        ui.dragging = -1;
+    }
+    function roll(key) {
+        let text = computed(() => format(s[key]));
+        return (() => {
+            let root_1np98yqb = template_1np98yqc(), element_1np98yqd = root_1np98yqb.firstChild.firstElementChild, element_1np98yqe = element_1np98yqd.nextElementSibling;
+            new template_u1.EffectSlot(element_1np98yqd, () => read(text), 1);
+            template_u1.slot(element_1np98yqe, Array.from({ length: width }, (_, i) => {
+                let char = computed(() => {
+                    let value = read(text), pad = width - value.length;
+                    return i < pad ? '' : value[i - pad];
+                });
+                return (() => {
+                    let root_1np98yqf = template_1np98yqg(), element_1np98yqh = root_1np98yqf.firstChild, element_1np98yqi = element_1np98yqh.firstElementChild, element_1np98yqj = element_1np98yqi.nextElementSibling;
+                    template_u1.slot(element_1np98yqi, DIGITS.map((digit) => {
+                        let root_1np98yqk = template_1np98yql(), element_1np98yqm = root_1np98yqk.firstChild;
+                        template_u1.slot(element_1np98yqm, digit, 1);
+                        return root_1np98yqk;
+                    }), 1);
+                    new template_u1.EffectSlot(element_1np98yqj, () => !DIGITS.includes(read(char)) && read(char), 1);
+                    template_u1.setList(element_1np98yqi, 'style', () => `--digit: ${DIGITS.includes(read(char)) ? read(char) : 0}`);
+                    template_u1.setList(element_1np98yqh, 'class', () => {
+                        let c = read(char);
+                        return c === '' ? 'range-filter-column--empty' : DIGITS.includes(c) ? 'range-filter-column--digit' : 'range-filter-column--symbol';
+                    });
+                    return root_1np98yqf;
+                })();
+            }), 1);
+            return root_1np98yqb;
+        })();
+    }
+    return (() => {
+        let root_1np98yqn = template_1np98yqo(), element_1np98yqp = root_1np98yqn.firstChild, element_1np98yqq = element_1np98yqp.firstElementChild.firstElementChild.firstElementChild, element_1np98yqr = element_1np98yqq.nextElementSibling.firstChild, element_1np98yqs = element_1np98yqq.nextElementSibling.firstElementChild.firstChild, element_1np98yqt = element_1np98yqq.nextElementSibling.firstElementChild, element_1np98yqu = element_1np98yqp.firstElementChild.firstElementChild.nextElementSibling, element_1np98yqv = element_1np98yqu.firstElementChild.firstElementChild, element_1np98yqw = element_1np98yqp.firstElementChild.nextElementSibling, element_1np98yqx = element_1np98yqw.firstElementChild, element_1np98yqy = element_1np98yqx.firstElementChild, element_1np98yqz = element_1np98yqy.firstElementChild, element_1np98yq10 = element_1np98yqy.nextElementSibling, element_1np98yq11 = element_1np98yqx.nextElementSibling;
+        template_u1.slot(element_1np98yqq, label, 1);
+        template_u1.slot(element_1np98yqr, !single && (() => {
+            let root_1np98yq12 = template_1np98yq13(), element_1np98yq14 = root_1np98yq12.firstChild.firstChild, element_1np98yq15 = root_1np98yq12.firstChild;
+            template_u1.slot(element_1np98yq14, prefix);
+            template_u1.slot(element_1np98yq15, roll('low'), 2);
+            return root_1np98yq12;
+        })());
+        template_u1.slot(element_1np98yqs, prefix);
+        template_u1.slot(element_1np98yqt, roll('high'), 2);
+        template_u1.slot(element_1np98yqx, indices.map((index) => {
+            let key = KEYS[index];
+            return (() => {
+                let root_1np98yq16 = template_1np98yq17(), element_1np98yq18 = root_1np98yq16.firstChild;
+                template_u1.setProperty(element_1np98yq18, 'aria-disabled', disabled);
+                template_u1.setProperty(element_1np98yq18, 'aria-orientation', orientation);
+                template_u1.setProperty(element_1np98yq18, 'aria-label', single ? label : `${index === 0 ? 'Minimum' : 'Maximum'} ${label.toLowerCase()}`);
+                template_u1.setProperty(element_1np98yq18, 'aria-valuemax', max);
+                template_u1.setProperty(element_1np98yq18, 'aria-valuemin', min);
+                template_u1.setList(element_1np98yq18, 'class', vertical && 'range-filter-thumb--vertical');
+                template_u1.setProperty(element_1np98yq18, 'tabindex', disabled ? -1 : 0);
+                template_u1.setProperty(element_1np98yq18, 'aria-valuenow', () => s[key]);
+                template_u1.setProperty(element_1np98yq18, 'aria-valuetext', () => `${prefix}${format(s[key])}`);
+                template_u1.setList(element_1np98yq18, 'class', [
+                    () => ui.dragging === index && '--active',
+                    () => index === 0 && s.low === max && 'range-filter-thumb--stacked'
+                ]);
+                template_u1.onconnect(element_1np98yq18, (element) => {
+                    element[INDEX] = index;
+                    thumbs[index] = element;
+                });
+                template_u1.delegate(element_1np98yq18, 'keydown', (event) => keydown(index, event));
+                template_u1.setList(element_1np98yq18, 'style', () => `--position: ${pct(s[key]) / 100};`);
+                return root_1np98yq16;
+            })();
+        }), 2);
+        template_u1.slot(element_1np98yq11, labels.map((tick) => {
+            let root_1np98yq19 = template_1np98yq1a(), element_1np98yq1b = root_1np98yq19.firstChild.firstChild, element_1np98yq1c = root_1np98yq19.firstChild;
+            template_u1.slot(element_1np98yq1b, prefix);
+            template_u1.slot(element_1np98yq1c, format(tick), 2);
+            return root_1np98yq19;
+        }), 1);
+        template_u1.slot(element_1np98yqp, fields && (() => {
+            let root_1np98yq1d = template_1np98yq1e(), element_1np98yq1f = root_1np98yq1d.firstChild;
+            template_u1.slot(element_1np98yq1f, single ? field(1) : (() => {
+                let root_1np98yq1g = template_1np98yq1h(), element_1np98yq1i = root_1np98yq1g.firstChild, element_1np98yq1j = element_1np98yq1i.nextSibling.nextSibling;
+                template_u1.slot(element_1np98yq1i, field(0));
+                template_u1.slot(element_1np98yq1j, field(1));
+                return root_1np98yq1g;
+            })(), 1);
+            return root_1np98yq1d;
+        })(), 2);
+        template_u1.setList(element_1np98yq11, 'class', vertical && 'range-filter-ticks--vertical');
+        template_u1.setList(element_1np98yq10, 'class', vertical && 'range-filter-ghost--vertical');
+        template_u1.setList(element_1np98yq10, 'class', () => (ui.preview !== -1 && (ui.preview < s.low || ui.preview > s.high)) && '--active');
+        template_u1.setList(element_1np98yq10, 'style', () => {
+            let p = ui.preview;
+            if (p === -1 || (p >= s.low && p <= s.high)) {
+                return '';
+            }
+            let start = vertical ? 'bottom' : 'left', size = vertical ? 'height' : 'width';
+            return p < s.low
+                ? `${start}: ${pct(p)}%; ${size}: ${pct(s.low) - pct(p)}%;`
+                : `${start}: ${pct(s.high)}%; ${size}: ${pct(p) - pct(s.high)}%;`;
+        });
+        template_u1.setList(element_1np98yqz, 'class', vertical && 'range-filter-range--vertical');
+        template_u1.setList(element_1np98yqz, 'style', () => vertical
+            ? `bottom: ${pct(s.low)}%; top: ${100 - pct(s.high)}%;`
+            : `left: ${pct(s.low)}%; right: ${100 - pct(s.high)}%;`);
+        template_u1.setList(element_1np98yqy, 'class', vertical && 'range-filter-track--vertical');
+        template_u1.setProperty(element_1np98yqx, 'aria-label', label);
+        template_u1.setList(element_1np98yqx, 'class', vertical && 'range-filter-root--vertical');
+        template_u1.setList(element_1np98yqx, 'class', () => ui.dragging !== -1 && 'range-filter-root--dragging');
+        template_u1.onconnect(element_1np98yqx, (element) => {
+            root = element;
+        });
+        template_u1.delegate(element_1np98yqx, 'lostpointercapture', release);
+        template_u1.delegate(element_1np98yqx, 'pointercancel', release);
+        template_u1.delegate(element_1np98yqx, 'pointerdown', (event) => {
+            if (disabled || event.button !== 0 || !root || pointer !== -1) {
+                return;
+            }
+            let grabbed = event.target.closest('.range-filter-thumb'), v = at(event), index;
+            if (grabbed) {
+                index = grabbed[INDEX];
+            }
+            else if (single) {
+                index = 1;
+            }
+            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);
+            pointer = event.pointerId;
+            ui.dragging = index;
+            ui.preview = -1;
+            commit(index, v);
+        });
+        template_u1.on(element_1np98yqx, 'pointerleave', () => {
+            ui.preview = -1;
+        });
+        template_u1.delegate(element_1np98yqx, 'pointermove', (event) => {
+            if (ui.dragging !== -1) {
+                if (event.pointerId === pointer) {
+                    commit(ui.dragging, at(event));
+                }
+                return;
+            }
+            if (!disabled && event.pointerType === 'mouse') {
+                ui.preview = at(event);
+            }
+        });
+        template_u1.delegate(element_1np98yqx, 'pointerup', release);
+        template_u1.setList(element_1np98yqw, 'class', vertical && 'range-filter-body--vertical');
+        template_u1.setProperty(element_1np98yqv, 'href', template_u1.interpolate(["#", (close)]));
+        template_u1.delegate(element_1np98yqu, 'click', () => {
+            s.low = min;
+            s.high = single ? min : max;
+        });
+        template_u1.setProperty(element_1np98yqu, 'disabled', () => disabled || (s.low === min && s.high === (single ? min : max)));
+        template_u1.setList(element_1np98yqp, 'class', vertical && 'range--vertical');
+        template_u1.setList(element_1np98yqp, 'class', disabled && '--disabled');
+        template_u1.setProperties(element_1np98yqp, attributes);
+        return root_1np98yqn;
+    })();
+};

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

@@ -1,13 +1,20 @@
 import { type Attributes } from '@esportsplus/template';
+import filter from './filter.js';
 import './scss/index.scss';
-export default function (this: {
+declare function plain(this: {
     attributes?: Attributes;
-} | void, attributes: Attributes & {
+} | void, { max, min, orientation, state, value, ...attributes }: Attributes & {
     max: number;
     min: number;
+    orientation?: 'horizontal' | 'vertical';
     state?: {
         active: boolean;
         error: string;
         value: number;
     };
 }): DocumentFragment | Text;
+declare const range: typeof plain & {
+    filter: typeof filter;
+};
+export default range;
+export type { RangeFilterState } from './filter.js';

package/build/components/range/index.js

@@ -1,9 +1,9 @@
 import * as template_u1 from '@esportsplus/template';
 import * as reactivity_u0 from '@esportsplus/reactivity';
-import { root } from '@esportsplus/reactivity';
 import form from '../form/index.js';
+import filter from './filter.js';
 import './scss/index.scss';
-const template_0aka2e62 = template_u1.template(`<input class='range --border-state --border-black' type='range' />`);
+const template_0aka2e62 = template_u1.template(`<input class='range --border-black ' type='range' />`);
 class ReactiveObject_0aka2e60 extends reactivity_u0.ReactiveObject {
     #active = this[reactivity_u0.SIGNAL](false);
     #error = this[reactivity_u0.SIGNAL]('');
@@ -30,17 +30,21 @@ class ReactiveObject_0aka2e60 extends reactivity_u0.ReactiveObject {
         reactivity_u0.write(this.#value, _v2);
     }
 }
-export default function (attributes) {
-    let { max, min } = attributes, state = attributes.state || new ReactiveObject_0aka2e60();
-    if (attributes?.value) {
-        state.value = Number(attributes.value);
+function plain({ max, min, orientation = 'horizontal', state = new ReactiveObject_0aka2e60(), value, ...attributes }) {
+    if (value) {
+        state.value = Number(value);
     }
     return (() => {
         let root_0aka2e61 = template_0aka2e62(), element_0aka2e63 = root_0aka2e61.firstChild;
+        template_u1.setProperty(element_0aka2e63, 'aria-orientation', orientation);
+        template_u1.setList(element_0aka2e63, 'class', orientation === 'vertical' && 'range--vertical');
         template_u1.setList(element_0aka2e63, 'style', () => `--thumb-position: ${((state.value - min) / (max - min)) * 100}%`);
         template_u1.setProperties(element_0aka2e63, this?.attributes);
+        template_u1.setProperty(element_0aka2e63, 'max', max);
+        template_u1.setProperty(element_0aka2e63, 'min', min);
         template_u1.setProperties(element_0aka2e63, attributes);
         template_u1.setList(element_0aka2e63, 'class', () => state.active && '--active');
+        template_u1.onconnect(element_0aka2e63, form.input.onconnect(state));
         template_u1.on(element_0aka2e63, 'focusin', () => {
             state.active = true;
         });
@@ -50,9 +54,9 @@ export default function (attributes) {
         template_u1.delegate(element_0aka2e63, 'input', (e) => {
             state.value = Number(e.target.value);
         });
-        template_u1.onrender(element_0aka2e63, form.input.onrender(state));
-        template_u1.setProperty(element_0aka2e63, 'value', root(() => attributes?.value || state.value || 0));
+        template_u1.setProperty(element_0aka2e63, 'value', () => state.value);
         return root_0aka2e61;
     })();
 }
-;
+const range = Object.assign(plain, { filter });
+export default range;

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-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}}
+@layer components{.range-filter-strip{position:absolute;inset:0 0 auto}.range{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default)}.--active.range{--background:var(--background-active)}.range:not(.--active):hover{--background:var(--background-hover)}.range:not(.--active):active{--background:var(--background-pressed)}.range{--border-color:var(--border-color-default);--border-color-active:var(--border-color-default);--border-color-default:transparent;--border-color-hover:var(--border-color-default);--border-color-pressed:var(--border-color-default)}.--active.range{--border-color:var(--border-color-active)}.range:not(.--active):hover{--border-color:var(--border-color-hover)}.range:not(.--active):active{--border-color:var(--border-color-pressed)}.range-filter-sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.range{--background-default:linear-gradient(to right, var(--thumb-background) var(--thumb-position), var(--color-black-300) var(--thumb-position));--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-filter{--clear-background:var(--color-white-300);--clear-border:var(--color-border-300);--clear-display:inline-flex;--clear-hover:var(--color-grey-400);--color:var(--color-text-500);--field-background:var(--color-white-300);--field-border-radius:var(--border-radius-400);--field-cursor:text;--field-height:40px;--focus-color:oklch(from var(--color-text-500) l c h / .3);--ghost-color:oklch(from var(--color-text-500) l c h / .3);--ghost-display:block;--header-align:flex-start;--header-gap:16px;--heading-display:block;--label-color:var(--muted-color);--label-font-size:12px;--label-letter-spacing:.05em;--label-margin:0 0 4px;--label-text-transform:uppercase;--muted-color:var(--color-text-300);--range-border-radius:0px;--range-color:var(--color-text-500);--roll-duration:.5s;--roll-ease:cubic-bezier(.23, 1, .32, 1);--root-cursor:pointer;--thumb-background:var(--color-white-300);--thumb-border:var(--color-text-500);--thumb-border-width:2px;--thumb-cursor:initial;--thumb-cursor-active:initial;--thumb-outline:0 solid var(--focus-color);--thumb-scale-active:1.25;--thumb-scale-hover:1.25;--thumb-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);--thumb-shadow-active:var(--thumb-shadow);--thumb-shadow-focus:var(--thumb-shadow);--thumb-size:20px;--thumb-transition:scale .15s ease-out;--tick-color:oklch(from var(--color-text-300) l c h / .6);--track-color:var(--color-grey-500);--track-height:8px;--track-inset:0px;--track-overflow:hidden;--value-font-size:var(--font-size-500);--value-font-weight:var(--font-weight-700,700);--width:384px}.range-filter.--disabled{--field-cursor:not-allowed;--root-cursor:not-allowed;--thumb-scale-active:1;--thumb-scale-hover:1}@media (prefers-reduced-motion:reduce){.range-filter{--thumb-scale-active:1;--thumb-scale-hover:1;--thumb-transition:none}}.range-filter-column{--strip-display:flex;--symbol-display:none}.range-filter-column--symbol{--strip-display:none;--symbol-display:inline}.range-filter-field .range-filter-input{--background-default:transparent;--color-default:currentColor;--font-size:inherit;--padding-horizontal:0px;--padding-vertical:0px}.range-filter{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-body--vertical{flex-direction:row;align-self:center}.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;display:var(--clear-display);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}.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-icon{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--empty{opacity:0;max-width:0}.range-filter-column--symbol{white-space:pre;max-width:1.5em}.range-filter-columns{display:inline-flex}.range-filter-dash{color:var(--muted-color)}.range-filter-digit{height:1lh}.range-filter-field{background:var(--field-background);border:1px solid var(--clear-border);border-radius:var(--field-border-radius);cursor:var(--field-cursor);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-filter-field:has(:focus-visible){outline-width:2px}.range-filter-field-label{color:var(--muted-color);font-size:12px;font-weight:var(--font-weight-500);letter-spacing:.05em;text-transform:uppercase}.range-filter-field-prefix{color:var(--muted-color);margin-inline-start:auto}.range-filter-field .range-filter-input{font-variant-numeric:tabular-nums;text-align:right;outline:none;flex:0 72px;width:72px;min-height:0;margin-inline-start:auto}.range-filter-field-prefix+.range-filter-input{margin-inline-start:0}.range-filter-fields{align-items:center;gap:12px;display:flex}.range-filter-ghost{background:var(--ghost-color);display:var(--ghost-display);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-ghost--vertical{width:var(--track-height);transition:bottom 75ms ease-out,opacity .1s ease-out,height 75ms ease-out;top:auto;left:50%;translate:-50%}.range-filter-header{align-items:var(--header-align);gap:var(--header-gap);justify-content:space-between;display:flex}.range-filter-heading{display:var(--heading-display)}.range-filter-label{color:var(--label-color);font-size:var(--label-font-size);font-weight:var(--font-weight-500);letter-spacing:var(--label-letter-spacing);margin:var(--label-margin);text-transform:var(--label-text-transform)}.range-filter-number{display:inline-flex}.range-filter-range{background:var(--range-color);border-radius:var(--range-border-radius);position:absolute;inset-block:0}.range-filter-range--vertical{inset-block:auto;inset-inline:0}.range-filter-root{cursor:var(--root-cursor);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-root--vertical{height:var(--vertical-size);width:var(--thumb-size);justify-content:center}.range-filter-separator{background:var(--track-color);flex-shrink:0;width:12px;height:1px}.range-filter-strip{display:var(--strip-display);transition:translate var(--roll-duration) var(--roll-ease);translate:0 calc(var(--digit,0) * -10%);flex-direction:column}.range-filter-symbol{display:var(--symbol-display)}.range-filter-thumb{background:var(--thumb-background);border:var(--thumb-border-width) solid var(--thumb-border);box-shadow:var(--thumb-shadow);cursor:var(--thumb-cursor);height:var(--thumb-size);left:calc(var(--thumb-size) / 2 + var(--position) * (100% - var(--thumb-size)));outline:var(--thumb-outline);outline-offset:2px;transition:var(--thumb-transition);width:var(--thumb-size);z-index:2;border-radius:50%;position:absolute;top:50%;translate:-50% -50%}.range-filter-thumb--stacked,.range-filter-thumb.--active{z-index:3}.range-filter-thumb--vertical{bottom:calc(var(--thumb-size) / 2 + var(--position) * (100% - var(--thumb-size)));top:auto;left:50%;translate:-50% 50%}.range-filter-thumb:focus-visible{box-shadow:var(--thumb-shadow-focus);outline-width:3px}.range-filter-thumb:hover{scale:var(--thumb-scale-hover)}.range-filter-thumb.--active{box-shadow:var(--thumb-shadow-active);cursor:var(--thumb-cursor-active);scale:var(--thumb-scale-active)}.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-ticks--vertical{flex-direction:column-reverse}.range-filter-track{background:var(--track-color);height:var(--track-height);margin-inline:var(--track-inset);overflow:var(--track-overflow);width:calc(100% - var(--track-inset) * 2);border-radius:999px;position:relative}.range-filter-track--vertical{height:calc(100% - var(--track-inset) * 2);margin-block:var(--track-inset);width:var(--track-height);margin-inline:0}.range-filter-value{font-size:var(--value-font-size);font-variant-numeric:tabular-nums;font-weight:var(--value-font-weight);align-items:center;display:inline-flex}.range-filter-values{align-items:center;gap:6px;display:flex}.range-filter.--disabled{opacity:.5}@media (prefers-reduced-motion:reduce){.range-filter-column,.range-filter-ghost,.range-filter-strip{transition:none}}.range{appearance:none;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;outline:none}.range::-moz-range-thumb{appearance:none;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%;outline:none}.range::-webkit-slider-thumb{appearance:none;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%;outline:none}.range--slider{--focus-color:oklch(from var(--color-text-500) l c h / .24);--range-color:var(--color-text-500);--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)}@media (pointer:coarse){.range--slider{--thumb-size:20px}}.range.range--slider{--background-default:linear-gradient(to right, var(--range-color) var(--thumb-position), var(--track-color) var(--thumb-position));--height:4px}.range.range--slider::-webkit-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);appearance:none;border-radius:50%;transition:box-shadow .15s ease-out,scale .15s ease-out}.range.range--slider::-moz-range-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);appearance:none;border-radius:50%;transition:box-shadow .15s ease-out,scale .15s ease-out}.range.range--slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--focus-color)}.range.range--slider:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--focus-color)}.range.range--slider:active:not(:disabled)::-webkit-slider-thumb{box-shadow:none;cursor:grabbing;scale:1.2}.range.range--slider:active:not(:disabled)::-moz-range-thumb{box-shadow:none;cursor:grabbing;scale:1.2}.range.range--slider:disabled{opacity:.64}.range.range--slider:disabled::-webkit-slider-thumb{cursor:not-allowed}.range.range--slider:disabled::-moz-range-thumb{cursor:not-allowed}@media (prefers-reduced-motion:reduce){.range.range--slider:active:not(:disabled)::-webkit-slider-thumb{scale:1}.range.range--slider:active:not(:disabled)::-moz-range-thumb{scale:1}}.range-filter.range--slider{--clear-display:none;--ghost-display:none;--header-align:center;--header-gap:8px;--heading-display:contents;--label-color:currentColor;--label-font-size:1em;--label-letter-spacing:normal;--label-margin:0;--label-text-transform:none;--range-border-radius:999px;--thumb-border-width:1px;--thumb-cursor:grab;--thumb-cursor-active:grabbing;--thumb-outline:none;--thumb-scale-active:1.2;--thumb-scale-hover:1;--thumb-shadow-active:none;--thumb-shadow-focus:0 0 0 3px var(--focus-color);--thumb-transition:box-shadow .15s ease-out, scale .15s ease-out;--track-height:4px;--track-inset:calc(var(--thumb-size) / 2);--track-overflow:visible;--value-font-size:calc(var(--font-size-400) * .875);--value-font-weight:initial;--width:100%;font-size:var(--value-font-size);gap:8px}.range-filter.range--slider.--disabled{--thumb-cursor:not-allowed;--thumb-cursor-active:not-allowed;--thumb-scale-active:1;opacity:.64}@media (prefers-reduced-motion:reduce){.range-filter.range--slider{--thumb-scale-active:1;--thumb-transition:box-shadow .15s ease-out}}.range--vertical{--vertical-size:176px}.range.range--vertical{--background-default:linear-gradient(to top, var(--thumb-background) var(--thumb-position), var(--color-black-300) var(--thumb-position));height:var(--vertical-size);margin-block:var(--margin-vertical);margin-inline:calc(var(--margin-horizontal) + (var(--thumb-size) - var(--height)) / 2);width:var(--height);writing-mode:vertical-lr;direction:rtl}.range.range--vertical.range--slider{--background-default:linear-gradient(to top, var(--range-color) var(--thumb-position), var(--track-color) var(--thumb-position))}.range-filter.range--vertical{--width:max-content}}
 /*$vite$:1*/

package/build/components/relative-time/index.d.ts

@@ -1,12 +1,22 @@
+import * as template_u1 from '@esportsplus/template';
 import { type Attributes } from '@esportsplus/template';
-import '../tooltip/scss/index.scss';
 import './scss/index.scss';
 type A = Attributes & {
     [RELATIVE_TIME_TOOLTIP]?: Attributes;
     date: Value;
+    onanimationcancel?: never;
+    onanimationend?: never;
+    onanimationstart?: never;
+    ondocumentkeydown?: never;
     ondocumentvisibilitychange?: never;
-    onpointerenter?: never;
-    onpointerleave?: never;
+    onfocusin?: never;
+    onfocusout?: never;
+    onmouseout?: never;
+    onmouseover?: never;
+    onpointermove?: never;
+    ontransitioncancel?: never;
+    ontransitionend?: never;
+    ontransitionrun?: never;
     state?: State;
 };
 type State = {
@@ -15,11 +25,8 @@ type State = {
 };
 type Value = Date | number | string | null;
 declare const RELATIVE_TIME_TOOLTIP: unique symbol;
-declare function template(this: {
-    attributes?: Partial<A>;
-} | void, { date, state, ...attributes }: A): DocumentFragment | Text;
-declare const _default: typeof template & {
+declare const _default: template_u1.Factory<A, template_u1.Renderable<any>, template_u1.Renderable<any>, {
     readonly tooltip: typeof RELATIVE_TIME_TOOLTIP;
-};
+}>;
 export default _default;
 export type { State as RelativeTimeState, Value as RelativeTimeValue };