@moni-labs/moni-ui 0.4.13 → 0.4.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (104) hide show
  1. package/custom-elements.json +101 -81
  2. package/dist/browser/moni-ui.iife.min.js +1538 -1384
  3. package/dist/browser/moni-ui.iife.min.js.br +0 -0
  4. package/dist/browser/moni-ui.iife.min.js.gz +0 -0
  5. package/dist/browser/moni-ui.iife.min.js.map +1 -1
  6. package/dist/browser/moni-ui.min.js +2751 -2501
  7. package/dist/browser/moni-ui.min.js.br +0 -0
  8. package/dist/browser/moni-ui.min.js.gz +0 -0
  9. package/dist/browser/moni-ui.min.js.map +1 -1
  10. package/dist/cdn/chunks/{class-map-DsL1Jr2T.js → class-map-QyT9W7rZ.js} +1 -1
  11. package/dist/cdn/chunks/{decorate-DxJYS4gw.js → decorate-B7wZvwrn.js} +629 -543
  12. package/dist/cdn/chunks/if-defined-5hr_ccFw.js +1 -0
  13. package/dist/cdn/chunks/{live-D52JqeKf.js → live-Hm1Di_ND.js} +1 -1
  14. package/dist/cdn/components/moni-app-bar.js +1 -1
  15. package/dist/cdn/components/moni-badge.js +1 -1
  16. package/dist/cdn/components/moni-bottom-sheet.js +2 -1
  17. package/dist/cdn/components/moni-button-group.js +1 -1
  18. package/dist/cdn/components/moni-button-segment.js +1 -1
  19. package/dist/cdn/components/moni-button.js +1 -1
  20. package/dist/cdn/components/moni-card.js +1 -1
  21. package/dist/cdn/components/moni-carousel.js +1 -1
  22. package/dist/cdn/components/moni-checkbox.js +1 -1
  23. package/dist/cdn/components/moni-chip.js +1 -1
  24. package/dist/cdn/components/moni-color-field.js +1 -1
  25. package/dist/cdn/components/moni-context-menu.js +1 -1
  26. package/dist/cdn/components/moni-dialog.js +1 -1
  27. package/dist/cdn/components/moni-divider.js +1 -1
  28. package/dist/cdn/components/moni-expansion.js +1 -1
  29. package/dist/cdn/components/moni-fab-menu.js +1 -1
  30. package/dist/cdn/components/moni-fab.js +1 -1
  31. package/dist/cdn/components/moni-file-field.js +1 -1
  32. package/dist/cdn/components/moni-icon.js +1 -1
  33. package/dist/cdn/components/moni-list-item.js +1 -1
  34. package/dist/cdn/components/moni-list.js +1 -1
  35. package/dist/cdn/components/moni-loading-indicator.js +1 -1
  36. package/dist/cdn/components/moni-menu-item.js +1 -1
  37. package/dist/cdn/components/moni-menu.js +1 -1
  38. package/dist/cdn/components/moni-morph-modal.js +3 -2
  39. package/dist/cdn/components/moni-nav-item.js +1 -1
  40. package/dist/cdn/components/moni-nav.js +1 -1
  41. package/dist/cdn/components/moni-progress.js +1 -1
  42. package/dist/cdn/components/moni-radio.js +1 -1
  43. package/dist/cdn/components/moni-ripple.js +1 -1
  44. package/dist/cdn/components/moni-segmented-button.js +1 -1
  45. package/dist/cdn/components/moni-select-option.js +1 -1
  46. package/dist/cdn/components/moni-select.js +512 -473
  47. package/dist/cdn/components/moni-shape.js +1 -1
  48. package/dist/cdn/components/moni-side-sheet.js +1 -1
  49. package/dist/cdn/components/moni-slider.js +1 -1
  50. package/dist/cdn/components/moni-snackbar.js +1 -1
  51. package/dist/cdn/components/moni-split-button.js +1 -1
  52. package/dist/cdn/components/moni-step.js +1 -1
  53. package/dist/cdn/components/moni-stepper.js +1 -1
  54. package/dist/cdn/components/moni-switch.js +1 -1
  55. package/dist/cdn/components/moni-tab.js +1 -1
  56. package/dist/cdn/components/moni-tabs.js +1 -1
  57. package/dist/cdn/components/moni-text-field.js +122 -95
  58. package/dist/cdn/components/moni-textarea.js +52 -52
  59. package/dist/cdn/components/moni-time-picker.js +1 -1
  60. package/dist/cdn/components/moni-toolbar.js +1 -1
  61. package/dist/cdn/components/moni-tooltip.js +1 -1
  62. package/dist/cdn/components/moni-typography.js +1 -1
  63. package/dist/cdn/importmap.json +98 -98
  64. package/dist/components/_base/field-styles.d.ts.map +1 -1
  65. package/dist/components/_base/field-styles.js +662 -576
  66. package/dist/components/moni-bottom-sheet.d.ts +19 -5
  67. package/dist/components/moni-bottom-sheet.d.ts.map +1 -1
  68. package/dist/components/moni-bottom-sheet.js +111 -30
  69. package/dist/components/moni-morph-modal.d.ts +10 -0
  70. package/dist/components/moni-morph-modal.d.ts.map +1 -1
  71. package/dist/components/moni-morph-modal.js +323 -217
  72. package/dist/components/moni-select.d.ts +16 -16
  73. package/dist/components/moni-select.d.ts.map +1 -1
  74. package/dist/components/moni-select.js +797 -727
  75. package/dist/components/moni-text-field.d.ts +15 -15
  76. package/dist/components/moni-text-field.d.ts.map +1 -1
  77. package/dist/components/moni-text-field.js +224 -180
  78. package/dist/components/moni-textarea.d.ts +13 -13
  79. package/dist/components/moni-textarea.d.ts.map +1 -1
  80. package/dist/components/moni-textarea.js +127 -122
  81. package/docs/api.json +109 -89
  82. package/docs/assets/moni-color-field/shape--square.png +0 -0
  83. package/docs/assets/moni-file-field/shape--square.png +0 -0
  84. package/docs/assets/moni-morph-modal/autoHeight--false.png +0 -0
  85. package/docs/assets/moni-morph-modal/autoHeight--true.png +0 -0
  86. package/docs/components/bottom-sheet.md +2 -1
  87. package/docs/components/morph-modal.md +16 -7
  88. package/docs/components/select.md +74 -74
  89. package/docs/components/text-field.md +75 -66
  90. package/docs/components/textarea.md +51 -51
  91. package/docs/llms.txt +3 -3
  92. package/package.json +1 -1
  93. package/src/components/_base/field-styles.ts +723 -637
  94. package/src/components/moni-bottom-sheet.test.ts +331 -0
  95. package/src/components/moni-bottom-sheet.ts +117 -29
  96. package/src/components/moni-morph-modal.test.ts +490 -413
  97. package/src/components/moni-morph-modal.ts +2274 -2162
  98. package/src/components/moni-select.test.ts +489 -466
  99. package/src/components/moni-select.ts +1963 -1815
  100. package/src/components/moni-text-field.test.ts +366 -342
  101. package/src/components/moni-text-field.ts +717 -645
  102. package/src/components/moni-textarea.test.ts +201 -197
  103. package/src/components/moni-textarea.ts +476 -460
  104. package/dist/cdn/chunks/if-defined-DdzvcoI7.js +0 -1
