@esportsplus/ui 0.55.0 → 0.56.3

package/build/components/lightbox/index.js

@@ -0,0 +1,396 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect, untrack } from '@esportsplus/reactivity';
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import { animator } from './spring.js';
+import './scss/index.scss';
+const template_1mv2m583 = template_u1.template(`<dialog class='lightbox'><div class='lightbox-veil' aria-hidden='true'></div><div class='lightbox-frame' data-lightbox-focus role='group' tabindex='-1'><div class='lightbox-stage'><img class='lightbox-image' draggable='false' /></div></div><div class='lightbox-chrome'><p class='lightbox-caption'></p><div class='lightbox-actions'><button class='lightbox-button' data-lightbox-focus type='button'><svg aria-hidden='true' viewBox='0 0 256 256'><circle cx='116' cy='116' r='84' /><path d='M175.4 175.4 224 224M84 116h64' /><path class='lightbox-button-plus' d='M116 84v64' /></svg></button><button class='lightbox-button' aria-label='Close' data-lightbox-focus type='button'><svg aria-hidden='true' viewBox='0 0 256 256'><path d='M200 56 56 200M200 200 56 56' /></svg></button></div></div><p class='lightbox-assistive'> Scroll to zoom toward the pointer, or press plus and minus. Drag or use the arrow keys to pan, and double-click to switch between fit and close-up. Press zero to return to the starting frame; Escape returns home first, then closes. </p><p class='lightbox-assistive' role='status'>`);
+class ReactiveObject_1mv2m580 extends reactivity_u0.ReactiveObject {
+    #active = 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);
+    }
+}
+class ReactiveObject_1mv2m581 extends reactivity_u0.ReactiveObject {
+    #settled = this[reactivity_u0.SIGNAL](0);
+    #step = this[reactivity_u0.SIGNAL](0);
+    constructor() {
+        super(null);
+    }
+    get settled() {
+        return reactivity_u0.read(this.#settled);
+    }
+    set settled(_v0) {
+        reactivity_u0.write(this.#settled, _v0);
+    }
+    get step() {
+        return reactivity_u0.read(this.#step);
+    }
+    set step(_v1) {
+        reactivity_u0.write(this.#step, _v1);
+    }
+}
+const CELL = { damping: 34, mass: 0.45, stiffness: 520 };
+const HOME = { damping: 27, mass: 1, stiffness: 150 };
+const KEY_PAN = 56;
+const KEY_ZOOM = 1.6;
+const NEAR_HOME = 1.02;
+const SETTLE_DELAY = 220;
+const SLOP = 8;
+const SNAP_HOME = 1.05;
+const STEPS = 8;
+const TOGGLE = 2.5;
+const WHEEL_RATE = 140;
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+function reduced() {
+    return matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+export default component(function ({ alt, caption, height, maxScale = 4, origin, src, state = new ReactiveObject_1mv2m580(), width, ...attributes }) {
+    let controller = new AbortController(), drag = null, id = `lightbox-${Math.random().toString(36).slice(2)}`, locked, motion = animator(paint), radius = 0, run = 0, stop, timer, top = Math.max(1.1, maxScale), view = new ReactiveObject_1mv2m581();
+    let dialog, frame, image, stage;
+    let stageOpacity = motion.value(0, 0.001), stageRadius = motion.value(0, 0.1), stageScale = motion.value(1, 0.0005), stageX = motion.value(0, 0.1), stageY = motion.value(0, 0.1), x = motion.value(0, 0.1), y = motion.value(0, 0.1), zoom = motion.value(1, 0.0005);
+    function center() {
+        let rect = frame.getBoundingClientRect();
+        return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+    }
+    function close() {
+        if (!dialog.open) {
+            return;
+        }
+        let generation = ++run;
+        drag = null;
+        dialog.classList.remove('--active');
+        stage.classList.remove('--active');
+        if (reduced()) {
+            dialog.close();
+            return;
+        }
+        let landed = landing();
+        void Promise.all([
+            stageOpacity.to(landed.opacity, HOME),
+            stageRadius.to(landed.radius, HOME),
+            stageScale.to(landed.scale, HOME),
+            stageX.to(landed.x, HOME),
+            stageY.to(landed.y, HOME),
+            x.to(0, HOME),
+            y.to(0, HOME),
+            zoom.to(1, HOME)
+        ]).then(() => {
+            if (generation === run) {
+                dialog.close();
+            }
+        });
+    }
+    function finish() {
+        let s = zoom.get();
+        if (s < SNAP_HOME) {
+            reset();
+        }
+        else {
+            settle(s);
+        }
+    }
+    function glide(s, nx, ny, spring = CELL) {
+        let { mx, my } = limit(s), tx = clamp(nx, -mx, mx), ty = clamp(ny, -my, my);
+        if (reduced()) {
+            x.set(tx);
+            y.set(ty);
+            zoom.set(s);
+        }
+        else {
+            void x.to(tx, spring);
+            void y.to(ty, spring);
+            void zoom.to(s, spring);
+        }
+        mark(s);
+        settle(s);
+    }
+    function landing() {
+        let element = origin?.();
+        if (element && image.offsetWidth > 0) {
+            let from = element.getBoundingClientRect(), to = center();
+            if (from.width > 0) {
+                let scale = from.width / image.offsetWidth;
+                return {
+                    opacity: 1,
+                    radius: (parseFloat(getComputedStyle(element).borderTopLeftRadius) || 0) / scale,
+                    scale,
+                    x: from.left + from.width / 2 - to.x,
+                    y: from.top + from.height / 2 - to.y
+                };
+            }
+        }
+        return { opacity: 0, radius, scale: 0.97, x: 0, y: 10 };
+    }
+    function limit(s) {
+        return {
+            mx: Math.max(0, (image.offsetWidth * s - frame.clientWidth) / 2),
+            my: Math.max(0, (image.offsetHeight * s - frame.clientHeight) / 2)
+        };
+    }
+    function lock() {
+        let body = document.body, gap = innerWidth - document.documentElement.clientWidth;
+        locked = { overflow: body.style.overflow, padding: body.style.paddingRight };
+        body.style.overflow = 'hidden';
+        if (gap > 0) {
+            body.style.paddingRight = `${(parseFloat(getComputedStyle(body).paddingRight) || 0) + gap}px`;
+        }
+    }
+    function mark(s) {
+        let next = step(s);
+        if (view.step !== next) {
+            view.step = next;
+        }
+    }
+    function open() {
+        let fresh = !dialog.open, generation = ++run;
+        if (fresh) {
+            lock();
+            radius = parseFloat(getComputedStyle(dialog).getPropertyValue('--border-radius')) || 0;
+            stageOpacity.set(0);
+            x.set(0);
+            y.set(0);
+            zoom.set(1);
+            mark(1);
+            settle(1);
+            paint();
+            dialog.showModal();
+            frame.focus({ preventScroll: true });
+        }
+        dialog.classList.add('--active');
+        requestAnimationFrame(() => {
+            let ready = image.complete ? Promise.resolve() : image.decode().catch(() => { });
+            void ready.then(() => {
+                if (generation !== run) {
+                    return;
+                }
+                if (fresh && !reduced()) {
+                    let landed = landing();
+                    stageOpacity.set(landed.opacity);
+                    stageRadius.set(landed.radius);
+                    stageScale.set(landed.scale);
+                    stageX.set(landed.x);
+                    stageY.set(landed.y);
+                    paint();
+                }
+                stage.classList.add('--active');
+                if (reduced()) {
+                    stageOpacity.set(1);
+                    stageRadius.set(radius);
+                    stageScale.set(1);
+                    stageX.set(0);
+                    stageY.set(0);
+                    return;
+                }
+                void stageOpacity.to(1, HOME);
+                void stageRadius.to(radius, HOME);
+                void stageScale.to(1, HOME);
+                void stageX.to(0, HOME);
+                void stageY.to(0, HOME);
+            });
+        });
+    }
+    function paint() {
+        if (!stage) {
+            return;
+        }
+        image.style.borderRadius = `${stageRadius.get()}px`;
+        image.style.transform = `translate(${x.get()}px, ${y.get()}px) scale(${zoom.get()})`;
+        stage.style.opacity = `${stageOpacity.get()}`;
+        stage.style.transform = `translate(${stageX.get()}px, ${stageY.get()}px) scale(${stageScale.get()})`;
+    }
+    function place(s, nx, ny) {
+        let { mx, my } = limit(s);
+        x.set(clamp(nx, -mx, mx));
+        y.set(clamp(ny, -my, my));
+        zoom.set(s);
+        mark(s);
+    }
+    function release(e) {
+        let held = drag;
+        if (!held || held.id !== e.pointerId) {
+            return;
+        }
+        drag = null;
+        if (e.type === 'pointerup' &&
+            !held.content &&
+            zoom.get() <= NEAR_HOME &&
+            Math.hypot(e.clientX - held.originX, e.clientY - held.originY) < SLOP) {
+            state.active = false;
+            return;
+        }
+        finish();
+    }
+    function reset() {
+        glide(1, 0, 0, HOME);
+    }
+    function settle(s) {
+        clearTimeout(timer);
+        timer = undefined;
+        let next = step(s);
+        if (view.settled !== next) {
+            view.settled = next;
+        }
+    }
+    function step(s) {
+        return clamp(Math.round(((s - 1) / (top - 1)) * STEPS), 0, STEPS);
+    }
+    function toggle() {
+        if (view.step > 0) {
+            reset();
+            return;
+        }
+        let { x, y } = center();
+        zoomAt(Math.min(TOGGLE, top), x, y, true);
+    }
+    function unlock() {
+        if (!locked) {
+            return;
+        }
+        document.body.style.overflow = locked.overflow;
+        document.body.style.paddingRight = locked.padding;
+        locked = undefined;
+    }
+    function zoomAt(next, cx, cy, animated) {
+        let { x: fx, y: fy } = center(), px = cx - fx, py = cy - fy, s = clamp(next, 1, top), s0 = zoom.get(), ax = (px - x.get()) / s0, ay = (py - y.get()) / s0;
+        if (animated) {
+            glide(s, px - ax * s, py - ay * s, s <= 1 ? HOME : CELL);
+            return;
+        }
+        place(s, px - ax * s, py - ay * s);
+        clearTimeout(timer);
+        timer = setTimeout(() => settle(s), SETTLE_DELAY);
+    }
+    function wheel(e) {
+        e.preventDefault();
+        zoomAt(zoom.get() * Math.exp(-e.deltaY / WHEEL_RATE), e.clientX, e.clientY, false);
+    }
+    return (() => {
+        let root_1mv2m582 = template_1mv2m583(), element_1mv2m584 = root_1mv2m582.firstChild, element_1mv2m585 = element_1mv2m584.firstElementChild.nextElementSibling, element_1mv2m586 = element_1mv2m585.firstElementChild.firstElementChild, element_1mv2m587 = element_1mv2m585.nextElementSibling.firstElementChild, element_1mv2m588 = element_1mv2m587.nextElementSibling.firstElementChild, element_1mv2m589 = element_1mv2m588.nextElementSibling, element_1mv2m58a = element_1mv2m585.nextElementSibling.nextElementSibling, element_1mv2m58b = element_1mv2m58a.nextElementSibling;
+        template_u1.setProperty(element_1mv2m584, 'aria-describedby', template_u1.interpolate([(id), "-hint"]));
+        template_u1.setProperty(element_1mv2m584, 'aria-labelledby', template_u1.interpolate([(id), "-title"]));
+        template_u1.setProperties(element_1mv2m584, this?.attributes);
+        template_u1.setProperties(element_1mv2m584, attributes);
+        template_u1.on(element_1mv2m584, 'cancel', (e) => {
+            e.preventDefault();
+            state.active = false;
+        });
+        template_u1.on(element_1mv2m584, 'close', () => {
+            run++;
+            dialog.classList.remove('--active');
+            stage.classList.remove('--active');
+            unlock();
+            state.active = false;
+        });
+        template_u1.onconnect(element_1mv2m584, (element) => {
+            dialog = element;
+            frame = element.querySelector('.lightbox-frame');
+            image = element.querySelector('.lightbox-image');
+            stage = element.querySelector('.lightbox-stage');
+            frame.addEventListener('wheel', wheel, { passive: false, signal: controller.signal });
+            stop = effect(() => {
+                let active = state.active;
+                untrack(() => active ? open() : close());
+            });
+        });
+        template_u1.ondisconnect(element_1mv2m584, () => {
+            stop?.();
+            clearTimeout(timer);
+            controller.abort();
+            motion.stop();
+            unlock();
+        });
+        template_u1.delegate(element_1mv2m584, 'keydown', (e) => {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                if (zoom.get() > NEAR_HOME) {
+                    reset();
+                }
+                else {
+                    state.active = false;
+                }
+                return;
+            }
+            if (e.key === 'Tab') {
+                let nodes = [...dialog.querySelectorAll('[data-lightbox-focus]')], here = nodes.indexOf(document.activeElement);
+                e.preventDefault();
+                nodes[e.shiftKey ? (here <= 0 ? nodes.length - 1 : here - 1) : (here + 1) % nodes.length]?.focus();
+                return;
+            }
+            if (e.target !== frame) {
+                return;
+            }
+            let { x: cx, y: cy } = center(), s = zoom.get();
+            if (e.key === '+' || e.key === '=') {
+                e.preventDefault();
+                zoomAt(s * KEY_ZOOM, cx, cy, true);
+            }
+            else if (e.key === '-' || e.key === '_') {
+                e.preventDefault();
+                zoomAt(s / KEY_ZOOM, cx, cy, true);
+            }
+            else if (e.key === '0') {
+                e.preventDefault();
+                reset();
+            }
+            else if (s > NEAR_HOME && e.key.startsWith('Arrow')) {
+                e.preventDefault();
+                glide(s, x.get() + (e.key === 'ArrowLeft' ? KEY_PAN : e.key === 'ArrowRight' ? -KEY_PAN : 0), y.get() + (e.key === 'ArrowUp' ? KEY_PAN : e.key === 'ArrowDown' ? -KEY_PAN : 0));
+            }
+        });
+        template_u1.onwindow(element_1mv2m584, 'blur', () => {
+            drag = null;
+        });
+        template_u1.setProperty(element_1mv2m585, 'aria-describedby', template_u1.interpolate([(id), "-hint"]));
+        template_u1.setProperty(element_1mv2m585, 'aria-labelledby', template_u1.interpolate([(id), "-title"]));
+        template_u1.setList(element_1mv2m585, 'class', () => view.step > 0 && '--zoomed');
+        template_u1.delegate(element_1mv2m585, 'dblclick', (e) => {
+            zoomAt(zoom.get() > SNAP_HOME ? 1 : Math.min(TOGGLE, top), e.clientX, e.clientY, true);
+        });
+        template_u1.delegate(element_1mv2m585, 'lostpointercapture', release);
+        template_u1.delegate(element_1mv2m585, 'pointercancel', release);
+        template_u1.delegate(element_1mv2m585, 'pointerdown', function (e) {
+            if (e.pointerType === 'mouse' && e.button !== 0) {
+                return;
+            }
+            this.setPointerCapture(e.pointerId);
+            drag = {
+                content: image.contains(e.target),
+                id: e.pointerId,
+                originX: e.clientX,
+                originY: e.clientY,
+                x: x.get(),
+                y: y.get()
+            };
+        });
+        template_u1.delegate(element_1mv2m585, 'pointermove', (e) => {
+            let held = drag;
+            if (!held || held.id !== e.pointerId || zoom.get() <= 1) {
+                return;
+            }
+            place(zoom.get(), held.x + e.clientX - held.originX, held.y + e.clientY - held.originY);
+        });
+        template_u1.delegate(element_1mv2m585, 'pointerup', release);
+        template_u1.setProperty(element_1mv2m586, 'alt', alt);
+        template_u1.setProperty(element_1mv2m586, 'src', src);
+        template_u1.setProperty(element_1mv2m586, 'height', height);
+        template_u1.setProperty(element_1mv2m586, 'width', width);
+        template_u1.setProperty(element_1mv2m587, 'id', template_u1.interpolate([(id), "-title"]));
+        template_u1.slot(element_1mv2m587, caption ?? alt, 1);
+        template_u1.setProperty(element_1mv2m588, 'aria-label', () => view.step > 0 ? 'Zoom out' : 'Zoom in');
+        template_u1.setList(element_1mv2m588, 'class', () => view.step > 0 && '--zoomed');
+        template_u1.delegate(element_1mv2m588, 'click', toggle);
+        template_u1.delegate(element_1mv2m589, 'click', () => state.active = false);
+        template_u1.setProperty(element_1mv2m58a, 'id', template_u1.interpolate([(id), "-hint"]));
+        new template_u1.EffectSlot(element_1mv2m58b, () => `Zoom ${(1 + (view.settled / STEPS) * (top - 1)).toFixed(1)} times`, 1);
+        return root_1mv2m582;
+    })();
+});

package/build/components/lightbox/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.lightbox{--backdrop:color-mix(in srgb, var(--color-black-500) 80%, transparent);--border-radius:14px;--button-background:var(--color-white-300);--button-border-color:var(--color-border-300);--button-border-color-hover:var(--color-border-400);--button-color:var(--color-text-300);--button-color-hover:var(--color-text-500);--button-radius:9px;--button-size:32px;--caption-font-size:12.5px;--chrome-padding:12px;--ease:cubic-bezier(.23, 1, .32, 1);--exit-timing-function:cubic-bezier(.4, 0, 1, 1);--focus-color:var(--color-blue-300);--padding:16px}@media only screen and (width>=640px){.lightbox{--chrome-padding:16px;--padding:56px}}.lightbox.--active .lightbox-chrome,.lightbox.--active .lightbox-veil{opacity:1;transition:opacity .4s var(--ease)}.lightbox-actions{pointer-events:auto;align-items:center;gap:8px;display:flex}.lightbox-assistive{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.lightbox-button{background:var(--button-background);border:1px solid var(--button-border-color);border-radius:var(--button-radius);color:var(--button-color);cursor:pointer;height:var(--button-size);width:var(--button-size);outline:none;place-items:center;padding:0;transition:border-color .15s,box-shadow .15s,color .15s;display:grid}.lightbox-button-plus{transition:opacity .15s}.lightbox-button.--zoomed .lightbox-button-plus{opacity:0}.lightbox-button:focus-visible{border-color:var(--focus-color);box-shadow:0 10px 20px -14px var(--focus-color)}.lightbox-button:hover{border-color:var(--button-border-color-hover);color:var(--button-color-hover)}.lightbox-button svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:16px;width:15px;height:15px}.lightbox-caption{background:var(--button-background);border:1px solid var(--button-border-color);border-radius:var(--button-radius);color:var(--button-color-hover);font-size:var(--caption-font-size);pointer-events:auto;text-overflow:ellipsis;white-space:nowrap;width:auto;max-width:65%;margin:0;padding:6px 10px;overflow:hidden}.lightbox-chrome{opacity:0;padding:var(--chrome-padding);pointer-events:none;transition:opacity .2s var(--exit-timing-function);justify-content:space-between;align-items:flex-start;gap:12px;display:flex;position:absolute;inset:0}.lightbox-frame{-webkit-touch-callout:none;cursor:zoom-in;touch-action:none;-webkit-user-select:none;user-select:none;outline:none;position:absolute;inset:0;overflow:hidden}.lightbox-frame.--zoomed{cursor:grab}.lightbox-frame.--zoomed:active{cursor:grabbing}.lightbox-frame:focus-visible{box-shadow:inset 0 0 0 1px var(--focus-color)}.lightbox-image{width:auto;max-width:100%;height:auto;max-height:100%}.lightbox-stage{filter:blur(4px);padding:var(--padding);transition:filter .5s var(--ease);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.lightbox-stage.--active{filter:blur();transition:filter .35s var(--ease)}.lightbox-veil{background:var(--backdrop);opacity:0;transition:opacity .3s var(--ease);position:absolute;inset:0}@media (prefers-reduced-motion:reduce){.lightbox-button-plus,.lightbox-chrome,.lightbox-stage,.lightbox-veil{transition:none!important}}:where(dialog.lightbox){color:inherit;background:0 0;border:0;width:100%;max-width:100%;height:100%;max-height:100%;margin:0;padding:0;overflow:hidden}dialog.lightbox{position:fixed;inset:0}dialog.lightbox::backdrop{background:0 0}}
+/*$vite$:1*/

package/build/components/lightbox/spring.d.ts

@@ -0,0 +1,16 @@
+type Spring = {
+    damping: number;
+    mass: number;
+    stiffness: number;
+};
+type Value = {
+    get: () => number;
+    set: (value: number) => void;
+    to: (target: number, spring: Spring) => Promise<void>;
+};
+declare function animator(paint: VoidFunction): {
+    stop: () => void;
+    value: (initial: number, precision: number) => Value;
+};
+export { animator };
+export type { Spring, Value };

package/build/components/lightbox/spring.js

@@ -0,0 +1,71 @@
+const STEP = 1 / 240;
+function animator(paint) {
+    let frame = 0, last = 0, running = new Set();
+    function request() {
+        if (frame) {
+            return;
+        }
+        last = performance.now();
+        frame = requestAnimationFrame(tick);
+    }
+    function settle(motion) {
+        let done = motion.done;
+        motion.done = undefined;
+        motion.velocity = 0;
+        running.delete(motion);
+        done?.();
+    }
+    function tick(now) {
+        let dt = Math.min(Math.max(0, (now - last) / 1000), 1 / 15);
+        last = now;
+        for (let motion of running) {
+            let { damping, mass, stiffness } = motion.spring;
+            for (let t = 0; t < dt; t += STEP) {
+                let h = Math.min(STEP, dt - t);
+                motion.velocity += ((-stiffness * (motion.value - motion.target) - damping * motion.velocity) / mass) * h;
+                motion.value += motion.velocity * h;
+            }
+            if (Math.abs(motion.value - motion.target) < motion.precision && Math.abs(motion.velocity) < motion.precision * 10) {
+                motion.value = motion.target;
+                settle(motion);
+            }
+        }
+        paint();
+        frame = running.size ? requestAnimationFrame(tick) : 0;
+    }
+    return {
+        stop: () => {
+            cancelAnimationFrame(frame);
+            frame = 0;
+            for (let motion of running) {
+                settle(motion);
+            }
+        },
+        value: (initial, precision) => {
+            let motion = {
+                precision,
+                spring: { damping: 1, mass: 1, stiffness: 1 },
+                target: initial,
+                value: initial,
+                velocity: 0
+            };
+            return {
+                get: () => motion.value,
+                set: (value) => {
+                    motion.target = motion.value = value;
+                    settle(motion);
+                    request();
+                },
+                to: (target, spring) => new Promise((resolve) => {
+                    motion.done?.();
+                    motion.done = resolve;
+                    motion.spring = spring;
+                    motion.target = target;
+                    running.add(motion);
+                    request();
+                })
+            };
+        }
+    };
+}
+export { animator };

package/build/components/line-shadow-text/index.d.ts

@@ -0,0 +1,17 @@
+import * as template_u1 from '@esportsplus/template';
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    color?: string;
+};
+declare const _default: {
+    (): template_u1.Renderable<any>;
+    <T extends A>(attributes: T): template_u1.Renderable<any>;
+    <T extends string>(content: T): template_u1.Renderable<any>;
+    (attributes: A, content?: string | undefined): template_u1.Renderable<any>;
+    bind(context: {
+        attributes?: Partial<A> | undefined;
+        content?: string | undefined;
+    }): any;
+};
+export default _default;

package/build/components/line-shadow-text/index.js

@@ -0,0 +1,15 @@
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import './scss/index.scss';
+const template_1yjccby1 = template_u1.template(`<span class='line-shadow-text'>`);
+export default component(function ({ color, ...attributes }, content) {
+    return (() => {
+        let root_1yjccby0 = template_1yjccby1(), element_1yjccby2 = root_1yjccby0.firstChild;
+        template_u1.setProperty(element_1yjccby2, 'data-text', content);
+        template_u1.setList(element_1yjccby2, 'style', color ? `--shadow-color: ${color}` : '');
+        template_u1.setProperties(element_1yjccby2, this?.attributes);
+        template_u1.setProperties(element_1yjccby2, attributes);
+        template_u1.slot(element_1yjccby2, content, 1);
+        return root_1yjccby0;
+    })();
+});

package/build/components/line-shadow-text/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.line-shadow-text{--duration:15s;--line-size:.06em;--offset:.04em;--shadow-color:var(--color-text-500);z-index:0;display:inline-flex;position:relative}.line-shadow-text:after{animation:line-shadow-text var(--duration) linear infinite;-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(45deg, transparent 45%, var(--shadow-color) 45%, var(--shadow-color) 55%, transparent 0);background-size:var(--line-size) var(--line-size);color:#0000;content:attr(data-text);left:var(--offset);pointer-events:none;top:var(--offset);z-index:-1;position:absolute}@media (prefers-reduced-motion:reduce){.line-shadow-text:after{animation:none}}@keyframes line-shadow-text{0%{background-position:0 0}to{background-position:100% -100%}}}
+/*$vite$:1*/

package/build/components/link/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.link{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed: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-color-pressed:var(--border-color-default);--padding-horizontal:0px}.link.--active{--background:var(--background-active);--border-color:var(--border-color-active);--color:var(--color-active)}.link:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--color:var(--color-hover)}.link:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--color:var(--color-pressed)}.text,.link{--border-width:0px;--color:var(--color-default,inherit);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--width:auto;color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);gap:var(--gap-vertical) var(--gap-horizontal);transition:color var(--transition-duration) var(--transition-timing-function);width:var(--width);display:flex;position:relative}.text.--text-truncate,.--text-truncate.link{display:block}.link{background:var(--background);cursor:pointer;padding:max(0px, var(--padding-vertical) - var(--border-width)) max(0px, var(--padding-horizontal) - var(--border-width));transition:background var(--transition-duration) var(--transition-timing-function), border-color var(--transition-duration) var(--transition-timing-function), color var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function);flex-wrap:wrap;place-content:center flex-start;position:relative}}
+@layer components {.link{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed: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-color-pressed:var(--border-color-default);--padding-horizontal:0px}.link.--active{--background:var(--background-active);--border-color:var(--border-color-active);--color:var(--color-active)}.link:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--color:var(--color-hover)}.link:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--color:var(--color-pressed)}.text,.link{--border-width:0px;--color:var(--color-default,inherit);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--width:auto;color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);gap:var(--gap-vertical) var(--gap-horizontal);transition:color var(--transition-duration) var(--transition-timing-function);width:var(--width);display:flex;position:relative}.text.--text-truncate,.--text-truncate.link{display:block}.link{background:var(--background);cursor:pointer;padding-block:max(0px, var(--padding-vertical) - var(--border-width));padding-inline:max(0px, var(--padding-horizontal) - var(--border-width));transition:background var(--transition-duration) var(--transition-timing-function), border-color var(--transition-duration) var(--transition-timing-function), color var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function);flex-wrap:wrap;place-content:center flex-start;position:relative}}
 /*$vite$:1*/

