@moni-labs/moni-ui 0.4.4 → 0.4.6

package/docs/components/split-button.md

@@ -0,0 +1,148 @@
+# Split Button
+
+Componente Material Design 3 Split Button (Botón dividido).
+
+Un botón dividido combina un botón de acción principal con un botón secundario desplegable.
+Los dos botones se asientan a ras uno del otro, típicamente compartiendo
+un color de fondo y elevación, pero separados por un borde distinto.
+
+**Arquitectura visual:**
+El componente actúa como un contenedor de diseño (`display: inline-flex`) que
+agrupa dos botones estándar. Anula (overrides) los márgenes del botón posterior (trailing)
+para crear el aspecto "conectado" (similar a los grupos de botones conectados).
+
+**Uso:**
+Los consumidores deben proporcionar exactamente dos botones a través de los slots con nombre:
+- `slot="leading-button"` — La acción principal (usualmente texto o texto+icono).
+- `slot="trailing-button"` — La acción secundaria (usualmente solo un icono desplegable).
+
+Ambos botones deben ser elementos `<moni-button>` o `<moni-icon-button>` estándar
+configurados con variantes coincidentes para una apariencia cohesiva.
+
+- Tag: `moni-split-button`
+- Clase: `MoniSplitButton`
+- Fuente: `src/components/moni-split-button.ts`
+
+## Cuándo usarlo
+
+Usa `moni-split-button` 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
+<moni-split-button variant="filled">
+  <moni-button slot="leading-button" icon="send">Enviar</moni-button>
+  <moni-button slot="trailing-button" icon="arrow_drop_down" id="schedule-trigger"></moni-button>
+</moni-split-button>
+
+<moni-menu id="schedule-menu" placement="bottom">
+  <moni-menu-item>Programar envío...</moni-menu-item>
+</moni-menu>
+```
+
+## 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-split-button></moni-split-button>
+</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-split-button` 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 |
+|---|---|---|---|---|
+| `variant` | `variant` | `'filled' \| 'tonal' \| 'outlined' \| 'elevated'` | `'filled'` | Variante visual del contenedor del botón dividido. Pasa las sugerencias de estilo apropiadas a sus hijos. |
+| `size` | `size` | `'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'extra'` | `'small'` | Tamaño global aplicado a ambos botones en los slots. |
+| `gap` | `gap` | `string` | `''` | El espacio (gap) CSS entre los botones líder y posterior. Normalmente 1px o 0 según la especificación M3. |
+
+## Slots
+
+- `leading-button`: El botón de acción principal a la izquierda.
+- `trailing-button`: La acción secundaria (disparador desplegable) a la derecha.
+
+## Eventos
+
+No declara eventos propios.
+
+## Métodos públicos
+
+No expone métodos públicos adicionales.
+
+## CSS Parts
+
+- `wrapper`: Parte interna personalizable.
+
+## CSS Custom Properties consumidas
+
+- `--_split-button-gap`
+- `--_split-content-gap`
+- `--_split-height`
+- `--_split-inner-radius`
+- `--_split-label-size`
+- `--_split-leading-end`
+- `--_split-leading-icon`
+- `--_split-leading-start`
+- `--_split-trailing-icon`
+- `--_split-trailing-width`
+
+## 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.
+
+### `variant`
+
+Variante visual del contenedor del botón dividido.
+Pasa las sugerencias de estilo apropiadas a sus hijos.
+
+![moni-split-button — variant=filled](../assets/moni-split-button/variant--filled.png)
+
+![moni-split-button — variant=tonal](../assets/moni-split-button/variant--tonal.png)
+
+![moni-split-button — variant=outlined](../assets/moni-split-button/variant--outlined.png)
+
+![moni-split-button — variant=elevated](../assets/moni-split-button/variant--elevated.png)
+
+### `size`
+
+Tamaño global aplicado a ambos botones en los slots.
+
+![moni-split-button — size=xsmall](../assets/moni-split-button/size--xsmall.png)
+
+![moni-split-button — size=small](../assets/moni-split-button/size--small.png)
+
+![moni-split-button — size=medium](../assets/moni-split-button/size--medium.png)
+
+![moni-split-button — size=large](../assets/moni-split-button/size--large.png)
+
+![moni-split-button — size=xlarge](../assets/moni-split-button/size--xlarge.png)
+
+![moni-split-button — size=extra](../assets/moni-split-button/size--extra.png)
+
+### `gap`
+
+El espacio (gap) CSS entre los botones líder y posterior.
+Normalmente 1px o 0 según la especificación M3.
+
+![moni-split-button — gap=default](../assets/moni-split-button/gap--default.png)