@@ -144,11 +144,20 @@ export declare class MoniBottomSheet extends MoniElement {
144
144
  private _dialog;
145
145
  private _isDragging;
146
146
  private _startY;
147
- private _currentTranslationY;
147
+ private _lastDeltaY;
148
148
  private _sheetHeight;
149
149
  private _defaultHeight;
150
150
  private _justDragged;
151
151
  private _skipRequestClose;
152
+ private _isClosing;
153
+ /**
154
+ * Abre el bottom sheet.
155
+ */
156
+ show(): void;
157
+ /**
158
+ * Cierra el bottom sheet ejecutando la animación fluida hacia abajo.
159
+ */
160
+ close(): Promise<boolean>;
152
161
  willUpdate(changed: Map<string, unknown>): void;
153
162
  private _animateAndClose;
154
163
  /**
@@ -173,15 +182,20 @@ export declare class MoniBottomSheet extends MoniElement {
173
182
  /**
174
183
  * Finaliza la interacción de arrastre, evaluando si el bottom-sheet debe
175
184
  * expandirse, regresar a su estado original o cerrarse completamente según la
176
- * inercia o la distancia arrastrada.
185
+ * inercia, la distancia arrastrada o si se soltó fuera/hacia la parte inferior de la pantalla.
177
186
  */
178
187
  private _onPointerUp;
179
188
  /**
180
- * Aborta limpiamente la interacción de arrastre (Pointer Cancel).
181
- * Se dispara cuando el SO interrumpe el touch (ej: entrada de una llamada)
182
- * o si el navegador toma el control para un scroll nativo imprevisto.
189
+ * Maneja la cancelación del puntero o interrupción del SO.
190
+ * Si el usuario ya lo había arrastrado hacia abajo o hacia fuera de la pantalla,
191
+ * evalúa el cierre en lugar de simplemente cancelar y dejar la hoja colgada.
183
192
  */
184
193
  private _onPointerCancel;
194
+ /**
195
+ * Se ejecuta cuando se pierde la captura de puntero (por ejemplo al arrastrar fuera
196
+ * del viewport del navegador o perder el foco de la ventana).
197
+ */
198
+ private _onLostPointerCapture;
185
199
  /**
186
200
  * Handler de clicks en la superficie del modal (Backdrop).
187
201
  * Si el clic cae exactamente en el fondo (`this._dialog`) y no en el contenedor de
@@ -1 +1 @@
1
- {"version":3,"file":"moni-bottom-sheet.d.ts","sourceRoot":"","sources":["../../src/components/moni-bottom-sheet.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAG7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,qBACa,eAAgB,SAAQ,WAAW;IAC/C;;;;;;;OAOG;IACyC,IAAI,UAAS;IAEzD;;;;;;;;;OASG;IAEH,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAY;IAEvD;;;;;OAKG;IACyC,KAAK,UAAQ;IAEzD;;;;OAIG;IAC0B,KAAK,SAAM;IAExC;;;;;;;;;OASG;IACyC,MAAM,UAAS;IAE3D;;;;;;;;;;OAUG;IAEH,WAAW,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,CAAW;IAEhE;;;;;;;;OAQG;IAEH,cAAc,SAAS;IAEvB;;;;;;;;OAQG;IAEH,QAAQ,SAAM;IAEd;;;OAGG;IACH,OAAO,CAAC,eAAe,CAAqB;IAE5C;;;OAGG;IACH,OAAO,CAAC,gBAAgB,CAAqB;IAE7C,wDAAwD;IACvC,OAAO,CAAC,OAAO,CAAqB;IACrD,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,OAAO,CAAK;IACpB,OAAO,CAAC,oBAAoB,CAAK;IACjC,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,cAAc,CAAK;IAC3B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,iBAAiB,CAAS;IAEzB,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;YAiBnC,gBAAgB;IA8B9B;;;;;OAKG;IACH,OAAO,CAAC,eAAe;IAcvB;;;;OAIG;IACH,OAAO,CAAC,cAAc;IAqBtB;;;;OAIG;IACH,OAAO,CAAC,cAAc;IAmCtB;;;;OAIG;IACH,OAAO,CAAC,YAAY;IAmEpB;;;;OAIG;IACH,OAAO,CAAC,gBAAgB;IAWxB;;;;;OAKG;IACH,OAAO,CAAC,cAAc;IAYtB;;;;;;;OAOG;IACM,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAmC9C;;;;OAIG;IACM,oBAAoB;IAO7B,OAAgB,MAAM,4BAiIpB;IAEF;;;;;;;;;;;;;;;;;;;OAmBG;IACM,MAAM;CAsBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD;AAED,eAAe,eAAe,CAAC"}
1
+ {"version":3,"file":"moni-bottom-sheet.d.ts","sourceRoot":"","sources":["../../src/components/moni-bottom-sheet.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAG7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,qBACa,eAAgB,SAAQ,WAAW;IAC/C;;;;;;;OAOG;IACyC,IAAI,UAAS;IAEzD;;;;;;;;;OASG;IAEH,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAY;IAEvD;;;;;OAKG;IACyC,KAAK,UAAQ;IAEzD;;;;OAIG;IAC0B,KAAK,SAAM;IAExC;;;;;;;;;OASG;IACyC,MAAM,UAAS;IAE3D;;;;;;;;;;OAUG;IAEH,WAAW,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,CAAW;IAEhE;;;;;;;;OAQG;IAEH,cAAc,SAAS;IAEvB;;;;;;;;OAQG;IAEH,QAAQ,SAAM;IAEd;;;OAGG;IACH,OAAO,CAAC,eAAe,CAAqB;IAE5C;;;OAGG;IACH,OAAO,CAAC,gBAAgB,CAAqB;IAE7C,wDAAwD;IACvC,OAAO,CAAC,OAAO,CAAqB;IACrD,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,OAAO,CAAK;IACpB,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,cAAc,CAAK;IAC3B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,iBAAiB,CAAS;IAClC,OAAO,CAAC,UAAU,CAAS;IAE3B;;OAEG;IACH,IAAI;IAYJ;;OAEG;IACH,KAAK;IAII,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;YAiBnC,gBAAgB;IA4C9B;;;;;OAKG;IACH,OAAO,CAAC,eAAe;IAcvB;;;;OAIG;IACH,OAAO,CAAC,cAAc;IA2BtB;;;;OAIG;IACH,OAAO,CAAC,cAAc;IAmCtB;;;;OAIG;IACH,OAAO,CAAC,YAAY;IA6FpB;;;;OAIG;IACH,OAAO,CAAC,gBAAgB;IAMxB;;;OAGG;IACH,OAAO,CAAC,qBAAqB;IAM7B;;;;;OAKG;IACH,OAAO,CAAC,cAAc;IAYtB;;;;;;;OAOG;IACM,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAgD9C;;;;OAIG;IACM,oBAAoB;IAO7B,OAAgB,MAAM,4BAiIpB;IAEF;;;;;;;;;;;;;;;;;;;OAmBG;IACM,MAAM;CAuBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD;AAED,eAAe,eAAe,CAAC"}
@@ -153,11 +153,32 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
153
153
  this._originalSibling = null;
154
154
  this._isDragging = false;
155
155
  this._startY = 0;
156
- this._currentTranslationY = 0;
156
+ this._lastDeltaY = 0;
157
157
  this._sheetHeight = 0;
158
158
  this._defaultHeight = 0;
159
159
  this._justDragged = false;
160
160
  this._skipRequestClose = false;
161
+ this._isClosing = false;
162
+ }
163
+ /**
164
+ * Abre el bottom sheet.
165
+ */
166
+ show() {
167
+ this._isClosing = false;
168
+ this._isDragging = false;
169
+ this._lastDeltaY = 0;
170
+ if (this._dialog) {
171
+ this._dialog.classList.remove('dragging', 'expanded');
172
+ this._dialog.style.transform = '';
173
+ this._dialog.style.height = '';
174
+ }
175
+ this.open = true;
176
+ }
177
+ /**
178
+ * Cierra el bottom sheet ejecutando la animación fluida hacia abajo.
179
+ */
180
+ close() {
181
+ return this._animateAndClose();
161
182
  }
162
183
  willUpdate(changed) {
163
184
  if (changed.has('open') && this.open !== changed.get('open')) {
@@ -177,12 +198,18 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
177
198
  }
178
199
  }
179
200
  async _animateAndClose() {
201
+ if (this._isClosing)
202
+ return false;
203
+ if (!this.open)
204
+ return false;
205
+ this._isClosing = true;
180
206
  this._skipRequestClose = true;
181
207
  const allowed = emitMoniEvent(this, 'moni-request-close', { cancelable: true });
182
208
  this._skipRequestClose = false;
183
- if (!allowed)
209
+ if (!allowed) {
210
+ this._isClosing = false;
184
211
  return false;
185
- this.dispatchEvent(new Event('close', { bubbles: true, composed: true }));
212
+ }
186
213
  emitMoniEvent(this, 'moni-close');
187
214
  this._dialog.classList.remove('expanded');
188
215
  this._dialog.style.transform = 'translateY(100%)';
@@ -195,10 +222,18 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
195
222
  this._dialog.addEventListener('transitionend', onEnd);
196
223
  setTimeout(onEnd, 300);
197
224
  });
