@moni-labs/moni-ui 0.4.13 → 0.4.16

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/docs/components/morph-modal.md

@@ -50,8 +50,8 @@ Las utilities aplicadas directamente al tag afectan su caja anfitriona. No uses
 
 | Atributo | Propiedad | Tipo | Default | Descripción |
 |---|---|---|---|---|
-| `target` | `target` | `string` | `''` | Selector del elemento disparador desde el cual transformarse (ej. '#fab' o '.my-button'). Si se omite, el modal aún puede activarse programáticamente estableciendo `open = true`. |
-| `open` | `open` | `boolean` | `false` | Controla el estado abierto/cerrado del modal. Puede establecerse directamente, o se gestiona internamente cuando se hace clic en el elemento `target`. |
+| `target` | `target` | `string` | `''` | Selector del elemento disparador desde el cual transformarse (ej. '#fab' o '.my-button').
 Si se omite, el modal aún puede activarse programáticamente estableciendo `open = true`. |
+| `open` | `open` | `boolean` | `false` | Controla el estado abierto/cerrado del modal.
 Puede establecerse directamente, o se gestiona internamente cuando se hace clic en el elemento `target`. |
 | `modal` | `modal` | `boolean` | `true` | Si es true, renderiza un fondo y atrapa el foco, actuando como un verdadero diálogo modal. |
 | `placement` | `placement` | `Placement` | `'center'` | Posición preferida del modal en relación con la ventana gráfica. |
 | `expanded-width` | `expandedWidth` | `string` | `'22rem'` | El ancho del modal cuando está completamente expandido. |
@@ -65,6 +65,7 @@ Las utilities aplicadas directamente al tag afectan su caja anfitriona. No uses
 | `hide-target` | `hideTarget` | `boolean` | `false` | Si es true, oculta el elemento disparador (target) mientras el modal está abierto. |
 | `cover-target` | `coverTarget` | `boolean` | `false` | Si es true, fuerza al modal a cubrir visualmente la ubicación original del target antes de expandirse. |
 | `auto-size` | `autoSize` | `boolean` | `false` | Si es true, el modal calcula automáticamente su tamaño final basándose en el contenido interno (ignora expandedWidth y expandedHeight). |
+| `auto-height` | `autoHeight` | `boolean` | `false` | Ajusta sólo la altura al contenido, sin superar expanded-height. |
 | `fullscreen` | `fullscreen` | `boolean` | `false` | Fuerza al modal expandido a ocupar todo el viewport. |
 | `responsive-fullscreen` | `responsiveFullscreen` | `boolean` | `false` | Activa fullscreen únicamente cuando el viewport no supera el breakpoint configurado. |
 | `fullscreen-breakpoint` | `fullscreenBreakpoint` | `number` | `600` | Ancho máximo del viewport, en píxeles, para aplicar responsive-fullscreen. |
@@ -81,11 +82,11 @@ No declara eventos propios.
 
 ## Métodos públicos
 
-- `show(): void` — Dispara la apertura del modal y coordina la animación de FLIP (First, Last, Invert, Play) / Morphing.
-1. Oculta visualmente el target original.
-2. Posiciona el modal colapsado exactamente sobre el target original (mismas dimensiones, color, y radios).
+- `show(): void` — Dispara la apertura del modal y coordina la animación de FLIP (First, Last, Invert, Play) / Morphing.
+1. Oculta visualmente el target original.
+2. Posiciona el modal colapsado exactamente sobre el target original (mismas dimensiones, color, y radios).
 3. Expande fluidamente el modal a sus dimensiones finales mediante transformaciones CSS.
-- `showFrom(target: HTMLElement): void` — Abre el modal realizando el morph desde un elemento proporcionado directamente.
+- `showFrom(target: HTMLElement): void` — Abre el modal realizando el morph desde un elemento proporcionado directamente.
 Útil cuando el trigger vive dentro de un Shadow DOM y no puede resolverse con `target`.
 - `resizeTo(width: string, height: string, anchor: 'center' | 'top-left' = 'center'): void` — Redimensiona y reposiciona suavemente un modal que ya está abierto.
 - `hide(): void` — Método público hide.
@@ -130,7 +131,7 @@ Cada imagen se genera con el componente real: cambia solo la variable indicada y
 
 ### `open`
 
