@esportsplus/ui 0.56.4 → 0.57.0

package/build/components/highlight/index.js

@@ -1,137 +1,325 @@
 import * as reactivity_u0 from '@esportsplus/reactivity';
 import * as template_u1 from '@esportsplus/template';
 import { component } from '@esportsplus/template';
+import { ms } from '../../shared/animation.js';
+import { observer } from '../../shared/resize.js';
+import { easing } from './easing.js';
 import './scss/index.scss';
-const template_0k38r592 = template_u1.template(`<div aria-hidden='true' class='highlight'>`);
-class ReactiveObject_0k38r590 extends reactivity_u0.ReactiveObject {
-    #height = this[reactivity_u0.SIGNAL](0);
-    #radius = this[reactivity_u0.SIGNAL]('0px');
-    #variant = this[reactivity_u0.SIGNAL]('');
-    #visible = this[reactivity_u0.SIGNAL](false);
-    #width = this[reactivity_u0.SIGNAL](0);
-    #x = this[reactivity_u0.SIGNAL](0);
-    #y = this[reactivity_u0.SIGNAL](0);
-    constructor() {
-        super(null);
+const template_0k38r591 = template_u1.template(`<div aria-hidden='true' class='highlight'></div><div aria-hidden='true' class='highlight'>`);
+const ANCHORED = new WeakMap();
+const LAYERS = new WeakSet();
+const PAINT = /^(?:backdrop-filter|background|box-shadow|clip-path|color|fill|filter|opacity|outline|stroke|text-decoration|text-shadow|visibility)(?:-|$)|-color$/;
+const pending = new Set();
+let frame = 0;
+function enqueue(measure) {
+    pending.add(measure);
+    frame ||= requestAnimationFrame(() => {
+        frame = 0;
+        let writes = [];
+        for (let read of pending) {
+            writes.push(read());
+        }
+        pending.clear();
+        for (let i = 0, n = writes.length; i < n; i++) {
+            writes[i]?.();
+        }
+    });
+}
+function dequeue(measure) {
+    pending.delete(measure);
+    if (!pending.size) {
+        cancelAnimationFrame(frame);
+        frame = 0;
     }
-    get height() {
-        return reactivity_u0.read(this.#height);
+}
+function active(parent, self, target) {
+    if (target) {
+        return parent.querySelector(`${target}.--active`);
     }
-    set height(_v0) {
-        reactivity_u0.write(this.#height, _v0);
+    let children = parent.children;
+    for (let i = 0, n = children.length; i < n; i++) {
+        let child = children[i];
+        if (!self.includes(child) && child.classList.contains('--active')) {
+            return child;
+        }
     }
-    get radius() {
-        return reactivity_u0.read(this.#radius);
+    return null;
+}
+function anchored(parent) {
+    let value = ANCHORED.get(parent);
+    if (value === undefined) {
+        let style = getComputedStyle(parent);
+        value = !/around|between|center|end|evenly|reverse|right/.test(`${style.alignContent} ${style.flexDirection} ${style.flexWrap} ${style.justifyContent} ${style.textAlign}`);
+        ANCHORED.set(parent, value);
     }
-    set radius(_v1) {
-        reactivity_u0.write(this.#radius, _v1);
+    return value;
+}
+function before(node, item) {
+    return node.contains(item) || (node.isConnected && !!(node.compareDocumentPosition(item) & Node.DOCUMENT_POSITION_FOLLOWING));
+}
+function boundary(parent, self, item, target) {
+    let items = target ? parent.querySelectorAll(target) : parent.children, first, last;
+    for (let candidate of items) {
+        if (!self.includes(candidate)) {
+            first ??= candidate;
+            last = candidate;
+        }
     }
-    get variant() {
-        return reactivity_u0.read(this.#variant);
+    return item === first || item === last;
+}
+function concealed(item, parent) {
+    for (let node = item; node && node !== parent; node = node.parentElement) {
+        if (node.inert) {
+            return true;
+        }
     }
-    set variant(_v2) {
-        reactivity_u0.write(this.#variant, _v2);
+    return false;
+}
+function empty() {
+    return { height: 0, radius: '0px', variant: '', visible: false, width: 0, x: 0, y: 0 };
+}
+function geometry(layer) {
+    return `--border-radius: ${layer.radius}; --height: ${layer.height}px; --width: ${layer.width}px; --x: ${layer.x}px; --y: ${layer.y}px;`;
+}
+function glide() {
+    return { item: null, slides: [] };
+}
+function halt(glide) {
+    for (let i = 0, n = glide.slides.length; i < n; i++) {
+        glide.slides[i].animation.cancel();
     }
-    get visible() {
-        return reactivity_u0.read(this.#visible);
+    glide.slides = [];
+}
+function remaining(glide) {
+    let left = [0, 0, 0, 0];
+    for (let i = 0, n = glide.slides.length; i < n; i++) {
+        let { animation, from } = glide.slides[i], progress = animation.playState === 'running' ? animation.effect?.getComputedTiming().progress : null;
+        if (progress === null || progress === undefined) {
+            continue;
+        }
+        for (let j = 0; j < 4; j++) {
+            left[j] += from[j] * (1 - progress);
+        }
     }
-    set visible(_v3) {
-        reactivity_u0.write(this.#visible, _v3);
+    return left;
+}
+function sibling(parent, self, node, target) {
+    if (!(node instanceof Element) || !parent.contains(node)) {
+        return null;
     }
-    get width() {
-        return reactivity_u0.read(this.#width);
+    let element = node;
+    if (target) {
+        element = element.closest(target);
+        if (element && !parent.contains(element)) {
+            element = null;
+        }
     }
-    set width(_v4) {
-        reactivity_u0.write(this.#width, _v4);
+    else {
+        while (element && element.parentElement !== parent) {
+            element = element.parentElement;
+        }
     }
-    get x() {
-        return reactivity_u0.read(this.#x);
+    if (!element || self.includes(element) || element.classList.contains('--disabled')) {
+        return null;
     }
-    set x(_v5) {
-        reactivity_u0.write(this.#x, _v5);
+    return element;
+}
+export default component(({ fill = true, hover = true, line, target, ...attributes }) => {
+    let focused = null, following = false, fresh = new WeakSet(), glides = { active: glide(), pointer: glide() }, hovered = null, layers = { active: reactivity_u0.reactive(empty()), pointer: reactivity_u0.reactive(empty()) }, motions = new Set(), mutations, nodes = { active: null, pointer: null }, parent = null, pressed = false, resize, self = [];
+    function follow(e) {
+        let element = e.target, property = 'propertyName' in e ? e.propertyName : null;
+        if (!(element instanceof Element) || !near(element) || (property && PAINT.test(property))) {
+            return;
+        }
+        for (let animation of element.getAnimations()) {
+            let fired = property
+                ? animation.transitionProperty === property
+                : animation.animationName === e.animationName;
+            if (fired && animation.effect?.getComputedTiming().endTime !== Infinity) {
+                motions.add(animation);
+            }
+        }
+        if (motions.size) {
+            following = true;
+            schedule();
+        }
     }
-    get y() {
-        return reactivity_u0.read(this.#y);
+    function moving() {
+        let running = false;
+        for (let animation of motions) {
+            if (animation.playState === 'running' || animation.pending) {
+                running = true;
+            }
+            else {
+                motions.delete(animation);
+            }
+        }
+        return running;
     }
-    set y(_v6) {
-        reactivity_u0.write(this.#y, _v6);
+    function near(element) {
+        return !!parent && !LAYERS.has(element) && (parent.contains(element) || element.contains(parent));
     }
-}
-function active(parent, self) {
-    let children = parent.children;
-    for (let i = 0, n = children.length; i < n; i++) {
-        let child = children[i];
-        if (child !== self && child.classList.contains('--active')) {
-            return child;
+    function measure(name, item, box, variant) {
+        let glide = glides[name], layer = layers[name];
+        if (!item || !parent || !box.width || concealed(item, parent)) {
+            return null;
+        }
+        let rect = item.getBoundingClientRect(), scale = parent.offsetWidth / box.width, height = rect.height * scale, width = rect.width * scale, x = (rect.left - box.left) * scale - parent.clientLeft + parent.scrollLeft, y = (rect.top - box.top) * scale - parent.clientTop + parent.scrollTop, from, timing;
+        if (layer.visible && glide.item && glide.item !== item) {
+            let left = remaining(glide);
+            from = [layer.x + left[0] - x, layer.y + left[1] - y, layer.width + left[2] - width, layer.height + left[3] - height];
+            let node = nodes[name];
+            if (node) {
+                let style = getComputedStyle(node), easing = boundary(parent, self, item, target) ? '--glide-timing-function-edge' : '--glide-timing-function';
+                timing = {
+                    easing: style.getPropertyValue(easing).trim() || 'ease',
+                    lead: ms(style.getPropertyValue('--glide')),
+                    tail: ms(style.getPropertyValue('--glide-tail'))
+                };
+            }
         }
+        return {
+            from,
+            item,
+            layer: { height, radius: getComputedStyle(item).borderRadius, variant, visible: true, width, x, y },
+            timing
+        };
     }
-    return null;
-}
-function sibling(parent, self, node) {
-    let element = node instanceof Element ? node : null;
-    while (element && element.parentElement !== parent) {
-        element = element.parentElement;
+    function place(name, measured) {
+        let glide = glides[name], layer = layers[name];
+        if (!measured) {
+            halt(glide);
+            glide.item = null;
+            layer.visible = false;
+            return;
+        }
+        if (!layer.visible) {
+            halt(glide);
+        }
+        else if (measured.from && measured.timing) {
+            slide(name, measured.from, measured.timing);
+        }
+        glide.item = measured.item;
+        Object.assign(layer, measured.layer);
     }
-    if (!element || element === self || element.classList.contains('--disabled')) {
-        return null;
+    function slide(name, from, timing) {
+        let glide = glides[name], node = nodes[name];
+        halt(glide);
+        if (!node || from.every((value) => Math.abs(value) < 0.5)) {
+            return;
+        }
+        let lead = [0, 0, 0, 0], tail = [0, 0, 0, 0];
+        for (let axis = 0; axis < 2; axis++) {
+            let start = from[axis], end = start + from[axis + 2], forward = start + end < 0, a = forward ? tail : lead, b = forward ? lead : tail;
+            a[axis] += start;
+            a[axis + 2] -= start;
+            b[axis + 2] += end;
+        }
+        let distance = Math.max(Math.abs(from[0]), Math.abs(from[1]), Math.abs(from[0] + from[2]), Math.abs(from[1] + from[3])), curve = easing(timing.easing, distance), slides = [[lead, timing.lead], [tail, timing.tail]];
+        for (let i = 0, n = slides.length; i < n; i++) {
+            let [offset, duration] = slides[i];
+            if (!duration || offset.every((value) => Math.abs(value) < 0.5)) {
+                continue;
+            }
+            glide.slides.push({
+                animation: node.animate([
+                    {
+                        '--slide-height': `${offset[3]}px`,
+                        '--slide-width': `${offset[2]}px`,
+                        '--slide-x': `${offset[0]}px`,
+                        '--slide-y': `${offset[1]}px`
+                    },
+                    { '--slide-height': '0px', '--slide-width': '0px', '--slide-x': '0px', '--slide-y': '0px' }
+                ], { composite: 'add', duration, easing: curve }),
+                from: offset
+            });
+        }
+    }
+    function schedule() {
+        enqueue(update);
+    }
+    function relevant(record, items) {
+        let host = record.target, owner = target ? host.parentElement?.closest(target) : host.parentElement === parent ? null : host.parentElement;
+        if (owner && parent?.contains(owner) && owner !== parent && !items.some((item) => owner.contains(item))) {
+            return false;
+        }
+        if (record.type === 'attributes') {
+            return items.some((item) => record.attributeName === 'inert' ? host.contains(item) : before(host, item));
+        }
+        for (let nodes of [record.addedNodes, record.removedNodes]) {
+            for (let node of nodes) {
+                if (items.some((item) => node.contains(item))) {
+                    return true;
+                }
+            }
+        }
+        return items.some((item) => (record.nextSibling ? before(record.nextSibling, item) : !host.contains(item) && before(host, item)) ||
+            (host.contains(item) && !anchored(host)));
     }
-    return element;
-}
-export default component((attributes) => {
-    let focused = null, hovered = null, mutations, parent = null, pressed = false, resize, self = null, state = new ReactiveObject_0k38r590();
     function release() {
         if (pressed) {
             pressed = false;
-            update();
+            schedule();
         }
     }
+    function tracked() {
+        let items = [glides.active.item, glides.pointer.item, hovered, focused, parent && active(parent, self, target)];
+        return items.filter((item) => !!item);
+    }
     function update() {
-        if (!parent || !self) {
+        if (!parent) {
             return;
         }
-        if (hovered?.parentElement !== parent) {
+        if (hovered && !parent.contains(hovered)) {
             hovered = null;
         }
-        if (focused?.parentElement !== parent) {
+        if (focused && !parent.contains(focused)) {
             focused = null;
         }
-        let target = hovered || focused || active(parent, self);
-        if (!target) {
-            state.visible = false;
-            return;
-        }
-        let box = parent.getBoundingClientRect(), rect = target.getBoundingClientRect();
-        state.height = rect.height;
-        state.radius = getComputedStyle(target).borderRadius;
-        state.variant = target.classList.contains('--active')
-            ? '--active'
-            : pressed && target === hovered ? '--pressed' : '--hover';
-        state.visible = true;
-        state.width = rect.width;
-        state.x = rect.left - box.left - parent.clientLeft + parent.scrollLeft;
-        state.y = rect.top - box.top - parent.clientTop + parent.scrollTop;
+        following = following && moving();
+        let container = parent, box = parent.getBoundingClientRect(), current = active(parent, self, target), item = hovered || focused, selected = measure('active', current, box, '--active'), pointer = measure('pointer', item, box, pressed && item === hovered ? 'highlight--pressed' : 'highlight--hover');
+        return () => {
+            if (parent !== container) {
+                return;
+            }
+            place('active', selected);
+            place('pointer', pointer);
+            if (following) {
+                schedule();
+            }
+        };
     }
     return (() => {
-        let root_0k38r591 = template_0k38r592(), element_0k38r593 = root_0k38r591.firstChild;
+        let root_0k38r590 = template_0k38r591(), element_0k38r592 = root_0k38r590.firstChild, element_0k38r593 = element_0k38r592.nextSibling;
         template_u1.setProperties(element_0k38r593, attributes);
-        template_u1.setList(element_0k38r593, 'class', () => `${state.variant}${state.visible ? ' --visible' : ''}`);
+        template_u1.setList(element_0k38r593, 'class', [
+            () => layers.active.variant,
+            !fill && 'highlight--unfilled',
+            line && 'highlight--line',
+            line && `highlight--line-${line}`,
+            () => layers.active.visible && 'highlight--visible'
+        ]);
         template_u1.onconnect(element_0k38r593, (element) => {
             let container = element.parentElement;
+            LAYERS.add(element);
+            nodes.active = element;
+            self.push(element);
             if (!container) {
                 return;
             }
             parent = container;
-            self = element;
             mutations = new MutationObserver((records) => {
-                let changed = false;
+                let changed = false, items = tracked();
                 for (let i = 0, n = records.length; i < n; i++) {
                     let record = records[i];
-                    if (record.target === element) {
+                    if (LAYERS.has(record.target)) {
                         continue;
                     }
-                    changed = true;
                     for (let node of record.addedNodes) {
-                        if (node instanceof Element) {
+                        if (node instanceof Element &&
+                            !LAYERS.has(node) &&
+                            (node.parentElement === container || (target && node.matches(target)))) {
+                            fresh.add(node);
                             resize?.observe(node);
                         }
                     }
@@ -140,79 +328,113 @@ export default component((attributes) => {
                             resize?.unobserve(node);
                         }
                     }
+                    changed ||= relevant(record, items);
                 }
                 if (changed) {
-                    update();
+                    schedule();
+                }
+            });
+            mutations.observe(container, { attributeFilter: ['class', 'inert'], attributes: true, childList: true, subtree: true });
+            resize = observer((entries) => {
+                let items;
+                for (let i = 0, n = entries.length; i < n; i++) {
+                    let node = entries[i].target, host = node.parentElement;
+                    if (fresh.delete(node)) {
+                        continue;
+                    }
+                    items ??= tracked();
+                    if (node === container ||
+                        items.some((item) => before(node, item) || (!!host && host.contains(item) && !anchored(host)))) {
+                        schedule();
+                        return;
+                    }
                 }
             });
-            mutations.observe(container, { attributeFilter: ['class'], attributes: true, childList: true, subtree: true });
-            resize = new ResizeObserver(update);
             resize.observe(container);
             for (let child of container.children) {
-                if (child !== element) {
+                if (!self.includes(child)) {
                     resize.observe(child);
                 }
             }
-            update();
+            if (target) {
+                for (let item of container.querySelectorAll(target)) {
+                    resize.observe(item);
+                }
+            }
+            schedule();
         });
         template_u1.ondisconnect(element_0k38r593, () => {
             mutations?.disconnect();
             mutations = undefined;
             resize?.disconnect();
             resize = undefined;
+            dequeue(update);
+            following = false;
+            motions.clear();
+            for (let name of ['active', 'pointer']) {
+                halt(glides[name]);
+                glides[name] = glide();
+            }
             focused = null;
             hovered = null;
             parent = null;
-            self = null;
         });
+        template_u1.ondocument(element_0k38r593, 'animationstart', follow);
         template_u1.ondocument(element_0k38r593, 'focusin', (e) => {
-            if (!parent || !self || !parent.contains(e.target)) {
+            if (!parent || !parent.contains(e.target)) {
                 return;
             }
-            focused = e.target.matches(':focus-visible') ? sibling(parent, self, e.target) : null;
-            update();
+            focused = e.target.matches(':focus-visible') ? sibling(parent, self, e.target, target) : null;
+            schedule();
         });
         template_u1.ondocument(element_0k38r593, 'focusout', (e) => {
             if (!parent?.contains(e.target) || parent.contains(e.relatedTarget)) {
                 return;
             }
             focused = null;
-            update();
+            schedule();
         });
         template_u1.ondocument(element_0k38r593, 'pointercancel', release);
         template_u1.ondocument(element_0k38r593, 'pointerdown', (e) => {
-            let target = parent && self ? sibling(parent, self, e.target) : null;
-            if (!target) {
+            let item = hover && parent ? sibling(parent, self, e.target, target) : null;
+            if (!item) {
                 return;
             }
-            hovered = target;
+            hovered = item;
             pressed = true;
-            update();
+            schedule();
         });
         template_u1.ondocument(element_0k38r593, 'pointerout', (e) => {
-            if (!parent?.contains(e.target) || parent.contains(e.relatedTarget)) {
+            if (!hover || !parent?.contains(e.target) || parent.contains(e.relatedTarget)) {
                 return;
             }
             hovered = null;
             pressed = false;
-            update();
+            schedule();
         });
         template_u1.ondocument(element_0k38r593, 'pointerover', (e) => {
-            let target = parent && self ? sibling(parent, self, e.target) : null;
-            if (!target || target === hovered) {
+            let item = hover && parent ? sibling(parent, self, e.target, target) : null;
+            if (!item || item === hovered) {
                 return;
             }
-            hovered = target;
-            update();
+            hovered = item;
+            schedule();
         });
         template_u1.ondocument(element_0k38r593, 'pointerup', release);
-        template_u1.setList(element_0k38r593, 'style', () => `
-                        --border-radius: ${state.radius};
-                        --height: ${state.height}px;
-                        --width: ${state.width}px;
-                        --x: ${state.x}px;
-                        --y: ${state.y}px;
-                    `);
-        return root_0k38r591;
+        template_u1.ondocument(element_0k38r593, 'transitionrun', follow);
+        template_u1.setList(element_0k38r593, 'style', () => geometry(layers.active));
+        template_u1.setProperties(element_0k38r592, attributes);
+        template_u1.setList(element_0k38r592, 'class', [
+            () => layers.pointer.variant,
+            line && `highlight--line-${line}`,
+            () => layers.pointer.visible && 'highlight--visible'
+        ]);
+        template_u1.onconnect(element_0k38r592, (element) => {
+            LAYERS.add(element);
+            nodes.pointer = element;
+            self.push(element);
+        });
+        template_u1.setList(element_0k38r592, 'style', () => geometry(layers.pointer));
+        return root_0k38r590;
     })();
 });

package/build/components/highlight/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.highlight{--background:var(--background-default);--background-active:color-mix(in srgb, currentColor 10%, transparent);--background-default:color-mix(in srgb, currentColor 6%, transparent);--background-hover:var(--background-default);--background-pressed:color-mix(in srgb, currentColor 14%, transparent);--fade-duration:.2s;--glide-duration:.6s;--glide-timing-function:linear(0, .035, .123, .239, .367, .494, .611, .715, .803, .874, .929, .971, 1, 1.02, 1.032, 1.037, 1.038, 1.037, 1.033, 1.028, 1.024, 1.019, 1.014, 1.01, 1);--scale-hidden:.92}.highlight.--active{--background:var(--background-active)}.highlight.--hover{--background:var(--background-hover)}.highlight.--pressed{--background:var(--background-pressed)}.highlight{background:var(--background);border-radius:var(--border-radius);height:var(--height);opacity:0;pointer-events:none;scale:var(--scale-hidden);transition:background var(--transition-duration) var(--transition-timing-function), border-radius var(--glide-duration) var(--glide-timing-function), display var(--fade-duration) allow-discrete, height var(--glide-duration) var(--glide-timing-function), opacity var(--fade-duration) var(--transition-timing-function), scale var(--fade-duration) var(--transition-timing-function), translate var(--glide-duration) var(--glide-timing-function), width var(--glide-duration) var(--glide-timing-function);translate:var(--x) var(--y);width:var(--width);z-index:-1;display:none;position:absolute;top:0;left:0}.highlight.--visible{opacity:1;display:block;scale:1}@starting-style{.highlight.--visible{opacity:0;scale:var(--scale-hidden)}}@media (prefers-reduced-motion:reduce){.highlight{transition:background var(--transition-duration) var(--transition-timing-function)}}:where(:has(>.highlight)){isolation:isolate;position:relative}}
+@layer components{@property --slide-height{syntax:"<length>";inherits:false;initial-value:0}@property --slide-width{syntax:"<length>";inherits:false;initial-value:0}@property --slide-x{syntax:"<length>";inherits:false;initial-value:0}@property --slide-y{syntax:"<length>";inherits:false;initial-value:0}.highlight{--background:var(--background-default);--background-active:color-mix(in srgb, currentColor 10%, transparent);--background-default:color-mix(in srgb, currentColor 6%, transparent);--background-hover:var(--background-default);--background-pressed:color-mix(in srgb, currentColor 14%, transparent);--fade-duration:.2s;--glide:var(--glide-duration);--glide-duration:.24s;--glide-duration-active:var(--glide-duration);--glide-tail:var(--glide-tail-duration);--glide-tail-duration:var(--glide-duration);--glide-tail-duration-active:var(--glide-duration-active);--glide-timing-function:linear(0, .035, .123, .239, .367, .494, .611, .715, .803, .874, .929, .971, 1, 1.02, 1.032, 1.037, 1.038, 1.037, 1.033, 1.028, 1.024, 1.019, 1.014, 1.01, 1);--glide-timing-function-edge:cubic-bezier(.22, 1, .36, 1);--inset-block:0px;--inset-inline:0px;--line-color:currentColor;--line-inset:6px;--line-offset:0px;--line-radius:calc(var(--line-width) / 2);--line-width:2px;--scale-hidden:.92}.highlight.--active{--background:var(--background-active);--glide:var(--glide-duration-active);--glide-tail:var(--glide-tail-duration-active)}.highlight--hover{--background:var(--background-hover)}.highlight--line-bottom,.highlight--line-top{--inset-block:var(--line-inset)}.highlight--line-left,.highlight--line-right{--inset-inline:var(--line-inset)}.highlight--pressed{--background:var(--background-pressed)}.highlight{background:var(--background);border-radius:var(--border-radius);height:calc(var(--height) - var(--inset-block) * 2 + var(--slide-height));opacity:0;pointer-events:none;scale:var(--scale-hidden);transition:background var(--transition-duration) var(--transition-timing-function), border-radius var(--glide) var(--glide-timing-function), display var(--fade-duration) allow-discrete, opacity var(--fade-duration) var(--transition-timing-function), scale var(--fade-duration) var(--transition-timing-function);translate:calc(var(--x) + var(--inset-inline) + var(--slide-x)) calc(var(--y) + var(--inset-block) + var(--slide-y));width:calc(var(--width) - var(--inset-inline) * 2 + var(--slide-width));z-index:-1;display:none;position:absolute;top:0;left:0}.highlight--line:after{background:var(--line-color);border-radius:var(--line-radius);content:"";position:absolute}.highlight--unfilled{background:0 0}.highlight--line-bottom:after{bottom:calc(var(--line-offset) - var(--inset-block));height:var(--line-width);inset-inline:calc(var(--inset-inline) * -1)}.highlight--line-left:after{inset-block:calc(var(--inset-block) * -1);left:calc(var(--line-offset) - var(--inset-inline));width:var(--line-width)}.highlight--line-right:after{inset-block:calc(var(--inset-block) * -1);right:calc(var(--line-offset) - var(--inset-inline));width:var(--line-width)}.highlight--line-top:after{height:var(--line-width);inset-inline:calc(var(--inset-inline) * -1);top:calc(var(--line-offset) - var(--inset-block))}.highlight--visible{opacity:1;display:block;scale:1}@starting-style{.highlight--visible{opacity:0;scale:var(--scale-hidden)}}@media (prefers-reduced-motion:reduce){.highlight{transition:background var(--transition-duration) var(--transition-timing-function)}.highlight.highlight{--glide:0s;--glide-tail:0s}}:where(:has(>.highlight)){isolation:isolate;position:relative}}
 /*$vite$:1*/

package/build/components/icon/index.js

@@ -8,8 +8,8 @@ export default component((attributes, href) => {
     }
     return (() => {
         let root_1lt0nhw0 = template_1lt0nhw1(), element_1lt0nhw2 = root_1lt0nhw0.firstChild, element_1lt0nhw3 = element_1lt0nhw2.firstElementChild.firstElementChild;
-        template_u1.setProperties(element_1lt0nhw2, attributes);
         template_u1.setProperty(element_1lt0nhw3, 'href', href);
+        template_u1.setProperties(element_1lt0nhw2, attributes);
         return root_1lt0nhw0;
     })();
 });

package/build/components/icon/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.icon{--color:inherit;--height:var(--size);--size:var(--size-400);--width:var(--size);color:var(--color);flex:0 0 var(--width);height:var(--height);width:var(--width);display:flex;position:relative}.icon svg{color:currentColor;fill:currentColor;width:100%;height:100%}}
+@layer components{.icon{--color:inherit;--height:var(--size);--size:var(--size-400);--width:var(--size);color:var(--color);flex:0 0 var(--width);height:var(--height);width:var(--width);display:flex;position:relative}.icon svg{fill:currentColor;width:100%;height:100%}}
 /*$vite$:1*/

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

@@ -1,14 +1,19 @@
-import { type Attributes } from '@esportsplus/template';
+import lazyload from './lazyload.js';
 import './scss/index.scss';
+declare const _default: {
+    lazyload: ({ alt, crossorigin, fetchpriority, height, loading, placeholder, referrerpolicy, sizes, src, srcset, width, ...attributes }: import("@esportsplus/template").Attributes & {
+        alt: string;
+        crossorigin?: 'anonymous' | 'use-credentials';
+        fetchpriority?: 'auto' | 'high' | 'low';
+        height: number;
+        loading?: 'eager' | 'lazy';
+        placeholder: string;
+        referrerpolicy?: ReferrerPolicy;
+        sizes?: string;
+        src: string;
+        srcset?: string;
+        width: number;
+    }) => DocumentFragment | Text;
+};
 export default _default;
-declare function _default({ alt, fetchpriority, height, loading, placeholder, sizes, src, srcset, width, ...attributes }: Attributes & {
-    alt: string;
-    fetchpriority?: 'auto' | 'high' | 'low';
-    height: number;
-    loading?: 'eager' | 'lazy';
-    placeholder?: string;
-    sizes?: string;
-    src?: string;
-    srcset?: string;
-    width: number;
-}): DocumentFragment | Text;
+export { lazyload };