198
- this._dialog.style.transform = '';
225
+ this._isClosing = false;
226
+ this._isDragging = false;
227
+ this._lastDeltaY = 0;
228
+ if (this._dialog) {
229
+ this._dialog.classList.remove('dragging', 'expanded');
230
+ this._dialog.style.transform = '';
231
+ this._dialog.style.height = '';
232
+ }
199
233
  this._skipRequestClose = true;
200
234
  this.open = false;
201
235
  this._skipRequestClose = false;
236
+ this.dispatchEvent(new Event('close', { bubbles: true, composed: true }));
202
237
  emitMoniEvent(this, 'moni-closed');
203
238
  return true;
204
239
  }
@@ -234,14 +269,22 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
234
269
  this._isDragging = true;
235
270
  this._startY = e.clientY; // Almacenamos la coordenada inicial Y para calcular el delta luego
236
271
  this._sheetHeight = this._dialog.getBoundingClientRect().height; // Capturamos la altura actual
237
- this._currentTranslationY = 0;
272
+ this._lastDeltaY = 0;
238
273
  const isExpanded = this._dialog.classList.contains('expanded');
239
274
  // Si no estaba expandido previamente, guardamos su altura por defecto para usarla como punto de retorno.
240
275
  if (!isExpanded) {
241
276
  this._defaultHeight = this._sheetHeight;
242
277
  }