-Controla el estado abierto/cerrado del modal.
+Controla el estado abierto/cerrado del modal.
 Puede establecerse directamente, o se gestiona internamente cuando se hace clic en el elemento `target`.
 
 ![moni-morph-modal — open=true](../assets/moni-morph-modal/open--true.png)
@@ -184,3 +185,11 @@ Si es true, el modal calcula automáticamente su tamaño final basándose en el
 ![moni-morph-modal — auto-size=false](../assets/moni-morph-modal/autoSize--false.png)
 
 ![moni-morph-modal — auto-size=true](../assets/moni-morph-modal/autoSize--true.png)
+
+### `auto-height`
+
+Ajusta sólo la altura al contenido, sin superar expanded-height.
+
+![moni-morph-modal — auto-height=false](../assets/moni-morph-modal/autoHeight--false.png)
+
+![moni-morph-modal — auto-height=true](../assets/moni-morph-modal/autoHeight--true.png)

package/docs/components/select.md

@@ -1,33 +1,33 @@
 # Select
 
-Componente Material Design 3 Select (Menú Desplegable).
-
-Un menú desplegable select personalizado completo con capacidad de búsqueda, grupos de opciones,
-navegación por teclado, animación y un modo de cajón/hoja (drawer/sheet) móvil opcional.
-Reemplaza el elemento nativo `<select>` con una alternativa completamente estilizada y accesible
-que cumple con M3.
-
-**Referencia a la especificación M3:** `m3-docs/components/menus/specs.md` (menús desplegables)
-
-**Resumen de características:**
-- Variantes Filled y Outlined que coinciden con los estilos de campo de texto de M3.
-- Etiqueta flotante (floating label) con la animación estándar de etiqueta flotante de estilos de campo.
-- Modo de búsqueda: el atributo `searchable` agrega un campo de entrada de filtro en línea.
-- Grupos de opciones: elementos `<moni-select-group>` en el slot para opciones jerárquicas.
-- Cajón móvil: el atributo `drawer` abre las opciones en un `<moni-bottom-sheet>`
-  en lugar de un popup desplegable, ideal para interfaces táctiles (touch UIs).
-- Navegación por teclado: Teclas de flecha, Enter, Escape y Tab según combobox de ARIA.
-- Estado de carga: `loading` muestra un progreso circular indeterminado.
-- Soporte multi-valor: `multiple` permite selección múltiple.
-
-**Fuentes de opciones:**
-Las opciones se pueden proporcionar de dos maneras:
-1. **Elementos `<moni-select-option>` en la ranura (slot)** (por defecto, recomendado para SSR).
-2. **Propiedad `options`** — un array de `DropdownNode[]` para un control completamente programático.
-
-**Vinculación de valores (Value binding):**
-La propiedad `value` contiene la cadena de valor de la opción actualmente seleccionada.
-Para selección múltiple, `values` contiene `string[]`. Al cambiar, se dispara un
+Componente Material Design 3 Select (Menú Desplegable).
+
+Un menú desplegable select personalizado completo con capacidad de búsqueda, grupos de opciones,
+navegación por teclado, animación y un modo de cajón/hoja (drawer/sheet) móvil opcional.
+Reemplaza el elemento nativo `<select>` con una alternativa completamente estilizada y accesible
+que cumple con M3.
+
+**Referencia a la especificación M3:** `m3-docs/components/menus/specs.md` (menús desplegables)
+
+**Resumen de características:**
+- Variantes Filled y Outlined que coinciden con los estilos de campo de texto de M3.
+- Etiqueta flotante (floating label) con la animación estándar de etiqueta flotante de estilos de campo.
+- Modo de búsqueda: el atributo `searchable` agrega un campo de entrada de filtro en línea.
+- Grupos de opciones: elementos `<moni-select-group>` en el slot para opciones jerárquicas.
+- Cajón móvil: el atributo `drawer` abre las opciones en un `<moni-bottom-sheet>`
+  en lugar de un popup desplegable, ideal para interfaces táctiles (touch UIs).
+- Navegación por teclado: Teclas de flecha, Enter, Escape y Tab según combobox de ARIA.
+- Estado de carga: `loading` muestra un progreso circular indeterminado.
+- Soporte multi-valor: `multiple` permite selección múltiple.
+
+**Fuentes de opciones:**
+Las opciones se pueden proporcionar de dos maneras:
+1. **Elementos `<moni-select-option>` en la ranura (slot)** (por defecto, recomendado para SSR).
+2. **Propiedad `options`** — un array de `DropdownNode[]` para un control completamente programático.
+
+**Vinculación de valores (Value binding):**
+La propiedad `value` contiene la cadena de valor de la opción actualmente seleccionada.
+Para selección múltiple, `values` contiene `string[]`. Al cambiar, se dispara un
 evento compuesto `'moni-change'`.
 
 - Tag: `moni-select`
