@esportsplus/ui 0.56.4 → 0.57.0

package/build/components/overlay/index.js

@@ -1,13 +1,351 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
 import * as template_u1 from '@esportsplus/template';
 import { component } from '@esportsplus/template';
+import { edge } from '../../shared/anchor.js';
+import { finished, ms } from '../../shared/animation.js';
+import { drag, fling, INTERACTIVE, toward } from '../../shared/drag.js';
+import { observer } from '../../shared/resize.js';
+import popup, { lifecycle } from './popup.js';
 import './scss/index.scss';
-const template_0ip26l11 = template_u1.template(`<div class='overlay --scrollbar'>`);
-export default component(function (attributes, content) {
+const template_0ip26l12 = template_u1.template(`<dialog class='overlay'><!--$-->`);
+const template_0ip26l16 = template_u1.template(`<div aria-hidden='true' class='overlay-handle'>`);
+class ReactiveObject_0ip26l10 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);
+    }
+}
+const CENTER = { axis: 'y', sign: 1 };
+const OVERLAY_HANDLE = Symbol.for('@esportsplus/ui/overlay.handle');
+let layers = [], overlaid = new Set();
+function expandable(state) {
+    let hovered = false;
+    return {
+        onfocusin: (e) => {
+            if (e.target.matches(':focus-visible')) {
+                state.active = true;
+            }
+        },
+        onfocusout: function (e) {
+            if (!this.contains(e.relatedTarget)) {
+                state.active = hovered;
+            }
+        },
+        onpointerenter: (e) => {
+            if (e.pointerType === 'touch') {
+                return;
+            }
+            hovered = true;
+            state.active = true;
+        },
+        onpointerleave: function (e) {
+            if (e.pointerType === 'touch') {
+                return;
+            }
+            hovered = false;
+            state.active = this.matches(':has(:focus-visible)');
+        }
+    };
+}
+function layer(element) {
+    for (let i = 0, n = layers.length; i < n; i++) {
+        if (layers[i].element === element) {
+            return layers[i];
+        }
+    }
+}
+function measure(element) {
+    let scrollable = element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
+    element.classList.toggle('overlay--scrollable', scrollable);
+}
+function outside(element, e) {
+    let rect = element.getBoundingClientRect();
+    return e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom;
+}
+function property(element, name, value) {
+    if (!value) {
+        element.style.removeProperty(name);
+    }
+    else if (element.style.getPropertyValue(name) !== String(value)) {
+        element.style.setProperty(name, String(value));
+    }
+}
+function reset(element) {
+    element.classList.remove('overlay--edge-fill');
+    element.style.removeProperty('--edge-background');
+    element.style.removeProperty('--opacity');
+    element.style.removeProperty('--scale');
+    element.style.removeProperty('--transition-duration');
+    element.style.removeProperty('--transition-timing-function');
+    element.style.removeProperty('--translate');
+    element.style.removeProperty('transform');
+}
+function restack() {
+    let hosts = new Map();
+    for (let i = layers.length - 1; i >= 0; i--) {
+        let { dragging, element, host, progress } = layers[i], entry = hosts.get(host) ?? { depth: 0, tracking: false }, covered = entry.depth > 0;
+        element.classList.toggle('overlay--covered', covered);
+        element.classList.toggle('overlay--tracking', covered && entry.tracking);
+        property(element, '--depth', entry.depth);
+        if (element.inert !== covered) {
+            element.inert = covered;
+        }
+        entry.depth += 1 - progress;
+        entry.tracking ||= dragging;
+        hosts.set(host, entry);
+    }
+    let seen = new Set();
+    for (let i = 0, n = layers.length; i < n; i++) {
+        let { element, host } = layers[i];
+        element.classList.toggle('overlay--stacked', seen.has(host));
+        seen.add(host);
+    }
+    for (let host of overlaid) {
+        if (!hosts.has(host)) {
+            host.classList.remove('overlay-host--active', 'overlay-host--dragging');
+            host.style.removeProperty('--overlay-depth');
+        }
+    }
+    for (let [host, entry] of hosts) {
+        host.classList.toggle('overlay-host--active', true);
+        host.classList.toggle('overlay-host--dragging', entry.tracking);
+        property(host, '--overlay-depth', host.querySelector(':scope > .overlay-page') ? entry.depth : 0);
+    }
+    overlaid = new Set(hosts.keys());
+}
+function unstack(element) {
+    let current = layer(element);
+    if (!current) {
+        return;
+    }
+    layers.splice(layers.indexOf(current), 1);
+    element.classList.remove('overlay--covered', 'overlay--stacked', 'overlay--tracking');
+    element.inert = false;
+    element.style.removeProperty('--depth');
+    restack();
+}
+export default component(function ({ flow = false, modal = !flow, rail = false, state = new ReactiveObject_0ip26l10(), ...attributes }, content) {
+    let fill = 0, height = 0, resize, space, motion, stop;
+    function resetSpace() {
+        let previous = motion;
+        motion = undefined;
+        previous?.cancel();
+        space?.style.removeProperty('height');
+        space = undefined;
+    }
+    function settle(element, close, drag) {
+        let current = layer(element), thrown = close && !flow ? fling(element, drag) : null;
+        element.classList.remove('overlay--dragging');
+        element.style.removeProperty('--progress');
+        if (thrown) {
+            element.style.setProperty('--opacity', '0');
+            element.style.setProperty('--scale', '1');
+            element.style.setProperty('--transition-duration', `${thrown.duration}ms`);
+            element.style.setProperty('--transition-timing-function', thrown.easing);
+            element.style.setProperty('--translate', '0px');
+            element.style.transform = `translate(${drag.x + thrown.x}px, ${drag.y + thrown.y}px)`;
+        }
+        else if (close) {
+            element.style.setProperty('--opacity', '0');
+            if (flow) {
+                element.style.removeProperty('transform');
+            }
+        }
+        else {
+            element.style.removeProperty('transform');
+        }
+        if (current) {
+            current.dragging = false;
+            current.progress = 0;
+            restack();
+        }
+        if (close) {
+            state.active = false;
+        }
+        if (space) {
+            let start = space.style.height, end = `${close ? 0 : height}px`, computed = getComputedStyle(element);
+            space.style.height = end;
+            motion = space.animate([{ height: start }, { height: end }], {
+                duration: ms(computed.getPropertyValue(close ? '--close-duration' : '--open-duration')),
+                easing: computed.getPropertyValue('--ease').trim() || 'ease'
+            });
+            let current = motion;
+            void current.finished.then(() => {
+                if (motion === current) {
+                    resetSpace();
+                }
+            }, () => { });
+        }
+        if (element.classList.contains('overlay--edge-fill')) {
+            let generation = fill;
+            void finished(element).then(() => {
+                if (generation === fill) {
+                    element.classList.remove('overlay--edge-fill');
+                    element.style.removeProperty('--edge-background');
+                }
+            });
+        }
+    }
+    let gesture = drag({
+        begin: (e, element) => {
+            if (rail || e.button !== 0 || !state.active) {
+                return null;
+            }
+            let target = e.target;
+            if (element.classList.contains('overlay--covered') ||
+                outside(element, e) ||
+                target.closest(INTERACTIVE) ||
+                (target.clientWidth > 0 && (e.offsetX > target.clientWidth || e.offsetY > target.clientHeight))) {
+                return null;
+            }
+            let placement = edge(element, 'overlay');
+            return placement ? toward(placement) : [CENTER];
+        },
+        capture: (element) => {
+            element.classList.add('overlay--dragging');
+            if (flow) {
+                resetSpace();
+                space = element.parentElement;
+                height = element.offsetHeight;
+                space.style.height = `${height}px`;
+            }
+            if (edge(element, 'overlay') && !element.classList.contains('overlay--floating')) {
+                let surface = element, background = getComputedStyle(surface).backgroundColor;
+                while (background === 'transparent' || background.endsWith(', 0)') || background.endsWith('/ 0)')) {
+                    let child = surface.querySelector(':scope > :not([hidden]):not(.overlay-handle)');
+                    if (!child) {
+                        break;
+                    }
+                    surface = child;
+                    background = getComputedStyle(surface).backgroundColor;
+                }
+                fill++;
+                element.style.setProperty('--edge-background', background);
+                element.classList.add('overlay--edge-fill');
+            }
+        },
+        move: (element, { x, y }, progress) => {
+            let current = layer(element);
+            element.style.setProperty('--progress', String(progress));
+            element.style.transform = `translate(${x}px, ${y}px)`;
+            if (space) {
+                let sign = edge(element, 'overlay')?.y || 1;
+                space.style.height = `${Math.max(0, height - Math.max(y * sign, 0))}px`;
+            }
+            if (current) {
+                current.dragging = true;
+                current.progress = progress;
+                restack();
+            }
+        },
+        release: (element, drag, dismiss) => settle(element, dismiss, drag)
+    });
     return (() => {
-        let root_0ip26l10 = template_0ip26l11(), element_0ip26l12 = root_0ip26l10.firstChild;
-        template_u1.setProperties(element_0ip26l12, this?.attributes);
-        template_u1.setProperties(element_0ip26l12, attributes);
-        template_u1.slot(element_0ip26l12, content, 1);
-        return root_0ip26l10;
+        let root_0ip26l11 = template_0ip26l12(), element_0ip26l13 = root_0ip26l11.firstChild, element_0ip26l14 = element_0ip26l13.firstChild;
+        template_u1.slot(element_0ip26l14, !rail && (() => {
+            let root_0ip26l15 = template_0ip26l16(), element_0ip26l17 = root_0ip26l15.firstChild;
+            template_u1.setProperties(element_0ip26l17, this?.attributes?.[OVERLAY_HANDLE]);
+            template_u1.setProperties(element_0ip26l17, attributes[OVERLAY_HANDLE]);
+            return root_0ip26l15;
+        })());
+        template_u1.slot(element_0ip26l13, content, 2);
+        template_u1.setProperties(element_0ip26l13, flow && { class: 'overlay--flow' });
+        template_u1.setProperties(element_0ip26l13, rail
+            ? { class: ['overlay--rail', () => state.active && '--active'], ...expandable(state) }
+            : { class: 'overlay--draggable', tabindex: -1 });
+        template_u1.setProperties(element_0ip26l13, this?.attributes);
+        template_u1.setProperties(element_0ip26l13, attributes);
+        template_u1.setProperties(element_0ip26l13, {
+            ...gesture,
+            oncancel: (e) => {
+                e.preventDefault();
+                state.active = false;
+            },
+            onclick: (e) => {
+                let element = e.currentTarget;
+                if (e.target === element && outside(element, e)) {
+                    state.active = false;
+                }
+            },
+            onclose: () => {
+                state.active = false;
+            },
+            onconnect: (element) => {
+                if (rail) {
+                    let previous = document.activeElement;
+                    element.show();
+                    document.activeElement?.blur();
+                    if (previous instanceof HTMLElement && previous !== document.body) {
+                        previous.focus({ preventScroll: true });
+                    }
+                    return;
+                }
+                stop = lifecycle(element, {
+                    state,
+                    open: () => {
+                        resetSpace();
+                        reset(element);
+                        if (!element.open) {
+                            let previous = flow ? document.activeElement : null;
+                            element.inert = true;
+                            if (modal && !flow) {
+                                element.showModal();
+                            }
+                            else {
+                                element.show();
+                            }
+                            element.inert = false;
+                            if (flow) {
+                                if (previous instanceof HTMLElement && previous !== document.activeElement) {
+                                    previous.focus({ preventScroll: true });
+                                }
+                            }
+                            else {
+                                (element.querySelector('[autofocus]') ?? element).focus({ preventScroll: true });
+                            }
+                            resize?.disconnect();
+                            resize = observer(() => measure(element));
+                            resize.observe(element);
+                            for (let i = 0, n = element.children.length; i < n; i++) {
+                                resize.observe(element.children[i]);
+                            }
+                            element.getBoundingClientRect();
+                        }
+                        if (!flow && !layer(element)) {
+                            layers.push({
+                                dragging: false,
+                                element,
+                                host: modal ? document.body : element.parentElement ?? document.body,
+                                progress: 0
+                            });
+                            restack();
+                        }
+                    },
+                    close: () => unstack(element),
+                    closed: () => {
+                        resize?.disconnect();
+                        resize = undefined;
+                        element.close();
+                        resetSpace();
+                        reset(element);
+                    }
+                });
+            },
+            ondisconnect: (element) => {
+                resize?.disconnect();
+                resize = undefined;
+                stop?.();
+                resetSpace();
+                reset(element);
+                unstack(element);
+            }
+        });
+        return root_0ip26l11;
     })();
-});
+}, { handle: OVERLAY_HANDLE, popup });

