@moni-labs/moni-ui 0.3.1 → 0.3.2

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 (251) hide show
  1. package/custom-elements.json +5181 -1043
  2. package/dist/components/_base/moni-element.d.ts +16 -9
  3. package/dist/components/_base/moni-element.d.ts.map +1 -1
  4. package/dist/components/_base/moni-element.js +63 -9
  5. package/dist/components/index.js +2 -2
  6. package/dist/components/loading-shapes.d.ts +19 -0
  7. package/dist/components/loading-shapes.d.ts.map +1 -1
  8. package/dist/components/loading-shapes.js +19 -0
  9. package/dist/components/moni-app-bar.d.ts +72 -62
  10. package/dist/components/moni-app-bar.d.ts.map +1 -1
  11. package/dist/components/moni-app-bar.js +72 -62
  12. package/dist/components/moni-badge.d.ts +64 -65
  13. package/dist/components/moni-badge.d.ts.map +1 -1
  14. package/dist/components/moni-badge.js +64 -66
  15. package/dist/components/moni-bottom-sheet.d.ts +129 -61
  16. package/dist/components/moni-bottom-sheet.d.ts.map +1 -1
  17. package/dist/components/moni-bottom-sheet.js +217 -131
  18. package/dist/components/moni-button-group.d.ts +107 -29
  19. package/dist/components/moni-button-group.d.ts.map +1 -1
  20. package/dist/components/moni-button-group.js +107 -29
  21. package/dist/components/moni-button-segment.d.ts +53 -12
  22. package/dist/components/moni-button-segment.d.ts.map +1 -1
  23. package/dist/components/moni-button-segment.js +53 -12
  24. package/dist/components/moni-button.d.ts +116 -38
  25. package/dist/components/moni-button.d.ts.map +1 -1
  26. package/dist/components/moni-button.js +128 -38
  27. package/dist/components/moni-card.d.ts +68 -50
  28. package/dist/components/moni-card.d.ts.map +1 -1
  29. package/dist/components/moni-card.js +68 -50
  30. package/dist/components/moni-carousel.d.ts +471 -53
  31. package/dist/components/moni-carousel.d.ts.map +1 -1
  32. package/dist/components/moni-carousel.js +862 -264
  33. package/dist/components/moni-checkbox.d.ts +49 -46
  34. package/dist/components/moni-checkbox.d.ts.map +1 -1
  35. package/dist/components/moni-checkbox.js +55 -48
  36. package/dist/components/moni-chip.d.ts +100 -33
  37. package/dist/components/moni-chip.d.ts.map +1 -1
  38. package/dist/components/moni-chip.js +104 -34
  39. package/dist/components/moni-color-field.d.ts +99 -24
  40. package/dist/components/moni-color-field.d.ts.map +1 -1
  41. package/dist/components/moni-color-field.js +99 -24
  42. package/dist/components/moni-context-menu.d.ts +72 -26
  43. package/dist/components/moni-context-menu.d.ts.map +1 -1
  44. package/dist/components/moni-context-menu.js +76 -30
  45. package/dist/components/moni-dialog.d.ts +84 -59
  46. package/dist/components/moni-dialog.d.ts.map +1 -1
  47. package/dist/components/moni-dialog.js +105 -58
  48. package/dist/components/moni-divider.d.ts +39 -27
  49. package/dist/components/moni-divider.d.ts.map +1 -1
  50. package/dist/components/moni-divider.js +42 -30
  51. package/dist/components/moni-expansion.d.ts +32 -22
  52. package/dist/components/moni-expansion.d.ts.map +1 -1
  53. package/dist/components/moni-expansion.js +32 -22
  54. package/dist/components/moni-fab-menu.d.ts +61 -23
  55. package/dist/components/moni-fab-menu.d.ts.map +1 -1
  56. package/dist/components/moni-fab-menu.js +69 -31
  57. package/dist/components/moni-fab.d.ts +86 -28
  58. package/dist/components/moni-fab.d.ts.map +1 -1
  59. package/dist/components/moni-fab.js +92 -34
  60. package/dist/components/moni-file-field.d.ts +118 -30
  61. package/dist/components/moni-file-field.d.ts.map +1 -1
  62. package/dist/components/moni-file-field.js +118 -30
  63. package/dist/components/moni-icon.d.ts +40 -35
  64. package/dist/components/moni-icon.d.ts.map +1 -1
  65. package/dist/components/moni-icon.js +43 -38
  66. package/dist/components/moni-list-item.d.ts +46 -33
  67. package/dist/components/moni-list-item.d.ts.map +1 -1
  68. package/dist/components/moni-list-item.js +61 -41
  69. package/dist/components/moni-list.d.ts +30 -20
  70. package/dist/components/moni-list.d.ts.map +1 -1
  71. package/dist/components/moni-list.js +36 -21
  72. package/dist/components/moni-loading-indicator.d.ts +54 -22
  73. package/dist/components/moni-loading-indicator.d.ts.map +1 -1
  74. package/dist/components/moni-loading-indicator.js +54 -22
  75. package/dist/components/moni-menu-item.d.ts +23 -16
  76. package/dist/components/moni-menu-item.d.ts.map +1 -1
  77. package/dist/components/moni-menu-item.js +23 -16
  78. package/dist/components/moni-menu.d.ts +81 -28
  79. package/dist/components/moni-menu.d.ts.map +1 -1
  80. package/dist/components/moni-menu.js +81 -30
  81. package/dist/components/moni-morph-modal.d.ts +141 -0
  82. package/dist/components/moni-morph-modal.d.ts.map +1 -1
  83. package/dist/components/moni-morph-modal.js +295 -58
  84. package/dist/components/moni-nav-item.d.ts +59 -29
  85. package/dist/components/moni-nav-item.d.ts.map +1 -1
  86. package/dist/components/moni-nav-item.js +59 -29
  87. package/dist/components/moni-nav.d.ts +94 -35
  88. package/dist/components/moni-nav.d.ts.map +1 -1
  89. package/dist/components/moni-nav.js +94 -35
  90. package/dist/components/moni-progress.d.ts +99 -55
  91. package/dist/components/moni-progress.d.ts.map +1 -1
  92. package/dist/components/moni-progress.js +99 -55
  93. package/dist/components/moni-radio.d.ts +62 -50
  94. package/dist/components/moni-radio.d.ts.map +1 -1
  95. package/dist/components/moni-radio.js +65 -52
  96. package/dist/components/moni-ripple.d.ts +74 -59
  97. package/dist/components/moni-ripple.d.ts.map +1 -1
  98. package/dist/components/moni-ripple.js +74 -59
  99. package/dist/components/moni-segmented-button.d.ts +91 -16
  100. package/dist/components/moni-segmented-button.d.ts.map +1 -1
  101. package/dist/components/moni-segmented-button.js +94 -17
  102. package/dist/components/moni-select-option.d.ts +30 -23
  103. package/dist/components/moni-select-option.d.ts.map +1 -1
  104. package/dist/components/moni-select-option.js +30 -23
  105. package/dist/components/moni-select.d.ts +300 -35
  106. package/dist/components/moni-select.d.ts.map +1 -1
  107. package/dist/components/moni-select.js +323 -39
  108. package/dist/components/moni-side-sheet.d.ts +94 -32
  109. package/dist/components/moni-side-sheet.d.ts.map +1 -1
  110. package/dist/components/moni-side-sheet.js +94 -32
  111. package/dist/components/moni-slider.d.ts +152 -41
  112. package/dist/components/moni-slider.d.ts.map +1 -1
  113. package/dist/components/moni-slider.js +154 -42
  114. package/dist/components/moni-snackbar.d.ts +53 -43
  115. package/dist/components/moni-snackbar.d.ts.map +1 -1
  116. package/dist/components/moni-snackbar.js +53 -43
  117. package/dist/components/moni-split-button.d.ts +63 -18
  118. package/dist/components/moni-split-button.d.ts.map +1 -1
  119. package/dist/components/moni-split-button.js +63 -18
  120. package/dist/components/moni-step.d.ts +36 -24
  121. package/dist/components/moni-step.d.ts.map +1 -1
  122. package/dist/components/moni-step.js +41 -29
  123. package/dist/components/moni-stepper.d.ts +64 -27
  124. package/dist/components/moni-stepper.d.ts.map +1 -1
  125. package/dist/components/moni-stepper.js +72 -34
  126. package/dist/components/moni-switch.d.ts +57 -46
  127. package/dist/components/moni-switch.d.ts.map +1 -1
  128. package/dist/components/moni-switch.js +59 -47
  129. package/dist/components/moni-tab.d.ts +26 -18
  130. package/dist/components/moni-tab.d.ts.map +1 -1
  131. package/dist/components/moni-tab.js +29 -21
  132. package/dist/components/moni-tabs.d.ts +34 -28
  133. package/dist/components/moni-tabs.d.ts.map +1 -1
  134. package/dist/components/moni-tabs.js +34 -28
  135. package/dist/components/moni-text-field.d.ts +139 -29
  136. package/dist/components/moni-text-field.d.ts.map +1 -1
  137. package/dist/components/moni-text-field.js +157 -31
  138. package/dist/components/moni-textarea.d.ts +127 -29
  139. package/dist/components/moni-textarea.d.ts.map +1 -1
  140. package/dist/components/moni-textarea.js +131 -32
  141. package/dist/components/moni-time-picker.d.ts +114 -24
  142. package/dist/components/moni-time-picker.d.ts.map +1 -1
  143. package/dist/components/moni-time-picker.js +127 -33
  144. package/dist/components/moni-toolbar.d.ts +37 -23
  145. package/dist/components/moni-toolbar.d.ts.map +1 -1
  146. package/dist/components/moni-toolbar.js +37 -23
  147. package/dist/components/moni-tooltip.d.ts +100 -36
  148. package/dist/components/moni-tooltip.d.ts.map +1 -1
  149. package/dist/components/moni-tooltip.js +104 -40
  150. package/dist/components/moni-typography.d.ts +68 -30
  151. package/dist/components/moni-typography.d.ts.map +1 -1
  152. package/dist/components/moni-typography.js +70 -32
  153. package/dist/styles/tokens.css +7 -7
  154. package/dist/types/events.d.ts +17 -0
  155. package/dist/types/events.d.ts.map +1 -0
  156. package/dist/types/events.js +1 -0
  157. package/dist/utils/event-emitter.d.ts +13 -0
  158. package/dist/utils/event-emitter.d.ts.map +1 -0
  159. package/dist/utils/event-emitter.js +13 -0
  160. package/package.json +2 -1
  161. package/src/components/_base/moni-element.ts +73 -9
  162. package/src/components/index.ts +2 -2
  163. package/src/components/loading-shapes.ts +19 -0
  164. package/src/components/moni-app-bar.test.ts +10 -10
  165. package/src/components/moni-app-bar.ts +72 -62
  166. package/src/components/moni-badge.ts +64 -66
  167. package/src/components/moni-bottom-sheet.test.ts +39 -45
  168. package/src/components/moni-bottom-sheet.ts +222 -131
  169. package/src/components/moni-button-group.test.ts +14 -14
  170. package/src/components/moni-button-group.ts +107 -29
  171. package/src/components/moni-button-segment.ts +53 -12
  172. package/src/components/moni-button.test.ts +28 -26
  173. package/src/components/moni-button.ts +139 -39
  174. package/src/components/moni-card.test.ts +6 -6
  175. package/src/components/moni-card.ts +70 -50
  176. package/src/components/moni-carousel.test.ts +12 -12
  177. package/src/components/moni-carousel.ts +953 -290
  178. package/src/components/moni-checkbox.test.ts +7 -7
  179. package/src/components/moni-checkbox.ts +62 -48
  180. package/src/components/moni-chip.test.ts +17 -17
  181. package/src/components/moni-chip.ts +112 -34
  182. package/src/components/moni-color-field.test.ts +5 -5
  183. package/src/components/moni-color-field.ts +108 -24
  184. package/src/components/moni-context-menu.test.ts +11 -11
  185. package/src/components/moni-context-menu.ts +76 -30
  186. package/src/components/moni-dialog.ts +108 -59
  187. package/src/components/moni-divider.test.ts +4 -4
  188. package/src/components/moni-divider.ts +42 -30
  189. package/src/components/moni-expansion.ts +32 -22
  190. package/src/components/moni-fab-menu.test.ts +11 -11
  191. package/src/components/moni-fab-menu.ts +69 -31
  192. package/src/components/moni-fab.test.ts +16 -16
  193. package/src/components/moni-fab.ts +100 -34
  194. package/src/components/moni-file-field.test.ts +8 -8
  195. package/src/components/moni-file-field.ts +132 -30
  196. package/src/components/moni-icon.test.ts +11 -11
  197. package/src/components/moni-icon.ts +43 -38
  198. package/src/components/moni-list-item.test.ts +10 -10
  199. package/src/components/moni-list-item.ts +61 -41
  200. package/src/components/moni-list.ts +37 -21
  201. package/src/components/moni-loading-indicator.test.ts +3 -3
  202. package/src/components/moni-loading-indicator.ts +54 -22
  203. package/src/components/moni-menu-item.ts +23 -16
  204. package/src/components/moni-menu.test.ts +7 -7
  205. package/src/components/moni-menu.ts +87 -30
  206. package/src/components/moni-morph-modal.test.ts +18 -17
  207. package/src/components/moni-morph-modal.ts +327 -60
  208. package/src/components/moni-nav-item.ts +59 -29
  209. package/src/components/moni-nav.test.ts +11 -11
  210. package/src/components/moni-nav.ts +94 -35
  211. package/src/components/moni-progress.test.ts +9 -9
  212. package/src/components/moni-progress.ts +100 -56
  213. package/src/components/moni-radio.test.ts +8 -8
  214. package/src/components/moni-radio.ts +71 -51
  215. package/src/components/moni-ripple.ts +74 -59
  216. package/src/components/moni-segmented-button.test.ts +4 -4
  217. package/src/components/moni-segmented-button.ts +94 -17
  218. package/src/components/moni-select-option.ts +30 -23
  219. package/src/components/moni-select.test.ts +11 -11
  220. package/src/components/moni-select.ts +361 -50
  221. package/src/components/moni-side-sheet.test.ts +7 -7
  222. package/src/components/moni-side-sheet.ts +94 -32
  223. package/src/components/moni-slider.test.ts +7 -7
  224. package/src/components/moni-slider.ts +165 -42
  225. package/src/components/moni-snackbar.test.ts +8 -8
  226. package/src/components/moni-snackbar.ts +53 -43
  227. package/src/components/moni-split-button.ts +63 -18
  228. package/src/components/moni-step.test.ts +7 -7
  229. package/src/components/moni-step.ts +41 -29
  230. package/src/components/moni-stepper.test.ts +7 -7
  231. package/src/components/moni-stepper.ts +72 -34
  232. package/src/components/moni-switch.test.ts +12 -12
  233. package/src/components/moni-switch.ts +66 -47
  234. package/src/components/moni-tab.test.ts +5 -5
  235. package/src/components/moni-tab.ts +29 -21
  236. package/src/components/moni-tabs.ts +34 -28
  237. package/src/components/moni-text-field.test.ts +13 -13
  238. package/src/components/moni-text-field.ts +181 -30
  239. package/src/components/moni-textarea.test.ts +17 -17
  240. package/src/components/moni-textarea.ts +155 -31
  241. package/src/components/moni-time-picker.test.ts +5 -5
  242. package/src/components/moni-time-picker.ts +128 -33
  243. package/src/components/moni-toolbar.test.ts +8 -8
  244. package/src/components/moni-toolbar.ts +37 -23
  245. package/src/components/moni-tooltip.test.ts +15 -15
  246. package/src/components/moni-tooltip.ts +107 -40
  247. package/src/components/moni-typography.test.ts +10 -10
  248. package/src/components/moni-typography.ts +73 -32
  249. package/src/styles/tokens.css +7 -7
  250. package/src/types/events.ts +17 -0
  251. package/src/utils/event-emitter.ts +26 -0
