@esportsplus/ui 0.55.0 → 0.56.2

package/build/components/long-press/index.js

@@ -0,0 +1,4 @@
+import bind from './bind.js';
+import button from './button.js';
+export default { bind, button };
+export { bind, button };

package/build/components/long-press/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.long-press{--fill-color:var(--color-primary-400);--pop-duration:.32s;--pop-scale:1.045;--pop-timing-function:cubic-bezier(.34, 1.56, .64, 1);--progress:0;--progress-duration:.18s;--progress-timing-function:cubic-bezier(.22, 1, .36, 1);-webkit-touch-callout:none;touch-action:manipulation;-webkit-user-select:none;user-select:none}.long-press-hint{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.long-press-label{display:grid}.long-press-label>*{white-space:nowrap;grid-area:1/1}.long-press-label-fill{clip-path:inset(0 calc((1 - var(--progress)) * 100%) 0 0);color:var(--fill-color);transition:clip-path var(--progress-duration) var(--progress-timing-function)}.long-press[aria-disabled=true]{cursor:not-allowed;opacity:.5}.long-press[data-state=fired]{animation:long-press--pop var(--pop-duration) var(--pop-timing-function)}.long-press[data-state=holding]{translate:0 1px}@media (prefers-reduced-motion:reduce){.long-press[data-state=fired]{animation:none}.long-press-label-fill{transition:none}}@keyframes long-press--pop{50%{scale:var(--pop-scale)}}}
+/*$vite$:1*/

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

@@ -0,0 +1,20 @@
+import { type Attributes, type Renderable } from '@esportsplus/template';
+import './scss/index.scss';
+type Item = {
+    href?: string;
+    id?: string;
+    label: string;
+    mark?: () => Renderable<unknown>;
+};
+export default _default;
+declare function _default({ direction, gap, items, label, select, speed, state, ...attributes }: Attributes & {
+    direction?: 'left' | 'right';
+    gap?: number;
+    items: Item[];
+    label?: string;
+    select?: (item: Item) => void;
+    speed?: number;
+    state?: {
+        paused: boolean;
+    };
+}): DocumentFragment | Text;

package/build/components/marquee/index.js

