@moni-labs/moni-ui 0.4.16 → 0.4.18

package/src/components/moni-bottom-sheet.ts

@@ -208,6 +208,16 @@ export class MoniBottomSheet extends MoniElement {
 				}
 			}
 		}
+		if (changed.has('open') && !this.open && this._dialog && typeof this._dialog.close === 'function') {
+			// Cierra el <dialog> nativo ANTES de que render() retire ?open:
+			// close() sin el atributo open es no-op por spec y el top layer
+			// quedaría varado (diálogo fantasma que se traga los taps).
+			try {
+				this._dialog.close();
+			} catch {
+				// Ya estaba cerrado.
+			}
+		}
 	}
 
 	private async _animateAndClose() {
@@ -444,6 +454,18 @@ export class MoniBottomSheet extends MoniElement {
 		this._lastDeltaY = 0;
 	}
 
+	/**
+	 * Maneja la cancelación nativa del <dialog> (tecla Escape).
+	 * Sin esto el browser cerraría el diálogo por su cuenta y la
+	 * propiedad `open` quedaría desincronizada (sheet invisible con
+	 * open=true). Se previene el cierre nativo y se conduce el flujo
+	 * propio con animación y eventos. Mismo patrón que moni-side-sheet.
+	 */
+	private _onCancel(e: Event) {
+		e.preventDefault();
+		void this.close();
+	}
+
 	/**
 	 * Maneja la cancelación del puntero o interrupción del SO.
 	 * Si el usuario ya lo había arrastrado hacia abajo o hacia fuera de la pantalla,
@@ -536,6 +558,60 @@ export class MoniBottomSheet extends MoniElement {
 					this._originalSibling = null;
 				}
 			}
+
+			// Sincroniza el estado declarativo (open/modal) con la API
+			// imperativa del <dialog> nativo. Sin esto el ?open del template
+			// solo abre el diálogo como no-modal: sin top layer, sin
+			// ::backdrop y sin bloqueo del fondo. Mismo patrón que
+			// moni-dialog y moni-side-sheet, con guards typeof para
+			// entornos sin HTMLDialogElement (jsdom).
+			//
+			// NOTA: no se lee dialog.open como guarda porque render() ya
+			// aplicó ?open antes de updated() y siempre reflejaría el nuevo
+			// estado. Se decide por la transición (changed): close() sobre
+			// un diálogo ya cerrado es no-op por spec, igual que showModal()
+			// sobre uno ya modal lanza InvalidStateError (tolerado).
+			if (this._dialog) {
+				const nativo = this._dialog as HTMLDialogElement & {
+					showModal?: () => void;
+					show?: () => void;
+					close?: () => void;
+				};
+				if (this.open) {
+					if (this.modal && typeof nativo.showModal === 'function') {
+						let yaEsModal = false;
+						try {
+							yaEsModal = this._dialog.matches(':modal');
+						} catch {
+							yaEsModal = false;
+						}
+						if (!yaEsModal) {
+							try {
+								nativo.showModal();
+							} catch {
+								// Otro actor ya lo abrió.
+							}
+						}
+					} else if (!this.modal && typeof nativo.show === 'function') {
+						try {
+							nativo.show();
+						} catch {
+							// Otro actor ya lo abrió.
+						}
+					} else if (
+						(this.modal && typeof nativo.showModal !== 'function') ||
+						(!this.modal && typeof nativo.show !== 'function')
+					) {
+						this._dialog.open = true;
+					}
+				} else if (typeof nativo.close === 'function') {
+					try {
+						nativo.close();
+					} catch {
+						// Ya estaba cerrado.
+					}
+				}
+			}
 		}
 	}
 
@@ -591,6 +667,10 @@ export class MoniBottomSheet extends MoniElement {
 				transform: translateY(0);
 			}
 
+			dialog::backdrop {
+				background-color: rgb(0 0 0 / 0.5);
+			}
+
 			dialog.fixed {
 				position: fixed;
 				inset: auto 0 0 0;
@@ -711,6 +791,7 @@ export class MoniBottomSheet extends MoniElement {
 			?open=${this.open}
 			class=${dialogClasses}
 			@click=${this._onDialogClick}
+			@cancel=${this._onCancel}
 			@pointerdown=${this._onPointerDown}
 			@pointermove=${this._onPointerMove}
 			@pointerup=${this._onPointerUp}