@esportsplus/ui 0.55.0 → 0.56.2

package/build/components/password/index.js

@@ -0,0 +1,74 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import input from '../input/index.js';
+import { PASSWORD_INPUT } from './constants.js';
+import './scss/index.scss';
+const template_1y936ck2 = template_u1.template(`<div class='password'><div class='password-field'><!--$--><div class='password-key' aria-hidden='true'><span class='password-key-light'></span><svg viewBox='0 0 12 10'><path d='M6 1 2 5h2v1.5h4V5h2L6 1Z' /><path d='M4 8.75h4' /></svg></div><button class='password-toggle' type='button'><svg class='password-toggle-show' viewBox='0 0 16 16' aria-hidden='true'><path d='M1.5 8S4 3.5 8 3.5 14.5 8 14.5 8 12 12.5 8 12.5 1.5 8 1.5 8Z' /><circle cx='8' cy='8' r='2' /></svg><svg class='password-toggle-hide' viewBox='0 0 16 16' aria-hidden='true'><path d='M1.5 8S4 3.5 8 3.5 14.5 8 14.5 8 12 12.5 8 12.5 1.5 8 1.5 8Z' /><circle cx='8' cy='8' r='2' /><path d='m2.5 2.5 11 11' /></svg></button></div><div class='password-warning'><span aria-hidden='true'>Caps Lock is on</span><span class='password-warning-live' aria-live='polite'>`);
+class ReactiveObject_1y936ck0 extends reactivity_u0.ReactiveObject {
+    #active = this[reactivity_u0.SIGNAL](false);
+    #capslock = this[reactivity_u0.SIGNAL](false);
+    #error = this[reactivity_u0.SIGNAL]('');
+    #visible = this[reactivity_u0.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get active() {
+        return reactivity_u0.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_u0.write(this.#active, _v0);
+    }
+    get capslock() {
+        return reactivity_u0.read(this.#capslock);
+    }
+    set capslock(_v1) {
+        reactivity_u0.write(this.#capslock, _v1);
+    }
+    get error() {
+        return reactivity_u0.read(this.#error);
+    }
+    set error(_v2) {
+        reactivity_u0.write(this.#error, _v2);
+    }
+    get visible() {
+        return reactivity_u0.read(this.#visible);
+    }
+    set visible(_v3) {
+        reactivity_u0.write(this.#visible, _v3);
+    }
+}
+function template({ state = new ReactiveObject_1y936ck0(), ...attributes } = {}) {
+    let read = (e) => {
+        state.capslock = e.getModifierState('CapsLock');
+    }, warning = () => state.active && state.capslock;
+    return (() => {
+        let root_1y936ck1 = template_1y936ck2(), element_1y936ck3 = root_1y936ck1.firstChild, element_1y936ck4 = element_1y936ck3.firstElementChild.firstChild, element_1y936ck5 = element_1y936ck3.firstElementChild.firstElementChild.nextElementSibling, element_1y936ck6 = element_1y936ck3.firstElementChild.nextElementSibling.firstElementChild.nextElementSibling;
+        template_u1.setProperties(element_1y936ck3, this?.attributes);
+        template_u1.setProperties(element_1y936ck3, attributes);
+        template_u1.setList(element_1y936ck3, 'class', [
+            () => state.active && '--active',
+            () => warning() && '--capslock'
+        ]);
+        template_u1.delegate(element_1y936ck3, 'keydown', read);
+        template_u1.delegate(element_1y936ck3, 'keyup', read);
+        template_u1.delegate(element_1y936ck3, 'pointerdown', read);
+        template_u1.slot(element_1y936ck4, input.call({ attributes: this?.attributes?.[PASSWORD_INPUT] }, {
+            autocomplete: 'current-password',
+            ...attributes[PASSWORD_INPUT],
+            state,
+            type: () => state.visible ? 'text' : 'password'
+        }));
+        template_u1.setProperty(element_1y936ck5, 'aria-label', () => state.visible ? 'Hide password' : 'Show password');
+        template_u1.setProperty(element_1y936ck5, 'aria-pressed', () => String(state.visible));
+        template_u1.setList(element_1y936ck5, 'class', () => state.visible && '--visible');
+        template_u1.delegate(element_1y936ck5, 'click', () => {
+            state.visible = !state.visible;
+        });
+        template_u1.delegate(element_1y936ck5, 'pointerdown', (e) => {
+            e.preventDefault();
+        });
+        new template_u1.EffectSlot(element_1y936ck6, () => warning() ? 'Caps Lock is on' : '', 1);
+        return root_1y936ck1;
+    })();
+}
+export default Object.assign(template, { input: PASSWORD_INPUT });

package/build/components/password/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.password{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--border-color:var(--border-color-default);--border-color-active:var(--border-color-default);--border-color-default:var(--background);--border-color-hover:var(--border-color-default);--border-radius:var(--border-radius-400);--border-style:solid;--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-active:var(--box-shadow-default);--box-shadow-default:none;--box-shadow-hover:var(--box-shadow-default);--key-background:var(--color-white-400);--key-border-color:var(--color-border-400);--key-color:var(--color-text-300);--key-height:22px;--key-light-color:var(--key-border-color);--key-light-color-active:var(--color-green-400);--key-width:30px;--toggle-background-hover:var(--color-grey-400);--toggle-color:var(--color-text-300);--toggle-color-hover:var(--color-text-500);--toggle-size:32px;--transition-duration:.15s;--transition-timing-function:cubic-bezier(.23, 1, .32, 1);--transition-timing-function-spring:cubic-bezier(.34, 1.3, .64, 1);--warning-color:var(--color-text-300);--warning-font-size:var(--font-size-300);--warning-height:20px}.password:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover)}.password.--active{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active)}.password.--capslock{--key-light-color:var(--key-light-color-active)}.password{gap:var(--size-100);width:100%;min-width:0;display:grid}.password-field{background:var(--background);border:var(--border-width) var(--border-style) var(--border-color);border-radius:var(--border-radius);box-shadow:var(--box-shadow);transition:background var(--transition-duration) ease-out, border-color var(--transition-duration) ease-out, box-shadow var(--transition-duration) ease-out;position:relative}.password-field .input{--background:transparent;--border-width:0px;padding-right:calc(var(--toggle-size) + var(--key-width) + var(--size-300));outline:none}.password-key{background:var(--key-background);border:1px solid var(--key-border-color);box-shadow:0 2px 0 0 var(--key-border-color);filter:blur(3px);height:var(--key-height);inset:0 calc(var(--toggle-size) + 8px) 0 auto;opacity:0;pointer-events:none;transition:filter 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(--key-width);border-radius:5px;flex-direction:column;justify-content:space-between;margin:auto 0;padding:3px 4px;display:flex;position:absolute;transform:translate(8px)}.password-key svg{color:var(--key-color);fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1px;align-self:center;width:11px;height:9px}.password-key-light{background:var(--key-light-color);border-radius:50%;width:4px;height:4px;transition:background-color .3s ease-out,box-shadow .3s ease-out}.password-toggle{border-radius:calc(var(--border-radius) - 2px);color:var(--toggle-color);cursor:pointer;height:var(--toggle-size);touch-action:manipulation;transition:background-color var(--transition-duration) ease-out, color var(--transition-duration) ease-out, scale var(--transition-duration) ease-out;width:var(--toggle-size);place-items:center;margin:auto 0;display:grid;position:absolute;inset:0 4px 0 auto}.password-toggle:hover{background:var(--toggle-background-hover);color:var(--toggle-color-hover)}.password-toggle:active{scale:.96}.password-toggle:focus-visible{outline:2px solid var(--toggle-color-hover)}.password-toggle svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;height:16px;transition:filter .3s var(--transition-timing-function), opacity .3s var(--transition-timing-function), scale .3s var(--transition-timing-function);grid-area:1/1;width:16px}.password-toggle:not(.--visible) .password-toggle-hide,.password-toggle.--visible .password-toggle-show{filter:blur(4px);opacity:0;scale:.25}.password-warning{color:var(--warning-color);font-size:var(--warning-font-size);height:var(--warning-height);line-height:var(--warning-height);position:relative}.password-warning>span:first-child{filter:blur(2px);opacity:0;transition:filter var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function), transform var(--transition-duration) var(--transition-timing-function);position:absolute;inset:0;transform:translateY(-2px)}.password-warning-live{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.password.--capslock .password-key{filter:none;opacity:1;transition-duration:.35s;transition-timing-function:var(--transition-timing-function-spring);transform:none}.password.--capslock .password-key-light{box-shadow:0 0 4px 1px color-mix(in oklch, var(--key-light-color) 55%, transparent)}.password.--capslock .password-warning>span:first-child{filter:none;opacity:1;transition-duration:.2s;transform:none}@media (prefers-reduced-motion:reduce){.password .password-key,.password .password-toggle svg,.password .password-warning>span:first-child{transition-property:opacity}}}
+/*$vite$:1*/

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

@@ -0,0 +1,15 @@
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    label?: string;
+    percent?: boolean;
+    state?: State;
+    status?: (value: number) => string;
+    value?: number;
+};
+type State = {
+    value: number;
+};
+export default _default;
+declare function _default({ label, percent, state, status, value, ...attributes }: A): DocumentFragment | Text;
+export type { State as ProgressState };

