@moni-labs/moni-ui 0.4.13 → 0.4.14

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 (96) hide show
  1. package/custom-elements.json +91 -81
  2. package/dist/browser/moni-ui.iife.min.js +1537 -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 +2703 -2481
  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 +1 -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-morph-modal.d.ts +10 -0
  67. package/dist/components/moni-morph-modal.d.ts.map +1 -1
  68. package/dist/components/moni-morph-modal.js +323 -217
  69. package/dist/components/moni-select.d.ts +16 -16
  70. package/dist/components/moni-select.d.ts.map +1 -1
  71. package/dist/components/moni-select.js +797 -727
  72. package/dist/components/moni-text-field.d.ts +15 -15
  73. package/dist/components/moni-text-field.d.ts.map +1 -1
  74. package/dist/components/moni-text-field.js +224 -180
  75. package/dist/components/moni-textarea.d.ts +13 -13
  76. package/dist/components/moni-textarea.d.ts.map +1 -1
  77. package/dist/components/moni-textarea.js +127 -122
  78. package/docs/api.json +97 -88
  79. package/docs/assets/moni-morph-modal/autoHeight--false.png +0 -0
  80. package/docs/assets/moni-morph-modal/autoHeight--true.png +0 -0
  81. package/docs/components/morph-modal.md +16 -7
  82. package/docs/components/select.md +74 -74
  83. package/docs/components/text-field.md +75 -66
  84. package/docs/components/textarea.md +51 -51
  85. package/docs/llms.txt +3 -3
  86. package/package.json +1 -1
  87. package/src/components/_base/field-styles.ts +723 -637
  88. package/src/components/moni-morph-modal.test.ts +490 -413
  89. package/src/components/moni-morph-modal.ts +2274 -2162
  90. package/src/components/moni-select.test.ts +489 -466
  91. package/src/components/moni-select.ts +1963 -1815
  92. package/src/components/moni-text-field.test.ts +366 -342
  93. package/src/components/moni-text-field.ts +717 -645
  94. package/src/components/moni-textarea.test.ts +201 -197
  95. package/src/components/moni-textarea.ts +476 -460
  96. package/dist/cdn/chunks/if-defined-DdzvcoI7.js +0 -1
@@ -1,29 +1,29 @@
1
1
  # Textarea
2
2
 
3
- Componente Material Design 3 Textarea (Área de texto).
4
-
5
- Un campo de entrada de texto multilínea diseñado para recolectar cantidades mayores de texto,
6
- como comentarios, descripciones o mensajes.
7
-
8
- **Referencia a la especificación M3:** `m3-docs/components/text-fields/specs.md`
9
-
10
- **Arquitectura visual:**
11
- Comparte exactamente el mismo contenedor `.field` y motor de estilos que
12
- `<moni-text-field>`, pero internamente renderiza un `<textarea>` nativo en lugar
13
- de un `<input>`. Esto asegura la consistencia visual en todos los elementos del formulario
14
- en cuanto a etiquetas flotantes, texto de ayuda, estados de error e iconos.
15
-
16
- **Contador de caracteres:**
17
- Si se establece el atributo `maxlength`, el área de texto muestra automáticamente
18
- un contador de caracteres (`{longitud actual} / {maxlength}`) ubicado en el
19
- borde final (trailing) del área de texto de soporte (abajo a la derecha). Esto puede
20
- suprimirse estableciendo el atributo `no-counter`.
21
-
22
- **Gestión del estado:**
23
- Este componente es puramente visual y representacional. Refleja los atributos
24
- hacia el textarea nativo, pero NO adjunta listeners internos para `@input` o
25
- `@change`. Los consumidores deben adjuntar listeners estándar del DOM directamente
26
- a este elemento para capturar la entrada del usuario, tal como lo harían con un
3
+ Componente Material Design 3 Textarea (Área de texto).
4
+
5
+ Un campo de entrada de texto multilínea diseñado para recolectar cantidades mayores de texto,
6
+ como comentarios, descripciones o mensajes.
7
+
8
+ **Referencia a la especificación M3:** `m3-docs/components/text-fields/specs.md`
9
+
10
+ **Arquitectura visual:**
11
+ Comparte exactamente el mismo contenedor `.field` y motor de estilos que
12
+ `<moni-text-field>`, pero internamente renderiza un `<textarea>` nativo en lugar
13
+ de un `<input>`. Esto asegura la consistencia visual en todos los elementos del formulario
14
+ en cuanto a etiquetas flotantes, texto de ayuda, estados de error e iconos.
15
+
16
+ **Contador de caracteres:**
17
+ Si se establece el atributo `maxlength`, el área de texto muestra automáticamente
18
+ un contador de caracteres (`{longitud actual} / {maxlength}`) ubicado en el
19
+ borde final (trailing) del área de texto de soporte (abajo a la derecha). Esto puede
20
+ suprimirse estableciendo el atributo `no-counter`.
21
+
22
+ **Gestión del estado:**
23
+ Este componente es puramente visual y representacional. Refleja los atributos
24
+ hacia el textarea nativo, pero NO adjunta listeners internos para `@input` o
25
+ `@change`. Los consumidores deben adjuntar listeners estándar del DOM directamente
26
+ a este elemento para capturar la entrada del usuario, tal como lo harían con un
27
27
  textarea nativo.