package/build/components/loading/index.js

@@ -1,10 +1,8 @@
-import * as template_u0 from '@esportsplus/template';
+import * as template_u1 from '@esportsplus/template';
 import './scss/index.scss';
-const template_u1e = template_u0.template(`<div class='loading --border-width-700 --size-800' style='--border-color: var(--color-border-500);' >`);
+const template_17hj0u91 = template_u1.template(`<div class='loading'>`);
 export default (attributes) => {
-    return (() => {
-        let root_u1d = template_u1e(), element_u1f = root_u1d.firstChild;
-        template_u0.setProperties(element_u1f, attributes);
-        return root_u1d;
-    })();
+    let root_17hj0u90 = template_17hj0u91(), element_17hj0u92 = root_17hj0u90.firstChild;
+    template_u1.setProperties(element_17hj0u92, attributes);
+    return root_17hj0u90;
 };

package/build/components/loading/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.loading{--animation-duration:.64s;--border-color:var(--color);--border-width:var(--border-width-400);--size:var(--size-400);animation:loading var(--animation-duration) linear infinite;border:var(--border-width) solid color-mix(in srgb, var(--border-color), transparent 90%);border-left-color:var(--border-color);height:var(--size);width:var(--size);border-radius:100%}@keyframes loading{0%{transform:rotate(0)}to{transform:rotate(360deg)}}}
+@layer components {.loading{--animation-duration:.64s;--border-color:var(--color);--border-width:var(--border-width-400);--color:var(--color-black-400);--size:var(--size-400);--timing-function:cubic-bezier(.5, 0, .5, 1);--track-color:color-mix(in srgb, var(--border-color), transparent 90%)}.loading--bar{--animation-duration:.8s;--height:var(--border-width);--width:100%}.loading--tail{--animation-duration:.8s;--tail:120deg}.loading{animation:loading var(--animation-duration) linear infinite;border:var(--border-width) solid var(--track-color);border-left-color:var(--border-color);height:var(--size);width:var(--size);border-radius:100%}.loading--bar{background:var(--track-color);border-radius:var(--border-width);height:var(--height);width:var(--width);border:0;animation:none;position:relative;overflow:hidden}.loading--bar:before{animation:loading--bar var(--animation-duration) var(--timing-function) infinite;background:var(--border-color);border-radius:inherit;content:"";width:40%;position:absolute;inset:0 auto 0 0}.loading--tail{background:conic-gradient(transparent calc(360deg - var(--tail)), var(--border-color));-webkit-mask:radial-gradient(farthest-side, transparent calc(100% - var(--border-width)), #000 calc(100% - var(--border-width) + .5px));-webkit-mask:radial-gradient(farthest-side, transparent calc(100% - var(--border-width)), #000 calc(100% - var(--border-width) + .5px));mask:radial-gradient(farthest-side, transparent calc(100% - var(--border-width)), #000 calc(100% - var(--border-width) + .5px));border:0;position:relative}.loading--tail:after{background:var(--border-color);content:"";height:var(--border-width);width:var(--border-width);border-radius:100%;position:absolute;top:0;left:50%;translate:-50%}@keyframes loading{0%{rotate:0deg}to{rotate:360deg}}@keyframes loading--bar{0%{translate:-100%}to{translate:250%}}}
 /*$vite$:1*/

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

@@ -0,0 +1,20 @@
+import './scss/index.scss';
+type Progress = {
+    revealed: number;
+};
+declare const bridge: (active: () => boolean, height: number, offset: number) => DocumentFragment | Text;
+declare const chevron: () => DocumentFragment | Text;
+declare const guide: () => DocumentFragment | Text;
+declare const progress: ({ delay, onComplete, state, units }: {
+    delay: (index: number) => number;
+    onComplete?: VoidFunction;
+    state?: Progress;
+    units: number;
+}) => {
+    revealed: () => number;
+    start: () => void;
+    total: number;
+};
+declare const working: (label: string, active: () => boolean) => DocumentFragment | Text;
+export { bridge, chevron, guide, progress, working };
+export type { Progress };