@@ -14,26 +14,26 @@ import { html, css } from 'lit';
14
14
  import { customElement, property } from 'lit/decorators.js';
15
15
  import { MoniElement, sharedStyles } from './_base/index.js';
16
16
  /**
17
- * Material Design 3 Badge component.
17
+ * Componente Material Design 3 Badge.
18
18
  *
19
- * Badges are small status descriptors anchored to a parent element, used to
20
- * convey supplementary information such as a notification count, online
21
- * status, or selection indicator.
19
+ * Los badges son pequeños descriptores de estado anclados a un elemento padre, usados para
20
+ * transmitir información suplementaria como un conteo de notificaciones, estado
21
+ * en línea, o indicador de selección.
22
22
  *
23
- * **Positioning contract:**
24
- * The badge uses `position: absolute` and anchors to the parent element.
25
- * On `connectedCallback`, if the parent's computed `position` is `'static'`,
26
- * the badge automatically sets `parent.style.position = 'relative'`.
27
- * Consumers do not need to manually add `position: relative` to the parent.
23
+ * **Contrato de posicionamiento:**
24
+ * El badge usa `position: absolute` y se ancla al elemento padre.
25
+ * En `connectedCallback`, si el `position` computado del padre es `'static'`,
26
+ * el badge automáticamente establece `parent.style.position = 'relative'`.
27
+ * Los consumidores no necesitan añadir manualmente `position: relative` al padre.
28
28
  *
29
- * **Rendering model:**
30
- * The `:host` displays as `contents`, making it transparent to layout.
31
- * Only the inner `.badge` span is visually rendered. This allows the badge
32
- * to be dropped inside any element without affecting its layout flow.
29
+ * **Modelo de renderizado:**
30
+ * El `:host` se muestra como `contents`, haciéndolo transparente para el layout.
31
+ * Solo el span interior `.badge` se renderiza visualmente. Esto permite que el badge
32
+ * se inserte dentro de cualquier elemento sin afectar su flujo de layout.
33
33
  *
34
34
  * @example
35
35
  * ```html
36
- * <!-- Notification badge on a button -->
36
+ * <!-- Badge de notificación en un botón -->
37
37
  * <div style="position: relative; display: inline-flex;">
38
38
  * <moni-button icon="notifications" variant="text"></moni-button>
39
39
  * <moni-badge value="5"></moni-badge>
@@ -42,98 +42,96 @@ import { MoniElement, sharedStyles } from './_base/index.js';
42
42
  *
43
43
  * @example
44
44
  * ```html
45
- * <!-- Inline dot badge for status -->
45
+ * <!-- Badge de punto en línea para estado -->
46
46
  * <moni-badge shape="min" color="primary" inline></moni-badge>
47
- * Online
47
+ * Conectado
48
48
  * ```
49
49
  *
50
- * @csspart badge - The badge `<span>` element. Override `background-color`,
51
- * `color`, or `border-radius` to customize appearance.
50
+ * @csspart badge - El elemento `<span>` del badge. Sobrescribe `background-color`,
51
+ * `color`, o `border-radius` para personalizar la apariencia.
52
52
  */