28
28
 
29
29
  - Tag: `moni-textarea`
@@ -36,16 +36,16 @@ Usa `moni-textarea` cuando la interfaz necesite el patrón que describe este com
36
36
 
37
37
  ## Uso básico
38
38
 
39
- ```html
40
- <!-- Textarea llenado (filled) estándar -->
41
- <moni-textarea label="Descripción" rows="4"></moni-textarea>
42
-
43
- <!-- Textarea contorneado (outlined) con contador de caracteres -->
44
- <moni-textarea
45
- variant="outlined"
46
- label="Biografía"
47
- maxlength="160"
48
- ></moni-textarea>
39
+ ```html
40
+ <!-- Textarea llenado (filled) estándar -->
41
+ <moni-textarea label="Descripción" rows="4"></moni-textarea>
42
+
43
+ <!-- Textarea contorneado (outlined) con contador de caracteres -->
44
+ <moni-textarea
45
+ variant="outlined"
46
+ label="Biografía"
47
+ maxlength="160"
48
+ ></moni-textarea>
49
49
  ```
50
50
 
51
51
  ## Ejemplo práctico con Tailwind CSS v4
@@ -84,31 +84,31 @@ Las utilities aplicadas directamente al tag afectan su caja anfitriona. No uses
84
84
 
85
85
  | Atributo | Propiedad | Tipo | Default | Descripción |
86
86
  |---|---|---|---|---|
87
- | `name` | `name` | `string` | `''` | El nombre del textarea, enviado con los datos del formulario. |
88
- | `label` | `label` | `string` | `''` | El texto de la etiqueta flotante. |
89
- | `variant` | `variant` | `'filled' \| 'outlined'` | `'filled'` | Variante visual del área de texto. |
90
- | `size` | `size` | `'small' \| 'medium' \| 'large' \| 'extra'` | `'medium'` | Define las dimensiones del área de texto. |
91
- | `shape` | `shape` | `'round' \| 'small-round' \| 'square' \| 'no-round'` | `'no-round'` | Forma del radio del borde (border-radius) del campo. |
92
- | `icon` | `icon` | `string` | `''` | Nombre del icono inicial (leading) (Material Symbols). |
93
- | `trailing-icon` | `trailingIcon` | `string` | `''` | Nombre del icono final (trailing) (Material Symbols). |
94
- | `prefix` | `prefix` | `string` | `''` | Prefijo de texto corto mostrado antes del valor del input. |
95
- | `suffix` | `suffix` | `string` | `''` | Sufijo de texto corto mostrado después del valor del input. |
87
+ | `name` | `name` | `string` | `""` | El nombre del textarea, enviado con los datos del formulario. |
88
+ | `label` | `label` | `string` | `""` | El texto de la etiqueta flotante. |
89
+ | `variant` | `variant` | `"filled" \| "outlined"` | `"filled"` | Variante visual del área de texto. |
90
+ | `size` | `size` | `"small" \| "medium" \| "large" \| "extra"` | `"medium"` | Define las dimensiones del área de texto. |
91
+ | `shape` | `shape` | `"round" \| "small-round" \| "square" \| "no-round"` | `"no-round"` | Forma del radio del borde (border-radius) del campo. |
92
+ | `icon` | `icon` | `string` | `""` | Nombre del icono inicial (leading) (Material Symbols). |
93
+ | `trailing-icon` | `trailingIcon` | `string` | `""` | Nombre del icono final (trailing) (Material Symbols). |
94
+ | `prefix` | `prefix` | `string` | `""` | Prefijo de texto corto mostrado antes del valor del input. |
95
+ | `suffix` | `suffix` | `string` | `""` | Sufijo de texto corto mostrado después del valor del input. |
96
96
  | `rows` | `rows` | `number` | `3` | Número por defecto de líneas de texto visibles. |
97
97
  | `autosize` | `autosize` | `boolean` | `false` | Hace que el textarea crezca y se reduzca según su contenido. |
98
98
  | `max-rows` | `maxRows` | `number` | `0` | Número máximo de filas visibles cuando `autosize` está activo. Cero no impone límite. |
99
- | `maxlength` | `maxlength` | `number \| null` | `null` | Número máximo de caracteres permitidos en el área de texto. También habilita la visualización del contador de caracteres a menos que `noCounter` sea true. |
99
+ | `maxlength` | `maxlength` | `number \| null` | `null` | Número máximo de caracteres permitidos en el área de texto.
100
100
  También habilita la visualización del contador de caracteres a menos que `noCounter` sea true. |
101
101
  | `required` | `required` | `boolean` | `false` | Marca el campo como obligatorio y lo integra en la validación del formulario. |
102
102
  | `readonly` | `readonly` | `boolean` | `false` | Impide editar el valor sin sacarlo del envío ni atenuarlo como `disabled`. |
103
103
  | `minlength` | `minlength` | `number \| null` | `null` | Mínimo de caracteres aceptados. |
104
- | `autocomplete` | `autocomplete` | `string` | `''` | Pista de autocompletado del navegador. |
104
+ | `autocomplete` | `autocomplete` | `string` | `""` | Pista de autocompletado del navegador. |
105
105
  | `no-counter` | `noCounter` | `boolean` | `false` | Oculta la visualización del contador de caracteres cuando se establece `maxlength`. |
106
106
  | `loading` | `loading` | `boolean` | `false` | Si es true, muestra un indicador de carga (progreso circular) al final. |
107
107
  | `disabled` | `disabled` | `boolean` | `false` | Deshabilita el área de texto. |
108
- | `helper` | `helper` | `string` | `''` | Texto de ayuda mostrado debajo del campo. |
109
- | `error-text` | `errorText` | `string` | `''` | Texto de error mostrado debajo del campo cuando `error` es true. Sobrescribe el texto de ayuda. |
108
+ | `helper` | `helper` | `string` | `""` | Texto de ayuda mostrado debajo del campo. |
109
+ | `error-text` | `errorText` | `string` | `""` | Texto de error mostrado debajo del campo cuando `error` es true.
110
110
  Sobrescribe el texto de ayuda. |
111
111
  | `error` | `error` | `boolean` | `false` | Si es true, establece el campo en un estado de error. |
112
- | `value` | `value` | `string` | `''` | El valor actual del área de texto. |
113
- | `placeholder` | `placeholder` | `string` | `''` | Texto de marcador de posición (placeholder) mostrado cuando el textarea está vacío y la etiqueta es flotante. |
112
+ | `value` | `value` | `string` | `""` | El valor actual del área de texto. |
113
+ | `placeholder` | `placeholder` | `string` | `""` | Texto de marcador de posición (placeholder) mostrado cuando el textarea está vacío y la etiqueta es flotante. |
114
114
 
115
115
  ## Slots
116
116
 
@@ -234,7 +234,7 @@ Número máximo de filas visibles cuando `autosize` está activo. Cero no impone
234
234
 
235
235
  ### `maxlength`
236
236
 
237
- Número máximo de caracteres permitidos en el área de texto.
237
+ Número máximo de caracteres permitidos en el área de texto.
238
238
  También habilita la visualización del contador de caracteres a menos que `noCounter` sea true.
239
239
 
240
240
  ![moni-textarea — maxlength=default](../assets/moni-textarea/maxlength--default.png)
@@ -299,7 +299,7 @@ Texto de ayuda mostrado debajo del campo.
299
299
 
300
300
  ### `error-text`
301
301
 
302
- Texto de error mostrado debajo del campo cuando `error` es true.
302
+ Texto de error mostrado debajo del campo cuando `error` es true.
303
303
  Sobrescribe el texto de ayuda.
304
304
 
305
305
  ![moni-textarea — error-text=default](../assets/moni-textarea/errorText--default.png)
package/docs/llms.txt CHANGED
@@ -33,7 +33,7 @@ Biblioteca de 49 Web Components Material Design 3 Expressive. Importa `@moni-lab
33
33
  - moni-radio: docs/components/radio.md — Componente Material Design 3 Radio Button (Botón de Opción).