package/build/components/progress/index.js

@@ -0,0 +1,37 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import * as template_u1 from '@esportsplus/template';
+import './scss/index.scss';
+const template_11w7dyi1 = template_u1.template(`<div class='progress'><!--$--><div aria-valuemax='100' aria-valuemin='0' class='progress-track' role='progressbar'><div class='progress-indicator'>`);
+const template_11w7dyi7 = template_u1.template(`<div class='progress-header'><span class='progress-label'>`);
+const template_11w7dyib = template_u1.template(`<span class='progress-percent'>`);
+const template_11w7dyie = template_u1.template(`<div class='progress-status'>`);
+function clamp(value) {
+    return Math.min(100, Math.max(0, value || 0));
+}
+export default ({ label, percent = true, state, status, value = 0, ...attributes }) => {
+    let s = state ?? reactivity_u0.reactive({ value });
+    return (() => {
+        let root_11w7dyi0 = template_11w7dyi1(), element_11w7dyi2 = root_11w7dyi0.firstChild, element_11w7dyi3 = element_11w7dyi2.firstChild, element_11w7dyi4 = element_11w7dyi2.firstElementChild, element_11w7dyi5 = element_11w7dyi4.firstElementChild;
+        template_u1.setProperties(element_11w7dyi2, attributes);
+        template_u1.slot(element_11w7dyi3, label && (() => {
+            let root_11w7dyi6 = template_11w7dyi7(), element_11w7dyi8 = root_11w7dyi6.firstChild.firstElementChild, element_11w7dyi9 = root_11w7dyi6.firstChild;
+            template_u1.slot(element_11w7dyi8, label, 1);
+            template_u1.slot(element_11w7dyi9, percent && (() => {
+                let root_11w7dyia = template_11w7dyib(), element_11w7dyic = root_11w7dyia.firstChild;
+                new template_u1.EffectSlot(element_11w7dyic, () => `${Math.round(clamp(s.value))}%`, 1);
+                return root_11w7dyia;
+            })(), 2);
+            return root_11w7dyi6;
+        })());
+        template_u1.setProperty(element_11w7dyi4, 'aria-label', label ?? 'Progress');
+        template_u1.setProperty(element_11w7dyi4, 'aria-valuenow', () => Math.round(clamp(s.value)));
+        template_u1.setProperty(element_11w7dyi4, 'aria-valuetext', () => status ? status(clamp(s.value)) : `${Math.round(clamp(s.value))}%`);
+        template_u1.setList(element_11w7dyi5, 'style', () => `translate: ${clamp(s.value) - 100}% 0`);
+        template_u1.slot(element_11w7dyi2, status && (() => {
+            let root_11w7dyid = template_11w7dyie(), element_11w7dyif = root_11w7dyid.firstChild;
+            new template_u1.EffectSlot(element_11w7dyif, () => status(clamp(s.value)), 1);
+            return root_11w7dyid;
+        })(), 2);
+        return root_11w7dyi0;
+    })();
+};

