@esportsplus/ui 0.56.3 → 0.57.0

package/build/components/kanban-board/index.js

@@ -1,235 +0,0 @@
-import * as reactivity_u0 from '@esportsplus/reactivity';
-import * as template_u1 from '@esportsplus/template';
-import counter from '../counter/index.js';
-import sortable from '../sortable/index.js';
-import './scss/index.scss';
-const template_1rg575x3 = template_u1.template(`<div class='kanban-board' role='group'><!--$--><p class='kanban-board-sr'> Press Space to pick up. While holding, use the arrow keys to move within or between columns, Space to drop, or Escape to cancel. </p><p class='kanban-board-sr' aria-atomic='true' aria-live='assertive'>`);
-const template_1rg575x9 = template_u1.template(`<div class='kanban-board-column'><div class='kanban-board-header' aria-hidden='true'><span></span></div><ul class='kanban-board-list'>`);
-const template_1rg575xe = template_u1.template(`<li class='kanban-board-item'><button class='kanban-board-card' type='button'><span class='kanban-board-card-title'>`);
-class ReactiveObject_1rg575x0 extends reactivity_u0.ReactiveObject {
-    #value;
-    constructor(_p0) {
-        super(null);
-        this.#value = this[reactivity_u0.SIGNAL](_p0);
-    }
-    get value() {
-        return reactivity_u0.read(this.#value);
-    }
-    set value(_v0) {
-        reactivity_u0.write(this.#value, _v0);
-    }
-}
-class ReactiveObject_1rg575x1 extends reactivity_u0.ReactiveObject {
-    #announcement = this[reactivity_u0.SIGNAL]('');
-    constructor() {
-        super(null);
-    }
-    get announcement() {
-        return reactivity_u0.read(this.#announcement);
-    }
-    set announcement(_v0) {
-        reactivity_u0.write(this.#announcement, _v0);
-    }
-}
-const FLIP = { duration: 300, easing: 'cubic-bezier(0.2, 0, 0, 1)' };
-function button(item) {
-    return item.querySelector('.kanban-board-card');
-}
-function flip(board, mutate) {
-    let first = new Map(), items = board.querySelectorAll('.kanban-board-item');
-    for (let i = 0, n = items.length; i < n; i++) {
-        first.set(items[i], items[i].getBoundingClientRect());
-    }
-    mutate();
-    if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
-        return;
-    }
-    for (let [item, start] of first) {
-        let rect = item.getBoundingClientRect(), x = start.left - rect.left, y = start.top - rect.top;
-        if (x || y) {
-            item.animate([{ translate: `${x}px ${y}px` }, { translate: '0px 0px' }], FLIP);
-        }
-    }
-}
-export default ({ columns, label = 'Board', onsort, ...attributes }) => {
-    let board, cards = new Map(columns.flatMap((column) => column.cards.map((card) => [card.id, card]))), counts = columns.map((column) => new ReactiveObject_1rg575x0(column.cards.length)), first = columns.flatMap((column) => column.cards)[0]?.id, frame = 0, group = `kanban-board-${Math.random().toString(36).slice(2)}`, held = null, state = new ReactiveObject_1rg575x1();
-    function cancel() {
-        if (!held) {
-            return;
-        }
-        let { before, item } = held, all = lists();
-        held = null;
-        flip(board, () => {
-            for (let i = 0, n = all.length; i < n; i++) {
-                all[i].append(...before[i]);
-            }
-        });
-        release(item);
-        focus(item);
-        sync();
-        state.announcement = `Cancelled. ${title(item)} returned to ${where(item)}.`;
-    }
-    function drop() {
-        if (!held) {
-            return;
-        }
-        let item = held.item;
-        held = null;
-        release(item);
-        state.announcement = `Dropped ${title(item)} in ${where(item)}.`;
-    }
-    function focus(item) {
-        let target = button(item);
-        if (document.activeElement !== target) {
-            target.focus({ preventScroll: true });
-        }
-    }
-    function lists() {
-        return Array.from(board.querySelectorAll('.kanban-board-list'));
-    }
-    function release(item) {
-        item.classList.remove('--held');
-        button(item).removeAttribute('aria-pressed');
-    }
-    function sync() {
-        let all = lists(), next = columns.map((column, i) => ({
-            ...column,
-            cards: Array.from(all[i].children, (item) => cards.get(item.dataset.id))
-        }));
-        for (let i = 0, n = next.length; i < n; i++) {
-            counts[i].value = next[i].cards.length;
-        }
-        onsort?.(next);
-    }
-    function title(item) {
-        return cards.get(item.dataset.id)?.title ?? '';
-    }
-    function where(item) {
-        let list = item.parentElement;
-        return `${columns[lists().indexOf(list)].title}, position ${Array.prototype.indexOf.call(list.children, item) + 1} of ${list.children.length}`;
-    }
-    return (() => {
-        let root_1rg575x2 = template_1rg575x3(), element_1rg575x4 = root_1rg575x2.firstChild, element_1rg575x5 = element_1rg575x4.firstChild, element_1rg575x6 = element_1rg575x4.firstElementChild, element_1rg575x7 = element_1rg575x6.nextElementSibling;
-        template_u1.setProperty(element_1rg575x4, 'aria-label', label);
-        template_u1.setProperties(element_1rg575x4, attributes);
-        template_u1.onconnect(element_1rg575x4, (element) => {
-            board = element;
-        });
-        template_u1.ondisconnect(element_1rg575x4, () => {
-            cancelAnimationFrame(frame);
-        });
-        template_u1.on(element_1rg575x4, 'focusin', (e) => {
-            let target = e.target.closest?.('.kanban-board-card');
-            if (!target) {
-                return;
-            }
-            let buttons = board.querySelectorAll('.kanban-board-card');
-            for (let i = 0, n = buttons.length; i < n; i++) {
-                buttons[i].tabIndex = buttons[i] === target ? 0 : -1;
-            }
-        });
-        template_u1.on(element_1rg575x4, 'focusout', () => {
-            cancelAnimationFrame(frame);
-            frame = requestAnimationFrame(() => {
-                if (held && document.activeElement !== button(held.item)) {
-                    drop();
-                }
-            });
-        });
-        template_u1.delegate(element_1rg575x4, 'keydown', (e) => {
-            let target = e.target.closest?.('.kanban-board-card');
-            if (!target || board.querySelector('.sortable.--active')) {
-                return;
-            }
-            let item = target.parentElement, list = item.parentElement, all = lists(), column = all.indexOf(list), index = Array.prototype.indexOf.call(list.children, item), isHeld = held?.item === item;
-            function across(step) {
-                for (let i = column + step; i >= 0 && i < all.length; i += step) {
-                    let children = all[i].children;
-                    if (children.length) {
-                        focus(children[Math.min(index, children.length - 1)]);
-                        return;
-                    }
-                }
-            }
-            function move(to, position) {
-                if (to < 0 || to >= all.length) {
-                    return;
-                }
-                let others = Array.from(all[to].children).filter((child) => child !== item), slot = Math.min(Math.max(position, 0), others.length);
-                if (to === column && slot === index) {
-                    return;
-                }
-                flip(board, () => all[to].insertBefore(item, others[slot] ?? null));
-                focus(item);
-                sync();
-                state.announcement = `Moved to ${where(item)}.`;
-            }
-            function toggle() {
-                if (isHeld) {
-                    drop();
-                    return;
-                }
-                drop();
-                held = { before: all.map((list) => Array.from(list.children)), item };
-                item.classList.add('--held');
-                target.setAttribute('aria-pressed', 'true');
-                state.announcement = `Picked up ${title(item)}, ${where(item)}.`;
-            }
-            function within(step) {
-                let sibling = list.children[index + step];
-                if (sibling) {
-                    focus(sibling);
-                }
-            }
-            let keys = {
-                ' ': toggle,
-                ArrowDown: () => isHeld ? move(column, index + 1) : within(1),
-                ArrowLeft: () => isHeld ? move(column - 1, index) : across(-1),
-                ArrowRight: () => isHeld ? move(column + 1, index) : across(1),
-                ArrowUp: () => isHeld ? move(column, index - 1) : within(-1),
-                Enter: toggle,
-                Escape: isHeld ? cancel : undefined
-            }, run = keys[e.key];
-            if (!run) {
-                return;
-            }
-            e.preventDefault();
-            run();
-        });
-        template_u1.delegate(element_1rg575x4, 'pointerdown', () => {
-            drop();
-        });
-        template_u1.slot(element_1rg575x5, columns.map((column, i) => {
-            let root_1rg575x8 = template_1rg575x9(), element_1rg575xa = root_1rg575x8.firstChild.firstElementChild.firstElementChild, element_1rg575xb = root_1rg575x8.firstChild.firstElementChild, element_1rg575xc = element_1rg575xb.nextElementSibling;
-            template_u1.slot(element_1rg575xa, column.title, 1);
-            template_u1.slot(element_1rg575xb, counter({
-                class: 'kanban-board-count counter--ticker',
-                currency: 'IGNORE',
-                decimals: 0,
-                delay: 0,
-                state: counts[i],
-                value: column.cards.length
-            }), 2);
-            template_u1.setProperty(element_1rg575xc, 'aria-label', column.title);
-            template_u1.setProperties(element_1rg575xc, sortable({
-                group,
-                onsort: (item) => {
-                    sync();
-                    state.announcement = `Dropped ${title(item)} to ${where(item)}.`;
-                }
-            }));
-            template_u1.slot(element_1rg575xc, column.cards.map((card) => {
-                let root_1rg575xd = template_1rg575xe(), element_1rg575xf = root_1rg575xd.firstChild, element_1rg575xg = element_1rg575xf.firstElementChild, element_1rg575xh = element_1rg575xg.firstElementChild;
-                template_u1.setProperty(element_1rg575xf, 'data-id', card.id);
-                template_u1.setProperty(element_1rg575xg, 'aria-describedby', template_u1.interpolate([(group), "-instructions"]));
-                template_u1.setProperty(element_1rg575xg, 'tabindex', card.id === first ? 0 : -1);
-                template_u1.slot(element_1rg575xh, card.title, 1);
-                return root_1rg575xd;
-            }), 1);
-            return root_1rg575x8;
-        }));
-        template_u1.setProperty(element_1rg575x6, 'id', template_u1.interpolate([(group), "-instructions"]));
-        new template_u1.EffectSlot(element_1rg575x7, () => state.announcement, 1);
-        return root_1rg575x2;
-    })();
-};

package/build/components/kanban-board/scss/index.scss

@@ -1,2 +0,0 @@
-@layer components {.kanban-board{--card-background:var(--color-white-300);--card-border-radius:10px;--card-box-shadow:0 0 0 1px oklch(0% 0 0/.06), 0 1px 2px oklch(0% 0 0/.06), 0 6px 16px -6px oklch(0% 0 0/.12);--card-color:var(--color-text-500);--card-font-size:var(--font-size-300);--card-height:44px;--card-lifted-box-shadow:0 0 0 1px oklch(0% 0 0/.06), 0 2px 4px oklch(0% 0 0/.06), 0 12px 24px -6px oklch(0% 0 0/.2);--card-padding-horizontal:12px;--column-background:var(--color-grey-400);--column-gap:8px;--column-padding:8px;--count-font-size:var(--font-size-200);--focus-ring:oklch(20% 0 0/.38);--gap:12px;--header-color:var(--color-text-300);--header-font-size:var(--font-size-300);--header-height:36px;--height:380px;--lift-scale:1.03;--press-scale:.96;--width:600px}.kanban-board .sortable{--drag-box-shadow:var(--card-lifted-box-shadow);--drag-scale:var(--lift-scale);--placeholder-background:oklch(0% 0 0/.03);--placeholder-border-color:oklch(0% 0 0/.2);--placeholder-border-width:1px;--swing-angle:2deg;--swing-strength:.002}.kanban-board{gap:var(--gap);height:var(--height);max-width:100%;width:var(--width);grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;display:grid;position:relative}.kanban-board-card{background:var(--card-background);border-radius:var(--card-border-radius);box-shadow:var(--card-box-shadow);color:var(--card-color);cursor:grab;font:inherit;font-size:var(--card-font-size);height:100%;padding:0 var(--card-padding-horizontal);text-align:start;touch-action:none;transition:box-shadow var(--transition-duration) var(--transition-timing-function), scale .15s ease-out;-webkit-user-select:none;user-select:none;border:0;outline:none;align-items:center;width:100%;display:flex;position:relative}.kanban-board-card:active{scale:var(--press-scale)}.kanban-board-card:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}.kanban-board-card-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kanban-board-column{background:var(--column-background);border-radius:calc(var(--card-border-radius) + var(--column-padding));min-width:0;padding:var(--column-padding);flex-direction:column;display:flex}.kanban-board-count{font-size:var(--count-font-size);font-variant-numeric:tabular-nums}.kanban-board-header{color:var(--header-color);font-size:var(--header-font-size);font-weight:var(--font-weight-500);height:var(--header-height);flex-shrink:0;justify-content:space-between;align-items:center;padding:0 8px;display:flex}.kanban-board-item{border-radius:var(--card-border-radius);height:var(--card-height);flex-shrink:0;list-style:none}.kanban-board-item.--dragging .kanban-board-card,.kanban-board-item.--held .kanban-board-card{scale:1}.kanban-board-item.--held{outline-offset:-1px;outline:1px dashed oklch(0% 0 0/.2)}.kanban-board-item.--held .kanban-board-card{box-shadow:var(--card-lifted-box-shadow);scale:var(--lift-scale);z-index:1}.kanban-board-list{gap:var(--column-gap);flex-direction:column;flex:1;min-height:0;margin:0;padding:0;display:flex}.kanban-board-sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){.kanban-board-card{transition:none}}}
-/*$vite$:1*/

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

@@ -1,32 +0,0 @@
-import * as template_u1 from '@esportsplus/template';
-import { type Attributes } from '@esportsplus/template';
-import './scss/index.scss';
-type A = Attributes<HTMLDialogElement> & {
-    alt: Text;
-    caption?: Text;
-    height?: number;
-    maxScale?: number;
-    oncancel?: never;
-    onclose?: never;
-    onconnect?: never;
-    ondisconnect?: never;
-    onkeydown?: never;
-    origin?: () => HTMLElement | null | undefined;
-    src: Text;
-    state?: {
-        active: boolean;
-    };
-    width?: number;
-};
-type Text = string | (() => string);
-declare const _default: {
-    (): template_u1.Renderable<any>;
-    <T extends A>(attributes: T): template_u1.Renderable<any>;
-    <T extends template_u1.Renderable<any>>(content: T): template_u1.Renderable<any>;
-    (attributes: A, content?: template_u1.Renderable<any>): template_u1.Renderable<any>;
-    bind(context: {
-        attributes?: Partial<A> | undefined;
-        content?: template_u1.Renderable<any>;
-    }): any;
-};
-export default _default;

package/build/components/lightbox/index.js

@@ -1,396 +0,0 @@
-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

@@ -1,2 +0,0 @@
-@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*/