@esportsplus/ui 0.56.4 → 0.57.0

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

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

@@ -1,2 +0,0 @@
-@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/modal/index.d.ts

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

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

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

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

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

@@ -1,38 +0,0 @@
-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 };

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

@@ -1,342 +0,0 @@
-import * as template_u1 from '@esportsplus/template';
-import { on } from '@esportsplus/template';
-import * as reactivity_u0 from '@esportsplus/reactivity';
-import { effect, onCleanup } from '@esportsplus/reactivity';
-import './scss/index.scss';
-const template_0v1vh5x2 = template_u1.template(`<nav class='morphing-nav'><div class='morphing-nav-bar'><!--$--><ul class='morphing-nav-list'></ul></div><div class='morphing-nav-popover'><div aria-hidden='true' class='morphing-nav-bridge'></div><svg aria-hidden='true' class='morphing-nav-caret' height='9' viewBox='0 0 16 9' width='16'><path d='M0 9 8 1l8 8' stroke-width='1' /></svg><div class='morphing-nav-panel'>`);
-const template_0v1vh5xa = template_u1.template(`<div class='morphing-nav-brand'>`);
-const template_0v1vh5xd = template_u1.template(`<li><button class='morphing-nav-trigger' type='button'><!--$--><svg aria-hidden='true' class='morphing-nav-chevron' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 12 12'><path d='m3 4.75 3 3 3-3' />`);
-const template_0v1vh5xh = template_u1.template(`<div class='morphing-nav-action'>`);
-const template_0v1vh5xk = template_u1.template(`<div class='morphing-nav-section '><ul class='morphing-nav-links'>`);
-const template_0v1vh5xo = template_u1.template(`<li><a class='morphing-nav-link'><span class='morphing-nav-icon'></span><span class='morphing-nav-text'><span class='morphing-nav-title'></span><span class='morphing-nav-description'>`);
-class ReactiveObject_0v1vh5x0 extends reactivity_u0.ReactiveObject {
-    #active = this[reactivity_u0.SIGNAL](-1);
-    constructor() {
-        super(null);
-    }
-    get active() {
-        return reactivity_u0.read(this.#active);
-    }
-    set active(_v0) {
-        reactivity_u0.write(this.#active, _v0);
-    }
-}
-const CARET = 16;
-const CARET_INSET = 12;
-const CLOSE_GRACE = 180;
-const EASE_OUT = 'cubic-bezier(0.23, 1, 0.32, 1)';
-const MORPHING_NAV_LINK = Symbol.for('@esportsplus/ui/morphing-nav.link');
-const MORPHING_NAV_PANEL = Symbol.for('@esportsplus/ui/morphing-nav.panel');
-const MORPHING_NAV_TRIGGER = Symbol.for('@esportsplus/ui/morphing-nav.trigger');
-const OPEN_INTENT = 80;
-const SLIDE = 48;
-let uid = 0;
-function reduced() {
-    return matchMedia('(prefers-reduced-motion: reduce)').matches;
-}
-const morphingNav = ({ action, brand, label = 'Main', onnavigate, sections, state, ...attributes }) => {
-    let after, closeTimer, current = -1, id = `morphing-nav-${++uid}`, layers = [], nav, observer, openTimer, panel, popover, running = new Map(), s = state ?? new ReactiveObject_0v1vh5x0(), triggers = [];
-    function animate(layer, keyframes, duration) {
-        running.get(layer)?.cancel();
-        running.set(layer, layer.animate(keyframes, { duration, easing: EASE_OUT }));
-    }
-    function center(index) {
-        let box = triggers[index]?.getBoundingClientRect(), rect = nav?.getBoundingClientRect();
-        return box && rect ? box.left - rect.left + box.width / 2 : 0;
-    }
-    function close(refocus = false) {
-        clearTimeout(openTimer);
-        clearTimeout(closeTimer);
-        let previous = current;
-        if (previous === -1) {
-            return;
-        }
-        current = -1;
-        s.active = -1;
-        popover?.classList.remove('--active');
-        if (refocus) {
-            triggers[previous]?.focus();
-        }
-    }
-    function links() {
-        return current === -1 ? [] : [...(layers[current]?.querySelectorAll('a') ?? [])];
-    }
-    function open(index) {
-        clearTimeout(openTimer);
-        clearTimeout(closeTimer);
-        let previous = current;
-        if (previous === index || !sections[index]) {
-            return;
-        }
-        current = index;
-        s.active = index;
-        swap(previous, index);
-        place(previous === -1);
-    }
-    function place(fresh) {
-        if (!nav || !panel || !popover || current === -1) {
-            return;
-        }
-        let layer = layers[current], max = nav.offsetWidth;
-        panel.style.setProperty('--nav-width', `${max}px`);
-        let middle = center(current), width = Math.min(layer.offsetWidth, max), x = Math.max(0, Math.min(middle - width / 2, max - width)), caret = Math.max(CARET_INSET, Math.min(middle - x - CARET / 2, width - CARET - CARET_INSET)), element = popover, style = element.style, update = () => {
-            style.height = `${layer.offsetHeight}px`;
-            style.setProperty('--caret-x', `${caret}px`);
-            style.transformOrigin = `${caret + CARET / 2}px 0`;
-            style.translate = `${x}px 0`;
-            style.width = `${width}px`;
-        };
-        if (!fresh) {
-            update();
-            return;
-        }
-        element.classList.add('--opening');
-        update();
-        element.getBoundingClientRect();
-        element.classList.remove('--opening');
-        element.classList.add('--active');
-    }
-    function swap(previous, next) {
-        let dir = next > previous ? 1 : -1, incoming = layers[next], outgoing = previous === -1 ? undefined : layers[previous], reduce = reduced();
-        for (let i = 0, n = layers.length; i < n; i++) {
-            let layer = layers[i];
-            if (layer === incoming || layer === outgoing) {
-                continue;
-            }
-            running.get(layer)?.cancel();
-            layer.classList.remove('--active');
-            layer.inert = true;
-        }
-        if (outgoing) {
-            outgoing.classList.remove('--active');
-            outgoing.inert = true;
-            animate(outgoing, reduce
-                ? [{ opacity: 1, visibility: 'visible' }, { opacity: 0, visibility: 'visible' }]
-                : [
-                    { filter: 'blur(0px)', opacity: 1, translate: '0 0', visibility: 'visible' },
-                    { filter: 'blur(4px)', opacity: 0, translate: `${-dir * SLIDE}px 0`, visibility: 'visible' }
-                ], reduce ? 150 : 180);
-        }
-        if (!incoming) {
-            return;
-        }
-        incoming.classList.add('--active');
-        incoming.inert = false;
-        if (!outgoing) {
-            running.get(incoming)?.cancel();
-            return;
-        }
-        animate(incoming, reduce
-            ? [{ opacity: 0 }, { opacity: 1 }]
-            : [
-                { filter: 'blur(4px)', opacity: 0, translate: `${dir * SLIDE}px 0` },
-                { filter: 'blur(0px)', opacity: 1, translate: '0 0' }
-            ], reduce ? 200 : 250);
-    }
-    function trigger(index, e) {
-        let key = e.key;
-        if (key === 'ArrowDown') {
-            e.preventDefault();
-            open(index);
-            links()[0]?.focus();
-        }
-        else if (key === 'ArrowLeft' || key === 'ArrowRight') {
-            let n = triggers.length;
-            e.preventDefault();
-            triggers[(index + (key === 'ArrowRight' ? 1 : -1) + n) % n]?.focus();
-        }
-        else if (key === 'Escape' && current !== -1) {
-            e.preventDefault();
-            close();
-        }
-        else if (key === 'Tab' && !e.shiftKey && current === index) {
-            let first = links()[0];
-            if (first) {
-                e.preventDefault();
-                first.focus();
-            }
-        }
-    }
-    let stop = effect(() => s.active, (active) => {
-        if (active === current) {
-            return;
-        }
-        if (active === -1) {
-            close();
-        }
-        else {
-            open(active);
-        }
-    });
-    onCleanup(() => {
-        clearTimeout(closeTimer);
-        clearTimeout(openTimer);
-        observer?.disconnect();
-        stop();
-        for (let animation of running.values()) {
-            animation.cancel();
-        }
-    });
-    return (() => {
-        let root_0v1vh5x1 = template_0v1vh5x2(), element_0v1vh5x3 = root_0v1vh5x1.firstChild, element_0v1vh5x4 = element_0v1vh5x3.firstElementChild.firstChild, element_0v1vh5x5 = element_0v1vh5x3.firstElementChild.firstElementChild, element_0v1vh5x6 = element_0v1vh5x3.firstElementChild, element_0v1vh5x7 = element_0v1vh5x6.nextElementSibling, element_0v1vh5x8 = element_0v1vh5x7.firstElementChild.nextElementSibling.nextElementSibling;
-        template_u1.setProperties(element_0v1vh5x3, attributes);
-        template_u1.setProperty(element_0v1vh5x3, 'aria-label', label);
-        template_u1.ondocument(element_0v1vh5x3, 'pointerdown', (e) => {
-            if (current !== -1 && nav && !nav.contains(e.target)) {
-                close();
-            }
-        });
-        template_u1.onconnect(element_0v1vh5x3, (element) => {
-            nav = element;
-            observer = new ResizeObserver(() => place(false));
-            observer.observe(element);
-        });
-        template_u1.on(element_0v1vh5x3, 'focusout', (e) => {
-            if (!e.currentTarget.contains(e.relatedTarget)) {
-                close();
-            }
-        });
-        template_u1.on(element_0v1vh5x3, 'pointerenter', (e) => {
-            if (e.pointerType !== 'touch') {
-                clearTimeout(closeTimer);
-            }
-        });
-        template_u1.on(element_0v1vh5x3, 'pointerleave', (e) => {
-            if (e.pointerType === 'touch') {
-                return;
-            }
-            clearTimeout(openTimer);
-            if (current !== -1) {
-                clearTimeout(closeTimer);
-                closeTimer = setTimeout(() => close(), CLOSE_GRACE);
-            }
-        });
-        template_u1.slot(element_0v1vh5x4, brand && (() => {
-            let root_0v1vh5x9 = template_0v1vh5xa(), element_0v1vh5xb = root_0v1vh5x9.firstChild;
-            template_u1.slot(element_0v1vh5xb, brand, 1);
-            return root_0v1vh5x9;
-        })());
-        template_u1.slot(element_0v1vh5x5, sections.map((section, index) => {
-            let root_0v1vh5xc = template_0v1vh5xd(), element_0v1vh5xe = root_0v1vh5xc.firstChild.firstElementChild, element_0v1vh5xf = element_0v1vh5xe.firstChild;
-            template_u1.setProperties(element_0v1vh5xe, attributes[MORPHING_NAV_TRIGGER]);
-            template_u1.setProperty(element_0v1vh5xe, 'aria-controls', () => s.active === index && `${id}-panel`);
-            template_u1.setProperty(element_0v1vh5xe, 'aria-expanded', () => String(s.active === index));
-            template_u1.setList(element_0v1vh5xe, 'class', () => s.active === index && '--active');
-            template_u1.delegate(element_0v1vh5xe, 'click', (e) => {
-                if (current === index && (e.detail === 0 || e.pointerType === 'touch')) {
-                    close();
-                }
-                else {
-                    open(index);
-                }
-            });
-            template_u1.on(element_0v1vh5xe, 'focus', () => {
-                if (current !== -1 && current !== index) {
-                    open(index);
-                }
-            });
-            template_u1.delegate(element_0v1vh5xe, 'keydown', (e) => trigger(index, e));
-            template_u1.on(element_0v1vh5xe, 'pointerenter', (e) => {
-                if (e.pointerType === 'touch') {
-                    return;
-                }
-                clearTimeout(openTimer);
-                if (current !== -1) {
-                    open(index);
-                }
-                else {
-                    openTimer = setTimeout(() => open(index), OPEN_INTENT);
-                }
-            });
-            template_u1.on(element_0v1vh5xe, 'pointerleave', () => {
-                if (current === -1) {
-                    clearTimeout(openTimer);
-                }
-            });
-            template_u1.onrender(element_0v1vh5xe, (element) => {
-                triggers[index] = element;
-            });
-            template_u1.slot(element_0v1vh5xf, section.label);
-            return root_0v1vh5xc;
-        }), 1);
-        template_u1.slot(element_0v1vh5x6, action && (() => {
-            let root_0v1vh5xg = template_0v1vh5xh(), element_0v1vh5xi = root_0v1vh5xg.firstChild;
-            template_u1.onrender(element_0v1vh5xi, (element) => { after = element; });
-            template_u1.slot(element_0v1vh5xi, action, 1);
-            return root_0v1vh5xg;
-        })(), 2);
-        template_u1.onrender(element_0v1vh5x7, (element) => { popover = element; });
-        template_u1.setProperty(element_0v1vh5x8, 'id', template_u1.interpolate([(id), "-panel"]));
-        template_u1.setProperties(element_0v1vh5x8, attributes[MORPHING_NAV_PANEL]);
-        template_u1.delegate(element_0v1vh5x8, 'keydown', (e) => {
-            if (current === -1) {
-                return;
-            }
-            let list = links(), at = list.indexOf(document.activeElement), key = e.key;
-            if (key === 'Escape') {
-                e.preventDefault();
-                close(true);
-            }
-            else if (key === 'ArrowDown' || key === 'ArrowUp') {
-                let n = list.length;
-                e.preventDefault();
-                list[(at + (key === 'ArrowDown' ? 1 : -1) + n) % n]?.focus();
-            }
-            else if (key === 'Tab' && e.shiftKey && at === 0) {
-                e.preventDefault();
-                triggers[current]?.focus();
-            }
-            else if (key === 'Tab' && !e.shiftKey && at === list.length - 1) {
-                let next = triggers[current + 1], target = after?.querySelector('a, button');
-                if (next) {
-                    e.preventDefault();
-                    next.focus();
-                }
-                else if (target) {
-                    e.preventDefault();
-                    close();
-                    target.focus();
-                }
-                else {
-                    close();
-                }
-            }
-        });
-        template_u1.onrender(element_0v1vh5x8, (element) => {
-            panel = element;
-        });
-        template_u1.slot(element_0v1vh5x8, sections.map((section, index) => {
-            let root_0v1vh5xj = template_0v1vh5xk(), element_0v1vh5xl = root_0v1vh5xj.firstChild, element_0v1vh5xm = element_0v1vh5xl.firstElementChild;
-            template_u1.setList(element_0v1vh5xl, 'class', section.columns === 2 && 'morphing-nav-section--columns');
-            template_u1.setProperty(element_0v1vh5xl, 'data-section', index);
-            template_u1.onrender(element_0v1vh5xl, (element) => {
-                element.inert = true;
-                layers[index] = element;
-            });
-            template_u1.slot(element_0v1vh5xm, section.links.map((link) => {
-                let root_0v1vh5xn = template_0v1vh5xo(), element_0v1vh5xp = root_0v1vh5xn.firstChild.firstElementChild, element_0v1vh5xq = element_0v1vh5xp.firstElementChild, element_0v1vh5xr = element_0v1vh5xq.nextElementSibling.firstElementChild, element_0v1vh5xs = element_0v1vh5xr.nextElementSibling;
-                template_u1.setProperty(element_0v1vh5xp, 'href', link.href ?? '#');
-                template_u1.setProperties(element_0v1vh5xp, attributes[MORPHING_NAV_LINK]);
-                template_u1.delegate(element_0v1vh5xp, 'click', () => close());
-                template_u1.onrender(element_0v1vh5xp, (element) => {
-                    on(element, 'click', (e) => {
-                        if (onnavigate) {
-                            e.preventDefault();
-                            onnavigate(link, section);
-                        }
-                        else if (!link.href) {
-                            e.preventDefault();
-                        }
-                    });
-                });
-                template_u1.slot(element_0v1vh5xq, link.icon, 1);
-                template_u1.slot(element_0v1vh5xr, link.title, 1);
-                template_u1.slot(element_0v1vh5xs, link.description, 1);
-                return root_0v1vh5xn;
-            }), 1);
-            return root_0v1vh5xj;
-        }), 1);
-        return root_0v1vh5x1;
-    })();
-};
-export default Object.assign(morphingNav, { link: MORPHING_NAV_LINK, panel: MORPHING_NAV_PANEL, trigger: MORPHING_NAV_TRIGGER });