@moni-labs/moni-ui 0.4.13 → 0.4.16

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

@@ -157,6 +157,8 @@ let MoniMorphModal = class MoniMorphModal extends MoniElement {
          * @type {boolean}
          */
         this.autoSize = false;
+        /** Ajusta sólo la altura al contenido, sin superar expanded-height. */
+        this.autoHeight = false;
         /** Fuerza al modal expandido a ocupar todo el viewport. */
         this.fullscreen = false;
         /** Activa fullscreen únicamente cuando el viewport no supera el breakpoint configurado. */
@@ -208,6 +210,8 @@ let MoniMorphModal = class MoniMorphModal extends MoniElement {
     }
     static { MoniMorphModal_1 = this; }
     static { this._openStack = []; }
+    static { this._scrollLockOwners = new Set(); }
+    static { this._scrollLockSnapshot = null; }
     connectedCallback() {
         super.connectedCallback();
         this._resolveTarget();
@@ -227,6 +231,7 @@ let MoniMorphModal = class MoniMorphModal extends MoniElement {
         this.style.removeProperty('--_z-index');
         this.style.removeProperty('--_backdrop-duration');
         this.style.removeProperty('--_backdrop-ease');
+        this._releaseDocumentScrollLock();
         this._cleanupMorphElements();
         this._restoreTargetContent();
         super.disconnectedCallback();
@@ -248,6 +253,44 @@ let MoniMorphModal = class MoniMorphModal extends MoniElement {
             else
                 this.hide();
         }
+        if ((changed.has('hasBackdrop') || changed.has('fullscreen') || changed.has('responsiveFullscreen') || changed.has('fullscreenBreakpoint')) && (this.open || this._visible)) {
+            this._syncDocumentScrollLock();
+        }
+    }
+    _shouldLockDocumentScroll() {
+        return this.hasBackdrop || this._usesFullscreen();
+    }
+    _syncDocumentScrollLock() {
+        if (this._shouldLockDocumentScroll())
+            this._acquireDocumentScrollLock();
+        else
+            this._releaseDocumentScrollLock();
+    }
+    _acquireDocumentScrollLock() {
+        if (MoniMorphModal_1._scrollLockOwners.has(this))
+            return;
+        if (MoniMorphModal_1._scrollLockOwners.size === 0) {
+            MoniMorphModal_1._scrollLockSnapshot = {
+                documentOverflow: document.documentElement.style.overflow,
+                bodyOverflow: document.body.style.overflow,
+                bodyOverscrollBehavior: document.body.style.overscrollBehavior
+            };
+            document.documentElement.style.overflow = 'hidden';
+            document.body.style.overflow = 'hidden';
+            document.body.style.overscrollBehavior = 'none';
+        }
+        MoniMorphModal_1._scrollLockOwners.add(this);
+    }
+    _releaseDocumentScrollLock() {
+        if (!MoniMorphModal_1._scrollLockOwners.delete(this) || MoniMorphModal_1._scrollLockOwners.size > 0)
+            return;
+        const snapshot = MoniMorphModal_1._scrollLockSnapshot;
+        if (snapshot) {
+            document.documentElement.style.overflow = snapshot.documentOverflow;
+            document.body.style.overflow = snapshot.bodyOverflow;
+            document.body.style.overscrollBehavior = snapshot.bodyOverscrollBehavior;
+        }
+        MoniMorphModal_1._scrollLockSnapshot = null;
     }
     /**
      * Busca en el DOM el elemento que dispara el modal (el trigger) basándose en la propiedad `target`.
@@ -291,6 +334,7 @@ let MoniMorphModal = class MoniMorphModal extends MoniElement {
         this._handlingOpenChange = true;
         this.open = true;
         this._handlingOpenChange = false;
+        this._syncDocumentScrollLock();
         // Apilamos el modal globalmente para manejar correctamente el z-index en modales anidados
         MoniMorphModal_1._openStack.push(this);
         this._zIndex = 1000 + MoniMorphModal_1._openStack.length;
@@ -373,28 +417,8 @@ let MoniMorphModal = class MoniMorphModal extends MoniElement {
             });
             // Fase "Last": Calculamos las dimensiones expandidas del modal basándonos en la configuración
             let naturalSize;
-            if (this.autoSize) {
-                const prevW = panel.style.getPropertyValue('--_panel-width');
-                const prevH = panel.style.getPropertyValue('--_panel-height');
-                const prevPanelW = panel.style.width;
-                const prevPanelH = panel.style.height;
-                panel.style.width = 'auto';
-                panel.style.height = 'auto';
-                panel.style.setProperty('--_panel-width', 'max-content');
-                panel.style.setProperty('--_panel-height', 'max-content');
-                const bodyEl = this.shadowRoot.querySelector('.body');
-                const prevOverflow = bodyEl ? bodyEl.style.overflow : '';
-                if (bodyEl)
-                    bodyEl.style.overflow = 'visible';
-                // Forzamos al panel-inner a expandirse para medir su contenido real
-                naturalSize = { width: this._inner.scrollWidth, height: this._inner.scrollHeight };
-                panel.style.setProperty('--_panel-width', prevW);
-                panel.style.setProperty('--_panel-height', prevH);
-                panel.style.width = prevPanelW;
-                panel.style.height = prevPanelH;
-                if (bodyEl)
-                    bodyEl.style.overflow = prevOverflow;
-            }
+            if (this.autoSize || this.autoHeight)
+                naturalSize = this._measureNaturalSize(panel);
             const finalRect = this._computeFinalRect(targetState.rect, naturalSize);
             panel.style.setProperty('--_panel-width', `${finalRect.width}px`);
             panel.style.setProperty('--_panel-height', `${finalRect.height}px`);
@@ -668,27 +692,8 @@ let MoniMorphModal = class MoniMorphModal extends MoniElement {
                     return;
                 }
                 let naturalSize;
-                if (this.autoSize) {
-                    const prevW = panel.style.getPropertyValue('--_panel-width');
-                    const prevH = panel.style.getPropertyValue('--_panel-height');
-                    const prevPanelW = panel.style.width;
-                    const prevPanelH = panel.style.height;
-                    panel.style.width = 'auto';
-                    panel.style.height = 'auto';
-                    panel.style.setProperty('--_panel-width', 'max-content');
-                    panel.style.setProperty('--_panel-height', 'max-content');
-                    const bodyEl = this.shadowRoot.querySelector('.body');
-                    const prevOverflow = bodyEl ? bodyEl.style.overflow : '';
-                    if (bodyEl)
-                        bodyEl.style.overflow = 'visible';
-                    naturalSize = { width: this._inner.scrollWidth, height: this._inner.scrollHeight };
-                    panel.style.setProperty('--_panel-width', prevW);
-                    panel.style.setProperty('--_panel-height', prevH);
-                    panel.style.width = prevPanelW;
-                    panel.style.height = prevPanelH;
-                    if (bodyEl)
-                        bodyEl.style.overflow = prevOverflow;
-                }
+                if (this.autoSize || this.autoHeight)
+                    naturalSize = this._measureNaturalSize(panel);
                 const finalRect = this._computeFinalRect(targetState.rect, naturalSize);
                 panel.style.setProperty('--_panel-width', `${finalRect.width}px`);
                 panel.style.setProperty('--_panel-height', `${finalRect.height}px`);
@@ -831,6 +836,27 @@ let MoniMorphModal = class MoniMorphModal extends MoniElement {
         this._backdrop.style.opacity = '1';
         const motion = { progress: 0 };
         let contentAttached = false;
+        const sampleInterval = 1000 / 30;
+        const initialVisualWidth = destination.source.offsetWidth || targetRect.width;
+        const initialVisualHeight = destination.source.offsetHeight || targetRect.height;
+        const captureTargetSample = () => {
+            const state = this._getTargetState(destination.source);
+            const rect = this._toPanelCoordinateRect(state.rect);
+            return {
+                rect: { left: rect.left, top: rect.top, width: rect.width, height: rect.height },
+                transform: this._readTransformState(destination.source),
+                visualWidth: destination.source.offsetWidth || rect.width,
+                visualHeight: destination.source.offsetHeight || rect.height,
+                backgroundColor: state.backgroundColor,
+                color: state.color,
+                borderRadius: state.borderRadius,
+                boxShadow: state.boxShadow
+            };
+        };
+        let previousSample = captureTargetSample();
+        let nextSample = previousSample;
+        let sampledAt = performance.now();
+        const lerp = (from, to, amount) => from + (to - from) * amount;
         if (this.debug) {
             console.log('[moni-morph-modal] arc', { start, control, end, distance, arc, morphDuration });
         }
@@ -842,9 +868,28 @@ let MoniMorphModal = class MoniMorphModal extends MoniElement {
             ease: 'power2.inOut',
             onUpdate: () => {
                 const progress = motion.progress;
-                const liveState = this._getTargetState(destination.source);
-                const liveRect = this._toPanelCoordinateRect(liveState.rect);
-                const liveTransform = this._readTransformState(destination.source);
+                const now = performance.now();
+                const forceFinalSample = progress >= 0.999;
+                if (forceFinalSample || now - sampledAt >= sampleInterval) {
+                    previousSample = nextSample;
+                    nextSample = captureTargetSample();
+                    sampledAt = now;
+                }
+                const sampleProgress = forceFinalSample
+                    ? 1
+                    : Math.min(1, (now - sampledAt) / sampleInterval);
+                const liveRect = {
+                    left: lerp(previousSample.rect.left, nextSample.rect.left, sampleProgress),
+                    top: lerp(previousSample.rect.top, nextSample.rect.top, sampleProgress),
+                    width: lerp(previousSample.rect.width, nextSample.rect.width, sampleProgress),
+                    height: lerp(previousSample.rect.height, nextSample.rect.height, sampleProgress)
+                };
+                const liveTransform = {
+                    rotation: lerp(previousSample.transform.rotation, nextSample.transform.rotation, sampleProgress),
+                    skewX: lerp(previousSample.transform.skewX, nextSample.transform.skewX, sampleProgress),
+                    scaleX: lerp(previousSample.transform.scaleX, nextSample.transform.scaleX, sampleProgress),
+                    scaleY: lerp(previousSample.transform.scaleY, nextSample.transform.scaleY, sampleProgress)
+                };
                 const liveEnd = {
                     x: liveRect.left + liveRect.width / 2,
                     y: liveRect.top + liveRect.height / 2
@@ -877,10 +922,8 @@ let MoniMorphModal = class MoniMorphModal extends MoniElement {
                     progress * progress * liveEnd.y;
                 // La contracción modal mantiene su easing, pero cualquier mutación
                 // adicional del target se suma completa para seguirla en tiempo real.
-                const liveVisualWidth = destination.source.offsetWidth || liveRect.width;
-                const liveVisualHeight = destination.source.offsetHeight || liveRect.height;
-                const initialVisualWidth = destination.source.offsetWidth || targetRect.width;
-                const initialVisualHeight = destination.source.offsetHeight || targetRect.height;
+                const liveVisualWidth = lerp(previousSample.visualWidth, nextSample.visualWidth, sampleProgress);
+                const liveVisualHeight = lerp(previousSample.visualHeight, nextSample.visualHeight, sampleProgress);
                 const width = current.width + (initialVisualWidth - current.width) * progress +
                     (liveVisualWidth - initialVisualWidth);
                 const height = current.height + (initialVisualHeight - current.height) * progress +
@@ -894,10 +937,10 @@ let MoniMorphModal = class MoniMorphModal extends MoniElement {
                     skewX: liveTransform.skewX * progress,
                     scaleX: 1 + (liveTransform.scaleX - 1) * progress,
                     scaleY: 1 + (liveTransform.scaleY - 1) * progress,
-                    backgroundColor: gsap.utils.interpolate(panelStartVisual.backgroundColor, liveState.backgroundColor, progress),
-                    color: gsap.utils.interpolate(panelStartVisual.color, liveState.color, progress),
-                    borderRadius: gsap.utils.interpolate(panelStartVisual.borderRadius, liveState.borderRadius, progress),
-                    boxShadow: gsap.utils.interpolate(panelStartVisual.boxShadow, liveState.boxShadow, progress)
+                    backgroundColor: gsap.utils.interpolate(panelStartVisual.backgroundColor, gsap.utils.interpolate(previousSample.backgroundColor, nextSample.backgroundColor, sampleProgress), progress),
+                    color: gsap.utils.interpolate(panelStartVisual.color, gsap.utils.interpolate(previousSample.color, nextSample.color, sampleProgress), progress),
+                    borderRadius: gsap.utils.interpolate(panelStartVisual.borderRadius, gsap.utils.interpolate(previousSample.borderRadius, nextSample.borderRadius, sampleProgress), progress),
+                    boxShadow: gsap.utils.interpolate(panelStartVisual.boxShadow, gsap.utils.interpolate(previousSample.boxShadow, nextSample.boxShadow, sampleProgress), progress)
                 });
                 // El contenido del target no debe flotar sobre el modal grande. Solo
                 // comienza a materializarse cuando posición y relación de aspecto ya
@@ -964,6 +1007,7 @@ let MoniMorphModal = class MoniMorphModal extends MoniElement {
         const idx = MoniMorphModal_1._openStack.indexOf(this);
         if (idx > -1)
             MoniMorphModal_1._openStack.splice(idx, 1);
+        this._releaseDocumentScrollLock();
     }
     _captureOriginFallbacks(origin) {
         this._originFallbacks = [];
@@ -983,11 +1027,28 @@ let MoniMorphModal = class MoniMorphModal extends MoniElement {
         if (this.target)
             this._resolveTarget();
         const candidates = [this._targetEl, ...this._originFallbacks].filter((candidate, index, all) => !!candidate && all.indexOf(candidate) === index);
+        // Si el trigger original sigue en el DOM pero salio del viewport, no se
+        // debe sustituir por uno de sus ancestros visibles. Ese fallback haria que
+        // el modal colapsara hacia un contenedor que nunca fue su origen visual.
+        // En este caso el cierre seguro es la animacion sin origen (fade + scale).
+        if (this._targetEl?.isConnected && !this._intersectsViewport(this._targetEl)) {
+            this._debugMorph('close', null, 'fade', candidates);
+            return null;
+        }
         const resolved = candidates.find((candidate) => this._isUsableClosingTarget(candidate)) ?? null;
         const strategy = !resolved ? 'fade' : resolved === this._targetEl ? 'target' : 'ancestor';
         this._debugMorph('close', resolved, strategy, candidates);
         return resolved;
     }
+    _intersectsViewport(el) {
+        const rect = el.getBoundingClientRect();
+        return rect.width >= 2
+            && rect.height >= 2
+            && rect.right > 0
+            && rect.bottom > 0
+            && rect.left < window.innerWidth
+            && rect.top < window.innerHeight;
+    }
     _debugMorph(phase, resolved, strategy, candidates) {
         if (!this.debug)
             return;
@@ -1013,10 +1074,7 @@ let MoniMorphModal = class MoniMorphModal extends MoniElement {
     _isUsableClosingTarget(el) {
         if (!el?.isConnected)
             return false;
-        const rect = el.getBoundingClientRect();
-        if (rect.width < 2 || rect.height < 2)
-            return false;
-        if (rect.right <= 0 || rect.bottom <= 0 || rect.left >= window.innerWidth || rect.top >= window.innerHeight)
+        if (!this._intersectsViewport(el))
             return false;
         let current = el;
         while (current && current !== document.body) {
@@ -1665,8 +1723,12 @@ let MoniMorphModal = class MoniMorphModal extends MoniElement {
         if (this._usesFullscreen())
             return new DOMRect(0, 0, vw, vh);
         const padding = 16;
-        let width = this.autoSize && naturalSize ? naturalSize.width : this._parseSize(this.expandedWidth, vw);
-        let height = this.autoSize && naturalSize ? naturalSize.height : this._parseSize(this.expandedHeight, vh);
+        const configuredWidth = this._parseSize(this.expandedWidth, vw, 'width');
+        const configuredHeight = this._parseSize(this.expandedHeight, vh, 'height');
+        let width = this.autoSize && naturalSize ? naturalSize.width : configuredWidth;
+        let height = (this.autoSize || this.autoHeight) && naturalSize
+            ? Math.min(naturalSize.height, configuredHeight)
+            : configuredHeight;
         width = Math.min(width, vw - padding * 2);
         height = Math.min(height, vh - padding * 2);
         let top = targetRect.top;
@@ -1789,60 +1851,100 @@ let MoniMorphModal = class MoniMorphModal extends MoniElement {
         top = Math.max(padding, Math.min(top, vh - height - padding));
         return new DOMRect(left, top, width, height);
     }
-    _parseSize(value, ref) {
-        const num = parseFloat(value);
+    _measureNaturalSize(panel) {
+        const prevW = panel.style.getPropertyValue('--_panel-width');
+        const prevH = panel.style.getPropertyValue('--_panel-height');
+        const prevPanelW = panel.style.width;
+        const prevPanelH = panel.style.height;
+        const bodyEl = this.shadowRoot.querySelector('.body');
+        const prevOverflow = bodyEl?.style.overflow ?? '';
+        const configuredWidth = Math.min(this._parseSize(this.expandedWidth, window.innerWidth, 'width'), window.innerWidth - 32);
+        panel.style.width = this.autoSize ? 'auto' : `${configuredWidth}px`;
+        panel.style.height = 'auto';
+        panel.style.setProperty('--_panel-width', this.autoSize ? 'max-content' : `${configuredWidth}px`);
+        panel.style.setProperty('--_panel-height', 'max-content');
+        if (bodyEl)
+            bodyEl.style.overflow = 'visible';
+        const size = { width: this._inner.scrollWidth, height: this._inner.scrollHeight };
+        panel.style.setProperty('--_panel-width', prevW);
+        panel.style.setProperty('--_panel-height', prevH);
+        panel.style.width = prevPanelW;
+        panel.style.height = prevPanelH;
+        if (bodyEl)
+            bodyEl.style.overflow = prevOverflow;
+        return size;
+    }
+    _parseSize(value, ref, axis) {
+        const normalized = value.trim();
+        if (/^(calc|min|max|clamp)\(/i.test(normalized) && CSS.supports(axis, normalized)) {
+            const probe = document.createElement('div');
+            Object.assign(probe.style, {
+                position: 'fixed',
+                visibility: 'hidden',
+                pointerEvents: 'none',
+                contain: 'strict',
+                width: axis === 'width' ? normalized : '0',
+                height: axis === 'height' ? normalized : '0'
+            });
+            document.body.appendChild(probe);
+            const measured = probe.getBoundingClientRect()[axis];
+            probe.remove();
+            if (measured > 0)
+                return measured;
+        }
+        const num = parseFloat(normalized);
         if (Number.isNaN(num))
             return 352;
-        if (value.endsWith('px'))
+        if (normalized.endsWith('px'))
             return num;
-        if (value.endsWith('rem'))
+        if (normalized.endsWith('rem'))
             return num * 16;
-        if (value.endsWith('em'))
+        if (normalized.endsWith('em'))
             return num * 16;
-        if (value.endsWith('%'))
+        if (normalized.endsWith('%'))
             return (num / 100) * ref;
-        if (value.endsWith('vw'))
+        if (normalized.endsWith('vw'))
             return (num / 100) * window.innerWidth;
-        if (value.endsWith('vh'))
+        if (normalized.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: var(--moni-morph-panel-radius, 1.75rem);
-				box-shadow: var(--elevate2);
+        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: var(--moni-morph-panel-radius, 1.75rem);
+				box-shadow: var(--elevate2);
 				z-index: var(--_z-index, 100);
 			}
 
@@ -1858,89 +1960,90 @@ let MoniMorphModal = class MoniMorphModal extends MoniElement {
 			.panel.fullscreen footer {
 				padding-block-end: max(1.5rem, env(safe-area-inset-bottom));
 			}
-
-			.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;
-			}
-
+
+			.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: var(--moni-morph-body-overflow-y, auto);
 				overflow-x: var(--moni-morph-body-overflow-x, hidden);
-				padding: var(--moni-morph-body-padding, 0 1.5rem);
-				scrollbar-gutter: var(--moni-morph-body-scrollbar-gutter, stable);
-			}
-
-			.panel.is-animating .body {
-				overflow: hidden !important;
-			}
-			
-			.panel.is-animating .body::-webkit-scrollbar {
-				display: none;
-			}
-
-			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;
-			}
+				overscroll-behavior: contain;
+				padding: var(--moni-morph-body-padding, 0 1.5rem);
+				scrollbar-gutter: var(--moni-morph-body-scrollbar-gutter, stable);
+			}
+
+			.panel.is-animating .body {
+				overflow: hidden !important;
+			}
+			
+			.panel.is-animating .body::-webkit-scrollbar {
+				display: none;
+			}
+
+			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;
+			}
 		`
     ]; }
     /**
@@ -1968,45 +2071,45 @@ let MoniMorphModal = class MoniMorphModal extends MoniElement {
         const visible = this._visible || this.open;
         const headerEmpty = !this._hasHeader && !this.showCloseButton;
         const fullscreen = this._usesFullscreen();
-        return html `
-			${this.hasBackdrop ? html `
-				<div
-					class="backdrop ${visible ? 'open' : ''}"
-					part="backdrop"
-					style="${!this.modal ? 'background-color: transparent;' : ''}"
-				></div>
-			` : ''}
+        return html `
+			${this.hasBackdrop ? html `
+				<div
+					class="backdrop ${visible ? 'open' : ''}"
+					part="backdrop"
+					style="${!this.modal ? 'background-color: transparent;' : ''}"
+				></div>
+			` : ''}
 			<div class="panel ${fullscreen ? 'fullscreen' : ''}" 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>
+				<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>
+            ? 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>
+            : ''}
+					</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>
 		`;
     }
 };
@@ -2055,6 +2158,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'auto-size', converter: litBool })
 ], MoniMorphModal.prototype, "autoSize", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'auto-height', converter: litBool })
+], MoniMorphModal.prototype, "autoHeight", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, converter: litBool })
 ], MoniMorphModal.prototype, "fullscreen", void 0);