@@ -40,18 +40,18 @@ Usa `moni-select` cuando la interfaz necesite el patrón que describe este compo
 
 ## Uso básico
 
-```html
-<moni-select label="País" name="country" variant="outlined">
-  <moni-select-option value="us">Estados Unidos</moni-select-option>
-  <moni-select-option value="gb">Reino Unido</moni-select-option>
-  <moni-select-option value="de">Alemania</moni-select-option>
-</moni-select>
-
-<!-- Select con búsqueda -->
-<moni-select label="Idioma" searchable>
-  <moni-select-option value="ts">TypeScript</moni-select-option>
-  <moni-select-option value="py">Python</moni-select-option>
-</moni-select>
+```html
+<moni-select label="País" name="country" variant="outlined">
+  <moni-select-option value="us">Estados Unidos</moni-select-option>
+  <moni-select-option value="gb">Reino Unido</moni-select-option>
+  <moni-select-option value="de">Alemania</moni-select-option>
+</moni-select>
+
+<!-- Select con búsqueda -->
+<moni-select label="Idioma" searchable>
+  <moni-select-option value="ts">TypeScript</moni-select-option>
+  <moni-select-option value="py">Python</moni-select-option>
+</moni-select>
 ```
 
 ## Ejemplo práctico con Tailwind CSS v4
@@ -90,28 +90,28 @@ Las utilities aplicadas directamente al tag afectan su caja anfitriona. No uses
 
 | Atributo | Propiedad | Tipo | Default | Descripción |
 |---|---|---|---|---|
-| `name` | `name` | `string` | `''` | Nombre del campo select, usado para el envío del formulario. |
-| `label` | `label` | `string` | `''` | Texto de la etiqueta flotante. |
-| `variant` | `variant` | `'filled' \| 'outlined'` | `'filled'` | Variante visual del campo select. |
-| `size` | `size` | `'small' \| 'medium' \| 'large' \| 'extra'` | `'medium'` | Define las dimensiones del campo select. |
-| `shape` | `shape` | `'round' \| 'small-round' \| 'square' \| 'no-round'` | `'no-round'` | Forma (radio de borde) del campo. |
+| `name` | `name` | `string` | `""` | Nombre del campo select, usado para el envío del formulario. |
+| `label` | `label` | `string` | `""` | Texto de la etiqueta flotante. |
+| `variant` | `variant` | `"filled" \| "outlined"` | `"filled"` | Variante visual del campo select. |
+| `size` | `size` | `"small" \| "medium" \| "large" \| "extra"` | `"medium"` | Define las dimensiones del campo select. |
+| `shape` | `shape` | `"round" \| "small-round" \| "square" \| "no-round"` | `"no-round"` | Forma (radio de borde) del campo. |
 | `disabled` | `disabled` | `boolean` | `false` | Deshabilita el campo select. |
-| `required` | `required` | `boolean` | `false` | Obliga a elegir una opción antes de enviar el formulario.  El `<input>` visible es de sólo lectura, así que la validación nativa no se aplica sobre él: la restricción se declara en el host con `ElementInternals.setValidity`, que es lo que mira el formulario. |
+| `required` | `required` | `boolean` | `false` | Obliga a elegir una opción antes de enviar el formulario.
 
 El `<input>` visible es de sólo lectura, así que la validación nativa no
 se aplica sobre él: la restricción se declara en el host con
 `ElementInternals.setValidity`, que es lo que mira el formulario. |
 | `loading` | `loading` | `boolean` | `false` | Si es verdadero, muestra un indicador de carga (progreso lineal). |
-| `helper` | `helper` | `string` | `''` | Texto de ayuda mostrado debajo del campo. |
-| `error-text` | `errorText` | `string` | `''` | Texto de error mostrado debajo del campo cuando `error` es true. Reemplaza al texto de ayuda. |
+| `helper` | `helper` | `string` | `""` | Texto de ayuda mostrado debajo del campo. |
+| `error-text` | `errorText` | `string` | `""` | Texto de error mostrado debajo del campo cuando `error` es true.
 Reemplaza al texto de ayuda. |
 | `error` | `error` | `boolean` | `false` | Si es verdadero, establece el campo en un estado de error. |
-| `value` | `value` | `string` | `''` | El valor actual del select. |
-| `icon` | `icon` | `string` | `''` | Nombre del icono principal (leading icon, Material Symbols). |
-| `trailing-icon` | `trailingIcon` | `string` | `'arrow_drop_down'` | Nombre del icono final (trailing icon, Material Symbols) que indica el estado del menú desplegable. |
+| `value` | `value` | `string` | `""` | El valor actual del select. |
+| `icon` | `icon` | `string` | `""` | Nombre del icono principal (leading icon, Material Symbols). |
+| `trailing-icon` | `trailingIcon` | `string` | `"arrow_drop_down"` | Nombre del icono final (trailing icon, Material Symbols) que indica el estado del menú desplegable. |
 | `searchable` | `searchable` | `boolean` | `false` | Habilita un campo de búsqueda en la parte superior del menú desplegable para filtrar opciones. |
 | `clearable` | `clearable` | `boolean` | `false` | Muestra un botón de limpieza cuando se selecciona un valor para restablecer fácilmente el campo. |
 | `sheet` | `sheet` | `boolean` | `false` | Renderiza las opciones como una hoja inferior (bottom sheet, ideal para dispositivos móviles) en lugar de un menú desplegable. |
-| `placeholder` | `placeholder` | `string` | `''` | Texto de marcador de posición (placeholder) mostrado cuando no hay ningún valor seleccionado. |
-| `positioning` | `positioning` | `'absolute' \| 'fixed' \| 'body'` | `'absolute'` | Estrategia de posicionamiento para el menú desplegable.  - `'absolute'`: permanece en el contexto de posicionamiento del select. - `'fixed'`: usa coordenadas del viewport, pero conserva su contexto de apilamiento. - `'body'`: usa la capa superior nativa (Popover API) para escapar de `overflow`,   diálogos, bottom sheets y contextos de apilamiento. |
-| `placement` | `placement` | `'top' \| 'bottom' \| 'left' \| 'right' \| 'auto'` | `'auto'` | Ubicación preferida del menú desplegable con respecto al disparador (trigger). |
-| `dropdown-width` | `dropdownWidth` | `string` | `'trigger'` | Restricción de ancho del menú desplegable. - `'trigger'`: Coincide con el ancho del campo de entrada. - `'auto'`: Coincide con el ancho del contenido del menú desplegable. - O cualquier valor CSS de ancho válido (ej. '200px'). |
-| `dropdown-max-height` | `dropdownMaxHeight` | `string` | `''` | Límite manual opcional para la altura del menú.  Acepta cualquier longitud CSS válida, por ejemplo `240px`, `40vh` o `calc(100vh - 8rem)`. El valor nunca supera el límite automático calculado según el viewport, la posición del campo y el tope predeterminado de 75vh. Una cadena vacía conserva el cálculo automático. |
+| `placeholder` | `placeholder` | `string` | `""` | Texto de marcador de posición (placeholder) mostrado cuando no hay ningún valor seleccionado. |
+| `positioning` | `positioning` | `"absolute" \| "fixed" \| "body"` | `"absolute"` | Estrategia de posicionamiento para el menú desplegable.
 
 - `'absolute'`: permanece en el contexto de posicionamiento del select.
 - `'fixed'`: usa coordenadas del viewport, pero conserva su contexto de apilamiento.
 - `'body'`: usa la capa superior nativa (Popover API) para escapar de `overflow`,
   diálogos, bottom sheets y contextos de apilamiento. |
+| `placement` | `placement` | `"top" \| "bottom" \| "left" \| "right" \| "auto"` | `"auto"` | Ubicación preferida del menú desplegable con respecto al disparador (trigger). |
+| `dropdown-width` | `dropdownWidth` | `string` | `"trigger"` | Restricción de ancho del menú desplegable.
 - `'trigger'`: Coincide con el ancho del campo de entrada.
 - `'auto'`: Coincide con el ancho del contenido del menú desplegable.
 - O cualquier valor CSS de ancho válido (ej. '200px'). |
+| `dropdown-max-height` | `dropdownMaxHeight` | `string` | `""` | Límite manual opcional para la altura del menú.
 
 Acepta cualquier longitud CSS válida, por ejemplo `240px`, `40vh` o
 `calc(100vh - 8rem)`. El valor nunca supera el límite automático calculado
 según el viewport, la posición del campo y el tope predeterminado de 75vh.
 Una cadena vacía conserva el cálculo automático. |
 
 ## Slots
 
@@ -211,10 +211,10 @@ Deshabilita el campo select.
 
 ### `required`
 
-Obliga a elegir una opción antes de enviar el formulario.
-
-El `<input>` visible es de sólo lectura, así que la validación nativa no
-se aplica sobre él: la restricción se declara en el host con
+Obliga a elegir una opción antes de enviar el formulario.
+
+El `<input>` visible es de sólo lectura, así que la validación nativa no
+se aplica sobre él: la restricción se declara en el host con
 `ElementInternals.setValidity`, que es lo que mira el formulario.
 
 ![moni-select — required=false](../assets/moni-select/required--false.png)
@@ -237,7 +237,7 @@ Texto de ayuda mostrado debajo del campo.
 
 ### `error-text`
 
-Texto de error mostrado debajo del campo cuando `error` es true.
+Texto de error mostrado debajo del campo cuando `error` es true.
 Reemplaza al texto de ayuda.
 
 ![moni-select — error-text=default](../assets/moni-select/errorText--default.png)
@@ -300,11 +300,11 @@ Texto de marcador de posición (placeholder) mostrado cuando no hay ningún valo
 
 ### `positioning`
 
-Estrategia de posicionamiento para el menú desplegable.
-
-- `'absolute'`: permanece en el contexto de posicionamiento del select.
-- `'fixed'`: usa coordenadas del viewport, pero conserva su contexto de apilamiento.
-- `'body'`: usa la capa superior nativa (Popover API) para escapar de `overflow`,
+Estrategia de posicionamiento para el menú desplegable.
+
+- `'absolute'`: permanece en el contexto de posicionamiento del select.
+- `'fixed'`: usa coordenadas del viewport, pero conserva su contexto de apilamiento.
+- `'body'`: usa la capa superior nativa (Popover API) para escapar de `overflow`,
   diálogos, bottom sheets y contextos de apilamiento.
 
 ![moni-select — positioning=absolute](../assets/moni-select/positioning--absolute.png)
@@ -329,20 +329,20 @@ Ubicación preferida del menú desplegable con respecto al disparador (trigger).
 
 ### `dropdown-width`
 
-Restricción de ancho del menú desplegable.
-- `'trigger'`: Coincide con el ancho del campo de entrada.
-- `'auto'`: Coincide con el ancho del contenido del menú desplegable.
+Restricción de ancho del menú desplegable.
+- `'trigger'`: Coincide con el ancho del campo de entrada.
+- `'auto'`: Coincide con el ancho del contenido del menú desplegable.
 - O cualquier valor CSS de ancho válido (ej. '200px').
 
 ![moni-select — dropdown-width=default](../assets/moni-select/dropdownWidth--default.png)
 
 ### `dropdown-max-height`
 
-Límite manual opcional para la altura del menú.
-
-Acepta cualquier longitud CSS válida, por ejemplo `240px`, `40vh` o
-`calc(100vh - 8rem)`. El valor nunca supera el límite automático calculado
-según el viewport, la posición del campo y el tope predeterminado de 75vh.
+Límite manual opcional para la altura del menú.
+
+Acepta cualquier longitud CSS válida, por ejemplo `240px`, `40vh` o
+`calc(100vh - 8rem)`. El valor nunca supera el límite automático calculado
+según el viewport, la posición del campo y el tope predeterminado de 75vh.
 Una cadena vacía conserva el cálculo automático.
 
 ![moni-select — dropdown-max-height=default](../assets/moni-select/dropdownMaxHeight--default.png)

package/docs/components/text-field.md

@@ -1,25 +1,25 @@
 # Text Field
 
-Componente Material Design 3 Text Field (Campo de texto).
-
-Un campo de entrada con todas las funciones que envuelve un `<input>` nativo dentro de la
-estructura de campo M3 (clase `.field` de `fieldStyles`). Soporta etiquetas flotantes,
-variantes llenas (filled) y contorneadas (outlined), iconos iniciales/finales (leading/trailing),
-texto de ayuda y estados de error.
-
-**Referencia a la especificación M3:** `m3-docs/components/text-fields/specs.md`
-
-**Arquitectura visual:**
-Utiliza `fieldStyles` para toda la estructura CSS del campo. El contenedor del campo
-es un `<div class="field [modifiers]">` que envuelve:
-1. Icono inicial (leading) opcional.
-2. Elemento `<input>` nativo.
-3. `<label>` flotante (cuando se establece `label`).
-4. Icono final (trailing) opcional o indicador de carga (spinner).
-5. `<output>` para texto de ayuda/error.
-
-**Sincronización de eventos:**
-Emite `moni-input` en cada tipeo y `moni-change` al consolidar el valor (blur/enter).
+Componente Material Design 3 Text Field (Campo de texto).
+
+Un campo de entrada con todas las funciones que envuelve un `<input>` nativo dentro de la
+estructura de campo M3 (clase `.field` de `fieldStyles`). Soporta etiquetas flotantes,
+variantes llenas (filled) y contorneadas (outlined), iconos iniciales/finales (leading/trailing),
+texto de ayuda y estados de error.
+
+**Referencia a la especificación M3:** `m3-docs/components/text-fields/specs.md`
+
+**Arquitectura visual:**
+Utiliza `fieldStyles` para toda la estructura CSS del campo. El contenedor del campo
+es un `<div class="field [modifiers]">` que envuelve:
+1. Icono inicial (leading) opcional.
+2. Elemento `<input>` nativo.
+3. `<label>` flotante (cuando se establece `label`).
+4. Icono final (trailing) opcional o indicador de carga (spinner).
+5. `<output>` para texto de ayuda/error.
+
+**Sincronización de eventos:**
+Emite `moni-input` en cada tipeo y `moni-change` al consolidar el valor (blur/enter).
 El valor interno del componente (`this.value`) se mantiene sincronizado automáticamente.
 
 - Tag: `moni-text-field`
@@ -32,23 +32,23 @@ Usa `moni-text-field` cuando la interfaz necesite el patrón que describe este c
 
 ## Uso básico
 
-```html
-<moni-text-field
-  label="Dirección de correo"
-  type="email"
-  name="email"
-  icon="mail"
-  variant="outlined"
-  helper="Nunca compartiremos tu correo."
-></moni-text-field>
-
-<moni-text-field
-  label="Monto"
-  type="number"
-  prefix="$"
-  error
-  error-text="El valor debe ser positivo"
-></moni-text-field>
+```html
+<moni-text-field
+  label="Dirección de correo"
+  type="email"
+  name="email"
+  icon="mail"
+  variant="outlined"
+  helper="Nunca compartiremos tu correo."
+></moni-text-field>
+
+<moni-text-field
+  label="Monto"
+  type="number"
+  prefix="$"
+  error
+  error-text="El valor debe ser positivo"
+></moni-text-field>
 ```
 
 ## Ejemplo práctico con Tailwind CSS v4
