@moni-labs/moni-ui 0.3.1 → 0.3.2

package/dist/components/moni-split-button.d.ts

@@ -6,51 +6,96 @@
  */
 import { MoniElement } from './_base/index.js';
 /**
- * Material Design 3 Split Button component.
+ * Componente Material Design 3 Split Button (Botón dividido).
  *
- * A split button combines a primary action button with a secondary dropdown
- * button. The two buttons sit flush against each other, typically sharing
- * a background color and elevation, but separated by a distinct border.
+ * 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.
  *
- * **Visual architecture:**
- * The component acts as a layout container (`display: inline-flex`) that
- * groups two standard buttons. It overrides the margins of the trailing
- * button to create the "connected" look (similar to connected button groups).
+ * **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).
  *
- * **Usage:**
- * Consumers must provide exactly two buttons via the named slots:
- * - `slot="leading-button"` — The primary action (usually text or text+icon).
- * - `slot="trailing-button"` — The secondary action (usually just a dropdown icon).
+ * **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).
  *
- * Both buttons should be standard `<moni-button>` or `<moni-icon-button>`
- * elements configured with matching variants for a cohesive appearance.
+ * Ambos botones deben ser elementos `<moni-button>` o `<moni-icon-button>` estándar
+ * configurados con variantes coincidentes para una apariencia cohesiva.
  *
  * @example
  * ```html
  * <moni-split-button variant="filled">
- *   <moni-button slot="leading-button" icon="send">Send</moni-button>
+ *   <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>Schedule send...</moni-menu-item>
+ *   <moni-menu-item>Programar envío...</moni-menu-item>
  * </moni-menu>
  * ```
  *
- * @slot leading-button  - The primary action button on the left.
- * @slot trailing-button - The secondary action (dropdown trigger) on the right.
+ * @slot leading-button  - El botón de acción principal a la izquierda.
+ * @slot trailing-button - La acción secundaria (disparador desplegable) a la derecha.
  */
 export declare class MoniSplitButton extends MoniElement {
+    /**
+     * Variante visual del contenedor del botón dividido.
+     * Pasa las sugerencias de estilo apropiadas a sus hijos.
+     * @type {'filled' | 'tonal' | 'outlined' | 'elevated'}
+     * @default 'filled'
+     */
     variant: 'filled' | 'tonal' | 'outlined' | 'elevated';
+    /**
+     * Tamaño global aplicado a ambos botones en los slots.
+     * @type {'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'extra'}
+     * @default 'medium'
+     */
     size: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'extra';
+    /**
+     * El espacio (gap) CSS entre los botones líder y posterior.
+     * Normalmente 1px o 0 según la especificación M3.
+     * @type {string}
+     */
     gap: string;
     private leadingElements;
     private trailingElements;
     static styles: import("lit").CSSResult[];
+    /**
+     * Hook del ciclo de vida reactivo (Lit).
+     * Responde a cualquier cambio en `variant`, `size` o `gap`
+     * forzando una actualización hacia todos los botones anidados.
+     */
     protected updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    /**
+     * Manejador del slot change.
+     * Cuando los botones líder o cola se inyectan en el DOM,
+     * propaga las configuraciones físicas.
+     */
     private handleSlotChange;
     private getGapValue;
+    /**
+     * Sincronizador de Propiedades.
+     * Distingue explícitamente entre el botón primario (leading) y el secundario (trailing)
+     * que usualmente alberga un ícono de dropdown. A cada uno se le inyecta un `shape`
+     * distinto (`left-round-flat` vs `right-round-flat`) para que juntos formen una cápsula pill uniforme.
+     */
     private updateChildren;
+    /**
+     * Renderiza el botón dividido como un control compuesto: botón de acción principal + disparador desplegable.
+     *
+     * **Diseño de dos zonas:**
+     * - Botón principal (zona líder) — la acción principal; lleva el `icon` y
+     *   la etiqueta del slot por defecto. Al hacer clic se dispara el evento principal `click`.
+     * - Disparador desplegable (zona posterior) — un botón de icono secundario (icono `expand_more`)
+     *   que abre el menú desplegable. Ambas zonas comparten el mismo `variant` y `size`.
+     *
+     * **Borde compartido:**
+     * Los dos botones usan los atributos de forma (shape) `left-round` / `right-round` para
+     * crear una sola píldora (pill) conectada con un borde interior compartido.
+     */
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/dist/components/moni-split-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"moni-split-button.d.ts","sourceRoot":"","sources":["../../src/components/moni-split-button.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,qBACa,eAAgB,SAAQ,WAAW;IAE/C,OAAO,EAAE,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,CAAY;IAGjE,IAAI,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAG9E,GAAG,SAAM;IAGT,OAAO,CAAC,eAAe,CAAiB;IAGxC,OAAO,CAAC,gBAAgB,CAAiB;IAEzC,OAAgB,MAAM,4BAoBpB;cAEiB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAOpF,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,cAAc;IAuBb,MAAM;CAYf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD;AAED,eAAe,eAAe,CAAC"}
+{"version":3,"file":"moni-split-button.d.ts","sourceRoot":"","sources":["../../src/components/moni-split-button.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,qBACa,eAAgB,SAAQ,WAAW;IAC/C;;;;;OAKG;IAEH,OAAO,EAAE,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,CAAY;IAEjE;;;;OAIG;IAEH,IAAI,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE9E;;;;OAIG;IAEH,GAAG,SAAM;IAGT,OAAO,CAAC,eAAe,CAAiB;IAGxC,OAAO,CAAC,gBAAgB,CAAiB;IAEzC,OAAgB,MAAM,4BAoBpB;IAEF;;;;OAIG;cACgB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAOpF;;;;OAIG;IACH,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,WAAW;IAWnB;;;;;OAKG;IACH,OAAO,CAAC,cAAc;IAuBtB;;;;;;;;;;;;OAYG;IACM,MAAM;CAYf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD;AAED,eAAe,eAAe,CAAC"}

package/dist/components/moni-split-button.js

@@ -14,45 +14,61 @@ import { html, css } from 'lit';
 import { customElement, property, queryAssignedElements } from 'lit/decorators.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
 /**
- * Material Design 3 Split Button component.
+ * Componente Material Design 3 Split Button (Botón dividido).
  *
- * A split button combines a primary action button with a secondary dropdown
- * button. The two buttons sit flush against each other, typically sharing
- * a background color and elevation, but separated by a distinct border.
+ * 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.
  *
- * **Visual architecture:**
- * The component acts as a layout container (`display: inline-flex`) that
- * groups two standard buttons. It overrides the margins of the trailing
- * button to create the "connected" look (similar to connected button groups).
+ * **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).
  *
- * **Usage:**
- * Consumers must provide exactly two buttons via the named slots:
- * - `slot="leading-button"` — The primary action (usually text or text+icon).
- * - `slot="trailing-button"` — The secondary action (usually just a dropdown icon).
+ * **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).
  *
- * Both buttons should be standard `<moni-button>` or `<moni-icon-button>`
- * elements configured with matching variants for a cohesive appearance.
+ * Ambos botones deben ser elementos `<moni-button>` o `<moni-icon-button>` estándar
+ * configurados con variantes coincidentes para una apariencia cohesiva.
  *
  * @example
  * ```html
  * <moni-split-button variant="filled">
- *   <moni-button slot="leading-button" icon="send">Send</moni-button>
+ *   <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>Schedule send...</moni-menu-item>
+ *   <moni-menu-item>Programar envío...</moni-menu-item>
  * </moni-menu>
  * ```
  *
- * @slot leading-button  - The primary action button on the left.
- * @slot trailing-button - The secondary action (dropdown trigger) on the right.
+ * @slot leading-button  - El botón de acción principal a la izquierda.
+ * @slot trailing-button - La acción secundaria (disparador desplegable) a la derecha.
  */
 let MoniSplitButton = class MoniSplitButton extends MoniElement {
     constructor() {
         super(...arguments);
+        /**
+         * Variante visual del contenedor del botón dividido.
+         * Pasa las sugerencias de estilo apropiadas a sus hijos.
+         * @type {'filled' | 'tonal' | 'outlined' | 'elevated'}
+         * @default 'filled'
+         */
         this.variant = 'filled';
+        /**
+         * Tamaño global aplicado a ambos botones en los slots.
+         * @type {'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'extra'}
+         * @default 'medium'
+         */
         this.size = 'medium';
+        /**
+         * El espacio (gap) CSS entre los botones líder y posterior.
+         * Normalmente 1px o 0 según la especificación M3.
+         * @type {string}
+         */
         this.gap = '';
     }
     static { this.styles = [
@@ -76,12 +92,22 @@ let MoniSplitButton = class MoniSplitButton extends MoniElement {
 			}
 		`
     ]; }
+    /**
+     * Hook del ciclo de vida reactivo (Lit).
+     * Responde a cualquier cambio en `variant`, `size` o `gap`
+     * forzando una actualización hacia todos los botones anidados.
+     */
     updated(changedProperties) {
         super.updated(changedProperties);
         if (changedProperties.has('variant') || changedProperties.has('size') || changedProperties.has('gap')) {
             this.updateChildren();
         }
     }
+    /**
+     * Manejador del slot change.
+     * Cuando los botones líder o cola se inyectan en el DOM,
+     * propaga las configuraciones físicas.
+     */
     handleSlotChange() {
         this.updateChildren();
     }
@@ -101,6 +127,12 @@ let MoniSplitButton = class MoniSplitButton extends MoniElement {
             return '0.5rem';
         return gap;
     }
+    /**
+     * Sincronizador de Propiedades.
+     * Distingue explícitamente entre el botón primario (leading) y el secundario (trailing)
+     * que usualmente alberga un ícono de dropdown. A cada uno se le inyecta un `shape`
+     * distinto (`left-round-flat` vs `right-round-flat`) para que juntos formen una cápsula pill uniforme.
+     */
     updateChildren() {
         const leading = this.leadingElements.find((el) => el.tagName.toLowerCase() === 'moni-button' || el.tagName.toLowerCase() === 'moni-icon-button');
         const trailing = this.trailingElements.find((el) => el.tagName.toLowerCase() === 'moni-button' || el.tagName.toLowerCase() === 'moni-icon-button');
@@ -116,6 +148,19 @@ let MoniSplitButton = class MoniSplitButton extends MoniElement {
             trailing.setAttribute('variant', this.variant);
         }
     }
+    /**
+     * Renderiza el botón dividido como un control compuesto: botón de acción principal + disparador desplegable.
+     *
+     * **Diseño de dos zonas:**
+     * - Botón principal (zona líder) — la acción principal; lleva el `icon` y
+     *   la etiqueta del slot por defecto. Al hacer clic se dispara el evento principal `click`.
+     * - Disparador desplegable (zona posterior) — un botón de icono secundario (icono `expand_more`)
+     *   que abre el menú desplegable. Ambas zonas comparten el mismo `variant` y `size`.
+     *
+     * **Borde compartido:**
+     * Los dos botones usan los atributos de forma (shape) `left-round` / `right-round` para
+     * crear una sola píldora (pill) conectada con un borde interior compartido.
+     */
     render() {
         const resolvedGap = this.getGapValue(this.gap);
         const inlineStyles = resolvedGap

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

@@ -7,42 +7,42 @@
 import { MoniElement } from './_base/index.js';
 import './moni-icon.js';
 /**
- * Material Design 3 Step component.
+ * Componente Material Design 3 Step (Paso).
  *
- * An individual step within a `<moni-stepper>`. Steps display progress through
- * a sequence of logical and numbered operations.
+ * 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.
  *
- * **M3 spec reference:** `m3-docs/components/progress-indicators/specs.md` (Stepper pattern)
+ * **Referencia a la especificación M3:** `m3-docs/components/progress-indicators/specs.md` (Patrón Stepper)
  *
- * **Anatomy & Visuals:**
- * A step renders a circular indicator containing either its sequence number
- * (automatically injected by the parent stepper) or a custom icon. Below or
- * beside the indicator (depending on the parent's `orientation`), it renders
- * the `title` and an optional `description`.
+ * **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.
  *
- * **State management:**
- * The parent `<moni-stepper>` automatically calculates and injects the `index`,
- * `active`, and `completed` properties based on its current state.
- * - **Active:** Highlighted with the primary color, indicating the current step.
- * - **Completed:** Displayed with a solid primary background and a checkmark
- *   icon (`completed` state overrides the numeric index).
+ * **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).
  *
  * @example
  * ```html
- * <!-- Typically used inside a stepper -->
+ * <!-- Típicamente usado dentro de un stepper -->
  * <moni-stepper current="1">
- *   <moni-step title="Shipping" description="Enter address"></moni-step>
- *   <moni-step title="Payment" description="Credit card details"></moni-step>
- *   <moni-step title="Review" description="Confirm order"></moni-step>
+ *   <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>
  *
- * <!-- Overriding the icon -->
- * <moni-step title="Done" icon="celebration"></moni-step>
+ * <!-- Anulando el icono -->
+ * <moni-step title="Hecho" icon="celebration"></moni-step>
  * ```
  *
- * @csspart step-indicator - The circular badge containing the number/icon.
- * @csspart title          - The main title text.
- * @csspart description    - The secondary description text.
+ * @csspart step-indicator - La insignia circular que contiene el número/icono.
+ * @csspart title          - El texto principal del título.
+ * @csspart description    - El texto secundario de la descripción.
  */
 export declare class MoniStep extends MoniElement {
     title: string;
@@ -52,6 +52,18 @@ export declare class MoniStep extends MoniElement {
     icon: string;
     index: number;
     static styles: import("lit").CSSResult[];
+    /**
+     * Renderiza el indicador del paso y la etiqueta (el conector se hace vía CSS ::after).
+     *
+     * **Indicador de paso (Step indicator):**
+     * - `completed=true` — muestra un icono de marca de verificación.
+     * - `active=true` — muestra el número de paso en un contenedor resaltado (vía CSS).
+     * - De lo contrario — muestra el número de paso en un estilo tenue.
+     *
+     * **Contenido del Slot:**
+     * El slot por defecto permite a los consumidores proyectar contenido personalizado
+     * dentro del cuerpo del paso.
+     */
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"moni-step.d.ts","sourceRoot":"","sources":["../../src/components/moni-step.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AAExB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,qBACa,QAAS,SAAQ,WAAW;IACX,KAAK,SAAM;IACX,WAAW,SAAM;IACF,MAAM,UAAS;IACf,SAAS,UAAS;IACjC,IAAI,SAAM;IACI,KAAK,SAAK;IAErD,OAAgB,MAAM,4BAqGpB;IAEO,MAAM;CAkBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD;AAED,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"moni-step.d.ts","sourceRoot":"","sources":["../../src/components/moni-step.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AAExB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,qBACa,QAAS,SAAQ,WAAW;IACX,KAAK,SAAM;IACX,WAAW,SAAM;IACF,MAAM,UAAS;IACf,SAAS,UAAS;IACjC,IAAI,SAAM;IACI,KAAK,SAAK;IAErD,OAAgB,MAAM,4BAqGpB;IAEF;;;;;;;;;;;OAWG;IACM,MAAM;CAkBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD;AAED,eAAe,QAAQ,CAAC"}

package/dist/components/moni-step.js

@@ -15,42 +15,42 @@ import { customElement, property } from 'lit/decorators.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
 import './moni-icon.js';
 /**
- * Material Design 3 Step component.
+ * Componente Material Design 3 Step (Paso).
  *
- * An individual step within a `<moni-stepper>`. Steps display progress through
- * a sequence of logical and numbered operations.
+ * 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.
  *
- * **M3 spec reference:** `m3-docs/components/progress-indicators/specs.md` (Stepper pattern)
+ * **Referencia a la especificación M3:** `m3-docs/components/progress-indicators/specs.md` (Patrón Stepper)
  *
- * **Anatomy & Visuals:**
- * A step renders a circular indicator containing either its sequence number
- * (automatically injected by the parent stepper) or a custom icon. Below or
- * beside the indicator (depending on the parent's `orientation`), it renders
- * the `title` and an optional `description`.
+ * **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.
  *
- * **State management:**
- * The parent `<moni-stepper>` automatically calculates and injects the `index`,
- * `active`, and `completed` properties based on its current state.
- * - **Active:** Highlighted with the primary color, indicating the current step.
- * - **Completed:** Displayed with a solid primary background and a checkmark
- *   icon (`completed` state overrides the numeric index).
+ * **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).
  *
  * @example
  * ```html
- * <!-- Typically used inside a stepper -->
+ * <!-- Típicamente usado dentro de un stepper -->
  * <moni-stepper current="1">
- *   <moni-step title="Shipping" description="Enter address"></moni-step>
- *   <moni-step title="Payment" description="Credit card details"></moni-step>
- *   <moni-step title="Review" description="Confirm order"></moni-step>
+ *   <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>
  *
- * <!-- Overriding the icon -->
- * <moni-step title="Done" icon="celebration"></moni-step>
+ * <!-- Anulando el icono -->
+ * <moni-step title="Hecho" icon="celebration"></moni-step>
  * ```
  *
- * @csspart step-indicator - The circular badge containing the number/icon.
- * @csspart title          - The main title text.
- * @csspart description    - The secondary description text.
+ * @csspart step-indicator - La insignia circular que contiene el número/icono.
+ * @csspart title          - El texto principal del título.
+ * @csspart description    - El texto secundario de la descripción.
  */
 let MoniStep = class MoniStep extends MoniElement {
     constructor() {
@@ -96,11 +96,11 @@ let MoniStep = class MoniStep extends MoniElement {
 				min-block-size: 4rem;
 			}
 
-			/* Vertical connector. Geometry: the dot occupies y=0 to y=2rem at
-			   the top of the step (host is column flex with min-block-size 4rem).
-			   The connector runs from the BOTTOM of the current dot (y=2rem) to
-			   the BOTTOM of the current step (y=100%). This formula stays
-			   calibrated regardless of step height. */
+			/* Conector vertical. Geometría: el punto (dot) ocupa y=0 a y=2rem en
+			   la parte superior del paso (el host es flex de columna con min-block-size 4rem).
+			   El conector va desde la parte INFERIOR del punto actual (y=2rem) hasta
+			   la parte INFERIOR del paso actual (y=100%). Esta fórmula se mantiene
+			   calibrada independientemente de la altura del paso. */
 			:host-context(moni-stepper[orientation='vertical']):host(:not(:last-child))::after {
 				position: absolute;
 				inset-inline-start: calc(1rem - 0.03125rem);
@@ -164,6 +164,18 @@ let MoniStep = class MoniStep extends MoniElement {
 			}
 		`
     ]; }
+    /**
+     * Renderiza el indicador del paso y la etiqueta (el conector se hace vía CSS ::after).
+     *
+     * **Indicador de paso (Step indicator):**
+     * - `completed=true` — muestra un icono de marca de verificación.
+     * - `active=true` — muestra el número de paso en un contenedor resaltado (vía CSS).
+     * - De lo contrario — muestra el número de paso en un estilo tenue.
+     *
+     * **Contenido del Slot:**
+     * El slot por defecto permite a los consumidores proyectar contenido personalizado
+     * dentro del cuerpo del paso.
+     */
     render() {
         const dot = this.completed
             ? html `<moni-icon name="check"></moni-icon>`

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

@@ -6,61 +6,98 @@
  */
 import { MoniElement } 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>`.
  */
 export declare class MoniStepper extends MoniElement {
     orientation: 'horizontal' | 'vertical';
     current: number;
     private _steps;
+    /**
+     * 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: Map<string, unknown>): void;
     /**
-     * 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.
      *
-     * Deferred to a microtask so that slotted children are guaranteed
-     * to have finished their first update cycle before we write to them.
+     * **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.
+     *
+     * **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`.
      */
     private _syncSteps;
     static styles: import("lit").CSSResult[];
+    /**
+     * 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(): import("lit").TemplateResult<1>;
+    /**
+     * 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.
+     */
     private _onSlotChange;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"moni-stepper.d.ts","sourceRoot":"","sources":["../../src/components/moni-stepper.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAG7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,qBACa,WAAY,SAAQ,WAAW;IAE3C,WAAW,EAAE,YAAY,GAAG,UAAU,CAAgB;IACX,OAAO,SAAK;IAGvD,OAAO,CAAC,MAAM,CAAc;IAEnB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAU9C;;;;;;;;OAQG;IACH,OAAO,CAAC,UAAU;IAclB,OAAgB,MAAM,4BAwBpB;IAEO,MAAM;IAMf,OAAO,CAAC,aAAa,CAGnB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,WAAW,CAAC;KAC5B;CACD;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"moni-stepper.d.ts","sourceRoot":"","sources":["../../src/components/moni-stepper.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAG7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,qBACa,WAAY,SAAQ,WAAW;IAE3C,WAAW,EAAE,YAAY,GAAG,UAAU,CAAgB;IACX,OAAO,SAAK;IAGvD,OAAO,CAAC,MAAM,CAAc;IAE5B;;;;OAIG;IACM,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAU9C;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,OAAO,CAAC,UAAU;IAelB,OAAgB,MAAM,4BAwBpB;IAEF;;;;;;;;;;;;OAYG;IACM,MAAM;IAMf;;;;OAIG;IACH,OAAO,CAAC,aAAa,CAGnB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,WAAW,CAAC;KAC5B;CACD;AAED,eAAe,WAAW,CAAC"}