@moni-labs/moni-ui 0.4.14 → 0.4.16

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);
@@ -608,6 +688,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-08-31T00:05:06.004Z",
   "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.16",
   "private": false,
   "type": "module",
   "description": "Design system unificado para Moni — Material Design 3 Expressive, mobile-first.",

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

@@ -432,4 +432,335 @@ describe('moni-bottom-sheet', () => {
 		expect(closeSpy).not.toHaveBeenCalled();
 		expect(el.open).toBe(true);
 	});
+
+	it('detecta arrastre fuera de la pantalla y marca como cerrado', async () => {
+		el.handle = true;
+		el.open = true;
+		await el.updateComplete;
+
+		const dialog = el.shadowRoot?.querySelector('dialog') as HTMLDialogElement;
+		const handle = el.shadowRoot?.querySelector('.handle') as HTMLElement;
+
+		handle.setPointerCapture = vi.fn();
+		handle.releasePointerCapture = vi.fn();
+
+		vi.spyOn(dialog, 'getBoundingClientRect').mockReturnValue({
+			height: 300,
+			width: 375,
+			x: 0,
+			y: 300,
+			top: 300,
+			bottom: 600,
+			left: 0,
+			right: 375,
+			toJSON: () => {}
+		});
+
+		const closeSpy = vi.fn();
+		el.addEventListener('close', closeSpy);
+
+		handle.dispatchEvent(
+			new PointerEvent('pointerdown', {
+				bubbles: true,
+				clientX: 100,
+				clientY: 400,
+				pointerId: 1
+			})
+		);
+
+		// Arrastrar hacia el borde inferior/fuera de pantalla
+		dialog.dispatchEvent(
+			new PointerEvent('pointermove', {
+				bubbles: true,
+				clientX: 100,
+				clientY: window.innerHeight || 800,
+				pointerId: 1
+			})
+		);
+
+		// Soltar fuera de la pantalla
+		handle.dispatchEvent(
+			new PointerEvent('pointerup', {
+				bubbles: true,
+				clientX: 100,
+				clientY: (window.innerHeight || 800) + 50,
+				pointerId: 1
+			})
+		);
+
+		dialog.dispatchEvent(new Event('transitionend'));
+		await el.updateComplete;
+
+		expect(closeSpy).toHaveBeenCalled();
+		expect(el.open).toBe(false);
+	});
+
+	it('cierra y marca como open=false cuando ocurre pointercancel tras arrastrar hacia abajo', async () => {
+		el.handle = true;
+		el.open = true;
+		await el.updateComplete;
+
+		const dialog = el.shadowRoot?.querySelector('dialog') as HTMLDialogElement;
+		const handle = el.shadowRoot?.querySelector('.handle') as HTMLElement;
+
+		handle.setPointerCapture = vi.fn();
+		handle.releasePointerCapture = vi.fn();
+
+		vi.spyOn(dialog, 'getBoundingClientRect').mockReturnValue({
+			height: 300,
+			width: 375,
+			x: 0,
+			y: 300,
+			top: 300,
+			bottom: 600,
+			left: 0,
+			right: 375,
+			toJSON: () => {}
+		});
+
+		const closeSpy = vi.fn();
+		el.addEventListener('close', closeSpy);
+
+		handle.dispatchEvent(
+			new PointerEvent('pointerdown', {
+				bubbles: true,
+				clientX: 100,
+				clientY: 400,
+				pointerId: 1
+			})
+		);
+
+		// Arrastre hacia abajo significativo
+		dialog.dispatchEvent(
+			new PointerEvent('pointermove', {
+				bubbles: true,
+				clientX: 100,
+				clientY: 550, // 150px
+				pointerId: 1
+			})
+		);
+
+		// El navegador cancela el puntero (por ejemplo, salida de viewport en móvil/pantalla táctil)
+		dialog.dispatchEvent(
+			new PointerEvent('pointercancel', {
+				bubbles: true,
+				clientX: 0,
+				clientY: 0,
+				pointerId: 1
+			})
+		);
+
+		dialog.dispatchEvent(new Event('transitionend'));
+		await el.updateComplete;
+
+		expect(closeSpy).toHaveBeenCalled();
+		expect(el.open).toBe(false);
+	});
+
+	it('cierra y marca como open=false cuando ocurre lostpointercapture tras arrastrar hacia abajo', async () => {
+		el.handle = true;
+		el.open = true;
+		await el.updateComplete;
+
+		const dialog = el.shadowRoot?.querySelector('dialog') as HTMLDialogElement;
+		const handle = el.shadowRoot?.querySelector('.handle') as HTMLElement;
+
+		handle.setPointerCapture = vi.fn();
+		handle.releasePointerCapture = vi.fn();
+
+		vi.spyOn(dialog, 'getBoundingClientRect').mockReturnValue({
+			height: 300,
+			width: 375,
+			x: 0,
+			y: 300,
+			top: 300,
+			bottom: 600,
+			left: 0,
+			right: 375,
+			toJSON: () => {}
+		});
+
+		const closeSpy = vi.fn();
+		el.addEventListener('close', closeSpy);
+
+		handle.dispatchEvent(
+			new PointerEvent('pointerdown', {
+				bubbles: true,
+				clientX: 100,
+				clientY: 400,
+				pointerId: 1
+			})
+		);
+
+		dialog.dispatchEvent(
+			new PointerEvent('pointermove', {
+				bubbles: true,
+				clientX: 100,
+				clientY: 520, // 120px
+				pointerId: 1
+			})
+		);
+
+		dialog.dispatchEvent(
+			new PointerEvent('lostpointercapture', {
+				bubbles: true,
+				clientX: 0,
+				clientY: 0,
+				pointerId: 1
+			})
+		);
+
+		dialog.dispatchEvent(new Event('transitionend'));
+		await el.updateComplete;
+
+		expect(closeSpy).toHaveBeenCalled();
+		expect(el.open).toBe(false);
+	});
+
+	it('cierra y marca como open=false cuando se arrastra un bottom sheet expandido hacia abajo', async () => {
+		el.handle = true;
+		el.open = true;
+		await el.updateComplete;
+
+		const dialog = el.shadowRoot?.querySelector('dialog') as HTMLDialogElement;
+		const handle = el.shadowRoot?.querySelector('.handle') as HTMLElement;
+		dialog.classList.add('expanded');
+
+		handle.setPointerCapture = vi.fn();
+		handle.releasePointerCapture = vi.fn();
+
+		vi.spyOn(dialog, 'getBoundingClientRect').mockReturnValue({
+			height: 600,
+			width: 375,
+			x: 0,
+			y: 100,
+			top: 100,
+			bottom: 700,
+			left: 0,
+			right: 375,
+			toJSON: () => {}
+		});
+
+		const closeSpy = vi.fn();
+		el.addEventListener('close', closeSpy);
+
+		handle.dispatchEvent(
+			new PointerEvent('pointerdown', {
+				bubbles: true,
+				clientX: 100,
+				clientY: 100,
+				pointerId: 1
+			})
+		);
+
+		dialog.dispatchEvent(
+			new PointerEvent('pointermove', {
+				bubbles: true,
+				clientX: 100,
+				clientY: 550, // Delta de 450px hacia abajo (arrastrado fuera / muy abajo)
+				pointerId: 1
+			})
+		);
+
+		handle.dispatchEvent(
+			new PointerEvent('pointerup', {
+				bubbles: true,
+				clientX: 100,
+				clientY: 550,
+				pointerId: 1
+			})
+		);
+
+		dialog.dispatchEvent(new Event('transitionend'));
+		await el.updateComplete;
+
+		expect(closeSpy).toHaveBeenCalled();
+		expect(el.open).toBe(false);
+	});
+
+	it('no cierra el bottom sheet si el usuario arrastra hacia abajo pero lo sube de nuevo antes de soltar', async () => {
+		el.handle = true;
+		el.open = true;
+		await el.updateComplete;
+
+		const dialog = el.shadowRoot?.querySelector('dialog') as HTMLDialogElement;
+		const handle = el.shadowRoot?.querySelector('.handle') as HTMLElement;
+
+		handle.setPointerCapture = vi.fn();
+		handle.releasePointerCapture = vi.fn();
+
+		vi.spyOn(dialog, 'getBoundingClientRect').mockReturnValue({
+			height: 300,
+			width: 375,
+			x: 0,
+			y: 300,
+			top: 300,
+			bottom: 600,
+			left: 0,
+			right: 375,
+			toJSON: () => {}
+		});
+
+		const closeSpy = vi.fn();
+		el.addEventListener('close', closeSpy);
+
+		// Inicia arrastre en Y = 400
+		handle.dispatchEvent(
+			new PointerEvent('pointerdown', {
+				bubbles: true,
+				clientX: 100,
+				clientY: 400,
+				pointerId: 1
+			})
+		);
+
+		// Arrastra hacia abajo (Y = 600, delta = 200px)
+		dialog.dispatchEvent(
+			new PointerEvent('pointermove', {
+				bubbles: true,
+				clientX: 100,
+				clientY: 600,
+				pointerId: 1
+			})
+		);
+
+		// Cambia de opinión y lo sube de nuevo cerca del origen (Y = 410, delta = 10px)
+		dialog.dispatchEvent(
+			new PointerEvent('pointermove', {
+				bubbles: true,
+				clientX: 100,
+				clientY: 410,
+				pointerId: 1
+			})
+		);
+
+		// Suelta en Y = 410
+		handle.dispatchEvent(
+			new PointerEvent('pointerup', {
+				bubbles: true,
+				clientX: 100,
+				clientY: 410,
+				pointerId: 1
+			})
+		);
+
+		await el.updateComplete;
+
+		expect(closeSpy).not.toHaveBeenCalled();
+		expect(el.open).toBe(true);
+	});
+
+	it('permite abrir y cerrar mediante los métodos show() y close()', async () => {
+		expect(el.open).toBe(false);
+		el.show();
+		await el.updateComplete;
+		expect(el.open).toBe(true);
+
+		const dialog = el.shadowRoot?.querySelector('dialog') as HTMLDialogElement;
+		const closePromise = el.close();
+		dialog.dispatchEvent(new Event('transitionend'));
+		await closePromise;
+		await el.updateComplete;
+		expect(el.open).toBe(false);
+	});
 });