@@ -87,37 +87,37 @@ Las utilities aplicadas directamente al tag afectan su caja anfitriona. No uses
 
 | Atributo | Propiedad | Tipo | Default | Descripción |
 |---|---|---|---|---|
-| `name` | `name` | `string` | `''` | El nombre del input, enviado con los datos del formulario. |
-| `label` | `label` | `string` | `''` | El texto de la etiqueta flotante. |
-| `variant` | `variant` | `'filled' \| 'outlined' \| 'underlined'` | `'filled'` | Variante visual del campo de texto. |
-| `size` | `size` | `'small' \| 'medium' \| 'large' \| 'extra'` | `'medium'` | Define las dimensiones del campo de texto. |
-| `shape` | `shape` | `'round' \| 'small-round' \| 'no-round'` | `'no-round'` | Forma del radio del borde (border-radius) del campo. |
-| `type` | `type` | `'text' \| 'password' \| 'email' \| 'number' \| 'tel' \| 'url' \| 'search' \| 'date' \| 'time' \| 'datetime-local' \| 'month' \| 'week' \| 'color'` | `'text'` | El tipo de input HTML nativo. |
-| `icon` | `icon` | `string` | `''` | Nombre del icono inicial (leading) (Material Symbols). |
-| `trailing-icon` | `trailingIcon` | `string` | `''` | Nombre del icono final (trailing) (Material Symbols). |
-| `prefix` | `prefix` | `string` | `''` | Prefijo de texto corto mostrado antes del valor del input. |
-| `suffix` | `suffix` | `string` | `''` | Sufijo de texto corto mostrado después del valor del input. |
-| `suffix-button-icon` | `suffixButtonIcon` | `string` | `''` | Icono del botón interactivo ubicado al final del campo. |
-| `suffix-button-label` | `suffixButtonLabel` | `string` | `'Acción del campo'` | Etiqueta accesible del botón suffix. |
-| `helper` | `helper` | `string` | `''` | Texto de ayuda mostrado debajo del campo. |
-| `error-text` | `errorText` | `string` | `''` | Texto de error mostrado debajo del campo cuando `error` es true. Sobrescribe el texto de ayuda. |
+| `name` | `name` | `string` | `""` | El nombre del input, enviado con los datos del formulario. |
+| `label` | `label` | `string` | `""` | El texto de la etiqueta flotante. |
+| `variant` | `variant` | `"filled" \| "outlined" \| "underlined"` | `"filled"` | Variante visual del campo de texto. |
+| `size` | `size` | `"small" \| "medium" \| "large" \| "extra"` | `"medium"` | Define las dimensiones del campo de texto. |
+| `shape` | `shape` | `"round" \| "small-round" \| "no-round"` | `"no-round"` | Forma del radio del borde (border-radius) del campo. |
+| `type` | `type` | `"text" \| "password" \| "email" \| "number" \| "tel" \| "url" \| "search" \| "date" \| "time" \| "datetime-local" \| "month" \| "week" \| "color"` | `"text"` | El tipo de input HTML nativo. |
+| `icon` | `icon` | `string` | `""` | Nombre del icono inicial (leading) (Material Symbols). |
+| `trailing-icon` | `trailingIcon` | `string` | `""` | Nombre del icono final (trailing) (Material Symbols). |
+| `prefix` | `prefix` | `string` | `""` | Prefijo de texto corto mostrado antes del valor del input. |
+| `suffix` | `suffix` | `string` | `""` | Sufijo de texto corto mostrado después del valor del input. |
+| `suffix-button-icon` | `suffixButtonIcon` | `string` | `""` | Icono del botón interactivo ubicado al final del campo. |
+| `suffix-button-label` | `suffixButtonLabel` | `string` | `"Acción del campo"` | Etiqueta accesible del botón suffix. |
+| `helper` | `helper` | `string` | `""` | Texto de ayuda mostrado debajo del campo. |
+| `error-text` | `errorText` | `string` | `""` | Texto de error mostrado debajo del campo cuando `error` es true.
 Sobrescribe el texto de ayuda. |
 | `error` | `error` | `boolean` | `false` | Si es true, establece el campo en un estado de error. |
 | `loading` | `loading` | `boolean` | `false` | Si es true, muestra un indicador de carga (progreso lineal/circular) al final. |
 | `disabled` | `disabled` | `boolean` | `false` | Deshabilita el campo de texto. |
