@esportsplus/ui 0.54.0 → 0.56.2

package/build/components/radio/index.js

@@ -1,2 +1,3 @@
 import { factory } from '../checkbox/index.js';
-export default factory('radio');
+const radio = factory('radio');
+export default radio;

package/build/components/radio-cards/index.d.ts

@@ -0,0 +1,36 @@
+import { type Attributes } from '@esportsplus/template';
+import { factory } from '../checkbox/index.js';
+import radio from '../radio/index.js';
+import './scss/index.scss';
+type A = Attributes & {
+    [RADIO_CARDS_CARD]?: Attributes;
+    [RADIO_CARDS_INPUT]?: Input;
+    label: string;
+    name?: string;
+    options: Option[];
+    state?: {
+        error: string;
+        value: string;
+    };
+    value?: string;
+};
+type Input = NonNullable<NonNullable<Parameters<typeof radio>[0]>[typeof factory.input]>;
+type Option = {
+    badge?: string;
+    description: string;
+    period?: string;
+    price: string;
+    title: string;
+    value: string;
+};
+declare const RADIO_CARDS_CARD: unique symbol;
+declare const RADIO_CARDS_INPUT: unique symbol;
+declare function template(this: {
+    attributes?: Pick<A, typeof RADIO_CARDS_CARD | typeof RADIO_CARDS_INPUT>;
+} | void, { label, name, options, value, state, ...attributes }: A): DocumentFragment | Text;
+declare const _default: typeof template & {
+    readonly card: typeof RADIO_CARDS_CARD;
+    readonly input: typeof RADIO_CARDS_INPUT;
+};
+export default _default;
+export type { Option };

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