53
53
  let MoniBadge = class MoniBadge extends MoniElement {
54
54
  constructor() {
55
55
  super(...arguments);
56
56
  /**
57
- * Text content of the badge label.
57
+ * Contenido de texto de la etiqueta del badge.
58
58
  *
59
- * Also accepts slotted contentthe default slot inside the badge span
60
- * falls back to this value when no children are slotted.
61
- * Use an empty string with `shape="min"` to render a dot-only badge.
59
+ * También acepta contenido en el slot el slot por defecto dentro del span del badge
60
+ * usa este valor cuando no hay hijos proporcionados en el slot.
61
+ * Usa un string vacío con `shape="min"` para renderizar un badge de solo punto.
62
62
  *
63
63
  * @default ''
64
64
  */
65
65
  this.value = '';
66
66
  /**
67
- * Anchor position relative to the parent element's edges.
67
+ * Posición de anclaje relativa a los bordes del elemento padre.
68
68
  *
69
- * Uses `inset: 50% auto auto 50%` as the base and adjusts translation:
70
- * - `''` (default) — top-right corner (translate: 0, -100%).
71
- * - `'top'` — same as default, explicit alias.
72
- * - `'bottom'` — bottom-right corner (translate: 0, 0).
73
- * - `'left'` — top-left corner (translate: -100%, -100%).
74
- * - `'right'` — top-right corner (translate: 0, -100%).
75
- * - `'none'` — disables absolute positioning; see also the `inline` attribute.
69
+ * Usa `inset: 50% auto auto 50%` como base y ajusta la traslación:
70
+ * - `''` (por defecto) — esquina superior derecha (translate: 0, -100%).
71
+ * - `'top'` — igual que por defecto, alias explícito.
72
+ * - `'bottom'` — esquina inferior derecha (translate: 0, 0).
73
+ * - `'left'` — esquina superior izquierda (translate: -100%, -100%).
74
+ * - `'right'` — esquina superior derecha (translate: 0, -100%).
75
+ * - `'none'` — deshabilita el posicionamiento absoluto; ver también el atributo `inline`.
76
76
  *
77
77
  * @default ''
78
78
  */
79
79
  this.position = '';
80
80
  /**
81
- * Shape of the badge container.
81
+ * Forma del contenedor del badge.
82
82
  *
83
- * - `''` (default) — Rounded pill shape (border-radius: 1rem).
84
- * - `'circle'` — Alias for pill; the badge is always circular when the
85
- * content is a single character or absent.
86
- * - `'square'` — No border-radius (angular badge).
87
- * - `'min'` — Dot only; content is hidden via `display: none` and the
88
- * shape is clipped to a small circle via `clip-path`.
83
+ * - `''` (por defecto) — Forma de píldora redondeada (border-radius: 1rem).
84
+ * - `'circle'` — Alias para píldora; el badge siempre es circular cuando el
85
+ * contenido es un solo carácter o está ausente.
86
+ * - `'square'` — Sin border-radius (badge angular).
87
+ * - `'min'` — Solo punto; el contenido se oculta mediante `display: none` y la
88
+ * forma se recorta a un círculo pequeño mediante `clip-path`.
89
89
  *
90
90
  * @default ''
91
91
  */
92
92
  this.shape = '';
93
93
  /**
94
- * Semantic color role of the badge.
94
+ * Rol de color semántico del badge.
95
95
  *
96
- * Maps to the M3 color palette roles:
97
- * - `'error'` (default) — Red; standard for notification counts and alerts.
98
- * - `'primary'` — Brand primary color; for selection or active states.
99
- * - `'secondary'` — Secondary accent; for supplementary indicators.
100
- * - `'tertiary'` — Tertiary accent; for decorative or informational badges.
96
+ * Se asigna a los roles de la paleta de colores M3:
97
+ * - `'error'` (por defecto) — Rojo; estándar para conteos de notificaciones y alertas.
98
+ * - `'primary'` — Color primario de la marca; para estados activos o de selección.
99
+ * - `'secondary'` — Acento secundario; para indicadores suplementarios.
100
+ * - `'tertiary'` — Acento terciario; para badges decorativos o informativos.
101
101
  *
102
102
  * @default 'error'
103
103
  */
104
104
  this.color = 'error';
105
105
  /**
106
- * When `true`, the badge renders inline (resets `position: absolute` to
107
- * `position: relative`) rather than anchoring to the parent.
106
+ * Cuando es `true`, el badge se renderiza en línea (restablece `position: absolute` a
107
+ * `position: relative`) en lugar de anclarse al padre.
108
108
  *
109
- * Equivalent to BeerCSS's `.badge.none` class. Use for inline status
110
- * indicators that flow within text or flex containers.
109
+ * Equivalente a la clase `.badge.none` de BeerCSS. Úsalo para indicadores de estado en línea
110
+ * que fluyen dentro de texto o contenedores flex.
111
111
  *
112
112
  * @default false
113
113
  */
114
114
  this.inline = false;
115
115
  /**
116
- * When present, renders the badge with an outlined style:
117
- * - Background becomes `--surface` (same as the page background).
118
- * - Border and text color use the palette color token (e.g. `--error`).
116
+ * Cuando está presente, renderiza el badge con un estilo delineado:
117
+ * - El fondo se convierte en `--surface` (igual que el fondo de la página).
118
+ * - El borde y el color del texto usan el token de color de la paleta (ej. `--error`).
119
119
  *
120
- * Equivalent to BeerCSS's `.badge.border` class.
120
+ * Equivalente a la clase `.badge.border` de BeerCSS.
121
121
  *
122
122
  * @default false
123
123
  */
124
124
  this.border = false;
125
125
  }
126
126
  /**
127
- * Ensures the parent element can contain the absolutely-positioned badge.
128
- *
129
- * Reads the parent's computed `position` via `getComputedStyle`. If it is
130
- * `'static'` (the browser default), sets `parent.style.position = 'relative'`
131
- * so the badge anchors correctly. This is a convenience that avoids requiring
132
- * consumers to remember to add `position: relative` to the parent themselves.
127
+ * Hook de ciclo de vida de Lit.
128
+ * Mutación imperativa del DOM padre para garantizar el sistema de anclaje (CSS Position).
129
+ * Un badge por defecto usa position: absolute. Si su contenedor padre es estático,
130
+ * el badge "escaparía" hasta el body. Esto detecta el computed style y fuerza
131
+ * un contexto de apilamiento relativo para encapsularlo.
133
132
  */
134
133
  connectedCallback() {
135
134
  super.connectedCallback();
136
- // Ensure the badge's absolutely-positioned anchor point is correct.
137
135
  const parent = this.parentElement;
138
136
  if (parent) {
139
137
  const computed = getComputedStyle(parent);
@@ -213,16 +211,16 @@ let MoniBadge = class MoniBadge extends MoniElement {
213
211
  `
214
212
  ]; }
215
213
  /**
216
- * Renders the badge span with the computed class list.
214
+ * Renderiza el span del badge con la lista de clases computada.
217
215
  *
218
- * Class composition:
219
- * - `'badge'` — always present (base styles).
220
- * - `this.position` — position variant class (e.g. `'bottom'`, `'left'`).
221
- * - `this.shape` — shape variant class (e.g. `'min'`, `'square'`).
222
- * - `'none'` — added when `inline=true` to reset absolute positioning.
216
+ * Composición de clases:
217
+ * - `'badge'` — siempre presente (estilos base).
218
+ * - `this.position` — clase de variante de posición (ej. `'bottom'`, `'left'`).
219
+ * - `this.shape` — clase de variante de forma (ej. `'min'`, `'square'`).
220
+ * - `'none'` — se añade cuando `inline=true` para restablecer el posicionamiento absoluto.
223
221
  *
224
- * Falsy values are filtered out so no extra spaces appear in the class string.
225
- * The default slot falls back to the `value` attribute text node.
222
+ * Los valores falsos se filtran para que no aparezcan espacios extra en el string de clases.
223
+ * El slot por defecto usa el nodo de texto del atributo `value` como respaldo.
226
224
  */
227
225
  render() {
228
226
  const classes = [
@@ -6,37 +6,37 @@
6
6
  */
7
7
  import { MoniElement } from './_base/index.js';
8
8
  /**
9
- * Material Design 3 Bottom Sheet component.
9
+ * Componente Material Design 3 Bottom Sheet.
10
10
  *
11
- * Bottom sheets are surfaces anchored to the bottom of the screen that
12
- * supplement the main view. They display supplementary content, contextual
13
- * actions, or task flows without fully obscuring the primary content.
11
+ * Los bottom sheets son superficies ancladas a la parte inferior de la pantalla que
12
+ * complementan la vista principal. Muestran contenido complementario, acciones
13
+ * contextuales, o flujos de tareas sin ocultar por completo el contenido principal.
14
14
  *
15
- * **M3 spec reference:** `m3-docs/components/sheets-bottom/specs.md`
15
+ * **Referencia de la especificación M3:** `m3-docs/components/sheets-bottom/specs.md`
16
16
  *
17
- * **Implementation notenative `<dialog>` element:**
18
- * Like `<moni-dialog>`, this component wraps the native `<dialog>` element.
19
- * The `open` property drives `dialog.showModal()` / `dialog.close()`. When
20
- * `modal=true` (default), a `::backdrop` scrim is rendered automatically.
17
+ * **Nota de implementación elemento nativo `<dialog>`:**
18
+ * Al igual que `<moni-dialog>`, este componente envuelve el elemento nativo `<dialog>`.
19
+ * La propiedad `open` controla `dialog.showModal()` / `dialog.close()`. Cuando
20
+ * `modal=true` (por defecto), se renderiza automáticamente un fondo `::backdrop`.
21
21
  *
22
- * **Teleportation (body-level mounting):**
23
- * When `positioning="body"` (default), the component moves itself to
24
- * `document.body` on `connectedCallback` so the fixed-bottom dialog renders
25
- * above all stacking contexts. On `disconnectedCallback`, it is moved back
26
- * to its original DOM position. This avoids clipping by `overflow: hidden`
27
- * or `transform` ancestors.
22
+ * **Teletransportación (montaje a nivel del body):**
23
+ * Cuando `positioning="body"` (por defecto), el componente se mueve a
24
+ * `document.body` en `connectedCallback` para que el diálogo inferior fijo se renderice
25
+ * por encima de todos los contextos de apilamiento. En `disconnectedCallback`, se mueve de nuevo
26
+ * a su posición original en el DOM. Esto evita el recorte por un ancestro con `overflow: hidden`
27
+ * o `transform`.
28
28
  *
29
- * **Sizes:**
30
- * - `small` — Compact sheet; suitable for simple action menus.
31
- * - `medium` — Standard height (default).
32
- * - `large` — Expanded height (`expandedHeight` controls the max block-size).
33
- * - `auto` — Content-driven height.
29
+ * **Tamaños:**
30
+ * - `small` — Hoja compacta; adecuada para menús de acciones simples.
31
+ * - `medium` — Altura estándar (por defecto).
32
+ * - `large` — Altura expandida (`expandedHeight` controla el block-size máximo).
33
+ * - `auto` — Altura impulsada por el contenido.
34
34
  *
35
35
  * @example
36
36
  * ```html
37
- * <moni-bottom-sheet title="Share">
38
- * <moni-list-item icon="share">Copy link</moni-list-item>
39
- * <moni-list-item icon="mail">Send via email</moni-list-item>
37
+ * <moni-bottom-sheet title="Compartir">
38
+ * <moni-list-item icon="share">Copiar enlace</moni-list-item>
39
+ * <moni-list-item icon="mail">Enviar por correo</moni-list-item>
40
40
  * </moni-bottom-sheet>
41
41
  *
42
42
  * <script>
@@ -44,92 +44,92 @@ import { MoniElement } from './_base/index.js';
44
44
  * </script>
45
45
  * ```
46
46
  *
47
- * @slot default - The body content of the bottom sheet.
48
- * @slot handle - The drag handle area at the top of the sheet.
49
- * @slot footer - Action buttons at the bottom of the sheet.
47
+ * @slot default - El contenido principal del bottom sheet.
48
+ * @slot handle - El área del asa de arrastre en la parte superior.
49
+ * @slot footer - Botones de acción en la parte inferior de la hoja.
50
50
  *
51
- * @csspart dialog - The native `<dialog>` element.
52
- * @csspart header - The header container with title and close button.
53
- * @csspart body - The scrollable body content area.
54
- * @csspart footer - The footer action buttons area.
51
+ * @csspart dialog - El elemento nativo `<dialog>`.
52
+ * @csspart header - El contenedor del encabezado con el título y el botón de cierre.
53
+ * @csspart body - El área de contenido principal desplazable (scrollable).
54
+ * @csspart footer - El área de los botones de acción en el pie.
55
55
  */
56
56
  export declare class MoniBottomSheet extends MoniElement {
57
57
  /**
58
- * Controls the open/closed state of the bottom sheet.
58
+ * Controla el estado abierto/cerrado del bottom sheet.
59
59
  *
60
- * When set to `true`, calls `dialog.showModal()` or `dialog.show()`
61
- * depending on the `modal` property. When set to `false`, calls `dialog.close()`.
60
+ * Cuando se establece en `true`, llama a `dialog.showModal()` o `dialog.show()`
61
+ * dependiendo de la propiedad `modal`. Cuando se establece en `false`, llama a `dialog.close()`.
62
62
  *
63
63
  * @default false
64
64
  */
65
65
  open: boolean;
66
66
  /**
67
- * Height variant of the sheet container.
67
+ * Variante de altura del contenedor de la hoja.
68
68
  *
69
- * - `'small'` — Compact; suitable for quick confirmations.
70
- * - `'medium'` — Standard height (default).
71
- * - `'large'` — Fills `expandedHeight` of the viewport.
72
- * - `'auto'` — Content-driven; height adapts to the slotted content.
69
+ * - `'small'` — Compacta; adecuada para confirmaciones rápidas.
70
+ * - `'medium'` — Altura estándar (por defecto).
71
+ * - `'large'` — Llena el `expandedHeight` de la ventana gráfica.
72
+ * - `'auto'` — Depende del contenido; la altura se adapta al contenido en el slot.
73
73
  *
74
74
  * @default 'medium'
75
75
  */
76
76
  size: 'small' | 'medium' | 'large' | 'auto';
77
77
  /**
78
- * When `true` (default), the sheet opens as a modal dialog with a backdrop
79
- * scrim. When `false`, it opens as a non-modal overlay with no scrim.
78
+ * Cuando es `true` (por defecto), la hoja se abre como un diálogo modal con un
79
+ * fondo translúcido (scrim). Cuando es `false`, se abre como una superposición no modal sin scrim.
80
80
  *
81
81
  * @default true
82
82
  */
83
83
  modal: boolean;
84
84
  /**
85
- * Heading text displayed in the sheet's header area.
85
+ * Texto de encabezado mostrado en el área del encabezado de la hoja.
86
86
  *
87
87
  * @default ''
88
88
  */
89
89
  title: string;
90
90
  /**
91
- * Controls how the sheet is positioned in the document.
91
+ * Controla cómo se posiciona la hoja en el documento.
92
92
  *
93
- * - `'body'` (default) — Teleports the element to `document.body` so
94
- * the fixed overlay renders above all stacking contexts.
95
- * - `'fixed'` — Fixed positioning within its current DOM subtree.
96
- * - `'absolute'` — Absolute within the nearest positioned ancestor.
97
- * - `'static'` — Static flow (rarely needed; for testing only).
93
+ * - `'body'` (por defecto) — Teletransporta el elemento a `document.body` para que
94
+ * la superposición fija se renderice por encima de todos los contextos de apilamiento.
95
+ * - `'fixed'` — Posicionamiento fijo dentro de su subárbol DOM actual.
96
+ * - `'absolute'` — Absoluto dentro del ancestro posicionado más cercano.
97
+ * - `'static'` — Flujo estático (rara vez necesario; solo para pruebas).
98
98
  *
99
99
  * @default 'fixed'
100
100
  */
101
101
  positioning: 'body' | 'fixed' | 'absolute' | 'static';
102
102
  /**
103
- * Maximum block-size (height) of the sheet when `size="large"`.
103
+ * Block-size (altura) máximo de la hoja cuando `size="large"`.
104
104
  *
105
- * Accepts any valid CSS `max-block-size` value (e.g. `'85%'`, `'600px'`).
106
- * Defaults to `'85%'` which is the M3-recommended maximum for bottom sheets
107
- * on compact screens.
105
+ * Acepta cualquier valor válido de `max-block-size` en CSS (ej. `'85%'`, `'600px'`).
106
+ * Por defecto es `'85%'` que es el máximo recomendado por M3 para bottom sheets
107
+ * en pantallas compactas.
108
108
  *
109
109
  * @default '85%'
110
110
  */
111
111
  expandedHeight: string;
112
112
  /**
113
- * Optional maximum inline-size (width) constraint for the sheet.
113
+ * Restricción opcional de inline-size (ancho) máximo para la hoja.
114
114
  *
115
- * When set (e.g. `'640px'`), the sheet will not exceed this width even on
116
- * wide displays. Useful for tablet/desktop breakpoints where a centered
117
- * modal is preferred over a full-width sheet.
115
+ * Cuando se establece (ej. `'640px'`), la hoja no excederá este ancho incluso en
116
+ * pantallas anchas. Útil para puntos de interrupción de tableta/escritorio donde se prefiere
117
+ * un modal centrado en lugar de una hoja de ancho completo.
118
118
  *
119
- * @default '' (no constraint)
119
+ * @default '' (sin restricción)
120
120
  */
121
121
  maxWidth: string;
122
122
  /**
123
- * Original parent node before teleportation to `document.body`.
124
- * Used to restore the element's DOM position in `disconnectedCallback`.
123
+ * Nodo padre original antes de la teletransportación a `document.body`.
124
+ * Utilizado para restaurar la posición DOM del elemento en `disconnectedCallback`.
125
125
  */
126
126
  private _originalParent;
127
127
  /**
128
- * Original next sibling before teleportation to `document.body`.
129
- * Used alongside `_originalParent` to restore the exact DOM position.
128
+ * Hermano siguiente original antes de la teletransportación a `document.body`.
129
+ * Utilizado junto con `_originalParent` para restaurar la posición exacta en el DOM.
130
130
  */
131
131
  private _originalSibling;
132
- /** Direct reference to the native `<dialog>` element. */
132
+ /** Referencia directa al elemento nativo `<dialog>`. */
133
133
  private _dialog;
134
134
  private _isDragging;
135
135
  private _startY;
@@ -137,15 +137,83 @@ export declare class MoniBottomSheet extends MoniElement {
137
137
  private _sheetHeight;
138
138
  private _defaultHeight;
139
139
  private _justDragged;
140
+ private _skipRequestClose;
141
+ willUpdate(changed: Map<string, unknown>): void;
142
+ private _animateAndClose;
143
+ /**
144
+ * Calcula la altura máxima permitida en píxeles basándose en la propiedad `expandedHeight`.
145
+ * Útil para la lógica de arrastre donde necesitamos valores numéricos absolutos (px) en
146
+ * lugar de porcentajes o unidades de viewport, asegurando que el bottom-sheet no exceda
147
+ * el tamaño permitido en pantalla.
148
+ */
140
149
  private _getMaxHeightPx;
150
+ /**
151
+ * Inicia el proceso de arrastre (drag) cuando el usuario presiona sobre el `handle` o el `header`.
152
+ * Captura el puntero para asegurar que los eventos de movimiento se sigan recibiendo incluso si
153
+ * el cursor se sale de los límites físicos del elemento.
154
+ */
141
155
  private _onPointerDown;
156
+ /**
157
+ * Maneja el movimiento del puntero mientras se arrastra el componente.
158
+ * Interpola la altura o la transformación Y dependiendo de si se está expandiendo o colapsando,
159
+ * y de su estado actual (expandido o normal).
160
+ */
142
161
  private _onPointerMove;
162
+ /**
163
+ * Finaliza la interacción de arrastre, evaluando si el bottom-sheet debe
164
+ * expandirse, regresar a su estado original o cerrarse completamente según la
165
+ * inercia o la distancia arrastrada.
166
+ */
143
167
  private _onPointerUp;
168
+ /**
169
+ * Aborta limpiamente la interacción de arrastre (Pointer Cancel).
170
+ * Se dispara cuando el SO interrumpe el touch (ej: entrada de una llamada)
171
+ * o si el navegador toma el control para un scroll nativo imprevisto.
172
+ */
144
173
  private _onPointerCancel;
174
+ /**
175
+ * Handler de clicks en la superficie del modal (Backdrop).
176
+ * Si el clic cae exactamente en el fondo (`this._dialog`) y no en el contenedor de
177
+ * contenido interno (`this._sheetContent`), y si el sheet acaba de ser arrastrado
178
+ * sin soltar, ignora el click. De lo contrario, cierra fluidamente el modal deslizando hacia abajo.
179
+ */
145
180
  private _onDialogClick;
181
+ /**
182
+ * Hook del ciclo de vida reactivo (Lit).
183
+ * Gestiona inyecciones de variables CSS dinámicas para anchos y alturas máximas.
184
+ *
185
+ * Fundamental: Resuelve problemas de `z-index` y `overflow: hidden` en ancestros
186
+ * mediante el Portal Pattern (moviendo físicamente el DOM element al `document.body`)
187
+ * si `positioning === 'body'` cuando se abre, y devolviéndolo a su DOM originario al cerrar.
188
+ */
146
189
  updated(changed: Map<string, unknown>): void;
190
+ /**
191
+ * Limpieza (Garbage Collection).
192
+ * Si el Bottom Sheet fue destruido mientras estaba inyectado en el `document.body`
193
+ * (Portal Pattern), lo retorna a su padre original para evitar orfandad de nodos.
194
+ */
147
195
  disconnectedCallback(): void;
148
196
  static styles: import("lit").CSSResult[];
197
+ /**
198
+ * Renders the native `<dialog>` element that serves as the bottom sheet container.
199
+ *
200
+ * **Why `<dialog>` instead of `<div>`?**
201
+ * Using the native `<dialog>` element provides:
202
+ * - Built-in focus trapping via the `open` attribute (browser handles `inert`).
203
+ * - The `::backdrop` pseudo-element for the translucent overlay (styled via CSS).
204
+ * - Screen reader accessibility (`role="dialog"` / `aria-modal`) for free.
205
+ *
206
+ * **Positioning class mapping:**
207
+ * `posClass` maps `positioning='body'` to `'fixed'` (the CSS class name), while
208
+ * other positioning values pass through unchanged. `'body'` positioning anchors
209
+ * the sheet to the viewport; `'parent'` keeps it within the nearest `position: relative` ancestor.
210
+ *
211
+ * **Touch-to-dismiss via pointer events:**
212
+ * `@pointerdown`, `@pointermove`, and `@pointerup` on the `<dialog>` element
213
+ * power the swipe-down-to-dismiss gesture. `_onPointerDown` records the start Y;
214
+ * `_onPointerMove` applies a CSS `translateY` to provide live drag feedback;
215
+ * `_onPointerUp` determines if the drag exceeded the dismiss threshold.
216
+ */
149
217
  render(): import("lit").TemplateResult<1>;
150
218
  }
151
219
  declare global {
@@ -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;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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;;;;;;;;;;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,yDAAyD;IACxC,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;IAE7B,OAAO,CAAC,eAAe;IAcvB,OAAO,CAAC,cAAc;IAkBtB,OAAO,CAAC,cAAc;IAkCtB,OAAO,CAAC,YAAY;IAwFpB,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,cAAc;IAyBb,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IA4BrC,oBAAoB;IAO7B,OAAgB,MAAM,4BAyHpB;IAEO,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;;;;;;;;;;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,4BAyHpB;IAEF;;;;;;;;;;;;;;;;;;;OAmBG;IACM,MAAM;CAsBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD;AAED,eAAe,eAAe,CAAC"}