@moni-labs/moni-ui 0.4.14 → 0.4.17

package/dist/components/moni-bottom-sheet.js

@@ -153,11 +153,32 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
         this._originalSibling = null;
         this._isDragging = false;
         this._startY = 0;
-        this._currentTranslationY = 0;
+        this._lastDeltaY = 0;
         this._sheetHeight = 0;
         this._defaultHeight = 0;
         this._justDragged = false;
         this._skipRequestClose = false;
+        this._isClosing = false;
+    }
+    /**
+     * Abre el bottom sheet.
+     */
+    show() {
+        this._isClosing = false;
+        this._isDragging = false;
+        this._lastDeltaY = 0;
+        if (this._dialog) {
+            this._dialog.classList.remove('dragging', 'expanded');
+            this._dialog.style.transform = '';
+            this._dialog.style.height = '';
+        }
+        this.open = true;
+    }
+    /**
+     * Cierra el bottom sheet ejecutando la animación fluida hacia abajo.
+     */
+    close() {
+        return this._animateAndClose();
     }
     willUpdate(changed) {
         if (changed.has('open') && this.open !== changed.get('open')) {
@@ -177,12 +198,18 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
         }
     }
     async _animateAndClose() {
+        if (this._isClosing)
+            return false;
+        if (!this.open)
+            return false;
+        this._isClosing = true;
         this._skipRequestClose = true;
         const allowed = emitMoniEvent(this, 'moni-request-close', { cancelable: true });
         this._skipRequestClose = false;
-        if (!allowed)
+        if (!allowed) {
+            this._isClosing = false;
             return false;
-        this.dispatchEvent(new Event('close', { bubbles: true, composed: true }));
+        }
         emitMoniEvent(this, 'moni-close');
         this._dialog.classList.remove('expanded');
         this._dialog.style.transform = 'translateY(100%)';
@@ -195,10 +222,18 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
             this._dialog.addEventListener('transitionend', onEnd);
             setTimeout(onEnd, 300);
         });
-        this._dialog.style.transform = '';
+        this._isClosing = false;
+        this._isDragging = false;
+        this._lastDeltaY = 0;
+        if (this._dialog) {
+            this._dialog.classList.remove('dragging', 'expanded');
+            this._dialog.style.transform = '';
+            this._dialog.style.height = '';
+        }
         this._skipRequestClose = true;
         this.open = false;
         this._skipRequestClose = false;
+        this.dispatchEvent(new Event('close', { bubbles: true, composed: true }));
         emitMoniEvent(this, 'moni-closed');
         return true;
     }
@@ -234,14 +269,22 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
         this._isDragging = true;
         this._startY = e.clientY; // Almacenamos la coordenada inicial Y para calcular el delta luego
         this._sheetHeight = this._dialog.getBoundingClientRect().height; // Capturamos la altura actual
-        this._currentTranslationY = 0;
+        this._lastDeltaY = 0;
         const isExpanded = this._dialog.classList.contains('expanded');
         // Si no estaba expandido previamente, guardamos su altura por defecto para usarla como punto de retorno.
         if (!isExpanded) {
             this._defaultHeight = this._sheetHeight;
         }
+        else if (!this._defaultHeight) {
+            this._defaultHeight = Math.min(this._sheetHeight * 0.6, 384);
+        }
         // setPointerCapture enruta todos los eventos subsecuentes a este target
