@moni-labs/moni-ui 0.3.0 → 0.3.2

package/src/components/moni-snackbar.test.ts

@@ -14,14 +14,14 @@ describe('moni-snackbar', () => {
 		el.remove();
 	});
 
-	it('renders a div with role=status and aria-live=polite (M3 spec)', async () => {
+	it('renderiza un div con role=status y aria-live=polite (especificación M3)', async () => {
 		await el.updateComplete;
 		const snack = el.shadowRoot?.querySelector('[part="snackbar"]');
 		expect(snack?.getAttribute('role')).toBe('status');
 		expect(snack?.getAttribute('aria-live')).toBe('polite');
 	});
 
-	it('reflects the active attribute on the host', async () => {
+	it('refleja el atributo active en el host', async () => {
 		el.active = true;
 		await el.updateComplete;
 		expect(el.hasAttribute('active')).toBe(true);
@@ -31,7 +31,7 @@ describe('moni-snackbar', () => {
 		expect(el.hasAttribute('active')).toBe(false);
 	});
 
-	it('reflects placement=bottom (default) and placement=top', async () => {
+	it('refleja placement=bottom (por defecto) y placement=top', async () => {
 		await el.updateComplete;
 		const snack = el.shadowRoot?.querySelector('[part="snackbar"]');
 		expect(snack?.classList.contains('bottom')).toBe(true);
@@ -42,7 +42,7 @@ describe('moni-snackbar', () => {
 		expect(snack2?.classList.contains('top')).toBe(true);
 	});
 
-	it('renders the text in the [part=text] span', async () => {
+	it('renderiza el texto en el span [part=text]', async () => {
 		el.text = 'File saved successfully';
 		await el.updateComplete;
 		const text = el.shadowRoot?.querySelector('[part="text"]');
@@ -53,7 +53,7 @@ describe('moni-snackbar', () => {
 		expect(t).toBe('File saved successfully');
 	});
 
-	it('renders the action label when set', async () => {
+	it('renderiza la etiqueta de acción cuando está establecida', async () => {
 		el.text = 'Item deleted';
 		el.action = 'Undo';
 		await el.updateComplete;
@@ -61,19 +61,19 @@ describe('moni-snackbar', () => {
 		expect(action?.textContent).toBe('Undo');
 	});
 
-	it('max-lines defaults to 2 (M3 spec)', async () => {
+	it('max-lines es 2 por defecto (especificación M3)', async () => {
 		await el.updateComplete;
 		expect(el.maxLines).toBe(2);
 		expect(el.getAttribute('max-lines')).toBe('2');
 	});
 
-	it('max-lines can be customized via attribute', async () => {
+	it('max-lines se puede personalizar mediante atributo', async () => {
 		el.maxLines = 3;
 		await el.updateComplete;
 		expect(el.getAttribute('max-lines')).toBe('3');
 	});
 
-	it('max-lines is forwarded to the inner element as a CSS custom property', async () => {
+	it('max-lines se reenvía al elemento interno como una propiedad personalizada de CSS', async () => {
 		el.maxLines = 4;
 		await el.updateComplete;
 		const snack = el.shadowRoot?.querySelector('[part="snackbar"]') as HTMLElement;

package/src/components/moni-snackbar.ts

@@ -11,76 +11,76 @@ import { MoniElement, sharedStyles } from './_base/index.js';
 import './moni-icon.js';
 
 /**
- * Material Design 3 Snackbar component.
+ * Componente Material Design 3 Snackbar (Barra de notificaciones).
  *
- * Snackbars provide brief messages about app processes at the bottom of the
- * screen. They disappear automatically and do not require user action,
- * but may contain a single optional action.
+ * Los snackbars proporcionan mensajes breves sobre los procesos de la aplicación en la parte
+ * inferior de la pantalla. Desaparecen automáticamente y no requieren acción del usuario,
+ * pero pueden contener una única acción opcional.
  *
- * **M3 spec reference:** `m3-docs/components/snackbar/specs.md`
+ * **Referencia a la especificación M3:** `m3-docs/components/snackbar/specs.md`
  *
- * **Positioning model:**
- * The snackbar uses `position: fixed` so it renders in the viewport
- * regardless of which element it is placed in the DOM. The host element
- * displays as `block` rather than `contents` to ensure `position: fixed`
- * inside the shadow root anchors to the viewport (not to a stacking context
- * created by a transformed ancestor).
+ * **Modelo de posicionamiento:**
+ * El snackbar utiliza `position: fixed` para que se renderice en la ventana gráfica (viewport)
+ * independientemente del elemento en el que esté ubicado en el DOM. El elemento host
+ * se muestra como `block` en lugar de `contents` para asegurar que `position: fixed`
+ * dentro del shadow root se ancle a la ventana gráfica (no a un contexto de apilamiento
+ * creado por un ancestro transformado).
  *
- * **Show/hide mechanism:**
- * Visibility is controlled by `:host([active]) .snackbar` via CSS
- * `opacity`, `visibility`, and `transform`. This mirrors BeerCSS's
- * `.snackbar.active` pattern and allows CSS transition animations.
+ * **Mecanismo de mostrar/ocultar:**
+ * La visibilidad es controlada por `:host([active]) .snackbar` a través de CSS
+ * `opacity`, `visibility`, y `transform`. Esto imita el patrón `.snackbar.active`
+ * de BeerCSS y permite animaciones de transición CSS.
  *
- * **M3 text truncation:**
- * The message text is clamped to `maxLines` lines with `-webkit-line-clamp`.
- * The M3 spec requires a maximum of 2 lines; consumers can override this
- * via the `max-lines` attribute.
+ * **Truncamiento de texto M3:**
+ * El texto del mensaje se limita a `maxLines` líneas con `-webkit-line-clamp`.
+ * La especificación M3 requiere un máximo de 2 líneas; los consumidores pueden
+ * anular esto a través del atributo `max-lines`.
  *
  * @example
  * ```ts
  * const snackbar = document.querySelector('moni-snackbar') as MoniSnackbar;
  *
- * // Show for 3 seconds
- * snackbar.text = 'Item deleted';
- * snackbar.action = 'Undo';
+ * // Mostrar por 3 segundos
+ * snackbar.text = 'Elemento eliminado';
+ * snackbar.action = 'Deshacer';
  * snackbar.active = true;
  * setTimeout(() => { snackbar.active = false; }, 3000);
  * ```
  *
- * @slot default - Additional content placed inside the snackbar container.
+ * @slot default - Contenido adicional colocado dentro del contenedor del snackbar.
  *
- * @csspart snackbar - The inner snackbar container element.
- * @csspart text     - The message text element.
- * @csspart action   - The action button element.
+ * @csspart snackbar - El elemento contenedor interno del snackbar.
+ * @csspart text     - El elemento del texto del mensaje.
+ * @csspart action   - El elemento del botón de acción.
  */
 @customElement('moni-snackbar')
 export class MoniSnackbar extends MoniElement {
 	/**
-	 * The main message text displayed in the snackbar.
+	 * El texto del mensaje principal mostrado en el snackbar.
 	 *
-	 * Clamped to `maxLines` lines. Long messages are truncated with `…`.
-	 * Per M3 spec, keep messages short and informative (under 60 characters).
+	 * Limitado a `maxLines` líneas. Los mensajes largos se truncan con `…`.
+	 * Según la especificación M3, mantenga los mensajes cortos e informativos (menos de 60 caracteres).
 	 *
 	 * @default ''
 	 */
 	@property({ reflect: true }) text = '';
 
 	/**
-	 * Label for the optional action button.
+	 * Etiqueta para el botón de acción opcional.
 	 *
-	 * When non-empty, renders a text button on the trailing edge of the snackbar.
-	 * The component dispatches a `'action'` event when the action is clicked.
-	 * This is a visual-only label — the consumer handles the action logic.
+	 * Cuando no está vacía, renderiza un botón de texto en el borde posterior (trailing) del snackbar.
+	 * El componente despacha un evento `'action'` cuando se hace clic en la acción.
+	 * Esta es una etiqueta puramente visual — el consumidor maneja la lógica de la acción.
 	 *
 	 * @default ''
 	 */
 	@property({ reflect: true }) action = '';
 
 	/**
-	 * Vertical placement of the snackbar on the screen.
+	 * Ubicación vertical del snackbar en la pantalla.
 	 *
-	 * - `'bottom'` (default) — Fixed 6rem from the bottom, centered horizontally.
-	 * - `'top'` — Fixed 6rem from the top, centered horizontally.
+	 * - `'bottom'` (por defecto) — Fijo a 6rem desde la parte inferior, centrado horizontalmente.
+	 * - `'top'` — Fijo a 6rem desde la parte superior, centrado horizontalmente.
 	 *
 	 * @default 'bottom'
 	 */
@@ -88,21 +88,21 @@ export class MoniSnackbar extends MoniElement {
 	placement: 'bottom' | 'top' = 'bottom';
 
 	/**
-	 * When `true`, the snackbar is visible.
+	 * Cuando es `true`, el snackbar es visible.
 	 *
-	 * Toggle this attribute to show/hide the snackbar. The CSS transition
-	 * handles the fade-in/slide-up animation automatically.
-	 * Consumers are responsible for implementing the auto-dismiss timer.
+	 * Alterne este atributo para mostrar/ocultar el snackbar. La transición CSS
+	 * maneja la animación de desvanecimiento/deslizamiento hacia arriba (fade-in/slide-up) automáticamente.
+	 * Los consumidores son responsables de implementar el temporizador de cierre automático.
 	 *
 	 * @default false
 	 */
 	@property({ type: Boolean, reflect: true }) active = false;
 
 	/**
-	 * Maximum number of lines of message text before it is clamped.
+	 * Número máximo de líneas del texto del mensaje antes de que sea limitado (clamped).
 	 *
-	 * Uses `-webkit-line-clamp` with `display: -webkit-box` for cross-browser
-	 * multi-line truncation. The M3 spec recommends a maximum of 2 lines.
+	 * Utiliza `-webkit-line-clamp` con `display: -webkit-box` para truncamiento multilínea
+	 * compatible en varios navegadores. La especificación M3 recomienda un máximo de 2 líneas.
 	 *
 	 * @default 2
 	 */
@@ -194,6 +194,16 @@ export class MoniSnackbar extends MoniElement {
 		`
 	];
 
+	/**
+	 * Renderiza el snackbar con su mensaje y el botón de acción opcional.
+	 *
+	 * El contenedor del snackbar utiliza `aria-live="polite"` para que los lectores
+	 * de pantalla anuncien el mensaje sin interrumpir el flujo de lectura actual del usuario.
+	 * Cuando se establece `action`, se renderiza un `<span>` como botón de acción según
+	 * la especificación del Snackbar de M3.
+	 * El atributo `placement` se asigna a una clase CSS que controla `inset-block-end`
+	 * (snackbar inferior) vs `inset-block-start` (snackbar superior).
+	 */
 	override render() {
 		return html`<div
 			class="snackbar ${this.placement}"

package/src/components/moni-split-button.ts

@@ -10,48 +10,64 @@ import { customElement, property, queryAssignedElements } from 'lit/decorators.j
 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.
  */
 @customElement('moni-split-button')
 export 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'
+	 */
 	@property({ reflect: true })
 	variant: 'filled' | 'tonal' | 'outlined' | 'elevated' = 'filled';
 
+	/**
+	 * Tamaño global aplicado a ambos botones en los slots.
+	 * @type {'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'extra'}
+	 * @default 'medium'
+	 */
 	@property({ reflect: true })
 	size: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'extra' = 'medium';
 
+	/**
+	 * El espacio (gap) CSS entre los botones líder y posterior.
+	 * Normalmente 1px o 0 según la especificación M3.
+	 * @type {string}
+	 */
 	@property()
 	gap = '';
 
@@ -83,6 +99,11 @@ export 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.
+	 */
 	protected override updated(changedProperties: Map<string | number | symbol, unknown>) {
 		super.updated(changedProperties);
 		if (changedProperties.has('variant') || changedProperties.has('size') || changedProperties.has('gap')) {
@@ -90,6 +111,11 @@ export class MoniSplitButton extends MoniElement {
 		}
 	}
 
+	/**
+	 * Manejador del slot change.
+	 * Cuando los botones líder o cola se inyectan en el DOM,
+	 * propaga las configuraciones físicas.
+	 */
 	private handleSlotChange() {
 		this.updateChildren();
 	}
@@ -105,6 +131,12 @@ export class MoniSplitButton extends MoniElement {
 		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.
+	 */
 	private updateChildren() {
 		const leading = this.leadingElements.find(
 			(el) => el.tagName.toLowerCase() === 'moni-button' || el.tagName.toLowerCase() === 'moni-icon-button'
@@ -128,6 +160,19 @@ export class MoniSplitButton extends MoniElement {
 		}
 	}
 
+	/**
+	 * 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.
+	 */
 	override render() {
 		const resolvedGap = this.getGapValue(this.gap);
 		const inlineStyles = resolvedGap

package/src/components/moni-step.test.ts

@@ -29,12 +29,12 @@ describe('moni-step vertical connectors (P2.2)', () => {
 		stepper.remove();
 	});
 
-	it('vertical orientation propagates to host', async () => {
+	it('la orientación vertical se propaga al host', async () => {
 		await stepper.updateComplete;
 		expect(stepper.getAttribute('orientation')).toBe('vertical');
 	});
 
-	it('three vertical steps render in document order', async () => {
+	it('tres pasos verticales se renderizan en orden de documento', async () => {
 		await stepper.updateComplete;
 		await stepA.updateComplete;
 		const steps = Array.from(stepper.querySelectorAll('moni-step'));
@@ -44,13 +44,13 @@ describe('moni-step vertical connectors (P2.2)', () => {
 		expect(steps[2]).toBe(stepC);
 	});
 
-	it('the last step has no connector (only :not(:last-child) have ::after)', async () => {
+	it('el último paso no tiene conector (solo :not(:last-child) tienen ::after)', async () => {
 		await stepper.updateComplete;
 		await stepC.updateComplete;
-		// The host :host(:not(:last-child))::after selector only applies
-		// to non-last steps. The last step should not have a visible connector
-		// pseudo-element. We can't easily read ::after in jsdom but we verify
-		// the last step exists and renders.
+		// El selector :host(:not(:last-child))::after del host solo se aplica
+		// a los pasos que no son el último. El último paso no debería tener un
+		// pseudo-elemento conector visible. No podemos leer fácilmente ::after en jsdom
+		// pero verificamos que el último paso exista y se renderice.
 		const lastDot = stepC.shadowRoot?.querySelector('.dot');
 		expect(lastDot).toBeTruthy();
 	});

package/src/components/moni-step.ts

@@ -11,42 +11,42 @@ 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.
  */
 @customElement('moni-step')
 export class MoniStep extends MoniElement {
@@ -91,11 +91,11 @@ export 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);
@@ -160,6 +160,18 @@ export 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.
+	 */
 	override render() {
 		const dot = this.completed
 			? html`<moni-icon name="check"></moni-icon>`

package/src/components/moni-stepper.test.ts

@@ -16,7 +16,7 @@ describe('moni-stepper / moni-step', () => {
 		el.remove();
 	});
 
-	it('renders an <ol> with a slot', async () => {
+	it('renderiza un <ol> con un slot', async () => {
 		await el.updateComplete;
 		const ol = el.shadowRoot?.querySelector('ol');
 		const slot = el.shadowRoot?.querySelector('slot');
@@ -24,19 +24,19 @@ describe('moni-stepper / moni-step', () => {
 		expect(slot).toBeTruthy();
 	});
 
-	it('reflects the orientation attribute', async () => {
+	it('refleja el atributo orientation', async () => {
 		el.orientation = 'vertical';
 		await el.updateComplete;
 		expect(el.getAttribute('orientation')).toBe('vertical');
 	});
 
-	it('reflects the current attribute as a number', async () => {
+	it('refleja el atributo current como un número', async () => {
 		el.current = 2;
 		await el.updateComplete;
 		expect(el.getAttribute('current')).toBe('2');
 	});
 
-	it('propagates current to children: sets active on the matching step', async () => {
+	it('propaga current a los hijos: establece active en el paso coincidente', async () => {
 		const step1 = document.createElement('moni-step') as MoniStep;
 		step1.title = 'One';
 		const step2 = document.createElement('moni-step') as MoniStep;
@@ -61,7 +61,7 @@ describe('moni-stepper / moni-step', () => {
 		expect(step3.completed).toBe(false);
 	});
 
-	it('sets index on each child from its position', async () => {
+	it('establece el índice en cada hijo según su posición', async () => {
 		const s1 = document.createElement('moni-step') as MoniStep;
 		const s2 = document.createElement('moni-step') as MoniStep;
 		const s3 = document.createElement('moni-step') as MoniStep;
@@ -77,7 +77,7 @@ describe('moni-stepper / moni-step', () => {
 		expect(s3.index).toBe(2);
 	});
 
-	it('marks all previous steps as completed', async () => {
+	it('marca todos los pasos anteriores como completados (completed)', async () => {
 		const s1 = document.createElement('moni-step') as MoniStep;
 		const s2 = document.createElement('moni-step') as MoniStep;
 		const s3 = document.createElement('moni-step') as MoniStep;
@@ -103,7 +103,7 @@ describe('moni-stepper / moni-step', () => {
 		expect(s4.active).toBe(false);
 	});
 
-	it('re-syncs when a step is added dynamically (slotchange)', async () => {
+	it('se resincroniza cuando se agrega un paso dinámicamente (slotchange)', async () => {
 		el.current = 0;
 		await el.updateComplete;
 		const s1 = document.createElement('moni-step') as MoniStep;