@esportsplus/ui 0.54.0 → 0.56.2

package/build/components/range-slider/index.js

@@ -0,0 +1,287 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import input from '../input/index.js';
+import './scss/index.scss';
+const template_0uvwels4 = template_u1.template(`<label class='range-slider-field'><span class='range-slider-field-label'>Min</span><!--$-->`);
+const template_0uvwels8 = template_u1.template(`<span class='range-slider-field-prefix' aria-hidden='true'>`);
+const template_0uvwelsb = template_u1.template(`<label class='range-slider-field'><span class='range-slider-field-label'>Max</span><!--$-->`);
+const template_0uvwelsh = template_u1.template(`<label class='range-slider-field'><span class='range-slider-field-label'></span><!--$-->`);
+const template_0uvwelso = template_u1.template(`<div class='range-slider-handle '><div class='range-slider-thumb' role='slider' tabindex='0'><span class='range-slider-tooltip' aria-hidden='true'>`);
+const template_0uvwelst = template_u1.template(`<div class='range-slider'><div class='range-slider-header'><span class='range-slider-label'></span><span class='range-slider-summary'></span></div><div class='range-slider-track' role='group'><div class='range-slider-rail'><div class='range-slider-fill'></div></div><!--$--></div><div class='range-slider-fields'><!--$--><span class='range-slider-dash' aria-hidden='true'>`);
+class ReactiveObject_0uvwels0 extends reactivity_u0.ReactiveObject {
+    #high;
+    #low;
+    constructor(_p0, _p1) {
+        super(null);
+        this.#high = this[reactivity_u0.SIGNAL](_p0);
+        this.#low = this[reactivity_u0.SIGNAL](_p1);
+    }
+    get high() {
+        return reactivity_u0.read(this.#high);
+    }
+    set high(_v0) {
+        reactivity_u0.write(this.#high, _v0);
+    }
+    get low() {
+        return reactivity_u0.read(this.#low);
+    }
+    set low(_v1) {
+        reactivity_u0.write(this.#low, _v1);
+    }
+}
+class ReactiveObject_0uvwels1 extends reactivity_u0.ReactiveObject {
+    #dragging = this[reactivity_u0.SIGNAL](-1);
+    #gliding = this[reactivity_u0.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get dragging() {
+        return reactivity_u0.read(this.#dragging);
+    }
+    set dragging(_v0) {
+        reactivity_u0.write(this.#dragging, _v0);
+    }
+    get gliding() {
+        return reactivity_u0.read(this.#gliding);
+    }
+    set gliding(_v1) {
+        reactivity_u0.write(this.#gliding, _v1);
+    }
+}
+class ReactiveObject_0uvwels2 extends reactivity_u0.ReactiveObject {
+    #value;
+    constructor(_p0) {
+        super(null);
+        this.#value = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get value() {
+        return reactivity_u0.read(this.#value);
+    }
+    set value(_v0) {
+        reactivity_u0.write(this.#value, _v0);
+    }
+}
+const KEYS = ['low', 'high'];
+const RANGE_SLIDER_INPUT = Symbol.for('@esportsplus/ui/range-slider.input');
+const RANGE_SLIDER_THUMB = Symbol.for('@esportsplus/ui/range-slider.thumb');
+function clamp(value, lo, hi) {
+    return Math.min(Math.max(value, lo), hi);
+}
+function template({ format = String, label, max = 100, min = 0, prefix = '', state, step = 1, value, ...attributes }) {
+    let decimals = (String(step).split('.')[1] || '').length, defaults = this?.attributes, drag = null, name = label.toLowerCase(), s = state || new ReactiveObject_0uvwels0(value?.[1] ?? max, value?.[0] ?? min), span = max - min, thumbs = [], track, ui = new ReactiveObject_0uvwels1();
+    function commit(thumb, raw) {
+        let next = Number((Math.round((raw - min) / step) * step + min).toFixed(decimals)), bounded = thumb === 0 ? clamp(next, min, s.high - step) : clamp(next, s.low + step, max);
+        if (bounded === s[KEYS[thumb]]) {
+            return;
+        }
+        s[KEYS[thumb]] = bounded;
+    }
+    function end() {
+        drag = null;
+        ui.dragging = -1;
+        ui.gliding = false;
+    }
+    function field(thumb) {
+        let draft = new ReactiveObject_0uvwels2(null), key = KEYS[thumb];
+        function save() {
+            if (draft.value === null) {
+                return;
+            }
+            let parsed = Number(draft.value.replace(/[^\d.]/g, ''));
+            if (draft.value.trim() !== '' && Number.isFinite(parsed)) {
+                commit(thumb, parsed);
+            }
+            draft.value = null;
+        }
+        return (thumb === 0 ? (() => {
+            let root_0uvwels3 = template_0uvwels4(), element_0uvwels5 = root_0uvwels3.firstChild.firstChild.nextSibling, element_0uvwels6 = root_0uvwels3.firstChild;
+            template_u1.slot(element_0uvwels5, prefix && (() => {
+                let root_0uvwels7 = template_0uvwels8(), element_0uvwels9 = root_0uvwels7.firstChild;
+                template_u1.slot(element_0uvwels9, prefix, 1);
+                return root_0uvwels7;
+            })());
+            template_u1.slot(element_0uvwels6, input({
+                'aria-label': `${thumb === 0 ? 'Minimum' : 'Maximum'} ${name}`,
+                autocomplete: 'off',
+                class: 'range-slider-input',
+                inputmode: 'numeric',
+                onblur: save,
+                oninput: (e) => {
+                    draft.value = e.target.value;
+                },
+                onkeydown: (e) => {
+                    if (e.key === 'Enter') {
+                        save();
+                    }
+                    else if (e.key === 'Escape') {
+                        draft.value = null;
+                    }
+                },
+                value: () => draft.value ?? String(s[key]),
+                ...defaults?.[RANGE_SLIDER_INPUT],
+                ...attributes[RANGE_SLIDER_INPUT]
+            }), 2);
+            return root_0uvwels3;
+        })() : thumb === 1 ? (() => {
+            let root_0uvwelsa = template_0uvwelsb(), element_0uvwelsc = root_0uvwelsa.firstChild.firstChild.nextSibling, element_0uvwelsd = root_0uvwelsa.firstChild;
+            template_u1.slot(element_0uvwelsc, prefix && (() => {
+                let root_0uvwelse = template_0uvwels8(), element_0uvwelsf = root_0uvwelse.firstChild;
+                template_u1.slot(element_0uvwelsf, prefix, 1);
+                return root_0uvwelse;
+            })());
+            template_u1.slot(element_0uvwelsd, input({
+                'aria-label': `${thumb === 0 ? 'Minimum' : 'Maximum'} ${name}`,
+                autocomplete: 'off',
+                class: 'range-slider-input',
+                inputmode: 'numeric',
+                onblur: save,
+                oninput: (e) => {
+                    draft.value = e.target.value;
+                },
+                onkeydown: (e) => {
+                    if (e.key === 'Enter') {
+                        save();
+                    }
+                    else if (e.key === 'Escape') {
+                        draft.value = null;
+                    }
+                },
+                value: () => draft.value ?? String(s[key]),
+                ...defaults?.[RANGE_SLIDER_INPUT],
+                ...attributes[RANGE_SLIDER_INPUT]
+            }), 2);
+            return root_0uvwelsa;
+        })() : (() => {
+            let root_0uvwelsg = template_0uvwelsh(), element_0uvwelsi = root_0uvwelsg.firstChild.firstElementChild, element_0uvwelsj = root_0uvwelsg.firstChild.firstChild.nextSibling, element_0uvwelsk = root_0uvwelsg.firstChild;
+            element_0uvwelsi.appendChild(template_u1.text(thumb === 0 ? 'Min' : 'Max'));
+            template_u1.slot(element_0uvwelsj, prefix && (() => {
+                let root_0uvwelsl = template_0uvwels8(), element_0uvwelsm = root_0uvwelsl.firstChild;
+                template_u1.slot(element_0uvwelsm, prefix, 1);
+                return root_0uvwelsl;
+            })());
+            template_u1.slot(element_0uvwelsk, input({
+                'aria-label': `${thumb === 0 ? 'Minimum' : 'Maximum'} ${name}`,
+                autocomplete: 'off',
+                class: 'range-slider-input',
+                inputmode: 'numeric',
+                onblur: save,
+                oninput: (e) => {
+                    draft.value = e.target.value;
+                },
+                onkeydown: (e) => {
+                    if (e.key === 'Enter') {
+                        save();
+                    }
+                    else if (e.key === 'Escape') {
+                        draft.value = null;
+                    }
+                },
+                value: () => draft.value ?? String(s[key]),
+                ...defaults?.[RANGE_SLIDER_INPUT],
+                ...attributes[RANGE_SLIDER_INPUT]
+            }), 2);
+            return root_0uvwelsg;
+        })());
+    }
+    function fraction(x) {
+        if (!track) {
+            return 0;
+        }
+        let box = track.getBoundingClientRect();
+        return clamp((x - box.left) / box.width, 0, 1);
+    }
+    function handle(thumb) {
+        let key = KEYS[thumb];
+        return (() => {
+            let root_0uvwelsn = template_0uvwelso(), element_0uvwelsp = root_0uvwelsn.firstChild, element_0uvwelsq = element_0uvwelsp.firstElementChild, element_0uvwelsr = element_0uvwelsq.firstElementChild;
+            template_u1.setList(element_0uvwelsp, 'class', template_u1.interpolate(["range-slider-handle--", (key)]));
+            template_u1.setList(element_0uvwelsp, 'class', () => (ui.dragging === -1 ? (thumb === 0) === (s.low > (min + max) / 2) : ui.dragging === thumb) && '--raised');
+            template_u1.setProperty(element_0uvwelsq, 'aria-label', `${thumb === 0 ? 'Minimum' : 'Maximum'} ${name}`);
+            template_u1.setProperty(element_0uvwelsq, 'aria-valuemax', max);
+            template_u1.setProperty(element_0uvwelsq, 'aria-valuemin', min);
+            template_u1.setProperty(element_0uvwelsq, 'data-thumb', thumb);
+            template_u1.setProperties(element_0uvwelsq, defaults?.[RANGE_SLIDER_THUMB]);
+            template_u1.setProperties(element_0uvwelsq, attributes[RANGE_SLIDER_THUMB]);
+            template_u1.setProperty(element_0uvwelsq, 'aria-valuenow', () => s[key]);
+            template_u1.setProperty(element_0uvwelsq, 'aria-valuetext', () => format(s[key]));
+            template_u1.setList(element_0uvwelsq, 'class', () => ui.dragging === thumb && '--active');
+            template_u1.delegate(element_0uvwelsq, 'keydown', (e) => keydown(thumb, e));
+            template_u1.onrender(element_0uvwelsq, (element) => {
+                thumbs[thumb] = element;
+            });
+            new template_u1.EffectSlot(element_0uvwelsr, () => format(s[key]), 1);
+            return root_0uvwelsn;
+        })();
+    }
+    function keydown(thumb, e) {
+        let big = step * 10, delta = {
+            ArrowDown: e.shiftKey ? -big : -step,
+            ArrowLeft: e.shiftKey ? -big : -step,
+            ArrowRight: e.shiftKey ? big : step,
+            ArrowUp: e.shiftKey ? big : step,
+            End: Infinity,
+            Home: -Infinity,
+            PageDown: -big,
+            PageUp: big
+        };
+        if (!(e.key in delta)) {
+            return;
+        }
+        e.preventDefault();
+        commit(thumb, clamp(s[KEYS[thumb]] + delta[e.key], min, max));
+    }
+    return (() => {
+        let root_0uvwelss = template_0uvwelst(), element_0uvwelsu = root_0uvwelss.firstChild, element_0uvwelsv = element_0uvwelsu.firstElementChild.firstElementChild, element_0uvwelsw = element_0uvwelsv.nextElementSibling, element_0uvwelsx = element_0uvwelsu.firstElementChild.nextElementSibling, element_0uvwelsy = element_0uvwelsx.firstChild.nextSibling, element_0uvwelsz = element_0uvwelsx.nextElementSibling.firstChild, element_0uvwels10 = element_0uvwelsx.nextElementSibling;
+        template_u1.setProperties(element_0uvwelsu, defaults);
+        template_u1.setProperties(element_0uvwelsu, attributes);
+        template_u1.setList(element_0uvwelsu, 'class', () => ui.dragging !== -1 && !ui.gliding && '--dragging');
+        template_u1.setList(element_0uvwelsu, 'style', () => `--high: ${(s.high - min) / span}; --low: ${(s.low - min) / span};`);
+        template_u1.slot(element_0uvwelsv, label, 1);
+        new template_u1.EffectSlot(element_0uvwelsw, () => `${format(s.low)} to ${format(s.high)}`, 1);
+        template_u1.setProperty(element_0uvwelsx, 'aria-label', label);
+        template_u1.delegate(element_0uvwelsx, 'lostpointercapture', end);
+        template_u1.delegate(element_0uvwelsx, 'pointercancel', end);
+        template_u1.delegate(element_0uvwelsx, 'pointerdown', (e) => {
+            if (e.button !== 0 || !track) {
+                return;
+            }
+            let f = fraction(e.clientX), grabbed = e.target.closest('[data-thumb]'), thumb;
+            if (grabbed) {
+                thumb = Number(grabbed.dataset.thumb);
+            }
+            else {
+                let high = (s.high - min) / span, low = (s.low - min) / span, toHigh = Math.abs(f - high), toLow = Math.abs(f - low);
+                thumb = toLow === toHigh ? (f < low ? 0 : 1) : (toLow < toHigh ? 0 : 1);
+            }
+            e.preventDefault();
+            thumbs[thumb]?.focus({ preventScroll: true });
+            track.setPointerCapture(e.pointerId);
+            drag = {
+                gliding: !grabbed,
+                offset: grabbed ? f - (s[KEYS[thumb]] - min) / span : 0,
+                thumb
+            };
+            ui.dragging = thumb;
+            ui.gliding = !grabbed;
+            if (!grabbed) {
+                commit(thumb, min + f * span);
+            }
+        });
+        template_u1.delegate(element_0uvwelsx, 'pointermove', (e) => {
+            if (!drag) {
+                return;
+            }
+            commit(drag.thumb, min + (fraction(e.clientX) - drag.offset) * span);
+        });
+        template_u1.delegate(element_0uvwelsx, 'pointerup', end);
+        template_u1.onrender(element_0uvwelsx, (element) => {
+            track = element;
+        });
+        template_u1.slot(element_0uvwelsy, handle(0));
+        template_u1.slot(element_0uvwelsx, handle(1), 2);
+        template_u1.slot(element_0uvwelsz, field(0));
+        template_u1.slot(element_0uvwels10, field(1), 2);
+        return root_0uvwelss;
+    })();
+}
+export default Object.assign(template, { input: RANGE_SLIDER_INPUT, thumb: RANGE_SLIDER_THUMB });

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

@@ -0,0 +1,2 @@
+@layer components {.range-slider{--background:var(--color-border-300);--box-shadow:0 0 0 1px oklch(from var(--color-black-300) l c h / .06), 0 1px 2px oklch(from var(--color-black-300) l c h / .06), 0 6px 16px -6px oklch(from var(--color-black-300) l c h / .12);--color:var(--color-text-500);--color-muted:var(--color-text-300);--field-background:var(--color-grey-400);--field-height:40px;--fill:var(--color-text-500);--focus-color:oklch(from var(--color-text-500) l c h / .38);--font-size:calc(var(--font-size-400) * .875);--glide-duration:.3s;--glide-timing-function:linear(0, .12, .328, .514, .663, .776, .851, .905, .938, .96, .975, .984, .99, .994, 1);--height:6px;--hit-size:44px;--thumb-background:var(--color-white-300);--thumb-dot:var(--color-text-500);--thumb-dot-size:8px;--thumb-scale-active:.96;--thumb-size:var(--size-500);--tooltip-background:var(--color-text-500);--tooltip-color:var(--color-white-300);--tooltip-ease:cubic-bezier(.23, 1, .32, 1);--tooltip-offset:10px;--width:min(440px, 100%);color:var(--color);font-size:var(--font-size);width:var(--width);flex-direction:column;gap:12px;display:flex}.range-slider-dash{background:var(--background);flex-shrink:0;width:12px;height:1px}.range-slider-field{background:var(--field-background);border-radius:var(--border-radius-400);box-shadow:var(--box-shadow);cursor:text;height:var(--field-height);outline:0 solid var(--focus-color);outline-offset:2px;flex:1 1 0;align-items:center;gap:6px;min-width:0;padding-inline:12px;display:flex}.range-slider-field:has(:focus-visible){outline-width:2px}.range-slider-field-label{color:var(--color-muted)}.range-slider-field-prefix{color:var(--color-muted);margin-inline-start:auto}.range-slider-field .range-slider-input{--background-default:transparent;--color-default:currentColor;--font-size:inherit;--padding-horizontal:0px;--padding-vertical:0px;font-variant-numeric:tabular-nums;text-align:right;outline:none;flex:0 64px;width:64px;min-height:0;margin-inline-start:auto}.range-slider-field-prefix+.range-slider-input{margin-inline-start:0}.range-slider-fields{align-items:center;gap:12px;display:flex}.range-slider-fill{background:var(--fill);height:100%;transform:translateX(calc(var(--low) * 100%)) scaleX(calc(var(--high) - var(--low)));transform-origin:0;transition:transform var(--glide-duration) var(--glide-timing-function)}.range-slider-handle{pointer-events:none;transition:translate var(--glide-duration) var(--glide-timing-function);translate:calc(var(--position) * 100%) 0;position:absolute;inset:0}.range-slider-handle--high{--position:var(--high)}.range-slider-handle--low{--position:var(--low)}.range-slider-handle.--raised{z-index:1}.range-slider-header{justify-content:space-between;align-items:baseline;display:flex}.range-slider-label{font-weight:var(--font-weight-500)}.range-slider-rail{background:var(--background);height:var(--height);inset-inline:0;border-radius:999px;position:absolute;top:50%;overflow:hidden;translate:0 -50%}.range-slider-summary{color:var(--color-muted);font-variant-numeric:tabular-nums}.range-slider-thumb{background:var(--thumb-background);box-shadow:var(--box-shadow);height:var(--thumb-size);outline:0 solid var(--focus-color);outline-offset:2px;pointer-events:auto;touch-action:none;width:var(--thumb-size);border-radius:50%;transition:scale .15s ease-out;position:absolute;top:50%;left:0;translate:-50% -50%}.range-slider-thumb:after,.range-slider-thumb:before{content:"";border-radius:50%;position:absolute}.range-slider-thumb:after{inset:calc((var(--thumb-size) - var(--hit-size)) / 2)}.range-slider-thumb:before{background:var(--thumb-dot);inset:calc((var(--thumb-size) - var(--thumb-dot-size)) / 2)}.range-slider-thumb:focus-visible{outline-width:2px}.range-slider-thumb.--active{scale:var(--thumb-scale-active)}.range-slider-tooltip{background:var(--tooltip-background);color:var(--tooltip-color);font-size:var(--font-size-300);font-variant-numeric:tabular-nums;font-weight:var(--font-weight-500);margin-bottom:var(--tooltip-offset);opacity:0;pointer-events:none;transform-origin:bottom;transition:opacity .1s var(--tooltip-ease), scale .1s var(--tooltip-ease), translate .1s var(--tooltip-ease);white-space:nowrap;border-radius:999px;padding:4px 8px;line-height:1.33;position:absolute;bottom:100%;left:50%;translate:-50% 4px;scale:.97}.range-slider-thumb.--active>.range-slider-tooltip,.range-slider-thumb:focus-visible>.range-slider-tooltip{opacity:1;transition-duration:.15s;translate:-50%;scale:1}.range-slider-track{cursor:pointer;height:var(--hit-size);touch-action:none;-webkit-user-select:none;user-select:none;margin-top:32px;position:relative}.range-slider.--dragging .range-slider-fill,.range-slider.--dragging .range-slider-handle{transition:none}@media (prefers-reduced-motion:reduce){.range-slider-fill,.range-slider-handle,.range-slider-thumb{transition:none}.range-slider-tooltip{transition:opacity .1s var(--tooltip-ease);translate:-50%;scale:1}}}
+/*$vite$:1*/

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

@@ -0,0 +1,13 @@
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+type Ref = () => HTMLElement | null | undefined;
+export default _default;
+declare function _default({ doneLabel, label, scroller, steps, target, words, wordsPerMinute, ...attributes }: Attributes & {
+    doneLabel?: string;
+    label?: string;
+    scroller?: Ref;
+    steps?: number;
+    target?: Ref;
+    words?: number;
+    wordsPerMinute?: number;
+}): DocumentFragment | Text;

package/build/components/reading-progress/index.js

@@ -0,0 +1,106 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { onCleanup } from '@esportsplus/reactivity';
+import './scss/index.scss';
+const template_1s6m76f2 = template_u1.template(`<div class='reading-progress'><div aria-valuemin='0' class='reading-progress-track' role='progressbar'><div class='reading-progress-fill'>`);
+const template_1s6m76f7 = template_u1.template(`<div aria-hidden='true' class='reading-progress-readout'><span class='reading-progress-sizer'><span class='reading-progress-check'></span><!--$--> · <!--$--> min </span><span class='reading-progress-remaining'><!--$--> min left </span><span class='reading-progress-done'><svg class='reading-progress-check' fill='none' viewBox='0 0 256 256'><polyline pathLength='1' points='216 72 104 184 48 128' /></svg><span class='reading-progress-label'><!--$--> · <!--$--> min `);
+class ReactiveObject_1s6m76f0 extends reactivity_u0.ReactiveObject {
+    #step = this[reactivity_u0.SIGNAL](0);
+    constructor() {
+        super(null);
+    }
+    get step() {
+        return reactivity_u0.read(this.#step);
+    }
+    set step(_v0) {
+        reactivity_u0.write(this.#step, _v0);
+    }
+}
+function clamp(value) {
+    if (!Number.isFinite(value) || value < 0) {
+        return 0;
+    }
+    return value > 1 ? 1 : value;
+}
+export default ({ doneLabel = 'End', label = 'Reading progress', scroller, steps = 24, target, words = 0, wordsPerMinute = 220, ...attributes }) => {
+    let dispose, frame = 0, state = new ReactiveObject_1s6m76f0(), total = words > 0 ? Math.max(1, Math.ceil(words / wordsPerMinute)) : 0;
+    function minutes() {
+        return Math.ceil(((1 - progress()) * words) / wordsPerMinute);
+    }
+    function progress() {
+        return steps > 0 ? state.step / steps : 1;
+    }
+    function read() {
+        frame = 0;
+        let container = scroller?.() ?? null, element = target?.() ?? null, ratio, travel, viewport = container ? container.clientHeight : window.innerHeight;
+        if (element) {
+            let rect = element.getBoundingClientRect();
+            travel = rect.height - viewport;
+            ratio = travel <= 0 ? 1 : ((container ? container.getBoundingClientRect().top : 0) - rect.top) / travel;
+        }
+        else if (container) {
+            travel = container.scrollHeight - container.clientHeight;
+            ratio = travel <= 0 ? 1 : container.scrollTop / travel;
+        }
+        else {
+            travel = document.documentElement.scrollHeight - viewport;
+            ratio = travel <= 0 ? 1 : window.scrollY / travel;
+        }
+        let step = Math.round(clamp(ratio) * steps);
+        if (state.step !== step) {
+            state.step = step;
+        }
+    }
+    function schedule() {
+        if (frame) {
+            return;
+        }
+        frame = requestAnimationFrame(read);
+    }
+    onCleanup(() => {
+        cancelAnimationFrame(frame);
+        dispose?.();
+    });
+    return (() => {
+        let root_1s6m76f1 = template_1s6m76f2(), element_1s6m76f3 = root_1s6m76f1.firstChild, element_1s6m76f4 = element_1s6m76f3.firstElementChild, element_1s6m76f5 = element_1s6m76f4.firstElementChild;
+        template_u1.setProperties(element_1s6m76f3, attributes);
+        template_u1.setList(element_1s6m76f3, 'class', () => state.step >= steps && '--complete');
+        template_u1.onconnect(element_1s6m76f3, () => {
+            frame = requestAnimationFrame(() => {
+                let container = scroller?.() ?? null, element = target?.() ?? null, observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(schedule), source = container ?? window;
+                source.addEventListener('scroll', schedule, { passive: true });
+                window.addEventListener('resize', schedule);
+                if (element) {
+                    observer?.observe(element);
+                }
+                if (container) {
+                    observer?.observe(container);
+                }
+                if (!element && !container) {
+                    observer?.observe(document.documentElement);
+                }
+                dispose = () => {
+                    source.removeEventListener('scroll', schedule);
+                    window.removeEventListener('resize', schedule);
+                    observer?.disconnect();
+                };
+                read();
+            });
+        });
+        template_u1.setProperty(element_1s6m76f4, 'aria-label', label);
+        template_u1.setProperty(element_1s6m76f4, 'aria-valuemax', steps);
+        template_u1.setProperty(element_1s6m76f4, 'aria-valuenow', () => state.step);
+        template_u1.setProperty(element_1s6m76f4, 'aria-valuetext', () => `${Math.round(progress() * 100)}% read${words > 0 ? `, ${minutes()} min left` : ''}`);
+        template_u1.setList(element_1s6m76f5, 'style', () => `--progress: ${state.step / Math.max(1, steps)}`);
+        template_u1.slot(element_1s6m76f3, words > 0 && (() => {
+            let root_1s6m76f6 = template_1s6m76f7(), element_1s6m76f8 = root_1s6m76f6.firstChild.firstElementChild.firstChild.nextSibling, element_1s6m76f9 = element_1s6m76f8.nextSibling.nextSibling, element_1s6m76fa = root_1s6m76f6.firstChild.firstElementChild.nextElementSibling.firstChild, element_1s6m76fb = root_1s6m76f6.firstChild.firstElementChild.nextElementSibling.nextElementSibling.firstElementChild.nextElementSibling.firstChild, element_1s6m76fc = element_1s6m76fb.nextSibling.nextSibling;
+            template_u1.slot(element_1s6m76f8, doneLabel);
+            template_u1.slot(element_1s6m76f9, total);
+            new template_u1.EffectSlot(element_1s6m76fa, () => minutes());
+            template_u1.slot(element_1s6m76fb, doneLabel);
+            template_u1.slot(element_1s6m76fc, total);
+            return root_1s6m76f6;
+        })(), 2);
+        return root_1s6m76f1;
+    })();
+};

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

@@ -0,0 +1,2 @@
+@layer components {.reading-progress{--background:var(--color-grey-400);--box-shadow:inset 0 1px 2px oklch(0% 0 0/.07);--color:var(--color-text-300);--color-done:var(--color-text-500);--draw-delay:80ms;--draw-duration:.3s;--draw-timing-function:cubic-bezier(.23, 1, .32, 1);--fade-duration:.73s;--fade-timing-function:linear(0, .005 0.8%, .042 2.5%, .125 4.8%, .244 7.6%, .38 10.9%, .514 14.6%, .634 18.6%, .733 23.1%, .811 27.9%, .869 33%, .912 38.4%, .942 44.2%, .963 50.2%, .976 56.5%, .985 63.1%, .991 70%, .995 77.1%, .997 84.5%, .998 92.1%, 1);--fill:var(--color-blue-400);--fill-duration:.93s;--fill-timing-function:linear(0, .006 0.8%, .048 2.5%, .137 4.8%, .262 7.6%, .401 10.9%, .534 14.6%, .65 18.6%, .745 23.1%, .819 27.9%, .875 33%, .915 38.4%, .944 44.2%, .964 50.2%, .977 56.5%, .986 63.1%, .991 70%, .995 77.1%, .997 84.5%, .998 92.1%, 1);--font-family:ui-monospace, monospace;--font-size:10.5px;--gap:var(--size-300);--height:3px;--padding:2px;--shift:4px}.reading-progress-fill{--border-radius:var(--border-radius-100)}.reading-progress-track{--border-radius:var(--border-radius-200)}.reading-progress{align-items:center;gap:var(--gap);display:flex}.reading-progress-check{flex-shrink:0;width:12px;height:12px}.reading-progress-check polyline{stroke:currentColor;stroke-dasharray:1;stroke-dashoffset:1px;stroke-linecap:round;stroke-linejoin:round;stroke-width:16px;transition:stroke-dashoffset var(--draw-duration) var(--draw-timing-function) var(--draw-delay)}.reading-progress-done,.reading-progress-remaining,.reading-progress-sizer{white-space:nowrap;grid-area:1/1}.reading-progress-done,.reading-progress-sizer{align-items:center;gap:4px;display:flex}.reading-progress-done{color:var(--color-done);opacity:0}.reading-progress-done,.reading-progress-label,.reading-progress-remaining{transition:opacity var(--fade-duration) var(--fade-timing-function), translate var(--fade-duration) var(--fade-timing-function)}.reading-progress-fill{background:var(--fill);border-radius:var(--border-radius);height:var(--height);transform:scaleX(var(--progress,0));transform-origin:0;transition:transform var(--fill-duration) var(--fill-timing-function)}.reading-progress-label{translate:var(--shift) 0}.reading-progress-readout{color:var(--color);font-family:var(--font-family);font-size:var(--font-size);font-variant-numeric:tabular-nums;flex-shrink:0;justify-items:end;display:grid}.reading-progress-sizer{visibility:hidden}.reading-progress-track{background:var(--background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);min-width:0;padding:var(--padding);flex:1}.reading-progress.--complete .reading-progress-done{opacity:1}.reading-progress.--complete .reading-progress-label{translate:0}.reading-progress.--complete .reading-progress-remaining{opacity:0}.reading-progress.--complete polyline{stroke-dashoffset:0}@media (prefers-reduced-motion:reduce){.reading-progress-done,.reading-progress-fill,.reading-progress-label,.reading-progress-remaining,.reading-progress polyline{transition:none}}}
+/*$vite$:1*/

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

@@ -0,0 +1,25 @@
+import { type Attributes } from '@esportsplus/template';
+import '../tooltip/scss/index.scss';
+import './scss/index.scss';
+type A = Attributes & {
+    [RELATIVE_TIME_TOOLTIP]?: Attributes;
+    date: Value;
+    ondocumentvisibilitychange?: never;
+    onpointerenter?: never;
+    onpointerleave?: never;
+    state?: State;
+};
+type State = {
+    date: Value;
+    now: number | null;
+};
+type Value = Date | number | string | null;
+declare const RELATIVE_TIME_TOOLTIP: unique symbol;
+declare function template(this: {
+    attributes?: Partial<A>;
+} | void, { date, state, ...attributes }: A): DocumentFragment | Text;
+declare const _default: typeof template & {
+    readonly tooltip: typeof RELATIVE_TIME_TOOLTIP;
+};
+export default _default;
+export type { State as RelativeTimeState, Value as RelativeTimeValue };