-| `value` | `value` | `string` | `''` | El valor actual del input. |
-| `placeholder` | `placeholder` | `string` | `''` | Texto de marcador de posición (placeholder) mostrado cuando el input está vacío y la etiqueta es flotante. |
+| `value` | `value` | `string` | `""` | El valor actual del input. |
+| `placeholder` | `placeholder` | `string` | `""` | Texto de marcador de posición (placeholder) mostrado cuando el input está vacío y la etiqueta es flotante. |
 | `required` | `required` | `boolean` | `false` | Marca el campo como obligatorio y lo integra en la validación del formulario. |
 | `readonly` | `readonly` | `boolean` | `false` | Impide editar el valor sin sacarlo del envío ni atenuarlo como `disabled`. |
-| `autocomplete` | `autocomplete` | `string` | `''` | Pista de autocompletado del navegador, por ejemplo `email` o `current-password`. |
-| `inputmode` | `inputmode` | `string` | `''` | Teclado virtual a mostrar en móvil, por ejemplo `numeric` o `tel`. |
+| `autocomplete` | `autocomplete` | `string` | `""` | Pista de autocompletado del navegador, por ejemplo `email` o `current-password`. |
+| `inputmode` | `inputmode` | `string` | `""` | Teclado virtual a mostrar en móvil, por ejemplo `numeric` o `tel`. |
 | `maxlength` | `maxlength` | `number \| null` | `null` | Máximo de caracteres aceptados. |
 | `minlength` | `minlength` | `number \| null` | `null` | Mínimo de caracteres aceptados. |