package/docs/components/step.md

@@ -0,0 +1,169 @@
+# Step
+
+Componente Material Design 3 Step (Paso).
+
+Un paso individual dentro de un `<moni-stepper>`. Los pasos muestran el progreso a través
+de una secuencia de operaciones lógicas y numeradas.
+
+**Referencia a la especificación M3:** `m3-docs/components/progress-indicators/specs.md` (Patrón Stepper)
+
+**Anatomía y aspecto visual:**
+Un paso renderiza un indicador circular que contiene ya sea su número de secuencia
+(inyectado automáticamente por el stepper padre) o un icono personalizado. Debajo o
+al lado del indicador (dependiendo de la `orientation` del padre), renderiza
+el `title` (título) y un `description` (descripción) opcional.
+
+**Gestión del estado:**
+El `<moni-stepper>` padre calcula e inyecta automáticamente las propiedades `index`,
+`active` y `completed` basándose en su estado actual.
+- **Activo (Active):** Resaltado con el color primario, indicando el paso actual.
+- **Completado (Completed):** Se muestra con un fondo primario sólido y un icono de
+  marca de verificación (el estado `completed` anula el índice numérico).
+
+- Tag: `moni-step`
+- Clase: `MoniStep`
+- Fuente: `src/components/moni-step.ts`
+
+## Cuándo usarlo
+
+Usa `moni-step` 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
+<!-- Típicamente usado dentro de un stepper -->
+<moni-stepper current="1">
+  <moni-step title="Envío" description="Ingresar dirección"></moni-step>
+  <moni-step title="Pago" description="Detalles de tarjeta de crédito"></moni-step>
+  <moni-step title="Revisión" description="Confirmar pedido"></moni-step>
+</moni-stepper>
+
+<!-- Anulando el icono -->
+<moni-step title="Hecho" icon="celebration"></moni-step>
+```
+
+## 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-step></moni-step>
+</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-step` 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.
+- 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 |
+|---|---|---|---|---|
+| `title` | `title` | `string` | `''` | Define `title`. Conserva el tipo indicado y usa la propiedad JavaScript cuando el valor no sea una cadena. |
+| `description` | `description` | `string` | `''` | Define `description`. 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. |
+| `completed` | `completed` | `boolean` | `false` | Activa o desactiva el comportamiento `completed`. En HTML, la presencia del atributo significa `true`; omítelo para `false`. |
+| `icon` | `icon` | `string` | `''` | Nombre de Material Symbol mostrado por el componente. |
+| `index` | `index` | `number` | `0` | Define `index`. Conserva el tipo indicado y usa la propiedad JavaScript cuando el valor no sea una cadena. |
+| `orientation` | `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Selecciona el valor de `orientation` entre las opciones documentadas. |
+
+## 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
+
+- `step-indicator`: La insignia circular que contiene el número/icono.
+- `title`: Parte interna personalizable.
+- `description`: Parte interna personalizable.
+- `dot`: Parte interna personalizable.
+- `text`: Parte interna personalizable.
+
+## CSS Custom Properties consumidas
+
+- `--_stepper-gap`
+- `--font`
+- `--on-primary`
+- `--on-surface`
+- `--on-surface-variant`
+- `--outline-variant`
+- `--primary`
+- `--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.
+
+### `title`
+
+Define `title`. Conserva el tipo indicado y usa la propiedad JavaScript cuando el valor no sea una cadena.
+
+![moni-step — title=default](../assets/moni-step/title--default.png)
+
+### `description`
+
+Define `description`. Conserva el tipo indicado y usa la propiedad JavaScript cuando el valor no sea una cadena.
+
+![moni-step — description=default](../assets/moni-step/description--default.png)
+
+### `active`
+
+Indica si el elemento está activo.
+
+![moni-step — active=false](../assets/moni-step/active--false.png)
+
+![moni-step — active=true](../assets/moni-step/active--true.png)
+
+### `completed`
+
+Activa o desactiva el comportamiento `completed`. En HTML, la presencia del atributo significa `true`; omítelo para `false`.
+
+![moni-step — completed=false](../assets/moni-step/completed--false.png)
+
+![moni-step — completed=true](../assets/moni-step/completed--true.png)
+
+### `icon`
+
+Nombre de Material Symbol mostrado por el componente.
+
+![moni-step — icon=default](../assets/moni-step/icon--default.png)
+
+### `index`
+
+Define `index`. Conserva el tipo indicado y usa la propiedad JavaScript cuando el valor no sea una cadena.
+
+![moni-step — index=default](../assets/moni-step/index--default.png)
+
+### `orientation`
+
+Selecciona el valor de `orientation` entre las opciones documentadas.
+
+![moni-step — orientation=horizontal](../assets/moni-step/orientation--horizontal.png)
+
+![moni-step — orientation=vertical](../assets/moni-step/orientation--vertical.png)

