@moni-labs/moni-ui 0.4.4 → 0.4.6

package/docs/components/file-field.md

@@ -0,0 +1,244 @@
+# File Field
+
+Componente Material Design 3 File Field (Campo de Archivo).
+
+Un componente de campo especializado que proporciona una alternativa estilizada y accesible
+al `<input type="file">` nativo. Envuelve un input de archivo nativo dentro de
+la carcasa `.field` de M3 y presenta un input de texto de solo lectura que muestra los
+nombres de archivo(s) seleccionado(s) junto a un botón de acción "Seleccionar archivo" estilizado.
+
+**Arquitectura visual:**
+El componente aprovecha los patrones CSS `fieldStyles`. La estructura interna del DOM
+está ordenada específicamente como:
+`[text input] -> [label] -> [file input] -> [output]`
+Este ordenamiento específico asegura que el selector CSS de hermano adyacente
+(`input + label`) pueda flotar correctamente la etiqueta cuando el campo está poblado,
+a pesar de que el campo visible sea realmente el input de texto de solo lectura.
+
+**Gestión del estado:**
+Cuando el usuario selecciona archivos a través del input de archivo oculto, el componente escucha
+el evento nativo `change`, lee `input.files`, y actualiza el input de texto
+de solo lectura con una lista separada por comas de los nombres de archivo. La propiedad `value`
+se mantiene sincronizada, y se re-despacha un evento compuesto `'change'`.
+
+- Tag: `moni-file-field`
+- Clase: `MoniFileField`
+- Fuente: `src/components/moni-file-field.ts`
+
+## Cuándo usarlo
+
+Usa `moni-file-field` cuando la interfaz necesite el patrón que describe este componente. Antes de elegirlo, revisa sus estados, contenido permitido y comportamiento accesible; las capturas del final muestran el resultado real de cada variante.
+
+## Uso básico
+
+```html
+<!-- Carga de un solo archivo -->
+<moni-file-field
+  label="Foto de perfil"
+  name="avatar"
+  accept="image/png, image/jpeg"
+  button-label="Explorar..."
+></moni-file-field>
+
+<!-- Carga de múltiples archivos con estado de error -->
+<moni-file-field
+  label="Documentos"
+  multiple
+  error
+  error-text="Los archivos superan el límite de tamaño máximo"
+></moni-file-field>
+```
+
+## Ejemplo práctico con Tailwind CSS v4
+
+Tailwind controla composición, ancho, espaciado y responsividad alrededor del Web Component. Moni UI conserva el aspecto interno mediante Shadow DOM y design tokens.
+
+```html
+<div class="mx-auto flex w-full max-w-md flex-col gap-4 p-6">
+  <moni-file-field label="Ejemplo"></moni-file-field>
+</div>
+```
+
+No necesitas un plugin de Tailwind. En tu CSS v4 importa ambas capas una sola vez:
+
+```css
+@import "tailwindcss";
+@import "@moni-labs/moni-ui/styles";
+
+@theme {
+  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
+}
+```
+
+Las utilities aplicadas directamente al tag afectan su caja anfitriona. No uses selectores Tailwind para asumir acceso al DOM interno; personaliza únicamente con los CSS Parts y Custom Properties públicos enumerados más abajo.
+
+## Recomendaciones
+
+- Usa `moni-file-field` para su propósito semántico; no lo sustituyas por un `div` estilizado.
+- Aplica Tailwind al layout exterior. Para el interior del Shadow DOM usa las variables CSS y `::part()` documentados.
+- Durante una operación asíncrona combina el estado `loading` —si existe— con `disabled` para evitar envíos duplicados.
+- En formularios controlados, sincroniza la propiedad `value` y escucha el evento documentado; no dependas solo del atributo inicial.
+- Cuando el control muestre únicamente un icono, añade siempre un `aria-label` descriptivo.
+- Prueba los estados claro, oscuro, foco por teclado, deshabilitado y viewport móvil antes de publicar.
+
+## Propiedades y atributos
+
+| 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'` | `'outlined'` | Variante visual del campo de texto. |
+| `size` | `size` | `'small' \| 'medium' \| 'large' \| 'extra'` | `'medium'` | Define las dimensiones del campo de texto. |
+| `shape` | `shape` | `'round' \| 'square' \| 'no-round'` | `'no-round'` | Forma del radio del borde del campo. |
+| `accept` | `accept` | `string` | `''` | El atributo `accept` para el input de archivo (ej. `image/*, .pdf`). |
+| `multiple` | `multiple` | `boolean` | `false` | Permite seleccionar múltiples archivos si es true. |
+| `button-label` | `buttonLabel` | `string` | `'Choose file'` | Texto para el botón de selección de archivo. |
+| `disabled` | `disabled` | `boolean` | `false` | Deshabilita el campo de archivo. |
+| `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. |
+| `value` | `value` | `string` | `''` | La representación en cadena de los archivos seleccionados (solo lectura para el usuario). |
+| `icon` | `icon` | `string` | `''` | Nombre del icono inicial (Material Symbols). |
+| `trailing-icon` | `trailingIcon` | `string` | `'folder_open'` | Nombre del icono final (Material Symbols). |
+
+## Slots
+
+Este componente no declara slots públicos.
+
+## Eventos
+
+No declara eventos propios.
+
+## Métodos públicos
+
+No expone métodos públicos adicionales.
+
+## CSS Parts
+
+- `field`: Parte interna personalizable.
+- `input-text`: El `<input type="text">` de solo lectura visible.
+- `label`: Parte interna personalizable.
+- `input-file`: El `<input type="file">` nativo oculto.
+- `button`: El elemento de botón (estilizado vía CSS `::file-selector-button`).
+- `display`: Parte interna personalizable.
+- `file`: Parte interna personalizable.
+- `helper`: Parte interna personalizable.
+- `leading-icon`: Parte interna personalizable.
+- `trailing-icon`: Parte interna personalizable.
+
+## CSS Custom Properties consumidas
+
+No consume variables CSS propias.
+
+## Referencia visual por variable
+
+Cada imagen se genera con el componente real: cambia solo la variable indicada y mantiene estable el resto del escenario. Úsala para comparar estados, no como sustituto de la API.
+
+### `name`
+
+El nombre del input, enviado con los datos del formulario.
+
+![moni-file-field — name=default](../assets/moni-file-field/name--default.png)
+
+### `label`
+
+El texto de la etiqueta flotante.
+
+![moni-file-field — label=default](../assets/moni-file-field/label--default.png)
+
+### `variant`
+
+Variante visual del campo de texto.
+
+![moni-file-field — variant=filled](../assets/moni-file-field/variant--filled.png)
+
+![moni-file-field — variant=outlined](../assets/moni-file-field/variant--outlined.png)
+
+### `size`
+
+Define las dimensiones del campo de texto.
+
+![moni-file-field — size=small](../assets/moni-file-field/size--small.png)
+
+![moni-file-field — size=medium](../assets/moni-file-field/size--medium.png)
+
+![moni-file-field — size=large](../assets/moni-file-field/size--large.png)
+
+![moni-file-field — size=extra](../assets/moni-file-field/size--extra.png)
+
+### `shape`
+
+Forma del radio del borde del campo.
+
+![moni-file-field — shape=round](../assets/moni-file-field/shape--round.png)
+
+![moni-file-field — shape=square](../assets/moni-file-field/shape--square.png)
+
+![moni-file-field — shape=no-round](../assets/moni-file-field/shape--no-round.png)
+
+### `accept`
+
+El atributo `accept` para el input de archivo (ej. `image/*, .pdf`).
+
+![moni-file-field — accept=default](../assets/moni-file-field/accept--default.png)
+
+### `multiple`
+
+Permite seleccionar múltiples archivos si es true.
+
+![moni-file-field — multiple=false](../assets/moni-file-field/multiple--false.png)
+
+![moni-file-field — multiple=true](../assets/moni-file-field/multiple--true.png)
+
+### `button-label`
+
+Texto para el botón de selección de archivo.
+
+![moni-file-field — button-label=default](../assets/moni-file-field/buttonLabel--default.png)
+
+### `disabled`
+
+Deshabilita el campo de archivo.
+
+![moni-file-field — disabled=false](../assets/moni-file-field/disabled--false.png)
+
+![moni-file-field — disabled=true](../assets/moni-file-field/disabled--true.png)
+
+### `helper`
+
+Texto de ayuda mostrado debajo del campo.
+
+![moni-file-field — helper=default](../assets/moni-file-field/helper--default.png)
+
+### `error-text`
+
+Texto de error mostrado debajo del campo cuando `error` es true.
+Sobrescribe el texto de ayuda.
+
+![moni-file-field — error-text=default](../assets/moni-file-field/errorText--default.png)
+
+### `error`
+
+Si es true, establece el campo en un estado de error.
+
+![moni-file-field — error=false](../assets/moni-file-field/error--false.png)
+
+![moni-file-field — error=true](../assets/moni-file-field/error--true.png)
+
+### `value`
+
+La representación en cadena de los archivos seleccionados (solo lectura para el usuario).
+
+![moni-file-field — value=default](../assets/moni-file-field/value--default.png)
+
+### `icon`
+
+Nombre del icono inicial (Material Symbols).
+
+![moni-file-field — icon=default](../assets/moni-file-field/icon--default.png)
+
+### `trailing-icon`
+
+Nombre del icono final (Material Symbols).
+
+![moni-file-field — trailing-icon=default](../assets/moni-file-field/trailingIcon--default.png)

package/docs/components/icon.md

@@ -0,0 +1,156 @@
+# Icon
+
+Componente de icono solo visual que utiliza la fuente variable Material Symbols.
+
+Renderiza un glifo de Material Symbols por el nombre de su ligadura. La fuente de iconos
+debe cargarse globalmente en el documento host — no viene empaquetada con
+el componente. Añada la fuente a través de la hoja de estilos `@moni-labs/moni-ui/styles`
+o incluyendo el enlace CDN de Google Fonts.
+
+**Renderizado de fuentes:**
+El icono usa `font-family: var(--font-icon)` que por defecto es
+`'Material Symbols Rounded'`. Sobrescriba `--font-icon-override` en el
+`:root` del documento host para cambiar a una variante diferente del conjunto de iconos
+(ej. `'Material Symbols Outlined'` o `'Material Symbols Sharp'`).
+
+**Ajustes de fuente variable:**
+El valor por defecto de `font-variation-settings` es `'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24`.
+Establecer el atributo `filled` cambia a `'FILL' 1` para la variante de icono sólido.
+
+**Herencia de color:**
+El icono siempre hereda el color de su padre a través de `color: inherit`, haciéndolo
+adaptarse automáticamente a las variantes de botones, estados seleccionados de chips, estados
+activos de elementos de lista y otros contenedores de contexto de color.
+
+- Tag: `moni-icon`
+- Clase: `MoniIcon`
+- Fuente: `src/components/moni-icon.ts`
+
+## Cuándo usarlo
+
+Usa `moni-icon` cuando la interfaz necesite el patrón que describe este componente. Antes de elegirlo, revisa sus estados, contenido permitido y comportamiento accesible; las capturas del final muestran el resultado real de cada variante.
+
+## Uso básico
+
+```html
+<!-- Icono básico -->
+<moni-icon name="home"></moni-icon>
+
+<!-- Icono grande rellenado -->
+<moni-icon name="favorite" size="large" filled></moni-icon>
+
+<!-- Sobrescritura de SVG personalizado a través de slot -->
+<moni-icon>
+  <svg slot="default" viewBox="0 0 24 24">...</svg>
+</moni-icon>
+```
+
+## Ejemplo práctico con Tailwind CSS v4
+
+Tailwind controla composición, ancho, espaciado y responsividad alrededor del Web Component. Moni UI conserva el aspecto interno mediante Shadow DOM y design tokens.
+
+```html
+<div class="mx-auto flex w-full max-w-md flex-col gap-4 p-6">
+  <moni-icon></moni-icon>
+</div>
+```
+
+No necesitas un plugin de Tailwind. En tu CSS v4 importa ambas capas una sola vez:
+
+```css
+@import "tailwindcss";
+@import "@moni-labs/moni-ui/styles";
+
+@theme {
+  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
+}
+```
+
+Las utilities aplicadas directamente al tag afectan su caja anfitriona. No uses selectores Tailwind para asumir acceso al DOM interno; personaliza únicamente con los CSS Parts y Custom Properties públicos enumerados más abajo.
+
+## Recomendaciones
+
+- Usa `moni-icon` para su propósito semántico; no lo sustituyas por un `div` estilizado.
+- Aplica Tailwind al layout exterior. Para el interior del Shadow DOM usa las variables CSS y `::part()` documentados.
+- Prueba los estados claro, oscuro, foco por teclado, deshabilitado y viewport móvil antes de publicar.
+
+## Propiedades y atributos
+
+| Atributo | Propiedad | Tipo | Default | Descripción |
+|---|---|---|---|---|
+| `name` | `name` | `string` | `''` | Nombre de la ligadura de Material Symbols para el icono a renderizar.  Utilice el nombre exactamente como se muestra en https://fonts.google.com/icons (ej. `'home'`, `'settings'`, `'arrow_forward'`). Cuando está vacío, se renderiza el slot por defecto en su lugar. |
+| `size` | `size` | `'tiny' \| 'small' \| 'medium' \| 'large' \| 'extra'` | `'medium'` | Tamaño de la caja delimitadora del icono.  Se mapea a la propiedad personalizada `--_size`: \| Valor      \| Tamaño   \| \|------------\|----------\| \| `'tiny'`   \| 1rem     \| \| `'small'`  \| 1.25rem  \| \| `'medium'` \| 1.5rem   \| \| `'large'`  \| 1.75rem  \| \| `'extra'`  \| 2rem     \| |
+| `filled` | `filled` | `boolean` | `false` | Cuando es `true`, cambia a la variante rellenada (filled) del icono estableciendo `font-variation-settings: 'FILL' 1`.  Esto funciona solo con fuentes de iconos variables que incluyen el eje `FILL` (todas las variantes de Material Symbols lo hacen). No tiene efecto si se carga una fuente de iconos diferente que no soporte `FILL`. |
+
+## Slots
+
+- `default`: Contenido de respaldo cuando `name` está vacío. Acepta elementos `<svg>` o `<img>`
+          que se dimensionan al 100% de la caja del icono.
+
+## Eventos
+
+No declara eventos propios.
+
+## Métodos públicos
+
+No expone métodos públicos adicionales.
+
+## CSS Parts
+
+No declara CSS Parts.
+
+## CSS Custom Properties consumidas
+
+- `--_size`
+- `--font-icon`
+- `--moni-icon-size`
+
+## Referencia visual por variable
+
+Cada imagen se genera con el componente real: cambia solo la variable indicada y mantiene estable el resto del escenario. Úsala para comparar estados, no como sustituto de la API.
+
+### `name`
+
+Nombre de la ligadura de Material Symbols para el icono a renderizar.
+
+Utilice el nombre exactamente como se muestra en https://fonts.google.com/icons
+(ej. `'home'`, `'settings'`, `'arrow_forward'`).
+Cuando está vacío, se renderiza el slot por defecto en su lugar.
+
+![moni-icon — name=default](../assets/moni-icon/name--default.png)
+
+### `size`
+
+Tamaño de la caja delimitadora del icono.
+
+Se mapea a la propiedad personalizada `--_size`:
+| Valor      | Tamaño   |
+|------------|----------|
+| `'tiny'`   | 1rem     |
+| `'small'`  | 1.25rem  |
+| `'medium'` | 1.5rem   |
+| `'large'`  | 1.75rem  |
+| `'extra'`  | 2rem     |
+
+![moni-icon — size=tiny](../assets/moni-icon/size--tiny.png)
+
+![moni-icon — size=small](../assets/moni-icon/size--small.png)
+
+![moni-icon — size=medium](../assets/moni-icon/size--medium.png)
+
+![moni-icon — size=large](../assets/moni-icon/size--large.png)
+
+![moni-icon — size=extra](../assets/moni-icon/size--extra.png)
+
+### `filled`
+
+Cuando es `true`, cambia a la variante rellenada (filled) del icono estableciendo
+`font-variation-settings: 'FILL' 1`.
+
+Esto funciona solo con fuentes de iconos variables que incluyen el eje `FILL`
+(todas las variantes de Material Symbols lo hacen). No tiene efecto si se carga
+una fuente de iconos diferente que no soporte `FILL`.
+
+![moni-icon — filled=false](../assets/moni-icon/filled--false.png)
+
+![moni-icon — filled=true](../assets/moni-icon/filled--true.png)

package/docs/components/list-item.md

@@ -0,0 +1,189 @@
+# List Item
+
+Componente Material Design 3 List Item (Elemento de Lista).
+
+Una sola fila dentro de un `<moni-list>`. Los elementos de lista muestran un titular y
+opcionalmente texto de soporte, metadatos, iconos o avatares.
+
+**Referencia de la especificación M3:** `m3-docs/components/lists/specs.md`
+
+**Configuraciones de línea:**
+El atributo `lines` configura el diseño y la altura mínima del elemento:
+- `lines="1"` (por defecto) — altura mínima de 56dp. Solo se muestra el slot del titular.
+- `lines="2"` — altura mínima de 72dp. Muestra el titular y el texto de soporte.
+- `lines="3"` — altura mínima de 88dp. Muestra el titular, el texto de soporte y el texto meta.
+
+**Comportamiento interactivo:**
+Por defecto, los elementos se renderizan como elementos `<button>`, adquiriendo la capa de estado de M3
+(efectos de ondulación de hover, focus y press).
+Si se proporciona el atributo `href`, el elemento se renderiza internamente como un elemento `<a>`,
+permitiendo enrutamiento de enlaces nativos e interacciones mientras se preserva el
+estilo del elemento de lista.
+
+**Elementos visuales:**
+- `icon` (atributo) — Nombre de Material Symbol para el icono inicial (24dp).
+- `avatar` (atributo) — URL para una imagen circular inicial (40dp).
+- `trailing-icon` (atributo) — Nombre de Material Symbol para el icono final.
+
+- Tag: `moni-list-item`
+- Clase: `MoniListItem`
+- Fuente: `src/components/moni-list-item.ts`
+
+## Cuándo usarlo
+
+Usa `moni-list-item` cuando la interfaz necesite el patrón que describe este componente. Antes de elegirlo, revisa sus estados, contenido permitido y comportamiento accesible; las capturas del final muestran el resultado real de cada variante.
+
+## Uso básico
+
+```html
+<!-- Elemento de 1 línea con icono -->
+<moni-list-item icon="inbox">
+  Bandeja de entrada
+</moni-list-item>
+
+<!-- Elemento de 2 líneas con avatar y meta final -->
+<moni-list-item lines="2" avatar="/user.jpg">
+  Ali Connors
+  <span slot="supporting">¿Brunch este fin de semana?</span>
+  <span slot="trailing-meta">10 min</span>
+</moni-list-item>
+
+<!-- Elemento de enlace -->
+<moni-list-item href="/settings" icon="settings">
+  Ajustes
+</moni-list-item>
+```
+
+## Ejemplo práctico con Tailwind CSS v4
+
+Tailwind controla composición, ancho, espaciado y responsividad alrededor del Web Component. Moni UI conserva el aspecto interno mediante Shadow DOM y design tokens.
+
+```html
+<div class="mx-auto flex w-full max-w-md flex-col gap-4 p-6">
+  <moni-list-item></moni-list-item>
+</div>
+```
+
+No necesitas un plugin de Tailwind. En tu CSS v4 importa ambas capas una sola vez:
+
+```css
+@import "tailwindcss";
+@import "@moni-labs/moni-ui/styles";
+
+@theme {
+  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
+}
+```
+
+Las utilities aplicadas directamente al tag afectan su caja anfitriona. No uses selectores Tailwind para asumir acceso al DOM interno; personaliza únicamente con los CSS Parts y Custom Properties públicos enumerados más abajo.
+
+## Recomendaciones
+
+- Usa `moni-list-item` para su propósito semántico; no lo sustituyas por un `div` estilizado.
+- Aplica Tailwind al layout exterior. Para el interior del Shadow DOM usa las variables CSS y `::part()` documentados.
+- Durante una operación asíncrona combina el estado `loading` —si existe— con `disabled` para evitar envíos duplicados.
+- Cuando el control muestre únicamente un icono, añade siempre un `aria-label` descriptivo.
+- Mantén el estado de apertura en una única fuente de verdad y devuelve el foco al disparador al cerrar.
+- Prueba los estados claro, oscuro, foco por teclado, deshabilitado y viewport móvil antes de publicar.
+
+## Propiedades y atributos
+
+| Atributo | Propiedad | Tipo | Default | Descripción |
+|---|---|---|---|---|
+| `lines` | `lines` | `1 \| 2 \| 3` | `1` | Define `lines`. Conserva el tipo indicado y usa la propiedad JavaScript cuando el valor no sea una cadena. |
+| `icon` | `icon` | `string` | `''` | Nombre de Material Symbol mostrado por el componente. |
+| `avatar` | `avatar` | `string` | `''` | Define `avatar`. Conserva el tipo indicado y usa la propiedad JavaScript cuando el valor no sea una cadena. |
+| `trailing-icon` | `trailingIcon` | `string` | `''` | Define `trailingIcon`. Conserva el tipo indicado y usa la propiedad JavaScript cuando el valor no sea una cadena. |
+| `active` | `active` | `boolean` | `false` | Indica si el elemento está activo. |
+| `disabled` | `disabled` | `boolean` | `false` | Impide la interacción y aplica el estado visual deshabilitado. |
+| `href` | `href` | `string` | `''` | Define `href`. Conserva el tipo indicado y usa la propiedad JavaScript cuando el valor no sea una cadena. |
+
+## Slots
+
+- `default`: Texto del titular (Línea 1).
+- `supporting`: Texto de soporte (Línea 2, requiere `lines>=2`).
+- `meta`: Texto meta adicional (Línea 3, requiere `lines=3`).
+- `trailing-meta`: Texto pequeño mostrado en el borde derecho lejano.
+
+## Eventos
+
+No declara eventos propios.
+
+## Métodos públicos
+
+No expone métodos públicos adicionales.
+
+## CSS Parts
+
+- `item`: El contenedor externo `<button>` o `<a>`.
+- `leading-icon`: Contenedor para el icono/avatar inicial.
+- `text`: Parte interna personalizable.
+- `trailing-icon`: Contenedor para el icono final.
+- `avatar`: Parte interna personalizable.
+- `headline`: Parte interna personalizable.
+- `leading`: Parte interna personalizable.
+- `meta`: Parte interna personalizable.
+- `row`: Parte interna personalizable.
+- `supporting`: Parte interna personalizable.
+- `trailing`: Parte interna personalizable.
+
+## CSS Custom Properties consumidas
+
+- `--font`
+- `--on-secondary-container`
+- `--on-surface`
+- `--on-surface-variant`
+- `--outline-variant`
+- `--secondary-container`
+- `--speed2`
+- `--surface-container`
+
+## Referencia visual por variable
+
+Cada imagen se genera con el componente real: cambia solo la variable indicada y mantiene estable el resto del escenario. Úsala para comparar estados, no como sustituto de la API.
+
+### `lines`
+
+Define `lines`. Conserva el tipo indicado y usa la propiedad JavaScript cuando el valor no sea una cadena.
+
+![moni-list-item — lines=default](../assets/moni-list-item/lines--default.png)
+
+### `icon`
+
+Nombre de Material Symbol mostrado por el componente.
+
+![moni-list-item — icon=default](../assets/moni-list-item/icon--default.png)
+
+### `avatar`
+
+Define `avatar`. Conserva el tipo indicado y usa la propiedad JavaScript cuando el valor no sea una cadena.
+
+![moni-list-item — avatar=default](../assets/moni-list-item/avatar--default.png)
+
+### `trailing-icon`
+
+Define `trailingIcon`. Conserva el tipo indicado y usa la propiedad JavaScript cuando el valor no sea una cadena.
+
+![moni-list-item — trailing-icon=default](../assets/moni-list-item/trailingIcon--default.png)
+
+### `active`
+
+Indica si el elemento está activo.
+
+![moni-list-item — active=false](../assets/moni-list-item/active--false.png)
+
+![moni-list-item — active=true](../assets/moni-list-item/active--true.png)
+
+### `disabled`
+
+Impide la interacción y aplica el estado visual deshabilitado.
+
+![moni-list-item — disabled=false](../assets/moni-list-item/disabled--false.png)
+
+![moni-list-item — disabled=true](../assets/moni-list-item/disabled--true.png)
+
+### `href`
+
+Define `href`. Conserva el tipo indicado y usa la propiedad JavaScript cuando el valor no sea una cadena.
+
+![moni-list-item — href=default](../assets/moni-list-item/href--default.png)