-        target.setPointerCapture(e.pointerId);
+        try {
+            target.setPointerCapture(e.pointerId);
+        }
+        catch {
+            // Ignorar si el navegador ya maneja el puntero de forma nativa
+        }
         this._dialog.classList.add('dragging'); // Desactiva las transiciones CSS para un seguimiento suave 1:1
     }
     /**
@@ -254,6 +297,7 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
             return;
         // Diferencia en píxeles desde donde se inició el click
         const deltaY = e.clientY - this._startY;
+        this._lastDeltaY = deltaY;
         const isExpanded = this._dialog.classList.contains('expanded');
         const maxHeight = this._getMaxHeightPx();
         if (isExpanded) {
@@ -273,7 +317,6 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
         else {
             if (deltaY > 0) {
                 // Arrastrando hacia abajo desde su estado inicial: lo empujamos visualmente hacia abajo (translate)
-                this._currentTranslationY = deltaY;
                 this._dialog.style.transform = `translateY(${deltaY}px)`;
                 this._dialog.style.height = '';
             }
@@ -288,16 +331,25 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
     /**
      * Finaliza la interacción de arrastre, evaluando si el bottom-sheet debe
      * expandirse, regresar a su estado original o cerrarse completamente según la
-     * inercia o la distancia arrastrada.
+     * inercia, la distancia arrastrada o si se soltó fuera/hacia la parte inferior de la pantalla.
      */
     _onPointerUp(e) {
         if (!this._isDragging)
             return;
         const target = e.target;
-        target.releasePointerCapture(e.pointerId); // Liberamos el control del puntero
+        try {
+            if (target && target.hasPointerCapture?.(e.pointerId)) {
+                target.releasePointerCapture(e.pointerId);
+            }
+        }
+        catch {
+            // Ignorar si la captura ya fue liberada o perdida por el navegador
+        }
         this._isDragging = false;
         this._dialog.classList.remove('dragging'); // Reactivamos las transiciones CSS
-        const deltaY = e.clientY - this._startY;
+        // Evaluamos la posición exacta al momento de soltar
+        const hasValidY = typeof e.clientY === 'number' && e.clientY > 0;
+        const deltaY = hasValidY ? (e.clientY - this._startY) : this._lastDeltaY;
         // Si se movió más de 5px, bloqueamos clics accidentales para evitar disparar eventos subyacentes
         if (Math.abs(deltaY) > 5) {
             this._justDragged = true;
@@ -307,11 +359,18 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
         }
         const isExpanded = this._dialog.classList.contains('expanded');
         const maxHeight = this._getMaxHeightPx();
+        const defaultHeight = this._defaultHeight || (this._sheetHeight * 0.6) || 300;
+        // Solo se considera off-screen si al SOLTAR el puntero se encuentra en o más allá del límite inferior
+        const isOffScreenBottom = hasValidY && typeof window !== 'undefined' && e.clientY >= (window.innerHeight - 30);
         if (isExpanded) {
             // Evaluamos la altura final tras soltar el ratón/dedo
             const finalHeight = this._sheetHeight - deltaY;
-            if (finalHeight < this._defaultHeight - 80) {
-                // Si se arrastró significativamente por debajo de la altura por defecto, lo cerramos
+            const shouldClose = isOffScreenBottom ||
+                deltaY > this._sheetHeight * 0.4 ||
+                finalHeight < (defaultHeight - 80) ||
+                finalHeight < 100;
+            if (shouldClose) {
+                // Si se soltó significativamente hacia abajo o fuera de pantalla, lo cerramos
                 this._animateAndClose().then((closed) => {
                     if (!closed) {
                         // Si se canceló el evento, regresamos a su lugar
@@ -320,20 +379,20 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
                     }
                 });
             }
-            else if (finalHeight < (maxHeight + this._defaultHeight) / 2) {
+            else if (finalHeight < (maxHeight + defaultHeight) / 2) {
                 // Si se soltó a medio camino, lo colapsamos a su altura normal
                 this._dialog.classList.remove('expanded');
                 this._dialog.style.transform = '';
                 this._dialog.style.height = '';
             }
             else {
-                // Si no se arrastró lo suficiente hacia abajo, retorna a estado expandido (snap back)
+                // Si se subió de nuevo hacia arriba o no se arrastró suficiente, retorna a estado expandido (snap back)
                 this._dialog.style.transform = '';
                 this._dialog.style.height = '';
             }
         }
         else {
-            if (deltaY < 0) {
+            if (deltaY < 0 && !isOffScreenBottom) {
                 // Evaluamos el arrastre hacia arriba desde el estado colapsado
                 const finalHeight = this._sheetHeight - deltaY;
                 if (finalHeight > this._sheetHeight + 80) {
@@ -344,8 +403,11 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
                 this._dialog.style.height = '';
             }
             else {
-                // Evaluamos el arrastre hacia abajo para cerrar el componente
-                if (this._currentTranslationY > 80) {
+                // Evaluamos si al soltar superó el umbral de descarte o se soltó fuera de la pantalla
+                const threshold = Math.min(80, this._sheetHeight * 0.25);
+                const shouldClose = isOffScreenBottom ||
+                    deltaY > threshold;
+                if (shouldClose) {
                     this._animateAndClose().then((closed) => {
                         if (!closed) {
                             this._dialog.style.transform = '';
@@ -353,26 +415,31 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
                     });
                 }
                 else {
-                    // Regresa a su estado colapsado (snap back al inicio)
+                    // Si el usuario bajó pero subió de nuevo antes de soltar (o no superó el umbral), regresa a abierto
                     this._dialog.style.transform = '';
                 }
             }
         }
+        this._lastDeltaY = 0;
     }
     /**
-     * Aborta limpiamente la interacción de arrastre (Pointer Cancel).
-     * Se dispara cuando el SO interrumpe el touch (ej: entrada de una llamada)
-     * o si el navegador toma el control para un scroll nativo imprevisto.
+     * 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,
+     * evalúa el cierre en lugar de simplemente cancelar y dejar la hoja colgada.
      */
     _onPointerCancel(e) {
-        if (!this._isDragging)
-            return;
-        const target = e.target;
-        target.releasePointerCapture(e.pointerId);
-        this._isDragging = false;
-        this._dialog.classList.remove('dragging');
-        this._dialog.style.transform = '';
-        this._dialog.style.height = '';
+        if (this._isDragging) {
+            this._onPointerUp(e);
+        }
+    }
+    /**
+     * Se ejecuta cuando se pierde la captura de puntero (por ejemplo al arrastrar fuera
+     * del viewport del navegador o perder el foco de la ventana).
+     */
+    _onLostPointerCapture(e) {
+        if (this._isDragging) {
+            this._onPointerUp(e);
+        }
     }
     /**
      * Handler de clicks en la superficie del modal (Backdrop).
@@ -410,6 +477,14 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
         }
         if (changed.has('open')) {
             if (this.open) {
+                this._isClosing = false;
+                this._isDragging = false;
+                this._lastDeltaY = 0;
+                if (this._dialog) {
+                    this._dialog.classList.remove('dragging', 'expanded');
+                    this._dialog.style.transform = '';
+                    this._dialog.style.height = '';
+                }
                 if (changed.get('open') !== undefined) {
                     emitMoniEvent(this, 'moni-open');
                 }
@@ -424,8 +499,13 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
                 }
             }
             else {
+                this._isClosing = false;
+                this._isDragging = false;
+                this._lastDeltaY = 0;
                 if (this._dialog) {
-                    this._dialog.classList.remove('expanded');
+                    this._dialog.classList.remove('expanded', 'dragging');
+                    this._dialog.style.transform = '';
+                    this._dialog.style.height = '';
                 }
                 if (this.positioning === 'body' && this._originalParent && this.parentNode === document.body) {
                     this._originalParent.insertBefore(this, this._originalSibling);
@@ -433,6 +513,60 @@ let MoniBottomSheet = 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;
+                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.
+                    }
+                }
+            }
         }
     }
     /**
@@ -486,6 +620,10 @@ let MoniBottomSheet = 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;
@@ -608,6 +746,7 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
 			@pointermove=${this._onPointerMove}
 			@pointerup=${this._onPointerUp}
 			@pointercancel=${this._onPointerCancel}
+			@lostpointercapture=${this._onLostPointerCapture}
 		>
 			${this.handle ? html `<div class="handle" aria-hidden="true"></div>` : nothing}
 			<header part="header">

package/docs/api.json

@@ -1,6 +1,6 @@
 {
   "package": "@moni-labs/moni-ui",
-  "generatedAt": "2026-08-24T08:08:23.078Z",
+  "generatedAt": "2026-09-06T10:02:20.078Z",
   "componentCount": 49,
   "components": [
     {
@@ -327,7 +327,18 @@
           "reflect": true
         }
       ],
-      "methods": [],
+      "methods": [
+        {
+          "name": "show",
+          "signature": "show()",
+          "description": "Abre el bottom sheet."
+        },
+        {
+          "name": "close",
+          "signature": "close()",
+          "description": "Cierra el bottom sheet ejecutando la animación fluida hacia abajo."
+        }
+      ],
       "events": [],
       "slots": [
         {

package/docs/components/bottom-sheet.md

@@ -102,7 +102,8 @@ No declara eventos propios.
 
 ## Métodos públicos
 
-No expone métodos públicos adicionales.
+- `show()` — Abre el bottom sheet.
+- `close()` — Cierra el bottom sheet ejecutando la animación fluida hacia abajo.
 
 ## CSS Parts
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moni-labs/moni-ui",
-  "version": "0.4.14",
+  "version": "0.4.17",
   "private": false,
   "type": "module",
   "description": "Design system unificado para Moni — Material Design 3 Expressive, mobile-first.",