package/build/components/progress/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.progress{--color:var(--color-text-500);--duration:.15s;--ease:cubic-bezier(.4, 0, .2, 1);--font-size:calc(var(--font-size-400) * .875);--height:6px;--indicator-color:var(--color-text-500);--muted-color:var(--color-text-300);--status-font-size:12px;--track-color:var(--color-grey-500);color:var(--color);font-size:var(--font-size);flex-direction:column;gap:8px;width:100%;display:flex}.progress-header{justify-content:space-between;align-items:baseline;display:flex}.progress-indicator{background:var(--indicator-color);height:100%;transition:translate var(--duration) var(--ease);width:100%}.progress-percent{color:var(--muted-color);font-variant-numeric:tabular-nums}.progress-status{color:var(--muted-color);font-size:var(--status-font-size)}.progress-track{background:var(--track-color);height:var(--height);border-radius:999px;width:100%;position:relative;overflow:hidden}@media (prefers-reduced-motion:reduce){.progress-indicator{transition:none}}}
+/*$vite$:1*/

package/build/components/pull-to-refresh/index.d.ts

@@ -0,0 +1,26 @@
+import { type Attributes, type Renderable } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    [PULL_TO_REFRESH_SCROLLER]?: Attributes;
+    announce?: (count: number) => string;
+    onrefresh: () => unknown;
+    state?: State;
+};
+type State = {
+    refreshing: boolean;
+};
+declare const PULL_TO_REFRESH_SCROLLER: unique symbol;
+declare const _default: {
+    (): Renderable<any>;
+    <T extends A>(attributes: T): Renderable<any>;
+    <T extends Renderable<unknown>>(content: T): Renderable<any>;
+    (attributes: A, content?: Renderable<unknown>): Renderable<any>;
+    bind(context: {
+        attributes?: Partial<A> | undefined;
+        content?: Renderable<unknown>;
+    }): any;
+} & {
+    readonly scroller: typeof PULL_TO_REFRESH_SCROLLER;
+};
+export default _default;
+export type { State };