package/build/components/overlay/popup.d.ts

@@ -0,0 +1,31 @@
+import type { Attributes } from '@esportsplus/template';
+type State = {
+    active: boolean;
+};
+type Lifecycle = {
+    activeClass?: boolean;
+    animations?: () => HTMLElement;
+    close?: VoidFunction;
+    closed?: VoidFunction;
+    open: VoidFunction;
+    state: State;
+    subtree?: boolean;
+};
+type Popup = {
+    canDismiss?: () => boolean;
+    contains?: (root: HTMLElement, node: Node | null) => boolean;
+    dismiss?: boolean;
+    dismissOn?: string;
+    escape?: boolean;
+    ondismiss?: (reason: 'escape' | 'outside') => void;
+    onclosed?: VoidFunction;
+    onopen?: VoidFunction;
+    popover?: boolean;
+    state?: State;
+    target?: (root: HTMLElement) => HTMLElement | undefined;
+};
+declare function lifecycle(element: HTMLElement, { activeClass, animations, close, closed, open, state, subtree }: Lifecycle): () => void;
+declare function popup({ canDismiss, contains, dismiss, dismissOn, escape, ondismiss, onclosed, onopen, popover, state, target }?: Popup): Attributes;
+export { lifecycle };
+export default popup;
+export type { Popup };