-| `min` | `min` | `string` | `''` | Valor mínimo para `number` y los tipos de fecha y hora. |
-| `max` | `max` | `string` | `''` | Valor máximo para `number` y los tipos de fecha y hora. |
-| `step` | `step` | `string` | `''` | Incremento para `number` y los tipos de fecha y hora. |
-| `pattern` | `pattern` | `string` | `''` | Expresión regular que debe cumplir el valor. |
-| `mask` | `mask` | `string` | `''` | Patrón Inputmask. Admite opcionales `[]`, grupos `()`, alternadores `\|`, cuantificadores `{n,m}` y los tokens `9`, `a`, `*` y `K` (RUT). |
-| `mask-alias` | `maskAlias` | `string` | `''` | Alias integrado de Inputmask, por ejemplo `email`, `datetime`, `numeric`, `currency` o `ip`. |
+| `min` | `min` | `string` | `""` | Valor mínimo para `number` y los tipos de fecha y hora. |
+| `max` | `max` | `string` | `""` | Valor máximo para `number` y los tipos de fecha y hora. |
+| `step` | `step` | `string` | `""` | Incremento para `number` y los tipos de fecha y hora. |
+| `pattern` | `pattern` | `string` | `""` | Expresión regular que debe cumplir el valor. |
+| `mask` | `mask` | `string` | `""` | Patrón Inputmask. Admite opcionales `[]`, grupos `()`, alternadores `\|`,
 cuantificadores `{n,m}` y los tokens `9`, `a`, `*` y `K` (RUT). |
