@moni-labs/moni-ui 0.3.0 → 0.3.2

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

@@ -22,49 +22,49 @@ 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');
 /**
- * Material Design 3 Morph Modal component.
+ * Componente Material Design 3 Morph Modal.
  *
- * A highly interactive dialog that uses GSAP FLIP (First, Last, Invert, Play)
- * animations to seamlessly "morph" any clicked element on the page into a full
- * modal surface, and morph it back when closed.
+ * Un diálogo altamente interactivo que usa animaciones GSAP FLIP (First, Last, Invert, Play)
+ * para "transformar" (morph) sin problemas cualquier elemento clickeado en la página en una superficie
+ * modal completa, y transformarlo de vuelta cuando se cierra.
  *
- * **Motion choreography:**
- * This component implements the complex M3 container transform pattern. When
- * triggered, the source element visually expands into the modal. The modal's
- * background color, border radius, and typography fade and cross-dissolve
- * perfectly with the origin element.
+ * **Coreografía de movimiento:**
+ * Este componente implementa el patrón complejo de transformación de contenedor de M3. Cuando
+ * se activa, el elemento origen se expande visualmente hacia el modal. El color de fondo,
+ * el radio del borde y la tipografía del modal se desvanecen y se funden
+ * perfectamente con el elemento de origen.
  *
- * **Triggering mechanism:**
- * Consumers must provide the `triggerEvent` property containing the original
- * pointer/click `Event` that initiated the open action. The component extracts
- * the `event.target` (or uses `clientX/Y` as a fallback) to determine the exact
- * origin coordinates for the GSAP FLIP animation.
+ * **Mecanismo de activación:**
+ * Los consumidores deben proporcionar la propiedad `triggerEvent` que contenga el `Event`
+ * de puntero/clic original que inició la acción de apertura. El componente extrae
+ * el `event.target` (o usa `clientX/Y` como respaldo) para determinar las coordenadas
+ * de origen exactas para la animación GSAP FLIP.
  *
- * **Dialog behavior:**
- * Internally, it uses the native `<dialog>` element. It traps focus, supports
- * `Escape` to close, and handles scrim/backdrop clicks (which trigger the
- * reverse morph animation before actually closing the native dialog).
+ * **Comportamiento del diálogo:**
+ * Internamente, utiliza el elemento nativo `<dialog>`. Atrapa el foco, soporta
+ * `Escape` para cerrar, y maneja clics en el fondo/scrim (que activan la
+ * animación de morphing inverso antes de cerrar realmente el diálogo nativo).
  *
  * @example
  * ```html
- * <moni-morph-modal id="myModal" title="Details">
- *   <p>This modal morphed from the button you just clicked.</p>
+ * <moni-morph-modal id="myModal" title="Detalles">
+ *   <p>Este modal se transformó desde el botón que acabas de clickear.</p>
  * </moni-morph-modal>
  *
- * <moni-button id="openBtn">Open Details</moni-button>
+ * <moni-button id="openBtn">Abrir Detalles</moni-button>
  *
  * <script>
  *   const modal = document.getElementById('myModal');
  *   document.getElementById('openBtn').addEventListener('click', (e) => {
- *     modal.triggerEvent = e; // Pass the event so it knows where to morph from
+ *     modal.triggerEvent = e; // Pasa el evento para que sepa desde dónde transformarse
  *     modal.open = true;
  *   });
  * </script>
  * ```
  *
- * @slot default - The main body content of the modal.
- * @slot header  - Custom header content (overrides `title` attribute).
- * @slot actions - Action buttons displayed at the bottom right.
+ * @slot default - El contenido del cuerpo principal del modal.
+ * @slot header  - Contenido de encabezado personalizado (sobrescribe el atributo `title`).
+ * @slot actions - Botones de acción mostrados en la parte inferior derecha.
  */
 const litBool = {
     fromAttribute: (value) => value !== 'false' && value !== null,
@@ -73,20 +73,95 @@ const litBool = {
 let MoniMorphModal = class MoniMorphModal extends MoniElement {
     constructor() {
         super(...arguments);
+        /**
+         * Selector del elemento disparador desde el cual transformarse (ej. '#fab' o '.my-button').
+         * Si se omite, el modal aún puede activarse programáticamente estableciendo `open = true`.
+         * @type {string}
+         */
         this.target = '';
+        /**
+         * Controla el estado abierto/cerrado del modal.
+         * Puede establecerse directamente, o se gestiona internamente cuando se hace clic en el elemento `target`.
+         * @type {boolean}
+         */
         this.open = false;
+        /**
+         * Si es true, renderiza un fondo y atrapa el foco, actuando como un verdadero diálogo modal.
+         * @type {boolean}
+         * @default true
+         */
         this.modal = true;
+        /**
+         * Posición preferida del modal en relación con la ventana gráfica.
+         * @type {Placement}
+         * @default 'center'
+         */
         this.placement = 'center';
+        /**
+         * El ancho del modal cuando está completamente expandido.
+         * @type {string}
+         * @default '22rem'
+         */
         this.expandedWidth = '22rem';
+        /**
+         * La altura del modal cuando está completamente expandido.
+         * @type {string}
+         * @default '18rem'
+         */
         this.expandedHeight = '18rem';
+        /**
+         * Si es true, hacer clic fuera del modal lo cerrará.
+         * @type {boolean}
+         * @default true
+         */
         this.closeOnClickOutside = true;
+        /**
+         * Si es true, presionar la tecla Escape cerrará el modal.
+         * @type {boolean}
+         * @default true
+         */
         this.closeOnEsc = true;
+        /**
+         * Si es true, muestra un botón de icono de cierre por defecto en el encabezado.
+         * @type {boolean}
+         */
         this.showCloseButton = false;
+        /**
+         * Si es true, intenta fundir/transformar una etiqueta del disparador hacia el encabezado del modal.
+         * @type {boolean}
+         */
         this.morphLabel = false;
+        /**
+         * Un selector CSS personalizado utilizado para encontrar el elemento de etiqueta específico dentro del target a transformar.
+         * @type {string}
+         */
         this.morphLabelSelector = '';
+        /**
+         * Si es true, renderiza un fondo atenuado detrás del modal.
+         * @type {boolean}
+         * @default true
+         */
         this.hasBackdrop = true;
+        /**
+         * Si es true, oculta el elemento disparador (target) mientras el modal está abierto.
+         * @type {boolean}
+         */
         this.hideTarget = false;
+        /**
+         * Si es true, fuerza al modal a cubrir visualmente la ubicación original del target antes de expandirse.
+         * @type {boolean}
+         */
         this.coverTarget = false;
+        /**
+         * Si es true, el modal calcula automáticamente su tamaño final basándose en el contenido interno (ignora expandedWidth y expandedHeight).
+         * @type {boolean}
+         */
+        this.autoSize = false;
+        /**
+         * Si es true, aplica un efecto de desenfoque (blur) al contenido durante la animación de entrada y salida.
+         * @type {boolean}
+         */
+        this.blurContent = false;
         this._hasHeader = false;
         this._hasFooter = false;
         this._hasTriggerLabel = false;
@@ -97,8 +172,20 @@ let MoniMorphModal = class MoniMorphModal extends MoniElement {
         this._zIndex = 100;
         this._morphEls = { text: null, icon: null };
         this._targetStylesCache = new Map();
+        /**
+         * Handler encapsulado para el evento click en el trigger.
+         * Dispara la animación de apertura.
+         */
         this._onTargetClick = () => this.show();
+        /**
+         * Handler encapsulado para interceptar teclas a nivel global (ej: Escape).
+         */
         this._onDocKeydown = (e) => this._handleDocKeydown(e);
+        /**
+         * Handler de clics globales para detectar interacciones fuera del modal (Click outside).
+         * Sólo cierra el modal si `closeOnClickOutside` es true y el usuario no hizo clic
+         * dentro de las dimensiones del panel animado ni del botón original.
+         */
         this._onDocClick = (e) => {
             if (!this.open || !this._visible || !this.closeOnClickOutside)
                 return;
@@ -134,6 +221,12 @@ let MoniMorphModal = class MoniMorphModal extends MoniElement {
         this._restoreTargetContent();
         super.disconnectedCallback();
     }
+    /**
+     * Hook del ciclo de vida reactivo (Lit).
+     * Observa cambios asíncronos en el atributo `target` para re-bindear el disparador,
+     * y reacciona a cambios programáticos de la propiedad `open` para ejecutar
+     * imperativamente la animación de apertura (`show`) o cierre (`hide`).
+     */
     updated(changed) {
         super.updated(changed);
         if (changed.has('target')) {
@@ -146,21 +239,34 @@ let MoniMorphModal = class MoniMorphModal extends MoniElement {
                 this.hide();
         }
     }
+    /**
+     * Busca en el DOM el elemento que dispara el modal (el trigger) basándose en la propiedad `target`.
+     * Establece el listener de click que iniciará la animación de morphing.
+     */
     _resolveTarget() {
         if (!this.target)
             return;
         const el = document.querySelector(this.target);
         if (!el) {
-            console.warn(`[moni-morph-modal] target "${this.target}" not found`);
+            // Es normal que no se encuentre el target si está condicionado por un #if en Svelte
+            // Se intentará resolver nuevamente al llamar a show()
             return;
         }
+        // Si el target cambió dinámicamente, limpiamos el listener anterior para evitar memory leaks
         if (this._targetEl && this._targetEl !== el) {
             this._targetEl.removeEventListener('click', this._onTargetClick);
         }
         this._targetEl = el;
         this._targetEl.addEventListener('click', this._onTargetClick);
     }
+    /**
+     * Dispara la apertura del modal y coordina la animación de FLIP (First, Last, Invert, Play) / Morphing.
+     * 1. Oculta visualmente el target original.
+     * 2. Posiciona el modal colapsado exactamente sobre el target original (mismas dimensiones, color, y radios).
+     * 3. Expande fluidamente el modal a sus dimensiones finales mediante transformaciones CSS.
+     */
     show() {
+        // Prevenimos ejecuciones concurrentes si ya se está animando o está visible
         if (this._isAnimating || this._visible)
             return;
         if (!this._targetEl)
@@ -170,25 +276,35 @@ let MoniMorphModal = class MoniMorphModal extends MoniElement {
             return;
         }
         this._isAnimating = true;
+        // Flag interno para evitar loops infinitos en el hook `updated()`
         this._handlingOpenChange = true;
         this.open = true;
         this._handlingOpenChange = false;
+        // 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;
+        // Aplicamos variables CSS inline para gestionar las transiciones del backdrop y el modal
         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)');
+        // Fase "First": Ocultamos o cubrimos el trigger original según la configuración del desarrollador
         this._hideTargetContent();
         void this.updateComplete.then(async () => {
             if (!this._targetEl || !this._panel || !this._inner) {
                 this._isAnimating = false;
                 return;
             }
+            // Añadimos clase para prevenir interacciones durante la animación
             this._panel.classList.add('is-animating');
+            // Esperamos un frame para asegurar que el navegador aplicó el `display: block`
+            // necesario antes de poder leer las dimensiones.
             await new Promise((resolve) => requestAnimationFrame(resolve));
+            // 1. "First": Calculamos el estado visual actual del trigger
             const targetState = this._getTargetState(this._targetEl);
             const panel = this._panel;
+            // 2. "Invert": Posicionamos el modal como un clon visual exacto del trigger.
+            // Desactivamos la sombra y forzamos el color/borde para coincidir con el botón/FAB.
             this._applyRect(panel, targetState.rect);
             panel.style.backgroundColor = targetState.backgroundColor;
             panel.style.color = targetState.color;
@@ -201,20 +317,27 @@ let MoniMorphModal = class MoniMorphModal extends MoniElement {
             if (this._backdrop) {
                 this._backdrop.style.zIndex = String(this._zIndex - 1);
             }
+            // Limpiamos elementos fantasma previos si el usuario interactuó muy rápido
             this._cleanupMorphElements();
+            // Respetamos la preferencia de sistema de animaciones reducidas por accesibilidad (a11y)
             const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+            // 3. Verificamos si debemos orquestar la animación compleja del label flotante cruzado
             let shouldMorph = this._shouldMorphLabel() && !prefersReducedMotion;
             const morphTargets = [];
             let source = null;
             const headerWrapper = this.shadowRoot.querySelector('.header-morph-wrapper');
             if (shouldMorph) {
+                // Preparamos la estructura del header para que el texto real entre con un fade in
                 this._animateLabelOpen();
+                // Buscamos el ícono y el texto dentro del botón de origen (trigger)
                 source = this._resolveMorphSource();
+                // Si existe un nodo de texto, creamos un elemento flotante (fantasma) en el modal
                 if (source.text) {
                     const el = this._createMorphText(source.text.content, source.text.sourceEl);
                     this._positionElement(el, source.text.rect);
                     morphTargets.push(el);
                 }
+                // Hacemos lo mismo si el botón original contenía un icono
                 if (source.icon) {
                     const el = this._createMorphIcon(source.icon.element);
                     this._positionElement(el, source.icon.rect);
@@ -224,27 +347,56 @@ let MoniMorphModal = class MoniMorphModal extends MoniElement {
                     shouldMorph = false;
             }
             if (shouldMorph && headerWrapper) {
+                // Ocultamos temporalmente el contenido final del header mientras animamos los elementos flotantes
                 headerWrapper.style.opacity = '0';
             }
+            // Capturamos el estado "First" del panel (tamaño pequeño de botón) y de los elementos flotantes
             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);
+            // 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;
+            }
+            const finalRect = this._computeFinalRect(targetState.rect, naturalSize);
             panel.style.setProperty('--_panel-width', `${finalRect.width}px`);
             panel.style.setProperty('--_panel-height', `${finalRect.height}px`);
             this._applyRect(panel, finalRect);
+            // Removemos las forzadas de estilo del trigger para que herede las propias del modal
             panel.style.backgroundColor = '';
             panel.style.color = '';
             panel.style.borderRadius = '';
             panel.style.boxShadow = '';
             if (shouldMorph && source) {
+                // Medimos dónde van a terminar el icono y el texto dentro del modal ya expandido
                 const textRect = this._measureHeaderTextRect();
                 const iconRect = this._measureHeaderIconRect();
                 const headerComputed = window.getComputedStyle(this._header);
                 if (this._morphEls.text && textRect) {
+                    // Movemos el texto flotante a su destino y le pedimos que adopte los estilos del header
                     this._positionElement(this._morphEls.text, textRect);
                     this._morphEls.text.style.color = headerComputed.color || 'var(--on-surface)';
                     this._morphEls.text.style.fontSize = headerComputed.fontSize || 'inherit';
@@ -252,6 +404,7 @@ let MoniMorphModal = class MoniMorphModal extends MoniElement {
                     this._morphEls.text.style.lineHeight = headerComputed.lineHeight || 'inherit';
                 }
                 if (this._morphEls.icon && iconRect) {
+                    // Hacemos lo mismo con el icono
                     this._positionElement(this._morphEls.icon, iconRect);
                     this._morphEls.icon.style.color = headerComputed.color || 'var(--on-surface)';
                 }
@@ -264,28 +417,34 @@ let MoniMorphModal = class MoniMorphModal extends MoniElement {
                 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, {
+                if (this.blurContent) {
+                    gsap.set(morphTargets, { filter: 'blur(16px)' });
+                }
+                const flipConfig = {
                     targets: morphTargets,
                     duration: 0.38,
                     ease: 'morph-open',
                     zIndex: this._zIndex + 10
-                });
+                };
+                if (this.blurContent) {
+                    flipConfig.filter = 'blur(0px)';
+                    flipConfig.clearProps = 'filter';
+                }
+                Flip.from(morphState, flipConfig);
             }
-            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)' }, {
+            const body = this.shadowRoot.querySelector('.body');
+            const footer = this.shadowRoot.querySelector('footer');
+            const closeBtn = this.shadowRoot.querySelector('.close-btn');
+            const fadeTargets = [body, footer, closeBtn].filter(Boolean);
+            const initialBlur = this.blurContent ? 'blur(16px)' : 'blur(0px)';
+            gsap.set(fadeTargets, { opacity: 0, y: 8, filter: initialBlur });
+            gsap.fromTo(fadeTargets, { opacity: 0, y: 8, filter: initialBlur }, {
                 opacity: 1,
                 y: 0,
                 filter: 'blur(0px)',
@@ -295,10 +454,18 @@ let MoniMorphModal = class MoniMorphModal extends MoniElement {
                 ease: 'power2.out',
                 onComplete: () => {
                     gsap.set(fadeTargets, { clearProps: 'opacity,transform,filter' });
+                    this._panel.classList.remove('is-animating');
                 }
             });
         });
     }
+    /**
+     * Solución a un caso borde de FLIP Animations:
+     * Si el `.panel` original carece de un color de fondo sólido, la interpolación
+     * de GSAP puede comportarse erráticamente. Este método "asciende" el árbol del DOM
+     * hasta encontrar un padre con un color de fondo sólido y lo aplica, garantizando
+     * que el modal no colapse de forma transparente de regreso hacia el gatillo.
+     */
     _ensureSolidPanelBackground() {
         if (!this._panel)
             return;
@@ -327,16 +494,15 @@ let MoniMorphModal = class MoniMorphModal extends MoniElement {
         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 body = this.shadowRoot.querySelector('.body');
+        const footer = this.shadowRoot.querySelector('footer');
+        const closeBtn = this.shadowRoot.querySelector('.close-btn');
+        const fadeTargets = [body, footer, closeBtn].filter(Boolean);
         const headerWrapper = this.shadowRoot.querySelector('.header-morph-wrapper');
+        const targetBlur = this.blurContent ? 'blur(12px)' : 'blur(0px)';
         gsap.fromTo(fadeTargets, { opacity: 1, filter: 'blur(0px)' }, {
             opacity: 0,
-            filter: 'blur(4px)',
+            filter: targetBlur,
             duration: 0.12,
             ease: 'power2.in',
             onComplete: () => {
@@ -380,7 +546,29 @@ let MoniMorphModal = class MoniMorphModal extends MoniElement {
                     props: 'color,fontSize,fontWeight,lineHeight'
                 });
                 const targetState = this._getTargetState(this._targetEl);
-                const finalRect = this._computeFinalRect(targetState.rect);
+                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;
+                }
+                const finalRect = this._computeFinalRect(targetState.rect, naturalSize);
                 panel.style.setProperty('--_panel-width', `${finalRect.width}px`);
                 panel.style.setProperty('--_panel-height', `${finalRect.height}px`);
                 this._applyRect(panel, targetState.rect);
@@ -438,12 +626,19 @@ let MoniMorphModal = class MoniMorphModal extends MoniElement {
                     }
                 });
                 if (morphTargets.length > 0) {
-                    Flip.from(morphState, {
+                    if (this.blurContent) {
+                        gsap.set(morphTargets, { filter: 'blur(0px)' });
+                    }
+                    const flipConfig = {
                         targets: morphTargets,
                         duration: 0.3,
                         ease: 'morph-close',
                         zIndex: this._zIndex + 10
-                    });
+                    };
+                    if (this.blurContent) {
+                        flipConfig.filter = 'blur(12px)';
+                    }
+                    Flip.from(morphState, flipConfig);
                 }
             }
         });
@@ -463,6 +658,12 @@ let MoniMorphModal = class MoniMorphModal extends MoniElement {
         e.stopPropagation();
         this.hide();
     }
+    /**
+     * Fase "First" de la animación (Cierre del Trigger):
+     * Determina cómo desaparecer u ocultar el botón original mientras el modal ocupa su lugar.
+     * Mantiene el cache de opacidades y colores originales para poder restaurarlos
+     * idénticamente al cerrar el modal (evitando saltos visuales).
+     */
     _hideTargetContent() {
         if (!this._targetEl)
             return;
@@ -495,6 +696,10 @@ let MoniMorphModal = class MoniMorphModal extends MoniElement {
                 saveAndHide(icon, 'opacity');
         }
     }
+    /**
+     * Restaura puramente los estilos originales del botón Trigger tras terminar
+     * la animación de cierre, leyendo las opacidades/colores almacenados en caché.
+     */
     _restoreTargetContent() {
         if (!this._targetEl)
             return;
@@ -559,10 +764,10 @@ let MoniMorphModal = class MoniMorphModal extends MoniElement {
         }
     }
     _animateLabelOpen() {
-        // No-op: label morphing is handled by the unified FLIP timeline in show()
+        // No-op: el morphing de la etiqueta es manejado por el timeline unificado FLIP en show()
     }
     _animateLabelClose() {
-        // No-op: label morphing is handled by the unified FLIP timeline in hide()
+        // No-op: el morphing de la etiqueta es manejado por el timeline unificado FLIP en hide()
     }
     _createMorphText(sourceText, sourceEl) {
         const el = document.createElement('div');
@@ -866,12 +1071,12 @@ let MoniMorphModal = class MoniMorphModal extends MoniElement {
         el.style.width = `${rect.width}px`;
         el.style.height = `${rect.height}px`;
     }
-    _computeFinalRect(targetRect) {
+    _computeFinalRect(targetRect, naturalSize) {
         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);
+        let width = this.autoSize && naturalSize ? naturalSize.width : this._parseSize(this.expandedWidth, vw);
+        let height = this.autoSize && naturalSize ? naturalSize.height : this._parseSize(this.expandedHeight, vh);
         width = Math.min(width, vw - padding * 2);
         height = Math.min(height, vh - padding * 2);
         let top = targetRect.top;
@@ -1046,7 +1251,7 @@ let MoniMorphModal = class MoniMorphModal extends MoniElement {
 				overflow: hidden;
 				background-color: var(--surface-container-high);
 				color: var(--on-surface);
-				border-radius: 1.75rem;
+				border-radius: var(--moni-morph-panel-radius, 1.75rem);
 				box-shadow: var(--elevate2);
 				z-index: var(--_z-index, 100);
 			}
@@ -1075,13 +1280,18 @@ let MoniMorphModal = class MoniMorphModal extends MoniElement {
 
 			.body {
 				flex: 1;
-				overflow-y: auto;
-				padding: 0 1.5rem;
-				scrollbar-gutter: stable;
+				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;
+				overflow: hidden !important;
+			}
+			
+			.panel.is-animating .body::-webkit-scrollbar {
+				display: none;
 			}
 
 			footer {
@@ -1130,6 +1340,27 @@ let MoniMorphModal = class MoniMorphModal extends MoniElement {
 			}
 		`
     ]; }
+    /**
+     * Renderiza el caparazón del modal morph: fondo opcional + contenedor de panel.
+     *
+     * **Bandera `_visible`:**
+     * `visible = this._visible || this.open` mantiene vivo el DOM mientras se reproduce
+     * la animación de cierre de GSAP. `_visible` se establece en `true` al inicio de la apertura y
+     * en `false` solo después de que se dispara el `onComplete` de la animación de cierre. Sin esto,
+     * Lit eliminaría el panel del DOM antes de que la animación termine.
+     *
+     * **Condicional del fondo (backdrop):**
+     * El div `.backdrop` solo se renderiza cuando `hasBackdrop=true`. Cuando `modal=false`,
+     * el `background-color` del fondo se establece en `transparent` para que el fondo superpuesto
+     * (scrim) sea invisible, pero los eventos del puntero aún se consumen (clic para cerrar).
+     *
+     * **Objetivo de morphing de GSAP:**
+     * `.panel` es el objetivo de la animación GSAP. Al abrir: se anima desde el
+     * `getBoundingClientRect()` del elemento anclaje (posición + tamaño) a su tamaño CSS natural
+     * mediante `gsap.fromTo()`. Al cerrar: a la inversa. `.panel-inner` recibe una
+     * contra-escala para evitar que el contenido interno se escale junto con el panel,
+     * creando una ilusión física de "expandirse desde el origen".
+     */
     render() {
         const visible = this._visible || this.open;
         const headerEmpty = !this._hasHeader && !this.showCloseButton;
@@ -1217,6 +1448,12 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'cover-target', converter: litBool })
 ], MoniMorphModal.prototype, "coverTarget", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'auto-size', converter: litBool })
+], MoniMorphModal.prototype, "autoSize", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'blur-content', converter: litBool })
+], MoniMorphModal.prototype, "blurContent", void 0);
 __decorate([
     query('.panel')
 ], MoniMorphModal.prototype, "_panel", void 0);