@moni-labs/moni-ui 0.2.0

package/dist/components/moni-morph-modal.js

@@ -0,0 +1,1223 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var MoniMorphModal_1;
+import { html, css } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+import { gsap } from 'gsap';
+import { Flip } from 'gsap/Flip';
+import { CustomEase } from 'gsap/CustomEase';
+import './moni-icon.js';
+gsap.registerPlugin(Flip, CustomEase);
+CustomEase.create('morph-open', '0.15, 0.85, 0.2, 1');
+CustomEase.create('morph-close', '0.4, 0, 0.2, 1');
+/**
+ * Morph-modal: abre un panel Material Design 3 a partir de cualquier elemento
+ * del DOM usando una animación FLIP (First / Last / Invert / Play) con GSAP.
+ *
+ * El elemento disparador (`target`) no se modifica estructuralmente; solo se
+ * lee su rectángulo y estilos computados para hacer coincidir el punto inicial
+ * de la morph-animation. El contenido del panel se declara dentro del propio
+ * componente, de forma recursiva: dentro de un `<moni-morph-modal>` abierto se
+ * puede declarar otro `<moni-morph-modal>` apuntando a un botón interior.
+ *
+ * Attributes:
+ *  - target:               selector CSS del elemento disparador.
+ *  - open:                 estado abierto/cerrado (reflejado).
+ *  - modal:                si se muestra fondo oscuro (scrim).
+ *  - placement:            posición final del panel expandido.
+ *  - expanded-width:       ancho del panel (px, rem, %, vw).
+ *  - expanded-height:      alto del panel (px, rem, %, vh).
+ *  - close-on-click-outside: cierra al clicar fuera.
+ *  - close-on-esc:         cierra con Escape.
+ *  - show-close-button:    muestra una “X” en el header.
+ *  - morph-label:          anima el label/icono del target hacia el header.
+ *  - morph-label-selector: selector dentro del target para targets arbitrarios.
+ *
+ * Slots:
+ *  - default: cuerpo del panel.
+ *  - header:  encabezado.
+ *  - footer:  acciones al pie.
+ *  - trigger-label: contenido explícito a animar desde el target.
+ */
+const litBool = {
+    fromAttribute: (value) => value !== 'false' && value !== null,
+    toAttribute: (value) => (value ? '' : null)
+};
+let MoniMorphModal = class MoniMorphModal extends MoniElement {
+    constructor() {
+        super(...arguments);
+        this.target = '';
+        this.open = false;
+        this.modal = true;
+        this.placement = 'center';
+        this.expandedWidth = '22rem';
+        this.expandedHeight = '18rem';
+        this.closeOnClickOutside = true;
+        this.closeOnEsc = true;
+        this.showCloseButton = false;
+        this.morphLabel = false;
+        this.morphLabelSelector = '';
+        this.hasBackdrop = true;
+        this.hideTarget = false;
+        this.coverTarget = false;
+        this._hasHeader = false;
+        this._hasFooter = false;
+        this._hasTriggerLabel = false;
+        this._targetEl = null;
+        this._isAnimating = false;
+        this._visible = false;
+        this._handlingOpenChange = false;
+        this._zIndex = 100;
+        this._morphEls = { text: null, icon: null };
+        this._targetStylesCache = new Map();
+        this._onTargetClick = () => this.show();
+        this._onDocKeydown = (e) => this._handleDocKeydown(e);
+        this._onDocClick = (e) => {
+            if (!this.open || !this._visible || !this.closeOnClickOutside)
+                return;
+            if (e.composedPath().includes(this._panel))
+                return;
+            if (this._targetEl && e.composedPath().includes(this._targetEl))
+                return;
+            this.hide();
+        };
+    }
+    static { MoniMorphModal_1 = this; }
+    static { this._openStack = []; }
+    connectedCallback() {
+        super.connectedCallback();
+        this._resolveTarget();
+        document.addEventListener('keydown', this._onDocKeydown);
+        document.addEventListener('click', this._onDocClick);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('keydown', this._onDocKeydown);
+        document.removeEventListener('click', this._onDocClick);
+        if (this._targetEl) {
+            this._targetEl.removeEventListener('click', this._onTargetClick);
+        }
+        const idx = MoniMorphModal_1._openStack.indexOf(this);
+        if (idx > -1)
+            MoniMorphModal_1._openStack.splice(idx, 1);
+        this.style.removeProperty('z-index');
+        this.style.removeProperty('--_z-index');
+        this.style.removeProperty('--_backdrop-duration');
+        this.style.removeProperty('--_backdrop-ease');
+        this._cleanupMorphElements();
+        this._restoreTargetContent();
+        super.disconnectedCallback();
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('target')) {
+            this._resolveTarget();
+        }
+        if (changed.has('open') && !this._handlingOpenChange) {
+            if (this.open)
+                this.show();
+            else
+                this.hide();
+        }
+    }
+    _resolveTarget() {
+        if (!this.target)
+            return;
+        const el = document.querySelector(this.target);
+        if (!el) {
+            console.warn(`[moni-morph-modal] target "${this.target}" not found`);
+            return;
+        }
+        if (this._targetEl && this._targetEl !== el) {
+            this._targetEl.removeEventListener('click', this._onTargetClick);
+        }
+        this._targetEl = el;
+        this._targetEl.addEventListener('click', this._onTargetClick);
+    }
+    show() {
+        if (this._isAnimating || this._visible)
+            return;
+        if (!this._targetEl)
+            this._resolveTarget();
+        if (!this._targetEl) {
+            console.warn('[moni-morph-modal] cannot show: target not found');
+            return;
+        }
+        this._isAnimating = true;
+        this._handlingOpenChange = true;
+        this.open = true;
+        this._handlingOpenChange = false;
+        MoniMorphModal_1._openStack.push(this);
+        this._zIndex = 1000 + MoniMorphModal_1._openStack.length;
+        this.style.zIndex = String(this._zIndex);
+        this.style.setProperty('--_z-index', String(this._zIndex));
+        this.style.setProperty('--_backdrop-duration', '0.38s');
+        this.style.setProperty('--_backdrop-ease', 'cubic-bezier(0.15, 0.85, 0.2, 1)');
+        this._hideTargetContent();
+        void this.updateComplete.then(async () => {
+            if (!this._targetEl || !this._panel || !this._inner) {
+                this._isAnimating = false;
+                return;
+            }
+            this._panel.classList.add('is-animating');
+            await new Promise((resolve) => requestAnimationFrame(resolve));
+            const targetState = this._getTargetState(this._targetEl);
+            const panel = this._panel;
+            this._applyRect(panel, targetState.rect);
+            panel.style.backgroundColor = targetState.backgroundColor;
+            panel.style.color = targetState.color;
+            panel.style.borderRadius = targetState.borderRadius;
+            panel.style.boxShadow = 'none';
+            panel.style.zIndex = String(this._zIndex);
+            panel.style.visibility = 'visible';
+            panel.style.opacity = '1';
+            panel.style.pointerEvents = 'auto';
+            if (this._backdrop) {
+                this._backdrop.style.zIndex = String(this._zIndex - 1);
+            }
+            this._cleanupMorphElements();
+            const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+            let shouldMorph = this._shouldMorphLabel() && !prefersReducedMotion;
+            const morphTargets = [];
+            let source = null;
+            const headerWrapper = this.shadowRoot.querySelector('.header-morph-wrapper');
+            if (shouldMorph) {
+                this._animateLabelOpen();
+                source = this._resolveMorphSource();
+                if (source.text) {
+                    const el = this._createMorphText(source.text.content, source.text.sourceEl);
+                    this._positionElement(el, source.text.rect);
+                    morphTargets.push(el);
+                }
+                if (source.icon) {
+                    const el = this._createMorphIcon(source.icon.element);
+                    this._positionElement(el, source.icon.rect);
+                    morphTargets.push(el);
+                }
+                if (morphTargets.length === 0)
+                    shouldMorph = false;
+            }
+            if (shouldMorph && headerWrapper) {
+                headerWrapper.style.opacity = '0';
+            }
+            const state = Flip.getState(panel, {
+                props: 'backgroundColor,borderRadius,color,boxShadow'
+            });
+            const morphState = Flip.getState(morphTargets, {
+                props: 'color,fontSize,fontWeight,lineHeight'
+            });
+            const finalRect = this._computeFinalRect(targetState.rect);
+            panel.style.setProperty('--_panel-width', `${finalRect.width}px`);
+            panel.style.setProperty('--_panel-height', `${finalRect.height}px`);
+            this._applyRect(panel, finalRect);
+            panel.style.backgroundColor = '';
+            panel.style.color = '';
+            panel.style.borderRadius = '';
+            panel.style.boxShadow = '';
+            if (shouldMorph && source) {
+                const textRect = this._measureHeaderTextRect();
+                const iconRect = this._measureHeaderIconRect();
+                const headerComputed = window.getComputedStyle(this._header);
+                if (this._morphEls.text && textRect) {
+                    this._positionElement(this._morphEls.text, textRect);
+                    this._morphEls.text.style.color = headerComputed.color || 'var(--on-surface)';
+                    this._morphEls.text.style.fontSize = headerComputed.fontSize || 'inherit';
+                    this._morphEls.text.style.fontWeight = headerComputed.fontWeight || 'inherit';
+                    this._morphEls.text.style.lineHeight = headerComputed.lineHeight || 'inherit';
+                }
+                if (this._morphEls.icon && iconRect) {
+                    this._positionElement(this._morphEls.icon, iconRect);
+                    this._morphEls.icon.style.color = headerComputed.color || 'var(--on-surface)';
+                }
+            }
+            Flip.from(state, {
+                targets: panel,
+                duration: 0.38,
+                ease: 'morph-open',
+                zIndex: this._zIndex,
+                onComplete: () => {
+                    this._isAnimating = false;
+                    this._visible = true;
+                    this._panel.classList.remove('is-animating');
+                    this._cleanupMorphElements();
+                    if (headerWrapper)
+                        headerWrapper.style.opacity = '1';
+                }
+            });
+            if (morphTargets.length > 0) {
+                Flip.from(morphState, {
+                    targets: morphTargets,
+                    duration: 0.38,
+                    ease: 'morph-open',
+                    zIndex: this._zIndex + 10
+                });
+            }
+            const bodyChildren = Array.from(this.shadowRoot.querySelectorAll('.body > *'));
+            const fadeTargets = [
+                ...bodyChildren,
+                this.shadowRoot.querySelector('footer'),
+                this.shadowRoot.querySelector('.close-btn')
+            ].filter(Boolean);
+            gsap.set(fadeTargets, { opacity: 0, y: 8, filter: 'blur(8px)' });
+            gsap.fromTo(fadeTargets, { opacity: 0, y: 8, filter: 'blur(8px)' }, {
+                opacity: 1,
+                y: 0,
+                filter: 'blur(0px)',
+                duration: 0.32,
+                delay: 0.08,
+                stagger: 0.04,
+                ease: 'power2.out',
+                onComplete: () => {
+                    gsap.set(fadeTargets, { clearProps: 'opacity,transform,filter' });
+                }
+            });
+        });
+    }
+    _ensureSolidPanelBackground() {
+        if (!this._panel)
+            return;
+        let bg = window.getComputedStyle(this._panel).backgroundColor;
+        if (this._isColorTransparent(bg)) {
+            const solidBg = this._findSolidBackground(this._panel);
+            if (solidBg) {
+                this._panel.style.backgroundColor = solidBg;
+            }
+            else {
+                // Aseguramos un color sólido para evitar bugs de animación FLIP hacia rgba(0,0,0,0).
+                // NOTA: GSAP falla si el color inline es un string con var(). Usamos un fallback seguro.
+                const fallback = getComputedStyle(document.body).getPropertyValue('--surface-container-high').trim();
+                this._panel.style.backgroundColor = fallback || '#2d2d2d';
+            }
+        }
+    }
+    hide() {
+        if (this._isAnimating || !this._visible)
+            return;
+        if (!this._targetEl)
+            return;
+        this._isAnimating = true;
+        this._panel.classList.add('is-animating');
+        // Soluciona el caso donde el usuario no definió un fondo para .panel y lo aplicó en .body
+        this._ensureSolidPanelBackground();
+        this.style.setProperty('--_backdrop-duration', '0.3s');
+        this.style.setProperty('--_backdrop-ease', 'cubic-bezier(0.4, 0, 0.2, 1)');
+        const bodyChildren = Array.from(this.shadowRoot.querySelectorAll('.body > *'));
+        const fadeTargets = [
+            ...bodyChildren,
+            this.shadowRoot.querySelector('footer'),
+            this.shadowRoot.querySelector('.close-btn')
+        ].filter(Boolean);
+        const headerWrapper = this.shadowRoot.querySelector('.header-morph-wrapper');
+        gsap.fromTo(fadeTargets, { opacity: 1, filter: 'blur(0px)' }, {
+            opacity: 0,
+            filter: 'blur(4px)',
+            duration: 0.12,
+            ease: 'power2.in',
+            onComplete: () => {
+                const panel = this._panel;
+                this._cleanupMorphElements();
+                const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+                let shouldMorph = this._shouldMorphLabel() && !prefersReducedMotion;
+                const morphTargets = [];
+                let source = null;
+                if (shouldMorph) {
+                    this._animateLabelClose();
+                    source = this._resolveMorphSource();
+                    const textRect = this._measureHeaderTextRect();
+                    const iconRect = this._measureHeaderIconRect();
+                    const headerComputed = window.getComputedStyle(this._header);
+                    if (source.text && textRect) {
+                        const el = this._createMorphText(source.text.content, source.text.sourceEl);
+                        this._positionElement(el, textRect);
+                        el.style.color = headerComputed.color || 'var(--on-surface)';
+                        el.style.fontSize = headerComputed.fontSize || 'inherit';
+                        el.style.fontWeight = headerComputed.fontWeight || 'inherit';
+                        el.style.lineHeight = headerComputed.lineHeight || 'inherit';
+                        morphTargets.push(el);
+                    }
+                    if (source.icon && iconRect) {
+                        const el = this._createMorphIcon(source.icon.element);
+                        this._positionElement(el, iconRect);
+                        el.style.color = headerComputed.color || 'var(--on-surface)';
+                        morphTargets.push(el);
+                    }
+                    if (morphTargets.length === 0)
+                        shouldMorph = false;
+                }
+                if (shouldMorph && headerWrapper) {
+                    headerWrapper.style.opacity = '0';
+                }
+                const state = Flip.getState(panel, {
+                    props: 'backgroundColor,borderRadius,color,boxShadow'
+                });
+                const morphState = Flip.getState(morphTargets, {
+                    props: 'color,fontSize,fontWeight,lineHeight'
+                });
+                const targetState = this._getTargetState(this._targetEl);
+                const finalRect = this._computeFinalRect(targetState.rect);
+                panel.style.setProperty('--_panel-width', `${finalRect.width}px`);
+                panel.style.setProperty('--_panel-height', `${finalRect.height}px`);
+                this._applyRect(panel, targetState.rect);
+                panel.style.backgroundColor = targetState.backgroundColor;
+                panel.style.color = targetState.color;
+                panel.style.borderRadius = targetState.borderRadius;
+                panel.style.boxShadow = 'none';
+                if (shouldMorph && source) {
+                    if (this._morphEls.text && source.text) {
+                        this._positionElement(this._morphEls.text, source.text.rect);
+                        this._morphEls.text.style.color =
+                            window.getComputedStyle(source.text.sourceEl).color || 'inherit';
+                        this._morphEls.text.style.fontSize =
+                            window.getComputedStyle(source.text.sourceEl).fontSize || 'inherit';
+                        this._morphEls.text.style.fontWeight =
+                            window.getComputedStyle(source.text.sourceEl).fontWeight || 'inherit';
+                        this._morphEls.text.style.lineHeight =
+                            window.getComputedStyle(source.text.sourceEl).lineHeight || 'inherit';
+                    }
+                    if (this._morphEls.icon && source.icon) {
+                        this._positionElement(this._morphEls.icon, source.icon.rect);
+                        this._morphEls.icon.style.color =
+                            window.getComputedStyle(source.icon.element).color || 'inherit';
+                    }
+                }
+                Flip.from(state, {
+                    targets: panel,
+                    duration: 0.3,
+                    ease: 'morph-close',
+                    zIndex: this._zIndex,
+                    onComplete: () => {
+                        panel.style.visibility = 'hidden';
+                        panel.style.opacity = '0';
+                        panel.style.pointerEvents = 'none';
+                        this._visible = false;
+                        this._handlingOpenChange = true;
+                        this.open = false;
+                        this._handlingOpenChange = false;
+                        this._isAnimating = false;
+                        this._panel.classList.remove('is-animating');
+                        this._panel.style.removeProperty('--_panel-width');
+                        this._panel.style.removeProperty('--_panel-height');
+                        this._cleanupMorphElements();
+                        this._restoreTargetContent();
+                        gsap.set(fadeTargets, { clearProps: 'opacity,transform,filter' });
+                        if (headerWrapper)
+                            headerWrapper.style.opacity = '1';
+                        this.style.removeProperty('z-index');
+                        this.style.removeProperty('--_z-index');
+                        this.style.removeProperty('--_backdrop-duration');
+                        this.style.removeProperty('--_backdrop-ease');
+                        const idx = MoniMorphModal_1._openStack.indexOf(this);
+                        if (idx > -1)
+                            MoniMorphModal_1._openStack.splice(idx, 1);
+                    }
+                });
+                if (morphTargets.length > 0) {
+                    Flip.from(morphState, {
+                        targets: morphTargets,
+                        duration: 0.3,
+                        ease: 'morph-close',
+                        zIndex: this._zIndex + 10
+                    });
+                }
+            }
+        });
+    }
+    toggle() {
+        if (this._visible || this.open)
+            this.hide();
+        else
+            this.show();
+    }
+    _handleDocKeydown(e) {
+        if (e.key !== 'Escape' || !this.closeOnEsc)
+            return;
+        const top = MoniMorphModal_1._openStack[MoniMorphModal_1._openStack.length - 1];
+        if (top !== this)
+            return;
+        e.stopPropagation();
+        this.hide();
+    }
+    _hideTargetContent() {
+        if (!this._targetEl)
+            return;
+        const saveAndHide = (el, prop) => {
+            if (!this._targetStylesCache.has(el)) {
+                this._targetStylesCache.set(el, { opacity: el.style.opacity, color: el.style.color });
+            }
+            if (prop === 'opacity')
+                el.style.opacity = '0';
+            if (prop === 'color')
+                el.style.color = 'transparent';
+        };
+        if (this.hideTarget) {
+            saveAndHide(this._targetEl, 'opacity');
+            return;
+        }
+        if (this._targetEl.tagName === 'MONI-BUTTON') {
+            const parts = this._getMoniButtonParts();
+            if (parts.label)
+                saveAndHide(parts.label, 'opacity');
+            if (parts.icon)
+                saveAndHide(parts.icon, 'opacity');
+            if (parts.iconTrailing)
+                saveAndHide(parts.iconTrailing, 'opacity');
+        }
+        else {
+            saveAndHide(this._targetEl, 'color');
+            const icon = this._targetEl.querySelector('moni-icon, svg, [class*="icon"]');
+            if (icon)
+                saveAndHide(icon, 'opacity');
+        }
+    }
+    _restoreTargetContent() {
+        if (!this._targetEl)
+            return;
+        const restore = (el) => {
+            if (this._targetStylesCache.has(el)) {
+                const cache = this._targetStylesCache.get(el);
+                el.style.opacity = cache.opacity;
+                el.style.color = cache.color;
+                this._targetStylesCache.delete(el);
+            }
+        };
+        if (this.hideTarget) {
+            restore(this._targetEl);
+            return;
+        }
+        if (this._targetEl.tagName === 'MONI-BUTTON') {
+            const parts = this._getMoniButtonParts();
+            if (parts.label)
+                restore(parts.label);
+            if (parts.icon)
+                restore(parts.icon);
+            if (parts.iconTrailing)
+                restore(parts.iconTrailing);
+        }
+        else {
+            restore(this._targetEl);
+            const icon = this._targetEl.querySelector('moni-icon, svg, [class*="icon"]');
+            if (icon)
+                restore(icon);
+        }
+    }
+    _onHeaderSlotChange(e) {
+        const slot = e.target;
+        this._hasHeader = slot.assignedNodes({ flatten: true }).length > 0;
+    }
+    _onFooterSlotChange(e) {
+        const slot = e.target;
+        this._hasFooter = slot.assignedNodes({ flatten: true }).length > 0;
+    }
+    _onTriggerLabelSlotChange(e) {
+        const slot = e.target;
+        this._hasTriggerLabel = slot.assignedNodes({ flatten: true }).length > 0;
+    }
+    _getTriggerLabelNodes() {
+        const slot = this.shadowRoot?.querySelector('slot[name="trigger-label"]');
+        return slot?.assignedNodes({ flatten: true }) ?? [];
+    }
+    _shouldMorphLabel() {
+        return (this.morphLabel && !!this._targetEl && (this._hasHeader || this._hasTriggerLabel));
+    }
+    // =========================================================================
+    // LABEL FLIP HELPERS
+    // =========================================================================
+    _cleanupMorphElements() {
+        if (this._morphEls.text) {
+            this._morphEls.text.remove();
+            this._morphEls.text = null;
+        }
+        if (this._morphEls.icon) {
+            this._morphEls.icon.remove();
+            this._morphEls.icon = null;
+        }
+    }
+    _animateLabelOpen() {
+        // No-op: label morphing is handled by the unified FLIP timeline in show()
+    }
+    _animateLabelClose() {
+        // No-op: label morphing is handled by the unified FLIP timeline in hide()
+    }
+    _createMorphText(sourceText, sourceEl) {
+        const el = document.createElement('div');
+        el.className = 'morph-text';
+        el.setAttribute('data-flip-id', `morph-text-${this.target}`);
+        el.setAttribute('aria-hidden', 'true');
+        el.textContent = sourceText;
+        const computed = window.getComputedStyle(sourceEl);
+        el.style.position = 'fixed';
+        el.style.pointerEvents = 'none';
+        el.style.zIndex = String(this._zIndex + 10);
+        el.style.display = 'inline-flex';
+        el.style.alignItems = computed.alignItems !== 'normal' ? computed.alignItems : 'center';
+        el.style.justifyContent = computed.justifyContent !== 'normal' ? computed.justifyContent : 'flex-start';
+        el.style.whiteSpace = 'nowrap';
+        el.style.color = computed.color || 'inherit';
+        el.style.fontFamily = computed.fontFamily || 'inherit';
+        el.style.fontSize = computed.fontSize || 'inherit';
+        el.style.fontWeight = computed.fontWeight || 'inherit';
+        el.style.lineHeight = computed.lineHeight || 'inherit';
+        el.style.letterSpacing = computed.letterSpacing || 'inherit';
+        this.shadowRoot.appendChild(el);
+        this._morphEls.text = el;
+        return el;
+    }
+    _createMorphIcon(sourceIcon) {
+        const el = document.createElement('div');
+        el.className = 'morph-icon';
+        el.setAttribute('data-flip-id', `morph-icon-${this.target}`);
+        el.setAttribute('aria-hidden', 'true');
+        // Para <moni-icon> renderizamos el glifo directamente para evitar
+        // esperar a que hidrate su shadow DOM.
+        if (sourceIcon.tagName === 'MONI-ICON') {
+            const span = document.createElement('span');
+            span.textContent = sourceIcon.getAttribute('name') || '';
+            const computed = window.getComputedStyle(sourceIcon);
+            span.style.display = 'inline-flex';
+            span.style.alignItems = 'center';
+            span.style.justifyContent = 'center';
+            span.style.fontFamily = computed.fontFamily || 'var(--font-icon)';
+            span.style.fontSize = computed.fontSize || '1.125rem';
+            span.style.inlineSize = computed.inlineSize || '1.125rem';
+            span.style.blockSize = computed.blockSize || '1.125rem';
+            span.style.lineHeight = '1';
+            span.style.color = 'inherit';
+            span.style.fontWeight = 'normal';
+            span.style.fontStyle = 'normal';
+            span.style.letterSpacing = 'normal';
+            span.style.textTransform = 'none';
+            span.style.whiteSpace = 'nowrap';
+            span.style.wordWrap = 'normal';
+            span.style.direction = 'ltr';
+            span.style.fontFeatureSettings = "'liga'";
+            span.style.fontVariationSettings =
+                "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24";
+            span.style.setProperty('-webkit-font-smoothing', 'antialiased');
+            el.appendChild(span);
+        }
+        else {
+            el.appendChild(sourceIcon.cloneNode(true));
+        }
+        const computed = window.getComputedStyle(sourceIcon);
+        el.style.position = 'fixed';
+        el.style.pointerEvents = 'none';
+        el.style.zIndex = String(this._zIndex + 10);
+        el.style.display = 'inline-flex';
+        el.style.alignItems = 'center';
+        el.style.justifyContent = 'center';
+        el.style.color = computed.color || 'inherit';
+        el.style.inlineSize = computed.inlineSize || '1.125rem';
+        el.style.blockSize = computed.blockSize || '1.125rem';
+        this.shadowRoot.appendChild(el);
+        this._morphEls.icon = el;
+        return el;
+    }
+    _positionElement(el, rect) {
+        el.style.top = `${rect.top}px`;
+        el.style.left = `${rect.left}px`;
+        el.style.width = `${rect.width}px`;
+        el.style.height = `${rect.height}px`;
+    }
+    _getMoniButtonParts() {
+        const sr = this._targetEl?.shadowRoot;
+        return {
+            label: sr?.querySelector('[part="label"]') ?? null,
+            icon: sr?.querySelector('[part="icon"]') ?? null,
+            iconTrailing: sr?.querySelector('[part="icon-trailing"]') ?? null
+        };
+    }
+    _resolveMorphSource() {
+        const result = { text: null, icon: null };
+        if (!this._targetEl)
+            return result;
+        // Slot trigger-label tiene prioridad.
+        if (this._hasTriggerLabel) {
+            const nodes = this._getTriggerLabelNodes();
+            if (nodes.length > 0) {
+                const wrapper = document.createElement('div');
+                for (const node of nodes) {
+                    wrapper.appendChild(node.cloneNode(true));
+                }
+                // Posicionamos el wrapper sobre el target para la medición inicial.
+                wrapper.style.position = 'fixed';
+                wrapper.style.visibility = 'hidden';
+                wrapper.style.pointerEvents = 'none';
+                this.shadowRoot.appendChild(wrapper);
+                const rect = this._targetEl.getBoundingClientRect();
+                wrapper.remove();
+                result.text = {
+                    content: wrapper.textContent?.trim() || '',
+                    rect,
+                    sourceEl: this._targetEl
+                };
+            }
+            return result;
+        }
+        // <moni-button>: extraemos label e icono desde su shadow DOM.
+        if (this._targetEl.tagName === 'MONI-BUTTON') {
+            const parts = this._getMoniButtonParts();
+            if (parts.label) {
+                result.text = {
+                    content: this._targetEl.textContent?.trim() || '',
+                    rect: parts.label.getBoundingClientRect(),
+                    sourceEl: parts.label
+                };
+            }
+            if (parts.icon) {
+                const innerIcon = parts.icon.querySelector('moni-icon, svg') || parts.icon;
+                result.icon = {
+                    element: innerIcon,
+                    rect: innerIcon.getBoundingClientRect()
+                };
+            }
+            return result;
+        }
+        // Target arbitrario.
+        let sourceEl = this._targetEl;
+        if (this.morphLabelSelector) {
+            const selected = this._targetEl.querySelector(this.morphLabelSelector);
+            if (selected)
+                sourceEl = selected;
+        }
+        const text = sourceEl.textContent?.trim() || '';
+        if (text) {
+            result.text = {
+                content: text,
+                rect: sourceEl.getBoundingClientRect(),
+                sourceEl
+            };
+        }
+        // Buscamos un icono dentro del target.
+        const iconEl = sourceEl.querySelector('moni-icon, svg, [class*="icon"]');
+        if (iconEl) {
+            result.icon = {
+                element: iconEl,
+                rect: iconEl.getBoundingClientRect()
+            };
+        }
+        return result;
+    }
+    _measureHeaderTextRect() {
+        if (!this._header)
+            return null;
+        const slot = this.shadowRoot?.querySelector('slot[name="header"]');
+        const nodes = slot?.assignedNodes({ flatten: true }) ?? [];
+        // Buscamos el primer nodo con texto visible.
+        for (const node of nodes) {
+            if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) {
+                const range = document.createRange();
+                range.selectNode(node);
+                return range.getBoundingClientRect();
+            }
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                const el = node;
+                if (el.tagName === 'MONI-ICON' || el.tagName === 'SVG') {
+                    continue;
+                }
+                const childNodes = Array.from(el.childNodes);
+                for (const child of childNodes) {
+                    if (child.nodeType === Node.TEXT_NODE && child.textContent?.trim()) {
+                        const range = document.createRange();
+                        range.selectNode(child);
+                        return range.getBoundingClientRect();
+                    }
+                    if (child.nodeType === Node.ELEMENT_NODE) {
+                        const cel = child;
+                        if (cel.tagName !== 'MONI-ICON' && cel.tagName !== 'SVG' && cel.textContent?.trim()) {
+                            return cel.getBoundingClientRect();
+                        }
+                    }
+                }
+                if (el.textContent?.trim()) {
+                    return el.getBoundingClientRect();
+                }
+            }
+        }
+        return this._header.getBoundingClientRect();
+    }
+    _measureHeaderIconRect() {
+        const textRect = this._measureHeaderTextRect();
+        if (!textRect)
+            return null;
+        const slot = this.shadowRoot?.querySelector('slot[name="header"]');
+        const nodes = slot?.assignedNodes({ flatten: true }) ?? [];
+        // Si el header ya tiene un icono, lo usamos como destino.
+        for (const node of nodes) {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                const el = node;
+                if (el.tagName === 'MONI-ICON' || el.tagName === 'SVG') {
+                    return el.getBoundingClientRect();
+                }
+                const nestedIcon = el.querySelector('moni-icon, svg');
+                if (nestedIcon) {
+                    return nestedIcon.getBoundingClientRect();
+                }
+            }
+        }
+        // Si no hay icono en el header, calculamos una posición a la
+        // izquierda del texto, alineada verticalmente.
+        const iconSize = 24;
+        const gap = 12;
+        return new DOMRect(textRect.left - iconSize - gap, textRect.top + textRect.height / 2 - iconSize / 2, iconSize, iconSize);
+    }
+    _findSolidBackground(el) {
+        const elements = [el, ...Array.from(el.querySelectorAll('*'))];
+        for (const e of elements) {
+            const bg = window.getComputedStyle(e).backgroundColor;
+            if (!this._isColorTransparent(bg)) {
+                return bg;
+            }
+        }
+        // Si es un Web Component, revisamos su shadowRoot de forma superficial
+        if (el.shadowRoot) {
+            const shadowElements = Array.from(el.shadowRoot.querySelectorAll('*'));
+            for (const e of shadowElements) {
+                const bg = window.getComputedStyle(e).backgroundColor;
+                if (!this._isColorTransparent(bg)) {
+                    return bg;
+                }
+            }
+        }
+        return null;
+    }
+    _getTargetState(el) {
+        const rect = el.getBoundingClientRect();
+        // Para <moni-button> el botón visual vive dentro del shadow DOM;
+        // el host es transparente y sin border-radius, así que leemos
+        // los estilos del <button> interno para que la morph coincida.
+        let visualEl = el;
+        if (el.tagName === 'MONI-BUTTON') {
+            const inner = el.shadowRoot?.querySelector('.button');
+            if (inner)
+                visualEl = inner;
+        }
+        let bg = window.getComputedStyle(visualEl).backgroundColor;
+        // Si es transparente, intentamos buscar en pseudo-elementos (usado en botones Material 3)
+        if (this._isColorTransparent(bg)) {
+            const beforeBg = window.getComputedStyle(visualEl, '::before').backgroundColor;
+            if (!this._isColorTransparent(beforeBg)) {
+                bg = beforeBg;
+            }
+            else {
+                const afterBg = window.getComputedStyle(visualEl, '::after').backgroundColor;
+                if (!this._isColorTransparent(afterBg)) {
+                    bg = afterBg;
+                }
+                else {
+                    // Buscamos el primer elemento con fondo sólido en el árbol del objetivo
+                    const solidBg = this._findSolidBackground(visualEl);
+                    if (solidBg)
+                        bg = solidBg;
+                }
+            }
+        }
+        // Si sigue siendo transparente, evitamos que el modal se vuelva transparente
+        // leyendo su propio color computado actual para que mantenga su opacidad.
+        if (this._isColorTransparent(bg) && this._panel) {
+            bg = window.getComputedStyle(this._panel).backgroundColor;
+        }
+        const computed = window.getComputedStyle(visualEl);
+        return {
+            rect,
+            backgroundColor: bg,
+            color: computed.color || 'var(--on-surface)',
+            borderRadius: computed.borderRadius || '1.25rem'
+        };
+    }
+    _isColorTransparent(color) {
+        if (!color)
+            return true;
+        const c = color.replace(/\s/g, '').toLowerCase();
+        return (c === 'rgba(0,0,0,0)' ||
+            c === 'transparent' ||
+            c === '' ||
+            c.includes(',0)') ||
+            c.includes('/0)'));
+    }
+    _applyRect(el, rect) {
+        el.style.top = `${rect.top}px`;
+        el.style.left = `${rect.left}px`;
+        el.style.width = `${rect.width}px`;
+        el.style.height = `${rect.height}px`;
+    }
+    _computeFinalRect(targetRect) {
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        const padding = 16;
+        let width = this._parseSize(this.expandedWidth, vw);
+        let height = this._parseSize(this.expandedHeight, vh);
+        width = Math.min(width, vw - padding * 2);
+        height = Math.min(height, vh - padding * 2);
+        let top = targetRect.top;
+        let left = targetRect.left;
+        switch (this.placement) {
+            case 'viewport-center':
+                left = vw / 2 - width / 2;
+                top = vh / 2 - height / 2;
+                break;
+            case 'viewport-top':
+                left = vw / 2 - width / 2;
+                top = padding;
+                break;
+            case 'viewport-bottom':
+                left = vw / 2 - width / 2;
+                top = vh - height - padding;
+                break;
+            case 'viewport-left':
+                left = padding;
+                top = vh / 2 - height / 2;
+                break;
+            case 'viewport-right':
+                left = vw - width - padding;
+                top = vh / 2 - height / 2;
+                break;
+            case 'viewport-top-left':
+                left = padding;
+                top = padding;
+                break;
+            case 'viewport-top-right':
+                left = vw - width - padding;
+                top = padding;
+                break;
+            case 'viewport-bottom-left':
+                left = padding;
+                top = vh - height - padding;
+                break;
+            case 'viewport-bottom-right':
+                left = vw - width - padding;
+                top = vh - height - padding;
+                break;
+            case 'center':
+                left = targetRect.left + targetRect.width / 2 - width / 2;
+                top = targetRect.top + targetRect.height / 2 - height / 2;
+                break;
+            case 'top':
+                left = targetRect.left + targetRect.width / 2 - width / 2;
+                top = this.coverTarget
+                    ? targetRect.top + targetRect.height - height
+                    : targetRect.top - height;
+                break;
+            case 'top-start':
+                left = targetRect.left + targetRect.width - width;
+                top = this.coverTarget
+                    ? targetRect.top + targetRect.height - height
+                    : targetRect.top - height;
+                break;
+            case 'top-end':
+                left = targetRect.left;
+                top = this.coverTarget
+                    ? targetRect.top + targetRect.height - height
+                    : targetRect.top - height;
+                break;
+            case 'bottom':
+                left = targetRect.left + targetRect.width / 2 - width / 2;
+                top = this.coverTarget
+                    ? targetRect.top
+                    : targetRect.top + targetRect.height;
+                break;
+            case 'bottom-start':
+                left = targetRect.left + targetRect.width - width;
+                top = this.coverTarget
+                    ? targetRect.top
+                    : targetRect.top + targetRect.height;
+                break;
+            case 'bottom-end':
+                left = targetRect.left;
+                top = this.coverTarget
+                    ? targetRect.top
+                    : targetRect.top + targetRect.height;
+                break;
+            case 'left':
+                left = this.coverTarget
+                    ? targetRect.left + targetRect.width - width
+                    : targetRect.left - width;
+                top = targetRect.top + targetRect.height / 2 - height / 2;
+                break;
+            case 'left-start':
+                left = this.coverTarget
+                    ? targetRect.left + targetRect.width - width
+                    : targetRect.left - width;
+                top = targetRect.top + targetRect.height - height;
+                break;
+            case 'left-end':
+                left = this.coverTarget
+                    ? targetRect.left + targetRect.width - width
+                    : targetRect.left - width;
+                top = targetRect.top;
+                break;
+            case 'right':
+                left = this.coverTarget
+                    ? targetRect.left
+                    : targetRect.left + targetRect.width;
+                top = targetRect.top + targetRect.height / 2 - height / 2;
+                break;
+            case 'right-start':
+                left = this.coverTarget
+                    ? targetRect.left
+                    : targetRect.left + targetRect.width;
+                top = targetRect.top + targetRect.height - height;
+                break;
+            case 'right-end':
+                left = this.coverTarget
+                    ? targetRect.left
+                    : targetRect.left + targetRect.width;
+                top = targetRect.top;
+                break;
+        }
+        left = Math.max(padding, Math.min(left, vw - width - padding));
+        top = Math.max(padding, Math.min(top, vh - height - padding));
+        return new DOMRect(left, top, width, height);
+    }
+    _parseSize(value, ref) {
+        const num = parseFloat(value);
+        if (Number.isNaN(num))
+            return 352;
+        if (value.endsWith('px'))
+            return num;
+        if (value.endsWith('rem'))
+            return num * 16;
+        if (value.endsWith('em'))
+            return num * 16;
+        if (value.endsWith('%'))
+            return (num / 100) * ref;
+        if (value.endsWith('vw'))
+            return (num / 100) * window.innerWidth;
+        if (value.endsWith('vh'))
+            return (num / 100) * window.innerHeight;
+        return num;
+    }
+    static { this.styles = [
+        sharedStyles,
+        css `
+			:host {
+				display: contents;
+			}
+
+			.backdrop {
+				position: fixed;
+				inset: 0;
+				background-color: var(--scrim);
+				opacity: 0;
+				visibility: hidden;
+				transition:
+					opacity var(--_backdrop-duration, 0.35s) var(--_backdrop-ease, cubic-bezier(0.2, 0, 0, 1)),
+					visibility var(--_backdrop-duration, 0.35s) var(--_backdrop-ease, cubic-bezier(0.2, 0, 0, 1));
+				z-index: calc(var(--_z-index, 100) - 1);
+			}
+
+			.backdrop.open {
+				opacity: 1;
+				visibility: visible;
+			}
+
+			.panel {
+				position: fixed;
+				visibility: hidden;
+				opacity: 0;
+				pointer-events: none;
+				display: flex;
+				flex-direction: column;
+				overflow: hidden;
+				background-color: var(--surface-container-high);
+				color: var(--on-surface);
+				border-radius: 1.75rem;
+				box-shadow: var(--elevate2);
+				z-index: var(--_z-index, 100);
+			}
+
+			.panel-inner {
+				display: flex;
+				flex-direction: column;
+				width: var(--_panel-width, 100%);
+				height: var(--_panel-height, 100%);
+				flex-shrink: 0;
+				overflow: hidden;
+			}
+
+			header {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				gap: 0.75rem;
+				padding: 1.25rem 1.5rem 0.75rem;
+				min-block-size: 3.5rem;
+			}
+
+			header.is-empty {
+				display: none;
+			}
+
+			.body {
+				flex: 1;
+				overflow-y: auto;
+				padding: 0 1.5rem;
+				scrollbar-gutter: stable;
+			}
+
+			.panel.is-animating .body {
+				overflow: hidden;
+			}
+
+			footer {
+				display: flex;
+				align-items: center;
+				justify-content: flex-end;
+				gap: 0.5rem;
+				padding: 1rem 1.5rem 1.5rem;
+				border-top: 0.0625rem solid var(--outline-variant);
+			}
+
+			footer.is-empty {
+				display: none;
+			}
+
+			.close-btn {
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				inline-size: 2.5rem;
+				block-size: 2.5rem;
+				padding: 0;
+				border: none;
+				border-radius: 50%;
+				background: transparent;
+				color: var(--on-surface-variant);
+				cursor: pointer;
+				font-size: 1.25rem;
+			}
+
+			.close-btn:hover {
+				background-color: var(--active);
+			}
+
+			.morph-text,
+			.morph-icon {
+				position: fixed;
+				pointer-events: none;
+				box-sizing: border-box;
+				overflow: hidden;
+				will-change: transform, width, height, color, font-size;
+			}
+
+			.trigger-label-slot {
+				display: none;
+			}
+		`
+    ]; }
+    render() {
+        const visible = this._visible || this.open;
+        const headerEmpty = !this._hasHeader && !this.showCloseButton;
+        return html `
+			${this.hasBackdrop ? html `
+				<div
+					class="backdrop ${visible ? 'open' : ''}"
+					part="backdrop"
+					style="${!this.modal ? 'background-color: transparent;' : ''}"
+				></div>
+			` : ''}
+			<div class="panel" part="panel">
+				<div class="panel-inner" part="panel-inner">
+					<header
+						class="${headerEmpty ? 'is-empty' : ''}"
+						part="header"
+					>
+						<div class="header-morph-wrapper"><slot name="header" @slotchange=${this._onHeaderSlotChange}></slot></div>
+						${this.showCloseButton
+            ? html `
+									<button
+										class="close-btn"
+										@click=${this.hide}
+										aria-label="Cerrar"
+									>
+										<moni-icon name="close"></moni-icon>
+									</button>
+							  `
+            : ''}
+					</header>
+					<div class="body" part="body"><slot></slot></div>
+					<footer
+						class="${this._hasFooter ? '' : 'is-empty'}"
+						part="footer"
+					>
+						<slot name="footer" @slotchange=${this._onFooterSlotChange}></slot>
+					</footer>
+				</div>
+			</div>
+			<div class="trigger-label-slot">
+				<slot name="trigger-label" @slotchange=${this._onTriggerLabelSlotChange}></slot>
+			</div>
+		`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], MoniMorphModal.prototype, "target", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, converter: litBool })
+], MoniMorphModal.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, converter: litBool })
+], MoniMorphModal.prototype, "modal", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniMorphModal.prototype, "placement", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'expanded-width' })
+], MoniMorphModal.prototype, "expandedWidth", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'expanded-height' })
+], MoniMorphModal.prototype, "expandedHeight", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'close-on-click-outside', converter: litBool })
+], MoniMorphModal.prototype, "closeOnClickOutside", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'close-on-esc', converter: litBool })
+], MoniMorphModal.prototype, "closeOnEsc", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'show-close-button', converter: litBool })
+], MoniMorphModal.prototype, "showCloseButton", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'morph-label', converter: litBool })
+], MoniMorphModal.prototype, "morphLabel", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'morph-label-selector' })
+], MoniMorphModal.prototype, "morphLabelSelector", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'has-backdrop', converter: litBool })
+], MoniMorphModal.prototype, "hasBackdrop", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'hide-target', converter: litBool })
+], MoniMorphModal.prototype, "hideTarget", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'cover-target', converter: litBool })
+], MoniMorphModal.prototype, "coverTarget", void 0);
+__decorate([
+    query('.panel')
+], MoniMorphModal.prototype, "_panel", void 0);
+__decorate([
+    query('.panel-inner')
+], MoniMorphModal.prototype, "_inner", void 0);
+__decorate([
+    query('.backdrop')
+], MoniMorphModal.prototype, "_backdrop", void 0);
+__decorate([
+    query('header')
+], MoniMorphModal.prototype, "_header", void 0);
+__decorate([
+    state()
+], MoniMorphModal.prototype, "_hasHeader", void 0);
+__decorate([
+    state()
+], MoniMorphModal.prototype, "_hasFooter", void 0);
+__decorate([
+    state()
+], MoniMorphModal.prototype, "_hasTriggerLabel", void 0);
+MoniMorphModal = MoniMorphModal_1 = __decorate([
+    customElement('moni-morph-modal')
+], MoniMorphModal);
+export { MoniMorphModal };
+export default MoniMorphModal;