+| `mask-alias` | `maskAlias` | `string` | `""` | Alias integrado de Inputmask, por ejemplo `email`, `datetime`, `numeric`, `currency` o `ip`. |
 | `mask-options` | `maskOptions` | `InputmaskOptions` | `{}` | Opciones avanzadas de Inputmask. También acepta JSON mediante el atributo `mask-options`. |
 
 ## Slots
@@ -131,14 +131,23 @@ Este componente no declara slots públicos.
 ## Métodos públicos
 
 - `maskOption(name: string): unknown;` — Lee o actualiza opciones de la instancia activa.
-- `maskOption(options: InputmaskOptions, noRemask?: boolean): InputmaskInstance | undefined;` — Método público maskOption.
-- `maskOption(nameOrOptions: string | InputmaskOptions, noRemask = false): unknown` — Método público maskOption.
+- `maskOption(
+    options: InputmaskOptions,
+    noRemask?: boolean,
+  ): InputmaskInstance | undefined;` — Método público maskOption.
+- `maskOption(
+    nameOrOptions: string | InputmaskOptions,
+    noRemask = false,
+  ): unknown` — Método público maskOption.
 - `getEmptyMask(): string` — Método público getEmptyMask.
 - `hasMaskedValue(): boolean` — Método público hasMaskedValue.
 - `isMaskComplete(): boolean` — Método público isMaskComplete.
 - `isMaskValid(value?: string): boolean` — Método público isMaskValid.
 - `getMaskMetadata(): unknown` — Método público getMaskMetadata.
