@moni-labs/moni-ui 0.3.0 → 0.3.2

package/dist/components/moni-menu.d.ts

@@ -6,44 +6,44 @@
  */
 import { MoniElement } from './_base/index.js';
 /**
- * Material Design 3 Menu component.
+ * Componente Material Design 3 Menu (Menú).
  *
- * Menus display a list of choices on a temporary surface. They appear when
- * users interact with a button, action, or other control.
+ * Los menús muestran una lista de opciones en una superficie temporal. Aparecen cuando
+ * los usuarios interactúan con un botón, acción u otro control.
  *
- * **M3 spec reference:** `m3-docs/components/menus/guidelines.md`
+ * **Referencia de la especificación M3:** `m3-docs/components/menus/guidelines.md`
  *
- * **Positioning architecture:**
- * The menu uses `position: absolute` relative to its nearest positioned
- * ancestor. The component's `:host` uses `display: contents`, meaning the
- * inner `<menu>` element directly participates in the consumer's layout context.
- * **Crucial:** The consumer must apply `position: relative` to the wrapper
- * element that contains both the trigger and the `<moni-menu>`.
+ * **Arquitectura de posicionamiento:**
+ * El menú usa `position: absolute` relativo a su ancestro posicionado más cercano.
+ * El `:host` del componente usa `display: contents`, lo que significa que el
+ * elemento interior `<menu>` participa directamente en el contexto de diseño del consumidor.
+ * **Crucial:** El consumidor debe aplicar `position: relative` al elemento contenedor
+ * que contiene tanto el activador (trigger) como el `<moni-menu>`.
  *
- * **Auto-flip positioning:**
- * Per M3 guidelines, menus should flip to the opposite side of the anchor
- * if they overflow the viewport.
- * - **Modern browsers (Chrome/Edge 125+, Safari 18+):** Uses CSS anchor
- *   positioning and `@position-try-fallback` natively when `flip=true`.
- * - **Fallback:** A JavaScript polyfill measures the menu after it opens. If
- *   it overflows the requested `placement`, it sets an internal state to flip
- *   the placement classes.
+ * **Posicionamiento de auto-volteo (auto-flip):**
+ * Según las pautas de M3, los menús deben voltearse hacia el lado opuesto del anclaje
+ * si se desbordan de la ventana gráfica (viewport).
+ * - **Navegadores modernos (Chrome/Edge 125+, Safari 18+):** Utiliza el posicionamiento
+ *   de anclaje de CSS y `@position-try-fallback` nativamente cuando `flip=true`.
+ * - **Alternativa (Fallback):** Un polyfill de JavaScript mide el menú después de que se abre. Si
+ *   se desborda de la posición `placement` solicitada, establece un estado interno para voltear
+ *   las clases de posicionamiento.
  *
- * **State management:**
- * The `active` attribute controls visibility. Consumers must listen to trigger
- * events (like `click`) and toggle the `active` property.
+ * **Gestión del estado:**
+ * El atributo `active` controla la visibilidad. Los consumidores deben escuchar los eventos
+ * del activador (como `click`) y alternar la propiedad `active`.
  *
  * @example
  * ```html
- * <!-- Wrapper must have position: relative -->
+ * <!-- El contenedor debe tener position: relative -->
  * <div style="position: relative; display: inline-block;">
- *   <moni-button id="menu-trigger">Open Menu</moni-button>
+ *   <moni-button id="menu-trigger">Abrir Menú</moni-button>
  *
  *   <moni-menu placement="bottom" flip id="my-menu">
- *     <moni-menu-item icon="edit">Edit</moni-menu-item>
- *     <moni-menu-item icon="content_copy">Copy</moni-menu-item>
+ *     <moni-menu-item icon="edit">Editar</moni-menu-item>
+ *     <moni-menu-item icon="content_copy">Copiar</moni-menu-item>
  *     <moni-divider></moni-divider>
- *     <moni-menu-item icon="delete">Delete</moni-menu-item>
+ *     <moni-menu-item icon="delete">Eliminar</moni-menu-item>
  *   </moni-menu>
  * </div>
  *
@@ -54,21 +54,74 @@ import { MoniElement } from './_base/index.js';
  * </script>
  * ```
  *
- * @slot default - `<moni-menu-item>`, `<moni-divider>`, or raw `<li>` elements.
+ * @slot default - Elementos `<moni-menu-item>`, `<moni-divider>`, o elementos `<li>` en bruto.
  *
- * @csspart menu - The inner `<menu>` container.
+ * @csspart menu - El contenedor interior `<menu>`.
  */
 export declare class MoniMenu extends MoniElement {
+    /**
+     * Posición preferida en relación con el anclaje padre.
+     * @type {'bottom' | 'top' | 'left' | 'right' | 'min' | 'max'}
+     * @default 'bottom'
+     */
     placement: 'bottom' | 'top' | 'left' | 'right' | 'min' | 'max';
+    /**
+     * Deshabilita el ajuste de texto dentro del menú.
+     * @type {boolean}
+     */
     noWrap: boolean;
+    /**
+     * Controla si el menú está visible.
+     * @type {boolean}
+     */
     active: boolean;
+    /**
+     * Lógica de espaciado entre el anclaje y el menú.
+     * @type {'no-space' | 'space' | 'small-space' | 'medium-space' | 'large-space' | 'extra-space'}
+     * @default 'no-space'
+     */
     space: 'no-space' | 'space' | 'small-space' | 'medium-space' | 'large-space' | 'extra-space';
+    /**
+     * Habilita la evitación de colisiones basada en JS (volteando la posición si está fuera de los límites).
+     * Útil para navegadores que carecen de soporte para anclaje CSS.
+     * @type {boolean}
+     */
     flip: boolean;
     private _resolvedPlacement;
     private _menuEl?;
+    /**
+     * Hook de ciclo de vida de Lit.
+     * Detecta si el menú se acaba de abrir (active = true) con la propiedad de 'flip' habilitada.
+     * Usa una Promesa (`updateComplete`) para esperar a que Lit termine de renderizar el DOM y
+     * el navegador haga el reflow antes de medir sus dimensiones.
+     */
     updated(changed: Map<string, unknown>): void;
+    /**
+     * Polyfill manual en JS para "position-try-fallbacks" (CSS Anchoring API).
+     * Si el menú desborda el viewport en su posición actual, invierte lógicamente
+     * su colocación (ej. de 'bottom' a 'top') calculando los BoundingClientRect.
+     */
     private _maybeFlip;
     static styles: import("lit").CSSResult[];
+    /**
+     * Renderiza el menú como una superposición Popover API o un `<div>` posicionado.
+     *
+     * **Popover API (`popover="auto"`):**
+     * Cuando se establece `popover`, el menú usa la Popover API nativa del navegador.
+     * Esto proporciona descarte ligero (light-dismiss) automático (clic fuera para cerrar) y
+     * apilamiento en la capa superior sin gestión de `z-index`.
+     *
+     * **Patrón de menú ARIA:**
+     * El contenedor del menú lleva `role="menu"`. Cada hijo `<moni-menu-item>`
+     * debe llevar `role="menuitem"`. La navegación con las teclas de flecha se maneja a través de
+     * `@keydown` en el contenedor del menú, ciclando a través de los elementos usando
+     * `_focusedItemIndex` (incrementado/decrementado con ciclo continuo).
+     *
+     * **Posicionamiento:**
+     * Cuando se establece `anchor`, `_computeStyle()` calcula `top`/`left` desde
+     * `getBoundingClientRect()` del elemento anclaje y los inyecta como
+     * estilos en línea en el `<div>` del menú.
+     */
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/dist/components/moni-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"moni-menu.d.ts","sourceRoot":"","sources":["../../src/components/moni-menu.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,qBACa,QAAS,SAAQ,WAAW;IAExC,SAAS,EAAE,QAAQ,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,CAAY;IACR,MAAM,UAAS;IACrC,MAAM,UAAS;IAE3D,KAAK,EACF,UAAU,GACV,OAAO,GACP,aAAa,GACb,cAAc,GACd,aAAa,GACb,aAAa,CAAc;IACc,IAAI,UAAS;IAEhD,OAAO,CAAC,kBAAkB,CAMf;IAEL,OAAO,CAAC,OAAO,CAAC,CAAc;IAEpC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAS9C,OAAO,CAAC,UAAU;IAuBlB,OAAgB,MAAM,4BAkKpB;IAEO,MAAM;CAkBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD;AAED,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"moni-menu.d.ts","sourceRoot":"","sources":["../../src/components/moni-menu.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,qBACa,QAAS,SAAQ,WAAW;IACxC;;;;OAIG;IAEH,SAAS,EAAE,QAAQ,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,CAAY;IAE1E;;;OAGG;IAC+D,MAAM,UAAS;IAEjF;;;OAGG;IACyC,MAAM,UAAS;IAE3D;;;;OAIG;IAEH,KAAK,EACF,UAAU,GACV,OAAO,GACP,aAAa,GACb,cAAc,GACd,aAAa,GACb,aAAa,CAAc;IAE9B;;;;OAIG;IACyC,IAAI,UAAS;IAEhD,OAAO,CAAC,kBAAkB,CAMf;IAEL,OAAO,CAAC,OAAO,CAAC,CAAc;IAE7C;;;;;OAKG;IACM,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAO9C;;;;OAIG;IACH,OAAO,CAAC,UAAU;IAyBlB,OAAgB,MAAM,4BAkKpB;IAEF;;;;;;;;;;;;;;;;;;OAkBG;IACM,MAAM;CAkBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD;AAED,eAAe,QAAQ,CAAC"}

package/dist/components/moni-menu.js

@@ -14,44 +14,44 @@ import { html, css } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
 /**
- * Material Design 3 Menu component.
+ * Componente Material Design 3 Menu (Menú).
  *
- * Menus display a list of choices on a temporary surface. They appear when
- * users interact with a button, action, or other control.
+ * Los menús muestran una lista de opciones en una superficie temporal. Aparecen cuando
+ * los usuarios interactúan con un botón, acción u otro control.
  *
- * **M3 spec reference:** `m3-docs/components/menus/guidelines.md`
+ * **Referencia de la especificación M3:** `m3-docs/components/menus/guidelines.md`
  *
- * **Positioning architecture:**
- * The menu uses `position: absolute` relative to its nearest positioned
- * ancestor. The component's `:host` uses `display: contents`, meaning the
- * inner `<menu>` element directly participates in the consumer's layout context.
- * **Crucial:** The consumer must apply `position: relative` to the wrapper
- * element that contains both the trigger and the `<moni-menu>`.
+ * **Arquitectura de posicionamiento:**
+ * El menú usa `position: absolute` relativo a su ancestro posicionado más cercano.
+ * El `:host` del componente usa `display: contents`, lo que significa que el
+ * elemento interior `<menu>` participa directamente en el contexto de diseño del consumidor.
+ * **Crucial:** El consumidor debe aplicar `position: relative` al elemento contenedor
+ * que contiene tanto el activador (trigger) como el `<moni-menu>`.
  *
- * **Auto-flip positioning:**
- * Per M3 guidelines, menus should flip to the opposite side of the anchor
- * if they overflow the viewport.
- * - **Modern browsers (Chrome/Edge 125+, Safari 18+):** Uses CSS anchor
- *   positioning and `@position-try-fallback` natively when `flip=true`.
- * - **Fallback:** A JavaScript polyfill measures the menu after it opens. If
- *   it overflows the requested `placement`, it sets an internal state to flip
- *   the placement classes.
+ * **Posicionamiento de auto-volteo (auto-flip):**
+ * Según las pautas de M3, los menús deben voltearse hacia el lado opuesto del anclaje
+ * si se desbordan de la ventana gráfica (viewport).
+ * - **Navegadores modernos (Chrome/Edge 125+, Safari 18+):** Utiliza el posicionamiento
+ *   de anclaje de CSS y `@position-try-fallback` nativamente cuando `flip=true`.
+ * - **Alternativa (Fallback):** Un polyfill de JavaScript mide el menú después de que se abre. Si
+ *   se desborda de la posición `placement` solicitada, establece un estado interno para voltear
+ *   las clases de posicionamiento.
  *
- * **State management:**
- * The `active` attribute controls visibility. Consumers must listen to trigger
- * events (like `click`) and toggle the `active` property.
+ * **Gestión del estado:**
+ * El atributo `active` controla la visibilidad. Los consumidores deben escuchar los eventos
+ * del activador (como `click`) y alternar la propiedad `active`.
  *
  * @example
  * ```html
- * <!-- Wrapper must have position: relative -->
+ * <!-- El contenedor debe tener position: relative -->
  * <div style="position: relative; display: inline-block;">
- *   <moni-button id="menu-trigger">Open Menu</moni-button>
+ *   <moni-button id="menu-trigger">Abrir Menú</moni-button>
  *
  *   <moni-menu placement="bottom" flip id="my-menu">
- *     <moni-menu-item icon="edit">Edit</moni-menu-item>
- *     <moni-menu-item icon="content_copy">Copy</moni-menu-item>
+ *     <moni-menu-item icon="edit">Editar</moni-menu-item>
+ *     <moni-menu-item icon="content_copy">Copiar</moni-menu-item>
  *     <moni-divider></moni-divider>
- *     <moni-menu-item icon="delete">Delete</moni-menu-item>
+ *     <moni-menu-item icon="delete">Eliminar</moni-menu-item>
  *   </moni-menu>
  * </div>
  *
@@ -62,28 +62,60 @@ import { MoniElement, sharedStyles } from './_base/index.js';
  * </script>
  * ```
  *
- * @slot default - `<moni-menu-item>`, `<moni-divider>`, or raw `<li>` elements.
+ * @slot default - Elementos `<moni-menu-item>`, `<moni-divider>`, o elementos `<li>` en bruto.
  *
- * @csspart menu - The inner `<menu>` container.
+ * @csspart menu - El contenedor interior `<menu>`.
  */
 let MoniMenu = class MoniMenu extends MoniElement {
     constructor() {
         super(...arguments);
+        /**
+         * Posición preferida en relación con el anclaje padre.
+         * @type {'bottom' | 'top' | 'left' | 'right' | 'min' | 'max'}
+         * @default 'bottom'
+         */
         this.placement = 'bottom';
+        /**
+         * Deshabilita el ajuste de texto dentro del menú.
+         * @type {boolean}
+         */
         this.noWrap = false;
+        /**
+         * Controla si el menú está visible.
+         * @type {boolean}
+         */
         this.active = false;
+        /**
+         * Lógica de espaciado entre el anclaje y el menú.
+         * @type {'no-space' | 'space' | 'small-space' | 'medium-space' | 'large-space' | 'extra-space'}
+         * @default 'no-space'
+         */
         this.space = 'no-space';
+        /**
+         * Habilita la evitación de colisiones basada en JS (volteando la posición si está fuera de los límites).
+         * Útil para navegadores que carecen de soporte para anclaje CSS.
+         * @type {boolean}
+         */
         this.flip = false;
         this._resolvedPlacement = 'bottom';
     }
+    /**
+     * Hook de ciclo de vida de Lit.
+     * Detecta si el menú se acaba de abrir (active = true) con la propiedad de 'flip' habilitada.
+     * Usa una Promesa (`updateComplete`) para esperar a que Lit termine de renderizar el DOM y
+     * el navegador haga el reflow antes de medir sus dimensiones.
+     */
     updated(changed) {
         super.updated(changed);
         if (changed.has('active') && this.active && this.flip) {
-            // JS polyfill for browsers without @position-try-fallback.
-            // Wait one frame so the menu is laid out, then measure.
             this.updateComplete.then(() => this._maybeFlip());
         }
     }
+    /**
+     * Polyfill manual en JS para "position-try-fallbacks" (CSS Anchoring API).
+     * Si el menú desborda el viewport en su posición actual, invierte lógicamente
+     * su colocación (ej. de 'bottom' a 'top') calculando los BoundingClientRect.
+     */
     _maybeFlip() {
         const menu = this._menuEl;
         if (!menu || !this.flip)
@@ -274,6 +306,25 @@ let MoniMenu = class MoniMenu extends MoniElement {
 			}
 		`
     ]; }
+    /**
+     * Renderiza el menú como una superposición Popover API o un `<div>` posicionado.
+     *
+     * **Popover API (`popover="auto"`):**
+     * Cuando se establece `popover`, el menú usa la Popover API nativa del navegador.
+     * Esto proporciona descarte ligero (light-dismiss) automático (clic fuera para cerrar) y
+     * apilamiento en la capa superior sin gestión de `z-index`.
+     *
+     * **Patrón de menú ARIA:**
+     * El contenedor del menú lleva `role="menu"`. Cada hijo `<moni-menu-item>`
+     * debe llevar `role="menuitem"`. La navegación con las teclas de flecha se maneja a través de
+     * `@keydown` en el contenedor del menú, ciclando a través de los elementos usando
+     * `_focusedItemIndex` (incrementado/decrementado con ciclo continuo).
+     *
+     * **Posicionamiento:**
+     * Cuando se establece `anchor`, `_computeStyle()` calcula `top`/`left` desde
+     * `getBoundingClientRect()` del elemento anclaje y los inyecta como
+     * estilos en línea en el `<div>` del menú.
+     */
     render() {
         const effectivePlacement = this.active && this.flip
             ? this._resolvedPlacement

package/dist/components/moni-morph-modal.d.ts

@@ -8,20 +8,95 @@ import { MoniElement } from './_base/index.js';
 import './moni-icon.js';
 type Placement = 'center' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end' | 'viewport-center' | 'viewport-top' | 'viewport-bottom' | 'viewport-left' | 'viewport-right' | 'viewport-top-left' | 'viewport-top-right' | 'viewport-bottom-left' | 'viewport-bottom-right';
 export declare class MoniMorphModal extends MoniElement {
+    /**
+     * 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}
+     */
     target: string;
+    /**
+     * Controla el estado abierto/cerrado del modal.
+     * Puede establecerse directamente, o se gestiona internamente cuando se hace clic en el elemento `target`.
+     * @type {boolean}
+     */
     open: boolean;
+    /**
+     * Si es true, renderiza un fondo y atrapa el foco, actuando como un verdadero diálogo modal.
+     * @type {boolean}
+     * @default true
+     */
     modal: boolean;
+    /**
+     * Posición preferida del modal en relación con la ventana gráfica.
+     * @type {Placement}
+     * @default 'center'
+     */
     placement: Placement;
+    /**
+     * El ancho del modal cuando está completamente expandido.
+     * @type {string}
+     * @default '22rem'
+     */
     expandedWidth: string;
+    /**
+     * La altura del modal cuando está completamente expandido.
+     * @type {string}
+     * @default '18rem'
+     */
     expandedHeight: string;
+    /**
+     * Si es true, hacer clic fuera del modal lo cerrará.
+     * @type {boolean}
+     * @default true
+     */
     closeOnClickOutside: boolean;
+    /**
+     * Si es true, presionar la tecla Escape cerrará el modal.
+     * @type {boolean}
+     * @default true
+     */
     closeOnEsc: boolean;
+    /**
+     * Si es true, muestra un botón de icono de cierre por defecto en el encabezado.
+     * @type {boolean}
+     */
     showCloseButton: boolean;
+    /**
+     * Si es true, intenta fundir/transformar una etiqueta del disparador hacia el encabezado del modal.
+     * @type {boolean}
+     */
     morphLabel: boolean;
+    /**
+     * Un selector CSS personalizado utilizado para encontrar el elemento de etiqueta específico dentro del target a transformar.
+     * @type {string}
+     */
     morphLabelSelector: string;
+    /**
+     * Si es true, renderiza un fondo atenuado detrás del modal.
+     * @type {boolean}
+     * @default true
+     */
     hasBackdrop: boolean;
+    /**
+     * Si es true, oculta el elemento disparador (target) mientras el modal está abierto.
+     * @type {boolean}
+     */
     hideTarget: boolean;
+    /**
+     * Si es true, fuerza al modal a cubrir visualmente la ubicación original del target antes de expandirse.
+     * @type {boolean}
+     */
     coverTarget: boolean;
+    /**
+     * Si es true, el modal calcula automáticamente su tamaño final basándose en el contenido interno (ignora expandedWidth y expandedHeight).
+     * @type {boolean}
+     */
+    autoSize: boolean;
+    /**
+     * Si es true, aplica un efecto de desenfoque (blur) al contenido durante la animación de entrada y salida.
+     * @type {boolean}
+     */
+    blurContent: boolean;
     private _panel;
     private _inner;
     private _backdrop;
@@ -37,19 +112,64 @@ export declare class MoniMorphModal extends MoniElement {
     private _morphEls;
     private static _openStack;
     private _targetStylesCache;
+    /**
+     * Handler encapsulado para el evento click en el trigger.
+     * Dispara la animación de apertura.
+     */
     private _onTargetClick;
+    /**
+     * Handler encapsulado para interceptar teclas a nivel global (ej: Escape).
+     */
     private _onDocKeydown;
+    /**
+     * 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.
+     */
     private _onDocClick;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * 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: Map<string, unknown>): void;
+    /**
+     * 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.
+     */
     private _resolveTarget;
+    /**
+     * 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(): void;
+    /**
+     * 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.
+     */
     private _ensureSolidPanelBackground;
     hide(): void;
     toggle(): void;
     private _handleDocKeydown;
+    /**
+     * 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).
+     */
     private _hideTargetContent;
+    /**
+     * Restaura puramente los estilos originales del botón Trigger tras terminar
+     * la animación de cierre, leyendo las opacidades/colores almacenados en caché.
+     */
     private _restoreTargetContent;
     private _onHeaderSlotChange;
     private _onFooterSlotChange;
@@ -73,6 +193,27 @@ export declare class MoniMorphModal extends MoniElement {
     private _computeFinalRect;
     private _parseSize;
     static styles: import("lit").CSSResult[];
+    /**
+     * 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(): import("lit").TemplateResult<1>;
 }
 declare global {

package/dist/components/moni-morph-modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"moni-morph-modal.d.ts","sourceRoot":"","sources":["../../src/components/moni-morph-modal.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"moni-morph-modal.d.ts","sourceRoot":"","sources":["../../src/components/moni-morph-modal.ts"],"names":[],"mappings":"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"}