@@ -0,0 +1,236 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import './scss/index.scss';
+const template_1hvk8592 = template_u1.template(`<span aria-hidden='true' class='marquee-mark'></span><span class='marquee-label'>`);
+const template_1hvk8596 = template_u1.template(`<a class='marquee-item marquee-item--link'>`);
+const template_1hvk8599 = template_u1.template(`<button class='marquee-item marquee-item--link' type='button'>`);
+const template_1hvk859c = template_u1.template(`<span class='marquee-item'>`);
+const template_1hvk859f = template_u1.template(`<section class='marquee'><div class='marquee-viewport'><div class='marquee-track'>`);
+const template_1hvk859j = template_u1.template(`<ul class='marquee-group'>`);
+const template_1hvk859m = template_u1.template(`<li>`);
+const template_1hvk859p = template_u1.template(`<ul aria-hidden='true' class='marquee-group marquee-group--copy'>`);
+const template_1hvk859s = template_u1.template(`<li><span class='marquee-item'>`);
+class ReactiveObject_1hvk8590 extends reactivity_u0.ReactiveObject {
+    #paused = this[reactivity_u0.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get paused() {
+        return reactivity_u0.read(this.#paused);
+    }
+    set paused(_v0) {
+        reactivity_u0.write(this.#paused, _v0);
+    }
+}
+const RAMP = 0.19;
+const SETTLE = 0.16;
+const MAX_COPIES = 14;
+const MIN_COPIES = 4;
+function clamp(x, min, max) {
+    return x < min ? min : x > max ? max : x;
+}
+function fold(x, loop) {
+    let m = x % loop;
+    return m > 0 ? m - loop : m;
+}
+export default ({ direction = 'left', gap = 40, items, label = 'Logos', select, speed = 44, state = new ReactiveObject_1hvk8590(), ...attributes }) => {
+    let cleanup = [], copies = reactivity_u0.reactive(Array.from({ length: MIN_COPIES }, (_, i) => i)), frame = 0, held = false, near = false, nudge = 0, offset = 0, rate = 0, reduced = false, sign = direction === 'right' ? 1 : -1, span = 0;
+    function face(item) {
+        if (!item.mark) {
+            return item.label;
+        }
+        return (() => {
+            let root_1hvk8591 = template_1hvk8592(), element_1hvk8593 = root_1hvk8591.firstChild, element_1hvk8594 = element_1hvk8593.nextSibling;
+            template_u1.slot(element_1hvk8593, item.mark(), 1);
+            template_u1.slot(element_1hvk8594, item.label, 1);
+            return root_1hvk8591;
+        })();
+    }
+    function link(item) {
+        if (item.href) {
+            return (() => {
+                let root_1hvk8595 = template_1hvk8596(), element_1hvk8597 = root_1hvk8595.firstChild;
+                template_u1.setProperty(element_1hvk8597, 'href', item.href);
+                template_u1.slot(element_1hvk8597, face(item), 1);
+                return root_1hvk8595;
+            })();
+        }
+        if (select) {
+            return (() => {
+                let root_1hvk8598 = template_1hvk8599(), element_1hvk859a = root_1hvk8598.firstChild;
+                template_u1.delegate(element_1hvk859a, 'click', () => select(item));
+                template_u1.slot(element_1hvk859a, face(item), 1);
+                return root_1hvk8598;
+            })();
+        }
+        return (() => {
+            let root_1hvk859b = template_1hvk859c(), element_1hvk859d = root_1hvk859b.firstChild;
+            template_u1.slot(element_1hvk859d, face(item), 1);
+            return root_1hvk859b;
+        })();
+    }
+    function listen(target, type, listener, options) {
+        target.addEventListener(type, listener, options);
+        cleanup.push(() => target.removeEventListener(type, listener, options));
+    }
+    return (() => {
+        let root_1hvk859e = template_1hvk859f(), element_1hvk859g = root_1hvk859e.firstChild, element_1hvk859h = element_1hvk859g.firstElementChild.firstElementChild;
+        template_u1.setProperty(element_1hvk859g, 'aria-label', label);
+        template_u1.setList(element_1hvk859g, 'style', template_u1.interpolate(["--item-gap: ", (gap), "px"]));
+        template_u1.setProperties(element_1hvk859g, attributes);
+        template_u1.onconnect(element_1hvk859g, (element) => {
+            let group = element.querySelector('.marquee-group:not(.marquee-group--copy)'), media = matchMedia('(prefers-reduced-motion: reduce)'), track = element.querySelector('.marquee-track'), viewport = element.querySelector('.marquee-viewport');
+            function measure() {
+                let width = group.getBoundingClientRect().width, loop = width > 0 ? width + parseFloat(getComputedStyle(track).columnGap) : 0, room = viewport.getBoundingClientRect().width;
+                span = loop;
+                offset = loop > 0 ? clamp(offset, -loop, loop) : 0;
+                paint();
+                let next = reduced || loop <= 0
+                    ? MIN_COPIES
+                    : clamp(Math.ceil(room / loop) + 3, MIN_COPIES, MAX_COPIES);
+                while (copies.$length < next) {
+                    copies.push(copies.$length);
+                }
+                if (copies.$length > next) {
+                    copies.splice(next);
+                }
+            }
+            function motion() {
+                reduced = media.matches;
+                if (reduced) {
+                    viewport.setAttribute('tabindex', '0');
+                }
+                else {
+                    viewport.removeAttribute('tabindex');
+                }
+                measure();
+                run();
+            }
+            function paint() {
+                track.style.transform = `translate3d(${(reduced ? 0 : offset - span).toFixed(2)}px, 0, 0)`;
+            }
+            function reveal(node) {
+                let loop = span;
+                if (reduced || loop <= 0 || node === viewport) {
+                    return;
+                }
+                let box = node.getBoundingClientRect(), delta = 0, pad = 12, view = viewport.getBoundingClientRect();
+                if (box.left < view.left + pad) {
+                    delta = view.left + pad - box.left;
+                }
+                else if (box.right > view.right - pad) {
+                    delta = view.right - pad - box.right;
+                }
+                if (delta !== 0) {
+                    nudge = clamp(offset + nudge + delta, -loop, loop) - offset;
+                }
+            }
+            function run() {
+                cancelAnimationFrame(frame);
+                frame = 0;
+                if (reduced || !near) {
+                    return;
+                }
+                let last = 0;
+                function tick(now) {
+                    frame = requestAnimationFrame(tick);
+                    let dt = last ? Math.min((now - last) / 1000, 0.05) : 0, loop = span;
+                    last = now;
+                    if (loop <= 0) {
+                        return;
+                    }
+                    rate += ((held || state.paused ? 0 : 1) - rate) * (1 - Math.exp(-dt / RAMP));
+                    let pull = nudge * (1 - Math.exp(-dt / SETTLE));
+                    nudge -= pull;
+                    let x = offset + sign * speed * rate * dt + pull;
+                    if (rate > 0.002 && Math.abs(nudge) < 0.25) {
+                        nudge = 0;
+                        x = fold(x, loop);
+                    }
+                    else {
+                        x = clamp(x, -loop, loop);
+                    }
+                    offset = x;
+                    paint();
+                }
+                frame = requestAnimationFrame(tick);
+            }
+            let resize = new ResizeObserver(measure);
+            resize.observe(viewport);
+            resize.observe(group);
+            cleanup.push(() => resize.disconnect());
+            if (typeof IntersectionObserver === 'undefined') {
+                near = true;
+            }
+            else {
+                let intersection = new IntersectionObserver((entries) => {
+                    let entry = entries[entries.length - 1];
+                    if (entry && entry.isIntersecting !== near) {
+                        near = entry.isIntersecting;
+                        run();
+                    }
+                }, { rootMargin: '96px' });
+                intersection.observe(viewport);
+                cleanup.push(() => intersection.disconnect());
+            }
+            listen(element, 'blur', () => held = false, true);
+            listen(element, 'focus', (e) => {
+                held = true;
+                reveal(e.target);
+            }, true);
+            listen(element, 'pointercancel', () => held = false);
+            listen(element, 'pointerdown', () => held = true);
+            listen(element, 'pointerenter', (e) => {
+                if (e.pointerType !== 'touch') {
+                    held = true;
+                }
+            });
+            listen(element, 'pointerleave', () => held = false);
+            listen(element, 'pointerup', (e) => {
+                if (e.pointerType === 'touch') {
+                    held = false;
+                }
+            });
+            listen(media, 'change', motion);
+            listen(viewport, 'scroll', () => {
+                if (reduced) {
+                    return;
+                }
+                viewport.scrollLeft = 0;
+                viewport.scrollTop = 0;
+            }, { passive: true });
+            listen(window, 'blur', () => held = false);
+            motion();
+        });
+        template_u1.ondisconnect(element_1hvk859g, () => {
+            cancelAnimationFrame(frame);
+            for (let i = 0, n = cleanup.length; i < n; i++) {
+                cleanup[i]();
+            }
+            cleanup.length = 0;
+        });
+        element_1hvk859h.appendChild(new template_u1.ArraySlot(copies, (copy) => {
+            if (copy === 1) {
+                return (() => {
+                    let root_1hvk859i = template_1hvk859j(), element_1hvk859k = root_1hvk859i.firstChild;
+                    template_u1.slot(element_1hvk859k, items.map((item) => {
+                        let root_1hvk859l = template_1hvk859m(), element_1hvk859n = root_1hvk859l.firstChild;
+                        template_u1.slot(element_1hvk859n, link(item), 1);
+                        return root_1hvk859l;
+                    }), 1);
+                    return root_1hvk859i;
+                })();
+            }
+            return (() => {
+                let root_1hvk859o = template_1hvk859p(), element_1hvk859q = root_1hvk859o.firstChild;
+                template_u1.slot(element_1hvk859q, items.map((item) => {
+                    let root_1hvk859r = template_1hvk859s(), element_1hvk859t = root_1hvk859r.firstChild.firstElementChild;
+                    template_u1.slot(element_1hvk859t, item.mark ? item.mark() : item.label, 1);
+                    return root_1hvk859r;
+                }), 1);
+                return root_1hvk859o;
+            })();
+        }, true).fragment);
+        return root_1hvk859e;
+    })();
+};

package/build/components/marquee/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.marquee{--color:var(--color-text-300);--color-hover:var(--color-text-400);--fade:var(--size-700);--focus-color:var(--color-blue-400);--font-size:var(--font-size-300);--font-weight:var(--font-weight-500);--item-border-radius:var(--border-radius-300);--item-gap:40px;--item-height:40px;--item-padding-horizontal:var(--size-300);--transition-duration:.15s}.marquee-viewport{--padding-vertical:var(--size-200)}.marquee{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);isolation:isolate;width:100%;min-width:0;max-width:100%;position:relative;overflow:hidden}.marquee-group{align-items:center;gap:var(--item-gap);width:max-content;margin:0;padding:0;list-style:none;display:flex}.marquee-group li{flex-shrink:0}.marquee-item{border-radius:var(--item-border-radius);color:inherit;align-items:center;gap:var(--size-200);height:var(--item-height);letter-spacing:-.01em;padding:0 var(--item-padding-horizontal);white-space:nowrap;flex-shrink:0;text-decoration:none;display:inline-flex}.marquee-item--link{cursor:pointer;font:inherit;transition:background-color var(--transition-duration), box-shadow var(--transition-duration), color var(--transition-duration);background:0 0;border:0;outline:none}.marquee-item--link:focus-visible{background:color-mix(in srgb, var(--focus-color) 8%, transparent);box-shadow:inset 0 0 0 1px var(--focus-color)}.marquee-item--link:focus-visible,.marquee-item--link:hover{color:var(--color-hover)}.marquee-label{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.marquee-mark{display:contents}.marquee-track{align-items:center;gap:var(--item-gap);will-change:transform;width:max-content;transition:none;display:flex}.marquee-viewport{-webkit-mask:linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);-webkit-mask:linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);mask:linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);padding:var(--padding-vertical) 0;outline:none;overflow:hidden}.marquee-viewport:focus-visible{box-shadow:inset 0 0 0 1px var(--focus-color)}@media (prefers-reduced-motion:reduce){.marquee-group--copy{display:none}.marquee-track{will-change:auto}.marquee-viewport{overflow-x:auto}}}
+/*$vite$:1*/

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