34
34
  - moni-ripple: docs/components/ripple.md — Componente de decoración de onda (ripple) puramente visual.
35
35
  - moni-segmented-button: docs/components/segmented-button.md — Componente Material Design 3 Segmented Button (Botón Segmentado) (Heredado).
36
- - moni-select: docs/components/select.md — Componente Material Design 3 Select (Menú Desplegable).
36
+ - moni-select: docs/components/select.md — Componente Material Design 3 Select (Menú Desplegable).
37
37
  - moni-select-option: docs/components/select-option.md — Componente Material Design 3 Select Option (Opción de Selección).
38
38
  - moni-shape: docs/components/shape.md — Material 3 Expressive shape with built-in polygon morphing.
39
39
  - moni-side-sheet: docs/components/side-sheet.md — Componente Material Design 3 Side Sheet (Hoja o panel lateral).
@@ -45,8 +45,8 @@ Biblioteca de 49 Web Components Material Design 3 Expressive. Importa `@moni-lab
45
45
  - moni-switch: docs/components/switch.md — Componente Material Design 3 Switch (Interruptor).
46
46
  - moni-tab: docs/components/tab.md — Componente Material Design 3 Tab (Pestaña).
47
47
  - moni-tabs: docs/components/tabs.md — Componente Material Design 3 Tabs container (Contenedor de pestañas).
48
- - moni-text-field: docs/components/text-field.md — Componente Material Design 3 Text Field (Campo de texto).
49
- - moni-textarea: docs/components/textarea.md — Componente Material Design 3 Textarea (Área de texto).
48
+ - moni-text-field: docs/components/text-field.md — Componente Material Design 3 Text Field (Campo de texto).
49
+ - moni-textarea: docs/components/textarea.md — Componente Material Design 3 Textarea (Área de texto).
50
50
  - moni-time-picker: docs/components/time-picker.md — Componente Material Design 3 Time Picker (Selector de hora).
51
51
  - moni-toolbar: docs/components/toolbar.md — Componente Material Design 3 Top App Bar (Barra de herramientas superior).
52
52
  - moni-tooltip: docs/components/tooltip.md — Componente Material Design 3 Tooltip (Información sobre herramientas).
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@moni-labs/moni-ui",
3
- "version": "0.4.13",
3
+ "version": "0.4.14",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "description": "Design system unificado para Moni — Material Design 3 Expressive, mobile-first.",