@@ -0,0 +1,106 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { factory } from '../checkbox/index.js';
+import radio from '../radio/index.js';
+import './scss/index.scss';
+const template_108kira2 = template_u1.template(`<fieldset class='radio-cards'><legend class='radio-cards-legend'></legend><div class='radio-cards-grid'>`);
+const template_108kira7 = template_u1.template(`<label class='radio-cards-card'><span aria-hidden='true' class='radio-cards-ring'></span><span class='radio-cards-dot'><!--$--><svg aria-hidden='true' class='radio-cards-check' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'><path d='m3.5 8.5 3 3 6-7' /></svg></span><span class='radio-cards-content'><span class='radio-cards-heading'><span class='radio-cards-title'></span></span><span class='radio-cards-description'></span></span><span class='radio-cards-price'><span class='radio-cards-amount'>`);
+const template_108kirag = template_u1.template(`<span class='radio-cards-badge'>`);
+const template_108kiraj = template_u1.template(`<span class='radio-cards-period'>`);
+class ReactiveObject_108kira0 extends reactivity_u0.ReactiveObject {
+    #error = this[reactivity_u0.SIGNAL]('');
+    #value;
+    constructor(_p0) {
+        super(null);
+        this.#value = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get error() {
+        return reactivity_u0.read(this.#error);
+    }
+    set error(_v0) {
+        reactivity_u0.write(this.#error, _v0);
+    }
+    get value() {
+        return reactivity_u0.read(this.#value);
+    }
+    set value(_v1) {
+        reactivity_u0.write(this.#value, _v1);
+    }
+}
+const RADIO_CARDS_CARD = Symbol.for('@esportsplus/ui/radio-cards.card');
+const RADIO_CARDS_INPUT = Symbol.for('@esportsplus/ui/radio-cards.input');
+const RING = {
+    duration: 300,
+    easing: 'linear(0, 0.058, 0.18, 0.321, 0.455, 0.573, 0.671, 0.75, 0.812, 0.86, 0.897, 0.924, 0.944, 0.96, 0.971, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1)'
+};
+let uid = 0;
+function glide(grid, previous) {
+    let ring = grid.querySelector('.radio-cards-card:has(input:checked) .radio-cards-ring');
+    if (!previous || !ring || matchMedia('(prefers-reduced-motion: reduce)').matches) {
+        return;
+    }
+    let next = ring.getBoundingClientRect(), x = previous.left - next.left, y = previous.top - next.top;
+    if (x === 0 && y === 0) {
+        return;
+    }
+    ring.animate([
+        { translate: `${x}px ${y}px` },
+        { translate: '0px 0px' }
+    ], RING);
+}
+function template({ label, name, options, value, state = new ReactiveObject_108kira0(value ?? options[0]?.value ?? ''), ...attributes }) {
+    let group = name ?? `radio-cards-${++uid}`, previous;
+    return (() => {
+        let root_108kira1 = template_108kira2(), element_108kira3 = root_108kira1.firstChild, element_108kira4 = element_108kira3.firstElementChild, element_108kira5 = element_108kira4.nextElementSibling;
+        template_u1.setProperties(element_108kira3, this?.attributes);
+        template_u1.setProperties(element_108kira3, attributes);
+        template_u1.slot(element_108kira4, label, 1);
+        template_u1.delegate(element_108kira5, 'pointerdown', function () {
+            previous = this.querySelector('.radio-cards-card:has(input:checked) .radio-cards-ring')?.getBoundingClientRect();
+        });
+        template_u1.slot(element_108kira5, options.map((option) => {
+            let root_108kira6 = template_108kira7(), element_108kira8 = root_108kira6.firstChild, element_108kira9 = element_108kira8.firstElementChild.nextElementSibling.firstChild, element_108kiraa = element_108kira8.firstElementChild.nextElementSibling.nextElementSibling.firstElementChild.firstElementChild, element_108kirab = element_108kira8.firstElementChild.nextElementSibling.nextElementSibling.firstElementChild, element_108kirac = element_108kirab.nextElementSibling, element_108kirad = element_108kira8.firstElementChild.nextElementSibling.nextElementSibling.nextElementSibling.firstElementChild, element_108kirae = element_108kira8.firstElementChild.nextElementSibling.nextElementSibling.nextElementSibling;
+            template_u1.setProperties(element_108kira8, this?.attributes?.[RADIO_CARDS_CARD]);
+            template_u1.setProperties(element_108kira8, attributes[RADIO_CARDS_CARD]);
+            template_u1.slot(element_108kira9, radio({
+                state,
+                [factory.input]: {
+                    checked: () => state.value === option.value,
+                    name: group,
+                    onchange: function () {
+                        let grid = this.closest('.radio-cards-grid');
+                        state.value = option.value;
+                        if (grid) {
+                            glide(grid, previous);
+                        }
+                        previous = undefined;
+                    },
+                    onkeydown: function () {
+                        previous = this.closest('.radio-cards-grid')
+                            ?.querySelector('.radio-cards-card:has(input:checked) .radio-cards-ring')
+                            ?.getBoundingClientRect();
+                    },
+                    value: option.value,
+                    ...this?.attributes?.[RADIO_CARDS_INPUT],
+                    ...attributes[RADIO_CARDS_INPUT]
+                }
+            }));
+            template_u1.slot(element_108kiraa, option.title, 1);
+            template_u1.slot(element_108kirab, option.badge ? (() => {
+                let root_108kiraf = template_108kirag(), element_108kirah = root_108kiraf.firstChild;
+                template_u1.slot(element_108kirah, option.badge, 1);
+                return root_108kiraf;
+            })() : '', 2);
+            template_u1.slot(element_108kirac, option.description, 1);
+            template_u1.slot(element_108kirad, option.price, 1);
+            template_u1.slot(element_108kirae, option.period ? (() => {
+                let root_108kirai = template_108kiraj(), element_108kirak = root_108kirai.firstChild;
+                template_u1.slot(element_108kirak, option.period, 1);
+                return root_108kirai;
+            })() : '', 2);
+            return root_108kira6;
+        }), 1);
+        return root_108kira1;
+    })();
+}
+export default Object.assign(template, { card: RADIO_CARDS_CARD, input: RADIO_CARDS_INPUT });

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

@@ -0,0 +1,2 @@
+@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/index.js

@@ -1,9 +1,9 @@
-import * as template_u0 from '@esportsplus/template';
+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 './scss/index.scss';
-const template_u1k = template_u0.template(`<input class='range --border-state --border-black' type='range' />`);
+const template_0aka2e62 = template_u1.template(`<input class='range --border-state --border-black' type='range' />`);
 class ReactiveObject_0aka2e60 extends reactivity_u0.ReactiveObject {
     #active = this[reactivity_u0.SIGNAL](false);
     #error = this[reactivity_u0.SIGNAL]('');
@@ -36,23 +36,23 @@ export default function (attributes) {
         state.value = Number(attributes.value);
     }
     return (() => {
-        let root_u1j = template_u1k(), element_u1l = root_u1j.firstChild;
-        template_u0.setList(element_u1l, 'style', () => `--thumb-position: ${((state.value - min) / (max - min)) * 100}%`);
-        template_u0.setProperties(element_u1l, this?.attributes);
-        template_u0.setProperties(element_u1l, attributes);
-        template_u0.setList(element_u1l, 'class', () => state.active && '--active');
-        template_u0.on(element_u1l, 'focusin', () => {
+        let root_0aka2e61 = template_0aka2e62(), element_0aka2e63 = root_0aka2e61.firstChild;
+        template_u1.setList(element_0aka2e63, 'style', () => `--thumb-position: ${((state.value - min) / (max - min)) * 100}%`);
+        template_u1.setProperties(element_0aka2e63, this?.attributes);
+        template_u1.setProperties(element_0aka2e63, attributes);
+        template_u1.setList(element_0aka2e63, 'class', () => state.active && '--active');
+        template_u1.on(element_0aka2e63, 'focusin', () => {
             state.active = true;
         });
-        template_u0.on(element_u1l, 'focusout', () => {
+        template_u1.on(element_0aka2e63, 'focusout', () => {
             state.active = false;
         });
-        template_u0.delegate(element_u1l, 'input', (e) => {
+        template_u1.delegate(element_0aka2e63, 'input', (e) => {
             state.value = Number(e.target.value);
         });
-        template_u0.onrender(element_u1l, form.input.onrender(state));
-        template_u0.setProperty(element_u1l, 'value', root(() => attributes?.value || state.value || 0));
-        return root_u1j;
+        template_u1.onrender(element_0aka2e63, form.input.onrender(state));
+        template_u1.setProperty(element_0aka2e63, 'value', root(() => attributes?.value || state.value || 0));
+        return root_0aka2e61;
     })();
 }
 ;

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 };