@@ -0,0 +1,24 @@
+import * as template_u1 from '@esportsplus/template';
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes<HTMLDialogElement> & {
+    oncancel?: never;
+    onclick?: never;
+    onclose?: never;
+    onconnect?: never;
+    ondisconnect?: never;
+    state?: {
+        active: boolean;
+    };
+};
+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/modal/index.js

@@ -0,0 +1,75 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect } from '@esportsplus/reactivity';
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import './scss/index.scss';
+const template_1o5sgxu2 = template_u1.template(`<dialog class='modal'>`);
+class ReactiveObject_1o5sgxu0 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);
+    }
+}
+async function finished(element) {
+    let animations = element.getAnimations();
+    for (let i = 0, n = animations.length; i < n; i++) {
+        await animations[i].finished.catch(() => { });
+    }
+}
+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;
+}
+export default component(function ({ state = new ReactiveObject_1o5sgxu0(), ...attributes }, content) {
+    let stop;
+    return (() => {
+        let root_1o5sgxu1 = template_1o5sgxu2(), element_1o5sgxu3 = root_1o5sgxu1.firstChild;
+        template_u1.setProperties(element_1o5sgxu3, this?.attributes);
+        template_u1.setProperties(element_1o5sgxu3, attributes);
+        template_u1.on(element_1o5sgxu3, 'cancel', (e) => {
+            e.preventDefault();
+            state.active = false;
+        });
+        template_u1.delegate(element_1o5sgxu3, 'click', (e) => {
+            let element = e.currentTarget;
+            if (e.target === element && outside(element, e)) {
+                state.active = false;
+            }
+        });
+        template_u1.on(element_1o5sgxu3, 'close', () => {
+            state.active = false;
+        });
+        template_u1.onconnect(element_1o5sgxu3, (element) => {
+            stop = effect(() => {
+                if (state.active) {
+                    if (!element.open) {
+                        element.showModal();
+                        element.getBoundingClientRect();
+                    }
+                    element.classList.add('--active');
+                    return;
+                }
+                element.classList.remove('--active');
+                if (!element.open) {
+                    return;
+                }
+                void finished(element).then(() => {
+                    if (!state.active) {
+                        element.close();
+                    }
+                });
+            });
+        });
+        template_u1.ondisconnect(element_1o5sgxu3, () => {
+            stop?.();
+        });
+        template_u1.slot(element_1o5sgxu3, content, 1);
+        return root_1o5sgxu1;
+    })();
+});