package/build/components/pull-to-refresh/index.js

@@ -0,0 +1,260 @@
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect, onCleanup } from '@esportsplus/reactivity';
+import './scss/index.scss';
+const template_0qoomb22 = template_u1.template(`<div class='pull-to-refresh '><div aria-hidden='true' class='pull-to-refresh-indicator'><div class='pull-to-refresh-glyph'><svg class='pull-to-refresh-spinner' fill='none' stroke='currentColor' stroke-linecap='round' stroke-width='2' viewBox='0 0 24 24'><line class='pull-to-refresh-tick' style='--index: 0; --order: 0;' transform='rotate(0 12 12)' x1='12' x2='12' y1='3' y2='7' /><line class='pull-to-refresh-tick' style='--index: 1; --order: 7;' transform='rotate(-45 12 12)' x1='12' x2='12' y1='3' y2='7' /><line class='pull-to-refresh-tick' style='--index: 2; --order: 6;' transform='rotate(-90 12 12)' x1='12' x2='12' y1='3' y2='7' /><line class='pull-to-refresh-tick' style='--index: 3; --order: 5;' transform='rotate(-135 12 12)' x1='12' x2='12' y1='3' y2='7' /><line class='pull-to-refresh-tick' style='--index: 4; --order: 4;' transform='rotate(-180 12 12)' x1='12' x2='12' y1='3' y2='7' /><line class='pull-to-refresh-tick' style='--index: 5; --order: 3;' transform='rotate(-225 12 12)' x1='12' x2='12' y1='3' y2='7' /><line class='pull-to-refresh-tick' style='--index: 6; --order: 2;' transform='rotate(-270 12 12)' x1='12' x2='12' y1='3' y2='7' /><line class='pull-to-refresh-tick' style='--index: 7; --order: 1;' transform='rotate(-315 12 12)' x1='12' x2='12' y1='3' y2='7' /></svg></div></div><div class='pull-to-refresh-scroller'><div class='pull-to-refresh-content'></div></div><span aria-live='polite' class='pull-to-refresh-status'>`);
+class ReactiveObject_0qoomb20 extends reactivity_u0.ReactiveObject {
+    #refreshing = this[reactivity_u0.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get refreshing() {
+        return reactivity_u0.read(this.#refreshing);
+    }
+    set refreshing(_v0) {
+        reactivity_u0.write(this.#refreshing, _v0);
+    }
+}
+const DRAG_SLOP = 4;
+const FRESH = { duration: 300, easing: 'cubic-bezier(0.23, 1, 0.32, 1)' };
+const PULL_TO_REFRESH_SCROLLER = Symbol.for('@esportsplus/ui/pull-to-refresh.scroller');
+const RUBBER = 0.7;
+const RUBBER_DIMENSION = 480;
+const SETTLE = (2 * Math.PI) / (1.2 * 0.35);
+const SLIDE_IN = (2 * Math.PI) / (1.2 * 0.5);
+const THRESHOLD = 64;
+function announcement(count) {
+    return `Updated, ${count} new item${count === 1 ? '' : 's'}`;
+}
+function reduced() {
+    return matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+function rubberband(distance) {
+    return (distance * RUBBER_DIMENSION * RUBBER) / (RUBBER_DIMENSION + RUBBER * distance);
+}
+function unband(offset) {
+    return (offset * RUBBER_DIMENSION) / (RUBBER * (RUBBER_DIMENSION - offset));
+}
+export default Object.assign(component(function ({ announce = announcement, onrefresh, state = new ReactiveObject_0qoomb20(), ...attributes }, content) {
+    let busy = false, cleanup, feed, frame = 0, gesture = null, glyph, mouse = null, reveal = 0, root, scroller, spring = { omega: SETTLE, target: 0, velocity: 0 }, status, time = 0, touch = null, y = 0;
+    function begin() {
+        stop();
+        glyph?.classList.remove('--fading');
+        gesture = { base: unband(Math.max(y, 0)), samples: [] };
+    }
+    function end() {
+        let g = gesture;
+        gesture = null;
+        if (!g) {
+            return;
+        }
+        let first = g.samples[0], last = g.samples[g.samples.length - 1], dt = first && last ? (last.t - first.t) / 1000 : 0, velocity = dt > 0 ? (last.y - first.y) / dt : 0;
+        if (y >= THRESHOLD) {
+            refresh(velocity);
+        }
+        else {
+            move(0, SETTLE, velocity);
+        }
+    }
+    function land(first) {
+        let count = 0, height = 0, motion = !reduced();
+        if (first?.isConnected && feed && first.parentElement === feed) {
+            let head = feed.firstElementChild;
+            height = first.offsetTop - head.offsetTop;
+            for (let node = head; node && node !== first; node = node.nextElementSibling) {
+                count++;
+                node.animate(motion
+                    ? [{ filter: 'blur(4px)', opacity: 0 }, { filter: 'blur(0px)', opacity: 1 }]
+                    : [{ opacity: 0 }, { opacity: 1 }], FRESH);
+            }
+        }
+        if (motion) {
+            glyph?.classList.add('--fading');
+        }
+        busy = false;
+        state.refreshing = false;
+        if (status) {
+            status.textContent = announce(count);
+        }
+        stop();
+        y -= height;
+        move(0, SLIDE_IN, 0);
+    }
+    function move(target, omega, velocity) {
+        stop();
+        if (reduced()) {
+            y = target;
+            paint();
+            return;
+        }
+        spring = { omega, target, velocity };
+        time = 0;
+        frame = requestAnimationFrame(tick);
+    }
+    function paint() {
+        root?.style.setProperty('--pull', String(Math.min(Math.max(y / THRESHOLD, 0), 1)));
+        root?.style.setProperty('--reveal', String(reveal));
+        root?.style.setProperty('--y', String(y));
+    }
+    function pull(distance, t) {
+        let g = gesture;
+        if (!g) {
+            return;
+        }
+        let offset = rubberband(Math.max(g.base + distance, 0));
+        y = offset;
+        reveal = Math.min(offset / THRESHOLD, 1);
+        g.samples.push({ t, y: offset });
+        while (g.samples.length > 2 && t - g.samples[0].t > 100) {
+            g.samples.shift();
+        }
+        paint();
+    }
+    function refresh(velocity) {
+        let first = feed?.firstElementChild ?? null;
+        busy = true;
+        reveal = 1;
+        state.refreshing = true;
+        glyph?.classList.remove('--fading');
+        if (status) {
+            status.textContent = '';
+        }
+        move(THRESHOLD, SETTLE, velocity);
+        void Promise.resolve()
+            .then(onrefresh)
+            .finally(() => requestAnimationFrame(() => land(first)));
+    }
+    function stop() {
+        cancelAnimationFrame(frame);
+        frame = 0;
+    }
+    function tick(now) {
+        let dt = time ? Math.min((now - time) / 1000, 1 / 30) : 1 / 60, decay = Math.exp(-spring.omega * dt), offset = y - spring.target, slope = spring.velocity + spring.omega * offset;
+        time = now;
+        y = spring.target + (offset + slope * dt) * decay;
+        spring.velocity = (spring.velocity - spring.omega * slope * dt) * decay;
+        if (Math.abs(y - spring.target) < 0.05 && Math.abs(spring.velocity) < 1) {
+            y = spring.target;
+            frame = 0;
+        }
+        else {
+            frame = requestAnimationFrame(tick);
+        }
+        paint();
+    }
+    function touchend() {
+        if (touch?.pulling) {
+            end();
+        }
+        touch = null;
+    }
+    function touchmove(e) {
+        if (!touch || !scroller) {
+            return;
+        }
+        let dy = e.touches[0].clientY - touch.y;
+        if (!touch.pulling) {
+            if (dy <= 0 || scroller.scrollTop > 0) {
+                touch = null;
+                return;
+            }
+            touch.pulling = true;
+            begin();
+        }
+        e.preventDefault();
+        pull(dy, e.timeStamp);
+    }
+    function touchstart(e) {
+        touch = null;
+        if (busy || e.touches.length > 1 || !scroller || scroller.scrollTop > 0 || y < 0) {
+            return;
+        }
+        touch = { pulling: false, y: e.touches[0].clientY };
+    }
+    onCleanup(effect(() => {
+        if (!state.refreshing || busy) {
+            return;
+        }
+        scroller?.scrollTo({ behavior: reduced() ? 'auto' : 'smooth', top: 0 });
+        refresh(0);
+    }));
+    return (() => {
+        let root_0qoomb21 = template_0qoomb22(), element_0qoomb23 = root_0qoomb21.firstChild, element_0qoomb24 = element_0qoomb23.firstElementChild.nextElementSibling, element_0qoomb25 = element_0qoomb24.firstElementChild;
+        template_u1.setList(element_0qoomb23, 'class', () => state.refreshing && '--refreshing');
+        template_u1.setProperties(element_0qoomb23, this?.attributes);
+        template_u1.setProperties(element_0qoomb23, attributes);
+        template_u1.onconnect(element_0qoomb23, (el) => {
+            feed = el.querySelector('.pull-to-refresh-content') ?? undefined;
+            glyph = el.querySelector('.pull-to-refresh-glyph') ?? undefined;
+            root = el;
+            scroller = el.querySelector('.pull-to-refresh-scroller') ?? undefined;
+            status = el.querySelector('.pull-to-refresh-status') ?? undefined;
+            paint();
+            if (!scroller) {
+                return;
+            }
+            let source = scroller;
+            source.addEventListener('touchcancel', touchend);
+            source.addEventListener('touchend', touchend);
+            source.addEventListener('touchmove', touchmove, { passive: false });
+            source.addEventListener('touchstart', touchstart, { passive: true });
+            cleanup = () => {
+                source.removeEventListener('touchcancel', touchend);
+                source.removeEventListener('touchend', touchend);
+                source.removeEventListener('touchmove', touchmove);
+                source.removeEventListener('touchstart', touchstart);
+            };
+        });
+        template_u1.ondisconnect(element_0qoomb23, () => {
+            cleanup?.();
+            stop();
+        });
+        template_u1.setProperty(element_0qoomb24, 'aria-busy', () => String(state.refreshing));
+        template_u1.setProperties(element_0qoomb24, this?.attributes?.[PULL_TO_REFRESH_SCROLLER]);
+        template_u1.setProperties(element_0qoomb24, attributes[PULL_TO_REFRESH_SCROLLER]);
+        template_u1.delegate(element_0qoomb24, 'pointercancel', () => {
+            if (mouse?.pulling) {
+                end();
+            }
+            mouse = null;
+        });
+        template_u1.delegate(element_0qoomb24, 'pointerdown', (e) => {
+            if (e.pointerType !== 'mouse' || e.button !== 0) {
+                return;
+            }
+            if (busy || e.currentTarget.scrollTop > 0 || y < 0) {
+                return;
+            }
+            mouse = { pulling: false, y: e.clientY };
+        });
+        template_u1.delegate(element_0qoomb24, 'pointermove', (e) => {
+            let m = mouse;
+            if (!m) {
+                return;
+            }
+            let dy = e.clientY - m.y;
+            if (!m.pulling) {
+                if (dy < -DRAG_SLOP) {
+                    mouse = null;
+                }
+                if (dy <= DRAG_SLOP) {
+                    return;
+                }
+                m.pulling = true;
+                m.y = e.clientY;
+                e.currentTarget.setPointerCapture(e.pointerId);
+                begin();
+            }
+            pull(e.clientY - m.y, e.timeStamp);
+        });
+        template_u1.delegate(element_0qoomb24, 'pointerup', () => {
+            if (mouse?.pulling) {
+                end();
+            }
+            mouse = null;
+        });
+        template_u1.slot(element_0qoomb25, content, 1);
+        return root_0qoomb21;
+    })();
+}), { scroller: PULL_TO_REFRESH_SCROLLER });

package/build/components/pull-to-refresh/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.pull-to-refresh{--background:var(--color-white-300);--color:var(--color-text-500);--fade-duration:.15s;--fade-timing-function:cubic-bezier(.23, 1, .32, 1);--height:100%;--indicator-height:64px;--spin-duration:.8s;--spinner-size:24px;--pull:0;--reveal:0;--y:0;height:var(--height);min-height:0;position:relative}.pull-to-refresh-content{background:var(--background);min-height:100%;translate:0 calc(var(--y) * 1px);-webkit-user-select:none;user-select:none}.pull-to-refresh-glyph{rotate:calc(var(--y) * 3deg);display:flex}.pull-to-refresh-glyph.--fading{opacity:0;transition:opacity var(--fade-duration) var(--fade-timing-function)}.pull-to-refresh-indicator{color:var(--color);height:var(--indicator-height);opacity:var(--pull);pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0 0 auto}.pull-to-refresh-scroller{overscroll-behavior:contain;height:100%;position:relative;overflow-y:auto}.pull-to-refresh-spinner{height:var(--spinner-size);width:var(--spinner-size)}.pull-to-refresh-status{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;position:absolute;overflow:hidden}.pull-to-refresh-tick{opacity:calc(clamp(0, (var(--reveal) * 8 - var(--order)) * 1000, 1) * (1 - var(--index) * .1))}.pull-to-refresh.--refreshing .pull-to-refresh-spinner{animation:pull-to-refresh-spin var(--spin-duration) steps(8) infinite}@media (prefers-reduced-motion:reduce){.pull-to-refresh.--refreshing .pull-to-refresh-spinner{animation:none}.pull-to-refresh-glyph.--fading{transition:none}}@keyframes pull-to-refresh-spin{to{rotate:360deg}}}
+/*$vite$:1*/

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