278
+ else if (!this._defaultHeight) {
279
+ this._defaultHeight = Math.min(this._sheetHeight * 0.6, 384);
280
+ }
243
281
  // setPointerCapture enruta todos los eventos subsecuentes a este target
244
- target.setPointerCapture(e.pointerId);
282
+ try {
283
+ target.setPointerCapture(e.pointerId);
284
+ }
285
+ catch {
286
+ // Ignorar si el navegador ya maneja el puntero de forma nativa
287
+ }
245
288
  this._dialog.classList.add('dragging'); // Desactiva las transiciones CSS para un seguimiento suave 1:1
246
289
  }
247
290
  /**
@@ -254,6 +297,7 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
254
297
  return;
255
298
  // Diferencia en píxeles desde donde se inició el click
256
299
  const deltaY = e.clientY - this._startY;
300
+ this._lastDeltaY = deltaY;
257
301
  const isExpanded = this._dialog.classList.contains('expanded');
258
302
  const maxHeight = this._getMaxHeightPx();
259
303
  if (isExpanded) {
@@ -273,7 +317,6 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
273
317
  else {
274
318
  if (deltaY > 0) {
275
319
  // Arrastrando hacia abajo desde su estado inicial: lo empujamos visualmente hacia abajo (translate)
276
- this._currentTranslationY = deltaY;
277
320
  this._dialog.style.transform = `translateY(${deltaY}px)`;
278
321
  this._dialog.style.height = '';
279
322
  }
@@ -288,16 +331,25 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
288
331
  /**
289
332
  * Finaliza la interacción de arrastre, evaluando si el bottom-sheet debe
290
333
  * expandirse, regresar a su estado original o cerrarse completamente según la
291
- * inercia o la distancia arrastrada.
334
+ * inercia, la distancia arrastrada o si se soltó fuera/hacia la parte inferior de la pantalla.
292
335
  */