package/build/components/modal/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.modal{--margin-horizontal:0px;--margin-vertical:0px;--max-width:480px;--translateY:var(--margin-vertical);transition:opacity var(--transition-duration) var(--transition-timing-function), transform var(--transition-duration) var(--transition-timing-function);transform-origin:50%;width:min(var(--max-width), 100% - var(--margin-horizontal) * 2);z-index:9;margin:auto}.modal:not(.--active){opacity:0;pointer-events:none;transform:translateY(var(--translateY))}.modal:not(.--active) input[type=password]{display:none}.modal-frame{transition:opacity var(--transition-duration) var(--transition-timing-function), transform var(--transition-duration) var(--transition-timing-function);transform-origin:50%}.modal-frame:not(.--active){display:none}}
+@layer components {.modal{--backdrop:color-mix(in srgb, var(--color-black-500) 64%, transparent);--margin-horizontal:0px;--margin-vertical:0px;--max-width:480px;--scale:1;--translateY:var(--margin-vertical)}.modal--alert{--backdrop:#0000001a;--blur:4px;--scale:.95;--transition-duration:.1s;--transition-timing-function:ease;--translateY:0px}.modal--blur{--backdrop:color-mix(in srgb, var(--color-black-500) 32%, transparent);--blur:8px}.modal--fade{--translateY:0px}.modal--scale{--scale:.92;--translateY:0px}.modal--sheet{--translateY:100%}.modal--spring{--scale:.8;--transition-timing-function:cubic-bezier(.34, 1.56, .64, 1);--translateY:0px}:where(dialog.modal){color:inherit;background:0 0;border:0;max-width:100%;max-height:100%;padding:0}dialog.modal{position:fixed}.modal{transition:opacity var(--transition-duration) var(--transition-timing-function), scale 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}.modal:not(.--active){opacity:0;pointer-events:none;scale:var(--scale);translate:0 var(--translateY)}.modal:not(.--active)::backdrop{opacity:0}.modal:not(.--active) input[type=password]{display:none}.modal::backdrop{background:var(--backdrop);transition:opacity var(--transition-duration) var(--transition-timing-function)}.modal--alert::backdrop,.modal--blur::backdrop{-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}.modal--sheet{transform-origin:bottom;margin-block-end:0}.modal--sheet:not(.--active){opacity:1}.modal-frame{transition:opacity var(--transition-duration) var(--transition-timing-function), transform var(--transition-duration) var(--transition-timing-function);transform-origin:50%}.modal-frame:not(.--active){display:none}@media (prefers-reduced-motion:reduce){.modal,.modal::backdrop{transition:none}}}
 /*$vite$:1*/

package/build/components/morphing-button/index.d.ts

@@ -0,0 +1,24 @@
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    [MORPHING_BUTTON_CONTENT]?: Attributes;
+    label?: string;
+    onclick?: never;
+    onconnect?: never;
+    ondisconnect?: never;
+    onsave: () => Promise<unknown>;
+    retryLabel?: string;
+    state?: State;
+    successFor?: number;
+};
+type State = {
+    status: Status;
+};
+type Status = 'error' | 'idle' | 'loading' | 'success';
+declare const MORPHING_BUTTON_CONTENT: unique symbol;
+declare const _default: ((this: {
+    attributes?: Partial<A>;
+} | void, { label, onsave, retryLabel, state, successFor, ...attributes }: A) => DocumentFragment | Text) & {
+    readonly content: typeof MORPHING_BUTTON_CONTENT;
+};
+export default _default;

package/build/components/morphing-button/index.js

@@ -0,0 +1,127 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect } from '@esportsplus/reactivity';
+import './scss/index.scss';
+const template_08xfa8m2 = template_u1.template(`<button class='button morphing-button' type='button'><span aria-hidden='true' class='morphing-button-content'><span class='morphing-button-text morphing-button-text--idle'></span><span class='morphing-button-text morphing-button-text--error'></span><svg class='morphing-button-icon morphing-button-icon--loading' viewBox='0 0 16 16'><g class='morphing-button-spinner'><circle cx='8' cy='8' r='6' opacity='0.25' /><path d='M8 2a6 6 0 0 1 6 6' /></g></svg><svg class='morphing-button-icon morphing-button-icon--success' viewBox='0 0 16 16'><path d='m3.5 8.5 3 3 6-7' /></svg></span><span aria-live='polite' class='morphing-button-live'>`);
+class ReactiveObject_08xfa8m0 extends reactivity_u0.ReactiveObject {
+    #status;
+    constructor(_p0) {
+        super(null);
+        this.#status = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get status() {
+        return reactivity_u0.read(this.#status);
+    }
+    set status(_v0) {
+        reactivity_u0.write(this.#status, _v0);
+    }
+}
+const ANNOUNCE = {
+    error: 'Couldn\'t save. Try again.',
+    idle: '',
+    loading: 'Saving',
+    success: 'Changes saved'
+};
+const MORPHING_BUTTON_CONTENT = Symbol.for('@esportsplus/ui/morphing-button.content');
+const SHAKE = [
+    { translate: '0' },
+    { translate: '-6px' },
+    { translate: '5px' },
+    { translate: '-3px' },
+    { translate: '2px' },
+    { translate: '0' }
+];
+const SPRING = 'linear(0, 0.057, 0.18, 0.321, 0.455, 0.573, 0.671, 0.75, 0.812, 0.86, 0.896, 0.924, 0.944, 0.96, 0.971, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1)';
+function busy(status) {
+    return status === 'loading' || status === 'success';
+}
+function reduced() {
+    return matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+export default Object.assign(function ({ label = 'Save changes', onsave, retryLabel = 'Try again', state = new ReactiveObject_08xfa8m0('idle'), successFor = 1500, ...attributes }) {
+    let attempt = 0, morph, reset, shake, stop;
+    function resize(element, compact) {
+        let from = getComputedStyle(element).width;
+        morph?.cancel();
+        element.style.width = compact ? 'var(--morphing-button-height)' : '';
+        if (reduced()) {
+            return;
+        }
+        morph = element.animate([{ width: from }, { width: getComputedStyle(element).width }], { duration: 300, easing: SPRING });
+    }
+    async function save() {
+        if (busy(state.status)) {
+            return;
+        }
+        let element = this, id = ++attempt;
+        clearTimeout(reset);
+        shake?.cancel();
+        state.status = 'loading';
+        try {
+            await onsave();
+            if (id !== attempt) {
+                return;
+            }
+            state.status = 'success';
+            reset = setTimeout(() => {
+                state.status = 'idle';
+            }, successFor);
+        }
+        catch {
+            if (id !== attempt) {
+                return;
+            }
+            state.status = 'error';
+            if (reduced()) {
+                return;
+            }
+            shake = element.animate(SHAKE, { delay: 150, duration: 350, easing: 'ease-in-out' });
+        }
+    }
+    return (() => {
+        let root_08xfa8m1 = template_08xfa8m2(), element_08xfa8m3 = root_08xfa8m1.firstChild, element_08xfa8m4 = element_08xfa8m3.firstElementChild, element_08xfa8m5 = element_08xfa8m4.firstElementChild, element_08xfa8m6 = element_08xfa8m5.nextElementSibling, element_08xfa8m7 = element_08xfa8m4.nextElementSibling;
+        template_u1.setProperties(element_08xfa8m3, this?.attributes);
+        template_u1.setProperties(element_08xfa8m3, attributes);
+        template_u1.setProperty(element_08xfa8m3, 'aria-disabled', () => busy(state.status) ? 'true' : 'false');
+        template_u1.setProperty(element_08xfa8m3, 'aria-label', () => {
+            switch (state.status) {
+                case 'error':
+                    return retryLabel;
+                case 'loading':
+                    return 'Saving';
+                case 'success':
+                    return 'Saved';
+                default:
+                    return label;
+            }
+        });
+        template_u1.setList(element_08xfa8m3, 'class', () => `morphing-button--${state.status}`);
+        template_u1.delegate(element_08xfa8m3, 'click', save);
+        template_u1.onconnect(element_08xfa8m3, (element) => {
+            let compact = busy(state.status);
+            if (compact) {
+                element.style.width = 'var(--morphing-button-height)';
+            }
+            stop = effect(() => {
+                let next = busy(state.status);
+                if (next !== compact) {
+                    compact = next;
+                    resize(element, next);
+                }
+            });
+        });
+        template_u1.ondisconnect(element_08xfa8m3, () => {
+            attempt++;
+            clearTimeout(reset);
+            morph?.cancel();
+            shake?.cancel();
+            stop?.();
+        });
+        template_u1.setProperties(element_08xfa8m4, this?.attributes?.[MORPHING_BUTTON_CONTENT]);
+        template_u1.setProperties(element_08xfa8m4, attributes[MORPHING_BUTTON_CONTENT]);
+        template_u1.slot(element_08xfa8m5, label, 1);
+        template_u1.slot(element_08xfa8m6, retryLabel, 1);
+        new template_u1.EffectSlot(element_08xfa8m7, () => ANNOUNCE[state.status], 1);
+        return root_08xfa8m1;
+    })();
+}, { content: MORPHING_BUTTON_CONTENT });

package/build/components/morphing-button/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.morphing-button{--border-radius:999px;--morphing-button-background:var(--color-text-500);--morphing-button-background-error:var(--color-red-500);--morphing-button-color:var(--color-white-300);--morphing-button-color-error:var(--color-white-300);--morphing-button-ease:cubic-bezier(.23, 1, .32, 1);--morphing-button-focus-color:color-mix(in oklab, var(--color-text-500) 38%, transparent);--morphing-button-font-size:14px;--morphing-button-height:40px;--morphing-button-icon-size:16px;--morphing-button-scale-pressed:.96;--morphing-button-spring:linear(0, .057, .18, .321, .455, .573, .671, .75, .812, .86, .896, .924, .944, .96, .971, .979, .985, .989, .992, .994, .996, .997, .998, .999, 1);--padding-horizontal:20px;--padding-vertical:0px}.morphing-button--blue{--morphing-button-background:var(--color-blue-400)}.morphing-button.button{--background-default:var(--morphing-button-background);--color-default:var(--morphing-button-color);--font-size:var(--morphing-button-font-size);--font-weight:var(--font-weight-500);--line-height:20px;height:var(--morphing-button-height);touch-action:manipulation;-webkit-user-select:none;user-select:none;border:0;outline:none;transition:background-color .2s ease-out,color .2s ease-out,scale .2s ease-out;display:inline-flex;overflow:hidden}.morphing-button:active:not([aria-disabled=true]){scale:var(--morphing-button-scale-pressed)}.morphing-button:focus-visible{outline:2px solid var(--morphing-button-focus-color);outline-offset:2px}.morphing-button[aria-disabled=true]{cursor:default}.morphing-button-content{flex-shrink:0;place-items:center;display:grid}.morphing-button-icon{fill:none;filter:blur(4px);height:var(--morphing-button-icon-size);opacity:0;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;transition:filter .3s var(--morphing-button-spring), opacity .3s var(--morphing-button-spring), scale .3s var(--morphing-button-spring);width:var(--morphing-button-icon-size);grid-area:1/1;scale:.25}.morphing-button-live{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.morphing-button-spinner{transform-box:fill-box;transform-origin:50%;animation:.7s linear infinite morphing-button-spin}.morphing-button-text{filter:blur(4px);opacity:0;white-space:nowrap;grid-area:1/1;transition:filter .15s ease-out,opacity .15s ease-out}.morphing-button--error.button{--background-default:var(--morphing-button-background-error);--color-default:var(--morphing-button-color-error)}.morphing-button--error .morphing-button-text--error,.morphing-button--idle .morphing-button-text--idle{filter:blur();opacity:1;transition-duration:.2s}.morphing-button--loading .morphing-button-icon--loading,.morphing-button--success .morphing-button-icon--success{filter:blur();opacity:1;scale:1}@media (prefers-reduced-motion:reduce){.morphing-button.button{transition:background-color .2s ease-out,color .2s ease-out}.morphing-button:active:not([aria-disabled=true]){scale:1}.morphing-button .morphing-button-icon{filter:none;transition-property:opacity;scale:1}}@keyframes morphing-button-spin{to{rotate:360deg}}}
+/*$vite$:1*/

package/build/components/morphing-nav/index.d.ts

@@ -0,0 +1,38 @@
+import { type Attributes, type Renderable } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    [MORPHING_NAV_LINK]?: Attributes;
+    [MORPHING_NAV_PANEL]?: Attributes;
+    [MORPHING_NAV_TRIGGER]?: Attributes;
+    action?: Renderable<unknown>;
+    brand?: Renderable<unknown>;
+    label?: string;
+    onnavigate?: (link: Link, section: Section) => void;
+    sections: Section[];
+    state?: State;
+};
+type Link = {
+    description: string;
+    href?: string;
+    icon: Renderable<unknown>;
+    title: string;
+};
+type Section = {
+    columns?: 1 | 2;
+    label: string;
+    links: Link[];
+};
+type State = {
+    active: number;
+};
+declare const MORPHING_NAV_LINK: unique symbol;
+declare const MORPHING_NAV_PANEL: unique symbol;
+declare const MORPHING_NAV_TRIGGER: unique symbol;
+declare const morphingNav: ({ action, brand, label, onnavigate, sections, state, ...attributes }: A) => DocumentFragment | Text;
+declare const _default: typeof morphingNav & {
+    readonly link: typeof MORPHING_NAV_LINK;
+    readonly panel: typeof MORPHING_NAV_PANEL;
+    readonly trigger: typeof MORPHING_NAV_TRIGGER;
+};
+export default _default;
+export type { Link, Section, State };