@moni-labs/moni-ui 0.3.0 → 0.3.2

package/dist/components/moni-stepper.js

@@ -14,54 +14,64 @@ import { html, css } from 'lit';
 import { customElement, property, queryAssignedElements } from 'lit/decorators.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
 /**
- * Material Design 3 Stepper component.
+ * Componente Material Design 3 Stepper (Pasos/Progresión).
  *
- * A container for a linear progression of `<moni-step>` elements. Steppers
- * convey progress through numbered steps and indicate the user's current
- * position within a flow.
+ * 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.
  *
- * **M3 spec reference:** `m3-docs/components/progress-indicators/specs.md`
+ * **Referencia a la especificación M3:** `m3-docs/components/progress-indicators/specs.md`
  *
- * **Orchestration:**
- * This component acts as the orchestrator for its slotted `<moni-step>` children.
- * Whenever the `current` property changes, or children are added/removed, the
- * stepper iterates over all child steps and injects their state:
- * - Assigns the sequential `index` (0-based) to each step.
- * - Sets `active=true` on the step matching the `current` index.
- * - Sets `completed=true` on all steps prior to the `current` index.
+ * **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`.
  *
- * **Visual layout:**
- * The stepper manages the layout (flex row or column based on `orientation`)
- * and ensures the connector lines between steps are rendered correctly via
- * CSS pseudo-elements defined in the child `<moni-step>` styling.
+ * **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.
  *
  * @example
  * ```html
  * <moni-stepper current="1" orientation="horizontal">
- *   <moni-step title="Step 1"></moni-step>
- *   <moni-step title="Step 2"></moni-step>
- *   <moni-step title="Step 3"></moni-step>
+ *   <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');
- *   // Move to next step
+ *   // Mover al siguiente paso
  *   stepper.current = 2;
  * </script>
  * ```
  *
- * @slot default - `<moni-step>` elements.
+ * @slot default - Elementos `<moni-step>`.
  */
 let MoniStepper = class MoniStepper extends MoniElement {
     constructor() {
         super(...arguments);
         this.orientation = 'horizontal';
         this.current = 0;
+        /**
+         * Handler dinámico del slot.
+         * Detecta si el usuario añade o elimina pasos nativos (`<moni-step>`)
+         * desde el DOM en tiempo de ejecución, forzando una re-sincronización.
+         */
         this._onSlotChange = () => {
             // Steps may have been added/removed; re-sync.
             this._syncSteps();
         };
     }
+    /**
+     * Hook del ciclo de vida reactivo (Lit).
+     * Cuando la orientación o el índice actual cambian, sincroniza
+     * el estado hacia todos los elementos hijos (`<moni-step>`).
+     */
     updated(changed) {
         if (changed.has('current') ||
             changed.has('orientation') ||
@@ -70,24 +80,39 @@ let MoniStepper = class MoniStepper extends MoniElement {
         }
     }
     /**
-     * Propagate the `current` index to each child <moni-step>:
-     *  - sets `index` from the child's position
-     *  - sets `completed` on every step before `current`
-     *  - sets `active` on the step at `current`
+     * Propaga el índice del paso actual a cada elemento hijo `<moni-step>` en los slots,
+     * calculando e inyectando el estado de `index`, `completed` y `active`.
+     *
+     * **Diferimiento por microtarea (`Promise.resolve().then(...)`):**
+     * `@queryAssignedElements` de Lit se ejecuta sincrónicamente y no está disponible hasta
+     * después del primer renderizado conectado. Diferirlo a una microtarea asegura que los hijos
+     * en los slots hayan terminado su propio ciclo de vida `firstUpdated()` antes de que les escribamos
+     * el estado. Sin este diferimiento, escribir `step.active = true` durante el `updated()`
+     * del padre puede desencadenar renderizados hijos antes de que se apliquen sus estilos.
+     *
+     * **Respaldo de `querySelectorAll`:**
+     * `_steps` (de `@queryAssignedElements`) devuelve un array vacío antes del primer
+     * renderizado o cuando no hay elementos `<moni-step>` presentes en el slot. El respaldo
+     * a `querySelectorAll('moni-step')` maneja casos extremos donde se añaden pasos
+     * programáticamente sin pasar por el mecanismo de slots de Lit.
      *
-     * Deferred to a microtask so that slotted children are guaranteed
-     * to have finished their first update cycle before we write to them.
+     * **Bucle de inyección de estado:**
+     * Para cada `<moni-step>` en la posición `stepIndex`:
+     * - `stepElement.index = stepIndex` — proporciona el número de paso para su etiqueta.
+     * - `stepElement.completed = stepIndex < current` — verdadero para todos los pasos anteriores a `current`.
+     * - `stepElement.active = stepIndex === current` — verdadero solo para el paso en `current`.
      */
     _syncSteps() {
         Promise.resolve().then(() => {
-            let steps = this._steps || [];
-            if (steps.length === 0) {
-                steps = Array.from(this.querySelectorAll('moni-step'));
+            // Usa el resultado de @queryAssignedElements de Lit primero; usa una consulta DOM en vivo como respaldo.
+            let stepElements = this._steps || [];
+            if (stepElements.length === 0) {
+                stepElements = Array.from(this.querySelectorAll('moni-step'));
             }
-            steps.forEach((step, i) => {
-                step.index = i;
-                step.completed = i < this.current;
-                step.active = i === this.current;
+            stepElements.forEach((stepElement, stepIndex) => {
+                stepElement.index = stepIndex;
+                stepElement.completed = stepIndex < this.current;
+                stepElement.active = stepIndex === this.current;
             });
         });
     }
@@ -116,6 +141,19 @@ let MoniStepper = class MoniStepper extends MoniElement {
 			}
 		`
     ]; }
+    /**
+     * Renderiza el contenedor de lista ordenada (`<ol>`) que contiene los hijos `<moni-step>` en los slots.
+     *
+     * **Anatomía:**
+     * - El `<ol>` usa `list-style: none` y un diseño flex (fila o columna, basado en
+     *   `orientation`) en lugar del renderizado nativo de lista ordenada, porque la
+     *   visualización del número de paso es manejada por cada hijo `<moni-step>`.
+     * - La vinculación del evento `@slotchange` asegura que se llame a `_syncSteps()`
+     *   cada vez que el consumidor añade o elimina elementos `<moni-step>` en tiempo de ejecución,
+     *   manteniendo los estados `index`, `active` y `completed` sincronizados.
+     * - Cada `<moni-step>` en el slot está estilizado con `flex: 1` para que todos los pasos
+     *   compartan el ancho disponible equitativamente (horizontal) o la altura (vertical).
+     */
     render() {
         return html `<ol class="list" part="stepper">
 			<slot @slotchange=${this._onSlotChange}></slot>

package/dist/components/moni-switch.d.ts

@@ -7,114 +7,125 @@
 import { MoniElement } from './_base/index.js';
 import './moni-icon.js';
 /**
- * Material Design 3 Switch component.
+ * Componente Material Design 3 Switch (Interruptor).
  *
- * Switches toggle the state of a single setting on or off. They are the
- * binary on/off equivalent of a checkbox, but optimized for toggling a
- * single state rather than selecting from a list.
+ * 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.
  *
- * **M3 spec reference:** `m3-docs/components/switch/specs.md`
+ * **Referencia a la especificación M3:** `m3-docs/components/switch/specs.md`
  *
- * **M3 measurements:**
- * - Track: 52dp × 32dp, 2dp border, full-radius pill shape.
- * - Handle (thumb): 16dp unselected → 24dp selected → 28dp pressed.
- * - State layer: 40dp circular ripple on hover/focus/pressed states.
- * - Icon (optional): 16dp icon rendered inside the thumb when `icon` is set.
+ * **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.
  *
- * **Visual architecture:**
- * Like `<moni-checkbox>`, the native `<input type="checkbox" role="switch">`
- * occupies real layout space but is visually hidden via `opacity: 0`. Two
- * `<span>` pseudo-elements render the track (`::after`) and thumb (`::before`).
- * When `icon=true`, `<i>` elements render `close` and `check` glyphs inside
- * the thumb, with visibility toggled via CSS based on the checked state.
+ * **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).
  *
- * @fires change - Bubbles and is composed. Fired when the switch is toggled.
- *                 Read `element.checked` for the new state.
+ * @fires change - Burbujea y está compuesto. Se dispara cuando el switch se alterna.
+ *                 Lee `element.checked` para obtener el nuevo estado.
  *
  * @example
  * ```html
- * <moni-switch label="Dark mode" name="dark-mode"></moni-switch>
- * <moni-switch icon checked label="Notifications"></moni-switch>
+ * <moni-switch label="Modo oscuro" name="dark-mode"></moni-switch>
+ * <moni-switch icon checked label="Notificaciones"></moni-switch>
  *
  * <script>
  *   document.querySelector('moni-switch').addEventListener('change', (e) => {
- *     console.log('enabled:', e.target.checked);
+ *     console.log('activado:', e.target.checked);
  *   });
  * </script>
  * ```
  *
- * @csspart switch - The outer `<label>` element containing the switch.
+ * @csspart switch - El elemento `<label>` exterior que contiene el switch.
  */
 export declare class MoniSwitch extends MoniElement {
+    static formAssociated: boolean;
+    private _internals;
+    constructor();
     /**
-     * Text label displayed to the right of the switch.
+     * Etiqueta de texto mostrada a la derecha del switch.
      *
-     * When non-empty, renders as a padded text span after the track.
-     * When empty, the default slot is rendered, allowing custom HTML labels.
+     * 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.
      *
      * @default ''
      */
     label: string;
     /**
-     * Whether the switch is in the "on" (checked) state.
+     * Indica si el switch está en el estado "encendido" (marcado/checked).
      *
-     * When `true`:
-     * - Track fills with `--primary` color.
-     * - Thumb grows from 16dp to 24dp and slides to the trailing edge.
-     * - Thumb color changes to `--on-primary`.
+     * 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`.
      *
      * @default false
      */
     checked: boolean;
     /**
-     * When `true`, the switch is non-interactive and renders at 50% opacity.
+     * Cuando es `true`, el switch no es interactivo y se renderiza al 50% de opacidad.
      *
      * @default false
      */
     disabled: boolean;
     /**
-     * When `true`, renders icon glyphs inside the thumb.
+     * Cuando es `true`, renderiza glifos de iconos dentro del control (thumb).
      *
-     * Uses Material Symbols ligatures:
-     * - Unchecked state: `close` icon.
-     * - Checked state: `check` icon.
+     * Utiliza ligaduras de Material Symbols:
+     * - Estado desmarcado (Unchecked): icono `close`.
+     * - Estado marcado (Checked): icono `check`.
      *
-     * The icon size (16dp) is set via the `--_thumb` CSS custom property.
+     * El tamaño del icono (16dp) se establece a través de la propiedad CSS `--_thumb`.
      *
      * @default false
      */
     icon: boolean;
     /**
-     * Forwarded to the native `<input name>` attribute for form participation.
+     * Reenviado al atributo nativo `<input name>` para participar en formularios.
      *
      * @default ''
      */
     name: string;
     /**
-     * Forwarded to the native `<input value>` attribute.
-     * The value submitted in a form when this switch is checked.
+     * Reenviado al atributo nativo `<input value>`.
+     * El valor enviado en un formulario cuando este switch está marcado.
      *
      * @default ''
      */
     value: string;
-    /** Direct reference to the native input element for programmatic access. */
+    /** Referencia directa al elemento input nativo para acceso programático. */
     private _input;
     /**
-     * Syncs `checked` and `disabled` imperatively to the native input after render.
+     * Sincroniza `checked` y `disabled` de forma imperativa en el input nativo después del renderizado.
      *
-     * @param changed - Map of changed property names to their previous values.
+     * @param changed - Mapa de los nombres de las propiedades modificadas a sus valores anteriores.
      */
     updated(changed: Map<string, unknown>): void;
     /**
-     * Handles the native input `change` event.
+     * Maneja el evento nativo `change` del input.
      *
-     * Updates `this.checked` and re-dispatches a composed `'change'` event
-     * so it bubbles across shadow DOM boundaries.
+     * Actualiza `this.checked` y vuelve a despachar un evento `'change'` compuesto
+     * para que burbujee a través de los límites del shadow DOM.
      *
-     * @param e - The native `change` event from the hidden `<input>`.
+     * @param e - El evento nativo `change` desde el `<input>` oculto.
      */
     private _onChange;
     static styles: import("lit").CSSResult[];
+    /**
+     * Renderiza el switch como un `<input type="checkbox">` oculto + pista visual mediante `<span>`.
+     *
+     * El input oculto ocupa espacio de diseño real (para el área de clic/hit area) pero tiene opacidad 0;
+     * el `<span>` proporciona la píldora visual y el control (thumb) (vía `::before`/`::after`).
+     * La vinculación `.checked` asegura que el estado del input en el DOM se mantenga sincronizado con
+     * `this.checked`.
+     */
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/dist/components/moni-switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"moni-switch.d.ts","sourceRoot":"","sources":["../../src/components/moni-switch.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AAExB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,qBACa,UAAW,SAAQ,WAAW;IAC1C;;;;;;;OAOG;IAC0B,KAAK,SAAM;IAExC;;;;;;;;;OASG;IACyC,OAAO,UAAS;IAE5D;;;;OAIG;IACyC,QAAQ,UAAS;IAE7D;;;;;;;;;;OAUG;IACyC,IAAI,UAAS;IAEzD;;;;OAIG;IAC0B,IAAI,SAAM;IAEvC;;;;;OAKG;IAC0B,KAAK,SAAM;IAExC,4EAA4E;IAC5D,OAAO,CAAC,MAAM,CAAoB;IAElD;;;;OAIG;IACM,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAO9C;;;;;;;OAOG;IACH,OAAO,CAAC,SAAS;IAKjB,OAAgB,MAAM,4BAiKpB;IAEO,MAAM;CAmBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD;AAED,eAAe,UAAU,CAAC"}
+{"version":3,"file":"moni-switch.d.ts","sourceRoot":"","sources":["../../src/components/moni-switch.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AAExB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,qBACa,UAAW,SAAQ,WAAW;IAC1C,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAmB;;IAOrC;;;;;;;OAOG;IAC0B,KAAK,SAAM;IAExC;;;;;;;;;OASG;IACyC,OAAO,UAAS;IAE5D;;;;OAIG;IACyC,QAAQ,UAAS;IAE7D;;;;;;;;;;OAUG;IACyC,IAAI,UAAS;IAEzD;;;;OAIG;IAC0B,IAAI,SAAM;IAEvC;;;;;OAKG;IAC0B,KAAK,SAAM;IAExC,4EAA4E;IAC5D,OAAO,CAAC,MAAM,CAAoB;IAElD;;;;OAIG;IACM,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAU9C;;;;;;;OAOG;IACH,OAAO,CAAC,SAAS;IAKjB,OAAgB,MAAM,4BAiKpB;IAEF;;;;;;;OAOG;IACM,MAAM;CAmBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD;AAED,eAAe,UAAU,CAAC"}

package/dist/components/moni-switch.js

@@ -16,119 +16,123 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
 import './moni-icon.js';
 /**
- * Material Design 3 Switch component.
+ * Componente Material Design 3 Switch (Interruptor).
  *
- * Switches toggle the state of a single setting on or off. They are the
- * binary on/off equivalent of a checkbox, but optimized for toggling a
- * single state rather than selecting from a list.
+ * 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.
  *
- * **M3 spec reference:** `m3-docs/components/switch/specs.md`
+ * **Referencia a la especificación M3:** `m3-docs/components/switch/specs.md`
  *
- * **M3 measurements:**
- * - Track: 52dp × 32dp, 2dp border, full-radius pill shape.
- * - Handle (thumb): 16dp unselected → 24dp selected → 28dp pressed.
- * - State layer: 40dp circular ripple on hover/focus/pressed states.
- * - Icon (optional): 16dp icon rendered inside the thumb when `icon` is set.
+ * **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.
  *
- * **Visual architecture:**
- * Like `<moni-checkbox>`, the native `<input type="checkbox" role="switch">`
- * occupies real layout space but is visually hidden via `opacity: 0`. Two
- * `<span>` pseudo-elements render the track (`::after`) and thumb (`::before`).
- * When `icon=true`, `<i>` elements render `close` and `check` glyphs inside
- * the thumb, with visibility toggled via CSS based on the checked state.
+ * **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).
  *
- * @fires change - Bubbles and is composed. Fired when the switch is toggled.
- *                 Read `element.checked` for the new state.
+ * @fires change - Burbujea y está compuesto. Se dispara cuando el switch se alterna.
+ *                 Lee `element.checked` para obtener el nuevo estado.
  *
  * @example
  * ```html
- * <moni-switch label="Dark mode" name="dark-mode"></moni-switch>
- * <moni-switch icon checked label="Notifications"></moni-switch>
+ * <moni-switch label="Modo oscuro" name="dark-mode"></moni-switch>
+ * <moni-switch icon checked label="Notificaciones"></moni-switch>
  *
  * <script>
  *   document.querySelector('moni-switch').addEventListener('change', (e) => {
- *     console.log('enabled:', e.target.checked);
+ *     console.log('activado:', e.target.checked);
  *   });
  * </script>
  * ```
  *
- * @csspart switch - The outer `<label>` element containing the switch.
+ * @csspart switch - El elemento `<label>` exterior que contiene el switch.
  */
 let MoniSwitch = class MoniSwitch extends MoniElement {
+    static { this.formAssociated = true; }
     constructor() {
-        super(...arguments);
+        super();
         /**
-         * Text label displayed to the right of the switch.
+         * Etiqueta de texto mostrada a la derecha del switch.
          *
-         * When non-empty, renders as a padded text span after the track.
-         * When empty, the default slot is rendered, allowing custom HTML labels.
+         * 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.
          *
          * @default ''
          */
         this.label = '';
         /**
-         * Whether the switch is in the "on" (checked) state.
+         * Indica si el switch está en el estado "encendido" (marcado/checked).
          *
-         * When `true`:
-         * - Track fills with `--primary` color.
-         * - Thumb grows from 16dp to 24dp and slides to the trailing edge.
-         * - Thumb color changes to `--on-primary`.
+         * 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`.
          *
          * @default false
          */
         this.checked = false;
         /**
-         * When `true`, the switch is non-interactive and renders at 50% opacity.
+         * Cuando es `true`, el switch no es interactivo y se renderiza al 50% de opacidad.
          *
          * @default false
          */
         this.disabled = false;
         /**
-         * When `true`, renders icon glyphs inside the thumb.
+         * Cuando es `true`, renderiza glifos de iconos dentro del control (thumb).
          *
-         * Uses Material Symbols ligatures:
-         * - Unchecked state: `close` icon.
-         * - Checked state: `check` icon.
+         * Utiliza ligaduras de Material Symbols:
+         * - Estado desmarcado (Unchecked): icono `close`.
+         * - Estado marcado (Checked): icono `check`.
          *
-         * The icon size (16dp) is set via the `--_thumb` CSS custom property.
+         * El tamaño del icono (16dp) se establece a través de la propiedad CSS `--_thumb`.
          *
          * @default false
          */
         this.icon = false;
         /**
-         * Forwarded to the native `<input name>` attribute for form participation.
+         * Reenviado al atributo nativo `<input name>` para participar en formularios.
          *
          * @default ''
          */
         this.name = '';
         /**
-         * Forwarded to the native `<input value>` attribute.
-         * The value submitted in a form when this switch is checked.
+         * Reenviado al atributo nativo `<input value>`.
+         * El valor enviado en un formulario cuando este switch está marcado.
          *
          * @default ''
          */
         this.value = '';
+        this._internals = this.attachInternals();
     }
     /**
-     * Syncs `checked` and `disabled` imperatively to the native input after render.
+     * Sincroniza `checked` y `disabled` de forma imperativa en el input nativo después del renderizado.
      *
-     * @param changed - Map of changed property names to their previous values.
+     * @param changed - Mapa de los nombres de las propiedades modificadas a sus valores anteriores.
      */
     updated(changed) {
         if (this._input) {
-            if (changed.has('checked'))
+            if (changed.has('checked')) {
                 this._input.checked = this.checked;
+                this._internals?.setFormValue?.(this.checked ? (this.value || 'on') : null);
+            }
             if (changed.has('disabled'))
                 this._input.disabled = this.disabled;
         }
     }
     /**
-     * Handles the native input `change` event.
+     * Maneja el evento nativo `change` del input.
      *
-     * Updates `this.checked` and re-dispatches a composed `'change'` event
-     * so it bubbles across shadow DOM boundaries.
+     * Actualiza `this.checked` y vuelve a despachar un evento `'change'` compuesto
+     * para que burbujee a través de los límites del shadow DOM.
      *
-     * @param e - The native `change` event from the hidden `<input>`.
+     * @param e - El evento nativo `change` desde el `<input>` oculto.
      */
     _onChange(e) {
         this.checked = e.target.checked;
@@ -296,6 +300,14 @@ let MoniSwitch = class MoniSwitch extends MoniElement {
 			}
 		`
     ]; }
+    /**
+     * Renderiza el switch como un `<input type="checkbox">` oculto + pista visual mediante `<span>`.
+     *
+     * El input oculto ocupa espacio de diseño real (para el área de clic/hit area) pero tiene opacidad 0;
+     * el `<span>` proporciona la píldora visual y el control (thumb) (vía `::before`/`::after`).
+     * La vinculación `.checked` asegura que el estado del input en el DOM se mantenga sincronizado con
+     * `this.checked`.
+     */
     render() {
         return html `<label class=${this.icon ? 'switch icon' : 'switch'} part="switch">
 			<input

package/dist/components/moni-tab.d.ts

@@ -7,35 +7,35 @@
 import { MoniElement } from './_base/index.js';
 import './moni-icon.js';
 /**
- * Material Design 3 Tab component.
+ * Componente Material Design 3 Tab (Pestaña).
  *
- * An individual interactive tab element designed to be placed inside a
- * `<moni-tabs>` container. Tabs organize content across different screens,
- * data sets, and other interactions.
+ * Un elemento interactivo de pestaña individual diseñado para ser colocado dentro de un
+ * contenedor `<moni-tabs>`. Las pestañas organizan el contenido en diferentes pantallas,
+ * conjuntos de datos y otras interacciones.
  *
- * **M3 spec reference:** `m3-docs/components/tabs/specs.md`
+ * **Referencia a la especificación M3:** `m3-docs/components/tabs/specs.md`
  *
- * **Visual layout & interaction:**
- * Internally renders as an `<a>` element to support native link behavior when
- * an `href` is provided, but behaves visually as a tab button. It displays a
- * text label and an optional Material icon. If the parent `<moni-tabs>` has the
- * `vertical` attribute set, the layout automatically adjusts to stack the icon
- * above the text.
+ * **Diseño visual e interacción:**
+ * Internamente se renderiza como un elemento `<a>` para soportar el comportamiento nativo
+ * de enlace cuando se proporciona un `href`, pero se comporta visualmente como un botón de pestaña.
+ * Muestra una etiqueta de texto y un icono opcional de Material. Si el `<moni-tabs>` padre tiene el
+ * atributo `vertical` configurado, el diseño se ajusta automáticamente para apilar el icono
+ * encima del texto.
  *
- * **State:**
- * The `active` attribute highlights the tab, applying the primary color to the
- * text and rendering the active indicator line (handled via CSS in the parent
- * container or pseudo-elements).
+ * **Estado:**
+ * El atributo `active` resalta la pestaña, aplicando el color principal (primary) al
+ * texto y renderizando la línea indicadora activa (manejado vía CSS en el contenedor
+ * padre o mediante pseudo-elementos).
  *
  * @example
  * ```html
  * <moni-tabs>
- *   <moni-tab active icon="home" label="Home"></moni-tab>
- *   <moni-tab icon="settings" label="Settings" href="/settings"></moni-tab>
+ *   <moni-tab active icon="home" label="Inicio"></moni-tab>
+ *   <moni-tab icon="settings" label="Ajustes" href="/settings"></moni-tab>
  * </moni-tabs>
  * ```
  *
- * @csspart tab - The inner `<a>` element acting as the tab button.
+ * @csspart tab - El elemento `<a>` interno que actúa como botón de pestaña.
  */
 export declare class MoniTab extends MoniElement {
     active: boolean;
@@ -43,6 +43,14 @@ export declare class MoniTab extends MoniElement {
     label: string;
     href: string;
     static styles: import("lit").CSSResult[];
+    /**
+     * Renderiza el botón de pestaña con un icono opcional y etiqueta.
+     *
+     * El botón de pestaña es un elemento `<a>` con `aria-selected` para
+     * cumplimiento WCAG. La clase `active` controla la transición de subrayado
+     * del indicador CSS (a través del pseudo-elemento `::before`). El `<moni-icon>`
+     * opcional se renderiza antes del texto de la etiqueta cuando se establece `icon`.
+     */
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/dist/components/moni-tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"moni-tab.d.ts","sourceRoot":"","sources":["../../src/components/moni-tab.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AAExB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,qBACa,OAAQ,SAAQ,WAAW;IACK,MAAM,UAAS;IAC9B,IAAI,SAAM;IACV,KAAK,SAAM;IACX,IAAI,SAAO;IAExC,OAAgB,MAAM,4BAuFpB;IAEO,MAAM;CAaf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD;AAED,eAAe,OAAO,CAAC"}
+{"version":3,"file":"moni-tab.d.ts","sourceRoot":"","sources":["../../src/components/moni-tab.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AAExB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,qBACa,OAAQ,SAAQ,WAAW;IACK,MAAM,UAAS;IAC9B,IAAI,SAAM;IACV,KAAK,SAAM;IACX,IAAI,SAAO;IAExC,OAAgB,MAAM,4BAuFpB;IAEF;;;;;;;OAOG;IACM,MAAM;CAaf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD;AAED,eAAe,OAAO,CAAC"}