-- `formatWithMask(value: string, metadata = false): string |` — Método público formatWithMask.
+- `formatWithMask(
+    value: string,
+    metadata = false,
+  ): string |` — Método público formatWithMask.
 - `setMaskedValue(value: string): void` — Método público setMaskedValue.
 - `removeMask(): void` — Método público removeMask.
 - `checkValidity(): boolean` — Método público checkValidity.
@@ -286,7 +295,7 @@ Texto de ayuda mostrado debajo del campo.
 
 ### `error-text`
 
-Texto de error mostrado debajo del campo cuando `error` es true.
+Texto de error mostrado debajo del campo cuando `error` es true.
 Sobrescribe el texto de ayuda.
 
 ![moni-text-field — error-text=default](../assets/moni-text-field/errorText--default.png)
@@ -393,7 +402,7 @@ Expresión regular que debe cumplir el valor.
 
 ### `mask`
 
-Patrón Inputmask. Admite opcionales `[]`, grupos `()`, alternadores `|`,
+Patrón Inputmask. Admite opcionales `[]`, grupos `()`, alternadores `|`,
 cuantificadores `{n,m}` y los tokens `9`, `a`, `*` y `K` (RUT).
 
 ![moni-text-field — mask=default](../assets/moni-text-field/mask--default.png)