@esportsplus/ui 0.54.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*/