293
336
  _onPointerUp(e) {
294
337
  if (!this._isDragging)
295
338
  return;
296
339
  const target = e.target;
297
- target.releasePointerCapture(e.pointerId); // Liberamos el control del puntero
340
+ try {
341
+ if (target && target.hasPointerCapture?.(e.pointerId)) {
342
+ target.releasePointerCapture(e.pointerId);
343
+ }
344
+ }
345
+ catch {
346
+ // Ignorar si la captura ya fue liberada o perdida por el navegador
347
+ }
298
348
  this._isDragging = false;
299
349
  this._dialog.classList.remove('dragging'); // Reactivamos las transiciones CSS
300
- const deltaY = e.clientY - this._startY;
350
+ // Evaluamos la posición exacta al momento de soltar
351
+ const hasValidY = typeof e.clientY === 'number' && e.clientY > 0;
352
+ const deltaY = hasValidY ? (e.clientY - this._startY) : this._lastDeltaY;
301
353
  // Si se movió más de 5px, bloqueamos clics accidentales para evitar disparar eventos subyacentes
302
354
  if (Math.abs(deltaY) > 5) {
303
355
  this._justDragged = true;
@@ -307,11 +359,18 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
307
359
  }
308
360
  const isExpanded = this._dialog.classList.contains('expanded');
309
361
  const maxHeight = this._getMaxHeightPx();
362
+ const defaultHeight = this._defaultHeight || (this._sheetHeight * 0.6) || 300;
363
+ // Solo se considera off-screen si al SOLTAR el puntero se encuentra en o más allá del límite inferior
364
+ const isOffScreenBottom = hasValidY && typeof window !== 'undefined' && e.clientY >= (window.innerHeight - 30);
310
365
  if (isExpanded) {
311
366
  // Evaluamos la altura final tras soltar el ratón/dedo
312
367
  const finalHeight = this._sheetHeight - deltaY;
313
- if (finalHeight < this._defaultHeight - 80) {
314
- // Si se arrastró significativamente por debajo de la altura por defecto, lo cerramos
368
+ const shouldClose = isOffScreenBottom ||
369
+ deltaY > this._sheetHeight * 0.4 ||
370
+ finalHeight < (defaultHeight - 80) ||
371
+ finalHeight < 100;
372
+ if (shouldClose) {
373
+ // Si se soltó significativamente hacia abajo o fuera de pantalla, lo cerramos
315
374
  this._animateAndClose().then((closed) => {
316
375
  if (!closed) {
317
376
  // Si se canceló el evento, regresamos a su lugar
@@ -320,20 +379,20 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
320
379
  }
321
380
  });
322
381
  }
323
- else if (finalHeight < (maxHeight + this._defaultHeight) / 2) {
382
+ else if (finalHeight < (maxHeight + defaultHeight) / 2) {
324
383
  // Si se soltó a medio camino, lo colapsamos a su altura normal
325
384
  this._dialog.classList.remove('expanded');
326
385
  this._dialog.style.transform = '';
327
386
  this._dialog.style.height = '';
328
387
  }
329
388
  else {
330
- // Si no se arrastró lo suficiente hacia abajo, retorna a estado expandido (snap back)
389
+ // Si se subió de nuevo hacia arriba o no se arrastró suficiente, retorna a estado expandido (snap back)
331
390
  this._dialog.style.transform = '';
332
391
  this._dialog.style.height = '';
333
392
  }
334
393
  }
335
394
  else {
336
- if (deltaY < 0) {
395
+ if (deltaY < 0 && !isOffScreenBottom) {
337
396
  // Evaluamos el arrastre hacia arriba desde el estado colapsado
338
397
  const finalHeight = this._sheetHeight - deltaY;
339
398
  if (finalHeight > this._sheetHeight + 80) {
@@ -344,8 +403,11 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
344
403
  this._dialog.style.height = '';
345
404
  }
346
405
  else {
347
- // Evaluamos el arrastre hacia abajo para cerrar el componente
348
- if (this._currentTranslationY > 80) {
406
+ // Evaluamos si al soltar superó el umbral de descarte o se soltó fuera de la pantalla
407
+ const threshold = Math.min(80, this._sheetHeight * 0.25);
408
+ const shouldClose = isOffScreenBottom ||
409
+ deltaY > threshold;
410
+ if (shouldClose) {
349
411
  this._animateAndClose().then((closed) => {
350
412
  if (!closed) {
351
413
  this._dialog.style.transform = '';
@@ -353,26 +415,31 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
353
415
  });
354
416
  }
355
417
  else {
356
- // Regresa a su estado colapsado (snap back al inicio)
418
+ // Si el usuario bajó pero subió de nuevo antes de soltar (o no superó el umbral), regresa a abierto
357
419
  this._dialog.style.transform = '';
358
420
  }
359
421
  }
360
422
  }
423
+ this._lastDeltaY = 0;
361
424
  }
362
425
  /**
363
- * Aborta limpiamente la interacción de arrastre (Pointer Cancel).
364
- * Se dispara cuando el SO interrumpe el touch (ej: entrada de una llamada)
365
- * o si el navegador toma el control para un scroll nativo imprevisto.
426
+ * Maneja la cancelación del puntero o interrupción del SO.
427
+ * Si el usuario ya lo había arrastrado hacia abajo o hacia fuera de la pantalla,
428
+ * evalúa el cierre en lugar de simplemente cancelar y dejar la hoja colgada.
366
429
  */
367
430
  _onPointerCancel(e) {
368
- if (!this._isDragging)
369
- return;
370
- const target = e.target;
371
- target.releasePointerCapture(e.pointerId);
372
- this._isDragging = false;
373
- this._dialog.classList.remove('dragging');
374
- this._dialog.style.transform = '';
375
- this._dialog.style.height = '';
431
+ if (this._isDragging) {
432
+ this._onPointerUp(e);
433
+ }
434
+ }
435
+ /**
436
+ * Se ejecuta cuando se pierde la captura de puntero (por ejemplo al arrastrar fuera
437
+ * del viewport del navegador o perder el foco de la ventana).
438
+ */
439
+ _onLostPointerCapture(e) {
440
+ if (this._isDragging) {
441
+ this._onPointerUp(e);
442
+ }
376
443
  }
377
444
  /**
378
445
  * Handler de clicks en la superficie del modal (Backdrop).
@@ -410,6 +477,14 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
410
477
  }
411
478
  if (changed.has('open')) {
412
479
  if (this.open) {
480
+ this._isClosing = false;
481
+ this._isDragging = false;
482
+ this._lastDeltaY = 0;
483
+ if (this._dialog) {
484
+ this._dialog.classList.remove('dragging', 'expanded');
485
+ this._dialog.style.transform = '';
486
+ this._dialog.style.height = '';
487
+ }
413
488
  if (changed.get('open') !== undefined) {
414
489
  emitMoniEvent(this, 'moni-open');
415
490
  }
@@ -424,8 +499,13 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
424
499
  }
425
500
  }
426
501
  else {
502
+ this._isClosing = false;
503
+ this._isDragging = false;
504
+ this._lastDeltaY = 0;
427
505
  if (this._dialog) {
428
- this._dialog.classList.remove('expanded');
506
+ this._dialog.classList.remove('expanded', 'dragging');
507
+ this._dialog.style.transform = '';
508
+ this._dialog.style.height = '';
429
509
  }
430
510
  if (this.positioning === 'body' && this._originalParent && this.parentNode === document.body) {
431
511
  this._originalParent.insertBefore(this, this._originalSibling);
@@ -608,6 +688,7 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
608
688
  @pointermove=${this._onPointerMove}
609
689
  @pointerup=${this._onPointerUp}
610
690
  @pointercancel=${this._onPointerCancel}
691
+ @lostpointercapture=${this._onLostPointerCapture}
611
692
  >
612
693
  ${this.handle ? html `<div class="handle" aria-hidden="true"></div>` : nothing}
613
694
  <header part="header">
@@ -92,6 +92,8 @@ export declare class MoniMorphModal extends MoniElement {
92
92
  * @type {boolean}
93
93
  */
94
94
  autoSize: boolean;
95
+ /** Ajusta sólo la altura al contenido, sin superar expanded-height. */
96
+ autoHeight: boolean;
95
97
  /** Fuerza al modal expandido a ocupar todo el viewport. */
96
98
  fullscreen: boolean;
97
99
  /** Activa fullscreen únicamente cuando el viewport no supera el breakpoint configurado. */
@@ -122,6 +124,8 @@ export declare class MoniMorphModal extends MoniElement {
122
124
  private _originFallbacks;
123
125
  private static _openStack;
124
126
  private _targetStylesCache;
127
+ private static _scrollLockOwners;
128
+ private static _scrollLockSnapshot;
125
129
  /**
126
130
  * Handler encapsulado para el evento click en el trigger.
127
131
  * Dispara la animación de apertura.
@@ -146,6 +150,10 @@ export declare class MoniMorphModal extends MoniElement {
146
150
  * imperativamente la animación de apertura (`show`) o cierre (`hide`).
147
151
  */
148
152
  updated(changed: Map<string, unknown>): void;
153
+ private _shouldLockDocumentScroll;
154
+ private _syncDocumentScrollLock;
155
+ private _acquireDocumentScrollLock;
156
+ private _releaseDocumentScrollLock;
149
157
  /**
150
158
  * Busca en el DOM el elemento que dispara el modal (el trigger) basándose en la propiedad `target`.
151
159
  * Establece el listener de click que iniciará la animación de morphing.
@@ -179,6 +187,7 @@ export declare class MoniMorphModal extends MoniElement {
179
187
  private _captureOriginFallbacks;
180
188
  private _getComposedParent;
181
189
  private _resolveClosingTarget;
190
+ private _intersectsViewport;
182
191
  private _debugMorph;
183
192
  private _isUsableClosingTarget;
184
193
  toggle(): void;
@@ -226,6 +235,7 @@ export declare class MoniMorphModal extends MoniElement {
226
235
  private _applyRect;
227
236
  private _usesFullscreen;
228
237
  private _computeFinalRect;
238
+ private _measureNaturalSize;
229
239
  private _parseSize;
230
240
  static styles: import("lit").CSSResult[];
231
241
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"moni-morph-modal.d.ts","sourceRoot":"","sources":["../../src/components/moni-morph-modal.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"moni-morph-modal.d.ts","sourceRoot":"","sources":["../../src/components/moni-morph-modal.ts"],"names":[],"mappings":"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"}