package/build/components/overlay/popup.js

@@ -0,0 +1,150 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect } from '@esportsplus/reactivity';
+import { finished } from '../../shared/animation.js';
+class ReactiveObject_07bze2f0 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);
+    }
+}
+function lifecycle(element, { activeClass = true, animations, close, closed, open, state, subtree = false }) {
+    let generation = 0, opened = false, stop = effect(() => {
+        let active = state.active, current = ++generation;
+        if (active) {
+            open();
+            opened = true;
+            if (activeClass) {
+                element.classList.add('--active');
+            }
+            return;
+        }
+        if (activeClass) {
+            element.classList.remove('--active');
+        }
+        close?.();
+        if (!opened) {
+            return;
+        }
+        void finished(animations?.() ?? element, { subtree }).then(() => {
+            if (generation === current && !state.active) {
+                opened = false;
+                closed?.();
+            }
+        });
+    });
+    return () => {
+        generation++;
+        stop();
+    };
+}
+let opened = [];
+function popup({ canDismiss, contains = (root, node) => !!node && root.contains(node), dismiss = true, dismissOn, escape = true, ondismiss, onclosed, onopen, popover = false, state = new ReactiveObject_07bze2f0(), target = (root) => root } = {}) {
+    let root, stop;
+    function remove() {
+        if (root) {
+            let index = opened.indexOf(root);
+            if (index !== -1) {
+                opened.splice(index, 1);
+            }
+        }
+    }
+    function hide() {
+        let element = root && target(root);
+        if (popover && element?.matches(':popover-open')) {
+            element.hidePopover();
+        }
+        onclosed?.();
+    }
+    function dismissable() {
+        return state.active || !!canDismiss?.();
+    }
+    function dismissPopup(reason) {
+        ondismiss?.(reason);
+        state.active = false;
+    }
+    return {
+        class: !popover ? () => state.active && '--active' : undefined,
+        onconnect: (element) => {
+            root = element;
+            stop = lifecycle(element, {
+                activeClass: popover,
+                animations: () => target(element) ?? element,
+                close: () => {
+                    remove();
+                    let surface = target(element);
+                    if (surface) {
+                        surface.inert = true;
+                    }
+                },
+                closed: hide,
+                open: () => {
+                    let surface = target(element), previous = document.activeElement;
+                    if (popover && surface && !surface.matches(':popover-open')) {
+                        surface.popover = 'manual';
+                        surface.inert = true;
+                        surface.showPopover();
+                    }
+                    if (surface) {
+                        surface.inert = false;
+                    }
+                    onopen?.();
+                    if (popover) {
+                        surface?.getBoundingClientRect();
+                    }
+                    if (previous instanceof HTMLElement && previous !== document.activeElement) {
+                        previous.focus({ preventScroll: true });
+                    }
+                    remove();
+                    opened.push(element);
+                },
+                state,
+                subtree: true
+            });
+        },
+        ondisconnect: () => {
+            stop?.();
+            remove();
+            hide();
+            root = undefined;
+        },
+        ...(dismiss && {
+            ondocumentpointerdown: (event) => {
+                if (root && dismissable() && !contains(root, event.target)) {
+                    dismissPopup('outside');
+                }
+            }
+        }),
+        ...(dismissOn && {
+            ondocumentclick: (event) => {
+                if (!root || !dismissable()) {
+                    return;
+                }
+                let match = event.target?.closest?.(dismissOn);
+                if (match && root.contains(match)) {
+                    dismissPopup('outside');
+                }
+            }
+        }),
+        ...(escape && {
+            ondocumentkeydown: (event) => {
+                if (event.key !== 'Escape' || event.defaultPrevented || !root || !dismissable()) {
+                    return;
+                }
+                let modal = document.activeElement?.closest('dialog:modal') ?? document.querySelector('dialog:modal');
+                if ((modal && !modal.contains(root) && !popover) || (opened.length && opened[opened.length - 1] !== root)) {
+                    return;
+                }
+                event.preventDefault();
+                dismissPopup('escape');
+            }
+        })
+    };
+}
+export { lifecycle };
+export default popup;