package/docs/components/stepper.md

@@ -0,0 +1,121 @@
+# Stepper
+
+Componente Material Design 3 Stepper (Pasos/Progresión).
+
+Un contenedor para una progresión lineal de elementos `<moni-step>`. Los steppers
+transmiten el progreso a través de pasos numerados e indican la posición
+actual del usuario dentro de un flujo.
+
+**Referencia a la especificación M3:** `m3-docs/components/progress-indicators/specs.md`
+
+**Orquestación:**
+Este componente actúa como orquestador para sus hijos `<moni-step>` en los slots.
+Cada vez que cambia la propiedad `current` o se añaden/eliminan hijos, el
+stepper itera sobre todos los pasos hijos e inyecta su estado:
+- Asigna el `index` secuencial (basado en 0) a cada paso.
+- Establece `active=true` en el paso que coincide con el índice `current`.
+- Establece `completed=true` en todos los pasos anteriores al índice `current`.
+
+**Diseño visual:**
+El stepper maneja el diseño (flex row o column basado en `orientation`)
+y asegura que las líneas conectoras entre los pasos se rendericen correctamente a través de
+pseudo-elementos CSS definidos en los estilos del `<moni-step>` hijo.
+
+- Tag: `moni-stepper`
+- Clase: `MoniStepper`
+- Fuente: `src/components/moni-stepper.ts`
+
+## Cuándo usarlo
+
+Usa `moni-stepper` 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
+<moni-stepper current="1" orientation="horizontal">
+  <moni-step title="Paso 1"></moni-step>
+  <moni-step title="Paso 2"></moni-step>
+  <moni-step title="Paso 3"></moni-step>
+</moni-stepper>
+
+<script>
+  const stepper = document.querySelector('moni-stepper');
+  // Mover al siguiente paso
+  stepper.current = 2;
+</script>
+```
+
+## 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-stepper></moni-stepper>
+</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-stepper` 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 |
+|---|---|---|---|---|
+| `orientation` | `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Selecciona el valor de `orientation` entre las opciones documentadas. |
+| `current` | `current` | `number` | `0` | Define `current`. Conserva el tipo indicado y usa la propiedad JavaScript cuando el valor no sea una cadena. |
+
+## Slots
+
+- `default`: Elementos `<moni-step>`.
+
+## Eventos
+
+No declara eventos propios.
+
+## Métodos públicos
+
+No expone métodos públicos adicionales.
+
+## CSS Parts
+
+- `stepper`: Parte interna personalizable.
+
+## CSS Custom Properties consumidas
+
+- `--_stepper-gap`
+- `--font`
+
+## 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.
+
+### `orientation`
+
+Selecciona el valor de `orientation` entre las opciones documentadas.
+
+![moni-stepper — orientation=horizontal](../assets/moni-stepper/orientation--horizontal.png)
+
+![moni-stepper — orientation=vertical](../assets/moni-stepper/orientation--vertical.png)
+
+### `current`
+
+Define `current`. Conserva el tipo indicado y usa la propiedad JavaScript cuando el valor no sea una cadena.
+
+![moni-stepper — current=default](../assets/moni-stepper/current--default.png)

package/docs/components/switch.md

@@ -0,0 +1,198 @@
+# Switch
+
+Componente Material Design 3 Switch (Interruptor).
+
+Los switches alternan el estado de una configuración individual entre encendido y apagado.
+Son el equivalente binario encendido/apagado de una casilla de verificación (checkbox),
+pero optimizados para alternar un solo estado en lugar de seleccionar de una lista.
+
+**Referencia a la especificación M3:** `m3-docs/components/switch/specs.md`
+
+**Medidas M3:**
+- Pista (Track): 52dp × 32dp, borde de 2dp, forma de píldora con radio completo.
+- Control (Thumb): 16dp no seleccionado → 24dp seleccionado → 28dp presionado.
+- Capa de estado (State layer): ripple circular de 40dp en estados de hover/focus/pressed.
+- Icono (opcional): icono de 16dp renderizado dentro del control (thumb) cuando `icon` está activado.
+
+**Arquitectura visual:**
+Al igual que `<moni-checkbox>`, el `<input type="checkbox" role="switch">` nativo
+ocupa espacio real en el diseño pero está oculto visualmente mediante `opacity: 0`. Dos
+pseudo-elementos de un `<span>` renderizan la pista (`::after`) y el control (`::before`).
+Cuando `icon=true`, los elementos `<i>` renderizan los glifos `close` y `check` dentro
+del control, y su visibilidad se alterna mediante CSS en base al estado verificado (checked).
+
+- Tag: `moni-switch`
+- Clase: `MoniSwitch`
+- Fuente: `src/components/moni-switch.ts`
+
+## Cuándo usarlo
+
+Usa `moni-switch` 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
+<moni-switch label="Modo oscuro" name="dark-mode"></moni-switch>
+<moni-switch icon checked label="Notificaciones"></moni-switch>
+<moni-switch unchecked-icon="visibility_off" checked-icon="visibility" label="Visibilidad"></moni-switch>
+
+<script>
+  document.querySelector('moni-switch').addEventListener('change', (e) => {
+    console.log('activado:', e.target.checked);
+  });
+</script>
+```
+
+## 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-switch label="Ejemplo"></moni-switch>
+</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-switch` 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 |
+|---|---|---|---|---|
+| `label` | `label` | `string` | `''` | Etiqueta de texto mostrada a la derecha del switch.  Cuando no está vacía, se renderiza como un span de texto con padding después de la pista. Cuando está vacía, se renderiza el slot por defecto, permitiendo etiquetas HTML personalizadas. |
+| `checked` | `checked` | `boolean` | `false` | Indica si el switch está en el estado "encendido" (marcado/checked).  Cuando es `true`: - La pista se llena con el color `--primary`. - El control (thumb) crece de 16dp a 24dp y se desliza hacia el borde final (trailing). - El color del control cambia a `--on-primary`. |
+| `disabled` | `disabled` | `boolean` | `false` | Cuando es `true`, el switch no es interactivo y se renderiza al 50% de opacidad. |
+| `icon` | `icon` | `boolean` | `false` | Cuando es `true`, renderiza glifos de iconos dentro del control (thumb).  Utiliza ligaduras de Material Symbols: - Estado desmarcado (Unchecked): icono `close`. - Estado marcado (Checked): icono `check`.  El tamaño del icono (16dp) se establece a través de la propiedad CSS `--_thumb`. |
+| `unchecked-icon` | `uncheckedIcon` | `string` | `''` | Material Symbol mostrado dentro del thumb cuando el switch está desactivado. Al definirlo se activa automáticamente el modo de iconos internos. Usa `close` como fallback cuando solo se establece el atributo booleano `icon`. |
+| `checked-icon` | `checkedIcon` | `string` | `''` | Material Symbol mostrado dentro del thumb cuando el switch está activado. Al definirlo se activa automáticamente el modo de iconos internos. Usa `check` como fallback cuando solo se establece el atributo booleano `icon`. |
+| `name` | `name` | `string` | `''` | Reenviado al atributo nativo `<input name>` para participar en formularios. |
+| `value` | `value` | `string` | `''` | Reenviado al atributo nativo `<input value>`. El valor enviado en un formulario cuando este switch está marcado. |
+
+## 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
+
+- `switch`: Parte interna personalizable.
+- `label`: Parte interna personalizable.
+
+## CSS Custom Properties consumidas
+
+- `--_thumb`
+- `--_track-h`
+- `--_track-w`
+- `--font`
+- `--font-icon`
+- `--on-primary`
+- `--on-surface`
+- `--on-surface-variant`
+- `--outline`
+- `--primary`
+- `--speed2`
+- `--surface-container-highest`
+
+## 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.
+
+### `label`
+
+Etiqueta de texto mostrada a la derecha del switch.
+
+Cuando no está vacía, se renderiza como un span de texto con padding después de la pista.
+Cuando está vacía, se renderiza el slot por defecto, permitiendo etiquetas HTML personalizadas.
+
+![moni-switch — label=default](../assets/moni-switch/label--default.png)
+
+### `checked`
+
+Indica si el switch está en el estado "encendido" (marcado/checked).
+
+Cuando es `true`:
+- La pista se llena con el color `--primary`.
+- El control (thumb) crece de 16dp a 24dp y se desliza hacia el borde final (trailing).
+- El color del control cambia a `--on-primary`.
+
+![moni-switch — checked=false](../assets/moni-switch/checked--false.png)
+
+![moni-switch — checked=true](../assets/moni-switch/checked--true.png)
+
+### `disabled`
+
+Cuando es `true`, el switch no es interactivo y se renderiza al 50% de opacidad.
+
+![moni-switch — disabled=false](../assets/moni-switch/disabled--false.png)
+
+![moni-switch — disabled=true](../assets/moni-switch/disabled--true.png)
+
+### `icon`
+
+Cuando es `true`, renderiza glifos de iconos dentro del control (thumb).
+
+Utiliza ligaduras de Material Symbols:
+- Estado desmarcado (Unchecked): icono `close`.
+- Estado marcado (Checked): icono `check`.
+
+El tamaño del icono (16dp) se establece a través de la propiedad CSS `--_thumb`.
+
+![moni-switch — icon=false](../assets/moni-switch/icon--false.png)
+
+![moni-switch — icon=true](../assets/moni-switch/icon--true.png)
+
+### `unchecked-icon`
+
+Material Symbol mostrado dentro del thumb cuando el switch está desactivado.
+Al definirlo se activa automáticamente el modo de iconos internos.
+Usa `close` como fallback cuando solo se establece el atributo booleano `icon`.
+
+![moni-switch — unchecked-icon=default](../assets/moni-switch/uncheckedIcon--default.png)
+
+### `checked-icon`
+
+Material Symbol mostrado dentro del thumb cuando el switch está activado.
+Al definirlo se activa automáticamente el modo de iconos internos.
+Usa `check` como fallback cuando solo se establece el atributo booleano `icon`.
+
+![moni-switch — checked-icon=default](../assets/moni-switch/checkedIcon--default.png)
+
+### `name`
+
+Reenviado al atributo nativo `<input name>` para participar en formularios.
+
+![moni-switch — name=default](../assets/moni-switch/name--default.png)
+
+### `value`
+
+Reenviado al atributo nativo `<input value>`.
+El valor enviado en un formulario cuando este switch está marcado.
+
+![moni-switch — value=default](../assets/moni-switch/value--default.png)