package/build/components/overlay/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.overlay{cursor:default;z-index:9;flex-wrap:wrap;justify-content:flex-start;display:flex;position:fixed;inset:0}.overlay:not(.--active) input[type=password]{display:none}}
+@layer components{.overlay{--opacity:0;--stack-span:50%;--stack-translate:0 calc(var(--stack-shift) * -1);--translate:var(--translate-x) var(--translate-y);--translate-x:0px;--translate-y:0px}.overlay--e,.overlay--n,.overlay--ne,.overlay--nw,.overlay--s,.overlay--se,.overlay--sw,.overlay--w{--opacity:1;--stack-span:100%}.overlay--e{--stack-translate:calc(var(--stack-shift) * -1) 0;--translate-x:calc(100% + var(--margin-horizontal));--translate-y:0px}.overlay--n,.overlay--ne,.overlay--nw{--stack-translate:0 var(--stack-shift);--translate-x:0px;--translate-y:calc(-100% - var(--margin-vertical))}.overlay--s,.overlay--se,.overlay--sw{--stack-translate:0 calc(var(--stack-shift) * -1);--translate-x:0px;--translate-y:calc(100% + var(--margin-vertical))}.overlay--w{--stack-translate:var(--stack-shift) 0;--translate-x:calc(-100% - var(--margin-horizontal));--translate-y:0px}.overlay{--backdrop:color-mix(in srgb, var(--color-black-500) 64%, transparent);--fling-duration:.5s;--handle-color:var(--color-border-300);--handle-length:40px;--handle-offset:var(--size-200);--handle-thickness:6px;--margin-horizontal:0px;--margin-vertical:0px;--max-width:480px;--scale:1;--stack-dim:.2;--stack-peek:18px;--stack-scale:.94;--stack-shift:calc(var(--depth,0) * var(--stack-peek) + (1 - pow(var(--stack-scale), var(--depth,0))) * var(--stack-span));--width-closed:64px}@media (prefers-reduced-motion:reduce){.overlay{--fling-duration:0s}}.overlay:where(:not(.--active)){--transition-timing-function:cubic-bezier(.8, 0, .6, 1)}.overlay--e,.overlay--n,.overlay--ne,.overlay--nw,.overlay--s,.overlay--se,.overlay--sw,.overlay--w{--close-duration:.3s;--ease:cubic-bezier(.32, .72, 0, 1);--open-duration:.5s;--transition-duration:var(--open-duration);--transition-timing-function:var(--ease)}.overlay--e:where(:not(.--active)),.overlay--n:where(:not(.--active)),.overlay--ne:where(:not(.--active)),.overlay--nw:where(:not(.--active)),.overlay--s:where(:not(.--active)),.overlay--se:where(:not(.--active)),.overlay--sw:where(:not(.--active)),.overlay--w:where(:not(.--active)){--transition-duration:var(--close-duration)}.overlay--e,.overlay--w{--max-width:320px}.overlay--floating{--margin-horizontal:var(--size-100);--margin-vertical:var(--size-100)}.overlay--alert{--backdrop:#0000001a;--blur:4px;--opacity:0;--scale:.95;--transition-duration:.1s;--transition-timing-function:ease;--translate:0px}.overlay--alert:where(:not(.--active)){--transition-timing-function:cubic-bezier(.75, 0, .75, .9)}.overlay--blur{--backdrop:color-mix(in srgb, var(--color-black-500) 32%, transparent);--blur:8px}.overlay--fade{--opacity:0;--translate:0px}.overlay--scale{--opacity:0;--scale:.92;--translate:0px}.overlay--spring{--opacity:0;--scale:.8;--transition-timing-function:cubic-bezier(.34, 1.56, .64, 1);--translate:0px}.overlay--spring:where(:not(.--active)){--transition-timing-function:cubic-bezier(.36, 0, .66, -.56)}.overlay-page{--dim:.2;--peek:18px;--scale:.94;--transition-duration:.5s;--transition-timing-function:cubic-bezier(.32, .72, 0, 1)}:where(dialog.overlay){color:inherit;max-height:calc(100% - var(--margin-vertical) * 2);z-index:9;background:0 0;border:0;max-width:100%;padding:0;inset:0}dialog.overlay{position:fixed}dialog.overlay:not(:modal){position:absolute}dialog.overlay.overlay--flow:not(:modal){z-index:auto;align-self:start;width:100%;max-width:none;min-height:0;max-height:none;margin:0;position:relative;inset:auto}dialog.overlay.overlay--flow:not(:modal):not([open]){visibility:hidden;display:block}.overlay{transition:filter var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function), scale var(--transition-duration) var(--transition-timing-function), transform var(--transition-duration) var(--transition-timing-function), translate var(--transition-duration) var(--transition-timing-function);transform-origin:50%;width:min(var(--max-width), 100% - var(--margin-horizontal) * 2);margin:auto}.overlay:not(.--active){opacity:var(--opacity);pointer-events:none;scale:var(--scale);translate:var(--translate)}.overlay:not(.--active)::backdrop{opacity:0}.overlay:not(.--active) input[type=password]{display:none}.overlay::backdrop{background:var(--backdrop);transition:opacity var(--transition-duration) var(--transition-timing-function)}.overlay.--active::backdrop{opacity:calc(1 - var(--progress,0))}.overlay.overlay--stacked::backdrop{opacity:0}.overlay--alert::backdrop,.overlay--blur::backdrop{-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}.overlay--e,.overlay--w{height:calc(100% - var(--margin-vertical) * 2)}.overlay--e,.overlay--ne,.overlay--se{margin-inline-end:var(--margin-horizontal)}.overlay--e:not(.overlay--floating),.overlay--ne:not(.overlay--floating),.overlay--se:not(.overlay--floating){border-start-end-radius:0;border-end-end-radius:0}.overlay--n,.overlay--ne,.overlay--nw{margin-block-start:var(--margin-vertical)}.overlay--n:not(.overlay--floating),.overlay--ne:not(.overlay--floating),.overlay--nw:not(.overlay--floating){border-start-start-radius:0;border-start-end-radius:0}.overlay--s,.overlay--se,.overlay--sw{margin-block-end:var(--margin-vertical)}.overlay--s:not(.overlay--floating),.overlay--se:not(.overlay--floating),.overlay--sw:not(.overlay--floating){border-end-end-radius:0;border-end-start-radius:0}.overlay--w,.overlay--nw,.overlay--sw{margin-inline-start:var(--margin-horizontal)}.overlay--w:not(.overlay--floating),.overlay--nw:not(.overlay--floating),.overlay--sw:not(.overlay--floating){border-start-start-radius:0;border-end-start-radius:0}.overlay--e{transform-origin:100%}.overlay--n{transform-origin:top}.overlay--ne{transform-origin:100% 0}.overlay--nw{transform-origin:0 0}.overlay--s{transform-origin:bottom}.overlay--se{transform-origin:100% 100%}.overlay--sw{transform-origin:0 100%}.overlay--w{transform-origin:0}.overlay.overlay--covered{filter:brightness(calc(1 - min(var(--depth), 1) * var(--stack-dim)));scale:pow(var(--stack-scale), var(--depth));translate:var(--stack-translate)}.overlay.overlay--draggable{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;outline:none}.overlay.overlay--draggable.overlay--scrollable{touch-action:auto}.overlay.overlay--draggable:not(.overlay--scrollable):is(.overlay--e,.overlay--n,.overlay--ne,.overlay--nw,.overlay--s,.overlay--se,.overlay--sw,.overlay--w){overflow:visible}.overlay.overlay--edge-fill{border-image-source:linear-gradient(var(--edge-background), var(--edge-background));border-image-slice:1;border-image-width:var(--edge-fill);border-image-outset:var(--edge-fill);border-image-repeat:stretch}.overlay.overlay--edge-fill.overlay--e{--edge-fill:0 50vw 0 0}.overlay.overlay--edge-fill.overlay--n{--edge-fill:50vh 0 0 0}.overlay.overlay--edge-fill.overlay--ne{--edge-fill:50vh 50vw 0 0}.overlay.overlay--edge-fill.overlay--nw{--edge-fill:50vh 0 0 50vw}.overlay.overlay--edge-fill.overlay--s{--edge-fill:0 0 50vh 0}.overlay.overlay--edge-fill.overlay--se{--edge-fill:0 50vw 50vh 0}.overlay.overlay--edge-fill.overlay--sw{--edge-fill:0 0 50vh 50vw}.overlay.overlay--edge-fill.overlay--w{--edge-fill:0 0 0 50vw}.overlay.overlay--rail{transition:width var(--transition-duration) var(--transition-timing-function);white-space:nowrap;width:min(var(--width-closed), 100% - var(--margin-horizontal) * 2);overflow:hidden}.overlay.overlay--rail.--active{width:min(var(--max-width), 100% - var(--margin-horizontal) * 2)}.overlay.overlay--rail:not(.--active){opacity:1;pointer-events:auto;translate:none;scale:1}@media (prefers-reduced-motion:reduce){.overlay.overlay--rail{transition:none}}.overlay.overlay--dragging{cursor:grabbing;opacity:calc(1 - var(--progress,0))}.overlay.overlay--dragging,.overlay.overlay--dragging::backdrop,.overlay.overlay--tracking,.overlay.overlay--tracking::backdrop{transition:none}.overlay-handle{background:var(--handle-color);border-radius:var(--handle-thickness);height:var(--handle-thickness);touch-action:none;width:var(--handle-length);position:absolute}.overlay:not(.overlay--e,.overlay--n,.overlay--ne,.overlay--nw,.overlay--s,.overlay--se,.overlay--sw,.overlay--w)>.overlay-handle{display:none}.overlay--e>.overlay-handle,.overlay--w>.overlay-handle{height:var(--handle-length);width:var(--handle-thickness);top:50%;translate:0 -50%}.overlay--e>.overlay-handle{left:var(--handle-offset)}.overlay--n>.overlay-handle,.overlay--ne>.overlay-handle,.overlay--nw>.overlay-handle,.overlay--s>.overlay-handle,.overlay--se>.overlay-handle,.overlay--sw>.overlay-handle{left:50%;translate:-50%}.overlay--n>.overlay-handle,.overlay--ne>.overlay-handle,.overlay--nw>.overlay-handle{bottom:var(--handle-offset)}.overlay--s>.overlay-handle,.overlay--se>.overlay-handle,.overlay--sw>.overlay-handle{top:var(--handle-offset)}.overlay--w>.overlay-handle{right:var(--handle-offset)}@media (prefers-reduced-motion:reduce){.overlay{--opacity:0;--scale:1;--translate:0px;transition:filter var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function)}.overlay::backdrop{transition:opacity var(--transition-duration) var(--transition-timing-function)}.overlay.overlay--covered{translate:none;scale:none}}.overlay-page{transform-origin:top;transition:filter var(--transition-duration) var(--transition-timing-function), scale var(--transition-duration) var(--transition-timing-function), translate var(--transition-duration) var(--transition-timing-function)}.overlay-host--active>.overlay-page{filter:brightness(calc(1 - min(var(--overlay-depth), 1) * var(--dim)));scale:calc(1 - min(var(--overlay-depth), 1) * (1 - var(--scale)));translate:0 calc(min(var(--overlay-depth), 1) * var(--peek))}.overlay-host--dragging>.overlay-page{transition:none}@media (prefers-reduced-motion:reduce){.overlay-host--active>.overlay-page{translate:none;scale:none}}}
 /*$vite$:1*/

package/build/components/page/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.page{--gap-horizontal:0px;--gap-vertical:0px}.page-subtitle,.page-suptitle{--color:var(--color-default);--color-default:var(--color-text-400);--font-size:var(--font-size-400)}.page-title{--color:var(--color-default);--color-default:var(--color-text-500)}.page{gap:var(--gap-vertical) 0px;flex-flow:column;width:100%;min-height:100svh;display:flex;position:relative}.page-subtitle,.page-suptitle,.page-title{color:var(--color);z-index:1;width:100%;display:block;position:relative}.page-subtitle,.page-suptitle{font-size:var(--font-size)}.page-title{text-wrap:balance}}
+@layer components{.page{--gap-horizontal:0px;--gap-vertical:0px}.page-subtitle,.page-suptitle{--color:var(--color-default);--color-default:var(--color-text-400);--font-size:var(--font-size-400)}.page-title{--color:var(--color-default);--color-default:var(--color-text-500)}.page{gap:var(--gap-vertical) 0px;flex-flow:column;width:100%;min-height:100svh;display:flex;position:relative}.page-subtitle,.page-suptitle,.page-title{color:var(--color);z-index:1;width:100%;display:block;position:relative}.page-subtitle,.page-suptitle{font-size:var(--font-size)}.page-title{text-wrap:balance}}
 /*$vite$:1*/

package/build/components/pagination/dots.d.ts

@@ -0,0 +1,21 @@
+import * as template_u1 from '@esportsplus/template';
+import { type Attributes } from '@esportsplus/template';
+type A = Attributes & {
+    [DOTS_DOT]?: Attributes;
+    autoplay?: number;
+    count: number;
+    onelapsed?: (active: number) => void;
+    onpage?: (index: number) => void;
+    state?: State;
+};
+type State = {
+    active: number;
+    progress: number;
+    running: boolean;
+};
+declare const DOTS_DOT: unique symbol;
+declare const _default: template_u1.Factory<A, template_u1.Renderable<any>, template_u1.Renderable<any>, {
+    readonly dot: typeof DOTS_DOT;
+}>;
+export default _default;
+export type { State };